Market Kiln Wayfinding

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

:root {
  --background: #F4EFE4;
  --foreground: #1C2522;
  --card: #FFF9EC;
  --card-foreground: #1C2522;
  --popover: #FFF9EC;
  --popover-foreground: #1C2522;
  --primary: #1F5B73;
  --primary-foreground: #ffffff;
  --secondary: #B84A32;
  --secondary-foreground: #ffffff;
  --muted: #756F64;
  --muted-foreground: #1C2522;
  --accent: #D89A21;
  --accent-foreground: #ffffff;
  --destructive: #A9342B;
  --border: #CFC2A8;
  --input: #CFC2A8;
  --ring: #D89A21;
  --chart-1: #1F5B73;
  --chart-2: #B84A32;
  --chart-3: #D89A21;
  --chart-4: #2E6B4F;
  --chart-5: #C77B16;
  --sidebar: #FFF9EC;
  --sidebar-foreground: #1C2522;
  --sidebar-primary: #1F5B73;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2B6F8F;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #CFC2A8;
  --sidebar-ring: #D89A21;
  --radius: 6px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #1F5B73;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #D89A21;
  --accent-foreground: #ffffff;
  --destructive: #A9342B;
  --border: #303642;
  --input: #303642;
  --ring: #D89A21;
  --chart-1: #1F5B73;
  --chart-2: #B84A32;
  --chart-3: #D89A21;
  --chart-4: #2E6B4F;
  --chart-5: #C77B16;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #1F5B73;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #D89A21;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #D89A21;
  --radius: 6px;
}

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 MarketKilnWayfindingShadcnKit() {
  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">Market Kiln Wayfinding</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": "market-kiln-wayfinding",
  "type": "registry:theme",
  "title": "Market Kiln Wayfinding shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4EFE4",
      "foreground": "#1C2522",
      "card": "#FFF9EC",
      "card-foreground": "#1C2522",
      "popover": "#FFF9EC",
      "popover-foreground": "#1C2522",
      "primary": "#1F5B73",
      "primary-foreground": "#ffffff",
      "secondary": "#B84A32",
      "secondary-foreground": "#ffffff",
      "muted": "#756F64",
      "muted-foreground": "#1C2522",
      "accent": "#D89A21",
      "accent-foreground": "#ffffff",
      "destructive": "#A9342B",
      "border": "#CFC2A8",
      "input": "#CFC2A8",
      "ring": "#D89A21",
      "chart-1": "#1F5B73",
      "chart-2": "#B84A32",
      "chart-3": "#D89A21",
      "chart-4": "#2E6B4F",
      "chart-5": "#C77B16",
      "sidebar": "#FFF9EC",
      "sidebar-foreground": "#1C2522",
      "sidebar-primary": "#1F5B73",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2B6F8F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#CFC2A8",
      "sidebar-ring": "#D89A21",
      "radius": "6px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1F5B73",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#D89A21",
      "accent-foreground": "#ffffff",
      "destructive": "#A9342B",
      "border": "#303642",
      "input": "#303642",
      "ring": "#D89A21",
      "chart-1": "#1F5B73",
      "chart-2": "#B84A32",
      "chart-3": "#D89A21",
      "chart-4": "#2E6B4F",
      "chart-5": "#C77B16",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1F5B73",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#D89A21",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#D89A21",
      "radius": "6px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9b2-8835-7702-b990-8543080bdc55",
    "slug": "market-kiln-wayfinding",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}

# Market Kiln Wayfinding shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate local cultural chroma into shadcn/ui product primitives without inventing a second component system. The preview should feel like a palette provenance console: warm neutral scaffolding, civic route bands, offset pigment rails, compact swatch evidence, and explicit accessibility states.

## Required primitives
button, card, input, textarea, select, dialog, sheet, tabs, badge, separator, checkbox, switch, slider, tooltip, dropdown-menu, and table from `@/components/ui/*`.

## Token cues
Use limestone background `{colors.background}`, paper cards `{colors.surface}`, ink text `{colors.text}`, glaze primary `{colors.primary}`, tomato secondary `{colors.secondary}`, marigold accent `{colors.accent}`, and neutral borders `{colors.border}`. Keep radius scale tight: cards 10px, controls 6px, badges full.

## Visual character to preserve
Thin civic borders, one offset pigment rail, visible token/provenance labels, data-viz hatches or text labels, and restrained saturated color. Never turn the language into a festival collage.

