{/* Ambient dust particles */} {(dustParticles || []).map(p => (

))} {/* Flickering candle glow */}

{/* ═══ ZONE 1: Header / Identity ═══ */}

✦ The Rhythmic Archive ✦

{ownerName}

Scholar of Movement · Keeper of Rhythm

{/* Candle emoji */}

🕯️

{/* ═══ ZONE 2: The Library Shelf (HERO) ═══ */}

{/* Bookshelf */}

{/* Shelf wood grain lines */}

{(books || []).map((book, i) => { const b = book ?? {}; const isOpen = openBook === b.id; const isPulsing = localState?.bookPulse === b.id; return (

handleBookTap(b.id)} style={{ background: `linear-gradient(180deg, ${b.color ?? '#333'}dd, ${b.color ?? '#333'}88)`, borderRadius: 6, padding: '12px 4px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: 90, cursor: 'pointer', border: isOpen ? `2px solid ${mood.accent}` : '1px solid rgba(255,255,255,0.1)', transform: isPulsing ? 'scale(0.9)' : (isOpen ? 'scale(1.05) translateY(-4px)' : 'scale(1)'), transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', boxShadow: isOpen ? `0 8px 24px ${mood.glow}` : '0 2px 8px rgba(0,0,0,0.3)', animation: mounted ? `slideUp 0.5s ease ${0.1 * i}s both` : 'none', position: 'relative', overflow: 'hidden' }} > {/* Gold foil detail */}

{b.spine ?? '📖'}

{b.title ?? 'Untitled'}

); })}

{/* ═══ Opened Book Content ═══ */}

{currentBook ? (

{/* Paper texture lines */} {Array.from({ length: 8 }, (_, i) => (

))} {/* Book type badge */}

{currentBook.type === 'move' ? '💃 Salsa Move' : currentBook.type === 'philosophy' ? '📜 Philosophy' : '📝 Journal'}

{currentBook.title ?? 'Untitled'}

{currentBook.diagram ? (

{currentBook.diagram}

) : null}

{currentBook.content ?? ''}

{/* Close hint */}

tap book again to close

) : (

✦ Tap a book to uncover its secrets ✦

)}

{/* ═══ ZONE 3: Mood Maestro (Phonograph Dial) ═══ */}

Mood Maestro {mood.particle} {mood.label}

{/* Dial track */}

{ if (e.buttons === 1) handleMoodDrag(e); }} style={{ position: 'relative', height: 52, background: 'linear-gradient(90deg, #1a2a4a, #3a1a0a, #4a0a0a)', borderRadius: 26, cursor: 'pointer', overflow: 'hidden', border: '1px solid rgba(255,255,255,0.1)', boxShadow: `inset 0 2px 8px rgba(0,0,0,0.5), 0 0 15px ${mood.glow}` }} > {/* Gradient fill */}

{/* Dial labels */}

🌙 Melancholic

Fiery 🔥

{/* Dial knob */}

🎶

{/* Bottom tagline */}

"Where rhythm meets wisdom" ✦ {new Date().getFullYear()}

); }