canopy-ui 0.2.0

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "canopy-ui",
+  "version": "0.2.0",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./lib": "./src/lib/index.ts",
+    "./ui": "./src/ui/index.ts",
+    "./shell": "./src/shell/index.ts",
+    "./tokens": "./src/tokens/index.ts",
+    "./tokens/preset.css": "./src/tokens/preset.css",
+    "./tokens/tokens.css": "./src/tokens/tokens.css"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@base-ui/react": "^1.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.5.0"
+  },
+  "files": ["src"]
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+// The full canopy-ui surface, re-exported from the subpath modules.
+// Prefer the subpath imports (canopy-ui/ui, /shell, /lib) in app code;
+// this barrel keeps the convenience top-level entry working.
+export * from './lib'
+export * from './shell'
+export * from './ui'

package/src/lib/cn.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from 'vitest'
+import { cn } from './cn'
+
+describe('cn', () => {
+  it('merges conditional classes', () => {
+    expect(cn('a', false && 'b', 'c')).toBe('a c')
+  })
+  it('lets later tailwind classes win', () => {
+    expect(cn('px-2', 'px-4')).toBe('px-4')
+  })
+})

package/src/lib/cn.ts

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

package/src/lib/index.ts

@@ -0,0 +1 @@
+export { cn } from './cn'

package/src/shell/WorkbenchMain.tsx

@@ -0,0 +1,17 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react'
+import { cn } from '../lib/cn'
+
+/**
+ * The scrolling main column. Forwards a ref and arbitrary <main> props so a
+ * surface can mark it as a scroll-spy root (e.g. data-ddd-scroll).
+ */
+export const WorkbenchMain = forwardRef<
+  HTMLElement,
+  ComponentPropsWithoutRef<'main'> & { children: ReactNode }
+>(function WorkbenchMain({ children, className, ...rest }, ref) {
+  return (
+    <main ref={ref} className={cn('min-h-0 min-w-0 flex-1 overflow-y-auto', className)} {...rest}>
+      {children}
+    </main>
+  )
+})

package/src/shell/WorkbenchNavItem.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+import { workbenchNavItemClass } from './WorkbenchNavItem'
+
+describe('workbenchNavItemClass', () => {
+  it('uses the orange-tinted active treatment when active', () => {
+    const c = workbenchNavItemClass({ active: true })
+    expect(c).toContain('bg-primary/10')
+    expect(c).toContain('border-primary/30')
+    expect(c).toContain('text-primary')
+  })
+  it('uses the muted resting treatment when inactive', () => {
+    const c = workbenchNavItemClass({ active: false })
+    expect(c).toContain('text-muted-foreground')
+    expect(c).toContain('hover:bg-accent')
+    expect(c).not.toContain('bg-primary/10')
+  })
+  it('uses the neutral grey highlight when variant is neutral and active', () => {
+    const c = workbenchNavItemClass({ active: true, variant: 'neutral' })
+    expect(c).toContain('bg-accent')
+    expect(c).toContain('text-foreground')
+    expect(c).not.toContain('bg-primary/10')
+  })
+  it('defaults to the accent variant', () => {
+    expect(workbenchNavItemClass({ active: true })).toBe(
+      workbenchNavItemClass({ active: true, variant: 'accent' }),
+    )
+  })
+})

package/src/shell/WorkbenchNavItem.tsx

