chore: preserve app workspace t_61fb4c27_clone

nginx:alpine mime.types only covers .js, not .mjs. The pdfjs-dist v4
worker is output as pdf.worker-*.mjs; without the correct MIME type the
browser refuses to execute it as a module worker and pdfjs throws
'Network Error', blocking the PDF backdrop from rendering.

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>

Dockerfile

@@ -19,6 +19,9 @@ FROM nginx:alpine
 # Copy built files
 COPY --from=builder /app/dist /usr/share/nginx/html
 
+# .mjs files (pdfjs worker) must be served as application/javascript for module workers
+RUN sed -i 's|application/javascript\s*js;|application/javascript js mjs;|' /etc/nginx/mime.types
+
 # Create a simple nginx configuration
 RUN echo 'server { \
     listen 3000; \

smoke-s4-9c.js

@@ -0,0 +1,60 @@
+const { chromium } = require('playwright');
+const fs = require('fs');
+
+const BASE = process.env.PLAYWRIGHT_BASE_URL || 'http://192.168.0.251:13000';
+const EMAIL = process.env.VITE_TEST_TEACHER_EMAIL || '[email protected]';
+const PASSWORD = process.env.VITE_TEST_TEACHER_PASSWORD || process.env.SEED_TEACHER_PASSWORD;
+const TEMPLATE_ID = process.env.TEMPLATE_ID || '31d92cf3-9bbd-4a7e-b2dc-b37f8b69bc34';
+const OUT = process.env.OUT || '/out';
+
+async function run(mode) {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ colorScheme: mode, viewport: { width: 1440, height: 980 } });
+  const page = await context.newPage();
+  const messages = [];
+  page.on('console', msg => messages.push(`${msg.type()}: ${msg.text()}`));
+  page.on('pageerror', err => messages.push(`pageerror: ${err.message}`));
+
+  await page.goto(`${BASE}/login`, { waitUntil: 'domcontentloaded' });
+  if (await page.getByLabel('Email').count()) {
+    if (!PASSWORD) throw new Error('missing password env');
+    await page.getByLabel('Email').fill(EMAIL);
+    await page.getByLabel('Password').fill(PASSWORD);
+    await page.getByRole('button', { name: 'Login' }).click();
+    await page.waitForURL(url => /\/dashboard|\/exam-marker|\/node\//.test(url.pathname), { timeout: 20000 });
+  }
+
+  await page.goto(`${BASE}/exam-marker/${TEMPLATE_ID}/setup`, { waitUntil: 'domcontentloaded' });
+  await page.waitForSelector('[data-testid="exam-template-setup-canvas"]', { timeout: 20000 });
+  await page.waitForTimeout(3500);
+
+  const text = await page.locator('body').innerText();
+  const checks = {
+    hasBoundaryTool: text.includes('Boundary'),
+    hasPartTool: text.includes('Part'),
+    hasResponseTool: text.includes('Response'),
+    hasContextTool: text.includes('Context'),
+    hasQuestionNumberTool: text.includes('Q Number'),
+    hasMarkAreaTool: text.includes('Mark Area'),
+    hasReferenceTool: text.includes('Reference'),
+    hasFurnitureTool: text.includes('Furniture'),
+    hasHintPanel: text.includes('Setup guide') && text.includes('Boundary pairing preview'),
+    hasMultiPageCopy: text.includes('later page') || text.includes('multi-page'),
+    hasPdfStatus: text.includes('PDF backdrop:'),
+    crashOverlay: text.includes('Template setup canvas crashed'),
+  };
+  await page.screenshot({ path: `${OUT}/s4-9c-${mode}.png`, fullPage: true });
+  await browser.close();
+  return { mode, url: `${BASE}/exam-marker/${TEMPLATE_ID}/setup`, checks, consoleMessages: messages };
+}
+
+(async () => {
+  fs.mkdirSync(OUT, { recursive: true });
+  const results = [];
+  for (const mode of ['light', 'dark']) results.push(await run(mode));
+  fs.writeFileSync(`${OUT}/s4-9c-smoke.json`, JSON.stringify(results, null, 2));
+  const failures = results.flatMap(r => Object.entries(r.checks).filter(([k,v]) => k === 'crashOverlay' ? v : !v).map(([k]) => `${r.mode}:${k}`));
+  const consoleErrors = results.flatMap(r => r.consoleMessages.filter(m => /^(error|pageerror):/i.test(m) && !/Failed to load resource/i.test(m)));
+  console.log(JSON.stringify({ results, failures, consoleErrors }, null, 2));
+  if (failures.length || consoleErrors.length) process.exit(1);
+})().catch(err => { console.error(err); process.exit(1); });

src/AppRoutes.admin.test.tsx

@@ -31,7 +31,10 @@ 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> }));
+vi.mock('./pages/exam', () => ({
+  ExamDashboardPage: () => <div>Exam Marker</div>,
+  ExamTemplateSetupPage: () => <div>Exam Template Setup</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> }));

src/pages/exam/setup/ExamTemplateSetupPage.tsx

