{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "threat-map-radar",
  "title": "Threat Map Radar",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/threat-map-radar/ThreatMapRadar.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Map } from '@/components/ui/map'\n\nexport type AttackVectorType = 'volumetric' | 'l7' | 'botnet'\nexport type MitigationAction = 'DROP' | 'CHALLENGE' | 'RATE_LIMIT'\n\nexport interface ThreatOrigin {\n  id: string\n  country: string\n  countryCode: string\n  volume: string\n  vectorType: AttackVectorType\n  mitigation: MitigationAction\n  coords: { x: number; y: number }\n  targetEdgeId: string\n}\n\nexport interface EdgePoP {\n  id: string\n  code: string\n  city: string\n  coords: { x: number; y: number }\n}\n\nexport interface AttackArc {\n  id: string\n  originId: string\n  edgeId: string\n  sourceCoords: { x: number; y: number }\n  targetCoords: { x: number; y: number }\n  controlOffset: number\n  vectorType: AttackVectorType\n  gradientId: string\n}\n\nexport interface ThreatMapRadarProps extends React.HTMLAttributes<HTMLDivElement> {\n  origins?: ThreatOrigin[]\n}\n\nconst defaultOrigins: ThreatOrigin[] = [\n  {\n    id: 'origin-1',\n    country: 'China',\n    countryCode: 'CN',\n    volume: '642.5K/s',\n    vectorType: 'l7',\n    mitigation: 'DROP',\n    coords: { x: 785, y: 185 },\n    targetEdgeId: 'edge-nrt',\n  },\n  {\n    id: 'origin-2',\n    country: 'Russia',\n    countryCode: 'RU',\n    volume: '418.2K/s',\n    vectorType: 'l7',\n    mitigation: 'CHALLENGE',\n    coords: { x: 595, y: 135 },\n    targetEdgeId: 'edge-fra',\n  },\n  {\n    id: 'origin-3',\n    country: 'Brazil',\n    countryCode: 'BR',\n    volume: '285.4K/s',\n    vectorType: 'botnet',\n    mitigation: 'RATE_LIMIT',\n    coords: { x: 310, y: 340 },\n    targetEdgeId: 'edge-iad',\n  },\n  {\n    id: 'origin-4',\n    country: 'Vietnam',\n    countryCode: 'VN',\n    volume: '194.0K/s',\n    vectorType: 'volumetric',\n    mitigation: 'DROP',\n    coords: { x: 725, y: 275 },\n    targetEdgeId: 'edge-sin',\n  },\n]\n\nconst edgeNodes: EdgePoP[] = [\n  { id: 'edge-iad', code: 'IAD', city: 'Ashburn', coords: { x: 270, y: 185 } },\n  { id: 'edge-fra', code: 'FRA', city: 'Frankfurt', coords: { x: 515, y: 145 } },\n  { id: 'edge-nrt', code: 'NRT', city: 'Tokyo', coords: { x: 840, y: 185 } },\n  { id: 'edge-sin', code: 'SIN', city: 'Singapore', coords: { x: 755, y: 310 } },\n  { id: 'edge-gru', code: 'GRU', city: 'São Paulo', coords: { x: 345, y: 385 } },\n]\n\nconst attackArcs: AttackArc[] = [\n  {\n    id: 'arc-1',\n    originId: 'origin-1',\n    edgeId: 'edge-nrt',\n    sourceCoords: { x: 785, y: 185 },\n    targetCoords: { x: 840, y: 185 },\n    controlOffset: -40,\n    vectorType: 'l7',\n    gradientId: 'attack-gradient-amber',\n  },\n  {\n    id: 'arc-2',\n    originId: 'origin-1',\n    edgeId: 'edge-iad',\n    sourceCoords: { x: 785, y: 185 },\n    targetCoords: { x: 270, y: 185 },\n    controlOffset: -160,\n    vectorType: 'l7',\n    gradientId: 'attack-gradient-amber',\n  },\n  {\n    id: 'arc-3',\n    originId: 'origin-2',\n    edgeId: 'edge-fra',\n    sourceCoords: { x: 595, y: 135 },\n    targetCoords: { x: 515, y: 145 },\n    controlOffset: -35,\n    vectorType: 'l7',\n    gradientId: 'attack-gradient-amber',\n  },\n  {\n    id: 'arc-4',\n    originId: 'origin-3',\n    edgeId: 'edge-iad',\n    sourceCoords: { x: 310, y: 340 },\n    targetCoords: { x: 270, y: 185 },\n    controlOffset: -45,\n    vectorType: 'botnet',\n    gradientId: 'attack-gradient-info',\n  },\n  {\n    id: 'arc-5',\n    originId: 'origin-4',\n    edgeId: 'edge-sin',\n    sourceCoords: { x: 725, y: 275 },\n    targetCoords: { x: 755, y: 310 },\n    controlOffset: 30,\n    vectorType: 'volumetric',\n    gradientId: 'attack-gradient-rose',\n  },\n]\n\nfunction computeCurvePath(arc: AttackArc) {\n  const { sourceCoords, targetCoords, controlOffset } = arc\n  const midX = (sourceCoords.x + targetCoords.x) / 2\n  const midY = (sourceCoords.y + targetCoords.y) / 2 + controlOffset\n  return `M ${sourceCoords.x} ${sourceCoords.y} Q ${midX} ${midY} ${targetCoords.x} ${targetCoords.y}`\n}\n\nfunction originColor(type: AttackVectorType) {\n  if (type === 'volumetric') return '#f43f5e'\n  if (type === 'l7') return '#f59e0b'\n  return '#0ea5e9'\n}\n\nfunction mitigationVariant(action: MitigationAction) {\n  if (action === 'DROP') return 'destructive' as const\n  if (action === 'CHALLENGE') return 'warning' as const\n  return 'info' as const\n}\n\nexport function ThreatMapRadar({ className, origins = defaultOrigins, ...props }: ThreatMapRadarProps) {\n  const [selectedId, setSelectedId] = React.useState<string | null>(null)\n  const filteredArcs = selectedId ? attackArcs.filter((arc) => arc.originId === selectedId) : attackArcs\n\n  const selectOrigin = (id: string) => {\n    setSelectedId((current) => (current === id ? null : id))\n  }\n\n  return (\n    <div data-slot=\"threat-map-radar\" className={cn('flex h-full min-h-0 flex-col gap-4', className)} {...props}>\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <h2 className=\"text-foreground text-lg font-semibold tracking-tight\">Threat Radar</h2>\n          <Badge variant=\"outline\" className=\"border-success/30 bg-success/10 text-success text-xs font-medium\">\n            Live\n          </Badge>\n        </div>\n        <p className=\"text-muted-foreground text-xs\">\n          {origins.length} origins · {edgeNodes.length} edge PoPs\n        </p>\n      </div>\n\n      <div className=\"grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-12\">\n        <Card className=\"border-border flex min-h-0 flex-col overflow-hidden shadow-xs lg:col-span-8\">\n          <div className=\"relative min-h-[360px] flex-1 overflow-hidden bg-zinc-950\">\n            <Map\n              variant=\"dark\"\n              center={[0, 18]}\n              zoom={1.05}\n              navigation={false}\n              className=\"pointer-events-none absolute inset-0 size-full\"\n            />\n            <svg\n              className=\"pointer-events-none absolute inset-0 size-full\"\n              viewBox=\"0 0 1000 500\"\n              fill=\"none\"\n              preserveAspectRatio=\"xMidYMid slice\"\n            >\n              <defs>\n                <linearGradient id=\"attack-gradient-rose\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n                  <stop offset=\"0%\" stopColor=\"#f43f5e\" stopOpacity=\"0.95\" />\n                  <stop offset=\"100%\" stopColor=\"#10b981\" stopOpacity=\"0.35\" />\n                </linearGradient>\n                <linearGradient id=\"attack-gradient-amber\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n                  <stop offset=\"0%\" stopColor=\"#f59e0b\" stopOpacity=\"0.95\" />\n                  <stop offset=\"100%\" stopColor=\"#38bdf8\" stopOpacity=\"0.35\" />\n                </linearGradient>\n                <linearGradient id=\"attack-gradient-info\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n                  <stop offset=\"0%\" stopColor=\"#0ea5e9\" stopOpacity=\"0.95\" />\n                  <stop offset=\"100%\" stopColor=\"#38bdf8\" stopOpacity=\"0.35\" />\n                </linearGradient>\n              </defs>\n\n              {filteredArcs.map((arc) => (\n                <g key={arc.id}>\n                  <path\n                    d={computeCurvePath(arc)}\n                    fill=\"none\"\n                    stroke={`url(#${arc.gradientId})`}\n                    strokeWidth=\"2\"\n                    strokeDasharray=\"6 4\"\n                    strokeLinecap=\"round\"\n                  >\n                    <animate attributeName=\"stroke-dashoffset\" from=\"100\" to=\"0\" dur=\"2.5s\" repeatCount=\"indefinite\" />\n                  </path>\n                  <circle r=\"3\" fill=\"#ffffff\">\n                    <animateMotion path={computeCurvePath(arc)} dur=\"2.8s\" repeatCount=\"indefinite\" />\n                  </circle>\n                </g>\n              ))}\n\n              {edgeNodes.map((edge) => (\n                <g key={edge.id} transform={`translate(${edge.coords.x}, ${edge.coords.y})`}>\n                  <polygon points=\"0,-5 5,0 0,5 -5,0\" fill=\"#10b981\" stroke=\"#ffffff\" strokeWidth=\"1.25\" />\n                  <text\n                    y=\"16\"\n                    textAnchor=\"middle\"\n                    fill=\"rgba(255,255,255,0.85)\"\n                    fontSize=\"11\"\n                    fontFamily=\"ui-monospace, monospace\"\n                    fontWeight=\"700\"\n                  >\n                    {edge.code}\n                  </text>\n                </g>\n              ))}\n\n              {origins.map((origin) => (\n                <g\n                  key={origin.id}\n                  transform={`translate(${origin.coords.x}, ${origin.coords.y})`}\n                  className=\"pointer-events-auto cursor-pointer\"\n                  role=\"button\"\n                  tabIndex={0}\n                  aria-label={origin.country}\n                  onClick={() => selectOrigin(origin.id)}\n                  onKeyDown={(event) => {\n                    if (event.key === 'Enter') selectOrigin(origin.id)\n                  }}\n                >\n                  <circle r=\"6\" fill={originColor(origin.vectorType)} stroke=\"#ffffff\" strokeWidth=\"1.5\" />\n                  <text\n                    y=\"-10\"\n                    textAnchor=\"middle\"\n                    fill=\"#ffffff\"\n                    fontSize=\"11\"\n                    fontFamily=\"ui-monospace, monospace\"\n                    fontWeight=\"700\"\n                  >\n                    {origin.countryCode}\n                  </text>\n                </g>\n              ))}\n            </svg>\n          </div>\n        </Card>\n\n        <Card className=\"border-border flex min-h-0 flex-col overflow-hidden shadow-xs lg:col-span-4\">\n          <CardHeader className=\"border-border border-b p-4\">\n            <CardTitle className=\"text-sm font-semibold\">Origins</CardTitle>\n          </CardHeader>\n          <CardContent className=\"divide-border min-h-0 flex-1 divide-y overflow-auto p-0\">\n            {origins.map((origin) => (\n              <button\n                key={origin.id}\n                type=\"button\"\n                className={cn(\n                  'hover:bg-accent/50 flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition-colors',\n                  selectedId === origin.id && 'bg-accent/60',\n                )}\n                onClick={() => selectOrigin(origin.id)}\n              >\n                <div className=\"min-w-0\">\n                  <p className=\"text-foreground truncate text-sm font-medium\">\n                    {origin.countryCode} · {origin.country}\n                  </p>\n                  <p className=\"text-muted-foreground font-mono text-xs tabular-nums\">{origin.volume}</p>\n                </div>\n                <Badge variant={mitigationVariant(origin.mitigation)} className=\"shrink-0 text-xs uppercase\">\n                  {origin.mitigation.replace('_', ' ')}\n                </Badge>\n              </button>\n            ))}\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  )\n}\n\nexport default ThreatMapRadar\n",
      "type": "registry:block",
      "target": "~/components/blocks/ThreatMapRadar.tsx"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/map.json"
  ],
  "description": "Live threat radar over a Mapbox world map. Attack arcs hit edge PoPs; click an origin to isolate its vector.",
  "categories": [
    "security",
    "dashboard",
    "devops"
  ]
}