@tangle-network/sandbox-ui 0.3.6 → 0.3.10

package/dist/{chunk-WUR652Y3.js → chunk-72UEKFZ2.js}

@@ -759,7 +759,8 @@ var InlineToolItem = memo9(
     renderToolDetail,
     groupPosition = "single",
     className,
-    contentClassName
+    contentClassName,
+    actions
   }) => {
     const [open, setOpen] = useState3(false);
     const meta = getToolDisplayMetadata(part);
@@ -780,49 +781,59 @@ var InlineToolItem = memo9(
       last: "rounded-t-[var(--radius-sm)] rounded-b-[var(--radius-lg)]"
     }[groupPosition];
     return /* @__PURE__ */ jsxs10(Collapsible.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx11(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs10(
-        "button",
-        {
-          className: cn(
-            "w-full border text-left transition-colors",
-            "border-[var(--border-subtle)] bg-[var(--bg-card)] hover:border-[var(--border-accent-hover)] hover:bg-[var(--bg-hover)]/35",
-            open && "border-[var(--border-accent)] bg-[var(--bg-hover)]/30",
-            shapeClass,
-            className
-          ),
-          children: [
-            /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-3 px-3 py-3", children: [
-              /* @__PURE__ */ jsx11(
-                "div",
-                {
-                  className: cn(
-                    "flex h-8 w-8 shrink-0 items-center justify-center rounded-[var(--radius-md)] border",
-                    isRunning && "border-[var(--border-accent)] bg-[var(--brand-cool)]/12 text-[var(--brand-cool)]",
-                    isComplete && "border-emerald-500/30 bg-emerald-500/12 text-emerald-200",
-                    isError && "border-red-500/30 bg-red-500/10 text-red-200",
-                    !isRunning && !isComplete && !isError && "border-[var(--border-subtle)] bg-[var(--bg-section)] text-[var(--text-muted)]"
-                  ),
-                  children: isRunning ? /* @__PURE__ */ jsx11(Loader24, { className: "h-4 w-4 animate-spin" }) : isComplete ? /* @__PURE__ */ jsx11(CheckCircle2, { className: "h-4 w-4" }) : isError ? /* @__PURE__ */ jsx11(AlertCircle2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx11(DefaultIcon, { className: "h-4 w-4" })
-                }
-              ),
-              /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx11("span", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: meta.title }),
-                  isError ? /* @__PURE__ */ jsx11("span", { className: "rounded-full border border-red-500/30 bg-red-500/10 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.06em] text-red-200", children: "Failed" }) : null,
-                  isRunning ? /* @__PURE__ */ jsx11("span", { className: "rounded-full border border-[var(--border-accent)] bg-[var(--brand-cool)]/10 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.06em] text-[var(--brand-cool)]", children: "Running" }) : null
+      /* @__PURE__ */ jsxs10("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx11(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs10(
+          "button",
+          {
+            className: cn(
+              "w-full border text-left transition-colors",
+              "border-[var(--border-subtle)] bg-[var(--bg-card)] hover:border-[var(--border-accent-hover)] hover:bg-[var(--bg-hover)]/35",
+              open && "border-[var(--border-accent)] bg-[var(--bg-hover)]/30",
+              shapeClass,
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-3 px-3 py-3", children: [
+                /* @__PURE__ */ jsx11(
+                  "div",
+                  {
+                    className: cn(
+                      "flex h-8 w-8 shrink-0 items-center justify-center rounded-[var(--radius-md)] border",
+                      isRunning && "border-[var(--border-accent)] bg-[var(--brand-cool)]/12 text-[var(--brand-cool)]",
+                      isComplete && "border-emerald-500/30 bg-emerald-500/12 text-emerald-200",
+                      isError && "border-red-500/30 bg-red-500/10 text-red-200",
+                      !isRunning && !isComplete && !isError && "border-[var(--border-subtle)] bg-[var(--bg-section)] text-[var(--text-muted)]"
+                    ),
+                    children: isRunning ? /* @__PURE__ */ jsx11(Loader24, { className: "h-4 w-4 animate-spin" }) : isComplete ? /* @__PURE__ */ jsx11(CheckCircle2, { className: "h-4 w-4" }) : isError ? /* @__PURE__ */ jsx11(AlertCircle2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx11(DefaultIcon, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx11("span", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: meta.title }),
+                    isError ? /* @__PURE__ */ jsx11("span", { className: "rounded-full border border-red-500/30 bg-red-500/10 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.06em] text-red-200", children: "Failed" }) : null,
+                    isRunning ? /* @__PURE__ */ jsx11("span", { className: "rounded-full border border-[var(--border-accent)] bg-[var(--brand-cool)]/10 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.06em] text-[var(--brand-cool)]", children: "Running" }) : null
+                  ] }),
+                  meta.description ? /* @__PURE__ */ jsx11("div", { className: "mt-1 truncate text-xs font-[var(--font-mono)] text-[var(--text-muted)]", children: meta.description }) : null
                 ] }),
-                meta.description ? /* @__PURE__ */ jsx11("div", { className: "mt-1 truncate text-xs font-[var(--font-mono)] text-[var(--text-muted)]", children: meta.description }) : null
+                /* @__PURE__ */ jsxs10("div", { className: "flex shrink-0 items-center gap-2", children: [
+                  isRunning && startTime ? /* @__PURE__ */ jsx11(LiveDuration, { startTime }) : null,
+                  !isRunning && durationMs != null ? /* @__PURE__ */ jsx11("span", { className: "rounded-full border border-[var(--border-subtle)] bg-[var(--bg-section)] px-2 py-0.5 text-[11px] font-[var(--font-mono)] text-[var(--text-muted)]", children: formatDuration(durationMs) }) : null,
+                  open ? /* @__PURE__ */ jsx11(ChevronDown2, { className: "h-3.5 w-3.5 text-[var(--text-muted)]" }) : /* @__PURE__ */ jsx11(ChevronRight2, { className: "h-3.5 w-3.5 text-[var(--text-muted)]" })
+                ] })
               ] }),
-              /* @__PURE__ */ jsxs10("div", { className: "flex shrink-0 items-center gap-2", children: [
-                isRunning && startTime ? /* @__PURE__ */ jsx11(LiveDuration, { startTime }) : null,
-                !isRunning && durationMs != null ? /* @__PURE__ */ jsx11("span", { className: "rounded-full border border-[var(--border-subtle)] bg-[var(--bg-section)] px-2 py-0.5 text-[11px] font-[var(--font-mono)] text-[var(--text-muted)]", children: formatDuration(durationMs) }) : null,
-                open ? /* @__PURE__ */ jsx11(ChevronDown2, { className: "h-3.5 w-3.5 text-[var(--text-muted)]" }) : /* @__PURE__ */ jsx11(ChevronRight2, { className: "h-3.5 w-3.5 text-[var(--text-muted)]" })
-              ] })
-            ] }),
-            errorText && !open ? /* @__PURE__ */ jsx11("div", { className: "border-t border-[var(--border-subtle)] px-3 py-2 text-xs text-red-200", children: errorText }) : null
-          ]
-        }
-      ) }),
+              errorText && !open ? /* @__PURE__ */ jsx11("div", { className: "border-t border-[var(--border-subtle)] px-3 py-2 text-xs text-red-200", children: errorText }) : null
+            ]
+          }
+        ) }),
+        actions ? /* @__PURE__ */ jsx11(
+          "div",
+          {
+            className: "flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1",
+            onClick: (event) => event.stopPropagation(),
+            children: actions
+          }
+        ) : null
+      ] }),
       /* @__PURE__ */ jsx11(Collapsible.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx11("div", { className: cn("mt-2 pl-4", contentClassName), children: renderToolDetail?.(part) ?? /* @__PURE__ */ jsx11(ExpandedToolDetail, { part }) }) })
     ] });
   }
