Cranbrook Manga Deconstruction

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

:root {
  --background: #F7F0E3;
  --foreground: #111111;
  --card: #FFF9EC;
  --card-foreground: #111111;
  --popover: #FFF9EC;
  --popover-foreground: #111111;
  --primary: #0A0A0A;
  --primary-foreground: #ffffff;
  --secondary: #F2EAD9;
  --secondary-foreground: #111111;
  --muted: #6F6A5E;
  --muted-foreground: #111111;
  --accent: #2358FF;
  --accent-foreground: #ffffff;
  --destructive: #D01B1B;
  --border: #0A0A0A;
  --input: #0A0A0A;
  --ring: #2358FF;
  --chart-1: #0A0A0A;
  --chart-2: #F2EAD9;
  --chart-3: #2358FF;
  --chart-4: #1F7A3A;
  --chart-5: #D46A00;
  --sidebar: #FFF9EC;
  --sidebar-foreground: #111111;
  --sidebar-primary: #0A0A0A;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2358FF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #0A0A0A;
  --sidebar-ring: #2358FF;
  --radius: 4px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #0A0A0A;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #2358FF;
  --accent-foreground: #ffffff;
  --destructive: #D01B1B;
  --border: #303642;
  --input: #303642;
  --ring: #2358FF;
  --chart-1: #0A0A0A;
  --chart-2: #F2EAD9;
  --chart-3: #2358FF;
  --chart-4: #1F7A3A;
  --chart-5: #D46A00;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #0A0A0A;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2358FF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #2358FF;
  --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 CranbrookMangaDeconstructionShadcnKit() {
  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">Cranbrook Manga Deconstruction</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": "#2358FF",
      "accent-foreground": "#ffffff",
      "background": "#0f1115",
      "border": "#303642",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "chart-1": "#0A0A0A",
      "chart-2": "#F2EAD9",
      "chart-3": "#2358FF",
      "chart-4": "#1F7A3A",
      "chart-5": "#D46A00",
      "destructive": "#D01B1B",
      "foreground": "#f8fafc",
      "input": "#303642",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0A0A0A",
      "primary-foreground": "#ffffff",
      "radius": "4px",
      "ring": "#2358FF",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "sidebar": "#181b22",
      "sidebar-accent": "#2358FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0A0A0A",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#2358FF"
    },
    "light": {
      "accent": "#2358FF",
      "accent-foreground": "#ffffff",
      "background": "#F7F0E3",
      "border": "#0A0A0A",
      "card": "#FFF9EC",
      "card-foreground": "#111111",
      "chart-1": "#0A0A0A",
      "chart-2": "#F2EAD9",
      "chart-3": "#2358FF",
      "chart-4": "#1F7A3A",
      "chart-5": "#D46A00",
      "destructive": "#D01B1B",
      "foreground": "#111111",
      "input": "#0A0A0A",
      "muted": "#6F6A5E",
      "muted-foreground": "#111111",
      "popover": "#FFF9EC",
      "popover-foreground": "#111111",
      "primary": "#0A0A0A",
      "primary-foreground": "#ffffff",
      "radius": "4px",
      "ring": "#2358FF",
      "secondary": "#F2EAD9",
      "secondary-foreground": "#111111",
      "sidebar": "#FFF9EC",
      "sidebar-accent": "#2358FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#0A0A0A",
      "sidebar-foreground": "#111111",
      "sidebar-primary": "#0A0A0A",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#2358FF"
    },
    "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-019e8a22-6007-7db0-a373-737ed12fba32",
    "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": "cranbrook-manga-deconstruction",
    "source": "katagami"
  },
  "name": "cranbrook-manga-deconstruction",
  "title": "Cranbrook Manga Deconstruction shadcn Theme",
  "type": "registry:theme"
}

# Cranbrook Manga Deconstruction shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate the language into local shadcn/ui primitives for agentic software: manga panels, visible seams, blue terminal annotations, and disciplined red proof marks.

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

## Token cues
Use `{colors.background}` bone paper, `{colors.surface}` warm paper cards, `{colors.text}` ink, `{colors.info}` annotation blue, `{colors.error}` proof red, `{borders.default_width}` black panel rules, `{spacing.base}` gutter rhythm, `{rounded.sm}` controls, and `{typography.mono_font}` for footnotes.

## Visual character to preserve
Hard black frames, restrained rotations on large containers only, transparent oversized condensed type as underlay, terminal footnote chips, blue bracket leaders, and tiny red validation marks.

## ShadSync visual profile
family: postmodern-manga-interface; material: bone-paper-ink; contour: rectangular-panels; border: heavy-black-with-blue-annotation; underlay: transparent-type; grain: subtle-halftone; stickerBadges: functional-signage; motion: correction-snap; density: medium-high; accents: annotation-blue and proof-red.

