From 74d26afffa4037ad345947aedaa6b58ad7d7f4bd Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Wed, 20 May 2026 00:02:20 -0500
Subject: [PATCH] fix: ui shadcn

---
 frontend/components.json     | 21 ++++++++++++++++
 frontend/src/app/globals.css | 47 ++++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 frontend/components.json

diff --git a/frontend/components.json b/frontend/components.json
new file mode 100644
index 0000000..e204ed4
--- /dev/null
+++ b/frontend/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.cjs",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 629d049..9a9b43e 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -98,6 +98,8 @@
 
 :root {
   color-scheme: dark;
+
+  /* ── Design system tokens ───────────────────────────── */
   --bg: #070b12;
   --surface: #0f1724;
   --surface-muted: #162133;
@@ -117,10 +119,34 @@
     0 18px 50px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
   --shadow-card:
     0 12px 34px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
+
+  /* ── shadcn/ui bridge — maps shadcn vars to design tokens ── */
+  /* Any component added via `npx shadcn add` will work out of the box. */
+  --background: var(--bg);
+  --foreground: var(--text);
+  --card: var(--surface);
+  --card-foreground: var(--text);
+  --popover: var(--surface);
+  --popover-foreground: var(--text);
+  --primary: var(--accent);
+  --primary-foreground: #070b12;
+  --secondary: var(--surface-muted);
+  --secondary-foreground: var(--text);
+  --muted: var(--surface-muted);
+  --muted-foreground: var(--text-muted);
+  --accent-shadcn: var(--surface-strong);
+  --accent-foreground: var(--text);
+  --destructive: var(--danger);
+  --destructive-foreground: #ffffff;
+  --input: var(--border);
+  --ring: var(--accent);
+  --radius: 0.75rem;
 }
 
 [data-theme="light"] {
   color-scheme: light;
+
+  /* ── Design system tokens ───────────────────────────── */
   --bg: #f8fafc;
   --surface: #ffffff;
   --surface-muted: #f1f5f9;
@@ -140,6 +166,27 @@
     0 1px 3px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.08);
   --shadow-card:
     0 1px 2px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.06);
+
+  /* ── shadcn/ui bridge ───────────────────────────────── */
+  --background: var(--bg);
+  --foreground: var(--text);
+  --card: var(--surface);
+  --card-foreground: var(--text);
+  --popover: var(--surface);
+  --popover-foreground: var(--text);
+  --primary: var(--accent);
+  --primary-foreground: #ffffff;
+  --secondary: var(--surface-muted);
+  --secondary-foreground: var(--text);
+  --muted: var(--surface-muted);
+  --muted-foreground: var(--text-muted);
+  --accent-shadcn: var(--surface-strong);
+  --accent-foreground: var(--text);
+  --destructive: var(--danger);
+  --destructive-foreground: #ffffff;
+  --input: var(--border);
+  --ring: var(--accent);
+  --radius: 0.75rem;
 }
 
 [data-theme="dark"] {