@aiready/components 0.1.3 → 0.1.4

package/dist/charts/ForceDirectedGraph.js

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback } from 'react';
+import React, { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback } from 'react';
 import * as d32 from 'd3';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -17,46 +17,183 @@ function useForceSimulation(initialNodes, initialLinks, options) {
     height,
     alphaDecay = 0.0228,
     velocityDecay = 0.4,
-    onTick
+    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 = d32.forceSimulation(nodesCopy).force(
-      "link",
-      d32.forceLink(linksCopy).id((d) => d.id).distance((d) => d && d.distance != null ? d.distance : linkDistance).strength(linkStrength)
-    ).force("charge", d32.forceManyBody().strength(chargeStrength)).force("center", d32.forceCenter(width / 2, height / 2).strength(centerStrength)).force(
-      "collision",
-      d32.forceCollide().radius((d) => {
+    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)
-    ).alphaDecay(alphaDecay).velocityDecay(velocityDecay);
+      }).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", () => {
+    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) {
       }
-      setNodes([...nodesCopy]);
-      setLinks([...linksCopy]);
-      setAlpha(simulation.alpha());
-      setIsRunning(simulation.alpha() > simulation.alphaMin());
-    });
+      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,
@@ -67,12 +204,37 @@ function useForceSimulation(initialNodes, initialLinks, options) {
     height,
     alphaDecay,
     velocityDecay,
-    onTick
+    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 = () => {
@@ -113,6 +275,107 @@ function useForceSimulation(initialNodes, initialLinks, options) {
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+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 ForceDirectedGraph = forwardRef(
   ({
     nodes: initialNodes,
@@ -141,6 +404,7 @@ var ForceDirectedGraph = forwardRef(
     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());
@@ -148,73 +412,177 @@ var ForceDirectedGraph = forwardRef(
     useEffect(() => {
       internalDragEnabledRef.current = enableDrag;
     }, [enableDrag]);
-    const onTick = (nodesCopy, _linksCopy, _sim) => {
-      const bounds = packageBounds && Object.keys(packageBounds).length ? packageBounds : void 0;
-      let effectiveBounds = bounds;
-      if (!effectiveBounds) {
-        try {
-          const counts = {};
-          (initialNodes || []).forEach((n) => {
-            if (n && n.kind === "file") {
-              const g = n.packageGroup || "root";
-              counts[g] = (counts[g] || 0) + 1;
+    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;
             }
-          });
-          const children = Object.keys(counts).map((k) => ({ name: k, value: counts[k] }));
-          if (children.length > 0) {
-            const root = d32.hierarchy({ children }).sum((d) => d.value);
-            const pack2 = d32.pack().size([width, height]).padding(30);
-            const packed = pack2(root);
-            const map = {};
-            if (packed.children) {
-              packed.children.forEach((c) => {
-                map[`pkg:${c.data.name}`] = { x: c.x, y: c.y, r: c.r * 0.95 };
-              });
-              effectiveBounds = map;
+            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) {
+          });
         }
+      } catch (e) {
       }
-      if (!effectiveBounds) return;
+    };
+    const { packageAreas, localPositions } = React.useMemo(() => {
       try {
-        Object.values(nodesCopy).forEach((n) => {
-          if (!n) return;
-          if (n.kind === "package") return;
-          const pkg = n.packageGroup;
-          if (!pkg) return;
-          const bound = effectiveBounds[`pkg:${pkg}`];
-          if (!bound) return;
-          const margin = (n.size || 10) + 12;
-          const dx = (n.x || 0) - bound.x;
-          const dy = (n.y || 0) - bound.y;
-          const dist = Math.sqrt(dx * dx + dy * dy) || 1e-4;
-          const maxDist = Math.max(1, bound.r - margin);
-          if (dist > maxDist) {
-            const desiredX = bound.x + dx * (maxDist / dist);
-            const desiredY = bound.y + dy * (maxDist / dist);
-            const softness = 0.08;
-            n.vx = (n.vx || 0) + (desiredX - n.x) * softness;
-            n.vy = (n.vy || 0) + (desiredY - n.y) * softness;
+        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: {} };
       }
-    };
-    const { nodes, links, restart, stop, setForcesEnabled } = useForceSimulation(initialNodes, initialLinks, {
+    }, [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,
       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);
+              }
+            }
+          }
+          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) return;
+      if (!packageBounds && !clusterBounds && (!packageAreas || Object.keys(packageAreas).length === 0)) return;
       try {
         restart();
       } catch (e) {
       }
-    }, [packageBounds, restart]);
+    }, [packageBounds, clusterBounds, packageAreas, restart]);
     useEffect(() => {
       try {
         if (manualLayout || pinnedNodes.size > 0) setForcesEnabled(false);
@@ -302,6 +670,7 @@ var ForceDirectedGraph = forwardRef(
       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);
@@ -309,6 +678,26 @@ var ForceDirectedGraph = forwardRef(
         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;
@@ -333,8 +722,9 @@ var ForceDirectedGraph = forwardRef(
         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;
+        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;
       };
@@ -361,7 +751,7 @@ var ForceDirectedGraph = forwardRef(
         window.removeEventListener("mouseout", handleWindowLeave);
         window.removeEventListener("blur", handleWindowUp);
       };
-    }, [enableDrag, transform]);
+    }, [enableDrag]);
     useEffect(() => {
       if (!gRef.current || !enableDrag) return;
       const g = d32.select(gRef.current);
@@ -484,98 +874,35 @@ var ForceDirectedGraph = forwardRef(
             }
           ) }),
           /* @__PURE__ */ jsxs("g", { ref: gRef, children: [
-            links.map((link, i) => {
-              const source = link.source;
-              const target = link.target;
-              if (source.x == null || source.y == null || target.x == null || target.y == null) return null;
-              return /* @__PURE__ */ jsxs("g", { children: [
-                /* @__PURE__ */ jsx(
-                  "line",
-                  {
-                    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)
-                  }
-                ),
-                showLinkLabels && link.label && /* @__PURE__ */ jsx(
-                  "text",
-                  {
-                    x: (source.x + target.x) / 2,
-                    y: (source.y + target.y) / 2,
-                    fill: "#666",
-                    fontSize: "10",
-                    textAnchor: "middle",
-                    dominantBaseline: "middle",
-                    pointerEvents: "none",
-                    children: link.label
-                  }
-                )
-              ] }, `link-${i}`);
-            }),
-            nodes.map((node) => {
-              if (node.x == null || node.y == null) 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 node",
-                  "data-id": node.id,
-                  onClick: () => handleNodeClick(node),
-                  onDoubleClick: (event) => handleNodeDoubleClick(event, node),
-                  onMouseEnter: () => handleNodeMouseEnter(node),
-                  onMouseLeave: handleNodeMouseLeave,
-                  onMouseDown: (e) => handleDragStart(e, node),
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "circle",
-                      {
-                        r: nodeSize,
-                        fill: nodeColor,
-                        stroke: isSelected ? "#000" : isHovered ? "#666" : "none",
-                        strokeWidth: pinnedNodes.has(node.id) ? 3 : isSelected ? 2.5 : isHovered ? 2 : 1.5,
-                        opacity: isHovered || isSelected ? 1 : 0.9,
-                        className: "transition-all"
-                      }
-                    ),
-                    pinnedNodes.has(node.id) && /* @__PURE__ */ jsx(
-                      "circle",
-                      {
-                        r: nodeSize + 4,
-                        fill: "none",
-                        stroke: "#ff6b6b",
-                        strokeWidth: 1,
-                        opacity: 0.5,
-                        className: "pointer-events-none"
-                      }
-                    ),
-                    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
-              );
-            }),
+            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(
                 "circle",