modviz 0.1.2

package/dist/server/assets/modviz-sigma-XYxARWqd.js

@@ -0,0 +1,1441 @@
+import { t as Flamegraph } from "./flamegraph-CdW-VG6I.js";
+import { a as PopoverTrigger, c as hoveredClusterNameAtom, i as PopoverContent, l as isNodeDetailsOpenAtom, n as GraphCommandMenuDialog, o as currentNodeIdAtom, r as Popover, s as highlightedNodeIdAtom, u as selectedNodeIdsAtom } from "./graph-command-menu-BV5GtOWx.js";
+import { t as cn } from "./utils-BQZm0uva.js";
+import { t as Button } from "./button-Bqnnid5i.js";
+import { t as Input } from "./input-C5r-hBix.js";
+import { i as TooltipTrigger, r as TooltipContent, t as Tooltip } from "./tooltip-Ck0DDfF7.js";
+import { c as getExternalPackageName, l as getNodeGroupingLabel } from "./modviz-data-CUyTorv0.js";
+import { n as getRandom, t as colors } from "./colors-DhAxrYua.js";
+import { t as LoadingState } from "./loading-state-CrvCWTtw.js";
+import { a as CommandInput, i as CommandGroup, o as CommandItem, r as CommandEmpty, s as CommandList, t as Command } from "./command-SdxShIbL.js";
+import * as React from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ControlsContainer, FullScreenControl, SigmaContainer, ZoomControl, useLoadGraph, useRegisterEvents, useSetSettings, useSigma } from "@react-sigma/core";
+import { MiniMap } from "@react-sigma/minimap";
+import { fitViewportToNodes } from "@sigma/utils";
+import { CheckIcon, ChevronDownIcon, ChevronRight, ChevronsUpDown, File, LocateFixed, RotateCcw } from "lucide-react";
+import { Dialog } from "@ark-ui/react/dialog";
+import { Portal } from "@ark-ui/react/portal";
+import { Tabs } from "@ark-ui/react/tabs";
+import { useAtom } from "@xstate/store/react";
+import { LuArrowDownFromLine, LuArrowRight, LuArrowUpToLine, LuBug, LuInfinity, LuMaximize, LuMinimize, LuOctagonMinus } from "react-icons/lu";
+import { useFilter } from "@ark-ui/react/locale";
+import { TreeView, createTreeCollection, useTreeView } from "@ark-ui/react/tree-view";
+import { ark } from "@ark-ui/react/factory";
+import { Select, createListCollection, selectAnatomy } from "@ark-ui/react/select";
+import { useWorkerLayoutForceAtlas2 } from "@react-sigma/layout-forceatlas2";
+import { useLayoutNoverlap } from "@react-sigma/layout-noverlap";
+import { DirectedGraph } from "graphology";
+//#region src/components/tree-view/basic.tsx
+var TreeNodeName = (props) => {
+	const { node } = props;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs(Tooltip, {
+			lazyMount: true,
+			children: [/* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsxs("span", {
+				className: cn("font-medium whitespace-nowrap", node.original.isBarrelFile && "underline decoration-amber-600 decoration-2", props.isCircular && "text-red-400"),
+				children: [
+					(node.original.isBarrelFile || props.isCircular) && "⚠️ ",
+					node.name,
+					node.original.isBarrelFile && ` (barrel ${node.original.exports.length} exports)`,
+					props.isCircular && " (circular)",
+					props.hasReachedMaxDepth && " (max depth reached)"
+				]
+			}) }), /* @__PURE__ */ jsx(TooltipContent, {
+				className: "max-w-[auto]",
+				children: props.visited?.size ? /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-2",
+					children: [
+						/* @__PURE__ */ jsx("span", { children: "Imported by:" }),
+						[...props.visited].map((nodeId, index) => /* @__PURE__ */ jsxs("span", {
+							className: cn(nodeId === node.id && "text-red-400"),
+							style: { paddingLeft: `${index * 10}px` },
+							children: [
+								"->",
+								" ",
+								nodeId
+							]
+						}, nodeId)),
+						/* @__PURE__ */ jsxs("span", {
+							className: "text-red-400",
+							style: { paddingLeft: `${[...props.visited].length * 10}px` },
+							children: [
+								"->",
+								" ",
+								node.id
+							]
+						})
+					]
+				}) : node.id
+			})]
+		}),
+		props.focusedNodeId !== node.id && /* @__PURE__ */ jsx(Button, {
+			className: "ml-auto",
+			variant: "ghost",
+			size: "icon",
+			onClickCapture: (e) => {
+				e.stopPropagation();
+				currentNodeIdAtom.set(node.id);
+				isNodeDetailsOpenAtom.set(true);
+			},
+			children: /* @__PURE__ */ jsx(LuArrowRight, { className: "text-slate-400" })
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			className: "ml-auto",
+			variant: "ghost",
+			size: "icon",
+			onClickCapture: (e) => {
+				e.stopPropagation();
+				console.log(node);
+			},
+			children: /* @__PURE__ */ jsx(LuBug, { className: "text-slate-400" })
+		})
+	] });
+};
+var TreeNode = (props) => {
+	const { node, indexPath } = props;
+	return /* @__PURE__ */ jsx(TreeView.NodeProvider, {
+		node,
+		indexPath,
+		children: node.children?.length ? /* @__PURE__ */ jsxs(TreeView.Branch, {
+			onClick: () => console.log(indexPath, node),
+			children: [/* @__PURE__ */ jsxs(TreeView.BranchControl, {
+				className: "group flex w-full items-center gap-2 rounded-lg py-0.5 text-sm font-medium whitespace-nowrap transition-all duration-200 hover:bg-slate-50 dark:hover:bg-slate-800/50 data-[state=open]:text-slate-900 dark:data-[state=open]:text-slate-100",
+				children: [/* @__PURE__ */ jsx(TreeView.BranchIndicator, {
+					className: "flex h-4 w-4 shrink-0 items-center justify-center",
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 text-slate-400 transition-transform duration-200 group-data-[state=open]:rotate-90 group-data-[state=open]:text-slate-600" })
+				}), /* @__PURE__ */ jsx(TreeView.BranchText, {
+					className: "flex items-center gap-2.5 text-slate-700 dark:text-slate-300 group-data-[state=open]:text-slate-900 dark:group-data-[state=open]:text-slate-100",
+					children: /* @__PURE__ */ jsx(TreeNodeName, {
+						node,
+						focusedNodeId: props.focusedNodeId
+					})
+				})]
+			}), /* @__PURE__ */ jsxs(TreeView.BranchContent, {
+				className: "ml-6 border-l border-slate-200 pl-2 dark:border-slate-700/60",
+				children: [/* @__PURE__ */ jsx(TreeView.BranchIndentGuide, {}), node.children.map((child, index) => props.visited.has(child.id) ? /* @__PURE__ */ jsxs(TreeView.Item, {
+					onClick: () => console.log([...indexPath, index], child),
+					className: "group flex w-full items-center gap-2 rounded-lg py-1 text-sm font-medium whitespace-nowrap transition-all duration-200 hover:bg-slate-50 dark:hover:bg-slate-800/50 data-[selected]:bg-blue-50 dark:data-[selected]:bg-blue-900/30 data-[selected]:text-blue-700 dark:data-[selected]:text-blue-300 data-[selected]:shadow-sm data-[selected]:ring-1 data-[selected]:ring-blue-200 dark:data-[selected]:ring-blue-800/30",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex h-4 w-4 shrink-0 items-center justify-center",
+						children: /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 rounded-full bg-slate-300 dark:bg-slate-600 group-data-[selected]:bg-blue-500" })
+					}), /* @__PURE__ */ jsxs(TreeView.ItemText, {
+						className: "flex items-center gap-2.5 text-slate-600 dark:text-slate-400 group-data-[selected]:text-blue-700 dark:group-data-[selected]:text-blue-300",
+						children: [/* @__PURE__ */ jsx(LuInfinity, { className: "h-4 w-4 text-slate-400 group-data-[selected]:text-blue-500" }), /* @__PURE__ */ jsx(TreeNodeName, {
+							node: child,
+							isCircular: true,
+							visited: props.visited,
+							focusedNodeId: props.focusedNodeId
+						})]
+					})]
+				}, child.id) : props.currentDepth >= props.maxDepth ? /* @__PURE__ */ jsxs(TreeView.Item, {
+					onClick: () => console.log([...indexPath, index], child),
+					className: "group flex w-full items-center gap-2 rounded-lg py-1 text-sm font-medium whitespace-nowrap transition-all duration-200 hover:bg-slate-50 dark:hover:bg-slate-800/50 data-[selected]:bg-blue-50 dark:data-[selected]:bg-blue-900/30 data-[selected]:text-blue-700 dark:data-[selected]:text-blue-300 data-[selected]:shadow-sm data-[selected]:ring-1 data-[selected]:ring-blue-200 dark:data-[selected]:ring-blue-800/30",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex h-4 w-4 shrink-0 items-center justify-center",
+						children: /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 rounded-full bg-slate-300 dark:bg-slate-600 group-data-[selected]:bg-blue-500" })
+					}), /* @__PURE__ */ jsxs(TreeView.ItemText, {
+						className: "flex items-center gap-2.5 text-slate-600 dark:text-slate-400 group-data-[selected]:text-blue-700 dark:group-data-[selected]:text-blue-300",
+						children: [/* @__PURE__ */ jsx(LuOctagonMinus, { className: "h-4 w-4 text-slate-400 group-data-[selected]:text-blue-500" }), /* @__PURE__ */ jsx(TreeNodeName, {
+							node: child,
+							hasReachedMaxDepth: true,
+							focusedNodeId: props.focusedNodeId
+						})]
+					})]
+				}, child.id) : /* @__PURE__ */ jsx(TreeNode, {
+					node: child,
+					indexPath: [...indexPath, index],
+					visited: new Set([...props.visited, child.id]),
+					currentDepth: props.currentDepth + 1,
+					maxDepth: props.maxDepth,
+					focusedNodeId: props.focusedNodeId
+				}, child.id))]
+			})]
+		}) : /* @__PURE__ */ jsxs(TreeView.Item, {
+			onClick: () => console.log(indexPath, node),
+			className: "group flex w-full items-center gap-2 rounded-lg py-1 text-sm font-medium whitespace-nowrap transition-all duration-200 hover:bg-slate-50 dark:hover:bg-slate-800/50 data-[selected]:bg-blue-50 dark:data-[selected]:bg-blue-900/30 data-[selected]:text-blue-700 dark:data-[selected]:text-blue-300 data-[selected]:shadow-sm data-[selected]:ring-1 data-[selected]:ring-blue-200 dark:data-[selected]:ring-blue-800/30",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex h-4 w-4 shrink-0 items-center justify-center",
+				children: /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 rounded-full bg-slate-300 dark:bg-slate-600 group-data-[selected]:bg-blue-500" })
+			}), /* @__PURE__ */ jsxs(TreeView.ItemText, {
+				className: "flex items-center gap-2.5 text-slate-600 dark:text-slate-400 group-data-[selected]:text-blue-700 dark:group-data-[selected]:text-blue-300",
+				children: [/* @__PURE__ */ jsx(File, { className: "h-4 w-4 text-slate-400 group-data-[selected]:text-blue-500" }), /* @__PURE__ */ jsx(TreeNodeName, {
+					node,
+					focusedNodeId: props.focusedNodeId
+				})]
+			})]
+		})
+	}, node.id);
+};
+function TreeViewBasic(props) {
+	const { contains } = useFilter({ sensitivity: "base" });
+	const [collection, setCollection] = useState(props.initialCollection);
+	const filter = (value) => {
+		setCollection(value.length > 0 ? collection.filter((node) => contains(node.name, value)) : props.initialCollection);
+	};
+	const treeView = useTreeView({
+		id: props.entryNodeId,
+		collection,
+		defaultExpandedValue: props.defaultExpandedValue ?? [props.entryNodeId],
+		selectedValue: []
+	});
+	const flattened = treeView.collection.flatten();
+	const visible = treeView.getVisibleNodes().map(({ node }) => node.id);
+	const flattenedUniqueNodeIds = new Set(flattened.map((node) => node.id));
+	const isAllExpanded = treeView.expandedValue.length === flattenedUniqueNodeIds.size;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full h-full min-h-0 flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ jsx(Input, {
+				placeholder: "Search",
+				onChange: (e) => filter(e.target.value)
+			}), /* @__PURE__ */ jsx("div", {
+				className: "ml-auto",
+				children: isAllExpanded ? /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					className: "px-2 py-1",
+					onClick: () => treeView.collapse(),
+					children: /* @__PURE__ */ jsx(LuArrowUpToLine, {
+						className: "h-4 w-4 text-slate-400",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: "Collapse all"
+						})
+					})
+				}) : /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					className: "px-2 py-1",
+					onClick: () => flattened.length <= 500 ? treeView.expand() : visible.length <= 500 ? treeView.expand(visible) : treeView.expand(visible.slice(0, 250)),
+					children: /* @__PURE__ */ jsx(LuArrowDownFromLine, {
+						className: "h-4 w-4 text-slate-400",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: "Expand all"
+						})
+					})
+				})
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "w-full h-full min-h-0 overflow-auto",
+			children: /* @__PURE__ */ jsx(TreeView.RootProvider, {
+				value: treeView,
+				lazyMount: true,
+				unmountOnExit: true,
+				children: /* @__PURE__ */ jsx(TreeView.Tree, { children: collection.rootNode.children?.map((node, index) => /* @__PURE__ */ jsx(TreeNode, {
+					node,
+					indexPath: [index],
+					visited: new Set([node.id]),
+					currentDepth: 0,
+					maxDepth: 100,
+					focusedNodeId: props.entryNodeId
+				}, node.id)) })
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/tree-view/map-modviz-output-to-tree-collection.ts
+function mapModvizOutputToImporteesTreeCollection(output, entryNodeId) {
+	const entryNode = output.nodes.find((node) => node.path === entryNodeId);
+	if (!entryNode) return null;
+	const rootNode = {
+		id: entryNodeId,
+		name: entryNode.name,
+		children: [],
+		original: entryNode
+	};
+	const allVisited = /* @__PURE__ */ new Set();
+	const stack = [{
+		nodePath: entryNodeId,
+		parent: rootNode,
+		visited: new Set([entryNodeId])
+	}];
+	const root = stack[0].parent;
+	while (stack.length > 0) {
+		const { nodePath, parent, visited } = stack.pop();
+		allVisited.add(nodePath);
+		const node = output.nodes.find((node) => node.path === nodePath);
+		if (!node) continue;
+		const currentTreeNode = {
+			id: node.path,
+			name: node.path.split("/").slice(-2).join("/"),
+			children: [],
+			original: node
+		};
+		if (parent.children) parent.children.push(currentTreeNode);
+		node.importees.forEach((importee) => {
+			if (visited.has(importee)) {
+				const importeeNode = output.nodes.find((node) => node.path === importee);
+				if (!importeeNode) return;
+				const importeeTreeNode = {
+					id: importeeNode.path,
+					name: importeeNode.path.split("/").slice(-2).join("/"),
+					children: [],
+					original: importeeNode
+				};
+				currentTreeNode.children.push(importeeTreeNode);
+				return;
+			}
+			visited.add(importee);
+			stack.push({
+				nodePath: importee,
+				parent: currentTreeNode,
+				visited: new Set([...visited, importee])
+			});
+		});
+	}
+	return {
+		visited: allVisited,
+		collection: createTreeCollection({
+			nodeToValue: (node) => node.id,
+			nodeToString: (node) => node.name,
+			rootNode: root
+		})
+	};
+}
+function mapModvizOutputToImportsChainTreeCollection(output, currentNodeId, direction = "from-current-node-to-entrypoint") {
+	const entryNode = output.nodes.find((node) => node.path === currentNodeId);
+	if (!entryNode) return null;
+	const chain = entryNode.chain.at(0) ?? [];
+	const importChain = direction === "from-entrypoint-to-current-node" ? chain : chain.reverse();
+	const rootId = importChain[0];
+	if (!rootId) return null;
+	const root = output.nodes.find((node) => node.path === rootId);
+	if (!root) return null;
+	const rootNode = {
+		id: rootId,
+		name: root.path.split("/").slice(-2).join("/"),
+		children: [],
+		original: root
+	};
+	let currentParent = rootNode;
+	for (const nodePath of importChain) {
+		const node = output.nodes.find((node) => node.path === nodePath);
+		if (!node) continue;
+		const treeNode = {
+			id: node.path,
+			name: node.path.split("/").slice(-2).join("/"),
+			children: [],
+			original: node
+		};
+		currentParent.children.push(treeNode);
+		currentParent = treeNode;
+	}
+	return createTreeCollection({
+		nodeToValue: (node) => node.id,
+		nodeToString: (node) => node.name,
+		rootNode
+	});
+}
+//#endregion
+//#region src/components/ui/select.tsx
+var parts = selectAnatomy.extendWith("separator").build();
+var SelectComponent = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Select.Root, {
+	ref,
+	...props
+}));
+SelectComponent.displayName = "Select";
+var Select$1 = SelectComponent;
+var SelectClearTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select.ClearTrigger, {
+	ref,
+	className: cn("absolute end-0 top-0 flex size-9 items-center justify-center rounded-md border border-transparent text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", className),
+	...props
+}));
+SelectClearTrigger.displayName = "SelectClearTrigger";
+var SelectContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Content, {
+	ref,
+	className: cn("relative w-full min-w-32 overflow-hidden rounded-md border border-input bg-popover p-1 text-popover-foreground shadow-lg", "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=left]:-translate-x-1 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 data-[placement=top]:-translate-y-1 data-[placement=right]:translate-x-1 data-[placement=bottom]:translate-y-1", className),
+	...props
+}) }));
+SelectContent.displayName = "SelectContent";
+Select.Context;
+var SelectControl = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select.Control, {
+	ref,
+	className: cn("relative flex min-h-[38px] rounded-md border border-input text-sm outline-none transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40", className),
+	...props
+}));
+SelectControl.displayName = "SelectControl";
+var SelectIndicator = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Select.Indicator, {
+	ref,
+	...props,
+	children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 shrink-0 in-aria-invalid:text-destructive/80 text-muted-foreground/80" })
+}));
+SelectIndicator.displayName = "SelectIndicator";
+var SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(Select.Item, {
+	ref,
+	className: cn("relative flex w-full cursor-default select-none items-center rounded py-1.5 ps-8 pe-2 text-sm outline-hidden data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50", className),
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "absolute start-2 flex size-3.5 items-center justify-center",
+		children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { size: 16 }) })
+	}), /* @__PURE__ */ jsx(Select.ItemText, { children })]
+}));
+SelectItem.displayName = "SelectItem";
+Select.ItemContext;
+Select.ItemGroup;
+var SelectItemGroupLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select.ItemGroupLabel, {
+	ref,
+	className: cn("py-1.5 ps-8 pe-2 font-medium text-muted-foreground text-xs", className),
+	...props
+}));
+SelectItemGroupLabel.displayName = "SelectItemGroupLabel";
+Select.ItemText;
+var SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select.Label, {
+	ref,
+	className: cn("select-none font-medium text-foreground text-sm leading-4 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", className),
+	...props
+}));
+SelectLabel.displayName = "SelectLabel";
+var SelectList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select.List, {
+	ref,
+	className: cn("max-h-[min(24rem,var(--available-height))] overflow-y-auto", className),
+	...props
+}));
+SelectList.displayName = "SelectList";
+Select.RootProvider;
+var SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ark.hr, {
+	ref,
+	...parts.separator.attrs,
+	className: cn("-mx-1 my-1 h-px bg-border", className),
+	...props
+}));
+SelectSeparator.displayName = "SelectSeparator";
+var SelectTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select.Trigger, {
+	ref,
+	className: cn("flex flex-1 items-center justify-between gap-1 bg-transparent px-3 py-2 outline-none outline-hidden placeholder:text-muted-foreground/70 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 data-[placeholder-shown]:text-muted-foreground", className),
+	...props
+}));
+SelectTrigger.displayName = "SelectTrigger";
+var SelectValueText = Select.ValueText;
+//#endregion
+//#region src/components/dialog/dialog.tsx
+function NodeDetailsModal(props) {
+	const isOpened = useAtom(isNodeDetailsOpenAtom);
+	const currentNodeId = useAtom(currentNodeIdAtom);
+	const node = currentNodeId ? props.output.nodes.find((candidate) => candidate.path === currentNodeId) : null;
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open: Boolean(isOpened && node),
+		onOpenChange: (details) => {
+			if (!details.open) isNodeDetailsOpenAtom.set(false);
+		},
+		lazyMount: true,
+		children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: "data-[state=open]:animate-backdrop-in data-[state=closed]:animate-backdrop-out fixed inset-0 z-50 bg-black/50 backdrop-blur-xs" }), /* @__PURE__ */ jsx(Dialog.Positioner, {
+			className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+			children: node && /* @__PURE__ */ jsx(NodeDetailsModalContent, {
+				node,
+				output: props.output,
+				entryNodeId: props.output.metadata.entrypoints.at(0)
+			})
+		})] })
+	});
+}
+var NodeDetailsModalContent = (props) => {
+	const [isMaximized, setIsMaximized] = useState(false);
+	const [viewMode, setViewMode] = useState("tree-search");
+	return /* @__PURE__ */ jsxs(Dialog.Content, {
+		className: "data-[state=open]:animate-dialog-in data-[state=closed]:animate-dialog-out relative w-full max-w-4xl h-[80vh] rounded-lg bg-white dark:bg-gray-900 shadow-lg flex flex-col",
+		style: {
+			width: isMaximized ? "95vw" : void 0,
+			maxWidth: isMaximized ? "95vw" : void 0,
+			height: isMaximized ? "95vh" : void 0,
+			maxHeight: isMaximized ? "95vh" : void 0
+		},
+		children: [
+			/* @__PURE__ */ jsxs(Dialog.Title, {
+				className: "relative flex gap-2 items-center text-lg font-semibold text-gray-900 dark:text-white p-4 border-b border-gray-200 dark:border-gray-700",
+				children: [
+					/* @__PURE__ */ jsx("span", { children: "Current node:" }),
+					/* @__PURE__ */ jsx("span", { children: props.node.path }),
+					/* @__PURE__ */ jsx("div", {
+						className: "ml-auto",
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							className: "px-2 py-1",
+							onClick: () => setIsMaximized((isMaximized) => !isMaximized),
+							children: isMaximized ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LuMinimize, { className: "h-4 w-4 text-slate-400" }), /* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: "Minimize"
+							})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LuMaximize, { className: "h-4 w-4 text-slate-400" }), /* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: "Maximize"
+							})] })
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "bg-white dark:bg-gray-800 w-full h-full min-h-0 px-4 py-6 rounded-xl flex flex-col",
+				children: /* @__PURE__ */ jsxs(Tabs.Root, {
+					className: "w-full h-full min-h-0 overflow-hidden flex flex-col",
+					defaultValue: "transitive-imports",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex w-full",
+							children: [/* @__PURE__ */ jsxs(Tabs.List, {
+								className: "flex gap-1 p-1 bg-gray-100 rounded-lg dark:bg-gray-700 mb-2",
+								children: [/* @__PURE__ */ jsx(Tabs.Trigger, {
+									value: "transitive-imports",
+									className: "w-fit px-4 py-2 text-sm font-medium text-gray-600 rounded-md transition-all data-selected:bg-white data-selected:text-gray-900 data-selected:shadow-sm dark:text-gray-300 dark:data-selected:bg-gray-800 dark:data-selected:text-gray-100",
+									children: "Transitive imports"
+								}), /* @__PURE__ */ jsx(Tabs.Trigger, {
+									value: "imports-chain",
+									className: "w-fit px-4 py-2 text-sm font-medium text-gray-600 rounded-md transition-all data-selected:bg-white data-selected:text-gray-900 data-selected:shadow-sm dark:text-gray-300 dark:data-selected:bg-gray-800 dark:data-selected:text-gray-100",
+									children: "Imports chains"
+								})]
+							}), /* @__PURE__ */ jsx("div", {
+								className: "relative z-50 ml-auto px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300",
+								children: /* @__PURE__ */ jsxs(Select$1, {
+									className: "min-w-64 *:not-first:mt-2",
+									value: [viewMode],
+									onValueChange: (details) => setViewMode(details.value.at(0)),
+									collection: viewModeCollection,
+									positioning: { sameWidth: true },
+									children: [/* @__PURE__ */ jsx(SelectControl, { children: /* @__PURE__ */ jsxs(SelectTrigger, { children: [/* @__PURE__ */ jsx(SelectValueText, { placeholder: "View mode" }), /* @__PURE__ */ jsx(SelectIndicator, {})] }) }), /* @__PURE__ */ jsx(SelectContent, { children: viewModeCollection.items.map((item) => /* @__PURE__ */ jsx(SelectItem, {
+										item,
+										children: item.label
+									}, item.value)) })]
+								})
+							})]
+						}),
+						/* @__PURE__ */ jsxs(Tabs.Content, {
+							value: "transitive-imports",
+							className: "w-full h-full min-h-0 text-gray-600 dark:text-gray-300",
+							children: [viewMode === "tree-search" && /* @__PURE__ */ jsx(TransitiveImportsTab, {
+								node: props.node,
+								output: props.output
+							}), viewMode === "flamegraph" && /* @__PURE__ */ jsx(Flamegraph, {
+								output: props.output,
+								entryNodeId: props.node.path
+							})]
+						}),
+						/* @__PURE__ */ jsx(Tabs.Content, {
+							value: "imports-chain",
+							className: "w-full h-full min-h-0 text-gray-600 dark:text-gray-300",
+							children: /* @__PURE__ */ jsx(ImportsChainTab, {
+								node: props.node,
+								output: props.output
+							})
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between text-xs p-2 border-t border-gray-200 dark:border-gray-700",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex gap-3",
+						children: ["Current node: ", /* @__PURE__ */ jsx("span", { children: props.node.path })]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-3",
+						children: ["Entrypoint: ", /* @__PURE__ */ jsx("span", { children: props.entryNodeId })]
+					})]
+				}), /* @__PURE__ */ jsx(Link, {
+					to: "/trace",
+					search: getNodeTraceSearch(props.node),
+					onClick: () => isNodeDetailsOpenAtom.set(false),
+					className: "rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-sky-50 hover:border-sky-300 hover:text-sky-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-sky-500/60 dark:hover:bg-sky-500/10 dark:hover:text-sky-200",
+					children: "Trace this node →"
+				})]
+			})
+		]
+	});
+};
+var getNodeTraceSearch = (node) => {
+	if (node.path.includes("node_modules")) return {
+		package: getExternalPackageName(node) ?? node.path,
+		node: "",
+		limit: 25
+	};
+	return {
+		node: node.path,
+		package: "",
+		limit: 25
+	};
+};
+var TransitiveImportsTab = (props) => {
+	const initialCollection = useMemo(() => mapModvizOutputToImporteesTreeCollection(props.output, props.node.path), [props.output, props.node.path]);
+	if (!initialCollection) return;
+	const transitiveImports = initialCollection.visited;
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
+		className: "h-full min-h-0 flex flex-col p-2 gap-2",
+		children: [/* @__PURE__ */ jsxs("span", {
+			onClick: () => console.log(props.node, initialCollection.collection.rootNode, initialCollection.visited),
+			children: [transitiveImports.size, " file imported (transitively) from current node"]
+		}), /* @__PURE__ */ jsx(TreeViewBasic, {
+			entryNodeId: props.node.path,
+			initialCollection: initialCollection.collection
+		}, props.node.path)]
+	}) });
+};
+var ImportsChainTab = (props) => {
+	const [direction, setDirection] = useState("from-entrypoint-to-current-node");
+	const initialCollection = useMemo(() => mapModvizOutputToImportsChainTreeCollection(props.output, props.node.path, direction), [
+		props.output,
+		props.node.path,
+		direction
+	]);
+	if (!initialCollection) return;
+	const chain = props.output.nodes.find((node) => node.path === props.node.path).chain.at(0) ?? [];
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
+		className: "h-full min-h-0 flex flex-col p-2 gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2 items-center",
+			children: [/* @__PURE__ */ jsxs("span", {
+				onClick: () => console.log(props.node, initialCollection.rootNode, chain),
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					"Reached",
+					" ",
+					direction === "from-entrypoint-to-current-node" ? "current node" : "entrypoint",
+					" ",
+					"after"
+				] }), /* @__PURE__ */ jsxs("span", { children: [
+					" ",
+					chain.length,
+					" imports"
+				] })]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "ml-auto",
+				children: /* @__PURE__ */ jsx(ImportsChainDirection, {
+					value: direction,
+					onValueChange: setDirection
+				})
+			})]
+		}), /* @__PURE__ */ jsx(TreeViewBasic, {
+			entryNodeId: props.node.path,
+			initialCollection,
+			defaultExpandedValue: chain
+		}, props.node.path + direction)]
+	}) });
+};
+var viewModeCollection = createListCollection({ items: [{
+	value: "tree-search",
+	label: "Tree search"
+}, {
+	value: "flamegraph",
+	label: "Flamegraph"
+}] });
+var directionCollection = createListCollection({ items: [{
+	value: "from-entrypoint-to-current-node",
+	label: "From entrypoint to current node"
+}, {
+	value: "from-current-node-to-entrypoint",
+	label: "From current node to entrypoint"
+}] });
+function ImportsChainDirection(props) {
+	return /* @__PURE__ */ jsxs(Select$1, {
+		className: "min-w-64 *:not-first:mt-2",
+		value: [props.value],
+		onValueChange: (details) => props.onValueChange(details.value.at(0)),
+		collection: directionCollection,
+		positioning: { sameWidth: true },
+		children: [/* @__PURE__ */ jsx(SelectControl, { children: /* @__PURE__ */ jsxs(SelectTrigger, { children: [/* @__PURE__ */ jsx(SelectValueText, { placeholder: "Direction" }), /* @__PURE__ */ jsx(SelectIndicator, {})] }) }), /* @__PURE__ */ jsx(SelectContent, { children: directionCollection.items.map((item) => /* @__PURE__ */ jsx(SelectItem, {
+			item,
+			children: item.label
+		}, item.value)) })]
+	});
+}
+//#endregion
+//#region src/components/graph/common/clamp.ts
+var clamp = (min, max, value) => {
+	return Math.min(Math.max(min, value), max);
+};
+//#endregion
+//#region src/components/graph/common/use-create-graph.ts
+var useCreateGraph = (props) => {
+	const workspacePackageNames = useMemo(() => new Set(props.packages.map((pkg) => pkg.name)), [props.packages]);
+	const clusterAnchors = useMemo(() => {
+		const spreadBase = Math.max(26, Math.sqrt(props.nodes.length) * .9);
+		const groups = Array.from(new Set(props.nodes.map((node) => getNodeGroupingLabel(node, workspacePackageNames, props.externalGrouping ?? "combined")))).sort((left, right) => left.localeCompare(right));
+		return new Map(groups.map((groupLabel, index) => {
+			const angle = index * 2.399963229728653;
+			const radius = spreadBase * Math.sqrt(index + 1);
+			return [groupLabel, {
+				x: Math.cos(angle) * radius,
+				y: Math.sin(angle) * radius
+			}];
+		}));
+	}, [
+		props.externalGrouping,
+		props.nodes,
+		workspacePackageNames
+	]);
+	const clusterColors = useMemo(() => {
+		const colorMap = /* @__PURE__ */ new Map();
+		const clusters = /* @__PURE__ */ new Set();
+		props.nodes.forEach((node) => {
+			clusters.add(getNodeGroupingLabel(node, workspacePackageNames, props.externalGrouping ?? "combined"));
+		});
+		let index = 0;
+		clusters.forEach((cluster) => {
+			colorMap.set(cluster, colors.list[++index] ?? colors.deterministic(cluster));
+		});
+		return colorMap;
+	}, [
+		props.externalGrouping,
+		props.nodes,
+		workspacePackageNames
+	]);
+	const edges = useMemo(() => {
+		const ids = /* @__PURE__ */ new Set();
+		props.nodes.forEach((node) => {
+			node.importedBy.forEach((importee) => {
+				ids.add(`${importee}->${node.path}`);
+			});
+		});
+		return {
+			ids,
+			list: Array.from(ids).map((edge) => {
+				const [source, target] = edge.split("->");
+				return {
+					source,
+					target
+				};
+			})
+		};
+	}, [props.nodes]);
+	return useCallback(() => {
+		const graph = new DirectedGraph();
+		const nodesMap = /* @__PURE__ */ new Map();
+		const nodeSizeScale = props.layoutSettings?.nodeSizeScale ?? 1;
+		props.nodes.forEach((node) => {
+			nodesMap.set(node.path, node);
+			const groupLabel = getNodeGroupingLabel(node, workspacePackageNames, props.externalGrouping ?? "combined");
+			const anchor = clusterAnchors.get(groupLabel) ?? {
+				x: 0,
+				y: 0
+			};
+			const clusterRadius = Math.max(12, Math.min(36, Math.sqrt(node.importedBy.length + 1) * 6));
+			const jitterX = (getRandom() - .5) * clusterRadius;
+			const jitterY = (getRandom() - .5) * clusterRadius;
+			const isEntry = props.entryNode === node.path;
+			const x = isEntry ? 0 : anchor.x + jitterX;
+			const y = isEntry ? 0 : anchor.y + jitterY;
+			const label = node.package && node.isBarrelFile ? `${node.package?.name}/${node.name}` : node.name;
+			graph.addNode(node.path, {
+				x,
+				y,
+				label,
+				originalLabel: label,
+				modType: node.type,
+				cluster: groupLabel,
+				clusterPath: node.package?.path ?? groupLabel,
+				color: clusterColors.get(groupLabel) ?? colors.default,
+				size: clamp(4, 18 * nodeSizeScale, Math.max(4, node.importedBy.length * nodeSizeScale)),
+				highlighted: false
+			});
+		});
+		edges.list.forEach((edge) => {
+			if (nodesMap.has(edge.source) && nodesMap.has(edge.target)) {
+				const sourceGroup = getNodeGroupingLabel(nodesMap.get(edge.source), workspacePackageNames, props.externalGrouping ?? "combined");
+				graph.addEdge(edge.source, edge.target, {
+					label: edge.source,
+					color: clusterColors.get(sourceGroup) ?? colors.default
+				});
+			}
+		});
+		return graph;
+	}, [
+		clusterAnchors,
+		clusterColors,
+		edges.list,
+		props.entryNode,
+		props.externalGrouping,
+		props.layoutSettings?.nodeSizeScale,
+		props.nodes,
+		workspacePackageNames
+	]);
+};
+//#endregion
+//#region src/components/graph/common/use-graph-settings.ts
+var useGraphSettings = () => {
+	const sigma = useSigma();
+	const setSettings = useSetSettings();
+	const registerEvents = useRegisterEvents();
+	const hoveredClusterName = useAtom(hoveredClusterNameAtom);
+	const selectedNodeIds = useAtom(selectedNodeIdsAtom);
+	const selectedNodeSet = useMemo(() => new Set(selectedNodeIds), [selectedNodeIds]);
+	const selectedVisibleNodeSet = useMemo(() => {
+		if (selectedNodeSet.size === 0) return /* @__PURE__ */ new Set();
+		const graph = sigma.getGraph();
+		const visible = new Set(selectedNodeIds);
+		for (const selectedNodeId of selectedNodeIds) {
+			if (!graph.hasNode(selectedNodeId)) continue;
+			for (const neighborId of graph.neighbors(selectedNodeId)) visible.add(neighborId);
+		}
+		return visible;
+	}, [
+		selectedNodeIds,
+		selectedNodeSet.size,
+		sigma
+	]);
+	const [hoveredNodeId, setHoveredNodeId] = useState(null);
+	useEffect(() => {
+		registerEvents({
+			enterNode: (event) => setHoveredNodeId(event.node),
+			leaveNode: () => setHoveredNodeId(null),
+			clickNode: (event) => {
+				currentNodeIdAtom.set(event.node);
+				highlightedNodeIdAtom.set(null);
+				selectedNodeIdsAtom.set((previous) => previous.includes(event.node) ? previous.filter((nodeId) => nodeId !== event.node) : [...previous, event.node]);
+			},
+			downStage: () => {
+				highlightedNodeIdAtom.set(null);
+			},
+			mousedown: () => {
+				if (!sigma.getCustomBBox()) sigma.setCustomBBox(sigma.getBBox());
+			}
+		});
+	}, [registerEvents, sigma]);
+	useEffect(() => {
+		setSettings({
+			autoCenter: true,
+			autoRescale: true,
+			zoomDuration: 150,
+			renderLabels: Boolean(hoveredNodeId || hoveredClusterName || selectedNodeSet.size > 0),
+			hideLabelsOnMove: true,
+			labelRenderedSizeThreshold: 8,
+			nodeReducer: (nodeId, node) => {
+				const graph = sigma.getGraph();
+				const isHoveredNode = nodeId === hoveredNodeId;
+				const updated = {
+					...node,
+					highlighted: node.highlighted || false
+				};
+				if (selectedNodeSet.size > 0) {
+					if (selectedNodeSet.has(nodeId)) {
+						updated.label = node.label;
+						updated.highlighted = true;
+						updated.size = node.size + clamp(2, 8, node.size * .15);
+					} else if (selectedVisibleNodeSet.has(nodeId)) {
+						updated.label = node.label;
+						updated.highlighted = true;
+					} else {
+						updated.color = colors.default;
+						updated.label = isHoveredNode ? node.label : "";
+						updated.highlighted = isHoveredNode;
+					}
+					if (isHoveredNode) {
+						updated.label = node.label;
+						updated.highlighted = true;
+						updated.size = node.size + clamp(4, 10, node.size * .25);
+					}
+					return updated;
+				}
+				if (hoveredNodeId && graph.hasNode(hoveredNodeId)) {
+					if (nodeId === hoveredNodeId) {
+						updated.label = node.label;
+						updated.size = node.size + clamp(4, 10, node.size * .25);
+					}
+					if (nodeId === hoveredNodeId || graph.neighbors(hoveredNodeId).includes(nodeId)) {
+						updated.label = node.label;
+						updated.highlighted = true;
+					} else {
+						updated.color = colors.default;
+						updated.highlighted = false;
+						updated.label = "";
+					}
+				} else if (hoveredClusterName) if (node.cluster === hoveredClusterName) {
+					updated.label = node.label;
+					updated.highlighted = true;
+				} else {
+					updated.color = colors.default;
+					updated.highlighted = false;
+					updated.label = "";
+				}
+				return updated;
+			},
+			edgeReducer: (edgeId, edge) => {
+				const graph = sigma.getGraph();
+				const updated = {
+					...edge,
+					hidden: true
+				};
+				if (selectedNodeSet.size > 0) {
+					const [source, target] = graph.extremities(edgeId);
+					if (selectedNodeSet.has(source) || selectedNodeSet.has(target)) {
+						updated.hidden = false;
+						updated.color = graph.getNodeAttribute(source, "color");
+					}
+					return updated;
+				}
+				if (hoveredNodeId && graph.extremities(edgeId).includes(hoveredNodeId)) {
+					const activeNode = graph.getNodeAttributes(hoveredNodeId);
+					updated.hidden = false;
+					updated.color = activeNode.color;
+				} else if (hoveredClusterName) {
+					const [source, target] = graph.extremities(edgeId);
+					const sourceNode = graph.getNodeAttributes(source);
+					const targetNode = graph.getNodeAttributes(target);
+					if (sourceNode.cluster === hoveredClusterName && targetNode.cluster === hoveredClusterName) {
+						updated.hidden = false;
+						updated.color = sourceNode.color;
+					}
+				}
+				return updated;
+			}
+		});
+	}, [
+		hoveredClusterName,
+		hoveredNodeId,
+		selectedNodeSet,
+		selectedVisibleNodeSet,
+		setSettings,
+		sigma
+	]);
+};
+//#endregion
+//#region src/components/graph/common/render-sigma-graph.tsx
+var SigmaGraph = (props) => {
+	const layout = useWorkerLayoutForceAtlas2(useMemo(() => ({
+		...props.layout,
+		settings: {
+			barnesHutOptimize: true,
+			slowDown: 8,
+			...props.layout?.settings,
+			gravity: props.layoutSettings.gravity,
+			scalingRatio: props.layoutSettings.scalingRatio,
+			strongGravityMode: props.layoutSettings.strongGravityMode,
+			linLogMode: props.layoutSettings.linLogMode,
+			adjustSizes: props.layoutSettings.adjustSizes,
+			outboundAttractionDistribution: props.layoutSettings.outboundAttractionDistribution
+		}
+	}), [
+		props.layout,
+		props.layoutSettings.adjustSizes,
+		props.layoutSettings.gravity,
+		props.layoutSettings.linLogMode,
+		props.layoutSettings.outboundAttractionDistribution,
+		props.layoutSettings.scalingRatio,
+		props.layoutSettings.strongGravityMode
+	]));
+	const noverlap = useLayoutNoverlap({
+		maxIterations: Math.min(240, Math.max(80, Math.round(props.layoutSettings.iterations / 2))),
+		settings: {
+			expansion: 1.2,
+			gridSize: 40,
+			margin: 6,
+			ratio: 1.4,
+			speed: 2
+		}
+	});
+	const createGraph = useCreateGraph(props);
+	const loadGraph = useLoadGraph();
+	const stopTimerRef = useRef(null);
+	const hasLoadedGraphRef = useRef(false);
+	const animationFrameRef = useRef(null);
+	const activeRunIdRef = useRef(0);
+	useGraphSettings();
+	const applyNoverlapSpacing = (runId) => {
+		if (activeRunIdRef.current !== runId) return;
+		noverlap.assign();
+	};
+	const stopLayoutAfterDelay = (delayMs, runId) => {
+		if (stopTimerRef.current != null) window.clearTimeout(stopTimerRef.current);
+		stopTimerRef.current = window.setTimeout(() => {
+			if (activeRunIdRef.current !== runId) return;
+			layout.stop();
+			applyNoverlapSpacing(runId);
+			stopTimerRef.current = null;
+			props.onBusyChange?.(false);
+		}, delayMs);
+	};
+	const cancelActiveUpdate = () => {
+		activeRunIdRef.current += 1;
+		if (animationFrameRef.current != null) {
+			window.cancelAnimationFrame(animationFrameRef.current);
+			animationFrameRef.current = null;
+		}
+		if (stopTimerRef.current != null) {
+			window.clearTimeout(stopTimerRef.current);
+			stopTimerRef.current = null;
+		}
+		layout.stop();
+		props.onBusyChange?.(false);
+	};
+	useEffect(() => {
+		const runId = activeRunIdRef.current + 1;
+		activeRunIdRef.current = runId;
+		animationFrameRef.current = window.requestAnimationFrame(() => {
+			animationFrameRef.current = null;
+			if (activeRunIdRef.current !== runId) return;
+			props.onBusyChange?.(true);
+			const graph = createGraph();
+			if (activeRunIdRef.current !== runId) return;
+			loadGraph(graph);
+			hasLoadedGraphRef.current = true;
+			layout.stop();
+			layout.start();
+			stopLayoutAfterDelay(Math.max(900, props.layoutSettings.iterations * 12), runId);
+		});
+		return () => {
+			if (activeRunIdRef.current === runId) cancelActiveUpdate();
+		};
+	}, [
+		createGraph,
+		layout.start,
+		layout.stop,
+		loadGraph,
+		props.layoutSettings.iterations,
+		props.onBusyChange
+	]);
+	useEffect(() => {
+		if (!hasLoadedGraphRef.current) return;
+		props.onBusyChange?.(true);
+		layout.stop();
+		layout.start();
+		stopLayoutAfterDelay(Math.max(900, props.layoutSettings.iterations * 12), activeRunIdRef.current);
+		return () => {
+			if (stopTimerRef.current != null) {
+				window.clearTimeout(stopTimerRef.current);
+				stopTimerRef.current = null;
+			}
+			layout.stop();
+			props.onBusyChange?.(false);
+		};
+	}, [
+		layout.start,
+		layout.stop,
+		props.layoutSettings.adjustSizes,
+		props.layoutSettings.gravity,
+		props.layoutSettings.iterations,
+		props.layoutSettings.linLogMode,
+		props.layoutSettings.outboundAttractionDistribution,
+		props.layoutSettings.scalingRatio,
+		props.layoutSettings.strongGravityMode,
+		props.onBusyChange
+	]);
+	useEffect(() => {
+		if (!props.cancelNonce) return;
+		cancelActiveUpdate();
+	}, [
+		props.cancelNonce,
+		layout.stop,
+		props.onBusyChange
+	]);
+	useEffect(() => {
+		return () => {
+			cancelActiveUpdate();
+			layout.stop();
+			layout.kill();
+		};
+	}, [layout.kill]);
+	return null;
+};
+//#endregion
+//#region src/utils/infer-paths-label.ts
+/**
+* Infers a label name for a group of files based on common directory patterns.
+* Analyzes file paths to find the most significant common directory segment.
+*
+* @param filePaths - Array of file paths to analyze
+* @returns The inferred group label or undefined if no clear pattern is found
+*
+* @example
+* inferGroupLabel([
+*   "apps/backend/src/commitments/use-cases/compute-timeline.use-case.ts",
+*   "apps/backend/src/commitments/use-cases/export-commitments.use-case.ts",
+*   "apps/backend/src/commitments/mappers/commitment.mapper.ts"
+* ]); // Returns "commitments"
+*/
+function inferPathsLabel(filePaths) {
+	if (!filePaths.length) return;
+	const allSegments = filePaths.map((path) => {
+		return path.split("/").filter((segment) => segment && segment !== "src" && segment !== "lib" && segment !== "dist" && segment !== "build" && !segment.includes("."));
+	});
+	const segmentFrequency = /* @__PURE__ */ new Map();
+	allSegments.forEach((segments) => {
+		segments.forEach((segment, index) => {
+			const current = segmentFrequency.get(segment) || {
+				count: 0,
+				positions: []
+			};
+			current.count++;
+			current.positions.push(index);
+			segmentFrequency.set(segment, current);
+		});
+	});
+	const genericNames = new Set([
+		"apps",
+		"packages",
+		"node_modules",
+		".pnpm",
+		"src",
+		"modules",
+		"components",
+		"utils",
+		"helpers",
+		"shared",
+		"common",
+		"core",
+		"base",
+		"types",
+		"interfaces",
+		"backend",
+		"frontend",
+		"client",
+		"server",
+		"api",
+		"web"
+	]);
+	let bestCandidate = {
+		segment: "",
+		score: 0
+	};
+	for (const [segment, data] of segmentFrequency) {
+		if (genericNames.has(segment)) continue;
+		const frequencyRatio = data.count / filePaths.length;
+		const avgPosition = data.positions.reduce((sum, pos) => sum + pos, 0) / data.positions.length;
+		const positionConsistency = 1 - (Math.max(...data.positions) - Math.min(...data.positions)) / 10;
+		const score = frequencyRatio * .6 + positionConsistency * .4 - avgPosition * .1;
+		if (score > bestCandidate.score && frequencyRatio >= .5) bestCandidate = {
+			segment,
+			score
+		};
+	}
+	if (!bestCandidate.segment) {
+		const pathSegments = findLongestCommonPath(filePaths).split("/").filter((s) => s && !s.includes("."));
+		for (let i = pathSegments.length - 1; i >= 0; i--) if (!genericNames.has(pathSegments[i])) {
+			bestCandidate.segment = pathSegments[i];
+			break;
+		}
+	}
+	return bestCandidate.segment || void 0;
+}
+/**
+* Finds the longest common path prefix among multiple file paths
+*/
+function findLongestCommonPath(paths) {
+	if (paths.length === 0) return "";
+	if (paths.length === 1) return paths[0];
+	const segments = paths.map((path) => path.split("/"));
+	const minLength = Math.min(...segments.map((s) => s.length));
+	let commonLength = 0;
+	for (let i = 0; i < minLength; i++) {
+		const segment = segments[0][i];
+		if (segments.every((s) => s[i] === segment)) commonLength = i + 1;
+		else break;
+	}
+	return segments[0].slice(0, commonLength).join("/");
+}
+//#endregion
+//#region src/components/graph/modviz-sigma.tsx
+var SIGMA_CONTAINER_SETTINGS = { allowInvalidContainer: true };
+var ModvizSigma = (props) => {
+	const [sigma, setSigma] = useState(null);
+	return /* @__PURE__ */ jsxs(SigmaContainer, {
+		ref: setSigma,
+		className: "relative h-full w-full",
+		settings: SIGMA_CONTAINER_SETTINGS,
+		children: [
+			/* @__PURE__ */ jsx(SigmaGraph, {
+				entryNode: props.entryNode,
+				externalGrouping: props.externalGrouping,
+				layoutSettings: props.layoutSettings,
+				packages: props.packages,
+				nodes: props.nodes,
+				cancelNonce: props.cancelNonce,
+				onBusyChange: props.onBusyChange
+			}),
+			props.isBusy ? /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 z-20 flex items-center justify-center bg-white/72 backdrop-blur-[1.5px] dark:bg-slate-950/72",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "pointer-events-auto flex min-w-[18rem] flex-col items-center gap-4 rounded-3xl border border-slate-200/80 bg-white/90 px-6 py-5 shadow-[0_18px_48px_-32px_rgba(15,23,42,0.65)] dark:border-slate-800 dark:bg-slate-950/90",
+					children: [/* @__PURE__ */ jsx(LoadingState, {
+						label: "Updating graph…",
+						description: "Rebuilding the dependency map and running the layout in the background.",
+						className: "min-h-0"
+					}), props.onCancelUpdate ? /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						onClick: props.onCancelUpdate,
+						children: "Cancel update"
+					}) : null]
+				})
+			}) : null,
+			sigma && /* @__PURE__ */ jsx(WithGraph, {
+				hideClusterLabels: props.layoutSettings.hideClusterLabels,
+				output: props.output,
+				sigma,
+				nodes: props.nodes,
+				externalGrouping: props.externalGrouping,
+				entryNode: props.entryNode
+			})
+		]
+	});
+};
+var WithGraph = (props) => {
+	const sigma = props.sigma;
+	const clusterMap = useClusterMap(sigma);
+	const clusterList = useClusterList(clusterMap);
+	const externalNodeIds = useMemo(() => props.nodes.filter((node) => node.path.includes("node_modules")).map((node) => node.path), [props.nodes]);
+	const visibleClusters = useMemo(() => clusterList.filter((cluster) => cluster.nodes.length > 5), [clusterList]);
+	useClusterLabelLayer(sigma, clusterMap, props.hideClusterLabels);
+	const graph = sigma.getGraph();
+	const nodes = graph.nodes();
+	const focusNodes = (nodeIds) => {
+		if (nodeIds.length === 0) return;
+		fitViewportToNodes(sigma, nodeIds, { animate: true });
+	};
+	const focusCluster = (clusterName) => {
+		focusNodes(graph.filterNodes((_, attrs) => attrs.cluster === clusterName));
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs(ControlsContainer, {
+			position: "bottom-right",
+			className: "mb-6",
+			children: [/* @__PURE__ */ jsx(ZoomControl, {}), /* @__PURE__ */ jsx(FullScreenControl, {})]
+		}),
+		/* @__PURE__ */ jsx(ControlsContainer, {
+			position: "top-left",
+			className: "z-10!",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex w-[18rem] flex-col gap-2 p-2 text-xs",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx(SidebarIconButton, {
+								label: `Reset view (${nodes.length} nodes)`,
+								onClick: () => focusNodes(nodes),
+								children: /* @__PURE__ */ jsx(RotateCcw, { className: "size-4" })
+							}),
+							props.entryNode ? /* @__PURE__ */ jsx(SidebarIconButton, {
+								label: "Focus entrypoint",
+								onClick: () => focusNodes(props.entryNode ? [props.entryNode] : []),
+								children: /* @__PURE__ */ jsx(LocateFixed, { className: "size-4" })
+							}) : null,
+							/* @__PURE__ */ jsx("div", {
+								className: "min-w-0 flex-1",
+								children: /* @__PURE__ */ jsx(ClusterCombobox, {
+									clusters: visibleClusters,
+									onFocusCluster: focusCluster
+								})
+							})
+						]
+					}),
+					props.externalGrouping === "package" && externalNodeIds.length ? /* @__PURE__ */ jsxs("button", {
+						className: "flex items-center gap-2 rounded-md bg-white px-2 py-1 hover:bg-gray-100",
+						onClick: () => focusNodes(externalNodeIds),
+						children: [
+							"node_modules (",
+							externalNodeIds.length,
+							")"
+						]
+					}) : null,
+					/* @__PURE__ */ jsx("div", {
+						className: "max-h-[300px] overflow-auto",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "flex flex-col gap-2 pr-1",
+							children: visibleClusters.map((cluster) => {
+								return /* @__PURE__ */ jsxs("button", {
+									title: cluster.path,
+									className: "flex items-center gap-2 rounded-md px-2 py-1 text-left hover:bg-gray-100",
+									onClick: () => focusCluster(cluster.name),
+									onMouseEnter: () => {
+										hoveredClusterNameAtom.set(cluster.name);
+									},
+									onMouseLeave: () => {
+										hoveredClusterNameAtom.set(null);
+									},
+									children: [
+										/* @__PURE__ */ jsx("div", {
+											className: "w-2 h-2",
+											style: { backgroundColor: cluster.color }
+										}),
+										cluster.inferredName || cluster.name,
+										"(",
+										cluster.nodes.length,
+										")"
+									]
+								}, cluster.name);
+							})
+						})
+					})
+				]
+			})
+		}),
+		/* @__PURE__ */ jsx(GraphCommandMenuDialog, {
+			nodes: props.nodes,
+			onHighlight: (value) => {
+				if (!value) return highlightedNodeIdAtom.set(null);
+				if (!props.nodes.find((node) => node.path === value)) return;
+				highlightedNodeIdAtom.set(value);
+			},
+			onSelect: (value) => {
+				highlightedNodeIdAtom.set(null);
+				if (!value) return currentNodeIdAtom.set(null);
+				if (!props.nodes.find((node) => node.path === value)) return;
+				currentNodeIdAtom.set(value);
+				selectedNodeIdsAtom.set((prev) => prev.includes(value) ? prev.filter((id) => id !== value) : [...prev, value]);
+			}
+		}),
+		/* @__PURE__ */ jsx(ControlsContainer, {
+			position: "bottom-left",
+			children: /* @__PURE__ */ jsx(MiniMap, {
+				width: "100px",
+				height: "100px"
+			})
+		}),
+		/* @__PURE__ */ jsx(NodeDetailsModal, { output: props.output })
+	] });
+};
+function SidebarIconButton(props) {
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			size: "icon",
+			variant: "outline",
+			onClick: props.onClick,
+			"aria-label": props.label,
+			children: props.children
+		})
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: props.label })] });
+}
+function ClusterCombobox(props) {
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				role: "combobox",
+				"aria-expanded": open,
+				className: "w-full justify-between",
+				children: ["Jump to cluster", /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 opacity-50" })]
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-[20rem] p-0",
+			align: "start",
+			children: /* @__PURE__ */ jsxs(Command, { children: [/* @__PURE__ */ jsx(CommandInput, { placeholder: "Search cluster groups..." }), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No cluster found." }), /* @__PURE__ */ jsx(CommandGroup, {
+				heading: "Cluster groups",
+				children: props.clusters.map((cluster) => /* @__PURE__ */ jsxs(CommandItem, {
+					value: `${cluster.inferredName || cluster.name} ${cluster.name} ${cluster.path}`,
+					onMouseEnter: () => hoveredClusterNameAtom.set(cluster.name),
+					onMouseLeave: () => hoveredClusterNameAtom.set(null),
+					onSelect: () => {
+						props.onFocusCluster(cluster.name);
+						setOpen(false);
+					},
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "size-2 rounded-sm",
+						style: { backgroundColor: cluster.color }
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-1 items-center justify-between gap-3",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: cluster.inferredName || cluster.name
+						}), /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-xs text-slate-500",
+							children: cluster.nodes.length
+						})]
+					})]
+				}, cluster.name))
+			})] })] })
+		})]
+	});
+}
+var useClusterMap = (sigma) => {
+	const [clusterMap, setClusterMap] = useState(() => /* @__PURE__ */ new Map());
+	useEffect(() => {
+		const listener = () => {
+			const map = /* @__PURE__ */ new Map();
+			map.clear();
+			sigma.getGraph().forEachNode((nodeId, attrs) => {
+				if (!attrs.cluster) return;
+				const cluster = map.get(attrs.cluster);
+				if (cluster) {
+					cluster.nodes.push(nodeId);
+					cluster.positions.push({
+						x: attrs.x,
+						y: attrs.y
+					});
+					cluster.isExternal = cluster.isExternal || attrs.modType === "external";
+					return;
+				}
+				map.set(attrs.cluster, {
+					name: attrs.cluster,
+					isExternal: attrs.modType === "external",
+					path: attrs.clusterPath ?? "",
+					nodes: [nodeId],
+					positions: [{
+						x: attrs.x,
+						y: attrs.y
+					}],
+					color: attrs.color
+				});
+			});
+			map.forEach((cluster) => {
+				if (!cluster.isExternal) {
+					const pathsLabel = inferPathsLabel(cluster.nodes.map((path) => path.replace(cluster.path, "")));
+					if (pathsLabel) cluster.inferredName = pathsLabel;
+				}
+				cluster.x = cluster.positions.reduce((acc, p) => acc + p.x, 0) / cluster.positions.length;
+				cluster.y = cluster.positions.reduce((acc, p) => acc + p.y, 0) / cluster.positions.length;
+			});
+			setClusterMap(map);
+		};
+		sigma.addListener("afterProcess", listener);
+		return () => {
+			sigma.removeListener("afterProcess", listener);
+		};
+	}, [sigma]);
+	return clusterMap;
+};
+var useClusterList = (clusterMap) => {
+	return useMemo(() => {
+		return Array.from(clusterMap.entries()).sort((a, b) => {
+			const res = b[1].nodes.length - a[1].nodes.length;
+			return res !== 0 ? res : a[0].localeCompare(b[0]);
+		}).map(([_name, cluster]) => cluster);
+	}, [clusterMap]);
+};
+var useClusterLabelLayer = (sigma, clusterMap, hideClusterLabels) => {
+	useEffect(() => {
+		const visibleClusters = Array.from(clusterMap.values()).filter((cluster) => cluster.nodes.length >= 8).sort((left, right) => right.nodes.length - left.nodes.length).slice(0, 24);
+		let layer = document.getElementById("cluster-label-layers");
+		const hasLayer = Boolean(layer);
+		if (!hasLayer) layer = document.createElement("div");
+		layer.id = "cluster-label-layers";
+		layer.dataset.hidden = hideClusterLabels ? "true" : void 0;
+		if (hideClusterLabels) layer.dataset.hidden = "true";
+		else delete layer.dataset.hidden;
+		layer.className = "absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden data-hidden:hidden";
+		let clusterLabelsDoms = "";
+		visibleClusters.forEach((cluster) => {
+			const viewportPos = sigma.graphToViewport(cluster);
+			const fontSize = clamp(14, 28, 10 + Math.log2(cluster.nodes.length) * 3);
+			clusterLabelsDoms += `<div id='${cluster.name}' class="absolute -translate-1/2 -translate-y-1/2 text-shadow-md font-semibold whitespace-nowrap" style="top:${viewportPos.y}px;left:${viewportPos.x}px;color:${cluster.color};font-size:${fontSize}px;background:color-mix(in srgb, white 78%, transparent);padding:2px 8px;border-radius:999px;backdrop-filter:blur(2px);opacity:0.92">${cluster.inferredName || cluster.name}</div>`;
+		});
+		layer.innerHTML = clusterLabelsDoms;
+		if (!hasLayer) {
+			const container = sigma.getContainer();
+			container.insertBefore(layer, container.querySelector(".sigma-hovers"));
+		}
+		const listener = () => {
+			visibleClusters.forEach((cluster) => {
+				const clusterLabel = document.getElementById(cluster.name);
+				if (clusterLabel) {
+					const viewportPos = sigma.graphToViewport(cluster);
+					clusterLabel.style.top = `${viewportPos.y}px`;
+					clusterLabel.style.left = `${viewportPos.x}px`;
+				}
+			});
+		};
+		sigma.on("afterRender", listener);
+		return () => {
+			sigma.off("afterRender", listener);
+		};
+	}, [
+		clusterMap,
+		hideClusterLabels,
+		sigma
+	]);
+};
+//#endregion
+export { ModvizSigma };