react-native-expo-cropper 1.2.37 → 1.2.39

package/dist/ImageCropper.js

@@ -9,10 +9,8 @@ var _ImageCropperStyles = _interopRequireDefault(require("./ImageCropperStyles")
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
-var _reactNativeViewShot = require("react-native-view-shot");
 var _CustomCamera = _interopRequireDefault(require("./CustomCamera"));
 var ImageManipulator = _interopRequireWildcard(require("expo-image-manipulator"));
-var FileSystem = _interopRequireWildcard(require("expo-file-system"));
 var _vectorIcons = require("@expo/vector-icons");
 var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _ImageMaskProcessor = require("./ImageMaskProcessor");
@@ -22,15 +20,15 @@ function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present,
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
-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 _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; } }
@@ -38,6 +36,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 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 ImageCropper = function ImageCropper(_ref) {
+  var _cameraFrameData$curr3;
   var onConfirm = _ref.onConfirm,
     openCameraFirst = _ref.openCameraFirst,
     initialImage = _ref.initialImage,
@@ -63,6 +62,16 @@ var ImageCropper = function ImageCropper(_ref) {
   var sourceImageUri = (0, _react.useRef)(null); // keep original image URI (full-res) for upload
   var cameraFrameData = (0, _react.useRef)(null); // ✅ Store green frame coordinates from camera
 
+  // ✅ RÉFÉRENTIEL UNIQUE : Wrapper commun 9/16 (identique à CustomCamera)
+  // Ce wrapper est utilisé dans CustomCamera ET ImageCropper pour garantir pixel-perfect matching
+  var commonWrapperRef = (0, _react.useRef)(null);
+  var commonWrapperLayout = (0, _react.useRef)({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+
   // ✅ REFACTORISATION : Séparation claire entre dimensions originales et affichage
   // Dimensions réelles de l'image originale (pixels)
   var originalImageDimensions = (0, _react.useRef)({
@@ -83,70 +92,121 @@ var ImageCropper = function ImageCropper(_ref) {
     width: 0,
     height: 0
   });
-  // Rectangle réel de l'image affichée (quand resizeMode='contain') à l'intérieur du conteneur
-  // Sert à rendre la conversion coordonnées écran -> pixels image réellement pixel-perfect.
-  var displayedContentRect = (0, _react.useRef)({
+  // ✅ imageDisplayRect : Rectangle réel de l'image affichée (quand resizeMode='contain') à l'intérieur du wrapper commun
+  // C'est la zone où l'image est réellement visible (avec letterboxing si nécessaire)
+  // Les points de crop DOIVENT rester dans cette zone pour éviter de cropper hors de l'image
+  var imageDisplayRect = (0, _react.useRef)({
     x: 0,
     y: 0,
     width: 0,
     height: 0
   });
-  var updateDisplayedContentRect = function updateDisplayedContentRect(layoutWidth, layoutHeight) {
+
+  // ✅ COMPATIBILITÉ : displayedContentRect reste pour le code existant, mais pointe vers imageDisplayRect
+  var displayedContentRect = imageDisplayRect;
+
+  // ✅ RÉFÉRENTIEL UNIQUE : Calculer imageDisplayRect à l'intérieur du wrapper commun
+  // - CAMERA: use "cover" mode → image fills wrapper, imageDisplayRect = full wrapper (same as preview)
+  // - GALLERY: use "contain" mode → imageDisplayRect = letterboxed area
+  var updateImageDisplayRect = function updateImageDisplayRect(wrapperWidth, wrapperHeight) {
     var iw = originalImageDimensions.current.width;
     var ih = originalImageDimensions.current.height;
-    console.log("🔄 updateDisplayedContentRect called:", {
+
+    // ✅ CAMERA IMAGE: Use full wrapper so green frame and white frame show same content
+    if (cameraFrameData.current && cameraFrameData.current.greenFrame && wrapperWidth > 0 && wrapperHeight > 0) {
+      imageDisplayRect.current = {
+        x: 0,
+        y: 0,
+        width: wrapperWidth,
+        height: wrapperHeight
+      };
+      console.log("✅ Image display rect (COVER mode for camera - full wrapper):", imageDisplayRect.current);
+      return;
+    }
+    console.log("🔄 updateImageDisplayRect called:", {
       originalDimensions: {
         width: iw,
         height: ih
       },
-      layoutDimensions: {
-        width: layoutWidth,
-        height: layoutHeight
+      wrapperDimensions: {
+        width: wrapperWidth,
+        height: wrapperHeight
       }
     });
-    if (iw > 0 && ih > 0 && layoutWidth > 0 && layoutHeight > 0) {
-      var scale = Math.min(layoutWidth / iw, layoutHeight / ih);
-      var contentW = iw * scale;
-      var contentH = ih * scale;
-      var offsetX = (layoutWidth - contentW) / 2;
-      var offsetY = (layoutHeight - contentH) / 2;
-      displayedContentRect.current = {
+    if (iw > 0 && ih > 0 && wrapperWidth > 0 && wrapperHeight > 0) {
+      // Calculer comment l'image s'affiche en "contain" dans le wrapper (gallery)
+      var scale = Math.min(wrapperWidth / iw, wrapperHeight / ih);
+      var imageDisplayWidth = iw * scale;
+      var imageDisplayHeight = ih * scale;
+      var offsetX = (wrapperWidth - imageDisplayWidth) / 2;
+      var offsetY = (wrapperHeight - imageDisplayHeight) / 2;
+      imageDisplayRect.current = {
         x: offsetX,
         y: offsetY,
-        width: contentW,
-        height: contentH
+        width: imageDisplayWidth,
+        height: imageDisplayHeight
       };
-      console.log("✅ Displayed content rect (contain) calculated:", displayedContentRect.current);
+      console.log("✅ Image display rect (contain in wrapper) calculated:", {
+        wrapper: {
+          width: wrapperWidth,
+          height: wrapperHeight
+        },
+        imageDisplayRect: imageDisplayRect.current,
+        scale: scale.toFixed(4)
+      });
       return;
     }
-
-    // ✅ FALLBACK: If original dimensions not available yet, use layout as temporary measure
-    if (layoutWidth > 0 && layoutHeight > 0) {
-      displayedContentRect.current = {
+    if (wrapperWidth > 0 && wrapperHeight > 0) {
+      imageDisplayRect.current = {
         x: 0,
         y: 0,
-        width: layoutWidth,
-        height: layoutHeight
+        width: wrapperWidth,
+        height: wrapperHeight
       };
-      console.log("⚠️ Using layout dimensions as fallback (original dimensions not available yet):", displayedContentRect.current);
+      console.log("⚠️ Using wrapper dimensions as fallback (original dimensions not available yet):", imageDisplayRect.current);
     } else {
-      displayedContentRect.current = {
+      imageDisplayRect.current = {
         x: 0,
         y: 0,
         width: 0,
         height: 0
       };
-      console.warn("❌ Cannot calculate displayedContentRect: missing dimensions");
+      console.warn("❌ Cannot calculate imageDisplayRect: missing dimensions");
     }
   };
+
+  // ✅ COMPATIBILITÉ : Alias pour le code existant
+  var updateDisplayedContentRect = updateImageDisplayRect;
   var selectedPointIndex = (0, _react.useRef)(null);
   var lastTap = (0, _react.useRef)(null);
 
+  // ✅ CRITICAL: Guard to prevent double crop box initialization
+  // This ensures crop box is initialized only once, especially for camera images
+  var hasInitializedCropBox = (0, _react.useRef)(false);
+  var imageSource = (0, _react.useRef)(null); // 'camera' | 'gallery' | null
+
   // ✅ FREE DRAG: Store initial touch position and point position for delta-based movement
   var initialTouchPosition = (0, _react.useRef)(null); // { x, y } - initial touch position when drag starts
   var initialPointPosition = (0, _react.useRef)(null); // { x, y } - initial point position when drag starts
   var lastTouchPosition = (0, _react.useRef)(null); // { x, y } - last touch position for incremental delta calculation
 
+  // ✅ CRITICAL: dragBase stores the VISUAL position (can be overshoot) during drag
+  // This ensures smooth continuous drag without "dead zones" at boundaries
+  // dragBase is updated with applied position (overshoot) after each movement
+  // and is used as base for next delta calculation
+  var dragBase = (0, _react.useRef)(null); // { x, y } - visual position during drag (can be overshoot)
+
+  // ✅ NEW APPROACH: touchOffset stores the initial offset between point and touch
+  // This eliminates delta accumulation issues and "dead zones"
+  // Once set at drag start, it remains constant throughout the drag
+  var touchOffset = (0, _react.useRef)(null); // { x, y } - offset = pointPosition - touchPosition
+
+  // ✅ Track if point was clamped in previous frame (to detect transition)
+  var wasClampedLastFrame = (0, _react.useRef)({
+    x: false,
+    y: false
+  });
+
   // Angle de rotation accumulé (pour éviter les rotations multiples)
   var rotationAngle = (0, _react.useRef)(0);
 
@@ -186,7 +246,7 @@ var ImageCropper = function ImageCropper(_ref) {
   var insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
 
   // ✅ NEW ARCH: mobile does NOT export the final crop.
-  // We only compute crop metadata (bbox + polygon) and upload the ORIGINAL image to backend Python.
+
   // No view-shot / captureRef / bitmap masking on device.
   var enableMask = false;
   var enableRotation = false; // rotation would require careful coord transforms; keep off for pixel-perfect pipeline.
@@ -203,27 +263,32 @@ var ImageCropper = function ImageCropper(_ref) {
       rotationAngle.current = 0;
       // Clear camera frame data for gallery images
       cameraFrameData.current = null;
+      // ✅ CRITICAL: Reset initialization guard for new image
+      hasInitializedCropBox.current = false;
+      imageSource.current = null;
     }
   }, [openCameraFirst, initialImage]);
 
   // ✅ REFACTORISATION : Stocker uniquement les dimensions originales (pas de calcul théorique)
-  // ✅ CRITICAL FIX: Get dimensions and account for potential scale factor differences
-  // On Android, Image.getSize() returns physical pixels, but the image sent to backend
-  // might be at a different scale. We'll send original dimensions to backend for adjustment.
+  // ✅ CRITICAL FIX: Single source of truth for image dimensions
+
   (0, _react.useEffect)(function () {
     if (!image) {
       originalImageDimensions.current = {
         width: 0,
         height: 0
       };
+      hasInitializedCropBox.current = false;
+      imageSource.current = null;
       return;
     }
     if (!sourceImageUri.current) {
       sourceImageUri.current = image;
     }
 
-    // ✅ CRITICAL FIX: If we have capturedImageSize from camera, use it as source of truth
+    // ✅ CRITICAL FIX #1: If we have capturedImageSize from camera, use it as SINGLE SOURCE OF TRUTH
     // takePictureAsync returns physical dimensions, while Image.getSize() may return EXIF-oriented dimensions
+    // DO NOT call Image.getSize() for camera images - it can return swapped dimensions on Android
     if (cameraFrameData.current && cameraFrameData.current.capturedImageSize) {
       var _cameraFrameData$curr = cameraFrameData.current.capturedImageSize,
         capturedWidth = _cameraFrameData$curr.width,
@@ -232,31 +297,88 @@ var ImageCropper = function ImageCropper(_ref) {
         width: capturedWidth,
         height: capturedHeight
       };
-      console.log("✅ Using captured image dimensions from takePictureAsync:", {
+      imageSource.current = 'camera';
+      hasInitializedCropBox.current = false; // Reset guard for new camera image
+
+      console.log("✅ Using captured image dimensions from takePictureAsync (SINGLE SOURCE OF TRUTH):", {
         width: capturedWidth,
         height: capturedHeight,
-        source: 'takePictureAsync'
+        source: 'takePictureAsync',
+        note: 'Image.getSize() will NOT be called for camera images'
       });
-      // ✅ CRITICAL: Use displayedImageLayout dimensions if available, otherwise wait for onImageLayout
-      var lw = displayedImageLayout.current.width;
-      var lh = displayedImageLayout.current.height;
-      if (lw > 0 && lh > 0) {
-        updateDisplayedContentRect(lw, lh);
-        // ✅ CRITICAL: Initialize crop box when we have camera frame data and image dimensions
-        if (points.length === 0) {
+
+      // ✅ CRITICAL: Recalculate imageDisplayRect immediately with camera dimensions
+      var wrapper = commonWrapperLayout.current;
+      if (wrapper.width > 0 && wrapper.height > 0) {
+        updateImageDisplayRect(wrapper.width, wrapper.height);
+
+        // ✅ CRITICAL FIX #2: Initialize crop box immediately when cameraFrameData is available
+        // This ensures camera images are initialized from greenFrame BEFORE any other initialization
+        if (cameraFrameData.current && cameraFrameData.current.greenFrame && !hasInitializedCropBox.current) {
+          console.log("✅ Initializing crop box from cameraFrameData (immediate in useEffect):", {
+            hasGreenFrame: !!cameraFrameData.current.greenFrame,
+            wrapper: wrapper,
+            originalDimensions: originalImageDimensions.current
+          });
           initializeCropBox();
         }
       }
+      return; // ✅ CRITICAL: Exit early - DO NOT call Image.getSize()
+    }
+
+    // ✅ FALLBACK: Use Image.getSize() ONLY for gallery images (no cameraFrameData)
+    // BUT: Check again right before calling to avoid race condition
+    if (cameraFrameData.current && cameraFrameData.current.capturedImageSize) {
+      console.log("⚠️ cameraFrameData exists, skipping Image.getSize() call");
+      return;
+    }
+
+    // ✅ CRITICAL: Also check imageSource - if it's 'camera', don't call Image.getSize()
+    if (imageSource.current === 'camera') {
+      console.log("⚠️ imageSource is 'camera', skipping Image.getSize() call");
       return;
     }
 
-    // ✅ FALLBACK: Use Image.getSize() if no captured dimensions available (e.g., from gallery)
+    // ✅ CRITICAL: Set imageSource to 'gallery' ONLY if we're sure it's not a camera image
+    // Don't set it yet - we'll set it in the callback after verifying
+    hasInitializedCropBox.current = false; // Reset guard for new image
+
     _reactNative.Image.getSize(image, function (imgWidth, imgHeight) {
+      // ✅ CRITICAL SAFETY #1: Check if cameraFrameData appeared while Image.getSize() was resolving
+      // This is the PRIMARY check - cameraFrameData takes precedence
+      if (cameraFrameData.current && cameraFrameData.current.capturedImageSize) {
+        console.warn("⚠️ Image.getSize() resolved but cameraFrameData exists - IGNORING Image.getSize() result to prevent dimension swap");
+        console.warn("⚠️ Camera dimensions (correct):", cameraFrameData.current.capturedImageSize);
+        console.warn("⚠️ Image.getSize() dimensions (potentially swapped):", {
+          width: imgWidth,
+          height: imgHeight
+        });
+        return; // ✅ CRITICAL: Exit early - do NOT update dimensions or initialize crop box
+      }
+
+      // ✅ CRITICAL SAFETY #2: Check imageSource (should be 'camera' if cameraFrameData was set)
+      if (imageSource.current === 'camera') {
+        console.warn("⚠️ Image.getSize() resolved but imageSource is 'camera' - IGNORING Image.getSize() result");
+        console.warn("⚠️ Image.getSize() dimensions (potentially swapped):", {
+          width: imgWidth,
+          height: imgHeight
+        });
+        return; // ✅ CRITICAL: Exit early - do NOT update dimensions or initialize crop box
+      }
+
+      // ✅ CRITICAL SAFETY #3: Check if crop box was already initialized (from camera)
+      if (hasInitializedCropBox.current) {
+        console.warn("⚠️ Image.getSize() resolved but crop box already initialized - IGNORING result to prevent double initialization");
+        return;
+      }
+
+      // ✅ SAFE: This is a gallery image, proceed with Image.getSize() result
+      imageSource.current = 'gallery';
       originalImageDimensions.current = {
         width: imgWidth,
         height: imgHeight
       };
-      console.log("✅ Image dimensions from Image.getSize():", {
+      console.log("✅ Image dimensions from Image.getSize() (gallery image):", {
         width: imgWidth,
         height: imgHeight,
         platform: _reactNative.Platform.OS,
@@ -265,17 +387,18 @@ var ImageCropper = function ImageCropper(_ref) {
         source: 'Image.getSize()'
       });
 
-      // ✅ IMPORTANT: onImageLayout peut se déclencher avant Image.getSize (race condition).
-      // Recalculer le contentRect dès qu'on connaît la taille originale, sinon les coords seront décalées.
-      var lw = displayedImageLayout.current.width;
-      var lh = displayedImageLayout.current.height;
-      if (lw > 0 && lh > 0) {
-        updateDisplayedContentRect(lw, lh);
-        // ✅ CRITICAL: Initialize crop box when we have image dimensions
-        // - If we have camera frame data, use it to match green frame exactly
-        // - If no camera frame data (gallery image), initialize with 70% default box
-        if (points.length === 0) {
+      // ✅ RÉFÉRENTIEL UNIQUE : Recalculer imageDisplayRect dans le wrapper commun
+      // dès qu'on connaît la taille originale de l'image
+      var wrapper = commonWrapperLayout.current;
+      if (wrapper.width > 0 && wrapper.height > 0) {
+        updateImageDisplayRect(wrapper.width, wrapper.height);
+        // ✅ IMPORTANT: pour les images de la galerie (pas de cameraFrameData),
+        // initialiser automatiquement le cadre blanc (70% du wrapper) une fois que
+        // nous connaissons à la fois le wrapper et les dimensions originales.
+        // ✅ CRITICAL: Guard against double initialization
+        if (!hasInitializedCropBox.current && points.length === 0 && imageSource.current === 'gallery') {
           initializeCropBox();
+          hasInitializedCropBox.current = true;
         }
       }
     }, function (error) {
@@ -283,514 +406,200 @@ var ImageCropper = function ImageCropper(_ref) {
     });
   }, [image]);
 
-  // ✅ CRITICAL FIX: Convert green frame coordinates (camera preview) to captured image coordinates
-  var convertGreenFrameToImageCoords = function convertGreenFrameToImageCoords(greenFrame, capturedImageSize, displayedImageRect) {
-    if (!greenFrame || !capturedImageSize) {
-      console.warn("Cannot convert green frame: missing data");
-      return null;
-    }
-    var frameX = greenFrame.x,
-      frameY = greenFrame.y,
-      frameWidth = greenFrame.width,
-      frameHeight = greenFrame.height,
-      wrapperWidth = greenFrame.wrapperWidth,
-      wrapperHeight = greenFrame.wrapperHeight;
-    var imgWidth = capturedImageSize.width,
-      imgHeight = capturedImageSize.height;
-    var displayX = displayedImageRect.x,
-      displayY = displayedImageRect.y,
-      displayWidth = displayedImageRect.width,
-      displayHeight = displayedImageRect.height;
-    console.log("🔄 Converting green frame:", {
-      greenFrame: {
-        frameX: frameX,
-        frameY: frameY,
-        frameWidth: frameWidth,
-        frameHeight: frameHeight,
-        wrapperWidth: wrapperWidth,
-        wrapperHeight: wrapperHeight
-      },
-      capturedImageSize: {
-        imgWidth: imgWidth,
-        imgHeight: imgHeight
-      },
-      displayedImageRect: {
-        displayX: displayX,
-        displayY: displayY,
-        displayWidth: displayWidth,
-        displayHeight: displayHeight
-      }
-    });
-
-    // ✅ SIMPLIFIED APPROACH: Assume CameraView fills the wrapper completely (no letterboxing in preview)
-    // The green frame is drawn as a percentage of the wrapper (95% width, 80% height)
-    // We need to map this directly to the captured image, accounting for aspect ratio differences
-
-    var previewAspect = wrapperWidth / wrapperHeight;
-    var capturedAspect = imgWidth / imgHeight;
-    console.log("📐 Aspect ratios:", {
-      previewAspect: previewAspect.toFixed(3),
-      capturedAspect: capturedAspect.toFixed(3),
-      wrapperSize: {
-        wrapperWidth: wrapperWidth,
-        wrapperHeight: wrapperHeight
-      },
-      capturedSize: {
-        imgWidth: imgWidth,
-        imgHeight: imgHeight
-      }
-    });
-
-    // ✅ KEY INSIGHT: The green frame is 95% of wrapper width and 80% of wrapper height
-    // If the captured image has a different aspect ratio, we need to map proportionally
-    // The green frame represents a region in the preview, which should map to the same region in the image
-
-    // Calculate green frame as percentage of wrapper
-    var greenFramePercentX = frameX / wrapperWidth;
-    var greenFramePercentY = frameY / wrapperHeight;
-    var greenFramePercentWidth = frameWidth / wrapperWidth;
-    var greenFramePercentHeight = frameHeight / wrapperHeight;
-    console.log("📊 Green frame as percentage of wrapper:", {
-      x: (greenFramePercentX * 100).toFixed(2) + '%',
-      y: (greenFramePercentY * 100).toFixed(2) + '%',
-      width: (greenFramePercentWidth * 100).toFixed(2) + '%',
-      height: (greenFramePercentHeight * 100).toFixed(2) + '%'
-    });
-
-    // ✅ DIRECT MAPPING: Map green frame percentage directly to captured image
-    // The green frame covers a certain percentage of the preview, which should map to the same percentage of the image
-    // However, we need to account for aspect ratio differences
-
-    // If preview and captured have same aspect ratio, direct mapping works
-    // If different, we need to account for letterboxing in the preview
-
-    // Calculate how the captured image would be displayed in the preview (aspect-fit)
-    var previewContentWidth, previewContentHeight, previewOffsetX, previewOffsetY;
-    if (Math.abs(capturedAspect - previewAspect) < 0.01) {
-      // Same aspect ratio → no letterboxing, direct mapping
-      previewContentWidth = wrapperWidth;
-      previewContentHeight = wrapperHeight;
-      previewOffsetX = 0;
-      previewOffsetY = 0;
-    } else if (capturedAspect > previewAspect) {
-      // Image is wider → fills width, letterboxing on top/bottom
-      previewContentWidth = wrapperWidth;
-      previewContentHeight = wrapperWidth / capturedAspect;
-      previewOffsetX = 0;
-      previewOffsetY = (wrapperHeight - previewContentHeight) / 2;
-    } else {
-      // Image is taller → fills height, letterboxing on left/right
-      previewContentHeight = wrapperHeight;
-      previewContentWidth = wrapperHeight * capturedAspect;
-      previewOffsetX = (wrapperWidth - previewContentWidth) / 2;
-      previewOffsetY = 0;
+  // Le cadre blanc doit être calculé sur le MÊME wrapper que le cadre vert (9/16)
+  // Ensuite, on restreint les points pour qu'ils restent dans imageDisplayRect (image visible)
+  var initializeCropBox = function initializeCropBox() {
+    // ✅ CRITICAL FIX #2: Guard against double initialization
+    if (hasInitializedCropBox.current) {
+      console.log("⚠️ Crop box already initialized, skipping duplicate initialization");
+      return;
     }
-    console.log("📐 Preview content area (actual image area in preview):", {
-      previewContentWidth: previewContentWidth.toFixed(2),
-      previewContentHeight: previewContentHeight.toFixed(2),
-      previewOffsetX: previewOffsetX.toFixed(2),
-      previewOffsetY: previewOffsetY.toFixed(2)
-    });
 
-    // Step 3: Convert green frame coordinates from wrapper space to preview content space
-    // ✅ CRITICAL FIX: The green frame is drawn on the wrapper, but we need to map it to the actual image area
-    // If the green frame overlaps letterboxing areas, we need to clip it to the actual image content area
-
-    // Calculate green frame bounds in wrapper coordinates
-    var frameLeft = frameX;
-    var frameTop = frameY;
-    var frameRight = frameX + frameWidth;
-    var frameBottom = frameY + frameHeight;
-
-    // Calculate preview content bounds in wrapper coordinates
-    var contentLeft = previewOffsetX;
-    var contentTop = previewOffsetY;
-    var contentRight = previewOffsetX + previewContentWidth;
-    var contentBottom = previewOffsetY + previewContentHeight;
-
-    // ✅ KEY INSIGHT: The green frame should map to the same percentage of the image content area
-    // But we need to account for letterboxing - the green frame might extend into letterboxing areas
-
-    // ✅ Clip green frame to preview content area (intersection)
-    var clippedLeft = Math.max(frameLeft, contentLeft);
-    var clippedTop = Math.max(frameTop, contentTop);
-    var clippedRight = Math.min(frameRight, contentRight);
-    var clippedBottom = Math.min(frameBottom, contentBottom);
-
-    // Calculate clipped green frame dimensions
-    var clippedWidth = Math.max(0, clippedRight - clippedLeft);
-    var clippedHeight = Math.max(0, clippedBottom - clippedTop);
-
-    // If green frame is completely outside content area, return null
-    if (clippedWidth <= 0 || clippedHeight <= 0) {
-      console.error("❌ Green frame is completely outside preview content area!");
-      return null;
+    // ✅ CRITICAL: Ensure common wrapper layout is available
+    var wrapper = commonWrapperLayout.current;
+    if (wrapper.width === 0 || wrapper.height === 0) {
+      console.warn("Cannot initialize crop box: common wrapper layout not ready");
+      return;
     }
 
-    // ✅ ALTERNATIVE APPROACH: Map green frame as percentage of image content area
-    // The green frame covers a certain percentage of the wrapper, but we want it to cover
-    // the same visual percentage of the image content area
-
-    // Calculate green frame center and size as percentage of wrapper
-    var greenFrameCenterX = (frameLeft + frameRight) / 2;
-    var greenFrameCenterY = (frameTop + frameBottom) / 2;
-    var greenFrameCenterPercentX = greenFrameCenterX / wrapperWidth;
-    var greenFrameCenterPercentY = greenFrameCenterY / wrapperHeight;
-
-    // Map center to image content area
-    var imageContentCenterX = previewOffsetX + previewContentWidth * greenFrameCenterPercentX;
-    var imageContentCenterY = previewOffsetY + previewContentHeight * greenFrameCenterPercentY;
-
-    // Calculate green frame size as percentage of image content area (not wrapper)
-    // The green frame should cover the same visual percentage of the image as it does of the wrapper
-    var imageContentFrameWidth = previewContentWidth * greenFramePercentWidth;
-    var imageContentFrameHeight = previewContentHeight * greenFramePercentHeight;
-
-    // Calculate final green frame in image content coordinates
-    var finalFrameX = imageContentCenterX - imageContentFrameWidth / 2;
-    var finalFrameY = imageContentCenterY - imageContentFrameHeight / 2;
-    var finalFrameWidth = imageContentFrameWidth;
-    var finalFrameHeight = imageContentFrameHeight;
-
-    // Clamp to image content bounds
-    var clampedFinalX = Math.max(previewOffsetX, Math.min(finalFrameX, previewOffsetX + previewContentWidth - finalFrameWidth));
-    var clampedFinalY = Math.max(previewOffsetY, Math.min(finalFrameY, previewOffsetY + previewContentHeight - finalFrameHeight));
-    var clampedFinalWidth = Math.min(finalFrameWidth, previewOffsetX + previewContentWidth - clampedFinalX);
-    var clampedFinalHeight = Math.min(finalFrameHeight, previewOffsetY + previewContentHeight - clampedFinalY);
-
-    // Convert to relative coordinates within preview content area
-    var relativeX = clampedFinalX - previewOffsetX;
-    var relativeY = clampedFinalY - previewOffsetY;
-
-    // Normalize to 0-1 range within the preview content area (actual image area)
-    var normalizedX = relativeX / previewContentWidth;
-    var normalizedY = relativeY / previewContentHeight;
-    var normalizedWidth = clampedFinalWidth / previewContentWidth;
-    var normalizedHeight = clampedFinalHeight / previewContentHeight;
-    console.log("✂️ Green frame mapping (percentage-based):", {
-      originalFrame: {
-        frameX: frameX,
-        frameY: frameY,
-        frameWidth: frameWidth,
-        frameHeight: frameHeight
-      },
-      greenFramePercentages: {
-        centerX: (greenFrameCenterPercentX * 100).toFixed(2) + '%',
-        centerY: (greenFrameCenterPercentY * 100).toFixed(2) + '%',
-        width: (greenFramePercentWidth * 100).toFixed(2) + '%',
-        height: (greenFramePercentHeight * 100).toFixed(2) + '%'
-      },
-      previewContent: {
-        previewOffsetX: previewOffsetX,
-        previewOffsetY: previewOffsetY,
-        previewContentWidth: previewContentWidth,
-        previewContentHeight: previewContentHeight
-      },
-      mappedFrame: {
-        finalX: finalFrameX.toFixed(2),
-        finalY: finalFrameY.toFixed(2),
-        finalWidth: finalFrameWidth.toFixed(2),
-        finalHeight: finalFrameHeight.toFixed(2)
-      },
-      clampedFrame: {
-        x: clampedFinalX.toFixed(2),
-        y: clampedFinalY.toFixed(2),
-        width: clampedFinalWidth.toFixed(2),
-        height: clampedFinalHeight.toFixed(2)
-      },
-      normalized: {
-        normalizedX: normalizedX.toFixed(4),
-        normalizedY: normalizedY.toFixed(4),
-        normalizedWidth: normalizedWidth.toFixed(4),
-        normalizedHeight: normalizedHeight.toFixed(4)
+    // ✅ CRITICAL: Ensure imageDisplayRect is available (zone réelle de l'image dans le wrapper)
+    var imageRect = imageDisplayRect.current;
+    if (imageRect.width === 0 || imageRect.height === 0) {
+      // Recalculer si nécessaire
+      if (originalImageDimensions.current.width > 0 && originalImageDimensions.current.height > 0) {
+        updateImageDisplayRect(wrapper.width, wrapper.height);
+        imageRect = imageDisplayRect.current;
+      } else {
+        console.warn("Cannot initialize crop box: imageDisplayRect not available (original dimensions missing)");
+        return;
       }
-    });
-    console.log("📊 Normalized coordinates:", {
-      relativeX: relativeX,
-      relativeY: relativeY,
-      normalizedX: normalizedX,
-      normalizedY: normalizedY,
-      normalizedWidth: normalizedWidth,
-      normalizedHeight: normalizedHeight
-    });
-
-    // Step 4: Convert normalized coordinates to captured image pixel coordinates
-    var imageX = normalizedX * imgWidth;
-    var imageY = normalizedY * imgHeight;
-    var imageWidth = normalizedWidth * imgWidth;
-    var imageHeight = normalizedHeight * imgHeight;
-    console.log("🖼️ Image pixel coordinates:", {
-      imageX: imageX,
-      imageY: imageY,
-      imageWidth: imageWidth,
-      imageHeight: imageHeight,
-      imgWidth: imgWidth,
-      imgHeight: imgHeight
-    });
-
-    // Step 5: Convert to displayed image coordinates (for white bounding box)
-    // The captured image is displayed with resizeMode='contain' in ImageCropper
-    var displayAspect = displayWidth / displayHeight;
-    var displayContentWidth, displayContentHeight, displayOffsetX, displayOffsetY;
-    if (capturedAspect > displayAspect) {
-      // Image is wider than display → letterboxing on top/bottom
-      displayContentWidth = displayWidth;
-      displayContentHeight = displayWidth / capturedAspect;
-      displayOffsetX = displayX;
-      displayOffsetY = displayY + (displayHeight - displayContentHeight) / 2;
-    } else {
-      // Image is taller than display → letterboxing on left/right
-      displayContentHeight = displayHeight;
-      displayContentWidth = displayHeight * capturedAspect;
-      displayOffsetX = displayX + (displayWidth - displayContentWidth) / 2;
-      displayOffsetY = displayY;
     }
 
-    // Convert image pixel coordinates to display coordinates
-    var scaleX = displayContentWidth / imgWidth;
-    var scaleY = displayContentHeight / imgHeight;
-    var displayBoxX = displayOffsetX + imageX * scaleX;
-    var displayBoxY = displayOffsetY + imageY * scaleY;
-    var displayBoxWidth = imageWidth * scaleX;
-    var displayBoxHeight = imageHeight * scaleY;
-
-    // Clamp to displayed image bounds
-    var clampedX = Math.max(displayOffsetX, Math.min(displayBoxX, displayOffsetX + displayContentWidth - displayBoxWidth));
-    var clampedY = Math.max(displayOffsetY, Math.min(displayBoxY, displayOffsetY + displayContentHeight - displayBoxHeight));
-    var clampedWidth = Math.min(displayBoxWidth, displayOffsetX + displayContentWidth - clampedX);
-    var clampedHeight = Math.min(displayBoxHeight, displayOffsetY + displayContentHeight - clampedY);
-    var result = {
-      // Display coordinates (for white bounding box)
-      displayCoords: {
-        x: clampedX,
-        y: clampedY,
-        width: clampedWidth,
-        height: clampedHeight
-      },
-      // Image pixel coordinates (for backend crop)
-      imageCoords: {
-        x: Math.max(0, Math.min(imageX, imgWidth - imageWidth)),
-        y: Math.max(0, Math.min(imageY, imgHeight - imageHeight)),
-        width: Math.max(0, Math.min(imageWidth, imgWidth)),
-        height: Math.max(0, Math.min(imageHeight, imgHeight))
-      },
-      debug: {
-        previewAspect: previewAspect,
-        capturedAspect: capturedAspect,
-        displayAspect: displayAspect,
-        previewContentWidth: previewContentWidth,
-        previewContentHeight: previewContentHeight,
-        previewOffsetX: previewOffsetX,
-        previewOffsetY: previewOffsetY,
-        displayContentWidth: displayContentWidth,
-        displayContentHeight: displayContentHeight,
-        displayOffsetX: displayOffsetX,
-        displayOffsetY: displayOffsetY,
-        scaleX: scaleX,
-        scaleY: scaleY
-      }
-    };
-    console.log("✅ Green frame converted to image coordinates:", JSON.stringify(result, null, 2));
+    // ✅ CRITICAL FIX: Calculate crop box as percentage of VISIBLE IMAGE AREA (imageDisplayRect)
+    // NOT the wrapper. This ensures the crop box is truly 80% of the image, not 80% of wrapper then clamped.
+    // Calculate absolute position of imageDisplayRect within wrapper
+    var imageRectX = wrapper.x + imageRect.x;
+    var imageRectY = wrapper.y + imageRect.y;
 
-    // ✅ VALIDATION: Ensure the white bounding box matches the green frame visually
-    // Calculate what percentage of the image the green frame covers
-    var greenFramePercentOfImage = {
-      width: imageWidth / imgWidth * 100,
-      height: imageHeight / imgHeight * 100
-    };
-    var greenFramePercentOfPreview = {
-      width: frameWidth / wrapperWidth * 100,
-      height: frameHeight / wrapperHeight * 100
-    };
-    console.log("📏 Green frame coverage:", {
-      percentOfImage: greenFramePercentOfImage,
-      percentOfPreview: greenFramePercentOfPreview,
-      shouldMatch: "Green frame should cover same % of image as it does of preview"
-    });
-    return result;
-  };
+    // ✅ PRIORITY RULE #3: IF image comes from camera → Use EXACT green frame coordinates
+    // Image is displayed in "cover" mode (full wrapper), so green frame coords = white frame coords
+    if (cameraFrameData.current && cameraFrameData.current.greenFrame && originalImageDimensions.current.width > 0) {
+      var greenFrame = cameraFrameData.current.greenFrame;
 
-  // ✅ REFACTORISATION : Initialiser le crop box avec les dimensions d'affichage réelles
-  // ✅ CRITICAL FIX: If camera frame data exists, use it to match green frame exactly
-  var initializeCropBox = function initializeCropBox() {
-    // ✅ CRITICAL: Ensure displayedContentRect is available
-    var contentRect = displayedContentRect.current;
-    var layout = displayedImageLayout.current;
+      // ✅ Image fills wrapper (cover mode), so use green frame position directly in wrapper space
+      var _boxX = wrapper.x + greenFrame.x;
+      var _boxY = wrapper.y + greenFrame.y;
+      var _boxWidth = greenFrame.width;
+      var _boxHeight = greenFrame.height;
 
-    // Recalculate if not available
-    if (contentRect.width === 0 || contentRect.height === 0) {
-      if (layout.width > 0 && layout.height > 0) {
-        updateDisplayedContentRect(layout.width, layout.height);
-        contentRect = displayedContentRect.current;
+      // ✅ SAFETY: Validate calculated coordinates before creating points
+      var _isValidCoordinate = function _isValidCoordinate(val) {
+        return typeof val === 'number' && isFinite(val) && !isNaN(val);
+      };
+      if (!_isValidCoordinate(_boxX) || !_isValidCoordinate(_boxY) || !_isValidCoordinate(_boxWidth) || !_isValidCoordinate(_boxHeight)) {
+        console.warn("⚠️ Invalid coordinates calculated for crop box, skipping initialization");
+        return;
       }
-      // If still not available, use layout as fallback
-      if (contentRect.width === 0 || contentRect.height === 0) {
-        if (layout.width > 0 && layout.height > 0) {
-          contentRect = {
-            x: layout.x,
-            y: layout.y,
-            width: layout.width,
-            height: layout.height
-          };
-        } else {
-          console.warn("Cannot initialize crop box: displayed dimensions are zero");
-          return;
-        }
+
+      // ✅ Create points using EXACT greenFrame coordinates (mapped to ImageCropper wrapper)
+      var _newPoints = [{
+        x: _boxX,
+        y: _boxY
+      },
+      // Top-left
+      {
+        x: _boxX + _boxWidth,
+        y: _boxY
+      },
+      // Top-right
+      {
+        x: _boxX + _boxWidth,
+        y: _boxY + _boxHeight
+      },
+      // Bottom-right
+      {
+        x: _boxX,
+        y: _boxY + _boxHeight
+      } // Bottom-left
+      ];
+
+      // ✅ SAFETY: Validate all points before setting
+      var _validPoints = _newPoints.filter(function (p) {
+        return _isValidCoordinate(p.x) && _isValidCoordinate(p.y);
+      });
+      if (_validPoints.length !== _newPoints.length) {
+        console.warn("⚠️ Some points have invalid coordinates, skipping initialization");
+        return;
       }
+      console.log("✅ Initializing crop box for camera image (COVER MODE - exact green frame):", {
+        greenFrame: {
+          x: greenFrame.x,
+          y: greenFrame.y,
+          width: greenFrame.width,
+          height: greenFrame.height
+        },
+        whiteFrame: {
+          x: _boxX.toFixed(2),
+          y: _boxY.toFixed(2),
+          width: _boxWidth.toFixed(2),
+          height: _boxHeight.toFixed(2)
+        },
+        note: "Image in cover mode - white frame = same position/size as green frame, same content"
+      });
+      setPoints(_newPoints);
+      hasInitializedCropBox.current = true; // ✅ CRITICAL: Mark as initialized
+      // ✅ CRITICAL: DO NOT nullify cameraFrameData here - keep it for Image.getSize() callback check
+      // It will be cleared when loading a new image
+      return;
     }
-    var _contentRect = contentRect,
-      x = _contentRect.x,
-      y = _contentRect.y,
-      width = _contentRect.width,
-      height = _contentRect.height;
-
-    // ✅ PRIORITY: If we have green frame data from camera, use it to match exactly
-    if (cameraFrameData.current && cameraFrameData.current.greenFrame && originalImageDimensions.current.width > 0) {
-      var converted = convertGreenFrameToImageCoords(cameraFrameData.current.greenFrame, cameraFrameData.current.capturedImageSize || originalImageDimensions.current, contentRect);
-      if (converted && converted.displayCoords) {
-        var _converted$displayCoo = converted.displayCoords,
-          _boxX = _converted$displayCoo.x,
-          _boxY = _converted$displayCoo.y,
-          _boxWidth = _converted$displayCoo.width,
-          _boxHeight = _converted$displayCoo.height;
-        var _contentRect2 = contentRect,
-          contentX = _contentRect2.x,
-          contentY = _contentRect2.y,
-          contentWidth = _contentRect2.width,
-          contentHeight = _contentRect2.height;
-
-        // ✅ CRITICAL: Clamp points to displayed image bounds (double-check)
-        // Ensure the bounding box stays within contentRect, but preserve aspect ratio and percentage
-        // First, clamp position
-        var clampedBoxX = Math.max(contentX, Math.min(_boxX, contentX + contentWidth - _boxWidth));
-        var clampedBoxY = Math.max(contentY, Math.min(_boxY, contentY + contentHeight - _boxHeight));
-
-        // ✅ CRITICAL: Preserve the width and height from conversion (they should already be correct)
-        // Only adjust if they would exceed bounds, but try to maintain the 80% coverage
-        var clampedBoxWidth = _boxWidth;
-        var clampedBoxHeight = _boxHeight;
-
-        // Ensure the box fits within contentRect
-        if (clampedBoxX + clampedBoxWidth > contentX + contentWidth) {
-          clampedBoxWidth = contentX + contentWidth - clampedBoxX;
-        }
-        if (clampedBoxY + clampedBoxHeight > contentY + contentHeight) {
-          clampedBoxHeight = contentY + contentHeight - clampedBoxY;
-        }
 
-        // ✅ CRITICAL: If clamping reduced dimensions, adjust position to center the box
-        // This ensures the white bounding box maintains the same visual percentage as the green frame
-        if (clampedBoxWidth < _boxWidth || clampedBoxHeight < _boxHeight) {
-          // Re-center if possible
-          var idealX = contentX + (contentWidth - clampedBoxWidth) / 2;
-          var idealY = contentY + (contentHeight - clampedBoxHeight) / 2;
-          clampedBoxX = Math.max(contentX, Math.min(idealX, contentX + contentWidth - clampedBoxWidth));
-          clampedBoxY = Math.max(contentY, Math.min(idealY, contentY + contentHeight - clampedBoxHeight));
-        }
+    // ✅ PRIORITY RULE #3: DEFAULT logic ONLY for gallery images (NOT camera)
+    // If we reach here and imageSource is 'camera', something went wrong
+    if (imageSource.current === 'camera') {
+      console.warn("⚠️ Camera image but no greenFrame found - this should not happen");
+      return;
+    }
 
-        // ✅ CRITICAL: Ensure points are within contentRect bounds but not exactly at the edges
-        // This allows free movement in all directions
-        var minX = contentX;
-        var maxX = contentX + contentWidth;
-        var minY = contentY;
-        var maxY = contentY + contentHeight;
-
-        // Create points from the clamped green frame coordinates
-        // Clamp each point individually to ensure they're within bounds
-        var _newPoints = [{
-          x: Math.max(minX, Math.min(clampedBoxX, maxX)),
-          y: Math.max(minY, Math.min(clampedBoxY, maxY))
-        }, {
-          x: Math.max(minX, Math.min(clampedBoxX + clampedBoxWidth, maxX)),
-          y: Math.max(minY, Math.min(clampedBoxY, maxY))
-        }, {
-          x: Math.max(minX, Math.min(clampedBoxX + clampedBoxWidth, maxX)),
-          y: Math.max(minY, Math.min(clampedBoxY + clampedBoxHeight, maxY))
-        }, {
-          x: Math.max(minX, Math.min(clampedBoxX, maxX)),
-          y: Math.max(minY, Math.min(clampedBoxY + clampedBoxHeight, maxY))
-        }];
-
-        // ✅ VALIDATION: Verify the white bounding box matches green frame percentage (80%)
-        var whiteBoxPercentOfDisplay = {
-          width: clampedBoxWidth / contentRect.width * 100,
-          height: clampedBoxHeight / contentRect.height * 100
-        };
-        var greenFramePercentOfWrapper = {
-          width: cameraFrameData.current.greenFrame.width / cameraFrameData.current.greenFrame.wrapperWidth * 100,
-          height: cameraFrameData.current.greenFrame.height / cameraFrameData.current.greenFrame.wrapperHeight * 100
-        };
+    // ✅ DEFAULT: Crop box (70% of VISIBLE IMAGE AREA - centered) - ONLY for gallery images
+    var boxWidth = imageRect.width * 0.70; // 70% of visible image width
+    var boxHeight = imageRect.height * 0.70; // 70% of visible image height
+    var boxX = imageRectX + (imageRect.width - boxWidth) / 2; // Centered in image area
+    var boxY = imageRectY + (imageRect.height - boxHeight) / 2; // Centered in image area
 
-        // ✅ DEBUG: Log if percentages don't match (should both be ~80%)
-        if (Math.abs(whiteBoxPercentOfDisplay.width - greenFramePercentOfWrapper.width) > 5 || Math.abs(whiteBoxPercentOfDisplay.height - greenFramePercentOfWrapper.height) > 5) {
-          console.warn("⚠️ White box percentage doesn't match green frame:", {
-            whiteBox: whiteBoxPercentOfDisplay,
-            greenFrame: greenFramePercentOfWrapper,
-            difference: {
-              width: Math.abs(whiteBoxPercentOfDisplay.width - greenFramePercentOfWrapper.width),
-              height: Math.abs(whiteBoxPercentOfDisplay.height - greenFramePercentOfWrapper.height)
-            }
-          });
-        }
-        console.log("✅ Initializing crop box from green frame (clamped):", {
-          greenFrame: cameraFrameData.current.greenFrame,
-          converted: converted,
-          clamped: {
-            x: clampedBoxX,
-            y: clampedBoxY,
-            width: clampedBoxWidth,
-            height: clampedBoxHeight
-          },
-          contentRect: contentRect,
-          points: _newPoints,
-          validation: {
-            whiteBoxPercentOfDisplay: whiteBoxPercentOfDisplay,
-            greenFramePercentOfWrapper: greenFramePercentOfWrapper,
-            shouldMatch: "White box % should match green frame % (80% - accounting for aspect ratio)"
-          }
-        });
-        setPoints(_newPoints);
-        // Clear camera frame data after use to avoid reusing it
-        cameraFrameData.current = null;
-        return;
-      }
+    // ✅ SAFETY: Validate calculated coordinates before creating points
+    var isValidCoordinate = function isValidCoordinate(val) {
+      return typeof val === 'number' && isFinite(val) && !isNaN(val);
+    };
+    if (!isValidCoordinate(boxX) || !isValidCoordinate(boxY) || !isValidCoordinate(boxWidth) || !isValidCoordinate(boxHeight)) {
+      console.warn("⚠️ Invalid coordinates calculated for default crop box, skipping initialization");
+      return;
     }
-
-    // ✅ CRITICAL: Default crop box (70% of displayed area - centered)
-    var boxWidth = width * 0.70; // 70% width
-    var boxHeight = height * 0.70; // 70% height
-    var boxX = x + (width - boxWidth) / 2; // Centered horizontally
-    var boxY = y + (height - boxHeight) / 2; // Centered vertically
     var newPoints = [{
       x: boxX,
       y: boxY
-    },
-    // Top-left
-    {
+    }, {
       x: boxX + boxWidth,
       y: boxY
-    },
-    // Top-right
-    {
+    }, {
       x: boxX + boxWidth,
       y: boxY + boxHeight
-    },
-    // Bottom-right
-    {
+    }, {
       x: boxX,
       y: boxY + boxHeight
-    } // Bottom-left
-    ];
-    console.log("Initializing crop box (default - 70% centered):", {
-      displayedWidth: width,
-      displayedHeight: height,
-      boxWidth: boxWidth,
-      boxHeight: boxHeight,
-      boxX: boxX,
-      boxY: boxY,
+    }];
+
+    // ✅ SAFETY: Validate all points before setting
+    var validPoints = newPoints.filter(function (p) {
+      return isValidCoordinate(p.x) && isValidCoordinate(p.y);
+    });
+    if (validPoints.length !== newPoints.length) {
+      console.warn("⚠️ Some points have invalid coordinates in default crop box, skipping initialization");
+      return;
+    }
+    console.log("✅ Initializing crop box (default - 70% of visible image area, gallery only):", {
+      wrapper: {
+        width: wrapper.width,
+        height: wrapper.height
+      },
+      imageDisplayRect: imageRect,
+      boxInImage: {
+        x: boxX,
+        y: boxY,
+        width: boxWidth,
+        height: boxHeight
+      },
       points: newPoints
     });
     setPoints(newPoints);
+    hasInitializedCropBox.current = true; // ✅ CRITICAL: Mark as initialized
+  };
+
+  // ✅ RÉFÉRENTIEL UNIQUE : Callback pour mettre à jour le layout du wrapper commun
+  // Ce wrapper a exactement les mêmes dimensions que le wrapper de CustomCamera (9/16, width = screenWidth)
+  var onCommonWrapperLayout = function onCommonWrapperLayout(e) {
+    var layout = e.nativeEvent.layout;
+    commonWrapperLayout.current = {
+      x: layout.x,
+      y: layout.y,
+      width: layout.width,
+      height: layout.height
+    };
+    console.log("✅ Common wrapper layout updated:", commonWrapperLayout.current);
+
+    // ✅ Recalculer imageDisplayRect dès que le wrapper est prêt
+    if (originalImageDimensions.current.width > 0 && originalImageDimensions.current.height > 0) {
+      updateImageDisplayRect(layout.width, layout.height);
+
+      // ✅ CRITICAL FIX #2: Initialize crop box ONLY if not already initialized
+      // For camera images: initialize ONLY from greenFrame (already done when cameraFrameData was set)
+      if (!hasInitializedCropBox.current && points.length === 0) {
+        // ✅ CRITICAL: Only initialize for gallery images here
+        // Camera images should be initialized when cameraFrameData is set, not here
+        if (imageSource.current !== 'camera') {
+          initializeCropBox();
+        }
+      }
+    }
   };
 
   // ✅ REFACTORISATION : Mettre à jour les dimensions d'affichage et les dimensions pour SVG
@@ -813,9 +622,28 @@ var ImageCropper = function ImageCropper(_ref) {
       height: layout.height
     };
 
-    // ✅ CORRECTION: recalculer contentRect (contain). Si les dimensions originales ne sont pas encore connues,
-    // updateDisplayedContentRect va fallback et sera recalculé quand Image.getSize arrivera.
-    updateDisplayedContentRect(layout.width, layout.height);
+    // ✅ Si l'image vient de la caméra et que les dimensions originales ne sont pas encore définies,
+    // les initialiser à partir de cameraFrameData AVANT de calculer le contentRect.
+    if (originalImageDimensions.current.width === 0 && cameraFrameData.current && cameraFrameData.current.capturedImageSize) {
+      var _cameraFrameData$curr2 = cameraFrameData.current.capturedImageSize,
+        width = _cameraFrameData$curr2.width,
+        height = _cameraFrameData$curr2.height;
+      originalImageDimensions.current = {
+        width: width,
+        height: height
+      };
+      console.log("✅ originalImageDimensions initialisées depuis cameraFrameData dans onImageLayout:", {
+        width: width,
+        height: height
+      });
+    }
+
+    // ✅ RÉFÉRENTIEL UNIQUE : Recalculer imageDisplayRect dans le wrapper commun
+    // Si le wrapper commun n'est pas encore prêt, on attendra onCommonWrapperLayout
+    var wrapper = commonWrapperLayout.current;
+    if (wrapper.width > 0 && wrapper.height > 0) {
+      updateImageDisplayRect(wrapper.width, wrapper.height);
+    }
     console.log("Displayed image layout updated:", {
       width: layout.width,
       height: layout.height,
@@ -823,27 +651,16 @@ var ImageCropper = function ImageCropper(_ref) {
       y: layout.y
     });
 
-    // ✅ CRITICAL FIX: Only initialize crop box if:
-    // 1. Layout dimensions are available
-    // 2. We have no points yet (first initialization)
-    // 3. We have original image dimensions (either from camera or Image.getSize)
-    // This prevents initializing with wrong dimensions for subsequent images
-    if (layout.width > 0 && layout.height > 0 && points.length === 0) {
-      // ✅ CRITICAL: Wait for original dimensions before initializing
-      // If dimensions not available yet, initializeCropBox will be called from useEffect when Image.getSize completes
-      if (originalImageDimensions.current.width > 0 && originalImageDimensions.current.height > 0) {
+    // ✅ CRITICAL FIX #2: Do NOT initialize crop box in onImageLayout for camera images
+    // Camera images should be initialized ONLY when cameraFrameData is set (in useEffect)
+    // Gallery images can be initialized here if not already done
+    if (wrapper.width > 0 && wrapper.height > 0 && layout.width > 0 && layout.height > 0 && !hasInitializedCropBox.current && points.length === 0 && originalImageDimensions.current.width > 0 && originalImageDimensions.current.height > 0) {
+      // ✅ CRITICAL: Only initialize for gallery images here
+      // Camera images should be initialized when cameraFrameData is set, not here
+      if (imageSource.current !== 'camera') {
         initializeCropBox();
-      } else if (cameraFrameData.current && cameraFrameData.current.capturedImageSize) {
-        // ✅ If we have camera dimensions, use them immediately
-        originalImageDimensions.current = {
-          width: cameraFrameData.current.capturedImageSize.width,
-          height: cameraFrameData.current.capturedImageSize.height
-        };
-        initializeCropBox();
-      } else {
-        // ✅ For gallery images, we can initialize with layout dimensions as fallback
-        // The crop box will be recalculated when Image.getSize completes
-        // But we initialize now so the user sees a border immediately
+      } else if (cameraFrameData.current && cameraFrameData.current.greenFrame) {
+        // ✅ For camera images, initialize ONLY if greenFrame is available
         initializeCropBox();
       }
     }
@@ -856,6 +673,66 @@ var ImageCropper = function ImageCropper(_ref) {
     });
     return path + 'Z';
   };
+
+  // ✅ Helper function: Find closest point on a line segment to a tap point
+  var findClosestPointOnLine = function findClosestPointOnLine(tapX, tapY, lineStartX, lineStartY, lineEndX, lineEndY) {
+    var dx = lineEndX - lineStartX;
+    var dy = lineEndY - lineStartY;
+    var lengthSquared = dx * dx + dy * dy;
+    if (lengthSquared === 0) {
+      // Line segment is a point
+      return {
+        x: lineStartX,
+        y: lineStartY,
+        distance: Math.sqrt(Math.pow(tapX - lineStartX, 2) + Math.pow(tapY - lineStartY, 2))
+      };
+    }
+
+    // Calculate projection parameter t (0 to 1)
+    var t = Math.max(0, Math.min(1, ((tapX - lineStartX) * dx + (tapY - lineStartY) * dy) / lengthSquared));
+
+    // Calculate closest point on line segment
+    var closestX = lineStartX + t * dx;
+    var closestY = lineStartY + t * dy;
+
+    // Calculate distance from tap to closest point
+    var distance = Math.sqrt(Math.pow(tapX - closestX, 2) + Math.pow(tapY - closestY, 2));
+    return {
+      x: closestX,
+      y: closestY,
+      distance: distance,
+      t: t
+    };
+  };
+
+  // ✅ Helper function: Check if tap is near any line segment and find closest point
+  var findClosestPointOnFrame = function findClosestPointOnFrame(tapX, tapY) {
+    var lineTolerance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 30;
+    if (points.length < 2) return null;
+    var closestPoint = null;
+    var minDistance = Infinity;
+    var insertIndex = -1;
+
+    // Check each line segment (closed polygon: last point connects to first)
+    for (var i = 0; i < points.length; i++) {
+      var start = points[i];
+      var end = points[(i + 1) % points.length];
+      var result = findClosestPointOnLine(tapX, tapY, start.x, start.y, end.x, end.y);
+      if (result.distance < minDistance && result.distance < lineTolerance) {
+        minDistance = result.distance;
+        closestPoint = {
+          x: result.x,
+          y: result.y
+        };
+        // Insert after the start point of this segment
+        insertIndex = i + 1;
+      }
+    }
+    return closestPoint ? {
+      point: closestPoint,
+      insertIndex: insertIndex
+    } : null;
+  };
   var handleTap = function handleTap(e) {
     if (!image || showResult) return;
     var now = Date.now();
@@ -863,97 +740,144 @@ var ImageCropper = function ImageCropper(_ref) {
       tapX = _e$nativeEvent.locationX,
       tapY = _e$nativeEvent.locationY;
 
-    // ✅ CRITICAL: Ensure displayedContentRect is available
-    var contentRect = displayedContentRect.current;
-    var layout = displayedImageLayout.current;
+    // ✅ 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 (contentRect.width === 0 || contentRect.height === 0) {
-      if (layout.width > 0 && layout.height > 0) {
-        updateDisplayedContentRect(layout.width, layout.height);
-        contentRect = displayedContentRect.current;
+    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 layout as fallback
-      if (contentRect.width === 0 || contentRect.height === 0) {
-        if (layout.width > 0 && layout.height > 0) {
-          contentRect = {
-            x: layout.x,
-            y: layout.y,
-            width: layout.width,
-            height: layout.height
+      // If still not available, use wrapper as fallback
+      if (imageRect.width === 0 || imageRect.height === 0) {
+        if (wrapper.width > 0 && wrapper.height > 0) {
+          imageRect = {
+            x: wrapper.x,
+            y: wrapper.y,
+            width: wrapper.width,
+            height: wrapper.height
           };
         } else {
-          console.warn("⚠️ Cannot handle tap: no layout dimensions available");
+          console.warn("⚠️ Cannot handle tap: wrapper or imageDisplayRect not available");
           return;
         }
       }
     }
 
-    // ✅ Clamp to real displayed image content (avoid points outside image due to letterboxing)
-    var _contentRect3 = contentRect,
-      cx = _contentRect3.x,
-      cy = _contentRect3.y,
-      cw = _contentRect3.width,
-      ch = _contentRect3.height;
-    var boundedTapX = Math.max(cx, Math.min(tapX, cx + cw));
-    var boundedTapY = Math.max(cy, Math.min(tapY, cy + ch));
-    var selectRadius = 28; // easier to grab points
-    if (lastTap.current && now - lastTap.current < 300) {
-      var exists = points.some(function (p) {
-        return Math.abs(p.x - boundedTapX) < selectRadius && Math.abs(p.y - boundedTapY) < selectRadius;
-      });
-      if (!exists) setPoints([].concat(_toConsumableArray(points), [{
-        x: boundedTapX,
-        y: boundedTapY
-      }]));
-      lastTap.current = null;
-    } else {
-      var index = points.findIndex(function (p) {
-        return Math.abs(p.x - boundedTapX) < selectRadius && Math.abs(p.y - boundedTapY) < selectRadius;
+    // ✅ Clamp to real displayed image content (imageDisplayRect dans le wrapper)
+    // Les coordonnées tapX/tapY sont relatives au wrapper commun
+    var imageRectX = wrapper.x + imageRect.x;
+    var imageRectY = wrapper.y + imageRect.y;
+    var _x$y$width$height = {
+        x: imageRectX,
+        y: imageRectY,
+        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;
+    // ✅ Larger select radius for easier point selection (especially on touch screens)
+    var selectRadius = 50; // Increased from 28 to 50 for better UX
+
+    // ✅ 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 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
+      };
+      lastTouchPosition.current = {
+        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)
       });
-      if (index !== -1) {
-        selectedPointIndex.current = index;
-        // ✅ FREE DRAG: Store initial positions for delta-based movement
-        initialTouchPosition.current = {
-          x: tapX,
-          y: tapY
+
+      // 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);
         };
-        lastTouchPosition.current = {
-          x: tapX,
-          y: tapY
-        }; // Store last touch for incremental delta
-        initialPointPosition.current = _objectSpread({}, points[index]);
-        lastValidPosition.current = _objectSpread({}, points[index]); // store original position before move
-
-        // ✅ CRITICAL: Disable parent ScrollView scrolling when dragging a point
-        // This prevents ScrollView from intercepting vertical movement
-        try {
-          // Find and disable parent ScrollView if it exists
-          var _findScrollView = function findScrollView(node) {
-            if (!node) return null;
-            if (node._component && node._component.setNativeProps) {
-              // Try to disable scrolling
-              node._component.setNativeProps({
-                scrollEnabled: false
-              });
-            }
-            return _findScrollView(node._owner || node._parent);
-          };
-          // Note: This is a workaround - ideally we'd pass a ref to disable scroll
-        } catch (e) {
-          // Ignore errors
+      } 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;
+          }
         }
       }
-      lastTap.current = now;
     }
+    lastTap.current = now;
   };
   var handleMove = function handleMove(e) {
     if (showResult || selectedPointIndex.current === null) return;
 
     // ✅ FREE DRAG: Use delta-based movement for smooth, unconstrained dragging
-    // ✅ CRITICAL FIX: Use incremental delta calculation for more reliable vertical movement
-    // Instead of calculating delta from initial position, calculate from last position
-    // This works better when ScrollView intercepts some events
+
     var nativeEvent = e.nativeEvent;
     var currentX = nativeEvent.locationX;
     var currentY = nativeEvent.locationY;
@@ -967,7 +891,6 @@ var ImageCropper = function ImageCropper(_ref) {
       return;
     }
 
-    // ✅ CRITICAL: Use incremental delta (from last position) instead of absolute delta
     // This is more reliable when ScrollView affects coordinate updates
     var deltaX, deltaY;
     if (lastTouchPosition.current) {
@@ -983,157 +906,284 @@ var ImageCropper = function ImageCropper(_ref) {
       return;
     }
 
-    // ✅ CRITICAL: Don't update lastTouchPosition here - update it AFTER clamping
-    // This ensures that if the point was clamped, lastTouchPosition reflects the actual
-    // touch position, allowing the next delta to be calculated correctly
-
-    // ✅ CRITICAL: Ensure displayedContentRect is available
-    var contentRect = displayedContentRect.current;
-    var layout = displayedImageLayout.current;
+    // Les coordonnées de mouvement sont relatives au wrapper commun
+    var imageRect = imageDisplayRect.current;
+    var wrapper = commonWrapperLayout.current;
 
     // Recalculate if not available
-    if (contentRect.width === 0 || contentRect.height === 0) {
-      if (layout.width > 0 && layout.height > 0) {
-        updateDisplayedContentRect(layout.width, layout.height);
-        contentRect = displayedContentRect.current;
+    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 layout as fallback
-      if (contentRect.width === 0 || contentRect.height === 0) {
-        if (layout.width > 0 && layout.height > 0) {
-          contentRect = {
-            x: layout.x,
-            y: layout.y,
-            width: layout.width,
-            height: layout.height
+      // If still not available, use wrapper as fallback
+      if (imageRect.width === 0 || imageRect.height === 0) {
+        if (wrapper.width > 0 && wrapper.height > 0) {
+          imageRect = {
+            x: wrapper.x,
+            y: wrapper.y,
+            width: wrapper.width,
+            height: wrapper.height
           };
         } else {
-          console.warn("⚠️ Cannot move point: no layout dimensions available");
+          console.warn("⚠️ Cannot move point: wrapper or imageDisplayRect not available");
           return;
         }
       }
     }
 
+    // ✅ CRITICAL: Calculate absolute bounds of imageDisplayRect within the wrapper
+    // imageRect is relative to wrapper, so we need to add wrapper offset
+    var imageRectX = wrapper.x + imageRect.x;
+    var imageRectY = wrapper.y + imageRect.y;
+    var contentRect = {
+      x: imageRectX,
+      y: imageRectY,
+      width: imageRect.width,
+      height: imageRect.height
+    };
+
     // ✅ FREE DRAG: Ensure initial positions are set
     if (!initialPointPosition.current) {
       var currentPoint = points[selectedPointIndex.current];
-      if (currentPoint) {
+      if (currentPoint && typeof currentPoint.x === 'number' && typeof currentPoint.y === 'number') {
         initialPointPosition.current = _objectSpread({}, currentPoint);
       } else {
-        console.warn("⚠️ No point found for selected index");
+        console.warn("⚠️ No point found for selected index or invalid point data");
         return;
       }
     }
 
-    // ✅ CRITICAL: deltaX and deltaY are already calculated above using incremental approach
-    // This ensures smooth movement even when ScrollView affects coordinate updates
-
-    // ✅ CRITICAL FIX: Use CURRENT point position (after previous clamping) instead of initial position
-    // This allows the point to move even if it was previously clamped to a limit
-    // If lastValidPosition exists (from previous clamping), use it; otherwise use initial position
-    var basePoint = lastValidPosition.current || initialPointPosition.current;
-
-    // ✅ DEBUG: Log movement to identify vertical movement issues
-    if (Math.abs(deltaY) > 10) {
-      var _initialTouchPosition;
-      console.log("🔄 Movement detected:", {
-        deltaX: deltaX.toFixed(2),
-        deltaY: deltaY.toFixed(2),
-        currentY: currentY.toFixed(2),
-        initialY: (_initialTouchPosition = initialTouchPosition.current) === null || _initialTouchPosition === void 0 || (_initialTouchPosition = _initialTouchPosition.y) === null || _initialTouchPosition === void 0 ? void 0 : _initialTouchPosition.toFixed(2),
-        pointInitialY: initialPointPosition.current.y.toFixed(2),
-        basePointY: basePoint.y.toFixed(2),
-        usingLastValid: !!lastValidPosition.current
-      });
+    // ✅ 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;
     }
 
-    // ✅ FREE DRAG: Apply delta to CURRENT point position (not initial)
-    // - This allows movement even if point was previously clamped
-    // - No constraints on distance, angle, or edge length
-    // - No forced horizontal/vertical alignment
-    // - No angle locking
-    // - Direct mapping of gesture delta (dx, dy) - both X and Y treated equally
-    var newX = basePoint.x + deltaX;
-    var newY = basePoint.y + deltaY;
-
-    // ✅ ONLY CONSTRAINT: Clamp to image bounds to keep points inside the image
-    // x ∈ [cx, cx + cw], y ∈ [cy, cy + ch]
-    // This is the ONLY constraint - no other geometry normalization
-    var _contentRect4 = contentRect,
-      cx = _contentRect4.x,
-      cy = _contentRect4.y,
-      cw = _contentRect4.width,
-      ch = _contentRect4.height;
-    // ✅ CRITICAL: Calculate bounds correctly - maxX = cx + cw, maxY = cy + ch
-    var maxX = cx + cw;
-    var maxY = cy + ch;
-    var boundedX = Math.max(cx, Math.min(newX, maxX));
-    var boundedY = Math.max(cy, Math.min(newY, maxY));
-
-    // ✅ DEBUG: Log bounds calculation to verify clamping is correct
-    if (Math.abs(newY - boundedY) > 1) {
-      console.log("🔍 Y coordinate clamping:", {
-        newY: newY.toFixed(2),
-        boundedY: boundedY.toFixed(2),
-        cy: cy.toFixed(2),
-        maxY: maxY.toFixed(2),
-        ch: ch.toFixed(2),
-        deltaY: deltaY.toFixed(2),
-        isAtMaxLimit: Math.abs(boundedY - maxY) < 0.01,
-        isAtMinLimit: Math.abs(boundedY - cy) < 0.01
+    // ✅ DIRECT MAPPING: newPosition = touchPosition + offset
+    // No delta accumulation, no zone morte
+    var newX = currentX + touchOffset.current.x;
+    var newY = currentY + touchOffset.current.y;
+
+    // ✅ SEPARATE DRAG BOUNDS vs CROP BOUNDS
+    var cx = contentRect.x,
+      cy = contentRect.y,
+      cw = contentRect.width,
+      ch = contentRect.height;
+
+    // ✅ STRICT BOUNDS: For final crop safety (imageDisplayRect)
+    var strictMinX = cx;
+    var strictMaxX = cx + cw;
+    var strictMinY = cy;
+    var strictMaxY = cy + ch;
+
+    // ✅ DRAG BOUNDS: Allow movement ANYWHERE in wrapper during drag
+    // Points can move freely across the entire screen for maximum flexibility
+    // They will be clamped to imageDisplayRect only on release for safe cropping
+    var wrapperRect = wrapper;
+    var overshootMinX = wrapperRect.x;
+    var overshootMaxX = wrapperRect.x + wrapperRect.width;
+    var overshootMinY = wrapperRect.y;
+    var overshootMaxY = wrapperRect.y + wrapperRect.height;
+
+    // ✅ DRAG BOUNDS: Clamp ONLY to overshootBounds during drag (NOT strictBounds)
+    var dragX = Math.max(overshootMinX, Math.min(newX, overshootMaxX));
+    var dragY = Math.max(overshootMinY, Math.min(newY, overshootMaxY));
+
+    // ✅ UPDATE POINT: Use drag bounds (overshoot) - allows visual freedom
+    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"
       });
     }
 
-    // ✅ DEBUG: Log if clamping is limiting movement
-    if (Math.abs(newY - boundedY) > 1 || Math.abs(newX - boundedX) > 1) {
-      console.log("⚠️ Movement clamped:", {
-        requested: {
-          x: newX.toFixed(2),
-          y: newY.toFixed(2)
-        },
-        clamped: {
-          x: boundedX.toFixed(2),
-          y: boundedY.toFixed(2)
-        },
-        contentRect: {
-          x: cx.toFixed(2),
-          y: cy.toFixed(2),
-          width: cw.toFixed(2),
-          height: ch.toFixed(2)
-        }
+    // 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))
       });
     }
 
-    // ✅ FREE DRAG: Update point directly
-    // - No polygon simplification
-    // - No reordering of points
-    // - No geometry normalization during drag
-    var updatedPoint = {
-      x: boundedX,
-      y: boundedY
-    };
-    // ✅ CRITICAL: Always update lastValidPosition with the clamped position
-    // This ensures that the next movement calculation uses the current (clamped) position
-    // instead of the initial position, allowing movement even after clamping
-    lastValidPosition.current = updatedPoint;
-
-    // ✅ CRITICAL: Update lastTouchPosition AFTER clamping
-    // This ensures that the next delta calculation is relative to the current touch position
-    // If the point was clamped, this allows movement in the opposite direction on the next move
+    // ✅ 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) {
-      return prev.map(function (p, i) {
-        return i === selectedPointIndex.current ? updatedPoint : p;
+      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;
+      }
+      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)
+        return {
+          x: 0,
+          y: 0
+        };
       });
+
+      // ✅ 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
+    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) {
+        var imageRectX = wrapper.x + imageRect.x;
+        var imageRectY = wrapper.y + imageRect.y;
+        var imageRectMaxX = imageRectX + imageRect.width;
+        var imageRectMaxY = imageRectY + imageRect.height;
+
+        // Clamp the dragged point back to strict image bounds
+        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(imageRectX, Math.min(point.x, imageRectMaxX)),
+            y: Math.max(imageRectY, Math.min(point.y, imageRectMaxY))
+          };
+
+          // 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: imageRectX.toFixed(2),
+                maxX: imageRectMaxX.toFixed(2),
+                minY: imageRectY.toFixed(2),
+                maxY: imageRectMaxY.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;
-    var wasDragging = selectedPointIndex.current !== null;
+    lastValidPosition.current = null;
     selectedPointIndex.current = null;
 
     // ✅ CRITICAL: Re-enable parent ScrollView scrolling when drag ends
@@ -1150,6 +1200,7 @@ var ImageCropper = function ImageCropper(_ref) {
   };
   var handleReset = function handleReset() {
     // setPoints([]);
+    hasInitializedCropBox.current = false; // ✅ CRITICAL: Reset guard to allow reinitialization
     initializeCropBox();
   };
 
@@ -1232,6 +1283,9 @@ var ImageCropper = function ImageCropper(_ref) {
           greenFrame: frameData.greenFrame,
           capturedImageSize: frameData.capturedImageSize
         };
+        // ✅ CRITICAL: Set imageSource to 'camera' IMMEDIATELY to prevent Image.getSize() from being called
+        imageSource.current = 'camera';
+        hasInitializedCropBox.current = false; // Reset guard for new camera image
         console.log("✅ Camera frame data received:", cameraFrameData.current);
       }
       setImage(uri);
@@ -1245,10 +1299,124 @@ var ImageCropper = function ImageCropper(_ref) {
     onCancel: function onCancel() {
       return setShowCustomCamera(false);
     }
-  }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !showResult && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
-    style: image ? _ImageCropperStyles["default"].buttonContainer : _ImageCropperStyles["default"].centerButtonsContainer
-  }, image && _reactNative.Platform.OS === 'android' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
-    style: _ImageCropperStyles["default"].iconButton,
+  }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: {
+      width: _reactNative.Dimensions.get('window').width,
+      aspectRatio: 9 / 16,
+      borderRadius: 30,
+      overflow: 'hidden',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative',
+      backgroundColor: 'black',
+      marginBottom: 0 // ✅ Les boutons sont maintenant en position absolue en bas
+    },
+    ref: commonWrapperRef,
+    onLayout: onCommonWrapperLayout
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    ref: viewRef,
+    collapsable: false,
+    style: _reactNative.StyleSheet.absoluteFill,
+    onStartShouldSetResponder: function onStartShouldSetResponder() {
+      return true;
+    },
+    onMoveShouldSetResponder: function onMoveShouldSetResponder(evt, gestureState) {
+      // ✅ CRITICAL: Always capture movement when a point is selected
+      // This ensures vertical movement is captured correctly
+      if (selectedPointIndex.current !== null) {
+        return true;
+      }
+      // ✅ CRITICAL: Capture ANY movement immediately (even 0px) to prevent ScrollView interception
+      // This is especially important for vertical movement which ScrollView tries to intercept
+      // We return true for ANY movement to ensure we capture it before ScrollView
+      var hasMovement = Math.abs(gestureState.dx) > 0 || Math.abs(gestureState.dy) > 0;
+      if (hasMovement && Math.abs(gestureState.dy) > 5) {
+        console.log("🔄 Vertical movement detected in responder:", {
+          dx: gestureState.dx.toFixed(2),
+          dy: gestureState.dy.toFixed(2),
+          selectedPoint: selectedPointIndex.current
+        });
+      }
+      return true;
+    },
+    onResponderGrant: function onResponderGrant(e) {
+      // ✅ CRITICAL: Grant responder immediately to prevent ScrollView from intercepting
+      // This ensures we capture all movement, especially vertical
+      // Handle tap to select point if needed
+      if (selectedPointIndex.current === null) {
+        handleTap(e);
+      }
+    },
+    onResponderStart: handleTap,
+    onResponderMove: function onResponderMove(e) {
+      // ✅ CRITICAL: Always handle move events to ensure smooth movement in all directions
+      // This is called for every move event, ensuring vertical movement is captured
+      // handleMove now uses incremental delta calculation which is more reliable
+      handleMove(e);
+    },
+    onResponderRelease: handleRelease,
+    onResponderTerminationRequest: function onResponderTerminationRequest() {
+      // ✅ CRITICAL: Never allow termination when dragging a point
+      // This prevents ScrollView from stealing the responder during vertical movement
+      return selectedPointIndex.current === null;
+    }
+    // ✅ CRITICAL: Prevent parent ScrollView from intercepting touches
+    // Capture responder BEFORE parent ScrollView can intercept
+    ,
+    onStartShouldSetResponderCapture: function onStartShouldSetResponderCapture() {
+      // Always capture start events
+      return true;
+    },
+    onMoveShouldSetResponderCapture: function onMoveShouldSetResponderCapture(evt, gestureState) {
+      // ✅ CRITICAL: Always capture movement events before parent ScrollView
+      // This is essential for vertical movement which ScrollView tries to intercept
+      // Especially important when a point is selected or when there's any movement
+      if (selectedPointIndex.current !== null) {
+        return true;
+      }
+      // ✅ CRITICAL: Capture movement BEFORE ScrollView can intercept
+      // This ensures we get vertical movement even if ScrollView tries to steal it
+      var hasMovement = Math.abs(gestureState.dx) > 0 || Math.abs(gestureState.dy) > 0;
+      return hasMovement;
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Image, {
+    source: {
+      uri: image
+    },
+    style: _ImageCropperStyles["default"].image,
+    resizeMode: (_cameraFrameData$curr3 = cameraFrameData.current) !== null && _cameraFrameData$curr3 !== void 0 && _cameraFrameData$curr3.greenFrame ? 'cover' : 'contain',
+    onLayout: onImageLayout
+  }), /*#__PURE__*/_react["default"].createElement(_reactNativeSvg["default"], {
+    style: _ImageCropperStyles["default"].overlay,
+    pointerEvents: "none"
+  }, function () {
+    // ✅ Use wrapper dimensions for SVG path (wrapper coordinates)
+    var wrapperWidth = commonWrapperLayout.current.width || _reactNative.Dimensions.get('window').width;
+    var wrapperHeight = commonWrapperLayout.current.height || _reactNative.Dimensions.get('window').width * 16 / 9;
+    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)',
+      fillRule: "evenodd"
+    }), !showResult && points.length > 0 && /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Path, {
+      d: createPath(),
+      fill: "transparent",
+      stroke: "white",
+      strokeWidth: 2
+    }), !showResult && points.map(function (point, index) {
+      return /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Circle, {
+        key: index,
+        cx: point.x,
+        cy: point.y,
+        r: 10,
+        fill: "white"
+      });
+    }));
+  }()))), !showResult && image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: [_ImageCropperStyles["default"].buttonContainerBelow, {
+      paddingBottom: Math.max(insets.bottom, 16)
+    }]
+  }, _reactNative.Platform.OS === 'android' && /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
+    style: _ImageCropperStyles["default"].rotationButton,
     onPress: function onPress() {
       return enableRotation && rotatePreviewImage(90);
     },
@@ -1257,50 +1425,36 @@ var ImageCropper = function ImageCropper(_ref) {
     name: "sync",
     size: 24,
     color: "white"
-  }))), image && /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
+  })), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
     style: _ImageCropperStyles["default"].button,
     onPress: handleReset
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
     style: _ImageCropperStyles["default"].buttonText
-  }, "Reset")), image && /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
+  }, "Reset")), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
     style: _ImageCropperStyles["default"].button,
     onPress: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-      var actualImageWidth, actualImageHeight, layout, contentRect, displayedWidth, displayedHeight, scaleX, scaleY, scale, originalUri, cropMeta, imagePoints, minX, minY, maxX, maxY, cropX, cropY, cropEndX, cropEndY, cropWidth, cropHeight, bbox, polygon, name, _t2;
+      var actualImageWidth, actualImageHeight, layout, contentRect, displayedWidth, displayedHeight, isCoverMode, scale, coverOffsetX, coverOffsetY, scaledWidth, scaledHeight, originalUri, cropMeta, imagePoints, minX, minY, maxX, maxY, cropX, cropY, cropEndX, cropEndY, cropWidth, cropHeight, bbox, polygon, name, _t2;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
           case 0:
             setIsLoading(true);
             _context2.p = 1;
             console.log("=== Starting pixel-perfect metadata export (no bitmap crop on mobile) ===");
-
-            // ✅ REFACTORISATION : Utiliser les dimensions stockées (plus efficace)
             actualImageWidth = originalImageDimensions.current.width;
-            actualImageHeight = originalImageDimensions.current.height; // Vérifier que les dimensions sont valides
+            actualImageHeight = originalImageDimensions.current.height;
             if (!(actualImageWidth === 0 || actualImageHeight === 0)) {
               _context2.n = 2;
               break;
             }
             throw new Error("Original image dimensions not available. Please wait for image to load.");
           case 2:
-            console.log("Original image dimensions:", {
-              width: actualImageWidth,
-              height: actualImageHeight
-            });
-
-            // ✅ CORRECTION : Utiliser le rectangle de contenu réel (contain)
-            // ✅ CRITICAL: Recalculate displayedContentRect if not available
             layout = displayedImageLayout.current;
-            console.log("🔍 Checking displayedContentRect before crop:", {
-              displayedContentRect: displayedContentRect.current,
-              displayedImageLayout: layout,
-              originalImageDimensions: originalImageDimensions.current
-            });
             if (layout.width > 0 && layout.height > 0) {
               updateDisplayedContentRect(layout.width, layout.height);
             }
             contentRect = displayedContentRect.current;
             displayedWidth = contentRect.width;
-            displayedHeight = contentRect.height; // Vérifier que les dimensions d'affichage sont valides
+            displayedHeight = contentRect.height;
             if (!(displayedWidth === 0 || displayedHeight === 0)) {
               _context2.n = 4;
               break;
@@ -1309,8 +1463,6 @@ var ImageCropper = function ImageCropper(_ref) {
               _context2.n = 3;
               break;
             }
-            console.warn("⚠️ displayedContentRect not available, using displayedImageLayout as fallback");
-            // Use layout dimensions as fallback (assuming no letterboxing)
             contentRect = {
               x: layout.x,
               y: layout.y,
@@ -1319,69 +1471,40 @@ var ImageCropper = function ImageCropper(_ref) {
             };
             displayedWidth = contentRect.width;
             displayedHeight = contentRect.height;
-            // Update the ref for consistency
             displayedContentRect.current = contentRect;
             _context2.n = 4;
             break;
           case 3:
-            throw new Error("Displayed image dimensions not available. Image may not be laid out yet. Please wait a moment and try again.");
+            throw new Error("Displayed image dimensions not available.");
           case 4:
-            console.log("✅ Using contentRect for crop:", contentRect);
-            console.log("Displayed image dimensions:", {
-              width: displayedWidth,
-              height: displayedHeight
-            });
-
-            // ✅ CORRECTION : avec resizeMode='contain', l'échelle est UNIFORME + offsets.
-            // Vérifier que le scale est cohérent (même ratio pour width et height)
-            scaleX = actualImageWidth / displayedWidth;
-            scaleY = actualImageHeight / displayedHeight; // Pour resizeMode='contain', scaleX et scaleY doivent être égaux
-            // Si ce n'est pas le cas, il y a un problème de calcul
-            if (Math.abs(scaleX - scaleY) > 0.01) {
-              console.warn("Scale mismatch detected! This may cause incorrect crop coordinates.", {
-                scaleX: scaleX,
-                scaleY: scaleY,
-                actualImageWidth: actualImageWidth,
-                actualImageHeight: actualImageHeight,
-                displayedWidth: displayedWidth,
-                displayedHeight: displayedHeight
-              });
+            isCoverMode = !!(cameraFrameData.current && cameraFrameData.current.greenFrame);
+            coverOffsetX = 0, coverOffsetY = 0;
+            if (isCoverMode) {
+              scale = Math.max(displayedWidth / actualImageWidth, displayedHeight / actualImageHeight);
+              scaledWidth = actualImageWidth * scale;
+              scaledHeight = actualImageHeight * scale;
+              coverOffsetX = (scaledWidth - displayedWidth) / 2;
+              coverOffsetY = (scaledHeight - displayedHeight) / 2;
+            } else {
+              scale = actualImageWidth / displayedWidth;
             }
-            scale = scaleX; // Utiliser scaleX (ou scaleY, ils devraient être égaux)
-            console.log("Scale factor (contain, uniform):", {
-              scale: scale,
-              scaleX: scaleX,
-              scaleY: scaleY,
-              contentRect: contentRect,
-              actualImageSize: {
-                width: actualImageWidth,
-                height: actualImageHeight
-              },
-              displayedSize: {
-                width: displayedWidth,
-                height: displayedHeight
-              }
-            });
             originalUri = sourceImageUri.current || image;
             cropMeta = null;
             if (points.length > 0) {
               try {
-                console.log("Calculating crop boundaries from points...");
-                console.log("Points (display coordinates):", points);
-                console.log("Content rect (offsets):", contentRect);
-
-                // ✅ CORRECTION : conversion display -> image px (contain) avec offsets
-                // S'assurer que les points sont bien dans les limites de l'image affichée
                 imagePoints = points.map(function (point) {
-                  // Clamp les coordonnées d'affichage à la zone réelle de l'image
-                  var clampedX = Math.max(contentRect.x, Math.min(point.x, contentRect.x + contentRect.width));
-                  var clampedY = Math.max(contentRect.y, Math.min(point.y, contentRect.y + contentRect.height));
-
-                  // Convertir en coordonnées de l'image originale
-                  var origX = (clampedX - contentRect.x) * scale;
-                  var origY = (clampedY - contentRect.y) * scale;
-
-                  // Clamp aux dimensions de l'image originale
+                  var clampedX, clampedY, origX, origY;
+                  if (isCoverMode) {
+                    clampedX = Math.max(0, Math.min(point.x, contentRect.width));
+                    clampedY = Math.max(0, Math.min(point.y, contentRect.height));
+                    origX = (clampedX + coverOffsetX) / scale;
+                    origY = (clampedY + coverOffsetY) / scale;
+                  } else {
+                    clampedX = Math.max(contentRect.x, Math.min(point.x, contentRect.x + contentRect.width));
+                    clampedY = Math.max(contentRect.y, Math.min(point.y, contentRect.y + contentRect.height));
+                    origX = (clampedX - contentRect.x) * scale;
+                    origY = (clampedY - contentRect.y) * scale;
+                  }
                   var finalX = Math.max(0, Math.min(origX, actualImageWidth));
                   var finalY = Math.max(0, Math.min(origY, actualImageHeight));
                   return {
@@ -1389,9 +1512,6 @@ var ImageCropper = function ImageCropper(_ref) {
                     y: finalY
                   };
                 });
-                console.log("Converted image points (original coordinates):", imagePoints);
-
-                // Calculer la bounding box : min X, min Y, max X, max Y
                 minX = Math.min.apply(Math, _toConsumableArray(imagePoints.map(function (p) {
                   return p.x;
                 })));
@@ -1403,36 +1523,20 @@ var ImageCropper = function ImageCropper(_ref) {
                 })));
                 maxY = Math.max.apply(Math, _toConsumableArray(imagePoints.map(function (p) {
                   return p.y;
-                }))); // ✅ CORRECTION : arrondi "conservateur" (floor origin + ceil end)
-                // évite de rogner des pixels et réduit le risque de crop plus petit (perte de détails).
+                })));
                 cropX = Math.max(0, Math.floor(minX));
                 cropY = Math.max(0, Math.floor(minY));
                 cropEndX = Math.min(actualImageWidth, Math.ceil(maxX));
                 cropEndY = Math.min(actualImageHeight, Math.ceil(maxY));
                 cropWidth = Math.max(0, cropEndX - cropX);
                 cropHeight = Math.max(0, cropEndY - cropY);
-                console.log("Crop parameters (pixel-perfect):", {
-                  x: cropX,
-                  y: cropY,
-                  width: cropWidth,
-                  height: cropHeight,
-                  imageWidth: actualImageWidth,
-                  imageHeight: actualImageHeight,
-                  boundingBox: {
-                    minX: minX,
-                    minY: minY,
-                    maxX: maxX,
-                    maxY: maxY
-                  }
-                });
                 if (cropWidth > 0 && cropHeight > 0) {
-                  // 1) bbox in ORIGINAL image pixel coords
                   bbox = {
                     x: cropX,
                     y: cropY,
                     width: cropWidth,
                     height: cropHeight
-                  }; // 2) polygon points relative to bbox (still in ORIGINAL pixel grid)
+                  };
                   polygon = imagePoints.map(function (point) {
                     return {
                       x: point.x - cropX,
@@ -1448,19 +1552,13 @@ var ImageCropper = function ImageCropper(_ref) {
                       height: actualImageHeight
                     }
                   };
-                  console.log("Crop meta ready:", cropMeta);
-                } else {
-                  console.warn("Invalid crop dimensions, cannot export crop meta");
                 }
               } catch (cropError) {
                 console.error("Error computing crop meta:", cropError);
               }
-            } else {
-              console.log("No crop points defined, using original image");
             }
             name = "IMAGE XTK".concat(Date.now());
             if (onConfirm) {
-              console.log("Calling onConfirm with:", originalUri, name, cropMeta);
               onConfirm(originalUri, name, cropMeta);
             }
             _context2.n = 6;
@@ -1483,120 +1581,20 @@ var ImageCropper = function ImageCropper(_ref) {
     }))
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
     style: _ImageCropperStyles["default"].buttonText
-  }, "Confirm"))), image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
-    ref: viewRef,
-    collapsable: false,
-    style: showFullScreenCapture ? _ImageCropperStyles["default"].fullscreenImageContainer : _ImageCropperStyles["default"].imageContainer,
-    onStartShouldSetResponder: function onStartShouldSetResponder() {
-      return true;
-    },
-    onMoveShouldSetResponder: function onMoveShouldSetResponder(evt, gestureState) {
-      // ✅ CRITICAL: Always capture movement when a point is selected
-      // This ensures vertical movement is captured correctly
-      if (selectedPointIndex.current !== null) {
-        return true;
-      }
-      // ✅ CRITICAL: Capture ANY movement immediately (even 0px) to prevent ScrollView interception
-      // This is especially important for vertical movement which ScrollView tries to intercept
-      // We return true for ANY movement to ensure we capture it before ScrollView
-      var hasMovement = Math.abs(gestureState.dx) > 0 || Math.abs(gestureState.dy) > 0;
-      if (hasMovement && Math.abs(gestureState.dy) > 5) {
-        console.log("🔄 Vertical movement detected in responder:", {
-          dx: gestureState.dx.toFixed(2),
-          dy: gestureState.dy.toFixed(2),
-          selectedPoint: selectedPointIndex.current
-        });
-      }
-      return true;
-    },
-    onResponderGrant: function onResponderGrant(e) {
-      // ✅ CRITICAL: Grant responder immediately to prevent ScrollView from intercepting
-      // This ensures we capture all movement, especially vertical
-      // Handle tap to select point if needed
-      if (selectedPointIndex.current === null) {
-        handleTap(e);
-      }
-    },
-    onResponderStart: handleTap,
-    onResponderMove: function onResponderMove(e) {
-      // ✅ CRITICAL: Always handle move events to ensure smooth movement in all directions
-      // This is called for every move event, ensuring vertical movement is captured
-      // handleMove now uses incremental delta calculation which is more reliable
-      handleMove(e);
-    },
-    onResponderRelease: handleRelease,
-    onResponderTerminationRequest: function onResponderTerminationRequest() {
-      // ✅ CRITICAL: Never allow termination when dragging a point
-      // This prevents ScrollView from stealing the responder during vertical movement
-      return selectedPointIndex.current === null;
-    }
-    // ✅ CRITICAL: Prevent parent ScrollView from intercepting touches
-    // Capture responder BEFORE parent ScrollView can intercept
-    ,
-    onStartShouldSetResponderCapture: function onStartShouldSetResponderCapture() {
-      // Always capture start events
-      return true;
-    },
-    onMoveShouldSetResponderCapture: function onMoveShouldSetResponderCapture(evt, gestureState) {
-      // ✅ CRITICAL: Always capture movement events before parent ScrollView
-      // This is essential for vertical movement which ScrollView tries to intercept
-      // Especially important when a point is selected or when there's any movement
-      if (selectedPointIndex.current !== null) {
-        return true;
-      }
-      // Also capture if there's any movement to prevent ScrollView from intercepting
-      var hasMovement = Math.abs(gestureState.dx) > 0 || Math.abs(gestureState.dy) > 0;
-      if (hasMovement && Math.abs(gestureState.dy) > 2) {
-        console.log("🔄 Capturing vertical movement before ScrollView:", {
-          dy: gestureState.dy.toFixed(2)
-        });
-      }
-      return hasMovement;
-    }
-    // ✅ CRITICAL: Prevent ScrollView from scrolling by stopping propagation
-    ,
-    onResponderReject: function onResponderReject() {
-      console.warn("⚠️ Responder rejected - ScrollView may intercept");
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Image, {
-    source: {
-      uri: image
-    },
-    style: _ImageCropperStyles["default"].image,
-    onLayout: onImageLayout
-  }), /*#__PURE__*/_react["default"].createElement(_reactNativeSvg["default"], {
-    style: _ImageCropperStyles["default"].overlay,
-    pointerEvents: "none"
-  }, /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Path, {
-    d: "M 0 0 H ".concat(imageMeasure.current.width, " V ").concat(imageMeasure.current.height, " H 0 Z ").concat(createPath()),
-    fill: showResult ? 'white' : 'rgba(0, 0, 0, 0.8)',
-    fillRule: "evenodd"
-  }), !showResult && points.length > 0 && /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Path, {
-    d: createPath(),
-    fill: "transparent",
-    stroke: "white",
-    strokeWidth: 2
-  }), !showResult && points.map(function (point, index) {
-    return /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Circle, {
-      key: index,
-      cx: point.x,
-      cy: point.y,
-      r: 10,
-      fill: "white"
-    });
-  })))), showMaskView && maskImageUri && maskPoints.length > 0 && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+  }, "Confirm"))), !showResult && !image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: _ImageCropperStyles["default"].centerButtonsContainer
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+    style: _ImageCropperStyles["default"].welcomeText
+  }, "S\xE9lectionnez une image"))), showMaskView && maskImageUri && maskPoints.length > 0 && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: {
       position: 'absolute',
       left: -maskDimensions.width - 100,
-      // Hors écran mais pas trop loin
       top: -maskDimensions.height - 100,
       width: maskDimensions.width,
       height: maskDimensions.height,
       opacity: 1,
-      // Opacité normale pour la capture
       pointerEvents: 'none',
       zIndex: 9999,
-      // Z-index élevé pour s'assurer qu'elle est au-dessus
       overflow: 'hidden'
     },
     collapsable: false