// Lumyna design primitives — shared across every screen.
// All styles are object literals to avoid global name collisions.
// Gradient artwork — deterministic from seed. Replaces placeholder colors.
function GradientArt({ seed = 0, size = 38, radius }) {
const palette = [
['#F6C75C','#C74F6F','#5AA8C7'], // warm
['#7C4DBC','#D14B78','#4A93C5'], // magenta
['#3D6FC7','#7742B5','#D14B7A'], // royal
['#5FC78B','#3596C7','#A340C7'], // ocean
['#E38A3B','#C7445E','#6554C7'], // sunset
['#8CC75F','#45B29D','#346C9C'], // moss
['#C77A3B','#89346C','#364B8C'], // amber-purple
['#4FB06B','#C7A63B','#B04F4F'], // field
['#9C4FBC','#3B7DC7','#4FBC88'], // prism
['#C73B70','#7B3BC7','#3BC7AB'], // vivid
];
const colors = palette[seed % palette.length];
const r = radius ?? Math.max(6, size * 0.16);
return (
);
}
// Simplified SF Symbol icons
const Icons = {
chevronLeft: (s = 16, c = 'currentColor') => (
),
chevronRight: (s = 12, c = 'currentColor') => (
),
chevronDown: (s = 14, c = 'currentColor') => (
),
plus: (s = 18, c = 'currentColor') => (
),
ellipsis: (s = 20, c = 'currentColor') => (
),
play: (s = 14, c = 'currentColor') => (
),
pause: (s = 18, c = 'currentColor') => (
),
skipBack: (s = 22, c = 'currentColor') => (
),
skipFwd: (s = 22, c = 'currentColor') => (
),
shuffle: (s = 17, c = 'currentColor') => (
),
repeat: (s = 17, c = 'currentColor') => (
),
star: (s = 18, c = 'currentColor', filled = false) => (
),
info: (s = 18, c = 'currentColor') => (
),
checkmark: (s = 14, c = 'currentColor') => (
),
airplay: (s = 18, c = 'currentColor') => (
),
queue: (s = 18, c = 'currentColor') => (
),
search: (s = 17, c = 'currentColor') => (
),
cog: (s = 17, c = 'currentColor') => (
),
note: (s = 16, c = 'currentColor') => (
),
person2: (s = 18, c = 'currentColor') => (
),
disc: (s = 18, c = 'currentColor') => (
),
listBullet: (s = 18, c = 'currentColor') => (
),
heart: (s = 18, c = 'currentColor', filled = false) => (
),
trash: (s = 17, c = 'currentColor') => (
),
pencil: (s = 16, c = 'currentColor') => (
),
sort: (s = 17, c = 'currentColor') => (
),
equalizer: (s = 16, c = 'currentColor') => (
),
};
// Annotation marker — dashed outline + label.
// Only rendered when the global annotations toggle is on.
function Annot({ children, label, rule, color = '#D58E90', style = {}, placement = 'right' }) {
const pl = {
position: 'relative',
display: 'contents',
...style,
};
return (
);
}
// A simple block-level annotation: a dashed frame around children with a label pill.
function AnnotBox({ children, label, rule, color = '#D58E90', enabled, placement = 'top-right' }) {
if (!enabled) return children;
const pos = {
'top-right': { top: -12, right: 8 },
'top-left': { top: -12, left: 8 },
'bottom-right': { bottom: -12, right: 8 },
'bottom-left': { bottom: -12, left: 8 },
}[placement];
return (
);
}
// Shared glass surface recipe — for the mini player, tab bar, sheets.
function GlassSurface({ children, style = {}, dark = true, strength = 'default', radius = 24 }) {
const tint = strength === 'strong' ? 0.14 : 0.07;
const s = {
position: 'relative',
borderRadius: radius,
overflow: 'hidden',
background: dark ? `rgba(22,24,28,${0.55 + tint})` : `rgba(255,255,255,${0.6 + tint})`,
backdropFilter: 'blur(24px) saturate(180%)',
WebkitBackdropFilter: 'blur(24px) saturate(180%)',
boxShadow: dark
? `inset 0 0.5px 0 rgba(255,255,255,0.10), inset 0 0 0 0.5px rgba(255,255,255,0.06), 0 20px 50px rgba(0,0,0,0.45)`
: `inset 0 0.5px 0 rgba(255,255,255,0.9), inset 0 0 0 0.5px rgba(0,0,0,0.06), 0 10px 30px rgba(0,0,0,0.12)`,
...style,
};
return {children}
;
}
// Rose-tinted "now playing" equalizer ticks.
function EqTicks({ active = true, color }) {
const [t, setT] = React.useState(0);
React.useEffect(() => {
if (!active) return;
const i = setInterval(() => setT(v => v + 1), 140);
return () => clearInterval(i);
}, [active]);
const heights = [
[5, 9, 4, 7], [8, 4, 9, 5], [4, 8, 6, 9], [7, 5, 8, 4],
][t % 4];
return (
{heights.map((h, i) => (
))}