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>
   );
 }

src/components/reader/MarksSheetExport.test.jsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi, test, expect } from 'vitest';
+
+vi.mock('../../utils/marksExport.js', async (orig) => ({ ...(await orig()), downloadMarksFile: vi.fn() }));
+import MarksSheet from './MarksSheet.jsx';
+import { downloadMarksFile } from '../../utils/marksExport.js';
+
+const base = { open: true, onClose: () => {}, colorLabels: { '#bbf7d0': 'Promises' }, onSetLabel: () => {}, onJump: () => {}, onRemoveBookmark: () => {}, onRemoveHighlight: () => {} };
+const highlights = [{ id: 'h', color: '#bbf7d0', book: 'JHN', bookName: 'John', bookIndex: 42, chapter: 3, verse: 16, startOffset: 0, endOffset: 5, text: 'For God' }];
+
+test('highlights and bookmarks can be exported as Markdown, named by your colour names', async () => {
+  const user = userEvent.setup();
+  render(<MarksSheet {...base} bookmarks={[]} highlights={highlights} />);
+  await user.click(screen.getByRole('button', { name: 'Markdown' }));
+  const [blob, name] = downloadMarksFile.mock.calls[0];
+  expect(name).toBe('highlights-and-bookmarks.md');
+  expect(await blob.text()).toContain('## Promises (green)');
+});
+
+test('Word export is offered too, and nothing to export means no buttons', async () => {
+  const user = userEvent.setup();
+  const { rerender } = render(<MarksSheet {...base} bookmarks={[]} highlights={highlights} />);
+  await user.click(screen.getByRole('button', { name: 'Word (.docx)' }));
+  await vi.waitFor(() => expect(downloadMarksFile).toHaveBeenCalledTimes(2));
+  expect(downloadMarksFile.mock.calls[1][1]).toBe('highlights-and-bookmarks.docx');
+  rerender(<MarksSheet {...base} bookmarks={[]} highlights={[]} />);
+  expect(screen.queryByRole('group', { name: /export your marks/i })).toBeNull();
+});