{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "magnetic-target-cursor",
  "type": "registry:ui",
  "title": "Magnetic Target Cursor",
  "description": "Tactical crosshair HUD cursor with magnetic element snap, real-time coordinate tracking, and target acquisition states.",
  "category": "cursors",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/cursors/magnetic-target-cursor/magnetic-target-cursor.tsx",
      "type": "registry:ui",
      "target": "components/ui/magnetic-target-cursor.tsx",
      "content": "import React, { useState, useRef, useEffect } from 'react';\nimport { Crosshair, Target, Compass, Cursor } from '@phosphor-icons/react';\n\nexport interface MagneticTargetCursorProps {\n  color?: 'cyan' | 'emerald' | 'amber' | 'rose';\n  showCoordinates?: boolean;\n  className?: string;\n}\n\nconst COLOR_STYLES = {\n  cyan: {\n    border: 'border-cyan-400',\n    text: 'text-cyan-400',\n    glow: 'shadow-[0_0_15px_rgba(6,182,212,0.6)]',\n    dot: 'bg-cyan-400',\n    badge: 'bg-cyan-500/10 text-cyan-400 border-cyan-500/20'\n  },\n  emerald: {\n    border: 'border-emerald-400',\n    text: 'text-emerald-400',\n    glow: 'shadow-[0_0_15px_rgba(16,185,129,0.6)]',\n    dot: 'bg-emerald-400',\n    badge: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20'\n  },\n  amber: {\n    border: 'border-amber-400',\n    text: 'text-amber-400',\n    glow: 'shadow-[0_0_15px_rgba(245,158,11,0.6)]',\n    dot: 'bg-amber-400',\n    badge: 'bg-amber-500/10 text-amber-400 border-amber-500/20'\n  },\n  rose: {\n    border: 'border-rose-400',\n    text: 'text-rose-400',\n    glow: 'shadow-[0_0_15px_rgba(244,63,94,0.6)]',\n    dot: 'bg-rose-400',\n    badge: 'bg-rose-500/10 text-rose-400 border-rose-500/20'\n  }\n};\n\nexport const MagneticTargetCursor: React.FC<MagneticTargetCursorProps> = ({\n  color = 'cyan',\n  showCoordinates = true,\n  className = ''\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [coords, setCoords] = useState({ x: 160, y: 120 });\n  const [isInside, setIsInside] = useState(false);\n  const [isLocked, setIsLocked] = useState(false);\n  const [clickCount, setClickCount] = useState(0);\n\n  const styles = COLOR_STYLES[color] || COLOR_STYLES.cyan;\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    const x = Math.round(e.clientX - rect.left);\n    const y = Math.round(e.clientY - rect.top);\n    setCoords({ x, y });\n    setIsInside(true);\n  };\n\n  const handleMouseEnter = () => setIsInside(true);\n  const handleMouseLeave = () => {\n    setIsInside(false);\n    setIsLocked(false);\n  };\n\n  const handleClick = () => {\n    setClickCount(prev => prev + 1);\n  };\n\n  return (\n    <div className={`w-full max-w-xl mx-auto rounded-3xl border border-zinc-200 dark:border-white/10 bg-white/95 dark:bg-[#07080d] p-6 shadow-2xl backdrop-blur-xl font-mono text-xs select-none ${className}`}>\n      {/* Top telemetry bar */}\n      <div className=\"flex items-center justify-between pb-4 border-b border-zinc-200/80 dark:border-white/5\">\n        <div className=\"flex items-center gap-3\">\n          <div className=\"flex h-8 w-8 items-center justify-center rounded-xl bg-zinc-100 dark:bg-white/5 text-zinc-900 dark:text-white\">\n            <Crosshair size={18} weight=\"bold\" className={styles.text} />\n          </div>\n          <div>\n            <h3 className=\"font-bold text-zinc-900 dark:text-white text-sm\">Precision Tactical Reticle</h3>\n            <span className=\"text-[11px] text-zinc-400\">Low-Latency HUD Cursor Tracker</span>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <span className={`px-2.5 py-1 rounded-full text-[10px] font-bold border uppercase ${isLocked ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20' : styles.badge}`}>\n            {isLocked ? 'TARGET ACQUIRED' : isInside ? 'TRACKING' : 'IDLE'}\n          </span>\n        </div>\n      </div>\n\n      {/* Interactive Cursor Tracking Canvas */}\n      <div\n        ref={containerRef}\n        onMouseMove={handleMouseMove}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onClick={handleClick}\n        className=\"relative my-5 h-64 w-full rounded-2xl bg-zinc-100/70 dark:bg-[#040407] border border-zinc-200/70 dark:border-white/10 overflow-hidden cursor-crosshair group\"\n      >\n        {/* Subtle grid background */}\n        <div className=\"absolute inset-0 bg-grid-dots opacity-20 pointer-events-none\" />\n\n        {/* Interactive Magnetic Targets inside canvas */}\n        <div className=\"absolute top-8 left-10 z-10\">\n          <button\n            onMouseEnter={() => setIsLocked(true)}\n            onMouseLeave={() => setIsLocked(false)}\n            className=\"flex items-center gap-2 px-3 py-1.5 rounded-xl border border-zinc-300 dark:border-white/15 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-md text-zinc-800 dark:text-zinc-200 hover:border-cyan-400 transition-colors shadow-xs\"\n          >\n            <Target size={14} className=\"text-cyan-400\" />\n            <span className=\"text-[11px]\">Primary Ingress</span>\n          </button>\n        </div>\n\n        <div className=\"absolute bottom-8 right-12 z-10\">\n          <button\n            onMouseEnter={() => setIsLocked(true)}\n            onMouseLeave={() => setIsLocked(false)}\n            className=\"flex items-center gap-2 px-3 py-1.5 rounded-xl border border-zinc-300 dark:border-white/15 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-md text-zinc-800 dark:text-zinc-200 hover:border-emerald-400 transition-colors shadow-xs\"\n          >\n            <Compass size={14} className=\"text-emerald-400\" />\n            <span className=\"text-[11px]\">Vector Node</span>\n          </button>\n        </div>\n\n        {/* Custom HUD Crosshair Element */}\n        {isInside && (\n          <div\n            style={{\n              left: `${coords.x}px`,\n              top: `${coords.y}px`,\n              transform: 'translate(-50%, -50%)',\n            }}\n            className=\"pointer-events-none absolute z-20 transition-all duration-75\"\n          >\n            {/* Outer Rotating Crosshair Ring */}\n            <div className={`relative flex items-center justify-center h-10 w-10 rounded-full border border-dashed transition-all duration-150 ${\n              isLocked ? 'border-emerald-400 scale-125 animate-spin' : `${styles.border} ${styles.glow}`\n            }`}>\n              {/* Center target dot */}\n              <div className={`h-1.5 w-1.5 rounded-full ${isLocked ? 'bg-emerald-400' : styles.dot}`} />\n\n              {/* Cross tick marks */}\n              <div className=\"absolute -top-1.5 w-0.5 h-1.5 bg-current\" />\n              <div className=\"absolute -bottom-1.5 w-0.5 h-1.5 bg-current\" />\n              <div className=\"absolute -left-1.5 h-0.5 w-1.5 bg-current\" />\n              <div className=\"absolute -right-1.5 h-0.5 w-1.5 bg-current\" />\n            </div>\n\n            {/* Coordinates Floating Tag */}\n            {showCoordinates && (\n              <div className=\"absolute top-6 left-6 whitespace-nowrap px-2 py-0.5 rounded-md bg-black/80 text-white text-[9px] font-mono border border-white/10 shadow-lg\">\n                X:{coords.x} Y:{coords.y}\n              </div>\n            )}\n          </div>\n        )}\n\n        {/* Center prompt if idle */}\n        {!isInside && (\n          <div className=\"absolute inset-0 flex flex-col items-center justify-center text-zinc-400 pointer-events-none\">\n            <Cursor size={22} className=\"mb-2 text-zinc-400 opacity-60 animate-bounce\" />\n            <span className=\"text-[11px]\">Hover over canvas to engage tactical crosshair</span>\n          </div>\n        )}\n      </div>\n\n      {/* Footer Info */}\n      <div className=\"flex items-center justify-between text-[11px] text-zinc-400 pt-2 border-t border-zinc-200/60 dark:border-white/5\">\n        <div className=\"flex items-center gap-4\">\n          <span>X: <strong className=\"text-zinc-900 dark:text-zinc-200 font-mono\">{coords.x}px</strong></span>\n          <span>Y: <strong className=\"text-zinc-900 dark:text-zinc-200 font-mono\">{coords.y}px</strong></span>\n        </div>\n        <div>\n          <span>Clicks: <strong className=\"text-zinc-900 dark:text-zinc-200 font-mono\">{clickCount}</strong></span>\n        </div>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}