Speed up the app, run production build, remove chunk ink, start App.jsx split

Performance:
- Lazy-load pages, docx, and mammoth (initial JS 1,298 KB -> ~290 KB)
- Gzip responses and cache hashed assets for a year
- Memoize DrawCanvas strokes so ink isn't redrawn on every render
- Precompute whole-Bible search index and defer the query while typing
- Reload once if a lazy chunk is missing after a deploy

Deployment:
- setup.sh builds and runs one production server on APP_PORT (default
  5173); --dev keeps the old Vite dev setup
- Session cookie uses secure: 'auto' so login works behind any proxy

Chunk editor:
- Remove the Draw layout, Ink Notes panel, and ink in HTML export
  (existing inkStrokes data is left in saved projects)

Refactor:
- Move module-level helpers out of App.jsx into src/utils/*
- Extract Bible reader state and logic into hooks/useBibleReader

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

src/pages/DrawCanvas.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback, useState } from 'react';
+import { useEffect, useRef, useCallback, useMemo, useState } from 'react';
 import { useApp } from '../context/AppContext.js';
 import { renderInkToCanvas } from '../utils/inkRender.js';
 
@@ -35,8 +35,9 @@ export default function DrawCanvas({ strokes, onStrokesChange, onDone, headerCon
   const { pageCount: initPages } = extractMeta(strokes);
   const [pageCount, setPageCount] = useState(initPages);
 
-  // realStrokes = strokes without the metadata header
-  const { realStrokes } = extractMeta(strokes);
+  // realStrokes = strokes without the metadata header. Memoized so the canvas
+  // only redraws when the strokes actually change, not on every parent re-render.
+  const realStrokes = useMemo(() => extractMeta(strokes).realStrokes, [strokes]);
 
   const canvasRef = useRef(null);
   const hoverRef = useRef(null);

src/pages/ReaderPage.jsx

@@ -1,8 +1,10 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useMemo, useDeferredValue } from 'react';
 import { useApp } from '../context/AppContext.js';
 import { bookOptions, BookmarkIcon, CopyIcon } from '../utils/bibleUtils.jsx';
 import DrawCanvas from './DrawCanvas.jsx';
 
+const NO_STROKES = []; // stable fallback so DrawCanvas doesn't redraw every render
+
 export default function ReaderPage() {
   const {
     authStatus,
@@ -55,8 +57,27 @@ export default function ReaderPage() {
   const readerBook = bookOptions.find((b) => b.abbrev === readerBookAbbrev);
   const [readerDrawMode, setReaderDrawMode] = useState(false);
   const [readerWideLayout, setReaderWideLayout] = useState(() => localStorage.getItem('reader-wide') === '1');
-  const readerPageInkStrokes = readerInkByPage?.[`${readerBookAbbrev}_${readerChapter}`] ?? [];
+  const readerPageInkStrokes = readerInkByPage?.[`${readerBookAbbrev}_${readerChapter}`] ?? NO_STROKES;
   const [selectionPicker, setSelectionPicker] = useState(null);
+
+  // Whole-Bible search: lowercase the ~31k-verse index once (not per keystroke),
+  // and let typing stay responsive while results catch up via useDeferredValue.
+  const bibleIndex = bibleIndexStatus === 'ready' ? (_bibleIndexCacheRef.current.BSB ?? null) : null;
+  const bibleIndexLower = useMemo(
+    () => (bibleIndex ? bibleIndex.map((v) => v.text.toLowerCase()) : null),
+    [bibleIndex],
+  );
+  const deferredBibleQuery = useDeferredValue(
+    readerSearchActive && readerSearchScope === 'bible' ? readerSearch.trim().toLowerCase() : '',
+  );
+  const bibleMatches = useMemo(() => {
+    if (!bibleIndex || !deferredBibleQuery) return [];
+    const out = [];
+    for (let i = 0; i < bibleIndex.length; i++) {
+      if (bibleIndexLower[i].includes(deferredBibleQuery)) out.push(bibleIndex[i]);
+    }
+    return out;
+  }, [bibleIndex, bibleIndexLower, deferredBibleQuery]);
   const swipeTouchRef = useRef(null);
 
   const [toolbarVisible, setToolbarVisible] = useState(true);
@@ -444,10 +465,9 @@ export default function ReaderPage() {
               <p className="text-sm text-rose-600">Couldn't load the full Bible for search. <button type="button" onClick={loadBibleIndex} className="underline">Try again</button></p>
             )}
             {bibleIndexStatus === 'ready' && (() => {
-              const q = readerSearch.trim().toLowerCase();
+              const q = deferredBibleQuery;
               if (!q) return <p className="text-sm text-slate-500">Type at least a word to search all 66 books.</p>;
-              const index = _bibleIndexCacheRef.current.BSB ?? [];
-              const matches = index.filter((v) => v.text.toLowerCase().includes(q));
+              const matches = bibleMatches;
               if (matches.length === 0) return <p className="text-sm text-slate-500">No verses match "{readerSearch}".</p>;
               const shown = matches.slice(0, 100);
               return (

src/pages/StudyPage.jsx

@@ -2,7 +2,6 @@ import { createPortal } from 'react-dom';
 import DOMPurify from 'dompurify';
 import { useApp } from '../context/AppContext.js';
 import { STUDY_TABS, COMMENTARY_OPTIONS, NT_BOOK_NUMBER, formatChunkReference, CrossRefChip } from '../utils/bibleUtils.jsx';
-import DrawCanvas from './DrawCanvas.jsx';
 
 export default function StudyPage() {
   const {
@@ -197,7 +196,6 @@ export default function StudyPage() {
                   {[
                     { id: 'stacked', label: '☰ Stacked' },
                     { id: 'split', label: '◫ Split' },
-                    { id: 'annotate', label: '✏ Draw' },
                   ].map((m) => (
                     <button
                       key={m.id}
@@ -243,29 +241,6 @@ export default function StudyPage() {
 
             {selectedChunk ? (
               <div className="mt-6 space-y-6">
-              {studyLayout === 'annotate' ? (
-                <DrawCanvas
-                  strokes={selectedChunk.inkStrokes ?? []}
-                  onStrokesChange={(s) => updateChunk(selectedChunk.id, { inkStrokes: s })}
-                  onDone={() => setStudyLayout('stacked')}
-                  headerContent={
-                    <>
-                      <div className="mb-2 flex items-center justify-between gap-2">
-                        <span className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Scripture · draw on me</span>
-                        <span className="rounded-full bg-slate-200 px-2.5 py-0.5 text-xs font-semibold text-slate-600">
-                          {formatChunkReference(project, selectedChunkChapterIndex, selectedChunk, '–')}
-                        </span>
-                      </div>
-                      {selectedChunkVerses.map((verse) => (
-                        <p key={`${verse.chapter}-${verse.number}`} className="mb-1">
-                          <span className="font-semibold text-slate-900">{verse.chapter}:{verse.number}.</span>{' '}
-                          {verse.text}
-                        </p>
-                      ))}
-                    </>
-                  }
-                />
-              ) : (
               <div className={`space-y-6 ${studyLayout === 'split' ? 'lg:flex lg:items-start lg:gap-6 lg:space-y-0' : ''}`}>
                 {/* Scripture */}
                 <div className={`rounded-3xl border border-slate-200 bg-slate-50 p-5 ${mobileStudyTab !== 'scripture' ? 'max-sm:hidden' : ''} ${studyLayout === 'split' ? 'lg:sticky lg:top-6 lg:flex-1 lg:basis-0 lg:min-w-0 lg:self-start' : ''}`}>
