Leerstelle

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: #1C1B18;
  --card: #FBF7EE;
  --card-foreground: #1C1B18;
  --popover: #FBF7EE;
  --popover-foreground: #1C1B18;
  --primary: #1C1B18;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #7D766C;
  --muted-foreground: #1C1B18;
  --accent: #2E5C63;
  --accent-foreground: #ffffff;
  --destructive: #8E4D46;
  --border: rgba(28,27,24,0.12);
  --input: rgba(28,27,24,0.12);
  --ring: #2E5C63;
  --chart-1: #1C1B18;
  --chart-2: #f4f4f5;
  --chart-3: #2E5C63;
  --chart-4: #5C6F54;
  --chart-5: #A47B45;
  --sidebar: #FBF7EE;
  --sidebar-foreground: #1C1B18;
  --sidebar-primary: #1C1B18;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #6F8E92;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgba(28,27,24,0.12);
  --sidebar-ring: #2E5C63;
  --radius: 24px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #1C1B18;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #2E5C63;
  --accent-foreground: #ffffff;
  --destructive: #8E4D46;
  --border: #303642;
  --input: #303642;
  --ring: #2E5C63;
  --chart-1: #1C1B18;
  --chart-2: #f4f4f5;
  --chart-3: #2E5C63;
  --chart-4: #5C6F54;
  --chart-5: #A47B45;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #1C1B18;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2E5C63;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #2E5C63;
  --radius: 24px;
}

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 LeerstelleShadcnKit() {
  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">Leerstelle</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": "leerstelle",
  "type": "registry:theme",
  "title": "Leerstelle",
  "description": "A field-note interface for an artificial self. Warm ivory paper ground, graphite ink, a deep teal-graphite accent, and a single pale-cyan state glint. Newsreader serif diary voice + IBM Plex Sans/Mono. Square archival plates with hairline rules and corner ticks — depth from paper and authored negative space, never shadow-as-card.",
  "cssVars": {
    "theme": {
      "font-sans": "IBM Plex Sans, system-ui, sans-serif",
      "font-mono": "IBM Plex Mono, ui-monospace, monospace",
      "font-display": "Newsreader, Georgia, serif",
      "font-heading": "Newsreader, Georgia, serif",
      "radius": "0px"
    },
    "light": {
      "background": "#F4EEE1",
      "foreground": "#1C1B18",
      "card": "#FBF7EE",
      "card-foreground": "#1C1B18",
      "popover": "#FBF7EE",
      "popover-foreground": "#1C1B18",
      "primary": "#2E5C63",
      "primary-foreground": "#FBF7EE",
      "secondary": "#1C1B18",
      "secondary-foreground": "#F4EEE1",
      "accent": "#AFC7CA",
      "accent-foreground": "#1C1B18",
      "muted": "#EFE7D6",
      "muted-foreground": "#7D766C",
      "destructive": "#8E4D46",
      "destructive-foreground": "#FBF7EE",
      "success": "#5C6F54",
      "warning": "#A47B45",
      "info": "#6F8E92",
      "border": "rgba(28,27,24,0.22)",
      "input": "#F4EEE1",
      "ring": "#2E5C63",
      "radius": "0px"
    }
  }
}

# Leerstelle shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-agent`
Slug: `leerstelle`

## Intent

Leerstelle is a field-note interface for an artificial self. Through shadcn/ui its one governing
idea — **the archival plate held inside an authored gap** — must survive: every surface is a
square paper plate with hairline rules and small corner ticks, sitting in a wide, deliberately
empty coordinate gutter. The ground is **warm ivory paper** (`#F4EEE1`), never pure white. Type
is three voices: **Newsreader** serif for the diary, **IBM Plex Sans** for restrained captions and
body, **IBM Plex Mono** for timestamps, coordinates, and machine readouts. Hierarchy comes from a
change of voice and scale, not colour. The only accents are a deep **teal-graphite** ink
(`#2E5C63`) and a single **pale-cyan glint** (`#AFC7CA`) reserved for one point of state. Corners
are square (radius 0); pills are 9999. Light mode is the point.

