From 784c95555fa55d58e27968c0da231359d8a171b2 Mon Sep 17 00:00:00 2001
From: root <root@adhd.sh>
Date: Wed, 17 Dec 2025 22:07:26 +0100
Subject: [PATCH] [FEAT] Improved UI

---
 src/components/SpriteCanvas.vue      | 193 ++++++++++++++++-----------
 src/components/utilities/Tooltip.vue |  79 +++++++++++
 src/views/HomeView.vue               |  44 +++---
 3 files changed, 218 insertions(+), 98 deletions(-)
 create mode 100644 src/components/utilities/Tooltip.vue

diff --git a/src/components/SpriteCanvas.vue b/src/components/SpriteCanvas.vue
index 215815d..7e9124d 100644
--- a/src/components/SpriteCanvas.vue
+++ b/src/components/SpriteCanvas.vue
@@ -29,102 +29,132 @@
     </div>
   </Teleport>
 
-  <div class="space-y-6 w-full max-w-full overflow-hidden">
-    <div class="bg-cyan-50 dark:bg-cyan-900/20 rounded-lg p-3 border border-cyan-100 dark:border-cyan-800/50 flex items-start gap-3">
-      <i class="fas fa-info-circle text-cyan-600 dark:text-cyan-400 mt-0.5 flex-shrink-0"></i>
-      <p class="text-sm text-cyan-800 dark:text-cyan-200"><span class="font-semibold">Tip:</span> Right-click any sprite to open the context menu for quick actions: add, replace, or remove sprites.</p>
+  <div class="space-y-3 w-full max-w-full overflow-hidden">
+    <!-- Compact tip banner -->
+    <div class="bg-cyan-50/80 dark:bg-cyan-900/20 rounded-md px-3 py-2 border border-cyan-100 dark:border-cyan-800/50 flex items-center gap-2">
+      <i class="fas fa-lightbulb text-xs text-cyan-500 dark:text-cyan-400"></i>
+      <p class="text-xs text-cyan-700 dark:text-cyan-300"><span class="font-medium">Tip:</span> Right-click sprites for quick actions • Hold Ctrl/Cmd to multi-select • Delete key removes selection</p>
     </div>
 
-    <section class="w-full bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-1 shadow-sm">
-      <div class="flex flex-wrap items-center gap-1">
-        <!-- Toggles Group -->
-        <div class="flex items-center gap-1 p-1">
-          <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors" title="Toggle Multi-Select Mode">
-            <input id="multi-select-mode" type="checkbox" v-model="isMultiSelectMode" class="w-4 h-4 rounded text-blue-600 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600" />
-            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Multi-Select</span>
-          </label>
-          <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors" title="Show Selection Borders">
-            <input id="show-active-border" type="checkbox" v-model="showActiveBorder" class="w-4 h-4 rounded text-blue-600 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600" />
-            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Borders</span>
-          </label>
-          <div class="w-px h-4 bg-gray-200 dark:bg-gray-700 mx-1"></div>
-          <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors" title="Pixel Perfect">
-            <input id="pixel-perfect" type="checkbox" v-model="settingsStore.pixelPerfect" class="w-4 h-4 rounded text-blue-600 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600" />
-            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Pixel Perfect</span>
-          </label>
-          <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors" title="Cell Swapping">
-            <input id="allow-cell-swap" type="checkbox" v-model="allowCellSwap" class="w-4 h-4 rounded text-blue-600 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600" />
-            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Swap</span>
-          </label>
-          <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors" title="Compare Sprites">
-            <input id="show-all-sprites" type="checkbox" v-model="showAllSprites" class="w-4 h-4 rounded text-blue-600 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600" />
-            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Compare</span>
-          </label>
-        </div>
-
-        <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-1"></div>
-
-        <!-- Spacing & Grid Group -->
-        <div class="flex items-center gap-1 p-1">
-          <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors" title="Negative Spacing">
-            <input id="negative-spacing" type="checkbox" v-model="settingsStore.negativeSpacingEnabled" class="w-4 h-4 rounded text-blue-600 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600" />
-            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Spacing</span>
-          </label>
-          <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors" title="Checkerboard Background">
-            <input id="checkerboard" type="checkbox" v-model="settingsStore.checkerboardEnabled" class="w-4 h-4 rounded text-blue-600 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600" />
-            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Grid</span>
-          </label>
-        </div>
-
-        <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-1"></div>
-
-        <!-- Background Color -->
-        <div class="flex items-center gap-2 px-3 py-2">
-          <label for="bg-color" class="text-sm font-medium text-gray-600 dark:text-gray-400">Bg:</label>
-          <div class="flex items-center gap-2">
-            <select
-              id="bg-color"
-              v-model="bgSelectValue"
-              class="px-2 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 dark:text-gray-200 text-sm focus:ring-2 focus:ring-blue-500 outline-none transition-all cursor-pointer hover:border-gray-400 dark:hover:border-gray-500"
+    <!-- Compact Toolbar -->
+    <section class="w-full bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
+      <div class="flex flex-wrap items-center gap-0.5 px-1.5 py-1">
+        <!-- Selection Tools -->
+        <div class="flex items-center">
+          <Tooltip text="Select multiple sprites at once. Also works with Ctrl/Cmd+Click.">
+            <button
+              @click="isMultiSelectMode = !isMultiSelectMode"
+              :class="['px-2 py-1 rounded text-xs font-medium transition-all cursor-pointer', isMultiSelectMode ? 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300' : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700']"
             >
