@usetheo/ui 0.7.0-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: Fragment18, jsx: jsx121, jsxs: jsxs97 } = 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: Fragment18,
-    jsx: jsx121,
-    jsxs: jsxs97,
+    Fragment: Fragment19,
+    jsx: jsx129,
+    jsxs: jsxs104,
     components
   });
 }
@@ -6997,6 +6997,650 @@ 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 statusIcon2 = {
   pending: CircleDashed,
   running: Loader2,
@@ -9307,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
           ] })
         ]
@@ -9316,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 = () => {
@@ -9767,6 +10411,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, 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