{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radar",
  "type": "registry:ui",
  "title": "Radar",
  "description": "Sector-scan radar with rotating sweep. Decorative by default; accepts polar `blips` ({angle, distance, hot}) to plot real data.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/hud/radar.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type RadarBlip = {\n  /** Bearing in degrees: 0 = top (north), clockwise. */\n  angle: number\n  /** Distance from center as a fraction of the radius (0 = center, 1 = rim). */\n  distance: number\n  /** Accent-colored contact. */\n  hot?: boolean\n  /** Blink stagger, e.g. \"0.6s\". Defaults to index * 0.5s. */\n  delay?: string\n}\n\nconst DEFAULT_BLIPS: RadarBlip[] = [\n  { angle: 21, distance: 0.6, hot: true, delay: \"0s\" },\n  { angle: 306, distance: 0.54, delay: \"0.6s\" },\n  { angle: 112, distance: 0.43, delay: \"1.1s\" },\n  { angle: 217, distance: 0.4, hot: true, delay: \"1.7s\" },\n  { angle: 18, distance: 0.13, delay: \"2.1s\" },\n]\n\n// Decorative by default; pass `blips` to plot real polar data.\n// Hidden from AT; pair with a visible data readout.\nfunction Radar({\n  className,\n  size = 280,\n  blips = DEFAULT_BLIPS,\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: number; blips?: RadarBlip[] }) {\n  return (\n    <div aria-hidden className={cn(\"relative\", className)} style={{ width: size, height: size }} {...props}>\n      <div className=\"absolute inset-0 rounded-full border border-[#33383C]\" />\n      <div className=\"absolute inset-[18%] rounded-full border border-border\" />\n      <div className=\"absolute inset-[36%] rounded-full border border-dashed border-border\" />\n      <div className=\"absolute inset-x-0 top-1/2 h-px bg-[#1D2023]\" />\n      <div className=\"absolute inset-y-0 left-1/2 w-px bg-[#1D2023]\" />\n      <div\n        className=\"absolute inset-0 rounded-full motion-safe:animate-[hud-rot_4s_linear_infinite]\"\n        style={{ background: \"conic-gradient(from 0deg, transparent 78%, color-mix(in srgb, var(--primary) 22%, transparent) 100%)\" }}\n      />\n      {blips.map((b, i) => {\n        const rad = (b.angle * Math.PI) / 180\n        const d = Math.max(0, Math.min(1, b.distance)) * 50\n        const left = 50 + d * Math.sin(rad)\n        const top = 50 - d * Math.cos(rad)\n        return (\n          <span\n            key={i}\n            className={cn(\n              \"absolute size-[5px] -translate-x-1/2 -translate-y-1/2 rounded-full motion-safe:animate-[hud-pulse_2.4s_ease-in-out_infinite]\",\n              b.hot ? \"bg-primary shadow-[0_0_5px_var(--primary)]\" : \"bg-[#9AA0A4] shadow-[0_0_5px_#9AA0A4]\"\n            )}\n            style={{ top: `${top}%`, left: `${left}%`, animationDelay: b.delay ?? `${i * 0.5}s` }}\n          />\n        )\n      })}\n      <span className=\"absolute left-1/2 top-1/2 -ml-0.5 -mt-0.5 size-1 bg-primary\" />\n      <style>{\"@keyframes hud-rot{to{transform:rotate(360deg)}}@keyframes hud-pulse{0%,100%{opacity:.9}50%{opacity:.35}}\"}</style>\n    </div>\n  )\n}\n\nexport { Radar }\n",
      "type": "registry:ui"
    }
  ]
}