// Shared atoms & helpers for Collector Studio
function Tag({ children, color, onClick, active = false, size = 'md' }) {
const pad = size === 'sm' ? '3px 8px' : '5px 12px';
const fs = size === 'sm' ? 10 : 11;
return (
{children}
);
}
function KeyBadge({ k, size = 14 }) {
const isMinor = k && k.endsWith('A');
const empty = !k;
return (
{k || '—'}
);
}
function BpmBadge({ bpm, size = 14 }) {
const empty = bpm == null;
return (
{empty ? '—' : bpm}BPM
);
}
function EnergyDots({ level, size = 6 }) {
return (
{Array.from({ length: 10 }).map((_, i) => (
))}
);
}
function Waveform({ seed = 1, height = 40, width = 200, progress = 0, color }) {
// Deterministic pseudo-random waveform
const bars = 80;
const data = React.useMemo(() => {
let s = seed * 9301 + 49297;
return Array.from({ length: bars }).map((_, i) => {
s = (s * 9301 + 49297) % 233280;
const r = s / 233280;
const envelope = Math.sin((i / bars) * Math.PI) * 0.6 + 0.4;
return 0.3 + r * 0.7 * envelope;
});
}, [seed]);
const c = color || 'var(--fg)';
return (
);
}
function IconButton({ children, onClick, active = false, title, size = 32 }) {
return (
);
}
// Lucide-style icons
const Icon = {
Search: ,
Play: ,
Pause: ,
Plus: ,
Check: ,
Grid: ,
List: ,
Stack: ,
X: ,
Drag: ,
Disc: ,
Deck: ,
Dig: ,
Share: ,
Heart: ,
Settings: ,
Spotify: ,
Discogs: ,
Arrow: ,
Mobile: ,
User: ,
};
Object.assign(window, { Tag, KeyBadge, BpmBadge, EnergyDots, Waveform, IconButton, Icon });