@tangle-network/sandbox-ui 0.2.1 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/README.md +201 -10
  2. package/dist/auth.js +2 -2
  3. package/dist/chat-container-C8eHLw8z.d.ts +67 -0
  4. package/dist/chat.d.ts +70 -78
  5. package/dist/chat.js +8 -8
  6. package/dist/chunk-4F2GJRGU.js +756 -0
  7. package/dist/{chunk-HYEAX3DC.js → chunk-5LV6DZZF.js} +445 -114
  8. package/dist/chunk-67C53XVV.js +1106 -0
  9. package/dist/{chunk-QSQBDR3N.js → chunk-BX6AQMUS.js} +5 -2
  10. package/dist/chunk-CCKNIAS7.js +124 -0
  11. package/dist/chunk-CJ2RYVZH.js +128 -0
  12. package/dist/{chunk-KMXV7DDX.js → chunk-CNWVHQFY.js} +1 -1
  13. package/dist/{chunk-OU4TRNQZ.js → chunk-COCSO7FG.js} +3 -3
  14. package/dist/chunk-FJSVPBKY.js +85 -0
  15. package/dist/chunk-FRGMMANX.js +102 -0
  16. package/dist/{chunk-E6FS7R4X.js → chunk-HWLX5NME.js} +1 -1
  17. package/dist/chunk-JF6E2DS5.js +610 -0
  18. package/dist/chunk-MUOL44AE.js +121 -0
  19. package/dist/chunk-MXCSSOGH.js +105 -0
  20. package/dist/{chunk-J4OADEUK.js → chunk-OM6ON27W.js} +24 -9
  21. package/dist/{chunk-NI2EI43H.js → chunk-PDV7W4NY.js} +9 -124
  22. package/dist/chunk-TQN3VR4F.js +92 -0
  23. package/dist/{chunk-SOT2V7TX.js → chunk-TXI4MZAZ.js} +62 -144
  24. package/dist/chunk-WUR652Y3.js +1140 -0
  25. package/dist/chunk-YDBXQQLC.js +336 -0
  26. package/dist/{chunk-4EIWPJMJ.js → chunk-ZP6GSX4D.js} +36 -27
  27. package/dist/dashboard.d.ts +5 -2
  28. package/dist/dashboard.js +5 -4
  29. package/dist/{expanded-tool-detail-OkXGqTHe.d.ts → expanded-tool-detail-BDi_h_dZ.d.ts} +11 -4
  30. package/dist/file-tabs-CmaoDVBI.d.ts +72 -0
  31. package/dist/files.d.ts +25 -44
  32. package/dist/files.js +8 -3
  33. package/{src/styles → dist}/globals.css +16 -67
  34. package/dist/hooks.d.ts +5 -4
  35. package/dist/hooks.js +14 -9
  36. package/dist/index.d.ts +38 -9
  37. package/dist/index.js +100 -126
  38. package/dist/markdown.d.ts +1 -24
  39. package/dist/markdown.js +1 -7
  40. package/dist/openui.d.ts +115 -0
  41. package/dist/openui.js +11 -0
  42. package/dist/pages.d.ts +3 -2
  43. package/dist/pages.js +19 -16
  44. package/dist/primitives.d.ts +8 -1
  45. package/dist/primitives.js +25 -19
  46. package/dist/run.d.ts +2 -2
  47. package/dist/run.js +8 -7
  48. package/dist/{use-sidecar-auth-Bb0-w3lX.d.ts → sdk-hooks.d.ts} +61 -72
  49. package/dist/sdk-hooks.js +29 -0
  50. package/dist/styles.css +179 -0
  51. package/dist/tokens.css +165 -0
  52. package/dist/{tool-display-BvsVW_Ur.d.ts → tool-display-Ct9nFAzJ.d.ts} +1 -1
  53. package/dist/types.d.ts +1 -1
  54. package/dist/{usage-chart-DINgSVL5.d.ts → usage-chart-CY9xo3KX.d.ts} +8 -3
  55. package/dist/use-pty-session-DeZSxOCN.d.ts +69 -0
  56. package/dist/utils.d.ts +1 -1
  57. package/dist/utils.js +1 -1
  58. package/dist/workspace.d.ts +171 -33
  59. package/dist/workspace.js +25 -1
  60. package/package.json +10 -3
  61. package/dist/chunk-2UHPE5T7.js +0 -201
  62. package/dist/chunk-6MQIDUPA.js +0 -502
  63. package/dist/chunk-KYY2X6LY.js +0 -318
  64. package/dist/chunk-L6ZDH5F4.js +0 -334
  65. package/dist/chunk-M34OA6PQ.js +0 -233
  66. package/dist/chunk-M6VLC32S.js +0 -219
  67. package/dist/chunk-U62G5TS7.js +0 -472
  68. package/src/styles/tokens.css +0 -73
