Sōma

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

:root {
  --background: #F4F1E8;
  --foreground: #15171A;
  --card: #FBFAF4;
  --card-foreground: #15171A;
  --popover: #FBFAF4;
  --popover-foreground: #15171A;
  --primary: #15171A;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #5C605C;
  --muted-foreground: #15171A;
  --accent: #1FB6D6;
  --accent-foreground: #ffffff;
  --destructive: #B43A2E;
  --border: #CBCDC5;
  --input: #CBCDC5;
  --ring: #1FB6D6;
  --chart-1: #15171A;
  --chart-2: #f4f4f5;
  --chart-3: #1FB6D6;
  --chart-4: #2E7D62;
  --chart-5: #B07A1E;
  --sidebar: #FBFAF4;
  --sidebar-foreground: #15171A;
  --sidebar-primary: #15171A;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #1FB6D6;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #CBCDC5;
  --sidebar-ring: #1FB6D6;
  --radius: 0px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #15171A;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #1FB6D6;
  --accent-foreground: #ffffff;
  --destructive: #B43A2E;
  --border: #303642;
  --input: #303642;
  --ring: #1FB6D6;
  --chart-1: #15171A;
  --chart-2: #f4f4f5;
  --chart-3: #1FB6D6;
  --chart-4: #2E7D62;
  --chart-5: #B07A1E;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #15171A;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #1FB6D6;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #1FB6D6;
  --radius: 0px;
}

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 SMaShadcnKit() {
  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">Sōma</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": "soma",
  "type": "registry:theme",
  "title": "Sōma",
  "description": "A quiet clinical e-paper field manual. Warm bone ground, carbon graphite ink, one cyan registration mark on the active probe. Barlow Condensed manual headings + IBM Plex Sans/Mono; square paper corners with a single 16px scanner pane; no borders — separate by a faint annotation grid, recessed bone surface, and soft flat shadow. Calibration ticks and erased-memory voids are the signature.",
  "cssVars": {
    "theme": {
      "font-sans": "IBM Plex Sans, system-ui, sans-serif",
      "font-mono": "IBM Plex Mono, ui-monospace, monospace",
      "font-display": "Barlow Condensed, Arial Narrow, sans-serif",
      "font-heading": "Barlow Condensed, Arial Narrow, sans-serif",
      "radius": "0px"
    },
    "light": {
      "background": "#F4F1E8",
      "foreground": "#15171A",
      "card": "#FBFAF4",
      "card-foreground": "#15171A",
      "popover": "#FBFAF4",
      "popover-foreground": "#15171A",
      "primary": "#15171A",
      "primary-foreground": "#F4F1E8",
      "secondary": "#ECE8DC",
      "secondary-foreground": "#15171A",
      "accent": "#1FB6D6",
      "accent-foreground": "#06181C",
      "muted": "#ECE8DC",
      "muted-foreground": "#5C605C",
      "destructive": "#B43A2E",
      "destructive-foreground": "#F4F1E8",
      "success": "#2E7D62",
      "warning": "#B07A1E",
      "border": "transparent",
      "input": "#ECE8DC",
      "ring": "#1FB6D6",
      "radius": "0px"
    }
  }
}

# Sōma shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ef751-7c41-7df1-b7d7-9315eeb850f6`
Slug: `soma`

## Intent

A quiet clinical e-paper language for neural-map manuals: warm bone surfaces, carbon graphite hairlines, calibration ticks, erased-memory voids, and a single cyan registration mark on the one node under probe. The faithful, brought-to-standard edition of E-Ink Neurography Manuals.

## 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:

{
  "bg": "#F4F1E8",
  "surface": "#FBFAF4",
  "text": "#15171A",
  "muted": "#5C605C",
  "border": "#CBCDC5",
  "accent": "#1FB6D6",
  "on_accent": "#06181C",
  "graphite": "#15171A",
  "recess": "#ECE8DC",
  "void_hatch": "#E3DFD1",
  "tick": "#9DA09A",
  "cyan_deep": "#127E96",
  "cyan_tint": "#DBF1F6",
  "success": "#2E7D62",
  "warning": "#B07A1E",
  "error": "#B43A2E",
  "info": "#1FB6D6"
}

Typography:

{
  "base_size": "17px",
  "body_font": "IBM Plex Sans",
  "heading_font": "Barlow Condensed",
  "mono_font": "IBM Plex Mono",
  "heading_weight": "700",
  "heading_transform": "uppercase",
  "letter_spacing": "0.02em",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap"
}

## Visual character to preserve

- Make the source language's structural identity visible in every component state.

## ShadSync visual profile

{
  "family": "paper-collage",
  "material": "paper",
  "contour": "default",
  "border": "dashed",
  "underlay": false,
  "grain": true,
  "stickerBadges": false,
  "motion": "lift",
  "density": "balanced",
  "accents": [
    "primary",
    "accent",
    "secondary",
    "muted"
  ]
}

## Signature component recipes

### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.

### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.

### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.

### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.

### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.

## Preview shots

- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.

## Implementation contract

- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/soma/registry-theme.json` variables, then use these recipes for composition and state design.
- Preserve Katagami token names as source metadata; shadcn semantic names are only the export surface.
- Do: Use pale material restraint: warm bone surfaces, graphite ink, faint scanner-gray grid rules.; Write labels as diagnostic evidence: coordinates, thresholds, hashes, specimen states, proof stamps.; Keep cyan semantic for the active probe, exception pixels, focus rings, and registration marks.; Use linework, ruler ticks, leader lines, and contour diagrams as structure rather than decoration.
- Do not: Do not use green matrix rain, terminal walls, or generic hacker-dashboard motifs.; Do not build equal SaaS card grids; preserve one dominant specimen field and marginal rails.; Do not use neon cyberpunk gradients, decorative glow, or saturated rainbow accents.; Do not include full-character anime posters or fan-art imagery; keep manga influence schematic.; Do not add borders, accent edges, or grey-washed surfaces.

## Copy-paste component example

This generated starter proves the import shape. Production Katagami agents should replace it with a language-specific product 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";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function SMaShadcnKit() {
  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">Sōma</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>
  );
}
```

## Layout notes

{
  "grid": "12-column desktop with a dominant specimen pane plus a narrow evidence rail and manual margins",
  "whitespace": "preserve large blanks as clinical silence; always pad above titles",
  "density": "dense labels only at decision points",
  "responsive": "desktop keeps the specimen pane + right rail; tablet stacks rails below; mobile collapses to single-column diagnostic sheets, hides non-essential columns, never overflows",
  "breakpoints": {
    "mobile": "390px",
    "tablet": "760px",
    "desktop": "1100px",
    "ultrawide": "1700px"
  }
}

