setDragState(null)} onPointerDown={(e) => { if (e.target === containerRef.current) setSelectedTrackId(null); }} style={{ width: '100%', height: '100dvh', backgroundColor: colors.bg, backgroundImage: 'radial-gradient(#ddd 1px, transparent 1px)', backgroundSize: '20px 20px', position: 'relative', overflow: 'hidden', touchAction: 'none', fontFamily: '"Inter", sans-serif', userSelect: 'none' }} > {/* 🚀 HEADER / PLAY CONTROL */}

RHYTHM
TYPE

{/* 🗑️ TRASH ZONES */} {dragState?.type === 'move' && (

DRAG TO EDGE TO REMOVE

)} {/* 📍 FLOATING TRACKS */} {(tracks || []).map(track => (

handlePointerDown(e, track.id)} style={{ position: 'absolute', left: `${track.x}%`, top: `${track.y}%`, transform: 'translate(-50%, -50%)', padding: '12px 20px', background: track.muted ? '#f0f0f0' : colors.bg, border: `3px solid ${selectedTrackId === track.id ? colors.accent : (track.muted ? '#ccc' : colors.fg)}`, boxShadow: selectedTrackId === track.id ? `8px 8px 0px ${colors.accent}` : '4px 4px 0px rgba(0,0,0,0.2)', cursor: 'grab', zIndex: selectedTrackId === track.id ? 50 : 10, transition: dragState?.id === track.id ? 'none' : 'box-shadow 0.2s, border-color 0.2s', opacity: dragState?.id === track.id ? 0.8 : 1, minWidth: 100, textAlign: 'center' }} >

{track.name}

{/* Visual Pulse */} {isPlaying && currentStepMap[track.id] !== undefined && track.pattern[currentStepMap[track.id]] && !track.muted && (

)}

))} {/* 👻 GHOST DRAG ITEM */} {dragState?.type === 'new' && (

{dragState.instrumentType.toUpperCase()}

)} {/* 🎛️ SELECTED TRACK OVERLAY */} {selectedTrack && (

e.stopPropagation()} style={{ position: 'absolute', bottom: 'calc(env(safe-area-inset-bottom, 20px) + 90px)', left: '50%', transform: 'translateX(-50%)', width: '90%', maxWidth: 400, background: colors.bg, border: `3px solid ${colors.fg}`, boxShadow: '0 -4px 20px rgba(0,0,0,0.1)', padding: 20, zIndex: 90, display: 'flex', flexDirection: 'column', gap: 16 }} >

{selectedTrack.name} OPTIONS

{(selectedTrack.pattern || []).map((step, idx) => (

updateSelected('toggleStep', idx)} style={{ flex: 1, height: 40, minWidth: 30, background: step ? colors.fg : 'transparent', border: `2px solid ${colors.fg}`, cursor: 'pointer', position: 'relative' }} > {isPlaying && currentStepMap[selectedTrack.id] === idx && (

)}

))}

SPEED: {selectedTrack.bpm} BPM updateSelected('bpm', parseInt(e.target.value))} style={{ width: '100%', height: 4, background: '#ccc', outline: 'none', marginTop: 8 }} />

STEPS: {selectedTrack.steps}

)} {/* 📦 SIDEBAR / DOCK */}

{['kick', 'snare', 'hat', 'bongo'].map(type => (

handleNewTrackDragStart(e, type)} style={{ width: 60, height: 40, background: '#fff', border: `2px solid ${colors.fg}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 12, cursor: 'grab', boxShadow: '2px 2px 0px rgba(0,0,0,0.1)', userSelect: 'none' }} > {type.toUpperCase()}

))}

{/* Helper text */} {!(tracks || []).length && (

DRAG INSTRUMENTS HERE

)}

); }

RHYTHMTYPE

RHYTHM
TYPE