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/reader/MarksSheet.jsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react';
 import Sheet from './Sheet.jsx';
 import { CloseIcon } from './icons.jsx';
+import { buildMarksDocxBlob, buildMarksModel, downloadMarksFile, marksToMarkdown } from '../../utils/marksExport.js';
 import { COLOR_NAMES, COLOR_SUGGESTIONS, HIGHLIGHT_COLORS, colorTitle } from '../../utils/highlightColors.js';
 
 const tabBtn = (active) => `rounded-full border px-3 py-1 text-xs font-medium ${active ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`;
@@ -20,6 +21,15 @@ export default function MarksSheet({
   const shown = filter ? highlights.filter((h) => h.color === filter) : highlights;
   // Colours in use that aren't one of the picker's (older data) still get listed
   const total = highlights.length + bookmarks.length;
+  const [exportError, setExportError] = useState('');
+  const exportAs = async (kind) => {
+    setExportError('');
+    const model = buildMarksModel({ highlights, bookmarks, colorLabels });
+    try {
+      if (kind === 'md') downloadMarksFile(new Blob([marksToMarkdown(model)], { type: 'text/markdown;charset=utf-8' }), 'highlights-and-bookmarks.md');
+      else downloadMarksFile(await buildMarksDocxBlob(model), 'highlights-and-bookmarks.docx');
+    } catch { setExportError('Couldn’t make the file. Try again.'); }
+  };
 
   return (
     <Sheet open={open} onClose={onClose} label="Bookmarks and highlights" title={`Bookmarks & highlights${total ? ` (${total})` : ''}`}>
@@ -91,6 +101,14 @@ export default function MarksSheet({
           </div>
         ))
       )}
+      {total > 0 && (
+        <div className="mt-4 flex flex-wrap items-center gap-2 border-t border-[var(--r-line)] pt-3" role="group" aria-label="Export your marks">
+          <span className="text-xs text-[var(--r-sub)]">Take them with you</span>
+          <button type="button" onClick={() => exportAs('md')} className="rounded-lg border border-[var(--r-line)] px-3 py-1.5 text-xs hover:bg-black/5">Markdown</button>
+          <button type="button" onClick={() => exportAs('docx')} className="rounded-lg border border-[var(--r-line)] px-3 py-1.5 text-xs hover:bg-black/5">Word (.docx)</button>
+          {exportError && <span role="alert" className="text-xs text-[var(--r-danger,#b42318)]">{exportError}</span>}
+        </div>
+      )}
     </Sheet>
   );
 }