Neo-Memphis Manga Terminal

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

:root {
  --background: #F7F3EA;
  --foreground: #111114;
  --card: #FFFFFF;
  --card-foreground: #111114;
  --popover: #FFFFFF;
  --popover-foreground: #111114;
  --primary: #0B0B0D;
  --primary-foreground: #ffffff;
  --secondary: #F4F0E8;
  --secondary-foreground: #111111;
  --muted: #5D5A55;
  --muted-foreground: #111114;
  --accent: #00E5FF;
  --accent-foreground: #111111;
  --destructive: #FF2C83;
  --border: #1B1B1E;
  --input: #1B1B1E;
  --ring: #00E5FF;
  --chart-1: #0B0B0D;
  --chart-2: #F4F0E8;
  --chart-3: #00E5FF;
  --chart-4: #12D678;
  --chart-5: #FFF03A;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #111114;
  --sidebar-primary: #0B0B0D;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #165DFF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #1B1B1E;
  --sidebar-ring: #00E5FF;
  --radius: 2px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #0B0B0D;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #00E5FF;
  --accent-foreground: #111111;
  --destructive: #FF2C83;
  --border: #303642;
  --input: #303642;
  --ring: #00E5FF;
  --chart-1: #0B0B0D;
  --chart-2: #F4F0E8;
  --chart-3: #00E5FF;
  --chart-4: #12D678;
  --chart-5: #FFF03A;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #0B0B0D;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #00E5FF;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #00E5FF;
  --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 NeoMemphisMangaTerminalShadcnKit() {
  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">Neo-Memphis Manga Terminal</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": "#00E5FF",
      "accent-foreground": "#111111",
      "background": "#0f1115",
      "border": "#303642",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "chart-1": "#0B0B0D",
      "chart-2": "#F4F0E8",
      "chart-3": "#00E5FF",
      "chart-4": "#12D678",
      "chart-5": "#FFF03A",
      "destructive": "#FF2C83",
      "foreground": "#f8fafc",
      "input": "#303642",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0B0B0D",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#00E5FF",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "sidebar": "#181b22",
      "sidebar-accent": "#00E5FF",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0B0B0D",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#00E5FF"
    },
    "light": {
      "accent": "#00E5FF",
      "accent-foreground": "#111111",
      "background": "#F7F3EA",
      "border": "#1B1B1E",
      "card": "#FFFFFF",
      "card-foreground": "#111114",
      "chart-1": "#0B0B0D",
      "chart-2": "#F4F0E8",
      "chart-3": "#00E5FF",
      "chart-4": "#12D678",
      "chart-5": "#FFF03A",
      "destructive": "#FF2C83",
      "foreground": "#111114",
      "input": "#1B1B1E",
      "muted": "#5D5A55",
      "muted-foreground": "#111114",
      "popover": "#FFFFFF",
      "popover-foreground": "#111114",
      "primary": "#0B0B0D",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#00E5FF",
      "secondary": "#F4F0E8",
      "secondary-foreground": "#111111",
      "sidebar": "#FFFFFF",
      "sidebar-accent": "#165DFF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#1B1B1E",
      "sidebar-foreground": "#111114",
      "sidebar-primary": "#0B0B0D",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#00E5FF"
    },
    "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-019e89c9-fb0f-7e73-8272-5b39aa7881fc",
    "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": "neo-memphis-manga-terminal",
    "source": "katagami"
  },
  "name": "neo-memphis-manga-terminal",
  "title": "Neo-Memphis Manga Terminal shadcn Theme",
  "type": "registry:theme"
}

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

## Intent
Translate Neo-Memphis Manga Terminal into local shadcn/ui primitives for real agentic applications. Preserve manga panel structure, terminal caption bars, semantic Memphis geometry, hard ink borders, dense readable data layouts, and black/white dominance with restrained cyan, magenta, yellow, cobalt, and green state markers.

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

## Token cues
- Primary ink: #0B0B0D; background paper: #F7F3EA; surface: #FFFFFF; text: #111114; border: #1B1B1E.
- Accents: cyan #00E5FF, warning #FFF03A, error #FF2C83, success #12D678, info #165DFF.
- Fonts: heading Barlow Condensed, body Noto Sans, mono IBM Plex Mono.

## Visual character to preserve
- Use a strict black and warm-white panel field with 2px charcoal rules, offset by occasional 6px Memphis color tabs anchored to component corners.
- Build screens from manga-like asymmetric panels: thick outer frame, nested gutters, speech-caption labels, and cropped diagonal cutlines made with clip-path.
- Render terminal content in dense mono strips with inverted headers, dotted halftone underlays, square focus rings, and visible command-state prefixes.
- Reserve cyan, magenta, acid yellow, and cobalt for semantic geometric marks only: status chips, warning triangles, active tabs, and link rails.
- Place small historic-quotation ornaments as functional signage: bracket labels, registration crosses, index numbers, and torn sticker badges with no shadows.

