@aiready/components 0.13.14 → 0.13.19

package/dist/index.js

@@ -7,7 +7,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AnimatePresence, motion } from 'framer-motion';
 import { X, MessageSquare, Loader2, Send } from 'lucide-react';
 import { getRatingSlug, getRating as getRating$1 } from '@aiready/core/client';
-import * as d34 from 'd3';
+import * as d32 from 'd3';
 
 // src/components/button.tsx
 function cn(...inputs) {
@@ -1954,27 +1954,58 @@ function formatDecimal(value, decimals = 2) {
 }
 function scoreColor(score) {
   if (score == null) return "text-slate-400";
-  if (score >= 75) return "text-emerald-400";
-  if (score >= 50) return "text-amber-400";
-  return "text-red-400";
+  const rating = getRatingSlug(score);
+  switch (rating) {
+    case "excellent":
+    case "good":
+      return "text-emerald-400";
+    case "fair":
+      return "text-amber-400";
+    default:
+      return "text-red-400";
+  }
 }
 function scoreBg(score) {
   if (score == null) return "bg-slate-800/50 border-slate-700";
-  if (score >= 75) return "bg-emerald-900/30 border-emerald-500/30";
-  if (score >= 50) return "bg-amber-900/30 border-amber-500/30";
-  return "bg-red-900/30 border-red-500/30";
+  const rating = getRatingSlug(score);
+  switch (rating) {
+    case "excellent":
+    case "good":
+      return "bg-emerald-900/30 border-emerald-500/30";
+    case "fair":
+      return "bg-amber-900/30 border-amber-500/30";
+    default:
+      return "bg-red-900/30 border-red-500/30";
+  }
 }
 function scoreLabel(score) {
   if (score == null) return "Not analyzed";
-  if (score >= 75) return "AI-Ready";
-  if (score >= 50) return "Needs Improvement";
-  return "Critical Issues";
+  const rating = getRatingSlug(score);
+  switch (rating) {
+    case "excellent":
+      return "Excellent";
+    case "good":
+      return "AI-Ready";
+    case "fair":
+      return "Fair";
+    case "needs-work":
+      return "Needs Improvement";
+    default:
+      return "Critical Issues";
+  }
 }
 function scoreGlow(score) {
   if (score == null) return "";
-  if (score >= 75) return "shadow-emerald-500/20";
-  if (score >= 50) return "shadow-amber-500/20";
-  return "shadow-red-500/20";
+  const rating = getRatingSlug(score);
+  switch (rating) {
+    case "excellent":
+    case "good":
+      return "shadow-emerald-500/20";
+    case "fair":
+      return "shadow-amber-500/20";
+    default:
+      return "shadow-red-500/20";
+  }
 }
 function getScoreRating(score) {
   if (score == null) return "critical";
@@ -1996,7 +2027,7 @@ function useD3(renderFn, dependencies = []) {
   const ref = useRef(null);
   useEffect(() => {
     if (ref.current) {
-      const selection = d34.select(ref.current);
+      const selection = d32.select(ref.current);
       renderFn(selection);
     }
   }, dependencies);
@@ -2006,7 +2037,7 @@ function useD3WithResize(renderFn, dependencies = []) {
   const ref = useRef(null);
   useEffect(() => {
     if (!ref.current) return;
-    const selection = d34.select(ref.current);
+    const selection = d32.select(ref.current);
     const render = () => renderFn(selection);
     render();
     const resizeObserver = new ResizeObserver(() => {
@@ -2086,11 +2117,11 @@ function useForceSimulation(initialNodes, initialLinks, options) {
     } catch (e) {
       seedRandomPositions(nodesCopy, width, height);
     }
-    const simulation = d34.forceSimulation(
+    const simulation = d32.forceSimulation(
       nodesCopy
     );
     try {
-      const linkForce = d34.forceLink(
+      const linkForce = d32.forceLink(
         linksCopy
       );
       linkForce.id((d) => d.id).distance(
@@ -2099,31 +2130,31 @@ function useForceSimulation(initialNodes, initialLinks, options) {
       simulation.force("link", linkForce);
     } catch (e) {
       try {
-        simulation.force("link", d34.forceLink(linksCopy));
+        simulation.force("link", d32.forceLink(linksCopy));
       } catch (e2) {
       }
     }
     try {
       simulation.force(
         "charge",
-        d34.forceManyBody().strength(chargeStrength)
+        d32.forceManyBody().strength(chargeStrength)
       );
       simulation.force(
         "center",
-        d34.forceCenter(width / 2, height / 2).strength(centerStrength)
+        d32.forceCenter(width / 2, height / 2).strength(centerStrength)
       );
-      const collide = d34.forceCollide().radius((d) => {
+      const collide = d32.forceCollide().radius((d) => {
         const nodeSize = d && d.size ? d.size : 10;
         return nodeSize + collisionRadius;
       }).strength(collisionStrength);
       simulation.force("collision", collide);
       simulation.force(
         "x",
-        d34.forceX(width / 2).strength(Math.max(0.02, centerStrength * 0.5))
+        d32.forceX(width / 2).strength(Math.max(0.02, centerStrength * 0.5))
       );
       simulation.force(
         "y",
-        d34.forceY(height / 2).strength(Math.max(0.02, centerStrength * 0.5))
+        d32.forceY(height / 2).strength(Math.max(0.02, centerStrength * 0.5))
       );
       simulation.alphaDecay(alphaDecay);
       simulation.velocityDecay(velocityDecay);
@@ -2335,135 +2366,101 @@ function useDrag(simulation) {
     onDragEnd: dragEnded
   };
 }
-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__ */ 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__ */ 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 : 0.9
-          }
-        ),
-        pinned && /* @__PURE__ */ jsx(
-          "circle",
-          {
-            r: nodeSize + 4,
-            fill: "none",
-            stroke: "#ff6b6b",
-            strokeWidth: 1,
-            opacity: 0.5,
-            className: "pointer-events-none"
-          }
-        ),
-        showLabel && node.label && /* @__PURE__ */ jsx(
-          "text",
-          {
-            y: nodeSize + 15,
-            fill: "#333",
-            fontSize: "12",
-            textAnchor: "middle",
-            dominantBaseline: "middle",
-            pointerEvents: "none",
-            className: "select-none",
-            children: node.label
-          }
-        )
-      ]
+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 = 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 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();
     },
-    node.id
+    [enableDrag, stop, setPinnedNodes]
   );
-};
-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__ */ jsxs("g", { children: [
-    /* @__PURE__ */ 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: 0.6,
-        className: "cursor-pointer transition-opacity hover:opacity-100",
-        onClick: () => onClick?.(link)
-      }
-    ),
-    showLabel && link.label && /* @__PURE__ */ jsx(
-      "text",
-      {
-        x: midX,
-        y: midY,
-        fill: "#666",
-        fontSize: "10",
-        textAnchor: "middle",
-        dominantBaseline: "middle",
-        pointerEvents: "none",
-        children: link.label
+  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;
+        });
       }
-    )
-  ] });
-};
-var LinkItem_default = LinkItem;
+      restart();
+    },
+    [enableDrag, restart, setPinnedNodes]
+  );
+  return { handleDragStart, handleNodeDoubleClick };
+}
 
 // src/charts/constants.ts
 var DEFAULT_NODE_COLOR = "#64748b";