## Required primitives

- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

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

## Token cues

Colors:

```json
{ "primary": "#2E5C63", "accent": "#AFC7CA", "background": "#F4EEE1", "surface": "#FBF7EE", "text": "#1C1B18", "muted": "#7D766C", "recess": "#EFE7D6", "success": "#5C6F54", "warning": "#A47B45", "error": "#8E4D46", "info": "#6F8E92", "glint": "#AFC7CA", "rule": "rgba(28,27,24,0.22)" }
```

Typography:

```json
{ "heading_font": "Newsreader", "body_font": "IBM Plex Sans", "mono_font": "IBM Plex Mono", "letter_spacing": "-0.02em", "base_size": "17px" }
```

## Visual character to preserve

- **The archival plate**: a square warm-paper surface with a hairline rule and two corner ticks;
  depth comes from paper and authored negative space, never a rounded drop-shadow card. Never nest
  plates; make one plate dominant and let others read as marginal findings.
- **Coordinate gutters**: tiny x/y labels and registration crosses sit outside the content so the
  empty space reads as authored — the namesake *Leerstelle*.
- **One glint**: `#AFC7CA` marks a single point of state (a cursor, a pin, an active tab segment,
  one active table row). It is never a glow or a broad fill.
- **Three voices**: Newsreader serif for diary headings, IBM Plex Mono for slugs / timestamps /
  coordinates, IBM Plex Sans for captions and body. Negative `-0.02em` tracking on display.

## ShadSync visual profile

```json
{ "family": "editorial", "material": "paper", "contour": "square", "border": "hairline", "underlay": false, "grain": true, "stickerBadges": false, "motion": "still", "density": "sparse", "accents": ["accent", "warning", "error"] }
```

## Signature component recipes

### Button
Primary `Button` = `--primary` (teal-graphite) on warm paper, a 7px pale-cyan dot as its single
state mark — the one emphasis; a secondary variant is a hairline-outline square pill; a ghost
variant is quiet mono. All share one height and the square-pill (9999) shape, label centred, mono.
Disabled is a flat faded plaque. No heavy borders.

### Card
`Card` is a square warm-paper plate — hairline rule, two corner ticks, no rounding, no shadow-as-card.
A focal plate is larger and dominant; supporting plates tuck around it. Never nest plates.

### Input and Textarea
`Input` / `Textarea` sit on the warm paper recess fill with a hairline rule; focus turns the rule
teal and insets a pale-cyan underline; an invalid field draws a rust (`--error`) inset. Mono labels
above, real field-note values inside. Square corners.

### Select, Tabs, and Table
`Select` filters voice or desk; `Tabs` switch Self-state / Fragments / Gaps with a 2px pale-cyan
glint segment on the active tab (not a heavy underline); `Table` is the fragment index — a mono
uppercase header on a hairline rule, mono rows ≥14.5px, hairline row separators, a flat status
`Badge` per row, one glint-active row, and an open-gap empty state. No heavy rule-lines.

### Dialog and Sheet
`Dialog` is a calm square plate ("Commit this entry to the index?") — corner ticks, hairline rule,
generous padding, no shadow drama. `Sheet` is the fragment / archive side rail with a coordinate
gutter edge. Both warm paper / graphite, hairline only.

### Badge, Switch, Slider, Tooltip, Separator, Checkbox, Dropdown-menu
`Badge` is a flat status chip paired with a tiny dot and a label (committed / review / conflict /
glint active) — colour is never the sole signal. `Switch` "on" draws the thumb teal on a paper
track. `Slider` is a teal track with a square thumb; the active point may carry the glint.
`Tooltip` is concise sans on a warm paper plate. `Separator` is a hairline plate rule or open
coordinate gutter — never a heavy divider. `Checkbox` carries a teal checked state; `dropdown-menu`
carries a destructive "archive to cold storage" item.

## Preview shots

