@tangle-network/sandbox-ui 2.0.20 → 2.0.21

package/dist/{tree-data-C8CNt4WE.js → tree-data-B_IXAIgg.js}

@@ -1,4 +1,5 @@
 import { t as revealInScroller } from "./reveal-in-scroller-CzKwuqCG.js";
+import { t as VirtualList } from "./VirtualList-DLh2JE0F.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { BookOpen, Braces, ChevronRight, File, FileCode, FileCog, FileImage, FileLock, FileSpreadsheet, FileTerminal, FileText, Folder, FolderOpen, GitBranch, Package, Scale } from "lucide-react";
@@ -10,8 +11,8 @@ import { BookOpen, Braces, ChevronRight, File, FileCode, FileCog, FileImage, Fil
 * trees given the same key share one remembered expansion.
 *
 * Rendering is lazy: only the children of expanded folders are walked or
-* mounted, and a folder with more than `CHILD_PAGE` children renders them a page
-* at a time, so a vault with thousands of files costs only what is on screen.
+* mounted; folders retain their child paging, and collections over 100 visible
+* rows use the shared viewport list. Keyboard navigation reveals offscreen rows.
 *
 * The tree follows the WAI-ARIA tree pattern with a single tab stop: arrow keys
 * move between rows, Right/Left expand, collapse or move to a child or parent,
@@ -294,7 +295,10 @@ function VaultTree({ root, selectedPath, activeFolder, onSelect, onFolderToggle,
 	const [focusedPath, setFocusedPath] = useState(null);
 	const rowRefs = useRef(/* @__PURE__ */ new Map());
 	const pendingFocusRef = useRef(null);
-	const pendingRevealRef = useRef(null);
+	const treeRef = useRef(null), scroller = useRef(null);
+	const [target, setTarget] = useState();
+	const previousPaths = useRef(null);
+	const revealed = useRef(void 0);
 	const index = useMemo(() => {
 		const nodes = /* @__PURE__ */ new Map();
 		const parents = /* @__PURE__ */ new Map();
@@ -376,35 +380,48 @@ function VaultTree({ root, selectedPath, activeFolder, onSelect, onFolderToggle,
 		onFolderToggle
 	]);
 	useEffect(() => {
-		if (!selectedPath || !index.nodes.has(selectedPath)) return;
+		if (!selectedPath || !index.nodes.has(selectedPath)) {
+			revealed.current = void 0;
+			return;
+		}
+		if (revealed.current?.path === selectedPath && revealed.current.scope === storageKey) return;
+		revealed.current = {
+			scope: storageKey,
+			path: selectedPath
+		};
 		const ancestors = [];
 		for (let parent = index.parents.get(selectedPath) ?? null; parent; parent = index.parents.get(parent) ?? null) ancestors.push(parent);
-		pendingRevealRef.current = selectedPath;
+		setTarget(selectedPath);
+		setPageLimits((current) => {
+			const next = new Map(current);
+			for (const path of [selectedPath, ...ancestors]) {
+				const parent = index.parents.get(path) ?? null;
+				if (parent) next.set(parent, Math.max(next.get(parent) ?? 200, (index.children.get(parent)?.findIndex((n) => n.path === path) ?? -1) + 1));
+			}
+			return next;
+		});
 		if (ancestors.some((path) => !expandedPaths.has(path))) updateExpanded((next) => {
 			for (const path of ancestors) next.add(path);
 		});
-	}, [selectedPath, index]);
-	useEffect(() => {
-		const reveal = pendingRevealRef.current;
-		if (reveal && rowRefs.current.has(reveal)) {
-			pendingRevealRef.current = null;
-			const row = rowRefs.current.get(reveal);
-			if (row) revealInScroller(row);
-		}
-		const focus = pendingFocusRef.current;
-		if (focus && rowRefs.current.has(focus)) {
-			pendingFocusRef.current = null;
-			rowRefs.current.get(focus)?.focus();
-		}
-	}, [rows]);
+	}, [
+		selectedPath,
+		index,
+		storageKey
+	]);
 	const visiblePaths = useMemo(() => new Set(nodeRows.map((row) => row.node.path)), [nodeRows]);
 	const tabStop = focusedPath && visiblePaths.has(focusedPath) && focusedPath || selectedPath && visiblePaths.has(selectedPath) && selectedPath || nodeRows[0]?.node.path || null;
 	const focusRow = useCallback((path) => {
 		if (!path) return;
 		setFocusedPath(path);
 		const element = rowRefs.current.get(path);
-		if (element) element.focus();
-		else pendingFocusRef.current = path;
+		if (element) {
+			setTarget(void 0);
+			element.focus({ preventScroll: true });
+			revealInScroller(element);
+		} else {
+			pendingFocusRef.current = path;
+			setTarget(path);
+		}
 	}, []);
 	const activate = useCallback((node) => {
 		setFocusedPath(node.path);
@@ -424,19 +441,14 @@ function VaultTree({ root, selectedPath, activeFolder, onSelect, onFolderToggle,
 		const dir = node.type === "directory";
 		const open = dir && isOpen(node.path);
 		let handled = true;
-		switch (event.key) {
-			case "ArrowDown":
-				focusRow(nodeRows[at + 1]?.node.path);
-				break;
-			case "ArrowUp":
-				focusRow(nodeRows[at - 1]?.node.path);
-				break;
-			case "Home":
-				focusRow(nodeRows[0]?.node.path);
-				break;
-			case "End":
-				focusRow(nodeRows[nodeRows.length - 1]?.node.path);
-				break;
+		const moves = {
+			ArrowDown: nodeRows[at + 1]?.node.path,
+			ArrowUp: nodeRows[at - 1]?.node.path,
+			Home: nodeRows[0]?.node.path,
+			End: nodeRows[nodeRows.length - 1]?.node.path
+		};
+		if (event.key in moves) focusRow(moves[event.key]);
+		else switch (event.key) {
 			case "ArrowRight":
 				if (dir && !open) setFolderOpen(node.path, true);
 				else if (open) {
@@ -480,97 +492,135 @@ function VaultTree({ root, selectedPath, activeFolder, onSelect, onFolderToggle,
 		return out;
 	}, [status]);
 	const openParent = selectedPath ? index.parents.get(selectedPath) ?? null : null;
-	return /* @__PURE__ */ jsx("div", {
-		role: "tree",
-		"aria-label": label,
-		"data-vault-tree-rows": true,
-		className: `flex flex-col gap-px ${className ?? ""}`,
-		children: rows.map((row) => {
-			if (row.kind === "more") return /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				onClick: () => setPageLimits((current) => {
+	useEffect(() => {
+		previousPaths.current = new Set(index.nodes.keys());
+	}, [index]);
+	const keyOf = (row) => row.kind === "node" ? row.node.path : `more:${row.parent}`;
+	const render = (row) => {
+		if (row.kind === "more") return /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => {
+				focusRow(index.children.get(row.parent)?.[(index.children.get(row.parent)?.length ?? 0) - row.hidden]?.path);
+				setPageLimits((current) => {
 					const next = new Map(current);
 					next.set(row.parent, Math.max(200, current.get(row.parent) ?? 0) + 200);
 					return next;
+				});
+			},
+			style: { paddingInlineStart: row.depth * INDENT + 28 },
+			className: "flex min-h-8 w-full items-center rounded-md pr-2 text-left text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+			children: [
+				"Show ",
+				Math.min(row.hidden, 200),
+				" more of ",
+				row.hidden
+			]
+		}, `more:${row.parent}`);
+		const { node, depth } = row;
+		const dir = node.type === "directory";
+		const open = dir && isOpen(node.path);
+		const selected = !dir && node.path === selectedPath;
+		const active = dir && node.path === activeFolder;
+		const kind = dir ? {
+			Icon: open ? FolderOpen : Folder,
+			ink: "text-muted-foreground"
+		} : fileKind(node.name);
+		const Icon = kind.Icon;
+		const change = dir ? open ? void 0 : changedFolders.get(node.path) : status?.[node.path];
+		const ancestors = [];
+		for (let at = row.parent; at; at = index.parents.get(at) ?? null) ancestors.unshift(at);
+		return /* @__PURE__ */ jsxs("div", {
+			ref: (element) => {
+				if (element) {
+					rowRefs.current.set(node.path, element);
+					if (previousPaths.current && !previousPaths.current.has(node.path) && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+						previousPaths.current.add(node.path);
+						element.classList.add("agent-arrive");
+						Promise.allSettled(element.getAnimations().map((animation) => animation.finished)).then(() => element.classList.remove("agent-arrive"));
+					}
+					if (pendingFocusRef.current === node.path) {
+						pendingFocusRef.current = null;
+						element.focus({ preventScroll: true });
+					}
+					if (target === node.path && rows.length <= 100) revealInScroller(element);
+				} else rowRefs.current.delete(node.path);
+			},
+			role: "treeitem",
+			"aria-level": depth + 1,
+			"aria-posinset": row.posInSet,
+			"aria-setsize": row.setSize,
+			"aria-expanded": dir ? open : void 0,
+			"aria-selected": dir ? void 0 : selected,
+			"aria-current": active ? "true" : void 0,
+			tabIndex: node.path === tabStop ? 0 : -1,
+			title: node.path,
+			"data-vault-tree-item": node.type,
+			"data-path": node.path,
+			"data-selected": selected ? "true" : void 0,
+			onClick: () => activate(node),
+			onFocus: () => setFocusedPath(node.path),
+			onKeyDown: (event) => onKeyDown(event, node),
+			style: { paddingInlineStart: depth * INDENT + 4 },
+			className: [
+				"group relative flex min-h-8 w-full cursor-pointer select-none items-center gap-1.5 rounded-md pr-2 text-sm transition-colors [@media(pointer:coarse)]:min-h-10",
+				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+				selected ? "bg-[var(--ix-sel-bg)] font-medium text-[var(--accent-text)]" : active ? "bg-muted font-medium text-foreground" : "text-foreground hover:bg-[var(--ix-hover-bg)]"
+			].join(" "),
+			children: [
+				ancestors.map((folder, level) => /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: `pointer-events-none absolute inset-y-0 w-px ${folder === openParent ? "bg-[var(--border-strong)]" : "bg-border"}`,
+					style: { left: level * INDENT + 12 }
+				}, folder)),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "flex size-4 shrink-0 items-center justify-center text-muted-foreground",
+					children: dir && /* @__PURE__ */ jsx(ChevronRight, { className: `size-3.5 transition-transform duration-fast ${open ? "rotate-90" : ""}` })
+				}),
+				/* @__PURE__ */ jsx(Icon, {
+					"aria-hidden": "true",
+					className: `size-4 shrink-0 ${kind.ink}`
 				}),
-				style: { paddingInlineStart: row.depth * INDENT + 28 },
-				className: "flex min-h-8 w-full items-center rounded-md pr-2 text-left text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-				children: [
-					"Show ",
-					Math.min(row.hidden, 200),
-					" more of ",
-					row.hidden
-				]
-			}, `more:${row.parent}`);
-			const { node, depth } = row;
-			const dir = node.type === "directory";
-			const open = dir && isOpen(node.path);
-			const selected = !dir && node.path === selectedPath;
-			const active = dir && node.path === activeFolder;
-			const kind = dir ? {
-				Icon: open ? FolderOpen : Folder,
-				ink: "text-muted-foreground"
-			} : fileKind(node.name);
-			const Icon = kind.Icon;
-			const change = dir ? open ? void 0 : changedFolders.get(node.path) : status?.[node.path];
-			const ancestors = [];
-			for (let at = row.parent; at; at = index.parents.get(at) ?? null) ancestors.unshift(at);
-			return /* @__PURE__ */ jsxs("div", {
-				ref: (element) => {
-					if (element) rowRefs.current.set(node.path, element);
-					else rowRefs.current.delete(node.path);
-				},
-				role: "treeitem",
-				"aria-level": depth + 1,
-				"aria-posinset": row.posInSet,
-				"aria-setsize": row.setSize,
-				"aria-expanded": dir ? open : void 0,
-				"aria-selected": dir ? void 0 : selected,
-				"aria-current": active ? "true" : void 0,
-				tabIndex: node.path === tabStop ? 0 : -1,
-				title: node.path,
-				"data-vault-tree-item": node.type,
-				"data-path": node.path,
-				"data-selected": selected ? "true" : void 0,
-				onClick: () => activate(node),
-				onFocus: () => setFocusedPath(node.path),
-				onKeyDown: (event) => onKeyDown(event, node),
-				style: { paddingInlineStart: depth * INDENT + 4 },
-				className: [
-					"group relative flex min-h-8 w-full cursor-pointer select-none items-center gap-1.5 rounded-md pr-2 text-sm transition-colors [@media(pointer:coarse)]:min-h-10",
-					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-					selected ? "bg-[var(--ix-sel-bg)] font-medium text-[var(--accent-text)]" : active ? "bg-muted font-medium text-foreground" : "text-foreground hover:bg-[var(--ix-hover-bg)]"
-				].join(" "),
-				children: [
-					ancestors.map((folder, level) => /* @__PURE__ */ jsx("span", {
-						"aria-hidden": "true",
-						className: `pointer-events-none absolute inset-y-0 w-px ${folder === openParent ? "bg-[var(--border-strong)]" : "bg-border"}`,
-						style: { left: level * INDENT + 12 }
-					}, folder)),
-					/* @__PURE__ */ jsx("span", {
-						"aria-hidden": "true",
-						className: "flex size-4 shrink-0 items-center justify-center text-muted-foreground",
-						children: dir && /* @__PURE__ */ jsx(ChevronRight, { className: `size-3.5 transition-transform duration-fast ${open ? "rotate-90" : ""}` })
-					}),
-					/* @__PURE__ */ jsx(Icon, {
-						"aria-hidden": "true",
-						className: `size-4 shrink-0 ${kind.ink}`
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "min-w-0 flex-1 truncate",
-						children: node.name
-					}),
-					change && (dir ? /* @__PURE__ */ jsx("span", {
-						"aria-label": `holds ${change === "added" ? "added" : "changed"} files`,
-						className: `size-1.5 shrink-0 rounded-full ${change === "added" ? "bg-[var(--surface-success-text)]" : "bg-[var(--surface-warning-text)]"}`
-					}) : /* @__PURE__ */ jsx("span", {
-						"aria-label": change,
-						className: `w-3.5 shrink-0 text-center font-mono text-xs font-semibold ${CHANGE[change].ink}`,
-						children: CHANGE[change].letter
-					}))
-				]
-			}, node.path);
-		})
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate",
+					children: node.name
+				}),
+				change && (dir ? /* @__PURE__ */ jsx("span", {
+					"aria-label": `holds ${change === "added" ? "added" : "changed"} files`,
+					className: `size-1.5 shrink-0 rounded-full ${change === "added" ? "bg-[var(--surface-success-text)]" : "bg-[var(--surface-warning-text)]"}`
+				}) : /* @__PURE__ */ jsx("span", {
+					"aria-label": change,
+					className: `w-3.5 shrink-0 text-center font-mono text-sm font-semibold ${CHANGE[change].ink}`,
+					children: CHANGE[change].letter
+				}))
+			]
+		}, node.path);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: (element) => {
+			treeRef.current = element;
+			if (!element) return;
+			let parent = element?.parentElement ?? null;
+			while (parent && !/auto|scroll/.test(getComputedStyle(parent).overflowY)) parent = parent.parentElement;
+			scroller.current = parent ?? document.scrollingElement;
+		},
+		role: "tree",
+		"aria-label": label,
+		"data-vault-tree-rows": true,
+		className,
+		children: /* @__PURE__ */ jsx(VirtualList, {
+			items: rows,
+			keyOf,
+			render,
+			scroller,
+			origin: treeRef,
+			estimate: 33,
+			overscan: 320,
+			target,
+			targetAlign: "nearest",
+			virtualize: rows.length > 100,
+			keepMounted: tabStop ?? void 0
+		}, storageKey)
 	});
 }
 // src/vault-tree/tree-data.ts