@@ -2479,39 +2476,6 @@ 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) {
@@ -2562,382 +2526,148 @@ function applyInitialForceLayout(nodes, width, height) {
     }
   });
 }
-function useGraphZoom(svgRef, gRef, enableZoom, setTransform, transformRef) {
+
+// 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 (!enableZoom || !svgRef.current || !gRef.current) return;
-    const svg = d34.select(svgRef.current);
-    const g = d34.select(gRef.current);
-    const zoom3 = d34.zoom().scaleExtent([0.1, 10]).on("zoom", (event) => {
-      g.attr("transform", event.transform);
-      transformRef.current = event.transform;
-      setTransform(event.transform);
+    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);
     });
-    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,
-    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 = useRef(null);
-    const gRef = useRef(null);
-    const [transform, setTransform] = useState({ k: 1, x: 0, y: 0 });
-    const transformRef = useRef(transform);
-    const dragNodeRef = useRef(null);
-    const dragActiveRef = useRef(false);
-    const [pinnedNodes, setPinnedNodes] = useState(/* @__PURE__ */ new Set());
-    const internalDragEnabledRef = useRef(enableDrag);
-    const [layout, setLayout] = useState(externalLayout || "force");
-    useEffect(() => {
-      if (externalLayout && externalLayout !== layout) {
-        setLayout(externalLayout);
-      }
-    }, [externalLayout, layout]);
-    const handleLayoutChange = useCallback(
-      (newLayout) => {
-        setLayout(newLayout);
-        onLayoutChange?.(newLayout);
-      },
-      [onLayoutChange]
-    );
-    useEffect(() => {
-      internalDragEnabledRef.current = enableDrag;
-    }, [enableDrag]);
-    const nodes = React2__default.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 = React2__default.useCallback(() => {
-    }, []);
-    const stop = React2__default.useCallback(() => {
-    }, []);
-    const setForcesEnabled = React2__default.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]);
-    useEffect(() => {
-      if (manualLayout || pinnedNodes.size > 0) setForcesEnabled(false);
-      else setForcesEnabled(true);
-    }, [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 = d34.select(svgRef.current);
-            const newTransform = d34.zoomIdentity.translate(x, y).scale(scale);
-            svg.transition().duration(TRANSITION_DURATION_MS).call(d34.zoom().transform, newTransform);
-            setTransform(newTransform);
-          }
-        },
-        getPinnedNodes: () => Array.from(pinnedNodes),
-        setDragMode: (enabled) => {
-          internalDragEnabledRef.current = enabled;
-        },
-        setLayout: (newLayout) => handleLayoutChange(newLayout),
-        getLayout: () => layout
-      }),
-      [
-        nodes,
-        pinnedNodes,
-        restart,
-        width,
-        height,
-        layout,
-        handleLayoutChange,
-        setForcesEnabled
-      ]
-    );
-    useEffect(() => {
-      if (typeof onManualLayoutChange === "function")
-        onManualLayoutChange(manualLayout);
-    }, [manualLayout, onManualLayoutChange]);
-    useGraphZoom(svgRef, gRef, enableZoom, setTransform, transformRef);
-    useWindowDrag(
-      enableDrag,
-      svgRef,
-      transformRef,
-      dragActiveRef,
-      dragNodeRef,
-      () => {
-        setForcesEnabled(true);
-        restart();
-      }
-    );
-    useEffect(() => {
-      if (!gRef.current) return;
-      const g = d34.select(gRef.current);
-      g.selectAll("g.node").each(function() {
-        const datum = d34.select(this).datum();
-        if (!datum) return;
-        d34.select(this).attr(
-          "transform",
-          `translate(${datum.x || 0},${datum.y || 0})`
-        );
-      });
-      g.selectAll("line").each(function() {
-        const l = d34.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;
-        d34.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]
-    );
-    useEffect(() => {
-      if (!gRef.current || !enableDrag) return;
-      const g = d34.select(gRef.current);
-      const dragBehavior = d34.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;
-        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 = 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",
-      {
-        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: [
-            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 || {} })
-          ] })
-        ]
+    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
     );
