// Sleeve — generates a stylized album cover SVG from a record's palette + type.
// Each sleeve type is a different editorial composition so the browse grid
// reads like a curated shelf, not a pattern generator.
function Sleeve({ record, size = 400 }) {
const [c1, c2, c3] = record.palette;
const { sleeve, artist, title, cat } = record;
const wrap = (content) => (
);
if (sleeve === 'grid') {
return wrap(
<>
{Array.from({ length: 6 }).map((_, i) =>
Array.from({ length: 6 }).map((_, j) => {
const filled = (i * 7 + j * 3 + cat.charCodeAt(4)) % 3 === 0;
return (
);
})
)}
{cat}
{record.year}
{title}
);
}
if (sleeve === 'arc') {
return wrap(
<>
{artist}
{title}
{cat} · {record.label.toUpperCase()}
);
}
if (sleeve === 'sun') {
return wrap(
<>
{Array.from({ length: 32 }).map((_, i) => {
const a = (i / 32) * Math.PI * 2;
const x1 = 200 + Math.cos(a) * 140;
const y1 = 200 + Math.sin(a) * 140;
const x2 = 200 + Math.cos(a) * (160 + (i % 3) * 8);
const y2 = 200 + Math.sin(a) * (160 + (i % 3) * 8);
return ;
})}
{title.split(' ').slice(0, 2).join(' ')}
{artist.toUpperCase()}
);
}
if (sleeve === 'wave') {
return wrap(
<>
{Array.from({ length: 40 }).map((_, i) => (
))}
{artist.split(' ')[0]}
{artist.split(' ').slice(1).join(' ')}
{title}
);
}
if (sleeve === 'concentric') {
return wrap(
<>
{Array.from({ length: 14 }).map((_, i) => (
))}
{cat}
{record.country} · {record.year}
{title}
);
}
if (sleeve === 'portrait') {
return wrap(
<>
{/* abstract portrait shapes */}
{title}
{artist.toUpperCase()}
);
}
return wrap(null);
}
// Tiny waveform — drawn once per track, deterministic.
function Waveform({ seed = 'x', type = 'mid', height = 28, bars = 48, color = 'currentColor', progress = 0 }) {
// poor-man PRNG
let s = 0;
for (let i = 0; i < seed.length; i++) s = (s * 31 + seed.charCodeAt(i)) >>> 0;
const rnd = () => { s = (s * 1664525 + 1013904223) >>> 0; return (s >>> 0) / 0xffffffff; };
const amps = Array.from({ length: bars }).map((_, i) => {
const t = i / bars;
const envelope = Math.sin(t * Math.PI) * 0.8 + 0.2;
const noise = rnd();
const base = type === 'hard' ? 0.6 + noise * 0.4
: type === 'mid' ? 0.3 + noise * 0.5
: 0.15 + noise * 0.35;
return base * envelope;
});
return (
);
}
// Tiny inline icons
const Icon = {
Play: (p) => ,
Pause: (p) => ,
Cart: (p) => ,
Heart: (p) => ,
Search: (p) => ,
Close: (p) => ,
Plus: (p) => ,
Minus: (p) => ,
Arrow: (p) => ,
Back: (p) => ,
};
Object.assign(window, { Sleeve, Waveform, Icon });