modviz 0.1.2

package/dist/server/assets/configure-Bvd45DTI.js

@@ -0,0 +1,288 @@
+import { t as Button } from "./button-Bqnnid5i.js";
+import { t as Input } from "./input-C5r-hBix.js";
+import { m as useModvizBundle } from "./modviz-data-CUyTorv0.js";
+import { t as ModvizLayout } from "./modviz-layout-BAH2ogse.js";
+import { useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+//#region src/routes/configure.tsx?tsr-split=component
+var defaultCommandBuilderState = {
+	launchUi: true,
+	outputFile: "modviz.json",
+	barrelThreshold: 3,
+	excludePaths: "",
+	enableLlm: false,
+	enableAiAnalysis: false,
+	historyDir: "",
+	includePaths: "",
+	ignoreDynamic: false,
+	llmModel: "gpt-4.1-mini",
+	nodeModules: false,
+	packageQuery: "",
+	nodeQuery: "",
+	snapshotName: ""
+};
+var quoteCliValue = (value) => /\s/.test(value) ? JSON.stringify(value) : value;
+var buildAnalyzeCommand = (entryFile, config) => {
+	const parts = [
+		"pnpm",
+		"exec",
+		"modviz",
+		"analyze",
+		quoteCliValue(entryFile)
+	];
+	if (config.outputFile && config.outputFile !== defaultCommandBuilderState.outputFile) parts.push(`--output-file=${quoteCliValue(config.outputFile)}`);
+	if (config.barrelThreshold !== defaultCommandBuilderState.barrelThreshold) parts.push(`--barrel-threshold=${config.barrelThreshold}`);
+	if (config.includePaths.trim()) parts.push(`--include=${quoteCliValue(config.includePaths.trim())}`);
+	if (config.excludePaths.trim()) parts.push(`--exclude=${quoteCliValue(config.excludePaths.trim())}`);
+	if (config.historyDir.trim()) parts.push(`--history-dir=${quoteCliValue(config.historyDir.trim())}`);
+	if (config.launchUi) parts.push("--ui");
+	if (config.enableLlm) parts.push("--llm");
+	if (config.enableAiAnalysis) parts.push("--llm-analyze");
+	if (config.enableAiAnalysis && config.llmModel.trim()) parts.push(`--llm-model=${quoteCliValue(config.llmModel.trim())}`);
+	if (config.ignoreDynamic) parts.push("--ignore-dynamic");
+	if (config.nodeModules) parts.push("--node-modules");
+	if (config.snapshotName.trim()) parts.push(`--snapshot-name=${quoteCliValue(config.snapshotName.trim())}`);
+	if (config.packageQuery.trim()) parts.push(`--package=${quoteCliValue(config.packageQuery.trim())}`);
+	if (config.nodeQuery.trim()) parts.push(`--node=${quoteCliValue(config.nodeQuery.trim())}`);
+	return parts.join(" ");
+};
+function ConfigureRoute() {
+	const bundle = useModvizBundle();
+	const [config, setConfig] = useState(defaultCommandBuilderState);
+	const [didCopy, setDidCopy] = useState(false);
+	const updateConfig = (key, value) => {
+		setConfig((current) => ({
+			...current,
+			[key]: value
+		}));
+	};
+	const copyToClipboard = async (text) => {
+		await navigator.clipboard.writeText(text);
+		setDidCopy(true);
+		window.setTimeout(() => setDidCopy(false), 2e3);
+	};
+	const cmd = useMemo(() => {
+		return buildAnalyzeCommand(bundle.graph?.metadata.entrypoints[0] || "./src/index.ts", config);
+	}, [bundle.graph?.metadata.entrypoints, config]);
+	const summary = bundle.summary;
+	return /* @__PURE__ */ jsx(ModvizLayout, {
+		projectTitle: bundle.projectTitle,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "max-w-3xl space-y-6",
+			children: [
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
+					className: "text-2xl font-bold text-slate-900 dark:text-slate-100",
+					children: "Command Configuration"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-sm text-slate-600 dark:text-slate-400",
+					children: "Configure and run the analyzer from your terminal."
+				})] }),
+				/* @__PURE__ */ jsxs("section", {
+					className: "rounded-[16px] border border-slate-200/70 bg-white/90 p-4 shadow-[0_16px_50px_-32px_rgba(15,23,42,0.55)] dark:border-slate-800 dark:bg-slate-950/70",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "text-sm font-semibold text-slate-900 dark:text-slate-100 mb-4",
+						children: "Build Command"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "space-y-4",
+						children: [
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+								className: "text-xs font-medium text-slate-700 dark:text-slate-300",
+								children: "Output File"
+							}), /* @__PURE__ */ jsx(Input, {
+								value: config.outputFile,
+								onChange: (e) => updateConfig("outputFile", e.target.value),
+								placeholder: "modviz.json",
+								className: "mt-1"
+							})] }),
+							/* @__PURE__ */ jsxs("div", { children: [
+								/* @__PURE__ */ jsx("label", {
+									className: "text-xs font-medium text-slate-700 dark:text-slate-300",
+									children: "Barrel threshold"
+								}),
+								/* @__PURE__ */ jsx(Input, {
+									type: "number",
+									min: "1",
+									value: String(config.barrelThreshold),
+									onChange: (e) => updateConfig("barrelThreshold", Math.max(1, Number(e.target.value) || defaultCommandBuilderState.barrelThreshold)),
+									className: "mt-1"
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "mt-1 text-xs text-slate-500 dark:text-slate-400",
+									children: "Files exporting at least this many symbols are treated as barrel files."
+								})
+							] }),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+								className: "text-xs font-medium text-slate-700 dark:text-slate-300",
+								children: "Snapshot name (optional)"
+							}), /* @__PURE__ */ jsx(Input, {
+								value: config.snapshotName,
+								onChange: (e) => updateConfig("snapshotName", e.target.value),
+								placeholder: "before-refactor",
+								className: "mt-1"
+							})] }),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+								className: "text-xs font-medium text-slate-700 dark:text-slate-300",
+								children: "Include paths (optional)"
+							}), /* @__PURE__ */ jsx(Input, {
+								value: config.includePaths,
+								onChange: (e) => updateConfig("includePaths", e.target.value),
+								placeholder: "src/routes/**,src/components/**",
+								className: "mt-1"
+							})] }),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+								className: "text-xs font-medium text-slate-700 dark:text-slate-300",
+								children: "Exclude paths (optional)"
+							}), /* @__PURE__ */ jsx(Input, {
+								value: config.excludePaths,
+								onChange: (e) => updateConfig("excludePaths", e.target.value),
+								placeholder: "**/*.test.ts,**/*.stories.tsx",
+								className: "mt-1"
+							})] }),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+								className: "text-xs font-medium text-slate-700 dark:text-slate-300",
+								children: "History dir (optional)"
+							}), /* @__PURE__ */ jsx(Input, {
+								value: config.historyDir,
+								onChange: (e) => updateConfig("historyDir", e.target.value),
+								placeholder: ".modviz/history",
+								className: "mt-1"
+							})] }),
+							/* @__PURE__ */ jsx("div", {
+								className: "space-y-2",
+								children: [
+									{
+										key: "launchUi",
+										label: "Launch web UI after analyze (--ui)"
+									},
+									{
+										key: "enableLlm",
+										label: "Enable LLM analysis (--llm)"
+									},
+									{
+										key: "enableAiAnalysis",
+										label: "Generate AI summary (--llm-analyze)"
+									},
+									{
+										key: "ignoreDynamic",
+										label: "Ignore dynamic imports (--ignore-dynamic)"
+									},
+									{
+										key: "nodeModules",
+										label: "Include node_modules (--node-modules)"
+									}
+								].map((field) => /* @__PURE__ */ jsxs("label", {
+									className: "flex cursor-pointer items-center gap-2",
+									children: [/* @__PURE__ */ jsx("input", {
+										type: "checkbox",
+										checked: config[field.key],
+										onChange: (e) => updateConfig(field.key, e.target.checked),
+										className: "rounded"
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-xs font-medium text-slate-700 dark:text-slate-300",
+										children: field.label
+									})]
+								}, field.key))
+							}),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+								className: "text-xs font-medium text-slate-700 dark:text-slate-300",
+								children: "AI model (optional)"
+							}), /* @__PURE__ */ jsx(Input, {
+								value: config.llmModel,
+								onChange: (e) => updateConfig("llmModel", e.target.value),
+								placeholder: "gpt-4.1-mini",
+								className: "mt-1 text-xs",
+								disabled: !config.enableAiAnalysis
+							})] }),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+								className: "text-xs font-medium text-slate-700 dark:text-slate-300",
+								children: "Filter package (optional)"
+							}), /* @__PURE__ */ jsx(Input, {
+								value: config.packageQuery,
+								onChange: (e) => updateConfig("packageQuery", e.target.value),
+								placeholder: "e.g., @namespace/package",
+								className: "mt-1 text-xs"
+							})] }),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+								className: "text-xs font-medium text-slate-700 dark:text-slate-300",
+								children: "Filter node (optional)"
+							}), /* @__PURE__ */ jsx(Input, {
+								value: config.nodeQuery,
+								onChange: (e) => updateConfig("nodeQuery", e.target.value),
+								placeholder: "e.g., src/utils",
+								className: "mt-1 text-xs"
+							})] }),
+							/* @__PURE__ */ jsxs("div", {
+								className: "pt-2 border-t border-slate-200 dark:border-slate-800",
+								children: [/* @__PURE__ */ jsx("p", {
+									className: "text-xs text-slate-600 dark:text-slate-400 mb-2",
+									children: "Run this command in your terminal:"
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx("code", {
+										className: "flex-1 min-w-0 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 font-mono text-xs text-slate-800 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 overflow-x-auto",
+										children: cmd
+									}), /* @__PURE__ */ jsx(Button, {
+										size: "sm",
+										onClick: () => void copyToClipboard(cmd),
+										className: "shrink-0 gap-1.5",
+										title: "Copy command",
+										children: didCopy ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Check, { className: "size-3.5" }), "Copied"] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Copy, { className: "size-3.5" }), "Copy command"] })
+									})]
+								})]
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("section", {
+					className: "rounded-[16px] border border-slate-200/70 bg-white/90 p-4 shadow-[0_16px_50px_-32px_rgba(15,23,42,0.55)] dark:border-slate-800 dark:bg-slate-950/70",
+					children: [
+						/* @__PURE__ */ jsx("h2", {
+							className: "text-sm font-semibold text-slate-900 dark:text-slate-100 mb-3",
+							children: "Current Dataset"
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "grid gap-3 grid-cols-2 sm:grid-cols-4 text-xs",
+							children: [
+								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+									className: "font-semibold text-slate-500 dark:text-slate-400",
+									children: "Nodes"
+								}), /* @__PURE__ */ jsx("p", {
+									className: "text-lg font-bold text-slate-900 dark:text-slate-100",
+									children: (summary?.overview.totalNodes ?? 0).toLocaleString()
+								})] }),
+								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+									className: "font-semibold text-slate-500 dark:text-slate-400",
+									children: "Workspace"
+								}), /* @__PURE__ */ jsx("p", {
+									className: "text-lg font-bold text-slate-900 dark:text-slate-100",
+									children: (summary?.overview.workspaceNodes ?? 0).toLocaleString()
+								})] }),
+								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+									className: "font-semibold text-slate-500 dark:text-slate-400",
+									children: "Packages"
+								}), /* @__PURE__ */ jsx("p", {
+									className: "text-lg font-bold text-slate-900 dark:text-slate-100",
+									children: (summary?.overview.workspacePackages ?? 0).toLocaleString()
+								})] }),
+								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+									className: "font-semibold text-slate-500 dark:text-slate-400",
+									children: "LLM Report"
+								}), /* @__PURE__ */ jsx("p", {
+									className: "text-lg font-bold text-slate-900 dark:text-slate-100",
+									children: summary?.hasLlm ? "✓" : "—"
+								})] })
+							]
+						}),
+						bundle.setup.status !== "ready" ? /* @__PURE__ */ jsx("p", {
+							className: "mt-4 text-sm text-slate-500 dark:text-slate-400",
+							children: bundle.setup.message
+						}) : null
+					]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { ConfigureRoute as component };

