Initial Vite migration setup

src/Sidebar.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import type { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/dist/types/excalidraw/types';
+import { 
+  FillStyle, 
+  StrokeStyle, 
+  Arrowhead, 
+  ExcalidrawElement, 
+  FractionalIndex, 
+  PointBinding, 
+  ExcalidrawTextElement, 
+  ExcalidrawArrowElement 
+} from '../packages/element/src/types';
+import { Radians, LocalPoint } from '../packages/math/src/types';
+import { pointFrom } from '../packages/math/src/point';
+
+interface SidebarProps {
+  excalidrawAPI: ExcalidrawImperativeAPI | null;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ excalidrawAPI }) => {
+  const addRectangle = () => {
+    if (!excalidrawAPI) return;
+    const elements = [
+      {
+        id: 'a1',
+        type: 'rectangle',
+        x: 100,
+        y: 100,
+        width: 200,
+        height: 100,
+        text: '',
+        strokeColor: '#000000',
+        backgroundColor: '#ffffff',
+        fillStyle: 'solid' as FillStyle,
+        strokeWidth: 1,
+        strokeStyle: 'solid' as StrokeStyle,
+        roughness: 0,
+        opacity: 100,
+        seed: 1,
+        angle: 0 as Radians,
+        startBinding: null,
+        endBinding: null,
+        lastCommittedPoint: null,
+        startArrowhead: null,
+        endArrowhead: 'arrow',
+        roundness: null,
+        version: 1,
+        versionNonce: 1,
+        isDeleted: false,
+        groupIds: [],
+        frameId: null,
+        boundElements: [],
+        updated: Date.now(),
+        link: null,
+        locked: false,
+        index: 'a1' as FractionalIndex
+      } as ExcalidrawElement,
+    ] as readonly ExcalidrawElement[];
+    excalidrawAPI.updateScene({ elements });
+  };
+
+  const addTemplate = () => {
+    if (!excalidrawAPI) return;
+    const elements = [
+      {
+        id: 'text-1',
+        type: 'text',
+        x: 150,
+        y: 150,
+        width: 100,
+        height: 30,
+        text: 'Hello World',
+        strokeColor: '#000000',
+        backgroundColor: 'transparent',
+        fillStyle: 'solid' as FillStyle,
+        strokeWidth: 1,
+        strokeStyle: 'solid' as StrokeStyle,
+        roughness: 1,
+        opacity: 100,
+        seed: 1,
+        angle: 0 as Radians,
+        originalText: 'Hello World',
+        lineHeight: 25 as number & { _brand: 'unitlessLineHeight' },
+        fontSize: 20,
+        fontFamily: 1,
+        textAlign: 'left',
+        verticalAlign: 'top',
+        containerId: null,
+        autoResize: true,
+        roundness: null,
+        version: 1,
+        versionNonce: 1,
+        isDeleted: false,
+        groupIds: [],
+        frameId: null,
+        boundElements: [],
+        updated: Date.now(),
+        link: null,
+        locked: false,
+        index: 'a0' as FractionalIndex
+      } as ExcalidrawTextElement,
+      {
+        id: 'arrow-1',
+        type: 'arrow',
+        x: 100,
+        y: 100,
+        width: 100,
+        height: 100,
+        strokeColor: '#000000',
+        backgroundColor: 'transparent',
+        fillStyle: 'solid' as FillStyle,
+        strokeWidth: 1,
+        strokeStyle: 'solid' as StrokeStyle,
+        roughness: 1,
+        opacity: 100,
+        seed: 1,
+        angle: 0 as Radians,
+        points: [pointFrom(100, 100), pointFrom(200, 200)] as readonly LocalPoint[],
+        lastCommittedPoint: pointFrom(200, 200),
+        startBinding: null,
+        endBinding: null,
+        startArrowhead: null,
+        endArrowhead: null,
+        elbowed: false,
+        roundness: null,
+        version: 1,
+        versionNonce: 1,
+        isDeleted: false,
+        groupIds: [],
+        frameId: null,
+        boundElements: [],
+        updated: Date.now(),
+        link: null,
+        locked: false,
+        customData: {},
+        index: 'a1' as FractionalIndex
+      } as ExcalidrawArrowElement
+    ];
+
+    excalidrawAPI.updateScene({ elements });
+  };
+
+  const saveDiagram = () => {
+    if (!excalidrawAPI) return;
+    const elements = excalidrawAPI.getSceneElements();
+    console.log('Saving diagram:', elements);
+  };
+
+  return (
+    <div style={{ width: '200px', padding: '10px', borderRight: '1px solid #ccc' }}>
+      <button onClick={addRectangle}>Add Rectangle</button>
+      <button onClick={addTemplate}>Add Template</button>
+      <button onClick={saveDiagram}>Save Diagram</button>
+    </div>
+  );
+};
+
+export default Sidebar;

