@tangle-network/sandbox-ui 3.0.2 → 4.0.0

package/dist/{workbench-Z9wbei53.js → workbench-DWQ0pm9w.js}

@@ -1,4 +1,6 @@
 import { t as cn$1 } from "./utils-BER_bdgE.js";
+import { t as revealInScroller } from "./reveal-in-scroller-CzKwuqCG.js";
+import { t as VirtualList } from "./VirtualList-DcSGbEtA.js";
 import { a as PortsList } from "./dashboard-exTS8tta.js";
 import { n as TerminalView } from "./terminal-nUCznZRj.js";
 import { n as buildUnifiedPatch, r as computeDiffStats, t as DiffView } from "./diff-view-B9mNeTLF.js";
@@ -7,7 +9,8 @@ import { n as PreviewView } from "./embedded-app-view-DXsoPale.js";
 import { Button, Skeleton, Textarea } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
-import { Check, Code2, Copy, GitBranch, GitCompare, Globe, Network, RefreshCw, SquareTerminal } from "lucide-react";
+import { useMemo, useRef, useState } from "react";
+import { Check, ChevronRight, Code2, Copy, GitBranch, GitCompare, Globe, Network, RefreshCw, SquareTerminal } from "lucide-react";
 import { focusRing, focusRingInset } from "@tangle-network/ui/utils";
 // src/workbench/pill-tabs.tsx
 /**
@@ -721,4 +724,310 @@ function ChangesPane({ branch, ahead = 0, behind = 0, files, selectedPath, onSel
 		]
 	});
 }
-export { PanelHeader as a, GitStatusBadge as i, SandboxArtifactPane as n, PillTabs as o, DiffStatsBadge as r, ChangesPane as t };
+// src/workbench/json-view.tsx
+/** Containers open level by level while the open rows stay within this; a larger level starts collapsed. */
+const OPEN_ROWS = 400;
+const INDENT = 16;
+const isContainer = (value) => typeof value === "object" && value !== null;
+const pointer = (key) => key.replace(/~/g, "~0").replace(/\//g, "~1");
+const keyOf = (row) => row.path;
+function children(value, path) {
+	if (Array.isArray(value)) return value.map((child, i) => ({
+		key: String(i),
+		index: true,
+		value: child,
+		path: `${path}/${i}`
+	}));
+	if (!isContainer(value)) return [];
+	return Object.entries(value).map(([key, child]) => ({
+		key,
+		index: false,
+		value: child,
+		path: `${path}/${pointer(key)}`
+	}));
+}
+const count = (n, one, many) => `${n.toLocaleString("en-US")} ${n === 1 ? one : many}`;
+const size = (value) => Array.isArray(value) ? count(value.length, "item", "items") : count(Object.keys(value).length, "key", "keys");
+function parse(text, lines) {
+	if (!lines) try {
+		const value = JSON.parse(text);
+		return isContainer(value) ? {
+			roots: children(value, ""),
+			summary: size(value)
+		} : {
+			roots: [{
+				key: null,
+				index: false,
+				value,
+				path: "$"
+			}],
+			summary: "One value"
+		};
+	} catch (error) {
+		return { error: `This file is not valid JSON: ${error instanceof Error ? error.message : String(error)}` };
+	}
+	const roots = [];
+	const source = text.split("\n");
+	for (let i = 0; i < source.length; i++) {
+		if (!source[i].trim()) continue;
+		try {
+			roots.push({
+				key: String(i + 1),
+				index: true,
+				value: JSON.parse(source[i]),
+				path: `/${i + 1}`
+			});
+		} catch (error) {
+			return { error: `Line ${i + 1} is not valid JSON: ${error instanceof Error ? error.message : String(error)}` };
+		}
+	}
+	return {
+		roots,
+		summary: count(roots.length, "line", "lines")
+	};
+}
+function initiallyOpen(roots) {
+	const open = /* @__PURE__ */ new Set();
+	let shown = roots.length, level = roots.filter((entry) => isContainer(entry.value));
+	while (level.length) {
+		const next = level.flatMap((entry) => children(entry.value, entry.path));
+		if (shown + next.length > OPEN_ROWS) break;
+		for (const entry of level) open.add(entry.path);
+		shown += next.length;
+		level = next.filter((entry) => isContainer(entry.value));
+	}
+	return open;
+}
+function everyContainer(roots) {
+	const open = /* @__PURE__ */ new Set();
+	const visit = (entry) => {
+		if (isContainer(entry.value)) {
+			open.add(entry.path);
+			children(entry.value, entry.path).forEach(visit);
+		}
+	};
+	roots.forEach(visit);
+	return open;
+}
+function flatten(roots, open) {
+	const rows = [];
+	const walk = (entries, depth, parent) => entries.forEach((entry, i) => {
+		rows.push({
+			...entry,
+			depth,
+			parent,
+			posInSet: i + 1,
+			setSize: entries.length
+		});
+		if (open.has(entry.path)) walk(children(entry.value, entry.path), depth + 1, entry.path);
+	});
+	walk(roots, 0, null);
+	return rows;
+}
+/** A collapsed container's first fields on one line, such as `{id: "OH-31", state: "US-OH", …}`. */
+function preview(value) {
+	const parts = [];
+	let length = 0;
+	for (const [key, child] of Array.isArray(value) ? value.map((child, i) => [String(i), child]) : Object.entries(value)) {
+		const shown = isContainer(child) ? Array.isArray(child) ? "[…]" : "{…}" : typeof child === "string" && child.length > 40 ? JSON.stringify(`${child.slice(0, 39)}…`) : JSON.stringify(child);
+		const part = Array.isArray(value) ? shown : `${key}: ${shown}`;
+		if (length + part.length > 160) {
+			parts.push("…");
+			break;
+		}
+		parts.push(part);
+		length += part.length + 2;
+	}
+	return Array.isArray(value) ? `[${parts.join(", ")}]` : `{${parts.join(", ")}}`;
+}
+function Value({ value, open }) {
+	if (isContainer(value)) return /* @__PURE__ */ jsxs(Fragment, { children: [!open && /* @__PURE__ */ jsx("span", {
+		className: "mr-2 opacity-80",
+		children: preview(value)
+	}), /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: size(value)
+	})] });
+	if (typeof value === "string") return /* @__PURE__ */ jsxs("span", {
+		className: "text-[var(--syntax-string,currentColor)]",
+		children: [
+			"\"",
+			value,
+			"\""
+		]
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: typeof value === "number" ? "text-[var(--syntax-number,currentColor)]" : "text-[var(--syntax-keyword,currentColor)]",
+		children: String(value)
+	});
+}
+/**
+* JSON and JSON Lines as a collapsible, virtualized tree: objects and arrays open and close, small documents open
+* whole, and long strings wrap. Rows render near the viewport of the nearest scrolling ancestor, so a file of
+* thousands of values stays fast. Keyboard: arrows move and open or close, Home/End jump, Enter or Space toggles.
+*/
+function JsonView({ text, lines = false, label = lines ? "JSON Lines" : "JSON", className }) {
+	const parsed = useMemo(() => parse(text, lines), [text, lines]);
+	const roots = "roots" in parsed ? parsed.roots : [];
+	const [open, setOpen] = useState(() => initiallyOpen(roots));
+	const rows = useMemo(() => flatten(roots, open), [roots, open]);
+	const [focused, setFocused] = useState(null);
+	const [target, setTarget] = useState();
+	const rowRefs = useRef(/* @__PURE__ */ new Map());
+	const pendingFocus = useRef(null);
+	const treeRef = useRef(null), scroller = useRef(null);
+	const tabStop = rows.some((row) => row.path === focused) ? focused : rows[0]?.path ?? null;
+	const toggle = (path, value = !open.has(path)) => setOpen((current) => {
+		const next = new Set(current);
+		if (value) next.add(path);
+		else next.delete(path);
+		return next;
+	});
+	const focusRow = (path) => {
+		if (!path) return;
+		setFocused(path);
+		const element = rowRefs.current.get(path);
+		if (element) {
+			setTarget(void 0);
+			element.focus({ preventScroll: true });
+			revealInScroller(element);
+		} else {
+			pendingFocus.current = path;
+			setTarget(path);
+		}
+	};
+	const onKeyDown = (event, row, at) => {
+		const container = isContainer(row.value), expanded = open.has(row.path);
+		const moves = {
+			ArrowDown: rows[at + 1]?.path,
+			ArrowUp: rows[at - 1]?.path,
+			Home: rows[0]?.path,
+			End: rows[rows.length - 1]?.path
+		};
+		if (event.key in moves) focusRow(moves[event.key]);
+		else if (event.key === "ArrowRight" && container) {
+			if (expanded) focusRow(rows[at + 1]?.parent === row.path ? rows[at + 1].path : null);
+			else toggle(row.path, true);
+		} else if (event.key === "ArrowLeft") {
+			if (expanded) toggle(row.path, false);
+			else focusRow(row.parent);
+		} else if ((event.key === "Enter" || event.key === " ") && container) toggle(row.path);
+		else return;
+		event.preventDefault();
+		event.stopPropagation();
+	};
+	if ("error" in parsed) return /* @__PURE__ */ jsxs("div", {
+		className: cn$1("flex flex-col gap-3 p-4", className),
+		children: [/* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: "text-sm text-[var(--surface-danger-text)]",
+			children: parsed.error
+		}), /* @__PURE__ */ jsx("pre", {
+			className: "whitespace-pre-wrap font-mono text-sm leading-6 text-foreground [overflow-wrap:anywhere]",
+			children: text
+		})]
+	});
+	const render = (row, at) => {
+		const container = isContainer(row.value), expanded = container && open.has(row.path);
+		return /* @__PURE__ */ jsxs("div", {
+			ref: (element) => {
+				if (!element) {
+					rowRefs.current.delete(row.path);
+					return;
+				}
+				rowRefs.current.set(row.path, element);
+				if (pendingFocus.current === row.path) {
+					pendingFocus.current = null;
+					element.focus({ preventScroll: true });
+				}
+			},
+			role: "treeitem",
+			"aria-level": row.depth + 1,
+			"aria-posinset": row.posInSet,
+			"aria-setsize": row.setSize,
+			"aria-expanded": container ? expanded : void 0,
+			tabIndex: row.path === tabStop ? 0 : -1,
+			"data-json-path": row.path,
+			onFocus: () => setFocused(row.path),
+			onKeyDown: (event) => onKeyDown(event, row, at),
+			onClick: () => {
+				if (container && !window.getSelection()?.toString()) toggle(row.path);
+			},
+			style: { paddingInlineStart: row.depth * INDENT + 4 },
+			className: cn$1("relative flex min-h-6 items-start gap-1 rounded-sm pr-3 font-mono text-sm leading-6 text-foreground", "hover:bg-[var(--ix-hover-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring", container && "cursor-pointer"),
+			children: [
+				Array.from({ length: row.depth }, (_, level) => /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "pointer-events-none absolute inset-y-0 w-px bg-border",
+					style: { left: level * INDENT + 11 }
+				}, level)),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "flex h-6 w-4 shrink-0 items-center justify-center text-muted-foreground",
+					children: container && /* @__PURE__ */ jsx(ChevronRight, { className: cn$1("size-3.5 transition-transform duration-fast", expanded && "rotate-90") })
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: cn$1("min-w-0 flex-1 whitespace-pre-wrap [overflow-wrap:anywhere]", container && !expanded && "truncate whitespace-nowrap"),
+					children: [row.key !== null && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: row.index ? "text-muted-foreground" : "text-[var(--syntax-function,currentColor)]",
+						children: row.index ? row.key : JSON.stringify(row.key)
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: ": "
+					})] }), /* @__PURE__ */ jsx(Value, {
+						value: row.value,
+						open: expanded
+					})]
+				})
+			]
+		});
+	};
+	const containers = roots.some((entry) => isContainer(entry.value));
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn$1("flex min-w-0 flex-col", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "sticky top-0 z-10 flex h-9 shrink-0 items-center gap-2 bg-card px-3 text-xs text-muted-foreground shadow-[inset_0_-1px_0_hsl(var(--border))]",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate",
+				children: parsed.summary
+			}), containers && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "sm",
+				onClick: () => setOpen(everyContainer(roots)),
+				children: "Expand all"
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "sm",
+				onClick: () => setOpen(/* @__PURE__ */ new Set()),
+				children: "Collapse all"
+			})] })]
+		}), /* @__PURE__ */ jsx("div", {
+			ref: (element) => {
+				if (!element) return;
+				treeRef.current = element;
+				let parent = element.parentElement;
+				while (parent && !/auto|scroll/.test(getComputedStyle(parent).overflowY)) parent = parent.parentElement;
+				scroller.current = parent ?? document.scrollingElement;
+			},
+			role: "tree",
+			"aria-label": label,
+			className: "px-2 py-2",
+			children: /* @__PURE__ */ jsx(VirtualList, {
+				items: rows,
+				keyOf,
+				render,
+				scroller,
+				origin: treeRef,
+				estimate: 24,
+				overscan: 600,
+				target,
+				targetAlign: "nearest",
+				virtualize: rows.length > 200,
+				keepMounted: tabStop ?? void 0
+			})
+		})]
+	});
+}
+export { GitStatusBadge as a, DiffStatsBadge as i, ChangesPane as n, PanelHeader as o, SandboxArtifactPane as r, PillTabs as s, JsonView as t };

