export default function App() { const [text, setText] = useAppStorage('sr_text', '') const [pos, setPos] = useAppStorage('sr_pos', 0) const [wpm, setWpm] = useState(300) const [playing, setPlaying] = useState(false) const taRef = useRef(null) const words = useMemo(() => (text || '').split(/\s+/).filter(Boolean), [text]) const total = words.length const word = pos < total ? words[pos] : '' const intervalMs = Math.max(20, Math.round(60000 / Math.max(50, wpm))) useEffect(() => { if (!playing) return if (pos >= total) { setPlaying(false); return } const t = setTimeout(() => setPos(pos + 1), intervalMs) return () => clearTimeout(t) }, [playing, pos, total, intervalMs]) useEffect(() => { const onKey = (e) => { if (taRef.current && document.activeElement === taRef.current) return if (e.key === ' ') { e.preventDefault(); setPlaying(p => !p) } else if (e.key === 'ArrowLeft') { e.preventDefault(); setPos(Math.max(0, pos - 5)) } else if (e.key === 'ArrowRight') { e.preventDefault(); setPos(Math.min(total, pos + 5)) } } window.addEventListener('keydown', onKey) return () => window.removeEventListener('keydown', onKey) }, [pos, total]) const prev2 = words.slice(Math.max(0, pos - 2), pos) const next2 = words.slice(pos + 1, pos + 3) const pct = total ? Math.round((pos / total) * 100) : 0 const elapsed = total ? Math.round((pos / Math.max(1, wpm)) * 60) : 0 const remaining = total ? Math.round(((total - pos) / Math.max(1, wpm)) * 60) : 0 const counterText = total ? (pos + ' / ' + total + ' words · ' + pct + '%') : 'Paste text below to begin' const isEnd = total > 0 && pos >= total return (

{counterText}

{prev2.join(' ')}

{word || (isEnd ? '— end —' : ' ')}

{next2.join(' ')}

space = play/pause · ← → = ±5 words

{elapsed}s · ~{remaining}s left

WPM setWpm(Number(e.target.value))} className="flex-1 accent-emerald-500" /> {wpm}