@@ -21,8 +21,10 @@ interface BillingDashboardProps {
21
21
  onManageSubscription: () => void;
22
22
  onAddCredits: () => void;
23
23
  variant?: "sandbox";
24
+ className?: string;
25
+ cardClassName?: string;
24
26
  }
25
- declare function BillingDashboard({ subscription, balance, usage, onManageSubscription, onAddCredits, variant, }: BillingDashboardProps): react_jsx_runtime.JSX.Element;
27
+ declare function BillingDashboard({ subscription, balance, usage, onManageSubscription, onAddCredits, variant, className, cardClassName, }: BillingDashboardProps): react_jsx_runtime.JSX.Element;
26
28
 
27
29
  interface PricingTier {
28
30
  id: string;
@@ -42,8 +44,10 @@ interface PricingPageProps {
42
44
  onSelectTier: (tierId: string) => void;
43
45
  variant?: "sandbox";
44
46
  loading?: boolean;
47
+ className?: string;
48
+ cardClassName?: string;
45
49
  }
46
- declare function PricingPage({ tiers, currentTierId, billingPeriod, onBillingPeriodChange, onSelectTier, variant, loading, }: PricingPageProps): react_jsx_runtime.JSX.Element;
50
+ declare function PricingPage({ tiers, currentTierId, billingPeriod, onBillingPeriodChange, onSelectTier, variant, loading, className, cardClassName, }: PricingPageProps): react_jsx_runtime.JSX.Element;
47
51
 
48
52
  interface UsageDataPoint {
49
53
  date: string;
@@ -54,7 +58,8 @@ interface UsageChartProps {
54
58
  title: string;
55
59
  unit: string;
56
60
  variant?: "agentrun" | "automateai" | "tradingbots" | "sandbox";
61
+ className?: string;
57
62
  }
58
- declare function UsageChart({ data, title, unit, variant, }: UsageChartProps): react_jsx_runtime.JSX.Element;
63
+ declare function UsageChart({ data, title, unit, variant, className, }: UsageChartProps): react_jsx_runtime.JSX.Element;
59
64
 
60
65
  export { type BillingSubscription as B, type PricingTier as P, type UsageDataPoint as U, type BillingBalance as a, type BillingUsage as b, BillingDashboard as c, type BillingDashboardProps as d, PricingPage as e, type PricingPageProps as f, UsageChart as g, type UsageChartProps as h };
@@ -0,0 +1,69 @@
1
+ interface AuthUser {
2
+ customer_id: string;
3
+ email: string;
4
+ name?: string;
5
+ tier: string;
6
+ github?: {
7
+ login: string;
8
+ connected: boolean;
9
+ } | null;
10
+ session_expires_at?: string;
11
+ }
12
+ interface UseAuthOptions {
13
+ apiBaseUrl: string;
14
+ revalidateOnFocus?: boolean;
15
+ shouldRetryOnError?: boolean;
16
+ }
17
+ interface UseAuthResult {
18
+ user: AuthUser | null;
19
+ isLoading: boolean;
20
+ isError: boolean;
21
+ error: Error | null;
22
+ mutate: () => Promise<void>;
23
+ }
24
+ /**
25
+ * Hook for managing authentication state.
26
+ * Fetches user session from the API and provides loading/error states.
27
+ */
28
+ declare function useAuth({ apiBaseUrl, revalidateOnFocus, shouldRetryOnError, }: UseAuthOptions): UseAuthResult;
29
+ /**
30
+ * Creates a fetcher function that includes auth credentials.
31
+ * Uses both cookie-based session and localStorage API key for backwards compatibility.
32
+ */
33
+ declare function createAuthFetcher(_apiBaseUrl: string): <T = unknown>(url: string, options?: RequestInit) => Promise<T>;
34
+ /**
35
+ * Hook to get the API key from localStorage.
36
+ * For backwards compatibility with API key-based auth.
37
+ */
38
+ declare function useApiKey(): string | null;
39
+
40
+ interface UsePtySessionOptions {
41
+ /** Base URL of the sidecar (e.g. "http://localhost:9100"). */
42
+ apiUrl: string;
43
+ /** Bearer token for authentication. */
44
+ token: string;
45
+ /** Called with raw PTY output (may contain ANSI escape codes). */
46
+ onData: (data: string) => void;
47
+ }
48
+ interface UsePtySessionReturn {
49
+ /** Whether the SSE stream is connected and receiving data. */
50
+ isConnected: boolean;
51
+ /** Connection or API error, if any. */
52
+ error: string | null;
53
+ /** Send a command to the PTY session. */
54
+ sendCommand: (command: string) => Promise<void>;
55
+ /** Tear down and reconnect. */
56
+ reconnect: () => void;
57
+ }
58
+ /**
59
+ * Manages a PTY session against the sidecar terminal API.
60
+ *
61
+ * Protocol:
62
+ * - POST /terminals → create session → { data: { sessionId } }
63
+ * - GET /terminals/{id}/stream → SSE output (raw PTY with ANSI codes)
64
+ * - POST /terminals/{id}/execute → send command { command: "..." }
65
+ * - DELETE /terminals/{id} → close session
66
+ */
67
+ declare function usePtySession({ apiUrl, token, onData }: UsePtySessionOptions): UsePtySessionReturn;
68
+
69
+ export { type AuthUser as A, type UseAuthOptions as U, type UseAuthResult as a, type UsePtySessionOptions as b, type UsePtySessionReturn as c, createAuthFetcher as d, useAuth as e, usePtySession as f, useApiKey as u };
package/dist/utils.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { b as ToolPart } from './parts-CyGkM6Fp.js';
2
- import { T as ToolDisplayMetadata } from './tool-display-BvsVW_Ur.js';
2
+ import { T as ToolDisplayMetadata } from './tool-display-Ct9nFAzJ.js';
3
3
  import { T as ToolCategory } from './run-CtFZ6s-D.js';
4
4
  import { ClassValue } from 'clsx';
5
5
  import 'react';
package/dist/utils.js CHANGED
@@ -11,7 +11,7 @@ import {
11
11
  getToolCategory,
12
12
  getToolDisplayMetadata,
13
13
  getToolErrorText
14
- } from "./chunk-QSQBDR3N.js";
14
+ } from "./chunk-BX6AQMUS.js";
15
15
  import {
16
16
  cn
17
17
  } from "./chunk-RQHJBTEU.js";
@@ -1,5 +1,12 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ReactNode } from 'react';
3
+ import { F as FileNode, g as FileTreeVisibilityOptions, b as FileTabData } from './file-tabs-CmaoDVBI.js';
4
+ export { A as ArtifactPane, a as ArtifactPaneProps } from './file-tabs-CmaoDVBI.js';
5
+ import { c as ChatContainerProps } from './chat-container-C8eHLw8z.js';
6
+ import { OpenUIComponentNode, OpenUIAction } from './openui.js';
7
+ import './parts-CyGkM6Fp.js';
8
+ import './branding-DCi5VEik.js';
9
+ import './tool-display-Ct9nFAzJ.js';
3
10
 
