Add Bionic Reading toggle and surface OCR progress phase

- Bionic Reading: bold the leading portion of each word, persisted in
  localStorage with a toolbar toggle.
- Show the reflow progress phase label (e.g. "Reading scanned pages (OCR)…").

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: Eliott Gandiolle

src/App.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
 import { reflowPdf, type ReflowPage } from "./pdf";
 import { fetchPdf } from "./fetchPdf";
+import { bionic } from "./bionic";
 import { Lightbox } from "./Lightbox";
 import { ReadingProgress } from "./ReadingProgress";
 
@@ -9,6 +10,7 @@ const DEFAULT_URL =
 
 const LAST_URL_KEY = "paper-reader:last-url";
 const FONT_SIZE_KEY = "paper-reader:font-size";
+const BIONIC_KEY = "paper-reader:bionic";
 
 // Reader font size in px. Generous default; clamp keeps the line measure sane.
 const DEFAULT_FONT = 21;
@@ -37,6 +39,26 @@ export function App() {
     }
     return DEFAULT_FONT;
   });
+  const [bionicOn, setBionicOn] = useState(() => {
+    try {
+      return localStorage.getItem(BIONIC_KEY) === "1";
+    } catch {
+      return false;
+    }
+  });
+
+  // Persist the Bionic Reading preference across visits.
+  const toggleBionic = useCallback(() => {
+    setBionicOn((prev) => {
+      const next = !prev;
+      try {
+        localStorage.setItem(BIONIC_KEY, next ? "1" : "0");
+      } catch {
+        /* ignore */
+      }
+      return next;
+    });
+  }, []);
 
   // Persist the reader's chosen font size across visits.
   const changeFont = useCallback((delta: number) => {
@@ -60,8 +82,8 @@ export function App() {
       const buf = await fetchPdf(clean);
       setStatus({ state: "loading", done: 0, total: 0, phase: "Parsing pages…" });
       const result = await reflowPdf(buf, {
-        onProgress: (done, total) =>
-          setStatus({ state: "loading", done, total, phase: "Reflowing pages…" }),
+        onProgress: (done, total, phase) =>
+          setStatus({ state: "loading", done, total, phase: phase ?? "Reflowing pages…" }),
       });
       setPages(result);
       setLoadedUrl(clean);
@@ -164,6 +186,14 @@ export function App() {
               A
             </button>
           </div>
+          <button
+            className={`bionic-toggle${bionicOn ? " on" : ""}`}
+            onClick={toggleBionic}
+            aria-pressed={bionicOn}
+            title="Bionic Reading — bold the start of each word to guide the eye"
+          >
+            <b>Bio</b>nic
+          </button>
         </div>
         {status.state === "loading" && (
           <div className="progress">
@@ -199,7 +229,8 @@ export function App() {
                   </figure>
                 );
               }
-              return b.level === "h" ? <h2 key={key}>{b.text}</h2> : <p key={key}>{b.text}</p>;
+              const content = bionicOn ? bionic(b.text) : b.text;
+              return b.level === "h" ? <h2 key={key}>{content}</h2> : <p key={key}>{content}</p>;
             })
           )}
         </article>

src/bionic.tsx

@@ -0,0 +1,34 @@
+import { Fragment, type ReactNode } from "react";
+
+// "Bionic Reading": bold the leading portion of each word so the eye fixates on
+// it and the brain fills in the rest, which many readers find faster and less
+// tiring. Letters only — punctuation, spaces and hyphens split words (so
+// "in-depth" becomes two fixations: "in" + "depth"), apostrophes don't
+// ("don't" stays one word).
+const WORD_RE = /\p{L}[\p{L}\p{M}'’]*/gu;
+
+// Bold the first half of the word, rounding up. Matches the canonical look:
+// focusing→focu, brain→bra, understanding→underst, of→o, the→th.
+const boldLength = (len: number) => Math.ceil(len / 2);
+
+export function bionic(text: string): ReactNode[] {
+  const out: ReactNode[] = [];
+  let last = 0;
+  let key = 0;
+  WORD_RE.lastIndex = 0;
+  let m: RegExpExecArray | null;
+  while ((m = WORD_RE.exec(text))) {
+    if (m.index > last) out.push(text.slice(last, m.index));
+    const word = m[0];
+    const head = boldLength(word.length);
+    out.push(
+      <Fragment key={key++}>
+        <b className="bionic-fix">{word.slice(0, head)}</b>
+        {word.slice(head)}
+      </Fragment>
+    );
+    last = m.index + word.length;
+  }
+  if (last < text.length) out.push(text.slice(last));
+  return out;
+}

src/styles.css

@@ -78,6 +78,27 @@ html, body {
 .fontsize button:disabled { opacity: 0.35; cursor: default; }
 .fontsize .small { font-size: 13px; }
 .fontsize .big { font-size: 18px; }
+
+/* ---- Bionic Reading toggle ---- */
+.bionic-toggle {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fff;
+  color: var(--ink);
+  cursor: pointer;
+  padding: 8px 12px;
+  font-size: 14px;
+  white-space: nowrap;
+}
+.bionic-toggle b { font-weight: 700; }
+.bionic-toggle:hover { background: #f3f4f6; }
+.bionic-toggle.on {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+/* The bolded fixation head; slightly heavier than surrounding text. */
+.bionic-fix { font-weight: 600; }
 .progress {
   max-width: 980px;
   margin: 0 auto;