[verified] Add exam template setup canvas

Merge remote-tracking branch 'origin/agent/s4-8-2-template-versioning'
feat(exam): version templates on dashboard
2026-06-07 01:27:44 +01:00 · 2026-06-07 00:12:25 +00:00 · 2026-06-07 00:33:06 +01:00 · 2026-06-06 19:50:23 +00:00 · 2026-06-06 19:47:02 +00:00 · 2026-06-02 23:28:37 +00:00
53 changed files with 3585 additions and 2197 deletions
@@ -47,3 +47,6 @@ docker-compose.override.yml
 # Local environment variants
 .env.dev
 .env.prod
 # Playwright test artifacts
 test-results/
@@ -84,7 +84,6 @@
    "postcss": "^8.4.38",
    "prettier": "^3.2.5",
    "react-refresh": "^0.14.2",
    "tailwindcss": "^3.4.3",
    "typescript": "^5.2.2",
    "vite-plugin-pwa": "^0.21.1",
    "vitest": "^1.6.0"
@@ -1,6 +1,5 @@
 export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-import': {},
  },
@@ -1,5 +1,8 @@
 import { BrowserRouter } from 'react-router-dom';
-import { ThemeProvider } from '@mui/material/styles';
+import { useMemo, useEffect } from 'react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { useTLDraw } from './contexts/TLDrawContext';
 import { theme } from './services/themeService';
 import { AuthProvider } from './contexts/AuthContext';
 import { TLDrawProvider } from './contexts/TLDrawContext';
@@ -8,21 +11,59 @@ import AppRoutes from './AppRoutes';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import React from 'react';
-const App = React.memo(() => (
+/**
 * Syncs tldraw's color scheme to data-color-mode on <html>.
 * Must live inside TLDrawProvider so useTLDraw() reads live preferences.
 * This activates the [data-color-mode="dark"] overrides in cc-design-system.css.
 * tldraw itself uses tl-theme__dark class on .tl-container — we mirror that
 * to the document root so --cc-* token overrides apply globally.
 */
 const DarkModeSync: React.FC = () => {
  const { tldrawPreferences } = useTLDraw();
  const prefersDarkMode =
    typeof window !== 'undefined' &&
    window.matchMedia('(prefers-color-scheme: dark)').matches;
  useEffect(() => {
    const scheme = tldrawPreferences?.colorScheme ?? 'system';
    const isDark = scheme === 'dark' || (scheme === 'system' && prefersDarkMode);
    document.documentElement.setAttribute('data-color-mode', isDark ? 'dark' : 'light');
  }, [tldrawPreferences?.colorScheme, prefersDarkMode]);
  return null;
 };
 const App = React.memo(() => {
  const prefersDarkMode =
    typeof window !== 'undefined' &&
    window.matchMedia('(prefers-color-scheme: dark)').matches;
  const appTheme = useMemo(() => {
    // App is outside TLDrawProvider so tldrawPreferences is always null here.
    // Theme defaults to OS preference; DarkModeSync (inside TLDrawProvider) handles
    // updating data-color-mode once tldraw preferences are loaded.
    const mode = prefersDarkMode ? 'dark' : 'light';
    return createTheme({ palette: { mode } });
  }, [prefersDarkMode]);
  return (
    <ErrorBoundary>
      <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
      <ThemeProvider theme={theme}>
        <AuthProvider>
          <UserProvider>
            <TLDrawProvider>
              <DarkModeSync />
              <ThemeProvider theme={appTheme}>
                <CssBaseline />
                <AppRoutes />
              </ThemeProvider>
            </TLDrawProvider>
          </UserProvider>
        </AuthProvider>
      </ThemeProvider>
      </BrowserRouter>
    </ErrorBoundary>
-));
+  );
 });
 App.displayName = import.meta.env.VITE_APP_NAME;
@@ -31,7 +31,7 @@ vi.mock('./pages/NotFoundPublic', () => ({ default: () => <div>Public Not Found<
 vi.mock('./pages/tldraw/TLDrawCanvas', () => ({ default: () => <div>Public Home</div> }));
 vi.mock('./pages/tldraw/singlePlayerPage', () => ({ default: () => <div>Single Player</div> }));
 vi.mock('./pages/tldraw/multiplayerUser', () => ({ default: () => <div>Multiplayer</div> }));
-vi.mock('./pages/tldraw/CCExamMarker/CCExamMarker', () => ({ CCExamMarker: () => <div>Exam Marker</div> }));
+vi.mock('./pages/exam', () => ({ ExamDashboardPage: () => <div>Exam Marker</div> }));
 vi.mock('./pages/user/calendarPage', () => ({ default: () => <div>Calendar</div> }));
 vi.mock('./pages/user/settingsPage', () => ({ default: () => <div>Settings</div> }));
 vi.mock('./pages/tldraw/devPlayerPage', () => ({ default: () => <div>TLDraw Dev</div> }));
@@ -46,6 +46,7 @@ vi.mock('./pages/tldraw/CCDocumentIntelligence/CCDocumentIntelligence', () => ({
 }));
 vi.mock('./pages/timetable', () => ({
  TimetablePage: () => <div>Timetable</div>,
  TimetableListPage: () => <div>Timetable List</div>,
  ClassesPage: () => <div>Classes</div>,
  LessonPage: () => <div>Lesson</div>,
  TaughtLessonsPage: () => <div>Taught Lessons</div>,
@@ -7,7 +7,8 @@ import LoginPage from './pages/auth/loginPage';
 import SignupPage from './pages/auth/signupPage';
 import SinglePlayerPage from './pages/tldraw/singlePlayerPage';
 import MultiplayerUser from './pages/tldraw/multiplayerUser';
-import { CCExamMarker } from './pages/tldraw/CCExamMarker/CCExamMarker';
+import { ExamDashboardPage, ExamTemplateSetupPage } from './pages/exam';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import CalendarPage from './pages/user/calendarPage';
 import SettingsPage from './pages/user/settingsPage';
 import TLDrawCanvas from './pages/tldraw/TLDrawCanvas';
@@ -30,6 +31,7 @@ import DashboardPage from './pages/user/dashboardPage';
 // Timetable Module Pages
 import {
  TimetablePage,
  TimetableListPage,
  ClassesPage,
  LessonPage,
  TaughtLessonsPage,
@@ -45,8 +47,6 @@ import {
 } from './pages/timetable';
 const FullContextRoutes: React.FC = () => {
  // Only block on Supabase profile being ready — Neo4j contexts initialize in the background.
  // Individual pages handle their own Neo4j loading states.
  const { isInitialized: isUserInitialized } = useUser();
  if (!isUserInitialized) {
@@ -68,6 +68,31 @@ const FullContextRoutes: React.FC = () => {
  return <Outlet />;
 };
 const RequireAuth: React.FC = () => {
  const { user, isAuthResolving } = useAuth();
  if (isAuthResolving) {
    return (
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '100vh'
        }}
      >
        <CircularProgress />
      </div>
    );
  }
  if (!user) {
    return <Navigate to="/login" replace />;
  }
  return <Outlet />;
 };
 const AppRoutes: React.FC = () => {
  const { user, user_role, loading: isAuthLoading } = useAuth();
  const location = useLocation();
@@ -136,10 +161,11 @@ const AppRoutes: React.FC = () => {
        />
        {/* Authentication only routes - only render if all contexts are initialized */}
-        {user && (
+        <Route element={<RequireAuth />}>
          <Route element={<FullContextRoutes />}>
            {/* Timetable Module Routes */}
-            <Route path="/timetable" element={<TimetablePage />} />
+            <Route path="/timetable" element={<TimetableListPage />} />
            <Route path="/timetable/:timetableId" element={<TimetablePage />} />
            <Route path="/classes" element={<ClassesPage />} />
            <Route path="/my-classes" element={<MyClassesPage />} />
            <Route path="/classes/:classId" element={<ClassDetailPage />} />
@@ -156,7 +182,8 @@ const AppRoutes: React.FC = () => {
            {/* Existing Routes */}
            <Route path="/search" element={<SearxngPage />} />
            <Route path="/teacher-planner" element={<TeacherPlanner />} />
-            <Route path="/exam-marker" element={<CCExamMarker />} />
+            <Route path="/exam-marker" element={<ErrorBoundary><ExamDashboardPage /></ErrorBoundary>} />
            <Route path="/exam-marker/:templateId/setup" element={<ErrorBoundary><ExamTemplateSetupPage /></ErrorBoundary>} />
            <Route path="/doc-intelligence/:fileId" element={<CCDocumentIntelligence />} />
            <Route path="/morphic" element={<MorphicPage />} />
            <Route path="/tldraw-dev" element={<TLDrawDevPage />} />
@@ -167,7 +194,7 @@ const AppRoutes: React.FC = () => {
            <Route path="/calendar" element={<CalendarPage />} />
            <Route path="/settings" element={<SettingsPage />} />
          </Route>
-        )}
+        </Route>
        {/* Fallback route - authenticated users go to dashboard, unauthenticated see public 404 */}
        <Route path="*" element={user ? <Navigate to="/dashboard" replace /> : <NotFoundPublic />} />
@@ -18,6 +18,7 @@ export interface AuthContextType {
  signOut: () => Promise<void>;
  clearError: () => void;
  bootstrapData: BootstrapResponse | null;
  isAuthResolving: boolean;
 }
 export const AuthContext = createContext<AuthContextType>({
@@ -29,7 +30,8 @@ export const AuthContext = createContext<AuthContextType>({
  signIn: async () => {},
  signOut: async () => {},
  clearError: () => {},
-  bootstrapData: null
+  bootstrapData: null,
  isAuthResolving: false
 });
 export function AuthProvider({ children }: { children: React.ReactNode }) {
@@ -40,6 +42,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);
  const [bootstrapData, setBootstrapData] = useState<BootstrapResponse | null>(null);
  const [isAuthResolving, setIsAuthResolving] = useState(false);
  const persistSession = useCallback((session: Session | null) => {
@@ -92,6 +95,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
        if (event === 'SIGNED_IN') {
          persistSession(session ?? null);
          setIsAuthResolving(!!session?.user);
          if (session?.user) {
            try {
              const { user: resolvedUser, role } = await buildUserFromSupabase(session.user);
@@ -112,11 +116,13 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
            setAccessToken(null);
          }
          setLoading(false);
          setIsAuthResolving(false);
          return;
        }
        if (event === 'INITIAL_SESSION' || event === 'TOKEN_REFRESHED') {
          persistSession(session ?? null);
          setIsAuthResolving(!!session?.user);
          if (session?.user) {
            try {
              const { user: resolvedUser, role } = await buildUserFromSupabase(session.user);
@@ -137,11 +143,13 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
            setAccessToken(null);
          }
          setLoading(false);
          setIsAuthResolving(false);
          return;
        }
        if (event === 'SIGNED_OUT') {
          persistSession(null);
          setIsAuthResolving(false);
          setUser(null);
          setUserRole(null);
          setAccessToken(null);
@@ -214,7 +222,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
        signIn,
        signOut,
        clearError,
-        bootstrapData
+        bootstrapData,
        isAuthResolving
      }}
    >
      {children}
@@ -23,6 +23,7 @@ export type LogCategory =
  | 'neo-institute-context'
  | 'auth-service'
  | 'graph-service'
  | 'graph-sidebar'
  | 'registration-service'
  | 'provisioning-service'
  | 'snapshot-service'
@@ -111,6 +112,7 @@ export type LogCategory =
  | 'user-context'
  | 'neo-user-context'
  | 'neo-institute-context'
  | 'cc-live-transcription'
  | 'search-service';
 interface LogConfig {
@@ -1,7 +1,6 @@
 /* src/index.css */
-@tailwind base;
+/* Tailwind removed — utility classes provided by tailwind-compat.css shim */
-@tailwind components;
+@import './tailwind-compat.css';
@tailwind utilities;
 /* Base styles */
 html,
@@ -152,10 +151,10 @@ body {
 .login-role-header {
  font-weight: 600 !important;
-  color: #1976d2 !important;
+  color: var(--cc-action-primary) !important;
  margin-bottom: 24px !important;
  padding-bottom: 8px !important;
-  border-bottom: 2px solid #1976d2 !important;
+  border-bottom: 2px solid var(--cc-action-primary) !important;
  width: fit-content !important;
 }
@@ -6,34 +6,50 @@ import { EmailLoginForm } from './EmailLoginForm';
 import { EmailCredentials } from '../../services/auth/authService';
 import { logger } from '../../debugConfig';
 const getLoginErrorMessage = (error: unknown): string => {
  const status = (error as { status?: number } | null)?.status;
  const code = (error as { code?: string } | null)?.code;
  if (code === 'email_not_confirmed' || status === 401 && code === 'invalid_grant') {
    return 'Please confirm your email before logging in';
  }
  if (status === 401 || code === 'invalid_grant') {
    return 'Invalid email or password';
  }
  return error instanceof Error ? error.message : 'Login failed';
 };
 const LoginPage: React.FC = () => {
  const navigate = useNavigate();
-  const { user, signIn } = useAuth();
+  const { user, signIn, isAuthResolving } = useAuth();
  const [error, setError] = useState<string | null>(null);
  logger.debug('login-page', '🔍 Login page loaded', { 
-    hasUser: !!user
+    hasUser: !!user,
    isAuthResolving
  });
  useEffect(() => {
-    if (user) {
+    if (!isAuthResolving && user) {
      navigate('/dashboard');
    }
-  }, [user, navigate]);
+  }, [user, isAuthResolving, navigate]);
  const handleLogin = async (credentials: EmailCredentials) => {
    try {
      setError(null);
      await signIn(credentials.email, credentials.password);
      navigate('/dashboard');
    } catch (error) {
      logger.error('login-page', '❌ Login failed', error);
-      setError(error instanceof Error ? error.message : 'Login failed');
+      const message = getLoginErrorMessage(error);
      setError(message);
      throw error;
    }
  };
-  if (user) {
+  if (user && !isAuthResolving) {
    return null;
  }
@@ -31,6 +31,7 @@ import {
 } from '@mui/material';
 import {
  CloudUpload as UploadIcon,
  Upload,
  Folder as FolderIcon,
  FolderOpen as FolderOpenIcon,
  Description as FileIcon,
@@ -39,8 +40,12 @@ import {
  PlayArrow as ProcessIcon,
  CheckCircle as SuccessIcon,
  Error as ErrorIcon,
-  Info as InfoIcon
+  Info as InfoIcon,
  InsertDriveFile,
 } from '@mui/icons-material';
 const FolderOpen = FolderOpenIcon;
 const Refresh = RefreshIcon;
 const Info = InfoIcon;
 import { supabase } from '../../supabaseClient';
 import {
  pickDirectory,
@@ -0,0 +1,374 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
  Alert,
  Box,
  Button,
  Chip,
  CircularProgress,
  Container,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Grid,
  IconButton,
  Paper,
  Stack,
  TextField,
  Tooltip,
  Typography,
 } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import ArchiveIcon from '@mui/icons-material/Archive';
 import AssignmentIcon from '@mui/icons-material/Assignment';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import EditIcon from '@mui/icons-material/Edit';
 import { useAuth } from '../../contexts/AuthContext';
 import { examRepository } from '../../services/exam/examRepository';
 import type { ExamTemplate } from '../../types/exam.types';
 import { logger } from '../../debugConfig';
 const STATUS_COLOR: Record<string, 'default' | 'info' | 'success' | 'warning'> = {
  draft: 'warning',
  ready: 'success',
  archived: 'default',
 };
 const VERSION_SEPARATOR = ' · ';
 const VERSION_RE = /(?:^|\s)[vV](\d+(?:\.\d+)*)$/;
 type DialogMode = 'create' | 'edit' | 'duplicate';
 type TemplateDialogState = {
  mode: DialogMode;
  template?: ExamTemplate;
 } | null;
 function splitTemplateTitle(title: string): { name: string; version: string } {
  const parts = title.split(VERSION_SEPARATOR);
  const possibleVersion = parts[parts.length - 1]?.trim() ?? '';
  if (parts.length > 1 && VERSION_RE.test(possibleVersion)) {
    return { name: parts.slice(0, -1).join(VERSION_SEPARATOR).trim(), version: possibleVersion };
  }
  return { name: title, version: 'v1' };
 }
 function composeTemplateTitle(name: string, version: string): string {
  const cleanName = name.trim();
  const cleanVersion = version.trim();
  return cleanVersion ? `${cleanName}${VERSION_SEPARATOR}${cleanVersion}` : cleanName;
 }
 function nextVersionLabel(version: string): string {
  const match = version.trim().match(VERSION_RE);
  if (!match) return 'v2';
  const segments = match[1].split('.');
  const last = Number(segments[segments.length - 1]);
  segments[segments.length - 1] = Number.isFinite(last) ? String(last + 1) : '2';
  return `v${segments.join('.')}`;
 }
 function paperKey(t: ExamTemplate): string {
  return t.exam_id ?? t.source_file_id ?? t.exam_code ?? t.subject ?? 'custom-paper';
 }
 function paperLabel(t: ExamTemplate): string {
  if (t.exam_code) return t.exam_code;
  if (t.subject) return t.subject;
  if (t.source_file_id) return 'Uploaded paper';
  return 'Custom paper';
 }
 const ExamDashboardPage: React.FC = () => {
  const navigate = useNavigate();
  const { bootstrapData } = useAuth();
  const instituteId = bootstrapData?.active_institute?.id ?? undefined;
  const [templates, setTemplates] = useState<ExamTemplate[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [dialog, setDialog] = useState<TemplateDialogState>(null);
  const [templateName, setTemplateName] = useState('');
  const [version, setVersion] = useState('v1');
  const [subject, setSubject] = useState('');
  const [saving, setSaving] = useState(false);
  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      setTemplates(await examRepository.listTemplates());
    } catch (e) {
      const msg = e instanceof Error ? e.message : String(e);
      logger.warn('cc-exam-marker', 'Failed to load templates', { message: msg });
      setError(msg);
    } finally {
      setLoading(false);
    }
  }, []);
  useEffect(() => {
    void load();
  }, [load, instituteId]);
  const groupedTemplates = useMemo(() => {
    const groups = new Map<string, { label: string; templates: ExamTemplate[] }>();
    templates.forEach((template) => {
      const key = paperKey(template);
      const existing = groups.get(key);
      if (existing) {
        existing.templates.push(template);
      } else {
        groups.set(key, { label: paperLabel(template), templates: [template] });
      }
    });
    return Array.from(groups.entries()).map(([key, group]) => ({ key, ...group }));
  }, [templates]);
  const openCreate = () => {
    setTemplateName('New template');
    setVersion('v1');
    setSubject('');
    setDialog({ mode: 'create' });
  };
  const openEdit = (template: ExamTemplate, ev: React.MouseEvent) => {
    ev.stopPropagation();
    const parsed = splitTemplateTitle(template.title);
    setTemplateName(parsed.name);
    setVersion(parsed.version);
    setSubject(template.subject ?? '');
    setDialog({ mode: 'edit', template });
  };
  const openDuplicate = (template: ExamTemplate, ev: React.MouseEvent) => {
    ev.stopPropagation();
    const parsed = splitTemplateTitle(template.title);
    setTemplateName(parsed.name);
    setVersion(nextVersionLabel(parsed.version));
    setSubject(template.subject ?? '');
    setDialog({ mode: 'duplicate', template });
  };
  const closeDialog = () => {
    if (!saving) setDialog(null);
  };
  const handleSaveDialog = async () => {
    if (!dialog || !templateName.trim()) return;
    const title = composeTemplateTitle(templateName, version);
    setSaving(true);
    try {
      if (dialog.mode === 'create') {
        const created = await examRepository.createTemplate({
          title,
          subject: subject.trim() || undefined,
          institute_id: instituteId,
        });
        setDialog(null);
        navigate(`/exam-marker/${created.id}/setup`);
        return;
      }
      if (!dialog.template) return;
      if (dialog.mode === 'duplicate') {
        const created = await examRepository.duplicateTemplate(dialog.template.id, title);
        setTemplates((prev) => [created, ...prev]);
        setDialog(null);
        navigate(`/exam-marker/${created.id}/setup`);
        return;
      }
      const updated = await examRepository.updateTemplateMeta(dialog.template.id, {
        title,
        subject: subject.trim() || null,
      });
      setTemplates((prev) => prev.map((t) => (t.id === updated.id ? updated : t)));
      setDialog(null);
    } catch (e) {
      const msg = e instanceof Error ? e.message : String(e);
      logger.error('cc-exam-marker', 'Template action failed', { message: msg, mode: dialog.mode });
      setError(msg);
    } finally {
      setSaving(false);
    }
  };
  const handleArchive = async (template: ExamTemplate, ev: React.MouseEvent) => {
    ev.stopPropagation();
    const parsed = splitTemplateTitle(template.title);
    if (!window.confirm(`Archive ${parsed.name} ${parsed.version}? This hides it from the dashboard but keeps the work recoverable.`)) {
      return;
    }
    try {
      await examRepository.archiveTemplate(template.id);
      setTemplates((prev) => prev.filter((t) => t.id !== template.id));
    } catch (e) {
      const msg = e instanceof Error ? e.message : String(e);
      logger.error('cc-exam-marker', 'Archive failed', { message: msg });
      setError(msg);
    }
  };
  const dialogTitle = dialog?.mode === 'edit'
    ? 'Rename template / edit version'
    : dialog?.mode === 'duplicate'
      ? 'Duplicate as new version'
      : 'New exam template';
  return (
    <Container maxWidth="lg" sx={{ py: 6 }}>
      <Stack spacing={4}>
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 2 }}>
          <Box>
            <Typography variant="h3" component="h1" gutterBottom>
              Exam Marker
            </Typography>
            <Typography variant="body1" color="text.secondary" sx={{ maxWidth: 620 }}>
              Build multiple named templates for the same paper, version them as your setup changes, and archive drafts you no longer need.
            </Typography>
          </Box>
          <Button variant="contained" startIcon={<AddIcon />} onClick={openCreate}>
            New template
          </Button>
        </Box>
        {error && (
          <Alert severity="error" onClose={() => setError(null)}>
            {error}
          </Alert>
        )}
        {loading ? (
          <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
            <CircularProgress />
          </Box>
        ) : templates.length === 0 ? (
          <Paper variant="outlined" sx={{ p: 6, textAlign: 'center' }}>
            <AssignmentIcon sx={{ fontSize: 48, color: 'text.disabled', mb: 1 }} />
            <Typography variant="h6" gutterBottom>No exam templates yet</Typography>
            <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
              Create your first named template to start mapping an exam paper.
            </Typography>
            <Button variant="outlined" startIcon={<AddIcon />} onClick={openCreate}>
              New template
            </Button>
          </Paper>
        ) : (
          <Stack spacing={3}>
            {groupedTemplates.map((group) => (
              <Box key={group.key}>
                <Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 1 }}>
                  <Typography variant="h6">{group.label}</Typography>
                  <Chip size="small" label={`${group.templates.length} template${group.templates.length === 1 ? '' : 's'}`} variant="outlined" />
                </Stack>
                <Grid container spacing={3}>
                  {group.templates.map((t) => {
                    const parsed = splitTemplateTitle(t.title);
                    return (
                      <Grid item xs={12} sm={6} md={4} key={t.id}>
                        <Paper
                          elevation={2}
                          sx={{
                            p: 3,
                            height: '100%',
                            cursor: 'pointer',
                            display: 'flex',
                            flexDirection: 'column',
                            gap: 1,
                            transition: 'box-shadow 120ms',
                            '&:hover': { boxShadow: 6 },
                          }}
                          onClick={() => navigate(`/exam-marker/${t.id}/setup`)}
                        >
                          <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1 }}>
                            <Box sx={{ minWidth: 0 }}>
                              <Typography variant="h6" sx={{ pr: 1 }}>{parsed.name}</Typography>
                              <Chip size="small" label={parsed.version} color="info" variant="outlined" sx={{ mt: 0.5 }} />
                            </Box>
                            <Stack direction="row" spacing={0.5}>
                              <Tooltip title="Rename / edit version">
                                <IconButton size="small" onClick={(e) => openEdit(t, e)} aria-label="rename template">
                                  <EditIcon fontSize="small" />
                                </IconButton>
                              </Tooltip>
                              <Tooltip title="Duplicate as new version">
                                <IconButton size="small" onClick={(e) => openDuplicate(t, e)} aria-label="duplicate template">
                                  <ContentCopyIcon fontSize="small" />
                                </IconButton>
                              </Tooltip>
                              <Tooltip title="Archive">
                                <IconButton size="small" onClick={(e) => handleArchive(t, e)} aria-label="archive template">
                                  <ArchiveIcon fontSize="small" />
                                </IconButton>
                              </Tooltip>
                            </Stack>
                          </Box>
                          {t.subject && (
                            <Typography variant="body2" color="text.secondary">{t.subject}</Typography>
                          )}
                          {t.exam_code && (
                            <Typography variant="caption" color="text.secondary">{t.exam_code}</Typography>
                          )}
                          <Box sx={{ mt: 'auto', pt: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                            <Chip size="small" label={t.status} color={STATUS_COLOR[t.status] ?? 'default'} variant="outlined" />
                            <Typography variant="caption" color="text.secondary">
                              Updated {new Date(t.updated_at).toLocaleDateString()}
                            </Typography>
                          </Box>
                        </Paper>
                      </Grid>
                    );
                  })}
                </Grid>
              </Box>
            ))}
          </Stack>
        )}
      </Stack>
      <Dialog open={Boolean(dialog)} onClose={closeDialog} fullWidth maxWidth="sm">
        <DialogTitle>{dialogTitle}</DialogTitle>
        <DialogContent>
          <Stack spacing={2} sx={{ mt: 1 }}>
            <TextField
              label="Template name"
              value={templateName}
              onChange={(e) => setTemplateName(e.target.value)}
              fullWidth
              autoFocus
              required
              helperText="User-facing name. Several templates can share the same paper."
            />
            <TextField
              label="Version"
              value={version}
              onChange={(e) => setVersion(e.target.value)}
              fullWidth
              helperText="Stored in the template title until the API grows a dedicated version column."
            />
            <TextField
              label="Paper / subject label"
              value={subject}
              onChange={(e) => setSubject(e.target.value)}
              fullWidth
              disabled={dialog?.mode === 'duplicate'}
            />
          </Stack>
        </DialogContent>
        <DialogActions>
          <Button onClick={closeDialog} disabled={saving}>Cancel</Button>
          <Button variant="contained" onClick={handleSaveDialog} disabled={saving || !templateName.trim()}>
            {saving ? 'Saving…' : dialog?.mode === 'duplicate' ? 'Create version' : 'Save'}
          </Button>
        </DialogActions>
      </Dialog>
    </Container>
  );
 };
 export default ExamDashboardPage;
@@ -0,0 +1,2 @@
 export { default as ExamDashboardPage } from './ExamDashboardPage';
 export { default as ExamTemplateSetupPage } from './setup/ExamTemplateSetupPage';
@@ -0,0 +1,230 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { Alert, Box, Button, Chip, CircularProgress, Divider, Paper, Snackbar, Stack, Tooltip, Typography, useTheme } from '@mui/material'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import SaveIcon from '@mui/icons-material/Save'
 import MouseIcon from '@mui/icons-material/Mouse'
 import '@tldraw/tldraw/tldraw.css'
 import { Editor, Tldraw, createShapeId, defaultBindingUtils, 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'
 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 },
 ]
 function apiMessage(err: unknown): { message: string; conflict: boolean } {
  if (axios.isAxiosError(err)) {
    const detail = (err.response?.data as { detail?: string } | undefined)?.detail
    if (err.response?.status === 409) return { conflict: true, message: detail ?? 'Template has recorded marks; structural full-replace is blocked.' }
    return { conflict: false, message: detail ?? err.message }
  }
  return { conflict: false, message: err instanceof Error ? err.message : String(err) }
 }
 function stripShapePrefix(id: string) {
  return id.startsWith('shape:') ? id.slice('shape:'.length) : id
 }
 function domainIdForShape(shape: ExamCanvasTLShape): string {
  const fromProps = shape.props.domainId
  if (isUuid(fromProps)) return fromProps
  const fromShapeId = stripShapePrefix(shape.id)
  return isUuid(fromShapeId) ? fromShapeId : newDomainId()
 }
 function ensureDomainIds(editor: Editor) {
  const updates = editor.getCurrentPageShapes()
    .filter((shape): shape is ExamCanvasTLShape => !!shapeTypeToKind(shape.type))
    .filter((shape) => !isUuid(shape.props.domainId))
    .map((shape) => ({ id: shape.id, type: shape.type, props: { domainId: domainIdForShape(shape) } }))
  if (updates.length) editor.updateShapes(updates)
 }
 function modelFromTLShape(shape: TLShape): ExamCanvasShapeModel | null {
  const kind = shapeTypeToKind(shape.type)
  if (!kind) return null
  const s = shape as ExamCanvasTLShape
  return {
    id: domainIdForShape(s),
    kind,
    x: Number(s.x ?? 0),
    y: Number(s.y ?? 0),
    w: Number(s.props.w ?? 1),
    h: Number(s.props.h ?? 1),
    label: s.props.label,
    maxMarks: s.props.maxMarks,
    responseForm: s.props.responseForm as ExamCanvasShapeModel['responseForm'],
    contextType: s.props.contextType,
    questionId: s.props.questionId ?? null,
  }
 }
 function loadShapes(editor: Editor, models: ExamCanvasShapeModel[]) {
  const existing = editor.getCurrentPageShapes().filter((s) => shapeTypeToKind(s.type)).map((s) => s.id)
  if (existing.length) editor.deleteShapes(existing)
  if (!models.length) return
  editor.createShapes(models.map((m) => ({
    id: createShapeId(m.id),
    type: SHAPE_TYPES[m.kind],
    x: m.x,
    y: m.y,
    props: { w: m.w, h: m.h, label: m.label ?? m.kind, kind: m.kind, maxMarks: m.maxMarks, responseForm: m.responseForm, contextType: m.contextType, questionId: m.questionId, domainId: m.id },
  })))
 }
 function seedGuide(editor: Editor) {
  const current = editor.getCurrentPageShapes().filter((s) => shapeTypeToKind(s.type))
  if (current.length) return
  editor.createShapes([
    { id: createShapeId(newDomainId()), type: SHAPE_TYPES.boundary, x: 48, y: 120, props: { w: PAGE_WIDTH - 96, h: 8, kind: 'boundary', label: 'Q1 start', domainId: newDomainId() } },
    { id: createShapeId(newDomainId()), type: SHAPE_TYPES.boundary, x: 48, y: 520, props: { w: PAGE_WIDTH - 96, h: 8, kind: 'boundary', label: 'Q1 end', domainId: newDomainId() } },
    { id: createShapeId(newDomainId()), type: SHAPE_TYPES.part, x: 92, y: 180, props: { w: 520, h: 150, kind: 'part', label: 'Q1(a)', maxMarks: 3, domainId: newDomainId() } },
    { id: createShapeId(newDomainId()), type: SHAPE_TYPES.response, x: 116, y: 355, props: { w: 470, h: 120, kind: 'response', label: 'Response', responseForm: 'lines', domainId: newDomainId() } },
  ])
 }
 const ExamTemplateSetupInner: React.FC = () => {
  const { templateId } = useParams<{ templateId: string }>()
  const navigate = useNavigate()
  const theme = useTheme()
  const editorRef = useRef<Editor | null>(null)
  const [template, setTemplate] = useState<ExamTemplateDetail | null>(null)
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [dirty, setDirty] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [conflict, setConflict] = useState<string | null>(null)
  const [activeTool, setActiveTool] = useState('select')
  const load = useCallback(async () => {
    if (!templateId) return
    setLoading(true); setError(null); setConflict(null)
    try {
      const detail = await examRepository.getTemplate(templateId)
      setTemplate(detail)
      const editor = editorRef.current
      if (editor) loadShapes(editor, shapesFromTemplate(detail))
      setDirty(false)
    } catch (e) {
      const msg = apiMessage(e).message
      logger.warn('cc-exam-marker', 'Template setup load failed', { templateId, message: msg })
      setError(msg)
    } finally {
      setLoading(false)
    }
  }, [templateId])
  useEffect(() => { void load() }, [load])
  const save = useCallback(async () => {
    const editor = editorRef.current
    if (!editor || !templateId || !template) return
    setSaving(true); setError(null); setConflict(null)
    try {
      ensureDomainIds(editor)
      const shapes = editor.getCurrentPageShapes().map(modelFromTLShape).filter(Boolean) as ExamCanvasShapeModel[]
      const payload = serializeCanvasShapes(template, shapes)
      const saved = await examRepository.replaceTemplate(templateId, payload)
      setTemplate(saved)
      loadShapes(editor, shapesFromTemplate(saved))
      setDirty(false)
    } catch (e) {
      const msg = apiMessage(e)
      if (msg.conflict) setConflict(msg.message); else setError(msg.message)
      logger.warn('cc-exam-marker', 'Template setup save failed', { templateId, message: msg.message })
    } finally {
      setSaving(false)
    }
  }, [template, templateId])
  const toolButtons = useMemo(() => TOOLS.map((tool) => (
    <Tooltip title={tool.tip} key={tool.id} placement="right">
      <Button
        size="small"
        variant={activeTool === tool.id ? 'contained' : 'outlined'}
        color={tool.color}
        startIcon={tool.id === 'select' ? <MouseIcon fontSize="small" /> : undefined}
        onClick={() => {
          const editor = editorRef.current
          if (!editor) return
          editor.setCurrentTool(tool.id === 'select' ? 'select' : tool.id)
          setActiveTool(tool.id)
        }}
        sx={{ justifyContent: 'flex-start', minWidth: 126 }}
      >
        {tool.label}
      </Button>
    </Tooltip>
  )), [activeTool])
  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">
        <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)
          }}
        />
      </Box>
      <Paper elevation={8} sx={{ position: 'absolute', top: 12, left: 12, right: 12, px: 2, py: 1.25, display: 'flex', alignItems: 'center', gap: 1.5, borderRadius: 3, bgcolor: 'background.paper' }}>
        <Button startIcon={<ArrowBackIcon />} onClick={() => navigate('/exam-marker')} size="small">Back</Button>
        <Divider orientation="vertical" flexItem />
        <Box sx={{ minWidth: 0, flex: 1 }}>
          <Typography variant="subtitle1" noWrap>{template?.title ?? 'Template setup'}</Typography>
          <Typography variant="caption" color="text.secondary">Exam Marker › Setup · draw boundaries, part boxes, and regions; Save persists a full replace.</Typography>
        </Box>
        <Chip size="small" color={dirty ? 'warning' : 'success'} label={dirty ? 'Unsaved' : 'Saved'} />
        <Button variant="contained" startIcon={saving ? <CircularProgress size={16} color="inherit" /> : <SaveIcon />} onClick={save} disabled={saving || loading || !template}>Save</Button>
      </Paper>
      <Paper elevation={8} sx={{ position: 'absolute', top: 92, left: 12, p: 1.25, borderRadius: 3, bgcolor: 'background.paper' }}>
        <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' }}>
        <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.
        </Typography>
      </Paper>
      {loading && <Box sx={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', bgcolor: 'rgba(15,23,42,.18)' }}><CircularProgress /></Box>}
      {conflict && <Alert severity="warning" sx={{ position: 'absolute', top: 86, right: 16, maxWidth: 560 }} onClose={() => setConflict(null)}>{conflict}</Alert>}
      <Snackbar open={!!error} autoHideDuration={8000} onClose={() => setError(null)}><Alert severity="error" onClose={() => setError(null)}>{error}</Alert></Snackbar>
    </Box>
  )
 }
 const ExamTemplateSetupPage: React.FC = () => (
  <ErrorBoundary fallback={<Box sx={{ p: 4 }}><Alert severity="error">Template setup canvas crashed. Reload the page and try again.</Alert></Box>}>
    <ExamTemplateSetupInner />
  </ErrorBoundary>
 )
 export default ExamTemplateSetupPage
@@ -0,0 +1,89 @@
 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 SHAPE_TYPES = {
  boundary: 'exam-boundary',
  part: 'exam-part',
  response: 'exam-region-response',
  context: 'exam-region-context',
  question_number: 'exam-region-question-number',
  mark_area: 'exam-region-mark-area',
  reference: 'exam-region-reference',
  furniture: 'exam-region-furniture',
 } as const
 export type ExamCanvasTLShape = TLBaseBoxShape & {
  type: typeof SHAPE_TYPES[keyof typeof SHAPE_TYPES]
  props: {
    w: number
    h: number
    label: string
    kind: ExamCanvasShapeKind
    maxMarks?: number
    responseForm?: string
    contextType?: string
    questionId?: string | null
    domainId?: string
  }
 }
 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' },
 }
 function renderShape(shape: ExamCanvasTLShape) {
  const kind = shape.props.kind
  const p = palette[kind] ?? palette.response
  const isBoundary = kind === 'boundary'
  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}
        </span>
        {!isBoundary && shape.props.questionId && <span style={{ fontSize: 11, fontWeight: 700, opacity: .75 }}>Attached</span>}
      </div>
    </HTMLContainer>
  )
 }
 function defaultProps(kind: ExamCanvasShapeKind, w: number, h: number) {
  const p = palette[kind]
  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) } } }
 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 }
 class ResponseTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.response; static override initial = 'pointing'; shapeType = SHAPE_TYPES.response }
 class ContextTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.context; static override initial = 'pointing'; shapeType = SHAPE_TYPES.context }
 class QuestionNumberTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.question_number; static override initial = 'pointing'; shapeType = SHAPE_TYPES.question_number }
 class MarkAreaTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.mark_area; static override initial = 'pointing'; shapeType = SHAPE_TYPES.mark_area }
 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 examCanvasTools = [BoundaryTool, PartTool, ResponseTool, ContextTool, QuestionNumberTool, MarkAreaTool, ReferenceTool, FurnitureTool] as const
 export function shapeTypeToKind(type: string): ExamCanvasShapeKind | null {
  const entry = Object.entries(SHAPE_TYPES).find(([, v]) => v === type)
  return (entry?.[0] as ExamCanvasShapeKind | undefined) ?? null
 }
