@aiready/components 0.13.6 → 0.13.8

package/dist/charts/ForceDirectedGraph.js

@@ -1,5 +1,5 @@
 import React, { forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
-import * as d3 from 'd3';
+import * as d32 from 'd3';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -137,6 +137,155 @@ var LinkItem = ({
   ] });
 };
 var LinkItem_default = LinkItem;
+
+// src/charts/constants.ts
+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 = 0.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__ */ jsx("g", { className: "package-boundaries", pointerEvents: "none", children: Object.entries(packageBounds).map(([pid, b]) => /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ 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: 0.9
+      }
+    ),
+    /* @__PURE__ */ 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";
+
+// src/charts/layout-utils.ts
+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 * 0.8 / cols;
+  const groupSpacingY = height * 0.8 / Math.ceil(groupArray.length / cols);
+  groupArray.forEach(([groupKey, groupNodes], gi) => {
+    const col = gi % cols;
+    const row = Math.floor(gi / cols);
+    const groupX = (col + 0.5) * groupSpacingX;
+    const groupY = (row + 0.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) {
+  useEffect(() => {
+    if (!enableZoom || !svgRef.current || !gRef.current) return;
+    const svg = d32.select(svgRef.current);
+    const g = d32.select(gRef.current);
+    const zoom3 = d32.zoom().scaleExtent([0.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) {
+  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]);
+}
 var ForceDirectedGraph = forwardRef(
   ({
     nodes: initialNodes,
@@ -150,10 +299,10 @@ var ForceDirectedGraph = forwardRef(
     onLinkClick,
     selectedNodeId,
     hoveredNodeId,
-    defaultNodeColor = "#69b3a2",
-    defaultNodeSize = 10,
-    defaultLinkColor = "#999",
-    defaultLinkWidth = 1,
+    defaultNodeColor = DEFAULT_NODE_COLOR,
+    defaultNodeSize = DEFAULT_NODE_SIZE,
+    defaultLinkColor = DEFAULT_LINK_COLOR,
+    defaultLinkWidth = DEFAULT_LINK_WIDTH,
     showNodeLabels = true,
     showLinkLabels = false,
     className,
@@ -176,7 +325,7 @@ var ForceDirectedGraph = forwardRef(
       if (externalLayout && externalLayout !== layout) {
         setLayout(externalLayout);
       }
-    }, [externalLayout]);
+    }, [externalLayout, layout]);
     const handleLayoutChange = useCallback(
       (newLayout) => {
         setLayout(newLayout);
@@ -189,36 +338,13 @@ var ForceDirectedGraph = forwardRef(
     }, [enableDrag]);
     const nodes = React.useMemo(() => {
       if (!initialNodes || !initialNodes.length) return initialNodes;
-      const centerX = width / 2;
-      const centerY = height / 2;
-      if (layout === "force") {
-        return initialNodes.map((n) => ({
-          ...n,
-          x: Math.random() * width,
-          y: Math.random() * height
-        }));
-      }
-      if (layout === "circular") {
-        const radius = Math.min(width, height) * 0.35;
-        return initialNodes.map((n, i) => ({
-          ...n,
-          x: centerX + Math.cos(2 * Math.PI * i / initialNodes.length) * radius,
-          y: centerY + Math.sin(2 * Math.PI * i / initialNodes.length) * radius
-        }));
-      }
-      if (layout === "hierarchical") {
-        const cols = Math.ceil(Math.sqrt(initialNodes.length));
-        const spacingX = width / (cols + 1);
-        const spacingY = height / (Math.ceil(initialNodes.length / cols) + 1);
-        return initialNodes.map((n, i) => ({
-          ...n,
-          x: spacingX * (i % cols + 1),
-          y: spacingY * (Math.floor(i / cols) + 1)
-        }));
-      }
-      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 links = initialLinks;
     const restart = React.useCallback(() => {
     }, []);
     const stop = React.useCallback(() => {
@@ -227,55 +353,14 @@ var ForceDirectedGraph = forwardRef(
     }, []);
     useEffect(() => {
       if (!nodes || nodes.length === 0) return;
-      const applyLayout = () => {
-        const centerX = width / 2;
-        const centerY = height / 2;
-        if (layout === "circular") {
-          const radius = Math.min(width, height) * 0.35;
-          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;
-          });
-        } else if (layout === "hierarchical") {
-          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 * 0.8 / cols;
-          const groupSpacingY = height * 0.8 / Math.ceil(groupArray.length / cols);
-          groupArray.forEach(([groupKey, groupNodes], gi) => {
-            const col = gi % cols;
-            const row = Math.floor(gi / cols);
-            const groupX = (col + 0.5) * groupSpacingX;
-            const groupY = (row + 0.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;
-              });
-            }
-          });
-        }
-        try {
-          restart();
-        } catch (e) {
-        }
-      };
-      applyLayout();
+      if (layout === "circular") applyCircularLayout(nodes, width, height);
+      else if (layout === "hierarchical")
+        applyHierarchicalLayout(nodes, width, height);
+      restart();
     }, [layout, nodes, width, height, restart]);
     useEffect(() => {
-      try {
-        if (manualLayout || pinnedNodes.size > 0) setForcesEnabled(false);
-        else setForcesEnabled(true);
-      } catch (e) {
-      }
+      if (manualLayout || pinnedNodes.size > 0) setForcesEnabled(false);
+      else setForcesEnabled(true);
     }, [manualLayout, pinnedNodes, setForcesEnabled]);
     useImperativeHandle(
       ref,
@@ -311,7 +396,7 @@ var ForceDirectedGraph = forwardRef(
           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 || 10;
+              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);
@@ -319,22 +404,17 @@ var ForceDirectedGraph = forwardRef(
             }
           });
           if (!isFinite(minX)) return;
-          const padding = 40;
-          const nodeWidth = maxX - minX;
-          const nodeHeight = maxY - minY;
           const scale = Math.min(
-            (width - padding * 2) / nodeWidth,
-            (height - padding * 2) / nodeHeight,
+            (width - FIT_VIEW_PADDING * 2) / (maxX - minX),
+            (height - FIT_VIEW_PADDING * 2) / (maxY - minY),
             10
           );
-          const centerX = (minX + maxX) / 2;
-          const centerY = (minY + maxY) / 2;
-          const x = width / 2 - centerX * scale;
-          const y = height / 2 - centerY * scale;
+          const x = width / 2 - (minX + maxX) / 2 * scale;
+          const y = height / 2 - (minY + maxY) / 2 * scale;
           if (gRef.current && svgRef.current) {
-            const svg = d3.select(svgRef.current);
-            const newTransform = d3.zoomIdentity.translate(x, y).scale(scale);
-            svg.transition().duration(300).call(d3.zoom().transform, newTransform);
+            const svg = d32.select(svgRef.current);
+            const newTransform = d32.zoomIdentity.translate(x, y).scale(scale);
+            svg.transition().duration(TRANSITION_DURATION_MS).call(d32.zoom().transform, newTransform);
             setTransform(newTransform);
           }
         },
@@ -342,57 +422,56 @@ var ForceDirectedGraph = forwardRef(
         setDragMode: (enabled) => {
           internalDragEnabledRef.current = enabled;
         },
-        setLayout: (newLayout) => {
-          handleLayoutChange(newLayout);
-        },
+        setLayout: (newLayout) => handleLayoutChange(newLayout),
         getLayout: () => layout
       }),
-      [nodes, pinnedNodes, restart, width, height, layout, handleLayoutChange]
+      [
+        nodes,
+        pinnedNodes,
+        restart,
+        width,
+        height,
+        layout,
+        handleLayoutChange,
+        setForcesEnabled
+      ]
     );
     useEffect(() => {
-      try {
-        if (typeof onManualLayoutChange === "function")
-          onManualLayoutChange(manualLayout);
-      } catch (e) {
-      }
+      if (typeof onManualLayoutChange === "function")
+        onManualLayoutChange(manualLayout);
     }, [manualLayout, onManualLayoutChange]);
-    useEffect(() => {
-      if (!enableZoom || !svgRef.current || !gRef.current) return;
-      const svg = d3.select(svgRef.current);
-      const g = d3.select(gRef.current);
-      const zoom2 = d3.zoom().scaleExtent([0.1, 10]).on("zoom", (event) => {
-        g.attr("transform", event.transform);
-        transformRef.current = event.transform;
-        setTransform(event.transform);
-      });
-      svg.call(zoom2);
-      return () => {
-        svg.on(".zoom", null);
-      };
-    }, [enableZoom]);
+    useGraphZoom(svgRef, gRef, enableZoom, setTransform, transformRef);
+    useWindowDrag(
+      enableDrag,
+      svgRef,
+      transformRef,
+      dragActiveRef,
+      dragNodeRef,
+      () => {
+        setForcesEnabled(true);
+        restart();
+      }
+    );
     useEffect(() => {
       if (!gRef.current) return;
-      try {
-        const g = d3.select(gRef.current);
-        g.selectAll("g.node").each(function() {
-          const datum = d3.select(this).datum();
-          if (!datum) return;
-          d3.select(this).attr(
-            "transform",
-            `translate(${datum.x || 0},${datum.y || 0})`
-          );
-        });
-        g.selectAll("line").each(function() {
-          const l = d3.select(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;
-          d3.select(this).attr("x1", s.x).attr("y1", s.y).attr("x2", t.x).attr("y2", t.y);
-        });
-      } catch (e) {
-      }
-    }, [nodes, links]);
+      const g = d32.select(gRef.current);
+      g.selectAll("g.node").each(function() {
+        const datum = d32.select(this).datum();
+        if (!datum) return;
+        d32.select(this).attr(
+          "transform",
+          `translate(${datum.x || 0},${datum.y || 0})`
+        );
+      });
+      g.selectAll("line").each(function() {
+        const l = d32.select(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;
+        d32.select(this).attr("x1", s.x).attr("y1", s.y).attr("x2", t.x).attr("y2", t.y);
+      });
+    }, [nodes, initialLinks]);
     const handleDragStart = useCallback(
       (event, node) => {
         if (!enableDrag) return;
@@ -403,103 +482,50 @@ var ForceDirectedGraph = forwardRef(
         node.fx = node.x;
         node.fy = node.y;
         setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
-        try {
-          stop();
-        } catch (e) {
-        }
+        stop();
       },
-      [enableDrag, restart]
+      [enableDrag, stop]
     );
-    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;
-        try {
-          setForcesEnabled(true);
-          restart();
-        } catch (e) {
-        }
-        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]);
     useEffect(() => {
       if (!gRef.current || !enableDrag) return;
-      const g = d3.select(gRef.current);
-      const dragBehavior = d3.drag().on("start", function(event) {
-        try {
-          const target = event.sourceEvent && event.sourceEvent.target || event.target;
-          const grp = target.closest?.("g.node");
-          const id = grp?.getAttribute("data-id");
-          if (!id) return;
-          const node = nodes.find((n) => n.id === id);
-          if (!node) return;
-          if (!internalDragEnabledRef.current) return;
-          if (!event.active) restart();
-          dragActiveRef.current = true;
-          dragNodeRef.current = node;
-          node.fx = node.x;
-          node.fy = node.y;
-          setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
-        } catch (e) {
-        }
-      }).on("drag", function(event) {
+      const g = d32.select(gRef.current);
+      const dragBehavior = d32.drag().on("start", (event) => {
+        const target = event.sourceEvent && event.sourceEvent.target || event.target;
+        const grp = target.closest?.("g.node");
+        const id = grp?.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;
+        node.fx = node.x;
+        node.fy = node.y;
+        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();
-        const x = (event.sourceEvent.clientX - rect.left - transform.x) / transform.k;
-        const y = (event.sourceEvent.clientY - rect.top - transform.y) / transform.k;
-        dragNodeRef.current.fx = x;
-        dragNodeRef.current.fy = y;
-      }).on("end", function() {
-        try {
-          setForcesEnabled(true);
-          restart();
-        } catch (e) {
-        }
+        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();
       });
-      try {
-        g.selectAll("g.node").call(dragBehavior);
-      } catch (e) {
-      }
+      g.selectAll("g.node").call(dragBehavior);
       return () => {
-        try {
-          g.selectAll("g.node").on(".drag", null);
-        } catch (e) {
-        }
+        g.selectAll("g.node").on(".drag", null);
       };
-    }, [gRef, enableDrag, nodes, transform, restart]);
-    const handleNodeClick = useCallback(
-      (node) => {
-        onNodeClick?.(node);
-      },
-      [onNodeClick]
-    );
+    }, [
+      gRef,
+      enableDrag,
+      nodes,
+      transform,
+      restart,
+      setForcesEnabled,
+      internalDragEnabledRef
+    ]);
     const handleNodeDoubleClick = useCallback(
       (event, node) => {
         event.stopPropagation();
@@ -521,29 +547,6 @@ var ForceDirectedGraph = forwardRef(
       },
       [enableDrag, restart]
     );
-    const handleCanvasDoubleClick = useCallback(() => {
-      nodes.forEach((node) => {
-        node.fx = null;
-        node.fy = null;
-      });
-      setPinnedNodes(/* @__PURE__ */ new Set());
-      restart();
-    }, [nodes, restart]);
-    const handleNodeMouseEnter = useCallback(
-      (node) => {
-        onNodeHover?.(node);
-      },
-      [onNodeHover]
-    );
-    const handleNodeMouseLeave = useCallback(() => {
-      onNodeHover?.(null);
-    }, [onNodeHover]);
-    const handleLinkClick = useCallback(
-      (link) => {
-        onLinkClick?.(link);
-      },
-      [onLinkClick]
-    );
     return /* @__PURE__ */ jsxs(
       "svg",
       {
@@ -551,7 +554,14 @@ var ForceDirectedGraph = forwardRef(
         width,
         height,
         className: cn("bg-white dark:bg-gray-900", className),
-        onDoubleClick: handleCanvasDoubleClick,
+        onDoubleClick: () => {
+          nodes.forEach((n) => {
+            n.fx = null;
+            n.fy = null;
+          });
+          setPinnedNodes(/* @__PURE__ */ new Set());
+          restart();
+        },
         children: [
           /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
             "marker",
@@ -567,11 +577,11 @@ var ForceDirectedGraph = forwardRef(
             }
           ) }),
           /* @__PURE__ */ jsxs("g", { ref: gRef, children: [
-            links.map((link, i) => /* @__PURE__ */ jsx(
+            initialLinks.map((link, i) => /* @__PURE__ */ jsx(
               LinkItem_default,
               {
                 link,
-                onClick: handleLinkClick,
+                onClick: onLinkClick,
                 defaultWidth: defaultLinkWidth,
                 showLabel: showLinkLabels,
                 nodes
@@ -588,41 +598,15 @@ var ForceDirectedGraph = forwardRef(
                 defaultNodeSize,
                 defaultNodeColor,
                 showLabel: showNodeLabels,
-                onClick: handleNodeClick,
+                onClick: onNodeClick,
                 onDoubleClick: handleNodeDoubleClick,
-                onMouseEnter: handleNodeMouseEnter,
-                onMouseLeave: handleNodeMouseLeave,
+                onMouseEnter: (n) => onNodeHover?.(n),
+                onMouseLeave: () => onNodeHover?.(null),
                 onMouseDown: handleDragStart
               },
               node.id
             )),
-            packageBounds && Object.keys(packageBounds).length > 0 && /* @__PURE__ */ jsx("g", { className: "package-boundaries", pointerEvents: "none", children: Object.entries(packageBounds).map(([pid, b]) => /* @__PURE__ */ jsxs("g", { children: [
-              /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  cx: b.x,
-                  cy: b.y,
-                  r: b.r,
-                  fill: "rgba(148,163,184,0.06)",
-                  stroke: "#475569",
-                  strokeWidth: 2,
-                  strokeDasharray: "6 6",
-                  opacity: 0.9
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "text",
-                {
-                  x: b.x,
-                  y: Math.max(12, b.y - b.r + 14),
-                  fill: "#475569",
-                  fontSize: 11,
-                  textAnchor: "middle",
-                  pointerEvents: "none",
-                  children: pid.replace(/^pkg:/, "")
-                }
-              )
-            ] }, pid)) })
+            /* @__PURE__ */ jsx(PackageBoundaries, { packageBounds: packageBounds || {} })
           ] })
         ]
       }