Animates drag cancellation

Improves user experience by animating the dragged element back to its original position when the drag operation is cancelled due to the mouse leaving the grid container.

src/managers/DragDropManager.ts

@@ -391,24 +391,44 @@ export class DragDropManager {
 
   /**
    * Cancel drag operation when mouse leaves grid container
+   * Animates clone back to original position before cleanup
    */
   private cancelDrag(): void {
-    if (!this.originalElement) return;
+    if (!this.originalElement || !this.draggedClone) return;
 
     console.log('🚫 DragDropManager: Cancelling drag - mouse left grid container');
 
-    this.cleanupAllClones();
+    // Get current clone position
+    const cloneRect = this.draggedClone.getBoundingClientRect();
     
-    this.originalElement.style.opacity = '';
-    this.originalElement.style.cursor = '';
+    // Get original element position
+    const originalRect = this.originalElement.getBoundingClientRect();
     
-    this.eventBus.emit('drag:cancelled', {
-      originalElement: this.originalElement,
-      reason: 'mouse-left-grid'
-    });
+    // Calculate distance to animate
+    const deltaX = originalRect.left - cloneRect.left;
+    const deltaY = originalRect.top - cloneRect.top;
     
-    this.cleanupDragState();
-    this.stopDragAnimation();
+    // Add transition for smooth animation
+    this.draggedClone.style.transition = 'transform 300ms ease-out';
+    this.draggedClone.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+    
+    // Wait for animation to complete, then cleanup
+    setTimeout(() => {
+      this.cleanupAllClones();
+      
+      if (this.originalElement) {
+        this.originalElement.style.opacity = '';
+        this.originalElement.style.cursor = '';
+      }
+      
+      this.eventBus.emit('drag:cancelled', {
+        originalElement: this.originalElement,
+        reason: 'mouse-left-grid'
+      });
+      
+      this.cleanupDragState();
+      this.stopDragAnimation();
+    }, 300);
   }
 
   /**