@tangle-network/sandbox-ui 0.58.0 → 0.60.0

package/dist/globals.css

@@ -404,6 +404,9 @@
   .bottom-\[-0\.75rem\] {
     bottom: -0.75rem;
   }
+  .bottom-full {
+    bottom: 100%;
+  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
@@ -660,6 +663,30 @@
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
   }
+  .size-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+  .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
+  .size-9 {
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+  }
+  .size-11 {
+    width: calc(var(--spacing) * 11);
+    height: calc(var(--spacing) * 11);
+  }
   .\!h-2 {
     height: calc(var(--spacing) * 2) !important;
   }
@@ -825,6 +852,9 @@
   .max-h-\[160px\] {
     max-height: 160px;
   }
+  .max-h-\[min\(60vh\,420px\)\] {
+    max-height: min(60vh, 420px);
+  }
   .max-h-\[min\(440px\,var\(--radix-dropdown-menu-content-available-height\)\)\] {
     max-height: min(440px, var(--radix-dropdown-menu-content-available-height));
   }
@@ -885,6 +915,9 @@
   .min-h-\[300px\] {
     min-height: 300px;
   }
+  .min-h-\[640px\] {
+    min-height: 640px;
+  }
   .min-h-full {
     min-height: 100%;
   }
@@ -1050,6 +1083,9 @@
   .w-\[300px\] {
     width: 300px;
   }
+  .w-\[320px\] {
+    width: 320px;
+  }
   .w-\[360px\] {
     width: 360px;
   }
@@ -1858,6 +1894,12 @@
   .border-\[var\(--md3-outline-variant\)\] {
     border-color: var(--md3-outline-variant);
   }
+  .border-\[var\(--status-error\,\#ff4d6d\)\]\/40 {
+    border-color: var(--status-error,#ff4d6d);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--status-error,#ff4d6d) 40%, transparent);
+    }
+  }
   .border-\[var\(--status-running\)\]\/30 {
     border-color: var(--status-running);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1990,6 +2032,12 @@
       border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
     }
   }
+  .border-primary\/50 {
+    border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
+    }
+  }
   .border-primary\/60 {
     border-color: color-mix(in srgb, hsl(var(--primary)) 60%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2155,6 +2203,12 @@
   .bg-\[var\(--md3-outline-variant\)\] {
     background-color: var(--md3-outline-variant);
   }
+  .bg-\[var\(--status-error\,\#ff4d6d\)\]\/15 {
+    background-color: var(--status-error,#ff4d6d);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--status-error,#ff4d6d) 15%, transparent);
+    }
+  }
   .bg-\[var\(--status-running\)\] {
     background-color: var(--status-running);
   }
@@ -2449,6 +2503,12 @@
   .bg-surface-container-high {
     background-color: var(--color-surface-container-high);
   }
+  .bg-surface-container-high\/95 {
+    background-color: var(--color-surface-container-high);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-surface-container-high) 95%, transparent);
+    }
+  }
   .bg-surface-container-highest {
     background-color: var(--color-surface-container-highest);
   }
@@ -3169,6 +3229,9 @@
   .text-\[var\(--md3-primary\)\] {
     color: var(--md3-primary);
   }
+  .text-\[var\(--status-error\,\#ff4d6d\)\] {
+    color: var(--status-error,#ff4d6d);
+  }
   .text-\[var\(--surface-danger-text\)\] {
     color: var(--surface-danger-text);
   }
@@ -3375,6 +3438,9 @@
   .accent-primary {
     accent-color: var(--color-primary);
   }
+  .\[color-scheme\:dark\] {
+    color-scheme: dark;
+  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -3839,6 +3905,14 @@
       border-color: var(--color-border);
     }
   }
+  .focus-within\:border-primary\/60 {
+    &:focus-within {
+      border-color: color-mix(in srgb, hsl(var(--primary)) 60%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
+      }
+    }
+  }
   .focus-within\:shadow-\[var\(--chat-input-focus-shadow\,0_10px_30px_rgba\(15\,23\,42\,0\.08\)\)\] {
     &:focus-within {
       --tw-shadow: var(--chat-input-focus-shadow,0 10px 30px rgba(15,23,42,0.08));
@@ -4041,6 +4115,16 @@
       }
     }
   }
