@aiready/visualizer 0.6.14 → 0.6.19

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

@@ -24895,7 +24895,67 @@ function superRefine(fn) {
 	return /* @__PURE__ */ _superRefine(fn);
 }
 //#endregion
-//#region ../../core/dist/chunk-CGOS2J6T.mjs
+//#region ../../core/dist/chunk-SQHS6PFL.mjs
+var LeadSource = /* @__PURE__ */ ((LeadSource2) => {
+	LeadSource2["ClawMoreHero"] = "clawmore-hero";
+	LeadSource2["ClawMoreWaitlist"] = "clawmore-waitlist";
+	LeadSource2["ClawMoreBeta"] = "clawmore-beta";
+	LeadSource2["AiReadyPlatform"] = "aiready-platform";
+	return LeadSource2;
+})(LeadSource || {});
+var LeadSourceSchema = nativeEnum(LeadSource);
+object({
+	id: string(),
+	email: string().email(),
+	name: string().min(1),
+	interest: string().default("General"),
+	notes: string().optional(),
+	timestamp: string().datetime(),
+	source: LeadSourceSchema,
+	status: _enum([
+		"new",
+		"contacted",
+		"qualified",
+		"converted",
+		"archived"
+	]).default("new")
+}).omit({
+	id: true,
+	timestamp: true,
+	status: true
+});
+object({
+	id: string(),
+	accountId: string(),
+	userId: string(),
+	stripeSubscriptionId: string(),
+	tokenStrategy: _enum(["managed", "byok"]).default("managed"),
+	byokConfig: object({
+		openaiKey: string().optional(),
+		anthropicKey: string().optional(),
+		openrouterKey: string().optional()
+	}).optional(),
+	baseFeeCents: number().default(2900),
+	includedComputeCents: number().default(1500),
+	includedTokenCents: number().default(500),
+	prepaidTokenBalanceCents: number().default(0),
+	currentMonthlyTokenSpendCents: number().default(0),
+	status: _enum([
+		"provisioning",
+		"active",
+		"warning",
+		"quarantined",
+		"suspended"
+	]).default("provisioning"),
+	lastCostSyncAt: string().datetime().optional(),
+	region: string().default("ap-southeast-2"),
+	alertThresholds: array$1(number()).default([
+		50,
+		80,
+		100,
+		150
+	])
+});
 var Severity = /* @__PURE__ */ ((Severity2) => {
 	Severity2["Critical"] = "critical";
 	Severity2["Major"] = "major";
@@ -25069,66 +25129,6 @@ object({
 		}).optional()
 	}).optional()
 }).catchall(any());
-var LeadSource = /* @__PURE__ */ ((LeadSource2) => {
-	LeadSource2["ClawMoreHero"] = "clawmore-hero";
-	LeadSource2["ClawMoreWaitlist"] = "clawmore-waitlist";
-	LeadSource2["ClawMoreBeta"] = "clawmore-beta";
-	LeadSource2["AiReadyPlatform"] = "aiready-platform";
-	return LeadSource2;
-})(LeadSource || {});
-var LeadSourceSchema = nativeEnum(LeadSource);
-object({
-	id: string(),
-	email: string().email(),
-	name: string().min(1),
-	interest: string().default("General"),
-	notes: string().optional(),
-	timestamp: string().datetime(),
-	source: LeadSourceSchema,
-	status: _enum([
-		"new",
-		"contacted",
-		"qualified",
-		"converted",
-		"archived"
-	]).default("new")
-}).omit({
-	id: true,
-	timestamp: true,
-	status: true
-});
-object({
-	id: string(),
-	accountId: string(),
-	userId: string(),
-	stripeSubscriptionId: string(),
-	tokenStrategy: _enum(["managed", "byok"]).default("managed"),
-	byokConfig: object({
-		openaiKey: string().optional(),
-		anthropicKey: string().optional(),
-		openrouterKey: string().optional()
-	}).optional(),
-	baseFeeCents: number().default(2900),
-	includedComputeCents: number().default(1500),
-	includedTokenCents: number().default(500),
-	prepaidTokenBalanceCents: number().default(0),
-	currentMonthlyTokenSpendCents: number().default(0),
-	status: _enum([
-		"provisioning",
-		"active",
-		"warning",
-		"quarantined",
-		"suspended"
-	]).default("provisioning"),
-	lastCostSyncAt: string().datetime().optional(),
-	region: string().default("ap-southeast-2"),
-	alertThresholds: array$1(number()).default([
-		50,
-		80,
-		100,
-		150
-	])
-});
 //#endregion
 //#region ../../../node_modules/.pnpm/d3-dispatch@3.0.1/node_modules/d3-dispatch/src/dispatch.js
 var noop = { value: () => {} };
