@tangle-network/sandbox-ui 2.0.17 → 2.0.18

package/dist/workspace-files-pane-DB9Nvwh4.js

@@ -0,0 +1,367 @@
+import { t as cn } from "./utils-BER_bdgE.js";
+import { i as VaultTree, n as filterFileNodes, t as fileTreeFromPaths } from "./tree-data-C8CNt4WE.js";
+import { Button, EmptyState, Input, SegmentedControl } from "@tangle-network/ui/primitives";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { ArrowLeft, FolderOpen, Maximize2, Minimize2 } from "lucide-react";
+import { FileTabs } from "@tangle-network/ui/files";
+// 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("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("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(HEADER_ROW, "gap-2 px-[var(--files-inset)]"),
+						children: [
+							/* @__PURE__ */ jsx("h2", {
+								id: headingId,
+								className: cn("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(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("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 { WorkspaceFilesPane as t };