Luminous Tidal Signal

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

:root {
  --background: #F6F4EC;
  --foreground: #191D21;
  --card: #FDFCF7;
  --card-foreground: #191D21;
  --popover: #FDFCF7;
  --popover-foreground: #191D21;
  --primary: #167E82;
  --primary-foreground: #ffffff;
  --secondary: #B8A7FF;
  --secondary-foreground: #ffffff;
  --muted: #6B7375;
  --muted-foreground: #191D21;
  --accent: #126DFF;
  --accent-foreground: #ffffff;
  --destructive: #A74653;
  --border: #C7CCD0;
  --input: #C7CCD0;
  --ring: #126DFF;
  --chart-1: #167E82;
  --chart-2: #B8A7FF;
  --chart-3: #126DFF;
  --chart-4: #4E8A63;
  --chart-5: #F1C95A;
  --sidebar: #FDFCF7;
  --sidebar-foreground: #191D21;
  --sidebar-primary: #167E82;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #6AC7D2;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #C7CCD0;
  --sidebar-ring: #126DFF;
  --radius: 18px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #167E82;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #126DFF;
  --accent-foreground: #ffffff;
  --destructive: #A74653;
  --border: #303642;
  --input: #303642;
  --ring: #126DFF;
  --chart-1: #167E82;
  --chart-2: #B8A7FF;
  --chart-3: #126DFF;
  --chart-4: #4E8A63;
  --chart-5: #F1C95A;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #167E82;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #126DFF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #126DFF;
  --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 LuminousTidalSignalShadcnKit() {
  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">Luminous Tidal Signal</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": "luminous-tidal-signal",
  "type": "registry:theme",
  "title": "Luminous Tidal Signal shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F6F4EC",
      "foreground": "#191D21",
      "card": "#FDFCF7",
      "card-foreground": "#191D21",
      "popover": "#FDFCF7",
      "popover-foreground": "#191D21",
      "primary": "#167E82",
      "primary-foreground": "#ffffff",
      "secondary": "#B8A7FF",
      "secondary-foreground": "#ffffff",
      "muted": "#6B7375",
      "muted-foreground": "#191D21",
      "accent": "#126DFF",
      "accent-foreground": "#ffffff",
      "destructive": "#A74653",
      "border": "#C7CCD0",
      "input": "#C7CCD0",
      "ring": "#126DFF",
      "chart-1": "#167E82",
      "chart-2": "#B8A7FF",
      "chart-3": "#126DFF",
      "chart-4": "#4E8A63",
      "chart-5": "#F1C95A",
      "sidebar": "#FDFCF7",
      "sidebar-foreground": "#191D21",
      "sidebar-primary": "#167E82",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#6AC7D2",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#C7CCD0",
      "sidebar-ring": "#126DFF",
      "radius": "18px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#167E82",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#126DFF",
      "accent-foreground": "#ffffff",
      "destructive": "#A74653",
      "border": "#303642",
      "input": "#303642",
      "ring": "#126DFF",
      "chart-1": "#167E82",
      "chart-2": "#B8A7FF",
      "chart-3": "#126DFF",
      "chart-4": "#4E8A63",
      "chart-5": "#F1C95A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#167E82",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#126DFF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#126DFF",
      "radius": "18px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019eb43d-f16f-74f3-be8c-000ce6120e3e",
    "slug": "luminous-tidal-signal",
    "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"
      ]
    }
  }
}

# Luminous Tidal Signal shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate the 2026 Soft Futurism + Electric Optimism palette into local shadcn/ui primitives with teal/lavender atmospheric surfaces, soft-silver structure, and restrained electric-blue state rails. Components should feel like a color strategy product for fashion, interiors, branding, textiles, and product design, not a generic dashboard.

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

