Terminal Memphis Pluralism

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

:root {
  --background: #FAF7EE;
  --foreground: #050505;
  --card: #FFFFFF;
  --card-foreground: #050505;
  --popover: #FFFFFF;
  --popover-foreground: #050505;
  --primary: #050505;
  --primary-foreground: #ffffff;
  --secondary: #F4E8CF;
  --secondary-foreground: #111111;
  --muted: #6D6A61;
  --muted-foreground: #050505;
  --accent: #00E5FF;
  --accent-foreground: #111111;
  --destructive: #FF2BA6;
  --border: #050505;
  --input: #050505;
  --ring: #00E5FF;
  --chart-1: #050505;
  --chart-2: #F4E8CF;
  --chart-3: #00E5FF;
  --chart-4: #39FF14;
  --chart-5: #FFE100;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #050505;
  --sidebar-primary: #050505;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #00E5FF;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #050505;
  --sidebar-ring: #00E5FF;
  --radius: 6px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #050505;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #00E5FF;
  --accent-foreground: #111111;
  --destructive: #FF2BA6;
  --border: #303642;
  --input: #303642;
  --ring: #00E5FF;
  --chart-1: #050505;
  --chart-2: #F4E8CF;
  --chart-3: #00E5FF;
  --chart-4: #39FF14;
  --chart-5: #FFE100;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #050505;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #00E5FF;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #00E5FF;
  --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 TerminalMemphisPluralismShadcnKit() {
  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">Terminal Memphis Pluralism</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",
  "cssVars": {
    "dark": {
      "accent": "#00D5FF",
      "accent-foreground": "#111111",
      "background": "#0f1115",
      "border": "#303642",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "chart-1": "#050505",
      "chart-2": "#F4EBD8",
      "chart-3": "#00D5FF",
      "chart-4": "#00D36F",
      "chart-5": "#FFD400",
      "destructive": "#FF2A7A",
      "foreground": "#f8fafc",
      "input": "#303642",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#050505",
      "primary-foreground": "#ffffff",
      "radius": "6px",
      "ring": "#00D5FF",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "sidebar": "#181b22",
      "sidebar-accent": "#00D5FF",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#050505",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#00D5FF"
    },
    "light": {
      "accent": "#00D5FF",
      "accent-foreground": "#111111",
      "background": "#F8F2E7",
      "border": "#050505",
      "card": "#FFFDF5",
      "card-foreground": "#050505",
      "chart-1": "#050505",
      "chart-2": "#F4EBD8",
      "chart-3": "#00D5FF",
      "chart-4": "#00D36F",
      "chart-5": "#FFD400",
      "destructive": "#FF2A7A",
      "foreground": "#050505",
      "input": "#050505",
      "muted": "#6C665C",
      "muted-foreground": "#050505",
      "popover": "#FFFDF5",
      "popover-foreground": "#050505",
      "primary": "#050505",
      "primary-foreground": "#ffffff",
      "radius": "6px",
      "ring": "#00D5FF",
      "secondary": "#F4EBD8",
      "secondary-foreground": "#111111",
      "sidebar": "#FFFDF5",
      "sidebar-accent": "#006BFF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#050505",
      "sidebar-foreground": "#050505",
      "sidebar-primary": "#050505",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#00D5FF"
    },
    "theme": {}
  },
  "meta": {
    "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",
    "languageId": "en-019e8a01-b832-7fd3-b8e9-1e24549e863b",
    "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"
      ]
    },
    "slug": "terminal-memphis-pluralism",
    "source": "katagami"
  },
  "name": "terminal-memphis-pluralism",
  "title": "Terminal Memphis Pluralism shadcn Theme",
  "type": "registry:theme"
}

# Terminal Memphis Pluralism shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate Terminal Memphis Pluralism into shadcn/ui without inventing a parallel component kit: a black-and-white manga/terminal interface with disciplined postmodern interruptions, offset object shadows, sparse Memphis state chips, and Swiss Punk labels that never compromise product usability.

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

