merge: R4 error boundaries — ErrorBoundary wraps Tldraw canvas (resolve singlePlayerPage.tsx conflict with R3 state machine refactor)

src/pages/tldraw/singlePlayerPage.tsx

@@ -32,6 +32,7 @@ import '../../utils/tldraw/tldraw.css';
 // App debug
 import { logger } from '../../debugConfig';
 import { CircularProgress, Alert, Snackbar } from '@mui/material';
+import { ErrorBoundary } from '../../components/ErrorBoundary';
 
 interface LoadingState {
     status: 'ready' | 'loading' | 'error';
@@ -342,6 +343,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>
+            }>
             {storeReady && storeRef.current && <Tldraw
                 user={tldrawUser}
                 store={storeRef.current}
@@ -386,6 +393,7 @@ export default function SinglePlayerPage() {
                     }
                 }}
             />}
+            </ErrorBoundary>
         </div>
     );
 }