Second commit for screen cap feature

app/components/workbench/Preview.tsx

@@ -80,12 +80,17 @@ export const Preview = memo(() => {
       )}
       <div className="bg-bolt-elements-background-depth-2 p-2 flex items-center gap-1.5">
         <IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} />
-        <IconButton icon="i-ph:selection" onClick={() => setIsSelectionMode(!isSelectionMode)} className={isSelectionMode ? 'bg-bolt-elements-background-depth-3' : ''} />
+        <IconButton
+          icon="i-ph:selection"
+          onClick={() => setIsSelectionMode(!isSelectionMode)}
+          className={isSelectionMode ? 'bg-bolt-elements-background-depth-3' : ''}
+        />
         <div
           className="flex items-center gap-1 flex-grow bg-bolt-elements-preview-addressBar-background border border-bolt-elements-borderColor text-bolt-elements-preview-addressBar-text rounded-full px-3 py-1 text-sm hover:bg-bolt-elements-preview-addressBar-backgroundHover hover:focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within:bg-bolt-elements-preview-addressBar-backgroundActive
         focus-within-border-bolt-elements-borderColorActive focus-within:text-bolt-elements-preview-addressBar-textActive"
         >
-          <input title='URL'
+          <input
+            title="URL"
             ref={inputRef}
             className="w-full bg-transparent outline-none"
             type="text"
@@ -119,7 +124,11 @@ export const Preview = memo(() => {
         {activePreview ? (
           <>
             <iframe ref={iframeRef} title="preview" className="border-none w-full h-full bg-white" src={iframeUrl} />
-            <ScreenshotSelector isSelectionMode={isSelectionMode} setIsSelectionMode={setIsSelectionMode} containerRef={iframeRef} />
+            <ScreenshotSelector
+              isSelectionMode={isSelectionMode}
+              setIsSelectionMode={setIsSelectionMode}
+              containerRef={iframeRef}
+            />
           </>
         ) : (
           <div className="flex w-full h-full justify-center items-center bg-white">No preview available</div>

app/components/workbench/ScreenshotSelector.tsx

@@ -7,7 +7,8 @@ interface ScreenshotSelectorProps {
   containerRef: React.RefObject<HTMLElement>;
 }
 
-export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, containerRef }: ScreenshotSelectorProps) => {
+export const ScreenshotSelector = memo(
+  ({ isSelectionMode, setIsSelectionMode, containerRef }: ScreenshotSelectorProps) => {
     const [isCapturing, setIsCapturing] = useState(false);
     const [selectionStart, setSelectionStart] = useState<{ x: number; y: number } | null>(null);
     const [selectionEnd, setSelectionEnd] = useState<{ x: number; y: number } | null>(null);
@@ -30,8 +31,8 @@ export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, c
           const stream = await navigator.mediaDevices.getDisplayMedia({
             audio: false,
             video: {
-            displaySurface: "window"
+              displaySurface: 'window',
-          }
+            },
           } as MediaStreamConstraints);
 
           // Set up video with the stream
@@ -39,7 +40,7 @@ export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, c
           await video.play();
 
           // Wait for video to be ready
-        await new Promise(resolve => setTimeout(resolve, 300));
+          await new Promise((resolve) => setTimeout(resolve, 300));
 
           // Create temporary canvas for full screenshot
           const tempCanvas = document.createElement('canvas');
@@ -78,17 +79,7 @@ export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, c
           }
 
           // Draw the cropped area
-        ctx.drawImage(
+          ctx.drawImage(tempCanvas, scaledX, scaledY, scaledWidth, scaledHeight, 0, 0, width, height);
-          tempCanvas,
-          scaledX,
-          scaledY,
-          scaledWidth,
-          scaledHeight,
-          0,
-          0,
-          width,
-          height
-        );
 
           // Convert to blob
           const blob = await new Promise<Blob>((resolve, reject) => {
@@ -126,8 +117,7 @@ export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, c
           reader.readAsDataURL(blob);
 
           // Stop all tracks
-        stream.getTracks().forEach(track => track.stop());
+          stream.getTracks().forEach((track) => track.stop());
-
         } finally {
           // Clean up video element
           document.body.removeChild(video);
@@ -143,7 +133,8 @@ export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, c
       }
     }, [isSelectionMode, selectionStart, selectionEnd, containerRef, setIsSelectionMode]);
 
-  const handleSelectionStart = useCallback((e: React.MouseEvent) => {
+    const handleSelectionStart = useCallback(
+      (e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
         if (!isSelectionMode) return;
@@ -152,9 +143,12 @@ export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, c
         const y = e.clientY - rect.top;
         setSelectionStart({ x, y });
         setSelectionEnd({ x, y });
-  }, [isSelectionMode]);
+      },
+      [isSelectionMode],
+    );
 
-  const handleSelectionMove = useCallback((e: React.MouseEvent) => {
+    const handleSelectionMove = useCallback(
+      (e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
         if (!isSelectionMode || !selectionStart) return;
@@ -162,7 +156,9 @@ export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, c
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         setSelectionEnd({ x, y });
-  }, [isSelectionMode, selectionStart]);
+      },
+      [isSelectionMode, selectionStart],
+    );
 
     if (!isSelectionMode) return null;
 
@@ -200,4 +196,5 @@ export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, c
         )}
       </div>
     );
-});
+  },
+);