{/* Subtle texture overlay */}

{/* Header */}

SOFT CIRCLES

{view === 'canvas' ? 'mood board' : 'gentle growth'}

{/* Canvas View */} {view === 'canvas' && (

{ if (dragging) handleTouchMove(e); }} onMouseUp={handleTouchEnd} style={{ flex: 1, position: 'relative', margin: '24px 0', zIndex: 1, opacity: mounted ? 1 : 0, transition: 'opacity 1s ease 0.3s' }} > {(displayMoments || []).map((moment, i) => { const m = moment ?? {}; const isExpanded = expandedMoment === m.id; return (

handleTouchStart(e, m.id)} onMouseDown={(e) => { e.stopPropagation(); setDragging({ id: m.id, startX: e.clientX, startY: e.clientY }); }} onClick={() => { if (!dragging) setExpandedMoment(isExpanded ? null : m.id); }} style={{ position: 'absolute', left: (m.x ?? 20) + '%', top: (m.y ?? 20) + '%', transform: isExpanded ? 'scale(1.15)' : 'scale(1)', opacity: mounted ? (m.author === 'demo' ? 0.7 : 1) : 0, transition: `all 0.5s cubic-bezier(0.4, 0, 0.2, 1) ${i * 0.12}s`, cursor: 'grab', zIndex: isExpanded ? 10 : (dragging?.id === m.id ? 10 : 1), touchAction: 'none', userSelect: 'none' }} >

{m.emoji ?? '✨'}

{m.label ?? ''}

{isExpanded && m.caption && (

{m.caption}

)} {isExpanded && m.authorName && m.author !== 'demo' && (

— {m.authorName}

)}

); })} {/* Add moment button */}

)} {/* Growth View */} {view === 'growth' && (

{(displayWins || []).length} GENTLE WIN{(displayWins || []).length !== 1 ? 'S' : ''} RECORDED

{[...displayWins].sort((a, b) => (b?.ts ?? 0) - (a?.ts ?? 0)).map((win, i) => { const w = win ?? {}; const isOpen = expandedWin === w.id; return (

setExpandedWin(isOpen ? null : w.id)} style={{ marginBottom: 32, cursor: 'pointer', opacity: mounted ? (w.author === 'demo' ? 0.55 : 0.9) : 0, transform: mounted ? 'translateY(0)' : 'translateY(20px)', transition: `all 0.6s cubic-bezier(0.4, 0, 0.2, 1) ${i * 0.15}s`, paddingBottom: 28, borderBottom: '1px solid rgba(168, 155, 140, 0.06)' }} >

{formatDate(w.ts)}

{w.text ?? ''}

{isOpen && w.note && (

{w.note}

)} {isOpen && w.authorName && w.author !== 'demo' && (

— {w.authorName}

)}

); })}

)} {/* Add Moment Modal */} {addingMoment && (

a new moment

{(emojiOptions || []).map(e => ( ))}

setNewMoment(prev => ({ ...prev, label: e.target.value }))} placeholder="moment name" style={{ background: 'transparent', border: 'none', borderBottom: '1px solid rgba(168,155,140,0.2)', fontFamily: "'Playfair Display', Georgia, serif", fontSize: 20, fontStyle: 'italic', padding: '12px 0', outline: 'none', color: '#2F2F2F', marginBottom: 20, width: '100%' }} /> setNewMoment(prev => ({ ...prev, caption: e.target.value }))} placeholder="a quiet caption" style={{ background: 'transparent', border: 'none', borderBottom: '1px solid rgba(168,155,140,0.12)', fontFamily: "'Helvetica Neue', sans-serif", fontSize: 13, fontWeight: 300, letterSpacing: '0.06em', padding: '12px 0', outline: 'none', color: '#A89B8C', marginBottom: 40, width: '100%' }} />

)} {/* Add Win Modal */} {addingWin && (

a gentle win

setNewWin(prev => ({ ...prev, text: e.target.value }))} placeholder="what happened softly" style={{ background: 'transparent', border: 'none', borderBottom: '1px solid rgba(168,155,140,0.2)', fontFamily: "'Playfair Display', Georgia, serif", fontSize: 20, fontStyle: 'italic', padding: '12px 0', outline: 'none', color: '#2F2F2F', marginBottom: 24, width: '100%' }} />

setNewWin(prev => ({ ...prev, note: e.target.value }))}
            placeholder="a quiet reflection"
            rows={3}
            style={{
              background: 'transparent',
              border: 'none',
              borderBottom: '1px solid rgba(168,155,140,0.12)',
              fontFamily: "'Helvetica Neue', sans-serif",
              fontSize: 13,
              fontWeight: 300,
              letterSpacing: '0.06em',
              padding: '12px 0',
              outline: 'none',
              color: '#A89B8C',
              marginBottom: 40,
              width: '100%',
              resize: 'none',
              lineHeight: 1.7
            }}
          />

<div style={{ display: 'flex', gap: 24 }}>
            <button
              onClick={handleAddWin}
              style={{
                background: 'none', border: 'none', cursor: 'pointer',
                fontFamily: "'Helvetica Neue', sans-serif",
                fontSize: 11, fontWeight: 300, letterSpacing: '0.2em',
                textTransform: 'uppercase', color: '#2F2F2F',
                borderBottom: '1px solid #2F2F2F',
                paddingBottom: 2
              }}
            >record this</button>
            <button
              onClick={() => { setAddingWin(false); setNewWin({ text: '', note: '' }); }}
              style={{
                background: 'none', border: 'none', cursor: 'pointer',
                fontFamily: "'Helvetica Neue', sans-serif",
                fontSize: 11, fontWeight: 300, letterSpacing: '0.2em',
                textTransform: 'uppercase', color: '#A89B8C',
                paddingBottom: 2
              }}
            >not now</button>
          </div>
        </div>
      )}

{/* Footer whisper */}
      <div style={{
        padding: '0 28px 12px',
        fontFamily: "'Helvetica Neue', sans-serif",
        fontSize: 9,
        fontWeight: 300,
        letterSpacing: '0.3em',
        textTransform: 'uppercase',
        color: 'rgba(168, 155, 140, 0.4)',
        textAlign: 'center',
        zIndex: 2
      }}>soft circles — live slow, feel deeply 🤍</div>
    </div>
  );
}</article></body></html>