Concrete Slab Shock

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

:root {
  --background: #E7E2D8;
  --foreground: #111111;
  --card: #FFFDF5;
  --card-foreground: #111111;
  --popover: #FFFDF5;
  --popover-foreground: #111111;
  --primary: #FFDD00;
  --primary-foreground: #111111;
  --secondary: #00C2FF;
  --secondary-foreground: #ffffff;
  --muted: #5F615E;
  --muted-foreground: #111111;
  --accent: #FF3B30;
  --accent-foreground: #ffffff;
  --destructive: #B00020;
  --border: #050505;
  --input: #050505;
  --ring: #FF3B30;
  --chart-1: #FFDD00;
  --chart-2: #00C2FF;
  --chart-3: #FF3B30;
  --chart-4: #007A4D;
  --chart-5: #FFB800;
  --sidebar: #FFFDF5;
  --sidebar-foreground: #111111;
  --sidebar-primary: #FFDD00;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #0057D8;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #050505;
  --sidebar-ring: #FF3B30;
  --radius: 2px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #FFDD00;
  --primary-foreground: #111111;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #FF3B30;
  --accent-foreground: #ffffff;
  --destructive: #B00020;
  --border: #303642;
  --input: #303642;
  --ring: #FF3B30;
  --chart-1: #FFDD00;
  --chart-2: #00C2FF;
  --chart-3: #FF3B30;
  --chart-4: #007A4D;
  --chart-5: #FFB800;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #FFDD00;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #FF3B30;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #FF3B30;
  --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 ConcreteSlabShockShadcnKit() {
  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">Concrete Slab Shock</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": "concrete-slab-shock",
  "type": "registry:theme",
  "title": "Concrete Slab Shock shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#E7E2D8",
      "foreground": "#111111",
      "card": "#FFFDF5",
      "card-foreground": "#111111",
      "popover": "#FFFDF5",
      "popover-foreground": "#111111",
      "primary": "#FFDD00",
      "primary-foreground": "#111111",
      "secondary": "#00C2FF",
      "secondary-foreground": "#ffffff",
      "muted": "#5F615E",
      "muted-foreground": "#111111",
      "accent": "#FF3B30",
      "accent-foreground": "#ffffff",
      "destructive": "#B00020",
      "border": "#050505",
      "input": "#050505",
      "ring": "#FF3B30",
      "chart-1": "#FFDD00",
      "chart-2": "#00C2FF",
      "chart-3": "#FF3B30",
      "chart-4": "#007A4D",
      "chart-5": "#FFB800",
      "sidebar": "#FFFDF5",
      "sidebar-foreground": "#111111",
      "sidebar-primary": "#FFDD00",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#0057D8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#050505",
      "sidebar-ring": "#FF3B30",
      "radius": "2px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#FFDD00",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#FF3B30",
      "accent-foreground": "#ffffff",
      "destructive": "#B00020",
      "border": "#303642",
      "input": "#303642",
      "ring": "#FF3B30",
      "chart-1": "#FFDD00",
      "chart-2": "#00C2FF",
      "chart-3": "#FF3B30",
      "chart-4": "#007A4D",
      "chart-5": "#FFB800",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#FFDD00",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#FF3B30",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#FF3B30",
      "radius": "2px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a2-f664-7323-9267-4db4525895e9",
    "slug": "concrete-slab-shock",
    "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"
      ],
      "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"
      ]
    }
  }
}

# Concrete Slab Shock shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate Concrete Slab Shock into local shadcn/ui primitives that feel like blunt paper slabs: square geometry, 3px black borders, hard 6px offset shadows, saturated role blocks, and explicit accessible state labels.

## 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` concrete field, `colors.surface` paper slabs, `colors.text` ink text, `colors.border` near-black contours, `colors.primary` for the main yellow action, `colors.secondary` for cyan information accents, `colors.error` for deep red errors with white text, `colors.success` for green confirmations, and `colors.warning` for amber caution with black text. Typography uses Archivo Black for display, Atkinson Hyperlegible for body, and IBM Plex Mono for operational labels.

## Visual character to preserve
- 3px solid black borders on every component boundary.
- No blur, no translucency, no gradient, and radii at 0-4px only.
- Hard offset shadows: cards and popovers use `6px 6px 0 #050505`; small controls use `3px 3px 0 #050505`.
- State must include text/symbol support, not only color.
- Focus uses a yellow outer ring plus a black component border.

