@aiready/components 0.1.0 → 0.1.4

package/dist/charts/ForceDirectedGraph.js

@@ -1,5 +1,5 @@
-import { useRef, useState, useEffect, useCallback } from 'react';
-import * as d3 from 'd3';
+import React, { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback } from 'react';
+import * as d32 from 'd3';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -16,39 +16,184 @@ function useForceSimulation(initialNodes, initialLinks, options) {
     width,
     height,
     alphaDecay = 0.0228,
-    velocityDecay = 0.4
+    velocityDecay = 0.4,
+    alphaTarget = 0,
+    warmAlpha = 0.3,
+    alphaMin = 0.01,
+    // @ts-ignore allow extra option
+    stabilizeOnStop = true,
+    onTick,
+    // Optional throttle in milliseconds for tick updates (reduce React re-renders)
+    // Lower values = smoother but more CPU; default ~30ms (~33fps)
+    // @ts-ignore allow extra option
+    tickThrottleMs = 33,
+    // @ts-ignore allow extra option
+    maxSimulationTimeMs = 3e3
   } = options;
   const [nodes, setNodes] = useState(initialNodes);
   const [links, setLinks] = useState(initialLinks);
   const [isRunning, setIsRunning] = useState(false);
   const [alpha, setAlpha] = useState(1);
   const simulationRef = useRef(null);