@@ -5,29 +5,50 @@ import { Alert, Box, Button, Chip, CircularProgress, Divider, Paper, Snackbar, S
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import SaveIcon from '@mui/icons-material/Save'
 import MouseIcon from '@mui/icons-material/Mouse'
+import HorizontalRuleIcon from '@mui/icons-material/HorizontalRule'
+import CropSquareIcon from '@mui/icons-material/CropSquare'
+import EditNoteIcon from '@mui/icons-material/EditNote'
+import VisibilityIcon from '@mui/icons-material/Visibility'
+import TagIcon from '@mui/icons-material/Tag'
+import GradingIcon from '@mui/icons-material/Grading'
+import AttachFileIcon from '@mui/icons-material/AttachFile'
+import HideSourceIcon from '@mui/icons-material/HideSource'
 import '@tldraw/tldraw/tldraw.css'
-import { Editor, Tldraw, createShapeId, defaultBindingUtils, TLShape } from '@tldraw/tldraw'
+import { Editor, Tldraw, createShapeId, TLShape } from '@tldraw/tldraw'
 import axios from 'axios'
 
 import { ErrorBoundary } from '../../../components/ErrorBoundary'
 import { logger } from '../../../debugConfig'
 import { examRepository } from '../../../services/exam/examRepository'
 import type { ExamTemplateDetail } from '../../../types/exam.types'
-import { ExamCanvasShapeModel, PAGE_HEIGHT, PAGE_WIDTH, isUuid, newDomainId, serializeCanvasShapes, shapesFromTemplate } from '../../../utils/exam-canvas/model'
-import { examCanvasShapeUtils, examCanvasTools, ExamCanvasTLShape, SHAPE_TYPES, shapeTypeToKind } from './examCanvasShapes'
+import { CanvasPageGeometry, ExamCanvasShapeModel, PAGE_HEIGHT, PAGE_WIDTH, isUuid, newDomainId, pageForY, serializeCanvasShapes, shapesFromTemplate } from '../../../utils/exam-canvas/model'
+import { PDF_PAGE_SHAPE_TYPE, examCanvasShapeUtils, examCanvasTools, ExamCanvasTLShape, SHAPE_TYPES, isPdfPageShape, shapeTypeToKind } from './examCanvasShapes'
+import { loadPdfPageImages, PdfPageImage } from './pdfLoader'
 
 const TOOLS = [
-  { id: 'select', label: 'Select', tip: 'Move, resize, or delete shapes.', color: 'default' as const },
-  { id: SHAPE_TYPES.boundary, label: 'Boundary', tip: 'Draw one horizontal line. A main question is saved from each top+bottom pair.', color: 'error' as const },
-  { id: SHAPE_TYPES.part, label: 'Part', tip: 'Draw the markable sub-question box inside a boundary pair.', color: 'warning' as const },
-  { id: SHAPE_TYPES.response, label: 'Response', tip: 'Draw around where the student writes; saved with response_form=lines.', color: 'primary' as const },
-  { id: SHAPE_TYPES.context, label: 'Context', tip: 'Draw around stimulus/context material; saved with context_type=generic.', color: 'secondary' as const },
-  { id: SHAPE_TYPES.question_number, label: 'Q Number', tip: 'Box the printed question number.', color: 'success' as const },
-  { id: SHAPE_TYPES.mark_area, label: 'Mark Area', tip: 'Box printed marks such as [2].', color: 'success' as const },
-  { id: SHAPE_TYPES.reference, label: 'Reference', tip: 'Box student resources/reference material.', color: 'info' as const },
-  { id: SHAPE_TYPES.furniture, label: 'Furniture', tip: 'Mark margins/page numbers/ignored decoration.', color: 'default' as const },
+  { id: 'select', label: 'Select', tip: 'Move, resize, delete, or inspect attachment pills.', color: 'inherit' as const, icon: <MouseIcon fontSize="small" /> },
+  { id: SHAPE_TYPES.boundary, label: 'Boundary', tip: 'Place a top line, then a bottom line; the bottom can be on a later PDF page for multi-page questions.', color: 'error' as const, icon: <HorizontalRuleIcon fontSize="small" /> },
+  { id: SHAPE_TYPES.part, label: 'Part', tip: 'Draw the markable sub-question box inside a boundary pair.', color: 'warning' as const, icon: <CropSquareIcon fontSize="small" /> },
+  { id: SHAPE_TYPES.response, label: 'Response', tip: 'Draw around where the student writes; saved with response_form=lines.', color: 'primary' as const, icon: <EditNoteIcon fontSize="small" /> },
+  { id: SHAPE_TYPES.context, label: 'Context', tip: 'Draw around stimulus/context material; saved with context_type=generic.', color: 'secondary' as const, icon: <VisibilityIcon fontSize="small" /> },
+  { id: SHAPE_TYPES.question_number, label: 'Q Number', tip: 'Box the printed question number for OCR and template checking.', color: 'success' as const, icon: <TagIcon fontSize="small" /> },
+  { id: SHAPE_TYPES.mark_area, label: 'Mark Area', tip: 'Box printed marks such as [2] or Total for Question X.', color: 'success' as const, icon: <GradingIcon fontSize="small" /> },
+  { id: SHAPE_TYPES.reference, label: 'Reference', tip: 'Box formula sheets, data sheets, appendices, or other student resources.', color: 'info' as const, icon: <AttachFileIcon fontSize="small" /> },
+  { id: SHAPE_TYPES.furniture, label: 'Furniture', tip: 'Mark margins, page numbers, blank extra space, or decoration to ignore.', color: 'inherit' as const, icon: <HideSourceIcon fontSize="small" /> },
 ]
 
+const PAGE_START_X = 260
+const PDF_PAGE_IDS_PREFIX = 'pdf-page-'
+
+function pageGeometryFromImages(pages: PdfPageImage[]): CanvasPageGeometry[] {
+  let y = 0
+  return pages.map((page) => {
+    const geometry = { pageNumber: page.pageNumber, x: PAGE_START_X, y, w: page.width, h: page.height }
+    y += page.height
+    return geometry
+  })
+}
+
 function apiMessage(err: unknown): { message: string; conflict: boolean } {
   if (axios.isAxiosError(err)) {
     const detail = (err.response?.data as { detail?: string } | undefined)?.detail
@@ -88,6 +109,47 @@ function loadShapes(editor: Editor, models: ExamCanvasShapeModel[]) {
   })))
 }
 