@@ -28335,182 +28335,16 @@ function ScoreCircle({ score, progress: customProgress, isInView = true, size =
 	});
 }
 (0, import_react.createContext)(void 0);
-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;
-	const x = node.x ?? 0;
-	const y = node.y ?? 0;
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
-		className: "cursor-pointer node",
-		"data-id": node.id,
-		transform: `translate(${x},${y})`,
-		onClick: () => onClick?.(node),
-		onDoubleClick: (e) => onDoubleClick?.(e, node),
-		onMouseEnter: () => onMouseEnter?.(node),
-		onMouseLeave: () => onMouseLeave?.(),
-		onMouseDown: (e) => onMouseDown?.(e, node),
-		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
-				r: nodeSize,
-				fill: nodeColor,
-				stroke: isSelected ? "#000" : isHovered ? "#666" : "none",
-				strokeWidth: pinned ? 3 : isSelected ? 2.5 : isHovered ? 2 : 1.5,
-				opacity: isHovered || isSelected ? 1 : .9
-			}),
-			pinned && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
-				r: nodeSize + 4,
-				fill: "none",
-				stroke: "#ff6b6b",
-				strokeWidth: 1,
-				opacity: .5,
-				className: "pointer-events-none"
-			}),
-			showLabel && node.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
-				y: nodeSize + 15,
-				fill: "#333",
-				fontSize: "12",
-				textAnchor: "middle",
-				dominantBaseline: "middle",
-				pointerEvents: "none",
-				className: "select-none",
-				children: node.label
-			})
-		]
-	}, node.id);
-};
-var NodeItem_default = NodeItem;
-var LinkItem = ({ link, onClick, defaultWidth, showLabel = true, nodes = [] }) => {
-	const src = link.source?.id ?? (typeof link.source === "string" ? link.source : void 0);
-	const tgt = link.target?.id ?? (typeof link.target === "string" ? link.target : void 0);
-	const getNodePosition = (nodeOrId) => {
-		if (typeof nodeOrId === "object" && nodeOrId !== null) {
-			const node = nodeOrId;
-			return {
-				x: node.x ?? 0,
-				y: node.y ?? 0
-			};
-		} else if (typeof nodeOrId === "string") {
-			const found = nodes.find((n) => n.id === nodeOrId);
-			if (found) return {
-				x: found.x ?? 0,
-				y: found.y ?? 0
-			};
-		}
-		return null;
-	};
-	const sourcePos = getNodePosition(link.source);
-	const targetPos = getNodePosition(link.target);
-	if (!sourcePos || !targetPos) return null;
-	const midX = (sourcePos.x + targetPos.x) / 2;
-	const midY = (sourcePos.y + targetPos.y) / 2;
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", {
-		x1: sourcePos.x,
-		y1: sourcePos.y,
-		x2: targetPos.x,
-		y2: targetPos.y,
-		"data-source": src,
-		"data-target": tgt,
-		stroke: link.color,
-		strokeWidth: link.width ?? defaultWidth ?? 1,
-		opacity: .6,
-		className: "cursor-pointer transition-opacity hover:opacity-100",
-		onClick: () => onClick?.(link)
-	}), showLabel && link.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
-		x: midX,
-		y: midY,
-		fill: "#666",
-		fontSize: "10",
-		textAnchor: "middle",
-		dominantBaseline: "middle",
-		pointerEvents: "none",
-		children: link.label
-	})] });
-};
-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", {
-		className: "package-boundaries",
-		pointerEvents: "none",
-		children: Object.entries(packageBounds).map(([pid, b]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
-			cx: b.x,
-			cy: b.y,
-			r: b.r,
-			fill: PACKAGE_BOUNDARY_FILL,
-			stroke: PACKAGE_BOUNDARY_STROKE,
-			strokeWidth: PACKAGE_BOUNDARY_STROKE_WIDTH,
-			strokeDasharray: PACKAGE_BOUNDARY_DASH,
-			opacity: .9
-		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
-			x: b.x,
-			y: Math.max(12, b.y - b.r + 14),
-			fill: PACKAGE_LABEL_COLOR,
-			fontSize: PACKAGE_LABEL_FONT_SIZE,
-			textAnchor: "middle",
-			pointerEvents: "none",
-			children: pid.replace(/^pkg:/, "")
-		})] }, pid))
-	});
-};
-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 pinNode(node) {
+	node.fx = node.x;
+	node.fy = node.y;
 }