{
  "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": "Sōma", "slug": "soma" },
  "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": [
    "A quiet clinical e-paper field manual: warm bone ground, carbon graphite ink, one cyan registration on the active probe.",
    "No borders or accent edges — separate by the faint 24px annotation grid, a recessed bone surface, and a soft flat shadow.",
    "Barlow Condensed uppercase headings + IBM Plex Sans/Mono; square paper corners (one 16px scanner pane); calibration ticks and erased-memory voids are the signature."
  ],
  "visualProfile": {
    "family": "editorial",
    "material": "paper",
    "contour": "hairline",
    "border": "none",
    "underlay": true,
    "grain": true,
    "stickerBadges": false,
    "motion": "subtle",
    "density": "compact",
    "accents": ["accent", "success", "warning"]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "The probe console",
      "viewport": "desktop",
      "primitives": ["button", "card", "input", "select", "tabs", "badge", "separator", "table"],
      "composition": "An e-paper field-manual console: a graphite manual spine, KPI cards with calibration-tick rulers, a live plate card, and the specimen ledger with status chips and a refresh log — all over a faint annotation grid.",
      "mustShow": ["graphite primary action vs cyan probe (lock) action", "bone square cards lifted by soft shadow with a calibration-tick ruler (no borders)", "locked/active/drift/exception status chips", "mono coordinates and proof hashes on a recessed-bone zebra ledger"],
      "avoid": ["borders, divider hairlines, top rules, or accent edges", "rounded corners", "gradients or glow", "grey-washed or cream surfaces"],
      "scene": {
        "eyebrow": "console",
        "headline": "Probe console — plate A-014",
        "description": "An e-paper console where every specimen is surveyed, ticked, proofed, and registered to one node by the cyan probe.",
        "primaryAction": "Lock probe",
        "secondaryAction": "Re-calibrate",
        "stats": [
          { "label": "specimens filed", "value": "7731", "tone": "accent" },
          { "label": "nodes registered", "value": "418", "tone": "default" },
          { "label": "exception pixels", "value": "3", "tone": "warning" }
        ],
        "rows": [
          { "label": "Soma-7731", "value": "x412·y350 · layer V · a3f1·0e", "status": "locked" },
          { "label": "Soma-7730", "value": "x308·y214 · layer III · 9c02·77", "status": "active" },
          { "label": "Soma-7729", "value": "x190·y306 · layer V · be41·a2", "status": "drift" },
          { "label": "Soma-7728", "value": "x—·y— · erased", "status": "erased" }
        ],
        "statuses": ["Locked", "Active", "Drift", "Erased"]
      }
    },
    {
      "id": "detail-editor",
      "title": "Register a specimen",
      "viewport": "tablet",
      "primitives": ["button", "card", "input", "textarea", "select", "checkbox", "switch", "slider", "dialog", "sheet"],
      "composition": "A specimen intake form: mono-labelled fields, an invalid (rust) node-coordinate state, a refresh-ghosting switch, a column-span calibration slider, and a lock-confirm dialog.",
      "mustShow": ["cyan focus inset on inputs", "an invalid (rust) coordinate state", "lock-confirm dialog as a formal notice", "real neurography values (coordinates, layers, hashes)"],
      "avoid": ["unstyled browser controls", "missing labels", "nested cards", "rounded inputs"],
      "scene": {
        "eyebrow": "intake",
        "headline": "Register — Soma-7732",
        "description": "A specimen form proving mono labels, an invalid node-coordinate, a refresh-ghost toggle, a span slider, and a lock confirm.",
        "primaryAction": "Lock & register",
        "secondaryAction": "Discard",
        "fields": [
          { "label": "Specimen id", "value": "SOMA-7732", "type": "text" },
          { "label": "Node coordinate", "value": "x—·y— — assign before locking the probe", "type": "invalid" },
          { "label": "Plate layer", "value": "Layer V · pyramidal", "type": "select" },
          { "label": "Refresh ghosting", "value": "on", "type": "switch" }
        ],
        "statuses": ["Registered", "Invalid", "Locked"]
      }
    },
    {
      "id": "data-operations",
      "title": "Probe queue",
      "viewport": "mobile",
      "primitives": ["button", "tabs", "badge", "dropdown-menu", "table", "tooltip", "separator"],
      "composition": "A narrow probe queue: stacked condensed specimen rows, per-row dropdown actions with an 'erase' item, status badges, tooltips, and an erased-void state.",
      "mustShow": ["responsive reflow to one column", "condensed specimen rows with mono coordinates", "row action menu with cyan registration markers", "status badges", "an erased-void empty state"],
      "avoid": ["desktop-only tables", "text overflow", "generic shadcn spacing without Sōma character"],
      "scene": {
        "eyebrow": "queue",
        "headline": "Probe queue",
        "description": "A compact queue with rows, action menus, tooltips, status badges, and an erased-void affordance.",
        "primaryAction": "Lock",
        "secondaryAction": "Filter",
        "rows": [
          { "label": "Soma-7730", "value": "x308·y214 · layer III", "status": "active" },
          { "label": "Soma-7726", "value": "x044·y118 · exception", "status": "exception" },
          { "label": "Soma-7728", "value": "x—·y— · cleared", "status": "erased" }
        ],
        "statuses": ["Active", "Exception", "Erased"]
      }
    }
  ],
  "componentRecipes": [
    { "primitive": "button", "intent": "Hierarchy: graphite primary = the one emphasis; cyan probe = the live/lock action; recess-bone = quiet; ghost = navigational with a cyan corner glyph. Square, no border, mono uppercase label, one shared 44px height." },
    { "primitive": "card", "intent": "Paler-bone square panel lifted by soft flat shadow over the annotation grid, no border/top-rule; header is a mono tag + condensed title + mono id; a calibration-tick ruler reads at the foot." },
    { "primitive": "input", "intent": "Recessed-bone fill, no border; cyan inset on focus, rust inset when invalid; square; mono label above, mono value." },
    { "primitive": "textarea", "intent": "Longer notes with the same focus + invalid rhythm; sans, generous, square." },
    { "primitive": "select", "intent": "Plate-layer / desk filtering with a square trigger, custom SVG chevron, and clear selection contrast." },
    { "primitive": "dialog", "intent": "A formal 'Lock this specimen to the plate?' notice — centred, square, generous, soft shadow, no border." },
    { "primitive": "sheet", "intent": "The specimen / margin-note side rail for contextual editing." },
    { "primitive": "tabs", "intent": "Switch Console / Plate / Atlas; the active tab carries a cyan registration mark, not an underline rule." },
    { "primitive": "badge", "intent": "Flat mono status chip on a faint tint: locked (pine) / active (cyan) / drift (amber) / exception (rust) / erased (dashed void)." },
    { "primitive": "separator", "intent": "Open grid space or a thin recessed-bone band — never a rule-line across a card." },
    { "primitive": "checkbox", "intent": "Recessed square box with a cyan checked fill and a drawn check; clear focus." },
    { "primitive": "switch", "intent": "Refresh-ghosting / lock toggle; on is a cyan track, off is a flat bone track with a graphite knob." },
    { "primitive": "slider", "intent": "Column-span / threshold on a calibration-tick track with a cyan span and a square thumb." },
    { "primitive": "tooltip", "intent": "Concise sans note on a paler-bone panel with soft shadow, square." },
    { "primitive": "dropdown-menu", "intent": "Per-row specimen actions with cyan registration markers and a destructive 'erase' item." },
    { "primitive": "table", "intent": "The specimen ledger: mono header, condensed slug rows, recessed-bone zebra (never cream), a status chip per row, an erased-void empty state, no rule-lines." }
  ],
  "qualityRules": {
    "do": [
      "Register the one live item with a cyan bracket + mark; keep everything else graphite.",
      "Keep the ground warm bone; reserve cyan for the active probe / focus and graphite for ink.",
      "Set coordinates, hashes, refresh times, and states in mono; headings condensed, body sans.",
      "Use calibration ticks and the annotation grid as structure, not decoration."
    ],
    "dont": [
      "Add borders, divider hairlines, top rules, or accent edges.",
      "Round corners (beyond the one 16px scanner pane) or add gradients/glow.",
      "Nest cards or default to grey-washed or cream surfaces.",
      "Spread cyan into more than one registration mark, or let semantic colours go visually primary."
    ]
  }
}