@tangle-network/sandbox-ui 0.10.3 → 0.10.5

package/dist/{chunk-D4CZWJCD.js → chunk-36QY2W5G.js}

@@ -115,11 +115,107 @@ var SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__P
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
+// src/primitives/segmented-control.tsx
+import * as React2 from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SegmentedControl({
+  value,
+  onValueChange,
+  options,
+  variant = "row",
+  className,
+  ...rest
+}) {
+  if (typeof process !== "undefined" && process?.env?.NODE_ENV !== "production" && !rest["aria-label"] && !rest["aria-labelledby"]) {
+    console.warn(
+      '[SegmentedControl] role="radiogroup" requires either aria-label or aria-labelledby for accessibility.'
+    );
+  }
+  const optionRefs = React2.useRef(/* @__PURE__ */ new Map());
+  const hasMatch = options.some((o) => o.value === value);
+  const handleKeyDown = (e) => {
+    if (options.length === 0) return;
+    let idx = options.findIndex((o) => o.value === value);
+    if (idx === -1) idx = 0;
+    let next;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") next = (idx + 1) % options.length;
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = (idx - 1 + options.length) % options.length;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = options.length - 1;
+    if (next !== void 0) {
+      e.preventDefault();
+      if (options[next].value !== value) {
+        onValueChange(options[next].value);
+      }
+      optionRefs.current.get(options[next].value)?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      role: "radiogroup",
+      id: rest.id,
+      "aria-label": rest["aria-label"],
+      "aria-labelledby": rest["aria-labelledby"],
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "flex gap-1",
+        variant === "row" && "flex-wrap items-center rounded-lg border border-border bg-card p-1",
+        variant === "tabs" && "flex-nowrap items-end border-b border-border pb-0 overflow-x-auto",
+        className
+      ),
+      children: options.map((option, i) => {
+        const active = option.value === value;
+        const focusable = active || !hasMatch && i === 0;
+        return /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            ref: (el) => {
+              if (el) optionRefs.current.set(option.value, el);
+              else optionRefs.current.delete(option.value);
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": active,
+            tabIndex: focusable ? 0 : -1,
+            onClick: () => {
+              if (!active) onValueChange(option.value);
+            },
+            className: cn(
+              "relative inline-flex items-center gap-2 whitespace-nowrap text-sm transition-colors",
+              variant === "row" && "rounded-md px-3 py-1.5",
+              variant === "tabs" && "rounded-none border-b-2 -mb-px px-4 py-2",
+              // Active styling is the ONLY styled state — unselected
+              // segments stay transparent on purpose so they don't
+              // compete visually with the selection.
+              active ? variant === "row" ? "border border-transparent bg-[var(--accent-surface)] text-[var(--accent-text)] font-semibold" : "border-[var(--accent-text)] text-[var(--accent-text)] font-semibold" : variant === "row" ? "border border-transparent text-muted-foreground hover:text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx2("span", { children: option.label }),
+              option.adornment && /* @__PURE__ */ jsx2(
+                "span",
+                {
+                  className: cn(
+                    "text-xs",
+                    active ? "text-[var(--accent-text)]/80" : "text-muted-foreground"
+                  ),
+                  children: option.adornment
+                }
+              )
+            ]
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+
 // src/primitives/switch.tsx
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-import * as React2 from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+import * as React3 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Switch = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
   SwitchPrimitives.Root,
   {
     className: cn(
@@ -128,7 +224,7 @@ var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
     ),
     ...props,
     ref,
-    children: /* @__PURE__ */ jsx2(
+    children: /* @__PURE__ */ jsx3(
       SwitchPrimitives.Thumb,
       {
         className: cn(
@@ -149,8 +245,8 @@ import {
   Info,
   X
 } from "lucide-react";
-import * as React3 from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import * as React4 from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var toastVariants = cva(
   "pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-lg border p-4 shadow-lg transition-all",
   {
@@ -183,28 +279,28 @@ function ToastComponent({
   onDismiss
 }) {
   const Icon2 = icons[variant];
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: cn(toastVariants({ variant })),
       role: "alert",
       "aria-live": "polite",
       children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ jsx3(Icon2, { className: "h-5 w-5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxs2("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsx3("p", { className: "font-medium text-sm", children: title }),
-            description && /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm opacity-80", children: description })
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx4(Icon2, { className: "h-5 w-5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsx4("p", { className: "font-medium text-sm", children: title }),
+            description && /* @__PURE__ */ jsx4("p", { className: "mt-1 text-sm opacity-80", children: description })
           ] })
         ] }),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
             onClick: () => onDismiss(id),
             className: "shrink-0 rounded-md p-1 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2",
             "aria-label": "Dismiss notification",
-            children: /* @__PURE__ */ jsx3(X, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx4(X, { className: "h-4 w-4" })
           }
         )
       ]
@@ -212,22 +308,22 @@ function ToastComponent({
   );
 }
 function ToastContainer({ toasts, onDismiss }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       className: "fixed right-4 bottom-4 z-50 flex max-w-md flex-col gap-2",
       "aria-label": "Notifications",
-      children: toasts.map((toast) => /* @__PURE__ */ jsx3(ToastComponent, { ...toast, onDismiss }, toast.id))
+      children: toasts.map((toast) => /* @__PURE__ */ jsx4(ToastComponent, { ...toast, onDismiss }, toast.id))
     }
   );
 }
-var ToastContext = React3.createContext(null);
+var ToastContext = React4.createContext(null);
 function ToastProvider({ children }) {
-  const [toasts, setToasts] = React3.useState([]);
-  const dismiss = React3.useCallback((id) => {
+  const [toasts, setToasts] = React4.useState([]);
+  const dismiss = React4.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  const toast = React3.useCallback(
+  const toast = React4.useCallback(
     (input) => {
       const id = Math.random().toString(36).slice(2);
       const newToast = { id, ...input };
@@ -239,41 +335,41 @@ function ToastProvider({ children }) {
     },
     [dismiss]
   );
-  const success = React3.useCallback(
+  const success = React4.useCallback(
     (title, description) => {
       toast({ title, description, variant: "success" });
     },
     [toast]
   );
-  const error = React3.useCallback(
+  const error = React4.useCallback(
     (title, description) => {
       toast({ title, description, variant: "error" });
     },
     [toast]
   );
-  const warning = React3.useCallback(
+  const warning = React4.useCallback(
     (title, description) => {
       toast({ title, description, variant: "warning" });
     },
     [toast]
   );
-  const info = React3.useCallback(
+  const info = React4.useCallback(
     (title, description) => {
       toast({ title, description, variant: "info" });
     },
     [toast]
   );
-  const value = React3.useMemo(
+  const value = React4.useMemo(
     () => ({ toasts, toast, success, error, warning, info, dismiss }),
     [toasts, toast, success, error, warning, info, dismiss]
   );
-  return /* @__PURE__ */ jsxs2(ToastContext.Provider, { value, children: [
+  return /* @__PURE__ */ jsxs3(ToastContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ jsx3(ToastContainer, { toasts, onDismiss: dismiss })
+    /* @__PURE__ */ jsx4(ToastContainer, { toasts, onDismiss: dismiss })
   ] });
 }
 function useToast() {
-  const context = React3.useContext(ToastContext);
+  const context = React4.useContext(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within a ToastProvider");
   }
@@ -283,12 +379,12 @@ function useToast() {
 // src/primitives/label.tsx
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva as cva2 } from "class-variance-authority";
-import * as React4 from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import * as React5 from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var labelVariants = cva2(
   "font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label2 = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+var Label2 = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
   LabelPrimitive.Root,
   {
     ref,
@@ -299,10 +395,10 @@ var Label2 = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
 Label2.displayName = LabelPrimitive.Root.displayName;
 
 // src/primitives/terminal-display.tsx
-import * as React5 from "react";
-import { useEffect, useRef } from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var TerminalDisplay = React5.forwardRef(
+import * as React6 from "react";
+import { useEffect, useRef as useRef2 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var TerminalDisplay = React6.forwardRef(
   ({
     className,
     variant = "default",
@@ -313,7 +409,7 @@ var TerminalDisplay = React5.forwardRef(
     children,
     ...props
   }, ref) => {
-    const containerRef = useRef(null);
+    const containerRef = useRef2(null);
     useEffect(() => {
       if (autoScroll && containerRef.current) {
         containerRef.current.scrollTop = containerRef.current.scrollHeight;
@@ -323,7 +419,7 @@ var TerminalDisplay = React5.forwardRef(
       default: "border-border",
       sandbox: "border-border shadow-[var(--shadow-accent)]"
     };
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs4(
       "div",
       {
         ref,
@@ -334,8 +430,8 @@ var TerminalDisplay = React5.forwardRef(
         ),
         ...props,
         children: [
-          showHeader && /* @__PURE__ */ jsx5("div", { className: "flex items-center border-b border-border bg-card px-4 py-3", children: /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground text-xs", children: title }) }),
-          /* @__PURE__ */ jsx5(
+          showHeader && /* @__PURE__ */ jsx6("div", { className: "flex items-center border-b border-border bg-card px-4 py-3", children: /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground text-xs", children: title }) }),
+          /* @__PURE__ */ jsx6(
             "div",
             {
               ref: containerRef,
@@ -350,7 +446,7 @@ var TerminalDisplay = React5.forwardRef(
   }
 );
 TerminalDisplay.displayName = "TerminalDisplay";
-var TerminalLine = React5.forwardRef(
+var TerminalLine = React6.forwardRef(
   ({ className, type = "output", prompt = "$", timestamp, children, ...props }, ref) => {
     const typeStyles = {
       input: "text-foreground",
@@ -362,7 +458,7 @@ var TerminalLine = React5.forwardRef(
       command: "text-foreground",
       warning: "text-[var(--surface-warning-text)]"
     };
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs4(
       "div",
       {
         ref,
@@ -373,21 +469,21 @@ var TerminalLine = React5.forwardRef(
         ),
         ...props,
         children: [
-          (type === "input" || type === "command") && /* @__PURE__ */ jsx5("span", { className: "shrink-0 select-none text-[var(--surface-success-text)]", children: prompt }),
-          type === "thinking" && /* @__PURE__ */ jsx5("span", { className: "shrink-0 select-none", children: "..." }),
-          timestamp && /* @__PURE__ */ jsxs3("span", { className: "shrink-0 select-none text-muted-foreground opacity-50", children: [
+          (type === "input" || type === "command") && /* @__PURE__ */ jsx6("span", { className: "shrink-0 select-none text-[var(--surface-success-text)]", children: prompt }),
+          type === "thinking" && /* @__PURE__ */ jsx6("span", { className: "shrink-0 select-none", children: "..." }),
+          timestamp && /* @__PURE__ */ jsxs4("span", { className: "shrink-0 select-none text-muted-foreground opacity-50", children: [
             "[",
             timestamp,
             "]"
           ] }),
-          /* @__PURE__ */ jsx5("span", { className: "whitespace-pre-wrap break-all", children })
+          /* @__PURE__ */ jsx6("span", { className: "whitespace-pre-wrap break-all", children })
         ]
       }
     );
   }
 );
 TerminalLine.displayName = "TerminalLine";
-var TerminalCursor = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var TerminalCursor = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
   "span",
   {
     ref,
@@ -399,9 +495,9 @@ var TerminalCursor = React5.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 TerminalCursor.displayName = "TerminalCursor";
-var TerminalInput = React5.forwardRef(
+var TerminalInput = React6.forwardRef(
   ({ className, onSubmit, variant = "default", ...props }, ref) => {
-    const [value, setValue] = React5.useState("");
+    const [value, setValue] = React6.useState("");
     const handleKeyDown = (e) => {
       if (e.key === "Enter" && value.trim() && onSubmit) {
         onSubmit(value.trim());
@@ -412,7 +508,7 @@ var TerminalInput = React5.forwardRef(
       default: "border-border focus-within:border-border",
       sandbox: "border-border focus-within:border-[var(--border-accent-hover)]"
     };
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs4(
       "div",
       {
         className: cn(
@@ -421,8 +517,8 @@ var TerminalInput = React5.forwardRef(
           className
         ),
         children: [
-          /* @__PURE__ */ jsx5("span", { className: "mr-2 select-none text-[var(--surface-success-text)]", children: "$" }),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6("span", { className: "mr-2 select-none text-[var(--surface-success-text)]", children: "$" }),
+          /* @__PURE__ */ jsx6(
             "input",
             {
               ref,
@@ -434,7 +530,7 @@ var TerminalInput = React5.forwardRef(
               ...props
             }
           ),
-          /* @__PURE__ */ jsx5(TerminalCursor, {})
+          /* @__PURE__ */ jsx6(TerminalCursor, {})
         ]
       }
     );
@@ -443,8 +539,8 @@ var TerminalInput = React5.forwardRef(
 TerminalInput.displayName = "TerminalInput";
 
 // src/primitives/drop-zone.tsx
-import { useCallback as useCallback2, useRef as useRef2, useState as useState3 } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useCallback as useCallback2, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function DropZone({
   onDrop,
   accept,
@@ -457,7 +553,7 @@ function DropZone({
   className
 }) {
   const [dragOver, setDragOver] = useState3(false);
-  const counter = useRef2(0);
+  const counter = useRef3(0);
   const isAccepted = useCallback2(
     (file) => {
       if (!accept) return true;
@@ -500,7 +596,7 @@ function DropZone({
     },
     [disabled, accept, isAccepted, onDrop]
   );
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       onDragEnter: handleDragEnter,
@@ -509,15 +605,15 @@ function DropZone({
       onDrop: handleDrop,
       className: cn("relative", className),
       children: [
-        dragOver && (overlay || /* @__PURE__ */ jsx6("div", { className: "fixed inset-0 z-[100] flex items-center justify-center pointer-events-none bg-background", children: /* @__PURE__ */ jsxs4("div", { className: "rounded-2xl border-2 border-dashed border-border bg-card p-16 text-center shadow-[var(--shadow-dropdown)] max-w-lg mx-auto", children: [
-          /* @__PURE__ */ jsx6("div", { className: "mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl border border-border bg-[var(--accent-surface-soft)]", children: typeof icon === "string" ? /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "h-10 w-10 text-[var(--accent-text)]", children: [
-            /* @__PURE__ */ jsx6("title", { children: "Upload" }),
-            /* @__PURE__ */ jsx6("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-            /* @__PURE__ */ jsx6("polyline", { points: "17 8 12 3 7 8" }),
-            /* @__PURE__ */ jsx6("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
+        dragOver && (overlay || /* @__PURE__ */ jsx7("div", { className: "fixed inset-0 z-[100] flex items-center justify-center pointer-events-none bg-background", children: /* @__PURE__ */ jsxs5("div", { className: "rounded-2xl border-2 border-dashed border-border bg-card p-16 text-center shadow-[var(--shadow-dropdown)] max-w-lg mx-auto", children: [
+          /* @__PURE__ */ jsx7("div", { className: "mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl border border-border bg-[var(--accent-surface-soft)]", children: typeof icon === "string" ? /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "h-10 w-10 text-[var(--accent-text)]", children: [
+            /* @__PURE__ */ jsx7("title", { children: "Upload" }),
+            /* @__PURE__ */ jsx7("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+            /* @__PURE__ */ jsx7("polyline", { points: "17 8 12 3 7 8" }),
+            /* @__PURE__ */ jsx7("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
           ] }) : icon }),
-          /* @__PURE__ */ jsx6("h2", { className: "text-2xl font-bold text-foreground", children: title }),
-          /* @__PURE__ */ jsx6("p", { className: "mt-2 text-sm text-muted-foreground", children: description })
+          /* @__PURE__ */ jsx7("h2", { className: "text-2xl font-bold text-foreground", children: title }),
+          /* @__PURE__ */ jsx7("p", { className: "mt-2 text-sm text-muted-foreground", children: description })
         ] }) })),
         children
       ]
@@ -527,7 +623,7 @@ function DropZone({
 
 // src/primitives/upload-progress.tsx
 import { AlertCircle as AlertCircle2, CheckCircle2 as CheckCircle22, FileText, Loader2, RefreshCw, X as X2 } from "lucide-react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes}B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}KB`;
@@ -535,7 +631,7 @@ function formatSize(bytes) {
 }
 function UploadProgress({ files, onRemove, onRetry, className }) {
   if (files.length === 0) return null;
-  return /* @__PURE__ */ jsx7("div", { className: cn("space-y-2", className), children: files.map((file) => /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx8("div", { className: cn("space-y-2", className), children: files.map((file) => /* @__PURE__ */ jsxs6(
     "div",
     {
       className: cn(
@@ -543,41 +639,41 @@ function UploadProgress({ files, onRemove, onRetry, className }) {
         file.status === "error" ? "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)]" : file.status === "complete" ? "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]" : "border-border bg-card"
       ),
       children: [
-        file.status === "complete" && /* @__PURE__ */ jsx7(CheckCircle22, { className: "h-4 w-4 shrink-0 text-[var(--surface-success-text)]" }),
-        file.status === "error" && /* @__PURE__ */ jsx7(AlertCircle2, { className: "h-4 w-4 shrink-0 text-[var(--surface-danger-text)]" }),
-        file.status === "uploading" && /* @__PURE__ */ jsx7(Loader2, { className: "h-4 w-4 shrink-0 animate-spin text-primary" }),
-        file.status === "pending" && /* @__PURE__ */ jsx7(FileText, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-        /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx7("span", { className: "truncate font-medium text-foreground", children: file.name }),
-            /* @__PURE__ */ jsx7("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatSize(file.size) })
+        file.status === "complete" && /* @__PURE__ */ jsx8(CheckCircle22, { className: "h-4 w-4 shrink-0 text-[var(--surface-success-text)]" }),
+        file.status === "error" && /* @__PURE__ */ jsx8(AlertCircle2, { className: "h-4 w-4 shrink-0 text-[var(--surface-danger-text)]" }),
+        file.status === "uploading" && /* @__PURE__ */ jsx8(Loader2, { className: "h-4 w-4 shrink-0 animate-spin text-primary" }),
+        file.status === "pending" && /* @__PURE__ */ jsx8(FileText, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsxs6("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx8("span", { className: "truncate font-medium text-foreground", children: file.name }),
+            /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatSize(file.size) })
           ] }),
-          file.status === "uploading" && file.progress !== void 0 && /* @__PURE__ */ jsx7("div", { className: "mt-1 h-1 w-full overflow-hidden rounded-full bg-muted/50", children: /* @__PURE__ */ jsx7(
+          file.status === "uploading" && file.progress !== void 0 && /* @__PURE__ */ jsx8("div", { className: "mt-1 h-1 w-full overflow-hidden rounded-full bg-muted/50", children: /* @__PURE__ */ jsx8(
             "div",
             {
               className: "h-full rounded-full bg-primary transition-all",
               style: { width: `${file.progress}%` }
             }
           ) }),
-          file.status === "error" && file.error && /* @__PURE__ */ jsx7("p", { className: "mt-0.5 text-xs text-[var(--surface-danger-text)]", children: file.error })
+          file.status === "error" && file.error && /* @__PURE__ */ jsx8("p", { className: "mt-0.5 text-xs text-[var(--surface-danger-text)]", children: file.error })
         ] }),
-        /* @__PURE__ */ jsxs5("div", { className: "flex shrink-0 items-center gap-1", children: [
-          file.status === "error" && onRetry && /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsxs6("div", { className: "flex shrink-0 items-center gap-1", children: [
+          file.status === "error" && onRetry && /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
               onClick: () => onRetry(file.id),
               className: "rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-              children: /* @__PURE__ */ jsx7(RefreshCw, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ jsx8(RefreshCw, { className: "h-3.5 w-3.5" })
             }
           ),
-          onRemove && /* @__PURE__ */ jsx7(
+          onRemove && /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
               onClick: () => onRemove(file.id),
               className: "rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-              children: /* @__PURE__ */ jsx7(X2, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ jsx8(X2, { className: "h-3.5 w-3.5" })
             }
           )
         ] })
@@ -588,9 +684,9 @@ function UploadProgress({ files, onRemove, onRetry, className }) {
 }
 
 // src/primitives/sidebar-drop-zone.tsx
-import { useCallback as useCallback3, useRef as useRef3, useState as useState4 } from "react";
+import { useCallback as useCallback3, useRef as useRef4, useState as useState4 } from "react";
 import { Upload } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function SidebarDropZone({
   onDrop,
   accept,
@@ -602,7 +698,7 @@ function SidebarDropZone({
   className
 }) {
   const [dragOver, setDragOver] = useState4(false);
-  const counter = useRef3(0);
+  const counter = useRef4(0);
   const isAccepted = useCallback3(
     (file) => {
       if (!accept) return true;
@@ -650,7 +746,7 @@ function SidebarDropZone({
     [disabled, accept, isAccepted, onDrop]
   );
   const isVisible = persistent || dragOver;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       onDragEnter: handleDragEnter,
@@ -664,16 +760,16 @@ function SidebarDropZone({
         disabled && "opacity-50 pointer-events-none",
         className
       ),
-      children: isVisible && /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center gap-2 text-center", children: [
-        /* @__PURE__ */ jsx8("div", { className: cn(
+      children: isVisible && /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-center gap-2 text-center", children: [
+        /* @__PURE__ */ jsx9("div", { className: cn(
           "flex h-8 w-8 items-center justify-center rounded-lg transition-colors",
           dragOver ? "bg-[var(--brand-cool,hsl(var(--primary)))]/15 text-[var(--brand-cool,hsl(var(--primary)))]" : "text-[var(--text-muted,hsl(var(--muted-foreground)))]"
-        ), children: icon ?? /* @__PURE__ */ jsx8(Upload, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx8("p", { className: cn(
+        ), children: icon ?? /* @__PURE__ */ jsx9(Upload, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx9("p", { className: cn(
           "text-xs font-medium",
           dragOver ? "text-[var(--text-primary,hsl(var(--foreground)))]" : "text-[var(--text-muted,hsl(var(--muted-foreground)))]"
         ), children: title }),
-        description && /* @__PURE__ */ jsx8("p", { className: "text-[10px] text-[var(--text-muted,hsl(var(--muted-foreground)))]", children: description })
+        description && /* @__PURE__ */ jsx9("p", { className: "text-[10px] text-[var(--text-muted,hsl(var(--muted-foreground)))]", children: description })
       ] })
     }
   );
@@ -690,6 +786,7 @@ export {
   SelectLabel,
   SelectItem,
   SelectSeparator,
+  SegmentedControl,
   Switch,
   ToastContainer,
   ToastProvider,

package/dist/{chunk-OHPW55EV.js → chunk-QMU2PWOU.js}

@@ -255,7 +255,8 @@ function BillingDashboard({
 import { Check, Zap } from "lucide-react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function formatPrice(cents) {
-  return `$${Math.round(cents / 100)}`;
+  if (!Number.isFinite(cents) || cents < 0) return "$0";
+  return cents % 100 === 0 ? `$${cents / 100}` : `$${(cents / 100).toFixed(2)}`;
 }
 function PricingPage({
   tiers,
@@ -486,6 +487,7 @@ function UsageChart({ data, title, unit, className }) {
 
 export {
   BillingDashboard,
+  formatPrice,
   PricingPage,
   UsageChart
 };