Moire

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

:root {
  --background: #F4F0E4;
  --foreground: #14120E;
  --card: #FCFAF3;
  --card-foreground: #14120E;
  --popover: #FCFAF3;
  --popover-foreground: #14120E;
  --primary: #14120E;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #6B665B;
  --muted-foreground: #14120E;
  --accent: #2C63E0;
  --accent-foreground: #ffffff;
  --destructive: #E23B2C;
  --border: #E4DECF;
  --input: #E4DECF;
  --ring: #2C63E0;
  --chart-1: #14120E;
  --chart-2: #f4f4f5;
  --chart-3: #2C63E0;
  --chart-4: #4E9A51;
  --chart-5: #C88526;
  --sidebar: #FCFAF3;
  --sidebar-foreground: #14120E;
  --sidebar-primary: #14120E;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2C63E0;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #E4DECF;
  --sidebar-ring: #2C63E0;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #14120E;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #2C63E0;
  --accent-foreground: #ffffff;
  --destructive: #E23B2C;
  --border: #303642;
  --input: #303642;
  --ring: #2C63E0;
  --chart-1: #14120E;
  --chart-2: #f4f4f5;
  --chart-3: #2C63E0;
  --chart-4: #4E9A51;
  --chart-5: #C88526;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #14120E;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2C63E0;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #2C63E0;
  --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 MoireShadcnKit() {
  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">Moire</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": "moire",
  "type": "registry:theme",
  "author": "katagami-agent",
  "title": "Moire",
  "description": "A manga-console theme: black ink and adhesive screentone on cream paper, one electric wet-ink blue, controls that stamp like ink and collapse their offset on press. Reimagined from Y2K Chrome Manga Console.",
  "cssVars": {
    "theme": {
      "font-sans": "IBM Plex Sans, system-ui, sans-serif",
      "font-mono": "Share Tech Mono, ui-monospace, monospace",
      "font-display": "Barlow Condensed, sans-serif",
      "radius": "16px"
    },
    "light": {
      "background": "#F4F0E4",
      "foreground": "#14120E",
      "card": "#FCFAF3",
      "card-foreground": "#14120E",
      "popover": "#FCFAF3",
      "popover-foreground": "#14120E",
      "primary": "#2C63E0",
      "primary-foreground": "#FFFFFF",
      "secondary": "#14120E",
      "secondary-foreground": "#FCFAF3",
      "muted": "#EDE7D8",
      "muted-foreground": "#6B665B",
      "accent": "#86B81E",
      "accent-foreground": "#14120E",
      "destructive": "#E23B2C",
      "destructive-foreground": "#FFFFFF",
      "border": "#14120E",
      "input": "#14120E",
      "ring": "#2C63E0",
      "radius": "16px",
      "chart-1": "#2C63E0",
      "chart-2": "#14120E",
      "chart-3": "#86B81E",
      "chart-4": "#C88526",
      "chart-5": "#E23B2C"
    },
    "dark": {
      "background": "#14120E",
      "foreground": "#F4F0E4",
      "card": "#1B1813",
      "card-foreground": "#F4F0E4",
      "popover": "#1B1813",
      "popover-foreground": "#F4F0E4",
      "primary": "#5E93F0",
      "primary-foreground": "#14120E",
      "secondary": "#F4F0E4",
      "secondary-foreground": "#14120E",
      "muted": "#26221B",
      "muted-foreground": "#B7AF9E",
      "accent": "#A9DB45",
      "accent-foreground": "#14120E",
      "destructive": "#F0584A",
      "destructive-foreground": "#14120E",
      "border": "#F4F0E4",
      "input": "#F4F0E4",
      "ring": "#5E93F0",
      "radius": "16px",
      "chart-1": "#5E93F0",
      "chart-2": "#F4F0E4",
      "chart-3": "#A9DB45",
      "chart-4": "#E0A94A",
      "chart-5": "#F0584A"
    }
  },
  "visualProfile": {
    "family": "manga-console",
    "material": "black ink linework and adhesive halftone screentone on cream paper",
    "contour": "hierarchy from solid-ink title bars, screentone bands, and the white panel gutter",
    "border": "none",
    "underlay": true,
    "grain": true,
    "stickerBadges": false,
    "motion": "tone develops; the moire beat is the only continuous life; buttons stamp and collapse their offset on press",
    "density": "airy at the macro level, tight inside tone-code clusters",
    "accents": ["#2C63E0", "#86B81E", "#E23B2C"]
  },
  "notes": "Radius only from {0,16,24,9999}. No grey borders — separation is ink rules, tone bands, and the gutter. Primary is the single wet-ink blue; lime is a rare diagnostic ping; vermilion is a single splash. Buttons are ink stamps with a flat offset shadow (3px 3px 0) that collapses to 0 on :active. Cards are tone plates: an ink title bar over a screentone band over clean paper. Screentone is a radial-gradient dot field; two overlapping dot layers beat into moire."
}

# Moire — shadcn/ui Components

Author: `katagami-agent`
Registry theme: `moire` · schema `component-recipes-v1`

Moire dresses shadcn/ui as a **manga console**: black ink and adhesive screentone on cream paper, one electric wet-ink blue, and controls that stamp onto the page like ink and collapse their offset when pressed. It is the reimagined descendant of *Y2K Chrome Manga Console* — the chrome rails and glossy capsules are gone; the manga craft stays.

## ShadSync visual profile

- **Family:** manga-console. **Material:** ink linework + halftone screentone on cream paper (`--background:#F4F0E4`).
- **Contour, not border:** hierarchy comes from solid-ink title bars, screentone bands, and the white panel gutter. `--border` maps to ink `#14120E` and is used as a 3px baseline rule or title bar, **never** a grey box outline.
- **Radius:** `{0, 16, 24, 9999}` only. Inputs and small controls 16px; cards/plates 24px; pills/badges 9999px; ink rules 0.
- **Accents (≤3):** primary wet-ink blue `#2C63E0`; diagnostic lime `#86B81E` (rare ping); vermilion splash `#E23B2C` (single detonation, and the destructive role). Everything else is black-and-white.
- **Underlay + grain:** a faint page-wide screentone dot field sits under the surface; dense tone is reserved for shading.
- **Motion:** buttons stamp with a flat offset shadow `3px 3px 0` that collapses to `0` on `:active`; the moire beat (two overlapping dot layers) is the only continuous animation. Honor `prefers-reduced-motion`.
- **Type roles (three, strict):** Barlow Condensed (display, uppercase, -0.02em) · IBM Plex Sans (body, 17px) · Share Tech Mono (readouts, tone codes).

## Signature component recipes

### Button (ink stamp)
```tsx
// @/components/ui/button.tsx — Moire variants
const button = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-full font-display uppercase tracking-[0.04em] font-bold text-[15px] transition-[transform,box-shadow] active:translate-x-[3px] active:translate-y-[3px] active:shadow-none",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground shadow-[3px_3px_0_rgba(44,99,224,0.34)]",
        ink:     "bg-secondary text-secondary-foreground shadow-[3px_3px_0_rgba(20,18,14,0.26)]",
        tone:    "bg-card text-foreground shadow-[3px_3px_0_rgba(20,18,14,0.26)]", // + screentone ::before
        ghost:   "bg-transparent text-foreground shadow-none px-1.5", // wet-ink underline gesture on hover
      },
      size: { sm: "h-9 px-4 text-[13px]", default: "h-11 px-6", lg: "h-12 px-7" },
    },
    defaultVariants: { variant: "default", size: "default" },
  }
);
```

### Card (tone plate)
An ink (or wet) title bar, then a screentone shade band, then content on clean paper. No grey border.
```tsx
<Card className="rounded-3xl shadow-[5px_6px_0_rgba(20,18,14,0.11)] overflow-hidden bg-card">
  <div className="bg-foreground text-background font-mono text-[11px] tracking-[0.16em] uppercase px-4 py-2 flex justify-between">
    <span>Plate 01 · Memory</span><span>T·062</span>
  </div>
  <div className="h-11 [background:radial-gradient(var(--dot)_30%,transparent_32%)] [background-size:6px_6px]" />
  <CardContent className="pt-5">…</CardContent>
</Card>
```

### Badge (screentone chip / diagnostic ping)
```tsx
<Badge className="rounded-full font-mono text-[11px] tracking-[0.1em] uppercase bg-card text-foreground
  shadow-[0_2px_0_rgba(20,18,14,0.14)] gap-2 before:content-[''] before:w-2 before:h-2 before:rounded-full before:bg-primary" />
```
Use the bead colour to encode role: wet-ink = active, lime = diagnostic ok, vermilion = splash. Always pair colour with a label — never colour alone.

### Input / Textarea / Select (ink baseline, never a box)
```tsx
<Input className="rounded-none border-0 border-b-[3px] border-foreground bg-transparent
  focus-visible:border-primary focus-visible:ring-0 px-0.5" />
```
Select uses the same baseline with a custom inline chevron; Checkbox/Radio are ink stamps (inset ring, wet-ink fill when checked); Switch is an ink pill with a paper knob; Slider runs a wet-ink track over a screentone rail with an ink stamp thumb.

## Preview shots

`preview-shots.json` (`renderable-v1`) renders three product scenes on this theme:
1. **Memory console** — the active tone-plate entry with a develop meter, ink-stamp actions, and a depth-log table.
2. **Compose entry** — the full form set (input, textarea, select, checkbox, switch, slider) on ink baselines.
3. **Sync sheet** — a dialog/sheet with tone-code rows, diagnostic pings, and a single vermilion splash.

All 16 primitives appear across the shots: button, card, input, textarea, select, dialog, sheet, tabs, badge, separator, checkbox, switch, slider, tooltip, dropdown-menu, table.

## Copy-paste component example

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

export function MemoryPlate() {
  return (
    <Card className="rounded-3xl overflow-hidden bg-card shadow-[5px_6px_0_rgba(20,18,14,0.11)]">
      <div className="bg-primary text-primary-foreground font-mono text-[11px] tracking-[0.16em] uppercase px-4 py-2 flex justify-between">
        <span>Plate 02 · Active</span><span>Sync</span>
      </div>
      <div className="h-11 [background:radial-gradient(rgba(20,18,14,0.62)_30%,transparent_32%)] [background-size:6px_6px] [mask-image:linear-gradient(90deg,#000,transparent)]" />
      <CardContent className="pt-5 space-y-3">
        <h3 className="font-display uppercase text-2xl tracking-[-0.02em]">A place I keep coming back to</h3>
        <p className="text-[17px] leading-relaxed">The panel is 62% developed — screentone still laying across the lower third.</p>
        <div className="flex items-center gap-3">
          <Badge className="rounded-full font-mono text-[11px] uppercase gap-2 before:content-[''] before:w-2 before:h-2 before:rounded-full before:bg-primary">live</Badge>
          <Button>Develop</Button>
          <Button variant="ink">Seal</Button>
        </div>
      </CardContent>
    </Card>
  )
}
```

Everything imports from `@/components/ui/` and reads the `moire` registry theme; do not restyle per-component — the theme carries the ink, tone, and radius.

{
  "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": "moire", "name": "Moire", "slug": "moire-manga-tone-console" },
  "installCommand": "npx shadcn@latest add https://katagami.ai/r/moire.json",
  "primitives": [
    "button", "card", "input", "textarea", "select", "dialog", "sheet", "tabs",
    "badge", "separator", "checkbox", "switch", "slider", "tooltip", "dropdown-menu", "table"
  ],
  "identityNotes": [
    "Black ink and adhesive screentone on cream paper (#F4F0E4); one electric wet-ink blue (#2C63E0) is the only voice colour.",
    "Hierarchy is ink title bars, screentone bands, and the white panel gutter — never a grey border.",
    "Buttons are ink stamps: a flat offset shadow (3px 3px 0) that collapses to 0 on press.",
    "Radius only from {0, 16, 24, 9999}; cards 24, inputs 16, pills 9999, rules 0.",
    "Badges carry a halftone-dot bead; role is shown by bead colour AND label, never colour alone.",
    "Three type roles: Barlow Condensed display (uppercase), IBM Plex Sans body 17px, Share Tech Mono readouts."
  ],
  "visualProfile": {
    "family": "manga-console",
    "material": "black ink linework and halftone screentone on cream paper",
    "contour": "ink title bars, screentone bands, white panel gutter",
    "border": "none",
    "underlay": true,
    "grain": true,
    "stickerBadges": false,
    "motion": "tone develops; moire beat is the only continuous life; press collapses the stamp offset",
    "density": "airy macro, tight tone-code clusters",
    "accents": ["#2C63E0", "#86B81E", "#E23B2C"]
  },
  "tokens": {
    "background": "#F4F0E4",
    "surface": "#FCFAF3",
    "foreground": "#14120E",
    "muted": "#6B665B",
    "primary": "#2C63E0",
    "primaryForeground": "#FFFFFF",
    "accent": "#86B81E",
    "destructive": "#E23B2C",
    "success": "#4E9A51",
    "warning": "#C88526",
    "border": "#14120E",
    "ring": "#2C63E0",
    "radius": { "none": "0px", "md": "16px", "lg": "24px", "full": "9999px" },
    "fontDisplay": "Barlow Condensed, sans-serif",
    "fontBody": "IBM Plex Sans, system-ui, sans-serif",
    "fontMono": "Share Tech Mono, ui-monospace, monospace"
  },
  "shots": [
    {
      "id": "memory-console",
      "title": "Memory console",
      "viewport": "desktop",
      "primitives": ["card", "button", "badge", "table", "tabs", "separator", "tooltip"],
      "composition": "A dominant tone-plate entry (ink title bar, screentone band, develop meter, ink-stamp actions) beside a depth-log table; tabs above, mono tone codes throughout.",
      "mustShow": [
        "ink title bar over a screentone band on the active card",
        "a develop meter filled with wet-ink over a screentone rail",
        "ink-stamp buttons with the flat offset shadow",
        "a depth-log table with mono codes and status pings"
      ],
      "avoid": ["grey card borders", "three equal KPI cards", "glossy chrome capsules", "drop-shadow blur on cards"],
      "scene": {
        "headline": "A place I keep coming back to",
        "description": "The active entry is 62% developed — screentone still laying across the lower third.",
        "rows": [
          { "code": "MEM·0421", "entry": "a place I keep coming back to", "tone": "62%", "state": "ACTIVE" },
          { "code": "MEM·0388", "entry": "the last train, remembered", "tone": "100%", "state": "SEALED" },
          { "code": "MEM·0355", "entry": "rooftop, cables, one lit window", "tone": "28%", "state": "HOLD" },
          { "code": "MEM·0301", "entry": "who I was at the arcade", "tone": "46%", "state": "LOCKED" }
        ]
      }
    },
    {
      "id": "compose-entry",
      "title": "Compose entry",
      "viewport": "desktop",
      "primitives": ["input", "textarea", "select", "checkbox", "switch", "slider", "button", "separator"],
      "composition": "A compose form on ink baselines — title input, console-verse textarea, archive select, tone-density slider, and lay-tone / moire-beat toggles, closed by an ink-stamp submit.",
      "mustShow": [
        "inputs as a 3px ink baseline rule, not a box",
        "checkbox and radio as ink stamps that fill wet-ink when checked",
        "a slider with a wet-ink track over a screentone rail",
        "a switch as an ink pill with a paper knob"
      ],
      "avoid": ["boxed input outlines", "browser-default controls", "pastel field fills"],
      "scene": {
        "headline": "Compose a memory",
        "description": "Every control is drawn — ink baselines and screentone, no browser defaults.",
        "fields": [
          { "label": "Entry title", "type": "input", "placeholder": "a place I keep coming back to" },
          { "label": "Console verse", "type": "textarea", "placeholder": "the city forgot my name / i kept the tone" },
          { "label": "Archive", "type": "select", "options": ["Memory / long view", "Field notes", "Identity system"] },
          { "label": "Tone density", "type": "slider", "value": 62 },
          { "label": "Lay tone on save", "type": "checkbox", "value": true },
          { "label": "Moire beat", "type": "switch", "value": true }
        ]
      }
    },
    {
      "id": "sync-sheet",
      "title": "Sync sheet",
      "viewport": "desktop",
      "primitives": ["dialog", "sheet", "dropdown-menu", "badge", "button", "tooltip", "separator", "table"],
      "composition": "A sync sheet slides in with tone-code rows and diagnostic pings; a dropdown offers develop / seal / re-ink; a single vermilion splash marks the one locked panel.",
      "mustShow": [
        "sheet header as an ink bar with a mono panel counter",
        "diagnostic pings (lime ok, amber hold, vermilion locked) with labels",
        "a dropdown-menu of ink-stamp actions",
        "one vermilion splash as the single detonation"
      ],
      "avoid": ["colour-only status", "more than one saturated splash", "grey dividers"],
      "scene": {
        "headline": "Sync — 3 pending",
        "description": "Right-to-left read; status by shape and label, never colour alone.",
        "stats": [
          { "label": "Entries", "value": "421" },
          { "label": "Sealed", "value": "96" },
          { "label": "Avg tone", "value": "58%" },
          { "label": "Pending sync", "value": "03" }
        ]
      }
    }
  ],
  "componentRecipes": [
    { "primitive": "button", "intent": "Ink stamp with a flat offset shadow (3px 3px 0) that collapses to 0 on :active; default = wet-ink, ink, tone-fill, and ghost variants." },
    { "primitive": "card", "intent": "Tone plate: ink (or wet) title bar, screentone shade band, content on clean paper, 24px radius, no border." },
    { "primitive": "input", "intent": "Transparent field on a 3px ink baseline rule; wet-ink baseline on focus; no box, 0 radius on the rule." },
    { "primitive": "textarea", "intent": "Same ink baseline, min-height for console verse, vertical resize only." },
    { "primitive": "select", "intent": "Ink-baseline trigger with a custom inline chevron; menu is a tone plate with ink-bar header." },
    { "primitive": "dialog", "intent": "Centered tone plate with an ink title bar and screentone band; backdrop is dimmed cream with a faint dot field." },
    { "primitive": "sheet", "intent": "Side sheet as a tall tone plate; header is an ink bar with a mono panel counter." },
    { "primitive": "tabs", "intent": "Mono uppercase labels on an ink baseline; active tab carries a wet-ink underline, no pill chrome." },
    { "primitive": "badge", "intent": "Screentone chip with a halftone-dot bead; bead colour + label encode role (wet active, lime ok, vermilion splash)." },
    { "primitive": "separator", "intent": "A solid ink rule (3px) or a screentone band — never a grey hairline." },
    { "primitive": "checkbox", "intent": "Ink-stamp square (inset 3px ink ring); fills wet-ink with a paper check when checked." },
    { "primitive": "switch", "intent": "Ink pill track with a paper knob; track turns wet-ink when on." },
    { "primitive": "slider", "intent": "Wet-ink filled track over a screentone rail; thumb is an ink stamp with offset shadow." },
    { "primitive": "tooltip", "intent": "Small ink plate, paper text, mono label; flat offset shadow, no blur." },
    { "primitive": "dropdown-menu", "intent": "Tone plate menu; items are ink-stamp rows; active item carries a wet-ink bead." },
    { "primitive": "table", "intent": "Depth log: ink header bar, mono code column, alternating faint-tone rows, status pings by shape and label." },
    { "primitive": "avatar", "intent": "Manga ink-and-tone bust in a 9999 pill or 16px plate, one wet-ink glint, screentone shading." },
    { "primitive": "progress", "intent": "Tone-density meter: wet-ink fill developing across a screentone rail." }
  ],
  "qualityRules": {
    "do": [
      "Keep the base black-and-white on cream paper; spend wet-ink like one voice, lime as a rare ping, vermilion once.",
      "Build hierarchy from ink title bars, screentone bands, and the white gutter.",
      "Stamp controls with a flat offset shadow that collapses on press.",
      "Pair every status colour with a shape and a mono label.",
      "Keep body at 17px and tone codes in Share Tech Mono."
    ],
    "dont": [
      "Do not add grey borders, boxed inputs, or nested cards.",
      "Do not use chrome rails, glossy capsules, or blurred drop shadows.",
      "Do not flood large areas with saturated blue, lime, or vermilion.",
      "Do not round arbitrarily — only {0,16,24,9999}.",
      "Do not signal state by colour alone."
    ]
  }
}