Aquatic Mineral Botanics

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

:root {
  --background: #EEF4F0;
  --foreground: #102B2A;
  --card: #F8FBF7;
  --card-foreground: #102B2A;
  --popover: #F8FBF7;
  --popover-foreground: #102B2A;
  --primary: #0E6F67;
  --primary-foreground: #ffffff;
  --secondary: #123F46;
  --secondary-foreground: #ffffff;
  --muted: #6F817B;
  --muted-foreground: #102B2A;
  --accent: #7ED9D3;
  --accent-foreground: #111111;
  --destructive: #A64B3C;
  --border: #B8C7C0;
  --input: #B8C7C0;
  --ring: #7ED9D3;
  --chart-1: #0E6F67;
  --chart-2: #123F46;
  --chart-3: #7ED9D3;
  --chart-4: #4F8A3B;
  --chart-5: #B9822E;
  --sidebar: #F8FBF7;
  --sidebar-foreground: #102B2A;
  --sidebar-primary: #0E6F67;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2C7D92;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #B8C7C0;
  --sidebar-ring: #7ED9D3;
  --radius: 18px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #0E6F67;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #7ED9D3;
  --accent-foreground: #111111;
  --destructive: #A64B3C;
  --border: #303642;
  --input: #303642;
  --ring: #7ED9D3;
  --chart-1: #0E6F67;
  --chart-2: #123F46;
  --chart-3: #7ED9D3;
  --chart-4: #4F8A3B;
  --chart-5: #B9822E;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #0E6F67;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #7ED9D3;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #7ED9D3;
  --radius: 18px;
}

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 AquaticMineralBotanicsShadcnKit() {
  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">Aquatic Mineral Botanics</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": "aquatic-mineral-botanics",
  "type": "registry:theme",
  "title": "Aquatic Mineral Botanics shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#EEF4F0",
      "foreground": "#102B2A",
      "card": "#F8FBF7",
      "card-foreground": "#102B2A",
      "popover": "#F8FBF7",
      "popover-foreground": "#102B2A",
      "primary": "#0E6F67",
      "primary-foreground": "#ffffff",
      "secondary": "#123F46",
      "secondary-foreground": "#ffffff",
      "muted": "#6F817B",
      "muted-foreground": "#102B2A",
      "accent": "#7ED9D3",
      "accent-foreground": "#111111",
      "destructive": "#A64B3C",
      "border": "#B8C7C0",
      "input": "#B8C7C0",
      "ring": "#7ED9D3",
      "chart-1": "#0E6F67",
      "chart-2": "#123F46",
      "chart-3": "#7ED9D3",
      "chart-4": "#4F8A3B",
      "chart-5": "#B9822E",
      "sidebar": "#F8FBF7",
      "sidebar-foreground": "#102B2A",
      "sidebar-primary": "#0E6F67",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2C7D92",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#B8C7C0",
      "sidebar-ring": "#7ED9D3",
      "radius": "18px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0E6F67",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#7ED9D3",
      "accent-foreground": "#111111",
      "destructive": "#A64B3C",
      "border": "#303642",
      "input": "#303642",
      "ring": "#7ED9D3",
      "chart-1": "#0E6F67",
      "chart-2": "#123F46",
      "chart-3": "#7ED9D3",
      "chart-4": "#4F8A3B",
      "chart-5": "#B9822E",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0E6F67",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#7ED9D3",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#7ED9D3",
      "radius": "18px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a3-1551-7af1-9a29-ca2e1f684967",
    "slug": "aquatic-mineral-botanics",
    "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"
      ]
    }
  }
}

# Aquatic Mineral Botanics shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate the aquatic mineral botanical palette into practical shadcn/ui screens for regenerative material tools, climate operations, and sustainable commerce. Components should feel like mineral slabs lit by sea glass, not generic teal SaaS.

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

## Token cues
Use `primary` as transformative teal, `secondary` as deep aquatic navigation, `accent` as sea-glass focus/light, `background` as mineral gray, `surface` as off-white slab, `text` as botanical dark, `success` as algae green, and `border` as translucent mineral edge.

## Visual character to preserve
- Dark teal shell beside pale mineral work surfaces.
- One-pixel mineral borders plus four-pixel teal stratum rules on active regions.
- Sea-glass cyan blooms only behind priority cards and focus states.
- Sediment-band separators between dense data regions.
- Rounded mineral-slab geometry with clipped corner glints used sparingly.

