@sero-ai/ui 0.1.0

package/src/components/ui/tree.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+import type { ItemInstance } from "@headless-tree/core";
+import { ChevronDownIcon } from "lucide-react";
+import { Slot } from "radix-ui";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+interface TreeContextValue<T = any> {
+  indent: number;
+  currentItem?: ItemInstance<T>;
+  tree?: any;
+}
+
+const TreeContext = React.createContext<TreeContextValue>({
+  currentItem: undefined,
+  indent: 20,
+  tree: undefined,
+});
+
+function useTreeContext<T = any>() {
+  return React.useContext(TreeContext) as TreeContextValue<T>;
+}
+
+interface TreeProps extends React.HTMLAttributes<HTMLDivElement> {
+  indent?: number;
+  tree?: any;
+}
+
+function Tree({ indent = 20, tree, className, ...props }: TreeProps) {
+  const containerProps =
+    tree && typeof tree.getContainerProps === "function"
+      ? tree.getContainerProps()
+      : {};
+  const mergedProps = { ...props, ...containerProps };
+  const { style: propStyle, ...otherProps } = mergedProps;
+
+  const mergedStyle = {
+    ...propStyle,
+    "--tree-indent": `${indent}px`,
+  } as React.CSSProperties;
+
+  return (
+    <TreeContext.Provider value={{ indent, tree }}>
+      <div
+        className={cn("flex flex-col", className)}
+        data-slot="tree"
+        style={mergedStyle}
+        {...otherProps}
+      />
+    </TreeContext.Provider>
+  );
+}
+
+interface TreeItemProps<T = any>
+  extends React.HTMLAttributes<HTMLButtonElement> {
+  item: ItemInstance<T>;
+  indent?: number;
+  asChild?: boolean;
+}
+
+/**
+ * TreeItem — full-width row button.
+ *
+ * The row carries hover / selected / drag-target backgrounds so the
+ * highlight spans edge-to-edge (VSCode-style). Indentation is applied
+ * via `paddingInlineStart` so the background is unaffected.
+ */
+function TreeItem<T = any>({
+  item,
+  className,
+  asChild,
+  children,
+  ...props
+}: Omit<TreeItemProps<T>, "indent">) {
+  const { indent } = useTreeContext<T>();
+
+  const itemProps = typeof item.getProps === "function" ? item.getProps() : {};
+  const mergedProps = { ...props, ...itemProps };
+  const { style: propStyle, ...otherProps } = mergedProps;
+
+  const treePadding = item.getItemMeta().level * indent;
+  const mergedStyle = {
+    ...propStyle,
+    "--tree-padding": `${treePadding}px`,
+    paddingInlineStart: `${treePadding}px`,
+  } as React.CSSProperties;
+
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <TreeContext.Provider value={{ currentItem: item, indent }}>
+      <Comp
+        aria-expanded={item.isExpanded()}
+        className={cn(
+          "z-10 w-full select-none ps-(--tree-padding) outline-hidden",
+          "transition-colors",
+          "focus:z-20 data-disabled:pointer-events-none data-disabled:opacity-50",
+          className,
+        )}
+        data-drag-target={
+          typeof item.isDragTarget === "function"
+            ? item.isDragTarget() || false
+            : undefined
+        }
+        data-focus={
+          typeof item.isFocused === "function"
+            ? item.isFocused() || false
+            : undefined
+        }
+        data-folder={
+          typeof item.isFolder === "function"
+            ? item.isFolder() || false
+            : undefined
+        }
+        data-search-match={
+          typeof item.isMatchingSearch === "function"
+            ? item.isMatchingSearch() || false
+            : undefined
+        }
+        data-selected={
+          typeof item.isSelected === "function"
+            ? item.isSelected() || false
+            : undefined
+        }
+        data-slot="tree-item"
+        style={mergedStyle}
+        {...otherProps}
+      >
+        {children}
+      </Comp>
+    </TreeContext.Provider>
+  );
+}
+
+interface TreeItemLabelProps<T = any>
+  extends React.HTMLAttributes<HTMLSpanElement> {
+  item?: ItemInstance<T>;
+}
+
+/**
+ * TreeItemLabel — content wrapper inside a TreeItem.
+ *
+ * Layout-only (chevron + children). Background lives on the parent
+ * TreeItem so it spans the full row width.
+ */
+function TreeItemLabel<T = any>({
+  item: propItem,
+  children,
+  className,
+  ...props
+}: TreeItemLabelProps<T>) {
+  const { currentItem } = useTreeContext<T>();
+  const item = propItem || currentItem;
+
+  if (!item) {
+    console.warn("TreeItemLabel: No item provided via props or context");
+    return null;
+  }
+
+  return (
+    <span
+      className={cn(
+        "flex min-w-0 items-center gap-1 px-2 py-1",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      data-slot="tree-item-label"
+      {...props}
+    >
+      {item.isFolder() && (
+        <ChevronDownIcon className="in-aria-[expanded=false]:-rotate-90 size-4 shrink-0 text-muted-foreground" />
+      )}
+      {children ||
+        (typeof item.getItemName === "function" ? item.getItemName() : null)}
+    </span>
+  );
+}
+
+function TreeDragLine({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const { tree } = useTreeContext();
+
+  if (!tree || typeof tree.getDragLineStyle !== "function") {
+    console.warn(
+      "TreeDragLine: No tree provided via context or tree does not have getDragLineStyle method",
+    );
+    return null;
+  }
+
+  const dragLine = tree.getDragLineStyle();
+  return (
+    <div
+      className={cn(
+        "-mt-px before:-top-[3px] absolute z-30 h-0.5 w-[unset] bg-primary before:absolute before:left-0 before:size-2 before:rounded-full before:border-2 before:border-primary before:bg-background",
+        className,
+      )}
+      style={dragLine}
+      {...props}
+    />
+  );
+}
+
+export { Tree, TreeItem, TreeItemLabel, TreeDragLine };

package/src/hooks/use-mobile.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => setIsMobile(mql.matches);
+    mql.addEventListener('change', onChange);
+    setIsMobile(mql.matches);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return isMobile;
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+// @sero-ai/ui — Shared UI components, AI elements, and utilities
+//
+// Consumers can import from subpaths for tree-shakeable access:
+//   import { Button } from "@sero-ai/ui/components/ui/button"
+//   import { Message } from "@sero-ai/ui/components/ai-elements/message"
+//   import { cn } from "@sero-ai/ui/lib/utils"
+//   import { useIsMobile } from "@sero-ai/ui/hooks/use-mobile"
+//
+// Or import the barrel export:
+//   import { cn, useIsMobile } from "@sero-ai/ui"
+
+// ── Utilities ──
+export { cn } from "./lib/utils";
+
+// ── Hooks ──
+export { useIsMobile } from "./hooks/use-mobile";

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/styles/globals.css

@@ -0,0 +1,373 @@
+@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: #6366f1;
+
+  /* Text (light) */
+  --text-primary: #0f1117;
+  --text-secondary: #3b4252;
+  --text-muted: #6b7280;
+  --text-inverse: #fafafa;
+
+  /* Accent (indigo) — brand accent colour used by Sero components */
+  --accent-primary: #6366f1;
+  --accent-hover: #818cf8;
+  --accent-muted: #6366f11a;
+  --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: #6366f1;
+  --banner-primary-muted: rgba(99, 102, 241, 0.10);
+  --banner-primary-subtle: rgba(99, 102, 241, 0.15);
+  --banner-primary-border: rgba(99, 102, 241, 0.20);
+
+  /* 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 the brand accent colour (that's --accent-primary). */
+  --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(--text-primary);
+  --primary-foreground: var(--text-inverse);
+  --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(--accent-primary);
+  --sidebar-primary-foreground: var(--text-inverse);
+  --sidebar-accent: var(--bg-elevated);
+  --sidebar-accent-foreground: var(--text-primary);
+  --sidebar-border: var(--border-subtle);
+  --sidebar-ring: var(--border-focus);
+}
+
+/* ── 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-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;
+
+  /* Text (dark) */
+  --text-primary: #fafafa;
+  --text-secondary: #a1a1aa;
+  --text-muted: #71717a;
+  --text-inverse: #09090b;
+
+  /* Accent (dark) */
+  --accent-primary: #818cf8;
+  --accent-hover: #a5b4fc;
+  --accent-muted: #6366f133;
+  --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: #818cf8;
+  --banner-primary-muted: rgba(129, 140, 248, 0.10);
+  --banner-primary-subtle: rgba(129, 140, 248, 0.15);
+  --banner-primary-border: rgba(129, 140, 248, 0.20);
+
+  /* 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(--text-primary);
+  --primary-foreground: var(--text-inverse);
+  --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(--accent-primary);
+  --sidebar-primary-foreground: var(--text-inverse);
+  --sidebar-accent: var(--bg-elevated);
+  --sidebar-accent-foreground: var(--text-primary);
+  --sidebar-border: var(--border-subtle);
+  --sidebar-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/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}