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]>
2026-06-06 22:31:35 +00:00
10 changed files with 527 additions and 635 deletions
@@ -31,13 +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/exam', () => ({
-  ExamDashboardPage: () => <div>Exam Marker</div>,
-  MarkSchemePage: () => <div>Mark Scheme editor</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> }));
@@ -125,22 +123,3 @@ describe('/admin route authorization', () => {
    expect(screen.getByText('Platform Admin Page')).toBeInTheDocument();
  });
 });
-
-
-describe('exam-marker routes', () => {
-  beforeEach(() => {
-    mockUseAuth.mockReset();
-  });
-
-  it('renders the mark scheme editor route for authenticated users', () => {
-    mockUseAuth.mockReturnValue(authState({
-      user: { id: 'teacher-1', email: '[email protected]', user_type: 'email_teacher' },
-      user_role: 'email_teacher',
-      accessToken: 'token',
-    }));
-
-    renderAt('/exam-marker/template-123/marks');
-
-    expect(screen.getByText('Mark Scheme editor')).toBeInTheDocument();
-  });
-});
@@ -7,7 +7,7 @@ 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 { ExamDashboardPage, MarkSchemePage } from './pages/exam';
+import { ExamDashboardPage } from './pages/exam';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import CalendarPage from './pages/user/calendarPage';
 import SettingsPage from './pages/user/settingsPage';
