@tangle-network/sandbox-ui 0.116.8 → 0.117.0

package/dist/{provider-logo-DjqmConF.js → provider-logo-BiuiO_c2.js}

@@ -282,6 +282,7 @@ function ProviderIcon({ id, iconUrl, displayName, size = 24, className }) {
 	}
 	const initial = (displayName ?? id).trim().charAt(0).toUpperCase() || "?";
 	const src = candidates[index];
+	const usesDefaultGithubMark = !iconUrl && normalizeProviderId(id) === "github";
 	if (!src) return /* @__PURE__ */ jsx("span", {
 		className: `flex shrink-0 items-center justify-center font-semibold text-white ${className ?? ""}`,
 		style: {
@@ -299,7 +300,7 @@ function ProviderIcon({ id, iconUrl, displayName, size = 24, className }) {
 		width: size,
 		height: size,
 		loading: "lazy",
-		className: `shrink-0 object-contain ${className ?? ""}`,
+		className: `shrink-0 object-contain ${usesDefaultGithubMark ? "dark:invert [[data-sandbox-theme='']_&]:invert" : ""} ${className ?? ""}`,
 		style: {
 			width: size,
 			height: size

package/dist/styles.css

@@ -109,6 +109,7 @@
     --color-accent: hsl(var(--accent));
     --color-accent-foreground: hsl(var(--accent-foreground));
     --color-destructive: hsl(var(--destructive));
+    --color-destructive-foreground: hsl(var(--destructive-foreground));
     --color-border: hsl(var(--border));
     --color-input: hsl(var(--input));
     --color-ring: hsl(var(--ring));
@@ -482,6 +483,9 @@
   .col-span-12 {
     grid-column: span 12 / span 12;
   }
+  .col-span-full {
+    grid-column: 1 / -1;
+  }
   .col-start-1 {
     grid-column-start: 1;
   }
@@ -968,6 +972,9 @@
   .max-h-\[70vh\] {
     max-height: 70vh;
   }
+  .max-h-\[90dvh\] {
+    max-height: 90dvh;
+  }
   .max-h-\[90vh\] {
     max-height: 90vh;
   }
@@ -995,9 +1002,15 @@
   .min-h-8 {
     min-height: calc(var(--spacing) * 8);
   }
+  .min-h-9 {
+    min-height: calc(var(--spacing) * 9);
+  }
   .min-h-10 {
     min-height: calc(var(--spacing) * 10);
   }
+  .min-h-11 {
+    min-height: calc(var(--spacing) * 11);
+  }
   .min-h-24 {
     min-height: calc(var(--spacing) * 24);
   }
@@ -1169,6 +1182,9 @@
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
+  .w-36 {
+    width: calc(var(--spacing) * 36);
+  }
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
@@ -1322,27 +1338,9 @@
   .max-w-6xl {
     max-width: var(--container-6xl);
   }
-  .max-w-26 {
-    max-width: calc(var(--spacing) * 26);
-  }
-  .max-w-28 {
-    max-width: calc(var(--spacing) * 28);
-  }
-  .max-w-36 {
-    max-width: calc(var(--spacing) * 36);
-  }
   .max-w-40 {
     max-width: calc(var(--spacing) * 40);
   }
-  .max-w-44 {
-    max-width: calc(var(--spacing) * 44);
-  }
-  .max-w-48 {
-    max-width: calc(var(--spacing) * 48);
-  }
-  .max-w-64 {
-    max-width: calc(var(--spacing) * 64);
-  }
   .max-w-80 {
     max-width: calc(var(--spacing) * 80);
   }
@@ -1508,6 +1506,9 @@
   .min-w-10 {
     min-width: calc(var(--spacing) * 10);
   }
+  .min-w-11 {
+    min-width: calc(var(--spacing) * 11);
+  }
   .min-w-14 {
     min-width: calc(var(--spacing) * 14);
   }
@@ -1577,6 +1578,9 @@
   .basis-1\/3 {
     flex-basis: calc(1 / 3 * 100%);
   }
+  .table-fixed {
+    table-layout: fixed;
+  }
   .caption-bottom {
     caption-side: bottom;
   }
@@ -1948,6 +1952,9 @@
   .overflow-x-auto {
     overflow-x: auto;
   }
+  .overflow-x-hidden {
+    overflow-x: hidden;
+  }
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -2226,12 +2233,6 @@
       border-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
     }
   }
-  .border-destructive\/50 {
-    border-color: color-mix(in srgb, hsl(var(--destructive)) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
-    }
-  }
   .border-emerald-500\/30 {
     border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3530,6 +3531,9 @@
   .text-destructive {
     color: var(--color-destructive);
   }
+  .text-destructive-foreground {
+    color: var(--color-destructive-foreground);
+  }
   .text-emerald-400 {
     color: var(--color-emerald-400);
   }
@@ -4017,6 +4021,9 @@
         background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
       }
     }
+    .group-hover\:text-\[var\(--accent-text\)\]:is(:where(.group):hover *) {
+      color: var(--accent-text);
+    }
     .group-hover\:text-foreground:is(:where(.group):hover *) {
       color: var(--color-foreground);
     }
@@ -4845,6 +4852,9 @@
     .sm\:w-auto {
       width: auto;
     }
+    .sm\:shrink-0 {
+      flex-shrink: 0;
+    }
     .sm\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -4860,6 +4870,9 @@
     .sm\:flex-row {
       flex-direction: row;
     }
+    .sm\:flex-wrap {
+      flex-wrap: wrap;
+    }
     .sm\:items-center {
       align-items: center;
     }
@@ -4888,6 +4901,9 @@
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+    .sm\:p-4 {
+      padding: calc(var(--spacing) * 4);
+    }
     .sm\:p-5 {
       padding: calc(var(--spacing) * 5);
     }
@@ -4960,9 +4976,6 @@
     .md\:grid-cols-5 {
       grid-template-columns: repeat(5, minmax(0, 1fr));
     }
-    .md\:flex-row {
-      flex-direction: row;
-    }
     .md\:items-center {
       align-items: center;
     }
@@ -5039,15 +5052,39 @@
     .xl\:col-span-8 {
       grid-column: span 8 / span 8;
     }
+    .xl\:hidden {
+      display: none;
+    }
+    .xl\:table-cell {
+      display: table-cell;
+    }
+    .xl\:w-36 {
+      width: calc(var(--spacing) * 36);
+    }
+    .xl\:w-72 {
+      width: calc(var(--spacing) * 72);
+    }
     .xl\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
+    .xl\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
     .xl\:grid-cols-4 {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
     .xl\:grid-cols-5 {
       grid-template-columns: repeat(5, minmax(0, 1fr));
     }
+    .xl\:px-4 {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+    .xl\:px-6 {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+    .xl\:py-5 {
+      padding-block: calc(var(--spacing) * 5);
+    }
   }
   @media (prefers-color-scheme: dark) {
     .dark\:text-neutral-500 {
@@ -5064,6 +5101,10 @@
         color: color-mix(in oklab, var(--color-white) 50%, transparent);
       }
     }
+    .dark\:invert {
+      --tw-invert: invert(100%);
+      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+    }
     @media (hover: hover) {
       .dark\:hover\:text-white\/50:hover {
         color: color-mix(in srgb, #fff 50%, transparent);
@@ -5097,12 +5138,6 @@
   .\[\&_svg\]\:shrink-0 svg {
     flex-shrink: 0;
   }
-  .\[\&_td\]\:px-4 td {
-    padding-inline: calc(var(--spacing) * 4);
-  }
-  .\[\&_th\]\:px-4 th {
-    padding-inline: calc(var(--spacing) * 4);
-  }
   .\[\&_tr\]\:border-b tr {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -5189,6 +5224,10 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 0px;
   }
+  [data-sandbox-theme=''] .\[\[data-sandbox-theme\=\'\'\]_\&\]\:invert {
+    --tw-invert: invert(100%);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
 }
 :root,
 [data-sandbox-ui],

package/dist/{workbench-DVOVERx0.js → workbench-B1UltdHQ.js}

@@ -1,5 +1,5 @@
 import { t as cn$1 } from "./utils-DzWbktWG.js";
-import { o as PortsList } from "./dashboard-DJQFB7iZ.js";
+import { o as PortsList } from "./dashboard-euyfLroA.js";
 import { n as TerminalView } from "./terminal-DmSUfGha.js";
 import { RichFileTree } from "./files.js";
 import { n as PreviewView } from "./embedded-app-view-CoiS_kfY.js";
@@ -7515,7 +7515,6 @@ const DIFF_OPTIONS = {
 		dark: "github-dark",
 		light: "github-light"
 	},
-	themeType: "dark",
 	stickyHeader: true
 };
 const DIFF_CONTAINER_TAG = "diffs-container";
@@ -7525,7 +7524,7 @@ const DIFF_CONTAINER_TAG = "diffs-container";
 * shadow content. Wrapping is a renderer option, not a CSS patch into its shadow
 * root; the plain patch disclosure is the accessible, engine-independent view.
 */
-function DiffView({ filename, baseline, current, showFileHeader = true, defaultWrap = true, className }) {
+function DiffView({ filename, baseline, current, showFileHeader = true, defaultWrap = true, themeType = "dark", className }) {
 	const patch = React$1.useMemo(() => buildUnifiedPatch(filename, baseline, current), [
 		filename,
 		baseline,
@@ -7534,6 +7533,12 @@ function DiffView({ filename, baseline, current, showFileHeader = true, defaultW
 	const [wrap, setWrap] = React$1.useState(defaultWrap);
 	const hintId = React$1.useId();
 	const hostRef = React$1.useRef(null);
+	const instanceRef = React$1.useRef(null);
+	const latestThemeType = React$1.useRef(themeType);
+	const appliedThemeType = React$1.useRef(themeType);
+	React$1.useLayoutEffect(() => {
+		latestThemeType.current = themeType;
+	}, [themeType]);
 	React$1.useLayoutEffect(() => {
 		const host = hostRef.current;
 		if (host == null || !patch) return;
@@ -7545,14 +7550,18 @@ function DiffView({ filename, baseline, current, showFileHeader = true, defaultW
 		host.appendChild(container);
 		const instance = new FileDiff({
 			...DIFF_OPTIONS,
+			themeType: latestThemeType.current,
 			overflow: wrap ? "wrap" : "scroll",
 			disableFileHeader: !showFileHeader
 		}, void 0, false);
+		instanceRef.current = instance;
+		appliedThemeType.current = latestThemeType.current;
 		instance.hydrate({
 			fileDiff: getSingularPatch(patch),
 			fileContainer: container
 		});
 		return () => {
+			if (instanceRef.current === instance) instanceRef.current = null;
 			instance.cleanUp();
 			container.remove();
 		};
@@ -7561,6 +7570,11 @@ function DiffView({ filename, baseline, current, showFileHeader = true, defaultW
 		showFileHeader,
 		wrap
 	]);
+	React$1.useLayoutEffect(() => {
+		if (appliedThemeType.current === themeType) return;
+		instanceRef.current?.setThemeType(themeType);
+		appliedThemeType.current = themeType;
+	}, [themeType]);
 	if (!patch) return /* @__PURE__ */ jsx("div", {
 		className: cn$1("flex h-full min-w-0 items-center justify-center bg-surface-container", className),
 		children: /* @__PURE__ */ jsx("p", {

package/dist/workbench.d.ts

@@ -1,3 +1,3 @@
-import { A as SandboxArtifactTerminal, C as ChangesPane, D as ChangesPaneProps, E as ChangedFile, O as SandboxArtifact, S as PillTabsProps, T as ArtifactView, _ as DiffStats, a as PreviewView, b as PillTabItem, c as DiffViewProps, d as FileBreadcrumb, f as FileBreadcrumbProps, g as PanelHeaderProps, h as PanelHeader, i as resolveLanguage, k as SandboxArtifactPaneProps, l as CodeView, m as GitStatusBadge, n as CodeSurface, o as PreviewViewProps, p as DiffStatsBadge, r as CodeSurfaceProps, s as DiffView, t as BRAND_PRISM_THEME, u as CodeViewProps, v as buildUnifiedPatch, w as SandboxArtifactPane, x as PillTabs, y as computeDiffStats } from "./index-l96iy93N.js";
+import { A as SandboxArtifactTerminal, C as ChangesPane, D as ChangesPaneProps, E as ChangedFile, O as SandboxArtifact, S as PillTabsProps, T as ArtifactView, _ as DiffStats, a as PreviewView, b as PillTabItem, c as DiffViewProps, d as FileBreadcrumb, f as FileBreadcrumbProps, g as PanelHeaderProps, h as PanelHeader, i as resolveLanguage, k as SandboxArtifactPaneProps, l as CodeView, m as GitStatusBadge, n as CodeSurface, o as PreviewViewProps, p as DiffStatsBadge, r as CodeSurfaceProps, s as DiffView, t as BRAND_PRISM_THEME, u as CodeViewProps, v as buildUnifiedPatch, w as SandboxArtifactPane, x as PillTabs, y as computeDiffStats } from "./index-z_zNuZHm.js";
 import { a as PreviewReadiness, i as PreviewAccess, n as EmbeddedAppView, r as EmbeddedAppViewProps, t as EmbeddedApp } from "./embedded-app-view-B_vMTtJn.js";
 export { type ArtifactView, BRAND_PRISM_THEME, type ChangedFile, ChangesPane, type ChangesPaneProps, CodeSurface, type CodeSurfaceProps, CodeView, type CodeViewProps, type DiffStats, DiffStatsBadge, DiffView, type DiffViewProps, type EmbeddedApp, EmbeddedAppView, type EmbeddedAppViewProps, FileBreadcrumb, type FileBreadcrumbProps, GitStatusBadge, PanelHeader, type PanelHeaderProps, type PillTabItem, PillTabs, type PillTabsProps, type PreviewAccess, type PreviewReadiness, PreviewView, type PreviewViewProps, type SandboxArtifact, SandboxArtifactPane, type SandboxArtifactPaneProps, type SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage };

package/dist/workbench.js

@@ -1,3 +1,3 @@
-import { a as computeDiffStats, c as BRAND_PRISM_THEME, d as DiffStatsBadge, f as GitStatusBadge, i as buildUnifiedPatch, l as CodeSurface, m as PillTabs, n as SandboxArtifactPane, o as CodeView, p as PanelHeader, r as DiffView, s as FileBreadcrumb, t as ChangesPane, u as resolveLanguage } from "./workbench-DVOVERx0.js";
+import { a as computeDiffStats, c as BRAND_PRISM_THEME, d as DiffStatsBadge, f as GitStatusBadge, i as buildUnifiedPatch, l as CodeSurface, m as PillTabs, n as SandboxArtifactPane, o as CodeView, p as PanelHeader, r as DiffView, s as FileBreadcrumb, t as ChangesPane, u as resolveLanguage } from "./workbench-B1UltdHQ.js";
 import { n as PreviewView, t as EmbeddedAppView } from "./embedded-app-view-CoiS_kfY.js";
 export { BRAND_PRISM_THEME, ChangesPane, CodeSurface, CodeView, DiffStatsBadge, DiffView, EmbeddedAppView, FileBreadcrumb, GitStatusBadge, PanelHeader, PillTabs, PreviewView, SandboxArtifactPane, buildUnifiedPatch, computeDiffStats, resolveLanguage };

package/dist/workflows.js

@@ -30,7 +30,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 	});
 }
 function lazyWorkflowGraph() {
-	return lazy(() => retryImport(() => import("./WorkflowGraph-B-NsdYz_.js").then((m) => ({ default: m.WorkflowGraph }))));
+	return lazy(() => retryImport(() => import("./WorkflowGraph-CzWs8P7y.js").then((m) => ({ default: m.WorkflowGraph }))));
 }
 var GraphErrorBoundary = class extends Component {
 	state = { hasError: false };

package/dist/{workspace-Pq-koOTW.js → workspace-fIHRXmWT.js}

@@ -6,6 +6,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { focusField, focusRing, focusRingInset } from "@tangle-network/ui/utils";
 import { Markdown } from "@tangle-network/ui/markdown";
+import { createPortal } from "react-dom";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Activity, AlertCircle, AlertTriangle, ArrowLeft, Binary, Bot, Boxes, CheckCircle, ChevronDown, ChevronRight, ChevronUp, FileCode2, FileText, FolderTree, LayoutPanelTop, Loader2, LoaderCircle, MessageSquareText, PanelBottomClose, PanelBottomOpen, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Plus, RefreshCw, Search, Settings, Shield, ShieldCheck, Sparkles, Terminal, TerminalSquare, Upload, Wifi, X, XCircle, Zap } from "lucide-react";
 import { FileArtifactPane, FileTree, filterFileTree } from "@tangle-network/ui/files";
@@ -179,7 +180,7 @@ function MobileDrawer({ side, title, header, onClose, onReturnFocus, theme, dens
 		})] })
 	});
 }
-function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, bottomHeader, defaultLeftOpen = true, defaultRightOpen = false, defaultBottomOpen = false, defaultLeftWidth = 280, defaultRightWidth = 480, defaultBottomHeight = 224, minLeftWidth = 220, maxLeftWidth = 420, minRightWidth = 320, maxRightWidth = 720, minCenterWidth = 400, minBottomHeight = 100, maxBottomHeight = 500, persistenceKey, resizable = true, theme, density = "comfortable", leftLabel = "Left workspace panel", rightLabel = "Right workspace panel", bottomLabel = "Bottom runtime panel", leftOpen: leftOpenProp, onLeftOpenChange, rightOpen: rightOpenProp, onRightOpenChange, keyboardShortcuts = false, leftCollapsedControl, leftContentClassName, rightContentClassName, centerHeaderVisibility = "auto", className }) {
+function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, bottomHeader, defaultLeftOpen = true, defaultRightOpen = false, defaultBottomOpen = false, defaultLeftWidth = 280, defaultRightWidth = 480, defaultBottomHeight = 224, minLeftWidth = 220, maxLeftWidth = 420, minRightWidth = 320, maxRightWidth = 720, minCenterWidth = 400, minBottomHeight = 100, maxBottomHeight = 500, persistenceKey, resizable = true, theme, density = "comfortable", leftLabel = "Left workspace panel", rightLabel = "Right workspace panel", bottomLabel = "Bottom runtime panel", leftOpen: leftOpenProp, onLeftOpenChange, rightOpen: rightOpenProp, onRightOpenChange, keyboardShortcuts = false, leftCollapsedControl, leftContentClassName, rightContentClassName, keepRightMounted = false, collapsedControlsPlacement = "edge", centerHeaderVisibility = "auto", className }) {
 	const desktop = useDesktopMediaQuery(DESKTOP_BREAKPOINT);
 	const dragStateRef = useRef(null);
 	const storedLayout = useMemo(() => persistenceKey ? readStoredLayout(persistenceKey) : null, [persistenceKey]);
@@ -199,6 +200,30 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 	}, [rightControlled, onRightOpenChange]);
 	const hasLeft = Boolean(left);
 	const hasRight = Boolean(right);
+	const [rightVisited, setRightVisited] = useState(false);
+	const rightParkingRef = useRef(null);
+	const rightHost = useMemo(() => {
+		if (!keepRightMounted || typeof document === "undefined") return null;
+		const host = document.createElement("div");
+		host.className = "flex h-full min-h-0 min-w-0 flex-col";
+		return host;
+	}, [keepRightMounted]);
+	useEffect(() => {
+		if (keepRightMounted && rightOpen && hasRight) setRightVisited(true);
+	}, [
+		keepRightMounted,
+		rightOpen,
+		hasRight
+	]);
+	const mountRightHost = useCallback((node) => {
+		if (!rightHost) return;
+		const destination = node ?? rightParkingRef.current;
+		if (destination) destination.appendChild(rightHost);
+	}, [rightHost]);
+	const rightContent = keepRightMounted ? /* @__PURE__ */ jsx("div", {
+		ref: mountRightHost,
+		className: "flex h-full min-h-0 min-w-0 flex-1 flex-col"
+	}) : right;
 	const [bottomOpen, setBottomOpen] = useState(storedLayout?.bottomOpen ?? defaultBottomOpen);
 	const [leftWidth, setLeftWidth] = useState(clamp(storedLayout?.leftWidth ?? defaultLeftWidth, minLeftWidth, maxLeftWidth));
 	const [rightWidth, setRightWidth] = useState(clamp(storedLayout?.rightWidth ?? defaultRightWidth, minRightWidth, maxRightWidth));
@@ -238,7 +263,9 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 			rightWidth,
 			bottomHeight
 		};
-		window.localStorage.setItem(persistenceKey, JSON.stringify(payload));
+		try {
+			window.localStorage.setItem(persistenceKey, JSON.stringify(payload));
+		} catch {}
 	}, [
 		bottomHeight,
 		bottomOpen,
@@ -428,7 +455,7 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 						onStep: stepLeftWidth
 					})] }),
 					/* @__PURE__ */ jsxs("main", {
-						className: "flex min-w-0 flex-1 flex-col",
+						className: "relative flex min-w-0 flex-1 flex-col",
 						children: [
 							showCenterHeader && /* @__PURE__ */ jsxs(WorkspacePaneHeader, {
 								className: "gap-2",
@@ -451,11 +478,11 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 								]
 							}),
 							/* @__PURE__ */ jsxs("div", {
-								className: "flex min-h-0 flex-1",
+								className: "relative flex min-h-0 flex-1",
 								children: [
 									!showCenterHeader && leftReopenControl && /* @__PURE__ */ jsx("div", {
 										ref: leftReopenRef,
-										className: "shrink-0 pt-2",
+										className: cn$1("shrink-0 pt-2", collapsedControlsPlacement === "overlay" && "absolute left-2 top-2 z-20 pt-0"),
 										children: leftReopenControl
 									}),
 									/* @__PURE__ */ jsx("div", {
@@ -463,7 +490,7 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 										children: center
 									}),
 									!showCenterHeader && (bottomReopenControl || rightReopenControl) && /* @__PURE__ */ jsxs("div", {
-										className: "flex shrink-0 flex-col gap-1 pt-2",
+										className: cn$1("flex shrink-0 flex-col gap-1 pt-2", collapsedControlsPlacement === "overlay" && "absolute right-2 top-2 z-20 pt-0"),
 										children: [bottomReopenControl, rightReopenControl && /* @__PURE__ */ jsx("div", {
 											ref: rightReopenRef,
 											children: rightReopenControl
@@ -536,11 +563,17 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 							})]
 						}), /* @__PURE__ */ jsx("div", {
 							className: cn$1("min-h-0 flex-1 overflow-auto", rightContentClassName),
-							children: right
+							children: rightContent
 						})]
 					})] })
 				]
 			}),
