{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fleet-vehicle-map",
  "title": "Fleet Vehicle Map",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/fleet-vehicle-map/FleetVehicleMap.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Map, MapMarker } from '@/components/ui/map'\n\nexport type VehicleStatus = 'moving' | 'idling' | 'parked'\n\nexport interface FleetVehicle {\n  id: string\n  identifier: string\n  model: string\n  driver: string\n  status: VehicleStatus\n  speed: number\n  lat: number\n  lng: number\n}\n\nexport interface FleetVehicleMapProps extends React.HTMLAttributes<HTMLDivElement> {\n  accessToken?: string\n  vehicles?: FleetVehicle[]\n}\n\nconst DEFAULT_VEHICLES: FleetVehicle[] = [\n  {\n    id: 'v-104',\n    identifier: 'Truck #104',\n    model: 'Volvo VNL 860',\n    driver: 'Marcus Vance',\n    status: 'moving',\n    speed: 64,\n    lat: 41.5868,\n    lng: -93.625,\n  },\n  {\n    id: 'v-208',\n    identifier: 'Van #208',\n    model: 'Ford E-Transit 350',\n    driver: 'Elena Rostova',\n    status: 'moving',\n    speed: 48,\n    lat: 41.6005,\n    lng: -93.712,\n  },\n  {\n    id: 'v-109',\n    identifier: 'Truck #109',\n    model: 'Freightliner Cascadia',\n    driver: 'Derrick Hayes',\n    status: 'idling',\n    speed: 0,\n    lat: 41.984,\n    lng: -93.582,\n  },\n  {\n    id: 'v-212',\n    identifier: 'Van #212',\n    model: 'Mercedes Sprinter',\n    driver: 'Aaliyah Patel',\n    status: 'moving',\n    speed: 52,\n    lat: 41.591,\n    lng: -93.604,\n  },\n]\n\nfunction statusVariant(status: VehicleStatus) {\n  if (status === 'moving') return 'info' as const\n  if (status === 'idling') return 'warning' as const\n  return 'secondary' as const\n}\n\nexport function FleetVehicleMap({\n  className,\n  accessToken = '',\n  vehicles = DEFAULT_VEHICLES,\n  ...props\n}: FleetVehicleMapProps) {\n  const [selectedId, setSelectedId] = React.useState(vehicles[0]?.id ?? '')\n  const mapRef = React.useRef<any>(null)\n  const selected = vehicles.find((v) => v.id === selectedId) ?? vehicles[0]\n\n  const selectVehicle = (vehicle: FleetVehicle) => {\n    setSelectedId(vehicle.id)\n    mapRef.current?.flyTo?.({\n      center: [vehicle.lng, vehicle.lat],\n      zoom: 12,\n      essential: true,\n      duration: 800,\n    })\n  }\n\n  return (\n    <div data-slot=\"fleet-vehicle-map\" className={cn('flex h-full min-h-0 flex-col gap-4', className)} {...props}>\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <h2 className=\"text-foreground text-lg font-semibold tracking-tight\">Fleet</h2>\n        <p className=\"text-muted-foreground text-xs\">{vehicles.length} units</p>\n      </div>\n\n      <div className=\"grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-12\">\n        <Card className=\"border-border flex min-h-0 flex-col overflow-hidden shadow-xs lg:col-span-8\">\n          <div className=\"relative min-h-[360px] flex-1 overflow-hidden\">\n            <Map\n              accessToken={accessToken}\n              variant=\"dark\"\n              center={selected ? [selected.lng, selected.lat] : [-93.625, 41.59]}\n              zoom={11}\n              className=\"absolute inset-0 size-full\"\n              onCreated={(map) => {\n                mapRef.current = map\n              }}\n            >\n              {vehicles.map((vehicle) => (\n                <MapMarker key={vehicle.id} longitude={vehicle.lng} latitude={vehicle.lat} anchor=\"center\">\n                  <button\n                    type=\"button\"\n                    className={\n                      selectedId === vehicle.id\n                        ? 'border-primary bg-primary text-primary-foreground rounded-full border px-2 py-0.5 font-mono text-xs font-semibold shadow-xs'\n                        : 'border-border bg-card text-foreground rounded-full border px-2 py-0.5 font-mono text-xs font-semibold shadow-xs'\n                    }\n                    onClick={() => selectVehicle(vehicle)}\n                  >\n                    {vehicle.identifier.replace('Truck ', '').replace('Van ', '')}\n                  </button>\n                </MapMarker>\n              ))}\n            </Map>\n          </div>\n        </Card>\n\n        <Card className=\"border-border flex min-h-0 flex-col overflow-hidden shadow-xs lg:col-span-4\">\n          <CardHeader className=\"border-border border-b p-4\">\n            <CardTitle className=\"text-sm font-semibold\">Vehicles</CardTitle>\n          </CardHeader>\n          <CardContent className=\"divide-border min-h-0 flex-1 divide-y overflow-auto p-0\">\n            {vehicles.map((vehicle) => (\n              <button\n                key={vehicle.id}\n                type=\"button\"\n                className={cn(\n                  'hover:bg-accent/50 flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition-colors',\n                  selectedId === vehicle.id && 'bg-accent/60',\n                )}\n                onClick={() => selectVehicle(vehicle)}\n              >\n                <div className=\"min-w-0\">\n                  <p className=\"text-foreground truncate text-sm font-medium\">{vehicle.identifier}</p>\n                  <p className=\"text-muted-foreground truncate text-xs\">\n                    {vehicle.driver} · {vehicle.model}\n                  </p>\n                </div>\n                <Badge variant={statusVariant(vehicle.status)} className=\"shrink-0 text-xs capitalize\">\n                  {vehicle.status === 'moving' ? `${vehicle.speed} mph` : vehicle.status}\n                </Badge>\n              </button>\n            ))}\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  )\n}\n\nexport default FleetVehicleMap\n",
      "type": "registry:block",
      "target": "~/components/blocks/FleetVehicleMap.tsx"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/map.json"
  ],
  "description": "Live fleet map with vehicle markers. Select a unit to fly the camera and read status.",
  "categories": [
    "logistics",
    "app",
    "dashboard"
  ]
}