Merge pull request #3 from MujahidAbbas/refine-edges

feat: Add Refine Edges modal for precision mask editing

Author: MujahidAbbas

.gitignore

@@ -27,3 +27,4 @@ pnpm-debug.log*
 .claude/
 docs/
 .planning/
+.cursor/

README.md

@@ -24,6 +24,15 @@ Clearcut is a privacy-first background removal and image editing tool that runs
 - **Undo/Redo** - Up to 20 history entries for brush edits.
 - **Before/After Comparison** - Interactive slider to compare original and edited images.
 
+#### Edge Refinement
+- **Refine Edges Modal** - Dedicated overlay for precision mask editing with zoom/pan support.
+- **Eraser Tool** - Remove leftover background artifacts the AI missed.
+- **Restore Tool** - Bring back accidentally removed details like hair edges, fingers, etc.
+- **Zoom Controls** - 1.0x to 4.0x zoom for precision work on fine details.
+- **Pan Navigation** - Hold Space + drag (desktop) or two-finger drag (mobile) to navigate zoomed canvas.
+- **Touch Gestures** - Pinch-to-zoom and two-finger pan for mobile devices.
+- **Reset All Edits** - Revert all refinement strokes back to the original state.
+
 #### Image Editing Modal
 - **Full-Screen Editor** - Immersive editing experience with real-time preview.
 - **Background Selection** - Choose from 12 preset colors, custom color picker, or upload your own background image.
@@ -110,7 +119,10 @@ clearcut/
 │   │   │   ├── ExportModal.tsx          # Export flow with Ko-fi
 │   │   │   ├── BackgroundSelector.tsx   # Preset/custom backgrounds
 │   │   │   ├── FilterControls.tsx       # BG filter sliders
-│   │   │   └── TransformControls.tsx    # Zoom/rotate/flip/crop
+│   │   │   ├── TransformControls.tsx    # Zoom/rotate/flip/crop
+│   │   │   ├── RefineEdgesModal.tsx     # Edge refinement overlay
+│   │   │   ├── RefineEdgesCanvas.tsx    # Zoomable canvas with brush
+│   │   │   └── RefineEdgesControls.tsx  # Refinement tool controls
 │   │   └── ui/                   # Reusable UI components
 │   ├── lib/
 │   │   ├── segmentation.ts       # AI model integration
@@ -139,9 +151,10 @@ clearcut/
 1. **Model Loading** - On first visit, the RMBG-1.4 model (~45MB) is downloaded and cached in your browser.
 2. **Image Processing** - When you upload an image, it's processed entirely client-side using WebGPU (if available) or WASM.
 3. **Mask Generation** - The AI generates a segmentation mask identifying foreground vs background.
-4. **Image Editing** - Open the full-screen editor to apply background replacements, filters (brightness, contrast, saturation, blur), transforms (zoom, rotate, flip), and crop to specific aspect ratios.
-5. **Compositing** - The mask is applied to create a transparent background, with optional color/image replacement and filters.
-6. **Export** - Click the download button to trigger the export modal. The final result is rendered to a canvas and exported as PNG/JPG with the original filename + "-nobg" suffix.
+4. **Edge Refinement** - Use the Refine Edges tool to clean up any imperfections. Zoom in (up to 4x) for precision work, use Eraser to remove leftover background, or Restore to bring back accidentally removed details.
+5. **Image Editing** - Open the full-screen editor to apply background replacements, filters (brightness, contrast, saturation, blur), transforms (zoom, rotate, flip), and crop to specific aspect ratios.
+6. **Compositing** - The mask is applied to create a transparent background, with optional color/image replacement and filters.
+7. **Export** - Click the download button to trigger the export modal. The final result is rendered to a canvas and exported as PNG/JPG with the original filename + "-nobg" suffix.
 
 **No data ever leaves your browser.**
 

src/components/remove/BackgroundRemover.tsx

@@ -190,6 +190,10 @@ export default function BackgroundRemover() {
       }
     }
 
+    // Increment preview version to force ResultsView/ComparisonSlider to update
+    // This is needed because maskCanvas reference stays the same even when contents change
+    setPreviewVersion(v => v + 1);
+
     // Reset edit state and close modal
     resetEditState();
     closeEditModal();

src/components/remove/EditModal.tsx

@@ -1,10 +1,12 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
 import { useAppStore } from '@/stores/appStore';
+import { saveMaskSnapshot } from '@/lib/brushTool';
 import Button from '@/components/ui/Button';
 import EditPreview from './EditPreview';
 import BackgroundSelector from './BackgroundSelector';
 import FilterControls from './FilterControls';
 import TransformControls from './TransformControls';