## Token cues
Use `{colors.primary}` as transformative teal fields, `{colors.secondary}` as digital lavender ambient wash, `{colors.accent}` only for focus rails, active tabs, selected rows, and primary button seams. Ground with `{colors.background}`, `{colors.surface}`, `{colors.text}`, `{colors.muted}`, and `{colors.border}`. Use `{spacing.*}` for open editorial gutters and `{rounded.lg}` for cards with `{rounded.full}` for badges.

## Visual character to preserve
- Translucent chalk cards over teal/lavender radial light pools.
- One dominant feature panel plus smaller swatch or operation cards.
- Electric-blue rail only on the active component or row.
- Warm clay, butter, cocoa, muted coral, mineral green, and oxidized copper as annotation or material cues.
- Soft-silver monoline borders and restrained shadows.

## ShadSync visual profile
family: soft-futurist-palette-system; material: luminous-translucent-chalk; contour: rounded-rect-pill; border: soft-silver-with-electric-rail; underlay: teal-lavender-radial-pools; grain: subtle; stickerBadges: restrained-coral-butter; motion: quiet-lift-rail-expand; density: balanced-editorial; accents: controlled-electric-blue.

## Signature component recipes
- button: Primary button uses teal fill, chalk text, pill radius, and a 2px electric-blue inset left rail on hover/focus. Secondary button is chalk translucent with silver border. Destructive uses muted coral, not neon red.
- card: Use rounded-lg containers with 1px silver border, soft translucent surface, optional radial lavender pseudo-underlay, and at most one selected card rail.
- input: Chalk surface, silver outline, graphite text, mono micro-label above, electric-blue focus ring/left seam, placeholder in muted gray.
- textarea: Same as input, with larger padding and a low-opacity lavender focus glow behind the field.
- select: Pill-like trigger, silver border, chevron in teal, active option marked by blue rail and butter dot.
- dialog: Centered chalk panel over teal/lavender wash, thick heading, soft-silver border, and coral/butter badges for warnings or notes.
- sheet: Right sheet uses graphite header band, chalk body, blue vertical rail, and swatch chips for context.
- tabs: Rounded segmented tabs; active tab has electric-blue rail and lavender halo, inactive tabs remain neutral.
- badge: Pill badges in teal, lavender, butter, coral, mineral green, or cocoa; use tiny labels and avoid rainbow rows.
- separator: 1px soft-silver rules; use teal/lavender gradient separator only for major section breaks.
- checkbox: Rounded small square with teal fill and blue focus outline; label includes non-color state text.
- switch: Teal track when on, oat track when off, blue focus ring, chalk thumb.
- slider: Silver rail, teal progress, electric-blue thumb, butter tick for recommended range.
- tooltip: Graphite bubble with chalk text and lavender edge glow.
- dropdown-menu: Chalk translucent menu, silver border, active item blue rail, warm note badges for destructive or pending states.
- table: Rows on chalk surface, selected row has blue rail and pale teal fill; use mono column metadata and swatch dots.

## Preview shots
1. application-shell: palette command center with feature card, swatch metrics, tabs, dropdown menu, and table.
2. detail-editor: material direction editor with inputs, textarea, select, slider, switches, dialog trigger, and badges.
3. data-operations: sourcing table and batch operation sheet with checkbox states, tooltip explanations, separators, and status badges.

## Implementation contract
Import local primitives from `@/components/ui/*`. Do not invent another component system. Preserve semantic HTML, visible focus, WCAG AA contrast, and restrained accent usage. The preview should read as a polished product screen, not a component inventory wall.

