@usetheo/ui 0.6.3-next.0 → 0.8.0-next.0

package/dist/index.js

@@ -1,9 +1,9 @@
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
-import { createContext, forwardRef, useId, Children, isValidElement, cloneElement, useState, useMemo, Fragment as Fragment$1, memo, useRef, useEffect, useContext, createElement, useCallback } from 'react';
+import { createContext, forwardRef, useId, Children, isValidElement, cloneElement, useState, useMemo, Fragment as Fragment$1, memo, useContext, useEffect, useRef, useCallback, createElement } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as DropdownMenu2 from '@radix-ui/react-dropdown-menu';
-import { X, AlertCircle, ChevronDown, ChevronUp, Check, Minus, Circle, Settings2, Eye, Lock, Plus, Trash2, Users, User, BookOpen, Sparkles, Globe, Pencil, Coins, TrendingUp, TrendingDown, CircleX, CheckCircle2, Loader2, CircleDashed, RotateCcw, Folder, FolderOpen, Brain, Zap, ShieldAlert, Clock, Play, Square, Server, Plug, Wrench, CalendarDays, CornerDownRight, Bot, MessageSquare, ChevronRight, ArrowRight, AlertOctagon, Network, KeyRound, ShieldOff, Database, GitBranch, ChevronsUpDown, FileText, FileCode, FileSpreadsheet, FileImage, File, Hammer, ShieldCheck, Edit3, FilePlus, FileSearch, Terminal, AlertTriangle, CircleDot, FileEdit, Cloud, RefreshCw, Maximize2, ArrowLeft, RotateCw, Search, Paperclip, Mic, Send, GitCommit, Activity, EyeOff, Copy, GitPullRequest, ExternalLink, ShieldX, ArrowDownLeft, TriangleAlert, Info, ShieldQuestion, BrainCircuitIcon, ImageIcon, FileIcon, ExternalLinkIcon, FileTextIcon, WrenchIcon, CodeIcon, ShieldIcon, AlertCircleIcon, CheckCircleIcon, LoaderIcon, Rocket, Image, Palette, Moon, Sun, ChevronLeftIcon, ChevronRightIcon, Hash, Slash, CheckIcon, CopyIcon } from 'lucide-react';
+import { X, AlertCircle, ChevronDown, ChevronUp, Check, Minus, Circle, Settings2, Eye, Lock, Plus, Trash2, Users, User, BookOpen, Sparkles, Globe, Pencil, Coins, TrendingUp, TrendingDown, CircleX, CheckCircle2, Loader2, CircleDashed, RotateCcw, Folder, FolderOpen, Brain, Zap, ShieldAlert, Clock, Play, Square, Server, Plug, Wrench, CalendarDays, CornerDownRight, Bot, MessageSquare, ChevronRight, ArrowRight, AlertOctagon, Network, KeyRound, ShieldOff, Database, GitBranch, ChevronsUpDown, FileText, FileCode, FileSpreadsheet, FileImage, File, Hammer, ShieldCheck, Edit3, FilePlus, FileSearch, Terminal, AlertTriangle, CircleDot, FileEdit, Copy, ArrowUpRight, Cloud, RefreshCw, Maximize2, ArrowLeft, RotateCw, Search, Paperclip, Mic, Send, GitCommit, Activity, EyeOff, GitPullRequest, ExternalLink, ShieldX, ArrowDownLeft, TriangleAlert, Info, ShieldQuestion, BrainCircuitIcon, ImageIcon, FileIcon, ExternalLinkIcon, FileTextIcon, WrenchIcon, CodeIcon, ShieldIcon, AlertCircleIcon, CheckCircleIcon, LoaderIcon, Rocket, Image, Palette, Moon, Sun, ChevronLeftIcon, ChevronRightIcon, Hash, Slash, CheckIcon, CopyIcon } from 'lucide-react';
 import * as ToastPrimitive from '@radix-ui/react-toast';
 import { cva } from 'class-variance-authority';
 import { Slot } from '@radix-ui/react-slot';
@@ -5546,12 +5546,12 @@ async function sanitizeHast(tree) {
   return safe2.type === "root" ? safe2 : { type: "root", children: [safe2] };
 }
 async function hastToReact(tree, components) {
-  const { Fragment: Fragment17, jsx: jsx117, jsxs: jsxs95 } = await import('react/jsx-runtime');
+  const { Fragment: Fragment19, jsx: jsx129, jsxs: jsxs104 } = await import('react/jsx-runtime');
   const { toJsxRuntime } = await import('hast-util-to-jsx-runtime');
   return toJsxRuntime(tree, {
-    Fragment: Fragment17,
-    jsx: jsx117,
-    jsxs: jsxs95,
+    Fragment: Fragment19,
+    jsx: jsx129,
+    jsxs: jsxs104,
     components
   });
 }
