@aiready/components 0.1.0

package/README.md

@@ -0,0 +1,240 @@
+# @aiready/components
+
+Unified shared components library (UI, charts, hooks, utilities) for AIReady.
+
+## Features
+
+- 🎨 **UI Components**: Button, Card, Input, Label, Badge (shadcn/ui based)
+- 📊 **D3 Charts**: Coming in Phase 2 (LineChart, BarChart, ForceGraph)
+- 🪝 **React Hooks**: Coming in Phase 3 (useDebounce, useTheme, useD3)
+- 🛠️ **Utilities**: className merging, formatters, color schemes
+- 🌙 **Dark Mode**: Built-in support via Tailwind CSS
+- 🎯 **Tree-shakeable**: Granular exports for optimal bundle size
+- 📦 **TypeScript**: Full type safety
+
+## Installation
+
+```bash
+pnpm add @aiready/components
+```
+
+## Usage
+
+### Import Everything
+
+```tsx
+import { Button, Card, Input, Label, Badge } from '@aiready/components';
+
+function App() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Welcome</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Label htmlFor="email">Email</Label>
+        <Input id="email" type="email" placeholder="you@example.com" />
+      </CardContent>
+      <CardFooter>
+        <Button>Submit</Button>
+        <Badge variant="secondary">New</Badge>
+      </CardFooter>
+    </Card>
+  );
+}
+```
+
+### Import Specific Components (Tree-shaking)
+
+```tsx
+import { Button } from '@aiready/components/button';
+import { Card } from '@aiready/components/card';
+```
+
+## Components
+
+### Button
+
+```tsx
+import { Button } from '@aiready/components/button';
+
+<Button variant="default">Click me</Button>
+<Button variant="destructive" size="sm">Delete</Button>
+<Button variant="outline" size="lg">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="link">Link</Button>
+```
+
+**Variants**: `default`, `destructive`, `outline`, `secondary`, `ghost`, `link`  
+**Sizes**: `default`, `sm`, `lg`, `icon`
+
+### Card
+
+```tsx
+import { 
+  Card, 
+  CardHeader, 
+  CardTitle, 
+  CardDescription,
+  CardContent, 
+  CardFooter 
+} from '@aiready/components/card';
+
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card description here</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card content</p>
+  </CardContent>
+  <CardFooter>
+    <Button>Action</Button>
+  </CardFooter>
+</Card>
+```
+
+### Input
+
+```tsx
+import { Input } from '@aiready/components/input';
+
+<Input type="text" placeholder="Enter text..." />
+<Input type="email" placeholder="Email..." />
+<Input type="password" placeholder="Password..." />
+```
+
+### Label
+
+```tsx
+import { Label } from '@aiready/components/label';
+
+<Label htmlFor="username">Username</Label>
+<Input id="username" />
+```
+
+### Badge
+
+```tsx
+import { Badge } from '@aiready/components/badge';
+
+<Badge variant="default">Default</Badge>
+<Badge variant="secondary">Secondary</Badge>
+<Badge variant="destructive">Error</Badge>
+<Badge variant="outline">Outline</Badge>
+```
+
+## Tailwind CSS Setup
+
+This package requires Tailwind CSS. Add the package to your Tailwind config:
+
+```js
+// tailwind.config.js
+export default {
+  content: [
+    './src/**/*.{ts,tsx}',
+    './node_modules/@aiready/components/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      // Use the shared config
+    },
+  },
+  plugins: [],
+};
+```
+
+### CSS Variables
+
+Add these CSS variables to your global styles:
+
+```css
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+```
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build package
+pnpm build
+
+# Watch mode
+pnpm dev
+
+# Type check
+pnpm typecheck
+
+# Run tests
+pnpm test
+```
+
+## Roadmap
+
+### Phase 1: Foundation ✅ COMPLETE
+- [x] Button, Card, Input, Label, Badge components
+- [x] Tailwind configuration
+- [x] TypeScript setup
+- [x] Build system (tsup)
+
+### Phase 2: Extended UI + Charts (Week 2)
+- [ ] Layout components (Container, Grid, Stack)
+- [ ] Interactive components (Modal, Dropdown, Tabs, Tooltip)
+- [ ] Form components (Select, Checkbox, Radio, Switch)
+- [ ] D3 Charts (LineChart, BarChart, ScatterPlot)
+
+### Phase 3: Advanced Charts + Utilities (Week 3)
+- [ ] Advanced charts (ForceGraph, HeatMap, TreeMap)
+- [ ] React hooks (useD3, useDebounce, useTheme)
+- [ ] Utilities (formatters, color schemes)
+
+## License
+
+MIT
+
+## Maintainer
+
+Peng Cao (@caopengau)

package/dist/charts/ForceDirectedGraph.d.ts

@@ -0,0 +1,40 @@
+import React__default from 'react';
+import { SimulationNode, SimulationLink, ForceSimulationOptions } from '../hooks/useForceSimulation.js';
+import 'd3';
+
+interface GraphNode extends SimulationNode {
+    id: string;
+    label?: string;
+    color?: string;
+    size?: number;
+    group?: string;
+}
+interface GraphLink extends SimulationLink {
+    color?: string;
+    width?: number;
+    label?: string;
+}
+interface ForceDirectedGraphProps {
+    nodes: GraphNode[];
+    links: GraphLink[];
+    width: number;
+    height: number;
+    simulationOptions?: Partial<ForceSimulationOptions>;
+    enableZoom?: boolean;
+    enableDrag?: boolean;
+    onNodeClick?: (node: GraphNode) => void;
+    onNodeHover?: (node: GraphNode | null) => void;
+    onLinkClick?: (link: GraphLink) => void;
+    selectedNodeId?: string;
+    hoveredNodeId?: string;
+    defaultNodeColor?: string;
+    defaultNodeSize?: number;
+    defaultLinkColor?: string;
+    defaultLinkWidth?: number;
+    showNodeLabels?: boolean;
+    showLinkLabels?: boolean;
+    className?: string;
+}
+declare const ForceDirectedGraph: React__default.FC<ForceDirectedGraphProps>;
+
+export { ForceDirectedGraph, type ForceDirectedGraphProps, type GraphLink, type GraphNode };

package/dist/charts/ForceDirectedGraph.js

@@ -0,0 +1,294 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+import * as d3 from 'd3';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/charts/ForceDirectedGraph.tsx
+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 = d3.forceSimulation(nodesCopy).force(
+      "link",
+      d3.forceLink(linksCopy).id((d) => d.id).distance(linkDistance).strength(linkStrength)
+    ).force("charge", d3.forceManyBody().strength(chargeStrength)).force("center", d3.forceCenter(width / 2, height / 2).strength(centerStrength)).force(
+      "collision",
+      d3.forceCollide().radius(collisionRadius).strength(collisionStrength)
+    ).alphaDecay(alphaDecay).velocityDecay(velocityDecay);
+    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 cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var ForceDirectedGraph = ({
+  nodes: initialNodes,
+  links: initialLinks,
+  width,
+  height,
+  simulationOptions,
+  enableZoom = true,
+  enableDrag = true,
+  onNodeClick,
+  onNodeHover,
+  onLinkClick,
+  selectedNodeId,
+  hoveredNodeId,
+  defaultNodeColor = "#69b3a2",
+  defaultNodeSize = 10,
+  defaultLinkColor = "#999",
+  defaultLinkWidth = 1,
+  showNodeLabels = true,
+  showLinkLabels = false,
+  className
+}) => {
+  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 = d3.select(svgRef.current);
+    const g = d3.select(gRef.current);
+    const zoom2 = d3.zoom().scaleExtent([0.1, 10]).on("zoom", (event) => {
+      g.attr("transform", event.transform);
+      setTransform(event.transform);
+    });
+    svg.call(zoom2);
+    return () => {
+      svg.on(".zoom", null);
+    };
+  }, [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 { ForceDirectedGraph };
+//# sourceMappingURL=ForceDirectedGraph.js.map
+//# sourceMappingURL=ForceDirectedGraph.js.map

package/dist/charts/ForceDirectedGraph.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useForceSimulation.ts","../../src/utils/cn.ts","../../src/charts/ForceDirectedGraph.tsx"],"names":["useRef","useState","useEffect","d32","zoom"],"mappings":"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","file":"ForceDirectedGraph.js","sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport * as d3 from 'd3';\n\nexport interface SimulationNode extends d3.SimulationNodeDatum {\n  id: string;\n  [key: string]: any;\n}\n\nexport interface SimulationLink extends d3.SimulationLinkDatum<SimulationNode> {\n  source: string | SimulationNode;\n  target: string | SimulationNode;\n  [key: string]: any;\n}\n\nexport interface ForceSimulationOptions {\n  /**\n   * Strength of the charge force (repulsion between nodes)\n   * @default -300\n   */\n  chargeStrength?: number;\n\n  /**\n   * Distance for links between nodes\n   * @default 100\n   */\n  linkDistance?: number;\n\n  /**\n   * Strength of the link force\n   * @default 1\n   */\n  linkStrength?: number;\n\n  /**\n   * Strength of collision detection\n   * @default 1\n   */\n  collisionStrength?: number;\n\n  /**\n   * Radius for collision detection (node size)\n   * @default 10\n   */\n  collisionRadius?: number;\n\n  /**\n   * Strength of centering force\n   * @default 0.1\n   */\n  centerStrength?: number;\n\n  /**\n   * Width of the simulation space\n   */\n  width: number;\n\n  /**\n   * Height of the simulation space\n   */\n  height: number;\n\n  /**\n   * Alpha decay rate (how quickly the simulation cools down)\n   * @default 0.0228\n   */\n  alphaDecay?: number;\n\n  /**\n   * Velocity decay (friction)\n   * @default 0.4\n   */\n  velocityDecay?: number;\n}\n\nexport interface UseForceSimulationReturn {\n  /**\n   * Current nodes with positions\n   */\n  nodes: SimulationNode[];\n\n  /**\n   * Current links\n   */\n  links: SimulationLink[];\n\n  /**\n   * Restart the simulation\n   */\n  restart: () => void;\n\n  /**\n   * Stop the simulation\n   */\n  stop: () => void;\n\n  /**\n   * Whether the simulation is currently running\n   */\n  isRunning: boolean;\n\n  /**\n   * Current alpha value (simulation heat)\n   */\n  alpha: number;\n}\n\n/**\n * Hook for managing d3-force simulations\n * Automatically handles simulation lifecycle, tick updates, and cleanup\n *\n * @param initialNodes - Initial nodes for the simulation\n * @param initialLinks - Initial links for the simulation\n * @param options - Configuration options for the force simulation\n * @returns Simulation state and control functions\n *\n * @example\n * ```tsx\n * function NetworkGraph() {\n *   const nodes = [\n *     { id: 'node1', name: 'Node 1' },\n *     { id: 'node2', name: 'Node 2' },\n *     { id: 'node3', name: 'Node 3' },\n *   ];\n *\n *   const links = [\n *     { source: 'node1', target: 'node2' },\n *     { source: 'node2', target: 'node3' },\n *   ];\n *\n *   const { nodes: simulatedNodes, links: simulatedLinks, restart } = useForceSimulation(\n *     nodes,\n *     links,\n *     {\n *       width: 800,\n *       height: 600,\n *       chargeStrength: -500,\n *       linkDistance: 150,\n *     }\n *   );\n *\n *   return (\n *     <svg width={800} height={600}>\n *       {simulatedLinks.map((link, i) => (\n *         <line\n *           key={i}\n *           x1={(link.source as SimulationNode).x}\n *           y1={(link.source as SimulationNode).y}\n *           x2={(link.target as SimulationNode).x}\n *           y2={(link.target as SimulationNode).y}\n *           stroke=\"#999\"\n *         />\n *       ))}\n *       {simulatedNodes.map((node) => (\n *         <circle\n *           key={node.id}\n *           cx={node.x}\n *           cy={node.y}\n *           r={10}\n *           fill=\"#69b3a2\"\n *         />\n *       ))}\n *     </svg>\n *   );\n * }\n * ```\n */\nexport function useForceSimulation(\n  initialNodes: SimulationNode[],\n  initialLinks: SimulationLink[],\n  options: ForceSimulationOptions\n): UseForceSimulationReturn {\n  const {\n    chargeStrength = -300,\n    linkDistance = 100,\n    linkStrength = 1,\n    collisionStrength = 1,\n    collisionRadius = 10,\n    centerStrength = 0.1,\n    width,\n    height,\n    alphaDecay = 0.0228,\n    velocityDecay = 0.4,\n  } = options;\n\n  const [nodes, setNodes] = useState<SimulationNode[]>(initialNodes);\n  const [links, setLinks] = useState<SimulationLink[]>(initialLinks);\n  const [isRunning, setIsRunning] = useState(false);\n  const [alpha, setAlpha] = useState(1);\n\n  const simulationRef = useRef<d3.Simulation<SimulationNode, SimulationLink> | null>(null);\n\n  useEffect(() => {\n    // Create a copy of nodes and links to avoid mutating the original data\n    const nodesCopy = initialNodes.map((node) => ({ ...node }));\n    const linksCopy = initialLinks.map((link) => ({ ...link }));\n\n    // Create the simulation\n    const simulation = d3\n      .forceSimulation<SimulationNode>(nodesCopy)\n      .force(\n        'link',\n        d3\n          .forceLink<SimulationNode, SimulationLink>(linksCopy)\n          .id((d) => d.id)\n          .distance(linkDistance)\n          .strength(linkStrength)\n      )\n      .force('charge', d3.forceManyBody().strength(chargeStrength))\n      .force('center', d3.forceCenter(width / 2, height / 2).strength(centerStrength))\n      .force(\n        'collision',\n        d3.forceCollide<SimulationNode>().radius(collisionRadius).strength(collisionStrength)\n      )\n      .alphaDecay(alphaDecay)\n      .velocityDecay(velocityDecay);\n\n    simulationRef.current = simulation;\n\n    // Update state on each tick\n    simulation.on('tick', () => {\n      setNodes([...nodesCopy]);\n      setLinks([...linksCopy]);\n      setAlpha(simulation.alpha());\n      setIsRunning(simulation.alpha() > simulation.alphaMin());\n    });\n\n    simulation.on('end', () => {\n      setIsRunning(false);\n    });\n\n    // Cleanup on unmount\n    return () => {\n      simulation.stop();\n    };\n  }, [\n    initialNodes,\n    initialLinks,\n    chargeStrength,\n    linkDistance,\n    linkStrength,\n    collisionStrength,\n    collisionRadius,\n    centerStrength,\n    width,\n    height,\n    alphaDecay,\n    velocityDecay,\n  ]);\n\n  const restart = () => {\n    if (simulationRef.current) {\n      simulationRef.current.alpha(1).restart();\n      setIsRunning(true);\n    }\n  };\n\n  const stop = () => {\n    if (simulationRef.current) {\n      simulationRef.current.stop();\n      setIsRunning(false);\n    }\n  };\n\n  return {\n    nodes,\n    links,\n    restart,\n    stop,\n    isRunning,\n    alpha,\n  };\n}\n\n/**\n * Hook for creating a draggable force simulation\n * Provides drag handlers that can be attached to node elements\n *\n * @param simulation - The d3 force simulation instance\n * @returns Drag behavior that can be applied to nodes\n *\n * @example\n * ```tsx\n * function DraggableNetworkGraph() {\n *   const simulation = useRef<d3.Simulation<SimulationNode, SimulationLink>>();\n *   const drag = useDrag(simulation.current);\n *\n *   return (\n *     <svg>\n *       {nodes.map((node) => (\n *         <circle\n *           key={node.id}\n *           {...drag}\n *           cx={node.x}\n *           cy={node.y}\n *           r={10}\n *         />\n *       ))}\n *     </svg>\n *   );\n * }\n * ```\n */\nexport function useDrag(simulation: d3.Simulation<SimulationNode, any> | null | undefined) {\n  const dragStarted = (event: any, node: SimulationNode) => {\n    if (!simulation) return;\n    if (!event.active) simulation.alphaTarget(0.3).restart();\n    node.fx = node.x;\n    node.fy = node.y;\n  };\n\n  const dragged = (event: any, node: SimulationNode) => {\n    node.fx = event.x;\n    node.fy = event.y;\n  };\n\n  const dragEnded = (event: any, node: SimulationNode) => {\n    if (!simulation) return;\n    if (!event.active) simulation.alphaTarget(0);\n    node.fx = null;\n    node.fy = null;\n  };\n\n  return {\n    onDragStart: dragStarted,\n    onDrag: dragged,\n    onDragEnd: dragEnded,\n  };\n}","import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merges class names using clsx and tailwind-merge\n * @param inputs - Class values to merge\n * @returns Merged class names\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}","import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport * as d3 from 'd3';\nimport {\n  useForceSimulation,\n  type SimulationNode,\n  type SimulationLink,\n  type ForceSimulationOptions,\n} from '../hooks/useForceSimulation';\nimport { cn } from '../utils/cn';\n\nexport interface GraphNode extends SimulationNode {\n  id: string;\n  label?: string;\n  color?: string;\n  size?: number;\n  group?: string;\n}\n\nexport interface GraphLink extends SimulationLink {\n  color?: string;\n  width?: number;\n  label?: string;\n}\n\nexport interface ForceDirectedGraphProps {\n  /**\n   * Array of nodes to display\n   */\n  nodes: GraphNode[];\n\n  /**\n   * Array of links between nodes\n   */\n  links: GraphLink[];\n\n  /**\n   * Width of the graph container\n   */\n  width: number;\n\n  /**\n   * Height of the graph container\n   */\n  height: number;\n\n  /**\n   * Force simulation options\n   */\n  simulationOptions?: Partial<ForceSimulationOptions>;\n\n  /**\n   * Whether to enable zoom and pan\n   * @default true\n   */\n  enableZoom?: boolean;\n\n  /**\n   * Whether to enable node dragging\n   * @default true\n   */\n  enableDrag?: boolean;\n\n  /**\n   * Callback when a node is clicked\n   */\n  onNodeClick?: (node: GraphNode) => void;\n\n  /**\n   * Callback when a node is hovered\n   */\n  onNodeHover?: (node: GraphNode | null) => void;\n\n  /**\n   * Callback when a link is clicked\n   */\n  onLinkClick?: (link: GraphLink) => void;\n\n  /**\n   * Selected node ID\n   */\n  selectedNodeId?: string;\n\n  /**\n   * Hovered node ID\n   */\n  hoveredNodeId?: string;\n\n  /**\n   * Default node color\n   * @default \"#69b3a2\"\n   */\n  defaultNodeColor?: string;\n\n  /**\n   * Default node size\n   * @default 10\n   */\n  defaultNodeSize?: number;\n\n  /**\n   * Default link color\n   * @default \"#999\"\n   */\n  defaultLinkColor?: string;\n\n  /**\n   * Default link width\n   * @default 1\n   */\n  defaultLinkWidth?: number;\n\n  /**\n   * Whether to show node labels\n   * @default true\n   */\n  showNodeLabels?: boolean;\n\n  /**\n   * Whether to show link labels\n   * @default false\n   */\n  showLinkLabels?: boolean;\n\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n}\n\nexport const ForceDirectedGraph: React.FC<ForceDirectedGraphProps> = ({\n  nodes: initialNodes,\n  links: initialLinks,\n  width,\n  height,\n  simulationOptions,\n  enableZoom = true,\n  enableDrag = true,\n  onNodeClick,\n  onNodeHover,\n  onLinkClick,\n  selectedNodeId,\n  hoveredNodeId,\n  defaultNodeColor = '#69b3a2',\n  defaultNodeSize = 10,\n  defaultLinkColor = '#999',\n  defaultLinkWidth = 1,\n  showNodeLabels = true,\n  showLinkLabels = false,\n  className,\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const gRef = useRef<SVGGElement>(null);\n  const [transform, setTransform] = useState({ k: 1, x: 0, y: 0 });\n\n  // Initialize simulation\n  const { nodes, links, restart } = useForceSimulation(initialNodes, initialLinks, {\n    width,\n    height,\n    ...simulationOptions,\n  });\n\n  // Set up zoom behavior\n  useEffect(() => {\n    if (!enableZoom || !svgRef.current || !gRef.current) return;\n\n    const svg = d3.select(svgRef.current);\n    const g = d3.select(gRef.current);\n\n    const zoom = d3\n      .zoom<SVGSVGElement, unknown>()\n      .scaleExtent([0.1, 10])\n      .on('zoom', (event) => {\n        g.attr('transform', event.transform);\n        setTransform(event.transform);\n      });\n\n    svg.call(zoom);\n\n    return () => {\n      svg.on('.zoom', null);\n    };\n  }, [enableZoom]);\n\n  // Set up drag behavior\n  const handleDragStart = useCallback(\n    (event: React.MouseEvent, node: GraphNode) => {\n      if (!enableDrag) return;\n      event.stopPropagation();\n      node.fx = node.x;\n      node.fy = node.y;\n      restart();\n    },\n    [enableDrag, restart]\n  );\n\n  const handleDrag = useCallback(\n    (event: React.MouseEvent, node: GraphNode) => {\n      if (!enableDrag) return;\n      const svg = svgRef.current;\n      if (!svg) return;\n\n      const rect = svg.getBoundingClientRect();\n      const x = (event.clientX - rect.left - transform.x) / transform.k;\n      const y = (event.clientY - rect.top - transform.y) / transform.k;\n\n      node.fx = x;\n      node.fy = y;\n    },\n    [enableDrag, transform]\n  );\n\n  const handleDragEnd = useCallback(\n    (event: React.MouseEvent, node: GraphNode) => {\n      if (!enableDrag) return;\n      event.stopPropagation();\n      node.fx = null;\n      node.fy = null;\n    },\n    [enableDrag]\n  );\n\n  const handleNodeClick = useCallback(\n    (node: GraphNode) => {\n      onNodeClick?.(node);\n    },\n    [onNodeClick]\n  );\n\n  const handleNodeMouseEnter = useCallback(\n    (node: GraphNode) => {\n      onNodeHover?.(node);\n    },\n    [onNodeHover]\n  );\n\n  const handleNodeMouseLeave = useCallback(() => {\n    onNodeHover?.(null);\n  }, [onNodeHover]);\n\n  const handleLinkClick = useCallback(\n    (link: GraphLink) => {\n      onLinkClick?.(link);\n    },\n    [onLinkClick]\n  );\n\n  return (\n    <svg\n      ref={svgRef}\n      width={width}\n      height={height}\n      className={cn('bg-white dark:bg-gray-900', className)}\n    >\n      <defs>\n        {/* Arrow marker for directed graphs */}\n        <marker\n          id=\"arrow\"\n          viewBox=\"0 0 10 10\"\n          refX=\"20\"\n          refY=\"5\"\n          markerWidth=\"6\"\n          markerHeight=\"6\"\n          orient=\"auto\"\n        >\n          <path d=\"M 0 0 L 10 5 L 0 10 z\" fill={defaultLinkColor} />\n        </marker>\n      </defs>\n\n      <g ref={gRef}>\n        {/* Render links */}\n        {links.map((link, i) => {\n          const source = link.source as GraphNode;\n          const target = link.target as GraphNode;\n          if (!source.x || !source.y || !target.x || !target.y) return null;\n\n          return (\n            <g key={`link-${i}`}>\n              <line\n                x1={source.x}\n                y1={source.y}\n                x2={target.x}\n                y2={target.y}\n                stroke={link.color || defaultLinkColor}\n                strokeWidth={link.width || defaultLinkWidth}\n                opacity={0.6}\n                className=\"cursor-pointer transition-opacity hover:opacity-100\"\n                onClick={() => handleLinkClick(link)}\n              />\n              {showLinkLabels && link.label && (\n                <text\n                  x={(source.x + target.x) / 2}\n                  y={(source.y + target.y) / 2}\n                  fill=\"#666\"\n                  fontSize=\"10\"\n                  textAnchor=\"middle\"\n                  dominantBaseline=\"middle\"\n                  pointerEvents=\"none\"\n                >\n                  {link.label}\n                </text>\n              )}\n            </g>\n          );\n        })}\n\n        {/* Render nodes */}\n        {nodes.map((node) => {\n          if (!node.x || !node.y) return null;\n\n          const isSelected = selectedNodeId === node.id;\n          const isHovered = hoveredNodeId === node.id;\n          const nodeSize = node.size || defaultNodeSize;\n          const nodeColor = node.color || defaultNodeColor;\n\n          return (\n            <g\n              key={node.id}\n              transform={`translate(${node.x},${node.y})`}\n              className=\"cursor-pointer\"\n              onClick={() => handleNodeClick(node)}\n              onMouseEnter={() => handleNodeMouseEnter(node)}\n              onMouseLeave={handleNodeMouseLeave}\n              onMouseDown={(e) => handleDragStart(e, node)}\n              onMouseMove={(e) => handleDrag(e, node)}\n              onMouseUp={(e) => handleDragEnd(e, node)}\n            >\n              <circle\n                r={nodeSize}\n                fill={nodeColor}\n                stroke={isSelected ? '#000' : isHovered ? '#666' : 'none'}\n                strokeWidth={isSelected ? 3 : 2}\n                opacity={isHovered || isSelected ? 1 : 0.9}\n                className=\"transition-all\"\n              />\n              {showNodeLabels && node.label && (\n                <text\n                  y={nodeSize + 15}\n                  fill=\"#333\"\n                  fontSize=\"12\"\n                  textAnchor=\"middle\"\n                  dominantBaseline=\"middle\"\n                  pointerEvents=\"none\"\n                  className=\"select-none\"\n                >\n                  {node.label}\n                </text>\n              )}\n            </g>\n          );\n        })}\n      </g>\n    </svg>\n  );\n};\n\nForceDirectedGraph.displayName = 'ForceDirectedGraph';"]}

package/dist/components/badge.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+export { Badge, type BadgeProps, badgeVariants };

package/dist/components/badge.js

@@ -0,0 +1,32 @@
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/badge.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+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 });
+}
+
+export { Badge, badgeVariants };
+//# sourceMappingURL=badge.js.map
+//# sourceMappingURL=badge.js.map

package/dist/components/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/badge.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACNA,IAAM,aAAA,GAAgB,GAAA;AAAA,EACpB,wKAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EACE,2EAAA;AAAA,QACF,SAAA,EACE,iFAAA;AAAA,QACF,WAAA,EACE,uFAAA;AAAA,QACF,OAAA,EAAS;AAAA;AACX,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ;AAMA,SAAS,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,GAAG,OAAM,EAAe;AAC3D,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,aAAA,CAAc,EAAE,OAAA,EAAS,CAAA,EAAG,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAE1E","file":"badge.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merges class names using clsx and tailwind-merge\n * @param inputs - Class values to merge\n * @returns Merged class names\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}","import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../utils/cn';\n\nconst badgeVariants = cva(\n  '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',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return (\n    <div className={cn(badgeVariants({ variant }), className)} {...props} />\n  );\n}\n\nexport { Badge, badgeVariants };"]}