+  const stopTimeoutRef = useRef(null);
+  const nodesKey = initialNodes.map((n) => n.id).join("|");
+  const linksKey = (initialLinks || []).map((l) => {
+    const s = typeof l.source === "string" ? l.source : l.source?.id;
+    const t = typeof l.target === "string" ? l.target : l.target?.id;
+    return `${s}->${t}:${l.type || ""}`;
+  }).join("|");
   useEffect(() => {
     const nodesCopy = initialNodes.map((node) => ({ ...node }));
     const linksCopy = initialLinks.map((link) => ({ ...link }));
-    const simulation = d3.forceSimulation(nodesCopy).force(
-      "link",
-      d3.forceLink(linksCopy).id((d) => d.id).distance(linkDistance).strength(linkStrength)
-    ).force("charge", d3.forceManyBody().strength(chargeStrength)).force("center", d3.forceCenter(width / 2, height / 2).strength(centerStrength)).force(
-      "collision",
-      d3.forceCollide().radius(collisionRadius).strength(collisionStrength)
-    ).alphaDecay(alphaDecay).velocityDecay(velocityDecay);
+    try {
+      nodesCopy.forEach((n, i) => {
+        const angle = i * 2 * Math.PI / nodesCopy.length;
+        const radius = Math.min(width, height) * 0.45;
+        n.x = width / 2 + radius * Math.cos(angle);
+        n.y = height / 2 + radius * Math.sin(angle);
+        n.vx = (Math.random() - 0.5) * 2;
+        n.vy = (Math.random() - 0.5) * 2;
+      });
+    } catch (e) {
+      nodesCopy.forEach((n) => {
+        n.x = Math.random() * width;
+        n.y = Math.random() * height;
+        n.vx = (Math.random() - 0.5) * 10;
+        n.vy = (Math.random() - 0.5) * 10;
+      });
+    }
+    const simulation = d32.forceSimulation(nodesCopy);
+    try {
+      const linkForce = d32.forceLink(linksCopy);
+      linkForce.id((d) => d.id).distance((d) => d && d.distance != null ? d.distance : linkDistance).strength(linkStrength);
+      simulation.force("link", linkForce);
+    } catch (e) {
+      try {
+        simulation.force("link", d32.forceLink(linksCopy));
+      } catch (e2) {
+      }
+    }
+    try {
+      simulation.force("charge", d32.forceManyBody().strength(chargeStrength));
+      simulation.force("center", d32.forceCenter(width / 2, height / 2).strength(centerStrength));
+      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", d32.forceX(width / 2).strength(Math.max(0.02, centerStrength * 0.5)));
+      simulation.force("y", d32.forceY(height / 2).strength(Math.max(0.02, centerStrength * 0.5)));
+      simulation.alphaDecay(alphaDecay);
+      simulation.velocityDecay(velocityDecay);
+      simulation.alphaMin(alphaMin);
+      try {
+        simulation.alphaTarget(alphaTarget);
+      } catch (e) {
+      }
+      try {
+        simulation.alpha(warmAlpha);
+      } catch (e) {
+      }
+    } catch (e) {
+    }
     simulationRef.current = simulation;
-    simulation.on("tick", () => {
-      setNodes([...nodesCopy]);
-      setLinks([...linksCopy]);
-      setAlpha(simulation.alpha());
-      setIsRunning(simulation.alpha() > simulation.alphaMin());
-    });
+    if (stopTimeoutRef.current != null) {
+      try {
+        globalThis.clearTimeout(stopTimeoutRef.current);
+      } catch (e) {
+      }
+      stopTimeoutRef.current = null;
+    }
+    if (maxSimulationTimeMs && maxSimulationTimeMs > 0) {
+      stopTimeoutRef.current = globalThis.setTimeout(() => {
+        try {
+          if (stabilizeOnStop) {
+            nodesCopy.forEach((n) => {
+              n.vx = 0;
+              n.vy = 0;
+              if (typeof n.x === "number") n.x = Number(n.x.toFixed(3));
+              if (typeof n.y === "number") n.y = Number(n.y.toFixed(3));
+            });
+          }
+          simulation.alpha(0);
+          simulation.stop();
+        } catch (e) {
+        }
+        setIsRunning(false);
+        setNodes([...nodesCopy]);
+        setLinks([...linksCopy]);
+      }, maxSimulationTimeMs);
+    }
+    let rafId = null;
+    let lastUpdate = 0;
+    const tickHandler = () => {
+      try {
+        if (typeof onTick === "function") onTick(nodesCopy, linksCopy, simulation);
+      } catch (e) {
+      }
+      try {
+        if (simulation.alpha() <= alphaMin) {
+          try {
+            if (stabilizeOnStop) {
+              nodesCopy.forEach((n) => {
+                n.vx = 0;
+                n.vy = 0;
+                if (typeof n.x === "number") n.x = Number(n.x.toFixed(3));
+                if (typeof n.y === "number") n.y = Number(n.y.toFixed(3));
+              });
+            }
+            simulation.stop();
+          } catch (e) {
+          }
+          setAlpha(simulation.alpha());
+          setIsRunning(false);
+          setNodes([...nodesCopy]);
+          setLinks([...linksCopy]);
+          return;
+        }
+      } catch (e) {
+      }
+      const now = Date.now();
+      const shouldUpdate = now - lastUpdate >= tickThrottleMs;
+      if (rafId == null && shouldUpdate) {
+        rafId = (globalThis.requestAnimationFrame || ((cb) => setTimeout(cb, 16)))(() => {
+          rafId = null;
+          lastUpdate = Date.now();
+          setNodes([...nodesCopy]);
+          setLinks([...linksCopy]);
+          setAlpha(simulation.alpha());
+          setIsRunning(simulation.alpha() > simulation.alphaMin());
+        });
+      }
+    };
+    simulation.on("tick", tickHandler);
     simulation.on("end", () => {
       setIsRunning(false);
     });
     return () => {
+      try {
+        simulation.on("tick", null);
+      } catch (e) {
+      }
+      if (stopTimeoutRef.current != null) {
+        try {
+          globalThis.clearTimeout(stopTimeoutRef.current);
+        } catch (e) {
+        }
+        stopTimeoutRef.current = null;
+      }
+      if (rafId != null) {
+        try {
+          (globalThis.cancelAnimationFrame || ((id) => clearTimeout(id)))(rafId);
+        } catch (e) {
+        }
+        rafId = null;
+      }
       simulation.stop();
     };
   }, [
-    initialNodes,
-    initialLinks,
+    nodesKey,
+    linksKey,
     chargeStrength,
     linkDistance,
     linkStrength,
@@ -58,12 +203,38 @@ function useForceSimulation(initialNodes, initialLinks, options) {
     width,
     height,
     alphaDecay,
-    velocityDecay
+    velocityDecay,
+    alphaTarget,
+    alphaMin,
+    stabilizeOnStop,
+    tickThrottleMs,
+    maxSimulationTimeMs
   ]);
   const restart = () => {
     if (simulationRef.current) {
-      simulationRef.current.alpha(1).restart();
+      try {
+        simulationRef.current.alphaTarget(warmAlpha).restart();
+      } catch (e) {
+        simulationRef.current.restart();
+      }
       setIsRunning(true);
+      if (stopTimeoutRef.current != null) {
+        try {
+          globalThis.clearTimeout(stopTimeoutRef.current);
+        } catch (e) {
+        }
+        stopTimeoutRef.current = null;
+      }
+      if (maxSimulationTimeMs && maxSimulationTimeMs > 0) {
+        stopTimeoutRef.current = globalThis.setTimeout(() => {
+          try {
+            simulationRef.current?.alpha(0);
+            simulationRef.current?.stop();
+          } catch (e) {
+          }
+          setIsRunning(false);
+        }, maxSimulationTimeMs);
+      }
     }
   };
   const stop = () => {
@@ -72,221 +243,699 @@ function useForceSimulation(initialNodes, initialLinks, options) {
       setIsRunning(false);
     }
   };
+  const originalForcesRef = useRef({ charge: chargeStrength, link: linkStrength, collision: collisionStrength });
+  const forcesEnabledRef = useRef(true);
+  const setForcesEnabled = (enabled) => {
+    const sim = simulationRef.current;
+    if (!sim) return;
+    if (forcesEnabledRef.current === enabled) return;
+    forcesEnabledRef.current = enabled;
+    try {
+      const charge = sim.force("charge");
+      if (charge && typeof charge.strength === "function") {
+        charge.strength(enabled ? originalForcesRef.current.charge : 0);
+      }
+      const link = sim.force("link");
+      if (link && typeof link.strength === "function") {
+        link.strength(enabled ? originalForcesRef.current.link : 0);
+      }
+    } catch (e) {
+    }
+  };
   return {
     nodes,
     links,
     restart,
     stop,
     isRunning,
-    alpha
+    alpha,
+    setForcesEnabled
   };
 }
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var ForceDirectedGraph = ({
-  nodes: initialNodes,
-  links: initialLinks,
-  width,
-  height,
-  simulationOptions,
-  enableZoom = true,
-  enableDrag = true,
-  onNodeClick,
-  onNodeHover,
-  onLinkClick,
-  selectedNodeId,
-  hoveredNodeId,
-  defaultNodeColor = "#69b3a2",
-  defaultNodeSize = 10,
-  defaultLinkColor = "#999",
-  defaultLinkWidth = 1,
-  showNodeLabels = true,
-  showLinkLabels = false,
-  className
+var NodeItem = ({
+  node,
+  isSelected,
+  isHovered,
+  pinned,
+  defaultNodeSize,
+  defaultNodeColor,
+  showLabel = true,
+  onClick,
+  onDoubleClick,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseDown
 }) => {
-  const svgRef = useRef(null);
-  const gRef = useRef(null);
-  const [transform, setTransform] = useState({ k: 1, x: 0, y: 0 });
-  const { nodes, links, restart } = useForceSimulation(initialNodes, initialLinks, {
+  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 ForceDirectedGraph = forwardRef(
+  ({
+    nodes: initialNodes,
+    links: initialLinks,
     width,
     height,
-    ...simulationOptions
-  });
-  useEffect(() => {
-    if (!enableZoom || !svgRef.current || !gRef.current) return;
-    const svg = d3.select(svgRef.current);
-    const g = d3.select(gRef.current);
-    const zoom2 = d3.zoom().scaleExtent([0.1, 10]).on("zoom", (event) => {
-      g.attr("transform", event.transform);
-      setTransform(event.transform);
-    });
-    svg.call(zoom2);
-    return () => {
-      svg.on(".zoom", null);
+    simulationOptions,
+    enableZoom = true,
+    enableDrag = true,
+    onNodeClick,
+    onNodeHover,
+    onLinkClick,
+    selectedNodeId,
+    hoveredNodeId,
+    defaultNodeColor = "#69b3a2",
+    defaultNodeSize = 10,
+    defaultLinkColor = "#999",
+    defaultLinkWidth = 1,
+    showNodeLabels = true,
+    showLinkLabels = false,
+    className,
+    manualLayout = false,
+    onManualLayoutChange,
+    packageBounds
+  }, 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);
+    useEffect(() => {
+      internalDragEnabledRef.current = enableDrag;
+    }, [enableDrag]);
+    const onTick = (_nodesCopy, _linksCopy, _sim) => {
+      try {
+        const boundsToUse = clusterBounds?.bounds ?? packageBounds;
+        const nodeClusterMap = clusterBounds?.nodeToCluster ?? {};
+        if (boundsToUse) {
+          Object.values(nodesById).forEach((n) => {
+            if (!n) return;
+            const group = n.group ?? n.packageGroup;
+            const clusterKey = nodeClusterMap[n.id];
+            const key = clusterKey ?? (group ? `pkg:${group}` : void 0);
+            if (!key) return;
+            const center = boundsToUse[key];
+            if (!center) return;
+            const dx = center.x - (n.x ?? 0);
+            const dy = center.y - (n.y ?? 0);
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            const pullStrength = Math.min(0.5, 0.15 * (dist / (center.r || 200)) + 0.06);
+            if (!isNaN(pullStrength) && isFinite(pullStrength)) {
+              n.vx = (n.vx ?? 0) + dx / (dist || 1) * pullStrength;
+              n.vy = (n.vy ?? 0) + dy / (dist || 1) * pullStrength;
+            }
+            if (center.r && dist > center.r) {
+              const excess = (dist - center.r) / (dist || 1);
+              n.vx = (n.vx ?? 0) - dx * 0.02 * excess;
+              n.vy = (n.vy ?? 0) - dy * 0.02 * excess;
+            }
+          });
+        }
+      } catch (e) {
+      }
     };
-  }, [enableZoom]);
-  const handleDragStart = useCallback(
-    (event, node) => {
-      if (!enableDrag) return;
-      event.stopPropagation();
-      node.fx = node.x;
-      node.fy = node.y;
-      restart();
-    },
-    [enableDrag, restart]
-  );
-  const handleDrag = useCallback(
-    (event, node) => {
-      if (!enableDrag) return;
-      const svg = svgRef.current;
-      if (!svg) return;
-      const rect = svg.getBoundingClientRect();
-      const x = (event.clientX - rect.left - transform.x) / transform.k;
-      const y = (event.clientY - rect.top - transform.y) / transform.k;
-      node.fx = x;
-      node.fy = y;
-    },
-    [enableDrag, transform]
-  );
-  const handleDragEnd = useCallback(
-    (event, node) => {
-      if (!enableDrag) return;
-      event.stopPropagation();
-      node.fx = null;
-      node.fy = null;
-    },
-    [enableDrag]
-  );
-  const handleNodeClick = useCallback(
-    (node) => {
-      onNodeClick?.(node);
-    },
-    [onNodeClick]
-  );
-  const handleNodeMouseEnter = useCallback(
-    (node) => {
-      onNodeHover?.(node);
-    },
-    [onNodeHover]
-  );
-  const handleNodeMouseLeave = useCallback(() => {
-    onNodeHover?.(null);
-  }, [onNodeHover]);
-  const handleLinkClick = useCallback(
-    (link) => {
-      onLinkClick?.(link);
-    },
-    [onLinkClick]
-  );
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      ref: svgRef,
+    const { packageAreas, localPositions } = React.useMemo(() => {
+      try {
+        if (!initialNodes || !initialNodes.length) return { packageAreas: {}, localPositions: {} };
+        const groups = /* @__PURE__ */ new Map();
+        initialNodes.forEach((n) => {
+          const key = n.packageGroup || n.group || "root";
+          if (!groups.has(key)) groups.set(key, []);
+          groups.get(key).push(n);
+        });
+        const groupKeys = Array.from(groups.keys());
+        const children = groupKeys.map((k) => ({ name: k, value: Math.max(1, groups.get(k).length) }));
+        const root = d32.hierarchy({ children });
+        root.sum((d) => d.value);
+        const pack2 = d32.pack().size([width, height]).padding(Math.max(20, Math.min(width, height) * 0.03));
+        const packed = pack2(root);
+        const packageAreas2 = {};
+        if (packed.children) {
+          packed.children.forEach((c) => {
+            const name = c.data.name;
+            packageAreas2[name] = { x: c.x, y: c.y, r: Math.max(40, c.r) };
+          });
+        }
+        const localPositions2 = {};
+        groups.forEach((nodesInGroup, _key) => {
+          if (!nodesInGroup || nodesInGroup.length === 0) return;
+          const localNodes = nodesInGroup.map((n) => ({ id: n.id, x: Math.random() * 10 - 5, y: Math.random() * 10 - 5, size: n.size || 10 }));
+          const localLinks = (initialLinks || []).filter((l) => {
+            const s = typeof l.source === "string" ? l.source : l.source && l.source.id;
+            const t = typeof l.target === "string" ? l.target : l.target && l.target.id;
+            return localNodes.some((ln) => ln.id === s) && localNodes.some((ln) => ln.id === t);
+          }).map((l) => ({ source: typeof l.source === "string" ? l.source : l.source.id, target: typeof l.target === "string" ? l.target : l.target.id }));
+          if (localNodes.length === 1) {
+            localPositions2[localNodes[0].id] = { x: 0, y: 0 };
+            return;
+          }
+          const sim = d32.forceSimulation(localNodes).force("link", d32.forceLink(localLinks).id((d) => d.id).distance(30).strength(0.8)).force("charge", d32.forceManyBody().strength(-15)).force("collide", d32.forceCollide((d) => (d.size || 10) + 6).iterations(2)).stop();
+          const ticks = 300;
+          for (let i = 0; i < ticks; i++) sim.tick();
+          localNodes.forEach((ln) => {
+            localPositions2[ln.id] = { x: ln.x ?? 0, y: ln.y ?? 0 };
+          });
+        });
+        return { packageAreas: packageAreas2, localPositions: localPositions2 };
+      } catch (e) {
+        return { packageAreas: {}, localPositions: {} };
+      }
+    }, [initialNodes, initialLinks, width, height]);
+    const seededNodes = React.useMemo(() => {
+      if (!initialNodes || !Object.keys(packageAreas || {}).length) return initialNodes;
+      return initialNodes.map((n) => {
+        const key = n.packageGroup || n.group || "root";
+        const area = packageAreas[key];
+        const lp = localPositions[n.id];
+        if (!area || !lp) return n;
+        const scale = Math.max(0.5, area.r * 0.6 / (Math.max(1, Math.sqrt(lp.x * lp.x + lp.y * lp.y)) || 1));
+        return { ...n, x: area.x + lp.x * scale, y: area.y + lp.y * scale };
+      });
+    }, [initialNodes, packageAreas, localPositions]);
+    const { nodes, links, restart, stop, setForcesEnabled } = useForceSimulation(seededNodes || initialNodes, initialLinks, {
       width,
       height,
-      className: cn("bg-white dark:bg-gray-900", className),
-      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 })
+      chargeStrength: manualLayout ? 0 : void 0,
+      onTick,
+      ...simulationOptions
+    });
+    const nodesById = React.useMemo(() => {
+      const m = {};
+      (nodes || []).forEach((n) => {
+        if (n && n.id) m[n.id] = n;
+      });
+      return m;
+    }, [nodes]);
+    const clusterBounds = React.useMemo(() => {
+      try {
+        if (!links || !nodes) return null;
+        const nodeIds = new Set(nodes.map((n) => n.id));
+        const adj = /* @__PURE__ */ new Map();
+        nodes.forEach((n) => adj.set(n.id, /* @__PURE__ */ new Set()));
+        links.forEach((l) => {
+          const type = l.type || "reference";
+          if (type !== "dependency") return;
+          const s = typeof l.source === "string" ? l.source : l.source && l.source.id || null;
+          const t = typeof l.target === "string" ? l.target : l.target && l.target.id || null;
+          if (!s || !t) return;
+          if (!nodeIds.has(s) || !nodeIds.has(t)) return;
+          adj.get(s)?.add(t);
+          adj.get(t)?.add(s);
+        });
+        const visited = /* @__PURE__ */ new Set();
+        const comps = [];
+        for (const nid of nodeIds) {
+          if (visited.has(nid)) continue;
+          const stack = [nid];
+          const comp = [];
+          visited.add(nid);
+          while (stack.length) {
+            const cur = stack.pop();
+            comp.push(cur);
+            const neigh = adj.get(cur);
+            if (!neigh) continue;
+            for (const nb of neigh) {
+              if (!visited.has(nb)) {
+                visited.add(nb);
+                stack.push(nb);
+              }
+            }
           }
-        ) }),
-        /* @__PURE__ */ jsxs("g", { ref: gRef, children: [
-          links.map((link, i) => {
-            const source = link.source;
-            const target = link.target;
-            if (!source.x || !source.y || !target.x || !target.y) return null;
-            return /* @__PURE__ */ jsxs("g", { children: [
+          comps.push(comp);
+        }
+        if (comps.length <= 1) return null;
+        const children = comps.map((c, i) => ({ name: String(i), value: Math.max(1, c.length) }));
+        d32.hierarchy({ children }).sum((d) => d.value).sort((a, b) => b.value - a.value);
+        const num = comps.length;
+        const cx = width / 2;
+        const cy = height / 2;
+        const base = Math.max(width, height);
+        const circleRadius = base * Math.max(30, num * 20, Math.sqrt(num) * 12);
+        const map = {};
+        comps.forEach((c, i) => {
+          const angle = 2 * Math.PI * i / num;
+          const x = cx + Math.cos(angle) * circleRadius;
+          const y = cy + Math.sin(angle) * circleRadius;
+          const sizeBias = Math.sqrt(Math.max(1, c.length));
+          const r = Math.max(200, 100 * sizeBias);
+          map[`cluster:${i}`] = { x, y, r };
+        });
+        const nodeToCluster = {};
+        comps.forEach((c, i) => c.forEach((nid) => nodeToCluster[nid] = `cluster:${i}`));
+        return { bounds: map, nodeToCluster };
+      } catch (e) {
+        return null;
+      }
+    }, [nodes, links, width, height]);
+    useEffect(() => {
+      if (!packageBounds && !clusterBounds && (!packageAreas || Object.keys(packageAreas).length === 0)) return;
+      try {
+        restart();
+      } catch (e) {
+      }
+    }, [packageBounds, clusterBounds, packageAreas, restart]);
+    useEffect(() => {
+      try {
+        if (manualLayout || pinnedNodes.size > 0) setForcesEnabled(false);
+        else setForcesEnabled(true);
+      } catch (e) {
+      }
+    }, [manualLayout, pinnedNodes, setForcesEnabled]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        pinAll: () => {
+          const newPinned = /* @__PURE__ */ new Set();
+          nodes.forEach((node) => {
+            node.fx = node.x;
+            node.fy = node.y;
+            newPinned.add(node.id);
+          });
+          setPinnedNodes(newPinned);
+          restart();
+        },
+        unpinAll: () => {
+          nodes.forEach((node) => {
+            node.fx = null;
+            node.fy = null;
+          });
+          setPinnedNodes(/* @__PURE__ */ new Set());
+          restart();
+        },
+        resetLayout: () => {
+          nodes.forEach((node) => {
+            node.fx = null;
+            node.fy = null;
+          });
+          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 || 10;
+              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,
+            10
+          );
+          const centerX = (minX + maxX) / 2;
+          const centerY = (minY + maxY) / 2;
+          const x = width / 2 - centerX * scale;
+          const y = height / 2 - centerY * scale;
+          if (gRef.current && svgRef.current) {
+            const svg = d32.select(svgRef.current);
+            const newTransform = d32.zoomIdentity.translate(x, y).scale(scale);
+            svg.transition().duration(300).call(d32.zoom().transform, newTransform);
+            setTransform(newTransform);
+          }
+        },
+        getPinnedNodes: () => Array.from(pinnedNodes),
+        setDragMode: (enabled) => {
+          internalDragEnabledRef.current = enabled;
+        }
+      }),
+      [nodes, pinnedNodes, restart, width, height]
+    );
+    useEffect(() => {
+      try {
+        if (typeof onManualLayoutChange === "function") onManualLayoutChange(manualLayout);
+      } catch (e) {
+      }
+    }, [manualLayout, onManualLayoutChange]);
+    useEffect(() => {
+      if (!enableZoom || !svgRef.current || !gRef.current) return;
+      const svg = d32.select(svgRef.current);
+      const g = d32.select(gRef.current);
+      const zoom2 = d32.zoom().scaleExtent([0.1, 10]).on("zoom", (event) => {
+        g.attr("transform", event.transform);
+        transformRef.current = event.transform;
+        setTransform(event.transform);
+      });
+      svg.call(zoom2);
+      return () => {
+        svg.on(".zoom", null);
+      };
+    }, [enableZoom]);
+    useEffect(() => {
+      if (!gRef.current) return;
+      try {
+        const g = d32.select(gRef.current);
+        g.selectAll("g.node").each(function() {
+          const datum = d32.select(this).datum();
+          if (!datum) return;
+          d32.select(this).attr("transform", `translate(${datum.x || 0},${datum.y || 0})`);
+        });
+        g.selectAll("line").each(function() {
+          const l = d32.select(this).datum();
+          if (!l) return;
+          const s = typeof l.source === "object" ? l.source : nodes.find((n) => n.id === l.source) || l.source;
+          const t = typeof l.target === "object" ? l.target : nodes.find((n) => n.id === l.target) || l.target;
+          if (!s || !t) return;
+          d32.select(this).attr("x1", s.x).attr("y1", s.y).attr("x2", t.x).attr("y2", t.y);
+        });
+      } catch (e) {
+      }
+    }, [nodes, links]);
+    const handleDragStart = useCallback(
+      (event, node) => {
+        if (!enableDrag) return;
+        event.preventDefault();
+        event.stopPropagation();
+        dragActiveRef.current = true;
+        dragNodeRef.current = node;
+        node.fx = node.x;
+        node.fy = node.y;
+        setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
+        try {
+          stop();
+        } catch (e) {
+        }
+      },
+      [enableDrag, restart]
+    );
+    useEffect(() => {
+      if (!enableDrag) return;
+      const handleWindowMove = (event) => {
+        if (!dragActiveRef.current || !dragNodeRef.current) return;
+        const svg = svgRef.current;
+        if (!svg) return;
+        const rect = svg.getBoundingClientRect();
+        const t = transformRef.current;
+        const x = (event.clientX - rect.left - t.x) / t.k;
+        const y = (event.clientY - rect.top - t.y) / t.k;
+        dragNodeRef.current.fx = x;
+        dragNodeRef.current.fy = y;
+      };
+      const handleWindowUp = () => {
+        if (!dragActiveRef.current) return;
+        try {
+          setForcesEnabled(true);
+          restart();
+        } catch (e) {
+        }
+        dragNodeRef.current = null;
+        dragActiveRef.current = false;
+      };
+      const handleWindowLeave = (event) => {
+        if (event.relatedTarget === null) handleWindowUp();
+      };
+      window.addEventListener("mousemove", handleWindowMove);
+      window.addEventListener("mouseup", handleWindowUp);
+      window.addEventListener("mouseout", handleWindowLeave);
+      window.addEventListener("blur", handleWindowUp);
+      return () => {
+        window.removeEventListener("mousemove", handleWindowMove);
+        window.removeEventListener("mouseup", handleWindowUp);
+        window.removeEventListener("mouseout", handleWindowLeave);
+        window.removeEventListener("blur", handleWindowUp);
+      };
+    }, [enableDrag]);
+    useEffect(() => {
+      if (!gRef.current || !enableDrag) return;
+      const g = d32.select(gRef.current);
+      const dragBehavior = d32.drag().on("start", function(event) {
+        try {
+          const target = event.sourceEvent && event.sourceEvent.target || event.target;
+          const grp = target.closest?.("g.node");
+          const id = grp?.getAttribute("data-id");
+          if (!id) return;
+          const node = nodes.find((n) => n.id === id);
+          if (!node) return;
+          if (!internalDragEnabledRef.current) return;
+          if (!event.active) restart();
+          dragActiveRef.current = true;
+          dragNodeRef.current = node;
+          node.fx = node.x;
+          node.fy = node.y;
+          setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
+        } catch (e) {
+        }
+      }).on("drag", function(event) {
+        if (!dragActiveRef.current || !dragNodeRef.current) return;
+        const svg = svgRef.current;
+        if (!svg) return;
+        const rect = svg.getBoundingClientRect();
+        const x = (event.sourceEvent.clientX - rect.left - transform.x) / transform.k;
+        const y = (event.sourceEvent.clientY - rect.top - transform.y) / transform.k;
+        dragNodeRef.current.fx = x;
+        dragNodeRef.current.fy = y;
+      }).on("end", function() {
+        try {
+          setForcesEnabled(true);
+          restart();
+        } catch (e) {
+        }
+        dragNodeRef.current = null;
+        dragActiveRef.current = false;
+      });
+      try {
+        g.selectAll("g.node").call(dragBehavior);
+      } catch (e) {
+      }
+      return () => {
+        try {
+          g.selectAll("g.node").on(".drag", null);
+        } catch (e) {
+        }
+      };
+    }, [gRef, enableDrag, nodes, transform, restart]);
+    const handleNodeClick = useCallback(
+      (node) => {
+        onNodeClick?.(node);
+      },
+      [onNodeClick]
+    );
+    const handleNodeDoubleClick = useCallback(
+      (event, node) => {
+        event.stopPropagation();
+        if (!enableDrag) return;
+        if (node.fx === null || node.fx === void 0) {
+          node.fx = node.x;
+          node.fy = node.y;
+          setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
+        } else {
+          node.fx = null;
+          node.fy = null;
+          setPinnedNodes((prev) => {
+            const next = new Set(prev);
+            next.delete(node.id);
+            return next;
+          });
+        }
+        restart();
+      },
+      [enableDrag, restart]
+    );
+    const handleCanvasDoubleClick = useCallback(() => {
+      nodes.forEach((node) => {
+        node.fx = null;
+        node.fy = null;
+      });
+      setPinnedNodes(/* @__PURE__ */ new Set());
+      restart();
+    }, [nodes, restart]);
+    const handleNodeMouseEnter = useCallback(
+      (node) => {
+        onNodeHover?.(node);
+      },
+      [onNodeHover]
+    );
+    const handleNodeMouseLeave = useCallback(() => {
+      onNodeHover?.(null);
+    }, [onNodeHover]);
+    const handleLinkClick = useCallback(
+      (link) => {
+        onLinkClick?.(link);
+      },
+      [onLinkClick]
+    );
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref: svgRef,
+        width,
+        height,
+        className: cn("bg-white dark:bg-gray-900", className),
+        onDoubleClick: handleCanvasDoubleClick,
+        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: handleLinkClick,
+                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: handleNodeClick,
+                onDoubleClick: handleNodeDoubleClick,
+                onMouseEnter: handleNodeMouseEnter,
+                onMouseLeave: handleNodeMouseLeave,
+                onMouseDown: handleDragStart
+              },
+              node.id
+            )),
+            packageBounds && Object.keys(packageBounds).length > 0 && /* @__PURE__ */ jsx("g", { className: "package-boundaries", pointerEvents: "none", children: Object.entries(packageBounds).map(([pid, b]) => /* @__PURE__ */ jsxs("g", { children: [
               /* @__PURE__ */ jsx(
-                "line",
+                "circle",
                 {
-                  x1: source.x,
-                  y1: source.y,
-                  x2: target.x,
-                  y2: target.y,
-                  stroke: link.color || defaultLinkColor,
-                  strokeWidth: link.width || defaultLinkWidth,
-                  opacity: 0.6,
-                  className: "cursor-pointer transition-opacity hover:opacity-100",
-                  onClick: () => handleLinkClick(link)
+                  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
                 }
               ),
-              showLinkLabels && link.label && /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(
                 "text",
                 {
-                  x: (source.x + target.x) / 2,
-                  y: (source.y + target.y) / 2,
-                  fill: "#666",
-                  fontSize: "10",
+                  x: b.x,
+                  y: Math.max(12, b.y - b.r + 14),
+                  fill: "#475569",
+                  fontSize: 11,
                   textAnchor: "middle",
-                  dominantBaseline: "middle",
                   pointerEvents: "none",
-                  children: link.label
+                  children: pid.replace(/^pkg:/, "")
                 }
               )
-            ] }, `link-${i}`);
-          }),
-          nodes.map((node) => {
-            if (!node.x || !node.y) return null;
-            const isSelected = selectedNodeId === node.id;
-            const isHovered = hoveredNodeId === node.id;
-            const nodeSize = node.size || defaultNodeSize;
-            const nodeColor = node.color || defaultNodeColor;
-            return /* @__PURE__ */ jsxs(
-              "g",
-              {
-                transform: `translate(${node.x},${node.y})`,
-                className: "cursor-pointer",
-                onClick: () => handleNodeClick(node),
-                onMouseEnter: () => handleNodeMouseEnter(node),
-                onMouseLeave: handleNodeMouseLeave,
-                onMouseDown: (e) => handleDragStart(e, node),
-                onMouseMove: (e) => handleDrag(e, node),
-                onMouseUp: (e) => handleDragEnd(e, node),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "circle",
-                    {
-                      r: nodeSize,
-                      fill: nodeColor,
-                      stroke: isSelected ? "#000" : isHovered ? "#666" : "none",
-                      strokeWidth: isSelected ? 3 : 2,
-                      opacity: isHovered || isSelected ? 1 : 0.9,
-                      className: "transition-all"
-                    }
-                  ),
-                  showNodeLabels && 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
-            );
-          })
-        ] })
-      ]
-    }
-  );
-};
+            ] }, pid)) })
+          ] })
+        ]
+      }
+    );
+  }
+);
 ForceDirectedGraph.displayName = "ForceDirectedGraph";
 
 export { ForceDirectedGraph };