-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 unpinNode(node) {
+	node.fx = null;
+	node.fy = null;
 }
-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 unpinAllNodes(nodes) {
+	nodes.forEach(unpinNode);
 }
 function useGraphZoom(svgRef, gRef, enableZoom, setTransform, transformRef) {
 	(0, import_react.useEffect)(() => {
@@ -28576,42 +28410,103 @@ function useWindowDrag(enableDrag, svgRef, transformRef, dragActiveRef, dragNode
 		onDragEnd
 	]);
 }
-function pinNode(node) {
-	node.fx = node.x;
-	node.fy = node.y;
+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
+		])
+	};
 }
-function unpinNode(node) {
-	node.fx = null;
-	node.fy = null;
+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 unpinAllNodes(nodes) {
-	nodes.forEach(unpinNode);
+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;
+		});
+	});
 }
-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) => {
-	const svgRef = (0, import_react.useRef)(null);
-	const gRef = (0, import_react.useRef)(null);
-	const [transform, setTransform] = (0, import_react.useState)({
-		k: 1,
-		x: 0,
-		y: 0
+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;
+		}
 	});
-	const transformRef = (0, import_react.useRef)(transform);
-	const dragNodeRef = (0, import_react.useRef)(null);
-	const dragActiveRef = (0, import_react.useRef)(false);
-	const [pinnedNodes, setPinnedNodes] = (0, import_react.useState)(/* @__PURE__ */ new Set());
-	const internalDragEnabledRef = (0, import_react.useRef)(enableDrag);
-	const [layout, setLayout] = (0, import_react.useState)(externalLayout || "force");
-	(0, import_react.useEffect)(() => {
-		if (externalLayout && externalLayout !== layout) setLayout(externalLayout);
-	}, [externalLayout, layout]);
-	const handleLayoutChange = (0, import_react.useCallback)((newLayout) => {
-		setLayout(newLayout);
-		onLayoutChange?.(newLayout);
-	}, [onLayoutChange]);
-	(0, import_react.useEffect)(() => {
-		internalDragEnabledRef.current = enableDrag;
-	}, [enableDrag]);
-	const nodes = import_react.useMemo(() => {
+}
+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);
@@ -28624,9 +28519,6 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 		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);
@@ -28639,16 +28531,18 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 		height,
 		restart
 	]);
