@aiready/components 0.13.5 → 0.13.7

package/src/charts/ForceDirectedGraph.tsx

@@ -10,55 +10,110 @@ import * as d3 from 'd3';
 import { cn } from '../utils/cn';
 import NodeItem from './NodeItem';
 import LinkItem from './LinkItem';
+import { PackageBoundaries } from './PackageBoundaries';
+import {
+  applyCircularLayout,
+  applyHierarchicalLayout,
+  applyInitialForceLayout,
+} from './layout-utils';
+import {
+  DEFAULT_NODE_COLOR,
+  DEFAULT_NODE_SIZE,
+  DEFAULT_LINK_COLOR,
+  DEFAULT_LINK_WIDTH,
+  FIT_VIEW_PADDING,
+  TRANSITION_DURATION_MS,
+} from './constants';
+import { useGraphZoom, useWindowDrag } from './hooks';
 
 import { GraphNode, GraphLink, LayoutType } from './types';
 export type { GraphNode, GraphLink, LayoutType };
 
+/**
+ * Handle for imperative actions on the ForceDirectedGraph.
+ */
 export interface ForceDirectedGraphHandle {
+  /** Pins all nodes to their current positions. */
   pinAll: () => void;
+  /** Unpins all nodes, allowing them to move freely in the simulation. */
   unpinAll: () => void;
+  /** Resets the layout by unpinning all nodes and restarting the simulation. */
   resetLayout: () => void;
+  /** Rescales and re-centers the view to fit all nodes. */
   fitView: () => void;
+  /** Returns the IDs of all currently pinned nodes. */
   getPinnedNodes: () => string[];
   /**
    * Enable or disable drag mode for nodes.
    * @param enabled - When true, nodes can be dragged; when false, dragging is disabled
    */
   setDragMode: (enabled: boolean) => void;
+  /** Sets the current layout type. */
   setLayout: (layout: LayoutType) => void;
+  /** Gets the current layout type. */
   getLayout: () => LayoutType;
 }
 
+/**
+ * Props for the ForceDirectedGraph component.
+ */
 export interface ForceDirectedGraphProps {
+  /** Array of node objects to render. */
   nodes: GraphNode[];
+  /** Array of link objects to render. */
   links: GraphLink[];
+  /** Width of the SVG canvas. */
   width: number;
+  /** Height of the SVG canvas. */
   height: number;
+  /** Whether to enable zoom and pan interactions. */
   enableZoom?: boolean;
+  /** Whether to enable node dragging. */
   enableDrag?: boolean;
+  /** Callback fired when a node is clicked. */
   onNodeClick?: (node: GraphNode) => void;
+  /** Callback fired when a node is hovered. */
   onNodeHover?: (node: GraphNode | null) => void;
+  /** Callback fired when a link is clicked. */
   onLinkClick?: (link: GraphLink) => void;
+  /** ID of the currently selected node. */
   selectedNodeId?: string;
+  /** ID of the currently hovered node. */
   hoveredNodeId?: string;
+  /** Default fallback color for nodes. */
   defaultNodeColor?: string;
+  /** Default fallback size for nodes. */
   defaultNodeSize?: number;
+  /** Default fallback color for links. */
   defaultLinkColor?: string;
+  /** Default fallback width for links. */
   defaultLinkWidth?: number;
+  /** Whether to show labels on nodes. */
   showNodeLabels?: boolean;
+  /** Whether to show labels on links. */
   showLinkLabels?: boolean;
+  /** Additional CSS classes for the SVG element. */
   className?: string;
+  /** Whether manual layout mode is active. */
   manualLayout?: boolean;
-  /**
-   * Callback fired when manual layout mode changes.
-   * @param enabled - True when manual layout mode is enabled, false when disabled
-   */
+  /** Callback fired when manual layout mode changes. */
   onManualLayoutChange?: (enabled: boolean) => void;
+  /** Optional bounds for package groups. */
   packageBounds?: Record<string, { x: number; y: number; r: number }>;
+  /** Current layout algorithm. */
   layout?: LayoutType;
+  /** Callback fired when layout changes. */
   onLayoutChange?: (layout: LayoutType) => void;
 }
 