@@ -0,0 +1,72 @@
+import { cloneElement, isValidElement, type JSX, type ReactElement, type ReactNode } from 'react'
+import { cn } from '../lib/cn'
+
+export function workbenchNavItemClass({
+  active,
+  variant = 'accent',
+}: {
+  active?: boolean
+  variant?: 'accent' | 'neutral'
+}): string {
+  const activeClass =
+    variant === 'neutral'
+      ? 'bg-accent border-transparent text-foreground font-medium'
+      : 'bg-primary/10 border-primary/30 text-primary font-medium'
+  return cn(
+    'flex items-center justify-between gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors',
+    active
+      ? activeClass
+      : 'border-transparent text-muted-foreground hover:bg-accent hover:text-foreground',
+  )
+}
+
+interface WorkbenchNavItemProps {
+  active?: boolean
+  /** Active-state accent: 'accent' = orange primary tint (default), 'neutral' = grey highlight. */
+  variant?: 'accent' | 'neutral'
+  count?: number
+  /** When true, merge styling onto the single child element (e.g. a router Link). */
+  asChild?: boolean
+  children: ReactNode
+}
+
+/**
+ * One rail entry: label + optional right-aligned count badge + active state.
+ *
+ * Default form: renders a presentational <div>; the caller wraps it in their own
+ * Link/NavLink. asChild form: clones the single child, merges styling onto it,
+ * and uses the child's own text as the label (router-agnostic; no radix dep).
+ */
+export function WorkbenchNavItem({
+  active,
+  variant,
+  count,
+  asChild,
+  children,
+}: WorkbenchNavItemProps): JSX.Element {
+  const className = workbenchNavItemClass({ active, variant })
+  const badge =
+    count !== undefined ? (
+      <span className="shrink-0 text-[11px] text-muted-foreground">{count}</span>
+    ) : null
+
+  // asChild requires a single valid element; a non-element child falls back to the div form.
+  if (asChild && isValidElement(children)) {
+    const el = children as ReactElement<{ className?: string; children?: ReactNode }>
+    return cloneElement(
+      el,
+      { className: cn(className, el.props.className) },
+      <>
+        <span className="truncate">{el.props.children}</span>
+        {badge}
+      </>,
+    )
+  }
+
+  return (
+    <div className={className}>
+      <span className="truncate">{children}</span>
+      {badge}
+    </div>
+  )
+}

package/src/shell/WorkbenchPane.tsx

@@ -0,0 +1,29 @@
+import type { JSX, ReactNode } from 'react'
+import { cn } from '../lib/cn'
+
+/** Shipped for the deferred ace-web adoption; not yet consumed in canopy. */
+/** A generic bordered side panel (e.g. a detail or chat column). */
+export function WorkbenchPane({
+  width,
+  side = 'left',
+  children,
+  className,
+}: {
+  width?: string
+  side?: 'left' | 'right'
+  children: ReactNode
+  className?: string
+}): JSX.Element {
+  return (
+    <section
+      className={cn(
+        'shrink-0 bg-background',
+        side === 'right' ? 'border-l border-border' : 'border-r border-border',
+        width,
+        className,
+      )}
+    >
+      {children}
+    </section>
+  )
+}

package/src/shell/WorkbenchRail.tsx

@@ -0,0 +1,37 @@
+import type { JSX, ReactNode } from 'react'
+import { cn } from '../lib/cn'
+
+/**
+ * The bordered left rail chrome. Header slot (identity / title / filters) over a
+ * scrollable body that takes arbitrary children (a tree or a flat list).
+ */
+export function WorkbenchRail({
+  // `width` must be a md-prefixed Tailwind width (e.g. `md:w-64`): on phones the
+  // rail spans full width and stacks above the main column, so the width only
+  // applies once the layout goes side-by-side at md+.
+  width = 'md:w-64',
+  header,
+  children,
+  className,
+}: {
+  width?: string
+  header?: ReactNode
+  children: ReactNode
+  className?: string
+}): JSX.Element {
+  return (
+    <aside
+      className={cn(
+        'flex shrink-0 flex-col bg-background',
+        // Phone: full-width strip with a capped height so the main column below
+        // stays reachable. Desktop: fixed-width left rail with a right border.
+        'w-full max-h-[42vh] border-b border-border md:max-h-none md:border-b-0 md:border-r',
+        width,
+        className,
+      )}
+    >
+      {header && <div className="border-b border-border">{header}</div>}
+      <div className="flex-1 overflow-y-auto">{children}</div>
+    </aside>
+  )
+}

package/src/shell/WorkbenchShell.tsx

@@ -0,0 +1,26 @@
+import type { JSX, ReactNode } from 'react'
+import { cn } from '../lib/cn'
+
+/**
+ * Full-bleed outer scaffold: optional top header over a body row. The caller
+ * composes the body (rail + main + optional side panes) as children, and may
+ * wrap <WorkbenchShell> in its own provider (e.g. for scroll-spy).
+ */
+export function WorkbenchShell({
+  header,
+  children,
+  className,
+}: {
+  header?: ReactNode
+  children: ReactNode
+  className?: string
+}): JSX.Element {
+  return (
+    <div className={cn('flex h-full flex-col bg-background text-foreground', className)}>
+      {header}
+      {/* Rail + main sit side-by-side on desktop; on phones they stack so the
+          main column gets full width instead of being crushed by the rail. */}
+      <div className="flex flex-1 flex-col overflow-hidden md:flex-row">{children}</div>
+    </div>
+  )
+}

package/src/shell/WorkbenchSubHeader.tsx

