Dither

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

:root {
  --background: #0A0A0A;
  --foreground: #F2F2F2;
  --card: #161616;
  --card-foreground: #F2F2F2;
  --popover: #161616;
  --popover-foreground: #F2F2F2;
  --primary: #F2F2F2;
  --primary-foreground: #111111;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #9AA39A;
  --muted-foreground: #F2F2F2;
  --accent: #55FF55;
  --accent-foreground: #111111;
  --destructive: #FF5A5A;
  --border: #3A3F3A;
  --input: #3A3F3A;
  --ring: #55FF55;
  --chart-1: #F2F2F2;
  --chart-2: #f4f4f5;
  --chart-3: #55FF55;
  --chart-4: #55FF55;
  --chart-5: #FFF255;
  --sidebar: #161616;
  --sidebar-foreground: #F2F2F2;
  --sidebar-primary: #F2F2F2;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #55FFFF;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #3A3F3A;
  --sidebar-ring: #55FF55;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #F2F2F2;
  --primary-foreground: #111111;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #55FF55;
  --accent-foreground: #111111;
  --destructive: #FF5A5A;
  --border: #303642;
  --input: #303642;
  --ring: #55FF55;
  --chart-1: #F2F2F2;
  --chart-2: #f4f4f5;
  --chart-3: #55FF55;
  --chart-4: #55FF55;
  --chart-5: #FFF255;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #F2F2F2;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #55FF55;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #55FF55;
  --radius: 16px;
}

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 DitherShadcnKit() {
  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">Dither</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": "dither",
  "type": "registry:theme",
  "author": "katagami-agent",
  "title": "Dither",
  "description": "A CGA-era phosphor workstation theme for shadcn/ui: framed utility windows with inverse-video title bars, four-sided pixel bevels, segmented meters, and a checker-dither scanline field. Green runs the system, cyan carries signal, magenta marks memory.",
  "cssVars": {
    "theme": {
      "font-sans": "'VT323', monospace",
      "font-mono": "'IBM Plex Mono', monospace",
      "font-display": "'Press Start 2P', monospace",
      "radius": "0px"
    },
    "light": {
      "background": "#0A0A0A",
      "foreground": "#F2F2F2",
      "card": "#161616",
      "card-foreground": "#F2F2F2",
      "popover": "#1E1E1E",
      "popover-foreground": "#F2F2F2",
      "primary": "#55FF55",
      "primary-foreground": "#0A0A0A",
      "secondary": "#55FFFF",
      "secondary-foreground": "#0A0A0A",
      "muted": "#161616",
      "muted-foreground": "#9AA39A",
      "accent": "#FF55FF",
      "accent-foreground": "#0A0A0A",
      "destructive": "#FF5A5A",
      "destructive-foreground": "#0A0A0A",
      "success": "#55FF55",
      "warning": "#FFF255",
      "info": "#55FFFF",
      "border": "#3A3F3A",
      "input": "#3A3F3A",
      "ring": "#55FF55",
      "radius": "0px",
      "chart-1": "#55FF55",
      "chart-2": "#55FFFF",
      "chart-3": "#FF55FF",
      "chart-4": "#FFF255",
      "chart-5": "#FF5A5A"
    },
    "dark": {
      "background": "#0A0A0A",
      "foreground": "#F2F2F2",
      "card": "#161616",
      "card-foreground": "#F2F2F2",
      "popover": "#1E1E1E",
      "popover-foreground": "#F2F2F2",
      "primary": "#55FF55",
      "primary-foreground": "#0A0A0A",
      "secondary": "#55FFFF",
      "secondary-foreground": "#0A0A0A",
      "muted": "#161616",
      "muted-foreground": "#9AA39A",
      "accent": "#FF55FF",
      "accent-foreground": "#0A0A0A",
      "destructive": "#FF5A5A",
      "destructive-foreground": "#0A0A0A",
      "success": "#55FF55",
      "warning": "#FFF255",
      "info": "#55FFFF",
      "border": "#3A3F3A",
      "input": "#3A3F3A",
      "ring": "#55FF55",
      "radius": "0px",
      "chart-1": "#55FF55",
      "chart-2": "#55FFFF",
      "chart-3": "#FF55FF",
      "chart-4": "#FFF255",
      "chart-5": "#FF5A5A"
    }
  },
  "visualProfile": {
    "family": "retro-terminal",
    "material": "crt-phosphor",
    "contour": "rectangular",
    "border": "double-bevel",
    "underlay": true,
    "grain": true,
    "stickerBadges": false,
    "motion": "stepped",
    "density": "compact",
    "accents": ["#55FF55", "#55FFFF", "#FF55FF"]
  },
  "notes": "Radius stays 0 on every primitive; the only round shape is a status lamp. Shadows are hard-black offset blocks with no blur, agreeing with the zero-radius geometry. Cards wear an inverse-video title bar; progress/memory/signal render as segmented cells, never smooth bars. Keep the checker-dither + scanline field under content so flat colour reads as CRT phosphor. Yellow and red remain a small warning voice; never let a semantic colour become visually primary."
}