@@ -16,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';
@@ -183,10 +184,10 @@ const AppRoutes: React.FC = () => {
            <Route path="/search" element={<SearxngPage />} />
            <Route path="/teacher-planner" element={<TeacherPlanner />} />
            <Route path="/exam-marker" element={<ErrorBoundary><ExamDashboardPage /></ErrorBoundary>} />
-            <Route path="/exam-marker/:templateId/marks" element={<ErrorBoundary><MarkSchemePage /></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 />} />
@@ -22,7 +22,6 @@ import {
 import AddIcon from '@mui/icons-material/Add';
 import ArchiveIcon from '@mui/icons-material/Archive';
 import AssignmentIcon from '@mui/icons-material/Assignment';
-import GradingIcon from '@mui/icons-material/Grading';

 import { useAuth } from '../../contexts/AuthContext';
 import { examRepository } from '../../services/exam/examRepository';
@@ -47,6 +46,7 @@ const ExamDashboardPage: React.FC = () => {
  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 () => {
@@ -67,6 +67,18 @@ const ExamDashboardPage: React.FC = () => {
    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);
@@ -75,10 +87,12 @@ const ExamDashboardPage: React.FC = () => {
        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);
@@ -113,7 +127,7 @@ const ExamDashboardPage: React.FC = () => {
              Build a template for an exam paper, then run marking batches against your classes.
            </Typography>
          </Box>
-          <Button variant="contained" startIcon={<AddIcon />} onClick={() => setCreateOpen(true)}>
+          <Button variant="contained" startIcon={<AddIcon />} onClick={handleOpenCreate}>
            New template
          </Button>
        </Box>
@@ -135,7 +149,7 @@ const ExamDashboardPage: React.FC = () => {
            <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={() => setCreateOpen(true)}>
+            <Button variant="outlined" startIcon={<AddIcon />} onClick={handleOpenCreate}>
              New template
            </Button>
          </Paper>
@@ -145,8 +159,16 @@ const ExamDashboardPage: React.FC = () => {
              <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 } }}
+                  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' }}>
@@ -169,16 +191,6 @@ const ExamDashboardPage: React.FC = () => {
                      {new Date(t.updated_at).toLocaleDateString()}
                    </Typography>
                  </Box>
-                  <Stack direction="row" spacing={1} sx={{ pt: 1 }}>
-                    <Button
-                      size="small"
-                      variant="outlined"
-                      onClick={(e) => { e.stopPropagation(); navigate(`/exam-marker/${t.id}/marks`); }}
-                      startIcon={<GradingIcon fontSize="small" />}
-                    >
-                      Edit marks
-                    </Button>
-                  </Stack>
                </Paper>
              </Grid>
            ))}
@@ -186,7 +198,7 @@ const ExamDashboardPage: React.FC = () => {
        )}
      </Stack>

-      <Dialog open={createOpen} onClose={() => (saving ? null : setCreateOpen(false))} fullWidth maxWidth="sm">
+      <Dialog open={createOpen} onClose={handleCloseCreate} fullWidth maxWidth="sm">
        <DialogTitle>New exam template</DialogTitle>
        <DialogContent>
          <Stack spacing={2} sx={{ mt: 1 }}>
@@ -204,10 +216,24 @@ const ExamDashboardPage: React.FC = () => {
              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={() => setCreateOpen(false)} disabled={saving}>Cancel</Button>
+          <Button onClick={handleCloseCreate} disabled={saving}>Cancel</Button>
          <Button variant="contained" onClick={handleCreate} disabled={saving || !title.trim()}>
            {saving ? 'Creating…' : 'Create'}
          </Button>
@@ -1,501 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import {
-  Alert,
-  Autocomplete,
-  Box,
-  Button,
-  Card,
-  CardContent,
-  Chip,
-  CircularProgress,
-  Container,
-  Divider,
-  FormControl,
-  Grid,
-  InputLabel,
-  MenuItem,
-  Paper,
-  Select,
-  Stack,
-  Tab,
-  Tabs,
-  TextField,
-  Typography,
-} from '@mui/material';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import SaveIcon from '@mui/icons-material/Save';
-import SyncIcon from '@mui/icons-material/Sync';
-
-import { logger } from '../../debugConfig';
-import { examRepository } from '../../services/exam/examRepository';
-import type {
-  ExamQuestion,
-  ExamTemplateDetail,
-  MarkScheme,
-  MarkSchemeType,
-  SpecPoint,
-} from '../../types/exam.types';
-
-type Drafts = Record<string, PartDraft>;
-
-interface PartDraft {
-  max_marks: string;
-  answer_type: 'written' | 'mcq' | 'short' | 'diagram';
-  spec_ref: string;
-  schemeType: MarkSchemeType;
-  body: string;
-  notes: string;
-}
-
-const ANSWER_TYPES: Array<PartDraft['answer_type']> = ['written', 'short', 'mcq', 'diagram'];
-const SCHEME_TYPES: Array<{ value: MarkSchemeType; label: string; helper: string }> = [
-  { value: 'points', label: 'Points', helper: 'One mark point per line, e.g. "1 | Mentions resultant force".' },
-  { value: 'levels', label: 'Levels', helper: 'One level per line, e.g. "L2 | 3-4 | Clear linked explanation".' },
-  { value: 'parts', label: 'Parts', helper: 'One sub-part per line, e.g. "a | 2 | Correct substitution".' },
-  { value: 'checklist', label: 'Checklist', helper: 'One checklist item per line, e.g. "1 | Correct unit".' },
-  { value: 'free', label: 'Free text', helper: 'Paste or type the mark scheme exactly as it should be stored.' },
-];
-
-function deriveSpecCode(template: ExamTemplateDetail | null): string {
-  const examCode = template?.exam_code ?? '';
-  const match = examCode.match(/^([A-Z]+-[A-Z]+-\d+)/i);
-  return match?.[1] ?? '';
-}
-
-function schemeToDraft(scheme: MarkScheme | null | undefined): Pick<PartDraft, 'schemeType' | 'body' | 'notes'> {
-  const type = (scheme?.type as MarkSchemeType | undefined) ?? 'points';
-  const notes = typeof scheme?.notes === 'string' ? scheme.notes : '';
-
-  if (type === 'levels' && Array.isArray(scheme?.levels)) {
-    return {
-      schemeType: 'levels',
-      body: scheme.levels.map((l) => `${l.level ?? ''} | ${l.min ?? 0}-${l.max ?? 0} | ${l.descriptor ?? ''}`).join('\n'),
-      notes,
-    };
-  }
-  if (type === 'parts' && Array.isArray(scheme?.parts)) {
-    return {
-      schemeType: 'parts',
-      body: scheme.parts.map((p) => `${p.label ?? ''} | ${p.marks ?? 0} | ${p.guidance ?? ''}`).join('\n'),
-      notes,
-    };
-  }
-  if (type === 'checklist' && Array.isArray(scheme?.checklist)) {
-    return {
-      schemeType: 'checklist',
-      body: scheme.checklist.map((item) => `${item.marks ?? 1} | ${item.text ?? ''}`).join('\n'),
-      notes,
-    };
-  }
-  if (type === 'free') {
-    return { schemeType: 'free', body: typeof scheme?.text === 'string' ? scheme.text : '', notes };
-  }
-  if (Array.isArray(scheme?.points)) {
-    return {
-      schemeType: 'points',
-      body: scheme.points.map((p) => `${p.mark ?? 1} | ${p.text ?? ''}`).join('\n'),
-      notes,
-    };
-  }
-  return { schemeType: type, body: '', notes };
-}
-
-function parseNumber(value: string, fallback = 0): number {
-  const parsed = Number(value);
-  return Number.isFinite(parsed) ? parsed : fallback;
-}
-
-function splitLine(line: string): string[] {
-  return line.split('|').map((part) => part.trim());
-}
-
-function draftToScheme(draft: PartDraft): MarkScheme {
-  const lines = draft.body.split('\n').map((line) => line.trim()).filter(Boolean);
-  if (draft.schemeType === 'free') return { type: 'free', text: draft.body, notes: draft.notes || undefined };
-  if (draft.schemeType === 'levels') {
-    return {
-      type: 'levels',
-      levels: lines.map((line, idx) => {
-        const [level, range, descriptor] = splitLine(line);
-        const [minRaw, maxRaw] = (range || '').split('-').map((part) => part.trim());
-        return {
-          level: level || `L${idx + 1}`,
-          min: parseNumber(minRaw, 0),
-          max: parseNumber(maxRaw, parseNumber(minRaw, 0)),
-          descriptor: descriptor || line,
-        };
-      }),
-      notes: draft.notes || undefined,
-    };
-  }
-  if (draft.schemeType === 'parts') {
-    return {
-      type: 'parts',
-      parts: lines.map((line, idx) => {
-        const [label, marks, guidance] = splitLine(line);
-        return { label: label || String(idx + 1), marks: parseNumber(marks, 1), guidance: guidance || line };
-      }),
-      notes: draft.notes || undefined,
-    };
-  }
-  if (draft.schemeType === 'checklist') {
-    return {
-      type: 'checklist',
-      checklist: lines.map((line) => {
-        const [marks, text] = splitLine(line);
-        return { marks: parseNumber(marks, 1), text: text || line };
-      }),
-      notes: draft.notes || undefined,
-    };
-  }
-  return {
-    type: 'points',
-    points: lines.map((line) => {
-      const [mark, text] = splitLine(line);
-      return { mark: parseNumber(mark, 1), text: text || line };
-    }),
-    notes: draft.notes || undefined,
-  };
-}
-
-function makeDraft(question: ExamQuestion): PartDraft {
-  const scheme = schemeToDraft(question.mark_scheme);
-  return {
-    max_marks: String(question.max_marks ?? 0),
-    answer_type: (question.answer_type as PartDraft['answer_type'] | null) ?? 'written',
-    spec_ref: question.spec_ref ?? '',
-    schemeType: scheme.schemeType,
-    body: scheme.body,
-    notes: scheme.notes,
-  };
-}
-
-const MarkSchemePage: React.FC = () => {
-  const navigate = useNavigate();
-  const { templateId } = useParams<{ templateId: string }>();
-
-  const [template, setTemplate] = useState<ExamTemplateDetail | null>(null);
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [drafts, setDrafts] = useState<Drafts>({});
-  const [specCode, setSpecCode] = useState('');
-  const [specPoints, setSpecPoints] = useState<SpecPoint[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [savingId, setSavingId] = useState<string | null>(null);
-  const [syncing, setSyncing] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [notice, setNotice] = useState<string | null>(null);
-  const [specEndpointMissing, setSpecEndpointMissing] = useState(false);
-
-  const load = useCallback(async () => {
-    if (!templateId) return;
-    setLoading(true);
-    setError(null);
-    try {
-      const detail = await examRepository.getTemplate(templateId);
-      const leafParts = detail.questions.filter((q) => !q.is_container).sort((a, b) => a.order - b.order || a.label.localeCompare(b.label));
-      setTemplate(detail);
-      setSelectedId((prev) => prev ?? leafParts[0]?.id ?? null);
-      setDrafts(Object.fromEntries(leafParts.map((q) => [q.id, makeDraft(q)])));
-      setSpecCode((prev) => prev || deriveSpecCode(detail));
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : String(e);
-      logger.error('cc-exam-marker', 'Failed to load mark scheme template', { message: msg, templateId });
-      setError(msg);
-    } finally {
-      setLoading(false);
-    }
-  }, [templateId]);
-
-  useEffect(() => {
-    void load();
-  }, [load]);
-
-  const loadSpecPoints = useCallback(async () => {
-    if (!specCode.trim()) return;
-    setSpecEndpointMissing(false);
-    try {
-      setSpecPoints(await examRepository.listSpecPoints(specCode.trim()));
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : String(e);
-      logger.warn('cc-exam-marker', 'SpecPoint endpoint unavailable; falling back to manual spec_ref entry', { message: msg, specCode });
-      setSpecEndpointMissing(true);
-      setSpecPoints([]);
-    }
-  }, [specCode]);
-
-  useEffect(() => {
-    void loadSpecPoints();
-  }, [loadSpecPoints]);
-
-  const parts = useMemo(
-    () => (template?.questions ?? []).filter((q) => !q.is_container).sort((a, b) => a.order - b.order || a.label.localeCompare(b.label)),
-    [template],
-  );
-  const selected = parts.find((p) => p.id === selectedId) ?? null;
-  const draft = selected ? drafts[selected.id] : null;
-  const selectedSpecPoint = draft?.spec_ref ? specPoints.find((p) => p.ref === draft.spec_ref) ?? null : null;
-
-  const updateDraft = (questionId: string, patch: Partial<PartDraft>) => {
-    setDrafts((prev) => ({ ...prev, [questionId]: { ...prev[questionId], ...patch } }));
-  };
-
-  const savePart = async (question: ExamQuestion) => {
-    const partDraft = drafts[question.id];
-    if (!partDraft) return;
-    setSavingId(question.id);
-    setError(null);
-    setNotice(null);
-    try {
-      await examRepository.patchQuestion(question.id, {
-        max_marks: parseNumber(partDraft.max_marks, question.max_marks),
-        answer_type: partDraft.answer_type,
-        mark_scheme: draftToScheme(partDraft),
-        spec_ref: partDraft.spec_ref.trim() || null,
-      });
-      setTemplate((prev) => {
-        if (!prev) return prev;
-        return {
-          ...prev,
-          questions: prev.questions.map((q) => q.id === question.id ? {
-            ...q,
-            max_marks: parseNumber(partDraft.max_marks, question.max_marks),
-            answer_type: partDraft.answer_type,
-            mark_scheme: draftToScheme(partDraft),
-            spec_ref: partDraft.spec_ref.trim() || null,
-          } : q),
-        };
-      });
-      setNotice(`Saved mark scheme for Part ${question.label}.`);
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : String(e);
-      logger.error('cc-exam-marker', 'Save mark scheme failed', { message: msg, questionId: question.id });
-      setError(msg);
-    } finally {
-      setSavingId(null);
-    }
-  };
-
-  const syncGraph = async () => {
-    if (!templateId) return;
-    setSyncing(true);
-    setError(null);
-    setNotice(null);
-    try {
-      const res = await examRepository.syncTemplateToGraph(templateId);
-      setNotice(`Neo4j projection ${res.status}; ${JSON.stringify(res.projection ?? {})}`);
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : String(e);
-      logger.error('cc-exam-marker', 'Neo4j sync failed', { message: msg, templateId });
-      setError(msg);
-    } finally {
-      setSyncing(false);
-    }
-  };
-
-  if (loading) {
-    return <Box sx={{ display: 'flex', justifyContent: 'center', py: 10 }}><CircularProgress /></Box>;
-  }
-
-  return (
-    <Container maxWidth="xl" sx={{ py: 4 }}>
-      <Stack spacing={3}>
-        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 2 }}>
-          <Box>
-            <Button startIcon={<ArrowBackIcon />} onClick={() => navigate('/exam-marker')} sx={{ mb: 1 }}>
-              Back to templates
-            </Button>
-            <Typography variant="h3" component="h1">Mark Scheme editor</Typography>
-            <Typography variant="body1" color="text.secondary">
-              {template?.title ?? 'Template'} · Edit per-Part mark schemes and link assessed specification points.
-            </Typography>
-          </Box>
-          <Stack direction="row" spacing={1}>
-            {templateId && <Button variant="outlined" onClick={() => navigate(`/exam-marker/${templateId}/setup`)}>Setup canvas</Button>}
-            <Button variant="outlined" startIcon={<SyncIcon />} onClick={syncGraph} disabled={syncing || !templateId}>
-              {syncing ? 'Syncing…' : 'Sync to graph'}
-            </Button>
-          </Stack>
-        </Box>
-
-        {error && <Alert severity="error" onClose={() => setError(null)}>{error}</Alert>}
-        {notice && <Alert severity="success" onClose={() => setNotice(null)}>{notice}</Alert>}
-        {specEndpointMissing && (
-          <Alert severity="warning">
-            SpecPoint picker endpoint was not available from this API build. You can still type a spec_ref manually; the backend projection resolves it during neo4j-sync.
-          </Alert>
-        )}
-
-        <Paper variant="outlined" sx={{ p: 2 }}>
-          <Grid container spacing={2} alignItems="center">
-            <Grid item xs={12} md={4}>
-              <TextField
-                label="Specification code"
-                value={specCode}
-                onChange={(e) => setSpecCode(e.target.value)}
-                fullWidth
-                helperText="Example: AQA-PHYS-8463. Used by the SpecPoint picker."
-              />
-            </Grid>
-            <Grid item xs={12} md={8}>
-              <Typography variant="body2" color="text.secondary">
-                Save writes PATCH /api/exam/questions/:id. Spec refs are persisted on the Part and projected as (:Part)-[:ASSESSES]-&gt;(:SpecPoint).
-              </Typography>
-            </Grid>
-          </Grid>
-        </Paper>
-
-        {parts.length === 0 ? (
-          <Alert severity="info">
-            This template has no Parts yet. Draw Part boxes on the setup canvas first, then return here to enter mark schemes.
-          </Alert>
-        ) : (
-          <Grid container spacing={3}>
-            <Grid item xs={12} md={3}>
-              <Card variant="outlined">
-                <CardContent>
-                  <Typography variant="h6" gutterBottom>Parts</Typography>
-                  <Tabs
-                    orientation="vertical"
-                    value={selectedId ?? false}
-                    onChange={(_, value) => setSelectedId(value)}
-                    variant="scrollable"
-                    sx={{ borderRight: 1, borderColor: 'divider', maxHeight: '65vh' }}
-                  >
-                    {parts.map((part) => (
-                      <Tab
-                        key={part.id}
-                        value={part.id}
-                        label={
-                          <Box sx={{ textAlign: 'left', width: '100%' }}>
-                            <Typography variant="body2">Part {part.label}</Typography>
-                            <Stack direction="row" spacing={0.5} sx={{ mt: 0.5, flexWrap: 'wrap' }}>
-                              <Chip size="small" label={`${drafts[part.id]?.max_marks ?? part.max_marks} marks`} />
-                              {(drafts[part.id]?.spec_ref || part.spec_ref) && <Chip size="small" color="info" label={drafts[part.id]?.spec_ref || part.spec_ref || ''} />}
-                            </Stack>
-                          </Box>
-                        }
-                      />
-                    ))}
-                  </Tabs>
-                </CardContent>
-              </Card>
-            </Grid>
-
-            <Grid item xs={12} md={9}>
-              {selected && draft && (
-                <Card variant="outlined">
-                  <CardContent>
-                    <Stack spacing={3}>
-                      <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, flexWrap: 'wrap' }}>
-                        <Box>
-                          <Typography variant="h5">Part {selected.label}</Typography>
-                          <Typography variant="body2" color="text.secondary">
-                            {selected.parent_id ? `Parent question ${selected.parent_id}` : 'No parent question'}
-                          </Typography>
-                        </Box>
-                        <Button
-                          variant="contained"
-                          startIcon={<SaveIcon />}
-                          disabled={savingId === selected.id}
-                          onClick={() => savePart(selected)}
-                        >
-                          {savingId === selected.id ? 'Saving…' : 'Save part'}
-                        </Button>
-                      </Box>
-
-                      <Grid container spacing={2}>
-                        <Grid item xs={12} sm={4}>
-                          <TextField
-                            label="Max marks"
-                            value={draft.max_marks}
-                            onChange={(e) => updateDraft(selected.id, { max_marks: e.target.value })}
-                            type="number"
-                            inputProps={{ min: 0, step: 0.5 }}
-                            fullWidth
-                          />
-                        </Grid>
-                        <Grid item xs={12} sm={4}>
-                          <FormControl fullWidth>
-                            <InputLabel id="answer-type-label">Answer type</InputLabel>
-                            <Select
-                              labelId="answer-type-label"
-                              label="Answer type"
-                              value={draft.answer_type}
-                              onChange={(e) => updateDraft(selected.id, { answer_type: e.target.value as PartDraft['answer_type'] })}
-                            >
-                              {ANSWER_TYPES.map((type) => <MenuItem key={type} value={type}>{type}</MenuItem>)}
-                            </Select>
-                          </FormControl>
-                        </Grid>
-                        <Grid item xs={12} sm={4}>
-                          <FormControl fullWidth>
-                            <InputLabel id="scheme-type-label">Scheme form</InputLabel>
-                            <Select
-                              labelId="scheme-type-label"
-                              label="Scheme form"
-                              value={draft.schemeType}
-                              onChange={(e) => updateDraft(selected.id, { schemeType: e.target.value as MarkSchemeType })}
-                            >
-                              {SCHEME_TYPES.map((type) => <MenuItem key={type.value} value={type.value}>{type.label}</MenuItem>)}
-                            </Select>
-                          </FormControl>
-                        </Grid>
-                      </Grid>
-
-                      <Autocomplete
-                        options={specPoints}
-                        value={selectedSpecPoint}
-                        onChange={(_, value) => updateDraft(selected.id, { spec_ref: value?.ref ?? '' })}
-                        getOptionLabel={(option) => `${option.ref} — ${option.description}`}
-                        isOptionEqualToValue={(option, value) => option.ref === value.ref}
-                        renderInput={(params) => (
-                          <TextField
-                            {...params}
-                            label="SpecPoint picker"
-                            helperText={specPoints.length ? 'Choose a seeded SpecPoint, or type below to override.' : 'No picker results loaded; type spec_ref manually below.'}
-                          />
-                        )}
-                      />
-
-                      <TextField
-                        label="spec_ref"
-                        value={draft.spec_ref}
-                        onChange={(e) => updateDraft(selected.id, { spec_ref: e.target.value })}
-                        helperText="Persisted to exam_questions.spec_ref; graph sync creates the ASSESSES edge when the ref matches a seeded SpecPoint."
-                        fullWidth
-                      />
-
-                      <Divider />
-
-                      <TextField
-                        label={`${SCHEME_TYPES.find((type) => type.value === draft.schemeType)?.label ?? 'Mark scheme'} body`}
-                        value={draft.body}
-                        onChange={(e) => updateDraft(selected.id, { body: e.target.value })}
-                        helperText={SCHEME_TYPES.find((type) => type.value === draft.schemeType)?.helper}
-                        multiline
-                        minRows={10}
-                        fullWidth
-                      />
-
-                      <TextField
-                        label="Internal marking notes"
-                        value={draft.notes}
-                        onChange={(e) => updateDraft(selected.id, { notes: e.target.value })}
-                        multiline
-                        minRows={3}
-                        fullWidth
-                      />
-                    </Stack>
-                  </CardContent>
-                </Card>
-              )}
-            </Grid>
-          </Grid>
-        )}
-      </Stack>
-    </Container>
-  );
-};
-
-export default MarkSchemePage;
@@ -1,2 +1 @@
 export { default as ExamDashboardPage } from './ExamDashboardPage';
