@aiready/components 0.13.6 → 0.13.8

package/dist/index.js

@@ -7,7 +7,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AnimatePresence, motion } from 'framer-motion';
 import { X, MessageSquare, Loader2, Send } from 'lucide-react';
 import { getRatingSlug, getRating as getRating$1 } from '@aiready/core/client';
-import * as d33 from 'd3';
+import * as d34 from 'd3';
 
 // src/components/button.tsx
 function cn(...inputs) {
@@ -246,286 +246,148 @@ function Modal({
     )
   ] }) });
 }
-function RocketIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      className,
-      ...props,
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M12 2c1.5 0 3 1 3 1s1.2 1.8 1.2 4.2c0 2.4-1.2 5-3.6 7.4-2.4 2.4-5 3.6-7.4 3.6C3.8 18.2 2 17 2 17S3 15.5 3 14c0-2.1 1.5-3.6 1.5-3.6S7.5 9 9 9c2.4 0 3-7 3-7z",
-            strokeWidth: "0",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M14 10c.8.8 2 2 3 3",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      ]
-    }
-  );
-}
-function ChartIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      className,
-      ...props,
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", strokeWidth: "1.2" }),
-        /* @__PURE__ */ jsx("rect", { x: "7", y: "11", width: "2", height: "6", fill: "currentColor" }),
-        /* @__PURE__ */ jsx("rect", { x: "11", y: "8", width: "2", height: "9", fill: "currentColor" }),
-        /* @__PURE__ */ jsx("rect", { x: "15", y: "5", width: "2", height: "12", fill: "currentColor" })
-      ]
-    }
-  );
-}
-function TargetIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      className,
-      ...props,
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: "1.2" }),
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5", fill: "currentColor" }),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M22 12h-3M5 12H2M12 2v3M12 19v3",
-            strokeWidth: "1.2",
-            strokeLinecap: "round"
-          }
-        )
-      ]
-    }
-  );
-}
-function RobotIcon({
+var IconBase = ({
   className = "w-6 h-6",
+  children,
+  viewBox = "0 0 24 24",
   ...props
-}) {
-  return /* @__PURE__ */ jsxs(
+}) => {
+  return /* @__PURE__ */ jsx(
     "svg",
     {
-      viewBox: "0 0 24 24",
+      viewBox,
       fill: "none",
       stroke: "currentColor",
       className,
       ...props,
       xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsx("rect", { x: "3", y: "7", width: "18", height: "11", rx: "2", strokeWidth: "1.2" }),
-        /* @__PURE__ */ jsx("rect", { x: "7", y: "10", width: "2", height: "2", fill: "currentColor" }),
-        /* @__PURE__ */ jsx("rect", { x: "15", y: "10", width: "2", height: "2", fill: "currentColor" }),
-        /* @__PURE__ */ jsx("path", { d: "M9 3v2M15 3v2", strokeWidth: "1.2", strokeLinecap: "round" })
-      ]
+      children
     }
   );
-}
-function FileIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
+};
+function AlertCircleIcon(props) {
   return /* @__PURE__ */ jsxs(
-    "svg",
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
-      xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }),
-        /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" })
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
       ]
     }
   );
 }
-function ShieldIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "svg",
+function AlertTriangleIcon(props) {
+  return /* @__PURE__ */ jsxs(
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+      ]
     }
   );
 }
-function TrendingUpIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
+function ArrowRightIcon(props) {
   return /* @__PURE__ */ jsxs(
-    "svg",
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
-      xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx("polyline", { points: "23 6 13.5 15.5 8.5 10.5 1 18" }),
-        /* @__PURE__ */ jsx("polyline", { points: "17 6 23 6 23 12" })
+        /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+        /* @__PURE__ */ jsx("polyline", { points: "12 5 19 12 12 19" })
       ]
     }
   );
 }
-function TrashIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
+function BrainIcon(props) {
   return /* @__PURE__ */ jsxs(
-    "svg",
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
-      xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }),
-        /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+        /* @__PURE__ */ jsx("path", { d: "M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.74-3.41A2.5 2.5 0 0 1 2 14c0-1.5 1-2 1-2s-1-.5-1-2a2.5 2.5 0 0 1 2.3-2.48A2.5 2.5 0 0 1 7 5.5a2.5 2.5 0 0 1 2.5-3.5z" }),
+        /* @__PURE__ */ jsx("path", { d: "M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.74-3.41A2.5 2.5 0 0 0 22 14c0-1.5-1-2-1-2s1-.5 1-2a2.5 2.5 0 0 0-2.3-2.48A2.5 2.5 0 0 0 17 5.5a2.5 2.5 0 0 0-2.5-3.5z" })
       ]
     }
   );
 }
