UX enhancements

src/components/SpriteCanvas.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <div v-if="showContextMenu" class="fixed bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-xl shadow-2xl z-50 py-2 min-w-[200px] overflow-hidden" :style="{ left: contextMenuX + 'px', top: contextMenuY + 'px' }">
+    <div v-if="showContextMenu" @click.stop class="fixed bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-xl shadow-2xl z-50 py-2 min-w-[200px] overflow-hidden" :style="{ left: contextMenuX + 'px', top: contextMenuY + 'px' }">
       <button @click="addSprite" class="w-full px-5 py-3 text-left hover:bg-blue-50 dark:hover:bg-blue-900/30 text-gray-700 dark:text-gray-200 flex items-center gap-3 transition-colors font-medium">
         <i class="fas fa-plus text-blue-600 dark:text-blue-400"></i>
         <span>Add Sprite</span>
@@ -448,6 +448,11 @@
   });
 
   const startDrag = (event: MouseEvent) => {
+    // If the click originated from an interactive element (button, link, input), ignore drag handling
+    const target = event.target as HTMLElement;
+    if (target && target.closest('button, a, input, select, textarea')) {
+      return;
+    }
     if (!gridContainerRef.value) return;
 
     // Hide context menu if open
@@ -476,8 +481,22 @@
     dragStart(event);
   };
 
+  const pendingDrag = ref(false);
+  const latestEvent = ref<MouseEvent | null>(null);
+
   const drag = (event: MouseEvent) => {
-    dragMove(event);
+    // Store the latest event and schedule a single animation frame update
+    latestEvent.value = event;
+    if (!pendingDrag.value) {
+      pendingDrag.value = true;
+      requestAnimationFrame(() => {
+        if (latestEvent.value) {
+          dragMove(latestEvent.value);
+        }
+        pendingDrag.value = false;
+        latestEvent.value = null;
+      });
+    }
   };
 
   const removeSprite = () => {
@@ -534,12 +553,11 @@
   };
 
   onMounted(() => {
-    // Hide context menu when clicking elsewhere
-    document.addEventListener('click', hideContextMenu);
+    document.addEventListener('mouseup', stopDrag);
   });
 
   onUnmounted(() => {
-    document.removeEventListener('click', hideContextMenu);
+    document.removeEventListener('mouseup', stopDrag);
   });
 
   // Watch for background color changes