src/index.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { Excalidraw } from '@excalidraw/excalidraw';
+import type { ExcalidrawImperativeAPI, AppState } from '@excalidraw/excalidraw/dist/types/excalidraw/types';
+import type { ExcalidrawElement as OrderedExcalidrawElement } from '@excalidraw/element/types';
+import type { BinaryFiles } from '@excalidraw/excalidraw/dist/types/excalidraw/types';
+import Sidebar from './Sidebar';
+
+// Import CSS directly
+import './styles/excalidraw-overrides.css';
+import '@excalidraw/excalidraw/dist/excalidraw.css';
+
+console.log('Script loaded - looking for root element');
+
+const rootElement = document.getElementById('app');
+if (!rootElement) {
+  console.error('Failed to find root element');
+  throw new Error('Failed to find the root element');
+}
+
+console.log('Root element found, creating React root');
+const root = ReactDOM.createRoot(rootElement);
+
+const App = () => {
+  console.log('Rendering App component');
+  const [excalidrawAPI, setExcalidrawAPI] = React.useState<ExcalidrawImperativeAPI | null>(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<Error | null>(null);
+
+  React.useEffect(() => {
+    try {
+      // Initialize any required Excalidraw dependencies
+      setLoading(false);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+      setLoading(false);
+    }
+  }, []);
+
+  if (loading) {
+    return <div>Loading Excalidraw...</div>;
+  }
+
+  if (error) {
+    return <div>Error loading Excalidraw: {error.message}</div>;
+  }
+
+  const onChange = (
+    elements: readonly OrderedExcalidrawElement[], 
+    appState: AppState, 
+    files: BinaryFiles
+  ) => {
+    console.log('Excalidraw state changed:', elements, appState, files);
+  };
+
+  const onPointerUpdate = (payload: { pointer: { x: number; y: number } }) => {
+    console.log('Excalidraw pointer update:', payload);
+  };
+
+  return (
+    <div style={{ display: 'flex' }}>
+      <Sidebar excalidrawAPI={excalidrawAPI} />
+      <div style={{ height: '500px', width: '800px' }}>
+        <Excalidraw
+          excalidrawAPI={(api: ExcalidrawImperativeAPI) => {
+            setExcalidrawAPI(api);
+          }}
+          onChange={onChange}
+          onPointerUpdate={onPointerUpdate}
+          initialData={{
+            appState: {
+              viewBackgroundColor: '#ffffff',
+              width: 800,
+              height: 500,
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+console.log('Starting React render');
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+console.log('Render completed');

src/styles/excalidraw-overrides.css

@@ -0,0 +1,16 @@
+/* Fix font-face descriptors */
+@font-face {
+  font-family: 'Virgil';
+  src: url('/node_modules/@excalidraw/excalidraw/dist/Virgil.woff2') format('woff2');
+}
+
+/* Fix align-items rule */
+.excalidraw {
+  align-items: normal !important;
+}
+
+/* Remove problematic rules */
+.excalidraw .invalid-selector,
+.excalidraw .another-invalid-selector {
+  /* These intentionally left blank to override bad selectors */
+}