modviz 0.1.2

package/dist/server/assets/flamegraph-CdW-VG6I.js

@@ -0,0 +1,198 @@
+import { t as __exportAll } from "./rolldown-runtime-rSIU-vHC.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Flamegraph, normalizeTreeNode } from "nanovis";
+//#region src/components/graph/map-to-flamegraph.ts
+function convertToNanovisHierarchyData(output, entryNodeId, options = {}) {
+	const maxDepth = options.maxDepth ?? 6;
+	const maxChildren = options.maxChildren ?? 24;
+	const includeExternal = options.includeExternal ?? true;
+	const entryNode = output.nodes.find((node) => node.path === entryNodeId);
+	const nodeMap = /* @__PURE__ */ new Map();
+	output.nodes.forEach((node) => {
+		nodeMap.set(node.path, {
+			id: node.path,
+			text: node.path.split("/").slice(-2).join("/"),
+			subtext: node.package?.name,
+			sizeSelf: node.importees.length + 1,
+			children: [],
+			meta: {
+				path: node.path,
+				type: node.type,
+				package: node.package?.name,
+				importees: node.importees,
+				imports: node.imports.length,
+				exports: node.exports.length,
+				originalNode: node
+			}
+		});
+	});
+	if (!entryNode) return {
+		id: "module-graph-root",
+		text: "Module Graph",
+		subtext: "No entrypoints found",
+		sizeSelf: 1,
+		children: [],
+		meta: {
+			path: "",
+			importees: [],
+			imports: 0,
+			exports: 0,
+			originalNode: {}
+		}
+	};
+	const rootNode = Object.assign({}, nodeMap.get(entryNodeId), { children: [] });
+	const allVisited = /* @__PURE__ */ new Set();
+	const stack = [{
+		depth: 0,
+		nodePath: entryNodeId,
+		parent: rootNode,
+		visited: new Set([entryNodeId])
+	}];
+	let stackSize = 0;
+	const childrenMap = /* @__PURE__ */ new Map();
+	while (stack.length > 0) {
+		stackSize++;
+		const { depth, nodePath, parent, visited } = stack.pop();
+		const wasAlreadyVisited = allVisited.has(nodePath);
+		allVisited.add(nodePath);
+		const node = nodeMap.get(nodePath);
+		if (!node) continue;
+		const currentTreeNode = Object.assign({}, node, { children: wasAlreadyVisited ? childrenMap.get(nodePath) : [] });
+		!wasAlreadyVisited && childrenMap.set(nodePath, currentTreeNode.children);
+		if (parent.children) parent.children.push(currentTreeNode);
+		if (wasAlreadyVisited) continue;
+		if (depth >= maxDepth) continue;
+		const importees = currentTreeNode.meta.importees.filter((importee) => includeExternal || !importee.includes("node_modules")).sort((left, right) => {
+			const leftNode = nodeMap.get(left);
+			return (nodeMap.get(right)?.meta.importees.length ?? 0) - (leftNode?.meta.importees.length ?? 0);
+		});
+		const visibleImportees = importees.slice(0, maxChildren);
+		visibleImportees.forEach((importee) => {
+			if (visited.has(importee)) {
+				const importeeNode = nodeMap.get(importee);
+				if (!importeeNode) return;
+				const importeeTreeNode = Object.assign({}, importeeNode, { children: [] });
+				currentTreeNode.children.push(importeeTreeNode);
+				return;
+			}
+			visited.add(importee);
+			stack.push({
+				depth: depth + 1,
+				nodePath: importee,
+				parent: currentTreeNode,
+				visited: new Set([...visited, importee])
+			});
+		});
+		if (importees.length > visibleImportees.length) currentTreeNode.children.push({
+			id: `${nodePath}#truncated`,
+			text: `… ${importees.length - visibleImportees.length} more`,
+			subtext: "pruned",
+			sizeSelf: 1,
+			children: [],
+			meta: {
+				path: `${nodePath}#truncated`,
+				importees: [],
+				imports: 0,
+				exports: 0,
+				originalNode: currentTreeNode.meta.originalNode
+			}
+		});
+	}
+	return rootNode;
+}
+//#endregion
+//#region src/components/graph/flamegraph.tsx
+var flamegraph_exports = /* @__PURE__ */ __exportAll({ Flamegraph: () => Flamegraph$1 });
+var Flamegraph$1 = (props) => {
+	const containerRef = useRef(null);
+	const flamegraphRef = useRef(null);
+	const tooltipRef = useRef(null);
+	useEffect(() => {
+		if (!containerRef.current) return;
+		const entryNodeId = props.entryNodeId ?? props.output.metadata.entrypoints[0];
+		const flamegraph = new Flamegraph(normalizeTreeNode(convertToNanovisHierarchyData(props.output, entryNodeId, props.options)));
+		flamegraphRef.current = flamegraph;
+		const unsubSelect = flamegraph.events.on("select", (node) => {
+			console.log("Selected node:", {
+				text: node?.text,
+				subtext: node?.subtext,
+				meta: node?.meta
+			});
+		});
+		const unsubHover = flamegraph.events.on("hover", (node, event) => {
+			if (!tooltipRef.current) return;
+			if (node && node.meta) {
+				tooltipRef.current.style.display = "block";
+				if (event) {
+					tooltipRef.current.style.left = `${event.clientX + 10}px`;
+					tooltipRef.current.style.top = `${event.clientY - 10}px`;
+				}
+				tooltipRef.current.innerHTML = `
+					<div style="font-weight: bold; margin-bottom: 8px; color: #4CAF50;">
+						${node.text || "root"}
+					</div>
+					${node.meta.path ? `<div style="color: #ddd; font-size: 10px; margin-bottom: 4px;">${node.meta.path}</div>` : ""}
+					<div style="margin-bottom: 4px;">
+						Size: <span style="color: #FFD700;">${node.sizeSelf || 0}</span>
+					</div>
+					${node.meta.type ? `<div style="margin-bottom: 4px;">Type: <span style="color: #87CEEB;">${node.meta.type}</span></div>` : ""}
+					${node.meta.package ? `<div style="margin-bottom: 4px;">Package: <span style="color: #DDA0DD;">${node.meta.package}</span></div>` : ""}
+					${node.meta.imports !== void 0 ? `<div style="margin-bottom: 4px;">Imports: <span style="color: #F0E68C;">${node.meta.imports}</span></div>` : ""}
+					${node.meta.exports !== void 0 ? `<div>Exports: <span style="color: #F0E68C;">${node.meta.exports}</span></div>` : ""}
+				`;
+			} else tooltipRef.current.style.display = "none";
+		});
+		containerRef.current.innerHTML = "";
+		containerRef.current.appendChild(flamegraph.el);
+		return () => {
+			unsubSelect();
+			unsubHover();
+			if (flamegraphRef.current) flamegraphRef.current = null;
+		};
+	}, [
+		props.entryNodeId,
+		props.options,
+		props.output
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative w-full h-full min-h-0 flex flex-col",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: containerRef,
+				className: "flex-1 min-h-0",
+				style: { minHeight: "400px" }
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: tooltipRef,
+				style: {
+					position: "fixed",
+					background: "rgba(0, 0, 0, 0.9)",
+					color: "white",
+					padding: "12px",
+					borderRadius: "6px",
+					fontSize: "12px",
+					fontFamily: "monospace",
+					maxWidth: "300px",
+					boxShadow: "0 4px 8px rgba(0,0,0,0.3)",
+					pointerEvents: "none",
+					zIndex: 1e3,
+					display: "none"
+				}
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "absolute bottom-4 left-4 bg-black bg-opacity-70 text-white p-3 rounded text-xs font-mono z-10",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "font-bold mb-2",
+						children: "Module Graph Flamegraph"
+					}),
+					/* @__PURE__ */ jsx("div", { children: "Click: Select node" }),
+					/* @__PURE__ */ jsx("div", { children: "Hover: View details" })
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { flamegraph_exports as n, Flamegraph$1 as t };

package/dist/server/assets/formatting-iDlL4tA-.js

@@ -0,0 +1,4 @@
+//#region src/utils/formatting.ts
+var formatNumber = new Intl.NumberFormat("en-US");
+//#endregion
+export { formatNumber as t };

package/dist/server/assets/graph-C1G9H5O4.js

@@ -0,0 +1,438 @@
+import { l as isNodeDetailsOpenAtom, o as currentNodeIdAtom, s as highlightedNodeIdAtom, t as GraphCommandMenu, u as selectedNodeIdsAtom } from "./graph-command-menu-BV5GtOWx.js";
+import { t as Button } from "./button-Bqnnid5i.js";
+import { t as Input } from "./input-C5r-hBix.js";
+import { d as getWorkspacePackageNames, f as isModvizBundleReady, l as getNodeGroupingLabel, m as useModvizBundle, o as filterNodesByScope } from "./modviz-data-CUyTorv0.js";
+import { t as LoadingState } from "./loading-state-CrvCWTtw.js";
+import { n as getDefaultGraphLayoutSettings, t as Route$1 } from "./graph-DAGFGioS.js";
+import { t as ModvizLayout } from "./modviz-layout-BAH2ogse.js";
+import { t as SetupView } from "./setup-view-DjI49Iqr.js";
+import { Suspense, lazy, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Eye, RotateCcw, Settings2, X } from "lucide-react";
+import { Portal } from "@ark-ui/react/portal";
+import { useAtom } from "@xstate/store/react";
+import { FloatingPanel } from "@ark-ui/react/floating-panel";
+//#region src/components/graph/graph-settings-panel.tsx
+var areGraphSettingsEqual = (left, right) => {
+	return left.iterations === right.iterations && left.gravity === right.gravity && left.scalingRatio === right.scalingRatio && left.strongGravityMode === right.strongGravityMode && left.linLogMode === right.linLogMode && left.adjustSizes === right.adjustSizes && left.outboundAttractionDistribution === right.outboundAttractionDistribution && left.hideClusterLabels === right.hideClusterLabels && left.nodeSizeScale === right.nodeSizeScale;
+};
+function NumberField(props) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: "space-y-2 text-sm text-slate-700 dark:text-slate-200",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex items-center justify-between gap-3 font-medium",
+				children: [/* @__PURE__ */ jsx("span", { children: props.label }), /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-slate-500 dark:text-slate-400",
+					children: props.value
+				})]
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				type: "number",
+				value: String(props.value),
+				min: props.min,
+				max: props.max,
+				step: props.step,
+				onChange: (event) => props.onChange(Number(event.currentTarget.value))
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-xs leading-5 text-slate-500 dark:text-slate-400",
+				children: props.help
+			})
+		]
+	});
+}
+function ToggleField(props) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: "flex items-start gap-3 rounded-2xl border border-slate-200/70 bg-slate-50/80 p-3 dark:border-slate-800 dark:bg-slate-900/70",
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			className: "mt-1 size-4 rounded border-slate-300",
+			checked: props.checked,
+			onChange: (event) => props.onChange(event.currentTarget.checked)
+		}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+			className: "block text-sm font-medium text-slate-800 dark:text-slate-100",
+			children: props.label
+		}), /* @__PURE__ */ jsx("span", {
+			className: "mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400",
+			children: props.help
+		})] })]
+	});
+}
+function GraphSettingsPanel(props) {
+	if (!props.open) return null;
+	return /* @__PURE__ */ jsx(GraphSettingsPanelContent, { ...props }, JSON.stringify(props.settings));
+}
+function GraphSettingsPanelContent(props) {
+	const [draftSettings, setDraftSettings] = useState(props.settings);
+	const hasChanges = useMemo(() => !areGraphSettingsEqual(draftSettings, props.settings), [draftSettings, props.settings]);
+	const updateSetting = (key, value) => {
+		setDraftSettings({
+			...draftSettings,
+			[key]: value
+		});
+	};
+	const applyChanges = () => {
+		if (!hasChanges) return;
+		props.onSettingsChange(draftSettings);
+	};
+	const resetSettings = () => {
+		setDraftSettings(props.onReset());
+	};
+	return /* @__PURE__ */ jsx(FloatingPanel.Root, {
+		open: true,
+		defaultSize: {
+			width: 420,
+			height: 640
+		},
+		minSize: {
+			width: 360,
+			height: 520
+		},
+		persistRect: true,
+		lazyMount: true,
+		children: /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(FloatingPanel.Positioner, {
+			className: "z-50",
+			children: /* @__PURE__ */ jsxs(FloatingPanel.Content, {
+				className: "flex h-full flex-col overflow-hidden rounded-[24px] border border-slate-200 bg-white shadow-[0_24px_80px_-36px_rgba(15,23,42,0.75)] dark:border-slate-800 dark:bg-slate-950",
+				children: [/* @__PURE__ */ jsx(FloatingPanel.DragTrigger, { children: /* @__PURE__ */ jsxs(FloatingPanel.Header, {
+					className: "flex cursor-move items-center justify-between border-b border-slate-200 bg-slate-50/90 px-4 py-3 dark:border-slate-800 dark:bg-slate-900/80",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "rounded-xl bg-sky-100 p-2 text-sky-700 dark:bg-sky-500/15 dark:text-sky-300",
+							children: /* @__PURE__ */ jsx(Settings2, { className: "size-4" })
+						}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(FloatingPanel.Title, {
+							className: "text-sm font-semibold text-slate-900 dark:text-slate-100",
+							children: "Graph settings"
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-xs text-slate-500 dark:text-slate-400",
+							children: "Layout controls for cluster spacing, gravity, and legibility."
+						})] })]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsxs(Button, {
+								variant: "outline",
+								size: "sm",
+								onClick: resetSettings,
+								children: [/* @__PURE__ */ jsx(RotateCcw, { className: "size-4" }), "Reset"]
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								onClick: applyChanges,
+								disabled: !hasChanges,
+								children: "Apply"
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "icon",
+								onClick: () => props.onOpenChange(false),
+								children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+							})
+						]
+					})]
+				}) }), /* @__PURE__ */ jsx(FloatingPanel.Body, {
+					className: "flex-1 overflow-y-auto px-4 py-4",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "space-y-5",
+						children: [
+							/* @__PURE__ */ jsx(NumberField, {
+								label: "Iterations",
+								value: draftSettings.iterations,
+								min: 10,
+								max: 500,
+								step: 10,
+								onChange: (value) => updateSetting("iterations", Math.max(10, value || 10)),
+								help: "Higher values let ForceAtlas2 settle longer before the graph renders."
+							}),
+							/* @__PURE__ */ jsx(NumberField, {
+								label: "Gravity",
+								value: draftSettings.gravity,
+								min: 0,
+								max: 1500,
+								step: 1,
+								onChange: (value) => updateSetting("gravity", Math.max(0, value || 0)),
+								help: "Pulls nodes back toward the center. Lower gravity spreads clusters out more."
+							}),
+							/* @__PURE__ */ jsx(NumberField, {
+								label: "Scaling ratio",
+								value: draftSettings.scalingRatio,
+								min: 1,
+								max: 500,
+								step: 1,
+								onChange: (value) => updateSetting("scalingRatio", Math.max(1, value || 1)),
+								help: "Primary spacing control. Higher values increase separation between nodes and clusters."
+							}),
+							/* @__PURE__ */ jsx(NumberField, {
+								label: "Node size scale",
+								value: draftSettings.nodeSizeScale,
+								min: .5,
+								max: 4,
+								step: .1,
+								onChange: (value) => updateSetting("nodeSizeScale", Math.max(.5, Number(value.toFixed(1)) || 1)),
+								help: "Amplifies the node size derived from inbound edge count."
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "grid gap-3",
+								children: [
+									/* @__PURE__ */ jsx(ToggleField, {
+										label: "Strong gravity mode",
+										checked: draftSettings.strongGravityMode,
+										onChange: (checked) => updateSetting("strongGravityMode", checked),
+										help: "Keeps distant nodes from drifting too far out of frame."
+									}),
+									/* @__PURE__ */ jsx(ToggleField, {
+										label: "LinLog mode",
+										checked: draftSettings.linLogMode,
+										onChange: (checked) => updateSetting("linLogMode", checked),
+										help: "Often improves community separation in clustered graphs."
+									}),
+									/* @__PURE__ */ jsx(ToggleField, {
+										label: "Adjust sizes",
+										checked: draftSettings.adjustSizes,
+										onChange: (checked) => updateSetting("adjustSizes", checked),
+										help: "Uses node size during layout to reduce collisions."
+									}),
+									/* @__PURE__ */ jsx(ToggleField, {
+										label: "Outbound attraction distribution",
+										checked: draftSettings.outboundAttractionDistribution,
+										onChange: (checked) => updateSetting("outboundAttractionDistribution", checked),
+										help: "Balances attraction when hubs create too much pull."
+									}),
+									/* @__PURE__ */ jsx(ToggleField, {
+										label: "Hide cluster labels",
+										checked: draftSettings.hideClusterLabels,
+										onChange: (checked) => updateSetting("hideClusterLabels", checked),
+										help: "Useful when labels cover dense areas during exploration."
+									})
+								]
+							})
+						]
+					})
+				})]
+			})
+		}) })
+	});
+}
+//#endregion
+//#region src/routes/graph.tsx?tsr-split=component
+var Sigma = lazy(() => import("./modviz-sigma-XYxARWqd.js").then((module) => ({ default: module.ModvizSigma })));
+function GraphRoute() {
+	const bundle = useModvizBundle();
+	const search = Route$1.useSearch();
+	const navigate = Route$1.useNavigate();
+	const [settingsOpen, setSettingsOpen] = useState(false);
+	const [refreshNonce, setRefreshNonce] = useState(0);
+	const currentNodeId = useAtom(currentNodeIdAtom);
+	const isNodeDetailsOpen = useAtom(isNodeDetailsOpenAtom);
+	const selectedNodeIds = useAtom(selectedNodeIdsAtom);
+	if (!isModvizBundleReady(bundle)) return /* @__PURE__ */ jsx(ModvizLayout, {
+		title: "Bubble Graph",
+		description: "Force-directed cluster view for spatial exploration.",
+		children: /* @__PURE__ */ jsx(SetupView, { bundle })
+	});
+	const workspacePackageNames = useMemo(() => getWorkspacePackageNames(bundle.graph), [bundle.graph]);
+	const defaultLayoutSettings = useMemo(() => getDefaultGraphLayoutSettings(bundle.graph.nodes.length), [bundle.graph.nodes.length]);
+	const layoutSettings = useMemo(() => ({
+		adjustSizes: search.adjustSizes,
+		gravity: search.gravity,
+		hideClusterLabels: search.hideClusterLabels,
+		iterations: search.iterations,
+		linLogMode: search.linLogMode,
+		nodeSizeScale: search.nodeSizeScale,
+		outboundAttractionDistribution: search.outboundAttractionDistribution,
+		scalingRatio: search.scalingRatio,
+		strongGravityMode: search.strongGravityMode
+	}), [search]);
+	const scope = search.scope;
+	const externalGrouping = search.externalGrouping;
+	const filteredByScope = useMemo(() => filterNodesByScope(bundle.graph.nodes, workspacePackageNames, scope), [
+		bundle.graph.nodes,
+		scope,
+		workspacePackageNames
+	]);
+	const filteredNodes = useMemo(() => {
+		if (!search.cluster) return filteredByScope;
+		return filteredByScope.filter((node) => getNodeGroupingLabel(node, workspacePackageNames, externalGrouping) === search.cluster);
+	}, [
+		externalGrouping,
+		filteredByScope,
+		search.cluster,
+		workspacePackageNames
+	]);
+	const sigmaKey = useMemo(() => JSON.stringify({
+		cluster: search.cluster,
+		externalGrouping,
+		layoutSettings,
+		refreshNonce,
+		scope
+	}), [
+		externalGrouping,
+		layoutSettings,
+		refreshNonce,
+		scope,
+		search.cluster
+	]);
+	const updateSearch = (patch) => navigate({
+		replace: true,
+		search: (previous) => ({
+			...previous,
+			...patch
+		})
+	});
+	const setFocusedNode = (nodePath) => {
+		highlightedNodeIdAtom.set(nodePath);
+		currentNodeIdAtom.set(nodePath);
+		selectedNodeIdsAtom.set((prev) => nodePath ? prev.includes(nodePath) ? prev.filter((id) => id !== nodePath) : [...prev, nodePath] : []);
+	};
+	useEffect(() => {
+		if (!search.focus) return;
+		setFocusedNode(search.focus);
+	}, [search.focus]);
+	return /* @__PURE__ */ jsxs(ModvizLayout, {
+		title: "Bubble Graph",
+		description: "Force-directed cluster view for spatial exploration. Open this only when you need the full graph canvas, then tune spacing and gravity from the floating settings panel.",
+		actions: /* @__PURE__ */ jsxs(Button, {
+			variant: "outline",
+			onClick: () => setSettingsOpen(true),
+			children: [/* @__PURE__ */ jsx(Settings2, { className: "size-4" }), "Layout settings"]
+		}),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex h-[calc(100vh-14rem)] min-h-[680px] flex-col gap-4",
+			children: [
+				/* @__PURE__ */ jsxs("section", {
+					className: "flex flex-wrap items-center gap-2 rounded-[24px] 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: [[
+						["all", "All nodes"],
+						["workspace", "Monorepo only"],
+						["external", "node_modules only"]
+					].map(([value, label]) => /* @__PURE__ */ jsx(Button, {
+						variant: scope === value ? "default" : "outline",
+						size: "sm",
+						onClick: () => updateSearch({
+							scope: value,
+							cluster: ""
+						}),
+						children: label
+					}, value)), /* @__PURE__ */ jsxs("label", {
+						className: "ml-auto flex items-center gap-2 text-sm text-slate-600 dark:text-slate-300",
+						children: [/* @__PURE__ */ jsx("span", { children: "External grouping" }), /* @__PURE__ */ jsxs("select", {
+							className: "h-9 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+							value: externalGrouping,
+							onChange: (event) => updateSearch({
+								cluster: "",
+								externalGrouping: event.currentTarget.value
+							}),
+							children: [/* @__PURE__ */ jsx("option", {
+								value: "package",
+								children: "by package"
+							}), /* @__PURE__ */ jsx("option", {
+								value: "combined",
+								children: "single node_modules cluster"
+							})]
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("section", {
+					className: "flex flex-wrap items-center gap-3 rounded-[24px] 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("div", {
+							className: "min-w-[18rem] flex-1",
+							children: /* @__PURE__ */ jsx(GraphCommandMenu, {
+								nodes: filteredNodes,
+								onHighlight: (value) => {
+									if (!value) return highlightedNodeIdAtom.set(null);
+									highlightedNodeIdAtom.set(value);
+								},
+								onSelect: (value) => {
+									highlightedNodeIdAtom.set(null);
+									if (!value) {
+										setFocusedNode(null);
+										updateSearch({ focus: "" });
+										return;
+									}
+									setFocusedNode(value);
+									updateSearch({ focus: value });
+								}
+							})
+						}),
+						/* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							onClick: () => isNodeDetailsOpenAtom.set(true),
+							disabled: !currentNodeId,
+							children: [/* @__PURE__ */ jsx(Eye, { className: "size-4" }), isNodeDetailsOpen ? "Details open" : "Open details"]
+						}),
+						/* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							onClick: () => setFocusedNode(null),
+							disabled: selectedNodeIds.length === 0,
+							children: [
+								"Clear selection (",
+								selectedNodeIds.length,
+								")"
+							]
+						}),
+						/* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							onClick: () => setRefreshNonce((value) => value + 1),
+							children: [/* @__PURE__ */ jsx(RotateCcw, { className: "size-4" }), "Refresh canvas"]
+						}),
+						currentNodeId ? /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							onClick: () => {
+								setFocusedNode(null);
+								isNodeDetailsOpenAtom.set(false);
+								updateSearch({ focus: "" });
+							},
+							children: "Clear current node"
+						}) : null,
+						/* @__PURE__ */ jsxs("div", {
+							className: "text-sm text-slate-500 dark:text-slate-400",
+							children: [
+								filteredNodes.length,
+								" nodes, ",
+								bundle.graph.metadata.packages.length,
+								" workspace packages",
+								selectedNodeIds.length > 0 ? ` • ${selectedNodeIds.length} selected` : "",
+								currentNodeId ? ` • current ${currentNodeId.split("/").at(-1)}` : "",
+								search.cluster ? ` • filtered to ${search.cluster}` : ""
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("section", {
+					className: "min-h-0 flex-1 overflow-hidden rounded-[28px] border border-slate-200/70 bg-white/90 shadow-[0_20px_70px_-36px_rgba(15,23,42,0.55)] dark:border-slate-800 dark:bg-slate-950/70",
+					children: /* @__PURE__ */ jsx(Suspense, {
+						fallback: /* @__PURE__ */ jsx(LoadingState, {
+							label: "Loading graph…",
+							description: "Preparing the Sigma canvas and layout pass."
+						}),
+						children: /* @__PURE__ */ jsx(Sigma, {
+							output: {
+								...bundle.graph,
+								nodes: filteredNodes
+							},
+							entryNode: search.focus || bundle.graph.metadata.entrypoints[0],
+							externalGrouping,
+							layoutSettings,
+							packages: bundle.graph.metadata.packages,
+							nodes: filteredNodes
+						}, sigmaKey)
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx(GraphSettingsPanel, {
+			open: settingsOpen,
+			settings: layoutSettings,
+			onOpenChange: setSettingsOpen,
+			onSettingsChange: (nextSettings) => updateSearch(nextSettings),
+			onReset: () => {
+				updateSearch(defaultLayoutSettings);
+				return defaultLayoutSettings;
+			}
+		})]
+	});
+}
+//#endregion
+export { GraphRoute as component };

package/dist/server/assets/graph-DAGFGioS.js

@@ -0,0 +1,45 @@
+import { t as parseSearchParam } from "./search-params-BNApPgkX.js";
+import { createFileRoute, lazyRouteComponent } from "@tanstack/react-router";
+//#region src/components/graph/common/graph-layout-settings.ts
+var getDefaultGraphLayoutSettings = (nodeCount) => {
+	const densityFactor = Math.max(1, Math.sqrt(Math.max(nodeCount, 1)));
+	return {
+		iterations: Math.min(420, Math.max(220, Math.round(170 + densityFactor * 2.4))),
+		gravity: Number(Math.max(.15, Math.min(1.2, densityFactor / 90)).toFixed(2)),
+		scalingRatio: Math.min(220, Math.max(40, Math.round(28 + densityFactor * 2.6))),
+		strongGravityMode: false,
+		linLogMode: true,
+		adjustSizes: true,
+		outboundAttractionDistribution: true,
+		hideClusterLabels: false,
+		nodeSizeScale: .85
+	};
+};
+//#endregion
+//#region src/routes/graph.tsx
+var $$splitComponentImporter = () => import("./graph-C1G9H5O4.js");
+var validateGraphSearch = (search) => {
+	const defaults = getDefaultGraphLayoutSettings(3961);
+	return {
+		adjustSizes: parseSearchParam.boolean(search.adjustSizes, defaults.adjustSizes),
+		cluster: parseSearchParam.string(search.cluster),
+		externalGrouping: search.externalGrouping === "combined" ? "combined" : "package",
+		focus: parseSearchParam.string(search.focus),
+		gravity: parseSearchParam.number(search.gravity, defaults.gravity),
+		hideClusterLabels: parseSearchParam.boolean(search.hideClusterLabels, defaults.hideClusterLabels),
+		iterations: Math.round(parseSearchParam.number(search.iterations, defaults.iterations)),
+		linLogMode: parseSearchParam.boolean(search.linLogMode, defaults.linLogMode),
+		nodeSizeScale: parseSearchParam.number(search.nodeSizeScale, defaults.nodeSizeScale),
+		outboundAttractionDistribution: parseSearchParam.boolean(search.outboundAttractionDistribution, defaults.outboundAttractionDistribution),
+		scalingRatio: parseSearchParam.number(search.scalingRatio, defaults.scalingRatio),
+		scope: search.scope === "workspace" || search.scope === "external" ? search.scope : "all",
+		strongGravityMode: parseSearchParam.boolean(search.strongGravityMode, defaults.strongGravityMode)
+	};
+};
+var Route = createFileRoute("/graph")({
+	ssr: false,
+	validateSearch: validateGraphSearch,
+	component: lazyRouteComponent($$splitComponentImporter, "component")
+});
+//#endregion
+export { getDefaultGraphLayoutSettings as n, Route as t };