npm run format

src/components/SpriteCanvas.vue

@@ -125,7 +125,12 @@
   // Initialize composables
   const canvas2D = useCanvas2D(canvasRef);
 
-  const { zoom, increase: zoomIn, decrease: zoomOut, reset: resetZoom } = useZoom({
+  const {
+    zoom,
+    increase: zoomIn,
+    decrease: zoomOut,
+    reset: resetZoom,
+  } = useZoom({
     min: 0.5,
     max: 3,
     step: 0.25,
@@ -160,8 +165,8 @@
 
   const { isDragOver, handleDragOver, handleDragEnter, handleDragLeave, handleDrop } = useFileDrop({
     sprites: props.sprites,
-    onAddSprite: (file) => emit('addSprite', file),
-    onAddSpriteWithResize: (file) => emit('addSpriteWithResize', file),
+    onAddSprite: file => emit('addSprite', file),
+    onAddSpriteWithResize: file => emit('addSpriteWithResize', file),
   });
 
   const showAllSprites = ref(false);
@@ -172,7 +177,6 @@
   const replacingSpriteId = ref<string | null>(null);
   const fileInput = ref<HTMLInputElement | null>(null);
 
-
   const startDrag = (event: MouseEvent) => {
     if (!canvasRef.value) return;
 

src/components/SpritePreview.vue

@@ -182,30 +182,17 @@
   // Initialize composables
   const canvas2D = useCanvas2D(previewCanvasRef);
 
-  const { zoom, increase: increaseZoom, decrease: decreaseZoom } = useZoom({
+  const {
+    zoom,
+    increase: increaseZoom,
+    decrease: decreaseZoom,
+  } = useZoom({
     allowedValues: [0.5, 1, 2, 3, 4, 5],
     initial: 1,
   });
 
-  const {
-    currentFrameIndex,
-    isPlaying,
-    fps,
-    hiddenFrames,
-    visibleFrames,
-    visibleFramesCount,
-    visibleFrameIndex,
-    visibleFrameNumber,
-    togglePlayback,
-    nextFrame,
-    previousFrame,
-    handleSliderInput,
-    toggleHiddenFrame,
-    showAllFrames,
-    hideAllFrames,
-    stopAnimation,
-  } = useAnimationFrames({
-    sprites: props.sprites,
+  const { currentFrameIndex, isPlaying, fps, hiddenFrames, visibleFrames, visibleFramesCount, visibleFrameIndex, visibleFrameNumber, togglePlayback, nextFrame, previousFrame, handleSliderInput, toggleHiddenFrame, showAllFrames, hideAllFrames, stopAnimation } = useAnimationFrames({
+    sprites: () => props.sprites,
     onDraw: drawPreviewCanvas,
   });
 
@@ -258,7 +245,6 @@
     canvas2D.strokeRect(0, 0, maxWidth, maxHeight, '#e5e7eb', 1);
   }
 
-
   // Drag functionality
   const startDrag = (event: MouseEvent) => {
     if (!isDraggable.value || !previewCanvasRef.value) return;
@@ -317,7 +303,6 @@
     activeSpriteId.value = null;
   };
 
-
   const handleTouchStart = (event: TouchEvent) => {
     if (!isDraggable.value) return;
 
@@ -382,7 +367,6 @@
   if (props.sprites.length > 0) {
     drawPreviewCanvas();
   }
-
 </script>
 
 <style scoped>

src/composables/useAnimationFrames.ts

@@ -1,16 +1,27 @@
-import { ref, computed, type Ref, onUnmounted } from 'vue';
+import { ref, computed, type Ref, onUnmounted, toRef, isRef } from 'vue';
 import type { Sprite } from '@/types/sprites';
 
 export interface AnimationFramesOptions {
-  sprites: Ref<Sprite[]> | Sprite[];
+  sprites: Ref<Sprite[]> | Sprite[] | (() => Sprite[]);
   onDraw: () => void;
 }
 
 export function useAnimationFrames(options: AnimationFramesOptions) {
   const { onDraw } = options;
 
+  // Convert sprites to a computed ref for reactivity
+  const spritesRef = computed(() => {
+    if (typeof options.sprites === 'function') {
+      return options.sprites();
+    }
+    if (isRef(options.sprites)) {
+      return options.sprites.value;
+    }
+    return options.sprites;
+  });
+
   // Helper to get sprites array
-  const getSprites = () => (Array.isArray(options.sprites) ? options.sprites : options.sprites.value);
+  const getSprites = () => spritesRef.value;
 
   // State
   const currentFrameIndex = ref(0);

src/composables/useCanvas2D.ts

@@ -21,9 +21,7 @@ export function useCanvas2D(canvasRef: Ref<HTMLCanvasElement | null>, options?:
   const applySmoothing = () => {
     if (ctx.value) {
       const pixelPerfect = options?.pixelPerfect;
-      const isPixelPerfect = typeof pixelPerfect === 'boolean'
-        ? pixelPerfect
-        : pixelPerfect?.value ?? settingsStore.pixelPerfect;
+      const isPixelPerfect = typeof pixelPerfect === 'boolean' ? pixelPerfect : (pixelPerfect?.value ?? settingsStore.pixelPerfect);
       ctx.value.imageSmoothingEnabled = !isPixelPerfect;
     }
   };
@@ -53,12 +51,7 @@ export function useCanvas2D(canvasRef: Ref<HTMLCanvasElement | null>, options?:
     ctx.value.strokeRect(Math.floor(x), Math.floor(y), width, height);
   };
 
-  const drawImage = (
-    img: HTMLImageElement | HTMLCanvasElement,
-    x: number,
-    y: number,
-    alpha = 1
-  ) => {
+  const drawImage = (img: HTMLImageElement | HTMLCanvasElement, x: number, y: number, alpha = 1) => {
     if (!ctx.value) return;
     const prevAlpha = ctx.value.globalAlpha;
     ctx.value.globalAlpha = alpha;
@@ -87,10 +80,7 @@ export function useCanvas2D(canvasRef: Ref<HTMLCanvasElement | null>, options?:
   };
 
   // Centralized force redraw handler
-  const createForceRedrawHandler = <T extends { x: number; y: number }>(
-    items: T[],
-    drawCallback: () => void
-  ) => {
+  const createForceRedrawHandler = <T extends { x: number; y: number }>(items: T[], drawCallback: () => void) => {
     return () => {
       ensureIntegerPositions(items);
       applySmoothing();
@@ -113,11 +103,7 @@ export function useCanvas2D(canvasRef: Ref<HTMLCanvasElement | null>, options?:
   };
 
   // Helper to attach load/error listeners to images that aren't yet loaded
-  const attachImageListeners = (
-    sprites: Sprite[],
-    onLoad: () => void,
-    tracked: WeakSet<HTMLImageElement>
-  ) => {
+  const attachImageListeners = (sprites: Sprite[], onLoad: () => void, tracked: WeakSet<HTMLImageElement>) => {
     sprites.forEach(sprite => {
       const img = sprite.img as HTMLImageElement | undefined;
       if (img && !tracked.has(img)) {

src/composables/useDragSprite.ts

@@ -213,14 +213,7 @@ export function useDragSprite(options: DragSpriteOptions) {
   };
 
   const stopDrag = () => {
-    if (
-      isDragging.value &&
-      getAllowCellSwap() &&
-      activeSpriteId.value &&
-      activeSpriteCellIndex.value !== null &&
-      currentHoverCell.value &&
-      activeSpriteCellIndex.value !== currentHoverCell.value.index
-    ) {
+    if (isDragging.value && getAllowCellSwap() && activeSpriteId.value && activeSpriteCellIndex.value !== null && currentHoverCell.value && activeSpriteCellIndex.value !== currentHoverCell.value.index) {
       if (onUpdateSpriteCell) {
         onUpdateSpriteCell(activeSpriteId.value, currentHoverCell.value.index);
       }

src/composables/useZoom.ts

@@ -19,7 +19,7 @@ function isStepOptions(options: ZoomOptions): options is ZoomOptionsStep {
 }
 
 export function useZoom(options: ZoomOptions) {
-  const initial = options.initial ?? (isStepOptions(options) ? 1 : options.allowedValues[1] ?? options.allowedValues[0]);
+  const initial = options.initial ?? (isStepOptions(options) ? 1 : (options.allowedValues[1] ?? options.allowedValues[0]));
   const zoom = ref(initial);
 
   const zoomPercent = computed(() => Math.round(zoom.value * 100));
@@ -67,9 +67,7 @@ export function useZoom(options: ZoomOptions) {
       zoom.value = Math.max(options.min, Math.min(options.max, value));
     } else {
       // Snap to nearest allowed value
-      const nearest = options.allowedValues.reduce((prev, curr) =>
-        Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev
-      );
+      const nearest = options.allowedValues.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev));
       zoom.value = nearest;
     }
   };