Existential 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: #F7F1E3;
  --foreground: #11110F;
  --card: #FFF9EA;
  --card-foreground: #11110F;
  --popover: #FFF9EA;
  --popover-foreground: #11110F;
  --primary: #11110F;
  --primary-foreground: #ffffff;
  --secondary: #8FBFC1;
  --secondary-foreground: #ffffff;
  --muted: #686862;
  --muted-foreground: #11110F;
  --accent: #39FF88;
  --accent-foreground: #111111;
  --destructive: #8A2F22;
  --border: #11110F;
  --input: #11110F;
  --ring: #39FF88;
  --chart-1: #11110F;
  --chart-2: #8FBFC1;
  --chart-3: #39FF88;
  --chart-4: #44D07B;
  --chart-5: #C9823A;
  --sidebar: #FFF9EA;
  --sidebar-foreground: #11110F;
  --sidebar-primary: #11110F;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #8FBFC1;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #11110F;
  --sidebar-ring: #39FF88;
  --radius: 4px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #11110F;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #39FF88;
  --accent-foreground: #111111;
  --destructive: #8A2F22;
  --border: #303642;
  --input: #303642;
  --ring: #39FF88;
  --chart-1: #11110F;
  --chart-2: #8FBFC1;
  --chart-3: #39FF88;
  --chart-4: #44D07B;
  --chart-5: #C9823A;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #11110F;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #39FF88;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #39FF88;
  --radius: 4px;
}

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 ExistentialMangaTerminalShadcnKit() {
  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">Existential 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",
  "name": "existential-manga-terminal",
  "type": "registry:theme",
  "title": "Existential Manga Terminal shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F1E3",
      "foreground": "#11110F",
      "card": "#FFF9EA",
      "card-foreground": "#11110F",
      "popover": "#FFF9EA",
      "popover-foreground": "#11110F",
      "primary": "#11110F",
      "primary-foreground": "#ffffff",
      "secondary": "#8FBFC1",
      "secondary-foreground": "#ffffff",
      "muted": "#686862",
      "muted-foreground": "#11110F",
      "accent": "#39FF88",
      "accent-foreground": "#111111",
      "destructive": "#8A2F22",
      "border": "#11110F",
      "input": "#11110F",
      "ring": "#39FF88",
      "chart-1": "#11110F",
      "chart-2": "#8FBFC1",
      "chart-3": "#39FF88",
      "chart-4": "#44D07B",
      "chart-5": "#C9823A",
      "sidebar": "#FFF9EA",
      "sidebar-foreground": "#11110F",
      "sidebar-primary": "#11110F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#8FBFC1",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#11110F",
      "sidebar-ring": "#39FF88",
      "radius": "4px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#11110F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#39FF88",
      "accent-foreground": "#111111",
      "destructive": "#8A2F22",
      "border": "#303642",
      "input": "#303642",
      "ring": "#39FF88",
      "chart-1": "#11110F",
      "chart-2": "#8FBFC1",
      "chart-3": "#39FF88",
      "chart-4": "#44D07B",
      "chart-5": "#C9823A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#11110F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#39FF88",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#39FF88",
      "radius": "4px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019eae01-f9c3-7280-99b3-3625e030dc7d",
    "slug": "existential-manga-terminal",
    "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"
      ],
      "semantic_colors": [
        "accent.phosphor",
        "accent.phosphorSoft",
        "chrome.aqua",
        "chrome.aquaWash",
        "on.aqua",
        "on.ink",
        "on.paper",
        "on.phosphor",
        "on.warning",
        "state.dangerInk",
        "state.warning",
        "surface.paper",
        "surface.paperRaised",
        "text.ink",
        "text.mutedInk"
      ],
      "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"
      ]
    }
  }
}

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

## Intent
Translate the paper/ink/phosphor/aqua palette into shadcn screens that feel like manga page architecture wrapped around a terminal prompt. Keep surfaces warm, linework hard, green rare, and warning amber restrained.

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

## ShadSync visual profile
family: existential-manga-terminal; material: warm-paper; contour: square-panel; border: ink-2px; underlay: screentone; grain: true; stickerBadges: caption-tabs; motion: stepped-terminal; density: medium-high; accents: phosphor-command and aqua-chrome.