## 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 TidalSignalPanel() {
  return (
    <Card className="relative overflow-hidden rounded-[30px] border border-[var(--border)] bg-[var(--card)]/80 shadow-lg before:absolute before:left-0 before:top-6 before:h-24 before:w-[3px] before:rounded-full before:bg-[var(--accent)]">
      <CardHeader className="space-y-3">
        <Badge className="w-fit rounded-full bg-[#F1C95A] text-[#191D21]">2026 palette intelligence</Badge>
        <CardTitle className="font-heading text-4xl tracking-tight">Future color that breathes before it glows.</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-4">
        <Tabs defaultValue="soft-futurism"><TabsList><TabsTrigger value="soft-futurism">Soft Futurism</TabsTrigger><TabsTrigger value="biophilic">Biophilic Luxe</TabsTrigger></TabsList></Tabs>
        <Input placeholder="Search material, runway, or product cue" />
        <Button className="rounded-full bg-[var(--primary)] text-[var(--primary-foreground)] shadow-md focus-visible:ring-[var(--accent)]">Apply electric signal</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Apply Luminous Tidal Signal tokens with chalk surface, soft silver border, rounded contour, and controlled electric-blue active state."
    },
    {
      "component": "card",
      "recipe": "Apply Luminous Tidal Signal tokens with chalk surface, soft silver border, rounded contour, and controlled electric-blue active state."
    },
    {
      "component": "input",
      "recipe": "Apply Luminous Tidal Signal tokens with chalk surface, soft silver border, rounded contour, and controlled electric-blue active state."
    },
    {
      "component": "textarea",
      "recipe": "Apply Luminous Tidal Signal tokens with chalk surface, soft silver border, rounded contour, and controlled electric-blue active state."
    },
    {
      "component": "select",
      "recipe": "Apply Luminous Tidal Signal tokens with chalk surface, soft silver border, rounded contour, and controlled electric-blue active state."
    },
    {
      "component": "dialog",
      "recipe": "Apply Luminous Tidal Signal tokens with chalk surface, soft silver border, rounded contour, and controlled electric-blue active state."
    },
    {
      "component": "sheet",
      "recipe": "Apply Luminous Tidal Signal tokens with chalk surface, soft silver border, rounded contour, and controlled electric-blue active state."
    },
    {
      "component": "tabs",
      "recipe": "Apply Luminous Tidal Signal tokens with chalk surface, soft silver border, rounded contour, and controlled electric-blue active state."
    },
    {
      "component": "badge",
      "recipe": "Apply Luminous Tidal Signal tokens with chalk surface, soft silver border, rounded contour, and controlled electric-blue active state."
    },
    {
      "component": "separator",
      "recipe": "Apply Luminous Tidal Signal tokens with chalk surface, soft silver border, rounded contour, and controlled electric-blue active state."
    },
    {
      "component": "checkbox",
      "recipe": "Apply Luminous Tidal Signal tokens with chalk surface, soft silver border, rounded contour, and controlled electric-blue active state."
    },
    {
      "component": "switch",
      "recipe": "Apply Luminous Tidal Signal tokens with chalk surface, soft silver border, rounded contour, and controlled electric-blue active state."
    },
    {
      "component": "slider",
      "recipe": "Apply Luminous Tidal Signal tokens with chalk surface, soft silver border, rounded contour, and controlled electric-blue active state."
    },
    {
      "component": "tooltip",
      "recipe": "Apply Luminous Tidal Signal tokens with chalk surface, soft silver border, rounded contour, and controlled electric-blue active state."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Apply Luminous Tidal Signal tokens with chalk surface, soft silver border, rounded contour, and controlled electric-blue active state."
    },
    {
      "component": "table",
      "recipe": "Apply Luminous Tidal Signal tokens with chalk surface, soft silver border, rounded contour, and controlled electric-blue active state."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "rainbow equal swatch rows",
        "neon glow overload",
        "generic analytics tiles"
      ],
      "composition": "Dominant teal/lavender feature card beside swatch metrics and a sourcing table; one selected panel carries the blue rail.",
      "id": "application-shell",
      "mustShowStates": [
        "active tab",
        "primary action focus",
        "selected table row",
        "tooltip on confidence score"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "dropdown-menu",
        "table",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Apply signal rail",
          "Export textile brief"
        ],
        "description": "A palette strategist compares runway, interior, and product signals without letting electric blue dominate.",
        "eyebrow": "2026 cross-industry forecast",
        "headline": "Soft Futurism color command",
        "rows": [
          {
            "direction": "Transformative Teal",
            "status": "primary",
            "use": "product shell"
          },
          {
            "direction": "Digital Lavender",
            "status": "support",
            "use": "ambient UI layer"
          },
          {
            "direction": "Butter Yellow",
            "status": "micro accent",
            "use": "optimism marker"
          }
        ],
        "stats": [
          {
            "label": "teal confidence",
            "value": "86%"
          },
          {
            "label": "accent cap",
            "value": "12%"
          },
          {
            "label": "AA contrast",
            "value": "pass"
          }
        ]
      },
      "title": "Palette intelligence shell"
    },
    {
      "avoid": [
        "default browser inputs",
        "muddy clay fields",
        "pastel gradient wash"
      ],
      "composition": "Chalk editor card with lavender halo, controlled form density, material badges, and a dialog for contrast validation.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input with blue rail",
        "slider recommended tick",
        "switch on",
        "dialog open preview"
      ],
      "primitives": [
        "input",
        "textarea",
        "select",
        "slider",
        "switch",
        "checkbox",
        "dialog",
        "badge",
        "separator",
        "button"
      ],
      "scene": {
        "actions": [
          "Validate contrast",
          "Save material story"
        ],
        "description": "Designers tune product finishes and textile applications with warm grounded notes.",
        "eyebrow": "material recipe",
        "fields": [
          {
            "label": "Primary finish",
            "value": "soft anodized teal"
          },
          {
            "label": "Accent rule",
            "value": "electric blue focus only"
          },
          {
            "label": "Warm counterweight",
            "value": "warm clay / cocoa"
          }
        ],
        "headline": "Teal body, lavender glass, cocoa grip",
        "stats": [
          {
            "label": "lavender opacity",
            "value": "28%"
          },
          {
            "label": "silver border",
            "value": "1px"
          }
        ]
      },
      "title": "Material direction editor"
    },
    {
      "avoid": [
        "dense spreadsheet wall",
        "cyberpunk dark mode",
        "unlabeled color-only statuses"
      ],
      "composition": "Operational table grounded in oat/chalk neutrals with selected rows, side sheet, and restrained coral/butter status pills.",
      "id": "data-operations",
      "mustShowStates": [
        "checked rows",
        "open sheet",
        "pending badge",
        "dropdown select"
      ],
      "primitives": [
        "table",
        "checkbox",
        "sheet",
        "select",
        "badge",
        "separator",
        "tooltip",
        "button",
        "switch"
      ],
      "scene": {
        "actions": [
          "Open batch sheet",
          "Approve selected"
        ],
        "description": "A team batches textile, packaging, and interface color decisions for 2026 market release.",
        "eyebrow": "launch readiness",
        "headline": "Cross-industry palette rollout",
        "rows": [
          {
            "item": "woven lavender overlay",
            "owner": "textile",
            "status": "sampling"
          },
          {
            "item": "teal appliance shell",
            "owner": "product",
            "status": "approved"
          },
          {
            "item": "oat interior laminate",
            "owner": "interiors",
            "status": "pending"
          }
        ],
        "stats": [
          {
            "label": "selected",
            "value": "3"
          },
          {
            "label": "risks",
            "value": "1 coral note"
          }
        ]
      },
      "title": "Sourcing and launch operations"
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": "controlled-electric-blue",
    "border": "soft-silver-with-electric-rail",
    "contour": "rounded-rect-pill",
    "density": "balanced-editorial",
    "family": "soft-futurist-palette-system",
    "grain": "subtle",
    "material": "luminous-translucent-chalk",
    "motion": "quiet-lift-rail-expand",
    "stickerBadges": "restrained-coral-butter",
    "underlay": "teal-lavender-radial-pools"
  }
}