fix(excalidraw): pin React 18.3.1 exact version (esm.sh was resolving to React 19)

frontend/excalidraw-diag.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head><meta charset="UTF-8"><title>Excalidraw Diagnostic</title>
+<style>
+  body { font-family: monospace; background:#1e1e1e; color:#ddd; padding:20px; }
+  .pass { color:#4caf50; } .fail { color:#f44336; } .info { color:#ff9800; }
+  pre { background:#2d2d2d; padding:10px; border-radius:4px; overflow-x:auto; }
+</style>
+</head>
+<body>
+<h2>Excalidraw Diagnostic</h2>
+<pre id="log"></pre>
+
+<script type="module">
+const log = document.getElementById('log');
+function add(msg, cls='') {
+  log.innerHTML += `<span class="${cls}">${msg}</span>\n`;
+}
+
+add('--- Step 1: Testing esm.sh connectivity ---');
+try {
+  const res = await fetch('https://esm.sh/react@18', { method: 'HEAD' });
+  add(`✓ esm.sh reachable (HTTP ${res.status})`, 'pass');
+} catch(e) {
+  add(`✗ esm.sh unreachable: ${e.message}`, 'fail');
+}
+
+add('\n--- Step 2: Importing React ---');
+try {
+  const React = await import('https://esm.sh/react@18');
+  add(`✓ React imported (keys: ${Object.keys(React.default||React).slice(0,5).join(',')})`, 'pass');
+  window.React = React;
+} catch(e) {
+  add(`✗ React import failed: ${e.message}`, 'fail');
+}
+
+add('\n--- Step 3: Importing ReactDOM ---');
+try {
+  const ReactDOM = await import('https://esm.sh/react-dom@18');
+  add(`✓ ReactDOM imported`, 'pass');
+  window.ReactDOM = ReactDOM;
+} catch(e) {
+  add(`✗ ReactDOM import failed: ${e.message}`, 'fail');
+}
+
+add('\n--- Step 4: Importing Excalidraw ---');
+try {
+  window.EXCALIDRAW_ASSET_PATH = 'https://esm.sh/@excalidraw/[email protected]/dist/prod/';
+  const ExcalidrawLib = await import('https://esm.sh/@excalidraw/[email protected]');
+  add(`✓ Excalidraw imported (keys: ${Object.keys(ExcalidrawLib).slice(0,8).join(',')})`, 'pass');
+  window.ExcalidrawLib = ExcalidrawLib;
+} catch(e) {
+  add(`✗ Excalidraw import failed: ${e.message}`, 'fail');
+}
+
+add('\n--- Step 5: CSP Check ---');
+add('Check browser console (F12) for CSP violation messages', 'info');
+add('Look for: "Refused to load the script..." or "violates the following CSP directive..."', 'info');
+
+add('\n--- Step 6: Browser Info ---');
+add(`User-Agent: ${navigator.userAgent}`, 'info');
+add(`ES Modules: ${typeof import.meta !== 'undefined' ? 'supported' : 'NOT supported'}`, 'info');
+
+add('\n=== Diagnostic complete ===');
+add('If all ✓ above: Excalidraw should work. Check F12 console for errors.', 'info');
+add('If any ✗: That\'s the problem. Share the error message.', 'info');
+</script>
+</body>
+</html>

frontend/excalidraw-diag2.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head><meta charset="UTF-8"><title>Excalidraw Render Test</title>
+<style>
+  body { font-family:monospace; background:#1e1e1e; color:#ddd; padding:20px; }
+  .pass { color:#4caf50; } .fail { color:#f44336; }
+  pre { background:#2d2d2d; padding:10px; border-radius:4px; }
+  #app { margin-top:20px; border:1px dashed #555; min-height:100px; padding:10px; }
+</style>
+</head>
+<body>
+<h2>Excalidraw Render Diagnostic</h2>
+<pre id="log"></pre>
+<div id="app"></div>
+
+<script type="module">
+import React from "https://esm.sh/react@18";
+import ReactDOM from "https://esm.sh/react-dom@18/client";
+const log = document.getElementById('log');
+function add(msg, cls='') { log.innerHTML += `<span class="${cls}">${msg}</span>\n`; }
+
+add('--- Step 1: ReactDOM client ---');
+try {
+  add(`✓ createRoot: ${typeof ReactDOM.createRoot}`, 'pass');
+} catch(e) {
+  add(`✗ ${e.message}`, 'fail');
+}
+
+add('\n--- Step 2: Testing basic React render ---');
+try {
+  const root = ReactDOM.createRoot(document.getElementById('app'));
+  root.render(React.createElement('div', null, 'Hello from React 18!'));
+  add('✓ Basic React render OK', 'pass');
+} catch(e) {
+  add(`✗ ${e.message}`, 'fail');
+}
+
+add('\n--- Step 3: Loading Excalidraw ---');
+try {
+  window.EXCALIDRAW_ASSET_PATH = 'https://esm.sh/@excalidraw/[email protected]/dist/prod/';
+  const ExcalidrawLib = await import('https://esm.sh/@excalidraw/[email protected]');
+  add(`✓ Excalidraw loaded`, 'pass');
+  
+  const { Excalidraw } = ExcalidrawLib;
+  add(`  Excalidraw component type: ${typeof Excalidraw}`, 'info');
+  
+  add('\n--- Step 4: Rendering Excalidraw ---');
+  const root2 = ReactDOM.createRoot(document.getElementById('app'));
+  try {
+    root2.render(
+      React.createElement(Excalidraw, {
+        initialData: {
+          elements: [],
+          appState: { viewBackgroundColor: '#ffffff' },
+          files: {}
+        },
+        theme: 'dark',
+        excalidrawRef: (api) => {
+          add('✓ excalidrawRef CALLBACK FIRED! Excalidraw is mounted!', 'pass');
+        }
+      })
+    );
+    add('  render() called - waiting for excalidrawRef callback...', 'info');
+  } catch(e) {
+    add(`✗ RENDER ERROR: ${e.message}`, 'fail');
+    add(`  Stack: ${e.stack}`, 'info');
+  }
+} catch(e) {
+  add(`✗ ${e.message}`, 'fail');
+  add(`  Stack: ${e.stack}`, 'info');
+}
+</script>
+</body>
+</html>

frontend/excalidraw-diag3.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head><meta charset="UTF-8"><title>Excalidraw Error Capture</title>
+<style>
+  body { font-family:monospace; background:#1e1e1e; color:#ddd; padding:20px; }
+  .pass { color:#4caf50; } .fail { color:#f44336; }
+  pre { background:#2d2d2d; padding:10px; border-radius:4px; }
+  #app { margin-top:20px; border:1px dashed #555; min-height:100px; padding:10px; }
+</style>
+</head>
+<body>
+<h2>Excalidraw Error Boundary Test</h2>
+<pre id="log"></pre>
+<div id="app"></div>
+
+<script type="module">
+import React from "https://esm.sh/react@18";
+import ReactDOM from "https://esm.sh/react-dom@18/client";
+const log = document.getElementById('log');
+function add(msg, cls='') { log.innerHTML += `<span class="${cls}">${msg}</span>\n`; }
+
+// Error boundary to catch rendering errors
+class ErrorBoundary extends React.Component {
+  constructor(props) { super(props); this.state = { error: null }; }
+  static getDerivedStateFromError(error) { return { error }; }
+  componentDidCatch(error, info) {
+    add(`✗ REACT ERROR CAUGHT: ${error.message}`, 'fail');
+    add(`  Stack: ${(error.stack||'').split('\n').slice(0,5).join('\n')}`, 'info');
+  }
+  render() {
+    if (this.state.error) {
+      return React.createElement('div', { style: {color:'red',padding:'20px'} },
+        `Error: ${this.state.error.message}`
+      );
+    }
+    return this.props.children;
+  }
+}
+
+add('Loading Excalidraw...');
+try {
+  window.EXCALIDRAW_ASSET_PATH = 'https://esm.sh/@excalidraw/[email protected]/dist/prod/';
+  const ExcalidrawLib = await import('https://esm.sh/@excalidraw/[email protected]');
+  const { Excalidraw } = ExcalidrawLib;
+  
+  add(`Excalidraw keys: ${Object.keys(ExcalidrawLib).slice(0,8).join(', ')}`, 'info');
+  add(`Excalidraw itself: ${typeof Excalidraw}`, 'info');
+  if (typeof Excalidraw === 'function') {
+    add(`  .displayName: ${Excalidraw.displayName || 'none'}`, 'info');
+    add(`  .name: ${Excalidraw.name || 'none'}`, 'info');
+  }
+  
+  // Try rendering with error boundary
+  const root = ReactDOM.createRoot(document.getElementById('app'));
+  
+  try {
+    root.render(
+      React.createElement(ErrorBoundary, null,
+        React.createElement(Excalidraw, {
+          theme: 'dark',
+          excalidrawRef: (api) => {
+            add('✓ excalidrawRef CALLBACK FIRED!', 'pass');
+          },
+          onChange: () => {
+            add('  onChange called', 'info');
+          },
+          onPointerUpdate: () => {
+            // noisy, skip
+          }
+        })
+      )
+    );
+    add('render() executed - waiting...', 'info');
+  } catch(e) {
+    add(`✗ RENDER CRASH: ${e.message}`, 'fail');
+    add(`  ${e.stack}`, 'info');
+  }
+} catch(e) {
+  add(`✗ IMPORT ERROR: ${e.message}`, 'fail');
+  add(`  ${e.stack}`, 'info');
+}
+
+add('\nOpen browser console (F12) for more errors.', 'info');
+</script>
+</body>
+</html>

frontend/excalidraw-editor.html

@@ -91,8 +91,8 @@
 
   <!-- Import React, ReactDOM, and Excalidraw in a single module (order matters!) -->
   <script type="module">
-    import React from "https://esm.sh/react@18";
-    import ReactDOM from "https://esm.sh/react-dom@18";
+    import React from "https://esm.sh/react@18.3.1";
+    import ReactDOM from "https://esm.sh/react-dom@18.3.1";
     import * as ExcalidrawLib from "https://esm.sh/@excalidraw/[email protected]";
 
     window.React = React;