## Signature component recipes
- button: Use `Button` with `rounded-[2px] border-2 border-ink bg-paper shadow-[2px_2px_0_#11110F] font-mono uppercase tracking-wide`; primary uses phosphor fill and black text, destructive uses amber with an ink warning icon.
- card: Use `Card` as warm paper panel with 2px ink border, clipped screentone pseudo-layer, overlapped caption tab, and hard 4px offset shadow.
- input: Use `Input` with paper fill, ink border, mono value text, aqua helper rail, and phosphor focus-visible ring.
- textarea: Same field system as input, with ruled-line background for long prompt notes and explicit error text under the border.
- select: Use `Select` trigger as a compact terminal cell with aqua chevron block and ink dropdown menu.
- dialog: Use `DialogContent` as a centered manga panel with caption tab, hard shadow, and clear phosphor confirm button.
- sheet: Use `SheetContent` with aqua spine, paper surface, command badges, and dense mono metadata rows.
- tabs: Use `TabsList` as an aqua rail; active `TabsTrigger` is paper with ink border and a clipped under-tab.
- badge: Use small mono caption tabs; status badges combine text, icon, and border pattern rather than relying on color alone.
- separator: Use 2px ink rules or dotted screentone gutters, never faint hairlines.
- checkbox: Square ink-framed box with phosphor check glyph and label text aligned to the manga grid.
- switch: Rectangular terminal toggle with hard thumb movement, ink outline, and phosphor on-state.
- slider: Ink track with phosphor range fill and square thumb; include mono min/max marks.
- tooltip: Paper tooltip with 2px ink border, small caption arrow, and mono command hint.
- dropdown-menu: Paper menu, ink dividers, aqua active row, mono shortcut column.
- table: Ledger table with mono IDs, 2px top rules, alternating screentone rows, and sticky caption badges.

## Preview shots
- application-shell: asymmetric manga-page command dashboard with rail, command card, and ledger table.
- detail-editor: prompt editing form with fields, tabs, dialog state, and validation messaging.
- data-operations: operations table with filters, dropdown actions, switch, slider, and sheet details.