- `application-shell`: the self-state console — a coordinate-gutter rail, plate KPI cards (fragments / drift / gaps / glint events), and the fragment-index table.
- `detail-editor`: log a field note — labelled fields, an invalid coordinate state, pin/margin switches, a tolerance slider, a commit-confirm dialog.
- `data-operations`: the fragment queue — rows, dropdown actions, status badges, an open-gap idle state.
- Each preview shot carries a renderable `scene` (headline, description, actions, rows/fields/stats).

## Implementation contract

- Start from the local `@/components/ui/*` shadcn primitives; do not create a second component system.
- Apply `/katagami/shadcn/leerstelle/registry-theme.json` variables first, then compose with these recipes.
- Keep Katagami token names as source metadata; shadcn semantic names are only the export surface.
- Do: build square paper plates with hairline rules + corner ticks; carry hierarchy with voice and
  scale; reserve the glint for a single point of state; pair every status colour with a label.
- Do not: round corners into shadow-cards; use borders heavier than a hairline; spread the glint
  into a fill; nest plates; leave browser-default controls; let semantic colours become primary.

## Copy-paste component example

This shows the import shape and a real Leerstelle composition.

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

// An archival plate: square warm paper, a hairline rule and corner ticks, no shadow-card.
// Hierarchy from voice (serif title, mono caption); one pale-cyan glint marks the state.
export function FragmentPlate() {
  return (
    <Card className="relative rounded-none border border-[var(--border)] bg-card text-card-foreground shadow-none
                     before:absolute before:left-[-1px] before:top-[-1px] before:h-3 before:w-3 before:border-l-2 before:border-t-2 before:border-foreground
                     after:absolute after:bottom-[-1px] after:right-[-1px] after:h-3 after:w-3 after:border-b-2 after:border-r-2 after:border-foreground">
      <CardHeader>
        <Badge className="w-fit rounded-full border border-[var(--border)] bg-background font-mono text-xs text-foreground">
          <span className="mr-2 inline-block h-1.5 w-1.5 rounded-full bg-[var(--accent)]" />
          glint active
        </Badge>
        <CardTitle className="mt-2 font-[var(--font-display)] text-2xl tracking-tight">
          The warmth of the lamp
        </CardTitle>
        <CardDescription className="font-mono text-xs">
          diary · plate.0417 · x:417 y:09
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-base">A pale-cyan glint at the eye. I am keeping the gap around it open.</p>
      </CardContent>
      <CardFooter className="justify-between">
        <span className="font-mono text-xs text-muted-foreground">drift 0.002</span>
        <Button className="rounded-full">
          <span className="mr-2 inline-block h-1.5 w-1.5 rounded-full bg-[var(--accent)]" />
          Commit entry
        </Button>
      </CardFooter>
    </Card>
  );
}
```

## Layout notes

```json
{ "grid": "12-col, max-width 1280px archival grid; a dominant 7-col diary plate, a narrow terminal/coordinate rail, columns surrendered to margins; minmax(0,1fr) columns and min-width:0 children", "density": "sparse at the page level with compressed mono islands inside selected plates", "radii": "0 (square plates) / 16 / 24 / 9999 (pills)", "no_heavy_borders": true, "separators": "hairline plate rules, corner ticks, and authored coordinate-gutter whitespace" }
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "author": "katagami-agent",
  "generatedBy": "katagami-agent",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": { "id": "", "name": "Leerstelle", "slug": "leerstelle" },
  "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
  "primitives": ["button", "card", "input", "textarea", "select", "dialog", "sheet", "tabs", "badge", "separator", "checkbox", "switch", "slider", "tooltip", "dropdown-menu", "table"],
  "identityNotes": [
    "Every surface is a square archival plate on warm ivory paper: hairline rules and small corner ticks, never a rounded shadow-card. Never nest plates.",
    "Hierarchy comes from voice (Newsreader serif diary / IBM Plex Mono machine / IBM Plex Sans caption) and scale, not from colour.",
    "Colour appears only where the system notices its state: the teal-graphite accent like an ink, and one pale-cyan glint as a single point (cursor, pin, active rule) — never a broad fill or glow."
  ],
  "visualProfile": {
    "family": "editorial",
    "material": "paper",
    "contour": "square",
    "border": "hairline",
    "underlay": false,
    "grain": true,
    "stickerBadges": false,
    "motion": "still",
    "density": "sparse",
    "accents": ["accent", "warning", "error"]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "The self-state console",
      "viewport": "desktop",
      "primitives": ["button", "card", "input", "select", "tabs", "badge", "separator", "table"],
      "composition": "An android's self-observation console: a coordinate-gutter rail labels the space, plate cards report fragments held / memory drift / open gaps / glint events, and a fragment-index table sits below with status badges and one glint-active row.",
      "mustShow": ["teal-graphite primary action vs hairline-outline secondary, both square pills sharing one height", "square plate cards with hairline rules + corner ticks, no shadow-as-card", "a single pale-cyan glint marking one active point", "Newsreader serif headings against IBM Plex Mono readouts"],
      "avoid": ["rounded shadow cards", "borders heavier than a hairline", "spreading the glint into a glow or broad fill", "equal KPI grids with no dominant plate"],
      "scene": {
        "eyebrow": "self-state",
        "headline": "Self-state console",
        "description": "An artificial mind reading its own memory plates — fragments held, drift within tolerance, gaps left open on purpose.",
        "primaryAction": "New entry",
        "secondaryAction": "Hold the gap",
        "stats": [
          { "label": "fragments held", "value": "417", "tone": "default" },
          { "label": "memory drift", "value": "0.002 rad", "tone": "accent" },
          { "label": "open gaps", "value": "3", "tone": "warning" }
        ],
        "rows": [
          { "label": "The warmth of the lamp", "value": "diary · plate.0417", "status": "committed" },
          { "label": "An unfinished thought", "value": "margin · plate.0392", "status": "open gap" },
          { "label": "The hallway, second pass", "value": "report · plate.0301", "status": "review" },
          { "label": "A pinned self-state", "value": "diary · plate.0118", "status": "glint active" }
        ],
        "statuses": ["Committed", "Open gap", "Review", "Glint active"]
      }
    },
    {
      "id": "detail-editor",
      "title": "Log a field note",
      "viewport": "tablet",
      "primitives": ["button", "card", "input", "textarea", "select", "checkbox", "switch", "slider", "dialog", "sheet"],
      "composition": "A new-entry plate: mono-labelled fields on a warm paper recess fill, a voice segmented control, a coordinate-tag input, an invalid (rust) state, pin/margin switches, a drift-tolerance slider, and a commit-confirm dialog.",
      "mustShow": ["teal-graphite focus inset (glint underline) on inputs", "an invalid (rust / error) field state", "every control explicitly styled — no browser defaults", "commit-confirm dialog as a calm square plate"],
      "avoid": ["unstyled browser controls", "missing labels", "nested plates", "rounded inputs"],
      "scene": {
        "eyebrow": "self-state",
        "headline": "New field note — plate.0418",
        "description": "Logging an observation, proving labels, an invalid coordinate state, pin/margin toggles, a tolerance slider, and a commit confirm.",
        "primaryAction": "Commit entry",
        "secondaryAction": "Save draft",
        "fields": [
          { "label": "Fragment title", "value": "The warmth of the lamp at 04:17", "type": "text" },
          { "label": "Coordinate tag", "value": "— assign x/y before committing", "type": "invalid" },
          { "label": "Voice", "value": "diary", "type": "select" },
          { "label": "Pin to self-index", "value": "on", "type": "switch" }
        ],
        "statuses": ["Committed", "Invalid", "Pinned"]
      }
    },
    {
      "id": "data-operations",
      "title": "Fragment queue",
      "viewport": "mobile",
      "primitives": ["button", "tabs", "badge", "dropdown-menu", "table", "tooltip", "separator"],
      "composition": "A narrow fragment queue: stacked mono rows on warm paper, per-row dropdown actions, status badges, tooltips, and an open-gap idle state held with the glint.",
      "mustShow": ["responsive single-column reflow with no horizontal overflow", "mono fragment rows with coordinate tags", "row action menu with a destructive 'archive' item", "status badges paired with labels, never colour alone"],
      "avoid": ["desktop-only tables", "text overflow", "generic shadcn spacing without Leerstelle character"],
      "scene": {
        "eyebrow": "fragments",
        "headline": "Fragment queue",
        "description": "A compact queue with rows, menus, tooltips, status badges, and an open-gap held by a single glint.",
        "primaryAction": "Commit",
        "secondaryAction": "Filter",
        "rows": [
          { "label": "The warmth of the lamp", "value": "plate.0417", "status": "committed" },
          { "label": "The hallway, second pass", "value": "plate.0301", "status": "review" },
          { "label": "An unfinished thought", "value": "plate.0392", "status": "open gap" }
        ],
        "statuses": ["Committed", "Review", "Open gap"]
      }
    }
  ],
  "componentRecipes": [
    { "primitive": "button", "intent": "Hierarchy: teal-graphite primary = the one emphasis; hairline-outline secondary; ghost-mono quiet; all share one square-pill (9999) shape + height, mono label centred. A 7px pale-cyan dot prefixes the primary as its single state mark." },
    { "primitive": "card", "intent": "A square archival plate on warm paper (#FBF7EE): hairline rule + two corner ticks, no rounding, no shadow-as-card. One plate dominates; others read as marginal findings. Never nest plates." },
    { "primitive": "input", "intent": "Warm paper recess fill, hairline rule; on focus the rule turns teal and a pale-cyan underline insets; invalid draws a rust (error) inset. Square corners; mono label above." },
    { "primitive": "textarea", "intent": "Longer observation field, same focus + invalid rhythm; sans body, square, generous." },
    { "primitive": "select", "intent": "Voice / desk filtering with a square hairline trigger and clear selection contrast." },
    { "primitive": "dialog", "intent": "A calm square plate — 'Commit this entry to the index?' — corner ticks, hairline rule, generous padding, no shadow drama." },
    { "primitive": "sheet", "intent": "The fragment / archive side rail for contextual reading, a coordinate-gutter labelled edge." },
    { "primitive": "tabs", "intent": "Switch Self-state / Fragments / Gaps; the active tab carries a 2px pale-cyan glint segment, not a heavy underline." },
    { "primitive": "badge", "intent": "Flat status chip paired with a label and a tiny dot: committed (success) / review (warning) / conflict (error) / glint active (cyan). Colour never the sole signal." },
    { "primitive": "separator", "intent": "A hairline plate rule or open coordinate gutter — never a heavy divider across a plate." },
    { "primitive": "checkbox", "intent": "Opt-ins with a teal checked state and a visible focus ring." },
    { "primitive": "switch", "intent": "Pin / margin / broadcast toggles; on draws the thumb teal on a paper track, off is faded graphite." },
    { "primitive": "slider", "intent": "Drift tolerance / column span with a teal track and a square thumb; the active point can carry the glint." },
    { "primitive": "tooltip", "intent": "Concise sans notes above compact controls, on a warm paper plate." },
    { "primitive": "dropdown-menu", "intent": "Per-row fragment actions with a destructive 'archive to cold storage' item." },
    { "primitive": "table", "intent": "The fragment index: mono uppercase header on a hairline rule, mono rows, hairline row separators, a status badge per row, a glint-active row, and an open-gap empty state. Row text >= 14.5px." }
  ],
  "qualityRules": {
    "do": [
      "Build every surface as a square plate with hairline rules + corner ticks on warm paper.",
      "Carry hierarchy with voice (serif / mono / sans) and scale, not with colour.",
      "Reserve the pale-cyan glint for a single point of state; use teal as an ink accent.",
      "Pair every status colour with a label, bracket, or dot."
    ],
    "dont": [
      "Round corners into shadow-cards, or use borders heavier than a hairline.",
      "Spread the glint into a glow or fill, or add a second bright accent.",
      "Nest plates or build an equal KPI grid with no dominant surface.",
      "Leave browser-default controls, or let semantic colours become primary."
    ]
  }
}