{/* diagonal stripe texture — telegraphs "placeholder" while still feeling photographic */}

{/* center vignette */}

{/* corner marker */}

{showCaption && (

SMILE · D{day} T{tray}

)}

); } // ────────────────────────────────────────────── // PhotoTag chip — used in Capture viewfinder & cards // ────────────────────────────────────────────── function PhotoTag({ children, color = 'rgba(255,255,255,0.85)', bg = 'rgba(0,0,0,0.55)' }) { return (

{children}

); } // ────────────────────────────────────────────── // Gallery — chronological grid grouped by tray bucket // ────────────────────────────────────────────── function GalleryView({ photos, onOpen, onCompare, onCapture }) { // group by tray const byTray = photos.reduce((acc, p) => { (acc[p.tray] = acc[p.tray] || []).push(p); return acc; }, {}); const trays = Object.keys(byTray).sort((a,b)=>+b-+a); // newest tray first return (

{/* Latest hero */}

Latest capture 13 of 28 captures

D{photos[photos.length-1].day} T{photos[photos.length-1].tray}

{photos[photos.length-1].full}

onCompare(photos[0].id, photos[photos.length-1].id)}>Compare with day 1 }> New capture

{/* By-tray groups */} {trays.map(tray => (

Tray {tray} {byTray[tray].length} photo{byTray[tray].length>1?'s':''}

{byTray[tray].sort((a,b)=>b.day-a.day).map(p => (

onOpen(p.id)} style={{ cursor:'pointer' }}>

{p.tag && (

{p.tag}

)}

Day {p.day}

{p.date}

T{p.tray}

))}

); } // ────────────────────────────────────────────── // Compare — two-photo draggable reveal slider // ────────────────────────────────────────────── function CompareView({ photos, leftId, rightId, onPick }) { const left = photos.find(p => p.id === leftId) || photos[0]; const right = photos.find(p => p.id === rightId) || photos[photos.length-1]; const [pos, setPos] = useStateP(50); // 0..100 — % of width showing LEFT const wrapRef = useRefP(null); const dragging = useRefP(false); const move = (clientX) => { const el = wrapRef.current; if (!el) return; const r = el.getBoundingClientRect(); const x = Math.max(0, Math.min(r.width, clientX - r.left)); setPos(x / r.width * 100); }; useEffectP(() => { const onMove = (e) => { if (!dragging.current) return; e.preventDefault(); const cx = e.touches ? e.touches[0].clientX : e.clientX; move(cx); }; const onUp = () => { dragging.current = false; }; window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp); window.addEventListener('touchmove', onMove, { passive: false }); window.addEventListener('touchend', onUp); return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); window.removeEventListener('touchmove', onMove); window.removeEventListener('touchend', onUp); }; }, []); // picker rail const Rail = ({ value, onChange, label }) => (

{label}

{photos.map(p => { const sel = p.id === value; return ( ); })}

); return (

Side by side Drag the handle

{/* slider */}

{ dragging.current = true; move(e.clientX); }} onTouchStart={(e) => { dragging.current = true; move(e.touches[0].clientX); }} style={{ position:'relative', width:'100%', aspectRatio:'4/5', borderRadius:12, overflow:'hidden', userSelect:'none', touchAction:'none', cursor:'ew-resize' }}> {/* RIGHT photo (full bleed) */}

{/* LEFT photo (clipped) */}

{/* corner badges */}

BEFORE · D{left.day}

AFTER · D{right.day}

{/* handle line */}

{/* handle puck */}

{/* metadata blocks */}

{[left, right].map((p, i) => (

{i === 0 ? 'Before' : 'After'}

Day {p.day}

Tray {p.tray} · {p.date}

))}

onPick({ left: id })} label="Before"/>

