/* reader.jsx — Van Haren book reader: library + reader (highlights, notes, read-aloud) */ function BookCover({ book, w = 116, h = 158, small }) { if (book.cover && /^(data:|https?:|\.{0,2}\/)/.test(book.cover)) { return (
); } return (
{book.title.replace(/ —.*/, "")}
{book.track}
); } function Library({ openBook }) { const [ubooks, setUbooks] = useState([]); useEffect(() => { if (!window.BookStore) return; window.BookStore.list().then(b => setUbooks((b || []).sort((a, c) => (c.created || 0) - (a.created || 0)))).catch(() => {}); }, []); const all = [...ubooks, ...BOOKS]; return (
{all.map(b => ( ))}
); } /* split into sentences */ function sentences(text) { return text.match(/[^.!?]+[.!?]+|\S+$/g) || [text]; } function Reader({ book, back, toast, backLabel, action }) { /* uploaded books carry their own extracted chapters; demo titles use the sample text */ const chapterData = (book.chapters && book.chapters.length && book.chapters[0].paras) ? book.chapters : READER_CHAPTERS; const flat = useMemo(() => { const arr = []; chapterData.forEach((ch, ci) => ch.paras.forEach((p, pi) => sentences(p).forEach((s, si) => { arr.push({ id: ci + "-" + pi + "-" + si, ci, pi, text: s.trim() }); }))); return arr; }, [book]); const N = flat.length; const [hl, setHl] = useState(() => new Set()); const [notes, setNotes] = useState([{ id: "n0", quote: "value is co-created", text: "Use this framing in the Q3 service review deck." }]); const [tab, setTab] = useState("notes"); const [tool, setTool] = useState("read"); // read | highlight const [reading, setReading] = useState(false); const [idx, setIdx] = useState(0); const [rate, setRate] = useState(1); const [noteDraft, setNoteDraft] = useState(""); /* read-aloud voices (Web Speech API) */ const [voices, setVoices] = useState([]); const [voiceURI, setVoiceURI] = useState(() => localStorage.getItem("vhl_voice") || ""); useEffect(() => { if (!window.speechSynthesis) return; const load = () => setVoices(window.speechSynthesis.getVoices() || []); load(); window.speechSynthesis.addEventListener("voiceschanged", load); return () => window.speechSynthesis.removeEventListener("voiceschanged", load); }, []); useEffect(() => { try { localStorage.setItem("vhl_voice", voiceURI); } catch (e) {} }, [voiceURI]); const preferred = voices.filter(v => /^(en|nl|de|fr)/i.test(v.lang)); const voiceList = (preferred.length ? preferred : voices).slice(0, 24); const voiceName = (v) => v.name.replace(/^(Microsoft|Google|Apple)\s*/i, "").replace(/\s*-\s*(English|Dutch|German|French).*$/i, ""); function pickVoice(uri) { setVoiceURI(uri); /* not mid-read: speak a short sample so the choice is audible */ if (!reading && window.speechSynthesis) { try { window.speechSynthesis.cancel(); const u = new SpeechSynthesisUtterance("This is how this voice sounds."); const v = voices.find(x => x.voiceURI === uri); if (v) { u.voice = v; u.lang = v.lang; } u.rate = rate; window.speechSynthesis.speak(u); } catch (e) {} } } const progress = Math.max(book.read || 0, Math.round((idx / N) * 100)); /* read-aloud driver */ useEffect(() => { if (!reading) return; if (idx >= N) { setReading(false); toast("Reached the end of this section", "checkCircle"); return; } const cur = flat[idx]; let spoke = false; try { if (window.speechSynthesis) { window.speechSynthesis.cancel(); const u = new SpeechSynthesisUtterance(cur.text); u.rate = rate; u.pitch = 1; u.volume = 1; const v = voices.find(x => x.voiceURI === voiceURI); if (v) { u.voice = v; u.lang = v.lang; } window.speechSynthesis.speak(u); spoke = true; } } catch (e) {} const words = cur.text.split(/\s+/).length; const dur = Math.max(1100, (words * 300) / rate); const t = setTimeout(() => setIdx(i => i + 1), dur); return () => { clearTimeout(t); if (spoke) try { window.speechSynthesis.cancel(); } catch (e) {} }; }, [reading, idx, rate, voiceURI, voices.length]); useEffect(() => () => { try { window.speechSynthesis && window.speechSynthesis.cancel(); } catch (e) {} }, []); const activeId = reading ? flat[Math.min(idx, N - 1)].id : null; function clickSentence(s) { if (tool === "highlight") { setHl(prev => { const n = new Set(prev); n.has(s.id) ? n.delete(s.id) : n.add(s.id); return n; }); if (!hl.has(s.id)) toast("Highlighted", "highlight"); } else { setIdx(flat.findIndex(f => f.id === s.id)); setReading(true); } } function addNote() { if (!noteDraft.trim()) return; const firstHl = [...hl][0]; const quote = firstHl ? flat.find(f => f.id === firstHl).text : "General note"; setNotes(n => [{ id: "n" + Date.now(), quote: quote.slice(0, 60), text: noteDraft.trim() }, ...n]); setNoteDraft(""); toast("Note saved", "note"); } const speeds = [0.75, 1, 1.25, 1.5]; return (
{/* reader top bar */}

{book.title}

{book.author}
{progress}%
read
{action && }
{/* read-aloud control bar */}
Speed
{speeds.map(s => )}
Voice
Tool
{reading && Reading aloud}
{/* two-pane */}
{/* reading column */}
{book.track}

{book.uploaded ? book.title : "Chapter 1 — A practical foundation"}

{book.author} · est. {book.mins || 14} min

{chapterData.map((ch, ci) => (

{ch.n}. {ch.title}

{ch.paras.map((p, pi) => (

{sentences(p).map((s, si) => { const id = ci + "-" + pi + "-" + si; const isHl = hl.has(id), isActive = activeId === id; return ( clickSentence({ id })} style={{ cursor: "pointer", borderRadius: 4, padding: "1px 0", transition: "background .2s, color .2s", background: isActive ? "color-mix(in oklab,var(--accent),transparent 55%)" : isHl ? "color-mix(in oklab,var(--vh-peach),transparent 35%)" : "transparent", color: isActive ? "var(--ink)" : undefined, boxShadow: isActive ? "0 0 0 3px color-mix(in oklab,var(--accent),transparent 55%)" : "none" }}> {s + " "} ); })}

))}
))}
{/* side panel */}
{tab === "notes" && (