-              <option value="transparent">Transparent</option>
-              <option value="#ffffff">White</option>
-              <option value="#000000">Black</option>
-              <option value="#f9fafb">Light Gray</option>
-              <option value="custom">Custom</option>
-            </select>
-            <div v-if="bgSelectValue === 'custom'" class="relative w-6 h-6 rounded-full overflow-hidden border border-gray-300 dark:border-gray-600 shadow-sm">
-              <input type="color" v-model="customColor" @input="settingsStore.setBackgroundColor(customColor)" class="absolute -top-2 -left-2 w-10 h-10 cursor-pointer p-0 border-0" />
-            </div>
+              <i class="fas fa-object-group mr-1"></i>Multi
+            </button>
+          </Tooltip>
+          <Tooltip text="Show blue borders around selected sprites for visibility.">
+            <button
+              @click="showActiveBorder = !showActiveBorder"
+              :class="['px-2 py-1 rounded text-xs font-medium transition-all cursor-pointer', showActiveBorder ? 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300' : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700']"
+            >
+              <i class="fas fa-vector-square mr-1"></i>Borders
+            </button>
+          </Tooltip>
+        </div>
+
+        <div class="w-px h-4 bg-gray-200 dark:bg-gray-600 mx-1"></div>
+
+        <!-- Display Options -->
+        <div class="flex items-center">
+          <Tooltip text="Disable anti-aliasing for crisp pixel art rendering.">
+            <button
+              @click="settingsStore.pixelPerfect = !settingsStore.pixelPerfect"
+              :class="['px-2 py-1 rounded text-xs font-medium transition-all cursor-pointer', settingsStore.pixelPerfect ? 'bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300' : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700']"
+            >
+              <i class="fas fa-th mr-1"></i>Pixel
+            </button>
+          </Tooltip>
+          <Tooltip text="Drag sprites between cells to swap their positions.">
+            <button
+              @click="allowCellSwap = !allowCellSwap"
+              :class="['px-2 py-1 rounded text-xs font-medium transition-all cursor-pointer', allowCellSwap ? 'bg-purple-100 dark:bg-purple-900/40 text-purple-700 dark:text-purple-300' : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700']"
+            >
+              <i class="fas fa-exchange-alt mr-1"></i>Swap
+            </button>
+          </Tooltip>
+          <Tooltip text="Show ghost overlays of all sprites for alignment comparison.">
+            <button
+              @click="showAllSprites = !showAllSprites"
+              :class="['px-2 py-1 rounded text-xs font-medium transition-all cursor-pointer', showAllSprites ? 'bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300' : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700']"
+            >
+              <i class="fas fa-clone mr-1"></i>Compare
+            </button>
+          </Tooltip>
+        </div>
+
+        <div class="w-px h-4 bg-gray-200 dark:bg-gray-600 mx-1"></div>
+
+        <!-- Canvas Options -->
+        <div class="flex items-center">
+          <Tooltip text="Add padding around sprites to prevent bleeding artifacts.">
+            <button
+              @click="settingsStore.negativeSpacingEnabled = !settingsStore.negativeSpacingEnabled"
+              :class="['px-2 py-1 rounded text-xs font-medium transition-all cursor-pointer', settingsStore.negativeSpacingEnabled ? 'bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-300' : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700']"
+            >
+              <i class="fas fa-compress-alt mr-1"></i>Spacing
+            </button>
+          </Tooltip>
+          <Tooltip text="Show checkerboard pattern to visualize transparent areas.">
+            <button
+              @click="settingsStore.checkerboardEnabled = !settingsStore.checkerboardEnabled"
+              :class="['px-2 py-1 rounded text-xs font-medium transition-all cursor-pointer', settingsStore.checkerboardEnabled ? 'bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200' : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700']"
+            >
+              <i class="fas fa-chess-board mr-1"></i>Grid
+            </button>
+          </Tooltip>
+          <Tooltip text="Display X,Y offset coordinates on each sprite.">
+            <button
+              @click="showOffsetLabels = !showOffsetLabels"
+              :class="['px-2 py-1 rounded text-xs font-medium transition-all cursor-pointer', showOffsetLabels ? 'bg-cyan-100 dark:bg-cyan-900/40 text-cyan-700 dark:text-cyan-300' : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700']"
+            >
+              <i class="fas fa-tag mr-1"></i>Labels
+            </button>
+          </Tooltip>
+        </div>
+
+        <div class="w-px h-4 bg-gray-200 dark:bg-gray-600 mx-1"></div>
+
+        <!-- Background Color (Compact) -->
+        <div class="flex items-center gap-1.5 px-1">
+          <span class="text-[10px] font-medium text-gray-400 uppercase">Bg</span>
+          <select v-model="bgSelectValue" class="px-1.5 py-0.5 text-xs border border-gray-200 dark:border-gray-600 rounded bg-gray-50 dark:bg-gray-700 dark:text-gray-200 outline-none cursor-pointer hover:border-gray-300">
+            <option value="transparent">None</option>
+            <option value="#ffffff">White</option>
+            <option value="#000000">Black</option>
+            <option value="#f9fafb">Gray</option>
+            <option value="custom">Pick</option>
+          </select>
+          <div v-if="bgSelectValue === 'custom'" class="relative w-5 h-5 rounded overflow-hidden border border-gray-300 dark:border-gray-600">
+            <input type="color" v-model="customColor" @input="settingsStore.setBackgroundColor(customColor)" class="absolute -top-1 -left-1 w-8 h-8 cursor-pointer p-0 border-0" />
           </div>
         </div>
 
         <div class="flex-1"></div>
 