## Signature component recipes
- button: black ink primary with blue hard shadow; secondary bone with black shadow; uppercase mono label.
- card: 2px black border, bone surface, hard offset shadow, optional crop-mark pseudo element, rotation under two degrees for hero cards only.
- input: square paper field, black border, blue mono label, focus as 3px blue outline and bracket leader.
- textarea: same as input but with terminal footnote caption below.
- select: black-bordered paper field with literal QUEUE/RISK/TRACE options; no default browser arrow.
- dialog: centered manga proof sheet with thick border, transparent headline underlay, red warning slash only for destructive state.
- sheet: side annotation rail using bone material, dashed blue separators, mono numbered notes.
- tabs: chunky mono tabs; active tab is black fill with paper text; inactive tabs cast black 3px offset shadows.
- badge: literal decorated-shed labels; blue for trace, red outline for risk, black for neutral state.
- separator: black solid panel seam or blue dashed annotation leader, never faint gray hairline.
- checkbox: square ink box with blue focus bracket and red proof mark only for failing validation.
- switch: rectangular terminal toggle, black track, paper thumb, blue ON label.
- slider: black rail with rectangular handle and mono numeric readout.
- tooltip: small paper footnote chip connected visually with a blue leader line.
- dropdown-menu: paper menu as a mini panel, black separators, mono shortcuts, no blur/glass.
- table: dense evidence ledger with blue mono headers, black row rules, red text for claims requiring review.

## Preview shots
application-shell, detail-editor, and data-operations must render as polished product screenshots, not primitive inventories.

## Implementation contract
Import local primitives from `@/components/ui/*`. Do not invent new primitive systems. Use class composition to add panel borders, crop marks, annotation rails, and proof slashes. Preserve accessibility and remove rotations on mobile.

