@tangle-network/sandbox-ui 0.130.0 → 0.131.0

package/dist/assets.d.ts

@@ -189,11 +189,13 @@ interface ApprovalQueueProps {
   onSave?: (spec: AssetSpec) => void;
   onRevisionRequest?: (id: string, instruction: string) => void;
   onRenderRequest?: (id: string) => void;
+  /** Opens one asset's detail view, with the ids the queue shows, in order, for previous and next. */
+  onOpen?: (id: string, visibleIds: string[]) => void;
   renderingIds?: Set<string>;
   previewUrls?: Record<string, string>;
   className?: string;
 }
-export declare function ApprovalQueue({ assets, variantCounts, onApprove, onReject, onEdit, onSave, onRevisionRequest, onRenderRequest, renderingIds, previewUrls, className }: ApprovalQueueProps): React$1.JSX.Element;
+export declare function ApprovalQueue({ assets, variantCounts, onApprove, onReject, onEdit, onSave, onRevisionRequest, onRenderRequest, onOpen, renderingIds, previewUrls, className }: ApprovalQueueProps): React$1.JSX.Element;
 //#endregion
 //#region src/assets/asset-card.d.ts
 interface AssetCardProps {
@@ -202,9 +204,15 @@ interface AssetCardProps {
   onApprove?: (id: string) => void;
   onReject?: (id: string) => void;
   onEdit?: (id: string) => void;
+  /** Opens the asset's detail view. When set, the thumbnail and card body are one click target. */
+  onOpen?: (id: string) => void;
   className?: string;
 }
-export declare function AssetCard({ spec, variantCount, onApprove, onReject, onEdit, className }: AssetCardProps): import("react").JSX.Element;
+/** The URL of an image slide that is one picture with nothing layered on it. */
+export declare function imageOnlyUrl(content: ImageContent): string | null;
+/** The still frame a video asset carries: its first image scene or image slide. */
+export declare function videoPosterUrl(content: VideoContent): string | null;
+export declare function AssetCard({ spec, variantCount, onApprove, onReject, onEdit, onOpen, className }: AssetCardProps): import("react").JSX.Element;
 //#endregion
 //#region src/assets/asset-editor.d.ts
 interface AssetEditorProps {
@@ -218,6 +226,12 @@ interface AssetEditorProps {
 }
 export declare function AssetEditor({ spec, previewUrl, isRendering, onSave, onRenderRequest, onRevisionRequest, className }: AssetEditorProps): React$1.JSX.Element;
 //#endregion
+//#region src/assets/labels.d.ts
+/** Reader-facing name for each asset format. */
+export declare const ASSET_FORMAT_LABEL: Record<AssetFormat, string>;
+/** Reader-facing name for each review status. */
+export declare const ASSET_STATUS_LABEL: Record<AssetStatus, string>;
+//#endregion
 //#region src/assets/preview/copy-preview.d.ts
 interface CopyPreviewProps {
   content: CopyContent;

package/dist/assets.js

@@ -3,7 +3,7 @@ import { Badge, Button, Input, Label, Textarea } from "@tangle-network/ui/primit
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { Fragment as Fragment$1 } from "react";
-import { Check, CheckCheck, ChevronDown, ChevronLeft, ChevronRight, Film, GitBranch, Loader2, MessageSquare, Pencil, Play, Save, Search, X } from "lucide-react";
+import { Check, CheckCheck, ChevronDown, ChevronLeft, ChevronRight, Film, GitBranch, Loader2, Maximize2, MessageSquare, Pencil, Play, Save, Search, X } from "lucide-react";
 //#region src/assets/preview/image-preview.tsx
 const ASPECT = {
 	feed: "aspect-square",
@@ -118,6 +118,29 @@ function ImagePreview({ content, brand, format = "feed", className }) {
 	});
 }
 //#endregion
+//#region src/assets/labels.ts
+/** Reader-facing name for each asset format. */
+const ASSET_FORMAT_LABEL = {
+	email: "Email",
+	"image:feed": "Feed image",
+	"image:story": "Story",
+	"image:carousel": "Carousel",
+	"video:reel": "Reel",
+	"video:feed": "Feed video",
+	"copy:caption": "Caption",
+	"copy:headline": "Headline",
+	"copy:sms": "SMS"
+};
+/** Reader-facing name for each review status. */
+const ASSET_STATUS_LABEL = {
+	draft: "Draft",
+	pending_review: "Pending review",
+	approved: "Approved",
+	rejected: "Rejected",
+	scheduled: "Scheduled",
+	published: "Published"
+};
+//#endregion
 //#region src/assets/asset-card.tsx
 const STATUS_VARIANT = {
 	draft: "secondary",
@@ -127,111 +150,173 @@ const STATUS_VARIANT = {
 	scheduled: "secondary",
 	published: "default"
 };
-const STATUS_LABEL = {
-	draft: "Draft",
-	pending_review: "Review",
-	approved: "Approved",
-	rejected: "Rejected",
-	scheduled: "Scheduled",
-	published: "Published"
-};
+/** The URL of an image slide that is one picture with nothing layered on it. */
+function imageOnlyUrl(content) {
+	const slide = content.slides[0];
+	return slide && slide.layers.length === 0 && slide.background.type === "image" ? slide.background.url : null;
+}
+/** The still frame a video asset carries: its first image scene or image slide. */
+function videoPosterUrl(content) {
+	for (const scene of content.scenes) {
+		if (scene.type === "image-reveal") return scene.imageUrl;
+		if (scene.type === "slide" && scene.slide.background.type === "image") return scene.slide.background.url;
+	}
+	return null;
+}
+function formatDuration(seconds) {
+	const whole = Math.max(0, Math.round(seconds));
+	return `${Math.floor(whole / 60)}:${String(whole % 60).padStart(2, "0")}`;
+}
+/** A short phrase that tells one asset from another of the same format. */
+function assetSummary(spec) {
+	if (spec.format === "email") return spec.content.subject || null;
+	if (spec.format.startsWith("copy:")) return spec.content.headline || null;
+	return null;
+}
 function Thumbnail({ spec }) {
 	const { format, brand, content } = spec;
 	if (format === "email") {
 		const ec = content;
 		return /* @__PURE__ */ jsxs("div", {
-			className: "p-2 text-xs space-y-0.5",
+			className: "flex h-full flex-col gap-1 p-3 text-sm",
 			children: [/* @__PURE__ */ jsx("div", {
-				className: "font-medium truncate",
+				className: "line-clamp-3 font-medium",
 				children: ec.subject
 			}), /* @__PURE__ */ jsxs("div", {
-				className: "text-muted-foreground truncate text-[10px]",
+				className: "text-xs text-muted-foreground",
 				children: [ec.sections.length, " sections"]
 			})]
 		});
 	}
-	if (format.startsWith("image:")) return /* @__PURE__ */ jsx("div", {
-		className: "overflow-hidden rounded",
-		style: { maxHeight: 120 },
-		children: /* @__PURE__ */ jsx(ImagePreview, {
-			content,
-			brand,
-			format: format === "image:story" ? "story" : "feed"
-		})
-	});
+	if (format.startsWith("image:")) {
+		const ic = content;
+		const url = imageOnlyUrl(ic);
+		if (url) return /* @__PURE__ */ jsx("img", {
+			src: url,
+			alt: "",
+			loading: "lazy",
+			decoding: "async",
+			className: "h-full w-full object-contain"
+		});
+		return /* @__PURE__ */ jsx("div", {
+			className: "h-full overflow-hidden",
+			children: /* @__PURE__ */ jsx(ImagePreview, {
+				content: ic,
+				brand,
+				format: format === "image:story" ? "story" : "feed"
+			})
+		});
+	}
 	if (format.startsWith("video:")) {
 		const vc = content;
+		const poster = videoPosterUrl(vc);
 		return /* @__PURE__ */ jsxs("div", {
-			className: "p-2 text-xs space-y-0.5",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "font-medium",
-				children: [vc.scenes.length, " scenes"]
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "text-muted-foreground",
-				children: [vc.durationSeconds, "s video"]
-			})]
+			className: "relative h-full w-full",
+			children: [
+				poster ? /* @__PURE__ */ jsx("img", {
+					src: poster,
+					alt: "",
+					loading: "lazy",
+					decoding: "async",
+					className: "h-full w-full object-contain"
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "flex h-full flex-col gap-1 p-3 text-sm",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "font-medium",
+						children: [vc.scenes.length, " scenes"]
+					})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "pointer-events-none absolute top-1/2 left-1/2 flex size-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-black/60 text-white",
+					children: /* @__PURE__ */ jsx(Play, {
+						size: 18,
+						className: "translate-x-px",
+						"aria-hidden": true
+					})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "pointer-events-none absolute right-2 bottom-2 rounded bg-black/70 px-1.5 py-0.5 text-xs text-white tabular-nums",
+					children: formatDuration(vc.durationSeconds)
+				})
+			]
 		});
 	}
 	if (format.startsWith("copy:")) {
 		const cc = content;
 		return /* @__PURE__ */ jsxs("div", {
-			className: "p-2 text-xs truncate space-y-0.5",
+			className: "flex h-full flex-col gap-1 p-3 text-sm",
 			children: [/* @__PURE__ */ jsx("div", {
-				className: "font-medium truncate",
+				className: "line-clamp-2 font-medium",
 				children: cc.headline
 			}), /* @__PURE__ */ jsx("div", {
-				className: "text-muted-foreground line-clamp-2 text-[10px]",
+				className: "line-clamp-4 text-xs text-muted-foreground",
 				children: cc.body
 			})]
 		});
 	}
 	return null;
 }