-        <!-- Zoom Controls -->
-        <div class="flex items-center bg-gray-100 dark:bg-gray-700 rounded-lg p-1 mr-1">
-          <button @click="zoomOut" class="p-1.5 hover:bg-white dark:hover:bg-gray-600 text-gray-600 dark:text-gray-300 rounded-md transition-all" title="Zoom Out">
-            <i class="fas fa-minus text-xs"></i>
+        <!-- Zoom Controls (Compact) -->
+        <div class="flex items-center bg-gray-100 dark:bg-gray-700 rounded px-1 py-0.5">
+          <button @click="zoomOut" class="p-1 hover:bg-white dark:hover:bg-gray-600 text-gray-500 dark:text-gray-400 rounded transition-all cursor-pointer" title="Zoom Out">
+            <i class="fas fa-search-minus text-[10px]"></i>
           </button>
-          <span class="px-2 text-xs font-mono text-gray-600 dark:text-gray-300 min-w-[3ch] text-center">{{ Math.round(zoom * 100) }}%</span>
-          <button @click="zoomIn" class="p-1.5 hover:bg-white dark:hover:bg-gray-600 text-gray-600 dark:text-gray-300 rounded-md transition-all" title="Zoom In">
-            <i class="fas fa-plus text-xs"></i>
+          <span class="px-1.5 text-[10px] font-mono text-gray-500 dark:text-gray-400 min-w-[4ch] text-center">{{ Math.round(zoom * 100) }}%</span>
+          <button @click="zoomIn" class="p-1 hover:bg-white dark:hover:bg-gray-600 text-gray-500 dark:text-gray-400 rounded transition-all cursor-pointer" title="Zoom In">
+            <i class="fas fa-search-plus text-[10px]"></i>
           </button>