@@ -0,0 +1,24 @@
+import type { JSX, ReactNode } from 'react'
+
+/** The per-section bar inside the main area: title + count + right action. */
+export function WorkbenchSubHeader({
+  title,
+  count,
+  action,
+}: {
+  title: string
+  count?: number
+  action?: ReactNode
+}): JSX.Element {
+  return (
+    <div className="mb-6 flex items-center justify-between gap-3 border-b border-border pb-4">
+      <div className="flex min-w-0 items-baseline gap-2">
+        <h1 className="text-base font-semibold text-foreground">{title}</h1>
+        {count !== undefined && (
+          <span className="text-[12px] text-muted-foreground">{count}</span>
+        )}
+      </div>
+      {action && <div className="shrink-0">{action}</div>}
+    </div>
+  )
+}

package/src/shell/index.ts

@@ -0,0 +1,9 @@
+export { WorkbenchShell } from './WorkbenchShell'
+export { WorkbenchMain } from './WorkbenchMain'
+export { WorkbenchRail } from './WorkbenchRail'
+export { WorkbenchPane } from './WorkbenchPane'
+export { WorkbenchNavItem, workbenchNavItemClass } from './WorkbenchNavItem'
+export { WorkbenchSubHeader } from './WorkbenchSubHeader'
+export { LoadingSpinner, EmptyState, ErrorState, WorkbenchSkeleton } from './states'
+export { usePaneWidth } from './usePaneWidth'
+export { usePaneCollapsed } from './usePaneCollapsed'

package/src/shell/states.tsx

@@ -0,0 +1,69 @@
+import type { JSX, ReactNode } from 'react'
+
+/** LoadingSpinner/EmptyState/ErrorState are shipped for consumers (e.g. deferred ace-web); WorkbenchSkeleton is used by the Agent sections today. */
+export function LoadingSpinner({ label = 'Loading…' }: { label?: string }): JSX.Element {
+  return (
+    <div className="flex items-center gap-3 p-6 text-muted-foreground">
+      <div className="h-4 w-4 animate-spin rounded-full border-2 border-muted-foreground/30 border-t-muted-foreground" />
+      <span>{label}</span>
+    </div>
+  )
+}
+
+export function EmptyState({
+  title,
+  description,
+  action,
+}: {
+  title: string
+  description?: string
+  action?: ReactNode
+}): JSX.Element {
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 p-12 text-center">
+      <h3 className="text-lg font-semibold text-muted-foreground">{title}</h3>
+      {description && <p className="text-sm text-muted-foreground">{description}</p>}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  )
+}
+
+export function ErrorState({
+  title = 'Something went wrong',
+  message,
+  onRetry,
+}: {
+  title?: string
+  message: string
+  onRetry?: () => void
+}): JSX.Element {
+  return (
+    <div className="rounded border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
+      <div className="font-semibold">{title}</div>
+      <div className="mt-1">{message}</div>
+      {onRetry && (
+        <button
+          type="button"
+          onClick={onRetry}
+          className="mt-3 rounded bg-destructive px-3 py-1 text-destructive-foreground hover:bg-destructive/90"
+        >
+          Retry
+        </button>
+      )}
+    </div>
+  )
+}
+
+/** Pulsing card placeholders while a section lazy-loads its data. */
+export function WorkbenchSkeleton({ rows = 3 }: { rows?: number }): JSX.Element {
+  return (
+    <div className="animate-pulse space-y-3">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="rounded-xl border border-border bg-card p-5">
+          <div className="mb-2 h-4 w-2/3 rounded bg-muted" />
+          <div className="h-3 w-full rounded bg-muted/70" />
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/shell/usePaneCollapsed.ts

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * localStorage-persisted collapse state for a workbench pane, keyed per
+ * pane so multiple rails on one page don't collide. Generalized from
+ * hooks/useChatPaneCollapsed.ts. Falls back to per-tab state when storage
+ * is unavailable (private mode).
+ */
+export function usePaneCollapsed(
+  storageKey: string,
+  defaultCollapsed = false,
+): { collapsed: boolean; toggle: () => void; setCollapsed: (v: boolean) => void } {
+  const [collapsed, setCollapsed] = useState<boolean>(() => {
+    if (typeof window === "undefined") return defaultCollapsed;
+    try {
+      const raw = window.localStorage.getItem(storageKey);
+      if (raw === null) return defaultCollapsed;
+      return raw === "1";
+    } catch {
+      return defaultCollapsed;
+    }
+  });
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(storageKey, collapsed ? "1" : "0");
+    } catch {
+      // storage disabled — preference is per-tab only
+    }
+  }, [storageKey, collapsed]);
+
+  const toggle = useCallback(() => setCollapsed((c) => !c), []);
+
+  return { collapsed, toggle, setCollapsed };
+}