+/**
+ * An interactive Force-Directed Graph component using D3.js for physics and React for rendering.
+ *
+ * Supports multiple layout modes (force, circular, hierarchical), pinning, zooming, and dragging.
+ * Optimal for visualizing complex dependency networks and codebase structures.
+ *
+ * @lastUpdated 2026-03-18
+ */
 export const ForceDirectedGraph = forwardRef<
   ForceDirectedGraphHandle,
   ForceDirectedGraphProps
@@ -76,10 +131,10 @@ export const 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,
@@ -106,7 +161,7 @@ export const ForceDirectedGraph = forwardRef<
       if (externalLayout && externalLayout !== layout) {
         setLayout(externalLayout);
       }
-    }, [externalLayout]);
+    }, [externalLayout, layout]);
 
     // Handle layout change and notify parent
     const handleLayoutChange = useCallback(
@@ -122,138 +177,38 @@ export const ForceDirectedGraph = forwardRef<
       internalDragEnabledRef.current = enableDrag;
     }, [enableDrag]);
 
-    // Static layout - compute positions directly without force simulation
+    // Initial positioning - delegate to layout utils
     const nodes = React.useMemo(() => {
       if (!initialNodes || !initialNodes.length) return initialNodes;
-
-      const centerX = width / 2;
-      const centerY = height / 2;
-
-      // For force layout, use random positions but don't animate
-      if (layout === 'force') {
-        return initialNodes.map((n: any) => ({
-          ...n,
-          x: Math.random() * width,
-          y: Math.random() * height,
-        }));
-      }
-
-      // For circular layout, arrange in a circle
-      if (layout === 'circular') {
-        const radius = Math.min(width, height) * 0.35;
-        return initialNodes.map((n: any, i: number) => ({
-          ...n,
-          x:
-            centerX +
-            Math.cos((2 * Math.PI * i) / initialNodes.length) * radius,
-          y:
-            centerY +
-            Math.sin((2 * Math.PI * i) / initialNodes.length) * radius,
-        }));
-      }
-
-      // For hierarchical layout, arrange in a grid
-      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: any, i: number) => ({
-          ...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]);
 
-    // Static links - just use initial links
-    const links = initialLinks;
-
-    // No force simulation - static layout only
-    const restart = React.useCallback(() => {
-      // No-op for static layout
-    }, []);
-
-    const stop = React.useCallback(() => {
-      // No-op for static layout
-    }, []);
-
+    // No force simulation - static layout only (stubs for API compatibility)
+    const restart = React.useCallback(() => {}, []);
+    const stop = React.useCallback(() => {}, []);
     const setForcesEnabled = React.useCallback((enabled?: boolean) => {
-      // No-op for static layout; accept optional `enabled` arg for API compatibility
       void enabled;
     }, []);
 
-    // Remove package bounds effect - boundary packing disabled for faster convergence
-
     // Apply layout-specific positioning when layout changes
     useEffect(() => {
       if (!nodes || nodes.length === 0) return;
+      if (layout === 'circular') applyCircularLayout(nodes, width, height);
+      else if (layout === 'hierarchical')
+        applyHierarchicalLayout(nodes, width, height);
 
-      const applyLayout = () => {
-        const centerX = width / 2;
-        const centerY = height / 2;
-
-        if (layout === 'circular') {
-          // Place all nodes in a circle
-          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') {
-          // Place packages in rows, files within packages in columns
-          const groups = new Map<string, typeof nodes>();
-          nodes.forEach((n: any) => {
-            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;
-
-            // Place group nodes in a small circle within their area
-            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;
-              });
-            }
-          });
-        }
-        // 'force' layout - just restart with default behavior (no fx/fy set)
-
-        try {
-          restart();
-        } catch (e) {
-          void e;
-        }
-      };
-
-      applyLayout();
+      restart();
     }, [layout, nodes, width, height, restart]);
 
     // If manual layout is enabled or any nodes are pinned, disable forces
     useEffect(() => {
-      try {
-        if (manualLayout || pinnedNodes.size > 0) setForcesEnabled(false);
-        else setForcesEnabled(true);
-      } catch (e) {
-        void e;
-      }
+      if (manualLayout || pinnedNodes.size > 0) setForcesEnabled(false);
+      else setForcesEnabled(true);
     }, [manualLayout, pinnedNodes, setForcesEnabled]);
 
     // Expose imperative handle for parent components
@@ -270,7 +225,6 @@ export const ForceDirectedGraph = forwardRef<
           setPinnedNodes(newPinned);
           restart();
         },
