your sanctuary

Common Ground 🌿

🔥 {streak} day{streak !== 1 ? 's' : ''}

{(moodOptions || []).map(m => { const isActive = mood === m.key; const isTapped = localState.tappedMood === m.key; return ( ); })}

tap a bloom to read its story

{(gardenElements || []).map((el, i) => { if (!el) return null; const isNew = localState.animatingId === el.id; const isSelected = selected?.id === el.id; const elScale = el?.scale ?? 1; return (

tapElement(el)} style={{ position: 'absolute', left: (el?.x ?? 50) + '%', top: (el?.y ?? 50) + '%', transform: 'translate(-50%, -50%) scale(' + (isNew ? 0 : isSelected ? elScale * 1.3 : elScale) + ')', fontSize: 32 + (elScale - 1) * 20, cursor: 'pointer', transition: 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)', filter: isSelected ? 'drop-shadow(0 0 12px rgba(255,220,150,0.8))' : 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))', animation: isNew ? 'gardenPop 1s ease forwards' : (el.type === 'firefly' ? 'gardenFloat 3s ease-in-out infinite' : 'none'), animationDelay: isNew ? '0s' : (i * 0.5) + 's', zIndex: isSelected ? 10 : 1, userSelect: 'none' }}> {el?.emoji ?? '🌱'}

); })} {selected && (

setLocalState(s => ({ ...s, selectedElement: null }))} style={{ position: 'absolute', bottom: 16, left: 16, right: 16, background: 'rgba(255,252,240,0.92)', backdropFilter: 'blur(16px)', borderRadius: 20, padding: '16px 18px', boxShadow: '0 8px 32px rgba(74,55,40,0.15)', border: '1px solid rgba(200,180,140,0.3)', zIndex: 20, animation: 'slideUp 0.4s ease', cursor: 'pointer' }}>

{selected?.author ?? 'You'} planted this

{selected?.emoji ?? ''} {selected?.text ?? 'A moment of reflection'}

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

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

0 ? -8 : 0, fontSize: 12, display: 'flex', alignItems: 'center', justifyContent: 'center' }}> {!m?.avatarUrl ? (m?.displayName?.[0] ?? '?') : ''}

))}

)}

{!localState.showAddPanel ? ( ) : (

{Object.entries(typeConfig || {}).map(function(entry) { var key = entry[0]; var cfg = entry[1]; var isActive = localState.reflectionType === key; return ( ); })}

<div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
              <button onClick={() => setLocalState(s => ({ ...s, showAddPanel: false, newReflection: '' }))} style={{
                flex: 1,
                background: 'rgba(0,0,0,0.05)',
                border: '1px solid rgba(0,0,0,0.08)',
                borderRadius: 16,
                padding: '14px',
                fontSize: 15,
                fontFamily: 'inherit',
                color: '#4A3728',
                cursor: 'pointer',
                transition: 'all 0.2s ease'
              }}>
                Cancel
              </button>
              <button onClick={addReflection} style={{
                flex: 2,
                background: 'linear-gradient(135deg, #8B7355, #6B8E5A)',
                border: 'none',
                borderRadius: 16,
                padding: '14px',
                fontSize: 15,
                fontFamily: 'inherit',
                color: '#FFF8EE',
                cursor: 'pointer',
                fontWeight: 'bold',
                letterSpacing: 0.5,
                transition: 'all 0.2s ease',
                opacity: (localState.newReflection ?? '').trim() ? 1 : 0.5
              }}>
                🌱 Plant It
              </button>
            </div>
          </div>
        )}

{(reflections || []).length > 0 && !localState.showAddPanel && (
          <div style={{
            marginTop: 10,
            display: 'flex',
            gap: 8,
            overflowX: 'auto',
            paddingBottom: 4
          }}>
            {(reflections || []).slice(0, 5).map(function(r, i) {
              if (!r) return null;
              var cfg = typeConfig[r?.type] ?? typeConfig.gratitude;
              return (
                <div key={r?.id ?? i} style={{
                  background: 'rgba(255,255,255,0.35)',
                  backdropFilter: 'blur(8px)',
                  borderRadius: 16,
                  padding: '10px 14px',
                  minWidth: 140,
                  maxWidth: 180,
                  border: '1px solid rgba(255,255,255,0.3)',
                  flexShrink: 0
                }}>
                  <div style={{ fontSize: 11, opacity: 0.5, marginBottom: 4 }}>{r?.date ?? ''}</div>
                  <div style={{ fontSize: 14, lineHeight: 1.4 }}>
                    {cfg?.emoji ?? '🌱'} {(r?.text ?? '').length > 40 ? ((r.text || []).slice(0, 40) + '...') : (r?.text ?? '')}
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>