## Token cues
Use background `{colors.background}` cream paper, surface `{colors.surface}` white panels, text/border `{colors.text}` black ink, accent `{colors.accent}` cyan, warning `{colors.warning}` yellow, error `{colors.error}` magenta, success `{colors.success}` terminal green. Heading uses `{typography.heading_font}`, body uses `{typography.body_font}`, machine labels use `{typography.mono_font}`. Prefer square or 2px control radii, 6px cards, and 2px-4px ink borders.

## Visual character to preserve
- Manga panel grid with hard ink borders, visible gutters, and offset cream/black object shadows.
- Accent tokens are functional stickers: command state, warning, selected tab, switch state, live row marker.
- One typographic anti-grid move per scene: rotated rail label, stepped mono caption, or overprinted status number.
- Halftone, hatching, registration crosses, and clipped geometry appear as sparse underlays, never as full-screen decoration.
- Technical controls remain compact, rectangular, and readable.

## ShadSync visual profile
family: terminal-memphis; material: inked-paper-laminate; contour: squared-object; border: heavy-ink; underlay: true; grain: halftone-sparse; stickerBadges: true; motion: stepped-snap; density: medium-high; accents: cyan, magenta, terminal-green, yellow.

## Signature component recipes
- button: primary is black fill with white text, 4px ink border, terminal-green offset shadow; secondary is white fill with magenta offset shadow; hover translates 2px with stepped timing.
- card: white manga panel, 2px/4px border, offset cream or black duplicate shadow, optional corner tab badge and sparse hatch underlay.
- input: square cream field with 2px black border; focus adds inset terminal-green cursor bar and hard black shadow.
- textarea: same as input, with monospace prompt text and a small cyan metadata badge in the label row.
- select: square field with bracket-like chevron, yellow selected-state chip, no rounded native styling.
- dialog: black-framed editorial panel on cream overlay, magenta warning tab for destructive flows, cyan registration crosses in the header.
- sheet: side manga page with vertical mono rail label and offset black shadow; content remains aligned to an 8px grid.
- tabs: tab list looks like clipped object labels; active tab is cyan or green with black border, inactive tabs stay white.
- badge: sticker chip with black border and tiny mono uppercase text; reserve magenta for errors/warnings.
- separator: black ink rule, occasionally dashed for registration guides.
- checkbox: square ink box; checked state is terminal-green fill with black bracket glyph.
- switch: rectangular command toggle with black track; active thumb snaps to green with 2-step motion.
- slider: black rail with square thumb and cyan tick chips; use for tuning agent parameters, not decoration.
- tooltip: compact cream note with black border, small triangular registration mark, monospace text.
- dropdown-menu: white object panel with offset shadow, mono item labels, and magenta/yellow state chips for risky actions.
- table: dense terminal data table with heavy header, black grid lines, and accent chips only in status columns.

## Preview shots
1. application-shell: command dashboard with rail, hero command card, status table, and Memphis state chips.
2. detail-editor: agent prompt editor with form controls, tabs, sheet, tooltip, switch, slider, and dialog state.
3. data-operations: table-first operations view with dropdown actions, badges, checkboxes, separators, and selected rows.

## Implementation contract
Import local shadcn primitives from `@/components/ui/*`; do not create a new component system. Preserve square controls, ink borders, sparse accent stickers, and offset object shadows. Use accents only for state. Keep labels legible even when one mono label rotates or overlaps a gutter.

## 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 { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