-function PlayIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "svg",
+function ChartIcon(props) {
+  return /* @__PURE__ */ jsxs(IconBase, { ...props, children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", strokeWidth: "1.2" }),
+    /* @__PURE__ */ jsx("rect", { x: "7", y: "11", width: "2", height: "6", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("rect", { x: "11", y: "8", width: "2", height: "9", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("rect", { x: "15", y: "5", width: "2", height: "12", fill: "currentColor" })
+  ] });
+}
+function ClockIcon(props) {
+  return /* @__PURE__ */ jsxs(
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx("polygon", { points: "5 3 19 12 5 21 5 3" })
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
+      ]
     }
   );
 }
-function UploadIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
+function FileIcon(props) {
   return /* @__PURE__ */ jsxs(
-    "svg",
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
-      xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v4" }),
-        /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+        /* @__PURE__ */ jsx("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }),
+        /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" })
       ]
     }
   );
 }
-function AlertCircleIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
+function HammerIcon(props) {
   return /* @__PURE__ */ jsxs(
-    "svg",
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
-      xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+        /* @__PURE__ */ jsx("path", { d: "M18.42 13.59L7.46 2.63a1 1 0 0 0-1.42 0l-4.7 4.7a1 1 0 0 0 0 1.42L11 18.23l1.07-1.07-1.41-1.41 1.42-1.42 1.41 1.41 1.41-1.41-1.41-1.41 1.42-1.42 1.41 1.41 2-2z" }),
+        /* @__PURE__ */ jsx("path", { d: "M13 18l6 6" })
       ]
     }
   );
 }
-function InfoIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
+function InfoIcon(props) {
   return /* @__PURE__ */ jsxs(
-    "svg",
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
-      xmlns: "http://www.w3.org/2000/svg",
       children: [
         /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
         /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
@@ -534,277 +396,222 @@ function InfoIcon({
     }
   );
 }
-function BrainIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
+function PlayIcon(props) {
+  return /* @__PURE__ */ jsx(
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.74-3.41A2.5 2.5 0 0 1 2 14c0-1.5 1-2 1-2s-1-.5-1-2a2.5 2.5 0 0 1 2.3-2.48A2.5 2.5 0 0 1 7 5.5a2.5 2.5 0 0 1 2.5-3.5z" }),
-        /* @__PURE__ */ jsx("path", { d: "M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.74-3.41A2.5 2.5 0 0 0 22 14c0-1.5-1-2-1-2s1-.5 1-2a2.5 2.5 0 0 0-2.3-2.48A2.5 2.5 0 0 0 17 5.5a2.5 2.5 0 0 0-2.5-3.5z" })
-      ]
+      children: /* @__PURE__ */ jsx("polygon", { points: "5 3 19 12 5 21 5 3" })
     }
   );
 }
-function TerminalIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
+function RefreshCwIcon(props) {
   return /* @__PURE__ */ jsxs(
-    "svg",
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
-      xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx("polyline", { points: "4 17 10 11 4 5" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
+        /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 21v-5h5" })
       ]
     }
   );
 }
-function CommandLineIcon(props) {
-  return /* @__PURE__ */ jsx(TerminalIcon, { ...props });
+function RobotIcon(props) {
+  return /* @__PURE__ */ jsxs(IconBase, { ...props, children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "7", width: "18", height: "11", rx: "2", strokeWidth: "1.2" }),
+    /* @__PURE__ */ jsx("rect", { x: "7", y: "10", width: "2", height: "2", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("rect", { x: "15", y: "10", width: "2", height: "2", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 3v2M15 3v2", strokeWidth: "1.2", strokeLinecap: "round" })
+  ] });
 }
-function SettingsIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
+function RocketIcon(props) {
+  return /* @__PURE__ */ jsxs(IconBase, { ...props, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 2c1.5 0 3 1 3 1s1.2 1.8 1.2 4.2c0 2.4-1.2 5-3.6 7.4-2.4 2.4-5 3.6-7.4 3.6C3.8 18.2 2 17 2 17S3 15.5 3 14c0-2.1 1.5-3.6 1.5-3.6S7.5 9 9 9c2.4 0 3-7 3-7z",
+        strokeWidth: "0",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M14 10c.8.8 2 2 3 3",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function SaveIcon(props) {
   return /* @__PURE__ */ jsxs(
-    "svg",
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
-      xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.1a2 2 0 0 1-1-1.72v-.51a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }),
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+        /* @__PURE__ */ jsx("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
+        /* @__PURE__ */ jsx("polyline", { points: "17 21 17 13 7 13 7 21" }),
+        /* @__PURE__ */ jsx("polyline", { points: "7 3 7 8 15 8" })
       ]
     }
   );
 }
-function SaveIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
+function SettingsIcon(props) {
   return /* @__PURE__ */ jsxs(
-    "svg",
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
-      xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
-        /* @__PURE__ */ jsx("polyline", { points: "17 21 17 13 7 13 7 21" }),
-        /* @__PURE__ */ jsx("polyline", { points: "7 3 7 8 15 8" })
+        /* @__PURE__ */ jsx("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.1a2 2 0 0 1-1-1.72v-.51a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
       ]
     }
   );
 }
-function RefreshCwIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
+function ShieldCheckIcon(props) {
   return /* @__PURE__ */ jsxs(
-    "svg",
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
-      xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
-        /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" }),
-        /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
-        /* @__PURE__ */ jsx("path", { d: "M3 21v-5h5" })
+        /* @__PURE__ */ jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }),
+        /* @__PURE__ */ jsx("path", { d: "M9 12l2 2 4-4" })
       ]
     }
   );
 }