4
11
  interface WorkspaceLayoutProps {
5
12
  /** Left sidebar content (file tree, navigation) */
@@ -24,9 +31,67 @@ interface WorkspaceLayoutProps {
24
31
  defaultRightOpen?: boolean;
25
32
  /** Default bottom panel state */
26
33
  defaultBottomOpen?: boolean;
34
+ /** Default left panel width in px */
35
+ defaultLeftWidth?: number;
36
+ /** Default right panel width in px */
37
+ defaultRightWidth?: number;
38
+ /** Minimum left panel width in px */
39
+ minLeftWidth?: number;
40
+ /** Maximum left panel width in px */
41
+ maxLeftWidth?: number;
42
+ /** Minimum right panel width in px */
43
+ minRightWidth?: number;
44
+ /** Maximum right panel width in px */
45
+ maxRightWidth?: number;
46
+ /** Persist panel state and sizes in localStorage */
47
+ persistenceKey?: string;
48
+ /** Disable resize handles */
49
+ resizable?: boolean;
50
+ /** Visual theme for sandbox surfaces */
51
+ theme?: "operator" | "builder" | "consumer";
52
+ /** Density mode for control sizing */
53
+ density?: "comfortable" | "compact";
54
+ /** Accessible label for the left panel */
55
+ leftLabel?: string;
56
+ /** Accessible label for the right panel */
57
+ rightLabel?: string;
58
+ /** Accessible label for the bottom panel */
59
+ bottomLabel?: string;
27
60
  className?: string;
28
61
  }
29
- declare function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, defaultLeftOpen, defaultRightOpen, defaultBottomOpen, className, }: WorkspaceLayoutProps): react_jsx_runtime.JSX.Element;
62
+ declare function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, defaultLeftOpen, defaultRightOpen, defaultBottomOpen, defaultLeftWidth, defaultRightWidth, minLeftWidth, maxLeftWidth, minRightWidth, maxRightWidth, persistenceKey, resizable, theme, density, leftLabel, rightLabel, bottomLabel, className, }: WorkspaceLayoutProps): react_jsx_runtime.JSX.Element;
63
+
64
+ interface DirectoryPaneProps {
65
+ root: FileNode;
66
+ selectedPath?: string;
67
+ onSelect?: (path: string, node: FileNode) => void;
68
+ onRefresh?: () => void;
69
+ onUpload?: () => void;
70
+ title?: string;
71
+ subtitle?: string;
72
+ defaultExpanded?: boolean;
73
+ searchPlaceholder?: string;
74
+ visibility?: FileTreeVisibilityOptions;
75
+ className?: string;
76
+ }
77
+ /**
78
+ * DirectoryPane — searchable file-system navigation surface for sandbox
79
+ * sessions.
80
+ */
81
+ declare function DirectoryPane({ root, selectedPath, onSelect, onRefresh, onUpload, title, subtitle, defaultExpanded, searchPlaceholder, visibility, className, }: DirectoryPaneProps): react_jsx_runtime.JSX.Element;
82
+
83
+ /**
84
+ * StatusBanner — full-width notification banner for connection/provisioning states.
85
+ */
86
+ type BannerType = "provisioning" | "connecting" | "error" | "success" | "info";
87
+ interface StatusBannerProps {
88
+ type: BannerType;
89
+ message: string;
90
+ detail?: string;
91
+ onDismiss?: () => void;
92
+ className?: string;
93
+ }
94
+ declare function StatusBanner({ type, message, detail, onDismiss, className }: StatusBannerProps): react_jsx_runtime.JSX.Element;
30
95
 