-  }
-);
-ForceDirectedGraph.displayName = "ForceDirectedGraph";
+    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);
+    }
+  }, [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
+  };
+}
+var ControlButton = ({
+  onClick,
+  active = false,
+  icon,
+  label,
+  disabled = false
+}) => /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+  /* @__PURE__ */ 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__ */ jsx("span", { className: "text-lg", children: icon })
+    }
+  ),
+  /* @__PURE__ */ 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,
@@ -2960,24 +2690,6 @@ var GraphControls = ({
     "bottom-left": "bottom-4 left-4",
     "bottom-right": "bottom-4 right-4"
   };
-  const ControlButton = ({ onClick, active = false, icon, label, disabled = false }) => /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
-    /* @__PURE__ */ 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__ */ jsx("span", { className: "text-lg", children: icon })
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-50", children: label })
-  ] });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3003,7 +2715,7 @@ var GraphControls = ({
               onClick: () => onManualLayoutToggle?.(!manualLayout),
               active: manualLayout,
               icon: "\u{1F527}",
-              label: manualLayout ? "Manual layout: ON (drag freely)" : "Manual layout: OFF (forces active)"
+              label: manualLayout ? "Manual layout: ON" : "Manual layout: OFF"
             }
           ),
           /* @__PURE__ */ jsx("div", { className: "w-8 h-px bg-gray-300 dark:bg-gray-600 mx-auto my-1" }),
@@ -3057,15 +2769,6 @@ var GraphControls = ({
             /* @__PURE__ */ jsx("strong", { children: "Pinned:" }),
             " ",
             pinnedCount
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-2 text-gray-500 dark:text-gray-500 leading-snug", children: [
-            /* @__PURE__ */ jsx("strong", { children: "Tips:" }),
-            /* @__PURE__ */ jsxs("ul", { className: "mt-1 ml-1 space-y-0.5", children: [
-              /* @__PURE__ */ jsx("li", { children: "\u2022 Drag nodes to reposition" }),
-              /* @__PURE__ */ jsx("li", { children: "\u2022 Double-click to pin/unpin" }),
-              /* @__PURE__ */ jsx("li", { children: "\u2022 Double-click canvas to unpin all" }),
-              /* @__PURE__ */ jsx("li", { children: "\u2022 Scroll to zoom" })
-            ] })
           ] })
         ] })
       ]
@@ -3073,6 +2776,445 @@ var GraphControls = ({
   );
 };
 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__ */ 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__ */ 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 : 0.9