-function WalletIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
+function ShieldIcon(props) {
+  return /* @__PURE__ */ jsx(
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M21 12V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1" }),
-        /* @__PURE__ */ jsx("path", { d: "M16 12h5" }),
-        /* @__PURE__ */ jsx("circle", { cx: "16", cy: "12", r: "1" })
-      ]
+      children: /* @__PURE__ */ jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })
     }
   );
 }
-function ClockIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
+function TargetIcon(props) {
+  return /* @__PURE__ */ jsxs(IconBase, { ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: "1.2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M22 12h-3M5 12H2M12 2v3M12 19v3",
+        strokeWidth: "1.2",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function TerminalIcon(props) {
   return /* @__PURE__ */ jsxs(
-    "svg",
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
       children: [
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
+        /* @__PURE__ */ jsx("polyline", { points: "4 17 10 11 4 5" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
       ]
     }
   );
 }
-function ZapIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "svg",
+function TrashIcon(props) {
+  return /* @__PURE__ */ jsxs(
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
-      children: /* @__PURE__ */ jsx("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" })
+      children: [
+        /* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }),
+        /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+      ]
     }
   );
 }
-function HammerIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
+function TrendingUpIcon(props) {
   return /* @__PURE__ */ jsxs(
-    "svg",
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
       children: [
-        /* @__PURE__ */ jsx("path", { d: "M18.42 13.59L7.46 2.63a1 1 0 0 0-1.42 0l-4.7 4.7a1 1 0 0 0 0 1.42L11 18.23l1.07-1.07-1.41-1.41 1.42-1.42 1.41 1.41 1.41-1.41-1.41-1.41 1.42-1.42 1.41 1.41 2-2z" }),
-        /* @__PURE__ */ jsx("path", { d: "M13 18l6 6" })
+        /* @__PURE__ */ jsx("polyline", { points: "23 6 13.5 15.5 8.5 10.5 1 18" }),
+        /* @__PURE__ */ jsx("polyline", { points: "17 6 23 6 23 12" })
       ]
     }
   );
 }
-function ArrowRightIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
+function UploadIcon(props) {
   return /* @__PURE__ */ jsxs(
-    "svg",
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
       children: [
-        /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
-        /* @__PURE__ */ jsx("polyline", { points: "12 5 19 12 12 19" })
+        /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v4" }),
+        /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
       ]
     }
   );
 }
-function ShieldCheckIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
+function WalletIcon(props) {
   return /* @__PURE__ */ jsxs(
-    "svg",
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
       children: [
-        /* @__PURE__ */ jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }),
-        /* @__PURE__ */ jsx("path", { d: "M9 12l2 2 4-4" })
+        /* @__PURE__ */ jsx("path", { d: "M21 12V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1" }),
+        /* @__PURE__ */ jsx("path", { d: "M16 12h5" }),
+        /* @__PURE__ */ jsx("circle", { cx: "16", cy: "12", r: "1" })
       ]
     }
   );
 }
-function AlertTriangleIcon({
-  className = "w-6 h-6",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
+function ZapIcon(props) {
+  return /* @__PURE__ */ jsx(
+    IconBase,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className,
       ...props,
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
-      ]
+      children: /* @__PURE__ */ jsx("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" })
     }
   );
 }
