fix: 8 image editor bugs found during Docker-based E2E testing

- fix WebP export silently producing PNG when background is non-transparent
- fix autosave not converting blob: URLs inside image-type canvas objects
- fix project load not resetting selection/crop/clipboard state
- fix rotateCanvas not updating object rotation attributes
- fix flipCanvas not negating object rotation attributes
- fix line shadow props overridden by effect spread ordering
- fix "outside" stroke position rendering same as "center"
- add missing pencil tool keyboard shortcut (N)
- remove misleading resample dropdown from image resize dialog
- fix E2E autosave tests for production builds (no Vite dynamic imports)
- fix color picker test case sensitivity (CSS uppercase vs DOM text)
- add 4 unit tests for rotation attribute transforms

tests/unit/web/editor-store.test.ts

@@ -1794,3 +1794,103 @@ describe("updateLayerThumbnail", () => {
     expect(state().layers[1].thumbnail).toBeNull();
   });
 });
+
+// ===========================================================================
+// rotation attribute updated during canvas transforms
+// ===========================================================================
+
+describe("canvas transforms update rotation attribute", () => {
+  it("rotateCanvas 90 adds 90 to existing rotation", () => {
+    act((s) => s.loadImage("blob:test", 800, 600));
+    act((s) => s.addObject(makeRect({ id: "r1", x: 100, y: 100 })));
+    const before = state().objects[0];
+    expect(before.type === "rect" && before.attrs.rotation).toBe(0);
+
+    act((s) => s.rotateCanvas(90));
+    const after = state().objects[0];
+    if (after.type === "rect") {
+      expect(after.attrs.rotation).toBe(90);
+    }
+  });
+
+  it("rotateCanvas 90 compounds with existing rotation", () => {
+    act((s) => s.loadImage("blob:test", 800, 600));
+    const rect: CanvasObject = {
+      id: "r2",
+      type: "rect",
+      layerId: state().activeLayerId,
+      attrs: {
+        x: 100,
+        y: 100,
+        width: 200,
+        height: 100,
+        fill: "#ff0000",
+        stroke: "#000",
+        strokeWidth: 1,
+        rotation: 45,
+        opacity: 1,
+        cornerRadius: 0,
+      },
+    };
+    act((s) => s.addObject(rect));
+    act((s) => s.rotateCanvas(90));
+    const after = state().objects[0];
+    if (after.type === "rect") {
+      expect(after.attrs.rotation).toBe(135);
+    }
+  });
+
+  it("flipCanvasHorizontal negates rotation", () => {
+    act((s) => s.loadImage("blob:test", 800, 600));
+    const rect: CanvasObject = {
+      id: "r3",
+      type: "rect",
+      layerId: state().activeLayerId,
+      attrs: {
+        x: 100,
+        y: 100,
+        width: 200,
+        height: 100,
+        fill: "#ff0000",
+        stroke: "#000",
+        strokeWidth: 1,
+        rotation: 30,
+        opacity: 1,
+        cornerRadius: 0,
+      },
+    };
+    act((s) => s.addObject(rect));
+    act((s) => s.flipCanvasHorizontal());
+    const after = state().objects[0];
+    if (after.type === "rect") {
+      expect(after.attrs.rotation).toBe(330); // (360 - 30) % 360
+    }
+  });
+
+  it("flipCanvasVertical negates rotation", () => {
+    act((s) => s.loadImage("blob:test", 800, 600));
+    const rect: CanvasObject = {
+      id: "r4",
+      type: "rect",
+      layerId: state().activeLayerId,
+      attrs: {
+        x: 100,
+        y: 100,
+        width: 200,
+        height: 100,
+        fill: "#ff0000",
+        stroke: "#000",
+        strokeWidth: 1,
+        rotation: 60,
+        opacity: 1,
+        cornerRadius: 0,
+      },
+    };
+    act((s) => s.addObject(rect));
+    act((s) => s.flipCanvasVertical());
+    const after = state().objects[0];
+    if (after.type === "rect") {
+      expect(after.attrs.rotation).toBe(300); // (360 - 60) % 360
+    }
+  });
+});