## ShadSync visual profile
family: neo-brutalist-operations; material: paper-on-concrete; contour: square-slab; border: 3px solid near-black; underlay: hard-offset-shadow; grain: concrete-speckle-background-only; stickerBadges: rectangular state labels; motion: snap-compress; density: compact-operational; accents: yellow primary, cyan info, red error, green success, amber warning.

## Signature component recipes
- button: Use square primary buttons with yellow fill, black text, 3px border, uppercase mono label, and 6px hard shadow. On active, translate 4px/4px and reduce shadow to 2px. Secondary buttons are paper fill; destructive uses deep red with white text and a leading warning symbol.
- card: Use paper background, 3px black border, 0-2px radius, 6px or 8px black offset shadow, and an optional colored corner tab for role.
- input: Use paper fill, 3px black border, 12px padding, mono uppercase label, and yellow focus outline outside the border. Error inputs add red left stripe and text.
- textarea: Match input, minimum 96px height, square corners, visible label, and helper text for contrast/state meaning.
- select: Match input; add black chevron zone or cyan right cap so affordance is visible independent of placeholder color.
- dialog: Render as a paper slab with black title bar, 3px border, 10px hard shadow, and decisive yellow primary action.
- sheet: Use concrete or black header strip, paper body, 3px border on exposed edge, and ledger-style section dividers.
- tabs: Active tab is a yellow or cyan rectangular slab connected to the content border; inactive tabs are paper slabs with black borders.
- badge: Rectangular, uppercase mono, 2px border, symbol prefix such as ● ▲ ■, semantic fill plus readable text.
- separator: Heavy 3px black rule; never use low-contrast hairlines.
- checkbox: Square 22px box, 3px border, hard mini-shadow, green fill plus check mark when selected.
- switch: Rectangular track with 3px border and square thumb; on state uses green fill and text label nearby.
- slider: Thick black track, square handle, yellow filled range, numeric mono value label.
- tooltip: Paper or black slab with 2px border, no fade blur, and concise contrast guidance.
- dropdown-menu: Paper slab menu with 3px border, hard shadow, active item yellow, destructive item red with icon.
- table: Ledger table with black header, 3px row rules, alternating paper/concrete fills, and left accent stripe for priority rows.

## Preview shots
1. application-shell: command dashboard with nav rail, metrics, ledger table, and palette audit feed.
2. detail-editor: token edit form with inputs, textarea, select, tabs, sheet, and dialog confirmation.
3. data-operations: table-heavy operations screen with dropdown filters, badges, slider threshold, switches, checkboxes, and tooltips.

## Implementation contract
Import local primitives from `@/components/ui/*`. Do not invent a second component system. Apply className recipes directly to shadcn primitives. Preserve square radii, 3px black borders, hard offset shadows, explicit labels, and accessible foreground/background pairings.

## 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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