31
96
  /**
32
97
  * StatusBar — bottom bar with model selector, context badges, credits.
@@ -48,17 +113,113 @@ interface StatusBarProps {
48
113
  declare function StatusBar({ modelLabel, onModelClick, credits, contextBadges, onRemoveBadge, status, className, }: StatusBarProps): react_jsx_runtime.JSX.Element;
49
114
 
50
115
  /**
51
- * StatusBannerfull-width notification banner for connection/provisioning states.
116
+ * Terminalread-only terminal output panel.
117
+ *
118
+ * Shows agent's bash command output with basic ANSI color support.
119
+ * Collapsible, auto-scrolls to bottom.
52
120
  */
53
- type BannerType = "provisioning" | "connecting" | "error" | "success" | "info";
54
- interface StatusBannerProps {
55
- type: BannerType;
56
- message: string;
57
- detail?: string;
58
- onDismiss?: () => void;
121
+ interface TerminalLine {
122
+ id: string;
123
+ text: string;
124
+ type: "command" | "stdout" | "stderr" | "system";
125
+ timestamp?: number;
126
+ }
127
+ interface TerminalProps {
128
+ lines: TerminalLine[];
129
+ title?: string;
130
+ isCollapsed?: boolean;
131
+ onToggle?: () => void;
132
+ onClose?: () => void;
133
+ maxHeight?: number;
59
134
  className?: string;
60
135
  }
61
- declare function StatusBanner({ type, message, detail, onDismiss, className }: StatusBannerProps): react_jsx_runtime.JSX.Element;
136
+ declare function TerminalPanel({ lines, title, isCollapsed, onToggle, onClose, maxHeight, className, }: TerminalProps): react_jsx_runtime.JSX.Element;
137
+
138
+ interface RuntimePaneProps {
139
+ title?: string;
140
+ subtitle?: string;
141
+ statusBanner?: StatusBannerProps;
142
+ statusBar?: StatusBarProps;
143
+ terminal?: TerminalProps;
144
+ audit?: React.ReactNode;
145
+ inspector?: React.ReactNode;
146
+ footer?: React.ReactNode;
147
+ className?: string;
148
+ }
149
+ /**
150
+ * RuntimePane — shared operating surface for sandbox session state, terminal
151
+ * output, audit results, and runtime metadata.
152
+ */
153
+ declare function RuntimePane({ title, subtitle, statusBanner, statusBar, terminal, audit, inspector, footer, className, }: RuntimePaneProps): react_jsx_runtime.JSX.Element;
154
+
155
+ interface SandboxWorkbenchArtifactBase {
156
+ id: string;
157
+ title: ReactNode;
158
+ subtitle?: ReactNode;
159
+ eyebrow?: ReactNode;
160
+ meta?: ReactNode;
161
+ headerActions?: ReactNode;
162
+ toolbar?: ReactNode;
163
+ footer?: ReactNode;
164
+ }
165
+ interface SandboxWorkbenchFileArtifact extends SandboxWorkbenchArtifactBase {
166
+ kind: "file";
167
+ path: string;
168
+ filename: string;
169
+ content?: string;
170
+ blobUrl?: string;
171
+ mimeType?: string;
172
+ onDownload?: () => void;
173
+ tabs?: FileTabData[];
174
+ activeTabId?: string;
175
+ onTabSelect?: (id: string) => void;
176
+ onTabClose?: (id: string) => void;
177
+ }
178
+ interface SandboxWorkbenchMarkdownArtifact extends SandboxWorkbenchArtifactBase {
179
+ kind: "markdown";
180
+ content: string;
181
+ }
182
+ interface SandboxWorkbenchOpenUIArtifact extends SandboxWorkbenchArtifactBase {
183
+ kind: "openui";
184
+ schema: OpenUIComponentNode | OpenUIComponentNode[];
185
+ onAction?: (action: OpenUIAction) => void;
186
+ }
187
+ interface SandboxWorkbenchCustomArtifact extends SandboxWorkbenchArtifactBase {
188
+ kind: "custom";
189
+ content: ReactNode;
190
+ }
191
+ type SandboxWorkbenchArtifact = SandboxWorkbenchCustomArtifact | SandboxWorkbenchFileArtifact | SandboxWorkbenchMarkdownArtifact | SandboxWorkbenchOpenUIArtifact;
192
+ interface SandboxWorkbenchSessionProps extends Omit<ChatContainerProps, "className"> {
193
+ eyebrow?: ReactNode;
194
+ title?: ReactNode;
195
+ subtitle?: ReactNode;
196
+ meta?: ReactNode;
197
+ headerActions?: ReactNode;
198
+ }
199
+ interface SandboxWorkbenchLayoutOptions extends Pick<WorkspaceLayoutProps, "defaultBottomOpen" | "defaultLeftOpen" | "defaultLeftWidth" | "defaultRightOpen" | "defaultRightWidth" | "density" | "maxLeftWidth" | "maxRightWidth" | "minLeftWidth" | "minRightWidth" | "persistenceKey" | "resizable" | "theme"> {
200
+ }
201
+ interface SandboxWorkbenchProps {
202
+ title?: ReactNode;
203
+ subtitle?: ReactNode;
204
+ status?: ReactNode;
205
+ directory?: DirectoryPaneProps;
206
+ session: SandboxWorkbenchSessionProps;
207
+ artifacts?: SandboxWorkbenchArtifact[];
208
+ activeArtifactId?: string;
209
+ onArtifactChange?: (artifactId: string) => void;
210
+ onArtifactClose?: (artifactId: string) => void;
211
+ runtime?: RuntimePaneProps;
212
+ layout?: SandboxWorkbenchLayoutOptions;
213
+ emptyArtifactState?: ReactNode;
214
+ className?: string;
215
+ }
216
+ /**
217
+ * SandboxWorkbench — high-level composition that turns sandbox-ui primitives
218
+ * into a complete session surface: directory, agent timeline, artifacts, and
219
+ * runtime in one reusable shell.
220
+ */
221
+ declare function SandboxWorkbench({ title, subtitle, status, directory, session, artifacts, activeArtifactId, onArtifactChange, onArtifactClose, runtime, layout, emptyArtifactState, className, }: SandboxWorkbenchProps): react_jsx_runtime.JSX.Element;
222
+ declare function AgentWorkbench(props: SandboxWorkbenchProps): react_jsx_runtime.JSX.Element;
62
223
 
63
224
  /**
64
225
  * AuditResults — structured pass/fail display for form audits.
@@ -87,27 +248,4 @@ interface AuditResultsProps {
87
248
  }
88
249
  declare function AuditResults({ forms, crossFormChecks, overallScore, className }: AuditResultsProps): react_jsx_runtime.JSX.Element;
89
250
 
90
- /**
91
- * Terminal — read-only terminal output panel.
92
- *
93
- * Shows agent's bash command output with basic ANSI color support.
94
- * Collapsible, auto-scrolls to bottom.
95
- */
96
- interface TerminalLine {
97
- id: string;
98
- text: string;
99
- type: "command" | "stdout" | "stderr" | "system";
100
- timestamp?: number;
101
- }
102
- interface TerminalProps {
103
- lines: TerminalLine[];
104
- title?: string;
105
- isCollapsed?: boolean;
106
- onToggle?: () => void;
107
- onClose?: () => void;
108
- maxHeight?: number;
109
- className?: string;
110
- }
111
- declare function TerminalPanel({ lines, title, isCollapsed, onToggle, onClose, maxHeight, className, }: TerminalProps): react_jsx_runtime.JSX.Element;
112
-
113
- export { type AuditCheck, AuditResults, type AuditResultsProps, type BannerType, type ContextBadge, type FormAudit, StatusBanner, type StatusBannerProps, StatusBar, type StatusBarProps, type TerminalLine, TerminalPanel, type TerminalProps, WorkspaceLayout, type WorkspaceLayoutProps };
251
+ export { AgentWorkbench, type AuditCheck, AuditResults, type AuditResultsProps, type BannerType, type ContextBadge, DirectoryPane, type DirectoryPaneProps, type FormAudit, RuntimePane, type RuntimePaneProps, SandboxWorkbench, type SandboxWorkbenchArtifact, type SandboxWorkbenchCustomArtifact, type SandboxWorkbenchFileArtifact, type SandboxWorkbenchLayoutOptions, type SandboxWorkbenchMarkdownArtifact, type SandboxWorkbenchOpenUIArtifact, type SandboxWorkbenchProps, type SandboxWorkbenchSessionProps, StatusBanner, type StatusBannerProps, StatusBar, type StatusBarProps, type TerminalLine, TerminalPanel, type TerminalProps, WorkspaceLayout, type WorkspaceLayoutProps };
package/dist/workspace.js CHANGED
@@ -1,13 +1,37 @@
1
1
  import {
2
+ AgentWorkbench,
2
3
  AuditResults,
4
+ DirectoryPane,
5
+ RuntimePane,
6
+ SandboxWorkbench,
3
7
  StatusBanner,
4
8
  StatusBar,
5
9
  TerminalPanel,
6
10
  WorkspaceLayout
7
- } from "./chunk-KYY2X6LY.js";
11
+ } from "./chunk-67C53XVV.js";
12
+ import "./chunk-MUOL44AE.js";
13
+ import "./chunk-4F2GJRGU.js";
14
+ import "./chunk-CNWVHQFY.js";
15
+ import "./chunk-WUR652Y3.js";
16
+ import "./chunk-HRMUF35V.js";
17
+ import "./chunk-CJ2RYVZH.js";
18
+ import "./chunk-BX6AQMUS.js";
19
+ import "./chunk-YDBXQQLC.js";
20
+ import "./chunk-TQN3VR4F.js";
21
+ import {
22
+ ArtifactPane
23
+ } from "./chunk-JF6E2DS5.js";
24
+ import "./chunk-LTFK464G.js";
25
+ import "./chunk-MXCSSOGH.js";
26
+ import "./chunk-HWLX5NME.js";
8
27
  import "./chunk-RQHJBTEU.js";
