); } // ─── Viewfinder mock (neutral placeholder + corner brackets + guide) ──── function Viewfinder({ type, captured = false, style = {} }) { const bracket = { position: 'absolute', width: 26, height: 26, borderColor: captured ? 'rgba(255,255,255,0.7)' : 'var(--stone-400)', borderStyle: 'solid' }; return (

{captured &&

} {/* corner brackets */}

); } // ─── Status ring (composed — kit has no check-circle / alert-circle) ──── function StatusRing({ pass }) { return (

{pass ? : ( )}

); } // ─── Shutter (iOS affordance, amber) ──────────────────────────────────── function Shutter({ onClick }) { const [p, setP] = React.useState(false); return ( ); } function DevSkipPhoto({ onClick }) { return ( ); } // ─── Top nav (back chevron only) ──────────────────────────────────────── function CapNav({ onBack }) { return (

); } function PhotoOverline({ i }) { return (

Photo {i + 1} of 4 · {PHOTOS[i].label}

); } // ─── Intro ────────────────────────────────────────────────────────────── function CaptureIntro({ onReady, onBack }) { return (

Four photos. About 90 seconds.

We’ll guide you through each one — point your phone at your mouth and follow the on-screen frame.

{PHOTOS.map((p, i) => (

{i + 1}

{p.label}

))}

); } // ─── Capture screen ───────────────────────────────────────────────────── function CaptureScreen({ i, onShutter, onDevSkip, onBack }) { return (

{PHOTOS[i].instruction}

{CAP_DEV_TOOLS && }

); } // ─── Review screen ────────────────────────────────────────────────────── function ReviewScreen({ i, pass, onContinue, onRetake, onBack }) { return (

{pass ? 'Looks good.' : 'That photo was a little blurry — let’s try once more.'}

{pass ? (i < 3 ? 'On to the next photo.' : 'That’s the last one.') : 'Hold steady and keep your mouth in the frame.'}

{pass ? : }

); } // ─── Summary ──────────────────────────────────────────────────────────── function CaptureSummary({ onStart, onBack }) { return (

Four photos in.

We’ll analyse them now.

{PHOTOS.map(p => (

{p.label}

))}

); } // ─── AI processing (breathing pulse + rotating status lines, no bar) ──── function AIProcessing({ onDone }) { const LINES = [ 'Reading gingival features…', 'Checking for plaque and recession…', 'Cross-referencing your health profile…', 'Computing your risk score…', ]; const [li, setLi] = React.useState(0); const tapRef = React.useRef([]); const doneRef = React.useRef(null); React.useEffect(() => { const iv = setInterval(() => setLi(x => Math.min(x + 1, LINES.length - 1)), 2200); doneRef.current = setTimeout(onDone, 9200); return () => { clearInterval(iv); clearTimeout(doneRef.current); }; }, []); // DEV: triple-tap the pulse to fast-forward to 1s (skip the wait on repeat demos) const onPulseTap = () => { const now = Date.now(); tapRef.current = [...tapRef.current.filter(t => now - t < 600), now]; if (tapRef.current.length >= 3) { tapRef.current = []; clearTimeout(doneRef.current); doneRef.current = setTimeout(onDone, 1000); } }; return (

Reading your photos

We’re matching your photos against 2.4 million patterns. About 30 seconds.

{LINES[li]}

); } // ─── Controller (history-stack so Back & Retake stay coherent) ────────── function CaptureFlow({ onComplete, onBack, initHist }) { const [hist, setHist] = React.useState(initHist || ['intro']); const [dir, setDir] = React.useState(1); const [attempts, setAttempts] = React.useState({}); const frame = hist[hist.length - 1]; const push = (next) => { setDir(1); setHist(h => [...h, next]); }; const back = () => { if (hist.length > 1) { setDir(-1); setHist(h => h.slice(0, -1)); } else onBack && onBack(); }; const passed = (i) => i !== FAIL_INDEX || (attempts[i] || 0) >= 2; const shutter = (i) => { setAttempts(a => ({ ...a, [i]: (a[i] || 0) + 1 })); push('rev-' + i); }; const afterReview = (i) => { if (i < 3) push('cap-' + (i + 1)); else push('summary'); }; const retake = (i) => push('cap-' + i); const devSkip = (i) => { setAttempts(a => ({ ...a, [i]: 2 })); afterReview(i); }; // auto-pass + advance const render = (key) => { if (key === 'intro') return push('cap-0')} onBack={onBack}/>; if (key === 'summary') return push('processing')} onBack={back}/>; if (key === 'processing') return ; const m = key.match(/^(cap|rev)-(\d+)$/); if (m) { const i = Number(m[2]); if (m[1] === 'cap') return shutter(i)} onDevSkip={() => devSkip(i)} onBack={back}/>; return afterReview(i)} onRetake={() => retake(i)} onBack={back}/>; } return null; }; return (

); } window.MunaCapture = { CaptureFlow };