+function syncPdfPages(editor: Editor, pages: PdfPageImage[]) {
+  const existing = editor.getCurrentPageShapes().filter((s) => isPdfPageShape(s.type)).map((s) => s.id)
+  if (existing.length) editor.deleteShapes(existing)
+  if (!pages.length) return
+  const geometries = pageGeometryFromImages(pages)
+  editor.createShapes(geometries.map((geometry) => {
+    const page = pages[geometry.pageNumber - 1]
+    return {
+      id: createShapeId(PDF_PAGE_IDS_PREFIX + geometry.pageNumber),
+      type: PDF_PAGE_SHAPE_TYPE,
+      x: geometry.x,
+      y: geometry.y,
+      isLocked: true,
+      props: { w: geometry.w, h: geometry.h, src: page.src, pageNumber: geometry.pageNumber },
+    } as any
+  }))
+  const ids = geometries.map((geometry) => createShapeId(PDF_PAGE_IDS_PREFIX + geometry.pageNumber))
+  try { editor.sendToBack(ids as any) } catch { /* tldraw 3 keeps creation order behind later region shapes */ }
+}
+
+type BoundaryPairSummary = { index: number; label: string; startPage: number; endPage: number; multiPage: boolean }
+
+function boundaryPairSummaries(editor: Editor | null, pages: CanvasPageGeometry[]): BoundaryPairSummary[] {
+  if (!editor) return []
+  const boundaries = editor.getCurrentPageShapes()
+    .map(modelFromTLShape)
+    .filter((shape): shape is ExamCanvasShapeModel => shape?.kind === 'boundary')
+    .sort((a, b) => (pageForY(a.y + a.h / 2, pages) - pageForY(b.y + b.h / 2, pages)) || (a.y - b.y))
+  const summaries: BoundaryPairSummary[] = []
+  for (let i = 0; i < boundaries.length; i += 2) {
+    const top = boundaries[i]
+    const bottom = boundaries[i + 1]
+    if (!top || !bottom) break
+    const startPage = pageForY(top.y + top.h / 2, pages)
+    const endPage = pageForY(bottom.y + bottom.h / 2, pages)
+    const label = top.label?.replace(/\s+(start|end)$/i, '') || bottom.label?.replace(/\s+(start|end)$/i, '') || `Q${summaries.length + 1}`
+    summaries.push({ index: summaries.length + 1, label, startPage, endPage, multiPage: startPage !== endPage })
+  }
+  return summaries
+}
+
 function seedGuide(editor: Editor) {
   const current = editor.getCurrentPageShapes().filter((s) => shapeTypeToKind(s.type))
   if (current.length) return
@@ -104,6 +166,7 @@ const ExamTemplateSetupInner: React.FC = () => {
   const navigate = useNavigate()
   const theme = useTheme()
   const editorRef = useRef<Editor | null>(null)
+  const pageGeometriesRef = useRef<CanvasPageGeometry[]>([])
   const [template, setTemplate] = useState<ExamTemplateDetail | null>(null)
   const [loading, setLoading] = useState(true)
   const [saving, setSaving] = useState(false)
@@ -111,6 +174,13 @@ const ExamTemplateSetupInner: React.FC = () => {
   const [error, setError] = useState<string | null>(null)
   const [conflict, setConflict] = useState<string | null>(null)
   const [activeTool, setActiveTool] = useState('select')
+  const [pdfStatus, setPdfStatus] = useState<'loading' | 'ready' | 'missing' | 'error'>('loading')
+  const [pdfError, setPdfError] = useState<string | null>(null)
+  const [boundaryPairs, setBoundaryPairs] = useState<BoundaryPairSummary[]>([])
+
+  const refreshBoundaryPairs = useCallback(() => {
+    setBoundaryPairs(boundaryPairSummaries(editorRef.current, pageGeometriesRef.current))
+  }, [])
 
   const load = useCallback(async () => {
     if (!templateId) return
@@ -118,8 +188,29 @@ const ExamTemplateSetupInner: React.FC = () => {
     try {
       const detail = await examRepository.getTemplate(templateId)
       setTemplate(detail)
+      let pages: PdfPageImage[] = []
+      setPdfStatus('loading')
+      setPdfError(null)
+      try {
+        const bytes = await examRepository.getTemplateSourcePdf(templateId)
+        pages = await loadPdfPageImages(bytes)
+        setPdfStatus(pages.length ? 'ready' : 'missing')
+      } catch (pdfErr) {
+        const pdfMsg = apiMessage(pdfErr).message
+        setPdfStatus(pdfMsg.toLowerCase().includes('404') ? 'missing' : 'error')
+        setPdfError(pdfMsg)
+        logger.warn('cc-exam-marker', 'Template source PDF load failed', { templateId, message: pdfMsg })
+      }
+      const geometries = pageGeometryFromImages(pages)
+      pageGeometriesRef.current = geometries
       const editor = editorRef.current
-      if (editor) loadShapes(editor, shapesFromTemplate(detail))
+      if (editor) {
+        syncPdfPages(editor, pages)
+        loadShapes(editor, shapesFromTemplate(detail, geometries))
+        setBoundaryPairs(boundaryPairSummaries(editor, geometries))
+      } else {
+        setBoundaryPairs([])
+      }
       setDirty(false)
     } catch (e) {
       const msg = apiMessage(e).message
@@ -128,7 +219,7 @@ const ExamTemplateSetupInner: React.FC = () => {
     } finally {
       setLoading(false)
     }
-  }, [templateId])
+  }, [templateId, refreshBoundaryPairs])
 
   useEffect(() => { void load() }, [load])
 
@@ -139,10 +230,11 @@ const ExamTemplateSetupInner: React.FC = () => {
     try {
       ensureDomainIds(editor)
       const shapes = editor.getCurrentPageShapes().map(modelFromTLShape).filter(Boolean) as ExamCanvasShapeModel[]
-      const payload = serializeCanvasShapes(template, shapes)
+      const payload = serializeCanvasShapes(template, shapes, pageGeometriesRef.current)
       const saved = await examRepository.replaceTemplate(templateId, payload)
       setTemplate(saved)
-      loadShapes(editor, shapesFromTemplate(saved))
+      loadShapes(editor, shapesFromTemplate(saved, pageGeometriesRef.current))
+      refreshBoundaryPairs()
       setDirty(false)
     } catch (e) {
       const msg = apiMessage(e)
@@ -151,7 +243,7 @@ const ExamTemplateSetupInner: React.FC = () => {
     } finally {
       setSaving(false)
     }
-  }, [template, templateId])
+  }, [template, templateId, refreshBoundaryPairs])
 
   const toolButtons = useMemo(() => TOOLS.map((tool) => (
     <Tooltip title={tool.tip} key={tool.id} placement="right">
@@ -159,7 +251,7 @@ const ExamTemplateSetupInner: React.FC = () => {
         size="small"
         variant={activeTool === tool.id ? 'contained' : 'outlined'}
         color={tool.color}
-        startIcon={tool.id === 'select' ? <MouseIcon fontSize="small" /> : undefined}
+        startIcon={tool.icon}
         onClick={() => {
           const editor = editorRef.current
           if (!editor) return
@@ -173,21 +265,105 @@ const ExamTemplateSetupInner: React.FC = () => {
     </Tooltip>
   )), [activeTool])
 
+  const canvasCss = {
+    '& .tlui-layout': { display: 'none' },
+    '& .exam-canvas-shape': {
+      width: '100%',
+      height: '100%',
+      boxSizing: 'border-box',
+      position: 'relative',
+      border: '2px var(--exam-shape-border-style) var(--exam-shape-stroke)',
+      borderRadius: 'var(--exam-shape-radius)',
+      background: 'var(--exam-shape-fill)',
+      color: 'var(--exam-shape-stroke)',
+      fontFamily: 'Inter, system-ui, sans-serif',
+      display: 'flex',
+      alignItems: 'flex-start',
+      justifyContent: 'space-between',
+      gap: 0.75,
+      padding: 1,
+      boxShadow: '0 10px 22px rgba(15,23,42,0.10)',
+      overflow: 'hidden',
+    },
+    '& .exam-canvas-shape--boundary': {
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100%',
+      minHeight: 8,
+      padding: '0 64px',
+      background: 'transparent',
+      boxShadow: 'none',
+    },
+    '& .exam-canvas-shape__main-label': {
+      fontSize: 12,
+      fontWeight: 900,
+      textTransform: 'uppercase',
+      letterSpacing: 0.6,
+      background: 'rgba(255,255,255,0.90)',
+      border: '1px solid rgba(15,23,42,0.12)',
+      borderRadius: 999,
+      padding: '2px 8px',
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 0.5,
+      lineHeight: 1.2,
+    },
+    '& .exam-canvas-shape__icon': { minWidth: 14, textAlign: 'center' },
+    '& .exam-canvas-shape__badge': {
+      fontSize: 10,
+      fontWeight: 800,
+      letterSpacing: 0.7,
+      textTransform: 'uppercase',
+      background: 'rgba(255,255,255,0.68)',
+      borderRadius: 999,
+      padding: '2px 7px',
+      color: 'inherit',
+    },
+    '& .exam-canvas-shape__endcap': {
+      position: 'absolute',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      fontSize: 11,
+      fontWeight: 900,
+      borderRadius: 999,
+      padding: '1px 7px',
+      background: 'var(--exam-shape-stroke)',
+      color: '#fff',
+      boxShadow: '0 2px 8px rgba(0,0,0,0.16)',
+    },
+    '& .exam-canvas-shape__endcap--left': { left: 6 },
+    '& .exam-canvas-shape__endcap--right': { right: 6 },
+    ...(theme.palette.mode === 'dark' ? {
+      '& .exam-canvas-shape': {
+        borderColor: 'var(--exam-shape-stroke-dark)',
+        background: 'var(--exam-shape-fill-dark)',
+        color: 'var(--exam-shape-stroke-dark)',
+        boxShadow: '0 10px 22px rgba(0,0,0,0.28)',
+      },
+      '& .exam-canvas-shape--boundary': { background: 'transparent', boxShadow: 'none' },
+      '& .exam-canvas-shape__main-label, & .exam-canvas-shape__badge': {
+        background: 'rgba(15,23,42,0.84)',
+        borderColor: 'rgba(255,255,255,0.16)',
+      },
+      '& .exam-canvas-shape__endcap': { background: 'var(--exam-shape-stroke-dark)', color: '#0f172a' },
+    } : {}),
+  }
+
   return (
     <Box sx={{ position: 'fixed', inset: 0, zIndex: (t) => t.zIndex.drawer + 20, bgcolor: 'background.default' }}>
-      <Box sx={{ position: 'absolute', inset: 0, '& .tlui-layout': { display: 'none' } }} data-testid="exam-template-setup-canvas">
+      <Box sx={{ position: 'absolute', inset: 0, ...canvasCss }} data-testid="exam-template-setup-canvas">
         <Tldraw
           shapeUtils={examCanvasShapeUtils as any}
-          bindingUtils={defaultBindingUtils}
           tools={examCanvasTools as any}
           hideUi
           inferDarkMode={theme.palette.mode === 'dark'}
           autoFocus
           onMount={(editor) => {
             editorRef.current = editor
-            editor.user.updateUserPreferences({ isDarkMode: theme.palette.mode === 'dark' })
-            editor.store.listen(() => setDirty(true), { scope: 'document' })
-            if (template) loadShapes(editor, shapesFromTemplate(template)); else seedGuide(editor)
+            editor.user.updateUserPreferences({ colorScheme: theme.palette.mode === 'dark' ? 'dark' : 'light' })
+            editor.store.listen(() => { setDirty(true); refreshBoundaryPairs() }, { scope: 'document' })
+            if (template) loadShapes(editor, shapesFromTemplate(template, pageGeometriesRef.current)); else seedGuide(editor)
+            refreshBoundaryPairs()
           }}
         />
       </Box>
@@ -207,10 +383,29 @@ const ExamTemplateSetupInner: React.FC = () => {
         <Stack spacing={1}>{toolButtons}</Stack>
       </Paper>
 
-      <Paper elevation={4} sx={{ position: 'absolute', right: 16, bottom: 16, maxWidth: 420, p: 2, borderRadius: 3, bgcolor: 'background.paper' }}>
+      <Paper elevation={4} sx={{ position: 'absolute', right: 16, bottom: 16, maxWidth: 460, p: 2, borderRadius: 3, bgcolor: 'background.paper' }}>
         <Typography variant="subtitle2" gutterBottom>Setup guide</Typography>
         <Typography variant="body2" color="text.secondary">
-          1) Draw top and bottom Boundary lines for each main question. 2) Draw Part boxes inside the pair. 3) Draw Response/Context/metadata regions inside a Part. Save derives parent links by spatial containment and reloads from the API.
+          Start with boundaries: place the top line, then the bottom line. If a question continues, scroll to the later page and place the bottom boundary there. Next draw Part boxes, then Response/Context/metadata regions; Save links regions by spatial containment.
+        </Typography>
+        <Stack direction="row" spacing={0.75} flexWrap="wrap" useFlexGap sx={{ mt: 1 }}>
+          <Chip size="small" color="error" variant="outlined" label="Boundary = paired red lines" />
+          <Chip size="small" color="warning" variant="outlined" label="Part = amber markable box" />
+          <Chip size="small" color="primary" variant="outlined" label="Response = blue writing area" />
+          <Chip size="small" color="secondary" variant="outlined" label="Context = purple stimulus" />
+        </Stack>
+        <Box sx={{ mt: 1.25, p: 1, borderRadius: 2, bgcolor: (t) => t.palette.mode === 'dark' ? 'rgba(248,113,113,0.12)' : 'rgba(239,68,68,0.06)', border: '1px dashed', borderColor: 'error.main' }}>
+          <Typography variant="caption" sx={{ fontWeight: 800, display: 'block' }}>Boundary pairing preview</Typography>
+          {boundaryPairs.length ? boundaryPairs.slice(0, 4).map((pair) => (
+            <Typography key={`${pair.index}-${pair.label}`} variant="caption" color={pair.multiPage ? 'warning.main' : 'text.secondary'} sx={{ display: 'block' }}>
+              {pair.label}: p{pair.startPage} top → p{pair.endPage} bottom{pair.multiPage ? ' · multi-page span' : ''}
+            </Typography>
+          )) : (
+            <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>Draw two Boundary lines to preview the saved question span.</Typography>
+          )}
+        </Box>
+        <Typography variant="caption" color={pdfStatus === 'ready' ? 'success.main' : pdfStatus === 'error' ? 'error.main' : 'text.secondary'} sx={{ display: 'block', mt: 1 }}>
+          PDF backdrop: {pdfStatus === 'ready' ? 'loaded and locked behind regions' : pdfStatus === 'loading' ? 'loading…' : pdfStatus === 'missing' ? 'no source PDF for this template' : pdfError ?? 'failed to load'}
         </Typography>
       </Paper>
 

src/pages/exam/setup/examCanvasShapes.tsx

@@ -3,6 +3,8 @@ import React from 'react'
 import { BaseBoxShapeTool, BaseBoxShapeUtil, HTMLContainer, T, TLBaseBoxShape, toDomPrecision } from '@tldraw/tldraw'
 import type { ExamCanvasRegionKind, ExamCanvasShapeKind } from '../../../utils/exam-canvas/model'
 
+export const PDF_PAGE_SHAPE_TYPE = 'exam-pdf-page'
+
 export const SHAPE_TYPES = {
   boundary: 'exam-boundary',
   part: 'exam-part',
@@ -14,6 +16,11 @@ export const SHAPE_TYPES = {
   furniture: 'exam-region-furniture',
 } as const
 
+export type ExamPdfPageTLShape = TLBaseBoxShape & {
+  type: typeof PDF_PAGE_SHAPE_TYPE
+  props: { w: number; h: number; src: string; pageNumber: number }
+}
+
 export type ExamCanvasTLShape = TLBaseBoxShape & {
   type: typeof SHAPE_TYPES[keyof typeof SHAPE_TYPES]
   props: {
@@ -29,34 +36,42 @@ export type ExamCanvasTLShape = TLBaseBoxShape & {
   }
 }
 
-const palette: Record<ExamCanvasShapeKind, { stroke: string; fill: string; dash?: string; label: string }> = {
-  boundary: { stroke: '#ef4444', fill: 'rgba(239,68,68,0.06)', dash: '8 6', label: 'Boundary' },
-  part: { stroke: '#f59e0b', fill: 'rgba(245,158,11,0.16)', label: 'Part' },
-  response: { stroke: '#2563eb', fill: 'rgba(37,99,235,0.16)', label: 'Response' },
-  context: { stroke: '#7c3aed', fill: 'rgba(124,58,237,0.14)', dash: '6 5', label: 'Context' },
-  question_number: { stroke: '#0f766e', fill: 'rgba(15,118,110,0.14)', label: 'Question #' },
-  mark_area: { stroke: '#16a34a', fill: 'rgba(22,163,74,0.14)', label: 'Marks' },
-  reference: { stroke: '#0891b2', fill: 'rgba(8,145,178,0.14)', label: 'Reference' },
-  furniture: { stroke: '#64748b', fill: 'rgba(100,116,139,0.12)', dash: '3 5', label: 'Furniture' },
+const palette: Record<ExamCanvasShapeKind, { stroke: string; strokeDark: string; fill: string; fillDark: string; dash?: string; label: string; icon: string; badge: string }> = {
+  boundary: { stroke: '#dc2626', strokeDark: '#f87171', fill: 'rgba(239,68,68,0.06)', fillDark: 'rgba(248,113,113,0.12)', dash: '12 7', label: 'Boundary', icon: '↕', badge: 'TOP / BOTTOM' },
+  part: { stroke: '#d97706', strokeDark: '#fbbf24', fill: 'rgba(245,158,11,0.18)', fillDark: 'rgba(251,191,36,0.26)', label: 'Part', icon: '□', badge: 'MARKABLE BOX' },
+  response: { stroke: '#2563eb', strokeDark: '#60a5fa', fill: 'rgba(37,99,235,0.17)', fillDark: 'rgba(96,165,250,0.32)', label: 'Response', icon: '✎', badge: 'STUDENT WRITES' },
+  context: { stroke: '#7c3aed', strokeDark: '#c4b5fd', fill: 'rgba(124,58,237,0.14)', fillDark: 'rgba(167,139,250,0.28)', dash: '7 5', label: 'Context', icon: '◌', badge: 'STIMULUS' },
+  question_number: { stroke: '#0f766e', strokeDark: '#5eead4', fill: 'rgba(15,118,110,0.15)', fillDark: 'rgba(45,212,191,0.24)', label: 'Question #', icon: '#', badge: 'OCR LABEL' },
+  mark_area: { stroke: '#16a34a', strokeDark: '#86efac', fill: 'rgba(22,163,74,0.15)', fillDark: 'rgba(74,222,128,0.24)', label: 'Mark Area', icon: '✓', badge: 'PRINTED MARKS' },
+  reference: { stroke: '#0891b2', strokeDark: '#67e8f9', fill: 'rgba(8,145,178,0.14)', fillDark: 'rgba(34,211,238,0.24)', label: 'Reference', icon: '📎', badge: 'RESOURCE' },
+  furniture: { stroke: '#64748b', strokeDark: '#cbd5e1', fill: 'rgba(100,116,139,0.12)', fillDark: 'rgba(148,163,184,0.22)', dash: '3 5', label: 'Furniture', icon: '×', badge: 'IGNORE' },
 }
 
 function renderShape(shape: ExamCanvasTLShape) {
   const kind = shape.props.kind
   const p = palette[kind] ?? palette.response
   const isBoundary = kind === 'boundary'
+  const label = shape.props.label || p.label
   return (
     <HTMLContainer id={shape.id} style={{ width: toDomPrecision(shape.props.w), height: toDomPrecision(shape.props.h), pointerEvents: 'all' }}>
-      <div style={{
-        width: '100%', height: '100%', boxSizing: 'border-box', border: `${isBoundary ? 2 : 1.5}px solid ${p.stroke}`,
-        borderStyle: p.dash ? 'dashed' : 'solid', borderRadius: isBoundary ? 999 : 10,
-        background: isBoundary ? 'transparent' : p.fill, color: p.stroke, fontFamily: 'Inter, system-ui, sans-serif',
-        display: 'flex', alignItems: isBoundary ? 'center' : 'flex-start', justifyContent: isBoundary ? 'center' : 'space-between',
-        padding: isBoundary ? '0 8px' : 8, boxShadow: isBoundary ? 'none' : '0 10px 22px rgba(15,23,42,0.08)', overflow: 'hidden'
-      }}>
-        <span style={{ fontSize: 12, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0.6, background: 'rgba(255,255,255,0.84)', borderRadius: 999, padding: '2px 7px' }}>
-          {shape.props.label || p.label}
+      <div
+        className={`exam-canvas-shape exam-canvas-shape--${kind.replace('_', '-')}`}
+        style={{
+          '--exam-shape-stroke': p.stroke,
+          '--exam-shape-stroke-dark': p.strokeDark,
+          '--exam-shape-fill': p.fill,
+          '--exam-shape-fill-dark': p.fillDark,
+          '--exam-shape-border-style': p.dash ? 'dashed' : 'solid',
+          '--exam-shape-radius': isBoundary ? '999px' : kind === 'part' ? '6px' : '10px',
+        } as React.CSSProperties}
+      >
+        <span className="exam-canvas-shape__main-label">
+          <span className="exam-canvas-shape__icon" aria-hidden="true">{p.icon}</span>
+          <span>{label}</span>
         </span>
-        {!isBoundary && shape.props.questionId && <span style={{ fontSize: 11, fontWeight: 700, opacity: .75 }}>Attached</span>}
+        {!isBoundary && <span className="exam-canvas-shape__badge">{shape.props.questionId ? 'Attached' : p.badge}</span>}
+        {isBoundary && <span className="exam-canvas-shape__endcap exam-canvas-shape__endcap--left">{label.toLowerCase().includes('end') ? 'B' : 'T'}</span>}
+        {isBoundary && <span className="exam-canvas-shape__endcap exam-canvas-shape__endcap--right">{label.toLowerCase().includes('end') ? 'Bottom' : 'Top'}</span>}
       </div>
     </HTMLContainer>
   )
@@ -67,9 +82,26 @@ function defaultProps(kind: ExamCanvasShapeKind, w: number, h: number) {
   return { w, h, label: p.label, kind, responseForm: kind === 'response' ? 'lines' : undefined, contextType: kind === 'context' ? 'generic' : undefined }
 }
 
-class BoundaryUtil extends BaseBoxShapeUtil<ExamCanvasTLShape> { static override type = SHAPE_TYPES.boundary; static override props = { w: T.number, h: T.number, label: T.string, kind: T.string, maxMarks: T.optional(T.number), responseForm: T.optional(T.string), contextType: T.optional(T.string), questionId: T.optional(T.string), domainId: T.optional(T.string) }; override getDefaultProps(){ return defaultProps('boundary', 680, 8) }; override component(shape: ExamCanvasTLShape){ return renderShape(shape) } }
-class PartUtil extends BaseBoxShapeUtil<ExamCanvasTLShape> { static override type = SHAPE_TYPES.part; static override props = BoundaryUtil.props; override getDefaultProps(){ return defaultProps('part', 420, 170) }; override component(shape: ExamCanvasTLShape){ return renderShape(shape) } }
-function regionUtil(type: string, kind: ExamCanvasRegionKind, w = 360, h = 120) { return class extends BaseBoxShapeUtil<ExamCanvasTLShape> { static override type = type; static override props = BoundaryUtil.props; override getDefaultProps(){ return defaultProps(kind, w, h) }; override component(shape: ExamCanvasTLShape){ return renderShape(shape) } } }
+const sharedProps = { w: T.number, h: T.number, label: T.string, kind: T.string, maxMarks: T.optional(T.number), responseForm: T.optional(T.string), contextType: T.optional(T.string), questionId: T.optional(T.string), domainId: T.optional(T.string) }
+const ind = (s: ExamCanvasTLShape | ExamPdfPageTLShape) => <rect width={toDomPrecision(s.props.w)} height={toDomPrecision(s.props.h)} />
+
+class PdfPageUtil extends BaseBoxShapeUtil<ExamPdfPageTLShape> {
+  static override type = PDF_PAGE_SHAPE_TYPE
+  static override props = { w: T.number, h: T.number, src: T.string, pageNumber: T.number }
+  override getDefaultProps() { return { w: 780, h: 1100, src: '', pageNumber: 1 } }
+  override canEdit() { return false }
+  override component(shape: ExamPdfPageTLShape) {
+    return (
+      <HTMLContainer id={shape.id} style={{ width: toDomPrecision(shape.props.w), height: toDomPrecision(shape.props.h), pointerEvents: 'none' }}>
+        <img src={shape.props.src} alt={'PDF page ' + shape.props.pageNumber} draggable={false} style={{ width: '100%', height: '100%', display: 'block', userSelect: 'none', pointerEvents: 'none', boxShadow: '0 2px 16px rgba(15,23,42,0.18)', background: '#fff' }} />
+      </HTMLContainer>
+    )
+  }
+  override indicator(shape: ExamPdfPageTLShape) { return ind(shape) }
+}
+class BoundaryUtil extends BaseBoxShapeUtil<ExamCanvasTLShape> { static override type = SHAPE_TYPES.boundary; static override props = sharedProps; override getDefaultProps(){ return defaultProps('boundary', 680, 8) }; override component(shape: ExamCanvasTLShape){ return renderShape(shape) }; override indicator(shape: ExamCanvasTLShape){ return ind(shape) } }
+class PartUtil extends BaseBoxShapeUtil<ExamCanvasTLShape> { static override type = SHAPE_TYPES.part; static override props = sharedProps; override getDefaultProps(){ return defaultProps('part', 420, 170) }; override component(shape: ExamCanvasTLShape){ return renderShape(shape) }; override indicator(shape: ExamCanvasTLShape){ return ind(shape) } }
+function regionUtil(type: string, kind: ExamCanvasRegionKind, w = 360, h = 120) { return class extends BaseBoxShapeUtil<ExamCanvasTLShape> { static override type = type; static override props = sharedProps; override getDefaultProps(){ return defaultProps(kind, w, h) }; override component(shape: ExamCanvasTLShape){ return renderShape(shape) }; override indicator(shape: ExamCanvasTLShape){ return ind(shape) } } }
 
 class BoundaryTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.boundary; static override initial = 'pointing'; shapeType = SHAPE_TYPES.boundary }
 class PartTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.part; static override initial = 'pointing'; shapeType = SHAPE_TYPES.part }
@@ -80,9 +112,13 @@ class MarkAreaTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.m
 class ReferenceTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.reference; static override initial = 'pointing'; shapeType = SHAPE_TYPES.reference }
 class FurnitureTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.furniture; static override initial = 'pointing'; shapeType = SHAPE_TYPES.furniture }
 
-export const examCanvasShapeUtils = [BoundaryUtil, PartUtil, regionUtil(SHAPE_TYPES.response, 'response'), regionUtil(SHAPE_TYPES.context, 'context'), regionUtil(SHAPE_TYPES.question_number, 'question_number', 170, 80), regionUtil(SHAPE_TYPES.mark_area, 'mark_area', 170, 80), regionUtil(SHAPE_TYPES.reference, 'reference'), regionUtil(SHAPE_TYPES.furniture, 'furniture')] as const
+export const examCanvasShapeUtils = [PdfPageUtil, BoundaryUtil, PartUtil, regionUtil(SHAPE_TYPES.response, 'response'), regionUtil(SHAPE_TYPES.context, 'context'), regionUtil(SHAPE_TYPES.question_number, 'question_number', 170, 80), regionUtil(SHAPE_TYPES.mark_area, 'mark_area', 170, 80), regionUtil(SHAPE_TYPES.reference, 'reference'), regionUtil(SHAPE_TYPES.furniture, 'furniture')] as const
 export const examCanvasTools = [BoundaryTool, PartTool, ResponseTool, ContextTool, QuestionNumberTool, MarkAreaTool, ReferenceTool, FurnitureTool] as const
 
+export function isPdfPageShape(type: string): boolean {
+  return type === PDF_PAGE_SHAPE_TYPE
+}
+
 export function shapeTypeToKind(type: string): ExamCanvasShapeKind | null {
   const entry = Object.entries(SHAPE_TYPES).find(([, v]) => v === type)
   return (entry?.[0] as ExamCanvasShapeKind | undefined) ?? null

src/pages/exam/setup/pdfLoader.ts

@@ -0,0 +1,39 @@
+import * as pdfjsLib from "pdfjs-dist"
+import pdfWorkerSrc from "pdfjs-dist/build/pdf.worker.mjs?url"
+
+import { PAGE_WIDTH } from "../../../utils/exam-canvas/model"
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorkerSrc
+
+export interface PdfPageImage {
+  pageNumber: number
+  src: string
+  width: number
+  height: number
+}
+
+export async function loadPdfPageImages(pdfBytes: ArrayBuffer, targetWidth = PAGE_WIDTH): Promise<PdfPageImage[]> {
+  const pdf = await pdfjsLib.getDocument({ data: new Uint8Array(pdfBytes) }).promise
+  const pages: PdfPageImage[] = []
+
+  for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber += 1) {
+    const page = await pdf.getPage(pageNumber)
+    const baseViewport = page.getViewport({ scale: 1 })
+    const scale = targetWidth / baseViewport.width
+    const viewport = page.getViewport({ scale })
+    const canvas = document.createElement("canvas")
+    canvas.width = Math.ceil(viewport.width)
+    canvas.height = Math.ceil(viewport.height)
+    const context = canvas.getContext("2d")
+    if (!context) throw new Error("Unable to create PDF render canvas")
+    await page.render({ canvasContext: context, viewport }).promise
+    pages.push({
+      pageNumber,
+      src: canvas.toDataURL("image/png"),
+      width: canvas.width,
+      height: canvas.height,
+    })
+  }
+
+  return pages
+}

src/services/exam/examRepository.ts

@@ -127,6 +127,15 @@ export const examRepository = {
     return res.data;
   },
 
+  async getTemplateSourcePdf(templateId: string): Promise<ArrayBuffer> {
+    const headers = await authHeaders();
+    const res = await axios.get<ArrayBuffer>(`${EXAM_BASE}/templates/${templateId}/source-pdf`, {
+      headers,
+      responseType: 'arraybuffer',
+    });
+    return res.data;
+  },
+
   async createTemplate(payload: CreateTemplatePayload): Promise<ExamTemplate> {
     const headers = await authHeaders();
     const res = await axios.post<ExamTemplate>(`${EXAM_BASE}/templates`, payload, { headers });

src/utils/exam-canvas/model.test.ts

@@ -1,7 +1,6 @@
-
 import { describe, expect, it } from 'vitest'
 import type { ExamTemplateDetail } from '../../types/exam.types'
-import { isUuid, serializeCanvasShapes, shapesFromTemplate } from './model'
+import { isUuid, pageForY, serializeCanvasShapes, shapesFromTemplate } from './model'
 
 const template: ExamTemplateDetail = {
   id: 'tpl-1', title: 'Physics', subject: 'Physics', exam_id: null, exam_code: null, source_file_id: null, page_count: 1,
@@ -30,6 +29,23 @@ describe('exam setup canvas serialization', () => {
     expect(payload.boundaries.every((b) => isUuid(b.id))).toBe(true)
   })
 
+  it('maps shapes to the visible PDF page geometry rather than a fixed page height', () => {
+    const pages = [
+      { pageNumber: 1, x: 260, y: 0, w: 780, h: 1000 },
+      { pageNumber: 2, x: 260, y: 1000, w: 780, h: 1200 },
+    ]
+    expect(pageForY(1050, pages)).toBe(2)
+    const payload = serializeCanvasShapes(template, [
+      { id: 'b-top', kind: 'boundary', x: 260, y: 1020, w: 700, h: 8, label: 'Q1 start' },
+      { id: 'b-bottom', kind: 'boundary', x: 260, y: 1700, w: 700, h: 8, label: 'Q1 end' },
+      { id: 'part-1', kind: 'part', x: 300, y: 1120, w: 300, h: 160, label: 'Q1(a)' },
+      { id: 'resp-1', kind: 'response', x: 320, y: 1160, w: 240, h: 80 },
+    ], pages)
+    expect(payload.questions.find((q) => !q.is_container)?.page).toBe(2)
+    expect(payload.boundaries.every((b) => b.page_index === 1)).toBe(true)
+    expect(payload.response_areas[0].page).toBe(2)
+  })
+
   it('round-trips saved Part geometry and all S4-9 region kinds from API detail', () => {
     const shapes = shapesFromTemplate({
       ...template,

src/utils/exam-canvas/model.ts

@@ -3,6 +3,9 @@ import type { ExamTemplateDetail, TemplateReplacePayload } from '../../types/exa
 
 export const PAGE_HEIGHT = 1100
 export const PAGE_WIDTH = 780
+export const PAGE_GAP = 0
+
+export interface CanvasPageGeometry { pageNumber: number; x: number; y: number; w: number; h: number }
 
 export type ExamCanvasRegionKind = 'response' | 'context' | 'question_number' | 'mark_area' | 'reference' | 'furniture'
 export type ExamCanvasShapeKind = 'boundary' | 'part' | ExamCanvasRegionKind
@@ -25,10 +28,28 @@ export interface ExamCanvasShapeModel {
   questionId?: string | null
 }
 
-export function pageForY(y: number): number {
+export function pageForY(y: number, pages?: CanvasPageGeometry[]): number {
+  if (pages?.length) {
+    const hit = pages.find((page) => y >= page.y && y <= page.y + page.h)
+    if (hit) return hit.pageNumber
+    const nearest = pages.reduce((best, page) => {
+      const dy = Math.min(Math.abs(y - page.y), Math.abs(y - (page.y + page.h)))
+      return dy < best.dy ? { page, dy } : best
+    }, { page: pages[0], dy: Number.POSITIVE_INFINITY })
+    return nearest.page.pageNumber
+  }
   return Math.max(1, Math.floor(y / PAGE_HEIGHT) + 1)
 }
 
+export function pageTop(page: number, pages?: CanvasPageGeometry[]): number {
+  const hit = pages?.find((p) => p.pageNumber === page)
+  return hit?.y ?? ((page - 1) * (PAGE_HEIGHT + PAGE_GAP))
+}
+
+function pageForShape(shape: Pick<ExamCanvasShapeModel, 'y' | 'h'>, pages?: CanvasPageGeometry[]): number {
+  return pageForY(shape.y + shape.h / 2, pages)
+}
+
 export function isUuid(value: string | null | undefined): value is string {
   return typeof value === 'string' && /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value)
 }
@@ -63,10 +84,10 @@ function bandContains(top: ExamCanvasShapeModel, bottom: ExamCanvasShapeModel, s
   return cy >= minY && cy <= maxY
 }
 
-export function serializeCanvasShapes(template: ExamTemplateDetail, shapes: ExamCanvasShapeModel[]): TemplateReplacePayload {
+export function serializeCanvasShapes(template: ExamTemplateDetail, shapes: ExamCanvasShapeModel[], pages?: CanvasPageGeometry[]): TemplateReplacePayload {
   const orderedBoundaries = shapes
     .filter((s) => s.kind === 'boundary')
-    .sort((a, b) => (pageForY(a.y) - pageForY(b.y)) || (a.y - b.y))
+    .sort((a, b) => (pageForShape(a, pages) - pageForShape(b, pages)) || (a.y - b.y))
   const parts = shapes.filter((s) => s.kind === 'part')
   const regions = shapes.filter((s) => s.kind !== 'boundary' && s.kind !== 'part')
 
@@ -84,7 +105,7 @@ export function serializeCanvasShapes(template: ExamTemplateDetail, shapes: Exam
     questions.push({ id: questionId, label, order: qNum - 1, max_marks: 0, is_container: true, mark_scheme: {} })
     bands.push({ questionId, top, bottom })
     for (const b of [top, bottom]) {
-      boundaries.push({ id: isUuid(b.id) ? b.id : newDomainId(), question_id: questionId, label: b === top ? `${label} start` : `${label} end`, page_index: pageForY(b.y) - 1, y: b.y, bounds: bounds(b), source: 'manual', confirmed: true })
+      boundaries.push({ id: isUuid(b.id) ? b.id : newDomainId(), question_id: questionId, label: b === top ? `${label} start` : `${label} end`, page_index: pageForShape(b, pages) - 1, y: b.y, bounds: bounds(b), source: 'manual', confirmed: true })
     }
   }
 
@@ -93,23 +114,23 @@ export function serializeCanvasShapes(template: ExamTemplateDetail, shapes: Exam
     const parentBand = bands.find((band) => bandContains(band.top, band.bottom, part))
     const qid = isUuid(part.questionId) ? part.questionId : isUuid(part.id) ? part.id : newDomainId()
     partQuestionIds.set(part.id, qid)
-    questions.push({ id: qid, parent_id: parentBand?.questionId ?? null, label: part.label || `Part ${index + 1}`, order: index, max_marks: Number(part.maxMarks ?? 0), answer_type: part.answerType ?? 'written', mcq_options: null, mark_scheme: {}, is_container: false, spec_ref: null, bounds: bounds(part), page: pageForY(part.y) })
+    questions.push({ id: qid, parent_id: parentBand?.questionId ?? null, label: part.label || `Part ${index + 1}`, order: index, max_marks: Number(part.maxMarks ?? 0), answer_type: part.answerType ?? 'written', mcq_options: null, mark_scheme: {}, is_container: false, spec_ref: null, bounds: bounds(part), page: pageForShape(part, pages) })
   })
 
   const response_areas: TemplateReplacePayload['response_areas'] = []
   for (const region of regions) {
     const containingPart = parts.find((part) => contains(bounds(part), bounds(region)))
-    const fallbackPart = parts.find((part) => pageForY(part.y) === pageForY(region.y)) ?? parts[0]
+    const fallbackPart = parts.find((part) => pageForShape(part, pages) === pageForShape(region, pages)) ?? parts[0]
     const questionId = containingPart ? partQuestionIds.get(containingPart.id) : fallbackPart ? partQuestionIds.get(fallbackPart.id) : undefined
     if (!questionId) continue
     const kind = region.kind as ExamCanvasRegionKind
-    response_areas.push({ id: isUuid(region.id) ? region.id : newDomainId(), question_id: questionId, page: pageForY(region.y), bounds: bounds(region), kind, response_form: kind === 'response' ? (region.responseForm ?? 'lines') : null, context_type: kind === 'context' ? (region.contextType ?? 'generic') : null, source: 'manual', confirmed: true, confidence: null })
+    response_areas.push({ id: isUuid(region.id) ? region.id : newDomainId(), question_id: questionId, page: pageForShape(region, pages), bounds: bounds(region), kind, response_form: kind === 'response' ? (region.responseForm ?? 'lines') : null, context_type: kind === 'context' ? (region.contextType ?? 'generic') : null, source: 'manual', confirmed: true, confidence: null })
   }
 
   return { meta: { title: template.title, subject: template.subject ?? undefined, page_count: template.page_count ?? undefined, status: template.status }, questions, response_areas, boundaries }
 }
 
-export function shapesFromTemplate(detail: ExamTemplateDetail): ExamCanvasShapeModel[] {
+export function shapesFromTemplate(detail: ExamTemplateDetail, pages?: CanvasPageGeometry[]): ExamCanvasShapeModel[] {
   const shapes: ExamCanvasShapeModel[] = []
   const questions = new Map(detail.questions.map((q) => [q.id, q]))
   for (const b of detail.boundaries ?? []) {
@@ -121,9 +142,9 @@ export function shapesFromTemplate(detail: ExamTemplateDetail): ExamCanvasShapeM
     shapes.push({ id: q.id, kind: 'part', x: Number(q.bounds.x ?? 80), y: Number(q.bounds.y ?? 120), w: Number(q.bounds.w ?? 420), h: Number(q.bounds.h ?? 180), label: q.label, maxMarks: q.max_marks, answerType: q.answer_type ?? 'written', questionId: q.id })
   }
   for (const r of detail.response_areas ?? []) {
-    const bb = r.bounds ?? { x: 100, y: (r.page - 1) * PAGE_HEIGHT + 360, w: 360, h: 120 }
+    const bb = r.bounds ?? { x: 100, y: pageTop(r.page, pages) + 360, w: 360, h: 120 }
     const q = questions.get(r.question_id)
-    shapes.push({ id: r.id, kind: r.kind, x: Number(bb.x ?? 100), y: Number(bb.y ?? (r.page - 1) * PAGE_HEIGHT + 360), w: Number(bb.w ?? 360), h: Number(bb.h ?? 120), label: q ? `→ ${q.label}` : r.kind, responseForm: r.response_form ?? undefined, contextType: r.context_type ?? undefined, questionId: r.question_id })
+    shapes.push({ id: r.id, kind: r.kind, x: Number(bb.x ?? 100), y: Number(bb.y ?? pageTop(r.page, pages) + 360), w: Number(bb.w ?? 360), h: Number(bb.h ?? 120), label: q ? `→ ${q.label}` : r.kind, responseForm: r.response_form ?? undefined, contextType: r.context_type ?? undefined, questionId: r.question_id })
   }
   return shapes
 }