-
         unpinAll: () => {
           nodes.forEach((node) => {
             node.fx = null;
@@ -279,7 +233,6 @@ export const ForceDirectedGraph = forwardRef<
           setPinnedNodes(new Set());
           restart();
         },
-
         resetLayout: () => {
           nodes.forEach((node) => {
             node.fx = null;
@@ -288,278 +241,175 @@ export const ForceDirectedGraph = forwardRef<
           setPinnedNodes(new Set());
           restart();
         },
-
         fitView: () => {
           if (!svgRef.current || !nodes.length) return;
-
-          // Calculate bounds
           let minX = Infinity,
             maxX = -Infinity,
             minY = Infinity,
             maxY = -Infinity;
           nodes.forEach((node) => {
             if (node.x !== undefined && node.y !== undefined) {
-              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);
               maxY = Math.max(maxY, node.y + size);
             }
           });
-
           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)
+              .duration(TRANSITION_DURATION_MS)
               .call((d3 as any).zoom().transform as any, newTransform);
             setTransform(newTransform);
           }
         },
-
         getPinnedNodes: () => Array.from(pinnedNodes),
-
         setDragMode: (enabled: boolean) => {
           internalDragEnabledRef.current = enabled;
         },
-
-        setLayout: (newLayout: LayoutType) => {
-          handleLayoutChange(newLayout);
-        },
-
+        setLayout: (newLayout: LayoutType) => handleLayoutChange(newLayout),
         getLayout: () => layout,
       }),
-      [nodes, pinnedNodes, restart, width, height, layout, handleLayoutChange]
+      [
+        nodes,
+        pinnedNodes,
+        restart,
+        width,
+        height,
+        layout,
+        handleLayoutChange,
+        setForcesEnabled,
+      ]
     );
 
-    // Notify parent when manual layout mode changes (uses the prop so it's not unused)
+    // Notify parent when manual layout mode changes
     useEffect(() => {
-      try {
-        if (typeof onManualLayoutChange === 'function')
-          onManualLayoutChange(manualLayout);
-      } catch (e) {
-        void e;
-      }
+      if (typeof onManualLayoutChange === 'function')
+        onManualLayoutChange(manualLayout);
     }, [manualLayout, onManualLayoutChange]);
 
-    // Set up zoom behavior
-    useEffect(() => {
-      if (!enableZoom || !svgRef.current || !gRef.current) return;
-
-      const svg = d3.select(svgRef.current);
-      const g = d3.select(gRef.current);
-
-      const zoom = (d3 as any)
-        .zoom()
-        .scaleExtent([0.1, 10])
-        .on('zoom', (event: any) => {
-          g.attr('transform', event.transform);
-          transformRef.current = event.transform;
-          setTransform(event.transform);
-        });
-
-      svg.call(zoom);
-
-      return () => {
-        svg.on('.zoom', null);
-      };
-    }, [enableZoom]);
+    // Use custom hooks for zoom and window-level drag
+    useGraphZoom(svgRef, gRef, enableZoom, setTransform, transformRef);
+    useWindowDrag(
+      enableDrag,
+      svgRef,
+      transformRef,
+      dragActiveRef,
+      dragNodeRef,
+      () => {
+        setForcesEnabled(true);
+        restart();
+      }
+    );
 
-    // Run a one-time DOM positioning pass when nodes/links change so elements
-    // rendered by React are positioned to the simulation's seeded coordinates
+    // Run positioning pass when nodes/links change
     useEffect(() => {
       if (!gRef.current) return;
-      try {
-        const g = d3.select(gRef.current);
-        g.selectAll('g.node').each(function (this: any) {
-          const datum = d3.select(this).datum() as any;
-          if (!datum) return;
-          d3.select(this).attr(
-            'transform',
-            `translate(${datum.x || 0},${datum.y || 0})`
-          );
-        });
-
-        g.selectAll('line').each(function (this: any) {
-          const l = d3.select(this).datum() as any;
-          if (!l) return;
-          const s: any =
-            typeof l.source === 'object'
-              ? l.source
-              : nodes.find((n) => n.id === l.source) || l.source;
-          const t: any =
-            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) {
-        void e;
-      }
-    }, [nodes, links]);
+      const g = d3.select(gRef.current);
+      g.selectAll('g.node').each(function (this: any) {
+        const datum = d3.select(this).datum() as any;
+        if (!datum) return;
+        d3.select(this).attr(
+          'transform',
+          `translate(${datum.x || 0},${datum.y || 0})`
+        );
+      });
+      g.selectAll('line').each(function (this: any) {
+        const l = d3.select(this).datum() as any;
+        if (!l) return;
+        const s: any =
+          typeof l.source === 'object'
+            ? l.source
+            : nodes.find((n) => n.id === l.source) || l.source;
+        const t: any =
+          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);
+      });
+    }, [nodes, initialLinks]);
 
