{/* 🌸 HEADER */}

Coquette Canvas

{isMultiplayer ? `${memberList.length} designing together` : 'Design your dream'}

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

openProfile(m.handle)} style={{ width: 36, height: 36, borderRadius: '50%', border: '2px solid #FFF', boxShadow: '0 2px 5px rgba(0,0,0,0.1)', backgroundImage: `url(${m.avatarUrl})`, backgroundSize: 'cover', backgroundColor: '#FFD1DC' }} /> ))}

{/* 🎨 CANVAS AREA */}

{(localItems || []).map(item => { const creator = getActiveMember(item.createdBy); const isSelected = activeItem === item.id; return (

handlePointerDown(e, item)} style={{ position: 'absolute', left: item.x, top: item.y, transform: `translate(-50%, -50%) rotate(${item.rotation}deg) scale(${isSelected ? item.scale * 1.05 : item.scale})`, zIndex: item.zIndex, cursor: 'grab', transition: dragState?.id === item.id ? 'none' : 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)', touchAction: 'none', }} > {/* Item Content Wrapper */}

{/* CONTENT TYPES */} {item.type === 'charm' && (

{item.content}

)} {item.type === 'note' && (

{item.content} {/* Tape visual */}

)} {item.type === 'image' && (

{item.content}

{item.text && (

{item.text}

)}

)} {/* Creator Badge (Multiplayer) */} {isMultiplayer && creator && item.createdBy !== user.id && (

{creator.displayName}

)} {/* Delete Button (Only when selected) */} {isSelected && (

{ e.stopPropagation(); deleteActiveItem(); }} style={{ position: 'absolute', top: -12, right: -12, width: 24, height: 24, backgroundColor: '#FF6B6B', borderRadius: '50%', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, boxShadow: '0 2px 4px rgba(0,0,0,0.2)', cursor: 'pointer' }} > ✕

)}

); })}

{/* 🪄 BOTTOM CONTROLS */}

{/* 📥 DRAWER / MODAL */} {isDrawerOpen && (

setIsDrawerOpen(false)} style={{ flex: 1, width: '100%' }} />

{mode === 'add-charm' && (

{(CHARMS || []).map((charm, i) => (

addItem('charm', charm)} style={{ aspectRatio: '1', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 32, backgroundColor: '#F9F9F9', borderRadius: 16, cursor: 'pointer' }} > {charm}

))}

)} {mode === 'add-note' && (

setNewItemText(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') addItem('note', newItemText || 'New Note'); }} style={{ flex: 1, height: 48, borderRadius: 12, border: '1px solid #E5E5E5', padding: '0 16px', fontSize: 16, outline: 'none' }} />

)}

)} {/* Global CSS for animations */}

); }