{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "leaflet-threat-map-radar",
  "title": "Leaflet Threat Map Radar",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/leaflet-threat-map-radar/LeafletThreatMapRadar.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 { LeafletMap, LeafletMarker, LeafletPolyline } from '@/components/ui/leaflet-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  /** [lng, lat] */\n  lngLat: [number, number]\n  targetEdgeId: string\n}\n\nexport interface EdgePoP {\n  id: string\n  code: string\n  city: string\n  /** [lng, lat] */\n  lngLat: [number, number]\n}\n\nexport interface AttackArc {\n  id: string\n  originId: string\n  edgeId: string\n  /** Sampled arc path as [lng, lat][]. */\n  path: [number, number][]\n  vectorType: AttackVectorType\n}\n\nexport interface LeafletThreatMapRadarProps 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    lngLat: [104.2, 35.9],\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    lngLat: [37.6, 55.7],\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    lngLat: [-51.9, -14.2],\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    lngLat: [105.8, 21.0],\n    targetEdgeId: 'edge-sin',\n  },\n]\n\nconst edgeNodes: EdgePoP[] = [\n  { id: 'edge-iad', code: 'IAD', city: 'Ashburn', lngLat: [-77.45, 39.04] },\n  { id: 'edge-fra', code: 'FRA', city: 'Frankfurt', lngLat: [8.68, 50.11] },\n  { id: 'edge-nrt', code: 'NRT', city: 'Tokyo', lngLat: [139.69, 35.69] },\n  { id: 'edge-sin', code: 'SIN', city: 'Singapore', lngLat: [103.85, 1.29] },\n  { id: 'edge-gru', code: 'GRU', city: 'São Paulo', lngLat: [-46.63, -23.55] },\n]\n\n// Curved attack arc: sample a quadratic bezier whose control point bows\n// perpendicular to the route (biased northward) for a great-circle feel.\nfunction arcPath(from: [number, number], to: [number, number], bend = 0.22): [number, number][] {\n  const dx = to[0] - from[0]\n  const dy = to[1] - from[1]\n  const dist = Math.hypot(dx, dy) || 1\n  let nx = -dy / dist\n  let ny = dx / dist\n  if (ny < 0) {\n    nx = -nx\n    ny = -ny\n  }\n  const cx = (from[0] + to[0]) / 2 + nx * dist * bend\n  const cy = (from[1] + to[1]) / 2 + ny * dist * bend\n  const points: [number, number][] = []\n  const steps = 32\n  for (let i = 0; i <= steps; i++) {\n    const t = i / steps\n    const u = 1 - t\n    points.push([u * u * from[0] + 2 * u * t * cx + t * t * to[0], u * u * from[1] + 2 * u * t * cy + t * t * to[1]])\n  }\n  return points\n}\n\nconst attackArcs: AttackArc[] = [\n  {\n    id: 'arc-1',\n    originId: 'origin-1',\n    edgeId: 'edge-nrt',\n    vectorType: 'l7',\n    path: arcPath([104.2, 35.9], [139.69, 35.69], 0.3),\n  },\n  {\n    id: 'arc-2',\n    originId: 'origin-1',\n    edgeId: 'edge-iad',\n    vectorType: 'l7',\n    path: arcPath([104.2, 35.9], [-77.45, 39.04], 0.22),\n  },\n  {\n    id: 'arc-3',\n    originId: 'origin-2',\n    edgeId: 'edge-fra',\n    vectorType: 'l7',\n    path: arcPath([37.6, 55.7], [8.68, 50.11], 0.35),\n  },\n  {\n    id: 'arc-4',\n    originId: 'origin-3',\n    edgeId: 'edge-iad',\n    vectorType: 'botnet',\n    path: arcPath([-51.9, -14.2], [-77.45, 39.04], 0.25),\n  },\n  {\n    id: 'arc-5',\n    originId: 'origin-4',\n    edgeId: 'edge-sin',\n    vectorType: 'volumetric',\n    path: arcPath([105.8, 21.0], [103.85, 1.29], 0.35),\n  },\n]\n\n// `hex` feeds Leaflet path options; `dot`/`ping` feed the div-icon markers.\nconst VECTOR_STYLES: Record<AttackVectorType, { hex: string; dot: string; ping: string }> = {\n  volumetric: { hex: '#f43f5e', dot: 'bg-destructive', ping: 'bg-destructive' },\n  l7: { hex: '#f59e0b', dot: 'bg-warning', ping: 'bg-warning' },\n  botnet: { hex: '#0ea5e9', dot: 'bg-info', ping: 'bg-info' },\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 LeafletThreatMapRadar({ className, origins = defaultOrigins, ...props }: LeafletThreatMapRadarProps) {\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\n      data-slot=\"leaflet-threat-map-radar\"\n      className={cn('flex h-full min-h-0 flex-col gap-4', className)}\n      {...props}\n    >\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            <LeafletMap\n              variant=\"dark\"\n              center={[10, 30]}\n              zoom={2}\n              minZoom={2}\n              navigation={false}\n              scrollWheelZoom={false}\n              className=\"pointer-events-none absolute inset-0 size-full\"\n            >\n              {/* Radar sweep: a rotating conic-gradient wedge layered over the\n                  tiles, plus two static range rings. */}\n              <div className=\"pointer-events-none absolute inset-0 z-[500] flex items-center justify-center\">\n                <div className=\"border-success/15 absolute size-[340px] rounded-full border\" />\n                <div className=\"border-success/15 absolute size-[220px] rounded-full border\" />\n                <div className=\"size-[340px] animate-[spin_9s_linear_infinite] rounded-full bg-[conic-gradient(from_0deg,rgba(16,185,129,0.35),transparent_75deg)]\" />\n              </div>\n\n              {/* Attack arcs */}\n              {filteredArcs.map((arc) => (\n                <LeafletPolyline\n                  key={arc.id}\n                  lngLatPath={arc.path}\n                  color={VECTOR_STYLES[arc.vectorType].hex}\n                  weight={2}\n                  dashArray=\"6 4\"\n                  lineCap=\"round\"\n                  opacity={0.9}\n                />\n              ))}\n\n              {/* Edge PoPs */}\n              {edgeNodes.map((edge) => (\n                <LeafletMarker key={edge.id} lngLat={edge.lngLat} anchor=\"center\">\n                  <div className=\"flex flex-col items-center gap-1\">\n                    <span className=\"bg-success block size-2.5 rotate-45 border border-white/70 shadow-xs\" />\n                    <span className=\"text-success font-mono text-xs font-bold\">{edge.code}</span>\n                  </div>\n                </LeafletMarker>\n              ))}\n\n              {/* Origins */}\n              {origins.map((origin) => (\n                <LeafletMarker key={origin.id} lngLat={origin.lngLat} anchor=\"center\">\n                  <button\n                    type=\"button\"\n                    className=\"pointer-events-auto relative flex flex-col items-center gap-1\"\n                    aria-label={origin.country}\n                    onClick={() => selectOrigin(origin.id)}\n                  >\n                    <span className=\"font-mono text-xs font-bold text-white\">{origin.countryCode}</span>\n                    <span className=\"relative flex size-3 items-center justify-center\">\n                      <span\n                        className={cn(\n                          'absolute size-3 animate-ping rounded-full opacity-70',\n                          VECTOR_STYLES[origin.vectorType].ping,\n                        )}\n                      />\n                      <span\n                        className={cn(\n                          'relative size-3 rounded-full border-2 border-white/80',\n                          VECTOR_STYLES[origin.vectorType].dot,\n                        )}\n                      />\n                    </span>\n                  </button>\n                </LeafletMarker>\n              ))}\n            </LeafletMap>\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 LeafletThreatMapRadar\n",
      "type": "registry:block",
      "target": "~/components/blocks/LeafletThreatMapRadar.tsx"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/leaflet-map.json"
  ],
  "description": "Live threat radar on free OpenStreetMap/Esri dark tiles — no API key. Attack arcs hit edge PoPs under a rotating sweep; click an origin to isolate its vector.",
  "categories": [
    "security",
    "dashboard",
    "devops"
  ]
}