-          <div class="w-px h-4 bg-gray-300 dark:bg-gray-600 mx-1"></div>
-          <button @click="resetZoom" class="p-1.5 hover:bg-white dark:hover:bg-gray-600 text-gray-600 dark:text-gray-300 rounded-md transition-all" title="Reset Zoom">
-            <i class="fas fa-expand text-xs"></i>
+          <button @click="resetZoom" class="p-1 hover:bg-white dark:hover:bg-gray-600 text-gray-500 dark:text-gray-400 rounded transition-all cursor-pointer ml-0.5" title="Reset Zoom">
+            <i class="fas fa-compress-arrows-alt text-[10px]"></i>
           </button>
         </div>
-
-        <!-- Offset Labels Toggle -->
-        <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors border-l border-gray-100 dark:border-gray-700" title="Show Offset Labels">
-          <input id="show-offset-labels" type="checkbox" v-model="showOffsetLabels" class="w-4 h-4 rounded text-blue-600 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600" />
-          <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Labels</span>
-        </label>
       </div>
     </section>
 
-    <div class="relative bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-700 rounded-2xl shadow-lg overflow-auto max-h-[calc(100vh-400px)] min-h-[500px] w-full">
+    <div class="relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm overflow-auto max-h-[calc(100vh-340px)] min-h-[400px] w-full">
       <div class="canvas-container touch-manipulation relative inline-block min-w-full">
         <div
           ref="gridContainerRef"
@@ -267,6 +297,7 @@
   import { useZoom } from '@/composables/useZoom';
   import { useDragSprite } from '@/composables/useDragSprite';
   import { useFileDrop } from '@/composables/useFileDrop';
+  import Tooltip from '@/components/utilities/Tooltip.vue';
 
   import type { Layer } from '@/types/sprites';
 
diff --git a/src/components/utilities/Tooltip.vue b/src/components/utilities/Tooltip.vue
new file mode 100644
index 0000000..ef5d829
--- /dev/null
+++ b/src/components/utilities/Tooltip.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="inline-block" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" @mousemove="handleMouseMove">
+    <slot />
+    <Teleport to="body">
+      <div v-if="show && text" ref="tooltipRef" class="fixed px-2.5 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-700 rounded-md shadow-lg whitespace-nowrap pointer-events-none" :style="tooltipStyle">
+        {{ text }}
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from 'vue';
+
+  defineProps<{
+    text: string;
+  }>();
+
+  const show = ref(false);
+  const mouseX = ref(0);
+  const mouseY = ref(0);
+  const tooltipRef = ref<HTMLElement | null>(null);
+
+  const handleMouseEnter = () => {
+    show.value = true;
+  };
+
+  const handleMouseLeave = () => {
+    show.value = false;
+  };
+
+  const handleMouseMove = (e: MouseEvent) => {
+    mouseX.value = e.clientX;
+    mouseY.value = e.clientY;
+  };
+
+  const tooltipStyle = computed(() => {
+    const offsetX = 12;
+    const offsetY = 16;
+    const padding = 8;
+
+    let x = mouseX.value + offsetX;
+    let y = mouseY.value + offsetY;
+
+    // Get tooltip dimensions (estimate if not mounted yet)
+    const tooltipWidth = tooltipRef.value?.offsetWidth || 200;
+    const tooltipHeight = tooltipRef.value?.offsetHeight || 30;
+
+    // Screen boundaries
+    const screenWidth = window.innerWidth;
+    const screenHeight = window.innerHeight;
+
+    // Adjust horizontal position if too close to right edge
+    if (x + tooltipWidth + padding > screenWidth) {
+      x = mouseX.value - tooltipWidth - offsetX;
+    }
+
+    // Adjust horizontal position if too close to left edge
+    if (x < padding) {
+      x = padding;
+    }
+
+    // Adjust vertical position if too close to bottom edge
+    if (y + tooltipHeight + padding > screenHeight) {
+      y = mouseY.value - tooltipHeight - offsetY;
+    }
+
+    // Adjust vertical position if too close to top edge
+    if (y < padding) {
+      y = padding;
+    }
+
+    return {
+      left: `${x}px`,
+      top: `${y}px`,
+      zIndex: 99999,
+    };
+  });
+</script>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f134c4d..b4b0d00 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -90,7 +90,7 @@
                 Layers
               </h3>
               <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