## ShadSync visual profile
family: neo-memphis-manga-terminal
material: inked warm-paper terminal panels
contour: square manga panels with occasional diagonal active notch
border: 2px black ink with dashed interior separators
underlay: clipped halftone dots in inactive regions
grain: false
stickerBadges: true
motion: step-snap with hard offset shadow movement
density: high-readable operational
accents: semantic cyan, magenta, acid yellow, cobalt, green

## Signature component recipes
- button: Square uppercase IBM Plex Mono command button. Primary is black fill with paper text, secondary is warm paper with 2px ink border, focus uses acid-yellow offset ring, press moves by 2px and removes hard shadow.
- card: Use Card as manga panel: 2px ink border, hard 4px offset shadow, CardHeader as inverse black caption strip, CardContent as white/paper body, one 6px semantic tab on active cards only.
- input: Paper terminal field with 2px black border, mono value text, square focus outline in acid yellow, no rounded SaaS pill styling, optional bracket prefix label.
- textarea: Log editor field on warm paper with dashed horizontal guide lines, mono text, black caption label, visible resize grip kept square and inked.
- select: Square SelectTrigger with mono selected value, 2px ink border, cobalt active side marker, dropdown content as paper menu with dashed separators.
- dialog: DialogContent is a thick framed command panel with black title strip, clipped diagonal corner for active state, semantic tab identifying destructive/warning/info mode.
- sheet: Side Sheet behaves like a terminal rail: black caption, stacked mono command rows, strong border, no blur/glass treatment.
- tabs: TabsList is an inverse caption bar; active TabsTrigger gets cyan or cobalt rectangular marker and hard underline, inactive tabs remain paper/ink.
- badge: Sticker badge with uppercase mono text, 2px ink border, square or 2px radius; semantic fills yellow, magenta, cobalt, green or cyan.
- separator: Use dashed ink separators inside panels and solid 2px rules between major manga panels.
- checkbox: 16px square ink box; checked state fills black with acid-yellow check mark and no rounded corners.
- switch: Rectangular terminal toggle, not a pill; checked state slides a cyan block in a step motion with mono ON/OFF label.
- slider: Black rectangular rail with square cyan thumb, visible tick marks, mono value badge attached to the rail end.
- tooltip: Tiny inverse terminal caption with paper text, 2px border, no blur shadow; warning tooltips use acid yellow corner chip.
- dropdown-menu: Paper command menu with black caption item, dashed item separators, square focus rectangle, destructive row marked by magenta side tab.
- table: Operations grid with black header row, mono cells, dashed vertical dividers, semantic sticker badges in status column, and hard bordered filter controls.

## Preview shots
- application-shell: asymmetric manga control spread with left terminal rail, central mission panel, right metrics/log panel, semantic tabs and halftone underlays.
- detail-editor: source quotation editor using Dialog, Sheet, Input, Textarea, Select, Tabs, Tooltip and Badge within thick ink panels.
- data-operations: dense table with filters, dropdown actions, switches, slider thresholds, checkboxes, and status badges in operational context.

