{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-map-answer",
  "type": "registry:component",
  "title": "Map",
  "description": "A location answer: pins, a route between them, and the list they came from.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/map-answer.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/map-answer.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { field, mono, paper } from \"./surfaces\";\n\nexport interface MapPin {\n  id: string;\n  label: string;\n  detail: string;\n  x: number;\n  y: number;\n}\n\nexport function MapAnswer({\n  pins,\n  activeId,\n  route,\n  onSelect,\n  className,\n  ...props\n}: Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"pins\" | \"activeId\" | \"route\" | \"onSelect\"\n> & {\n  pins: readonly MapPin[];\n  activeId: string;\n  route?: boolean;\n  onSelect?: (id: string) => void;\n}) {\n  const path = pins.map((pin) => `${pin.x},${pin.y}`).join(\" \");\n\n  return (\n    <div\n      data-slot=\"map-answer\"\n      className={cn(\n        paper,\n        \"flex w-full max-w-sm flex-col overflow-hidden rounded-2xl\",\n        className,\n      )}\n\n      {...props}\n    >\n      <div className={cn(field, \"relative h-40\")}>\n        <svg\n          viewBox=\"0 0 100 100\"\n          preserveAspectRatio=\"none\"\n          aria-hidden\n          className=\"absolute inset-0 size-full\"\n        >\n          {[18, 42, 66, 88].map((y) => (\n            <line\n              key={`h${y}`}\n              x1=\"0\"\n              x2=\"100\"\n              y1={y}\n              y2={y}\n              className=\"stroke-foreground/[0.06]\"\n              strokeWidth=\"0.6\"\n            />\n          ))}\n          {[22, 50, 74].map((x) => (\n            <line\n              key={`v${x}`}\n              x1={x}\n              x2={x}\n              y1=\"0\"\n              y2=\"100\"\n              className=\"stroke-foreground/[0.06]\"\n              strokeWidth=\"0.6\"\n            />\n          ))}\n          {route && pins.length > 1 && (\n            <polyline\n              points={path}\n              fill=\"none\"\n              strokeWidth=\"1.2\"\n              strokeDasharray=\"3 2\"\n              strokeLinecap=\"round\"\n              className=\"stroke-blue-500/60 dark:stroke-blue-400/60\"\n            />\n          )}\n        </svg>\n\n        {pins.map((pin) => (\n          <button\n            key={pin.id}\n            type=\"button\"\n            aria-label={pin.label}\n            aria-current={pin.id === activeId || undefined}\n            onClick={() => onSelect?.(pin.id)}\n            className=\"focus-visible:ring-foreground/30 absolute flex size-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full outline-none focus-visible:ring-1\"\n            style={{ left: `${pin.x}%`, top: `${pin.y}%` }}\n          >\n            <span\n              className={cn(\n                \"block rounded-full border-2 transition-all duration-200 motion-reduce:transition-none\",\n                pin.id === activeId\n                  ? \"border-background size-3.5 bg-blue-500 dark:bg-blue-400\"\n                  : \"border-background bg-foreground/45 size-2.5\",\n              )}\n            />\n          </button>\n        ))}\n      </div>\n\n      <div className=\"flex flex-col\">\n        {pins.map((pin) => (\n          <button\n            key={pin.id}\n            type=\"button\"\n            aria-current={pin.id === activeId || undefined}\n            onClick={() => onSelect?.(pin.id)}\n            className={cn(\n              \"border-foreground/[0.06] flex items-baseline gap-2 border-t px-3.5 py-2 text-start transition-colors\",\n              pin.id === activeId\n                ? \"bg-foreground/[0.03]\"\n                : \"hover:bg-foreground/[0.02]\",\n            )}\n          >\n            <span className=\"text-foreground/85 min-w-0 flex-1 truncate text-[13px]\">\n              {pin.label}\n            </span>\n            <span className={cn(mono, \"text-foreground/30 shrink-0\")}>\n              {pin.detail}\n            </span>\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}