@aiready/visualizer 0.6.18 → 0.6.19

package/web/dist/assets/{index-ZdEvYTav.js → index-CkabxYJ5.js}

@@ -24895,7 +24895,7 @@ function superRefine(fn) {
 	return /* @__PURE__ */ _superRefine(fn);
 }
 //#endregion
-//#region ../../core/dist/chunk-RMH2TPAT.mjs
+//#region ../../core/dist/chunk-SQHS6PFL.mjs
 var LeadSource = /* @__PURE__ */ ((LeadSource2) => {
 	LeadSource2["ClawMoreHero"] = "clawmore-hero";
 	LeadSource2["ClawMoreWaitlist"] = "clawmore-waitlist";
@@ -28335,6 +28335,374 @@ function ScoreCircle({ score, progress: customProgress, isInView = true, size =
 	});
 }
 (0, import_react.createContext)(void 0);
+function pinNode(node) {
+	node.fx = node.x;
+	node.fy = node.y;
+}
+function unpinNode(node) {
+	node.fx = null;
+	node.fy = null;
+}
+function unpinAllNodes(nodes) {
+	nodes.forEach(unpinNode);
+}
+function useGraphZoom(svgRef, gRef, enableZoom, setTransform, transformRef) {
+	(0, import_react.useEffect)(() => {
+		if (!enableZoom || !svgRef.current || !gRef.current) return;
+		const svg = select_default$1(svgRef.current);
+		const g = select_default$1(gRef.current);
+		const zoom3 = zoom_default().scaleExtent([.1, 10]).on("zoom", (event) => {
+			g.attr("transform", event.transform);
+			transformRef.current = event.transform;
+			setTransform(event.transform);
+		});
+		svg.call(zoom3);
+		return () => {
+			svg.on(".zoom", null);
+		};
+	}, [
+		enableZoom,
+		svgRef,
+		gRef,
+		setTransform,
+		transformRef
+	]);
+}
+function useWindowDrag(enableDrag, svgRef, transformRef, dragActiveRef, dragNodeRef, onDragEnd) {
+	(0, import_react.useEffect)(() => {
+		if (!enableDrag) return;
+		const handleWindowMove = (event) => {
+			if (!dragActiveRef.current || !dragNodeRef.current) return;
+			const svg = svgRef.current;
+			if (!svg) return;
+			const rect = svg.getBoundingClientRect();
+			const t = transformRef.current;
+			const x = (event.clientX - rect.left - t.x) / t.k;
+			const y = (event.clientY - rect.top - t.y) / t.k;
+			dragNodeRef.current.fx = x;
+			dragNodeRef.current.fy = y;
+		};
+		const handleWindowUp = () => {
+			if (!dragActiveRef.current) return;
+			onDragEnd();
+			dragNodeRef.current = null;
+			dragActiveRef.current = false;
+		};
+		const handleWindowLeave = (event) => {
+			if (event.relatedTarget === null) handleWindowUp();
+		};
+		window.addEventListener("mousemove", handleWindowMove);
+		window.addEventListener("mouseup", handleWindowUp);
+		window.addEventListener("mouseout", handleWindowLeave);
+		window.addEventListener("blur", handleWindowUp);
+		return () => {
+			window.removeEventListener("mousemove", handleWindowMove);
+			window.removeEventListener("mouseup", handleWindowUp);
+			window.removeEventListener("mouseout", handleWindowLeave);
+			window.removeEventListener("blur", handleWindowUp);
+		};
+	}, [
+		enableDrag,
+		svgRef,
+		transformRef,
+		dragActiveRef,
+		dragNodeRef,
+		onDragEnd
+	]);
+}
+function useNodeInteractions(enableDrag, _nodes, _pinnedNodes, setPinnedNodes, restart, stop) {
+	return {
+		handleDragStart: (0, import_react.useCallback)((event, node) => {
+			if (!enableDrag) return;
+			event.preventDefault();
+			event.stopPropagation();
+			pinNode(node);
+			setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
+			stop();
+		}, [
+			enableDrag,
+			stop,
+			setPinnedNodes
+		]),
+		handleNodeDoubleClick: (0, import_react.useCallback)((event, node) => {
+			event.stopPropagation();
+			if (!enableDrag) return;
+			if (node.fx === null || node.fx === void 0) {
+				pinNode(node);
+				setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
+			} else {
+				unpinNode(node);
+				setPinnedNodes((prev) => {
+					const next = new Set(prev);
+					next.delete(node.id);
+					return next;
+				});
+			}
+			restart();
+		}, [
+			enableDrag,
+			restart,
+			setPinnedNodes
+		])
+	};
+}
+var DEFAULT_NODE_COLOR = "#64748b";
+var DEFAULT_NODE_SIZE = 10;
+var DEFAULT_LINK_COLOR = "#94a3b8";
+var DEFAULT_LINK_WIDTH = 1;
+var CIRCULAR_LAYOUT_RADIUS_RATIO = .35;
+var FIT_VIEW_PADDING = 40;
+var TRANSITION_DURATION_MS = 300;
+var PACKAGE_BOUNDARY_FILL = "rgba(148,163,184,0.06)";
+var PACKAGE_BOUNDARY_STROKE = "#475569";
+var PACKAGE_BOUNDARY_STROKE_WIDTH = 2;
+var PACKAGE_BOUNDARY_DASH = "6 6";
+var PACKAGE_LABEL_FONT_SIZE = 11;
+var PACKAGE_LABEL_COLOR = "#475569";
+function applyCircularLayout(nodes, width, height) {
+	const centerX = width / 2;
+	const centerY = height / 2;
+	const radius = Math.min(width, height) * CIRCULAR_LAYOUT_RADIUS_RATIO;
+	nodes.forEach((node, i) => {
+		const angle = 2 * Math.PI * i / nodes.length;
+		node.fx = centerX + Math.cos(angle) * radius;
+		node.fy = centerY + Math.sin(angle) * radius;
+		node.x = node.fx;
+		node.y = node.fy;
+	});
+}
+function applyHierarchicalLayout(nodes, width, height) {
+	const groups = /* @__PURE__ */ new Map();
+	nodes.forEach((n) => {
+		const key = n.packageGroup || n.group || "root";
+		if (!groups.has(key)) groups.set(key, []);
+		groups.get(key).push(n);
+	});
+	const groupArray = Array.from(groups.entries());
+	const cols = Math.ceil(Math.sqrt(groupArray.length));
+	const groupSpacingX = width * .8 / cols;
+	const groupSpacingY = height * .8 / Math.ceil(groupArray.length / cols);
+	groupArray.forEach(([groupKey, groupNodes], gi) => {
+		const col = gi % cols;
+		const row = Math.floor(gi / cols);
+		const groupX = (col + .5) * groupSpacingX;
+		const groupY = (row + .5) * groupSpacingY;
+		if (groupKey.startsWith("pkg:") || groupKey === groupKey) groupNodes.forEach((n, ni) => {
+			const angle = 2 * Math.PI * ni / groupNodes.length;
+			const r = Math.min(80, 20 + groupNodes.length * 8);
+			n.fx = groupX + Math.cos(angle) * r;
+			n.fy = groupY + Math.sin(angle) * r;
+			n.x = n.fx;
+			n.y = n.fy;
+		});
+	});
+}
+function applyInitialForceLayout(nodes, width, height) {
+	nodes.forEach((node) => {
+		if (node.fx === void 0 || node.fx === null) {
+			node.x = Math.random() * width;
+			node.y = Math.random() * height;
+		}
+	});
+}
+function useGraphLayout(initialNodes, width, height, layout, restart) {
+	const nodes = (0, import_react.useMemo)(() => {
+		if (!initialNodes || !initialNodes.length) return initialNodes;
+		const copy = initialNodes.map((n) => ({ ...n }));
+		if (layout === "circular") applyCircularLayout(copy, width, height);
+		else if (layout === "hierarchical") applyHierarchicalLayout(copy, width, height);
+		else applyInitialForceLayout(copy, width, height);
+		return copy;
+	}, [
+		initialNodes,
+		width,
+		height,
+		layout
+	]);
+	(0, import_react.useEffect)(() => {
+		if (!nodes || nodes.length === 0) return;
+		if (layout === "circular") applyCircularLayout(nodes, width, height);
+		else if (layout === "hierarchical") applyHierarchicalLayout(nodes, width, height);
+		restart();
+	}, [
+		layout,
+		nodes,
+		width,
+		height,
+		restart
+	]);
+	return { nodes };
+}
+function useSimulationControls() {
+	return {
+		restart: (0, import_react.useCallback)(() => {}, []),
+		stop: (0, import_react.useCallback)(() => {}, []),
+		setForcesEnabled: (0, import_react.useCallback)((enabled) => {}, [])
+	};
+}
+function useImperativeHandleMethods({ nodes, pinnedNodes, setPinnedNodes, restart, width, height, layout, handleLayoutChange, svgRef, gRef, setTransform, internalDragEnabledRef }) {
+	return {
+		pinAll: (0, import_react.useCallback)(() => {
+			const newPinned = /* @__PURE__ */ new Set();
+			nodes.forEach((node) => {
+				pinNode(node);
+				newPinned.add(node.id);
+			});
+			setPinnedNodes(newPinned);
+			restart();
+		}, [
+			nodes,
+			setPinnedNodes,
+			restart
+		]),
+		unpinAll: (0, import_react.useCallback)(() => {
+			unpinAllNodes(nodes);
+			setPinnedNodes(/* @__PURE__ */ new Set());
+			restart();
+		}, [
+			nodes,
+			setPinnedNodes,
+			restart
+		]),
+		resetLayout: (0, import_react.useCallback)(() => {
+			unpinAllNodes(nodes);
+			setPinnedNodes(/* @__PURE__ */ new Set());
+			restart();
+		}, [
+			nodes,
+			setPinnedNodes,
+			restart
+		]),
+		fitView: (0, import_react.useCallback)(() => {
+			if (!svgRef.current || !nodes.length) return;
+			let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+			nodes.forEach((node) => {
+				if (node.x !== void 0 && node.y !== void 0) {
+					const size = node.size || DEFAULT_NODE_SIZE;
+					minX = Math.min(minX, node.x - size);
+					maxX = Math.max(maxX, node.x + size);
+					minY = Math.min(minY, node.y - size);
+					maxY = Math.max(maxY, node.y + size);
+				}
+			});
+			if (!isFinite(minX)) return;
+			const scale = Math.min((width - FIT_VIEW_PADDING * 2) / (maxX - minX), (height - FIT_VIEW_PADDING * 2) / (maxY - minY), 10);
+			const x = width / 2 - (minX + maxX) / 2 * scale;
+			const y = height / 2 - (minY + maxY) / 2 * scale;
+			if (gRef.current && svgRef.current) {
+				const svg = select_default$1(svgRef.current);
+				const newTransform = identity.translate(x, y).scale(scale);
+				svg.transition().duration(TRANSITION_DURATION_MS).call(zoom_default().transform, newTransform);
+				setTransform(newTransform);
+			}
+		}, [
+			nodes,
+			width,
+			height,
+			svgRef,
+			gRef,
+			setTransform
+		]),
+		getPinnedNodes: (0, import_react.useCallback)(() => Array.from(pinnedNodes), [pinnedNodes]),
+		setDragMode: (0, import_react.useCallback)((enabled) => {
+			internalDragEnabledRef.current = enabled;
+		}, [internalDragEnabledRef]),
+		setLayout: (0, import_react.useCallback)((newLayout) => {
+			handleLayoutChange(newLayout);
+		}, [handleLayoutChange]),
+		getLayout: (0, import_react.useCallback)(() => layout, [layout])
+	};
+}
+var ControlButton = ({ onClick, active = false, icon, label, disabled = false }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+	className: "relative group",
+	children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+		onClick,
+		disabled,
+		className: cn("p-2 rounded-lg transition-all duration-200", active ? "bg-blue-500 text-white shadow-md hover:bg-blue-600" : "bg-gray-100 text-gray-700 hover:bg-gray-200", disabled && "opacity-50 cursor-not-allowed hover:bg-gray-100", "dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:active:bg-blue-600"),
+		title: label,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: "text-lg",
+			children: icon
+		})
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-50",
+		children: label
+	})]
+});
+var GraphControls = ({ dragEnabled = true, onDragToggle, manualLayout = false, onManualLayoutToggle, onPinAll, onUnpinAll, onReset, onFitView, pinnedCount = 0, totalNodes = 0, visible = true, position = "top-left", className }) => {
+	if (!visible) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: cn("fixed z-40 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2 border border-gray-200 dark:border-gray-700", {
+			"top-left": "top-4 left-4",
+			"top-right": "top-4 right-4",
+			"bottom-left": "bottom-4 left-4",
+			"bottom-right": "bottom-4 right-4"
+		}[position], className),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-2",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, {
+					onClick: () => onDragToggle?.(!dragEnabled),
+					active: dragEnabled,
+					icon: "✋",
+					label: dragEnabled ? "Drag enabled" : "Drag disabled"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, {
+					onClick: () => onManualLayoutToggle?.(!manualLayout),
+					active: manualLayout,
+					icon: "🔧",
+					label: manualLayout ? "Manual layout: ON" : "Manual layout: OFF"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-8 h-px bg-gray-300 dark:bg-gray-600 mx-auto my-1" }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex gap-1",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, {
+						onClick: () => onPinAll?.(),
+						disabled: totalNodes === 0,
+						icon: "📌",
+						label: `Pin all nodes (${totalNodes})`
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, {
+						onClick: () => onUnpinAll?.(),
+						disabled: pinnedCount === 0,
+						icon: "📍",
+						label: `Unpin all (${pinnedCount} pinned)`
+					})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-8 h-px bg-gray-300 dark:bg-gray-600 mx-auto my-1" }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, {
+					onClick: () => onFitView?.(),
+					disabled: totalNodes === 0,
+					icon: "🎯",
+					label: "Fit all nodes in view"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, {
+					onClick: () => onReset?.(),
+					disabled: totalNodes === 0,
+					icon: "↺",
+					label: "Reset to auto-layout"
+				})
+			]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-600 dark:text-gray-400",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "whitespace-nowrap",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Nodes:" }),
+					" ",
+					totalNodes
+				]
+			}), pinnedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "whitespace-nowrap",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Pinned:" }),
+					" ",
+					pinnedCount
+				]
+			})]
+		})]
+	});
+};
+GraphControls.displayName = "GraphControls";
 var NodeItem = ({ node, isSelected, isHovered, pinned, defaultNodeSize, defaultNodeColor, showLabel = true, onClick, onDoubleClick, onMouseEnter, onMouseLeave, onMouseDown }) => {
 	const nodeSize = node.size || defaultNodeSize;
 	const nodeColor = node.color || defaultNodeColor;
@@ -28427,19 +28795,6 @@ var LinkItem = ({ link, onClick, defaultWidth, showLabel = true, nodes = [] }) =
 	})] });
 };
 var LinkItem_default = LinkItem;