## ShadSync visual profile
family: aquatic-mineral-botanical; material: matte mineral and sea glass; contour: rounded-slab; border: translucent-mineral-with-teal-stratum; underlay: true; grain: subtle; stickerBadges: false; motion: water-settle; density: balanced; accents: transformative teal, sea-glass cyan, algae green.

## Signature component recipes
- `button`: use mineral slab radius, one-pixel translucent border, sea-glass focus ring, teal stratum accent for active or primary states, botanical success chips where stateful, and 180ms water-settling motion.
- `card`: use mineral slab radius, one-pixel translucent border, sea-glass focus ring, teal stratum accent for active or primary states, botanical success chips where stateful, and 180ms water-settling motion.
- `input`: use mineral slab radius, one-pixel translucent border, sea-glass focus ring, teal stratum accent for active or primary states, botanical success chips where stateful, and 180ms water-settling motion.
- `textarea`: use mineral slab radius, one-pixel translucent border, sea-glass focus ring, teal stratum accent for active or primary states, botanical success chips where stateful, and 180ms water-settling motion.
- `select`: use mineral slab radius, one-pixel translucent border, sea-glass focus ring, teal stratum accent for active or primary states, botanical success chips where stateful, and 180ms water-settling motion.
- `dialog`: use mineral slab radius, one-pixel translucent border, sea-glass focus ring, teal stratum accent for active or primary states, botanical success chips where stateful, and 180ms water-settling motion.
- `sheet`: use mineral slab radius, one-pixel translucent border, sea-glass focus ring, teal stratum accent for active or primary states, botanical success chips where stateful, and 180ms water-settling motion.
- `tabs`: use mineral slab radius, one-pixel translucent border, sea-glass focus ring, teal stratum accent for active or primary states, botanical success chips where stateful, and 180ms water-settling motion.
- `badge`: use mineral slab radius, one-pixel translucent border, sea-glass focus ring, teal stratum accent for active or primary states, botanical success chips where stateful, and 180ms water-settling motion.
- `separator`: use mineral slab radius, one-pixel translucent border, sea-glass focus ring, teal stratum accent for active or primary states, botanical success chips where stateful, and 180ms water-settling motion.
- `checkbox`: use mineral slab radius, one-pixel translucent border, sea-glass focus ring, teal stratum accent for active or primary states, botanical success chips where stateful, and 180ms water-settling motion.
- `switch`: use mineral slab radius, one-pixel translucent border, sea-glass focus ring, teal stratum accent for active or primary states, botanical success chips where stateful, and 180ms water-settling motion.
- `slider`: use mineral slab radius, one-pixel translucent border, sea-glass focus ring, teal stratum accent for active or primary states, botanical success chips where stateful, and 180ms water-settling motion.
- `tooltip`: use mineral slab radius, one-pixel translucent border, sea-glass focus ring, teal stratum accent for active or primary states, botanical success chips where stateful, and 180ms water-settling motion.
- `dropdown-menu`: use mineral slab radius, one-pixel translucent border, sea-glass focus ring, teal stratum accent for active or primary states, botanical success chips where stateful, and 180ms water-settling motion.
- `table`: use mineral slab radius, one-pixel translucent border, sea-glass focus ring, teal stratum accent for active or primary states, botanical success chips where stateful, and 180ms water-settling motion.

Shape scale: cards and dialogs use 24-30px radius, fields use 14-16px radius, badges and buttons use full pill radius. Focus rings are 4px sea-glass cyan with a primary border. Tables use sediment separators rather than heavy grid chrome.

## Preview shots
1. `application-shell`: dark teal rail, mineral dashboard cards, token metrics, and a material role table.
2. `detail-editor`: form-heavy palette governance editor with input, textarea, select, switch, checkbox, slider, tooltip, and dialog trigger.
3. `data-operations`: operations table with dropdown-menu actions, sheet filters, tabs, badges, and separators.

## Implementation contract
Import local shadcn primitives from `@/components/ui/*`; do not invent a second component system. Apply language classes around primitives to add stratum rules, sediment separators, sea-glass focus, and clipped corner glints while preserving accessibility and keyboard behavior.

