@aiready/components 0.1.0

package/dist/index.js

@@ -0,0 +1,927 @@
+import * as React2 from 'react';
+import { useState, useEffect, useRef, 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';
+
+// src/components/button.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React2.forwardRef(
+  ({ className, variant, size, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Card = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+var CardHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    ref,
+    className: cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+var Input = React2.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "label",
+    {
+      ref,
+      className: cn(labelVariants(), className),
+      ...props
+    }
+  )
+);
+Label.displayName = "Label";
+var badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+var Container = React2.forwardRef(
+  ({ className, size = "lg", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "mx-auto w-full px-4 sm:px-6 lg:px-8",
+          {
+            "max-w-screen-sm": size === "sm",
+            "max-w-screen-md": size === "md",
+            "max-w-screen-lg": size === "lg",
+            "max-w-screen-xl": size === "xl",
+            "max-w-full": size === "full"
+          },
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+var Grid = React2.forwardRef(
+  ({ className, cols = 3, gap = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "grid",
+          {
+            "grid-cols-1": cols === 1,
+            "grid-cols-1 sm:grid-cols-2": cols === 2,
+            "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3": cols === 3,
+            "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4": cols === 4,
+            "grid-cols-1 sm:grid-cols-2 lg:grid-cols-5": cols === 5,
+            "grid-cols-1 sm:grid-cols-2 lg:grid-cols-6": cols === 6,
+            "grid-cols-1 sm:grid-cols-2 lg:grid-cols-12": cols === 12
+          },
+          {
+            "gap-2": gap === "sm",
+            "gap-4": gap === "md",
+            "gap-6": gap === "lg",
+            "gap-8": gap === "xl"
+          },
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Grid.displayName = "Grid";
+var Stack = React2.forwardRef(
+  ({
+    className,
+    direction = "vertical",
+    spacing = "md",
+    align = "stretch",
+    justify = "start",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex",
+          {
+            "flex-col": direction === "vertical",
+            "flex-row": direction === "horizontal"
+          },
+          {
+            "gap-1": spacing === "xs",
+            "gap-2": spacing === "sm",
+            "gap-4": spacing === "md",
+            "gap-6": spacing === "lg",
+            "gap-8": spacing === "xl"
+          },
+          {
+            "items-start": align === "start",
+            "items-center": align === "center",
+            "items-end": align === "end",
+            "items-stretch": align === "stretch"
+          },
+          {
+            "justify-start": justify === "start",
+            "justify-center": justify === "center",
+            "justify-end": justify === "end",
+            "justify-between": justify === "between",
+            "justify-around": justify === "around"
+          },
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Stack.displayName = "Stack";
+var Separator = React2.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: decorative ? "none" : "separator",
+      "aria-orientation": orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = "Separator";
+var Checkbox = React2.forwardRef(
+  ({ className, label, id, ...props }, ref) => {
+    const checkboxId = id || React2.useId();
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          id: checkboxId,
+          ref,
+          className: cn(
+            "h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          ),
+          ...props
+        }
+      ),
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: checkboxId,
+          className: "ml-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          children: label
+        }
+      )
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+var RadioGroup = React2.forwardRef(
+  ({
+    className,
+    options,
+    value,
+    onChange,
+    name,
+    orientation = "vertical",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex",
+          orientation === "vertical" ? "flex-col gap-2" : "flex-row gap-4",
+          className
+        ),
+        ...props,
+        children: options.map((option) => {
+          const id = `${name}-${option.value}`;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "radio",
+                id,
+                name,
+                value: option.value,
+                checked: value === option.value,
+                disabled: option.disabled,
+                onChange: (e) => onChange?.(e.target.value),
+                className: "h-4 w-4 border-gray-300 text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: id,
+                className: "ml-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+                children: option.label
+              }
+            )
+          ] }, option.value);
+        })
+      }
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var Switch = React2.forwardRef(
+  ({ className, label, id, checked, onCheckedChange, onChange, ...props }, ref) => {
+    const switchId = id || React2.useId();
+    const handleChange = (e) => {
+      onChange?.(e);
+      onCheckedChange?.(e.target.checked);
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsxs("label", { htmlFor: switchId, className: "relative inline-flex cursor-pointer items-center", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            id: switchId,
+            ref,
+            checked,
+            onChange: handleChange,
+            className: "peer sr-only",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              'peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[""] peer-checked:bg-primary peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-ring peer-focus:ring-offset-2 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+              className
+            )
+          }
+        )
+      ] }),
+      label && /* @__PURE__ */ jsx("span", { className: "ml-3 text-sm font-medium text-foreground", children: label })
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+var Textarea = React2.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+var Select = React2.forwardRef(
+  ({ className, options, placeholder, onChange, ...props }, ref) => {
+    const handleChange = (e) => {
+      onChange?.(e.target.value);
+    };
+    return /* @__PURE__ */ jsxs(
+      "select",
+      {
+        ref,
+        className: cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        onChange: handleChange,
+        ...props,
+        children: [
+          placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+          options.map((option) => /* @__PURE__ */ jsx(
+            "option",
+            {
+              value: option.value,
+              disabled: option.disabled,
+              children: option.label
+            },
+            option.value
+          ))
+        ]
+      }
+    );
+  }
+);
+Select.displayName = "Select";
+
+// src/utils/colors.ts
+var severityColors = {
+  critical: "#ef4444",
+  // red-500
+  major: "#f59e0b",
+  // amber-500
+  minor: "#eab308",
+  // yellow-500
+  info: "#60a5fa"
+  // blue-400
+};
+var domainColors = [
+  "#3b82f6",
+  // blue-500
+  "#8b5cf6",
+  // violet-500
+  "#ec4899",
+  // pink-500
+  "#10b981",
+  // green-500
+  "#f59e0b",
+  // amber-500
+  "#06b6d4",
+  // cyan-500
+  "#f97316",
+  // orange-500
+  "#a855f7"
+  // purple-500
+];
+var chartColors = {
+  primary: "#3b82f6",
+  success: "#10b981",
+  warning: "#f59e0b",
+  danger: "#ef4444",
+  info: "#06b6d4"
+};
+function getDomainColor(index) {
+  return domainColors[index % domainColors.length];
+}
+function getSeverityColor(severity) {
+  return severityColors[severity];
+}
+function hexToRgba(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+// src/utils/formatters.ts
+function formatNumber(value) {
+  return new Intl.NumberFormat("en-US").format(value);
+}
+function formatCompactNumber(value) {
+  return new Intl.NumberFormat("en-US", {
+    notation: "compact",
+    maximumFractionDigits: 1
+  }).format(value);
+}
+function formatPercentage(value, decimals = 1) {
+  return `${(value * 100).toFixed(decimals)}%`;
+}
+function formatFileSize(bytes) {
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let size = bytes;
+  let unitIndex = 0;
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+  return `${size.toFixed(1)} ${units[unitIndex]}`;
+}
+function formatRelativeTime(date) {
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSec = Math.floor(diffMs / 1e3);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHour / 24);
+  const diffMonth = Math.floor(diffDay / 30);
+  const diffYear = Math.floor(diffDay / 365);
+  if (diffYear > 0) {
+    return `${diffYear} year${diffYear > 1 ? "s" : ""} ago`;
+  }
+  if (diffMonth > 0) {
+    return `${diffMonth} month${diffMonth > 1 ? "s" : ""} ago`;
+  }
+  if (diffDay > 0) {
+    return `${diffDay} day${diffDay > 1 ? "s" : ""} ago`;
+  }
+  if (diffHour > 0) {
+    return `${diffHour} hour${diffHour > 1 ? "s" : ""} ago`;
+  }
+  if (diffMin > 0) {
+    return `${diffMin} minute${diffMin > 1 ? "s" : ""} ago`;
+  }
+  return "just now";
+}
+function formatDate(date) {
+  return new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  }).format(date);
+}
+function formatDateTime(date) {
+  return new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  }).format(date);
+}
+function formatDuration(ms) {
+  const seconds = Math.floor(ms / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  if (hours > 0) {
+    return `${hours}h ${minutes % 60}m ${seconds % 60}s`;
+  }
+  if (minutes > 0) {
+    return `${minutes}m ${seconds % 60}s`;
+  }
+  return `${seconds}s`;
+}
+function formatMetric(value, unit = "number") {
+  switch (unit) {
+    case "bytes":
+      return formatFileSize(value);
+    case "percentage":
+      return formatPercentage(value);
+    case "duration":
+      return formatDuration(value);
+    default:
+      return formatCompactNumber(value);
+  }
+}
+function formatRange(min, max) {
+  return `${formatCompactNumber(min)} - ${formatCompactNumber(max)}`;
+}
+function formatDecimal(value, decimals = 2) {
+  return value.toFixed(decimals);
+}
+function useDebounce(value, delay = 300) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+function useD3(renderFn, dependencies = []) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) {
+      const selection = d32.select(ref.current);
+      renderFn(selection);
+    }
+  }, dependencies);
+  return ref;
+}
+function useD3WithResize(renderFn, dependencies = []) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) return;
+    const selection = d32.select(ref.current);
+    const render = () => renderFn(selection);
+    render();
+    const resizeObserver = new ResizeObserver(() => {
+      render();
+    });
+    resizeObserver.observe(ref.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, dependencies);
+  return ref;
+}
+function useForceSimulation(initialNodes, initialLinks, options) {
+  const {
+    chargeStrength = -300,
+    linkDistance = 100,
+    linkStrength = 1,
+    collisionStrength = 1,
+    collisionRadius = 10,
+    centerStrength = 0.1,
+    width,
+    height,
+    alphaDecay = 0.0228,
+    velocityDecay = 0.4
+  } = 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);
+  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(linkDistance).strength(linkStrength)
+    ).force("charge", d32.forceManyBody().strength(chargeStrength)).force("center", d32.forceCenter(width / 2, height / 2).strength(centerStrength)).force(
+      "collision",
+      d32.forceCollide().radius(collisionRadius).strength(collisionStrength)
+    ).alphaDecay(alphaDecay).velocityDecay(velocityDecay);
+    simulationRef.current = simulation;
+    simulation.on("tick", () => {
+      setNodes([...nodesCopy]);
+      setLinks([...linksCopy]);
+      setAlpha(simulation.alpha());
+      setIsRunning(simulation.alpha() > simulation.alphaMin());
+    });
+    simulation.on("end", () => {
+      setIsRunning(false);
+    });
+    return () => {
+      simulation.stop();
+    };
+  }, [
+    initialNodes,
+    initialLinks,
+    chargeStrength,
+    linkDistance,
+    linkStrength,
+    collisionStrength,
+    collisionRadius,
+    centerStrength,
+    width,
+    height,
+    alphaDecay,
+    velocityDecay
+  ]);
+  const restart = () => {
+    if (simulationRef.current) {
+      simulationRef.current.alpha(1).restart();
+      setIsRunning(true);
+    }
+  };
+  const stop = () => {
+    if (simulationRef.current) {
+      simulationRef.current.stop();
+      setIsRunning(false);
+    }
+  };
+  return {
+    nodes,
+    links,
+    restart,
+    stop,
+    isRunning,
+    alpha
+  };
+}
+function useDrag(simulation) {
+  const dragStarted = (event, node) => {
+    if (!simulation) return;
+    if (!event.active) simulation.alphaTarget(0.3).restart();
+    node.fx = node.x;
+    node.fy = node.y;
+  };
+  const dragged = (event, node) => {
+    node.fx = event.x;
+    node.fy = event.y;
+  };
+  const dragEnded = (event, node) => {
+    if (!simulation) return;
+    if (!event.active) simulation.alphaTarget(0);
+    node.fx = null;
+    node.fy = null;
+  };
+  return {
+    onDragStart: dragStarted,
+    onDrag: dragged,
+    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, {
+    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);
+    };
+  }, [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,
+      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 })
+          }
+        ) }),
+        /* @__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: [
+              /* @__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 || !node.y) return null;
+            const isSelected = selectedNodeId === node.id;
+            const isHovered = hoveredNodeId === node.id;
+            const nodeSize = node.size || defaultNodeSize;
+            const nodeColor = node.color || defaultNodeColor;
+            return /* @__PURE__ */ jsxs(
+              "g",
+              {
+                transform: `translate(${node.x},${node.y})`,
+                className: "cursor-pointer",
+                onClick: () => handleNodeClick(node),
+                onMouseEnter: () => handleNodeMouseEnter(node),
+                onMouseLeave: handleNodeMouseLeave,
+                onMouseDown: (e) => handleDragStart(e, node),
+                onMouseMove: (e) => handleDrag(e, node),
+                onMouseUp: (e) => handleDragEnd(e, node),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      r: nodeSize,
+                      fill: nodeColor,
+                      stroke: isSelected ? "#000" : isHovered ? "#666" : "none",
+                      strokeWidth: isSelected ? 3 : 2,
+                      opacity: isHovered || isSelected ? 1 : 0.9,
+                      className: "transition-all"
+                    }
+                  ),
+                  showNodeLabels && node.label && /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      y: nodeSize + 15,
+                      fill: "#333",
+                      fontSize: "12",
+                      textAnchor: "middle",
+                      dominantBaseline: "middle",
+                      pointerEvents: "none",
+                      className: "select-none",
+                      children: node.label
+                    }
+                  )
+                ]
+              },
+              node.id
+            );
+          })
+        ] })
+      ]
+    }
+  );
+};
+ForceDirectedGraph.displayName = "ForceDirectedGraph";
+
+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 };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map