-function AssetCard({ spec, variantCount, onApprove, onReject, onEdit, className }) {
+function AssetCard({ spec, variantCount, onApprove, onReject, onEdit, onOpen, className }) {
+	const formatLabel = ASSET_FORMAT_LABEL[spec.format] ?? spec.format;
+	const statusLabel = ASSET_STATUS_LABEL[spec.status] ?? spec.status;
+	const summary = assetSummary(spec);
+	const hasActions = Boolean(onEdit || spec.status === "pending_review" && (onReject || onApprove));
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("rounded-lg border border-border bg-card flex flex-col overflow-hidden hover:border-border/80 transition-colors", className),
+		"data-asset-id": spec.id,
+		className: cn("group relative flex flex-col overflow-hidden rounded-lg border border-border bg-card transition-[border-color,box-shadow]", onOpen && "hover:border-primary/60 hover:shadow-md", className),
 		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "min-h-[80px] bg-muted/30",
-				children: /* @__PURE__ */ jsx(Thumbnail, { spec })
+			onOpen && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-asset-open": "",
+				onClick: () => onOpen(spec.id),
+				"aria-label": `Open ${formatLabel.toLowerCase()}${summary ? `: ${summary}` : ""}, ${statusLabel.toLowerCase()}`,
+				className: "absolute inset-0 z-[1] cursor-pointer rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "px-2 py-1.5 flex items-center gap-1.5",
+				className: "relative aspect-square overflow-hidden bg-muted/40",
+				children: [/* @__PURE__ */ jsx(Thumbnail, { spec }), onOpen && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "pointer-events-none absolute top-2 right-2 flex size-7 items-center justify-center rounded-md bg-background/90 text-foreground opacity-0 shadow-sm transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",
+					children: /* @__PURE__ */ jsx(Maximize2, { size: 14 })
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 px-2.5 py-2",
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						className: "text-[10px] text-muted-foreground flex-1 truncate",
-						children: spec.format
+						className: "min-w-0 flex-1 truncate text-xs text-muted-foreground",
+						children: formatLabel
 					}),
 					/* @__PURE__ */ jsx(Badge, {
 						variant: STATUS_VARIANT[spec.status],
-						className: "text-[10px] h-4 px-1.5",
-						children: STATUS_LABEL[spec.status]
+						className: "shrink-0 text-xs",
+						children: statusLabel
 					}),
 					variantCount !== void 0 && variantCount > 0 && /* @__PURE__ */ jsxs("span", {
-						className: "flex items-center gap-0.5 text-[10px] text-muted-foreground",
-						children: [/* @__PURE__ */ jsx(GitBranch, { size: 10 }), variantCount]
+						className: "flex shrink-0 items-center gap-0.5 text-xs text-muted-foreground",
+						children: [/* @__PURE__ */ jsx(GitBranch, { size: 12 }), variantCount]
 					})
 				]
 			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex border-t border-border",
