modviz 0.1.2

package/dist/server/assets/compare-BFMiiUsB.js

@@ -0,0 +1,562 @@
+import { t as Button } from "./button-Bqnnid5i.js";
+import { i as TooltipTrigger, n as TooltipArrow, r as TooltipContent, t as Tooltip } from "./tooltip-Ck0DDfF7.js";
+import { a as fetchSnapshotHistory, i as fetchSnapshotGraph, m as useModvizBundle } from "./modviz-data-CUyTorv0.js";
+import { a as CommandInput, i as CommandGroup, n as CommandDialog, o as CommandItem, r as CommandEmpty, s as CommandList } from "./command-SdxShIbL.js";
+import { t as Route$1 } from "./compare-CpOqTpYu.js";
+import { t as formatNumber } from "./formatting-iDlL4tA-.js";
+import { t as ModvizLayout } from "./modviz-layout-BAH2ogse.js";
+import { useEffect, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeftRight, ChevronsUpDown, FileUp, History, RotateCcw } from "lucide-react";
+//#region shared/modviz-compare.ts
+var sortStrings = (values) => Array.from(values).sort((left, right) => left.localeCompare(right));
+var getEdgeSet = (graph) => new Set(graph.nodes.flatMap((node) => node.importees.map((importee) => `${node.path} -> ${importee}`)));
+var getExternalPackageName = (nodePath, packageName) => {
+	if (!nodePath.includes("node_modules")) return packageName ?? "external";
+	if (packageName && packageName !== "node_modules") return packageName;
+	const segments = nodePath.split(/[\\/]/).filter(Boolean);
+	const nodeModulesIndex = segments.lastIndexOf("node_modules");
+	if (nodeModulesIndex === -1) return "node_modules";
+	const scopeOrName = segments[nodeModulesIndex + 1];
+	const maybeName = segments[nodeModulesIndex + 2];
+	if (!scopeOrName) return "node_modules";
+	return scopeOrName.startsWith("@") && maybeName ? `${scopeOrName}/${maybeName}` : scopeOrName;
+};
+var getExternalPackageSet = (graph) => new Set(graph.nodes.filter((node) => node.path.includes("node_modules")).map((node) => getExternalPackageName(node.path, node.package?.name)).filter(Boolean));
+var getNodeMap = (graph) => new Map(graph.nodes.map((node) => [node.path, node]));
+var setDifference = (left, right) => {
+	const values = /* @__PURE__ */ new Set();
+	for (const value of left) if (!right.has(value)) values.add(value);
+	return values;
+};
+var buildModvizGraphComparison = (baseline, current) => {
+	const baselineNodes = getNodeMap(baseline);
+	const currentNodes = getNodeMap(current);
+	const baselineNodePaths = new Set(baselineNodes.keys());
+	const currentNodePaths = new Set(currentNodes.keys());
+	const baselineEdges = getEdgeSet(baseline);
+	const currentEdges = getEdgeSet(current);
+	const baselineWorkspacePackages = new Set(baseline.metadata.packages.map((pkg) => pkg.name));
+	const currentWorkspacePackages = new Set(current.metadata.packages.map((pkg) => pkg.name));
+	const baselineExternalPackages = getExternalPackageSet(baseline);
+	const currentExternalPackages = getExternalPackageSet(current);
+	const changedNodes = [];
+	for (const [nodePath, baselineNode] of baselineNodes.entries()) {
+		const currentNode = currentNodes.get(nodePath);
+		if (!currentNode) continue;
+		const deltaMagnitude = Math.abs(currentNode.importedBy.length - baselineNode.importedBy.length) + Math.abs(currentNode.importees.length - baselineNode.importees.length) + Math.abs(currentNode.imports.length - baselineNode.imports.length);
+		if (deltaMagnitude === 0) continue;
+		changedNodes.push({
+			path: nodePath,
+			baselineIncoming: baselineNode.importedBy.length,
+			currentIncoming: currentNode.importedBy.length,
+			baselineOutgoing: baselineNode.importees.length,
+			currentOutgoing: currentNode.importees.length,
+			baselineImports: baselineNode.imports.length,
+			currentImports: currentNode.imports.length,
+			deltaMagnitude
+		});
+	}
+	changedNodes.sort((left, right) => right.deltaMagnitude - left.deltaMagnitude || left.path.localeCompare(right.path));
+	return {
+		baselineGeneratedAt: baseline.metadata.generatedAt ?? null,
+		currentGeneratedAt: current.metadata.generatedAt ?? null,
+		summary: {
+			baselineEdges: baselineEdges.size,
+			baselineExternalPackages: baselineExternalPackages.size,
+			baselineImportStatements: baseline.nodes.reduce((sum, node) => sum + node.imports.length, 0),
+			baselineNodes: baseline.nodes.length,
+			baselineWorkspacePackages: baselineWorkspacePackages.size,
+			currentEdges: currentEdges.size,
+			currentExternalPackages: currentExternalPackages.size,
+			currentImportStatements: current.nodes.reduce((sum, node) => sum + node.imports.length, 0),
+			currentNodes: current.nodes.length,
+			currentWorkspacePackages: currentWorkspacePackages.size
+		},
+		addedEdges: sortStrings(setDifference(currentEdges, baselineEdges)),
+		addedExternalPackages: sortStrings(setDifference(currentExternalPackages, baselineExternalPackages)),
+		addedNodes: sortStrings(setDifference(currentNodePaths, baselineNodePaths)),
+		addedWorkspacePackages: sortStrings(setDifference(currentWorkspacePackages, baselineWorkspacePackages)),
+		changedNodes,
+		removedEdges: sortStrings(setDifference(baselineEdges, currentEdges)),
+		removedExternalPackages: sortStrings(setDifference(baselineExternalPackages, currentExternalPackages)),
+		removedNodes: sortStrings(setDifference(baselineNodePaths, currentNodePaths)),
+		removedWorkspacePackages: sortStrings(setDifference(baselineWorkspacePackages, currentWorkspacePackages))
+	};
+};
+//#endregion
+//#region src/components/modviz/compare-view.tsx
+var isModvizOutput = (value) => {
+	if (!value || typeof value !== "object") return false;
+	const candidate = value;
+	return Boolean(candidate.metadata && Array.isArray(candidate.nodes) && Array.isArray(candidate.imports));
+};
+var deltaLabel = (baseline, current) => {
+	const delta = current - baseline;
+	return `${delta > 0 ? "+" : ""}${formatNumber.format(delta)}`;
+};
+var parseSnapshotFile = async (file) => {
+	const raw = JSON.parse(await file.text());
+	if (!isModvizOutput(raw)) throw new Error("The selected file is not a valid modviz graph JSON snapshot.");
+	return {
+		graph: raw,
+		label: file.name
+	};
+};
+function SnapshotHistoryCombobox(props) {
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		className: "mt-3 w-full justify-between",
+		onClick: () => setOpen(true),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(History, { className: "size-4" }), "Pick from snapshot history"]
+		}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 opacity-50" })]
+	}), /* @__PURE__ */ jsxs(CommandDialog, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(CommandInput, { placeholder: "Search snapshots…" }), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No snapshots found." }), /* @__PURE__ */ jsx(CommandGroup, {
+			heading: "Saved snapshots",
+			children: props.history.map((snapshot) => /* @__PURE__ */ jsx(CommandItem, {
+				value: snapshot.id + " " + (snapshot.label ?? ""),
+				onSelect: () => {
+					props.onSelect(snapshot.id);
+					setOpen(false);
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-col",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate font-medium",
+						children: snapshot.label || snapshot.id
+					}), snapshot.generatedAt ? /* @__PURE__ */ jsx("span", {
+						className: "truncate text-xs text-slate-500",
+						children: new Date(snapshot.generatedAt).toLocaleString()
+					}) : null]
+				})
+			}, snapshot.id))
+		})] })]
+	})] });
+}
+function SnapshotCard(props) {
+	return /* @__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: "flex items-start justify-between gap-4",
+				children: [/* @__PURE__ */ jsxs("div", { children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400",
+						children: props.title
+					}),
+					/* @__PURE__ */ jsx("h2", {
+						className: "mt-2 text-lg font-semibold text-slate-900 dark:text-slate-100",
+						children: props.snapshot?.label ?? props.label
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "mt-2 text-sm leading-6 text-slate-500 dark:text-slate-400",
+						children: props.description
+					})
+				] }), props.secondaryAction]
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "mt-4 flex cursor-pointer items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-4 py-5 text-sm font-medium text-slate-600 transition hover:border-sky-300 hover:bg-sky-50 hover:text-sky-700 dark:border-slate-700 dark:bg-slate-900/70 dark:text-slate-300 dark:hover:border-sky-500/60 dark:hover:bg-sky-500/10 dark:hover:text-sky-200",
+				children: [
+					/* @__PURE__ */ jsx(FileUp, { className: "size-4" }),
+					/* @__PURE__ */ jsx("span", { children: "Load JSON snapshot" }),
+					/* @__PURE__ */ jsx("input", {
+						accept: "application/json,.json",
+						className: "sr-only",
+						type: "file",
+						onChange: (event) => {
+							const file = event.currentTarget.files?.[0];
+							if (file) props.onFileChange(file);
+							event.currentTarget.value = "";
+						}
+					})
+				]
+			}),
+			props.history && props.history.length > 0 && props.onHistorySelect ? /* @__PURE__ */ jsx(SnapshotHistoryCombobox, {
+				history: props.history,
+				onSelect: props.onHistorySelect
+			}) : null,
+			props.snapshot ? /* @__PURE__ */ jsxs("div", {
+				className: "mt-4 grid gap-3 sm:grid-cols-3",
+				children: [
+					/* @__PURE__ */ jsx(MetricCard, {
+						label: "Nodes",
+						value: props.snapshot.graph.nodes.length
+					}),
+					/* @__PURE__ */ jsx(MetricCard, {
+						label: "Edges",
+						value: props.snapshot.graph.nodes.reduce((sum, node) => sum + node.importees.length, 0)
+					}),
+					/* @__PURE__ */ jsx(MetricCard, {
+						label: "Generated",
+						valueLabel: new Date(props.snapshot.graph.metadata.generatedAt).toLocaleString()
+					})
+				]
+			}) : null
+		]
+	});
+}
+function MetricCard(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-xl font-semibold text-slate-900 dark:text-slate-100",
+			children: props.valueLabel ?? formatNumber.format(props.value ?? 0)
+		})]
+	});
+}
+function DeltaCard(props) {
+	const delta = props.current - props.baseline;
+	const tone = delta === 0 ? "text-slate-500 dark:text-slate-400" : delta > 0 ? "text-emerald-600 dark:text-emerald-300" : "text-rose-600 dark:text-rose-300";
+	return /* @__PURE__ */ jsxs("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__ */ jsx("p", {
+				className: "text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400",
+				children: props.label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-3 flex items-end justify-between gap-4",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "text-3xl font-semibold text-slate-900 dark:text-slate-100",
+					children: formatNumber.format(props.current)
+				}), /* @__PURE__ */ jsxs("p", {
+					className: "mt-2 text-sm text-slate-500 dark:text-slate-400",
+					children: ["was ", formatNumber.format(props.baseline)]
+				})] }), /* @__PURE__ */ jsx("p", {
+					className: `text-sm font-semibold ${tone}`,
+					children: deltaLabel(props.baseline, props.current)
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-3 text-sm leading-6 text-slate-500 dark:text-slate-400",
+				children: props.note
+			})
+		]
+	});
+}
+function ChangeList(props) {
+	return /* @__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__ */ jsx("h3", {
+			className: "text-base font-semibold text-slate-900 dark:text-slate-100",
+			children: props.title
+		}), /* @__PURE__ */ jsx("div", {
+			className: "mt-4 max-h-[20rem] space-y-2 overflow-auto pr-2",
+			children: props.items.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-slate-500 dark:text-slate-400",
+				children: props.emptyMessage
+			}) : props.items.slice(0, 80).map((item) => /* @__PURE__ */ jsx("div", {
+				className: "rounded-2xl bg-slate-50 px-3 py-2 font-mono text-xs text-slate-700 dark:bg-slate-900/70 dark:text-slate-200",
+				children: item
+			}, item))
+		})]
+	});
+}
+function ChangedNodesTable(props) {
+	const headerWithTooltip = (label, description, align = "left") => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: `inline-flex items-center gap-1 ${align === "right" ? "ml-auto" : ""}`,
+			children: label
+		})
+	}), /* @__PURE__ */ jsxs(TooltipContent, { children: [/* @__PURE__ */ jsx("p", { children: description }), /* @__PURE__ */ jsx(TooltipArrow, {})] })] });
+	return /* @__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__ */ jsx("h3", {
+				className: "text-base font-semibold text-slate-900 dark:text-slate-100",
+				children: "Modules with the largest direct-graph deltas"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-sm text-slate-500 dark:text-slate-400",
+				children: "Inbound counts are direct importers of a file, outbound counts are direct importees, and imports are the number of import statements declared in that file."
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "mt-4 overflow-hidden rounded-2xl border border-slate-200/70 dark:border-slate-800",
+				children: /* @__PURE__ */ jsxs("table", {
+					className: "min-w-full divide-y divide-slate-200 dark:divide-slate-800",
+					children: [/* @__PURE__ */ jsx("thead", {
+						className: "bg-slate-50/90 dark:bg-slate-900/80",
+						children: /* @__PURE__ */ jsxs("tr", { children: [
+							/* @__PURE__ */ jsx("th", {
+								className: "px-4 py-3 text-left text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400",
+								children: "Path"
+							}),
+							/* @__PURE__ */ jsx("th", {
+								className: "px-4 py-3 text-right text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400",
+								children: headerWithTooltip("Inbound", "How many direct importers point at this file or module path in each snapshot.", "right")
+							}),
+							/* @__PURE__ */ jsx("th", {
+								className: "px-4 py-3 text-right text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400",
+								children: headerWithTooltip("Outbound", "How many direct importee targets this file imports in each snapshot.", "right")
+							}),
+							/* @__PURE__ */ jsx("th", {
+								className: "px-4 py-3 text-right text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400",
+								children: headerWithTooltip("Imports", "How many import statements were parsed in that file, even if multiple statements resolve to the same outbound module.", "right")
+							})
+						] })
+					}), /* @__PURE__ */ jsx("tbody", {
+						className: "divide-y divide-slate-200 bg-white dark:divide-slate-800 dark:bg-slate-950/60",
+						children: props.rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+							colSpan: 4,
+							className: "px-4 py-6 text-sm text-slate-500 dark:text-slate-400",
+							children: "No direct node-level count changes were detected between these snapshots."
+						}) }) : props.rows.slice(0, 24).map((row) => /* @__PURE__ */ jsxs("tr", { children: [
+							/* @__PURE__ */ jsx("td", {
+								className: "max-w-[32rem] truncate px-4 py-3 font-mono text-xs text-slate-700 dark:text-slate-200",
+								children: row.path
+							}),
+							/* @__PURE__ */ jsxs("td", {
+								className: "px-4 py-3 text-right text-sm text-slate-700 dark:text-slate-200",
+								children: [
+									row.baselineIncoming,
+									" → ",
+									row.currentIncoming
+								]
+							}),
+							/* @__PURE__ */ jsxs("td", {
+								className: "px-4 py-3 text-right text-sm text-slate-700 dark:text-slate-200",
+								children: [
+									row.baselineOutgoing,
+									" → ",
+									row.currentOutgoing
+								]
+							}),
+							/* @__PURE__ */ jsxs("td", {
+								className: "px-4 py-3 text-right text-sm text-slate-700 dark:text-slate-200",
+								children: [
+									row.baselineImports,
+									" → ",
+									row.currentImports
+								]
+							})
+						] }, row.path))
+					})]
+				})
+			})
+		]
+	});
+}
+function CompareView(props) {
+	const [historyOverride, setHistoryOverride] = useState(null);
+	const [historyLoading, setHistoryLoading] = useState(false);
+	const currentServerSnapshot = useMemo(() => props.currentGraph ? {
+		graph: props.currentGraph,
+		label: "Current served snapshot"
+	} : null, [props.currentGraph]);
+	const [baseline, setBaseline] = useState(null);
+	const [currentOverride, setCurrentOverride] = useState(null);
+	const [errorMessage, setErrorMessage] = useState(null);
+	const history = historyOverride ?? props.history;
+	const current = currentOverride ?? currentServerSnapshot;
+	const assignSnapshot = (slot, snapshot) => {
+		if (slot === "baseline") {
+			setBaseline(snapshot);
+			return;
+		}
+		setCurrentOverride(snapshot);
+	};
+	const refreshHistory = async () => {
+		try {
+			setHistoryLoading(true);
+			setErrorMessage(null);
+			setHistoryOverride(await fetchSnapshotHistory());
+		} catch (error) {
+			setErrorMessage(error instanceof Error ? error.message : "Failed to refresh snapshot history.");
+		} finally {
+			setHistoryLoading(false);
+		}
+	};
+	const comparison = useMemo(() => {
+		if (!baseline || !current) return null;
+		return buildModvizGraphComparison(baseline.graph, current.graph);
+	}, [baseline, current]);
+	const loadFileInto = async (slot, file) => {
+		try {
+			setErrorMessage(null);
+			assignSnapshot(slot, await parseSnapshotFile(file));
+		} catch (error) {
+			setErrorMessage(error instanceof Error ? error.message : "Failed to load the selected snapshot.");
+		}
+	};
+	const loadHistorySnapshot = async (slot, snapshotId) => {
+		try {
+			setErrorMessage(null);
+			assignSnapshot(slot, {
+				graph: await fetchSnapshotGraph(snapshotId),
+				label: snapshotId
+			});
+		} catch (error) {
+			setErrorMessage(error instanceof Error ? error.message : `Failed to load snapshot ${snapshotId}.`);
+		}
+	};
+	useEffect(() => {
+		if (!props.baselineSnapshotId) return;
+		loadHistorySnapshot("baseline", props.baselineSnapshotId);
+	}, [props.baselineSnapshotId]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6",
+		children: [
+			/* @__PURE__ */ jsxs("section", {
+				className: "grid gap-4 xl:grid-cols-2",
+				children: [/* @__PURE__ */ jsx(SnapshotCard, {
+					description: "Load the older or baseline snapshot you want to compare against.",
+					history,
+					label: "No baseline snapshot loaded yet",
+					onFileChange: (file) => void loadFileInto("baseline", file),
+					onHistorySelect: (id) => void loadHistorySnapshot("baseline", id),
+					snapshot: baseline,
+					title: "Baseline"
+				}), /* @__PURE__ */ jsx(SnapshotCard, {
+					description: "By default this uses the graph currently served by the modviz UI, but you can replace it with another JSON file.",
+					history,
+					label: current?.label ?? "No current snapshot loaded yet",
+					onFileChange: (file) => void loadFileInto("current", file),
+					onHistorySelect: (id) => void loadHistorySnapshot("current", id),
+					secondaryAction: /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-2",
+						children: [/* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: () => {
+								setCurrentOverride(null);
+								setErrorMessage(null);
+							},
+							disabled: !currentServerSnapshot,
+							children: [/* @__PURE__ */ jsx(RotateCcw, { className: "size-4" }), "Use served graph"]
+						}), /* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: () => {
+								if (!baseline || !current) return;
+								setBaseline(current);
+								setCurrentOverride(baseline);
+							},
+							disabled: !baseline || !current,
+							children: [/* @__PURE__ */ jsx(ArrowLeftRight, { className: "size-4" }), "Swap"]
+						})]
+					}),
+					snapshot: current,
+					title: "Current"
+				})]
+			}),
+			errorMessage ? /* @__PURE__ */ jsx("section", {
+				className: "rounded-[24px] border border-rose-200/70 bg-rose-50/80 p-4 text-sm text-rose-700 shadow-[0_16px_50px_-32px_rgba(15,23,42,0.55)] dark:border-rose-500/30 dark:bg-rose-500/10 dark:text-rose-200",
+				children: errorMessage
+			}) : null,
+			comparison ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsxs("section", {
+					className: "grid gap-4 md:grid-cols-2 xl:grid-cols-5",
+					children: [
+						/* @__PURE__ */ jsx(DeltaCard, {
+							baseline: comparison.summary.baselineNodes,
+							current: comparison.summary.currentNodes,
+							label: "Nodes",
+							note: "Module paths present in the compared snapshots."
+						}),
+						/* @__PURE__ */ jsx(DeltaCard, {
+							baseline: comparison.summary.baselineEdges,
+							current: comparison.summary.currentEdges,
+							label: "Edges",
+							note: "Direct import relationships between modules."
+						}),
+						/* @__PURE__ */ jsx(DeltaCard, {
+							baseline: comparison.summary.baselineImportStatements,
+							current: comparison.summary.currentImportStatements,
+							label: "Import statements",
+							note: "Raw import entries captured from source analysis."
+						}),
+						/* @__PURE__ */ jsx(DeltaCard, {
+							baseline: comparison.summary.baselineExternalPackages,
+							current: comparison.summary.currentExternalPackages,
+							label: "External packages",
+							note: "Distinct node_modules package names observed in the graph."
+						}),
+						/* @__PURE__ */ jsx(DeltaCard, {
+							baseline: comparison.summary.baselineWorkspacePackages,
+							current: comparison.summary.currentWorkspacePackages,
+							label: "Workspace packages",
+							note: "Monorepo package metadata embedded in the snapshot."
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(ChangedNodesTable, { rows: comparison.changedNodes }),
+				/* @__PURE__ */ jsxs("section", {
+					className: "grid gap-4 xl:grid-cols-2",
+					children: [/* @__PURE__ */ jsx(ChangeList, {
+						title: "Added modules",
+						items: comparison.addedNodes,
+						emptyMessage: "No new module paths were added."
+					}), /* @__PURE__ */ jsx(ChangeList, {
+						title: "Removed modules",
+						items: comparison.removedNodes,
+						emptyMessage: "No module paths were removed."
+					})]
+				}),
+				/* @__PURE__ */ jsxs("section", {
+					className: "grid gap-4 xl:grid-cols-2",
+					children: [/* @__PURE__ */ jsx(ChangeList, {
+						title: "Added edges",
+						items: comparison.addedEdges,
+						emptyMessage: "No direct import edges were added."
+					}), /* @__PURE__ */ jsx(ChangeList, {
+						title: "Removed edges",
+						items: comparison.removedEdges,
+						emptyMessage: "No direct import edges were removed."
+					})]
+				}),
+				/* @__PURE__ */ jsxs("section", {
+					className: "grid gap-4 xl:grid-cols-2",
+					children: [/* @__PURE__ */ jsx(ChangeList, {
+						title: "Added packages",
+						items: [...comparison.addedWorkspacePackages.map((item) => `workspace: ${item}`), ...comparison.addedExternalPackages.map((item) => `external: ${item}`)],
+						emptyMessage: "No workspace or external packages were added."
+					}), /* @__PURE__ */ jsx(ChangeList, {
+						title: "Removed packages",
+						items: [...comparison.removedWorkspacePackages.map((item) => `workspace: ${item}`), ...comparison.removedExternalPackages.map((item) => `external: ${item}`)],
+						emptyMessage: "No workspace or external packages were removed."
+					})]
+				})
+			] }) : /* @__PURE__ */ jsx("section", {
+				className: "rounded-[24px] border border-dashed border-slate-300 bg-white/80 p-6 text-sm leading-6 text-slate-500 shadow-[0_16px_50px_-32px_rgba(15,23,42,0.55)] dark:border-slate-700 dark:bg-slate-950/60 dark:text-slate-400",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center justify-between gap-3",
+					children: [/* @__PURE__ */ jsx("p", { children: "Load a baseline snapshot to compare it with the currently served graph or another uploaded JSON file." }), /* @__PURE__ */ jsxs(Button, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => void refreshHistory(),
+						disabled: historyLoading,
+						children: [/* @__PURE__ */ jsx(RotateCcw, { className: "size-4" }), historyLoading ? "Refreshing history..." : "Refresh history"]
+					})]
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/routes/compare.tsx?tsr-split=component
+function CompareRoute() {
+	const bundle = useModvizBundle();
+	const search = Route$1.useSearch();
+	return /* @__PURE__ */ jsx(ModvizLayout, {
+		projectTitle: bundle.projectTitle,
+		title: "Snapshot Compare",
+		description: "Compare the currently served graph with another modviz JSON snapshot to see which modules, edges, and packages changed.",
+		children: /* @__PURE__ */ jsx(CompareView, {
+			baselineSnapshotId: search.baselineSnapshot,
+			currentGraph: bundle.graph,
+			history: bundle.history
+		})
+	});
+}
+//#endregion
+export { CompareRoute as component };

package/dist/server/assets/compare-CpOqTpYu.js

@@ -0,0 +1,10 @@
+import { createFileRoute, lazyRouteComponent } from "@tanstack/react-router";
+//#region src/routes/compare.tsx
+var $$splitComponentImporter = () => import("./compare-BFMiiUsB.js");
+var Route = createFileRoute("/compare")({
+	ssr: false,
+	validateSearch: (search) => ({ baselineSnapshot: typeof search.baselineSnapshot === "string" ? search.baselineSnapshot : "" }),
+	component: lazyRouteComponent($$splitComponentImporter, "component")
+});
+//#endregion
+export { Route as t };