[FEAT] Add replace sprite option

src/components/SpritePreview.vue

@@ -13,6 +13,10 @@
         <i class="fas fa-arrows-alt-v text-orange-600 dark:text-orange-400 text-xs w-4"></i>
         <span>Flip Vertical</span>
       </button>
+      <button @click="replaceSprite" class="w-full px-3 py-1.5 text-left hover:bg-purple-50 dark:hover:bg-purple-900/30 text-gray-700 dark:text-gray-200 flex items-center gap-2 transition-colors text-sm">
+        <i class="fas fa-exchange-alt text-purple-600 dark:text-purple-400 text-xs w-4"></i>
+        <span>Replace Sprite</span>
+      </button>
       <button @click="openCopyToFrameModal" class="w-full px-3 py-1.5 text-left hover:bg-cyan-50 dark:hover:bg-cyan-900/30 text-gray-700 dark:text-gray-200 flex items-center gap-2 transition-colors text-sm">
         <i class="fas fa-copy text-cyan-600 dark:text-cyan-400 text-xs w-4"></i>
         <span>Copy to Frame...</span>
@@ -292,6 +296,8 @@
         </div>
       </div>
     </div>
+
+    <input ref="fileInput" type="file" accept="image/*" class="hidden" @change="handleFileChange" />
   </div>
 </template>
 
@@ -317,6 +323,7 @@
     (e: 'rotateSprite', id: string, angle: number): void;
     (e: 'flipSprite', id: string, direction: 'horizontal' | 'vertical'): void;
     (e: 'copySpriteToFrame', spriteId: string, targetLayerId: string, targetFrameIndex: number): void;
+    (e: 'replaceSprite', id: string, file: File): void;
   }>();
 
   const previewContainerRef = ref<HTMLDivElement | null>(null);
@@ -362,6 +369,8 @@
   const contextMenuY = ref(0);
   const contextMenuSpriteId = ref<string | null>(null);
   const contextMenuLayerId = ref<string | null>(null);
+  const fileInput = ref<HTMLInputElement | null>(null);
+  const replacingSpriteId = ref<string | null>(null);
 
   // Copy to frame modal state
   const showCopyToFrameModal = ref(false);
@@ -720,6 +729,27 @@
       contextMenuSpriteId.value = null;
     }
   };
+
+  const replaceSprite = () => {
+    if (contextMenuSpriteId.value && fileInput.value) {
+      replacingSpriteId.value = contextMenuSpriteId.value;
+      fileInput.value.click();
+      hideContextMenu();
+    }
+  };
+
+  const handleFileChange = (event: Event) => {
+    const input = event.target as HTMLInputElement;
+
+    if (input.files && input.files.length > 0) {
+      const file = input.files[0];
+      if (file.type.startsWith('image/') && replacingSpriteId.value) {
+        emit('replaceSprite', replacingSpriteId.value, file);
+      }
+    }
+    replacingSpriteId.value = null;
+    input.value = '';
+  };
 </script>
 
 <style scoped>

src/views/HomeView.vue

@@ -421,6 +421,7 @@
                 @rotate-sprite="rotateSprite"
                 @flip-sprite="flipSprite"
                 @copy-sprite-to-frame="copySpriteToFrame"
+                @replace-sprite="replaceSprite"
               />
             </div>
           </div>