@sero-ai/ui 0.3.1 → 0.4.0

package/dist/styles/globals.css

@@ -0,0 +1,497 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+/* Ensure monorepo consumers that @import this file also scan @sero-ai/ui
+   component sources for Tailwind utility classes. Without this, complex
+   classes like has-[>[data-align=block-end]]:flex-col won't be generated. */
+@source "../components";
+
+@custom-variant dark (&:is(.dark *));
+
+/* ── Sero Design System ──────────────────────────────────────── */
+
+:root {
+  /* Surface colors (light) */
+  --bg-base: #ffffff;
+  --bg-surface: #f4f5f7;
+  --bg-elevated: #eaecf0;
+  --bg-overlay: #dde0e6;
+  --bg-muted: #c8ccd4;
+
+  /* Border (light) */
+  --border-subtle: #d4d8e0;
+  --border-default: #bcc1cc;
+  --border-focus: #059669;
+
+  /* Text (light) */
+  --text-primary: #0f1117;
+  --text-secondary: #3b4252;
+  --text-muted: #6b7280;
+  --text-inverse: #fafafa;
+
+  /* Brand colours — product identity, actions, active UI */
+  --brand-primary: #059669;
+  --brand-primary-hover: #047857;
+  --brand-primary-foreground: #ffffff;
+  --brand-primary-muted: color-mix(in srgb, var(--brand-primary) 10%, transparent);
+  --brand-primary-subtle: color-mix(in srgb, var(--brand-primary) 15%, transparent);
+  --brand-primary-faint: color-mix(in srgb, var(--brand-primary) 3%, transparent);
+  --brand-primary-border: color-mix(in srgb, var(--brand-primary) 20%, transparent);
+  --brand-secondary: #7c3aed;
+  --brand-secondary-hover: #6d28d9;
+  --brand-secondary-foreground: #ffffff;
+  --brand-secondary-muted: color-mix(in srgb, var(--brand-secondary) 10%, transparent);
+  --brand-secondary-subtle: color-mix(in srgb, var(--brand-secondary) 15%, transparent);
+  --brand-secondary-faint: color-mix(in srgb, var(--brand-secondary) 3%, transparent);
+  --brand-secondary-border: color-mix(in srgb, var(--brand-secondary) 20%, transparent);
+
+  /* Legacy accent / syntax accent */
+  --accent-primary: var(--brand-secondary);
+  --accent-hover: var(--brand-secondary-hover);
+  --accent-muted: var(--brand-secondary-muted);
+  --accent-code: #7c3aed;
+
+  /* Status — solid */
+  --status-success: #16a34a;
+  --status-warning: #d97706;
+  --status-error: #dc2626;
+  --status-info: #2563eb;
+
+  /* Status — muted backgrounds (low-opacity tints) */
+  --status-success-muted: rgba(22, 163, 74, 0.10);
+  --status-warning-muted: rgba(217, 119, 6, 0.10);
+  --status-error-muted: rgba(220, 38, 38, 0.10);
+  --status-info-muted: rgba(37, 99, 235, 0.10);
+
+  /* Status — subtle (slightly stronger tint for borders, badges) */
+  --status-success-subtle: rgba(22, 163, 74, 0.15);
+  --status-warning-subtle: rgba(217, 119, 6, 0.15);
+  --status-error-subtle: rgba(220, 38, 38, 0.15);
+  --status-info-subtle: rgba(37, 99, 235, 0.15);
+
+  /* Status — faint (near-invisible tint for full-area backgrounds) */
+  --status-success-faint: rgba(22, 163, 74, 0.03);
+  --status-warning-faint: rgba(217, 119, 6, 0.03);
+  --status-error-faint: rgba(220, 38, 38, 0.03);
+  --status-info-faint: rgba(37, 99, 235, 0.03);
+
+  /* Status — border (20% opacity for bordered containers) */
+  --status-success-border: rgba(22, 163, 74, 0.20);
+  --status-warning-border: rgba(217, 119, 6, 0.20);
+  --status-error-border: rgba(220, 38, 38, 0.20);
+  --status-info-border: rgba(37, 99, 235, 0.20);
+
+  /* Semantic colours — collaboration / special modes */
+  --collab-primary: #7c3aed;
+  --collab-primary-muted: rgba(124, 58, 237, 0.10);
+  --collab-primary-subtle: rgba(124, 58, 237, 0.15);
+  --collab-primary-border: rgba(124, 58, 237, 0.20);
+
+  /* Semantic colours — voice / recording */
+  --voice-recording: #f43f5e;
+  --voice-recording-muted: rgba(244, 63, 94, 0.20);
+  --voice-processing: #06b6d4;
+  --voice-processing-muted: rgba(6, 182, 212, 0.15);
+
+  /* Semantic colours — indigo accent for notifications/banners */
+  --banner-primary: var(--brand-secondary);
+  --banner-primary-muted: color-mix(in srgb, var(--banner-primary) 10%, transparent);
+  --banner-primary-subtle: color-mix(in srgb, var(--banner-primary) 15%, transparent);
+  --banner-primary-border: color-mix(in srgb, var(--banner-primary) 20%, transparent);
+
+  /* Thinking / reasoning gradients */
+  --gradient-thinking-high: linear-gradient(135deg, rgba(245, 158, 11, 0.20), rgba(239, 68, 68, 0.20));
+  --gradient-thinking-low: linear-gradient(135deg, rgba(99, 102, 241, 0.20), rgba(139, 92, 246, 0.20));
+
+  /* File type icon colours */
+  --file-icon-ts: #3b82f6;
+  --file-icon-js: #eab308;
+  --file-icon-json: #22c55e;
+  --file-icon-css: #6366f1;
+  --file-icon-rust: #f97316;
+  --file-icon-markdown: #6366f1;
+  --file-icon-default: var(--text-muted);
+
+  /* Typography (themeable) */
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace;
+  --font-size-base: 14px;
+
+  /* Spacing */
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 12px;
+  --space-lg: 16px;
+  --space-xl: 24px;
+
+  /* Sero radius (legacy — use Tailwind rounded-* for new components) */
+  --sero-radius-sm: 4px;
+  --sero-radius-md: 8px;
+  --sero-radius-lg: 12px;
+
+  /* Sero font sizes (legacy — use Tailwind text-* for new components) */
+  --sero-text-xs: 12px;
+  --sero-text-sm: 13px;
+  --sero-text-base: 14px;
+  --sero-text-lg: 15px;
+  --sero-text-xl: 16px;
+
+  /* Transition */
+  --transition-fast: 120ms ease;
+  --transition-normal: 200ms ease;
+  --radius: 0.625rem;
+
+  /* ── shadcn bridge ────────────────────────────────────────
+     Derive shadcn/ui tokens from Sero design tokens so every
+     shadcn component (Dialog, Command, Dropdown, Tooltip, …)
+     automatically follows theme changes.
+     NOTE: --accent here is the shadcn "hover/selection bg",
+     NOT a brand colour (use --brand-primary/secondary). */
+  --background: var(--bg-base);
+  --foreground: var(--text-primary);
+  --card: var(--bg-surface);
+  --card-foreground: var(--text-primary);
+  --popover: var(--bg-elevated);
+  --popover-foreground: var(--text-primary);
+  --primary: var(--brand-primary);
+  --primary-foreground: var(--brand-primary-foreground);
+  --secondary: var(--bg-surface);
+  --secondary-foreground: var(--text-primary);
+  --muted: var(--bg-muted);
+  --muted-foreground: var(--text-muted);
+  --accent: var(--bg-overlay);
+  --accent-foreground: var(--text-primary);
+  --destructive: var(--status-error);
+  --border: var(--border-default);
+  --input: var(--border-subtle);
+  --ring: var(--border-focus);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: var(--bg-surface);
+  --sidebar-foreground: var(--text-primary);
+  --sidebar-primary: var(--brand-primary);
+  --sidebar-primary-foreground: var(--brand-primary-foreground);
+  --sidebar-accent: var(--bg-elevated);
+  --sidebar-accent-foreground: var(--text-primary);
+  --sidebar-border: var(--border-subtle);
+  --sidebar-ring: var(--border-focus);
+
+  /* ── Glass (dashboard) ────────────────────────────────────
+     Canonical translucent surface language for the glass
+     dashboard. The host `dashboard.css` derives its `--dash-*`
+     tokens from these, and the `.glass` scope below remaps the
+     component-facing `--surface-*` tokens to them. Light =
+     frosted white; dark values live in the `.dark` block. */
+  --glass-tile: rgba(255, 255, 255, 0.52); /* base tile (host) */
+  --glass-surface: rgba(255, 255, 255, 0.62); /* raised card */
+  --glass-surface-flat: rgba(255, 255, 255, 0.40); /* flat row */
+  --glass-border: rgba(15, 17, 23, 0.10);
+  --glass-rim: rgba(255, 255, 255, 0.60);
+  --glass-hover: rgba(255, 255, 255, 0.72);
+
+  /* Component-facing surface tokens. Default to the solid design
+     tokens so components look unchanged outside the `.glass`
+     scope; the scope flips them to the glass values above. */
+  --surface-raised: var(--bg-surface);
+  --surface-flat: var(--bg-elevated);
+  --surface-line: var(--border-subtle);
+  --surface-rim: transparent;
+}
+
+/* ── Scrollbars ─────────────────────────────────────────────── */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-default);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+/* ── Selection ──────────────────────────────────────────────── */
+::selection {
+  background: var(--accent-muted);
+  color: var(--text-primary);
+}
+
+/* ── Focus ──────────────────────────────────────────────────── */
+/* Scoped to avoid conflicting with shadcn/Radix components which
+   manage their own focus rings via Tailwind ring utilities. */
+:focus-visible:not([data-slot]) {
+  outline: 2px solid var(--border-focus);
+  outline-offset: -2px;
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-brand-primary: var(--brand-primary);
+  --color-brand-primary-foreground: var(--brand-primary-foreground);
+  --color-brand-primary-muted: var(--brand-primary-muted);
+  --color-brand-primary-subtle: var(--brand-primary-subtle);
+  --color-brand-primary-faint: var(--brand-primary-faint);
+  --color-brand-primary-border: var(--brand-primary-border);
+  --color-brand-secondary: var(--brand-secondary);
+  --color-brand-secondary-foreground: var(--brand-secondary-foreground);
+  --color-brand-secondary-muted: var(--brand-secondary-muted);
+  --color-brand-secondary-subtle: var(--brand-secondary-subtle);
+  --color-brand-secondary-faint: var(--brand-secondary-faint);
+  --color-brand-secondary-border: var(--brand-secondary-border);
+  --color-status-success: var(--status-success);
+  --color-status-success-muted: var(--status-success-muted);
+  --color-status-success-subtle: var(--status-success-subtle);
+  --color-status-success-faint: var(--status-success-faint);
+  --color-status-success-border: var(--status-success-border);
+  --color-status-warning: var(--status-warning);
+  --color-status-warning-muted: var(--status-warning-muted);
+  --color-status-warning-subtle: var(--status-warning-subtle);
+  --color-status-warning-faint: var(--status-warning-faint);
+  --color-status-warning-border: var(--status-warning-border);
+  --color-status-error: var(--status-error);
+  --color-status-error-muted: var(--status-error-muted);
+  --color-status-error-subtle: var(--status-error-subtle);
+  --color-status-error-faint: var(--status-error-faint);
+  --color-status-error-border: var(--status-error-border);
+  --color-status-info: var(--status-info);
+  --color-status-info-muted: var(--status-info-muted);
+  --color-status-info-subtle: var(--status-info-subtle);
+  --color-status-info-faint: var(--status-info-faint);
+  --color-status-info-border: var(--status-info-border);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+.dark {
+  /* Surface colors (dark) */
+  --bg-base: #0a0a0b;
+  --bg-surface: #111113;
+  --bg-elevated: #18181b;
+  --bg-overlay: #1f1f23;
+  --bg-muted: #27272a;
+
+  /* Border (dark) */
+  --border-subtle: #27272a;
+  --border-default: #3f3f46;
+  --border-focus: #34d399;
+
+  /* Text (dark) */
+  --text-primary: #fafafa;
+  --text-secondary: #a1a1aa;
+  --text-muted: #71717a;
+  --text-inverse: #09090b;
+
+  /* Brand colours (dark) */
+  --brand-primary: #34d399;
+  --brand-primary-hover: #6ee7b7;
+  --brand-primary-foreground: #052e1c;
+  --brand-primary-muted: color-mix(in srgb, var(--brand-primary) 10%, transparent);
+  --brand-primary-subtle: color-mix(in srgb, var(--brand-primary) 15%, transparent);
+  --brand-primary-faint: color-mix(in srgb, var(--brand-primary) 3%, transparent);
+  --brand-primary-border: color-mix(in srgb, var(--brand-primary) 20%, transparent);
+  --brand-secondary: #c4b5fd;
+  --brand-secondary-hover: #ddd6fe;
+  --brand-secondary-foreground: #1e1038;
+  --brand-secondary-muted: color-mix(in srgb, var(--brand-secondary) 10%, transparent);
+  --brand-secondary-subtle: color-mix(in srgb, var(--brand-secondary) 15%, transparent);
+  --brand-secondary-faint: color-mix(in srgb, var(--brand-secondary) 3%, transparent);
+  --brand-secondary-border: color-mix(in srgb, var(--brand-secondary) 20%, transparent);
+
+  /* Legacy accent / syntax accent (dark) */
+  --accent-primary: var(--brand-secondary);
+  --accent-hover: var(--brand-secondary-hover);
+  --accent-muted: var(--brand-secondary-muted);
+  --accent-code: #c4b5fd;
+
+  /* Status — solid (dark) */
+  --status-success: #22c55e;
+  --status-warning: #f59e0b;
+  --status-error: #ef4444;
+  --status-info: #3b82f6;
+
+  /* Status — muted backgrounds (dark) */
+  --status-success-muted: rgba(34, 197, 94, 0.10);
+  --status-warning-muted: rgba(245, 158, 11, 0.10);
+  --status-error-muted: rgba(239, 68, 68, 0.10);
+  --status-info-muted: rgba(59, 130, 246, 0.10);
+
+  /* Status — subtle (dark) */
+  --status-success-subtle: rgba(34, 197, 94, 0.15);
+  --status-warning-subtle: rgba(245, 158, 11, 0.15);
+  --status-error-subtle: rgba(239, 68, 68, 0.15);
+  --status-info-subtle: rgba(59, 130, 246, 0.15);
+
+  /* Status — faint (dark) */
+  --status-success-faint: rgba(34, 197, 94, 0.03);
+  --status-warning-faint: rgba(245, 158, 11, 0.03);
+  --status-error-faint: rgba(239, 68, 68, 0.03);
+  --status-info-faint: rgba(59, 130, 246, 0.03);
+
+  /* Status — border (dark) */
+  --status-success-border: rgba(34, 197, 94, 0.20);
+  --status-warning-border: rgba(245, 158, 11, 0.20);
+  --status-error-border: rgba(239, 68, 68, 0.20);
+  --status-info-border: rgba(59, 130, 246, 0.20);
+
+  /* Collaboration (dark) */
+  --collab-primary: #a78bfa;
+  --collab-primary-muted: rgba(167, 139, 250, 0.10);
+  --collab-primary-subtle: rgba(167, 139, 250, 0.15);
+  --collab-primary-border: rgba(167, 139, 250, 0.20);
+
+  /* Voice (dark) */
+  --voice-recording: #fb7185;
+  --voice-recording-muted: rgba(251, 113, 133, 0.20);
+  --voice-processing: #22d3ee;
+  --voice-processing-muted: rgba(34, 211, 238, 0.15);
+
+  /* Banner / notifications (dark) */
+  --banner-primary: var(--brand-secondary);
+  --banner-primary-muted: color-mix(in srgb, var(--banner-primary) 10%, transparent);
+  --banner-primary-subtle: color-mix(in srgb, var(--banner-primary) 15%, transparent);
+  --banner-primary-border: color-mix(in srgb, var(--banner-primary) 20%, transparent);
+
+  /* Thinking gradients (dark) */
+  --gradient-thinking-high: linear-gradient(135deg, rgba(245, 158, 11, 0.20), rgba(239, 68, 68, 0.20));
+  --gradient-thinking-low: linear-gradient(135deg, rgba(99, 102, 241, 0.20), rgba(139, 92, 246, 0.20));
+
+  /* File type icons (dark — brighter variants) */
+  --file-icon-ts: #60a5fa;
+  --file-icon-js: #facc15;
+  --file-icon-json: #4ade80;
+  --file-icon-css: #818cf8;
+  --file-icon-rust: #fb923c;
+  --file-icon-markdown: #818cf8;
+
+  /* ── shadcn bridge (identical structure to :root — resolves
+       to dark Sero tokens defined above in this block) ────── */
+  --background: var(--bg-base);
+  --foreground: var(--text-primary);
+  --card: var(--bg-surface);
+  --card-foreground: var(--text-primary);
+  --popover: var(--bg-elevated);
+  --popover-foreground: var(--text-primary);
+  --primary: var(--brand-primary);
+  --primary-foreground: var(--brand-primary-foreground);
+  --secondary: var(--bg-surface);
+  --secondary-foreground: var(--text-primary);
+  --muted: var(--bg-muted);
+  --muted-foreground: var(--text-muted);
+  --accent: var(--bg-overlay);
+  --accent-foreground: var(--text-primary);
+  --destructive: var(--status-error);
+  --border: var(--border-default);
+  --input: var(--border-subtle);
+  --ring: var(--border-focus);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: var(--bg-surface);
+  --sidebar-foreground: var(--text-primary);
+  --sidebar-primary: var(--brand-primary);
+  --sidebar-primary-foreground: var(--brand-primary-foreground);
+  --sidebar-accent: var(--bg-elevated);
+  --sidebar-accent-foreground: var(--text-primary);
+  --sidebar-border: var(--border-subtle);
+  --sidebar-ring: var(--border-focus);
+
+  /* ── Glass (dashboard) — dark: low-opacity white over the dark
+       canvas glow. `--surface-*` defaults stay solid; the `.glass`
+       scope flips them (values shared across themes via the vars). */
+  --glass-tile: rgba(255, 255, 255, 0.06);
+  --glass-surface: rgba(255, 255, 255, 0.09);
+  --glass-surface-flat: rgba(255, 255, 255, 0.05);
+  --glass-border: rgba(255, 255, 255, 0.12);
+  --glass-rim: rgba(255, 255, 255, 0.08);
+  --glass-hover: rgba(255, 255, 255, 0.13);
+}
+
+/* ── Glass scope ─────────────────────────────────────────────────
+   Subtree-local class applied by `WidgetContent` (default on). It
+   remaps the component-facing surface tokens and the container/border
+   shadcn bridge tokens to the translucent glass values, so dashboard
+   components read as part of the frosted tile. Interactive controls
+   (`--input`) and portalled surfaces (`--popover`, rendered at
+   document.body outside this scope) stay solid for legibility. No
+   `backdrop-filter` here — the host tile provides the single blur. */
+.glass {
+  /* component surface tokens */
+  --surface-raised: var(--glass-surface);
+  --surface-flat: var(--glass-surface-flat);
+  --surface-line: var(--glass-border);
+  --surface-rim: var(--glass-rim);
+
+  /* containers + borders for primitives used inside widgets */
+  --card: var(--glass-surface);
+  --secondary: var(--glass-surface-flat);
+  --muted: var(--glass-surface-flat);
+  --accent: var(--glass-surface-flat);
+  --border: var(--glass-border);
+
+  /* keep interactive controls + portalled surfaces solid */
+  --input: var(--border-subtle);
+  --popover: var(--bg-elevated);
+  --ring: var(--border-focus);
+}
+
+html {
+  font-size: var(--font-size-base, 14px);
+  font-family: var(--font-sans);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/dist/styles/plugin.css

@@ -0,0 +1,4 @@
+@import "./globals.css";
+
+/* Federated Sero plugins should import this file, then add plugin-local
+   @source directives. It keeps Tailwind 4 token names aligned with the shell. */

package/package.json

@@ -1,25 +1,67 @@
 {
   "name": "@sero-ai/ui",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Shared UI components, AI elements, and design tokens for the Sero platform",
   "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./*": {
-      "types": "./dist/*.d.ts",
-      "import": "./dist/*.js",
-      "require": "./dist/*.cjs"
+    ".": "./src/index.ts",
+    "./dashboard-catalog": "./src/dashboard-catalog.ts",
+    "./reference": "./src/reference.ts",
+    "./theme": "./src/theme/index.ts",
+    "./theme/*": "./src/theme/*",
+    "./styles/*": "./src/styles/*",
+    "./package.json": "./package.json",
+    "./*": "./src/*"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "publishConfig": {
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js",
+        "require": "./dist/index.cjs"
+      },
+      "./dashboard-catalog": {
+        "types": "./dist/dashboard-catalog.d.ts",
+        "import": "./dist/dashboard-catalog.js",
+        "require": "./dist/dashboard-catalog.cjs"
+      },
+      "./reference": {
+        "types": "./dist/reference.d.ts",
+        "import": "./dist/reference.js",
+        "require": "./dist/reference.cjs"
+      },
+      "./theme": {
+        "types": "./dist/theme/index.d.ts",
+        "import": "./dist/theme/index.js",
+        "require": "./dist/theme/index.cjs"
+      },
+      "./theme/*": {
+        "types": "./dist/theme/*.d.ts",
+        "import": "./dist/theme/*.js",
+        "require": "./dist/theme/*.cjs"
+      },
+      "./styles/*": "./dist/styles/*",
+      "./package.json": "./package.json",
+      "./*": {
+        "types": "./dist/*.d.ts",
+        "import": "./dist/*.js",
+        "require": "./dist/*.cjs"
+      }
     }
   },
   "peerDependencies": {
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "react": "catalog:peer",
+    "react-dom": "catalog:peer"
   },
   "dependencies": {
     "@base-ui/react": "^1.3.0",
@@ -28,6 +70,7 @@
     "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@remixicon/react": "^4.9.0",
     "@rive-app/react-webgl2": "^4.27.1",
+    "@sero-ai/common": "workspace:*",
     "@streamdown/cjk": "^1.0.2",
     "@streamdown/code": "^1.1.0",
     "@streamdown/math": "^1.0.2",
@@ -41,9 +84,9 @@
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.563.0",
+    "lucide-react": "catalog:",
     "media-chrome": "^4.18.0",
-    "motion": "^12.34.0",
+    "motion": "catalog:",
     "nanoid": "^5.1.11",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
@@ -55,27 +98,25 @@
     "recharts": "2.15.4",
     "shiki": "^3.23.0",
     "sonner": "^2.0.7",
-    "streamdown": "^2.5.0",
+    "streamdown": "catalog:",
     "tailwind-merge": "^3.5.0",
     "tokenlens": "^1.3.1",
     "use-stick-to-bottom": "^1.1.4",
-    "vaul": "^1.1.2",
-    "@sero-ai/common": "0.3.1"
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@hookform/resolvers": "^5.2.2",
-    "@types/react": "^19.2.13",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "jsdom": "^26.1.0",
+    "react": "catalog:peer",
+    "react-dom": "catalog:peer",
     "shadcn": "^3.8.5",
-    "tailwindcss": "4.1.18",
+    "tailwindcss": "catalog:",
     "tsup": "^8.5.1",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5.9.3"
-  },
-  "scripts": {
-    "build": "tsup",
-    "typecheck": "tsc --noEmit"
-  },
-  "module": "./dist/index.js"
-}
+    "typescript": "catalog:",
+    "vitest": "catalog:"
+  }
+}