Fix code review issues: improve animation and dragleave handling

Co-authored-by: volta2030 <65960990+volta2030@users.noreply.github.com>

Author: Copilot

imgkit/features/image_layer_events.js

@@ -239,8 +239,11 @@ class ImageLayerEvents {
     });
 
     this.layer.canvas.addEventListener("dragleave", (e) => {
-      // Remove rotating border animation class
-      this.layer.panel.classList.remove("drag-border-active");
+      // Only remove class if drag actually left the canvas (not moving to child element)
+      // Also handle case where relatedTarget is null (e.g., drag left browser window)
+      if (!e.relatedTarget || !this.layer.canvas.contains(e.relatedTarget)) {
+        this.layer.panel.classList.remove("drag-border-active");
+      }
     });
 
     this.layer.canvas.addEventListener("drop", async (e) => {

imgkit/imgpanel.css

@@ -105,15 +105,25 @@
 
 /* Rotating dotted border animation during drag-over */
 @keyframes rotating-border {
-  0% {
-    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
+  from {
+    background-position: 0 0, 100% 100%, 0 100%, 100% 0;
   }
-  100% {
-    background-position: 100% 0, 100% 100%, 0 100%, 0 0;
+  to {
+    background-position: 12px 0, calc(100% - 12px) 100%, 0 calc(100% - 12px),
+      100% 12px;
   }
 }
 
-.imgPanel.drag-border-active {
+.imgPanel.drag-border-active::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 10;
   background-image: linear-gradient(90deg, #666 50%, transparent 50%),
     linear-gradient(90deg, #666 50%, transparent 50%),
     linear-gradient(0deg, #666 50%, transparent 50%),