-export { default as MarkSchemePage } from './MarkSchemePage';
@@ -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>
+  )
+}
@@ -13,9 +13,6 @@ import type {
  CreateTemplatePayload,
  ExamTemplate,
  ExamTemplateDetail,
-  Neo4jSyncResult,
-  PatchQuestionPayload,
-  SpecPoint,
 } from '../../types/exam.types';

 const EXAM_BASE = `${API_BASE}/api/exam`;
@@ -46,6 +43,24 @@ export const examRepository = {

  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;
  },
@@ -54,28 +69,6 @@ export const examRepository = {
    const headers = await authHeaders();
    await axios.delete(`${EXAM_BASE}/templates/${templateId}`, { headers });
  },
-
-  async patchQuestion(questionId: string, payload: PatchQuestionPayload) {
-    const headers = await authHeaders();
-    const res = await axios.patch(`${EXAM_BASE}/questions/${questionId}`, payload, { headers });
-    return res.data;
-  },
-
-  async listSpecPoints(specCode: string, search?: string): Promise<SpecPoint[]> {
-    const headers = await authHeaders();
-    const res = await axios.get<{ points?: SpecPoint[] } | SpecPoint[]>(
-      `${EXAM_BASE}/specs/${encodeURIComponent(specCode)}/points`,
-      { headers, params: search ? { q: search } : undefined },
-    );
-    if (Array.isArray(res.data)) return res.data;
-    return res.data.points ?? [];
-  },
-
-  async syncTemplateToGraph(templateId: string): Promise<Neo4jSyncResult> {
-    const headers = await authHeaders();
-    const res = await axios.post<Neo4jSyncResult>(`${EXAM_BASE}/templates/${templateId}/neo4j-sync`, {}, { headers });
-    return res.data;
-  },
 };

 export default examRepository;