@@ -2281,7 +2088,7 @@ function useD3(renderFn, dependencies = []) {
   const ref = useRef(null);
   useEffect(() => {
     if (ref.current) {
-      const selection = d33.select(ref.current);
+      const selection = d34.select(ref.current);
       renderFn(selection);
     }
   }, dependencies);
@@ -2291,7 +2098,7 @@ function useD3WithResize(renderFn, dependencies = []) {
   const ref = useRef(null);
   useEffect(() => {
     if (!ref.current) return;
-    const selection = d33.select(ref.current);
+    const selection = d34.select(ref.current);
     const render = () => renderFn(selection);
     render();
     const resizeObserver = new ResizeObserver(() => {
@@ -2358,11 +2165,11 @@ function useForceSimulation(initialNodes, initialLinks, options) {
         n.vy = (Math.random() - 0.5) * 10;
       });
     }
-    const simulation = d33.forceSimulation(
+    const simulation = d34.forceSimulation(
       nodesCopy
     );
     try {
-      const linkForce = d33.forceLink(
+      const linkForce = d34.forceLink(
         linksCopy
       );
       linkForce.id((d) => d.id).distance(
@@ -2371,31 +2178,31 @@ function useForceSimulation(initialNodes, initialLinks, options) {
       simulation.force("link", linkForce);
     } catch (e) {
       try {
-        simulation.force("link", d33.forceLink(linksCopy));
+        simulation.force("link", d34.forceLink(linksCopy));
       } catch (e2) {
       }
     }
     try {
       simulation.force(
         "charge",
-        d33.forceManyBody().strength(chargeStrength)
+        d34.forceManyBody().strength(chargeStrength)
       );
       simulation.force(
         "center",
-        d33.forceCenter(width / 2, height / 2).strength(centerStrength)
+        d34.forceCenter(width / 2, height / 2).strength(centerStrength)
       );
-      const collide = d33.forceCollide().radius((d) => {
+      const collide = d34.forceCollide().radius((d) => {
         const nodeSize = d && d.size ? d.size : 10;
         return nodeSize + collisionRadius;
       }).strength(collisionStrength);
       simulation.force("collision", collide);
       simulation.force(
         "x",
-        d33.forceX(width / 2).strength(Math.max(0.02, centerStrength * 0.5))
+        d34.forceX(width / 2).strength(Math.max(0.02, centerStrength * 0.5))
       );
       simulation.force(
         "y",
-        d33.forceY(height / 2).strength(Math.max(0.02, centerStrength * 0.5))
+        d34.forceY(height / 2).strength(Math.max(0.02, centerStrength * 0.5))
       );
       simulation.alphaDecay(alphaDecay);
       simulation.velocityDecay(velocityDecay);
@@ -2746,6 +2553,155 @@ var LinkItem = ({
   ] });
 };
 var LinkItem_default = LinkItem;
+
+// src/charts/constants.ts
+var DEFAULT_NODE_COLOR = "#64748b";
+var DEFAULT_NODE_SIZE = 10;
+var DEFAULT_LINK_COLOR = "#94a3b8";
+var DEFAULT_LINK_WIDTH = 1;
+var CIRCULAR_LAYOUT_RADIUS_RATIO = 0.35;
+var FIT_VIEW_PADDING = 40;
+var TRANSITION_DURATION_MS = 300;
+var PACKAGE_BOUNDARY_FILL = "rgba(148,163,184,0.06)";
+var PACKAGE_BOUNDARY_STROKE = "#475569";
+var PACKAGE_BOUNDARY_STROKE_WIDTH = 2;
+var PACKAGE_BOUNDARY_DASH = "6 6";
+var PACKAGE_LABEL_FONT_SIZE = 11;
+var PACKAGE_LABEL_COLOR = "#475569";
+var PackageBoundaries = ({
+  packageBounds
+}) => {
+  if (!packageBounds || Object.keys(packageBounds).length === 0) return null;
+  return /* @__PURE__ */ jsx("g", { className: "package-boundaries", pointerEvents: "none", children: Object.entries(packageBounds).map(([pid, b]) => /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: b.x,
+        cy: b.y,
+        r: b.r,
+        fill: PACKAGE_BOUNDARY_FILL,
+        stroke: PACKAGE_BOUNDARY_STROKE,
+        strokeWidth: PACKAGE_BOUNDARY_STROKE_WIDTH,
+        strokeDasharray: PACKAGE_BOUNDARY_DASH,
+        opacity: 0.9
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: b.x,
+        y: Math.max(12, b.y - b.r + 14),
+        fill: PACKAGE_LABEL_COLOR,
+        fontSize: PACKAGE_LABEL_FONT_SIZE,
+        textAnchor: "middle",
+        pointerEvents: "none",
+        children: pid.replace(/^pkg:/, "")
+      }
+    )
+  ] }, pid)) });
+};
+PackageBoundaries.displayName = "PackageBoundaries";
+
+// src/charts/layout-utils.ts
+function applyCircularLayout(nodes, width, height) {
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const radius = Math.min(width, height) * CIRCULAR_LAYOUT_RADIUS_RATIO;
+  nodes.forEach((node, i) => {
+    const angle = 2 * Math.PI * i / nodes.length;
+    node.fx = centerX + Math.cos(angle) * radius;
+    node.fy = centerY + Math.sin(angle) * radius;
+    node.x = node.fx;
+    node.y = node.fy;
+  });
+}
+function applyHierarchicalLayout(nodes, width, height) {
+  const groups = /* @__PURE__ */ new Map();
+  nodes.forEach((n) => {
+    const key = n.packageGroup || n.group || "root";
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key).push(n);
+  });
+  const groupArray = Array.from(groups.entries());
+  const cols = Math.ceil(Math.sqrt(groupArray.length));
+  const groupSpacingX = width * 0.8 / cols;
+  const groupSpacingY = height * 0.8 / Math.ceil(groupArray.length / cols);
+  groupArray.forEach(([groupKey, groupNodes], gi) => {
+    const col = gi % cols;
+    const row = Math.floor(gi / cols);
+    const groupX = (col + 0.5) * groupSpacingX;
+    const groupY = (row + 0.5) * groupSpacingY;
+    if (groupKey.startsWith("pkg:") || groupKey === groupKey) {
+      groupNodes.forEach((n, ni) => {
+        const angle = 2 * Math.PI * ni / groupNodes.length;
+        const r = Math.min(80, 20 + groupNodes.length * 8);
+        n.fx = groupX + Math.cos(angle) * r;
+        n.fy = groupY + Math.sin(angle) * r;
+        n.x = n.fx;
+        n.y = n.fy;
+      });
+    }
+  });
+}
+function applyInitialForceLayout(nodes, width, height) {
+  nodes.forEach((node) => {
+    if (node.fx === void 0 || node.fx === null) {
+      node.x = Math.random() * width;
+      node.y = Math.random() * height;
+    }
+  });
+}
+function useGraphZoom(svgRef, gRef, enableZoom, setTransform, transformRef) {
+  useEffect(() => {
+    if (!enableZoom || !svgRef.current || !gRef.current) return;
+    const svg = d34.select(svgRef.current);
+    const g = d34.select(gRef.current);
+    const zoom3 = d34.zoom().scaleExtent([0.1, 10]).on("zoom", (event) => {
+      g.attr("transform", event.transform);
+      transformRef.current = event.transform;
+      setTransform(event.transform);
+    });
+    svg.call(zoom3);
+    return () => {
+      svg.on(".zoom", null);
+    };
+  }, [enableZoom, svgRef, gRef, setTransform, transformRef]);
+}
+function useWindowDrag(enableDrag, svgRef, transformRef, dragActiveRef, dragNodeRef, onDragEnd) {
+  useEffect(() => {
+    if (!enableDrag) return;
+    const handleWindowMove = (event) => {
+      if (!dragActiveRef.current || !dragNodeRef.current) return;
+      const svg = svgRef.current;
+      if (!svg) return;
+      const rect = svg.getBoundingClientRect();
+      const t = transformRef.current;
+      const x = (event.clientX - rect.left - t.x) / t.k;
+      const y = (event.clientY - rect.top - t.y) / t.k;
+      dragNodeRef.current.fx = x;
+      dragNodeRef.current.fy = y;
+    };
+    const handleWindowUp = () => {
+      if (!dragActiveRef.current) return;
+      onDragEnd();
+      dragNodeRef.current = null;
+      dragActiveRef.current = false;
+    };
+    const handleWindowLeave = (event) => {
+      if (event.relatedTarget === null) handleWindowUp();
+    };
+    window.addEventListener("mousemove", handleWindowMove);
+    window.addEventListener("mouseup", handleWindowUp);
+    window.addEventListener("mouseout", handleWindowLeave);
+    window.addEventListener("blur", handleWindowUp);
+    return () => {
+      window.removeEventListener("mousemove", handleWindowMove);
+      window.removeEventListener("mouseup", handleWindowUp);
+      window.removeEventListener("mouseout", handleWindowLeave);
+      window.removeEventListener("blur", handleWindowUp);
+    };
+  }, [enableDrag, svgRef, transformRef, dragActiveRef, dragNodeRef, onDragEnd]);
+}
 var ForceDirectedGraph = forwardRef(
   ({
     nodes: initialNodes,
@@ -2759,10 +2715,10 @@ var ForceDirectedGraph = forwardRef(
     onLinkClick,
     selectedNodeId,
     hoveredNodeId,
-    defaultNodeColor = "#69b3a2",
-    defaultNodeSize = 10,
-    defaultLinkColor = "#999",
-    defaultLinkWidth = 1,
+    defaultNodeColor = DEFAULT_NODE_COLOR,
+    defaultNodeSize = DEFAULT_NODE_SIZE,
+    defaultLinkColor = DEFAULT_LINK_COLOR,
+    defaultLinkWidth = DEFAULT_LINK_WIDTH,
     showNodeLabels = true,
     showLinkLabels = false,
     className,
@@ -2785,7 +2741,7 @@ var ForceDirectedGraph = forwardRef(
       if (externalLayout && externalLayout !== layout) {
         setLayout(externalLayout);
       }
-    }, [externalLayout]);
+    }, [externalLayout, layout]);
     const handleLayoutChange = useCallback(
       (newLayout) => {
         setLayout(newLayout);
@@ -2798,36 +2754,13 @@ var ForceDirectedGraph = forwardRef(
     }, [enableDrag]);
     const nodes = React2__default.useMemo(() => {
       if (!initialNodes || !initialNodes.length) return initialNodes;
-      const centerX = width / 2;
-      const centerY = height / 2;
-      if (layout === "force") {
-        return initialNodes.map((n) => ({
-          ...n,
-          x: Math.random() * width,
-          y: Math.random() * height
-        }));
-      }
-      if (layout === "circular") {
-        const radius = Math.min(width, height) * 0.35;
-        return initialNodes.map((n, i) => ({
-          ...n,
-          x: centerX + Math.cos(2 * Math.PI * i / initialNodes.length) * radius,
-          y: centerY + Math.sin(2 * Math.PI * i / initialNodes.length) * radius
-        }));
-      }
-      if (layout === "hierarchical") {
-        const cols = Math.ceil(Math.sqrt(initialNodes.length));
-        const spacingX = width / (cols + 1);
-        const spacingY = height / (Math.ceil(initialNodes.length / cols) + 1);
-        return initialNodes.map((n, i) => ({
-          ...n,
-          x: spacingX * (i % cols + 1),
-          y: spacingY * (Math.floor(i / cols) + 1)
-        }));
-      }
-      return initialNodes;
+      const copy = initialNodes.map((n) => ({ ...n }));
+      if (layout === "circular") applyCircularLayout(copy, width, height);
+      else if (layout === "hierarchical")
+        applyHierarchicalLayout(copy, width, height);
+      else applyInitialForceLayout(copy, width, height);
+      return copy;
     }, [initialNodes, width, height, layout]);
-    const links = initialLinks;
     const restart = React2__default.useCallback(() => {
     }, []);
     const stop = React2__default.useCallback(() => {
@@ -2836,55 +2769,14 @@ var ForceDirectedGraph = forwardRef(
     }, []);
     useEffect(() => {
       if (!nodes || nodes.length === 0) return;
-      const applyLayout = () => {
-        const centerX = width / 2;
-        const centerY = height / 2;
-        if (layout === "circular") {
-          const radius = Math.min(width, height) * 0.35;
-          nodes.forEach((node, i) => {
-            const angle = 2 * Math.PI * i / nodes.length;
-            node.fx = centerX + Math.cos(angle) * radius;
-            node.fy = centerY + Math.sin(angle) * radius;
-          });
-        } else if (layout === "hierarchical") {
-          const groups = /* @__PURE__ */ new Map();
-          nodes.forEach((n) => {
-            const key = n.packageGroup || n.group || "root";
-            if (!groups.has(key)) groups.set(key, []);
-            groups.get(key).push(n);
-          });
-          const groupArray = Array.from(groups.entries());
-          const cols = Math.ceil(Math.sqrt(groupArray.length));
-          const groupSpacingX = width * 0.8 / cols;
-          const groupSpacingY = height * 0.8 / Math.ceil(groupArray.length / cols);
-          groupArray.forEach(([groupKey, groupNodes], gi) => {
-            const col = gi % cols;
-            const row = Math.floor(gi / cols);
-            const groupX = (col + 0.5) * groupSpacingX;
-            const groupY = (row + 0.5) * groupSpacingY;
-            if (groupKey.startsWith("pkg:") || groupKey === groupKey) {
-              groupNodes.forEach((n, ni) => {
-                const angle = 2 * Math.PI * ni / groupNodes.length;
-                const r = Math.min(80, 20 + groupNodes.length * 8);
-                n.fx = groupX + Math.cos(angle) * r;
-                n.fy = groupY + Math.sin(angle) * r;
-              });
-            }
-          });
-        }
-        try {
-          restart();
-        } catch (e) {
-        }
-      };
-      applyLayout();
+      if (layout === "circular") applyCircularLayout(nodes, width, height);
+      else if (layout === "hierarchical")
+        applyHierarchicalLayout(nodes, width, height);
+      restart();
     }, [layout, nodes, width, height, restart]);
     useEffect(() => {
-      try {
-        if (manualLayout || pinnedNodes.size > 0) setForcesEnabled(false);
-        else setForcesEnabled(true);
-      } catch (e) {
-      }
+      if (manualLayout || pinnedNodes.size > 0) setForcesEnabled(false);
+      else setForcesEnabled(true);
     }, [manualLayout, pinnedNodes, setForcesEnabled]);
     useImperativeHandle(
       ref,
@@ -2920,7 +2812,7 @@ var ForceDirectedGraph = forwardRef(
           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;
+              const size = node.size || DEFAULT_NODE_SIZE;
               minX = Math.min(minX, node.x - size);
               maxX = Math.max(maxX, node.x + size);
               minY = Math.min(minY, node.y - size);
@@ -2928,22 +2820,17 @@ var ForceDirectedGraph = forwardRef(
             }
           });
           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,
+            (width - FIT_VIEW_PADDING * 2) / (maxX - minX),
+            (height - FIT_VIEW_PADDING * 2) / (maxY - minY),
             10
           );
-          const centerX = (minX + maxX) / 2;
-          const centerY = (minY + maxY) / 2;
-          const x = width / 2 - centerX * scale;
-          const y = height / 2 - centerY * scale;
+          const x = width / 2 - (minX + maxX) / 2 * scale;
+          const y = height / 2 - (minY + maxY) / 2 * scale;
           if (gRef.current && svgRef.current) {
-            const svg = d33.select(svgRef.current);
-            const newTransform = d33.zoomIdentity.translate(x, y).scale(scale);
-            svg.transition().duration(300).call(d33.zoom().transform, newTransform);
+            const svg = d34.select(svgRef.current);
+            const newTransform = d34.zoomIdentity.translate(x, y).scale(scale);
+            svg.transition().duration(TRANSITION_DURATION_MS).call(d34.zoom().transform, newTransform);
             setTransform(newTransform);
           }
         },
@@ -2951,57 +2838,56 @@ var ForceDirectedGraph = forwardRef(
         setDragMode: (enabled) => {
           internalDragEnabledRef.current = enabled;
         },
-        setLayout: (newLayout) => {
-          handleLayoutChange(newLayout);
-        },
+        setLayout: (newLayout) => handleLayoutChange(newLayout),
         getLayout: () => layout
       }),
-      [nodes, pinnedNodes, restart, width, height, layout, handleLayoutChange]
+      [
+        nodes,
+        pinnedNodes,
+        restart,
+        width,
+        height,
+        layout,
+        handleLayoutChange,
+        setForcesEnabled
+      ]
     );
     useEffect(() => {
-      try {
-        if (typeof onManualLayoutChange === "function")
-          onManualLayoutChange(manualLayout);
-      } catch (e) {
-      }
+      if (typeof onManualLayoutChange === "function")
+        onManualLayoutChange(manualLayout);
     }, [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);
-        transformRef.current = event.transform;
-        setTransform(event.transform);
-      });
-      svg.call(zoom2);
-      return () => {
-        svg.on(".zoom", null);
-      };
-    }, [enableZoom]);
+    useGraphZoom(svgRef, gRef, enableZoom, setTransform, transformRef);
+    useWindowDrag(
+      enableDrag,
+      svgRef,
+      transformRef,
+      dragActiveRef,
+      dragNodeRef,
+      () => {
+        setForcesEnabled(true);
+        restart();
+      }
+    );
     useEffect(() => {
       if (!gRef.current) return;
-      try {
-        const g = d33.select(gRef.current);
-        g.selectAll("g.node").each(function() {
-          const datum = d33.select(this).datum();
-          if (!datum) return;
-          d33.select(this).attr(
-            "transform",
-            `translate(${datum.x || 0},${datum.y || 0})`
-          );
-        });
-        g.selectAll("line").each(function() {
-          const l = d33.select(this).datum();
-          if (!l) return;
-          const s = typeof l.source === "object" ? l.source : nodes.find((n) => n.id === l.source) || l.source;
-          const t = typeof l.target === "object" ? l.target : nodes.find((n) => n.id === l.target) || l.target;
-          if (!s || !t) return;
-          d33.select(this).attr("x1", s.x).attr("y1", s.y).attr("x2", t.x).attr("y2", t.y);
-        });
-      } catch (e) {
-      }
-    }, [nodes, links]);
+      const g = d34.select(gRef.current);
+      g.selectAll("g.node").each(function() {
+        const datum = d34.select(this).datum();
+        if (!datum) return;
+        d34.select(this).attr(
+          "transform",
+          `translate(${datum.x || 0},${datum.y || 0})`
+        );
+      });
+      g.selectAll("line").each(function() {
+        const l = d34.select(this).datum();
+        if (!l) return;
+        const s = typeof l.source === "object" ? l.source : nodes.find((n) => n.id === l.source) || l.source;
+        const t = typeof l.target === "object" ? l.target : nodes.find((n) => n.id === l.target) || l.target;
+        if (!s || !t) return;
+        d34.select(this).attr("x1", s.x).attr("y1", s.y).attr("x2", t.x).attr("y2", t.y);
+      });
+    }, [nodes, initialLinks]);
     const handleDragStart = useCallback(
       (event, node) => {
         if (!enableDrag) return;
@@ -3012,103 +2898,50 @@ var ForceDirectedGraph = forwardRef(
         node.fx = node.x;
         node.fy = node.y;
         setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
-        try {
-          stop();
-        } catch (e) {
-        }
+        stop();
       },
-      [enableDrag, restart]
+      [enableDrag, stop]
     );
-    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 = 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) {
+      const g = d34.select(gRef.current);
+      const dragBehavior = d34.drag().on("start", (event) => {
+        const target = event.sourceEvent && event.sourceEvent.target || event.target;
+        const grp = target.closest?.("g.node");
+        const id = grp?.getAttribute("data-id");
+        if (!id || !internalDragEnabledRef.current) return;
+        const node = nodes.find((n) => n.id === id);
+        if (!node) return;
+        if (!event.active) restart();
+        dragActiveRef.current = true;
+        dragNodeRef.current = node;
+        node.fx = node.x;
+        node.fy = node.y;
+        setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
+      }).on("drag", (event) => {
         if (!dragActiveRef.current || !dragNodeRef.current) return;
         const svg = svgRef.current;
         if (!svg) return;
         const rect = svg.getBoundingClientRect();
-        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.fx = (event.sourceEvent.clientX - rect.left - transform.x) / transform.k;
+        dragNodeRef.current.fy = (event.sourceEvent.clientY - rect.top - transform.y) / transform.k;
+      }).on("end", () => {
+        setForcesEnabled(true);
+        restart();
       });
-      try {
-        g.selectAll("g.node").call(dragBehavior);
-      } catch (e) {
-      }
+      g.selectAll("g.node").call(dragBehavior);
       return () => {
-        try {
-          g.selectAll("g.node").on(".drag", null);
-        } catch (e) {
-        }
+        g.selectAll("g.node").on(".drag", null);
       };
-    }, [gRef, enableDrag, nodes, transform, restart]);
-    const handleNodeClick = useCallback(
-      (node) => {
-        onNodeClick?.(node);
-      },
-      [onNodeClick]
-    );
+    }, [
+      gRef,
+      enableDrag,
+      nodes,
+      transform,
+      restart,
+      setForcesEnabled,
+      internalDragEnabledRef
+    ]);
     const handleNodeDoubleClick = useCallback(
       (event, node) => {
         event.stopPropagation();
@@ -3130,29 +2963,6 @@ var ForceDirectedGraph = forwardRef(
       },
       [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",
       {
@@ -3160,7 +2970,14 @@ var ForceDirectedGraph = forwardRef(
         width,
         height,
         className: cn("bg-white dark:bg-gray-900", className),
-        onDoubleClick: handleCanvasDoubleClick,
+        onDoubleClick: () => {
+          nodes.forEach((n) => {
+            n.fx = null;
+            n.fy = null;
+          });
+          setPinnedNodes(/* @__PURE__ */ new Set());
+          restart();
+        },
         children: [
           /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
             "marker",
@@ -3176,11 +2993,11 @@ var ForceDirectedGraph = forwardRef(
             }
           ) }),
           /* @__PURE__ */ jsxs("g", { ref: gRef, children: [
-            links.map((link, i) => /* @__PURE__ */ jsx(
+            initialLinks.map((link, i) => /* @__PURE__ */ jsx(
               LinkItem_default,
               {
                 link,
-                onClick: handleLinkClick,
+                onClick: onLinkClick,
                 defaultWidth: defaultLinkWidth,
                 showLabel: showLinkLabels,
                 nodes
@@ -3197,41 +3014,15 @@ var ForceDirectedGraph = forwardRef(
                 defaultNodeSize,
                 defaultNodeColor,
                 showLabel: showNodeLabels,
-                onClick: handleNodeClick,
+                onClick: onNodeClick,
                 onDoubleClick: handleNodeDoubleClick,
-                onMouseEnter: handleNodeMouseEnter,
-                onMouseLeave: handleNodeMouseLeave,
+                onMouseEnter: (n) => onNodeHover?.(n),
+                onMouseLeave: () => onNodeHover?.(null),
                 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",
-                {
-                  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
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "text",
-                {
-                  x: b.x,
-                  y: Math.max(12, b.y - b.r + 14),
-                  fill: "#475569",
-                  fontSize: 11,
-                  textAnchor: "middle",
-                  pointerEvents: "none",
-                  children: pid.replace(/^pkg:/, "")
-                }
-              )
-            ] }, pid)) })
+            /* @__PURE__ */ jsx(PackageBoundaries, { packageBounds: packageBounds || {} })
           ] })
         ]
       }
@@ -3375,6 +3166,6 @@ var GraphControls = ({
 };
 GraphControls.displayName = "GraphControls";
 
-export { AlertCircleIcon, AlertTriangleIcon, ArrowRightIcon, Badge, BrainIcon, Breadcrumb, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartIcon, Checkbox, ClockIcon, CodeBlock, CommandLineIcon, Container, EmptyState, ErrorDisplay, FeedbackWidget, FileIcon, ForceDirectedGraph, GlassCard, GlassCardContent, GlassCardHeader, GraphControls, Grid, HammerIcon, InfoIcon, InlineCode, Input, Label, LoadingOverlay, LoadingSpinner, Modal, PlatformShell, PlayIcon, RadioGroup, RefreshCwIcon, RobotIcon, RocketIcon, SaveIcon, ScoreBar, ScoreCard, ScoreCircle, Select, Separator, SettingsIcon, ShieldCheckIcon, ShieldIcon, Stack, Switch, TargetIcon, TerminalIcon, Textarea, ThemeProvider, TrashIcon, TrendingUpIcon, UploadIcon, WalletIcon, ZapIcon, badgeVariants, buttonVariants, chartColors, cn, domainColors, formatCompactNumber, formatDate, formatDateTime, formatDecimal, formatDuration, formatFileSize, formatMetric, formatNumber, formatPercentage, formatRange, formatRelativeTime, getDomainColor, getScoreRating, getSeverityColor, hexToRgba, scoreBg, scoreColor, scoreGlow, scoreLabel, severityColors, useD3, useD3WithResize, useDebounce, useDrag, useForceSimulation, useTheme };
+export { AlertCircleIcon, AlertTriangleIcon, ArrowRightIcon, Badge, BrainIcon, Breadcrumb, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartIcon, Checkbox, ClockIcon, CodeBlock, Container, EmptyState, ErrorDisplay, FeedbackWidget, FileIcon, ForceDirectedGraph, GlassCard, GlassCardContent, GlassCardHeader, GraphControls, Grid, HammerIcon, InfoIcon, InlineCode, Input, Label, LoadingOverlay, LoadingSpinner, Modal, PlatformShell, PlayIcon, RadioGroup, RefreshCwIcon, RobotIcon, RocketIcon, SaveIcon, ScoreBar, ScoreCard, ScoreCircle, Select, Separator, SettingsIcon, ShieldCheckIcon, ShieldIcon, Stack, Switch, TargetIcon, TerminalIcon, Textarea, ThemeProvider, TrashIcon, TrendingUpIcon, UploadIcon, WalletIcon, ZapIcon, badgeVariants, buttonVariants, chartColors, cn, domainColors, formatCompactNumber, formatDate, formatDateTime, formatDecimal, formatDuration, formatFileSize, formatMetric, formatNumber, formatPercentage, formatRange, formatRelativeTime, getDomainColor, getScoreRating, getSeverityColor, hexToRgba, scoreBg, scoreColor, scoreGlow, scoreLabel, severityColors, useD3, useD3WithResize, useDebounce, useDrag, useForceSimulation, useTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map