@@ -3,9 +3,19 @@ import { Link } from 'react-router-dom';
 import { AccessTime, KeyboardArrowRight, MenuBook, People, School } from '@mui/icons-material';
 import useTimetableStore from '../../stores/timetableStore';
 import { useUser } from '../../contexts/UserContext';
 import { useNeoInstitute } from '../../contexts/NeoInstituteContext';
 import { CircularProgress } from '@mui/material';
 import { logger } from '../../debugConfig';
 const MyClassesSkeleton = () => (
  <div className="flex justify-center items-center h-64">
    <CircularProgress />
  </div>
 );
 const MyClassesPage: React.FC = () => {
  const { profile } = useUser();
  const { selectedInstituteId } = useNeoInstitute();
  const {
    myClasses,
    classesLoading: myClassesLoading,
@@ -14,8 +24,16 @@ const MyClassesPage: React.FC = () => {
  } = useTimetableStore();
  useEffect(() => {
-    fetchMyClasses();
+    fetchMyClasses().catch((error) =>
-  }, [fetchMyClasses]);
+      logger.warn('my-classes', 'Fetch my classes failed', {
        message: error instanceof Error ? error.message : String(error),
      })
    );
  }, [fetchMyClasses, selectedInstituteId]);
  if (myClassesLoading) {
    return <MyClassesSkeleton />;
  }
  const getRoleLabel = (role: string) => {
    switch (role) {
@@ -36,14 +54,6 @@ const MyClassesPage: React.FC = () => {
    }
  };
  if (myClassesLoading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    );
  }
  if (myClassesError) {
    return (
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
@@ -0,0 +1,76 @@
 import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { CalendarToday, KeyboardArrowRight } from '@mui/icons-material';
 import useTimetableStore from '../../stores/timetableStore';
 import { format, parseISO } from 'date-fns';
 const TimetableListPage: React.FC = () => {
  const { timetables, timetablesLoading, timetablesError, fetchTimetables } = useTimetableStore();
  useEffect(() => {
    fetchTimetables();
  }, [fetchTimetables]);
  if (timetablesLoading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
      </div>
    );
  }
  // Treat fetch errors (including 404 — endpoint not yet available) as empty state
  const showEmpty = timetablesError || timetables.length === 0;
  return (
    <div className="container mx-auto px-4 py-6 max-w-4xl">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Timetables</h1>
          <p className="mt-1 text-gray-500">Your scheduled timetables</p>
        </div>
      </div>
      {showEmpty ? (
        <div className="text-center py-16">
          <CalendarToday sx={{ fontSize: 48 }} className="mx-auto mb-4 text-gray-300" />
          <h3 className="text-lg font-medium text-gray-900">No timetables yet</h3>
          <p className="mt-2 text-gray-500">
            Timetables are created from a class. Go to{' '}
            <Link to="/classes" className="text-blue-600 hover:underline">Classes</Link>{' '}
            to get started.
          </p>
        </div>
      ) : (
        <div className="space-y-3">
          {timetables.map((timetable) => (
            <Link
              key={timetable.id}
              to={`/timetable/${timetable.id}`}
              className="flex items-center gap-4 p-4 bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition-shadow"
            >
              <CalendarToday className="text-blue-500 flex-shrink-0" />
              <div className="flex-1 min-w-0">
                <h3 className="font-semibold text-gray-900 truncate">{timetable.name}</h3>
                <p className="text-sm text-gray-500">
                  {format(parseISO(timetable.start_date), 'MMM d, yyyy')}
                  {timetable.end_date
                    ? ` – ${format(parseISO(timetable.end_date), 'MMM d, yyyy')}`
                    : ' (ongoing)'}
                </p>
              </div>
              {timetable.recurrence_rule && (
                <span className="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full flex-shrink-0">
                  Recurring
                </span>
              )}
              <KeyboardArrowRight className="text-gray-400 flex-shrink-0" />
            </Link>
          ))}
        </div>
      )}
    </div>
  );
 };
 export default TimetableListPage;
@@ -3,6 +3,7 @@
 */
 export { default as TimetablePage } from './TimetablePage';
 export { default as TimetableListPage } from './TimetableListPage';
 export { default as ClassesPage } from './ClassesPage';
 export { default as LessonPage } from './LessonPage';
 export { default as TaughtLessonsPage } from './TaughtLessonsPage';
@@ -1,92 +0,0 @@
 import { TLShapeId } from '@tldraw/tldraw';
 export interface AnnotationData {
  studentIndex?: number;  // undefined for exam/markscheme annotations
  pageIndex: number;
  shapeId: TLShapeId;
  bounds: {
    x: number;
    y: number;
    width: number;
    height: number;
  };
 }
 export class AnnotationManager {
  private examAnnotations: Set<TLShapeId> = new Set();
  private markSchemeAnnotations: Set<TLShapeId> = new Set();
  private studentAnnotations: Map<number, Set<TLShapeId>> = new Map();
  private annotationData: Map<TLShapeId, AnnotationData> = new Map();
  addAnnotation(shapeId: TLShapeId, data: AnnotationData) {
    this.annotationData.set(shapeId, data);
    if (data.studentIndex !== undefined) {
      // Student response annotation
      let studentSet = this.studentAnnotations.get(data.studentIndex);
      if (!studentSet) {
        studentSet = new Set();
        this.studentAnnotations.set(data.studentIndex, studentSet);
      }
      studentSet.add(shapeId);
    } else {
      // Exam or mark scheme annotation
      if (data.pageIndex < 0) {
        this.examAnnotations.add(shapeId);
      } else {
        this.markSchemeAnnotations.add(shapeId);
      }
    }
  }
  removeAnnotation(shapeId: TLShapeId) {
    const data = this.annotationData.get(shapeId);
    if (!data) return;
    if (data.studentIndex !== undefined) {
      const studentSet = this.studentAnnotations.get(data.studentIndex);
      studentSet?.delete(shapeId);
    } else {
      if (data.pageIndex < 0) {
        this.examAnnotations.delete(shapeId);
      } else {
        this.markSchemeAnnotations.delete(shapeId);
      }
    }
    this.annotationData.delete(shapeId);
  }
  getAnnotationsForStudent(studentIndex: number): TLShapeId[] {
    return Array.from(this.studentAnnotations.get(studentIndex) || []);
  }
  getAnnotationsForExam(): TLShapeId[] {
    return Array.from(this.examAnnotations);
  }
  getAnnotationsForMarkScheme(): TLShapeId[] {
    return Array.from(this.markSchemeAnnotations);
  }
  getAnnotationData(shapeId: TLShapeId): AnnotationData | undefined {
    return this.annotationData.get(shapeId);
  }
  clear() {
    this.examAnnotations.clear();
    this.markSchemeAnnotations.clear();
    this.studentAnnotations.clear();
    this.annotationData.clear();
  }
  // Future transcription support
  addTranscriptionToAnnotation(shapeId: TLShapeId) {
    const data = this.annotationData.get(shapeId);
    if (data) {
      this.annotationData.set(shapeId, {
        ...data
      });
    }
  }
 } 
@@ -1,108 +0,0 @@
 import React, { useState } from 'react';
 import { Box } from '@mui/material';
 import 'tldraw/tldraw.css';
 import { CCPdfEditor } from './CCPdfEditor';
 import { CCPdfPicker } from './CCPdfPicker';
 import { ExamPdfState } from './types';
 import './cc-exam-marker.css';
 import { HEADER_HEIGHT } from '../../Layout';
 import { CCPanel } from '../../../utils/tldraw/ui-overrides/components/CCPanel';
 export const CCExamMarker = () => {
  const [state, setState] = useState<ExamPdfState>({ phase: 'pick' });
  const [view, setView] = useState<'exam-and-markscheme' | 'student-responses'>('exam-and-markscheme');
  const [currentStudentIndex, setCurrentStudentIndex] = useState(0);
  const [isExpanded, setIsExpanded] = useState(false);
  const [isPinned, setIsPinned] = useState(false);
  const handleViewChange = (newView: 'exam-and-markscheme' | 'student-responses') => {
    setView(newView);
  };
  const handleNextStudent = () => {
    if (state.phase === 'edit' && 'studentResponses' in state && 'examPaper' in state) {
      const totalStudents = Math.floor(state.studentResponses.pages.length / state.examPaper.pages.length);
      if (currentStudentIndex < totalStudents - 1) {
        setCurrentStudentIndex(prev => prev + 1);
      }
    }
  };
  const handlePreviousStudent = () => {
    if (currentStudentIndex > 0) {
      setCurrentStudentIndex(prev => prev - 1);
    }
  };
  return (
    <Box sx={{ 
      position: 'fixed',
      inset: 0,
      top: `${HEADER_HEIGHT}px`,
      display: 'flex',
      flexDirection: 'column',
      bgcolor: 'background.default',
      color: 'text.primary',
    }}>
      {state.phase === 'pick' ? (
        <CCPdfPicker 
          onOpenPdfs={(pdfs) =>
            setState({
              phase: 'edit',
              examPaper: pdfs.examPaper,
              markScheme: pdfs.markScheme,
              studentResponses: pdfs.studentResponses,
            })
          }
        />
      ) : (
        <Box sx={{ flex: 1, position: 'relative' }}>
          <Box sx={{ 
            position: 'absolute',
            inset: 0,
            bgcolor: 'background.paper',
          }}>
            <CCPdfEditor
              examPaper={state.examPaper}
              markScheme={state.markScheme}
              studentResponses={state.studentResponses}
              currentView={view}
              currentStudentIndex={currentStudentIndex}
              onEditorMount={(editor) => {
                if (!editor) return null;
                const examMarkerProps = {
                  editor,
                  currentView: view,
                  onViewChange: handleViewChange,
                  currentStudentIndex,
                  totalStudents: Math.floor(state.studentResponses.pages.length / state.examPaper.pages.length),
                  onPreviousStudent: handlePreviousStudent,
                  onNextStudent: handleNextStudent,
                  getCurrentPdf: () => {
                    if (!editor) return null;
                    const currentPageId = editor.getCurrentPageId();
                    if (currentPageId.includes('exam-page')) {
                      return state.examPaper;
                    } else if (currentPageId.includes('mark-scheme-page')) {
                      return state.markScheme;
                    } else if (currentPageId.includes('student-response')) {
                      return state.studentResponses;
                    }
                    return null;
                  },
                };
                return <CCPanel 
                  examMarkerProps={examMarkerProps} 
                  isExpanded={isExpanded}
                  isPinned={isPinned}
                  onExpandedChange={setIsExpanded}
                  onPinnedChange={setIsPinned}
                />;
              }}
            />
          </Box>
        </Box>
      )}
    </Box>
  );
 };
@@ -1,113 +0,0 @@
 import { PDFDocument } from 'pdf-lib';
 import { useState } from 'react';
 import { Editor, exportToBlob } from '@tldraw/tldraw';
 import { Button } from '@mui/material';
 import { Pdf } from './types';
 interface CCExportPdfButtonProps {
  editor: Editor;
  pdf: Pdf;
 }
 export function CCExportPdfButton({ editor, pdf }: CCExportPdfButtonProps) {
  const [exportProgress, setExportProgress] = useState<number | null>(null);
  const exportPdf = async (
    editor: Editor,
    { name, source, pages }: Pdf,
    onProgress: (progress: number) => void
  ) => {
    const totalThings = pages.length * 2 + 2;
    let progressCount = 0;
    const tickProgress = () => {
      progressCount++;
      onProgress(progressCount / totalThings);
    };
    const pdf = await PDFDocument.load(source);
    tickProgress();
    const pdfPages = pdf.getPages();
    if (pdfPages.length !== pages.length) {
      throw new Error('PDF page count mismatch');
    }
    const pageShapeIds = new Set(pages.map((page) => page.shapeId));
    const allIds = Array.from(editor.getCurrentPageShapeIds()).filter(
      (id) => !pageShapeIds.has(id)
    );
    for (let i = 0; i < pages.length; i++) {
      const page = pages[i];
      const pdfPage = pdfPages[i];
      const {bounds} = page;
      const shapesInBounds = allIds.filter((id) => {
        const shapePageBounds = editor.getShapePageBounds(id);
        if (!shapePageBounds) return false;
        return shapePageBounds.collides(bounds);
      });
      if (shapesInBounds.length === 0) {
        tickProgress();
        tickProgress();
        continue;
      }
      const exportedPng = await exportToBlob({
        editor,
        ids: allIds,
        format: 'png',
        opts: { background: false, bounds: page.bounds, padding: 0, scale: 1 },
      });
      tickProgress();
      pdfPage.drawImage(await pdf.embedPng(await exportedPng.arrayBuffer()), {
        x: 0,
        y: 0,
        width: pdfPage.getWidth(),
        height: pdfPage.getHeight(),
      });
      tickProgress();
    }
    const url = URL.createObjectURL(
      new Blob([await pdf.save()], { type: 'application/pdf' })
    );
    tickProgress();
    const a = document.createElement('a');
    a.href = url;
    a.download = name;
    a.click();
    URL.revokeObjectURL(url);
  };
  return (
    <Button
      className="CCExportPdfButton"
      variant="contained"
      color="primary"
      onClick={async () => {
        setExportProgress(0);
        try {
          await exportPdf(editor, pdf, setExportProgress);
        } finally {
          setExportProgress(null);
        }
      }}
      sx={{
        position: 'absolute',
        top: 16,
        right: 16,
        zIndex: 1000,
      }}
    >
      {exportProgress
        ? `Exporting... ${Math.round(exportProgress * 100)}%`
        : 'Export PDF'}
    </Button>
  );
 } 
@@ -1,385 +0,0 @@
 import React from 'react';
 import { Box } from '@mui/material';
 import { Editor, TLPageId, Box as TLBox } from '@tldraw/editor';
 import { Tldraw } from '@tldraw/tldraw';
 import { useCallback, useEffect, useState, useRef } from 'react';
 import { ExamPdfs } from './types';
 import { AnnotationManager, AnnotationData } from './AnnotationManager';
 import { logger } from '../../../debugConfig';
 const PAGE_SPACING = 32; // Same spacing as the example
 interface CCPdfEditorProps extends ExamPdfs {
  currentView: 'exam-and-markscheme' | 'student-responses';
  currentStudentIndex: number;
  onEditorMount: (editor: Editor) => React.ReactNode;
 }
 export function CCPdfEditor({
  examPaper,
  markScheme,
  studentResponses,
  currentView,
  currentStudentIndex,
  onEditorMount,
 }: CCPdfEditorProps) {
  const [editor, setEditor] = useState<Editor | null>(null);
  const [pagesInitialized, setPagesInitialized] = useState(false);
  const annotationManager = useRef(new AnnotationManager());
  const handleMount = useCallback((editor: Editor) => {
    setEditor(editor);
    onEditorMount(editor);
    // Subscribe to shape changes
    editor.on('change', () => {
      const shapes = editor.getCurrentPageShapeIds();
      logger.debug('cc-exam-marker', '🔄 Shape change detected', {
        totalShapes: shapes.size,
        currentPage: editor.getCurrentPageId()
      });
      shapes.forEach(shapeId => {
        const shape = editor.getShape(shapeId);
        if (shape && !shape.isLocked) {  // Only track non-locked shapes (annotations)
          const bounds = editor.getShapePageBounds(shapeId);
          if (bounds) {
            const currentPageId = editor.getCurrentPageId();
            let annotationData: AnnotationData;
            if (currentPageId.includes('student-response')) {
              const studentIndex = parseInt(currentPageId.split('-').pop() || '0', 10);
              // Find which page this annotation belongs to by checking collision with page bounds
              const pageShapes = Array.from(shapes).filter(id => {
                const s = editor.getShape(id);
                return s?.isLocked;  // Locked shapes are our PDF pages
              });
              let pageIndex = -1;  // Default to -1 if no collision found
              for (let i = 0; i < pageShapes.length; i++) {
                const pageShape = editor.getShape(pageShapes[i]);
                if (!pageShape) continue;
                const pageBounds = editor.getShapePageBounds(pageShapes[i]);
                if (!pageBounds) continue;
                // Check if the annotation's center point is within the page bounds
                const annotationCenter = {
                  x: bounds.x + bounds.width / 2,
                  y: bounds.y + bounds.height / 2
                };
                if (annotationCenter.x >= pageBounds.x && 
                    annotationCenter.x <= pageBounds.x + pageBounds.width &&
                    annotationCenter.y >= pageBounds.y && 
                    annotationCenter.y <= pageBounds.y + pageBounds.height) {
                  pageIndex = i;
                  break;
                }
              }
              logger.debug('cc-exam-marker', '📏 Calculated page index', {
                shapeId,
                shapeBounds: bounds,
                pageIndex,
                studentIndex
              });
              annotationData = {
                studentIndex,
                pageIndex,
                shapeId,
                bounds: {
                  x: bounds.x,
                  y: bounds.y,
                  width: bounds.width,
                  height: bounds.height,
                }
              };
            } else {
              // For exam/mark scheme, use current page type as index
              const pageIndex = currentPageId.includes('exam') ? -1 : 1;
              annotationData = {
                pageIndex,
                shapeId,
                bounds: {
                  x: bounds.x,
                  y: bounds.y,
                  width: bounds.width,
                  height: bounds.height,
                }
              };
            }
            logger.debug('cc-exam-marker', '📝 Adding/updating annotation', {
              shapeId,
              annotationData,
              currentPage: currentPageId
            });
            annotationManager.current.addAnnotation(shapeId, annotationData);
          }
        }
      });
    });
  }, [onEditorMount]);
  // Initial setup effect - runs only once when editor is mounted
  useEffect(() => {
    if (!editor || pagesInitialized) return;
    const setupExamAndMarkScheme = async () => {
      const examPageId = 'page:exam-page' as TLPageId;
      const markSchemePageId = 'page:mark-scheme-page' as TLPageId;
      // Calculate vertical layout for exam pages
      let top = 0;
      let widest = 0;
      const examPages = examPaper.pages.map(page => {
        const width = page.bounds.width;
        const height = page.bounds.height;
        const currentTop = top;
        top += height + PAGE_SPACING;
        widest = Math.max(widest, width);
        return { ...page, top: currentTop, width, height };
      });
      // Center pages horizontally
      examPages.forEach(page => {
        page.bounds = new TLBox((widest - page.width) / 2, page.top, page.width, page.height);
      });
      // Create exam paper page
      editor.createPage({ 
        id: examPageId,
        name: 'Exam Paper',
      });
      editor.setCurrentPage(examPageId);
      // Create assets and shapes for exam pages
      examPages.forEach((page) => {
        editor.createAssets([{
          id: page.assetId,
          typeName: 'asset',
          type: 'image',
          props: {
            w: page.bounds.width,
            h: page.bounds.height,
            name: 'PDF Page',
            src: page.src,
            isAnimated: false,
            mimeType: 'image/png',
          },
          meta: {},
        }]);
        editor.createShape({
          id: page.shapeId,
          type: 'image',
          x: page.bounds.x,
          y: page.bounds.y,
          props: {
            w: page.bounds.width,
            h: page.bounds.height,
            assetId: page.assetId,
          },
          isLocked: true,
        });
      });
      // Similar process for mark scheme pages
      let markSchemeTop = 0;
      const markSchemePages = markScheme.pages.map(page => {
        const width = page.bounds.width;
        const height = page.bounds.height;
        const currentTop = markSchemeTop;
        markSchemeTop += height + PAGE_SPACING;
        return {
          ...page,
          bounds: new TLBox((widest - width) / 2, currentTop, width, height)
        };
      });
      // Create mark scheme page
      editor.createPage({ 
        id: markSchemePageId,
        name: 'Mark Scheme',
      });
      editor.setCurrentPage(markSchemePageId);
      // Create assets and shapes for mark scheme pages
      markSchemePages.forEach((page) => {
        editor.createAssets([{
          id: page.assetId,
          typeName: 'asset',
          type: 'image',
          props: {
            w: page.bounds.width,
            h: page.bounds.height,
            name: 'PDF Page',
            src: page.src,
            isAnimated: false,
            mimeType: 'image/png',
          },
          meta: {},
        }]);
        editor.createShape({
          id: page.shapeId,
          type: 'image',
          x: page.bounds.x,
          y: page.bounds.y,
          props: {
            w: page.bounds.width,
            h: page.bounds.height,
            assetId: page.assetId,
          },
          isLocked: true,
        });
      });
      // Go back to exam page
      editor.setCurrentPage(examPageId);
    };
    const setupStudentResponses = async () => {
      const pagesPerStudent = examPaper.pages.length;
      const totalStudents = Math.floor(studentResponses.pages.length / pagesPerStudent);
      for (let studentIndex = 0; studentIndex < totalStudents; studentIndex++) {
        const startPage = studentIndex * pagesPerStudent;
        const endPage = startPage + pagesPerStudent;
        const studentPageId = `page:student-response-${studentIndex}` as TLPageId;
        // Calculate vertical layout
        let top = 0;
        let widest = 0;
        const studentPages = studentResponses.pages
          .slice(startPage, endPage)
          .map(page => {
            const width = page.bounds.width;
            const height = page.bounds.height;
            const currentTop = top;
            top += height + PAGE_SPACING;
            widest = Math.max(widest, width);
            return { ...page, top: currentTop, width, height };
          });
        // Center pages horizontally
        studentPages.forEach(page => {
          page.bounds = new TLBox((widest - page.width) / 2, page.top, page.width, page.height);
        });
        // Create page for this student
        editor.createPage({ 
          id: studentPageId,
          name: `Student ${studentIndex + 1}`,
        });
        editor.setCurrentPage(studentPageId);
        // Create assets and shapes
        studentPages.forEach((page) => {
          editor.createAssets([{
            id: page.assetId,
            typeName: 'asset',
            type: 'image',
            props: {
              w: page.bounds.width,
              h: page.bounds.height,
              name: 'PDF Page',
              src: page.src,
              isAnimated: false,
              mimeType: 'image/png',
            },
            meta: {},
          }]);
          editor.createShape({
            id: page.shapeId,
            type: 'image',
            x: page.bounds.x,
            y: page.bounds.y,
            props: {
              w: page.bounds.width,
              h: page.bounds.height,
              assetId: page.assetId,
            },
            isLocked: true,
          });
        });
      }
    };
    // Initial setup of all pages
    const setup = async () => {
      await setupExamAndMarkScheme();
      await setupStudentResponses();
      setPagesInitialized(true);
    };
    setup();
  }, [editor, pagesInitialized, examPaper, markScheme, studentResponses]);
  // Effect to handle view changes and navigation
  useEffect(() => {
    if (!editor || !pagesInitialized) return;
    // Switch to appropriate page based on current view
    const targetPageId = currentView === 'exam-and-markscheme'
      ? ('page:exam-page' as TLPageId)
      : (`page:student-response-${currentStudentIndex}` as TLPageId);
    logger.debug('cc-exam-marker', '🔄 Switching view', {
      currentView,
      currentStudentIndex,
      targetPageId
    });
    editor.setCurrentPage(targetPageId);
    // Update camera constraints for current page
    const currentPageBounds = Array.from(editor.getCurrentPageShapeIds()).reduce(
      (acc: TLBox | null, shapeId) => {
        const bounds = editor.getShapePageBounds(shapeId);
        return bounds ? (acc ? acc.union(bounds) : bounds) : acc;
      },
      null as TLBox | null
    );
    if (currentPageBounds) {
      const isMobile = editor.getViewportScreenBounds().width < 840;
      editor.setCameraOptions({
        constraints: {
          bounds: currentPageBounds,
          padding: { x: isMobile ? 16 : 164, y: 64 },
          origin: { x: 0.5, y: 0 },
          initialZoom: 'fit-x-100',
          baseZoom: 'default',
          behavior: 'contain',
        },
      });
      editor.setCamera(editor.getCamera(), { reset: true });
    }
  }, [editor, pagesInitialized, currentView, currentStudentIndex]);
  // Expose annotationManager to parent through onEditorMount
  useEffect(() => {
    if (editor) {
      onEditorMount(editor);
      // @ts-expect-error - Adding custom property to editor for CCExamMarkerPanel access
      editor.annotationManager = annotationManager.current;
    }
  }, [editor, onEditorMount]);
  return (
    <Box sx={{ width: '100%', height: '100%', position: 'relative' }}>
      <Tldraw 
        onMount={handleMount}
        components={{
          InFrontOfTheCanvas: () => onEditorMount(editor!)
        }}
      />
    </Box>
  );
 } 
@@ -1,210 +0,0 @@
 import { useState } from 'react';
 import { Box, Button, Stack, Typography } from '@mui/material';
 import { AssetRecordType, Box as TLBox, createShapeId } from '@tldraw/editor';
 import { ExamPdfs, Pdf, PdfPage } from './types';
 interface CCPdfPickerProps {
  onOpenPdfs: (pdfs: ExamPdfs) => void;
 }
 const pageSpacing = 32;
 export function CCPdfPicker({ onOpenPdfs }: CCPdfPickerProps) {
  const [isLoading, setIsLoading] = useState(false);
  const [selectedPdfs, setSelectedPdfs] = useState<Partial<ExamPdfs>>({});
  async function loadPdf(name: string, source: ArrayBuffer): Promise<Pdf> {
    const PdfJS = await import('pdfjs-dist');
    PdfJS.GlobalWorkerOptions.workerSrc = new URL(
      'pdfjs-dist/build/pdf.worker.min.mjs',
      import.meta.url
    ).toString();
    const pdf = await PdfJS.getDocument(source.slice()).promise;
    const pages: PdfPage[] = [];
    const canvas = window.document.createElement('canvas');
    const context = canvas.getContext('2d');
    if (!context) throw new Error('Failed to create canvas context');
    const visualScale = 1.5;
    const scale = window.devicePixelRatio;
    let top = 0;
    let widest = 0;
    for (let i = 1; i <= pdf.numPages; i++) {
      const page = await pdf.getPage(i);
      const viewport = page.getViewport({ scale: scale * visualScale });
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      const renderContext = {
        canvasContext: context,
        viewport,
      };
      await page.render(renderContext).promise;
      const width = viewport.width / scale;
      const height = viewport.height / scale;
      pages.push({
        src: canvas.toDataURL(),
        bounds: new TLBox(0, top, width, height),
        assetId: AssetRecordType.createId(),
        shapeId: createShapeId(),
      });
      top += height + pageSpacing;
      widest = Math.max(widest, width);
    }
    canvas.width = 0;
    canvas.height = 0;
    for (const page of pages) {
      page.bounds.x = (widest - page.bounds.width) / 2;
    }
    return {
      name,
      pages,
      source,
    };
  }
  const handleFileSelect = async (type: keyof ExamPdfs, file: File) => {
    setIsLoading(true);
    try {
      const pdf = await loadPdf(file.name, await file.arrayBuffer());
      // Validate student responses page count
      if (type === 'studentResponses' && selectedPdfs.examPaper) {
        const examPageCount = selectedPdfs.examPaper.pages.length;
        if (pdf.pages.length % examPageCount !== 0) {
          alert(`Student responses PDF must have a number of pages that is a multiple of the exam paper's ${examPageCount} pages.\n\nStudent responses PDF has ${pdf.pages.length} pages, which is not a multiple of ${examPageCount}.`);
          return;
        }
      }
      setSelectedPdfs((prev) => ({ ...prev, [type]: pdf }));
    } catch (error) {
      console.error('Error loading PDF:', error);
      alert('Error loading PDF (mismatch between responses and exam paper). Please try again.');
    } finally {
      setIsLoading(false);
    }
  };
  const createFileInput = (type: keyof ExamPdfs) => {
    const input = window.document.createElement('input');
    input.type = 'file';
    input.accept = 'application/pdf';
    input.addEventListener('change', async (e) => {
      const fileList = (e.target as HTMLInputElement).files;
      if (!fileList || fileList.length === 0) return;
      await handleFileSelect(type, fileList[0]);
    });
    input.click();
  };
  const allPdfsSelected = () => {
    return (
      selectedPdfs.examPaper &&
      selectedPdfs.markScheme &&
      selectedPdfs.studentResponses
    );
  };
  if (isLoading) {
    return (
      <Box className="CCPdfPicker" sx={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
        width: '100%'
      }}>
        <Typography>Loading...</Typography>
      </Box>
    );
  }
  return (
    <Box className="CCPdfPicker" sx={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      height: '100%',
      width: '100%'
    }}>
      <Stack 
        spacing={4} 
        alignItems="center" 
        sx={{ 
          maxWidth: '800px',
          width: '100%',
          p: 3
        }}
      >
        <Typography variant="h5">Select PDF Files</Typography>
        <Stack 
          direction="row" 
          sx={{ 
            width: '100%', 
            justifyContent: 'center',
            gap: 4  // Using MUI's spacing unit (1 unit = 8px, so 4 = 32px)
          }}
        >
          <Button
            variant={selectedPdfs.examPaper ? 'contained' : 'outlined'}
            onClick={() => createFileInput('examPaper')}
            sx={{ 
              minWidth: '180px',
              height: '48px'
            }}
          >
            {selectedPdfs.examPaper ? '✓ Exam Paper' : 'Select Exam Paper'}
          </Button>
          <Button
            variant={selectedPdfs.markScheme ? 'contained' : 'outlined'}
            onClick={() => createFileInput('markScheme')}
            sx={{ 
              minWidth: '180px',
              height: '48px'
            }}
          >
            {selectedPdfs.markScheme ? '✓ Mark Scheme' : 'Select Mark Scheme'}
          </Button>
          <Button
            variant={selectedPdfs.studentResponses ? 'contained' : 'outlined'}
            onClick={() => createFileInput('studentResponses')}
            sx={{ 
              minWidth: '180px',
              height: '48px'
            }}
          >
            {selectedPdfs.studentResponses ? '✓ Student Responses' : 'Select Student Responses'}
          </Button>
        </Stack>
        {allPdfsSelected() && (
          <Box sx={{ mt: 4, width: '100%', display: 'flex', justifyContent: 'center' }}>
            <Button
              variant="contained"
              color="primary"
              onClick={() => onOpenPdfs(selectedPdfs as ExamPdfs)}
              sx={{ 
                minWidth: '180px',
                height: '48px'
              }}
            >
              Continue
            </Button>
          </Box>
        )}
      </Stack>
    </Box>
  );
 } 
