// Main app — orchestrates screens, modal pages, and tweaks. const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "paper", "hero": "editorial", "density": "regular" }/*EDITMODE-END*/; const App = () => { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [screen, setScreen] = React.useState('landing'); // 'landing' | 'analyzing' | 'results' const [page, setPage] = React.useState(null); // modal page key or null const [analysis, setAnalysis] = React.useState(null); const [analyzeError, setAnalyzeError] = React.useState(null); const [filename, setFilename] = React.useState(null); const [darkMode, setDarkMode] = React.useState(() => { try { return localStorage.getItem('ctb-dark') === '1'; } catch { return false; } }); const toggleDark = () => { setDarkMode(d => { const next = !d; try { localStorage.setItem('ctb-dark', next ? '1' : '0'); } catch {} return next; }); }; // Apply theme + density to . Dark-mode toggle wins over the tweaks theme. React.useEffect(() => { const theme = darkMode ? 'ink' : (t.theme || 'paper'); document.documentElement.setAttribute('data-theme', theme); document.documentElement.setAttribute('data-density', t.density || 'regular'); }, [t.theme, t.density, darkMode]); // Keyboard shortcut: Enter on analyzing skips React.useEffect(() => { const k = (e) => { if (screen === 'analyzing' && e.key === 'Enter') setScreen('results'); }; window.addEventListener('keydown', k); return () => window.removeEventListener('keydown', k); }, [screen]); const reset = () => { setScreen('landing'); setPage(null); setAnalysis(null); setAnalyzeError(null); setFilename(null); window.scrollTo(0, 0); }; const onAnalyze = (file) => { setAnalysis(null); setAnalyzeError(null); setFilename(file?.name || null); setScreen('analyzing'); window.scrollTo(0, 0); if (!file) return; // sample path — Analyzing falls back to SAMPLE_BILL const fd = new FormData(); fd.append('file', file); fetch('/api/analyze', { method: 'POST', body: fd }) .then(async (r) => { const data = await r.json().catch(() => ({})); if (!r.ok) { throw new Error( data?.error || 'Analysis is temporarily unavailable. Please try again in a moment.', ); } return data; }) .then((data) => setAnalysis(data)) .catch((err) => { const isOffline = err?.message === 'Failed to fetch' || err?.name === 'TypeError'; setAnalyzeError( isOffline ? 'We could not reach the analysis service. Check your connection and try again.' : String(err?.message || err), ); }); }; return (
); }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render();