// Shared UI primitives const { useState, useEffect, useRef, useMemo, useCallback } = React; // ─── Icons ───────────────────────────────────────────── const Icon = { Play: ({size=14}) => , Pause: ({size=14}) => , Home: ({size=14}) => , Player: ({size=14}) => , Music: ({size=18}) => , Upload: ({size=24}) => , Wand: ({size=16}) => , Sparkle: ({size=14}) => , Download: ({size=14}) => , Plus: ({size=14}) => , Expand: ({size=14}) => , ChevronUp: ({size=14}) => , ChevronDown: ({size=14}) => , ArrowRight: ({size=14}) => , ArrowLeft: ({size=14}) => , Check: ({size=14}) => , Loader: ({size=14}) => , Album: ({size=16}) => , Film: ({size=16}) => , Refresh: ({size=14}) => , X: ({size=14}) => , Trash: ({size=14}) => , Cog: ({size=14}) => , Edit: ({size=14}) => , GripVertical: ({size=14}) => , }; // ─── Waveform ───────────────────────────────────────── function Waveform({ seed = 7, bars = 64, progress = 0, playing = false, level = 0, height = 44, samples = null }) { const fallbackHeights = useMemo(() => { const arr = []; let x = seed; for (let i = 0; i < bars; i++) { x = (x * 9301 + 49297) % 233280; const base = Math.sin(i * 0.32 + seed) * 0.38 + 0.52; const noise = (x / 233280) * 0.42; const env = Math.min(1, i / 10) * Math.min(1, (bars - i) / 10); arr.push(Math.max(0.08, (base + noise * 0.28) * env)); } return arr; }, [seed, bars]); const baseHeights = useMemo(() => { if (Array.isArray(samples) && samples.length > 0) { return samples.map((value) => Math.max(0.04, Math.min(1, Number(value) || 0))); } return fallbackHeights; }, [fallbackHeights, samples]); const liveHeights = useMemo(() => { return baseHeights.map((value, index) => { if (!playing) return value; const shimmer = (Math.sin(index * 0.7 + seed * 0.45) + 1) / 2; const pulse = Math.max(0, level) * (0.75 + shimmer * 1.35); return Math.min(1, value * (0.72 + pulse * 1.8)); }); }, [baseHeights, level, playing, seed]); const waveformAreaPath = useMemo(() => { const values = liveHeights; if (!values.length) return ""; const centerY = 50; const amplitude = 34; const pointsTop = values.map((value, index) => ({ x: values.length === 1 ? 50 : (index / (values.length - 1)) * 100, y: centerY - value * amplitude, })); const pointsBottom = [...pointsTop].reverse().map((point, index) => ({ x: point.x, y: centerY + values[values.length - 1 - index] * amplitude, })); const toSmoothPath = (points) => { if (!points.length) return ""; if (points.length === 1) return `M ${points[0].x} ${points[0].y}`; let path = `M ${points[0].x} ${points[0].y}`; for (let index = 1; index < points.length; index += 1) { const prev = points[index - 1]; const current = points[index]; const midX = (prev.x + current.x) / 2; const midY = (prev.y + current.y) / 2; path += ` Q ${prev.x} ${prev.y} ${midX} ${midY}`; } const last = points[points.length - 1]; path += ` T ${last.x} ${last.y}`; return path; }; return `${toSmoothPath(pointsTop)} L ${pointsBottom[0].x} ${pointsBottom[0].y} ${toSmoothPath(pointsBottom).slice(1)} Z`; }, [liveHeights]); const waveformLinePath = useMemo(() => { const values = liveHeights; if (!values.length) return ""; const points = values.map((value, index) => ({ x: values.length === 1 ? 50 : (index / (values.length - 1)) * 100, y: 50 - value * 26, })); if (points.length === 1) return `M ${points[0].x} ${points[0].y}`; let path = `M ${points[0].x} ${points[0].y}`; for (let index = 1; index < points.length; index += 1) { const prev = points[index - 1]; const current = points[index]; const midX = (prev.x + current.x) / 2; const midY = (prev.y + current.y) / 2; path += ` Q ${prev.x} ${prev.y} ${midX} ${midY}`; } const last = points[points.length - 1]; path += ` T ${last.x} ${last.y}`; return path; }, [liveHeights]); return (
); } function Spectrum({ seed = 7, bars = 40, bins = null, playing = false, height = 44 }) { const fallbackBins = useMemo(() => { const values = []; let x = seed; for (let index = 0; index < bars; index += 1) { x = (x * 9301 + 49297) % 233280; const base = (Math.sin(index * 0.34 + seed) + 1) / 2; const noise = x / 233280; const envelope = Math.sin((index / Math.max(1, bars - 1)) * Math.PI); values.push(Math.max(0.04, (0.2 + base * 0.32 + noise * 0.12) * envelope)); } return values; }, [bars, seed]); const values = Array.isArray(bins) && bins.length ? bins.map((value) => Math.max(0.02, Math.min(1, Number(value) || 0))) : fallbackBins; return (
{values.map((value, index) => (
))}
); } // ─── Toast ───────────────────────────────────────────── let _toastId = 0; const _toastListeners = new Set(); function toast(msg) { const id = _toastId++; _toastListeners.forEach(fn => fn({ id, msg })); } function ToastHost() { const [toasts, setToasts] = useState([]); useEffect(() => { const fn = (t) => { setToasts(prev => [...prev, t]); setTimeout(() => setToasts(prev => prev.filter(x => x.id !== t.id)), 2600); }; _toastListeners.add(fn); return () => _toastListeners.delete(fn); }, []); return toasts.map(t =>
{t.msg}
); } // ─── Modal ───────────────────────────────────────────── function Modal({ title, body, onCancel, onConfirm, confirmLabel = "확인", children }) { useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onCancel?.(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [onCancel]); return (
e.stopPropagation()}>

{title}

{body &&

{body}

} {children}
); } Object.assign(window, { Icon, Waveform, Spectrum, toast, ToastHost, Modal, useState, useEffect, useRef, useMemo, useCallback });