## Copy-paste component example
```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"

export function MangaTerminalPanel() {
  return (
    <Card className="relative rounded-[2px] border-2 border-[#11110F] bg-[#FFF9EA] shadow-[4px_4px_0_#11110F] before:absolute before:inset-0 before:bg-[radial-gradient(rgba(17,17,15,.10)_1px,transparent_1px)] before:bg-[length:8px_8px] before:opacity-30">
      <CardHeader className="relative border-b-2 border-[#11110F] bg-[#D6E8E4] font-mono uppercase tracking-[.08em]">
        <Badge className="w-fit rounded-[2px] border-2 border-[#11110F] bg-[#C8FF4D] text-[#11110F]">READY</Badge>
        <CardTitle className="font-serif text-2xl">Null Desk command review</CardTitle>
      </CardHeader>
      <CardContent className="relative grid gap-4 p-5">
        <Input className="rounded-[2px] border-2 border-[#11110F] bg-[#F7F1E3] font-mono focus-visible:ring-4 focus-visible:ring-[#C8FF4D]" placeholder="inspect meaning drift" />
        <Button className="rounded-[2px] border-2 border-[#11110F] bg-[#C8FF4D] font-mono text-[#11110F] shadow-[2px_2px_0_#11110F] hover:translate-x-[1px] hover:translate-y-[1px]">$ commit prompt</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "generator": "katagami-ui-compatibility-projection",
  "generatedBy": "katagami-ui-projection",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": {
    "id": "en-019eae01-f9c3-7280-99b3-3625e030dc7d",
    "name": "Existential Manga Terminal",
    "slug": "existential-manga-terminal"
  },
  "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [
    "CSS uses a warm #F7F1E3 paper body with black 2px panel rules, clipped manga gutters, and no soft drop-shadow dependency for hierarchy.",
    "Interactive controls reserve phosphor green borders, carets, command prefixes, and focus rings while resting controls remain paper, ink, or aqua chrome.",
    "Secondary scaffolding uses muted aqua strips, tab rails, selection washes, and hairline browser chrome around dense monochrome content.",
    "Screentone-compatible tints are built with repeating-radial-gradient and linear hatch overlays at low opacity instead of extra palette colors."
  ],
  "visualProfile": {
    "family": "paper-collage",
    "material": "paper",
    "contour": "default",
    "border": "solid",
    "underlay": false,
    "grain": true,
    "stickerBadges": true,
    "motion": "still",
    "density": "dense",
    "accents": [
      "primary",
      "accent",
      "secondary",
      "muted"
    ]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "Application shell",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table or list density"
      ],
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "scene": {
        "eyebrow": "workspace spread",
        "headline": "Existential Manga Terminal launch room",
        "description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
        "primaryAction": "Apply theme",
        "secondaryAction": "Review states",
        "stats": [
          {
            "label": "components",
            "value": "16",
            "tone": "accent"
          },
          {
            "label": "states",
            "value": "ready"
          },
          {
            "label": "density",
            "value": "balanced",
            "tone": "warning"
          }
        ],
        "rows": [
          {
            "label": "Primary flow",
            "value": "mapped",
            "status": "active"
          },
          {
            "label": "Token coverage",
            "value": "semantic",
            "status": "synced"
          },
          {
            "label": "Responsive proof",
            "value": "queued",
            "status": "review"
          }
        ],
        "statuses": [
          "Active",
          "Synced",
          "Draft"
        ]
      }
    },
    {
      "id": "detail-editor",
      "title": "Detail editor",
      "viewport": "tablet",
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet"
      ],
      "composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
      "mustShow": [
        "focus ring",
        "error or destructive state",
        "dialog or sheet treatment",
        "written guidance content"
      ],
      "avoid": [
        "unstyled browser controls",
        "floating cards inside cards",
        "missing labels"
      ],
      "scene": {
        "eyebrow": "editing flow",
        "headline": "Language recipe editor",
        "description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
        "primaryAction": "Save recipe",
        "secondaryAction": "Open sheet",
        "fields": [
          {
            "label": "Component family",
            "value": "Narrative cards"
          },
          {
            "label": "State treatment",
            "value": "Visible focus + validation"
          },
          {
            "label": "Motion",
            "value": "Small lift, no opacity-only fade"
          }
        ],
        "statuses": [
          "Focus",
          "Invalid",
          "Confirmed"
        ]
      }
    },
    {
      "id": "data-operations",
      "title": "Data operations",
      "viewport": "mobile",
      "primitives": [
        "button",
        "tabs",
        "badge",
        "dropdown-menu",
        "table",
        "tooltip",
        "separator"
      ],
      "composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
      "mustShow": [
        "responsive reflow",
        "dense row styling",
        "menu affordance",
        "status badge system"
      ],
      "avoid": [
        "desktop-only tables",
        "text overflow",
        "default shadcn spacing without Katagami character"
      ],
      "scene": {
        "eyebrow": "operations",
        "headline": "Compact review queue",
        "description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
        "primaryAction": "Resolve",
        "secondaryAction": "Filter",
        "rows": [
          {
            "label": "Button hierarchy",
            "value": "approved",
            "status": "ok"
          },
          {
            "label": "Table rhythm",
            "value": "needs pass",
            "status": "watch"
          },
          {
            "label": "Empty state",
            "value": "designed",
            "status": "done"
          }
        ],
        "statuses": [
          "Queued",
          "Blocked",
          "Done"
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Prove action hierarchy, focus, disabled, and destructive states."
    },
    {
      "primitive": "card",
      "intent": "Carry the language surface, border, elevation, and density rules."
    },
    {
      "primitive": "input",
      "intent": "Show labels, focus rings, validation, and spacing rhythm."
    },
    {
      "primitive": "textarea",
      "intent": "Show longer guidance, validation copy, and writing density."
    },
    {
      "primitive": "select",
      "intent": "Show filtering, selection contrast, and menu trigger styling."
    },
    {
      "primitive": "dialog",
      "intent": "Show centered decision states and overlay treatment."
    },
    {
      "primitive": "sheet",
      "intent": "Show contextual side panels and responsive editing."
    },
    {
      "primitive": "tabs",
      "intent": "Show navigational structure and active/inactive contrast."
    },
    {
      "primitive": "badge",
      "intent": "Show compact status vocabulary and semantic colors."
    },
    {
      "primitive": "separator",
      "intent": "Show section rhythm without generic gray dividers."
    },
    {
      "primitive": "checkbox",
      "intent": "Show binary selection with visible focus and checked states."
    },
    {
      "primitive": "switch",
      "intent": "Show settings toggles and on/off contrast."
    },
    {
      "primitive": "slider",
      "intent": "Show numeric adjustment with track/thumb styling."
    },
    {
      "primitive": "tooltip",
      "intent": "Show concise explanation styling above compact controls."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "Show action menus, destructive items, and grouped choices."
    },
    {
      "primitive": "table",
      "intent": "Show dense operational data, separators, row states, and responsive behavior."
    }
  ],
  "qualityRules": {
    "do": [
      "Use #F7F1E3 or #FFF9EA for primary surfaces and #11110F for nearly all readable text.",
      "Reserve phosphor green for active prompts, focus, success-like command affordances, and one or two command buttons per view.",
      "Use aqua for browser chrome, tabs, borders, selections, secondary scaffolding, and informational badges.",
      "Support screentone tints with patterned overlays that remain compatible with black-and-white reproduction.",
      "Pair every status color with labels, icons, borders, or prompt text so meaning is not color-only."
    ],
    "dont": [
      "Do not turn the palette into saturated cyberpunk, neon matrix rain, or black-background hacker cosplay.",
      "Do not use amber/rust as a general brand accent; keep it for destructive, overdue, or warning states.",
      "Do not soften the language with generic glassmorphism, gradient cards, or large blurry shadows.",
      "Do not add anime characters; manga influence must remain structural and typographic."
    ]
  }
}