@alpaca-editor/core 1.0.3978 → 1.0.3980

package/src/editor/PictureCropper.tsx

@@ -1,21 +1,30 @@
-import { Dialog } from "primereact/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "../components/ui/dialog";
 import { useEditContext } from "./client/editContext";
 import { ReactNode, useEffect, useRef, useState } from "react";
-import { Button } from "primereact/button";
+import { Button } from "../components/ui/button";
 import DialogButtons from "./ui/DialogButtons";
 import { Rect } from "./utils";
 import { classNames } from "primereact/utils";
 import {
   PictureField,
   PictureRawValue,
+  PictureRawVariant,
   PictureValue,
   PictureVariant,
 } from "./fieldTypes";
+import { RotateCcw } from "lucide-react";
+import { SimpleTabs, Tab } from "./ui/SimpleTabs";
+import { AspectRatioSelector } from "./AspectRatioSelector";
 
 export function PictureCropper({
   field,
   onClose,
-  variantName: selectedVariantName,
+  variantName: initialVariantName,
 }: {
   field: PictureField;
   variantName: string;
@@ -28,6 +37,22 @@ export function PictureCropper({
     width: number;
     height: number;
   } | null>(null);
+  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);
+
+  // Track selected aspect ratio for each variant
+  const [selectedAspectRatio, setSelectedAspectRatio] = useState<number | null>(
+    null,
+  );
+
+  // Track crop rectangles for each variant separately
+  const [variantRects, setVariantRects] = useState<
+    Map<string, Rect | undefined>
+  >(new Map());
+
+  // Cache image dimensions by URL to avoid showing loading indicator for already loaded images
+  const imageDimensionsCache = useRef<
+    Map<string, { width: number; height: number }>
+  >(new Map());
 
   const imageRef = useRef<HTMLDivElement>(null);
   const [rect, setRect] = useState<Rect>();
@@ -46,6 +71,35 @@ export function PictureCropper({
   const [resizeEdge, setResizeEdge] = useState<string | null>(null);
   const resizeEdgeRef = useRef<string | null>(null);
 
+  // Helper function to create default region for aspect ratio locked variants
+  const createDefaultRegion = (): Rect | undefined => {
+    if (!selectedAspectRatio || !actualImageDimensions) {
+      return undefined;
+    }
+
+    // Always use the actual loaded image dimensions for aspect ratio calculations
+    const sourceWidth = actualImageDimensions.width;
+    const sourceHeight = actualImageDimensions.height;
+    const sourceAspectRatio = sourceHeight > 0 ? sourceWidth / sourceHeight : 1;
+    const targetAspectRatio = selectedAspectRatio;
+
+    // Calculate maximum size that fits the target aspect ratio within the source image
+    let width = 1.0; // Start with full width
+    let height = (width / targetAspectRatio) * sourceAspectRatio;
+
+    // If height exceeds bounds, start with full height instead
+    if (height > 1.0) {
+      height = 1.0;
+      width = (height * targetAspectRatio) / sourceAspectRatio;
+    }
+
+    // Center the rectangle
+    const x = (1.0 - width) / 2;
+    const y = (1.0 - height) / 2;
+
+    return { x, y, width, height };
+  };
+
   const getResizeEdge = (
     pos: { x: number; y: number },
     rect?: Rect,
@@ -86,35 +140,130 @@ export function PictureCropper({
     setRawValue(raw);
   }, [field]);
 
+  // Set initial tab based on the provided variant name
+  useEffect(() => {
+    if (pictureValue?.variants && initialVariantName) {
+      const initialIndex = pictureValue.variants.findIndex(
+        (variant) => variant.name === initialVariantName,
+      );
+      if (initialIndex >= 0) {
+        setActiveTabIndex(initialIndex);
+      }
+    }
+  }, [pictureValue, initialVariantName]);
+
   const selectedVariant =
-    pictureValue && pictureValue.variants
-      ? pictureValue.variants?.find(
-          (x: PictureVariant) => x.name == selectedVariantName,
-        )
+    pictureValue &&
+    pictureValue.variants &&
+    pictureValue.variants[activeTabIndex]
+      ? pictureValue.variants[activeTabIndex]
       : null;
 
+  const selectedVariantName = selectedVariant?.name || "";
+
+  // Update selected aspect ratio when switching variants
   useEffect(() => {
+    if (selectedVariant) {
+      // If variant has locked aspect ratio, use that
+      if (selectedVariant.aspectRatioLock) {
+        setSelectedAspectRatio(selectedVariant.aspectRatioLock);
+      } else {
+        // Default to free form if no lock
+        setSelectedAspectRatio(null);
+      }
+    }
+  }, [selectedVariant]);
+
+  // Manage image dimensions when the image source changes between variants
+  const currentImageSrc = selectedVariant?.originalSrc ?? selectedVariant?.src;
+  const previousImageSrcRef = useRef<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (currentImageSrc && currentImageSrc !== previousImageSrcRef.current) {
+      // Check if we have cached dimensions for this image
+      const cachedDimensions =
+        imageDimensionsCache.current.get(currentImageSrc);
+      if (cachedDimensions) {
+        setActualImageDimensions(cachedDimensions);
+      } else {
+        // Only reset to null if we don't have cached dimensions
+        setActualImageDimensions(null);
+      }
+      previousImageSrcRef.current = currentImageSrc;
+    }
+  }, [currentImageSrc]);
+
+  // Load crop rectangle when switching variants
+  useEffect(() => {
+    if (!selectedVariantName) return;
+
+    // Check if we have a current working rect for this variant
+    const existingRect = variantRects.get(selectedVariantName);
+
+    // If we have a valid rect, use it
+    if (existingRect !== undefined) {
+      setRect(existingRect);
+      return;
+    }
+
+    // Initialize rect for this variant if not already done
+    let initialRect: Rect | undefined;
+
+    // Try to load from saved region if this variant hasn't been touched yet
     if (
       selectedVariant?.region &&
-      (!selectedVariant.aspectRatioLock ||
+      (!selectedAspectRatio ||
         Math.abs(
-          selectedVariant.aspectRatioLock -
+          selectedAspectRatio -
             (selectedVariant.region.width * selectedVariant.width) /
               (selectedVariant.region.height * selectedVariant.height),
         ) < 0.1) &&
       selectedVariant.region.width > 0 &&
       selectedVariant.region.height > 0
     ) {
-      setRect({
+      initialRect = {
         width: selectedVariant.region.width,
         height: selectedVariant.region.height,
         y: selectedVariant.region.y,
         x: selectedVariant.region.x,
-      });
+      };
     } else {
-      setRect(undefined);
+      // Try to create a default region if aspect ratio is locked
+      initialRect = createDefaultRegion();
     }
-  }, [selectedVariant]);
+
+    // Store in variantRects and set as current rect
+    setVariantRects((prev) =>
+      new Map(prev).set(selectedVariantName, initialRect),
+    );
+    setRect(initialRect);
+  }, [selectedVariant, selectedVariantName]);
+
+  // Create default region when image dimensions become available
+  useEffect(() => {
+    if (
+      selectedVariant &&
+      actualImageDimensions &&
+      !selectedVariant?.region &&
+      selectedAspectRatio
+    ) {
+      const defaultRect = createDefaultRegion();
+      setVariantRects((prev) =>
+        new Map(prev).set(selectedVariant.name, defaultRect),
+      );
+      setRect(defaultRect);
+    }
+  }, [actualImageDimensions, selectedVariant, selectedAspectRatio]);
+
+  // Update working state when rect changes (but only if user is actively editing)
+  const isUserEditingRef = useRef(false);
+
+  useEffect(() => {
+    if (selectedVariantName && isUserEditingRef.current) {
+      setVariantRects((prev) => new Map(prev).set(selectedVariantName, rect));
+      isUserEditingRef.current = false;
+    }
+  }, [rect, selectedVariantName]);
 
   useEffect(() => {
     if (!rect) return;
@@ -131,15 +280,21 @@ export function PictureCropper({
     if (!rawValue) return;
     if (!selectedVariantName) return;
     if (selectedVariant) {
-      let selected = rawValue.Variants?.find(
-        (x) => x.Name == selectedVariantName,
+      // Create a deep copy of rawValue to avoid mutations
+      const newRawValue = JSON.parse(JSON.stringify(rawValue));
+
+      let selected = newRawValue.Variants?.find(
+        (x: PictureRawVariant) => x.Name == selectedVariantName,
       );
       if (!selected) {
         selected = {
           Name: selectedVariantName,
           MediaId: selectedVariant.mediaId!,
         };
-        rawValue.Variants?.push(selected);
+        if (!newRawValue.Variants) {
+          newRawValue.Variants = [];
+        }
+        newRawValue.Variants.push(selected);
       }
       if (selected) {
         if (rect)
@@ -150,7 +305,7 @@ export function PictureCropper({
             Height: rect.height,
           };
         else selected.Region = undefined;
-        setRawValue(rawValue);
+        setRawValue(newRawValue);
       }
     }
   }, [rect]);
@@ -187,69 +342,284 @@ export function PictureCropper({
         };
 
         let newRect = { ...rect };
-        const aspectRatio = selectedVariant.aspectRatioLock;
-        const actualWidth =
-          selectedVariant.width > 0
-            ? selectedVariant.width
-            : actualImageDimensions?.width || 0;
-        const actualHeight =
-          selectedVariant.height > 0
-            ? selectedVariant.height
-            : actualImageDimensions?.height || 0;
-        const originalAspectRatio =
-          actualHeight > 0 ? actualWidth / actualHeight : 1;
-
-        if (resizeEdgeRef.current.includes("w")) {
-          const newWidth = rect.width + rect.x - pos.x;
-          if (newWidth > 0) {
-            newRect.width = newWidth;
-            newRect.x = pos.x;
-            if (aspectRatio) {
-              newRect.height =
-                (newRect.width / aspectRatio) * originalAspectRatio;
-            }
+        const aspectRatio = selectedAspectRatio;
+        const sourceWidth = actualImageDimensions?.width || 0;
+        const sourceHeight = actualImageDimensions?.height || 0;
+        const sourceAspectRatio =
+          sourceHeight > 0 ? sourceWidth / sourceHeight : 1;
+
+        // Handle resize based on edge - structure to avoid conflicts between corner handles
+        if (resizeEdgeRef.current === "w") {
+          // Pure west edge - resize from left, keep right edge fixed
+          const rightEdge = rect.x + rect.width;
+          const newWidth = Math.max(0.01, rightEdge - pos.x);
+          newRect.width = newWidth;
+          newRect.x = rightEdge - newWidth;
+          if (aspectRatio) {
+            const newHeight = (newWidth / aspectRatio) * sourceAspectRatio;
+            const centerY = rect.y + rect.height / 2;
+            newRect.y = centerY - newHeight / 2;
+            newRect.height = newHeight;
           }
-        }
-        if (resizeEdgeRef.current.includes("e")) {
+        } else if (resizeEdgeRef.current === "e") {
+          // Pure east edge - resize from right, keep left edge fixed
           const newWidth = pos.x - rect.x;
           if (newWidth > 0) {
             newRect.width = newWidth;
             if (aspectRatio) {
-              newRect.height =
-                (newRect.width / aspectRatio) * originalAspectRatio;
+              const newHeight = (newWidth / aspectRatio) * sourceAspectRatio;
+              const centerY = rect.y + rect.height / 2;
+              newRect.y = centerY - newHeight / 2;
+              newRect.height = newHeight;
             }
           }
-        }
-        if (resizeEdgeRef.current.includes("n")) {
-          const newHeight = rect.height + rect.y - pos.y;
+        } else if (resizeEdgeRef.current === "n") {
+          // Pure north edge - resize from top, keep bottom edge fixed
+          const bottomEdge = rect.y + rect.height;
+          const newHeight = bottomEdge - pos.y;
           if (newHeight > 0) {
             newRect.height = newHeight;
             newRect.y = pos.y;
             if (aspectRatio) {
-              newRect.width =
-                (newRect.height * aspectRatio) / originalAspectRatio;
+              const newWidth = (newHeight * aspectRatio) / sourceAspectRatio;
+              const centerX = rect.x + rect.width / 2;
+              newRect.x = centerX - newWidth / 2;
+              newRect.width = newWidth;
             }
           }
-        }
-        if (resizeEdgeRef.current.includes("s")) {
+        } else if (resizeEdgeRef.current === "s") {
+          // Pure south edge - resize from bottom, keep top edge fixed
           const newHeight = pos.y - rect.y;
           if (newHeight > 0) {
             newRect.height = newHeight;
             if (aspectRatio) {
-              newRect.width =
-                (newRect.height * aspectRatio) / originalAspectRatio;
+              const newWidth = (newHeight * aspectRatio) / sourceAspectRatio;
+              const centerX = rect.x + rect.width / 2;
+              newRect.x = centerX - newWidth / 2;
+              newRect.width = newWidth;
+            }
+          }
+        } else if (
+          resizeEdgeRef.current.includes("w") &&
+          resizeEdgeRef.current.includes("n")
+        ) {
+          // Northwest corner - keep southeast corner fixed
+          const rightEdge = rect.x + rect.width;
+          const bottomEdge = rect.y + rect.height;
+          const newWidth = Math.max(0.01, rightEdge - pos.x);
+          const newHeight = Math.max(0.01, bottomEdge - pos.y);
+          newRect.width = newWidth;
+          newRect.height = newHeight;
+          newRect.x = rightEdge - newWidth;
+          newRect.y = bottomEdge - newHeight;
+          if (aspectRatio) {
+            // Use mouse movement direction to determine primary dimension
+            if (Math.abs(deltaX) > Math.abs(deltaY)) {
+              newRect.height = (newWidth / aspectRatio) * sourceAspectRatio;
+              newRect.y = bottomEdge - newRect.height;
+            } else {
+              newRect.width = (newHeight * aspectRatio) / sourceAspectRatio;
+              newRect.x = rightEdge - newRect.width;
+            }
+          }
+        } else if (
+          resizeEdgeRef.current.includes("w") &&
+          resizeEdgeRef.current.includes("s")
+        ) {
+          // Southwest corner - keep northeast corner fixed
+          const rightEdge = rect.x + rect.width;
+          const newWidth = Math.max(0.01, rightEdge - pos.x);
+          const newHeight = Math.max(0.01, pos.y - rect.y);
+          newRect.width = newWidth;
+          newRect.height = newHeight;
+          newRect.x = rightEdge - newWidth;
+          if (aspectRatio) {
+            // Use mouse movement direction to determine primary dimension
+            if (Math.abs(deltaX) > Math.abs(deltaY)) {
+              newRect.height = (newWidth / aspectRatio) * sourceAspectRatio;
+            } else {
+              newRect.width = (newHeight * aspectRatio) / sourceAspectRatio;
+              newRect.x = rightEdge - newRect.width;
+            }
+          }
+        } else if (
+          resizeEdgeRef.current.includes("e") &&
+          resizeEdgeRef.current.includes("n")
+        ) {
+          // Northeast corner - keep southwest corner fixed
+          const bottomEdge = rect.y + rect.height;
+          const newWidth = Math.max(0.01, pos.x - rect.x);
+          const newHeight = Math.max(0.01, bottomEdge - pos.y);
+          newRect.width = newWidth;
+          newRect.height = newHeight;
+          newRect.y = bottomEdge - newHeight;
+          if (aspectRatio) {
+            // Use mouse movement direction to determine primary dimension
+            if (Math.abs(deltaX) > Math.abs(deltaY)) {
+              newRect.height = (newWidth / aspectRatio) * sourceAspectRatio;
+              newRect.y = bottomEdge - newRect.height;
+            } else {
+              newRect.width = (newHeight * aspectRatio) / sourceAspectRatio;
+            }
+          }
+        } else if (
+          resizeEdgeRef.current.includes("e") &&
+          resizeEdgeRef.current.includes("s")
+        ) {
+          // Southeast corner - keep northwest corner fixed
+          const newWidth = Math.max(0.01, pos.x - rect.x);
+          const newHeight = Math.max(0.01, pos.y - rect.y);
+          newRect.width = newWidth;
+          newRect.height = newHeight;
+          if (aspectRatio) {
+            // Use mouse movement direction to determine primary dimension
+            if (Math.abs(deltaX) > Math.abs(deltaY)) {
+              newRect.height = (newWidth / aspectRatio) * sourceAspectRatio;
+            } else {
+              newRect.width = (newHeight * aspectRatio) / sourceAspectRatio;
+            }
+          }
+        }
+
+        // Constrain to bounds while maintaining aspect ratio
+        // For west edge resizes, maintain the right edge position when hitting left bound
+        if (newRect.x < 0) {
+          if (resizeEdgeRef.current?.includes("w")) {
+            const rightEdge = rect.x + rect.width; // Original right edge position
+            newRect.x = 0;
+            newRect.width = rightEdge; // Width = distance from left bound to original right edge
+            // Recalculate height if aspect ratio is locked
+            if (aspectRatio) {
+              const newHeight = (rightEdge / aspectRatio) * sourceAspectRatio;
+              if (resizeEdgeRef.current === "w") {
+                const centerY = rect.y + rect.height / 2;
+                newRect.y = centerY - newHeight / 2;
+              }
+              newRect.height = newHeight;
             }
+          } else {
+            newRect.x = 0;
+          }
+        }
+        // For north edge resizes, maintain the bottom edge position when hitting top bound
+        if (newRect.y < 0) {
+          if (resizeEdgeRef.current?.includes("n")) {
+            const bottomEdge = rect.y + rect.height;
+            newRect.y = 0;
+            newRect.height = bottomEdge; // Keep bottom edge fixed
+            // Recalculate width if aspect ratio is locked
+            if (aspectRatio) {
+              const newWidth =
+                (newRect.height * aspectRatio) / sourceAspectRatio;
+              if (resizeEdgeRef.current === "n") {
+                const centerX = rect.x + rect.width / 2;
+                newRect.x = centerX - newWidth / 2;
+              }
+              newRect.width = newWidth;
+            }
+          } else {
+            newRect.y = 0;
           }
         }
 
-        // Constrain to bounds
-        if (newRect.x < 0) newRect.x = 0;
-        if (newRect.y < 0) newRect.y = 0;
-        if (newRect.x + newRect.width > 1) newRect.width = 1 - newRect.x;
-        if (newRect.y + newRect.height > 1) newRect.height = 1 - newRect.y;
+        // Apply bounds constraints and maintain aspect ratio
+        let boundedRect = { ...newRect };
+        if (boundedRect.x + boundedRect.width > 1) {
+          boundedRect.width = 1 - boundedRect.x;
+          // Re-apply aspect ratio if it was locked
+          if (aspectRatio) {
+            const newHeight =
+              (boundedRect.width / aspectRatio) * sourceAspectRatio;
+            // Maintain anchoring behavior based on resize edge
+            if (
+              resizeEdgeRef.current === "w" ||
+              resizeEdgeRef.current === "e"
+            ) {
+              // For horizontal resizes, keep centered vertically
+              const centerY = rect.y + rect.height / 2;
+              boundedRect.y = centerY - newHeight / 2;
+            }
+            boundedRect.height = newHeight;
+          }
+        }
+        if (boundedRect.y + boundedRect.height > 1) {
+          boundedRect.height = 1 - boundedRect.y;
+          // Re-apply aspect ratio if it was locked
+          if (aspectRatio) {
+            const newWidth =
+              (boundedRect.height * aspectRatio) / sourceAspectRatio;
+            // Maintain anchoring behavior based on resize edge
+            if (
+              resizeEdgeRef.current === "n" ||
+              resizeEdgeRef.current === "s"
+            ) {
+              // For vertical resizes, keep centered horizontally
+              const centerX = rect.x + rect.width / 2;
+              boundedRect.x = centerX - newWidth / 2;
+            }
+            boundedRect.width = newWidth;
+          }
+        }
+
+        // Final check - if aspect ratio re-calculation pushes us out of bounds again,
+        // we need to find the maximum size that fits both constraints
+        if (
+          aspectRatio &&
+          (boundedRect.x + boundedRect.width > 1 ||
+            boundedRect.y + boundedRect.height > 1)
+        ) {
+          const maxWidth = 1 - boundedRect.x;
+          const maxHeight = 1 - boundedRect.y;
+          const maxHeightFromWidth =
+            (maxWidth / aspectRatio) * sourceAspectRatio;
+          const maxWidthFromHeight =
+            (maxHeight * aspectRatio) / sourceAspectRatio;
 
+          if (maxHeightFromWidth <= maxHeight) {
+            // Width is the limiting factor
+            boundedRect.width = maxWidth;
+            boundedRect.height = maxHeightFromWidth;
+            // Maintain anchoring for horizontal resizes
+            if (
+              resizeEdgeRef.current === "w" ||
+              resizeEdgeRef.current === "e"
+            ) {
+              const centerY = rect.y + rect.height / 2;
+              boundedRect.y = Math.max(
+                0,
+                Math.min(
+                  1 - boundedRect.height,
+                  centerY - boundedRect.height / 2,
+                ),
+              );
+            }
+          } else {
+            // Height is the limiting factor
+            boundedRect.height = maxHeight;
+            boundedRect.width = maxWidthFromHeight;
+            // Maintain anchoring for vertical resizes
+            if (
+              resizeEdgeRef.current === "n" ||
+              resizeEdgeRef.current === "s"
+            ) {
+              const centerX = rect.x + rect.width / 2;
+              boundedRect.x = Math.max(
+                0,
+                Math.min(
+                  1 - boundedRect.width,
+                  centerX - boundedRect.width / 2,
+                ),
+              );
+            }
+          }
+        }
+
+        newRect = boundedRect;
+
+        isUserEditingRef.current = true;
         setRect(newRect);
       } else if (movingRef.current) {
+        isUserEditingRef.current = true;
         setRect({
           ...rect,
           x: Math.max(
@@ -268,18 +638,12 @@ export function PictureCropper({
           ),
         });
       } else {
-        const actualWidth =
-          selectedVariant.width > 0
-            ? selectedVariant.width
-            : actualImageDimensions?.width || 0;
-        const actualHeight =
-          selectedVariant.height > 0
-            ? selectedVariant.height
-            : actualImageDimensions?.height || 0;
-        const originalAspectRatio =
-          actualHeight > 0 ? actualWidth / actualHeight : 1;
-
-        const aspectRatio = selectedVariant.aspectRatioLock;
+        const sourceWidth = actualImageDimensions?.width || 0;
+        const sourceHeight = actualImageDimensions?.height || 0;
+        const sourceAspectRatio =
+          sourceHeight > 0 ? sourceWidth / sourceHeight : 1;
+
+        const aspectRatio = selectedAspectRatio;
 
         const currentX = (ev.clientX - bounds.left) / bounds.width;
         const currentY = (ev.clientY - bounds.top) / bounds.height;
@@ -294,20 +658,42 @@ export function PictureCropper({
 
         if (aspectRatio) {
           if (Math.abs(deltaX) > Math.abs(deltaY)) {
-            height = (width / aspectRatio) * originalAspectRatio;
+            height = (width / aspectRatio) * sourceAspectRatio;
           } else {
-            width = (height * aspectRatio) / originalAspectRatio;
+            width = (height * aspectRatio) / sourceAspectRatio;
           }
         }
 
-        if (width + minX > 1) {
-          width = 1 - minX;
-          if (aspectRatio) height = (width / aspectRatio) * originalAspectRatio;
-        }
+        // Apply bounds constraints and maintain aspect ratio
+        if (aspectRatio) {
+          const maxWidth = 1 - minX;
+          const maxHeight = 1 - minY;
+          const maxHeightFromWidth =
+            (maxWidth / aspectRatio) * sourceAspectRatio;
+          const maxWidthFromHeight =
+            (maxHeight * aspectRatio) / sourceAspectRatio;
 
-        if (height + minY > 1) {
-          height = 1 - minY;
-          if (aspectRatio) width = (height * aspectRatio) / originalAspectRatio;
+          if (maxHeightFromWidth <= maxHeight) {
+            // Width is the limiting factor
+            if (width > maxWidth) {
+              width = maxWidth;
+              height = maxHeightFromWidth;
+            }
+          } else {
+            // Height is the limiting factor
+            if (height > maxHeight) {
+              height = maxHeight;
+              width = maxWidthFromHeight;
+            }
+          }
+        } else {
+          // No aspect ratio lock, just apply simple bounds
+          if (width + minX > 1) {
+            width = 1 - minX;
+          }
+          if (height + minY > 1) {
+            height = 1 - minY;
+          }
         }
 
         // Ensure final dimensions are non-negative
@@ -315,6 +701,7 @@ export function PictureCropper({
         height = Math.max(0, height);
 
         const newRect = { x: minX, y: minY, width, height };
+        isUserEditingRef.current = true;
         setRect(newRect);
       }
       ev.preventDefault();
@@ -324,6 +711,7 @@ export function PictureCropper({
 
   const handleMouseUp = () => {
     if (!rectRef.current || !rectRef.current.width || !rectRef.current.height) {
+      isUserEditingRef.current = true;
       setRect(undefined);
     }
     movingRef.current = false;
@@ -364,6 +752,7 @@ export function PictureCropper({
         y: pos.y - rect!.y,
       };
     } else {
+      isUserEditingRef.current = true;
       setRect({
         x: (ev.clientX - bounds.left) / bounds.width,
         y: (ev.clientY - bounds.top) / bounds.height,
@@ -377,176 +766,278 @@ export function PictureCropper({
     window.addEventListener("mouseup", handleMouseUp);
   };
 
-  if (!selectedVariant) return null;
+  if (!pictureValue?.variants || pictureValue.variants.length === 0) {
+    return null;
+  }
+
+  // Create tabs for each variant
+  const variantTabs: Tab[] = pictureValue.variants.map((variant, index) => ({
+    id: `variant-${index}`,
+    label: variant.name,
+    content: null, // Content will be rendered separately
+  }));
 
   const imageBounds = imageRef.current?.getBoundingClientRect();
-  const actualWidth =
-    selectedVariant.width > 0
+  const sourceWidth = actualImageDimensions?.width || 0;
+  const sourceHeight = actualImageDimensions?.height || 0;
+
+  // For output dimensions, prefer variant dimensions if specified
+  const outputWidth =
+    selectedVariant?.width && selectedVariant.width > 0
       ? selectedVariant.width
-      : actualImageDimensions?.width || 0;
-  const actualHeight =
-    selectedVariant.height > 0
+      : sourceWidth;
+  const outputHeight =
+    selectedVariant?.height && selectedVariant.height > 0
       ? selectedVariant.height
-      : actualImageDimensions?.height || 0;
+      : sourceHeight;
+
   const scale =
-    imageBounds && actualWidth > 0 ? actualWidth / imageBounds.width : 1;
-  const widthPx = rect ? Math.round(rect.width * actualWidth) : 0;
-  const heightPx = rect ? Math.round(rect.height * actualHeight) : 0;
+    imageBounds && outputWidth > 0 ? outputWidth / imageBounds.width : 1;
+  const widthPx = rect ? Math.round(rect.width * outputWidth) : 0;
+  const heightPx = rect ? Math.round(rect.height * outputHeight) : 0;
 
   return (
     <>
-      <Dialog
-        header={"Crop " + field.name + " - " + selectedVariantName}
-        pt={{ content: { style: { paddingLeft: "0" } } }}
-        visible={true}
-        style={{ width: "75vw", height: "75vh" }}
-        onHide={onClose}
-      >
-        <div className="justify flex h-full flex-col gap-1">
-          <div className="flex flex-1 gap-2">
-            <div className="flex w-56 flex-col gap-3 bg-gray-100 p-4 text-sm">
-              <LabelAndValue label="Variant:" value={selectedVariantName} />
-              <LabelAndValue
-                label="Image Dimensions:"
-                value={
-                  selectedVariant.width > 0 && selectedVariant.height > 0 ? (
-                    <>
-                      {selectedVariant.width} x {selectedVariant.height}
-                    </>
-                  ) : actualImageDimensions ? (
-                    <>
-                      {actualImageDimensions.width} x{" "}
-                      {actualImageDimensions.height} (actual)
-                    </>
-                  ) : (
-                    <span className="text-gray-500">Loading...</span>
-                  )
-                }
-              />
-              {selectedVariant.aspectRatioLock && (
-                <LabelAndValue
-                  label="Required Aspect Ratio:"
-                  value={selectedVariant.aspectRatioLockText}
-                />
-              )}
-              {selectedVariant.minWidth && (
-                <LabelAndValue
-                  label="Minimum Width:"
-                  value={selectedVariant.minWidth}
-                />
-              )}
-              {selectedVariant.minHeight && (
-                <LabelAndValue
-                  label="Minimum Height:"
-                  value={selectedVariant.minHeight}
-                />
-              )}
-              {rect && (
-                <>
-                  <LabelAndValue
-                    label="Selection:"
-                    value={
+      <Dialog open={true} onOpenChange={(open) => !open && onClose()}>
+        <DialogContent className="h-[75vh] max-h-none w-[75vw] max-w-none">
+          <DialogHeader>
+            <DialogTitle>Crop {field.name}</DialogTitle>
+          </DialogHeader>
+          <div className="justify flex h-full flex-col">
+            <div className="flex flex-1 gap-2">
+              <div className="flex w-72 flex-col gap-3 p-6 text-sm">
+                {/* Variant Tabs */}
+                <div className="mb-4">
+                  <SimpleTabs
+                    tabs={variantTabs}
+                    activeTab={activeTabIndex}
+                    setActiveTab={setActiveTabIndex}
+                    className="border-gray-2 border-b text-xs"
+                    tabClassName="flex-1 text-center"
+                  />
+                </div>
+
+                {selectedVariant && (
+                  <>
+                    <div className="mb-4">
+                      <AspectRatioSelector
+                        selectedRatio={selectedAspectRatio}
+                        onRatioChange={(ratio) => {
+                          setSelectedAspectRatio(ratio);
+                          // Reset the crop rect to default when aspect ratio changes
+                          const defaultRect = createDefaultRegion();
+                          isUserEditingRef.current = true;
+                          setRect(defaultRect);
+                        }}
+                        lockedRatio={selectedVariant.aspectRatioLock}
+                      />
+                    </div>
+                    <LabelAndValue
+                      label="Image Dimensions"
+                      value={
+                        selectedVariant.width > 0 &&
+                        selectedVariant.height > 0 ? (
+                          <>
+                            {selectedVariant.width} x {selectedVariant.height}
+                          </>
+                        ) : actualImageDimensions ? (
+                          <>
+                            {actualImageDimensions.width} x{" "}
+                            {actualImageDimensions.height} (actual)
+                          </>
+                        ) : (
+                          <span className="text-gray-500">Loading...</span>
+                        )
+                      }
+                    />
+
+                    {selectedVariant.minWidth && (
+                      <LabelAndValue
+                        label="Minimum Width:"
+                        value={selectedVariant.minWidth}
+                      />
+                    )}
+                    {selectedVariant.minHeight && (
+                      <LabelAndValue
+                        label="Minimum Height:"
+                        value={selectedVariant.minHeight}
+                      />
+                    )}
+                    {rect && (
                       <>
-                        {widthPx} x {heightPx}
+                        <LabelAndValue
+                          label="Selection"
+                          value={
+                            <>
+                              {widthPx} x {heightPx}
+                            </>
+                          }
+                        />
+                        {selectedVariant.minWidth &&
+                          widthPx < selectedVariant.minWidth && (
+                            <div className="text-red-500">
+                              Minimum width not met!
+                            </div>
+                          )}
+                        {selectedVariant.minHeight &&
+                          heightPx < selectedVariant.minHeight && (
+                            <div className="text-red-500">
+                              Minimum height not met!
+                            </div>
+                          )}
                       </>
-                    }
-                  />
-                  {selectedVariant.minWidth &&
-                    widthPx < selectedVariant.minWidth && (
-                      <div className="text-red-500">Minimum width not met!</div>
                     )}
-                  {selectedVariant.minHeight &&
-                    heightPx < selectedVariant.minHeight && (
-                      <div className="text-red-500">
-                        Minimum height not met!
+                  </>
+                )}
+              </div>
+              <div className="bg-gray-4 relative flex-1">
+                {selectedVariant && (
+                  <div className="absolute inset-3 flex items-center justify-center select-none">
+                    {/* Loading indicator when dimensions are not available */}
+                    {!actualImageDimensions && (
+                      <div className="absolute inset-0 flex items-center justify-center">
+                        <div className="text-gray-500">Loading image...</div>
                       </div>
                     )}
-                </>
-              )}
-            </div>
-            <div className="relative flex-1 p-3">
-              <div className="absolute inset-0 top-3 flex items-center justify-center select-none">
-                <div
-                  ref={imageRef}
-                  className="relative max-h-full cursor-crosshair"
-                  style={{
-                    ...(actualWidth > 0 && actualHeight > 0
-                      ? { aspectRatio: `${actualWidth}/${actualHeight}` }
-                      : {}),
-                  }}
-                  onMouseDown={handleMouseDown}
-                  onMouseMove={handleMouseMove}
-                >
-                  <img
-                    className="max-h-full max-w-full object-scale-down"
-                    src={selectedVariant.originalSrc ?? selectedVariant.src}
-                    onLoad={(e) => {
-                      const img = e.target as HTMLImageElement;
-                      setActualImageDimensions({
-                        width: img.naturalWidth,
-                        height: img.naturalHeight,
-                      });
-                    }}
-                  />
-                  {rect && (
-                    <div
-                      className={classNames(
-                        "absolute cursor-move border text-xs opacity-70",
-                        isValid
-                          ? "border-blue-400 bg-blue-200 text-blue-500"
-                          : "border-red-400 bg-red-200 text-red-500",
-                      )}
-                      style={{
-                        left: rect.x * 100 + "%",
-                        top: rect.y * 100 + "%",
-                        width: widthPx / scale + "px",
-                        height: heightPx / scale + "px",
-                        cursor: resizeEdge
-                          ? resizeEdge.length === 1
-                            ? `${resizeEdge}-resize`
-                            : `${resizeEdge}-resize`
-                          : "move",
-                      }}
-                    >
-                      {widthPx / scale > 50 && (
-                        <div
-                          className="absolute right-2 bottom-1 text-nowrap"
-                          style={{ textShadow: "white 1px 1px" }}
-                        >
-                          {widthPx} x {heightPx}
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
+                    {/* Hidden image for loading dimensions */}
+                    {!actualImageDimensions && (
+                      <img
+                        className="pointer-events-none absolute opacity-0"
+                        src={selectedVariant.originalSrc ?? selectedVariant.src}
+                        onLoad={(e) => {
+                          const img = e.target as HTMLImageElement;
+                          const dimensions = {
+                            width: img.naturalWidth,
+                            height: img.naturalHeight,
+                          };
+                          // Cache the dimensions for this image URL
+                          const imgSrc =
+                            selectedVariant.originalSrc ?? selectedVariant.src;
+                          if (imgSrc) {
+                            imageDimensionsCache.current.set(
+                              imgSrc,
+                              dimensions,
+                            );
+                          }
+                          setActualImageDimensions(dimensions);
+                        }}
+                      />
+                    )}
+                    {/* Only render the interactive image container when we have dimensions */}
+                    {actualImageDimensions && (
+                      <div
+                        ref={imageRef}
+                        className="relative max-h-full cursor-crosshair"
+                        style={{
+                          aspectRatio: `${sourceWidth}/${sourceHeight}`,
+                        }}
+                        onMouseDown={handleMouseDown}
+                        onMouseMove={handleMouseMove}
+                      >
+                        <img
+                          className="max-h-full max-w-full object-scale-down"
+                          src={
+                            selectedVariant.originalSrc ?? selectedVariant.src
+                          }
+                        />
+                        {rect && (
+                          <>
+                            {/* Gray mask overlay */}
+                            <div
+                              className="pointer-events-none absolute inset-0 bg-black/40"
+                              style={{
+                                clipPath: `polygon(0% 0%, 0% 100%, ${rect.x * 100}% 100%, ${rect.x * 100}% ${rect.y * 100}%, ${(rect.x + rect.width) * 100}% ${rect.y * 100}%, ${(rect.x + rect.width) * 100}% ${(rect.y + rect.height) * 100}%, ${rect.x * 100}% ${(rect.y + rect.height) * 100}%, ${rect.x * 100}% 100%, 100% 100%, 100% 0%)`,
+                              }}
+                            />
+
+                            {/* Crop area border and interaction */}
+                            <div
+                              className={classNames(
+                                "absolute cursor-move border-2 border-dashed",
+                                isValid
+                                  ? "border-theme-secondary"
+                                  : "border-red-400",
+                              )}
+                              style={{
+                                left: rect.x * 100 + "%",
+                                top: rect.y * 100 + "%",
+                                width: rect.width * 100 + "%",
+                                height: rect.height * 100 + "%",
+                                cursor: resizeEdge
+                                  ? resizeEdge.length === 1
+                                    ? `${resizeEdge}-resize`
+                                    : `${resizeEdge}-resize`
+                                  : "move",
+                              }}
+                            >
+                              {/* Resize handles */}
+                              <div className="absolute -top-1.5 -left-1.5 h-3 w-3 cursor-nw-resize rounded-full bg-white/90 shadow-lg" />
+                              <div className="absolute -top-1.5 -right-1.5 h-3 w-3 cursor-ne-resize rounded-full bg-white/90 shadow-lg" />
+                              <div className="absolute -bottom-1.5 -left-1.5 h-3 w-3 cursor-sw-resize rounded-full bg-white/90 shadow-lg" />
+                              <div className="absolute -right-1.5 -bottom-1.5 h-3 w-3 cursor-se-resize rounded-full bg-white/90 shadow-lg" />
+                              <div className="absolute -top-1.5 left-1/2 h-3 w-3 -translate-x-1/2 transform cursor-n-resize rounded-full bg-white/90 shadow-lg" />
+                              <div className="absolute -bottom-1.5 left-1/2 h-3 w-3 -translate-x-1/2 transform cursor-s-resize rounded-full bg-white/90 shadow-lg" />
+                              <div className="absolute top-1/2 -left-1.5 h-3 w-3 -translate-y-1/2 transform cursor-w-resize rounded-full bg-white/90 shadow-lg" />
+                              <div className="absolute top-1/2 -right-1.5 h-3 w-3 -translate-y-1/2 transform cursor-e-resize rounded-full bg-white/90 shadow-lg" />
+
+                              {/* Dimensions text */}
+                              {rect.width > 0.05 && (
+                                <div
+                                  className={classNames(
+                                    "absolute right-1 bottom-1 rounded p-2 text-xs text-nowrap",
+                                    isValid
+                                      ? "bg-black/40 text-white"
+                                      : "bg-red-400/40 text-white",
+                                  )}
+                                >
+                                  {widthPx} x {heightPx}
+                                </div>
+                              )}
+                            </div>
+                          </>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                )}
               </div>
             </div>
-          </div>
-          <DialogButtons>
-            <Button onClick={() => setRect(undefined)}>Reset</Button>
-            <Button
-              size="small"
-              disabled={!isValid}
-              onClick={() => {
-                if (pictureValue) {
-                  if (field) {
-                    editContext?.operations.editField({
-                      field: field.descriptor,
-                      rawValue: JSON.stringify(rawValue),
-                      refresh: "immediate",
-                    });
+            <DialogButtons>
+              <Button onClick={onClose} variant="ghost">
+                Cancel
+              </Button>
+              <Button
+                onClick={() => {
+                  // If there's an aspect ratio lock, restore the default centered, maximum-sized region
+                  const defaultRect = createDefaultRegion();
+                  isUserEditingRef.current = true;
+                  setRect(defaultRect);
+                }}
+                variant="outline"
+              >
+                <RotateCcw strokeWidth={1} />
+                Reset
+              </Button>
+              <Button
+                disabled={!isValid}
+                onClick={() => {
+                  if (pictureValue) {
+                    if (field) {
+                      editContext?.operations.editField({
+                        field: field.descriptor,
+                        rawValue: JSON.stringify(rawValue),
+                        refresh: "immediate",
+                      });
+                    }
                   }
-                }
-                onClose();
-              }}
-            >
-              Ok
-            </Button>
-            <Button onClick={onClose} size="small">
-              Cancel
-            </Button>
-          </DialogButtons>
-        </div>
+                  onClose();
+                }}
+              >
+                Save
+              </Button>
+            </DialogButtons>
+          </div>
+        </DialogContent>
       </Dialog>
     </>
   );
@@ -561,8 +1052,8 @@ function LabelAndValue({
 }) {
   return (
     <div>
-      <div className="font-bold">{label}</div>
-      <div>{value}</div>
+      <div className="font-medium">{label}</div>
+      <div className="text-xs font-light">{value}</div>
     </div>
   );
 }