-    // Set up drag behavior with global listeners for smoother dragging
     const handleDragStart = useCallback(
       (event: React.MouseEvent, node: GraphNode) => {
         if (!enableDrag) return;
         event.preventDefault();
         event.stopPropagation();
-        // pause forces while dragging to avoid the whole graph moving
         dragActiveRef.current = true;
         dragNodeRef.current = node;
         node.fx = node.x;
         node.fy = node.y;
         setPinnedNodes((prev) => new Set([...prev, node.id]));
-        try {
-          stop();
-        } catch (e) {
-          void e;
-        }
+        stop();
       },
-      [enableDrag, restart]
+      [enableDrag, stop]
     );
 
-    useEffect(() => {
-      if (!enableDrag) return;
-
-      const handleWindowMove = (event: MouseEvent) => {
-        if (!dragActiveRef.current || !dragNodeRef.current) return;
-        const svg = svgRef.current;
-        if (!svg) return;
-        const rect = svg.getBoundingClientRect();
-        const t: any = 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;
-        // Keep fx/fy set to pin the node where it was dropped.
-        try {
-          setForcesEnabled(true);
-          restart();
-        } catch (e) {
-          void e;
-        }
-        dragNodeRef.current = null;
-        dragActiveRef.current = false;
-      };
-
-      const handleWindowLeave = (event: MouseEvent) => {
-        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]);
-
-    // Attach d3.drag behavior to node groups rendered by React. This helps make
-    // dragging more robust across transforms and pointer behaviors.
+    // Attach d3.drag behavior to nodes
     useEffect(() => {
       if (!gRef.current || !enableDrag) return;
       const g = d3.select(gRef.current);
       const dragBehavior = (d3 as any)
         .drag()
-        .on('start', function (this: any, event: any) {
-          try {
-            const target =
-              (event.sourceEvent && (event.sourceEvent.target as Element)) ||
-              (event.target as Element);
-            const grp = target.closest?.('g.node') as Element | null;
-            const id = grp?.getAttribute('data-id');
-            if (!id) return;
-            const node = nodes.find((n) => n.id === id) as
-              | GraphNode
-              | undefined;
-            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) => new Set([...prev, node.id]));
-          } catch (e) {
-            void e;
-          }
+        .on('start', (event: any) => {
+          const target =
+            (event.sourceEvent && (event.sourceEvent.target as Element)) ||
+            (event.target as Element);
+          const grp = target.closest?.('g.node') as Element | null;
+          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) => new Set([...prev, node.id]));
         })
-        .on('drag', function (this: any, event: any) {
+        .on('drag', (event: any) => {
           if (!dragActiveRef.current || !dragNodeRef.current) return;
           const svg = svgRef.current;
           if (!svg) return;
           const rect = svg.getBoundingClientRect();
-          const x =
+          dragNodeRef.current.fx =
             (event.sourceEvent.clientX - rect.left - transform.x) / transform.k;
-          const y =
+          dragNodeRef.current.fy =
             (event.sourceEvent.clientY - rect.top - transform.y) / transform.k;
-          dragNodeRef.current.fx = x;
-          dragNodeRef.current.fy = y;
         })
-        .on('end', function () {
-          // re-enable forces when drag ends
-          try {
-            setForcesEnabled(true);
-            restart();
-          } catch (e) {
-            void e;
-          }
+        .on('end', () => {
+          setForcesEnabled(true);
+          restart();
         });
 
-      try {
-        g.selectAll('g.node').call(dragBehavior as any);
-      } catch (e) {
-        void e;
-      }
-
+      g.selectAll('g.node').call(dragBehavior as any);
       return () => {
-        try {
-          g.selectAll('g.node').on('.drag', null as any);
-        } catch (e) {
-          void e;
-        }
+        g.selectAll('g.node').on('.drag', null as any);
       };
-    }, [gRef, enableDrag, nodes, transform, restart]);
-
-    const handleNodeClick = useCallback(
-      (node: GraphNode) => {
-        onNodeClick?.(node);
-      },
-      [onNodeClick]
-    );
+    }, [
+      gRef,
+      enableDrag,
+      nodes,
+      transform,
+      restart,
+      setForcesEnabled,
+      internalDragEnabledRef,
+    ]);
 
     const handleNodeDoubleClick = useCallback(
       (event: React.MouseEvent, node: GraphNode) => {
@@ -583,43 +433,22 @@ export const ForceDirectedGraph = forwardRef<
       [enableDrag, restart]
     );
 
-    const handleCanvasDoubleClick = useCallback(() => {
-      nodes.forEach((node) => {
-        node.fx = null;
-        node.fy = null;
-      });
-      setPinnedNodes(new Set());
-      restart();
-    }, [nodes, restart]);
-
-    const handleNodeMouseEnter = useCallback(
-      (node: GraphNode) => {
-        onNodeHover?.(node);
-      },
-      [onNodeHover]
-    );
-
-    const handleNodeMouseLeave = useCallback(() => {
-      onNodeHover?.(null);
-    }, [onNodeHover]);
-
-    const handleLinkClick = useCallback(
-      (link: GraphLink) => {
-        onLinkClick?.(link);
-      },
-      [onLinkClick]
-    );
-
     return (
       <svg
         ref={svgRef}
         width={width}
         height={height}
         className={cn('bg-white dark:bg-gray-900', className)}
-        onDoubleClick={handleCanvasDoubleClick}
+        onDoubleClick={() => {
+          nodes.forEach((n) => {
+            n.fx = null;
+            n.fy = null;
+          });
+          setPinnedNodes(new Set());
+          restart();
+        }}
       >
         <defs>
-          {/* Arrow marker for directed graphs */}
           <marker
             id="arrow"
             viewBox="0 0 10 10"
@@ -634,65 +463,35 @@ export const ForceDirectedGraph = forwardRef<
         </defs>
 
         <g ref={gRef}>
-          {/* Render links via LinkItem (positions updated by D3) */}
-          {links.map((link, i) => (
+          {initialLinks.map((link, i) => (
             <LinkItem
               key={`link-${i}`}
               link={link as GraphLink}
-              onClick={handleLinkClick}
+              onClick={onLinkClick}
               defaultWidth={defaultLinkWidth}
               showLabel={showLinkLabels}
               nodes={nodes}
             />
           ))}
 
-          {/* Render nodes via NodeItem (D3 will set transforms) */}
           {nodes.map((node) => (
             <NodeItem
               key={node.id}
-              node={node as GraphNode}
+              node={node}
               isSelected={selectedNodeId === node.id}
               isHovered={hoveredNodeId === node.id}
               pinned={pinnedNodes.has(node.id)}
               defaultNodeSize={defaultNodeSize}
               defaultNodeColor={defaultNodeColor}
               showLabel={showNodeLabels}
-              onClick={handleNodeClick}
+              onClick={onNodeClick}
               onDoubleClick={handleNodeDoubleClick}
-              onMouseEnter={handleNodeMouseEnter}
-              onMouseLeave={handleNodeMouseLeave}
+              onMouseEnter={(n) => onNodeHover?.(n)}
+              onMouseLeave={() => onNodeHover?.(null)}
               onMouseDown={handleDragStart}
             />
           ))}
-          {/* Package boundary circles (from parent pack layout) - drawn on top for visibility */}
-          {packageBounds && Object.keys(packageBounds).length > 0 && (
-            <g className="package-boundaries" pointerEvents="none">
-              {Object.entries(packageBounds).map(([pid, b]) => (
-                <g key={pid}>
-                  <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}
-                  />
-                  <text
-                    x={b.x}
-                    y={Math.max(12, b.y - b.r + 14)}
-                    fill="#475569"
-                    fontSize={11}
-                    textAnchor="middle"
-                    pointerEvents="none"
-                  >
-                    {pid.replace(/^pkg:/, '')}
-                  </text>
-                </g>
-              ))}
-            </g>
-          )}
+          <PackageBoundaries packageBounds={packageBounds || {}} />
         </g>
       </svg>
     );