-              <button @click="addLayer()" class="text-xs px-2 py-0.5 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded text-gray-600 dark:text-gray-300 transition-colors" title="Add new layer">
+              <button @click="addLayer()" class="text-xs px-2 py-0.5 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded text-gray-600 dark:text-gray-300 transition-colors cursor-pointer" title="Add new layer">
                 <i class="fas fa-plus text-[9px]"></i>
               </button>
             </div>
@@ -101,7 +101,7 @@
                 class="flex items-center gap-1.5 px-2 py-1.5 bg-white dark:bg-gray-800 border rounded-md transition-all text-sm"
                 :class="[layer.id === activeLayerId ? 'border-gray-700 ring-1 ring-gray-700 dark:border-gray-400 dark:ring-gray-400' : 'border-gray-200 dark:border-gray-700', !layer.visible ? 'opacity-40' : '']"
               >
-                <button @click.stop="layer.visible = !layer.visible" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" :title="layer.visible ? 'Hide' : 'Show'">
+                <button @click.stop="layer.visible = !layer.visible" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer" :title="layer.visible ? 'Hide' : 'Show'">
                   <i :class="[layer.visible ? 'fas fa-eye text-gray-600 dark:text-gray-300' : 'fas fa-eye-slash text-gray-400', 'text-xs']"></i>
                 </button>
                 <input
@@ -119,16 +119,16 @@
                   {{ layer.name }}<span v-if="layer.sprites.length" class="ml-1 opacity-50">({{ layer.sprites.length }})</span>
                 </button>
                 <div class="flex items-center gap-0.5" v-if="editingLayerId !== layer.id">
-                  <button @click="startEditingLayer(layer.id, layer.name)" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" title="Rename">
+                  <button @click="startEditingLayer(layer.id, layer.name)" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer" title="Rename">
                     <i class="fas fa-pen text-[9px] text-gray-400"></i>
                   </button>
-                  <button @click="moveLayer(layer.id, 'up')" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" title="Move up">
+                  <button @click="moveLayer(layer.id, 'up')" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer" title="Move up">
                     <i class="fas fa-chevron-up text-[9px] text-gray-400"></i>
                   </button>
-                  <button @click="moveLayer(layer.id, 'down')" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" title="Move down">
+                  <button @click="moveLayer(layer.id, 'down')" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer" title="Move down">
                     <i class="fas fa-chevron-down text-[9px] text-gray-400"></i>
                   </button>
-                  <button v-if="layers.length > 1" @click="removeLayer(layer.id)" class="p-1 rounded hover:bg-red-50 dark:hover:bg-red-900/30 transition-colors" title="Delete">
+                  <button v-if="layers.length > 1" @click="removeLayer(layer.id)" class="p-1 rounded hover:bg-red-50 dark:hover:bg-red-900/30 transition-colors cursor-pointer" title="Delete">
                     <i class="fas fa-trash text-[9px] text-red-400"></i>
                   </button>
                 </div>
@@ -177,22 +177,22 @@
               <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
             </div>
             <div class="grid grid-cols-6 gap-1">
-              <button @click="alignSprites('left')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" title="Align Left">
+              <button @click="alignSprites('left')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer" title="Align Left">
                 <i class="fas fa-arrow-left text-xs text-gray-500"></i>
               </button>