@@ -1,61 +0,0 @@
 .CCExamMarker {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
 }
 .CCExamMarker .CCPdfPicker {
  position: absolute;
  inset: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 1rem;
 }
 .CCExamMarker .CCPdfBgRenderer {
  position: absolute;
  pointer-events: none;
 }
 .CCExamMarker .CCPdfBgRenderer img {
  position: absolute;
 }
 .CCExamMarker .PageOverlayScreen-screen {
  pointer-events: none;
  z-index: -1;
  fill: var(--color-background);
  fill-opacity: 0.8;
  stroke: none;
 }
 .CCExamMarker .PageOverlayScreen-outline {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  box-shadow: var(--shadow-2);
 }
 .CCExamMarker .CCExportPdfButton {
  font: inherit;
  background: var(--color-primary);
  border: none;
  color: var(--color-selected-contrast);
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  margin: 6px;
  margin-bottom: 0;
  pointer-events: all;
  z-index: var(--layer-panels);
  border: 2px solid var(--color-background);
  cursor: pointer;
 }
 .CCExamMarker .CCExportPdfButton:hover {
  filter: brightness(1.1);
 } 
@@ -1,44 +0,0 @@
 import { Box, TLAssetId, TLShapeId } from '@tldraw/tldraw';
 export interface PdfPage {
  src: string;
  bounds: Box;
  assetId: TLAssetId;
  shapeId: TLShapeId;
 }
 export interface Pdf {
  name: string;
  pages: PdfPage[];
  source: string | ArrayBuffer;
 }
 export interface ExamPdfs {
  examPaper: Pdf;
  markScheme: Pdf;
  studentResponses: Pdf;
 }
 export type ExamPdfState =
  | {
      phase: 'pick';
    }
  | {
      phase: 'edit';
      examPaper: Pdf;
      markScheme: Pdf;
      studentResponses: Pdf;
    };
 export interface StudentResponse {
  studentId: string;
  pageStart: number;
  pageEnd: number;
 }
 export interface ExamMetadata {
  totalPages: number;
  pagesPerStudent: number;
  totalStudents: number;
  studentResponses: StudentResponse[];
 } 
@@ -7,7 +7,7 @@ import {
    DEFAULT_SUPPORT_VIDEO_TYPES,
    DEFAULT_SUPPORTED_IMAGE_TYPES,
    TLStore,
-    TLStoreWithStatus
+    createTLStore,
 } from '@tldraw/tldraw';
 import { useTLDraw } from '../../contexts/TLDrawContext';
 import { useAuth } from '../../contexts/AuthContext';
@@ -15,7 +15,6 @@ import { useUser } from '../../contexts/UserContext';
 // Tldraw services
 import { localStoreService } from '../../services/tldraw/localStoreService';
 import { PresentationService } from '../../services/tldraw/presentationService';
 import { NodeCanvasService } from '../../services/tldraw/nodeCanvasService';
 import { NavigationSnapshotService } from '../../services/tldraw/snapshotService';
 // Tldraw utils
 import { getUiOverrides, getUiComponents } from '../../utils/tldraw/ui-overrides';
@@ -34,9 +33,7 @@ import '../../utils/tldraw/tldraw.css';
 // App debug
 import { logger } from '../../debugConfig';
 import { CircularProgress, Alert, Snackbar } from '@mui/material';
-import { getThemeFromLabel } from '../../utils/tldraw/cc-base/cc-graph/cc-graph-styles';
+import { ErrorBoundary } from '../../components/ErrorBoundary';
 import { NodeData } from '../../types/graph-shape';
 import { NavigationNode } from '../../types/navigation';
 interface LoadingState {
    status: 'ready' | 'loading' | 'error';
@@ -67,9 +64,8 @@ export default function SinglePlayerPage() {
        status: 'ready',
        error: ''
    });