export function TerminalMemphisPanel() {
  return (
    <Card className="relative rounded-[6px] border-4 border-foreground bg-background shadow-[8px_8px_0_#050505] overflow-hidden">
      <div className="absolute right-4 top-[-10px] border-2 border-foreground bg-[#FF2BA6] px-2 py-1 font-mono text-xs font-bold text-white">LIVE</div>
      <CardHeader className="border-b-2 border-foreground">
        <Badge className="w-fit rounded-[2px] border-2 border-foreground bg-[#39FF14] font-mono text-black shadow-[3px_3px_0_#050505]">$ RUN_AGENT</Badge>
        <CardTitle className="font-heading text-4xl tracking-[-0.06em]">Plural command surface</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-4 p-5">
        <Tabs defaultValue="prompt">
          <TabsList className="rounded-none border-2 border-foreground bg-card">
            <TabsTrigger value="prompt" className="rounded-none data-[state=active]:bg-[#00E5FF]">Prompt</TabsTrigger>
            <TabsTrigger value="trace" className="rounded-none data-[state=active]:bg-[#FFE100]">Trace</TabsTrigger>
          </TabsList>
          <TabsContent value="prompt" className="grid gap-3">
            <Input className="rounded-[2px] border-2 border-foreground bg-[#FAF7EE] font-mono focus-visible:ring-0 focus-visible:shadow-[inset_5px_0_0_#39FF14,4px_4px_0_#050505]" defaultValue="katagami synth --plural" />
            <Button className="rounded-none border-4 border-foreground bg-foreground font-mono text-background shadow-[5px_5px_0_#39FF14] hover:translate-x-0.5 hover:translate-y-0.5">Run Agent</Button>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  );
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use square or lightly rounded shadcn primitive with black ink border, cream/white surface, offset object shadow when container-like, and sparse Memphis state chip accents derived from the component role."
    },
    {
      "component": "card",
      "recipe": "Use square or lightly rounded shadcn primitive with black ink border, cream/white surface, offset object shadow when container-like, and sparse Memphis state chip accents derived from the component role."
    },
    {
      "component": "input",
      "recipe": "Use square or lightly rounded shadcn primitive with black ink border, cream/white surface, offset object shadow when container-like, and sparse Memphis state chip accents derived from the component role."
    },
    {
      "component": "textarea",
      "recipe": "Use square or lightly rounded shadcn primitive with black ink border, cream/white surface, offset object shadow when container-like, and sparse Memphis state chip accents derived from the component role."
    },
    {
      "component": "select",
      "recipe": "Use square or lightly rounded shadcn primitive with black ink border, cream/white surface, offset object shadow when container-like, and sparse Memphis state chip accents derived from the component role."
    },
    {
      "component": "dialog",
      "recipe": "Use square or lightly rounded shadcn primitive with black ink border, cream/white surface, offset object shadow when container-like, and sparse Memphis state chip accents derived from the component role."
    },
    {
      "component": "sheet",
      "recipe": "Use square or lightly rounded shadcn primitive with black ink border, cream/white surface, offset object shadow when container-like, and sparse Memphis state chip accents derived from the component role."
    },
    {
      "component": "tabs",
      "recipe": "Use square or lightly rounded shadcn primitive with black ink border, cream/white surface, offset object shadow when container-like, and sparse Memphis state chip accents derived from the component role."
    },
    {
      "component": "badge",
      "recipe": "Use square or lightly rounded shadcn primitive with black ink border, cream/white surface, offset object shadow when container-like, and sparse Memphis state chip accents derived from the component role."
    },
    {
      "component": "separator",
      "recipe": "Use square or lightly rounded shadcn primitive with black ink border, cream/white surface, offset object shadow when container-like, and sparse Memphis state chip accents derived from the component role."
    },
    {
      "component": "checkbox",
      "recipe": "Use square or lightly rounded shadcn primitive with black ink border, cream/white surface, offset object shadow when container-like, and sparse Memphis state chip accents derived from the component role."
    },
    {
      "component": "switch",
      "recipe": "Use square or lightly rounded shadcn primitive with black ink border, cream/white surface, offset object shadow when container-like, and sparse Memphis state chip accents derived from the component role."
    },
    {
      "component": "slider",
      "recipe": "Use square or lightly rounded shadcn primitive with black ink border, cream/white surface, offset object shadow when container-like, and sparse Memphis state chip accents derived from the component role."
    },
    {
      "component": "tooltip",
      "recipe": "Use square or lightly rounded shadcn primitive with black ink border, cream/white surface, offset object shadow when container-like, and sparse Memphis state chip accents derived from the component role."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use square or lightly rounded shadcn primitive with black ink border, cream/white surface, offset object shadow when container-like, and sparse Memphis state chip accents derived from the component role."
    },
    {
      "component": "table",
      "recipe": "Use square or lightly rounded shadcn primitive with black ink border, cream/white surface, offset object shadow when container-like, and sparse Memphis state chip accents derived from the component role."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoidRules": [
        "no neon glow",
        "no decorative confetti background",
        "no rounded generic SaaS cards"
      ],
      "composition": "Desktop command shell with left rail, hero command card, compact status cards, and data table inside manga gutters.",
      "id": "application-shell",
      "mustShowStates": [
        "active cyan tab",
        "terminal-green run badge",
        "magenta warning badge",
        "hoverable black command button"
      ],
      "primitives": [
        "button",
        "card",
        "input",
        "tabs",
        "badge",
        "separator",
        "table",
        "tooltip",
        "dropdown-menu"
      ],
      "scene": {
        "actions": [
          "Run Agent",
          "Inspect Trace"
        ],
        "description": "A black-and-white command dashboard interrupted by functional Memphis object chips.",
        "eyebrow": "$ katagami / application shell",
        "headline": "Agent operations in plural panels",
        "rows": [
          {
            "module": "Prompt Router",
            "state": "active",
            "token": "green"
          },
          {
            "module": "Archive Quote",
            "state": "queued",
            "token": "cyan"
          },
          {
            "module": "Risk Gate",
            "state": "warn",
            "token": "magenta"
          }
        ],
        "stats": [
          {
            "label": "Panels",
            "value": "12"
          },
          {
            "label": "Warnings",
            "value": "03"
          },
          {
            "label": "Trace OK",
            "value": "98%"
          }
        ]
      }
    },
    {
      "avoidRules": [
        "do not make form fields soft or glassy",
        "do not hide form labels",
        "do not use color except as state"
      ],
      "composition": "Detail editor panel with prompt textarea, settings sheet, destructive confirmation dialog, and stepped controls.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused textarea with green cursor bar",
        "open sheet with vertical mono rail",
        "switch active",
        "slider thumb with cyan tick"
      ],
      "primitives": [
        "textarea",
        "select",
        "dialog",
        "sheet",
        "tabs",
        "badge",
        "switch",
        "slider",
        "checkbox",
        "button",
        "input",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Save Spec",
          "Open Sheet"
        ],
        "description": "A practical editor that allows one rotated annotation while every field remains readable.",
        "eyebrow": "editor / controlled illegibility",
        "fields": [
          {
            "label": "Prompt",
            "value": "plural manga terminal shell"
          },
          {
            "label": "Material",
            "value": "ink / cream / laminate"
          },
          {
            "label": "Risk mode",
            "value": "guarded"
          }
        ],
        "headline": "Tune synthesis without losing the command line",
        "stats": [
          {
            "label": "Temperature",
            "value": "0.42"
          },
          {
            "label": "Focus",
            "value": "ON"
          }
        ]
      }
    },
    {
      "avoidRules": [
        "no low-contrast table text",
        "no large decorative stickers in the table body",
        "no generic enterprise blue"
      ],
      "composition": "Table-first operations screen with dense terminal rows, selected checkboxes, dropdown row actions, and object-shadow batch card.",
      "id": "data-operations",
      "mustShowStates": [
        "selected row with yellow chip",
        "danger dropdown item with magenta badge",
        "green success status",
        "cyan info status"
      ],
      "primitives": [
        "table",
        "checkbox",
        "dropdown-menu",
        "badge",
        "separator",
        "button",
        "card",
        "input",
        "select",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Batch Route",
          "Export Trace"
        ],
        "description": "Operational clarity stays intact while postmodern object language marks state and lineage.",
        "eyebrow": "data operations / anti-modern shell",
        "headline": "Dense rows, hard borders, precise state color",
        "rows": [
          {
            "name": "Source / Emigre",
            "owner": "curator",
            "status": "indexed"
          },
          {
            "name": "Memphis Object Chips",
            "owner": "agent",
            "status": "mapped"
          },
          {
            "name": "Swiss Punk Labels",
            "owner": "design",
            "status": "review"
          }
        ],
        "stats": [
          {
            "label": "Rows",
            "value": "248"
          },
          {
            "label": "Selected",
            "value": "06"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "acid cyan",
      "warning magenta",
      "terminal green",
      "warm cream",
      "primary yellow"
    ],
    "border": "heavy-ink",
    "contour": "squared-object",
    "density": "medium-high",
    "family": "terminal-memphis",
    "grain": "halftone-sparse",
    "material": "inked-paper-laminate",
    "motion": "stepped-snap",
    "stickerBadges": true,
    "underlay": true
  }
}