{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotify-card",
  "title": "Spotify Card",
  "description": "A premium Spotify card with real-time metadata and morphing animations.",
  "dependencies": [
    "framer-motion",
    "lucide-react",
    "cheerio",
    "got"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/spark-ui/spotify/spotify-card.tsx",
      "content": "/* eslint-disable @next/next/no-img-element */\n\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { motion, useAnimation } from \"framer-motion\";\nimport { Loader2 } from \"lucide-react\";\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nexport interface SpotifyCardProps {\n  trackUrl: string;\n  className?: string;\n  onPlayingChange?: (isPlaying: boolean) => void;\n}\n\nexport interface SpotifyCardRef {\n  togglePlayback: () => void;\n}\n\nconst SpotifyLogo = ({\n  className,\n  isPlaying,\n}: {\n  className?: string;\n  isPlaying?: boolean;\n}) => (\n  <motion.svg\n    viewBox=\"0 0 24 24\"\n    className={cn(\n      \"fill-current opacity-40 transition-colors duration-500\",\n      className,\n    )}\n    animate={\n      isPlaying\n        ? {\n            scale: [1, 1.1, 1],\n            opacity: [0.4, 1, 0.4],\n            color: [\"#ffffff\", \"#1DB954\", \"#ffffff\"],\n          }\n        : { color: \"currentColor\" }\n    }\n    transition={{ duration: 2.5, repeat: Infinity, ease: \"easeInOut\" }}\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path d=\"M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.49 17.306c-.216.353-.674.464-1.027.249-2.846-1.74-6.427-2.133-10.645-1.17-.404.093-.81-.157-.903-.561-.093-.404.157-.81.561-.903 4.613-1.055 8.567-.611 11.76 1.343.353.216.464.674.249 1.027zm1.464-3.256c-.272.44-.848.58-1.288.308-3.258-1.998-8.224-2.58-12.074-1.41-.497.15-1.022-.13-1.173-.627-.151-.498.13-1.023.627-1.174 4.406-1.34 9.89-.687 13.6 1.587.441.27.581.847.308 1.287zm.126-3.393c-3.906-2.32-10.334-2.533-14.072-1.398-.6.182-1.23-.163-1.412-.763-.182-.599.163-1.23.763-1.412 4.293-1.303 11.395-1.043 15.9 1.631.538.319.715 1.015.396 1.554-.319.539-1.015.716-1.555.397z\" />\n  </motion.svg>\n);\n\nexport const SpotifyCard = forwardRef<SpotifyCardRef, SpotifyCardProps>(\n  function SpotifyCard({ trackUrl, className, onPlayingChange }, ref) {\n  const [isPlaying, setIsPlaying] = useState(false);\n  const [mounted, setMounted] = useState(false);\n  const [metadata, setMetadata] = useState<{\n    title: string;\n    artist: string;\n    albumArt: string;\n    previewUrl: string;\n  } | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [colors, setColors] = useState<string[]>([\"#1DB954\", \"#191414\"]);\n  const audioRef = useRef<HTMLAudioElement | null>(null);\n  const discControls = useAnimation();\n\n  useEffect(() => {\n    onPlayingChange?.(isPlaying);\n  }, [isPlaying, onPlayingChange]);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- hydration gate\n    setMounted(true);\n    // The API accepts only a validated track ID (never a raw URL) to prevent\n    // server-side request forgery.\n    const trackId = trackUrl.match(/\\/track\\/([A-Za-z0-9]+)/)?.[1];\n    const fetchMetadata = async () => {\n      if (!trackId) {\n        console.error(\"Spotify Card Error: invalid Spotify track URL\");\n        setLoading(false);\n        return;\n      }\n      setLoading(true);\n      try {\n        const response = await fetch(\n          `/api/spotify/metadata?trackId=${encodeURIComponent(trackId)}`,\n        );\n        if (!response.ok) throw new Error(\"Failed to fetch\");\n        const data = await response.json();\n        setMetadata(data);\n\n        // Extract palette from image\n        if (data.albumArt) {\n          const img = new Image();\n          img.crossOrigin = \"Anonymous\";\n          img.src = data.albumArt;\n          img.onload = () => {\n            const canvas = document.createElement(\"canvas\");\n            const ctx = canvas.getContext(\"2d\");\n            if (ctx) {\n              canvas.width = 10;\n              canvas.height = 10;\n              ctx.drawImage(img, 0, 0, 10, 10);\n              const pixels = ctx.getImageData(0, 0, 10, 10).data;\n              const uniqueColors = new Set<string>();\n              for (let i = 0; i < pixels.length; i += 12) {\n                const r = pixels[i];\n                const g = pixels[i + 1];\n                const b = pixels[i + 2];\n                uniqueColors.add(`rgb(${r}, ${g}, ${b})`);\n                if (uniqueColors.size >= 3) break;\n              }\n              setColors(Array.from(uniqueColors));\n            }\n          };\n        }\n\n        // Cleanup previous audio if any\n        if (audioRef.current) {\n          audioRef.current.pause();\n          audioRef.current = null;\n        }\n\n        if (data.previewUrl) {\n          const audio = new Audio(data.previewUrl);\n          audio.crossOrigin = \"anonymous\";\n          audio.onended = () => {\n            setIsPlaying(false);\n          };\n          audioRef.current = audio;\n        } else {\n          console.warn(\"No preview URL found for this track\");\n        }\n      } catch (err) {\n        console.error(\"Spotify Card Error:\", err);\n      } finally {\n        setLoading(false);\n      }\n    };\n    fetchMetadata();\n    return () => {\n      if (audioRef.current) {\n        audioRef.current.pause();\n        audioRef.current = null;\n      }\n    };\n  }, [trackUrl]);\n\n  useEffect(() => {\n    if (isPlaying) {\n      discControls.start({\n        rotate: 360,\n        transition: { duration: 4, repeat: Infinity, ease: \"linear\" },\n      });\n    } else {\n      discControls.stop();\n      discControls.start({\n        rotate: 0,\n        transition: { duration: 0.8, ease: \"backOut\" },\n      });\n    }\n  }, [isPlaying, discControls]);\n\n  const togglePlayback = () => {\n    if (!audioRef.current) return;\n\n    if (isPlaying) {\n      audioRef.current.pause();\n      setIsPlaying(false);\n    } else {\n      // Use a then/catch to handle potential play request interruptions\n      audioRef.current\n        .play()\n        .then(() => {\n          setIsPlaying(true);\n        })\n        .catch((err) => {\n          console.warn(\"Playback interrupted:\", err);\n          setIsPlaying(false);\n        });\n    }\n  };\n\n    useImperativeHandle(ref, () => ({ togglePlayback }), [isPlaying]);\n\n    if (loading || !mounted) {\n    return (\n      <div\n        className={cn(\n          \"w-95 h-32.5 rounded-3xl bg-black/5 dark:bg-white/5 flex items-center justify-center border border-black/5 dark:border-white/10 backdrop-blur-xl\",\n          className,\n        )}\n      >\n        <Loader2 className=\"w-5 h-5 text-zinc-500 animate-spin\" />\n      </div>\n    );\n  }\n\n  const {\n    title = \"Unknown Track\",\n    artist = \"Unknown Artist\",\n    albumArt = \"\",\n  } = metadata || {};\n\n    return (\n    <div\n      className={cn(\n        \"group relative w-95 h-32.5 rounded-3xl overflow-hidden shadow-2xl transition-all duration-500 border border-black/5 dark:border-white/10 bg-white/40 dark:bg-black/40 backdrop-blur-2xl\",\n        className,\n      )}\n    >\n      {/* Background Image Layer */}\n      <div className=\"absolute inset-0 z-0 pointer-events-none overflow-hidden\">\n        <motion.div\n          animate={{\n            scale: [1, 1.05, 1],\n            rotate: [0, 1, -1, 0],\n          }}\n          transition={{\n            duration: 20,\n            repeat: Infinity,\n            ease: \"easeInOut\",\n          }}\n          className=\"absolute inset-0\"\n        >\n          <img\n            src={albumArt}\n            alt=\"\"\n            className=\"w-full h-full object-cover blur-xl scale-125 opacity-50 dark:opacity-50\"\n          />\n        </motion.div>\n\n        {/* Subtle Overlay Wash */}\n        <div className=\"absolute inset-0 bg-white/10 dark:bg-transparent\" />\n\n        {/* Animated Blobs for depth */}\n        <motion.div\n          animate={{\n            x: [-20, 20, -20],\n            y: [-10, 10, -10],\n            scale: [1, 1.2, 1],\n          }}\n          transition={{\n            duration: 10,\n            repeat: Infinity,\n            ease: \"easeInOut\",\n          }}\n          className=\"absolute top-0 left-0 w-64 h-64 rounded-full blur-3xl opacity-20 dark:opacity-30 pointer-events-none\"\n          style={{\n            background: `radial-gradient(circle, ${colors[0]} 0%, transparent 70%)`,\n          }}\n        />\n        <motion.div\n          animate={{\n            x: [20, -20, 20],\n            y: [10, -10, 10],\n            scale: [1.2, 1, 1.2],\n          }}\n          transition={{\n            duration: 12,\n            repeat: Infinity,\n            ease: \"easeInOut\",\n          }}\n          className=\"absolute bottom-0 right-0 w-64 h-64 rounded-full blur-3xl opacity-20 dark:opacity-30 pointer-events-none\"\n          style={{\n            background: `radial-gradient(circle, ${colors[1] || colors[0]} 0%, transparent 70%)`,\n          }}\n        />\n\n        {/* Noise Texture Overlay */}\n        <div className=\"absolute inset-0 opacity-[0.03] dark:opacity-[0.05] pointer-events-none mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')]\" />\n      </div>\n\n      {/* Content */}\n      <div className=\"relative z-10 flex items-center h-full px-5 gap-6\">\n        {/* Album Cover / Disc */}\n        <div className=\"relative flex items-center justify-center w-24 h-24 shrink-0\">\n          <motion.button\n            type=\"button\"\n            aria-label={isPlaying ? `Pause ${title}` : `Play ${title}`}\n            layout\n            animate={{\n              borderRadius: isPlaying ? \"100%\" : \"16px\",\n            }}\n            transition={{ duration: 0.6, ease: \"circOut\" }}\n            className=\"relative w-24 h-24 overflow-hidden shadow-2xl cursor-pointer ring-1 ring-black/5 dark:ring-white/10 z-10 outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            onClick={togglePlayback}\n          >\n            <motion.div\n              animate={discControls}\n              className=\"w-full h-full origin-center\"\n            >\n              <img\n                src={albumArt}\n                alt={title}\n                className=\"w-full h-full object-cover select-none pointer-events-none\"\n              />\n              {/* Vinyl Texture */}\n              <motion.div\n                initial={false}\n                animate={{ opacity: isPlaying ? 0.3 : 0 }}\n                className=\"absolute inset-0 bg-[repeating-radial-gradient(circle,transparent,transparent_1px,rgba(255,255,255,0.1)_2px)] pointer-events-none\"\n              />\n              {/* Disc Center */}\n              <motion.div\n                initial={false}\n                animate={{\n                  opacity: isPlaying ? 1 : 0,\n                  scale: isPlaying ? 1 : 0.5,\n                }}\n                className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-black/90 dark:bg-black/95 border border-white/20 flex items-center justify-center pointer-events-none shadow-xl\"\n              >\n                <div className=\"w-1.5 h-1.5 rounded-full bg-white/10\" />\n              </motion.div>\n            </motion.div>\n          </motion.button>\n        </div>\n\n        {/* Info Section */}\n        <div className=\"flex-1 min-w-0 flex flex-col justify-center gap-1 overflow-hidden pr-8\">\n          <div className=\"flex flex-col min-w-0\">\n            <h3 className=\"text-lg font-bold text-zinc-900 dark:text-white tracking-tight leading-tight truncate\">\n              {title}\n            </h3>\n            <span className=\"text-sm font-semibold text-zinc-600 dark:text-zinc-400 truncate opacity-80\">\n              {artist}\n            </span>\n          </div>\n        </div>\n\n        {/* Spotify Branding */}\n        <div className=\"absolute top-5 right-6\">\n          <SpotifyLogo\n            className=\"w-5 h-5 text-zinc-900 dark:text-white\"\n            isPlaying={isPlaying}\n          />\n        </div>\n      </div>\n    </div>\n    );\n  },\n);\n",
      "type": "registry:component"
    },
    {
      "path": "registry/spark-ui/spotify/metadata-route.ts",
      "content": "import * as cheerio from \"cheerio\";\nimport got from \"got\";\nimport { NextRequest, NextResponse } from \"next/server\";\n\n// SSRF guard: the outbound request destination is always built server-side\n// from a validated Spotify track ID — never from a caller-supplied URL.\nconst TRACK_ID_RE = /^[A-Za-z0-9]{1,64}$/;\nconst MAX_RESPONSE_BYTES = 1_000_000;\n\nexport async function GET(req: NextRequest) {\n  const { searchParams } = new URL(req.url);\n  const trackId = searchParams.get(\"trackId\") ?? \"\";\n\n  if (!TRACK_ID_RE.test(trackId)) {\n    return NextResponse.json({ error: \"Invalid track ID\" }, { status: 400 });\n  }\n\n  try {\n    const request = got(`https://open.spotify.com/track/${trackId}`, {\n      headers: {\n        \"user-agent\": \"Mozilla/5.0 (compatible; SparkUI-SpotifyCard/1.0)\",\n        accept: \"text/html\",\n      },\n      followRedirect: false,\n      retry: { limit: 0 },\n      timeout: { request: 5000 },\n    });\n    request.on(\"downloadProgress\", ({ transferred }) => {\n      if (transferred > MAX_RESPONSE_BYTES) request.cancel();\n    });\n    const { headers, body: html } = await request;\n\n    if (!headers[\"content-type\"]?.includes(\"text/html\")) {\n      return NextResponse.json(\n        { error: \"Failed to fetch metadata\" },\n        { status: 502 },\n      );\n    }\n\n    const $ = cheerio.load(html);\n\n    const title =\n      $('meta[property=\"og:title\"]').attr(\"content\") || \"Unknown Track\";\n    const image = $('meta[property=\"og:image\"]').attr(\"content\") || \"\";\n    const previewUrl =\n      $('meta[property=\"og:audio\"]').attr(\"content\") ||\n      $('meta[name=\"twitter:audio:src\"]').attr(\"content\") ||\n      \"\";\n\n    // Spotify's og:description is often: \"Artist · Album · Song · Year\"\n    const description =\n      $('meta[property=\"og:description\"]').attr(\"content\") || \"\";\n    // Usually the first part is the Artist\n    const artist = description.split(\"·\")[0]?.trim() || \"Unknown Artist\";\n\n    return NextResponse.json({\n      title,\n      artist,\n      albumArt: image,\n      previewUrl,\n    });\n  } catch {\n    // Non-2xx, redirect attempt, timeout, or oversized response. Keep the\n    // client response generic — no upstream details.\n    return NextResponse.json(\n      { error: \"Failed to fetch metadata\" },\n      { status: 502 },\n    );\n  }\n}\n",
      "type": "registry:component",
      "target": "app/api/spotify/metadata/route.ts"
    }
  ],
  "type": "registry:component"
}