{/* Header */}

Puppetize Me!

Meet your inner muppet ✨

{/* Action Buttons */}

{/* Main Display */}

{activeView === "create" ? ( <>

{/* WOW MOMENT: Poof overlay */} {generating && (

✨💨✨

)}

{/* Source Thumbnail + Status Badge */}

{sourceUrl && sourceUrl !== DEMO_SOURCE_URL ? ( ) : (

👤

)}

{busy && (

{phaseLabel}

)}

{/* Actions Bar overlay */} {resultUrl && !busy && resultUrl !== DEMO_MUPPET_URL ? (

{typeof share === 'function' && ( )}

) : null} ) : (

{(galleryEntries || []).map((entry) => (

setGalleryPreview(entry)} style={{ border: `3px solid ${ds.border}`, borderRadius: "16px", overflow: "hidden", cursor: "pointer", boxShadow: "0 4px 0 rgba(255, 209, 102, 0.3)", transition: "transform 0.1s ease", background: "#fff" }} onPointerDown={(e) => e.currentTarget.style.transform = 'scale(0.95)'} onPointerUp={(e) => e.currentTarget.style.transform = 'scale(1)'} onPointerLeave={(e) => e.currentTarget.style.transform = 'scale(1)'} >

{entry?._user?.displayName || "Anonymous"}

))}

{(galleryEntries || []).length === 0 && (

🤷‍♂️

Gallery of Giggles is empty!

Be the first to add your fuzzy face!

)}

{/* Controls Footer - Fuzzy Fader Sliders */}

{[ { label: "Fuzz Factor 🧶", val: intensityA, set: handleSliderChange(setIntensityA) }, { label: "Puppet Eyes 👀", val: intensityB, set: handleSliderChange(setIntensityB) }, { label: "Expression Energy 🤪", val: intensityC, set: handleSliderChange(setIntensityC) }, ].map((ctrl) => (

{ctrl.label}

ctrl.set(Number(e.target.value))} disabled={busy} style={{ flex: 1 }} />

))}

{/* Notification Area */} {(error || status) ? (

{error || status}

) : null}

{/* Source Preview Modal */} {sourcePreviewOpen && sourceUrl && (

setSourcePreviewOpen(false)} >

e.stopPropagation()} style={{ background: ds.surface, borderRadius: ds.radius, overflow: "hidden", maxWidth: "100%", maxHeight: "80vh", display: "grid", gridTemplateRows: "auto 1fr", boxShadow: "0 20px 40px rgba(0,0,0,0.4)", border: `4px solid ${ds.border}` }} >

Original Photo 📸

)} {/* Gallery Preview Modal */} {galleryPreview && (

setGalleryPreview(null)} >

e.stopPropagation()} style={{ background: ds.surface, borderRadius: ds.radius, overflow: "hidden", width: 400, maxWidth: "100%", maxHeight: "90vh", display: "grid", gridTemplateRows: "auto 1fr auto", boxShadow: "0 20px 40px rgba(0,0,0,0.4)", border: `4px solid ${ds.border}` }} >

{ if(galleryPreview._user?.handle && openProfile) openProfile(galleryPreview._user.handle); }} style={{ cursor: 'pointer' }}> {galleryPreview?._user?.displayName || "Anonymous"}

Fuzz: {galleryPreview.intensityA}% Eyes: {galleryPreview.intensityB}% Energy: {galleryPreview.intensityC}%

)} {/* Hidden File Input */} {hasWebUpload && ( )}

); }