export function SlabAuditCard() {
  return (
    <Card className="rounded-[2px] border-[3px] border-[#050505] bg-[#FFFDF5] text-[#111111] shadow-[8px_8px_0_#050505]">
      <CardHeader className="border-b-[5px] border-[#050505]">
        <div className="flex items-center justify-between gap-3">
          <CardTitle className="font-['Archivo_Black'] text-3xl uppercase tracking-[-0.04em]">Contrast Ledger</CardTitle>
          <Badge className="rounded-none border-2 border-[#050505] bg-[#FFB800] font-['IBM_Plex_Mono'] text-[#111111]">▲ RETEST</Badge>
        </div>
      </CardHeader>
      <CardContent className="space-y-4 p-4">
        <Input className="rounded-none border-[3px] border-[#050505] bg-[#FFFDF5] shadow-[3px_3px_0_#050505] focus-visible:ring-4 focus-visible:ring-[#FFDD00]" defaultValue="black / yellow = approved" />
        <Table>
          <TableHeader className="bg-[#050505] text-[#FFFDF5]"><TableRow><TableHead>Pair</TableHead><TableHead>Role</TableHead><TableHead>Status</TableHead></TableRow></TableHeader>
          <TableBody><TableRow className="border-b-[3px] border-[#050505]"><TableCell>#111 on #FFDD00</TableCell><TableCell>Primary</TableCell><TableCell>● Pass</TableCell></TableRow></TableBody>
        </Table>
        <Button className="rounded-none border-[3px] border-[#050505] bg-[#FFDD00] font-['IBM_Plex_Mono'] font-bold uppercase text-[#111111] shadow-[6px_6px_0_#050505] active:translate-x-1 active:translate-y-1 active:shadow-[2px_2px_0_#050505]">Approve slab</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use square neo-brutalist styling with 3px black borders, paper or semantic slab fill, hard offset shadow where elevated, uppercase mono labels for operational states, and visible yellow focus rings."
    },
    {
      "component": "card",
      "recipe": "Use square neo-brutalist styling with 3px black borders, paper or semantic slab fill, hard offset shadow where elevated, uppercase mono labels for operational states, and visible yellow focus rings."
    },
    {
      "component": "input",
      "recipe": "Use square neo-brutalist styling with 3px black borders, paper or semantic slab fill, hard offset shadow where elevated, uppercase mono labels for operational states, and visible yellow focus rings."
    },
    {
      "component": "textarea",
      "recipe": "Use square neo-brutalist styling with 3px black borders, paper or semantic slab fill, hard offset shadow where elevated, uppercase mono labels for operational states, and visible yellow focus rings."
    },
    {
      "component": "select",
      "recipe": "Use square neo-brutalist styling with 3px black borders, paper or semantic slab fill, hard offset shadow where elevated, uppercase mono labels for operational states, and visible yellow focus rings."
    },
    {
      "component": "dialog",
      "recipe": "Use square neo-brutalist styling with 3px black borders, paper or semantic slab fill, hard offset shadow where elevated, uppercase mono labels for operational states, and visible yellow focus rings."
    },
    {
      "component": "sheet",
      "recipe": "Use square neo-brutalist styling with 3px black borders, paper or semantic slab fill, hard offset shadow where elevated, uppercase mono labels for operational states, and visible yellow focus rings."
    },
    {
      "component": "tabs",
      "recipe": "Use square neo-brutalist styling with 3px black borders, paper or semantic slab fill, hard offset shadow where elevated, uppercase mono labels for operational states, and visible yellow focus rings."
    },
    {
      "component": "badge",
      "recipe": "Use square neo-brutalist styling with 3px black borders, paper or semantic slab fill, hard offset shadow where elevated, uppercase mono labels for operational states, and visible yellow focus rings."
    },
    {
      "component": "separator",
      "recipe": "Use square neo-brutalist styling with 3px black borders, paper or semantic slab fill, hard offset shadow where elevated, uppercase mono labels for operational states, and visible yellow focus rings."
    },
    {
      "component": "checkbox",
      "recipe": "Use square neo-brutalist styling with 3px black borders, paper or semantic slab fill, hard offset shadow where elevated, uppercase mono labels for operational states, and visible yellow focus rings."
    },
    {
      "component": "switch",
      "recipe": "Use square neo-brutalist styling with 3px black borders, paper or semantic slab fill, hard offset shadow where elevated, uppercase mono labels for operational states, and visible yellow focus rings."
    },
    {
      "component": "slider",
      "recipe": "Use square neo-brutalist styling with 3px black borders, paper or semantic slab fill, hard offset shadow where elevated, uppercase mono labels for operational states, and visible yellow focus rings."
    },
    {
      "component": "tooltip",
      "recipe": "Use square neo-brutalist styling with 3px black borders, paper or semantic slab fill, hard offset shadow where elevated, uppercase mono labels for operational states, and visible yellow focus rings."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use square neo-brutalist styling with 3px black borders, paper or semantic slab fill, hard offset shadow where elevated, uppercase mono labels for operational states, and visible yellow focus rings."
    },
    {
      "component": "table",
      "recipe": "Use square neo-brutalist styling with 3px black borders, paper or semantic slab fill, hard offset shadow where elevated, uppercase mono labels for operational states, and visible yellow focus rings."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "soft shadows",
        "gradient charts",
        "color-only status"
      ],
      "composition": "Black left rail, dominant paper audit card, yellow/cyan metric slabs, and ledger table with thick row rules.",
      "id": "application-shell",
      "mustShowStates": [
        "primary yellow button",
        "warning badge with symbol",
        "priority row stripe",
        "tooltip explaining contrast"
      ],
      "primitives": [
        "button",
        "card",
        "badge",
        "separator",
        "table",
        "tooltip",
        "dropdown-menu"
      ],
      "scene": {
        "actions": [
          "Approve yellow pair",
          "Run edge audit"
        ],
        "description": "Operations dashboard for approving high-impact accent slabs before release.",
        "eyebrow": "Palette command",
        "headline": "Hard color. Clear orders.",
        "rows": [
          {
            "block": "Alert red",
            "pair": "white / #B00020",
            "status": "■ pass"
          },
          {
            "block": "Cyan slab",
            "pair": "black / #00C2FF",
            "status": "● pass"
          },
          {
            "block": "Amber warning",
            "pair": "black / #FFB800",
            "status": "▲ retest"
          }
        ],
        "stats": [
          {
            "label": "Open slabs",
            "value": "28"
          },
          {
            "label": "Lowest pair",
            "value": "4.8:1"
          },
          {
            "label": "Hue-only risks",
            "value": "0"
          }
        ]
      }
    },
    {
      "avoid": [
        "rounded modal defaults",
        "placeholder-only labels",
        "unbordered fields"
      ],
      "composition": "Token editor with tabbed sections, square fields, a right-side sheet for APCA notes, and a confirmation dialog slab.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input with yellow ring",
        "checked square checkbox",
        "green rectangular switch",
        "red validation stripe"
      ],
      "primitives": [
        "card",
        "input",
        "textarea",
        "select",
        "tabs",
        "sheet",
        "dialog",
        "button",
        "switch",
        "checkbox"
      ],
      "scene": {
        "actions": [
          "Save token",
          "Open APCA sheet"
        ],
        "description": "Edit the semantic role, foreground, border weight, and motion contract for a color token.",
        "eyebrow": "Token edit bay",
        "fields": [
          {
            "label": "Accent role",
            "value": "primary-action-yellow"
          },
          {
            "label": "Foreground",
            "value": "#111111 approved"
          },
          {
            "label": "Border",
            "value": "3px solid #050505"
          },
          {
            "label": "Decision note",
            "value": "Use yellow only for primary action and active navigation."
          }
        ],
        "headline": "Primary action slab"
      }
    },
    {
      "avoid": [
        "thin gray table lines",
        "low contrast filters",
        "unlabeled toggles"
      ],
      "composition": "Dense data-operations view with filter dropdowns, threshold slider, switches, checkboxes, semantic badges, and heavy ledger rules.",
      "id": "data-operations",
      "mustShowStates": [
        "selected table rows",
        "slider threshold value",
        "dropdown active item",
        "destructive red badge with icon"
      ],
      "primitives": [
        "table",
        "slider",
        "switch",
        "checkbox",
        "badge",
        "separator",
        "dropdown-menu",
        "button",
        "card"
      ],
      "scene": {
        "actions": [
          "Batch approve",
          "Flag failures"
        ],
        "description": "Review UI boundaries and state indicators that must meet 3:1 while preserving brutalist impact.",
        "eyebrow": "Boundary audit",
        "headline": "Non-text contrast queue",
        "rows": [
          {
            "boundary": "3px black",
            "component": "Input",
            "status": "● pass"
          },
          {
            "boundary": "label required",
            "component": "Switch",
            "status": "▲ fix"
          },
          {
            "boundary": "paper slab",
            "component": "Tooltip",
            "status": "● pass"
          }
        ],
        "stats": [
          {
            "label": "Borders pass",
            "value": "96%"
          },
          {
            "label": "Focus failures",
            "value": "2"
          },
          {
            "label": "Rows selected",
            "value": "6"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "yellow primary action",
      "cyan information slab",
      "deep red error slab",
      "green success badge",
      "amber warning block"
    ],
    "border": "3px solid near-black",
    "contour": "square-slab",
    "density": "compact-operational",
    "family": "neo-brutalist-operations",
    "grain": "concrete-speckle-background-only",
    "material": "paper-on-concrete",
    "motion": "snap-compress",
    "stickerBadges": true,
    "underlay": "hard-offset-shadow"
  }
}