Disallow showing hidden frames

src/components/SpritePreview.vue

@@ -60,8 +60,8 @@
         <div class="flex-1 min-w-[200px] space-y-6">
           <!-- Frame Navigation -->
           <div class="flex items-center gap-2">
-            <span class="text-sm font-medium w-30">Frame {{ currentFrameIndex + 1 }}/{{ totalFrames }}</span>
-            <input type="range" min="0" :max="totalFrames - 1" v-model.number="currentFrameIndex" class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-500" :disabled="isPlaying" :class="{ 'opacity-50': isPlaying }" />
+            <span class="text-sm font-medium w-30">Frame {{ visibleFrameNumber }}/{{ visibleFramesCount }}</span>
+            <input type="range" min="0" :max="visibleFrames.length - 1" :value="visibleFrameIndex" @input="handleSliderInput" class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-500" :disabled="isPlaying" :class="{ 'opacity-50': isPlaying }" />
           </div>
 
           <!-- FPS Control -->
@@ -145,6 +145,14 @@
   // Add this after other refs
   const hiddenFrames = ref<number[]>([]);
 
+  // Add these computed properties
+  const visibleFrames = computed(() => props.sprites.filter((_, index) => !hiddenFrames.value.includes(index)));
+  const visibleFramesCount = computed(() => visibleFrames.value.length);
+  const visibleFrameIndex = computed(() => {
+    return visibleFrames.value.findIndex((_, idx) => idx === visibleFrames.value.findIndex(s => s === props.sprites[currentFrameIndex.value]));
+  });
+  const visibleFrameNumber = computed(() => visibleFrameIndex.value + 1);
+
   // Canvas drawing
   const calculateMaxDimensions = () => {
     let maxWidth = 0;
@@ -249,19 +257,30 @@
   };
 
   const nextFrame = () => {
-    if (props.sprites.length === 0) return;
+    if (visibleFrames.value.length === 0) return;
 
-    currentFrameIndex.value = (currentFrameIndex.value + 1) % props.sprites.length;
+    const currentVisibleIndex = visibleFrameIndex.value;
+    const nextVisibleIndex = (currentVisibleIndex + 1) % visibleFrames.value.length;
+    currentFrameIndex.value = props.sprites.indexOf(visibleFrames.value[nextVisibleIndex]);
     drawPreviewCanvas();
   };
 
   const previousFrame = () => {
-    if (props.sprites.length === 0) return;
+    if (visibleFrames.value.length === 0) return;
 
-    currentFrameIndex.value = (currentFrameIndex.value - 1 + props.sprites.length) % props.sprites.length;
+    const currentVisibleIndex = visibleFrameIndex.value;
+    const prevVisibleIndex = (currentVisibleIndex - 1 + visibleFrames.value.length) % visibleFrames.value.length;
+    currentFrameIndex.value = props.sprites.indexOf(visibleFrames.value[prevVisibleIndex]);
     drawPreviewCanvas();
   };
 
+  // Add this method to handle slider input
+  const handleSliderInput = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    const index = parseInt(target.value);
+    currentFrameIndex.value = props.sprites.indexOf(visibleFrames.value[index]);
+  };
+
   // Drag functionality
   const startDrag = (event: MouseEvent) => {
     if (!isDraggable.value || !previewCanvasRef.value) return;

src/components/utilities/Modal.vue

@@ -26,7 +26,7 @@
       </div>
 
       <!-- Resize handle -->
-      <div class="absolute bottom-0 right-0 w-5 h-5 cursor-se-resize" @mousedown="startResize" @touchstart="startResize"></div>
+      <div class="absolute bottom-0 right-0 w-8 h-8 cursor-se-resize" @mousedown="startResize" @touchstart="startResize"></div>
     </div>
   </Teleport>
 </template>