-var DEFAULT_NODE_COLOR = "#64748b";
-var DEFAULT_NODE_SIZE = 10;
-var DEFAULT_LINK_COLOR = "#94a3b8";
-var DEFAULT_LINK_WIDTH = 1;
-var CIRCULAR_LAYOUT_RADIUS_RATIO = .35;
-var FIT_VIEW_PADDING = 40;
-var TRANSITION_DURATION_MS = 300;
-var PACKAGE_BOUNDARY_FILL = "rgba(148,163,184,0.06)";
-var PACKAGE_BOUNDARY_STROKE = "#475569";
-var PACKAGE_BOUNDARY_STROKE_WIDTH = 2;
-var PACKAGE_BOUNDARY_DASH = "6 6";
-var PACKAGE_LABEL_FONT_SIZE = 11;
-var PACKAGE_LABEL_COLOR = "#475569";
 var PackageBoundaries = ({ packageBounds }) => {
 	if (!packageBounds || Object.keys(packageBounds).length === 0) return null;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
@@ -28466,128 +28821,59 @@ var PackageBoundaries = ({ packageBounds }) => {
 	});
 };
 PackageBoundaries.displayName = "PackageBoundaries";
-function applyCircularLayout(nodes, width, height) {
-	const centerX = width / 2;
-	const centerY = height / 2;
-	const radius = Math.min(width, height) * CIRCULAR_LAYOUT_RADIUS_RATIO;
-	nodes.forEach((node, i) => {
-		const angle = 2 * Math.PI * i / nodes.length;
-		node.fx = centerX + Math.cos(angle) * radius;
-		node.fy = centerY + Math.sin(angle) * radius;
-		node.x = node.fx;
-		node.y = node.fy;
-	});
-}
-function applyHierarchicalLayout(nodes, width, height) {
-	const groups = /* @__PURE__ */ new Map();
-	nodes.forEach((n) => {
-		const key = n.packageGroup || n.group || "root";
-		if (!groups.has(key)) groups.set(key, []);
-		groups.get(key).push(n);
-	});
-	const groupArray = Array.from(groups.entries());
-	const cols = Math.ceil(Math.sqrt(groupArray.length));
-	const groupSpacingX = width * .8 / cols;
-	const groupSpacingY = height * .8 / Math.ceil(groupArray.length / cols);
-	groupArray.forEach(([groupKey, groupNodes], gi) => {
-		const col = gi % cols;
-		const row = Math.floor(gi / cols);
-		const groupX = (col + .5) * groupSpacingX;
-		const groupY = (row + .5) * groupSpacingY;
-		if (groupKey.startsWith("pkg:") || groupKey === groupKey) groupNodes.forEach((n, ni) => {
-			const angle = 2 * Math.PI * ni / groupNodes.length;
-			const r = Math.min(80, 20 + groupNodes.length * 8);
-			n.fx = groupX + Math.cos(angle) * r;
-			n.fy = groupY + Math.sin(angle) * r;
-			n.x = n.fx;
-			n.y = n.fy;
-		});
-	});
-}
-function applyInitialForceLayout(nodes, width, height) {
-	nodes.forEach((node) => {
-		if (node.fx === void 0 || node.fx === null) {
-			node.x = Math.random() * width;
-			node.y = Math.random() * height;
-		}
-	});
-}
-function useGraphZoom(svgRef, gRef, enableZoom, setTransform, transformRef) {
-	(0, import_react.useEffect)(() => {
-		if (!enableZoom || !svgRef.current || !gRef.current) return;
-		const svg = select_default$1(svgRef.current);
-		const g = select_default$1(gRef.current);
-		const zoom3 = zoom_default().scaleExtent([.1, 10]).on("zoom", (event) => {
-			g.attr("transform", event.transform);
-			transformRef.current = event.transform;
-			setTransform(event.transform);
-		});
-		svg.call(zoom3);
-		return () => {
-			svg.on(".zoom", null);
-		};
-	}, [
-		enableZoom,
-		svgRef,
-		gRef,
-		setTransform,
-		transformRef
-	]);
-}
-function useWindowDrag(enableDrag, svgRef, transformRef, dragActiveRef, dragNodeRef, onDragEnd) {
-	(0, import_react.useEffect)(() => {
-		if (!enableDrag) return;
-		const handleWindowMove = (event) => {
-			if (!dragActiveRef.current || !dragNodeRef.current) return;
-			const svg = svgRef.current;
-			if (!svg) return;
-			const rect = svg.getBoundingClientRect();
-			const t = transformRef.current;
-			const x = (event.clientX - rect.left - t.x) / t.k;
-			const y = (event.clientY - rect.top - t.y) / t.k;
-			dragNodeRef.current.fx = x;
-			dragNodeRef.current.fy = y;
-		};
-		const handleWindowUp = () => {
-			if (!dragActiveRef.current) return;
-			onDragEnd();
-			dragNodeRef.current = null;
-			dragActiveRef.current = false;
-		};
-		const handleWindowLeave = (event) => {
-			if (event.relatedTarget === null) handleWindowUp();
-		};
-		window.addEventListener("mousemove", handleWindowMove);
-		window.addEventListener("mouseup", handleWindowUp);
-		window.addEventListener("mouseout", handleWindowLeave);
-		window.addEventListener("blur", handleWindowUp);
-		return () => {
-			window.removeEventListener("mousemove", handleWindowMove);
-			window.removeEventListener("mouseup", handleWindowUp);
-			window.removeEventListener("mouseout", handleWindowLeave);
-			window.removeEventListener("blur", handleWindowUp);
-		};
-	}, [
-		enableDrag,
-		svgRef,
-		transformRef,
-		dragActiveRef,
-		dragNodeRef,
-		onDragEnd
-	]);
-}
-function pinNode(node) {
-	node.fx = node.x;
-	node.fy = node.y;
-}
-function unpinNode(node) {
-	node.fx = null;
-	node.fy = null;
-}
-function unpinAllNodes(nodes) {
-	nodes.forEach(unpinNode);
-}
-var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, links: initialLinks, width, height, enableZoom = true, enableDrag = true, onNodeClick, onNodeHover, onLinkClick, selectedNodeId, hoveredNodeId, defaultNodeColor = DEFAULT_NODE_COLOR, defaultNodeSize = DEFAULT_NODE_SIZE, defaultLinkColor = DEFAULT_LINK_COLOR, defaultLinkWidth = DEFAULT_LINK_WIDTH, showNodeLabels = true, showLinkLabels = false, className, manualLayout = false, onManualLayoutChange, packageBounds, layout: externalLayout, onLayoutChange }, ref) => {
+var GraphCanvas = ({ svgRef, gRef, width, height, className, nodes, links, pinnedNodes, selectedNodeId, hoveredNodeId, defaultNodeColor = DEFAULT_NODE_COLOR, defaultNodeSize = DEFAULT_NODE_SIZE, defaultLinkColor = DEFAULT_LINK_COLOR, defaultLinkWidth = DEFAULT_LINK_WIDTH, showNodeLabels = true, showLinkLabels = false, onNodeClick, onNodeHover, onLinkClick, packageBounds, handleNodeDoubleClick, handleDragStart, restart, setPinnedNodes }) => {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
+		ref: svgRef,
+		width,
+		height,
+		className: cn("bg-white dark:bg-gray-900", className),
+		onDoubleClick: () => {
+			unpinAllNodes(nodes);
+			setPinnedNodes(/* @__PURE__ */ new Set());
+			restart();
+		},
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("marker", {
+			id: "arrow",
+			viewBox: "0 0 10 10",
+			refX: "20",
+			refY: "5",
+			markerWidth: "6",
+			markerHeight: "6",
+			orient: "auto",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+				d: "M 0 0 L 10 5 L 0 10 z",
+				fill: defaultLinkColor
+			})
+		}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+			ref: gRef,
+			children: [
+				links.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LinkItem_default, {
+					link,
+					onClick: onLinkClick,
+					defaultWidth: defaultLinkWidth,
+					showLabel: showLinkLabels,
+					nodes
+				}, `link-${i}`)),
+				nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NodeItem_default, {
+					node,
+					isSelected: selectedNodeId === node.id,
+					isHovered: hoveredNodeId === node.id,
+					pinned: pinnedNodes.has(node.id),
+					defaultNodeSize,
+					defaultNodeColor,
+					showLabel: showNodeLabels,
+					onClick: onNodeClick,
+					onDoubleClick: handleNodeDoubleClick,
+					onMouseEnter: (n) => onNodeHover?.(n),
+					onMouseLeave: () => onNodeHover?.(null),
+					onMouseDown: handleDragStart
+				}, node.id)),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PackageBoundaries, { packageBounds: packageBounds || {} })
+			]
+		})]
+	});
+};
+var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, links: initialLinks, width, height, enableZoom = true, enableDrag = true, onNodeClick, onNodeHover, onLinkClick, selectedNodeId, hoveredNodeId, defaultNodeColor, defaultNodeSize, defaultLinkColor, defaultLinkWidth, showNodeLabels, showLinkLabels, className, manualLayout = false, onManualLayoutChange, packageBounds, layout: externalLayout, onLayoutChange }, ref) => {
 	const svgRef = (0, import_react.useRef)(null);
 	const gRef = (0, import_react.useRef)(null);
 	const [transform, setTransform] = (0, import_react.useState)({
@@ -28611,91 +28897,28 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 	(0, import_react.useEffect)(() => {
 		internalDragEnabledRef.current = enableDrag;
 	}, [enableDrag]);
-	const nodes = import_react.useMemo(() => {
-		if (!initialNodes || !initialNodes.length) return initialNodes;
-		const copy = initialNodes.map((n) => ({ ...n }));
-		if (layout === "circular") applyCircularLayout(copy, width, height);
-		else if (layout === "hierarchical") applyHierarchicalLayout(copy, width, height);
-		else applyInitialForceLayout(copy, width, height);
-		return copy;
-	}, [
-		initialNodes,
-		width,
-		height,
-		layout
-	]);
-	const restart = import_react.useCallback(() => {}, []);
-	const stop = import_react.useCallback(() => {}, []);
-	const setForcesEnabled = import_react.useCallback((enabled) => {}, []);
-	(0, import_react.useEffect)(() => {
-		if (!nodes || nodes.length === 0) return;
-		if (layout === "circular") applyCircularLayout(nodes, width, height);
-		else if (layout === "hierarchical") applyHierarchicalLayout(nodes, width, height);
-		restart();
-	}, [
-		layout,
-		nodes,
-		width,
-		height,
-		restart
-	]);
+	const { restart, stop, setForcesEnabled } = useSimulationControls();
+	const { nodes } = useGraphLayout(initialNodes, width, height, layout, restart);
 	(0, import_react.useEffect)(() => {
-		if (manualLayout || pinnedNodes.size > 0) setForcesEnabled(false);
-		else setForcesEnabled(true);
+		setForcesEnabled(!(manualLayout || pinnedNodes.size > 0));
 	}, [
 		manualLayout,
 		pinnedNodes,
 		setForcesEnabled
 	]);
-	(0, import_react.useImperativeHandle)(ref, () => ({
-		pinAll: () => {
-			const newPinned = /* @__PURE__ */ new Set();
-			nodes.forEach((node) => {
-				pinNode(node);
-				newPinned.add(node.id);
-			});
-			setPinnedNodes(newPinned);
-			restart();
-		},
-		unpinAll: () => {
-			unpinAllNodes(nodes);
-			setPinnedNodes(/* @__PURE__ */ new Set());
-			restart();
-		},
-		resetLayout: () => {
-			unpinAllNodes(nodes);
-			setPinnedNodes(/* @__PURE__ */ new Set());
-			restart();
-		},
-		fitView: () => {
-			if (!svgRef.current || !nodes.length) return;
-			let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
-			nodes.forEach((node) => {
-				if (node.x !== void 0 && node.y !== void 0) {
-					const size = node.size || DEFAULT_NODE_SIZE;
-					minX = Math.min(minX, node.x - size);
-					maxX = Math.max(maxX, node.x + size);
-					minY = Math.min(minY, node.y - size);
-					maxY = Math.max(maxY, node.y + size);
-				}
-			});
-			if (!isFinite(minX)) return;
-			const scale = Math.min((width - FIT_VIEW_PADDING * 2) / (maxX - minX), (height - FIT_VIEW_PADDING * 2) / (maxY - minY), 10);
-			const x = width / 2 - (minX + maxX) / 2 * scale;
-			const y = height / 2 - (minY + maxY) / 2 * scale;
-			if (gRef.current && svgRef.current) {
-				const svg = select_default$1(svgRef.current);
-				const newTransform = identity.translate(x, y).scale(scale);
-				svg.transition().duration(TRANSITION_DURATION_MS).call(zoom_default().transform, newTransform);
-				setTransform(newTransform);
-			}
-		},
-		getPinnedNodes: () => Array.from(pinnedNodes),
-		setDragMode: (enabled) => {
-			internalDragEnabledRef.current = enabled;
-		},
-		setLayout: (newLayout) => handleLayoutChange(newLayout),
-		getLayout: () => layout
+	(0, import_react.useImperativeHandle)(ref, () => useImperativeHandleMethods({
+		nodes,
+		pinnedNodes,
+		setPinnedNodes,
+		restart,
+		width,
+		height,
+		layout,
+		handleLayoutChange,
+		svgRef,
+		gRef,
+		setTransform,
+		internalDragEnabledRef
 	}), [
 		nodes,
 		pinnedNodes,
@@ -28707,7 +28930,7 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 		setForcesEnabled
 	]);
 	(0, import_react.useEffect)(() => {
-		if (typeof onManualLayoutChange === "function") onManualLayoutChange(manualLayout);
+		onManualLayoutChange?.(manualLayout);
 	}, [manualLayout, onManualLayoutChange]);
 	useGraphZoom(svgRef, gRef, enableZoom, setTransform, transformRef);
 	useWindowDrag(enableDrag, svgRef, transformRef, dragActiveRef, dragNodeRef, () => {
@@ -28718,47 +28941,32 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 		if (!gRef.current) return;
 		const g = select_default$1(gRef.current);
 		g.selectAll("g.node").each(function() {
-			const datum = select_default$1(this).datum();
-			if (!datum) return;
-			select_default$1(this).attr("transform", `translate(${datum.x || 0},${datum.y || 0})`);
+			const d = select_default$1(this).datum();
+			if (d) select_default$1(this).attr("transform", `translate(${d.x || 0},${d.y || 0})`);
 		});
 		g.selectAll("line").each(function() {
 			const l = select_default$1(this).datum();
 			if (!l) return;
-			const s = typeof l.source === "object" ? l.source : nodes.find((n) => n.id === l.source) || l.source;
-			const t = typeof l.target === "object" ? l.target : nodes.find((n) => n.id === l.target) || l.target;
-			if (!s || !t) return;
-			select_default$1(this).attr("x1", s.x).attr("y1", s.y).attr("x2", t.x).attr("y2", t.y);
+			const s = typeof l.source === "object" ? l.source : nodes.find((n) => n.id === l.source);
+			const t = typeof l.target === "object" ? l.target : nodes.find((n) => n.id === l.target);
+			if (s && t) select_default$1(this).attr("x1", s.x).attr("y1", s.y).attr("x2", t.x).attr("y2", t.y);
 		});
 	}, [nodes, initialLinks]);
-	const handleDragStart = (0, import_react.useCallback)((event, node) => {
-		if (!enableDrag) return;
-		event.preventDefault();
-		event.stopPropagation();
-		dragActiveRef.current = true;
-		dragNodeRef.current = node;
-		pinNode(node);
-		setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
-		stop();
-	}, [enableDrag, stop]);
+	const { handleDragStart, handleNodeDoubleClick } = useNodeInteractions(enableDrag, nodes, pinnedNodes, setPinnedNodes, restart, stop);
 	(0, import_react.useEffect)(() => {
 		if (!gRef.current || !enableDrag) return;
 		const g = select_default$1(gRef.current);
 		const dragBehavior = drag_default().on("start", (event) => {
-			const id = ((event.sourceEvent && event.sourceEvent.target || event.target).closest?.("g.node"))?.getAttribute("data-id");
+			const id = (event.sourceEvent?.target || event.target).closest?.("g.node")?.getAttribute("data-id");
 			if (!id || !internalDragEnabledRef.current) return;
 			const node = nodes.find((n) => n.id === id);
 			if (!node) return;
 			if (!event.active) restart();
 			dragActiveRef.current = true;
 			dragNodeRef.current = node;
-			pinNode(node);
-			setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
 		}).on("drag", (event) => {
-			if (!dragActiveRef.current || !dragNodeRef.current) return;
-			const svg = svgRef.current;
-			if (!svg) return;
-			const rect = svg.getBoundingClientRect();
+			if (!dragActiveRef.current || !dragNodeRef.current || !svgRef.current) return;
+			const rect = svgRef.current.getBoundingClientRect();
 			dragNodeRef.current.fx = (event.sourceEvent.clientX - rect.left - transform.x) / transform.k;
 			dragNodeRef.current.fy = (event.sourceEvent.clientY - rect.top - transform.y) / transform.k;
 		}).on("end", () => {
@@ -28775,183 +28983,36 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 		nodes,
 		transform,
 		restart,
-		setForcesEnabled,
-		internalDragEnabledRef
+		setForcesEnabled
 	]);
-	const handleNodeDoubleClick = (0, import_react.useCallback)((event, node) => {
-		event.stopPropagation();
-		if (!enableDrag) return;
-		if (node.fx === null || node.fx === void 0) {
-			pinNode(node);
-			setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
-		} else {
-			unpinNode(node);
-			setPinnedNodes((prev) => {
-				const next = new Set(prev);
-				next.delete(node.id);
-				return next;
-			});
-		}
-		restart();
-	}, [enableDrag, restart]);
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
-		ref: svgRef,
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GraphCanvas, {
+		svgRef,
+		gRef,
 		width,
 		height,
-		className: cn("bg-white dark:bg-gray-900", className),
-		onDoubleClick: () => {
-			unpinAllNodes(nodes);
-			setPinnedNodes(/* @__PURE__ */ new Set());
-			restart();
-		},
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("marker", {
-			id: "arrow",
-			viewBox: "0 0 10 10",
-			refX: "20",
-			refY: "5",
-			markerWidth: "6",
-			markerHeight: "6",
-			orient: "auto",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-				d: "M 0 0 L 10 5 L 0 10 z",
-				fill: defaultLinkColor
-			})
-		}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
-			ref: gRef,
-			children: [
-				initialLinks.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LinkItem_default, {
-					link,
-					onClick: onLinkClick,
-					defaultWidth: defaultLinkWidth,
-					showLabel: showLinkLabels,
-					nodes
-				}, `link-${i}`)),
-				nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NodeItem_default, {
-					node,
-					isSelected: selectedNodeId === node.id,
-					isHovered: hoveredNodeId === node.id,
-					pinned: pinnedNodes.has(node.id),
-					defaultNodeSize,
-					defaultNodeColor,
-					showLabel: showNodeLabels,
-					onClick: onNodeClick,
-					onDoubleClick: handleNodeDoubleClick,
-					onMouseEnter: (n) => onNodeHover?.(n),
-					onMouseLeave: () => onNodeHover?.(null),
-					onMouseDown: handleDragStart
-				}, node.id)),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PackageBoundaries, { packageBounds: packageBounds || {} })
-			]
-		})]
+		className,
+		nodes,
+		links: initialLinks,
+		pinnedNodes,
+		selectedNodeId,
+		hoveredNodeId,
+		defaultNodeColor,
+		defaultNodeSize,
+		defaultLinkColor,
+		defaultLinkWidth,
+		showNodeLabels,
+		showLinkLabels,
+		onNodeClick,
+		onNodeHover,
+		onLinkClick,
+		packageBounds,
+		handleNodeDoubleClick,
+		handleDragStart,
+		restart,
+		setPinnedNodes
 	});
 });
 ForceDirectedGraph.displayName = "ForceDirectedGraph";