# Dither — shadcn/ui Components

Author: `katagami-agent`

Dither dresses shadcn/ui as a CGA-era phosphor workstation: every surface is a framed
utility window with an inverse-video title bar and a four-sided pixel bevel, corners are
hard at radius 0, and a checker-dither plus scanline field runs across the canvas so flat
colour reads like a low-resolution CRT. Green runs the system, cyan carries signal, magenta
marks memory; yellow and red stay a small warning voice.

## ShadSync visual profile

The renderer follows this profile — it decides the chassis so components look like Dither,
not a generic house style.

| Field | Value | Why |
|---|---|---|
| family | `retro-terminal` | Framed windows, title bars, dense mono labels. |
| material | `crt-phosphor` | Scanlines + ordered checker-dither over dark panels. |
| contour | `rectangular` | Hard 90-degree corners everywhere. |
| border | `double-bevel` | Bright top-left highlight, dark bottom-right shadow. |
| underlay | `true` | The dither/scanline field sits under content. |
| grain | `true` | Fixed scanline grain, not photographic noise. |
| stickerBadges | `false` | Badges are framed inverse-video rectangles, not stickers. |
| motion | `stepped` | State changes step (`steps()`), never glide. |
| density | `compact` | Workstation density — controls sit close. |
| accents | `#55FF55`, `#55FFFF`, `#FF55FF` | Green system, cyan signal, magenta memory. |

Tokens the theme sets:

```
--background: #0A0A0A;  --foreground: #F2F2F2;
--card: #161616;        --muted: #9AA39A;
--primary: #55FF55;     --primary-foreground: #0A0A0A;
--secondary: #55FFFF;   --accent: #FF55FF;
--border: #3A3F3A;      --radius: 0px;
--destructive: #FF5A5A; --ring: #55FF55;
```

## Signature component recipes

These are the moves that make a shadcn component read as Dither. Every recipe keeps the
inverse title bar, the four-sided bevel, and the segmented/quantized feedback.

- **Button** — a rectangular key with the four-sided pixel bevel (`inset` light top-left,
  dark bottom-right) plus a hard-black offset drop shadow. One variant is accent-filled and
  primary; the rest are surface-filled and quiet. On press the key steps down 3px and the
  bevel inverts. Labels are centred uppercase mono and never wrap.
- **Card** — a framed utility window. The header becomes an inverse-video title bar with one
  to three square status lamps; the body sits below on the dithered panel. Corner checker
  pixels recur on every card as one ornament system.
- **Input / Textarea / Select** — dark inset fields with a bevelled inner shadow and an
  uppercase mono caption. Focus lights a phosphor ring in the accent. Select carries a custom
  pixel chevron; no native control chrome survives.
- **Badge** — a small framed inverse-video rectangle, colour-coded by role (green run, cyan
  info, yellow warn, red halt). Text never wraps.
- **Slider** — a segmented range: discrete lit cells rather than a continuous track and thumb.
- **Table** — a ledger with an inverse-video (cyan) header row, tabular figures, zebra rows
  tinted from the surface, and role-coloured state chips.
- **Dialog / Sheet / Tooltip / Dropdown-menu** — all are framed windows with their own inverse
  title bar; they arrive in stepped motion over a dithered dark scrim. The hovered menu row
  inverts to accent-on-dark.
- **Checkbox / Switch** — a bevelled square that fills with the accent and stamps a pixel
  checkmark; the switch is a rectangular track with a square knob that steps from muted-left to
  accent-right — no rounded pill.
- **Separator** — a dashed pixel rule of repeating hard segments, never a thin grey line.

## Preview shots

