{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "system-architecture-graph",
  "type": "registry:ui",
  "title": "System Architecture Graph",
  "description": "Interactive distributed node topology graph with animated bezier packet pulses, node health telemetry, and live throughput metrics.",
  "category": "data",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/data/system-architecture-graph/system-architecture-graph.tsx",
      "type": "registry:ui",
      "target": "components/ui/system-architecture-graph.tsx",
      "content": "import React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { \n  Globe, \n  Cpu, \n  Database, \n  ShieldCheck, \n  CloudCheck, \n  HardDrives,\n  Circle,\n  Pulse\n} from '@phosphor-icons/react';\n\nexport interface TopologyNode {\n  id: string;\n  name: string;\n  type: 'gateway' | 'compute' | 'database' | 'security';\n  latency: string;\n  throughput: string;\n  status: 'healthy' | 'active' | 'standby';\n  x: number; // percentage in graph canvas\n  y: number; // percentage in graph canvas\n}\n\nconst DEFAULT_NODES: TopologyNode[] = [\n  { id: 'gateway', name: 'Edge Ingress API', type: 'gateway', latency: '2.1ms', throughput: '48.2k req/s', status: 'healthy', x: 12, y: 50 },\n  { id: 'auth', name: 'Zero-Trust Auth', type: 'security', latency: '4.8ms', throughput: '22.1k req/s', status: 'healthy', x: 44, y: 22 },\n  { id: 'ai-engine', name: 'AI Inference Swarm', type: 'compute', latency: '18.4ms', throughput: '12.4k req/s', status: 'active', x: 44, y: 78 },\n  { id: 'cache', name: 'Distributed Redis', type: 'database', latency: '0.8ms', throughput: '94.0k req/s', status: 'healthy', x: 86, y: 30 },\n  { id: 'postgres', name: 'Postgres Vector DB', type: 'database', latency: '6.2ms', throughput: '8.6k req/s', status: 'healthy', x: 86, y: 72 },\n];\n\nexport interface SystemArchitectureGraphProps {\n  interactive?: boolean;\n  activePacketPulse?: boolean;\n  className?: string;\n}\n\nexport const SystemArchitectureGraph: React.FC<SystemArchitectureGraphProps> = ({\n  interactive = true,\n  activePacketPulse = true,\n  className = '',\n}) => {\n  const [selectedNode, setSelectedNode] = useState<TopologyNode>(DEFAULT_NODES[0]);\n\n  const getNodeIcon = (type: TopologyNode['type']) => {\n    switch (type) {\n      case 'gateway': return <Globe size={18} weight=\"bold\" className=\"text-cyan-400\" />;\n      case 'compute': return <Cpu size={18} weight=\"bold\" className=\"text-violet-400\" />;\n      case 'security': return <ShieldCheck size={18} weight=\"bold\" className=\"text-emerald-400\" />;\n      case 'database': return <Database size={18} weight=\"bold\" className=\"text-amber-400\" />;\n    }\n  };\n\n  return (\n    <div className={`w-full max-w-4xl mx-auto rounded-3xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-[#07080d] p-6 shadow-2xl font-mono text-xs select-none ${className}`}>\n      {/* Top Header */}\n      <div className=\"flex flex-wrap items-center justify-between gap-4 pb-4 border-b border-zinc-200/80 dark:border-white/5\">\n        <div className=\"flex items-center gap-2.5\">\n          <div className=\"flex h-8 w-8 items-center justify-center rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400\">\n            <Pulse size={16} weight=\"bold\" />\n          </div>\n          <div>\n            <h3 className=\"font-bold text-zinc-900 dark:text-white\">Distributed Topo-Mesh</h3>\n            <span className=\"text-[11px] text-zinc-500\">Live Traffic & Packet Flow Analysis</span>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-3\">\n          <div className=\"flex items-center gap-1.5 text-[11px] text-zinc-400\">\n            <Circle size={8} weight=\"fill\" className=\"text-emerald-400 animate-pulse\" />\n            <span>5 Nodes Active</span>\n          </div>\n          <span className=\"px-2.5 py-1 rounded-full text-[10px] font-semibold bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-300\">\n            99.998% UPTIME\n          </span>\n        </div>\n      </div>\n\n      {/* Main Interactive Canvas Area */}\n      <div className=\"relative my-6 h-72 sm:h-80 w-full rounded-2xl bg-zinc-50 dark:bg-black/60 border border-zinc-200/60 dark:border-white/5 overflow-hidden\">\n        {/* Subtle grid dots */}\n        <div className=\"absolute inset-0 bg-[radial-gradient(#6b728020_1px,transparent_1px)] [background-size:20px_20px]\" />\n\n        {/* SVG Bezier Connection Lines */}\n        <svg viewBox=\"0 0 1000 500\" preserveAspectRatio=\"none\" className=\"absolute inset-0 w-full h-full pointer-events-none\">\n          <defs>\n            <linearGradient id=\"cyanViolet\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n              <stop offset=\"0%\" stopColor=\"#22d3ee\" stopOpacity=\"0.6\" />\n              <stop offset=\"100%\" stopColor=\"#a855f7\" stopOpacity=\"0.6\" />\n            </linearGradient>\n            <linearGradient id=\"violetAmber\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n              <stop offset=\"0%\" stopColor=\"#a855f7\" stopOpacity=\"0.6\" />\n              <stop offset=\"100%\" stopColor=\"#f59e0b\" stopOpacity=\"0.6\" />\n            </linearGradient>\n          </defs>\n\n          {/* Lines from Gateway (120, 250) to Auth (440, 110) and AI (440, 390) */}\n          <path d=\"M 120 250 C 280 250, 280 110, 440 110\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"text-zinc-300 dark:text-white/15\" />\n          <path d=\"M 120 250 C 280 250, 280 390, 440 390\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"text-zinc-300 dark:text-white/15\" />\n\n          {/* Lines from Auth (440, 110) to Cache (860, 150) */}\n          <path d=\"M 440 110 C 650 110, 650 150, 860 150\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"text-zinc-300 dark:text-white/15\" />\n\n          {/* Lines from AI (440, 390) to Cache (860, 150) and Postgres (860, 360) */}\n          <path d=\"M 440 390 C 650 390, 650 150, 860 150\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"text-zinc-300 dark:text-white/15\" />\n          <path d=\"M 440 390 C 650 390, 650 360, 860 360\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"text-zinc-300 dark:text-white/15\" />\n\n          {/* Animated Glowing Packet Pulses */}\n          {activePacketPulse && (\n            <>\n              <path\n                d=\"M 120 250 C 280 250, 280 110, 440 110\"\n                fill=\"none\"\n                stroke=\"url(#cyanViolet)\"\n                strokeWidth=\"3\"\n                strokeDasharray=\"8 48\"\n                className=\"animate-[dash_2s_linear_infinite]\"\n              />\n              <path\n                d=\"M 120 250 C 280 250, 280 390, 440 390\"\n                fill=\"none\"\n                stroke=\"url(#cyanViolet)\"\n                strokeWidth=\"3\"\n                strokeDasharray=\"8 48\"\n                className=\"animate-[dash_2.4s_linear_infinite]\"\n              />\n              <path\n                d=\"M 440 390 C 650 390, 650 360, 860 360\"\n                fill=\"none\"\n                stroke=\"url(#violetAmber)\"\n                strokeWidth=\"3\"\n                strokeDasharray=\"8 48\"\n                className=\"animate-[dash_1.8s_linear_infinite]\"\n              />\n            </>\n          )}\n        </svg>\n\n        {/* Nodes Placed Absolutes */}\n        {DEFAULT_NODES.map((node) => {\n          const isSelected = selectedNode?.id === node.id;\n\n          return (\n            <div\n              key={node.id}\n              style={{ left: `${node.x}%`, top: `${node.y}%` }}\n              onClick={() => interactive && setSelectedNode(node)}\n              className=\"absolute -translate-x-1/2 -translate-y-1/2 cursor-pointer z-10 group\"\n            >\n              <div className={`relative flex items-center gap-2 px-3 py-2 rounded-2xl border transition-all ${\n                isSelected\n                  ? 'bg-white dark:bg-zinc-900 border-emerald-500 shadow-[0_0_20px_rgba(16,185,129,0.3)] scale-105'\n                  : 'bg-white/90 dark:bg-zinc-900/90 border-zinc-200 dark:border-white/10 hover:border-zinc-400 dark:hover:border-white/20 shadow-md'\n              }`}>\n                {/* Node Type Icon */}\n                <div className=\"flex h-7 w-7 items-center justify-center rounded-xl bg-zinc-100 dark:bg-white/5\">\n                  {getNodeIcon(node.type)}\n                </div>\n\n                <div className=\"hidden sm:flex flex-col pr-1\">\n                  <span className=\"font-bold text-zinc-900 dark:text-white text-[11px] leading-tight\">\n                    {node.name}\n                  </span>\n                  <span className=\"text-[10px] text-zinc-400 font-mono\">\n                    {node.latency}\n                  </span>\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n\n      {/* Selected Node Inspector Footer Banner */}\n      <div className=\"flex flex-wrap items-center justify-between gap-3 pt-3 border-t border-zinc-200/80 dark:border-white/5\">\n        <div className=\"flex items-center gap-3\">\n          <span className=\"text-zinc-400 font-semibold uppercase text-[11px]\">Selected:</span>\n          <span className=\"font-bold text-zinc-900 dark:text-white\">{selectedNode.name}</span>\n          <span className=\"px-2 py-0.5 rounded-full text-[9px] uppercase font-bold text-emerald-500 bg-emerald-500/10 border border-emerald-500/20\">\n            {selectedNode.status}\n          </span>\n        </div>\n\n        <div className=\"flex items-center gap-4 text-[11px] text-zinc-500 font-mono\">\n          <span>Latency: <strong className=\"text-zinc-900 dark:text-zinc-200\">{selectedNode.latency}</strong></span>\n          <span>Load: <strong className=\"text-zinc-900 dark:text-zinc-200\">{selectedNode.throughput}</strong></span>\n        </div>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}