package/dist/server/assets/explorer-C7dODpSv.js

@@ -0,0 +1,379 @@
+import { t as Button } from "./button-Bqnnid5i.js";
+import { t as Input } from "./input-C5r-hBix.js";
+import { d as getWorkspacePackageNames, f as isModvizBundleReady, m as useModvizBundle, o as filterNodesByScope, u as getNodeScope } from "./modviz-data-CUyTorv0.js";
+import { t as Route$1 } from "./explorer-CpSb0JTa.js";
+import { t as ModvizLayout } from "./modviz-layout-BAH2ogse.js";
+import { t as ImportDisplay } from "./import-display-BVIOWcsm.js";
+import { t as SetupView } from "./setup-view-DjI49Iqr.js";
+import { useMemo, useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight, ExternalLink, FileCode2, Folder, FolderOpen } from "lucide-react";
+//#region src/components/modviz/explorer-view.tsx
+var defaultGraphSearch = {
+	adjustSizes: false,
+	cluster: "",
+	externalGrouping: "package",
+	focus: "",
+	gravity: 0,
+	hideClusterLabels: false,
+	iterations: 0,
+	linLogMode: false,
+	nodeSizeScale: 0,
+	outboundAttractionDistribution: true,
+	scalingRatio: 0,
+	scope: "all",
+	strongGravityMode: false
+};
+var defaultImportSearch = {
+	exclude: "",
+	include: "",
+	mode: "contains",
+	module: "",
+	preset: "",
+	scope: "all",
+	symbol: ""
+};
+function ExplorerView(props) {
+	const { graph } = props.bundle;
+	const workspacePackageNames = useMemo(() => getWorkspacePackageNames(graph), [graph]);
+	const scopedNodes = useMemo(() => filterNodesByScope(graph.nodes, workspacePackageNames, props.search.scope), [
+		graph.nodes,
+		props.search.scope,
+		workspacePackageNames
+	]);
+	const tree = useMemo(() => buildFileTree(scopedNodes), [scopedNodes]);
+	const selectedNode = useMemo(() => scopedNodes.find((node) => node.path === props.search.selected) ?? scopedNodes[0] ?? null, [props.search.selected, scopedNodes]);
+	const [manuallyExpandedPaths, setManuallyExpandedPaths] = useState(() => /* @__PURE__ */ new Set());
+	const expandedPaths = useMemo(() => new Set([...manuallyExpandedPaths, ...selectedNode ? getAncestorPaths(selectedNode.path) : []]), [manuallyExpandedPaths, selectedNode]);
+	const selectedNodeScope = selectedNode == null ? "workspace" : getNodeScope(selectedNode, workspacePackageNames);
+	const normalizedQuery = props.search.q.trim().toLowerCase();
+	const visibleTree = useMemo(() => filterTree(tree, normalizedQuery), [normalizedQuery, tree]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-screen flex-col gap-6 lg:flex-row lg:h-auto",
+		children: [/* @__PURE__ */ jsxs("section", {
+			className: "flex flex-col rounded-[24px] border border-slate-200/70 bg-white/90 p-5 shadow-[0_16px_50px_-32px_rgba(15,23,42,0.55)] dark:border-slate-800 dark:bg-slate-950/70 lg:w-[35%]",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-2",
+					children: [
+						["all", "All files"],
+						["workspace", "Monorepo"],
+						["external", "node_modules"]
+					].map(([value, label]) => /* @__PURE__ */ jsx(Button, {
+						variant: props.search.scope === value ? "default" : "outline",
+						size: "sm",
+						onClick: () => props.onSearchChange({
+							scope: value,
+							selected: ""
+						}),
+						children: label
+					}, value))
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-4 flex gap-3",
+					children: [
+						/* @__PURE__ */ jsx(Input, {
+							placeholder: "Search file or folder path",
+							value: props.search.q,
+							onChange: (event) => props.onSearchChange({ q: event.currentTarget.value })
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							onClick: () => setManuallyExpandedPaths(/* @__PURE__ */ new Set()),
+							children: "Collapse"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							onClick: () => setManuallyExpandedPaths(new Set(flattenFolderPaths(visibleTree))),
+							children: "Expand"
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-4 flex-1 overflow-auto",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "space-y-1 pr-2",
+						children: visibleTree.children.map((child) => /* @__PURE__ */ jsx(FileTreeItem, {
+							node: child,
+							expandedPaths,
+							selectedPath: selectedNode?.path ?? "",
+							onToggle: (path) => {
+								setManuallyExpandedPaths((previous) => {
+									const next = new Set(previous);
+									if (next.has(path)) next.delete(path);
+									else next.add(path);
+									return next;
+								});
+							},
+							onSelect: (path) => props.onSearchChange({ selected: path })
+						}, child.id))
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx("section", {
+			className: "flex flex-col rounded-[24px] border border-slate-200/70 bg-white/90 p-5 shadow-[0_16px_50px_-32px_rgba(15,23,42,0.55)] dark:border-slate-800 dark:bg-slate-950/70 lg:w-[65%] lg:overflow-y-auto",
+			children: selectedNode ? /* @__PURE__ */ jsxs("div", {
+				className: "space-y-6",
+				children: [
+					/* @__PURE__ */ jsxs("div", { children: [
+						/* @__PURE__ */ jsx("p", {
+							className: "text-xs font-semibold uppercase tracking-[0.22em] text-sky-700 dark:text-sky-300",
+							children: "Selected file"
+						}),
+						/* @__PURE__ */ jsx("h2", {
+							className: "mt-2 break-words text-lg font-semibold text-slate-900 dark:text-slate-100 sm:text-xl",
+							children: selectedNode.path
+						}),
+						/* @__PURE__ */ jsxs("p", {
+							className: "mt-2 text-sm text-slate-500 dark:text-slate-400",
+							children: [selectedNode.package?.name ? `${selectedNode.package.name} • ` : "", selectedNode.cluster ?? selectedNode.type]
+						})
+					] }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							/* @__PURE__ */ jsxs(Link, {
+								to: "/graph",
+								search: {
+									...defaultGraphSearch,
+									focus: selectedNode.path,
+									scope: selectedNodeScope
+								},
+								className: "inline-flex h-9 items-center gap-2 rounded-md border border-slate-200 bg-white px-4 text-sm font-medium text-slate-700 shadow-xs hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100",
+								children: [/* @__PURE__ */ jsx(ExternalLink, { className: "size-4" }), "Open in graph"]
+							}),
+							/* @__PURE__ */ jsxs(Link, {
+								to: "/imports",
+								search: {
+									...defaultImportSearch,
+									include: selectedNode.path,
+									scope: selectedNodeScope
+								},
+								className: "inline-flex h-9 items-center gap-2 rounded-md border border-slate-200 bg-white px-4 text-sm font-medium text-slate-700 shadow-xs hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100",
+								children: [/* @__PURE__ */ jsx(ExternalLink, { className: "size-4" }), "Use as importer filter"]
+							}),
+							/* @__PURE__ */ jsxs(Link, {
+								to: "/trace",
+								search: {
+									package: "",
+									node: selectedNode.path,
+									limit: 10
+								},
+								className: "inline-flex h-9 items-center gap-2 rounded-md border border-slate-200 bg-white px-4 text-sm font-medium text-slate-700 shadow-xs hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100",
+								children: [/* @__PURE__ */ jsx(ExternalLink, { className: "size-4" }), "Trace origins"]
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "grid gap-4 md:grid-cols-3",
+						children: [
+							/* @__PURE__ */ jsx(Metric, {
+								label: "Direct imports",
+								value: selectedNode.imports.length
+							}),
+							/* @__PURE__ */ jsx(Metric, {
+								label: "Imported by",
+								value: selectedNode.importedBy.length
+							}),
+							/* @__PURE__ */ jsx(Metric, {
+								label: "Exports",
+								value: selectedNode.exports.length
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(CollapsibleSection, {
+						title: "Imports",
+						description: "Grouped into import statements so scanning looks closer to the source file.",
+						children: /* @__PURE__ */ jsx(ImportDisplay, {
+							imports: selectedNode.imports,
+							emptyMessage: "No direct imports recorded for this file.",
+							showViewToggle: true
+						})
+					}),
+					/* @__PURE__ */ jsx(CollapsibleSection, {
+						title: "Imported by",
+						description: "Direct inbound edges into this file.",
+						children: /* @__PURE__ */ jsx(ImportedByCard, {
+							items: selectedNode.importedBy,
+							onSelect: (path) => props.onSearchChange({ selected: path })
+						})
+					})
+				]
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "flex min-h-[24rem] items-center justify-center text-sm text-slate-500 dark:text-slate-400",
+				children: "No file matched the current explorer scope."
+			})
+		})]
+	});
+}
+function Metric(props) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-[20px] bg-slate-50/90 p-4 dark:bg-slate-900/70",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400",
+			children: props.label
+		}), /* @__PURE__ */ jsx("p", {
+			className: "mt-2 text-3xl font-semibold text-slate-900 dark:text-slate-100",
+			children: props.value
+		})]
+	});
+}
+function CollapsibleSection(props) {
+	return /* @__PURE__ */ jsxs("details", {
+		open: true,
+		className: "group rounded-[24px] border border-slate-200/70 bg-slate-50/80 p-4 dark:border-slate-800 dark:bg-slate-900/70",
+		children: [/* @__PURE__ */ jsxs("summary", {
+			className: "flex cursor-pointer list-none items-center gap-3 text-left",
+			children: [/* @__PURE__ */ jsx(ChevronDown, { className: "size-5 shrink-0 -rotate-90 transition-transform group-open:rotate-0" }), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "text-base font-semibold text-slate-900 dark:text-slate-100",
+					children: props.title
+				}), /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-sm text-slate-500 dark:text-slate-400",
+					children: props.description
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "mt-4",
+			children: props.children
+		})]
+	});
+}
+function ImportedByCard(props) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "max-h-[28rem] space-y-2 overflow-auto pr-1",
+		children: props.items.length ? props.items.map((item) => /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => props.onSelect(item),
+			className: "flex w-full items-center gap-2 rounded-2xl bg-white px-3 py-3 text-left text-sm text-slate-700 hover:bg-sky-50 hover:text-sky-800 dark:bg-slate-950/80 dark:text-slate-200 dark:hover:bg-sky-500/10 dark:hover:text-sky-200",
+			children: [/* @__PURE__ */ jsx(FileCode2, { className: "size-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: item
+			})]
+		}, item)) : /* @__PURE__ */ jsx("p", {
+			className: "rounded-2xl bg-white px-4 py-6 text-sm text-slate-500 dark:bg-slate-950/80 dark:text-slate-400",
+			children: "No inbound importers recorded for this file."
+		})
+	});
+}
+function FileTreeItem(props) {
+	const depth = props.depth ?? 0;
+	const isExpanded = props.expandedPaths.has(props.node.path);
+	if (props.node.kind === "file") return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => props.onSelect(props.node.path),
+		className: `flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm ${props.selectedPath === props.node.path ? "bg-sky-100 text-sky-900 dark:bg-sky-500/20 dark:text-sky-100" : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-900"}`,
+		style: { paddingLeft: `${depth * 16 + 12}px` },
+		children: [/* @__PURE__ */ jsx(FileCode2, { className: "size-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: props.node.label
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => props.onToggle(props.node.path),
+		className: "flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-900",
+		style: { paddingLeft: `${depth * 16 + 12}px` },
+		children: [
+			isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" }),
+			isExpanded ? /* @__PURE__ */ jsx(FolderOpen, { className: "size-4" }) : /* @__PURE__ */ jsx(Folder, { className: "size-4" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: props.node.label
+			})
+		]
+	}), isExpanded ? /* @__PURE__ */ jsx("div", {
+		className: "space-y-1",
+		children: props.node.children.map((child) => /* @__PURE__ */ jsx(FileTreeItem, {
+			node: child,
+			expandedPaths: props.expandedPaths,
+			selectedPath: props.selectedPath,
+			onToggle: props.onToggle,
+			onSelect: props.onSelect,
+			depth: depth + 1
+		}, child.id))
+	}) : null] });
+}
+function buildFileTree(nodes) {
+	const root = {
+		id: "root",
+		label: "root",
+		path: "",
+		kind: "folder",
+		children: []
+	};
+	for (const node of nodes) {
+		const segments = node.path.split("/").filter(Boolean);
+		let cursor = root;
+		let currentPath = "";
+		segments.forEach((segment, index) => {
+			currentPath = currentPath ? `${currentPath}/${segment}` : segment;
+			const isFile = index === segments.length - 1;
+			let child = cursor.children.find((existing) => existing.label === segment && existing.kind === (isFile ? "file" : "folder"));
+			if (!child) {
+				child = {
+					id: currentPath,
+					label: segment,
+					path: currentPath,
+					kind: isFile ? "file" : "folder",
+					children: [],
+					file: isFile ? node : void 0
+				};
+				cursor.children.push(child);
+				cursor.children.sort((left, right) => {
+					if (left.kind !== right.kind) return left.kind === "folder" ? -1 : 1;
+					return left.label.localeCompare(right.label);
+				});
+			}
+			cursor = child;
+		});
+	}
+	return root;
+}
+function filterTree(node, query) {
+	if (!query) return node;
+	if (node.kind === "file") return node.path.toLowerCase().includes(query) ? node : {
+		...node,
+		children: []
+	};
+	const children = node.children.map((child) => filterTree(child, query)).filter((child) => child.kind === "file" ? child.path.toLowerCase().includes(query) : child.children.length || child.path.toLowerCase().includes(query));
+	return {
+		...node,
+		children
+	};
+}
+function flattenFolderPaths(node) {
+	if (node.kind === "file") return [];
+	return [node.path, ...node.children.flatMap(flattenFolderPaths)];
+}
+function getAncestorPaths(path) {
+	const segments = path.split("/").filter(Boolean);
+	return segments.map((_, index) => segments.slice(0, index + 1).join("/"));
+}
+//#endregion
+//#region src/routes/explorer.tsx?tsr-split=component
+function ExplorerRoute() {
+	const bundle = useModvizBundle();
+	const search = Route$1.useSearch();
+	const navigate = Route$1.useNavigate();
+	return /* @__PURE__ */ jsx(ModvizLayout, {
+		projectTitle: bundle.projectTitle,
+		title: "File Explorer",
+		description: "Browse the monorepo or node_modules tree, select any file, then inspect its direct imports and importers without opening the force-directed graph.",
+		children: isModvizBundleReady(bundle) ? /* @__PURE__ */ jsx(ExplorerView, {
+			bundle,
+			search,
+			onSearchChange: (patch) => navigate({
+				replace: true,
+				search: (previous) => ({
+					...previous,
+					...patch
+				})
+			})
+		}) : /* @__PURE__ */ jsx(SetupView, { bundle })
+	});
+}
+//#endregion
+export { ExplorerRoute as component };

package/dist/server/assets/explorer-CpSb0JTa.js

@@ -0,0 +1,20 @@
+import { createFileRoute, lazyRouteComponent } from "@tanstack/react-router";
+import { z } from "zod";
+//#region src/routes/explorer.tsx
+var $$splitComponentImporter = () => import("./explorer-C7dODpSv.js");
+var explorerSearchSchema = z.object({
+	q: z.string().catch(""),
+	selected: z.string().catch(""),
+	scope: z.enum([
+		"all",
+		"workspace",
+		"external"
+	]).catch("workspace")
+});
+var Route = createFileRoute("/explorer")({
+	ssr: false,
+	validateSearch: (search) => explorerSearchSchema.parse(search),
+	component: lazyRouteComponent($$splitComponentImporter, "component")
+});
+//#endregion
+export { Route as t };