@@ -515,47 +490,6 @@ export default function StudyPage() {
                   </datalist>
                 </div>
 
-                {/* Inline ink notes — collapsible, always available without switching to annotate mode */}
-                <div className={`rounded-3xl border border-slate-200 bg-slate-50 p-5 ${mobileStudyTab !== 'notes' ? 'max-sm:hidden' : ''} ${studyLayout === 'split' && activeStudyTab !== 'notes' ? 'hidden' : ''}`}>
-                  <button
-                    type="button"
-                    onClick={() => setCollapsedSections((c) => ({ ...c, inlineInk: !c.inlineInk }))}
-                    className="flex w-full items-center justify-between gap-2 text-left"
-                  >
-                    <div>
-                      <h3 className="text-sm font-semibold text-slate-900">Ink Notes</h3>
-                      <p className="text-xs text-slate-500">Draw diagrams or handwritten notes for this chunk.</p>
-                    </div>
-                    <span className="text-slate-400">{collapsedSections.inlineInk ? '▸' : '▾'}</span>
-                  </button>
-                  {!collapsedSections.inlineInk && (
-                    <div className="mt-4">
-                      <DrawCanvas
-                        strokes={selectedChunk.inkStrokes ?? []}
-                        onStrokesChange={(s) => updateChunk(selectedChunk.id, { inkStrokes: s })}
-                        headerContent={
-                          selectedChunkVerses.length > 0 && (
-                            <>
-                              <div className="mb-2 flex items-center justify-between gap-2">
-                                <span className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Scripture · draw on me</span>
-                                <span className="rounded-full bg-slate-200 px-2.5 py-0.5 text-xs font-semibold text-slate-600">
-                                  {formatChunkReference(project, selectedChunkChapterIndex, selectedChunk, '–')}
-                                </span>
-                              </div>
-                              {selectedChunkVerses.map((verse) => (
-                                <p key={`${verse.chapter}-${verse.number}`} className="mb-1">
-                                  <span className="font-semibold text-slate-900">{verse.chapter}:{verse.number}.</span>{' '}
-                                  {verse.text}
-                                </p>
-                              ))}
-                            </>
-                          )
-                        }
-                      />
-                    </div>
-                  )}
-                </div>
-
                 {/* Cross-references */}
                 <div className={`rounded-3xl border border-slate-200 bg-slate-50 p-5 ${mobileStudyTab !== 'crossRefs' ? 'max-sm:hidden' : ''} ${studyLayout === 'split' && activeStudyTab !== 'crossRefs' ? 'hidden' : ''}`}>
                   <button
@@ -941,7 +875,6 @@ export default function StudyPage() {
 
                 </div>
                 </div>
-              )}
 
               </div>
             ) : (
@@ -955,7 +888,7 @@ export default function StudyPage() {
       </main>
 
       {/* Prev / Next — fixed bottom bar, visible while scrolling long chunks */}
-      {selectedChunk && studyLayout !== 'annotate' && (
+      {selectedChunk && (
         <div className="fixed bottom-0 inset-x-0 z-20 border-t border-slate-200 bg-white/95 backdrop-blur-sm">
           <div className="mx-auto flex max-w-7xl items-center justify-between gap-3 px-4 py-3 sm:px-6 lg:px-8">
             <button