package/dist/use-follow-tail-Ckx5ZSV2.js

@@ -0,0 +1 @@
+export { useFollowTail as t } from "@tangle-network/ui/hooks";

package/dist/vault-tree.js

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

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

@@ -1,7 +1,7 @@
 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 "./workspace-files-pane-DB9Nvwh4.js";
+import "./workspace-files-pane-C0PeY6rY.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";

package/dist/{workspace-files-pane-DB9Nvwh4.js → workspace-files-pane-C0PeY6rY.js}

@@ -1,5 +1,5 @@
 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 { i as VaultTree, n as filterFileNodes, t as fileTreeFromPaths } from "./tree-data-B_IXAIgg.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";
@@ -263,7 +263,7 @@ function WorkspaceFilesPane({ root, paths, selectedPath, onSelect, preview, onBa
 				preview,
 				split,
 				tabs: split && tabs,
-				empty: isEmpty,
+				files: index,
 				backRef,
 				onBack,
 				onOpen: (path) => onSelect?.(path, index.get(path)),
@@ -277,7 +277,7 @@ function WorkspaceFilesPane({ root, paths, selectedPath, onSelect, preview, onBa
 }
 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 }) {
+function FilesViewer({ preview, split, tabs, files, backRef, onBack, onOpen, expand }) {
 	const path = preview?.path;
 	const [open, setOpen] = useState(() => path ? [path] : []);
 	useEffect(() => {
@@ -285,12 +285,12 @@ function FilesViewer({ preview, split, tabs, empty, backRef, onBack, onOpen, exp
 	}, [path]);
 	const [mode, setMode] = useState("file");
 	useEffect(() => setMode("file"), [path]);
+	const shown = open.filter((entry) => entry === path || files.get(entry)?.type === "file");
 	const close = (target) => {
-		const at = open.indexOf(target);
-		const rest = open.filter((entry) => entry !== target);
-		setOpen(rest);
+		const rest = shown.filter((entry) => entry !== target);
+		setOpen((paths) => paths.filter((entry) => entry !== target));
 		if (target !== path) return;
-		const neighbour = rest[Math.min(at, rest.length - 1)];
+		const neighbour = rest[Math.min(shown.indexOf(target), rest.length - 1)];
 		if (neighbour) onOpen(neighbour);
 		else onBack?.();
 	};
@@ -299,7 +299,7 @@ function FilesViewer({ preview, split, tabs, empty, backRef, onBack, onOpen, exp
 	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"),
+			className: cn(HEADER_ROW, "sticky top-0 z-10 gap-2 pr-[var(--files-inset)]", !(tabs && shown.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,
@@ -310,8 +310,8 @@ function FilesViewer({ preview, split, tabs, empty, backRef, onBack, onOpen, exp
 					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) => ({
+				tabs && shown.length > 0 ? /* @__PURE__ */ jsx(FileTabs, {
+					tabs: shown.map((entry) => ({
 						id: entry,
 						name: baseName(entry),
 						path: entry
@@ -339,7 +339,7 @@ function FilesViewer({ preview, split, tabs, empty, backRef, onBack, onOpen, exp
 					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",
+					className: cn("flex min-w-0 max-w-full flex-wrap items-center gap-2", !split && "order-last"),
 					children: preview.actions
 				}),
 				expand && /* @__PURE__ */ jsx(Button, {
@@ -360,7 +360,7 @@ function FilesViewer({ preview, split, tabs, empty, backRef, onBack, onOpen, exp
 			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."
+			children: files.size === 0 ? null : "Select a file to open it here."
 		})]
 	});
 }