{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "connection-graph",
  "type": "registry:ui",
  "title": "Neural Connection Circuit Graph",
  "description": "Interactive distributed neural circuit graph with animated laser beam data streams, pulsing nodes, and real-time topology highlights.",
  "category": "data",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "tags": [
    "data",
    "graph",
    "network",
    "nodes",
    "connections",
    "laser-beam",
    "topology",
    "interactive"
  ],
  "files": [
    {
      "path": "registry/data/connection-graph/connection-graph.tsx",
      "type": "registry:ui",
      "target": "components/ui/connection-graph.tsx",
      "content": "import React, { useState } from 'react'\nimport { motion } from 'framer-motion'\nimport { Cpu, Terminal, ShieldCheck, Database } from '@phosphor-icons/react'\nimport { cn } from '@/lib/utils'\n\nexport interface GraphNode {\n  id: string\n  label: string\n  subtitle: string\n  icon: React.ReactNode\n  x: number // percentage 0-100\n  y: number // percentage 0-100\n}\n\nexport interface GraphConnection {\n  from: string\n  to: string\n  speed?: number\n  label?: string\n}\n\nexport interface ConnectionGraphProps {\n  nodes?: GraphNode[]\n  connections?: GraphConnection[]\n  beamColor?: string\n  className?: string\n}\n\nconst DEFAULT_NODES: GraphNode[] = [\n  {\n    id: 'gateway',\n    label: 'API Gateway',\n    subtitle: 'Vercel Edge',\n    icon: <Terminal size={18} weight=\"bold\" className=\"text-cyan-500\" />,\n    x: 15,\n    y: 50,\n  },\n  {\n    id: 'core',\n    label: 'Neural Engine',\n    subtitle: 'Compute Cluster',\n    icon: <Cpu size={20} weight=\"bold\" className=\"text-indigo-500\" />,\n    x: 50,\n    y: 30,\n  },\n  {\n    id: 'security',\n    label: 'Auth Vault',\n    subtitle: 'JWT / Zero-Trust',\n    icon: <ShieldCheck size={18} weight=\"bold\" className=\"text-emerald-500\" />,\n    x: 50,\n    y: 75,\n  },\n  {\n    id: 'registry',\n    label: 'Registry Cache',\n    subtitle: '136+ Endpoints',\n    icon: <Database size={18} weight=\"bold\" className=\"text-amber-500\" />,\n    x: 85,\n    y: 50,\n  },\n]\n\nconst DEFAULT_CONNECTIONS: GraphConnection[] = [\n  { from: 'gateway', to: 'core', speed: 2 },\n  { from: 'gateway', to: 'security', speed: 2.4 },\n  { from: 'core', to: 'registry', speed: 1.8 },\n  { from: 'security', to: 'registry', speed: 2.2 },\n]\n\nexport const ConnectionGraph: React.FC<ConnectionGraphProps> = ({\n  nodes = DEFAULT_NODES,\n  connections = DEFAULT_CONNECTIONS,\n  beamColor = '#6366f1',\n  className,\n}) => {\n  const [activeNode, setActiveNode] = useState<string | null>(null)\n\n  return (\n    <div\n      className={cn(\n        'relative w-full h-[280px] max-w-[500px] mx-auto rounded-2xl bg-zinc-50 dark:bg-zinc-950/70 border border-zinc-200/80 dark:border-white/10 p-4 overflow-hidden select-none isolate',\n        className\n      )}\n    >\n      <div className=\"absolute inset-0 opacity-15 bg-[radial-gradient(#6366f1_1px,transparent_1px)] bg-[size:20px_20px] pointer-events-none\" />\n\n      <svg className=\"absolute inset-0 w-full h-full pointer-events-none z-0\">\n        <defs>\n          <linearGradient id=\"beam-grad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#06b6d4\" />\n            <stop offset=\"50%\" stopColor=\"#6366f1\" />\n            <stop offset=\"100%\" stopColor=\"#a855f7\" />\n          </linearGradient>\n        </defs>\n\n        {connections.map((conn, i) => {\n          const from = nodes.find((n) => n.id === conn.from)\n          const to = nodes.find((n) => n.id === conn.to)\n          if (!from || !to) return null\n\n          const isConnectedToActive =\n            activeNode && (from.id === activeNode || to.id === activeNode)\n\n          return (\n            <g key={i}>\n              <line\n                x1={`${from.x}%`}\n                y1={`${from.y}%`}\n                x2={`${to.x}%`}\n                y2={`${to.y}%`}\n                stroke=\"currentColor\"\n                strokeWidth={isConnectedToActive ? 2 : 1}\n                strokeDasharray=\"4 4\"\n                className={cn(\n                  'transition-all duration-300',\n                  isConnectedToActive\n                    ? 'text-indigo-500 opacity-80'\n                    : 'text-zinc-300 dark:text-zinc-700 opacity-40'\n                )}\n              />\n\n              <motion.circle\n                r={isConnectedToActive ? 4 : 3}\n                fill=\"url(#beam-grad)\"\n                initial={{\n                  cx: `${from.x}%`,\n                  cy: `${from.y}%`,\n                  opacity: 0.2,\n                }}\n                animate={{\n                  cx: [`${from.x}%`, `${to.x}%`],\n                  cy: [`${from.y}%`, `${to.y}%`],\n                  opacity: [0.2, 1, 0.2],\n                }}\n                transition={{\n                  duration: conn.speed || 2,\n                  repeat: Infinity,\n                  ease: 'linear',\n                  delay: i * 0.4,\n                }}\n              />\n            </g>\n          )\n        })}\n      </svg>\n\n      {nodes.map((node) => {\n        const isSelected = activeNode === node.id\n\n        return (\n          <motion.div\n            key={node.id}\n            onMouseEnter={() => setActiveNode(node.id)}\n            onMouseLeave={() => setActiveNode(null)}\n            whileHover={{ scale: 1.08 }}\n            whileTap={{ scale: 0.95 }}\n            style={{\n              left: `${node.x}%`,\n              top: `${node.y}%`,\n              transform: 'translate(-50%, -50%)',\n            }}\n            className={cn(\n              'absolute z-10 flex flex-col items-center justify-center cursor-pointer transition-all duration-200'\n            )}\n          >\n            <div\n              className={cn(\n                'flex h-11 w-11 items-center justify-center rounded-2xl border backdrop-blur-xl transition-all duration-300 shadow-md',\n                isSelected\n                  ? 'border-indigo-500 bg-indigo-500/15 shadow-indigo-500/30 ring-4 ring-indigo-500/20'\n                  : 'border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 shadow-xs hover:border-zinc-300 dark:hover:border-white/25'\n              )}\n            >\n              {node.icon}\n            </div>\n\n            <div className=\"mt-1.5 flex flex-col items-center text-center\">\n              <span className=\"font-mono text-[10px] font-bold text-zinc-900 dark:text-zinc-100 whitespace-nowrap\">\n                {node.label}\n              </span>\n              <span className=\"font-mono text-[8px] text-zinc-500 dark:text-zinc-400 whitespace-nowrap\">\n                {node.subtitle}\n              </span>\n            </div>\n          </motion.div>\n        )\n      })}\n    </div>\n  )\n}\n\nexport default ConnectionGraph\n"
    }
  ],
  "tailwind": {
    "required": true
  },
  "framework": [
    "react",
    "nextjs",
    "vite"
  ]
}