setTouchStart(e.touches[0].clientX)} onTouchEnd={e => { if (touchStart === null) return; const diff = e.changedTouches[0].clientX - touchStart; if (Math.abs(diff) > 60) handleSwipe(diff < 0 ? 'left' : 'right'); setTouchStart(null); }} > {/* Floating lace overlay */}

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

✨

))} {/* Header */}

🎀 decae.diary presents 🎀

{currentShelf.name}

{(shelves || []).map((sh, i) => (

{/* Items Grid - Hero Zone */}

{(shelfItems || []).length === 0 ? (

✨ This shelf awaits your treasures ✨
Tap the ribbon below to curate

) : (

{(shelfItems || []).map((item, idx) => { const it = item ?? {}; return (

{ addSparkle(e.clientX, e.clientY); setOpenCard(it); }} style={{ background: 'linear-gradient(145deg, rgba(255,255,255,0.85), rgba(255,240,245,0.75))', backdropFilter: 'blur(12px)', borderRadius: 20, padding: '18px 14px', border: '1.5px solid rgba(212,165,165,0.3)', boxShadow: '0 4px 20px rgba(212,165,165,0.15), inset 0 1px 0 rgba(255,255,255,0.6)', cursor: 'pointer', animation: `floatIn 0.5s ease ${idx * 0.1}s both`, transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', position: 'relative', overflow: 'hidden', minHeight: idx === 0 && (shelfItems || []).length > 2 ? 160 : 130, gridRow: idx === 0 && (shelfItems || []).length > 2 ? 'span 2' : 'auto' }} onMouseDown={e => e.currentTarget.style.transform = 'scale(0.95)'} onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'} onTouchStart={e => e.currentTarget.style.transform = 'scale(0.95)'} onTouchEnd={e => e.currentTarget.style.transform = 'scale(1)'} > {/* Pearl shimmer */}

●

{it.emoji ?? '🎀'}

{it.title ?? 'Untitled'}

by {it.curator ?? 'anon'}

{'♡'.repeat(Math.min(it.hearts ?? 0, 5))}{(it.hearts ?? 0) > 5 ? '+' : ''}

{/* Category ribbon */}

{categoryEmojis[it.category] ?? '🎀'} {it.category ?? ''}

); })}

)}

{/* Add Button - Bottom */}

swipe to explore shelves ✨

{/* Open Card Modal - Love Letter */} {openCard && (

setOpenCard(null)} style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(107,58,74,0.25)', backdropFilter: 'blur(8px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 50, padding: 24 }}>

e.stopPropagation()} style={{ background: 'linear-gradient(165deg, #fff8f0, #fff0f5, #fce4ec)', borderRadius: 24, padding: '28px 24px', maxWidth: 340, width: '100%', border: '2px solid rgba(212,165,165,0.35)', boxShadow: '0 12px 48px rgba(212,165,165,0.3), inset 0 2px 0 rgba(255,255,255,0.8)', animation: 'unfold 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)', position: 'relative' }}> {/* Decorative corners */}

🎀

{openCard.emoji ?? '🎀'}

{openCard.title ?? ''}

"{openCard.note ?? 'A whispered memory...'}"

— curated by {openCard.curator ?? 'anon'}

)} {/* Add Modal */} {adding && (

setAdding(false)} style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(107,58,74,0.25)', backdropFilter: 'blur(8px)', display: 'flex', alignItems: 'flex-end', justifyContent: 'center', zIndex: 50 }}>

e.stopPropagation()} style={{ background: 'linear-gradient(165deg, #fff8f0, #fff0f5)', borderRadius: '24px 24px 0 0', padding: '24px 20px', paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 16px)', width: '100%', maxHeight: '75vh', overflowY: 'auto', border: '1.5px solid rgba(212,165,165,0.3)', borderBottom: 'none', animation: 'unfold 0.4s ease' }}>

🎀 New Artifact for "{shelves[activeShelf]?.name}" 🎀

{/* Emoji Picker */}

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

{/* Category */}

{Object.entries(categoryEmojis || {}).map(([cat, em]) => ( ))}

{/* Title Input */} setNewItem(p => ({ ...p, title: e.target.value }))} placeholder="Name your artifact..." style={{ width: '100%', padding: '14px 18px', background: 'rgba(255,255,255,0.7)', border: '1.5px solid rgba(212,165,165,0.3)', borderRadius: 16, marginBottom: 12, fontFamily: "'Cormorant Garamond', serif", fontSize: 17, color: '#6b3a4a', outline: 'none', boxSizing: 'border-box' }} /> {/* Note Input */}

setNewItem(p => ({ ...p, note: e.target.value }))}
              placeholder="Whisper its secret story..."
              rows={3}
              style={{
                width: '100%', padding: '14px 18px',
                background: 'rgba(255,255,255,0.7)',
                border: '1.5px solid rgba(212,165,165,0.3)',
                borderRadius: 16, marginBottom: 16,
                fontFamily: "'Cormorant Garamond', serif", fontSize: 16,
                fontStyle: 'italic', color: '#6b3a4a',
                outline: 'none', resize: 'none',
                boxSizing: 'border-box'
              }}
            />
            
            <button onClick={handleAdd} style={{
              width: '100%', padding: '16px',
              background: newItem.title.trim()
                ? 'linear-gradient(135deg, #ffb6c1, #f7e7ce, #ffc0cb)'
                : 'rgba(212,165,165,0.2)',
              border: '2px solid rgba(212,165,165,0.4)',
              borderRadius: 20,
              fontFamily: "'Dancing Script', cursive", fontSize: 20,
              color: newItem.title.trim() ? '#6b3a4a' : '#b07a8a',
              cursor: newItem.title.trim() ? 'pointer' : 'default',
              transition: 'all 0.3s ease',
              boxShadow: newItem.title.trim() ? '0 4px 16px rgba(212,165,165,0.3)' : 'none'
            }}>
              ✨ Place in Cabinet ✨
            </button>
          </div>
        </div>
      )}

{/* Floating decorative elements */}
      {[0,1,2,3,4].map(i => (
        <div key={i} style={{
          position: 'fixed',
          left: `${15 + i * 20}%`,
          top: `${20 + (i % 3) * 25}%`,
          fontSize: 12 + i * 2,
          opacity: 0.08 + i * 0.02,
          pointerEvents: 'none',
          animation: `gentlePulse ${3 + i}s ease infinite ${i * 0.5}s`,
          zIndex: 0
        }}>{['🎀','🌸','✨','💌','🕊️'][i]}</div>
      ))}
    </div>
  );
}</article></body></html>