{label} {typeof value === 'number' ? (Number.isInteger(step || 1) ? value : value.toFixed(2)) : value}{unit || ''}

onChange(parseFloat(e.target.value))} style={{ width: '100%', height: 6, WebkitAppearance: 'none', appearance: 'none', background: `linear-gradient(90deg, ${color || '#7B9E6B'} ${((value - min) / (max - min)) * 100}%, rgba(139,125,107,0.2) ${((value - min) / (max - min)) * 100}%)`, borderRadius: 3, outline: 'none', cursor: 'pointer' }} />

), []); const StepGrid = useCallback(({ bloom }) => { if (!bloom) return null; const steps = bloom.steps || []; const drums = ['kick', 'snare', 'hat', 'perc']; const drumEmojis = { kick: '🥁', snare: '🪘', hat: '🎩', perc: '🔔' }; return (

{(drums || []).map(d => (

{drumEmojis[d]}

{(steps || []).map((s, i) => (

))}

); }, [currentStep, toggleStep]); const MelodyGrid = useCallback(({ bloom }) => { if (!bloom) return null; const pattern = bloom.pattern || []; const pitches = bloom.pitches || []; return (

{(pattern || []).map((active, i) => (

))}

); }, [toggleMelodyStep, changeMelodyPitch]); const BloomEditor = useCallback(({ bloom }) => { if (!bloom) return null; return (

{bloom.emoji}

{bloom.name}

{bloom.type} • {bloom.type === 'rhythm' ? (bloom.bpm + ' BPM') : bloom.type === 'melody' ? (bloom.scale + ' • ' + (bloom.tempo || 120) + ' BPM') : (bloom.waveform || 'sine')}

{bloom.type === 'ambient' && (

✦ Drone Parameters

{['sine', 'triangle', 'sawtooth', 'square'].map(w => ( ))}

{ updateBloomParam(bloom.id, 'baseNote', v); }} unit={' (' + NOTE_NAMES[(bloom.baseNote||60) % 12] + Math.floor((bloom.baseNote||60)/12 - 1) + ')'} /> updateBloomParam(bloom.id, 'detune', v)} unit="¢" /> updateBloomParam(bloom.id, 'filterFreq', v)} unit="Hz" /> updateBloomParam(bloom.id, 'filterQ', v)} /> updateBloomParam(bloom.id, 'lfoRate', v)} unit="Hz" /> updateBloomParam(bloom.id, 'lfoDepth', v)} /> updateBloomParam(bloom.id, 'reverbMix', v)} /> updateBloomParam(bloom.id, 'volume', v)} />

)} {bloom.type === 'rhythm' && (

✦ Step Sequencer

{ updateBloomParam(bloom.id, 'bpm', v); const b = (blooms||[]).find(x=>x.id===bloom.id); if(b && b.playing) { stopNode('bloom_'+b.id); setTimeout(() => { void startRhythm({...b, bpm: v}); }, 80); } }} /> updateBloomParam(bloom.id, 'volume', v)} />

)} {bloom.type === 'melody' && (

✦ Melody Sequencer

{Object.keys(SCALES || {}).map(s => ( ))}

updateBloomParam(bloom.id, 'rootNote', v)} unit={' (' + NOTE_NAMES[(bloom.rootNote||65) % 12] + Math.floor((bloom.rootNote||65)/12 - 1) + ')'} /> { updateBloomParam(bloom.id, 'tempo', v); const b = (blooms||[]).find(x=>x.id===bloom.id); if(b && b.playing) { stopNode('bloom_'+b.id); setTimeout(() => { void startMelody({...b, tempo: v}); }, 80); } }} /> updateBloomParam(bloom.id, 'noteLength', v)} unit="s" /> updateBloomParam(bloom.id, 'filterFreq', v)} unit="Hz" /> updateBloomParam(bloom.id, 'reverbMix', v)} /> updateBloomParam(bloom.id, 'volume', v)} />

)}

); }, [blooms, currentStep, updateBloomParam, toggleStep, toggleMelodyStep, changeMelodyPitch, handleSave, deleteBloom, stopNode, startAmbientDrone, startRhythm, startMelody, restartPlayingBloom, updateState, Slider, StepGrid, MelodyGrid]); const navItems = [ { id: 'sanctuary', emoji: '🌿', label: 'Sanctuary' }, { id: 'blooms', emoji: '🌸', label: 'Blooms' }, { id: 'create', emoji: '✨', label: 'Create' }, { id: 'projects', emoji: '📜', label: 'Projects' } ]; const baseStyle = { minHeight: '100dvh', width: '100%', display: 'flex', flexDirection: 'column', paddingTop: 'env(safe-area-inset-top, 20px)', paddingBottom: 'env(safe-area-inset-bottom, 20px)', background: 'linear-gradient(170deg, #2C1810 0%, #1A2618 30%, #0F1A14 60%, #1A1210 100%)', boxSizing: 'border-box', fontFamily: "'Playfair Display', 'Georgia', serif", color: '#E8DCC8', overflow: 'hidden', position: 'relative' }; return (

{/* Particles */}

{(particles || []).map((p, i) => { const yOff = Math.sin(animTick * 0.03 + i) * 8; const xOff = Math.cos(animTick * 0.02 + i * 0.7) * 5; return (

); })}

{/* Header */}

Melody Bloom

Soundweave

{(memberList || []).slice(0, 3).map((m, i) => (

openProfile(m?.handle)} style={{ width: 30, height: 30, borderRadius: '50%', cursor: 'pointer', background: m?.avatarUrl ? `url(${m.avatarUrl}) center/cover` : 'linear-gradient(135deg, #7B9E6B, #C4A962)', border: '2px solid rgba(196,169,98,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, color: '#fff' }}>{!m?.avatarUrl && (m?.displayName?.[0] ?? '?')}

))}

{/* Nav */}

{(navItems || []).map(n => ( ))}

{/* Content */}

{/* SANCTUARY */} {currentView === 'sanctuary' && (

setHoldActive(true)} onPointerUp={() => setHoldActive(false)} onPointerLeave={() => setHoldActive(false)} onPointerCancel={() => setHoldActive(false)} style={{ position: 'relative', borderRadius: 24, overflow: 'hidden', background: 'linear-gradient(145deg, rgba(43,58,35,0.9) 0%, rgba(26,18,16,0.95) 100%)', border: '1px solid rgba(123,158,107,0.2)', padding: 24, minHeight: 260, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', cursor: 'pointer', transition: 'all 0.3s ease', transform: holdActive ? 'scale(0.97)' : 'scale(1)', boxShadow: holdActive ? '0 0 40px rgba(123,158,107,0.3)' : '0 8px 32px rgba(0,0,0,0.3)' }}>

✦ AI Soundweave Sanctuary ✦

{mood}

Hold to capture • Tap blooms to layer sounds

Creative Energy {energy}%

{(blooms || []).filter(b => b?.playing).map(b => ( {b.emoji} {b.name} ))} {activeCount === 0 && Tap blooms below to begin...}

{holdActive && (

🌿

Soundscape Captured

{activeCount} bloom{activeCount !== 1 ? 's' : ''} • {mood}

)}

{['Verdant Dawn', 'Misty Hollow', 'Golden Hour', 'Night Garden'].map(m => ( ))}

Quick Blooms — Tap to play

{(blooms || []).slice(0, 9).map((b, i) => ( ))}

{activeCount > 0 && ( )}

)} {/* BLOOMS */} {currentView === 'blooms' && (

Sonic Blooms 🌸

Tap to play • Long press to edit sound

{(blooms || []).map((b, i) => (

toggleBloom(b.id)} style={{ width: 48, height: 48, borderRadius: 14, background: `linear-gradient(135deg, ${b.color}44, ${b.color}22)`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 26, flexShrink: 0, boxShadow: b.playing ? `0 0 16px ${b.color}33` : 'none' }}>{b.emoji}

updateState({ selectedBloom: selectedBloom === b.id ? null : b.id })}>

{b.name}

{b.type} • {b.type === 'rhythm' ? (b.bpm + ' BPM') : b.type === 'melody' ? b.scale : b.waveform}

{selectedBloom === b.id && (

✦ {b.type === 'ambient' ? 'Drone Synth' : b.type === 'rhythm' ? 'Step Sequencer' : 'Melody Sequencer'}

{b.type === 'rhythm' && } {b.type === 'melody' && } {b.type === 'ambient' && (

{b.waveform} • {NOTE_NAMES[(b.baseNote||60) % 12]}{Math.floor((b.baseNote||60)/12 - 1)} • Filter: {b.filterFreq}Hz • Reverb: {Math.round((b.reverbMix||0.5)*100)}%

)}

))}

)} {/* CREATE */} {currentView === 'create' && (

Create New Bloom ✨

Choose a sound type to start crafting

{[ { type: 'ambient', emoji: '🌊', title: 'Ambient Drone', desc: 'Layered oscillators with filters, LFO modulation, and reverb. Create evolving pads and textures.', features: ['Waveform selection', 'Filter + resonance', 'LFO modulation', 'Reverb mix'] }, { type: 'rhythm', emoji: '🥁', title: 'Rhythm Pattern', desc: '16-step sequencer with kick, snare, hi-hat, and percussion. Build beats and grooves.', features: ['16-step grid', 'Kick/Snare/Hat/Perc', 'BPM control', 'Randomize'] }, { type: 'melody', emoji: '🎵', title: 'Melody Sequence', desc: 'Pitched step sequencer with scale selection. Create melodies, arps, and bass lines.', features: ['Scale modes', 'Pitch per step', 'Tempo & note length', 'Filter & reverb'] } ].map(t => ( ))} {(blooms || []).length > 0 && (

Your Blooms ({(blooms || []).length})

{(blooms || []).map(b => ( ))}

)}

)} {/* PROJECTS */} {currentView === 'projects' && (

Your Gardens 📜

Creative spaces for your compositions

{(projects || []).map(p => (

{p.name}

{p.tracks} tracks • {p.bpm} BPM • {p.key}

{p.lastEdit}

{Array.from({length: Math.min(p.tracks, 6)}, (_, t) => (

{Array.from({length: 8}, (_, s) => (

0.3 ? 1 : 0 }} /> ))}

))}

)}

{/* Bottom bar */}

0 ? '#7B9E6B' : '#8B7D6B', boxShadow: activeCount > 0 ? '0 0 8px rgba(123,158,107,0.5)' : 'none' }} /> {activeCount > 0 ? 'Audio Active' : 'Ready'}

{activeCount} bloom{activeCount !== 1 ? 's' : ''} • {(blooms || []).length} total

{/* Bloom Editor Bottom Sheet */} {editingBloom && editBloomData && }

); }