## ShadSync visual profile
family: civic-market-token-system; material: matte-limestone-paper; contour: rectilinear-with-small-radius; border: thin-neutral-plus-pigment-rail; underlay: subtle-tile-grid; grain: low speckle; stickerBadges: restrained provenance pills; motion: snap-rail-2px; density: medium-high; accents: glaze, tomato, marigold, leaf.

## Signature component recipes
- button: primary uses glaze fill, ink border, marigold inset-left rail; secondary is paper with tomato rail; focus ring marigold 2px.
- card: paper surface, 1px border, 4px `before:` rail; card header includes mono route code badge.
- input: limestone field, neutral border, compact label, marigold focus ring, helper text for allowed aliases.
- textarea: same as input with provenance-note placeholder and no saturated background.
- select: paper trigger with mono selected token and glaze chevron treatment.
- dialog: raised paper panel, glaze rail, warning badges for misuse boundaries, no backdrop blur overload.
- sheet: side provenance inspector with sticky route band and compact evidence rows.
- tabs: active tab shows offset tomato or glaze rail; inactive tabs remain neutral.
- badge: pill with small color dot plus text label; never hue alone.
- separator: 1px neutral rule with optional short marigold segment for section starts.
- checkbox: square 6px control, glaze checked fill, visible label.
- switch: neutral track, glaze thumb for on, text label adjacent.
- slider: neutral track, marigold filled segment, numeric mono output.
- tooltip: ink surface with paper text and provenance caveat.
- dropdown-menu: paper menu, compact rows, active item left rail.
- table: dense rows, mono token columns, chip plus label for chart colors.

## Preview shots
application-shell shows route navigation and swatch approval metrics; detail-editor shows alias provenance editing; data-operations shows chart-token safety table.

## Implementation contract
Import local shadcn primitives from `@/components/ui/*`. Use Tailwind arbitrary values only to express the language tokens and rails; preserve accessible labels and non-hue states.

