); }; /* ============================================ STAR RATING ============================================ */ const StarRating = ({ value = 0, max = 5, size = 16, onChange, readonly = false }) => { const [hover, setHover] = React.useState(null); const display = hover !== null ? hover : value; return (

{Array.from({ length: max }).map((_, i) => { const filled = i < Math.round(display); return ( ); })}

); }; /* ============================================ AVATAR ============================================ */ const Avatar = ({ name = '?', size = '', hue }) => { const initials = name.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase(); const style = hue !== undefined ? { background: `linear-gradient(135deg, oklch(0.7 0.18 ${hue}), oklch(0.75 0.16 ${(hue + 60) % 360}))` } : {}; return

{initials}

; }; /* ============================================ TOAST CONTEXT ============================================ */ const ToastCtx = React.createContext(null); function ToastProvider({ children }) { const [toasts, setToasts] = React.useState([]); const push = React.useCallback((msg, type = 'info') => { const id = Date.now() + Math.random(); setToasts(ts => [...ts, { id, msg, type }]); setTimeout(() => setToasts(ts => ts.filter(t => t.id !== id)), 2800); }, []); return ( {children}

{toasts.map(t => (

{t.msg}

))}

); } const useToast = () => React.useContext(ToastCtx); /* ============================================ WAVEFORM ============================================ */ const Waveform = ({ progress = 0.35, markers = [], onSeek }) => { const bars = React.useMemo(() => { // deterministic pseudo-random pattern const arr = []; let seed = 7; for (let i = 0; i < 80; i++) { seed = (seed * 9301 + 49297) % 233280; const r = seed / 233280; const center = 0.5 + 0.4 * Math.sin(i / 6); arr.push(Math.max(0.15, Math.min(1, center * (0.6 + r * 0.8)))); } return arr; }, []); return (

{ const r = e.currentTarget.getBoundingClientRect(); onSeek && onSeek((e.clientX - r.left) / r.width); }}>

{bars.map((h, i) => (

))}

{markers.map(m => (

{m.name} · {m.text}

))}

); }; Object.assign(window, { Icon, Art, StarRating, Avatar, ToastProvider, ToastCtx, useToast, Waveform });