setSwipeStart(e.touches[0]?.clientX ?? null)} onTouchEnd={e => { if (swipeStart === null || composing) return; const diff = (e.changedTouches[0]?.clientX ?? 0) - swipeStart; if (Math.abs(diff) > 60) handleSwipe(diff > 0 ? -1 : 1); setSwipeStart(null); }} > {/* Header */}

✧ whisper canvas ✧

swipe to change vignette · tap notes to reveal · {v.name}

{(memberList || []).length > 1 && (

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

{!m?.avatarUrl && (m?.displayName?.[0] ?? '?')}

))}

)}

{/* Canvas */}

{/* Decorative corner bows */} {['top:8px;left:12px', 'top:8px;right:12px', 'bottom:8px;left:12px', 'bottom:8px;right:12px'].map((pos, i) => (

{ const [k,val] = p.split(':'); return [k, val]; })), fontSize: 18, opacity: 0.4, transform: `rotate(${i * 90}deg)`, animation: `bowPulse 3s ease-in-out ${i * 0.3}s infinite`, pointerEvents: 'none' }}>🎀

))} {/* Sparkle effects */} {(sparkles || []).map(s => (

{s.emoji}

))} {/* Notes */} {(notes || []).map((note, idx) => { if (!note) return null; const isOpen = tappedId === note.id; const isDragging = dragNote === note.id; const noteX = isDragging && dragPos ? dragPos.x : (note.x ?? 30); const noteY = isDragging && dragPos ? dragPos.y : (note.y ?? 30); return (

{ const touch = e.touches[0]; const rect = e.currentTarget.parentElement?.getBoundingClientRect(); if (rect) { setDragNote(note.id); setDragPos({ x: note.x, y: note.y, startX: touch.clientX, startY: touch.clientY, origX: note.x, origY: note.y, rect }); } }} onTouchMove={e => { if (dragNote !== note.id || !dragPos?.rect) return; const touch = e.touches[0]; const dx = ((touch.clientX - dragPos.startX) / dragPos.rect.width) * 100; const dy = ((touch.clientY - dragPos.startY) / dragPos.rect.height) * 100; setDragPos(prev => ({ ...prev, x: Math.max(5, Math.min(75, (prev?.origX ?? 30) + dx)), y: Math.max(5, Math.min(80, (prev?.origY ?? 30) + dy)) })); }} onTouchEnd={e => { if (dragNote !== note.id) return; const movedDist = dragPos ? Math.abs((dragPos.x ?? 0) - (dragPos.origX ?? 0)) + Math.abs((dragPos.y ?? 0) - (dragPos.origY ?? 0)) : 0; if (movedDist < 3) { tapNote(note.id); } else { const updated = (notes || []).map(n => n?.id === note.id ? { ...n, x: dragPos?.x ?? n.x, y: dragPos?.y ?? n.y } : n); saveData({ ...appData, notes: updated, vignetteIdx }); } setDragNote(null); setDragPos(null); }} onClick={() => { if (!dragNote) tapNote(note.id); }} style={{ position: 'absolute', left: `${noteX}%`, top: `${noteY}%`, transform: `rotate(${note.rotation ?? 0}deg) scale(${isOpen ? 1.12 : 1})`, transition: isDragging ? 'none' : 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)', zIndex: isOpen ? 50 : isDragging ? 60 : 10 + idx, cursor: 'pointer', opacity: mounted ? 1 : 0, animationDelay: `${idx * 0.15}s`, animation: mounted ? `noteAppear 0.6s ease-out ${idx * 0.12}s both` : 'none', maxWidth: isOpen ? '70%' : '45%', minWidth: 90, userSelect: 'none', WebkitUserSelect: 'none' }} >

{/* Lace top border */}

{/* Emoji badge */}

{note.emoji ?? '🎀'}

{/* Note text */}

"{note.text ?? ''}"

{/* Author */}

— {note.author ?? 'Anonymous'}

{/* Expanded content */} {isOpen && (

{['🤍', '💕', '✨', '🥺'].map(em => ( ))}

{(note.authorId === (user?.id ?? 'solo') || note.authorId === 'sample') && ( )}

)}

); })} {/* Empty state */} {(notes || []).length === 0 && (

🎀

tap + to leave your first whisper

)}

{/* Vignette indicator */}

{(vignettes || []).map((vig, i) => (

{/* Compose Button */} {!composing && ( )} {/* Compose Modal */} {composing && (

leave a whisper ✧

setNewText(e.target.value)}
            placeholder="Write something delicate..."
            maxLength={120}
            autoFocus
            style={{
              width: '100%', minHeight: 80, border: `1.5px solid ${v.border}40`,
              borderRadius: 16, padding: 14, fontSize: 16,
              fontFamily: 'Georgia, serif', fontStyle: 'italic',
              color: v.accent, background: `${v.pearl}60`,
              resize: 'none', outline: 'none', boxSizing: 'border-box',
              transition: 'border-color 0.3s',
            }}
            onFocus={e => e.target.style.borderColor = v.accent}
            onBlur={e => e.target.style.borderColor = `${v.border}40`}
          />

{/* Emoji picker */}
          <div style={{ display: 'flex', gap: 8, marginTop: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
            {(emojiOptions || []).map(em => (
              <button key={em} onClick={() => setSelectedEmoji(em)} style={{
                width: 42, height: 42, borderRadius: '50%',
                border: selectedEmoji === em ? `2px solid ${v.accent}` : `1.5px solid ${v.border}30`,
                background: selectedEmoji === em ? `${v.pearl}` : 'transparent',
                fontSize: 20, cursor: 'pointer',
                transform: selectedEmoji === em ? 'scale(1.15)' : 'scale(1)',
                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                display: 'flex', alignItems: 'center', justifyContent: 'center'
              }}>{em}</button>
            ))}
          </div>

<div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
            <button onClick={() => { setComposing(false); setNewText(''); }} style={{
              flex: 1, padding: 14, borderRadius: 16,
              border: `1.5px solid ${v.border}40`, background: 'transparent',
              color: v.border, fontSize: 15, fontFamily: 'Georgia, serif',
              cursor: 'pointer', fontStyle: 'italic'
            }}>nevermind</button>
            <button onClick={addNote} style={{
              flex: 2, padding: 14, borderRadius: 16,
              border: 'none',
              background: newText.trim() ? `linear-gradient(135deg, ${v.accent}, ${v.border})` : `${v.border}40`,
              color: '#fff', fontSize: 15, fontFamily: 'Georgia, serif',
              cursor: newText.trim() ? 'pointer' : 'default',
              fontStyle: 'italic', letterSpacing: 1,
              transition: 'all 0.3s ease'
            }}>place whisper ✦</button>
          </div>
        </div>
      )}