@tangle-network/sandbox-ui 0.2.2 → 0.3.3

package/dist/files.d.ts

@@ -1,38 +1,18 @@
+import { b as FileTabData, a as ArtifactPaneProps } from './file-tabs-CmaoDVBI.js';
+export { F as FileNode, c as FileTabs, d as FileTabsProps, e as FileTree, f as FileTreeProps, g as FileTreeVisibilityOptions, h as filterFileTree } from './file-tabs-CmaoDVBI.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-
-/**
- * FileTree — directory browser with file type icons.
- *
- * Renders a hierarchical file system view. Clicking a file
- * triggers onSelect with the full path.
- */
-interface FileNode {
-    name: string;
-    path: string;
-    type: "file" | "directory";
-    children?: FileNode[];
-    size?: number;
-    mimeType?: string;
-}
-interface FileTreeProps {
-    root: FileNode;
-    selectedPath?: string;
-    onSelect?: (path: string, node: FileNode) => void;
-    className?: string;
-    defaultExpanded?: boolean;
-}
-declare function FileTree({ root, selectedPath, onSelect, className, defaultExpanded }: FileTreeProps): react_jsx_runtime.JSX.Element;
+import 'react';
 
 /**
  * FilePreview — universal file renderer.
  *
  * Renders any file type beautifully:
- * - PDF: react-pdf paginated viewer
- * - CSV/XLSX: sortable table
- * - Code (py/json/yaml/ts/js): syntax highlighted
+ * - PDF: embedded viewer
+ * - CSV/XLSX: tabular preview
+ * - Code (py/json/yaml/ts/js): line-numbered viewer
  * - Markdown: rendered prose
  * - Images: inline display
- * - Text: monospace pre
+ * - Text: monospace preview
  */
 interface FilePreviewProps {
     filename: string;
@@ -41,26 +21,27 @@ interface FilePreviewProps {
     mimeType?: string;
     onClose?: () => void;
     onDownload?: () => void;
+    hideHeader?: boolean;
     className?: string;
 }
-declare function FilePreview({ filename, content, blobUrl, mimeType, onClose, onDownload, className, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
+declare function FilePreview({ filename, content, blobUrl, mimeType, onClose, onDownload, hideHeader, className, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
 
-/**
- * FileTabs — tab bar for open files in the preview panel.
- */
-interface FileTabData {
-    id: string;
-    name: string;
-    path: string;
-    dirty?: boolean;
-}
-interface FileTabsProps {
-    tabs: FileTabData[];
-    activeId?: string;
-    onSelect: (id: string) => void;
-    onClose: (id: string) => void;
+interface FileArtifactPaneProps extends Omit<FilePreviewProps, "className"> {
+    path?: string;
+    tabs?: FileTabData[];
+    activeTabId?: string;
+    onTabSelect?: (id: string) => void;
+    onTabClose?: (id: string) => void;
+    eyebrow?: ArtifactPaneProps["eyebrow"];
+    meta?: ArtifactPaneProps["meta"];
+    toolbar?: ArtifactPaneProps["toolbar"];
+    footer?: ArtifactPaneProps["footer"];
     className?: string;
 }
-declare function FileTabs({ tabs, activeId, onSelect, onClose, className }: FileTabsProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * FileArtifactPane — opinionated artifact frame for file previews with tabs and
+ * header actions.
+ */
+declare function FileArtifactPane({ filename, content, blobUrl, mimeType, onClose, onDownload, path, tabs, activeTabId, onTabSelect, onTabClose, eyebrow, meta, toolbar, footer, className, }: FileArtifactPaneProps): react_jsx_runtime.JSX.Element;
 
-export { type FileNode, FilePreview, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps };
+export { FileArtifactPane, type FileArtifactPaneProps, FilePreview, type FilePreviewProps, FileTabData };

package/dist/files.js

@@ -1,11 +1,16 @@
 import {
+  FileArtifactPane,
   FilePreview,
   FileTabs,
-  FileTree
-} from "./chunk-L6ZDH5F4.js";
+  FileTree,
+  filterFileTree
+} from "./chunk-JF6E2DS5.js";
+import "./chunk-LTFK464G.js";
 import "./chunk-RQHJBTEU.js";
 export {
+  FileArtifactPane,
   FilePreview,
   FileTabs,
-  FileTree
+  FileTree,
+  filterFileTree
 };

package/{src/styles → dist}/globals.css

@@ -1,77 +1,24 @@
+@import "./tokens.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
   :root {
-    --background: 0 0% 98%;
-    --foreground: 0 0% 9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 9%;
-    --primary: 270 80% 55%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 0 0% 94%;
-    --secondary-foreground: 0 0% 20%;
-    --muted: 0 0% 94%;
-    --muted-foreground: 0 0% 40%;
-    --accent: 0 0% 94%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 0 0% 88%;
-    --input: 0 0% 88%;
-    --ring: 270 80% 55%;
-    --radius: 0.625rem;
-
-    /* Product accent colors -- Tangle purple */
-    --sandbox: 270 80% 55%;
-    --sandbox-glow: 270 75% 58%;
-
-    /* Status colors */
-    --success: 142 71% 40%;
-    --warning: 38 92% 45%;
-    --error: 0 84% 55%;
-    --info: 217 91% 55%;
-  }
-
-  .dark {
-    --background: 0 0% 5%;
-    --foreground: 0 0% 96%;
-    --card: 0 0% 8%;
-    --card-foreground: 0 0% 96%;
-    --popover: 0 0% 8%;
-    --popover-foreground: 0 0% 96%;
-    --primary: 0 0% 96%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14%;
-    --secondary-foreground: 0 0% 96%;
-    --muted: 0 0% 14%;
-    --muted-foreground: 0 0% 72%;
-    --accent: 0 0% 16%;
-    --accent-foreground: 0 0% 96%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 96%;
-    --border: 0 0% 18%;
-    --input: 0 0% 18%;
-    --ring: 0 0% 83.1%;
-
-    --sandbox: 270 95% 65%;
-    --sandbox-glow: 270 90% 66%;
-
-    --success: 142 71% 45%;
-    --warning: 38 92% 50%;
-    --error: 0 84% 60%;
-    --info: 217 91% 60%;
+    --sandbox: var(--primary);
+    --sandbox-glow: var(--info);
   }
 
   * {
-    @apply border-border;
+    border-color: hsl(var(--border));
   }
 
   body {
-    @apply bg-background text-foreground antialiased;
+    @apply antialiased;
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: var(--font-sans);
     font-feature-settings:
       "rlig" 1,
       "calt" 1;
@@ -97,9 +44,10 @@
 }
 
 @layer utilities {
-  /* Gradient text -- Tangle purple */
+  /* Gradient text -- Tangle default accent */
   .text-gradient-sandbox {
-    @apply bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-violet-400;
+    background-image: var(--tangle-gradient);
+    @apply bg-clip-text text-transparent;
   }
 
   /* Glow effects */
@@ -109,7 +57,9 @@
 
   /* Glass effect */
   .glass {
-    @apply bg-card/80 backdrop-blur-xl border border-border/50;
+    backdrop-filter: blur(24px);
+    background-color: hsl(var(--card) / 0.8);
+    border: 1px solid hsl(var(--border) / 0.5);
   }
 
   /* Subtle noise texture */
@@ -184,8 +134,7 @@
   }
 }
 
-/* Fonts -- Inter (UI) + JetBrains Mono (code).
-   Using @font-face with font-display: swap to avoid render-blocking. */
+/* Fonts -- Inter (UI) + JetBrains Mono (code). */
 @font-face {
   font-family: "Inter";
   src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiA.woff2") format("woff2");

package/dist/hooks.d.ts

@@ -1,11 +1,12 @@
-export { A as AgentStreamEvent, a as AuthUser, b as AutomationStreamEvent, B as BotStreamEvent, C as ConnectionState, S as SSEEvent, c as SessionInfo, d as SidecarAuth, T as TaskStreamEvent, e as TerminalStreamEvent, U as UseAuthOptions, f as UseAuthResult, g as UsePtySessionOptions, h as UsePtySessionReturn, i as UseRunGroupsOptions, j as UseSSEStreamOptions, k as UseSSEStreamResult, l as UseSessionStreamOptions, m as UseSessionStreamResult, n as UseSidecarAuthOptions, o as UseToolCallStreamReturn, p as createAuthFetcher, u as useApiKey, q as useAuth, r as useAutoScroll, s as useDropdownMenu, t as usePtySession, v as useRunCollapseState, w as useRunGroups, x as useSSEStream, y as useSessionStream, z as useSidecarAuth, D as useToolCallStream } from './use-sidecar-auth-Bb0-w3lX.js';
+export { A as AuthUser, U as UseAuthOptions, a as UseAuthResult, b as UsePtySessionOptions, c as UsePtySessionReturn, d as createAuthFetcher, u as useApiKey, e as useAuth, f as usePtySession } from './use-pty-session-DeZSxOCN.js';
+export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, ConnectionState, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SessionInfo, SidecarAuth, TaskStreamEvent, TerminalStreamEvent, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseSessionStreamOptions, UseSessionStreamResult, UseSidecarAuthOptions, UseToolCallStreamReturn, useAutoScroll, useDropdownMenu, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionStream, useSidecarAuth, useToolCallStream } from './sdk-hooks.js';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { S as Session } from './sidecar-CFU2W9j1.js';
-import './tool-call-feed-D5Ume-Pt.js';
-import 'react/jsx-runtime';
 import 'react';
-import './parts-CyGkM6Fp.js';
 import './run-CtFZ6s-D.js';
+import './parts-CyGkM6Fp.js';
+import './tool-call-feed-D5Ume-Pt.js';
+import 'react/jsx-runtime';
 
 /** List all sessions for a sidecar. */
 declare function useSessions(apiUrl: string, token: string | null): _tanstack_react_query.UseQueryResult<Session[], Error>;

package/dist/hooks.js

@@ -1,24 +1,28 @@
 import {
   createAuthFetcher,
   useApiKey,
-  useAuth,
+  useAuth
+} from "./chunk-FJSVPBKY.js";
+import {
+  usePtySession
+} from "./chunk-GRYHFH5O.js";
+import {
   useDropdownMenu,
   useSSEStream,
+  useSdkSession,
   useSessionStream,
   useSidecarAuth,
   useToolCallStream
-} from "./chunk-HYEAX3DC.js";
-import {
-  usePtySession
-} from "./chunk-GRYHFH5O.js";
+} from "./chunk-5LV6DZZF.js";
+import "./chunk-CCKNIAS7.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-KMXV7DDX.js";
-import "./chunk-M6VLC32S.js";
-import "./chunk-M34OA6PQ.js";
-import "./chunk-QSQBDR3N.js";
+} from "./chunk-CNWVHQFY.js";
+import "./chunk-CJ2RYVZH.js";
+import "./chunk-BX6AQMUS.js";
+import "./chunk-LTFK464G.js";
 import "./chunk-RQHJBTEU.js";
 
 // src/hooks/use-session-crud.ts
@@ -100,6 +104,7 @@ export {
   useRunCollapseState,
   useRunGroups,
   useSSEStream,
+  useSdkSession,
   useSessionStream,
   useSessions,
   useSidecarAuth,

package/dist/index.d.ts

@@ -3,21 +3,25 @@ export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardConte
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
-export { AuditCheck, AuditResults, AuditResultsProps, BannerType, ContextBadge, FormAudit, StatusBanner, StatusBannerProps, StatusBar, StatusBarProps, TerminalLine, TerminalPanel, TerminalProps, WorkspaceLayout, WorkspaceLayoutProps } from './workspace.js';
-export { ChatContainer, ChatInput, ChatInputProps, ChatMessage, ChatMessageList, ChatMessageListProps, ChatMessageProps, Message, MessageList, MessageRole, PendingFile, ThinkingIndicator, UserMessage } from './chat.js';
+export { AgentWorkbench, AuditCheck, AuditResults, AuditResultsProps, BannerType, ContextBadge, DirectoryPane, DirectoryPaneProps, FormAudit, RuntimePane, RuntimePaneProps, SandboxWorkbench, SandboxWorkbenchArtifact, SandboxWorkbenchCustomArtifact, SandboxWorkbenchFileArtifact, SandboxWorkbenchLayoutOptions, SandboxWorkbenchMarkdownArtifact, SandboxWorkbenchOpenUIArtifact, SandboxWorkbenchProps, SandboxWorkbenchSessionProps, StatusBanner, StatusBannerProps, StatusBar, StatusBarProps, TerminalLine, TerminalPanel, TerminalProps, WorkspaceLayout, WorkspaceLayoutProps } from './workspace.js';
+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 { 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-OkXGqTHe.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';
 export { R as ReasoningPart, S as SessionMessage, a as SessionPart, T as TextPart, c as ToolState, d as ToolStatus, e as ToolTime } from './parts-CyGkM6Fp.js';
-export { FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps } from './files.js';
+export { FileArtifactPane, FileArtifactPaneProps, FilePreview, FilePreviewProps } from './files.js';
 export { Backend, BackendSelector, BackendSelectorProps, DashboardLayout, DashboardLayoutProps, DashboardUser, NavItem, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, VariantList, VariantListProps } from './dashboard.js';
-export { c as BillingDashboard, d as BillingDashboardProps, e as PricingCards, f as PricingPageProps, g as UsageChart, h as UsageChartProps, U as UsageDataPoint } from './usage-chart-DINgSVL5.js';
+export { c as BillingDashboard, d as BillingDashboardProps, e as PricingCards, f as PricingPageProps, g as UsageChart, h as UsageChartProps, U as UsageDataPoint } from './usage-chart-CY9xo3KX.js';
 export { AuthHeader, GitHubLoginButton, UserMenu } from './auth.js';
-export { CodeBlock, CopyButton, Markdown, MarkdownProps, SimpleMarkdown, SimpleMarkdownProps, simpleMarkdownStyles } from './markdown.js';
-export { o as UseToolCallStreamReturn, p as createAuthFetcher, u as useApiKey, q as useAuth, r as useAutoScroll, s as useDropdownMenu, t as usePtySession, v as useRunCollapseState, w as useRunGroups, x as useSSEStream, y as useSessionStream, z as useSidecarAuth, D as useToolCallStream } from './use-sidecar-auth-Bb0-w3lX.js';
+export { CodeBlock, CopyButton, Markdown, MarkdownProps } from './markdown.js';
+export { AppendUserMessageOptions, ApplySdkEventOptions, BeginAssistantMessageOptions, CompleteAssistantMessageOptions, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, useAutoScroll, useDropdownMenu, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionStream, useSidecarAuth, useToolCallStream } from './sdk-hooks.js';
+export { d as createAuthFetcher, u as useApiKey, e as useAuth, f as usePtySession } from './use-pty-session-DeZSxOCN.js';
 export { G as GroupedMessage, R as Run, b as RunStats, T as ToolCategory } from './run-CtFZ6s-D.js';
 export { S as Session } from './sidecar-CFU2W9j1.js';
-export { C as CustomToolRenderer, D as DisplayVariant, T as ToolDisplayMetadata } from './tool-display-BvsVW_Ur.js';
+export { C as CustomToolRenderer, D as DisplayVariant, T as ToolDisplayMetadata } from './tool-display-Ct9nFAzJ.js';
 export { A as AgentBranding } from './branding-DCi5VEik.js';
 export { TOOL_CATEGORY_ICONS, cn, copyText, formatDuration, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText } from './utils.js';
 import 'class-variance-authority/types';
@@ -67,4 +71,29 @@ interface WriteFilePreviewProps {
  */
 declare const WriteFilePreview: React.MemoExoticComponent<({ part }: WriteFilePreviewProps) => react_jsx_runtime.JSX.Element | null>;
 
-export { CodeBlock as CodeBlockDisplay, CommandPreview, InlineCode, ThemeToggle, ToolPart, WriteFilePreview, useTheme };
+interface GrepResultsPreviewProps {
+    part: ToolPart;
+}
+declare const GrepResultsPreview: React.MemoExoticComponent<({ part }: GrepResultsPreviewProps) => react_jsx_runtime.JSX.Element>;
+
+interface GlobResultsPreviewProps {
+    part: ToolPart;
+}
+declare const GlobResultsPreview: React.MemoExoticComponent<({ part }: GlobResultsPreviewProps) => react_jsx_runtime.JSX.Element>;
+
+interface WebSearchPreviewProps {
+    part: ToolPart;
+}
+declare const WebSearchPreview: React.MemoExoticComponent<({ part }: WebSearchPreviewProps) => react_jsx_runtime.JSX.Element>;
+
+interface QuestionPreviewProps {
+    part: ToolPart;
+}
+declare const QuestionPreview: React.MemoExoticComponent<({ part }: QuestionPreviewProps) => react_jsx_runtime.JSX.Element>;
+
+interface DiffPreviewProps {
+    part: ToolPart;
+}
+declare const DiffPreview: React.MemoExoticComponent<({ part }: DiffPreviewProps) => react_jsx_runtime.JSX.Element>;
+
+export { CodeBlock as CodeBlockDisplay, CommandPreview, DiffPreview, GlobResultsPreview, GrepResultsPreview, InlineCode, QuestionPreview, ThemeToggle, ToolPart, WebSearchPreview, WriteFilePreview, useTheme };