@tangle-network/sandbox-ui 2.0.17 → 2.0.18

package/dist/{workspace-CJnBqCqj.js → workspace-CzikYt_y.js}

@@ -1,16 +1,16 @@
 import { t as cn$1 } from "./utils-BER_bdgE.js";
 import { r as ShellHeader } from "./shell-header-CwqDzC4I.js";
 import { t as MOTION_CONTROL } from "./motion-2Ine0j_s.js";
-import { i as VaultTree, n as filterFileNodes, t as fileTreeFromPaths } from "./tree-data-C8CNt4WE.js";
-import { ArtifactPane, ArtifactPane as ArtifactPane$1, Button, EmptyState, Input, SegmentedControl, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@tangle-network/ui/primitives";
+import "./workspace-files-pane-DB9Nvwh4.js";
+import { ArtifactPane, ArtifactPane as ArtifactPane$1, EmptyState, Input, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Markdown } from "@tangle-network/ui/markdown";
 import { useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { AlertCircle, AlertTriangle, ArrowLeft, Binary, Bot, Boxes, CheckCircle, ChevronDown, ChevronUp, FileCode2, FileText, FolderOpen, FolderTree, LayoutPanelTop, Loader2, Maximize2, MessageSquareText, Minimize2, PanelBottomClose, PanelBottomOpen, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Plus, RefreshCw, Search, Settings, ShieldCheck, Sparkles, Terminal, TerminalSquare, Upload, Wifi, X, Zap } from "lucide-react";
+import { AlertCircle, AlertTriangle, ArrowLeft, Binary, Bot, Boxes, CheckCircle, ChevronDown, ChevronUp, FileCode2, FileText, FolderTree, LayoutPanelTop, Loader2, MessageSquareText, PanelBottomClose, PanelBottomOpen, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Plus, RefreshCw, Search, Settings, ShieldCheck, Sparkles, Terminal, TerminalSquare, Upload, Wifi, X, Zap } from "lucide-react";
 import { focusField, focusRing, focusRingInset } from "@tangle-network/ui/utils";
-import { FileArtifactPane, FileTabs, FileTree, filterFileTree } from "@tangle-network/ui/files";
+import { FileArtifactPane, FileTree, filterFileTree } from "@tangle-network/ui/files";
 import { useNavbarSessions } from "@tangle-network/ui/stores";
 import { ChatContainer } from "@tangle-network/ui/chat";
 import { OpenUIArtifactRenderer } from "@tangle-network/ui/openui";
@@ -2503,363 +2503,4 @@ function ApprovalQueue({ items, className, onApprove, onReject, renderItemDetail
 		})
 	});
 }