package/src/shell/usePaneWidth.ts

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * localStorage-persisted width (px) for a resizable workbench rail, keyed
+ * per pane. Pair with WorkbenchRail's `resizable` + `onResize` to make a
+ * rail drag-to-resize. Falls back to per-tab state when storage is
+ * unavailable (private mode).
+ */
+export function usePaneWidth(
+  storageKey: string,
+  defaultWidth: number,
+): { width: number; setWidth: (w: number) => void } {
+  const [width, setWidthState] = useState<number>(() => {
+    if (typeof window === "undefined") return defaultWidth;
+    try {
+      const raw = window.localStorage.getItem(storageKey);
+      const n = raw == null ? NaN : Number(raw);
+      return Number.isFinite(n) && n > 0 ? n : defaultWidth;
+    } catch {
+      return defaultWidth;
+    }
+  });
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(storageKey, String(Math.round(width)));
+    } catch {
+      // storage disabled — width is per-tab only
+    }
+  }, [storageKey, width]);
+
+  const setWidth = useCallback((w: number) => setWidthState(w), []);
+
+  return { width, setWidth };
+}

package/src/tokens/index.ts

@@ -0,0 +1,44 @@
+/**
+ * canopy-ui/tokens — the shared token contract.
+ *
+ * The substance of the token system is CSS, imported directly:
+ *   import "canopy-ui/tokens/preset.css"   // Tailwind v4 @theme name → var mapping
+ *   import "canopy-ui/tokens/tokens.css"    // default :root / .dark VALUES
+ *
+ * This module exposes the canonical list of token names so tooling/tests can
+ * assert an app's palette covers the contract.
+ */
+export const TOKEN_NAMES = [
+  'background',
+  'foreground',
+  'card',
+  'card-foreground',
+  'popover',
+  'popover-foreground',
+  'primary',
+  'primary-foreground',
+  'secondary',
+  'secondary-foreground',
+  'accent',
+  'accent-foreground',
+  'muted',
+  'muted-foreground',
+  'foreground-secondary',
+  'foreground-subtle',
+  'border',
+  'input',
+  'ring',
+  'destructive',
+  'destructive-foreground',
+  'success',
+  'success-foreground',
+  'warning',
+  'warning-foreground',
+  'info',
+  'info-foreground',
+  'special',
+  'special-foreground',
+  'radius',
+] as const
+
+export type TokenName = (typeof TOKEN_NAMES)[number]

package/src/tokens/preset.css

@@ -0,0 +1,84 @@
+/**
+ * canopy-ui — Tailwind v4 token PRESET.
+ *
+ * This is the shared CONTRACT: it maps Tailwind color/radius utilities
+ * (`bg-primary`, `text-muted-foreground`, `border-border`, `rounded-lg`, …)
+ * onto a fixed set of CSS-variable NAMES (`--primary`, `--muted-foreground`,
+ * `--border`, `--radius`, …). Every app that builds on the workbench imports
+ * this preset so its primitives (Button, Badge, Table, …) resolve to the same
+ * utility names. The preset owns the NAMES; each app owns the VALUES (palette),
+ * which it sets on `:root` / `.dark` in its own globals (see tokens.css for the
+ * default values, which an app may import then override).
+ *
+ * Usage (in an app's index.css, after `@import "tailwindcss";`):
+ *   @import "canopy-ui/tokens/preset.css";
+ *   @import "canopy-ui/tokens/tokens.css";   // optional defaults
+ *   :root { --primary: <app palette>; ... }           // override values
+ */
+@theme inline {
+    /* Surfaces & text */
+    --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);
+
+    /* Brand / interactive */
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+
+    /* Muted + extended neutral text scale (brightest → dimmest):
+       foreground > foreground-secondary > muted-foreground > foreground-subtle */
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-foreground-secondary: var(--foreground-secondary);
+    --color-foreground-subtle: var(--foreground-subtle);
+
+    /* Lines & focus */
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+
+    /* Destructive + status / categorical accents (badges, chips, status states) */
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-success: var(--success);
+    --color-success-foreground: var(--success-foreground);
+    --color-warning: var(--warning);
+    --color-warning-foreground: var(--warning-foreground);
+    --color-info: var(--info);
+    --color-info-foreground: var(--info-foreground);
+    --color-special: var(--special);
+    --color-special-foreground: var(--special-foreground);
+
+    /* Charts */
+    --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);
+
+    /* Sidebar */
+    --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);
+
+    /* Radius scale — derived from the single --radius value the app sets. */
+    --radius-sm: calc(var(--radius) * 0.6);
+    --radius-md: calc(var(--radius) * 0.8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.4);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --radius-3xl: calc(var(--radius) * 2.2);
+    --radius-4xl: calc(var(--radius) * 2.6);
+}

