Reader: resizable side panel

Drag the left edge of the verse side panel to resize it (arrow keys too,
Shift for bigger steps; double-click resets). The text reflows to make room,
and the width is remembered on this device. Reuses the Study page's resize
handle; the hook now takes the CSS variable to drive.

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

src/pages/ReaderPage.jsx

@@ -6,6 +6,7 @@ import { bookOptions } from '../utils/bibleUtils.jsx';
 import { getPlan, getPlanSchedule, findDayIndexForRef, formatDayReadings, nextUnreadDayIndex, computeStreak, nearestReadingDay } from '../utils/readingPlans.js';
 import DrawCanvas from './DrawCanvas.jsx';
 import { READER_TRANSLATIONS } from '../utils/bibleText.js';
+import { useResizableWidth } from '../hooks/useResizableWidth.js';
 import { useParallelChapter } from '../hooks/useParallelChapter.js';
 import { useOfflineSave, useOnline } from '../hooks/useOfflineSave.js';
 import { useBibleSearch } from '../hooks/useBibleSearch.js';
@@ -108,6 +109,10 @@ export default function ReaderPage() {
   const [selectionPicker, setSelectionPicker] = useState(null);
   const [xrefRequest, setXrefRequest] = useState(null); // a cross-reference tapped in the text: { verse, ref, n }
   const swipeTouchRef = useRef(null);
+  // The side panel's width: drag its left edge (remembered on this device)
+  const rootRef = useRef(null);
+  const paneRef = useRef(null);
+  const pane = useResizableWidth({ storageKey: 'reader-pane-width', containerRef: rootRef, min: 320, maxAbsolute: 800, fallback: 384, reserve: 460, cssVar: '--reader-pane' });
   const readerPageInkStrokes = readerInkByPage?.[`${readerBookAbbrev}_${readerChapter}`] ?? NO_STROKES;
 
 
@@ -412,7 +417,7 @@ export default function ReaderPage() {
   const paneOpen = !!selectedVerse && !readerDrawMode;
 
   return (
-    <div className="min-h-dvh bg-[var(--r-bg)] text-[var(--r-text)]" style={themeVars(readerTheme)}
+    <div ref={rootRef} className="min-h-dvh bg-[var(--r-bg)] text-[var(--r-text)]" style={{ ...themeVars(readerTheme), ...(pane.width ? { '--reader-pane': `${pane.width}px` } : {}) }}
          onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd}>
       {chromeVisible && (
         <TopBar
@@ -452,7 +457,7 @@ export default function ReaderPage() {
         </p>
       )}
 
-      <div className={paneOpen ? 'lg:pr-[24rem]' : ''}>
+      <div className={paneOpen ? 'lg:pr-[var(--reader-pane,24rem)]' : ''}>
         {!readerDrawMode && (
           <ReaderText
             title={`${readerBook?.name ?? ''} ${readerChapter}`}
@@ -547,6 +552,14 @@ export default function ReaderPage() {
           onJump={jump}
           onClose={() => setReaderSelectedVerse(null)}
           request={xrefRequest}
+          panelRef={paneRef}
+          resizeHandle={(
+            // Drag this edge to resize (arrow keys too; double-click resets). Wide screens only.
+            <div {...pane.handleProps(paneRef)}
+              className="group absolute -left-1.5 top-0 z-20 hidden h-full w-3 cursor-col-resize touch-none select-none focus:outline-none lg:block">
+              <span className="mx-auto block h-full w-px bg-transparent transition group-hover:w-0.5 group-hover:bg-[var(--r-accent)] group-focus-visible:w-0.5 group-focus-visible:bg-[var(--r-accent)]" />
+            </div>
+          )}
           verseHighlights={verseHighlights} colorLabels={readerColorLabels ?? {}}
           onHighlightVerse={highlightVerse} onClearVerseHighlights={clearVerseHighlights}
         />