@@ -6752,6 +6752,895 @@ var ToolResult = forwardRef(
   }
 );
 ToolResult.displayName = "ToolResult";
+var INTENT_FILL = {
+  default: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive"
+};
+var Progress = forwardRef(
+  ({
+    className,
+    value = 0,
+    max = 100,
+    intent = "default",
+    height = "h-1",
+    indeterminate = false,
+    ...props
+  }, ref) => {
+    const clampedMax = Math.max(0, max);
+    const clampedValue = Math.min(clampedMax, Math.max(0, value));
+    const percent = clampedMax > 0 ? clampedValue / clampedMax * 100 : 0;
+    const fillClass = INTENT_FILL[intent];
+    return (
+      // biome-ignore lint/a11y/useFocusableInteractive: WAI-ARIA `progressbar` is a status role (https://www.w3.org/TR/wai-aria-1.2/#progressbar) — NOT supposed to be focusable; screen readers announce updates without keyboard navigation.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          role: "progressbar",
+          "aria-valuemin": 0,
+          "aria-valuemax": clampedMax,
+          "aria-valuenow": indeterminate ? void 0 : clampedValue,
+          "aria-busy": indeterminate ? true : void 0,
+          className: cn("relative w-full overflow-hidden rounded-full bg-muted", height, className),
+          ...props,
+          children: indeterminate ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-y-0 left-0 w-1/3 rounded-full",
+                "animate-[progress-indeterminate_1.4s_ease-in-out_infinite] motion-reduce:animate-none",
+                "motion-reduce:w-full motion-reduce:opacity-50",
+                fillClass
+              )
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "h-full rounded-full transition-[width] duration-base ease-out-soft",
+                "motion-reduce:transition-none",
+                fillClass
+              ),
+              style: { width: `${percent}%` }
+            }
+          )
+        }
+      )
+    );
+  }
+);
+Progress.displayName = "Progress";
+var TIER_CLASS = {
+  free: "bg-muted/40 border-muted-foreground/20 text-muted-foreground",
+  hobby: "bg-warning/10 border-warning/30 text-warning",
+  pro: "bg-primary/10 border-primary/30 text-primary",
+  team: "bg-success/10 border-success/30 text-success",
+  enterprise: "bg-foreground/5 border-foreground/20 text-foreground"
+};
+var SIZE_CLASS = {
+  sm: "px-1.5 py-0 text-label-caps",
+  md: "px-2 py-0.5 text-label"
+};
+function defaultLabel2(plan) {
+  return plan.charAt(0).toUpperCase() + plan.slice(1);
+}
+var PlanBadge = forwardRef(
+  ({ className, plan, label, size = "md", ...props }, ref) => {
+    const tierClass = TIER_CLASS[plan] ?? TIER_CLASS.free;
+    const displayLabel = label ?? defaultLabel2(plan);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center rounded-md border",
+          "font-mono uppercase tabular-nums tracking-wider",
+          tierClass,
+          SIZE_CLASS[size],
+          className
+        ),
+        "data-plan": plan,
+        ...props,
+        children: displayLabel
+      }
+    );
+  }
+);
+PlanBadge.displayName = "PlanBadge";
+function defaultFormat(value, max, unit) {
+  return `${value} / ${max}${unit ? ` ${unit}` : ""}`;
+}
+function metricAriaLabel(metric, formatted) {
+  const label = typeof metric.label === "string" ? metric.label : "metric";
+  return `${label}: ${formatted}`;
+}
+var UsageMeter = forwardRef(
+  ({ className, title, action, metrics, compact = false, ...props }, ref) => {
+    const hasHeader = Boolean(title) || Boolean(action);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "grid gap-3 rounded-xl border border-border bg-card p-4",
+          compact && "gap-2",
+          className
+        ),
+        "data-theo-usage-meter": "",
+        ...props,
+        children: [
+          hasHeader ? /* @__PURE__ */ jsxs("header", { className: "flex items-baseline justify-between gap-3", children: [
+            title ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "font-mono text-label-caps text-muted-foreground uppercase tracking-wider"
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsx("span", {}),
+            action ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : null
+          ] }) : null,
+          metrics.map((metric, idx) => {
+            const overQuota = metric.value > metric.max;
+            const fmt = metric.formatter ?? defaultFormat;
+            const formatted = fmt(metric.value, metric.max, metric.unit);
+            const intent = overQuota ? "warning" : "default";
+            const key = `${typeof metric.label === "string" ? metric.label : "metric"}-${idx}`;
+            if (compact) {
+              return /* @__PURE__ */ jsx(
+                Progress,
+                {
+                  value: metric.value,
+                  max: metric.max,
+                  intent,
+                  "aria-label": metricAriaLabel(metric, formatted)
+                },
+                key
+              );
+            }
+            return /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3 text-body-sm", children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: metric.label }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "shrink-0 font-mono tabular-nums",
+                      overQuota ? "text-warning" : "text-foreground"
+                    ),
+                    children: formatted
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                Progress,
+                {
+                  value: metric.value,
+                  max: metric.max,
+                  intent,
+                  "aria-label": metricAriaLabel(metric, formatted)
+                }
+              )
+            ] }, key);
+          })
+        ]
+      }
+    );
+  }
+);
+UsageMeter.displayName = "UsageMeter";
+var URL_RE = /^(?:https?:\/\/|\/)/;
+function deriveInitials(name, avatar) {
+  if (avatar && !URL_RE.test(avatar) && avatar.length <= 2) {
+    return avatar.toUpperCase();
+  }
+  if (typeof name === "string" && name.length > 0) {
+    return name.charAt(0).toUpperCase();
+  }
+  return "?";
+}
+var AccountMenu = forwardRef(
+  ({ className, name, avatar, plan, secondary, onClick, ...props }, ref) => {
+    const interactive = typeof onClick === "function";
+    const initials = deriveInitials(name, avatar);
+    const isUrlAvatar = avatar !== void 0 && URL_RE.test(avatar);
+    const altText = typeof name === "string" ? name : "account";
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Avatar, { size: "sm", children: [
+        isUrlAvatar ? /* @__PURE__ */ jsx(Avatar.Image, { src: avatar, alt: altText }) : null,
+        /* @__PURE__ */ jsx(Avatar.Fallback, { delayMs: 0, children: initials })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-body-sm text-foreground", children: name }),
+          plan ? /* @__PURE__ */ jsx(PlanBadge, { plan, size: "sm" }) : null
+        ] }),
+        secondary ? /* @__PURE__ */ jsx("span", { className: "truncate text-label text-muted-foreground", children: secondary }) : null
+      ] }),
+      interactive ? /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3 shrink-0 text-muted-foreground", "aria-hidden": "true" }) : null
+    ] });
+    const baseClass = cn(
+      "flex w-full items-center gap-3 px-3 py-2",
+      interactive && cn(
+        "rounded-md text-left transition-colors",
+        "hover:bg-muted/40",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card"
+      ),
+      className
+    );
+    if (interactive) {
+      const { ...buttonProps } = props;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          type: "button",
+          className: baseClass,
+          onClick,
+          ...buttonProps,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: baseClass,
+        ...props,
+        children: content
+      }
+    );
+  }
+);
+AccountMenu.displayName = "AccountMenu";
+var TableDensityContext = createContext("default");
+var alignClass = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+var Root22 = forwardRef(
+  ({ className, density = "default", children, ...props }, ref) => /* @__PURE__ */ jsx(TableDensityContext.Provider, { value: density, children: /* @__PURE__ */ jsx(
+    "table",
+    {
+      ref,
+      className: cn("w-full border-collapse font-sans text-body-sm", className),
+      ...props,
+      children
+    }
+  ) })
+);
+Root22.displayName = "Table";
+var Header5 = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "thead",
+    {
+      ref,
+      className: cn(
+        "border-border/40 border-b text-label-caps text-muted-foreground uppercase tracking-wider",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Header5.displayName = "Table.Header";
+var Body4 = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("text-foreground", className), ...props })
+);
+Body4.displayName = "Table.Body";
+var Row = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      className: cn(
+        "border-border/20 border-b transition-colors last:border-0 hover:bg-muted/40",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Row.displayName = "Table.Row";
+var Cell = forwardRef(
+  ({ className, align = "left", numeric, children, ...props }, ref) => {
+    const density = useContext(TableDensityContext);
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        ref,
+        className: cn(
+          "px-3",
+          density === "compact" ? "py-1.5" : "py-3",
+          alignClass[align],
+          numeric && "font-mono tabular-nums",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Cell.displayName = "Table.Cell";
+var HeaderCell = forwardRef(
+  ({ className, align = "left", onSort, sortDirection = "none", children, ...props }, ref) => {
+    const sortAffordance = onSort !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "ml-1 inline-flex flex-col", children: [
+      /* @__PURE__ */ jsx(
+        ChevronUp,
+        {
+          "aria-hidden": "true",
+          className: cn("-mb-1 size-3", sortDirection === "asc" ? "opacity-100" : "opacity-30")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          "aria-hidden": "true",
+          className: cn("size-3", sortDirection === "desc" ? "opacity-100" : "opacity-30")
+        }
+      )
+    ] }) : null;
+    const ariaSort = onSort === void 0 ? void 0 : sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none";
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        ref,
+        scope: "col",
+        "aria-sort": ariaSort,
+        className: cn(
+          "px-3 py-2.5 font-medium",
+          alignClass[align],
+          align === "right" && "[&_button]:justify-end",
+          className
+        ),
+        ...props,
+        children: onSort !== void 0 ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onSort,
+            className: cn(
+              "inline-flex items-center gap-1",
+              "text-label-caps uppercase tracking-wider",
+              "transition-colors hover:text-foreground",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            ),
+            children: [
+              children,
+              sortAffordance
+            ]
+          }
+        ) : children
+      }
+    );
+  }
+);
+HeaderCell.displayName = "Table.HeaderCell";
+var Table = Object.assign(Root22, { Header: Header5, Body: Body4, Row, Cell, HeaderCell });
+var DOT_COLOR = {
+  live: "bg-success",
+  building: "bg-warning",
+  failed: "bg-destructive",
+  idle: "bg-muted-foreground/40",
+  warning: "bg-warning"
+};
+var LABEL_COLOR = {
+  live: "text-success",
+  building: "text-warning",
+  failed: "text-destructive",
+  idle: "text-muted-foreground",
+  warning: "text-warning"
+};
+var SIZE = {
+  xs: "size-1.5",
+  sm: "size-2",
+  md: "size-2.5"
+};
+var StatusDot = forwardRef(
+  ({ className, status, label, size = "sm", pulse, "aria-label": ariaLabel, ...props }, ref) => {
+    const shouldPulse = pulse ?? status === "building";
+    const hasVisibleLabel = label !== void 0 && label !== null;
+    const effectiveAriaLabel = ariaLabel ?? (hasVisibleLabel ? void 0 : status);
+    useEffect(() => {
+      if (process.env.NODE_ENV !== "production" && !hasVisibleLabel && ariaLabel === void 0) {
+        console.warn(
+          `<StatusDot status="${status}" />: no \`label\` or \`aria-label\` provided. Color-only status is invisible to screen readers. Falling back to aria-label="${status}".`
+        );
+      }
+    }, [hasVisibleLabel, ariaLabel, status]);
+    const dot = /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": hasVisibleLabel ? "true" : void 0,
+        className: cn(
+          "inline-block shrink-0 rounded-full",
+          SIZE[size],
+          DOT_COLOR[status],
+          shouldPulse && "animate-pulse"
+        )
+      }
+    );
+    if (!hasVisibleLabel) {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          role: "status",
+          "aria-label": effectiveAriaLabel,
+          className: cn("inline-flex items-center", className),
+          ...props,
+          children: dot
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        "aria-label": effectiveAriaLabel,
+        className: cn(
+          "inline-flex items-center gap-1.5 font-mono text-label",
+          LABEL_COLOR[status],
+          className
+        ),
+        ...props,
+        children: [
+          dot,
+          /* @__PURE__ */ jsx("span", { children: label })
+        ]
+      }
+    );
+  }
+);
+StatusDot.displayName = "StatusDot";
+var VARIANT = {
+  ghost: "hover:bg-muted",
+  outline: "border border-border/60 rounded-md"
+};
+var SIZE2 = {
+  sm: "px-2 py-1 text-label",
+  md: "px-2.5 py-1.5 text-body-sm"
+};
+var CopyButton = forwardRef(
+  ({
+    className,
+    value,
+    label,
+    variant = "ghost",
+    size = "sm",
+    onCopied,
+    feedbackDuration = 1500,
+    ...props
+  }, ref) => {
+    const [state, setState] = useState("idle");
+    const timerRef = useRef(null);
+    useEffect(() => {
+      return () => {
+        if (timerRef.current !== null) {
+          clearTimeout(timerRef.current);
+        }
+      };
+    }, []);
+    const scheduleRevert = useCallback(() => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+      timerRef.current = setTimeout(() => {
+        setState("idle");
+        timerRef.current = null;
+      }, feedbackDuration);
+    }, [feedbackDuration]);
+    const handleClick = useCallback(() => {
+      if (state !== "idle") return;
+      if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
+        setState("failed");
+        scheduleRevert();
+        return;
+      }
+      navigator.clipboard.writeText(value).then(
+        () => {
+          setState("copied");
+          onCopied?.(value);
+          scheduleRevert();
+        },
+        () => {
+          setState("failed");
+          scheduleRevert();
+        }
+      );
+    }, [state, value, onCopied, scheduleRevert]);
+    const Icon2 = state === "copied" ? Check : state === "failed" ? X : Copy;
+    const liveMessage = state === "copied" ? "Copied to clipboard" : state === "failed" ? "Copy failed" : "";
+    const labelText = label !== void 0 ? state === "copied" ? "Copied!" : state === "failed" ? "Failed" : label : null;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: handleClick,
+        "data-state": state,
+        className: cn(
+          "inline-flex items-center gap-1.5",
+          "font-sans transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card",
+          VARIANT[variant],
+          SIZE2[size],
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            Icon2,
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "size-3.5 shrink-0 transition-opacity duration-200",
+                state === "copied" && "text-success",
+                state === "failed" && "text-destructive"
+              )
+            }
+          ),
+          labelText !== null ? /* @__PURE__ */ jsx("span", { children: labelText }) : null,
+          /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: liveMessage })
+        ]
+      }
+    );
+  }
+);
+CopyButton.displayName = "CopyButton";
+function toDate(value) {
+  const d = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+var SEVEN_DAYS_MS = 7 * 24 * 60 * 60 * 1e3;
+var UNITS = [
+  { unit: "year", ms: 365 * 24 * 60 * 60 * 1e3 },
+  { unit: "month", ms: 30 * 24 * 60 * 60 * 1e3 },
+  { unit: "day", ms: 24 * 60 * 60 * 1e3 },
+  { unit: "hour", ms: 60 * 60 * 1e3 },
+  { unit: "minute", ms: 60 * 1e3 }
+];
+function safeRelativeFormatter(locale) {
+  try {
+    return new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  } catch {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(`<Timestamp locale="${locale}">: invalid locale tag, falling back to default.`);
+    }
+    try {
+      return new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
+    } catch {
+      return null;
+    }
+  }
+}
+function safeAbsoluteFormat(date, locale, withYear) {
+  try {
+    return date.toLocaleDateString(locale, {
+      month: "short",
+      day: "numeric",
+      ...withYear ? { year: "numeric" } : {}
+    });
+  } catch {
+    return date.toLocaleDateString(void 0, {
+      month: "short",
+      day: "numeric",
+      ...withYear ? { year: "numeric" } : {}
+    });
+  }
+}
+function formatRelative(date, now, locale) {
+  const diffMs = date.getTime() - now.getTime();
+  const absMs = Math.abs(diffMs);
+  if (absMs < 6e4) return "just now";
+  if (diffMs < 0 && absMs > SEVEN_DAYS_MS) {
+    const sameYear = date.getFullYear() === now.getFullYear();
+    return safeAbsoluteFormat(date, locale, !sameYear);
+  }
+  const rtf = safeRelativeFormatter(locale);
+  if (rtf === null) {
+    return safeAbsoluteFormat(date, locale, date.getFullYear() !== now.getFullYear());
+  }
+  for (const { unit, ms } of UNITS) {
+    if (absMs >= ms) {
+      return rtf.format(Math.round(diffMs / ms), unit);
+    }
+  }
+  return "just now";
+}
+function formatAbsolute(date, locale) {
+  try {
+    return date.toLocaleString(locale, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  } catch {
+    return date.toLocaleString(void 0, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  }
+}
+var Timestamp = forwardRef(
+  ({
+    className,
+    value,
+    format = "relative",
+    refreshInterval = 6e4,
+    locale,
+    noTooltip,
+    ...props
+  }, ref) => {
+    const date = toDate(value);
+    const [now, setNow] = useState(() => /* @__PURE__ */ new Date());
+    useEffect(() => {
+      if (format !== "relative" || refreshInterval === 0 || date === null) return;
+      const id = setInterval(() => setNow(/* @__PURE__ */ new Date()), refreshInterval);
+      return () => clearInterval(id);
+    }, [format, refreshInterval, date]);
+    if (date === null) {
+      return /* @__PURE__ */ jsx("time", { ref, className: cn(className), suppressHydrationWarning: true, ...props });
+    }
+    const iso = date.toISOString();
+    const absolute = formatAbsolute(date, locale);
+    const relative = formatRelative(date, now, locale);
+    const visibleText = format === "absolute" ? absolute : format === "both" ? `${absolute} (${relative})` : relative;
+    return /* @__PURE__ */ jsx(
+      "time",
+      {
+        ref,
+        dateTime: iso,
+        title: noTooltip ? void 0 : absolute,
+        "aria-label": absolute,
+        suppressHydrationWarning: true,
+        className: cn(className),
+        ...props,
+        children: visibleText
+      }
+    );
+  }
+);
+Timestamp.displayName = "Timestamp";
+var TREND = {
+  up: { icon: TrendingUp, color: "text-success" },
+  down: { icon: TrendingDown, color: "text-destructive" },
+  flat: { icon: Minus, color: "text-muted-foreground" }
+};
+var StatTile = forwardRef(
+  ({ className, value, label, icon: Icon2, delta, onClick, children: _children, ...props }, ref) => {
+    const isInteractive = onClick !== void 0;
+    const TrendIcon = delta !== void 0 ? TREND[delta.trend].icon : null;
+    const trendColor = delta !== void 0 ? TREND[delta.trend].color : "";
+    const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+      (Icon2 !== void 0 || isInteractive) && /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+        Icon2 !== void 0 ? /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-lg border border-border/40 bg-muted/40", children: /* @__PURE__ */ jsx(Icon2, { "aria-hidden": "true", className: "size-4 text-muted-foreground" }) }) : /* @__PURE__ */ jsx("div", {}),
+        isInteractive ? /* @__PURE__ */ jsx(
+          ArrowUpRight,
+          {
+            "aria-hidden": "true",
+            className: "size-3.5 text-muted-foreground transition-colors group-hover:text-foreground"
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "whitespace-nowrap font-bold font-display text-display-md text-foreground tabular-nums leading-none tracking-tight", children: value }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1 font-sans text-body-sm text-muted-foreground", children: label }),
+      delta !== void 0 && TrendIcon !== null ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("mt-2 inline-flex items-center gap-1 font-mono text-label", trendColor),
+          children: [
+            /* @__PURE__ */ jsx(TrendIcon, { "aria-hidden": "true", className: "size-3" }),
+            /* @__PURE__ */ jsx("span", { children: delta.value })
+          ]
+        }
+      ) : null
+    ] });
+    if (isInteractive) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          type: "button",
+          onClick,
+          className: cn(
+            "group block w-full rounded-xl border border-border/40 bg-card p-5 text-left",
+            "cursor-pointer transition-colors hover:border-primary/30",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            className
+          ),
+          ...props,
+          children: inner
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("rounded-xl border border-border/40 bg-card p-5", className),
+        children: inner
+      }
+    );
+  }
+);
+StatTile.displayName = "StatTile";
+var Root23 = forwardRef(
+  ({ className, title = "Danger Zone", children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref,
+      "aria-label": typeof title === "string" ? title : "Danger Zone",
+      className: cn("rounded-xl border border-destructive/30 bg-destructive/[0.02]", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "border-destructive/20 border-b px-5 py-3 font-sans text-destructive text-label-caps uppercase tracking-wider", children: title }),
+        children
+      ]
+    }
+  )
+);
+Root23.displayName = "DangerZone";
+var Action2 = forwardRef(
+  ({ className, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex items-center justify-between gap-4 border-destructive/10 border-b px-5 py-4 last:border-b-0",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium font-sans text-body-sm text-foreground", children: title }),
+          /* @__PURE__ */ jsx("span", { className: "mt-0.5 font-sans text-label text-muted-foreground", children: description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
+      ]
+    }
+  )
+);
+Action2.displayName = "DangerZone.Action";
+var DangerZone = Object.assign(Root23, { Action: Action2 });
+var ConfirmDialog = forwardRef(
+  ({
+    open,
+    onOpenChange,
+    title,
+    description,
+    confirmLabel = "Confirm",
+    cancelLabel = "Cancel",
+    intent = "default",
+    confirmationPhrase,
+    onConfirm,
+    loading: externalLoading
+  }, ref) => {
+    const [phraseInput, setPhraseInput] = useState("");
+    const [internalLoading, setInternalLoading] = useState(false);
+    const cancelRef = useRef(null);
+    const phraseRequired = !!confirmationPhrase;
+    const phraseMatched = phraseRequired ? phraseInput === confirmationPhrase : true;
+    const showLoading = externalLoading === true || internalLoading;
+    const canConfirm = phraseMatched && !showLoading;
+    useEffect(() => {
+      if (!open) setPhraseInput("");
+    }, [open]);
+    useEffect(() => {
+      if (open) {
+        const id = window.setTimeout(() => cancelRef.current?.focus(), 0);
+        return () => window.clearTimeout(id);
+      }
+    }, [open]);
+    async function handleConfirm() {
+      if (!canConfirm) return;
+      setInternalLoading(true);
+      try {
+        await onConfirm();
+        onOpenChange(false);
+      } catch {
+      } finally {
+        setInternalLoading(false);
+      }
+    }
+    function handleInputKeyDown(e) {
+      if (e.key === "Enter" && canConfirm) {
+        e.preventDefault();
+        void handleConfirm();
+      }
+    }
+    return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Dialog.Content, { ref, children: [
+      /* @__PURE__ */ jsxs(Dialog.Header, { children: [
+        /* @__PURE__ */ jsx(Dialog.Title, { children: title }),
+        /* @__PURE__ */ jsx(Dialog.Description, { children: description })
+      ] }),
+      phraseRequired ? /* @__PURE__ */ jsxs(Dialog.Body, { children: [
+        /* @__PURE__ */ jsxs("p", { className: "mb-2 text-body-sm text-muted-foreground", children: [
+          "Type",
+          " ",
+          /* @__PURE__ */ jsx("code", { className: "rounded bg-muted px-1 py-0.5 font-mono text-foreground", children: confirmationPhrase }),
+          " ",
+          "to confirm"
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: phraseInput,
+            onChange: (e) => setPhraseInput(e.target.value),
+            onKeyDown: handleInputKeyDown,
+            autoComplete: "off",
+            "aria-label": "Confirmation phrase"
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref: cancelRef,
+            variant: "secondary",
+            onClick: () => onOpenChange(false),
+            disabled: showLoading,
+            children: cancelLabel
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: intent === "destructive" ? "destructive" : "primary",
+            onClick: () => void handleConfirm(),
+            disabled: !canConfirm,
+            "data-confirm": true,
+            children: [
+              showLoading ? /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "size-4 animate-spin" }) : null,
+              confirmLabel
+            ]
+          }
+        )
+      ] })
+    ] }) });
+  }
+);
+ConfirmDialog.displayName = "ConfirmDialog";
+var CodeBlock2 = forwardRef(
+  ({ className, code, language: _language, terminal, copyable, caption, ...props }, ref) => {
+    const lines = code.split(/\r?\n/);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative rounded-lg border border-border/40 bg-muted/40 font-mono text-body-sm",
+          className
+        ),
+        ...props,
+        children: [
+          caption !== void 0 ? /* @__PURE__ */ jsx("div", { className: "border-border/40 border-b px-3 py-1.5 font-sans text-label text-muted-foreground", children: caption }) : null,
+          copyable ? /* @__PURE__ */ jsx(CopyButton, { value: code, "aria-label": "Copy code", className: "absolute top-2 right-2" }) : null,
+          /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto p-3 text-foreground", children: terminal ? /* @__PURE__ */ jsx("code", { children: lines.map((line, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: code lines are positional; reorder requires consumer recompute.
+            /* @__PURE__ */ jsxs("span", { className: "block whitespace-pre", children: [
+              /* @__PURE__ */ jsx("span", { className: "select-none text-muted-foreground", children: "$ " }),
+              line
+            ] }, i)
+          )) }) : /* @__PURE__ */ jsx("code", { children: code }) })
+        ]
+      }
+    );
+  }
+);
+CodeBlock2.displayName = "CodeBlock";
 var statusIcon2 = {
   pending: CircleDashed,
   running: Loader2,
@@ -9062,7 +9951,7 @@ var EnvVarEditor = forwardRef(
             }
           ) : null,
           /* @__PURE__ */ jsxs("ul", { className: "divide-y divide-border/30", children: [
-            vars.map((v) => /* @__PURE__ */ jsx(Row, { entry: v, ...onRemove ? { onRemove } : {} }, v.id)),
+            vars.map((v) => /* @__PURE__ */ jsx(Row2, { entry: v, ...onRemove ? { onRemove } : {} }, v.id)),
             vars.length === 0 ? /* @__PURE__ */ jsx("li", { className: "py-8 text-center text-body-sm text-muted-foreground", children: "No environment variables yet." }) : null
           ] })
         ]