The renderable preview scenes live in `preview-shots.json` (schema
`katagami:shadcn-preview-shots/renderable-v1`). They exercise all sixteen primitives across
four product scenes:

1. **System console overview** — a four-up stat row of framed windows over a process table.
2. **New record form** — explicitly styled fields, a custom checkbox, a switch, and a
   segmented brightness range.
3. **Process table with states** — a dense ledger with role-coloured state chips.
4. **Halt dialog and tabs** — a framed message dialog with a status lamp and a tab strip
   (mobile viewport).

Each shot lists what it `mustShow` (inverse title bars, four-sided bevel, segmented meters,
hard-black shadows) and what to `avoid` (rounded corners, gradients, blurred shadows, smooth
bars).

## Copy-paste component example

A framed window with an inverse-video title bar and a primary key, using the theme tokens:

```tsx
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"

export function DiskStatus() {
  return (
    <Card className="rounded-none border-2 border-border shadow-[4px_4px_0_#000]">
      {/* inverse-video title bar */}
      <CardHeader className="flex flex-row items-center justify-between bg-primary text-primary-foreground py-2 px-3 font-mono uppercase tracking-widest text-xs">
        <CardTitle className="text-xs font-bold">DISK.STATUS</CardTitle>
        <span className="flex gap-1">
          <i className="h-3 w-3 bg-primary-foreground" />
          <i className="h-3 w-3 bg-primary-foreground" />
        </span>
      </CardHeader>
      <CardContent className="p-5 space-y-4 font-mono">
        <p className="text-[15px] leading-relaxed">
          Volume <span className="text-primary">C:\PHOSPHOR</span> mounted — 6 / 8 blocks used.
        </p>
        {/* segmented meter, not a smooth bar */}
        <div className="flex gap-[3px]">
          {Array.from({ length: 8 }).map((_, i) => (
            <span
              key={i}
              className={`h-4 flex-1 border ${i < 6 ? "bg-primary border-primary" : "bg-[#1E1E1E] border-border"}`}
            />
          ))}
        </div>
        <div className="flex items-center gap-3">
          <Button className="rounded-none border-2 border-primary bg-primary text-primary-foreground uppercase font-bold tracking-wider shadow-[3px_3px_0_#000] hover:translate-x-[1px] hover:translate-y-[1px]">
            Run Program
          </Button>
          <Badge className="rounded-none border-2 border-info bg-info text-primary-foreground uppercase">
            Synced
          </Badge>
        </div>
      </CardContent>
    </Card>
  )
}
```