package/src/tokens/tokens.css

@@ -0,0 +1,105 @@
+/**
+ * canopy-ui — DEFAULT token VALUES (the palette baseline).
+ *
+ * These are the default values for the CSS-variable names declared by the
+ * preset (preset.css). They are a complete, working "Warm Earth" palette so a
+ * consuming app renders correctly out of the box. Each app is expected to
+ * OVERRIDE these in its own globals (define `:root` / `.dark` AFTER importing
+ * this file); identical var names mean only the values shift per app.
+ *
+ * The app defaults to `.dark` (apps apply the `.dark` class pre-render); the
+ * `:root` light set is the opt-in companion. App-specific concerns (font face,
+ * custom animations) are NOT defined here — they live in each app's globals.
+ */
+:root {
+    /* Warm Earth LIGHT — the opt-in companion. */
+    --background: oklch(0.985 0.002 106.42);     /* warm off-white (~stone-50) */
+    --foreground: oklch(0.216 0.006 56.04);      /* ~stone-900 */
+    --card: oklch(1 0 0);                          /* white */
+    --card-foreground: oklch(0.216 0.006 56.04);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.216 0.006 56.04);
+    --primary: oklch(0.646 0.222 41.12);          /* ~orange-600 (readable on white) */
+    --primary-foreground: oklch(1 0 0);
+    --secondary: oklch(0.970 0.001 106.42);       /* ~stone-100 */
+    --secondary-foreground: oklch(0.216 0.006 56.04);
+    --muted: oklch(0.970 0.001 106.42);           /* ~stone-100 */
+    --muted-foreground: oklch(0.553 0.013 58.07); /* ~stone-500 */
+    --foreground-secondary: oklch(0.374 0.01 67.56); /* ~stone-700 — secondary text */
+    --foreground-subtle: oklch(0.709 0.01 56.26);    /* ~stone-400 — faint text */
+    --accent: oklch(0.970 0.001 106.42);
+    --accent-foreground: oklch(0.216 0.006 56.04);
+    --destructive: oklch(0.577 0.245 27.325);     /* ~red-600 */
+    --destructive-foreground: oklch(1 0 0);
+    --success: oklch(0.596 0.145 163.22);         /* ~emerald-600 */
+    --success-foreground: oklch(1 0 0);
+    --warning: oklch(0.666 0.179 58.32);          /* ~amber-600 */
+    --warning-foreground: oklch(1 0 0);
+    --info: oklch(0.588 0.158 241.97);            /* ~sky-600 */
+    --info-foreground: oklch(1 0 0);
+    --special: oklch(0.541 0.281 293.0);          /* ~violet-600 */
+    --special-foreground: oklch(1 0 0);
+    --border: oklch(0.869 0.005 56.37);           /* ~stone-200 */
+    --input: oklch(0.869 0.005 56.37);            /* ~stone-200 */
+    --ring: oklch(0.646 0.222 41.12 / 0.4);       /* orange-600/40 */
+    --chart-1: oklch(0.646 0.222 41.12);
+    --chart-2: oklch(0.553 0.013 58.07);
+    --chart-3: oklch(0.709 0.01 56.26);
+    --chart-4: oklch(0.809 0.005 56.0);
+    --chart-5: oklch(0.869 0.005 56.37);
+    --radius: 0.625rem;                            /* theme-agnostic; inherited by .dark */
+    --sidebar: oklch(0.985 0.002 106.42);
+    --sidebar-foreground: oklch(0.216 0.006 56.04);
+    --sidebar-primary: oklch(0.646 0.222 41.12);
+    --sidebar-primary-foreground: oklch(1 0 0);
+    --sidebar-accent: oklch(0.970 0.001 106.42);
+    --sidebar-accent-foreground: oklch(0.216 0.006 56.04);
+    --sidebar-border: oklch(0.869 0.005 56.37);
+    --sidebar-ring: oklch(0.646 0.222 41.12 / 0.4);
+}
+
+.dark {
+    /* Warm Earth DARK — the default. */
+    --background: oklch(0.147 0.004 49.25);      /* ~stone-950 */
+    --foreground: oklch(0.923 0.003 48.72);      /* ~stone-100 */
+    --card: oklch(0.216 0.006 56.04);            /* ~stone-900 */
+    --card-foreground: oklch(0.923 0.003 48.72);
+    --popover: oklch(0.216 0.006 56.04);
+    --popover-foreground: oklch(0.923 0.003 48.72);
+    --primary: oklch(0.757 0.161 53.57);         /* orange-400 */
+    --primary-foreground: oklch(0.147 0.004 49.25);
+    --secondary: oklch(0.268 0.007 34.3);        /* ~stone-800 */
+    --secondary-foreground: oklch(0.923 0.003 48.72);
+    --muted: oklch(0.268 0.007 34.3);            /* ~stone-800 */
+    --muted-foreground: oklch(0.553 0.013 58.07);/* ~stone-500 */
+    --foreground-secondary: oklch(0.809 0.005 56.0); /* ~stone-300 — secondary text */
+    --foreground-subtle: oklch(0.374 0.01 67.56);    /* ~stone-700 — faint text */
+    --accent: oklch(0.268 0.007 34.3);
+    --accent-foreground: oklch(0.923 0.003 48.72);
+    --destructive: oklch(0.704 0.191 22.216);    /* ~red-500 — errors / destructive */
+    --destructive-foreground: oklch(0.985 0 0);
+    --success: oklch(0.765 0.177 163.22);        /* ~emerald-400 — success / opportunity */
+    --success-foreground: oklch(0.147 0.004 49.25);
+    --warning: oklch(0.828 0.189 84.43);         /* ~amber-400 — warning / ship-gap */
+    --warning-foreground: oklch(0.147 0.004 49.25);
+    --info: oklch(0.746 0.16 232.66);            /* ~sky-400 — info / alignment */
+    --info-foreground: oklch(0.147 0.004 49.25);
+    --special: oklch(0.606 0.25 292.72);         /* ~violet-400 — pattern / highlight */
+    --special-foreground: oklch(0.985 0 0);
+    --border: oklch(0.268 0.007 34.3);           /* ~stone-800 */
+    --input: oklch(0.374 0.01 67.56);            /* ~stone-700 */
+    --ring: oklch(0.757 0.161 53.57 / 0.4);      /* orange-400/40 */
+    --chart-1: oklch(0.757 0.161 53.57);
+    --chart-2: oklch(0.553 0.013 58.07);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --sidebar: oklch(0.147 0.004 49.25);
+    --sidebar-foreground: oklch(0.923 0.003 48.72);
+    --sidebar-primary: oklch(0.757 0.161 53.57);
+    --sidebar-primary-foreground: oklch(0.147 0.004 49.25);
+    --sidebar-accent: oklch(0.216 0.006 56.04);
+    --sidebar-accent-foreground: oklch(0.923 0.003 48.72);
+    --sidebar-border: oklch(0.268 0.007 34.3);
+    --sidebar-ring: oklch(0.757 0.161 53.57 / 0.4);
+}

