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/StudioShell.jsx

@@ -0,0 +1,60 @@
+// 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: 'Outline' },
+  { id: 'study', label: 'Study' },
+  { 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,
+    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 ? 'flex h-screen flex-col overflow-hidden' : 'min-h-screen'}`} style={themeVars(readerTheme)}>
+      <div className="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 studies"
+            className="flex h-9 w-9 items-center justify-center rounded-lg text-[var(--r-sub)] hover:bg-black/5"><ChevronLeft /></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 Outline 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-red-600">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>
+      {children}
+    </div>
+  );
+}