-    const [isInitialLoad, setIsInitialLoad] = useState(true);
+    const storeRef = useRef<TLStore | null>(null);
-    const [isEditorReady, setIsEditorReady] = useState(false);
+    const [storeReady, setStoreReady] = useState(false);
    const [store, setStore] = useState<TLStore | TLStoreWithStatus | undefined>(undefined);
    // TLDraw user preferences
    const tldrawUser = useTldrawUser({
@@ -85,248 +81,97 @@ export default function SinglePlayerPage() {
        setUserPreferences: setTldrawPreferences
    });
-    // Initialize store — runs as soon as user is ready, no editor needed for store creation
+    const [canvasPhase, setCanvasPhase] = useState<
        'idle' | 'store-init' | 'snapshot-loading' | 'ready' | 'error'
    >('idle');
    // Effect 1: Create the store ONCE per user session. Never recreate on node changes.
    // Disposing the store while Tldraw is subscribed causes currentPageId crashes; keeping
    // the store alive for the component lifetime avoids all disposal race conditions.
    useEffect(() => {
-        if (!user) {
+        if (!user) return;
-            logger.debug('single-player-page', '⏳ Waiting for user data');
+
        setCanvasPhase('store-init');
        const store = createTLStore({
            schema: customSchema,
            shapeUtils: allShapeUtils,
            bindingUtils: allBindingUtils,
        });
        // Initialize default tldraw records (TLINSTANCE, page, cameras) before mount
        (store as unknown as { ensureStoreIsUsable(): void }).ensureStoreIsUsable();
        const snapSvc = new NavigationSnapshotService(store, undefined);
        if (accessToken) snapSvc.setAccessToken(accessToken);
        snapshotServiceRef.current = snapSvc;
        let debounce: ReturnType<typeof setTimeout> | null = null;
        const unsubscribe = store.listen(() => {
            if (!snapshotServiceRef.current?.getCurrentNodePath()) return;
            if (debounce) clearTimeout(debounce);
            debounce = setTimeout(async () => {
                await snapshotServiceRef.current?.forceSaveCurrentNode().catch(() => {});
            }, 2000);
        });
        storeRef.current = store;
        setStoreReady(true);
        setCanvasPhase('ready');
        return () => {
            unsubscribe?.();
            snapshotServiceRef.current?.forceSaveCurrentNode().catch(() => {});
            snapshotServiceRef.current?.clearCurrentNode();
            snapshotServiceRef.current = null;
            setStoreReady(false);
            setCanvasPhase('idle');
            store.dispose();
            storeRef.current = null;
        };
    }, [user?.id]);  // Only recreate store if user changes, NOT on every node navigation
    // Effect 2: Load/reload snapshot when context.node changes. Store stays alive.
    useEffect(() => {
        if (!user || !storeRef.current) return;
        const store = storeRef.current;
        let cancelled = false;
        const loadNodeSnapshot = async () => {
            if (!context.node?.node_storage_path) {
                // No node — clear to blank canvas using ensureStoreIsUsable to restore defaults
                (store as unknown as { ensureStoreIsUsable(): void }).ensureStoreIsUsable();
                snapshotServiceRef.current?.clearCurrentNode();
                setCanvasPhase('ready');
                return;
            }
-        logger.info('single-player-page', '🔄 Starting store initialization', {
+            setCanvasPhase('snapshot-loading');
            isEditorReady,
            hasUser: !!user,
            userType: user.user_type,
            username: user.username
        });
        const initializeStoreAndSnapshot = async () => {
            try {
                setLoadingState({ status: 'loading', error: '' });
                // 1. Create store
                logger.debug('single-player-page', '🔄 Creating TLStore');
                const newStore = localStoreService.getStore({
                    schema: customSchema,
                    shapeUtils: allShapeUtils,
                    bindingUtils: allBindingUtils
                });
                logger.debug('single-player-page', '✅ TLStore created');
                // 2. Initialize snapshot service
                const snapshotService = new NavigationSnapshotService(newStore, editorRef.current || undefined);
                if (accessToken) snapshotService.setAccessToken(accessToken);
                snapshotServiceRef.current = snapshotService;
                logger.debug('single-player-page', '✨ Initialized NavigationSnapshotService');
                // 3. Load initial snapshot if we have a node
                if (context.node) {
                    const nodeStoragePath = getNodeStoragePath(context.node);
                    if (nodeStoragePath) {
                        logger.debug('single-player-page', '📥 Loading snapshot from database', { 
                            dbName: null,
                            node: context.node,
                            node_storage_path: nodeStoragePath,
                            user_type: user.user_type,
                            username: user.username
                        });
                await NavigationSnapshotService.loadNodeSnapshotFromDatabase(
-                            nodeStoragePath,
+                    context.node.node_storage_path,
                    accessToken || '',
-                            newStore,
+                    store,
                    setLoadingState,
                    undefined,
                    editorRef.current || undefined
                );
-                        // Wire auto-save: set the current path on the service instance
+                if (!cancelled) {
-                        snapshotService.setCurrentNodePath(nodeStoragePath);
+                    // Repair store in case snapshot overwrote TLINSTANCE
-                        logger.debug('single-player-page', '✅ Snapshot loaded from database');
+                    (store as unknown as { ensureStoreIsUsable(): void }).ensureStoreIsUsable();
-                    } else {
+                    snapshotServiceRef.current?.setCurrentNodePath(context.node.node_storage_path);
-                        logger.debug('single-player-page', '⚠️ No node_storage_path found in node, skipping snapshot load', {
+                    setCanvasPhase('ready');
                            node: context.node
                        });
                }
-                } else {
+            } catch (e) {
-                    logger.debug('single-player-page', '⚠️ No node in context, skipping snapshot load');
+                if (!cancelled) setCanvasPhase('ready'); // show blank canvas on error
                }
                // 4. Set up auto-save with debouncing (only after initial load is complete)
                let autoSaveTimeout: ReturnType<typeof setTimeout> | null = null;
                let isAutoSaving = false;
                newStore.listen(() => {
                    if (snapshotServiceRef.current && snapshotServiceRef.current.getCurrentNodePath()) {
                        // Skip if already saving
                        if (isAutoSaving) {
                            logger.debug('single-player-page', '⚠️ Skipping auto-save - already saving');
                            return;
                        }
                        // Clear existing timeout
                        if (autoSaveTimeout) {
                            clearTimeout(autoSaveTimeout);
                        }
                        // Debounce auto-save to prevent excessive saves
                        autoSaveTimeout = setTimeout(async () => {
                            if (isAutoSaving) return; // Double-check
                            isAutoSaving = true;
                            try {
                                logger.debug('single-player-page', '💾 Auto-saving changes (debounced)');
                                await snapshotServiceRef.current?.forceSaveCurrentNode();
                            } catch (error) {
                                logger.error('single-player-page', '❌ Auto-save failed', error);
                            } finally {
                                isAutoSaving = false;
                            }
                        }, 2000); // Increased to 2 seconds debounce
                    }
                });
                // 5. Update store state
                setStore(newStore);
                setLoadingState({ status: 'ready', error: '' });
                logger.info('single-player-page', '✅ Store initialization complete');
                // 6. Handle cleanup
                return () => {
                    logger.debug('single-player-page', '🧹 Starting cleanup');
                    if (snapshotServiceRef.current) {
                        snapshotServiceRef.current.forceSaveCurrentNode().catch(error => {
                            logger.error('single-player-page', '❌ Final save failed', error);
                        });
                        snapshotServiceRef.current.clearCurrentNode();
                        snapshotServiceRef.current = null;
                    }
                    newStore.dispose();
                    setStore(undefined);
                    logger.debug('single-player-page', '🧹 Cleanup complete');
                };
            } catch (error) {
                const errorMessage = error instanceof Error ? error.message : 'Failed to initialize store';
                logger.error('single-player-page', '❌ Store initialization failed', error);
                setLoadingState({ status: 'error', error: errorMessage });
                return undefined;
            }
        };
-        initializeStoreAndSnapshot();
+        loadNodeSnapshot();
-    }, [user, context.node]);
+        return () => { cancelled = true; };
    }, [context.node?.id, storeReady]);  // re-run when node changes OR after store becomes ready
-    // Handle initial node placement
+    // Handle navigation changes — save previous snapshot, load next one.
-    useEffect(() => {
+    // No automatic node shape placement: the canvas shows only persisted state.
        const placeInitialNode = async () => {
            if (!context.node || !editorRef.current || !store || !isInitialLoad) {
                logger.debug('single-player-page', '⚠️ Skipping placeInitialNode - missing dependencies', {
                    hasNode: !!context.node,
                    hasEditor: !!editorRef.current,
                    hasStore: !!store,
                    isInitialLoad
                });
                return;
            }
            // Debug: Log the actual node structure
            logger.debug('single-player-page', '🔍 Node structure for placeInitialNode', {
                node: context.node,
                nodeKeys: Object.keys(context.node),
                hasId: !!context.node.id,
                hasStoragePath: !!context.node.node_storage_path,
                hasData: !!context.node.data,
                dataKeys: context.node.data ? Object.keys(context.node.data) : null
            });
            // Validate that the node has required properties
            const nodeStoragePath = getNodeStoragePath(context.node);
            if (!context.node.id || !nodeStoragePath) {
                logger.error('single-player-page', '❌ Node missing required properties', {
                    nodeId: context.node.id,
                    hasStoragePath: !!nodeStoragePath,
                    node: context.node
                });
                setLoadingState({ 
                    status: 'error', 
                    error: 'Node is missing required information'
                });
                return;
            }
            try {
                setLoadingState({ status: 'loading', error: '' });
                if (context.node.type !== 'workspace') {
                    try {
                        const nodeData = await loadNodeData(context.node);
                        await NodeCanvasService.centerCurrentNode(editorRef.current, context.node, nodeData);
                    } catch (shapeErr) {
                        logger.warn('single-player-page', '⚠️ Could not place node shape', { type: context.node.type, error: shapeErr });
                    }
                }
                setIsInitialLoad(false);
                setLoadingState({ status: 'ready', error: '' });
            } catch (error) {
                logger.error('single-player-page', '❌ Failed to place initial node', error);
                setLoadingState({ 
                    status: 'error', 
                    error: error instanceof Error ? error.message : 'Failed to place initial node'
                });
            }
        };
        placeInitialNode();
    }, [context.node, store, isInitialLoad]);
    // Handle navigation changes
    useEffect(() => {
        const handleNodeChange = async () => {
            if (!context.node?.id || !editorRef.current || !snapshotServiceRef.current || !store) {
                return;
            }
            // We can safely assert these types because we've checked for null above
            const editor = editorRef.current as Editor;
            const snapshotService = snapshotServiceRef.current;
            const currentNode = context.node;
            try {
                setLoadingState({ status: 'loading', error: '' });
                logger.debug('single-player-page', '🔄 Loading node data', {
                    nodeId: currentNode.id,
                    node_storage_path: currentNode.node_storage_path,
                    isInitialLoad
                });
                // Get the previous node from navigation history
                const previousNode = context.history.currentIndex > 0 
                    ? context.history.nodes[context.history.currentIndex - 1] 
                    : null;
                // Handle navigation in snapshot service (load/save snapshot)
                await snapshotService.handleNavigationStart(previousNode, currentNode);
                if (currentNode.type !== 'workspace') {
                    try {
                        const nodeData = await loadNodeData(currentNode);
                        await NodeCanvasService.centerCurrentNode(editor, currentNode, nodeData);
                    } catch (shapeErr) {
                        logger.warn('single-player-page', '⚠️ Could not place node shape', { type: currentNode.type, error: shapeErr });
                    }
                }
                setLoadingState({ status: 'ready', error: '' });
            } catch (error) {
                logger.error('single-player-page', '❌ Failed to load node data', error);
                setLoadingState({ 
                    status: 'error', 
                    error: error instanceof Error ? error.message : 'Failed to load node data'
                });
            }
        };
        handleNodeChange();
    }, [context.node, context.history, store]);
    // Inject auth and trigger initial context when token is ready
    useEffect(() => {
@@ -485,7 +330,7 @@ export default function SinglePlayerPage() {
            top: `${HEADER_HEIGHT}px`,
        }}>
            {/* Loading overlay - show when loading or contexts not initialized */}
-            {(loadingState.status === 'loading' || !store) && (
+            {(loadingState.status === 'loading' || !storeReady) && (
                <div style={{
                    position: 'absolute',
                    top: 0,
@@ -513,9 +358,15 @@ export default function SinglePlayerPage() {
                </Alert>
            </Snackbar>
-            {store && <Tldraw
+            <ErrorBoundary fallback={
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: '1rem', padding: '2rem' }}>
                    <p style={{ fontSize: '1.1rem' }}>Canvas failed to load.</p>
                    <button onClick={() => window.location.reload()} style={{ padding: '0.5rem 1.25rem', cursor: 'pointer' }}>Reload</button>
                </div>
            }>
            {storeReady && storeRef.current && <Tldraw
                user={tldrawUser}
-                store={store}
+                store={storeRef.current}
                tools={singlePlayerTools}
                shapeUtils={allShapeUtils}
                bindingUtils={allBindingUtils}
@@ -548,57 +399,17 @@ export default function SinglePlayerPage() {
                            if (accessToken) snapshotServiceRef.current.setAccessToken(accessToken);
                        }
                        setIsEditorReady(true);
                        logger.info('single-player-page', '✅ Tldraw mounted successfully', {
                            editorId: editor.store.id,
                            presentationMode,
                            isEditorReady: true
                        });
                    } catch (error) {
                        logger.error('single-player-page', '❌ Error in onMount', error);
                    }
                }}
            />}
            </ErrorBoundary>
        </div>
    );
 }
 // Helper function to safely extract node_storage_path from different node structures
 const getNodeStoragePath = (node: NavigationNode): string | null => {
    // Try direct access first
    if (node.node_storage_path) {
        return node.node_storage_path;
    }
    // Try nested under data
    if (node.data?.node_storage_path) {
        return node.data.node_storage_path;
    }
    // Try other possible locations
    if (node.data?.storage_path && typeof node.data.storage_path === 'string') {
        return node.data.storage_path;
    }
    return null;
 };
 const loadNodeData = async (node: NavigationNode): Promise<NodeData> => {
    if (!node?.id) throw new Error('Node parameter is required');
    const nodeStoragePath = getNodeStoragePath(node);
    if (!nodeStoragePath) throw new Error(`Node ${node.id} is missing node_storage_path`);
    const theme = getThemeFromLabel(node.type);
    return {
        title: node.label || node.type || '',
        w: 500,
        h: 350,
        state: { parentId: null, isPageChild: true, hasChildren: null, bindings: null },
        headerColor: theme.headerColor,
        backgroundColor: theme.backgroundColor,
        isLocked: false,
        __primarylabel__: node.type,
        uuid_string: node.id,
        node_storage_path: nodeStoragePath,
    };
 };
@@ -85,6 +85,12 @@ const DashboardPage: React.FC = () => {
                >
                  Open workspace
                </Button>
                <Button
                  variant="outlined"
                  onClick={() => navigate('/exam-marker')}
                >
                  Exam Marker
                </Button>
                <Button
                  variant="outlined"
                  onClick={() => navigate('/calendar')}
@@ -0,0 +1,180 @@
 /**
 * examRepository — the SINGLE module that talks to the /api/exam backend (spec R2.1 seam).
 *
 * All exam-marker persistence flows through here so a later dual-write / offline cache can slot
 * in without touching feature code. Mirrors the auth pattern of timetableService: take the
 * Supabase session JWT and send it as a Bearer token; the API enforces RLS as the user.
 */
 import axios from 'axios';
 import { API_BASE } from '../../config/apiConfig';
 import { logger } from '../../debugConfig';
 import { supabase } from '../../supabaseClient';
 import type {
  CreateTemplatePayload,
  ExamBoundary,
  ExamQuestion,
  ExamResponseArea,
  ExamTemplate,
  ExamTemplateDetail,
  TemplateReplacePayload,
  UpdateTemplateMetaPayload,
 } from '../../types/exam.types';
 const EXAM_BASE = `${API_BASE}/api/exam`;
 async function authHeaders(): Promise<Record<string, string>> {
  const { data: { session } } = await supabase.auth.getSession();
  if (!session?.access_token) {
    throw new Error('No authentication token available');
  }
  return { Authorization: `Bearer ${session.access_token}` };
 }
 function newUuid(): string {
  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
    return crypto.randomUUID();
  }
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
    const r = Math.floor(Math.random() * 16);
    const v = c === 'x' ? r : (r % 4) + 8;
    return v.toString(16);
  });
 }
 function questionPayload(q: ExamQuestion, idMap?: Map<string, string>) {
  return {
    id: idMap?.get(q.id) ?? q.id,
    parent_id: q.parent_id ? (idMap?.get(q.parent_id) ?? q.parent_id) : null,
    label: q.label,
    order: q.order,
    max_marks: q.max_marks,
    answer_type: q.answer_type,
    mcq_options: q.mcq_options,
    mark_scheme: q.mark_scheme ?? {},
    is_container: q.is_container,
    spec_ref: q.spec_ref,
    bounds: q.bounds ?? null,
    page: q.page ?? null,
  };
 }
 function responseAreaPayload(r: ExamResponseArea, idMap?: Map<string, string>, duplicate = false) {
  return {
    id: duplicate ? newUuid() : r.id,
    question_id: idMap?.get(r.question_id) ?? r.question_id,
    page: r.page,
    bounds: r.bounds,
    kind: r.kind,
    response_form: r.response_form,
    context_type: r.context_type ?? null,
    source: r.source,
    confirmed: r.confirmed,
    confidence: r.confidence,
  };
 }
 function boundaryPayload(b: ExamBoundary, idMap?: Map<string, string>, duplicate = false) {
  return {
    id: duplicate ? newUuid() : b.id,
    question_id: b.question_id ? (idMap?.get(b.question_id) ?? b.question_id) : null,
    label: b.label,
    page_index: b.page_index,
    y: b.y,
    bounds: b.bounds,
    source: b.source,
    confirmed: b.confirmed,
  };
 }
 async function replaceTemplate(
  templateId: string,
  detail: ExamTemplateDetail,
  meta?: UpdateTemplateMetaPayload,
  duplicateIds = false,
 ): Promise<ExamTemplateDetail> {
  const headers = await authHeaders();
  const idMap = new Map<string, string>();
  if (duplicateIds) {
    detail.questions.forEach((q) => idMap.set(q.id, newUuid()));
  }
  const res = await axios.put<ExamTemplateDetail>(
    `${EXAM_BASE}/templates/${templateId}`,
    {
      meta,
      questions: detail.questions.map((q) => questionPayload(q, idMap)),
      response_areas: detail.response_areas.map((r) => responseAreaPayload(r, idMap, duplicateIds)),
      boundaries: detail.boundaries.map((b) => boundaryPayload(b, idMap, duplicateIds)),
    },
    { headers },
  );
  return res.data;
 }
 export const examRepository = {
  async listTemplates(includeArchived = false): Promise<ExamTemplate[]> {
    const headers = await authHeaders();
    const res = await axios.get<{ templates: ExamTemplate[] }>(
      `${EXAM_BASE}/templates`,
      { headers, params: { include_archived: includeArchived } },
    );
    return res.data.templates ?? [];
  },
  async getTemplate(templateId: string): Promise<ExamTemplateDetail> {
    const headers = await authHeaders();
    const res = await axios.get<ExamTemplateDetail>(`${EXAM_BASE}/templates/${templateId}`, { headers });
    return res.data;
  },
  async createTemplate(payload: CreateTemplatePayload): Promise<ExamTemplate> {
    const headers = await authHeaders();
    const res = await axios.post<ExamTemplate>(`${EXAM_BASE}/templates`, payload, { headers });
    return res.data;
  },
  async updateTemplateMeta(templateId: string, meta: UpdateTemplateMetaPayload): Promise<ExamTemplate> {
    const headers = await authHeaders();
    const res = await axios.patch<ExamTemplate>(`${EXAM_BASE}/templates/${templateId}`, meta, { headers });
    return res.data;
  },
  async duplicateTemplate(templateId: string, title: string): Promise<ExamTemplateDetail> {
    const detail = await this.getTemplate(templateId);
    const created = await this.createTemplate({
      title,
      subject: detail.subject ?? undefined,
      exam_id: detail.exam_id ?? undefined,
      exam_code: detail.exam_code ?? undefined,
      source_file_id: detail.source_file_id ?? undefined,
      page_count: detail.page_count ?? undefined,
      institute_id: detail.institute_id,
    });
    try {
      return await replaceTemplate(created.id, { ...detail, id: created.id }, { title, status: 'draft' }, true);
    } catch (error) {
      try {
        await this.archiveTemplate(created.id);
      } catch (archiveError) {
        logger.error('cc-exam-marker', 'Failed to archive incomplete duplicate template', {
          templateId: created.id,
          message: archiveError instanceof Error ? archiveError.message : String(archiveError),
        });
      }
      throw error;
    }
  },
  async replaceTemplate(templateId: string, payload: TemplateReplacePayload): Promise<ExamTemplateDetail> {
    const headers = await authHeaders();
    const res = await axios.put<ExamTemplateDetail>(`${EXAM_BASE}/templates/${templateId}`, payload, { headers });
    return res.data;
  },
  async archiveTemplate(templateId: string): Promise<void> {
    const headers = await authHeaders();
    await axios.delete(`${EXAM_BASE}/templates/${templateId}`, { headers });
  },
 };
 export default examRepository;
@@ -19,12 +19,17 @@ export class SharedStoreService {
    private lastSaveTime: number = Date.now();
    private autoSaveInterval: ReturnType<typeof setTimeout> | null = null;
    private config: AutoSaveConfig;
    private isDirty = false;
    private dirtyListener: (() => void) | null = null;
    constructor(private store: TLStore, config?: Partial<AutoSaveConfig>) {
        this.config = {
            ...DEFAULT_CONFIG,
            ...config
        };
        this.dirtyListener = store.listen(() => {
            this.isDirty = true;
        });
        logger.debug('shared-store-service', '🏗️ Initializing SharedStoreService');
    }
@@ -52,18 +57,16 @@ export class SharedStoreService {
    }
    private async checkAndSave(setLoadingState: (state: LoadingState) => void): Promise<void> {
-        const now = Date.now();
+        if (!this.isDirty) {
-        if (now - this.lastSaveTime >= this.config.saveInterval) {
+            return;
            const currentSnapshot = getSnapshot(this.store);
            const savedSnapshot = storageService.get(StorageKeys.LOCAL_SNAPSHOT);
            if (!savedSnapshot || JSON.stringify(currentSnapshot) !== JSON.stringify(savedSnapshot)) {
                logger.debug('shared-store-service', '💾 Auto-saving snapshot - changes detected');
                await this.saveSnapshot(currentSnapshot, setLoadingState);
                this.lastSaveTime = now;
            } else {
                logger.trace('shared-store-service', '📝 No changes detected, skipping auto-save');
        }
        this.isDirty = false;
        const now = Date.now();
        if (now - this.lastSaveTime >= this.config.saveInterval) {
            await this.saveSnapshot(getSnapshot(this.store), setLoadingState);
            this.lastSaveTime = now;
        }
    }
@@ -109,7 +112,10 @@ export class SharedStoreService {
    public clear(): void {
        this.stopAutoSave();
        this.dirtyListener?.();
        this.dirtyListener = null;
        this.store.clear();
        this.isDirty = false;
        logger.debug('shared-store-service', '🧹 Store cleared');
    }
 }
@@ -1,5 +1,5 @@
 // External imports
-import { TLStore, getSnapshot, Editor, loadSnapshot } from '@tldraw/tldraw';
+import { TLStore, getSnapshot, Editor, loadSnapshot, TLINSTANCE_ID } from '@tldraw/tldraw';
 import logger from '../../debugConfig';
 import { SharedStoreService } from './sharedStoreService';
@@ -109,17 +109,35 @@ export class NavigationSnapshotService {
                return;
            }
            // Sanitize session.currentPageId against pages actually in the document
            const docStore = (snap.document as { store?: Record<string, { typeName: string; id: string }> })?.store ?? {};
            const pageIds = Object.values(docStore).filter((r) => (r as { typeName: string }).typeName === 'page').map((r) => r.id);
            const session = snap.session as { currentPageId?: string } | undefined;
            if (session?.currentPageId && pageIds.length > 0 && !pageIds.includes(session.currentPageId)) {
                logger.warn('snapshot-service', '⚠️ session.currentPageId not in snapshot pages — resetting to first page', {
                    currentPageId: session.currentPageId, availablePages: pageIds
                });
                session.currentPageId = pageIds[0];
            }
            const snapshotCopy = {
                schemaVersion: snap.schemaVersion || (snap.document as { schema?: { schemaVersion?: unknown } })?.schema?.schemaVersion,
                document: snap.document,
                session: snap.session,
            };
            const targetStore = editor ? editor.store : store;
            try {
-                if (editor) {
+                loadSnapshot(targetStore, snapshotCopy as any);
-                    loadSnapshot(editor.store, snapshotCopy as Parameters<typeof loadSnapshot>[1]);
+                // Post-load validation: ensure instance.currentPageId is still valid
-                } else {
+                const instance = targetStore.get(TLINSTANCE_ID);
-                    loadSnapshot(store, snapshotCopy as Parameters<typeof loadSnapshot>[1]);
+                if (instance) {
                    const pages = targetStore.allRecords().filter((r) => (r as { typeName: string }).typeName === 'page');
                    const pageValid = pages.some((p) => p.id === instance.currentPageId);
                    if (!pageValid) {
                        logger.warn('snapshot-service', '⚠️ Post-load: currentPageId invalid — clearing corrupt store', { currentPageId: instance.currentPageId });
                        targetStore.clear();
                    }
                }
                logger.debug('snapshot-service', '✅ Snapshot loaded successfully');
            } catch (err) {
@@ -128,7 +146,8 @@ export class NavigationSnapshotService {
                if (isSchemaMigration) {
                    logger.debug('snapshot-service', 'ℹ️ Schema migration warning (non-critical)', { error: msg });
                } else {
-                    logger.warn('snapshot-service', '⚠️ Unexpected loadSnapshot error', { error: msg });
+                    logger.warn('snapshot-service', '⚠️ Unexpected loadSnapshot error — clearing store to allow fresh start', { error: msg });
                    targetStore.clear();
                }
            }
@@ -1,3 +1,16 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import '@testing-library/jest-dom';
 import { expect } from 'vitest';
 if (typeof globalThis.matchMedia !== 'function') {
  vi.stubGlobal('matchMedia', () => ({
    matches: false,
    media: '',
    onchange: null,
    addListener: () => {},
    removeListener: () => {},
    addEventListener: () => {},
    removeEventListener: () => {},
    dispatchEvent: () => false,
  } as unknown as MediaQueryList))
 }
@@ -0,0 +1,233 @@
 /*
 * tailwind-compat.css
 * Minimal CSS shim replacing the Tailwind build pipeline.
 * Covers only the utility classes actually used in this codebase.
 * Generated from grep audit of 8 affected files (B3 Tailwind removal sprint).
 * Over time, replace these with --cc-* tokens or MUI sx props and remove entries.
 */
 /* ── Layout ─────────────────────────────────────────────────────────────── */
 .flex { display: flex; }
 .grid { display: grid; }
 .inline-flex { display: inline-flex; }
 .inline-block { display: inline-block; }
 .block { display: block; }
 .hidden { display: none; }
 .flex-col { flex-direction: column; }
 .flex-wrap { flex-wrap: wrap; }
 .flex-1 { flex: 1 1 0%; }
 .flex-shrink-0 { flex-shrink: 0; }
 .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
 .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .items-center { align-items: center; }
 .items-start  { align-items: flex-start; }
 .items-end    { align-items: flex-end; }
 .justify-between { justify-content: space-between; }
 .justify-center  { justify-content: center; }
 .justify-end     { justify-content: flex-end; }
 .justify-start   { justify-content: flex-start; }
 /* ── Position ───────────────────────────────────────────────────────────── */
 .relative { position: relative; }
 .absolute { position: absolute; }
 .fixed    { position: fixed; }
 .sticky   { position: sticky; }
 /* ── Spacing — gap ──────────────────────────────────────────────────────── */
 .gap-1 { gap: 0.25rem; }
 .gap-2 { gap: 0.5rem; }
 .gap-3 { gap: 0.75rem; }
 .gap-4 { gap: 1rem; }
 .gap-6 { gap: 1.5rem; }
 /* ── Spacing — padding ──────────────────────────────────────────────────── */
 .p-0  { padding: 0; }
 .p-2  { padding: 0.5rem; }
 .p-4  { padding: 1rem; }
 .p-5  { padding: 1.25rem; }
 .p-6  { padding: 1.5rem; }
 .p-12 { padding: 3rem; }
 .px-2 { padding-left: 0.5rem;  padding-right: 0.5rem; }
 .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
 .px-4 { padding-left: 1rem;    padding-right: 1rem; }
 .px-6 { padding-left: 1.5rem;  padding-right: 1.5rem; }
 .px-8 { padding-left: 2rem;    padding-right: 2rem; }
 .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
 .py-2 { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
 .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
 .py-4 { padding-top: 1rem;    padding-bottom: 1rem; }
 .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
 .py-6 { padding-top: 1.5rem;  padding-bottom: 1.5rem; }
 .py-8 { padding-top: 2rem;    padding-bottom: 2rem; }
 .py-12{ padding-top: 3rem;    padding-bottom: 3rem; }
 .py-16{ padding-top: 4rem;    padding-bottom: 4rem; }
 .pt-4 { padding-top: 1rem; }
 .pl-10{ padding-left: 2.5rem; }
 .pr-4 { padding-right: 1rem; }
 /* ── Spacing — margin ───────────────────────────────────────────────────── */
 .mt-0 { margin-top: 0; }
 .mt-1 { margin-top: 0.25rem; }
 .mt-2 { margin-top: 0.5rem; }
 .mt-4 { margin-top: 1rem; }
 .mt-8 { margin-top: 2rem; }
 .mb-1 { margin-bottom: 0.25rem; }
 .mb-2 { margin-bottom: 0.5rem; }
 .mb-3 { margin-bottom: 0.75rem; }
 .mb-4 { margin-bottom: 1rem; }
 .mb-6 { margin-bottom: 1.5rem; }
 .mb-8 { margin-bottom: 2rem; }
 .ml-2 { margin-left: 0.5rem; }
 .ml-4 { margin-left: 1rem; }
 .mr-1 { margin-right: 0.25rem; }
 .mr-2 { margin-right: 0.5rem; }
 .my-8 { margin-top: 2rem; margin-bottom: 2rem; }
 /* ── Space-between children ─────────────────────────────────────────────── */
 .space-x-2 > * + * { margin-left: 0.5rem; }
 .space-y-3 > * + * { margin-top: 0.75rem; }
 .space-y-4 > * + * { margin-top: 1rem; }
 .space-y-8 > * + * { margin-top: 2rem; }
 /* ── Sizing ─────────────────────────────────────────────────────────────── */
 .w-0    { width: 0; }
 .w-4    { width: 1rem; }
 .w-8    { width: 2rem; }
 .w-10   { width: 2.5rem; }
 .w-12   { width: 3rem; }
 .w-16   { width: 4rem; }
 .w-full { width: 100%; }
 .h-4    { height: 1rem; }
 .h-8    { height: 2rem; }
 .h-10   { height: 2.5rem; }
 .h-12   { height: 3rem; }
 .h-64   { height: 16rem; }
 .h-full { height: 100%; }
 .min-h-screen { min-height: 100vh; }
 .max-w-md  { max-width: 28rem; }
 .max-w-4xl { max-width: 56rem; }
 .max-w-6xl { max-width: 72rem; }
 .max-w-7xl { max-width: 80rem; }
 /* ── Typography ─────────────────────────────────────────────────────────── */
 .text-xs  { font-size: 0.75rem;  line-height: 1rem; }
 .text-sm  { font-size: 0.875rem; line-height: 1.25rem; }
 .text-lg  { font-size: 1.125rem; line-height: 1.75rem; }
 .text-xl  { font-size: 1.25rem;  line-height: 1.75rem; }
 .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
 .font-medium   { font-weight: 500; }
 .font-semibold { font-weight: 600; }
 .font-bold     { font-weight: 700; }
 .text-center { text-align: center; }
 .text-left   { text-align: left; }
 .text-right  { text-align: right; }
 .uppercase   { text-transform: uppercase; }
 .capitalize  { text-transform: capitalize; }
 .truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* ── Colours — text ─────────────────────────────────────────────────────── */
 .text-white      { color: #ffffff; }
 .text-gray-300   { color: #d1d5db; }
 .text-gray-400   { color: #9ca3af; }
 .text-gray-500   { color: #6b7280; }
 .text-gray-600   { color: #4b5563; }
 .text-gray-700   { color: #374151; }
 .text-gray-900   { color: #111827; }
 .text-blue-600   { color: #2563eb; }
 .text-blue-700   { color: #1d4ed8; }
 .text-red-600    { color: #dc2626; }
 .text-red-700    { color: #b91c1c; }
 .text-red-800    { color: #991b1b; }
 .text-green-600  { color: #16a34a; }
 .text-green-700  { color: #15803d; }
 .text-purple-600 { color: #9333ea; }
 .text-purple-700 { color: #7e22ce; }
 .text-yellow-700 { color: #a16207; }
 /* ── Colours — background ───────────────────────────────────────────────── */
 .bg-white        { background-color: #ffffff; }
 .bg-transparent  { background-color: transparent; }
 .bg-gray-50      { background-color: #f9fafb; }
 .bg-gray-100     { background-color: #f3f4f6; }
 .bg-gray-500     { background-color: #6b7280; }
 .bg-blue-50      { background-color: #eff6ff; }
 .bg-blue-100     { background-color: #dbeafe; }
 .bg-blue-600     { background-color: #2563eb; }
 .bg-red-50       { background-color: #fef2f2; }
 .bg-red-100      { background-color: #fee2e2; }
 .bg-red-600      { background-color: #dc2626; }
 .bg-green-100    { background-color: #dcfce7; }
 .bg-purple-100   { background-color: #f3e8ff; }
 .bg-yellow-100   { background-color: #fef9c3; }
 /* ── Borders ────────────────────────────────────────────────────────────── */
 .border             { border-width: 1px; border-style: solid; }
 .border-t           { border-top-width: 1px; border-top-style: solid; }
 .border-b           { border-bottom-width: 1px; border-bottom-style: solid; }
 .border-2           { border-width: 2px; border-style: solid; }
 .border-transparent { border-color: transparent; }
 .border-gray-100    { border-color: #f3f4f6; }
 .border-gray-200    { border-color: #e5e7eb; }
 .border-gray-300    { border-color: #d1d5db; }
 .border-blue-500    { border-color: #3b82f6; }
 .border-blue-600    { border-color: #2563eb; }
 .border-red-200     { border-color: #fecaca; }
 /* ── Border radius ──────────────────────────────────────────────────────── */
 .rounded      { border-radius: 0.25rem; }
 .rounded-md   { border-radius: 0.375rem; }
 .rounded-lg   { border-radius: 0.5rem; }
 .rounded-xl   { border-radius: 0.75rem; }
 .rounded-full { border-radius: 9999px; }
 /* ── Shadows ────────────────────────────────────────────────────────────── */
 .shadow    { box-shadow: 0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px -1px rgb(0 0 0/.1); }
 .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0/.05); }
 .shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1); }
 .shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1); }
 .shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1); }
 /* ── Overflow / z-index ─────────────────────────────────────────────────── */
 .overflow-hidden  { overflow: hidden; }
 .overflow-y-auto  { overflow-y: auto; }
 .z-50             { z-index: 50; }
 /* ── Misc ───────────────────────────────────────────────────────────────── */
 .opacity-50       { opacity: 0.5; }
 .opacity-75       { opacity: 0.75; }
 .cursor-not-allowed { cursor: not-allowed; }
 /* ── Pseudo-classes ─────────────────────────────────────────────────────── */
 .hover\:bg-gray-50:hover   { background-color: #f9fafb; }
 .hover\:bg-gray-100:hover  { background-color: #f3f4f6; }
 .hover\:bg-blue-200:hover  { background-color: #bfdbfe; }
 .hover\:bg-blue-700:hover  { background-color: #1d4ed8; }
 .hover\:bg-green-200:hover { background-color: #bbf7d0; }
 .hover\:bg-red-200:hover   { background-color: #fecaca; }
 .hover\:bg-red-700:hover   { background-color: #b91c1c; }
 .hover\:text-gray-500:hover { color: #6b7280; }
 .hover\:text-gray-700:hover { color: #374151; }
 .hover\:text-gray-800:hover { color: #1f2937; }
 .hover\:text-blue-600:hover { color: #2563eb; }
 .hover\:text-red-800:hover  { color: #991b1b; }
 .hover\:border-blue-300:hover { border-color: #93c5fd; }
 .focus\:outline-none:focus { outline: none; }
 .focus\:ring-2:focus       { box-shadow: 0 0 0 2px #3b82f6; }
 .disabled\:opacity-50:disabled { opacity: 0.5; }
@@ -0,0 +1,142 @@
 /**
 * Exam-marker types — mirror the FastAPI /api/exam contract (see api routers/exam/schemas.py).
 * Supabase is source of truth for this operational data; the graph (cc.public.exams) joins by
 * the shared UUIDs (template/question/region ids, exam_code).
 */
 export type ExamTemplateStatus = 'draft' | 'ready' | 'archived';
 export interface ExamTemplate {
  id: string;
  title: string;
  subject: string | null;
  exam_id: string | null;
  exam_code: string | null;
  source_file_id: string | null;
  page_count: number | null;
  institute_id: string;
  teacher_id: string;
  status: ExamTemplateStatus;
  created_at: string;
  updated_at: string;
 }
 export interface CreateTemplatePayload {
  title: string;
  subject?: string;
  exam_id?: string;
  exam_code?: string;
  source_file_id?: string;
  page_count?: number;
  institute_id?: string;
 }
 export interface UpdateTemplateMetaPayload {
  title?: string;
  subject?: string | null;
  page_count?: number | null;
  status?: ExamTemplateStatus;
 }
 /** Canvas children (used from S4-9 onward; defined here so the seam is complete). */
 export interface ExamQuestion {
  id: string;
  template_id: string;
  parent_id: string | null;
  label: string;
  order: number;
  max_marks: number;
  answer_type: string | null;
  mcq_options: unknown | null;
  mark_scheme: Record<string, unknown>;
  is_container: boolean;
  spec_ref: string | null;
  bounds?: Record<string, number> | null;
  page?: number | null;
 }
 export type ExamResponseAreaKind =
  | 'response'
  | 'context'
  | 'question_number'
  | 'mark_area'
  | 'reference'
  | 'furniture';
 export interface ExamResponseArea {
  id: string;
  question_id: string;
  template_id: string;
  page: number;
  bounds: Record<string, number>;
  kind: ExamResponseAreaKind;
  response_form: string | null;
  context_type?: string | null;
  source: 'manual' | 'ai';
  confirmed: boolean;
  confidence: number | null;
 }
 export interface ExamBoundary {
  id: string;
  template_id: string;
  question_id: string | null;
  label: string | null;
  page_index: number;
  y: number;
  bounds: Record<string, number> | null;
  source: 'manual' | 'ai';
  confirmed: boolean;
 }
 export interface ExamTemplateDetail extends ExamTemplate {
  questions: ExamQuestion[];
  response_areas: ExamResponseArea[];
  boundaries: ExamBoundary[];
 }
 export interface TemplateReplacePayload {
  meta?: {
    title?: string;
    subject?: string;
    page_count?: number;
    status?: ExamTemplateStatus;
  };
  questions: Array<{
    id?: string;
    parent_id?: string | null;
    label: string;
    order?: number;
    max_marks?: number;
    answer_type?: 'written' | 'mcq' | 'short' | 'diagram' | null;
    mcq_options?: unknown | null;
    mark_scheme?: Record<string, unknown>;
    is_container?: boolean;
    spec_ref?: string | null;
    bounds?: Record<string, number> | null;
    page?: number | null;
  }>;
  response_areas: Array<{
    id?: string;
    question_id: string;
    page: number;
    bounds: Record<string, number>;
    kind: ExamResponseArea['kind'];
    response_form?: string | null;
    context_type?: string | null;
    source?: 'manual' | 'ai';
    confirmed?: boolean;
    confidence?: number | null;
  }>;
  boundaries: Array<{
    id?: string;
    question_id?: string | null;
    label?: string | null;
    page_index: number;
    y: number;
    bounds?: Record<string, number> | null;
    source?: 'manual' | 'ai';
    confirmed?: boolean;
  }>;
 }
@@ -0,0 +1,49 @@
 import { describe, expect, it } from 'vitest'
 import type { ExamTemplateDetail } from '../../types/exam.types'
 import { isUuid, 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,
  institute_id: 'inst', teacher_id: 'teacher', status: 'draft', created_at: 'now', updated_at: 'now', questions: [], response_areas: [], boundaries: [],
 }
 describe('exam setup canvas serialization', () => {
  it('pairs boundaries into a main question, attaches a Part, and attaches a response by containment', () => {
    const payload = serializeCanvasShapes(template, [
      { id: 'b-top', kind: 'boundary', x: 40, y: 100, w: 700, h: 8, label: 'Q1 start' },
      { id: 'b-bottom', kind: 'boundary', x: 40, y: 700, w: 700, h: 8, label: 'Q1 end' },
      { id: 'part-1', kind: 'part', x: 100, y: 180, w: 400, h: 220, label: 'Q1(a)', maxMarks: 3 },
      { id: 'resp-1', kind: 'response', x: 130, y: 250, w: 300, h: 90, responseForm: 'lines' },
    ])
    const main = payload.questions.find((q) => q.is_container)
    const part = payload.questions.find((q) => !q.is_container)
    expect(main?.label).toBe('Q1')
    expect(part?.parent_id).toBe(main?.id)
    expect(part?.bounds).toEqual({ x: 100, y: 180, w: 400, h: 220 })
    expect(payload.response_areas[0]).toMatchObject({ question_id: part?.id, kind: 'response', response_form: 'lines' })
    expect(payload.boundaries).toHaveLength(2)
    expect(payload.boundaries.every((b) => b.question_id === main?.id)).toBe(true)
    expect(payload.questions.every((q) => isUuid(q.id))).toBe(true)
    expect(payload.response_areas.every((r) => isUuid(r.id))).toBe(true)
    expect(payload.boundaries.every((b) => isUuid(b.id))).toBe(true)
  })
  it('round-trips saved Part geometry and all S4-9 region kinds from API detail', () => {
    const shapes = shapesFromTemplate({
      ...template,
      questions: [
        { id: 'q1', template_id: 'tpl-1', parent_id: null, label: 'Q1', order: 0, max_marks: 0, answer_type: null, mcq_options: null, mark_scheme: {}, is_container: true, spec_ref: null },
        { id: 'p1', template_id: 'tpl-1', parent_id: 'q1', label: 'Q1(a)', order: 0, max_marks: 2, answer_type: 'written', mcq_options: null, mark_scheme: {}, is_container: false, spec_ref: null, bounds: { x: 1, y: 2, w: 3, h: 4 }, page: 1 },
      ],
      response_areas: [
        { id: 'r1', question_id: 'p1', template_id: 'tpl-1', page: 1, bounds: { x: 10, y: 20, w: 30, h: 40 }, kind: 'response', response_form: 'lines', source: 'manual', confirmed: true, confidence: null },
        { id: 'f1', question_id: 'p1', template_id: 'tpl-1', page: 1, bounds: { x: 11, y: 21, w: 31, h: 41 }, kind: 'furniture', response_form: null, source: 'manual', confirmed: true, confidence: null },
      ],
      boundaries: [{ id: 'b1', template_id: 'tpl-1', question_id: 'q1', label: 'Q1 start', page_index: 0, y: 100, bounds: { x: 0, y: 100, w: 700, h: 8 }, source: 'manual', confirmed: true }],
    })
    expect(shapes.map((s) => s.kind).sort()).toEqual(['boundary', 'furniture', 'part', 'response'])
    expect(shapes.find((s) => s.kind === 'part')).toMatchObject({ id: 'p1', x: 1, y: 2, w: 3, h: 4 })
  })
 })
@@ -0,0 +1,129 @@
 import type { ExamTemplateDetail, TemplateReplacePayload } from '../../types/exam.types'
 export const PAGE_HEIGHT = 1100
 export const PAGE_WIDTH = 780
 export type ExamCanvasRegionKind = 'response' | 'context' | 'question_number' | 'mark_area' | 'reference' | 'furniture'
 export type ExamCanvasShapeKind = 'boundary' | 'part' | ExamCanvasRegionKind
 export interface CanvasBounds { x: number; y: number; w: number; h: number }
 export interface ExamCanvasShapeModel {
  /** Stable domain UUID persisted to Supabase. Do not reuse tldraw shape ids for new shapes. */
  id: string
  kind: ExamCanvasShapeKind
  x: number
  y: number
  w: number
  h: number
  label?: string
  maxMarks?: number
  answerType?: 'written' | 'mcq' | 'short' | 'diagram'
  responseForm?: 'lines' | 'answer-box' | 'working' | 'diagram' | 'tick-boxes' | 'table' | 'blanks'
  contextType?: string
  questionId?: string | null
 }
 export function pageForY(y: number): number {
  return Math.max(1, Math.floor(y / PAGE_HEIGHT) + 1)
 }
 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)
 }
 export function newDomainId(): string {
  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
    return crypto.randomUUID()
  }
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
    const r = Math.floor(Math.random() * 16)
    const v = c === 'x' ? r : (r % 4) + 8
    return v.toString(16)
  })
 }
 function bounds(shape: Pick<ExamCanvasShapeModel, 'x' | 'y' | 'w' | 'h'>): CanvasBounds {
  return { x: shape.x, y: shape.y, w: shape.w, h: shape.h }
 }
 function contains(outer: CanvasBounds, inner: CanvasBounds): boolean {
  const ox2 = outer.x + outer.w
  const oy2 = outer.y + outer.h
  const ix2 = inner.x + inner.w
  const iy2 = inner.y + inner.h
  return inner.x >= outer.x && inner.y >= outer.y && ix2 <= ox2 && iy2 <= oy2
 }
 function bandContains(top: ExamCanvasShapeModel, bottom: ExamCanvasShapeModel, shape: ExamCanvasShapeModel): boolean {
  const minY = Math.min(top.y, bottom.y)
  const maxY = Math.max(top.y, bottom.y)
  const cy = shape.y + shape.h / 2
  return cy >= minY && cy <= maxY
 }
 export function serializeCanvasShapes(template: ExamTemplateDetail, shapes: ExamCanvasShapeModel[]): TemplateReplacePayload {
  const orderedBoundaries = shapes
    .filter((s) => s.kind === 'boundary')
    .sort((a, b) => (pageForY(a.y) - pageForY(b.y)) || (a.y - b.y))
  const parts = shapes.filter((s) => s.kind === 'part')
  const regions = shapes.filter((s) => s.kind !== 'boundary' && s.kind !== 'part')
  const questions: TemplateReplacePayload['questions'] = []
  const boundaries: TemplateReplacePayload['boundaries'] = []
  const bands: Array<{ questionId: string; top: ExamCanvasShapeModel; bottom: ExamCanvasShapeModel }> = []
  for (let i = 0; i < orderedBoundaries.length; i += 2) {
    const top = orderedBoundaries[i]
    const bottom = orderedBoundaries[i + 1]
    if (!top || !bottom) break
    const qNum = bands.length + 1
    const questionId = isUuid(top.questionId) ? top.questionId : isUuid(bottom.questionId) ? bottom.questionId : newDomainId()
    const label = top.label?.replace(/\s+(start|end)$/i, '') || bottom.label?.replace(/\s+(start|end)$/i, '') || `Q${qNum}`
    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 })
    }
  }
  const partQuestionIds = new Map<string, string>()
  parts.sort((a, b) => (a.y - b.y) || (a.x - b.x)).forEach((part, index) => {
    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) })
  })
  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 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 })
  }
  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[] {
  const shapes: ExamCanvasShapeModel[] = []
  const questions = new Map(detail.questions.map((q) => [q.id, q]))
  for (const b of detail.boundaries ?? []) {
    const bb = b.bounds ?? { x: 48, y: b.y, w: PAGE_WIDTH - 96, h: 8 }
    shapes.push({ id: b.id, kind: 'boundary', x: Number(bb.x ?? 48), y: Number(bb.y ?? b.y), w: Number(bb.w ?? PAGE_WIDTH - 96), h: Number(bb.h ?? 8), label: b.label ?? undefined, questionId: b.question_id })
  }
  for (const q of detail.questions ?? []) {
    if (q.is_container || !q.bounds) continue
    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 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 })
  }
  return shapes
 }
@@ -1,7 +1,6 @@
 import React from 'react'
 import { BaseBoxShapeUtil, HTMLContainer, toDomPrecision } from '@tldraw/tldraw'
 import { CCBaseShape } from './cc-types'
 import { CC_BASE_STYLE_CONSTANTS } from './cc-styles'
 import { logger } from '../../../debugConfig'
 export interface ToolbarItem {
@@ -40,44 +39,32 @@ export abstract class CCBaseShapeUtil<T extends CCBaseShape> extends BaseBoxShap
  component(shape: T) {
    const {
-      props: { w, h, isLocked },
+      props: { w, h, isLocked, headerColor },
    } = shape
    const toolbarItems = this.getToolbarItems(shape)
    return (
      <HTMLContainer
        id={shape.id}
        className="cc-shape-container"
        style={{
          width: toDomPrecision(w),
          height: toDomPrecision(h),
-          backgroundColor: shape.props.headerColor,
+          '--shape-header-color': headerColor,
-          borderRadius: CC_BASE_STYLE_CONSTANTS.CONTAINER.borderRadius,
+        } as React.CSSProperties}
          boxShadow: CC_BASE_STYLE_CONSTANTS.CONTAINER.boxShadow,
          overflow: 'hidden',
          position: 'relative',
        }}
      >
        {/* Header */}
        <div
-          style={{
+          className="cc-shape-header"
-            backgroundColor: shape.props.headerColor,
+          style={{ cursor: isLocked ? 'not-allowed' : 'move' }}
            padding: CC_BASE_STYLE_CONSTANTS.HEADER.padding,
            height: CC_BASE_STYLE_CONSTANTS.HEADER.height,
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            cursor: isLocked ? 'not-allowed' : 'move',
            pointerEvents: 'all',
            position: 'relative',
            zIndex: 1,
          }}
        >
-          <span style={{ color: 'white', fontWeight: 'bold' }}>{shape.props.title}</span>
+          <span className="shape-title">{shape.props.title}</span>
-          <div style={{ display: 'flex', gap: '4px', alignItems: 'center', pointerEvents: 'all' }}>
+          <div className="cc-shape-toolbar">
            {toolbarItems.map((item) => (
              <button
                key={item.id}
                title={item.label}
                style={{ opacity: item.isActive ? 1 : 0.7 }}
                onClick={(e) => {
                  logger.info('cc-base-shape-util', 'toolbar item clicked', item.id)
                  e.preventDefault()
@@ -89,46 +76,19 @@ export abstract class CCBaseShapeUtil<T extends CCBaseShape> extends BaseBoxShap
                  e.preventDefault()
                  e.stopPropagation()
                }}
                style={{
                  background: 'transparent',
                  border: 'none',
                  padding: '4px',
                  cursor: 'pointer',
                  color: 'white',
                  opacity: item.isActive ? 1 : 0.7,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  pointerEvents: 'all',
                  fontSize: '16px',
                  width: '24px',
                  height: '24px',
                  zIndex: 100,
                  userSelect: 'none',
                  position: 'relative',
                  touchAction: 'none',
                }}
              >
                <div style={{ pointerEvents: 'none' }}>
                  {item.icon}
                </div>
              </button>
            ))}
-            {isLocked && <span style={{ color: 'white' }}>🔒</span>}
+            {isLocked && <span style={{ color: 'var(--cc-text-inverse)' }}>🔒</span>}
          </div>
        </div>
        {/* Content */}
        <div
-          style={{
+          className="cc-shape-content"
-            position: 'absolute',
+          style={{ backgroundColor: shape.props.backgroundColor }}
            top: CC_BASE_STYLE_CONSTANTS.HEADER.height,
            left: 0,
            right: 0,
            bottom: 0,
            overflow: 'auto',
            padding: CC_BASE_STYLE_CONSTANTS.CONTENT.padding,
            backgroundColor: shape.props.backgroundColor,
          }}
        >
          {this.renderContent(shape)}
        </div>
@@ -17,10 +17,16 @@ export class CCTimetableLessonNodeShapeUtil extends CCBaseShapeUtil<CCTimetableL
  getDefaultProps(): CCTimetableLessonNodeShape['props'] {
    const defaultProps = getDefaultCCTimetableLessonNodeProps()
    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCTimetableLessonNodeShapeUtil.type]]
    return {
      ...defaultProps,
-      headerColor: theme.headerColor,
+      headerColor: '',
      school_db_name: '',
      school_period_id: '',
      subject_class: '',
      date: '',
      start_time: '',
      end_time: '',
      period_code: '',
    }
  }
@@ -543,6 +543,8 @@ export const getDefaultCCTimetableLessonNodeProps = () => ({
  start_time: '',
  end_time: '',
  period_code: '',
  school_db_name: '',
  school_period_id: '',
 })
 export const getDefaultCCPlannedLessonNodeProps = () => ({
@@ -22,7 +22,6 @@ import { CCSubjectNodeShape, CCSubjectNodeShapeUtil } from './CCSubjectNodeShape
 import { CCTopicNodeShape, CCTopicNodeShapeUtil } from './CCTopicNodeShapeUtil'
 import { CCTopicLessonNodeShape, CCTopicLessonNodeShapeUtil } from './CCTopicLessonNodeShapeUtil'
 import { CCLearningStatementNodeShape, CCLearningStatementNodeShapeUtil } from './CCLearningStatementNodeShapeUtil'
 import { CCScienceLabNodeShape, CCScienceLabNodeShapeUtil } from './CCScienceLabNodeShapeUtil'
 import { CCSchoolTimetableNodeShape, CCSchoolTimetableNodeShapeUtil } from './CCSchoolTimetableNodeShapeUtil'
 import { CCAcademicYearNodeShape, CCAcademicYearNodeShapeUtil } from './CCAcademicYearNodeShapeUtil'
 import { CCAcademicTermNodeShape, CCAcademicTermNodeShapeUtil } from './CCAcademicTermNodeShapeUtil'
@@ -31,12 +30,11 @@ import { CCAcademicDayNodeShape, CCAcademicDayNodeShapeUtil } from './CCAcademic
 import { CCAcademicPeriodNodeShape, CCAcademicPeriodNodeShapeUtil } from './CCAcademicPeriodNodeShapeUtil'
 import { CCRegistrationPeriodNodeShape, CCRegistrationPeriodNodeShapeUtil } from './CCRegistrationPeriodNodeShapeUtil'
 import { CCTeacherTimetableNodeShape, CCTeacherTimetableNodeShapeUtil } from './CCTeacherTimetableNodeShapeUtil'
 import { CCTimetableLessonNodeShape, CCTimetableLessonNodeShapeUtil } from './CCTimetableLessonNodeShapeUtil'
 import { CCPlannedLessonNodeShape, CCPlannedLessonNodeShapeUtil } from './CCPlannedLessonNodeShapeUtil'
 import { CCDepartmentStructureNodeShape, CCDepartmentStructureNodeShapeUtil } from './CCDepartmentStructureNodeShapeUtil'
 import { CCUserTeacherTimetableNodeShape, CCUserTeacherTimetableNodeShapeUtil } from './CCUserTeacherTimetableNodeShapeUtil'
-import { CCTimetableLessonNodeShape, CCTimetableLessonNodeShapeUtil } from './CCTimetableLessonNodeShapeUtil'
+import { CCTimetableLessonNodeShape, CCTimetableLessonNodeShapeUtil } from './CCUserTimetableLessonNodeShapeUtil'
-
+import { CCScienceLabNodeShape, CCScienceLabNodeShapeUtil } from './CCScienceLabNodeShapeUtil'
 // Create a const object with all node types
 export const NODE_SHAPE_TYPES = {
    USER: CCUserNodeShapeUtil.type,
@@ -118,8 +116,7 @@ export type AllNodeShapes =
    | CCTimetableLessonNodeShape
    | CCPlannedLessonNodeShape
    | CCDepartmentStructureNodeShape
-    | CCUserTeacherTimetableNodeShape
+    | CCUserTeacherTimetableNodeShape;
    | CCTimetableLessonNodeShape;
 // Export all shape utils in an object for easy access
 export const ShapeUtils = {
@@ -159,7 +156,6 @@ export const ShapeUtils = {
    [CCPlannedLessonNodeShapeUtil.type]: CCPlannedLessonNodeShapeUtil,
    [CCDepartmentStructureNodeShapeUtil.type]: CCDepartmentStructureNodeShapeUtil,
    [CCUserTeacherTimetableNodeShapeUtil.type]: CCUserTeacherTimetableNodeShapeUtil,
    [CCTimetableLessonNodeShapeUtil.type]: CCTimetableLessonNodeShapeUtil,
 } as const;
 // Add a type guard to check if a shape is a valid node shape
@@ -0,0 +1,441 @@
 /**
 * Unit tests for CCLiveTranscriptionShapeUtil
 *
 * Intended production location:
 *   src/utils/tldraw/cc-base/cc-transcription/CCLiveTranscriptionShapeUtil.test.ts
 *
 * Run from classroom-copilot-app root:
 *   npx vitest run transcription-shape
 */
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { Editor, createShapeId, createTLStore } from '@tldraw/tldraw'
 import { CCLiveTranscriptionShapeUtil, type CCLiveTranscriptionShape, type TranscriptionSegment } from './CCLiveTranscriptionShapeUtil'
 import { CCSlideShapeUtil } from '../cc-slideshow/CCSlideShapeUtil'
 import { CCSlideShowShapeUtil } from '../cc-slideshow/CCSlideShowShapeUtil'
 import { getDefaultCCLiveTranscriptionProps } from '../cc-props'
 // ─── Mock TranscriptionManager ──────────────────────────────────────────────
 // Must be hoisted before the module under test is imported in a real project.
 // Here we patch the module directly since we control the import order.
 // Declare symbols before vi.mock so hoisting/factory capture stays consistent.
 const mockStartTranscription = () => {}
 const mockStopTranscription  = () => {}
 vi.mock('./TranscriptionManager', () => {
  const start = vi.fn()
  const stop  = vi.fn()
  Object.assign(globalThis, { __mockStartTranscription: start, __mockStopTranscription: stop })
  return {
    TranscriptionManager: {
      getManager: vi.fn().mockReturnValue({ startTranscription: start, stopTranscription: stop }),
    },
  }
 })
 const sm = () => (globalThis as unknown as Record<string, any>).__mockStartTranscription
 const st = () => (globalThis as unknown as Record<string, any>).__mockStopTranscription
 const clearMocks = () => { sm().mockClear(); st().mockClear() }
 // Provide a minimal matchMedia so tldraw's UserPreferencesManager
 // can call addEventListener/removeEventListener in jsdom.
 if (typeof globalThis.matchMedia !== 'function') {
  vi.stubGlobal('matchMedia', () => ({
    matches: false,
    media: '',
    onchange: null,
    addEventListener: () => {},
    removeEventListener: () => {},
    addListener: () => {},
    removeListener: () => {},
    dispatchEvent: () => false,
  } as unknown as MediaQueryList))
 }
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 /** Minimal shape utils needed to boot the Editor for transcription tests. */
 const shapeUtils = [CCLiveTranscriptionShapeUtil, CCSlideShapeUtil, CCSlideShowShapeUtil]
 function makeEditor(): Editor {
  const store = createTLStore({ shapeUtils, bindingUtils: [] })
  return new Editor({
    shapeUtils,
    bindingUtils: [],
    tools: [],
    store,
    getContainer: () => document.body,
  })
 }
 /** Create a transcription shape with optional prop overrides and return its id. */
 function createTranscriptionShape(
  editor: Editor,
  overrides: Partial<CCLiveTranscriptionShape['props']> = {}
 ) {
  const id = createShapeId()
  editor.createShape<CCLiveTranscriptionShape>({
    id,
    type: 'cc-live-transcription',
    x: 0,
    y: 0,
    props: {
      ...getDefaultCCLiveTranscriptionProps(),
      ...overrides,
    } as CCLiveTranscriptionShape['props'],
  })
  return id
 }
 /** Typed getter for the shape record. */
 function getShape(editor: Editor, id: ReturnType<typeof createShapeId>) {
  return editor.getShape<CCLiveTranscriptionShape>(id)!
 }
 /** Build a finished TranscriptionSegment fixture. */
 function makeSegment(text: string, overrides: Partial<TranscriptionSegment> = {}): TranscriptionSegment {
  return {
    id: crypto.randomUUID(),
    text,
    completed: true,
    start: '0.000',
    end: '1.000',
    ...overrides,
  }
 }
 // ─── Test Suite ──────────────────────────────────────────────────────────────
 describe('CCLiveTranscriptionShapeUtil', () => {
  let editor: Editor
  let util: CCLiveTranscriptionShapeUtil
  beforeEach(() => {
    editor = makeEditor()
    util   = editor.getShapeUtil<CCLiveTranscriptionShapeUtil>('cc-live-transcription')
    clearMocks()
  })
  afterEach(() => {
    editor.dispose()
  })
  // ── getDefaultProps ─────────────────────────────────────────────────────
  describe('getDefaultProps()', () => {
    it('returns the expected default structure', () => {
      const defaults = util.getDefaultProps()
      expect(defaults).toMatchObject({
        isRecording:           false,
        segments:              [],
        currentSegment:        undefined,
        lastProcessedSegment:  undefined,
      })
      // Base props present
      expect(typeof defaults.title).toBe('string')
      expect(typeof defaults.w).toBe('number')
      expect(typeof defaults.h).toBe('number')
      expect(typeof defaults.headerColor).toBe('string')
      expect(typeof defaults.backgroundColor).toBe('string')
      expect(defaults.isLocked).toBe(false)
    })
    it('segments array is empty, not null or undefined', () => {
      const { segments } = util.getDefaultProps()
      expect(Array.isArray(segments)).toBe(true)
      expect(segments).toHaveLength(0)
    })
  })
  // ── updateText — unconfirmed (live partial) ─────────────────────────────
  describe('updateText() — unconfirmed segment (isConfirmed = false)', () => {
    it('updates only currentSegment, does not touch the segments array', () => {
      const id = createTranscriptionShape(editor, { isRecording: true })
      util.updateText(id, 'hello wor', false, { start: 0, end: 0.8 })
      const shape = getShape(editor, id)
      expect(shape.props.segments).toHaveLength(0)
      expect(shape.props.currentSegment).toMatchObject({
        text: 'hello wor',
        completed: false,
      })
    })
    it('overwrites currentSegment when called again with new partial text', () => {
      const id = createTranscriptionShape(editor, { isRecording: true })
      util.updateText(id, 'hello wor', false, { start: 0, end: 0.8 })
      util.updateText(id, 'hello world',  false, { start: 0, end: 1.2 })
      const shape = getShape(editor, id)
      expect(shape.props.currentSegment?.text).toBe('hello world')
      expect(shape.props.segments).toHaveLength(0)
    })
    it('does NOT call updateShape when the partial text is unchanged', () => {
      const id = createTranscriptionShape(editor, {
        isRecording: true,
        currentSegment: makeSegment('same text', { completed: false }),
      })
      const spy = vi.spyOn(editor, 'updateShape')
      util.updateText(id, 'same text', false, { start: 0, end: 1.0 })
      expect(spy).not.toHaveBeenCalled()
      spy.mockRestore()
    })
  })
  // ── updateText — confirmed (completed) segment ─────────────────────────
  describe('updateText() — confirmed segment (isConfirmed = true)', () => {
    it('appends to segments array when text is new', () => {
      const id = createTranscriptionShape(editor, { isRecording: true })
      util.updateText(id, 'First sentence.', true, { start: 0, end: 2.1 })
      const shape = getShape(editor, id)
      expect(shape.props.segments).toHaveLength(1)
      expect(shape.props.segments[0]).toMatchObject({
        text:      'First sentence.',
        completed: true,
        start:     '0.000',
        end:       '2.100',
      })
    })
    it('updates lastProcessedSegment to the confirmed text', () => {
      const id = createTranscriptionShape(editor, { isRecording: true })
      util.updateText(id, 'Second sentence.', true, { start: 2, end: 4 })
      expect(getShape(editor, id).props.lastProcessedSegment).toBe('Second sentence.')
    })
    it('clears currentSegment when its text matches the confirmed text', () => {
      const id = createTranscriptionShape(editor, {
        isRecording: true,
        currentSegment: makeSegment('Final words.', { completed: false }),
      })
      util.updateText(id, 'Final words.', true, { start: 5, end: 7 })
      expect(getShape(editor, id).props.currentSegment).toBeUndefined()
    })
    it('preserves currentSegment when its text differs from the confirmed text', () => {
      const id = createTranscriptionShape(editor, {
        isRecording: true,
        currentSegment: makeSegment('still typing...', { completed: false }),
      })
      util.updateText(id, 'Earlier sentence confirmed.', true, { start: 0, end: 3 })
      expect(getShape(editor, id).props.currentSegment?.text).toBe('still typing...')
    })
    it('DEDUPLICATION — does not add a segment whose text is already in segments[]', () => {
      const existingSegment = makeSegment('Duplicate text.')
      const id = createTranscriptionShape(editor, {
        isRecording: true,
        segments: [existingSegment],
        lastProcessedSegment: 'Duplicate text.',
      })
      util.updateText(id, 'Duplicate text.', true, { start: 10, end: 12 })
      const shape = getShape(editor, id)
      expect(shape.props.segments).toHaveLength(1)
      expect(shape.props.segments[0].id).toBe(existingSegment.id)
    })
    it('DEDUPLICATION — blocks re-add even when lastProcessedSegment differs (isDuplicate text check)', () => {
      const existingSegment = makeSegment('Already confirmed.')
      const id = createTranscriptionShape(editor, {
        isRecording: true,
        segments: [existingSegment],
        lastProcessedSegment: undefined,
      })
      util.updateText(id, 'Already confirmed.', true, { start: 15, end: 17 })
      expect(getShape(editor, id).props.segments).toHaveLength(1)
    })
    it('accumulates multiple unique confirmed segments in order', () => {
      const id = createTranscriptionShape(editor, { isRecording: true })
      util.updateText(id, 'Sentence one.',   true, { start: 0,  end: 2  })
      util.updateText(id, 'Sentence two.',   true, { start: 2,  end: 4  })
      util.updateText(id, 'Sentence three.', true, { start: 4,  end: 6  })
      const { segments } = getShape(editor, id).props
      expect(segments).toHaveLength(3)
      expect(segments.map((s) => s.text)).toEqual([
        'Sentence one.',
        'Sentence two.',
        'Sentence three.',
      ])
    })
    it('assigns unique ids to each confirmed segment', () => {
      const id = createTranscriptionShape(editor, { isRecording: true })
      util.updateText(id, 'Alpha.', true, { start: 0, end: 1 })
      util.updateText(id, 'Beta.',  true, { start: 1, end: 2 })
      const { segments } = getShape(editor, id).props
      expect(segments[0].id).not.toBe(segments[1].id)
    })
    it('formats numeric start/end timestamps to 3 decimal places', () => {
      const id = createTranscriptionShape(editor, { isRecording: true })
      util.updateText(id, 'Timestamped.', true, { start: 1.1, end: 2.5678 })
      const seg = getShape(editor, id).props.segments[0]
      expect(seg.start).toBe('1.100')
      expect(seg.end).toBe('2.568')
    })
  })
  // ── toggleRecording ────────────────────────────────────────────────────
  describe('toggleRecording() — via private accessor', () => {
    // TypeScript private methods are still callable at runtime; we use
    // bracket notation to bypass the access check cleanly in tests.
    const toggle = (u: CCLiveTranscriptionShapeUtil, shape: CCLiveTranscriptionShape) =>
      (u as unknown as { toggleRecording(s: CCLiveTranscriptionShape): void }).toggleRecording(shape)
    it('STARTING — sets isRecording to true', () => {
      const id    = createTranscriptionShape(editor, { isRecording: false })
      const shape = getShape(editor, id)
      toggle(util, shape)
      expect(getShape(editor, id).props.isRecording).toBe(true)
    })
    it('STARTING — resets segments to an empty array', () => {
      const id = createTranscriptionShape(editor, {
        isRecording: false,
        segments: [makeSegment('old transcript'), makeSegment('more old text')],
      })
      toggle(util, getShape(editor, id))
      expect(getShape(editor, id).props.segments).toHaveLength(0)
    })
    it('STARTING — clears currentSegment and lastProcessedSegment', () => {
      const id = createTranscriptionShape(editor, {
        isRecording: false,
        currentSegment: makeSegment('partial', { completed: false }),
        lastProcessedSegment: 'some prior segment',
      })
      toggle(util, getShape(editor, id))
      const props = getShape(editor, id).props
      expect(props.currentSegment).toBeUndefined()
      expect(props.lastProcessedSegment).toBeUndefined()
    })
    it('STARTING — calls TranscriptionManager.startTranscription with the shape id', () => {
      const id    = createTranscriptionShape(editor, { isRecording: false })
      const shape = getShape(editor, id)
      toggle(util, shape)
      expect(sm()).toHaveBeenCalledOnce()
      expect(sm()).toHaveBeenCalledWith(id)
    })
    it('STOPPING — sets isRecording to false', () => {
      const id    = createTranscriptionShape(editor, { isRecording: true })
      const shape = getShape(editor, id)
      toggle(util, shape)
      expect(getShape(editor, id).props.isRecording).toBe(false)
    })
    it('STOPPING — preserves existing segments (does not wipe them)', () => {
      const seg1 = makeSegment('Keep me.')
      const seg2 = makeSegment('Keep me too.')
      const id   = createTranscriptionShape(editor, {
        isRecording: true,
        segments: [seg1, seg2],
      })
      toggle(util, getShape(editor, id))
      const { segments } = getShape(editor, id).props
      expect(segments).toHaveLength(2)
      expect(segments[0].text).toBe('Keep me.')
      expect(segments[1].text).toBe('Keep me too.')
    })
    it('STOPPING — calls TranscriptionManager.stopTranscription', () => {
      const id = createTranscriptionShape(editor, { isRecording: true })
      toggle(util, getShape(editor, id))
      expect(st()).toHaveBeenCalledOnce()
      expect(sm()).not.toHaveBeenCalled()
    })
    it('start-stop cycle leaves shape in consistent state', () => {
      const id = createTranscriptionShape(editor, { isRecording: false })
      toggle(util, getShape(editor, id))
      expect(getShape(editor, id).props.isRecording).toBe(true)
      util.updateText(id, 'Live lesson note.', true, { start: 0, end: 3 })
      toggle(util, getShape(editor, id))
      const props = getShape(editor, id).props
      expect(props.isRecording).toBe(false)
      expect(props.segments).toHaveLength(1)
      expect(props.segments[0].text).toBe('Live lesson note.')
    })
  })
  // ── Edge cases ─────────────────────────────────────────────────────────
  describe('updateText() — edge cases', () => {
    it('does nothing if the shape id does not exist in the store', () => {
      const ghostId = createShapeId('nonexistent')
      expect(() => util.updateText(ghostId, 'text', true, { start: 0, end: 1 })).not.toThrow()
    })
    it('handles empty string text without crashing', () => {
      const id = createTranscriptionShape(editor, { isRecording: true })
      expect(() => util.updateText(id, '', true, { start: 0, end: 0 })).not.toThrow()
    })
    it('handles string start/end metadata (passed as already-formatted strings)', () => {
      const id = createTranscriptionShape(editor, { isRecording: true })
      util.updateText(id, 'String timestamps.', true, { start: '1.234' as unknown as number, end: '5.678' as unknown as number })
      const seg = getShape(editor, id).props.segments[0]
      expect(typeof seg.start).toBe('string')
      expect(typeof seg.end).toBe('string')
    })
    it('handles missing metadata gracefully, falling back to "0.000"', () => {
      const id = createTranscriptionShape(editor, { isRecording: true })
      util.updateText(id, 'No timestamps.', true, undefined as unknown as { start: number; end: number })
      const seg = getShape(editor, id).props.segments[0]
      expect(seg.start).toBe('0.000')
      expect(seg.end).toBe('0.000')
    })
  })
 })
@@ -6,6 +6,7 @@ import { TranscriptionManager } from '../cc-transcription/TranscriptionManager';
 import { ccShapeProps, getDefaultCCLiveTranscriptionProps } from '../cc-props';
 import { ccShapeMigrations } from '../cc-migrations';
 import { CC_BASE_STYLE_CONSTANTS } from '../cc-styles';
 import { logger } from '../../../../debugConfig';
 export interface TranscriptionSegment {
  id: string
@@ -83,7 +84,7 @@ export class CCLiveTranscriptionShapeUtil extends CCBaseShapeUtil<CCLiveTranscri
              height: '48px',
              borderRadius: '50%',
              border: 'none',
-              backgroundColor: isRecording ? '#f44336' : '#4CAF50',
+              backgroundColor: isRecording ? 'var(--cc-recording-active)' : 'var(--cc-recording-idle)',
              color: 'white',
              fontSize: '24px',
              cursor: 'pointer',
@@ -105,7 +106,7 @@ export class CCLiveTranscriptionShapeUtil extends CCBaseShapeUtil<CCLiveTranscri
            <div style={{ 
              fontSize: '16px', 
              fontWeight: 'bold',
-              color: isRecording ? '#f44336' : '#4CAF50'
+              color: isRecording ? 'var(--cc-recording-active)' : 'var(--cc-recording-idle)'
            }}>
              {isRecording ? 'Recording...' : 'Ready'}
            </div>
@@ -207,11 +208,11 @@ export class CCLiveTranscriptionShapeUtil extends CCBaseShapeUtil<CCLiveTranscri
  }
  private toggleRecording(shape: CCLiveTranscriptionShape) {
-    console.log('🎤 Toggle recording clicked');
+    logger.debug('cc-live-transcription', '🎤 Toggle recording clicked');
    const { id } = shape;
    const { isRecording } = shape.props;
-    console.log('Current state:', { id, isRecording });
+    logger.debug('cc-live-transcription', 'Current state', { id, isRecording });
    // When starting new recording, preserve existing props but reset segments
    const newProps = !isRecording ? {
@@ -232,13 +233,13 @@ export class CCLiveTranscriptionShapeUtil extends CCBaseShapeUtil<CCLiveTranscri
    });
    const manager = TranscriptionManager.getManager(this.editor);
-    console.log('Got transcription manager');
+    logger.debug('cc-live-transcription', 'Got transcription manager');
    if (!isRecording) {
-      console.log('Starting transcription...');
+      logger.debug('cc-live-transcription', 'Starting transcription...');
      manager.startTranscription(id);
    } else {
-      console.log('Stopping transcription...');
+      logger.debug('cc-live-transcription', 'Stopping transcription...');
      manager.stopTranscription();
    }
  }
@@ -249,10 +250,10 @@ export class CCLiveTranscriptionShapeUtil extends CCBaseShapeUtil<CCLiveTranscri
    isConfirmed: boolean,
    metadata?: { start: string | number, end: string | number }
  ) {
-    console.log('📝 Updating text:', { id, text, isConfirmed, metadata });
+    logger.debug('cc-live-transcription', '📝 Updating text', { id, text, isConfirmed, metadata });
    const shape = this.editor.getShape<CCLiveTranscriptionShape>(id);
    if (!shape) {
-      console.warn('❌ Shape not found for updating text:', id);
+      logger.warn('cc-live-transcription', '❌ Shape not found for updating text', id);
      return;
    }
@@ -308,7 +309,7 @@ export class CCLiveTranscriptionShapeUtil extends CCBaseShapeUtil<CCLiveTranscri
      });
    }
-    console.log('✅ Text updated');
+    logger.debug('cc-live-transcription', '✅ Text updated');
  }
 }
@@ -27,8 +27,8 @@ export class TranscriptionManager {
    this.transcriptionService = new TranscriptionService();
    // Set up callback for transcription updates
-    this.transcriptionService.setTranscriptionCallback((text: string, isFinal: boolean, metadata: { start: number, end: number }) => {
+    this.transcriptionService.setServerSegmentsCallback((segments: Array<{ text: string; start: number; end: number }>, isLastLive: boolean) => {
-      console.log('📝 Transcription update received:', { text, metadata });
+      console.log('📝 Transcription update received:', { segments: segments.length, isLastLive });
      const util = this.editor.getShapeUtil<CCLiveTranscriptionShapeUtil>('cc-live-transcription');
      if (!util) {
        console.warn('❌ Shape util not found');
@@ -36,6 +36,10 @@ export class TranscriptionManager {
      }
      console.log('Found transcription util:', !!util);
      const text = segments.map(s => s.text).join('') || '';
      const metadata = segments.length ? { start: segments[0].start, end: segments[segments.length - 1].end } : { start: 0, end: 0 };
      const isFinal = isLastLive;
      // Check if text is stable (same output multiple times)
      const isStable = text === this.lastText;
      if (isStable) {
@@ -18,40 +18,40 @@ export const CC_YOUTUBE_EMBED_STYLE_CONSTANTS = {
      overflowY: 'auto',
      maxHeight: '100%',
      minWidth: '200px',
-      backgroundColor: '#f5f5f5',
+      backgroundColor: 'var(--cc-navy-50)',
-      borderLeft: '1px solid #ddd',
+      borderLeft: '1px solid var(--cc-border)',
    },
    title: {
      margin: '0 0 10px 0',
      fontSize: '16px',
      fontWeight: 'bold',
-      color: '#333',
+      color: 'var(--cc-text-primary)',
    },
    line: {
      padding: '5px',
      marginBottom: '5px',
      borderRadius: '4px',
      fontSize: '14px',
-      color: '#333',
+      color: 'var(--cc-text-primary)',
-      backgroundColor: '#fff',
+      backgroundColor: 'var(--cc-bg-canvas)',
-      border: '1px solid #eee',
+      border: '1px solid var(--cc-border-strong)',
    },
    activeLine: {
-      backgroundColor: '#e3f2fd',
+      backgroundColor: 'var(--cc-navy-50)',
-      border: '1px solid #2196f3',
+      border: '1px solid var(--cc-action-primary)',
-      color: '#1565c0',
+      color: 'var(--cc-action-primary)',
      fontWeight: 'bold',
      boxShadow: '0 1px 3px rgba(0,0,0,0.12)',
      transform: 'scale(1.02)',
      transition: 'all 0.2s ease-in-out',
    },
    timestamp: {
-      color: '#666',
+      color: 'var(--cc-text-tertiary)',
      marginRight: '8px',
      fontWeight: 'bold',
    },
    loading: {
-      color: '#666',
+      color: 'var(--cc-text-muted)',
      fontStyle: 'italic',
    },
  },
@@ -64,14 +64,14 @@ export const CC_YOUTUBE_EMBED_STYLE_CONSTANTS = {
    },
    button: {
      padding: '8px 12px',
-      backgroundColor: '#f0f0f0',
+      backgroundColor: 'var(--cc-navy-50)',
-      border: '1px solid #ddd',
+      border: '1px solid var(--cc-border)',
      borderRadius: '4px',
      cursor: 'pointer',
-      color: '#333',
+      color: 'var(--cc-text-primary)',
      fontSize: '14px',
      '&:hover': {
-        backgroundColor: '#e0e0e0',
+        backgroundColor: 'var(--cc-border-strong)',
      },
    },
  },
@@ -0,0 +1,976 @@
 /* ============================================================
   CLASSROOM COPILOT — DESIGN SYSTEM
   Aesthetic Direction: Technical Editorial / Industrial Utilitarian
   Philosophy: Drafting table discipline. Every element earns
   its place. Tone contrast over shadow depth. Grid over flow.
   ============================================================ */
 /* ─── TYPOGRAPHY IMPORTS ───────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
 /* ─── ROOT TOKENS — LIGHT MODE ─────────────────────────────── */
 :root {
  /* Typography */
  --cc-font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --cc-font-mono: 'IBM Plex Mono', 'Fira Code', 'Cascadia Code', monospace;
  --cc-text-xs:   0.6875rem;  /* 11px */
  --cc-text-sm:   0.75rem;    /* 12px */
  --cc-text-base: 0.875rem;   /* 14px */
  --cc-text-md:   1rem;       /* 16px */
  --cc-text-lg:   1.125rem;   /* 18px */
  --cc-text-xl:   1.25rem;    /* 20px */
  --cc-weight-normal:   400;
  --cc-weight-medium:   500;
  --cc-weight-semibold: 600;
  --cc-leading-tight:  1.2;
  --cc-leading-normal: 1.5;
  --cc-leading-loose:  1.7;
  --cc-tracking-tight:  -0.01em;
  --cc-tracking-normal:  0;
  --cc-tracking-wide:    0.04em;
  --cc-tracking-widest:  0.12em;
  /* ── Color Primitives ── */
  --cc-navy-950:  #0D1117;
  --cc-navy-900:  #14191F;
  --cc-navy-800:  #1C2330;
  --cc-navy-700:  #263040;
  --cc-navy-600:  #344256;
  --cc-navy-500:  #435470;
  --cc-navy-400:  #5A6E8A;
  --cc-navy-300:  #7A8FA8;
  --cc-navy-200:  #A4B4C8;
  --cc-navy-100:  #D2DCE8;
  --cc-navy-50:   #EBF0F5;
  --cc-parchment-950: #2A2519;
  --cc-parchment-900: #3D3626;
  --cc-parchment-800: #5C5238;
  --cc-parchment-700: #7A6E4E;
  --cc-parchment-600: #9A8C6A;
  --cc-parchment-500: #B8A882;
  --cc-parchment-400: #CEC0A0;
  --cc-parchment-300: #DED2BA;
  --cc-parchment-200: #EDE5D4;
  --cc-parchment-100: #F5F2ED;
  --cc-parchment-50:  #FAF8F5;
  --cc-amber-700: #8A5C1A;
  --cc-amber-600: #A8711F;
  --cc-amber-500: #C9882A;
  --cc-amber-400: #D9A24E;
  --cc-amber-300: #E6BC78;
  --cc-amber-200: #F0D4A8;
  --cc-amber-100: #F8EDDA;
  --cc-sage-700:  #2E3E36;
  --cc-sage-600:  #3A5046;
  --cc-sage-500:  #4A5E52;
  --cc-sage-400:  #607A6C;
  --cc-sage-300:  #7E9688;
  --cc-sage-200:  #A8BDB4;
  --cc-sage-100:  #D2DDD9;
  --cc-crimson-600: #8B1A1A;
  --cc-crimson-500: #A82828;
  --cc-crimson-400: #C44040;
  --cc-crimson-100: #F5DADA;
  --cc-signal-green-600: #1A5C36;
  --cc-signal-green-500: #246B42;
  --cc-signal-green-400: #347A52;
  --cc-signal-green-100: #D4EDE0;
  /* ── Semantic Color Assignments — Light ── */
  /* Surfaces */
  --cc-bg-canvas:      var(--cc-parchment-100);
  --cc-bg-panel:       var(--cc-parchment-50);
  --cc-bg-panel-alt:   #FFFFFF;
  --cc-bg-shape:       #FFFFFF;
  --cc-bg-shape-hover: var(--cc-parchment-100);
  --cc-bg-overlay:     rgba(13, 17, 23, 0.48);
  --cc-bg-code:        var(--cc-navy-900);
  /* Shape / card header tones */
  --cc-header-default:   var(--cc-navy-700);
  --cc-header-accent:    var(--cc-amber-500);
  --cc-header-sage:      var(--cc-sage-600);
  --cc-header-dim:       var(--cc-navy-500);
  /* Text */
  --cc-text-primary:   var(--cc-navy-900);
  --cc-text-secondary: var(--cc-navy-500);
  --cc-text-tertiary:  var(--cc-navy-300);
  --cc-text-inverse:   var(--cc-parchment-100);
  --cc-text-accent:    var(--cc-amber-500);
  --cc-text-code:      var(--cc-parchment-200);
  --cc-text-link:      var(--cc-amber-600);
  /* Borders */
  --cc-border:          var(--cc-navy-100);
  --cc-border-strong:   var(--cc-navy-200);
  --cc-border-accent:   var(--cc-amber-500);
  --cc-border-focus:    var(--cc-amber-400);
  --cc-border-error:    var(--cc-crimson-500);
  --cc-border-success:  var(--cc-signal-green-500);
  /* Interactive */
  --cc-action-primary:         var(--cc-amber-500);
  --cc-action-primary-hover:   var(--cc-amber-400);
  --cc-action-primary-active:  var(--cc-amber-600);
  --cc-action-secondary:       var(--cc-navy-700);
  --cc-action-secondary-hover: var(--cc-navy-600);
  --cc-action-danger:          var(--cc-crimson-500);
  --cc-action-success:         var(--cc-signal-green-500);
  /* States */
  --cc-selected:  var(--cc-amber-100);
  --cc-hover:     var(--cc-parchment-200);
  --cc-active:    var(--cc-parchment-300);
  --cc-disabled:  var(--cc-navy-100);
  /* Recording / live indicator */
  --cc-recording-active:  var(--cc-crimson-500);
  --cc-recording-idle:    var(--cc-signal-green-500);
  /* ── Geometry ── */
  --cc-radius-none:  0;
  --cc-radius-xs:    1px;
  --cc-radius-sm:    2px;    /* maximum for shapes */
  --cc-radius-md:    4px;    /* panels, menus */
  --cc-radius-full:  9999px;
  /* ── Spacing scale (8pt grid) ── */
  --cc-space-0:   0;
  --cc-space-px:  1px;
  --cc-space-0_5: 2px;
  --cc-space-1:   4px;
  --cc-space-2:   8px;
  --cc-space-3:   12px;
  --cc-space-4:   16px;
  --cc-space-5:   20px;
  --cc-space-6:   24px;
  --cc-space-8:   32px;
  --cc-space-10:  40px;
  --cc-space-12:  48px;
  --cc-space-16:  64px;
  /* ── Shape dimensions ── */
  --cc-shape-header-h:      32px;
  --cc-shape-header-pad:    var(--cc-space-2);
  --cc-shape-content-pad:   var(--cc-space-2);
  --cc-shape-min-w:         120px;
  --cc-shape-min-h:         80px;
  /* ── Panel dimensions ── */
  --cc-panel-w:             280px;
  --cc-panel-header-h:      44px;
  --cc-panel-handle-w:      20px;
  /* ── Borders ── */
  --cc-border-width:        1px;
  --cc-border-width-thick:  2px;
  /* No blurry box shadows. Depth through tone. */
  --cc-shadow-none:    none;
  --cc-shadow-edge:    1px 0 0 0 var(--cc-border);
  --cc-shadow-crisp:   2px 2px 0 0 var(--cc-navy-200);
  --cc-shadow-raised:  3px 3px 0 0 var(--cc-navy-200);
  /* ── Z-index system ── */
  --cc-z-canvas:      0;
  --cc-z-shape:       1;
  --cc-z-panel:       200;
  --cc-z-toolbar:     300;
  --cc-z-menu:        400;
  --cc-z-modal:       500;
  --cc-z-toast:       600;
  /* ── Motion ── */
  --cc-transition-snap:   80ms linear;
  --cc-transition-quick:  120ms ease-out;
  --cc-transition-base:   200ms ease-out;
  --cc-transition-slow:   320ms ease-out;
 }
 /* ─── DARK MODE TOKENS ──────────────────────────────────────── */
 [data-color-mode="dark"] {
  /* Surfaces */
  --cc-bg-canvas:      var(--cc-navy-950);
  --cc-bg-panel:       var(--cc-navy-900);
  --cc-bg-panel-alt:   var(--cc-navy-800);
  --cc-bg-shape:       var(--cc-navy-800);
  --cc-bg-shape-hover: var(--cc-navy-700);
  --cc-bg-overlay:     rgba(13, 17, 23, 0.72);
  --cc-bg-code:        var(--cc-navy-950);
  /* Shape headers get slightly brighter in dark */
  --cc-header-default:   var(--cc-navy-600);
  --cc-header-accent:    var(--cc-amber-600);
  --cc-header-sage:      var(--cc-sage-500);
  --cc-header-dim:       var(--cc-navy-700);
  /* Text */
  --cc-text-primary:   var(--cc-parchment-100);
  --cc-text-secondary: var(--cc-navy-200);
  --cc-text-tertiary:  var(--cc-navy-300);
  --cc-text-inverse:   var(--cc-navy-900);
  --cc-text-accent:    var(--cc-amber-400);
  --cc-text-code:      var(--cc-parchment-300);
  --cc-text-link:      var(--cc-amber-400);
  /* Borders */
  --cc-border:          var(--cc-navy-700);
  --cc-border-strong:   var(--cc-navy-600);
  --cc-border-accent:   var(--cc-amber-500);
  --cc-border-focus:    var(--cc-amber-300);
  --cc-border-error:    var(--cc-crimson-400);
  --cc-border-success:  var(--cc-signal-green-400);
  /* Interactive */
  --cc-action-primary:         var(--cc-amber-500);
  --cc-action-primary-hover:   var(--cc-amber-300);
  --cc-action-primary-active:  var(--cc-amber-600);
  --cc-action-secondary:       var(--cc-navy-400);
  --cc-action-secondary-hover: var(--cc-navy-300);
  /* States */
  --cc-selected:  rgba(201, 136, 42, 0.15);
  --cc-hover:     var(--cc-navy-800);
  --cc-active:    var(--cc-navy-700);
  --cc-disabled:  var(--cc-navy-700);
  /* Shadows become tone dividers in dark */
  --cc-shadow-edge:   1px 0 0 0 var(--cc-navy-700);
  --cc-shadow-crisp:  2px 2px 0 0 var(--cc-navy-950);
  --cc-shadow-raised: 3px 3px 0 0 var(--cc-navy-950);
 }
 /* ─── BASE RESET (minimal — respects tldraw's own base) ────── */
 .cc-root * {
  box-sizing: border-box;
  font-family: var(--cc-font-sans);
 }
 .cc-root code,
 .cc-root pre,
 .cc-mono {
  font-family: var(--cc-font-mono);
 }
 /* ─── SHAPE CARD SYSTEM ─────────────────────────────────────── */
 /*
  .cc-shape-container
  └── .cc-shape-header
  └── .cc-shape-content
 */
 .cc-shape-container {
  display: grid;
  grid-template-rows: var(--cc-shape-header-h) 1fr;
  width: 100%;
  height: 100%;
  background: var(--cc-bg-shape);
  border: var(--cc-border-width) solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  overflow: hidden;
  /* Flat depth — no blur */
  box-shadow: var(--cc-shadow-crisp);
  transition: box-shadow var(--cc-transition-quick);
 }
 .cc-shape-container:hover {
  box-shadow: var(--cc-shadow-raised);
 }
 .cc-shape-container--locked {
  opacity: 0.72;
  cursor: not-allowed;
 }
 /* Header strip — the primary identification band */
 .cc-shape-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 var(--cc-shape-header-pad);
  height: var(--cc-shape-header-h);
  background: var(--cc-header-default);
  color: var(--cc-text-inverse);
  /* Hairline rule below header, not shadow */
  border-bottom: var(--cc-border-width) solid rgba(255,255,255,0.12);
  cursor: move;
  user-select: none;
 }
 /* Accent variant headers */
 .cc-shape-header--accent  { background: var(--cc-header-accent);  color: var(--cc-navy-900); }
 .cc-shape-header--sage    { background: var(--cc-header-sage);    }
 .cc-shape-header--dim     { background: var(--cc-header-dim);     }
 .cc-shape-header__title {
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-weight-semibold);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 .cc-shape-header__actions {
  display: flex;
  align-items: center;
  gap: var(--cc-space-1);
 }
 /* Toolbar buttons inside shape headers */
 .cc-shape-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: var(--cc-radius-xs);
  background: transparent;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  touch-action: none;
  transition:
    opacity var(--cc-transition-snap),
    background var(--cc-transition-snap);
 }
 .cc-shape-btn:hover {
  opacity: 1;
  background: rgba(255,255,255,0.15);
 }
 .cc-shape-btn:active {
  background: rgba(255,255,255,0.25);
  transform: scale(0.92);
 }
 .cc-shape-btn--active {
  opacity: 1;
  background: rgba(255,255,255,0.2);
 }
 /* Content area */
 .cc-shape-content {
  padding: var(--cc-shape-content-pad);
  overflow: auto;
  background: var(--cc-bg-shape);
  color: var(--cc-text-primary);
  font-size: var(--cc-text-base);
  line-height: var(--cc-leading-normal);
  /* Hide scrollbar visually, keep functionality */
  scrollbar-width: thin;
  scrollbar-color: var(--cc-border-strong) transparent;
 }
 .cc-shape-content::-webkit-scrollbar {
  width: 4px;
 }
 .cc-shape-content::-webkit-scrollbar-thumb {
  background: var(--cc-border-strong);
  border-radius: var(--cc-radius-xs);
 }
 .cc-shape-content::-webkit-scrollbar-track {
  background: transparent;
 }
 /* ─── PANEL SYSTEM ──────────────────────────────────────────── */
 /*
  .cc-panel
  └── .cc-panel-header
  └── .cc-panel-content
 */
 .cc-panel {
  display: grid;
  grid-template-rows: var(--cc-panel-header-h) 1fr;
  width: var(--cc-panel-w);
  height: 100%;
  background: var(--cc-bg-panel);
  border-right: var(--cc-border-width) solid var(--cc-border);
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  z-index: var(--cc-z-panel);
 }
 .cc-panel-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--cc-space-2);
  padding: 0 var(--cc-space-2);
  height: var(--cc-panel-header-h);
  background: var(--cc-bg-panel);
  border-bottom: var(--cc-border-width) solid var(--cc-border-strong);
  /* Left accent stripe — the editorial mark */
  box-shadow: inset 2px 0 0 0 var(--cc-border-accent);
 }
 .cc-panel-content {
  overflow-y: auto;
  padding: var(--cc-space-2);
  scrollbar-width: thin;
  scrollbar-color: var(--cc-border) transparent;
 }
 .cc-panel-content::-webkit-scrollbar {
  width: 3px;
 }
 .cc-panel-content::-webkit-scrollbar-thumb {
  background: var(--cc-border-strong);
 }
 /* Panel tab / type selector */
 .cc-panel-selector {
  display: flex;
  align-items: center;
  gap: var(--cc-space-1);
  padding: var(--cc-space-1) var(--cc-space-2);
  background: transparent;
  border: var(--cc-border-width) solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-text-primary);
  font-family: var(--cc-font-sans);
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-weight-medium);
  cursor: pointer;
  transition:
    border-color var(--cc-transition-quick),
    background var(--cc-transition-quick);
  white-space: nowrap;
 }
 .cc-panel-selector:hover {
  border-color: var(--cc-border-strong);
  background: var(--cc-hover);
 }
 .cc-panel-selector__icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  flex-shrink: 0;
 }
 .cc-panel-selector__chevron {
  margin-left: auto;
  opacity: 0.5;
  transition: transform var(--cc-transition-quick);
 }
 .cc-panel-selector[aria-expanded="true"] .cc-panel-selector__chevron {
  transform: rotate(180deg);
 }
 /* Panel collapse handle */
 .cc-panel-handle {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cc-panel-handle-w);
  height: 40px;
  background: var(--cc-bg-panel);
  border: var(--cc-border-width) solid var(--cc-border);
  border-left: none;
  border-radius: 0 var(--cc-radius-md) var(--cc-radius-md) 0;
  color: var(--cc-text-tertiary);
  font-size: 10px;
  cursor: pointer;
  z-index: var(--cc-z-panel);
  transition:
    color var(--cc-transition-quick),
    background var(--cc-transition-quick);
 }
 .cc-panel-handle:hover {
  background: var(--cc-hover);
  color: var(--cc-text-primary);
 }
 /* Pin button */
 .cc-pin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--cc-radius-sm);
  background: transparent;
  color: var(--cc-text-tertiary);
  cursor: pointer;
  transition:
    color var(--cc-transition-quick),
    background var(--cc-transition-quick);
 }
 .cc-pin-btn:hover {
  background: var(--cc-hover);
  color: var(--cc-text-primary);
 }
 .cc-pin-btn--active {
  color: var(--cc-action-primary);
 }
 /* ─── PANEL MENU / DROPDOWN ─────────────────────────────────── */
 .cc-menu {
  position: absolute;
  background: var(--cc-bg-panel-alt);
  border: var(--cc-border-width) solid var(--cc-border-strong);
  border-radius: var(--cc-radius-md);
  padding: var(--cc-space-1) 0;
  min-width: 200px;
  z-index: var(--cc-z-menu);
  /* Hard-edged drop — no blur */
  box-shadow: 4px 4px 0 0 var(--cc-navy-200);
 }
 [data-color-mode="dark"] .cc-menu {
  box-shadow: 4px 4px 0 0 var(--cc-navy-950);
 }
 .cc-menu-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: var(--cc-space-2);
  padding: var(--cc-space-2) var(--cc-space-3);
  color: var(--cc-text-primary);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--cc-font-sans);
  font-size: var(--cc-text-sm);
  transition: background var(--cc-transition-snap);
 }
 .cc-menu-item:hover {
  background: var(--cc-hover);
 }
 .cc-menu-item--selected {
  background: var(--cc-selected);
  color: var(--cc-text-accent);
 }
 .cc-menu-item__icon {
  color: var(--cc-text-secondary);
  transition: color var(--cc-transition-snap);
 }
 .cc-menu-item:hover .cc-menu-item__icon,
 .cc-menu-item--selected .cc-menu-item__icon {
  color: var(--cc-action-primary);
 }
 .cc-menu-item__label {
  font-weight: var(--cc-weight-medium);
  line-height: var(--cc-leading-tight);
 }
 .cc-menu-item__desc {
  font-size: var(--cc-text-xs);
  color: var(--cc-text-secondary);
  line-height: var(--cc-leading-normal);
  margin-top: 1px;
 }
 .cc-menu-divider {
  height: var(--cc-border-width);
  background: var(--cc-border);
  margin: var(--cc-space-1) 0;
 }
 /* ─── BUTTONS ────────────────────────────────────────────────── */
 .cc-btn {
  display: inline-grid;
  place-items: center;
  padding: var(--cc-space-1) var(--cc-space-3);
  border: var(--cc-border-width) solid transparent;
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-sans);
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-weight-medium);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--cc-transition-quick),
    border-color var(--cc-transition-quick),
    transform var(--cc-transition-snap),
    box-shadow var(--cc-transition-snap);
 }
 .cc-btn:active {
  transform: translate(1px, 1px);
 }
 .cc-btn--primary {
  background: var(--cc-action-primary);
  color: var(--cc-navy-900);
  border-color: var(--cc-amber-600);
  box-shadow: 2px 2px 0 0 var(--cc-amber-700);
 }
 .cc-btn--primary:hover {
  background: var(--cc-action-primary-hover);
  box-shadow: 3px 3px 0 0 var(--cc-amber-700);
 }
 .cc-btn--primary:active {
  box-shadow: none;
  background: var(--cc-action-primary-active);
 }
 .cc-btn--secondary {
  background: transparent;
  color: var(--cc-text-primary);
  border-color: var(--cc-border-strong);
 }
 .cc-btn--secondary:hover {
  background: var(--cc-hover);
  border-color: var(--cc-navy-300);
 }
 .cc-btn--danger {
  background: transparent;
  color: var(--cc-action-danger);
  border-color: var(--cc-border-error);
 }
 .cc-btn--danger:hover {
  background: var(--cc-crimson-100);
 }
 .cc-btn--icon {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--cc-radius-sm);
  border-color: transparent;
  background: transparent;
  color: var(--cc-text-secondary);
 }
 .cc-btn--icon:hover {
  background: var(--cc-hover);
  color: var(--cc-text-primary);
 }
 /* ─── INPUT / FORM ELEMENTS ─────────────────────────────────── */
 .cc-input {
  display: block;
  width: 100%;
  padding: var(--cc-space-1) var(--cc-space-2);
  background: var(--cc-bg-panel-alt);
  border: var(--cc-border-width) solid var(--cc-border-strong);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-text-primary);
  font-family: var(--cc-font-sans);
  font-size: var(--cc-text-base);
  line-height: var(--cc-leading-normal);
  transition: border-color var(--cc-transition-quick);
  outline: none;
 }
 .cc-input::placeholder {
  color: var(--cc-text-tertiary);
 }
 .cc-input:focus {
  border-color: var(--cc-border-focus);
  box-shadow: 0 0 0 2px rgba(201,136,42,0.18);
 }
 .cc-input:disabled {
  background: var(--cc-disabled);
  color: var(--cc-text-tertiary);
  cursor: not-allowed;
 }
 /* ─── RECORDING / LIVE INDICATOR ────────────────────────────── */
 .cc-record-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  transition:
    background var(--cc-transition-quick),
    transform var(--cc-transition-snap),
    box-shadow var(--cc-transition-quick);
 }
 .cc-record-btn--idle {
  background: var(--cc-recording-idle);
  color: #fff;
  box-shadow: 2px 2px 0 0 var(--cc-signal-green-600);
 }
 .cc-record-btn--idle:hover {
  background: var(--cc-signal-green-400);
  box-shadow: 3px 3px 0 0 var(--cc-signal-green-600);
 }
 .cc-record-btn--active {
  background: var(--cc-recording-active);
  color: #fff;
  box-shadow: 2px 2px 0 0 var(--cc-crimson-600);
  /* Pulsing border — CSS-only, no JS */
  animation: cc-record-pulse 1.6s ease-in-out infinite;
 }
@keyframes cc-record-pulse {
  0%,100% { box-shadow: 2px 2px 0 0 var(--cc-crimson-600), 0 0 0 0 rgba(168,40,40,0.4); }
  50%      { box-shadow: 2px 2px 0 0 var(--cc-crimson-600), 0 0 0 6px rgba(168,40,40,0); }
 }
 .cc-record-btn--active:active {
  transform: scale(0.94);
 }
 /* Status text accompanying record button */
 .cc-record-status {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-weight-medium);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
 }
 .cc-record-status--idle   { color: var(--cc-recording-idle);   }
 .cc-record-status--active { color: var(--cc-recording-active); }
 /* ─── TRANSCRIPT SEGMENTS ───────────────────────────────────── */
 .cc-transcript-segment {
  padding: var(--cc-space-2);
  border-left: 2px solid var(--cc-border);
  margin-bottom: var(--cc-space-1);
  transition: border-color var(--cc-transition-quick);
 }
 .cc-transcript-segment:hover {
  border-color: var(--cc-border-accent);
 }
 .cc-transcript-segment--current {
  border-color: var(--cc-action-primary);
  background: var(--cc-selected);
 }
 .cc-transcript-timestamp {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-text-xs);
  color: var(--cc-text-tertiary);
  letter-spacing: var(--cc-tracking-wide);
  margin-bottom: var(--cc-space-0_5);
 }
 .cc-transcript-text {
  font-size: var(--cc-text-base);
  color: var(--cc-text-primary);
  line-height: var(--cc-leading-normal);
 }
 /* ─── GRAPH NODE CARDS ──────────────────────────────────────── */
 .cc-graph-node {
  display: grid;
  grid-template-rows: var(--cc-shape-header-h) 1fr;
  border: var(--cc-border-width) solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  overflow: hidden;
  background: var(--cc-bg-shape);
  box-shadow: var(--cc-shadow-crisp);
  transition: box-shadow var(--cc-transition-quick);
 }
 .cc-graph-node:hover {
  box-shadow: var(--cc-shadow-raised);
 }
 /* Node type label pill */
 .cc-node-type-tag {
  display: inline-block;
  padding: 1px var(--cc-space-1);
  border: var(--cc-border-width) solid currentColor;
  border-radius: var(--cc-radius-xs);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-medium);
  letter-spacing: var(--cc-tracking-widest);
  text-transform: uppercase;
  opacity: 0.75;
 }
 /* ─── SECTION / DIVIDER TYPOGRAPHY ─────────────────────────── */
 .cc-section-label {
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-semibold);
  letter-spacing: var(--cc-tracking-widest);
  text-transform: uppercase;
  color: var(--cc-text-tertiary);
  padding-bottom: var(--cc-space-1);
  border-bottom: var(--cc-border-width) solid var(--cc-border);
  margin-bottom: var(--cc-space-2);
 }
 .cc-divider {
  height: var(--cc-border-width);
  background: var(--cc-border);
  margin: var(--cc-space-2) 0;
 }
 /* ─── LOADING STATES ─────────────────────────────────────────── */
 .cc-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--cc-border-strong);
  border-top-color: var(--cc-action-primary);
  border-radius: 50%;
  animation: cc-spin 0.7s linear infinite;
 }
@keyframes cc-spin {
  to { transform: rotate(360deg); }
 }
 .cc-skeleton {
  background: linear-gradient(
    90deg,
    var(--cc-border) 25%,
    var(--cc-hover)  50%,
    var(--cc-border) 75%
  );
  background-size: 200% 100%;
  animation: cc-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--cc-radius-xs);
 }
@keyframes cc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
 }
 /* ─── TOASTS / ALERTS ────────────────────────────────────────── */
 .cc-alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--cc-space-2);
  padding: var(--cc-space-2) var(--cc-space-3);
  border: var(--cc-border-width) solid;
  border-radius: var(--cc-radius-sm);
  font-size: var(--cc-text-sm);
 }
 .cc-alert--error {
  background: var(--cc-crimson-100);
  border-color: var(--cc-border-error);
  color: var(--cc-crimson-600);
 }
 .cc-alert--success {
  background: var(--cc-signal-green-100);
  border-color: var(--cc-border-success);
  color: var(--cc-signal-green-600);
 }
 [data-color-mode="dark"] .cc-alert--error {
  background: rgba(168,40,40,0.12);
  color: var(--cc-crimson-400);
 }
 [data-color-mode="dark"] .cc-alert--success {
  background: rgba(36,107,66,0.12);
  color: var(--cc-signal-green-400);
 }
 /* ─── UTILITY CLASSES ────────────────────────────────────────── */
 .cc-font-mono { font-family: var(--cc-font-mono); }
 .cc-text-xs   { font-size: var(--cc-text-xs); }
 .cc-text-sm   { font-size: var(--cc-text-sm); }
 .cc-text-base { font-size: var(--cc-text-base); }
 .cc-text-primary   { color: var(--cc-text-primary); }
 .cc-text-secondary { color: var(--cc-text-secondary); }
 .cc-text-tertiary  { color: var(--cc-text-tertiary); }
 .cc-text-accent    { color: var(--cc-text-accent); }
 .cc-uppercase { text-transform: uppercase; letter-spacing: var(--cc-tracking-wide); }
 .cc-border-accent { border-left: 2px solid var(--cc-border-accent); }
 .cc-border-top    { border-top: var(--cc-border-width) solid var(--cc-border); }
 .cc-border-bottom { border-bottom: var(--cc-border-width) solid var(--cc-border); }
 .cc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
 }
 /* ─── GRID LAYOUT HELPERS ────────────────────────────────────── */
 .cc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cc-space-2); }
 .cc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cc-space-2); }
 .cc-stack  { display: grid; gap: var(--cc-space-2); }
 .cc-stack-sm { display: grid; gap: var(--cc-space-1); }
 /* ─── FOCUS VISIBLE ──────────────────────────────────────────── */
 :focus-visible {
  outline: 2px solid var(--cc-border-focus);
  outline-offset: 2px;
  border-radius: var(--cc-radius-xs);
 }
@@ -1,2 +1,12 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap");
@import url("@tldraw/tldraw/tldraw.css");
@import url('./cc-design-system.css');
 .tl-container {
  --color-panel:       var(--cc-bg-panel);
  --color-text:        var(--cc-text-primary);
  --color-muted:       var(--cc-border);
  --color-muted-1:     var(--cc-border-strong);
  --color-background:  var(--cc-bg-canvas);
  --color-selected:    var(--cc-selected);
  --color-accent:      var(--cc-action-primary);
 }
@@ -1,10 +1,8 @@
 import React, { useState } from 'react';
 import { BasePanel } from './shared/BasePanel';
 import { CCExamMarkerPanel } from './shared/CCExamMarkerPanel';
 import { BaseContext, ViewContext } from '../../../../types/navigation';
 interface CCPanelProps {
  examMarkerProps?: React.ComponentProps<typeof CCExamMarkerPanel>;
  isExpanded?: boolean;
  isPinned?: boolean;
  onExpandedChange?: (expanded: boolean) => void;
@@ -12,7 +10,6 @@ interface CCPanelProps {
 }
 export const CCPanel: React.FC<CCPanelProps> = ({
  examMarkerProps,
  isExpanded,
  isPinned,
  onExpandedChange,
@@ -32,7 +29,6 @@ export const CCPanel: React.FC<CCPanelProps> = ({
  return (
    <BasePanel
      examMarkerProps={examMarkerProps}
      isExpanded={isExpanded}
      isPinned={isPinned}
      onExpandedChange={handleExpandedChange}
@@ -1,41 +1,14 @@
-import React, { useEffect, useRef, useMemo } from 'react';
+import React, { useEffect, useRef, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { TldrawUiButton } from '@tldraw/tldraw';
 import { 
  Button,
  Menu,
  MenuItem,
  ListItemIcon,
  ListItemText,
  styled,
  ThemeProvider,
  createTheme,
  useMediaQuery
 } from '@mui/material';
 import {
  PushPin as PushPinIcon,
  PushPinOutlined as PushPinOutlinedIcon,
  ExpandMore as ExpandMoreIcon,
  Category as ShapesIcon,
  Slideshow as SlidesIcon,
  YouTube as YouTubeIcon,
  AccountTree as GraphIcon,
  Search as SearchIcon,
  Navigation as NavigationIcon,
  Save as NodeIcon,
  Assignment as ExamIcon,
  Mic as MicIcon
 } from '@mui/icons-material';
 import { CCShapesPanel } from './CCShapesPanel';
 import { CCSlidesPanel } from './CCSlidesPanel';
 import { CCFilesPanel } from './CCFilesPanel';
 import { CCCabinetsPanel } from './CCCabinetsPanel';
 import { CCYoutubePanel } from './CCYoutubePanel';
 import { CCGraphPanel } from './CCGraphPanel';
-import { CCExamMarkerPanel } from './CCExamMarkerPanel';
+import { CCSearchPanel } from './CCSearchPanel';
-import { CCSearchPanel } from './CCSearchPanel'
+import { CCGraphNavPanel } from './navigation/CCGraphNavPanel';
-import { CCGraphNavPanel } from './navigation/CCGraphNavPanel'
+import { CCTranscriptionPanel } from './CCTranscriptionPanel';
 import { CCTranscriptionPanel } from './CCTranscriptionPanel'
 import { PANEL_DIMENSIONS, Z_INDICES } from './panel-styles';
 import './panel.css';
 // import { CCNavigationPanel } from './navigation/CCNavigationPanel';
@@ -56,16 +29,12 @@ export const PANEL_TYPES = {
    { id: 'graph', label: 'Graph', order: 60 },
    { id: 'search', label: 'Search', order: 70 },
  ],
  examMarker: [
    { id: 'exam-marker', label: 'Exam Marker', order: 10 },
  ],
 } as const;
-export type PanelType = typeof PANEL_TYPES.default[number]['id'] | typeof PANEL_TYPES.examMarker[number]['id'];
+export type PanelType = typeof PANEL_TYPES.default[number]['id'];
 interface BasePanelProps {
  initialPanelType?: PanelType;
  examMarkerProps?: React.ComponentProps<typeof CCExamMarkerPanel>;
  isExpanded?: boolean;
  isPinned?: boolean;
  onExpandedChange?: (expanded: boolean) => void;
@@ -78,49 +47,95 @@ interface BasePanelProps {
  onMenuOpenChange?: (open: boolean) => void;
 }
-const PanelTypeButton = styled(Button)(() => ({
+function getIconSvg(panelId: PanelType, size = '1.25rem') {
-  textTransform: 'none',
+  const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const };
-  padding: '6px 12px',
+  switch (panelId) {
-  gap: '8px',
+    case 'cabinets':
-  backgroundColor: 'var(--color-panel)',
+      return (
-  color: 'var(--color-text)',
+        <svg {...common}>
-  border: '1px solid transparent',
+          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-  transition: 'border-color 200ms ease',
+          <polyline points="9 22 9 12 15 12 15 22" />
-  justifyContent: 'space-between',
+        </svg>
-  minWidth: '200px',
+      );
-  '&:hover': {
+    case 'transcription':
-    backgroundColor: 'var(--color-panel)',
+      return (
-    borderColor: 'var(--color-text)',
+        <svg {...common}>
-  },
+          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
-  '& .MuiSvgIcon-root': {
+          <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
-    fontSize: '1.25rem',
+          <line x1="12" y1="19" x2="12" y2="23" />
-    color: 'inherit',
+          <line x1="8" y1="23" x2="6" y2="21" />
          <line x1="16" y1="23" x2="14" y2="21" />
        </svg>
      );
    case 'cc-shapes':
      return (
        <svg {...common}>
          <rect x="3" y="3" width="7" height="7" />
          <rect x="14" y="3" width="7" height="7" />
          <rect x="14" y="14" width="7" height="7" />
          <rect x="3" y="14" width="7" height="7" />
        </svg>
      );
    case 'slides':
      return (
        <svg {...common}>
          <rect x="2" y="3" width="13" height="18" rx="2" />
          <path d="M15 8h4l3 3v7h-7V8z" />
        </svg>
      );
    case 'youtube':
      return (
        <svg {...common}>
          <rect x="2" y="4" width="20" height="16" rx="4" />
          <polygon points="10 8 16 12 10 16 10 8" fill="currentColor" stroke="none" />
        </svg>
      );
    case 'graph':
      return (
        <svg {...common}>
          <circle cx="18" cy="5" r="3" />
          <circle cx="6" cy="12" r="3" />
          <circle cx="18" cy="19" r="3" />
          <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
          <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
        </svg>
      );
    case 'search':
      return (
        <svg {...common}>
          <circle cx="11" cy="11" r="8" />
          <line x1="21" y1="21" x2="16.65" y2="16.65" />
        </svg>
      );
    case 'navigation':
      return (
        <svg {...common}>
          <polygon points="3 11 22 2 13 21 11 13 3 11" />
        </svg>
      );
    case 'node-snapshot':
      return (
        <svg {...common}>
          <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
        </svg>
      );
    default:
      return (
        <svg {...common}>
          <rect x="3" y="3" width="18" height="18" rx="2" />
        </svg>
      );
  }
 }
 }));
-const StyledMenuItem = styled(MenuItem)(() => ({
+function isDarkMode() {
-  gap: '8px',
+  if (typeof window === 'undefined') return false;
-  padding: '8px 16px',
+  return document.documentElement.dataset.colorMode === 'dark' ||
-  transition: 'background-color 200ms ease',
+    window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
  '&:hover': {
    backgroundColor: 'var(--color-hover)',
    '& .MuiListItemIcon-root': {
      color: 'var(--color-selected)',
 }
  },
  '& .MuiListItemIcon-root': {
    color: 'var(--color-text)',
    minWidth: '32px',
    transition: 'color 200ms ease',
    '& .MuiSvgIcon-root': {
      fontSize: '1.25rem',
    }
  }
 }));
 export const BasePanel: React.FC<BasePanelProps> = ({
  initialPanelType = 'files',
  examMarkerProps,
  isExpanded: controlledIsExpanded,
  isPinned: controlledIsPinned,
  onExpandedChange,
@@ -128,38 +143,28 @@ export const BasePanel: React.FC<BasePanelProps> = ({
  isMenuOpen = false,
  onMenuOpenChange = () => {},
 }) => {
  const location = useLocation();
  const { tldrawPreferences } = useTLDraw();
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const [prefersDarkMode, setPrefersDarkMode] = useState(isDarkMode());
-  const [menuAnchorEl, setMenuAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);
-  // Create a dynamic theme based on TLDraw preferences
+  useEffect(() => {
-  const theme = useMemo(() => {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
-    let mode: 'light' | 'dark';
+    const handler = () => setPrefersDarkMode(isDarkMode());
    mq.addEventListener?.('change', handler);
    return () => mq.removeEventListener?.('change', handler);
  }, []);
-    if (tldrawPreferences?.colorScheme === 'system') {
+  const colorMode = (tldrawPreferences?.colorScheme === 'system' ? prefersDarkMode : tldrawPreferences?.colorScheme === 'dark')
-      mode = prefersDarkMode ? 'dark' : 'light';
+    ? 'dark'
-    } else {
+    : 'light';
      mode = tldrawPreferences?.colorScheme === 'dark' ? 'dark' : 'light';
    }
-    return createTheme({
+  const availablePanels = PANEL_TYPES.default;
      palette: {
        mode,
      },
    });
  }, [tldrawPreferences?.colorScheme, prefersDarkMode]);
-  const isExamMarkerRoute = location.pathname === '/exam-marker';
+  const [currentPanelType, setCurrentPanelType] = useState<PanelType>(initialPanelType);
  const availablePanels = isExamMarkerRoute ? PANEL_TYPES.examMarker : PANEL_TYPES.default;
-  const [currentPanelType, setCurrentPanelType] = React.useState<PanelType>(
+  const [internalIsExpanded, setInternalIsExpanded] = useState(true);
-    isExamMarkerRoute ? 'exam-marker' : initialPanelType
+  const [internalIsPinned, setInternalIsPinned] = useState(true);
  );
  // Use controlled state if provided, otherwise use internal state
  const [internalIsExpanded, setInternalIsExpanded] = React.useState(true);
  const [internalIsPinned, setInternalIsPinned] = React.useState(true);
  const isExpanded = controlledIsExpanded ?? internalIsExpanded;
  const isPinned = controlledIsPinned ?? internalIsPinned;
@@ -178,92 +183,25 @@ export const BasePanel: React.FC<BasePanelProps> = ({
  const panelRef = useRef<HTMLDivElement>(null);
  const dimensions = PANEL_DIMENSIONS[currentPanelType as keyof typeof PANEL_DIMENSIONS];
  // Handle click outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      // Don't close if pinned
      if (isPinned) return;
      // Check if click is outside panel
      const isClickOutside = panelRef.current && !panelRef.current.contains(event.target as Node);
      // Check if click is not on a panel-related element
      const target = event.target as HTMLElement;
      const isPanelElement = target.closest('.panel-root, .panel-handle, .tlui-button');
      if (isClickOutside && !isPanelElement) {
        handleExpandedChange(false);
      }
    };
    if (isExpanded) {
      document.addEventListener('mousedown', handleClickOutside);
    }
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [isExpanded, isPinned]);
  const getIconForPanel = (panelId: PanelType) => {
    switch (panelId) {
      case 'cabinets':
        return <NavigationIcon />;
      case 'cc-shapes':
        return <ShapesIcon />;
      case 'transcription':
        return <MicIcon />;
      case 'slides':
        return <SlidesIcon />;
      case 'youtube':
        return <YouTubeIcon />;
      case 'graph':
        return <GraphIcon />;
      case 'search':
        return <SearchIcon />;
      case 'navigation':
        return <NavigationIcon />;
      case 'node-snapshot':
        return <NodeIcon />;
      case 'exam-marker':
        return <ExamIcon />;
      default:
        return <ShapesIcon />;
    }
  };
  const getDescriptionForPanel = (panelId: PanelType) => {
    switch (panelId) {
      case 'cabinets':
        return 'Manage file cabinets';
      case 'transcription':
        return 'Record and transcribe lessons';
      case 'cc-shapes':
        return 'Add shapes and elements to your canvas';
      case 'slides':
        return 'Manage presentation slides';
      case 'youtube':
        return 'Embed YouTube videos';
      case 'graph':
        return 'View and manage graph connections';
      case 'search':
        return 'Search through your content';
      case 'navigation':
        return 'Navigate through different contexts';
      case 'node-snapshot':
        return 'Manage node snapshots';
      case 'exam-marker':
        return 'Mark and grade exams';
      default:
        return '';
    }
  };
  const renderCurrentPanel = () => {
    if (isExamMarkerRoute && currentPanelType === 'exam-marker') {
      return examMarkerProps ? <CCExamMarkerPanel {...examMarkerProps} /> : null;
    }
    switch (currentPanelType) {
      case 'cabinets':
        return <CCCabinetsPanel />;
@@ -288,16 +226,9 @@ export const BasePanel: React.FC<BasePanelProps> = ({
    }
  };
-  // Handle menu button click
+  const toggleMenu = (open: boolean) => {
-  const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+    setMenuOpen(open);
-    setMenuAnchorEl(event.currentTarget);
+    onMenuOpenChange(open);
    onMenuOpenChange(true);
  };
  // Handle menu close
  const handleMenuClose = () => {
    setMenuAnchorEl(null);
    onMenuOpenChange(false);
  };
  return (
@@ -327,55 +258,60 @@ export const BasePanel: React.FC<BasePanelProps> = ({
          }}
        >
          <div className="panel-header">
-            <ThemeProvider theme={theme}>
+            <button
-              <PanelTypeButton
+              type="button"
-                onClick={handleMenuClick}
+              className="cc-btn cc-btn--secondary cc-panel-selector"
-                endIcon={<ExpandMoreIcon />}
+              onClick={() => toggleMenu(!menuOpen)}
                startIcon={getIconForPanel(currentPanelType)}
            >
              <span className="cc-btn-start-icon">
                {getIconSvg(currentPanelType)}
              </span>
              <span className="cc-btn-label">
                {availablePanels.find(p => p.id === currentPanelType)?.label}
-              </PanelTypeButton>
+              </span>
              <span className="cc-btn-end-icon">
                <svg width="1.25rem" height="1.25rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="6 9 12 15 18 9" />
                </svg>
              </span>
            </button>
-              <Menu
+            {menuOpen && (
-                anchorEl={menuAnchorEl}
+              <div className="cc-menu panel-type-menu" role="menu">
                open={isMenuOpen}
                onClose={handleMenuClose}
                PaperProps={{
                  elevation: 8,
                  sx: {
                    border: '1px solid var(--color-divider)',
                    boxShadow: 'var(--shadow-popup)',
                  }
                }}
              >
                {[...availablePanels]
                  .sort((a, b) => a.order - b.order)
                  .map(type => (
-                  <StyledMenuItem
+                    <button
                      key={type.id}
                      type="button"
                      role="menuitem"
                      className={`cc-menu-item ${type.id === currentPanelType ? 'cc-menu-item--active' : ''}`}
                      onClick={() => {
                        setCurrentPanelType(type.id as PanelType);
-                      handleMenuClose();
+                        toggleMenu(false);
                      }}
                    selected={currentPanelType === type.id}
                    >
-                    <ListItemIcon>
+                      <span className="cc-menu-item-icon">
-                      {getIconForPanel(type.id as PanelType)}
+                        {getIconSvg(type.id as PanelType)}
-                    </ListItemIcon>
+                      </span>
-                    <ListItemText 
+                      <span className="cc-menu-item-text">
-                      primary={type.label}
+                        <span className="cc-menu-item-primary">{type.label}</span>
-                      secondary={getDescriptionForPanel(type.id as PanelType)}
+                        <span className="cc-menu-item-secondary">
-                      primaryTypographyProps={{
+                          {type.id === 'cabinets' && 'Manage file cabinets'}
-                        sx: { color: 'var(--color-text)' }
+                          {type.id === 'transcription' && 'Record and transcribe lessons'}
-                      }}
+                          {type.id === 'cc-shapes' && 'Add shapes and elements to your canvas'}
-                      secondaryTypographyProps={{
+                          {type.id === 'slides' && 'Manage presentation slides'}
-                        sx: { color: 'var(--color-text-secondary)' }
+                          {type.id === 'youtube' && 'Embed YouTube videos'}
-                      }}
+                          {type.id === 'graph' && 'View and manage graph connections'}
-                    />
+                          {type.id === 'search' && 'Search through your content'}
-                  </StyledMenuItem>
+                          {type.id === 'navigation' && 'Navigate through different contexts'}
                          {type.id === 'node-snapshot' && 'Manage node snapshots'}
                        </span>
                      </span>
                    </button>
                  ))}
-              </Menu>
+              </div>
-            </ThemeProvider>
+            )}
            <div className="panel-header-actions">
              <TldrawUiButton
@@ -383,16 +319,36 @@ export const BasePanel: React.FC<BasePanelProps> = ({
                onClick={handlePinToggle}
                className="pin-button"
              >
-                {isPinned ? <PushPinIcon /> : <PushPinOutlinedIcon />}
+                <span className="cc-icon-button">
                  <svg
                    width="1.25rem"
                    height="1.25rem"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    {isPinned ? (
                      <>
                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                      </>
                    ) : (
                      <>
                        <circle cx="12" cy="12" r="10" />
                        <path d="M7.5 7.5l9 9" />
                      </>
                    )}
                  </svg>
                </span>
              </TldrawUiButton>
            </div>
          </div>
          <ThemeProvider theme={theme}>
          <div className="panel-content">
            {renderCurrentPanel()}
          </div>
          </ThemeProvider>
        </div>
      )}
    </>
@@ -1,495 +0,0 @@
 import React, { useState } from 'react';
 import { Box, Button, Typography, Divider, Stack } from '@mui/material';
 import { Editor, exportToBlob, TLPageId, Box as TLBox } from '@tldraw/tldraw';
 import { PDFDocument } from 'pdf-lib';
 import { Pdf } from '../../../../../pages/tldraw/CCExamMarker/types';
 import { logger } from '../../../../../debugConfig';
 interface CCExamMarkerPanelProps {
  editor: Editor | null;
  currentView: 'exam-and-markscheme' | 'student-responses';
  onViewChange: (view: 'exam-and-markscheme' | 'student-responses') => void;
  currentStudentIndex: number;
  totalStudents: number;
  onPreviousStudent: () => void;
  onNextStudent: () => void;
  getCurrentPdf: () => Pdf | null;
 }
 export const CCExamMarkerPanel: React.FC<CCExamMarkerPanelProps> = ({
  editor,
  currentView,
  onViewChange,
  currentStudentIndex,
  totalStudents,
  onPreviousStudent,
  onNextStudent,
  getCurrentPdf,
 }) => {
  const [exportProgress, setExportProgress] = useState<number | null>(null);
  const exportPdf = async (
    editor: Editor,
    { name, source, pages }: Pdf,
    onProgress: (progress: number) => void,
    startPage?: number,
    endPage?: number,
    studentIndex?: number
  ) => {
    logger.debug('cc-exam-marker', '📤 Starting PDF export', {
      name,
      startPage,
      endPage,
      studentIndex,
      currentView,
      totalPages: pages.length
    });
    const pdfPages = pages.slice(startPage, endPage);
    logger.debug('cc-exam-marker', '📄 Selected pages for export', {
      pdfPages: pdfPages.length,
      pageIndices: pdfPages.map((_, i) => (startPage || 0) + i)
    });
    const totalThings = pdfPages.length * 2 + 2;
    let progressCount = 0;
    const tickProgress = () => {
      progressCount++;
      onProgress(progressCount / totalThings);
    };
    const sourcePdf = await PDFDocument.load(source);
    tickProgress();
    // Create a new PDF document for the selected pages
    const newPdf = await PDFDocument.create();
    // Copy pages from source PDF
    const pageIndices = pdfPages.map((_, i) => (startPage || 0) + i);
    const copiedPages = await newPdf.copyPages(sourcePdf, pageIndices);
    copiedPages.forEach(page => newPdf.addPage(page));
    tickProgress();
    // Store current page to restore later
    const currentPageId = editor.getCurrentPageId();
    logger.debug('cc-exam-marker', '📍 Current page before export', { currentPageId });
    // Switch to the correct page based on context
    const targetPageId = (studentIndex !== undefined 
      ? `page:student-response-${studentIndex}` 
      : currentView === 'exam-and-markscheme' 
        ? 'page:exam-page'
        : 'page:mark-scheme-page') as TLPageId;
    logger.debug('cc-exam-marker', '🎯 Switching to target page', { targetPageId });
    editor.setCurrentPage(targetPageId);
    // Get all shape IDs that are not page shapes (i.e., annotations)
    const pageShapeIds = new Set(pages.map(page => page.shapeId));
    const allShapeIds = Array.from(editor.getCurrentPageShapeIds()).filter(id => !pageShapeIds.has(id));
    logger.debug('cc-exam-marker', '📝 Found shapes on current page', {
      totalShapes: editor.getCurrentPageShapeIds().size,
      pageShapes: pageShapeIds.size,
      annotationShapes: allShapeIds.length
    });
    // For each page, draw annotations on top
    for (let i = 0; i < pdfPages.length; i++) {
      const page = pdfPages[i];
      const pdfPage = newPdf.getPages()[i];
      const {bounds} = page;
      logger.debug('cc-exam-marker', `📄 Processing page ${i + 1}/${pdfPages.length}`, {
        bounds,
        pageIndex: i,
        globalPageIndex: (startPage || 0) + i
      });
      // Get shapes that intersect with this page using editor's bounds checking
      const shapesInBounds = allShapeIds.filter((id) => {
        const shape = editor.getShape(id);
        if (!shape || shape.isLocked) return false;
        // @ts-expect-error - annotationManager is added to editor in CCPdfEditor
        const annotationManager = editor.annotationManager;
        const annotationData = annotationManager.getAnnotationData(id);
        if (!annotationData) return false;
        // Filter by student index if provided
        if (studentIndex !== undefined && annotationData.studentIndex !== studentIndex) {
          return false;
        }
        // For exam/markscheme view, only include those annotations
        if (studentIndex === undefined && annotationData.studentIndex !== undefined) {
          return false;
        }
        // For individual student exports, use the annotation's original page index
        // For full exports, use the stored page index
        const adjustedPageIndex = annotationData.pageIndex;
        // Check if this shape belongs to this page index
        if (adjustedPageIndex !== i) {
          return false;
        }
        logger.debug('cc-exam-marker', `🔍 Found matching annotation`, {
          shapeId: id,
          annotationData,
          adjustedPageIndex,
          currentPageIndex: i,
          bounds: editor.getShapePageBounds(id)
        });
        return true;
      });
      logger.debug('cc-exam-marker', `✨ Found shapes for page ${i + 1}`, {
        shapesInBounds: shapesInBounds.length,
        pageIndex: i,
        globalPageIndex: (startPage || 0) + i
      });
      if (shapesInBounds.length === 0) {
        tickProgress();
        tickProgress();
        continue;
      }
      // Export the annotations as PNG
      const exportedPng = await exportToBlob({
        editor,
        ids: shapesInBounds,
        format: 'png',
        opts: { 
          background: false,
          // Create a new bounds that's relative to the current page
          bounds: new TLBox(
            bounds.x,
            0,  // Reset to 0 since we want annotations relative to current page
            bounds.width,
            bounds.height
          ),
          padding: 0,
          scale: 1
        },
      });
      tickProgress();
      // Draw the annotations on the PDF page
      const pngImage = await newPdf.embedPng(await exportedPng.arrayBuffer());
      const pdfWidth = pdfPage.getWidth();
      const pdfHeight = pdfPage.getHeight();
      pdfPage.drawImage(pngImage, {
        x: 0,
        y: 0,
        width: pdfWidth,
        height: pdfHeight,
      });
      tickProgress();
    }
    // Restore original page
    logger.debug('cc-exam-marker', '🔄 Restoring original page', { currentPageId });
    editor.setCurrentPage(currentPageId);
    const pdfBytes = await newPdf.save();
    const url = URL.createObjectURL(
      new Blob([pdfBytes], { type: 'application/pdf' })
    );
    tickProgress();
    const a = document.createElement('a');
    a.href = url;
    a.download = name;
    a.click();
    URL.revokeObjectURL(url);
    logger.debug('cc-exam-marker', '✅ PDF export completed', { name });
  };
  const handleExportCurrentView = async () => {
    if (!editor) return;
    const currentPdf = getCurrentPdf();
    if (!currentPdf) return;
    setExportProgress(0);
    try {
      if (currentView === 'student-responses') {
        // For student responses, we need to handle each student's annotations separately
        const pagesPerStudent = currentPdf.pages.length / totalStudents;
        let currentProgress = 0;
        // Create a new PDF with all pages
        const sourcePdf = await PDFDocument.load(currentPdf.source);
        const newPdf = await PDFDocument.create();
        const copiedPages = await newPdf.copyPages(sourcePdf, Array.from({ length: currentPdf.pages.length }, (_, i) => i));
        copiedPages.forEach(page => newPdf.addPage(page));
        // For each student, export their annotations onto their pages
        for (let studentIndex = 0; studentIndex < totalStudents; studentIndex++) {
          const startPage = studentIndex * pagesPerStudent;
          // Switch to the student's page to get their annotations
          const targetPageId = `page:student-response-${studentIndex}` as TLPageId;
          editor.setCurrentPage(targetPageId);
          // Get all annotations for this student
          const pageShapeIds = new Set(currentPdf.pages.map(page => page.shapeId));
          const allShapeIds = Array.from(editor.getCurrentPageShapeIds()).filter(id => !pageShapeIds.has(id));
          // Process each page for this student
          for (let i = 0; i < pagesPerStudent; i++) {
            const pageIndex = startPage + i;
            const page = currentPdf.pages[pageIndex];
            const pdfPage = newPdf.getPages()[pageIndex];
            // Get shapes for this page
            const shapesInBounds = allShapeIds.filter((id) => {
              const shape = editor.getShape(id);
              if (!shape || shape.isLocked) return false;
              // @ts-expect-error - annotationManager is added to editor in CCPdfEditor
              const annotationManager = editor.annotationManager;
              const annotationData = annotationManager.getAnnotationData(id);
              if (!annotationData) return false;
              return annotationData.studentIndex === studentIndex && annotationData.pageIndex === i;
            });
            if (shapesInBounds.length > 0) {
              // Export and draw annotations
              const exportedPng = await exportToBlob({
                editor,
                ids: shapesInBounds,
                format: 'png',
                opts: { 
                  background: false,
                  bounds: new TLBox(
                    page.bounds.x,
                    0,
                    page.bounds.width,
                    page.bounds.height
                  ),
                  padding: 0,
                  scale: 1
                },
              });
              const pngImage = await newPdf.embedPng(await exportedPng.arrayBuffer());
              pdfPage.drawImage(pngImage, {
                x: 0,
                y: 0,
                width: pdfPage.getWidth(),
                height: pdfPage.getHeight(),
              });
            }
            currentProgress++;
            setExportProgress(currentProgress / (totalStudents * pagesPerStudent));
          }
        }
        // Save the combined PDF
        const pdfBytes = await newPdf.save();
        const url = URL.createObjectURL(new Blob([pdfBytes], { type: 'application/pdf' }));
        const a = document.createElement('a');
        a.href = url;
        a.download = currentPdf.name;
        a.click();
        URL.revokeObjectURL(url);
      } else {
        // For exam/mark scheme view, use the original export logic
        await exportPdf(editor, currentPdf, setExportProgress);
      }
    } finally {
      setExportProgress(null);
    }
  };
  const handleExportCurrentStudent = async () => {
    if (!editor || currentView !== 'student-responses') return;
    const currentPdf = getCurrentPdf();
    if (!currentPdf) return;
    const pagesPerStudent = currentPdf.pages.length / totalStudents;
    const startPage = currentStudentIndex * pagesPerStudent;
    const endPage = startPage + pagesPerStudent;
    setExportProgress(0);
    try {
      await exportPdf(
        editor,
        {
          ...currentPdf,
          name: `Student_${currentStudentIndex + 1}_Response.pdf`,
        },
        setExportProgress,
        Math.floor(startPage),
        Math.floor(endPage),
        currentStudentIndex
      );
    } finally {
      setExportProgress(null);
    }
  };
  const handleBatchExport = async () => {
    if (!editor || currentView !== 'student-responses') return;
    const currentPdf = getCurrentPdf();
    if (!currentPdf) return;
    setExportProgress(0);
    try {
      const pagesPerStudent = currentPdf.pages.length / totalStudents;
      let currentProgress = 0;
      for (let studentIndex = 0; studentIndex < totalStudents; studentIndex++) {
        const startPage = studentIndex * pagesPerStudent;
        const endPage = startPage + pagesPerStudent;
        await exportPdf(
          editor,
          {
            ...currentPdf,
            name: `Student_${studentIndex + 1}_Response.pdf`,
          },
          setExportProgress,
          Math.floor(startPage),
          Math.floor(endPage),
          studentIndex
        );
        currentProgress++;
        setExportProgress(currentProgress / totalStudents);
      }
    } finally {
      setExportProgress(null);
    }
  };
  return (
    <Box sx={{ p: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
      <Typography variant="h6" sx={{ mb: 1 }}>
        Exam Marker
      </Typography>
      <Box>
        <Typography variant="subtitle2" sx={{ mb: 1 }}>
          View Mode
        </Typography>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          <Button
            fullWidth
            variant={currentView === 'exam-and-markscheme' ? 'contained' : 'outlined'}
            onClick={() => onViewChange('exam-and-markscheme')}
          >
            Exam & Mark Scheme
          </Button>
          <Button
            fullWidth
            variant={currentView === 'student-responses' ? 'contained' : 'outlined'}
            onClick={() => onViewChange('student-responses')}
          >
            Student Responses
          </Button>
        </Box>
      </Box>
      {currentView === 'student-responses' && (
        <>
          <Divider />
          <Box>
            <Typography variant="subtitle2" sx={{ mb: 1 }}>
              Student Navigation
            </Typography>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
              <Button
                fullWidth
                variant="outlined"
                onClick={onPreviousStudent}
                disabled={currentStudentIndex === 0}
              >
                Previous Student
              </Button>
              <Typography variant="body2" align="center">
                Student {currentStudentIndex + 1} of {totalStudents}
              </Typography>
              <Button
                fullWidth
                variant="outlined"
                onClick={onNextStudent}
                disabled={currentStudentIndex === totalStudents - 1}
              >
                Next Student
              </Button>
            </Box>
          </Box>
        </>
      )}
      <Divider />
      <Box>
        <Typography variant="subtitle2" sx={{ mb: 1 }}>
          Actions
        </Typography>
        <Stack spacing={1}>
          <Button
            fullWidth
            variant="contained"
            color="primary"
            disabled={!editor || !getCurrentPdf() || exportProgress !== null}
            onClick={handleExportCurrentView}
          >
            {exportProgress !== null
              ? `Exporting... ${Math.round(exportProgress * 100)}%`
              : `Export ${currentView === 'exam-and-markscheme' ? 'All' : 'Combined Responses'}`}
          </Button>
          {currentView === 'student-responses' && (
            <>
              <Button
                fullWidth
                variant="outlined"
                color="primary"
                disabled={!editor || !getCurrentPdf() || exportProgress !== null}
                onClick={handleExportCurrentStudent}
              >
                {exportProgress !== null
                  ? `Exporting... ${Math.round(exportProgress * 100)}%`
                  : 'Export Current Student'}
              </Button>
              <Button
                fullWidth
                variant="outlined"
                color="primary"
                disabled={!editor || !getCurrentPdf() || exportProgress !== null}
                onClick={handleBatchExport}
              >
                {exportProgress !== null
                  ? `Exporting... ${Math.round(exportProgress * 100)}%`
                  : 'Export All as Separate Files'}
              </Button>
            </>
          )}
        </Stack>
      </Box>
      <Box sx={{ mt: 'auto' }}>
        <Typography variant="subtitle2" sx={{ mb: 1 }}>
          Statistics
        </Typography>
        <Typography variant="body2">
          Total Pages: {getCurrentPdf()?.pages.length || 0}
        </Typography>
      </Box>
    </Box>
  );
 }; 
@@ -346,9 +346,10 @@ export const CCFilesPanelEnhanced: React.FC = () => {
            ref={dirInputRef}
            type="file" 
            style={{ display: 'none' }} 
            webkitdirectory="" 
            multiple
            onChange={handleFallbackDirectorySelect}
            // @ts-ignore WebKit directory picker attribute for folder upload
            webkitdirectory=""
          />
          <Tooltip title={isDirectoryPickerSupported() ? "Uses modern directory picker" : "Uses fallback method"}>
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, createContext, useContext } from 'react';
+import React, { useState, useEffect, useCallback, createContext, useContext, useMemo } from 'react';
 import {
    Box, IconButton, CircularProgress, Collapse, Typography, Tooltip,
    ToggleButtonGroup, ToggleButton,
@@ -518,7 +518,7 @@ export function CCGraphNavPanel() {
            const data = await res.json();
            setTree(data.tree);
        } catch (err) {
-            logger.error('graph-nav-panel', 'Failed to load graph tree', err);
+            logger.error('navigation-panel', 'Failed to load graph tree', err);
            setError('Failed to load navigation tree');
        } finally {
            setLoading(false);
@@ -650,12 +650,12 @@ export function CCGraphNavPanel() {
    }, []);
    const handleCalendarWizardComplete = useCallback(() => {
-        logger.info('graph-nav-panel', 'School calendar setup complete');
+        logger.info('navigation-panel', 'School calendar setup complete');
        refreshAll();
    }, [refreshAll]);
    const handleTimetableWizardComplete = useCallback((timetableId: string) => {
-        logger.info('graph-nav-panel', 'Teacher timetable setup complete', { timetableId });
+        logger.info('navigation-panel', 'Teacher timetable setup complete', { timetableId });
        refreshAll();
    }, [refreshAll]);
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { Box, Typography, styled, Button, ThemeProvider, createTheme, useMediaQuery } from '@mui/material';
 import Save from '@mui/icons-material/Save';
-import Reset from '@mui/icons-material/RestartAlt';
+import { RestartAlt } from '@mui/icons-material';
 import { useEditor, useToasts, loadSnapshot } from '@tldraw/tldraw';
 import { useNavigationStore } from '../../../../../../stores/navigationStore';
 import { useAuth } from '../../../../../../contexts/AuthContext';
@@ -269,3 +269,65 @@
  color: var(--color-text-2);
  padding: 16px;
 }
 /* CC Base Shape Styles */
 .cc-shape-container {
  overflow: hidden;
  position: relative;
  border-radius: 4px;
  box-shadow: 0 2px 4px var(--color-muted-1);
 }
 .cc-shape-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: not-allowed;
  pointer-events: all;
  position: relative;
  z-index: 1;
  background: var(--shape-header-color, var(--color-muted));
  padding: 8px;
  height: 32px;
 }
 .cc-shape-header .shape-title {
  color: var(--cc-text-inverse);
  font-weight: bold;
 }
 .cc-shape-toolbar {
  display: flex;
  gap: 4px;
  align-items: center;
 }
 .cc-shape-toolbar button {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: white;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  font-size: 16px;
  width: 24px;
  height: 24px;
  z-index: 100;
  user-select: none;
  position: relative;
  touch-action: none;
 }
 .cc-shape-content {
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  padding: 8px;
 }
@@ -117,6 +117,20 @@ export default defineConfig(({ mode }) => {
    build: {
      outDir: 'dist',
      sourcemap: mode === 'development',
      rollupOptions: {
        output: {
          manualChunks: {
            'vendor-react':    ['react', 'react-dom', 'react-router-dom'],
            'vendor-tldraw':   ['@tldraw/tldraw', '@tldraw/state', '@tldraw/store'],
            'vendor-mui':      ['@mui/material', '@mui/icons-material', '@emotion/react', '@emotion/styled'],
            'vendor-supabase': ['@supabase/supabase-js'],
            'vendor-calendar': ['@fullcalendar/core', '@fullcalendar/daygrid', '@fullcalendar/interaction',
                                '@fullcalendar/list', '@fullcalendar/multimonth', '@fullcalendar/react',
                                '@fullcalendar/timegrid'],
            'vendor-xyflow':   ['@xyflow/react'],
          },
        },
      },
    },
    resolve: {
Author	SHA1	Message	Date
kcar	dea3275f23	[verified] Add exam template setup canvas	2026-06-07 01:27:44 +01:00
CC Worker	f067db3eb8	Merge remote-tracking branch 'origin/agent/s4-8-2-template-versioning' app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-07 00:12:25 +00:00
kcar	fdbc19cf0d	feat(exam): version templates on dashboard	2026-06-07 00:33:06 +01:00
CC Worker	adc7a2a05b	merge: exam-marker app dashboard + /exam-marker route (S4-8) app-ci-deploy / test-build-deploy (push) Has been cancelled Details New ExamDashboardPage + examRepository seam; dashboard nav entry; removes the old CCExamMarker viewer + dead CCExamMarkerPanel wiring (R1.1). Build green; route tests pass.	2026-06-06 19:50:23 +00:00
CC WorkerandClaude Opus 4.8	29554ebdbd	feat(exam): Assessment dashboard + /exam-marker route; remove old CCExamMarker (S4-8) - New examRepository (R2.1 seam): the only module talking to /api/exam (Supabase JWT → Bearer, axios to API_BASE). list/get/create/archive templates. - ExamDashboardPage (/exam-marker): lists institute templates, create dialog, archive; cards link to setup (S4-9). Wrapped in ErrorBoundary (R6.4). - exam.types.ts mirrors the API contract. - Dashboard 'Exam Marker' quick action (top-level discovery, R1.3/R6.1). Note: the in-canvas TeacherNavigation is unsuitable for a nav section (it's the worker prev/next tab bar) — flagged; used the dashboard entry instead. - R1.1 removal: deleted src/pages/tldraw/CCExamMarker/ (old 3-PDF viewer) and the now-dead CCExamMarkerPanel + its wiring in CCPanel/BasePanel (examMarkerProps was only ever passed by the deleted page). - Fixed pre-existing broken AppRoutes test (missing TimetableListPage mock export). Build green (vite); AppRoutes route tests pass; typecheck clean for new files. Co-Authored-By: Claude Opus 4.8 <[email protected]>	2026-06-06 19:47:02 +00:00
CC Worker	434643596e	Merge fix/r6-myclasses: add selectedInstituteId dependency + silent error handling app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-02 23:28:37 +00:00
CC WorkerandClaude Sonnet 4.6	313ab724b8	fix(my-classes): add selectedInstituteId to fetch dependency, silence unhandled rejection Re-fetch classes when NeoInstitute context changes. Catch fetchMyClasses rejection with logger.warn so unhandled promise rejections don't break the component boundary silently. Use CircularProgress (MUI) for loading skeleton. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-02 23:28:26 +00:00
CC WorkerandClaude Sonnet 4.6	ee7d7f7cac	fix(timetable): fall through to empty state on fetch error — endpoint not yet in API app-ci-deploy / test-build-deploy (push) Has been cancelled Details GET /database/timetable/timetables returns 404 (endpoint not implemented). Treat any fetch error as empty state so the page renders gracefully rather than showing error UI. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-02 22:33:41 +00:00
CC WorkerandClaude Sonnet 4.6	0dd18c4fd4	fix(timetable): use fetchTimetables instead of fetchMyTimetables — service stub unimplemented app-ci-deploy / test-build-deploy (push) Has been cancelled Details timetableOnlyService.getMyTimetables is referenced but never defined; calling it throws 'is not a function' at runtime. fetchTimetables calls the implemented listTimetables endpoint. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-02 22:15:58 +00:00
CC WorkerandClaude Sonnet 4.6	5869c741d7	fix(routing): add TimetableListPage for /timetable — detail view required :timetableId app-ci-deploy / test-build-deploy (push) Has been cancelled Details Bare /timetable routed to TimetablePage which called useParams<{timetableId}>() and immediately hit !currentTimetable → "Error Loading Timetable". New TimetableListPage uses fetchMyTimetables() from timetableStore. AppRoutes now: /timetable → TimetableListPage, /timetable/:timetableId → TimetablePage. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-02 21:36:57 +00:00
CC Worker	5b6e461706	fix(canvas): separate store lifecycle from snapshot lifecycle — one store per user session prevents disposed-store crash app-ci-deploy / test-build-deploy (push) Has been cancelled Details Root cause: disposing store while React's async state update (storeReady=false) hadn't unmounted Tldraw yet caused tldraw's reactive signals to read currentPageId on a disposed store. Fix: Effect 1 creates store once per user.id (never recreated on node navigation). Effect 2 loads/reloads snapshots when context.node changes, store stays alive. Store is only disposed when user changes or component unmounts — after setStoreReady(false) has had time to unmount Tldraw cleanly via React's synchronous cleanup.	2026-06-01 06:25:15 +00:00
CC Worker	53adc74a1c	fix(canvas): defer store disposal until next store is ready — prevent tldraw reactive signals reading disposed store during async React unmount app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-01 06:18:24 +00:00
CC Worker	9a7cc86a75	fix(canvas): bypass localStoreService singleton — create store directly in effect to eliminate disposed-store reuse app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-01 06:16:07 +00:00
CC Worker	6cba932146	fix(canvas): move ensureStoreIsUsable() to AFTER snapshot load — loadSnapshot() overwrites TLINSTANCE before it could be pre-initialized app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-01 06:13:49 +00:00
CC Worker	ba829be8e9	fix(canvas): call ensureStoreIsUsable() before tldraw mount — pre-initializes TLINSTANCE/page/camera records in empty store preventing currentPageId crash app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-01 06:10:11 +00:00
CC Worker	9f58917c39	fix(canvas): sanitize snapshot session.currentPageId before loadSnapshot — stale snapshots with missing pages caused currentPageId crash app-ci-deploy / test-build-deploy (push) Has been cancelled Details - Pre-load: if session.currentPageId not in snapshot pages, reset to first available page - Post-load: if store instance.currentPageId still invalid, clear store for fresh start - On loadSnapshot error: clear store instead of silently failing with corrupt state - Root cause: teacher1 had a saved snapshot with currentPageId pointing to a deleted page	2026-06-01 06:02:19 +00:00
CC Worker	a375fbe37f	fix(canvas): clear localStoreService singleton on unmount — disposed store was returned to next mount causing currentPageId crash app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-01 03:04:29 +00:00
CC Worker	38ca23dc3e	fix(theme): add CssBaseline — MUI dark theme on Android was white text on white body background app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-01 02:52:41 +00:00
CC Worker	8fe8edb341	fix(auth): RequireAuth must use Outlet not children — React Router v6 requires Route guards to be Route elements app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-01 02:45:20 +00:00
CC Worker	143fff6414	merge: R4 error boundaries — ErrorBoundary wraps Tldraw canvas (resolve singlePlayerPage.tsx conflict with R3 state machine refactor) app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-01 02:40:28 +00:00
CC Worker	c216df8021	merge: R4 auth reliability — PKCE race fix + RequireAuth loading skeleton	2026-06-01 02:38:54 +00:00
CC Worker	f7bb84f9b8	merge: R4 TypeScript hardening H1-H6 — reduce errors 177→152 (resolve cc-graph-shapes/CCGraphNavPanel conflicts with R3)	2026-06-01 02:38:50 +00:00
CC Worker	cbff4deef2	merge: R3 TypeScript fixes — cc-graph-shapes duplicates, CCGraphNavPanel, snapshotService, App.tsx simplification	2026-06-01 02:37:21 +00:00
CC Worker	85ecae7147	merge: R2 E2E canvas tests — 3 Playwright specs with beforeAll skip guards	2026-06-01 02:37:15 +00:00
CC Worker	8a79675497	merge: R2 bundle split — 3.3MB → 8 vendor chunks (largest 1.1MB)	2026-06-01 02:37:15 +00:00
CC Worker	6951bc1700	merge: R2 remove Tailwind — drop build pipeline, add tailwind-compat.css shim	2026-06-01 02:37:15 +00:00
CC Worker	e6f6bd5c3a	merge: R2 tldraw token bridge + DarkModeSync — bridge --cc-* to tldraw --color-* layer	2026-06-01 02:37:10 +00:00
CC Worker	b3ec09fbef	merge: R2 color token sweep — replace hardcoded hex with --cc-* tokens	2026-06-01 02:37:07 +00:00
CC Worker	765573163d	feat(ts): R4 TypeScript hardening H1-H6 — reduce errors 177→152 H1: CCGraphNavPanel — useMemo import + LogCategory fix H2: CCTimetableLessonNodeShapeUtil — props type alignment (cc-graph-props.ts) H3: cc-graph-shapes — add missing CCTimetableLessonNode* import (was never imported) H4: CCNodeSnapshotPanel — RestartAlt import from @mui/icons-material H5: CCExamMarkerPanel + CCFilesPanelEnhanced — BlobPart cast + webkitdirectory @ts-ignore H6: TranscriptionManager — setTranscriptionCallback interface fix Plus: CCExportPdfButton BlobPart cast, SimpleUploadTest icon imports, graph-sidebar LogCategory tsc before: 177 (master) tsc after: 152 (reduction of 25 errors, well below 160 acceptable threshold)	2026-06-01 02:29:38 +00:00
CC Worker	1505adb154	feat(ux): R4 error boundaries — wrap Tldraw in ErrorBoundary (J1) - Added import for ErrorBoundary from src/components/ErrorBoundary.tsx - Wrapped {store && <Tldraw>} block in ErrorBoundary with 'Canvas failed to load — Reload' fallback - ErrorBoundary.tsx already existed with full error/reload UI - Timetable pages (J2) already have loading states via timetableStore loading flags - tsc: 177 (master baseline) → 173 on this branch (no regression)	2026-06-01 02:20:34 +00:00
CC Worker	ade0be97f6	feat(auth): R4 auth reliability — fix PKCE race condition + RequireAuth loading skeleton	2026-06-01 02:16:05 +00:00
CC Worker	96db086ecb	fix: resolve duplicate identifier in cc-graph-shapes, useMemo import in CCGraphNavPanel	2026-06-01 01:36:37 +00:00
CC Worker	6610abbd72	fix: resolve duplicate identifier in cc-graph-shapes	2026-06-01 01:35:11 +00:00
CC Worker	489c2208c5	fix: add DarkModeSync to propagate tldraw dark mode to document root tldraw v3.6 sets tl-theme__dark class on .tl-container, not data-color-mode on document.documentElement. DarkModeSync lives inside TLDrawProvider and mirrors the active color scheme to [data-color-mode] on <html>, activating --cc-* token overrides in cc-design-system.css globally.	2026-06-01 00:47:24 +00:00
CC Worker	2e3cb134d1	perf: expand manual chunks — add react/router, calendar, xyflow vendor splits index bundle: 1565kB → 1085kB (under 1500kB target) Chunks: vendor-react 163kB, vendor-calendar 274kB, vendor-xyflow 181kB added.	2026-05-31 23:31:15 +00:00
CC Worker	aca4d045b2	perf: split tldraw/MUI/supabase into separate vendor chunks	2026-05-31 23:28:11 +00:00
CC Worker	a0afbc90f5	feat: replace last hardcoded hex colors (#666 , #333 ) with --cc-* tokens in cc-youtube-embed-styles	2026-05-31 23:17:55 +00:00
CC Worker	57429f3a75	chore: remove Tailwind CSS build pipeline; replace with tailwind-compat.css shim 244 utility classes across 8 files (timetable pages, Modal, CCShapesPanel). Rather than blind inline conversion, replace @tailwind directives with a self-contained 230-line CSS shim covering all classes actually used. Build passes. Shim entries can be converted to --cc-* tokens incrementally.	2026-05-31 23:09:08 +00:00
CC Worker	01a8a59349	feat: bridge --cc-* tokens to tldraw --color-* variable layer; fix first-render theme fallback	2026-05-31 22:56:31 +00:00
CC Worker	0150ca3c32	merge: CCLiveTranscriptionShapeUtil unit tests — 26 tests (P1c)	2026-05-31 22:25:10 +00:00
CC Worker	33b9278085	merge: replace console.log with logger in CCLiveTranscriptionShapeUtil (P3b)	2026-05-31 22:25:07 +00:00
CC Worker	9196af12f8	merge: static shape styles to CSS classes + pointer-events fix (P3a) — resolve CCBaseShapeUtil conflict, update panel.css shape-title to --cc-text-inverse	2026-05-31 22:24:46 +00:00
CC Worker	f6e2ab63dd	merge: hoist ThemeProvider to App.tsx root (P2b) — resolve BasePanel conflict by keeping MUI-free version	2026-05-31 22:23:21 +00:00
CC Worker	f1c1a72f44	merge: remove MUI/styled-components from BasePanel — cc- CSS classes (P2a)	2026-05-31 22:22:31 +00:00
CC Worker	1e7b387b43	merge: --cc-* CSS variable system + design tokens (P1b)	2026-05-31 22:22:27 +00:00
CC Worker	135ba4d26d	merge: dirty-flag auto-save in SharedStoreService (P1a)	2026-05-31 22:22:27 +00:00
CC Worker	8c1623256b	merge: canvas core stability — TLStore useRef + single-effect state machine (P0a/P0b)	2026-05-31 22:22:19 +00:00
CC Worker	b246106876	Add CCLiveTranscriptionShapeUtil unit tests (26 passing)	2026-05-31 22:20:43 +00:00
CC Worker	d5a7464e15	fix(logger): remove unused CC_BASE_STYLE_CONSTANTS import from CCBaseShapeUtil	2026-05-31 22:10:08 +00:00
CC Worker	061cd22748	fix(shape-css): add pointer-events:all to header/toolbar; fix hardcoded white on lock icon - .cc-shape-header and .cc-shape-toolbar button were missing pointer-events:all, causing toolbar buttons to be unclickable inside tldraw canvas - Replace color:'white' on lock indicator with var(--cc-text-inverse)	2026-05-31 22:10:08 +00:00
CC Worker	55da04a3f7	refactor(shape-css): move static shape styles to CSS classes and drop unused constants import	2026-05-31 21:48:09 +00:00
CC Worker	2a6359e247	feat: extract static shape styles to CSS classes in CCBaseShapeUtil	2026-05-31 21:46:33 +00:00
CC Worker	3afba919c4	P4.2-W: replace console.log with logger in CCLiveTranscriptionShapeUtil	2026-05-31 21:37:45 +00:00
kcar	07ceef1294	refactor(theme): hoist ThemeProvider to App.tsx root	2026-05-31 21:24:05 +00:00
CC Worker	50c7bb68bb	refactor: remove MUI and styled-components from BasePanel\n\n- Replace MUI Button/Menu/MenuItem with cc-btn + cc-menu + native div/button\n- Replace MUI icons with inline SVG icons\n- Replace MUI ThemeProvider/useMediaQuery with dataset/colorMode\n- Preserve TldrawUiButton for pin control in panel header\n- Minor: keep local panel state instead of MUI Menu open state	2026-05-31 21:21:06 +00:00
CC Worker	3ffbb11552	fix: restore design-system files accidentally reverted in prior commit Commit `669a661` had a stale staged deletion of cc-design-system.css and reverted three other CSS-variable files. This commit restores them to the state from `cd37771` (adopt --cc-* CSS variable system).	2026-05-31 21:15:13 +00:00
CC Worker	669a6616d8	fix(design-system): replace hardcoded color:white in CCBaseShapeUtil with --cc-text-inverse	2026-05-31 21:13:14 +00:00
CC Worker	65bce2c52d	fix(auto-save): dirty-flag pattern in SharedStoreService Replaces JSON.stringify snapshot comparison with a store.listen() dirty flag. Eliminates 5-15ms main-thread serialize on every poll tick when canvas is idle.	2026-05-31 21:09:38 +00:00
CC Worker	cd37771c52	adopt --cc-* CSS variable system	2026-05-31 21:05:04 +00:00
CC Worker	df59207add	Add CCLiveTranscriptionShapeUtil unit tests (26 passing)	2026-05-31 21:01:56 +00:00
CC Worker	2d15b7cc03	feat: replace triple context.node useEffect with single state machine	2026-05-31 20:51:22 +00:00
CC Worker	d3bd25d544	fix: remove TLStore from useState and dead state vars in singlePlayerPage	2026-05-31 20:41:51 +00:00
		`@@ -0,0 +1,2 @@`
							`export { default as ExamDashboardPage } from './ExamDashboardPage';`
							`export { default as ExamTemplateSetupPage } from './setup/ExamTemplateSetupPage';`