Vane

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

:root {
  --background: #F4F3EE;
  --foreground: #0B0B0D;
  --card: #FFFFFF;
  --card-foreground: #0B0B0D;
  --popover: #FFFFFF;
  --popover-foreground: #0B0B0D;
  --primary: #0B0B0D;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #6A6A66;
  --muted-foreground: #0B0B0D;
  --accent: #FF5B04;
  --accent-foreground: #ffffff;
  --destructive: #D6402C;
  --border: rgba(11,11,13,0.10);
  --input: rgba(11,11,13,0.10);
  --ring: #FF5B04;
  --chart-1: #0B0B0D;
  --chart-2: #f4f4f5;
  --chart-3: #FF5B04;
  --chart-4: #2E9E5B;
  --chart-5: #E8A200;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #0B0B0D;
  --sidebar-primary: #0B0B0D;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #3B6FE0;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgba(11,11,13,0.10);
  --sidebar-ring: #FF5B04;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #0B0B0D;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #FF5B04;
  --accent-foreground: #ffffff;
  --destructive: #D6402C;
  --border: #303642;
  --input: #303642;
  --ring: #FF5B04;
  --chart-1: #0B0B0D;
  --chart-2: #f4f4f5;
  --chart-3: #FF5B04;
  --chart-4: #2E9E5B;
  --chart-5: #E8A200;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #0B0B0D;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #FF5B04;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #FF5B04;
  --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 VaneShadcnKit() {
  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">Vane</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": "vane",
  "type": "registry:theme",
  "author": "katagami-agent",
  "title": "Vane — Split-flap kinetic typography",
  "description": "A high-contrast monochrome design language where typography is the interface and meaning resolves like a split-flap board: charcoal slate cells, warm paper, and a single molten flare on the resolved. Bricolage display, Schibsted body, Martian mono cells.",
  "cssVars": {
    "theme": {
      "font-sans": "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif",
      "font-mono": "Martian Mono, ui-monospace, monospace",
      "font-display": "Bricolage Grotesque, ui-sans-serif, sans-serif",
      "radius": "16px"
    },
    "light": {
      "background": "#F4F3EE",
      "foreground": "#0B0B0D",
      "card": "#FFFFFF",
      "card-foreground": "#0B0B0D",
      "popover": "#FFFFFF",
      "popover-foreground": "#0B0B0D",
      "primary": "#FF5B04",
      "primary-foreground": "#16130E",
      "secondary": "#111318",
      "secondary-foreground": "#EDEEF2",
      "muted": "#ECEAE3",
      "muted-foreground": "#6A6A66",
      "accent": "#FFE7D8",
      "accent-foreground": "#7A2C05",
      "destructive": "#D6402C",
      "destructive-foreground": "#FFFFFF",
      "border": "rgba(11,11,13,0.10)",
      "input": "rgba(11,11,13,0.14)",
      "ring": "#FF5B04",
      "radius": "16px",
      "chart-1": "#FF5B04",
      "chart-2": "#111318",
      "chart-3": "#2E9E5B",
      "chart-4": "#E8A200",
      "chart-5": "#3B6FE0"
    },
    "dark": {
      "background": "#0E0F13",
      "foreground": "#EDEEF2",
      "card": "#15171C",
      "card-foreground": "#EDEEF2",
      "popover": "#15171C",
      "popover-foreground": "#EDEEF2",
      "primary": "#FF5B04",
      "primary-foreground": "#16130E",
      "secondary": "#20232B",
      "secondary-foreground": "#EDEEF2",
      "muted": "#1A1C22",
      "muted-foreground": "#9A9CA3",
      "accent": "#2A1B10",
      "accent-foreground": "#FFB27A",
      "destructive": "#E5573F",
      "destructive-foreground": "#0E0F13",
      "border": "rgba(237,238,242,0.12)",
      "input": "rgba(237,238,242,0.16)",
      "ring": "#FF5B04",
      "radius": "16px",
      "chart-1": "#FF5B04",
      "chart-2": "#C9CBD2",
      "chart-3": "#2E9E5B",
      "chart-4": "#E8A200",
      "chart-5": "#3B6FE0"
    }
  },
  "visualProfile": {
    "family": "editorial-mechanical grotesque",
    "material": "split-flap character cells — charcoal slate leaves with a flap-seam hairline, on warm paper",
    "contour": "hard-edged cells (radius 0) set into soft 24px cards",
    "border": "borderless; the only line is the flap-seam hairline",
    "underlay": false,
    "grain": false,
    "stickerBadges": false,
    "motion": "mechanical flip resolution — scramble, flip, lock; snappy 120-220ms",
    "density": "airy editorial with tight mono readouts",
    "accents": ["#FF5B04", "#111318"]
  },
  "notes": "Primary is the molten flare (#FF5B04) fired only on the resolved/live/chosen; secondary is the charcoal slate board. Dark text on flare is intentional (dark glyph on an amber flap). No borders anywhere except the 1px flap-seam hairline; never give a card an accent edge. Radii from {0,16,24,9999}; body 17px floor; three type roles only (Bricolage display, Schibsted body, Martian mono)."
}

# Vane — shadcn/ui Components

> Component recipes for **Vane**, the split-flap kinetic-typography design language.
> Format: `component-recipes-v1`. Author: `katagami-agent`.

Vane sets language in mechanical character cells: charcoal slate leaves split by a flap-seam
hairline, on warm paper, with a single molten flare (`#FF5B04`) that fires only on the resolved,
the live, the chosen. Typography is the interface; motion is the reveal that confirms a value.

## ShadSync visual profile

- **Family** — editorial-mechanical grotesque (Bricolage display, Schibsted body, Martian mono).
- **Material** — split-flap character cells; a flap-seam hairline recurs through every cell,
  readout, and board row as the page-wide ornament system.
- **Contour** — hard-edged cells (radius `0`) set into soft `24px` cards; pills at `9999px`.
- **Border** — borderless. The only line is the 1px flap-seam hairline; never give a card, input,
  or nav an accent edge.
- **Underlay / grain / sticker badges** — none. Clean paper and slate; a single flare.
- **Motion** — mechanical flip resolution: scramble (loading), flip (transition), lock
  (confirmation). Snappy 120–220ms; respect `prefers-reduced-motion`.
- **Density** — airy editorial reading, with tight Martian-mono readouts and labels.
- **Accents** — flare `#FF5B04` (primary, like a highlighter) and slate `#111318` (the board).

Map the profile onto shadcn tokens: `--primary` = flare, `--primary-foreground` = ink `#16130E`
(dark glyph on an amber flap), `--secondary` = slate, `--ring` = flare, `--radius` = `16px`.
Semantic hues (`success #2E9E5B`, `warning #E8A200`, `destructive #D6402C`, `info #3B6FE0`) stay
small and never become visually primary.

## Signature component recipes

The split-flap cell recolours through every primitive. A few load-bearing ones:

### Button

- **Primary** — flare background, ink `#16130E` label, pill (`rounded-full`), one per view; lifts
  `translateY(-2px)` on hover. `bg-primary text-primary-foreground rounded-full px-5 h-11`.
- **Secondary** — slate background, silver label. `bg-secondary text-secondary-foreground`.
- **Ghost** — transparent with a 1.5px flare inset ring on hover; no permanent border.
- **Destructive** — `bg-destructive text-white` for discard/jam actions only.
- Text never wraps; label centred; every button shares one height.

### Input, Textarea, Select

Borderless with an `inset 0 0 0 1.5px var(--input)` ring that becomes a 2px flare ring on focus.
No visible browser defaults; the select caret is an inline SVG. A code field can render as a row of
split-flap cells (`.cell`) that resolve as the user types.

### Card

Borderless white on paper, `rounded-3xl` (24px), soft geometry-matched shadow. Header carries a mono
label and a status chip; a strip of cells sits at the foot. Never nest cards; never add an edge.

### Badge / Chip

Pill, mono `11px` uppercase, `0.12em` tracking. `flare` (accent-soft wash), `slate`, and semantic
variants. Text never wraps.

### Table

Row rhythm from the flap-seam hairline (`inset 0 1px 0 var(--border)`), never full borders. A mono
index or time column on the left (type, not a bar); status pills in the last column.

### Tabs, Switch, Slider, Tooltip, Dialog, Sheet, Dropdown-menu, Separator

Pill tabs (active = slate fill); flare switch; flare slider fill with a slate knob; slate tooltip
with a mono label; dialogs and sheets are borderless `24px` surfaces with the soft `lg` shadow; the
separator is the flap-seam hairline.

## Preview shots

Three renderable product scenes ship in `preview-shots.json` (schema `renderable-v1`): a live
departure board with the cell mechanic, a board-operations console with KPI tiles and a resolve
cascade, and an editorial reader card set. Each names the primitives it must show and what to avoid
(no borders, no second accent, no wrapped control text).

## Copy-paste component example

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

export function ResolvedCard() {
  return (
    <Card className="rounded-3xl border-0 shadow-md">
      <CardHeader className="flex flex-row items-center justify-between">
        <Badge className="rounded-full bg-[color:var(--accent)] text-[color:var(--accent-foreground)] font-mono uppercase tracking-widest">
          Locked
        </Badge>
        <span className="font-mono text-xs text-muted-foreground">08:55</span>
      </CardHeader>
      <CardContent>
        <CardTitle className="font-[Bricolage_Grotesque] text-2xl">Confirmed intent</CardTitle>
        <p className="mt-2 text-muted-foreground">
          The lit cell fires once, then rests. One flare per decision.
        </p>
        <Button className="mt-5 rounded-full bg-primary text-primary-foreground h-11 px-5">
          Resolve the board
        </Button>
      </CardContent>
    </Card>
  )
}
```

All primitives live under `@/components/ui/` and read the theme from `export.json` (registry
theme `vane`). Keep radius at `16px`, body at 17px, three type roles only, and the flare rationed
to the resolved.

{
  "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": "vane", "name": "Vane", "slug": "vane" },
  "installCommand": "npx shadcn@latest add https://katagami.ai/r/vane.json",
  "primitives": [
    "button", "card", "input", "textarea", "select", "dialog", "sheet", "tabs",
    "badge", "separator", "checkbox", "switch", "slider", "tooltip", "dropdown-menu", "table"
  ],
  "identityNotes": [
    "Typography is the interface; meaning resolves like a split-flap board — cells riffle and lock.",
    "One molten flare (#FF5B04) fires only on the resolved, the live, the chosen; slate (#111318) is the board.",
    "Dark ink on flare is intentional — a dark glyph on an amber flap; never white-on-flare.",
    "Borderless everywhere; the only line is the 1px flap-seam hairline running through cells and rows.",
    "Three type roles only: Bricolage display, Schibsted body, Martian mono cells and labels.",
    "Radii from {0,16,24,9999}: hard-edged cells inside soft 24px cards, pill controls."
  ],
  "visualProfile": {
    "family": "editorial-mechanical grotesque",
    "material": "split-flap character cells — charcoal slate leaves with a flap-seam hairline, on warm paper",
    "contour": "hard-edged cells (radius 0) set into soft 24px cards",
    "border": "borderless; only the flap-seam hairline",
    "underlay": false,
    "grain": false,
    "stickerBadges": false,
    "motion": "mechanical flip resolution — scramble, flip, lock; snappy 120-220ms",
    "density": "airy editorial with tight mono readouts",
    "accents": ["#FF5B04", "#111318"]
  },
  "tokens": {
    "background": "#F4F3EE",
    "foreground": "#0B0B0D",
    "card": "#FFFFFF",
    "primary": "#FF5B04",
    "primary-foreground": "#16130E",
    "secondary": "#111318",
    "secondary-foreground": "#EDEEF2",
    "muted": "#ECEAE3",
    "muted-foreground": "#6A6A66",
    "border": "rgba(11,11,13,0.10)",
    "ring": "#FF5B04",
    "radius": "16px",
    "success": "#2E9E5B",
    "warning": "#E8A200",
    "destructive": "#D6402C",
    "info": "#3B6FE0",
    "font-display": "Bricolage Grotesque",
    "font-sans": "Schibsted Grotesk",
    "font-mono": "Martian Mono"
  },
  "shots": [
    {
      "id": "departure-board",
      "title": "Live departure board",
      "viewport": "desktop",
      "primitives": ["card", "badge", "table", "separator", "tooltip"],
      "composition": "A dark slate board panel listing timed rows; each row is a set of split-flap cells with a mono time on the left and a gate status on the right. One row is fully lit in flare (resolved); a header badge reads Riffling.",
      "mustShow": [
        "split-flap character cells with the flap-seam hairline",
        "one fully-lit flare row marking the resolved set",
        "mono time column and uppercase gate labels",
        "borderless card with a status chip in the header"
      ],
      "avoid": ["card borders or accent edges", "white text on flare", "a second accent hue", "wrapped chip text"],
      "scene": {
        "headline": "The morning set is resolving",
        "description": "Forty-two cells across seven gates — watch each board riffle and lock.",
        "rows": [
          { "time": "07:42", "word": "MORNING", "gate": "Gate 07", "state": "Live" },
          { "time": "08:10", "word": "STANDBY", "gate": "Gate 12", "state": "Held" },
          { "time": "08:55", "word": "RESOLVED", "gate": "Gate 21", "state": "Locked" },
          { "time": "09:20", "word": "BOARDING", "gate": "Gate 04", "state": "Live" }
        ]
      }
    },
    {
      "id": "ops-console",
      "title": "Board operations console",
      "viewport": "desktop",
      "primitives": ["card", "tabs", "table", "badge", "switch", "slider", "separator"],
      "composition": "A dashboard: four KPI tiles across the top (no left bars), a resolve-cascade bar chart, a set-completion flip meter, and a gate-status table with status pills. Flare appears only on live/locked states and the meter fill.",
      "mustShow": [
        "KPI tiles with mono labels and display numerals",
        "flip-cascade progress meter filled in flare",
        "gate-status table with pill states (Live, Riffle, Locked, Held)",
        "airy borderless panels on warm paper"
      ],
      "avoid": ["borders between table rows (use the hairline)", "gradients", "emoji or glyph arrows in deltas", "oversized pillowy buttons"],
      "scene": {
        "headline": "Board operations — live",
        "description": "Cells locked, boards live, average resolve time, and jams at a glance.",
        "stats": [
          { "label": "Cells locked", "value": "1,284 / 1,340", "delta": "96% set — nominal" },
          { "label": "Boards live", "value": "7", "delta": "3 resolving · 4 locked" },
          { "label": "Avg resolve", "value": "1.9s", "delta": "0.3s faster today" },
          { "label": "Jams", "value": "1", "delta": "gate 12 flap stuck" }
        ]
      }
    },
    {
      "id": "editorial-reader",
      "title": "Editorial reader card set",
      "viewport": "desktop",
      "primitives": ["card", "button", "badge", "input", "dropdown-menu", "checkbox"],
      "composition": "Three borderless white cards on paper, each with a status chip, a Bricolage headline, body copy, and a foot strip of cells. A primary flare button and a quiet ghost button sit below; a search input resolves its value into cells.",
      "mustShow": [
        "borderless cell-headed cards with a foot cell strip",
        "one primary flare button and quieter secondary/ghost buttons",
        "a search input that reads its value as split-flap cells",
        "Bricolage display headline against Schibsted body"
      ],
      "avoid": ["a second accent color", "card borders", "centered body paragraphs", "wrapped button labels"],
      "scene": {
        "headline": "Type is the interface",
        "description": "Every screen is a typographic composition where the flip confirms the intent.",
        "fields": [
          { "label": "Board title", "value": "Departures" },
          { "label": "Gate", "value": "Gate 07 — Main hall" },
          { "label": "Code", "value": "VANE7" }
        ]
      }
    }
  ],
  "componentRecipes": [
    { "primitive": "button", "intent": "Primary action fired in flare with an ink label; one per view, pill height, label never wraps." },
    { "primitive": "button", "intent": "Secondary slate button and a ghost button whose flare inset ring appears only on hover." },
    { "primitive": "card", "intent": "Borderless white card on paper, 24px radius, mono label plus status chip in the header and a foot strip of cells." },
    { "primitive": "input", "intent": "Borderless field with a 1.5px inset ring that becomes a 2px flare ring on focus; no browser defaults." },
    { "primitive": "textarea", "intent": "Same ring treatment, 1.5 line-height, resize vertical; used for board announcements." },
    { "primitive": "select", "intent": "Custom inline-SVG caret, pill-free rounded field, flare focus ring; gate picker." },
    { "primitive": "dialog", "intent": "Borderless 24px surface with the soft lg shadow; title in Bricolage, actions as one primary flare button." },
    { "primitive": "sheet", "intent": "Side sheet on slate for board settings; flap-seam hairline separators, mono section labels." },
    { "primitive": "tabs", "intent": "Pill tabs; active tab is a slate fill with silver label; others quiet muted text." },
    { "primitive": "badge", "intent": "Mono uppercase pill chips: flare (live/resolved), slate (held), semantic; text never wraps." },
    { "primitive": "separator", "intent": "The flap-seam hairline (inset 0 1px 0 border) — the only line in the system." },
    { "primitive": "checkbox", "intent": "Rounded square that fills flare with an ink check when set; flare focus ring." },
    { "primitive": "switch", "intent": "Flare track when on with a paper knob; slate-tinted track when off." },
    { "primitive": "slider", "intent": "Flare fill on a slate-tinted track with a slate knob; riffle-speed control." },
    { "primitive": "tooltip", "intent": "Slate bubble with a mono label showing cell status (SET 70% · 7 OF 10 LOCKED)." },
    { "primitive": "dropdown-menu", "intent": "Borderless paper menu, 16px radius, hairline separators, flare hover state on the active item." },
    { "primitive": "table", "intent": "Hairline row rhythm, mono index/time column on the left, status pills on the right; no full borders." },
    { "primitive": "badge", "intent": "Split-flap cell strip as a badge — a tiny row of resolving cells for inline status." }
  ],
  "qualityRules": {
    "do": [
      "Ration flare to the resolved, the live, and the chosen — one detonation per view.",
      "Keep the flap-seam hairline as the single page-wide ornament system.",
      "Use dark ink (#16130E) on flare; keep body at 17px and three type roles only.",
      "Set hard-edged cells (radius 0) inside soft 24px cards; pills at 9999px.",
      "Let navigation breathe as type and space, never a boxed pill bar."
    ],
    "dont": [
      "Add borders or give any card an accent edge (top, side, or bottom).",
      "Use white text on flare, or introduce a second bright accent.",
      "Wrap button or chip text, or let a control clip its label.",
      "Use gradients, grain, sticker badges, or glyph arrows (▲▼) in copy.",
      "Nest cards or trap the nav in a floating rounded card."
    ]
  }
}