9
28
  export {
29
+ AgentWorkbench,
30
+ ArtifactPane,
10
31
  AuditResults,
32
+ DirectoryPane,
33
+ RuntimePane,
34
+ SandboxWorkbench,
11
35
  StatusBanner,
12
36
  StatusBar,
13
37
  TerminalPanel,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tangle-network/sandbox-ui",
3
- "version": "0.2.1",
3
+ "version": "0.3.3",
4
4
  "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -26,6 +26,10 @@
26
26
  "import": "./dist/workspace.js",
27
27
  "types": "./dist/workspace.d.ts"
28
28
  },
29
+ "./openui": {
30
+ "import": "./dist/openui.js",
31
+ "types": "./dist/openui.d.ts"
32
+ },
29
33
  "./files": {
30
34
  "import": "./dist/files.js",
31
35
  "types": "./dist/files.d.ts"
@@ -58,6 +62,10 @@
58
62
  "import": "./dist/hooks.js",
59
63
  "types": "./dist/hooks.d.ts"
60
64
  },
65
+ "./sdk-hooks": {
66
+ "import": "./dist/sdk-hooks.js",
67
+ "types": "./dist/sdk-hooks.d.ts"
68
+ },
61
69
  "./stores": {
62
70
  "import": "./dist/stores.js",
63
71
  "types": "./dist/stores.d.ts"
@@ -71,12 +79,11 @@
71
79
  "types": "./dist/utils.d.ts"
72
80
  },
