{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "leaflet-flight-radar-map",
  "title": "Leaflet Flight Radar Map",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/leaflet-flight-radar-map/LeafletFlightRadarMap.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { LeafletMap, LeafletMarker, LeafletPolyline, type LeafletMapRef } from '@/components/ui/leaflet-map'\n\ntype LngLat = [number, number]\n\nexport interface Flight {\n  id: string\n  callsign: string\n  airline: string\n  origin: string\n  destination: string\n  originCoords: LngLat\n  destinationCoords: LngLat\n  coords: LngLat\n  heading: number\n  altitude: number\n  speed: number\n  aircraft: string\n  status: 'Cruising' | 'Ascending' | 'Descending'\n}\n\nexport interface LeafletFlightRadarMapProps extends React.HTMLAttributes<HTMLDivElement> {\n  flights?: Flight[]\n}\n\nconst DEFAULT_FLIGHTS: Flight[] = [\n  {\n    id: 'f-101',\n    callsign: 'UAL482',\n    airline: 'United Airlines',\n    origin: 'SFO',\n    destination: 'ORD',\n    originCoords: [-122.379, 37.6213],\n    destinationCoords: [-87.9073, 41.9742],\n    coords: [-112.0, 39.5],\n    heading: 78,\n    altitude: 34000,\n    speed: 520,\n    aircraft: 'B787-9',\n    status: 'Cruising',\n  },\n  {\n    id: 'f-102',\n    callsign: 'DAL1209',\n    airline: 'Delta Air Lines',\n    origin: 'LAX',\n    destination: 'JFK',\n    originCoords: [-118.4085, 33.9416],\n    destinationCoords: [-73.7781, 40.6413],\n    coords: [-104.5, 36.2],\n    heading: 72,\n    altitude: 38000,\n    speed: 545,\n    aircraft: 'A350-900',\n    status: 'Cruising',\n  },\n  {\n    id: 'f-103',\n    callsign: 'AAL89',\n    airline: 'American Airlines',\n    origin: 'DFW',\n    destination: 'SEA',\n    originCoords: [-97.0403, 32.8998],\n    destinationCoords: [-122.3088, 47.4502],\n    coords: [-107.2, 42.1],\n    heading: 325,\n    altitude: 29000,\n    speed: 480,\n    aircraft: 'B737-MAX8',\n    status: 'Cruising',\n  },\n  {\n    id: 'f-104',\n    callsign: 'FDX14',\n    airline: 'FedEx Express',\n    origin: 'MEM',\n    destination: 'OAK',\n    originCoords: [-89.9767, 35.0424],\n    destinationCoords: [-122.2208, 37.7126],\n    coords: [-115.8, 38.0],\n    heading: 285,\n    altitude: 22000,\n    speed: 440,\n    aircraft: 'B777-F',\n    status: 'Descending',\n  },\n]\n\n/** Quadratic-bezier arc between two [lng, lat] points — a perpendicular lift\n *  on the control point gives the route its radar-style curve. */\nfunction arcPath(from: LngLat, to: LngLat, segments = 32): LngLat[] {\n  const midX = (from[0] + to[0]) / 2\n  const midY = (from[1] + to[1]) / 2\n  const dx = to[0] - from[0]\n  const dy = to[1] - from[1]\n  const ctrlX = midX - dy * 0.12\n  const ctrlY = midY + dx * 0.12\n  const points: LngLat[] = []\n  for (let i = 0; i <= segments; i++) {\n    const t = i / segments\n    const a = (1 - t) * (1 - t)\n    const b = 2 * (1 - t) * t\n    const c = t * t\n    points.push([a * from[0] + b * ctrlX + c * to[0], a * from[1] + b * ctrlY + c * to[1]])\n  }\n  return points\n}\n\nexport function LeafletFlightRadarMap({ className, flights = DEFAULT_FLIGHTS, ...props }: LeafletFlightRadarMapProps) {\n  const [activeId, setActiveId] = React.useState(flights[0]?.id ?? '')\n  const mapRef = React.useRef<LeafletMapRef>(null)\n  const activeFlight = flights.find((f) => f.id === activeId) ?? flights[0]\n\n  const selectFlight = (f: Flight) => {\n    setActiveId(f.id)\n    mapRef.current?.flyTo({ center: f.coords, zoom: 6.5 })\n  }\n\n  return (\n    <div\n      data-slot=\"leaflet-flight-radar-map\"\n      className={cn('grid gap-4 lg:grid-cols-[1fr_320px]', className)}\n      {...props}\n    >\n      <div className=\"border-border bg-card relative h-[480px] overflow-hidden rounded-xl border\">\n        <LeafletMap ref={mapRef} variant=\"dark\" center={[-95.7129, 37.0902]} zoom={4} className=\"h-full w-full\">\n          {/* Planned route arcs (dashed) */}\n          {flights.map((f) => (\n            <LeafletPolyline\n              key={`${f.id}-route`}\n              lngLatPath={arcPath(f.originCoords, f.destinationCoords)}\n              color={activeId === f.id ? '#38bdf8' : '#64748b'}\n              weight={activeId === f.id ? 2 : 1.5}\n              opacity={activeId === f.id ? 0.8 : 0.35}\n              dashArray=\"4 6\"\n            />\n          ))}\n          {/* Flown leg arcs (solid) */}\n          {flights.map((f) => (\n            <LeafletPolyline\n              key={`${f.id}-flown`}\n              lngLatPath={arcPath(f.originCoords, f.coords)}\n              color={activeId === f.id ? '#38bdf8' : '#94a3b8'}\n              weight={2}\n              opacity={activeId === f.id ? 0.9 : 0.45}\n            />\n          ))}\n\n          {flights.map((f) => (\n            <LeafletMarker key={f.id} lngLat={f.coords} anchor=\"center\">\n              <button\n                type=\"button\"\n                className=\"group relative flex cursor-pointer flex-col items-center\"\n                onClick={() => selectFlight(f)}\n              >\n                <span\n                  className={cn(\n                    'text-info flex size-7 items-center justify-center rounded-full',\n                    activeId === f.id ? 'bg-info/20 ring-2 ring-sky-400' : 'bg-background/80',\n                  )}\n                  style={{ transform: `rotate(${f.heading}deg)` }}\n                >\n                  <svg className=\"size-4\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                    <path d=\"M12 1.5c-.8 0-1.5.7-1.5 1.6v5.1l-7.9 5.2v1.9l7.9-2.3v5.1l-2.4 1.7v1.6l3.9-1 3.9 1v-1.6l-2.4-1.7v-5.1l7.9 2.3v-1.9l-7.9-5.2V3.1c0-.9-.7-1.6-1.5-1.6Z\" />\n                  </svg>\n                </span>\n                <span\n                  className={cn(\n                    'border-border bg-card/90 mt-1 rounded border px-1 py-0.5 font-mono text-xs font-semibold tracking-wider whitespace-nowrap shadow-xs',\n                    activeId === f.id ? 'border-info/50 text-info' : 'text-foreground',\n                  )}\n                >\n                  {f.callsign}\n                </span>\n              </button>\n            </LeafletMarker>\n          ))}\n        </LeafletMap>\n      </div>\n\n      {/* Aviation Telemetry Radar Drawer */}\n      <Card className=\"flex flex-col justify-between\">\n        <CardHeader>\n          <div className=\"flex items-center justify-between\">\n            <Badge variant=\"outline\" className=\"font-mono text-xs\">\n              {activeFlight.airline}\n            </Badge>\n            <Badge className=\"border-info/20 bg-info/10 text-info\">{activeFlight.status}</Badge>\n          </div>\n          <CardTitle className=\"mt-2 font-mono text-xl\">{activeFlight.callsign}</CardTitle>\n          <CardDescription className=\"flex items-center gap-2 font-mono text-xs\">\n            <span>{activeFlight.origin}</span>\n            <span>✈ ─── ✈</span>\n            <span>{activeFlight.destination}</span>\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"space-y-4\">\n          <div className=\"border-border bg-muted/50 grid grid-cols-2 gap-2 rounded-lg border p-2.5 font-mono text-xs\">\n            <div>\n              <div className=\"text-muted-foreground text-xs uppercase\">Altitude</div>\n              <div className=\"text-foreground text-sm font-bold\">{activeFlight.altitude.toLocaleString()} ft</div>\n            </div>\n            <div>\n              <div className=\"text-muted-foreground text-xs uppercase\">Ground Speed</div>\n              <div className=\"text-foreground text-sm font-bold\">{activeFlight.speed} kts</div>\n            </div>\n            <div className=\"mt-2\">\n              <div className=\"text-muted-foreground text-xs uppercase\">Heading</div>\n              <div className=\"text-foreground text-sm font-bold\">{activeFlight.heading}°</div>\n            </div>\n            <div className=\"mt-2\">\n              <div className=\"text-muted-foreground text-xs uppercase\">Equipment</div>\n              <div className=\"text-foreground text-sm font-bold\">{activeFlight.aircraft}</div>\n            </div>\n          </div>\n\n          {/* Flight Selector List */}\n          <div className=\"border-border space-y-1 border-t pt-3\">\n            <div className=\"text-muted-foreground mb-1.5 font-mono text-xs tracking-wider uppercase\">\n              Monitored In-Flight\n            </div>\n            {flights.map((f) => (\n              <button\n                key={f.id}\n                type=\"button\"\n                className={cn(\n                  'flex w-full items-center justify-between rounded-md px-2 py-1.5 text-xs transition-colors',\n                  activeId === f.id\n                    ? 'bg-accent text-accent-foreground font-semibold'\n                    : 'hover:bg-muted text-muted-foreground',\n                )}\n                onClick={() => selectFlight(f)}\n              >\n                <span className=\"font-mono\">\n                  {f.callsign} ({f.origin}→{f.destination})\n                </span>\n                <span className=\"font-mono text-xs opacity-75\">{f.altitude / 1000}k ft</span>\n              </button>\n            ))}\n          </div>\n\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"w-full font-mono text-xs\"\n            onClick={() => selectFlight(activeFlight)}\n          >\n            Recenter Camera\n          </Button>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n\nexport default LeafletFlightRadarMap\n",
      "type": "registry:block",
      "target": "~/components/blocks/LeafletFlightRadarMap.tsx"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/leaflet-map.json"
  ],
  "description": "Real-time commercial and cargo aviation radar on free OpenStreetMap/Esri tiles — no API key — with curved flight paths, callsigns, and flight telemetry.",
  "categories": [
    "logistics",
    "aviation",
    "map"
  ]
}