-	(0, import_react.useEffect)(() => {
-		if (manualLayout || pinnedNodes.size > 0) setForcesEnabled(false);
-		else setForcesEnabled(true);
-	}, [
-		manualLayout,
-		pinnedNodes,
-		setForcesEnabled
-	]);
-	(0, import_react.useImperativeHandle)(ref, () => ({
-		pinAll: () => {
+	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);
@@ -28656,18 +28550,30 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 			});
 			setPinnedNodes(newPinned);
 			restart();
-		},
-		unpinAll: () => {
+		}, [
+			nodes,
+			setPinnedNodes,
+			restart
+		]),
+		unpinAll: (0, import_react.useCallback)(() => {
 			unpinAllNodes(nodes);
 			setPinnedNodes(/* @__PURE__ */ new Set());
 			restart();
-		},
-		resetLayout: () => {
+		}, [
+			nodes,
+			setPinnedNodes,
+			restart
+		]),
+		resetLayout: (0, import_react.useCallback)(() => {
 			unpinAllNodes(nodes);
 			setPinnedNodes(/* @__PURE__ */ new Set());
 			restart();
-		},
-		fitView: () => {
+		}, [
+			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) => {
@@ -28689,111 +28595,233 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 				svg.transition().duration(TRANSITION_DURATION_MS).call(zoom_default().transform, newTransform);
 				setTransform(newTransform);
 			}
-		},
-		getPinnedNodes: () => Array.from(pinnedNodes),
-		setDragMode: (enabled) => {
+		}, [
+			nodes,
+			width,
+			height,
+			svgRef,
+			gRef,
+			setTransform
+		]),
+		getPinnedNodes: (0, import_react.useCallback)(() => Array.from(pinnedNodes), [pinnedNodes]),
+		setDragMode: (0, import_react.useCallback)((enabled) => {
 			internalDragEnabledRef.current = enabled;
-		},
-		setLayout: (newLayout) => handleLayoutChange(newLayout),
-		getLayout: () => layout
-	}), [
-		nodes,
-		pinnedNodes,
-		restart,
-		width,
-		height,
-		layout,
-		handleLayoutChange,
-		setForcesEnabled
-	]);
-	(0, import_react.useEffect)(() => {
-		if (typeof onManualLayoutChange === "function") onManualLayoutChange(manualLayout);
-	}, [manualLayout, onManualLayoutChange]);
-	useGraphZoom(svgRef, gRef, enableZoom, setTransform, transformRef);
-	useWindowDrag(enableDrag, svgRef, transformRef, dragActiveRef, dragNodeRef, () => {
-		setForcesEnabled(true);
-		restart();
+		}, [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
+				]
+			})]
+		})]
 	});
