♻️ refactor!: massive refactor

apps/web/components/canvas-renderer.test.tsx

@@ -5,8 +5,18 @@ import { CanvasRenderer } from "./canvas-renderer";
 import type { Layer } from "@pien-studio/types";
 
 vi.mock("next/image", () => ({
-  default: ({ alt, src, unoptimized, ...props }: React.ImgHTMLAttributes<HTMLImageElement> & { unoptimized?: boolean }) =>
-    React.createElement("img", { alt, src, "data-unoptimized": unoptimized ? "true" : undefined, ...props }),
+  default: ({
+    alt,
+    src,
+    unoptimized,
+    ...props
+  }: React.ImgHTMLAttributes<HTMLImageElement> & { unoptimized?: boolean }) =>
+    React.createElement("img", {
+      alt,
+      src,
+      "data-unoptimized": unoptimized ? "true" : undefined,
+      ...props,
+    }),
 }));
 
 vi.mock("../hooks/use-translations", () => ({
@@ -21,14 +31,17 @@ class ResizeObserverMock {
 describe("CanvasRenderer", () => {
   beforeEach(() => {
     vi.stubGlobal("ResizeObserver", ResizeObserverMock);
-    Object.defineProperty(HTMLElement.prototype, "setPointerCapture", { configurable: true, value: vi.fn() });
+    Object.defineProperty(HTMLElement.prototype, "setPointerCapture", {
+      configurable: true,
+      value: vi.fn(),
+    });
   });
 
   it("keeps the rotation handle interactive", () => {
     const layer: Layer = {
       id: "layer-1",
       type: "raster",
-      sourceUri: "data:image/png;base64,test",
+      asset: { kind: "inline", uri: "data:image/png;base64,test" },
       x: 0,
       y: 0,
       width: 100,
@@ -58,8 +71,23 @@ describe("CanvasRenderer", () => {
     const rotateHandle = screen.getByTitle("editor.rotate");
     expect(rotateHandle).toHaveClass("pointer-events-auto");
 
-    fireEvent(rotateHandle, new MouseEvent("pointerdown", { bubbles: true, button: 0, clientX: 50, clientY: 0 }));
-    fireEvent(rotateHandle, new MouseEvent("pointermove", { bubbles: true, clientX: 100, clientY: 50 }));
+    fireEvent(
+      rotateHandle,
+      new MouseEvent("pointerdown", {
+        bubbles: true,
+        button: 0,
+        clientX: 50,
+        clientY: 0,
+      }),
+    );
+    fireEvent(
+      rotateHandle,
+      new MouseEvent("pointermove", {
+        bubbles: true,
+        clientX: 100,
+        clientY: 50,
+      }),
+    );
 
     expect(onRotateLayer).toHaveBeenCalledWith(layer.id, 90);
   });