package/dist/workbench.d.ts

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

package/dist/workbench.js

@@ -1,5 +1,5 @@
-import { a as PanelHeader, i as GitStatusBadge, n as SandboxArtifactPane, o as PillTabs, r as DiffStatsBadge, t as ChangesPane } from "./workbench-Z9wbei53.js";
+import { a as GitStatusBadge, i as DiffStatsBadge, n as ChangesPane, o as PanelHeader, r as SandboxArtifactPane, s as PillTabs, t as JsonView } from "./workbench-DWQ0pm9w.js";
 import { a as CodeSurface, i as CODE_THEME, n as buildUnifiedPatch, r as computeDiffStats, t as DiffView } from "./diff-view-B9mNeTLF.js";
 import { n as FileBreadcrumb, t as CodeView } from "./code-view-BlhCS1SD.js";
 import { n as PreviewView, t as EmbeddedAppView } from "./embedded-app-view-DXsoPale.js";
-export { CODE_THEME, ChangesPane, CodeSurface, CodeView, DiffStatsBadge, DiffView, EmbeddedAppView, FileBreadcrumb, GitStatusBadge, PanelHeader, PillTabs, PreviewView, SandboxArtifactPane, buildUnifiedPatch, computeDiffStats };
+export { CODE_THEME, ChangesPane, CodeSurface, CodeView, DiffStatsBadge, DiffView, EmbeddedAppView, FileBreadcrumb, GitStatusBadge, JsonView, PanelHeader, PillTabs, PreviewView, SandboxArtifactPane, buildUnifiedPatch, computeDiffStats };

package/dist/{workspace-BrS_rHWN.js → workspace-CJD7oOEa.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-Di_rn4FL.js";
+import "./workspace-files-pane-D24G7H_Z.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-Di_rn4FL.js → workspace-files-pane-D24G7H_Z.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-9D309DqD.js";
+import { i as VaultTree, n as filterFileNodes, t as fileTreeFromPaths } from "./tree-data-rg5voiY8.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";