Invite-only sign-up, present mode, series, handouts, templates, dictation, progress, sharing

- Admin: sign-up Open / Invite only / Closed with single-use invite links
- Present mode for scripts (auto-scroll) and outlines (step through, pace vs planned minutes)
- Series: group studies on the dashboard, filter by series, calendar file for a study's sessions
- Lesson handout: printable page per session (passage, outline, questions, writing lines)
- Save a chunk's notes as your own study template (synced)
- Voice dictation for notes and scripts (browser speech recognition)
- Reading progress: map of the 66 books and a calendar of days read, synced and merged across devices
- Export highlights and bookmarks as Markdown or Word, grouped by named colour
- Verse of the day push to the ntfy topic (needs IQBIBLE_API_KEY)
- Sharing: co-teacher editing via single-use invite links; read-only links can expire and take a passcode

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

src/components/SharedOutlineView.jsx

@@ -1,8 +1,9 @@
 // What someone sees when they open a read-only outline link: a calm page with the outline, a switcher
 // when there is more than one, and Print / PDF. Nothing is editable.
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { getSharedOutline } from '../syncService.js';
 import { themeVars } from './reader/readerThemes.js';
+import SharedPasscodeForm from './SharedPasscodeForm.jsx';
 import OutlineDocument from './OutlineDocument.jsx';
 import { printOutline } from '../utils/outlineExport.js';
 import { flatten } from '../utils/outline.js';
@@ -17,18 +18,27 @@ export default function SharedOutlineView({ token }) {
   const [data, setData] = useState(null);
   const [error, setError] = useState('');
   const [scope, setScope] = useState('study');
+  const [needsPasscode, setNeedsPasscode] = useState(false);
+  const [passcodeError, setPasscodeError] = useState('');
+  const [checking, setChecking] = useState(false);
 
-  useEffect(() => {
-    let active = true;
-    getSharedOutline(token).then((result) => {
-      if (!active) return;
-      if (result.ok) { setData(result.data); setScope(result.data.outlines[0]?.scope ?? 'study'); } else setError(result.error ?? 'This outline link is invalid or has been turned off.');
+  const load = useCallback((passcode) => {
+    setChecking(true);
+    return getSharedOutline(token, passcode).then((result) => {
+      setChecking(false);
+      if (result.ok) { setData(result.data); setNeedsPasscode(false); setScope(result.data.outlines[0]?.scope ?? 'study'); return; }
+      if (result.data?.needsPasscode) { setNeedsPasscode(true); setPasscodeError(passcode ? result.error : ''); return; }
+      setNeedsPasscode(false);
+      setError(result.error ?? 'This outline link is invalid or has been turned off.');
     });
-    return () => { active = false; };
   }, [token]);
 
+  useEffect(() => { load(); }, [load]);
+
   useEffect(() => { if (data?.title) document.title = `${data.title} — Outline`; }, [data]);
 
+  if (needsPasscode) return <Frame><SharedPasscodeForm error={passcodeError} busy={checking} onSubmit={load} /></Frame>;
+
   if (error) {
     return (
       <Frame>