73
81
  "./styles": "./dist/styles.css",
74
- "./globals.css": "./src/styles/globals.css",
82
+ "./globals.css": "./dist/globals.css",
75
83
  "./tailwind": "./tailwind.config.cjs"
76
84
  },
77
85
  "files": [
78
86
  "dist",
79
- "src/styles",
80
87
  "tailwind.config.cjs"
81
88
  ],
82
89
  "scripts": {
@@ -1,201 +0,0 @@
1
- import {
2
- cn
3
- } from "./chunk-RQHJBTEU.js";
4
-
5
- // src/primitives/card.tsx
6
- import * as React from "react";
7
- import { jsx } from "react/jsx-runtime";
8
- var Card = React.forwardRef(({ className, variant = "default", hover = false, ...props }, ref) => {
9
- const variants = {
10
- default: "bg-card border-border",
11
- glass: "bg-card/60 backdrop-blur-xl border-border/50",
12
- sandbox: "bg-card/80 backdrop-blur-xl border-purple-500/20 shadow-lg shadow-purple-500/5"
13
- };
14
- return /* @__PURE__ */ jsx(
15
- "div",
16
- {
17
- ref,
18
- className: cn(
19
- "rounded-xl border text-card-foreground transition-all duration-300",
20
- variants[variant],
21
- hover && "cursor-pointer hover:border-muted-foreground/50 hover:shadow-xl",
22
- className
23
- ),
24
- ...props
25
- }
26
- );
27
- });
28
- Card.displayName = "Card";
29
- var CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
30
- "div",
31
- {
32
- ref,
33
- className: cn("flex flex-col space-y-1.5 p-6", className),
34
- ...props
35
- }
36
- ));
37
- CardHeader.displayName = "CardHeader";
38
- var CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
39
- "h3",
40
- {
41
- ref,
42
- className: cn("font-semibold leading-none tracking-tight", className),
43
- ...props
44
- }
45
- ));
46
- CardTitle.displayName = "CardTitle";
47
- var CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
48
- "p",
49
- {
50
- ref,
51
- className: cn("text-muted-foreground text-sm", className),
52
- ...props
53
- }
54
- ));
55
- CardDescription.displayName = "CardDescription";
56
- var CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
57
- CardContent.displayName = "CardContent";
58
- var CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
59
- "div",
60
- {
61
- ref,
62
- className: cn("flex items-center p-6 pt-0", className),
63
- ...props
64
- }
65
- ));
66
- CardFooter.displayName = "CardFooter";
67
-
68
- // src/primitives/badge.tsx
69
- import { cva } from "class-variance-authority";
70
- import { jsx as jsx2 } from "react/jsx-runtime";
71
- var badgeVariants = cva(
72
- "inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
73
- {
74
- variants: {
75
- variant: {
76
- default: "border-transparent bg-primary text-primary-foreground",
77
- secondary: "border-transparent bg-secondary text-secondary-foreground",
78
- destructive: "border-transparent bg-destructive text-destructive-foreground",
79
- outline: "text-foreground",
80
- success: "border-green-500/20 border-transparent bg-green-500/10 text-green-400",
81
- warning: "border-transparent border-yellow-500/20 bg-yellow-500/10 text-yellow-400",
82
- error: "border-red-500/20 border-transparent bg-red-500/10 text-red-400",
83
- info: "border-blue-500/20 border-transparent bg-blue-500/10 text-blue-400",
84
- sandbox: "border-purple-500/20 border-transparent bg-purple-500/10 text-purple-400"
85
- }
86
- },
87
- defaultVariants: {
88
- variant: "default"
89
- }
90
- }
91
- );
92
- function Badge({ className, variant, ...props }) {
93
- return /* @__PURE__ */ jsx2("div", { className: cn(badgeVariants({ variant }), className), ...props });
94
- }
95
-
96
- // src/primitives/progress.tsx
97
- import * as ProgressPrimitive from "@radix-ui/react-progress";
98
- import * as React2 from "react";
99
- import { jsx as jsx3, jsxs } from "react/jsx-runtime";
100
- var Progress = React2.forwardRef(
101
- ({ className, value, variant = "default", showValue = false, ...props }, ref) => {
102
- const indicatorVariants = {
103
- default: "bg-primary",
104
- sandbox: "bg-gradient-to-r from-purple-500 to-violet-500"
105
- };
106
- return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
107
- /* @__PURE__ */ jsx3(
108
- ProgressPrimitive.Root,
109
- {
110
- ref,
111
- className: cn(
112
- "relative h-2 w-full overflow-hidden rounded-full bg-muted",
113
- className
114
- ),
115
- ...props,
116
- children: /* @__PURE__ */ jsx3(
117
- ProgressPrimitive.Indicator,
118
- {
119
- className: cn(
120
- "h-full w-full flex-1 transition-all duration-300 ease-out",
121
- indicatorVariants[variant]
122
- ),
123
- style: { transform: `translateX(-${100 - (value || 0)}%)` }
124
- }
125
- )
126
- }
127
- ),
128
- showValue && /* @__PURE__ */ jsxs("span", { className: "absolute -top-6 right-0 text-muted-foreground text-xs", children: [
129
- value,
130
- "%"
131
- ] })
132
- ] });
133
- }
134
- );
135
- Progress.displayName = ProgressPrimitive.Root.displayName;
136
-
137
- // src/primitives/skeleton.tsx
138
- import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
139
- function Skeleton({
140
- className,
141
- ...props
142
- }) {
143
- return /* @__PURE__ */ jsx4(
144
- "div",
145
- {
146
- className: cn("animate-pulse rounded-lg bg-muted", className),
147
- ...props
148
- }
149
- );
150
- }
151
- function SkeletonCard({ className }) {
152
- return /* @__PURE__ */ jsxs2(
153
- "div",
154
- {
155
- className: cn(
156
- "space-y-4 rounded-xl border border-border bg-card p-6",
157
- className
158
- ),
159
- children: [
160
- /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-3/4" }),
161
- /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/2" }),
162
- /* @__PURE__ */ jsxs2("div", { className: "space-y-2 pt-4", children: [
163
- /* @__PURE__ */ jsx4(Skeleton, { className: "h-3 w-full" }),
164
- /* @__PURE__ */ jsx4(Skeleton, { className: "h-3 w-5/6" }),
165
- /* @__PURE__ */ jsx4(Skeleton, { className: "h-3 w-4/6" })
166
- ] })
167
- ]
168
- }
169
- );
170
- }
171
- function SkeletonTable({ rows = 5 }) {
172
- return /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
173
- /* @__PURE__ */ jsxs2("div", { className: "flex gap-4 border-border border-b pb-2", children: [
174
- /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
175
- /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
176
- /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
177
- /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" })
178
- ] }),
179
- Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs2("div", { className: "flex gap-4", children: [
180
- /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
181
- /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
182
- /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
183
- /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" })
184
- ] }, i))
185
- ] });
186
- }
187
-
188
- export {
189
- Card,
190
- CardHeader,
191
- CardTitle,
192
- CardDescription,
193
- CardContent,
194
- CardFooter,
195
- badgeVariants,
196
- Badge,
197
- Progress,
198
- Skeleton,
199
- SkeletonCard,
200
- SkeletonTable
201
- };