+			hasActions && /* @__PURE__ */ jsxs("div", {
+				className: "relative z-[2] flex border-t border-border bg-card",
 				children: [
 					onEdit && /* @__PURE__ */ jsxs("button", {
 						type: "button",
 						onClick: () => onEdit(spec.id),
-						className: "flex-1 flex items-center justify-center gap-1 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors",
+						className: "flex flex-1 items-center justify-center gap-1 py-2 text-xs text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground",
 						children: [/* @__PURE__ */ jsx(Pencil, { size: 12 }), "Edit"]
 					}),
 					onReject && spec.status === "pending_review" && /* @__PURE__ */ jsxs("button", {
 						type: "button",
 						onClick: () => onReject(spec.id),
-						className: "flex-1 flex items-center justify-center gap-1 py-1.5 text-xs text-muted-foreground hover:text-destructive hover:bg-destructive/5 transition-colors border-l border-border",
+						className: "flex flex-1 items-center justify-center gap-1 border-l border-border py-2 text-xs text-muted-foreground transition-colors hover:bg-destructive/5 hover:text-destructive",
 						children: [/* @__PURE__ */ jsx(X, { size: 12 }), "Reject"]
 					}),
 					onApprove && spec.status === "pending_review" && /* @__PURE__ */ jsxs("button", {
 						type: "button",
 						onClick: () => onApprove(spec.id),
-						className: "flex-1 flex items-center justify-center gap-1 py-1.5 text-xs text-muted-foreground hover:text-green-600 hover:bg-green-600/5 transition-colors border-l border-border",
+						className: "flex flex-1 items-center justify-center gap-1 border-l border-border py-2 text-xs text-muted-foreground transition-colors hover:bg-green-600/5 hover:text-green-600",
 						children: [/* @__PURE__ */ jsx(Check, { size: 12 }), "Approve"]
 					})
 				]
@@ -886,7 +971,7 @@ const STATUS_OPTIONS = [
 		label: "Published"
 	}
 ];
-function ApprovalQueue({ assets, variantCounts = {}, onApprove, onReject, onEdit, onSave, onRevisionRequest, onRenderRequest, renderingIds = /* @__PURE__ */ new Set(), previewUrls = {}, className }) {
+function ApprovalQueue({ assets, variantCounts = {}, onApprove, onReject, onEdit, onSave, onRevisionRequest, onRenderRequest, onOpen, renderingIds = /* @__PURE__ */ new Set(), previewUrls = {}, className }) {
 	const [search, setSearch] = React$1.useState("");
 	const [formatFilter, setFormatFilter] = React$1.useState("all");
 	const [statusFilter, setStatusFilter] = React$1.useState("pending_review");
@@ -1013,10 +1098,11 @@ function ApprovalQueue({ assets, variantCounts = {}, onApprove, onReject, onEdit
 				variantCount: variantCounts[a.id],
 				onApprove,
 				onReject,
-				onEdit: () => setEditingId(a.id)
+				onEdit: () => setEditingId(a.id),
+				onOpen: onOpen ? (id) => onOpen(id, filtered.map((asset) => asset.id)) : void 0
 			}, a.id))
 		})]
 	});
 }
 //#endregion
-export { ApprovalQueue, AssetCard, AssetEditor, CopyPreview, EmailPreview, ImagePreview, VideoPreview };
+export { ASSET_FORMAT_LABEL, ASSET_STATUS_LABEL, ApprovalQueue, AssetCard, AssetEditor, CopyPreview, EmailPreview, ImagePreview, VideoPreview, imageOnlyUrl, videoPosterUrl };

package/dist/globals.css

@@ -435,6 +435,12 @@
   .z-50 {
     z-index: 50;
   }
+  .z-\[1\] {
+    z-index: 1;
+  }
+  .z-\[2\] {
+    z-index: 2;
+  }
   .z-\[70\] {
     z-index: 70;
   }
@@ -736,6 +742,10 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-7 {
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+  }
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
@@ -1680,6 +1690,10 @@
     --tw-translate-x: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-px {
+    --tw-translate-x: 1px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2659,6 +2673,12 @@
       background-color: color-mix(in oklab, hsl(var(--background)) 80%, transparent);
     }
   }
+  .bg-background\/90 {
+    background-color: hsl(var(--background));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--background)) 90%, transparent);
+    }
+  }
   .bg-black {
     background-color: var(--color-black);
   }
@@ -2674,6 +2694,18 @@
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
   }
+  .bg-black\/60 {
+    background-color: color-mix(in srgb, #000 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
+    }
+  }
+  .bg-black\/70 {
+    background-color: color-mix(in srgb, #000 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
+    }
+  }
   .bg-black\/80 {
     background-color: color-mix(in srgb, #000 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4193,6 +4225,9 @@
   .ring-inset {
     --tw-ring-inset: inset;
   }
+  .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
+    opacity: 100%;
+  }
   @media (hover: hover) {
     .group-hover\:block:is(:where(.group):hover *) {
       display: block;
@@ -4367,14 +4402,6 @@
         border-color: color-mix(in oklab, hsl(var(--accent)) 50%, transparent);
       }
     }
-    .hover\:border-border\/80:hover {
-      border-color: hsl(var(--border));
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:border-border\/80:hover {
-        border-color: color-mix(in oklab, hsl(var(--border)) 80%, transparent);
-      }
-    }
     .hover\:border-destructive\/30:hover {
       border-color: hsl(var(--destructive));
     }
@@ -4434,6 +4461,14 @@
         border-color: color-mix(in oklab, hsl(var(--primary)) 50%, transparent);
       }
     }
