feat(02-05): apply crop when clicking Apply & Done

- Add cropDisplayScale to EditState to track coordinate scale factor
- Add applyCrop utility function to imageTransforms.ts
- Update handleEditApply in BackgroundRemover to actually crop the image
- Cropped image and mask replace the originals in app state
- Save cropped mask to history for undo support

Author: MujahidAbbas

src/components/remove/BackgroundRemover.tsx

@@ -7,6 +7,7 @@ import EditModal from './EditModal';
 import { initializeSegmenter, removeBackground } from '../../lib/segmentation';
 import { renderComposite } from '../../lib/compositing';
 import { saveMaskSnapshot } from '../../lib/brushTool';
+import { applyCrop } from '../../lib/imageTransforms';
 import { useAppStore } from '../../stores/appStore';
 
 type ViewState = 'upload' | 'processing' | 'result' | 'editing';
@@ -33,6 +34,7 @@ export default function BackgroundRemover() {
     openEditModal,
     closeEditModal,
     resetEditState,
+    editState,
     pushHistory,
     reset,
   } = useAppStore();
@@ -136,22 +138,62 @@ export default function BackgroundRemover() {
     closeEditModal();
   }, [closeEditModal]);
 
-  const handleEditApply = useCallback(() => {
-    // Re-render preview with current state (includes edit transforms/filters)
-    if (originalImage && maskCanvas && previewCanvasRef.current) {
+  const handleEditApply = useCallback(async () => {
+    if (!originalImage || !maskCanvas || !previewCanvasRef.current) {
+      closeEditModal();
+      return;
+    }
+
+    // Check if there's a crop to apply
+    if (editState.cropBox && editState.aspectRatio !== 'original') {
+      try {
+        // Apply the crop to get new cropped image and mask
+        const { croppedImage, croppedMask } = await applyCrop(
+          originalImage,
+          maskCanvas,
+          editState.cropBox,
+          editState.cropDisplayScale
+        );
+
+        // Update the app state with cropped versions
+        setOriginalImage(croppedImage);
+        setMaskCanvas(croppedMask);
+
+        // Update preview canvas size
+        previewCanvasRef.current.width = croppedImage.naturalWidth;
+        previewCanvasRef.current.height = croppedImage.naturalHeight;
+
+        // Render the cropped composite
+        const ctx = previewCanvasRef.current.getContext('2d');
+        if (ctx) {
+          renderComposite(ctx, croppedImage, croppedMask, {
+            type: backgroundType,
+            color: backgroundColor,
+            image: backgroundImage ?? undefined,
+          });
+        }
+
+        // Save cropped mask to history
+        pushHistory(saveMaskSnapshot(croppedMask));
+      } catch (error) {
+        console.error('Failed to apply crop:', error);
+      }
+    } else {
+      // No crop, just re-render with background settings
       const ctx = previewCanvasRef.current.getContext('2d');
       if (ctx) {
-        // Note: For now, the preview just uses background state
-        // Full edit state rendering would need to bake transforms into the canvas
         renderComposite(ctx, originalImage, maskCanvas, {
           type: backgroundType,
           color: backgroundColor,
           image: backgroundImage ?? undefined,
         });
       }
     }
+
+    // Reset edit state and close modal
+    resetEditState();
     closeEditModal();
-  }, [originalImage, maskCanvas, backgroundType, backgroundColor, backgroundImage, closeEditModal]);
+  }, [originalImage, maskCanvas, backgroundType, backgroundColor, backgroundImage, editState, setOriginalImage, setMaskCanvas, pushHistory, resetEditState, closeEditModal]);
 
   const handleBackToResult = useCallback(() => {
     // Re-render preview canvas with current mask state

src/components/remove/EditPreview.tsx

@@ -311,16 +311,22 @@ export default function EditPreview({
       return;
     }
 
+    // Calculate display scale (canvas size / original image size)
+    const displayScale = canvas.width / originalImage.width;
+
     // Initialize crop box if not set or if aspect ratio changed to a fixed one
     if (!editState.cropBox || aspectRatioValue !== null) {
       const defaultCrop = calculateDefaultCrop(
         canvas.width,
         canvas.height,
         editState.aspectRatio
       );
-      setEditState({ cropBox: defaultCrop });
+      setEditState({ cropBox: defaultCrop, cropDisplayScale: displayScale });
+    } else {
+      // Update display scale even if cropBox exists
+      setEditState({ cropDisplayScale: displayScale });
     }
-  }, [editState.aspectRatio]);
+  }, [editState.aspectRatio, originalImage.width]);
 
   // Render preview
   const renderPreview = useCallback(() => {

src/lib/imageTransforms.ts

@@ -83,3 +83,69 @@ export function calculateCropRect(
     };
   }
 }