-var GraphControls = ({ dragEnabled = true, onDragToggle, manualLayout = false, onManualLayoutToggle, onPinAll, onUnpinAll, onReset, onFitView, pinnedCount = 0, totalNodes = 0, visible = true, position = "top-left", className }) => {
-	if (!visible) return null;
-	const positionClasses = {
-		"top-left": "top-4 left-4",
-		"top-right": "top-4 right-4",
-		"bottom-left": "bottom-4 left-4",
-		"bottom-right": "bottom-4 right-4"
-	};
-	const ControlButton = ({ onClick, active = false, icon, label, disabled = false }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: "relative group",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-			onClick,
-			disabled,
-			className: cn("p-2 rounded-lg transition-all duration-200", active ? "bg-blue-500 text-white shadow-md hover:bg-blue-600" : "bg-gray-100 text-gray-700 hover:bg-gray-200", disabled && "opacity-50 cursor-not-allowed hover:bg-gray-100", "dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:active:bg-blue-600"),
-			title: label,
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-				className: "text-lg",
-				children: icon
-			})
-		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-			className: "absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-50",
-			children: label
-		})]
-	});
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: cn("fixed z-40 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2 border border-gray-200 dark:border-gray-700", positionClasses[position], className),
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-			className: "flex flex-col gap-2",
-			children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, {
-					onClick: () => onDragToggle?.(!dragEnabled),
-					active: dragEnabled,
-					icon: "✋",
-					label: dragEnabled ? "Drag enabled" : "Drag disabled"
-				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, {
-					onClick: () => onManualLayoutToggle?.(!manualLayout),
-					active: manualLayout,
-					icon: "🔧",
-					label: manualLayout ? "Manual layout: ON (drag freely)" : "Manual layout: OFF (forces active)"
-				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-8 h-px bg-gray-300 dark:bg-gray-600 mx-auto my-1" }),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "flex gap-1",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, {
-						onClick: () => onPinAll?.(),
-						disabled: totalNodes === 0,
-						icon: "📌",
-						label: `Pin all nodes (${totalNodes})`
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, {
-						onClick: () => onUnpinAll?.(),
-						disabled: pinnedCount === 0,
-						icon: "📍",
-						label: `Unpin all (${pinnedCount} pinned)`
-					})]
-				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-8 h-px bg-gray-300 dark:bg-gray-600 mx-auto my-1" }),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, {
-					onClick: () => onFitView?.(),
-					disabled: totalNodes === 0,
-					icon: "🎯",
-					label: "Fit all nodes in view"
-				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, {
-					onClick: () => onReset?.(),
-					disabled: totalNodes === 0,
-					icon: "↺",
-					label: "Reset to auto-layout"
-				})
-			]
-		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-			className: "mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-600 dark:text-gray-400",
-			children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "whitespace-nowrap",
-					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Nodes:" }),
-						" ",
-						totalNodes
-					]
-				}),
-				pinnedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "whitespace-nowrap",
-					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Pinned:" }),
-						" ",
-						pinnedCount
-					]
-				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "mt-2 text-gray-500 dark:text-gray-500 leading-snug",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Tips:" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", {
-						className: "mt-1 ml-1 space-y-0.5",
-						children: [
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: "• Drag nodes to reposition" }),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: "• Double-click to pin/unpin" }),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: "• Double-click canvas to unpin all" }),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: "• Scroll to zoom" })
-						]
-					})]
-				})
-			]
-		})]
-	});
-};
-GraphControls.displayName = "GraphControls";
 //#endregion
 //#region src/components/LegendPanel.tsx
 function LegendItemWithToggle({ color, label, isGlow = false, isLine = false, colors, isVisible, onToggle }) {
@@ -29286,4 +29347,4 @@ function App() {
 (0, import_client.createRoot)(document.getElementById("root")).render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, {}) }));
 //#endregion
 
-//# sourceMappingURL=index-ZdEvYTav.js.map
+//# sourceMappingURL=index-CkabxYJ5.js.map