## 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 MangaTerminalPanel() {
  return (
    <Card className="relative rounded-[2px] border-2 border-[#1B1B1E] bg-[#FFFFFF] shadow-[4px_4px_0_#1B1B1E]">
      <div className="absolute -top-1 right-4 h-2 w-10 border-2 border-[#111114] bg-[#00E5FF]" />
      <CardHeader className="bg-[#0B0B0D] px-3 py-2 text-[#F7F3EA]">
        <CardTitle className="font-mono text-xs uppercase tracking-wider">MISSION PANEL / ACTIVE</CardTitle>
      </CardHeader>
      <CardContent className="space-y-3 p-4">
        <Badge className="rounded-[2px] border-2 border-[#111114] bg-[#FFF03A] font-mono text-[#111114]">QUEUE 09</Badge>
        <Input className="rounded-[2px] border-2 border-[#111114] bg-[#F7F3EA] font-mono focus-visible:ring-2 focus-visible:ring-[#FFF03A]" />
        <Button className="rounded-[2px] border-2 border-[#111114] bg-[#0B0B0D] font-mono uppercase text-[#F7F3EA] shadow-[3px_3px_0_#00E5FF]">Commit Dispatch</Button>
      </CardContent>
    </Card>
  )
}
```

## Implementation notes
Import local primitives from `@/components/ui/*`, then apply theme variables and recipe classes. Do not create a separate UI kit; compose shadcn primitives into inked manga panels with restrained semantic Memphis accents.

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Square uppercase IBM Plex Mono command button. Primary is black fill with paper text, secondary is warm paper with 2px ink border, focus uses acid-yellow offset ring, press moves by 2px and removes hard shadow."
    },
    {
      "component": "card",
      "recipe": "Use Card as manga panel: 2px ink border, hard 4px offset shadow, CardHeader as inverse black caption strip, CardContent as white/paper body, one 6px semantic tab on active cards only."
    },
    {
      "component": "input",
      "recipe": "Paper terminal field with 2px black border, mono value text, square focus outline in acid yellow, no rounded SaaS pill styling, optional bracket prefix label."
    },
    {
      "component": "textarea",
      "recipe": "Log editor field on warm paper with dashed horizontal guide lines, mono text, black caption label, visible resize grip kept square and inked."
    },
    {
      "component": "select",
      "recipe": "Square SelectTrigger with mono selected value, 2px ink border, cobalt active side marker, dropdown content as paper menu with dashed separators."
    },
    {
      "component": "dialog",
      "recipe": "DialogContent is a thick framed command panel with black title strip, clipped diagonal corner for active state, semantic tab identifying destructive/warning/info mode."
    },
    {
      "component": "sheet",
      "recipe": "Side Sheet behaves like a terminal rail: black caption, stacked mono command rows, strong border, no blur/glass treatment."
    },
    {
      "component": "tabs",
      "recipe": "TabsList is an inverse caption bar; active TabsTrigger gets cyan or cobalt rectangular marker and hard underline, inactive tabs remain paper/ink."
    },
    {
      "component": "badge",
      "recipe": "Sticker badge with uppercase mono text, 2px ink border, square or 2px radius; semantic fills yellow, magenta, cobalt, green or cyan."
    },
    {
      "component": "separator",
      "recipe": "Use dashed ink separators inside panels and solid 2px rules between major manga panels."
    },
    {
      "component": "checkbox",
      "recipe": "16px square ink box; checked state fills black with acid-yellow check mark and no rounded corners."
    },
    {
      "component": "switch",
      "recipe": "Rectangular terminal toggle, not a pill; checked state slides a cyan block in a step motion with mono ON/OFF label."
    },
    {
      "component": "slider",
      "recipe": "Black rectangular rail with square cyan thumb, visible tick marks, mono value badge attached to the rail end."
    },
    {
      "component": "tooltip",
      "recipe": "Tiny inverse terminal caption with paper text, 2px border, no blur shadow; warning tooltips use acid yellow corner chip."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Paper command menu with black caption item, dashed item separators, square focus rectangle, destructive row marked by magenta side tab."
    },
    {
      "component": "table",
      "recipe": "Operations grid with black header row, mono cells, dashed vertical dividers, semantic sticker badges in status column, and hard bordered filter controls."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "id": "application-shell",
      "scene": {
        "actions": [
          "Commit dispatch",
          "Open log"
        ],
        "description": "Asymmetric control spread with terminal rail, mission panel, status cards and one cyan active tab.",
        "eyebrow": "POSTMODERN AGENT OS / 09",
        "headline": "Dispatch Board",
        "rows": [
          {
            "badge": "cyan",
            "status": "ACTIVE",
            "task": "Curate manga panel"
          },
          {
            "badge": "yellow",
            "status": "WARN",
            "task": "Verify token bridge"
          }
        ],
        "stats": [
          {
            "label": "Agents",
            "value": "24"
          },
          {
            "label": "Risk",
            "value": "LOW"
          },
          {
            "label": "Latency",
            "value": "81ms"
          }
        ]
      },
      "title": "Agent OS manga spread"
    },
    {
      "id": "detail-editor",
      "scene": {
        "actions": [
          "Save quotation",
          "Escalate"
        ],
        "description": "Dialog and side sheet combine fields, tabs, tooltips and warning stickers inside thick ink frames.",
        "eyebrow": "DETAIL EDITOR / QUOTE LOCK",
        "fields": [
          {
            "label": "Source title",
            "value": "Operational note"
          },
          {
            "label": "Confidence",
            "value": "0.92"
          },
          {
            "label": "Mode",
            "value": "Review"
          }
        ],
        "headline": "Repair Citation Panel",
        "stats": [
          {
            "label": "Warnings",
            "value": "02"
          },
          {
            "label": "Edits",
            "value": "17"
          }
        ]
      },
      "title": "Quoted source editor"
    },
    {
      "id": "data-operations",
      "scene": {
        "actions": [
          "Filter status",
          "Batch approve"
        ],
        "description": "Readable operations table with dashed dividers, semantic badges, switches and threshold slider.",
        "eyebrow": "DATA OPS / GRID",
        "headline": "Signal Queue",
        "rows": [
          {
            "id": "NM-104",
            "owner": "agent-a",
            "score": "94",
            "status": "PASS"
          },
          {
            "id": "NM-105",
            "owner": "agent-b",
            "score": "77",
            "status": "CHECK"
          },
          {
            "id": "NM-106",
            "owner": "agent-c",
            "score": "41",
            "status": "FAIL"
          }
        ],
        "stats": [
          {
            "label": "Rows",
            "value": "128"
          },
          {
            "label": "Threshold",
            "value": "82"
          }
        ]
      },
      "title": "Dense table operations"
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "cyan",
      "magenta",
      "acid-yellow",
      "cobalt",
      "green"
    ],
    "border": "2px black ink with hard offset shadows",
    "contour": "square manga grid with occasional diagonal active notch",
    "density": "high-readable operational",
    "family": "neo-memphis-manga-terminal",
    "grain": false,
    "material": "inked warm-paper terminal panels",
    "motion": "step-snap hard-shadow movement",
    "stickerBadges": true,
    "underlay": "clipped halftone dot fields"
  }
}