@@ -9071,7 +9960,7 @@ var EnvVarEditor = forwardRef(
   }
 );
 EnvVarEditor.displayName = "EnvVarEditor";
-function Row({ entry, onRemove }) {
+function Row2({ entry, onRemove }) {
   const [revealed, setRevealed] = useState(!entry.masked);
   const value = revealed ? entry.value : "\u2022".repeat(Math.min(entry.value.length, 12) || 8);
   const copy = () => {
@@ -9522,6 +10411,6 @@ function CommandPalette({
   ] }) });
 }
 
-export { ALL_MODES, AgentComposer, AgentEditor, AgentErrorCard, AgentEvent, AgentHandoff, AgentProfile, AgentStartingState, AgentStream, AgentStreaming, AgentTimeline, ApprovalCard, ArtifactPreview, AttachmentChip, AuditLogEntry, AutoCompactNotice, Avatar, BadgeWithDot as Badge, BrowserControls, BuildLogStream, Button, CapabilityIndicator, Card, ChatComposer, ChatMessage, ChatMessageAction, ChatMessageActions, ChatMessageBranch, ChatMessageBranchContent, ChatMessageBranchNext, ChatMessageBranchPage, ChatMessageBranchPrevious, ChatMessageBranchSelector, ChatMessageContent, ChatMessageResponse, ChatMessageRoot, ChatMessageToolbar, ChatThread, Checkbox, CommandPalette, ContextCard, ContextWindowBar, CostMeter, CreatedFilesCard, CronJobCard, CronJobsList, DataPart, DeploymentRow, Dialog, DiffViewer, DomainConfig, EmptyState, EnvVarEditor, FilePart, FolderContextCard, FolderSelector, FormField, HOOK_EVENTS, HookConfig, HookEventLog, Input, IntentSelector, Label, LaneBoard, LoginSplit, MCPServerCard, MCPServerList, MODE_LABEL, MemoryEditor, MentionMenu, MetricsPanel, ModelCard, ModelSelector, PermissionMatrix, PermissionModal, PreviewEnvCard, PreviewPanel, ProgressChecklist, ProjectCard, ProjectSwitcher, QuickActionChips, RadioGroup, ReasoningPart, RecentFoldersList, RollbackUI, RuleCard, RuleEditor, RunStats, RunningTasksPanel, ScrollArea, Select, SessionListItem, SessionTimeline, Sheet, Sidebar, Skeleton, SkillCard, SkillEditor, SkillsList, SocialAuthRow, SourceDocumentPart, SourceUrlPart, StepsRail, SubAgentDispatch, Switch, SystemPromptEditor, Tabs, TaskHeader, TaskNode, TaskPlan, TerminalPanel, TextPart, Textarea, ThemeProvider, ThemeScript, ThemeSwitcher, TheoUIProvider, Toast, Toaster, TokenUsageChart, ToolCall, ToolCallCard, ToolCallPart, ToolResult, ToolsList, TooltipWithStatics as Tooltip, TopNav, anthropicStyle, auroraTerminal, avatarVariants, badgeVariants, builtinThemes, buttonVariants, capabilityPresets, classicPaper, cn, defineTheme, dracula, githubDark, hex, isCustomContentUIPart, isDataUIPart, isFileUIPart, isReasoningFileUIPart, isReasoningUIPart, isSourceDocumentUIPart, isSourceUrlUIPart, isStepStartUIPart, isTextUIPart, isToolUIPart, linearGlass, modelCapabilityPresets, oneDark, openaiStyle, renderPart, rgb, sheetVariants, useDensity, useTheme, useToast, vercelMono, violetForge };
+export { ALL_MODES, AccountMenu, AgentComposer, AgentEditor, AgentErrorCard, AgentEvent, AgentHandoff, AgentProfile, AgentStartingState, AgentStream, AgentStreaming, AgentTimeline, ApprovalCard, ArtifactPreview, AttachmentChip, AuditLogEntry, AutoCompactNotice, Avatar, BadgeWithDot as Badge, BrowserControls, BuildLogStream, Button, CapabilityIndicator, Card, ChatComposer, ChatMessage, ChatMessageAction, ChatMessageActions, ChatMessageBranch, ChatMessageBranchContent, ChatMessageBranchNext, ChatMessageBranchPage, ChatMessageBranchPrevious, ChatMessageBranchSelector, ChatMessageContent, ChatMessageResponse, ChatMessageRoot, ChatMessageToolbar, ChatThread, Checkbox, CodeBlock2 as CodeBlock, CommandPalette, ConfirmDialog, ContextCard, ContextWindowBar, CopyButton, CostMeter, CreatedFilesCard, CronJobCard, CronJobsList, DangerZone, DataPart, DeploymentRow, Dialog, DiffViewer, DomainConfig, EmptyState, EnvVarEditor, FilePart, FolderContextCard, FolderSelector, FormField, HOOK_EVENTS, HookConfig, HookEventLog, Input, IntentSelector, Label, LaneBoard, LoginSplit, MCPServerCard, MCPServerList, MODE_LABEL, MemoryEditor, MentionMenu, MetricsPanel, ModelCard, ModelSelector, PermissionMatrix, PermissionModal, PlanBadge, PreviewEnvCard, PreviewPanel, Progress, ProgressChecklist, ProjectCard, ProjectSwitcher, QuickActionChips, RadioGroup, ReasoningPart, RecentFoldersList, RollbackUI, RuleCard, RuleEditor, RunStats, RunningTasksPanel, ScrollArea, Select, SessionListItem, SessionTimeline, Sheet, Sidebar, Skeleton, SkillCard, SkillEditor, SkillsList, SocialAuthRow, SourceDocumentPart, SourceUrlPart, StatTile, StatusDot, StepsRail, SubAgentDispatch, Switch, SystemPromptEditor, Table, Tabs, TaskHeader, TaskNode, TaskPlan, TerminalPanel, TextPart, Textarea, ThemeProvider, ThemeScript, ThemeSwitcher, TheoUIProvider, Timestamp, Toast, Toaster, TokenUsageChart, ToolCall, ToolCallCard, ToolCallPart, ToolResult, ToolsList, TooltipWithStatics as Tooltip, TopNav, UsageMeter, anthropicStyle, auroraTerminal, avatarVariants, badgeVariants, builtinThemes, buttonVariants, capabilityPresets, classicPaper, cn, defineTheme, dracula, githubDark, hex, isCustomContentUIPart, isDataUIPart, isFileUIPart, isReasoningFileUIPart, isReasoningUIPart, isSourceDocumentUIPart, isSourceUrlUIPart, isStepStartUIPart, isTextUIPart, isToolUIPart, linearGlass, modelCapabilityPresets, oneDark, openaiStyle, renderPart, rgb, sheetVariants, useDensity, useTheme, useToast, vercelMono, violetForge };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map