fix: resolve type errors in selection/crop/transform tools

apps/web/src/components/editor/common/canvas-resize-dialog.tsx

@@ -30,9 +30,9 @@ export function CanvasResizeDialog({ open, onClose }: { open: boolean; onClose:
   const [fill, setFill] = useState("#ffffff");
 
   const handleApply = useCallback(() => {
-    resizeCanvas(width, height, anchor, fill);
+    resizeCanvas(width, height, anchor);
     onClose();
-  }, [width, height, anchor, fill, resizeCanvas, onClose]);
+  }, [width, height, anchor, resizeCanvas, onClose]);
 
   if (!open) return null;
 

apps/web/src/components/editor/common/context-menu.tsx

@@ -73,7 +73,8 @@ export function ContextMenu({
   const cutObjects = useEditorStore((s) => s.cutObjects);
   const pasteObjects = useEditorStore((s) => s.pasteObjects);
   const removeObjects = useEditorStore((s) => s.removeObjects);
-  const duplicateObjects = useEditorStore((s) => s.duplicateObjects);
+  const copyObjectsFn = useEditorStore((s) => s.copyObjects);
+  const pasteObjectsFn = useEditorStore((s) => s.pasteObjects);
   const bringToFront = useEditorStore((s) => s.bringToFront);
   const bringForward = useEditorStore((s) => s.bringForward);
   const sendBackward = useEditorStore((s) => s.sendBackward);
@@ -106,7 +107,7 @@ export function ContextMenu({
       icon: Scissors,
       shortcut: "Ctrl+X",
       action: () => {
-        cutObjects(selectedObjectIds);
+        cutObjects();
         onClose();
       },
     },
@@ -115,7 +116,7 @@ export function ContextMenu({
       icon: Copy,
       shortcut: "Ctrl+C",
       action: () => {
-        copyObjects(selectedObjectIds);
+        copyObjects();
         onClose();
       },
     },
@@ -127,14 +128,15 @@ export function ContextMenu({
         pasteObjects();
         onClose();
       },
-      disabled: clipboard.length === 0,
+      disabled: !clipboard || clipboard.length === 0,
     },
     {
       label: "Duplicate",
       icon: CopyPlus,
       shortcut: "Ctrl+D",
       action: () => {
-        duplicateObjects(selectedObjectIds);
+        copyObjectsFn();
+        pasteObjectsFn();
         onClose();
       },
       dividerAfter: true,
@@ -192,7 +194,7 @@ export function ContextMenu({
         pasteObjects();
         onClose();
       },
-      disabled: clipboard.length === 0,
+      disabled: !clipboard || clipboard.length === 0,
     },
     {
       label: "Select All",

apps/web/src/components/editor/common/guide-lines.tsx

@@ -12,7 +12,7 @@ const GUIDE_WIDTH = 1;
 
 export function GuideLines() {
   const guides = useEditorStore((s) => s.guides);
-  const showGuides = useEditorStore((s) => s.showGuides);
+  const showGuides = useEditorStore((s) => s.guidesVisible);
   const canvasSize = useEditorStore((s) => s.canvasSize);
   const updateGuide = useEditorStore((s) => s.updateGuide);
   const removeGuide = useEditorStore((s) => s.removeGuide);

apps/web/src/components/editor/common/image-resize-dialog.tsx

@@ -2,7 +2,8 @@ import { Lock, Unlock, X } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
 import { useEditorStore } from "@/stores/editor-store";
-import type { ResampleMethod } from "@/types/editor";
+
+type ResampleMethod = "nearest" | "bilinear" | "bicubic" | "lanczos";
 
 // ---------------------------------------------------------------------------
 // ImageResizeDialog -- modal with W/H, aspect lock, resampling method

apps/web/src/components/editor/common/rulers.tsx

@@ -34,7 +34,7 @@ export function HorizontalRuler() {
   const zoom = useEditorStore((s) => s.zoom);
   const panOffset = useEditorStore((s) => s.panOffset);
   const canvasSize = useEditorStore((s) => s.canvasSize);
-  const showRulers = useEditorStore((s) => s.showRulers);
+  const showRulers = useEditorStore((s) => s.rulersVisible);
   const addGuide = useEditorStore((s) => s.addGuide);
 
   const draw = useCallback(() => {
@@ -146,7 +146,7 @@ export function VerticalRuler() {
   const zoom = useEditorStore((s) => s.zoom);
   const panOffset = useEditorStore((s) => s.panOffset);
   const canvasSize = useEditorStore((s) => s.canvasSize);
-  const showRulers = useEditorStore((s) => s.showRulers);
+  const showRulers = useEditorStore((s) => s.rulersVisible);
   const addGuide = useEditorStore((s) => s.addGuide);
 
   const draw = useCallback(() => {

apps/web/src/components/editor/common/smart-guides.tsx

@@ -1,6 +1,10 @@
 import { Group, Line } from "react-konva";
 import { useEditorStore } from "@/stores/editor-store";
-import type { SmartGuide } from "@/types/editor";
+export interface SmartGuide {
+  orientation: "horizontal" | "vertical";
+  position: number;
+  type: "edge" | "center" | "canvas";
+}
 
 // ---------------------------------------------------------------------------
 // Smart guide calculation utilities (exported for testing)
@@ -156,7 +160,7 @@ export function snapToGuides(
 // SmartGuidesOverlay -- renders temporary guide lines during drag
 // ---------------------------------------------------------------------------
 
-const GUIDE_COLORS = {
+const GUIDE_COLORS: Record<SmartGuide["type"], string> = {
   edge: "#f43f5e",
   center: "#8b5cf6",
   canvas: "#22c55e",

apps/web/src/components/editor/options/move-options.tsx

@@ -65,7 +65,12 @@ export function MoveOptions() {
       | "distribute-h"
       | "distribute-v",
   ) => {
-    alignObjects(direction, selectedObjectIds, objects, updateObject);
+    alignObjects(
+      direction,
+      selectedObjectIds,
+      objects.map((o) => ({ id: o.id, attrs: o.attrs as unknown as Record<string, unknown> })),
+      updateObject,
+    );
   };
 
   return (

apps/web/src/components/editor/options/selection-options.tsx

@@ -1,8 +1,11 @@
 import { Circle, Minus, PenTool, Plus, Square, Wand2 } from "lucide-react";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { cn } from "@/lib/utils";
 import { useEditorStore } from "@/stores/editor-store";
-import type { SelectionMode, SelectionType, ToolType } from "@/types/editor";
+import type { ToolType } from "@/types/editor";
+
+type SelectionMode = "new" | "add" | "subtract";
+type SelectionType = "rect" | "ellipse" | "lasso";
 
 // ---------------------------------------------------------------------------
 // SelectionOptions -- selection type toggle, mode buttons, feather input
@@ -42,8 +45,7 @@ function ToggleButton({
 export function SelectionOptions() {
   const activeTool = useEditorStore((s) => s.activeTool);
   const setTool = useEditorStore((s) => s.setTool);
-  const selectionMode = useEditorStore((s) => s.selectionMode);
+  const [selectionMode, setSelectionMode] = useState<SelectionMode>("new");
-  const setSelectionMode = useEditorStore((s) => s.setSelectionMode);
 
   const selectionType: SelectionType =
     activeTool === "marquee-ellipse"
@@ -64,12 +66,9 @@ export function SelectionOptions() {
     [setTool],
   );
 
-  const handleModeChange = useCallback(
+  const handleModeChange = useCallback((mode: SelectionMode) => {
-    (mode: SelectionMode) => {
     setSelectionMode(mode);
-    },
+  }, []);
-    [setSelectionMode],
-  );
 
   const isMarquee = activeTool === "marquee-rect" || activeTool === "marquee-ellipse";
   const isLasso = activeTool === "lasso-free" || activeTool === "lasso-poly";

apps/web/src/components/editor/tools/move-tool.tsx

@@ -1,8 +1,8 @@
 import type Konva from "konva";
 import { useCallback, useEffect, useRef } from "react";
 import { Transformer } from "react-konva";
+import type { SmartGuide } from "@/components/editor/common/smart-guides";
 import { useEditorStore } from "@/stores/editor-store";
-import type { SmartGuide } from "@/types/editor";
 
 // ---------------------------------------------------------------------------
 // Smart guide calculation
@@ -258,7 +258,7 @@ export function useMoveTool(): MoveToolApi {
   const setSelectedObjects = useEditorStore((s) => s.setSelectedObjects);
   const updateObject = useEditorStore((s) => s.updateObject);
   const canvasSize = useEditorStore((s) => s.canvasSize);
-  const snapToGuides = useEditorStore((s) => s.snapToGuides);
+  const snapToGuides = useEditorStore((s) => s.snappingEnabled);
 
   // Attach transformer to selected nodes
   useEffect(() => {
@@ -379,9 +379,10 @@ export function useMoveTool(): MoveToolApi {
       for (const id of selectedObjectIds) {
         const obj = useEditorStore.getState().objects.find((o) => o.id === id);
         if (!obj) continue;
+        const attrs = obj.attrs as unknown as Record<string, unknown>;
         updateObject(id, {
-          x: ((obj.attrs.x as number) ?? 0) + dx,
+          x: ((attrs.x as number) ?? 0) + dx,
-          y: ((obj.attrs.y as number) ?? 0) + dy,
+          y: ((attrs.y as number) ?? 0) + dy,
         });
       }
     },

apps/web/src/components/editor/tools/selection-tool.tsx

@@ -2,7 +2,10 @@ import type Konva from "konva";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Ellipse, Group, Line, Rect } from "react-konva";
 import { useEditorStore } from "@/stores/editor-store";
-import type { SelectionMode, SelectionState, SelectionType } from "@/types/editor";
+import type { SelectionState } from "@/types/editor";
+
+type SelectionMode = "new" | "add" | "subtract";
+type SelectionType = "rect" | "ellipse" | "lasso";
 
 // ---------------------------------------------------------------------------
 // Marching ants animation
@@ -237,8 +240,9 @@ export function useSelectionTool(): SelectionToolApi {
   const [currentPoints, setCurrentPoints] = useState<number[]>([]);
   const startRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
 
+  const [selectionMode] = useState<SelectionMode>("new");
+
   const setSelection = useEditorStore((s) => s.setSelection);
-  const selectionMode = useEditorStore((s) => s.selectionMode);
   const canvasSize = useEditorStore((s) => s.canvasSize);
   const existingSelection = useEditorStore((s) => s.selection);
 

apps/web/src/components/editor/tools/transform-tool.tsx

@@ -56,12 +56,13 @@ export function useTransformTool(): TransformToolApi {
     if (!isTransforming || selectedObjectIds.length === 0) return;
     const obj = objects.find((o) => o.id === selectedObjectIds[0]);
     if (!obj) return;
+    const a = obj.attrs as unknown as Record<string, unknown>;
     const v: TransformValues = {
-      x: (obj.attrs.x as number) ?? 0,
+      x: (a.x as number) ?? 0,
-      y: (obj.attrs.y as number) ?? 0,
+      y: (a.y as number) ?? 0,
-      width: (obj.attrs.width as number) ?? 0,
+      width: (a.width as number) ?? 0,
-      height: (obj.attrs.height as number) ?? 0,
+      height: (a.height as number) ?? 0,
-      rotation: (obj.attrs.rotation as number) ?? 0,
+      rotation: (a.rotation as number) ?? 0,
     };
     setValuesState(v);
   }, [isTransforming, selectedObjectIds, objects]);
@@ -86,12 +87,13 @@ export function useTransformTool(): TransformToolApi {
     // Store pre-transform state for cancel
     const obj = objects.find((o) => o.id === selectedObjectIds[0]);
     if (obj) {
+      const a = obj.attrs as unknown as Record<string, unknown>;
       preTransformRef.current = {
-        x: (obj.attrs.x as number) ?? 0,
+        x: (a.x as number) ?? 0,
-        y: (obj.attrs.y as number) ?? 0,
+        y: (a.y as number) ?? 0,
-        width: (obj.attrs.width as number) ?? 0,
+        width: (a.width as number) ?? 0,
-        height: (obj.attrs.height as number) ?? 0,
+        height: (a.height as number) ?? 0,
-        rotation: (obj.attrs.rotation as number) ?? 0,
+        rotation: (a.rotation as number) ?? 0,
       };
     }
   }, [selectedObjectIds, objects]);
@@ -157,8 +159,9 @@ export function useTransformTool(): TransformToolApi {
     for (const id of selectedObjectIds) {
       const obj = objects.find((o) => o.id === id);
       if (!obj) continue;
-      const currentScale = (obj.attrs.scaleX as number) ?? 1;
+      const a = obj.attrs as unknown as Record<string, unknown>;
-      updateObject(id, { scaleX: -currentScale });
+      const currentScale = (a.scaleX as number) ?? 1;
+      updateObject(id, { scaleX: -currentScale } as Record<string, unknown>);
     }
   }, [selectedObjectIds, objects, updateObject]);
 
@@ -166,8 +169,9 @@ export function useTransformTool(): TransformToolApi {
     for (const id of selectedObjectIds) {
       const obj = objects.find((o) => o.id === id);
       if (!obj) continue;
-      const currentScale = (obj.attrs.scaleY as number) ?? 1;
+      const a = obj.attrs as unknown as Record<string, unknown>;
-      updateObject(id, { scaleY: -currentScale });
+      const currentScale = (a.scaleY as number) ?? 1;
+      updateObject(id, { scaleY: -currentScale } as Record<string, unknown>);
     }
   }, [selectedObjectIds, objects, updateObject]);