fix(upload): preserve resolution when cropping product images

The crop canvas was sized to cropArea.width/height, which are the editor's
on-screen (CSS) pixels — a few hundred px. Phone photos were therefore
downscaled to that size before upload, so cropped product images came out
blurry (most visibly on iPhone, whose source photos are large).

Size the canvas to the crop region in the source image's native pixels
(adjustedCropWidth/Height, already computed) and draw 1:1. Bumped JPEG
quality 0.9 -> 0.92. The backend still caps the final image to 1600px webp,
so output size stays bounded.

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

app/components/store/ImageEditor.tsx

@@ -302,20 +302,30 @@ export function ImageEditor({
       const adjustedCropWidth = cropArea.width * scaleX;
       const adjustedCropHeight = cropArea.height * scaleY;
 
-      // Set canvas size to crop area
-      canvas.width = cropArea.width;
-      canvas.height = cropArea.height;
+      // Crop rectangle expressed in the SOURCE image's native pixels
+      // (adjusted* already scales the on-screen crop back up to the original).
+      const srcX = Math.max(0, adjustedCropX);
+      const srcY = Math.max(0, adjustedCropY);
+      const srcWidth = Math.min(adjustedCropWidth, img.width - srcX);
+      const srcHeight = Math.min(adjustedCropHeight, img.height - srcY);
+
+      // Size the canvas to the full-resolution crop region, NOT the editor's
+      // on-screen crop size. Using the display size here was downscaling phone
+      // photos to a few hundred pixels, which is what made uploads blurry.
+      // The backend still caps the final image to 1600px.
+      canvas.width = Math.max(1, Math.round(srcWidth));
+      canvas.height = Math.max(1, Math.round(srcHeight));
 
       // Clear canvas
       ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-      // Draw the cropped portion
+      // Draw the cropped portion at native resolution
       ctx.drawImage(
         img,
-        Math.max(0, adjustedCropX),
-        Math.max(0, adjustedCropY),
-        Math.min(adjustedCropWidth, img.width - Math.max(0, adjustedCropX)),
-        Math.min(adjustedCropHeight, img.height - Math.max(0, adjustedCropY)),
+        srcX,
+        srcY,
+        srcWidth,
+        srcHeight,
         0,
         0,
         canvas.width,
@@ -331,7 +341,7 @@ export function ImageEditor({
           onClose();
         },
         "image/jpeg",
-        0.9
+        0.92
       );
     };