+			keepRightMounted && /* @__PURE__ */ jsx("div", {
+				hidden: true,
+				ref: rightParkingRef,
+				"aria-hidden": "true",
+				children: rightHost && (rightOpen || rightVisited) && hasRight ? createPortal(right, rightHost) : null
+			}),
 			!desktop && left && leftOpen && !(right && rightOpen) && /* @__PURE__ */ jsx(MobileDrawer, {
 				side: "left",
 				title: leftLabel,
@@ -559,7 +592,7 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 				onReturnFocus: () => focusSideControl("right"),
 				theme,
 				density,
-				children: right
+				children: rightContent
 			})
 		]
 	});

package/dist/workspace.d.ts

@@ -1,2 +1,2 @@
-import { $ as TerminalProps, A as ShellShouldRevalidateArgs, B as SessionSidebarLink, C as SandboxWorkbenchLayoutOptions, D as SandboxWorkbenchSessionProps, E as SandboxWorkbenchProps, F as SessionSidebar, G as SessionOptimisticController, H as SessionSidebarVariant, I as SessionSidebarBadge, J as useOptimisticSessionItems, K as UseOptimisticSessionItemsOptions, L as SessionSidebarFilter, M as createShellShouldRevalidate, N as shellShouldRevalidate, O as SessionActivityMonitor, P as formatRelativeAge, Q as TerminalPanel, R as SessionSidebarGroupBy, S as SandboxWorkbenchFileArtifact, T as SandboxWorkbenchOpenUIArtifact, U as SESSION_CREATED_EVENT, V as SessionSidebarProps, W as SessionCreatedDetail, X as RuntimePaneProps, Y as RuntimePane, Z as TerminalLine, _ as FormAudit, a as ApprovalQueue, at as StatusBannerProps, b as SandboxWorkbenchArtifact, c as CalendarView, ct as WorkspacePaneHeader, d as TaskBoardColumn, dt as WorkspaceLayoutProps, et as ContextBadge, f as TaskBoardItem, g as AuditResultsProps, h as AuditResults, i as ApprovalItem, it as StatusBanner, j as ShellShouldRevalidateOptions, k as SessionActivityMonitorProps, l as CalendarViewProps, lt as WorkspacePaneHeaderProps, m as AuditCheck, n as ArtifactPaneProps, nt as StatusBarProps, o as ApprovalQueueProps, ot as DirectoryPane, p as TaskBoardProps, q as dispatchSessionCreated, r as ApprovalConfidenceStat, rt as BannerType, s as CalendarEvent, st as DirectoryPaneProps, t as ArtifactPane, tt as StatusBar, u as TaskBoard, ut as WorkspaceLayout, v as AgentWorkbench, w as SandboxWorkbenchMarkdownArtifact, x as SandboxWorkbenchCustomArtifact, y as SandboxWorkbench, z as SessionSidebarItem } from "./index-iDiLnSoo.js";
+import { $ as TerminalProps, A as ShellShouldRevalidateArgs, B as SessionSidebarLink, C as SandboxWorkbenchLayoutOptions, D as SandboxWorkbenchSessionProps, E as SandboxWorkbenchProps, F as SessionSidebar, G as SessionOptimisticController, H as SessionSidebarVariant, I as SessionSidebarBadge, J as useOptimisticSessionItems, K as UseOptimisticSessionItemsOptions, L as SessionSidebarFilter, M as createShellShouldRevalidate, N as shellShouldRevalidate, O as SessionActivityMonitor, P as formatRelativeAge, Q as TerminalPanel, R as SessionSidebarGroupBy, S as SandboxWorkbenchFileArtifact, T as SandboxWorkbenchOpenUIArtifact, U as SESSION_CREATED_EVENT, V as SessionSidebarProps, W as SessionCreatedDetail, X as RuntimePaneProps, Y as RuntimePane, Z as TerminalLine, _ as FormAudit, a as ApprovalQueue, at as StatusBannerProps, b as SandboxWorkbenchArtifact, c as CalendarView, ct as WorkspacePaneHeader, d as TaskBoardColumn, dt as WorkspaceLayoutProps, et as ContextBadge, f as TaskBoardItem, g as AuditResultsProps, h as AuditResults, i as ApprovalItem, it as StatusBanner, j as ShellShouldRevalidateOptions, k as SessionActivityMonitorProps, l as CalendarViewProps, lt as WorkspacePaneHeaderProps, m as AuditCheck, n as ArtifactPaneProps, nt as StatusBarProps, o as ApprovalQueueProps, ot as DirectoryPane, p as TaskBoardProps, q as dispatchSessionCreated, r as ApprovalConfidenceStat, rt as BannerType, s as CalendarEvent, st as DirectoryPaneProps, t as ArtifactPane, tt as StatusBar, u as TaskBoard, ut as WorkspaceLayout, v as AgentWorkbench, w as SandboxWorkbenchMarkdownArtifact, x as SandboxWorkbenchCustomArtifact, y as SandboxWorkbench, z as SessionSidebarItem } from "./index-CcbhfDa-.js";
 export { AgentWorkbench, type ApprovalConfidenceStat, type ApprovalItem, ApprovalQueue, type ApprovalQueueProps, ArtifactPane, type ArtifactPaneProps, type AuditCheck, AuditResults, type AuditResultsProps, type BannerType, type CalendarEvent, CalendarView, type CalendarViewProps, type ContextBadge, DirectoryPane, type DirectoryPaneProps, type FormAudit, RuntimePane, type RuntimePaneProps, SESSION_CREATED_EVENT, SandboxWorkbench, type SandboxWorkbenchArtifact, type SandboxWorkbenchCustomArtifact, type SandboxWorkbenchFileArtifact, type SandboxWorkbenchLayoutOptions, type SandboxWorkbenchMarkdownArtifact, type SandboxWorkbenchOpenUIArtifact, type SandboxWorkbenchProps, type SandboxWorkbenchSessionProps, SessionActivityMonitor, type SessionActivityMonitorProps, type SessionCreatedDetail, type SessionOptimisticController, SessionSidebar, type SessionSidebarBadge, type SessionSidebarFilter, type SessionSidebarGroupBy, type SessionSidebarItem, type SessionSidebarLink, type SessionSidebarProps, type SessionSidebarVariant, type ShellShouldRevalidateArgs, type ShellShouldRevalidateOptions, StatusBanner, type StatusBannerProps, StatusBar, type StatusBarProps, TaskBoard, type TaskBoardColumn, type TaskBoardItem, type TaskBoardProps, type TerminalLine, TerminalPanel, type TerminalProps, type UseOptimisticSessionItemsOptions, WorkspaceLayout, type WorkspaceLayoutProps, WorkspacePaneHeader, type WorkspacePaneHeaderProps, createShellShouldRevalidate, dispatchSessionCreated, formatRelativeAge, shellShouldRevalidate, useOptimisticSessionItems };

