feat(exam): version templates on dashboard

merge: exam-marker app dashboard + /exam-marker route (S4-8)
New ExamDashboardPage + examRepository seam; dashboard nav entry; removes the old CCExamMarker viewer + dead CCExamMarkerPanel wiring (R1.1). Build green; route tests pass.
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 · 2026-06-02 23:28:26 +00:00 · 2026-06-02 22:33:41 +00:00
49 changed files with 3033 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 } 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,7 @@ const AppRoutes: React.FC = () => {
            {/* Existing Routes */}
            <Route path="/search" element={<SearxngPage />} />
            <Route path="/teacher-planner" element={<TeacherPlanner />} />
-            <Route path="/exam-marker" element={<CCExamMarker />} />
+            <Route path="/exam-marker" element={<ErrorBoundary><ExamDashboardPage /></ErrorBoundary>} />
            <Route path="/doc-intelligence/:fileId" element={<CCDocumentIntelligence />} />
            <Route path="/morphic" element={<MorphicPage />} />
            <Route path="/tldraw-dev" element={<TLDrawDevPage />} />
@@ -167,7 +193,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 components;
-@tailwind utilities;
+/* Tailwind removed — utility classes provided by tailwind-compat.css shim */
+@import './tailwind-compat.css';

 /* 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 @@
+export { default as ExamDashboardPage } from './ExamDashboardPage';
@@ -3,9 +3,19 @@ import { Link } from 'react-router-dom';
 import { AccessTime, KeyboardArrowRight, MenuBook, People, School } from '@mui/icons-material';
 import useTimetableStore from '../../stores/timetableStore';
 import { useUser } from '../../contexts/UserContext';
+import { useNeoInstitute } from '../../contexts/NeoInstituteContext';
+import { CircularProgress } from '@mui/material';
+import { logger } from '../../debugConfig';
+
+const MyClassesSkeleton = () => (
+  <div className="flex justify-center items-center h-64">
+    <CircularProgress />
+  </div>
+);

 const MyClassesPage: React.FC = () => {
  const { profile } = useUser();
+  const { selectedInstituteId } = useNeoInstitute();
  const {
    myClasses,
    classesLoading: myClassesLoading,
@@ -14,8 +24,16 @@ const MyClassesPage: React.FC = () => {
  } = useTimetableStore();

  useEffect(() => {
-    fetchMyClasses();
-  }, [fetchMyClasses]);
+    fetchMyClasses().catch((error) =>
+      logger.warn('my-classes', 'Fetch my classes failed', {
+        message: error instanceof Error ? error.message : String(error),
+      })
+    );
+  }, [fetchMyClasses, selectedInstituteId]);
+
+  if (myClassesLoading) {
+    return <MyClassesSkeleton />;
+  }

  const getRoleLabel = (role: string) => {
    switch (role) {
@@ -36,14 +54,6 @@ const MyClassesPage: React.FC = () => {
    }
  };

-  if (myClassesLoading) {
-    return (
-      <div className="flex justify-center items-center h-64">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
-      </div>
-    );
-  }
-
  if (myClassesError) {
    return (
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
@@ -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 { NodeData } from '../../types/graph-shape';
-import { NavigationNode } from '../../types/navigation';
+import { ErrorBoundary } from '../../components/ErrorBoundary';

 interface LoadingState {
    status: 'ready' | 'loading' | 'error';
@@ -67,9 +64,8 @@ export default function SinglePlayerPage() {
        status: 'ready',
        error: ''
    });
-    const [isInitialLoad, setIsInitialLoad] = useState(true);
-    const [isEditorReady, setIsEditorReady] = useState(false);
-    const [store, setStore] = useState<TLStore | TLStoreWithStatus | undefined>(undefined);
+    const storeRef = useRef<TLStore | null>(null);
+    const [storeReady, setStoreReady] = useState(false);

    // 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) {
-            logger.debug('single-player-page', '⏳ Waiting for user data');
+        if (!user) return;
+
+        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', {
-            isEditorReady,
-            hasUser: !!user,
-            userType: user.user_type,
-            username: user.username
-        });
-
-        const initializeStoreAndSnapshot = async () => {
+            setCanvasPhase('snapshot-loading');
            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
-                        snapshotService.setCurrentNodePath(nodeStoragePath);
-                        logger.debug('single-player-page', '✅ Snapshot loaded from database');
-                    } else {
-                        logger.debug('single-player-page', '⚠️ No node_storage_path found in node, skipping snapshot load', {
-                            node: context.node
-                        });
+                if (!cancelled) {
+                    // Repair store in case snapshot overwrote TLINSTANCE
+                    (store as unknown as { ensureStoreIsUsable(): void }).ensureStoreIsUsable();
+                    snapshotServiceRef.current?.setCurrentNodePath(context.node.node_storage_path);
+                    setCanvasPhase('ready');
                }
-                } else {
-                    logger.debug('single-player-page', '⚠️ No node in context, skipping snapshot load');
-                }
-
-                // 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;
+            } catch (e) {
+                if (!cancelled) setCanvasPhase('ready'); // show blank canvas on error
            }
        };

-        initializeStoreAndSnapshot();
-    }, [user, context.node]);
+        loadNodeSnapshot();
+        return () => { cancelled = true; };
+    }, [context.node?.id, storeReady]);  // re-run when node changes OR after store becomes ready

-    // Handle initial node placement
-    useEffect(() => {
-        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]);
+    // Handle navigation changes — save previous snapshot, load next one.
+    // No automatic node shape placement: the canvas shows only persisted state.

    // 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,173 @@
+/**
+ * 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,
+  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 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 (now - this.lastSaveTime >= this.config.saveInterval) {
-            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');
+        if (!this.isDirty) {
+            return;
        }
+
+        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(editor.store, snapshotCopy as Parameters<typeof loadSnapshot>[1]);
-                } else {
-                    loadSnapshot(store, snapshotCopy as Parameters<typeof loadSnapshot>[1]);
+                loadSnapshot(targetStore, snapshotCopy as any);
+                // Post-load validation: ensure instance.currentPageId is still valid
+                const instance = targetStore.get(TLINSTANCE_ID);
+                if (instance) {
+                    const pages = targetStore.allRecords().filter((r) => (r as { typeName: string }).typeName === 'page');
+                    const pageValid = pages.some((p) => p.id === instance.currentPageId);
+                    if (!pageValid) {
+                        logger.warn('snapshot-service', '⚠️ Post-load: currentPageId invalid — clearing corrupt store', { currentPageId: instance.currentPageId });
+                        targetStore.clear();
+                    }
                }
                logger.debug('snapshot-service', '✅ Snapshot loaded successfully');
            } catch (err) {
@@ -128,7 +146,8 @@ export class NavigationSnapshotService {
                if (isSchemaMigration) {
                    logger.debug('snapshot-service', 'ℹ️ Schema migration warning (non-critical)', { error: msg });
                } else {
-                    logger.warn('snapshot-service', '⚠️ Unexpected loadSnapshot error', { error: msg });
+                    logger.warn('snapshot-service', '⚠️ Unexpected loadSnapshot error — clearing store to allow fresh start', { error: msg });
+                    targetStore.clear();
                }
            }

@@ -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,96 @@
+/**
+ * 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[];
+}
@@ -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,
-          borderRadius: CC_BASE_STYLE_CONSTANTS.CONTAINER.borderRadius,
-          boxShadow: CC_BASE_STYLE_CONSTANTS.CONTAINER.boxShadow,
-          overflow: 'hidden',
-          position: 'relative',
-        }}
+          '--shape-header-color': headerColor,
+        } as React.CSSProperties}
      >
        {/* Header */}
        <div
