Finish clean, add negative spacing toggle

src/components/SpriteCanvas.vue

@@ -18,6 +18,11 @@
           <input id="show-all-sprites" type="checkbox" v-model="showAllSprites" class="mr-2" />
           <label for="show-all-sprites" class="dark:text-gray-200">Compare sprites</label>
         </div>
+        <!-- Negative spacing control -->
+        <div class="flex items-center">
+          <input id="negative-spacing" type="checkbox" v-model="settingsStore.negativeSpacingEnabled" class="mr-2 w-4 h-4" />
+          <label for="negative-spacing" class="dark:text-gray-200 text-sm sm:text-base">Negative spacing</label>
+        </div>
       </div>
     </div>
 
@@ -157,6 +162,7 @@
     columns: toRef(props, 'columns'),
     zoom,
     allowCellSwap,
+    negativeSpacingEnabled: toRef(settingsStore, 'negativeSpacingEnabled'),
     getMousePosition: (event, z) => canvas2D.getMousePosition(event, z),
     onUpdateSprite: (id, x, y) => emit('updateSprite', id, x, y),
     onUpdateSpriteCell: (id, newIndex) => emit('updateSpriteCell', id, newIndex),
@@ -271,7 +277,7 @@
   function drawCanvas() {
     if (!canvasRef.value || !canvas2D.ctx.value) return;
 
-    const { maxWidth, maxHeight } = calculateMaxDimensions();
+    const { maxWidth, maxHeight, negativeSpacing } = calculateMaxDimensions();
 
     // Set canvas size
     const rows = Math.max(1, Math.ceil(props.sprites.length / props.columns));
@@ -308,9 +314,10 @@
         const cellY = Math.floor(cellRow * maxHeight);
 
         // Draw all sprites with transparency in this cell
+        // Position at bottom-right with negative spacing offset
         props.sprites.forEach((sprite, spriteIndex) => {
           if (spriteIndex !== cellIndex) {
-            canvas2D.drawImage(sprite.img, cellX + sprite.x, cellY + sprite.y, 0.3);
+            canvas2D.drawImage(sprite.img, cellX + negativeSpacing + sprite.x, cellY + negativeSpacing + sprite.y, 0.3);
           }
         });
       }
@@ -329,8 +336,8 @@
       const cellX = Math.floor(col * maxWidth);
       const cellY = Math.floor(row * maxHeight);
 
-      // Draw sprite
-      canvas2D.drawImage(sprite.img, cellX + sprite.x, cellY + sprite.y);
+      // Draw sprite with negative spacing offset (bottom-right positioning)
+      canvas2D.drawImage(sprite.img, cellX + negativeSpacing + sprite.x, cellY + negativeSpacing + sprite.y);
     });
 
     // Draw ghost sprite if we're dragging between cells
@@ -395,6 +402,7 @@
   watch(() => props.columns, drawCanvas);
   watch(() => settingsStore.pixelPerfect, drawCanvas);
   watch(() => settingsStore.darkMode, drawCanvas);
+  watch(() => settingsStore.negativeSpacingEnabled, drawCanvas);
   watch(showAllSprites, drawCanvas);
 </script>