+
+export interface CropBox {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/**
+ * Apply crop to create new cropped image and mask canvases.
+ * Returns new HTMLImageElement and HTMLCanvasElement for the cropped region.
+ */
+export async function applyCrop(
+  originalImage: HTMLImageElement,
+  maskCanvas: HTMLCanvasElement,
+  cropBox: CropBox,
+  displayScale: number
+): Promise<{ croppedImage: HTMLImageElement; croppedMask: HTMLCanvasElement }> {
+  // Convert display coordinates to actual image coordinates
+  const actualCrop = {
+    x: Math.round(cropBox.x / displayScale),
+    y: Math.round(cropBox.y / displayScale),
+    width: Math.round(cropBox.width / displayScale),
+    height: Math.round(cropBox.height / displayScale),
+  };
+
+  // Ensure crop is within bounds
+  const clampedCrop = {
+    x: Math.max(0, Math.min(actualCrop.x, originalImage.naturalWidth - 1)),
+    y: Math.max(0, Math.min(actualCrop.y, originalImage.naturalHeight - 1)),
+    width: Math.min(actualCrop.width, originalImage.naturalWidth - actualCrop.x),
+    height: Math.min(actualCrop.height, originalImage.naturalHeight - actualCrop.y),
+  };
+
+  // Create cropped image canvas
+  const imageCanvas = document.createElement('canvas');
+  imageCanvas.width = clampedCrop.width;
+  imageCanvas.height = clampedCrop.height;
+  const imageCtx = imageCanvas.getContext('2d')!;
+  imageCtx.drawImage(
+    originalImage,
+    clampedCrop.x, clampedCrop.y, clampedCrop.width, clampedCrop.height,
+    0, 0, clampedCrop.width, clampedCrop.height
+  );
+
+  // Create cropped mask canvas
+  const croppedMask = document.createElement('canvas');
+  croppedMask.width = clampedCrop.width;
+  croppedMask.height = clampedCrop.height;
+  const maskCtx = croppedMask.getContext('2d')!;
+  maskCtx.drawImage(
+    maskCanvas,
+    clampedCrop.x, clampedCrop.y, clampedCrop.width, clampedCrop.height,
+    0, 0, clampedCrop.width, clampedCrop.height
+  );
+
+  // Convert cropped image canvas to HTMLImageElement
+  const croppedImage = await new Promise<HTMLImageElement>((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = imageCanvas.toDataURL('image/png');
+  });
+
+  return { croppedImage, croppedMask };
+}

src/stores/appStore.ts

@@ -22,6 +22,7 @@ export interface EditState {
   };
   aspectRatio: 'original' | 'free' | '1:1' | '4:3' | '16:9' | '9:16';
   cropBox: CropBox | null; // null when no crop is active (original/free without user interaction)
+  cropDisplayScale: number; // scale factor to convert cropBox display coords to actual image coords
 }
 
 interface AppState {
@@ -93,6 +94,7 @@ const editInitialState: EditState = {
   },
   aspectRatio: 'original',
   cropBox: null,
+  cropDisplayScale: 1,
 };
 
 const initialState = {