-          style={{
-            backgroundColor: shape.props.headerColor,
-            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,
-          }}
+          className="cc-shape-header"
+          style={{ cursor: isLocked ? 'not-allowed' : 'move' }}
        >
-          <span style={{ color: 'white', fontWeight: 'bold' }}>{shape.props.title}</span>
-          <div style={{ display: 'flex', gap: '4px', alignItems: 'center', pointerEvents: 'all' }}>
+          <span className="shape-title">{shape.props.title}</span>
+          <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={{
-            position: 'absolute',
-            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,
-          }}
+          className="cc-shape-content"
+          style={{ 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
-    | CCTimetableLessonNodeShape;
+    | CCUserTeacherTimetableNodeShape;

 // 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 }) => {
-      console.log('📝 Transcription update received:', { text, metadata });
+    this.transcriptionService.setServerSegmentsCallback((segments: Array<{ text: string; start: number; end: number }>, isLastLive: boolean) => {
+      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',
-      borderLeft: '1px solid #ddd',
+      backgroundColor: 'var(--cc-navy-50)',
+      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',
-      backgroundColor: '#fff',
-      border: '1px solid #eee',
+      color: 'var(--cc-text-primary)',
+      backgroundColor: 'var(--cc-bg-canvas)',
+      border: '1px solid var(--cc-border-strong)',
    },
    activeLine: {
-      backgroundColor: '#e3f2fd',
-      border: '1px solid #2196f3',
-      color: '#1565c0',
+      backgroundColor: 'var(--cc-navy-50)',
+      border: '1px solid var(--cc-action-primary)',
+      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',
-      border: '1px solid #ddd',
+      backgroundColor: 'var(--cc-navy-50)',
+      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 { useLocation } from 'react-router-dom';
+import React, { useEffect, useRef, useMemo, useState } from 'react';
 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 { CCGraphNavPanel } from './navigation/CCGraphNavPanel'
-import { CCTranscriptionPanel } from './CCTranscriptionPanel'
+import { CCSearchPanel } from './CCSearchPanel';
+import { CCGraphNavPanel } from './navigation/CCGraphNavPanel';
+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)(() => ({
-  textTransform: 'none',
-  padding: '6px 12px',
-  gap: '8px',
-  backgroundColor: 'var(--color-panel)',
-  color: 'var(--color-text)',
-  border: '1px solid transparent',
-  transition: 'border-color 200ms ease',
-  justifyContent: 'space-between',
-  minWidth: '200px',
-  '&:hover': {
-    backgroundColor: 'var(--color-panel)',
-    borderColor: 'var(--color-text)',
-  },
-  '& .MuiSvgIcon-root': {
-    fontSize: '1.25rem',
-    color: 'inherit',
+function getIconSvg(panelId: PanelType, size = '1.25rem') {
+  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 };
+  switch (panelId) {
+    case 'cabinets':
+      return (
+        <svg {...common}>
+          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+          <polyline points="9 22 9 12 15 12 15 22" />
+        </svg>
+      );
+    case 'transcription':
+      return (
+        <svg {...common}>
+          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+          <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+          <line x1="12" y1="19" x2="12" y2="23" />
+          <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)(() => ({
-  gap: '8px',
-  padding: '8px 16px',
-  transition: 'background-color 200ms ease',
-  '&:hover': {
-    backgroundColor: 'var(--color-hover)',
-    '& .MuiListItemIcon-root': {
-      color: 'var(--color-selected)',
+function isDarkMode() {
+  if (typeof window === 'undefined') return false;
+  return document.documentElement.dataset.colorMode === 'dark' ||
+    window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 }
-  },
-  '& .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 [menuAnchorEl, setMenuAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [prefersDarkMode, setPrefersDarkMode] = useState(isDarkMode());
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);

-  // Create a dynamic theme based on TLDraw preferences
-  const theme = useMemo(() => {
-    let mode: 'light' | 'dark';
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = () => setPrefersDarkMode(isDarkMode());
+    mq.addEventListener?.('change', handler);
+    return () => mq.removeEventListener?.('change', handler);
+  }, []);

-    if (tldrawPreferences?.colorScheme === 'system') {
-      mode = prefersDarkMode ? 'dark' : 'light';
-    } else {
-      mode = tldrawPreferences?.colorScheme === 'dark' ? 'dark' : 'light';
-    }
+  const colorMode = (tldrawPreferences?.colorScheme === 'system' ? prefersDarkMode : tldrawPreferences?.colorScheme === 'dark')
+    ? 'dark'
+    : 'light';

-    return createTheme({
-      palette: {
-        mode,
-      },
-    });
-  }, [tldrawPreferences?.colorScheme, prefersDarkMode]);
+  const availablePanels = PANEL_TYPES.default;

-  const isExamMarkerRoute = location.pathname === '/exam-marker';
-  const availablePanels = isExamMarkerRoute ? PANEL_TYPES.examMarker : PANEL_TYPES.default;
+  const [currentPanelType, setCurrentPanelType] = useState<PanelType>(initialPanelType);

-  const [currentPanelType, setCurrentPanelType] = React.useState<PanelType>(
-    isExamMarkerRoute ? 'exam-marker' : initialPanelType
-  );
-  
-  // Use controlled state if provided, otherwise use internal state
-  const [internalIsExpanded, setInternalIsExpanded] = React.useState(true);
-  const [internalIsPinned, setInternalIsPinned] = React.useState(true);
+  const [internalIsExpanded, setInternalIsExpanded] = useState(true);
+  const [internalIsPinned, setInternalIsPinned] = 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 handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
-    setMenuAnchorEl(event.currentTarget);
-    onMenuOpenChange(true);
-  };
-
-  // Handle menu close
-  const handleMenuClose = () => {
-    setMenuAnchorEl(null);
-    onMenuOpenChange(false);
+  const toggleMenu = (open: boolean) => {
+    setMenuOpen(open);
+    onMenuOpenChange(open);
  };

  return (
@@ -327,55 +258,60 @@ export const BasePanel: React.FC<BasePanelProps> = ({
          }}
        >
          <div className="panel-header">
-            <ThemeProvider theme={theme}>
-              <PanelTypeButton
-                onClick={handleMenuClick}
-                endIcon={<ExpandMoreIcon />}
-                startIcon={getIconForPanel(currentPanelType)}
+            <button
+              type="button"
+              className="cc-btn cc-btn--secondary cc-panel-selector"
+              onClick={() => toggleMenu(!menuOpen)}
            >
+              <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
-                anchorEl={menuAnchorEl}
-                open={isMenuOpen}
-                onClose={handleMenuClose}
-                PaperProps={{
-                  elevation: 8,
-                  sx: {
-                    border: '1px solid var(--color-divider)',
-                    boxShadow: 'var(--shadow-popup)',
-                  }
-                }}
-              >
+            {menuOpen && (
+              <div className="cc-menu panel-type-menu" role="menu">
                {[...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>
-                      {getIconForPanel(type.id as PanelType)}
-                    </ListItemIcon>
-                    <ListItemText 
-                      primary={type.label}
-                      secondary={getDescriptionForPanel(type.id as PanelType)}
-                      primaryTypographyProps={{
-                        sx: { color: 'var(--color-text)' }
-                      }}
-                      secondaryTypographyProps={{
-                        sx: { color: 'var(--color-text-secondary)' }
-                      }}
-                    />
-                  </StyledMenuItem>
+                      <span className="cc-menu-item-icon">
+                        {getIconSvg(type.id as PanelType)}
+                      </span>
+                      <span className="cc-menu-item-text">
+                        <span className="cc-menu-item-primary">{type.label}</span>
+                        <span className="cc-menu-item-secondary">
+                          {type.id === 'cabinets' && 'Manage file cabinets'}
+                          {type.id === 'transcription' && 'Record and transcribe lessons'}
+                          {type.id === 'cc-shapes' && 'Add shapes and elements to your canvas'}
+                          {type.id === 'slides' && 'Manage presentation slides'}
+                          {type.id === 'youtube' && 'Embed YouTube videos'}
+                          {type.id === 'graph' && 'View and manage graph connections'}
+                          {type.id === 'search' && 'Search through your content'}
+                          {type.id === 'navigation' && 'Navigate through different contexts'}
+                          {type.id === 'node-snapshot' && 'Manage node snapshots'}
+                        </span>
+                      </span>
+                    </button>
                  ))}
-              </Menu>
-            </ThemeProvider>
+              </div>
+            )}

            <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	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 @@`
				`export { default as ExamDashboardPage } from './ExamDashboardPage';`