spike(exam): tldraw 3.6.1 custom shape/tool proof (S4-9.spike)

Recovered from cc-worker WIP left uncommitted in the dev-centre clone (card
t_fbe15cad, marked done but never committed/pushed). Adds ExamMarkerSpikePage +
exam-marker-spike util/test proving custom box shape + tool + hit-testing on
tldraw 3.6.1. Isolated on this branch (NOT master); reference for S4-9a.
Includes incidental edits to S4-8 files made during the spike — review before reuse.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

.gitignore

@@ -47,3 +47,6 @@ docker-compose.override.yml
 # Local environment variants
 .env.dev
 .env.prod
+
+# Playwright test artifacts
+test-results/

src/App.tsx

@@ -1,6 +1,7 @@
 import { BrowserRouter } from 'react-router-dom';
 import { useMemo, useEffect } from 'react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
 import { useTLDraw } from './contexts/TLDrawContext';
 import { theme } from './services/themeService';
 import { AuthProvider } from './contexts/AuthContext';
@@ -53,6 +54,7 @@ const App = React.memo(() => {
             <TLDrawProvider>
               <DarkModeSync />
               <ThemeProvider theme={appTheme}>
+                <CssBaseline />
                 <AppRoutes />
               </ThemeProvider>
             </TLDrawProvider>

src/AppRoutes.admin.test.tsx

@@ -31,10 +31,11 @@ vi.mock('./pages/NotFoundPublic', () => ({ default: () => <div>Public Not Found<
 vi.mock('./pages/tldraw/TLDrawCanvas', () => ({ default: () => <div>Public Home</div> }));
 vi.mock('./pages/tldraw/singlePlayerPage', () => ({ default: () => <div>Single Player</div> }));
 vi.mock('./pages/tldraw/multiplayerUser', () => ({ default: () => <div>Multiplayer</div> }));
-vi.mock('./pages/tldraw/CCExamMarker/CCExamMarker', () => ({ CCExamMarker: () => <div>Exam Marker</div> }));
+vi.mock('./pages/exam', () => ({ ExamDashboardPage: () => <div>Exam Marker</div> }));
 vi.mock('./pages/user/calendarPage', () => ({ default: () => <div>Calendar</div> }));
 vi.mock('./pages/user/settingsPage', () => ({ default: () => <div>Settings</div> }));
 vi.mock('./pages/tldraw/devPlayerPage', () => ({ default: () => <div>TLDraw Dev</div> }));
+vi.mock('./pages/tldraw/ExamMarkerSpikePage', () => ({ default: () => <div>Exam Marker Spike</div> }));
 vi.mock('./pages/tldraw/devPage', () => ({ default: () => <div>Dev</div> }));
 vi.mock('./pages/react-flow/teacherPlanner', () => ({ default: () => <div>Teacher Planner</div> }));
 vi.mock('./pages/morphicPage', () => ({ default: () => <div>Morphic</div> }));
@@ -46,6 +47,7 @@ vi.mock('./pages/tldraw/CCDocumentIntelligence/CCDocumentIntelligence', () => ({
 }));
 vi.mock('./pages/timetable', () => ({
   TimetablePage: () => <div>Timetable</div>,
+  TimetableListPage: () => <div>Timetable List</div>,
   ClassesPage: () => <div>Classes</div>,
   LessonPage: () => <div>Lesson</div>,
   TaughtLessonsPage: () => <div>Taught Lessons</div>,

src/AppRoutes.tsx

@@ -7,7 +7,8 @@ import LoginPage from './pages/auth/loginPage';
 import SignupPage from './pages/auth/signupPage';
 import SinglePlayerPage from './pages/tldraw/singlePlayerPage';
 import MultiplayerUser from './pages/tldraw/multiplayerUser';
-import { CCExamMarker } from './pages/tldraw/CCExamMarker/CCExamMarker';
+import { ExamDashboardPage } from './pages/exam';
+import { ErrorBoundary } from './components/ErrorBoundary';
 import CalendarPage from './pages/user/calendarPage';
 import SettingsPage from './pages/user/settingsPage';
 import TLDrawCanvas from './pages/tldraw/TLDrawCanvas';
@@ -15,6 +16,7 @@ import AdminDashboard from './pages/auth/adminPage';
 import PlatformAdminPage from './pages/auth/PlatformAdminPage';
 import TLDrawDevPage from './pages/tldraw/devPlayerPage';
 import DevPage from './pages/tldraw/devPage';
+import ExamMarkerSpikePage from './pages/tldraw/ExamMarkerSpikePage';
 import TeacherPlanner from './pages/react-flow/teacherPlanner';
 import MorphicPage from './pages/morphicPage';
 import NotFound from './pages/user/NotFound';
@@ -30,6 +32,7 @@ import DashboardPage from './pages/user/dashboardPage';
 // Timetable Module Pages
 import {
   TimetablePage,
+  TimetableListPage,
   ClassesPage,
   LessonPage,
   TaughtLessonsPage,
@@ -66,7 +69,7 @@ const FullContextRoutes: React.FC = () => {
   return <Outlet />;
 };
 
-const RequireAuth: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+const RequireAuth: React.FC = () => {
   const { user, isAuthResolving } = useAuth();
 
   if (isAuthResolving) {
@@ -88,7 +91,7 @@ const RequireAuth: React.FC<{ children: React.ReactNode }> = ({ children }) => {
     return <Navigate to="/login" replace />;
   }
 
-  return <>{children}</>;
+  return <Outlet />;
 };
 
 const AppRoutes: React.FC = () => {
@@ -159,10 +162,11 @@ const AppRoutes: React.FC = () => {
         />
 
         {/* Authentication only routes - only render if all contexts are initialized */}
-        <RequireAuth>
+        <Route element={<RequireAuth />}>
           <Route element={<FullContextRoutes />}>
             {/* Timetable Module Routes */}
-            <Route path="/timetable" element={<TimetablePage />} />
+            <Route path="/timetable" element={<TimetableListPage />} />
+            <Route path="/timetable/:timetableId" element={<TimetablePage />} />
             <Route path="/classes" element={<ClassesPage />} />
             <Route path="/my-classes" element={<MyClassesPage />} />
             <Route path="/classes/:classId" element={<ClassDetailPage />} />
@@ -179,10 +183,11 @@ const AppRoutes: React.FC = () => {
             {/* Existing Routes */}
             <Route path="/search" element={<SearxngPage />} />
             <Route path="/teacher-planner" element={<TeacherPlanner />} />
-            <Route path="/exam-marker" element={<CCExamMarker />} />
+            <Route path="/exam-marker" element={<ErrorBoundary><ExamDashboardPage /></ErrorBoundary>} />
             <Route path="/doc-intelligence/:fileId" element={<CCDocumentIntelligence />} />
             <Route path="/morphic" element={<MorphicPage />} />
             <Route path="/tldraw-dev" element={<TLDrawDevPage />} />
+            <Route path="/exam-marker-spike" element={<ExamMarkerSpikePage />} />
             <Route path="/dev" element={<DevPage />} />
             <Route path="/dev/upload-test" element={<SimpleUploadTest />} />
             <Route path="/single-player" element={<SinglePlayerPage />} />
@@ -190,7 +195,7 @@ const AppRoutes: React.FC = () => {
             <Route path="/calendar" element={<CalendarPage />} />
             <Route path="/settings" element={<SettingsPage />} />
           </Route>
-        </RequireAuth>
+        </Route>
 
         {/* Fallback route - authenticated users go to dashboard, unauthenticated see public 404 */}
         <Route path="*" element={user ? <Navigate to="/dashboard" replace /> : <NotFoundPublic />} />

src/pages/exam/ExamDashboardPage.tsx

@@ -0,0 +1,246 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Alert,
+  Box,
+  Button,
+  Chip,
+  CircularProgress,
+  Container,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  IconButton,
+  Paper,
+  Stack,
+  TextField,
+  Tooltip,
+  Typography,
+} from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import ArchiveIcon from '@mui/icons-material/Archive';
+import AssignmentIcon from '@mui/icons-material/Assignment';
+
+import { useAuth } from '../../contexts/AuthContext';
+import { examRepository } from '../../services/exam/examRepository';
+import type { ExamTemplate } from '../../types/exam.types';
+import { logger } from '../../debugConfig';
+
+const STATUS_COLOR: Record<string, 'default' | 'info' | 'success' | 'warning'> = {
+  draft: 'warning',
+  ready: 'success',
+  archived: 'default',
+};
+
+const ExamDashboardPage: React.FC = () => {
+  const navigate = useNavigate();
+  const { bootstrapData } = useAuth();
+  const instituteId = bootstrapData?.active_institute?.id ?? undefined;
+
+  const [templates, setTemplates] = useState<ExamTemplate[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const [createOpen, setCreateOpen] = useState(false);
+  const [title, setTitle] = useState('');
+  const [subject, setSubject] = useState('');
+  const [sourcePdf, setSourcePdf] = useState<File | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      setTemplates(await examRepository.listTemplates());
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : String(e);
+      logger.warn('cc-exam-marker', 'Failed to load templates', { message: msg });
+      setError(msg);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load, instituteId]);
+
+  const handleOpenCreate = () => {
+    setCreateOpen(true);
+  };
+
+  const handleCloseCreate = () => {
+    if (saving) return;
+    setCreateOpen(false);
+    setTitle('');
+    setSubject('');
+    setSourcePdf(null);
+  };
+
+  const handleCreate = async () => {
+    if (!title.trim()) return;
+    setSaving(true);
+    try {
+      const created = await examRepository.createTemplate({
+        title: title.trim(),
+        subject: subject.trim() || undefined,
+        institute_id: instituteId,
+        source_pdf: sourcePdf,
+      });
+      setCreateOpen(false);
+      setTitle('');
+      setSubject('');
+      setSourcePdf(null);
+      navigate(`/exam-marker/${created.id}/setup`);
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : String(e);
+      logger.error('cc-exam-marker', 'Create template failed', { message: msg });
+      setError(msg);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleArchive = async (id: string, ev: React.MouseEvent) => {
+    ev.stopPropagation();
+    try {
+      await examRepository.archiveTemplate(id);
+      setTemplates((prev) => prev.filter((t) => t.id !== id));
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : String(e);
+      logger.error('cc-exam-marker', 'Archive failed', { message: msg });
+      setError(msg);
+    }
+  };
+
+  return (
+    <Container maxWidth="lg" sx={{ py: 6 }}>
+      <Stack spacing={4}>
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 2 }}>
+          <Box>
+            <Typography variant="h3" component="h1" gutterBottom>
+              Exam Marker
+            </Typography>
+            <Typography variant="body1" color="text.secondary" sx={{ maxWidth: 560 }}>
+              Build a template for an exam paper, then run marking batches against your classes.
+            </Typography>
+          </Box>
+          <Button variant="contained" startIcon={<AddIcon />} onClick={handleOpenCreate}>
+            New template
+          </Button>
+        </Box>
+
+        {error && (
+          <Alert severity="error" onClose={() => setError(null)}>
+            {error}
+          </Alert>
+        )}
+
+        {loading ? (
+          <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
+            <CircularProgress />
+          </Box>
+        ) : templates.length === 0 ? (
+          <Paper variant="outlined" sx={{ p: 6, textAlign: 'center' }}>
+            <AssignmentIcon sx={{ fontSize: 48, color: 'text.disabled', mb: 1 }} />
+            <Typography variant="h6" gutterBottom>No exam templates yet</Typography>
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+              Create your first template to start mapping an exam paper.
+            </Typography>
+            <Button variant="outlined" startIcon={<AddIcon />} onClick={handleOpenCreate}>
+              New template
+            </Button>
+          </Paper>
+        ) : (
+          <Grid container spacing={3}>
+            {templates.map((t) => (
+              <Grid item xs={12} sm={6} md={4} key={t.id}>
+                <Paper
+                  elevation={2}
+                  sx={{
+                    p: 3,
+                    height: '100%',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 1,
+                    transition: 'box-shadow 120ms',
+                    '&:hover': { boxShadow: 6 },
+                  }}
+                  onClick={() => navigate(`/exam-marker/${t.id}/setup`)}
+                >
+                  <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
+                    <Typography variant="h6" sx={{ pr: 1 }}>{t.title}</Typography>
+                    <Tooltip title="Archive">
+                      <IconButton size="small" onClick={(e) => handleArchive(t.id, e)} aria-label="archive template">
+                        <ArchiveIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                  </Box>
+                  {t.subject && (
+                    <Typography variant="body2" color="text.secondary">{t.subject}</Typography>
+                  )}
+                  {t.exam_code && (
+                    <Typography variant="caption" color="text.secondary">{t.exam_code}</Typography>
+                  )}
+                  <Box sx={{ mt: 'auto', pt: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <Chip size="small" label={t.status} color={STATUS_COLOR[t.status] ?? 'default'} variant="outlined" />
+                    <Typography variant="caption" color="text.secondary">
+                      {new Date(t.updated_at).toLocaleDateString()}
+                    </Typography>
+                  </Box>
+                </Paper>
+              </Grid>
+            ))}
+          </Grid>
+        )}
+      </Stack>
+
+      <Dialog open={createOpen} onClose={handleCloseCreate} fullWidth maxWidth="sm">
+        <DialogTitle>New exam template</DialogTitle>
+        <DialogContent>
+          <Stack spacing={2} sx={{ mt: 1 }}>
+            <TextField
+              label="Title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              fullWidth
+              autoFocus
+              required
+            />
+            <TextField
+              label="Subject"
+              value={subject}
+              onChange={(e) => setSubject(e.target.value)}
+              fullWidth
+            />
+            <Box>
+              <Button variant="outlined" component="label">
+                {sourcePdf ? 'Replace source PDF' : 'Attach source PDF'}
+                <input
+                  hidden
+                  type="file"
+                  accept="application/pdf"
+                  onChange={(e) => setSourcePdf(e.target.files?.[0] ?? null)}
+                />
+              </Button>
+              <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+                {sourcePdf ? sourcePdf.name : 'Optional: upload a PDF source for this template.'}
+              </Typography>
+            </Box>
+          </Stack>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCloseCreate} disabled={saving}>Cancel</Button>
+          <Button variant="contained" onClick={handleCreate} disabled={saving || !title.trim()}>
+            {saving ? 'Creating…' : 'Create'}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Container>
+  );
+};
+
+export default ExamDashboardPage;

src/pages/exam/index.ts

@@ -0,0 +1 @@
+export { default as ExamDashboardPage } from './ExamDashboardPage';

src/pages/timetable/MyClassesPage.tsx

@@ -3,9 +3,19 @@ import { Link } from 'react-router-dom';
 import { AccessTime, KeyboardArrowRight, MenuBook, People, School } from '@mui/icons-material';
 import useTimetableStore from '../../stores/timetableStore';
 import { useUser } from '../../contexts/UserContext';
+import { useNeoInstitute } from '../../contexts/NeoInstituteContext';
+import { CircularProgress } from '@mui/material';
+import { logger } from '../../debugConfig';
+
+const MyClassesSkeleton = () => (
+  <div className="flex justify-center items-center h-64">
+    <CircularProgress />
+  </div>
+);
 
 const MyClassesPage: React.FC = () => {
   const { profile } = useUser();
+  const { selectedInstituteId } = useNeoInstitute();
   const {
     myClasses,
     classesLoading: myClassesLoading,
@@ -14,8 +24,16 @@ const MyClassesPage: React.FC = () => {
   } = useTimetableStore();
 
   useEffect(() => {
-    fetchMyClasses();
-  }, [fetchMyClasses]);
+    fetchMyClasses().catch((error) =>
+      logger.warn('my-classes', 'Fetch my classes failed', {
+        message: error instanceof Error ? error.message : String(error),
+      })
+    );
+  }, [fetchMyClasses, selectedInstituteId]);
+
+  if (myClassesLoading) {
+    return <MyClassesSkeleton />;
+  }
 
   const getRoleLabel = (role: string) => {
     switch (role) {
@@ -36,14 +54,6 @@ const MyClassesPage: React.FC = () => {
     }
   };
 
-  if (myClassesLoading) {
-    return (
-      <div className="flex justify-center items-center h-64">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
-      </div>
-    );
-  }
-
   if (myClassesError) {
     return (
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

src/pages/timetable/TimetableListPage.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { CalendarToday, KeyboardArrowRight } from '@mui/icons-material';
+import useTimetableStore from '../../stores/timetableStore';
+import { format, parseISO } from 'date-fns';
+
+const TimetableListPage: React.FC = () => {
+  const { timetables, timetablesLoading, timetablesError, fetchTimetables } = useTimetableStore();
+
+  useEffect(() => {
+    fetchTimetables();
+  }, [fetchTimetables]);
+
+  if (timetablesLoading) {
+    return (
+      <div className="flex justify-center items-center h-64">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
+      </div>
+    );
+  }
+
+  // Treat fetch errors (including 404 — endpoint not yet available) as empty state
+  const showEmpty = timetablesError || timetables.length === 0;
+
+  return (
+    <div className="container mx-auto px-4 py-6 max-w-4xl">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Timetables</h1>
+          <p className="mt-1 text-gray-500">Your scheduled timetables</p>
+        </div>
+      </div>
+
+      {showEmpty ? (
+        <div className="text-center py-16">
+          <CalendarToday sx={{ fontSize: 48 }} className="mx-auto mb-4 text-gray-300" />
+          <h3 className="text-lg font-medium text-gray-900">No timetables yet</h3>
+          <p className="mt-2 text-gray-500">
+            Timetables are created from a class. Go to{' '}
+            <Link to="/classes" className="text-blue-600 hover:underline">Classes</Link>{' '}
+            to get started.
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {timetables.map((timetable) => (
+            <Link
+              key={timetable.id}
+              to={`/timetable/${timetable.id}`}
+              className="flex items-center gap-4 p-4 bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition-shadow"
+            >
+              <CalendarToday className="text-blue-500 flex-shrink-0" />
+              <div className="flex-1 min-w-0">
+                <h3 className="font-semibold text-gray-900 truncate">{timetable.name}</h3>
+                <p className="text-sm text-gray-500">
+                  {format(parseISO(timetable.start_date), 'MMM d, yyyy')}
+                  {timetable.end_date
+                    ? ` – ${format(parseISO(timetable.end_date), 'MMM d, yyyy')}`
+                    : ' (ongoing)'}
+                </p>
+              </div>
+              {timetable.recurrence_rule && (
+                <span className="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full flex-shrink-0">
+                  Recurring
+                </span>
+              )}
+              <KeyboardArrowRight className="text-gray-400 flex-shrink-0" />
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TimetableListPage;

src/pages/timetable/index.ts

@@ -3,6 +3,7 @@
  */
 
 export { default as TimetablePage } from './TimetablePage';
+export { default as TimetableListPage } from './TimetableListPage';
 export { default as ClassesPage } from './ClassesPage';
 export { default as LessonPage } from './LessonPage';
 export { default as TaughtLessonsPage } from './TaughtLessonsPage';

src/pages/tldraw/CCExamMarker/AnnotationManager.ts

@@ -1,92 +0,0 @@
-import { TLShapeId } from '@tldraw/tldraw';
-
-export interface AnnotationData {
-  studentIndex?: number;  // undefined for exam/markscheme annotations
-  pageIndex: number;
-  shapeId: TLShapeId;
-  bounds: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-  };
-}
-
-export class AnnotationManager {
-  private examAnnotations: Set<TLShapeId> = new Set();
-  private markSchemeAnnotations: Set<TLShapeId> = new Set();
-  private studentAnnotations: Map<number, Set<TLShapeId>> = new Map();
-  private annotationData: Map<TLShapeId, AnnotationData> = new Map();
-
-  addAnnotation(shapeId: TLShapeId, data: AnnotationData) {
-    this.annotationData.set(shapeId, data);
-    
-    if (data.studentIndex !== undefined) {
-      // Student response annotation
-      let studentSet = this.studentAnnotations.get(data.studentIndex);
-      if (!studentSet) {
-        studentSet = new Set();
-        this.studentAnnotations.set(data.studentIndex, studentSet);
-      }
-      studentSet.add(shapeId);
-    } else {
-      // Exam or mark scheme annotation
-      if (data.pageIndex < 0) {
-        this.examAnnotations.add(shapeId);
-      } else {
-        this.markSchemeAnnotations.add(shapeId);
-      }
-    }
-  }
-
-  removeAnnotation(shapeId: TLShapeId) {
-    const data = this.annotationData.get(shapeId);
-    if (!data) return;
-
-    if (data.studentIndex !== undefined) {
-      const studentSet = this.studentAnnotations.get(data.studentIndex);
-      studentSet?.delete(shapeId);
-    } else {
-      if (data.pageIndex < 0) {
-        this.examAnnotations.delete(shapeId);
-      } else {
-        this.markSchemeAnnotations.delete(shapeId);
-      }
-    }
-    this.annotationData.delete(shapeId);
-  }
-
-  getAnnotationsForStudent(studentIndex: number): TLShapeId[] {
-    return Array.from(this.studentAnnotations.get(studentIndex) || []);
-  }
-
-  getAnnotationsForExam(): TLShapeId[] {
-    return Array.from(this.examAnnotations);
-  }
-
-  getAnnotationsForMarkScheme(): TLShapeId[] {
-    return Array.from(this.markSchemeAnnotations);
-  }
-
-  getAnnotationData(shapeId: TLShapeId): AnnotationData | undefined {
-    return this.annotationData.get(shapeId);
-  }
-
-  clear() {
-    this.examAnnotations.clear();
-    this.markSchemeAnnotations.clear();
-    this.studentAnnotations.clear();
-    this.annotationData.clear();
-  }
-
-  // Future transcription support
-  addTranscriptionToAnnotation(shapeId: TLShapeId) {
-    const data = this.annotationData.get(shapeId);
-    if (data) {
-      this.annotationData.set(shapeId, {
-        ...data
-      });
-    }
-  }
-
-} 

src/pages/tldraw/CCExamMarker/CCExamMarker.tsx

@@ -1,108 +0,0 @@
-import React, { useState } from 'react';
-import { Box } from '@mui/material';
-import 'tldraw/tldraw.css';
-import { CCPdfEditor } from './CCPdfEditor';
-import { CCPdfPicker } from './CCPdfPicker';
-import { ExamPdfState } from './types';
-import './cc-exam-marker.css';
-import { HEADER_HEIGHT } from '../../Layout';
-import { CCPanel } from '../../../utils/tldraw/ui-overrides/components/CCPanel';
-
-export const CCExamMarker = () => {
-  const [state, setState] = useState<ExamPdfState>({ phase: 'pick' });
-  const [view, setView] = useState<'exam-and-markscheme' | 'student-responses'>('exam-and-markscheme');
-  const [currentStudentIndex, setCurrentStudentIndex] = useState(0);
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [isPinned, setIsPinned] = useState(false);
-
-  const handleViewChange = (newView: 'exam-and-markscheme' | 'student-responses') => {
-    setView(newView);
-  };
-
-  const handleNextStudent = () => {
-    if (state.phase === 'edit' && 'studentResponses' in state && 'examPaper' in state) {
-      const totalStudents = Math.floor(state.studentResponses.pages.length / state.examPaper.pages.length);
-      if (currentStudentIndex < totalStudents - 1) {
-        setCurrentStudentIndex(prev => prev + 1);
-      }
-    }
-  };
-
-  const handlePreviousStudent = () => {
-    if (currentStudentIndex > 0) {
-      setCurrentStudentIndex(prev => prev - 1);
-    }
-  };
-
-  return (
-    <Box sx={{ 
-      position: 'fixed',
-      inset: 0,
-      top: `${HEADER_HEIGHT}px`,
-      display: 'flex',
-      flexDirection: 'column',
-      bgcolor: 'background.default',
-      color: 'text.primary',
-    }}>
-      {state.phase === 'pick' ? (
-        <CCPdfPicker 
-          onOpenPdfs={(pdfs) =>
-            setState({
-              phase: 'edit',
-              examPaper: pdfs.examPaper,
-              markScheme: pdfs.markScheme,
-              studentResponses: pdfs.studentResponses,
-            })
-          }
-        />
-      ) : (
-        <Box sx={{ flex: 1, position: 'relative' }}>
-          <Box sx={{ 
-            position: 'absolute',
-            inset: 0,
-            bgcolor: 'background.paper',
-          }}>
-            <CCPdfEditor
-              examPaper={state.examPaper}
-              markScheme={state.markScheme}
-              studentResponses={state.studentResponses}
-              currentView={view}
-              currentStudentIndex={currentStudentIndex}
-              onEditorMount={(editor) => {
-                if (!editor) return null;
-                const examMarkerProps = {
-                  editor,
-                  currentView: view,
-                  onViewChange: handleViewChange,
-                  currentStudentIndex,
-                  totalStudents: Math.floor(state.studentResponses.pages.length / state.examPaper.pages.length),
-                  onPreviousStudent: handlePreviousStudent,
-                  onNextStudent: handleNextStudent,
-                  getCurrentPdf: () => {
-                    if (!editor) return null;
-                    const currentPageId = editor.getCurrentPageId();
-                    if (currentPageId.includes('exam-page')) {
-                      return state.examPaper;
-                    } else if (currentPageId.includes('mark-scheme-page')) {
-                      return state.markScheme;
-                    } else if (currentPageId.includes('student-response')) {
-                      return state.studentResponses;
-                    }
-                    return null;
-                  },
-                };
-                return <CCPanel 
-                  examMarkerProps={examMarkerProps} 
-                  isExpanded={isExpanded}
-                  isPinned={isPinned}
-                  onExpandedChange={setIsExpanded}
-                  onPinnedChange={setIsPinned}
-                />;
-              }}
-            />
-          </Box>
-        </Box>
-      )}
-    </Box>
-  );
-};

src/pages/tldraw/CCExamMarker/CCExportPdfButton.tsx

@@ -1,114 +0,0 @@
-import { PDFDocument } from 'pdf-lib';
-import { useState } from 'react';
-import { Editor, exportToBlob } from '@tldraw/tldraw';
-import { Button } from '@mui/material';
-import { Pdf } from './types';
-
-interface CCExportPdfButtonProps {
-  editor: Editor;
-  pdf: Pdf;
-}
-
-export function CCExportPdfButton({ editor, pdf }: CCExportPdfButtonProps) {
-  const [exportProgress, setExportProgress] = useState<number | null>(null);
-
-  const exportPdf = async (
-    editor: Editor,
-    { name, source, pages }: Pdf,
-    onProgress: (progress: number) => void
-  ) => {
-    const totalThings = pages.length * 2 + 2;
-    let progressCount = 0;
-    const tickProgress = () => {
-      progressCount++;
-      onProgress(progressCount / totalThings);
-    };
-
-    const pdf = await PDFDocument.load(source);
-    tickProgress();
-    const pdfPages = pdf.getPages();
-
-    if (pdfPages.length !== pages.length) {
-      throw new Error('PDF page count mismatch');
-    }
-
-    const pageShapeIds = new Set(pages.map((page) => page.shapeId));
-    const allIds = Array.from(editor.getCurrentPageShapeIds()).filter(
-      (id) => !pageShapeIds.has(id)
-    );
-
-    for (let i = 0; i < pages.length; i++) {
-      const page = pages[i];
-      const pdfPage = pdfPages[i];
-      const {bounds} = page;
-
-      const shapesInBounds = allIds.filter((id) => {
-        const shapePageBounds = editor.getShapePageBounds(id);
-        if (!shapePageBounds) return false;
-        return shapePageBounds.collides(bounds);
-      });
-
-      if (shapesInBounds.length === 0) {
-        tickProgress();
-        tickProgress();
-        continue;
-      }
-
-      const exportedPng = await exportToBlob({
-        editor,
-        ids: allIds,
-        format: 'png',
-        opts: { background: false, bounds: page.bounds, padding: 0, scale: 1 },
-      });
-
-      tickProgress();
-
-      pdfPage.drawImage(await pdf.embedPng(await exportedPng.arrayBuffer()), {
-        x: 0,
-        y: 0,
-        width: pdfPage.getWidth(),
-        height: pdfPage.getHeight(),
-      });
-
-      tickProgress();
-    }
-
-    const pdfBytes = await pdf.save();
-    const url = URL.createObjectURL(
-      new Blob([pdfBytes.buffer as ArrayBuffer], { type: 'application/pdf' })
-    );
-    tickProgress();
-
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = name;
-    a.click();
-    URL.revokeObjectURL(url);
-  };
-
-  return (
-    <Button
-      className="CCExportPdfButton"
-      variant="contained"
-      color="primary"
-      onClick={async () => {
-        setExportProgress(0);
-        try {
-          await exportPdf(editor, pdf, setExportProgress);
-        } finally {
-          setExportProgress(null);
-        }
-      }}
-      sx={{
-        position: 'absolute',
-        top: 16,
-        right: 16,
-        zIndex: 1000,
-      }}
-    >
-      {exportProgress
-        ? `Exporting... ${Math.round(exportProgress * 100)}%`
-        : 'Export PDF'}
-    </Button>
-  );
-} 

src/pages/tldraw/CCExamMarker/CCPdfEditor.tsx

@@ -1,385 +0,0 @@
-import React from 'react';
-import { Box } from '@mui/material';
-import { Editor, TLPageId, Box as TLBox } from '@tldraw/editor';
-import { Tldraw } from '@tldraw/tldraw';
-import { useCallback, useEffect, useState, useRef } from 'react';
-import { ExamPdfs } from './types';
-import { AnnotationManager, AnnotationData } from './AnnotationManager';
-import { logger } from '../../../debugConfig';
-
-const PAGE_SPACING = 32; // Same spacing as the example
-
-interface CCPdfEditorProps extends ExamPdfs {
-  currentView: 'exam-and-markscheme' | 'student-responses';
-  currentStudentIndex: number;
-  onEditorMount: (editor: Editor) => React.ReactNode;
-}
-
-export function CCPdfEditor({
-  examPaper,
-  markScheme,
-  studentResponses,
-  currentView,
-  currentStudentIndex,
-  onEditorMount,
-}: CCPdfEditorProps) {
-  const [editor, setEditor] = useState<Editor | null>(null);
-  const [pagesInitialized, setPagesInitialized] = useState(false);
-  const annotationManager = useRef(new AnnotationManager());
-
-  const handleMount = useCallback((editor: Editor) => {
-    setEditor(editor);
-    onEditorMount(editor);
-
-    // Subscribe to shape changes
-    editor.on('change', () => {
-      const shapes = editor.getCurrentPageShapeIds();
-      logger.debug('cc-exam-marker', '🔄 Shape change detected', {
-        totalShapes: shapes.size,
-        currentPage: editor.getCurrentPageId()
-      });
-
-      shapes.forEach(shapeId => {
-        const shape = editor.getShape(shapeId);
-        if (shape && !shape.isLocked) {  // Only track non-locked shapes (annotations)
-          const bounds = editor.getShapePageBounds(shapeId);
-          if (bounds) {
-            const currentPageId = editor.getCurrentPageId();
-            let annotationData: AnnotationData;
-
-            if (currentPageId.includes('student-response')) {
-              const studentIndex = parseInt(currentPageId.split('-').pop() || '0', 10);
-              
-              // Find which page this annotation belongs to by checking collision with page bounds
-              const pageShapes = Array.from(shapes).filter(id => {
-                const s = editor.getShape(id);
-                return s?.isLocked;  // Locked shapes are our PDF pages
-              });
-
-              let pageIndex = -1;  // Default to -1 if no collision found
-              for (let i = 0; i < pageShapes.length; i++) {
-                const pageShape = editor.getShape(pageShapes[i]);
-                if (!pageShape) continue;
-                
-                const pageBounds = editor.getShapePageBounds(pageShapes[i]);
-                if (!pageBounds) continue;
-
-                // Check if the annotation's center point is within the page bounds
-                const annotationCenter = {
-                  x: bounds.x + bounds.width / 2,
-                  y: bounds.y + bounds.height / 2
-                };
-
-                if (annotationCenter.x >= pageBounds.x && 
-                    annotationCenter.x <= pageBounds.x + pageBounds.width &&
-                    annotationCenter.y >= pageBounds.y && 
-                    annotationCenter.y <= pageBounds.y + pageBounds.height) {
-                  pageIndex = i;
-                  break;
-                }
-              }
-
-              logger.debug('cc-exam-marker', '📏 Calculated page index', {
-                shapeId,
-                shapeBounds: bounds,
-                pageIndex,
-                studentIndex
-              });
-
-              annotationData = {
-                studentIndex,
-                pageIndex,
-                shapeId,
-                bounds: {
-                  x: bounds.x,
-                  y: bounds.y,
-                  width: bounds.width,
-                  height: bounds.height,
-                }
-              };
-            } else {
-              // For exam/mark scheme, use current page type as index
-              const pageIndex = currentPageId.includes('exam') ? -1 : 1;
-              annotationData = {
-                pageIndex,
-                shapeId,
-                bounds: {
-                  x: bounds.x,
-                  y: bounds.y,
-                  width: bounds.width,
-                  height: bounds.height,
-                }
-              };
-            }
-
-            logger.debug('cc-exam-marker', '📝 Adding/updating annotation', {
-              shapeId,
-              annotationData,
-              currentPage: currentPageId
-            });
-
-            annotationManager.current.addAnnotation(shapeId, annotationData);
-          }
-        }
-      });
-    });
-  }, [onEditorMount]);
-
-  // Initial setup effect - runs only once when editor is mounted
-  useEffect(() => {
-    if (!editor || pagesInitialized) return;
-
-    const setupExamAndMarkScheme = async () => {
-      const examPageId = 'page:exam-page' as TLPageId;
-      const markSchemePageId = 'page:mark-scheme-page' as TLPageId;
-
-      // Calculate vertical layout for exam pages
-      let top = 0;
-      let widest = 0;
-      const examPages = examPaper.pages.map(page => {
-        const width = page.bounds.width;
-        const height = page.bounds.height;
-        const currentTop = top;
-        top += height + PAGE_SPACING;
-        widest = Math.max(widest, width);
-        return { ...page, top: currentTop, width, height };
-      });
-
-      // Center pages horizontally
-      examPages.forEach(page => {
-        page.bounds = new TLBox((widest - page.width) / 2, page.top, page.width, page.height);
-      });
-
-      // Create exam paper page
-      editor.createPage({ 
-        id: examPageId,
-        name: 'Exam Paper',
-      });
-      editor.setCurrentPage(examPageId);
-
-      // Create assets and shapes for exam pages
-      examPages.forEach((page) => {
-        editor.createAssets([{
-          id: page.assetId,
-          typeName: 'asset',
-          type: 'image',
-          props: {
-            w: page.bounds.width,
-            h: page.bounds.height,
-            name: 'PDF Page',
-            src: page.src,
-            isAnimated: false,
-            mimeType: 'image/png',
-          },
-          meta: {},
-        }]);
-
-        editor.createShape({
-          id: page.shapeId,
-          type: 'image',
-          x: page.bounds.x,
-          y: page.bounds.y,
-          props: {
-            w: page.bounds.width,
-            h: page.bounds.height,
-            assetId: page.assetId,
-          },
-          isLocked: true,
-        });
-      });
-
-      // Similar process for mark scheme pages
-      let markSchemeTop = 0;
-      const markSchemePages = markScheme.pages.map(page => {
-        const width = page.bounds.width;
-        const height = page.bounds.height;
-        const currentTop = markSchemeTop;
-        markSchemeTop += height + PAGE_SPACING;
-        return {
-          ...page,
-          bounds: new TLBox((widest - width) / 2, currentTop, width, height)
-        };
-      });
-
-      // Create mark scheme page
-      editor.createPage({ 
-        id: markSchemePageId,
-        name: 'Mark Scheme',
-      });
-      editor.setCurrentPage(markSchemePageId);
-
-      // Create assets and shapes for mark scheme pages
-      markSchemePages.forEach((page) => {
-        editor.createAssets([{
-          id: page.assetId,
-          typeName: 'asset',
-          type: 'image',
-          props: {
-            w: page.bounds.width,
-            h: page.bounds.height,
-            name: 'PDF Page',
-            src: page.src,
-            isAnimated: false,
-            mimeType: 'image/png',
-          },
-          meta: {},
-        }]);
-
-        editor.createShape({
-          id: page.shapeId,
-          type: 'image',
-          x: page.bounds.x,
-          y: page.bounds.y,
-          props: {
-            w: page.bounds.width,
-            h: page.bounds.height,
-            assetId: page.assetId,
-          },
-          isLocked: true,
-        });
-      });
-
-      // Go back to exam page
-      editor.setCurrentPage(examPageId);
-    };
-
-    const setupStudentResponses = async () => {
-      const pagesPerStudent = examPaper.pages.length;
-      const totalStudents = Math.floor(studentResponses.pages.length / pagesPerStudent);
-
-      for (let studentIndex = 0; studentIndex < totalStudents; studentIndex++) {
-        const startPage = studentIndex * pagesPerStudent;
-        const endPage = startPage + pagesPerStudent;
-        const studentPageId = `page:student-response-${studentIndex}` as TLPageId;
-
-        // Calculate vertical layout
-        let top = 0;
-        let widest = 0;
-        const studentPages = studentResponses.pages
-          .slice(startPage, endPage)
-          .map(page => {
-            const width = page.bounds.width;
-            const height = page.bounds.height;
-            const currentTop = top;
-            top += height + PAGE_SPACING;
-            widest = Math.max(widest, width);
-            return { ...page, top: currentTop, width, height };
-          });
-
-        // Center pages horizontally
-        studentPages.forEach(page => {
-          page.bounds = new TLBox((widest - page.width) / 2, page.top, page.width, page.height);
-        });
-
-        // Create page for this student
-        editor.createPage({ 
-          id: studentPageId,
-          name: `Student ${studentIndex + 1}`,
-        });
-        editor.setCurrentPage(studentPageId);
-
-        // Create assets and shapes
-        studentPages.forEach((page) => {
-          editor.createAssets([{
-            id: page.assetId,
-            typeName: 'asset',
-            type: 'image',
-            props: {
-              w: page.bounds.width,
-              h: page.bounds.height,
-              name: 'PDF Page',
-              src: page.src,
-              isAnimated: false,
-              mimeType: 'image/png',
-            },
-            meta: {},
-          }]);
-
-          editor.createShape({
-            id: page.shapeId,
-            type: 'image',
-            x: page.bounds.x,
-            y: page.bounds.y,
-            props: {
-              w: page.bounds.width,
-              h: page.bounds.height,
-              assetId: page.assetId,
-            },
-            isLocked: true,
-          });
-        });
-      }
-    };
-
-    // Initial setup of all pages
-    const setup = async () => {
-      await setupExamAndMarkScheme();
-      await setupStudentResponses();
-      setPagesInitialized(true);
-    };
-
-    setup();
-  }, [editor, pagesInitialized, examPaper, markScheme, studentResponses]);
-
-  // Effect to handle view changes and navigation
-  useEffect(() => {
-    if (!editor || !pagesInitialized) return;
-
-    // Switch to appropriate page based on current view
-    const targetPageId = currentView === 'exam-and-markscheme'
-      ? ('page:exam-page' as TLPageId)
-      : (`page:student-response-${currentStudentIndex}` as TLPageId);
-
-    logger.debug('cc-exam-marker', '🔄 Switching view', {
-      currentView,
-      currentStudentIndex,
-      targetPageId
-    });
-
-    editor.setCurrentPage(targetPageId);
-
-    // Update camera constraints for current page
-    const currentPageBounds = Array.from(editor.getCurrentPageShapeIds()).reduce(
-      (acc: TLBox | null, shapeId) => {
-        const bounds = editor.getShapePageBounds(shapeId);
-        return bounds ? (acc ? acc.union(bounds) : bounds) : acc;
-      },
-      null as TLBox | null
-    );
-
-    if (currentPageBounds) {
-      const isMobile = editor.getViewportScreenBounds().width < 840;
-      editor.setCameraOptions({
-        constraints: {
-          bounds: currentPageBounds,
-          padding: { x: isMobile ? 16 : 164, y: 64 },
-          origin: { x: 0.5, y: 0 },
-          initialZoom: 'fit-x-100',
-          baseZoom: 'default',
-          behavior: 'contain',
-        },
-      });
-      editor.setCamera(editor.getCamera(), { reset: true });
-    }
-  }, [editor, pagesInitialized, currentView, currentStudentIndex]);
-
-  // Expose annotationManager to parent through onEditorMount
-  useEffect(() => {
-    if (editor) {
-      onEditorMount(editor);
-      // @ts-expect-error - Adding custom property to editor for CCExamMarkerPanel access
-      editor.annotationManager = annotationManager.current;
-    }
-  }, [editor, onEditorMount]);
-
-  return (
-    <Box sx={{ width: '100%', height: '100%', position: 'relative' }}>
-      <Tldraw 
-        onMount={handleMount}
-        components={{
-          InFrontOfTheCanvas: () => onEditorMount(editor!)
-        }}
-      />
-    </Box>
-  );
-} 

src/pages/tldraw/CCExamMarker/CCPdfPicker.tsx

@@ -1,210 +0,0 @@
-import { useState } from 'react';
-import { Box, Button, Stack, Typography } from '@mui/material';
-import { AssetRecordType, Box as TLBox, createShapeId } from '@tldraw/editor';
-import { ExamPdfs, Pdf, PdfPage } from './types';
-
-interface CCPdfPickerProps {
-  onOpenPdfs: (pdfs: ExamPdfs) => void;
-}
-
-const pageSpacing = 32;
-
-export function CCPdfPicker({ onOpenPdfs }: CCPdfPickerProps) {
-  const [isLoading, setIsLoading] = useState(false);
-  const [selectedPdfs, setSelectedPdfs] = useState<Partial<ExamPdfs>>({});
-
-  async function loadPdf(name: string, source: ArrayBuffer): Promise<Pdf> {
-    const PdfJS = await import('pdfjs-dist');
-    PdfJS.GlobalWorkerOptions.workerSrc = new URL(
-      'pdfjs-dist/build/pdf.worker.min.mjs',
-      import.meta.url
-    ).toString();
-
-    const pdf = await PdfJS.getDocument(source.slice()).promise;
-    const pages: PdfPage[] = [];
-    const canvas = window.document.createElement('canvas');
-    const context = canvas.getContext('2d');
-    if (!context) throw new Error('Failed to create canvas context');
-
-    const visualScale = 1.5;
-    const scale = window.devicePixelRatio;
-    let top = 0;
-    let widest = 0;
-
-    for (let i = 1; i <= pdf.numPages; i++) {
-      const page = await pdf.getPage(i);
-      const viewport = page.getViewport({ scale: scale * visualScale });
-      canvas.width = viewport.width;
-      canvas.height = viewport.height;
-
-      const renderContext = {
-        canvasContext: context,
-        viewport,
-      };
-
-      await page.render(renderContext).promise;
-      const width = viewport.width / scale;
-      const height = viewport.height / scale;
-
-      pages.push({
-        src: canvas.toDataURL(),
-        bounds: new TLBox(0, top, width, height),
-        assetId: AssetRecordType.createId(),
-        shapeId: createShapeId(),
-      });
-
-      top += height + pageSpacing;
-      widest = Math.max(widest, width);
-    }
-
-    canvas.width = 0;
-    canvas.height = 0;
-
-    for (const page of pages) {
-      page.bounds.x = (widest - page.bounds.width) / 2;
-    }
-
-    return {
-      name,
-      pages,
-      source,
-    };
-  }
-
-  const handleFileSelect = async (type: keyof ExamPdfs, file: File) => {
-    setIsLoading(true);
-    try {
-      const pdf = await loadPdf(file.name, await file.arrayBuffer());
-
-      // Validate student responses page count
-      if (type === 'studentResponses' && selectedPdfs.examPaper) {
-        const examPageCount = selectedPdfs.examPaper.pages.length;
-        if (pdf.pages.length % examPageCount !== 0) {
-          alert(`Student responses PDF must have a number of pages that is a multiple of the exam paper's ${examPageCount} pages.\n\nStudent responses PDF has ${pdf.pages.length} pages, which is not a multiple of ${examPageCount}.`);
-          return;
-        }
-      }
-
-      setSelectedPdfs((prev) => ({ ...prev, [type]: pdf }));
-    } catch (error) {
-      console.error('Error loading PDF:', error);
-      alert('Error loading PDF (mismatch between responses and exam paper). Please try again.');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const createFileInput = (type: keyof ExamPdfs) => {
-    const input = window.document.createElement('input');
-    input.type = 'file';
-    input.accept = 'application/pdf';
-    input.addEventListener('change', async (e) => {
-      const fileList = (e.target as HTMLInputElement).files;
-      if (!fileList || fileList.length === 0) return;
-      await handleFileSelect(type, fileList[0]);
-    });
-    input.click();
-  };
-
-  const allPdfsSelected = () => {
-    return (
-      selectedPdfs.examPaper &&
-      selectedPdfs.markScheme &&
-      selectedPdfs.studentResponses
-    );
-  };
-
-  if (isLoading) {
-    return (
-      <Box className="CCPdfPicker" sx={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '100%',
-        width: '100%'
-      }}>
-        <Typography>Loading...</Typography>
-      </Box>
-    );
-  }
-
-  return (
-    <Box className="CCPdfPicker" sx={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: '100%',
-      width: '100%'
-    }}>
-      <Stack 
-        spacing={4} 
-        alignItems="center" 
-        sx={{ 
-          maxWidth: '800px',
-          width: '100%',
-          p: 3
-        }}
-      >
-        <Typography variant="h5">Select PDF Files</Typography>
-        
-        <Stack 
-          direction="row" 
-          sx={{ 
-            width: '100%', 
-            justifyContent: 'center',
-            gap: 4  // Using MUI's spacing unit (1 unit = 8px, so 4 = 32px)
-          }}
-        >
-          <Button
-            variant={selectedPdfs.examPaper ? 'contained' : 'outlined'}
-            onClick={() => createFileInput('examPaper')}
-            sx={{ 
-              minWidth: '180px',
-              height: '48px'
-            }}
-          >
-            {selectedPdfs.examPaper ? '✓ Exam Paper' : 'Select Exam Paper'}
-          </Button>
-
-          <Button
-            variant={selectedPdfs.markScheme ? 'contained' : 'outlined'}
-            onClick={() => createFileInput('markScheme')}
-            sx={{ 
-              minWidth: '180px',
-              height: '48px'
-            }}
-          >
-            {selectedPdfs.markScheme ? '✓ Mark Scheme' : 'Select Mark Scheme'}
-          </Button>
-
-          <Button
-            variant={selectedPdfs.studentResponses ? 'contained' : 'outlined'}
-            onClick={() => createFileInput('studentResponses')}
-            sx={{ 
-              minWidth: '180px',
-              height: '48px'
-            }}
-          >
-            {selectedPdfs.studentResponses ? '✓ Student Responses' : 'Select Student Responses'}
-          </Button>
-        </Stack>
-
-        {allPdfsSelected() && (
-          <Box sx={{ mt: 4, width: '100%', display: 'flex', justifyContent: 'center' }}>
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={() => onOpenPdfs(selectedPdfs as ExamPdfs)}
-              sx={{ 
-                minWidth: '180px',
-                height: '48px'
-              }}
-            >
-              Continue
-            </Button>
-          </Box>
-        )}
-      </Stack>
-    </Box>
-  );
-} 

src/pages/tldraw/CCExamMarker/cc-exam-marker.css

@@ -1,61 +0,0 @@
-.CCExamMarker {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.CCExamMarker .CCPdfPicker {
-  position: absolute;
-  inset: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.CCExamMarker .CCPdfBgRenderer {
-  position: absolute;
-  pointer-events: none;
-}
-
-.CCExamMarker .CCPdfBgRenderer img {
-  position: absolute;
-}
-
-.CCExamMarker .PageOverlayScreen-screen {
-  pointer-events: none;
-  z-index: -1;
-  fill: var(--color-background);
-  fill-opacity: 0.8;
-  stroke: none;
-}
-
-.CCExamMarker .PageOverlayScreen-outline {
-  position: absolute;
-  pointer-events: none;
-  z-index: -1;
-  box-shadow: var(--shadow-2);
-}
-
-.CCExamMarker .CCExportPdfButton {
-  font: inherit;
-  background: var(--color-primary);
-  border: none;
-  color: var(--color-selected-contrast);
-  font-size: 1rem;
-  padding: 0.5rem 1rem;
-  border-radius: 6px;
-  margin: 6px;
-  margin-bottom: 0;
-  pointer-events: all;
-  z-index: var(--layer-panels);
-  border: 2px solid var(--color-background);
-  cursor: pointer;
-}
-
-.CCExamMarker .CCExportPdfButton:hover {
-  filter: brightness(1.1);
-} 

src/pages/tldraw/CCExamMarker/types.ts

@@ -1,44 +0,0 @@
-import { Box, TLAssetId, TLShapeId } from '@tldraw/tldraw';
-
-export interface PdfPage {
-  src: string;
-  bounds: Box;
-  assetId: TLAssetId;
-  shapeId: TLShapeId;
-}
-
-export interface Pdf {
-  name: string;
-  pages: PdfPage[];
-  source: string | ArrayBuffer;
-}
-
-export interface ExamPdfs {
-  examPaper: Pdf;
-  markScheme: Pdf;
-  studentResponses: Pdf;
-}
-
-export type ExamPdfState =
-  | {
-      phase: 'pick';
-    }
-  | {
-      phase: 'edit';
-      examPaper: Pdf;
-      markScheme: Pdf;
-      studentResponses: Pdf;
-    };
-
-export interface StudentResponse {
-  studentId: string;
-  pageStart: number;
-  pageEnd: number;
-}
-
-export interface ExamMetadata {
-  totalPages: number;
-  pagesPerStudent: number;
-  totalStudents: number;
-  studentResponses: StudentResponse[];
-} 

src/pages/tldraw/ExamMarkerSpikePage.tsx

@@ -0,0 +1,170 @@
+import React, { useMemo, useRef, useState } from 'react'
+import {
+  Tldraw,
+  createTLStore,
+  createTLSchemaFromUtils,
+  defaultBindingUtils,
+  defaultShapeUtils,
+  Editor,
+  TLAnyBindingUtilConstructor,
+  TLAnyShapeUtilConstructor,
+  DEFAULT_SUPPORT_VIDEO_TYPES,
+  DEFAULT_SUPPORTED_IMAGE_TYPES,
+} from '@tldraw/tldraw'
+import { allBindingUtils } from '../../utils/tldraw/bindings'
+import { allShapeUtils } from '../../utils/tldraw/shapes'
+import { customAssets } from '../../utils/tldraw/assets'
+import { getUiComponents, getUiOverrides } from '../../utils/tldraw/ui-overrides'
+import { HEADER_HEIGHT } from '../Layout'
+import { devTools } from '../../utils/tldraw/tools'
+import {
+  activateExamMarkerTool,
+  EXAM_MARKER_BOX_TYPE,
+  ExamMarkerBoxShapeUtil,
+  ExamMarkerBoxTool,
+  placeExamMarkerSpike,
+} from '../../utils/tldraw/exam-marker-spike'
+
+const spikeShapeUtils = [...allShapeUtils, ExamMarkerBoxShapeUtil] as TLAnyShapeUtilConstructor[]
+const spikeBindingUtils = allBindingUtils as TLAnyBindingUtilConstructor[]
+const spikeTools = [...devTools, ExamMarkerBoxTool]
+
+const spikeSchema = createTLSchemaFromUtils({
+  shapeUtils: [...defaultShapeUtils, ...spikeShapeUtils],
+  bindingUtils: [...defaultBindingUtils, ...spikeBindingUtils],
+})
+
+export default function ExamMarkerSpikePage() {
+  const editorRef = useRef<Editor | null>(null)
+  const [status, setStatus] = useState('Ready to insert an image and a custom exam-marker box.')
+
+  const store = useMemo(() => {
+    const nextStore = createTLStore({
+      schema: spikeSchema,
+      shapeUtils: spikeShapeUtils,
+      bindingUtils: spikeBindingUtils,
+    })
+    ;(nextStore as unknown as { ensureStoreIsUsable(): void }).ensureStoreIsUsable()
+    return nextStore
+  }, [])
+
+  const onMount = (editor: Editor) => {
+    editorRef.current = editor
+  }
+
+  const insertSpike = () => {
+    if (!editorRef.current) return
+    const { imageId, boxId } = placeExamMarkerSpike(editorRef.current)
+    const toolId = activateExamMarkerTool(editorRef.current)
+    setStatus(`Inserted image ${imageId} and custom box ${boxId}; active tool is ${toolId}.`)
+  }
+
+  const focusBox = () => {
+    if (!editorRef.current) return
+    const current = editorRef.current.getCurrentPageShapes().find((shape) => shape.type === EXAM_MARKER_BOX_TYPE)
+    if (!current) {
+      setStatus('No exam-marker box found yet.')
+      return
+    }
+    const bounds = editorRef.current.getShapePageBounds(current)
+    if (bounds) {
+      editorRef.current.zoomToBounds(bounds)
+      setStatus('Focused the camera on the exam-marker box using getShapePageBounds + zoomToBounds.')
+    }
+  }
+
+  const uiOverrides = getUiOverrides(false)
+  const uiComponents = getUiComponents(false)
+
+  return (
+    <div style={{ position: 'fixed', inset: 0, top: HEADER_HEIGHT, background: '#f8fafc' }}>
+      <div
+        style={{
+          position: 'absolute',
+          zIndex: 10,
+          top: 16,
+          left: 16,
+          display: 'flex',
+          gap: 12,
+          alignItems: 'center',
+          padding: '10px 12px',
+          borderRadius: 16,
+          background: 'rgba(15, 23, 42, 0.9)',
+          color: 'white',
+          boxShadow: '0 10px 30px rgba(15, 23, 42, 0.22)',
+          maxWidth: 880,
+        }}
+      >
+        <div style={{ display: 'grid', gap: 4 }}>
+          <strong style={{ fontSize: 14 }}>Exam-marker spike</strong>
+          <span style={{ fontSize: 12, opacity: 0.9 }}>{status}</span>
+        </div>
+        <button
+          onClick={insertSpike}
+          style={{
+            marginLeft: 'auto',
+            padding: '8px 12px',
+            borderRadius: 10,
+            border: 'none',
+            background: '#f59e0b',
+            color: '#111827',
+            fontWeight: 700,
+            cursor: 'pointer',
+          }}
+        >
+          Insert image + marker box
+        </button>
+        <button
+          onClick={() => {
+            if (!editorRef.current) return
+            const toolId = activateExamMarkerTool(editorRef.current)
+            setStatus(`Activated tool ${toolId}. Drag on the canvas to create another marker box.`)
+          }}
+          style={{
+            padding: '8px 12px',
+            borderRadius: 10,
+            border: '1px solid rgba(255,255,255,0.2)',
+            background: 'transparent',
+            color: 'white',
+            fontWeight: 700,
+            cursor: 'pointer',
+          }}
+        >
+          Activate box tool
+        </button>
+        <button
+          onClick={focusBox}
+          style={{
+            padding: '8px 12px',
+            borderRadius: 10,
+            border: '1px solid rgba(255,255,255,0.2)',
+            background: 'transparent',
+            color: 'white',
+            fontWeight: 700,
+            cursor: 'pointer',
+          }}
+        >
+          Focus marker
+        </button>
+      </div>
+
+      <Tldraw
+        store={store}
+        tools={spikeTools}
+        shapeUtils={spikeShapeUtils}
+        bindingUtils={spikeBindingUtils}
+        components={uiComponents}
+        overrides={uiOverrides}
+        assetUrls={customAssets}
+        autoFocus
+        hideUi={false}
+        inferDarkMode={false}
+        acceptedImageMimeTypes={DEFAULT_SUPPORTED_IMAGE_TYPES}
+        acceptedVideoMimeTypes={DEFAULT_SUPPORT_VIDEO_TYPES}
+        maxImageDimension={Infinity}
+        maxAssetSize={100 * 1024 * 1024}
+        onMount={onMount}
+      />
+    </div>
+  )
+}

src/pages/tldraw/singlePlayerPage.tsx

@@ -6,7 +6,8 @@ import {
     useTldrawUser,
     DEFAULT_SUPPORT_VIDEO_TYPES,
     DEFAULT_SUPPORTED_IMAGE_TYPES,
-    TLStore
+    TLStore,
+    createTLStore,
 } from '@tldraw/tldraw';
 import { useTLDraw } from '../../contexts/TLDrawContext';
 import { useAuth } from '../../contexts/AuthContext';
@@ -80,80 +81,94 @@ export default function SinglePlayerPage() {
         setUserPreferences: setTldrawPreferences
     });
 
-    // Orchestrated context.node lifecycle — replaces 3 separate effects
     const [canvasPhase, setCanvasPhase] = useState<
-        'idle' | 'store-init' | 'snapshot-loading' | 'node-placing' | 'ready' | 'navigating' | 'error'
+        'idle' | 'store-init' | 'snapshot-loading' | 'ready' | 'error'
     >('idle');
-    const phaseError = useRef<string>('');
 
+    // Effect 1: Create the store ONCE per user session. Never recreate on node changes.
+    // Disposing the store while Tldraw is subscribed causes currentPageId crashes; keeping
+    // the store alive for the component lifetime avoids all disposal race conditions.
     useEffect(() => {
         if (!user) return;
-        let cancelled = false;
 
-        const run = async () => {
-            try {
-                setCanvasPhase('store-init');
-                const newStore = localStoreService.getStore({
-                    schema: customSchema,
-                    shapeUtils: allShapeUtils,
-                    bindingUtils: allBindingUtils
-                });
+        setCanvasPhase('store-init');
+        const store = createTLStore({
+            schema: customSchema,
+            shapeUtils: allShapeUtils,
+            bindingUtils: allBindingUtils,
+        });
+        // Initialize default tldraw records (TLINSTANCE, page, cameras) before mount
+        (store as unknown as { ensureStoreIsUsable(): void }).ensureStoreIsUsable();
 
-                const snapSvc = new NavigationSnapshotService(newStore, editorRef.current || undefined);
-                if (accessToken) snapSvc.setAccessToken(accessToken);
-                snapshotServiceRef.current = snapSvc;
+        const snapSvc = new NavigationSnapshotService(store, undefined);
+        if (accessToken) snapSvc.setAccessToken(accessToken);
+        snapshotServiceRef.current = snapSvc;
 
-                if (context.node) {
-                    setCanvasPhase('snapshot-loading');
-                    const path = context.node.node_storage_path;
-                    if (path) {
-                        await NavigationSnapshotService.loadNodeSnapshotFromDatabase(
-                            path,
-                            accessToken || '',
-                            newStore,
-                            setLoadingState,
-                            undefined,
-                            editorRef.current || undefined
-                        );
-                        snapSvc.setCurrentNodePath(path);
-                    }
-                }
+        let debounce: ReturnType<typeof setTimeout> | null = null;
+        const unsubscribe = store.listen(() => {
+            if (!snapshotServiceRef.current?.getCurrentNodePath()) return;
+            if (debounce) clearTimeout(debounce);
+            debounce = setTimeout(async () => {
+                await snapshotServiceRef.current?.forceSaveCurrentNode().catch(() => {});
+            }, 2000);
+        });
 
-                if (cancelled) {
-                    newStore.dispose();
-                    return;
-                }
+        storeRef.current = store;
+        setStoreReady(true);
+        setCanvasPhase('ready');
 
-                let debounce: ReturnType<typeof setTimeout> | null = null;
-                newStore.listen(() => {
-                    if (!snapshotServiceRef.current?.getCurrentNodePath()) return;
-                    if (debounce) clearTimeout(debounce);
-                    debounce = setTimeout(async () => {
-                        await snapshotServiceRef.current?.forceSaveCurrentNode().catch(() => {});
-                    }, 2000);
-                });
-
-                storeRef.current = newStore;
-                setStoreReady(true);
-                setCanvasPhase('ready');
-            } catch (e) {
-                phaseError.current = e instanceof Error ? e.message : 'Init failed';
-                setCanvasPhase('error');
-            }
-        };
-
-        run();
         return () => {
-            cancelled = true;
+            unsubscribe?.();
             snapshotServiceRef.current?.forceSaveCurrentNode().catch(() => {});
             snapshotServiceRef.current?.clearCurrentNode();
             snapshotServiceRef.current = null;
-            storeRef.current?.dispose();
-            storeRef.current = null;
             setStoreReady(false);
             setCanvasPhase('idle');
+            store.dispose();
+            storeRef.current = null;
         };
-    }, [user?.id, context.node?.id]);
+    }, [user?.id]);  // Only recreate store if user changes, NOT on every node navigation
+
+    // Effect 2: Load/reload snapshot when context.node changes. Store stays alive.
+    useEffect(() => {
+        if (!user || !storeRef.current) return;
+
+        const store = storeRef.current;
+        let cancelled = false;
+
+        const loadNodeSnapshot = async () => {
+            if (!context.node?.node_storage_path) {
+                // No node — clear to blank canvas using ensureStoreIsUsable to restore defaults
+                (store as unknown as { ensureStoreIsUsable(): void }).ensureStoreIsUsable();
+                snapshotServiceRef.current?.clearCurrentNode();
+                setCanvasPhase('ready');
+                return;
+            }
+
+            setCanvasPhase('snapshot-loading');
+            try {
+                await NavigationSnapshotService.loadNodeSnapshotFromDatabase(
+                    context.node.node_storage_path,
+                    accessToken || '',
+                    store,
+                    setLoadingState,
+                    undefined,
+                    editorRef.current || undefined
+                );
+                if (!cancelled) {
+                    // Repair store in case snapshot overwrote TLINSTANCE
+                    (store as unknown as { ensureStoreIsUsable(): void }).ensureStoreIsUsable();
+                    snapshotServiceRef.current?.setCurrentNodePath(context.node.node_storage_path);
+                    setCanvasPhase('ready');
+                }
+            } catch (e) {
+                if (!cancelled) setCanvasPhase('ready'); // show blank canvas on error
+            }
+        };
+
+        loadNodeSnapshot();
+        return () => { cancelled = true; };
+    }, [context.node?.id, storeReady]);  // re-run when node changes OR after store becomes ready
 
     // Handle navigation changes — save previous snapshot, load next one.
     // No automatic node shape placement: the canvas shows only persisted state.

src/pages/user/dashboardPage.tsx

@@ -85,6 +85,12 @@ const DashboardPage: React.FC = () => {
                 >
                   Open workspace
                 </Button>
+                <Button
+                  variant="outlined"
+                  onClick={() => navigate('/exam-marker')}
+                >
+                  Exam Marker
+                </Button>
                 <Button
                   variant="outlined"
                   onClick={() => navigate('/calendar')}

src/services/exam/examRepository.ts

@@ -0,0 +1,74 @@
+/**
+ * examRepository — the SINGLE module that talks to the /api/exam backend (spec R2.1 seam).
+ *
+ * All exam-marker persistence flows through here so a later dual-write / offline cache can slot
+ * in without touching feature code. Mirrors the auth pattern of timetableService: take the
+ * Supabase session JWT and send it as a Bearer token; the API enforces RLS as the user.
+ */
+import axios from 'axios';
+
+import { API_BASE } from '../../config/apiConfig';
+import { supabase } from '../../supabaseClient';
+import type {
+  CreateTemplatePayload,
+  ExamTemplate,
+  ExamTemplateDetail,
+} from '../../types/exam.types';
+
+const EXAM_BASE = `${API_BASE}/api/exam`;
+
+async function authHeaders(): Promise<Record<string, string>> {
+  const { data: { session } } = await supabase.auth.getSession();
+  if (!session?.access_token) {
+    throw new Error('No authentication token available');
+  }
+  return { Authorization: `Bearer ${session.access_token}` };
+}
+
+export const examRepository = {
+  async listTemplates(includeArchived = false): Promise<ExamTemplate[]> {
+    const headers = await authHeaders();
+    const res = await axios.get<{ templates: ExamTemplate[] }>(
+      `${EXAM_BASE}/templates`,
+      { headers, params: { include_archived: includeArchived } },
+    );
+    return res.data.templates ?? [];
+  },
+
+  async getTemplate(templateId: string): Promise<ExamTemplateDetail> {
+    const headers = await authHeaders();
+    const res = await axios.get<ExamTemplateDetail>(`${EXAM_BASE}/templates/${templateId}`, { headers });
+    return res.data;
+  },
+
+  async createTemplate(payload: CreateTemplatePayload): Promise<ExamTemplate> {
+    const headers = await authHeaders();
+
+    if (payload.source_pdf) {
+      const form = new FormData();
+      form.append('title', payload.title);
+      if (payload.subject) form.append('subject', payload.subject);
+      if (payload.exam_id) form.append('exam_id', payload.exam_id);
+      if (payload.exam_code) form.append('exam_code', payload.exam_code);
+      if (payload.source_file_id) form.append('source_file_id', payload.source_file_id);
+      if (payload.page_count !== undefined) form.append('page_count', String(payload.page_count));
+      if (payload.institute_id) form.append('institute_id', payload.institute_id);
+      form.append('source_pdf', payload.source_pdf);
+
+      const res = await axios.post<ExamTemplate>(`${EXAM_BASE}/templates`, form, {
+        headers,
+      });
+      return res.data;
+    }
+
+    const res = await axios.post<ExamTemplate>(`${EXAM_BASE}/templates`, payload, { headers });
+    return res.data;
+  },
+
+  async archiveTemplate(templateId: string): Promise<void> {
+    const headers = await authHeaders();
+    await axios.delete(`${EXAM_BASE}/templates/${templateId}`, { headers });
+  },
+};
+
+export default examRepository;

src/services/tldraw/snapshotService.ts

@@ -1,5 +1,5 @@
 // External imports
-import { TLStore, getSnapshot, Editor, loadSnapshot } from '@tldraw/tldraw';
+import { TLStore, getSnapshot, Editor, loadSnapshot, TLINSTANCE_ID } from '@tldraw/tldraw';
 import logger from '../../debugConfig';
 import { SharedStoreService } from './sharedStoreService';
 
@@ -109,17 +109,35 @@ export class NavigationSnapshotService {
                 return;
             }
 
+            // Sanitize session.currentPageId against pages actually in the document
+            const docStore = (snap.document as { store?: Record<string, { typeName: string; id: string }> })?.store ?? {};
+            const pageIds = Object.values(docStore).filter((r) => (r as { typeName: string }).typeName === 'page').map((r) => r.id);
+            const session = snap.session as { currentPageId?: string } | undefined;
+            if (session?.currentPageId && pageIds.length > 0 && !pageIds.includes(session.currentPageId)) {
+                logger.warn('snapshot-service', '⚠️ session.currentPageId not in snapshot pages — resetting to first page', {
+                    currentPageId: session.currentPageId, availablePages: pageIds
+                });
+                session.currentPageId = pageIds[0];
+            }
+
             const snapshotCopy = {
                 schemaVersion: snap.schemaVersion || (snap.document as { schema?: { schemaVersion?: unknown } })?.schema?.schemaVersion,
                 document: snap.document,
                 session: snap.session,
             };
 
+            const targetStore = editor ? editor.store : store;
             try {
-                if (editor) {
-                    loadSnapshot(editor.store, snapshotCopy as any);
-                } else {
-                    loadSnapshot(store, snapshotCopy as any);
+                loadSnapshot(targetStore, snapshotCopy as any);
+                // Post-load validation: ensure instance.currentPageId is still valid
+                const instance = targetStore.get(TLINSTANCE_ID);
+                if (instance) {
+                    const pages = targetStore.allRecords().filter((r) => (r as { typeName: string }).typeName === 'page');
+                    const pageValid = pages.some((p) => p.id === instance.currentPageId);
+                    if (!pageValid) {
+                        logger.warn('snapshot-service', '⚠️ Post-load: currentPageId invalid — clearing corrupt store', { currentPageId: instance.currentPageId });
+                        targetStore.clear();
+                    }
                 }
                 logger.debug('snapshot-service', '✅ Snapshot loaded successfully');
             } catch (err) {
@@ -128,7 +146,8 @@ export class NavigationSnapshotService {
                 if (isSchemaMigration) {
                     logger.debug('snapshot-service', 'ℹ️ Schema migration warning (non-critical)', { error: msg });
                 } else {
-                    logger.warn('snapshot-service', '⚠️ Unexpected loadSnapshot error', { error: msg });
+                    logger.warn('snapshot-service', '⚠️ Unexpected loadSnapshot error — clearing store to allow fresh start', { error: msg });
+                    targetStore.clear();
                 }
             }
 

src/types/exam.types.ts

@@ -0,0 +1,79 @@
+/**
+ * Exam-marker types — mirror the FastAPI /api/exam contract (see api routers/exam/schemas.py).
+ * Supabase is source of truth for this operational data; the graph (cc.public.exams) joins by
+ * the shared UUIDs (template/question/region ids, exam_code).
+ */
+
+export type ExamTemplateStatus = 'draft' | 'ready' | 'archived';
+
+export interface ExamTemplate {
+  id: string;
+  title: string;
+  subject: string | null;
+  exam_id: string | null;
+  exam_code: string | null;
+  source_file_id: string | null;
+  page_count: number | null;
+  institute_id: string;
+  teacher_id: string;
+  status: ExamTemplateStatus;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateTemplatePayload {
+  title: string;
+  subject?: string;
+  exam_id?: string;
+  exam_code?: string;
+  source_file_id?: string;
+  source_pdf?: File | null;
+  page_count?: number;
+  institute_id?: string;
+}
+
+/** Canvas children (used from S4-9 onward; defined here so the seam is complete). */
+export interface ExamQuestion {
+  id: string;
+  template_id: string;
+  parent_id: string | null;
+  label: string;
+  order: number;
+  max_marks: number;
+  answer_type: string | null;
+  mcq_options: unknown | null;
+  mark_scheme: Record<string, unknown>;
+  is_container: boolean;
+  spec_ref: string | null;
+}
+
+export interface ExamResponseArea {
+  id: string;
+  question_id: string;
+  template_id: string;
+  page: number;
+  bounds: Record<string, number>;
+  kind: 'response' | 'context';
+  response_form: string | null;
+  source: 'manual' | 'ai';
+  confirmed: boolean;
+  confidence: number | null;
+}
+
+export interface ExamBoundary {
+  id: string;
+  template_id: string;
+  question_id: string | null;
+  label: string | null;
+  page_index: number;
+  y: number;
+  bounds: Record<string, number> | null;
+  source: 'manual' | 'ai';
+  confirmed: boolean;
+}
+
+export interface ExamTemplateDetail extends ExamTemplate {
+  questions: ExamQuestion[];
+  response_areas: ExamResponseArea[];
+  boundaries: ExamBoundary[];
+}

src/utils/tldraw/exam-marker-spike.test.ts

@@ -0,0 +1,91 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  Editor,
+  createTLStore,
+  createTLSchemaFromUtils,
+  defaultBindingUtils,
+  defaultShapeUtils,
+} from '@tldraw/tldraw'
+import {
+  EXAM_MARKER_BOX_TYPE,
+  ExamMarkerBoxShapeUtil,
+  ExamMarkerBoxTool,
+  activateExamMarkerTool,
+  buildExamMarkerSvgDataUrl,
+  getExamMarkerHitTestPoints,
+  insertExamMarkerBox,
+} from './exam-marker-spike'
+
+const spikeShapeUtils = [ExamMarkerBoxShapeUtil]
+const spikeSchema = createTLSchemaFromUtils({
+  shapeUtils: [...defaultShapeUtils, ...spikeShapeUtils],
+  bindingUtils: defaultBindingUtils,
+})
+
+if (typeof globalThis.matchMedia !== 'function') {
+  vi.stubGlobal('matchMedia', () => ({
+    matches: false,
+    media: '',
+    onchange: null,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    addListener: () => {},
+    removeListener: () => {},
+    dispatchEvent: () => false,
+  } as unknown as MediaQueryList))
+}
+
+function makeEditor() {
+  const store = createTLStore({
+    schema: spikeSchema,
+    shapeUtils: spikeShapeUtils,
+    bindingUtils: defaultBindingUtils,
+  })
+  ;(store as unknown as { ensureStoreIsUsable(): void }).ensureStoreIsUsable()
+
+  return new Editor({
+    shapeUtils: spikeShapeUtils,
+    bindingUtils: defaultBindingUtils,
+    tools: [ExamMarkerBoxTool],
+    store,
+    getContainer: () => document.body,
+  })
+}
+
+describe('exam-marker spike tldraw helpers', () => {
+  let editor: Editor
+
+  beforeEach(() => {
+    editor = makeEditor()
+  })
+
+  afterEach(() => {
+    editor.dispose()
+  })
+
+  it('creates a custom box shape and supports point hit-testing + page bounds', () => {
+    const boxId = insertExamMarkerBox(editor)
+    const box = editor.getShape(boxId)
+
+    expect(box?.type).toBe(EXAM_MARKER_BOX_TYPE)
+    expect(editor.getShapePageBounds(boxId)).toBeTruthy()
+
+    const boxPoint = getExamMarkerHitTestPoints(editor, boxId)
+    expect(boxPoint?.bounds).toBeTruthy()
+    expect(editor.getShapesAtPoint(boxPoint!.center).some((shape) => shape.id === boxId)).toBe(true)
+
+    const viewport = editor.getViewportPageBounds()
+    expect(viewport.w).toBeGreaterThan(0)
+    expect(viewport.h).toBeGreaterThan(0)
+    expect(() => editor.zoomToBounds(boxPoint!.bounds)).not.toThrow()
+  })
+
+  it('registers the custom BaseBoxShapeTool and emits a locked svg asset URL', () => {
+    expect(activateExamMarkerTool(editor)).toBe(EXAM_MARKER_BOX_TYPE)
+    expect(editor.getCurrentToolId()).toBe(EXAM_MARKER_BOX_TYPE)
+
+    const svgUrl = buildExamMarkerSvgDataUrl()
+    expect(svgUrl.startsWith('data:image/svg+xml;charset=utf-8,')).toBe(true)
+    expect(decodeURIComponent(svgUrl.split(',')[1])).toContain('Exam scan')
+  })
+})

src/utils/tldraw/exam-marker-spike.tsx

@@ -0,0 +1,197 @@
+import React from 'react'
+import {
+  BaseBoxShapeTool,
+  BaseBoxShapeUtil,
+  Editor,
+  HTMLContainer,
+  T,
+  TLBaseBoxShape,
+  TLShapeId,
+  createShapeId,
+  toDomPrecision,
+} from '@tldraw/tldraw'
+
+export const EXAM_MARKER_BOX_TYPE = 'exam-marker-box' as const
+
+export type ExamMarkerBoxShape = TLBaseBoxShape & {
+  type: typeof EXAM_MARKER_BOX_TYPE
+}
+
+export class ExamMarkerBoxShapeUtil extends BaseBoxShapeUtil<ExamMarkerBoxShape> {
+  static override type = EXAM_MARKER_BOX_TYPE
+  static override props = {
+    w: T.number,
+    h: T.number,
+  }
+
+  override getDefaultProps(): ExamMarkerBoxShape['props'] {
+    return {
+      w: 320,
+      h: 180,
+    }
+  }
+
+  override component(shape: ExamMarkerBoxShape) {
+    return (
+      <HTMLContainer
+        id={shape.id}
+        style={{
+          width: toDomPrecision(shape.props.w),
+          height: toDomPrecision(shape.props.h),
+          border: '2px solid #b91c1c',
+          borderRadius: 14,
+          background: 'linear-gradient(180deg, rgba(255, 251, 235, 0.96), rgba(254, 242, 242, 0.96))',
+          boxShadow: '0 12px 24px rgba(185, 28, 28, 0.18)',
+          boxSizing: 'border-box',
+          overflow: 'hidden',
+          pointerEvents: 'all',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 8,
+            padding: 12,
+            fontFamily: 'Inter, system-ui, sans-serif',
+            color: '#7f1d1d',
+            height: '100%',
+          }}
+        >
+          <div style={{ fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.8 }}>
+            Exam marker spike
+          </div>
+          <div style={{ fontSize: 14, lineHeight: 1.35 }}>
+            This custom box shape uses the app&apos;s tldraw schema + BaseBoxShapeTool path.
+          </div>
+          <div
+            style={{
+              marginTop: 'auto',
+              padding: '6px 8px',
+              borderRadius: 999,
+              alignSelf: 'flex-start',
+              background: 'rgba(185, 28, 28, 0.12)',
+              fontSize: 12,
+              fontWeight: 600,
+            }}
+          >
+            Drag to resize · use the spike tool to create more
+          </div>
+        </div>
+      </HTMLContainer>
+    )
+  }
+}
+
+export class ExamMarkerBoxTool extends BaseBoxShapeTool {
+  static override id = EXAM_MARKER_BOX_TYPE
+  static override initial = 'pointing'
+  shapeType = EXAM_MARKER_BOX_TYPE
+}
+
+export function buildExamMarkerSvgDataUrl(label = 'Exam scan') {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="960" height="720" viewBox="0 0 960 720">
+      <defs>
+        <linearGradient id="g" x1="0" x2="1" y1="0" y2="1">
+          <stop offset="0%" stop-color="#ffffff"/>
+          <stop offset="100%" stop-color="#f4f7fb"/>
+        </linearGradient>
+      </defs>
+      <rect width="960" height="720" rx="32" fill="url(#g)" stroke="#cbd5e1" stroke-width="6"/>
+      <rect x="72" y="56" width="816" height="88" rx="18" fill="#1f2937" opacity="0.92"/>
+      <text x="116" y="108" fill="#fff" font-size="42" font-family="Inter, Arial, sans-serif" font-weight="700">${label}</text>
+      <rect x="72" y="176" width="816" height="120" rx="16" fill="#eef2ff" stroke="#c7d2fe"/>
+      <text x="106" y="224" fill="#1e3a8a" font-size="30" font-family="Inter, Arial, sans-serif" font-weight="700">Question 1</text>
+      <text x="106" y="266" fill="#334155" font-size="24" font-family="Inter, Arial, sans-serif">Show your working and annotate the image.</text>
+      <rect x="72" y="332" width="816" height="250" rx="16" fill="#fff7ed" stroke="#fed7aa"/>
+      <text x="106" y="384" fill="#9a3412" font-size="30" font-family="Inter, Arial, sans-serif" font-weight="700">Answer space</text>
+      <rect x="106" y="420" width="700" height="18" rx="9" fill="#fdba74" opacity="0.75"/>
+      <rect x="106" y="470" width="640" height="18" rx="9" fill="#fdba74" opacity="0.55"/>
+      <rect x="106" y="520" width="570" height="18" rx="9" fill="#fdba74" opacity="0.4"/>
+      <text x="106" y="644" fill="#475569" font-size="20" font-family="Inter, Arial, sans-serif">Inserted as a built-in tldraw image shape.</text>
+    </svg>
+  `.trim()
+
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
+}
+
+function getViewportAnchor(editor: Editor) {
+  const bounds = editor.getViewportPageBounds()
+  return {
+    x: bounds.x + bounds.w / 2,
+    y: bounds.y + bounds.h / 2,
+  }
+}
+
+export function insertExamMarkerImage(editor: Editor) {
+  const anchor = getViewportAnchor(editor)
+  const imageId = createShapeId()
+
+  editor.createShape({
+    id: imageId,
+    type: 'image',
+    x: anchor.x - 320,
+    y: anchor.y - 240,
+    props: {
+      url: buildExamMarkerSvgDataUrl(),
+      w: 640,
+      h: 480,
+      name: 'exam-marker-sample.svg',
+    },
+  })
+
+  return imageId
+}
+
+export function insertExamMarkerBox(editor: Editor) {
+  const anchor = getViewportAnchor(editor)
+  const boxId = createShapeId()
+
+  editor.createShape<ExamMarkerBoxShape>({
+    id: boxId,
+    type: EXAM_MARKER_BOX_TYPE,
+    x: anchor.x + 180,
+    y: anchor.y - 120,
+    props: {
+      w: 320,
+      h: 180,
+    },
+  })
+
+  return boxId
+}
+
+export function placeExamMarkerSpike(editor: Editor) {
+  const imageId = insertExamMarkerImage(editor)
+  const boxId = insertExamMarkerBox(editor)
+
+  const box = editor.getShape(boxId)
+  if (box) {
+    const bounds = editor.getShapePageBounds(box)
+    if (bounds) editor.zoomToBounds(bounds)
+  }
+
+  return { imageId, boxId }
+}
+
+export function activateExamMarkerTool(editor: Editor) {
+  editor.setCurrentTool(EXAM_MARKER_BOX_TYPE)
+  return editor.getCurrentToolId()
+}
+
+export function getExamMarkerHitTestPoints(editor: Editor, shapeId: TLShapeId) {
+  const shape = editor.getShape(shapeId)
+  if (!shape) return null
+
+  const bounds = editor.getShapePageBounds(shape)
+  if (!bounds) return null
+
+  return {
+    center: {
+      x: bounds.x + bounds.w / 2,
+      y: bounds.y + bounds.h / 2,
+    },
+    bounds,
+  }
+}

src/utils/tldraw/ui-overrides/components/CCPanel.tsx

@@ -1,10 +1,8 @@
 import React, { useState } from 'react';
 import { BasePanel } from './shared/BasePanel';
-import { CCExamMarkerPanel } from './shared/CCExamMarkerPanel';
 import { BaseContext, ViewContext } from '../../../../types/navigation';
 
 interface CCPanelProps {
-  examMarkerProps?: React.ComponentProps<typeof CCExamMarkerPanel>;
   isExpanded?: boolean;
   isPinned?: boolean;
   onExpandedChange?: (expanded: boolean) => void;
@@ -12,7 +10,6 @@ interface CCPanelProps {
 }
 
 export const CCPanel: React.FC<CCPanelProps> = ({
-  examMarkerProps,
   isExpanded,
   isPinned,
   onExpandedChange,
@@ -32,7 +29,6 @@ export const CCPanel: React.FC<CCPanelProps> = ({
 
   return (
     <BasePanel
-      examMarkerProps={examMarkerProps}
       isExpanded={isExpanded}
       isPinned={isPinned}
       onExpandedChange={handleExpandedChange}

src/utils/tldraw/ui-overrides/components/shared/BasePanel.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';
 import { TldrawUiButton } from '@tldraw/tldraw';
 import { CCShapesPanel } from './CCShapesPanel';
 import { CCSlidesPanel } from './CCSlidesPanel';
@@ -7,7 +6,6 @@ import { CCFilesPanel } from './CCFilesPanel';
 import { CCCabinetsPanel } from './CCCabinetsPanel';
 import { CCYoutubePanel } from './CCYoutubePanel';
 import { CCGraphPanel } from './CCGraphPanel';
-import { CCExamMarkerPanel } from './CCExamMarkerPanel';
 import { CCSearchPanel } from './CCSearchPanel';
 import { CCGraphNavPanel } from './navigation/CCGraphNavPanel';
 import { CCTranscriptionPanel } from './CCTranscriptionPanel';
@@ -31,16 +29,12 @@ export const PANEL_TYPES = {
     { id: 'graph', label: 'Graph', order: 60 },
     { id: 'search', label: 'Search', order: 70 },
   ],
-  examMarker: [
-    { id: 'exam-marker', label: 'Exam Marker', order: 10 },
-  ],
 } as const;
 
-export type PanelType = typeof PANEL_TYPES.default[number]['id'] | typeof PANEL_TYPES.examMarker[number]['id'];
+export type PanelType = typeof PANEL_TYPES.default[number]['id'];
 
 interface BasePanelProps {
   initialPanelType?: PanelType;
-  examMarkerProps?: React.ComponentProps<typeof CCExamMarkerPanel>;
   isExpanded?: boolean;
   isPinned?: boolean;
   onExpandedChange?: (expanded: boolean) => void;
@@ -125,16 +119,6 @@ function getIconSvg(panelId: PanelType, size = '1.25rem') {
           <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
         </svg>
       );
-    case 'exam-marker':
-      return (
-        <svg {...common}>
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-          <polyline points="14 2 14 8 20 8" />
-          <line x1="16" y1="13" x2="8" y2="13" />
-          <line x1="16" y1="17" x2="8" y2="17" />
-          <polyline points="10 9 9 9 8 9" />
-        </svg>
-      );
     default:
       return (
         <svg {...common}>
@@ -152,7 +136,6 @@ function isDarkMode() {
 
 export const BasePanel: React.FC<BasePanelProps> = ({
   initialPanelType = 'files',
-  examMarkerProps,
   isExpanded: controlledIsExpanded,
   isPinned: controlledIsPinned,
   onExpandedChange,
@@ -160,7 +143,6 @@ export const BasePanel: React.FC<BasePanelProps> = ({
   isMenuOpen = false,
   onMenuOpenChange = () => {},
 }) => {
-  const location = useLocation();
   const { tldrawPreferences } = useTLDraw();
   const [prefersDarkMode, setPrefersDarkMode] = useState(isDarkMode());
   const [menuOpen, setMenuOpen] = useState(false);
@@ -177,12 +159,9 @@ export const BasePanel: React.FC<BasePanelProps> = ({
     ? 'dark'
     : 'light';
 
-  const isExamMarkerRoute = location.pathname === '/exam-marker';
-  const availablePanels = isExamMarkerRoute ? PANEL_TYPES.examMarker : PANEL_TYPES.default;
+  const availablePanels = PANEL_TYPES.default;
 
-  const [currentPanelType, setCurrentPanelType] = useState<PanelType>(
-    isExamMarkerRoute ? 'exam-marker' : initialPanelType
-  );
+  const [currentPanelType, setCurrentPanelType] = useState<PanelType>(initialPanelType);
 
   const [internalIsExpanded, setInternalIsExpanded] = useState(true);
   const [internalIsPinned, setInternalIsPinned] = useState(true);
@@ -223,10 +202,6 @@ export const BasePanel: React.FC<BasePanelProps> = ({
   }, [isExpanded, isPinned]);
 
   const renderCurrentPanel = () => {
-    if (isExamMarkerRoute && currentPanelType === 'exam-marker') {
-      return examMarkerProps ? <CCExamMarkerPanel {...examMarkerProps} /> : null;
-    }
-
     switch (currentPanelType) {
       case 'cabinets':
         return <CCCabinetsPanel />;
@@ -331,7 +306,6 @@ export const BasePanel: React.FC<BasePanelProps> = ({
                           {type.id === 'search' && 'Search through your content'}
                           {type.id === 'navigation' && 'Navigate through different contexts'}
                           {type.id === 'node-snapshot' && 'Manage node snapshots'}
-                          {type.id === 'exam-marker' && 'Mark and grade exams'}
                         </span>
                       </span>
                     </button>

src/utils/tldraw/ui-overrides/components/shared/CCExamMarkerPanel.tsx

@@ -1,495 +0,0 @@
-import React, { useState } from 'react';
-import { Box, Button, Typography, Divider, Stack } from '@mui/material';
-import { Editor, exportToBlob, TLPageId, Box as TLBox } from '@tldraw/tldraw';
-import { PDFDocument } from 'pdf-lib';
-import { Pdf } from '../../../../../pages/tldraw/CCExamMarker/types';
-import { logger } from '../../../../../debugConfig';
-
-interface CCExamMarkerPanelProps {
-  editor: Editor | null;
-  currentView: 'exam-and-markscheme' | 'student-responses';
-  onViewChange: (view: 'exam-and-markscheme' | 'student-responses') => void;
-  currentStudentIndex: number;
-  totalStudents: number;
-  onPreviousStudent: () => void;
-  onNextStudent: () => void;
-  getCurrentPdf: () => Pdf | null;
-}
-
-export const CCExamMarkerPanel: React.FC<CCExamMarkerPanelProps> = ({
-  editor,
-  currentView,
-  onViewChange,
-  currentStudentIndex,
-  totalStudents,
-  onPreviousStudent,
-  onNextStudent,
-  getCurrentPdf,
-}) => {
-  const [exportProgress, setExportProgress] = useState<number | null>(null);
-
-  const exportPdf = async (
-    editor: Editor,
-    { name, source, pages }: Pdf,
-    onProgress: (progress: number) => void,
-    startPage?: number,
-    endPage?: number,
-    studentIndex?: number
-  ) => {
-    logger.debug('cc-exam-marker', '📤 Starting PDF export', {
-      name,
-      startPage,
-      endPage,
-      studentIndex,
-      currentView,
-      totalPages: pages.length
-    });
-
-    const pdfPages = pages.slice(startPage, endPage);
-    logger.debug('cc-exam-marker', '📄 Selected pages for export', {
-      pdfPages: pdfPages.length,
-      pageIndices: pdfPages.map((_, i) => (startPage || 0) + i)
-    });
-
-    const totalThings = pdfPages.length * 2 + 2;
-    let progressCount = 0;
-    const tickProgress = () => {
-      progressCount++;
-      onProgress(progressCount / totalThings);
-    };
-
-    const sourcePdf = await PDFDocument.load(source);
-    tickProgress();
-
-    // Create a new PDF document for the selected pages
-    const newPdf = await PDFDocument.create();
-    
-    // Copy pages from source PDF
-    const pageIndices = pdfPages.map((_, i) => (startPage || 0) + i);
-    const copiedPages = await newPdf.copyPages(sourcePdf, pageIndices);
-    copiedPages.forEach(page => newPdf.addPage(page));
-    tickProgress();
-
-    // Store current page to restore later
-    const currentPageId = editor.getCurrentPageId();
-    logger.debug('cc-exam-marker', '📍 Current page before export', { currentPageId });
-
-    // Switch to the correct page based on context
-    const targetPageId = (studentIndex !== undefined 
-      ? `page:student-response-${studentIndex}` 
-      : currentView === 'exam-and-markscheme' 
-        ? 'page:exam-page'
-        : 'page:mark-scheme-page') as TLPageId;
-    
-    logger.debug('cc-exam-marker', '🎯 Switching to target page', { targetPageId });
-    editor.setCurrentPage(targetPageId);
-
-    // Get all shape IDs that are not page shapes (i.e., annotations)
-    const pageShapeIds = new Set(pages.map(page => page.shapeId));
-    const allShapeIds = Array.from(editor.getCurrentPageShapeIds()).filter(id => !pageShapeIds.has(id));
-    
-    logger.debug('cc-exam-marker', '📝 Found shapes on current page', {
-      totalShapes: editor.getCurrentPageShapeIds().size,
-      pageShapes: pageShapeIds.size,
-      annotationShapes: allShapeIds.length
-    });
-
-    // For each page, draw annotations on top
-    for (let i = 0; i < pdfPages.length; i++) {
-      const page = pdfPages[i];
-      const pdfPage = newPdf.getPages()[i];
-      const {bounds} = page;
-
-      logger.debug('cc-exam-marker', `📄 Processing page ${i + 1}/${pdfPages.length}`, {
-        bounds,
-        pageIndex: i,
-        globalPageIndex: (startPage || 0) + i
-      });
-
-      // Get shapes that intersect with this page using editor's bounds checking
-      const shapesInBounds = allShapeIds.filter((id) => {
-        const shape = editor.getShape(id);
-        if (!shape || shape.isLocked) return false;
-
-        // @ts-expect-error - annotationManager is added to editor in CCPdfEditor
-        const annotationManager = editor.annotationManager;
-        const annotationData = annotationManager.getAnnotationData(id);
-        if (!annotationData) return false;
-
-        // Filter by student index if provided
-        if (studentIndex !== undefined && annotationData.studentIndex !== studentIndex) {
-          return false;
-        }
-
-        // For exam/markscheme view, only include those annotations
-        if (studentIndex === undefined && annotationData.studentIndex !== undefined) {
-          return false;
-        }
-
-        // For individual student exports, use the annotation's original page index
-        // For full exports, use the stored page index
-        const adjustedPageIndex = annotationData.pageIndex;
-
-        // Check if this shape belongs to this page index
-        if (adjustedPageIndex !== i) {
-          return false;
-        }
-
-        logger.debug('cc-exam-marker', `🔍 Found matching annotation`, {
-          shapeId: id,
-          annotationData,
-          adjustedPageIndex,
-          currentPageIndex: i,
-          bounds: editor.getShapePageBounds(id)
-        });
-
-        return true;
-      });
-
-      logger.debug('cc-exam-marker', `✨ Found shapes for page ${i + 1}`, {
-        shapesInBounds: shapesInBounds.length,
-        pageIndex: i,
-        globalPageIndex: (startPage || 0) + i
-      });
-
-      if (shapesInBounds.length === 0) {
-        tickProgress();
-        tickProgress();
-        continue;
-      }
-
-      // Export the annotations as PNG
-      const exportedPng = await exportToBlob({
-        editor,
-        ids: shapesInBounds,
-        format: 'png',
-        opts: { 
-          background: false,
-          // Create a new bounds that's relative to the current page
-          bounds: new TLBox(
-            bounds.x,
-            0,  // Reset to 0 since we want annotations relative to current page
-            bounds.width,
-            bounds.height
-          ),
-          padding: 0,
-          scale: 1
-        },
-      });
-
-      tickProgress();
-
-      // Draw the annotations on the PDF page
-      const pngImage = await newPdf.embedPng(await exportedPng.arrayBuffer());
-      const pdfWidth = pdfPage.getWidth();
-      const pdfHeight = pdfPage.getHeight();
-      
-      pdfPage.drawImage(pngImage, {
-        x: 0,
-        y: 0,
-        width: pdfWidth,
-        height: pdfHeight,
-      });
-
-      tickProgress();
-    }
-
-    // Restore original page
-    logger.debug('cc-exam-marker', '🔄 Restoring original page', { currentPageId });
-    editor.setCurrentPage(currentPageId);
-
-    const pdfBytes = await newPdf.save();
-    const url = URL.createObjectURL(
-      new Blob([pdfBytes] as unknown as BlobPart[], { type: 'application/pdf' })
-    );
-    tickProgress();
-
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = name;
-    a.click();
-    URL.revokeObjectURL(url);
-    
-    logger.debug('cc-exam-marker', '✅ PDF export completed', { name });
-  };
-
-  const handleExportCurrentView = async () => {
-    if (!editor) return;
-    const currentPdf = getCurrentPdf();
-    if (!currentPdf) return;
-
-    setExportProgress(0);
-    try {
-      if (currentView === 'student-responses') {
-        // For student responses, we need to handle each student's annotations separately
-        const pagesPerStudent = currentPdf.pages.length / totalStudents;
-        let currentProgress = 0;
-
-        // Create a new PDF with all pages
-        const sourcePdf = await PDFDocument.load(currentPdf.source);
-        const newPdf = await PDFDocument.create();
-        const copiedPages = await newPdf.copyPages(sourcePdf, Array.from({ length: currentPdf.pages.length }, (_, i) => i));
-        copiedPages.forEach(page => newPdf.addPage(page));
-
-        // For each student, export their annotations onto their pages
-        for (let studentIndex = 0; studentIndex < totalStudents; studentIndex++) {
-          const startPage = studentIndex * pagesPerStudent;
-
-          // Switch to the student's page to get their annotations
-          const targetPageId = `page:student-response-${studentIndex}` as TLPageId;
-          editor.setCurrentPage(targetPageId);
-
-          // Get all annotations for this student
-          const pageShapeIds = new Set(currentPdf.pages.map(page => page.shapeId));
-          const allShapeIds = Array.from(editor.getCurrentPageShapeIds()).filter(id => !pageShapeIds.has(id));
-
-          // Process each page for this student
-          for (let i = 0; i < pagesPerStudent; i++) {
-            const pageIndex = startPage + i;
-            const page = currentPdf.pages[pageIndex];
-            const pdfPage = newPdf.getPages()[pageIndex];
-
-            // Get shapes for this page
-            const shapesInBounds = allShapeIds.filter((id) => {
-              const shape = editor.getShape(id);
-              if (!shape || shape.isLocked) return false;
-
-              // @ts-expect-error - annotationManager is added to editor in CCPdfEditor
-              const annotationManager = editor.annotationManager;
-              const annotationData = annotationManager.getAnnotationData(id);
-              if (!annotationData) return false;
-
-              return annotationData.studentIndex === studentIndex && annotationData.pageIndex === i;
-            });
-
-            if (shapesInBounds.length > 0) {
-              // Export and draw annotations
-              const exportedPng = await exportToBlob({
-                editor,
-                ids: shapesInBounds,
-                format: 'png',
-                opts: { 
-                  background: false,
-                  bounds: new TLBox(
-                    page.bounds.x,
-                    0,
-                    page.bounds.width,
-                    page.bounds.height
-                  ),
-                  padding: 0,
-                  scale: 1
-                },
-              });
-
-              const pngImage = await newPdf.embedPng(await exportedPng.arrayBuffer());
-              pdfPage.drawImage(pngImage, {
-                x: 0,
-                y: 0,
-                width: pdfPage.getWidth(),
-                height: pdfPage.getHeight(),
-              });
-            }
-
-            currentProgress++;
-            setExportProgress(currentProgress / (totalStudents * pagesPerStudent));
-          }
-        }
-
-        // Save the combined PDF
-        const pdfBytes = await newPdf.save();
-        const url = URL.createObjectURL(new Blob([pdfBytes] as unknown as BlobPart[], { type: 'application/pdf' }));
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = currentPdf.name;
-        a.click();
-        URL.revokeObjectURL(url);
-      } else {
-        // For exam/mark scheme view, use the original export logic
-        await exportPdf(editor, currentPdf, setExportProgress);
-      }
-    } finally {
-      setExportProgress(null);
-    }
-  };
-
-  const handleExportCurrentStudent = async () => {
-    if (!editor || currentView !== 'student-responses') return;
-    const currentPdf = getCurrentPdf();
-    if (!currentPdf) return;
-
-    const pagesPerStudent = currentPdf.pages.length / totalStudents;
-    const startPage = currentStudentIndex * pagesPerStudent;
-    const endPage = startPage + pagesPerStudent;
-
-    setExportProgress(0);
-    try {
-      await exportPdf(
-        editor,
-        {
-          ...currentPdf,
-          name: `Student_${currentStudentIndex + 1}_Response.pdf`,
-        },
-        setExportProgress,
-        Math.floor(startPage),
-        Math.floor(endPage),
-        currentStudentIndex
-      );
-    } finally {
-      setExportProgress(null);
-    }
-  };
-
-  const handleBatchExport = async () => {
-    if (!editor || currentView !== 'student-responses') return;
-    const currentPdf = getCurrentPdf();
-    if (!currentPdf) return;
-
-    setExportProgress(0);
-    try {
-      const pagesPerStudent = currentPdf.pages.length / totalStudents;
-      let currentProgress = 0;
-
-      for (let studentIndex = 0; studentIndex < totalStudents; studentIndex++) {
-        const startPage = studentIndex * pagesPerStudent;
-        const endPage = startPage + pagesPerStudent;
-
-        await exportPdf(
-          editor,
-          {
-            ...currentPdf,
-            name: `Student_${studentIndex + 1}_Response.pdf`,
-          },
-          setExportProgress,
-          Math.floor(startPage),
-          Math.floor(endPage),
-          studentIndex
-        );
-
-        currentProgress++;
-        setExportProgress(currentProgress / totalStudents);
-      }
-    } finally {
-      setExportProgress(null);
-    }
-  };
-
-  return (
-    <Box sx={{ p: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <Typography variant="h6" sx={{ mb: 1 }}>
-        Exam Marker
-      </Typography>
-
-      <Box>
-        <Typography variant="subtitle2" sx={{ mb: 1 }}>
-          View Mode
-        </Typography>
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-          <Button
-            fullWidth
-            variant={currentView === 'exam-and-markscheme' ? 'contained' : 'outlined'}
-            onClick={() => onViewChange('exam-and-markscheme')}
-          >
-            Exam & Mark Scheme
-          </Button>
-          <Button
-            fullWidth
-            variant={currentView === 'student-responses' ? 'contained' : 'outlined'}
-            onClick={() => onViewChange('student-responses')}
-          >
-            Student Responses
-          </Button>
-        </Box>
-      </Box>
-
-      {currentView === 'student-responses' && (
-        <>
-          <Divider />
-          <Box>
-            <Typography variant="subtitle2" sx={{ mb: 1 }}>
-              Student Navigation
-            </Typography>
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-              <Button
-                fullWidth
-                variant="outlined"
-                onClick={onPreviousStudent}
-                disabled={currentStudentIndex === 0}
-              >
-                Previous Student
-              </Button>
-              <Typography variant="body2" align="center">
-                Student {currentStudentIndex + 1} of {totalStudents}
-              </Typography>
-              <Button
-                fullWidth
-                variant="outlined"
-                onClick={onNextStudent}
-                disabled={currentStudentIndex === totalStudents - 1}
-              >
-                Next Student
-              </Button>
-            </Box>
-          </Box>
-        </>
-      )}
-
-      <Divider />
-      
-      <Box>
-        <Typography variant="subtitle2" sx={{ mb: 1 }}>
-          Actions
-        </Typography>
-        <Stack spacing={1}>
-          <Button
-            fullWidth
-            variant="contained"
-            color="primary"
-            disabled={!editor || !getCurrentPdf() || exportProgress !== null}
-            onClick={handleExportCurrentView}
-          >
-            {exportProgress !== null
-              ? `Exporting... ${Math.round(exportProgress * 100)}%`
-              : `Export ${currentView === 'exam-and-markscheme' ? 'All' : 'Combined Responses'}`}
-          </Button>
-          
-          {currentView === 'student-responses' && (
-            <>
-              <Button
-                fullWidth
-                variant="outlined"
-                color="primary"
-                disabled={!editor || !getCurrentPdf() || exportProgress !== null}
-                onClick={handleExportCurrentStudent}
-              >
-                {exportProgress !== null
-                  ? `Exporting... ${Math.round(exportProgress * 100)}%`
-                  : 'Export Current Student'}
-              </Button>
-              
-              <Button
-                fullWidth
-                variant="outlined"
-                color="primary"
-                disabled={!editor || !getCurrentPdf() || exportProgress !== null}
-                onClick={handleBatchExport}
-              >
-                {exportProgress !== null
-                  ? `Exporting... ${Math.round(exportProgress * 100)}%`
-                  : 'Export All as Separate Files'}
-              </Button>
-            </>
-          )}
-        </Stack>
-      </Box>
-
-      <Box sx={{ mt: 'auto' }}>
-        <Typography variant="subtitle2" sx={{ mb: 1 }}>
-          Statistics
-        </Typography>
-        <Typography variant="body2">
-          Total Pages: {getCurrentPdf()?.pages.length || 0}
-        </Typography>
-      </Box>
-    </Box>
-  );
-};