{/* HEADER */}

MindBloom 🧠

{user?.avatarUrl ?

: '👤'}

{/* CANVAS */}

{appData.nodes?.map((node) => { const isCore = node.id === 'core'; const isSelected = selectedId === node.id; // Position Logic const targetX = expanded || isCore ? node.x : 50; const targetY = expanded || isCore ? node.y : 50; const scale = isCore ? (expanded ? 1 : 1.5) : (expanded ? 1 : 0); const opacity = expanded || isCore ? 1 : 0; return (

toggleNode(node.id)} style={{ position: 'absolute', left: `${targetX}%`, top: `${targetY}%`, transform: `translate(-50%, -50%) scale(${isSelected ? 1.2 : scale})`, transition: 'all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)', opacity: opacity, zIndex: isCore ? 10 : 5, cursor: 'pointer' }} >

{node.type === 'uni' ? '🎓' : node.type === 'life' ? '🌊' : node.type === 'social' ? '🥂' : isCore ? '✨' : '💡'} {expanded && {node.label}}

{/* Connecting Lines (Visual Hack) */} {expanded && !isCore && (

)}

); })}

{/* INSTRUCTION / STATE TEXT */} {!expanded && (

Tap the sphere to expand your mind

)} {/* DETAIL CARD OVERLAY */}

{selectedNode && ( <>

{selectedNode.label}

{selectedNode.content}

{['Like ❤️', 'Connect 🔗'].map(act => ( ))}

)}

{/* ADD THOUGHT FAB */} {expanded && !selectedNode && (

{isEditing ? ( ) : ( )}

)}

); }