Usable Anti-Interface Panels

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

:root {
  --background: #F7F4EA;
  --foreground: #111111;
  --card: #FFFFFF;
  --card-foreground: #111111;
  --popover: #FFFFFF;
  --popover-foreground: #111111;
  --primary: #111111;
  --primary-foreground: #ffffff;
  --secondary: #FFFFFF;
  --secondary-foreground: #111111;
  --muted: #6B675D;
  --muted-foreground: #111111;
  --accent: #00F05A;
  --accent-foreground: #111111;
  --destructive: #E21B2D;
  --border: #111111;
  --input: #111111;
  --ring: #00F05A;
  --chart-1: #111111;
  --chart-2: #FFFFFF;
  --chart-3: #00F05A;
  --chart-4: #00A84F;
  --chart-5: #F4B000;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #111111;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #1155FF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #111111;
  --sidebar-ring: #00F05A;
  --radius: 0;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #111111;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #00F05A;
  --accent-foreground: #111111;
  --destructive: #E21B2D;
  --border: #303642;
  --input: #303642;
  --ring: #00F05A;
  --chart-1: #111111;
  --chart-2: #FFFFFF;
  --chart-3: #00F05A;
  --chart-4: #00A84F;
  --chart-5: #F4B000;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #00F05A;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #00F05A;
  --radius: 0;
}

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 UsableAntiInterfacePanelsShadcnKit() {
  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">Usable Anti-Interface Panels</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": "#39FF14",
      "accent-foreground": "#111111",
      "background": "#0f1115",
      "border": "#303642",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "chart-1": "#111111",
      "chart-2": "#0047FF",
      "chart-3": "#39FF14",
      "chart-4": "#138A36",
      "chart-5": "#FFB000",
      "destructive": "#E11D2E",
      "foreground": "#f8fafc",
      "input": "#303642",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#39FF14",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "sidebar": "#181b22",
      "sidebar-accent": "#39FF14",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#39FF14"
    },
    "light": {
      "accent": "#39FF14",
      "accent-foreground": "#111111",
      "background": "#F6F2E8",
      "border": "#111111",
      "card": "#FFFDF5",
      "card-foreground": "#111111",
      "chart-1": "#111111",
      "chart-2": "#0047FF",
      "chart-3": "#39FF14",
      "chart-4": "#138A36",
      "chart-5": "#FFB000",
      "destructive": "#E11D2E",
      "foreground": "#111111",
      "input": "#111111",
      "muted": "#6E6A60",
      "muted-foreground": "#111111",
      "popover": "#FFFDF5",
      "popover-foreground": "#111111",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#39FF14",
      "secondary": "#0047FF",
      "secondary-foreground": "#ffffff",
      "sidebar": "#FFFDF5",
      "sidebar-accent": "#0047FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#111111",
      "sidebar-foreground": "#111111",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#39FF14"
    },
    "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-019e8a06-3ed1-7e00-ac98-a59a8673b51e",
    "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": "usable-anti-interface-panels",
    "source": "katagami"
  },
  "name": "usable-anti-interface-panels",
  "title": "Usable Anti-Interface Panels shadcn Theme",
  "type": "registry:theme"
}

# Usable Anti-Interface Panels shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate the language into local shadcn/ui primitives as a usable postmodern operations surface: hard bordered panels, explicit rails, symbolic labels, manga hatch underlays, and one operational accent.

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

## Token cues
Use `{colors.background}` paper, `{colors.surface}` white panels, `{colors.text}` ink, `{colors.border}` 3px rules, `{colors.accent}` terminal green, and `{colors.info}` cobalt hard shadows. Use `{typography.heading_font}` for slab headers and `{typography.mono_font}` for rails, badges, coordinates, and status.

## Visual character to preserve
Square 0-radius containers; 3px black borders; offset cobalt/green shadows; visible header rails; rotated or marginal mono labels only where reading order remains clear; dotted grid or hatch underlays clipped to specific panels.

## ShadSync visual profile
family: postmodern-operations; material: inked-paper-panel; contour: square; border: heavy-solid; underlay: dotted-grid-and-hatch; grain: false; stickerBadges: true; motion: shadow-collapse; density: medium-high; accents: terminal-green and cobalt.

## Signature component recipes
- button: square, 3px border, uppercase mono, 4-6px hard shadow; primary uses green fill with cobalt shadow; active collapses shadow.
- card: white or black panel, 3px border, header rail, optional coordinate badge, 6px cobalt or 10px green shadow.
- input / textarea / select: paper fill, black border, mono label, black micro-shadow, green double-rectangle focus.
- dialog / sheet: treat as command panel with title strip, coordinate chip, visible separator rails, no translucent blur.
- tabs: one continuous bordered rail; active tab green, inactive white; black dividers between triggers.
- badge: stamp-like rectangles with mono uppercase copy; use cobalt only for selected path.
- separator: heavy black rule, never faint gray.
- checkbox / switch / slider: squared hardware controls with visible track borders and green active state.
- tooltip / dropdown-menu: small decorated-shed placards with black outline, coordinate label, and no soft shadow.
- table: ruled evidence grid with black cell dividers, mono IDs, and stamped state badges.

## Preview shots
application-shell, detail-editor, data-operations.

