modviz 0.1.2

package/dist/server/assets/trace-eVs-hIZO.js

@@ -0,0 +1,578 @@
+import { t as Button } from "./button-Bqnnid5i.js";
+import { t as Input } from "./input-C5r-hBix.js";
+import { f as isModvizBundleReady, m as useModvizBundle } from "./modviz-data-CUyTorv0.js";
+import { t as Route$1 } from "./trace-ColKOf9g.js";
+import { t as ModvizLayout } from "./modviz-layout-BAH2ogse.js";
+import { t as SetupView } from "./setup-view-DjI49Iqr.js";
+import { useDeferredValue, useEffect, useMemo, useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Search, Sparkles } from "lucide-react";
+//#region shared/modviz-trace.ts
+var chainCache = /* @__PURE__ */ new WeakMap();
+var packageReportCache = /* @__PURE__ */ new WeakMap();
+var nodeReportCache = /* @__PURE__ */ new WeakMap();
+var normalizeForSearch = (value) => value.trim().toLowerCase();
+var isExternalPath = (value) => value.includes("node_modules");
+var uniqueSorted = (values) => Array.from(new Set(values)).filter(Boolean).sort((left, right) => left.localeCompare(right));
+var getTracePackageName = (node) => {
+	if (!node.path.includes("node_modules")) return node.package?.name ?? null;
+	if (node.package?.name && node.package.name !== "node_modules") return node.package.name;
+	const segments = node.path.split(/[\\/]/).filter(Boolean);
+	const nodeModulesIndex = segments.lastIndexOf("node_modules");
+	if (nodeModulesIndex === -1) return null;
+	const scopeOrName = segments[nodeModulesIndex + 1];
+	const maybeName = segments[nodeModulesIndex + 2];
+	if (!scopeOrName) return null;
+	return scopeOrName.startsWith("@") && maybeName ? `${scopeOrName}/${maybeName}` : scopeOrName;
+};
+var uniqueChains = (chains) => {
+	const seen = /* @__PURE__ */ new Set();
+	const nextChains = [];
+	for (const chain of chains) {
+		const key = chain.join(" -> ");
+		if (seen.has(key)) continue;
+		seen.add(key);
+		nextChains.push(chain);
+	}
+	return nextChains.sort((left, right) => {
+		const byLength = left.length - right.length;
+		return byLength !== 0 ? byLength : left.join("/").localeCompare(right.join("/"));
+	});
+};
+var buildUpstreamChains = (graph, targetPath, maxChains = 40, maxDepth = 28) => {
+	const cacheKey = `${targetPath}::${maxChains}::${maxDepth}`;
+	const cachedGraphChains = chainCache.get(graph);
+	if (cachedGraphChains?.has(cacheKey)) return cachedGraphChains.get(cacheKey);
+	const nodeByPath = new Map(graph.nodes.map((node) => [node.path, node]));
+	const entrypoints = new Set(graph.metadata.entrypoints);
+	const results = [];
+	const queue = [[targetPath]];
+	let queueIndex = 0;
+	while (queueIndex < queue.length && results.length < maxChains) {
+		const reverseChain = queue[queueIndex];
+		queueIndex += 1;
+		if (!reverseChain) continue;
+		const currentPath = reverseChain[0];
+		const currentNode = nodeByPath.get(currentPath);
+		const importers = uniqueSorted((currentNode?.importedBy ?? []).filter((importerPath) => !reverseChain.includes(importerPath) && nodeByPath.has(importerPath)));
+		if (!currentNode || importers.length === 0 || entrypoints.has(currentPath) || reverseChain.length >= maxDepth) {
+			results.push([...reverseChain].reverse());
+			continue;
+		}
+		importers.sort((left, right) => {
+			const leftExternal = isExternalPath(left);
+			if (leftExternal !== isExternalPath(right)) return leftExternal ? 1 : -1;
+			return left.localeCompare(right);
+		}).forEach((importerPath) => {
+			queue.push([importerPath, ...reverseChain]);
+		});
+	}
+	const resolvedChains = uniqueChains(results);
+	const nextCache = cachedGraphChains ?? /* @__PURE__ */ new Map();
+	nextCache.set(cacheKey, resolvedChains);
+	if (!cachedGraphChains) chainCache.set(graph, nextCache);
+	return resolvedChains;
+};
+var getWorkspaceOrigin = (chain) => chain.find((segment) => !isExternalPath(segment)) ?? chain[0] ?? null;
+var getIntroducedThrough = (chain) => {
+	for (let index = 0; index < chain.length; index += 1) {
+		if (!isExternalPath(chain[index])) continue;
+		return chain[index - 1] ?? chain[index] ?? null;
+	}
+	return chain.at(-1) ?? null;
+};
+var createTraceMatch = (node, chains) => ({
+	path: node.path,
+	label: node.name,
+	packageName: getTracePackageName(node),
+	type: node.type,
+	targetPaths: [node.path],
+	directImporters: uniqueSorted(node.importedBy),
+	chains,
+	workspaceOrigins: uniqueSorted(chains.map((chain) => getWorkspaceOrigin(chain)).filter(Boolean)),
+	introducedThrough: uniqueSorted(chains.map((chain) => getIntroducedThrough(chain)).filter(Boolean))
+});
+var buildPackageTraceReport = (graph, packageQuery, options = {}) => {
+	const { maxChainsPerTarget = 40, maxDepth = 28, maxNodesPerPackage = Number.POSITIVE_INFINITY } = options;
+	const cacheSuffix = `::${maxChainsPerTarget}::${maxDepth}::${maxNodesPerPackage}`;
+	const normalizedQuery = normalizeForSearch(packageQuery);
+	const cacheKey = `${normalizedQuery}${cacheSuffix}`;
+	const cachedReports = packageReportCache.get(graph);
+	if (cachedReports?.has(cacheKey)) return cachedReports.get(cacheKey);
+	const groupedMatches = /* @__PURE__ */ new Map();
+	const tracedNodeCountByPackage = /* @__PURE__ */ new Map();
+	graph.nodes.filter((node) => node.path.includes("node_modules")).filter((node) => {
+		const packageName = getTracePackageName(node);
+		return packageName ? normalizeForSearch(packageName).includes(normalizedQuery) : false;
+	}).forEach((node) => {
+		const packageName = getTracePackageName(node) ?? node.path;
+		const tracedCount = tracedNodeCountByPackage.get(packageName) ?? 0;
+		const canTraceNode = tracedCount < maxNodesPerPackage;
+		const chains = canTraceNode ? buildUpstreamChains(graph, node.path, maxChainsPerTarget, maxDepth) : [];
+		if (canTraceNode) tracedNodeCountByPackage.set(packageName, tracedCount + 1);
+		const existing = groupedMatches.get(packageName);
+		if (!existing) {
+			groupedMatches.set(packageName, {
+				path: packageName,
+				label: packageName,
+				packageName,
+				type: "package",
+				targetPaths: [node.path],
+				directImporters: uniqueSorted(node.importedBy),
+				chains,
+				workspaceOrigins: uniqueSorted(chains.map((chain) => getWorkspaceOrigin(chain)).filter(Boolean)),
+				introducedThrough: uniqueSorted(chains.map((chain) => getIntroducedThrough(chain)).filter(Boolean))
+			});
+			return;
+		}
+		existing.targetPaths = uniqueSorted([...existing.targetPaths, node.path]);
+		existing.directImporters = uniqueSorted([...existing.directImporters, ...node.importedBy]);
+		existing.chains = uniqueChains([...existing.chains, ...chains]);
+		existing.workspaceOrigins = uniqueSorted([...existing.workspaceOrigins, ...chains.map((chain) => getWorkspaceOrigin(chain)).filter(Boolean)]);
+		existing.introducedThrough = uniqueSorted([...existing.introducedThrough, ...chains.map((chain) => getIntroducedThrough(chain)).filter(Boolean)]);
+	});
+	const matches = Array.from(groupedMatches.values()).sort((left, right) => left.label.localeCompare(right.label));
+	const report = {
+		kind: "package",
+		query: packageQuery,
+		matchedLabels: Array.from(new Set(matches.map((match) => match.packageName).filter(Boolean))).sort((left, right) => left.localeCompare(right)),
+		matches,
+		totalChains: matches.reduce((sum, match) => sum + match.chains.length, 0)
+	};
+	const nextCache = cachedReports ?? /* @__PURE__ */ new Map();
+	nextCache.set(cacheKey, report);
+	if (!cachedReports) packageReportCache.set(graph, nextCache);
+	return report;
+};
+var buildNodeTraceReport = (graph, nodeQuery, options = {}) => {
+	const { maxChainsPerTarget = 40, maxDepth = 28, maxNodeMatches = Number.POSITIVE_INFINITY } = options;
+	const cacheSuffix = `::${maxChainsPerTarget}::${maxDepth}::${maxNodeMatches}`;
+	const normalizedQuery = normalizeForSearch(nodeQuery);
+	const cacheKey = `${normalizedQuery}${cacheSuffix}`;
+	const cachedReports = nodeReportCache.get(graph);
+	if (cachedReports?.has(cacheKey)) return cachedReports.get(cacheKey);
+	const matches = graph.nodes.filter((node) => {
+		return [
+			node.path,
+			node.name,
+			node.package?.name,
+			node.cluster
+		].filter(Boolean).some((value) => normalizeForSearch(String(value)).includes(normalizedQuery));
+	}).slice(0, maxNodeMatches).map((node) => createTraceMatch(node, buildUpstreamChains(graph, node.path, maxChainsPerTarget, maxDepth)));
+	const report = {
+		kind: "node",
+		query: nodeQuery,
+		matchedLabels: matches.map((match) => match.path),
+		matches,
+		totalChains: matches.reduce((sum, match) => sum + match.chains.length, 0)
+	};
+	const nextCache = cachedReports ?? /* @__PURE__ */ new Map();
+	nextCache.set(cacheKey, report);
+	if (!cachedReports) nodeReportCache.set(graph, nextCache);
+	return report;
+};
+//#endregion
+//#region src/components/modviz/trace-view.tsx
+var TRACE_RESULT_LIMIT_DEFAULT = 25;
+var TRACE_RENDERED_MATCHES_LIMIT = 30;
+var explorerSearchForPath = (path) => ({
+	q: "",
+	selected: path,
+	scope: path.includes("node_modules") ? "external" : "workspace"
+});
+function TracePathLink(props) {
+	return /* @__PURE__ */ jsx(Link, {
+		to: "/explorer",
+		search: explorerSearchForPath(props.path),
+		className: props.className ?? "rounded-full bg-white px-3 py-1 hover:text-sky-700 dark:bg-slate-950/80 dark:hover:text-sky-300",
+		children: props.path
+	});
+}
+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
+};
+function TraceView(props) {
+	const [draftSearch, setDraftSearch] = useState(props.search);
+	const deferredSearch = useDeferredValue(props.search);
+	useEffect(() => {
+		setDraftSearch(props.search);
+	}, [props.search]);
+	const applySearch = (next) => {
+		props.onSearchChange(next);
+	};
+	const renderedLimit = deferredSearch.limit || TRACE_RESULT_LIMIT_DEFAULT;
+	const report = useMemo(() => {
+		if (deferredSearch.package.trim()) return buildPackageTraceReport(props.bundle.graph, deferredSearch.package, {
+			maxChainsPerTarget: Math.max(14, renderedLimit),
+			maxDepth: 22,
+			maxNodesPerPackage: Math.max(80, renderedLimit * 4)
+		});
+		if (deferredSearch.node.trim()) return buildNodeTraceReport(props.bundle.graph, deferredSearch.node, {
+			maxChainsPerTarget: Math.max(14, renderedLimit),
+			maxDepth: 22,
+			maxNodeMatches: Math.max(160, renderedLimit * 6)
+		});
+		return null;
+	}, [
+		deferredSearch.node,
+		deferredSearch.package,
+		props.bundle.graph,
+		renderedLimit
+	]);
+	const visibleMatches = useMemo(() => report?.matches.slice(0, TRACE_RENDERED_MATCHES_LIMIT) ?? [], [report]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6",
+		children: [/* @__PURE__ */ jsxs("section", {
+			className: "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",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "grid gap-4 lg:grid-cols-3",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ jsx("label", {
+								className: "text-sm font-medium text-slate-700 dark:text-slate-200",
+								children: "External package"
+							}), /* @__PURE__ */ jsx(Input, {
+								placeholder: "zod, react, lodash-es",
+								value: draftSearch.package,
+								onChange: (event) => {
+									const value = event.currentTarget.value;
+									setDraftSearch((previous) => ({
+										...previous,
+										package: value,
+										node: ""
+									}));
+								},
+								onKeyDown: (event) => {
+									if (event.key === "Enter") {
+										const value = event.currentTarget.value;
+										applySearch({
+											...draftSearch,
+											package: value,
+											node: ""
+										});
+									}
+								}
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ jsx("label", {
+								className: "text-sm font-medium text-slate-700 dark:text-slate-200",
+								children: "Node path or name"
+							}), /* @__PURE__ */ jsx(Input, {
+								placeholder: "src/routes/index.ts",
+								value: draftSearch.node,
+								onChange: (event) => {
+									const value = event.currentTarget.value;
+									setDraftSearch((previous) => ({
+										...previous,
+										node: value,
+										package: ""
+									}));
+								},
+								onKeyDown: (event) => {
+									if (event.key === "Enter") {
+										const value = event.currentTarget.value;
+										applySearch({
+											...draftSearch,
+											node: value,
+											package: ""
+										});
+									}
+								}
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ jsx("label", {
+								className: "text-sm font-medium text-slate-700 dark:text-slate-200",
+								children: "Chain limit"
+							}), /* @__PURE__ */ jsx(Input, {
+								type: "number",
+								min: "1",
+								max: "200",
+								value: String(draftSearch.limit),
+								onChange: (event) => {
+									setDraftSearch((previous) => ({
+										...previous,
+										limit: Math.max(1, Number(event.currentTarget.value) || TRACE_RESULT_LIMIT_DEFAULT)
+									}));
+								},
+								onKeyDown: (event) => {
+									if (event.key === "Enter") applySearch(draftSearch);
+								}
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-4 flex flex-wrap gap-2",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							onClick: () => applySearch({
+								package: "react",
+								node: "",
+								limit: draftSearch.limit || TRACE_RESULT_LIMIT_DEFAULT
+							}),
+							children: "Trace React"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							onClick: () => applySearch({
+								package: "",
+								node: props.bundle.graph.metadata.entrypoints[0] ?? "",
+								limit: draftSearch.limit || TRACE_RESULT_LIMIT_DEFAULT
+							}),
+							children: "Trace entrypoint"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							onClick: () => {
+								const reset = {
+									package: "",
+									node: "",
+									limit: TRACE_RESULT_LIMIT_DEFAULT
+								};
+								setDraftSearch(reset);
+								applySearch(reset);
+							},
+							children: "Reset"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							onClick: () => applySearch(draftSearch),
+							children: "Apply"
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-4 text-sm leading-6 text-slate-500 dark:text-slate-400",
+					children: "Import search finds matching import statements. Trace explains why a file or external package is reachable by walking upstream importers back toward workspace roots and entrypoints."
+				})
+			]
+		}), report ? /* @__PURE__ */ jsxs("section", {
+			className: "space-y-4",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "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",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-4",
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
+						className: "text-lg font-semibold text-slate-900 dark:text-slate-100",
+						children: "Trace results"
+					}), /* @__PURE__ */ jsxs("p", {
+						className: "mt-1 text-sm text-slate-500 dark:text-slate-400",
+						children: [
+							"Matched ",
+							report.matches.length,
+							" result(s) across ",
+							report.totalChains,
+							" origin chain(s). Showing up to ",
+							renderedLimit,
+							" path(s) per section."
+						]
+					})] }), /* @__PURE__ */ jsx("div", {
+						className: "rounded-full bg-slate-950 px-4 py-2 text-sm font-semibold text-white dark:bg-slate-100 dark:text-slate-950",
+						children: report.kind
+					})]
+				})
+			}), report.matches.length === 0 ? /* @__PURE__ */ jsx("div", {
+				className: "rounded-[24px] border border-slate-200/70 bg-white/90 p-8 text-sm text-slate-500 shadow-[0_16px_50px_-32px_rgba(15,23,42,0.55)] dark:border-slate-800 dark:bg-slate-950/70 dark:text-slate-400",
+				children: "No matching origin traces were found."
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [report.matches.length > TRACE_RENDERED_MATCHES_LIMIT ? /* @__PURE__ */ jsxs("div", {
+				className: "rounded-[20px] border border-amber-200/60 bg-amber-50/80 px-4 py-3 text-xs text-amber-800 dark:border-amber-500/40 dark:bg-amber-500/10 dark:text-amber-200",
+				children: [
+					"Rendering the first ",
+					TRACE_RENDERED_MATCHES_LIMIT,
+					" matches out of",
+					" ",
+					report.matches.length,
+					". Refine the query to narrow results."
+				]
+			}) : null, visibleMatches.map((match) => /* @__PURE__ */ jsxs("article", {
+				className: "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",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-start justify-between gap-4",
+						children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+							className: "text-base font-semibold text-slate-900 dark:text-slate-100",
+							children: match.label
+						}), /* @__PURE__ */ jsxs("p", {
+							className: "mt-1 text-sm text-slate-500 dark:text-slate-400",
+							children: [
+								match.packageName ? `${match.packageName} • ` : "",
+								match.type,
+								" • ",
+								match.targetPaths.length,
+								" matching file(s) •",
+								" ",
+								match.workspaceOrigins.length,
+								" workspace origin(s)"
+							]
+						})] }), /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap gap-2",
+							children: [/* @__PURE__ */ jsx(Link, {
+								to: "/graph",
+								search: {
+									...defaultGraphSearch,
+									focus: match.introducedThrough[0] ?? match.workspaceOrigins[0] ?? match.targetPaths[0] ?? match.path,
+									scope: match.introducedThrough[0] || match.workspaceOrigins[0] ? "workspace" : match.path.includes("node_modules") ? "external" : "workspace"
+								},
+								className: "text-sm font-medium text-sky-700 dark:text-sky-300",
+								children: "Open in graph"
+							}), /* @__PURE__ */ jsx(Link, {
+								to: "/explorer",
+								search: {
+									selected: match.introducedThrough[0] ?? match.workspaceOrigins[0] ?? match.targetPaths[0] ?? match.path,
+									q: "",
+									scope: match.introducedThrough[0] || match.workspaceOrigins[0] ? "workspace" : match.path.includes("node_modules") ? "external" : "workspace"
+								},
+								className: "text-sm font-medium text-sky-700 dark:text-sky-300",
+								children: "Open in explorer"
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "mt-4 grid gap-3 lg:grid-cols-2",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "rounded-2xl bg-slate-50/90 px-4 py-3 dark:bg-slate-900/70",
+							children: [
+								/* @__PURE__ */ jsx("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400",
+									children: "Introduced through"
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "mt-1 text-xs text-slate-500 dark:text-slate-400",
+									children: "Workspace files that first cross into this external dependency chain."
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "mt-2 flex flex-wrap gap-2 text-sm text-slate-700 dark:text-slate-200",
+									children: match.introducedThrough.length > 0 ? match.introducedThrough.slice(0, renderedLimit).map((segment) => /* @__PURE__ */ jsx(TracePathLink, { path: segment }, `${match.path}-introduced-${segment}`)) : /* @__PURE__ */ jsx("span", {
+										className: "text-slate-500 dark:text-slate-400",
+										children: "No workspace importer path found."
+									})
+								})
+							]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "rounded-2xl bg-slate-50/90 px-4 py-3 dark:bg-slate-900/70",
+							children: [
+								/* @__PURE__ */ jsx("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400",
+									children: "Workspace origins"
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "mt-1 text-xs text-slate-500 dark:text-slate-400",
+									children: "Workspace roots or entrypoint-side files that can eventually reach this result."
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "mt-2 flex flex-wrap gap-2 text-sm text-slate-700 dark:text-slate-200",
+									children: match.workspaceOrigins.length > 0 ? match.workspaceOrigins.slice(0, renderedLimit).map((segment) => /* @__PURE__ */ jsx(TracePathLink, { path: segment }, `${match.path}-origin-${segment}`)) : /* @__PURE__ */ jsx("span", {
+										className: "text-slate-500 dark:text-slate-400",
+										children: "No upstream workspace root found."
+									})
+								})
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "mt-4 rounded-2xl bg-slate-50/90 px-4 py-3 dark:bg-slate-900/70",
+						children: [
+							/* @__PURE__ */ jsx("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400",
+								children: "Matched files"
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "mt-1 text-xs text-slate-500 dark:text-slate-400",
+								children: "Concrete matching files inside the package or node search result."
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "mt-2 space-y-2 text-xs text-slate-600 dark:text-slate-300",
+								children: match.targetPaths.slice(0, renderedLimit).map((targetPath) => /* @__PURE__ */ jsx("div", {
+									className: "font-mono",
+									children: /* @__PURE__ */ jsx(TracePathLink, {
+										path: targetPath,
+										className: "hover:text-sky-700 dark:hover:text-sky-300"
+									})
+								}, `${match.path}-target-${targetPath}`))
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "mt-4 space-y-3",
+						children: match.chains.slice(0, renderedLimit).map((chain, index) => /* @__PURE__ */ jsxs("div", {
+							className: "rounded-2xl bg-slate-50/90 px-4 py-3 dark:bg-slate-900/70",
+							children: [/* @__PURE__ */ jsxs("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400",
+								children: ["Origin chain ", index + 1]
+							}), /* @__PURE__ */ jsx("div", {
+								className: "mt-2 flex flex-wrap gap-2 text-sm text-slate-700 dark:text-slate-200",
+								children: chain.map((segment, segmentIndex) => /* @__PURE__ */ jsx(TracePathLink, { path: segment }, `${segment}-${segmentIndex}`))
+							})]
+						}, `${match.path}-${index}`))
+					})
+				]
+			}, match.path))] })]
+		}) : /* @__PURE__ */ jsx("section", {
+			className: "rounded-[24px] border border-slate-200/70 bg-white/90 p-8 shadow-[0_16px_50px_-32px_rgba(15,23,42,0.55)] dark:border-slate-800 dark:bg-slate-950/70",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-4",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "rounded-2xl bg-sky-100 p-3 text-sky-700 dark:bg-sky-500/10 dark:text-sky-300",
+					children: /* @__PURE__ */ jsx(Search, { className: "size-5" })
+				}), /* @__PURE__ */ jsxs("div", { children: [
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-lg font-semibold text-slate-900 dark:text-slate-100",
+						children: "Explain why something is here"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "mt-2 text-sm leading-6 text-slate-500 dark:text-slate-400",
+						children: "Enter a package name or a node path to inspect the origin chains captured in the graph snapshot."
+					}),
+					/* @__PURE__ */ jsxs("p", {
+						className: "mt-3 inline-flex items-center gap-2 rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-700 dark:bg-slate-900 dark:text-slate-200",
+						children: [/* @__PURE__ */ jsx(Sparkles, { className: "size-3.5" }), "This uses stored import chains, not a fresh graph walk."]
+					})
+				] })]
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/routes/trace.tsx?tsr-split=component
+function TraceRoute() {
+	const bundle = useModvizBundle();
+	const search = Route$1.useSearch();
+	const navigate = Route$1.useNavigate();
+	return /* @__PURE__ */ jsx(ModvizLayout, {
+		projectTitle: bundle.projectTitle,
+		title: "Trace",
+		description: "Explain why a dependency or module is present by reading the stored origin chains in the current snapshot.",
+		children: isModvizBundleReady(bundle) ? /* @__PURE__ */ jsx(TraceView, {
+			bundle,
+			search,
+			onSearchChange: (patch) => navigate({
+				replace: true,
+				search: (previous) => ({
+					...previous,
+					...patch
+				})
+			})
+		}) : /* @__PURE__ */ jsx(SetupView, { bundle })
+	});
+}
+//#endregion
+export { TraceRoute as component };

package/dist/server/assets/treemap-BbZ9M4GF.js

@@ -0,0 +1,17 @@
+import { t as parseSearchParam } from "./search-params-BNApPgkX.js";
+import { createFileRoute, lazyRouteComponent } from "@tanstack/react-router";
+//#region src/routes/treemap.tsx
+var $$splitComponentImporter = () => import("./treemap-CrgWFoCF.js");
+var validateTreemapSearch = (search) => ({
+	focus: parseSearchParam.string(search.focus, "root") || "root",
+	page: Math.max(0, Math.floor(parseSearchParam.number(search.page, 0))),
+	paginate: parseSearchParam.boolean(search.paginate, true),
+	selected: parseSearchParam.string(search.selected)
+});
+var Route = createFileRoute("/treemap")({
+	ssr: false,
+	validateSearch: validateTreemapSearch,
+	component: lazyRouteComponent($$splitComponentImporter, "component")
+});
+//#endregion
+export { Route as t };