@aiready/components 0.13.18 → 0.13.20

package/dist/charts/ForceDirectedGraph.js

@@ -1,10 +1,288 @@
-import React, { forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
-import * as d32 from 'd3';
+import { forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle, useMemo } from 'react';
+import * as d33 from 'd3';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
-// src/charts/ForceDirectedGraph.tsx
+// src/charts/force-directed/useGraphInteractions.ts
+function pinNode(node) {
+  node.fx = node.x;
+  node.fy = node.y;
+}
+function unpinNode(node) {
+  node.fx = null;
+  node.fy = null;
+}
+function unpinAllNodes(nodes) {
+  nodes.forEach(unpinNode);
+}
+function useGraphZoom(svgRef, gRef, enableZoom, setTransform, transformRef) {
+  useEffect(() => {
+    if (!enableZoom || !svgRef.current || !gRef.current) return;
+    const svg = d33.select(svgRef.current);
+    const g = d33.select(gRef.current);
+    const zoom3 = d33.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]);
+}
+function useNodeInteractions(enableDrag, _nodes, _pinnedNodes, setPinnedNodes, restart, stop) {
+  const handleDragStart = useCallback(
+    (event, node) => {
+      if (!enableDrag) return;
+      event.preventDefault();
+      event.stopPropagation();
+      pinNode(node);
+      setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
+      stop();
+    },
+    [enableDrag, stop, setPinnedNodes]
+  );
+  const handleNodeDoubleClick = 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]
+  );
+  return { handleDragStart, handleNodeDoubleClick };
+}
+
+// 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";
+
+// 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;
+    }
+  });
+}
+
+// src/charts/force-directed/useGraphLayout.ts
+function useGraphLayout(initialNodes, width, height, layout, restart) {
+  const nodes = useMemo(() => {
+    if (!initialNodes || !initialNodes.length) return initialNodes;
+    const copy = initialNodes.map((n) => ({ ...n }));
+    if (layout === "circular") applyCircularLayout(copy, width, height);
+    else if (layout === "hierarchical")
+      applyHierarchicalLayout(copy, width, height);
+    else applyInitialForceLayout(copy, width, height);
+    return copy;
+  }, [initialNodes, width, height, layout]);
+  useEffect(() => {
+    if (!nodes || nodes.length === 0) return;
+    if (layout === "circular") applyCircularLayout(nodes, width, height);
+    else if (layout === "hierarchical")
+      applyHierarchicalLayout(nodes, width, height);
+    restart();
+  }, [layout, nodes, width, height, restart]);
+  return { nodes };
+}
+function useSimulationControls() {
+  const restart = useCallback(() => {
+  }, []);
+  const stop = useCallback(() => {
+  }, []);
+  const setForcesEnabled = useCallback((enabled) => {
+  }, []);
+  return { restart, stop, setForcesEnabled };
+}
+function useImperativeHandleMethods({
+  nodes,
+  pinnedNodes,
+  setPinnedNodes,
+  restart,
+  width,
+  height,
+  layout,
+  handleLayoutChange,
+  svgRef,
+  gRef,
+  setTransform,
+  internalDragEnabledRef
+}) {
+  const pinAll = useCallback(() => {
+    const newPinned = /* @__PURE__ */ new Set();
+    nodes.forEach((node) => {
+      pinNode(node);
+      newPinned.add(node.id);
+    });
+    setPinnedNodes(newPinned);
+    restart();
+  }, [nodes, setPinnedNodes, restart]);
+  const unpinAll = useCallback(() => {
+    unpinAllNodes(nodes);
+    setPinnedNodes(/* @__PURE__ */ new Set());
+    restart();
+  }, [nodes, setPinnedNodes, restart]);
+  const resetLayout = useCallback(() => {
+    unpinAllNodes(nodes);
+    setPinnedNodes(/* @__PURE__ */ new Set());
+    restart();
+  }, [nodes, setPinnedNodes, restart]);
+  const fitView = useCallback(() => {
+    if (!svgRef.current || !nodes.length) return;
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    nodes.forEach((node) => {
+      if (node.x !== void 0 && node.y !== void 0) {
+        const size = node.size || DEFAULT_NODE_SIZE;
+        minX = Math.min(minX, node.x - size);
+        maxX = Math.max(maxX, node.x + size);
+        minY = Math.min(minY, node.y - size);
+        maxY = Math.max(maxY, node.y + size);
+      }
+    });
+    if (!isFinite(minX)) return;
+    const scale = Math.min(
+      (width - FIT_VIEW_PADDING * 2) / (maxX - minX),
+      (height - FIT_VIEW_PADDING * 2) / (maxY - minY),
+      10
+    );
+    const x = width / 2 - (minX + maxX) / 2 * scale;
+    const y = height / 2 - (minY + maxY) / 2 * scale;
+    if (gRef.current && svgRef.current) {
+      const svg = d33.select(svgRef.current);
+      const newTransform = d33.zoomIdentity.translate(x, y).scale(scale);
+      svg.transition().duration(TRANSITION_DURATION_MS).call(d33.zoom().transform, newTransform);
+      setTransform(newTransform);
+    }
+  }, [nodes, width, height, svgRef, gRef, setTransform]);
+  const getPinnedNodes = useCallback(
+    () => Array.from(pinnedNodes),
+    [pinnedNodes]
+  );
+  const setDragMode = useCallback(
+    (enabled) => {
+      internalDragEnabledRef.current = enabled;
+    },
+    [internalDragEnabledRef]
+  );
+  const setLayoutMethod = useCallback(
+    (newLayout) => {
+      handleLayoutChange(newLayout);
+    },
+    [handleLayoutChange]
+  );
+  const getLayout = useCallback(() => layout, [layout]);
+  return {
+    pinAll,
+    unpinAll,
+    resetLayout,
+    fitView,
+    getPinnedNodes,
+    setDragMode,
+    setLayout: setLayoutMethod,
+    getLayout
+  };
+}
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -137,21 +415,6 @@ 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
 }) => {
@@ -185,118 +448,94 @@ var PackageBoundaries = ({
   ] }, 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;
+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__ */ jsxs(
+    "svg",
+    {
+      ref: svgRef,
+      width,
+      height,
+      className: cn("bg-white dark:bg-gray-900", className),
+      onDoubleClick: () => {
+        unpinAllNodes(nodes);
+        setPinnedNodes(/* @__PURE__ */ new Set());
+        restart();
+      },
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+          "marker",
+          {
+            id: "arrow",
+            viewBox: "0 0 10 10",
+            refX: "20",
+            refY: "5",
+            markerWidth: "6",
+            markerHeight: "6",
+            orient: "auto",
+            children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: defaultLinkColor })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("g", { ref: gRef, children: [
+          links.map((link, i) => /* @__PURE__ */ jsx(
+            LinkItem_default,
+            {
+              link,
+              onClick: onLinkClick,
+              defaultWidth: defaultLinkWidth,
+              showLabel: showLinkLabels,
+              nodes
+            },
+            `link-${i}`
+          )),
+          nodes.map((node) => /* @__PURE__ */ jsx(
+            NodeItem_default,
+            {
+              node,
+              isSelected: selectedNodeId === node.id,
+              isHovered: hoveredNodeId === node.id,
+              pinned: pinnedNodes.has(node.id),
+              defaultNodeSize,
+              defaultNodeColor,
+              showLabel: showNodeLabels,
+              onClick: onNodeClick,
+              onDoubleClick: handleNodeDoubleClick,
+              onMouseEnter: (n) => onNodeHover?.(n),
+              onMouseLeave: () => onNodeHover?.(null),
+              onMouseDown: handleDragStart
+            },
+            node.id
+          )),
+          /* @__PURE__ */ jsx(PackageBoundaries, { packageBounds: packageBounds || {} })
+        ] })
+      ]
     }
