feat: enhance image handling and node deletion logic in canvas

- Introduced a new function to determine acceptable geometry for node deletion, improving synchronization checks with Convex.
- Added image dimension retrieval for uploaded files, enhancing the handling of image nodes during drag-and-drop operations.
- Updated drag-and-drop functionality to support image uploads, including error handling and user feedback for failed uploads.
- Refactored existing logic to ensure better management of optimistic node states and improve overall user experience on the canvas.

components/canvas/nodes/image-node.tsx

@@ -23,6 +23,7 @@ const ALLOWED_IMAGE_TYPES = new Set([
   "image/webp",
 ]);
 const MAX_IMAGE_BYTES = 10 * 1024 * 1024;
+const OPTIMISTIC_NODE_PREFIX = "optimistic_";
 
 type ImageNodeData = {
   storageId?: string;
@@ -80,6 +81,10 @@ export default function ImageNode({
   const hasAutoSizedRef = useRef(false);
 
   useEffect(() => {
+    if (typeof id === "string" && id.startsWith(OPTIMISTIC_NODE_PREFIX)) {
+      return;
+    }
+
     if (typeof data.width !== "number" || typeof data.height !== "number") {
       return;
     }