@usetheo/ui 0.7.0-next.0 → 0.9.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, TriangleAlert, Info, ChevronsLeft, ChevronLeft, ChevronsRight, Cloud, RefreshCw, Maximize2, ArrowLeft, RotateCw, Search, Paperclip, Mic, Send, GitCommit, Activity, EyeOff, GitPullRequest, ExternalLink, ShieldX, ArrowDownLeft, 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: Fragment18, jsx: jsx121, jsxs: jsxs97 } = await import('react/jsx-runtime');
+  const { Fragment: Fragment19, jsx: jsx131, jsxs: jsxs106 } = await import('react/jsx-runtime');
   const { toJsxRuntime } = await import('hast-util-to-jsx-runtime');
   return toJsxRuntime(tree, {
-    Fragment: Fragment18,
-    jsx: jsx121,
-    jsxs: jsxs97,
+    Fragment: Fragment19,
+    jsx: jsx131,
+    jsxs: jsxs106,
     components
   });
 }
@@ -6997,6 +6997,922 @@ var AccountMenu = forwardRef(
   }
 );
 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 INTENT = {
+  info: {
+    icon: Info,
+    border: "border-primary/30",
+    bg: "bg-primary/[0.04]",
+    iconColor: "text-primary"
+  },
+  success: {
+    icon: CheckCircle2,
+    border: "border-success/30",
+    bg: "bg-success/[0.04]",
+    iconColor: "text-success"
+  },
+  warning: {
+    icon: TriangleAlert,
+    border: "border-warning/30",
+    bg: "bg-warning/[0.04]",
+    iconColor: "text-warning"
+  },
+  destructive: {
+    icon: AlertCircle,
+    border: "border-destructive/30",
+    bg: "bg-destructive/[0.04]",
+    iconColor: "text-destructive"
+  }
+};
+var Alert = forwardRef(
+  ({ className, intent = "info", title, description, action, onDismiss, ...props }, ref) => {
+    const config = INTENT[intent];
+    const Icon2 = config.icon;
+    const hasTitle = title !== void 0 && title !== null;
+    const hasDescription = description !== void 0 && description !== null;
+    const role = intent === "destructive" ? "alert" : "status";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role,
+        className: cn(
+          "rounded-lg border",
+          config.border,
+          config.bg,
+          hasTitle && hasDescription ? "p-4" : "p-3",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx(Icon2, { "aria-hidden": "true", className: cn("mt-0.5 size-4 shrink-0", config.iconColor) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            hasTitle ? /* @__PURE__ */ jsx("div", { className: "font-medium font-sans text-body-sm text-foreground", children: title }) : null,
+            hasDescription ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn("font-sans text-body-sm text-muted-foreground", hasTitle && "mt-0.5"),
+                children: description
+              }
+            ) : null
+          ] }),
+          action !== void 0 ? /* @__PURE__ */ jsx("div", { className: "ml-auto shrink-0", children: action }) : null,
+          onDismiss !== void 0 ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onDismiss,
+              "aria-label": "Dismiss",
+              className: cn(
+                "shrink-0 rounded p-0.5 text-muted-foreground transition-colors",
+                "hover:text-foreground",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              ),
+              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
+            }
+          ) : null
+        ] })
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+function computePageRange(currentPage, totalPages, siblingCount = 1) {
+  if (totalPages <= 1) return [];
+  const totalNumbers = siblingCount * 2 + 3;
+  const totalWithEdges = totalNumbers + 2;
+  if (totalPages <= totalWithEdges) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+  const leftSibling = Math.max(currentPage - siblingCount, 1);
+  const rightSibling = Math.min(currentPage + siblingCount, totalPages);
+  const showLeftEllipsis = leftSibling > 2;
+  const showRightEllipsis = rightSibling < totalPages - 1;
+  if (!showLeftEllipsis && showRightEllipsis) {
+    const leftRangeEnd = 1 + (siblingCount * 2 + 2);
+    const leftRange = Array.from({ length: leftRangeEnd }, (_, i) => i + 1);
+    return [...leftRange, "ellipsis-end", totalPages];
+  }
+  if (showLeftEllipsis && !showRightEllipsis) {
+    const rightStart = totalPages - (siblingCount * 2 + 2);
+    const rightRange = Array.from(
+      { length: totalPages - rightStart + 1 },
+      (_, i) => rightStart + i
+    );
+    return [1, "ellipsis-start", ...rightRange];
+  }
+  const middleRange = Array.from(
+    { length: rightSibling - leftSibling + 1 },
+    (_, i) => leftSibling + i
+  );
+  return [1, "ellipsis-start", ...middleRange, "ellipsis-end", totalPages];
+}
+var SIZE3 = {
+  sm: "size-7 text-label",
+  md: "size-8 text-body-sm"
+};
+var ICON_SIZE = {
+  sm: "size-3",
+  md: "size-3.5"
+};
+var Pagination = forwardRef(
+  ({
+    className,
+    currentPage,
+    totalPages,
+    onPageChange,
+    siblingCount = 1,
+    showJumpButtons = true,
+    size = "md",
+    ...props
+  }, ref) => {
+    if (totalPages <= 1) {
+      return null;
+    }
+    const range = computePageRange(currentPage, totalPages, siblingCount);
+    const prevDisabled = currentPage <= 1;
+    const nextDisabled = currentPage >= totalPages;
+    const sizeClass = SIZE3[size];
+    const iconClass = ICON_SIZE[size];
+    const buttonBase = cn(
+      "inline-flex items-center justify-center rounded-md font-mono tabular-nums",
+      "transition-colors",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+      sizeClass
+    );
+    function go(page) {
+      const clamped = Math.max(1, Math.min(totalPages, page));
+      if (clamped !== currentPage) onPageChange(clamped);
+    }
+    function handleKeyDown(e) {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        go(currentPage - 1);
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        go(currentPage + 1);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        go(1);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        go(totalPages);
+      }
+    }
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref,
+        "aria-label": "Pagination",
+        onKeyDown: handleKeyDown,
+        className: cn("flex items-center gap-1", className),
+        ...props,
+        children: [
+          showJumpButtons ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => go(1),
+              disabled: prevDisabled,
+              "aria-label": "Go to first page",
+              "aria-disabled": prevDisabled || void 0,
+              className: cn(
+                buttonBase,
+                "text-foreground hover:bg-muted",
+                prevDisabled && "cursor-not-allowed opacity-40 hover:bg-transparent"
+              ),
+              children: /* @__PURE__ */ jsx(ChevronsLeft, { "aria-hidden": "true", className: iconClass })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => go(currentPage - 1),
+              disabled: prevDisabled,
+              "aria-label": "Go to previous page",
+              "aria-disabled": prevDisabled || void 0,
+              className: cn(
+                buttonBase,
+                "text-foreground hover:bg-muted",
+                prevDisabled && "cursor-not-allowed opacity-40 hover:bg-transparent"
+              ),
+              children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true", className: iconClass })
+            }
+          ),
+          range.map((item) => {
+            if (item === "ellipsis-start" || item === "ellipsis-end") {
+              return /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "inline-flex items-center justify-center text-muted-foreground",
+                    sizeClass
+                  ),
+                  children: "\u2026"
+                },
+                item
+              );
+            }
+            const isActive = item === currentPage;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => go(item),
+                "aria-label": `Go to page ${item}`,
+                "aria-current": isActive ? "page" : void 0,
+                className: cn(
+                  buttonBase,
+                  isActive ? "bg-primary text-primary-foreground hover:bg-primary" : "text-foreground hover:bg-muted"
+                ),
+                children: item
+              },
+              item
+            );
+          }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => go(currentPage + 1),
+              disabled: nextDisabled,
+              "aria-label": "Go to next page",
+              "aria-disabled": nextDisabled || void 0,
+              className: cn(
+                buttonBase,
+                "text-foreground hover:bg-muted",
+                nextDisabled && "cursor-not-allowed opacity-40 hover:bg-transparent"
+              ),
+              children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: iconClass })
+            }
+          ),
+          showJumpButtons ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => go(totalPages),
+              disabled: nextDisabled,
+              "aria-label": "Go to last page",
+              "aria-disabled": nextDisabled || void 0,
+              className: cn(
+                buttonBase,
+                "text-foreground hover:bg-muted",
+                nextDisabled && "cursor-not-allowed opacity-40 hover:bg-transparent"
+              ),
+              children: /* @__PURE__ */ jsx(ChevronsRight, { "aria-hidden": "true", className: iconClass })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Pagination.displayName = "Pagination";
 var statusIcon2 = {
   pending: CircleDashed,
   running: Loader2,
@@ -9307,7 +10223,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
           ] })
         ]
@@ -9316,7 +10232,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 = () => {
@@ -9767,6 +10683,6 @@ function CommandPalette({
   ] }) });
 }
 
-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, 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, 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, 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, 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 };
+export { ALL_MODES, AccountMenu, AgentComposer, AgentEditor, AgentErrorCard, AgentEvent, AgentHandoff, AgentProfile, AgentStartingState, AgentStream, AgentStreaming, AgentTimeline, Alert, 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, Pagination, 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, computePageRange, 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