+  .hover\:bg-\[var\(--status-error\,\#ff4d6d\)\]\/25 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--status-error,#ff4d6d);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--status-error,#ff4d6d) 25%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-\[var\(--surface-danger-bg\)\] {
     &:hover {
       @media (hover: hover) {
@@ -4355,6 +4439,13 @@
       }
     }
   }
+  .hover\:text-\[var\(--status-error\,\#ff4d6d\)\] {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--status-error,#ff4d6d);
+      }
+    }
+  }
   .hover\:text-\[var\(--surface-danger-text\)\] {
     &:hover {
       @media (hover: hover) {
@@ -4475,6 +4566,11 @@
       border-color: var(--border-accent-hover);
     }
   }
+  .focus\:border-primary {
+    &:focus {
+      border-color: var(--color-primary);
+    }
+  }
   .focus\:bg-accent {
     &:focus {
       background-color: var(--color-accent);

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { AgentWorkbench, ApprovalConfidenceStat, ApprovalItem, ApprovalQueue, Ap
 export { ArtifactView, BRAND_PRISM_THEME, CodeSurface, CodeSurfaceProps, CodeView, CodeViewProps, DiffStats, DiffView, DiffViewProps, FileBreadcrumb, FileBreadcrumbProps, GitStatusBadge, PanelHeader, PanelHeaderProps, PillTabItem, PillTabs, PillTabsProps, PreviewView, PreviewViewProps, SandboxArtifact, SandboxArtifactPane, SandboxArtifactPaneProps, SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage } from './workbench.js';
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from '@tangle-network/ui/openui';
 export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatInput, ChatInputProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, PendingFile, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from '@tangle-network/ui/chat';
-export { AgentSessionControls, AgentSessionControlsProps, AgentSessionHarnessControl, AgentSessionModelControl, AgentSessionReasoningControl, ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, DEFAULT_REASONING_LEVEL_OPTIONS, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport, isModelCompatibleWithHarness, snapModelToHarness } from './chat.js';
+export { AgentComposer, AgentComposerProps, AgentProfileCapability, AgentProfileDraft, AgentProfileOption, AgentProfilePicker, AgentProfilePickerProps, AgentSessionControls, AgentSessionControlsProps, AgentSessionHarnessControl, AgentSessionModelControl, AgentSessionProfileControl, AgentSessionReasoningControl, ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, ComposerFile, DEFAULT_REASONING_LEVEL_OPTIONS, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport, isModelCompatibleWithHarness, snapModelToHarness } from './chat.js';
 export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from '@tangle-network/ui/run';
 export { CommandPreview, DiffPreview, GlobResultsPreview, GrepResultsPreview, QuestionPreview, WebSearchPreview, WriteFilePreview } from '@tangle-network/ui/tool-previews';
 export { FileArtifactPane, FileArtifactPaneProps, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, filterFileTree } from '@tangle-network/ui/files';

package/dist/index.js

@@ -74,6 +74,8 @@ import {
   UserMenu
 } from "./chunk-IOB2PW5Z.js";
 import {
+  AgentComposer,
+  AgentProfilePicker,
   AgentSessionControls,
   AgentTimeline,
   ArtifactAgentDock,
@@ -90,7 +92,7 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-WLMLD2CZ.js";
+} from "./chunk-V5JZOO3W.js";
 import {
   TOOL_CATEGORY_ICONS,
   cn,
@@ -351,6 +353,8 @@ import {
 import { Markdown } from "@tangle-network/ui/markdown";
 export {
   ActivityFeed,
+  AgentComposer,
+  AgentProfilePicker,
   AgentSessionControls,
   AgentTimeline,
   AgentWorkbench,

package/dist/styles.css

@@ -404,6 +404,9 @@
   .bottom-\[-0\.75rem\] {
     bottom: -0.75rem;
   }
+  .bottom-full {
+    bottom: 100%;
+  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
@@ -660,6 +663,30 @@
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
   }
+  .size-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+  .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
+  .size-9 {
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+  }
+  .size-11 {
+    width: calc(var(--spacing) * 11);
+    height: calc(var(--spacing) * 11);
+  }
   .\!h-2 {
     height: calc(var(--spacing) * 2) !important;
   }
@@ -825,6 +852,9 @@
   .max-h-\[160px\] {
     max-height: 160px;
   }
+  .max-h-\[min\(60vh\,420px\)\] {
+    max-height: min(60vh, 420px);
+  }
   .max-h-\[min\(440px\,var\(--radix-dropdown-menu-content-available-height\)\)\] {
     max-height: min(440px, var(--radix-dropdown-menu-content-available-height));
   }
@@ -885,6 +915,9 @@
   .min-h-\[300px\] {
     min-height: 300px;
   }
+  .min-h-\[640px\] {
+    min-height: 640px;
+  }
   .min-h-full {
     min-height: 100%;
   }
@@ -1050,6 +1083,9 @@
   .w-\[300px\] {
     width: 300px;
   }
+  .w-\[320px\] {
+    width: 320px;
+  }
   .w-\[360px\] {
     width: 360px;
   }
@@ -1858,6 +1894,12 @@
   .border-\[var\(--md3-outline-variant\)\] {
     border-color: var(--md3-outline-variant);
   }
+  .border-\[var\(--status-error\,\#ff4d6d\)\]\/40 {
+    border-color: var(--status-error,#ff4d6d);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--status-error,#ff4d6d) 40%, transparent);
+    }
+  }
   .border-\[var\(--status-running\)\]\/30 {
     border-color: var(--status-running);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1990,6 +2032,12 @@
       border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
     }
   }
+  .border-primary\/50 {
+    border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
+    }
+  }
   .border-primary\/60 {
     border-color: color-mix(in srgb, hsl(var(--primary)) 60%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2155,6 +2203,12 @@
   .bg-\[var\(--md3-outline-variant\)\] {
     background-color: var(--md3-outline-variant);
   }
+  .bg-\[var\(--status-error\,\#ff4d6d\)\]\/15 {
+    background-color: var(--status-error,#ff4d6d);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--status-error,#ff4d6d) 15%, transparent);
+    }
+  }
   .bg-\[var\(--status-running\)\] {
     background-color: var(--status-running);
   }
@@ -2449,6 +2503,12 @@
   .bg-surface-container-high {
     background-color: var(--color-surface-container-high);
   }
+  .bg-surface-container-high\/95 {
+    background-color: var(--color-surface-container-high);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-surface-container-high) 95%, transparent);
+    }
+  }
   .bg-surface-container-highest {
     background-color: var(--color-surface-container-highest);
   }
@@ -3169,6 +3229,9 @@
   .text-\[var\(--md3-primary\)\] {
     color: var(--md3-primary);
   }
+  .text-\[var\(--status-error\,\#ff4d6d\)\] {
+    color: var(--status-error,#ff4d6d);
+  }
   .text-\[var\(--surface-danger-text\)\] {
     color: var(--surface-danger-text);
   }
@@ -3375,6 +3438,9 @@
   .accent-primary {
     accent-color: var(--color-primary);
   }
+  .\[color-scheme\:dark\] {
+    color-scheme: dark;
+  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -3839,6 +3905,14 @@
       border-color: var(--color-border);
     }
   }
+  .focus-within\:border-primary\/60 {
+    &:focus-within {
+      border-color: color-mix(in srgb, hsl(var(--primary)) 60%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
+      }
+    }
+  }
   .focus-within\:shadow-\[var\(--chat-input-focus-shadow\,0_10px_30px_rgba\(15\,23\,42\,0\.08\)\)\] {
     &:focus-within {
       --tw-shadow: var(--chat-input-focus-shadow,0 10px 30px rgba(15,23,42,0.08));
@@ -4041,6 +4115,16 @@
       }
     }
   }
+  .hover\:bg-\[var\(--status-error\,\#ff4d6d\)\]\/25 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--status-error,#ff4d6d);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--status-error,#ff4d6d) 25%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-\[var\(--surface-danger-bg\)\] {
     &:hover {
       @media (hover: hover) {
@@ -4355,6 +4439,13 @@
       }
     }
   }
+  .hover\:text-\[var\(--status-error\,\#ff4d6d\)\] {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--status-error,#ff4d6d);
+      }
+    }
+  }
   .hover\:text-\[var\(--surface-danger-text\)\] {
     &:hover {
       @media (hover: hover) {
@@ -4475,6 +4566,11 @@
       border-color: var(--border-accent-hover);
     }
   }
+  .focus\:border-primary {
+    &:focus {
+      border-color: var(--color-primary);
+    }
+  }
   .focus\:bg-accent {
     &:focus {
       background-color: var(--color-accent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.58.0",
+  "version": "0.60.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",