Market Mirage Atelier

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

:root {
  --background: #F6E4C8;
  --foreground: #241812;
  --card: #FFF7E8;
  --card-foreground: #241812;
  --popover: #FFF7E8;
  --popover-foreground: #241812;
  --primary: #7F2A1D;
  --primary-foreground: #ffffff;
  --secondary: #3F4E2A;
  --secondary-foreground: #ffffff;
  --muted: #6A5848;
  --muted-foreground: #241812;
  --accent: #B85B2C;
  --accent-foreground: #ffffff;
  --destructive: #8C1D2C;
  --border: #8A6A4B;
  --input: #8A6A4B;
  --ring: #B85B2C;
  --chart-1: #7F2A1D;
  --chart-2: #3F4E2A;
  --chart-3: #B85B2C;
  --chart-4: #315C36;
  --chart-5: #9B5A12;
  --sidebar: #FFF7E8;
  --sidebar-foreground: #241812;
  --sidebar-primary: #7F2A1D;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #243F73;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #8A6A4B;
  --sidebar-ring: #B85B2C;
  --radius: 14px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #7F2A1D;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #B85B2C;
  --accent-foreground: #ffffff;
  --destructive: #8C1D2C;
  --border: #303642;
  --input: #303642;
  --ring: #B85B2C;
  --chart-1: #7F2A1D;
  --chart-2: #3F4E2A;
  --chart-3: #B85B2C;
  --chart-4: #315C36;
  --chart-5: #9B5A12;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #7F2A1D;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #B85B2C;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #B85B2C;
  --radius: 14px;
}

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 MarketMirageAtelierShadcnKit() {
  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 Mirage Atelier</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-mirage-atelier",
  "type": "registry:theme",
  "title": "Market Mirage Atelier shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F6E4C8",
      "foreground": "#241812",
      "card": "#FFF7E8",
      "card-foreground": "#241812",
      "popover": "#FFF7E8",
      "popover-foreground": "#241812",
      "primary": "#7F2A1D",
      "primary-foreground": "#ffffff",
      "secondary": "#3F4E2A",
      "secondary-foreground": "#ffffff",
      "muted": "#6A5848",
      "muted-foreground": "#241812",
      "accent": "#B85B2C",
      "accent-foreground": "#ffffff",
      "destructive": "#8C1D2C",
      "border": "#8A6A4B",
      "input": "#8A6A4B",
      "ring": "#B85B2C",
      "chart-1": "#7F2A1D",
      "chart-2": "#3F4E2A",
      "chart-3": "#B85B2C",
      "chart-4": "#315C36",
      "chart-5": "#9B5A12",
      "sidebar": "#FFF7E8",
      "sidebar-foreground": "#241812",
      "sidebar-primary": "#7F2A1D",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#243F73",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#8A6A4B",
      "sidebar-ring": "#B85B2C",
      "radius": "14px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#7F2A1D",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#B85B2C",
      "accent-foreground": "#ffffff",
      "destructive": "#8C1D2C",
      "border": "#303642",
      "input": "#303642",
      "ring": "#B85B2C",
      "chart-1": "#7F2A1D",
      "chart-2": "#3F4E2A",
      "chart-3": "#B85B2C",
      "chart-4": "#315C36",
      "chart-5": "#9B5A12",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#7F2A1D",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#B85B2C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#B85B2C",
      "radius": "14px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a4-d5cf-7de2-b14a-0320940808db",
    "slug": "market-mirage-atelier",
    "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 Mirage Atelier shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate the Market Mirage Atelier palette into accessible editorial product screens: parchment reading surfaces, ticket-frame cards, mono provenance tags, paprika/olive/indigo accents, and explicit state labels.

## Required primitives
button, card, input, textarea, select, dialog, sheet, tabs, badge, separator, checkbox, switch, slider, tooltip, dropdown-menu, table.

## Token cues
Use background #F6E4C8, surface #FFF7E8, text #241812, primary paprika #7F2A1D, secondary olive #3F4E2A, accent clay #B85B2C, info indigo #243F73, and border #8A6A4B. Long text belongs on cream or parchment with ink foreground.

## Visual character to preserve
Warm parchment fields, subtle dye blooms, ticket frames with offset shadows, mono provenance badges, and color-independent status affordances.

## ShadSync visual profile
family: cultural-editorial; material: parchment-paper; contour: rounded-ticket; border: ink-solid-plus-dashed; underlay: true; grain: true; stickerBadges: true; motion: tactile-lift; density: balanced-editorial; accents: paprika, olive, clay, indigo.

## Signature component recipes
- button: Use rounded-full, 2px ink border, 3px drop shadow. Primary uses paprika background with cream text; secondary uses cream with ink text. Include icon or action verb.
- card: Use cream background, 1.5px border, 22px-28px radius, offset clay or indigo underlay for feature cards.
- input: Cream field, ink text, border #8A6A4B, focus-visible indigo ring; labels are uppercase IBM Plex Mono.
- textarea: Same as input; use parchment inset for editorial notes and never place muted text on clay.
- select: Same as input with visible chevron and label; include helper copy for palette constraints.
- dialog: Cream ticket panel over parchment scrim with paprika side rule and explicit close button.
- sheet: Use ledger-like side panel with dashed separators and provenance tags.
- tabs: Cream tabs with active indigo fill and text label, not color-only active indication.
- badge: Mono uppercase pill with icon/pictogram, ink border, and role text.
- separator: Dashed #8A6A4B for internal provenance breaks; solid for major editorial frames.
- checkbox: Ink border, indigo focus ring, check icon plus adjacent explicit label.
- switch: Olive on-state with text label and visible knob; do not rely on green alone.
- slider: Ink rail, paprika active range, numeric value label, and tick marks.
- tooltip: Indigo or ink panel with cream text and short explanatory copy.
- dropdown-menu: Cream menu with border, shadow, mono section labels, and clear focus states.
- table: Editorial ledger rows, dashed dividers, readable 16px minimum type, status cells include icon and word.

## Preview shots
application-shell, detail-editor, data-operations.

## Implementation contract
Import local primitives from `@/components/ui/*`. Preserve contrast pairings and pair hue with icons, labels, borders, or pattern marks. Do not invent another component system.

## 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"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

export function MarketMiragePanel() {
  return (
    <Card className="rounded-[28px] border-2 border-[#8A6A4B] bg-[#FFF7E8] text-[#241812] shadow-[0_14px_30px_rgba(80,43,22,.18),0_3px_0_rgba(36,24,18,.18)]">
      <CardHeader className="border-b border-dashed border-[#8A6A4B]">
        <Badge className="w-fit rounded-full border border-[#8A6A4B] bg-[#F6E4C8] font-mono uppercase text-[#241812]">✦ Provenance safe</Badge>
        <CardTitle className="font-serif text-4xl tracking-tight">Palette contrast matrix</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4 p-6">
        <Input aria-label="Story region" defaultValue="coastal produce archive" className="rounded-[14px] border-[#8A6A4B] bg-[#FFF7E8] focus-visible:ring-[#243F73]" />
        <Button className="rounded-full border-2 border-[#241812] bg-[#7F2A1D] text-[#FFF7E8] shadow-[0_3px_0_#241812]">◆ Apply AA pairings</Button>
        <Table><TableHeader><TableRow><TableHead>Role</TableHead><TableHead>Pairing</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Body</TableCell><TableCell>Ink on cream</TableCell></TableRow></TableBody></Table>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "generic beige dashboard",
        "color-only status chips"
      ],
      "composition": "Magazine-like palette command center with hero contrast summary, provenance side rail, and ledger table.",
      "id": "application-shell",
      "mustShowStates": [
        "active tab has indigo fill plus underline label",
        "warning row uses icon and text label",
        "primary CTA uses paprika with cream text"
      ],
      "primitives": [
        "button",
        "card",
        "badge",
        "separator",
        "tabs",
        "tooltip",
        "dropdown-menu",
        "table"
      ],
      "scene": {
        "actions": [
          "Apply AA pairings",
          "Open provenance map"
        ],
        "description": "Coordinate market-inspired pigments into legible editorial systems.",
        "eyebrow": "2026 palette desk",
        "headline": "Accessible cultural color stories",
        "rows": [
          {
            "background": "Cream",
            "foreground": "Ink",
            "role": "Feature essay",
            "state": "Safe"
          },
          {
            "background": "Paprika",
            "foreground": "Cream",
            "role": "CTA",
            "state": "Large text"
          },
          {
            "background": "Indigo",
            "foreground": "Cream",
            "role": "Info note",
            "state": "Icon + label"
          }
        ],
        "stats": [
          {
            "label": "Body pairs",
            "value": "7:1 target"
          },
          {
            "label": "Accent roles",
            "value": "12 tokens"
          },
          {
            "label": "Sources",
            "value": "6 forecasts"
          }
        ]
      }
    },
    {
      "avoid": [
        "low contrast placeholder text",
        "unlabeled icon-only controls"
      ],
      "composition": "Palette role editor with ticket-frame form, explicit contrast warnings, and sensory provenance fields.",
      "id": "detail-editor",
      "mustShowStates": [
        "focus ring in indigo",
        "checkbox has visible check and label",
        "switch includes on/off text"
      ],
      "primitives": [
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "button",
        "badge"
      ],
      "scene": {
        "actions": [
          "Save role",
          "Preview story"
        ],
        "description": "Tune saturation, surface pairing, and non-color cues before publishing.",
        "eyebrow": "Role editor",
        "fields": [
          {
            "label": "Role name",
            "value": "Paprika stamp CTA"
          },
          {
            "label": "Allowed foreground",
            "value": "Cream text / icon required"
          },
          {
            "label": "Provenance note",
            "value": "Market spice label, not alert red"
          }
        ],
        "headline": "Paprika stamp usage rule",
        "stats": [
          {
            "label": "Contrast",
            "value": "AA large"
          },
          {
            "label": "Cue count",
            "value": "3"
          }
        ]
      }
    },
    {
      "avoid": [
        "spreadsheet monotony",
        "states conveyed by red or green alone"
      ],
      "composition": "Operations review table for palette governance with sheet details and accessible state treatments.",
      "id": "data-operations",
      "mustShowStates": [
        "selected rows show checkbox plus tinted border",
        "error includes label and icon",
        "dropdown focus is visibly outlined"
      ],
      "primitives": [
        "table",
        "sheet",
        "badge",
        "separator",
        "button",
        "tooltip",
        "checkbox",
        "dropdown-menu"
      ],
      "scene": {
        "actions": [
          "Approve release",
          "Export tokens"
        ],
        "description": "Audit provenance, contrast, and semantic cue coverage across editorial modules.",
        "eyebrow": "Governance ledger",
        "headline": "Palette release checks",
        "rows": [
          {
            "contrast": "Pass",
            "cue": "text + border",
            "module": "Hero essay"
          },
          {
            "contrast": "Review",
            "cue": "icon + label",
            "module": "Warning note"
          },
          {
            "contrast": "Pass",
            "cue": "pattern + word",
            "module": "Data badge"
          }
        ],
        "stats": [
          {
            "label": "Modules",
            "value": "18"
          },
          {
            "label": "Needs review",
            "value": "2"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "paprika #7F2A1D",
      "olive #3F4E2A",
      "clay #B85B2C",
      "indigo #243F73"
    ],
    "border": "solid-ink-frames-with-dashed-ledger-separators",
    "contour": "rounded-ticket-panels",
    "density": "balanced-editorial",
    "family": "cultural-editorial-palette-system",
    "grain": true,
    "material": "parchment-paper-and-ink",
    "motion": "tactile-lift-and-dye-swatch-reveal",
    "stickerBadges": true,
    "underlay": true
  }
}