-// src/workspace/workspace-files-pane.tsx
-const SPLIT_MIN_PX = 640;
-const SIDEBAR_DEFAULT_PX = 280;
-const SIDEBAR_MIN_PX = 200;
-/** The sidebar's width, clamped to 200 px .. half the pane, remembered per viewer under `expansionKey` when given. */
-function useSidebarWidth(key, containerWidth) {
-	const storageKey = key ? `${key}:sidebar-width` : void 0;
-	const [stored, setStored] = useState(() => {
-		if (!storageKey) return SIDEBAR_DEFAULT_PX;
-		try {
-			const value = Number(globalThis.localStorage?.getItem(storageKey));
-			return Number.isFinite(value) && value > 0 ? value : SIDEBAR_DEFAULT_PX;
-		} catch {
-			return SIDEBAR_DEFAULT_PX;
-		}
-	});
-	const max = Math.max(SIDEBAR_MIN_PX, containerWidth > 0 ? Math.floor(containerWidth / 2) : 560);
-	const width = Math.min(max, Math.max(SIDEBAR_MIN_PX, stored));
-	const save = (px) => {
-		const next = Math.min(max, Math.max(SIDEBAR_MIN_PX, Math.round(px)));
-		setStored(next);
-		if (storageKey) try {
-			globalThis.localStorage?.setItem(storageKey, String(next));
-		} catch {}
-	};
-	return {
-		width,
-		min: SIDEBAR_MIN_PX,
-		max,
-		set: save,
-		reset: () => save(SIDEBAR_DEFAULT_PX)
-	};
-}
-/**
-* The tree's and the open file's header rows: one height and one chrome plane (the page, a step under the card), so
-* they read as one strip with one baseline. Fields in it take the card plane, as the active tab does.
-*/
-const HEADER_ROW = "flex h-11 shrink-0 pointer-coarse:h-14 items-center bg-background shadow-[inset_0_-1px_0_hsl(var(--border))] [--field-surface:hsl(var(--card))]";
-/**
-* A 1px line below the header row with a 9px invisible hit area. Its negative margin cancels its width, so the header row stays one strip.
-* Drag, arrow keys (Shift for larger steps), Home/End, or double-click to reset the sidebar width.
-*/
-function SidebarResizer({ sidebar, label }) {
-	return /* @__PURE__ */ jsxs("div", {
-		role: "separator",
-		"aria-orientation": "vertical",
-		"aria-label": `Resize ${label.toLowerCase()} sidebar`,
-		"aria-valuenow": sidebar.width,
-		"aria-valuemin": sidebar.min,
-		"aria-valuemax": sidebar.max,
-		tabIndex: 0,
-		onDoubleClick: sidebar.reset,
-		onKeyDown: (event) => {
-			const step = event.shiftKey ? 64 : 16;
-			if (event.key === "ArrowLeft") sidebar.set(sidebar.width - step);
-			else if (event.key === "ArrowRight") sidebar.set(sidebar.width + step);
-			else if (event.key === "Home") sidebar.set(sidebar.min);
-			else if (event.key === "End") sidebar.set(sidebar.max);
-			else return;
-			event.preventDefault();
-		},
-		onPointerDown: (event) => {
-			const handle = event.currentTarget;
-			const startX = event.clientX;
-			const startWidth = sidebar.width;
-			handle.setPointerCapture(event.pointerId);
-			const move = (next) => sidebar.set(startWidth + next.clientX - startX);
-			const up = () => {
-				handle.removeEventListener("pointermove", move);
-				handle.removeEventListener("pointerup", up);
-			};
-			handle.addEventListener("pointermove", move);
-			handle.addEventListener("pointerup", up);
-		},
-		className: "group relative z-10 -mr-px w-px shrink-0 cursor-col-resize touch-none outline-none",
-		children: [/* @__PURE__ */ jsx("span", {
-			"aria-hidden": true,
-			className: "absolute bottom-0 left-0 top-11 w-px pointer-coarse:top-14 bg-border transition-colors group-hover:bg-ring group-focus-visible:bg-ring"
-		}), /* @__PURE__ */ jsx("span", {
-			"aria-hidden": true,
-			className: "absolute bottom-0 -left-1 top-11 w-[9px] pointer-coarse:top-14"
-		})]
-	});
-}
-function indexNodes(nodes) {
-	const index = /* @__PURE__ */ new Map();
-	const visit = (node) => {
-		index.set(node.path, node);
-		node.children?.forEach(visit);
-	};
-	nodes.forEach(visit);
-	return index;
-}
-function activeElementWithin(element) {
-	let active = element.ownerDocument.activeElement;
-	if (!element.contains(active)) return null;
-	while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
-	return active instanceof HTMLElement ? active : null;
-}
-/**
-* Compact file navigation shared by workspace companions and standalone panes.
-* One card holds the tree and the open file. Both columns start with a header
-* row of one height on the chrome plane, so the search field and the open-file
-* tabs share one baseline; every inset reads `--files-inset`. Folders start
-* collapsed, expansion is remembered under `expansionKey`, and in the stacked
-* layout a preview replaces the tree until Back.
-*/
-function WorkspaceFilesPane({ root, paths, selectedPath, onSelect, preview, onBack, emptyState, expansionKey, search = true, label = "Files", headerActions, surface = "card", layout = "split", tabs = true, expandable = true, status, className, style }) {
-	const plain = surface === "plain";
-	const rootRef = useRef(null);
-	const [containerWidth, setContainerWidth] = useState(0);
-	useEffect(() => {
-		const element = rootRef.current;
-		if (!element || typeof ResizeObserver === "undefined") return;
-		const observer = new ResizeObserver(([entry]) => setContainerWidth(entry.contentRect.width));
-		observer.observe(element);
-		return () => observer.disconnect();
-	}, []);
-	const split = layout === "split" && (containerWidth === 0 || containerWidth >= SPLIT_MIN_PX);
-	const sidebar = useSidebarWidth(expansionKey, containerWidth);
-	const [expanded, setExpanded] = useState(false);
-	useEffect(() => {
-		if (!expanded) return;
-		const keydown = (event) => {
-			if (event.key !== "Escape" || event.defaultPrevented) return;
-			event.preventDefault();
-			setExpanded(false);
-		};
-		document.addEventListener("keydown", keydown);
-		return () => document.removeEventListener("keydown", keydown);
-	}, [expanded]);
-	const nodes = useMemo(() => root ? root.path ? [root] : root.children ?? [] : fileTreeFromPaths(paths ?? []), [root, paths]);
-	const index = useMemo(() => indexNodes(nodes), [nodes]);
-	const [query, setQuery] = useState("");
-	const visible = useMemo(() => filterFileNodes(nodes, query), [nodes, query]);
-	const treeRoot = useMemo(() => ({
-		name: label,
-		path: "",
-		type: "directory",
-		children: visible
-	}), [label, visible]);
-	const headingId = useId();
-	const treeRef = useRef(null);
-	const backRef = useRef(null);
-	const returnFocusRef = useRef(null);
-	const wasPreviewRef = useRef(false);
-	const hasPreview = preview !== void 0;
-	const isEmpty = nodes.length === 0;
-	const searchable = search && !isEmpty;
-	const normalizedSelection = selectedPath?.replace(/^(\.\/|\/)+/, "").replace(/\/+$/, "");
-	const mountedRef = useRef(false);
-	const openedByReaderRef = useRef(false);
-	useEffect(() => {
-		if (!mountedRef.current) {
-			mountedRef.current = true;
-			wasPreviewRef.current = hasPreview;
-			return;
-		}
-		if (split) {
-			wasPreviewRef.current = hasPreview;
-			return;
-		}
-		if (hasPreview && !wasPreviewRef.current && openedByReaderRef.current) backRef.current?.focus({ preventScroll: true });
-		openedByReaderRef.current = false;
-		if (!hasPreview && wasPreviewRef.current) {
-			const target = returnFocusRef.current;
-			if (target?.isConnected) target.focus({ preventScroll: true });
-			else treeRef.current?.focus({ preventScroll: true });
-		}
-		wasPreviewRef.current = hasPreview;
-	}, [hasPreview, split]);
-	return /* @__PURE__ */ jsxs("div", {
-		ref: rootRef,
-		"data-workspace-files-layout": split ? "split" : "stack",
-		"data-expanded": expanded ? "" : void 0,
-		className: cn$1("flex h-full min-h-0 min-w-0 overflow-hidden bg-card text-card-foreground [--files-inset:0.75rem]", split ? "flex-row" : "flex-col", !plain && "rounded-[var(--radius-lg)] border border-border shadow-[var(--edge-highlight),var(--shadow-card)]", className, expanded && "fixed inset-0 z-50 h-auto max-h-none w-auto max-w-none rounded-none border-0"),
-		style: expanded ? void 0 : style,
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				ref: treeRef,
-				hidden: !split && hasPreview,
-				tabIndex: -1,
-				role: "region",
-				"aria-label": "Workspace files",
-				style: split ? { width: sidebar.width } : void 0,
-				className: cn$1("flex min-h-0 flex-col outline-none", split ? "shrink-0" : "flex-1", !split && hasPreview && "hidden"),
-				children: /* @__PURE__ */ jsxs("section", {
-					"aria-labelledby": headingId,
-					"data-workspace-files-surface": surface,
-					className: "flex min-h-0 flex-1 flex-col",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: cn$1(HEADER_ROW, "gap-2 px-[var(--files-inset)]"),
-						children: [
-							/* @__PURE__ */ jsx("h2", {
-								id: headingId,
-								className: cn$1("min-w-0 flex-1 truncate text-sm font-medium text-foreground", (plain || searchable) && "sr-only"),
-								children: label
-							}),
-							searchable && /* @__PURE__ */ jsx(Input, {
-								type: "search",
-								size: "sm",
-								value: query,
-								onChange: (event) => setQuery(event.target.value),
-								placeholder: `Search ${label.toLowerCase()}…`,
-								"aria-label": `Search ${label.toLowerCase()}`,
-								className: "min-w-0 flex-1"
-							}),
-							headerActions && /* @__PURE__ */ jsx("div", {
-								className: "ml-auto flex shrink-0 items-center gap-1",
-								children: headerActions
-							})
-						]
-					}), /* @__PURE__ */ jsx("div", {
-						className: "min-h-0 flex-1 overflow-y-auto px-[calc(var(--files-inset)_-_0.25rem)] py-2",
-						children: isEmpty ? emptyState !== void 0 ? emptyState : /* @__PURE__ */ jsx(EmptyState, {
-							icon: /* @__PURE__ */ jsx(FolderOpen, { className: "h-6 w-6" }),
-							title: "No files yet"
-						}) : visible.length === 0 ? /* @__PURE__ */ jsxs("div", {
-							className: "flex flex-col items-center gap-3 p-6 text-center",
-							children: [/* @__PURE__ */ jsxs("p", {
-								className: "max-w-xs break-words text-xs text-muted-foreground",
-								children: [
-									"No files match “",
-									query.trim(),
-									"”."
-								]
-							}), /* @__PURE__ */ jsx(Button, {
-								type: "button",
-								variant: "outline",
-								size: "sm",
-								onClick: () => setQuery(""),
-								children: "Clear search"
-							})]
-						}) : /* @__PURE__ */ jsx(VaultTree, {
-							root: treeRoot,
-							selectedPath: normalizedSelection,
-							onSelect: (path) => {
-								if (treeRef.current) returnFocusRef.current = activeElementWithin(treeRef.current);
-								openedByReaderRef.current = true;
-								onSelect?.(path, index.get(path));
-							},
-							onFolderSelect: (path) => onSelect?.(`${path}/`, index.get(path)),
-							storageKey: expansionKey,
-							expandAll: query.trim().length > 0,
-							label,
-							status
-						})
-					})]
-				})
-			}),
-			split && /* @__PURE__ */ jsx(SidebarResizer, {
-				sidebar,
-				label
-			}),
-			(split || preview) && /* @__PURE__ */ jsx(FilesViewer, {
-				preview,
-				split,
-				tabs: split && tabs,
-				empty: isEmpty,
-				backRef,
-				onBack,
-				onOpen: (path) => onSelect?.(path, index.get(path)),
-				expand: expandable ? {
-					expanded,
-					toggle: () => setExpanded((value) => !value)
-				} : void 0
-			})
-		]
-	});
-}
-const baseName = (path) => path.replace(/\/+$/, "").split("/").pop() || path;
-/** The editor side of the pane: open-file tabs, a File | Diff toggle, the full-screen control, and the open file. */
-function FilesViewer({ preview, split, tabs, empty, backRef, onBack, onOpen, expand }) {
-	const path = preview?.path;
-	const [open, setOpen] = useState(() => path ? [path] : []);
-	useEffect(() => {
-		if (path) setOpen((paths) => paths.includes(path) ? paths : [...paths, path]);
-	}, [path]);
-	const [mode, setMode] = useState("file");
-	useEffect(() => setMode("file"), [path]);
-	const close = (target) => {
-		const at = open.indexOf(target);
-		const rest = open.filter((entry) => entry !== target);
-		setOpen(rest);
-		if (target !== path) return;
-		const neighbour = rest[Math.min(at, rest.length - 1)];
-		if (neighbour) onOpen(neighbour);
-		else onBack?.();
-	};
-	const compare = preview?.compare;
-	const ExpandIcon = expand?.expanded ? Minimize2 : Maximize2;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-h-0 min-w-0 flex-1 flex-col",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn$1(HEADER_ROW, "sticky top-0 z-10 gap-2 pr-[var(--files-inset)]", !(tabs && open.length > 0) && "pl-[var(--files-inset)]", !split && "h-auto min-h-11 flex-wrap py-1.5 pointer-coarse:h-auto"),
-			children: [
-				onBack && !split && preview && /* @__PURE__ */ jsxs(Button, {
-					ref: backRef,
-					type: "button",
-					variant: "ghost",
-					size: "sm",
-					onClick: onBack,
-					className: "-ml-2 shrink-0 gap-1 px-2 text-muted-foreground",
-					children: [/* @__PURE__ */ jsx(ArrowLeft, { "aria-hidden": "true" }), "Back to files"]
-				}),
-				tabs && open.length > 0 ? /* @__PURE__ */ jsx(FileTabs, {
-					tabs: open.map((entry) => ({
-						id: entry,
-						name: baseName(entry),
-						path: entry
-					})),
-					activeId: path,
-					onSelect: onOpen,
-					onClose: close,
-					className: "h-full flex-1 px-[var(--files-inset)]"
-				}) : /* @__PURE__ */ jsx("span", {
-					className: "min-w-0 flex-1 truncate text-sm text-foreground",
-					title: path,
-					children: path && baseName(path)
-				}),
-				compare && /* @__PURE__ */ jsx(SegmentedControl, {
-					"aria-label": "View",
-					value: mode,
-					onValueChange: setMode,
-					options: [{
-						value: "file",
-						label: "File"
-					}, {
-						value: "diff",
-						label: `Diff vs ${compare.label}`
-					}],
-					className: cn$1("shrink-0 p-0.5 [&>button]:py-1", !split && "order-last")
-				}),
-				preview?.actions && /* @__PURE__ */ jsx("div", {
-					className: "flex shrink-0 items-center gap-2",
-					children: preview.actions
-				}),
-				expand && /* @__PURE__ */ jsx(Button, {
-					type: "button",
-					variant: "ghost",
-					size: "icon-sm",
-					onClick: expand.toggle,
-					"aria-pressed": expand.expanded,
-					"aria-label": expand.expanded ? "Exit full screen" : "Full screen",
-					title: expand.expanded ? "Exit full screen (Esc)" : "Full screen",
-					className: "shrink-0 text-muted-foreground",
-					children: /* @__PURE__ */ jsx(ExpandIcon, { "aria-hidden": true })
-				})
-			]
-		}), preview ? /* @__PURE__ */ jsx("div", {
-			"data-primary-content": "",
-			className: "flex min-h-0 flex-1 flex-col overflow-auto [&>*]:min-h-full",
-			children: mode === "diff" && compare ? compare.content : preview.content
-		}) : /* @__PURE__ */ jsx("div", {
-			className: "flex min-h-0 min-w-0 flex-1 items-center justify-center p-6 text-sm text-muted-foreground",
-			children: empty ? null : "Select a file to open it here."
-		})]
-	});
-}
-export { WorkspaceSurfaceTitle as C, WorkspaceSurfaceFrame as S, StatusBar as _, TaskBoard as a, WorkspaceLayout as b, createShellShouldRevalidate as c, SESSION_CREATED_EVENT as d, dispatchSessionCreated as f, TerminalPanel as g, RuntimePane as h, CalendarView as i, shellShouldRevalidate as l, formatRelativeAge as m, WorkspaceFilesPane as n, SandboxWorkbench as o, useOptimisticSessionItems as p, ApprovalQueue as r, WorkspaceArtifactView as s, ArtifactPane$1 as t, SessionSidebar as u, StatusBanner as v, WorkspaceSurface as x, DirectoryPane as y };
+export { WorkspaceSurfaceTitle as S, StatusBanner as _, SandboxWorkbench as a, WorkspaceSurface as b, shellShouldRevalidate as c, dispatchSessionCreated as d, useOptimisticSessionItems as f, StatusBar as g, TerminalPanel as h, TaskBoard as i, SessionSidebar as l, RuntimePane as m, ApprovalQueue as n, WorkspaceArtifactView as o, formatRelativeAge as p, CalendarView as r, createShellShouldRevalidate as s, ArtifactPane$1 as t, SESSION_CREATED_EVENT as u, DirectoryPane as v, WorkspaceSurfaceFrame as x, WorkspaceLayout as y };