Coriandoli

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

:root {
  --background: #F4EEE1;
  --foreground: #141210;
  --card: #FCFAF3;
  --card-foreground: #141210;
  --popover: #FCFAF3;
  --popover-foreground: #141210;
  --primary: #141210;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #6E655A;
  --muted-foreground: #141210;
  --accent: #12C7C4;
  --accent-foreground: #ffffff;
  --destructive: #FF4D6A;
  --border: #E7DECB;
  --input: #E7DECB;
  --ring: #12C7C4;
  --chart-1: #141210;
  --chart-2: #f4f4f5;
  --chart-3: #12C7C4;
  --chart-4: #16B57A;
  --chart-5: #F6A609;
  --sidebar: #FCFAF3;
  --sidebar-foreground: #141210;
  --sidebar-primary: #141210;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #3F9BFF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #E7DECB;
  --sidebar-ring: #12C7C4;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #141210;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #12C7C4;
  --accent-foreground: #ffffff;
  --destructive: #FF4D6A;
  --border: #303642;
  --input: #303642;
  --ring: #12C7C4;
  --chart-1: #141210;
  --chart-2: #f4f4f5;
  --chart-3: #12C7C4;
  --chart-4: #16B57A;
  --chart-5: #F6A609;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #141210;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #12C7C4;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #12C7C4;
  --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 CoriandoliShadcnKit() {
  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">Coriandoli</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": "coriandoli",
  "type": "registry:theme",
  "author": "katagami-agent",
  "title": "Coriandoli",
  "description": "Memphis play caught mid-throw and cured into polished terrazzo. No borders — a surface's edge is a poured rim of aggregate chips, dense at the perimeter and thinning inward, on a bright bone ground. Three electric inks are spent like a highlighter; live work cures from scattered chips to a set, glossy slab.",
  "cssVars": {
    "theme": {
      "font-sans": "\"Archivo\", system-ui, sans-serif",
      "font-serif": "\"Syne\", system-ui, sans-serif",
      "font-mono": "\"Space Mono\", ui-monospace, monospace",
      "radius": "1rem"
    },
    "light": {
      "background": "#F4EEE1",
      "foreground": "#141210",
      "card": "#FCFAF3",
      "card-foreground": "#141210",
      "popover": "#FCFAF3",
      "popover-foreground": "#141210",
      "primary": "#12C7C4",
      "primary-foreground": "#141210",
      "secondary": "#FBF7EE",
      "secondary-foreground": "#141210",
      "muted": "#EDE6D6",
      "muted-foreground": "#6E655A",
      "accent": "#FF3D93",
      "accent-foreground": "#ffffff",
      "destructive": "#FF4D6A",
      "destructive-foreground": "#ffffff",
      "border": "transparent",
      "input": "#FBF7EE",
      "ring": "#12C7C4",
      "chart-1": "#12C7C4",
      "chart-2": "#FF3D93",
      "chart-3": "#F6CE1B",
      "chart-4": "#16B57A",
      "chart-5": "#3F9BFF",
      "radius": "1rem"
    },
    "dark": {
      "background": "#171310",
      "foreground": "#F4EEE1",
      "card": "#211B16",
      "card-foreground": "#F4EEE1",
      "popover": "#211B16",
      "popover-foreground": "#F4EEE1",
      "primary": "#2BD8D3",
      "primary-foreground": "#0E1211",
      "secondary": "#2A2119",
      "secondary-foreground": "#F4EEE1",
      "muted": "#2A2119",
      "muted-foreground": "#B7AA97",
      "accent": "#FF5CA5",
      "accent-foreground": "#180810",
      "destructive": "#FF6B82",
      "destructive-foreground": "#1A0A0D",
      "border": "transparent",
      "input": "#2A2119",
      "ring": "#2BD8D3"
    }
  },
  "visualProfile": {
    "family": "terrazzo-aggregate",
    "material": "polished Venetian terrazzo — electric geometric chips suspended in a warm bone matrix",
    "contour": "cured slabs edged by a poured aggregate rim, dense at the perimeter and thinning inward",
    "border": "none — the boundary is a poured chip rim, never a drawn stroke",
    "underlay": true,
    "grain": true,
    "stickerBadges": false,
    "motion": "pour, settle, and cure — snappy then set",
    "density": "medium-high inside modules, airy between",
    "accents": ["#12C7C4", "#FF3D93", "#F6CE1B"]
  },
  "notes": "Coriandoli reimagines Memphis postmodern graphics as polished terrazzo. Every surface is a cured slab bounded by a poured rim of aggregate chips — no line borders. Three electric inks (teal lead, magenta answer, chrome finale) are spent like a highlighter on bone; live states carry a cure meter whose aggregate fill climbs to SET. Focus is a two-tone chip-cluster ring, never an outline. Buttons and status are toy-bright capsules with centred labels that never wrap. All radii are 0 / 16px / 24px / 9999px."
}

# Coriandoli — shadcn/ui Components

> Component recipes for the Coriandoli design language.
> Author: `katagami-agent`
> Schema: `component-recipes-v1`

Memphis play, caught mid-throw and cured into polished terrazzo. Coriandoli keeps the loud,
anti-neutral soul of Memphis postmodern graphics and gives it a new body: every surface is a
cured terrazzo slab, and its boundary is a **poured chip rim** — aggregate chips crowding the
perimeter and thinning inward — never a drawn border. Three electric inks (teal, magenta, chrome)
are spent like a highlighter on a bright bone ground, and live work carries a **cure meter** that
climbs from scattered chips to SET.

## ShadSync visual profile

The renderer follows this `visualProfile` so every generated primitive looks like Coriandoli, not a
generic house chassis:

- **family**: `terrazzo-aggregate`
- **material**: polished Venetian terrazzo — electric chips suspended in a warm bone matrix
- **contour**: cured slabs edged by a poured aggregate rim (dense at the edge, thinning inward)
- **border**: none — the boundary is a poured chip rim, never a stroke
- **underlay**: true (fine terrazzo speckle across the ground)
- **grain**: true
- **stickerBadges**: false
- **motion**: pour, settle, and cure — snappy then set
- **density**: medium-high inside modules, airy between
- **accents**: `#12C7C4` teal · `#FF3D93` magenta · `#F6CE1B` chrome

Radii come only from `0 / 16px / 24px / 9999px`. Shadows are soft and agree with the corner radius —
a polished slab lifted off the bone, never a hard offset keyline. Focus is a two-tone chip-cluster
ring (teal core, magenta halo), never an outline.

## Signature component recipes

Each primitive carries the poured-rim + cured-slab identity. Buttons and chips never wrap; the
layout stacks or shrinks first.

- **button** — Toy-bright capsule (`9999px`), centred label that never wraps. Teal primary leads;
  magenta and chrome support; ghost is a bone slab; disabled dims to muted. Hover lifts 2px.
- **card** — A cured slab at `24px` with a poured chip rim on all four edges (no border, never
  nested) and a soft shadow that matches the radius.
- **input** — Polished-slab field at `16px` with a soft inset; focus draws the two-tone chip-cluster
  ring. No visible browser default.
- **textarea** — Taller polished-slab field; same inset and chip-cluster focus ring; resizes
  vertically.
- **select** — Slab trigger with a hand-drawn chevron; the open menu is a cured slab in its own soft
  aura, hovered items take a faint teal wash.
- **dialog** — A cured slab floated in a soft aura with a poured rim; no hard bordered box, no grey
  scrim rectangle.
- **sheet** — Slides in from the edge as a cured slab with a poured rim and soft aura.
- **tabs** — Underlined chip tabs that breathe on space; the active trigger rises to a bone slab
  with a soft shadow. Never a boxed pill bar.
- **badge** — A flat mono chip in a semantic ink with a small left bead: teal Poured, green Set,
  amber Curing, red Cracked, blue Scheduled, magenta Live.
- **separator** — Expressed as a single Coriandoli squiggle or a hairline shadow seam, never a grey
  rule line.
- **checkbox** — A small slab well that fills teal and shows an ink check when selected.
- **switch** — A slab well that fills teal and lifts its knob when checked.
- **slider** — Slab track with a teal fill and a proud round grip carrying a magenta core.
- **tooltip** — A small cured chip floating in a soft aura; ink text, no border.
- **dropdown-menu** — A cured-slab menu in its own aura; hovered items take a faint teal wash.
- **table** — Soft rows with no rules, mono readings, a teal wash on hover; scrolls inside its slab
  on mobile.

## Preview shots

The renderable preview scenes live in `preview-shots.json` (`renderable-v1`, three product scenes
covering all sixteen primitives): a festival-ops overview dashboard, a new-programme form panel, and
a load-the-programme dialog. Each scene names what it `mustShow` and what to `avoid`, so the render
stays on the poured-rim, cured-slab identity.

## Copy-paste component example

A primary action and a cured-slab card, using the theme tokens from `export.json`
(installed under `@/components/ui/`):

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

export function ZoneCard() {
  return (
    <Card className="rounded-[24px] shadow-md">
      <CardHeader className="flex items-center justify-between">
        <CardTitle className="font-[Syne] tracking-tight">Piazza Grande</CardTitle>
        <Badge className="bg-primary text-primary-foreground rounded-full">Poured</Badge>
      </CardHeader>
      <CardContent>
        <p className="text-muted-foreground">
          Main stage, brass at 18:00, confetti cannons on the downbeat.
        </p>
        {/* cure meter: aggregate fill climbs to SET */}
        <div className="mt-4 h-3.5 rounded-full bg-secondary overflow-hidden">
          <div className="h-full rounded-full bg-primary" style={{ width: "62%" }} />
        </div>
        <Button className="mt-6 rounded-full">Pour the programme</Button>
      </CardContent>
    </Card>
  )
}
```

The button is a single teal capsule (`bg-primary`), its label centred and never wrapping; the card is
a cured slab with a soft, radius-matched shadow and no border — the poured chip rim and terrazzo
speckle come from the renderer following the `visualProfile`.

{
  "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": "coriandoli",
    "name": "Coriandoli",
    "slug": "coriandoli"
  },
  "installCommand": "npx shadcn@latest add https://katagami.ai/r/coriandoli.json",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [
    "No borders anywhere — a surface's edge is a poured chip rim: aggregate chips dense at the perimeter and thinning inward.",
    "Every surface is a cured terrazzo slab on a bright bone ground, with a fine electric speckle threading the gutters.",
    "Three electric inks — teal lead (#12C7C4), magenta answer (#FF3D93), chrome finale (#F6CE1B) — are spent like a highlighter, never used to coat.",
    "Live work carries a cure meter whose aggregate fill climbs from scattered chips to SET; focus is a two-tone chip-cluster ring, never an outline.",
    "Radii only from 0 / 16px / 24px / 9999px; buttons and chips are toy-bright capsules with centred labels that never wrap."
  ],
  "visualProfile": {
    "family": "terrazzo-aggregate",
    "material": "polished Venetian terrazzo — electric chips suspended in a warm bone matrix",
    "contour": "cured slabs edged by a poured aggregate rim, dense at the edge and thinning inward",
    "border": "none",
    "underlay": true,
    "grain": true,
    "stickerBadges": false,
    "motion": "pour, settle, and cure",
    "density": "medium-high inside modules, airy between",
    "accents": ["#12C7C4", "#FF3D93", "#F6CE1B"]
  },
  "tokens": {
    "bg": "#F4EEE1",
    "surface": "#FCFAF3",
    "text": "#141210",
    "muted": "#6E655A",
    "border": "transparent",
    "accent": "#12C7C4",
    "accent2": "#FF3D93",
    "accentSoft": "#F6CE1B",
    "onAccent": "#141210",
    "success": "#16B57A",
    "warning": "#F6A609",
    "error": "#FF4D6A",
    "info": "#3F9BFF",
    "radiusControl": "16px",
    "radiusCard": "24px",
    "radiusPill": "9999px",
    "fontSans": "\"Archivo\", system-ui, sans-serif",
    "fontSerif": "\"Syne\", system-ui, sans-serif",
    "fontMono": "\"Space Mono\", ui-monospace, monospace"
  },
  "shots": [
    {
      "id": "festival-ops-overview",
      "title": "Festival ops overview dashboard",
      "viewport": "desktop",
      "primitives": ["card", "tabs", "badge", "table", "button", "separator", "tooltip", "dropdown-menu"],
      "composition": "A four-up row of cured-slab metric tiles each carrying a cure meter, a wide call-sheet table beside a narrower signals feed, and a zone-cure bar list below; a breathing depth rail on the left, never a boxed sidebar.",
      "mustShow": [
        "cured slabs edged by a poured chip rim, no drawn border",
        "cure meters whose aggregate fill climbs to SET",
        "flat mono status chips with a small left bead",
        "table rows with no rules, a teal wash on hover"
      ],
      "avoid": ["any drawn border or rule line", "a boxed or pill navigation bar", "pastel background washes"],
      "scene": {
        "headline": "Festa di Mezza Estate",
        "description": "Pour day; four of six zones set, doors in three hours forty.",
        "stats": [
          {"label": "RSVPs poured", "value": "8,240", "delta": "SET 82%"},
          {"label": "Crews on call", "value": "64", "delta": "SET 70%"},
          {"label": "Confetti loaded", "value": "100%", "delta": "18 cannons armed"},
          {"label": "Permits cleared", "value": "5 / 6", "delta": "south wall curing"}
        ]
      }
    },
    {
      "id": "new-programme-form",
      "title": "New-programme form panel",
      "viewport": "desktop",
      "primitives": ["input", "textarea", "select", "slider", "switch", "checkbox", "button", "tooltip"],
      "composition": "A cured slab holding a stack of polished-slab fields: a text input, a select, a textarea, a crowd-cap slider, two toggles, a checkbox/radio group, and a primary + ghost button pair.",
      "mustShow": [
        "every editable field as a polished slab with a soft inset, no border",
        "focus drawing a two-tone chip-cluster ring, not an outline",
        "the slider fill running teal with a magenta-core grip",
        "one clearly primary teal capsule, the rest quiet"
      ],
      "avoid": ["visible browser default controls", "borders on inputs", "more than one loud button"],
      "scene": {
        "headline": "Pour a festa",
        "description": "Set the programme, crews and confetti before the first call.",
        "fields": [
          {"label": "Event name", "placeholder": "Festa di Mezza Estate…", "type": "input"},
          {"label": "Crew size", "value": "Standard — 20 hands", "type": "select"},
          {"label": "Programme note", "placeholder": "Parade steps off at the fountain…", "type": "textarea"},
          {"label": "Crowd cap", "value": "56%", "type": "slider"},
          {"label": "Confetti at finale", "value": "on", "type": "switch"}
        ]
      }
    },
    {
      "id": "load-the-programme-dialog",
      "title": "Load-the-programme dialog",
      "viewport": "desktop",
      "primitives": ["dialog", "sheet", "input", "button", "badge", "separator"],
      "composition": "A cured-slab modal floated in a soft aura with a poured rim: a header over a body with a programme-name input and a primary teal button.",
      "mustShow": [
        "the modal floating in a soft-shadow aura with a poured chip rim",
        "the input as a polished slab, no border",
        "the confirm button a single teal capsule",
        "a flat mono status chip on the header"
      ],
      "avoid": ["a hard bordered dialog box", "a grey scrim rectangle", "emoji on the buttons"],
      "scene": {
        "headline": "Load the programme",
        "description": "Six zones selected for pour day; the run sheet locks once you open doors.",
        "rows": [
          {"name": "Programme", "value": "Mezza Estate — long pour"},
          {"name": "Confetti", "value": "18 cannons, armed at the downbeat"},
          {"name": "Doors", "value": "18:00, waitlist opens after"}
        ]
      }
    }
  ],
  "componentRecipes": [
    {"primitive": "button", "intent": "Toy-bright capsule: teal primary, magenta and chrome support, bone ghost, dimmed disabled; label centred, never wraps."},
    {"primitive": "card", "intent": "Cured slab at 24px with a poured chip rim on all four edges; no border, never nested; soft radius-matched shadow."},
    {"primitive": "input", "intent": "Polished slab at 16px with a soft inset; focus draws a two-tone chip-cluster ring, no outline."},
    {"primitive": "textarea", "intent": "Taller polished slab; same inset and chip-cluster focus ring; resizes vertically."},
    {"primitive": "select", "intent": "Slab trigger with a hand-drawn chevron; the open menu is a cured slab in a soft aura, teal wash on hover."},
    {"primitive": "dialog", "intent": "Cured slab floated in a soft aura with a poured rim; no hard bordered box, no grey scrim rectangle."},
    {"primitive": "sheet", "intent": "Slides in from the edge as a cured slab with a poured rim and soft aura."},
    {"primitive": "tabs", "intent": "Underlined chip tabs breathing on space; the active trigger rises to a bone slab; never a boxed pill bar."},
    {"primitive": "badge", "intent": "Flat mono chip in a semantic ink with a small left bead: Poured, Set, Curing, Cracked, Scheduled, Live."},
    {"primitive": "separator", "intent": "A single Coriandoli squiggle or a hairline shadow seam, never a grey rule line."},
    {"primitive": "checkbox", "intent": "Small slab well that fills teal and shows an ink check when selected."},
    {"primitive": "switch", "intent": "Slab well that fills teal and lifts its knob when checked."},
    {"primitive": "slider", "intent": "Slab track with a teal fill and a proud round grip carrying a magenta core."},
    {"primitive": "tooltip", "intent": "A small cured chip floating in a soft aura; ink text, no border."},
    {"primitive": "dropdown-menu", "intent": "Cured-slab menu in its own aura; hovered items take a faint teal wash."},
    {"primitive": "table", "intent": "Soft rows with no rules, mono readings, teal wash on hover; scrolls inside its slab on mobile."}
  ],
  "qualityRules": {
    "do": [
      "Bound every surface with a poured chip rim; let aggregate density read as the edge.",
      "Spend the three inks like a highlighter and keep bone the dominant field.",
      "Give live work a cure meter that climbs from scattered chips to SET.",
      "Match every shadow's softness to its corner radius."
    ],
    "dont": [
      "Draw a border, rule, or single accent edge anywhere.",
      "Wash a surface with pastel tint or coat it in saturated accent.",
      "Box the navigation into a floating card or pill bar.",
      "Use any radius outside 0 / 16px / 24px / 9999px."
    ]
  }
}