{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "disaster-response-map",
  "title": "Disaster Response Map",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/disaster-response-map/DisasterResponseMap.tsx",
      "content": "'use client'\n\nimport { useState, 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 Shelter {\n  id: string\n  name: string\n  type: 'Shelter' | 'Medical Staging' | 'Command Post'\n  coords: [number, number]\n  capacity: number\n  occupied: number\n  status: 'Open' | 'Near Capacity' | 'Closed'\n}\n\nexport interface DisasterResponseMapProps {\n  accessToken?: string\n}\n\nexport function DisasterResponseMap({ accessToken }: DisasterResponseMapProps) {\n  const mapRef = useRef<MapRef | null>(null)\n\n  const firePerimeterCoords: [number, number][] = [\n    [-105.32, 40.01],\n    [-105.29, 40.03],\n    [-105.26, 40.02],\n    [-105.25, 39.99],\n    [-105.28, 39.97],\n    [-105.31, 39.98],\n    [-105.32, 40.01],\n  ]\n\n  const facilities: Shelter[] = [\n    {\n      id: 's-1',\n      name: 'County Event Center Shelter',\n      type: 'Shelter',\n      coords: [-105.24, 40.04],\n      capacity: 500,\n      occupied: 340,\n      status: 'Open',\n    },\n    {\n      id: 's-2',\n      name: 'West Valley Medical Staging',\n      type: 'Medical Staging',\n      coords: [-105.22, 39.98],\n      capacity: 120,\n      occupied: 98,\n      status: 'Near Capacity',\n    },\n    {\n      id: 's-3',\n      name: 'Unified Incident Command Post',\n      type: 'Command Post',\n      coords: [-105.25, 40.07],\n      capacity: 80,\n      occupied: 45,\n      status: 'Open',\n    },\n  ]\n\n  const [activeFacility, setActiveFacility] = useState<Shelter>(facilities[0])\n\n  const focusFacility = (f: Shelter) => {\n    setActiveFacility(f)\n    mapRef.current?.flyTo({ center: f.coords, zoom: 12.5 })\n  }\n\n  const focusHazard = () => {\n    mapRef.current?.flyTo({ center: [-105.28, 40.0], zoom: 11.5 })\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={[-105.27, 40.01]}\n          zoom={11.2}\n          className=\"h-full w-full\"\n        >\n          {/* Wildfire Hazard Exclusion Zone */}\n          <MapSource\n            id=\"hazard-zone\"\n            options={{\n              type: 'geojson',\n              data: {\n                type: 'Feature',\n                properties: {},\n                geometry: { type: 'Polygon', coordinates: [firePerimeterCoords] },\n              },\n            }}\n          />\n          <MapLayer\n            id=\"hazard-zone-fill\"\n            options={{\n              type: 'fill',\n              source: 'hazard-zone',\n              paint: { 'fill-color': '#ef4444', 'fill-opacity': 0.28 },\n            }}\n          />\n          <MapLayer\n            id=\"hazard-zone-line\"\n            options={{\n              type: 'line',\n              source: 'hazard-zone',\n              paint: { 'line-color': '#dc2626', 'line-width': 2.5, 'line-dasharray': [2, 1] },\n            }}\n          />\n\n          {/* Active Fire Origin Marker */}\n          <MapMarker lngLat={[-105.29, 40.0]} anchor=\"center\" onClick={focusHazard}>\n            <div className=\"relative flex cursor-pointer items-center justify-center\">\n              <span className=\"bg-destructive/30 absolute size-9 animate-ping rounded-full\" />\n              <div className=\"bg-destructive flex size-7 items-center justify-center rounded-full font-mono text-xs font-bold text-white shadow-lg ring-2 ring-white\">\n                🔥\n              </div>\n            </div>\n          </MapMarker>\n\n          {/* Shelters and Medical Staging */}\n          {facilities.map((f) => (\n            <MapMarker key={f.id} lngLat={f.coords} anchor=\"bottom\" onClick={() => focusFacility(f)}>\n              <div className=\"group flex cursor-pointer flex-col items-center\">\n                <div\n                  className={`flex size-7 items-center justify-center rounded-full shadow-md ring-2 ${\n                    f.type === 'Shelter'\n                      ? 'bg-success text-white ring-emerald-400/40'\n                      : f.type === 'Medical Staging'\n                        ? 'bg-info text-white ring-blue-400/40'\n                        : 'bg-primary text-primary-foreground ring-primary/40'\n                  }`}\n                >\n                  {f.type === 'Shelter' ? '🏠' : f.type === 'Medical Staging' ? '✚' : '★'}\n                </div>\n                <span className=\"border-border bg-background/90 mt-1 rounded border px-1 py-0.5 font-mono text-xs font-bold whitespace-nowrap shadow-xs\">\n                  {f.name.split(' ')[0]}\n                </span>\n              </div>\n            </MapMarker>\n          ))}\n        </Map>\n      </div>\n\n      {/* Incident Control Dashboard */}\n      <Card className=\"flex flex-col justify-between\">\n        <CardHeader>\n          <div className=\"flex items-center justify-between\">\n            <Badge\n              variant=\"outline\"\n              className=\"border-destructive/30 bg-destructive/10 text-destructive font-mono text-xs\"\n            >\n              LEVEL 3 EVACUATION\n            </Badge>\n            <Badge className=\"border-success/20 bg-success/10 text-success\">{activeFacility.status}</Badge>\n          </div>\n          <CardTitle className=\"mt-2 text-lg\">{activeFacility.name}</CardTitle>\n          <CardDescription className=\"text-xs\">\n            Capacity: {activeFacility.occupied} / {activeFacility.capacity} beds occupied\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"space-y-4\">\n          {/* Capacity Bar */}\n          <div className=\"border-border space-y-1.5 border-t pt-3\">\n            <div className=\"flex items-center justify-between font-mono text-xs\">\n              <span className=\"text-muted-foreground\">Occupancy Rate</span>\n              <span className=\"text-foreground font-bold\">\n                {Math.round((activeFacility.occupied / activeFacility.capacity) * 100)}%\n              </span>\n            </div>\n            <div className=\"bg-muted h-2 w-full overflow-hidden rounded-full\">\n              <div\n                className={`h-full rounded-full transition-[width,background-color] ${\n                  activeFacility.occupied / activeFacility.capacity > 0.8 ? 'bg-warning' : 'bg-success'\n                }`}\n                style={{ width: `${(activeFacility.occupied / activeFacility.capacity) * 100}%` }}\n              />\n            </div>\n          </div>\n\n          <div className=\"border-border space-y-1 border-t pt-3\">\n            <div className=\"text-muted-foreground mb-1 font-mono text-xs tracking-wider uppercase\">\n              Staged Relief Sites\n            </div>\n            {facilities.map((f) => (\n              <button\n                key={f.id}\n                type=\"button\"\n                className={`flex w-full items-center justify-between rounded-md px-2 py-1 text-xs transition-colors ${\n                  activeFacility.id === f.id\n                    ? 'bg-accent text-accent-foreground font-semibold'\n                    : 'hover:bg-muted text-muted-foreground'\n                }`}\n                onClick={() => focusFacility(f)}\n              >\n                <span className=\"max-w-[170px] truncate\">{f.name}</span>\n                <span className=\"font-mono text-xs opacity-75\">\n                  {f.occupied}/{f.capacity}\n                </span>\n              </button>\n            ))}\n          </div>\n\n          <div className=\"flex gap-2 pt-2\">\n            <Button variant=\"outline\" size=\"sm\" className=\"flex-1 font-mono text-xs\" onClick={focusHazard}>\n              Exclusion Zone\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1 font-mono text-xs\"\n              onClick={() => focusFacility(activeFacility)}\n            >\n              Focus Site\n            </Button>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/DisasterResponseMap.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": "Incident management map with wildfire hazard perimeter, shelter capacities, and emergency staging points.",
  "categories": [
    "logistics",
    "emergency",
    "map"
  ]
}