react-native-expo-cropper 1.2.53 → 1.3.53

package/dist/ImageCropper.js

@@ -24,18 +24,14 @@ function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArra
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-var PRIMARY_GREEN = '#198754';
+var PRIMARY_GREEN = '#689F38';
+var ACCENT_GREEN = '#689F38';
 
 // Base dimension for responsive scaling (e.g. ~375pt design width)
 var RESPONSIVE_BASE = 375;
@@ -47,10 +43,14 @@ var ImageCropper = function ImageCropper(_ref) {
     addheight = _ref.addheight,
     rotationLabel = _ref.rotationLabel,
     onCancel = _ref.onCancel,
+    _ref$cancelText = _ref.cancelText,
+    cancelText = _ref$cancelText === void 0 ? 'Cancel' : _ref$cancelText,
     _ref$confirmText = _ref.confirmText,
-    confirmText = _ref$confirmText === void 0 ? 'Confirm' : _ref$confirmText,
+    confirmText = _ref$confirmText === void 0 ? 'Use Scan' : _ref$confirmText,
     _ref$resetText = _ref.resetText,
-    resetText = _ref$resetText === void 0 ? 'Reset' : _ref$resetText,
+    resetText = _ref$resetText === void 0 ? 'Enhance' : _ref$resetText,
+    _ref$rotateText = _ref.rotateText,
+    rotateText = _ref$rotateText === void 0 ? 'Rotate' : _ref$rotateText,
     _ref$cameraInstructio = _ref.cameraInstructionText,
     cameraInstructionText = _ref$cameraInstructio === void 0 ? 'Place the tray inside the green box' : _ref$cameraInstructio;
   var _useWindowDimensions = (0, _reactNative.useWindowDimensions)(),
@@ -682,64 +682,17 @@ var ImageCropper = function ImageCropper(_ref) {
     } : null;
   };
   var handleTap = function handleTap(e) {
-    if (!image || showResult) return;
+    if (!image || showResult || points.length === 0) return;
     var now = Date.now();
     var _e$nativeEvent = e.nativeEvent,
       tapX = _e$nativeEvent.locationX,
       tapY = _e$nativeEvent.locationY;
-
-    // ✅ RÉFÉRENTIEL UNIQUE : Utiliser imageDisplayRect (zone réelle de l'image dans le wrapper)
-    // Les coordonnées du tap sont relatives au wrapper commun
-    var imageRect = imageDisplayRect.current;
-    var wrapper = commonWrapperLayout.current;
-
-    // Recalculate if not available
-    if (imageRect.width === 0 || imageRect.height === 0) {
-      if (wrapper.width > 0 && wrapper.height > 0 && originalImageDimensions.current.width > 0) {
-        updateImageDisplayRect(wrapper.width, wrapper.height);
-        imageRect = imageDisplayRect.current;
-      }
-      // If still not available, use full wrapper as fallback (wrapper-relative coords)
-      if (imageRect.width === 0 || imageRect.height === 0) {
-        if (wrapper.width > 0 && wrapper.height > 0) {
-          imageRect = {
-            x: 0,
-            y: 0,
-            width: wrapper.width,
-            height: wrapper.height
-          };
-        } else {
-          console.warn("⚠️ Cannot handle tap: wrapper or imageDisplayRect not available");
-          return;
-        }
-      }
-    }
-
-    // ✅ Clamp to real displayed image content (imageDisplayRect dans le wrapper)
-    // Les coordonnées tapX/tapY et imageRect sont RELATIVES au wrapper commun (origine 0,0)
-    var _x$y$width$height = {
-        x: imageRect.x,
-        y: imageRect.y,
-        width: imageRect.width,
-        height: imageRect.height
-      },
-      cx = _x$y$width$height.x,
-      cy = _x$y$width$height.y,
-      cw = _x$y$width$height.width,
-      ch = _x$y$width$height.height;
-    // ✅ Responsive select radius: scales with screen so touch target matches handle size
-    var selectRadius = Math.max(28, Math.round(50 * responsiveScale));
-
-    // ✅ CRITICAL: Check for existing point selection FIRST (using raw tap coordinates)
-    // Don't clamp tapX/Y for point selection - points can be anywhere in wrapper now
+    var selectRadius = Math.max(18, Math.round(26 * responsiveScale));
     var index = points.findIndex(function (p) {
       return Math.abs(p.x - tapX) < selectRadius && Math.abs(p.y - tapY) < selectRadius;
     });
     if (index !== -1) {
-      // ✅ Point found - select it for dragging
       selectedPointIndex.current = index;
-
-      // Store initial positions
       initialTouchPosition.current = {
         x: tapX,
         y: tapY
@@ -748,72 +701,26 @@ var ImageCropper = function ImageCropper(_ref) {
         x: tapX,
         y: tapY
       };
-      initialPointPosition.current = _objectSpread({}, points[index]);
-      lastValidPosition.current = _objectSpread({}, points[index]);
-
-      // Calculate offset between point and touch at drag start
-      touchOffset.current = {
-        x: points[index].x - tapX,
-        y: points[index].y - tapY
-      };
-      console.log("🎯 DRAG START - Offset calculated:", {
-        pointX: points[index].x.toFixed(2),
-        pointY: points[index].y.toFixed(2),
-        touchX: tapX.toFixed(2),
-        touchY: tapY.toFixed(2),
-        offsetX: touchOffset.current.x.toFixed(2),
-        offsetY: touchOffset.current.y.toFixed(2)
-      });
+      lastTap.current = now;
+      return;
+    }
 
-      // Disable parent ScrollView scrolling when dragging
-      try {
-        var _findScrollView = function findScrollView(node) {
-          if (!node) return null;
-          if (node._component && node._component.setNativeProps) {
-            node._component.setNativeProps({
-              scrollEnabled: false
-            });
-          }
-          return _findScrollView(node._owner || node._parent);
-        };
-      } catch (e) {
-        // Ignore errors
-      }
-    } else {
-      // ✅ No point found - check if double-tap on a line to create new point
-      var isDoubleTap = lastTap.current && now - lastTap.current < 300;
-      if (isDoubleTap && points.length >= 2) {
-        // Find closest point on frame lines
-        var lineResult = findClosestPointOnFrame(tapX, tapY, 30); // 30px tolerance
-
-        if (lineResult) {
-          var point = lineResult.point,
-            insertIndex = lineResult.insertIndex;
-
-          // Check if a point already exists very close to this position
-          var exists = points.some(function (p) {
-            return Math.abs(p.x - point.x) < selectRadius && Math.abs(p.y - point.y) < selectRadius;
-          });
-          if (!exists) {
-            // Insert new point at the correct position in the polygon
-            var newPoints = _toConsumableArray(points);
-            newPoints.splice(insertIndex, 0, point);
-            setPoints(newPoints);
-            console.log("✅ New point created on frame line:", {
-              tap: {
-                x: tapX.toFixed(2),
-                y: tapY.toFixed(2)
-              },
-              newPoint: {
-                x: point.x.toFixed(2),
-                y: point.y.toFixed(2)
-              },
-              insertIndex: insertIndex,
-              totalPoints: newPoints.length
-            });
-            lastTap.current = null; // Reset to prevent triple-tap
-            return;
-          }
+    // Restore UX: double tap near an edge inserts a new draggable point.
+    var isDoubleTap = lastTap.current && now - lastTap.current < 300;
+    if (isDoubleTap && points.length >= 2) {
+      var lineResult = findClosestPointOnFrame(tapX, tapY, 30);
+      if (lineResult) {
+        var point = lineResult.point,
+          insertIndex = lineResult.insertIndex;
+        var exists = points.some(function (p) {
+          return Math.abs(p.x - point.x) < selectRadius && Math.abs(p.y - point.y) < selectRadius;
+        });
+        if (!exists) {
+          var newPoints = _toConsumableArray(points);
+          newPoints.splice(insertIndex, 0, point);
+          setPoints(newPoints);
+          lastTap.current = null;
+          return;
         }
       }
     }
@@ -821,315 +728,65 @@ var ImageCropper = function ImageCropper(_ref) {
   };
   var handleMove = function handleMove(e) {
     if (showResult || selectedPointIndex.current === null) return;
-
-    // ✅ FREE DRAG: Use delta-based movement for smooth, unconstrained dragging
-
     var nativeEvent = e.nativeEvent;
     var currentX = nativeEvent.locationX;
     var currentY = nativeEvent.locationY;
-
-    // ✅ Validate coordinates
-    if (currentX === undefined || currentY === undefined || isNaN(currentX) || isNaN(currentY)) {
-      console.warn("⚠️ Cannot get touch coordinates", {
-        locationX: nativeEvent.locationX,
-        locationY: nativeEvent.locationY
-      });
-      return;
-    }
-
-    // This is more reliable when ScrollView affects coordinate updates
-    var deltaX, deltaY;
+    if (currentX === undefined || currentY === undefined || isNaN(currentX) || isNaN(currentY)) return;
+    var deltaX = 0;
+    var deltaY = 0;
     if (lastTouchPosition.current) {
-      // Calculate incremental delta from last touch position
       deltaX = currentX - lastTouchPosition.current.x;
       deltaY = currentY - lastTouchPosition.current.y;
     } else if (initialTouchPosition.current) {
-      // Fallback to absolute delta if lastTouchPosition not set
       deltaX = currentX - initialTouchPosition.current.x;
       deltaY = currentY - initialTouchPosition.current.y;
-    } else {
-      console.warn("⚠️ No touch position reference available");
-      return;
     }
-
-    // Les coordonnées de mouvement sont relatives au wrapper commun
     var imageRect = imageDisplayRect.current;
     var wrapper = commonWrapperLayout.current;
-
-    // Recalculate if not available
     if (imageRect.width === 0 || imageRect.height === 0) {
       if (wrapper.width > 0 && wrapper.height > 0 && originalImageDimensions.current.width > 0) {
         updateImageDisplayRect(wrapper.width, wrapper.height);
         imageRect = imageDisplayRect.current;
       }
-      // If still not available, use full wrapper as fallback (wrapper-relative coords)
       if (imageRect.width === 0 || imageRect.height === 0) {
-        if (wrapper.width > 0 && wrapper.height > 0) {
-          imageRect = {
-            x: 0,
-            y: 0,
-            width: wrapper.width,
-            height: wrapper.height
-          };
-        } else {
-          console.warn("⚠️ Cannot move point: wrapper or imageDisplayRect not available");
-          return;
-        }
-      }
-    }
-
-    // ✅ Bounds in wrapper-relative coordinates (touch/points use wrapper as origin)
-    // Full picture = entire wrapper; visible image = imageDisplayRect
-    var contentRect = {
-      x: imageRect.x,
-      y: imageRect.y,
-      width: imageRect.width,
-      height: imageRect.height
-    };
-
-    // ✅ FREE DRAG: Ensure initial positions are set
-    if (!initialPointPosition.current) {
-      var currentPoint = points[selectedPointIndex.current];
-      if (currentPoint && typeof currentPoint.x === 'number' && typeof currentPoint.y === 'number') {
-        initialPointPosition.current = _objectSpread({}, currentPoint);
-      } else {
-        console.warn("⚠️ No point found for selected index or invalid point data");
-        return;
+        imageRect = {
+          x: 0,
+          y: 0,
+          width: wrapper.width || 0,
+          height: wrapper.height || 0
+        };
       }
     }
-
-    // ✅ NEW APPROACH: Use touchOffset to map touch position directly to point position
-    // This eliminates delta accumulation and "dead zone" issues completely
-    if (!touchOffset.current) {
-      console.warn("⚠️ touchOffset not initialized, cannot move point");
-      return;
-    }
-
-    // ✅ DIRECT MAPPING: newPosition = touchPosition + offset
-    // No delta accumulation, no zone morte
-    var newX = currentX + touchOffset.current.x;
-    var newY = currentY + touchOffset.current.y;
-
-    // ✅ STRICT BOUNDS: visible image area (wrapper-relative) for lastValidPosition
-    var strictMinX = contentRect.x;
-    var strictMaxX = contentRect.x + contentRect.width;
-    // Tiny safety margin at bottom (2px) so point can almost reach bottom edge
-    var bottomSafePadding = 2;
-    var strictMinY = contentRect.y;
-    var strictMaxY = contentRect.y + contentRect.height - bottomSafePadding;
-
-    // ✅ DRAG BOUNDS: keep points strictly on the visible picture (no going outside image)
-    var overshootMinX = strictMinX;
-    var overshootMaxX = strictMaxX;
-    var overshootMinY = strictMinY;
-    var overshootMaxY = strictMaxY;
-
-    // ✅ Clamp to visible image so points always stay on the picture
-    var dragX = Math.max(overshootMinX, Math.min(newX, overshootMaxX));
-    var dragY = Math.max(overshootMinY, Math.min(newY, overshootMaxY));
-
-    // ✅ Bottom-band "stickiness": if the point is already in the last few pixels
-    // near the bottom, ignore any move that would suddenly pull it back up.
-    var bottomBandThreshold = strictMaxY - 3; // last ~3px of allowed area
-    var prevPoint = points[selectedPointIndex.current];
-    if (prevPoint && prevPoint.y >= bottomBandThreshold && dragY < prevPoint.y) {
-      dragY = prevPoint.y;
-    }
-
-    // ✅ UPDATE POINT: Use (possibly adjusted) dragY
-    var updatedPoint = {
-      x: dragX,
-      y: dragY
-    };
-
-    // ✅ CRITICAL: Detect if point is AT overshoot boundary (not just clamped)
-    // Check if point is exactly at overshootMin/Max (within 1px tolerance)
-    var isAtOvershootMinX = Math.abs(dragX - overshootMinX) < 1;
-    var isAtOvershootMaxX = Math.abs(dragX - overshootMaxX) < 1;
-    var isAtOvershootMinY = Math.abs(dragY - overshootMinY) < 1;
-    var isAtOvershootMaxY = Math.abs(dragY - overshootMaxY) < 1;
-    var isAtBoundaryX = isAtOvershootMinX || isAtOvershootMaxX;
-    var isAtBoundaryY = isAtOvershootMinY || isAtOvershootMaxY;
-
-    // Only recalculate offset when FIRST hitting boundary (transition free → boundary)
-    var justHitBoundaryX = isAtBoundaryX && !wasClampedLastFrame.current.x;
-    var justHitBoundaryY = isAtBoundaryY && !wasClampedLastFrame.current.y;
-    if (justHitBoundaryX || justHitBoundaryY) {
-      // Point JUST hit overshoot boundary - recalculate offset once
-      var newOffsetX = justHitBoundaryX ? dragX - currentX : touchOffset.current.x;
-      var newOffsetY = justHitBoundaryY ? dragY - currentY : touchOffset.current.y;
-      touchOffset.current = {
-        x: newOffsetX,
-        y: newOffsetY
-      };
-      console.log("✅ OFFSET RECALCULATED (hit boundary):", {
-        axis: justHitBoundaryX ? 'X' : 'Y',
-        touchY: currentY.toFixed(2),
-        dragY: dragY.toFixed(2),
-        newOffsetY: touchOffset.current.y.toFixed(2),
-        note: "First contact with boundary - offset locked"
-      });
-    }
-
-    // Update boundary state for next frame
-    wasClampedLastFrame.current = {
-      x: isAtBoundaryX,
-      y: isAtBoundaryY
-    };
-
-    // ✅ DEBUG: Log when in overshoot zone (only when not at boundary)
-    var isInOvershootY = dragY < strictMinY || dragY > strictMaxY;
-    if (isInOvershootY && !isAtBoundaryY) {
-      console.log("🎯 IN OVERSHOOT ZONE:", {
-        touchY: currentY.toFixed(2),
-        appliedY: dragY.toFixed(2),
-        overshootRange: "".concat(overshootMinY.toFixed(2), " - ").concat(overshootMaxY.toFixed(2)),
-        strictRange: "".concat(strictMinY.toFixed(2), " - ").concat(strictMaxY.toFixed(2))
-      });
-    }
-
-    // ✅ Update lastValidPosition ONLY if point is within strictBounds
-    var isStrictlyValid = dragX >= strictMinX && dragX <= strictMaxX && dragY >= strictMinY && dragY <= strictMaxY;
-    if (isStrictlyValid) {
-      lastValidPosition.current = updatedPoint;
-    }
-
-    // ✅ Update lastTouchPosition for next frame (simple tracking)
     lastTouchPosition.current = {
       x: currentX,
       y: currentY
     };
-
-    // ✅ DEBUG: Log the point update before setPoints
-    console.log("📍 UPDATING POINT:", {
-      index: selectedPointIndex.current,
-      newX: updatedPoint.x.toFixed(2),
-      newY: updatedPoint.y.toFixed(2),
-      touchX: currentX.toFixed(2),
-      touchY: currentY.toFixed(2),
-      offsetX: touchOffset.current.x.toFixed(2),
-      offsetY: touchOffset.current.y.toFixed(2)
-    });
     setPoints(function (prev) {
-      var _prev$pointIndex, _newPoints$pointIndex, _prev$pointIndex2, _newPoints$pointIndex2;
-      // ✅ SAFETY: Ensure prev is a valid array
-      if (!Array.isArray(prev) || prev.length === 0) {
-        return prev;
-      }
+      if (!Array.isArray(prev) || prev.length === 0) return prev;
       var pointIndex = selectedPointIndex.current;
-      // ✅ SAFETY: Validate pointIndex
-      if (pointIndex === null || pointIndex === undefined || pointIndex < 0 || pointIndex >= prev.length) {
-        return prev;
-      }
-
-      // ✅ SAFETY: Filter out any invalid points and update the selected one
-      var newPoints = prev.map(function (p, i) {
-        if (i === pointIndex) {
-          return updatedPoint;
-        }
-        // ✅ SAFETY: Ensure existing points are valid
-        if (p && typeof p.x === 'number' && typeof p.y === 'number') {
-          return p;
-        }
-        // If point is invalid, return a default point (shouldn't happen, but safety first)
+      if (pointIndex === null || pointIndex < 0 || pointIndex >= prev.length) return prev;
+      return prev.map(function (p, i) {
+        if (i !== pointIndex) return p;
         return {
-          x: 0,
-          y: 0
+          x: Math.max(imageRect.x, Math.min(p.x + deltaX, imageRect.x + imageRect.width)),
+          y: Math.max(imageRect.y, Math.min(p.y + deltaY, imageRect.y + imageRect.height))
         };
       });
-
-      // ✅ DEBUG: Log the state update
-      console.log("✅ STATE UPDATED:", {
-        index: pointIndex,
-        oldY: (_prev$pointIndex = prev[pointIndex]) === null || _prev$pointIndex === void 0 ? void 0 : _prev$pointIndex.y.toFixed(2),
-        newY: (_newPoints$pointIndex = newPoints[pointIndex]) === null || _newPoints$pointIndex === void 0 ? void 0 : _newPoints$pointIndex.y.toFixed(2),
-        changed: Math.abs(((_prev$pointIndex2 = prev[pointIndex]) === null || _prev$pointIndex2 === void 0 ? void 0 : _prev$pointIndex2.y) - ((_newPoints$pointIndex2 = newPoints[pointIndex]) === null || _newPoints$pointIndex2 === void 0 ? void 0 : _newPoints$pointIndex2.y)) > 0.01
-      });
-      return newPoints;
     });
   };
   var handleRelease = function handleRelease() {
     var wasDragging = selectedPointIndex.current !== null;
 
-    // ✅ CRITICAL: Reset drag state when drag ends
+    // ✅ FREE DRAG: Clear initial positions when drag ends
+    initialTouchPosition.current = null;
+    initialPointPosition.current = null;
+    lastTouchPosition.current = null;
+    lastValidPosition.current = null;
     touchOffset.current = null;
     wasClampedLastFrame.current = {
       x: false,
       y: false
     };
-
-    // ✅ VISUAL OVERSHOOT: Clamp points back to imageDisplayRect when drag ends
-    // This ensures final crop is always within valid image bounds
-    if (wasDragging && selectedPointIndex.current !== null) {
-      var wrapper = commonWrapperLayout.current;
-      var imageRect = imageDisplayRect.current;
-
-      // Recalculate imageDisplayRect if needed
-      if (imageRect.width === 0 || imageRect.height === 0) {
-        if (wrapper.width > 0 && wrapper.height > 0 && originalImageDimensions.current.width > 0) {
-          updateImageDisplayRect(wrapper.width, wrapper.height);
-          imageRect = imageDisplayRect.current;
-        }
-      }
-      if (imageRect.width > 0 && imageRect.height > 0) {
-        // Bounds in wrapper-relative coords (same as point coords)
-        var minX = imageRect.x;
-        var minY = imageRect.y;
-        var maxX = imageRect.x + imageRect.width;
-        var maxY = imageRect.y + imageRect.height;
-
-        // Clamp the dragged point back to visible image area (full picture in wrapper-relative coords)
-        setPoints(function (prev) {
-          // ✅ SAFETY: Ensure prev is a valid array
-          if (!Array.isArray(prev) || prev.length === 0) {
-            return prev;
-          }
-          var pointIndex = selectedPointIndex.current;
-          // ✅ SAFETY: Validate pointIndex and ensure point exists
-          if (pointIndex === null || pointIndex === undefined || pointIndex < 0 || pointIndex >= prev.length) {
-            return prev;
-          }
-          var point = prev[pointIndex];
-          // ✅ SAFETY: Ensure point exists and has valid x/y properties
-          if (!point || typeof point.x !== 'number' || typeof point.y !== 'number') {
-            return prev;
-          }
-          var clampedPoint = {
-            x: Math.max(minX, Math.min(point.x, maxX)),
-            y: Math.max(minY, Math.min(point.y, maxY))
-          };
-
-          // Only update if point was outside bounds
-          if (point.x !== clampedPoint.x || point.y !== clampedPoint.y) {
-            console.log("🔒 Clamping point back to image bounds on release:", {
-              before: {
-                x: point.x.toFixed(2),
-                y: point.y.toFixed(2)
-              },
-              after: {
-                x: clampedPoint.x.toFixed(2),
-                y: clampedPoint.y.toFixed(2)
-              },
-              bounds: {
-                minX: minX.toFixed(2),
-                maxX: maxX.toFixed(2),
-                minY: minY.toFixed(2),
-                maxY: maxY.toFixed(2)
-              }
-            });
-            return prev.map(function (p, i) {
-              return i === pointIndex ? clampedPoint : p;
-            });
-          }
-          return prev;
-        });
-      }
-    }
-
-    // ✅ FREE DRAG: Clear initial positions when drag ends
-    initialTouchPosition.current = null;
-    initialPointPosition.current = null;
-    lastValidPosition.current = null;
     selectedPointIndex.current = null;
 
     // ✅ CRITICAL: Re-enable parent ScrollView scrolling when drag ends
@@ -1237,6 +894,21 @@ var ImageCropper = function ImageCropper(_ref) {
       setImmediate(_tick);
     });
   };
+  var getFrameBounds = function getFrameBounds() {
+    if (!points || points.length < 4) return null;
+    var xs = points.map(function (p) {
+      return p.x;
+    });
+    var ys = points.map(function (p) {
+      return p.y;
+    });
+    return {
+      minX: Math.min.apply(Math, _toConsumableArray(xs)),
+      maxX: Math.max.apply(Math, _toConsumableArray(xs)),
+      minY: Math.min.apply(Math, _toConsumableArray(ys)),
+      maxY: Math.max.apply(Math, _toConsumableArray(ys))
+    };
+  };
   return /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: _ImageCropperStyles["default"].container
   }, showCustomCamera ? /*#__PURE__*/_react["default"].createElement(_CustomCamera["default"], {
@@ -1360,7 +1032,7 @@ var ImageCropper = function ImageCropper(_ref) {
     var sizeScale = Math.max(0.6, Math.min(1.4, sizeScaleRaw)); // clamp
 
     var stroke = Math.max(0.75, 2 * responsiveScale * sizeScale);
-    var handleRadius = Math.max(4, 10 * responsiveScale * sizeScale);
+    var handleRadius = Math.max(5, 9 * responsiveScale * sizeScale);
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Path, {
       d: "M 0 0 H ".concat(wrapperWidth, " V ").concat(wrapperHeight, " H 0 Z ").concat(createPath()),
       fill: showResult ? 'white' : 'rgba(0, 0, 0, 0.8)',
@@ -1368,18 +1040,20 @@ var ImageCropper = function ImageCropper(_ref) {
     }), !showResult && points.length > 0 && /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Path, {
       d: createPath(),
       fill: "transparent",
-      stroke: "white",
+      stroke: "rgba(255,255,255,0.95)",
       strokeWidth: stroke
     }), !showResult && points.map(function (point, index) {
       return /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Circle, {
-        key: index,
+        key: "dot-".concat(index),
         cx: point.x,
         cy: point.y,
         r: handleRadius,
-        fill: "white"
+        fill: "#E7FFD9",
+        stroke: ACCENT_GREEN,
+        strokeWidth: 1.5
       });
     }));
-  }())), isRotating && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+  }()), !showResult && image && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null)), isRotating && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: {
       position: 'absolute',
       left: 0,
@@ -1401,64 +1075,72 @@ var ImageCropper = function ImageCropper(_ref) {
     }
   }, rotationLabel !== null && rotationLabel !== void 0 ? rotationLabel : 'Rotation...')))), !showResult && image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: [_ImageCropperStyles["default"].buttonContainerBelow, {
-      paddingBottom: Math.max(insets.bottom, Math.round(16 * responsiveScale)),
-      paddingTop: Math.round(12 * responsiveScale),
-      paddingHorizontal: Math.round(12 * responsiveScale),
-      gap: Math.round(8 * responsiveScale)
+      // Keep controls clearly above home indicator / bottom gesture bar.
+      paddingBottom: Math.max(insets.bottom + Math.round(12 * responsiveScale), Math.round(20 * responsiveScale)),
+      paddingTop: Math.round(10 * responsiveScale),
+      paddingHorizontal: Math.round(12 * responsiveScale)
     }]
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: _ImageCropperStyles["default"].controlsRow
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
-    style: [_ImageCropperStyles["default"].rotationButton, {
-      backgroundColor: 'transparent',
-      borderWidth: 1,
-      borderColor: 'white',
-      width: Math.round(40 * responsiveScale),
-      height: Math.round(40 * responsiveScale),
-      borderRadius: Math.round(20 * responsiveScale),
-      marginRight: Math.round(6 * responsiveScale)
+    style: [_ImageCropperStyles["default"].roundControl, {
+      width: 'auto',
+      minWidth: Math.max(Math.round(84 * responsiveScale), Math.round(((cancelText ? String(cancelText).length : 6) * 7 + 32) * responsiveScale)),
+      paddingHorizontal: Math.round(12 * responsiveScale)
     }],
     onPress: function onPress() {
       if (onCancel) {
         onCancel();
       }
-    }
+    },
+    activeOpacity: 0.85
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+    style: [_ImageCropperStyles["default"].buttonText, {
+      fontSize: Math.max(10, Math.round(11 * responsiveScale)),
+      letterSpacing: 0.5
+    }]
+  }, cancelText)), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
+    style: _ImageCropperStyles["default"].enhanceButton,
+    onPress: handleReset,
+    activeOpacity: 0.85
   }, /*#__PURE__*/_react["default"].createElement(_vectorIcons.Ionicons, {
-    name: "close",
-    size: Math.round(20 * responsiveScale),
-    color: "white"
-  })), _reactNative.Platform.OS === 'android' && /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
+    name: "sparkles-outline",
+    size: Math.round(18 * responsiveScale),
+    color: "rgba(255,255,255,0.95)"
+  }), /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+    style: _ImageCropperStyles["default"].buttonText,
+    numberOfLines: 1,
+    ellipsizeMode: "tail"
+  }, resetText || 'Enhance')), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
     style: [_ImageCropperStyles["default"].rotationButton, {
-      width: Math.round(56 * responsiveScale),
-      height: Math.round(48 * responsiveScale),
-      borderRadius: Math.round(28 * responsiveScale)
+      minWidth: Math.max(Math.round(88 * responsiveScale), Math.round(((rotateText ? String(rotateText).length : 6) * 7 + 38) * responsiveScale))
     }, isRotating && {
       opacity: 0.7
     }],
     onPress: function onPress() {
       return enableRotation && rotatePreviewImage(90);
     },
