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)

src/pages/tldraw/singlePlayerPage.tsx

@@ -34,6 +34,7 @@ import '../../utils/tldraw/tldraw.css';
 // App debug
 import { logger } from '../../debugConfig';
 import { CircularProgress, Alert, Snackbar } from '@mui/material';
+import { ErrorBoundary } from '../../components/ErrorBoundary';
 import { getThemeFromLabel } from '../../utils/tldraw/cc-base/cc-graph/cc-graph-styles';
 import { NodeData } from '../../types/graph-shape';
 import { NavigationNode } from '../../types/navigation';
@@ -513,6 +514,12 @@ export default function SinglePlayerPage() {
                 </Alert>
             </Snackbar>
 
+            <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>
+            }>
             {store && <Tldraw
                 user={tldrawUser}
                 store={store}
@@ -559,6 +566,7 @@ export default function SinglePlayerPage() {
                     }
                 }}
             />}
+            </ErrorBoundary>
         </div>
     );
 }