react-native-expo-cropper 1.2.36 → 1.2.37

package/dist/ImageCropper.js

@@ -1,514 +1,1621 @@
-"use strict";
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-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 _ImageProcessor = require("./ImageProcessor");
-var ImageManipulator = _interopRequireWildcard(require("expo-image-manipulator"));
-var _vectorIcons = require("@expo/vector-icons");
-var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t4 in e) "default" !== _t4 && {}.hasOwnProperty.call(e, _t4) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t4)) && (i.get || i.set) ? o(f, _t4, i) : f[_t4] = e[_t4]); return f; })(e, t); }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
-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 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; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-var ImageCropper = function ImageCropper(_ref) {
-  var onConfirm = _ref.onConfirm,
-    openCameraFirst = _ref.openCameraFirst,
-    initialImage = _ref.initialImage,
-    addheight = _ref.addheight;
-  var _useState = (0, _react.useState)(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    image = _useState2[0],
-    setImage = _useState2[1];
-  var _useState3 = (0, _react.useState)([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    points = _useState4[0],
-    setPoints = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    showResult = _useState6[0],
-    setShowResult = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    showCustomCamera = _useState8[0],
-    setShowCustomCamera = _useState8[1];
-  var viewRef = (0, _react.useRef)(null);
-  var imageMeasure = (0, _react.useRef)({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0
-  });
-  var selectedPointIndex = (0, _react.useRef)(null);
-  var lastTap = (0, _react.useRef)(null);
-  var _useState9 = (0, _react.useState)(false),
-    _useState0 = _slicedToArray(_useState9, 2),
-    isLoading = _useState0[0],
-    setIsLoading = _useState0[1];
-  var _useState1 = (0, _react.useState)(false),
-    _useState10 = _slicedToArray(_useState1, 2),
-    showFullScreenCapture = _useState10[0],
-    setShowFullScreenCapture = _useState10[1];
-  var _useState11 = (0, _react.useState)(false),
-    _useState12 = _slicedToArray(_useState11, 2),
-    isRotating = _useState12[0],
-    setIsRotating = _useState12[1];
-  var lastValidPosition = (0, _react.useRef)(null);
-  var insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  (0, _react.useEffect)(function () {
-    if (openCameraFirst) {
-      setShowCustomCamera(true);
-    } else if (initialImage) {
-      setImage(initialImage);
-    }
-  }, [openCameraFirst, initialImage]);
-  (0, _react.useEffect)(function () {
-    if (!image) return;
-    _reactNative.Image.getSize(image, function (imgWidth, imgHeight) {
-      var screenRatio = SCREEN_WIDTH / SCREEN_HEIGHT;
-      var imageRatio = imgWidth / imgHeight;
-      if (imageRatio > screenRatio) {
-        imageMeasure.current = {
-          width: SCREEN_WIDTH,
-          height: SCREEN_WIDTH / imageRatio
-        };
-      } else {
-        imageMeasure.current = {
-          width: SCREEN_HEIGHT * imageRatio,
-          height: SCREEN_HEIGHT
-        };
-      }
-    });
-  }, [image]);
-  var initializeCropBox = function initializeCropBox() {
-    var _imageMeasure$current = imageMeasure.current,
-      width = _imageMeasure$current.width,
-      height = _imageMeasure$current.height;
-    // if (width === 0 || height === 0 || points.length > 0) return;
-    var boxWidth = width * 0.8;
-    var boxHeight = height * 0.8;
-    var centerX = width / 2;
-    var centerY = height / 2;
-    setPoints([{
-      x: centerX - boxWidth / 2,
-      y: centerY - boxHeight / 2
-    }, {
-      x: centerX + boxWidth / 2,
-      y: centerY - boxHeight / 2
-    }, {
-      x: centerX + boxWidth / 2,
-      y: centerY + boxHeight / 2
-    }, {
-      x: centerX - boxWidth / 2,
-      y: centerY + boxHeight / 2
-    }]);
-  };
-  var onImageLayout = function onImageLayout(e) {
-    var layout = e.nativeEvent.layout;
-    imageMeasure.current = {
-      x: layout.x,
-      y: layout.y,
-      width: layout.width,
-      height: layout.height
-    };
-    initializeCropBox();
-  };
-  var createPath = function createPath() {
-    if (points.length < 1) return '';
-    var path = "M ".concat(points[0].x, " ").concat(points[0].y, " ");
-    points.forEach(function (point) {
-      return path += "L ".concat(point.x, " ").concat(point.y, " ");
-    });
-    return path + 'Z';
-  };
-  var handleTap = function handleTap(e) {
-    if (!image || showResult) return;
-    var now = Date.now();
-    var _e$nativeEvent = e.nativeEvent,
-      tapX = _e$nativeEvent.locationX,
-      tapY = _e$nativeEvent.locationY;
-    if (lastTap.current && now - lastTap.current < 300) {
-      var exists = points.some(function (p) {
-        return Math.abs(p.x - tapX) < 15 && Math.abs(p.y - tapY) < 15;
-      });
-      if (!exists) setPoints([].concat(_toConsumableArray(points), [{
-        x: tapX,
-        y: tapY
-      }]));
-      lastTap.current = null;
-    } else {
-      var index = points.findIndex(function (p) {
-        return Math.abs(p.x - tapX) < 20 && Math.abs(p.y - tapY) < 20;
-      });
-      if (index !== -1) {
-        selectedPointIndex.current = index;
-        lastValidPosition.current = _objectSpread({}, points[index]); // store original position before move
-      }
-      lastTap.current = now;
-    }
-  };
-  var handleMove = function handleMove(e) {
-    if (showResult || selectedPointIndex.current === null) return;
-    var _e$nativeEvent2 = e.nativeEvent,
-      moveX = _e$nativeEvent2.locationX,
-      moveY = _e$nativeEvent2.locationY;
-    var width = imageMeasure.current.width;
-    var height = imageMeasure.current.height;
-    var boundedX = Math.max(0, Math.min(moveX, width));
-    var boundedY = Math.max(0, Math.min(moveY, height));
-    var edgeThreshold = 10;
-    var isNearTopOrBottomEdge = boundedY <= edgeThreshold || boundedY >= height - edgeThreshold;
-    var isNearLeftOrRightEdge = boundedX <= edgeThreshold || boundedX >= width - edgeThreshold;
-    if (isNearTopOrBottomEdge || isNearLeftOrRightEdge) {
-      // Reset point to last known position
-      if (lastValidPosition.current && selectedPointIndex.current !== null) {
-        setPoints(function (prev) {
-          return prev.map(function (p, i) {
-            return i === selectedPointIndex.current ? lastValidPosition.current : p;
-          });
-        });
-      }
-      selectedPointIndex.current = null;
-      return;
-    }
-
-    // Valid move — update point and store as new last valid position
-    var updatedPoint = {
-      x: boundedX,
-      y: boundedY
-    };
-    lastValidPosition.current = updatedPoint;
-    setPoints(function (prev) {
-      return prev.map(function (p, i) {
-        return i === selectedPointIndex.current ? updatedPoint : p;
-      });
-    });
-  };
-  var handleRelease = function handleRelease() {
-    selectedPointIndex.current = null;
-  };
-  var handleReset = function handleReset() {
-    // setPoints([]);
-    initializeCropBox();
-  };
-  var rotatePreviewImage = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(degrees) {
-      var rotated, _t;
-      return _regenerator().w(function (_context) {
-        while (1) switch (_context.p = _context.n) {
-          case 0:
-            if (!(!image || isRotating)) {
-              _context.n = 1;
-              break;
-            }
-            return _context.a(2);
-          case 1:
-            setIsRotating(true);
-            _context.p = 2;
-            _context.n = 3;
-            return ImageManipulator.manipulateAsync(image, [{
-              rotate: degrees
-            }], {
-              compress: 0.85,
-              format: ImageManipulator.SaveFormat.JPEG
-            });
-          case 3:
-            rotated = _context.v;
-            // Update image - onImageLayout will call initializeCropBox automatically
-            setImage(rotated.uri);
-            _context.n = 5;
-            break;
-          case 4:
-            _context.p = 4;
-            _t = _context.v;
-            console.error("Error rotating image:", _t);
-            alert("Error rotating image");
-          case 5:
-            _context.p = 5;
-            setIsRotating(false);
-            return _context.f(5);
-          case 6:
-            return _context.a(2);
-        }
-      }, _callee, null, [[2, 4, 5, 6]]);
-    }));
-    return function rotatePreviewImage(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-
-  // Helper function to wait for multiple render cycles (works on iOS)
-  var waitForRender = function waitForRender() {
-    var cycles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 5;
-    return new Promise(function (resolve) {
-      var count = 0;
-      var _tick = function tick() {
-        count++;
-        if (count >= cycles) {
-          resolve();
-        } else {
-          setImmediate(_tick);
-        }
-      };
-      setImmediate(_tick);
-    });
-  };
-  return /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
-    style: _ImageCropperStyles["default"].container
-  }, showCustomCamera ? /*#__PURE__*/_react["default"].createElement(_CustomCamera["default"], {
-    onPhotoCaptured: function onPhotoCaptured(uri) {
-      setImage(uri);
-      setShowCustomCamera(false);
-    },
-    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,
-    onPress: function onPress() {
-      return rotatePreviewImage(90);
-    },
-    disabled: isRotating
-  }, /*#__PURE__*/_react["default"].createElement(_vectorIcons.Ionicons, {
-    name: "sync",
-    size: 24,
-    color: "white"
-  }))), image && /*#__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, {
-    style: _ImageCropperStyles["default"].button,
-    onPress: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-      var capturedUri, enhancedUri, croppedUri, enhancedImageInfo, actualImageWidth, actualImageHeight, displayedWidth, displayedHeight, scaleX, scaleY, imagePoints, minX, minY, maxX, maxY, cropX, cropY, cropWidth, cropHeight, croppedResult, name, _t2, _t3;
-      return _regenerator().w(function (_context2) {
-        while (1) switch (_context2.p = _context2.n) {
-          case 0:
-            // setShowFullScreenCapture(true); 
-            setIsLoading(true);
-            setShowResult(true);
-            _context2.p = 1;
-            if (!(_reactNative.Platform.OS === 'android')) {
-              _context2.n = 3;
-              break;
-            }
-            _context2.n = 2;
-            return new Promise(function (resolve) {
-              return requestAnimationFrame(resolve);
-            });
-          case 2:
-            _context2.n = 4;
-            break;
-          case 3:
-            _context2.n = 4;
-            return waitForRender(5);
-          case 4:
-            console.log("Starting capture...");
-            _context2.n = 5;
-            return (0, _reactNativeViewShot.captureRef)(viewRef, {
-              format: 'png',
-              quality: 1
-            });
-          case 5:
-            capturedUri = _context2.v;
-            console.log("Capture successful:", capturedUri);
-            if (capturedUri) {
-              _context2.n = 6;
-              break;
-            }
-            throw new Error("Capture returned empty URI");
-          case 6:
-            console.log("Enhancing image...");
-            _context2.n = 7;
-            return (0, _ImageProcessor.enhanceImage)(capturedUri, addheight);
-          case 7:
-            enhancedUri = _context2.v;
-            console.log("Image enhanced:", enhancedUri);
-
-            // Crop image based on points
-            croppedUri = enhancedUri;
-            if (!(points.length > 0)) {
-              _context2.n = 14;
-              break;
-            }
-            _context2.p = 8;
-            console.log("Calculating crop boundaries from points...");
-
-            // Get enhanced image dimensions
-            _context2.n = 9;
-            return ImageManipulator.manipulateAsync(enhancedUri, []);
-          case 9:
-            enhancedImageInfo = _context2.v;
-            actualImageWidth = enhancedImageInfo.width;
-            actualImageHeight = enhancedImageInfo.height; // Get displayed image dimensions
-            displayedWidth = imageMeasure.current.width;
-            displayedHeight = imageMeasure.current.height; // Calculate scale factors to convert screen coordinates to image coordinates
-            scaleX = actualImageWidth / displayedWidth;
-            scaleY = actualImageHeight / displayedHeight; // Convert points from screen coordinates to actual image coordinates
-            imagePoints = points.map(function (point) {
-              return {
-                x: point.x * scaleX,
-                y: point.y * scaleY
-              };
-            }); // Calculate bounding box: min X, min Y, max X, max Y
-            minX = Math.min.apply(Math, _toConsumableArray(imagePoints.map(function (p) {
-              return p.x;
-            })));
-            minY = Math.min.apply(Math, _toConsumableArray(imagePoints.map(function (p) {
-              return p.y;
-            })));
-            maxX = Math.max.apply(Math, _toConsumableArray(imagePoints.map(function (p) {
-              return p.x;
-            })));
-            maxY = Math.max.apply(Math, _toConsumableArray(imagePoints.map(function (p) {
-              return p.y;
-            }))); // Calculate crop dimensions and origin
-            cropX = Math.max(0, Math.floor(minX));
-            cropY = Math.max(0, Math.floor(minY));
-            cropWidth = Math.min(actualImageWidth - cropX, Math.ceil(maxX - minX));
-            cropHeight = Math.min(actualImageHeight - cropY, Math.ceil(maxY - minY));
-            console.log("Crop parameters:", {
-              x: cropX,
-              y: cropY,
-              width: cropWidth,
-              height: cropHeight,
-              imageWidth: actualImageWidth,
-              imageHeight: actualImageHeight
-            });
-
-            // Crop the image
-            if (!(cropWidth > 0 && cropHeight > 0)) {
-              _context2.n = 11;
-              break;
-            }
-            _context2.n = 10;
-            return ImageManipulator.manipulateAsync(enhancedUri, [{
-              crop: {
-                originX: cropX,
-                originY: cropY,
-                width: cropWidth,
-                height: cropHeight
-              }
-            }], {
-              compress: 1,
-              format: ImageManipulator.SaveFormat.PNG,
-              base64: false
-            });
-          case 10:
-            croppedResult = _context2.v;
-            croppedUri = croppedResult.uri;
-            console.log("Image cropped successfully:", croppedUri);
-            _context2.n = 12;
-            break;
-          case 11:
-            console.warn("Invalid crop dimensions, using enhanced image");
-          case 12:
-            _context2.n = 14;
-            break;
-          case 13:
-            _context2.p = 13;
-            _t2 = _context2.v;
-            console.error("Error cropping image:", _t2);
-            // Continue with enhanced image if cropping fails
-          case 14:
-            name = "IMAGE XTK".concat(Date.now(), ".png");
-            if (onConfirm) {
-              console.log("Calling onConfirm with:", croppedUri, name);
-              onConfirm(croppedUri, name);
-            }
-            _context2.n = 16;
-            break;
-          case 15:
-            _context2.p = 15;
-            _t3 = _context2.v;
-            console.error("Erreur lors de la capture :", _t3);
-            alert("Erreur lors de la capture ! " + _t3.message);
-          case 16:
-            _context2.p = 16;
-            setShowResult(false);
-            setIsLoading(false);
-            setShowFullScreenCapture(false);
-            return _context2.f(16);
-          case 17:
-            return _context2.a(2);
-        }
-      }, _callee2, null, [[8, 13], [1, 15, 16, 17]]);
-    }))
-  }, /*#__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;
-    },
-    onResponderStart: handleTap,
-    onResponderMove: handleMove,
-    onResponderRelease: handleRelease
-  }, /*#__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
-  }, /*#__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"
-    });
-  })))), /*#__PURE__*/_react["default"].createElement(_reactNative.Modal, {
-    visible: isLoading,
-    transparent: true,
-    animationType: "fade"
-  }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
-    style: _ImageCropperStyles["default"].loadingOverlay
-  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Image, {
-    source: require('../src/assets/loadingCamera.gif'),
-    style: _ImageCropperStyles["default"].loadingGif,
-    resizeMode: "contain"
-  }))));
-};
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+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");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t3 in e) "default" !== _t3 && {}.hasOwnProperty.call(e, _t3) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t3)) && (i.get || i.set) ? o(f, _t3, i) : f[_t3] = e[_t3]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+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 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; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var ImageCropper = function ImageCropper(_ref) {
+  var onConfirm = _ref.onConfirm,
+    openCameraFirst = _ref.openCameraFirst,
+    initialImage = _ref.initialImage,
+    addheight = _ref.addheight;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    image = _useState2[0],
+    setImage = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    points = _useState4[0],
+    setPoints = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showResult = _useState6[0],
+    setShowResult = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showCustomCamera = _useState8[0],
+    setShowCustomCamera = _useState8[1];
+  var viewRef = (0, _react.useRef)(null);
+  var maskViewRef = (0, _react.useRef)(null); // Ref pour la vue de masque (invisible)
+  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
+
+  // ✅ REFACTORISATION : Séparation claire entre dimensions originales et affichage
+  // Dimensions réelles de l'image originale (pixels)
+  var originalImageDimensions = (0, _react.useRef)({
+    width: 0,
+    height: 0
+  });
+  // Dimensions et position d'affichage à l'écran (pour le calcul des points de crop)
+  var displayedImageLayout = (0, _react.useRef)({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  // Conserver imageMeasure pour compatibilité avec le code existant (utilisé pour SVG overlay)
+  var imageMeasure = (0, _react.useRef)({
+    x: 0,
+    y: 0,
+    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)({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  var updateDisplayedContentRect = function updateDisplayedContentRect(layoutWidth, layoutHeight) {
+    var iw = originalImageDimensions.current.width;
+    var ih = originalImageDimensions.current.height;
+    console.log("🔄 updateDisplayedContentRect called:", {
+      originalDimensions: {
+        width: iw,
+        height: ih
+      },
+      layoutDimensions: {
+        width: layoutWidth,
+        height: layoutHeight
+      }
+    });
+    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 = {
+        x: offsetX,
+        y: offsetY,
+        width: contentW,
+        height: contentH
+      };
+      console.log("✅ Displayed content rect (contain) calculated:", displayedContentRect.current);
+      return;
+    }
+
+    // ✅ FALLBACK: If original dimensions not available yet, use layout as temporary measure
+    if (layoutWidth > 0 && layoutHeight > 0) {
+      displayedContentRect.current = {
+        x: 0,
+        y: 0,
+        width: layoutWidth,
+        height: layoutHeight
+      };
+      console.log("⚠️ Using layout dimensions as fallback (original dimensions not available yet):", displayedContentRect.current);
+    } else {
+      displayedContentRect.current = {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+      };
+      console.warn("❌ Cannot calculate displayedContentRect: missing dimensions");
+    }
+  };
+  var selectedPointIndex = (0, _react.useRef)(null);
+  var lastTap = (0, _react.useRef)(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
+
+  // Angle de rotation accumulé (pour éviter les rotations multiples)
+  var rotationAngle = (0, _react.useRef)(0);
+
+  // États pour la vue de masque temporaire
+  var _useState9 = (0, _react.useState)(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    maskImageUri = _useState0[0],
+    setMaskImageUri = _useState0[1];
+  var _useState1 = (0, _react.useState)([]),
+    _useState10 = _slicedToArray(_useState1, 2),
+    maskPoints = _useState10[0],
+    setMaskPoints = _useState10[1];
+  var _useState11 = (0, _react.useState)({
+      width: 0,
+      height: 0
+    }),
+    _useState12 = _slicedToArray(_useState11, 2),
+    maskDimensions = _useState12[0],
+    setMaskDimensions = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    showMaskView = _useState14[0],
+    setShowMaskView = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    isLoading = _useState16[0],
+    setIsLoading = _useState16[1];
+  var _useState17 = (0, _react.useState)(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    showFullScreenCapture = _useState18[0],
+    setShowFullScreenCapture = _useState18[1];
+  var _useState19 = (0, _react.useState)(false),
+    _useState20 = _slicedToArray(_useState19, 2),
+    isRotating = _useState20[0],
+    setIsRotating = _useState20[1];
+  var lastValidPosition = (0, _react.useRef)(null);
+  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.
+
+  (0, _react.useEffect)(function () {
+    if (openCameraFirst) {
+      setShowCustomCamera(true);
+    } else if (initialImage) {
+      setImage(initialImage);
+      sourceImageUri.current = initialImage;
+      // ✅ CRITICAL: Reset points when loading a new image from gallery
+      // This ensures the crop box will be automatically initialized
+      setPoints([]);
+      rotationAngle.current = 0;
+      // Clear camera frame data for gallery images
+      cameraFrameData.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.
+  (0, _react.useEffect)(function () {
+    if (!image) {
+      originalImageDimensions.current = {
+        width: 0,
+        height: 0
+      };
+      return;
+    }
+    if (!sourceImageUri.current) {
+      sourceImageUri.current = image;
+    }
+
+    // ✅ CRITICAL FIX: If we have capturedImageSize from camera, use it as source of truth
+    // takePictureAsync returns physical dimensions, while Image.getSize() may return EXIF-oriented dimensions
+    if (cameraFrameData.current && cameraFrameData.current.capturedImageSize) {
+      var _cameraFrameData$curr = cameraFrameData.current.capturedImageSize,
+        capturedWidth = _cameraFrameData$curr.width,
+        capturedHeight = _cameraFrameData$curr.height;
+      originalImageDimensions.current = {
+        width: capturedWidth,
+        height: capturedHeight
+      };
+      console.log("✅ Using captured image dimensions from takePictureAsync:", {
+        width: capturedWidth,
+        height: capturedHeight,
+        source: 'takePictureAsync'
+      });
+      // ✅ 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) {
+          initializeCropBox();
+        }
+      }
+      return;
+    }
+
+    // ✅ FALLBACK: Use Image.getSize() if no captured dimensions available (e.g., from gallery)
+    _reactNative.Image.getSize(image, function (imgWidth, imgHeight) {
+      originalImageDimensions.current = {
+        width: imgWidth,
+        height: imgHeight
+      };
+      console.log("✅ Image dimensions from Image.getSize():", {
+        width: imgWidth,
+        height: imgHeight,
+        platform: _reactNative.Platform.OS,
+        pixelRatio: _reactNative.PixelRatio.get(),
+        uri: image,
+        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) {
+          initializeCropBox();
+        }
+      }
+    }, function (error) {
+      console.error("Error getting image size:", error);
+    });
+  }, [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;
+    }
+    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;
+    }
+
+    // ✅ 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)
+      }
+    });
+    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));
+
+    // ✅ 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;
+  };
+
+  // ✅ 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;
+
+    // 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 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;
+        }
+      }
+    }
+    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));
+        }
+
+        // ✅ 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
+        };
+
+        // ✅ 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;
+      }
+    }
+
+    // ✅ 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,
+      points: newPoints
+    });
+    setPoints(newPoints);
+  };
+
+  // ✅ REFACTORISATION : Mettre à jour les dimensions d'affichage et les dimensions pour SVG
+  var onImageLayout = function onImageLayout(e) {
+    var layout = e.nativeEvent.layout;
+
+    // Stocker les dimensions d'affichage réelles (pour conversion de coordonnées)
+    displayedImageLayout.current = {
+      x: layout.x,
+      y: layout.y,
+      width: layout.width,
+      height: layout.height
+    };
+
+    // Conserver aussi dans imageMeasure pour compatibilité avec SVG overlay
+    imageMeasure.current = {
+      x: layout.x,
+      y: layout.y,
+      width: layout.width,
+      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);
+    console.log("Displayed image layout updated:", {
+      width: layout.width,
+      height: layout.height,
+      x: layout.x,
+      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) {
+        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
+        initializeCropBox();
+      }
+    }
+  };
+  var createPath = function createPath() {
+    if (points.length < 1) return '';
+    var path = "M ".concat(points[0].x, " ").concat(points[0].y, " ");
+    points.forEach(function (point) {
+      return path += "L ".concat(point.x, " ").concat(point.y, " ");
+    });
+    return path + 'Z';
+  };
+  var handleTap = function handleTap(e) {
+    if (!image || showResult) return;
+    var now = Date.now();
+    var _e$nativeEvent = e.nativeEvent,
+      tapX = _e$nativeEvent.locationX,
+      tapY = _e$nativeEvent.locationY;
+
+    // ✅ CRITICAL: Ensure displayedContentRect is available
+    var contentRect = displayedContentRect.current;
+    var layout = displayedImageLayout.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 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 handle tap: no layout dimensions 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;
+      });
+      if (index !== -1) {
+        selectedPointIndex.current = index;
+        // ✅ FREE DRAG: Store initial positions for delta-based movement
+        initialTouchPosition.current = {
+          x: tapX,
+          y: tapY
+        };
+        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
+        }
+      }
+      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;
+
+    // ✅ Validate coordinates
+    if (currentX === undefined || currentY === undefined || isNaN(currentX) || isNaN(currentY)) {
+      console.warn("⚠️ Cannot get touch coordinates", {
+        locationX: nativeEvent.locationX,
+        locationY: nativeEvent.locationY
+      });
+      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) {
+      // Calculate incremental delta from last touch position
+      deltaX = currentX - lastTouchPosition.current.x;
+      deltaY = currentY - lastTouchPosition.current.y;
+    } else if (initialTouchPosition.current) {
+      // Fallback to absolute delta if lastTouchPosition not set
+      deltaX = currentX - initialTouchPosition.current.x;
+      deltaY = currentY - initialTouchPosition.current.y;
+    } else {
+      console.warn("⚠️ No touch position reference available");
+      return;
+    }
+
+    // ✅ 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;
+
+    // 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 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 move point: no layout dimensions available");
+          return;
+        }
+      }
+    }
+
+    // ✅ FREE DRAG: Ensure initial positions are set
+    if (!initialPointPosition.current) {
+      var currentPoint = points[selectedPointIndex.current];
+      if (currentPoint) {
+        initialPointPosition.current = _objectSpread({}, currentPoint);
+      } else {
+        console.warn("⚠️ No point found for selected index");
+        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
+      });
+    }
+
+    // ✅ 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
+      });
+    }
+
+    // ✅ 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)
+        }
+      });
+    }
+
+    // ✅ 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
+    lastTouchPosition.current = {
+      x: currentX,
+      y: currentY
+    };
+    setPoints(function (prev) {
+      return prev.map(function (p, i) {
+        return i === selectedPointIndex.current ? updatedPoint : p;
+      });
+    });
+  };
+  var handleRelease = function handleRelease() {
+    // ✅ FREE DRAG: Clear initial positions when drag ends
+    initialTouchPosition.current = null;
+    initialPointPosition.current = null;
+    var wasDragging = selectedPointIndex.current !== null;
+    selectedPointIndex.current = null;
+
+    // ✅ CRITICAL: Re-enable parent ScrollView scrolling when drag ends
+    if (wasDragging) {
+      try {
+        // Re-enable scrolling after a short delay to avoid conflicts
+        setTimeout(function () {
+          // ScrollView will be re-enabled automatically when responder is released
+        }, 100);
+      } catch (e) {
+        // Ignore errors
+      }
+    }
+  };
+  var handleReset = function handleReset() {
+    // setPoints([]);
+    initializeCropBox();
+  };
+
+  // ✅ REFACTORISATION : Stocker l'angle de rotation au lieu de modifier l'image immédiatement
+  // La rotation sera appliquée uniquement lors du crop final pour éviter les interpolations multiples
+  var rotatePreviewImage = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(degrees) {
+      var rotated, _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            if (!(!image || isRotating)) {
+              _context.n = 1;
+              break;
+            }
+            return _context.a(2);
+          case 1:
+            setIsRotating(true);
+            _context.p = 2;
+            // ✅ CORRECTION : appliquer la rotation de façon incrémentale sur le fichier (pas cumulée sur un fichier déjà roté).
+            // L'ancienne version rotait l'image déjà rotée par l'angle total, ce qui donnait des rotations incorrectes (90 + 180 => 270).
+            rotationAngle.current = (rotationAngle.current + degrees) % 360;
+            _context.n = 3;
+            return ImageManipulator.manipulateAsync(image, [{
+              rotate: degrees
+            }], {
+              compress: 1,
+              // Qualité maximale (pas de compression)
+              format: ImageManipulator.SaveFormat.PNG // Format sans perte
+            });
+          case 3:
+            rotated = _context.v;
+            // Update image pour l'aperçu - onImageLayout will call initializeCropBox automatically
+            setImage(rotated.uri);
+            console.log("Rotation applied (preview increment):", degrees, "degrees; accumulated:", rotationAngle.current);
+            _context.n = 5;
+            break;
+          case 4:
+            _context.p = 4;
+            _t = _context.v;
+            console.error("Error rotating image:", _t);
+            alert("Error rotating image");
+          case 5:
+            _context.p = 5;
+            setIsRotating(false);
+            return _context.f(5);
+          case 6:
+            return _context.a(2);
+        }
+      }, _callee, null, [[2, 4, 5, 6]]);
+    }));
+    return function rotatePreviewImage(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  // Helper function to wait for multiple render cycles (works on iOS)
+  var waitForRender = function waitForRender() {
+    var cycles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 5;
+    return new Promise(function (resolve) {
+      var count = 0;
+      var _tick = function tick() {
+        count++;
+        if (count >= cycles) {
+          resolve();
+        } else {
+          setImmediate(_tick);
+        }
+      };
+      setImmediate(_tick);
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: _ImageCropperStyles["default"].container
+  }, showCustomCamera ? /*#__PURE__*/_react["default"].createElement(_CustomCamera["default"], {
+    onPhotoCaptured: function onPhotoCaptured(uri, frameData) {
+      // ✅ CRITICAL FIX: Store green frame coordinates for coordinate conversion
+      if (frameData && frameData.greenFrame) {
+        cameraFrameData.current = {
+          greenFrame: frameData.greenFrame,
+          capturedImageSize: frameData.capturedImageSize
+        };
+        console.log("✅ Camera frame data received:", cameraFrameData.current);
+      }
+      setImage(uri);
+      setShowCustomCamera(false);
+      // ✅ CORRECTION : Réinitialiser les points et l'angle de rotation quand une nouvelle photo est capturée
+      setPoints([]);
+      rotationAngle.current = 0;
+      // ✅ CRITICAL: initializeCropBox will be called automatically when image layout is ready
+      // The green frame coordinates are stored in cameraFrameData.current and will be used
+    },
+    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,
+    onPress: function onPress() {
+      return enableRotation && rotatePreviewImage(90);
+    },
+    disabled: isRotating
+  }, /*#__PURE__*/_react["default"].createElement(_vectorIcons.Ionicons, {
+    name: "sync",
+    size: 24,
+    color: "white"
+  }))), image && /*#__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, {
+    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;
+      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
+            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
+            if (!(displayedWidth === 0 || displayedHeight === 0)) {
+              _context2.n = 4;
+              break;
+            }
+            if (!(layout.width > 0 && layout.height > 0)) {
+              _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,
+              width: layout.width,
+              height: layout.height
+            };
+            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.");
+          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
+              });
+            }
+            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 finalX = Math.max(0, Math.min(origX, actualImageWidth));
+                  var finalY = Math.max(0, Math.min(origY, actualImageHeight));
+                  return {
+                    x: finalX,
+                    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;
+                })));
+                minY = Math.min.apply(Math, _toConsumableArray(imagePoints.map(function (p) {
+                  return p.y;
+                })));
+                maxX = Math.max.apply(Math, _toConsumableArray(imagePoints.map(function (p) {
+                  return p.x;
+                })));
+                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,
+                      y: point.y - cropY
+                    };
+                  });
+                  cropMeta = {
+                    bbox: bbox,
+                    polygon: polygon,
+                    rotation: 0,
+                    imageSize: {
+                      width: actualImageWidth,
+                      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;
+            break;
+          case 5:
+            _context2.p = 5;
+            _t2 = _context2.v;
+            console.error("Erreur lors du crop :", _t2);
+            alert("Erreur lors du crop ! " + _t2.message);
+          case 6:
+            _context2.p = 6;
+            setShowResult(false);
+            setIsLoading(false);
+            setShowFullScreenCapture(false);
+            return _context2.f(6);
+          case 7:
+            return _context2.a(2);
+        }
+      }, _callee2, null, [[1, 5, 6, 7]]);
+    }))
+  }, /*#__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, {
+    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
+  }, /*#__PURE__*/_react["default"].createElement(_ImageMaskProcessor.MaskView, {
+    ref: maskViewRef,
+    imageUri: maskImageUri,
+    points: maskPoints,
+    width: maskDimensions.width,
+    height: maskDimensions.height
+  })), /*#__PURE__*/_react["default"].createElement(_reactNative.Modal, {
+    visible: isLoading,
+    transparent: true,
+    animationType: "fade"
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: _ImageCropperStyles["default"].loadingOverlay
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Image, {
+    source: require('../src/assets/loadingCamera.gif'),
+    style: _ImageCropperStyles["default"].loadingGif,
+    resizeMode: "contain"
+  }))));
+};
 var _default = exports["default"] = ImageCropper;