-	(0, import_react.useEffect)(() => {
-		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})`);
-		});
-		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);
-		});
-	}, [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]);
-	(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");
-			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();
-			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", () => {
-			setForcesEnabled(true);
-			restart();
-		});
-		g.selectAll("g.node").call(dragBehavior);
-		return () => {
-			g.selectAll("g.node").on(".drag", null);
-		};
-	}, [
-		gRef,
-		enableDrag,
-		nodes,
-		transform,
-		restart,
-		setForcesEnabled,
-		internalDragEnabledRef
-	]);
-	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;
-			});
+};
+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;
+	const x = node.x ?? 0;
+	const y = node.y ?? 0;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+		className: "cursor-pointer node",
+		"data-id": node.id,
+		transform: `translate(${x},${y})`,
+		onClick: () => onClick?.(node),
+		onDoubleClick: (e) => onDoubleClick?.(e, node),
+		onMouseEnter: () => onMouseEnter?.(node),
+		onMouseLeave: () => onMouseLeave?.(),
+		onMouseDown: (e) => onMouseDown?.(e, node),
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+				r: nodeSize,
+				fill: nodeColor,
+				stroke: isSelected ? "#000" : isHovered ? "#666" : "none",
+				strokeWidth: pinned ? 3 : isSelected ? 2.5 : isHovered ? 2 : 1.5,
+				opacity: isHovered || isSelected ? 1 : .9
+			}),
+			pinned && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+				r: nodeSize + 4,
+				fill: "none",
+				stroke: "#ff6b6b",
+				strokeWidth: 1,
+				opacity: .5,
+				className: "pointer-events-none"
+			}),
+			showLabel && node.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+				y: nodeSize + 15,
+				fill: "#333",
+				fontSize: "12",
+				textAnchor: "middle",
+				dominantBaseline: "middle",
+				pointerEvents: "none",
+				className: "select-none",
+				children: node.label
+			})
+		]
+	}, node.id);
+};
+var NodeItem_default = NodeItem;
+var LinkItem = ({ link, onClick, defaultWidth, showLabel = true, nodes = [] }) => {
+	const src = link.source?.id ?? (typeof link.source === "string" ? link.source : void 0);
+	const tgt = link.target?.id ?? (typeof link.target === "string" ? link.target : void 0);
+	const getNodePosition = (nodeOrId) => {
+		if (typeof nodeOrId === "object" && nodeOrId !== null) {
+			const node = nodeOrId;
+			return {
+				x: node.x ?? 0,
+				y: node.y ?? 0
+			};
+		} else if (typeof nodeOrId === "string") {
+			const found = nodes.find((n) => n.id === nodeOrId);
+			if (found) return {
+				x: found.x ?? 0,
+				y: found.y ?? 0
+			};
 		}
-		restart();
-	}, [enableDrag, restart]);
+		return null;
+	};
+	const sourcePos = getNodePosition(link.source);
+	const targetPos = getNodePosition(link.target);
+	if (!sourcePos || !targetPos) return null;
+	const midX = (sourcePos.x + targetPos.x) / 2;
+	const midY = (sourcePos.y + targetPos.y) / 2;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", {
+		x1: sourcePos.x,
+		y1: sourcePos.y,
+		x2: targetPos.x,
+		y2: targetPos.y,
+		"data-source": src,
+		"data-target": tgt,
+		stroke: link.color,
+		strokeWidth: link.width ?? defaultWidth ?? 1,
+		opacity: .6,
+		className: "cursor-pointer transition-opacity hover:opacity-100",
+		onClick: () => onClick?.(link)
+	}), showLabel && link.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+		x: midX,
+		y: midY,
+		fill: "#666",
+		fontSize: "10",
+		textAnchor: "middle",
+		dominantBaseline: "middle",
+		pointerEvents: "none",
+		children: link.label
+	})] });
+};
+var LinkItem_default = LinkItem;
+var PackageBoundaries = ({ packageBounds }) => {
+	if (!packageBounds || Object.keys(packageBounds).length === 0) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+		className: "package-boundaries",
+		pointerEvents: "none",
+		children: Object.entries(packageBounds).map(([pid, b]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+			cx: b.x,
+			cy: b.y,
+			r: b.r,
+			fill: PACKAGE_BOUNDARY_FILL,
+			stroke: PACKAGE_BOUNDARY_STROKE,
+			strokeWidth: PACKAGE_BOUNDARY_STROKE_WIDTH,
+			strokeDasharray: PACKAGE_BOUNDARY_DASH,
+			opacity: .9
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+			x: b.x,
+			y: Math.max(12, b.y - b.r + 14),
+			fill: PACKAGE_LABEL_COLOR,
+			fontSize: PACKAGE_LABEL_FONT_SIZE,
+			textAnchor: "middle",
+			pointerEvents: "none",
+			children: pid.replace(/^pkg:/, "")
+		})] }, pid))
+	});
+};
+PackageBoundaries.displayName = "PackageBoundaries";
+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,
@@ -28819,7 +28847,7 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 		}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
 			ref: gRef,
 			children: [
-				initialLinks.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LinkItem_default, {
+				links.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LinkItem_default, {
 					link,
 					onClick: onLinkClick,
 					defaultWidth: defaultLinkWidth,
@@ -28844,114 +28872,147 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 			]
 		})]
 	});
-});
-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
-		})]
+};
+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)({
+		k: 1,
+		x: 0,
+		y: 0
 	});
-	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" })
-						]
-					})]
-				})
-			]
-		})]
+	const transformRef = (0, import_react.useRef)(transform);
+	const dragNodeRef = (0, import_react.useRef)(null);
+	const dragActiveRef = (0, import_react.useRef)(false);
+	const [pinnedNodes, setPinnedNodes] = (0, import_react.useState)(/* @__PURE__ */ new Set());
+	const internalDragEnabledRef = (0, import_react.useRef)(enableDrag);
+	const [layout, setLayout] = (0, import_react.useState)(externalLayout || "force");
+	(0, import_react.useEffect)(() => {
+		if (externalLayout && externalLayout !== layout) setLayout(externalLayout);
+	}, [externalLayout, layout]);
+	const handleLayoutChange = (0, import_react.useCallback)((newLayout) => {
+		setLayout(newLayout);
+		onLayoutChange?.(newLayout);
+	}, [onLayoutChange]);
+	(0, import_react.useEffect)(() => {
+		internalDragEnabledRef.current = enableDrag;
+	}, [enableDrag]);
+	const { restart, stop, setForcesEnabled } = useSimulationControls();
+	const { nodes } = useGraphLayout(initialNodes, width, height, layout, restart);
+	(0, import_react.useEffect)(() => {
+		setForcesEnabled(!(manualLayout || pinnedNodes.size > 0));
+	}, [
+		manualLayout,
+		pinnedNodes,
+		setForcesEnabled
+	]);
+	(0, import_react.useImperativeHandle)(ref, () => useImperativeHandleMethods({
+		nodes,
+		pinnedNodes,
+		setPinnedNodes,
+		restart,
+		width,
+		height,
+		layout,
+		handleLayoutChange,
+		svgRef,
+		gRef,
+		setTransform,
+		internalDragEnabledRef
+	}), [
+		nodes,
+		pinnedNodes,
+		restart,
+		width,
+		height,
+		layout,
+		handleLayoutChange,
+		setForcesEnabled
+	]);
+	(0, import_react.useEffect)(() => {
+		onManualLayoutChange?.(manualLayout);
+	}, [manualLayout, onManualLayoutChange]);
+	useGraphZoom(svgRef, gRef, enableZoom, setTransform, transformRef);
+	useWindowDrag(enableDrag, svgRef, transformRef, dragActiveRef, dragNodeRef, () => {
+		setForcesEnabled(true);
+		restart();
 	});
-};
-GraphControls.displayName = "GraphControls";
+	(0, import_react.useEffect)(() => {
+		if (!gRef.current) return;
+		const g = select_default$1(gRef.current);
+		g.selectAll("g.node").each(function() {
+			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);
+			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, 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?.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;
+		}).on("drag", (event) => {
+			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", () => {
+			setForcesEnabled(true);
+			restart();
+		});
+		g.selectAll("g.node").call(dragBehavior);
+		return () => {
+			g.selectAll("g.node").on(".drag", null);
+		};
+	}, [
+		gRef,
+		enableDrag,
+		nodes,
+		transform,
+		restart,
+		setForcesEnabled
+	]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GraphCanvas, {
+		svgRef,
+		gRef,
+		width,
+		height,
+		className,
+		nodes,
+		links: initialLinks,
+		pinnedNodes,
+		selectedNodeId,
+		hoveredNodeId,
+		defaultNodeColor,
+		defaultNodeSize,
+		defaultLinkColor,
+		defaultLinkWidth,
+		showNodeLabels,
+		showLinkLabels,
+		onNodeClick,
+		onNodeHover,
+		onLinkClick,
+		packageBounds,
+		handleNodeDoubleClick,
+		handleDragStart,
+		restart,
+		setPinnedNodes
+	});
+});
+ForceDirectedGraph.displayName = "ForceDirectedGraph";
 //#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-Zc8kVQDw.js.map
+//# sourceMappingURL=index-CkabxYJ5.js.map