+          }
+        ),
+        pinned && /* @__PURE__ */ jsx(
+          "circle",
+          {
+            r: nodeSize + 4,
+            fill: "none",
+            stroke: "#ff6b6b",
+            strokeWidth: 1,
+            opacity: 0.5,
+            className: "pointer-events-none"
+          }
+        ),
+        showLabel && node.label && /* @__PURE__ */ 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__ */ jsxs("g", { children: [
+    /* @__PURE__ */ 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: 0.6,
+        className: "cursor-pointer transition-opacity hover:opacity-100",
+        onClick: () => onClick?.(link)
+      }
+    ),
+    showLabel && link.label && /* @__PURE__ */ 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__ */ 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";
+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 || {} })
+        ] })
+      ]
+    }
+  );
+};
+var ForceDirectedGraph = 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 = useRef(null);
+    const gRef = useRef(null);
+    const [transform, setTransform] = useState({ k: 1, x: 0, y: 0 });
+    const transformRef = useRef(transform);
+    const dragNodeRef = useRef(null);
+    const dragActiveRef = useRef(false);
+    const [pinnedNodes, setPinnedNodes] = useState(/* @__PURE__ */ new Set());
+    const internalDragEnabledRef = useRef(enableDrag);
+    const [layout, setLayout] = useState(externalLayout || "force");
+    useEffect(() => {
+      if (externalLayout && externalLayout !== layout)
+        setLayout(externalLayout);
+    }, [externalLayout, layout]);
+    const handleLayoutChange = useCallback(
+      (newLayout) => {
+        setLayout(newLayout);
+        onLayoutChange?.(newLayout);
+      },
+      [onLayoutChange]
+    );
+    useEffect(() => {
+      internalDragEnabledRef.current = enableDrag;
+    }, [enableDrag]);
+    const { restart, stop, setForcesEnabled } = useSimulationControls();
+    const { nodes } = useGraphLayout(
+      initialNodes,
+      width,
+      height,
+      layout,
+      restart
+    );
+    useEffect(() => {
+      setForcesEnabled(!(manualLayout || pinnedNodes.size > 0));
+    }, [manualLayout, pinnedNodes, setForcesEnabled]);
+    useImperativeHandle(
+      ref,
+      () => useImperativeHandleMethods({
+        nodes,
+        pinnedNodes,
+        setPinnedNodes,
+        restart,
+        width,
+        height,
+        layout,
+        handleLayoutChange,
+        svgRef,
+        gRef,
+        setTransform,
+        internalDragEnabledRef
+      }),
+      [
+        nodes,
+        pinnedNodes,
+        restart,
+        width,
+        height,
+        layout,
+        handleLayoutChange,
+        setForcesEnabled
+      ]
+    );
+    useEffect(() => {
+      onManualLayoutChange?.(manualLayout);
+    }, [manualLayout, onManualLayoutChange]);
+    useGraphZoom(svgRef, gRef, enableZoom, setTransform, transformRef);
+    useWindowDrag(
+      enableDrag,
+      svgRef,
+      transformRef,
+      dragActiveRef,
+      dragNodeRef,
+      () => {
+        setForcesEnabled(true);
+        restart();
+      }
+    );
+    useEffect(() => {
+      if (!gRef.current) return;
+      const g = d32.select(gRef.current);
+      g.selectAll("g.node").each(function() {
+        const d = d32.select(this).datum();
+        if (d)
+          d32.select(this).attr(
+            "transform",
+            `translate(${d.x || 0},${d.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);
+        const t = typeof l.target === "object" ? l.target : nodes.find((n) => n.id === l.target);
+        if (s && t)
+          d32.select(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
+    );
+    useEffect(() => {
+      if (!gRef.current || !enableDrag) return;
+      const g = d32.select(gRef.current);
+      const dragBehavior = d32.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;
+      }).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__ */ 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";
 
 export { AlertCircleIcon, AlertTriangleIcon, ArrowRightIcon, Badge, BrainIcon, Breadcrumb, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartIcon, Checkbox, ClockIcon, CodeBlock, Container, EmptyState, ErrorDisplay, FeedbackWidget, FileIcon, ForceDirectedGraph, GlassCard, GlassCardContent, GlassCardHeader, GraphControls, Grid, HammerIcon, InfoIcon, InlineCode, Input, Label, LoadingOverlay, LoadingSpinner, Modal, PlatformShell, PlayIcon, RadioGroup, RefreshCwIcon, RobotIcon, RocketIcon, SaveIcon, ScoreBar, ScoreCard, ScoreCircle, Select, Separator, SettingsIcon, ShieldCheckIcon, ShieldIcon, Stack, Switch, TargetIcon, TerminalIcon, Textarea, ThemeProvider, TrashIcon, TrendingUpIcon, UploadIcon, WalletIcon, ZapIcon, badgeVariants, buttonVariants, chartColors, cn, domainColors, formatCompactNumber, formatDate, formatDateTime, formatDecimal, formatDuration, formatFileSize, formatMetric, formatNumber, formatPercentage, formatRange, formatRelativeTime, getDomainColor, getScoreRating, getSeverityColor, hexToRgba, scoreBg, scoreColor, scoreGlow, scoreLabel, severityColors, useD3, useD3WithResize, useDebounce, useDrag, useForceSimulation, useTheme };
 //# sourceMappingURL=index.js.map