Reader: verse study panel (commentaries, people & places) and NET Bible

Adds a per-verse panel with seven HelloAO commentaries and Theographic
people/places/events, and NET as a fifth Reader translation.

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

src/pages/ReaderPage.jsx

@@ -6,6 +6,7 @@ import AudioPlayer from '../components/AudioPlayer.jsx';
 import { bookOptions, BookmarkIcon, CopyIcon } from '../utils/bibleUtils.jsx';
 import { getPlan, getPlanSchedule, findDayIndexForRef } from '../utils/readingPlans.js';
 import DrawCanvas from './DrawCanvas.jsx';
+import StudyPanel from '../components/StudyPanel.jsx';
 import { READER_TRANSLATIONS } from '../hooks/useBibleReader.js';
 
 const NO_STROKES = []; // stable fallback so DrawCanvas doesn't redraw every render
@@ -102,6 +103,7 @@ export default function ReaderPage() {
   const [readerWideLayout, setReaderWideLayout] = useState(() => localStorage.getItem('reader-wide') === '1');
   const readerPageInkStrokes = readerInkByPage?.[`${readerBookAbbrev}_${readerChapter}`] ?? NO_STROKES;
   const [selectionPicker, setSelectionPicker] = useState(null);
+  const [studyVerse, setStudyVerse] = useState(null); // verse number with the study panel open (normal reading mode)
 
   // Whole-Bible search: lowercase the ~31k-verse index once (not per keystroke),
   // and let typing stay responsive while results catch up via useDeferredValue.
@@ -654,6 +656,12 @@ export default function ReaderPage() {
                                 🎨
                               </button>
                             )}
+                            <button type="button"
+                              onClick={() => setStudyVerse(studyVerse === verse.number ? null : verse.number)}
+                              className={`rounded p-1 text-sm leading-none hover:bg-slate-100 ${studyVerse === verse.number ? 'bg-indigo-100' : ''}`}
+                              title="Commentary, people & places">
+                              📚
+                            </button>
                             <button type="button"
                               onClick={() => copyVerse(readerBook?.name, readerChapter, verse.number, verse.text, readerTranslation)}
                               className="rounded p-1 leading-none text-slate-400 hover:bg-slate-100 hover:text-slate-700"
@@ -663,6 +671,10 @@ export default function ReaderPage() {
                           </span>
                         </div>
 
+                        {studyVerse === verse.number && (
+                          <StudyPanel book={readerBookAbbrev} chapter={readerChapter} verse={verse.number} onClose={() => setStudyVerse(null)} />
+                        )}
+
                         {readerShowCrossRefs && crossRefs && (
                           <div className="mt-1 ml-6 flex flex-wrap gap-1">
                             {crossRefs.slice(0, 8).map((ref, i) => {