Redesign the study side: Outline, Study, Script and Export stages

Studies now move through a stage bar in the reader's themes. Outline splits
chunks by clicking between verses (join merges notes) and suggests chunks from
section headings. Study is three panes: outline, passage with an Observe /
Interpret / Apply accordion, and commentary / word study / cross-refs / people
& places for the chunk; original words are added by clicking them in the
interlinear. Script drafts an outline from notes; Export holds files and the
share link. Home, Import and the Pronunciation guide are restyled. Study
projects are BSB only.

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

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 h-full min-h-0 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];
+}