## 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 AgentProofPanel() {
  return (
    <Card className="relative rotate-[-0.6deg] border-2 border-black bg-[#FFF9EC] shadow-[7px_7px_0_#0A0A0A] rounded-[2px]">
      <CardHeader>
        <Badge className="w-fit rounded-[2px] border-2 border-black bg-[#F7F0E3] font-mono text-[#2358FF]">[04] TRACE</Badge>
        <CardTitle className="font-['IBM_Plex_Sans_Condensed'] text-4xl uppercase tracking-[-0.04em]">Patch proof queue</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <Input className="rounded-[2px] border-2 border-black bg-[#FFF9EC] font-mono shadow-[3px_3px_0_#0A0A0A] focus-visible:ring-[#2358FF]" defaultValue="src/auth/session.ts#L42" />
        <Button className="rounded-[2px] border-2 border-black bg-black font-mono uppercase text-[#FFF9EC] shadow-[4px_4px_0_#2358FF]">Approve patch</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Render as a square bone-paper shadcn primitive with black ink structure, mono labels, blue focus/annotation treatment, and red only for explicit risk or destructive validation."
    },
    {
      "component": "card",
      "recipe": "Render as a square bone-paper shadcn primitive with black ink structure, mono labels, blue focus/annotation treatment, and red only for explicit risk or destructive validation."
    },
    {
      "component": "input",
      "recipe": "Render as a square bone-paper shadcn primitive with black ink structure, mono labels, blue focus/annotation treatment, and red only for explicit risk or destructive validation."
    },
    {
      "component": "textarea",
      "recipe": "Render as a square bone-paper shadcn primitive with black ink structure, mono labels, blue focus/annotation treatment, and red only for explicit risk or destructive validation."
    },
    {
      "component": "select",
      "recipe": "Render as a square bone-paper shadcn primitive with black ink structure, mono labels, blue focus/annotation treatment, and red only for explicit risk or destructive validation."
    },
    {
      "component": "dialog",
      "recipe": "Render as a square bone-paper shadcn primitive with black ink structure, mono labels, blue focus/annotation treatment, and red only for explicit risk or destructive validation."
    },
    {
      "component": "sheet",
      "recipe": "Render as a square bone-paper shadcn primitive with black ink structure, mono labels, blue focus/annotation treatment, and red only for explicit risk or destructive validation."
    },
    {
      "component": "tabs",
      "recipe": "Render as a square bone-paper shadcn primitive with black ink structure, mono labels, blue focus/annotation treatment, and red only for explicit risk or destructive validation."
    },
    {
      "component": "badge",
      "recipe": "Render as a square bone-paper shadcn primitive with black ink structure, mono labels, blue focus/annotation treatment, and red only for explicit risk or destructive validation."
    },
    {
      "component": "separator",
      "recipe": "Render as a square bone-paper shadcn primitive with black ink structure, mono labels, blue focus/annotation treatment, and red only for explicit risk or destructive validation."
    },
    {
      "component": "checkbox",
      "recipe": "Render as a square bone-paper shadcn primitive with black ink structure, mono labels, blue focus/annotation treatment, and red only for explicit risk or destructive validation."
    },
    {
      "component": "switch",
      "recipe": "Render as a square bone-paper shadcn primitive with black ink structure, mono labels, blue focus/annotation treatment, and red only for explicit risk or destructive validation."
    },
    {
      "component": "slider",
      "recipe": "Render as a square bone-paper shadcn primitive with black ink structure, mono labels, blue focus/annotation treatment, and red only for explicit risk or destructive validation."
    },
    {
      "component": "tooltip",
      "recipe": "Render as a square bone-paper shadcn primitive with black ink structure, mono labels, blue focus/annotation treatment, and red only for explicit risk or destructive validation."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Render as a square bone-paper shadcn primitive with black ink structure, mono labels, blue focus/annotation treatment, and red only for explicit risk or destructive validation."
    },
    {
      "component": "table",
      "recipe": "Render as a square bone-paper shadcn primitive with black ink structure, mono labels, blue focus/annotation treatment, and red only for explicit risk or destructive validation."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "generic dashboard cards",
        "neon cyberpunk",
        "random decorative shapes"
      ],
      "composition": "Asymmetric manga spread with a dominant patch card, queue list, and right annotation rail.",
      "id": "application-shell",
      "mustShowStates": [
        "active black tab",
        "blue trace badge",
        "red risk row",
        "focused command switch"
      ],
      "name": "Agent patch workbench",
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "tooltip",
        "dropdown-menu",
        "table",
        "switch"
      ],
      "scene": {
        "actions": [
          "Approve patch",
          "Send annotated retry"
        ],
        "description": "Human reviewer inspects generated changes, evidence footnotes, and risk proof marks.",
        "eyebrow": "panel 01 / agent console",
        "headline": "Patch review with visible reasoning",
        "rows": [
          {
            "delta": "+38",
            "file": "session.ts",
            "state": "ok"
          },
          {
            "delta": "+91",
            "file": "panel.css",
            "state": "trace"
          },
          {
            "delta": "-12",
            "file": "copy.md",
            "state": "risk"
          }
        ],
        "stats": [
          {
            "label": "tests passed",
            "value": "42"
          },
          {
            "label": "risk",
            "value": "0.27"
          },
          {
            "label": "sources",
            "value": "8"
          }
        ]
      }
    },
    {
      "avoid": [
        "rotated body text",
        "illegible controls",
        "wide red fills"
      ],
      "composition": "Large rotated editor panel with blue footnote labels attached to each field and a destructive confirmation dialog.",
      "id": "detail-editor",
      "mustShowStates": [
        "blue focus bracket",
        "checked provenance lock",
        "red destructive slash",
        "slider numeric risk readout"
      ],
      "name": "Source annotation editor",
      "primitives": [
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "slider",
        "button",
        "badge",
        "dialog"
      ],
      "scene": {
        "actions": [
          "Bind source",
          "Open proof dialog"
        ],
        "description": "Editor binds a generated sentence to source evidence and sets acceptable uncertainty.",
        "eyebrow": "panel 02 / source proof",
        "fields": [
          {
            "label": "source path",
            "value": "research/lupton-deconstruction.md#18"
          },
          {
            "label": "claim note",
            "value": "Keep the anti-universalist language but cite the evidence."
          },
          {
            "label": "risk threshold",
            "value": "27%"
          }
        ],
        "headline": "Annotate the agent claim"
      }
    },
    {
      "avoid": [
        "inventory wall",
        "faint gray dividers",
        "glass panels"
      ],
      "composition": "Dense evidence table with a side sheet as terminal footnote rail and literal decorated-shed zone signs.",
      "id": "data-operations",
      "mustShowStates": [
        "open annotation sheet",
        "red claim badge",
        "blue mono table headers",
        "black seam separators"
      ],
      "name": "Trace ledger operations",
      "primitives": [
        "table",
        "card",
        "sheet",
        "badge",
        "separator",
        "button",
        "input",
        "select",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Export trace",
          "Rollback selected"
        ],
        "description": "Rows show generated actions, provenance, rollback affordances, and human notes.",
        "eyebrow": "panel 03 / trace ledger",
        "headline": "Operation log as manga evidence table",
        "rows": [
          {
            "op": "fetch",
            "source": "Venturi sign study",
            "state": "linked"
          },
          {
            "op": "rewrite",
            "source": "Cranbrook type note",
            "state": "review"
          },
          {
            "op": "publish",
            "source": "component recipe",
            "state": "held"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "annotation blue #2358FF",
      "proof red #D01B1B"
    ],
    "border": "2px black panel borders with blue annotation leaders",
    "contour": "rectangular-panels",
    "density": "medium-high",
    "family": "postmodern-manga-interface",
    "grain": true,
    "material": "bone-paper-ink",
    "motion": "correction-snap",
    "stickerBadges": true,
    "underlay": true
  }
}