{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"music-player","type":"registry:block","title":"Music Player","description":"Now-playing card with a token-gradient cover that breathes with playback, title and artist that cross-fade in the skip direction, a draggable scrub bar with buffered and played layers, play/pause icon swap, shuffle and repeat-all/one toggles, volume slider with mute, and a queue drawer that slides up over the card; playback is simulated unless a track has a `src`.","author":"kara ","dependencies":["clsx","lucide-react","motion","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/music-player.tsx","type":"registry:component","target":"@components/motion/music-player.tsx","content":"\"use client\";\n// karaui.kamisama-v0.my.id/components/blocks/music-player\n\nimport {\n ListMusic,\n Pause,\n Play,\n Repeat,\n Repeat1,\n Shuffle,\n SkipBack,\n SkipForward,\n Volume1,\n Volume2,\n VolumeX,\n X,\n} from \"lucide-react\";\nimport {\n AnimatePresence,\n motion,\n useMotionValue,\n useReducedMotion,\n useTransform,\n} from \"motion/react\";\nimport { type ReactNode, useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport { Toggle } from \"@/components/motion/toggle-group\";\nimport { EASE_IN_OUT, EASE_OUT, SPRING_LAYOUT, SPRING_PANEL, SPRING_SWAP } from \"@/lib/ease\";\nimport { useSlider } from \"@/lib/hooks/use-slider\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface MusicTrack {\n id: string;\n title: string;\n artist: string;\n album?: string;\n /** Length in seconds. Drives the simulated clock when there is no `src`. */\n duration: number;\n /** Cover image URL. Without one a gradient from the theme's chart tokens is drawn. */\n cover?: string;\n /** Optional audio file. Without one playback is simulated. */\n src?: string;\n}\n\nexport type MusicRepeat = \"off\" | \"all\" | \"one\";\n\nexport interface MusicPlayerProps {\n tracks: MusicTrack[];\n /** Controlled track index. */\n index?: number;\n defaultIndex?: number;\n onIndexChange?: (index: number) => void;\n /** Controlled playing state. */\n playing?: boolean;\n defaultPlaying?: boolean;\n onPlayingChange?: (playing: boolean) => void;\n /** Controlled volume, 0–1. */\n volume?: number;\n defaultVolume?: number;\n onVolumeChange?: (volume: number) => void;\n defaultShuffle?: boolean;\n defaultRepeat?: MusicRepeat;\n /** Open the queue drawer initially. */\n defaultQueueOpen?: boolean;\n className?: string;\n}\n\nfunction useControllable(\n value: T | undefined,\n defaultValue: T,\n onChange: ((next: T) => void) | undefined,\n) {\n const [internal, setInternal] = useState(defaultValue);\n const controlled = value !== undefined;\n const current = controlled ? value : internal;\n const set = useCallback(\n (next: T) => {\n if (!controlled) setInternal(next);\n onChange?.(next);\n },\n [controlled, onChange],\n );\n return [current, set] as const;\n}\n\nconst formatTime = (seconds: number) => {\n const s = Math.max(0, Math.floor(seconds));\n return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, \"0\")}`;\n};\n\n/** Deterministic shuffle (mulberry32) that keeps `first` at the front. */\nfunction shuffledOrder(length: number, first: number, seed: number) {\n let t = seed >>> 0;\n const rand = () => {\n t += 0x6d2b79f5;\n let r = Math.imul(t ^ (t >>> 15), 1 | t);\n r ^= r + Math.imul(r ^ (r >>> 7), 61 | r);\n return ((r ^ (r >>> 14)) >>> 0) / 4294967296;\n };\n const rest = Array.from({ length }, (_, i) => i).filter((i) => i !== first);\n for (let i = rest.length - 1; i > 0; i--) {\n const j = Math.floor(rand() * (i + 1));\n [rest[i], rest[j]] = [rest[j], rest[i]];\n }\n return [first, ...rest];\n}\n\n// Simulated network: the buffer starts this many seconds ahead and fills at\n// this multiple of real time, so the buffered bar visibly leads the playhead.\nconst SIM_PREBUFFER = 14;\nconst SIM_BUFFER_RATE = 3;\n\n/** Two chart tokens per track, picked deterministically from its index. */\nfunction coverGradient(i: number) {\n const a = (i % 5) + 1;\n const b = ((i + 2) % 5) + 1;\n return `radial-gradient(circle at 25% 20%, color-mix(in oklab, var(--chart-${b}) 70%, transparent), transparent 60%), linear-gradient(135deg, var(--chart-${a}), var(--chart-${b}))`;\n}\n\n/**\n * Now-playing card: cover art that breathes with playback, title/artist that\n * cross-fade in the skip direction, a scrub bar with buffered and played\n * layers, a play/pause icon swap, shuffle and repeat toggles, volume, and a\n * queue drawer that slides up over the card. Playback is simulated unless a\n * track has a `src`, in which case a hidden `