## 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 { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function AquaticMineralPanel() {
  return (
    <Card className="relative overflow-hidden rounded-[28px] border border-[var(--border)] border-t-4 border-t-[var(--primary)] bg-[var(--surface)] shadow-md before:absolute before:right-[-40px] before:top-[-50px] before:h-40 before:w-40 before:rounded-full before:bg-[radial-gradient(circle,var(--accent),transparent_65%)] before:opacity-40">
      <CardHeader>
        <Badge className="w-fit rounded-full border border-[var(--success)]/30 bg-[var(--success)]/10 text-[var(--success)]">algae approved</Badge>
        <CardTitle className="font-serif text-3xl text-[var(--text)]">Material role ledger</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <Tabs defaultValue="light"><TabsList><TabsTrigger value="light">Light</TabsTrigger><TabsTrigger value="dark">Dark</TabsTrigger></TabsList></Tabs>
        <Input className="rounded-[14px] focus-visible:ring-[var(--accent)]" defaultValue="Sea-glass focus reserved for priority actions" />
        <Button className="rounded-full bg-[var(--primary)] text-white hover:bg-[var(--secondary)]">Generate palette</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Mineral slab treatment with accessible contrast, sea-glass focus ring, teal stratum accent on active/primary states, and balanced spacing derived from 8px base rhythm."
    },
    {
      "component": "card",
      "recipe": "Mineral slab treatment with accessible contrast, sea-glass focus ring, teal stratum accent on active/primary states, and balanced spacing derived from 8px base rhythm."
    },
    {
      "component": "input",
      "recipe": "Mineral slab treatment with accessible contrast, sea-glass focus ring, teal stratum accent on active/primary states, and balanced spacing derived from 8px base rhythm."
    },
    {
      "component": "textarea",
      "recipe": "Mineral slab treatment with accessible contrast, sea-glass focus ring, teal stratum accent on active/primary states, and balanced spacing derived from 8px base rhythm."
    },
    {
      "component": "select",
      "recipe": "Mineral slab treatment with accessible contrast, sea-glass focus ring, teal stratum accent on active/primary states, and balanced spacing derived from 8px base rhythm."
    },
    {
      "component": "dialog",
      "recipe": "Mineral slab treatment with accessible contrast, sea-glass focus ring, teal stratum accent on active/primary states, and balanced spacing derived from 8px base rhythm."
    },
    {
      "component": "sheet",
      "recipe": "Mineral slab treatment with accessible contrast, sea-glass focus ring, teal stratum accent on active/primary states, and balanced spacing derived from 8px base rhythm."
    },
    {
      "component": "tabs",
      "recipe": "Mineral slab treatment with accessible contrast, sea-glass focus ring, teal stratum accent on active/primary states, and balanced spacing derived from 8px base rhythm."
    },
    {
      "component": "badge",
      "recipe": "Mineral slab treatment with accessible contrast, sea-glass focus ring, teal stratum accent on active/primary states, and balanced spacing derived from 8px base rhythm."
    },
    {
      "component": "separator",
      "recipe": "Mineral slab treatment with accessible contrast, sea-glass focus ring, teal stratum accent on active/primary states, and balanced spacing derived from 8px base rhythm."
    },
    {
      "component": "checkbox",
      "recipe": "Mineral slab treatment with accessible contrast, sea-glass focus ring, teal stratum accent on active/primary states, and balanced spacing derived from 8px base rhythm."
    },
    {
      "component": "switch",
      "recipe": "Mineral slab treatment with accessible contrast, sea-glass focus ring, teal stratum accent on active/primary states, and balanced spacing derived from 8px base rhythm."
    },
    {
      "component": "slider",
      "recipe": "Mineral slab treatment with accessible contrast, sea-glass focus ring, teal stratum accent on active/primary states, and balanced spacing derived from 8px base rhythm."
    },
    {
      "component": "tooltip",
      "recipe": "Mineral slab treatment with accessible contrast, sea-glass focus ring, teal stratum accent on active/primary states, and balanced spacing derived from 8px base rhythm."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Mineral slab treatment with accessible contrast, sea-glass focus ring, teal stratum accent on active/primary states, and balanced spacing derived from 8px base rhythm."
    },
    {
      "component": "table",
      "recipe": "Mineral slab treatment with accessible contrast, sea-glass focus ring, teal stratum accent on active/primary states, and balanced spacing derived from 8px base rhythm."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "generic analytics cards",
        "neon ocean glow",
        "low contrast cyan text"
      ],
      "composition": "Dark teal navigation rail with pale mineral dashboard cards, sea-glass priority bloom, role ledger table, and sediment separator bands.",
      "id": "application-shell",
      "mustShowStates": [
        "active tab with teal stratum",
        "primary button hover-ready",
        "approved algae badge",
        "table rows with mineral separators"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "table",
        "dropdown-menu"
      ],
      "scene": {
        "actions": [
          "Generate palette",
          "Review contrast"
        ],
        "description": "Translate ocean, mineral, and botanical cues into accessible token roles.",
        "eyebrow": "2026 sustainable material system",
        "headline": "Adaptive palette operations",
        "rows": [
          {
            "role": "Primary action",
            "source": "oxidized copper + kelp shadow",
            "status": "approved"
          },
          {
            "role": "Focus ring",
            "source": "wave-polished glass",
            "status": "interactive"
          },
          {
            "role": "Success",
            "source": "algae bloom",
            "status": "growth"
          }
        ],
        "stats": [
          {
            "label": "Teal depth",
            "value": "#0E6F67"
          },
          {
            "label": "AA contrast",
            "value": "7.8:1"
          },
          {
            "label": "Sea-glass focus",
            "value": "non-text"
          }
        ]
      }
    },
    {
      "avoid": [
        "decorative leaf icons",
        "gradient behind body text",
        "unlabeled color-only validation"
      ],
      "composition": "Palette governance editor on a rounded mineral slab with clipped sea-glass corner, labeled fields, accessible validation, and algae-green completion states.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input ring",
        "checked checkbox",
        "enabled switch",
        "slider progress",
        "tooltip over contrast guidance"
      ],
      "primitives": [
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "tooltip",
        "dialog",
        "button",
        "badge"
      ],
      "scene": {
        "actions": [
          "Save recipe",
          "Open preview dialog"
        ],
        "description": "Edit role notes while preserving botanical text contrast and sea-glass focus behavior.",
        "eyebrow": "Governance editor",
        "fields": [
          {
            "label": "Palette note",
            "value": "Sea-glass accent reserved for focus only"
          },
          {
            "label": "Material family",
            "value": "Ocean + mineral + botanical"
          },
          {
            "label": "Governance note",
            "value": "Avoid greenwashing icons; prove sustainability through role consistency."
          }
        ],
        "headline": "Contrast-safe material recipe",
        "stats": [
          {
            "label": "Focus ring",
            "value": "4px cyan"
          },
          {
            "label": "Motion",
            "value": "180ms"
          }
        ]
      }
    },
    {
      "avoid": [
        "heavy grid chrome",
        "inventory wall layout",
        "pastel low contrast rows"
      ],
      "composition": "Operations table with sheet filters, tabbed token modes, dropdown row actions, algae and ochre badges, and sediment-band separators for grouped data.",
      "id": "data-operations",
      "mustShowStates": [
        "open filter sheet cue",
        "warning badge",
        "dropdown action affordance",
        "selected row with teal stratum"
      ],
      "primitives": [
        "sheet",
        "tabs",
        "table",
        "badge",
        "separator",
        "dropdown-menu",
        "button",
        "card",
        "select"
      ],
      "scene": {
        "actions": [
          "Open filters",
          "Export tokens"
        ],
        "description": "Audit palette role changes across light, dark, and high-contrast themes.",
        "eyebrow": "Material ledger",
        "headline": "Regeneration queue",
        "rows": [
          {
            "contrast": "7.8:1",
            "mode": "light",
            "status": "approved",
            "token": "primary"
          },
          {
            "contrast": "5.4:1",
            "mode": "dark",
            "status": "monitor",
            "token": "warning"
          },
          {
            "contrast": "non-text",
            "mode": "focus",
            "status": "interactive",
            "token": "accent"
          }
        ],
        "stats": [
          {
            "label": "Rows audited",
            "value": "128"
          },
          {
            "label": "Issues",
            "value": "3"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "transformative teal",
      "sea-glass cyan",
      "algae green",
      "botanical dark"
    ],
    "border": "translucent mineral border with teal stratum rule",
    "contour": "rounded-slab",
    "density": "balanced",
    "family": "aquatic-mineral-botanical",
    "grain": true,
    "material": "matte mineral, sea glass, algae state color",
    "motion": "water-settle",
    "stickerBadges": false,
    "underlay": true
  }
}