[FEAT] Add show/hide frame ID toggle

src/components/SpriteCanvas.vue

@@ -151,15 +151,29 @@
             draggable="false"
           />
 
-          <!-- Offset labels -->
+          <!-- Frame IDs -->
+          <div
+            v-if="showFrameIds"
+            v-for="cellIndex in totalCells"
+            :key="`frame-id-${cellIndex}`"
+            class="absolute pointer-events-none font-mono text-[10px] leading-none text-gray-500 dark:text-gray-400 bg-white/80 dark:bg-gray-800/90 px-1.5 py-1 rounded-br-lg border-r border-b border-gray-200 dark:border-gray-600 shadow-sm z-0"
+            :style="{
+              left: `${Math.round(getCellPosition(cellIndex - 1).x)}px`,
+              top: `${Math.round(getCellPosition(cellIndex - 1).y)}px`,
+            }"
+          >
+            {{ cellIndex - 1 }}
+          </div>
+
+          <!-- Offset labels (Coordinates) -->
           <div
             v-if="showOffsetLabels"
             v-for="position in spritePositions"
             :key="`label-${position.id}`"
-            class="absolute text-[23px] leading-none font-mono text-cyan-600 dark:text-cyan-400 bg-white/90 dark:bg-gray-900/90 px-1 py-0.5 rounded-sm pointer-events-none"
+            class="absolute text-[10px] sm:text-xs leading-none font-mono font-medium text-indigo-600 dark:text-indigo-400 bg-white/95 dark:bg-gray-900/95 px-1.5 py-0.5 rounded shadow-sm border border-indigo-200 dark:border-indigo-900 pointer-events-none z-10"
             :style="{
-              left: `${Math.round(position.cellX + position.maxWidth - 2)}px`,
+              left: `${Math.round(position.cellX + position.maxWidth)}px`,
-              top: `${Math.round(position.cellY + position.maxHeight - 2)}px`,
+              top: `${Math.round(position.cellY + position.maxHeight)}px`,
               transform: 'translate(-100%, -100%)',
             }"
           >
@@ -195,6 +209,7 @@
     allowCellSwap: boolean;
     showAllSprites: boolean;
     showOffsetLabels: boolean;
+    showFrameIds: boolean;
   }>();
 
   const emit = defineEmits<{

src/views/EditorView.vue

@@ -148,16 +148,25 @@
                     :class="showOffsetLabels ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'"
                     class="w-full flex items-center justify-start gap-2 p-2 rounded text-xs font-medium transition-colors"
                   >
-                    <i class="fas fa-tag mr-2"></i>Labels
+                    <i class="fas fa-tag mr-2"></i>Coordinates
                   </button>
                 </Tooltip>
-                <Tooltip text="Compare with ghost overlays" class="col-span-2">
+                <Tooltip text="Show frame index number">
+                  <button
+                    @click="showFrameIds = !showFrameIds"
+                    :class="showFrameIds ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'"
+                    class="w-full flex items-center justify-start gap-2 p-2 rounded text-xs font-medium transition-colors"
+                  >
+                    <i class="fas fa-hashtag mr-2"></i>Frame IDs
+                  </button>
+                </Tooltip>
+                <Tooltip text="Compare with ghost overlays">
                   <button
                     @click="showAllSprites = !showAllSprites"
                     :class="showAllSprites ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'"
                     class="w-full flex items-center justify-start gap-2 p-2 rounded text-xs font-medium transition-colors"
                   >
-                    <i class="fas fa-clone mr-2"></i>Ghost compare
+                    <i class="fas fa-clone mr-2"></i>Compare
                   </button>
                 </Tooltip>
               </div>
@@ -284,6 +293,7 @@
                 :allow-cell-swap="allowCellSwap"
                 :show-all-sprites="showAllSprites"
                 :show-offset-labels="showOffsetLabels"
+                :show-frame-ids="showFrameIds"
                 @update-sprite="updateSpritePosition"
                 @update-sprite-cell="updateSpriteCell"
                 @remove-sprite="removeSprite"
@@ -383,6 +393,7 @@
   const allowCellSwap = ref(false);
   const showAllSprites = ref(false);
   const showOffsetLabels = ref(false);
+  const showFrameIds = ref(false);
   const customColor = ref('#ffffff');
   const isCustomMode = ref(false);