-              <button @click="alignSprites('center')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" title="Center Horizontally">
+              <button @click="alignSprites('center')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer" title="Center Horizontally">
                 <i class="fas fa-arrows-left-right text-xs text-gray-500"></i>
               </button>
-              <button @click="alignSprites('right')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" title="Align Right">
+              <button @click="alignSprites('right')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer" title="Align Right">
                 <i class="fas fa-arrow-right text-xs text-gray-500"></i>
               </button>
-              <button @click="alignSprites('top')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" title="Align Top">
+              <button @click="alignSprites('top')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer" title="Align Top">
                 <i class="fas fa-arrow-up text-xs text-gray-500"></i>
               </button>
-              <button @click="alignSprites('middle')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" title="Center Vertically">
+              <button @click="alignSprites('middle')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer" title="Center Vertically">
                 <i class="fas fa-arrows-up-down text-xs text-gray-500"></i>
               </button>
-              <button @click="alignSprites('bottom')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" title="Align Bottom">
+              <button @click="alignSprites('bottom')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer" title="Align Bottom">
                 <i class="fas fa-arrow-down text-xs text-gray-500"></i>
               </button>
             </div>
@@ -208,26 +208,36 @@
               <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
             </div>
             <div class="grid grid-cols-4 gap-1.5 mb-2">
-              <button @click="downloadSpritesheet" class="flex flex-col items-center justify-center p-2.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-500 rounded-lg text-white transition-colors" data-rybbit-event="download-spritesheet" title="Download as PNG image">
+              <button
+                @click="downloadSpritesheet"
+                class="flex flex-col items-center justify-center p-2.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-500 rounded-lg text-white transition-colors cursor-pointer"
+                data-rybbit-event="download-spritesheet"
+                title="Download as PNG image"
+              >
                 <i class="fas fa-image text-sm mb-0.5"></i>
                 <span class="text-[10px] font-medium">PNG</span>
               </button>
-              <button @click="exportSpritesheetJSON" class="flex flex-col items-center justify-center p-2.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-500 rounded-lg text-white transition-colors" data-rybbit-event="export-json" title="Export project data as JSON">
+              <button
+                @click="exportSpritesheetJSON"
+                class="flex flex-col items-center justify-center p-2.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-500 rounded-lg text-white transition-colors cursor-pointer"
+                data-rybbit-event="export-json"
+                title="Export project data as JSON"
+              >
                 <i class="fas fa-file-code text-sm mb-0.5"></i>
                 <span class="text-[10px] font-medium">JSON</span>
               </button>
-              <button @click="openGifFpsModal" class="flex flex-col items-center justify-center p-2.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-500 rounded-lg text-white transition-colors" data-rybbit-event="download-gif" title="Export as animated GIF">
+              <button @click="openGifFpsModal" class="flex flex-col items-center justify-center p-2.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-500 rounded-lg text-white transition-colors cursor-pointer" data-rybbit-event="download-gif" title="Export as animated GIF">
                 <i class="fas fa-film text-sm mb-0.5"></i>
                 <span class="text-[10px] font-medium">GIF</span>
               </button>
-              <button @click="downloadAsZip" class="flex flex-col items-center justify-center p-2.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-500 rounded-lg text-white transition-colors" data-rybbit-event="download-zip" title="Download all sprites as ZIP">
+              <button @click="downloadAsZip" class="flex flex-col items-center justify-center p-2.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-500 rounded-lg text-white transition-colors cursor-pointer" data-rybbit-event="download-zip" title="Download all sprites as ZIP">
                 <i class="fas fa-file-archive text-sm mb-0.5"></i>
                 <span class="text-[10px] font-medium">ZIP</span>
               </button>
             </div>
             <button
               @click="openShareModal"
-              class="w-full flex items-center justify-center gap-2 p-2.5 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 rounded-lg text-white text-sm font-medium transition-all shadow-sm hover:shadow-md"
+              class="w-full flex items-center justify-center gap-2 p-2.5 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 rounded-lg text-white text-sm font-medium transition-all shadow-sm hover:shadow-md cursor-pointer"
               data-rybbit-event="share-spritesheet"
               title="Generate shareable link"
             >