{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "leaflet-flight-radar-map",
  "title": "Leaflet Flight Radar Map",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/leaflet-flight-radar-map/LeafletFlightRadarMap.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { computed, ref } from 'vue'\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 {\n  class?: HTMLAttributes['class']\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\nconst props = defineProps<LeafletFlightRadarMapProps>()\n\nconst flights = computed(() => props.flights ?? DEFAULT_FLIGHTS)\nconst activeId = ref(DEFAULT_FLIGHTS[0]?.id ?? '')\nconst activeFlight = computed(() => flights.value.find((f) => f.id === activeId.value) ?? flights.value[0])\n\nconst mapRef = ref<LeafletMapRef | null>(null)\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\nfunction selectFlight(f: Flight) {\n  activeId.value = f.id\n  mapRef.value?.flyTo({ center: f.coords, zoom: 6.5 })\n}\n</script>\n\n<template>\n  <div data-slot=\"leaflet-flight-radar-map\" :class=\"cn('grid gap-4 lg:grid-cols-[1fr_320px]', props.class)\">\n    <div class=\"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\" class=\"h-full w-full\">\n        <!-- Planned route arcs (dashed) -->\n        <LeafletPolyline\n          v-for=\"f in flights\"\n          :key=\"`${f.id}-route`\"\n          :lng-lat-path=\"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          dash-array=\"4 6\"\n        />\n        <!-- Flown leg arcs (solid) -->\n        <LeafletPolyline\n          v-for=\"f in flights\"\n          :key=\"`${f.id}-flown`\"\n          :lng-lat-path=\"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        <LeafletMarker v-for=\"f in flights\" :key=\"f.id\" :lng-lat=\"f.coords\" anchor=\"center\">\n          <button\n            type=\"button\"\n            class=\"group relative flex cursor-pointer flex-col items-center\"\n            @click.stop=\"selectFlight(f)\"\n          >\n            <span\n              class=\"text-info flex size-7 items-center justify-center rounded-full\"\n              :class=\"activeId === f.id ? 'bg-info/20 ring-2 ring-sky-400' : 'bg-background/80'\"\n              :style=\"{ transform: `rotate(${f.heading}deg)` }\"\n            >\n              <svg class=\"size-4\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  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                />\n              </svg>\n            </span>\n            <span\n              class=\"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              :class=\"activeId === f.id ? 'border-info/50 text-info' : 'text-foreground'\"\n            >\n              {{ f.callsign }}\n            </span>\n          </button>\n        </LeafletMarker>\n      </LeafletMap>\n    </div>\n\n    <!-- Aviation Telemetry Radar Drawer -->\n    <Card class=\"flex flex-col justify-between\">\n      <CardHeader>\n        <div class=\"flex items-center justify-between\">\n          <Badge variant=\"outline\" class=\"font-mono text-xs\">{{ activeFlight.airline }}</Badge>\n          <Badge class=\"border-info/20 bg-info/10 text-info\">\n            {{ activeFlight.status }}\n          </Badge>\n        </div>\n        <CardTitle class=\"mt-2 font-mono text-xl\">{{ activeFlight.callsign }}</CardTitle>\n        <CardDescription class=\"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 class=\"space-y-4\">\n        <div class=\"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 class=\"text-muted-foreground text-xs uppercase\">Altitude</div>\n            <div class=\"text-foreground text-sm font-bold\">{{ activeFlight.altitude.toLocaleString() }} ft</div>\n          </div>\n          <div>\n            <div class=\"text-muted-foreground text-xs uppercase\">Ground Speed</div>\n            <div class=\"text-foreground text-sm font-bold\">{{ activeFlight.speed }} kts</div>\n          </div>\n          <div class=\"mt-2\">\n            <div class=\"text-muted-foreground text-xs uppercase\">Heading</div>\n            <div class=\"text-foreground text-sm font-bold\">{{ activeFlight.heading }}°</div>\n          </div>\n          <div class=\"mt-2\">\n            <div class=\"text-muted-foreground text-xs uppercase\">Equipment</div>\n            <div class=\"text-foreground text-sm font-bold\">{{ activeFlight.aircraft }}</div>\n          </div>\n        </div>\n\n        <!-- Flight Selector List -->\n        <div class=\"border-border space-y-1 border-t pt-3\">\n          <div class=\"text-muted-foreground mb-1.5 font-mono text-xs tracking-wider uppercase\">Monitored In-Flight</div>\n          <button\n            v-for=\"f in flights\"\n            :key=\"f.id\"\n            type=\"button\"\n            class=\"flex w-full items-center justify-between rounded-md px-2 py-1.5 text-xs transition-colors\"\n            :class=\"\n              activeId === f.id\n                ? 'bg-accent text-accent-foreground font-semibold'\n                : 'hover:bg-muted text-muted-foreground'\n            \"\n            @click=\"selectFlight(f)\"\n          >\n            <span class=\"font-mono\">{{ f.callsign }} ({{ f.origin }}→{{ f.destination }})</span>\n            <span class=\"font-mono text-xs opacity-75\">{{ f.altitude / 1000 }}k ft</span>\n          </button>\n        </div>\n\n        <Button variant=\"outline\" size=\"sm\" class=\"w-full font-mono text-xs\" @click=\"selectFlight(activeFlight)\">\n          Recenter Camera\n        </Button>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/LeafletFlightRadarMap.vue"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/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"
  ]
}