-    disabled: isRotating
+    disabled: isRotating,
+    activeOpacity: 0.85
   }, isRotating ? /*#__PURE__*/_react["default"].createElement(_reactNative.ActivityIndicator, {
     size: "small",
     color: "white"
-  }) : /*#__PURE__*/_react["default"].createElement(_vectorIcons.Ionicons, {
-    name: "sync",
-    size: Math.round(24 * responsiveScale),
+  }) : /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 6
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_vectorIcons.Ionicons, {
+    name: "refresh",
+    size: Math.round(15 * responsiveScale),
     color: "white"
-  })), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
-    style: [_ImageCropperStyles["default"].button, {
-      minHeight: Math.round(48 * responsiveScale),
-      paddingVertical: Math.round(12 * responsiveScale),
-      paddingHorizontal: Math.round(10 * responsiveScale)
-    }],
-    onPress: handleReset
-  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+  }), /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
     style: [_ImageCropperStyles["default"].buttonText, {
-      // Smaller font for longer labels so they stay on one line
-      fontSize: Math.max(12, Math.round((resetText && resetText.length > 10 ? 14 : 18) * responsiveScale))
-    }],
-    numberOfLines: 1,
-    ellipsizeMode: "tail"
-  }, resetText)), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
+      fontSize: Math.max(10, Math.round(11 * responsiveScale)),
+      letterSpacing: 0.5
+    }]
+  }, rotateText)))), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
     onPress: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
       var _cameraFrameData$curr4, actualImageWidth, actualImageHeight, isCoverMode, captured, layout, contentRect, displayedWidth, displayedHeight, scale, coverOffsetX, coverOffsetY, scaledWidth, scaledHeight, originalUri, cropMeta, imagePoints, minX, minY, maxX, maxY, cropX, cropY, cropEndX, cropEndY, cropWidth, cropHeight, bbox, polygon, ext, safeExt, name, _t2;
       return _regenerator().w(function (_context2) {
@@ -1626,18 +1308,25 @@ var ImageCropper = function ImageCropper(_ref) {
       }, _callee2, null, [[1, 5, 6, 7]]);
     })),
     style: [_ImageCropperStyles["default"].button, {
-      minHeight: Math.round(48 * responsiveScale),
-      paddingVertical: Math.round(12 * responsiveScale),
-      paddingHorizontal: Math.round(10 * responsiveScale)
-    }]
+      marginTop: Math.round(10 * responsiveScale),
+      // Keep confirm action above browser/system navigation bars.
+      marginBottom: Math.max(insets.bottom + Math.round(10 * responsiveScale), Math.round(22 * responsiveScale)),
+      borderWidth: 1.8,
+      borderColor: ACCENT_GREEN
+    }],
+    hitSlop: {
+      top: 8,
+      left: 8,
+      right: 8,
+      bottom: 12
+    }
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
     style: [_ImageCropperStyles["default"].buttonText, {
-      // Smaller font for longer labels so they stay on one line
-      fontSize: Math.max(12, Math.round((confirmText && confirmText.length > 10 ? 14 : 18) * responsiveScale))
+      fontSize: Math.max(13, Math.round(14 * responsiveScale))
     }],
     numberOfLines: 1,
     ellipsizeMode: "tail"
-  }, confirmText))), !showResult && !image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+  }, confirmText || 'Use Scan'))), !showResult && !image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: _ImageCropperStyles["default"].centerButtonsContainer
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
     style: _ImageCropperStyles["default"].welcomeText