package/src/ui/badge.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/cn"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

package/src/ui/button.tsx

@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/cn"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/ui/index.ts

@@ -0,0 +1,16 @@
+export { Button, buttonVariants } from './button'
+export { Badge, badgeVariants } from './badge'
+export { Input } from './input'
+export { Skeleton } from './skeleton'
+export { Textarea } from './textarea'
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+} from './table'
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants } from './tabs'

package/src/ui/input.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "../lib/cn"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/src/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import * as React from "react"
+
+import { cn } from "../lib/cn"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "../lib/cn"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto rounded-lg border border-border bg-card"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("bg-background [&_tr]:border-b [&_tr]:border-border", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t border-border bg-background font-medium text-foreground-secondary [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b border-border transition-colors hover:bg-card/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-9 px-3 text-left align-middle text-[10px] font-semibold uppercase tracking-wider whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "px-3 py-2.5 align-middle whitespace-nowrap text-foreground-secondary [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/ui/tabs.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/cn"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-card border border-border",
+        line: "gap-1 bg-transparent border-b border-border",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2.5 py-0.5 text-sm font-medium whitespace-nowrap text-muted-foreground transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground-secondary focus-visible:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:outline-1 focus-visible:outline-primary/40 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=line]/tabs-list:data-active:border-transparent",
+        "data-active:bg-background data-active:text-foreground data-active:border-border",
+        "after:absolute after:bg-primary after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/src/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "../lib/cn"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }