@tangle-network/sandbox-ui 0.113.4 → 0.113.6

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export { ArtifactPane, ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CodeBlock, CodeBlockProps, CopyButton, 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, FilterField, FilterFieldProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Metric, MetricProps, MetricStrip, MetricStripProps, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, StatusPill, StatusPillProps, StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalDisplay, TerminalCursor as TerminalDisplayCursor, TerminalInput as TerminalDisplayInput, TerminalLine as TerminalDisplayLine, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, Toolbar, ToolbarProps, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, buttonVariants, useTheme, useToast } from '@tangle-network/ui/primitives';
-export { L as Logo, a as LogoProps, T as TangleKnot } from './logo-CaIvk3J1.js';
+export { ArtifactPane, ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CodeBlock, CodeBlockProps, CopyButton, 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, FilterField, FilterFieldProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Metric, MetricProps, MetricStrip, MetricStripProps, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, StatusPill, StatusPillProps, StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalDisplay, TerminalCursor as TerminalDisplayCursor, TerminalInput as TerminalDisplayInput, TerminalLine as TerminalDisplayLine, TextShimmer, TextShimmerProps, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, Toolbar, ToolbarProps, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, buttonVariants, useTheme, useToast } from '@tangle-network/ui/primitives';
+export { L as Logo, a as LogoProps } from './logo-DiAjq759.js';
 export { CodeBlock as CodeBlockDisplay, Markdown, MarkdownProps } from '@tangle-network/ui/markdown';
 export { AgentWorkbench, ApprovalConfidenceStat, ApprovalItem, ApprovalQueue, ApprovalQueueProps, AuditCheck, AuditResults, AuditResultsProps, BannerType, CalendarEvent, CalendarView, CalendarViewProps, ContextBadge, DirectoryPane, DirectoryPaneProps, FormAudit, RuntimePane, RuntimePaneProps, SESSION_CREATED_EVENT, SandboxWorkbench, SandboxWorkbenchArtifact, SandboxWorkbenchCustomArtifact, SandboxWorkbenchFileArtifact, SandboxWorkbenchLayoutOptions, SandboxWorkbenchMarkdownArtifact, SandboxWorkbenchOpenUIArtifact, SandboxWorkbenchProps, SandboxWorkbenchSessionProps, SessionActivityMonitor, SessionActivityMonitorProps, SessionCreatedDetail, SessionOptimisticController, SessionSidebar, SessionSidebarBadge, SessionSidebarFilter, SessionSidebarGroupBy, SessionSidebarItem, SessionSidebarLink, SessionSidebarProps, SessionSidebarVariant, ShellShouldRevalidateArgs, ShellShouldRevalidateOptions, StatusBanner, StatusBannerProps, StatusBar, StatusBarProps, TaskBoard, TaskBoardColumn, TaskBoardItem, TaskBoardProps, TerminalLine, TerminalPanel, TerminalProps, UseOptimisticSessionItemsOptions, WorkspaceLayout, WorkspaceLayoutProps, WorkspacePaneHeader, WorkspacePaneHeaderProps, createShellShouldRevalidate, dispatchSessionCreated, formatRelativeAge, shellShouldRevalidate, useOptimisticSessionItems } from './workspace.js';
 export { ArtifactView, BRAND_PRISM_THEME, ChangedFile, ChangesPane, ChangesPaneProps, CodeSurface, CodeSurfaceProps, CodeView, CodeViewProps, DiffStats, DiffStatsBadge, DiffView, DiffViewProps, FileBreadcrumb, FileBreadcrumbProps, GitStatusBadge, PanelHeader, PanelHeaderProps, PillTabItem, PillTabs, PillTabsProps, PreviewView, PreviewViewProps, SandboxArtifact, SandboxArtifactPane, SandboxArtifactPaneProps, SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage } from './workbench.js';
@@ -9,7 +9,7 @@ export { AgentProfileCapability, AgentProfileDraft, AgentProfileOption, AgentPro
 export { HarnessType, modelProvider, snapHarnessToModel } from '@tangle-network/agent-interface';
 export { ExpandedToolDetail, ExpandedToolDetailProps, FeedSegment, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps, RunRowShell, RunRowShellProps, RunRowStatus, RunRowStatusDot, ToolCallData, ToolCallFeed, ToolCallFeedProps, ToolCallStatus, ToolCallType, parseToolEvent } from '@tangle-network/ui/run';
 export { CommandPreview, CommandPreviewProps, DiffPreview, DiffPreviewProps, GlobResultsPreview, GlobResultsPreviewProps, GrepResultsPreview, GrepResultsPreviewProps, QuestionPreview, QuestionPreviewProps, WebSearchPreview, WebSearchPreviewProps, WriteFilePreview, WriteFilePreviewProps } from '@tangle-network/ui/tool-previews';
-export { FileArtifactPane, FileArtifactPaneProps, FileFormat, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage } from '@tangle-network/ui/files';
+export { CSV_PREVIEW_ROW_LIMIT, FileArtifactPane, FileArtifactPaneProps, FileFormat, FileNode, FilePreview, FilePreviewKind, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage, parseCsv, resolveFilePreviewKind } from '@tangle-network/ui/files';
 export { ActivityFeed, ActivityFeedProps, ActivityItem, AppearanceController, Backend, BackendConfig, BackendConfigProps, BackendSelector, BackendSelectorProps, BackendStatusData, ClusterStatusBar, ClusterStatusBarProps, ClusterStatusItem, CreditBalance, CreditBalanceProps, DashboardLayout, DashboardLayoutProps, DashboardProfile, DashboardSnapshotInfo, DashboardUser, GitCommitData, GitPanel, GitPanelProps, GitStatusData, HARNESS_BRAND, HARNESS_OPTIONS, HarnessBrand, HarnessLogo, HarnessLogoProps, HarnessPicker, HarnessPickerProps, INSUFFICIENT_BALANCE_CODE, InfoPanel, InfoPanelProps, InsufficientBalance, Invoice, InvoiceTable, InvoiceTableProps, McpServer, MetricAreaChart, MetricAreaChartProps, MetricChartPoint, MetricChartTone, NavItem, NetworkConfig, NetworkConfigData, NetworkConfigProps, NewSandboxCard, NewSandboxCardProps, OutOfCreditsModal, OutOfCreditsModalProps, PlanCardData, PlanCards, PlanCardsProps, PlanFeature, ProcessInfo, ProcessList, ProcessListProps, ProductVariant, ProfileAvatar, ProfileAvatarProps, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, PromoBanner, PromoBannerProps, RailButton, RailButtonProps, RailCollapseToggle, RailCollapseToggleProps, RailExpandable, RailExpandableProps, RailExpandableSubItem, RailFlyout, RailFlyoutProps, RailHeader, RailHeaderProps, RailModeButton, RailModeButtonProps, RailSeparator, RailSeparatorProps, RailThemeToggle, RailTooltip, RailTooltipProps, ResourceMeter, ResourceMeterProps, ResourceSnapshot, ResourceSnapshotItem, ResourceSnapshotProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxCardData, SandboxCardProps, SandboxStatus, SandboxTable, SandboxTableProps, Sidebar, SidebarContent, SidebarContentProps, SidebarLayout, SidebarLayoutFlyoutItem, SidebarLayoutNavItem, SidebarLayoutProps, SidebarPanel, SidebarPanelContent, SidebarPanelContentProps, SidebarPanelHeader, SidebarPanelHeaderProps, SidebarPanelProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailFooter, SidebarRailFooterProps, SidebarRailHeader, SidebarRailHeaderProps, SidebarRailNav, SidebarRailNavProps, SidebarRailProps, SidebarUser, SnapshotList, SnapshotListProps, SystemLogsViewer, SystemLogsViewerProps, TeamRole, ThemeMode, UsageSummary, UsageSummaryData, UsageSummaryProps, Variant, VariantList, VariantListProps, VariantOutcome, VariantStatus, canAdminSandbox, chatCapableHarnesses, parseInsufficientBalance, useSidebar } from './dashboard.js';
 export { M as ModelBrandIdentity, a as ModelBrandStack, b as ModelInfo, c as canonicalModelId, m as modelBrandFor } from './model-brand-BNnaUKKZ.js';
 export { B as BillingBalance, a as BillingDashboard, b as BillingDashboardProps, c as BillingSubscription, d as BillingUsage, P as PricingPage, e as PricingPageProps, f as PricingTier, T as TemplateCard, g as TemplateCardData, h as TemplateCardProps, U as UsageChart, i as UsageChartProps, j as UsageDataPoint, k as formatPrice } from './template-card-Bn-Bw5xC.js';
@@ -23,7 +23,8 @@ export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConne
 export { ChatSession, connectSession, disconnectSession, sessionAtom } from './stores.js';
 export { AgentBranding, CustomToolRenderer, DisplayVariant, FinalTextPart, GroupedMessage, MessageRun, MessageUser, ReasoningPart, Run, RunStats, SessionMessage, SessionPart, TextPart, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime } from '@tangle-network/ui/types';
 export { Session } from './types.js';
-export { TOOL_CATEGORY_ICONS, cn, copyText, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText } from '@tangle-network/ui/utils';
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText } from '@tangle-network/ui/utils';
+export { TangleKnot } from '@tangle-network/brand';
 import 'react';
 import 'lucide-react';
 import '@radix-ui/react-dropdown-menu';

package/dist/index.js

@@ -67,6 +67,11 @@ import {
   TOOL_CATEGORY_ICONS,
   cn,
   copyText,
+  focusField,
+  focusFieldInvalid,
+  focusFieldWithin,
+  focusRing,
+  focusRingInset,
   formatBytes,
   formatDuration,
   formatUptime,
@@ -75,7 +80,7 @@ import {
   getToolErrorText,
   timeAgo,
   truncateText
-} from "./chunk-TK46XFLM.js";
+} from "./chunk-X3YXP7FG.js";
 import {
   AuthHeader,
   GitHubLoginButton,
@@ -98,7 +103,7 @@ import {
   createFetchTransport,
   modelProvider,
   snapHarnessToModel
-} from "./chunk-EKYA6AFY.js";
+} from "./chunk-TADGS4Q7.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,
@@ -133,7 +138,7 @@ import {
   formatRelativeAge,
   shellShouldRevalidate,
   useOptimisticSessionItems
-} from "./chunk-JZCRK2BJ.js";
+} from "./chunk-3KBNPQQF.js";
 import {
   BRAND_PRISM_THEME,
   ChangesPane,
@@ -150,8 +155,9 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-XFEJ66AG.js";
+} from "./chunk-UCQNOUN3.js";
 import {
+  CSV_PREVIEW_ROW_LIMIT,
   FileArtifactPane,
   FilePreview,
   FileTabs,
@@ -162,8 +168,10 @@ import {
   filterFileTree,
   getCodeLanguage,
   getFormatLabel,
-  getSyntaxLanguage
-} from "./chunk-PZVUIUUW.js";
+  getSyntaxLanguage,
+  parseCsv,
+  resolveFilePreviewKind
+} from "./chunk-ULPLRBMF.js";
 import {
   ActivityFeed,
   BackendConfig,
@@ -226,7 +234,7 @@ import {
   chatCapableHarnesses,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-LDAKIKTV.js";
+} from "./chunk-DYXXYGS4.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -320,6 +328,7 @@ import {
   TabsTrigger,
   TangleKnot,
   TerminalDisplay,
+  TextShimmer,
   Textarea,
   ThemeToggle,
   ToastContainer,
@@ -330,7 +339,7 @@ import {
   buttonVariants,
   useTheme,
   useToast
-} from "./chunk-2XPJ2XF7.js";
+} from "./chunk-ANSC5AFC.js";
 import {
   ModelBrandStack,
   canonicalModelId,
@@ -379,6 +388,7 @@ export {
   Badge,
   BillingDashboard,
   Button,
+  CSV_PREVIEW_ROW_LIMIT,
   CalendarView,
   Card,
   CardContent,
@@ -566,6 +576,7 @@ export {
   TerminalInput as TerminalDisplayInput,
   TerminalLine as TerminalDisplayLine,
   TerminalPanel,
+  TextShimmer,
   Textarea,
   ThemeToggle,
   ThinkingIndicator,
@@ -606,6 +617,11 @@ export {
   dispatchSessionCreated,
   fileExtension,
   filterFileTree,
+  focusField,
+  focusFieldInvalid,
+  focusFieldWithin,
+  focusRing,
+  focusRingInset,
   formatBytes,
   formatDuration,
   formatPrice,
@@ -629,11 +645,13 @@ export {
   messagesAtom,
   modelBrandFor,
   modelProvider,
+  parseCsv,
   parseInsufficientBalance,
   parseToolEvent,
   partMapAtom,
   registerActiveSession,
   resetActiveSessions,
+  resolveFilePreviewKind,
   resolveLanguage,
   sessionAtom,
   setActiveSessionAttention,

package/dist/integrations.js

@@ -26,6 +26,7 @@ import {
 } from "@tangle-network/ui/primitives";
 import { cn } from "@tangle-network/ui/utils";
 import { Check, ExternalLink, MoreVertical, Search, Unplug } from "lucide-react";
+import { focusFieldWithin, focusRing } from "@tangle-network/ui/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_FEATURED_IDS = [
   "gmail",
@@ -75,7 +76,7 @@ function IntegrationsToolbar({
   onSortChange
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2 rounded-lg border border-border bg-card px-3 py-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: `flex flex-1 items-center gap-2 rounded-lg border bg-card px-3 py-2 ${focusFieldWithin}`, children: [
       /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
       /* @__PURE__ */ jsx(
         "input",
@@ -83,6 +84,7 @@ function IntegrationsToolbar({
           type: "text",
           value: query,
           onChange: (e) => onQueryChange(e.target.value),
+          "aria-label": "Search integrations",
           placeholder: "Search integrations...",
           autoFocus: true,
           "data-testid": "integration-search",
@@ -93,7 +95,7 @@ function IntegrationsToolbar({
     /* @__PURE__ */ jsx(
       "div",
       {
-        role: "tablist",
+        role: "group",
         "aria-label": "Sort integrations",
         className: "flex shrink-0 items-center gap-1 rounded-lg border border-border bg-card p-1",
         children: [
@@ -103,12 +105,12 @@ function IntegrationsToolbar({
           "button",
           {
             type: "button",
-            role: "tab",
-            "aria-selected": sort === value,
+            "aria-pressed": sort === value,
             onClick: () => onSortChange(value),
             "data-testid": `sort-${value}`,
             className: cn(
               "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
+              focusRing,
               sort === value ? "bg-accent text-foreground" : "text-muted-foreground hover:text-foreground"
             ),
             children: label
@@ -360,7 +362,7 @@ function IntegrationsPanel({
                   rel: "noopener noreferrer",
                   "aria-label": `Manage ${name} (opens in new window)`,
                   "data-testid": `manage-${provider.providerId}`,
-                  className: "absolute inset-0 z-10 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+                  className: `absolute inset-0 z-10 rounded-xl ${focusRing}`
                 }
               ) : null,
               /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 top-2 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--surface-success-text)] text-white", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3", strokeWidth: 3 }) }),
@@ -404,7 +406,7 @@ function IntegrationsPanel({
                     "data-testid": `menu-${provider.providerId}`,
                     "aria-label": `More actions for ${name}`,
                     title: "More actions",
-                    className: "absolute right-1.5 top-1.5 z-20 flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+                    className: `absolute right-1.5 top-1.5 z-20 flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground ${focusRing}`,
                     children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-3.5 w-3.5" })
                   }
                 ) }),
@@ -486,7 +488,8 @@ function IntegrationsPanel({
           className: cn(
             TILE_BOX_CLASS,
             "group border-border bg-card transition-all",
-            "hover:border-primary/40 hover:bg-accent/40 hover:shadow-sm focus:outline-none focus-visible:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary/20"
+            "hover:border-[var(--border-strong)] hover:bg-accent/40 hover:shadow-sm",
+            focusRing
           ),
           children: [
             /* @__PURE__ */ jsx(

package/dist/logo-DiAjq759.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+interface LogoProps {
+    variant?: "sandbox";
+    size?: "sm" | "md" | "lg" | "xl";
+    className?: string;
+    iconOnly?: boolean;
+}
+/** Keep the Sandbox wordmark API while Brand owns the mark and layout. */
+declare function Logo({ variant, size, className, iconOnly, }: LogoProps): React.JSX.Element;
+declare namespace Logo {
+    var displayName: string;
+}
+
+export { Logo as L, type LogoProps as a };