Outline: per-chunk outlines, richer points, print and share

- One outline for the whole study plus one per chunk (picker at the top);
  chunk outlines can start from the chunk's verses, each carrying its words
- Points can have a type (illustration, application, quote, question,
  transition), minutes (with a running total), a longer note, verse text
  fetched from a passage, and cross-references / word studies attached from
  the chunk
- Share (system share sheet, or copy), Print / PDF, Copy as text, Word and
  Markdown downloads for any one outline
- All of it included in the Markdown, HTML/PDF and Word study exports,
  with each chunk's outline under that chunk

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

.gitignore

@@ -10,3 +10,4 @@ coverage/
 .api.pid
 .api.log
 .DS_Store
+.env

SUGGESTIONS.md

@@ -1,68 +0,0 @@
-# Study App Improvement Suggestions
-
-_Refreshed 2026-07-06 (multiple passes) — items already shipped have been removed; this reflects what's actually still open. Recent additions: multi-user auth with per-account data scoping, TOTP 2FA with backup codes, podcast terminology generalized to "Session" for study-only users (with a configurable podcast/show name), auto-restore on new devices, study templates (richer OIA guiding prompts), PDF/print export, Markdown export, a passage breadcrumb, whole-Bible search, better bookmark UX (always-visible SVG icons + a jump-to panel), read-only share links, and an admin panel (`server/auth.js` `ADMIN_EMAIL`, hardcoded to the site owner's account) showing every user/project with view/delete controls._
-
-## Features
-
-### Study Tools
-- **Bible comparison mode** — show two translations side-by-side. `availableTranslations` is already fetched and a translation is already selectable per project, but only one renders at a time — no split/parallel view
-- **Verse-level notes** — annotations are still chunk-level only (OIA fields); no way to attach a note to a single verse within a chunk
-- **Progress tracking** — no "in progress"/"complete" marker per chunk and no progress bar on the home project card
-
-### Export / Sharing
-- **Episode length estimate** — Final Script field exists per chunk; a word-count-based "~X minutes read aloud" estimate would help podcast planning
-- **Share link is single-use-case** — one share token per project, all-or-nothing (whole project, all chunks). A per-chunk or per-chapter share might be worth it for someone who only wants to share one episode's notes rather than the whole series
-
-### Chunk Builder (Setup Page)
-- **Drag-to-select verses** — still click-then-shift-click; no click-and-drag range selection
-- **Auto-chunk** — no "split by paragraph/section" button; every chunk boundary is manual or typed
-
----
-
-## UX / UI
-
-### Study Page
-
-### Reader
-- **Bookmark color picker is still an emoji button** (🎨) — the bookmark/copy icons became proper SVGs, but color-cycling didn't get the same treatment
-
-### Home Page
-- Search/filter/sort/rename are all implemented — nothing open here currently
-
----
-
-## Code Architecture
-
-### State Management
-- **`App.jsx` is now ~5,700+ lines** — still one component. Splitting into `pages/HomePage.jsx`, `pages/SetupPage.jsx`, `pages/StudyPage.jsx`, `pages/BibleReaderPage.jsx`, plus extracted hooks (`useProject`, `useGreekLookup`, `useAutosave`) is more valuable now than ever given the continued size growth
-
-### Sync / Persistence
-- No rate-limiting on `/api/auth/*` — a determined attacker could brute-force a weak password or 2FA code; worth adding if this is ever reachable beyond a small trusted group
-- **Conflict resolution is still last-write-wins** — only `lastEdited` timestamps are compared; no "which version do you want to keep?" UI
-- **Offline-first** — still no service worker; app requires a live connection to `bible.helloao.org` for chapter/audio/commentary loads with no cached fallback if that API is down
-
-### Security (OWASP)
-- **No input validation on server** — still no max-length/character validation on `id`/`title` in `server/index.js`
-- **CORS** — still no CORS headers configured
-- **Shared HTML view is sandboxed but not escaped** — `buildExportHtml` interpolates OIA notes into HTML without escaping `<`/`>`/`&`; the public share view mitigates this by rendering in a `sandbox="allow-popups"` iframe (no `allow-scripts`, so injected `<script>`/event handlers can't execute), but the underlying string-building still isn't defense-in-depth. Worth properly HTML-escaping user text in `buildExportHtml` itself
-
----
-
-## Performance
-
-- **Verse data stored in project JSON** — still true; full verse text is saved per chapter in both localStorage and SQLite
-- **Hardcoded external API, no fallback** — audio and commentary both call `bible.helloao.org` directly with no retry UI if the free API is briefly down; whole-Bible search now adds a third hard dependency on this API (`/complete.json`)
-
----
-
-## Testing
-
-- Missing: autosave debounce behavior, DOCX session-list import, cross-ref auto-suggest, commentary loading, and no coverage yet for the newer share-link/2FA/whole-Bible-search flows (all verified manually in-browser instead)
-
----
-
-## Developer Experience
-
-- **No ESLint config** — still true; no `.eslintrc*` or `eslint.config.*` in the repo
-- **No TypeScript** — still true
-- **No `docker-compose.yml`** — still true; Dockerfile exists but no one-command local dev with server + SQLite volume

index.html

@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Bible Study Project</title>
 
     <!-- PWA manifest -->
     <link rel="manifest" href="/manifest.json" />
 
     <!-- Theme / status bar -->
-    <meta name="theme-color" content="#0f172a" />
+    <meta name="theme-color" content="#f1ece0" />
 
     <!-- iOS PWA -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
@@ -20,7 +20,7 @@
     <!-- Fallback icon for browsers -->
     <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png" />
   </head>
-  <body class="bg-slate-50 text-slate-900">
+  <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>

public/logo.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="Bible Study Project">
+  <defs>
+    <radialGradient id="glow" cx="50%" cy="34%" r="45%">
+      <stop offset="0" stop-color="#fbbf24" stop-opacity=".35"/>
+      <stop offset="1" stop-color="#fbbf24" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <rect width="512" height="512" rx="112" fill="#0f172a"/>
+  <rect width="512" height="512" rx="112" fill="url(#glow)"/>
+  <!-- cross -->
+  <rect x="238" y="82" width="36" height="170" rx="6" fill="#fbbf24"/>
+  <rect x="200" y="122" width="112" height="34" rx="6" fill="#fbbf24"/>
+  <!-- open book -->
+  <path d="M256 392 C206 356 146 350 80 366 L80 262 C146 246 206 252 256 286 Z" fill="#f8fafc"/>
+  <path d="M256 392 C306 356 366 350 432 366 L432 262 C366 246 306 252 256 286 Z" fill="#e2e8f0"/>
+  <path d="M60 384 C136 366 206 374 256 414 C306 374 376 366 452 384" fill="none" stroke="#fbbf24" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M256 286 V392" stroke="#0f172a" stroke-width="6" opacity=".35"/>
+</svg>

public/manifest.json

@@ -6,8 +6,8 @@
   "scope": "/",
   "display": "standalone",
   "orientation": "any",
-  "background_color": "#f8fafc",
-  "theme_color": "#0f172a",
+  "background_color": "#faf7f0",
+  "theme_color": "#f1ece0",
   "icons": [
     {
       "src": "/icon-192.png",
@@ -19,7 +19,13 @@
       "src": "/icon-512.png",
       "sizes": "512x512",
       "type": "image/png",
-      "purpose": "any maskable"
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-maskable-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
     }
   ]
 }

public/plan-covers/README.txt

@@ -0,0 +1,18 @@
+Drop a cover photo here for each built-in reading plan, named exactly:
+
+  bible-year.jpg      Whole Bible in a Year
+  bible-90.jpg        Whole Bible in 90 Days
+  nt-90.jpg           New Testament in 90 Days
+  nt-30.jpg           New Testament in 30 Days
+  gospels-30.jpg      The Gospels in 30 Days
+  psalms-30.jpg       Psalms in 30 Days
+  proverbs-31.jpg     Proverbs in 31 Days
+  pentateuch-60.jpg   The Pentateuch in 60 Days
+  wisdom-40.jpg       Wisdom Literature in 40 Days
+
+Landscape orientation, ~1200px wide, works best (cards crop to a 16:9 box).
+Any plan without a matching file just shows its colorful gradient + icon —
+nothing breaks if some are missing.
+
+See src/utils/readingPlans.js -> PIXABAY_SEARCH_LINKS for a Pixabay search
+link per plan to help pick one.

public/sw.js

@@ -1,6 +1,9 @@
-const SHELL = 'bible-shell-v1';
+const SHELL = 'bible-shell-v2';
 const API   = 'bible-api-v1';
-const BIBLE_ORIGINS = ['https://bible.helloao.org', 'https://bolls.life'];
+// Chapter text, interlinear cross-refs, and (BSB) chapter audio all come from
+// these origins — cache them so the reader, reading plans, and audio all keep
+// working offline once you've visited a passage before.
+const BIBLE_ORIGINS = ['https://bible.helloao.org', 'https://bolls.life', 'https://audio.bible.helloao.org'];
 
 self.addEventListener('install', (e) => {
   e.waitUntil(
@@ -24,15 +27,23 @@ self.addEventListener('fetch', (e) => {
   const { request } = e;
   const url = request.url;
 
-  // Never intercept API routes — let Express handle them
-  if (new URL(url).pathname.startsWith('/api/')) return;
+  // Never intercept this app's own API routes — let Express handle them. (Only same-origin ones: the
+  // Bible text at bible.helloao.org/api/... must pass through to the offline cache below.)
+  const { origin, pathname } = new URL(url);
+  if (origin === self.location.origin && pathname.startsWith('/api/')) return;
 
-  // External Bible API: network-first, fall back to cache
+  // External Bible API (text, cross-refs, audio): network-first, fall back to cache.
+  // Audio elements often issue Range requests, which come back as 206 Partial
+  // Content — the Cache API throws on those, so only cache full (200) responses.
   if (BIBLE_ORIGINS.some(o => url.startsWith(o))) {
     e.respondWith(
       fetch(request)
         .then(res => {
-          if (res.ok) caches.open(API).then(c => c.put(request, res.clone()));
+          // Clone *now*: once the page starts reading the body a later clone() throws and nothing is saved.
+          if (res.status === 200) {
+            const copy = res.clone();
+            e.waitUntil(caches.open(API).then(c => c.put(request, copy)).catch(() => {}));
+          }
           return res;
         })
         .catch(() =>
@@ -51,7 +62,10 @@ self.addEventListener('fetch', (e) => {
     e.respondWith(
       fetch(request)
         .then(res => {
-          if (res.ok) caches.open(SHELL).then(c => c.put(request, res.clone()));
+          if (res.ok) {
+            const copy = res.clone();
+            e.waitUntil(caches.open(SHELL).then(c => c.put(request, copy)).catch(() => {}));
+          }
           return res;
         })
         .catch(() =>
@@ -70,7 +84,10 @@ self.addEventListener('fetch', (e) => {
         c.match(request).then(hit => {
           if (hit) return hit;
           return fetch(request).then(res => {
-            if (res.ok) c.put(request, res.clone());
+            if (res.ok) {
+              const copy = res.clone();
+              e.waitUntil(c.put(request, copy).catch(() => {}));
+            }
             return res;
           });
         })

server/bibleApi.js

@@ -0,0 +1,206 @@
+// Proxy for licensed translations (NLT, CSB, NASB) served by api.bible.
+// The API key stays on the server (API_BIBLE_KEY, loaded from .env if present);
+// the browser only ever talks to /api/bible/...
+import { existsSync, readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// Minimal .env loader so the key doesn't have to be exported in every launcher
+// (setup.sh, systemd, docker). Real environment variables win.
+const envPath = join(__dirname, '..', '.env');
+if (existsSync(envPath)) {
+  for (const line of readFileSync(envPath, 'utf8').split('\n')) {
+    const m = line.match(/^\s*([A-Za-z_][A-Za-z0-9_]*)\s*=\s*(.*?)\s*$/);
+    if (m && process.env[m[1]] === undefined) process.env[m[1]] = m[2].replace(/^(['"])(.*)\1$/, '$2');
+  }
+}
+
+const API_BASE = 'https://rest.api.bible/v1';
+
+// Canonical book order (index + 1 = the book number the ESV API uses in ranges).
+const BOOK_ORDER = ['GEN','EXO','LEV','NUM','DEU','JOS','JDG','RUT','1SA','2SA','1KI','2KI','1CH','2CH','EZR','NEH','EST','JOB','PSA','PRO','ECC','SNG','ISA','JER','LAM','EZK','DAN','HOS','JOL','AMO','OBA','JON','MIC','NAM','HAB','ZEP','HAG','ZEC','MAL','MAT','MRK','LUK','JHN','ACT','ROM','1CO','2CO','GAL','EPH','PHP','COL','1TH','2TH','1TI','2TI','TIT','PHM','HEB','JAS','1PE','2PE','1JN','2JN','3JN','JUD','REV'];
+
+// ESV search returns "Psalm 23:1"-style references; map the names back to abbreviations.
+const ESV_NAMES = ['Genesis','Exodus','Leviticus','Numbers','Deuteronomy','Joshua','Judges','Ruth','1 Samuel','2 Samuel','1 Kings','2 Kings','1 Chronicles','2 Chronicles','Ezra','Nehemiah','Esther','Job','Psalm','Proverbs','Ecclesiastes','Song of Solomon','Isaiah','Jeremiah','Lamentations','Ezekiel','Daniel','Hosea','Joel','Amos','Obadiah','Jonah','Micah','Nahum','Habakkuk','Zephaniah','Haggai','Zechariah','Malachi','Matthew','Mark','Luke','John','Acts','Romans','1 Corinthians','2 Corinthians','Galatians','Ephesians','Philippians','Colossians','1 Thessalonians','2 Thessalonians','1 Timothy','2 Timothy','Titus','Philemon','Hebrews','James','1 Peter','2 Peter','1 John','2 John','3 John','Jude','Revelation'];
+const ABBREV_BY_NAME = new Map(ESV_NAMES.map((n, i) => [n.toLowerCase(), BOOK_ORDER[i]]));
+ABBREV_BY_NAME.set('psalms', 'PSA');
+ABBREV_BY_NAME.set('song of songs', 'SNG');
+
+export function parseEsvReference(ref) {
+  const m = String(ref).match(/^(.+?)\s+(\d+):(\d+)/);
+  const bookAbbrev = m && ABBREV_BY_NAME.get(m[1].toLowerCase());
+  return bookAbbrev ? { bookAbbrev, chapter: Number(m[2]), verse: Number(m[3]) } : null;
+}
+
+export const LICENSED_TRANSLATIONS = {
+  ESV: { provider: 'esv', name: 'English Standard Version' },
+  NLT: { provider: 'api.bible', bibleId: 'd6e14a625393b4da-01', name: 'New Living Translation' },
+  CSB: { provider: 'api.bible', bibleId: 'a556c5305ee15c3f-01', name: 'Christian Standard Bible' },
+  NASB: { provider: 'api.bible', bibleId: 'b8ee27bcd1cae43a-01', name: 'New American Standard Bible (1995)' },
+};
+
+const CACHE_TTL = 24 * 60 * 60 * 1000;
+const CACHE_MAX = 1000;
+// Crossway limits how much ESV text an app may store, so ESV chapters are only
+// held briefly and in small numbers (enough to absorb repeat loads).
+const ESV_CACHE_TTL = 60 * 60 * 1000;
+const ESV_CACHE_MAX = 20;
+const cache = new Map(); // "NLT/PSA/23" -> { at, payload }
+
+// api.bible returns plain text with inline "[12]" verse markers, poetry line
+// breaks, and stray "#" / nbsp characters. Split it back into { number, text }.
+export function parseChapterText(content) {
+  const clean = String(content ?? '')
+    .replace(/ /g, ' ')
+    .replace(/#/g, '');
+  const parts = clean.split(/\[(\d+)\]/);
+  const verses = [];
+  for (let i = 1; i < parts.length; i += 2) {
+    const text = parts[i + 1].replace(/\s+/g, ' ').trim().replace(/\s+,$/, '');
+    if (text) verses.push({ number: Number(parts[i]), text });
+  }
+  return verses;
+}
+
+export function registerBibleRoutes(app, requireAuth) {
+  app.get('/api/bible/translations', requireAuth, (_req, res) => {
+    res.json(Object.entries(LICENSED_TRANSLATIONS).map(([id, t]) => ({
+      id, name: t.name, available: Boolean(t.provider === 'esv' ? process.env.ESV_API_KEY : process.env.API_BIBLE_KEY),
+    })));
+  });
+
+  // Whole-Bible search for the licensed translations, proxied so the keys stay
+  // server-side. Results are { bookAbbrev, chapter, verse, text }; nothing is cached.
+  const SEARCH_PAGE_SIZE = 25;
+  app.get('/api/bible/:translation/search', requireAuth, async (req, res) => {
+    const id = req.params.translation.toUpperCase();
+    const translation = LICENSED_TRANSLATIONS[id];
+    const q = String(req.query.q ?? '').trim();
+    const page = Math.max(1, Math.min(200, parseInt(req.query.page, 10) || 1));
+    if (!translation) return res.status(404).json({ error: 'Unknown translation.' });
+    if (q.length < 2 || q.length > 100) return res.status(400).json({ error: 'Search must be 2 to 100 characters.' });
+    const isEsv = translation.provider === 'esv';
+    const apiKey = isEsv ? process.env.ESV_API_KEY : process.env.API_BIBLE_KEY;
+    if (!apiKey) return res.status(503).json({ error: `${isEsv ? 'ESV_API_KEY' : 'API_BIBLE_KEY'} is not configured on the server.` });
+
+    try {
+      let results;
+      let total;
+      if (isEsv) {
+        const qs = new URLSearchParams({ q, 'page-size': String(SEARCH_PAGE_SIZE), page: String(page) });
+        const upstream = await fetch(`https://api.esv.org/v3/passage/search/?${qs}`, { headers: { Authorization: `Token ${apiKey}` } });
+        if (upstream.status === 429) return res.status(429).json({ error: 'ESV rate limit reached. Try again in a minute.' });
+        if (!upstream.ok) return res.status(502).json({ error: `Bible provider returned ${upstream.status}.` });
+        const body = await upstream.json();
+        total = body.total_results ?? 0;
+        results = (body.results ?? []).map((r) => {
+          const ref = parseEsvReference(r.reference);
+          return ref && { ...ref, text: String(r.content ?? '').replace(/<[^>]+>/g, '').trim() };
+        }).filter(Boolean);
+      } else {
+        const qs = new URLSearchParams({ query: q, limit: String(SEARCH_PAGE_SIZE), offset: String((page - 1) * SEARCH_PAGE_SIZE), sort: 'canonical' });
+        const upstream = await fetch(`${API_BASE}/bibles/${translation.bibleId}/search?${qs}`, { headers: { 'api-key': apiKey } });
+        if (!upstream.ok) return res.status(502).json({ error: `Bible provider returned ${upstream.status}.` });
+        const body = await upstream.json();
+        total = body.data?.total ?? 0;
+        results = (body.data?.verses ?? []).map((v) => ({
+          bookAbbrev: v.bookId,
+          chapter: Number(String(v.chapterId).split('.')[1]),
+          verse: Number(String(v.id).split('.')[2]),
+          text: String(v.text ?? '').replace(/<[^>]+>/g, '').replace(/\s+/g, ' ').trim(),
+        })).filter((r) => r.bookAbbrev && r.chapter && r.verse);
+      }
+      res.json({ translation: id, query: q, page, total, hasMore: page * SEARCH_PAGE_SIZE < total, results });
+    } catch {
+      res.status(502).json({ error: 'Could not reach the Bible provider.' });
+    }
+  });
+
+  // ESV chapter audio (read by David Cochran Heath). The ESV API answers with a
+  // redirect to a public mp3; hand that URL to the browser's <audio> element.
+  app.get('/api/bible/ESV/audio/:book/:chapter', requireAuth, async (req, res) => {
+    const { book, chapter } = req.params;
+    const bookNum = BOOK_ORDER.indexOf(book.toUpperCase()) + 1;
+    if (!bookNum || !/^\d{1,3}$/.test(chapter)) return res.status(400).json({ error: 'Invalid book or chapter.' });
+    if (!process.env.ESV_API_KEY) return res.status(503).json({ error: 'ESV_API_KEY is not configured on the server.' });
+    const prefix = String(bookNum).padStart(2, '0') + String(Number(chapter)).padStart(3, '0');
+    try {
+      const upstream = await fetch(`https://api.esv.org/v3/passage/audio/?q=${prefix}001-${prefix}999`, {
+        headers: { Authorization: `Token ${process.env.ESV_API_KEY}` }, redirect: 'manual',
+      });
+      const url = upstream.headers.get('location');
+      if (upstream.status === 429) return res.status(429).json({ error: 'ESV rate limit reached. Try again in a minute.' });
+      if (!url) return res.status(502).json({ error: 'ESV audio is not available for this chapter.' });
+      res.json({ url });
+    } catch {
+      res.status(502).json({ error: 'Could not reach the ESV audio service.' });
+    }
+  });
+
+  app.get('/api/bible/:translation/:book/:chapter', requireAuth, async (req, res) => {
+    const translation = LICENSED_TRANSLATIONS[req.params.translation.toUpperCase()];
+    const { book, chapter } = req.params;
+    if (!translation) return res.status(404).json({ error: 'Unknown translation.' });
+    if (!/^[1-3A-Z]{3}$/i.test(book) || !/^\d{1,3}$/.test(chapter)) {
+      return res.status(400).json({ error: 'Invalid book or chapter.' });
+    }
+    const id = req.params.translation.toUpperCase();
+    const isEsv = translation.provider === 'esv';
+    const apiKey = isEsv ? process.env.ESV_API_KEY : process.env.API_BIBLE_KEY;
+    if (!apiKey) return res.status(503).json({ error: `${isEsv ? 'ESV_API_KEY' : 'API_BIBLE_KEY'} is not configured on the server.` });
+
+    const key = `${id}/${book.toUpperCase()}/${chapter}`;
+    const ttl = isEsv ? ESV_CACHE_TTL : CACHE_TTL;
+    const hit = cache.get(key);
+    if (hit && Date.now() - hit.at < ttl) return res.json(hit.payload);
+
+    try {
+      let payload;
+      if (isEsv) {
+        const bookNum = BOOK_ORDER.indexOf(book.toUpperCase()) + 1;
+        if (!bookNum) return res.status(400).json({ error: 'Invalid book.' });
+        const prefix = String(bookNum).padStart(2, '0') + String(Number(chapter)).padStart(3, '0');
+        const qs = new URLSearchParams({
+          q: `${prefix}001-${prefix}999`,
+          'include-passage-references': 'false', 'include-verse-numbers': 'true', 'include-first-verse-numbers': 'true',
+          'include-footnotes': 'false', 'include-headings': 'false', 'include-short-copyright': 'false',
+          'include-passage-horizontal-lines': 'false', 'include-heading-horizontal-lines': 'false',
+        });
+        const upstream = await fetch(`https://api.esv.org/v3/passage/text/?${qs}`, { headers: { Authorization: `Token ${apiKey}` } });
+        if (upstream.status === 429) return res.status(429).json({ error: 'ESV rate limit reached. Try again in a minute.' });
+        if (!upstream.ok) return res.status(502).json({ error: `Bible provider returned ${upstream.status}.` });
+        const body = await upstream.json();
+        const verses = parseChapterText(body.passages?.[0]);
+        if (verses.length === 0) return res.status(404).json({ error: 'Chapter not found.' });
+        payload = { translation: id, verses, copyright: '', fumsToken: null };
+      } else {
+        const qs = new URLSearchParams({
+          'content-type': 'text', 'include-notes': 'false', 'include-titles': 'false',
+          'include-chapter-numbers': 'false', 'include-verse-numbers': 'true', 'include-verse-spans': 'false',
+        });
+        const upstream = await fetch(
+          `${API_BASE}/bibles/${translation.bibleId}/chapters/${book.toUpperCase()}.${chapter}?${qs}`,
+          { headers: { 'api-key': apiKey } },
+        );
+        if (upstream.status === 404) return res.status(404).json({ error: 'Chapter not found.' });
+        if (!upstream.ok) return res.status(502).json({ error: `Bible provider returned ${upstream.status}.` });
+        const body = await upstream.json();
+        const verses = parseChapterText(body.data?.content);
+        if (verses.length === 0) return res.status(502).json({ error: 'Bible provider returned no verses.' });
+        payload = { translation: id, verses, copyright: body.data?.copyright ?? '', fumsToken: body.meta?.fumsToken ?? null };
+      }
+      const max = isEsv ? ESV_CACHE_MAX : CACHE_MAX;
+      if (cache.size >= CACHE_MAX + ESV_CACHE_MAX) cache.delete(cache.keys().next().value);
+      if (isEsv) {
+        const esvKeys = [...cache.keys()].filter((k) => k.startsWith('ESV/'));
+        if (esvKeys.length >= max) cache.delete(esvKeys[0]);
+      }
+      cache.set(key, { at: Date.now(), payload });
+      res.json(payload);
+    } catch {
+      res.status(502).json({ error: 'Could not reach the Bible provider.' });
+    }
+  });
+}

server/bibleApi.test.js

@@ -0,0 +1,23 @@
+import { test, expect } from 'vitest';
+import { parseChapterText, parseEsvReference } from './bibleApi.js';
+
+test('parseChapterText splits inline verse markers and cleans provider artifacts', () => {
+  const text = '   [1] The Lord is my shepherd;\n  I have what I need.\n   [2] He lets me lie down #— in pastures, ,\n';
+  expect(parseChapterText(text)).toEqual([
+    { number: 1, text: 'The Lord is my shepherd; I have what I need.' },
+    { number: 2, text: 'He lets me lie down — in pastures,' },
+  ]);
+});
+
+test('parseChapterText ignores headings before the first verse', () => {
+  expect(parseChapterText('Psalm 23\n\nA Psalm of David.\n\n[1] The LORD is my shepherd;')).toEqual([
+    { number: 1, text: 'The LORD is my shepherd;' },
+  ]);
+});
+
+test('parseEsvReference maps ESV book names back to abbreviations', () => {
+  expect(parseEsvReference('Psalm 23:1')).toEqual({ bookAbbrev: 'PSA', chapter: 23, verse: 1 });
+  expect(parseEsvReference('1 John 3:16-18')).toEqual({ bookAbbrev: '1JN', chapter: 3, verse: 16 });
+  expect(parseEsvReference('Song of Solomon 2:4')).toEqual({ bookAbbrev: 'SNG', chapter: 2, verse: 4 });
+  expect(parseEsvReference('Not a book 1:1')).toBeNull();
+});

server/db.js

@@ -63,6 +63,22 @@ export function initDb() {
     db.exec('ALTER TABLE users ADD COLUMN podcast_name TEXT');
   }
 
+  // Older databases predate ntfy.sh daily reading reminders.
+  if (!userCols.some((c) => c.name === 'ntfy_url')) {
+    db.exec(`
+      ALTER TABLE users ADD COLUMN ntfy_url TEXT;
+      ALTER TABLE users ADD COLUMN ntfy_topic TEXT;
+      ALTER TABLE users ADD COLUMN reminder_time TEXT;
+      ALTER TABLE users ADD COLUMN reminder_enabled INTEGER NOT NULL DEFAULT 0;
+      ALTER TABLE users ADD COLUMN last_reminder_date TEXT;
+    `);
+  }
+
+  // Reminders fire at the user's own local time, so remember their timezone.
+  if (!userCols.some((c) => c.name === 'reminder_tz')) {
+    db.exec('ALTER TABLE users ADD COLUMN reminder_tz TEXT');
+  }
+
   // Older databases predate shareable read-only links.
   if (!projectCols.some((c) => c.name === 'share_token')) {
     db.exec('ALTER TABLE projects ADD COLUMN share_token TEXT');
@@ -81,6 +97,35 @@ export function initDb() {
     );
   `);
 
+  // Display preferences (theme, default translation, layout, ...) — one row per user.
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS user_prefs (
+      user_id    TEXT PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
+      data       TEXT NOT NULL,
+      updated_at INTEGER NOT NULL
+    );
+  `);
+
+  // Reader bookmarks + text highlights — one row per user (small JSON), so they follow the
+  // user across devices. updated_at lets a device tell whether the server copy is newer.
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS reader_marks (
+      user_id    TEXT PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
+      data       TEXT NOT NULL,
+      updated_at INTEGER NOT NULL
+    );
+  `);
+
+  // Reading plan progress — one row per user, holding the whole list of
+  // in-progress/completed plans as JSON (small; no need to normalize).
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS reading_progress (
+      user_id    TEXT PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
+      data       TEXT NOT NULL,
+      updated_at INTEGER NOT NULL
+    );
+  `);
+
   console.log(`SQLite database ready at ${DB_PATH}`);
 }
 
@@ -115,6 +160,7 @@ function parseUserRow(row) {
   return {
     ...row,
     totpEnabled: !!row.totpEnabled,
+    reminderEnabled: !!row.reminderEnabled,
     backupCodeHashes: row.backupCodesRaw ? JSON.parse(row.backupCodesRaw) : [],
   };
 }
@@ -122,7 +168,9 @@ function parseUserRow(row) {
 const USER_SELECT = `
   SELECT id, email, password_hash AS passwordHash, created_at AS createdAt,
          totp_secret AS totpSecret, totp_enabled AS totpEnabled, backup_codes AS backupCodesRaw,
-         podcast_name AS podcastName
+         podcast_name AS podcastName,
+         ntfy_url AS ntfyUrl, ntfy_topic AS ntfyTopic, reminder_time AS reminderTime,
+         reminder_enabled AS reminderEnabled, last_reminder_date AS lastReminderDate, reminder_tz AS reminderTz
   FROM users
 `;
 
@@ -153,6 +201,33 @@ export function setPodcastName(userId, podcastName) {
   db.prepare('UPDATE users SET podcast_name = ? WHERE id = ?').run(podcastName || null, userId);
 }
 
+// ---------------------------------------------------------------------------
+// Daily reading reminders (sent via ntfy.sh — see server/reminders.js)
+// ---------------------------------------------------------------------------
+
+/** Saves a user's ntfy reminder settings ({ ntfyUrl, ntfyTopic, reminderTime, reminderEnabled }). */
+export function setReminderSettings(userId, { ntfyUrl, ntfyTopic, reminderTime, reminderEnabled, reminderTz }) {
+  db.prepare(`
+    UPDATE users SET ntfy_url = ?, ntfy_topic = ?, reminder_time = ?, reminder_enabled = ?, reminder_tz = ?
+    WHERE id = ?
+  `).run(ntfyUrl || null, ntfyTopic || null, reminderTime || null, reminderEnabled ? 1 : 0, reminderTz || null, userId);
+}
+
+/** Every account with reminders turned on and a topic configured — checked once a minute. */
+export function getUsersWithRemindersEnabled() {
+  return db.prepare(`
+    SELECT id, email, ntfy_url AS ntfyUrl, ntfy_topic AS ntfyTopic, reminder_time AS reminderTime,
+           last_reminder_date AS lastReminderDate, reminder_tz AS reminderTz
+    FROM users
+    WHERE reminder_enabled = 1 AND ntfy_topic IS NOT NULL AND reminder_time IS NOT NULL
+  `).all();
+}
+
+/** Marks that a user's reminder was sent today, so it isn't sent twice. */
+export function setLastReminderDate(userId, dateString) {
+  db.prepare('UPDATE users SET last_reminder_date = ? WHERE id = ?').run(dateString, userId);
+}
+
 /** Rewrites the remaining backup-code hashes after one is used (single-use codes). */
 export function setBackupCodeHashes(userId, backupCodeHashes) {
   db.prepare('UPDATE users SET backup_codes = ? WHERE id = ?').run(JSON.stringify(backupCodeHashes), userId);
@@ -172,6 +247,39 @@ export function getAllReaderInk(userId) {
   );
 }
 
+/** The user's synced preferences: { key: { v, at } } (empty when none saved yet). */
+export function getUserPrefs(userId) {
+  const row = db.prepare('SELECT data FROM user_prefs WHERE user_id = ?').get(userId);
+  return row ? JSON.parse(row.data) : {};
+}
+
+/** Replaces the user's stored preferences with `prefs` ({ key: { v, at } }). */
+export function setUserPrefs(userId, prefs) {
+  db.prepare(`
+    INSERT INTO user_prefs (user_id, data, updated_at) VALUES (?, ?, ?)
+    ON CONFLICT(user_id) DO UPDATE SET data = excluded.data, updated_at = excluded.updated_at
+  `).run(userId, JSON.stringify(prefs), Date.now());
+}
+
+/** The user's bookmarks + highlights: { bookmarks, highlights, updatedAt } (updatedAt 0 = never saved). */
+export function getReaderMarks(userId) {
+  const row = db.prepare('SELECT data, updated_at AS updatedAt FROM reader_marks WHERE user_id = ?').get(userId);
+  if (!row) return { bookmarks: {}, highlights: [], updatedAt: 0 };
+  const data = JSON.parse(row.data);
+  return { bookmarks: data.bookmarks ?? {}, highlights: data.highlights ?? [], updatedAt: row.updatedAt };
+}
+
+/** Replaces the user's bookmarks + highlights; returns the new updatedAt (always moves forward). */
+export function setReaderMarks(userId, { bookmarks, highlights }) {
+  const prev = db.prepare('SELECT updated_at AS updatedAt FROM reader_marks WHERE user_id = ?').get(userId);
+  const updatedAt = Math.max(Date.now(), (prev?.updatedAt ?? 0) + 1);
+  db.prepare(`
+    INSERT INTO reader_marks (user_id, data, updated_at) VALUES (?, ?, ?)
+    ON CONFLICT(user_id) DO UPDATE SET data = excluded.data, updated_at = excluded.updated_at
+  `).run(userId, JSON.stringify({ bookmarks, highlights }), updatedAt);
+  return updatedAt;
+}
+
 /** Upserts the ink strokes for one reader page. */
 export function setReaderInkPage(userId, bookAbbrev, chapter, strokes) {
   db.prepare(`
@@ -182,6 +290,30 @@ export function setReaderInkPage(userId, bookAbbrev, chapter, strokes) {
   `).run(userId, bookAbbrev, Number(chapter), JSON.stringify(strokes), Date.now());
 }
 
+// ---------------------------------------------------------------------------
+// Reading plan progress — cross-device sync for started/completed reading plans
+// ---------------------------------------------------------------------------
+
+/** Returns the user's reading-plan data ({ progress, customPlans }, parsed JSON), or an empty shell. */
+export function getReadingProgress(userId) {
+  const row = db.prepare('SELECT data FROM reading_progress WHERE user_id = ?').get(userId);
+  if (!row) return { progress: [], customPlans: [] };
+  try {
+    return JSON.parse(row.data);
+  } catch {
+    return { progress: [], customPlans: [] };
+  }
+}
+
+/** Overwrites the user's whole reading-plan progress list. */
+export function setReadingProgress(userId, progress) {
+  db.prepare(`
+    INSERT INTO reading_progress (user_id, data, updated_at)
+    VALUES (?, ?, ?)
+    ON CONFLICT(user_id) DO UPDATE SET data = excluded.data, updated_at = excluded.updated_at
+  `).run(userId, JSON.stringify(progress), Date.now());
+}
+
 /**
  * Assigns any pre-existing, unowned projects (from before multi-user support)
  * to the given user. Intended to run once, right after the first account is created.
@@ -221,6 +353,12 @@ export function getProject(id, userId) {
   }
 }
 
+/** The server copy's lastEdited for a project owned by userId, or null when there isn't one. */
+export function getProjectEdited(id, userId) {
+  const row = db.prepare('SELECT last_edited AS lastEdited FROM projects WHERE id = ? AND user_id = ?').get(id, userId);
+  return row ? row.lastEdited : null;
+}
+
 /**
  * Insert or replace a project owned by userId.
  * Returns the summary, or null if the id already belongs to a different user.

server/index.js

@@ -6,13 +6,15 @@ import { randomUUID } from 'crypto';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
 import {
-  initDb, getAllProjects, getProject, upsertProject, deleteProject,
+  initDb, getAllProjects, getProject, getProjectEdited, upsertProject, deleteProject,
   countUsers, createUser, getUserByEmail, getUserById, claimOrphanProjects,
   enableTotp, disableTotp, setBackupCodeHashes, setPodcastName,
   getShareToken, setShareToken, clearShareToken, getProjectByShareToken,
   adminGetAllUsers, adminDeleteUser, adminGetAllProjects, adminGetProject, adminDeleteProject,
   setUserPassword, destroyAllSessionsForUser,
-  getAllReaderInk, setReaderInkPage,
+  getAllReaderInk, setReaderInkPage, getReaderMarks, setReaderMarks, getUserPrefs, setUserPrefs,
+  getReadingProgress, setReadingProgress,
+  setReminderSettings,
 } from './db.js';
 import { SqliteSessionStore } from './sessionStore.js';
 import {
@@ -20,6 +22,21 @@ import {
   generateTotpSecret, totpKeyUri, verifyTotpToken,
   generateBackupCodes, hashBackupCodes, consumeBackupCode, generateTemporaryPassword,
 } from './auth.js';
+import { startReminderScheduler, sendTestReminder, isValidTimeZone } from './reminders.js';
+import { registerBibleRoutes } from './bibleApi.js';
+import { cleanMarks } from './readerMarks.js';
+import { cleanPrefsPatch, mergePrefs } from './prefs.js';
+import { isSaveConflict, parseBase } from './projectSync.js';
+
+// Shape returned to the client for the signed-in user (login, MFA verify, /auth/me).
+function userPayload(user) {
+  return {
+    id: user.id, email: user.email, totpEnabled: user.totpEnabled, podcastName: user.podcastName ?? null,
+    isAdmin: isAdminEmail(user.email),
+    reminderEnabled: user.reminderEnabled, ntfyUrl: user.ntfyUrl ?? null, ntfyTopic: user.ntfyTopic ?? null,
+    reminderTime: user.reminderTime ?? null,
+  };
+}
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const app = express();
@@ -107,7 +124,10 @@ app.post('/api/auth/register', async (req, res) => {
     req.session.regenerate((err) => {
       if (err) return res.status(500).json({ error: 'Could not create session.' });
       req.session.userId = user.id;
-      res.json({ id: user.id, email: user.email, totpEnabled: false, podcastName: null, isAdmin: isAdminEmail(user.email) });
+      res.json({
+        id: user.id, email: user.email, totpEnabled: false, podcastName: null, isAdmin: isAdminEmail(user.email),
+        reminderEnabled: false, ntfyUrl: null, ntfyTopic: null, reminderTime: null,
+      });
     });
   } catch (err) {
     console.error('POST /api/auth/register error:', err);
@@ -136,7 +156,7 @@ app.post('/api/auth/login', async (req, res) => {
         return res.json({ mfaRequired: true });
       }
       req.session.userId = user.id;
-      res.json({ id: user.id, email: user.email, totpEnabled: false, podcastName: user.podcastName ?? null, isAdmin: isAdminEmail(user.email) });
+      res.json(userPayload(user));
     });
   } catch (err) {
     console.error('POST /api/auth/login error:', err);
@@ -175,7 +195,7 @@ app.post('/api/auth/mfa/verify', async (req, res) => {
     req.session.regenerate((err) => {
       if (err) return res.status(500).json({ error: 'Could not create session.' });
       req.session.userId = user.id;
-      res.json({ id: user.id, email: user.email, totpEnabled: true, podcastName: user.podcastName ?? null, isAdmin: isAdminEmail(user.email) });
+      res.json(userPayload(user));
     });
   } catch (err) {
     console.error('POST /api/auth/mfa/verify error:', err);
@@ -193,10 +213,7 @@ app.post('/api/auth/logout', (req, res) => {
 app.get('/api/auth/me', (req, res) => {
   const user = req.session?.userId ? getUserById(req.session.userId) : null;
   if (!user) return res.status(401).json({ error: 'Not signed in.' });
-  res.json({
-    id: user.id, email: user.email, totpEnabled: user.totpEnabled,
-    podcastName: user.podcastName ?? null, isAdmin: isAdminEmail(user.email),
-  });
+  res.json(userPayload(user));
 });
 
 // ---------------------------------------------------------------------------
@@ -213,6 +230,46 @@ app.patch('/api/auth/profile', requireAuth, (req, res) => {
   }
 });
 
+// ---------------------------------------------------------------------------
+// PATCH /api/auth/reminder-settings — daily reading reminder via ntfy.sh
+// ---------------------------------------------------------------------------
+app.patch('/api/auth/reminder-settings', requireAuth, (req, res) => {
+  try {
+    const reminderEnabled = !!req.body?.reminderEnabled;
+    const ntfyTopic = String(req.body?.ntfyTopic ?? '').trim();
+    const ntfyUrl = String(req.body?.ntfyUrl ?? '').trim();
+    const reminderTime = String(req.body?.reminderTime ?? '').trim();
+    const reminderTz = isValidTimeZone(req.body?.reminderTz) ? String(req.body.reminderTz) : null;
+
+    if (ntfyTopic && !/^[A-Za-z0-9_-]{1,64}$/.test(ntfyTopic)) {
+      return res.status(400).json({ error: 'Topic can only contain letters, numbers, "-" and "_".' });
+    }
+    if (ntfyUrl && !/^https?:\/\/.{1,200}$/.test(ntfyUrl)) {
+      return res.status(400).json({ error: 'Server URL must start with http:// or https://.' });
+    }
+    if (reminderEnabled) {
+      if (!ntfyTopic) return res.status(400).json({ error: 'A topic is required to enable reminders.' });
+      if (!/^([01]\d|2[0-3]):[0-5]\d$/.test(reminderTime)) {
+        return res.status(400).json({ error: 'Reminder time must be in HH:MM format.' });
+      }
+    }
+
+    setReminderSettings(req.session.userId, {
+      ntfyUrl: ntfyUrl || null,
+      ntfyTopic: ntfyTopic || null,
+      reminderTime: reminderTime || null,
+      reminderEnabled,
+      reminderTz,
+    });
+    res.json({
+      reminderEnabled, ntfyUrl: ntfyUrl || null, ntfyTopic: ntfyTopic || null, reminderTime: reminderTime || null,
+    });
+  } catch (err) {
+    console.error('PATCH /api/auth/reminder-settings error:', err);
+    res.status(500).json({ error: 'Failed to save reminder settings.' });
+  }
+});
+
 // ---------------------------------------------------------------------------
 // POST /api/auth/change-password — self-service password change (Account Settings)
 // ---------------------------------------------------------------------------
@@ -342,6 +399,11 @@ app.put('/api/projects/:id', requireAuth, (req, res) => {
     }
     if (body.id.length > 100) return res.status(400).json({ error: 'Invalid project id.' });
     if (body.title.length > 500) return res.status(400).json({ error: 'Project title is too long.' });
+    // Refuse to overwrite a copy another device saved after the one this device last saw
+    const stored = getProjectEdited(body.id, req.session.userId);
+    if (isSaveConflict({ stored, base: parseBase(req.get('X-Base-Edited')), force: req.query.force === '1' })) {
+      return res.status(409).json({ error: 'This study was changed on another device.', code: 'conflict', serverEdited: stored });
+    }
     const saved = upsertProject(body, req.session.userId);
     if (!saved) {
       return res.status(403).json({ error: 'That project belongs to a different account.' });
@@ -394,6 +456,108 @@ app.put('/api/reader/ink/:book/:chapter', requireAuth, (req, res) => {
   }
 });
 
+// GET /api/prefs — the user's synced display preferences ({ prefs: { key: { v, at } } })
+app.get('/api/prefs', requireAuth, (req, res) => {
+  try {
+    res.json({ prefs: getUserPrefs(req.session.userId) });
+  } catch (err) {
+    console.error('GET /api/prefs error:', err);
+    res.status(500).json({ error: 'Failed to load preferences.' });
+  }
+});
+
+// PUT /api/prefs — merge changed preferences in (newest change per key wins); returns the result
+app.put('/api/prefs', requireAuth, (req, res) => {
+  try {
+    const merged = mergePrefs(getUserPrefs(req.session.userId), cleanPrefsPatch(req.body));
+    setUserPrefs(req.session.userId, merged);
+    res.json({ prefs: merged });
+  } catch (err) {
+    console.error('PUT /api/prefs error:', err);
+    res.status(500).json({ error: 'Failed to save preferences.' });
+  }
+});
+
+// GET /api/reader/marks — the user's bookmarks + highlights, with an updatedAt to compare against
+app.get('/api/reader/marks', requireAuth, (req, res) => {
+  try {
+    res.json(getReaderMarks(req.session.userId));
+  } catch (err) {
+    console.error('GET /api/reader/marks error:', err);
+    res.status(500).json({ error: 'Failed to load bookmarks and highlights.' });
+  }
+});
+
+// PUT /api/reader/marks — replace the user's bookmarks + highlights ({ bookmarks, highlights })
+app.put('/api/reader/marks', requireAuth, (req, res) => {
+  try {
+    const marks = cleanMarks(req.body);
+    if (!marks) return res.status(400).json({ error: 'Body must be an object.' });
+    res.json({ ok: true, updatedAt: setReaderMarks(req.session.userId, marks) });
+  } catch (err) {
+    console.error('PUT /api/reader/marks error:', err);
+    res.status(500).json({ error: 'Failed to save bookmarks and highlights.' });
+  }
+});
+
+// ---------------------------------------------------------------------------
+// Reading plan progress — cross-device sync for started/completed reading plans
+// ---------------------------------------------------------------------------
+
+// GET /api/reading-plans — the current user's whole progress list
+registerBibleRoutes(app, requireAuth);
+
+app.get('/api/reading-plans', requireAuth, (req, res) => {
+  try {
+    res.json(getReadingProgress(req.session.userId));
+  } catch (err) {
+    console.error('GET /api/reading-plans error:', err);
+    res.status(500).json({ error: 'Failed to load reading plan progress.' });
+  }
+});
+
+// PUT /api/reading-plans — overwrite the current user's whole progress list
+// (an object: { progress: [...], customPlans: [...] })
+app.put('/api/reading-plans', requireAuth, (req, res) => {
+  try {
+    if (!req.body || typeof req.body !== 'object' || Array.isArray(req.body)) {
+      return res.status(400).json({ error: 'Body must be an object.' });
+    }
+    setReadingProgress(req.session.userId, req.body);
+    res.json({ ok: true });
+  } catch (err) {
+    console.error('PUT /api/reading-plans error:', err);
+    res.status(500).json({ error: 'Failed to save reading plan progress.' });
+  }
+});
+
+// POST /api/auth/reminder-test — sends a test notification to the topic in the request
+// body (so it can be tried before saving), or to the saved settings.
+const _lastReminderTest = new Map(); // userId -> timestamp, to keep test sends from being spammed
+app.post('/api/auth/reminder-test', requireAuth, async (req, res) => {
+  const userId = req.session.userId;
+  if (Date.now() - (_lastReminderTest.get(userId) ?? 0) < 5000) {
+    return res.status(429).json({ error: 'Wait a few seconds before sending another test.' });
+  }
+  _lastReminderTest.set(userId, Date.now());
+  const saved = getUserById(userId);
+  const ntfyTopic = String(req.body?.ntfyTopic ?? saved?.ntfyTopic ?? '').trim();
+  const ntfyUrl = String(req.body?.ntfyUrl ?? saved?.ntfyUrl ?? '').trim();
+  if (!ntfyTopic) return res.status(400).json({ error: 'Enter a topic first.' });
+  if (!/^[A-Za-z0-9_-]{1,64}$/.test(ntfyTopic)) {
+    return res.status(400).json({ error: 'Topic can only contain letters, numbers, "-" and "_".' });
+  }
+  if (ntfyUrl && !/^https?:\/\/.{1,200}$/.test(ntfyUrl)) {
+    return res.status(400).json({ error: 'Server URL must start with http:// or https://.' });
+  }
+  try {
+    await sendTestReminder({ ntfyTopic, ntfyUrl });
+    res.json({ ok: true });
+  } catch (err) {
+    res.status(502).json({ error: err.message });
+  }
+});
+
 // ---------------------------------------------------------------------------
 // Read-only share links
 // ---------------------------------------------------------------------------
@@ -545,6 +709,7 @@ if (isProd) {
 // Start
 // ---------------------------------------------------------------------------
 initDb();
+startReminderScheduler();
 app.listen(PORT, () => {
   console.log(`Bible Study API running on http://localhost:${PORT}`);
   if (isProd) {

server/prefs.js

@@ -0,0 +1,57 @@
+// A user's synced display preferences: theme, default Reader translation, verse layout, the
+// commentary they last chose, and where they left off in the Reader. Each preference carries
+// its own timestamp ({ v, at }) so the most recent change to each one wins, device by device.
+const ENUMS = {
+  theme: ['paper', 'sepia', 'dark'],
+  translation: ['BSB', 'ESV', 'NLT', 'CSB', 'NASB', 'NET'],
+  layout: ['flow', 'verses'],
+  startPage: ['studies', 'reader', 'plans'], // where the app opens and where Home buttons go
+  planTranslation: ['same', 'BSB', 'ESV', 'NLT', 'CSB', 'NASB', 'NET'], // which Bible new reading plans start in
+  commentarySource: ['matthew-henry', 'john-gill', 'jamieson-fausset-brown', 'tyndale', 'adam-clarke', 'john-calvin', 'keil-delitzsch'],
+};
+const DAY_MS = 86_400_000;
+const COLOR = /^#[0-9a-fA-F]{3,8}$/;
+
+// A cleaned value, or undefined when it isn't acceptable for that preference.
+export function cleanPrefValue(key, value) {
+  if (ENUMS[key]) return ENUMS[key].includes(value) ? value : undefined;
+  if (key === 'colorLabels') {
+    // What each highlight colour means to the reader: { "#fef08a": "Promises", ... }
+    if (!value || typeof value !== 'object' || Array.isArray(value)) return undefined;
+    const out = {};
+    for (const [color, label] of Object.entries(value).slice(0, 12)) {
+      if (COLOR.test(color) && typeof label === 'string' && label.trim()) out[color] = label.trim().slice(0, 30);
+    }
+    return out;
+  }
+  if (key === 'position') {
+    if (!value || typeof value !== 'object') return undefined;
+    const book = String(value.book ?? '').toUpperCase();
+    if (!/^[1-3A-Z]{3}$/.test(book) || !Number.isInteger(value.chapter) || value.chapter < 1 || value.chapter > 200) return undefined;
+    return { book, chapter: value.chapter };
+  }
+  return undefined;
+}
+
+// Body -> { key: { v, at } } with only known keys, valid values and sane timestamps.
+export function cleanPrefsPatch(body, now = Date.now()) {
+  const out = {};
+  const prefs = body?.prefs;
+  if (!prefs || typeof prefs !== 'object' || Array.isArray(prefs)) return out;
+  for (const [key, entry] of Object.entries(prefs)) {
+    const v = cleanPrefValue(key, entry?.v);
+    const at = entry?.at;
+    if (v === undefined || !Number.isFinite(at) || at < 0 || at > now + DAY_MS) continue;
+    out[key] = { v, at };
+  }
+  return out;
+}
+
+// Per key, the entry with the newer timestamp wins (the stored one on a tie).
+export function mergePrefs(existing = {}, patch = {}) {
+  const merged = { ...existing };
+  for (const [key, entry] of Object.entries(patch)) {
+    if (!merged[key] || entry.at > merged[key].at) merged[key] = entry;
+  }
+  return merged;
+}

server/prefs.test.js

@@ -0,0 +1,69 @@
+// @vitest-environment node
+import { mkdtempSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { test, expect } from 'vitest';
+import { cleanPrefValue, cleanPrefsPatch, mergePrefs } from './prefs.js';
+
+const NOW = 1_800_000_000_000;
+
+test('only known preferences with valid values are accepted', () => {
+  expect(cleanPrefValue('theme', 'dark')).toBe('dark');
+  expect(cleanPrefValue('theme', 'neon')).toBeUndefined();
+  expect(cleanPrefValue('translation', 'ESV')).toBe('ESV');
+  expect(cleanPrefValue('translation', 'KJV')).toBeUndefined();
+  expect(cleanPrefValue('layout', 'flow')).toBe('flow');
+  expect(cleanPrefValue('commentarySource', 'tyndale')).toBe('tyndale');
+  expect(cleanPrefValue('startPage', 'reader')).toBe('reader');
+  expect(cleanPrefValue('startPage', 'admin')).toBeUndefined();
+  expect(cleanPrefValue('planTranslation', 'same')).toBe('same');
+  expect(cleanPrefValue('planTranslation', 'NASB')).toBe('NASB');
+  expect(cleanPrefValue('planTranslation', 'KJV')).toBeUndefined();
+  expect(cleanPrefValue('fontSize', 2)).toBeUndefined(); // not a synced preference
+});
+
+test('position needs a real book and chapter, and the book is normalised', () => {
+  expect(cleanPrefValue('position', { book: 'jhn', chapter: 3 })).toEqual({ book: 'JHN', chapter: 3 });
+  expect(cleanPrefValue('position', { book: 'JOHN', chapter: 3 })).toBeUndefined();
+  expect(cleanPrefValue('position', { book: 'JHN', chapter: 0 })).toBeUndefined();
+  expect(cleanPrefValue('position', { book: 'JHN', chapter: '3' })).toBeUndefined();
+  expect(cleanPrefValue('position', null)).toBeUndefined();
+});
+
+test('cleanPrefsPatch drops unknown keys, bad values and silly timestamps', () => {
+  const patch = cleanPrefsPatch({ prefs: {
+    theme: { v: 'sepia', at: NOW },
+    layout: { v: 'nope', at: NOW },
+    evil: { v: 'x', at: NOW },
+    translation: { v: 'NLT', at: 'yesterday' },
+    commentarySource: { v: 'tyndale', at: NOW + 5 * 86_400_000 }, // far in the future
+    position: { v: { book: 'GEN', chapter: 2 }, at: NOW - 10 },
+  } }, NOW);
+  expect(patch).toEqual({ theme: { v: 'sepia', at: NOW }, position: { v: { book: 'GEN', chapter: 2 }, at: NOW - 10 } });
+  expect(cleanPrefsPatch(null)).toEqual({});
+  expect(cleanPrefsPatch({ prefs: [] })).toEqual({});
+});
+
+test('the newest change to each preference wins, independently', () => {
+  const existing = { theme: { v: 'dark', at: 100 }, layout: { v: 'flow', at: 500 } };
+  const patch = { theme: { v: 'paper', at: 200 }, layout: { v: 'verses', at: 300 }, translation: { v: 'ESV', at: 50 } };
+  expect(mergePrefs(existing, patch)).toEqual({
+    theme: { v: 'paper', at: 200 }, // patch is newer
+    layout: { v: 'flow', at: 500 }, // stored is newer
+    translation: { v: 'ESV', at: 50 }, // new key
+  });
+  expect(mergePrefs({ theme: { v: 'dark', at: 100 } }, { theme: { v: 'paper', at: 100 } }).theme.v).toBe('dark'); // tie keeps stored
+});
+
+test('the database keeps one row per user', async () => {
+  process.env.DATA_DIR = mkdtempSync(join(tmpdir(), 'prefs-'));
+  const db = await import('./db.js');
+  db.initDb();
+  db.createUser({ id: 'u1', email: 'a@example.test', passwordHash: 'x' });
+  db.createUser({ id: 'u2', email: 'b@example.test', passwordHash: 'x' });
+  expect(db.getUserPrefs('u1')).toEqual({});
+  db.setUserPrefs('u1', { theme: { v: 'dark', at: 1 } });
+  db.setUserPrefs('u1', { theme: { v: 'sepia', at: 2 } });
+  expect(db.getUserPrefs('u1')).toEqual({ theme: { v: 'sepia', at: 2 } });
+  expect(db.getUserPrefs('u2')).toEqual({});
+});

server/projectSync.js

@@ -0,0 +1,18 @@
+// Stops one device from silently overwriting a study another device has saved since. The browser sends
+// the `lastEdited` of the server copy it last saw (X-Base-Edited); if the server's copy has moved past
+// that, the save is refused with 409 and the person chooses whose version to keep.
+
+// stored: the server copy's lastEdited (null when there is none); base: what the client last saw
+// (null/undefined when it never synced this study); force: the person chose "keep mine".
+export function isSaveConflict({ stored, base, force = false }) {
+  if (force || stored == null) return false;
+  if (!Number.isFinite(base)) return false; // a device that never saw the server's copy has nothing to compare
+  return stored > base;
+}
+
+// Reads the base header; anything that isn't a plain number is treated as "unknown".
+export function parseBase(header) {
+  if (header == null || header === '') return null;
+  const n = Number(header);
+  return Number.isFinite(n) ? n : null;
+}

server/projectSync.test.js

@@ -0,0 +1,24 @@
+import { expect, test } from 'vitest';
+import { isSaveConflict, parseBase } from './projectSync.js';
+
+test('a save is fine when the server copy is no newer than what the device last saw', () => {
+  expect(isSaveConflict({ stored: 100, base: 100 })).toBe(false);
+  expect(isSaveConflict({ stored: 90, base: 100 })).toBe(false);
+});
+
+test('a save conflicts when another device saved after the one this device last saw', () => {
+  expect(isSaveConflict({ stored: 200, base: 100 })).toBe(true);
+});
+
+test('first saves, unknown bases and "keep mine" never conflict', () => {
+  expect(isSaveConflict({ stored: null, base: 100 })).toBe(false);
+  expect(isSaveConflict({ stored: 200, base: null })).toBe(false);
+  expect(isSaveConflict({ stored: 200, base: 100, force: true })).toBe(false);
+});
+
+test('reads the base header', () => {
+  expect(parseBase('1700000000000')).toBe(1700000000000);
+  expect(parseBase('')).toBeNull();
+  expect(parseBase(undefined)).toBeNull();
+  expect(parseBase('abc')).toBeNull();
+});

server/readerMarks.js

@@ -0,0 +1,43 @@
+// Validation for a user's synced Reader bookmarks and text highlights. The data comes
+// from the browser, so everything is checked and malformed entries are dropped.
+const COLOR = /^#[0-9a-fA-F]{3,8}$/;
+const BOOKMARK_KEY = /^[1-3]?[A-Za-z]{2,3}-\d{1,3}-\d{1,3}$/; // e.g. "JHN-3-16", "1SA-3-5"
+const BOOK = /^[1-3A-Za-z]{3}$/;
+const MAX_BOOKMARKS = 5000;
+const MAX_HIGHLIGHTS = 20000;
+
+const int = (v, min, max) => Number.isInteger(v) && v >= min && v <= max;
+
+// Returns { bookmarks, highlights } with only well-formed entries, or null when the body is
+// not an object at all.
+export function cleanMarks(body) {
+  if (!body || typeof body !== 'object' || Array.isArray(body)) return null;
+
+  const bookmarks = {};
+  if (body.bookmarks && typeof body.bookmarks === 'object' && !Array.isArray(body.bookmarks)) {
+    for (const [key, color] of Object.entries(body.bookmarks).slice(0, MAX_BOOKMARKS)) {
+      if (BOOKMARK_KEY.test(key) && typeof color === 'string' && COLOR.test(color)) bookmarks[key] = color;
+    }
+  }
+
+  const highlights = [];
+  if (Array.isArray(body.highlights)) {
+    const seen = new Set();
+    for (const h of body.highlights.slice(0, MAX_HIGHLIGHTS)) {
+      if (!h || typeof h !== 'object') continue;
+      if (typeof h.id !== 'string' || h.id.length === 0 || h.id.length > 64 || seen.has(h.id)) continue;
+      if (!BOOK.test(String(h.book)) || !int(h.chapter, 1, 200) || !int(h.verse, 1, 200)) continue;
+      if (!int(h.startOffset, 0, 5000) || !int(h.endOffset, 1, 5000) || h.endOffset <= h.startOffset) continue;
+      if (typeof h.color !== 'string' || !COLOR.test(h.color)) continue;
+      seen.add(h.id);
+      const entry = {
+        id: h.id, book: String(h.book).toUpperCase(), chapter: h.chapter, verse: h.verse,
+        startOffset: h.startOffset, endOffset: h.endOffset, color: h.color,
+      };
+      // The highlighted words, kept so lists of highlights can show them without loading the chapter
+      if (typeof h.text === 'string' && h.text.length > 0) entry.text = h.text.slice(0, 500);
+      highlights.push(entry);
+    }
+  }
+  return { bookmarks, highlights };
+}

server/readerMarks.test.js

@@ -0,0 +1,60 @@
+// @vitest-environment node
+import { mkdtempSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { test, expect } from 'vitest';
+import { cleanMarks } from './readerMarks.js';
+
+const hl = (over = {}) => ({ id: 'h1', book: 'JHN', chapter: 3, verse: 16, startOffset: 4, endOffset: 20, color: '#fef08a', ...over });
+
+test('a non-object body is rejected', () => {
+  expect(cleanMarks(null)).toBeNull();
+  expect(cleanMarks([])).toBeNull();
+  expect(cleanMarks('x')).toBeNull();
+});
+
+test('good bookmarks and highlights pass through unchanged', () => {
+  const body = { bookmarks: { 'JHN-3-16': '#fef08a', '1SA-3-5': '#bbf7d0' }, highlights: [hl()] };
+  expect(cleanMarks(body)).toEqual(body);
+});
+
+test('malformed bookmarks are dropped, good ones kept', () => {
+  const out = cleanMarks({ bookmarks: { 'JHN-3-16': '#fef08a', 'bad key': '#fef08a', 'GEN-1-1': 'red', 'GEN-1-2': 5, '../x-1-1': '#fff' } });
+  expect(out.bookmarks).toEqual({ 'JHN-3-16': '#fef08a' });
+});
+
+test('highlights are validated field by field and de-duplicated by id', () => {
+  const out = cleanMarks({ highlights: [
+    hl(),
+    hl({ id: 'h1', verse: 17 }), // duplicate id
+    hl({ id: '' }), hl({ id: 'x'.repeat(65) }),
+    hl({ id: 'a', book: 'JOHN' }), hl({ id: 'b', chapter: 0 }), hl({ id: 'c', verse: 201 }),
+    hl({ id: 'd', startOffset: 10, endOffset: 10 }), hl({ id: 'e', startOffset: -1 }), hl({ id: 'f', color: 'yellow' }),
+    'nope', null,
+    hl({ id: 'ok', book: 'gen' }),
+  ] });
+  expect(out.highlights.map((h) => h.id)).toEqual(['h1', 'ok']);
+  expect(out.highlights[1].book).toBe('GEN'); // normalised
+});
+
+test('missing sections become empty ones, and unknown fields are not stored', () => {
+  expect(cleanMarks({})).toEqual({ bookmarks: {}, highlights: [] });
+  expect(cleanMarks({ highlights: [{ ...hl(), evil: '<script>' }] }).highlights[0]).not.toHaveProperty('evil');
+});
+
+test('the database keeps one row per user and updatedAt only moves forward', async () => {
+  process.env.DATA_DIR = mkdtempSync(join(tmpdir(), 'marks-'));
+  const db = await import('./db.js');
+  db.initDb();
+  db.createUser({ id: 'u1', email: 'a@example.test', passwordHash: 'x' });
+  db.createUser({ id: 'u2', email: 'b@example.test', passwordHash: 'x' });
+  expect(db.getReaderMarks('u1')).toEqual({ bookmarks: {}, highlights: [], updatedAt: 0 });
+  const t1 = db.setReaderMarks('u1', { bookmarks: { 'JHN-3-16': '#fef08a' }, highlights: [] });
+  const t2 = db.setReaderMarks('u1', { bookmarks: {}, highlights: [hl()] });
+  expect(t2).toBeGreaterThan(t1);
+  const saved = db.getReaderMarks('u1');
+  expect(saved.updatedAt).toBe(t2);
+  expect(saved.bookmarks).toEqual({});
+  expect(saved.highlights).toHaveLength(1);
+  expect(db.getReaderMarks('u2').updatedAt).toBe(0); // other users are untouched
+});

server/reminders.js

@@ -0,0 +1,83 @@
+// Daily "don't forget to read" reminders, sent via ntfy.sh (https://ntfy.sh) —
+// a free pub/sub push service: POST a message to a topic URL, anyone
+// subscribed to that topic (via the ntfy app or a browser) gets notified.
+// No API keys or push-subscription plumbing needed.
+import { getUsersWithRemindersEnabled, setLastReminderDate, getReadingProgress } from './db.js';
+
+// A reminder still goes out if the server was briefly down (or restarting) at the
+// exact minute — as long as it's within this window after the chosen time.
+const GRACE_MINUTES = 180;
+const SEND_TIMEOUT_MS = 10_000;
+
+export function isValidTimeZone(tz) {
+  if (!tz) return false;
+  try { new Intl.DateTimeFormat('en-US', { timeZone: tz }); return true; } catch { return false; }
+}
+
+// The calendar date ("YYYY-MM-DD") and minutes-since-midnight in a timezone; the
+// server's own timezone when none (or an invalid one) is saved.
+export function zonedNow(date = new Date(), tz) {
+  const timeZone = isValidTimeZone(tz) ? tz : undefined;
+  const parts = Object.fromEntries(
+    new Intl.DateTimeFormat('en-CA', {
+      timeZone, hourCycle: 'h23', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit',
+    }).formatToParts(date).map((p) => [p.type, p.value]),
+  );
+  return { date: `${parts.year}-${parts.month}-${parts.day}`, minutes: Number(parts.hour) * 60 + Number(parts.minute) };
+}
+
+// Is this user's reminder due right now (and not already sent today)?
+export function isDue(user, now = new Date()) {
+  const match = /^([01]\d|2[0-3]):([0-5]\d)$/.exec(user.reminderTime ?? '');
+  if (!match) return false;
+  const target = Number(match[1]) * 60 + Number(match[2]);
+  const local = zonedNow(now, user.reminderTz);
+  if (user.lastReminderDate === local.date) return false;
+  return local.minutes >= target && local.minutes < target + GRACE_MINUTES;
+}
+
+// POSTs one notification to the user's ntfy topic. Throws with a readable message on failure.
+export async function sendNtfy(user, { title, body, tags = 'open_book' }) {
+  const base = (user.ntfyUrl || 'https://ntfy.sh').replace(/\/+$/, '');
+  const url = `${base}/${encodeURIComponent(user.ntfyTopic)}`;
+  const headers = { Title: title, Tags: tags };
+  if (process.env.APP_URL) headers.Click = process.env.APP_URL; // tapping the notification opens the app
+  let res;
+  try {
+    res = await fetch(url, { method: 'POST', headers, body, signal: AbortSignal.timeout(SEND_TIMEOUT_MS) });
+  } catch (err) {
+    throw new Error(err.name === 'TimeoutError' ? `Timed out reaching ${base}` : `Could not reach ${base} (${err.cause?.code ?? err.message})`);
+  }
+  if (!res.ok) throw new Error(`ntfy responded ${res.status}`);
+}
+
+export function reminderBody(progress) {
+  const active = (Array.isArray(progress?.progress) ? progress.progress : []).filter((p) => !p.completedAt).length;
+  return active > 1 ? `Don't forget today's reading! You have ${active} plans in progress.` : "Don't forget today's reading!";
+}
+
+/** Sends a one-off notification so the user can confirm their topic/server work. */
+export function sendTestReminder(user) {
+  return sendNtfy(user, { title: 'Reading reminders are working', body: 'This is a test from Bible Study Project. Your daily reminder will arrive like this.', tags: 'white_check_mark' });
+}
+
+export async function checkReminders(now = new Date()) {
+  for (const user of getUsersWithRemindersEnabled().filter((u) => isDue(u, now))) {
+    try {
+      const progress = getReadingProgress(user.id);
+      const hasActivePlan = Array.isArray(progress?.progress) && progress.progress.some((p) => !p.completedAt);
+      if (!hasActivePlan) continue; // nothing to nudge them about
+      await sendNtfy(user, { title: 'Reading Plan Reminder', body: reminderBody(progress) });
+      setLastReminderDate(user.id, zonedNow(now, user.reminderTz).date);
+    } catch (err) {
+      console.error(`Reading reminder failed for user ${user.id}:`, err.message);
+    }
+  }
+}
+
+/** Checks once a minute whether any user's reminder time has arrived. */
+export function startReminderScheduler() {
+  setInterval(() => {
+    checkReminders().catch((err) => console.error('Reminder scheduler error:', err));
+  }, 60 * 1000);
+}

server/reminders.test.js

@@ -0,0 +1,86 @@
+// @vitest-environment node
+import http from 'node:http';
+import { test, expect, afterEach } from 'vitest';
+import { isDue, isValidTimeZone, reminderBody, sendNtfy, sendTestReminder, zonedNow } from './reminders.js';
+
+const at = (iso) => new Date(iso);
+
+test('zonedNow reads the date and time in the user\'s timezone, not the server\'s', () => {
+  // 2026-09-30T03:30Z is 23:30 the day before in New York, and 12:30 the same day in Tokyo
+  const d = at('2026-09-30T03:30:00Z');
+  expect(zonedNow(d, 'America/New_York')).toEqual({ date: '2026-09-29', minutes: 23 * 60 + 30 });
+  expect(zonedNow(d, 'Asia/Tokyo')).toEqual({ date: '2026-09-30', minutes: 12 * 60 + 30 });
+  expect(zonedNow(d, 'Not/AZone')).toEqual(zonedNow(d)); // bad timezone falls back to the server's
+});
+
+test('timezone validation', () => {
+  expect(isValidTimeZone('America/Chicago')).toBe(true);
+  expect(isValidTimeZone('Mars/Base')).toBe(false);
+  expect(isValidTimeZone('')).toBe(false);
+});
+
+test('a reminder is due at its time in the user\'s timezone', () => {
+  const user = { reminderTime: '07:00', reminderTz: 'America/Chicago', lastReminderDate: null };
+  expect(isDue(user, at('2026-09-29T11:59:00Z'))).toBe(false); // 06:59 in Chicago (CDT)
+  expect(isDue(user, at('2026-09-29T12:00:00Z'))).toBe(true); // 07:00
+});
+
+test('a late server still sends today\'s reminder, but only within the grace window', () => {
+  const user = { reminderTime: '07:00', reminderTz: 'America/Chicago', lastReminderDate: null };
+  expect(isDue(user, at('2026-09-29T12:40:00Z'))).toBe(true); // 07:40 — server was down at 07:00
+  expect(isDue(user, at('2026-09-29T15:30:00Z'))).toBe(false); // 10:30 — too late to be useful
+});
+
+test('it is not sent twice on the same local day', () => {
+  const user = { reminderTime: '07:00', reminderTz: 'America/Chicago', lastReminderDate: '2026-09-29' };
+  expect(isDue(user, at('2026-09-29T12:05:00Z'))).toBe(false);
+  expect(isDue({ ...user, lastReminderDate: '2026-09-28' }, at('2026-09-29T12:05:00Z'))).toBe(true);
+});
+
+test('a missing or malformed time is never due', () => {
+  expect(isDue({ reminderTime: null }, new Date())).toBe(false);
+  expect(isDue({ reminderTime: '7am' }, new Date())).toBe(false);
+});
+
+test('the message mentions how many plans are in progress', () => {
+  expect(reminderBody({ progress: [{ completedAt: null }] })).toBe("Don't forget today's reading!");
+  expect(reminderBody({ progress: [{ completedAt: null }, { completedAt: null }, { completedAt: 1 }] })).toContain('2 plans');
+});
+
+// --- delivery, against a local stand-in for an ntfy server ------------------------
+let server;
+afterEach(() => new Promise((resolve) => (server ? server.close(resolve) : resolve())));
+
+const startNtfy = (handler) => new Promise((resolve) => {
+  const seen = [];
+  server = http.createServer((req, res) => {
+    let body = '';
+    req.on('data', (c) => { body += c; });
+    req.on('end', () => { seen.push({ method: req.method, url: req.url, headers: req.headers, body }); handler(res); });
+  });
+  server.listen(0, '127.0.0.1', () => resolve({ url: `http://127.0.0.1:${server.address().port}`, seen }));
+});
+
+test('sendNtfy POSTs the message to <server>/<topic> with a title', async () => {
+  const ntfy = await startNtfy((res) => res.end('{}'));
+  await sendNtfy({ ntfyUrl: `${ntfy.url}/`, ntfyTopic: 'my-topic_1' }, { title: 'Hello', body: 'Body text' });
+  expect(ntfy.seen).toHaveLength(1);
+  expect(ntfy.seen[0]).toMatchObject({ method: 'POST', url: '/my-topic_1', body: 'Body text' });
+  expect(ntfy.seen[0].headers.title).toBe('Hello');
+});
+
+test('the test notification reaches the topic', async () => {
+  const ntfy = await startNtfy((res) => res.end('{}'));
+  await sendTestReminder({ ntfyUrl: ntfy.url, ntfyTopic: 'abc' });
+  expect(ntfy.seen[0].url).toBe('/abc');
+  expect(ntfy.seen[0].headers.title).toMatch(/working/i);
+});
+
+test('an ntfy error response becomes a readable failure', async () => {
+  const ntfy = await startNtfy((res) => { res.statusCode = 403; res.end('nope'); });
+  await expect(sendNtfy({ ntfyUrl: ntfy.url, ntfyTopic: 'abc' }, { title: 't', body: 'b' })).rejects.toThrow('ntfy responded 403');
+});
+
+test('an unreachable server says so instead of hanging', async () => {
+  await expect(sendNtfy({ ntfyUrl: 'http://127.0.0.1:9', ntfyTopic: 'abc' }, { title: 't', body: 'b' })).rejects.toThrow(/Could not reach/);
+});

src/App.flow.test.jsx

@@ -0,0 +1,320 @@
+// How the app moves and recovers: the Back button, the ⌘K palette, Undo, sync conflicts, backups.
+import { render, screen, waitFor, within, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi, beforeEach, afterEach, describe, test, expect } from 'vitest';
+import App from './App';
+import { resetLexiconCaches } from './utils/wordStudy.js';
+import { switchStorageUser } from './utils/bibleUtils.jsx';
+import { resetSyncBases } from './utils/syncBase.js';
+
+const chapterData = {
+  chapter: { content: [
+    { type: 'verse', number: 1, content: ['In the beginning God created.'] },
+    { type: 'verse', number: 2, content: ['The earth was without form.'] },
+  ] },
+};
+const json = (status, data) => Promise.resolve({ ok: status < 400, status, json: () => Promise.resolve(data) });
+
+// A fake server: signed in as `user`, a settable answer for saving studies, and a log of every call.
+function stubServer({ user = null, putStatus = 200 } = {}) {
+  const calls = [];
+  const state = { putStatus };
+  vi.stubGlobal('fetch', vi.fn((url, opts = {}) => {
+    const route = `${opts.method ?? 'GET'} ${url.split('?')[0]}`;
+    calls.push({ route, url, opts });
+    if (url.includes('bible.helloao.org')) return json(200, chapterData);
+    if (!url.startsWith('/api/')) return Promise.resolve({ ok: false });
+    if (route === 'GET /api/auth/me') return user ? json(200, user) : json(401, { error: 'Not signed in' });
+    if (route === 'GET /api/projects') return json(200, []);
+    if (route === 'GET /api/reader/ink') return json(200, {});
+    if (route.startsWith('PUT /api/projects/')) {
+      return state.putStatus === 409
+        ? json(409, { error: 'This study was changed on another device.', code: 'conflict', serverEdited: 999 })
+        : json(200, { id: url.split('/').pop().split('?')[0], title: 'x', lastEdited: 12345, chapterSummary: '' });
+    }
+    return json(404, { error: 'not mocked' });
+  }));
+  return { calls, state };
+}
+
+beforeEach(() => {
+  localStorage.clear();
+  resetLexiconCaches();
+  resetSyncBases();
+  switchStorageUser(null);
+  vi.stubGlobal('fetch', vi.fn(() => Promise.resolve({ ok: false })));
+  vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:mock');
+  vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {});
+});
+afterEach(() => { vi.unstubAllGlobals(); vi.restoreAllMocks(); });
+
+async function renderApp() {
+  render(<App />);
+  await waitFor(() => expect(screen.queryByText('Loading…')).not.toBeInTheDocument());
+}
+
+function seedProject({ id = 'p1', title = 'Titus Notes', observation = 'Grace abounds to all.' } = {}) {
+  const project = {
+    id, title, translation: 'BSB', lastEdited: Date.now(), selectedChunkId: null,
+    chapters: [{
+      book: 'Titus', bookAbbrev: 'TIT', chapter: '1', verses: [{ number: 1, text: 'Paul, a servant of God.' }],
+      chunks: [{ id: 'c1', startVerse: 1, endVerse: 1, observation, interpretation: '', application: '', crossReferences: [], greekWords: [], tags: [] }],
+    }],
+  };
+  const index = JSON.parse(localStorage.getItem('bible-study-index') || '[]');
+  index.push({ id, title, lastEdited: project.lastEdited, chapterSummary: 'Titus 1', tags: [] });
+  localStorage.setItem(`bible-study-project-${id}`, JSON.stringify(project));
+  localStorage.setItem('bible-study-index', JSON.stringify(index));
+}
+
+describe('Back button', () => {
+  test('moves back through the pages you visited instead of leaving the app', async () => {
+    const user = userEvent.setup();
+    await renderApp();
+    expect(await screen.findByRole('heading', { name: 'My Studies' })).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /reading plans/i }));
+    expect(await screen.findByRole('heading', { name: /reading plans/i })).toBeInTheDocument();
+    window.history.back();
+    expect(await screen.findByRole('heading', { name: 'My Studies' })).toBeInTheDocument();
+    window.history.forward();
+    expect(await screen.findByRole('heading', { name: /reading plans/i })).toBeInTheDocument();
+  });
+});
+
+const paletteBox = async () => within(await screen.findByRole('dialog', { name: /search and go to/i })).getByRole('combobox');
+
+describe('Search palette (⌘K)', () => {
+  test('a typed passage goes straight to the Bible reader', async () => {
+    const user = userEvent.setup();
+    await renderApp();
+    await user.keyboard('{Control>}k{/Control}');
+    await user.type(await paletteBox(), 'john 3:16');
+    expect(await screen.findByRole('option', { name: /John 3:16/ })).toBeInTheDocument();
+    await user.keyboard('{Enter}');
+    expect(await screen.findByRole('heading', { name: /John 3/ })).toBeInTheDocument();
+    expect(screen.queryByRole('dialog', { name: /search and go to/i })).not.toBeInTheDocument();
+  });
+
+  test('finds a note you wrote and opens that study', async () => {
+    seedProject({ observation: 'Grace abounds to all.' });
+    const user = userEvent.setup();
+    await renderApp();
+    await user.keyboard('{Control>}k{/Control}');
+    await user.type(await paletteBox(), 'abounds');
+    const hit = await screen.findByRole('option', { name: /Titus 1:1/ });
+    await user.click(hit);
+    expect(await screen.findByText(/Your notes/i)).toBeInTheDocument();
+  });
+
+  test('Escape closes it', async () => {
+    const user = userEvent.setup();
+    await renderApp();
+    await user.keyboard('{Control>}k{/Control}');
+    await paletteBox();
+    await user.keyboard('{Escape}');
+    expect(screen.queryByRole('dialog', { name: /search and go to/i })).not.toBeInTheDocument();
+  });
+
+  test('? lists the keyboard shortcuts', async () => {
+    const user = userEvent.setup();
+    await renderApp();
+    await user.keyboard('?');
+    expect(await screen.findByRole('dialog', { name: /keyboard shortcuts/i })).toBeInTheDocument();
+  });
+});
+
+describe('Undo', () => {
+  test('deleting a project, then Undo, keeps its notes', async () => {
+    seedProject();
+    const user = userEvent.setup();
+    await renderApp();
+    await user.click(screen.getByRole('button', { name: /^delete$/i }));
+    expect(await screen.findByRole('status')).toHaveTextContent(/deleted/i);
+    await user.click(screen.getByRole('button', { name: /undo/i }));
+    expect(await screen.findByText('Titus Notes')).toBeInTheDocument();
+    expect(JSON.parse(localStorage.getItem('bible-study-project-p1')).chapters[0].chunks[0].observation).toBe('Grace abounds to all.');
+  });
+});
+
+describe('Sync conflict', () => {
+  const user = { id: 'u1', email: 'reader@example.com', totpEnabled: false, podcastName: '', isAdmin: false };
+
+  async function startStudy(u) {
+    await renderApp();
+    await u.click((await screen.findAllByRole('button', { name: /new project/i }))[0]);
+    await u.click(await screen.findByRole('button', { name: /load chapter/i }));
+    await screen.findByText(/Scripture & Chunks/i);
+  }
+
+  test('a save the server refuses shows the choice instead of overwriting', async () => {
+    const server = stubServer({ user, putStatus: 409 });
+    const u = userEvent.setup();
+    await startStudy(u);
+    const banner = await screen.findByRole('alert', {}, { timeout: 4000 });
+    expect(banner).toHaveTextContent(/changed on another device/i);
+    expect(within(banner).getByRole('button', { name: /keep this version/i })).toBeInTheDocument();
+    expect(within(banner).getByRole('button', { name: /use the other version/i })).toBeInTheDocument();
+
+    // "Keep this version" sends the save again, this time as an overwrite
+    server.state.putStatus = 200;
+    await u.click(within(banner).getByRole('button', { name: /keep this version/i }));
+    await waitFor(() => expect(server.calls.some((c) => c.url.includes('?force=1'))).toBe(true));
+    await waitFor(() => expect(screen.queryByText(/changed on another device/i)).not.toBeInTheDocument());
+  }, 15000);
+
+  test('opening a study without editing it does not touch the server', async () => {
+    seedProject();
+    const server = stubServer({ user });
+    const u = userEvent.setup();
+    await renderApp();
+    // signed in: the namespaced storage starts empty, so seed under the user's keys by resuming nothing
+    expect(server.calls.filter((c) => c.route.startsWith('PUT')).length).toBe(0);
+    await u.click(await screen.findByRole('button', { name: /read bible/i }));
+    expect(server.calls.filter((c) => c.route.startsWith('PUT /api/projects')).length).toBe(0);
+  });
+});
+
+describe('Outline stage', () => {
+  async function openOutline() {
+    // local-only mode (the account server is unreachable), with chapter text available
+    vi.stubGlobal('fetch', vi.fn((url) => (url.includes('bible.helloao.org') ? json(200, chapterData) : Promise.resolve({ ok: false }))));
+    const user = userEvent.setup();
+    await renderApp();
+    await user.click((await screen.findAllByRole('button', { name: /new project/i }))[0]);
+    await user.click(await screen.findByRole('button', { name: /load chapter/i }));
+    await screen.findByText(/Scripture & Chunks/i);
+    // one chunk covering verses 1-2
+    const verses = within(screen.getByTestId('verse-list'));
+    fireEvent.click(verses.getByRole('button', { name: /In the beginning/ }));
+    fireEvent.click(verses.getByRole('button', { name: /without form/ }), { shiftKey: true });
+    await screen.findByText('1 created');
+    await user.click(screen.getByRole('button', { name: /^outline$/i }));
+    await screen.findByRole('heading', { name: 'Outline' });
+    return user;
+  }
+
+  test('starts empty, and "Start from my chunks" makes a main point for each chunk', async () => {
+    const user = await openOutline();
+    expect(screen.getByText(/no outline yet/i)).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /start from my chunks/i }));
+    const list = await screen.findByRole('list', { name: 'Outline' });
+    expect(within(list).getAllByRole('textbox')).toHaveLength(1);
+    expect(within(list).getByText(/Open chunk in Study/i)).toBeInTheDocument();
+  });
+
+  test('Enter adds a point, Tab makes it a sub-point, and they are numbered I. and A.', async () => {
+    const user = await openOutline();
+    await user.click(screen.getByRole('button', { name: /start blank/i }));
+    const first = await screen.findByRole('textbox', { name: 'Point I.' });
+    await user.type(first, 'Creation{Enter}');
+    const second = await screen.findByRole('textbox', { name: 'Point II.' });
+    await user.type(second, 'Light{Tab}');
+    expect(await screen.findByRole('textbox', { name: 'Point A.' })).toHaveValue('Light');
+    expect(screen.getByRole('textbox', { name: 'Point I.' })).toHaveValue('Creation');
+  });
+
+  test('deleting a point can be undone', async () => {
+    const user = await openOutline();
+    await user.click(screen.getByRole('button', { name: /start blank/i }));
+    await user.type(await screen.findByRole('textbox', { name: 'Point I.' }), 'Keep me');
+    await user.click(screen.getByRole('button', { name: /delete i\./i }));
+    expect(screen.queryByRole('textbox', { name: 'Point I.' })).not.toBeInTheDocument();
+    await user.click(await screen.findByRole('button', { name: /undo/i }));
+    expect(await screen.findByRole('textbox', { name: 'Point I.' })).toHaveValue('Keep me');
+  });
+});
+
+describe('Outline: per chunk, details, print and share', () => {
+  async function openOutline() {
+    vi.stubGlobal('fetch', vi.fn((url) => (url.includes('bible.helloao.org') ? json(200, chapterData) : Promise.resolve({ ok: false }))));
+    const user = userEvent.setup();
+    await renderApp();
+    await user.click((await screen.findAllByRole('button', { name: /new project/i }))[0]);
+    await user.click(await screen.findByRole('button', { name: /load chapter/i }));
+    await screen.findByText(/Scripture & Chunks/i);
+    const verses = within(screen.getByTestId('verse-list'));
+    fireEvent.click(verses.getByRole('button', { name: /In the beginning/ }));
+    fireEvent.click(verses.getByRole('button', { name: /without form/ }), { shiftKey: true });
+    await screen.findByText('1 created');
+    await user.click(screen.getByRole('button', { name: /^outline$/i }));
+    await screen.findByRole('heading', { name: 'Outline' });
+    return user;
+  }
+
+  test('each chunk has its own outline, separate from the whole study\'s', async () => {
+    const user = await openOutline();
+    const picker = screen.getByRole('combobox', { name: 'Outline for' });
+    await user.selectOptions(picker, picker.querySelectorAll('option')[1]); // the chunk
+    expect(await screen.findByText(/no outline yet for/i)).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /start from the verses/i }));
+    const list = await screen.findByRole('list', { name: 'Outline' });
+    expect(within(list).getAllByRole('textbox')).toHaveLength(2); // one point per verse
+    expect(within(list).getByText(/In the beginning God created/)).toBeInTheDocument(); // with its words
+    await user.selectOptions(screen.getByRole('combobox', { name: 'Outline for' }), 'study');
+    expect(await screen.findByText(/^No outline yet$/)).toBeInTheDocument(); // the whole study is untouched
+    expect(screen.getByRole('option', { name: /· 2/ })).toBeInTheDocument(); // the chunk shows its count
+  });
+
+  test('a point can be given a type and minutes, and the total shows', async () => {
+    const user = await openOutline();
+    await user.click(screen.getByRole('button', { name: /start blank/i }));
+    await user.type(await screen.findByRole('textbox', { name: 'Point I.' }), 'The story');
+    await user.click(screen.getByRole('button', { name: /details for i\./i }));
+    await user.selectOptions(screen.getByLabelText('Type'), 'illustration');
+    await user.type(screen.getByLabelText('Minutes'), '5');
+    expect(await screen.findByText('About 5 minutes')).toBeInTheDocument();
+    await user.type(screen.getByRole('textbox', { name: 'Notes for I.' }), 'Tell it slowly');
+    await user.click(screen.getByRole('button', { name: /details for i\./i })); // close: the note shows as a line
+    expect(await screen.findByText('Tell it slowly')).toBeInTheDocument();
+    expect(screen.getByText('Illustration')).toBeInTheDocument();
+  });
+
+  test('"Add verse text" puts the passage\'s words into the point', async () => {
+    const user = await openOutline();
+    await user.click(screen.getByRole('button', { name: /start blank/i }));
+    await user.click(await screen.findByRole('button', { name: /details for i\./i }));
+    await user.type(screen.getByLabelText('Passage'), 'Titus 1:1');
+    await user.click(screen.getByRole('button', { name: /add verse text/i }));
+    expect(await screen.findByText(/In the beginning God created/)).toBeInTheDocument();
+    await user.clear(screen.getByLabelText('Passage'));
+    await user.type(screen.getByLabelText('Passage'), 'nonsense');
+    await user.click(screen.getByRole('button', { name: /replace verse text/i }));
+    expect(await screen.findByRole('alert')).toHaveTextContent(/type a passage/i);
+  });
+
+  test('Share copies the outline when there is no share sheet; Print opens a page of it', async () => {
+    const user = await openOutline();
+    await user.click(screen.getByRole('button', { name: /start from my chunks/i }));
+    await screen.findByRole('list', { name: 'Outline' });
+    await user.click(screen.getByRole('button', { name: /^share$/i }));
+    expect(await screen.findByText(/outline copied/i)).toBeInTheDocument();
+    const doc = { write: vi.fn(), close: vi.fn() };
+    vi.spyOn(window, 'open').mockReturnValue({ document: doc, focus: vi.fn(), print: vi.fn() });
+    await user.click(screen.getByRole('button', { name: /print \/ pdf/i }));
+    expect(doc.write.mock.calls[0][0]).toContain('class="outline"');
+  });
+});
+
+describe('Study cards on Home', () => {
+  test('a long run of chapters and many tags stay short', async () => {
+    const chapters = Array.from({ length: 24 }, (_, i) => `Luke ${i + 1}`).join(', ');
+    const tags = ['A', 'B', 'C', 'D', 'E', 'F'];
+    localStorage.setItem('bible-study-index', JSON.stringify([{ id: 'p', title: 'Luke', lastEdited: Date.now(), chapterSummary: chapters, tags }]));
+    await renderApp();
+    expect(await screen.findByText('Luke 1\u201324')).toBeInTheDocument();
+    expect(screen.getByText('+3 more')).toBeInTheDocument();
+    expect(screen.queryByText('F', { selector: 'span' })).not.toBeInTheDocument(); // only in the Tag filter
+  });
+});
+
+describe('Window title', () => {
+  test('names the page you are on, including the chapter in the reader', async () => {
+    const user = userEvent.setup();
+    await renderApp();
+    expect(document.title).toBe('My Studies · Bible Study');
+    await user.click(screen.getByRole('button', { name: /reading plans/i }));
+    await waitFor(() => expect(document.title).toBe('Reading Plans · Bible Study'));
+    await user.click(screen.getByRole('button', { name: /read bible/i }));
+    await waitFor(() => expect(document.title).toMatch(/^[A-Za-z0-9 ]+ \d+ · Bible Study$/));
+  });
+});

src/components/AudioPlayer.jsx

@@ -0,0 +1,177 @@
+// A compact media-player control: big play/pause button, seekable progress
+// bar, and transport buttons. Presentation only — playback state and handlers
+// come from useAudio.js so the Home (whole book) and Reader (chapter) players
+// can share this UI.
+function formatTime(seconds) {
+  if (!Number.isFinite(seconds) || seconds < 0) return '0:00';
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${String(secs).padStart(2, '0')}`;
+}
+
+function PlayIcon() {
+  return (
+    <svg viewBox="0 0 20 20" width="20" height="20" fill="currentColor">
+      <path d="M5.5 3.6c0-.9 1-1.45 1.76-.97l9.4 5.9c.72.45.72 1.5 0 1.94l-9.4 5.9c-.76.48-1.76-.07-1.76-.97V3.6z" />
+    </svg>
+  );
+}
+
+function PauseIcon() {
+  return (
+    <svg viewBox="0 0 20 20" width="20" height="20" fill="currentColor">
+      <rect x="4.5" y="3.5" width="4" height="13" rx="1" />
+      <rect x="11.5" y="3.5" width="4" height="13" rx="1" />
+    </svg>
+  );
+}
+
+function StopIcon() {
+  return (
+    <svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor">
+      <rect x="4.5" y="4.5" width="11" height="11" rx="1.5" />
+    </svg>
+  );
+}
+
+function Seek10Icon({ direction }) {
+  const flip = direction === 'back' ? 'scale(-1,1) translate(-20,0)' : undefined;
+  return (
+    <svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6">
+      <g transform={flip}>
+        <path d="M4 8.5a6.5 6.5 0 1 1 1.2 5.3" strokeLinecap="round" />
+        <path d="M3 5.5v3.3h3.3" strokeLinecap="round" strokeLinejoin="round" />
+      </g>
+      <text x="10" y="12.2" fontSize="6.5" fontFamily="sans-serif" stroke="none" fill="currentColor" textAnchor="middle">10</text>
+    </svg>
+  );
+}
+
+function NextTrackIcon() {
+  return (
+    <svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor">
+      <path d="M5 4.3c0-.8.9-1.3 1.6-.9l7.4 4.7c.7.4.7 1.4 0 1.8l-7.4 4.7c-.7.4-1.6-.1-1.6-.9V4.3z" />
+      <rect x="14" y="3.7" width="1.6" height="12.6" rx="0.5" />
+    </svg>
+  );
+}
+
+export default function AudioPlayer({
+  title,
+  subtitle,
+  errorMessage,
+  status, // 'idle' | 'playing' | 'paused' | 'error'
+  currentTime = 0,
+  duration = 0,
+  onPlay,
+  onTogglePause,
+  onSeekBack,
+  onSeekForward,
+  onSeekTo,
+  onNext,
+  nextDisabled,
+  onStop,
+  controls, // optional extra controls (e.g. book/narrator selects), rendered top-right
+}) {
+  const isActive = status === 'playing' || status === 'paused';
+  const progressPct = duration > 0 ? Math.min(100, (currentTime / duration) * 100) : 0;
+
+  return (
+    <div className="rounded-3xl border border-[var(--r-line,#e2e8f0)] bg-[var(--r-bar,#ffffff)] p-4 sm:p-5">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-[10rem] flex-1">
+          <h3 className="truncate text-sm font-semibold text-[var(--r-text,#0f172a)] sm:text-base">{title}</h3>
+          <p className="mt-0.5 truncate text-xs text-[var(--r-sub,#64748b)] sm:text-sm">{subtitle}</p>
+          {status === 'error' && errorMessage && (
+            <p className="mt-1 text-xs text-rose-600">{errorMessage}</p>
+          )}
+        </div>
+        {controls && <div className="flex flex-wrap items-center gap-2">{controls}</div>}
+      </div>
+
+      {isActive && (
+        <div className="mt-4">
+          <input
+            type="range"
+            min={0}
+            max={duration || 0}
+            step={0.1}
+            value={Math.min(currentTime, duration || 0)}
+            onChange={(e) => onSeekTo?.(Number(e.target.value))}
+            disabled={!duration}
+            className="h-1.5 w-full cursor-pointer appearance-none rounded-full bg-[var(--r-line,#e2e8f0)] accent-[var(--r-accent,#0284c7)] disabled:cursor-default"
+            style={{ background: `linear-gradient(to right, var(--r-accent, rgb(2 132 199)) ${progressPct}%, var(--r-line, rgb(226 232 240)) ${progressPct}%)` }}
+            aria-label="Seek"
+          />
+          <div className="mt-1 flex justify-between text-xs tabular-nums text-[var(--r-sub,#64748b)]">
+            <span>{formatTime(currentTime)}</span>
+            <span>{formatTime(duration)}</span>
+          </div>
+        </div>
+      )}
+
+      <div className="mt-3 flex items-center justify-center gap-3">
+        {isActive ? (
+          <>
+            <button
+              type="button"
+              onClick={onSeekBack}
+              title="Rewind 10 seconds"
+              aria-label="Rewind 10 seconds"
+              className="flex h-9 w-9 items-center justify-center rounded-full text-[var(--r-sub,#64748b)] hover:bg-black/5"
+            >
+              <Seek10Icon direction="back" />
+            </button>
+            <button
+              type="button"
+              onClick={onTogglePause}
+              aria-label={status === 'paused' ? 'Resume' : 'Pause'}
+              className="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--r-accent,#0284c7)] text-[var(--r-on,#ffffff)] hover:opacity-90"
+            >
+              {status === 'paused' ? <PlayIcon /> : <PauseIcon />}
+            </button>
+            <button
+              type="button"
+              onClick={onSeekForward}
+              title="Fast-forward 10 seconds"
+              aria-label="Fast-forward 10 seconds"
+              className="flex h-9 w-9 items-center justify-center rounded-full text-[var(--r-sub,#64748b)] hover:bg-black/5"
+            >
+              <Seek10Icon direction="forward" />
+            </button>
+            {onNext && (
+              <button
+                type="button"
+                onClick={onNext}
+                disabled={nextDisabled}
+                title="Next chapter"
+                aria-label="Next chapter"
+                className="flex h-9 w-9 items-center justify-center rounded-full text-[var(--r-sub,#64748b)] hover:bg-black/5 disabled:opacity-30 disabled:hover:bg-transparent"
+              >
+                <NextTrackIcon />
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={onStop}
+              title="Stop"
+              aria-label="Stop"
+              className="flex h-9 w-9 items-center justify-center rounded-full text-[var(--r-sub,#64748b)] hover:bg-black/5"
+            >
+              <StopIcon />
+            </button>
+          </>
+        ) : (
+          <button
+            type="button"
+            onClick={onPlay}
+            className="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--r-accent,#0284c7)] text-[var(--r-on,#ffffff)] hover:opacity-90"
+            aria-label="Play"
+          >
+            <PlayIcon />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/CommandPalette.jsx

@@ -0,0 +1,132 @@
+// Press ⌘K (Ctrl+K) anywhere: type a passage ("john 3:16") to go straight to it, or a few letters to
+// find a study, a note you wrote, a bookmark or highlight, a page, or to search the Bible's text.
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useApp } from '../context/AppContext.js';
+import { themeVars } from './reader/readerThemes.js';
+import { SearchIcon } from './reader/icons.jsx';
+import { formatPassage, parsePassageRef } from '../utils/passageRef.js';
+import { searchMarks, searchNotes, searchProjects } from '../utils/personalSearch.js';
+import { loadProjectIndex } from '../utils/bibleUtils.jsx';
+import { loadProjectById } from '../utils/projectStorage.js';
+
+export default function CommandPalette({ onClose }) {
+  const {
+    readerTheme, authUser, authServerDown, projectIndex, readerBookmarks, readerTextHighlights, readerColorLabels,
+    jumpToReaderVerse, setCurrentPage, setProject, resumeProject, openNewProject, goStudies, openReadingPlans,
+    openBibleReader, requestReaderSearch, openBackup,
+  } = useApp();
+  const [query, setQuery] = useState('');
+  const [active, setActive] = useState(0);
+  const listRef = useRef(null);
+  const inputRef = useRef(null);
+  const opener = useRef(document.activeElement);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+    const from = opener.current;
+    return () => { if (from instanceof HTMLElement && document.contains(from)) from.focus({ preventScroll: true }); };
+  }, []);
+
+  const items = useMemo(() => {
+    const out = [];
+    const q = query.trim();
+    const go = (fn) => () => { onClose(); fn(); };
+
+    // 1. A passage typed in
+    for (const r of parsePassageRef(q)) {
+      out.push({ group: 'Go to', label: formatPassage(r), hint: 'Open in the Bible', run: go(() => { jumpToReaderVerse(r.book, r.chapter, r.verse ?? 1); openBibleReader(); }) });
+    }
+
+    // 2. Pages and actions
+    const pages = [
+      ['Studies', 'My Studies', goStudies], ['Read Bible', 'The Bible reader', openBibleReader], ['Reading Plans', 'Plans and today’s reading', openReadingPlans],
+      ['New project', 'Start a Bible study', openNewProject], ['Settings', 'Account and preferences', () => setCurrentPage('settings')],
+      ['Back up my data', 'Download everything as a file', openBackup],
+    ];
+    const lower = q.toLowerCase();
+    for (const [label, hint, fn] of pages) {
+      if (!lower || label.toLowerCase().includes(lower)) out.push({ group: lower ? 'Pages' : 'Go to', label, hint, run: go(fn) });
+    }
+
+    if (q.length >= 2) {
+      // 3. Studies
+      for (const e of searchProjects(projectIndex, q)) {
+        out.push({ group: 'Studies', label: e.title, hint: e.chapterSummary, run: go(() => resumeProject(e.id)) });
+      }
+      // 4. Notes you wrote
+      const projects = loadProjectIndex().map((e) => loadProjectById(e.id)).filter(Boolean);
+      for (const h of searchNotes(projects, q)) {
+        out.push({
+          group: 'Your notes', label: `${h.ref} — ${h.projectTitle}`, hint: h.snippet,
+          run: go(() => {
+            const full = loadProjectById(h.projectId);
+            if (!full) return;
+            setProject({ ...full, selectedChunkId: h.chunkId });
+            setCurrentPage('study');
+          }),
+        });
+      }
+      // 5. Bookmarks and highlights
+      for (const m of searchMarks({ bookmarks: readerBookmarks, highlights: readerTextHighlights, labels: readerColorLabels ?? {} }, q)) {
+        out.push({
+          group: 'Bookmarks & highlights', label: `${m.bookName} ${m.chapter}:${m.verse}`, color: m.color,
+          hint: m.kind === 'highlight' ? `${m.label ? `${m.label}: ` : ''}${m.text ?? 'Highlight'}` : 'Bookmark',
+          run: go(() => { jumpToReaderVerse(m.book, m.chapter, m.verse); openBibleReader(); }),
+        });
+      }
+      // 6. The Bible's own text
+      out.push({ group: 'Search', label: `Search the Bible for “${q}”`, hint: 'Whole-Bible search in the reader', run: go(() => { requestReaderSearch(q); openBibleReader(); }) });
+    }
+    return out;
+  }, [query]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => { setActive(0); }, [query]);
+  useEffect(() => { listRef.current?.querySelector('[aria-selected="true"]')?.scrollIntoView?.({ block: 'nearest' }); }, [active]);
+
+  const onKeyDown = (e) => {
+    if (e.key === 'ArrowDown') { e.preventDefault(); setActive((a) => Math.min(a + 1, items.length - 1)); }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); setActive((a) => Math.max(a - 1, 0)); }
+    else if (e.key === 'Enter') { e.preventDefault(); items[active]?.run(); }
+    else if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); onClose(); }
+    else if (e.key === 'Tab') { e.preventDefault(); } // the box and the list are one control
+  };
+
+  if (authUser === null && !authServerDown) return null; // the sign-in screen has nothing to search
+  let lastGroup = null;
+  return (
+    <div style={themeVars(readerTheme)} className="fixed inset-0 z-[90] flex items-start justify-center bg-black/40 px-3 pt-[12vh] font-sans" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+      <div role="dialog" aria-modal="true" aria-label="Search and go to" className="w-full max-w-xl overflow-hidden rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] text-[var(--r-text)] shadow-2xl">
+        <div className="flex items-center gap-2 border-b border-[var(--r-line)] px-4 py-3">
+          <span className="text-[var(--r-sub)]"><SearchIcon /></span>
+          <input
+            ref={inputRef} value={query} onChange={(e) => setQuery(e.target.value)} onKeyDown={onKeyDown}
+            role="combobox" aria-expanded="true" aria-controls="palette-list" aria-autocomplete="list"
+            aria-activedescendant={items[active] ? `palette-item-${active}` : undefined}
+            placeholder="Go to a passage, or search your studies and notes…"
+            className="min-w-0 flex-1 bg-transparent text-base outline-none placeholder:text-[var(--r-sub)]"
+          />
+          <kbd className="hidden rounded border border-[var(--r-line)] px-1.5 py-0.5 text-[10px] text-[var(--r-sub)] sm:block">esc</kbd>
+        </div>
+        <ul id="palette-list" role="listbox" ref={listRef} className="max-h-[50vh] overflow-y-auto p-2">
+          {items.length === 0 && <li className="px-3 py-6 text-center text-sm text-[var(--r-sub)]">Nothing found. Try a book and chapter, like “romans 8”.</li>}
+          {items.map((item, i) => {
+            const header = item.group !== lastGroup ? item.group : null;
+            lastGroup = item.group;
+            return (
+              <li key={i} role="presentation">
+                {header && <p className="px-3 pb-1 pt-2 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">{header}</p>}
+                <div id={`palette-item-${i}`} role="option" aria-selected={i === active} onMouseMove={() => setActive(i)} onClick={item.run}
+                  className={`flex cursor-pointer items-baseline gap-2 rounded-lg px-3 py-2 text-sm ${i === active ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : ''}`}>
+                  {item.color && <span className="h-2.5 w-2.5 shrink-0 translate-y-px rounded-full border border-black/10" style={{ backgroundColor: item.color }} />}
+                  <span className="shrink-0 font-medium">{item.label}</span>
+                  {item.hint && <span className={`min-w-0 truncate text-xs ${i === active ? 'opacity-80' : 'text-[var(--r-sub)]'}`}>{item.hint}</span>}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+        <p className="border-t border-[var(--r-line)] px-4 py-2 text-[11px] text-[var(--r-sub)]">↑↓ to move · Enter to open · Esc to close</p>
+      </div>
+    </div>
+  );
+}

src/components/OfflineSave.jsx

@@ -0,0 +1,32 @@
+// The "Save for offline" control: a button, or progress with a Stop button while a download runs.
+import { canSaveOffline } from '../utils/offline.js';
+
+export function DownloadProgress({ job, onCancel }) {
+  const pct = job.total ? Math.round((job.done / job.total) * 100) : 0;
+  return (
+    <div role="status" className="rounded-xl border border-[var(--r-line)] px-3 py-2 text-xs">
+      <div className="mb-1.5 flex items-center justify-between gap-2">
+        <span>Saving {job.label}… {job.done} of {job.total}</span>
+        <button type="button" onClick={onCancel} className="text-[var(--r-accent)] hover:underline">Stop</button>
+      </div>
+      <div className="h-1 overflow-hidden rounded-full bg-[var(--r-line)]"><div className="h-full bg-[var(--r-accent)] transition-[width]" style={{ width: `${pct}%` }} /></div>
+    </div>
+  );
+}
+
+// One book of a translation.
+export function SaveBookOffline({ offline, translation, book, name }) {
+  if (!canSaveOffline(translation)) {
+    return <p className="mt-4 text-[11px] text-[var(--r-sub)]">Saving for offline works with the BSB and NET. The {translation}’s licence doesn’t allow it.</p>;
+  }
+  if (offline.job) return <div className="mt-4"><DownloadProgress job={offline.job} onCancel={offline.cancel} /></div>;
+  const saved = offline.isSaved(translation, book);
+  return (
+    <div className="mt-4 flex items-center justify-between gap-3 rounded-xl border border-[var(--r-line)] px-3 py-2 text-sm">
+      <span className={saved ? '' : 'text-[var(--r-sub)]'}>{saved ? `✓ ${name} (${translation}) is saved for offline` : `Read ${name} without a connection`}</span>
+      {!saved && (
+        <button type="button" onClick={() => offline.saveBook(translation, book, name)} className="shrink-0 rounded-full border border-[var(--r-line)] px-3 py-1 text-xs font-medium hover:bg-black/5">Save for offline</button>
+      )}
+    </div>
+  );
+}

src/components/ShortcutsHelp.jsx

@@ -0,0 +1,63 @@
+// The "?" cheat sheet: every keyboard shortcut for the page you are on, plus the ones that work everywhere.
+import { useEffect, useRef } from 'react';
+import { useApp } from '../context/AppContext.js';
+import { themeVars } from './reader/readerThemes.js';
+
+const GLOBAL = [
+  ['⌘K  /  Ctrl K', 'Search and go to a passage'],
+  ['?', 'Show this list'],
+  ['Esc', 'Close whatever is open'],
+];
+const BY_PAGE = {
+  reader: [
+    ['← →', 'Previous / next chapter'],
+    ['/', 'Search this chapter or the whole Bible'],
+    ['G', 'Pick a book and chapter'],
+    ['B', 'Bookmark the selected verse'],
+    [',', 'Reading settings'],
+    ['F', 'Hide or show the controls'],
+  ],
+  study: [
+    ['← →', 'Previous / next chunk'],
+  ],
+};
+
+export default function ShortcutsHelp({ onClose }) {
+  const { readerTheme, currentPage } = useApp();
+  const closeRef = useRef(null);
+  useEffect(() => {
+    const from = document.activeElement;
+    closeRef.current?.focus();
+    const onKey = (e) => { if (e.key === 'Escape' || e.key === '?') { e.preventDefault(); e.stopPropagation(); onClose(); } };
+    document.addEventListener('keydown', onKey, true);
+    return () => { document.removeEventListener('keydown', onKey, true); if (from instanceof HTMLElement && document.contains(from)) from.focus({ preventScroll: true }); };
+  }, [onClose]);
+
+  const page = BY_PAGE[currentPage] ?? [];
+  const section = (title, rows) => (
+    <div className="mb-4 last:mb-0">
+      <h3 className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">{title}</h3>
+      <dl className="space-y-1.5">
+        {rows.map(([keys, what]) => (
+          <div key={keys} className="flex items-center justify-between gap-4 text-sm">
+            <dt><kbd className="rounded-md border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-0.5 font-mono text-xs">{keys}</kbd></dt>
+            <dd className="text-right text-[var(--r-sub)]">{what}</dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+
+  return (
+    <div style={themeVars(readerTheme)} className="fixed inset-0 z-[90] flex items-center justify-center bg-black/40 px-3 font-sans" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+      <div role="dialog" aria-modal="true" aria-label="Keyboard shortcuts" className="max-h-[80vh] w-full max-w-sm overflow-y-auto rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-5 text-[var(--r-text)] shadow-2xl">
+        <div className="mb-3 flex items-center justify-between">
+          <h2 className="text-base font-medium">Keyboard shortcuts</h2>
+          <button ref={closeRef} type="button" onClick={onClose} className="rounded-lg px-2 py-1 text-sm text-[var(--r-sub)] hover:bg-black/5">Close</button>
+        </div>
+        {page.length > 0 && section(currentPage === 'reader' ? 'In the Bible' : 'In this study', page)}
+        {section('Everywhere', GLOBAL)}
+      </div>
+    </div>
+  );
+}

src/components/StudyPanel.jsx

@@ -0,0 +1,154 @@
+// Inline study panel shown under a verse in the Reader: commentary from several
+// public-domain / open sources, plus the people, places and events tied to the verse.
+import { useState } from 'react';
+import { useApp } from '../context/AppContext.js';
+import {
+  COMMENTARIES, loadCommentary, loadTheographic, loadPerson, pickCommentaryEntry, useAsync,
+} from '../hooks/useVerseStudy.js';
+
+export function CommentaryTab({ book, chapter, verse }) {
+  // The chosen commentary is a synced preference, shared with the Study stage
+  const { readerCommentary: sourceId, setReaderCommentary: changeSource } = useApp();
+  const source = COMMENTARIES.find((c) => c.id === sourceId) ?? COMMENTARIES[0];
+  const { status, data } = useAsync(() => loadCommentary(source.id, book, chapter), [source.id, book, chapter]);
+  const entry = pickCommentaryEntry(data, verse);
+
+  return (
+    <div>
+      <label className="text-xs text-[var(--r-sub,#64748b)]">
+        Commentary{' '}
+        <select value={source.id} onChange={(e) => changeSource(e.target.value)}
+          className="rounded-lg border border-[var(--r-line,#cbd5e1)] bg-[var(--r-bg,#ffffff)] px-2 py-1 text-xs">
+          {COMMENTARIES.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
+        </select>
+      </label>
+      <div className="mt-2">
+        {status === 'loading' && <p className="text-xs text-[var(--r-sub,#64748b)]">Loading…</p>}
+        {status === 'empty' && <p className="text-xs text-[var(--r-sub,#64748b)]">{source.name} has no notes for this chapter.</p>}
+        {status === 'ready' && !entry && <p className="text-xs text-[var(--r-sub,#64748b)]">No notes at or before this verse in {source.name}.</p>}
+        {status === 'ready' && entry && (
+          <>
+            {entry.number !== verse && (
+              <p className="mb-1 text-[11px] text-[var(--r-sub,#64748b)]">Notes on the passage starting at verse {entry.number}.</p>
+            )}
+            <div className="max-h-96 overflow-y-auto whitespace-pre-line rounded-xl bg-[var(--r-bg,#ffffff)] p-3 text-[13px] leading-relaxed text-[var(--r-text,#334155)]">
+              {entry.text}
+            </div>
+          </>
+        )}
+      </div>
+      <p className="mt-2 text-[10px] text-[var(--r-sub,#64748b)]">{source.credit}</p>
+    </div>
+  );
+}
+
+function PersonDetails({ id }) {
+  const { status, data } = useAsync(() => loadPerson(id), [id]);
+  if (status === 'loading') return <p className="mt-1 text-xs text-[var(--r-sub,#64748b)]">Loading…</p>;
+  if (status === 'empty') return <p className="mt-1 text-xs text-[var(--r-sub,#64748b)]">No details available.</p>;
+  const era = (y) => `${Math.abs(y)}${y < 0 ? ' BC' : ' AD'}`;
+  return (
+    <div className="mt-1 space-y-1 text-xs leading-relaxed text-[var(--r-sub,#64748b)]">
+      {(data.description ?? []).map((d, i) => <p key={i}>{d}</p>)}
+      {!data.description?.length && <p>No description available.</p>}
+      {data.minYear != null && (
+        <p className="text-[var(--r-sub,#64748b)]">
+          Lived approx. {era(data.minYear)}{data.maxYear != null && data.maxYear !== data.minYear ? ` – ${era(data.maxYear)}` : ''}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export function PersonCard({ person }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <li className="rounded-xl bg-[var(--r-bg,#ffffff)] px-3 py-2">
+      <button type="button" onClick={() => setOpen((o) => !o)} className="w-full text-left text-sm font-semibold text-[var(--r-text,#334155)]">
+        {person.name} <span className="text-xs font-normal text-[var(--r-sub,#64748b)]">{open ? '▾' : '▸'}</span>
+      </button>
+      {open && <PersonDetails id={person.id} />}
+    </li>
+  );
+}
+
+export function PeoplePlacesTab({ book, chapter, verse }) {
+  const { status, data } = useAsync(() => loadTheographic(book, chapter), [book, chapter]);
+  if (status === 'loading') return <p className="text-xs text-[var(--r-sub,#64748b)]">Loading…</p>;
+  if (status === 'empty') return <p className="text-xs text-[var(--r-sub,#64748b)]">No people or places data for this chapter.</p>;
+  const here = (list) => list.filter((x) => x.verses?.includes(verse));
+  // Theographic lists some places twice (variant spellings) — collapse by name.
+  const places = [...new Map(here(data.places).map((p) => [p.name, p])).values()];
+  const people = here(data.people);
+  const events = here(data.events);
+  if (!people.length && !places.length && !events.length) {
+    return <p className="text-xs text-[var(--r-sub,#64748b)]">Nothing tagged on verse {verse}.</p>;
+  }
+  return (
+    <div className="space-y-3">
+      {people.length > 0 && (
+        <div>
+          <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-[var(--r-sub,#64748b)]">People</p>
+          <ul className="space-y-1">{people.map((p) => <PersonCard key={p.id} person={p} />)}</ul>
+        </div>
+      )}
+      {places.length > 0 && (
+        <div>
+          <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-[var(--r-sub,#64748b)]">Places</p>
+          <ul className="space-y-1">
+            {places.map((p) => (
+              <li key={p.id} className="flex items-center justify-between gap-2 rounded-xl bg-[var(--r-bg,#ffffff)] px-3 py-2 text-sm text-[var(--r-text,#334155)]">
+                <span>{p.name}{p.featureType && <span className="ml-1 text-xs text-[var(--r-sub,#64748b)]">{p.featureType}</span>}</span>
+                {p.latitude != null && p.longitude != null && (
+                  <a href={`https://www.openstreetmap.org/?mlat=${p.latitude}&mlon=${p.longitude}#map=8/${p.latitude}/${p.longitude}`}
+                    target="_blank" rel="noopener noreferrer" className="text-xs font-semibold text-sky-600 hover:underline">
+                    Map ↗
+                  </a>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+      {events.length > 0 && (
+        <div>
+          <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-[var(--r-sub,#64748b)]">Events</p>
+          <ul className="space-y-1">
+            {events.map((e) => (
+              <li key={e.id} className="rounded-xl bg-[var(--r-bg,#ffffff)] px-3 py-2 text-sm text-[var(--r-text,#334155)]">
+                {e.name}{e.startDate && <span className="ml-1 text-xs text-[var(--r-sub,#64748b)]">approx. AD {e.startDate}</span>}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+      <p className="text-[10px] text-[var(--r-sub,#64748b)]">
+        People, places and events: Theographic Bible Metadata, licensed CC BY-SA 4.0.
+      </p>
+    </div>
+  );
+}
+
+export default function StudyPanel({ book, chapter, verse, onClose }) {
+  const [tab, setTab] = useState('commentary');
+  const tabBtn = (id, label) => (
+    <button type="button" onClick={() => setTab(id)}
+      className={`rounded-lg px-3 py-1 text-xs font-semibold ${tab === id ? 'bg-slate-900 text-white' : 'bg-[var(--r-bg,#ffffff)] text-[var(--r-sub,#64748b)] hover:bg-slate-100'}`}>
+      {label}
+    </button>
+  );
+  return (
+    <div className="mt-2 mb-1 ml-6 rounded-2xl border border-indigo-100 bg-indigo-50 p-3">
+      <div className="mb-2 flex items-center justify-between gap-2">
+        <div className="flex gap-1">
+          {tabBtn('commentary', 'Commentary')}
+          {tabBtn('people', 'People & Places')}
+        </div>
+        <button type="button" onClick={onClose} className="rounded p-1 text-xs text-[var(--r-sub,#64748b)] hover:bg-[var(--r-bg,#ffffff)]" title="Close">✕</button>
+      </div>
+      {tab === 'commentary'
+        ? <CommentaryTab book={book} chapter={chapter} verse={verse} />
+        : <PeoplePlacesTab book={book} chapter={chapter} verse={verse} />}
+    </div>
+  );
+}

src/components/Toasts.jsx

@@ -0,0 +1,62 @@
+// App-wide toasts: short messages at the bottom of the screen, optionally with one
+// action button (usually "Undo"). Used instead of alert()/confirm() so a slip is
+// reversible and nothing blocks the page.
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { themeVars } from './reader/readerThemes.js';
+
+const ToastContext = createContext(null);
+
+// toast(message, { action: { label, onClick }, ms, tone: 'info' | 'error' }) -> id
+// Outside a provider (a page rendered on its own in a test) it quietly does nothing.
+const NOOP = { toast: () => 0, dismiss: () => {}, setTheme: () => {} };
+export const useToast = () => useContext(ToastContext) ?? NOOP;
+
+let nextId = 1;
+
+export function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+  const [theme, setTheme] = useState('paper'); // set by the app so toasts match the reading theme
+  const timers = useRef(new Map());
+
+  const dismiss = useCallback((id) => {
+    window.clearTimeout(timers.current.get(id));
+    timers.current.delete(id);
+    setToasts((list) => list.filter((t) => t.id !== id));
+  }, []);
+
+  const toast = useCallback((message, { action, ms, tone = 'info' } = {}) => {
+    const id = nextId++;
+    // Messages with an action stay long enough to read and react to.
+    const duration = ms ?? (action ? 8000 : tone === 'error' ? 6000 : 3500);
+    setToasts((list) => [...list.slice(-2), { id, message, action, tone }]);
+    timers.current.set(id, window.setTimeout(() => dismiss(id), duration));
+    return id;
+  }, [dismiss]);
+
+  useEffect(() => {
+    const live = timers.current;
+    return () => live.forEach((t) => window.clearTimeout(t));
+  }, []);
+
+  const value = useMemo(() => ({ toast, dismiss, setTheme }), [toast, dismiss]);
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <div style={themeVars(theme)} className="pointer-events-none fixed inset-x-0 bottom-0 z-[100] flex flex-col items-center gap-2 px-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] font-sans">
+        {toasts.map((t) => (
+          <div key={t.id} role={t.tone === 'error' ? 'alert' : 'status'}
+            className={`pointer-events-auto flex max-w-md items-center gap-3 rounded-full px-4 py-2.5 text-sm shadow-lg ${t.tone === 'error' ? 'bg-[var(--r-danger)] text-[var(--r-bg)]' : 'bg-[var(--r-text)] text-[var(--r-bg)]'}`}>
+            <span>{t.message}</span>
+            {t.action && (
+              <button type="button" onClick={() => { t.action.onClick(); dismiss(t.id); }}
+                className="shrink-0 rounded-full px-2 py-0.5 text-sm font-semibold underline underline-offset-2 hover:opacity-80">
+                {t.action.label}
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}

src/components/plans/CustomPlanBuilder.jsx

@@ -0,0 +1,275 @@
+// Form for creating or editing a custom reading plan (title, days, cover photo,
+// books and chapter ranges). Themed with the reader's --r-* colour variables.
+import { useRef, useState } from 'react';
+import { bookOptions, CHAPTER_COUNTS } from '../../utils/bibleUtils.jsx';
+import {
+  bookChapterCount, clampPlanDays, ALL_BOOKS, OT_BOOKS, NT_BOOKS, GOSPELS, PENTATEUCH, WISDOM_BOOKS,
+} from '../../utils/readingPlans.js';
+
+// Downscales a picked image file to a reasonable cover-photo size and returns
+// a data URL — no server upload endpoint needed, it's stored right on the plan.
+export function resizeImageToDataUrl(file, maxWidth = 960, quality = 0.82) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = () => reject(new Error('Could not read file.'));
+    reader.onload = () => {
+      const img = new Image();
+      img.onerror = () => reject(new Error('Could not decode image.'));
+      img.onload = () => {
+        const scale = Math.min(1, maxWidth / img.width);
+        const canvas = document.createElement('canvas');
+        canvas.width = Math.round(img.width * scale);
+        canvas.height = Math.round(img.height * scale);
+        canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
+        resolve(canvas.toDataURL('image/jpeg', quality));
+      };
+      img.src = reader.result;
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+const BOOK_PRESETS = [
+  ['All', ALL_BOOKS],
+  ['None', []],
+  ['Old Testament', OT_BOOKS],
+  ['New Testament', NT_BOOKS],
+  ['Gospels', GOSPELS],
+  ['Pentateuch', PENTATEUCH],
+  ['Psalms', ['PSA']],
+  ['Proverbs', ['PRO']],
+  ['Wisdom', WISDOM_BOOKS],
+];
+
+export default function CustomPlanBuilder({ initialValues, onSubmit, onCancel }) {
+  const [title, setTitle] = useState(initialValues?.title ?? '');
+  const [description, setDescription] = useState(initialValues?.description ?? '');
+  const [days, setDays] = useState(initialValues?.days ?? 30);
+  const [books, setBooks] = useState(initialValues?.books ?? []);
+  const [chapterRanges, setChapterRanges] = useState(initialValues?.chapterRanges ?? {});
+  const [image, setImage] = useState(initialValues?.image ?? null);
+  const [imageError, setImageError] = useState('');
+  const fileInputRef = useRef(null);
+  const isEditing = !!initialValues;
+
+  const toggleBook = (abbrev) => {
+    const isOn = books.includes(abbrev);
+    setBooks((prev) => (isOn ? prev.filter((b) => b !== abbrev) : [...prev, abbrev]));
+    if (isOn) {
+      setChapterRanges((prev) => {
+        if (!(abbrev in prev)) return prev;
+        const next = { ...prev };
+        delete next[abbrev];
+        return next;
+      });
+    }
+  };
+
+  const setChapterRange = (abbrev, key, value) => {
+    const total = CHAPTER_COUNTS[abbrev] ?? 1;
+    const clamped = Math.min(total, Math.max(1, Math.round(value) || 1));
+    setChapterRanges((prev) => ({
+      ...prev,
+      [abbrev]: { start: prev[abbrev]?.start ?? 1, end: prev[abbrev]?.end ?? total, [key]: clamped },
+    }));
+  };
+
+  const applyPreset = (list) => {
+    setBooks(list);
+    setChapterRanges({});
+  };
+
+  const pickImage = async (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = '';
+    if (!file) return;
+    try {
+      setImageError('');
+      setImage(await resizeImageToDataUrl(file));
+    } catch {
+      setImageError("Couldn't use that image.");
+    }
+  };
+
+  const totalChapters = books.reduce((sum, b) => sum + bookChapterCount(b, chapterRanges), 0);
+  const canCreate = title.trim().length > 0 && totalChapters > 0 && days >= 1;
+
+  return (
+    <div className="rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-5">
+      <h3 className="mb-3 text-sm font-semibold text-[var(--r-text)]">{isEditing ? 'Edit reading plan' : 'New reading plan'}</h3>
+      <div className="grid gap-3 sm:grid-cols-2">
+        <label className="text-sm text-[var(--r-text)]">
+          Title
+          <input
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="e.g. Advent Readings"
+            className="mt-1 w-full rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]"
+          />
+        </label>
+        <label className="text-sm text-[var(--r-text)]">
+          Days
+          <input
+            type="number"
+            min="1"
+            max="365"
+            value={days}
+            onChange={(e) => setDays(Number(e.target.value))}
+            className="mt-1 w-full rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]"
+          />
+        </label>
+      </div>
+      <label className="mt-3 block text-sm text-[var(--r-text)]">
+        Description <span className="text-[var(--r-sub)]">(optional)</span>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          rows={2}
+          className="mt-1 w-full rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]"
+        />
+      </label>
+
+      <div className="mt-3">
+        <span className="text-sm text-[var(--r-text)]">Cover photo <span className="text-[var(--r-sub)]">(optional)</span></span>
+        <div className="mt-1 flex items-center gap-3">
+          {image ? (
+            <img src={image} alt="" className="h-16 w-28 rounded-lg object-cover" />
+          ) : (
+            <div className="flex h-16 w-28 items-center justify-center rounded-lg bg-[var(--r-bg)] text-2xl">🖼️</div>
+          )}
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-3 py-1.5 text-sm font-semibold text-[var(--r-text)] hover:bg-black/5"
+          >
+            {image ? 'Change photo' : 'Choose photo'}
+          </button>
+          {image && (
+            <button type="button" onClick={() => setImage(null)} className="text-sm text-[var(--r-sub)] hover:text-rose-500">
+              Remove
+            </button>
+          )}
+          <input ref={fileInputRef} type="file" accept="image/*" onChange={pickImage} className="hidden" />
+        </div>
+        {imageError && <p className="mt-1 text-xs text-rose-500">{imageError}</p>}
+      </div>
+
+      <div className="mt-4">
+        <div className="mb-2 flex flex-wrap items-center gap-2">
+          <span className="text-sm font-semibold text-[var(--r-text)]">Books</span>
+          {BOOK_PRESETS.map(([label, list]) => (
+            <button
+              key={label}
+              type="button"
+              onClick={() => applyPreset(list)}
+              className="rounded-full border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-2.5 py-1 text-xs font-semibold text-[var(--r-text)] hover:bg-black/5"
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+        <p className="mb-2 text-xs text-[var(--r-sub)]">
+          Check a book to include the whole thing, or narrow it to a chapter range with the fields that appear.
+        </p>
+        <div className="grid gap-3 sm:grid-cols-2">
+          <div className="max-h-56 overflow-y-auto rounded-xl border border-[var(--r-line)] p-2">
+            <p className="mb-1 px-1 text-xs font-semibold uppercase tracking-wide text-[var(--r-sub)]">Old Testament</p>
+            {bookOptions.filter((b) => OT_BOOKS.includes(b.abbrev)).map((b) => (
+              <BookRow
+                key={b.abbrev}
+                book={b}
+                checked={books.includes(b.abbrev)}
+                range={chapterRanges[b.abbrev]}
+                onToggle={() => toggleBook(b.abbrev)}
+                onRangeChange={(key, value) => setChapterRange(b.abbrev, key, value)}
+              />
+            ))}
+          </div>
+          <div className="max-h-56 overflow-y-auto rounded-xl border border-[var(--r-line)] p-2">
+            <p className="mb-1 px-1 text-xs font-semibold uppercase tracking-wide text-[var(--r-sub)]">New Testament</p>
+            {bookOptions.filter((b) => NT_BOOKS.includes(b.abbrev)).map((b) => (
+              <BookRow
+                key={b.abbrev}
+                book={b}
+                checked={books.includes(b.abbrev)}
+                range={chapterRanges[b.abbrev]}
+                onToggle={() => toggleBook(b.abbrev)}
+                onRangeChange={(key, value) => setChapterRange(b.abbrev, key, value)}
+              />
+            ))}
+          </div>
+        </div>
+        <p className="mt-2 text-xs text-[var(--r-sub)]">
+          {books.length} book{books.length !== 1 ? 's' : ''} selected · {totalChapters} chapters
+          {days > 0 && totalChapters > 0 && ` · ~${(totalChapters / Math.min(days, totalChapters)).toFixed(1)} ch/day`}
+        </p>
+        {totalChapters > 0 && Number(days) > totalChapters && (
+          <p className="mt-1 text-xs text-[var(--r-accent)]">
+            That’s more days than chapters, so the plan will be {totalChapters} days, one chapter a day.
+          </p>
+        )}
+        {isEditing && (
+          books.join() !== initialValues.books.join()
+          || Number(days) !== initialValues.days
+          || JSON.stringify(chapterRanges) !== JSON.stringify(initialValues.chapterRanges ?? {})
+        ) && (
+          <p className="mt-2 text-xs text-amber-600">
+            Changing the books, chapters, or day count restarts progress for any run of this plan already in your list.
+          </p>
+        )}
+      </div>
+
+      <div className="mt-4 flex items-center gap-3">
+        <button
+          type="button"
+          disabled={!canCreate}
+          onClick={() => onSubmit({ title, description, days: clampPlanDays(books, chapterRanges, days), books, chapterRanges, image })}
+          className="rounded-xl bg-[var(--r-accent)] px-4 py-2 text-sm font-semibold text-[var(--r-on)] transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {isEditing ? 'Save changes' : 'Create plan'}
+        </button>
+        <button type="button" onClick={onCancel} className="text-sm text-[var(--r-sub)] hover:text-[var(--r-text)]">Cancel</button>
+      </div>
+    </div>
+  );
+}
+
+// One book row in the custom-plan builder: a checkbox, and — once checked — a
+// "ch. X–Y" chapter-range pair that defaults to the whole book.
+function BookRow({ book, checked, range, onToggle, onRangeChange }) {
+  const total = CHAPTER_COUNTS[book.abbrev] ?? 1;
+  return (
+    <label className="flex items-center gap-2 rounded-lg px-1 py-1 text-sm hover:bg-black/5">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={onToggle}
+        className="h-4 w-4 shrink-0 rounded border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] accent-[var(--r-accent)]"
+      />
+      <span className="flex-1">{book.name}</span>
+      {checked && total > 1 && (
+        <span className="flex shrink-0 items-center gap-1 text-xs text-[var(--r-sub)]" onClick={(e) => e.preventDefault()}>
+          ch.
+          <input
+            type="number"
+            min={1}
+            max={total}
+            value={range?.start ?? 1}
+            onChange={(e) => onRangeChange('start', e.target.value)}
+            className="w-11 rounded border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-1 py-0.5 text-center"
+          />
+          –
+          <input
+            type="number"
+            min={1}
+            max={total}
+            value={range?.end ?? total}
+            onChange={(e) => onRangeChange('end', e.target.value)}
+            className="w-11 rounded border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-1 py-0.5 text-center"
+          />
+          <span className="text-[var(--r-sub)]">/{total}</span>
+        </span>
+      )}
+    </label>
+  );
+}

src/components/plans/PlanDetailSheet.jsx

@@ -0,0 +1,135 @@
+// Detail for one plan. Two modes: an in-progress plan (days to tick or jump into,
+// its translation, catch-up / restart / remove) and a catalog plan (preview of the
+// first days, pick a translation, start it).
+import { useRef, useState } from 'react';
+import Sheet from '../reader/Sheet.jsx';
+import TranslationSelect from './TranslationSelect.jsx';
+import { resizeImageToDataUrl } from './CustomPlanBuilder.jsx';
+import { formatDayReadings, getPlanSchedule, daysBehindPace, nextUnreadDayIndex } from '../../utils/readingPlans.js';
+import { useOfflineSave } from '../../hooks/useOfflineSave.js';
+import { DownloadProgress } from '../OfflineSave.jsx';
+import { canSaveOffline } from '../../utils/offline.js';
+
+const btn = 'rounded-xl border border-[var(--r-line)] px-3 py-2 text-sm hover:bg-black/5';
+const primary = 'w-full rounded-xl bg-[var(--r-accent)] py-2.5 text-sm font-medium text-[var(--r-on)] hover:opacity-90 disabled:opacity-50';
+
+function ActiveBody({ plan, progress, onClose, actions }) {
+  const schedule = getPlanSchedule(plan.id);
+  const behind = daysBehindPace(plan, progress);
+  const pct = plan.days > 0 ? Math.round((progress.completedDays.length / plan.days) * 100) : 0;
+  const offline = useOfflineSave();
+  const translation = progress.translation ?? actions.defaultTranslation;
+  // The next week of readings, so a trip or a bad connection doesn't interrupt the plan
+  const upcoming = (() => {
+    const from = nextUnreadDayIndex(plan, progress.completedDays);
+    return from == null ? [] : schedule.slice(from, from + 7).flat();
+  })();
+  return (
+    <>
+      <div className="mb-3 flex items-center justify-between text-sm">
+        <span>{progress.completedDays.length} of {plan.days} days · {pct}%</span>
+        <span className="flex items-center gap-2">
+          <span className="text-xs text-[var(--r-sub)]">Read in</span>
+          <TranslationSelect value={progress.translation ?? actions.defaultTranslation} onChange={(t) => actions.setTranslation(progress.id, t)} />
+        </span>
+      </div>
+      <div className="mb-3 h-1.5 overflow-hidden rounded-full bg-[var(--r-line)]"><div className="h-full bg-[var(--r-accent)]" style={{ width: `${pct}%` }} /></div>
+      {behind >= 2 && (
+        <div className="mb-3 flex items-center justify-between rounded-xl border border-[var(--r-line)] px-3 py-2 text-xs">
+          <span className="text-[var(--r-sub)]">{behind} days behind pace</span>
+          <button type="button" onClick={() => actions.recalibrate(progress.id)} className="font-medium text-[var(--r-accent)] hover:underline">Catch me up</button>
+        </div>
+      )}
+      <div className="max-h-[38vh] overflow-y-auto rounded-xl border border-[var(--r-line)]">
+        {schedule.map((refs, i) => {
+          const done = progress.completedDays.includes(i);
+          return (
+            <div key={i} className="flex items-center gap-3 border-b border-[var(--r-line)] px-3 py-2 last:border-0">
+              <input type="checkbox" checked={done} onChange={() => actions.toggleDay(progress.id, i, plan.days)} className="h-4 w-4 shrink-0 accent-[var(--r-accent)]" aria-label={`Day ${i + 1} read`} />
+              <span className={`flex-1 text-sm ${done ? 'text-[var(--r-sub)] line-through' : ''}`}>Day {i + 1} · {formatDayReadings(refs)}</span>
+              <button type="button" onClick={() => { onClose(); actions.read(progress.id, i); }} className="shrink-0 text-xs font-medium text-[var(--r-accent)] hover:underline">Read</button>
+            </div>
+          );
+        })}
+      </div>
+      {upcoming.length > 0 && canSaveOffline(translation) && (
+        <div className="mt-3">
+          {offline.job
+            ? <DownloadProgress job={offline.job} onCancel={offline.cancel} />
+            : (
+              <button type="button" onClick={() => offline.saveRefs('the next 7 days', translation, upcoming)}
+                className="w-full rounded-xl border border-[var(--r-line)] px-3 py-2 text-xs text-[var(--r-sub)] hover:bg-black/5">
+                Save the next 7 days for offline ({translation})
+              </button>
+            )}
+        </div>
+      )}
+      <div className="mt-4 flex items-center justify-between text-xs">
+        <button type="button" onClick={() => { actions.restart(progress.id); onClose(); }} className="text-[var(--r-sub)] hover:text-[var(--r-text)]">Restart</button>
+        <button type="button" onClick={() => { actions.remove(progress.id); onClose(); }} className="text-[var(--r-danger,#b42318)] hover:underline">Remove</button>
+      </div>
+    </>
+  );
+}
+
+function CatalogBody({ plan, active, completedCount, onClose, actions }) {
+  const [translation, setTranslation] = useState(actions.defaultTranslation);
+  const [imageError, setImageError] = useState('');
+  const fileRef = useRef(null);
+  const schedule = getPlanSchedule(plan.id);
+  const chapters = schedule.reduce((n, d) => n + d.length, 0);
+  const pickImage = async (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = '';
+    if (!file) return;
+    try { setImageError(''); actions.updateCover(plan.id, await resizeImageToDataUrl(file)); } catch { setImageError('Couldn’t use that image.'); }
+  };
+  return (
+    <>
+      {plan.image && <img src={plan.image} alt="" onError={(e) => { e.currentTarget.style.display = 'none'; }} className="mb-3 h-32 w-full rounded-xl object-cover" style={{ objectPosition: plan.imageFocus ?? 'center' }} />}
+      <p className="text-sm text-[var(--r-sub)]">{plan.description || 'A custom reading plan.'}</p>
+      <p className="mt-2 text-xs text-[var(--r-sub)]">{plan.days} days · {chapters} chapters · about {(chapters / plan.days).toFixed(1)} a day{completedCount > 0 ? ` · completed ${completedCount}×` : ''}</p>
+
+      <p className="mb-1 mt-4 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">First days</p>
+      <div className="rounded-xl border border-[var(--r-line)]">
+        {schedule.slice(0, 5).map((refs, i) => (
+          <div key={i} className="border-b border-[var(--r-line)] px-3 py-1.5 text-sm last:border-0">Day {i + 1} · {formatDayReadings(refs)}</div>
+        ))}
+      </div>
+
+      {!active && (
+        <div className="mt-4 flex items-center justify-between text-sm">
+          <span>Read in</span>
+          <TranslationSelect value={translation} onChange={setTranslation} />
+        </div>
+      )}
+      <div className="mt-3">
+        {active
+          ? <button type="button" className={primary} onClick={() => { onClose(); actions.read(active.id, actions.nextDay(plan, active)); }}>Continue reading</button>
+          : <button type="button" className={primary} onClick={() => { actions.start(plan.id, translation); onClose(); }}>{completedCount > 0 ? 'Start again' : 'Start plan'}</button>}
+      </div>
+
+      {plan.custom && (
+        <div className="mt-4 flex flex-wrap items-center gap-3 border-t border-[var(--r-line)] pt-3 text-xs">
+          <button type="button" onClick={() => { onClose(); actions.edit(plan.id); }} className="text-[var(--r-sub)] hover:text-[var(--r-text)]">Edit plan</button>
+          <button type="button" onClick={() => fileRef.current?.click()} className="text-[var(--r-sub)] hover:text-[var(--r-text)]">{plan.image ? 'Change cover' : 'Add cover photo'}</button>
+          {plan.image && <button type="button" onClick={() => actions.updateCover(plan.id, null)} className="text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]">Remove cover</button>}
+          <button type="button" onClick={() => { actions.delete(plan.id); onClose(); }} className="ml-auto text-[var(--r-danger,#b42318)] hover:underline">Delete</button>
+          <input ref={fileRef} type="file" accept="image/*" onChange={pickImage} className="hidden" />
+          {imageError && <p className="w-full text-[var(--r-danger,#b42318)]">{imageError}</p>}
+        </div>
+      )}
+    </>
+  );
+}
+
+export default function PlanDetailSheet({ plan, progress, active, completedCount, onClose, actions }) {
+  if (!plan) return null;
+  return (
+    <Sheet open onClose={onClose} title={<span>{plan.icon ? `${plan.icon} ` : ''}{plan.title}</span>}>
+      {progress
+        ? <ActiveBody plan={plan} progress={progress} onClose={onClose} actions={actions} />
+        : <CatalogBody plan={plan} active={active} completedCount={completedCount} onClose={onClose} actions={actions} />}
+    </Sheet>
+  );
+}

src/components/plans/TranslationSelect.jsx

@@ -0,0 +1,11 @@
+import { READER_TRANSLATIONS } from '../../hooks/useBibleReader.js';
+
+// Every Bible the app can read in — used for a plan's own translation.
+export default function TranslationSelect({ value, onChange, className = '' }) {
+  return (
+    <select value={value} onChange={(e) => onChange(e.target.value)}
+      className={`rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-1 text-sm text-[var(--r-text)] ${className}`}>
+      {READER_TRANSLATIONS.map((t) => <option key={t.id} value={t.id}>{t.id} · {t.name}</option>)}
+    </select>
+  );
+}

src/components/reader/AudioSheet.jsx

@@ -0,0 +1,39 @@
+import Sheet from './Sheet.jsx';
+import AudioPlayer from '../AudioPlayer.jsx';
+
+// Wraps the existing player. Audio is BSB-only, so licensed translations get a note.
+export default function AudioSheet({ open, onClose, translation, bookName, chapter, audio, narrator, onNarrator, onNext, nextDisabled }) {
+  return (
+    <Sheet open={open} onClose={onClose} title="Listen">
+      <AudioPlayer
+        title={`${bookName} ${chapter}`}
+        subtitle={audio.state.status === 'error'
+          ? "Couldn't load audio for this chapter/narrator."
+          : translation === 'ESV'
+            ? 'ESV audio, read by David Cochran Heath. It follows the chapter as you browse.'
+            : translation !== 'BSB'
+            ? `Audio is BSB only — no ${translation} audio is available, so it won't match the ${translation} text on screen.`
+            : 'Audio follows the chapter as you browse.'}
+        status={audio.state.status}
+        currentTime={audio.progress.currentTime}
+        duration={audio.progress.duration}
+        onPlay={audio.play}
+        onTogglePause={audio.togglePause}
+        onSeekBack={() => audio.seek(-10)}
+        onSeekForward={() => audio.seek(10)}
+        onSeekTo={audio.seekTo}
+        onNext={onNext}
+        nextDisabled={nextDisabled}
+        onStop={audio.stop}
+        controls={translation === 'ESV' ? null : (
+          <select value={narrator} onChange={(e) => onNarrator(e.target.value)}
+            className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-1.5 text-sm text-[var(--r-text)]">
+            <option value="david">David</option>
+            <option value="hays">Hays</option>
+            <option value="souer">Souer</option>
+          </select>
+        )}
+      />
+    </Sheet>
+  );
+}

src/components/reader/MarksSheet.jsx

@@ -0,0 +1,94 @@
+// Everything you have marked in the Bible: highlights (grouped and filtered by colour, each colour
+// named by you — "Promises", "Commands") and bookmarks. Opens from the bookmark button in the top bar.
+import { useState } from 'react';
+import Sheet from './Sheet.jsx';
+import { CloseIcon } from './icons.jsx';
+import { COLOR_NAMES, COLOR_SUGGESTIONS, HIGHLIGHT_COLORS, colorTitle } from '../../utils/highlightColors.js';
+
+const tabBtn = (active) => `rounded-full border px-3 py-1 text-xs font-medium ${active ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`;
+
+export default function MarksSheet({
+  open, onClose, bookmarks, highlights, colorLabels, onSetLabel, onJump, onRemoveBookmark, onRemoveHighlight,
+}) {
+  const [tab, setTab] = useState('highlights');
+  const [filter, setFilter] = useState(null); // a highlight colour, or null for all
+  const [editing, setEditing] = useState(false);
+
+  const counts = Object.fromEntries(HIGHLIGHT_COLORS.map((c) => [c, highlights.filter((h) => h.color === c).length]));
+  const shown = filter ? highlights.filter((h) => h.color === filter) : highlights;
+  // Colours in use that aren't one of the picker's (older data) still get listed
+  const total = highlights.length + bookmarks.length;
+
+  return (
+    <Sheet open={open} onClose={onClose} label="Bookmarks and highlights" title={`Bookmarks & highlights${total ? ` (${total})` : ''}`}>
+      <div role="tablist" aria-label="What to show" className="mb-3 flex gap-1.5">
+        <button type="button" role="tab" aria-selected={tab === 'highlights'} onClick={() => setTab('highlights')} className={tabBtn(tab === 'highlights')}>Highlights ({highlights.length})</button>
+        <button type="button" role="tab" aria-selected={tab === 'bookmarks'} onClick={() => setTab('bookmarks')} className={tabBtn(tab === 'bookmarks')}>Bookmarks ({bookmarks.length})</button>
+      </div>
+
+      {tab === 'highlights' && (
+        <>
+          {/* Colour key: tap a colour to show only that one; "Name colours" lets you say what each means */}
+          <div className="mb-3 flex flex-wrap items-center gap-1.5" role="group" aria-label="Filter by colour">
+            <button type="button" onClick={() => setFilter(null)} aria-pressed={filter === null} className={tabBtn(filter === null)}>All</button>
+            {HIGHLIGHT_COLORS.map((c) => (
+              <button key={c} type="button" onClick={() => setFilter(filter === c ? null : c)} aria-pressed={filter === c}
+                title={colorTitle(c, colorLabels)}
+                className={`flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs ${filter === c ? 'border-[var(--r-text)]' : 'border-[var(--r-line)] hover:bg-black/5'}`}>
+                <span className="h-3 w-3 rounded-full border border-black/10" style={{ backgroundColor: c }} />
+                <span>{colorLabels[c] || COLOR_NAMES[c]}</span>
+                <span className="text-[var(--r-sub)]">{counts[c]}</span>
+              </button>
+            ))}
+            <button type="button" onClick={() => setEditing((e) => !e)} className="ml-auto text-xs text-[var(--r-accent)] hover:underline">{editing ? 'Done' : 'Name colours'}</button>
+          </div>
+
+          {editing && (
+            <div className="mb-3 grid gap-2 rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] p-3 sm:grid-cols-2">
+              {HIGHLIGHT_COLORS.map((c) => (
+                <label key={c} className="flex items-center gap-2 text-xs text-[var(--r-sub)]">
+                  <span className="h-4 w-4 shrink-0 rounded-full border border-black/10" style={{ backgroundColor: c }} />
+                  <span className="sr-only">{COLOR_NAMES[c]} means</span>
+                  <input value={colorLabels[c] ?? ''} maxLength={30} onChange={(e) => onSetLabel(c, e.target.value)} placeholder={COLOR_SUGGESTIONS[c]}
+                    className="min-w-0 flex-1 rounded-lg border border-[var(--r-line)] bg-transparent px-2 py-1 text-sm text-[var(--r-text)] outline-none focus:border-[var(--r-accent)]" />
+                </label>
+              ))}
+            </div>
+          )}
+
+          {highlights.length === 0 ? (
+            <p className="text-sm text-[var(--r-sub)]">No highlights yet. Select some words in a verse and pick a colour to save them here.</p>
+          ) : shown.length === 0 ? (
+            <p className="text-sm text-[var(--r-sub)]">Nothing highlighted in that colour yet.</p>
+          ) : shown.map((h) => (
+            <div key={h.id} className="flex items-start gap-2 rounded-lg px-1 py-1.5 hover:bg-black/5">
+              <span className="mt-1 h-3 w-3 shrink-0 rounded-full border border-black/10" style={{ backgroundColor: h.color }} title={colorTitle(h.color, colorLabels)} />
+              <button type="button" onClick={() => onJump(h.book, h.chapter, h.verse)} className="min-w-0 flex-1 text-left text-sm">
+                <span className="font-medium">{h.bookName} {h.chapter}:{h.verse}</span>
+                {colorLabels[h.color] && <span className="ml-1.5 text-[11px] text-[var(--r-sub)]">{colorLabels[h.color]}</span>}
+                {h.text && <span className="mt-0.5 block font-serif text-[var(--r-sub)]">“{h.text}”</span>}
+              </button>
+              <button type="button" onClick={() => onRemoveHighlight(h)} aria-label={`Remove highlight on ${h.bookName} ${h.chapter}:${h.verse}`}
+                className="rounded p-1 text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]"><CloseIcon /></button>
+            </div>
+          ))}
+        </>
+      )}
+
+      {tab === 'bookmarks' && (
+        bookmarks.length === 0 ? (
+          <p className="text-sm text-[var(--r-sub)]">No bookmarks yet. Tap a verse, then the bookmark icon, to save it here.</p>
+        ) : bookmarks.map((e) => (
+          <div key={e.key} className="flex items-center gap-2 rounded-lg px-1 py-1.5 hover:bg-black/5">
+            <span className="h-3 w-3 shrink-0 rounded-full" style={{ backgroundColor: e.color }} />
+            <button type="button" onClick={() => onJump(e.bookAbbrev, e.chapter, e.verse)} className="flex-1 truncate text-left text-sm">
+              {e.bookName} {e.chapter}:{e.verse}
+            </button>
+            <button type="button" onClick={() => onRemoveBookmark(e)} aria-label={`Remove bookmark on ${e.bookName} ${e.chapter}:${e.verse}`}
+              className="rounded p-1 text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]"><CloseIcon /></button>
+          </div>
+        ))
+      )}
+    </Sheet>
+  );
+}

src/components/reader/NavigatorSheet.jsx

@@ -0,0 +1,59 @@
+// One place to pick translation, book and chapter (replaces three dropdowns).
+import { useState } from 'react';
+import Sheet from './Sheet.jsx';
+import { bookOptions, CHAPTER_COUNTS } from '../../utils/bibleUtils.jsx';
+import { READER_TRANSLATIONS } from '../../utils/bibleText.js';
+import { SaveBookOffline } from '../OfflineSave.jsx';
+
+const NT_START = bookOptions.findIndex((b) => b.abbrev === 'MAT');
+const chip = 'rounded-lg border px-2 py-2 text-center text-sm transition';
+
+export default function NavigatorSheet({ open, onClose, bookAbbrev, chapter, translation, onTranslation, translationNote, onGo, offline }) {
+  const [pickedBook, setPickedBook] = useState(null); // book abbrev whose chapters are showing
+  const close = () => { setPickedBook(null); onClose(); };
+  const book = pickedBook ? bookOptions.find((b) => b.abbrev === pickedBook) : null;
+
+  const bookButton = (b) => (
+    <button key={b.abbrev} type="button" onClick={() => setPickedBook(b.abbrev)}
+      className={`${chip} truncate ${b.abbrev === bookAbbrev ? 'border-[var(--r-accent)] text-[var(--r-accent)]' : 'border-[var(--r-line)] hover:bg-black/5'}`}>
+      {b.name}
+    </button>
+  );
+
+  return (
+    <Sheet open={open} onClose={close} label="Go to" title={book ? (
+      <button type="button" onClick={() => setPickedBook(null)} className="text-[var(--r-sub)] hover:text-[var(--r-text)]">‹ All books · <span className="text-[var(--r-text)]">{book.name}</span></button>
+    ) : 'Go to'}>
+      {!book && (
+        <>
+          <div className="mb-3 flex flex-wrap gap-1.5">
+            {READER_TRANSLATIONS.map((t) => (
+              <button key={t.id} type="button" onClick={() => onTranslation(t.id)} title={t.name}
+                className={`rounded-full border px-3 py-1 text-xs font-medium ${t.id === translation ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`}>
+                {t.id}
+              </button>
+            ))}
+          </div>
+          {translationNote && <p className="-mt-1 mb-3 text-[11px] text-[var(--r-sub)]">{translationNote}</p>}
+          <p className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Old Testament</p>
+          <div className="mb-4 grid grid-cols-3 gap-1.5 sm:grid-cols-4">{bookOptions.slice(0, NT_START).map(bookButton)}</div>
+          <p className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">New Testament</p>
+          <div className="grid grid-cols-3 gap-1.5 sm:grid-cols-4">{bookOptions.slice(NT_START).map(bookButton)}</div>
+        </>
+      )}
+      {book && (
+        <>
+        <div className="grid grid-cols-6 gap-1.5 sm:grid-cols-8">
+          {Array.from({ length: CHAPTER_COUNTS[book.abbrev] ?? 1 }, (_, i) => i + 1).map((n) => (
+            <button key={n} type="button" onClick={() => { onGo(book.abbrev, n); close(); }}
+              className={`${chip} ${book.abbrev === bookAbbrev && n === chapter ? 'border-[var(--r-accent)] bg-[var(--r-accent)] text-[var(--r-on)]' : 'border-[var(--r-line)] hover:bg-black/5'}`}>
+              {n}
+            </button>
+          ))}
+        </div>
+        {offline && <SaveBookOffline offline={offline} translation={translation} book={book.abbrev} name={book.name} />}
+        </>
+      )}
+    </Sheet>
+  );
+}

src/components/reader/PlanFooter.jsx

@@ -0,0 +1,32 @@
+// Card at the end of the chapter while reading a plan: step to the next chapter of
+// today's reading, or finish the day and roll into the next one.
+export default function PlanFooter({ info, label, onNext, onNextDay, onFinish }) {
+  if (!info || info.position === 0) return null;
+  const last = info.position === info.total;
+  const nextRef = !last ? info.refs[info.position] : null;
+  const btn = 'rounded-full bg-[var(--r-accent)] px-5 py-2 text-sm font-medium text-[var(--r-on)]';
+  return (
+    <div className="mx-auto mt-10 max-w-md rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-4 text-center font-sans">
+      <p className="text-xs text-[var(--r-sub)]">{info.plan.title} · Day {info.dayIndex + 1}</p>
+      {!last && (
+        <>
+          <p className="mb-3 mt-1 text-sm font-medium text-[var(--r-text)]">{info.total - info.position} more chapter{info.total - info.position === 1 ? '' : 's'} today</p>
+          <button type="button" onClick={onNext} className={btn}>Next: {label(nextRef)}</button>
+        </>
+      )}
+      {last && info.nextDayRefs?.length > 0 && (
+        <>
+          <p className="mb-3 mt-1 text-sm font-medium text-[var(--r-text)]">That’s Day {info.dayIndex + 1}</p>
+          <button type="button" onClick={onNextDay} className={btn}>Mark read · Day {info.dayIndex + 2}: {label(info.nextDayRefs[0])}</button>
+          <div><button type="button" onClick={onFinish} className="mt-2 text-xs text-[var(--r-sub)] underline">Mark read and stop for today</button></div>
+        </>
+      )}
+      {last && !info.nextDayRefs?.length && (
+        <>
+          <p className="mb-3 mt-1 text-sm font-medium text-[var(--r-text)]">Last day of the plan</p>
+          <button type="button" onClick={onFinish} className={btn}>{info.done ? 'Plan complete' : 'Finish plan'}</button>
+        </>
+      )}
+    </div>
+  );
+}

src/components/reader/PlanSheet.jsx

@@ -0,0 +1,75 @@
+// The plan's control room, one tap from the reader: pick the day, tick chapters,
+// choose the Bible this plan is read in, and jump to another active plan.
+import Sheet from './Sheet.jsx';
+import { ChevronLeft, ChevronRight, CheckIcon } from './icons.jsx';
+import { READER_TRANSLATIONS } from '../../hooks/useBibleReader.js';
+import { formatDayReadings } from '../../utils/readingPlans.js';
+
+export default function PlanSheet({
+  open, onClose, info, translation, currentKey, streak, otherPlans, studyBusy,
+  onDay, onToggleChapter, onGoChapter, onTranslation, onToggleDay, onSwitchPlan, onListen, onStudy, onLeave,
+}) {
+  if (!info) return null;
+  const label = (r) => formatDayReadings([r]);
+  return (
+    <Sheet open={open} onClose={onClose} title={info.plan.title}>
+      <div className="mb-1 flex items-center justify-between">
+        <button type="button" onClick={() => onDay(-1)} disabled={info.dayIndex <= 0} aria-label="Previous day"
+          className="rounded-lg p-1.5 text-[var(--r-sub)] hover:bg-black/5 disabled:opacity-30"><ChevronLeft /></button>
+        <span className="text-sm font-medium">Day {info.dayIndex + 1} of {info.plan.days}{info.done ? ' · read' : ''}</span>
+        <button type="button" onClick={() => onDay(1)} disabled={info.dayIndex >= info.plan.days - 1} aria-label="Next day"
+          className="rounded-lg p-1.5 text-[var(--r-sub)] hover:bg-black/5 disabled:opacity-30"><ChevronRight /></button>
+      </div>
+
+      <p className="mb-1 mt-3 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Reading</p>
+      {info.refs.map((r) => {
+        const key = `${r.book}.${r.chapter}`;
+        const read = info.readSet.has(key);
+        return (
+          <div key={key} className="flex items-center gap-3 border-b border-[var(--r-line)] py-2">
+            <button type="button" onClick={() => onToggleChapter(key)} aria-label={read ? 'Mark unread' : 'Mark read'}
+              className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-[1.5px] ${read ? 'border-[var(--r-accent)] bg-[var(--r-accent)] text-[var(--r-on)]' : 'border-[var(--r-sub)] text-transparent'}`}>
+              <span className="scale-75"><CheckIcon /></span>
+            </button>
+            <button type="button" onClick={() => onGoChapter(r)} className={`flex-1 text-left text-sm ${key === currentKey ? 'font-medium' : ''}`}>{label(r)}</button>
+            {key === currentKey && <span className="rounded-full border border-[var(--r-line)] px-2 py-0.5 text-[10px] text-[var(--r-sub)]">reading</span>}
+          </div>
+        );
+      })}
+      <button type="button" onClick={onToggleDay}
+        className="mt-3 w-full rounded-xl border border-[var(--r-line)] py-2 text-sm hover:bg-black/5">
+        {info.done ? 'Mark this day unread' : 'Mark the whole day read'}
+      </button>
+
+      <p className="mb-1 mt-4 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">This plan</p>
+      <div className="flex items-center justify-between py-1.5 text-sm">
+        <span>Read in</span>
+        <select value={translation} onChange={(e) => onTranslation(e.target.value)}
+          className="rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-1 text-sm text-[var(--r-text)]">
+          {READER_TRANSLATIONS.map((t) => <option key={t.id} value={t.id}>{t.id} · {t.name}</option>)}
+        </select>
+      </div>
+      <div className="flex items-center justify-between py-1.5 text-sm">
+        <span>Streak</span><span className="text-[var(--r-sub)]">{streak.current} day{streak.current === 1 ? '' : 's'}</span>
+      </div>
+      <div className="mt-2 flex gap-2">
+        <button type="button" onClick={onListen} className="flex-1 rounded-xl border border-[var(--r-line)] py-2 text-sm hover:bg-black/5">Listen</button>
+        <button type="button" onClick={onStudy} disabled={studyBusy} className="flex-1 rounded-xl border border-[var(--r-line)] py-2 text-sm hover:bg-black/5 disabled:opacity-50">{studyBusy ? 'Building…' : 'Study this day'}</button>
+      </div>
+
+      {otherPlans.length > 0 && (
+        <>
+          <p className="mb-1 mt-4 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Other plans</p>
+          {otherPlans.map((o) => (
+            <button key={o.progress.id} type="button" onClick={() => onSwitchPlan(o)}
+              className="flex w-full items-center justify-between rounded-lg px-1 py-2 text-left text-sm hover:bg-black/5">
+              <span className="truncate">{o.plan.title}</span>
+              <span className="ml-3 shrink-0 text-xs text-[var(--r-sub)]">Day {o.dayIndex + 1}</span>
+            </button>
+          ))}
+        </>
+      )}
+      <button type="button" onClick={onLeave} className="mt-4 w-full text-center text-xs text-[var(--r-sub)] underline">Leave plan (keep reading on my own)</button>
+    </Sheet>
+  );
+}

src/components/reader/PlanStrip.jsx

@@ -0,0 +1,39 @@
+// Thin strip under the top bar while reading a plan: which plan and day, one dot
+// per chapter of today's reading (filled = read, ringed = the chapter on screen),
+// and the translation. Tapping it opens the plan sheet. When you've wandered off
+// today's chapters (e.g. following a cross-reference) it offers a way back.
+export default function PlanStrip({ info, translation, inPlan, notice, onOpen, onJoin, onDot, onBackToDay }) {
+  if (!info && !notice) return null;
+  return (
+    <div className="mx-auto flex max-w-2xl flex-col gap-1 px-3 pt-2 font-sans">
+      {notice && <p className="rounded-lg bg-[var(--r-bar)] px-3 py-1.5 text-xs text-[var(--r-accent)]">{notice}</p>}
+      {info && (
+        <div className="rounded-xl bg-[var(--r-bar)] px-3 py-2 text-xs text-[var(--r-sub)]">
+          <button type="button" onClick={inPlan ? onOpen : onJoin} className="flex w-full items-center justify-between gap-3 text-left">
+            <span className="truncate font-medium text-[var(--r-text)]">{info.plan.title} · Day {info.dayIndex + 1}</span>
+            <span className="shrink-0">{inPlan ? translation : 'Open plan'}</span>
+          </button>
+          {inPlan && info.position === 0 && (
+            <button type="button" onClick={onBackToDay} className="mt-1.5 rounded-full border border-[var(--r-line)] px-3 py-1 text-[11px] text-[var(--r-accent)] hover:bg-black/5">
+              Back to today’s reading
+            </button>
+          )}
+          {inPlan && info.position > 0 && (
+            <div className="mt-1.5 flex items-center gap-1.5">
+              {info.refs.map((r, i) => {
+                const key = `${r.book}.${r.chapter}`;
+                const read = info.readSet.has(key);
+                const current = i + 1 === info.position;
+                return (
+                  <button key={key} type="button" onClick={() => onDot(r)} aria-label={`Go to chapter ${r.chapter}`}
+                    className={`h-2.5 w-2.5 rounded-full border-[1.5px] ${read ? 'border-[var(--r-accent)] bg-[var(--r-accent)]' : 'border-[var(--r-sub)]'} ${current ? 'ring-2 ring-[var(--r-line)]' : ''}`} />
+                );
+              })}
+              <span className="ml-auto">{info.done ? 'Day read' : `${info.position} of ${info.total}`}</span>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/reader/ReaderBars.jsx

@@ -0,0 +1,60 @@
+// Top and bottom chrome for the reader. Everything stays one tap away; focus
+// mode hides both.
+import { ChevronLeft, ChevronRight, ChevronDown, SearchIcon, LinkIcon, PenIcon, HeadphonesIcon, FocusIcon, CheckIcon } from './icons.jsx';
+import { BookmarkIcon } from '../../utils/bibleUtils.jsx';
+
+const iconBtn = 'flex h-9 w-9 items-center justify-center rounded-lg text-[var(--r-sub)] transition hover:bg-black/5 disabled:opacity-30 disabled:hover:bg-transparent';
+
+export function TopBar({ title, onBack, onOpenNavigator, onSearch, onBookmarks, bookmarkCount, onSettings, onDoneDrawing }) {
+  return (
+    <div className="safe-top sticky top-0 z-30 border-b border-[var(--r-line)] bg-[var(--r-bar)] font-sans">
+      <div className="mx-auto flex h-12 max-w-4xl items-center gap-1 px-2">
+        <button type="button" onClick={onBack} className="flex h-9 items-center gap-0.5 rounded-lg pl-1 pr-2 text-[var(--r-sub)] transition hover:bg-black/5" aria-label="Back to home"><ChevronLeft /><span className="hidden text-xs sm:inline">Home</span></button>
+        <button type="button" onClick={onOpenNavigator}
+          className="mx-auto flex min-w-0 items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-[var(--r-text)] hover:bg-black/5">
+          <span className="truncate">{title}</span><ChevronDown />
+        </button>
+        {onDoneDrawing ? (
+          <button type="button" onClick={onDoneDrawing}
+            className="mr-1 flex items-center gap-1.5 rounded-full bg-[var(--r-accent)] px-4 py-1.5 text-xs font-medium text-[var(--r-on)]">
+            <CheckIcon />Done drawing
+          </button>
+        ) : (
+          <>
+            <button type="button" onClick={onSearch} className={iconBtn} aria-label="Search"><SearchIcon /></button>
+            <button type="button" onClick={onBookmarks} className={`${iconBtn} relative ${bookmarkCount ? 'text-[var(--r-accent)]' : ''}`} aria-label="Bookmarks">
+              <BookmarkIcon filled={bookmarkCount > 0} />
+            </button>
+            <button type="button" onClick={onSettings} className={`${iconBtn} w-10 text-sm font-medium`} aria-label="Reading settings">Aa</button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function BottomBar({
+  onPrev, onNext, prevDisabled, nextDisabled,
+  onAudio, audioActive, onPen, onCrossRefs, crossRefsOn, onFocus, primary,
+}) {
+  const active = 'text-[var(--r-accent)]';
+  return (
+    <div className="fixed inset-x-0 bottom-0 z-30 border-t border-[var(--r-line)] bg-[var(--r-bar)] pb-[env(safe-area-inset-bottom)] font-sans">
+      <div className="mx-auto flex h-14 max-w-4xl items-center gap-0.5 px-2">
+        <button type="button" onClick={onPrev} disabled={prevDisabled} className={iconBtn} aria-label="Previous chapter"><ChevronLeft /></button>
+        <button type="button" onClick={onAudio} className={`${iconBtn} ${audioActive ? active : ''}`} aria-label="Listen"><HeadphonesIcon /></button>
+        <button type="button" onClick={onPen} className={iconBtn} aria-label="Draw notes"><PenIcon /></button>
+        <button type="button" onClick={onCrossRefs} className={`${iconBtn} ${crossRefsOn ? active : ''}`} aria-label="Show cross-references under verses"><LinkIcon /></button>
+        <button type="button" onClick={onFocus} className={iconBtn} aria-label="Hide controls"><FocusIcon /></button>
+        <div className="mx-auto" />
+        {primary && (
+          <button type="button" onClick={primary.onClick}
+            className="mr-1 flex items-center gap-1.5 rounded-full bg-[var(--r-accent)] px-4 py-2 text-xs font-medium text-[var(--r-on)]">
+            {primary.done ? null : <CheckIcon />}{primary.label}
+          </button>
+        )}
+        <button type="button" onClick={onNext} disabled={nextDisabled} className={iconBtn} aria-label="Next chapter"><ChevronRight /></button>
+      </div>
+    </div>
+  );
+}

src/components/reader/ReaderText.jsx

@@ -0,0 +1,153 @@
+// The page itself: chapter heading, translation notice, and verses set in a
+// serif face. Tap a verse to open the verse sheet; select text to highlight.
+import { formatCrossRef } from '../../utils/wordStudy.js';
+
+// How each typeface choice is set. "Easy to read" is a sans face with extra letter and word spacing.
+const FONT_STYLES = {
+  serif: { fontFamily: undefined },
+  sans: { fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif" },
+  easy: { fontFamily: "'Atkinson Hyperlegible', Verdana, 'Trebuchet MS', ui-sans-serif, sans-serif", letterSpacing: '0.02em', wordSpacing: '0.12em' },
+};
+const LINE_HEIGHTS = { snug: 1.6, normal: 1.85, airy: 2.15 };
+
+// `parallel` ({ translation, name, notice, verses, loading, error }) shows a second Bible beside the first.
+export default function ReaderText({
+  title, translation, translationId, notice, verses, loading, error, layout, fontSize, wide,
+  font = 'serif', spacing = 'normal', showVerseNumbers = true, parallel = null,
+  bookmarks, bookKey, chapter, selectedVerse, onSelectVerse, renderVerseText, searchLower,
+  crossRefs, showCrossRefs, onSelectionEnd, footer,
+}) {
+  const handleTap = (n) => {
+    const sel = window.getSelection();
+    if (sel && !sel.isCollapsed && sel.toString().trim()) return; // user is selecting text, not tapping
+    onSelectVerse(selectedVerse === n ? null : n);
+  };
+
+  const verseProps = (v) => {
+    const bm = bookmarks[`${bookKey}-${chapter}-${v.number}`];
+    const selected = selectedVerse === v.number;
+    return {
+      id: `reader-verse-${v.number}`,
+      'data-verse-num': v.number,
+      onClick: () => handleTap(v.number),
+      // Verses can be reached and chosen from the keyboard too
+      role: 'button',
+      tabIndex: 0,
+      'aria-pressed': selected,
+      onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleTap(v.number); } },
+      className: 'cursor-pointer rounded-sm transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--r-accent)]',
+      style: selected
+        ? { backgroundColor: 'var(--r-hl)' }
+        : bm ? { backgroundColor: `${bm}66`, boxShadow: `0 0 0 2px ${bm}66` } : undefined,
+    };
+  };
+
+  const chips = (v) => showCrossRefs && crossRefs?.[v.number]?.length > 0 && (
+    <span className="ml-1 inline-flex flex-wrap gap-1 align-baseline font-sans">
+      {crossRefs[v.number].slice(0, 4).map((ref, i) => (
+        <span key={i} className="rounded-full border border-[var(--r-line)] px-1.5 py-px text-[10px] text-[var(--r-sub)]">{formatCrossRef(ref)}</span>
+      ))}
+    </span>
+  );
+
+  const num = (n) => (showVerseNumbers ? <sup className="mr-1 select-none font-sans text-[0.6em] text-[var(--r-sub)]">{n}</sup> : null);
+
+  // Both Bibles by verse number, so a verse one translation leaves out still lines up with the other.
+  const parallelRows = parallel && !parallel.error ? (() => {
+    const second = new Map(parallel.verses.map((v) => [v.number, v]));
+    const first = new Map(verses.map((v) => [v.number, v]));
+    return [...new Set([...first.keys(), ...second.keys()])].sort((a, b) => a - b)
+      .map((n) => ({ number: n, first: first.get(n), second: second.get(n) }));
+  })() : null;
+  const sideBySide = !!parallel;
+  const bodyStyle = {
+    ...FONT_STYLES[font],
+    lineHeight: LINE_HEIGHTS[spacing] ?? LINE_HEIGHTS.normal,
+  };
+  // The page grows with the screen: type is 18px on a phone, ~20px on an iPad and ~24px on a big
+  // monitor (times your text-size choice), and the column is measured in the type's own width (em), so
+  // the line length stays comfortable (~70 characters) instead of becoming a narrow strip on a wide
+  // screen. Two columns / side-by-side take more room.
+  const pageStyle = {
+    fontSize: `calc(clamp(1.125rem, 0.9rem + 0.7vw, 1.55rem) * ${fontSize})`,
+    maxWidth: wide || sideBySide ? 'min(100%, 72em)' : 'min(100%, 40em)',
+  };
+
+  return (
+    <article
+      className="mx-auto px-5 pb-32 pt-6 text-[var(--r-text)] md:px-8"
+      style={pageStyle}
+      onPointerUp={onSelectionEnd}
+    >
+      <header className="mb-5 text-center">
+        <h1 className="font-serif text-3xl font-normal tracking-tight">{title}</h1>
+        <p className="mt-1 font-sans text-xs text-[var(--r-sub)]">{translation}{parallel ? ` · beside ${parallel.name}` : ''}</p>
+      </header>
+
+      {loading && <ChapterSkeleton />}
+      {error && <p role="alert" className="text-center font-sans text-sm text-[var(--r-danger,#b42318)]">{error}</p>}
+      {!loading && !error && parallel?.error && (
+        <p role="alert" className="mb-4 text-center font-sans text-sm text-[var(--r-danger,#b42318)]">Couldn’t load {parallel.name}: {parallel.error}</p>
+      )}
+
+      {!loading && !error && sideBySide && !parallel.error && (
+        <div style={bodyStyle} className="font-serif">
+          <div className="mb-3 hidden grid-cols-2 gap-x-10 border-b border-[var(--r-line)] pb-1 font-sans text-[11px] uppercase tracking-wide text-[var(--r-sub)] md:grid">
+            <span>{translationId}</span><span>{parallel.translation}</span>
+          </div>
+          {parallelRows.map((row) => (
+            <div key={row.number} className="mb-4 grid gap-x-10 gap-y-1 md:grid-cols-2">
+              <p>
+                {row.first
+                  ? <span {...verseProps(row.first)}>{num(row.first.number)}{renderVerseText(row.first.number, row.first.text, searchLower)}{chips(row.first)}</span>
+                  : <span className="text-[var(--r-sub)]">{num(row.number)}—</span>}
+              </p>
+              <p className="border-l-2 border-[var(--r-line)] pl-3 text-[0.95em] text-[var(--r-sub)] md:border-l-0 md:pl-0 md:text-[var(--r-text)]">
+                <span className="mr-1.5 font-sans text-[10px] uppercase tracking-wide md:hidden">{parallel.translation}</span>
+                {row.second ? <>{num(row.second.number)}{row.second.text}</> : parallel.loading ? <span className="font-sans text-xs" aria-label="Loading">…</span> : '—'}
+              </p>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {!loading && !error && !sideBySide && (
+        <div
+          className={`font-serif ${wide ? 'md:columns-2 md:gap-x-12' : ''}`}
+          style={bodyStyle}
+        >
+          {layout === 'flow' ? (
+            <p className="text-pretty">
+              {verses.map((v) => (
+                <span key={v.number} {...verseProps(v)}>
+                  {num(v.number)}{renderVerseText(v.number, v.text, searchLower)}{chips(v)}{' '}
+                </span>
+              ))}
+            </p>
+          ) : (
+            verses.map((v) => (
+              <p key={v.number} className="mb-3 break-inside-avoid">
+                <span {...verseProps(v)}>{num(v.number)}{renderVerseText(v.number, v.text, searchLower)}{chips(v)}</span>
+              </p>
+            ))
+          )}
+        </div>
+      )}
+
+      {!loading && !error && <div style={{ fontSize: '1rem' }}>{footer}</div>}
+
+      {notice && !loading && <p className="mt-10 border-t border-[var(--r-line)] pt-3 font-sans text-[11px] leading-snug text-[var(--r-sub)]">{notice}</p>}
+      {parallel?.notice && !loading && !parallel.loading && <p className="mt-2 font-sans text-[11px] leading-snug text-[var(--r-sub)]">{parallel.notice}</p>}
+    </article>
+  );
+}
+
+// Grey bars the shape of a page, so a slow chapter load doesn't just show the word "Loading".
+function ChapterSkeleton() {
+  return (
+    <div role="status" aria-label="Loading chapter" className="animate-pulse motion-reduce:animate-none space-y-3 pt-2">
+      {[100, 96, 92, 98, 84, 100, 90, 70].map((w, i) => <div key={i} className="h-4 rounded bg-[var(--r-line)]" style={{ width: `${w}%` }} />)}
+      <span className="sr-only">Loading…</span>
+    </div>
+  );
+}

src/components/reader/SearchSheet.jsx

@@ -0,0 +1,111 @@
+// Search this chapter, or the whole Bible in the translation being read.
+// BSB and NET are downloaded once and searched in the browser; ESV, NLT, CSB and
+// NASB are searched through the server (their licences don't allow a bulk copy).
+import { useMemo } from 'react';
+import Sheet from './Sheet.jsx';
+import { SearchIcon } from './icons.jsx';
+import { bookOptions } from '../../utils/bibleUtils.jsx';
+
+const nameFor = (abbrev) => bookOptions.find((b) => b.abbrev === abbrev)?.name ?? abbrev;
+const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+// Wraps each searched word (quotes ignored) in <mark>.
+function highlight(text, query) {
+  const words = [...new Set(query.toLowerCase().replace(/["“”]/g, ' ').split(/\s+/).filter((w) => w.length > 1))];
+  if (!words.length) return text;
+  const re = new RegExp(`(${words.map(escapeRegExp).join('|')})`, 'gi');
+  return text.split(re).map((part, i) => (i % 2 === 1
+    ? <mark key={i} className="rounded bg-[var(--r-hl)] px-0.5 text-[var(--r-text)]">{part}</mark>
+    : part));
+}
+
+export default function SearchSheet({
+  open, onClose, query, onQuery, scope, onScope, verses, bookName, chapter, currentBook, translation,
+  isLocal, indexStatus, onLoadIndex, bibleMatches, deferredBibleQuery, remote, onJump,
+}) {
+  const q = query.trim().toLowerCase();
+  const chapterMatches = useMemo(
+    () => (scope === 'chapter' && q ? verses.filter((v) => v.text.toLowerCase().includes(q)) : []),
+    [scope, q, verses],
+  );
+
+  const scopeBtn = (id, label, onClick) => (
+    <button type="button" onClick={onClick}
+      className={`px-3 py-1.5 text-xs ${scope === id ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'}`}>{label}</button>
+  );
+  const note = (text) => <p className="text-sm text-[var(--r-sub)]">{text}</p>;
+  const resultRow = (r) => (
+    <button key={`${r.bookAbbrev}-${r.chapter}-${r.verse}`} type="button" onClick={() => onJump(r.bookAbbrev, r.chapter, r.verse)}
+      className="block w-full rounded-lg px-2 py-2 text-left text-sm hover:bg-black/5">
+      <span className="mr-1.5 font-medium">{nameFor(r.bookAbbrev)} {r.chapter}:{r.verse}</span>{highlight(r.text, query)}
+    </button>
+  );
+
+  return (
+    <Sheet open={open} onClose={onClose} title="Search">
+      <div className="mb-3 flex items-center gap-2 rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2">
+        <span className="text-[var(--r-sub)]"><SearchIcon /></span>
+        <input autoFocus value={query} onChange={(e) => onQuery(e.target.value)}
+          placeholder={scope === 'bible' ? `Search the whole Bible (${translation})…` : `Search ${bookName} ${chapter}…`}
+          className="min-w-0 flex-1 bg-transparent text-sm text-[var(--r-text)] outline-none placeholder:text-[var(--r-sub)]" />
+      </div>
+      <div className="mb-3 inline-flex overflow-hidden rounded-lg border border-[var(--r-line)]">
+        {scopeBtn('chapter', 'This chapter', () => onScope('chapter'))}
+        {scopeBtn('bible', `Whole Bible (${translation})`, () => { onScope('bible'); if (isLocal && indexStatus === 'idle') onLoadIndex(); })}
+      </div>
+
+      {scope === 'chapter' && (
+        !q ? note('Type a word to find it in this chapter.')
+          : chapterMatches.length === 0 ? note(`No verses match “${query}”.`)
+            : chapterMatches.map((v) => (
+              <button key={v.number} type="button" onClick={() => onJump(currentBook, chapter, v.number)}
+                className="block w-full rounded-lg px-2 py-2 text-left text-sm hover:bg-black/5">
+                <span className="mr-1.5 font-medium">{v.number}</span>{highlight(v.text, query)}
+              </button>
+            ))
+      )}
+
+      {scope === 'bible' && isLocal && (
+        <>
+          {indexStatus === 'loading' && note('Loading the full Bible for search. This happens once per visit (about 7 MB).')}
+          {indexStatus === 'error' && <p className="text-sm text-[var(--r-danger,#b42318)]">Couldn’t load the full Bible. <button type="button" onClick={onLoadIndex} className="underline">Try again</button></p>}
+          {indexStatus === 'ready' && (!deferredBibleQuery
+            ? note('Type a word to search all 66 books.')
+            : bibleMatches.length === 0
+              ? note(`No verses match “${query}”.`)
+              : (
+                <>
+                  <p className="mb-2 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">
+                    {bibleMatches.length} match{bibleMatches.length === 1 ? '' : 'es'}{bibleMatches.length > 100 ? ' (showing first 100)' : ''}
+                  </p>
+                  {bibleMatches.slice(0, 100).map(resultRow)}
+                </>
+              ))}
+        </>
+      )}
+
+      {scope === 'bible' && !isLocal && (
+        <>
+          {remote.tooShort && note('Type at least two letters. Use quotes for an exact phrase, like “good shepherd”.')}
+          {!remote.tooShort && remote.error && <p className="text-sm text-[var(--r-danger,#b42318)]">{remote.error}</p>}
+          {!remote.tooShort && !remote.error && remote.loading && remote.results.length === 0 && note('Searching…')}
+          {!remote.tooShort && !remote.error && !remote.loading && remote.total === 0 && remote.page > 0 && note(`No verses match “${query}”.`)}
+          {remote.results.length > 0 && (
+            <>
+              <p className="mb-2 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">
+                {remote.total} match{remote.total === 1 ? '' : 'es'} in {translation}
+              </p>
+              {remote.results.map(resultRow)}
+              {remote.hasMore && (
+                <button type="button" onClick={remote.loadMore} disabled={remote.loading}
+                  className="mt-2 w-full rounded-lg border border-[var(--r-line)] py-2 text-sm text-[var(--r-sub)] hover:bg-black/5 disabled:opacity-50">
+                  {remote.loading ? 'Loading…' : 'Show more'}
+                </button>
+              )}
+            </>
+          )}
+        </>
+      )}
+    </Sheet>
+  );
+}

src/components/reader/SearchSheet.test.jsx

@@ -0,0 +1,30 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { test, expect, vi } from 'vitest';
+import SearchSheet from './SearchSheet.jsx';
+
+const base = {
+  open: true, onClose: () => {}, query: 'shepherd', onQuery: () => {}, scope: 'bible', onScope: () => {},
+  verses: [], bookName: 'John', chapter: 3, currentBook: 'JHN', translation: 'NLT', isLocal: false,
+  indexStatus: 'idle', onLoadIndex: () => {}, bibleMatches: [], deferredBibleQuery: '',
+};
+
+test('server-searched translations list results with highlights and jump on tap', () => {
+  const onJump = vi.fn();
+  const remote = {
+    tooShort: false, loading: false, error: '', page: 1, total: 2, hasMore: true, loadMore: vi.fn(),
+    results: [{ bookAbbrev: 'GEN', chapter: 4, verse: 2, text: 'Abel became a shepherd.' }, { bookAbbrev: 'PSA', chapter: 23, verse: 1, text: 'The Lord is my shepherd.' }],
+  };
+  render(<SearchSheet {...base} remote={remote} onJump={onJump} />);
+  expect(screen.getByText('2 matches in NLT')).toBeTruthy();
+  expect(screen.getAllByText('shepherd')[0].tagName).toBe('MARK');
+  fireEvent.click(screen.getByText(/Genesis 4:2/));
+  expect(onJump).toHaveBeenCalledWith('GEN', 4, 2);
+  fireEvent.click(screen.getByText('Show more'));
+  expect(remote.loadMore).toHaveBeenCalled();
+});
+
+test('shows the server error, e.g. a rate limit', () => {
+  const remote = { tooShort: false, loading: false, error: 'ESV rate limit reached. Try again in a minute.', page: 0, total: 0, hasMore: false, loadMore: () => {}, results: [] };
+  render(<SearchSheet {...base} translation="ESV" remote={remote} onJump={() => {}} />);
+  expect(screen.getByText(/rate limit/)).toBeTruthy();
+});

src/components/reader/SettingsSheet.jsx

@@ -0,0 +1,73 @@
+// "Aa" sheet: text size, typeface, spacing, theme, how verses are laid out, and a second Bible
+// to read beside the first.
+import Sheet from './Sheet.jsx';
+import { READER_THEMES } from './readerThemes.js';
+import { READER_TRANSLATIONS } from '../../utils/bibleText.js';
+
+const SIZES = [['S', 0.875], ['M', 1], ['L', 1.125], ['XL', 1.25], ['XXL', 1.5]];
+
+function Segmented({ options, value, onChange, label }) {
+  return (
+    <div role="group" aria-label={label} className="flex overflow-hidden rounded-xl border border-[var(--r-line)]">
+      {options.map(([id, text]) => (
+        <button key={String(id)} type="button" onClick={() => onChange(id)} aria-pressed={value === id}
+          className={`flex-1 px-3 py-2 text-sm ${value === id ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'}`}>
+          {text}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default function SettingsSheet({
+  open, onClose, fontSize, onFontSize, theme, onTheme, layout, onLayout, wide, onWide,
+  font, onFont, spacing, onSpacing, verseNumbers, onVerseNumbers,
+  translation, parallel, onParallel,
+}) {
+  const row = 'mb-4';
+  const label = 'mb-1.5 block text-xs text-[var(--r-sub)]';
+  return (
+    <Sheet open={open} onClose={onClose} title="Reading settings">
+      <div className={row}>
+        <span className={label}>Text size</span>
+        <Segmented label="Text size" options={SIZES.map(([l, s]) => [s, l])} value={fontSize} onChange={onFontSize} />
+      </div>
+      <div className={row}>
+        <span className={label}>Typeface</span>
+        <Segmented label="Typeface" options={[['serif', 'Serif'], ['sans', 'Sans'], ['easy', 'Easy to read']]} value={font} onChange={onFont} />
+      </div>
+      <div className={row}>
+        <span className={label}>Line spacing</span>
+        <Segmented label="Line spacing" options={[['snug', 'Snug'], ['normal', 'Normal'], ['airy', 'Airy']]} value={spacing} onChange={onSpacing} />
+      </div>
+      <div className={row}>
+        <span className={label}>Theme</span>
+        <Segmented label="Theme" options={Object.entries(READER_THEMES).map(([id, t]) => [id, t.label])} value={theme} onChange={onTheme} />
+      </div>
+      <div className={row}>
+        <span className={label}>Verses</span>
+        <Segmented label="Verse layout" options={[['flow', 'Flowing'], ['verses', 'One per line']]} value={layout} onChange={onLayout} />
+      </div>
+      <div className={row}>
+        <span className={label}>Verse numbers</span>
+        <Segmented label="Verse numbers" options={[[true, 'Show'], [false, 'Hide']]} value={verseNumbers} onChange={onVerseNumbers} />
+      </div>
+      <div className={row}>
+        <span className={label}>Width</span>
+        <Segmented label="Reading width" options={[[false, 'Column'], [true, 'Two columns']]} value={wide} onChange={onWide} />
+      </div>
+      <div className={row}>
+        <span className={label}>Read beside another Bible</span>
+        <div role="group" aria-label="Second translation" className="flex flex-wrap gap-1.5">
+          {[{ id: '', name: 'Off' }, ...READER_TRANSLATIONS.filter((t) => t.id !== translation)].map((t) => (
+            <button key={t.id || 'off'} type="button" onClick={() => onParallel(t.id)} aria-pressed={parallel === t.id} title={t.name}
+              className={`rounded-full border px-3 py-1 text-xs font-medium ${parallel === t.id ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`}>
+              {t.id || 'Off'}
+            </button>
+          ))}
+        </div>
+        <p className="mt-1.5 text-[11px] text-[var(--r-sub)]">Shows both side by side on wider screens, and stacked on a phone.</p>
+      </div>
+    </Sheet>
+  );
+}

src/components/reader/Sheet.jsx

@@ -0,0 +1,67 @@
+// Slide-up sheet used for every reader tool. `modal` sheets dim the page and
+// close on outside tap; non-modal ones (the verse sheet) leave the text
+// tappable. With `pane`, screens >= lg show it as a right-hand side pane
+// instead of a bottom sheet (tablet landscape / desktop).
+import { useEffect, useRef } from 'react';
+import { CloseIcon } from './icons.jsx';
+
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+export default function Sheet({ open, onClose, title, label, headerRight, modal = true, pane = false, children }) {
+  const dialogRef = useRef(null);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  // Modal sheets behave like dialogs: focus moves in, Tab stays inside, Escape closes, and focus
+  // returns to whatever opened the sheet. (The verse pane is not modal, so it leaves focus alone.)
+  useEffect(() => {
+    if (!open || !modal) return undefined;
+    const opener = document.activeElement;
+    const dialog = dialogRef.current;
+    if (dialog && !dialog.contains(document.activeElement)) dialog.focus({ preventScroll: true });
+    const onKey = (e) => {
+      if (e.key === 'Escape') { e.stopPropagation(); onCloseRef.current?.(); return; }
+      if (e.key !== 'Tab' || !dialog) return;
+      const items = [...dialog.querySelectorAll(FOCUSABLE)].filter((el) => el.offsetParent !== null || el === document.activeElement);
+      if (items.length === 0) { e.preventDefault(); return; }
+      const first = items[0];
+      const last = items[items.length - 1];
+      if (e.shiftKey && (document.activeElement === first || document.activeElement === dialog)) { e.preventDefault(); last.focus(); }
+      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+    };
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      if (opener instanceof HTMLElement && document.contains(opener)) opener.focus({ preventScroll: true });
+    };
+  }, [open, modal]);
+
+  if (!open) return null;
+  return (
+    <>
+      {modal && <div className="fixed inset-0 z-40 bg-black/30" onClick={onClose} aria-hidden="true" />}
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal={modal ? 'true' : undefined}
+        aria-label={typeof title === 'string' ? title : label}
+        tabIndex={-1}
+        className={`fixed inset-x-0 bottom-0 z-50 flex max-h-[72vh] flex-col rounded-t-2xl focus:outline-none border-t border-[var(--r-line)] bg-[var(--r-bar)] text-[var(--r-text)] font-sans ${
+          pane ? 'lg:inset-x-auto lg:bottom-0 lg:right-0 lg:top-12 lg:max-h-none lg:w-[24rem] lg:rounded-none lg:border-l lg:border-t-0' : 'sm:left-1/2 sm:right-auto sm:w-[36rem] sm:-translate-x-1/2'
+        }`}
+      >
+        <div className="mx-auto mt-2 h-1 w-9 shrink-0 rounded-full bg-[var(--r-line)] lg:hidden" />
+        <div className="flex items-center justify-between gap-2 px-4 pb-2 pt-2">
+          <div className="min-w-0 truncate text-sm font-medium">{title}</div>
+          <div className="flex items-center gap-1 text-[var(--r-sub)]">
+            {headerRight}
+            <button type="button" onClick={onClose} aria-label="Close" className="rounded-lg p-1.5 hover:bg-black/5">
+              <CloseIcon />
+            </button>
+          </div>
+        </div>
+        <div className="min-h-0 flex-1 overflow-y-auto px-4 pb-6">{children}</div>
+      </div>
+    </>
+  );
+}

src/components/reader/VerseSheet.jsx

@@ -0,0 +1,141 @@
+// The single home for per-verse tools: original words, cross-references,
+// commentary, and people & places, plus bookmark / copy.
+import { useEffect, useState } from 'react';
+import Sheet from './Sheet.jsx';
+import { CommentaryTab, PeoplePlacesTab } from '../StudyPanel.jsx';
+import { BookmarkIcon, CopyIcon } from '../../utils/bibleUtils.jsx';
+import { formatCrossRef, speakOriginalWord } from '../../utils/wordStudy.js';
+import { READER_TRANSLATIONS, fetchChapter } from '../../utils/bibleText.js';
+
+const TABS = [['commentary', 'Commentary'], ['compare', 'Compare'], ['original', 'Original'], ['refs', 'Cross-refs'], ['people', 'People & places']];
+
+function OriginalTab({ words }) {
+  if (!words) return <p className="text-sm text-[var(--r-sub)]">No original-language data for this verse.</p>;
+  return (
+    <div className="flex flex-wrap gap-2">
+      {words.map((w, i) => {
+        const isHebrew = w.s?.startsWith('H');
+        const canSpeak = isHebrew || w.s?.startsWith('G');
+        return (
+          <div key={i} className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] p-2 text-center" style={{ minWidth: '4.5rem', maxWidth: '9rem' }}>
+            <div className={`text-lg leading-tight ${isHebrew ? 'font-serif' : ''}`} dir={isHebrew ? 'rtl' : 'ltr'}>{w.o}</div>
+            <div className="mt-0.5 text-xs italic text-[var(--r-sub)]">{w.t}</div>
+            <div className="mt-1 text-xs font-medium">{w.g}</div>
+            {w.p && <div className="mt-0.5 text-[10px] leading-tight text-[var(--r-sub)]">{w.p}</div>}
+            {w.s && <div className="mt-0.5 text-[10px] text-[var(--r-sub)]">{w.s}</div>}
+            {canSpeak && (
+              <button type="button" onClick={() => speakOriginalWord(w.o, w.s)}
+                className="mt-1.5 rounded-lg bg-[var(--r-bar)] px-2 py-0.5 text-[11px] hover:bg-black/5"
+                title={`Pronounce in ${isHebrew ? 'Hebrew' : 'Greek'}`}>Speak</button>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function RefsTab({ refs, loading, onJump }) {
+  if (loading && !refs) return <p className="text-sm text-[var(--r-sub)]">Loading…</p>;
+  if (!refs?.length) return <p className="text-sm text-[var(--r-sub)]">No cross-references for this verse.</p>;
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {refs.slice(0, 20).map((ref, i) => (
+        <button key={i} type="button" onClick={() => onJump(ref.book, ref.chapter, ref.verse)}
+          className="rounded-full border border-[var(--r-line)] px-2.5 py-1 text-xs hover:bg-black/5">
+          {formatCrossRef(ref)}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// This verse in every translation, one under the other. Each Bible loads the chapter it is in
+// (BSB and NET come from the free source; the rest through the server) and shows this verse.
+function CompareTab({ book, chapter, verse, current }) {
+  const [rows, setRows] = useState({}); // id -> { text } | { error } | undefined while loading
+  useEffect(() => {
+    const controller = new AbortController();
+    setRows({});
+    READER_TRANSLATIONS.forEach((t) => {
+      fetchChapter(t.id, book, chapter, { signal: controller.signal })
+        .then(({ verses }) => {
+          const text = verses.find((v) => v.number === verse)?.text;
+          setRows((r) => ({ ...r, [t.id]: text ? { text } : { error: 'No verse here in this translation.' } }));
+        })
+        .catch((err) => { if (!controller.signal.aborted) setRows((r) => ({ ...r, [t.id]: { error: err.message || 'Unavailable.' } })); });
+    });
+    return () => controller.abort();
+  }, [book, chapter, verse]);
+
+  return (
+    <div className="space-y-3">
+      {READER_TRANSLATIONS.map((t) => {
+        const row = rows[t.id];
+        return (
+          <div key={t.id}>
+            <p className="mb-0.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">{t.id}{t.id === current ? ' · reading' : ''}</p>
+            {!row ? <p className="text-sm text-[var(--r-sub)]">Loading…</p>
+              : row.error ? <p className="text-sm text-[var(--r-sub)]">{row.error}</p>
+                : <p className="font-serif text-[15px] leading-relaxed">{row.text}</p>}
+          </div>
+        );
+      })}
+      <p className="border-t border-[var(--r-line)] pt-2 text-[10px] leading-snug text-[var(--r-sub)]">Copyright notices for each translation appear at the foot of the chapter when you read it.</p>
+    </div>
+  );
+}
+
+export default function VerseSheet({
+  verse, book, bookName, chapter, translation, words, crossRefs, crossRefsLoading, onLoadCrossRefs,
+  bookmarkColor, onToggleBookmark, onCycleColor, onJump, onClose,
+}) {
+  const [tab, setTab] = useState('commentary');
+  const [copied, setCopied] = useState(false);
+  useEffect(() => { if (verse && tab === 'refs') onLoadCrossRefs(); }, [verse?.number, tab]); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => { setCopied(false); }, [verse?.number]);
+  if (!verse) return null;
+
+  const copy = () => {
+    navigator.clipboard?.writeText(`${bookName} ${chapter}:${verse.number} ${translation} — ${verse.text}`);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1500);
+  };
+  const actionBtn = 'rounded-lg p-1.5 hover:bg-black/5';
+
+  return (
+    <Sheet
+      open modal={false} pane onClose={onClose}
+      title={`${bookName} ${chapter}:${verse.number}`}
+      headerRight={(
+        <>
+          <button type="button" onClick={onToggleBookmark} className={`${actionBtn} ${bookmarkColor ? 'text-[var(--r-accent)]' : ''}`} aria-label={bookmarkColor ? 'Remove bookmark' : 'Bookmark verse'}>
+            <BookmarkIcon filled={!!bookmarkColor} />
+          </button>
+          {bookmarkColor && (
+            <button type="button" onClick={onCycleColor} className={actionBtn} aria-label="Change bookmark colour">
+              <span className="block h-4 w-4 rounded-full border border-black/10" style={{ backgroundColor: bookmarkColor }} />
+            </button>
+          )}
+          <button type="button" onClick={copy} className={actionBtn} aria-label="Copy verse">
+            {copied ? <span className="px-1 text-xs">Copied</span> : <CopyIcon />}
+          </button>
+        </>
+      )}
+    >
+      <div role="tablist" aria-label="About this verse" className="mb-3 flex gap-1.5 overflow-x-auto pb-1">
+        {TABS.map(([id, label]) => (
+          <button key={id} type="button" role="tab" aria-selected={tab === id} onClick={() => setTab(id)}
+            className={`shrink-0 rounded-full border px-3 py-1 text-xs ${tab === id ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`}>
+            {label}
+          </button>
+        ))}
+      </div>
+      {tab === 'commentary' && <CommentaryTab book={book} chapter={chapter} verse={verse.number} />}
+      {tab === 'compare' && <CompareTab book={book} chapter={chapter} verse={verse.number} current={translation} />}
+      {tab === 'original' && <OriginalTab words={words} />}
+      {tab === 'refs' && <RefsTab refs={crossRefs} loading={crossRefsLoading} onJump={onJump} />}
+      {tab === 'people' && <PeoplePlacesTab book={book} chapter={chapter} verse={verse.number} />}
+    </Sheet>
+  );
+}

src/components/reader/icons.jsx

@@ -0,0 +1,13 @@
+// Small stroke icons for the reader chrome (currentColor, 20px grid).
+const base = { viewBox: '0 0 20 20', width: 20, height: 20, fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true };
+
+export const ChevronLeft = () => <svg {...base}><path d="M12 4l-6 6 6 6" /></svg>;
+export const ChevronRight = () => <svg {...base}><path d="M8 4l6 6-6 6" /></svg>;
+export const ChevronDown = ({ size = 14 }) => <svg {...base} width={size} height={size}><path d="M5 8l5 5 5-5" /></svg>;
+export const SearchIcon = () => <svg {...base}><circle cx="9" cy="9" r="5.5" /><path d="M13.5 13.5L17 17" /></svg>;
+export const CloseIcon = () => <svg {...base}><path d="M5 5l10 10M15 5L5 15" /></svg>;
+export const LinkIcon = () => <svg {...base}><path d="M8.5 11.5a3 3 0 004.2 0l2.3-2.3a3 3 0 00-4.2-4.2L9.7 6.1" /><path d="M11.5 8.5a3 3 0 00-4.2 0L5 10.8A3 3 0 009.2 15l1.1-1.1" /></svg>;
+export const PenIcon = () => <svg {...base}><path d="M13.5 3.5l3 3L7 16l-4 1 1-4 9.5-9.5z" /></svg>;
+export const HeadphonesIcon = () => <svg {...base}><path d="M3.5 12V10a6.5 6.5 0 0113 0v2" /><rect x="2.5" y="11.5" width="3.5" height="5" rx="1.2" /><rect x="14" y="11.5" width="3.5" height="5" rx="1.2" /></svg>;
+export const FocusIcon = () => <svg {...base}><path d="M3 7V4h3M17 7V4h-3M3 13v3h3M17 13v3h-3" /></svg>;
+export const CheckIcon = () => <svg {...base}><path d="M4.5 10.5l3.5 3.5 7.5-8" /></svg>;

src/components/reader/readerThemes.js

@@ -0,0 +1,18 @@
+// Reader colour themes, applied as CSS variables on the reader root so every
+// reader component can use bg-[var(--r-bg)] etc. and stay in sync.
+export const READER_THEMES = {
+  paper: {
+    label: 'Paper',
+    vars: { '--r-bg': '#faf7f0', '--r-text': '#2b2620', '--r-sub': '#6b6458', '--r-accent': '#a84e27', '--r-bar': '#f1ece0', '--r-line': '#e0d8c6', '--r-hl': '#f6e7a8', '--r-on': '#ffffff', '--r-danger': '#b42318' },
+  },
+  sepia: {
+    label: 'Sepia',
+    vars: { '--r-bg': '#f1e4c8', '--r-text': '#3b2f1c', '--r-sub': '#635539', '--r-accent': '#93471d', '--r-bar': '#e8d8b6', '--r-line': '#d5c197', '--r-hl': '#e9cf85', '--r-on': '#ffffff', '--r-danger': '#a1281d' },
+  },
+  dark: {
+    label: 'Dark',
+    vars: { '--r-bg': '#1c1b19', '--r-text': '#e6e1d6', '--r-sub': '#b8b2a4', '--r-accent': '#e0895c', '--r-bar': '#262421', '--r-line': '#3a3733', '--r-hl': '#4a4224', '--r-on': '#1c1b19', '--r-danger': '#f0857a' },
+  },
+};
+
+export const themeVars = (id) => (READER_THEMES[id] ?? READER_THEMES.paper).vars;

src/components/reader/readerThemes.test.js

@@ -0,0 +1,27 @@
+import { describe, expect, test } from 'vitest';
+import { READER_THEMES } from './readerThemes.js';
+
+// WCAG relative luminance and contrast ratio
+const luminance = (hex) => {
+  const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255)
+    .map((c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+const contrast = (a, b) => {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+};
+
+// Small text needs 4.5:1. These are the pairings the app actually draws.
+describe.each(Object.entries(READER_THEMES))('%s theme contrast', (_id, { vars }) => {
+  const v = (name) => vars[`--r-${name}`];
+  test.each([
+    ['text', 'bg'], ['text', 'bar'], ['text', 'hl'],
+    ['sub', 'bg'], ['sub', 'bar'], ['sub', 'hl'],
+    ['accent', 'bg'], ['accent', 'bar'],
+    ['danger', 'bg'], ['danger', 'bar'],
+    ['on', 'accent'],
+  ])('%s on %s is at least 4.5:1', (fg, bg) => {
+    expect(contrast(v(fg), v(bg))).toBeGreaterThanOrEqual(4.5);
+  });
+});

src/components/settings/DataSection.jsx

@@ -0,0 +1,113 @@
+// Settings → "Your data": download everything as one file, restore from one, and save Bibles for offline.
+import { useRef, useState } from 'react';
+import { useApp } from '../../context/AppContext.js';
+import { useToast } from '../Toasts.jsx';
+import { DownloadProgress } from '../OfflineSave.jsx';
+import { useOfflineSave } from '../../hooks/useOfflineSave.js';
+import { backupFileName, buildBackup, restoreProjects, validateBackup } from '../../utils/backup.js';
+import { saveRemoteProject } from '../../syncService.js';
+
+const btn = 'rounded-xl border border-[var(--r-line)] px-4 py-2 text-sm hover:bg-black/5 disabled:opacity-50';
+
+const plural = (n, one, many = `${one}s`) => `${n} ${n === 1 ? one : many}`;
+
+export default function DataSection() {
+  const {
+    authUser, readerBookmarks, readerTextHighlights, readerColorLabels, readerInkByPage, readingPlansState,
+    importReaderMarks, importReadingPlans, refreshProjectIndex,
+  } = useApp();
+  const { toast } = useToast();
+  const offline = useOfflineSave();
+  const fileRef = useRef(null);
+  const [pending, setPending] = useState(null); // { name, backup, summary } waiting for "Restore"
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  const download = () => {
+    const backup = buildBackup({
+      email: authUser?.email ?? null,
+      reader: { bookmarks: readerBookmarks, highlights: readerTextHighlights, colorLabels: readerColorLabels, ink: readerInkByPage },
+      readingPlans: readingPlansState,
+    });
+    const url = URL.createObjectURL(new Blob([JSON.stringify(backup, null, 2)], { type: 'application/json' }));
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = backupFileName();
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+    toast(`Backup downloaded: ${plural(backup.projects.length, 'study', 'studies')} and your reading marks`);
+  };
+
+  const choose = async (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = '';
+    setError('');
+    setPending(null);
+    if (!file) return;
+    let data;
+    try { data = JSON.parse(await file.text()); } catch { setError('That file couldn’t be read as a backup.'); return; }
+    const checked = validateBackup(data);
+    if (!checked.ok) { setError(checked.error); return; }
+    setPending({ name: file.name, ...checked });
+  };
+
+  const restore = async () => {
+    setBusy(true);
+    const { backup } = pending;
+    const written = restoreProjects(backup.projects);
+    importReaderMarks(backup.reader);
+    importReadingPlans(backup.readingPlans);
+    refreshProjectIndex();
+    // Studies restored here also go to the account, so they follow you to other devices
+    if (authUser) await Promise.all(written.map((p) => saveRemoteProject(p)));
+    setBusy(false);
+    setPending(null);
+    toast(`Restored ${plural(written.length, 'study', 'studies')}, plus your bookmarks, highlights and plans`);
+  };
+
+  const s = pending?.summary;
+  return (
+    <section id="backup" aria-label="Your data" className="scroll-mt-16 space-y-5 rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-6">
+      <div>
+        <h2 className="text-base font-medium">Your data</h2>
+        <p className="mt-1 text-sm text-[var(--r-sub)]">Everything you’ve made — studies and notes, bookmarks, highlights, ink and reading plans — in one file you keep.</p>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3">
+        <button type="button" onClick={download} className={btn}>Download backup</button>
+        <button type="button" onClick={() => fileRef.current?.click()} className={btn}>Restore from a backup…</button>
+        <input ref={fileRef} type="file" accept="application/json,.json" onChange={choose} className="hidden" aria-label="Backup file" />
+      </div>
+      {error && <p role="alert" className="text-sm text-[var(--r-danger,#b42318)]">{error}</p>}
+      {pending && (
+        <div className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] p-4 text-sm">
+          <p className="font-medium">{pending.name}</p>
+          <p className="mt-1 text-[var(--r-sub)]">
+            Contains {plural(s.projects, 'study', 'studies')}, {plural(s.bookmarks, 'bookmark')}, {plural(s.highlights, 'highlight')}, {plural(s.inkPages, 'ink page')} and {plural(s.plans, 'reading plan')}.
+            Restoring adds these to what you have — nothing is deleted, and a study on this device is only replaced if the backup’s copy is newer.
+          </p>
+          <div className="mt-3 flex gap-2">
+            <button type="button" onClick={restore} disabled={busy} className="rounded-xl bg-[var(--r-accent)] px-4 py-2 text-sm font-medium text-[var(--r-on)] hover:opacity-90 disabled:opacity-50">{busy ? 'Restoring…' : 'Restore'}</button>
+            <button type="button" onClick={() => setPending(null)} className={btn}>Cancel</button>
+          </div>
+        </div>
+      )}
+
+      <div className="border-t border-[var(--r-line)] pt-4">
+        <h3 className="text-sm font-medium">Read offline</h3>
+        <p className="mb-3 mt-1 text-sm text-[var(--r-sub)]">Chapters you read are kept automatically. To read anywhere, save a whole Bible while you’re connected (about 4 MB). The ESV, NLT, CSB and NASB can’t be saved: their licences don’t allow it.</p>
+        {offline.job ? <DownloadProgress job={offline.job} onCancel={offline.cancel} /> : (
+          <div className="flex flex-wrap gap-3">
+            {['BSB', 'NET'].map((t) => (
+              <button key={t} type="button" onClick={() => offline.saveBible(t)} className={btn}>
+                {(offline.saved[t] ?? []).length >= 66 ? `✓ The whole ${t} is saved` : `Save the whole ${t}`}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

src/components/study/CommentaryChunkTab.jsx

@@ -0,0 +1,56 @@
+// Commentary for the chunk's verse range, from seven open sources. Some sources
+// comment on whole passages, so when nothing starts inside the range we show the
+// closest earlier entry. "Add to notes" quotes a paragraph, with its citation, into
+// the chunk's background notes.
+import { COMMENTARIES } from '../../hooks/useVerseStudy.js';
+import { formatChunkReference } from '../../utils/bibleUtils.jsx';
+
+export default function CommentaryChunkTab({ resources, chunk, project, chapterIndex, updateChunk, notify }) {
+  const { commentarySource, setCommentarySource, commentaryData, commentaryLoading, commentaryError } = resources;
+  const source = COMMENTARIES.find((c) => c.id === commentarySource) ?? COMMENTARIES[0];
+  const items = (commentaryData?.chapter?.content ?? []).filter((i) => i.type === 'verse').sort((a, b) => a.number - b.number);
+  let entries = items.filter((i) => i.number >= chunk.startVerse && i.number <= chunk.endVerse);
+  let earlier = false;
+  if (entries.length === 0) {
+    const before = [...items].reverse().find((i) => i.number <= chunk.startVerse);
+    if (before) { entries = [before]; earlier = true; }
+  }
+  const ref = formatChunkReference(project, chapterIndex, chunk, '–');
+
+  const quote = (text, verse) => {
+    const citation = `${text} (${source.name}, ${ref.split(':')[0]}:${verse})`;
+    const existing = chunk.generalNotes ?? '';
+    updateChunk(chunk.id, { generalNotes: existing ? `${existing}\n\n${citation}` : citation });
+    notify('Added to background notes.', 1600);
+  };
+
+  return (
+    <div>
+      <select aria-label="Commentary source" value={source.id} onChange={(e) => setCommentarySource(e.target.value)}
+        className="mb-3 w-full rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-1.5 text-sm text-[var(--r-text)]">
+        {COMMENTARIES.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
+      </select>
+      {commentaryLoading && <p className="text-sm text-[var(--r-sub)]">Loading commentary…</p>}
+      {commentaryError && <p className="text-sm text-[var(--r-sub)]">{commentaryError}</p>}
+      {!commentaryLoading && !commentaryError && commentaryData && entries.length === 0 && (
+        <p className="text-sm text-[var(--r-sub)]">No commentary found for {ref}.</p>
+      )}
+      {!commentaryLoading && !commentaryError && entries.map((v) => (
+        <div key={v.number} className="mb-4">
+          <p className="mb-1 text-xs font-medium text-[var(--r-sub)]">{earlier ? `Notes on the passage starting at verse ${v.number}` : `Verse ${v.number}`}</p>
+          {(v.content ?? []).map((p, i) => {
+            const text = typeof p === 'string' ? p : '';
+            if (!text) return null;
+            return (
+              <div key={i} className="group mb-2">
+                <p className="whitespace-pre-line text-[13px] leading-relaxed">{text}</p>
+                <button type="button" onClick={() => quote(text, v.number)} className="mt-0.5 text-[11px] text-[var(--r-accent)] opacity-70 hover:underline hover:opacity-100">Add to notes</button>
+              </div>
+            );
+          })}
+        </div>
+      ))}
+      <p className="mt-2 text-[10px] text-[var(--r-sub)]">{source.credit}</p>
+    </div>
+  );
+}

src/components/study/CrossRefsTab.jsx

@@ -0,0 +1,53 @@
+// Cross-references for the chunk: typed, suggested from the Open Cross Ref
+// dataset, and a preview of each reference's verse text.
+import { useState } from 'react';
+
+function RefChip({ label, onRemove, loadVerseText }) {
+  const [text, setText] = useState(null);
+  const [open, setOpen] = useState(false);
+  const toggle = () => {
+    setOpen((o) => !o);
+    if (text == null) loadVerseText(label).then((t) => setText(t || 'Verse text unavailable.')).catch(() => setText('Verse text unavailable.'));
+  };
+  return (
+    <div className="rounded-xl border border-[var(--r-line)]">
+      <div className="flex items-center justify-between gap-2 px-3 py-1.5">
+        <button type="button" onClick={toggle} aria-expanded={open} className="flex-1 text-left text-sm">{label}</button>
+        <button type="button" onClick={onRemove} aria-label={`Remove ${label}`} className="text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]">×</button>
+      </div>
+      {open && <p className="border-t border-[var(--r-line)] px-3 py-2 font-serif text-[13px] leading-relaxed text-[var(--r-sub)]">{text ?? 'Loading…'}</p>}
+    </div>
+  );
+}
+
+export default function CrossRefsTab({ crossRefs, chunk }) {
+  const { crossRefInput, setCrossRefInput, suggestingCrossRefs, crossRefSuggestions, addCrossRef, removeCrossRef,
+    suggestCrossRefsForChunk, addSuggestedCrossRef, loadVerseText } = crossRefs;
+  const refs = chunk.crossReferences ?? [];
+  return (
+    <div>
+      <div className="flex gap-2">
+        <input value={crossRefInput} onChange={(e) => setCrossRefInput(e.target.value)} placeholder="e.g. John 1:1 or Rom 3:23"
+          onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addCrossRef(chunk.id); } }}
+          className="min-w-0 flex-1 rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-1.5 text-sm text-[var(--r-text)] focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]" />
+        <button type="button" onClick={() => addCrossRef(chunk.id)} className="rounded-lg bg-[var(--r-text)] px-3 py-1.5 text-sm text-[var(--r-bg)]">Add</button>
+      </div>
+      <button type="button" onClick={() => suggestCrossRefsForChunk(chunk.id)} disabled={suggestingCrossRefs}
+        className="mt-2 rounded-lg border border-[var(--r-line)] px-3 py-1.5 text-sm hover:bg-black/5 disabled:opacity-50">
+        {suggestingCrossRefs ? 'Suggesting…' : 'Suggest from passage'}
+      </button>
+      {crossRefSuggestions.length > 0 && (
+        <div className="mt-3 flex flex-wrap gap-1.5">
+          {crossRefSuggestions.map((ref) => (
+            <button key={ref} type="button" onClick={() => addSuggestedCrossRef(chunk.id, ref)}
+              className="rounded-full border border-[var(--r-accent)] px-2.5 py-0.5 text-xs text-[var(--r-accent)] hover:bg-black/5">+ {ref}</button>
+          ))}
+        </div>
+      )}
+      <div className="mt-3 space-y-1.5">
+        {refs.map((ref) => <RefChip key={ref} label={ref} onRemove={() => removeCrossRef(chunk.id, ref)} loadVerseText={loadVerseText} />)}
+        {refs.length === 0 && <p className="text-sm text-[var(--r-sub)]">No cross-references yet.</p>}
+      </div>
+    </div>
+  );
+}

src/components/study/NotesPane.jsx

@@ -0,0 +1,103 @@
+// Observe / Interpret / Apply as an accordion (one open at a time), plus a "More"
+// area for background notes and tags so the page stays quiet.
+import { useEffect, useState } from 'react';
+
+const SECTIONS = [
+  { field: 'observation', label: 'Observe', hint: 'What does the text say?',
+    placeholder: "What does the text actually say?\n• Who is speaking, and to whom?\n• What key words or phrases repeat?\n• What's the tone, structure, or literary style?" },
+  { field: 'interpretation', label: 'Interpret', hint: 'What does it mean?',
+    placeholder: "What did this mean to its original audience?\n• What's the historical/cultural context?\n• How does it fit the surrounding argument?\n• What does it reveal about God's character?" },
+  { field: 'application', label: 'Apply', hint: 'What do I do with it?',
+    placeholder: 'How should this shape your life today?\n• What attitude or action does this call for?\n• Is there a promise to trust or a warning to heed?\n• Who could you share this with?' },
+];
+
+const areaCls = 'w-full resize-y rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-3.5 py-3 font-serif text-[15px] leading-7 text-[var(--r-text)] placeholder:font-sans placeholder:text-[13px] placeholder:leading-5 placeholder:text-[var(--r-sub)] focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]';
+const words = (s) => (s ?? '').trim().split(/\s+/).filter(Boolean).length;
+
+export default function NotesPane({ chunk, updateChunk, allTags }) {
+  const [open, setOpen] = useState(() => {
+    try { return localStorage.getItem('studyNotesOpen') || 'observation'; } catch { return 'observation'; }
+  });
+  const [more, setMore] = useState(false);
+  const [tagInput, setTagInput] = useState('');
+  useEffect(() => { setTagInput(''); }, [chunk.id]);
+  useEffect(() => { try { localStorage.setItem('studyNotesOpen', open || ''); } catch { /* storage unavailable */ } }, [open]);
+
+  const tags = chunk.tags ?? [];
+  const addTag = (tag) => {
+    const t = tag.trim();
+    if (!t || tags.some((x) => x.toLowerCase() === t.toLowerCase())) { setTagInput(''); return; }
+    updateChunk(chunk.id, { tags: [...tags, t] });
+    setTagInput('');
+  };
+  const suggestions = allTags.filter((t) => !tags.some((x) => x.toLowerCase() === t.toLowerCase()));
+
+  return (
+    <section aria-label="Study notes" className="space-y-2">
+      {SECTIONS.map(({ field, label, hint, placeholder }) => {
+        const isOpen = open === field;
+        const n = words(chunk[field]);
+        return (
+          <div key={field} className={`overflow-hidden rounded-2xl border ${isOpen ? 'border-[var(--r-accent)]' : 'border-[var(--r-line)]'}`}>
+            <button type="button" onClick={() => setOpen(isOpen ? null : field)} aria-expanded={isOpen}
+              className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left">
+              <span className="flex items-center gap-2.5">
+                <span aria-hidden="true" className={`h-2.5 w-2.5 rounded-full border ${n ? 'border-[var(--r-accent)] bg-[var(--r-accent)]' : 'border-[var(--r-sub)]'}`} />
+                <span className="text-sm font-medium">{label}</span>
+                <span className="text-xs text-[var(--r-sub)]">{hint}</span>
+              </span>
+              <span className="text-xs text-[var(--r-sub)]">{n ? `${n} word${n === 1 ? '' : 's'}` : ''}</span>
+            </button>
+            {isOpen && (
+              <div className="px-4 pb-4">
+                <textarea aria-label={label} value={chunk[field] ?? ''} rows={7} placeholder={placeholder}
+                  onChange={(e) => updateChunk(chunk.id, { [field]: e.target.value })} className={areaCls} />
+              </div>
+            )}
+          </div>
+        );
+      })}
+
+      <div className="rounded-2xl border border-[var(--r-line)]">
+        <button type="button" onClick={() => setMore((m) => !m)} aria-expanded={more}
+          className="flex w-full items-center justify-between px-4 py-3 text-left text-sm">
+          <span><span className="font-medium">More</span> <span className="text-xs text-[var(--r-sub)]">background{tags.length ? ` · ${tags.length} tag${tags.length === 1 ? '' : 's'}` : ' and tags'}</span></span>
+          <span className="text-xs text-[var(--r-sub)]">{more ? '▾' : '▸'}</span>
+        </button>
+        {more && (
+          <div className="space-y-4 px-4 pb-4">
+            <label className="block text-xs text-[var(--r-sub)]">
+              Background / general notes
+              <textarea value={chunk.generalNotes ?? ''} rows={5} onChange={(e) => updateChunk(chunk.id, { generalNotes: e.target.value })}
+                placeholder="e.g. author, date, audience, historical context, key themes…" className={`mt-1 ${areaCls}`} />
+            </label>
+            <div>
+              <p className="mb-1.5 text-xs text-[var(--r-sub)]">Tags</p>
+              <div className="flex flex-wrap items-center gap-1.5">
+                {tags.map((tag) => (
+                  <span key={tag} className="inline-flex items-center gap-1 rounded-full bg-[var(--r-bar)] px-2.5 py-1 text-xs">
+                    {tag}
+                    <button type="button" aria-label={`Remove tag ${tag}`} onClick={() => updateChunk(chunk.id, { tags: tags.filter((t) => t !== tag) })} className="text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]">×</button>
+                  </span>
+                ))}
+                <input value={tagInput} onChange={(e) => setTagInput(e.target.value)} list="study-tag-suggestions"
+                  onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addTag(tagInput); } }}
+                  placeholder="Add a tag and press Enter"
+                  className="min-w-[10rem] flex-1 rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1 text-xs text-[var(--r-text)] focus:outline-none" />
+              </div>
+              {suggestions.length > 0 && (
+                <div className="mt-2 flex flex-wrap items-center gap-1.5 text-xs">
+                  <span className="text-[var(--r-sub)]">Suggestions:</span>
+                  {suggestions.slice(0, 12).map((t) => (
+                    <button key={t} type="button" onClick={() => addTag(t)} className="rounded-full border border-[var(--r-line)] px-2.5 py-0.5 text-[var(--r-sub)] hover:bg-black/5">+ {t}</button>
+                  ))}
+                </div>
+              )}
+              <datalist id="study-tag-suggestions">{allTags.map((t) => <option key={t} value={t} />)}</datalist>
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

src/components/study/OutlineRail.jsx

@@ -0,0 +1,43 @@
+// Left rail of the Study stage: every chunk of the project as an outline, with
+// three dots (Observe / Interpret / Apply) showing which notes are written.
+import { formatChunkReference } from '../../utils/bibleUtils.jsx';
+
+const filled = (s) => (s ?? '').trim().length > 0;
+
+export default function OutlineRail({ project, selectedId, onSelect, onEditOutline }) {
+  return (
+    <nav aria-label="Chunks" className="flex h-full min-h-0 flex-col">
+      <div className="flex items-center justify-between px-3 pb-2 pt-3">
+        <span className="text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Chunks</span>
+        <button type="button" onClick={onEditOutline} className="text-[11px] text-[var(--r-accent)] hover:underline">Edit</button>
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-4">
+        {project.chapters.map((ch, chapterIndex) => (
+          <div key={`${ch.bookAbbrev}-${ch.chapter}`} className="mb-3">
+            {project.chapters.length > 1 && <p className="px-2 pb-1 text-[11px] text-[var(--r-sub)]">{ch.book} {ch.chapter}</p>}
+            {ch.chunks.length === 0 && <p className="px-2 text-xs text-[var(--r-sub)]">No chunks in this chapter.</p>}
+            {ch.chunks.map((chunk) => {
+              const selected = chunk.id === selectedId;
+              const first = ch.verses.find((v) => v.number === chunk.startVerse)?.text ?? '';
+              return (
+                <button key={chunk.id} type="button" onClick={() => onSelect(chunk.id)} aria-current={selected ? 'true' : undefined}
+                  className={`mb-1 block w-full rounded-xl border px-2.5 py-2 text-left transition ${selected ? 'border-[var(--r-line)] bg-[var(--r-bg)]' : 'border-transparent hover:bg-black/5'}`}>
+                  <span className="flex items-center justify-between gap-2">
+                    <span className="text-[13px] font-medium">{formatChunkReference(project, chapterIndex, chunk, '–')}</span>
+                    <span className="flex gap-1" aria-hidden="true">
+                      {['observation', 'interpretation', 'application'].map((f) => (
+                        <span key={f} className={`h-2 w-2 rounded-full border ${filled(chunk[f]) ? 'border-[var(--r-accent)] bg-[var(--r-accent)]' : 'border-[var(--r-sub)]'}`} />
+                      ))}
+                    </span>
+                  </span>
+                  {chunk.episodeTitle && <span className="mt-0.5 block truncate text-[11px] text-[var(--r-accent)]">{chunk.episodeNumber ? `${chunk.episodeNumber} · ` : ''}{chunk.episodeTitle}</span>}
+                  <span className="mt-0.5 block truncate font-serif text-xs text-[var(--r-sub)]">{first}</span>
+                </button>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </nav>
+  );
+}

src/components/study/PageShell.jsx

@@ -0,0 +1,107 @@
+// Themed frame for pages outside a study project (Home, Import, Settings, Admin):
+// a calm app bar (brand, three destinations, account menu) and a page heading row.
+import { useEffect, useRef, useState } from 'react';
+import { useApp } from '../../context/AppContext.js';
+import { themeVars, READER_THEMES } from '../reader/readerThemes.js';
+import { ChevronLeft, SearchIcon } from '../reader/icons.jsx';
+
+// `short` is what a phone shows; the full label is still the button's accessible name.
+const NAV = [
+  { id: 'studies', label: 'Studies', short: 'Studies' },
+  { id: 'reader', label: 'Read Bible', short: 'Bible' },
+  { id: 'plans', label: 'Reading Plans', short: 'Plans' },
+];
+
+// Avatar button with a dropdown: who you are, the theme, Settings, Admin, Log out.
+function AccountMenu() {
+  const { authUser, readerTheme, setReaderTheme, setCurrentPage, logout } = useApp();
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return undefined;
+    const onDown = (e) => { if (!ref.current?.contains(e.target)) setOpen(false); };
+    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => { document.removeEventListener('mousedown', onDown); document.removeEventListener('keydown', onKey); };
+  }, [open]);
+
+  const go = (page) => { setOpen(false); setCurrentPage(page); };
+  const item = 'block w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-black/5';
+
+  return (
+    <div ref={ref} className="relative">
+      <button type="button" onClick={() => setOpen((o) => !o)} aria-label="Account menu" aria-expanded={open}
+        className="flex h-8 w-8 items-center justify-center rounded-full border border-[var(--r-line)] bg-[var(--r-bg)] text-xs font-medium uppercase hover:bg-black/5">
+        {authUser?.email?.[0] ?? '·'}
+      </button>
+      {open && (
+        <div role="menu" className="absolute right-0 top-full z-40 mt-2 w-60 rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-2 shadow-xl">
+          {authUser && <p className="truncate px-3 pb-1 pt-2 text-xs text-[var(--r-sub)]">{authUser.email}</p>}
+          <div className="px-3 pb-2 pt-1">
+            <p className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Theme</p>
+            <div className="flex overflow-hidden rounded-lg border border-[var(--r-line)]">
+              {Object.entries(READER_THEMES).map(([id, t]) => (
+                <button key={id} type="button" onClick={() => setReaderTheme(id)} aria-pressed={readerTheme === id}
+                  className={`flex-1 px-2 py-1.5 text-xs ${readerTheme === id ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'}`}>{t.label}</button>
+              ))}
+            </div>
+          </div>
+          {authUser && (
+            <div className="border-t border-[var(--r-line)] pt-1">
+              <button type="button" role="menuitem" onClick={() => go('settings')} className={item}>Settings</button>
+              {authUser.isAdmin && <button type="button" role="menuitem" onClick={() => go('admin')} className={item}>Admin</button>}
+              <button type="button" role="menuitem" onClick={() => { setOpen(false); logout(); }} className={item}>Log out</button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function PageShell({ title, onBack, actions, active = null, maxWidth = 'max-w-6xl', children }) {
+  const { readerTheme, goHome, goStudies, openBibleReader, openReadingPlans, openPalette } = useApp();
+  const go = { studies: goStudies, reader: openBibleReader, plans: openReadingPlans };
+  return (
+    <div className="min-h-dvh bg-[var(--r-bg)] font-sans text-[var(--r-text)]" style={themeVars(readerTheme)}>
+      <a href="#content" className="skip-link">Skip to content</a>
+      <header className="safe-top sticky top-0 z-30 border-b border-[var(--r-line)] bg-[var(--r-bar)]">
+        <div className={`mx-auto flex h-12 ${maxWidth} items-center gap-2 px-3 sm:gap-4 sm:px-4`}>
+          <button type="button" onClick={goHome} className="flex shrink-0 items-center gap-2" aria-label="Bible Study home">
+            <img src="/logo.svg" alt="" className="h-6 w-6" />
+            <span className="hidden text-sm font-medium sm:inline">Bible Study</span>
+          </button>
+          <nav aria-label="Main" className="flex items-center gap-0.5">
+            {NAV.map((n) => (
+              <button key={n.id} type="button" onClick={go[n.id]} aria-current={active === n.id ? 'page' : undefined} aria-label={n.label}
+                className={`whitespace-nowrap rounded-full px-2.5 py-1.5 text-sm sm:px-3 ${active === n.id ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'}`}>
+                <span className="sm:hidden" aria-hidden="true">{n.short}</span><span className="hidden sm:inline" aria-hidden="true">{n.label}</span>
+              </button>
+            ))}
+          </nav>
+          <div className="ml-auto flex items-center gap-2">
+            {openPalette && (
+              <button type="button" onClick={openPalette} aria-label="Search and go to"
+                className="flex items-center gap-2 rounded-full border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-1 text-xs text-[var(--r-sub)] hover:bg-black/5">
+                <SearchIcon /><span className="hidden sm:inline">Search</span><kbd className="hidden rounded border border-[var(--r-line)] px-1 text-[10px] md:inline">⌘K</kbd>
+              </button>
+            )}
+            <AccountMenu />
+          </div>
+        </div>
+      </header>
+      <div id="content" tabIndex={-1} className="focus:outline-none">
+      <div className={`mx-auto flex ${maxWidth} flex-wrap items-center gap-3 px-4 pt-6`}>
+        {onBack && (
+          <button type="button" onClick={onBack} aria-label="Back" className="-ml-2 flex h-9 w-9 items-center justify-center rounded-lg text-[var(--r-sub)] hover:bg-black/5"><ChevronLeft /></button>
+        )}
+        <h1 className="text-2xl font-medium tracking-tight">{title}</h1>
+        {actions && <div className="ml-auto flex flex-wrap items-center gap-2">{actions}</div>}
+      </div>
+      {children}
+      </div>
+    </div>
+  );
+}

src/components/study/PeopleChunkTab.jsx

@@ -0,0 +1,30 @@
+// People, places and events (Theographic data) tied to the chunk's verses.
+import { loadTheographic, useAsync } from '../../hooks/useVerseStudy.js';
+import { PersonCard } from '../StudyPanel.jsx';
+
+export default function PeopleChunkTab({ book, chapter, chunk }) {
+  const { status, data } = useAsync(() => loadTheographic(book, chapter), [book, chapter]);
+  if (status === 'loading') return <p className="text-sm text-[var(--r-sub)]">Loading…</p>;
+  if (status === 'empty') return <p className="text-sm text-[var(--r-sub)]">No people or places data for this chapter.</p>;
+  const inChunk = (x) => x.verses?.some((n) => n >= chunk.startVerse && n <= chunk.endVerse);
+  const people = data.people.filter(inChunk);
+  const places = [...new Map(data.places.filter(inChunk).map((p) => [p.name, p])).values()];
+  const events = data.events.filter(inChunk);
+  if (!people.length && !places.length && !events.length) return <p className="text-sm text-[var(--r-sub)]">Nothing tagged in these verses.</p>;
+  const head = 'mb-1 text-[11px] uppercase tracking-wide text-[var(--r-sub)]';
+  return (
+    <div className="space-y-4">
+      {people.length > 0 && <div><p className={head}>People</p><ul className="space-y-1">{people.map((p) => <PersonCard key={p.id} person={p} />)}</ul></div>}
+      {places.length > 0 && (
+        <div><p className={head}>Places</p>
+          <ul className="space-y-1">{places.map((p) => (
+            <li key={p.id} className="flex items-center justify-between rounded-xl bg-[var(--r-bg)] px-3 py-2 text-sm">
+              <span>{p.name}{p.featureType && <span className="ml-1 text-xs text-[var(--r-sub)]">{p.featureType}</span>}</span>
+              {p.latitude != null && <a href={`https://www.openstreetmap.org/?mlat=${p.latitude}&mlon=${p.longitude}#map=8/${p.latitude}/${p.longitude}`} target="_blank" rel="noopener noreferrer" className="text-xs text-[var(--r-accent)] hover:underline">Map ↗</a>}
+            </li>))}</ul></div>
+      )}
+      {events.length > 0 && <div><p className={head}>Events</p><ul className="space-y-1">{events.map((e) => <li key={e.id} className="rounded-xl bg-[var(--r-bg)] px-3 py-2 text-sm">{e.name}{e.startDate && <span className="ml-1 text-xs text-[var(--r-sub)]">approx. AD {e.startDate}</span>}</li>)}</ul></div>}
+      <p className="text-[10px] text-[var(--r-sub)]">People, places and events: Theographic Bible Metadata, CC BY-SA 4.0.</p>
+    </div>
+  );
+}

src/components/study/ResourcePane.jsx

@@ -0,0 +1,50 @@
+// Right-hand pane of the Study stage: commentary, word study, cross-references and
+// people & places, all driven by the selected chunk.
+import { useState } from 'react';
+import CommentaryChunkTab from './CommentaryChunkTab.jsx';
+import WordStudyTab from './WordStudyTab.jsx';
+import CrossRefsTab from './CrossRefsTab.jsx';
+import PeopleChunkTab from './PeopleChunkTab.jsx';
+
+export const RESOURCE_TABS = [
+  { id: 'commentary', label: 'Commentary' },
+  { id: 'words', label: 'Word study' },
+  { id: 'refs', label: 'Cross-refs' },
+  { id: 'people', label: 'People & places' },
+];
+
+export default function ResourcePane({ tab, setTab, chunk, chapter, chapterIndex, project, updateChunk, notify, resources, wordStudy, crossRefs, openWordId, setOpenWordId }) {
+  const counts = { words: chunk.greekWords.length, refs: (chunk.crossReferences ?? []).length };
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div role="tablist" aria-label="Study resources" className="flex shrink-0 flex-wrap gap-1.5 border-b border-[var(--r-line)] px-3 py-2.5">
+        {RESOURCE_TABS.map((t) => (
+          <button key={t.id} type="button" role="tab" aria-selected={tab === t.id} onClick={() => setTab(t.id)}
+            className={`rounded-full border px-3 py-1 text-xs ${tab === t.id ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`}>
+            {t.label}{counts[t.id] ? ` · ${counts[t.id]}` : ''}
+          </button>
+        ))}
+      </div>
+      <div role="tabpanel" className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
+        {tab === 'commentary' && <CommentaryChunkTab resources={resources} chunk={chunk} project={project} chapterIndex={chapterIndex} updateChunk={updateChunk} notify={notify} />}
+        {tab === 'words' && <WordStudyTab wordStudy={wordStudy} chunk={chunk} openWordId={openWordId} setOpenWordId={setOpenWordId} />}
+        {tab === 'refs' && <CrossRefsTab crossRefs={crossRefs} chunk={chunk} />}
+        {tab === 'people' && <PeopleChunkTab book={chapter.bookAbbrev} chapter={chapter.chapter} chunk={chunk} />}
+      </div>
+    </div>
+  );
+}
+
+export function useResourceTab() {
+  const [tab, setTabState] = useState(() => {
+    try {
+      const saved = localStorage.getItem('studyResourceTab');
+      return RESOURCE_TABS.some((t) => t.id === saved) ? saved : 'commentary';
+    } catch { return 'commentary'; }
+  });
+  const setTab = (id) => {
+    setTabState(id);
+    try { localStorage.setItem('studyResourceTab', id); } catch { /* storage unavailable */ }
+  };
+  return [tab, setTab];
+}

src/components/study/ScripturePane.jsx

@@ -0,0 +1,46 @@
+// The chunk's passage, set like the Reader. Click a verse number to open its
+// interlinear words; click an original word to add it to the chunk's word study.
+import { useState } from 'react';
+import { NT_BOOK_NUMBER } from '../../utils/bibleUtils.jsx';
+
+export default function ScripturePane({ verses, chapter, interlinear, interlinearLoading, addedStrongs, onPickWord }) {
+  const [openVerse, setOpenVerse] = useState(null);
+  const isHebrew = chapter && !NT_BOOK_NUMBER[chapter.bookAbbrev];
+  return (
+    <section aria-label="Scripture" className="rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] px-5 py-4">
+      <div className="font-serif text-[1.05rem] leading-[1.85]">
+        {verses.map((v) => {
+          const words = v.chapter === chapter?.chapter ? interlinear?.[String(v.number)] : null;
+          const open = openVerse === `${v.chapter}:${v.number}`;
+          return (
+            <div key={`${v.chapter}-${v.number}`} className="mb-1.5">
+              <button type="button" disabled={!words} onClick={() => setOpenVerse(open ? null : `${v.chapter}:${v.number}`)}
+                title={words ? 'Show original words' : undefined}
+                className={`mr-1.5 align-super font-sans text-[0.6em] ${words ? 'text-[var(--r-accent)] hover:underline' : 'cursor-default text-[var(--r-sub)]'} ${open ? 'font-bold' : ''}`}>
+                {v.chapter !== chapter?.chapter ? `${v.chapter}:` : ''}{v.number}
+              </button>
+              <span>{v.text}</span>
+              {open && words && (
+                <div dir={isHebrew ? 'rtl' : 'ltr'} className="mt-2 flex flex-wrap gap-2 rounded-xl bg-[var(--r-bg)] p-2.5 font-sans">
+                  {words.map((w, i) => {
+                    const added = w.s && addedStrongs.has(w.s.toUpperCase());
+                    return (
+                      <button key={i} type="button" disabled={!w.s} onClick={() => onPickWord(w)}
+                        title={[w.t, w.s, w.p].filter(Boolean).join(' · ') + (w.s ? (added ? ' — already in word study' : ' — click to add') : '')}
+                        className={`flex flex-col items-center rounded-lg border px-2 py-1 text-center ${added ? 'border-[var(--r-accent)]' : 'border-[var(--r-line)] hover:bg-black/5'} disabled:cursor-default`}>
+                        <span className={`text-base ${isHebrew ? 'font-serif' : ''}`}>{w.o}</span>
+                        <span className="text-[11px] leading-tight text-[var(--r-sub)]">{w.g || '—'}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      {interlinearLoading && <p className="mt-2 font-sans text-xs text-[var(--r-sub)]">Loading original words…</p>}
+      {!interlinearLoading && interlinear && <p className="mt-2 font-sans text-[11px] text-[var(--r-sub)]">Click a verse number to see its original words; click a word to study it.</p>}
+    </section>
+  );
+}

src/components/study/StudioShell.jsx

@@ -0,0 +1,70 @@
+// Shared frame for every stage of a study project (Outline, Study, Script,
+// Export): themed like the Reader, with a slim bar that carries the project title,
+// the stage switcher, and save/sync status.
+import { useApp } from '../../context/AppContext.js';
+import { themeVars, READER_THEMES } from '../reader/readerThemes.js';
+import { ChevronLeft } from '../reader/icons.jsx';
+
+export const STAGES = [
+  { id: 'setup', label: 'Chunks' },
+  { id: 'study', label: 'Study' },
+  { id: 'outline', label: 'Outline' },
+  { id: 'script', label: 'Script' },
+  { id: 'export', label: 'Export' },
+];
+const THEME_ORDER = ['paper', 'sepia', 'dark'];
+
+export default function StudioShell({ stage, loading = false, fixedHeight = false, children }) {
+  const {
+    goHome, setCurrentPage, project, allChunks,
+    saveStatus, syncStatus, retrySync, syncConflict, keepMyVersion, useServerVersion,
+    readerTheme, setReaderTheme,
+  } = useApp();
+  const noChunks = allChunks.length === 0;
+  const cycleTheme = () => setReaderTheme(THEME_ORDER[(THEME_ORDER.indexOf(readerTheme) + 1) % THEME_ORDER.length]);
+
+  return (
+    <div className={`bg-[var(--r-bg)] font-sans text-[var(--r-text)] ${fixedHeight ? 'fixed inset-0 flex flex-col overflow-hidden' : 'min-h-dvh'}`} style={themeVars(readerTheme)}>
+      <div className="safe-top z-30 shrink-0 border-b border-[var(--r-line)] bg-[var(--r-bar)]">
+        <div className="mx-auto flex h-12 max-w-[1600px] items-center gap-3 px-3">
+          <button type="button" onClick={goHome} aria-label="Back to home"
+            className="flex h-9 items-center gap-0.5 rounded-lg pl-1 pr-2 text-[var(--r-sub)] hover:bg-black/5"><ChevronLeft /><span className="hidden text-xs sm:inline">Home</span></button>
+          <div className="min-w-0 max-w-[16rem] truncate text-sm font-medium">{project?.title ?? ''}</div>
+          <nav aria-label="Study stages" className="mx-auto flex gap-0.5">
+            {STAGES.map((s) => {
+              const disabled = s.id !== 'setup' && (!project || noChunks);
+              return (
+                <button key={s.id} type="button" disabled={disabled} aria-current={stage === s.id ? 'step' : undefined}
+                  title={disabled ? 'Add a chunk in Chunks first' : undefined}
+                  onClick={() => setCurrentPage(s.id)}
+                  className={`rounded-full px-3.5 py-1.5 text-xs ${stage === s.id ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'} disabled:opacity-40 disabled:hover:bg-transparent`}>
+                  {s.label}
+                </button>
+              );
+            })}
+          </nav>
+          <div className="flex min-w-[7rem] items-center justify-end gap-2 text-xs text-[var(--r-sub)]" aria-live="polite">
+            {loading ? <span>Loading…</span>
+              : saveStatus ? <span className="text-[var(--r-accent)]">{saveStatus}</span>
+                : syncStatus === 'syncing' ? <span>Syncing…</span>
+                  : syncStatus === 'synced' ? <span>Saved</span>
+                    : syncStatus === 'error' ? (
+                      <span className="text-[var(--r-danger,#b42318)]">Sync failed <button type="button" onClick={retrySync} className="underline">Retry</button></span>
+                    ) : null}
+            <button type="button" onClick={cycleTheme} className="rounded-lg px-2 py-1 hover:bg-black/5" title="Change theme">{READER_THEMES[readerTheme]?.label}</button>
+          </div>
+        </div>
+      </div>
+      {syncConflict && project && syncConflict.id === project.id && (
+        <div role="alert" className="flex shrink-0 flex-wrap items-center justify-center gap-x-4 gap-y-2 border-b border-[var(--r-line)] bg-[var(--r-hl)] px-4 py-2.5 text-sm">
+          <span>This study was changed on another device. Your edits here are saved on this device, but not yet synced.</span>
+          <span className="flex gap-2">
+            <button type="button" onClick={keepMyVersion} className="rounded-full bg-[var(--r-text)] px-3 py-1 text-xs font-medium text-[var(--r-bg)] hover:opacity-90">Keep this version</button>
+            <button type="button" onClick={useServerVersion} className="rounded-full border border-[var(--r-text)] px-3 py-1 text-xs font-medium hover:bg-black/5">Use the other version</button>
+          </span>
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}

src/components/study/SuggestWordsSheet.jsx

@@ -0,0 +1,50 @@
+// Picker for "suggest words from this passage": checkbox list of candidate words.
+import DOMPurify from 'dompurify';
+import Sheet from '../reader/Sheet.jsx';
+import { buildGreekDefinitionHtml } from '../../utils/wordStudy.js';
+
+export default function SuggestWordsSheet({ wordStudy }) {
+  const { suggestModal, setSuggestModal, suggestSelection, setSuggestSelection, confirmSuggestWords } = wordStudy;
+  if (!suggestModal) return null;
+  const close = () => { setSuggestModal(null); setSuggestSelection(new Set()); };
+  const n = suggestSelection.size;
+  return (
+    <Sheet open onClose={close} title={`Select ${suggestModal.language === 'hebrew' ? 'Hebrew' : 'Greek'} words to add`}>
+      <p className="mb-2 text-xs text-[var(--r-sub)]">{suggestModal.helperText || "Content words are pre-checked. Uncheck any you don't need."}</p>
+      <div className="mb-2 flex items-center gap-3 text-xs">
+        <button type="button" onClick={() => setSuggestSelection(new Set(suggestModal.words.map((w) => w.strongKey)))} className="text-[var(--r-accent)] hover:underline">Select all</button>
+        <button type="button" onClick={() => setSuggestSelection(new Set())} className="text-[var(--r-accent)] hover:underline">Select none</button>
+        <span className="ml-auto text-[var(--r-sub)]">{n} selected</span>
+      </div>
+      <ul className="max-h-[40vh] divide-y divide-[var(--r-line)] overflow-y-auto rounded-xl border border-[var(--r-line)] px-3">
+        {suggestModal.words.map((w) => (
+          <li key={w.strongKey}>
+            <label className="flex cursor-pointer items-center gap-3 py-2.5">
+              <input type="checkbox" checked={suggestSelection.has(w.strongKey)} className="h-4 w-4 shrink-0 accent-[var(--r-accent)]"
+                onChange={(e) => setSuggestSelection((prev) => { const next = new Set(prev); if (e.target.checked) next.add(w.strongKey); else next.delete(w.strongKey); return next; })} />
+              <div className="min-w-0 flex-1">
+                <div className="flex flex-wrap items-baseline gap-2">
+                  <span className="text-sm font-medium">{w.def || w.strongKey}</span>
+                  <span className="text-sm text-[var(--r-sub)]">{w.lexeme}</span>
+                  {w.translit && <span className="text-xs italic text-[var(--r-sub)]">{w.translit}</span>}
+                  <span className="font-mono text-[10px] text-[var(--r-sub)]">{w.strongKey}</span>
+                </div>
+                {w.entry && (w.entry.strongs_def || w.entry.kjv_def || w.entry.derivation) && (
+                  <details className="mt-1">
+                    <summary className="cursor-pointer text-xs text-[var(--r-accent)]" onClick={(e) => e.stopPropagation()}>Definition</summary>
+                    <div className="mt-1 text-xs leading-5" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(buildGreekDefinitionHtml(w.strongKey, w.entry)) }} />
+                  </details>
+                )}
+              </div>
+            </label>
+          </li>
+        ))}
+      </ul>
+      <div className="mt-3 flex gap-2">
+        <button type="button" onClick={close} className="flex-1 rounded-xl border border-[var(--r-line)] py-2 text-sm hover:bg-black/5">Cancel</button>
+        <button type="button" onClick={confirmSuggestWords} disabled={n === 0}
+          className="flex-1 rounded-xl bg-[var(--r-accent)] py-2 text-sm font-medium text-[var(--r-on)] disabled:opacity-40">Add {n > 0 ? `${n} word${n > 1 ? 's' : ''}` : 'words'}</button>
+      </div>
+    </Sheet>
+  );
+}

src/components/study/WordStudyTab.jsx

@@ -0,0 +1,93 @@
+// Greek/Hebrew word study for the chunk: compact cards (one open for editing at a
+// time), Strong's lookup, and suggestions from the passage.
+import { useState } from 'react';
+import DOMPurify from 'dompurify';
+import { externalLookupLinks, speakOriginalWord } from '../../utils/wordStudy.js';
+
+const inputCls = 'mt-1 block w-full rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1.5 text-sm text-[var(--r-text)] focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]';
+const btn = 'rounded-lg border border-[var(--r-line)] px-2.5 py-1.5 text-xs hover:bg-black/5 disabled:opacity-50';
+
+function WordCard({ word, open, onToggle, chunkId, wordStudy }) {
+  const { updateChunkWord, lookupWord, removeGreekWord } = wordStudy;
+  const set = (patch) => updateChunkWord(chunkId, word.id, patch);
+  const field = (label, key, placeholder) => (
+    <label className="block text-xs text-[var(--r-sub)]">{label}
+      <input type="text" value={word[key] ?? ''} placeholder={placeholder} onChange={(e) => set({ [key]: e.target.value })} className={inputCls} />
+    </label>
+  );
+  const notFound = (word.shortDefinition === 'No definition found.' || word.shortDefinition === 'Lookup failed.') && !word.lexeme && !word.definitionHtml && word.query.trim();
+  return (
+    <div className={`rounded-xl border ${open ? 'border-[var(--r-accent)]' : 'border-[var(--r-line)]'}`}>
+      <button type="button" onClick={onToggle} aria-expanded={open} className="flex w-full items-baseline gap-2 px-3 py-2 text-left">
+        <span className="font-serif text-lg leading-tight">{word.lexeme || <span className="font-sans text-sm text-[var(--r-sub)]">New word</span>}</span>
+        <span className="min-w-0 flex-1 truncate text-xs text-[var(--r-sub)]">{[word.transliteration, word.englishGloss || word.shortDefinition].filter(Boolean).join(' · ')}</span>
+        {word.strongNumber && <span className="shrink-0 rounded-full bg-[var(--r-bar)] px-2 py-0.5 text-[10px]">{word.strongNumber}</span>}
+      </button>
+      {open && (
+        <div className="space-y-3 border-t border-[var(--r-line)] px-3 py-3">
+          <label className="block text-xs text-[var(--r-sub)]">Strong’s number or English gloss
+            <input type="text" value={word.query} onChange={(e) => set({ query: e.target.value })}
+              onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); lookupWord(chunkId, word.id, 'greek'); } }}
+              placeholder="G4102, H7225, 4102, or a word" className={inputCls} />
+          </label>
+          <div className="flex flex-wrap gap-2">
+            <button type="button" onClick={() => lookupWord(chunkId, word.id, 'greek')} className={`${btn} bg-[var(--r-text)] text-[var(--r-bg)] hover:opacity-90`}>{word.loading ? 'Looking up...' : 'Look up Greek'}</button>
+            <button type="button" onClick={() => lookupWord(chunkId, word.id, 'hebrew')} className={btn}>{word.loading ? 'Looking up...' : 'Look up Hebrew'}</button>
+            {word.lexeme && <button type="button" onClick={() => speakOriginalWord(word.lexeme, word.strongNumber)} className={btn} title="Hear pronunciation">Speak</button>}
+            <button type="button" onClick={() => removeGreekWord(chunkId, word.id)} className={`${btn} ml-auto text-[var(--r-danger,#b42318)]`}>Delete</button>
+          </div>
+          <div className="grid grid-cols-2 gap-2">
+            {field(word.strongNumber?.startsWith('H') ? 'Hebrew word' : 'Greek word', 'lexeme')}
+            {field('Transliteration', 'transliteration')}
+            {field('Part of speech', 'partOfSpeech', 'e.g. Noun')}
+            {field('English word', 'englishGloss', 'e.g. grace')}
+          </div>
+          {field('Short definition', 'shortDefinition')}
+          {word.definitionHtml && (
+            <details className="rounded-lg border border-[var(--r-line)] p-2.5">
+              <summary className="cursor-pointer text-xs font-medium">Extended definition</summary>
+              <div className="mt-2 text-[13px] leading-relaxed" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(word.definitionHtml) }} />
+            </details>
+          )}
+          {notFound ? (
+            <div className="rounded-lg border border-[var(--r-line)] p-2.5">
+              <p className="mb-1.5 text-xs text-[var(--r-sub)]">Not found in BDBT — look it up manually:</p>
+              <div className="flex flex-wrap gap-1.5">
+                {externalLookupLinks(word.query).map(({ label, url }) => (
+                  <a key={label} href={url} target="_blank" rel="noreferrer" className={btn}>{label} ↗</a>
+                ))}
+                <button type="button" onClick={() => navigator.clipboard.writeText(word.query.trim())} className={btn}>Copy “{word.query.trim()}”</button>
+              </div>
+            </div>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function WordStudyTab({ wordStudy, chunk, openWordId, setOpenWordId }) {
+  const { suggestingGreekForChunkId, suggestingHebrewForChunkId, suggestGreekWordsForChunk, suggestHebrewWordsForChunk, addGreekWord } = wordStudy;
+  return (
+    <div>
+      <div className="mb-3 flex flex-wrap gap-2">
+        <button type="button" onClick={() => suggestGreekWordsForChunk(chunk.id)} disabled={suggestingGreekForChunkId === chunk.id} className={btn}
+          title="Auto-populate Greek words that actually appear in this passage">{suggestingGreekForChunkId === chunk.id ? 'Suggesting…' : 'Suggest Greek'}</button>
+        <button type="button" onClick={() => suggestHebrewWordsForChunk(chunk.id)} disabled={suggestingHebrewForChunkId === chunk.id} className={btn}
+          title="Suggest Hebrew words for Old Testament passages">{suggestingHebrewForChunkId === chunk.id ? 'Suggesting…' : 'Suggest Hebrew'}</button>
+        <button type="button" onClick={() => setOpenWordId(addGreekWord(chunk.id))} className={`${btn} ml-auto bg-[var(--r-text)] text-[var(--r-bg)] hover:opacity-90`}>Add word</button>
+      </div>
+      <div className="space-y-2">
+        {chunk.greekWords.length === 0 && (
+          <p className="rounded-xl border border-dashed border-[var(--r-line)] p-4 text-sm text-[var(--r-sub)]">
+            No words yet. Open a verse’s original words in the text and click one, or add a word to look it up.
+          </p>
+        )}
+        {chunk.greekWords.map((w) => (
+          <WordCard key={w.id} word={w} open={openWordId === w.id} chunkId={chunk.id} wordStudy={wordStudy}
+            onToggle={() => setOpenWordId(openWordId === w.id ? null : w.id)} />
+        ))}
+      </div>
+    </div>
+  );
+}

src/hooks/useAudio.js

@@ -1,13 +1,23 @@
 // Chapter audio playback. The Home page's whole-book player and the Reader's
 // chapter player share one <audio> element; audioModeRef tracks which owns it.
 import { useEffect, useRef, useState } from 'react';
-import { bookOptions } from '../utils/bibleUtils.jsx';
+import { bookOptions, CHAPTER_COUNTS } from '../utils/bibleUtils.jsx';
 
-export function useAudio(readerBookAbbrev, readerChapter) {
+export function useAudio(readerBookAbbrev, readerChapter, readerTranslation = 'BSB') {
   const [audioBook, setAudioBook] = useState(bookOptions[0].abbrev);
-  const [audioNarrator, setAudioNarrator] = useState('souer');
+  const [audioNarrator, setAudioNarratorState] = useState(() => {
+    try {
+      const saved = localStorage.getItem('audio-narrator');
+      return ['david', 'hays', 'souer'].includes(saved) ? saved : 'souer';
+    } catch { return 'souer'; }
+  });
+  const setAudioNarrator = (id) => {
+    setAudioNarratorState(id);
+    try { localStorage.setItem('audio-narrator', id); } catch { /* storage unavailable */ }
+  };
   const [audioState, setAudioState] = useState({ status: 'idle', chapter: 0, total: 0 });
   const [readerAudioState, setReaderAudioState] = useState({ status: 'idle', chapter: 0 });
+  const [audioProgress, setAudioProgress] = useState({ currentTime: 0, duration: 0 });
   const audioRef = useRef(null);
   const audioModeRef = useRef('book'); // 'book' | 'reader' — which player owns audioRef
   const audioBookRef = useRef(audioBook);
@@ -16,16 +26,37 @@ export function useAudio(readerBookAbbrev, readerChapter) {
   audioBookRef.current = audioBook;
   audioNarratorRef.current = audioNarrator;
   audioStateRef.current = audioState;
+  // The Reader's player follows the translation on screen: ESV has its own
+  // recording; every other translation falls back to the BSB narrators.
+  const readerTranslationRef = useRef(readerTranslation);
+  readerTranslationRef.current = readerTranslation;
+  const readerAudioSource = () => (readerTranslationRef.current === 'ESV' ? 'ESV' : 'BSB');
 
   const playAudioChapter = async (abbrev, chapterNum, narrator) => {
+    const source = audioModeRef.current === 'reader' ? readerAudioSource() : 'BSB';
+    let url;
+    let total;
+    if (source === 'ESV') {
+      const res = await fetch(`/api/bible/ESV/audio/${abbrev}/${chapterNum}`, { credentials: 'include' });
+      if (!res.ok) throw new Error('Failed to load ESV audio');
+      url = (await res.json()).url;
+      total = CHAPTER_COUNTS[abbrev] ?? chapterNum;
+    } else {
       const res = await fetch(`https://bible.helloao.org/api/BSB/${abbrev}/${chapterNum}.json`);
       if (!res.ok) throw new Error('Failed to load chapter audio');
       const data = await res.json();
-    const total = data.book?.numberOfChapters ?? chapterNum;
-    const url = data.thisChapterAudioLinks?.[narrator];
+      total = data.book?.numberOfChapters ?? chapterNum;
+      url = data.thisChapterAudioLinks?.[narrator];
+    }
     if (!url) throw new Error('Audio not available for this narrator');
     if (!audioRef.current) {
       audioRef.current = new Audio();
+      audioRef.current.addEventListener('timeupdate', () => {
+        setAudioProgress({ currentTime: audioRef.current.currentTime, duration: audioRef.current.duration || 0 });
+      });
+      audioRef.current.addEventListener('loadedmetadata', () => {
+        setAudioProgress((prev) => ({ ...prev, duration: audioRef.current.duration || 0 }));
+      });
       audioRef.current.addEventListener('ended', () => {
         if (audioModeRef.current === 'reader') {
           setReaderAudioState({ status: 'idle', chapter: 0 });
@@ -45,7 +76,7 @@ export function useAudio(readerBookAbbrev, readerChapter) {
     audioEl.src = url;
     await audioEl.play();
     if (audioModeRef.current === 'reader') {
-      setReaderAudioState({ status: 'playing', chapter: chapterNum });
+      setReaderAudioState({ status: 'playing', chapter: chapterNum, source });
     } else {
       setAudioState({ status: 'playing', chapter: chapterNum, total });
     }
@@ -60,6 +91,20 @@ export function useAudio(readerBookAbbrev, readerChapter) {
     }
   };
 
+  // Starts book-mode playback at an arbitrary chapter (e.g. a reading plan's
+  // "today" chapter) instead of always chapter 1. Explicit args avoid relying
+  // on reader state that may not have re-rendered yet if called right after
+  // navigating there in the same event handler.
+  const handlePlayBookAudioFrom = async (abbrev, startChapter) => {
+    audioModeRef.current = 'book';
+    setAudioBook(abbrev);
+    try {
+      await playAudioChapter(abbrev, startChapter, audioNarrator);
+    } catch {
+      setAudioState({ status: 'error', chapter: 0, total: 0 });
+    }
+  };
+
   const handleStopBookAudio = () => {
     if (audioRef.current) {
       audioRef.current.pause();
@@ -67,6 +112,7 @@ export function useAudio(readerBookAbbrev, readerChapter) {
     }
     setAudioState({ status: 'idle', chapter: 0, total: 0 });
     setReaderAudioState({ status: 'idle', chapter: 0 });
+    setAudioProgress({ currentTime: 0, duration: 0 });
   };
 
   const handleToggleBookAudioPause = () => {
@@ -80,6 +126,29 @@ export function useAudio(readerBookAbbrev, readerChapter) {
     }
   };
 
+  const handleSeekAudio = (deltaSeconds) => {
+    if (!audioRef.current) return;
+    const el = audioRef.current;
+    const duration = Number.isFinite(el.duration) ? el.duration : Infinity;
+    el.currentTime = Math.min(Math.max(el.currentTime + deltaSeconds, 0), duration);
+  };
+
+  const handleSeekAudioTo = (seconds) => {
+    if (!audioRef.current) return;
+    const el = audioRef.current;
+    const duration = Number.isFinite(el.duration) ? el.duration : 0;
+    el.currentTime = Math.min(Math.max(seconds, 0), duration);
+  };
+
+  const handleSkipBookChapter = () => {
+    const nextChapter = audioStateRef.current.chapter + 1;
+    if (nextChapter > audioStateRef.current.total) return;
+    audioModeRef.current = 'book';
+    playAudioChapter(audioBookRef.current, nextChapter, audioNarratorRef.current).catch(() =>
+      setAudioState({ status: 'error', chapter: 0, total: 0 }),
+    );
+  };
+
   const handlePlayReaderAudio = async () => {
     audioModeRef.current = 'reader';
     try {
@@ -104,7 +173,7 @@ export function useAudio(readerBookAbbrev, readerChapter) {
   useEffect(() => {
     if (audioModeRef.current !== 'reader') return;
     if (readerAudioState.status !== 'playing' && readerAudioState.status !== 'paused') return;
-    if (readerAudioState.chapter === readerChapter) return;
+    if (readerAudioState.chapter === readerChapter && readerAudioState.source === readerAudioSource()) return;
     const wasPaused = readerAudioState.status === 'paused';
     playAudioChapter(readerBookAbbrev, readerChapter, audioNarrator)
       .then(() => {
@@ -115,7 +184,7 @@ export function useAudio(readerBookAbbrev, readerChapter) {
       })
       .catch(() => setReaderAudioState({ status: 'error', chapter: 0 }));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [readerBookAbbrev, readerChapter]);
+  }, [readerBookAbbrev, readerChapter, readerTranslation]);
 
   useEffect(() => () => {
     if (audioRef.current) {
@@ -128,9 +197,14 @@ export function useAudio(readerBookAbbrev, readerChapter) {
     audioBook, setAudioBook,
     audioNarrator, setAudioNarrator,
     audioState,
+    audioProgress,
     handlePlayBookAudio,
+    handlePlayBookAudioFrom,
     handleStopBookAudio,
     handleToggleBookAudioPause,
+    handleSkipBookChapter,
+    handleSeekAudio,
+    handleSeekAudioTo,
     readerAudioState,
     handlePlayReaderAudio,
     handleToggleReaderAudioPause,

src/hooks/useBibleReader.js

@@ -2,14 +2,77 @@
 // Audio playback stays in App because the study page's book player shares
 // the same <audio> element.
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { bookOptions, parseBibleChapter } from '../utils/bibleUtils.jsx';
+import { bookOptions, CHAPTER_COUNTS, parseBibleChapter } from '../utils/bibleUtils.jsx';
+import { useReaderMarksSync } from './useReaderMarksSync.js';
+import { usePrefsSync } from './usePrefsSync.js';
+import { COMMENTARIES } from './useVerseStudy.js';
+import { READER_TRANSLATIONS, fetchChapter } from '../utils/bibleText.js';
+import { mergeMarks, normalizeMarks } from '../utils/readerMarks.js';
 import { BIBLE_IDB_TTL, getBibleIndexFromIDB, saveBibleIndexToIDB } from '../utils/bibleIndexCache.js';
 
+export { READER_TRANSLATIONS };
+
+// A per-device choice kept in localStorage: useStoredChoice('reader-font', 'serif', ['serif', 'sans']).
+function useStoredChoice(key, fallback, allowed) {
+  const [value, setValue] = useState(() => {
+    try {
+      const saved = localStorage.getItem(key);
+      return saved !== null && allowed.includes(saved) ? saved : fallback;
+    } catch { return fallback; }
+  });
+  const set = (next) => {
+    setValue(next);
+    try { localStorage.setItem(key, next); } catch {}
+  };
+  return [value, set];
+}
+
+export const READER_FONTS = ['serif', 'sans', 'easy'];
+export const READER_SPACINGS = ['snug', 'normal', 'airy'];
+
 const BOOKMARK_COLORS = ['#fef08a', '#bbf7d0', '#bfdbfe', '#fecaca', '#e9d5ff'];
 
-export function useBibleReader(currentPage) {
-  const [readerBookAbbrev, setReaderBookAbbrev] = useState(bookOptions[0].abbrev);
-  const [readerChapter, setReaderChapter] = useState(1);
+// `translationOverride` lets a reading plan pin the Bible it is read in while it is
+// open; otherwise the reader's own (remembered) translation is used.
+export function useBibleReader(currentPage, translationOverride = null) {
+  // Where you left off (saved on this device, and synced to the account)
+  const [savedPosition] = useState(() => {
+    try {
+      const p = JSON.parse(localStorage.getItem('reader-position') || 'null');
+      return p && CHAPTER_COUNTS[p.book] && Number.isInteger(p.chapter) && p.chapter >= 1 && p.chapter <= CHAPTER_COUNTS[p.book] ? p : null;
+    } catch { return null; }
+  });
+  const [readerBookAbbrev, setReaderBookAbbrev] = useState(savedPosition?.book ?? bookOptions[0].abbrev);
+  const [readerChapter, setReaderChapter] = useState(savedPosition?.chapter ?? 1);
+  const [readerCommentary, setReaderCommentaryState] = useState(() => {
+    try {
+      const saved = localStorage.getItem('reader-commentary');
+      return COMMENTARIES.some((c) => c.id === saved) ? saved : COMMENTARIES[0].id;
+    } catch { return COMMENTARIES[0].id; }
+  });
+  useEffect(() => {
+    try { localStorage.setItem('reader-position', JSON.stringify({ book: readerBookAbbrev, chapter: readerChapter })); } catch {}
+  }, [readerBookAbbrev, readerChapter]);
+  const pageRef = useRef(currentPage);
+  pageRef.current = currentPage;
+  const [baseTranslation, setReaderTranslationState] = useState(() => {
+    try {
+      const saved = localStorage.getItem('reader-translation');
+      return READER_TRANSLATIONS.some((t) => t.id === saved) ? saved : 'BSB';
+    } catch { return 'BSB'; }
+  });
+  const readerTranslation = translationOverride ?? baseTranslation;
+  const [readerCopyright, setReaderCopyright] = useState('');
+  const [readerTheme, setReaderThemeState] = useState(() => {
+    try {
+      const saved = localStorage.getItem('reader-theme');
+      return ['paper', 'sepia', 'dark'].includes(saved) ? saved : 'paper';
+    } catch { return 'paper'; }
+  });
+  // 'flow' = verses run together like a printed page; 'verses' = one verse per line
+  const [readerLayout, setReaderLayoutState] = useState(() => {
+    try { return localStorage.getItem('reader-layout') === 'verses' ? 'verses' : 'flow'; } catch { return 'flow'; }
+  });
   const [readerVerses, setReaderVerses] = useState([]);
   const [readerTotalChapters, setReaderTotalChapters] = useState(1);
   const [readerLoading, setReaderLoading] = useState(false);
@@ -18,7 +81,51 @@ export function useBibleReader(currentPage) {
   const [readerInterlinearLoading, setReaderInterlinearLoading] = useState(false);
   const [readerSelectedVerse, setReaderSelectedVerse] = useState(null); // verse number with open interlinear panel
   const _readerInterlinearCacheRef = useRef({});
-  const [readerFontSize, setReaderFontSize] = useState(1); // em multiplier: 0.875 | 1 | 1.125 | 1.25
+  // Text size and reading width are per-device (a phone and a tablet want different ones)
+  const [readerFontSize, setReaderFontSizeState] = useState(() => {
+    try {
+      const n = Number(localStorage.getItem('reader-font-size'));
+      return [0.875, 1, 1.125, 1.25, 1.5].includes(n) ? n : 1;
+    } catch { return 1; }
+  }); // em multiplier: 0.875 | 1 | 1.125 | 1.25 | 1.5
+  const setReaderFontSize = (n) => {
+    setReaderFontSizeState(n);
+    try { localStorage.setItem('reader-font-size', String(n)); } catch {}
+  };
+  const [readerWide, setReaderWideState] = useState(() => {
+    try { return localStorage.getItem('reader-wide') === '1'; } catch { return false; }
+  });
+  const setReaderWide = (on) => {
+    setReaderWideState(!!on);
+    try { localStorage.setItem('reader-wide', on ? '1' : '0'); } catch {}
+  };
+  // Typography and a second Bible shown beside the first — all per-device, like text size.
+  const [readerFont, setReaderFont] = useStoredChoice('reader-font', 'serif', READER_FONTS);
+  const [readerSpacing, setReaderSpacing] = useStoredChoice('reader-spacing', 'normal', READER_SPACINGS);
+  const [readerVerseNumbers, setReaderVerseNumbersRaw] = useStoredChoice('reader-verse-numbers', 'on', ['on', 'off']);
+  const [readerParallel, setReaderParallel] = useStoredChoice('reader-parallel', '', ['', ...READER_TRANSLATIONS.map((t) => t.id)]);
+  // The page the app opens to, and where every Home button goes: 'studies' | 'reader' | 'plans'
+  const [startPagePref, setStartPagePrefState] = useState(() => {
+    try {
+      const saved = localStorage.getItem('start-page');
+      return ['studies', 'reader', 'plans'].includes(saved) ? saved : 'studies';
+    } catch { return 'studies'; }
+  });
+  const setStartPagePref = (id) => {
+    setStartPagePrefState(id);
+    try { localStorage.setItem('start-page', id); } catch {}
+  };
+  // Which Bible a newly started reading plan begins in: 'same' = whatever the default Bible is
+  const [planTranslationPref, setPlanTranslationPrefState] = useState(() => {
+    try {
+      const saved = localStorage.getItem('plan-translation');
+      return saved === 'same' || READER_TRANSLATIONS.some((t) => t.id === saved) ? saved : 'same';
+    } catch { return 'same'; }
+  });
+  const setPlanTranslationPref = (id) => {
+    setPlanTranslationPrefState(id);
+    try { localStorage.setItem('plan-translation', id); } catch {}
+  };
   const [readerBookmarks, setReaderBookmarks] = useState(() => {
     try { return JSON.parse(localStorage.getItem('reader-bookmarks') || '{}'); } catch { return {}; }
   });
@@ -31,7 +138,6 @@ export function useBibleReader(currentPage) {
   const [readerSearch, setReaderSearch] = useState('');
   const [readerSearchActive, setReaderSearchActive] = useState(false);
   const [readerSearchScope, setReaderSearchScope] = useState('chapter'); // 'chapter' | 'bible'
-  const [bibleIndexStatus, setBibleIndexStatus] = useState('idle'); // 'idle' | 'loading' | 'ready' | 'error'
   const _bibleIndexCacheRef = useRef({}); // translation -> flat verse array
   const [readerInkByPage, setReaderInkByPage] = useState(() => {
     try { return JSON.parse(localStorage.getItem('readerInkByPage') ?? '{}'); }
@@ -43,30 +149,51 @@ export function useBibleReader(currentPage) {
       return Array.isArray(val) ? val : [];
     } catch { return []; }
   });
+  // What each highlight colour means to this reader ({ '#fef08a': 'Promises' }); follows the account.
+  const [readerColorLabels, setReaderColorLabelsState] = useState(() => {
+    try {
+      const val = JSON.parse(localStorage.getItem('reader-color-labels') || '{}');
+      return val && typeof val === 'object' && !Array.isArray(val) ? val : {};
+    } catch { return {}; }
+  });
+  const setReaderColorLabel = (color, label) => {
+    setReaderColorLabelsState((prev) => {
+      const next = { ...prev };
+      if (label.trim()) next[color] = label.slice(0, 30); else delete next[color];
+      try { localStorage.setItem('reader-color-labels', JSON.stringify(next)); } catch {}
+      return next;
+    });
+  };
   // Debounce timer ref so rapid stroke updates don't flood the server
   const inkSaveTimerRef = useRef({});
 
-  // The HelloAO API has no search endpoint, so whole-Bible search fetches the
-  // entire translation once (~7MB) and searches an in-memory flat verse index
-  // client-side. Cached per translation for the rest of the session (not persisted
-  // across reloads, to avoid eating into localStorage/IndexedDB quota for a cache
-  // that's cheap enough to rebuild once per visit).
-  const loadBibleIndex = async () => {
-    if (_bibleIndexCacheRef.current.BSB) {
-      setBibleIndexStatus('ready');
-      return;
-    }
-    setBibleIndexStatus('loading');
+  // The HelloAO API has no search endpoint, so whole-Bible search for the free
+  // translations (BSB, NET) fetches the entire translation once (~7MB) and searches
+  // an in-memory flat verse index client-side. Cached per translation for the rest of
+  // the visit, and in IndexedDB for a while. Licensed translations use the server
+  // search proxy instead (see useBibleSearch).
+  const [bibleIndexState, setBibleIndexState] = useState({ translation: null, status: 'idle' });
+  const bibleIndexStatusFor = (translation) => {
+    if (_bibleIndexCacheRef.current[translation]) return 'ready';
+    return bibleIndexState.translation === translation ? bibleIndexState.status : 'idle';
+  };
+
+  const loadBibleIndex = async (translation = 'BSB') => {
+    const set = (status) => setBibleIndexState({ translation, status });
+    if (_bibleIndexCacheRef.current[translation]) { set('ready'); return; }
+    const source = READER_TRANSLATIONS.find((t) => t.id === translation);
+    if (!source || source.licensed) { set('error'); return; }
+    set('loading');
     try {
       // Check IndexedDB cache before hitting the network (~7 MB fetch)
-      const cached = await getBibleIndexFromIDB('BSB');
+      const cached = await getBibleIndexFromIDB(translation);
       if (cached?.flat && Date.now() - cached.cachedAt < BIBLE_IDB_TTL) {
-        _bibleIndexCacheRef.current.BSB = cached.flat;
-        setBibleIndexStatus('ready');
+        _bibleIndexCacheRef.current[translation] = cached.flat;
+        set('ready');
         return;
       }
 
-      const res = await fetch('https://bible.helloao.org/api/BSB/complete.json');
+      const res = await fetch(`https://bible.helloao.org/api/${source.helloao ?? source.id}/complete.json`);
       if (!res.ok) throw new Error('Unable to load the full Bible for search.');
       const data = await res.json();
       const flat = [];
@@ -80,40 +207,63 @@ export function useBibleReader(currentPage) {
           }
         }
       }
-      _bibleIndexCacheRef.current.BSB = flat;
-      setBibleIndexStatus('ready');
+      _bibleIndexCacheRef.current[translation] = flat;
+      set('ready');
       // Persist for future visits — non-blocking
-      saveBibleIndexToIDB('BSB', flat);
+      saveBibleIndexToIDB(translation, flat);
     } catch {
-      setBibleIndexStatus('error');
+      set('error');
     }
   };
 
-  const loadReaderChapter = async (bookAbbrev, chapterNumber) => {
+  const setReaderTheme = (id) => {
+    setReaderThemeState(id);
+    try { localStorage.setItem('reader-theme', id); } catch {}
+  };
+
+  const setReaderLayout = (id) => {
+    setReaderLayoutState(id);
+    try { localStorage.setItem('reader-layout', id); } catch {}
+  };
+
+  const setReaderCommentary = (id) => {
+    setReaderCommentaryState(id);
+    try { localStorage.setItem('reader-commentary', id); } catch {}
+  };
+
+  const setReaderTranslation = (id) => {
+    setReaderTranslationState(id);
+    try { localStorage.setItem('reader-translation', id); } catch {}
+  };
+
+  // BSB comes straight from HelloAO; licensed translations (NLT/CSB/NASB) go
+  // through the server's api.bible proxy so the API key never reaches the browser.
+  // The most recent request wins: flipping chapters quickly (or changing translation) must never let a
+  // slow earlier response replace the page you are now on.
+  const chapterRequestRef = useRef(0);
+  const loadReaderChapter = async (bookAbbrev, chapterNumber, translation = readerTranslation) => {
+    const requestId = ++chapterRequestRef.current;
     setReaderLoading(true);
     setReaderError('');
     try {
-      const res = await fetch(`https://bible.helloao.org/api/BSB/${bookAbbrev}/${chapterNumber}.json`);
-      if (!res.ok) throw new Error('Unable to load chapter.');
-      const data = await res.json();
-      const verses = parseBibleChapter(data);
-      if (!Array.isArray(verses) || verses.length === 0) {
-        throw new Error('Invalid Bible data returned.');
-      }
+      const { verses, copyright, totalChapters } = await fetchChapter(translation, bookAbbrev, chapterNumber);
+      if (requestId !== chapterRequestRef.current) return;
       setReaderVerses(verses);
-      setReaderTotalChapters(data.book?.numberOfChapters ?? chapterNumber);
+      setReaderCopyright(copyright);
+      setReaderTotalChapters(totalChapters);
     } catch (err) {
+      if (requestId !== chapterRequestRef.current) return;
       setReaderError(err.message || 'Failed to load chapter.');
       setReaderVerses([]);
     } finally {
-      setReaderLoading(false);
+      if (requestId === chapterRequestRef.current) setReaderLoading(false);
     }
   };
 
   useEffect(() => {
     if (currentPage !== 'reader') return;
-    loadReaderChapter(readerBookAbbrev, readerChapter);
-  }, [currentPage, readerBookAbbrev, readerChapter]);
+    loadReaderChapter(readerBookAbbrev, readerChapter, readerTranslation);
+  }, [currentPage, readerBookAbbrev, readerChapter, readerTranslation]);
 
   // After navigating to a verse (from the bookmarks panel or a whole-Bible search
   // result), scroll to it and briefly flash its background so it's easy to spot.
@@ -121,7 +271,7 @@ export function useBibleReader(currentPage) {
     if (readerJumpVerse == null || readerLoading) return;
     const el = document.getElementById(`reader-verse-${readerJumpVerse}`);
     if (!el) return;
-    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    el.scrollIntoView({ behavior: window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth', block: 'center' });
     const prevTransition = el.style.transition;
     const prevBackground = el.style.backgroundColor;
     el.style.transition = 'background-color 0.4s';
@@ -212,6 +362,16 @@ export function useBibleReader(currentPage) {
     });
   };
 
+  // Puts a removed bookmark back with its colour (used by "Undo").
+  const restoreReaderBookmark = (verseKey, color) => {
+    setReaderBookmarks((prev) => {
+      if (prev[verseKey]) return prev;
+      const next = { ...prev, [verseKey]: color };
+      try { localStorage.setItem('reader-bookmarks', JSON.stringify(next)); } catch {}
+      return next;
+    });
+  };
+
   const updateReaderPageInk = useCallback((bookAbbrev, chapter, strokes) => {
     const key = `${bookAbbrev}_${chapter}`;
     setReaderInkByPage((prev) => {
@@ -250,6 +410,16 @@ export function useBibleReader(currentPage) {
     });
   };
 
+  // Puts a removed highlight back exactly as it was (used by "Undo").
+  const restoreTextHighlight = (highlight) => {
+    setReaderTextHighlights((prev) => {
+      if (prev.some((h) => h.id === highlight.id)) return prev;
+      const next = [...prev, highlight];
+      try { localStorage.setItem('readerTextHighlights', JSON.stringify(next)); } catch {}
+      return next;
+    });
+  };
+
   const removeTextHighlight = (id) => {
     setReaderTextHighlights(prev => {
       const next = prev.filter(h => h.id !== id);
@@ -282,6 +452,30 @@ export function useBibleReader(currentPage) {
     }
   };
 
+  // Bookmarks, highlights, colour names and ink from a backup file are added to what is here (nothing is
+  // removed, and where both have something the copy already here wins).
+  const importReaderMarks = ({ bookmarks, highlights, colorLabels, ink }) => {
+    const merged = mergeMarks(normalizeMarks({ bookmarks, highlights }), normalizeMarks({ bookmarks: readerBookmarks, highlights: readerTextHighlights }));
+    setReaderBookmarks(merged.bookmarks);
+    setReaderTextHighlights(merged.highlights);
+    try {
+      localStorage.setItem('reader-bookmarks', JSON.stringify(merged.bookmarks));
+      localStorage.setItem('readerTextHighlights', JSON.stringify(merged.highlights));
+    } catch {}
+    if (colorLabels && Object.keys(colorLabels).length > 0) {
+      setReaderColorLabelsState((prev) => {
+        const next = { ...colorLabels, ...prev };
+        try { localStorage.setItem('reader-color-labels', JSON.stringify(next)); } catch {}
+        return next;
+      });
+    }
+    // Ink goes through the normal save so it also reaches the account
+    for (const [key, strokes] of Object.entries(ink ?? {})) {
+      const [book, chapter] = key.split('_');
+      if (!readerInkByPage[key] && book && chapter && Array.isArray(strokes)) updateReaderPageInk(book, chapter, strokes);
+    }
+  };
+
   // Merges reader ink loaded from the server at sign-in; server wins over local.
   const mergeServerInk = useCallback((serverInk) => {
     setReaderInkByPage((local) => {
@@ -291,9 +485,41 @@ export function useBibleReader(currentPage) {
     });
   }, []);
 
+  // Bookmarks and highlights follow the signed-in user across devices.
+  const marksSync = useReaderMarksSync({
+    bookmarks: readerBookmarks, highlights: readerTextHighlights,
+    setBookmarks: setReaderBookmarks, setHighlights: setReaderTextHighlights,
+  });
+
+  // Theme, default translation, layout, commentary and reading position follow the account too.
+  const prefsSync = usePrefsSync({
+    values: {
+      theme: readerTheme, translation: baseTranslation, layout: readerLayout, commentarySource: readerCommentary,
+      planTranslation: planTranslationPref, startPage: startPagePref,
+      position: { book: readerBookAbbrev, chapter: readerChapter },
+      colorLabels: readerColorLabels,
+    },
+    apply: (key, v) => {
+      if (key === 'theme') { setReaderThemeState(v); try { localStorage.setItem('reader-theme', v); } catch {} }
+      else if (key === 'translation') { setReaderTranslationState(v); try { localStorage.setItem('reader-translation', v); } catch {} }
+      else if (key === 'layout') { setReaderLayoutState(v); try { localStorage.setItem('reader-layout', v); } catch {} }
+      else if (key === 'startPage') { setStartPagePrefState(v); try { localStorage.setItem('start-page', v); } catch {} }
+      else if (key === 'planTranslation') { setPlanTranslationPrefState(v); try { localStorage.setItem('plan-translation', v); } catch {} }
+      else if (key === 'commentarySource') { setReaderCommentaryState(v); try { localStorage.setItem('reader-commentary', v); } catch {} }
+      else if (key === 'colorLabels') { setReaderColorLabelsState(v); try { localStorage.setItem('reader-color-labels', JSON.stringify(v)); } catch {} }
+      else if (key === 'position') { setReaderBookAbbrev(v.book); setReaderChapter(v.chapter); setReaderSelectedVerse(null); }
+    },
+    canApplyPosition: () => pageRef.current !== 'reader',
+  });
+
   return {
     readerBookAbbrev, setReaderBookAbbrev,
+    readerCommentary, setReaderCommentary,
     readerChapter, setReaderChapter,
+    readerTranslation, setReaderTranslation,
+    readerCopyright,
+    readerTheme, setReaderTheme,
+    readerLayout, setReaderLayout,
     readerVerses,
     readerTotalChapters,
     readerLoading,
@@ -301,6 +527,13 @@ export function useBibleReader(currentPage) {
     readerInterlinear,
     readerSelectedVerse, setReaderSelectedVerse,
     readerFontSize, setReaderFontSize,
+    readerWide, setReaderWide,
+    readerFont, setReaderFont,
+    readerSpacing, setReaderSpacing,
+    readerVerseNumbers: readerVerseNumbers === 'on', setReaderVerseNumbers: (on) => setReaderVerseNumbersRaw(on ? 'on' : 'off'),
+    readerParallel, setReaderParallel,
+    planTranslationPref, setPlanTranslationPref,
+    startPagePref, setStartPagePref,
     readerBookmarks, setReaderBookmarks,
     readerBookmarksPanelOpen, setReaderBookmarksPanelOpen,
     readerCrossRefs, setReaderCrossRefs,
@@ -312,10 +545,15 @@ export function useBibleReader(currentPage) {
     readerInkByPage,
     updateReaderPageInk,
     mergeServerInk,
+    importReaderMarks,
     readerTextHighlights,
+    ...marksSync,
+    ...prefsSync,
     addTextHighlight,
     removeTextHighlight,
-    bibleIndexStatus,
+    restoreTextHighlight,
+    readerColorLabels, setReaderColorLabel,
+    bibleIndexStatusFor,
     loadBibleIndex,
     _bibleIndexCacheRef,
     loadReaderChapter,
@@ -324,6 +562,7 @@ export function useBibleReader(currentPage) {
     readerGoToNextChapter,
     jumpToReaderVerse,
     toggleReaderBookmark,
+    restoreReaderBookmark,
     cycleBookmarkColor,
     loadReaderCrossRefs,
   };

src/hooks/useBibleSearch.js

@@ -0,0 +1,49 @@
+// Whole-Bible search for translations that can't be downloaded and indexed in the
+// browser (ESV, NLT, CSB, NASB): queries go through the server's search proxy.
+// Debounced, cancels stale requests, and pages in 25 verses at a time.
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const DEBOUNCE_MS = 450;
+const EMPTY = { results: [], total: 0, page: 0, hasMore: false, loading: false, error: '' };
+
+export function useBibleSearch(translation, query, enabled) {
+  const [state, setState] = useState(EMPTY);
+  const controllerRef = useRef(null);
+  const q = query.trim();
+
+  const run = useCallback(async (page) => {
+    controllerRef.current?.abort();
+    const controller = new AbortController();
+    controllerRef.current = controller;
+    setState((s) => ({ ...s, loading: true, error: '' }));
+    try {
+      const res = await fetch(`/api/bible/${translation}/search?q=${encodeURIComponent(q)}&page=${page}`, {
+        credentials: 'include', signal: controller.signal,
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(data.error || 'Search failed.');
+      setState((s) => ({
+        results: page === 1 ? data.results : [...s.results, ...data.results],
+        total: data.total, page: data.page, hasMore: data.hasMore, loading: false, error: '',
+      }));
+    } catch (err) {
+      if (err.name === 'AbortError') return;
+      setState((s) => ({ ...s, loading: false, error: err.message || 'Search failed.' }));
+    }
+  }, [translation, q]);
+
+  useEffect(() => {
+    if (!enabled || q.length < 2) {
+      controllerRef.current?.abort();
+      setState(EMPTY);
+      return undefined;
+    }
+    const timer = window.setTimeout(() => run(1), DEBOUNCE_MS);
+    return () => window.clearTimeout(timer);
+  }, [enabled, q, run]);
+
+  useEffect(() => () => controllerRef.current?.abort(), []);
+
+  const loadMore = () => { if (!state.loading && state.hasMore) run(state.page + 1); };
+  return { ...state, loadMore, tooShort: q.length < 2 };
+}

src/hooks/useChunkBuilder.js

@@ -0,0 +1,691 @@
+// The Setup page's chunk builder: the new-project / add-chapter form, the
+// active chapter tab, and every way of creating chunks (click, shift-click,
+// typed range, bulk ranges, cross-chapter spans), plus reorder and delete.
+import { useEffect, useState } from 'react';
+import { useToast } from '../components/Toasts.jsx';
+import { bookOptions, CHAPTER_COUNTS, makeId, parseBibleChapter } from '../utils/bibleUtils.jsx';
+
+// Every chunk starts blank; all note fields exist from the start.
+export function blankChunk(start, end, spilloverEndVerse = null) {
+  return {
+    id: makeId(),
+    startVerse: start,
+    endVerse: end,
+    spilloverEndVerse,
+    observation: '',
+    interpretation: '',
+    application: '',
+    crossReferences: [],
+    greekWords: [],
+    generalNotes: '',
+    episodeNumber: '',
+    episodeTitle: '',
+    finalScript: '',
+    tags: [],
+  };
+}
+
+const joinText = (a, b) => [a, b].filter((s) => (s ?? '').trim()).join('\n\n');
+
+// Merges chunk `b` (the one after `a`) into `a`, keeping a's id and combining notes,
+// words, cross-references and tags so joining never loses anything.
+export function mergeChunks(a, b) {
+  const uniq = (list) => [...new Set(list)];
+  return {
+    ...a,
+    endVerse: b.endVerse,
+    spilloverEndVerse: b.spilloverEndVerse ?? null,
+    observation: joinText(a.observation, b.observation),
+    interpretation: joinText(a.interpretation, b.interpretation),
+    application: joinText(a.application, b.application),
+    generalNotes: joinText(a.generalNotes, b.generalNotes),
+    finalScript: joinText(a.finalScript, b.finalScript),
+    crossReferences: uniq([...(a.crossReferences ?? []), ...(b.crossReferences ?? [])]),
+    greekWords: [...(a.greekWords ?? []), ...(b.greekWords ?? [])],
+    tags: uniq([...(a.tags ?? []), ...(b.tags ?? [])]),
+    episodeNumber: a.episodeNumber || b.episodeNumber || '',
+    episodeTitle: a.episodeTitle || b.episodeTitle || '',
+  };
+}
+
+// Verse numbers where a section heading starts, from a HelloAO chapter payload.
+export function headingStarts(chapterData) {
+  const starts = [];
+  let pending = false;
+  for (const item of chapterData?.chapter?.content ?? []) {
+    if (item.type === 'heading') pending = true;
+    else if (item.type === 'verse') {
+      if (pending) starts.push(item.number);
+      pending = false;
+    }
+  }
+  return starts;
+}
+
+// Uncovered runs of verses inside [from, to], given the chunks already there.
+export function uncoveredRuns(chunks, from, to) {
+  const covered = new Set();
+  chunks.forEach((c) => { for (let v = c.startVerse; v <= c.endVerse; v += 1) covered.add(v); });
+  const runs = [];
+  let start = null;
+  for (let v = from; v <= to + 1; v += 1) {
+    const free = v <= to && !covered.has(v);
+    if (free && start === null) start = v;
+    if (!free && start !== null) { runs.push([start, v - 1]); start = null; }
+  }
+  return runs;
+}
+
+// A new project starts on Titus 1. When adding to an open project, start on
+// the chapter after its last one (same book and translation).
+function initialSetupForm(project) {
+  const last = project?.chapters?.at(-1);
+  if (!last) {
+    return { translation: 'BSB', book: 'Titus', bookAbbrev: 'TIT', chapter: '1', title: 'Titus 1 Study' };
+  }
+  const next = Math.min(Number(last.chapter) + 1, CHAPTER_COUNTS[last.bookAbbrev] ?? Number(last.chapter));
+  return {
+    translation: project.translation ?? 'BSB',
+    book: last.book,
+    bookAbbrev: last.bookAbbrev,
+    chapter: String(next),
+    title: project.title,
+  };
+}
+
+// Open on the chapter holding the chunk last studied (e.g. after "Back to Chunks").
+function initialChapterIndex(project) {
+  const index = project?.chapters?.findIndex((ch) => ch.chunks.some((c) => c.id === project.selectedChunkId)) ?? -1;
+  return index >= 0 ? index : 0;
+}
+
+export function useChunkBuilder({ project, setProject, updateProject, allChunks, setCurrentPage }) {
+  const { toast } = useToast();
+  const [setup, setSetup] = useState(() => initialSetupForm(project));
+  const [titleEdited, setTitleEdited] = useState(false);
+  const [activeChapterIndex, setActiveChapterIndex] = useState(() => initialChapterIndex(project));
+  const [showAddChapterForm, setShowAddChapterForm] = useState(false);
+  const [rangeStart, setRangeStart] = useState(null);
+  const [rangeEnd, setRangeEnd] = useState(null);
+  const [loadingChapter, setLoadingChapter] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [statusMessage, setStatusMessage] = useState('');
+  const [typedChunkStart, setTypedChunkStart] = useState('');
+  const [typedChunkEnd, setTypedChunkEnd] = useState('');
+  const [typedChunkNextEnd, setTypedChunkNextEnd] = useState('');
+  const [clickedSpanNextEnd, setClickedSpanNextEnd] = useState('');
+  const [typedChunkBulk, setTypedChunkBulk] = useState('');
+  const [verseSearch, setVerseSearch] = useState('');
+
+  useEffect(() => {
+    if (!titleEdited) {
+      setSetup((current) => ({
+        ...current,
+        title: `${current.book} ${current.chapter} Study`,
+      }));
+    }
+  }, [setup.book, setup.chapter, titleEdited]);
+
+  // Each time the add-chapter form opens, suggest the chapter after the last one.
+  useEffect(() => {
+    if (showAddChapterForm) setSetup(initialSetupForm(project));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showAddChapterForm]);
+
+  const activeChapter = project?.chapters[activeChapterIndex] ?? null;
+
+  const handleSetupField = (field, value) => {
+    if (field === 'book') {
+      const selected = bookOptions.find((book) => book.abbrev === value) ?? bookOptions[0];
+      setSetup((current) => ({
+        ...current,
+        book: selected.name,
+        bookAbbrev: selected.abbrev,
+      }));
+    } else {
+      setSetup((current) => ({ ...current, [field]: value }));
+    }
+  };
+
+  const handleLoadChapter = async () => {
+    if (!setup.bookAbbrev || !setup.chapter) {
+      setErrorMessage('Please choose a book and chapter.');
+      return;
+    }
+    setErrorMessage('');
+    setLoadingChapter(true);
+    try {
+      const response = await fetch(
+        `https://bible.helloao.org/api/${setup.translation}/${setup.bookAbbrev}/${setup.chapter}.json`,
+      );
+      if (!response.ok) throw new Error('Unable to load chapter.');
+      const data = await response.json();
+      const verses = parseBibleChapter(data);
+      if (!data || !Array.isArray(verses) || verses.length === 0) {
+        throw new Error('Invalid Bible data returned.');
+      }
+
+      if (project) {
+        // Adding a chapter to an existing project
+        const alreadyExists = project.chapters.some(
+          (ch) => ch.bookAbbrev === setup.bookAbbrev && ch.chapter === setup.chapter,
+        );
+        if (alreadyExists) {
+          setErrorMessage('That chapter is already in this project.');
+          setLoadingChapter(false);
+          return;
+        }
+        const newChapter = {
+          book: setup.book,
+          bookAbbrev: setup.bookAbbrev,
+          chapter: setup.chapter,
+          verses,
+          chunks: [],
+        };
+        updateProject((current) => {
+          const updatedChapters = [...current.chapters, newChapter];
+          return { ...current, chapters: updatedChapters };
+        });
+        setActiveChapterIndex(project.chapters.length);
+        setShowAddChapterForm(false);
+        setErrorMessage('');
+      } else {
+        // Creating a brand-new project
+        const newProject = {
+          id: makeId(),
+          title: setup.title,
+          translation: setup.translation,
+          lastEdited: Date.now(),
+          selectedChunkId: null,
+          chapters: [
+            {
+              book: setup.book,
+              bookAbbrev: setup.bookAbbrev,
+              chapter: setup.chapter,
+              verses,
+              chunks: [],
+            },
+          ],
+        };
+        setProject(newProject);
+        setActiveChapterIndex(0);
+        setCurrentPage('setup');
+      }
+    } catch (error) {
+      setErrorMessage(error.message || 'Failed to load chapter.');
+    } finally {
+      setLoadingChapter(false);
+    }
+  };
+
+  const beginStudying = () => {
+    if (!project || allChunks.length === 0) return;
+    updateProject((current) => ({
+      ...current,
+      selectedChunkId: current.selectedChunkId || allChunks[0]?.id || null,
+    }));
+    setCurrentPage('study');
+  };
+
+  const addChunkToChapter = (chapterIndex, start, end, spilloverEndVerse = null) => {
+    updateProject((current) => {
+      const chapters = current.chapters.map((ch, idx) => {
+        if (idx !== chapterIndex) return ch;
+        const overlap = ch.chunks.find(
+          (c) => c.startVerse === start
+            && c.endVerse === end
+            && (c.spilloverEndVerse ?? null) === (spilloverEndVerse ?? null),
+        );
+        if (overlap) return ch;
+        const newChunk = {
+          id: makeId(),
+          startVerse: start,
+          endVerse: end,
+          spilloverEndVerse,
+          observation: '',
+          interpretation: '',
+          application: '',
+          crossReferences: [],
+          greekWords: [],
+          generalNotes: '',
+          episodeNumber: '',
+          episodeTitle: '',
+          finalScript: '',
+          tags: [],
+        };
+        return { ...ch, chunks: [...ch.chunks, newChunk] };
+      });
+      // Find the newly added chunk id
+      const newChunk = chapters[chapterIndex].chunks.at(-1);
+      return { ...current, chapters, selectedChunkId: newChunk?.id ?? current.selectedChunkId };
+    });
+  };
+
+  const addChunk = (start, end, spilloverEndVerse = null) => {
+    if (!project) return;
+    const chapter = activeChapter;
+    if (!chapter) return;
+    const overlap = chapter.chunks.find(
+      (c) => c.startVerse === start
+        && c.endVerse === end
+        && (c.spilloverEndVerse ?? null) === (spilloverEndVerse ?? null),
+    );
+    if (overlap) {
+      setStatusMessage('That chunk already exists.');
+      window.setTimeout(() => setStatusMessage(''), 1800);
+      return;
+    }
+    addChunkToChapter(activeChapterIndex, start, end, spilloverEndVerse);
+  };
+
+  const addChunkRanges = (ranges) => {
+    if (!project || !activeChapter || ranges.length === 0) {
+      return { addedCount: 0, skippedCount: 0 };
+    }
+
+    let addedCount = 0;
+    let skippedCount = 0;
+    let lastAddedChunkId = null;
+
+    updateProject((current) => {
+      const chapters = current.chapters.map((ch, idx) => {
+        if (idx !== activeChapterIndex) return ch;
+        const existing = new Set(
+          ch.chunks.map((c) => `${c.startVerse}-${c.endVerse}-${c.spilloverEndVerse ?? ''}`),
+        );
+        const newChunks = [];
+
+        ranges.forEach(({ start, end, spilloverEndVerse = null }) => {
+          const key = `${start}-${end}-${spilloverEndVerse ?? ''}`;
+          if (existing.has(key)) {
+            skippedCount += 1;
+            return;
+          }
+          const newChunk = blankChunk(start, end, spilloverEndVerse);
+          existing.add(key);
+          newChunks.push(newChunk);
+          addedCount += 1;
+          lastAddedChunkId = newChunk.id;
+        });
+
+        return newChunks.length > 0
+          ? { ...ch, chunks: [...ch.chunks, ...newChunks] }
+          : ch;
+      });
+
+      return {
+        ...current,
+        chapters,
+        selectedChunkId: lastAddedChunkId ?? current.selectedChunkId,
+      };
+    });
+
+    return { addedCount, skippedCount };
+  };
+
+  const addTypedChunk = () => {
+    if (!activeChapter) return;
+    const start = Number.parseInt(typedChunkStart, 10);
+    const end = Number.parseInt(typedChunkEnd, 10);
+    const nextEndRaw = typedChunkNextEnd.trim();
+    const nextEnd = nextEndRaw ? Number.parseInt(nextEndRaw, 10) : null;
+    const maxVerse = activeChapter.verses.at(-1)?.number ?? 0;
+    const nextChapter = project?.chapters?.[activeChapterIndex + 1] ?? null;
+    const nextMaxVerse = nextChapter?.verses?.at(-1)?.number ?? 0;
+
+    if (!Number.isInteger(start) || !Number.isInteger(end)) {
+      setStatusMessage('Type a valid start and end verse.');
+      window.setTimeout(() => setStatusMessage(''), 2200);
+      return;
+    }
+    if (start < 1 || end < 1 || start > maxVerse || end > maxVerse) {
+      setStatusMessage(`Verse range must be between 1 and ${maxVerse}.`);
+      window.setTimeout(() => setStatusMessage(''), 2200);
+      return;
+    }
+    if (start > end) {
+      setStatusMessage('Start verse must be less than or equal to end verse.');
+      window.setTimeout(() => setStatusMessage(''), 2200);
+      return;
+    }
+
+    if (nextEndRaw) {
+      if (!nextChapter) {
+        setStatusMessage('Add the next chapter first to span chunks across chapters.');
+        window.setTimeout(() => setStatusMessage(''), 2400);
+        return;
+      }
+      if (nextChapter.bookAbbrev !== activeChapter.bookAbbrev) {
+        setStatusMessage('Chapter spanning only works into the next chapter of the same book.');
+        window.setTimeout(() => setStatusMessage(''), 2400);
+        return;
+      }
+      if (!Number.isInteger(nextEnd) || nextEnd < 1 || nextEnd > nextMaxVerse) {
+        setStatusMessage(`Next chapter end must be between 1 and ${nextMaxVerse}.`);
+        window.setTimeout(() => setStatusMessage(''), 2400);
+        return;
+      }
+      if (end !== maxVerse) {
+        setStatusMessage('To span chapters, set End to the last verse of this chapter.');
+        window.setTimeout(() => setStatusMessage(''), 2400);
+        return;
+      }
+    }
+
+    const { addedCount } = addChunkRanges([{ start, end, spilloverEndVerse: nextEnd }]);
+    if (addedCount === 0) {
+      setStatusMessage('That chunk already exists.');
+      window.setTimeout(() => setStatusMessage(''), 2200);
+      return;
+    }
+
+    setTypedChunkStart('');
+    setTypedChunkEnd('');
+    setTypedChunkNextEnd('');
+  };
+
+  const addBulkTypedChunks = () => {
+    if (!activeChapter) return;
+    const raw = typedChunkBulk.trim();
+    if (!raw) {
+      setStatusMessage('Type chunk ranges first. Example: 1-6, 7-12');
+      window.setTimeout(() => setStatusMessage(''), 2200);
+      return;
+    }
+
+    const maxVerse = activeChapter.verses.at(-1)?.number ?? 0;
+    const nextChapter = project?.chapters?.[activeChapterIndex + 1] ?? null;
+    const nextMaxVerse = nextChapter?.verses?.at(-1)?.number ?? 0;
+    const parts = raw
+      .split(/[\n,;]+/)
+      .map((part) => part.trim())
+      .filter(Boolean);
+
+    const validRanges = [];
+    let invalidCount = 0;
+
+    parts.forEach((part) => {
+      const single = /^(\d+)$/.exec(part);
+      if (single) {
+        const v = Number.parseInt(single[1], 10);
+        if (v >= 1 && v <= maxVerse) {
+          validRanges.push({ start: v, end: v });
+        } else {
+          invalidCount += 1;
+        }
+        return;
+      }
+
+      const range = /^(\d+)\s*-\s*(\d+)(?:\s*:\s*(\d+))?$/.exec(part);
+      if (!range) {
+        invalidCount += 1;
+        return;
+      }
+
+      const start = Number.parseInt(range[1], 10);
+      const end = Number.parseInt(range[2], 10);
+      const spilloverEndVerse = range[3] ? Number.parseInt(range[3], 10) : null;
+      if (start < 1 || end < 1 || start > end || start > maxVerse || end > maxVerse) {
+        invalidCount += 1;
+        return;
+      }
+      if (spilloverEndVerse !== null) {
+        if (!nextChapter
+          || nextChapter.bookAbbrev !== activeChapter.bookAbbrev
+          || spilloverEndVerse < 1
+          || spilloverEndVerse > nextMaxVerse
+          || end !== maxVerse) {
+          invalidCount += 1;
+          return;
+        }
+      }
+      validRanges.push({ start, end, spilloverEndVerse });
+    });
+
+    if (validRanges.length === 0) {
+      setStatusMessage(`No valid ranges found. Use 1-${maxVerse} and format like 1-6, 7-12.`);
+      window.setTimeout(() => setStatusMessage(''), 2600);
+      return;
+    }
+
+    const { addedCount, skippedCount } = addChunkRanges(validRanges);
+    const notes = [];
+    if (addedCount > 0) notes.push(`Added ${addedCount} chunk${addedCount > 1 ? 's' : ''}`);
+    if (skippedCount > 0) notes.push(`skipped ${skippedCount} duplicate${skippedCount > 1 ? 's' : ''}`);
+    if (invalidCount > 0) notes.push(`ignored ${invalidCount} invalid`);
+    setStatusMessage(notes.join(' • '));
+    window.setTimeout(() => setStatusMessage(''), 2800);
+
+    if (addedCount > 0) {
+      setTypedChunkBulk('');
+    }
+  };
+
+  const addClickSpanChunk = () => {
+    if (!activeChapter || rangeStart === null) {
+      setStatusMessage('Click a start verse first, then set next chapter end.');
+      window.setTimeout(() => setStatusMessage(''), 2400);
+      return;
+    }
+
+    const nextChapter = project?.chapters?.[activeChapterIndex + 1] ?? null;
+    if (!nextChapter) {
+      setStatusMessage('Add the next chapter first to span into it.');
+      window.setTimeout(() => setStatusMessage(''), 2400);
+      return;
+    }
+    if (nextChapter.bookAbbrev !== activeChapter.bookAbbrev) {
+      setStatusMessage('Click-based spanning only works into the next chapter of the same book.');
+      window.setTimeout(() => setStatusMessage(''), 2600);
+      return;
+    }
+
+    const nextMaxVerse = nextChapter.verses.at(-1)?.number ?? 0;
+    const spilloverEndVerse = Number.parseInt(clickedSpanNextEnd, 10);
+    if (!Number.isInteger(spilloverEndVerse) || spilloverEndVerse < 1 || spilloverEndVerse > nextMaxVerse) {
+      setStatusMessage(`Next chapter end must be between 1 and ${nextMaxVerse}.`);
+      window.setTimeout(() => setStatusMessage(''), 2400);
+      return;
+    }
+
+    const start = rangeStart;
+    const end = activeChapter.verses.at(-1)?.number ?? start;
+    const { addedCount } = addChunkRanges([{ start, end, spilloverEndVerse }]);
+    if (addedCount === 0) {
+      setStatusMessage('That cross-chapter chunk already exists.');
+      window.setTimeout(() => setStatusMessage(''), 2400);
+      return;
+    }
+
+    setClickedSpanNextEnd('');
+    setRangeStart(null);
+    setRangeEnd(null);
+    setStatusMessage('Cross-chapter chunk added.');
+    window.setTimeout(() => setStatusMessage(''), 1800);
+  };
+
+  const handleVerseClick = (verseNumber, event) => {
+    if (event.shiftKey && rangeStart !== null) {
+      const start = Math.min(rangeStart, verseNumber);
+      const end = Math.max(rangeStart, verseNumber);
+      addChunk(start, end);
+      setRangeStart(null);
+      setRangeEnd(null);
+      return;
+    }
+    setRangeStart(verseNumber);
+    setRangeEnd(verseNumber);
+  };
+
+  const moveChunk = (chunkId, direction) => {
+    updateProject((current) => ({
+      ...current,
+      chapters: current.chapters.map((ch) => {
+        const index = ch.chunks.findIndex((c) => c.id === chunkId);
+        if (index < 0) return ch;
+        const nextIndex = index + direction;
+        if (nextIndex < 0 || nextIndex >= ch.chunks.length) return ch;
+        const updated = [...ch.chunks];
+        const [removed] = updated.splice(index, 1);
+        updated.splice(nextIndex, 0, removed);
+        return { ...ch, chunks: updated };
+      }),
+    }));
+  };
+
+  // Deleting a chunk also deletes its notes, so it can be taken back for a few seconds.
+  const deleteChunk = (chunkId) => {
+    let removed = null;
+    (project?.chapters ?? []).forEach((ch, chapterIndex) => {
+      const index = ch.chunks.findIndex((c) => c.id === chunkId);
+      if (index >= 0) removed = { chunk: ch.chunks[index], chapterIndex, index, wasSelected: project.selectedChunkId === chunkId };
+    });
+    if (removed) {
+      toast('Chunk deleted', {
+        action: {
+          label: 'Undo',
+          onClick: () => updateProject((current) => {
+            if (current.chapters.some((ch) => ch.chunks.some((c) => c.id === chunkId))) return current;
+            return {
+              ...current,
+              selectedChunkId: removed.wasSelected ? chunkId : current.selectedChunkId,
+              chapters: current.chapters.map((ch, i) => {
+                if (i !== removed.chapterIndex) return ch;
+                const chunks = [...ch.chunks];
+                chunks.splice(Math.min(removed.index, chunks.length), 0, removed.chunk);
+                return { ...ch, chunks };
+              }),
+            };
+          }),
+        },
+      });
+    }
+    updateProject((current) => {
+      const newAllChunks = current.chapters
+        .flatMap((ch) => ch.chunks)
+        .filter((c) => c.id !== chunkId);
+      const nextSelected =
+        current.selectedChunkId === chunkId
+          ? newAllChunks[0]?.id ?? null
+          : current.selectedChunkId;
+      return {
+        ...current,
+        selectedChunkId: nextSelected,
+        chapters: current.chapters.map((ch) => ({
+          ...ch,
+          chunks: ch.chunks.filter((c) => c.id !== chunkId),
+        })),
+      };
+    });
+  };
+
+  // Splits the chunk containing verse `n` into [start..n] and [n+1..end] (the first keeps
+  // its notes). If `n` isn't in any chunk yet, makes one from the last covered verse to `n`.
+  const splitAfterVerse = (n) => {
+    if (!activeChapter) return;
+    updateProject((current) => {
+      let selected = current.selectedChunkId;
+      const chapters = current.chapters.map((ch, idx) => {
+        if (idx !== activeChapterIndex) return ch;
+        const chunks = [...ch.chunks];
+        const i = chunks.findIndex((c) => c.startVerse <= n && n < c.endVerse && !c.spilloverEndVerse);
+        if (i >= 0) {
+          const c = chunks[i];
+          chunks[i] = { ...c, endVerse: n, spilloverEndVerse: null };
+          chunks.splice(i + 1, 0, blankChunk(n + 1, c.endVerse, c.spilloverEndVerse ?? null));
+          return { ...ch, chunks };
+        }
+        if (chunks.some((c) => c.startVerse <= n && n <= c.endVerse)) return ch; // already a boundary
+        const start = Math.max(0, ...chunks.filter((c) => c.endVerse < n).map((c) => c.endVerse)) + 1;
+        const created = blankChunk(start, n);
+        selected = created.id;
+        const at = chunks.findIndex((c) => c.startVerse > n);
+        chunks.splice(at < 0 ? chunks.length : at, 0, created);
+        return { ...ch, chunks };
+      });
+      return { ...current, chapters, selectedChunkId: selected };
+    });
+  };
+
+  // Joins a chunk with the one right after it (adjacent verses), combining their notes.
+  const joinWithNext = (chunkId) => {
+    updateProject((current) => {
+      let selected = current.selectedChunkId;
+      const chapters = current.chapters.map((ch) => {
+        const i = ch.chunks.findIndex((c) => c.id === chunkId);
+        if (i < 0 || i >= ch.chunks.length - 1) return ch;
+        const a = ch.chunks[i];
+        const b = ch.chunks[i + 1];
+        if (a.endVerse + 1 !== b.startVerse) return ch;
+        if (selected === b.id) selected = a.id;
+        const chunks = [...ch.chunks];
+        chunks.splice(i, 2, mergeChunks(a, b));
+        return { ...ch, chunks };
+      });
+      return { ...current, chapters, selectedChunkId: selected };
+    });
+  };
+
+  // Fills verses that aren't in a chunk yet: one chunk per section heading (or every 8
+  // verses when the text has no headings). Chunks you already made are left alone.
+  const [suggesting, setSuggesting] = useState(false);
+  const suggestChunks = async () => {
+    if (!activeChapter) return;
+    const notify = (message, ms = 2400) => { setStatusMessage(message); window.setTimeout(() => setStatusMessage(''), ms); };
+    const last = activeChapter.verses.at(-1)?.number ?? 0;
+    setSuggesting(true);
+    try {
+      let starts = [];
+      try {
+        const res = await fetch(`https://bible.helloao.org/api/${project?.translation ?? 'BSB'}/${activeChapter.bookAbbrev}/${activeChapter.chapter}.json`);
+        if (res.ok) starts = headingStarts(await res.json());
+      } catch { /* headings are a nicety — fall back to even chunks */ }
+      const usedHeadings = starts.length > 0;
+      const first = activeChapter.verses[0]?.number ?? 1;
+      if (!usedHeadings) for (let v = first; v <= last; v += 8) starts.push(v);
+      const bounds = [...new Set([first, ...starts])].sort((a, b) => a - b);
+      const ranges = [];
+      bounds.forEach((from, k) => {
+        const to = (bounds[k + 1] ?? last + 1) - 1;
+        uncoveredRuns(activeChapter.chunks, from, to).forEach(([s, e]) => ranges.push({ start: s, end: e }));
+      });
+      if (ranges.length === 0) { notify('Every verse is already in a chunk.'); return; }
+      const { addedCount } = addChunkRanges(ranges);
+      notify(`Added ${addedCount} chunk${addedCount === 1 ? '' : 's'} ${usedHeadings ? 'from section headings' : 'of about 8 verses'}.`);
+    } finally {
+      setSuggesting(false);
+    }
+  };
+
+  return {
+    setup,
+    titleEdited, setTitleEdited,
+    activeChapterIndex, setActiveChapterIndex,
+    activeChapter,
+    showAddChapterForm, setShowAddChapterForm,
+    rangeStart, setRangeStart,
+    rangeEnd, setRangeEnd,
+    verseSearch, setVerseSearch,
+    typedChunkStart, setTypedChunkStart,
+    typedChunkEnd, setTypedChunkEnd,
+    typedChunkNextEnd, setTypedChunkNextEnd,
+    typedChunkBulk, setTypedChunkBulk,
+    clickedSpanNextEnd, setClickedSpanNextEnd,
+    loadingChapter,
+    errorMessage,
+    statusMessage,
+    handleSetupField,
+    handleLoadChapter,
+    beginStudying,
+    handleVerseClick,
+    addTypedChunk,
+    addBulkTypedChunks,
+    addClickSpanChunk,
+    moveChunk,
+    deleteChunk,
+    splitAfterVerse,
+    joinWithNext,
+    suggestChunks,
+    suggesting,
+  };
+}

src/hooks/useChunkBuilder.test.js

@@ -0,0 +1,109 @@
+import { renderHook, act } from '@testing-library/react';
+import { useState } from 'react';
+import { vi, test, expect, beforeEach } from 'vitest';
+import { blankChunk, headingStarts, mergeChunks, uncoveredRuns, useChunkBuilder } from './useChunkBuilder.js';
+
+const c = (s, e) => ({ startVerse: s, endVerse: e });
+
+test('uncoveredRuns lists the verse runs not yet in any chunk', () => {
+  expect(uncoveredRuns([c(1, 3), c(6, 7)], 1, 10)).toEqual([[4, 5], [8, 10]]);
+  expect(uncoveredRuns([], 5, 8)).toEqual([[5, 8]]);
+  expect(uncoveredRuns([c(1, 10)], 1, 10)).toEqual([]);
+});
+
+test('headingStarts finds the verse each section heading precedes', () => {
+  const data = { chapter: { content: [
+    { type: 'heading' }, { type: 'verse', number: 1 }, { type: 'verse', number: 2 },
+    { type: 'heading' }, { type: 'line_break' }, { type: 'verse', number: 22 },
+  ] } };
+  expect(headingStarts(data)).toEqual([1, 22]);
+});
+
+test('mergeChunks keeps the first id and combines notes, words, refs and tags', () => {
+  const a = { ...blankChunk(1, 3), observation: 'A', tags: ['x'], crossReferences: ['John 1:1'], greekWords: [{ id: 'w1' }] };
+  const b = { ...blankChunk(4, 6), observation: 'B', tags: ['x', 'y'], crossReferences: ['John 1:1', 'Rom 3:23'], greekWords: [{ id: 'w2' }], episodeTitle: 'Ep' };
+  const m = mergeChunks(a, b);
+  expect([m.id, m.startVerse, m.endVerse]).toEqual([a.id, 1, 6]);
+  expect(m.observation).toBe('A\n\nB');
+  expect(m.tags).toEqual(['x', 'y']);
+  expect(m.crossReferences).toEqual(['John 1:1', 'Rom 3:23']);
+  expect(m.greekWords.map((w) => w.id)).toEqual(['w1', 'w2']);
+  expect(m.episodeTitle).toBe('Ep');
+});
+
+// --- hook operations against a small in-memory project -----------------------
+const verses = Array.from({ length: 12 }, (_, i) => ({ number: i + 1, text: `verse ${i + 1}` }));
+const makeProject = (chunks = []) => ({
+  id: 'p', title: 'T', translation: 'BSB', selectedChunkId: null,
+  chapters: [{ book: 'Titus', bookAbbrev: 'TIT', chapter: '1', verses, chunks }],
+});
+
+function setup(initialChunks) {
+  return renderHook(() => {
+    const [project, setProject] = useState(makeProject(initialChunks));
+    const updateProject = (fn) => setProject((cur) => fn(cur));
+    const allChunks = project.chapters.flatMap((ch) => ch.chunks);
+    const builder = useChunkBuilder({ project, setProject, updateProject, allChunks, setCurrentPage: () => {} });
+    return { project, builder };
+  });
+}
+const ranges = (h) => h.result.current.project.chapters[0].chunks.map((k) => [k.startVerse, k.endVerse]);
+
+beforeEach(() => { vi.restoreAllMocks(); });
+
+test('splitting between uncovered verses builds chunks one after another', () => {
+  const h = setup();
+  act(() => h.result.current.builder.splitAfterVerse(4));
+  act(() => h.result.current.builder.splitAfterVerse(9));
+  expect(ranges(h)).toEqual([[1, 4], [5, 9]]);
+});
+
+test('splitting inside a chunk keeps the notes on the first part', () => {
+  const original = { ...blankChunk(1, 8), observation: 'keep me' };
+  const h = setup([original]);
+  act(() => h.result.current.builder.splitAfterVerse(3));
+  const [first, second] = h.result.current.project.chapters[0].chunks;
+  expect([first.id, first.startVerse, first.endVerse, first.observation]).toEqual([original.id, 1, 3, 'keep me']);
+  expect([second.startVerse, second.endVerse, second.observation]).toEqual([4, 8, '']);
+});
+
+test('splitting where a boundary already exists changes nothing', () => {
+  const h = setup([blankChunk(1, 4), blankChunk(5, 8)]);
+  act(() => h.result.current.builder.splitAfterVerse(4));
+  expect(ranges(h)).toEqual([[1, 4], [5, 8]]);
+});
+
+test('joining merges a chunk with the next one and re-selects the survivor', () => {
+  const a = { ...blankChunk(1, 4), observation: 'one' };
+  const b = { ...blankChunk(5, 8), observation: 'two' };
+  const h = setup([a, b]);
+  act(() => h.result.current.builder.joinWithNext(a.id));
+  const [only] = h.result.current.project.chapters[0].chunks;
+  expect([only.id, only.startVerse, only.endVerse, only.observation]).toEqual([a.id, 1, 8, 'one\n\ntwo']);
+});
+
+test('joining is refused when the chunks are not adjacent', () => {
+  const a = blankChunk(1, 3);
+  const h = setup([a, blankChunk(6, 8)]);
+  act(() => h.result.current.builder.joinWithNext(a.id));
+  expect(ranges(h)).toEqual([[1, 3], [6, 8]]);
+});
+
+test('suggest from headings fills only the uncovered verses, one chunk per section', async () => {
+  vi.stubGlobal('fetch', vi.fn(() => Promise.resolve({
+    ok: true,
+    json: () => Promise.resolve({ chapter: { content: [
+      { type: 'heading' }, { type: 'verse', number: 1 }, { type: 'heading' }, { type: 'verse', number: 5 }, { type: 'heading' }, { type: 'verse', number: 9 },
+    ] } }),
+  })));
+  const h = setup([blankChunk(5, 6)]); // verses 5-6 already done
+  await act(async () => { await h.result.current.builder.suggestChunks(); });
+  expect(ranges(h).sort((x, y) => x[0] - y[0])).toEqual([[1, 4], [5, 6], [7, 8], [9, 12]]);
+});
+
+test('suggest falls back to even chunks when the chapter has no headings', async () => {
+  vi.stubGlobal('fetch', vi.fn(() => Promise.resolve({ ok: true, json: () => Promise.resolve({ chapter: { content: [{ type: 'verse', number: 1 }] } }) })));
+  const h = setup();
+  await act(async () => { await h.result.current.builder.suggestChunks(); });
+  expect(ranges(h)).toEqual([[1, 8], [9, 12]]);
+});

src/hooks/useCrossRefs.js

@@ -0,0 +1,129 @@
+// Cross-references for the selected chunk: typed entry, suggestions from the
+// Open Cross Ref dataset, and loading a reference's verse text.
+import { useEffect, useState } from 'react';
+import { parseBibleChapter } from '../utils/bibleUtils.jsx';
+import { parseCrossRefString } from '../utils/importParsers.js';
+import { formatCrossRef } from '../utils/wordStudy.js';
+
+const crossRefDatasetCache = {}; // "BOOK/chapter" -> Open Cross Ref chapter data
+const verseChapterCache = {}; // "translation/BOOK/chapter" -> parsed verses
+
+// notify(message, ms) shows a short status message on the study page.
+export function useCrossRefs({ project, allChunks, selectedChunk, updateChunk, notify }) {
+  const [crossRefInput, setCrossRefInput] = useState('');
+  const [suggestingCrossRefs, setSuggestingCrossRefs] = useState(false);
+  const [crossRefSuggestions, setCrossRefSuggestions] = useState([]);
+
+  useEffect(() => {
+    setCrossRefSuggestions([]);
+  }, [selectedChunk?.id]);
+
+  useEffect(() => {
+    setCrossRefInput('');
+  }, [project?.selectedChunkId]);
+
+  const addCrossRef = (chunkId) => {
+    const ref = crossRefInput.trim();
+    if (!ref) return;
+    updateChunk(chunkId, {
+      crossReferences: [...(selectedChunk?.crossReferences ?? []), ref],
+    });
+    setCrossRefInput('');
+  };
+
+  const removeCrossRef = (chunkId, ref) => {
+    updateChunk(chunkId, {
+      crossReferences: (selectedChunk?.crossReferences ?? []).filter((r) => r !== ref),
+    });
+  };
+
+
+  const suggestCrossRefsForChunk = async (chunkId) => {
+    const chunk = allChunks.find((c) => c.id === chunkId);
+    const chapterIndex = project?.chapters.findIndex((ch) =>
+      ch.chunks.some((c) => c.id === chunkId)
+    ) ?? -1;
+    const chapter = chapterIndex >= 0 ? project.chapters[chapterIndex] : null;
+    if (!chunk || !chapter) return;
+
+    setSuggestingCrossRefs(true);
+    setCrossRefSuggestions([]);
+    try {
+      const cacheKey = `${chapter.bookAbbrev}/${chapter.chapter}`;
+      let chapterData = crossRefDatasetCache[cacheKey];
+      if (!chapterData) {
+        const res = await fetch(`https://bible.helloao.org/api/d/open-cross-ref/${chapter.bookAbbrev}/${chapter.chapter}.json`);
+        if (!res.ok) throw new Error('No cross-reference data found for this chapter.');
+        chapterData = await res.json();
+        crossRefDatasetCache[cacheKey] = chapterData;
+      }
+
+      const verseEntries = (chapterData.chapter?.content ?? []).filter(
+        (item) => item.verse >= chunk.startVerse
+          && item.verse <= chunk.endVerse,
+      );
+
+      const existing = new Set(chunk.crossReferences ?? []);
+      const seen = new Set();
+      const refs = [];
+      for (const v of verseEntries) {
+        for (const ref of v.references ?? []) {
+          const formatted = formatCrossRef(ref);
+          if (existing.has(formatted) || seen.has(formatted)) continue;
+          seen.add(formatted);
+          refs.push({ formatted, score: ref.score ?? 0 });
+        }
+      }
+
+      refs.sort((a, b) => b.score - a.score);
+      if (refs.length === 0) {
+        notify('No new cross-reference suggestions found for this passage.', 2500);
+        return;
+      }
+      setCrossRefSuggestions(refs.slice(0, 12).map((r) => r.formatted));
+    } catch (err) {
+      notify(`Cross-reference suggest failed: ${err.message}`, 3000);
+    } finally {
+      setSuggestingCrossRefs(false);
+    }
+  };
+
+
+  const loadVerseText = async (refString) => {
+    const parsed = parseCrossRefString(refString);
+    if (!parsed) throw new Error('Could not parse reference.');
+    const translation = project?.translation ?? 'BSB';
+    const cacheKey = `${translation}/${parsed.bookAbbrev}/${parsed.chapter}`;
+    let verses = verseChapterCache[cacheKey];
+    if (!verses) {
+      const res = await fetch(`https://bible.helloao.org/api/${translation}/${parsed.bookAbbrev}/${parsed.chapter}.json`);
+      if (!res.ok) throw new Error('Could not load verse text.');
+      const data = await res.json();
+      verses = parseBibleChapter(data);
+      verseChapterCache[cacheKey] = verses;
+    }
+    const text = verses
+      .filter((v) => v.number >= parsed.verse && v.number <= parsed.endVerse)
+      .map((v) => v.text)
+      .join(' ');
+    return text;
+  };
+
+  const addSuggestedCrossRef = (chunkId, ref) => {
+    updateChunk(chunkId, {
+      crossReferences: [...(selectedChunk?.crossReferences ?? []), ref],
+    });
+    setCrossRefSuggestions((cur) => cur.filter((r) => r !== ref));
+  };
+
+  return {
+    crossRefInput, setCrossRefInput,
+    suggestingCrossRefs,
+    crossRefSuggestions,
+    addCrossRef,
+    removeCrossRef,
+    suggestCrossRefsForChunk,
+    addSuggestedCrossRef,
+    loadVerseText,
+  };
+}

src/hooks/useHistoryNav.js

@@ -0,0 +1,42 @@
+// Makes the browser's (and phone's) Back/Forward buttons move between the app's pages. The app keeps
+// its page in state rather than in the URL, so without this Back would leave the app altogether.
+// Each page change adds a history entry; Back/Forward set the page again from that entry.
+import { useEffect, useRef } from 'react';
+
+// Pages that only make sense with a study project open.
+export const NEEDS_PROJECT = ['study', 'outline', 'script', 'export'];
+
+export function useHistoryNav({ page, setPage, hasProject, onArrive, enabled = true }) {
+  const shown = useRef(page);
+  const hasProjectRef = useRef(hasProject);
+  hasProjectRef.current = hasProject;
+  const onArriveRef = useRef(onArrive);
+  onArriveRef.current = onArrive;
+
+  // First entry: record where the app started so Back can return to it.
+  useEffect(() => {
+    if (!enabled) return;
+    try { window.history.replaceState({ page }, ''); } catch { /* history unavailable */ }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // A page change made inside the app adds a history entry.
+  useEffect(() => {
+    if (!enabled || shown.current === page) return;
+    shown.current = page;
+    try { window.history.pushState({ page }, ''); } catch { /* history unavailable */ }
+  }, [page, enabled]);
+
+  useEffect(() => {
+    if (!enabled) return undefined;
+    const onPop = (e) => {
+      let target = e.state?.page;
+      if (!target) return; // an entry that isn't ours (e.g. a hash change)
+      if (NEEDS_PROJECT.includes(target) && !hasProjectRef.current) target = 'home';
+      shown.current = target; // so the effect above doesn't push this page again
+      setPage(target);
+      onArriveRef.current?.(target);
+    };
+    window.addEventListener('popstate', onPop);
+    return () => window.removeEventListener('popstate', onPop);
+  }, [enabled, setPage]);
+}

src/hooks/useOfflineSave.js

@@ -0,0 +1,52 @@
+// Drives "Save for offline": one download at a time, with progress for the button to show,
+// a cancel, and a toast when it finishes.
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useToast } from '../components/Toasts.jsx';
+import { bibleRefs, bookRefs, downloadChapters, loadSavedBooks, markBookSaved } from '../utils/offline.js';
+
+export function useOnline() {
+  const [online, setOnline] = useState(() => (typeof navigator === 'undefined' ? true : navigator.onLine !== false));
+  useEffect(() => {
+    const up = () => setOnline(true);
+    const down = () => setOnline(false);
+    window.addEventListener('online', up);
+    window.addEventListener('offline', down);
+    return () => { window.removeEventListener('online', up); window.removeEventListener('offline', down); };
+  }, []);
+  return online;
+}
+
+export function useOfflineSave() {
+  const { toast } = useToast();
+  const [saved, setSaved] = useState(loadSavedBooks);
+  const [job, setJob] = useState(null); // { label, done, total } while downloading
+  const controller = useRef(null);
+  useEffect(() => () => controller.current?.abort(), []);
+
+  const run = useCallback(async (label, translation, refs, { bookKeys = [] } = {}) => {
+    if (controller.current) return; // one at a time
+    const abort = new AbortController();
+    controller.current = abort;
+    setJob({ label, done: 0, total: refs.length });
+    const result = await downloadChapters(translation, refs, { signal: abort.signal, onProgress: (done, total) => setJob({ label, done, total }) });
+    controller.current = null;
+    setJob(null);
+    if (abort.signal.aborted) { toast('Download stopped'); return; }
+    if (result.failed === 0) {
+      bookKeys.forEach((b) => markBookSaved(translation, b));
+      setSaved(loadSavedBooks());
+      toast(`Saved ${label} for offline`);
+    } else {
+      toast(`Saved ${result.done} of ${refs.length} chapters — check your connection and try again`, { tone: 'error' });
+    }
+  }, [toast]);
+
+  return {
+    saved, job,
+    isSaved: (translation, book) => (saved[translation] ?? []).includes(book),
+    saveBook: (translation, book, name) => run(name, translation, bookRefs(book), { bookKeys: [book] }),
+    saveBible: (translation) => run(`The whole ${translation}`, translation, bibleRefs(), { bookKeys: [...new Set(bibleRefs().map((r) => r.book))] }),
+    saveRefs: (label, translation, refs) => run(label, translation, refs),
+    cancel: () => controller.current?.abort(),
+  };
+}

src/hooks/useParallelChapter.js

@@ -0,0 +1,25 @@
+// The second Bible in the side-by-side view: loads the same chapter in another translation.
+// Pass an empty translation to switch it off.
+import { useEffect, useState } from 'react';
+import { fetchChapter } from '../utils/bibleText.js';
+
+export function useParallelChapter(translation, bookAbbrev, chapter) {
+  const [state, setState] = useState({ key: '', verses: [], error: '' });
+  const key = translation ? `${translation}/${bookAbbrev}/${chapter}` : '';
+
+  useEffect(() => {
+    if (!key) return undefined;
+    const controller = new AbortController();
+    fetchChapter(translation, bookAbbrev, chapter, { signal: controller.signal })
+      .then(({ verses }) => setState({ key, verses, error: '' }))
+      .catch((err) => { if (!controller.signal.aborted) setState({ key, verses: [], error: err.message || 'Unable to load.' }); });
+    return () => controller.abort();
+  }, [key]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const ready = state.key === key;
+  return {
+    verses: ready ? state.verses : [],
+    error: ready ? state.error : '',
+    loading: !!key && !ready,
+  };
+}

src/hooks/usePrefsSync.js

@@ -0,0 +1,114 @@
+// Keeps a few display preferences (theme, default translation, verse layout, commentary
+// source, and where you left off in the Reader) in step with the signed-in account.
+// Every preference has its own timestamp, so the newest change to each one wins and two
+// devices changing different settings never overwrite each other.
+import { useCallback, useEffect, useRef } from 'react';
+import { getRemotePrefs, saveRemotePrefs } from '../syncService.js';
+
+export const PREF_KEYS = ['theme', 'translation', 'layout', 'commentarySource', 'planTranslation', 'startPage', 'position', 'colorLabels'];
+const META_KEY = 'prefs-meta'; // { key: timestamp of the last change made on this device }
+const PUSH_DELAY_MS = 1000;
+const FOCUS_PULL_MIN_MS = 30_000;
+
+const lsGet = (k) => { try { return localStorage.getItem(k); } catch { return null; } };
+const lsSet = (k, v) => { try { localStorage.setItem(k, v); } catch { /* storage unavailable */ } };
+const lsDel = (k) => { try { localStorage.removeItem(k); } catch { /* storage unavailable */ } };
+const readMeta = () => { try { return JSON.parse(lsGet(META_KEY) || '{}'); } catch { return {}; } };
+const same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+
+// values: { theme, translation, layout, commentarySource, planTranslation, startPage, position: { book, chapter } }
+// apply(key, value): puts a server value on screen and in localStorage
+// canApplyPosition(): false while the Reader is open, so a background sync never moves the page under you
+export function usePrefsSync({ values, apply, canApplyPosition = () => true }) {
+  const valuesRef = useRef(values);
+  valuesRef.current = values;
+  const prevRef = useRef(values);
+  const enabledRef = useRef(false);
+  const dirtyRef = useRef(new Set());
+  const timerRef = useRef(null);
+  const lastPullRef = useRef(0);
+  const applyRef = useRef(apply);
+  applyRef.current = apply;
+  const canApplyPositionRef = useRef(canApplyPosition);
+  canApplyPositionRef.current = canApplyPosition;
+
+  const push = useCallback(async () => {
+    window.clearTimeout(timerRef.current);
+    if (!enabledRef.current || dirtyRef.current.size === 0) return;
+    const keys = [...dirtyRef.current];
+    const meta = readMeta();
+    const prefs = Object.fromEntries(keys.map((k) => [k, { v: valuesRef.current[k], at: meta[k] ?? Date.now() }]));
+    const result = await saveRemotePrefs(prefs);
+    if (!result.ok) return; // stays dirty; retried on the next change or when the tab regains focus
+    keys.forEach((k) => { if (readMeta()[k] === prefs[k].at) dirtyRef.current.delete(k); });
+    if (dirtyRef.current.size > 0) timerRef.current = window.setTimeout(push, PUSH_DELAY_MS);
+  }, []);
+
+  // Local changes: stamp them and save shortly.
+  useEffect(() => {
+    const prev = prevRef.current;
+    const changed = PREF_KEYS.filter((k) => !same(prev[k], values[k]));
+    prevRef.current = values;
+    if (changed.length === 0) return;
+    const meta = readMeta();
+    const now = Date.now();
+    changed.forEach((k) => { meta[k] = now; dirtyRef.current.add(k); });
+    lsSet(META_KEY, JSON.stringify(meta));
+    if (enabledRef.current) {
+      window.clearTimeout(timerRef.current);
+      timerRef.current = window.setTimeout(push, PUSH_DELAY_MS);
+    }
+  }, [values.theme, values.translation, values.layout, values.commentarySource, values.planTranslation, values.startPage, values.position.book, values.position.chapter, values.colorLabels, push]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const pullServerPrefs = useCallback(async () => {
+    enabledRef.current = true;
+    lastPullRef.current = Date.now();
+    const result = await getRemotePrefs();
+    if (!result.ok) return;
+    const server = result.data?.prefs ?? {};
+    const meta = readMeta();
+    const now = Date.now();
+    for (const key of PREF_KEYS) {
+      if (valuesRef.current[key] === undefined) continue; // nothing on this device to compare or upload
+      const remote = server[key];
+      const localAt = meta[key] ?? 0;
+      if (remote && remote.at > localAt) {
+        if (key === 'position' && !canApplyPositionRef.current()) continue; // don't move the page mid-read
+        meta[key] = remote.at;
+        if (!same(valuesRef.current[key], remote.v)) {
+          prevRef.current = { ...prevRef.current, [key]: remote.v }; // so this isn't mistaken for a local edit
+          applyRef.current(key, remote.v);
+        }
+        dirtyRef.current.delete(key);
+      } else if (!remote || localAt > remote.at) {
+        if (!meta[key]) meta[key] = now; // first time on this account: what's on screen becomes the account's
+        dirtyRef.current.add(key);
+      }
+    }
+    lsSet(META_KEY, JSON.stringify(meta));
+    await push();
+  }, [push]);
+
+  // Signed out: stop syncing. Values stay as they are on this device; the timestamps are
+  // forgotten so the next account to sign in here starts from its own settings.
+  const stopPrefsSync = useCallback(() => {
+    enabledRef.current = false;
+    window.clearTimeout(timerRef.current);
+    dirtyRef.current.clear();
+    lsDel(META_KEY);
+  }, []);
+
+  useEffect(() => {
+    const onVisibility = () => {
+      if (!enabledRef.current) return;
+      if (document.visibilityState === 'hidden') { push(); return; }
+      if (Date.now() - lastPullRef.current > FOCUS_PULL_MIN_MS) pullServerPrefs();
+    };
+    document.addEventListener('visibilitychange', onVisibility);
+    return () => document.removeEventListener('visibilitychange', onVisibility);
+  }, [push, pullServerPrefs]);
+
+  useEffect(() => () => window.clearTimeout(timerRef.current), []);
+
+  return { pullServerPrefs, stopPrefsSync, flushPrefs: push };
+}

src/hooks/usePrefsSync.test.js

@@ -0,0 +1,87 @@
+import { renderHook, act } from '@testing-library/react';
+import { useState } from 'react';
+import { vi, test, expect, beforeEach } from 'vitest';
+
+const remote = { prefs: {}, puts: [] };
+vi.mock('../syncService.js', () => ({
+  getRemotePrefs: vi.fn(async () => ({ ok: true, data: { prefs: remote.prefs } })),
+  saveRemotePrefs: vi.fn(async (prefs) => { remote.puts.push(prefs); return { ok: true, data: { prefs } }; }),
+}));
+
+import { usePrefsSync } from './usePrefsSync.js';
+
+beforeEach(() => { localStorage.clear(); remote.prefs = {}; remote.puts = []; });
+
+// A stand-in for the Reader's state, wired the same way useBibleReader wires it.
+function setup({ canApplyPosition = () => true, initial = {} } = {}) {
+  return renderHook(() => {
+    const [theme, setTheme] = useState(initial.theme ?? 'paper');
+    const [layout, setLayout] = useState(initial.layout ?? 'flow');
+    const [position, setPosition] = useState(initial.position ?? { book: 'GEN', chapter: 1 });
+    const sync = usePrefsSync({
+      values: { theme, translation: 'BSB', layout, commentarySource: 'matthew-henry', planTranslation: 'same', startPage: 'studies', position },
+      apply: (key, v) => { if (key === 'theme') setTheme(v); else if (key === 'layout') setLayout(v); else if (key === 'position') setPosition(v); },
+      canApplyPosition,
+    });
+    return { theme, layout, position, setTheme, setLayout, setPosition, ...sync };
+  });
+}
+
+test('the server\'s newer value wins, an older one does not', async () => {
+  localStorage.setItem('prefs-meta', JSON.stringify({ theme: 500, layout: 900 }));
+  remote.prefs = { theme: { v: 'dark', at: 800 }, layout: { v: 'verses', at: 100 } };
+  const h = setup();
+  await act(async () => { await h.result.current.pullServerPrefs(); });
+  expect(h.result.current.theme).toBe('dark'); // server is newer
+  expect(h.result.current.layout).toBe('flow'); // this device changed it later
+  expect(remote.puts).toHaveLength(1);
+  expect(Object.keys(remote.puts[0])).toContain('layout'); // ...so the server hears about it
+  expect(Object.keys(remote.puts[0])).not.toContain('theme');
+});
+
+test('a device with no history takes the account\'s settings; a first device uploads its own', async () => {
+  remote.prefs = { theme: { v: 'sepia', at: 700 } };
+  const h = setup();
+  await act(async () => { await h.result.current.pullServerPrefs(); });
+  expect(h.result.current.theme).toBe('sepia');
+  // keys the account doesn't have yet are filled in from this device
+  expect(Object.keys(remote.puts[0]).sort()).toEqual(['commentarySource', 'layout', 'planTranslation', 'position', 'startPage', 'translation']);
+});
+
+test('reading position is not moved under you while the Reader is open', async () => {
+  remote.prefs = { position: { v: { book: 'JHN', chapter: 3 }, at: 900 }, theme: { v: 'dark', at: 900 } };
+  const h = setup({ canApplyPosition: () => false });
+  await act(async () => { await h.result.current.pullServerPrefs(); });
+  expect(h.result.current.position).toEqual({ book: 'GEN', chapter: 1 }); // stays put
+  expect(h.result.current.theme).toBe('dark'); // everything else still syncs
+});
+
+test('and it is applied when the Reader is not open', async () => {
+  remote.prefs = { position: { v: { book: 'JHN', chapter: 3 }, at: 900 } };
+  const h = setup({ canApplyPosition: () => true });
+  await act(async () => { await h.result.current.pullServerPrefs(); });
+  expect(h.result.current.position).toEqual({ book: 'JHN', chapter: 3 });
+  expect(remote.puts.every((p) => !('position' in p))).toBe(true); // applying it isn't mistaken for a local edit
+});
+
+test('a local change is stamped and pushed shortly after', async () => {
+  vi.useFakeTimers();
+  try {
+    const h = setup();
+    await act(async () => { await h.result.current.pullServerPrefs(); });
+    remote.puts = [];
+    act(() => h.result.current.setTheme('dark'));
+    await act(async () => { await vi.advanceTimersByTimeAsync(1200); });
+    expect(remote.puts).toHaveLength(1);
+    expect(remote.puts[0].theme.v).toBe('dark');
+    expect(JSON.parse(localStorage.getItem('prefs-meta')).theme).toBe(remote.puts[0].theme.at);
+  } finally { vi.useRealTimers(); }
+});
+
+test('stopping sync forgets the timestamps so the next account starts from its own settings', async () => {
+  const h = setup();
+  await act(async () => { await h.result.current.pullServerPrefs(); });
+  expect(localStorage.getItem('prefs-meta')).not.toBeNull();
+  act(() => h.result.current.stopPrefsSync());
+  expect(localStorage.getItem('prefs-meta')).toBeNull();
+});

src/hooks/useProjectLibrary.js

@@ -0,0 +1,155 @@
+// The signed-in user's saved projects: opening, renaming, deleting, and keeping
+// this device's copies in step with the server.
+import { useEffect, useRef, useState } from 'react';
+import { useToast } from '../components/Toasts.jsx';
+import { clearSyncBase, getSyncBase, setSyncBase } from '../utils/syncBase.js';
+import { loadProjectIndex } from '../utils/bibleUtils.jsx';
+import {
+  saveProjectToStorage,
+  deleteProjectFromStorage,
+  loadProjectById,
+} from '../utils/projectStorage.js';
+import {
+  saveRemoteProject,
+  deleteRemoteProject,
+  listRemoteProjects,
+  loadRemoteProject,
+} from '../syncService.js';
+
+export function useProjectLibrary({
+  authUser,
+  project,
+  setProject,
+  setProjectIndex,
+  setCurrentPage,
+}) {
+  const { toast } = useToast();
+  // Deleted projects waiting out their "Undo" window before the server copy is removed too
+  const pendingDeletes = useRef(new Map()); // id -> timer
+  const [staleLocalProjects, setStaleLocalProjects] = useState([]); // projects where server is newer
+  const [autoRestoredCount, setAutoRestoredCount] = useState(null); // brief "synced from another device" toast
+
+  // Once we know who's signed in, reconcile the local project index against the server.
+  // Runs on every authUser change (including logout -> different login) so a previous
+  // account's stale suggestions never linger after switching users. Projects that exist
+  // on the server but not on this device (e.g. a brand new browser) are pulled down
+  // automatically instead of requiring a manual "Restore" click per project.
+  useEffect(() => {
+    if (!authUser) {
+      setStaleLocalProjects([]);
+      return;
+    }
+    let cancelled = false;
+    const localIndex = loadProjectIndex();
+    listRemoteProjects().then(async (result) => {
+      if (!result.ok || cancelled) return;
+      const localMap = new Map(localIndex.map((e) => [e.id, e]));
+      // What this device has seen of each study on the server: a save made on top of anything older is
+      // checked against it, so a newer copy from another device is never overwritten silently.
+      for (const e of result.data) {
+        const local = localMap.get(e.id);
+        setSyncBase(e.id, local ? Math.min(e.lastEdited ?? 0, local.lastEdited ?? 0) : e.lastEdited);
+      }
+
+      const missing = result.data.filter((e) => !localMap.has(e.id));
+      if (missing.length > 0) {
+        const fetched = await Promise.all(missing.map((e) => loadRemoteProject(e.id)));
+        fetched.filter((r) => r.ok).forEach((r) => { saveProjectToStorage(r.data); setSyncBase(r.data.id, r.data.lastEdited); });
+        if (cancelled) return;
+        const restoredCount = fetched.filter((r) => r.ok).length;
+        if (restoredCount > 0) {
+          setProjectIndex(loadProjectIndex());
+          setAutoRestoredCount(restoredCount);
+          window.setTimeout(() => setAutoRestoredCount(null), 4000);
+        }
+      }
+
+      const stale = result.data.filter((e) => {
+        const local = localMap.get(e.id);
+        return local && (e.lastEdited ?? 0) > (local.lastEdited ?? 0);
+      });
+      if (!cancelled) setStaleLocalProjects(stale);
+    });
+    return () => { cancelled = true; };
+  }, [authUser]);
+
+  const resumeProject = (id) => {
+    const loaded = loadProjectById(id);
+    if (!loaded) return;
+    setProject(loaded);
+    const loadedChunks = loaded.chapters.flatMap((ch) => ch.chunks);
+    const hasSelectedChunk = loaded.selectedChunkId
+      && loadedChunks.some((c) => c.id === loaded.selectedChunkId);
+    setCurrentPage(hasSelectedChunk ? 'study' : 'setup');
+  };
+
+  const renameProjectInStorage = (id, title) => {
+    const loaded = loadProjectById(id);
+    if (!loaded) return;
+    const updated = { ...loaded, title, lastEdited: Date.now() };
+    saveProjectToStorage(updated);
+    setProjectIndex(loadProjectIndex());
+    saveRemoteProject(updated, { baseEdited: getSyncBase(id) }).then((result) => {
+      if (result.ok) setSyncBase(id, updated.lastEdited);
+      else if (result.status === 409) toast('That study changed on another device. Open it to choose which version to keep.', { tone: 'error' });
+    });
+    if (project?.id === id) {
+      setProject((current) => (current ? { ...current, title } : current));
+    }
+  };
+
+  // Deleting is immediate here, with an Undo for a few seconds; only after that is the server copy
+  // removed (and straight away if the tab is closed first, so a deleted project never comes back).
+  const finishDelete = (id) => {
+    if (!pendingDeletes.current.has(id)) return;
+    window.clearTimeout(pendingDeletes.current.get(id));
+    pendingDeletes.current.delete(id);
+    deleteRemoteProject(id); // fire-and-forget
+  };
+  useEffect(() => {
+    const flush = () => [...pendingDeletes.current.keys()].forEach(finishDelete);
+    window.addEventListener('pagehide', flush);
+    return () => window.removeEventListener('pagehide', flush);
+  }, []);
+
+  const deleteProject = (id) => {
+    const loaded = loadProjectById(id);
+    if (!loaded) return;
+    deleteProjectFromStorage(id);
+    clearSyncBase(id);
+    setProjectIndex(loadProjectIndex());
+    pendingDeletes.current.set(id, window.setTimeout(() => finishDelete(id), 8000));
+    toast(`Deleted “${loaded.title}”`, {
+      action: {
+        label: 'Undo',
+        onClick: () => {
+          window.clearTimeout(pendingDeletes.current.get(id));
+          pendingDeletes.current.delete(id);
+          saveProjectToStorage(loaded);
+          setProjectIndex(loadProjectIndex());
+        },
+      },
+    });
+  };
+
+  const pullLatestFromServer = async (id) => {
+    const result = await loadRemoteProject(id);
+    if (!result.ok) {
+      toast('Could not pull the latest version from the server.', { tone: 'error' });
+      return;
+    }
+    saveProjectToStorage(result.data);
+    setSyncBase(id, result.data.lastEdited);
+    setProjectIndex(loadProjectIndex());
+    setStaleLocalProjects((prev) => prev.filter((e) => e.id !== id));
+  };
+
+  return {
+    staleLocalProjects,
+    autoRestoredCount,
+    resumeProject,
+    renameProjectInStorage,
+    deleteProject,
+    pullLatestFromServer,
+  };
+}

src/hooks/useReaderMarksSync.js

@@ -0,0 +1,124 @@
+// Keeps the Reader's bookmarks and text highlights in step with the signed-in user's
+// account, so they follow you between devices. Local edits save to localStorage as they
+// always did; while signed in they are also pushed to the server a moment after the last
+// change, and pulled when you sign in and whenever you come back to the tab.
+import { useCallback, useEffect, useRef } from 'react';
+import { getRemoteMarks, saveRemoteMarks } from '../syncService.js';
+import { emptyMarks, isEmptyMarks, marksEqual, mergeMarks, normalizeMarks } from '../utils/readerMarks.js';
+
+const KEYS = { bookmarks: 'reader-bookmarks', highlights: 'readerTextHighlights', syncedAt: 'reader-marks-synced-at', dirty: 'reader-marks-dirty' };
+const PUSH_DELAY_MS = 1500;
+const FOCUS_PULL_MIN_MS = 20_000;
+
+const lsGet = (k) => { try { return localStorage.getItem(k); } catch { return null; } };
+const lsSet = (k, v) => { try { localStorage.setItem(k, v); } catch { /* storage unavailable */ } };
+const lsDel = (k) => { try { localStorage.removeItem(k); } catch { /* storage unavailable */ } };
+
+export function useReaderMarksSync({ bookmarks, highlights, setBookmarks, setHighlights }) {
+  const enabledRef = useRef(false);
+  const latestRef = useRef({ bookmarks, highlights });
+  latestRef.current = { bookmarks, highlights };
+  const timerRef = useRef(null);
+  const skipRef = useRef(false); // set while applying server data, so it isn't mistaken for a local edit
+  const firstRunRef = useRef(true);
+  const lastPullRef = useRef(0);
+  const pushingRef = useRef(null);
+
+  const setDirty = (dirty) => (dirty ? lsSet(KEYS.dirty, '1') : lsDel(KEYS.dirty));
+
+  const push = useCallback(async () => {
+    window.clearTimeout(timerRef.current);
+    if (!enabledRef.current) return;
+    if (pushingRef.current) { await pushingRef.current; }
+    const snapshot = latestRef.current;
+    pushingRef.current = saveRemoteMarks({ bookmarks: snapshot.bookmarks, highlights: snapshot.highlights });
+    const result = await pushingRef.current;
+    pushingRef.current = null;
+    if (!result.ok) return; // stays dirty; retried on the next change or when the tab regains focus
+    lsSet(KEYS.syncedAt, String(result.data.updatedAt));
+    // Only clean if nothing changed while the request was in flight
+    if (latestRef.current.bookmarks === snapshot.bookmarks && latestRef.current.highlights === snapshot.highlights) setDirty(false);
+    else timerRef.current = window.setTimeout(push, PUSH_DELAY_MS);
+  }, []);
+
+  // Local edits: remember there's something to save, and save it shortly.
+  useEffect(() => {
+    if (firstRunRef.current) { firstRunRef.current = false; return; }
+    if (skipRef.current) { skipRef.current = false; return; }
+    setDirty(true);
+    if (enabledRef.current) {
+      window.clearTimeout(timerRef.current);
+      timerRef.current = window.setTimeout(push, PUSH_DELAY_MS);
+    }
+  }, [bookmarks, highlights, push]);
+
+  // Puts `next` on screen and in localStorage without treating it as a local edit.
+  const apply = useCallback((next) => {
+    if (marksEqual(next, latestRef.current)) return;
+    skipRef.current = true;
+    lsSet(KEYS.bookmarks, JSON.stringify(next.bookmarks));
+    lsSet(KEYS.highlights, JSON.stringify(next.highlights));
+    setBookmarks(next.bookmarks);
+    setHighlights(next.highlights);
+  }, [setBookmarks, setHighlights]);
+
+  // Sign-in (and tab focus): reconcile this device with the server's copy.
+  const pullServerMarks = useCallback(async () => {
+    enabledRef.current = true;
+    lastPullRef.current = Date.now();
+    const result = await getRemoteMarks();
+    if (!result.ok) return;
+    const server = normalizeMarks(result.data);
+    const serverAt = Number(result.data?.updatedAt) || 0;
+    const local = normalizeMarks(latestRef.current);
+    const syncedAt = Number(lsGet(KEYS.syncedAt)) || 0;
+    const dirty = lsGet(KEYS.dirty) === '1';
+
+    let next = local;
+    let needsPush = false;
+    if (serverAt === 0) {
+      needsPush = !isEmptyMarks(local); // first time on this account: the server takes what's here
+    } else if (syncedAt === 0) {
+      next = mergeMarks(local, server); // first time this device meets the server's copy: keep both
+      needsPush = !marksEqual(next, server);
+    } else if (serverAt > syncedAt) {
+      next = dirty ? mergeMarks(local, server) : server; // another device saved since we last synced
+      needsPush = dirty && !marksEqual(next, server);
+    } else {
+      needsPush = dirty; // server has nothing newer than what we already have
+    }
+
+    apply(next);
+    if (serverAt > 0) lsSet(KEYS.syncedAt, String(serverAt));
+    if (needsPush) { setDirty(true); latestRef.current = next; await push(); } else if (serverAt >= syncedAt) setDirty(false);
+  }, [apply, push]);
+
+  // Save anything pending before signing out.
+  const flushMarks = useCallback(async () => {
+    if (enabledRef.current && lsGet(KEYS.dirty) === '1') await push();
+  }, [push]);
+
+  // Signed out: stop syncing and clear this device's copy, so the next person to sign in
+  // here starts clean (their marks come from their own account).
+  const stopMarksSync = useCallback(() => {
+    enabledRef.current = false;
+    window.clearTimeout(timerRef.current);
+    [KEYS.bookmarks, KEYS.highlights, KEYS.syncedAt, KEYS.dirty].forEach(lsDel);
+    apply(emptyMarks());
+  }, [apply]);
+
+  // Coming back to the tab (another device may have saved), or leaving it (save now).
+  useEffect(() => {
+    const onVisibility = () => {
+      if (!enabledRef.current) return;
+      if (document.visibilityState === 'hidden') { if (lsGet(KEYS.dirty) === '1') push(); return; }
+      if (Date.now() - lastPullRef.current > FOCUS_PULL_MIN_MS) pullServerMarks();
+    };
+    document.addEventListener('visibilitychange', onVisibility);
+    return () => document.removeEventListener('visibilitychange', onVisibility);
+  }, [push, pullServerMarks]);
+
+  useEffect(() => () => window.clearTimeout(timerRef.current), []);
+
+  return { pullServerMarks, flushMarks, stopMarksSync };
+}

src/hooks/useReadingPlans.js

@@ -0,0 +1,340 @@
+// Tracks which reading plans (see utils/readingPlans.js) a user has started,
+// which days they've checked off, which plans they've finished, any plans
+// they've created themselves, and a cross-plan activity log (for streaks).
+// Saved locally right away; synced to the server via an effect that watches
+// `state` (see below) so sync success/failure can actually be tracked and
+// shown, instead of being a fire-and-forget call buried inside setState.
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { getRemoteReadingProgress, saveRemoteReadingProgress } from '../syncService.js';
+import { useToast } from '../components/Toasts.jsx';
+import { mergeReadingPlans } from '../utils/backup.js';
+import { clampPlanDays, localDateString, normalizeCustomPlan, registerCustomPlans } from '../utils/readingPlans.js';
+
+const STORAGE_KEY = 'readingPlanProgress';
+
+function loadLocal() {
+  try {
+    const raw = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null');
+    if (Array.isArray(raw)) return { progress: raw, customPlans: [], activity: [] }; // pre-custom-plans shape
+    return {
+      progress: raw?.progress ?? [],
+      customPlans: raw?.customPlans ?? [],
+      activity: raw?.activity ?? [],
+    };
+  } catch {
+    return { progress: [], customPlans: [], activity: [] };
+  }
+}
+
+const makeId = () => (crypto.randomUUID?.() ?? `${Date.now()}-${Math.random()}`);
+
+function formatSyncError(result) {
+  const message = result.error || 'Network error';
+  if (!result.status || message.startsWith('HTTP')) return message;
+  return `HTTP ${result.status}: ${message}`;
+}
+
+export function useReadingPlans() {
+  const { toast } = useToast();
+  const [state, setState] = useState(loadLocal);
+  const stateRef = useRef(state); // the latest state, for taking a copy just before something is removed
+  stateRef.current = state;
+  const [syncStatus, setSyncStatus] = useState(''); // '' | 'syncing' | 'synced' | 'error'
+  const [syncError, setSyncError] = useState('');
+  // The exact object loadLocal() produced at mount. Compared by reference (not
+  // a boolean "first render" flag) so React 18 StrictMode's dev-only double
+  // effect invocation can't defeat the skip-on-load guard below — both
+  // invocations see the same unchanged `state` reference either way.
+  const initialStateRef = useRef(state);
+  const skipNextSyncRef = useRef(false); // set right before a server merge, so we don't PUT straight back what we just GOT
+
+  // Keeps the readingPlans.js lookup (getPlan/getPlanSchedule) in sync with
+  // this user's custom plans before any consumer renders this commit.
+  registerCustomPlans(state.customPlans);
+  // What the rest of the app sees: plans with more days than chapters are clamped.
+  const customPlans = useMemo(() => state.customPlans.map(normalizeCustomPlan), [state.customPlans]);
+
+  // Persist locally + sync to the server whenever state changes. Runs as a
+  // real effect (not inside the setState updater) so the network call has a
+  // trustworthy `state` value and its result can update sync status safely.
+  useEffect(() => {
+    try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch {}
+
+    if (state === initialStateRef.current) {
+      return; // nothing's actually changed since load — don't sync just because we mounted
+    }
+    if (skipNextSyncRef.current) {
+      skipNextSyncRef.current = false;
+      return;
+    }
+
+    let cancelled = false;
+    setSyncStatus('syncing');
+    saveRemoteReadingProgress(state).then((result) => {
+      if (cancelled) return;
+      if (result.ok) {
+        setSyncStatus('synced');
+        setSyncError('');
+      } else {
+        setSyncStatus('error');
+        setSyncError(formatSyncError(result));
+        console.error('Reading plan sync failed:', result.status, result.error);
+      }
+    });
+    return () => { cancelled = true; };
+  }, [state]);
+
+  const updateProgress = useCallback((updater) => {
+    setState((prev) => ({ ...prev, progress: updater(prev.progress) }));
+  }, []);
+
+  const updateCustomPlans = useCallback((updater) => {
+    setState((prev) => ({ ...prev, customPlans: updater(prev.customPlans) }));
+  }, []);
+
+  const startPlan = useCallback((planId, translation) => {
+    updateProgress((prev) => {
+      if (prev.some((p) => p.planId === planId && !p.completedAt)) return prev;
+      const record = {
+        id: makeId(),
+        planId,
+        startedAt: Date.now(),
+        completedDays: [],
+        completedAt: null,
+        lastActivityAt: Date.now(),
+        translation: translation || undefined, // which Bible this plan is read in (undefined = the reader's default)
+        chaptersRead: {}, // dayIndex -> ['JHN.8', ...] chapters finished within that day
+      };
+      return [record, ...prev];
+    });
+  }, [updateProgress]);
+
+  // Applies a change to one plan's progress record and keeps the cross-plan
+  // activity log in step: finishing any day (for the first time today) extends the streak.
+  const patchProgress = useCallback((progressId, patcher, totalDays) => {
+    setState((prev) => {
+      const target = prev.progress.find((p) => p.id === progressId);
+      if (!target) return prev;
+      let newlyDone = false;
+      const progress = prev.progress.map((p) => {
+        if (p.id !== progressId) return p;
+        const next = patcher(p);
+        newlyDone = next.completedDays.length > p.completedDays.length;
+        const completedAt = totalDays != null && next.completedDays.length >= totalDays ? (p.completedAt ?? Date.now()) : (totalDays != null ? null : p.completedAt);
+        return { ...next, completedAt, lastActivityAt: Date.now() };
+      });
+      // Only marking a day *done* extends the streak; unchecking one doesn't erase it.
+      const today = localDateString();
+      const activity = newlyDone && !prev.activity.includes(today) ? [...prev.activity, today] : prev.activity;
+      return { ...prev, progress, activity };
+    });
+  }, []);
+
+  const withoutDay = (chaptersRead, dayIndex) => {
+    const { [dayIndex]: _removed, ...rest } = chaptersRead ?? {};
+    return rest;
+  };
+
+  // Marks a whole day done/undone. Undoing also clears that day's per-chapter ticks.
+  const toggleDay = useCallback((progressId, dayIndex, totalDays) => {
+    patchProgress(progressId, (p) => {
+      const wasAlready = p.completedDays.includes(dayIndex);
+      return {
+        ...p,
+        completedDays: wasAlready
+          ? p.completedDays.filter((d) => d !== dayIndex)
+          : [...p.completedDays, dayIndex].sort((a, b) => a - b),
+        chaptersRead: wasAlready ? withoutDay(p.chaptersRead, dayIndex) : p.chaptersRead,
+      };
+    }, totalDays);
+  }, [patchProgress]);
+
+  // Ticks (or unticks) one chapter of a day. `dayKeys` are all of that day's chapter
+  // keys ("JHN.8"); once every one is ticked the day completes by itself, and
+  // unticking a chapter of a finished day reopens it. `force` = true/false sets it
+  // instead of toggling (used by the auto-mark so it can't accidentally untick).
+  const toggleChapterRead = useCallback((progressId, dayIndex, chapterKey, dayKeys, totalDays, force) => {
+    patchProgress(progressId, (p) => {
+      const read = new Set((p.chaptersRead ?? {})[dayIndex] ?? []);
+      const want = force ?? !read.has(chapterKey);
+      if (want) read.add(chapterKey); else read.delete(chapterKey);
+      const allRead = dayKeys.every((k) => read.has(k));
+      const isDone = p.completedDays.includes(dayIndex);
+      let completedDays = p.completedDays;
+      if (allRead && !isDone) completedDays = [...completedDays, dayIndex].sort((a, b) => a - b);
+      if (!allRead && isDone) completedDays = completedDays.filter((d) => d !== dayIndex);
+      return { ...p, completedDays, chaptersRead: { ...(p.chaptersRead ?? {}), [dayIndex]: [...read] } };
+    }, totalDays);
+  }, [patchProgress]);
+
+  // Which Bible a plan is read in (any translation the reader offers).
+  const setPlanTranslation = useCallback((progressId, translation) => {
+    updateProgress((prev) => prev.map((p) => (p.id === progressId ? { ...p, translation } : p)));
+  }, [updateProgress]);
+
+  // Restarting and removing are immediate, with an "Undo" toast that puts the plan back exactly as it was.
+  const restartPlan = useCallback((progressId) => {
+    const before = stateRef.current.progress.find((p) => p.id === progressId);
+    updateProgress((prev) => prev.map((p) => (
+      p.id === progressId
+        ? { ...p, completedDays: [], chaptersRead: {}, completedAt: null, startedAt: Date.now(), lastActivityAt: Date.now() }
+        : p
+    )));
+    if (before) toast('Plan restarted from day 1', { action: { label: 'Undo', onClick: () => updateProgress((prev) => prev.map((p) => (p.id === progressId ? before : p))) } });
+  }, [updateProgress, toast]);
+
+  const removePlanProgress = useCallback((progressId) => {
+    const index = stateRef.current.progress.findIndex((p) => p.id === progressId);
+    const before = stateRef.current.progress[index];
+    updateProgress((prev) => prev.filter((p) => p.id !== progressId));
+    if (before) {
+      toast('Plan removed', {
+        action: {
+          label: 'Undo',
+          onClick: () => updateProgress((prev) => (prev.some((p) => p.id === progressId) ? prev : [...prev.slice(0, index), before, ...prev.slice(index)])),
+        },
+      });
+    }
+  }, [updateProgress, toast]);
+
+  // Resets the pace clock so a plan that's fallen behind schedule stops being
+  // flagged as "behind" — doesn't touch which days are actually marked done.
+  const recalibratePace = useCallback((progressId) => {
+    updateProgress((prev) => prev.map((p) => (
+      p.id === progressId
+        ? { ...p, startedAt: Date.now() - p.completedDays.length * 86400000, lastActivityAt: Date.now() }
+        : p
+    )));
+  }, [updateProgress]);
+
+  // { title, description, days, books: [abbrev, ...], chapterRanges?, image?: dataUrl } -> new custom plan id
+  const addCustomPlan = useCallback(({ title, description, days, books, chapterRanges, image }) => {
+    const id = `custom-${makeId()}`;
+    updateCustomPlans((prev) => [
+      {
+        id,
+        title: title.trim(),
+        description: (description ?? '').trim(),
+        category: 'My Plans',
+        icon: '✨',
+        image: image || undefined,
+        days: clampPlanDays(books, chapterRanges, days),
+        books,
+        chapterRanges: chapterRanges && Object.keys(chapterRanges).length > 0 ? chapterRanges : undefined,
+        custom: true,
+        createdAt: Date.now(),
+      },
+      ...prev,
+    ]);
+    return id;
+  }, [updateCustomPlans]);
+
+  const removeCustomPlan = useCallback((planId) => {
+    const plan = stateRef.current.customPlans.find((p) => p.id === planId);
+    const runs = stateRef.current.progress.filter((p) => p.planId === planId);
+    updateCustomPlans((prev) => prev.filter((p) => p.id !== planId));
+    updateProgress((prev) => prev.filter((p) => p.planId !== planId));
+    if (plan) {
+      toast(`Deleted “${plan.title}”`, {
+        action: {
+          label: 'Undo',
+          onClick: () => {
+            updateCustomPlans((prev) => (prev.some((p) => p.id === planId) ? prev : [plan, ...prev]));
+            updateProgress((prev) => [...runs.filter((r) => !prev.some((p) => p.id === r.id)), ...prev]);
+          },
+        },
+      });
+    }
+  }, [updateCustomPlans, updateProgress, toast]);
+
+  // Patches an existing custom plan. Pass resetProgress: true when the edit
+  // changes its books/days (day indices from before the edit no longer mean
+  // anything), which restarts any in-progress runs of it from day 1.
+  const updateCustomPlan = useCallback((planId, patch, { resetProgress = false } = {}) => {
+    updateCustomPlans((prev) => prev.map((p) => (p.id === planId ? { ...p, ...patch } : p)));
+    if (resetProgress) {
+      updateProgress((prev) => prev.map((p) => (
+        p.planId === planId
+          ? { ...p, completedDays: [], chaptersRead: {}, completedAt: null, startedAt: Date.now(), lastActivityAt: Date.now() }
+          : p
+      )));
+    }
+  }, [updateCustomPlans, updateProgress]);
+
+  // Plans from a backup file are added to what is here (nothing is removed).
+  const importReadingPlans = useCallback((incoming) => {
+    setState((prev) => ({ ...prev, ...mergeReadingPlans(prev, incoming) }));
+  }, []);
+
+  // Server wins over whatever's local at sign-in.
+  const mergeServerReadingProgress = useCallback((serverData) => {
+    if (!serverData || typeof serverData !== 'object' || Array.isArray(serverData)) {
+      console.warn('Reading plan pull: server returned unexpected data', serverData);
+      return;
+    }
+    const next = {
+      progress: Array.isArray(serverData.progress) ? serverData.progress : [],
+      customPlans: Array.isArray(serverData.customPlans) ? serverData.customPlans : [],
+      activity: Array.isArray(serverData.activity) ? serverData.activity : [],
+    };
+    // Temporary diagnostic — remove once cross-device sync is confirmed fixed.
+    console.log(
+      `Reading plans pulled from server: ${next.progress.length} in progress, ${next.customPlans.length} custom plan(s).`,
+      next,
+    );
+    skipNextSyncRef.current = true;
+    setState(next);
+  }, []);
+
+  // Fetches the server's copy at sign-in. Unlike the old inline version of
+  // this call, a failed GET is now visible (same error banner as a failed
+  // push) instead of silently leaving you on stale/empty local state — which
+  // looks identical to "you have no reading plans" with zero indication why.
+  const pullServerReadingProgress = useCallback(async () => {
+    const result = await getRemoteReadingProgress();
+    if (result.ok) {
+      mergeServerReadingProgress(result.data);
+    } else {
+      setSyncStatus('error');
+      setSyncError(formatSyncError(result));
+      console.error('Reading plan pull failed:', result.status, result.error);
+    }
+  }, [mergeServerReadingProgress]);
+
+  // Manual retry after a failed sync (surfaced next to the sync error).
+  const retryReadingPlanSync = useCallback(() => {
+    setSyncStatus('syncing');
+    saveRemoteReadingProgress(state).then((result) => {
+      if (result.ok) {
+        setSyncStatus('synced');
+        setSyncError('');
+      } else {
+        setSyncStatus('error');
+        setSyncError(formatSyncError(result));
+      }
+    });
+  }, [state]);
+
+  return {
+    readingPlansState: state,
+    importReadingPlans,
+    planProgress: state.progress,
+    customPlans,
+    readingActivity: state.activity,
+    readingPlanSyncStatus: syncStatus,
+    readingPlanSyncError: syncError,
+    retryReadingPlanSync,
+    startPlan,
+    toggleDay,
+    toggleChapterRead,
+    setPlanTranslation,
+    restartPlan,
+    removePlanProgress,
+    recalibratePace,
+    addCustomPlan,
+    removeCustomPlan,
+    updateCustomPlan,
+    mergeServerReadingProgress,
+    pullServerReadingProgress,
+  };
+}

src/hooks/useReadingPlans.test.js

@@ -0,0 +1,67 @@
+import { renderHook, act } from '@testing-library/react';
+import { vi, test, expect, beforeEach } from 'vitest';
+
+vi.mock('../syncService.js', () => ({
+  getRemoteReadingProgress: vi.fn(async () => ({ ok: true, data: {} })),
+  saveRemoteReadingProgress: vi.fn(async () => ({ ok: true })),
+}));
+
+import { useReadingPlans } from './useReadingPlans.js';
+
+beforeEach(() => { localStorage.clear(); });
+
+const start = (translation) => {
+  const hook = renderHook(() => useReadingPlans());
+  act(() => hook.result.current.startPlan('gospels-90', translation));
+  return hook;
+};
+const rec = (hook) => hook.result.current.planProgress[0];
+
+test('a started plan remembers its translation', () => {
+  const hook = start('ESV');
+  expect(rec(hook).translation).toBe('ESV');
+  act(() => hook.result.current.setPlanTranslation(rec(hook).id, 'NLT'));
+  expect(rec(hook).translation).toBe('NLT');
+});
+
+test('ticking every chapter of a day completes it, and unticking reopens it', () => {
+  const hook = start('BSB');
+  const id = rec(hook).id;
+  const keys = ['JHN.8', 'JHN.9'];
+  act(() => hook.result.current.toggleChapterRead(id, 11, 'JHN.8', keys, 90));
+  expect(rec(hook).completedDays).toEqual([]);
+  expect(rec(hook).chaptersRead[11]).toEqual(['JHN.8']);
+  act(() => hook.result.current.toggleChapterRead(id, 11, 'JHN.9', keys, 90));
+  expect(rec(hook).completedDays).toEqual([11]);
+  expect(hook.result.current.readingActivity.length).toBe(1); // streak extended
+  act(() => hook.result.current.toggleChapterRead(id, 11, 'JHN.9', keys, 90));
+  expect(rec(hook).completedDays).toEqual([]);
+});
+
+test('force=true never unticks a chapter that is already read', () => {
+  const hook = start('BSB');
+  const id = rec(hook).id;
+  act(() => hook.result.current.toggleChapterRead(id, 0, 'JHN.1', ['JHN.1', 'JHN.2'], 90, true));
+  act(() => hook.result.current.toggleChapterRead(id, 0, 'JHN.1', ['JHN.1', 'JHN.2'], 90, true));
+  expect(rec(hook).chaptersRead[0]).toEqual(['JHN.1']);
+});
+
+test('unmarking a whole day clears its chapter ticks', () => {
+  const hook = start('BSB');
+  const id = rec(hook).id;
+  act(() => hook.result.current.toggleDay(id, 3, 90));
+  expect(rec(hook).completedDays).toEqual([3]);
+  act(() => hook.result.current.toggleChapterRead(id, 3, 'JHN.4', ['JHN.4'], 90, true));
+  act(() => hook.result.current.toggleDay(id, 3, 90));
+  expect(rec(hook).completedDays).toEqual([]);
+  expect(rec(hook).chaptersRead[3]).toBeUndefined();
+});
+
+test('finishing the last day completes the plan', () => {
+  const hook = start('BSB');
+  const id = rec(hook).id;
+  act(() => { for (let d = 0; d < 90; d += 1) hook.result.current.toggleDay(id, d, 90); });
+  expect(rec(hook).completedAt).toBeTruthy();
+  act(() => hook.result.current.toggleDay(id, 5, 90));
+  expect(rec(hook).completedAt).toBeNull();
+});

src/hooks/useResizableWidth.js

@@ -0,0 +1,75 @@
+// A drag-to-resize width for a side panel (the Study stage's right column). The handle owns
+// pointer dragging, arrow keys and double-click reset; the width is remembered per device.
+import { useCallback, useRef, useState } from 'react';
+
+const STEP = 24;
+const BIG_STEP = 96;
+
+// containerRef: the element the panel sits at the right edge of (for measuring and clamping).
+export function useResizableWidth({ storageKey, min = 320, maxAbsolute = 760, fallback = 448, reserve = 600, containerRef }) {
+  const maxFor = () => {
+    const w = containerRef.current?.getBoundingClientRect().width ?? 0;
+    return w > 0 ? Math.max(min, Math.min(maxAbsolute, w - reserve)) : maxAbsolute;
+  };
+  const clamp = (n) => Math.round(Math.min(maxFor(), Math.max(min, n)));
+
+  const [width, setWidthState] = useState(() => {
+    try {
+      const n = Number(localStorage.getItem(storageKey));
+      return Number.isFinite(n) && n > 0 ? Math.min(maxAbsolute, Math.max(min, Math.round(n))) : null;
+    } catch { return null; }
+  });
+  const dragRef = useRef(null);
+
+  const commit = useCallback((n) => {
+    setWidthState(n);
+    try {
+      if (n == null) localStorage.removeItem(storageKey);
+      else localStorage.setItem(storageKey, String(n));
+    } catch { /* storage unavailable */ }
+  }, [storageKey]);
+
+  // Width of the panel right now (state, else measured from the panel element, else a default).
+  const current = (panelEl) => width ?? (panelEl?.getBoundingClientRect().width || fallback);
+
+  const handleProps = (panelRef) => ({
+    role: 'separator',
+    'aria-orientation': 'vertical',
+    'aria-label': 'Resize side panel',
+    'aria-valuemin': min,
+    'aria-valuemax': maxAbsolute,
+    'aria-valuenow': Math.round(current(panelRef.current)),
+    tabIndex: 0,
+    onPointerDown: (e) => {
+      if (e.button !== undefined && e.button !== 0) return;
+      e.currentTarget.setPointerCapture?.(e.pointerId);
+      dragRef.current = { id: e.pointerId };
+      document.body.style.userSelect = 'none';
+    },
+    onPointerMove: (e) => {
+      if (!dragRef.current) return;
+      const right = containerRef.current?.getBoundingClientRect().right ?? window.innerWidth;
+      const next = clamp(right - e.clientX);
+      dragRef.current.width = next;
+      containerRef.current?.style.setProperty('--study-right', `${next}px`); // smooth: no React render per move
+    },
+    onPointerUp: (e) => {
+      if (!dragRef.current) return;
+      e.currentTarget.releasePointerCapture?.(e.pointerId);
+      const done = dragRef.current.width;
+      dragRef.current = null;
+      document.body.style.userSelect = '';
+      if (done != null) commit(done);
+    },
+    onKeyDown: (e) => {
+      const step = e.shiftKey ? BIG_STEP : STEP;
+      if (e.key === 'ArrowLeft') { e.preventDefault(); commit(clamp(current(panelRef.current) + step)); }
+      else if (e.key === 'ArrowRight') { e.preventDefault(); commit(clamp(current(panelRef.current) - step)); }
+      else if (e.key === 'Home' || e.key === 'Escape') { e.preventDefault(); containerRef.current?.style.removeProperty('--study-right'); commit(null); }
+    },
+    onDoubleClick: () => { containerRef.current?.style.removeProperty('--study-right'); commit(null); },
+    title: 'Drag to resize · double-click to reset',
+  });
+
+  return { width, handleProps };
+}

src/hooks/useResizableWidth.test.js

@@ -0,0 +1,81 @@
+import { renderHook, act } from '@testing-library/react';
+import { vi, test, expect, beforeEach } from 'vitest';
+import { useResizableWidth } from './useResizableWidth.js';
+
+beforeEach(() => { localStorage.clear(); });
+
+// A container 1400px wide whose right edge is at x=1400, and a panel currently 448px wide.
+const setup = (opts = {}) => {
+  const style = { setProperty: vi.fn(), removeProperty: vi.fn() };
+  const containerRef = { current: { getBoundingClientRect: () => ({ right: 1400, width: 1400 }), style } };
+  const panelRef = { current: { getBoundingClientRect: () => ({ width: 448 }) } };
+  const hook = renderHook(() => useResizableWidth({ storageKey: 'w', containerRef, ...opts }));
+  const handle = () => hook.result.current.handleProps(panelRef);
+  return { hook, handle, style };
+};
+const target = { setPointerCapture: vi.fn(), releasePointerCapture: vi.fn() };
+const down = (h) => h.handle().onPointerDown({ button: 0, pointerId: 1, currentTarget: target });
+const move = (h, clientX) => h.handle().onPointerMove({ clientX });
+const up = (h) => h.handle().onPointerUp({ pointerId: 1, currentTarget: target });
+
+test('dragging sets the width from the pointer to the right edge, then remembers it', () => {
+  const h = setup();
+  act(() => { down(h); move(h, 900); });
+  expect(h.style.setProperty).toHaveBeenLastCalledWith('--study-right', '500px'); // 1400 - 900
+  expect(h.hook.result.current.width).toBeNull(); // no React render per pointer move
+  act(() => up(h));
+  expect(h.hook.result.current.width).toBe(500);
+  expect(localStorage.getItem('w')).toBe('500');
+});
+
+test('the width is kept between a minimum and a maximum that leaves room for the passage', () => {
+  const h = setup();
+  act(() => { down(h); move(h, 1350); }); // would be 50px
+  expect(h.style.setProperty).toHaveBeenLastCalledWith('--study-right', '320px');
+  act(() => { move(h, 100); }); // would be 1300px; the container leaves 1400 - 600 = 800, capped at 760
+  expect(h.style.setProperty).toHaveBeenLastCalledWith('--study-right', '760px');
+  act(() => up(h));
+  expect(h.hook.result.current.width).toBe(760);
+});
+
+test('a move without a press does nothing', () => {
+  const h = setup();
+  act(() => move(h, 900));
+  expect(h.style.setProperty).not.toHaveBeenCalled();
+});
+
+test('arrow keys resize from the current width; shift takes bigger steps', () => {
+  const h = setup();
+  act(() => h.handle().onKeyDown({ key: 'ArrowLeft', preventDefault() {} }));
+  expect(h.hook.result.current.width).toBe(472); // 448 + 24: wider
+  act(() => h.handle().onKeyDown({ key: 'ArrowRight', shiftKey: true, preventDefault() {} }));
+  expect(h.hook.result.current.width).toBe(376); // 472 - 96: narrower
+  expect(localStorage.getItem('w')).toBe('376');
+});
+
+test('Home, Escape and double-click go back to the default width', () => {
+  localStorage.setItem('w', '600');
+  const h = setup();
+  expect(h.hook.result.current.width).toBe(600);
+  act(() => h.handle().onKeyDown({ key: 'Home', preventDefault() {} }));
+  expect(h.hook.result.current.width).toBeNull();
+  expect(localStorage.getItem('w')).toBeNull();
+  expect(h.style.removeProperty).toHaveBeenCalledWith('--study-right');
+  act(() => h.handle().onKeyDown({ key: 'ArrowLeft', preventDefault() {} }));
+  act(() => h.handle().onDoubleClick());
+  expect(h.hook.result.current.width).toBeNull();
+});
+
+test('a remembered width is restored, kept within the limits, and junk is ignored', () => {
+  localStorage.setItem('w', '100');
+  expect(setup().hook.result.current.width).toBe(320);
+  localStorage.setItem('w', '5000');
+  expect(setup().hook.result.current.width).toBe(760);
+  localStorage.setItem('w', 'wide');
+  expect(setup().hook.result.current.width).toBeNull();
+});
+
+test('the handle describes itself for assistive technology', () => {
+  const props = setup().handle();
+  expect(props).toMatchObject({ role: 'separator', 'aria-orientation': 'vertical', 'aria-label': 'Resize side panel', tabIndex: 0, 'aria-valuenow': 448 });
+});

src/hooks/useShareLink.js

@@ -0,0 +1,48 @@
+// Read-only share link for the open project: status, enable, revoke, copy.
+import { useEffect, useState } from 'react';
+import { disableSharing, enableSharing, getShareStatus } from '../syncService.js';
+
+export function useShareLink(projectId) {
+  const [shareToken, setShareToken] = useState(null);
+  const [shareBusy, setShareBusy] = useState(false);
+  const [shareCopied, setShareCopied] = useState(false);
+
+  useEffect(() => {
+    setShareToken(null);
+    if (!projectId) return;
+    let active = true;
+    getShareStatus(projectId).then((result) => {
+      if (active && result.ok) setShareToken(result.data.shareToken);
+    });
+    return () => { active = false; };
+  }, [projectId]);
+
+  const shareUrl = shareToken
+    ? `${window.location.origin}${window.location.pathname}?share=${shareToken}`
+    : '';
+
+  const enable = async () => {
+    setShareBusy(true);
+    const result = await enableSharing(projectId);
+    setShareBusy(false);
+    if (result.ok) setShareToken(result.data.shareToken);
+  };
+
+  const revoke = async () => {
+    if (!window.confirm('Revoke this share link? Anyone using it will lose access immediately.')) return;
+    setShareBusy(true);
+    const result = await disableSharing(projectId);
+    setShareBusy(false);
+    if (result.ok) setShareToken(null);
+  };
+
+  const copy = () => {
+    if (!shareUrl) return;
+    navigator.clipboard.writeText(shareUrl).then(() => {
+      setShareCopied(true);
+      window.setTimeout(() => setShareCopied(false), 2000);
+    });
+  };
+
+  return { shareToken, shareUrl, shareBusy, shareCopied, enable, revoke, copy };
+}

src/hooks/useSharedView.js

@@ -0,0 +1,20 @@
+// A ?share=TOKEN URL shows a read-only view of someone else's project. No
+// login is needed, so this runs independently of auth.
+import { useEffect, useState } from 'react';
+import { getSharedProject } from '../syncService.js';
+
+export function useSharedView() {
+  const [token] = useState(() => new URLSearchParams(window.location.search).get('share'));
+  const [project, setProject] = useState(null);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (!token) return;
+    getSharedProject(token).then((result) => {
+      if (result.ok) setProject(result.data);
+      else setError(result.error ?? 'This share link is invalid or has been revoked.');
+    });
+  }, [token]);
+
+  return { token, project, error };
+}

src/hooks/useStudyResources.js

@@ -0,0 +1,80 @@
+// Commentary and interlinear text for the chapter of the selected chunk.
+// Each loads only while its section is expanded; results are cached for the visit.
+import { useEffect, useState } from 'react';
+
+const commentaryCache = {}; // "commentaryId/BOOK/chapter" -> data
+const interlinearCache = {}; // BOOK -> whole-book interlinear data
+
+// `commentarySource` / `setCommentarySource` may be passed in to share the choice with the rest of
+// the app (it's a synced preference); otherwise the hook keeps its own.
+export function useStudyResources({ project, selectedChunk, selectedChunkChapterIndex, collapsedSections, commentarySource: sharedSource, setCommentarySource: setSharedSource }) {
+  const [ownSource, setOwnSource] = useState('matthew-henry');
+  const commentarySource = sharedSource ?? ownSource;
+  const setCommentarySource = setSharedSource ?? setOwnSource;
+  const [commentaryData, setCommentaryData] = useState(null); // { content: [...] } for current chapter
+  const [commentaryLoading, setCommentaryLoading] = useState(false);
+  const [commentaryError, setCommentaryError] = useState('');
+  const [interlinearData, setInterlinearData] = useState(null);
+  const [interlinearLoading, setInterlinearLoading] = useState(false);
+  const [interlinearError, setInterlinearError] = useState('');
+
+  const loadInterlinearChapter = async (bookAbbrev, chapterNumber) => {
+    if (interlinearCache[bookAbbrev]) return interlinearCache[bookAbbrev];
+    const res = await fetch(`/interlinear/${bookAbbrev}.json`);
+    if (!res.ok) throw new Error('No interlinear data for this book.');
+    const data = await res.json();
+    interlinearCache[bookAbbrev] = data;
+    return data;
+  };
+
+  const loadCommentaryChapter = async (commentaryId, bookAbbrev, chapterNumber) => {
+    const cacheKey = `${commentaryId}/${bookAbbrev}/${chapterNumber}`;
+    if (commentaryCache[cacheKey]) return commentaryCache[cacheKey];
+    const res = await fetch(`https://bible.helloao.org/api/c/${commentaryId}/${bookAbbrev}/${chapterNumber}.json`);
+    const contentType = res.headers.get('content-type') || '';
+    if (!res.ok || !contentType.includes('json')) throw new Error(`No ${commentaryId} commentary for this chapter.`);
+    const data = await res.json();
+    commentaryCache[cacheKey] = data;
+    return data;
+  };
+
+  useEffect(() => {
+    if (collapsedSections.commentary) return;
+    if (selectedChunkChapterIndex < 0) return;
+    const chapter = project.chapters[selectedChunkChapterIndex];
+    setCommentaryLoading(true);
+    setCommentaryError('');
+    loadCommentaryChapter(commentarySource, chapter.bookAbbrev, chapter.chapter)
+      .then((data) => setCommentaryData(data))
+      .catch((err) => {
+        setCommentaryData(null);
+        setCommentaryError(err.message);
+      })
+      .finally(() => setCommentaryLoading(false));
+  }, [commentarySource, selectedChunk?.id, selectedChunkChapterIndex, collapsedSections.commentary]);
+
+  useEffect(() => {
+    if (collapsedSections.interlinear) return;
+    if (selectedChunkChapterIndex < 0) return;
+    const chapter = project.chapters[selectedChunkChapterIndex];
+    setInterlinearLoading(true);
+    setInterlinearError('');
+    loadInterlinearChapter(chapter.bookAbbrev, chapter.chapter)
+      .then((data) => setInterlinearData(data?.[String(chapter.chapter)] ?? null))
+      .catch((err) => {
+        setInterlinearData(null);
+        setInterlinearError(err.message);
+      })
+      .finally(() => setInterlinearLoading(false));
+  }, [selectedChunk?.id, selectedChunkChapterIndex, collapsedSections.interlinear]);
+
+  return {
+    commentarySource, setCommentarySource,
+    commentaryData,
+    commentaryLoading,
+    commentaryError,
+    interlinearData,
+    interlinearLoading,
+    interlinearError,
+  };
+}

src/hooks/useVerseStudy.js

@@ -0,0 +1,85 @@
+// Free study data from HelloAO: public-domain commentaries and the Theographic
+// people/places/events dataset. Both are keyed by book + chapter, so results are
+// cached per chapter for the rest of the visit.
+import { useEffect, useState } from 'react';
+import { renderVerseContent } from '../utils/bibleUtils.jsx';
+
+const API = 'https://bible.helloao.org/api';
+
+export const COMMENTARIES = [
+  { id: 'matthew-henry', name: 'Matthew Henry', credit: 'Matthew Henry Bible Commentary (public domain).' },
+  { id: 'john-gill', name: 'John Gill', credit: 'John Gill Bible Commentary (public domain).' },
+  { id: 'jamieson-fausset-brown', name: 'Jamieson-Fausset-Brown', credit: 'Jamieson-Fausset-Brown Bible Commentary (public domain).' },
+  { id: 'tyndale', name: 'Tyndale Study Notes', credit: 'Tyndale Open Study Notes © Tyndale House Foundation, licensed CC BY-SA 4.0.' },
+  { id: 'adam-clarke', name: 'Adam Clarke', credit: 'Adam Clarke Bible Commentary (public domain).' },
+  { id: 'john-calvin', name: 'John Calvin', credit: "John Calvin's Commentaries (public domain)." },
+  { id: 'keil-delitzsch', name: 'Keil & Delitzsch (OT)', credit: 'Keil & Delitzsch Old Testament Commentary (public domain).' },
+];
+
+const commentaryCache = new Map(); // "id/BOOK/ch" -> Promise<entries | null>
+const theographicCache = new Map(); // "BOOK/ch" -> Promise<{people, places, events} | null>
+const personCache = new Map(); // id -> Promise<person | null>
+
+const getJson = (url) => fetch(url).then((r) => (r.ok ? r.json() : null)).catch(() => null);
+
+// Resolves to [{ number, text }] sorted by verse, or null when the commentary
+// doesn't cover that book/chapter.
+export function loadCommentary(id, book, chapter) {
+  const key = `${id}/${book}/${chapter}`;
+  if (!commentaryCache.has(key)) {
+    commentaryCache.set(key, getJson(`${API}/c/${id}/${book}/${chapter}.json`).then((data) => {
+      const items = data?.chapter?.content;
+      if (!Array.isArray(items)) return null;
+      return items
+        .filter((it) => it?.type === 'verse')
+        .map((it) => ({ number: it.number, text: renderVerseContent(it.content).replace(/[ \t]+\n/g, '\n').trim() }))
+        .filter((it) => it.text)
+        .sort((a, b) => a.number - b.number);
+    }));
+  }
+  return commentaryCache.get(key);
+}
+
+export function loadTheographic(book, chapter) {
+  const key = `${book}/${chapter}`;
+  if (!theographicCache.has(key)) {
+    theographicCache.set(key, getJson(`${API}/d/theographic/${book}/${chapter}.json`).then((data) => (
+      data?.chapter ? { people: data.chapter.people ?? [], places: data.chapter.places ?? [], events: data.chapter.events ?? [] } : null
+    )));
+  }
+  return theographicCache.get(key);
+}
+
+export function loadPerson(id) {
+  if (!personCache.has(id)) {
+    personCache.set(id, getJson(`${API}/d/theographic/people/${id}.json`).then((d) => d?.person ?? null));
+  }
+  return personCache.get(id);
+}
+
+// For verse N, the commentary entry that starts at N, or otherwise the closest
+// earlier one (several commentaries write on whole passages, not each verse).
+export function pickCommentaryEntry(entries, verse) {
+  if (!entries?.length) return null;
+  let best = null;
+  for (const e of entries) {
+    if (e.number <= verse) best = e;
+    else break;
+  }
+  return best;
+}
+
+// Small state wrapper: { status: 'loading' | 'ready' | 'empty', data }.
+export function useAsync(loader, deps) {
+  const [state, setState] = useState({ status: 'loading', data: null });
+  useEffect(() => {
+    let active = true;
+    setState({ status: 'loading', data: null });
+    loader().then((data) => {
+      if (active) setState({ status: data ? 'ready' : 'empty', data });
+    });
+    return () => { active = false; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+  return state;
+}

src/hooks/useWordStudy.js

@@ -0,0 +1,379 @@
+// Greek/Hebrew word studies on a chunk: word entries, Strong's lookups, and the
+// "suggest words from this passage" picker.
+import { useState } from 'react';
+import {
+  NT_BOOK_NUMBER,
+  chunkSpansNextChapter,
+  extractPartOfSpeech,
+  getChunkVerseEntries,
+  makeId,
+} from '../utils/bibleUtils.jsx';
+import {
+  ENGLISH_STOP_WORDS,
+  GREEK_FUNCTION_WORDS,
+  buildGreekDefinitionHtml,
+  fetchBollsDefinition,
+  loadGreekDict,
+  loadHebrewDict,
+  loadNtConcordance,
+  loadNtGloss,
+  shortHebrewGloss,
+} from '../utils/wordStudy.js';
+
+// notify(message, ms) shows a short status message on the study page.
+export function useWordStudy({ project, allChunks, updateProject, notify }) {
+  const [suggestingGreekForChunkId, setSuggestingGreekForChunkId] = useState(null);
+  const [suggestingHebrewForChunkId, setSuggestingHebrewForChunkId] = useState(null);
+  // suggestModal: null | { chunkId, words: [{ strongKey, lexeme, translit, def }] }
+  const [suggestModal, setSuggestModal] = useState(null);
+  const [suggestSelection, setSuggestSelection] = useState(new Set());
+
+  const updateChunkWord = (chunkId, wordId, patch) => {
+    updateProject((current) => ({
+      ...current,
+      chapters: current.chapters.map((ch) => ({
+        ...ch,
+        chunks: ch.chunks.map((chunk) => {
+          if (chunk.id !== chunkId) return chunk;
+          return {
+            ...chunk,
+            greekWords: chunk.greekWords.map((word) =>
+              word.id === wordId ? { ...word, ...patch } : word,
+            ),
+          };
+        }),
+      })),
+    }));
+  };
+
+  // Adds a blank word entry and returns its id (so the UI can open it for editing).
+  const addGreekWord = (chunkId) => {
+    const newWord = {
+      id: makeId(),
+      query: '',
+      strongNumber: '',
+      englishGloss: '',
+      lexeme: '',
+      transliteration: '',
+      partOfSpeech: '',
+      shortDefinition: '',
+      definitionHtml: '',
+      loading: false,
+    };
+    updateProject((current) => ({
+      ...current,
+      chapters: current.chapters.map((ch) => ({
+        ...ch,
+        chunks: ch.chunks.map((chunk) =>
+          chunk.id === chunkId
+            ? { ...chunk, greekWords: [...chunk.greekWords, newWord] }
+            : chunk,
+        ),
+      })),
+    }));
+    return newWord.id;
+  };
+
+  // Adds a fully filled-in entry for an original word picked from the interlinear
+  // (Strong's number, lexeme, transliteration and gloss come with the click).
+  const addWordFromInterlinear = async (chunkId, w) => {
+    const chunk = allChunks.find((c) => c.id === chunkId);
+    const key = String(w?.s ?? '').toUpperCase();
+    if (!chunk || !key) return null;
+    if (chunk.greekWords.some((x) => (x.strongNumber || '').toUpperCase() === key)) {
+      notify('That word is already in this chunk.', 1800);
+      return chunk.greekWords.find((x) => (x.strongNumber || '').toUpperCase() === key).id;
+    }
+    let entry = null;
+    try { entry = (key.startsWith('H') ? await loadHebrewDict() : await loadGreekDict())[key] ?? null; } catch { /* dictionary unavailable — keep what the click gave us */ }
+    const newWord = {
+      id: makeId(),
+      query: key,
+      strongNumber: key,
+      englishGloss: w.g || '',
+      lexeme: w.o || entry?.lemma || '',
+      transliteration: w.t || entry?.translit || entry?.xlit || '',
+      partOfSpeech: '',
+      shortDefinition: entry?.kjv_def || w.g || '',
+      definitionHtml: entry ? buildGreekDefinitionHtml(key, entry) : '',
+      loading: false,
+    };
+    updateProject((current) => ({
+      ...current,
+      chapters: current.chapters.map((ch) => ({
+        ...ch,
+        chunks: ch.chunks.map((c) => (c.id === chunkId ? { ...c, greekWords: [...c.greekWords, newWord] } : c)),
+      })),
+    }));
+    notify(`Added ${newWord.lexeme || key} to word study.`, 1800);
+    return newWord.id;
+  };
+
+  const removeGreekWord = (chunkId, wordId) => {
+    updateProject((current) => ({
+      ...current,
+      chapters: current.chapters.map((ch) => ({
+        ...ch,
+        chunks: ch.chunks.map((chunk) =>
+          chunk.id === chunkId
+            ? { ...chunk, greekWords: chunk.greekWords.filter((w) => w.id !== wordId) }
+            : chunk,
+        ),
+      })),
+    }));
+  };
+
+  const suggestGreekWordsForChunk = async (chunkId) => {
+    const chunk = allChunks.find((c) => c.id === chunkId);
+    const chapterIndex = project?.chapters.findIndex((ch) =>
+      ch.chunks.some((c) => c.id === chunkId)
+    ) ?? -1;
+    const chapter = chapterIndex >= 0 ? project.chapters[chapterIndex] : null;
+    if (!chunk || !chapter) return;
+    if (!NT_BOOK_NUMBER[chapter.bookAbbrev]) {
+      notify('Auto-suggest only works for New Testament books.', 2500);
+      return;
+    }
+    setSuggestingGreekForChunkId(chunkId);
+    try {
+      const [concordance, dict, gloss] = await Promise.all([loadNtConcordance(), loadGreekDict(), loadNtGloss()]);
+      const bookData = concordance[chapter.bookAbbrev] ?? {};
+      const chapterData = bookData[chapter.chapter] ?? {};
+      const nextChapterData = chunkSpansNextChapter(project, chapterIndex, chunk)
+        ? bookData[project.chapters[chapterIndex + 1].chapter] ?? {}
+        : {};
+
+      const strongsInRange = new Set();
+      for (let v = chunk.startVerse; v <= chunk.endVerse; v++) {
+        for (const s of chapterData[String(v)] ?? []) strongsInRange.add(s);
+      }
+      if (chunkSpansNextChapter(project, chapterIndex, chunk)) {
+        for (let v = 1; v <= chunk.spilloverEndVerse; v++) {
+          for (const s of nextChapterData[String(v)] ?? []) strongsInRange.add(s);
+        }
+      }
+
+      if (strongsInRange.size === 0) {
+        notify("No Strong's data found for this passage.", 3000);
+        return;
+      }
+
+      const existingNumbers = new Set(
+        chunk.greekWords.map((w) => w.strongNumber.toUpperCase()).filter(Boolean)
+      );
+
+      const modalWords = [];
+      for (const strongKey of strongsInRange) {
+        if (existingNumbers.has(strongKey)) continue;
+        const entry = dict[strongKey];
+        modalWords.push({
+          strongKey,
+          lexeme: entry?.lemma ?? '',
+          translit: entry?.translit ?? '',
+          def: gloss[strongKey] ?? entry?.kjv_def ?? 'No definition found.',
+          entry,
+        });
+      }
+
+      if (modalWords.length === 0) {
+        notify('All words from this passage are already added.', 2000);
+        return;
+      }
+
+      // Pre-select content words; pre-uncheck known function words
+      const preSelected = new Set(
+        modalWords
+          .filter((w) => !GREEK_FUNCTION_WORDS.has(w.strongKey))
+          .map((w) => w.strongKey)
+      );
+      setSuggestModal({
+        chunkId,
+        language: 'greek',
+        helperText: "Content words are pre-checked. Uncheck any you don't need.",
+        words: modalWords,
+      });
+      setSuggestSelection(preSelected);
+    } catch (err) {
+      notify(`Suggest failed: ${err.message}`, 3000);
+    } finally {
+      setSuggestingGreekForChunkId(null);
+    }
+  };
+
+  const suggestHebrewWordsForChunk = async (chunkId) => {
+    const chunk = allChunks.find((c) => c.id === chunkId);
+    const chapterIndex = project?.chapters.findIndex((ch) =>
+      ch.chunks.some((c) => c.id === chunkId)
+    ) ?? -1;
+    const chapter = chapterIndex >= 0 ? project.chapters[chapterIndex] : null;
+    if (!chunk || !chapter) return;
+    if (NT_BOOK_NUMBER[chapter.bookAbbrev]) {
+      notify('Hebrew suggestions are for Old Testament passages.', 2500);
+      return;
+    }
+
+    setSuggestingHebrewForChunkId(chunkId);
+    try {
+      const dict = await loadHebrewDict();
+      const versesInChunk = getChunkVerseEntries(project, chapterIndex, chunk)
+        .map((v) => v.text)
+        .join(' ')
+        .toLowerCase();
+
+      const candidateWords = Array.from(new Set(
+        versesInChunk
+          .replace(/[^a-z\s]/g, ' ')
+          .split(/\s+/)
+          .map((w) => w.trim())
+          .filter((w) => w.length >= 4 && !ENGLISH_STOP_WORDS.has(w)),
+      ));
+
+      if (candidateWords.length === 0) {
+        notify('No Hebrew suggestion candidates found in this passage.', 2500);
+        return;
+      }
+
+      const existingNumbers = new Set(
+        chunk.greekWords.map((w) => (w.strongNumber || '').toUpperCase()).filter(Boolean)
+      );
+
+      const seen = new Set();
+      const modalWords = [];
+      const entries = Object.entries(dict);
+
+      for (const token of candidateWords) {
+        const match = entries.find(([, entry]) => {
+          const defs = `${entry.kjv_def || ''} ${entry.strongs_def || ''}`.toLowerCase();
+          return defs.split(/[,;()\s]+/).includes(token);
+        });
+        if (!match) continue;
+        const [strongKey, entry] = match;
+        if (!/^H\d+$/i.test(strongKey)) continue;
+        const normalized = strongKey.toUpperCase();
+        if (existingNumbers.has(normalized) || seen.has(normalized)) continue;
+        seen.add(normalized);
+        modalWords.push({
+          strongKey: normalized,
+          lexeme: entry?.lemma ?? '',
+          translit: entry?.xlit ?? '',
+          def: shortHebrewGloss(entry?.kjv_def) || 'No definition found.',
+          fullDef: entry?.kjv_def ?? '',
+          entry,
+        });
+        if (modalWords.length >= 20) break;
+      }
+
+      if (modalWords.length === 0) {
+        notify('No Hebrew suggestions found from this passage text.', 2500);
+        return;
+      }
+
+      setSuggestModal({
+        chunkId,
+        language: 'hebrew',
+        helperText: 'Heuristic matches from passage text; uncheck anything not useful.',
+        words: modalWords,
+      });
+      setSuggestSelection(new Set(modalWords.map((w) => w.strongKey)));
+    } catch (err) {
+      notify(`Hebrew suggest failed: ${err.message}`, 3000);
+    } finally {
+      setSuggestingHebrewForChunkId(null);
+    }
+  };
+
+  const confirmSuggestWords = () => {
+    if (!suggestModal) return;
+    const { chunkId, words } = suggestModal;
+    const newWords = words
+      .filter((w) => suggestSelection.has(w.strongKey))
+      .map((w) => ({
+        id: makeId(),
+        query: w.strongKey,
+        strongNumber: w.strongKey,
+        englishGloss: w.def,
+        lexeme: w.lexeme,
+        transliteration: w.translit,
+        partOfSpeech: '',
+        shortDefinition: w.fullDef || w.def,
+        definitionHtml: w.entry ? buildGreekDefinitionHtml(w.strongKey, w.entry) : '',
+        loading: false,
+      }));
+    if (newWords.length > 0) {
+      updateProject((current) => ({
+        ...current,
+        chapters: current.chapters.map((ch) => ({
+          ...ch,
+          chunks: ch.chunks.map((c) =>
+            c.id === chunkId ? { ...c, greekWords: [...c.greekWords, ...newWords] } : c
+          ),
+        })),
+      }));
+      const label = suggestModal?.language === 'hebrew' ? 'Hebrew' : 'Greek';
+      notify(`Added ${newWords.length} ${label} word${newWords.length > 1 ? 's' : ''}.`, 2000);
+    }
+    setSuggestModal(null);
+    setSuggestSelection(new Set());
+  };
+
+  const lookupWord = async (chunkId, wordId, language = 'greek') => {
+    const chunk = allChunks.find((c) => c.id === chunkId);
+    const word = chunk?.greekWords.find((w) => w.id === wordId);
+    if (!word || !word.query.trim()) return;
+    updateChunkWord(chunkId, wordId, { loading: true });
+    try {
+      // Normalize bare numbers based on selected lookup language.
+      const raw = word.query.trim();
+      const inferredPrefix = language === 'hebrew' ? 'H' : 'G';
+      const normalized = /^\d+$/.test(raw)
+        ? `${inferredPrefix}${raw}`
+        : /^[gGhH]\d+$/.test(raw)
+          ? raw.toUpperCase()
+          : raw;
+
+      const [definitions, gloss] = await Promise.all([
+        fetchBollsDefinition(normalized),
+        loadNtGloss().catch(() => ({})),
+      ]);
+      if (!definitions || definitions.length === 0) {
+        updateChunkWord(chunkId, wordId, {
+          strongNumber: '',
+          shortDefinition: 'No definition found.',
+          definitionHtml: '',
+        });
+        return;
+      }
+      const first = definitions[0];
+      const strongKey = (first.topic || normalized).toUpperCase();
+      const extractedPartOfSpeech = extractPartOfSpeech(first.definition || '');
+      updateChunkWord(chunkId, wordId, {
+        strongNumber: first.topic || normalized,
+        englishGloss: gloss[strongKey] || first.short_definition || '',
+        lexeme: first.lexeme || '',
+        transliteration: first.transliteration || '',
+        partOfSpeech: extractedPartOfSpeech || word.partOfSpeech || '',
+        shortDefinition: first.short_definition || '',
+        definitionHtml: first.definition || '',
+      });
+    } catch {
+      updateChunkWord(chunkId, wordId, { shortDefinition: 'Lookup failed.' });
+    } finally {
+      updateChunkWord(chunkId, wordId, { loading: false });
+    }
+  };
+
+  return {
+    suggestingGreekForChunkId,
+    suggestingHebrewForChunkId,
+    suggestModal, setSuggestModal,
+    suggestSelection, setSuggestSelection,
+    updateChunkWord,
+    addGreekWord,
+    addWordFromInterlinear,
+    removeGreekWord,
+    lookupWord,
+    suggestGreekWordsForChunk,
+    suggestHebrewWordsForChunk,
+    confirmSuggestWords,
+  };
+}

src/index.css

@@ -15,7 +15,7 @@ body,
 body {
   margin: 0;
   font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  background: #f8fafc;
+  background: #faf7f0; /* the default (paper) theme; replaced by the chosen theme at runtime */
   color: #0f172a;
 }
 
@@ -30,12 +30,11 @@ select {
   font: inherit;
 }
 
-/* When installed as a PWA, push header content below the status bar */
-@media all and (display-mode: standalone) {
-  header {
+/* Top bars leave room for the status bar / notch when the app is installed or full-screen
+   (env() is 0 in an ordinary browser tab). */
+.safe-top {
   padding-top: env(safe-area-inset-top, 0px);
 }
-}
 
 .scrollbar-thin::-webkit-scrollbar {
   width: 9px;
@@ -50,3 +49,36 @@ select {
 .scrollbar-thin::-webkit-scrollbar-track {
   background: rgba(148, 163, 184, 0.12);
 }
+
+/* A clear ring wherever keyboard focus lands (mouse clicks don't show it). */
+:where(button, a, summary, [role='button'], [role='tab'], [role='option'], input, select, textarea):focus-visible {
+  outline: 2px solid var(--r-accent, #a84e27);
+  outline-offset: 2px;
+}
+
+/* "Skip to content" appears only when it's tabbed to. */
+.skip-link {
+  position: absolute;
+  left: 0.75rem;
+  top: -4rem;
+  z-index: 100;
+  padding: 0.5rem 0.9rem;
+  border-radius: 9999px;
+  background: var(--r-text, #2b2620);
+  color: var(--r-bg, #faf7f0);
+  font-size: 0.875rem;
+}
+.skip-link:focus {
+  top: 0.75rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}

src/pages/AdminPage.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useApp } from '../context/AppContext.js';
+import PageShell from '../components/study/PageShell.jsx';
 import { buildExportHtml } from '../utils/bibleUtils.jsx';
 import {
   adminListUsers,
@@ -11,7 +12,7 @@ import {
 } from '../syncService.js';
 
 export default function AdminPage() {
-  const { authUser, authStatus, goHome } = useApp();
+  const { authUser, goHome } = useApp();
   const [adminTab, setAdminTab] = useState('users'); // 'users' | 'projects'
   const [adminUsers, setAdminUsers] = useState([]);
   const [adminProjects, setAdminProjects] = useState([]);
@@ -67,46 +68,27 @@ export default function AdminPage() {
   };
 
   return (
-    <div className="min-h-screen bg-slate-50 text-slate-900">
-      <header className="border-b border-slate-200 bg-slate-900 text-white shadow-sm">
-        <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-4 px-4 py-5 sm:px-6 lg:px-8">
-          <div>
-            <p className="text-sm uppercase tracking-[0.24em] text-slate-300">Bible Study Project</p>
-            <h1 className="mt-2 text-2xl font-semibold">🛡 Admin</h1>
-          </div>
-          <div className="flex items-center gap-3">
-            <button
-              type="button"
-              onClick={goHome}
-              className="rounded-xl border border-slate-500 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-700"
-            >
-              ← Back
-            </button>
-            {authStatus}
-          </div>
-        </div>
-      </header>
-
-      <main className="mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8 space-y-6">
+    <PageShell title="Admin" onBack={goHome} maxWidth="max-w-5xl">
+      <main className="mx-auto max-w-5xl space-y-5 px-4 py-6">
         <div className="flex gap-2">
           <button type="button" onClick={() => setAdminTab('users')}
-            className={`rounded-lg px-4 py-2 text-sm font-semibold transition ${adminTab === 'users' ? 'bg-slate-900 text-white' : 'border border-slate-300 bg-white text-slate-600 hover:bg-slate-50'}`}>
+            className={`rounded-full px-4 py-1.5 text-sm transition ${adminTab === 'users' ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'border border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`}>
             Users ({adminUsers.length})
           </button>
           <button type="button" onClick={() => setAdminTab('projects')}
-            className={`rounded-lg px-4 py-2 text-sm font-semibold transition ${adminTab === 'projects' ? 'bg-slate-900 text-white' : 'border border-slate-300 bg-white text-slate-600 hover:bg-slate-50'}`}>
+            className={`rounded-full px-4 py-1.5 text-sm transition ${adminTab === 'projects' ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'border border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`}>
             Projects ({adminProjects.length})
           </button>
         </div>
 
-        {adminLoading && <p className="text-sm text-slate-500">Loading…</p>}
-        {adminError && <p className="text-sm text-rose-600">{adminError}</p>}
+        {adminLoading && <p className="text-sm text-[var(--r-sub)]">Loading…</p>}
+        {adminError && <p className="text-sm text-[var(--r-danger,#b42318)]">{adminError}</p>}
 
         {!adminLoading && !adminError && adminTab === 'users' && (
-          <div className="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-panel">
+          <div className="overflow-hidden rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)]">
             <div className="overflow-x-auto">
             <table className="w-full min-w-[560px] text-sm">
-              <thead className="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
+              <thead className="bg-[var(--r-bg)] text-left text-xs font-medium uppercase tracking-wide text-[var(--r-sub)]">
                 <tr>
                   <th className="px-4 py-3">Email</th>
                   <th className="px-4 py-3">Joined</th>
@@ -117,22 +99,22 @@ export default function AdminPage() {
               </thead>
               <tbody>
                 {adminUsers.map((u) => (
-                  <tr key={u.id} className="border-t border-slate-100">
-                    <td className="px-4 py-3 font-medium text-slate-800">
-                      {u.email}{u.id === authUser.id && <span className="ml-2 text-xs font-normal text-slate-400">(you)</span>}
+                  <tr key={u.id} className="border-t border-[var(--r-line)]">
+                    <td className="px-4 py-3 font-medium text-[var(--r-text)]">
+                      {u.email}{u.id === authUser.id && <span className="ml-2 text-xs font-normal text-[var(--r-sub)]">(you)</span>}
                     </td>
-                    <td className="px-4 py-3 text-slate-500">{new Date(u.createdAt).toLocaleDateString()}</td>
-                    <td className="px-4 py-3 text-slate-500">{u.totpEnabled ? '✓' : '—'}</td>
-                    <td className="px-4 py-3 text-slate-500">{u.projectCount}</td>
+                    <td className="px-4 py-3 text-[var(--r-sub)]">{new Date(u.createdAt).toLocaleDateString()}</td>
+                    <td className="px-4 py-3 text-[var(--r-sub)]">{u.totpEnabled ? '✓' : '—'}</td>
+                    <td className="px-4 py-3 text-[var(--r-sub)]">{u.projectCount}</td>
                     <td className="px-4 py-3 text-right">
                       {u.id !== authUser.id && (
                         <div className="flex justify-end gap-2">
                           <button type="button" onClick={() => handleResetPasswordAdmin(u.id, u.email)}
-                            className="rounded-lg border border-slate-300 px-3 py-1 text-xs font-semibold text-slate-600 hover:bg-slate-50">
+                            className="rounded-lg border border-[var(--r-line)] px-3 py-1 text-xs hover:bg-black/5">
                             Reset Password
                           </button>
                           <button type="button" onClick={() => handleDeleteUserAdmin(u.id, u.email)}
-                            className="rounded-lg border border-rose-200 px-3 py-1 text-xs font-semibold text-rose-600 hover:bg-rose-50">
+                            className="rounded-lg border border-[var(--r-line)] px-3 py-1 text-xs text-[var(--r-danger,#b42318)] hover:bg-black/5">
                             Delete
                           </button>
                         </div>
@@ -147,10 +129,10 @@ export default function AdminPage() {
         )}
 
         {!adminLoading && !adminError && adminTab === 'projects' && (
-          <div className="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-panel">
+          <div className="overflow-hidden rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)]">
             <div className="overflow-x-auto">
             <table className="w-full min-w-[640px] text-sm">
-              <thead className="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
+              <thead className="bg-[var(--r-bg)] text-left text-xs font-medium uppercase tracking-wide text-[var(--r-sub)]">
                 <tr>
                   <th className="px-4 py-3">Title</th>
                   <th className="px-4 py-3">Owner</th>
@@ -162,22 +144,22 @@ export default function AdminPage() {
               </thead>
               <tbody>
                 {adminProjects.map((p) => (
-                  <tr key={p.id} className="border-t border-slate-100">
-                    <td className="px-4 py-3 font-medium text-slate-800">{p.title}</td>
-                    <td className="px-4 py-3 text-slate-500">
-                      {p.ownerEmail ?? <span className="italic text-slate-400">orphaned</span>}
+                  <tr key={p.id} className="border-t border-[var(--r-line)]">
+                    <td className="px-4 py-3 font-medium text-[var(--r-text)]">{p.title}</td>
+                    <td className="px-4 py-3 text-[var(--r-sub)]">
+                      {p.ownerEmail ?? <span className="italic text-[var(--r-sub)]">orphaned</span>}
                     </td>
-                    <td className="px-4 py-3 text-slate-500">{p.chapterSummary}</td>
-                    <td className="px-4 py-3 text-slate-500">{new Date(p.lastEdited).toLocaleDateString()}</td>
-                    <td className="px-4 py-3 text-slate-500">{p.shareToken ? '🔗' : '—'}</td>
+                    <td className="px-4 py-3 text-[var(--r-sub)]">{p.chapterSummary}</td>
+                    <td className="px-4 py-3 text-[var(--r-sub)]">{new Date(p.lastEdited).toLocaleDateString()}</td>
+                    <td className="px-4 py-3 text-[var(--r-sub)]">{p.shareToken ? '🔗' : '—'}</td>
                     <td className="px-4 py-3 text-right">
                       <div className="flex justify-end gap-2">
                         <button type="button" onClick={() => handleViewProjectAdmin(p.id)}
-                          className="rounded-lg border border-slate-300 px-3 py-1 text-xs font-semibold text-slate-600 hover:bg-slate-50">
+                          className="rounded-lg border border-[var(--r-line)] px-3 py-1 text-xs hover:bg-black/5">
                           View
                         </button>
                         <button type="button" onClick={() => handleDeleteProjectAdmin(p.id, p.title)}
-                          className="rounded-lg border border-rose-200 px-3 py-1 text-xs font-semibold text-rose-600 hover:bg-rose-50">
+                          className="rounded-lg border border-[var(--r-line)] px-3 py-1 text-xs text-[var(--r-danger,#b42318)] hover:bg-black/5">
                           Delete
                         </button>
                       </div>
@@ -193,11 +175,11 @@ export default function AdminPage() {
 
       {adminViewProject && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={() => setAdminViewProject(null)}>
-          <div className="h-full w-full max-w-4xl overflow-hidden rounded-2xl bg-white shadow-2xl" onClick={(e) => e.stopPropagation()}>
-            <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3">
-              <p className="text-sm font-semibold text-slate-700">{adminViewProject.title}</p>
+          <div className="h-full w-full max-w-4xl overflow-hidden rounded-2xl bg-[var(--r-bar)] shadow-2xl" onClick={(e) => e.stopPropagation()}>
+            <div className="flex items-center justify-between border-b border-[var(--r-line)] px-4 py-3">
+              <p className="text-sm font-medium text-[var(--r-text)]">{adminViewProject.title}</p>
               <button type="button" onClick={() => setAdminViewProject(null)}
-                className="rounded-lg border border-slate-300 px-3 py-1 text-xs text-slate-600 hover:bg-slate-50">
+                className="rounded-lg border border-[var(--r-line)] px-3 py-1 text-xs hover:bg-black/5">
                 Close
               </button>
             </div>
@@ -213,22 +195,22 @@ export default function AdminPage() {
 
       {adminResetResult && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-          <div className="w-full max-w-sm rounded-2xl bg-white p-6 shadow-2xl">
-            <h3 className="text-sm font-semibold text-slate-900">Password reset</h3>
-            <p className="mt-1 text-xs text-slate-500">
-              Relay this to <span className="font-medium text-slate-700">{adminResetResult.email}</span> yourself
+          <div className="w-full max-w-sm rounded-2xl bg-[var(--r-bar)] p-6 shadow-2xl">
+            <h3 className="text-sm font-medium text-[var(--r-text)]">Password reset</h3>
+            <p className="mt-1 text-xs text-[var(--r-sub)]">
+              Relay this to <span className="font-medium text-[var(--r-text)]">{adminResetResult.email}</span> yourself
               (text, call, in person) — it won't be shown again. They're signed out everywhere until they log in with it.
             </p>
-            <p className="mt-4 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-center font-mono text-lg tracking-wider text-amber-800">
+            <p className="mt-4 rounded-xl border border-[var(--r-accent)] bg-[var(--r-bg)] px-3 py-2 text-center font-mono text-lg tracking-wider text-[var(--r-accent)]">
               {adminResetResult.temporaryPassword}
             </p>
             <button type="button" onClick={() => setAdminResetResult(null)}
-              className="mt-4 w-full rounded-md bg-sky-500 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-sky-400">
+              className="mt-4 w-full rounded-full bg-[var(--r-accent)] px-5 py-2 text-sm font-medium text-[var(--r-on)] transition hover:opacity-90">
               Done
             </button>
           </div>
         </div>
       )}
-    </div>
+    </PageShell>
   );
 }

src/pages/AuthPage.jsx

@@ -1,9 +1,11 @@
 import { useState } from 'react';
 import { useApp } from '../context/AppContext.js';
+import { themeVars } from '../components/reader/readerThemes.js';
 import { loginUser, registerUser, verifyMfaLogin, logoutUser } from '../syncService.js';
 
 export default function AuthPage() {
-  const { signIn } = useApp();
+  const { signIn, readerTheme } = useApp();
+  const shell = { style: themeVars(readerTheme) };
   const [authMode, setAuthMode] = useState('login'); // 'login' | 'register'
   const [authForm, setAuthForm] = useState({ email: '', password: '' });
   const [authError, setAuthError] = useState('');
@@ -49,11 +51,11 @@ export default function AuthPage() {
 
   if (authMfaPending) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-slate-900 px-4">
-        <div className="w-full max-w-sm rounded-3xl border border-white/10 bg-white p-8 shadow-panel">
-          <p className="text-sm uppercase tracking-[0.24em] text-slate-400">Bible Study Project</p>
-          <h1 className="mt-2 text-xl font-semibold text-slate-900">Two-factor verification</h1>
-          <p className="mt-2 text-sm text-slate-500">
+      <div {...shell} className="flex min-h-dvh items-center justify-center bg-[var(--r-bg)] px-4 text-[var(--r-text)]">
+        <div className="w-full max-w-sm rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-8">
+          <p className="text-sm uppercase tracking-[0.24em] text-[var(--r-sub)]">Bible Study Project</p>
+          <h1 className="mt-2 text-xl font-medium text-[var(--r-text)]">Two-factor verification</h1>
+          <p className="mt-2 text-sm text-[var(--r-sub)]">
             {authMfaUseBackup
               ? 'Enter one of your saved backup codes.'
               : 'Enter the 6-digit code from your authenticator app.'}
@@ -67,13 +69,13 @@ export default function AuthPage() {
               placeholder={authMfaUseBackup ? 'xxxxxxxxxx' : '123456'}
               value={authMfaCode}
               onChange={(e) => setAuthMfaCode(e.target.value)}
-              className="block w-full rounded-xl border border-slate-300 px-3 py-2 text-center text-lg tracking-widest shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200"
+              className="block w-full rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2 text-[var(--r-text)] text-center text-lg tracking-widest focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]"
             />
-            {authError && <p className="text-sm text-rose-600">{authError}</p>}
+            {authError && <p className="text-sm text-[var(--r-danger,#b42318)]">{authError}</p>}
             <button
               type="submit"
               disabled={authBusy}
-              className="w-full rounded-md bg-sky-500 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-sky-400 disabled:cursor-not-allowed disabled:bg-slate-300"
+              className="w-full rounded-full bg-[var(--r-accent)] px-4 py-2.5 text-sm font-medium text-[var(--r-on)] transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
             >
               {authBusy ? 'Verifying…' : 'Verify'}
             </button>
@@ -85,7 +87,7 @@ export default function AuthPage() {
               setAuthMfaCode('');
               setAuthError('');
             }}
-            className="mt-4 w-full text-center text-sm text-slate-500 underline hover:text-slate-700"
+            className="mt-4 w-full text-center text-sm text-[var(--r-sub)] underline hover:text-[var(--r-text)]"
           >
             {authMfaUseBackup ? 'Use your authenticator app instead' : "Lost your device? Use a backup code"}
           </button>
@@ -97,7 +99,7 @@ export default function AuthPage() {
               setAuthMfaCode('');
               setAuthError('');
             }}
-            className="mt-2 w-full text-center text-sm text-slate-400 underline hover:text-slate-600"
+            className="mt-2 w-full text-center text-sm text-[var(--r-sub)] underline hover:text-[var(--r-sub)]"
           >
             Cancel
           </button>
@@ -107,41 +109,41 @@ export default function AuthPage() {
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-slate-900 px-4 py-12">
+    <div {...shell} className="flex min-h-dvh items-center justify-center bg-[var(--r-bg)] px-4 py-12 text-[var(--r-text)]">
       <div className="grid w-full max-w-5xl items-center gap-16 lg:grid-cols-2">
         {/* Branding / feature panel — hidden on small screens to keep the form front and center there */}
         <div className="hidden lg:block">
-          <p className="text-sm uppercase tracking-[0.24em] text-slate-400">Bible Study Project</p>
-          <h1 className="mt-4 text-3xl font-semibold leading-tight text-white">
-            Deep Bible study,<br />organized chunk by chunk.
+          <p className="text-sm uppercase tracking-[0.24em] text-[var(--r-sub)]">Bible Study Project</p>
+          <h1 className="mt-4 text-3xl font-semibold leading-tight text-[var(--r-text)]">
+            Deep Bible study,<br />one chunk at a time.
           </h1>
-          <p className="mt-4 max-w-sm text-slate-300">
-            Split any passage into chunks and work through Observation, Interpretation, and
-            Application notes alongside Greek &amp; Hebrew word studies, cross-references, and commentary.
+          <p className="mt-4 max-w-sm text-[var(--r-sub)]">
+            Read Scripture in six translations, follow a reading plan into the text, and study a passage one chunk
+            at a time with commentary, word studies, and cross-references beside it.
           </p>
-          <ul className="mt-8 space-y-4 text-sm text-slate-300">
-            <li className="flex items-center gap-3"><span className="text-lg">📖</span> Chunk-by-chunk OIA notes on any passage</li>
-            <li className="flex items-center gap-3"><span className="text-lg">🔤</span> Greek &amp; Hebrew word studies with pronunciation</li>
-            <li className="flex items-center gap-3"><span className="text-lg">🔗</span> Cross-references and commentary, one click away</li>
-            <li className="flex items-center gap-3"><span className="text-lg">🎙</span> Turn your notes into a podcast-ready script</li>
-            <li className="flex items-center gap-3"><span className="text-lg">🔒</span> Your studies stay private to your account, with optional 2FA</li>
+          <ul className="mt-8 space-y-3 text-sm text-[var(--r-sub)]">
+            <li>Read in BSB, ESV, NLT, CSB, NASB, or NET, with audio and search</li>
+            <li>Reading plans that open straight into the Reader</li>
+            <li>Observe, Interpret, Apply notes with Greek &amp; Hebrew word studies</li>
+            <li>Turn your notes into a script, then export or share</li>
+            <li>Your studies stay private to your account, with optional 2FA</li>
           </ul>
-          <blockquote className="mt-8 border-l-2 border-slate-700 pl-4 text-sm italic text-slate-400">
+          <blockquote className="mt-8 border-l-2 border-[var(--r-line)] pl-4 text-sm italic text-[var(--r-sub)]">
             "Make every effort to present yourself approved to God, an unashamed workman who accurately
             handles the word of truth."
-            <footer className="mt-1 not-italic text-slate-500">— 2 Timothy 2:15 (BSB)</footer>
+            <footer className="mt-1 not-italic text-[var(--r-sub)]">— 2 Timothy 2:15 (BSB)</footer>
           </blockquote>
         </div>
 
         {/* Sign in / register form */}
         <div className="flex justify-center lg:justify-start">
-        <div className="w-full max-w-sm rounded-3xl border border-white/10 bg-white p-8 shadow-panel">
-          <p className="text-sm uppercase tracking-[0.24em] text-slate-400 lg:hidden">Bible Study Project</p>
-          <h1 className="mt-2 text-xl font-semibold text-slate-900">
+        <div className="w-full max-w-sm rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-8">
+          <p className="text-sm uppercase tracking-[0.24em] text-[var(--r-sub)] lg:hidden">Bible Study Project</p>
+          <h1 className="mt-2 text-xl font-medium text-[var(--r-text)]">
             {authMode === 'login' ? 'Sign in' : 'Create an account'}
           </h1>
           <form onSubmit={submitAuth} className="mt-6 space-y-4">
-            <label className="block text-sm font-medium text-slate-700">
+            <label className="block text-sm">
               Email
               <input
                 type="email"
@@ -149,10 +151,10 @@ export default function AuthPage() {
                 autoComplete="email"
                 value={authForm.email}
                 onChange={(e) => setAuthForm((f) => ({ ...f, email: e.target.value }))}
-                className="mt-1 block w-full rounded-xl border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200"
+                className="mt-1 block w-full rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2 text-[var(--r-text)] text-sm focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]"
               />
             </label>
-            <label className="block text-sm font-medium text-slate-700">
+            <label className="block text-sm font-medium text-[var(--r-text)]">
               Password
               <input
                 type="password"
@@ -161,14 +163,14 @@ export default function AuthPage() {
                 autoComplete={authMode === 'login' ? 'current-password' : 'new-password'}
                 value={authForm.password}
                 onChange={(e) => setAuthForm((f) => ({ ...f, password: e.target.value }))}
-                className="mt-1 block w-full rounded-xl border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200"
+                className="mt-1 block w-full rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2 text-[var(--r-text)] text-sm focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]"
               />
             </label>
-            {authError && <p className="text-sm text-rose-600">{authError}</p>}
+            {authError && <p className="text-sm text-[var(--r-danger,#b42318)]">{authError}</p>}
             <button
               type="submit"
               disabled={authBusy}
-              className="w-full rounded-md bg-sky-500 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-sky-400 disabled:cursor-not-allowed disabled:bg-slate-300"
+              className="w-full rounded-full bg-[var(--r-accent)] px-4 py-2.5 text-sm font-medium text-[var(--r-on)] transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
             >
               {authBusy ? 'Please wait…' : authMode === 'login' ? 'Sign in' : 'Create account'}
             </button>
@@ -179,7 +181,7 @@ export default function AuthPage() {
               setAuthMode((m) => (m === 'login' ? 'register' : 'login'));
               setAuthError('');
             }}
-            className="mt-4 w-full text-center text-sm text-slate-500 underline hover:text-slate-700"
+            className="mt-4 w-full text-center text-sm text-[var(--r-sub)] underline hover:text-[var(--r-text)]"
           >
             {authMode === 'login' ? "Need an account? Sign up" : 'Already have an account? Sign in'}
           </button>

src/pages/DrawCanvas.jsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useCallback, useMemo, useState } from 'react';
-import { useApp } from '../context/AppContext.js';
 import { renderInkToCanvas } from '../utils/inkRender.js';
 
 const INK_COLORS = ['#0f172a', '#ef4444', '#3b82f6', '#16a34a', '#f59e0b', '#a855f7'];
@@ -11,6 +10,9 @@ const INK_SIZES = [
 ];
 const PAGE_HEIGHT = 640; // px per notebook page
 
+// The last pen settings, so toggling Draw mode off and on keeps your choice.
+let lastPen = { tool: 'pen', color: INK_COLORS[0], size: INK_SIZES[0].value };
+
 // Page count is persisted as a hidden metadata stroke at strokes[0]
 // so the canvas size survives navigation without a separate state key.
 function extractMeta(strokes) {
@@ -30,7 +32,10 @@ function packStrokes(realStrokes, pageCount) {
 // headerContent: optional JSX rendered above the notebook area.
 // The canvas extends over it so you can draw directly on the content.
 export default function DrawCanvas({ strokes, onStrokesChange, onDone, headerContent }) {
-  const { drawTool, setDrawTool, drawColor, setDrawColor, drawSize, setDrawSize } = useApp();
+  const [drawTool, setDrawTool] = useState(lastPen.tool);
+  const [drawColor, setDrawColor] = useState(lastPen.color);
+  const [drawSize, setDrawSize] = useState(lastPen.size);
+  useEffect(() => { lastPen = { tool: drawTool, color: drawColor, size: drawSize }; }, [drawTool, drawColor, drawSize]);
 
   const { pageCount: initPages } = extractMeta(strokes);
   const [pageCount, setPageCount] = useState(initPages);

src/pages/ExportPage.jsx

@@ -0,0 +1,63 @@
+// The Export stage: take the finished study out as a file, or share it read-only.
+import { useApp } from '../context/AppContext.js';
+import { useShareLink } from '../hooks/useShareLink.js';
+import StudioShell from '../components/study/StudioShell.jsx';
+import { exportProjectDocx, exportProjectHtml, exportProjectMarkdown, printProjectPdf } from '../utils/projectExport.js';
+
+const card = 'rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-5';
+const btn = 'rounded-xl border border-[var(--r-line)] px-4 py-2 text-sm hover:bg-black/5 disabled:opacity-50';
+
+function Row({ title, note, button, onClick }) {
+  return (
+    <div className="flex items-center justify-between gap-4 border-b border-[var(--r-line)] py-3 last:border-0">
+      <div className="min-w-0"><p className="text-sm font-medium">{title}</p><p className="text-xs text-[var(--r-sub)]">{note}</p></div>
+      <button type="button" onClick={onClick} className={`${btn} shrink-0`}>{button}</button>
+    </div>
+  );
+}
+
+export default function ExportPage() {
+  const { project, allChunks, setCurrentPage } = useApp();
+  const share = useShareLink(project?.id);
+  const filled = allChunks.filter((c) => (c.finalScript ?? '').trim()).length;
+
+  return (
+    <StudioShell stage="export">
+      <main className="mx-auto max-w-2xl space-y-5 px-4 py-8">
+        <div>
+          <h1 className="text-xl font-medium">Export</h1>
+          <p className="mt-1 text-sm text-[var(--r-sub)]">{allChunks.length} chunk{allChunks.length === 1 ? '' : 's'} · {filled} script{filled === 1 ? '' : 's'} written</p>
+        </div>
+
+        <section className={card} aria-label="Files">
+          <h2 className="mb-1 text-sm font-medium">Files</h2>
+          <Row title="Word document" note="Notes, words and scripts, formatted for editing." button="Export DOCX" onClick={() => exportProjectDocx(project)} />
+          <Row title="PDF" note="Opens a print-friendly page. Choose “Save as PDF” in the print dialog." button="Print / Save PDF" onClick={() => printProjectPdf(project)} />
+          <Row title="Markdown" note="For Obsidian, Notion, or any Markdown-based notes app." button="Export Markdown" onClick={() => exportProjectMarkdown(project)} />
+          <Row title="Web page" note="A single HTML file you can open anywhere." button="Export HTML" onClick={() => exportProjectHtml(project)} />
+        </section>
+
+        <section className={card} aria-label="Sharing">
+          <h2 className="text-sm font-medium">Read-only share link</h2>
+          <p className="mb-3 mt-1 text-xs text-[var(--r-sub)]">Anyone with the link can view (not edit) this study, with no account needed. Good for a co-teacher or a listener following along.</p>
+          {share.shareToken ? (
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <input readOnly value={share.shareUrl} onFocus={(e) => e.target.select()}
+                  className="min-w-0 flex-1 truncate rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2 text-xs text-[var(--r-sub)]" />
+                <button type="button" onClick={share.copy} className="shrink-0 rounded-lg bg-[var(--r-accent)] px-4 py-2 text-xs font-medium text-[var(--r-on)]">{share.shareCopied ? 'Copied!' : 'Copy'}</button>
+              </div>
+              <button type="button" onClick={share.revoke} disabled={share.shareBusy} className="text-xs text-[var(--r-danger,#b42318)] hover:underline">{share.shareBusy ? 'Revoking…' : 'Revoke link'}</button>
+            </div>
+          ) : (
+            <button type="button" onClick={share.enable} disabled={share.shareBusy} className={btn}>{share.shareBusy ? 'Enabling…' : 'Enable sharing'}</button>
+          )}
+        </section>
+
+        <section className={card} aria-label="Pronunciation">
+          <Row title="Pronunciation guide" note="Every Greek and Hebrew word in this study, with transliterations." button="Open guide" onClick={() => setCurrentPage('pronunciation')} />
+        </section>
+      </main>
+    </StudioShell>
+  );
+}