@@ -967,14 +978,17 @@ function CategoryBadges({ categories }) {
     [categories]
   );
   if (sorted.length === 0) return null;
-  return /* @__PURE__ */ jsx13("div", { className: "flex items-center gap-1", children: sorted.map((cat) => {
+  return /* @__PURE__ */ jsx13("div", { className: "flex items-center gap-1.5", children: sorted.map((cat) => {
     const Icon = CATEGORY_ICON_MAP[cat] ?? Settings2;
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsxs12(
       "span",
       {
         title: cat,
-        className: "flex h-6 w-6 items-center justify-center rounded-full border border-[var(--border-subtle)] bg-[var(--bg-section)] text-[var(--text-muted)]",
-        children: /* @__PURE__ */ jsx13(Icon, { className: "h-3.5 w-3.5" })
+        className: "flex h-7 items-center gap-1 rounded-full border border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.04),transparent)] px-2 text-[11px] uppercase tracking-[0.12em] text-[var(--text-muted)]",
+        children: [
+          /* @__PURE__ */ jsx13(Icon, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx13("span", { children: cat })
+        ]
       },
       cat
     );
@@ -1010,7 +1024,9 @@ var RunGroup = memo11(
     collapsed,
     onToggle,
     branding = DEFAULT_BRANDING,
-    renderToolDetail
+    renderToolDetail,
+    headerActions,
+    renderToolActions
   }) => {
     const allParts = useMemo5(() => {
       const parts = [];
@@ -1033,53 +1049,56 @@ var RunGroup = memo11(
       return null;
     }
     return /* @__PURE__ */ jsxs12(Collapsible3.Root, { open: !collapsed, onOpenChange: () => onToggle(), children: [
-      /* @__PURE__ */ jsx13(Collapsible3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx13(
-        "button",
-        {
-          className: cn(
-            "w-full rounded-[var(--radius-xl)] border px-4 py-3 text-left transition-colors",
-            "bg-[var(--bg-card)] hover:bg-[var(--bg-hover)]/28",
-            collapsed ? branding.borderClass : "border-[var(--border-subtle)]",
-            branding.bgClass
-          ),
-          children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx13(
-              "div",
-              {
-                className: cn(
-                  "flex h-10 w-10 shrink-0 items-center justify-center rounded-[var(--radius-lg)] border bg-[var(--bg-section)]",
-                  branding.borderClass
-                ),
-                children: /* @__PURE__ */ jsx13(Bot2, { className: cn("h-4 w-4", branding.accentClass) })
-              }
+      /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx13(Collapsible3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx13(
+          "button",
+          {
+            className: cn(
+              "w-full rounded-[calc(var(--radius-xl)+2px)] border px-4 py-3.5 text-left transition-colors shadow-[var(--shadow-card)] backdrop-blur-sm",
+              "bg-[radial-gradient(circle_at_top_left,rgba(96,165,250,0.12),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.03),transparent_30%),var(--bg-card)] hover:bg-[radial-gradient(circle_at_top_left,rgba(96,165,250,0.16),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.04),transparent_30%),var(--bg-card)]",
+              collapsed ? branding.borderClass : "border-[var(--border-subtle)]",
+              branding.bgClass
             ),
-            /* @__PURE__ */ jsxs12("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx13("span", { className: cn("text-sm font-semibold", branding.textClass), children: branding.label }),
-                isStreaming ? /* @__PURE__ */ jsxs12("span", { className: "inline-flex items-center gap-1 rounded-full border border-[var(--border-accent)] bg-[var(--brand-cool)]/10 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--brand-cool)]", children: [
-                  /* @__PURE__ */ jsx13(Loader25, { className: "h-3 w-3 animate-spin" }),
-                  "Running"
-                ] }) : /* @__PURE__ */ jsxs12("span", { className: "inline-flex items-center gap-1 rounded-full border border-[var(--border-subtle)] bg-[var(--bg-section)] px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--text-muted)]", children: [
-                  /* @__PURE__ */ jsx13(Sparkles, { className: "h-3 w-3" }),
-                  "Complete"
+            children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx13(
+                "div",
+                {
+                  className: cn(
+                    "flex h-11 w-11 shrink-0 items-center justify-center rounded-[calc(var(--radius-lg)+2px)] border bg-[linear-gradient(135deg,rgba(82,164,255,0.22),rgba(82,164,255,0.06))] shadow-[var(--shadow-accent)]",
+                    branding.borderClass
+                  ),
+                  children: /* @__PURE__ */ jsx13(Bot2, { className: cn("h-4 w-4", branding.accentClass) })
+                }
+              ),
+              /* @__PURE__ */ jsxs12("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap items-center gap-2", children: [
+                  /* @__PURE__ */ jsx13("span", { className: cn("text-sm font-semibold tracking-[0.01em]", branding.textClass), children: branding.label }),
+                  isStreaming ? /* @__PURE__ */ jsxs12("span", { className: "inline-flex items-center gap-1 rounded-full border border-[var(--border-accent)] bg-[linear-gradient(135deg,rgba(82,164,255,0.22),rgba(82,164,255,0.08))] px-2.5 py-0.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--brand-cool)]", children: [
+                    /* @__PURE__ */ jsx13(Loader25, { className: "h-3 w-3 animate-spin" }),
+                    "Running"
+                  ] }) : /* @__PURE__ */ jsxs12("span", { className: "inline-flex items-center gap-1 rounded-full border border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.04),transparent)] px-2.5 py-0.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--text-muted)]", children: [
+                    /* @__PURE__ */ jsx13(Sparkles, { className: "h-3 w-3" }),
+                    "Complete"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs12("div", { className: "mt-1 flex flex-wrap items-center gap-2 text-xs text-[var(--text-muted)]", children: [
+                  renderSummary(run) ? /* @__PURE__ */ jsx13("span", { children: renderSummary(run) }) : null,
+                  collapsed && run.summaryText ? /* @__PURE__ */ jsx13("span", { className: "min-w-0 truncate text-[var(--text-secondary)]", children: run.summaryText }) : null
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs12("div", { className: "mt-1 flex flex-wrap items-center gap-2 text-xs text-[var(--text-muted)]", children: [
-                renderSummary(run) ? /* @__PURE__ */ jsx13("span", { children: renderSummary(run) }) : null,
-                collapsed && run.summaryText ? /* @__PURE__ */ jsx13("span", { className: "min-w-0 truncate text-[var(--text-secondary)]", children: run.summaryText }) : null
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx13(CategoryBadges, { categories: stats.toolCategories }),
-            !collapsed ? /* @__PURE__ */ jsx13(ChevronDown4, { className: "h-4 w-4 shrink-0 text-[var(--text-muted)]" }) : /* @__PURE__ */ jsx13(ChevronRight4, { className: "h-4 w-4 shrink-0 text-[var(--text-muted)]" })
-          ] })
-        }
-      ) }),
-      collapsed && run.summaryText && /* @__PURE__ */ jsx13("div", { className: "px-4 py-2 text-sm text-[var(--text-muted)] line-clamp-2", children: run.summaryText }),
+              /* @__PURE__ */ jsx13(CategoryBadges, { categories: stats.toolCategories }),
+              !collapsed ? /* @__PURE__ */ jsx13(ChevronDown4, { className: "h-4 w-4 shrink-0 text-[var(--text-muted)]" }) : /* @__PURE__ */ jsx13(ChevronRight4, { className: "h-4 w-4 shrink-0 text-[var(--text-muted)]" })
+            ] })
+          }
+        ) }),
+        headerActions ? /* @__PURE__ */ jsx13("div", { className: "flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1", children: headerActions }) : null
+      ] }),
+      collapsed && run.summaryText && /* @__PURE__ */ jsx13("div", { className: "px-4 py-2 text-sm leading-6 text-[var(--text-muted)] line-clamp-2", children: run.summaryText }),
       /* @__PURE__ */ jsx13(Collapsible3.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx13(
         "div",
         {
           className: cn(
-            "mt-2 space-y-2 rounded-[var(--radius-xl)] border border-[var(--border-subtle)] p-3",
+            "mt-2 space-y-3 rounded-[calc(var(--radius-xl)+2px)] border border-[var(--border-subtle)] p-3.5 shadow-[var(--shadow-card)]",
             branding.containerBgClass
           ),
           children: allParts.map(({ part, msgId, index }, partIndex) => {
@@ -1090,7 +1109,12 @@ var RunGroup = memo11(
                 {
                   part,
                   renderToolDetail,
-                  groupPosition: getToolGroupPosition(partIndex, allParts)
+                  groupPosition: getToolGroupPosition(partIndex, allParts),
+                  actions: renderToolActions?.(part, {
+                    run,
+                    messageId: msgId,
+                    partIndex: index
+                  })
                 },
                 key
               );
@@ -1109,7 +1133,7 @@ var RunGroup = memo11(
               return /* @__PURE__ */ jsx13(
                 "div",
                 {
-                  className: "rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-4",
+                  className: "rounded-[calc(var(--radius-lg)+2px)] border border-[var(--border-subtle)] bg-[radial-gradient(circle_at_top_left,rgba(96,165,250,0.08),transparent_36%),linear-gradient(180deg,rgba(255,255,255,0.03),transparent_30%),var(--bg-card)] px-4 py-4",
                   children: /* @__PURE__ */ jsx13(Markdown, { children: part.text })
                 },
                 key

package/dist/{chunk-TXI4MZAZ.js → chunk-CSIXZEKN.js}

@@ -530,6 +530,155 @@ var TerminalInput = React6.forwardRef(
 );
 TerminalInput.displayName = "TerminalInput";
 
+// src/primitives/drop-zone.tsx
+import { useCallback as useCallback2, useRef as useRef2, useState as useState3 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function DropZone({
+  onDrop,
+  accept,
+  disabled,
+  overlay,
+  title = "Drop files to upload",
+  description = "Your files will be securely stored in the workspace.",
+  icon = "cloud_upload",
+  children,
+  className
+}) {
+  const [dragOver, setDragOver] = useState3(false);
+  const counter = useRef2(0);
+  const isAccepted = useCallback2(
+    (file) => {
+      if (!accept) return true;
+      const extensions = accept.split(",").map((ext) => ext.trim().toLowerCase());
+      const fileName = file.name.toLowerCase();
+      return extensions.some((ext) => fileName.endsWith(ext));
+    },
+    [accept]
+  );
+  const handleDragEnter = useCallback2(
+    (e) => {
+      e.preventDefault();
+      if (disabled) return;
+      counter.current++;
+      if (e.dataTransfer?.types.includes("Files")) setDragOver(true);
+    },
+    [disabled]
+  );
+  const handleDragLeave = useCallback2((e) => {
+    e.preventDefault();
+    counter.current--;
+    if (counter.current === 0) setDragOver(false);
+  }, []);
+  const handleDragOver = useCallback2(
+    (e) => {
+      e.preventDefault();
+      if (!disabled) e.dataTransfer.dropEffect = "copy";
+    },
+    [disabled]
+  );
+  const handleDrop = useCallback2(
+    (e) => {
+      e.preventDefault();
+      counter.current = 0;
+      setDragOver(false);
+      if (disabled) return;
+      const allFiles = Array.from(e.dataTransfer?.files || []);
+      const accepted = accept ? allFiles.filter(isAccepted) : allFiles;
+      if (accepted.length > 0) onDrop(accepted);
+    },
+    [disabled, accept, isAccepted, onDrop]
+  );
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      className: cn("relative", className),
+      children: [
+        dragOver && (overlay || /* @__PURE__ */ jsx7("div", { className: "fixed inset-0 z-[100] flex items-center justify-center pointer-events-none bg-black/20 backdrop-blur-sm", children: /* @__PURE__ */ jsxs5("div", { className: "rounded-3xl border-2 border-dashed border-[hsl(var(--ring))] bg-[hsl(var(--card))] p-16 text-center shadow-2xl 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 bg-[hsl(var(--primary))]/10", children: typeof icon === "string" ? /* @__PURE__ */ jsx7("span", { className: "material-symbols-outlined text-5xl text-[hsl(var(--primary))]", children: icon }) : icon }),
+          /* @__PURE__ */ jsx7("h2", { className: "text-2xl font-extrabold text-[hsl(var(--foreground))]", children: title }),
+          /* @__PURE__ */ jsx7("p", { className: "mt-2 text-[hsl(var(--muted-foreground))]", children: description })
+        ] }) })),
+        children
+      ]
+    }
+  );
+}
+
+// src/primitives/upload-progress.tsx
+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`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+}
+function UploadProgress({ files, onRemove, onRetry, className }) {
+  if (files.length === 0) return null;
+  return /* @__PURE__ */ jsx8("div", { className: cn("space-y-2", className), children: files.map((file) => /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-3 rounded-lg border px-3 py-2 text-sm",
+        file.status === "error" ? "border-[hsl(var(--destructive))]/20 bg-[hsl(var(--destructive))]/5" : file.status === "complete" ? "border-[hsl(var(--success))]/20 bg-[hsl(var(--success))]/5" : "border-[hsl(var(--border))] bg-[hsl(var(--card))]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx8(
+          "span",
+          {
+            className: cn(
+              "material-symbols-outlined text-base shrink-0",
+              file.status === "complete" && "text-[hsl(var(--success))]",
+              file.status === "error" && "text-[hsl(var(--destructive))]",
+              file.status === "uploading" && "text-[hsl(var(--primary))] animate-pulse",
+              file.status === "pending" && "text-[hsl(var(--muted-foreground))]"
+            ),
+            style: file.status === "complete" ? { fontVariationSettings: "'FILL' 1" } : void 0,
+            children: file.status === "complete" ? "check_circle" : file.status === "error" ? "error" : file.status === "uploading" ? "progress_activity" : "description"
+          }
+        ),
+        /* @__PURE__ */ jsxs6("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx8("span", { className: "truncate font-medium text-[hsl(var(--foreground))]", children: file.name }),
+            /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-xs text-[hsl(var(--muted-foreground))]", children: formatSize(file.size) })
+          ] }),
+          file.status === "uploading" && file.progress !== void 0 && /* @__PURE__ */ jsx8("div", { className: "mt-1 h-1 w-full rounded-full bg-[hsl(var(--muted))] overflow-hidden", children: /* @__PURE__ */ jsx8(
+            "div",
+            {
+              className: "h-full rounded-full bg-[hsl(var(--primary))] transition-all",
+              style: { width: `${file.progress}%` }
+            }
+          ) }),
+          file.status === "error" && file.error && /* @__PURE__ */ jsx8("p", { className: "mt-0.5 text-xs text-[hsl(var(--destructive))]", children: file.error })
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 shrink-0", children: [
+          file.status === "error" && onRetry && /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRetry(file.id),
+              className: "rounded p-1 text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))] transition-colors",
+              children: /* @__PURE__ */ jsx8("span", { className: "material-symbols-outlined text-sm", children: "refresh" })
+            }
+          ),
+          onRemove && /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRemove(file.id),
+              className: "rounded p-1 text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))] transition-colors",
+              children: /* @__PURE__ */ jsx8("span", { className: "material-symbols-outlined text-sm", children: "close" })
+            }
+          )
+        ] })
+      ]
+    },
+    file.id
+  )) });
+}
+
 export {
   Select,
   SelectGroup,
@@ -550,5 +699,7 @@ export {
   TerminalDisplay,
   TerminalLine,
   TerminalCursor,
-  TerminalInput
+  TerminalInput,
+  DropZone,
+  UploadProgress
 };