Shuimo

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

:root {
  --background: #f0ebe2;
  --foreground: #1a1612;
  --card: #f7f1e8;
  --card-foreground: #1a1612;
  --popover: #f7f1e8;
  --popover-foreground: #1a1612;
  --primary: #1a1612;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #6b5f52;
  --muted-foreground: #1a1612;
  --accent: #b83a2d;
  --accent-foreground: #ffffff;
  --destructive: #b83a2d;
  --border: rgba(26,22,18,0.06);
  --input: rgba(26,22,18,0.06);
  --ring: #b83a2d;
  --chart-1: #1a1612;
  --chart-2: #f4f4f5;
  --chart-3: #b83a2d;
  --chart-4: #3f6858;
  --chart-5: #6a5a3a;
  --sidebar: #f7f1e8;
  --sidebar-foreground: #1a1612;
  --sidebar-primary: #1a1612;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #47566a;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgba(26,22,18,0.06);
  --sidebar-ring: #b83a2d;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #1a1612;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #b83a2d;
  --accent-foreground: #ffffff;
  --destructive: #b83a2d;
  --border: #303642;
  --input: #303642;
  --ring: #b83a2d;
  --chart-1: #1a1612;
  --chart-2: #f4f4f5;
  --chart-3: #b83a2d;
  --chart-4: #3f6858;
  --chart-5: #6a5a3a;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #1a1612;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #b83a2d;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #b83a2d;
  --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 ShuimoShadcnKit() {
  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">Shuimo</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": "shuimo",
  "type": "registry:theme",
  "author": "katagami-agent",
  "title": "Shuimo",
  "description": "Ink-wash motion, done properly: warm rice-paper surfaces, diluted sumi hierarchy, a single vermillion seal, and slow paint-in motion. Borderless — separation comes from paper elevation, ink washes, and negative space.",
  "cssVars": {
    "light": {
      "background": "#f0ebe2",
      "foreground": "#1a1612",
      "card": "#f7f1e8",
      "card-foreground": "#1a1612",
      "popover": "#f7f1e8",
      "popover-foreground": "#1a1612",
      "primary": "#2d2824",
      "primary-foreground": "#f7f1e8",
      "secondary": "#3f6858",
      "secondary-foreground": "#f7f1e8",
      "muted": "#e7e0d4",
      "muted-foreground": "#6b5f52",
      "accent": "#b83a2d",
      "accent-foreground": "#f7f1e8",
      "destructive": "#b83a2d",
      "destructive-foreground": "#f7f1e8",
      "success": "#3f6858",
      "warning": "#6a5a3a",
      "info": "#47566a",
      "border": "rgba(26,22,18,0.08)",
      "input": "#eae3d6",
      "ring": "#b83a2d",
      "radius": "24px",
      "chart-1": "#1a1612",
      "chart-2": "#3f6858",
      "chart-3": "#b83a2d",
      "chart-4": "#6a5a3a",
      "chart-5": "#6b5f52"
    },
    "dark": {
      "background": "#171310",
      "foreground": "#efe7d9",
      "card": "#211b16",
      "card-foreground": "#efe7d9",
      "popover": "#211b16",
      "popover-foreground": "#efe7d9",
      "primary": "#efe7d9",
      "primary-foreground": "#171310",
      "secondary": "#5b8a78",
      "secondary-foreground": "#171310",
      "muted": "#2a231d",
      "muted-foreground": "#b3a794",
      "accent": "#d0503f",
      "accent-foreground": "#f7f1e8",
      "destructive": "#d0503f",
      "destructive-foreground": "#f7f1e8",
      "success": "#5b8a78",
      "warning": "#a68a55",
      "info": "#7d8ba0",
      "border": "rgba(239,231,217,0.08)",
      "input": "#2a231d",
      "ring": "#d0503f",
      "radius": "24px",
      "chart-1": "#efe7d9",
      "chart-2": "#5b8a78",
      "chart-3": "#d0503f",
      "chart-4": "#a68a55",
      "chart-5": "#b3a794"
    }
  },
  "visualProfile": {
    "family": "contemplative ink-wash / warm-paper editorial",
    "material": "absorbent warm rice paper with fibrous grain and low-opacity radial ink washes",
    "contour": "generous pill controls (9999px) and 24px paper panels; seal chips at 6px square",
    "border": "none",
    "underlay": true,
    "grain": true,
    "stickerBadges": false,
    "motion": "slow paint-in — opacity + blur-to-sharp + short vertical settle on 0.9s cubic-bezier(0.23,1,0.32,1); ink diffusion breathes over 24s",
    "density": "moderate — dense control clusters balanced by wide liubai negative space",
    "accents": ["#b83a2d", "#3f6858", "#6a5a3a"]
  },
  "notes": "Borderless language: never draw hairline dividers or accent edges on cards. Elevation is warm brown paper shadow (0 12px 38px rgba(106,90,58,.13)), inset diluted-sumi wash pseudo-elements, and negative space. Vermillion (#b83a2d) is rationed like a carved seal — primary action, active state, focus ring only. Moss (#3f6858) carries progress/success; ochre (#6a5a3a) cautions. Radii only from {0,16,24,9999}. Focus is a 3px vermillion ring at 3px offset. Headings use ZCOOL XiaoWei; body Noto Sans SC 17px; labels/timecodes IBM Plex Mono."
}

# shadcn/ui Components — Shuimo

Author: `katagami-agent`

Ink-wash motion, done properly. Shuimo dresses shadcn/ui primitives as if painted onto warm rice paper: surfaces absorb like fiber, structure arrives through blur-to-sharp paint-in motion, a single vermillion seal marks what matters, and there are no borders anywhere — separation comes from paper elevation, ink washes, and negative space.

## ShadSync visual profile

The renderer reads this profile to skin every primitive. Honor it exactly.

- **family**: contemplative ink-wash / warm-paper editorial
- **material**: absorbent warm rice paper (`#f0ebe2` ground, `#f7f1e8` raised) with fibrous SVG grain and low-opacity radial ink washes inset in panels
- **contour**: pill controls (`9999px`), `24px` paper panels, `16px` on small chips, `0/6px` square seal stamps
- **border**: **none** — never a hairline divider, never an accent edge on a card. Elevation is warm brown paper shadow `0 12px 38px rgba(106,90,58,.13)` plus inset diluted-sumi wash.
- **underlay**: true (radial ink-wash pseudo-elements clipped inside cards)
- **grain**: true (fractal-noise paper texture at ~0.3 opacity, multiply)
- **stickerBadges**: false
- **motion**: slow paint-in — `opacity + blur(7px→0) + translateY(16px→0)` over `900ms cubic-bezier(0.23,1,0.32,1)`; ambient ink diffusion breathes over `24s`; nothing abrupt under `400ms` for primary movement
- **density**: moderate — dense control clusters balanced by wide liubai voids (`64–128px`)
- **accents**: `#b83a2d` vermillion seal (rationed), `#3f6858` moss (progress/success), `#6a5a3a` ochre (caution)

Type: display **ZCOOL XiaoWei** (`-0.035em`, line-height `1.14`), body **Noto Sans SC** (`17px`, `-0.02em`, line-height `1.6`), mono **IBM Plex Mono** (timecodes, labels, provenance). Focus ring: `3px solid #b83a2d` at `3px` offset on every interactive element.

## Signature component recipes

- **Button** — pill, IBM Plex Mono uppercase caps (`13px`, `.09em`). Primary is a sumi fill (`#2d2824` → `#100e0b` on hover with a `-2px` lift). `variant="seal"` is the vermillion action, used once per view. Ghost is transparent with an inset `1.5px` ink ring that turns vermillion on hover. No emoji, ever.
- **Card** — a paper panel: `#f7f1e8`, `24px` radius, warm shadow, an inset radial ink wash drifting for `20s`. Never bordered, never nested.
- **Input / Textarea / Select** — filled warm-paper fields with an inset top shadow (no outline border); vermillion focus ring. Select uses a hand-drawn sumi chevron. Textarea steps to `24px` radius.
- **Checkbox / Radio / Switch** — custom: checkbox fills vermillion with a paper tick; radio dots vermillion; switch track turns moss when on. No native controls visible.
- **Badge** — a seal chip: mono caps on warm paper (`chip`) or vermillion fill (`chip seal`) / moss (`chip moss`). The `印` stamp glyph marks provenance.
- **Table** — borderless ledger: mono uppercase headers, alternating warm-paper row fills with `16px` corner radius, moss progress bars, seal pills for status.
- **Tabs / Nav** — links breathe on the page (no boxed pill bar); an ink underline sweeps up on hover/active.
- **Dialog / Sheet / Tooltip / Dropdown** — paper panels with backdrop blur and warm shadow; enter with paint-in; scrim is a soft warm wash, never a lazy grey.
- **Slider** — sumi-filled track, vermillion thumb. **Separator** — a diluted ink wash, not a grey line.

## Preview shots

See `preview-shots.json` (`renderable-v1`) for ≥3 fully-specified product scenes exercising all sixteen primitives in the Shuimo skin: a restoration console, a provenance ledger, and a wash-calibration form. Each shot names what it must show (paper panels, seal chips, moss bars, vermillion focus) and what to avoid (borders, grey dividers, more than one vermillion action per view).

## Copy-paste component example

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

export function WashPanel() {
  return (
    <Card className="rounded-[24px] border-0 bg-[#f7f1e8] shadow-[0_12px_38px_rgba(106,90,58,0.13)]">
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle className="font-[ZCOOL_XiaoWei] tracking-[-0.035em]">
          Wash calibration
        </CardTitle>
        <Badge className="rounded-full bg-[#b83a2d] font-mono text-[12px] tracking-[0.06em] text-[#f7f1e8]">
          印 ACTIVE
        </Badge>
      </CardHeader>
      <CardContent className="space-y-4">
        <p className="text-[14.5px] text-[#6b5f52]">
          Preserve the edge bleed; reduce scanner contrast by 7%.
        </p>
        <div className="flex gap-3">
          <Button className="rounded-full bg-[#2d2824] font-mono text-[13px] uppercase tracking-[0.09em] text-[#f7f1e8]">
            Paint correction
          </Button>
          <Button variant="ghost" className="rounded-full">Compare dry frame</Button>
        </div>
      </CardContent>
    </Card>
  )
}
```

All classes above resolve against the tokens in `export.json`. Import primitives from `@/components/ui/` and let the ShadSync visual profile do the skinning — do not add borders back in.

{
  "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": "en-019f8af7-6ee7-7b90-90ab-a651ae100759",
    "name": "Shuimo",
    "slug": "shuimo"
  },
  "installCommand": "npx shadcn@latest add https://katagami.ai/r/shuimo.json",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [
    "No borders anywhere — separation is warm paper elevation, inset ink washes, and negative space.",
    "Vermillion #b83a2d is rationed like a carved seal: primary action, active state, focus ring only.",
    "Every surface is warm rice paper (#f0ebe2 / #f7f1e8) with fibrous grain, never pure white, never grey.",
    "Motion is slow paint-in: opacity + blur-to-sharp + short vertical settle; nothing abrupt under 400ms.",
    "Radii only from {0, 16, 24, 9999}; controls are pills, panels are 24px, seal stamps are square.",
    "Type: ZCOOL XiaoWei display, Noto Sans SC 17px body, IBM Plex Mono for timecodes and labels."
  ],
  "visualProfile": {
    "family": "contemplative ink-wash / warm-paper editorial",
    "material": "absorbent warm rice paper with fibrous grain and low-opacity radial ink washes",
    "contour": "pill controls, 24px paper panels, square seal chips",
    "border": "none",
    "underlay": true,
    "grain": true,
    "stickerBadges": false,
    "motion": "slow paint-in (opacity + blur-to-sharp + vertical settle, 0.9s), ambient ink diffusion over 24s",
    "density": "moderate — dense clusters balanced by wide liubai voids",
    "accents": [
      "#b83a2d",
      "#3f6858",
      "#6a5a3a"
    ]
  },
  "tokens": {
    "background": "#f0ebe2",
    "surface": "#f7f1e8",
    "foreground": "#1a1612",
    "primary": "#2d2824",
    "primary-foreground": "#f7f1e8",
    "accent": "#b83a2d",
    "accent-foreground": "#f7f1e8",
    "success": "#3f6858",
    "warning": "#6a5a3a",
    "info": "#47566a",
    "muted": "#e7e0d4",
    "muted-foreground": "#6b5f52",
    "ring": "#b83a2d",
    "radius": "24px",
    "font-display": "ZCOOL XiaoWei",
    "font-body": "Noto Sans SC",
    "font-mono": "IBM Plex Mono"
  },
  "shots": [
    {
      "id": "restoration-console",
      "title": "Ink-wash restoration console",
      "viewport": "1440x960",
      "primitives": [
        "card",
        "button",
        "badge",
        "tabs",
        "slider",
        "switch",
        "tooltip",
        "separator"
      ],
      "composition": "Asymmetric console: one dominant restoration canvas (a framed ink-wash reel) left, a dense wash-calibration control rail right, four quiet KPI tiles above. Wide liubai margins.",
      "mustShow": [
        "paper panels with warm shadow and no borders",
        "one vermillion seal badge (印 ACTIVE) as the only saturated mark",
        "moss progress bars and a sumi-filled slider with a vermillion thumb",
        "IBM Plex Mono KPI labels and timecodes"
      ],
      "avoid": [
        "any hairline border or grey divider",
        "more than one vermillion action",
        "pure white surfaces",
        "emoji on buttons"
      ],
      "scene": {
        "headline": "Reel 04 — Mother-search sequence",
        "description": "Restorer calibrates sumi density while preserving edge bleed on a scanned 1963 Shanghai master.",
        "stats": [
          {
            "label": "Reels in pass",
            "value": "18",
            "delta": "+3 today"
          },
          {
            "label": "Edge bleed kept",
            "value": "94%",
            "delta": "within tolerance"
          },
          {
            "label": "Sumi density",
            "value": "0.62",
            "delta": "watch reed cluster"
          },
          {
            "label": "Seals pressed",
            "value": "7",
            "delta": "印 approved"
          }
        ]
      }
    },
    {
      "id": "provenance-ledger",
      "title": "Frame provenance ledger",
      "viewport": "1440x900",
      "primitives": [
        "table",
        "badge",
        "button",
        "dropdown-menu",
        "tooltip",
        "separator"
      ],
      "composition": "A single borderless ledger table filling a wide paper panel: alternating warm-paper row fills with 16px corners, mono uppercase headers, moss progress bars, seal status pills. A quiet dropdown for export sits top-right.",
      "mustShow": [
        "borderless table with row rhythm from alternating paper fills, not lines",
        "seal (印 SEALED) pills in vermillion used sparingly for approved passes",
        "ochre LOW pill for the caution row",
        "no grey dividers between rows"
      ],
      "avoid": [
        "table borders or rules",
        "colored row backgrounds beyond warm paper",
        "vermillion on every row"
      ],
      "scene": {
        "headline": "8 passes · last export 00:09 ago",
        "description": "Provenance of every correction applied to reel 04, sealed by curator.",
        "rows": [
          {
            "pass": "REEL 04",
            "correction": "Edge bleed stabilised",
            "progress": "72%",
            "status": "印 SEALED"
          },
          {
            "pass": "SCAN B",
            "correction": "Paper fiber retained",
            "progress": "88%",
            "status": "OK"
          },
          {
            "pass": "INK 19",
            "correction": "Moss wash separation",
            "progress": "54%",
            "status": "LOW"
          },
          {
            "pass": "CUT 12",
            "correction": "Motion cadence matched",
            "progress": "93%",
            "status": "印 SEALED"
          }
        ]
      }
    },
    {
      "id": "wash-calibration-form",
      "title": "Wash calibration form",
      "viewport": "1024x900",
      "primitives": [
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "button",
        "card",
        "dialog"
      ],
      "composition": "A centered paper card holding a full form: reel title input, paper-stock select with a hand-drawn sumi chevron, sumi-density slider, a curator-note textarea, custom checkboxes and a moss switch, and a primary sumi button beside a ghost button. A confirmation dialog paints in on submit.",
      "mustShow": [
        "every control custom-styled with a vermillion focus ring — no browser defaults",
        "filled warm-paper fields with inset top shadow instead of a border",
        "checkbox that fills vermillion with a paper tick; switch that turns moss when on",
        "paint-in reveal on the dialog"
      ],
      "avoid": [
        "outlined/bordered inputs",
        "native checkbox or select chrome",
        "grey placeholder-on-grey"
      ],
      "scene": {
        "headline": "Calibrate wash — reel 04",
        "description": "Set density and paper stock, preserve feathering, then seal the correction.",
        "fields": [
          {
            "label": "Reel title",
            "type": "input",
            "value": "Mother-search sequence"
          },
          {
            "label": "Paper stock",
            "type": "select",
            "value": "Warm xuan paper"
          },
          {
            "label": "Sumi density",
            "type": "slider",
            "value": "62"
          },
          {
            "label": "Preserve feathering",
            "type": "switch",
            "value": "on"
          },
          {
            "label": "Curator note",
            "type": "textarea",
            "value": "Retain the tadpole tails; reduce scanner contrast by 7%."
          }
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Pill, IBM Plex Mono uppercase caps; primary is a sumi fill lifting -2px on hover; a single vermillion 'seal' action per view; ghost has an inset ink ring that turns vermillion."
    },
    {
      "primitive": "card",
      "intent": "Paper panel #f7f1e8, 24px radius, warm shadow, inset radial ink wash drifting 20s; never bordered, never nested."
    },
    {
      "primitive": "input",
      "intent": "Filled warm-paper field with inset top shadow, no border; vermillion focus ring at 3px offset."
    },
    {
      "primitive": "textarea",
      "intent": "Same as input but 24px radius and taller; placeholder is muted warm ink, never grey-on-grey."
    },
    {
      "primitive": "select",
      "intent": "Filled field with a hand-drawn sumi chevron; menu is a paper popover with paint-in and warm shadow."
    },
    {
      "primitive": "dialog",
      "intent": "Paper panel that paints in (blur-to-sharp + settle); scrim is a soft warm wash, never lazy grey."
    },
    {
      "primitive": "sheet",
      "intent": "Edge paper panel sliding in on the organic easing; warm shadow, no border seam."
    },
    {
      "primitive": "tabs",
      "intent": "Links that breathe on the page — no boxed pill bar; an ink underline sweeps up on the active tab."
    },
    {
      "primitive": "badge",
      "intent": "Seal chip: mono caps on warm paper, or vermillion/moss fill; 印 stamp glyph marks provenance."
    },
    {
      "primitive": "separator",
      "intent": "A diluted ink wash or negative space — never a grey rule."
    },
    {
      "primitive": "checkbox",
      "intent": "Custom square that fills vermillion with a paper tick; inset shadow when unchecked."
    },
    {
      "primitive": "switch",
      "intent": "Track turns moss when on; paper knob with soft shadow slides on the organic easing."
    },
    {
      "primitive": "slider",
      "intent": "Sumi-filled track, vermillion thumb with a soft vermillion glow."
    },
    {
      "primitive": "tooltip",
      "intent": "Small paper popover with warm shadow and mono micro-label; paints in, no border."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "Paper popover, paint-in, warm shadow; active item marked by a vermillion seal dot, not a fill."
    },
    {
      "primitive": "table",
      "intent": "Borderless ledger: mono uppercase headers, alternating warm-paper rows with 16px corners, moss bars, seal status pills."
    },
    {
      "primitive": "avatar",
      "intent": "Round moss chip with a ZCOOL XiaoWei initial — quiet, warm, no ring."
    },
    {
      "primitive": "progress",
      "intent": "Moss fill on a diluted-ink track; ochre when a value sits below threshold."
    }
  ],
  "qualityRules": {
    "do": [
      "Let panels lift with warm brown paper shadow and inset ink washes; keep wide liubai margins.",
      "Ration vermillion to a single seal-like mark per view; carry progress in moss and caution in ochre.",
      "Custom-style every control with a vermillion focus ring; keep body text at 17px on absorbent paper.",
      "Use ZCOOL XiaoWei for display, Noto Sans SC for body, IBM Plex Mono for timecodes and labels."
    ],
    "dont": [
      "Add borders, hairline dividers, or accent edges to any card or control.",
      "Use pure white or cold grey surfaces, or grey-on-grey placeholders.",
      "Put more than one vermillion action in a single view, or emoji on any button.",
      "Mix arbitrary radii — commit to 0, 16, 24, and 9999 only."
    ]
  }
}