Sonar has your document

{fileName ? {fileName} is exactly the kind of document Sonar reads. : ''} The full extraction runs inside your ORCA workspace — private, encrypted, and reconciled against your real structure.

Book a demo and we’ll run it on your documents, live.

e.currentTarget.style.filter = 'brightness(.96)'} onMouseLeave={e => { e.currentTarget.style.filter = 'none'; e.currentTarget.style.transform = 'none'; }} onMouseDown={e => e.currentTarget.style.transform = 'scale(.985)'} onMouseUp={e => e.currentTarget.style.transform = 'none'}> Book a demo

); } /* slim top bar with breadcrumb + open-file chip */ function TopBar({ doc, onReset }) { return (

{window.ORCA_SONAR.workspace} Sonar

{doc && (

{doc.file.name} {doc.file.size}

)}

); } function App() { const S = window.ORCA_SONAR; const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [phase, setPhase] = React.useState('idle'); // idle | scan | review const [doc, setDoc] = React.useState(null); // { blocks, file } const [extraction, setExtraction] = React.useState(null); // { docType, fields } const [scanP, setScanP] = React.useState(0); const [revealed, setRevealed] = React.useState(() => new Set()); const [approved, setApproved] = React.useState(() => new Set()); const [activeId, setActiveId] = React.useState(null); const [filed, setFiled] = React.useState(false); const [error, setError] = React.useState(null); const [dragging, setDragging] = React.useState(false); const [booking, setBooking] = React.useState(false); // upload teaser → book-a-demo overlay // demo cursor const [cursor, setCursor] = React.useState({ x: 0, y: 0 }); const [cursorVisible, setCursorVisible] = React.useState(false); const [grab, setGrab] = React.useState(false); const [label, setLabel] = React.useState(''); const runToken = React.useRef(0); const sweepRaf = React.useRef(0); const tourActive = React.useRef(false); const tourCancel = React.useRef(null); const phaseRef = React.useRef(phase); const extractionRef = React.useRef(extraction); const cursorRef = React.useRef(cursor); phaseRef.current = phase; extractionRef.current = extraction; cursorRef.current = cursor; const fields = extraction ? extraction.fields : []; /* ---------- scan animation + reveal ---------- */ const sweep = (dur) => new Promise(res => { cancelAnimationFrame(sweepRaf.current); const t0 = performance.now(); const ease = x => 1 - Math.pow(1 - x, 2); const step = now => { const k = Math.min(1, (now - t0) / dur); setScanP(ease(k)); if (k < 1) sweepRaf.current = requestAnimationFrame(step); else res(); }; sweepRaf.current = requestAnimationFrame(step); }); const sleep = ms => new Promise(r => setTimeout(r, ms)); const runRead = React.useCallback(async (blocks, fileMeta, getResult) => { const token = ++runToken.current; cancelAnimationFrame(sweepRaf.current); setDoc({ blocks, file: fileMeta }); setExtraction(null); setRevealed(new Set()); setApproved(new Set()); setActiveId(null); setFiled(false); setError(null); setScanP(0); setPhase('scan'); sweep(SCAN_MS); // visual sweep (not awaited) let result; try { result = await getResult(); } catch (e) { if (token !== runToken.current) return; setError(e.message || 'Sonar could not read this document.'); setPhase('review'); setScanP(1); return; } if (token !== runToken.current) return; const fs = result.fields.map((f, i) => ({ ...f, id: 'f' + i })); setExtraction({ docType: result.docType, fields: fs }); const stagger = Math.min(440, Math.max(190, 2200 / fs.length)); for (let i = 0; i < fs.length; i++) { if (token !== runToken.current) return; setRevealed(prev => { const n = new Set(prev); n.add(fs[i].id); return n; }); await sleep(stagger); } if (token !== runToken.current) return; await sleep(220); cancelAnimationFrame(sweepRaf.current); setScanP(1); setPhase('review'); }, []); /* ---------- open handlers ---------- */ const openSample = React.useCallback((id) => { const s = S.samples.find(x => x.id === id); if (!s) return; runRead(s.blocks, s.file, async () => s.extraction); }, [runRead, S]); const openFile = React.useCallback(async (file) => { setDragging(false); const token = ++runToken.current; // read the file to blocks so the doc renders as a teaser — then hand off to booking let parsed; try { parsed = await window.SonarExtract.readFile(file); } catch (e) { parsed = { blocks: [{ type: 'p', text: 'Sonar will read this document in your workspace.' }], file: { name: file.name, size: window.SonarExtract.fmtSize(file.size), kind: '' } }; } if (token !== runToken.current) return; cancelAnimationFrame(sweepRaf.current); setDoc({ blocks: parsed.blocks, file: parsed.file }); setExtraction(null); setRevealed(new Set()); setApproved(new Set()); setActiveId(null); setFiled(false); setError(null); setScanP(0); setPhase('scan'); await sweep(SCAN_MS); if (token !== runToken.current) return; await sleep(BOOKING_DELAY_MS); if (token !== runToken.current) return; setBooking(true); }, []); const reset = React.useCallback(() => { runToken.current++; cancelAnimationFrame(sweepRaf.current); setPhase('idle'); setDoc(null); setExtraction(null); setRevealed(new Set()); setApproved(new Set()); setActiveId(null); setFiled(false); setError(null); setScanP(0); setBooking(false); }, []); const toggleApprove = id => setApproved(prev => { const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n; }); const confirmAll = React.useCallback(() => { if (!extractionRef.current) return; setApproved(new Set(extractionRef.current.fields.map(f => f.id))); setFiled(true); }, []); const onFieldHover = id => { if (tourActive.current) return; setActiveId(id); }; /* ---------- user-takeover: stop the tour ---------- */ const stopTour = React.useCallback(() => { if (!tourActive.current) return; tourActive.current = false; setCursorVisible(false); setGrab(false); setLabel(''); if (tourCancel.current) tourCancel.current.v = true; }, []); React.useEffect(() => { const born = performance.now(); const onMove = e => { if (performance.now() - born < 850) return; if (e.movementX === 0 && e.movementY === 0) return; stopTour(); }; const onAny = () => stopTour(); window.addEventListener('pointermove', onMove, { passive: true }); window.addEventListener('pointerdown', onAny, { passive: true }); window.addEventListener('wheel', onAny, { passive: true }); window.addEventListener('keydown', onAny); return () => { window.removeEventListener('pointermove', onMove); window.removeEventListener('pointerdown', onAny); window.removeEventListener('wheel', onAny); window.removeEventListener('keydown', onAny); }; }, [stopTour]); /* ---------- the guided tour ---------- */ React.useEffect(() => { if (!t.autoTour) { setCursorVisible(false); return; } const cancel = { v: false }; tourCancel.current = cancel; let raf = 0; const easo = x => 1 - Math.pow(1 - x, 3); const rectC = sel => { const el = document.querySelector(sel); if (!el) return null; const r = el.getBoundingClientRect(); return { x: r.left + r.width / 2, y: r.top + r.height / 2 }; }; const tween = (dur, fn) => new Promise(res => { const t0 = performance.now(); const step = now => { if (cancel.v) return res(); const k = Math.min(1, (now - t0) / dur); fn(easo(k)); if (k < 1) raf = requestAnimationFrame(step); else res(); }; raf = requestAnimationFrame(step); }); const move = async (target, dur) => { if (!target) return; const from = { ...cursorRef.current }; await tween(dur, e => setCursor({ x: from.x + (target.x - from.x) * e, y: from.y + (target.y - from.y) * e })); }; const waitPhase = async (want, timeout) => { const t0 = performance.now(); while (!cancel.v && phaseRef.current !== want && performance.now() - t0 < timeout) await sleep(120); }; const run = async () => { tourActive.current = true; setCursorVisible(true); setCursor({ x: window.innerWidth * 0.5, y: window.innerHeight * 0.46 }); await sleep(750); if (cancel.v) return; setLabel('Sonar reads any legal document'); await move(rectC('[data-sample-id="spa"]'), 950); if (cancel.v) return; setGrab(true); await sleep(420); if (cancel.v) return; openSample('spa'); setGrab(false); setLabel('Scanning — extracting the data…'); await sleep(400); if (cancel.v) return; await waitPhase('review', 7000); if (cancel.v) return; await sleep(550); if (cancel.v) return; setLabel('Every value is linked to its source'); await move(rectC('[data-field-id="f1"]'), 820); if (cancel.v) return; setActiveId('f1'); await sleep(1650); if (cancel.v) return; await move(rectC('[data-field-id="f4"]'), 720); if (cancel.v) return; setActiveId('f4'); await sleep(1650); if (cancel.v) return; setActiveId(null); await sleep(250); if (cancel.v) return; setLabel('You just check — then file it away'); await move(rectC('[data-tour="confirm"]'), 900); if (cancel.v) return; setGrab(true); await sleep(420); if (cancel.v) return; confirmAll(); setGrab(false); await sleep(1100); if (cancel.v) return; setLabel(''); await sleep(400); tourActive.current = false; setCursorVisible(false); }; const startT = setTimeout(run, 600); return () => { cancel.v = true; clearTimeout(startT); cancelAnimationFrame(raf); }; }, [t.autoTour, openSample, confirmAll]); const scanState = phase === 'scan' ? 'scanning' : (phase === 'idle' ? 'idle' : 'done'); return (

{phase === 'idle' ? : } {phase !== 'idle' && ( )}

{booking && } setTweak('scanStyle', v)} /> setTweak('showConfidence', v)} /> setTweak('autoTour', v)} />

); } ReactDOM.createRoot(document.getElementById('root')).render();