{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "delivery-tracking-map",
  "title": "Delivery Tracking Map",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/delivery-tracking-map/DeliveryTrackingMap.tsx",
      "content": "'use client'\n\nimport { useRef } from 'react'\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\nexport interface DeliveryTrackingMapProps {\n  accessToken?: string\n}\n\nexport function DeliveryTrackingMap({ accessToken }: DeliveryTrackingMapProps) {\n  const mapRef = useRef<MapRef | null>(null)\n\n  const origin: [number, number] = [-122.4194, 37.7749]\n  const destination: [number, number] = [-122.392, 37.7915]\n  const courierPosition: [number, number] = [-122.405, 37.783]\n\n  const 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\n  const focusCourier = () => {\n    mapRef.current?.flyTo({ center: courierPosition, zoom: 14.5 })\n  }\n\n  const focusDestination = () => {\n    mapRef.current?.flyTo({ center: destination, zoom: 15 })\n  }\n\n  return (\n    <div className=\"grid gap-4 lg:grid-cols-[1fr_320px]\">\n      <div className=\"border-border bg-card relative h-[480px] overflow-hidden rounded-xl border\">\n        <Map\n          ref={mapRef}\n          accessToken={accessToken}\n          variant=\"light\"\n          center={courierPosition}\n          zoom={13.5}\n          className=\"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 lngLat={origin} anchor=\"bottom\">\n            <div className=\"flex flex-col items-center\">\n              <span className=\"bg-muted-foreground ring-muted size-3 rounded-full ring-4\" />\n              <span className=\"border-border bg-background/90 mt-1 rounded border px-1.5 py-0.5 font-mono text-xs\">\n                Merchant\n              </span>\n            </div>\n          </MapMarker>\n          {/* Live Courier */}\n          <MapMarker lngLat={courierPosition} anchor=\"center\">\n            <div className=\"relative flex cursor-pointer items-center justify-center\" onClick={focusCourier}>\n              <span className=\"bg-primary/25 absolute size-7 animate-ping rounded-full\" />\n              <div className=\"bg-primary text-primary-foreground ring-background flex size-7 items-center justify-center rounded-full shadow-md ring-2\">\n                🛵\n              </div>\n            </div>\n          </MapMarker>\n          {/* Destination */}\n          <MapMarker lngLat={destination} anchor=\"bottom\">\n            <div className=\"flex cursor-pointer flex-col items-center\" onClick={focusDestination}>\n              <span className=\"bg-success ring-success/20 size-3 rounded-full ring-4\" />\n              <span className=\"border-border bg-background/90 text-success mt-1 rounded border px-1.5 py-0.5 font-mono text-xs font-semibold\">\n                Delivery Dropoff\n              </span>\n            </div>\n          </MapMarker>\n        </Map>\n      </div>\n\n      {/* Telemetry & Order Status */}\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              ORDER #8924\n            </Badge>\n            <Badge className=\"border-success/20 bg-success/10 text-success\">Approaching</Badge>\n          </div>\n          <CardTitle className=\"mt-2 text-lg\">Express Courier</CardTitle>\n          <CardDescription>\n            Estimated delivery in <strong className=\"text-foreground\">8 mins</strong> (0.8 mi away)\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"space-y-4\">\n          <div className=\"border-border space-y-2 border-t pt-3\">\n            <div className=\"flex items-center justify-between text-xs\">\n              <span className=\"text-muted-foreground\">Driver</span>\n              <span className=\"text-foreground font-medium\">Carlos M. (★ 4.98)</span>\n            </div>\n            <div className=\"flex items-center justify-between text-xs\">\n              <span className=\"text-muted-foreground\">Vehicle</span>\n              <span className=\"text-foreground font-mono\">E-Scooter #412</span>\n            </div>\n            <div className=\"flex items-center justify-between text-xs\">\n              <span className=\"text-muted-foreground\">Destination</span>\n              <span className=\"text-foreground max-w-[170px] truncate font-medium\">Market St & 2nd Ave</span>\n            </div>\n          </div>\n\n          <div className=\"border-border space-y-1.5 border-t pt-3 font-mono text-xs\">\n            <div className=\"text-muted-foreground flex items-center gap-2\">\n              <span className=\"bg-success size-1.5 rounded-full\" />\n              <span>12:42 PM — Order picked up</span>\n            </div>\n            <div className=\"text-foreground flex items-center gap-2 font-medium\">\n              <span className=\"bg-primary size-1.5 rounded-full\" />\n              <span>12:51 PM — Approaching building</span>\n            </div>\n          </div>\n\n          <div className=\"flex gap-2 pt-2\">\n            <Button variant=\"outline\" size=\"sm\" className=\"flex-1\" onClick={focusCourier}>\n              Track Courier\n            </Button>\n            <Button variant=\"outline\" size=\"sm\" className=\"flex-1\" onClick={focusDestination}>\n              Dropoff Point\n            </Button>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/DeliveryTrackingMap.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/map.json"
  ],
  "description": "Live order delivery route showing courier location, dropoff destination, and real-time ETA countdown.",
  "categories": [
    "logistics",
    "delivery",
    "map"
  ]
}