@aiready/components 0.1.0 → 0.1.3

package/dist/index.js

@@ -1,10 +1,10 @@
 import * as React2 from 'react';
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback } from 'react';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import * as d32 from 'd3';
+import * as d33 from 'd3';
 
 // src/components/button.tsx
 function cn(...inputs) {
@@ -595,7 +595,7 @@ function useD3(renderFn, dependencies = []) {
   const ref = useRef(null);
   useEffect(() => {
     if (ref.current) {
-      const selection = d32.select(ref.current);
+      const selection = d33.select(ref.current);
       renderFn(selection);
     }
   }, dependencies);
@@ -605,7 +605,7 @@ function useD3WithResize(renderFn, dependencies = []) {
   const ref = useRef(null);
   useEffect(() => {
     if (!ref.current) return;
-    const selection = d32.select(ref.current);
+    const selection = d33.select(ref.current);
     const render = () => renderFn(selection);
     render();
     const resizeObserver = new ResizeObserver(() => {
@@ -629,7 +629,8 @@ function useForceSimulation(initialNodes, initialLinks, options) {
     width,
     height,
     alphaDecay = 0.0228,
-    velocityDecay = 0.4
+    velocityDecay = 0.4,
+    onTick
   } = options;
   const [nodes, setNodes] = useState(initialNodes);
   const [links, setLinks] = useState(initialLinks);
@@ -639,15 +640,22 @@ function useForceSimulation(initialNodes, initialLinks, options) {
   useEffect(() => {
     const nodesCopy = initialNodes.map((node) => ({ ...node }));
     const linksCopy = initialLinks.map((link) => ({ ...link }));
-    const simulation = d32.forceSimulation(nodesCopy).force(
+    const simulation = d33.forceSimulation(nodesCopy).force(
       "link",
-      d32.forceLink(linksCopy).id((d) => d.id).distance(linkDistance).strength(linkStrength)
-    ).force("charge", d32.forceManyBody().strength(chargeStrength)).force("center", d32.forceCenter(width / 2, height / 2).strength(centerStrength)).force(
+      d33.forceLink(linksCopy).id((d) => d.id).distance((d) => d && d.distance != null ? d.distance : linkDistance).strength(linkStrength)
+    ).force("charge", d33.forceManyBody().strength(chargeStrength)).force("center", d33.forceCenter(width / 2, height / 2).strength(centerStrength)).force(
       "collision",
-      d32.forceCollide().radius(collisionRadius).strength(collisionStrength)
+      d33.forceCollide().radius((d) => {
+        const nodeSize = d && d.size ? d.size : 10;
+        return nodeSize + collisionRadius;
+      }).strength(collisionStrength)
     ).alphaDecay(alphaDecay).velocityDecay(velocityDecay);
     simulationRef.current = simulation;
     simulation.on("tick", () => {
+      try {
+        if (typeof onTick === "function") onTick(nodesCopy, linksCopy, simulation);
+      } catch (e) {
+      }
       setNodes([...nodesCopy]);
       setLinks([...linksCopy]);
       setAlpha(simulation.alpha());
@@ -671,7 +679,8 @@ function useForceSimulation(initialNodes, initialLinks, options) {
     width,
     height,
     alphaDecay,
-    velocityDecay
+    velocityDecay,
+    onTick
   ]);
   const restart = () => {
     if (simulationRef.current) {
@@ -685,13 +694,33 @@ 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 useDrag(simulation) {
@@ -717,211 +746,639 @@ function useDrag(simulation) {
     onDragEnd: dragEnded
   };
 }
-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
-}) => {
-  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, {
+var ForceDirectedGraph = forwardRef(
+  ({
+    nodes: initialNodes,
+    links: initialLinks,
     width,
     height,
-    ...simulationOptions
-  });
-  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);
-      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 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) => {
+      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 children = Object.keys(counts).map((k) => ({ name: k, value: counts[k] }));
+          if (children.length > 0) {
+            const root = d33.hierarchy({ children }).sum((d) => d.value);
+            const pack2 = d33.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;
+            }
+          }
+        } catch (e) {
+        }
+      }
+      if (!effectiveBounds) return;
+      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;
+          }
+        });
+      } 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 { nodes, links, restart, stop, setForcesEnabled } = useForceSimulation(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
+    });
+    useEffect(() => {
+      if (!packageBounds) return;
+      try {
+        restart();
+      } catch (e) {
+      }
+    }, [packageBounds, 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 = d33.select(svgRef.current);
+            const newTransform = d33.zoomIdentity.translate(x, y).scale(scale);
+            svg.transition().duration(300).call(d33.zoom().transform, newTransform);
+            setTransform(newTransform);
           }
-        ) }),
-        /* @__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: [
+        },
+        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 = d33.select(svgRef.current);
+      const g = d33.select(gRef.current);
+      const zoom2 = d33.zoom().scaleExtent([0.1, 10]).on("zoom", (event) => {
+        g.attr("transform", event.transform);
+        setTransform(event.transform);
+      });
+      svg.call(zoom2);
+      return () => {
+        svg.on(".zoom", null);
+      };
+    }, [enableZoom]);
+    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 x = (event.clientX - rect.left - transform.x) / transform.k;
+        const y = (event.clientY - rect.top - transform.y) / transform.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, transform]);
+    useEffect(() => {
+      if (!gRef.current || !enableDrag) return;
+      const g = d33.select(gRef.current);
+      const dragBehavior = d33.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) => {
+              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
+              );
+            }),
+            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",
+            ] }, pid)) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+ForceDirectedGraph.displayName = "ForceDirectedGraph";
+var GraphControls = ({
+  dragEnabled = true,
+  onDragToggle,
+  manualLayout = false,
+  onManualLayoutToggle,
+  onPinAll,
+  onUnpinAll,
+  onReset,
+  onFitView,
+  pinnedCount = 0,
+  totalNodes = 0,
+  visible = true,
+  position = "top-left",
+  className
+}) => {
+  if (!visible) return null;
+  const positionClasses = {
+    "top-left": "top-4 left-4",
+    "top-right": "top-4 right-4",
+    "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",
+    {
+      className: cn(
+        "fixed z-40 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2 border border-gray-200 dark:border-gray-700",
+        positionClasses[position],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx(
+            ControlButton,
+            {
+              onClick: () => onDragToggle?.(!dragEnabled),
+              active: dragEnabled,
+              icon: "\u270B",
+              label: dragEnabled ? "Drag enabled" : "Drag disabled"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ControlButton,
+            {
+              onClick: () => onManualLayoutToggle?.(!manualLayout),
+              active: manualLayout,
+              icon: "\u{1F527}",
+              label: manualLayout ? "Manual layout: ON (drag freely)" : "Manual layout: OFF (forces active)"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "w-8 h-px bg-gray-300 dark:bg-gray-600 mx-auto my-1" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+            /* @__PURE__ */ jsx(
+              ControlButton,
+              {
+                onClick: () => onPinAll?.(),
+                disabled: totalNodes === 0,
+                icon: "\u{1F4CC}",
+                label: `Pin all nodes (${totalNodes})`
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ControlButton,
               {
-                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
-            );
-          })
+                onClick: () => onUnpinAll?.(),
+                disabled: pinnedCount === 0,
+                icon: "\u{1F4CD}",
+                label: `Unpin all (${pinnedCount} pinned)`
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "w-8 h-px bg-gray-300 dark:bg-gray-600 mx-auto my-1" }),
+          /* @__PURE__ */ jsx(
+            ControlButton,
+            {
+              onClick: () => onFitView?.(),
+              disabled: totalNodes === 0,
+              icon: "\u{1F3AF}",
+              label: "Fit all nodes in view"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ControlButton,
+            {
+              onClick: () => onReset?.(),
+              disabled: totalNodes === 0,
+              icon: "\u21BA",
+              label: "Reset to auto-layout"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-600 dark:text-gray-400", children: [
+          /* @__PURE__ */ jsxs("div", { className: "whitespace-nowrap", children: [
+            /* @__PURE__ */ jsx("strong", { children: "Nodes:" }),
+            " ",
+            totalNodes
+          ] }),
+          pinnedCount > 0 && /* @__PURE__ */ jsxs("div", { className: "whitespace-nowrap", children: [
+            /* @__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" })
+            ] })
+          ] })
         ] })
       ]
     }
   );
 };
-ForceDirectedGraph.displayName = "ForceDirectedGraph";
+GraphControls.displayName = "GraphControls";
 
-export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Container, ForceDirectedGraph, Grid, Input, Label, RadioGroup, Select, Separator, Stack, Switch, Textarea, badgeVariants, buttonVariants, chartColors, cn, domainColors, formatCompactNumber, formatDate, formatDateTime, formatDecimal, formatDuration, formatFileSize, formatMetric, formatNumber, formatPercentage, formatRange, formatRelativeTime, getDomainColor, getSeverityColor, hexToRgba, severityColors, useD3, useD3WithResize, useDebounce, useDrag, useForceSimulation };
+export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Container, ForceDirectedGraph, GraphControls, Grid, Input, Label, RadioGroup, Select, Separator, Stack, Switch, Textarea, badgeVariants, buttonVariants, chartColors, cn, domainColors, formatCompactNumber, formatDate, formatDateTime, formatDecimal, formatDuration, formatFileSize, formatMetric, formatNumber, formatPercentage, formatRange, formatRelativeTime, getDomainColor, getSeverityColor, hexToRgba, severityColors, useD3, useD3WithResize, useDebounce, useDrag, useForceSimulation };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map