## Implementation contract
Import local primitives from `@/components/ui/*`. Do not invent a second component system. Compose distinctive rails, hatches, and offset shadows with className wrappers around shadcn primitives while preserving accessibility and focus states.

## 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 AntiInterfacePanel() {
  return (
    <Card className="relative rounded-none border-[3px] border-black bg-white shadow-[6px_6px_0_#1155FF]">
      <div className="absolute -top-4 right-2 border-[3px] border-black bg-[#00F05A] px-2 py-0.5 font-mono text-xs font-bold">08/GRID</div>
      <CardHeader className="border-b-[3px] border-black">
        <Badge className="w-fit rounded-none border-[3px] border-black bg-[#00F05A] font-mono text-black shadow-[3px_3px_0_#111]">LIVE AGENT</Badge>
        <CardTitle className="font-['Archivo_Black'] text-4xl uppercase tracking-[-0.05em]">Route Audit</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-3 p-4">
        <label className="font-mono text-xs font-bold uppercase">Decision label</label>
        <Input className="rounded-none border-[3px] border-black bg-[#F7F4EA] shadow-[3px_3px_0_#111] focus-visible:ring-[#00F05A]" />
        <Button className="rounded-none border-[3px] border-black bg-[#00F05A] font-mono font-bold uppercase text-black shadow-[6px_6px_0_#1155FF] active:translate-x-1 active:translate-y-1 active:shadow-none">Stamp override</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "card",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "input",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "textarea",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "select",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "dialog",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "sheet",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "tabs",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "badge",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "separator",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "checkbox",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "switch",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "slider",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "tooltip",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "table",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "glass blur",
        "neon gradients",
        "soft gray borders"
      ],
      "composition": "Three-region agent operations wall with vertical rail, status cards, route table, and stamped action bar.",
      "id": "application-shell",
      "mustShowStates": [
        "primary approval button",
        "active route tab",
        "selected path badge",
        "tooltip coordinate note"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "tooltip",
        "dropdown-menu",
        "table"
      ],
      "scene": {
        "actions": [
          "Approve run",
          "Fork evidence"
        ],
        "description": "Review manga-ingest decisions with explicit rails and stamped machine confidence.",
        "eyebrow": "PANEL 01 / ROUTE BOARD",
        "headline": "Agent Route Audit",
        "rows": [
          {
            "risk": "2",
            "source": "CRAN-204",
            "state": "scan"
          },
          {
            "risk": "4",
            "source": "MEM-019",
            "state": "route"
          },
          {
            "risk": "7",
            "source": "VENT-404",
            "state": "hold"
          }
        ],
        "stats": [
          {
            "label": "Confidence",
            "value": "94%"
          },
          {
            "label": "Open panels",
            "value": "18"
          },
          {
            "label": "Route",
            "value": "B-07"
          }
        ]
      }
    },
    {
      "avoid": [
        "rounded pill forms",
        "unlabeled icons"
      ],
      "composition": "Boxed curator override form with coordinate chip, hatch note, square fields, and decision dialog trigger.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input",
        "checked evidence box",
        "active switch",
        "slider with bordered track"
      ],
      "primitives": [
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "button",
        "badge"
      ],
      "scene": {
        "actions": [
          "Stamp override",
          "Open diff dialog"
        ],
        "description": "Adjust a deconstructed caption decision while keeping the rail and reducing hatch density.",
        "eyebrow": "PANEL 02 / INPUT RAIL",
        "fields": [
          {
            "label": "Decision label",
            "value": "Recover deconstructed caption"
          },
          {
            "label": "Severity",
            "value": "Symbolic / readable"
          },
          {
            "label": "Operator note",
            "value": "Keep rotated rail; reduce hatch behind body copy."
          }
        ],
        "headline": "Curator Override"
      }
    },
    {
      "avoid": [
        "inventory wall",
        "generic admin table"
      ],
      "composition": "Evidence grid with sheet-based batch controls, stamp badges, and heavy ruled cells.",
      "id": "data-operations",
      "mustShowStates": [
        "open sheet handle",
        "dropdown menu placard",
        "warning badge",
        "black separator rail"
      ],
      "primitives": [
        "table",
        "sheet",
        "button",
        "badge",
        "separator",
        "tabs",
        "dropdown-menu",
        "card"
      ],
      "scene": {
        "actions": [
          "Open batch sheet",
          "Export route"
        ],
        "description": "Prioritize OCR, screentone, and typography fragments through a visible rule-based grid.",
        "eyebrow": "PANEL 03 / BATCH TABLE",
        "headline": "Evidence Queue",
        "rows": [
          {
            "risk": "1",
            "source": "OCR-118",
            "state": "pass"
          },
          {
            "risk": "6",
            "source": "TYPE-305",
            "state": "hold"
          },
          {
            "risk": "5",
            "source": "TONE-442",
            "state": "warn"
          }
        ],
        "stats": [
          {
            "label": "Held",
            "value": "7"
          },
          {
            "label": "Passed",
            "value": "41"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "terminal-green #00F05A",
      "cobalt #1155FF"
    ],
    "border": "heavy-solid-3px",
    "contour": "square",
    "density": "medium-high",
    "family": "postmodern-operations",
    "grain": false,
    "material": "inked-paper-panel",
    "motion": "shadow-collapse",
    "stickerBadges": true,
    "underlay": "dotted-grid-with-clipped-manga-hatch"
  }
}