## 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 ProvenanceCard() {
  return (
    <Card className="relative overflow-hidden rounded-[10px] border-[#CFC2A8] bg-[#FFF9EC] before:absolute before:inset-y-0 before:left-0 before:w-1 before:bg-[#1F5B73]">
      <CardHeader className="pl-6">
        <Badge className="w-fit rounded-full border-[#CFC2A8] bg-[#F4EFE4] font-mono text-[#1C2522]">GLAZE / AA</Badge>
        <CardTitle className="font-[Anek_Latin] text-2xl tracking-[-0.012em]">Civic glaze primary</CardTitle>
      </CardHeader>
      <CardContent className="pl-6 text-[#756F64]">Documented primitive with allowed foreground and misuse notes.</CardContent>
      <Button className="ml-6 mb-6 rounded-[6px] border border-[#1C2522] bg-[#1F5B73] text-[#FFF9EC] shadow-[inset_4px_0_#D89A21]">Approve route</Button>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use warm neutral surfaces, compact spacing, visible labels, and the Market Kiln rail/focus treatment appropriate to button."
    },
    {
      "component": "card",
      "recipe": "Use warm neutral surfaces, compact spacing, visible labels, and the Market Kiln rail/focus treatment appropriate to card."
    },
    {
      "component": "input",
      "recipe": "Use warm neutral surfaces, compact spacing, visible labels, and the Market Kiln rail/focus treatment appropriate to input."
    },
    {
      "component": "textarea",
      "recipe": "Use warm neutral surfaces, compact spacing, visible labels, and the Market Kiln rail/focus treatment appropriate to textarea."
    },
    {
      "component": "select",
      "recipe": "Use warm neutral surfaces, compact spacing, visible labels, and the Market Kiln rail/focus treatment appropriate to select."
    },
    {
      "component": "dialog",
      "recipe": "Use warm neutral surfaces, compact spacing, visible labels, and the Market Kiln rail/focus treatment appropriate to dialog."
    },
    {
      "component": "sheet",
      "recipe": "Use warm neutral surfaces, compact spacing, visible labels, and the Market Kiln rail/focus treatment appropriate to sheet."
    },
    {
      "component": "tabs",
      "recipe": "Use warm neutral surfaces, compact spacing, visible labels, and the Market Kiln rail/focus treatment appropriate to tabs."
    },
    {
      "component": "badge",
      "recipe": "Use warm neutral surfaces, compact spacing, visible labels, and the Market Kiln rail/focus treatment appropriate to badge."
    },
    {
      "component": "separator",
      "recipe": "Use warm neutral surfaces, compact spacing, visible labels, and the Market Kiln rail/focus treatment appropriate to separator."
    },
    {
      "component": "checkbox",
      "recipe": "Use warm neutral surfaces, compact spacing, visible labels, and the Market Kiln rail/focus treatment appropriate to checkbox."
    },
    {
      "component": "switch",
      "recipe": "Use warm neutral surfaces, compact spacing, visible labels, and the Market Kiln rail/focus treatment appropriate to switch."
    },
    {
      "component": "slider",
      "recipe": "Use warm neutral surfaces, compact spacing, visible labels, and the Market Kiln rail/focus treatment appropriate to slider."
    },
    {
      "component": "tooltip",
      "recipe": "Use warm neutral surfaces, compact spacing, visible labels, and the Market Kiln rail/focus treatment appropriate to tooltip."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use warm neutral surfaces, compact spacing, visible labels, and the Market Kiln rail/focus treatment appropriate to dropdown-menu."
    },
    {
      "component": "table",
      "recipe": "Use warm neutral surfaces, compact spacing, visible labels, and the Market Kiln rail/focus treatment appropriate to table."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "generic SaaS blue-only dashboard",
        "decorative cultural collage"
      ],
      "composition": "Left civic route navigation, top status band, swatch approval cards, and release metrics.",
      "id": "application-shell",
      "mustShowStates": [
        "active tab with glaze rail",
        "AA badge with text",
        "primary and secondary buttons",
        "tooltip caveat"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "table",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Approve token route",
          "Open provenance notes"
        ],
        "description": "Design ops reviews primitive ramps, editorial aliases, and contrast-safe pairings before release.",
        "eyebrow": "WAYFINDING / TOKEN REVIEW",
        "headline": "Approve local chroma aliases for product use",
        "stats": [
          {
            "label": "AA pairs",
            "value": "31"
          },
          {
            "label": "Aliases documented",
            "value": "96%"
          },
          {
            "label": "Chart hatches",
            "value": "8"
          }
        ]
      }
    },
    {
      "avoid": [
        "unnamed pigment fields",
        "hue-only validation"
      ],
      "composition": "A sheet-style provenance editor with fields, misuse checklist, contrast threshold slider, and dark-mode switch.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused marigold input",
        "checked misuse guardrail",
        "open provenance dialog",
        "enabled dark mapping switch"
      ],
      "primitives": [
        "input",
        "textarea",
        "select",
        "dialog",
        "sheet",
        "checkbox",
        "switch",
        "slider",
        "badge"
      ],
      "scene": {
        "actions": [
          "Save alias",
          "Request local review"
        ],
        "description": "Capture source category, approved foregrounds, local review owner, and prohibited naming.",
        "eyebrow": "ALIAS PROVENANCE",
        "fields": [
          {
            "label": "Primitive token",
            "value": "accent.500"
          },
          {
            "label": "Source category",
            "value": "festival pigment / route marker"
          },
          {
            "label": "Misuse boundary",
            "value": "not a decorative ethnic label"
          }
        ],
        "headline": "Edit Marigold Route 500"
      }
    },
    {
      "avoid": [
        "rainbow chart inventory",
        "color-only success or error"
      ],
      "composition": "Dense operations table for chart tokens with color chips, hatch names, labels, and status badges.",
      "id": "data-operations",
      "mustShowStates": [
        "dropdown active row rail",
        "chart chip with text label",
        "error badge for undocumented alias",
        "neutral table lines"
      ],
      "primitives": [
        "table",
        "dropdown-menu",
        "badge",
        "card",
        "separator",
        "button",
        "select"
      ],
      "scene": {
        "actions": [
          "Export chart tokens",
          "Filter unsafe"
        ],
        "description": "Every saturated chip has a label, hatch, and semantic role for colorblind-safe analytics.",
        "eyebrow": "DATA-VIZ SAFETY",
        "headline": "Chart tokens require non-hue cues",
        "rows": [
          {
            "cue": "diagonal hatch",
            "status": "ready",
            "token": "chart.glaze"
          },
          {
            "cue": "square marker",
            "status": "exception",
            "token": "chart.tomato"
          },
          {
            "cue": "dot marker",
            "status": "ready",
            "token": "chart.marigold"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "glaze blue",
      "market tomato",
      "marigold route",
      "leaf verified"
    ],
    "border": "thin-neutral-plus-offset-pigment-rail",
    "contour": "rectilinear-small-radius",
    "density": "medium-high",
    "family": "civic-market-token-system",
    "grain": true,
    "material": "matte-limestone-paper",
    "motion": "snap-rail-2px",
    "stickerBadges": true,
    "underlay": true
  }
}