-  });
-}
-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]);
-}
-function pinNode(node) {
-  node.fx = node.x;
-  node.fy = node.y;
-}
-function unpinNode(node) {
-  node.fx = null;
-  node.fy = null;
-}
-function unpinAllNodes(nodes) {
-  nodes.forEach(unpinNode);
-}
+  );
+};
 var ForceDirectedGraph = forwardRef(
   ({
     nodes: initialNodes,
@@ -310,12 +549,12 @@ var ForceDirectedGraph = forwardRef(
     onLinkClick,
     selectedNodeId,
     hoveredNodeId,
-    defaultNodeColor = DEFAULT_NODE_COLOR,
-    defaultNodeSize = DEFAULT_NODE_SIZE,
-    defaultLinkColor = DEFAULT_LINK_COLOR,
-    defaultLinkWidth = DEFAULT_LINK_WIDTH,
-    showNodeLabels = true,
-    showLinkLabels = false,
+    defaultNodeColor,
+    defaultNodeSize,
+    defaultLinkColor,
+    defaultLinkWidth,
+    showNodeLabels,
+    showLinkLabels,
     className,
     manualLayout = false,
     onManualLayoutChange,
@@ -333,9 +572,8 @@ var ForceDirectedGraph = forwardRef(
     const internalDragEnabledRef = useRef(enableDrag);
     const [layout, setLayout] = useState(externalLayout || "force");
     useEffect(() => {
-      if (externalLayout && externalLayout !== layout) {
+      if (externalLayout && externalLayout !== layout)
         setLayout(externalLayout);
-      }
     }, [externalLayout, layout]);
     const handleLayoutChange = useCallback(
       (newLayout) => {
@@ -347,87 +585,32 @@ var ForceDirectedGraph = forwardRef(
     useEffect(() => {
       internalDragEnabledRef.current = enableDrag;
     }, [enableDrag]);
-    const nodes = React.useMemo(() => {
-      if (!initialNodes || !initialNodes.length) return initialNodes;
-      const copy = initialNodes.map((n) => ({ ...n }));
-      if (layout === "circular") applyCircularLayout(copy, width, height);
-      else if (layout === "hierarchical")
-        applyHierarchicalLayout(copy, width, height);
-      else applyInitialForceLayout(copy, width, height);
-      return copy;
-    }, [initialNodes, width, height, layout]);
-    const restart = React.useCallback(() => {
-    }, []);
-    const stop = React.useCallback(() => {
-    }, []);
-    const setForcesEnabled = React.useCallback((enabled) => {
-    }, []);
-    useEffect(() => {
-      if (!nodes || nodes.length === 0) return;
-      if (layout === "circular") applyCircularLayout(nodes, width, height);
-      else if (layout === "hierarchical")
-        applyHierarchicalLayout(nodes, width, height);
-      restart();
-    }, [layout, nodes, width, height, restart]);
+    const { restart, stop, setForcesEnabled } = useSimulationControls();
+    const { nodes } = useGraphLayout(
+      initialNodes,
+      width,
+      height,
+      layout,
+      restart
+    );
     useEffect(() => {
-      if (manualLayout || pinnedNodes.size > 0) setForcesEnabled(false);
-      else setForcesEnabled(true);
+      setForcesEnabled(!(manualLayout || pinnedNodes.size > 0));
     }, [manualLayout, pinnedNodes, setForcesEnabled]);
     useImperativeHandle(
       ref,
-      () => ({
-        pinAll: () => {
-          const newPinned = /* @__PURE__ */ new Set();
-          nodes.forEach((node) => {
-            pinNode(node);
-            newPinned.add(node.id);
-          });
-          setPinnedNodes(newPinned);
-          restart();
-        },
-        unpinAll: () => {
-          unpinAllNodes(nodes);
-          setPinnedNodes(/* @__PURE__ */ new Set());
-          restart();
-        },
-        resetLayout: () => {
-          unpinAllNodes(nodes);
-          setPinnedNodes(/* @__PURE__ */ new Set());
-          restart();
-        },
-        fitView: () => {
-          if (!svgRef.current || !nodes.length) return;
-          let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
-          nodes.forEach((node) => {
-            if (node.x !== void 0 && node.y !== void 0) {
-              const size = node.size || DEFAULT_NODE_SIZE;
-              minX = Math.min(minX, node.x - size);
-              maxX = Math.max(maxX, node.x + size);
-              minY = Math.min(minY, node.y - size);
-              maxY = Math.max(maxY, node.y + size);
-            }
-          });
-          if (!isFinite(minX)) return;
-          const scale = Math.min(
-            (width - FIT_VIEW_PADDING * 2) / (maxX - minX),
-            (height - FIT_VIEW_PADDING * 2) / (maxY - minY),
-            10
-          );
-          const x = width / 2 - (minX + maxX) / 2 * scale;
-          const y = height / 2 - (minY + maxY) / 2 * scale;
-          if (gRef.current && svgRef.current) {
-            const svg = 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);
-          }
-        },
-        getPinnedNodes: () => Array.from(pinnedNodes),
-        setDragMode: (enabled) => {
-          internalDragEnabledRef.current = enabled;
-        },
-        setLayout: (newLayout) => handleLayoutChange(newLayout),
-        getLayout: () => layout
+      () => useImperativeHandleMethods({
+        nodes,
+        pinnedNodes,
+        setPinnedNodes,
+        restart,
+        width,
+        height,
+        layout,
+        handleLayoutChange,
+        svgRef,
+        gRef,
+        setTransform,
+        internalDragEnabledRef
       }),
       [
         nodes,
@@ -441,8 +624,7 @@ var ForceDirectedGraph = forwardRef(
       ]
     );
     useEffect(() => {
-      if (typeof onManualLayoutChange === "function")
-        onManualLayoutChange(manualLayout);
+      onManualLayoutChange?.(manualLayout);
     }, [manualLayout, onManualLayoutChange]);
     useGraphZoom(svgRef, gRef, enableZoom, setTransform, transformRef);
     useWindowDrag(
@@ -458,57 +640,48 @@ var ForceDirectedGraph = forwardRef(
     );
     useEffect(() => {
       if (!gRef.current) return;
-      const g = d32.select(gRef.current);
+      const g = d33.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})`
-        );
+        const d = d33.select(this).datum();
+        if (d)
+          d33.select(this).attr(
+            "transform",
+            `translate(${d.x || 0},${d.y || 0})`
+          );
       });
       g.selectAll("line").each(function() {
-        const l = d32.select(this).datum();
+        const l = d33.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);
+        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)
+          d33.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;
-        event.preventDefault();
-        event.stopPropagation();
-        dragActiveRef.current = true;
-        dragNodeRef.current = node;
-        pinNode(node);
-        setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
-        stop();
-      },
-      [enableDrag, stop]
+    const { handleDragStart, handleNodeDoubleClick } = useNodeInteractions(
+      enableDrag,
+      nodes,
+      pinnedNodes,
+      setPinnedNodes,
+      restart,
+      stop
     );
     useEffect(() => {
       if (!gRef.current || !enableDrag) return;
-      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");
+      const g = d33.select(gRef.current);
+      const dragBehavior = d33.drag().on("start", (event) => {
+        const target = event.sourceEvent?.target || event.target;
+        const id = target.closest?.("g.node")?.getAttribute("data-id");
         if (!id || !internalDragEnabledRef.current) return;
         const node = nodes.find((n) => n.id === id);
         if (!node) return;
         if (!event.active) restart();
         dragActiveRef.current = true;
         dragNodeRef.current = node;
-        pinNode(node);
-        setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
       }).on("drag", (event) => {
-        if (!dragActiveRef.current || !dragNodeRef.current) return;
-        const svg = svgRef.current;
-        if (!svg) return;
-        const rect = svg.getBoundingClientRect();
+        if (!dragActiveRef.current || !dragNodeRef.current || !svgRef.current)
+          return;
+        const rect = svgRef.current.getBoundingClientRect();
         dragNodeRef.current.fx = (event.sourceEvent.clientX - rect.left - transform.x) / transform.k;
         dragNodeRef.current.fy = (event.sourceEvent.clientY - rect.top - transform.y) / transform.k;
       }).on("end", () => {
@@ -519,99 +692,40 @@ var ForceDirectedGraph = forwardRef(
       return () => {
         g.selectAll("g.node").on(".drag", null);
       };
-    }, [
-      gRef,
-      enableDrag,
-      nodes,
-      transform,
-      restart,
-      setForcesEnabled,
-      internalDragEnabledRef
-    ]);
-    const handleNodeDoubleClick = useCallback(
-      (event, node) => {
-        event.stopPropagation();
-        if (!enableDrag) return;
-        if (node.fx === null || node.fx === void 0) {
-          pinNode(node);
-          setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
-        } else {
-          unpinNode(node);
-          setPinnedNodes((prev) => {
-            const next = new Set(prev);
-            next.delete(node.id);
-            return next;
-          });
-        }
-        restart();
-      },
-      [enableDrag, restart]
-    );
-    return /* @__PURE__ */ jsxs(
-      "svg",
+    }, [gRef, enableDrag, nodes, transform, restart, setForcesEnabled]);
+    return /* @__PURE__ */ jsx(
+      GraphCanvas,
       {
-        ref: svgRef,
+        svgRef,
+        gRef,
         width,
         height,
-        className: cn("bg-white dark:bg-gray-900", className),
-        onDoubleClick: () => {
-          unpinAllNodes(nodes);
-          setPinnedNodes(/* @__PURE__ */ new Set());
-          restart();
-        },
-        children: [
-          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
-            "marker",
-            {
-              id: "arrow",
-              viewBox: "0 0 10 10",
-              refX: "20",
-              refY: "5",
-              markerWidth: "6",
-              markerHeight: "6",
-              orient: "auto",
-              children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: defaultLinkColor })
-            }
-          ) }),
-          /* @__PURE__ */ jsxs("g", { ref: gRef, children: [
-            initialLinks.map((link, i) => /* @__PURE__ */ jsx(
-              LinkItem_default,
-              {
-                link,
-                onClick: onLinkClick,
-                defaultWidth: defaultLinkWidth,
-                showLabel: showLinkLabels,
-                nodes
-              },
-              `link-${i}`
-            )),
-            nodes.map((node) => /* @__PURE__ */ jsx(
-              NodeItem_default,
-              {
-                node,
-                isSelected: selectedNodeId === node.id,
-                isHovered: hoveredNodeId === node.id,
-                pinned: pinnedNodes.has(node.id),
-                defaultNodeSize,
-                defaultNodeColor,
-                showLabel: showNodeLabels,
-                onClick: onNodeClick,
-                onDoubleClick: handleNodeDoubleClick,
-                onMouseEnter: (n) => onNodeHover?.(n),
-                onMouseLeave: () => onNodeHover?.(null),
-                onMouseDown: handleDragStart
-              },
-              node.id
-            )),
-            /* @__PURE__ */ jsx(PackageBoundaries, { packageBounds: packageBounds || {} })
-          ] })
-        ]
+        className,
+        nodes,
+        links: initialLinks,
+        pinnedNodes,
+        selectedNodeId,
+        hoveredNodeId,
+        defaultNodeColor,
+        defaultNodeSize,
+        defaultLinkColor,
+        defaultLinkWidth,
+        showNodeLabels,
+        showLinkLabels,
+        onNodeClick,
+        onNodeHover,
+        onLinkClick,
+        packageBounds,
+        handleNodeDoubleClick,
+        handleDragStart,
+        restart,
+        setPinnedNodes
       }
     );
   }
 );
 ForceDirectedGraph.displayName = "ForceDirectedGraph";
 
-export { ForceDirectedGraph };
+export { ForceDirectedGraph, ForceDirectedGraph as default };
 //# sourceMappingURL=ForceDirectedGraph.js.map
 //# sourceMappingURL=ForceDirectedGraph.js.map