fix(crop): use percentCrop from onChange to fix inflated pixel values

react-image-crop's onChange passes (pixelCrop, percentCrop) — we were
using the first arg (display pixels) but treating them as percentages,
causing values to exceed image dimensions.

apps/web/src/components/tools/crop-canvas.tsx

@@ -109,7 +109,7 @@ export function CropCanvas({
       <div className="flex-1 flex items-center justify-center overflow-hidden bg-muted/20 p-4">
         <ReactCrop
           crop={crop}
-          onChange={onCropChange}
+          onChange={(_pixelCrop, percentCrop) => onCropChange(percentCrop)}
           aspect={aspect}
           className="max-h-full"
           ruleOfThirds={showGrid}

apps/web/src/components/tools/crop-settings.tsx

@@ -110,11 +110,11 @@ export function CropSettings({
         let newWidth: number;
         let newHeight: number;
         if (value > imgAspect) {
-          // Wider than image — constrain by width
+          // Desired ratio is wider than image — use full width, shrink height
           newWidth = 100;
           newHeight = (imgDimensions.width / value / imgDimensions.height) * 100;
         } else {
-          // Taller than image — constrain by height
+          // Desired ratio is taller than image — use full height, shrink width
           newHeight = 100;
           newWidth = (imgDimensions.height * value / imgDimensions.width) * 100;
         }