Improve color wheel drag behavior to track outside circle bounds

Enhanced the color picker to allow dragging beyond the circle while maintaining color selection at the circle's edge. The picker now follows the mouse direction when dragged outside, snapping to the nearest point on the circle's perimeter.

Key changes:
- Added document-level mouse listeners during drag operations
- Removed distance boundary check that stopped tracking outside circle
- Only allows drag initiation from clicks inside the circle
- Refactored event handling to use stable callback references

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: vinc3m1

src/components/ColorWheel.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { hsvToRgb, rgbToHsv } from '../utils/colorConversion';
 
 interface ColorWheelProps {
@@ -12,6 +12,56 @@ export function ColorWheel({ color, onChange, size = 200 }: ColorWheelProps) {
   const [isDragging, setIsDragging] = useState(false);
   const hsv = rgbToHsv(color.r, color.g, color.b);
 
+  const handleInteraction = useCallback((clientX: number, clientY: number) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const rect = canvas.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const y = clientY - rect.top;
+
+    const centerX = size / 2;
+    const centerY = size / 2;
+    const radius = size / 2 - 10;
+
+    // Calculate distance from center
+    const dx = x - centerX;
+    const dy = y - centerY;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+
+    // Calculate hue from angle
+    let angle = Math.atan2(dy, dx) * (180 / Math.PI) + 90;
+    if (angle < 0) angle += 360;
+
+    // Calculate saturation from distance, clamped to radius
+    const saturation = Math.min(distance / radius, 1);
+
+    // Convert to RGB and update
+    const newColor = hsvToRgb(angle, saturation, 1);
+    onChange(newColor);
+  }, [onChange, size]);
+
+  // Add document-level mouse listeners when dragging
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const handleDocumentMouseMove = (e: MouseEvent) => {
+      handleInteraction(e.clientX, e.clientY);
+    };
+
+    const handleDocumentMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    document.addEventListener('mousemove', handleDocumentMouseMove);
+    document.addEventListener('mouseup', handleDocumentMouseUp);
+
+    return () => {
+      document.removeEventListener('mousemove', handleDocumentMouseMove);
+      document.removeEventListener('mouseup', handleDocumentMouseUp);
+    };
+  }, [isDragging, handleInteraction]);
+
   // Draw the color wheel and indicator
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -66,14 +116,13 @@ export function ColorWheel({ color, onChange, size = 200 }: ColorWheelProps) {
     ctx.stroke();
   }, [hsv, size]);
 
-  const handleInteraction = (e: React.MouseEvent<HTMLCanvasElement>) => {
+  const handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement>) => {
     const canvas = canvasRef.current;
     if (!canvas) return;
 
     const rect = canvas.getBoundingClientRect();
     const x = e.clientX - rect.left;
     const y = e.clientY - rect.top;
-
     const centerX = size / 2;
     const centerY = size / 2;
     const radius = size / 2 - 10;
@@ -83,50 +132,20 @@ export function ColorWheel({ color, onChange, size = 200 }: ColorWheelProps) {
     const dy = y - centerY;
     const distance = Math.sqrt(dx * dx + dy * dy);
 
-    // Clamp to wheel radius
-    if (distance > radius) return;
-
-    // Calculate hue from angle
-    let angle = Math.atan2(dy, dx) * (180 / Math.PI) + 90;
-    if (angle < 0) angle += 360;
-
-    // Calculate saturation from distance
-    const saturation = Math.min(distance / radius, 1);
-
-    // Convert to RGB and update
-    const newColor = hsvToRgb(angle, saturation, 1);
-    onChange(newColor);
-  };
-
-  const handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement>) => {
-    setIsDragging(true);
-    handleInteraction(e);
-  };
-
-  const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
-    if (isDragging) {
-      handleInteraction(e);
+    // Only start dragging if click is inside the circle
+    if (distance <= radius) {
+      setIsDragging(true);
+      handleInteraction(e.clientX, e.clientY);
     }
   };
 
-  const handleMouseUp = () => {
-    setIsDragging(false);
-  };
-
-  const handleMouseLeave = () => {
-    setIsDragging(false);
-  };
-
   return (
     <canvas
       ref={canvasRef}
       width={size}
       height={size}
       className="cursor-crosshair"
       onMouseDown={handleMouseDown}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      onMouseLeave={handleMouseLeave}
     />
   );
 }