{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "property-boundary-map",
  "title": "Property Boundary Map",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/property-boundary-map/PropertyBoundaryMap.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 Parcel {\n  apn: string\n  address: string\n  zoning: string\n  lotSqFt: string\n  acres: number\n  assessedValue: string\n  taxYear: number\n  coords: [number, number]\n  polygon: [number, number][]\n}\n\nexport interface PropertyBoundaryMapProps {\n  accessToken?: string\n}\n\nexport function PropertyBoundaryMap({ accessToken }: PropertyBoundaryMapProps) {\n  const mapRef = useRef<MapRef | null>(null)\n\n  const parcels: Parcel[] = [\n    {\n      apn: '0482-104-012',\n      address: '450 Mountain View Rd, Austin, TX',\n      zoning: 'SF-3 (Single Family)',\n      lotSqFt: '14,280 sq ft',\n      acres: 0.33,\n      assessedValue: '$1,280,000',\n      taxYear: 2025,\n      coords: [-97.7431, 30.2672],\n      polygon: [\n        [-97.7438, 30.2678],\n        [-97.7424, 30.2678],\n        [-97.7424, 30.2666],\n        [-97.7438, 30.2666],\n        [-97.7438, 30.2678],\n      ],\n    },\n    {\n      apn: '0482-104-013',\n      address: '460 Mountain View Rd, Austin, TX',\n      zoning: 'SF-3 (Single Family)',\n      lotSqFt: '16,500 sq ft',\n      acres: 0.38,\n      assessedValue: '$1,410,000',\n      taxYear: 2025,\n      coords: [-97.741, 30.2672],\n      polygon: [\n        [-97.7424, 30.2678],\n        [-97.741, 30.2678],\n        [-97.741, 30.2666],\n        [-97.7424, 30.2666],\n        [-97.7424, 30.2678],\n      ],\n    },\n  ]\n\n  const [activeParcel, setActiveParcel] = useState<Parcel>(parcels[0])\n\n  const selectParcel = (p: Parcel) => {\n    setActiveParcel(p)\n    mapRef.current?.flyTo({ center: p.coords, zoom: 17 })\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=\"satellite-streets\"\n          center={activeParcel.coords}\n          zoom={16.5}\n          className=\"h-full w-full\"\n        >\n          {/* Parcel Boundary Polygons */}\n          <MapSource\n            id=\"parcel-primary\"\n            options={{\n              type: 'geojson',\n              data: {\n                type: 'Feature',\n                properties: {},\n                geometry: { type: 'Polygon', coordinates: [activeParcel.polygon] },\n              },\n            }}\n          />\n          <MapLayer\n            id=\"parcel-primary-fill\"\n            options={{\n              type: 'fill',\n              source: 'parcel-primary',\n              paint: { 'fill-color': '#eab308', 'fill-opacity': 0.28 },\n            }}\n          />\n          <MapLayer\n            id=\"parcel-primary-line\"\n            options={{\n              type: 'line',\n              source: 'parcel-primary',\n              paint: { 'line-color': '#facc15', 'line-width': 2.5 },\n            }}\n          />\n\n          {parcels.map((p) => (\n            <MapMarker key={p.apn} lngLat={p.coords} anchor=\"center\" onClick={() => selectParcel(p)}>\n              <div className=\"group flex cursor-pointer flex-col items-center\">\n                <span\n                  className={`border-border bg-background/90 rounded border px-1.5 py-0.5 font-mono text-xs font-bold shadow-md ${\n                    activeParcel.apn === p.apn ? 'border-warning text-warning' : 'text-foreground'\n                  }`}\n                >\n                  {p.apn}\n                </span>\n              </div>\n            </MapMarker>\n          ))}\n        </Map>\n      </div>\n\n      {/* Cadastral Parcel Valuation Card */}\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              APN {activeParcel.apn}\n            </Badge>\n            <Badge className=\"border-warning/20 bg-warning/10 text-warning\">{activeParcel.zoning}</Badge>\n          </div>\n          <CardTitle className=\"mt-2 text-base font-medium\">{activeParcel.address}</CardTitle>\n          <CardDescription className=\"font-mono text-xs\">\n            {activeParcel.lotSqFt} • {activeParcel.acres} Acres\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"space-y-4\">\n          <div className=\"border-border space-y-2 border-t pt-3 font-mono text-xs\">\n            <div className=\"flex items-center justify-between\">\n              <span className=\"text-muted-foreground\">Assessed Valuation</span>\n              <span className=\"text-foreground text-base font-bold\">{activeParcel.assessedValue}</span>\n            </div>\n            <div className=\"flex items-center justify-between\">\n              <span className=\"text-muted-foreground\">Zoning Code</span>\n              <span className=\"text-foreground\">{activeParcel.zoning}</span>\n            </div>\n            <div className=\"flex items-center justify-between\">\n              <span className=\"text-muted-foreground\">Assessment Roll Year</span>\n              <span className=\"text-foreground\">{activeParcel.taxYear}</span>\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              Adjacent Cadastral Lots\n            </div>\n            {parcels.map((p) => (\n              <button\n                key={p.apn}\n                type=\"button\"\n                className={`flex w-full items-center justify-between rounded-md px-2 py-1 text-xs transition-colors ${\n                  activeParcel.apn === p.apn\n                    ? 'bg-accent text-accent-foreground font-semibold'\n                    : 'hover:bg-muted text-muted-foreground'\n                }`}\n                onClick={() => selectParcel(p)}\n              >\n                <span className=\"font-mono\">{p.apn}</span>\n                <span className=\"font-mono text-xs opacity-75\">{p.lotSqFt}</span>\n              </button>\n            ))}\n          </div>\n\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"w-full font-mono text-xs\"\n            onClick={() => selectParcel(activeParcel)}\n          >\n            Center Cadastral Lot\n          </Button>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/PropertyBoundaryMap.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": "Cadastral parcel boundaries with zoning classifications, lot acreage, and tax assessment valuation.",
  "categories": [
    "real-estate",
    "places",
    "map"
  ]
}