@tangle-network/sandbox-ui 0.3.6 → 0.3.7

package/dist/{chat-container-C8eHLw8z.d.ts → chat-container-B34uj-J1.d.ts}

@@ -3,6 +3,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { S as SessionMessage, a as SessionPart } from './parts-CyGkM6Fp.js';
 import { A as AgentBranding } from './branding-DCi5VEik.js';
 import { C as CustomToolRenderer } from './tool-display-Ct9nFAzJ.js';
+import { OpenUIAction } from './openui.js';
 
 /**
  * ChatInput — message input bar with file attach, send/cancel, model selector.
@@ -57,11 +58,15 @@ interface ChatContainerProps {
     onRemoveFile?: (id: string) => void;
     onAttach?: (files: FileList) => void;
     disabled?: boolean;
+    /** Callback when an OpenUI action button is pressed within inline OpenUI blocks. */
+    onOpenUIAction?: (action: OpenUIAction) => void;
+    /** Enable rendering OpenUI schemas inline in the chat timeline. Defaults to true. */
+    enableOpenUI?: boolean;
 }
 /**
  * Full chat container: message list + auto-scroll + input area.
  * Orchestrates useRunGroups, useRunCollapseState, and useAutoScroll.
  */
-declare const ChatContainer: React.MemoExoticComponent<({ messages, partMap, isStreaming, onSend, onCancel, branding, placeholder, className, hideInput, renderToolDetail, presentation, modelLabel, onModelClick, pendingFiles, onRemoveFile, onAttach, disabled, }: ChatContainerProps) => react_jsx_runtime.JSX.Element>;
+declare const ChatContainer: React.MemoExoticComponent<({ messages, partMap, isStreaming, onSend, onCancel, branding, placeholder, className, hideInput, renderToolDetail, presentation, modelLabel, onModelClick, pendingFiles, onRemoveFile, onAttach, disabled, onOpenUIAction, enableOpenUI, }: ChatContainerProps) => react_jsx_runtime.JSX.Element>;
 
 export { ChatContainer as C, type PendingFile as P, ChatInput as a, type ChatInputProps as b, type ChatContainerProps as c };

package/dist/chat.d.ts

@@ -1,4 +1,4 @@
-export { C as ChatContainer, c as ChatContainerProps, a as ChatInput, b as ChatInputProps, P as PendingFile } from './chat-container-C8eHLw8z.js';
+export { C as ChatContainer, c as ChatContainerProps, a as ChatInput, b as ChatInputProps, P as PendingFile } from './chat-container-B34uj-J1.js';
 import * as React from 'react';
 import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -7,6 +7,7 @@ import { a as SessionPart, S as SessionMessage } from './parts-CyGkM6Fp.js';
 import { A as AgentBranding } from './branding-DCi5VEik.js';
 import { C as CustomToolRenderer } from './tool-display-Ct9nFAzJ.js';
 import { T as ToolCallData } from './tool-call-feed-D5Ume-Pt.js';
+import './openui.js';
 
 type MessageRole = "user" | "assistant" | "system";
 interface ChatMessageProps {

package/dist/chat.js

@@ -6,13 +6,17 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-4F2GJRGU.js";
+} from "./chunk-PXRPYAMM.js";
 import "./chunk-CNWVHQFY.js";
 import "./chunk-WUR652Y3.js";
 import "./chunk-HRMUF35V.js";
 import "./chunk-CJ2RYVZH.js";
 import "./chunk-BX6AQMUS.js";
+import "./chunk-YDBXQQLC.js";
+import "./chunk-TQN3VR4F.js";
 import "./chunk-LTFK464G.js";
+import "./chunk-MXCSSOGH.js";
+import "./chunk-HWLX5NME.js";
 import "./chunk-RQHJBTEU.js";
 export {
   AgentTimeline,

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
 };

package/dist/{chunk-4F2GJRGU.js → chunk-PXRPYAMM.js}

@@ -14,6 +14,9 @@ import {
 import {
   getToolDisplayMetadata
 } from "./chunk-BX6AQMUS.js";
+import {
+  OpenUIArtifactRenderer
+} from "./chunk-YDBXQQLC.js";
 import {
   Markdown
 } from "./chunk-LTFK464G.js";
@@ -516,6 +519,52 @@ import {
 } from "react";
 import { ArrowDown } from "lucide-react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var OPENUI_NODE_TYPES = /* @__PURE__ */ new Set([
+  "heading",
+  "text",
+  "badge",
+  "stat",
+  "key_value",
+  "code",
+  "markdown",
+  "table",
+  "actions",
+  "separator",
+  "stack",
+  "grid",
+  "card"
+]);
+function isOpenUINode(value) {
+  return typeof value === "object" && value !== null && "type" in value && typeof value.type === "string" && OPENUI_NODE_TYPES.has(value.type);
+}
+function extractOpenUISchema(output) {
+  if (output == null) return null;
+  if (isOpenUINode(output)) return [output];
+  if (Array.isArray(output) && output.length > 0 && output.every(isOpenUINode)) {
+    return output;
+  }
+  if (typeof output === "object" && !Array.isArray(output)) {
+    const obj = output;
+    for (const key of ["openui", "schema", "ui"]) {
+      if (obj[key]) {
+        const inner = obj[key];
+        if (isOpenUINode(inner)) return [inner];
+        if (Array.isArray(inner) && inner.length > 0 && inner.every(isOpenUINode)) {
+          return inner;
+        }
+      }
+    }
+  }
+  if (typeof output === "string") {
+    try {
+      const parsed = JSON.parse(output);
+      return extractOpenUISchema(parsed);
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}
 function formatUnknown(value) {
   if (value == null) return void 0;
   if (typeof value === "string") return value;
@@ -563,7 +612,7 @@ function mapToolPartToTimelineType(part) {
       return "unknown";
   }
 }
-function buildTimelineItems(messages, partMap, isStreaming) {
+function buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enableOpenUI = true) {
   const items = [];
   const lastAssistantMessage = [...messages].reverse().find((message) => message.role === "assistant");
   const toToolCall = (part) => {
@@ -611,6 +660,18 @@ function buildTimelineItems(messages, partMap, isStreaming) {
           calls: toolBuffer.map((part) => toToolCall(part))
         });
       }
+      if (enableOpenUI) {
+        for (const part of toolBuffer) {
+          if (part.state.status !== "completed" || !part.state.output) continue;
+          const schema = extractOpenUISchema(part.state.output);
+          if (!schema) continue;
+          items.push({
+            id: `${message.id}-openui-${part.id}`,
+            kind: "custom",
+            content: /* @__PURE__ */ jsx7("div", { className: "my-2 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)] p-4 shadow-[var(--shadow-card)]", children: /* @__PURE__ */ jsx7(OpenUIArtifactRenderer, { schema, onAction: onOpenUIAction }) })
+          });
+        }
+      }
       toolBuffer.length = 0;
     };
     parts.forEach((part, index) => {
@@ -621,6 +682,40 @@ function buildTimelineItems(messages, partMap, isStreaming) {
       }
       flushToolBuffer(index);
       if (part.type === "text" && !part.synthetic && part.text.trim()) {
+        if (enableOpenUI) {
+          const jsonMatch = part.text.match(/```(?:json)?\s*\n([\s\S]*?)\n```/);
+          if (jsonMatch) {
+            const schema = extractOpenUISchema(jsonMatch[1]);
+            if (schema) {
+              const beforeJson = part.text.slice(0, part.text.indexOf("```")).trim();
+              if (beforeJson) {
+                items.push({
+                  id: `${itemId}-text`,
+                  kind: "message",
+                  role: "assistant",
+                  content: beforeJson,
+                  timestamp: createdAtFromMessage(message)
+                });
+              }
+              items.push({
+                id: `${itemId}-openui`,
+                kind: "custom",
+                content: /* @__PURE__ */ jsx7("div", { className: "my-2 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)] p-4 shadow-[var(--shadow-card)]", children: /* @__PURE__ */ jsx7(OpenUIArtifactRenderer, { schema, onAction: onOpenUIAction }) })
+              });
+              const afterJson = part.text.slice(part.text.lastIndexOf("```") + 3).trim();
+              if (afterJson) {
+                items.push({
+                  id: `${itemId}-after`,
+                  kind: "message",
+                  role: "assistant",
+                  content: afterJson,
+                  timestamp: createdAtFromMessage(message)
+                });
+              }
+              return;
+            }
+          }
+        }
         items.push({
           id: itemId,
           kind: "message",
@@ -665,7 +760,9 @@ var ChatContainer = memo3(
     pendingFiles,
     onRemoveFile,
     onAttach,
-    disabled = false
+    disabled = false,
+    onOpenUIAction,
+    enableOpenUI = true
   }) => {
     const scrollRef = useRef2(null);
     const groups = useRunGroups({ messages, partMap, isStreaming });
@@ -677,8 +774,8 @@ var ChatContainer = memo3(
       isStreaming
     ]);
     const timeline = useMemo(
-      () => buildTimelineItems(messages, partMap, isStreaming),
-      [messages, partMap, isStreaming]
+      () => buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enableOpenUI),
+      [messages, partMap, isStreaming, onOpenUIAction, enableOpenUI]
     );
     const handleSend = useCallback2(
       (text) => {

package/dist/{chunk-QGI5E7JD.js → chunk-ZSNOGOUX.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-MUOL44AE.js";
 import {
   ChatContainer
-} from "./chunk-4F2GJRGU.js";
+} from "./chunk-PXRPYAMM.js";
 import {
   OpenUIArtifactRenderer
 } from "./chunk-YDBXQQLC.js";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { B as Button, a as ButtonProps, b as buttonVariants } from './button-CMQuQEW_.js';
-export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, Input, InputProps, Label, Logo, LogoProps, Progress, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TangleKnot, TerminalDisplay, TerminalCursor as TerminalDisplayCursor, TerminalInput as TerminalDisplayInput, TerminalLine as TerminalDisplayLine, Textarea, TextareaProps, Toast, ToastContainer, ToastProvider, badgeVariants, useToast } from './primitives.js';
+export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, Input, InputProps, Label, Logo, LogoProps, Progress, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TangleKnot, TerminalDisplay, TerminalCursor as TerminalDisplayCursor, TerminalInput as TerminalDisplayInput, TerminalLine as TerminalDisplayLine, Textarea, TextareaProps, Toast, ToastContainer, ToastProvider, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, useToast } from './primitives.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
@@ -7,7 +7,7 @@ export { AgentWorkbench, AuditCheck, AuditResults, AuditResultsProps, BannerType
 export { A as ArtifactPane, a as ArtifactPaneProps, F as FileNode, b as FileTabData, c as FileTabs, d as FileTabsProps, e as FileTree, f as FileTreeProps, g as FileTreeVisibilityOptions, h as filterFileTree } from './file-tabs-CmaoDVBI.js';
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from './openui.js';
 export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatMessage, ChatMessageProps, MessageList, MessageRole, ThinkingIndicator, ThinkingIndicatorProps, UserMessage } from './chat.js';
-export { C as ChatContainer, a as ChatInput, b as ChatInputProps, P as PendingFile } from './chat-container-C8eHLw8z.js';
+export { C as ChatContainer, a as ChatInput, b as ChatInputProps, P as PendingFile } from './chat-container-B34uj-J1.js';
 export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallGroup, d as ToolCallGroupProps, e as ToolCallStatus, f as ToolCallStep, g as ToolCallStepProps, h as ToolCallType, p as parseToolEvent } from './tool-call-feed-D5Ume-Pt.js';
 export { E as ExpandedToolDetail, I as InlineThinkingItem, c as InlineToolItem, R as RunGroup } from './expanded-tool-detail-BDi_h_dZ.js';
 import { b as ToolPart } from './parts-CyGkM6Fp.js';

package/dist/index.js

@@ -25,6 +25,7 @@ import {
   useToolCallStream
 } from "./chunk-5LV6DZZF.js";
 import {
+  DropZone,
   Label,
   Select,
   SelectContent,
@@ -44,8 +45,9 @@ import {
   TerminalLine,
   ToastContainer,
   ToastProvider,
+  UploadProgress,
   useToast
-} from "./chunk-TXI4MZAZ.js";
+} from "./chunk-CSIXZEKN.js";
 import {
   Avatar,
   AvatarFallback,
@@ -81,7 +83,7 @@ import {
   StatusBar,
   TerminalPanel,
   WorkspaceLayout
-} from "./chunk-QGI5E7JD.js";
+} from "./chunk-ZSNOGOUX.js";
 import {
   EmptyState,
   Input,
@@ -95,7 +97,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-4F2GJRGU.js";
+} from "./chunk-PXRPYAMM.js";
 import {
   useAutoScroll,
   useRunCollapseState,
@@ -348,6 +350,7 @@ export {
   DialogTrigger,
   DiffPreview,
   DirectoryPane,
+  DropZone,
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
@@ -440,6 +443,7 @@ export {
   ToolCallFeed,
   ToolCallGroup,
   ToolCallStep,
+  UploadProgress,
   UsageChart,
   UserMenu,
   UserMessage,

package/dist/primitives.d.ts

@@ -1,5 +1,6 @@
 export { B as Button, a as ButtonProps, b as buttonVariants } from './button-CMQuQEW_.js';
 import * as React$1 from 'react';
+import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -230,4 +231,47 @@ interface TerminalInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputE
 }
 declare const TerminalInput: React$1.ForwardRefExoticComponent<TerminalInputProps & React$1.RefAttributes<HTMLInputElement>>;
 
-export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, Input, type InputProps, Label, Logo, type LogoProps, Progress, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Skeleton, SkeletonCard, SkeletonTable, StatCard, type StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, type TextareaProps, type Toast, ToastContainer, ToastProvider, badgeVariants, useToast };
+interface DropZoneProps {
+    /** Called with dropped files */
+    onDrop: (files: File[]) => void;
+    /** Accepted file types (e.g. ".pdf,.csv,.xlsx") */
+    accept?: string;
+    /** Whether drop zone is active */
+    disabled?: boolean;
+    /** Custom overlay content (replaces default) */
+    overlay?: ReactNode;
+    /** Overlay title */
+    title?: string;
+    /** Overlay description */
+    description?: string;
+    /** Overlay icon (Material Symbols name or ReactNode) */
+    icon?: string | ReactNode;
+    /** Children wrapped by the drop zone */
+    children: ReactNode;
+    className?: string;
+}
+declare function DropZone({ onDrop, accept, disabled, overlay, title, description, icon, children, className, }: DropZoneProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * UploadProgress — file upload status indicators.
+ *
+ * Shows a list of files being uploaded with progress bars,
+ * completion checkmarks, and error states.
+ */
+interface UploadFile {
+    id: string;
+    name: string;
+    size: number;
+    status: "pending" | "uploading" | "complete" | "error";
+    progress?: number;
+    error?: string;
+}
+interface UploadProgressProps {
+    files: UploadFile[];
+    onRemove?: (id: string) => void;
+    onRetry?: (id: string) => void;
+    className?: string;
+}
+declare function UploadProgress({ files, onRemove, onRetry, className }: UploadProgressProps): react_jsx_runtime.JSX.Element | null;
+
+export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, Input, type InputProps, Label, Logo, type LogoProps, Progress, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Skeleton, SkeletonCard, SkeletonTable, StatCard, type StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, type TextareaProps, type Toast, ToastContainer, ToastProvider, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, useToast };

package/dist/primitives.js

@@ -1,4 +1,5 @@
 import {
+  DropZone,
   Label,
   Select,
   SelectContent,
@@ -18,8 +19,9 @@ import {
   TerminalLine,
   ToastContainer,
   ToastProvider,
+  UploadProgress,
   useToast
-} from "./chunk-TXI4MZAZ.js";
+} from "./chunk-CSIXZEKN.js";
 import {
   Avatar,
   AvatarFallback,
@@ -120,6 +122,7 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
+  DropZone,
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
@@ -175,6 +178,7 @@ export {
   Textarea,
   ToastContainer,
   ToastProvider,
+  UploadProgress,
   badgeVariants,
   buttonVariants,
   useToast

package/dist/workspace.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { F as FileNode, g as FileTreeVisibilityOptions, b as FileTabData } from './file-tabs-CmaoDVBI.js';
 export { A as ArtifactPane, a as ArtifactPaneProps } from './file-tabs-CmaoDVBI.js';
-import { c as ChatContainerProps } from './chat-container-C8eHLw8z.js';
+import { c as ChatContainerProps } from './chat-container-B34uj-J1.js';
 import { OpenUIComponentNode, OpenUIAction } from './openui.js';
 import './parts-CyGkM6Fp.js';
 import './branding-DCi5VEik.js';

package/dist/workspace.js

@@ -8,9 +8,9 @@ import {
   StatusBar,
   TerminalPanel,
   WorkspaceLayout
-} from "./chunk-QGI5E7JD.js";
+} from "./chunk-ZSNOGOUX.js";
 import "./chunk-MUOL44AE.js";
-import "./chunk-4F2GJRGU.js";
+import "./chunk-PXRPYAMM.js";
 import "./chunk-CNWVHQFY.js";
 import "./chunk-WUR652Y3.js";
 import "./chunk-HRMUF35V.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "type": "module",
   "main": "dist/index.js",