{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "global-edge-network",
  "title": "Global Edge Network",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/global-edge-network/GlobalEdgeNetwork.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Globe, X } from 'lucide-react'\nimport { DottedMapChart, type MapPin, type MapRoute } from '@/components/ui/charts/dotted-map-chart'\nimport { cn } from '@/lib/utils'\n\nexport interface EdgeNode {\n  id: string\n  name: string\n  code: string\n  region: 'Americas' | 'Europe' | 'APAC'\n  city: string\n  country: string\n  role: string\n  lat: number\n  lng: number\n  latencyMs: number\n  throughput: string\n  status: 'optimal' | 'degraded'\n}\n\nconst REGIONS = ['All', 'Americas', 'Europe', 'APAC'] as const\ntype RegionFilter = (typeof REGIONS)[number]\n\nconst ALL_NODES: EdgeNode[] = [\n  {\n    id: 'sfo-01',\n    name: 'SFO-Edge-1',\n    code: 'SFO',\n    region: 'Americas',\n    city: 'San Francisco',\n    country: 'United States',\n    role: 'Tier-1 Gateway',\n    lat: 37.7749,\n    lng: -122.4194,\n    latencyMs: 18,\n    throughput: '340 Gbps',\n    status: 'optimal',\n  },\n  {\n    id: 'iad-01',\n    name: 'IAD-Edge-1',\n    code: 'IAD',\n    region: 'Americas',\n    city: 'Ashburn',\n    country: 'United States',\n    role: 'Primary Transit Core',\n    lat: 39.0438,\n    lng: -77.4874,\n    latencyMs: 12,\n    throughput: '520 Gbps',\n    status: 'optimal',\n  },\n  {\n    id: 'ord-01',\n    name: 'ORD-Edge-1',\n    code: 'ORD',\n    region: 'Americas',\n    city: 'Chicago',\n    country: 'United States',\n    role: 'Midwest Exchange',\n    lat: 41.8781,\n    lng: -87.6298,\n    latencyMs: 19,\n    throughput: '280 Gbps',\n    status: 'optimal',\n  },\n  {\n    id: 'gru-01',\n    name: 'GRU-Edge-1',\n    code: 'GRU',\n    region: 'Americas',\n    city: 'São Paulo',\n    country: 'Brazil',\n    role: 'LATAM Core Transit',\n    lat: -23.5505,\n    lng: -46.6333,\n    latencyMs: 44,\n    throughput: '140 Gbps',\n    status: 'degraded',\n  },\n  {\n    id: 'lhr-01',\n    name: 'LHR-Edge-1',\n    code: 'LHR',\n    region: 'Europe',\n    city: 'London',\n    country: 'United Kingdom',\n    role: 'EMEA Backbone Core',\n    lat: 51.5074,\n    lng: -0.1278,\n    latencyMs: 14,\n    throughput: '480 Gbps',\n    status: 'optimal',\n  },\n  {\n    id: 'fra-01',\n    name: 'FRA-Edge-1',\n    code: 'FRA',\n    region: 'Europe',\n    city: 'Frankfurt',\n    country: 'Germany',\n    role: 'DE-CIX Direct Peer',\n    lat: 50.1109,\n    lng: 8.6821,\n    latencyMs: 16,\n    throughput: '410 Gbps',\n    status: 'optimal',\n  },\n  {\n    id: 'ams-01',\n    name: 'AMS-Edge-1',\n    code: 'AMS',\n    region: 'Europe',\n    city: 'Amsterdam',\n    country: 'Netherlands',\n    role: 'AMS-IX Transit Ring',\n    lat: 52.3676,\n    lng: 4.9041,\n    latencyMs: 15,\n    throughput: '390 Gbps',\n    status: 'optimal',\n  },\n  {\n    id: 'nrt-01',\n    name: 'NRT-Edge-1',\n    code: 'NRT',\n    region: 'APAC',\n    city: 'Tokyo',\n    country: 'Japan',\n    role: 'East Asia Gateway',\n    lat: 35.6762,\n    lng: 139.6503,\n    latencyMs: 22,\n    throughput: '360 Gbps',\n    status: 'optimal',\n  },\n  {\n    id: 'sin-01',\n    name: 'SIN-Edge-1',\n    code: 'SIN',\n    region: 'APAC',\n    city: 'Singapore',\n    country: 'Singapore',\n    role: 'South Asia Gateway',\n    lat: 1.3521,\n    lng: 103.8198,\n    latencyMs: 26,\n    throughput: '290 Gbps',\n    status: 'optimal',\n  },\n  {\n    id: 'syd-01',\n    name: 'SYD-Edge-1',\n    code: 'SYD',\n    region: 'APAC',\n    city: 'Sydney',\n    country: 'Australia',\n    role: 'Oceania Anycast POP',\n    lat: -33.8688,\n    lng: 151.2093,\n    latencyMs: 31,\n    throughput: '170 Gbps',\n    status: 'optimal',\n  },\n]\n\ninterface CorridorDefinition {\n  fromNodeId: string\n  toNodeId: string\n  color?: string\n  duration?: number\n  curvature?: number\n  dashed?: boolean\n  label: string\n}\n\nconst CORRIDORS: CorridorDefinition[] = [\n  {\n    fromNodeId: 'sfo-01',\n    toNodeId: 'iad-01',\n    color: 'var(--chart-1)',\n    duration: 2.6,\n    curvature: 0.2,\n    label: 'Trans-US Backbone (SFO ↔ IAD)',\n  },\n  {\n    fromNodeId: 'sfo-01',\n    toNodeId: 'ord-01',\n    color: 'var(--chart-1)',\n    duration: 2.2,\n    curvature: 0.16,\n    dashed: true,\n    label: 'Central Overland (SFO ↔ ORD)',\n  },\n  {\n    fromNodeId: 'ord-01',\n    toNodeId: 'iad-01',\n    color: 'var(--chart-1)',\n    duration: 1.8,\n    curvature: 0.14,\n    label: 'Great Lakes Trunk (ORD ↔ IAD)',\n  },\n  {\n    fromNodeId: 'iad-01',\n    toNodeId: 'lhr-01',\n    color: 'var(--chart-2)',\n    duration: 3.2,\n    curvature: 0.28,\n    label: 'Transatlantic Express (IAD ↔ LHR)',\n  },\n  {\n    fromNodeId: 'lhr-01',\n    toNodeId: 'fra-01',\n    color: 'var(--chart-3)',\n    duration: 1.9,\n    curvature: 0.15,\n    label: 'Channel Link (LHR ↔ FRA)',\n  },\n  {\n    fromNodeId: 'fra-01',\n    toNodeId: 'ams-01',\n    color: 'var(--chart-3)',\n    duration: 1.7,\n    curvature: 0.14,\n    dashed: true,\n    label: 'Rhine Valley Ring (FRA ↔ AMS)',\n  },\n  {\n    fromNodeId: 'lhr-01',\n    toNodeId: 'ams-01',\n    color: 'var(--chart-3)',\n    duration: 1.8,\n    curvature: 0.16,\n    label: 'North Sea Subsea (LHR ↔ AMS)',\n  },\n  {\n    fromNodeId: 'fra-01',\n    toNodeId: 'sin-01',\n    color: 'var(--chart-4)',\n    duration: 3.6,\n    curvature: 0.22,\n    label: 'Eurasia Optical Trunk (FRA ↔ SIN)',\n  },\n  {\n    fromNodeId: 'sin-01',\n    toNodeId: 'nrt-01',\n    color: 'var(--chart-4)',\n    duration: 2.5,\n    curvature: 0.18,\n    label: 'East Asia Marine Cable (SIN ↔ NRT)',\n  },\n  {\n    fromNodeId: 'sin-01',\n    toNodeId: 'syd-01',\n    color: 'var(--chart-5)',\n    duration: 3.0,\n    curvature: 0.22,\n    dashed: true,\n    label: 'Southern Cross Link (SIN ↔ SYD)',\n  },\n  {\n    fromNodeId: 'nrt-01',\n    toNodeId: 'sfo-01',\n    color: 'var(--chart-2)',\n    duration: 3.8,\n    curvature: 0.3,\n    label: 'Pacific High-Speed (NRT ↔ SFO)',\n  },\n  {\n    fromNodeId: 'iad-01',\n    toNodeId: 'gru-01',\n    color: 'var(--chart-5)',\n    duration: 3.4,\n    curvature: 0.24,\n    label: 'Americas Interlink (IAD ↔ GRU)',\n  },\n]\n\nexport function GlobalEdgeNetwork() {\n  const [activeRegion, setActiveRegion] = React.useState<RegionFilter>('All')\n  const [selectedNode, setSelectedNode] = React.useState<EdgeNode | null>(null)\n  const [hoveredNode, setHoveredNode] = React.useState<EdgeNode | null>(null)\n\n  const activeNode = hoveredNode || selectedNode\n\n  const setRegion = (region: RegionFilter) => {\n    setActiveRegion(region)\n    if (selectedNode && region !== 'All' && selectedNode.region !== region) {\n      setSelectedNode(null)\n    }\n  }\n\n  const handlePinClick = (pin: MapPin) => {\n    const node = ALL_NODES.find((n) => n.lat === pin.lat && n.lng === pin.lng)\n    if (node) {\n      setSelectedNode((prev) => (prev?.id === node.id ? null : node))\n    }\n  }\n\n  const handlePinHover = (pin: MapPin | null) => {\n    if (!pin) {\n      setHoveredNode(null)\n    } else {\n      setHoveredNode(ALL_NODES.find((n) => n.lat === pin.lat && n.lng === pin.lng) ?? null)\n    }\n  }\n\n  const filteredNodes = React.useMemo(() => {\n    if (activeRegion === 'All') return ALL_NODES\n    return ALL_NODES.filter((n) => n.region === activeRegion)\n  }, [activeRegion])\n\n  const nodeMap = React.useMemo(() => new Map(ALL_NODES.map((n) => [n.id, n])), [])\n\n  const mapPins = React.useMemo<MapPin[]>(() => {\n    return filteredNodes.map((n) => ({\n      lat: n.lat,\n      lng: n.lng,\n      label: `${n.city} (${n.code})`,\n      color: n.status === 'optimal' ? 'var(--chart-1)' : '#f59e0b',\n      description: n.role,\n      value: `${n.latencyMs}ms • ${n.throughput}`,\n      status: n.status,\n    }))\n  }, [filteredNodes])\n\n  const mapRoutes = React.useMemo<MapRoute[]>(() => {\n    const visibleIds = new Set(filteredNodes.map((n) => n.id))\n    return CORRIDORS.filter((c) => {\n      if (activeRegion === 'All') return true\n      return visibleIds.has(c.fromNodeId) && visibleIds.has(c.toNodeId)\n    })\n      .map((c) => {\n        const fromNode = nodeMap.get(c.fromNodeId)\n        const toNode = nodeMap.get(c.toNodeId)\n        if (!fromNode || !toNode) return null\n        return {\n          from: { lat: fromNode.lat, lng: fromNode.lng },\n          to: { lat: toNode.lat, lng: toNode.lng },\n          color: c.color ?? 'var(--primary)',\n          duration: c.duration ?? 3,\n          curvature: c.curvature ?? 0.2,\n          dashed: c.dashed,\n          label: c.label,\n        }\n      })\n      .filter(Boolean) as MapRoute[]\n  }, [activeRegion, filteredNodes, nodeMap])\n\n  const activeNodesText = React.useMemo(() => {\n    switch (activeRegion) {\n      case 'Americas':\n        return '12 Nodes Active'\n      case 'Europe':\n        return '11 Nodes Active'\n      case 'APAC':\n        return '9 Nodes Active'\n      default:\n        return '32 Nodes Active'\n    }\n  }, [activeRegion])\n\n  const activeAvgLatencyText = React.useMemo(() => {\n    switch (activeRegion) {\n      case 'Americas':\n        return '16ms avg'\n      case 'Europe':\n        return '15ms avg'\n      case 'APAC':\n        return '26ms avg'\n      default:\n        return '18ms avg'\n    }\n  }, [activeRegion])\n\n  const p95Latency = React.useMemo(() => {\n    switch (activeRegion) {\n      case 'Americas':\n        return '19ms'\n      case 'Europe':\n        return '16ms'\n      case 'APAC':\n        return '28ms'\n      default:\n        return '24ms'\n    }\n  }, [activeRegion])\n\n  return (\n    <div\n      data-slot=\"global-edge-network\"\n      className=\"border-border bg-card/60 relative h-[500px] w-full overflow-hidden rounded-xl border shadow-xs backdrop-blur-xs\"\n    >\n      {/* Map Canvas (Hero) */}\n      <DottedMapChart\n        pins={mapPins}\n        routes={mapRoutes}\n        height={500}\n        ariaLabel=\"Global Anycast Edge Network World Map\"\n        className=\"h-full w-full\"\n        onPinClick={handlePinClick}\n        onPinHover={handlePinHover}\n      />\n\n      {/* Top-Left Floating Chip: Title & Status */}\n      <div className=\"pointer-events-none absolute top-3 left-3 z-10 sm:top-4 sm:left-4\">\n        <div className=\"border-border/60 bg-background/80 pointer-events-auto inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium shadow-xs backdrop-blur-md\">\n          <span className=\"text-foreground flex items-center gap-1.5\">\n            <Globe className=\"text-muted-foreground h-3.5 w-3.5\" />\n            <span className=\"tracking-tight\">Global Transit Mesh</span>\n          </span>\n          <span className=\"text-muted-foreground/40\">•</span>\n          <span className=\"text-muted-foreground inline-flex items-center gap-1.5\">\n            <span className=\"bg-success h-1.5 w-1.5 animate-pulse rounded-full\" />\n            <span>{activeNodesText}</span>\n          </span>\n          <span className=\"text-muted-foreground/40 hidden md:inline\">•</span>\n          <span className=\"text-muted-foreground hidden font-mono md:inline\">{activeAvgLatencyText}</span>\n        </div>\n      </div>\n\n      {/* Top-Right Floating Chip: Glass Segmented Region Filter */}\n      <div className=\"pointer-events-none absolute top-3 right-3 z-10 sm:top-4 sm:right-4\">\n        <div className=\"border-border/60 bg-muted/60 pointer-events-auto inline-flex items-center gap-0.5 rounded-lg border p-0.5 text-xs shadow-xs backdrop-blur-md\">\n          {REGIONS.map((region) => (\n            <button\n              key={region}\n              type=\"button\"\n              className={cn(\n                'rounded-md px-2.5 py-1 text-xs font-medium transition-colors duration-150',\n                activeRegion === region\n                  ? 'bg-background text-foreground shadow-xs'\n                  : 'text-muted-foreground hover:text-foreground hover:bg-background/40',\n              )}\n              onClick={() => setRegion(region)}\n            >\n              {region}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* Bottom-Left Floating Chip: Interactive Node Inspector */}\n      <div className=\"pointer-events-none absolute bottom-3 left-3 z-10 sm:bottom-4 sm:left-4\">\n        <div className=\"border-border/60 bg-background/80 pointer-events-auto inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs shadow-xs backdrop-blur-md transition-colors duration-150\">\n          {activeNode ? (\n            <>\n              <span\n                className={cn(\n                  'h-1.5 w-1.5 shrink-0 rounded-full',\n                  activeNode.status === 'optimal' ? 'bg-success' : 'bg-warning',\n                )}\n              />\n              <span className=\"text-foreground font-medium\">\n                {activeNode.city} ({activeNode.code})\n              </span>\n              <span className=\"text-muted-foreground/40\">•</span>\n              <span className=\"text-muted-foreground font-mono\">{activeNode.latencyMs}ms</span>\n              <span className=\"text-muted-foreground/40 hidden sm:inline\">•</span>\n              <span className=\"text-muted-foreground hidden font-mono sm:inline\">{activeNode.throughput}</span>\n              {selectedNode && (\n                <button\n                  type=\"button\"\n                  aria-label=\"Clear selection\"\n                  className=\"text-muted-foreground hover:text-foreground hover:bg-muted -mr-1 ml-0.5 rounded-full p-0.5 transition-colors\"\n                  onClick={() => setSelectedNode(null)}\n                >\n                  <X className=\"h-3 w-3\" />\n                </button>\n              )}\n            </>\n          ) : (\n            <>\n              <span className=\"bg-muted-foreground/40 h-1.5 w-1.5 shrink-0 rounded-full\" />\n              <span className=\"text-muted-foreground\">Click a node to inspect</span>\n            </>\n          )}\n        </div>\n      </div>\n\n      {/* Bottom-Right Floating Chip: Minimal Latency Badge */}\n      <div className=\"pointer-events-none absolute right-3 bottom-3 z-10 sm:right-4 sm:bottom-4\">\n        <div className=\"border-border/60 bg-background/80 pointer-events-auto inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium shadow-xs backdrop-blur-md\">\n          <span className=\"text-muted-foreground\">P95</span>\n          <span className=\"text-foreground font-mono\">{p95Latency}</span>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/GlobalEdgeNetwork.tsx"
    },
    {
      "path": "packages/registry-react/blocks/global-edge-network/index.ts",
      "content": "export * from './GlobalEdgeNetwork'\n",
      "type": "registry:block",
      "target": "~/components/blocks/global-edge-network/index.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/dotted-map-chart.json"
  ],
  "description": "Cloudflare Radar and Vercel Edge style infrastructure console with real-time anycast telemetry, interactive DottedMapChart with Bezier flow corridors, P95 latency HUD metrics, and live edge node routing table.",
  "categories": [
    "dashboard",
    "devops",
    "analytics"
  ]
}