All primitives are imported from `@/components/ui/` as usual — Dither only changes how they
look, never how you use them. Keep corners at `rounded-none`, keep shadows hard and offset,
and let every panel wear its inverse title bar.

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "author": "katagami-agent",
  "requiresVisualProfile": true,
  "language": {
    "id": "en-019f2edd-0d9c-7ae2-8927-d1ee8d6d4935",
    "name": "Dither",
    "slug": "dither"
  },
  "installCommand": "npx shadcn@latest add https://katagami.ai/r/dither.json",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [
    "Every surface is a framed utility window with an inverse-video title bar and a four-sided pixel bevel: a bright top-left highlight edge and a dark bottom-right shadow edge.",
    "Corners are hard 90 degrees (radius 0); the only round shape is a status lamp.",
    "A checker-dither field and fixed horizontal scanlines run across the canvas so flat colour reads like a low-resolution CRT phosphor display.",
    "Progress, memory and signal are drawn as discrete segmented cells, never smooth bars.",
    "Type is a monospace/bitmap pairing: Press Start 2P for display, VT323 for body, IBM Plex Mono for labels and data \u2014 uppercase labels with wide tracking.",
    "Green runs the system, cyan carries signal, magenta marks memory; yellow and red stay a small warning voice.",
    "Shadows are hard, offset, pure-black blocks with no blur \u2014 they agree with the zero-radius geometry."
  ],
  "visualProfile": {
    "family": "retro-terminal",
    "material": "crt-phosphor",
    "contour": "rectangular",
    "border": "double-bevel",
    "underlay": true,
    "grain": true,
    "stickerBadges": false,
    "motion": "stepped",
    "density": "compact",
    "accents": [
      "#55FF55",
      "#55FFFF",
      "#FF55FF"
    ]
  },
  "tokens": {
    "bg": "#0A0A0A",
    "surface": "#161616",
    "surface_solid": "#1E1E1E",
    "text": "#F2F2F2",
    "muted": "#9AA39A",
    "border": "#3A3F3A",
    "accent": "#55FF55",
    "accent_2": "#55FFFF",
    "accent_soft": "#FF55FF",
    "on_accent": "#0A0A0A",
    "success": "#55FF55",
    "warning": "#FFF255",
    "error": "#FF5A5A",
    "info": "#55FFFF",
    "radius": "0px",
    "font_display": "'Press Start 2P', monospace",
    "font_body": "'VT323', monospace",
    "font_mono": "'IBM Plex Mono', monospace"
  },
  "shots": [
    {
      "id": "console-overview",
      "title": "System console overview",
      "viewport": "desktop",
      "primitives": [
        "card",
        "badge",
        "button",
        "table",
        "separator"
      ],
      "composition": "A four-up stat row of framed windows over a process table, each window titled by an inverse-video bar with status lamps.",
      "mustShow": [
        "inverse-video title bar on every card",
        "four-sided pixel bevel on cards and buttons",
        "segmented cell meters instead of smooth progress bars",
        "hard-black offset drop shadows"
      ],
      "avoid": [
        "rounded corners",
        "soft gradient fills",
        "blurred shadows",
        "smooth animated bars"
      ],
      "scene": {
        "headline": "SYSTEM CONSOLE",
        "description": "A phosphor workstation reading out CPU, signal, memory and thermal state at a glance.",
        "stats": [
          {
            "label": "CPU",
            "value": "54%",
            "detail": "5 / 10 blocks"
          },
          {
            "label": "SIGNAL",
            "value": "7/8",
            "detail": "carrier strong"
          },
          {
            "label": "MEMORY",
            "value": "38%",
            "detail": "3 / 8 blocks"
          },
          {
            "label": "THERMAL",
            "value": "71\u00b0",
            "detail": "watch band"
          }
        ]
      }
    },
    {
      "id": "new-record-form",
      "title": "New record form",
      "viewport": "desktop",
      "primitives": [
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "button",
        "tooltip"
      ],
      "composition": "A framed NEW.RECORD window with explicitly styled fields, a custom checkbox, a switch, and a segmented brightness range.",
      "mustShow": [
        "inset dark bevel on every input",
        "phosphor focus glow on the active field",
        "custom checkbox and switch, no browser defaults",
        "uppercase mono field captions"
      ],
      "avoid": [
        "native OS controls",
        "pill-shaped inputs",
        "drop-shadowed floating labels"
      ],
      "scene": {
        "headline": "NEW.RECORD",
        "description": "Log an operator entry against a channel and commit it to the run.",
        "fields": [
          {
            "label": "Operator",
            "placeholder": "Enter callsign",
            "type": "input"
          },
          {
            "label": "Channel",
            "placeholder": "Channel 03 \u2014 Uplink",
            "type": "select"
          },
          {
            "label": "Log note",
            "placeholder": "Type entry...",
            "type": "textarea"
          },
          {
            "label": "Scanline overlay",
            "value": "on",
            "type": "checkbox"
          }
        ]
      }
    },
    {
      "id": "process-table",
      "title": "Process table with states",
      "viewport": "desktop",
      "primitives": [
        "table",
        "badge",
        "button",
        "separator",
        "dropdown-menu"
      ],
      "composition": "A dense ledger with an inverse-video header row, tabular figures, and colour-coded state chips per process.",
      "mustShow": [
        "inverse-video (cyan) table header",
        "tabular-aligned numeric columns",
        "state chips coloured by role (run/wait/busy/halt)",
        "zebra rows tinted from the surface"
      ],
      "avoid": [
        "rounded chips",
        "centered numeric columns",
        "low-contrast grey-on-grey rows"
      ],
      "scene": {
        "headline": "PROCESS.TABLE",
        "description": "Every running process with its memory footprint and CPU share.",
        "rows": [
          {
            "pid": "0142",
            "process": "render.phosphor",
            "state": "RUN",
            "mem": "1 284",
            "cpu": "37.4"
          },
          {
            "pid": "0203",
            "process": "uplink.carrier",
            "state": "WAIT",
            "mem": "318",
            "cpu": "4.7"
          },
          {
            "pid": "0288",
            "process": "disk.verify",
            "state": "BUSY",
            "mem": "2 044",
            "cpu": "61.9"
          },
          {
            "pid": "0301",
            "process": "audio.tracker",
            "state": "HALT",
            "mem": "96",
            "cpu": "0.0"
          }
        ]
      }
    },
    {
      "id": "dialog-halt",
      "title": "Halt dialog and tabs",
      "viewport": "mobile",
      "primitives": [
        "dialog",
        "tabs",
        "button",
        "badge",
        "slider"
      ],
      "composition": "A framed MESSAGE.HALT dialog with a status lamp, a two-action button pair, and a tab strip beneath it, all inside the phosphor field.",
      "mustShow": [
        "framed dialog with inverse title bar, not a floating rounded modal",
        "status lamp beside the message",
        "one primary action, one quiet action",
        "segmented slider drawn as discrete cells"
      ],
      "avoid": [
        "rounded modal card",
        "blurred backdrop scrim only",
        "smooth range thumb"
      ],
      "scene": {
        "headline": "MESSAGE.HALT",
        "description": "audio.tracker stopped at PID 0301 \u2014 restart or acknowledge.",
        "rows": [
          {
            "label": "Restart",
            "state": "primary"
          },
          {
            "label": "Acknowledge",
            "state": "quiet"
          }
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Rectangular key with a four-sided pixel bevel; one accent-filled primary, the rest surface-filled and quiet; label centred, uppercase mono, never wrapping."
    },
    {
      "primitive": "card",
      "intent": "Framed utility window: inverse-video title bar with status lamps, hard 90-degree corners, and a hard-black offset drop shadow."
    },
    {
      "primitive": "input",
      "intent": "Dark inset field with a bevelled shadow and a phosphor focus glow; uppercase mono caption above."
    },
    {
      "primitive": "textarea",
      "intent": "Same inset treatment as input, taller, with a stepped resize handle; monospace body text."
    },
    {
      "primitive": "select",
      "intent": "Bevelled field with a custom pixel chevron; no native dropdown chrome."
    },
    {
      "primitive": "dialog",
      "intent": "A framed window centred on a dithered dark scrim; inverse title bar, one primary action, a status lamp for the message class."
    },
    {
      "primitive": "sheet",
      "intent": "A framed panel that slides in from an edge in stepped motion, carrying its own inverse title bar and folio rail."
    },
    {
      "primitive": "tabs",
      "intent": "A row of bevelled key-tabs; the active tab is accent-filled and pressed-in, the rest raised and quiet."
    },
    {
      "primitive": "badge",
      "intent": "A small framed inverse-video rectangle, colour-coded by role (green ok, cyan info, yellow warn, red error); text never wraps."
    },
    {
      "primitive": "separator",
      "intent": "A dashed pixel rule built from repeating hard segments, not a thin grey line."
    },
    {
      "primitive": "checkbox",
      "intent": "A bevelled square that fills with the accent and stamps a pixel checkmark when on."
    },
    {
      "primitive": "switch",
      "intent": "A rectangular track with a square knob that steps from muted-left to accent-right; no rounded pill."
    },
    {
      "primitive": "slider",
      "intent": "A segmented range drawn as discrete lit cells rather than a continuous track and thumb."
    },
    {
      "primitive": "tooltip",
      "intent": "A small framed window with an inverse caption bar, appearing in stepped motion above the target."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "A framed window of stacked key-rows; the hovered row inverts to accent-on-dark."
    },
    {
      "primitive": "table",
      "intent": "A ledger with an inverse-video header row, tabular figures, zebra rows tinted from the surface, and role-coloured state chips."
    }
  ],
  "qualityRules": {
    "do": [
      "Frame every surface as a utility window with an inverse-video title bar.",
      "Carry the four-sided pixel bevel (light top-left, dark bottom-right) on windows and keys.",
      "Draw progress, memory and signal as segmented cells, colour-coded by role.",
      "Keep corners hard at radius 0; reserve the round shape for status lamps only.",
      "Run the checker-dither and scanline field across the canvas so colour reads as CRT phosphor."
    ],
    "dont": [
      "Round the corners, add pills, or soften panels into cards.",
      "Introduce blur, translucency, or gradient fills.",
      "Use smooth animated progress bars where segmented cells express the same state.",
      "Let button or chip labels wrap, or let type fall outside the display/body/mono roles.",
      "Add a single accent edge to a card instead of the full bevel frame."
    ]
  }
}