✨ feat: more tests, refactored

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

@@ -5,7 +5,8 @@ import { CanvasRenderer } from "./canvas-renderer";
 import type { Layer } from "@pien-studio/types";
 
 vi.mock("next/image", () => ({
-  default: ({ alt, src, unoptimized: _unoptimized, ...props }: React.ImgHTMLAttributes<HTMLImageElement> & { unoptimized?: boolean }) => React.createElement("img", { alt, src, ...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", () => ({

apps/web/components/canvas-renderer.tsx

@@ -231,9 +231,7 @@ export function CanvasRenderer({
     faceOverlayLayerId,
     layers,
     tool,
-    viewport.scale,
-    viewport.x,
-    viewport.y,
+    viewport,
   ]);
 
   return (

apps/web/components/editor/editor-sidebar.tsx

@@ -142,6 +142,15 @@ export function EditorSidebar({
                 className="w-full accent-[var(--color-accent-strong)]"
               />
             </div>
+            {onCreateFillLayer ? (
+              <button
+                type="button"
+                onClick={onCreateFillLayer}
+                className={`mt-3 w-full rounded border px-3 py-2 text-xs font-semibold ${isDark ? "border-white/10 bg-[#353942] text-[#f0f3f8] hover:bg-[#3d424d]" : "border-black/10 bg-[#f4f6f9] text-[#1f2430] hover:bg-white"}`}
+              >
+                Create fill layer
+              </button>
+            ) : null}
           </div>
         ) : null}