+import RefineEdgesModal from './RefineEdgesModal';
 
 interface EditModalProps {
   originalImage: HTMLImageElement;
@@ -24,9 +26,43 @@ export default function EditModal({
   const hasUnsavedEdits = useAppStore((state) => state.hasUnsavedEdits);
   const setHasUnsavedEdits = useAppStore((state) => state.setHasUnsavedEdits);
   const resetEditState = useAppStore((state) => state.resetEditState);
+  
+  // Refine Edges modal state
+  const isRefineModalOpen = useAppStore((state) => state.isRefineModalOpen);
+  const openRefineModal = useAppStore((state) => state.openRefineModal);
 
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
   const [showBefore, setShowBefore] = useState(false);
+  
+  // Preview version counter - incremented to force EditPreview re-render after mask changes
+  const [previewVersion, setPreviewVersion] = useState(0);
+
+  // Handler to open Refine Edges modal
+  const handleOpenRefineEdges = useCallback(() => {
+    // Save current mask state before opening refine modal
+    const snapshot = saveMaskSnapshot(maskCanvas);
+    openRefineModal(snapshot);
+  }, [maskCanvas, openRefineModal]);
+
+  // Handler when Refine Edges modal finishes (returns to edit modal)
+  const handleRefineFinish = useCallback(() => {
+    // Mark as having unsaved edits since mask may have changed
+    setHasUnsavedEdits(true);
+    // Increment preview version to force EditPreview to re-render with updated mask
+    setPreviewVersion(v => v + 1);
+  }, [setHasUnsavedEdits]);
+
+  // Handler when "Apply & Done" is clicked from Refine Edges modal
+  const handleRefineApplyAndDone = useCallback(() => {
+    setHasUnsavedEdits(false);
+    onApply();
+  }, [setHasUnsavedEdits, onApply]);
+
+  // Handler when "Exit Editor" is clicked from Refine Edges modal
+  const handleRefineExitEditor = useCallback(() => {
+    resetEditState();
+    onClose();
+  }, [resetEditState, onClose]);
 
   // Focus trap
   useEffect(() => {
@@ -137,9 +173,10 @@ export default function EditModal({
             </button>
           </div>
 
-          {/* Canvas Preview */}
+          {/* Canvas Preview - key prop forces re-render when mask changes in Refine Edges */}
           <div className="flex-1 overflow-hidden">
             <EditPreview
+              key={previewVersion}
               originalImage={originalImage}
               maskCanvas={maskCanvas}
               showBefore={showBefore}
@@ -155,20 +192,20 @@ export default function EditModal({
             <FilterControls />
             <TransformControls />
 
-            {/* Refine Edges Section - Placeholder for Phase 3 */}
+            {/* Refine Edges Section */}
             <div className="space-y-3">
               <h3 className="text-sm font-semibold text-gray-700">Edges</h3>
               <button
-                disabled
-                className="w-full py-2 px-4 rounded-lg border border-gray-200 text-sm text-gray-400
-                           bg-gray-50 cursor-not-allowed flex items-center justify-center gap-2"
-                title="Coming soon - Fine-tune background removal edges"
+                onClick={handleOpenRefineEdges}
+                className="w-full py-2.5 px-4 rounded-lg border-2 border-primary text-sm text-primary font-medium
+                           bg-primary-light hover:bg-primary hover:text-white transition-colors flex items-center justify-center gap-2"
+                title="Fine-tune background removal edges"
               >
                 <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                  <path d="M12 3v18M3 12h18" strokeLinecap="round" />
+                  <path d="M12 20h9" strokeLinecap="round" strokeLinejoin="round" />
+                  <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" strokeLinecap="round" strokeLinejoin="round" />
                 </svg>
                 Refine Edges
-                <span className="text-xs bg-gray-200 px-1.5 py-0.5 rounded">Soon</span>
               </button>
               <p className="text-xs text-gray-400">
                 Fine-tune the edges of your cutout for cleaner results.
@@ -225,6 +262,17 @@ export default function EditModal({
           </div>
         </div>
       )}
+
+      {/* Refine Edges Modal */}
+      {isRefineModalOpen && (
+        <RefineEdgesModal
+          originalImage={originalImage}
+          maskCanvas={maskCanvas}
+          onFinishRefining={handleRefineFinish}
+          onApplyAndDone={handleRefineApplyAndDone}
+          onExitEditor={handleRefineExitEditor}
+        />
+      )}
     </div>
   );
 }