@@ -27,46 +27,11 @@ export interface CreateTemplatePayload {
  exam_id?: string;
  exam_code?: string;
  source_file_id?: string;
+  source_pdf?: File | null;
  page_count?: number;
  institute_id?: string;
 }

-export type MarkSchemeType = 'points' | 'levels' | 'parts' | 'checklist' | 'free';
-
-export interface MarkSchemePoint {
-  mark: number;
-  text: string;
-}
-
-export interface MarkSchemeLevel {
-  level: string;
-  min: number;
-  max: number;
-  descriptor: string;
-}
-
-export interface MarkSchemePart {
-  label: string;
-  marks: number;
-  guidance: string;
-}
-
-export interface MarkSchemeChecklistItem {
-  text: string;
-  marks: number;
-}
-
-export interface MarkScheme {
-  type?: MarkSchemeType;
-  points?: MarkSchemePoint[];
-  levels?: MarkSchemeLevel[];
-  parts?: MarkSchemePart[];
-  checklist?: MarkSchemeChecklistItem[];
-  text?: string;
-  notes?: string;
-  [key: string]: unknown;
-}
-
 /** Canvas children (used from S4-9 onward; defined here so the seam is complete). */
 export interface ExamQuestion {
  id: string;
@@ -77,11 +42,9 @@ export interface ExamQuestion {
  max_marks: number;
  answer_type: string | null;
  mcq_options: unknown | null;
-  mark_scheme: MarkScheme;
+  mark_scheme: Record<string, unknown>;
  is_container: boolean;
  spec_ref: string | null;
-  bounds?: Record<string, number> | null;
-  page?: number | null;
 }

 export interface ExamResponseArea {
@@ -90,9 +53,8 @@ export interface ExamResponseArea {
  template_id: string;
  page: number;
  bounds: Record<string, number>;
-  kind: 'response' | 'context' | 'question_number' | 'mark_area' | 'reference' | 'furniture';
+  kind: 'response' | 'context';
  response_form: string | null;
-  context_type?: string | null;
  source: 'manual' | 'ai';
  confirmed: boolean;
  confidence: number | null;
@@ -115,28 +77,3 @@ export interface ExamTemplateDetail extends ExamTemplate {
  response_areas: ExamResponseArea[];
  boundaries: ExamBoundary[];
 }
-
-export interface PatchQuestionPayload {
-  label?: string;
-  order?: number;
-  max_marks?: number;
-  answer_type?: 'written' | 'mcq' | 'short' | 'diagram' | null;
-  mcq_options?: unknown;
-  mark_scheme?: MarkScheme;
-  is_container?: boolean;
-  spec_ref?: string | null;
-}
-
-export interface SpecPoint {
-  uid?: string;
-  uuid_string?: string;
-  ref: string;
-  description: string;
-  spec_code: string;
-  exam_board_code?: string;
-}
-
-export interface Neo4jSyncResult {
-  status: string;
-  projection?: Record<string, unknown>;
-}
@@ -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')
+  })
+})
@@ -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,
+  }
+}