+    .hover\:border-primary\/60:hover {
+      border-color: hsl(var(--primary));
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:border-primary\/60:hover {
+        border-color: color-mix(in oklab, hsl(var(--primary)) 60%, transparent);
+      }
+    }
     .hover\:\!bg-primary:hover {
       background-color: hsl(var(--primary)) !important;
     }
@@ -4738,6 +4773,10 @@
     .hover\:opacity-100:hover {
       opacity: 100%;
     }
+    .hover\:shadow-md:hover {
+      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
     .hover\:shadow-sm:hover {
       --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

package/dist/{index-WKvzhZvh.d.ts → index-B2nE9_FN.d.ts}

@@ -750,7 +750,12 @@ type WorkspaceFilesSource = {
 type WorkspaceFilesPaneProps = WorkspaceFilesSource & {
   /** The open file. Its row is selected and its folders are revealed when it changes. */
   selectedPath?: string;
-  /** Called when the reader opens a file. Folder rows expand and collapse instead. */
+  /**
+   * Called when the reader opens a file, and on every folder row click (the
+   * folder also expands or collapses). A folder's path carries a trailing `/`,
+   * as it did when this pane rendered RichFileTree; check `node.type` to tell
+   * them apart.
+   */
   onSelect?: (path: string, node?: FileNode) => void;
   preview?: WorkspaceFilesPreview;
   onBack?: () => void;

package/dist/{index-DPCnMr4b.d.ts → index-DGil6iqm.d.ts}

@@ -13,6 +13,11 @@ interface VaultTreeProps {
   onSelect: (path: string) => void;
   /** Called after the reader expands or collapses a folder. */
   onFolderToggle?: (path: string, expanded: boolean) => void;
+  /**
+   * Called every time the reader activates a folder row (click, Enter or
+   * Space), whether or not that changes its expansion, as when filtering.
+   */
+  onFolderSelect?: (path: string) => void;
   /**
    * Remembers folder expansion in this browser under this key, for example
    * `${userId}:${workspaceId}`. Omit to keep expansion for the mounted tree only.
@@ -24,7 +29,7 @@ interface VaultTreeProps {
   label?: string;
   className?: string;
 }
-declare function VaultTree({ root, selectedPath, activeFolder, onSelect, onFolderToggle, storageKey, expandAll, label, className }: VaultTreeProps): import("react").JSX.Element;
+declare function VaultTree({ root, selectedPath, activeFolder, onSelect, onFolderToggle, onFolderSelect, storageKey, expandAll, label, className }: VaultTreeProps): import("react").JSX.Element;
 //#endregion
 //#region src/vault-tree/tree-data.d.ts
 /**

package/dist/index.d.ts

@@ -10,12 +10,12 @@ import { t as Session } from "./sidecar-DgH_vQ6m.js";
 import { d as useSessionStream, l as UseSessionStreamOptions, n as UseSidecarAuthOptions, o as SessionDegradation, r as useSidecarAuth, s as SessionInfo, t as SidecarAuth, u as UseSessionStreamResult } from "./use-sidecar-auth-CCTJcrq7.js";
 import { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AuthUser, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SandboxMetrics, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SidecarMetricsPayload, TaskStreamEvent, TerminalStreamEvent, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSandboxMetricsOptions, UseSandboxMetricsResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useCreateSession, useDeleteSession, useDropdownMenu, useLiveTime, useRealtimeSession, useRenameSession, useRunCollapseState, useRunGroups, useSSEStream, useSandboxMetrics, useSdkSession, useSessions, useToolCallStream } from "./hooks.js";
 import { $ as ContextMenuShortcut, $n as TableProps, $t as PageShell, A as CardFooter, An as SheetPortal, Ar as badgeVariants, At as DropdownMenuSubTrigger, B as Collapsible, Bn as StatCardProps, Br as LogoProps, Bt as IconTile, C as BadgeProps, Cn as Sheet, Cr as Tooltip, Ct as DropdownMenuPortal, D as Card, Dn as SheetFooter, Dr as UploadFile, Dt as DropdownMenuShortcut, E as CATEGORY_TONES, En as SheetDescription, Er as TooltipTrigger, Et as DropdownMenuSeparator, F as Checkbox, Fn as Skeleton, Fr as useToast, Ft as FilterFieldProps, G as ContextMenuContent, Gn as TONE_CLASSES, Gt as InputProps, H as CollapsibleTrigger, Hn as StatusPillProps, Ht as InlineCode, I as Chip, In as SkeletonCard, Ir as HeadingProps, It as Heading, J as ContextMenuLabel, Jn as TableCaption, Jt as MetricProps, K as ContextMenuGroup, Kn as Table, Kt as Label, L as ChipProps, Ln as SkeletonTable, Lr as SectionTitle, Lt as HeadingVariant, M as CardTitle, Mn as SheetTrigger, Mr as initialsOf, Mt as EmptyState, N as CardTitleProps, Nn as SidebarDropZone, Nr as toneFor, Nt as EmptyStateProps, O as CardContent, On as SheetHeader, Or as UploadProgress, Ot as DropdownMenuSub, P as CategoryTone, Pn as SidebarDropZoneProps, Pr as useTheme, Pt as FilterField, Q as ContextMenuSeparator, Qn as TableHeader, Qt as PageHeaderProps, R as CodeBlock, Rn as Slider, Rr as SectionTitleProps, Rt as HelpText, S as Badge, Sn as Separator, Sr as ToolbarProps, St as DropdownMenuLabel, T as ButtonProps, Tn as SheetContent, Tr as TooltipProvider, Tt as DropdownMenuRadioItem, U as ContextMenu, Un as StatusTone, Ut as InlineCodeProps, V as CollapsibleContent, Vn as StatusPill, Vr as TangleKnot, Vt as IconTileProps, W as ContextMenuCheckboxItem, Wn as Switch, Wt as Input, X as ContextMenuRadioGroup, Xn as TableFooter, Xt as MetricStripProps, Y as ContextMenuPortal, Yn as TableCell, Yt as MetricStrip, Z as ContextMenuRadioItem, Zn as TableHead, Zt as PageHeader, _n as SelectScrollDownButton, _r as ToastContainer, _t as DropdownMenu, a as AlertDialogCancel, an as PopoverClose, ar as Tag, at as Dialog, b as AvatarFallback, bn as SelectTrigger, br as ToneClasses, bt as DropdownMenuGroup, c as AlertDialogFooter, cn as Progress, cr as TerminalDisplay, ct as DialogDescription, d as AlertDialogPortal, dn as SegmentedControlProps, dr as TextShimmer, dt as DialogOverlay, en as PageShellProps, er as TableRow, et as ContextMenuSub, f as AlertDialogTitle, fn as Select, fr as TextShimmerProps, ft as DialogPortal, g as AlertTone, gn as SelectLabel, gr as Toast, gt as DropZoneProps, h as AlertTitle, hn as SelectItem, hr as ThemeToggle, ht as DropZone, i as AlertDialogAction, in as PopoverAnchor, ir as TabsTrigger, it as CopyButton, j as CardHeader, jn as SheetTitle, jr as buttonVariants, jt as DropdownMenuTrigger, k as CardDescription, kn as SheetOverlay, kr as UploadProgressProps, kt as DropdownMenuSubContent, l as AlertDialogHeader, ln as SegmentedControl, lt as DialogFooter, m as AlertProps, mn as SelectGroup, mr as TextareaProps, mt as DialogTrigger, n as AlertDescription, nn as PaginationProps, nr as TabsContent, nt as ContextMenuSubTrigger, o as AlertDialogContent, on as PopoverContent, or as TagProps, ot as DialogClose, p as AlertDialogTrigger, pn as SelectContent, pr as Textarea, pt as DialogTitle, q as ContextMenuItem, qn as TableBody, qt as Metric, r as AlertDialog, rn as Popover, rr as TabsList, rt as ContextMenuTrigger, s as AlertDialogDescription, sn as PopoverTrigger, st as DialogContent, t as Alert, tn as Pagination, tr as Tabs, tt as ContextMenuSubContent, u as AlertDialogOverlay, un as SegmentedControlOption, ut as DialogHeader, vn as SelectScrollUpButton, vr as ToastProvider, vt as DropdownMenuCheckboxItem, w as Button, wn as SheetClose, wr as TooltipContent, wt as DropdownMenuRadioGroup, x as AvatarImage, xn as SelectValue, xr as Toolbar, xt as DropdownMenuItem, y as Avatar, yn as SelectSeparator, yr as Tone, yt as DropdownMenuContent, z as CodeBlockProps, zn as StatCard, zr as Logo, zt as HelpTextProps } from "./index-C6oItkj5.js";
-import { $ as StatusBar, A as createShellShouldRevalidate, B as SessionSidebarVariant, C as SandboxWorkbenchLayoutOptions, D as SandboxWorkbenchSessionProps, E as SandboxWorkbenchProps, F as SessionSidebarFilter, G as dispatchSessionCreated, H as SessionCreatedDetail, I as SessionSidebarGroupBy, J as RuntimePaneProps, K as useOptimisticSessionItems, L as SessionSidebarItem, M as formatRelativeAge, N as SessionSidebar, O as ShellShouldRevalidateArgs, P as SessionSidebarBadge, Q as ContextBadge, R as SessionSidebarLink, S as SandboxWorkbenchFileArtifact, T as SandboxWorkbenchOpenUIArtifact, U as SessionOptimisticController, V as SESSION_CREATED_EVENT, W as UseOptimisticSessionItemsOptions, X as TerminalPanel, Y as TerminalLine, Z as TerminalProps, _ as TaskBoardItem, a as WorkspaceFilesPane, at as DirectoryPaneProps, b as SandboxWorkbenchArtifact, c as ApprovalConfidenceStat, ct as WorkspaceLayout, d as ApprovalQueueProps, et as StatusBarProps, f as CalendarEvent, g as TaskBoardColumn, h as TaskBoard, i as WorkspaceArtifactViewProps, it as DirectoryPane, j as shellShouldRevalidate, k as ShellShouldRevalidateOptions, l as ApprovalItem, lt as WorkspaceLayoutProps, m as CalendarViewProps, n as ArtifactPaneProps, nt as StatusBanner, o as WorkspaceFilesPaneProps, ot as WorkspacePaneHeader, p as CalendarView, q as RuntimePane, r as WorkspaceArtifactView, rt as StatusBannerProps, s as WorkspaceFilesPreview, st as WorkspacePaneHeaderProps, t as ArtifactPane, tt as BannerType, u as ApprovalQueue, v as TaskBoardProps, w as SandboxWorkbenchMarkdownArtifact, x as SandboxWorkbenchCustomArtifact, y as SandboxWorkbench, z as SessionSidebarProps } from "./index-WKvzhZvh.js";
+import { $ as StatusBar, A as createShellShouldRevalidate, B as SessionSidebarVariant, C as SandboxWorkbenchLayoutOptions, D as SandboxWorkbenchSessionProps, E as SandboxWorkbenchProps, F as SessionSidebarFilter, G as dispatchSessionCreated, H as SessionCreatedDetail, I as SessionSidebarGroupBy, J as RuntimePaneProps, K as useOptimisticSessionItems, L as SessionSidebarItem, M as formatRelativeAge, N as SessionSidebar, O as ShellShouldRevalidateArgs, P as SessionSidebarBadge, Q as ContextBadge, R as SessionSidebarLink, S as SandboxWorkbenchFileArtifact, T as SandboxWorkbenchOpenUIArtifact, U as SessionOptimisticController, V as SESSION_CREATED_EVENT, W as UseOptimisticSessionItemsOptions, X as TerminalPanel, Y as TerminalLine, Z as TerminalProps, _ as TaskBoardItem, a as WorkspaceFilesPane, at as DirectoryPaneProps, b as SandboxWorkbenchArtifact, c as ApprovalConfidenceStat, ct as WorkspaceLayout, d as ApprovalQueueProps, et as StatusBarProps, f as CalendarEvent, g as TaskBoardColumn, h as TaskBoard, i as WorkspaceArtifactViewProps, it as DirectoryPane, j as shellShouldRevalidate, k as ShellShouldRevalidateOptions, l as ApprovalItem, lt as WorkspaceLayoutProps, m as CalendarViewProps, n as ArtifactPaneProps, nt as StatusBanner, o as WorkspaceFilesPaneProps, ot as WorkspacePaneHeader, p as CalendarView, q as RuntimePane, r as WorkspaceArtifactView, rt as StatusBannerProps, s as WorkspaceFilesPreview, st as WorkspacePaneHeaderProps, t as ArtifactPane, tt as BannerType, u as ApprovalQueue, v as TaskBoardProps, w as SandboxWorkbenchMarkdownArtifact, x as SandboxWorkbenchCustomArtifact, y as SandboxWorkbench, z as SessionSidebarProps } from "./index-B2nE9_FN.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-DNClXEEe.js";
 import { a as PreviewReadiness, i as PreviewAccess, n as EmbeddedAppView, r as EmbeddedAppViewProps, t as EmbeddedApp } from "./embedded-app-view-B_vMTtJn.js";
 import { OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISchemaIssue, OpenUISchemaValidation, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode, findUnsupportedOpenUINode, validateOpenUIJsonArtifact, validateOpenUIJsonNode } from "./openui.js";
 import { ExpandedToolDetail, ExpandedToolDetailProps, FeedSegment, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps, RunRowShell, RunRowShellProps, RunRowStatus, RunRowStatusDot, ToolCallData, ToolCallFeed, ToolCallFeedProps, ToolCallStatus, ToolCallType, parseToolEvent } from "./run.js";
-import { a as VaultTreeProps, i as VaultTree, n as filterFileNodes, r as VAULT_TREE_CHILD_PAGE, t as fileTreeFromPaths } from "./index-DPCnMr4b.js";
+import { a as VaultTreeProps, i as VaultTree, n as filterFileNodes, r as VAULT_TREE_CHILD_PAGE, t as fileTreeFromPaths } from "./index-DGil6iqm.js";
 import { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, ChatSession, RegisterActiveSessionOptions, SessionProjectKey, activeSessionsAtom, addMessage, addParts, bumpActiveSessionActivity, clearChat, connectSession, disconnectSession, getActiveSession, getAllActiveSessions, getAllProjectActivity, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getTotalRunningSessionCount, hasBackgroundRunningSessions, isStreamingAtom, messagesAtom, partMapAtom, registerActiveSession, resetActiveSessions, sessionAtom, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useHasBackgroundRunningSessions, useNavbarSessions, useProjectActivity, useProjectSessions, useSessionsByActivity, useTotalRunningSessions } from "./stores.js";
 import { AgentBranding, CustomToolRenderer, DisplayVariant, FinalTextPart, GroupedMessage, MessageRun, MessageUser, ReasoningPart, Run, RunStats, SessionMessage, SessionPart, TextPart, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime } from "./types.js";
 import { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText } from "./utils.js";

package/dist/index.js

@@ -1,8 +1,8 @@
 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-C2CzWiZU.js";
 import { $ as DialogDescription, $n as Logo, $t as Sheet, A as CodeBlock, An as Tag, At as Metric, B as ContextMenuPortal, Bn as Toolbar, Bt as Progress, C as CardContent, Cn as TableHead, Ct as FilterField, D as CardTitle, Dn as TabsContent, Dt as InlineCode, E as CardHeader, En as Tabs, Et as IconTile, F as ContextMenuCheckboxItem, Fn as TextShimmer, Ft as Popover, G as ContextMenuSub, Gn as UploadProgress, Gt as SelectItem, H as ContextMenuRadioItem, Hn as TooltipContent, Ht as Select, I as ContextMenuContent, In as Textarea, It as PopoverAnchor, J as ContextMenuTrigger, Jn as initialsOf, Jt as SelectScrollUpButton, K as ContextMenuSubContent, Kn as badgeVariants, Kt as SelectLabel, L as ContextMenuGroup, Ln as ThemeToggle, Lt as PopoverClose, M as CollapsibleContent, Mn as TerminalDisplay, Mt as PageHeader, N as CollapsibleTrigger, Nt as PageShell, O as Checkbox, On as TabsList, Ot as Input, P as ContextMenu, Pt as Pagination, Q as DialogContent, Qn as SectionTitle, Qt as Separator, R as ContextMenuItem, Rn as ToastContainer, Rt as PopoverContent, S as Card, Sn as TableFooter, St as EmptyState, T as CardFooter, Tn as TableRow, Tt as HelpText, U as ContextMenuSeparator, Un as TooltipProvider, Ut as SelectContent, V as ContextMenuRadioGroup, Vn as Tooltip, Vt as SegmentedControl, W as ContextMenuShortcut, Wn as TooltipTrigger, Wt as SelectGroup, X as Dialog, Xn as useTheme, Xt as SelectTrigger, Y as CopyButton, Yn as toneFor, Yt as SelectSeparator, Z as DialogClose, Zn as useToast, Zt as SelectValue, _ as AvatarFallback, _n as TONE_CLASSES, _t as DropdownMenuShortcut, a as AlertDialogCancel, an as SheetOverlay, at as DialogTrigger, b as Button, bn as TableCaption, bt as DropdownMenuSubTrigger, c as AlertDialogFooter, cn as SheetTrigger, ct as DropdownMenuCheckboxItem, d as AlertDialogPortal, dn as SkeletonCard, dt as DropdownMenuItem, en as SheetClose, er as TangleKnot, et as DialogFooter, f as AlertDialogTitle, fn as SkeletonTable, ft as DropdownMenuLabel, g as Avatar, gn as Switch, gt as DropdownMenuSeparator, hn as StatusPill, ht as DropdownMenuRadioItem, i as AlertDialogAction, in as SheetHeader, it as DialogTitle, j as Collapsible, jt as MetricStrip, k as Chip, kn as TabsTrigger, kt as Label, l as AlertDialogHeader, ln as SidebarDropZone, lt as DropdownMenuContent, m as AlertTitle, mn as StatCard, mt as DropdownMenuRadioGroup, n as AlertDescription, nn as SheetDescription, nt as DialogOverlay, o as AlertDialogContent, on as SheetPortal, ot as DropZone, p as AlertDialogTrigger, pn as Slider, pt as DropdownMenuPortal, q as ContextMenuSubTrigger, qn as buttonVariants, qt as SelectScrollDownButton, r as AlertDialog, rn as SheetFooter, rt as DialogPortal, s as AlertDialogDescription, sn as SheetTitle, st as DropdownMenu, t as Alert, tn as SheetContent, tt as DialogHeader, u as AlertDialogOverlay, un as Skeleton, ut as DropdownMenuGroup, v as AvatarImage, vn as Table, vt as DropdownMenuSub, w as CardDescription, wn as TableHeader, wt as Heading, x as CATEGORY_TONES, xn as TableCell, xt as DropdownMenuTrigger, y as Badge, yn as TableBody, yt as DropdownMenuSubContent, z as ContextMenuLabel, zn as ToastProvider, zt as PopoverTrigger } from "./primitives-JjV1ruzp.js";
 import { t as WorkspacePaneHeader } from "./workspace-pane-header-Bg1cCcHX.js";
-import { _ as StatusBar, a as TaskBoard, b as WorkspaceLayout, c as createShellShouldRevalidate, d as SESSION_CREATED_EVENT, f as dispatchSessionCreated, g as TerminalPanel, h as RuntimePane, i as CalendarView, l as shellShouldRevalidate, m as formatRelativeAge, n as WorkspaceFilesPane, o as SandboxWorkbench, p as useOptimisticSessionItems, r as ApprovalQueue, s as WorkspaceArtifactView, t as ArtifactPane, u as SessionSidebar, v as StatusBanner, y as DirectoryPane } from "./workspace-BLFYJ6gc.js";
-import { i as VaultTree, n as filterFileNodes, r as VAULT_TREE_CHILD_PAGE, t as fileTreeFromPaths } from "./tree-data-CmysecQF.js";
+import { _ as StatusBar, a as TaskBoard, b as WorkspaceLayout, c as createShellShouldRevalidate, d as SESSION_CREATED_EVENT, f as dispatchSessionCreated, g as TerminalPanel, h as RuntimePane, i as CalendarView, l as shellShouldRevalidate, m as formatRelativeAge, n as WorkspaceFilesPane, o as SandboxWorkbench, p as useOptimisticSessionItems, r as ApprovalQueue, s as WorkspaceArtifactView, t as ArtifactPane, u as SessionSidebar, v as StatusBanner, y as DirectoryPane } from "./workspace-DRz3SoJc.js";
+import { i as VaultTree, n as filterFileNodes, r as VAULT_TREE_CHILD_PAGE, t as fileTreeFromPaths } from "./tree-data-DtoCNNBJ.js";
 import { $ as useSidebar, A as parseInsufficientBalance, B as SidebarPanel, C as SandboxStatusPill, D as ResourceMeter, E as ResourceSnapshot, F as RailHeader, G as SidebarRailNav, H as SidebarPanelHeader, I as RailModeButton, J as SIDEBAR_PANEL_WIDTH, K as RailTooltip, L as RailSeparator, M as RailButton, N as RailExpandable, O as INSUFFICIENT_BALANCE_CODE, P as RailFlyout, Q as SidebarProvider, R as Sidebar, S as SANDBOX_STATUS, T as ActivityFeed, U as SidebarRail, V as SidebarPanelContent, W as SidebarRailFooter, X as SIDEBAR_RAIL_WIDTH, Y as SIDEBAR_RAIL_LABELED_WIDTH, Z as SIDEBAR_TOTAL_WIDTH, _ as BackendSelector, a as PortsList, b as SandboxCard, c as SystemLogsViewer, d as DashboardLayout, f as HARNESS_OPTIONS, g as HarnessLogo, h as HARNESS_BRAND, i as TemplateCard, j as ProfileAvatar, k as OutOfCreditsModal, l as MetricAreaChart, m as chatCapableHarnesses, n as SnapshotList, o as GitPanel, p as HarnessPicker, q as SIDEBAR_MOBILE_WIDTH, r as ProcessList, s as UsageSummary, t as PromoBanner, u as SidebarLayout, v as SandboxTable, w as sandboxStatus, x as canAdminSandbox, y as NewSandboxCard, z as SidebarContent } from "./dashboard-BW-rPRwj.js";
 import { n as canonicalModelId, r as modelBrandFor, t as ModelBrandStack } from "./model-brand-hMyDTUqB.js";
 import { a as formatPrice, i as PricingPage, n as SandboxPageShell, o as BillingDashboard, r as UsageChart, t as DashboardPageHeader } from "./page-layout-2IRtfx51.js";

package/dist/styles.css

@@ -435,6 +435,12 @@
   .z-50 {
     z-index: 50;
   }
+  .z-\[1\] {
+    z-index: 1;
+  }
+  .z-\[2\] {
+    z-index: 2;
+  }
   .z-\[70\] {
     z-index: 70;
   }
@@ -736,6 +742,10 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-7 {
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+  }
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
@@ -1680,6 +1690,10 @@
     --tw-translate-x: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-px {
+    --tw-translate-x: 1px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2659,6 +2673,12 @@
       background-color: color-mix(in oklab, hsl(var(--background)) 80%, transparent);
     }
   }
+  .bg-background\/90 {
+    background-color: hsl(var(--background));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--background)) 90%, transparent);
+    }
+  }
   .bg-black {
     background-color: var(--color-black);
   }
@@ -2674,6 +2694,18 @@
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
   }
+  .bg-black\/60 {
+    background-color: color-mix(in srgb, #000 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
+    }
+  }
+  .bg-black\/70 {
+    background-color: color-mix(in srgb, #000 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
+    }
+  }
   .bg-black\/80 {
     background-color: color-mix(in srgb, #000 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4193,6 +4225,9 @@
   .ring-inset {
     --tw-ring-inset: inset;
   }
+  .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
+    opacity: 100%;
+  }
   @media (hover: hover) {
     .group-hover\:block:is(:where(.group):hover *) {
       display: block;
@@ -4367,14 +4402,6 @@
         border-color: color-mix(in oklab, hsl(var(--accent)) 50%, transparent);
       }
     }
-    .hover\:border-border\/80:hover {
-      border-color: hsl(var(--border));
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:border-border\/80:hover {
-        border-color: color-mix(in oklab, hsl(var(--border)) 80%, transparent);
-      }
-    }
     .hover\:border-destructive\/30:hover {
       border-color: hsl(var(--destructive));
     }
@@ -4434,6 +4461,14 @@
         border-color: color-mix(in oklab, hsl(var(--primary)) 50%, transparent);
       }
     }
+    .hover\:border-primary\/60:hover {
+      border-color: hsl(var(--primary));
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:border-primary\/60:hover {
+        border-color: color-mix(in oklab, hsl(var(--primary)) 60%, transparent);
+      }
+    }
     .hover\:\!bg-primary:hover {
       background-color: hsl(var(--primary)) !important;
     }
@@ -4738,6 +4773,10 @@
     .hover\:opacity-100:hover {
       opacity: 100%;
     }
+    .hover\:shadow-md:hover {
+      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
     .hover\:shadow-sm:hover {
       --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

package/dist/{tree-data-CmysecQF.js → tree-data-DtoCNNBJ.js}

@@ -90,7 +90,7 @@ function fileIcon(name) {
 	const dot = name.lastIndexOf(".");
 	return dot > 0 && FILE_ICONS[name.slice(dot + 1).toLowerCase()] || File;
 }
-function VaultTree({ root, selectedPath, activeFolder, onSelect, onFolderToggle, storageKey, expandAll = false, label = "Files", className }) {
+function VaultTree({ root, selectedPath, activeFolder, onSelect, onFolderToggle, onFolderSelect, storageKey, expandAll = false, label = "Files", className }) {
 	const [expansion, setExpansion] = useState(() => ({
 		key: storageKey,
 		expanded: readExpanded(storageKey)
@@ -221,11 +221,14 @@ function VaultTree({ root, selectedPath, activeFolder, onSelect, onFolderToggle,
 	}, []);
 	const activate = useCallback((node) => {
 		setFocusedPath(node.path);
-		if (node.type === "directory") setFolderOpen(node.path, !isOpen(node.path));
-		else onSelect(node.path);
+		if (node.type === "directory") {
+			setFolderOpen(node.path, !isOpen(node.path));
+			onFolderSelect?.(node.path);
+		} else onSelect(node.path);
 	}, [
 		isOpen,
 		onSelect,
+		onFolderSelect,
 		setFolderOpen
 	]);
 	const onKeyDown = useCallback((event, node) => {

package/dist/vault-tree.d.ts

@@ -1,2 +1,2 @@
-import { a as VaultTreeProps, i as VaultTree, n as filterFileNodes, r as VAULT_TREE_CHILD_PAGE, t as fileTreeFromPaths } from "./index-DPCnMr4b.js";
+import { a as VaultTreeProps, i as VaultTree, n as filterFileNodes, r as VAULT_TREE_CHILD_PAGE, t as fileTreeFromPaths } from "./index-DGil6iqm.js";
 export { VAULT_TREE_CHILD_PAGE, VaultTree, type VaultTreeProps, fileTreeFromPaths, filterFileNodes };

package/dist/vault-tree.js

@@ -1,2 +1,2 @@
-import { i as VaultTree, n as filterFileNodes, r as VAULT_TREE_CHILD_PAGE, t as fileTreeFromPaths } from "./tree-data-CmysecQF.js";
+import { i as VaultTree, n as filterFileNodes, r as VAULT_TREE_CHILD_PAGE, t as fileTreeFromPaths } from "./tree-data-DtoCNNBJ.js";
 export { VAULT_TREE_CHILD_PAGE, VaultTree, fileTreeFromPaths, filterFileNodes };

package/dist/{workspace-BLFYJ6gc.js → workspace-DRz3SoJc.js}

@@ -1,7 +1,7 @@
 import { t as cn$1 } from "./utils-DzWbktWG.js";
 import { t as WorkspacePaneHeader } from "./workspace-pane-header-Bg1cCcHX.js";
 import { t as MOTION_CONTROL } from "./motion-DkyBRJb9.js";
-import { i as VaultTree, n as filterFileNodes, t as fileTreeFromPaths } from "./tree-data-CmysecQF.js";
+import { i as VaultTree, n as filterFileNodes, t as fileTreeFromPaths } from "./tree-data-DtoCNNBJ.js";
 import { ArtifactPane, ArtifactPane as ArtifactPane$1, EmptyState, Input } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Markdown } from "@tangle-network/ui/markdown";
@@ -2532,6 +2532,7 @@ function WorkspaceFilesPane({ root, paths, selectedPath, onSelect, preview, onBa
 								if (treeRef.current) returnFocusRef.current = activeElementWithin(treeRef.current);
 								onSelect?.(path, index.get(path));
 							},
+							onFolderSelect: (path) => onSelect?.(`${path}/`, index.get(path)),
 							storageKey: expansionKey,
 							expandAll: query.trim().length > 0,
 							label

package/dist/workspace.d.ts

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

package/package.json

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