onPick({ right: id })} label="After"/>

); } // ────────────────────────────────────────────── // Timeline — large hero photo + horizontal scrubber across all captures // ────────────────────────────────────────────── function TimelineView({ photos, onCompare }) { const [idx, setIdx] = useStateP(photos.length - 1); const p = photos[idx]; const trackRef = useRefP(null); const dragging = useRefP(false); // map index → percent across timeline based on the photo's day, so spacing reflects real treatment const minDay = photos[0].day; const maxDay = photos[photos.length - 1].day; const dayPct = (d) => (d - minDay) / (maxDay - minDay) * 100; const setByX = (clientX) => { const el = trackRef.current; if (!el) return; const r = el.getBoundingClientRect(); const x = Math.max(0, Math.min(r.width, clientX - r.left)); const pct = x / r.width; // pick the photo with nearest dayPct let best = 0, bestDist = Infinity; photos.forEach((ph, i) => { const d = Math.abs(dayPct(ph.day) - pct * 100); if (d < bestDist) { bestDist = d; best = i; } }); setIdx(best); }; useEffectP(() => { const onMove = (e) => { if (!dragging.current) return; const cx = e.touches ? e.touches[0].clientX : e.clientX; setByX(cx); }; const onUp = () => { dragging.current = false; }; window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp); window.addEventListener('touchmove', onMove, { passive: false }); window.addEventListener('touchend', onUp); return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); window.removeEventListener('touchmove', onMove); window.removeEventListener('touchend', onUp); }; }, []); return (

Scrub your smile {idx + 1} of {photos.length}

{/* Hero photo */}

DAY {p.day} TRAY {p.tray}

{p.tag && (

{p.tag.toUpperCase()}

)}

CAPTURED

{p.full}

{Math.round(p.day / PLAN_TOTAL_DAYS * 100)}%

{/* Scrubber */}

{ dragging.current = true; setByX(e.clientX); }} onTouchStart={(e) => { dragging.current = true; setByX(e.touches[0].clientX); }} style={{ position:'relative', height:64, marginTop:14, padding:'14px 0', touchAction:'none', userSelect:'none', cursor:'grab' }}> {/* baseline track */}

{/* progress fill */}

{/* tick marks */} {photos.map((ph, i) => { const sel = i === idx; return (

); })}

{/* day labels */}

Day {minDay} Day {Math.round((minDay+maxDay)/2)} Day {maxDay}

{/* nav buttons */}

Want a side-by-side?

Compare this capture against any earlier photo to see the change clearly.

); } // ────────────────────────────────────────────── // Capture sheet — viewfinder mock with live auto-tag chips // ────────────────────────────────────────────── function CaptureSheet({ onClose, onSave }) { const [stage, setStage] = useStateP('frame'); // frame → captured const today = { day: 84, tray: 14, date: 'May 7', time: '9:41 AM' }; return (

{/* viewfinder */}

{/* top bar */}

FRONT · OPEN SMILE

{/* alignment guide — simple smile arc */}

{/* auto-tag chips */}

AUTO · TRAY {today.tray} DAY {today.day} {today.date} · {today.time}

{/* shutter */} {stage === 'frame' && (

)}

{/* review tray */} {stage === 'captured' && (

Saved with

TRAY {today.tray} DAY {today.day} {today.date} · {today.time}

Tags pulled from your treatment plan. You can edit them anytime.

setStage('frame')}>Retake Add to progress

)}

); } // ────────────────────────────────────────────── // Main screen // ────────────────────────────────────────────── function ScreenProgress({ go }) { const [mode, setMode] = useStateP('gallery'); // gallery | compare | timeline const [capturing, setCapturing] = useStateP(false); const [compareIds, setCompareIds] = useStateP({ left: PROGRESS_PHOTOS[0].id, right: PROGRESS_PHOTOS[PROGRESS_PHOTOS.length-1].id }); const openCompare = (leftId, rightId) => { setCompareIds({ left: leftId, right: rightId }); setMode('compare'); }; return (

Progress

Your smile, over time

{/* mode toggle */}

{[['gallery','Gallery'],['compare','Compare'],['timeline','Timeline']].map(([v,l]) => ( ))}

{mode === 'gallery' && ( openCompare(PROGRESS_PHOTOS[0].id, id)} onCompare={openCompare} onCapture={() => setCapturing(true)} /> )} {mode === 'compare' && ( setCompareIds(prev => ({ ...prev, ...p }))} /> )} {mode === 'timeline' && ( )}

{capturing && setCapturing(false)} onSave={() => setCapturing(false)}/>}

); } Object.assign(window, { ScreenProgress, PROGRESS_PHOTOS, SmilePhoto, PhotoTag });