npm run format

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;
     }
   };