react-native-expo-cropper 1.2.44 → 1.2.46

package/src/ImageCropper.js

@@ -1,1448 +1,1454 @@
-import styles from './ImageCropperStyles';
-import React, { useState, useRef, useEffect } from 'react';
-import { Modal, View, Image, Dimensions, TouchableOpacity, Animated, Text, Platform, SafeAreaView, PixelRatio, StyleSheet, ActivityIndicator } from 'react-native';
-import Svg, { Path, Circle } from 'react-native-svg';
-import CustomCamera from './CustomCamera';
-import * as ImageManipulator from 'expo-image-manipulator';
-import { Ionicons } from '@expo/vector-icons';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { applyMaskToImage, MaskView } from './ImageMaskProcessor';
-
-const PRIMARY_GREEN = '#198754';
-const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rotationLabel }) => {
-
-
-  const [image, setImage] = useState(null);
-  const [points, setPoints] = useState([]);
-  const [showResult, setShowResult] = useState(false);
-  const [showCustomCamera, setShowCustomCamera] = useState(false);
-  const viewRef = useRef(null);
-  const maskViewRef = useRef(null); // Ref pour la vue de masque (invisible)
-  const sourceImageUri = useRef(null); // keep original image URI (full-res) for upload
-  const cameraFrameData = 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
-  const commonWrapperRef = useRef(null);
-  const commonWrapperLayout = 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)
-  const originalImageDimensions = useRef({ width: 0, height: 0 });
-  // Dimensions et position d'affichage à l'écran (pour le calcul des points de crop)
-  const displayedImageLayout = useRef({ x: 0, y: 0, width: 0, height: 0 });
-  // Conserver imageMeasure pour compatibilité avec le code existant (utilisé pour SVG overlay)
-  const imageMeasure = 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
-  const imageDisplayRect = useRef({ x: 0, y: 0, width: 0, height: 0 });
-  
-  // ✅ COMPATIBILITÉ : displayedContentRect reste pour le code existant, mais pointe vers imageDisplayRect
-  const 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
-  const updateImageDisplayRect = (wrapperWidth, wrapperHeight) => {
-    const iw = originalImageDimensions.current.width;
-    const 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)
-      const scale = Math.min(wrapperWidth / iw, wrapperHeight / ih);
-      const imageDisplayWidth = iw * scale;
-      const imageDisplayHeight = ih * scale;
-      const offsetX = (wrapperWidth - imageDisplayWidth) / 2;
-      const 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
-  const updateDisplayedContentRect = updateImageDisplayRect;
-  
-  const selectedPointIndex = useRef(null);
-  const lastTap = useRef(null);
-  
-  // ✅ CRITICAL: Guard to prevent double crop box initialization
-  // This ensures crop box is initialized only once, especially for camera images
-  const hasInitializedCropBox = useRef(false);
-  const imageSource = useRef(null); // 'camera' | 'gallery' | null
-  
-  // ✅ FREE DRAG: Store initial touch position and point position for delta-based movement
-  const initialTouchPosition = useRef(null); // { x, y } - initial touch position when drag starts
-  const initialPointPosition = useRef(null); // { x, y } - initial point position when drag starts
-  const lastTouchPosition = 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
-  const dragBase = 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
-  const touchOffset = useRef(null); // { x, y } - offset = pointPosition - touchPosition
-  
-  // ✅ Track if point was clamped in previous frame (to detect transition)
-  const wasClampedLastFrame = useRef({ x: false, y: false });
-  
-  // Angle de rotation accumulé (pour éviter les rotations multiples)
-  const rotationAngle = useRef(0);
-  
-  // États pour la vue de masque temporaire
-  const [maskImageUri, setMaskImageUri] = useState(null);
-  const [maskPoints, setMaskPoints] = useState([]);
-  const [maskDimensions, setMaskDimensions] = useState({ width: 0, height: 0 });
-  const [showMaskView, setShowMaskView] = useState(false);
-
-  const [isLoading, setIsLoading] = useState(false);
-  const [showFullScreenCapture, setShowFullScreenCapture] = useState(false);
-  const [isRotating, setIsRotating] = useState(false);
-  const rotationInProgressRef = useRef(false); // block duplicate taps immediately
-  const lastValidPosition = useRef(null);
-  const insets = useSafeAreaInsets();
-  
-  // ✅ NEW ARCH: mobile does NOT export the final crop.
-
-  // No view-shot / captureRef / bitmap masking on device.
-  const enableMask = false;
-  const enableRotation = true; // rotation resets crop box so it is re-initialized on rotated image.
-  
-
-
-
-
-  useEffect(() => {
-  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
-
-  useEffect(() => {
-    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) {
-      const { width: capturedWidth, height: capturedHeight } = cameraFrameData.current.capturedImageSize;
-      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
-      const 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
-    
-    Image.getSize(image, (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: Platform.OS,
-        pixelRatio: 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
-      const 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;
-        }
-      }
-    }, (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)
-  const 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
-    const 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)
-    let 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
-    const imageRectX = wrapper.x + imageRect.x;
-    const 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.
-    // Store points in WRAPPER-RELATIVE coordinates (greenFrame.x, greenFrame.y) so they match
-    // touch events (locationX/locationY are relative to the wrapper). This keeps display→image
-    // conversion correct in Confirm.
-    if (cameraFrameData.current && cameraFrameData.current.greenFrame && originalImageDimensions.current.width > 0) {
-      const greenFrame = cameraFrameData.current.greenFrame;
-      
-      const boxX = greenFrame.x;
-      const boxY = greenFrame.y;
-      const boxWidth = greenFrame.width;
-      const boxHeight = greenFrame.height;
-
-      // ✅ SAFETY: Validate calculated coordinates before creating points
-      const isValidCoordinate = (val) => 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;
-      }
-      
-      // ✅ Points in wrapper-relative coords (same as touch events)
-      const 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
-      const validPoints = newPoints.filter(p => 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: "Points in wrapper-relative coords - same as touch events and crop_image_size",
-      });
-
-      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
-    const boxWidth = imageRect.width * 0.70;  // 70% of visible image width
-    const boxHeight = imageRect.height * 0.70; // 70% of visible image height
-    const boxX = imageRectX + (imageRect.width - boxWidth) / 2; // Centered in image area
-    const boxY = imageRectY + (imageRect.height - boxHeight) / 2; // Centered in image area
-    
-    // ✅ SAFETY: Validate calculated coordinates before creating points
-    const isValidCoordinate = (val) => 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;
-    }
-    
-    const 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
-    const validPoints = newPoints.filter(p => 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)
-  const onCommonWrapperLayout = (e) => {
-    const 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
-  const onImageLayout = (e) => {
-    const 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
-    ) {
-      const { width, height } = cameraFrameData.current.capturedImageSize;
-      originalImageDimensions.current = { width, height };
-      console.log("✅ originalImageDimensions initialisées depuis cameraFrameData dans onImageLayout:", {
-        width,
-        height,
-      });
-    }
-
-    // ✅ RÉFÉRENTIEL UNIQUE : Recalculer imageDisplayRect dans le wrapper commun
-    // Si le wrapper commun n'est pas encore prêt, on attendra onCommonWrapperLayout
-    const 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();
-      }
-    }
-  };
-
-  const createPath = () => {
-    if (points.length < 1) return '';
-    let path = `M ${points[0].x} ${points[0].y} `;
-    points.forEach(point => path += `L ${point.x} ${point.y} `);
-    return path + 'Z';
-  };
-
-  // ✅ Helper function: Find closest point on a line segment to a tap point
-  const findClosestPointOnLine = (tapX, tapY, lineStartX, lineStartY, lineEndX, lineEndY) => {
-    const dx = lineEndX - lineStartX;
-    const dy = lineEndY - lineStartY;
-    const lengthSquared = dx * dx + dy * dy;
-    
-    if (lengthSquared === 0) {
-      // Line segment is a point
-      return { x: lineStartX, y: lineStartY, distance: Math.sqrt((tapX - lineStartX) ** 2 + (tapY - lineStartY) ** 2) };
-    }
-    
-    // Calculate projection parameter t (0 to 1)
-    const t = Math.max(0, Math.min(1, ((tapX - lineStartX) * dx + (tapY - lineStartY) * dy) / lengthSquared));
-    
-    // Calculate closest point on line segment
-    const closestX = lineStartX + t * dx;
-    const closestY = lineStartY + t * dy;
-    
-    // Calculate distance from tap to closest point
-    const distance = Math.sqrt((tapX - closestX) ** 2 + (tapY - closestY) ** 2);
-    
-    return { x: closestX, y: closestY, distance, t };
-  };
-
-  // ✅ Helper function: Check if tap is near any line segment and find closest point
-  const findClosestPointOnFrame = (tapX, tapY, lineTolerance = 30) => {
-    if (points.length < 2) return null;
-    
-    let closestPoint = null;
-    let minDistance = Infinity;
-    let insertIndex = -1;
-    
-    // Check each line segment (closed polygon: last point connects to first)
-    for (let i = 0; i < points.length; i++) {
-      const start = points[i];
-      const end = points[(i + 1) % points.length];
-      
-      const 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 } : null;
-  };
-
-  const handleTap = (e) => {
-    if (!image || showResult) return;
-    const now = Date.now();
-    const { locationX: tapX, locationY: tapY } = e.nativeEvent;
-
-    // ✅ 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
-    let imageRect = imageDisplayRect.current;
-    const 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
-    const imageRectX = wrapper.x + imageRect.x;
-    const imageRectY = wrapper.y + imageRect.y;
-    const { x: cx, y: cy, width: cw, height: ch } = {
-      x: imageRectX,
-      y: imageRectY,
-      width: imageRect.width,
-      height: imageRect.height
-    };
-    // ✅ Larger select radius for easier point selection (especially on touch screens)
-    const 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
-    const index = points.findIndex(p => 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 = { ...points[index] };
-      lastValidPosition.current = { ...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 {
-        const 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
-      const isDoubleTap = lastTap.current && now - lastTap.current < 300;
-      
-      if (isDoubleTap && points.length >= 2) {
-        // Find closest point on frame lines
-        const lineResult = findClosestPointOnFrame(tapX, tapY, 30); // 30px tolerance
-        
-        if (lineResult) {
-          const { point, insertIndex } = lineResult;
-          
-          // Check if a point already exists very close to this position
-          const exists = points.some(p => 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
-            const newPoints = [...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,
-              totalPoints: newPoints.length
-            });
-            
-            lastTap.current = null; // Reset to prevent triple-tap
-            return;
-          }
-        }
-      }
-    }
-    
-    lastTap.current = now;
-  };
-
-  const handleMove = (e) => {
-    if (showResult || selectedPointIndex.current === null) return;
-    
-    // ✅ FREE DRAG: Use delta-based movement for smooth, unconstrained dragging
-   
-    const nativeEvent = e.nativeEvent;
-    const currentX = nativeEvent.locationX;
-    const 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
-    let 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
-    let imageRect = imageDisplayRect.current;
-    const 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
-    const imageRectX = wrapper.x + imageRect.x;
-    const imageRectY = wrapper.y + imageRect.y;
-    const contentRect = {
-      x: imageRectX,
-      y: imageRectY,
-      width: imageRect.width,
-      height: imageRect.height
-    };
-    
-    // ✅ FREE DRAG: Ensure initial positions are set
-    if (!initialPointPosition.current) {
-      const currentPoint = points[selectedPointIndex.current];
-      if (currentPoint && typeof currentPoint.x === 'number' && typeof currentPoint.y === 'number') {
-        initialPointPosition.current = { ...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
-    const newX = currentX + touchOffset.current.x;
-    const newY = currentY + touchOffset.current.y;
-    
-    // ✅ SEPARATE DRAG BOUNDS vs CROP BOUNDS
-    const { x: cx, y: cy, width: cw, height: ch } = contentRect;
-    
-    // ✅ STRICT BOUNDS: For final crop safety (imageDisplayRect)
-    const strictMinX = cx;
-    const strictMaxX = cx + cw;
-    const strictMinY = cy;
-    const 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
-    const wrapperRect = wrapper;
-    const overshootMinX = wrapperRect.x;
-    const overshootMaxX = wrapperRect.x + wrapperRect.width;
-    const overshootMinY = wrapperRect.y;
-    const overshootMaxY = wrapperRect.y + wrapperRect.height;
-    
-    // ✅ DRAG BOUNDS: Clamp ONLY to overshootBounds during drag (NOT strictBounds)
-    const dragX = Math.max(overshootMinX, Math.min(newX, overshootMaxX));
-    const dragY = Math.max(overshootMinY, Math.min(newY, overshootMaxY));
-  
-    // ✅ UPDATE POINT: Use drag bounds (overshoot) - allows visual freedom
-    const 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)
-    const isAtOvershootMinX = Math.abs(dragX - overshootMinX) < 1;
-    const isAtOvershootMaxX = Math.abs(dragX - overshootMaxX) < 1;
-    const isAtOvershootMinY = Math.abs(dragY - overshootMinY) < 1;
-    const isAtOvershootMaxY = Math.abs(dragY - overshootMaxY) < 1;
-    
-    const isAtBoundaryX = isAtOvershootMinX || isAtOvershootMaxX;
-    const isAtBoundaryY = isAtOvershootMinY || isAtOvershootMaxY;
-    
-    // Only recalculate offset when FIRST hitting boundary (transition free → boundary)
-    const justHitBoundaryX = isAtBoundaryX && !wasClampedLastFrame.current.x;
-    const justHitBoundaryY = isAtBoundaryY && !wasClampedLastFrame.current.y;
-    
-    if (justHitBoundaryX || justHitBoundaryY) {
-      // Point JUST hit overshoot boundary - recalculate offset once
-      const newOffsetX = justHitBoundaryX ? (dragX - currentX) : touchOffset.current.x;
-      const 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)
-    const isInOvershootY = dragY < strictMinY || dragY > strictMaxY;
-    if (isInOvershootY && !isAtBoundaryY) {
-      console.log("🎯 IN OVERSHOOT ZONE:", {
-        touchY: currentY.toFixed(2),
-        appliedY: dragY.toFixed(2),
-        overshootRange: `${overshootMinY.toFixed(2)} - ${overshootMaxY.toFixed(2)}`,
-        strictRange: `${strictMinY.toFixed(2)} - ${strictMaxY.toFixed(2)}`
-      });
-    }
-    
-    // ✅ Update lastValidPosition ONLY if point is within strictBounds
-    const 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(prev => {
-      // ✅ SAFETY: Ensure prev is a valid array
-      if (!Array.isArray(prev) || prev.length === 0) {
-        return prev;
-      }
-      
-      const 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
-      const newPoints = prev.map((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]?.y.toFixed(2),
-        newY: newPoints[pointIndex]?.y.toFixed(2),
-        changed: Math.abs(prev[pointIndex]?.y - newPoints[pointIndex]?.y) > 0.01
-      });
-      
-      return newPoints;
-    });
-  };
-
-  const handleRelease = () => {
-    const 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) {
-      const wrapper = commonWrapperLayout.current;
-      let 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) {
-        const imageRectX = wrapper.x + imageRect.x;
-        const imageRectY = wrapper.y + imageRect.y;
-        const imageRectMaxX = imageRectX + imageRect.width;
-        const imageRectMaxY = imageRectY + imageRect.height;
-        
-        // Clamp the dragged point back to strict image bounds
-        setPoints(prev => {
-          // ✅ SAFETY: Ensure prev is a valid array
-          if (!Array.isArray(prev) || prev.length === 0) {
-            return prev;
-          }
-          
-          const pointIndex = selectedPointIndex.current;
-          // ✅ SAFETY: Validate pointIndex and ensure point exists
-          if (pointIndex === null || pointIndex === undefined || pointIndex < 0 || pointIndex >= prev.length) {
-            return prev;
-          }
-          
-          const 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;
-          }
-          
-          const 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((p, i) => 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(() => {
-          // ScrollView will be re-enabled automatically when responder is released
-        }, 100);
-      } catch (e) {
-        // Ignore errors
-      }
-    }
-  };
-
-  const 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
-const rotatePreviewImage = async (degrees) => {
-    if (!image) return;
-    if (rotationInProgressRef.current) return; // block duplicate taps immediately (no re-render delay)
-    rotationInProgressRef.current = true;
-    setIsRotating(true);
-
-    try {
-      rotationAngle.current = (rotationAngle.current + degrees) % 360;
-
-      // Use JPEG for preview rotation (faster than PNG for large images; quality 0.92 is fine for preview)
-      const rotated = await ImageManipulator.manipulateAsync(
-        image,
-        [{ rotate: degrees }],
-        {
-          compress: 0.92,
-          format: ImageManipulator.SaveFormat.JPEG,
-        }
-      );
-
-      // ✅ Send rotated image to backend: use rotated URI and dimensions so crop bbox matches
-      sourceImageUri.current = rotated.uri;
-      originalImageDimensions.current = {
-        width: rotated.width,
-        height: rotated.height,
-      };
-      cameraFrameData.current = null; // rotated image is no longer "camera preview" frame
-      imageSource.current = 'gallery'; // so layout callbacks run initializeCropBox() and show the white box
-
-      setPoints([]);
-      hasInitializedCropBox.current = false;
-      setImage(rotated.uri);
-      console.log("Rotation applied:", degrees, "degrees; accumulated:", rotationAngle.current);
-    } catch (error) {
-      console.error("Error rotating image:", error);
-      alert("Error rotating image");
-    } finally {
-      rotationInProgressRef.current = false;
-      setIsRotating(false);
-    }
-  };
-
-  // Helper function to wait for multiple render cycles (works on iOS)
-  const waitForRender = (cycles = 5) => {
-    return new Promise((resolve) => {
-      let count = 0;
-      const tick = () => {
-        count++;
-        if (count >= cycles) {
-          resolve();
-        } else {
-          setImmediate(tick);
-        }
-      };
-      setImmediate(tick);
-    });
-  };
-
-
-  return (
-    <View style={styles.container}>
-
-      {showCustomCamera ? (
-        <CustomCamera
-          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={() => setShowCustomCamera(false)}
-        />
-      ) : (
-        <>
-          {image && (
-            <View
-              style={{
-                width: Dimensions.get('window').width,
-                aspectRatio: 9 / 16,
-                borderRadius: 30,
-                overflow: 'hidden',
-                alignItems: 'center',
-                justifyContent: 'center',
-                position: 'relative',
-                backgroundColor: 'black',
-                marginBottom: 0, // ✅ Les boutons sont maintenant en position absolue en bas
-              }}
-              ref={commonWrapperRef}
-              onLayout={onCommonWrapperLayout}
-            >
-              <View
-                ref={viewRef}
-                collapsable={false}
-                style={StyleSheet.absoluteFill}
-                onStartShouldSetResponder={() => true}
-                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
-                  const 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={(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={(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={() => {
-                  // ✅ 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={() => {
-                  // Always capture start events
-                  return true;
-                }}
-                onMoveShouldSetResponderCapture={(evt, gestureState) => {
-                  // ✅ CRITICAL: Always capture movement events before parent ScrollView
-                  // This is essential for vertical movement which ScrollView tries to intercept
-                  // Especially important when a point is selected or when there's any movement
-                  if (selectedPointIndex.current !== null) {
-                    return true;
-                  }
-                  // ✅ CRITICAL: Capture movement BEFORE ScrollView can intercept
-                  // This ensures we get vertical movement even if ScrollView tries to steal it
-                  const hasMovement = Math.abs(gestureState.dx) > 0 || Math.abs(gestureState.dy) > 0;
-                  return hasMovement;
-                }}
-              >
-                <Image
-                  source={{ uri: image }}
-                  style={styles.image}
-                  resizeMode={cameraFrameData.current?.greenFrame ? 'cover' : 'contain'}
-                  onLayout={onImageLayout}
-                />
-                {/* ✅ RÉFÉRENTIEL UNIQUE : SVG overlay utilise les dimensions du wrapper commun */}
-                {/* IMPORTANT: prevent SVG overlay from stealing touch events so dragging works reliably */}
-                <Svg style={styles.overlay} pointerEvents="none">
-                  {(() => {
-                    // ✅ Use wrapper dimensions for SVG path (wrapper coordinates)
-                    const wrapperWidth = commonWrapperLayout.current.width || Dimensions.get('window').width;
-                    const wrapperHeight = commonWrapperLayout.current.height || (Dimensions.get('window').width * 16 / 9);
-                    return (
-                      <>
-                        <Path
-                          d={`M 0 0 H ${wrapperWidth} V ${wrapperHeight} H 0 Z ${createPath()}`}
-                          fill={showResult ? 'white' : 'rgba(0, 0, 0, 0.8)'}
-                          fillRule="evenodd"
-                        />
-                        {!showResult && points.length > 0 && (
-                          <Path d={createPath()} fill="transparent" stroke="white" strokeWidth={2} />
-                        )}
-                        {!showResult && points.map((point, index) => (
-                          <Circle key={index} cx={point.x} cy={point.y} r={10} fill="white" />
-                        ))}
-                      </>
-                    );
-                  })()}
-                </Svg>
-              </View>
-              {isRotating && (
-                <View style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center' }}>
-                  <ActivityIndicator size="large" color={PRIMARY_GREEN} />
-                  <Text style={{ color: PRIMARY_GREEN, marginTop: 8, fontSize: 14 }}>{rotationLabel ?? 'Rotation...'}</Text>
-                </View>
-              )}
-            </View>
-          )}
-
-          {/* ✅ Buttons positioned BELOW the image, not overlapping */}
-          {!showResult && image && (
-            <View style={[styles.buttonContainerBelow, { paddingBottom: Math.max(insets.bottom, 16) }]}>
-              {Platform.OS === 'android' && (
-                <TouchableOpacity 
-                  style={[styles.rotationButton, isRotating && { opacity: 0.7 }]} 
-                  onPress={() => enableRotation && rotatePreviewImage(90)}
-                  disabled={isRotating}
-                >
-                  {isRotating ? (
-                    <ActivityIndicator size="small" color="white" />
-                  ) : (
-                    <Ionicons name="sync" size={24} color="white" />
-                  )}
-                </TouchableOpacity>
-              )}
-              
-              <TouchableOpacity style={styles.button} onPress={handleReset}>
-                <Text style={styles.buttonText}>Reset</Text>
-              </TouchableOpacity>
-              
-              <TouchableOpacity
-                style={styles.button}
-                onPress={async () => {
-                        setIsLoading(true);
-                        try {
-                          console.log("=== Starting pixel-perfect metadata export (no bitmap crop on mobile) ===");
-                          
-                          let actualImageWidth = originalImageDimensions.current.width;
-                          let actualImageHeight = originalImageDimensions.current.height;
-                          
-                          // ✅ CRITICAL: Camera JPEGs often have EXIF 6 (90° CW). The Image component displays
-                          // the EXIF-corrected view (3120×4160 portrait) but takePictureAsync returns raw (4160×3120).
-                          // Use swapped dimensions for coordinate conversion so bbox matches what the user sees.
-                          const isCoverMode = !!(cameraFrameData.current && cameraFrameData.current.greenFrame);
-                          const captured = cameraFrameData.current?.capturedImageSize;
-                          if (isCoverMode && captured && captured.width > captured.height) {
-                            actualImageWidth = captured.height;
-                            actualImageHeight = captured.width;
-                            console.log("✅ Using EXIF-swapped dimensions for bbox (raw was landscape, display is portrait):", {
-                              raw: { w: captured.width, h: captured.height },
-                              display: { w: actualImageWidth, h: actualImageHeight },
-                            });
-                          }
-                          
-                          if (actualImageWidth === 0 || actualImageHeight === 0) {
-                            throw new Error("Original image dimensions not available. Please wait for image to load.");
-                          }
-                          
-                          const layout = displayedImageLayout.current;
-                          if (layout.width > 0 && layout.height > 0) {
-                            updateDisplayedContentRect(layout.width, layout.height);
-                          }
-                          
-                          let contentRect = displayedContentRect.current;
-                          let displayedWidth = contentRect.width;
-                          let displayedHeight = contentRect.height;
-                          
-                          if (displayedWidth === 0 || displayedHeight === 0) {
-                            if (layout.width > 0 && layout.height > 0) {
-                              contentRect = {
-                                x: layout.x,
-                                y: layout.y,
-                                width: layout.width,
-                                height: layout.height
-                              };
-                              displayedWidth = contentRect.width;
-                              displayedHeight = contentRect.height;
-                              displayedContentRect.current = contentRect;
-                            } else {
-                              throw new Error("Displayed image dimensions not available.");
-                            }
-                          }
-                          
-                          let scale, coverOffsetX = 0, coverOffsetY = 0;
-                          if (isCoverMode) {
-                            scale = Math.max(displayedWidth / actualImageWidth, displayedHeight / actualImageHeight);
-                            const scaledWidth = actualImageWidth * scale;
-                            const scaledHeight = actualImageHeight * scale;
-                            coverOffsetX = (scaledWidth - displayedWidth) / 2;
-                            coverOffsetY = (scaledHeight - displayedHeight) / 2;
-                          } else {
-                            scale = actualImageWidth / displayedWidth;
-                          }
-                          
-                          const originalUri = sourceImageUri.current || image;
-                          let cropMeta = null;
-                          
-                          if (points.length > 0) {
-                            try {
-                              const imagePoints = points.map(point => {
-                                let clampedX, clampedY, origX, origY;
-                                if (isCoverMode) {
-                                  clampedX = Math.max(0, Math.min(point.x, contentRect.width));
-                                  clampedY = Math.max(0, Math.min(point.y, contentRect.height));
-                                  origX = (clampedX + coverOffsetX) / scale;
-                                  origY = (clampedY + coverOffsetY) / scale;
-                                } else {
-                                  clampedX = Math.max(contentRect.x, Math.min(point.x, contentRect.x + contentRect.width));
-                                  clampedY = Math.max(contentRect.y, Math.min(point.y, contentRect.y + contentRect.height));
-                                  origX = (clampedX - contentRect.x) * scale;
-                                  origY = (clampedY - contentRect.y) * scale;
-                                }
-                                const finalX = Math.max(0, Math.min(origX, actualImageWidth));
-                                const finalY = Math.max(0, Math.min(origY, actualImageHeight));
-                                return { x: finalX, y: finalY };
-                              });
-                              
-                              const minX = Math.min(...imagePoints.map(p => p.x));
-                              const minY = Math.min(...imagePoints.map(p => p.y));
-                              const maxX = Math.max(...imagePoints.map(p => p.x));
-                              const maxY = Math.max(...imagePoints.map(p => p.y));
-                              
-                              const cropX = Math.max(0, Math.floor(minX));
-                              const cropY = Math.max(0, Math.floor(minY));
-                              const cropEndX = Math.min(actualImageWidth, Math.ceil(maxX));
-                              const cropEndY = Math.min(actualImageHeight, Math.ceil(maxY));
-                              const cropWidth = Math.max(0, cropEndX - cropX);
-                              const cropHeight = Math.max(0, cropEndY - cropY);
-                              
-                              if (cropWidth > 0 && cropHeight > 0) {
-                                const bbox = { x: cropX, y: cropY, width: cropWidth, height: cropHeight };
-                                const polygon = imagePoints.map(point => ({
-                                  x: point.x - cropX,
-                                  y: point.y - cropY
-                                }));
-                                cropMeta = {
-                                  bbox,
-                                  polygon,
-                                  rotation: 0,
-                                  imageSize: { width: actualImageWidth, height: actualImageHeight },
-                                };
-                              }
-                            } catch (cropError) {
-                              console.error("Error computing crop meta:", cropError);
-                            }
-                          }
-                          
-                          const name = `IMAGE XTK${Date.now()}`;
-                          if (onConfirm) {
-                            onConfirm(originalUri, name, cropMeta);
-                          }
-                        } catch (error) {
-                          console.error("Erreur lors du crop :", error);
-                          alert("Erreur lors du crop ! " + error.message);
-                        } finally {
-                          setShowResult(false);
-                          setIsLoading(false);
-                          setShowFullScreenCapture(false);
-                        }
-                      }}
-              >
-                <Text style={styles.buttonText}>Confirm</Text>
-              </TouchableOpacity>
-            </View>
-          )}
-
-          {/* ✅ Show welcome screen when no image */}
-          {!showResult && !image && (
-            <View style={styles.centerButtonsContainer}>
-              <Text style={styles.welcomeText}>Sélectionnez une image</Text>
-            </View>
-          )}
-        </>
-      )}
-
-            {/* ✅ CORRECTION : Vue de masque temporaire pour la capture
-                Cette vue est rendue hors écran mais nécessaire pour captureRef
-                Utiliser une position négative mais pas trop éloignée pour éviter les problèmes de captureRef */}
-            {showMaskView && maskImageUri && maskPoints.length > 0 && (
-              <View
-                style={{
-                  position: 'absolute',
-                  left: -maskDimensions.width - 100,
-                  top: -maskDimensions.height - 100,
-                  width: maskDimensions.width,
-                  height: maskDimensions.height,
-                  opacity: 1,
-                  pointerEvents: 'none',
-                  zIndex: 9999,
-                  overflow: 'hidden',
-                }}
-                collapsable={false}
-              >
-                <MaskView
-                  ref={maskViewRef}
-                  imageUri={maskImageUri}
-                  points={maskPoints}
-                  width={maskDimensions.width}
-                  height={maskDimensions.height}
-                />
-              </View>
-            )}
-
-            <Modal visible={isLoading} transparent animationType="fade">
-        <View style={styles.loadingOverlay}>
-          <Image
-            source={require('../src/assets/loadingCamera.gif')}
-            style={styles.loadingGif}
-            resizeMode="contain"
-          />
-        </View>
-      </Modal>
-    </View>
-  );
-};
-
+import styles from './ImageCropperStyles';
+import React, { useState, useRef, useEffect } from 'react';
+import { Modal, View, Image, TouchableOpacity, Animated, Text, Platform, SafeAreaView, PixelRatio, StyleSheet, ActivityIndicator, useWindowDimensions } from 'react-native';
+import Svg, { Path, Circle } from 'react-native-svg';
+import CustomCamera from './CustomCamera';
+import * as ImageManipulator from 'expo-image-manipulator';
+import { Ionicons } from '@expo/vector-icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { applyMaskToImage, MaskView } from './ImageMaskProcessor';
+
+const PRIMARY_GREEN = '#198754';
+
+// Max width for crop preview on large screens (tablets) - must match CustomCamera.js
+const CAMERA_PREVIEW_MAX_WIDTH = 500;
+
+const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rotationLabel }) => {
+  const { width: windowWidth } = useWindowDimensions();
+  const cameraPreviewWidth = Math.min(windowWidth, CAMERA_PREVIEW_MAX_WIDTH);
+
+  const [image, setImage] = useState(null);
+  const [points, setPoints] = useState([]);
+  const [showResult, setShowResult] = useState(false);
+  const [showCustomCamera, setShowCustomCamera] = useState(false);
+  const viewRef = useRef(null);
+  const maskViewRef = useRef(null); // Ref pour la vue de masque (invisible)
+  const sourceImageUri = useRef(null); // keep original image URI (full-res) for upload
+  const cameraFrameData = 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
+  const commonWrapperRef = useRef(null);
+  const commonWrapperLayout = 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)
+  const originalImageDimensions = useRef({ width: 0, height: 0 });
+  // Dimensions et position d'affichage à l'écran (pour le calcul des points de crop)
+  const displayedImageLayout = useRef({ x: 0, y: 0, width: 0, height: 0 });
+  // Conserver imageMeasure pour compatibilité avec le code existant (utilisé pour SVG overlay)
+  const imageMeasure = 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
+  const imageDisplayRect = useRef({ x: 0, y: 0, width: 0, height: 0 });
+  
+  // ✅ COMPATIBILITÉ : displayedContentRect reste pour le code existant, mais pointe vers imageDisplayRect
+  const 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
+  const updateImageDisplayRect = (wrapperWidth, wrapperHeight) => {
+    const iw = originalImageDimensions.current.width;
+    const 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)
+      const scale = Math.min(wrapperWidth / iw, wrapperHeight / ih);
+      const imageDisplayWidth = iw * scale;
+      const imageDisplayHeight = ih * scale;
+      const offsetX = (wrapperWidth - imageDisplayWidth) / 2;
+      const 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
+  const updateDisplayedContentRect = updateImageDisplayRect;
+  
+  const selectedPointIndex = useRef(null);
+  const lastTap = useRef(null);
+  
+  // ✅ CRITICAL: Guard to prevent double crop box initialization
+  // This ensures crop box is initialized only once, especially for camera images
+  const hasInitializedCropBox = useRef(false);
+  const imageSource = useRef(null); // 'camera' | 'gallery' | null
+  
+  // ✅ FREE DRAG: Store initial touch position and point position for delta-based movement
+  const initialTouchPosition = useRef(null); // { x, y } - initial touch position when drag starts
+  const initialPointPosition = useRef(null); // { x, y } - initial point position when drag starts
+  const lastTouchPosition = 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
+  const dragBase = 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
+  const touchOffset = useRef(null); // { x, y } - offset = pointPosition - touchPosition
+  
+  // ✅ Track if point was clamped in previous frame (to detect transition)
+  const wasClampedLastFrame = useRef({ x: false, y: false });
+  
+  // Angle de rotation accumulé (pour éviter les rotations multiples)
+  const rotationAngle = useRef(0);
+  
+  // États pour la vue de masque temporaire
+  const [maskImageUri, setMaskImageUri] = useState(null);
+  const [maskPoints, setMaskPoints] = useState([]);
+  const [maskDimensions, setMaskDimensions] = useState({ width: 0, height: 0 });
+  const [showMaskView, setShowMaskView] = useState(false);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [showFullScreenCapture, setShowFullScreenCapture] = useState(false);
+  const [isRotating, setIsRotating] = useState(false);
+  const rotationInProgressRef = useRef(false); // block duplicate taps immediately
+  const lastValidPosition = useRef(null);
+  const insets = useSafeAreaInsets();
+  
+  // ✅ NEW ARCH: mobile does NOT export the final crop.
+
+  // No view-shot / captureRef / bitmap masking on device.
+  const enableMask = false;
+  const enableRotation = true; // rotation resets crop box so it is re-initialized on rotated image.
+  
+
+
+
+
+  useEffect(() => {
+  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
+
+  useEffect(() => {
+    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) {
+      const { width: capturedWidth, height: capturedHeight } = cameraFrameData.current.capturedImageSize;
+      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
+      const 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
+    
+    Image.getSize(image, (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: Platform.OS,
+        pixelRatio: 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
+      const 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;
+        }
+      }
+    }, (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)
+  const 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
+    const 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)
+    let 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
+    const imageRectX = wrapper.x + imageRect.x;
+    const 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.
+    // Store points in WRAPPER-RELATIVE coordinates (greenFrame.x, greenFrame.y) so they match
+    // touch events (locationX/locationY are relative to the wrapper). This keeps display→image
+    // conversion correct in Confirm.
+    if (cameraFrameData.current && cameraFrameData.current.greenFrame && originalImageDimensions.current.width > 0) {
+      const greenFrame = cameraFrameData.current.greenFrame;
+      
+      const boxX = greenFrame.x;
+      const boxY = greenFrame.y;
+      const boxWidth = greenFrame.width;
+      const boxHeight = greenFrame.height;
+
+      // ✅ SAFETY: Validate calculated coordinates before creating points
+      const isValidCoordinate = (val) => 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;
+      }
+      
+      // ✅ Points in wrapper-relative coords (same as touch events)
+      const 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
+      const validPoints = newPoints.filter(p => 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: "Points in wrapper-relative coords - same as touch events and crop_image_size",
+      });
+
+      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
+    const boxWidth = imageRect.width * 0.70;  // 70% of visible image width
+    const boxHeight = imageRect.height * 0.70; // 70% of visible image height
+    const boxX = imageRectX + (imageRect.width - boxWidth) / 2; // Centered in image area
+    const boxY = imageRectY + (imageRect.height - boxHeight) / 2; // Centered in image area
+    
+    // ✅ SAFETY: Validate calculated coordinates before creating points
+    const isValidCoordinate = (val) => 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;
+    }
+    
+    const 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
+    const validPoints = newPoints.filter(p => 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)
+  const onCommonWrapperLayout = (e) => {
+    const 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
+  const onImageLayout = (e) => {
+    const 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
+    ) {
+      const { width, height } = cameraFrameData.current.capturedImageSize;
+      originalImageDimensions.current = { width, height };
+      console.log("✅ originalImageDimensions initialisées depuis cameraFrameData dans onImageLayout:", {
+        width,
+        height,
+      });
+    }
+
+    // ✅ RÉFÉRENTIEL UNIQUE : Recalculer imageDisplayRect dans le wrapper commun
+    // Si le wrapper commun n'est pas encore prêt, on attendra onCommonWrapperLayout
+    const 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();
+      }
+    }
+  };
+
+  const createPath = () => {
+    if (points.length < 1) return '';
+    let path = `M ${points[0].x} ${points[0].y} `;
+    points.forEach(point => path += `L ${point.x} ${point.y} `);
+    return path + 'Z';
+  };
+
+  // ✅ Helper function: Find closest point on a line segment to a tap point
+  const findClosestPointOnLine = (tapX, tapY, lineStartX, lineStartY, lineEndX, lineEndY) => {
+    const dx = lineEndX - lineStartX;
+    const dy = lineEndY - lineStartY;
+    const lengthSquared = dx * dx + dy * dy;
+    
+    if (lengthSquared === 0) {
+      // Line segment is a point
+      return { x: lineStartX, y: lineStartY, distance: Math.sqrt((tapX - lineStartX) ** 2 + (tapY - lineStartY) ** 2) };
+    }
+    
+    // Calculate projection parameter t (0 to 1)
+    const t = Math.max(0, Math.min(1, ((tapX - lineStartX) * dx + (tapY - lineStartY) * dy) / lengthSquared));
+    
+    // Calculate closest point on line segment
+    const closestX = lineStartX + t * dx;
+    const closestY = lineStartY + t * dy;
+    
+    // Calculate distance from tap to closest point
+    const distance = Math.sqrt((tapX - closestX) ** 2 + (tapY - closestY) ** 2);
+    
+    return { x: closestX, y: closestY, distance, t };
+  };
+
+  // ✅ Helper function: Check if tap is near any line segment and find closest point
+  const findClosestPointOnFrame = (tapX, tapY, lineTolerance = 30) => {
+    if (points.length < 2) return null;
+    
+    let closestPoint = null;
+    let minDistance = Infinity;
+    let insertIndex = -1;
+    
+    // Check each line segment (closed polygon: last point connects to first)
+    for (let i = 0; i < points.length; i++) {
+      const start = points[i];
+      const end = points[(i + 1) % points.length];
+      
+      const 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 } : null;
+  };
+
+  const handleTap = (e) => {
+    if (!image || showResult) return;
+    const now = Date.now();
+    const { locationX: tapX, locationY: tapY } = e.nativeEvent;
+
+    // ✅ 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
+    let imageRect = imageDisplayRect.current;
+    const 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
+    const imageRectX = wrapper.x + imageRect.x;
+    const imageRectY = wrapper.y + imageRect.y;
+    const { x: cx, y: cy, width: cw, height: ch } = {
+      x: imageRectX,
+      y: imageRectY,
+      width: imageRect.width,
+      height: imageRect.height
+    };
+    // ✅ Larger select radius for easier point selection (especially on touch screens)
+    const 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
+    const index = points.findIndex(p => 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 = { ...points[index] };
+      lastValidPosition.current = { ...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 {
+        const 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
+      const isDoubleTap = lastTap.current && now - lastTap.current < 300;
+      
+      if (isDoubleTap && points.length >= 2) {
+        // Find closest point on frame lines
+        const lineResult = findClosestPointOnFrame(tapX, tapY, 30); // 30px tolerance
+        
+        if (lineResult) {
+          const { point, insertIndex } = lineResult;
+          
+          // Check if a point already exists very close to this position
+          const exists = points.some(p => 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
+            const newPoints = [...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,
+              totalPoints: newPoints.length
+            });
+            
+            lastTap.current = null; // Reset to prevent triple-tap
+            return;
+          }
+        }
+      }
+    }
+    
+    lastTap.current = now;
+  };
+
+  const handleMove = (e) => {
+    if (showResult || selectedPointIndex.current === null) return;
+    
+    // ✅ FREE DRAG: Use delta-based movement for smooth, unconstrained dragging
+   
+    const nativeEvent = e.nativeEvent;
+    const currentX = nativeEvent.locationX;
+    const 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
+    let 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
+    let imageRect = imageDisplayRect.current;
+    const 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
+    const imageRectX = wrapper.x + imageRect.x;
+    const imageRectY = wrapper.y + imageRect.y;
+    const contentRect = {
+      x: imageRectX,
+      y: imageRectY,
+      width: imageRect.width,
+      height: imageRect.height
+    };
+    
+    // ✅ FREE DRAG: Ensure initial positions are set
+    if (!initialPointPosition.current) {
+      const currentPoint = points[selectedPointIndex.current];
+      if (currentPoint && typeof currentPoint.x === 'number' && typeof currentPoint.y === 'number') {
+        initialPointPosition.current = { ...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
+    const newX = currentX + touchOffset.current.x;
+    const newY = currentY + touchOffset.current.y;
+    
+    // ✅ SEPARATE DRAG BOUNDS vs CROP BOUNDS
+    const { x: cx, y: cy, width: cw, height: ch } = contentRect;
+    
+    // ✅ STRICT BOUNDS: For final crop safety (imageDisplayRect)
+    const strictMinX = cx;
+    const strictMaxX = cx + cw;
+    const strictMinY = cy;
+    const 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
+    const wrapperRect = wrapper;
+    const overshootMinX = wrapperRect.x;
+    const overshootMaxX = wrapperRect.x + wrapperRect.width;
+    const overshootMinY = wrapperRect.y;
+    const overshootMaxY = wrapperRect.y + wrapperRect.height;
+    
+    // ✅ DRAG BOUNDS: Clamp ONLY to overshootBounds during drag (NOT strictBounds)
+    const dragX = Math.max(overshootMinX, Math.min(newX, overshootMaxX));
+    const dragY = Math.max(overshootMinY, Math.min(newY, overshootMaxY));
+  
+    // ✅ UPDATE POINT: Use drag bounds (overshoot) - allows visual freedom
+    const 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)
+    const isAtOvershootMinX = Math.abs(dragX - overshootMinX) < 1;
+    const isAtOvershootMaxX = Math.abs(dragX - overshootMaxX) < 1;
+    const isAtOvershootMinY = Math.abs(dragY - overshootMinY) < 1;
+    const isAtOvershootMaxY = Math.abs(dragY - overshootMaxY) < 1;
+    
+    const isAtBoundaryX = isAtOvershootMinX || isAtOvershootMaxX;
+    const isAtBoundaryY = isAtOvershootMinY || isAtOvershootMaxY;
+    
+    // Only recalculate offset when FIRST hitting boundary (transition free → boundary)
+    const justHitBoundaryX = isAtBoundaryX && !wasClampedLastFrame.current.x;
+    const justHitBoundaryY = isAtBoundaryY && !wasClampedLastFrame.current.y;
+    
+    if (justHitBoundaryX || justHitBoundaryY) {
+      // Point JUST hit overshoot boundary - recalculate offset once
+      const newOffsetX = justHitBoundaryX ? (dragX - currentX) : touchOffset.current.x;
+      const 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)
+    const isInOvershootY = dragY < strictMinY || dragY > strictMaxY;
+    if (isInOvershootY && !isAtBoundaryY) {
+      console.log("🎯 IN OVERSHOOT ZONE:", {
+        touchY: currentY.toFixed(2),
+        appliedY: dragY.toFixed(2),
+        overshootRange: `${overshootMinY.toFixed(2)} - ${overshootMaxY.toFixed(2)}`,
+        strictRange: `${strictMinY.toFixed(2)} - ${strictMaxY.toFixed(2)}`
+      });
+    }
+    
+    // ✅ Update lastValidPosition ONLY if point is within strictBounds
+    const 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(prev => {
+      // ✅ SAFETY: Ensure prev is a valid array
+      if (!Array.isArray(prev) || prev.length === 0) {
+        return prev;
+      }
+      
+      const 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
+      const newPoints = prev.map((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]?.y.toFixed(2),
+        newY: newPoints[pointIndex]?.y.toFixed(2),
+        changed: Math.abs(prev[pointIndex]?.y - newPoints[pointIndex]?.y) > 0.01
+      });
+      
+      return newPoints;
+    });
+  };
+
+  const handleRelease = () => {
+    const 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) {
+      const wrapper = commonWrapperLayout.current;
+      let 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) {
+        const imageRectX = wrapper.x + imageRect.x;
+        const imageRectY = wrapper.y + imageRect.y;
+        const imageRectMaxX = imageRectX + imageRect.width;
+        const imageRectMaxY = imageRectY + imageRect.height;
+        
+        // Clamp the dragged point back to strict image bounds
+        setPoints(prev => {
+          // ✅ SAFETY: Ensure prev is a valid array
+          if (!Array.isArray(prev) || prev.length === 0) {
+            return prev;
+          }
+          
+          const pointIndex = selectedPointIndex.current;
+          // ✅ SAFETY: Validate pointIndex and ensure point exists
+          if (pointIndex === null || pointIndex === undefined || pointIndex < 0 || pointIndex >= prev.length) {
+            return prev;
+          }
+          
+          const 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;
+          }
+          
+          const 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((p, i) => 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(() => {
+          // ScrollView will be re-enabled automatically when responder is released
+        }, 100);
+      } catch (e) {
+        // Ignore errors
+      }
+    }
+  };
+
+  const 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
+const rotatePreviewImage = async (degrees) => {
+    if (!image) return;
+    if (rotationInProgressRef.current) return; // block duplicate taps immediately (no re-render delay)
+    rotationInProgressRef.current = true;
+    setIsRotating(true);
+
+    try {
+      rotationAngle.current = (rotationAngle.current + degrees) % 360;
+
+      // Use JPEG for preview rotation (faster than PNG for large images; quality 0.92 is fine for preview)
+      const rotated = await ImageManipulator.manipulateAsync(
+        image,
+        [{ rotate: degrees }],
+        {
+          compress: 0.92,
+          format: ImageManipulator.SaveFormat.JPEG,
+        }
+      );
+
+      // ✅ Send rotated image to backend: use rotated URI and dimensions so crop bbox matches
+      sourceImageUri.current = rotated.uri;
+      originalImageDimensions.current = {
+        width: rotated.width,
+        height: rotated.height,
+      };
+      cameraFrameData.current = null; // rotated image is no longer "camera preview" frame
+      imageSource.current = 'gallery'; // so layout callbacks run initializeCropBox() and show the white box
+
+      setPoints([]);
+      hasInitializedCropBox.current = false;
+      setImage(rotated.uri);
+      console.log("Rotation applied:", degrees, "degrees; accumulated:", rotationAngle.current);
+    } catch (error) {
+      console.error("Error rotating image:", error);
+      alert("Error rotating image");
+    } finally {
+      rotationInProgressRef.current = false;
+      setIsRotating(false);
+    }
+  };
+
+  // Helper function to wait for multiple render cycles (works on iOS)
+  const waitForRender = (cycles = 5) => {
+    return new Promise((resolve) => {
+      let count = 0;
+      const tick = () => {
+        count++;
+        if (count >= cycles) {
+          resolve();
+        } else {
+          setImmediate(tick);
+        }
+      };
+      setImmediate(tick);
+    });
+  };
+
+
+  return (
+    <View style={styles.container}>
+
+      {showCustomCamera ? (
+        <CustomCamera
+          onPhotoCaptured={(uri, frameData) => { 
+            // ✅ Reset refs for new image so second (and later) photos don't use first image's layout (fixes white screen on some devices)
+            originalImageDimensions.current = { width: 0, height: 0 };
+            imageDisplayRect.current = { x: 0, y: 0, width: 0, height: 0 };
+            displayedImageLayout.current = { x: 0, y: 0, width: 0, height: 0 };
+            imageMeasure.current = { x: 0, y: 0, width: 0, height: 0 };
+            sourceImageUri.current = uri;
+
+            // ✅ 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={() => setShowCustomCamera(false)}
+        />
+      ) : (
+        <>
+          {image && (
+            <View
+              style={[
+                styles.commonWrapper,
+                { width: cameraPreviewWidth },
+              ]}
+              ref={commonWrapperRef}
+              onLayout={onCommonWrapperLayout}
+            >
+              <View
+                ref={viewRef}
+                collapsable={false}
+                style={StyleSheet.absoluteFill}
+                onStartShouldSetResponder={() => true}
+                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
+                  const 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={(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={(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={() => {
+                  // ✅ 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={() => {
+                  // Always capture start events
+                  return true;
+                }}
+                onMoveShouldSetResponderCapture={(evt, gestureState) => {
+                  // ✅ CRITICAL: Always capture movement events before parent ScrollView
+                  // This is essential for vertical movement which ScrollView tries to intercept
+                  // Especially important when a point is selected or when there's any movement
+                  if (selectedPointIndex.current !== null) {
+                    return true;
+                  }
+                  // ✅ CRITICAL: Capture movement BEFORE ScrollView can intercept
+                  // This ensures we get vertical movement even if ScrollView tries to steal it
+                  const hasMovement = Math.abs(gestureState.dx) > 0 || Math.abs(gestureState.dy) > 0;
+                  return hasMovement;
+                }}
+              >
+                <Image
+                  key={image}
+                  source={{ uri: image }}
+                  style={styles.image}
+                  resizeMode={cameraFrameData.current?.greenFrame ? 'cover' : 'contain'}
+                  onLayout={onImageLayout}
+                />
+                {/* ✅ RÉFÉRENTIEL UNIQUE : SVG overlay utilise les dimensions du wrapper commun */}
+                {/* IMPORTANT: prevent SVG overlay from stealing touch events so dragging works reliably */}
+                <Svg style={styles.overlay} pointerEvents="none">
+                  {(() => {
+                    // ✅ Use wrapper dimensions for SVG path (wrapper coordinates)
+                    const wrapperWidth = commonWrapperLayout.current.width || cameraPreviewWidth;
+                    const wrapperHeight = commonWrapperLayout.current.height || (cameraPreviewWidth * 16 / 9);
+                    return (
+                      <>
+                        <Path
+                          d={`M 0 0 H ${wrapperWidth} V ${wrapperHeight} H 0 Z ${createPath()}`}
+                          fill={showResult ? 'white' : 'rgba(0, 0, 0, 0.8)'}
+                          fillRule="evenodd"
+                        />
+                        {!showResult && points.length > 0 && (
+                          <Path d={createPath()} fill="transparent" stroke="white" strokeWidth={2} />
+                        )}
+                        {!showResult && points.map((point, index) => (
+                          <Circle key={index} cx={point.x} cy={point.y} r={10} fill="white" />
+                        ))}
+                      </>
+                    );
+                  })()}
+                </Svg>
+              </View>
+              {isRotating && (
+                <View style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center' }}>
+                  <ActivityIndicator size="large" color={PRIMARY_GREEN} />
+                  <Text style={{ color: PRIMARY_GREEN, marginTop: 8, fontSize: 14 }}>{rotationLabel ?? 'Rotation...'}</Text>
+                </View>
+              )}
+            </View>
+          )}
+
+          {/* ✅ Buttons positioned BELOW the image, not overlapping */}
+          {!showResult && image && (
+            <View style={[styles.buttonContainerBelow, { paddingBottom: Math.max(insets.bottom, 16) }]}>
+              {Platform.OS === 'android' && (
+                <TouchableOpacity 
+                  style={[styles.rotationButton, isRotating && { opacity: 0.7 }]} 
+                  onPress={() => enableRotation && rotatePreviewImage(90)}
+                  disabled={isRotating}
+                >
+                  {isRotating ? (
+                    <ActivityIndicator size="small" color="white" />
+                  ) : (
+                    <Ionicons name="sync" size={24} color="white" />
+                  )}
+                </TouchableOpacity>
+              )}
+              
+              <TouchableOpacity style={styles.button} onPress={handleReset}>
+                <Text style={styles.buttonText}>Reset</Text>
+              </TouchableOpacity>
+              
+              <TouchableOpacity
+                style={styles.button}
+                onPress={async () => {
+                        setIsLoading(true);
+                        try {
+                          console.log("=== Starting pixel-perfect metadata export (no bitmap crop on mobile) ===");
+                          
+                          let actualImageWidth = originalImageDimensions.current.width;
+                          let actualImageHeight = originalImageDimensions.current.height;
+                          
+                          // ✅ CRITICAL: Camera JPEGs often have EXIF 6 (90° CW). The Image component displays
+                          // the EXIF-corrected view (3120×4160 portrait) but takePictureAsync returns raw (4160×3120).
+                          // Use swapped dimensions for coordinate conversion so bbox matches what the user sees.
+                          const isCoverMode = !!(cameraFrameData.current && cameraFrameData.current.greenFrame);
+                          const captured = cameraFrameData.current?.capturedImageSize;
+                          if (isCoverMode && captured && captured.width > captured.height) {
+                            actualImageWidth = captured.height;
+                            actualImageHeight = captured.width;
+                            console.log("✅ Using EXIF-swapped dimensions for bbox (raw was landscape, display is portrait):", {
+                              raw: { w: captured.width, h: captured.height },
+                              display: { w: actualImageWidth, h: actualImageHeight },
+                            });
+                          }
+                          
+                          if (actualImageWidth === 0 || actualImageHeight === 0) {
+                            throw new Error("Original image dimensions not available. Please wait for image to load.");
+                          }
+                          
+                          const layout = displayedImageLayout.current;
+                          if (layout.width > 0 && layout.height > 0) {
+                            updateDisplayedContentRect(layout.width, layout.height);
+                          }
+                          
+                          let contentRect = displayedContentRect.current;
+                          let displayedWidth = contentRect.width;
+                          let displayedHeight = contentRect.height;
+                          
+                          if (displayedWidth === 0 || displayedHeight === 0) {
+                            if (layout.width > 0 && layout.height > 0) {
+                              contentRect = {
+                                x: layout.x,
+                                y: layout.y,
+                                width: layout.width,
+                                height: layout.height
+                              };
+                              displayedWidth = contentRect.width;
+                              displayedHeight = contentRect.height;
+                              displayedContentRect.current = contentRect;
+                            } else {
+                              throw new Error("Displayed image dimensions not available.");
+                            }
+                          }
+                          
+                          let scale, coverOffsetX = 0, coverOffsetY = 0;
+                          if (isCoverMode) {
+                            scale = Math.max(displayedWidth / actualImageWidth, displayedHeight / actualImageHeight);
+                            const scaledWidth = actualImageWidth * scale;
+                            const scaledHeight = actualImageHeight * scale;
+                            coverOffsetX = (scaledWidth - displayedWidth) / 2;
+                            coverOffsetY = (scaledHeight - displayedHeight) / 2;
+                          } else {
+                            scale = actualImageWidth / displayedWidth;
+                          }
+                          
+                          const originalUri = sourceImageUri.current || image;
+                          let cropMeta = null;
+                          
+                          if (points.length > 0) {
+                            try {
+                              const imagePoints = points.map(point => {
+                                let clampedX, clampedY, origX, origY;
+                                if (isCoverMode) {
+                                  clampedX = Math.max(0, Math.min(point.x, contentRect.width));
+                                  clampedY = Math.max(0, Math.min(point.y, contentRect.height));
+                                  origX = (clampedX + coverOffsetX) / scale;
+                                  origY = (clampedY + coverOffsetY) / scale;
+                                } else {
+                                  clampedX = Math.max(contentRect.x, Math.min(point.x, contentRect.x + contentRect.width));
+                                  clampedY = Math.max(contentRect.y, Math.min(point.y, contentRect.y + contentRect.height));
+                                  origX = (clampedX - contentRect.x) * scale;
+                                  origY = (clampedY - contentRect.y) * scale;
+                                }
+                                const finalX = Math.max(0, Math.min(origX, actualImageWidth));
+                                const finalY = Math.max(0, Math.min(origY, actualImageHeight));
+                                return { x: finalX, y: finalY };
+                              });
+                              
+                              const minX = Math.min(...imagePoints.map(p => p.x));
+                              const minY = Math.min(...imagePoints.map(p => p.y));
+                              const maxX = Math.max(...imagePoints.map(p => p.x));
+                              const maxY = Math.max(...imagePoints.map(p => p.y));
+                              
+                              const cropX = Math.max(0, Math.floor(minX));
+                              const cropY = Math.max(0, Math.floor(minY));
+                              const cropEndX = Math.min(actualImageWidth, Math.ceil(maxX));
+                              const cropEndY = Math.min(actualImageHeight, Math.ceil(maxY));
+                              const cropWidth = Math.max(0, cropEndX - cropX);
+                              const cropHeight = Math.max(0, cropEndY - cropY);
+                              
+                              if (cropWidth > 0 && cropHeight > 0) {
+                                const bbox = { x: cropX, y: cropY, width: cropWidth, height: cropHeight };
+                                const polygon = imagePoints.map(point => ({
+                                  x: point.x - cropX,
+                                  y: point.y - cropY
+                                }));
+                                cropMeta = {
+                                  bbox,
+                                  polygon,
+                                  rotation: 0,
+                                  imageSize: { width: actualImageWidth, height: actualImageHeight },
+                                };
+                              }
+                            } catch (cropError) {
+                              console.error("Error computing crop meta:", cropError);
+                            }
+                          }
+                          
+                          const name = `IMAGE XTK${Date.now()}`;
+                          if (onConfirm) {
+                            onConfirm(originalUri, name, cropMeta);
+                          }
+                        } catch (error) {
+                          console.error("Erreur lors du crop :", error);
+                          alert("Erreur lors du crop ! " + error.message);
+                        } finally {
+                          setShowResult(false);
+                          setIsLoading(false);
+                          setShowFullScreenCapture(false);
+                        }
+                      }}
+              >
+                <Text style={styles.buttonText}>Confirm</Text>
+              </TouchableOpacity>
+            </View>
+          )}
+
+          {/* ✅ Show welcome screen when no image */}
+          {!showResult && !image && (
+            <View style={styles.centerButtonsContainer}>
+              <Text style={styles.welcomeText}>Sélectionnez une image</Text>
+            </View>
+          )}
+        </>
+      )}
+
+            {/* ✅ CORRECTION : Vue de masque temporaire pour la capture
+                Cette vue est rendue hors écran mais nécessaire pour captureRef
+                Utiliser une position négative mais pas trop éloignée pour éviter les problèmes de captureRef */}
+            {showMaskView && maskImageUri && maskPoints.length > 0 && (
+              <View
+                style={{
+                  position: 'absolute',
+                  left: -maskDimensions.width - 100,
+                  top: -maskDimensions.height - 100,
+                  width: maskDimensions.width,
+                  height: maskDimensions.height,
+                  opacity: 1,
+                  pointerEvents: 'none',
+                  zIndex: 9999,
+                  overflow: 'hidden',
+                }}
+                collapsable={false}
+              >
+                <MaskView
+                  ref={maskViewRef}
+                  imageUri={maskImageUri}
+                  points={maskPoints}
+                  width={maskDimensions.width}
+                  height={maskDimensions.height}
+                />
+              </View>
+            )}
+
+            <Modal visible={isLoading} transparent animationType="fade">
+        <View style={styles.loadingOverlay}>
+          <Image
+            source={require('../src/assets/loadingCamera.gif')}
+            style={styles.loadingGif}
+            resizeMode="contain"
+          />
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
 export default ImageCropper;