{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "delivery-tracking-map",
  "title": "Delivery Tracking Map",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/delivery-tracking-map/DeliveryTrackingMap.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Map, MapMarker, MapSource, MapLayer, 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\nconst mapRef = ref<MapRef | null>(null)\n\nconst origin = [-122.4194, 37.7749] as [number, number]\nconst destination = [-122.392, 37.7915] as [number, number]\nconst courierPosition = ref<[number, number]>([-122.405, 37.783])\n\nconst routeCoords = [\n  [-122.4194, 37.7749],\n  [-122.414, 37.778],\n  [-122.405, 37.783],\n  [-122.399, 37.787],\n  [-122.392, 37.7915],\n]\n\nfunction focusCourier() {\n  mapRef.value?.flyTo({ center: courierPosition.value, zoom: 14.5 })\n}\n\nfunction focusDestination() {\n  mapRef.value?.flyTo({ center: destination, zoom: 15 })\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=\"light\"\n        :center=\"courierPosition\"\n        :zoom=\"13.5\"\n        class=\"h-full w-full\"\n      >\n        <MapSource\n          id=\"delivery-route\"\n          :options=\"{\n            type: 'geojson',\n            data: {\n              type: 'Feature',\n              properties: {},\n              geometry: { type: 'LineString', coordinates: routeCoords },\n            },\n          }\"\n        />\n        <MapLayer\n          id=\"delivery-route-line\"\n          :options=\"{\n            type: 'line',\n            source: 'delivery-route',\n            layout: { 'line-cap': 'round', 'line-join': 'round' },\n            paint: { 'line-color': '#2563eb', 'line-width': 4 },\n          }\"\n        />\n        <!-- Restaurant / Merchant -->\n        <MapMarker :lng-lat=\"origin\" anchor=\"bottom\">\n          <div class=\"flex flex-col items-center\">\n            <span class=\"bg-muted-foreground ring-muted size-3 rounded-full ring-4\" />\n            <span class=\"border-border bg-background/90 mt-1 rounded border px-1.5 py-0.5 font-mono text-xs\"\n              >Merchant</span\n            >\n          </div>\n        </MapMarker>\n        <!-- Live Courier -->\n        <MapMarker :lng-lat=\"courierPosition\" anchor=\"center\">\n          <div class=\"relative flex cursor-pointer items-center justify-center\" @click=\"focusCourier\">\n            <span class=\"bg-primary/25 absolute size-7 animate-ping rounded-full\" />\n            <div\n              class=\"bg-primary text-primary-foreground ring-background flex size-7 items-center justify-center rounded-full shadow-md ring-2\"\n            >\n              🛵\n            </div>\n          </div>\n        </MapMarker>\n        <!-- Destination -->\n        <MapMarker :lng-lat=\"destination\" anchor=\"bottom\">\n          <div class=\"flex cursor-pointer flex-col items-center\" @click=\"focusDestination\">\n            <span class=\"bg-success ring-success/20 size-3 rounded-full ring-4\" />\n            <span\n              class=\"border-border bg-background/90 text-success mt-1 rounded border px-1.5 py-0.5 font-mono text-xs font-semibold\"\n            >\n              Delivery Dropoff\n            </span>\n          </div>\n        </MapMarker>\n      </Map>\n    </div>\n\n    <!-- Telemetry & Order Status -->\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\">ORDER #8924</Badge>\n          <Badge class=\"border-success/20 bg-success/10 text-success\">Approaching</Badge>\n        </div>\n        <CardTitle class=\"mt-2 text-lg\">Express Courier</CardTitle>\n        <CardDescription\n          >Estimated delivery in <strong class=\"text-foreground\">8 mins</strong> (0.8 mi away)</CardDescription\n        >\n      </CardHeader>\n      <CardContent class=\"space-y-4\">\n        <div class=\"border-border space-y-2 border-t pt-3\">\n          <div class=\"flex items-center justify-between text-xs\">\n            <span class=\"text-muted-foreground\">Driver</span>\n            <span class=\"text-foreground font-medium\">Carlos M. (★ 4.98)</span>\n          </div>\n          <div class=\"flex items-center justify-between text-xs\">\n            <span class=\"text-muted-foreground\">Vehicle</span>\n            <span class=\"text-foreground font-mono\">E-Scooter #412</span>\n          </div>\n          <div class=\"flex items-center justify-between text-xs\">\n            <span class=\"text-muted-foreground\">Destination</span>\n            <span class=\"text-foreground max-w-[170px] truncate font-medium\">Market St & 2nd Ave</span>\n          </div>\n        </div>\n\n        <div class=\"border-border space-y-1.5 border-t pt-3 font-mono text-xs\">\n          <div class=\"text-muted-foreground flex items-center gap-2\">\n            <span class=\"bg-success size-1.5 rounded-full\"></span>\n            <span>12:42 PM — Order picked up</span>\n          </div>\n          <div class=\"text-foreground flex items-center gap-2 font-medium\">\n            <span class=\"bg-primary size-1.5 rounded-full\" />\n            <span>12:51 PM — Approaching building</span>\n          </div>\n        </div>\n\n        <div class=\"flex gap-2 pt-2\">\n          <Button variant=\"outline\" size=\"sm\" class=\"flex-1\" @click=\"focusCourier\">Track Courier</Button>\n          <Button variant=\"outline\" size=\"sm\" class=\"flex-1\" @click=\"focusDestination\">Dropoff Point</Button>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/DeliveryTrackingMap.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": "Live order delivery route showing courier location, dropoff destination, and real-time ETA countdown.",
  "categories": [
    "logistics",
    "delivery",
    "map"
  ]
}