{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "flight-radar-map",
  "title": "Flight Radar Map",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/flight-radar-map/FlightRadarMap.vue",
      "content": "<script setup lang=\"ts\">\nimport { nextTick, ref } from 'vue'\nimport { Map, MapMarker, type MapRef } from '@/components/ui/map'\nimport { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\n\ndefineProps<{ accessToken?: string }>()\n\ninterface Flight {\n  id: string\n  callsign: string\n  airline: string\n  origin: string\n  destination: string\n  coords: [number, number]\n  heading: number\n  altitude: number\n  speed: number\n  aircraft: string\n  status: 'Cruising' | 'Ascending' | 'Descending'\n}\n\nconst mapRef = ref<MapRef | null>(null)\n\nconst flights: Flight[] = [\n  {\n    id: 'f-101',\n    callsign: 'UAL482',\n    airline: 'United Airlines',\n    origin: 'SFO',\n    destination: 'ORD',\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    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    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    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 activeFlight = ref<Flight>(flights[0])\n\nasync function selectFlight(f: Flight) {\n  activeFlight.value = f\n  // `:center` is reactive, so Vue re-applies it on the next tick and would\n  // otherwise cancel this flight and strand the camera at the default zoom.\n  await nextTick()\n  mapRef.value?.flyTo({ center: f.coords, zoom: 6.5 })\n}\n</script>\n\n<template>\n  <div class=\"grid gap-4 lg:grid-cols-[1fr_320px]\">\n    <div class=\"border-border bg-card relative h-[480px] overflow-hidden rounded-xl border\">\n      <Map\n        ref=\"mapRef\"\n        :access-token=\"accessToken\"\n        variant=\"dark\"\n        :center=\"activeFlight.coords\"\n        :zoom=\"5.2\"\n        class=\"h-full w-full\"\n      >\n        <MapMarker v-for=\"f in flights\" :key=\"f.id\" :lng-lat=\"f.coords\" anchor=\"center\" @click=\"selectFlight(f)\">\n          <div class=\"group relative flex cursor-pointer flex-col items-center\">\n            <div\n              class=\"text-info flex size-7 items-center justify-center rounded-full font-bold\"\n              :class=\"activeFlight.id === f.id ? 'bg-info/20 ring-2 ring-sky-400' : 'bg-background/80'\"\n              :style=\"{ transform: `rotate(${f.heading}deg)` }\"\n            >\n              ▲\n            </div>\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=\"activeFlight.id === f.id ? 'border-info/50 text-info' : 'text-foreground'\"\n            >\n              {{ f.callsign }}\n            </span>\n          </div>\n        </MapMarker>\n      </Map>\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\">{{ activeFlight.status }}</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              activeFlight.id === 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/FlightRadarMap.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/map.json"
  ],
  "description": "Real-time commercial and cargo aviation radar with aircraft altitudes, ground speeds, callsigns, and flight telemetry.",
  "categories": [
    "logistics",
    "aviation",
    "map"
  ]
}