package/dist/workspace.js

@@ -1,3 +1,3 @@
 import { t as WorkspacePaneHeader } from "./workspace-pane-header-Bg1cCcHX.js";
-import { _ as TerminalPanel, a as AuditResults, b as DirectoryPane, c as SessionActivityMonitor, d as SessionSidebar, f as SESSION_CREATED_EVENT, g as RuntimePane, h as formatRelativeAge, i as TaskBoard, l as createShellShouldRevalidate, m as useOptimisticSessionItems, n as ApprovalQueue, o as AgentWorkbench, p as dispatchSessionCreated, r as CalendarView, s as SandboxWorkbench, t as ArtifactPane, u as shellShouldRevalidate, v as StatusBar, x as WorkspaceLayout, y as StatusBanner } from "./workspace-Pq-koOTW.js";
+import { _ as TerminalPanel, a as AuditResults, b as DirectoryPane, c as SessionActivityMonitor, d as SessionSidebar, f as SESSION_CREATED_EVENT, g as RuntimePane, h as formatRelativeAge, i as TaskBoard, l as createShellShouldRevalidate, m as useOptimisticSessionItems, n as ApprovalQueue, o as AgentWorkbench, p as dispatchSessionCreated, r as CalendarView, s as SandboxWorkbench, t as ArtifactPane, u as shellShouldRevalidate, v as StatusBar, x as WorkspaceLayout, y as StatusBanner } from "./workspace-fIHRXmWT.js";
 export { AgentWorkbench, ApprovalQueue, ArtifactPane, AuditResults, CalendarView, DirectoryPane, RuntimePane, SESSION_CREATED_EVENT, SandboxWorkbench, SessionActivityMonitor, SessionSidebar, StatusBanner, StatusBar, TaskBoard, TerminalPanel, WorkspaceLayout, WorkspacePaneHeader, createShellShouldRevalidate, dispatchSessionCreated, formatRelativeAge, shellShouldRevalidate, useOptimisticSessionItems };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.116.8",
+  "version": "0.117.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -78,6 +78,10 @@
       "import": "./dist/integrations.js",
       "types": "./dist/integrations.d.ts"
     },
+    "./connections": {
+      "import": "./dist/connections.js",
+      "types": "./dist/connections.d.ts"
+    },
     "./connectors": {
       "import": "./dist/connectors.js",
       "types": "./dist/connectors.d.ts"

package/dist/{chat-BOvFAe6p.js → chat-Ci6Xi1rd.js}

@@ -2,9 +2,9 @@ import { t as cn$1 } from "./utils-DzWbktWG.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { focusField, focusRing } from "@tangle-network/ui/utils";
+import { createPortal } from "react-dom";
 import { Bot, Brain, Check, ChevronDown, Lock, Pencil, Plus, Send, Sparkles, Square, Trash2, X } from "lucide-react";
 import { AgentTimeline, ChatContainer as ChatContainer$1, ChatMessage, ChatMessage as ChatMessage$1, MessageList, ThinkingIndicator, UserMessage } from "@tangle-network/ui/chat";
-import { createPortal } from "react-dom";
 import { modelProvider, reasoningLadder, snapHarnessToModel } from "@tangle-network/agent-interface";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 //#region src/chat/reasoning-level-picker.tsx