react-native-expo-cropper 1.2.36 → 1.2.38

package/dist/ImageCropper.js

@@ -1,514 +1,1701 @@
-"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 _CustomCamera = _interopRequireDefault(require("./CustomCamera"));
+var ImageManipulator = _interopRequireWildcard(require("expo-image-manipulator"));
+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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _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 _cameraFrameData$curr3;
+  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
+
+  // ✅ RÉFÉRENTIEL UNIQUE : Wrapper commun 9/16 (identique à CustomCamera)
+  // Ce wrapper est utilisé dans CustomCamera ET ImageCropper pour garantir pixel-perfect matching
+  var commonWrapperRef = (0, _react.useRef)(null);
+  var commonWrapperLayout = (0, _react.useRef)({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+
+  // ✅ REFACTORISATION : Séparation claire entre dimensions originales et affichage
+  // Dimensions réelles de l'image originale (pixels)
+  var originalImageDimensions = (0, _react.useRef)({
+    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
+  });
+  // ✅ imageDisplayRect : Rectangle réel de l'image affichée (quand resizeMode='contain') à l'intérieur du wrapper commun
+  // C'est la zone où l'image est réellement visible (avec letterboxing si nécessaire)
+  // Les points de crop DOIVENT rester dans cette zone pour éviter de cropper hors de l'image
+  var imageDisplayRect = (0, _react.useRef)({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+
+  // ✅ COMPATIBILITÉ : displayedContentRect reste pour le code existant, mais pointe vers imageDisplayRect
+  var displayedContentRect = imageDisplayRect;
+
+  // ✅ RÉFÉRENTIEL UNIQUE : Calculer imageDisplayRect à l'intérieur du wrapper commun
+  // - CAMERA: use "cover" mode → image fills wrapper, imageDisplayRect = full wrapper (same as preview)
+  // - GALLERY: use "contain" mode → imageDisplayRect = letterboxed area
+  var updateImageDisplayRect = function updateImageDisplayRect(wrapperWidth, wrapperHeight) {
+    var iw = originalImageDimensions.current.width;
+    var ih = originalImageDimensions.current.height;
+
+    // ✅ CAMERA IMAGE: Use full wrapper so green frame and white frame show same content
+    if (cameraFrameData.current && cameraFrameData.current.greenFrame && wrapperWidth > 0 && wrapperHeight > 0) {
+      imageDisplayRect.current = {
+        x: 0,
+        y: 0,
+        width: wrapperWidth,
+        height: wrapperHeight
+      };
+      console.log("✅ Image display rect (COVER mode for camera - full wrapper):", imageDisplayRect.current);
+      return;
+    }
+    console.log("🔄 updateImageDisplayRect called:", {
+      originalDimensions: {
+        width: iw,
+        height: ih
+      },
+      wrapperDimensions: {
+        width: wrapperWidth,
+        height: wrapperHeight
+      }
+    });
+    if (iw > 0 && ih > 0 && wrapperWidth > 0 && wrapperHeight > 0) {
+      // Calculer comment l'image s'affiche en "contain" dans le wrapper (gallery)
+      var scale = Math.min(wrapperWidth / iw, wrapperHeight / ih);
+      var imageDisplayWidth = iw * scale;
+      var imageDisplayHeight = ih * scale;
+      var offsetX = (wrapperWidth - imageDisplayWidth) / 2;
+      var offsetY = (wrapperHeight - imageDisplayHeight) / 2;
+      imageDisplayRect.current = {
+        x: offsetX,
+        y: offsetY,
+        width: imageDisplayWidth,
+        height: imageDisplayHeight
+      };
+      console.log("✅ Image display rect (contain in wrapper) calculated:", {
+        wrapper: {
+          width: wrapperWidth,
+          height: wrapperHeight
+        },
+        imageDisplayRect: imageDisplayRect.current,
+        scale: scale.toFixed(4)
+      });
+      return;
+    }
+    if (wrapperWidth > 0 && wrapperHeight > 0) {
+      imageDisplayRect.current = {
+        x: 0,
+        y: 0,
+        width: wrapperWidth,
+        height: wrapperHeight
+      };
+      console.log("⚠️ Using wrapper dimensions as fallback (original dimensions not available yet):", imageDisplayRect.current);
+    } else {
+      imageDisplayRect.current = {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+      };
+      console.warn("❌ Cannot calculate imageDisplayRect: missing dimensions");
+    }
+  };
+
+  // ✅ COMPATIBILITÉ : Alias pour le code existant
+  var updateDisplayedContentRect = updateImageDisplayRect;
+  var selectedPointIndex = (0, _react.useRef)(null);
+  var lastTap = (0, _react.useRef)(null);
+
+  // ✅ CRITICAL: Guard to prevent double crop box initialization
+  // This ensures crop box is initialized only once, especially for camera images
+  var hasInitializedCropBox = (0, _react.useRef)(false);
+  var imageSource = (0, _react.useRef)(null); // 'camera' | 'gallery' | null
+
+  // ✅ FREE DRAG: Store initial touch position and point position for delta-based movement
+  var initialTouchPosition = (0, _react.useRef)(null); // { x, y } - initial touch position when drag starts
+  var initialPointPosition = (0, _react.useRef)(null); // { x, y } - initial point position when drag starts
+  var lastTouchPosition = (0, _react.useRef)(null); // { x, y } - last touch position for incremental delta calculation
+
+  // ✅ CRITICAL: dragBase stores the VISUAL position (can be overshoot) during drag
+  // This ensures smooth continuous drag without "dead zones" at boundaries
+  // dragBase is updated with applied position (overshoot) after each movement
+  // and is used as base for next delta calculation
+  var dragBase = (0, _react.useRef)(null); // { x, y } - visual position during drag (can be overshoot)
+
+  // ✅ NEW APPROACH: touchOffset stores the initial offset between point and touch
+  // This eliminates delta accumulation issues and "dead zones"
+  // Once set at drag start, it remains constant throughout the drag
+  var touchOffset = (0, _react.useRef)(null); // { x, y } - offset = pointPosition - touchPosition
+
+  // ✅ Track if point was clamped in previous frame (to detect transition)
+  var wasClampedLastFrame = (0, _react.useRef)({
+    x: false,
+    y: false
+  });
+
+  // Angle de rotation accumulé (pour éviter les rotations multiples)
+  var rotationAngle = (0, _react.useRef)(0);
+
+  // É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.
+
+  // 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;
+      // ✅ CRITICAL: Reset initialization guard for new image
+      hasInitializedCropBox.current = false;
+      imageSource.current = null;
+    }
+  }, [openCameraFirst, initialImage]);
+
+  // ✅ REFACTORISATION : Stocker uniquement les dimensions originales (pas de calcul théorique)
+  // ✅ CRITICAL FIX: Single source of truth for image dimensions
+
+  (0, _react.useEffect)(function () {
+    if (!image) {
+      originalImageDimensions.current = {
+        width: 0,
+        height: 0
+      };
+      hasInitializedCropBox.current = false;
+      imageSource.current = null;
+      return;
+    }
+    if (!sourceImageUri.current) {
+      sourceImageUri.current = image;
+    }
+
+    // ✅ CRITICAL FIX #1: If we have capturedImageSize from camera, use it as SINGLE SOURCE OF TRUTH
+    // takePictureAsync returns physical dimensions, while Image.getSize() may return EXIF-oriented dimensions
+    // DO NOT call Image.getSize() for camera images - it can return swapped dimensions on Android
+    if (cameraFrameData.current && cameraFrameData.current.capturedImageSize) {
+      var _cameraFrameData$curr = cameraFrameData.current.capturedImageSize,
+        capturedWidth = _cameraFrameData$curr.width,
+        capturedHeight = _cameraFrameData$curr.height;
+      originalImageDimensions.current = {
+        width: capturedWidth,
+        height: capturedHeight
+      };
+      imageSource.current = 'camera';
+      hasInitializedCropBox.current = false; // Reset guard for new camera image
+
+      console.log("✅ Using captured image dimensions from takePictureAsync (SINGLE SOURCE OF TRUTH):", {
+        width: capturedWidth,
+        height: capturedHeight,
+        source: 'takePictureAsync',
+        note: 'Image.getSize() will NOT be called for camera images'
+      });
+
+      // ✅ CRITICAL: Recalculate imageDisplayRect immediately with camera dimensions
+      var wrapper = commonWrapperLayout.current;
+      if (wrapper.width > 0 && wrapper.height > 0) {
+        updateImageDisplayRect(wrapper.width, wrapper.height);
+
+        // ✅ CRITICAL FIX #2: Initialize crop box immediately when cameraFrameData is available
+        // This ensures camera images are initialized from greenFrame BEFORE any other initialization
+        if (cameraFrameData.current && cameraFrameData.current.greenFrame && !hasInitializedCropBox.current) {
+          console.log("✅ Initializing crop box from cameraFrameData (immediate in useEffect):", {
+            hasGreenFrame: !!cameraFrameData.current.greenFrame,
+            wrapper: wrapper,
+            originalDimensions: originalImageDimensions.current
+          });
+          initializeCropBox();
+        }
+      }
+      return; // ✅ CRITICAL: Exit early - DO NOT call Image.getSize()
+    }
+
+    // ✅ FALLBACK: Use Image.getSize() ONLY for gallery images (no cameraFrameData)
+    // BUT: Check again right before calling to avoid race condition
+    if (cameraFrameData.current && cameraFrameData.current.capturedImageSize) {
+      console.log("⚠️ cameraFrameData exists, skipping Image.getSize() call");
+      return;
+    }
+
+    // ✅ CRITICAL: Also check imageSource - if it's 'camera', don't call Image.getSize()
+    if (imageSource.current === 'camera') {
+      console.log("⚠️ imageSource is 'camera', skipping Image.getSize() call");
+      return;
+    }
+
+    // ✅ CRITICAL: Set imageSource to 'gallery' ONLY if we're sure it's not a camera image
+    // Don't set it yet - we'll set it in the callback after verifying
+    hasInitializedCropBox.current = false; // Reset guard for new image
+
+    _reactNative.Image.getSize(image, function (imgWidth, imgHeight) {
+      // ✅ CRITICAL SAFETY #1: Check if cameraFrameData appeared while Image.getSize() was resolving
+      // This is the PRIMARY check - cameraFrameData takes precedence
+      if (cameraFrameData.current && cameraFrameData.current.capturedImageSize) {
+        console.warn("⚠️ Image.getSize() resolved but cameraFrameData exists - IGNORING Image.getSize() result to prevent dimension swap");
+        console.warn("⚠️ Camera dimensions (correct):", cameraFrameData.current.capturedImageSize);
+        console.warn("⚠️ Image.getSize() dimensions (potentially swapped):", {
+          width: imgWidth,
+          height: imgHeight
+        });
+        return; // ✅ CRITICAL: Exit early - do NOT update dimensions or initialize crop box
+      }
+
+      // ✅ CRITICAL SAFETY #2: Check imageSource (should be 'camera' if cameraFrameData was set)
+      if (imageSource.current === 'camera') {
+        console.warn("⚠️ Image.getSize() resolved but imageSource is 'camera' - IGNORING Image.getSize() result");
+        console.warn("⚠️ Image.getSize() dimensions (potentially swapped):", {
+          width: imgWidth,
+          height: imgHeight
+        });
+        return; // ✅ CRITICAL: Exit early - do NOT update dimensions or initialize crop box
+      }
+
+      // ✅ CRITICAL SAFETY #3: Check if crop box was already initialized (from camera)
+      if (hasInitializedCropBox.current) {
+        console.warn("⚠️ Image.getSize() resolved but crop box already initialized - IGNORING result to prevent double initialization");
+        return;
+      }
+
+      // ✅ SAFE: This is a gallery image, proceed with Image.getSize() result
+      imageSource.current = 'gallery';
+      originalImageDimensions.current = {
+        width: imgWidth,
+        height: imgHeight
+      };
+      console.log("✅ Image dimensions from Image.getSize() (gallery image):", {
+        width: imgWidth,
+        height: imgHeight,
+        platform: _reactNative.Platform.OS,
+        pixelRatio: _reactNative.PixelRatio.get(),
+        uri: image,
+        source: 'Image.getSize()'
+      });
+
+      // ✅ RÉFÉRENTIEL UNIQUE : Recalculer imageDisplayRect dans le wrapper commun
+      // dès qu'on connaît la taille originale de l'image
+      var wrapper = commonWrapperLayout.current;
+      if (wrapper.width > 0 && wrapper.height > 0) {
+        updateImageDisplayRect(wrapper.width, wrapper.height);
+        // ✅ IMPORTANT: pour les images de la galerie (pas de cameraFrameData),
+        // initialiser automatiquement le cadre blanc (70% du wrapper) une fois que
+        // nous connaissons à la fois le wrapper et les dimensions originales.
+        // ✅ CRITICAL: Guard against double initialization
+        if (!hasInitializedCropBox.current && points.length === 0 && imageSource.current === 'gallery') {
+          initializeCropBox();
+          hasInitializedCropBox.current = true;
+        }
+      }
+    }, function (error) {
+      console.error("Error getting image size:", error);
+    });
+  }, [image]);
+
+  // Le cadre blanc doit être calculé sur le MÊME wrapper que le cadre vert (9/16)
+  // Ensuite, on restreint les points pour qu'ils restent dans imageDisplayRect (image visible)
+  var initializeCropBox = function initializeCropBox() {
+    // ✅ CRITICAL FIX #2: Guard against double initialization
+    if (hasInitializedCropBox.current) {
+      console.log("⚠️ Crop box already initialized, skipping duplicate initialization");
+      return;
+    }
+
+    // ✅ CRITICAL: Ensure common wrapper layout is available
+    var wrapper = commonWrapperLayout.current;
+    if (wrapper.width === 0 || wrapper.height === 0) {
+      console.warn("Cannot initialize crop box: common wrapper layout not ready");
+      return;
+    }
+
+    // ✅ CRITICAL: Ensure imageDisplayRect is available (zone réelle de l'image dans le wrapper)
+    var imageRect = imageDisplayRect.current;
+    if (imageRect.width === 0 || imageRect.height === 0) {
+      // Recalculer si nécessaire
+      if (originalImageDimensions.current.width > 0 && originalImageDimensions.current.height > 0) {
+        updateImageDisplayRect(wrapper.width, wrapper.height);
+        imageRect = imageDisplayRect.current;
+      } else {
+        console.warn("Cannot initialize crop box: imageDisplayRect not available (original dimensions missing)");
+        return;
+      }
+    }
+
+    // ✅ CRITICAL FIX: Calculate crop box as percentage of VISIBLE IMAGE AREA (imageDisplayRect)
+    // NOT the wrapper. This ensures the crop box is truly 80% of the image, not 80% of wrapper then clamped.
+    // Calculate absolute position of imageDisplayRect within wrapper
+    var imageRectX = wrapper.x + imageRect.x;
+    var imageRectY = wrapper.y + imageRect.y;
+
+    // ✅ PRIORITY RULE #3: IF image comes from camera → Use EXACT green frame coordinates
+    // Image is displayed in "cover" mode (full wrapper), so green frame coords = white frame coords
+    if (cameraFrameData.current && cameraFrameData.current.greenFrame && originalImageDimensions.current.width > 0) {
+      var greenFrame = cameraFrameData.current.greenFrame;
+
+      // ✅ Image fills wrapper (cover mode), so use green frame position directly in wrapper space
+      var _boxX = wrapper.x + greenFrame.x;
+      var _boxY = wrapper.y + greenFrame.y;
+      var _boxWidth = greenFrame.width;
+      var _boxHeight = greenFrame.height;
+
+      // ✅ SAFETY: Validate calculated coordinates before creating points
+      var _isValidCoordinate = function _isValidCoordinate(val) {
+        return typeof val === 'number' && isFinite(val) && !isNaN(val);
+      };
+      if (!_isValidCoordinate(_boxX) || !_isValidCoordinate(_boxY) || !_isValidCoordinate(_boxWidth) || !_isValidCoordinate(_boxHeight)) {
+        console.warn("⚠️ Invalid coordinates calculated for crop box, skipping initialization");
+        return;
+      }
+
+      // ✅ Create points using EXACT greenFrame coordinates (mapped to ImageCropper wrapper)
+      var _newPoints = [{
+        x: _boxX,
+        y: _boxY
+      },
+      // Top-left
+      {
+        x: _boxX + _boxWidth,
+        y: _boxY
+      },
+      // Top-right
+      {
+        x: _boxX + _boxWidth,
+        y: _boxY + _boxHeight
+      },
+      // Bottom-right
+      {
+        x: _boxX,
+        y: _boxY + _boxHeight
+      } // Bottom-left
+      ];
+
+      // ✅ SAFETY: Validate all points before setting
+      var _validPoints = _newPoints.filter(function (p) {
+        return _isValidCoordinate(p.x) && _isValidCoordinate(p.y);
+      });
+      if (_validPoints.length !== _newPoints.length) {
+        console.warn("⚠️ Some points have invalid coordinates, skipping initialization");
+        return;
+      }
+      console.log("✅ Initializing crop box for camera image (COVER MODE - exact green frame):", {
+        greenFrame: {
+          x: greenFrame.x,
+          y: greenFrame.y,
+          width: greenFrame.width,
+          height: greenFrame.height
+        },
+        whiteFrame: {
+          x: _boxX.toFixed(2),
+          y: _boxY.toFixed(2),
+          width: _boxWidth.toFixed(2),
+          height: _boxHeight.toFixed(2)
+        },
+        note: "Image in cover mode - white frame = same position/size as green frame, same content"
+      });
+      setPoints(_newPoints);
+      hasInitializedCropBox.current = true; // ✅ CRITICAL: Mark as initialized
+      // ✅ CRITICAL: DO NOT nullify cameraFrameData here - keep it for Image.getSize() callback check
+      // It will be cleared when loading a new image
+      return;
+    }
+
+    // ✅ PRIORITY RULE #3: DEFAULT logic ONLY for gallery images (NOT camera)
+    // If we reach here and imageSource is 'camera', something went wrong
+    if (imageSource.current === 'camera') {
+      console.warn("⚠️ Camera image but no greenFrame found - this should not happen");
+      return;
+    }
+
+    // ✅ DEFAULT: Crop box (70% of VISIBLE IMAGE AREA - centered) - ONLY for gallery images
+    var boxWidth = imageRect.width * 0.70; // 70% of visible image width
+    var boxHeight = imageRect.height * 0.70; // 70% of visible image height
+    var boxX = imageRectX + (imageRect.width - boxWidth) / 2; // Centered in image area
+    var boxY = imageRectY + (imageRect.height - boxHeight) / 2; // Centered in image area
+
+    // ✅ SAFETY: Validate calculated coordinates before creating points
+    var isValidCoordinate = function isValidCoordinate(val) {
+      return typeof val === 'number' && isFinite(val) && !isNaN(val);
+    };
+    if (!isValidCoordinate(boxX) || !isValidCoordinate(boxY) || !isValidCoordinate(boxWidth) || !isValidCoordinate(boxHeight)) {
+      console.warn("⚠️ Invalid coordinates calculated for default crop box, skipping initialization");
+      return;
+    }
+    var newPoints = [{
+      x: boxX,
+      y: boxY
+    }, {
+      x: boxX + boxWidth,
+      y: boxY
+    }, {
+      x: boxX + boxWidth,
+      y: boxY + boxHeight
+    }, {
+      x: boxX,
+      y: boxY + boxHeight
+    }];
+
+    // ✅ SAFETY: Validate all points before setting
+    var validPoints = newPoints.filter(function (p) {
+      return isValidCoordinate(p.x) && isValidCoordinate(p.y);
+    });
+    if (validPoints.length !== newPoints.length) {
+      console.warn("⚠️ Some points have invalid coordinates in default crop box, skipping initialization");
+      return;
+    }
+    console.log("✅ Initializing crop box (default - 70% of visible image area, gallery only):", {
+      wrapper: {
+        width: wrapper.width,
+        height: wrapper.height
+      },
+      imageDisplayRect: imageRect,
+      boxInImage: {
+        x: boxX,
+        y: boxY,
+        width: boxWidth,
+        height: boxHeight
+      },
+      points: newPoints
+    });
+    setPoints(newPoints);
+    hasInitializedCropBox.current = true; // ✅ CRITICAL: Mark as initialized
+  };
+
+  // ✅ RÉFÉRENTIEL UNIQUE : Callback pour mettre à jour le layout du wrapper commun
+  // Ce wrapper a exactement les mêmes dimensions que le wrapper de CustomCamera (9/16, width = screenWidth)
+  var onCommonWrapperLayout = function onCommonWrapperLayout(e) {
+    var layout = e.nativeEvent.layout;
+    commonWrapperLayout.current = {
+      x: layout.x,
+      y: layout.y,
+      width: layout.width,
+      height: layout.height
+    };
+    console.log("✅ Common wrapper layout updated:", commonWrapperLayout.current);
+
+    // ✅ Recalculer imageDisplayRect dès que le wrapper est prêt
+    if (originalImageDimensions.current.width > 0 && originalImageDimensions.current.height > 0) {
+      updateImageDisplayRect(layout.width, layout.height);
+
+      // ✅ CRITICAL FIX #2: Initialize crop box ONLY if not already initialized
+      // For camera images: initialize ONLY from greenFrame (already done when cameraFrameData was set)
+      if (!hasInitializedCropBox.current && points.length === 0) {
+        // ✅ CRITICAL: Only initialize for gallery images here
+        // Camera images should be initialized when cameraFrameData is set, not here
+        if (imageSource.current !== 'camera') {
+          initializeCropBox();
+        }
+      }
+    }
+  };
+
+  // ✅ REFACTORISATION : Mettre à jour les dimensions d'affichage et les dimensions pour SVG
+  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
+    };
+
+    // ✅ Si l'image vient de la caméra et que les dimensions originales ne sont pas encore définies,
+    // les initialiser à partir de cameraFrameData AVANT de calculer le contentRect.
+    if (originalImageDimensions.current.width === 0 && cameraFrameData.current && cameraFrameData.current.capturedImageSize) {
+      var _cameraFrameData$curr2 = cameraFrameData.current.capturedImageSize,
+        width = _cameraFrameData$curr2.width,
+        height = _cameraFrameData$curr2.height;
+      originalImageDimensions.current = {
+        width: width,
+        height: height
+      };
+      console.log("✅ originalImageDimensions initialisées depuis cameraFrameData dans onImageLayout:", {
+        width: width,
+        height: height
+      });
+    }
+
+    // ✅ RÉFÉRENTIEL UNIQUE : Recalculer imageDisplayRect dans le wrapper commun
+    // Si le wrapper commun n'est pas encore prêt, on attendra onCommonWrapperLayout
+    var wrapper = commonWrapperLayout.current;
+    if (wrapper.width > 0 && wrapper.height > 0) {
+      updateImageDisplayRect(wrapper.width, wrapper.height);
+    }
+    console.log("Displayed image layout updated:", {
+      width: layout.width,
+      height: layout.height,
+      x: layout.x,
+      y: layout.y
+    });
+
+    // ✅ CRITICAL FIX #2: Do NOT initialize crop box in onImageLayout for camera images
+    // Camera images should be initialized ONLY when cameraFrameData is set (in useEffect)
+    // Gallery images can be initialized here if not already done
+    if (wrapper.width > 0 && wrapper.height > 0 && layout.width > 0 && layout.height > 0 && !hasInitializedCropBox.current && points.length === 0 && originalImageDimensions.current.width > 0 && originalImageDimensions.current.height > 0) {
+      // ✅ CRITICAL: Only initialize for gallery images here
+      // Camera images should be initialized when cameraFrameData is set, not here
+      if (imageSource.current !== 'camera') {
+        initializeCropBox();
+      } else if (cameraFrameData.current && cameraFrameData.current.greenFrame) {
+        // ✅ For camera images, initialize ONLY if greenFrame is available
+        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';
+  };
+
+  // ✅ Helper function: Find closest point on a line segment to a tap point
+  var findClosestPointOnLine = function findClosestPointOnLine(tapX, tapY, lineStartX, lineStartY, lineEndX, lineEndY) {
+    var dx = lineEndX - lineStartX;
+    var dy = lineEndY - lineStartY;
+    var lengthSquared = dx * dx + dy * dy;
+    if (lengthSquared === 0) {
+      // Line segment is a point
+      return {
+        x: lineStartX,
+        y: lineStartY,
+        distance: Math.sqrt(Math.pow(tapX - lineStartX, 2) + Math.pow(tapY - lineStartY, 2))
+      };
+    }
+
+    // Calculate projection parameter t (0 to 1)
+    var t = Math.max(0, Math.min(1, ((tapX - lineStartX) * dx + (tapY - lineStartY) * dy) / lengthSquared));
+
+    // Calculate closest point on line segment
+    var closestX = lineStartX + t * dx;
+    var closestY = lineStartY + t * dy;
+
+    // Calculate distance from tap to closest point
+    var distance = Math.sqrt(Math.pow(tapX - closestX, 2) + Math.pow(tapY - closestY, 2));
+    return {
+      x: closestX,
+      y: closestY,
+      distance: distance,
+      t: t
+    };
+  };
+
+  // ✅ Helper function: Check if tap is near any line segment and find closest point
+  var findClosestPointOnFrame = function findClosestPointOnFrame(tapX, tapY) {
+    var lineTolerance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 30;
+    if (points.length < 2) return null;
+    var closestPoint = null;
+    var minDistance = Infinity;
+    var insertIndex = -1;
+
+    // Check each line segment (closed polygon: last point connects to first)
+    for (var i = 0; i < points.length; i++) {
+      var start = points[i];
+      var end = points[(i + 1) % points.length];
+      var result = findClosestPointOnLine(tapX, tapY, start.x, start.y, end.x, end.y);
+      if (result.distance < minDistance && result.distance < lineTolerance) {
+        minDistance = result.distance;
+        closestPoint = {
+          x: result.x,
+          y: result.y
+        };
+        // Insert after the start point of this segment
+        insertIndex = i + 1;
+      }
+    }
+    return closestPoint ? {
+      point: closestPoint,
+      insertIndex: insertIndex
+    } : null;
+  };
+  var handleTap = function handleTap(e) {
+    if (!image || showResult) return;
+    var now = Date.now();
+    var _e$nativeEvent = e.nativeEvent,
+      tapX = _e$nativeEvent.locationX,
+      tapY = _e$nativeEvent.locationY;
+
+    // ✅ RÉFÉRENTIEL UNIQUE : Utiliser imageDisplayRect (zone réelle de l'image dans le wrapper)
+    // Les coordonnées du tap sont relatives au wrapper commun
+    var imageRect = imageDisplayRect.current;
+    var wrapper = commonWrapperLayout.current;
+
+    // Recalculate if not available
+    if (imageRect.width === 0 || imageRect.height === 0) {
+      if (wrapper.width > 0 && wrapper.height > 0 && originalImageDimensions.current.width > 0) {
+        updateImageDisplayRect(wrapper.width, wrapper.height);
+        imageRect = imageDisplayRect.current;
+      }
+      // If still not available, use wrapper as fallback
+      if (imageRect.width === 0 || imageRect.height === 0) {
+        if (wrapper.width > 0 && wrapper.height > 0) {
+          imageRect = {
+            x: wrapper.x,
+            y: wrapper.y,
+            width: wrapper.width,
+            height: wrapper.height
+          };
+        } else {
+          console.warn("⚠️ Cannot handle tap: wrapper or imageDisplayRect not available");
+          return;
+        }
+      }
+    }
+
+    // ✅ Clamp to real displayed image content (imageDisplayRect dans le wrapper)
+    // Les coordonnées tapX/tapY sont relatives au wrapper commun
+    var imageRectX = wrapper.x + imageRect.x;
+    var imageRectY = wrapper.y + imageRect.y;
+    var _x$y$width$height = {
+        x: imageRectX,
+        y: imageRectY,
+        width: imageRect.width,
+        height: imageRect.height
+      },
+      cx = _x$y$width$height.x,
+      cy = _x$y$width$height.y,
+      cw = _x$y$width$height.width,
+      ch = _x$y$width$height.height;
+    // ✅ Larger select radius for easier point selection (especially on touch screens)
+    var selectRadius = 50; // Increased from 28 to 50 for better UX
+
+    // ✅ CRITICAL: Check for existing point selection FIRST (using raw tap coordinates)
+    // Don't clamp tapX/Y for point selection - points can be anywhere in wrapper now
+    var index = points.findIndex(function (p) {
+      return Math.abs(p.x - tapX) < selectRadius && Math.abs(p.y - tapY) < selectRadius;
+    });
+    if (index !== -1) {
+      // ✅ Point found - select it for dragging
+      selectedPointIndex.current = index;
+
+      // Store initial positions
+      initialTouchPosition.current = {
+        x: tapX,
+        y: tapY
+      };
+      lastTouchPosition.current = {
+        x: tapX,
+        y: tapY
+      };
+      initialPointPosition.current = _objectSpread({}, points[index]);
+      lastValidPosition.current = _objectSpread({}, points[index]);
+
+      // Calculate offset between point and touch at drag start
+      touchOffset.current = {
+        x: points[index].x - tapX,
+        y: points[index].y - tapY
+      };
+      console.log("🎯 DRAG START - Offset calculated:", {
+        pointX: points[index].x.toFixed(2),
+        pointY: points[index].y.toFixed(2),
+        touchX: tapX.toFixed(2),
+        touchY: tapY.toFixed(2),
+        offsetX: touchOffset.current.x.toFixed(2),
+        offsetY: touchOffset.current.y.toFixed(2)
+      });
+
+      // Disable parent ScrollView scrolling when dragging
+      try {
+        var _findScrollView = function findScrollView(node) {
+          if (!node) return null;
+          if (node._component && node._component.setNativeProps) {
+            node._component.setNativeProps({
+              scrollEnabled: false
+            });
+          }
+          return _findScrollView(node._owner || node._parent);
+        };
+      } catch (e) {
+        // Ignore errors
+      }
+    } else {
+      // ✅ No point found - check if double-tap on a line to create new point
+      var isDoubleTap = lastTap.current && now - lastTap.current < 300;
+      if (isDoubleTap && points.length >= 2) {
+        // Find closest point on frame lines
+        var lineResult = findClosestPointOnFrame(tapX, tapY, 30); // 30px tolerance
+
+        if (lineResult) {
+          var point = lineResult.point,
+            insertIndex = lineResult.insertIndex;
+
+          // Check if a point already exists very close to this position
+          var exists = points.some(function (p) {
+            return Math.abs(p.x - point.x) < selectRadius && Math.abs(p.y - point.y) < selectRadius;
+          });
+          if (!exists) {
+            // Insert new point at the correct position in the polygon
+            var newPoints = _toConsumableArray(points);
+            newPoints.splice(insertIndex, 0, point);
+            setPoints(newPoints);
+            console.log("✅ New point created on frame line:", {
+              tap: {
+                x: tapX.toFixed(2),
+                y: tapY.toFixed(2)
+              },
+              newPoint: {
+                x: point.x.toFixed(2),
+                y: point.y.toFixed(2)
+              },
+              insertIndex: insertIndex,
+              totalPoints: newPoints.length
+            });
+            lastTap.current = null; // Reset to prevent triple-tap
+            return;
+          }
+        }
+      }
+    }
+    lastTap.current = now;
+  };
+  var handleMove = function handleMove(e) {
+    if (showResult || selectedPointIndex.current === null) return;
+
+    // ✅ FREE DRAG: Use delta-based movement for smooth, unconstrained dragging
+
+    var nativeEvent = e.nativeEvent;
+    var currentX = nativeEvent.locationX;
+    var currentY = nativeEvent.locationY;
+
+    // ✅ Validate coordinates
+    if (currentX === undefined || currentY === undefined || isNaN(currentX) || isNaN(currentY)) {
+      console.warn("⚠️ Cannot get touch coordinates", {
+        locationX: nativeEvent.locationX,
+        locationY: nativeEvent.locationY
+      });
+      return;
+    }
+
+    // This is more reliable when ScrollView affects coordinate updates
+    var deltaX, deltaY;
+    if (lastTouchPosition.current) {
+      // Calculate incremental delta from last touch position
+      deltaX = currentX - lastTouchPosition.current.x;
+      deltaY = currentY - lastTouchPosition.current.y;
+    } else if (initialTouchPosition.current) {
+      // Fallback to absolute delta if lastTouchPosition not set
+      deltaX = currentX - initialTouchPosition.current.x;
+      deltaY = currentY - initialTouchPosition.current.y;
+    } else {
+      console.warn("⚠️ No touch position reference available");
+      return;
+    }
+
+    // Les coordonnées de mouvement sont relatives au wrapper commun
+    var imageRect = imageDisplayRect.current;
+    var wrapper = commonWrapperLayout.current;
+
+    // Recalculate if not available
+    if (imageRect.width === 0 || imageRect.height === 0) {
+      if (wrapper.width > 0 && wrapper.height > 0 && originalImageDimensions.current.width > 0) {
+        updateImageDisplayRect(wrapper.width, wrapper.height);
+        imageRect = imageDisplayRect.current;
+      }
+      // If still not available, use wrapper as fallback
+      if (imageRect.width === 0 || imageRect.height === 0) {
+        if (wrapper.width > 0 && wrapper.height > 0) {
+          imageRect = {
+            x: wrapper.x,
+            y: wrapper.y,
+            width: wrapper.width,
+            height: wrapper.height
+          };
+        } else {
+          console.warn("⚠️ Cannot move point: wrapper or imageDisplayRect not available");
+          return;
+        }
+      }
+    }
+
+    // ✅ CRITICAL: Calculate absolute bounds of imageDisplayRect within the wrapper
+    // imageRect is relative to wrapper, so we need to add wrapper offset
+    var imageRectX = wrapper.x + imageRect.x;
+    var imageRectY = wrapper.y + imageRect.y;
+    var contentRect = {
+      x: imageRectX,
+      y: imageRectY,
+      width: imageRect.width,
+      height: imageRect.height
+    };
+
+    // ✅ FREE DRAG: Ensure initial positions are set
+    if (!initialPointPosition.current) {
+      var currentPoint = points[selectedPointIndex.current];
+      if (currentPoint && typeof currentPoint.x === 'number' && typeof currentPoint.y === 'number') {
+        initialPointPosition.current = _objectSpread({}, currentPoint);
+      } else {
+        console.warn("⚠️ No point found for selected index or invalid point data");
+        return;
+      }
+    }
+
+    // ✅ NEW APPROACH: Use touchOffset to map touch position directly to point position
+    // This eliminates delta accumulation and "dead zone" issues completely
+    if (!touchOffset.current) {
+      console.warn("⚠️ touchOffset not initialized, cannot move point");
+      return;
+    }
+
+    // ✅ DIRECT MAPPING: newPosition = touchPosition + offset
+    // No delta accumulation, no zone morte
+    var newX = currentX + touchOffset.current.x;
+    var newY = currentY + touchOffset.current.y;
+
+    // ✅ SEPARATE DRAG BOUNDS vs CROP BOUNDS
+    var cx = contentRect.x,
+      cy = contentRect.y,
+      cw = contentRect.width,
+      ch = contentRect.height;
+
+    // ✅ STRICT BOUNDS: For final crop safety (imageDisplayRect)
+    var strictMinX = cx;
+    var strictMaxX = cx + cw;
+    var strictMinY = cy;
+    var strictMaxY = cy + ch;
+
+    // ✅ DRAG BOUNDS: Allow movement ANYWHERE in wrapper during drag
+    // Points can move freely across the entire screen for maximum flexibility
+    // They will be clamped to imageDisplayRect only on release for safe cropping
+    var wrapperRect = wrapper;
+    var overshootMinX = wrapperRect.x;
+    var overshootMaxX = wrapperRect.x + wrapperRect.width;
+    var overshootMinY = wrapperRect.y;
+    var overshootMaxY = wrapperRect.y + wrapperRect.height;
+
+    // ✅ DRAG BOUNDS: Clamp ONLY to overshootBounds during drag (NOT strictBounds)
+    var dragX = Math.max(overshootMinX, Math.min(newX, overshootMaxX));
+    var dragY = Math.max(overshootMinY, Math.min(newY, overshootMaxY));
+
+    // ✅ UPDATE POINT: Use drag bounds (overshoot) - allows visual freedom
+    var updatedPoint = {
+      x: dragX,
+      y: dragY
+    };
+
+    // ✅ CRITICAL: Detect if point is AT overshoot boundary (not just clamped)
+    // Check if point is exactly at overshootMin/Max (within 1px tolerance)
+    var isAtOvershootMinX = Math.abs(dragX - overshootMinX) < 1;
+    var isAtOvershootMaxX = Math.abs(dragX - overshootMaxX) < 1;
+    var isAtOvershootMinY = Math.abs(dragY - overshootMinY) < 1;
+    var isAtOvershootMaxY = Math.abs(dragY - overshootMaxY) < 1;
+    var isAtBoundaryX = isAtOvershootMinX || isAtOvershootMaxX;
+    var isAtBoundaryY = isAtOvershootMinY || isAtOvershootMaxY;
+
+    // Only recalculate offset when FIRST hitting boundary (transition free → boundary)
+    var justHitBoundaryX = isAtBoundaryX && !wasClampedLastFrame.current.x;
+    var justHitBoundaryY = isAtBoundaryY && !wasClampedLastFrame.current.y;
+    if (justHitBoundaryX || justHitBoundaryY) {
+      // Point JUST hit overshoot boundary - recalculate offset once
+      var newOffsetX = justHitBoundaryX ? dragX - currentX : touchOffset.current.x;
+      var newOffsetY = justHitBoundaryY ? dragY - currentY : touchOffset.current.y;
+      touchOffset.current = {
+        x: newOffsetX,
+        y: newOffsetY
+      };
+      console.log("✅ OFFSET RECALCULATED (hit boundary):", {
+        axis: justHitBoundaryX ? 'X' : 'Y',
+        touchY: currentY.toFixed(2),
+        dragY: dragY.toFixed(2),
+        newOffsetY: touchOffset.current.y.toFixed(2),
+        note: "First contact with boundary - offset locked"
+      });
+    }
+
+    // Update boundary state for next frame
+    wasClampedLastFrame.current = {
+      x: isAtBoundaryX,
+      y: isAtBoundaryY
+    };
+
+    // ✅ DEBUG: Log when in overshoot zone (only when not at boundary)
+    var isInOvershootY = dragY < strictMinY || dragY > strictMaxY;
+    if (isInOvershootY && !isAtBoundaryY) {
+      console.log("🎯 IN OVERSHOOT ZONE:", {
+        touchY: currentY.toFixed(2),
+        appliedY: dragY.toFixed(2),
+        overshootRange: "".concat(overshootMinY.toFixed(2), " - ").concat(overshootMaxY.toFixed(2)),
+        strictRange: "".concat(strictMinY.toFixed(2), " - ").concat(strictMaxY.toFixed(2))
+      });
+    }
+
+    // ✅ Update lastValidPosition ONLY if point is within strictBounds
+    var isStrictlyValid = dragX >= strictMinX && dragX <= strictMaxX && dragY >= strictMinY && dragY <= strictMaxY;
+    if (isStrictlyValid) {
+      lastValidPosition.current = updatedPoint;
+    }
+
+    // ✅ Update lastTouchPosition for next frame (simple tracking)
+    lastTouchPosition.current = {
+      x: currentX,
+      y: currentY
+    };
+
+    // ✅ DEBUG: Log the point update before setPoints
+    console.log("📍 UPDATING POINT:", {
+      index: selectedPointIndex.current,
+      newX: updatedPoint.x.toFixed(2),
+      newY: updatedPoint.y.toFixed(2),
+      touchX: currentX.toFixed(2),
+      touchY: currentY.toFixed(2),
+      offsetX: touchOffset.current.x.toFixed(2),
+      offsetY: touchOffset.current.y.toFixed(2)
+    });
+    setPoints(function (prev) {
+      var _prev$pointIndex, _newPoints$pointIndex, _prev$pointIndex2, _newPoints$pointIndex2;
+      // ✅ SAFETY: Ensure prev is a valid array
+      if (!Array.isArray(prev) || prev.length === 0) {
+        return prev;
+      }
+      var pointIndex = selectedPointIndex.current;
+      // ✅ SAFETY: Validate pointIndex
+      if (pointIndex === null || pointIndex === undefined || pointIndex < 0 || pointIndex >= prev.length) {
+        return prev;
+      }
+
+      // ✅ SAFETY: Filter out any invalid points and update the selected one
+      var newPoints = prev.map(function (p, i) {
+        if (i === pointIndex) {
+          return updatedPoint;
+        }
+        // ✅ SAFETY: Ensure existing points are valid
+        if (p && typeof p.x === 'number' && typeof p.y === 'number') {
+          return p;
+        }
+        // If point is invalid, return a default point (shouldn't happen, but safety first)
+        return {
+          x: 0,
+          y: 0
+        };
+      });
+
+      // ✅ DEBUG: Log the state update
+      console.log("✅ STATE UPDATED:", {
+        index: pointIndex,
+        oldY: (_prev$pointIndex = prev[pointIndex]) === null || _prev$pointIndex === void 0 ? void 0 : _prev$pointIndex.y.toFixed(2),
+        newY: (_newPoints$pointIndex = newPoints[pointIndex]) === null || _newPoints$pointIndex === void 0 ? void 0 : _newPoints$pointIndex.y.toFixed(2),
+        changed: Math.abs(((_prev$pointIndex2 = prev[pointIndex]) === null || _prev$pointIndex2 === void 0 ? void 0 : _prev$pointIndex2.y) - ((_newPoints$pointIndex2 = newPoints[pointIndex]) === null || _newPoints$pointIndex2 === void 0 ? void 0 : _newPoints$pointIndex2.y)) > 0.01
+      });
+      return newPoints;
+    });
+  };
+  var handleRelease = function handleRelease() {
+    var wasDragging = selectedPointIndex.current !== null;
+
+    // ✅ CRITICAL: Reset drag state when drag ends
+    touchOffset.current = null;
+    wasClampedLastFrame.current = {
+      x: false,
+      y: false
+    };
+
+    // ✅ VISUAL OVERSHOOT: Clamp points back to imageDisplayRect when drag ends
+    // This ensures final crop is always within valid image bounds
+    if (wasDragging && selectedPointIndex.current !== null) {
+      var wrapper = commonWrapperLayout.current;
+      var imageRect = imageDisplayRect.current;
+
+      // Recalculate imageDisplayRect if needed
+      if (imageRect.width === 0 || imageRect.height === 0) {
+        if (wrapper.width > 0 && wrapper.height > 0 && originalImageDimensions.current.width > 0) {
+          updateImageDisplayRect(wrapper.width, wrapper.height);
+          imageRect = imageDisplayRect.current;
+        }
+      }
+      if (imageRect.width > 0 && imageRect.height > 0) {
+        var imageRectX = wrapper.x + imageRect.x;
+        var imageRectY = wrapper.y + imageRect.y;
+        var imageRectMaxX = imageRectX + imageRect.width;
+        var imageRectMaxY = imageRectY + imageRect.height;
+
+        // Clamp the dragged point back to strict image bounds
+        setPoints(function (prev) {
+          // ✅ SAFETY: Ensure prev is a valid array
+          if (!Array.isArray(prev) || prev.length === 0) {
+            return prev;
+          }
+          var pointIndex = selectedPointIndex.current;
+          // ✅ SAFETY: Validate pointIndex and ensure point exists
+          if (pointIndex === null || pointIndex === undefined || pointIndex < 0 || pointIndex >= prev.length) {
+            return prev;
+          }
+          var point = prev[pointIndex];
+          // ✅ SAFETY: Ensure point exists and has valid x/y properties
+          if (!point || typeof point.x !== 'number' || typeof point.y !== 'number') {
+            return prev;
+          }
+          var clampedPoint = {
+            x: Math.max(imageRectX, Math.min(point.x, imageRectMaxX)),
+            y: Math.max(imageRectY, Math.min(point.y, imageRectMaxY))
+          };
+
+          // Only update if point was outside bounds
+          if (point.x !== clampedPoint.x || point.y !== clampedPoint.y) {
+            console.log("🔒 Clamping point back to image bounds on release:", {
+              before: {
+                x: point.x.toFixed(2),
+                y: point.y.toFixed(2)
+              },
+              after: {
+                x: clampedPoint.x.toFixed(2),
+                y: clampedPoint.y.toFixed(2)
+              },
+              bounds: {
+                minX: imageRectX.toFixed(2),
+                maxX: imageRectMaxX.toFixed(2),
+                minY: imageRectY.toFixed(2),
+                maxY: imageRectMaxY.toFixed(2)
+              }
+            });
+            return prev.map(function (p, i) {
+              return i === pointIndex ? clampedPoint : p;
+            });
+          }
+          return prev;
+        });
+      }
+    }
+
+    // ✅ FREE DRAG: Clear initial positions when drag ends
+    initialTouchPosition.current = null;
+    initialPointPosition.current = null;
+    lastValidPosition.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([]);
+    hasInitializedCropBox.current = false; // ✅ CRITICAL: Reset guard to allow reinitialization
+    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
+        };
+        // ✅ CRITICAL: Set imageSource to 'camera' IMMEDIATELY to prevent Image.getSize() from being called
+        imageSource.current = 'camera';
+        hasInitializedCropBox.current = false; // Reset guard for new camera image
+        console.log("✅ Camera frame data received:", cameraFrameData.current);
+      }
+      setImage(uri);
+      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, isCoverMode, scale, coverOffsetX, coverOffsetY, scaledWidth, scaledHeight, scaleX, scaleY, 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
+            });
+
+            // ✅ CAMERA (cover mode): scale = max, image fills wrapper, has offset
+            // ✅ GALLERY (contain mode): scale = min, uniform
+            isCoverMode = !!(cameraFrameData.current && cameraFrameData.current.greenFrame);
+            coverOffsetX = 0, coverOffsetY = 0;
+            if (isCoverMode) {
+              scale = Math.max(displayedWidth / actualImageWidth, displayedHeight / actualImageHeight);
+              scaledWidth = actualImageWidth * scale;
+              scaledHeight = actualImageHeight * scale;
+              coverOffsetX = (scaledWidth - displayedWidth) / 2;
+              coverOffsetY = (scaledHeight - displayedHeight) / 2;
+              console.log("Scale factor (COVER mode for camera):", {
+                scale: scale,
+                coverOffsetX: coverOffsetX,
+                coverOffsetY: coverOffsetY
+              });
+            } else {
+              scaleX = actualImageWidth / displayedWidth;
+              scaleY = actualImageHeight / displayedHeight;
+              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;
+              console.log("Scale factor (contain, uniform):", {
+                scale: scale,
+                contentRect: contentRect
+              });
+            }
+            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);
+
+                // ✅ Conversion display -> image px (contain or cover)
+                imagePoints = points.map(function (point) {
+                  var clampedX, clampedY, origX, origY;
+                  if (isCoverMode) {
+                    // Cover: display = wrapper, scale = max, image centered with offset
+                    clampedX = Math.max(0, Math.min(point.x, contentRect.width));
+                    clampedY = Math.max(0, Math.min(point.y, contentRect.height));
+                    origX = (clampedX + coverOffsetX) / scale;
+                    origY = (clampedY + coverOffsetY) / scale;
+                  } else {
+                    clampedX = Math.max(contentRect.x, Math.min(point.x, contentRect.x + contentRect.width));
+                    clampedY = Math.max(contentRect.y, Math.min(point.y, contentRect.y + contentRect.height));
+                    origX = (clampedX - contentRect.x) * scale;
+                    origY = (clampedY - contentRect.y) * scale;
+                  }
+                  var finalX = Math.max(0, Math.min(origX, actualImageWidth));
+                  var finalY = Math.max(0, Math.min(origY, actualImageHeight));
+                  return {
+                    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, {
+    style: {
+      width: _reactNative.Dimensions.get('window').width,
+      aspectRatio: 9 / 16,
+      borderRadius: 30,
+      overflow: 'hidden',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative',
+      backgroundColor: 'black'
+    },
+    ref: commonWrapperRef,
+    onLayout: onCommonWrapperLayout
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    ref: viewRef,
+    collapsable: false,
+    style: _reactNative.StyleSheet.absoluteFill,
+    onStartShouldSetResponder: function onStartShouldSetResponder() {
+      return true;
+    },
+    onMoveShouldSetResponder: function onMoveShouldSetResponder(evt, gestureState) {
+      // ✅ CRITICAL: Always capture movement when a point is selected
+      // This ensures vertical movement is captured correctly
+      if (selectedPointIndex.current !== null) {
+        return true;
+      }
+      // ✅ CRITICAL: Capture ANY movement immediately (even 0px) to prevent ScrollView interception
+      // This is especially important for vertical movement which ScrollView tries to intercept
+      // We return true for ANY movement to ensure we capture it before ScrollView
+      var hasMovement = Math.abs(gestureState.dx) > 0 || Math.abs(gestureState.dy) > 0;
+      if (hasMovement && Math.abs(gestureState.dy) > 5) {
+        console.log("🔄 Vertical movement detected in responder:", {
+          dx: gestureState.dx.toFixed(2),
+          dy: gestureState.dy.toFixed(2),
+          selectedPoint: selectedPointIndex.current
+        });
+      }
+      return true;
+    },
+    onResponderGrant: function onResponderGrant(e) {
+      // ✅ CRITICAL: Grant responder immediately to prevent ScrollView from intercepting
+      // This ensures we capture all movement, especially vertical
+      // Handle tap to select point if needed
+      if (selectedPointIndex.current === null) {
+        handleTap(e);
+      }
+    },
+    onResponderStart: handleTap,
+    onResponderMove: function onResponderMove(e) {
+      // ✅ CRITICAL: Always handle move events to ensure smooth movement in all directions
+      // This is called for every move event, ensuring vertical movement is captured
+      // handleMove now uses incremental delta calculation which is more reliable
+      handleMove(e);
+    },
+    onResponderRelease: handleRelease,
+    onResponderTerminationRequest: function onResponderTerminationRequest() {
+      // ✅ CRITICAL: Never allow termination when dragging a point
+      // This prevents ScrollView from stealing the responder during vertical movement
+      return selectedPointIndex.current === null;
+    }
+    // ✅ CRITICAL: Prevent parent ScrollView from intercepting touches
+    // Capture responder BEFORE parent ScrollView can intercept
+    ,
+    onStartShouldSetResponderCapture: function onStartShouldSetResponderCapture() {
+      // Always capture start events
+      return true;
+    },
+    onMoveShouldSetResponderCapture: function onMoveShouldSetResponderCapture(evt, gestureState) {
+      // ✅ CRITICAL: Always capture movement events before parent ScrollView
+      // This is essential for vertical movement which ScrollView tries to intercept
+      // Especially important when a point is selected or when there's any movement
+      if (selectedPointIndex.current !== null) {
+        return true;
+      }
+      // 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,
+    resizeMode: (_cameraFrameData$curr3 = cameraFrameData.current) !== null && _cameraFrameData$curr3 !== void 0 && _cameraFrameData$curr3.greenFrame ? 'cover' : 'contain',
+    onLayout: onImageLayout
+  }), /*#__PURE__*/_react["default"].createElement(_reactNativeSvg["default"], {
+    style: _ImageCropperStyles["default"].overlay,
+    pointerEvents: "none"
+  }, function () {
+    // ✅ Use wrapper dimensions for SVG path (wrapper coordinates)
+    var wrapperWidth = commonWrapperLayout.current.width || _reactNative.Dimensions.get('window').width;
+    var wrapperHeight = commonWrapperLayout.current.height || _reactNative.Dimensions.get('window').width * 16 / 9;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Path, {
+      d: "M 0 0 H ".concat(wrapperWidth, " V ").concat(wrapperHeight, " H 0 Z ").concat(createPath()),
+      fill: showResult ? 'white' : 'rgba(0, 0, 0, 0.8)',
+      fillRule: "evenodd"
+    }), !showResult && points.length > 0 && /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Path, {
+      d: createPath(),
+      fill: "transparent",
+      stroke: "white",
+      strokeWidth: 2
+    }), !showResult && points.map(function (point, index) {
+      return /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Circle, {
+        key: index,
+        cx: point.x,
+        cy: point.y,
+        r: 10,
+        fill: "white"
+      });
+    }));
+  }())))), 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;