react-native-expo-cropper 1.2.37 → 1.2.39

package/src/ImageCropper.js

@@ -1,11 +1,9 @@
 import styles from './ImageCropperStyles';
 import React, { useState, useRef, useEffect } from 'react';
-import { Modal,View, Image, Dimensions, TouchableOpacity, Animated, Text, Platform, SafeAreaView, PixelRatio } from 'react-native';
+import { Modal, View, Image, Dimensions, TouchableOpacity, Animated, Text, Platform, SafeAreaView, PixelRatio, StyleSheet } from 'react-native';
 import Svg, { Path, Circle } from 'react-native-svg';
-import { captureRef } from 'react-native-view-shot';
 import CustomCamera from './CustomCamera';
 import * as ImageManipulator from 'expo-image-manipulator';
-import * as FileSystem from 'expo-file-system';
 import { Ionicons } from '@expo/vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { applyMaskToImage, MaskView } from './ImageMaskProcessor';
@@ -22,6 +20,11 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
   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 });
@@ -29,53 +32,94 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
   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 });
-  // Rectangle réel de l'image affichée (quand resizeMode='contain') à l'intérieur du conteneur
-  // Sert à rendre la conversion coordonnées écran -> pixels image réellement pixel-perfect.
-  const displayedContentRect = 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;
 
-  const updateDisplayedContentRect = (layoutWidth, layoutHeight) => {
+  // ✅ 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;
     
-    console.log("🔄 updateDisplayedContentRect called:", {
+    // ✅ CAMERA IMAGE: Use full wrapper so green frame and white frame show same content
+    if (cameraFrameData.current && cameraFrameData.current.greenFrame && wrapperWidth > 0 && wrapperHeight > 0) {
+      imageDisplayRect.current = { x: 0, y: 0, width: wrapperWidth, height: wrapperHeight };
+      console.log("✅ Image display rect (COVER mode for camera - full wrapper):", imageDisplayRect.current);
+      return;
+    }
+    
+    console.log("🔄 updateImageDisplayRect called:", {
       originalDimensions: { width: iw, height: ih },
-      layoutDimensions: { width: layoutWidth, height: layoutHeight }
+      wrapperDimensions: { width: wrapperWidth, height: wrapperHeight }
     });
     
-    if (iw > 0 && ih > 0 && layoutWidth > 0 && layoutHeight > 0) {
-      const scale = Math.min(layoutWidth / iw, layoutHeight / ih);
-      const contentW = iw * scale;
-      const contentH = ih * scale;
-      const offsetX = (layoutWidth - contentW) / 2;
-      const offsetY = (layoutHeight - contentH) / 2;
-      displayedContentRect.current = {
+    if (iw > 0 && ih > 0 && wrapperWidth > 0 && wrapperHeight > 0) {
+      // Calculer comment l'image s'affiche en "contain" dans le wrapper (gallery)
+      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: contentW,
-        height: contentH,
+        width: imageDisplayWidth,
+        height: imageDisplayHeight,
       };
-      console.log("✅ Displayed content rect (contain) calculated:", displayedContentRect.current);
+      console.log("✅ Image display rect (contain in wrapper) calculated:", {
+        wrapper: { width: wrapperWidth, height: wrapperHeight },
+        imageDisplayRect: imageDisplayRect.current,
+        scale: scale.toFixed(4)
+      });
       return;
     }
     
-    // ✅ FALLBACK: If original dimensions not available yet, use layout as temporary measure
-    if (layoutWidth > 0 && layoutHeight > 0) {
-      displayedContentRect.current = { x: 0, y: 0, width: layoutWidth, height: layoutHeight };
-      console.log("⚠️ Using layout dimensions as fallback (original dimensions not available yet):", displayedContentRect.current);
+    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 {
-      displayedContentRect.current = { x: 0, y: 0, width: 0, height: 0 };
-      console.warn("❌ Cannot calculate displayedContentRect: missing dimensions");
+      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);
   
@@ -92,7 +136,7 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
   const insets = useSafeAreaInsets();
   
   // ✅ NEW ARCH: mobile does NOT export the final crop.
-  // We only compute crop metadata (bbox + polygon) and upload the ORIGINAL image to backend Python.
+
   // No view-shot / captureRef / bitmap masking on device.
   const enableMask = false;
   const enableRotation = false; // rotation would require careful coord transforms; keep off for pixel-perfect pipeline.
@@ -113,57 +157,115 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
   rotationAngle.current = 0;
   // Clear camera frame data for gallery images
   cameraFrameData.current = null;
+  // ✅ CRITICAL: Reset initialization guard for new image
+  hasInitializedCropBox.current = false;
+  imageSource.current = null;
 }
 }, [openCameraFirst, initialImage]);
 
 
   // ✅ REFACTORISATION : Stocker uniquement les dimensions originales (pas de calcul théorique)
-  // ✅ CRITICAL FIX: Get dimensions and account for potential scale factor differences
-  // On Android, Image.getSize() returns physical pixels, but the image sent to backend
-  // might be at a different scale. We'll send original dimensions to backend for adjustment.
+  // ✅ CRITICAL FIX: Single source of truth for image dimensions
+
   useEffect(() => {
     if (!image) {
       originalImageDimensions.current = { width: 0, height: 0 };
+      hasInitializedCropBox.current = false;
+      imageSource.current = null;
       return;
     }
     if (!sourceImageUri.current) {
       sourceImageUri.current = image;
     }
 
-    // ✅ CRITICAL FIX: If we have capturedImageSize from camera, use it as source of truth
+    // ✅ CRITICAL FIX #1: If we have capturedImageSize from camera, use it as SINGLE SOURCE OF TRUTH
     // takePictureAsync returns physical dimensions, while Image.getSize() may return EXIF-oriented dimensions
+    // DO NOT call Image.getSize() for camera images - it can return swapped dimensions on Android
     if (cameraFrameData.current && cameraFrameData.current.capturedImageSize) {
       const { width: capturedWidth, height: capturedHeight } = cameraFrameData.current.capturedImageSize;
       originalImageDimensions.current = {
         width: capturedWidth,
         height: capturedHeight,
       };
-      console.log("✅ Using captured image dimensions from takePictureAsync:", {
+      imageSource.current = 'camera';
+      hasInitializedCropBox.current = false; // Reset guard for new camera image
+      
+      console.log("✅ Using captured image dimensions from takePictureAsync (SINGLE SOURCE OF TRUTH):", {
         width: capturedWidth,
         height: capturedHeight,
-        source: 'takePictureAsync'
+        source: 'takePictureAsync',
+        note: 'Image.getSize() will NOT be called for camera images'
       });
-      // ✅ CRITICAL: Use displayedImageLayout dimensions if available, otherwise wait for onImageLayout
-      const lw = displayedImageLayout.current.width;
-      const lh = displayedImageLayout.current.height;
-      if (lw > 0 && lh > 0) {
-        updateDisplayedContentRect(lw, lh);
-        // ✅ CRITICAL: Initialize crop box when we have camera frame data and image dimensions
-        if (points.length === 0) {
+      
+      // ✅ CRITICAL: Recalculate imageDisplayRect immediately with camera dimensions
+      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;
+      
+      return; // ✅ CRITICAL: Exit early - DO NOT call Image.getSize()
     }
 
-    // ✅ FALLBACK: Use Image.getSize() if no captured dimensions available (e.g., from gallery)
+    // ✅ 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():", {
+      console.log("✅ Image dimensions from Image.getSize() (gallery image):", {
         width: imgWidth,
         height: imgHeight,
         platform: Platform.OS,
@@ -172,17 +274,18 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
         source: 'Image.getSize()'
       });
 
-      // ✅ IMPORTANT: onImageLayout peut se déclencher avant Image.getSize (race condition).
-      // Recalculer le contentRect dès qu'on connaît la taille originale, sinon les coords seront décalées.
-      const lw = displayedImageLayout.current.width;
-      const lh = displayedImageLayout.current.height;
-      if (lw > 0 && lh > 0) {
-        updateDisplayedContentRect(lw, lh);
-        // ✅ CRITICAL: Initialize crop box when we have image dimensions
-        // - If we have camera frame data, use it to match green frame exactly
-        // - If no camera frame data (gallery image), initialize with 70% default box
-        if (points.length === 0) {
+      // ✅ RÉFÉRENTIEL UNIQUE : Recalculer imageDisplayRect dans le wrapper commun
+      // dès qu'on connaît la taille originale de l'image
+      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) => {
@@ -191,479 +294,165 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
   }, [image]);
 
 
-  // ✅ CRITICAL FIX: Convert green frame coordinates (camera preview) to captured image coordinates
-  const convertGreenFrameToImageCoords = (greenFrame, capturedImageSize, displayedImageRect) => {
-    if (!greenFrame || !capturedImageSize) {
-      console.warn("Cannot convert green frame: missing data");
-      return null;
-    }
-
-    const { x: frameX, y: frameY, width: frameWidth, height: frameHeight, wrapperWidth, wrapperHeight } = greenFrame;
-    const { width: imgWidth, height: imgHeight } = capturedImageSize;
-    const { x: displayX, y: displayY, width: displayWidth, height: displayHeight } = displayedImageRect;
-
-    console.log("🔄 Converting green frame:", {
-      greenFrame: { frameX, frameY, frameWidth, frameHeight, wrapperWidth, wrapperHeight },
-      capturedImageSize: { imgWidth, imgHeight },
-      displayedImageRect: { displayX, displayY, displayWidth, displayHeight }
-    });
-
-    // ✅ SIMPLIFIED APPROACH: Assume CameraView fills the wrapper completely (no letterboxing in preview)
-    // The green frame is drawn as a percentage of the wrapper (95% width, 80% height)
-    // We need to map this directly to the captured image, accounting for aspect ratio differences
-    
-    const previewAspect = wrapperWidth / wrapperHeight;
-    const capturedAspect = imgWidth / imgHeight;
-
-    console.log("📐 Aspect ratios:", {
-      previewAspect: previewAspect.toFixed(3),
-      capturedAspect: capturedAspect.toFixed(3),
-      wrapperSize: { wrapperWidth, wrapperHeight },
-      capturedSize: { imgWidth, imgHeight }
-    });
-
-    // ✅ KEY INSIGHT: The green frame is 95% of wrapper width and 80% of wrapper height
-    // If the captured image has a different aspect ratio, we need to map proportionally
-    // The green frame represents a region in the preview, which should map to the same region in the image
-    
-    // Calculate green frame as percentage of wrapper
-    const greenFramePercentX = frameX / wrapperWidth;
-    const greenFramePercentY = frameY / wrapperHeight;
-    const greenFramePercentWidth = frameWidth / wrapperWidth;
-    const greenFramePercentHeight = frameHeight / wrapperHeight;
-
-    console.log("📊 Green frame as percentage of wrapper:", {
-      x: (greenFramePercentX * 100).toFixed(2) + '%',
-      y: (greenFramePercentY * 100).toFixed(2) + '%',
-      width: (greenFramePercentWidth * 100).toFixed(2) + '%',
-      height: (greenFramePercentHeight * 100).toFixed(2) + '%'
-    });
 
-    // ✅ DIRECT MAPPING: Map green frame percentage directly to captured image
-    // The green frame covers a certain percentage of the preview, which should map to the same percentage of the image
-    // However, we need to account for aspect ratio differences
-    
-    // If preview and captured have same aspect ratio, direct mapping works
-    // If different, we need to account for letterboxing in the preview
-    
-    // Calculate how the captured image would be displayed in the preview (aspect-fit)
-    let previewContentWidth, previewContentHeight, previewOffsetX, previewOffsetY;
-    
-    if (Math.abs(capturedAspect - previewAspect) < 0.01) {
-      // Same aspect ratio → no letterboxing, direct mapping
-      previewContentWidth = wrapperWidth;
-      previewContentHeight = wrapperHeight;
-      previewOffsetX = 0;
-      previewOffsetY = 0;
-    } else if (capturedAspect > previewAspect) {
-      // Image is wider → fills width, letterboxing on top/bottom
-      previewContentWidth = wrapperWidth;
-      previewContentHeight = wrapperWidth / capturedAspect;
-      previewOffsetX = 0;
-      previewOffsetY = (wrapperHeight - previewContentHeight) / 2;
-    } else {
-      // Image is taller → fills height, letterboxing on left/right
-      previewContentHeight = wrapperHeight;
-      previewContentWidth = wrapperHeight * capturedAspect;
-      previewOffsetX = (wrapperWidth - previewContentWidth) / 2;
-      previewOffsetY = 0;
+ 
+  // Le cadre blanc doit être calculé sur le MÊME wrapper que le cadre vert (9/16)
+  // Ensuite, on restreint les points pour qu'ils restent dans imageDisplayRect (image visible)
+  const initializeCropBox = () => {
+    // ✅ CRITICAL FIX #2: Guard against double initialization
+    if (hasInitializedCropBox.current) {
+      console.log("⚠️ Crop box already initialized, skipping duplicate initialization");
+      return;
     }
-
-    console.log("📐 Preview content area (actual image area in preview):", {
-      previewContentWidth: previewContentWidth.toFixed(2),
-      previewContentHeight: previewContentHeight.toFixed(2),
-      previewOffsetX: previewOffsetX.toFixed(2),
-      previewOffsetY: previewOffsetY.toFixed(2)
-    });
-
-    // Step 3: Convert green frame coordinates from wrapper space to preview content space
-    // ✅ CRITICAL FIX: The green frame is drawn on the wrapper, but we need to map it to the actual image area
-    // If the green frame overlaps letterboxing areas, we need to clip it to the actual image content area
-    
-    // Calculate green frame bounds in wrapper coordinates
-    const frameLeft = frameX;
-    const frameTop = frameY;
-    const frameRight = frameX + frameWidth;
-    const frameBottom = frameY + frameHeight;
-    
-    // Calculate preview content bounds in wrapper coordinates
-    const contentLeft = previewOffsetX;
-    const contentTop = previewOffsetY;
-    const contentRight = previewOffsetX + previewContentWidth;
-    const contentBottom = previewOffsetY + previewContentHeight;
     
-    // ✅ KEY INSIGHT: The green frame should map to the same percentage of the image content area
-    // But we need to account for letterboxing - the green frame might extend into letterboxing areas
-    
-    // ✅ Clip green frame to preview content area (intersection)
-    const clippedLeft = Math.max(frameLeft, contentLeft);
-    const clippedTop = Math.max(frameTop, contentTop);
-    const clippedRight = Math.min(frameRight, contentRight);
-    const clippedBottom = Math.min(frameBottom, contentBottom);
-    
-    // Calculate clipped green frame dimensions
-    const clippedWidth = Math.max(0, clippedRight - clippedLeft);
-    const clippedHeight = Math.max(0, clippedBottom - clippedTop);
-    
-    // If green frame is completely outside content area, return null
-    if (clippedWidth <= 0 || clippedHeight <= 0) {
-      console.error("❌ Green frame is completely outside preview content area!");
-      return null;
+    // ✅ CRITICAL: Ensure common wrapper layout is available
+    const wrapper = commonWrapperLayout.current;
+    if (wrapper.width === 0 || wrapper.height === 0) {
+      console.warn("Cannot initialize crop box: common wrapper layout not ready");
+      return;
     }
     
-    // ✅ ALTERNATIVE APPROACH: Map green frame as percentage of image content area
-    // The green frame covers a certain percentage of the wrapper, but we want it to cover
-    // the same visual percentage of the image content area
-    
-    // Calculate green frame center and size as percentage of wrapper
-    const greenFrameCenterX = (frameLeft + frameRight) / 2;
-    const greenFrameCenterY = (frameTop + frameBottom) / 2;
-    const greenFrameCenterPercentX = greenFrameCenterX / wrapperWidth;
-    const greenFrameCenterPercentY = greenFrameCenterY / wrapperHeight;
-    
-    // Map center to image content area
-    const imageContentCenterX = previewOffsetX + previewContentWidth * greenFrameCenterPercentX;
-    const imageContentCenterY = previewOffsetY + previewContentHeight * greenFrameCenterPercentY;
-    
-    // Calculate green frame size as percentage of image content area (not wrapper)
-    // The green frame should cover the same visual percentage of the image as it does of the wrapper
-    const imageContentFrameWidth = previewContentWidth * greenFramePercentWidth;
-    const imageContentFrameHeight = previewContentHeight * greenFramePercentHeight;
-    
-    // Calculate final green frame in image content coordinates
-    const finalFrameX = imageContentCenterX - imageContentFrameWidth / 2;
-    const finalFrameY = imageContentCenterY - imageContentFrameHeight / 2;
-    const finalFrameWidth = imageContentFrameWidth;
-    const finalFrameHeight = imageContentFrameHeight;
-    
-    // Clamp to image content bounds
-    const clampedFinalX = Math.max(previewOffsetX, Math.min(finalFrameX, previewOffsetX + previewContentWidth - finalFrameWidth));
-    const clampedFinalY = Math.max(previewOffsetY, Math.min(finalFrameY, previewOffsetY + previewContentHeight - finalFrameHeight));
-    const clampedFinalWidth = Math.min(finalFrameWidth, previewOffsetX + previewContentWidth - clampedFinalX);
-    const clampedFinalHeight = Math.min(finalFrameHeight, previewOffsetY + previewContentHeight - clampedFinalY);
-    
-    // Convert to relative coordinates within preview content area
-    const relativeX = clampedFinalX - previewOffsetX;
-    const relativeY = clampedFinalY - previewOffsetY;
-    
-    // Normalize to 0-1 range within the preview content area (actual image area)
-    const normalizedX = relativeX / previewContentWidth;
-    const normalizedY = relativeY / previewContentHeight;
-    const normalizedWidth = clampedFinalWidth / previewContentWidth;
-    const normalizedHeight = clampedFinalHeight / previewContentHeight;
-    
-    console.log("✂️ Green frame mapping (percentage-based):", {
-      originalFrame: { frameX, frameY, frameWidth, frameHeight },
-      greenFramePercentages: {
-        centerX: (greenFrameCenterPercentX * 100).toFixed(2) + '%',
-        centerY: (greenFrameCenterPercentY * 100).toFixed(2) + '%',
-        width: (greenFramePercentWidth * 100).toFixed(2) + '%',
-        height: (greenFramePercentHeight * 100).toFixed(2) + '%'
-      },
-      previewContent: { previewOffsetX, previewOffsetY, previewContentWidth, previewContentHeight },
-      mappedFrame: {
-        finalX: finalFrameX.toFixed(2),
-        finalY: finalFrameY.toFixed(2),
-        finalWidth: finalFrameWidth.toFixed(2),
-        finalHeight: finalFrameHeight.toFixed(2)
-      },
-      clampedFrame: {
-        x: clampedFinalX.toFixed(2),
-        y: clampedFinalY.toFixed(2),
-        width: clampedFinalWidth.toFixed(2),
-        height: clampedFinalHeight.toFixed(2)
-      },
-      normalized: { 
-        normalizedX: normalizedX.toFixed(4), 
-        normalizedY: normalizedY.toFixed(4), 
-        normalizedWidth: normalizedWidth.toFixed(4), 
-        normalizedHeight: normalizedHeight.toFixed(4) 
+    // ✅ CRITICAL: Ensure imageDisplayRect is available (zone réelle de l'image dans le wrapper)
+    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;
       }
-    });
-
-    console.log("📊 Normalized coordinates:", {
-      relativeX,
-      relativeY,
-      normalizedX,
-      normalizedY,
-      normalizedWidth,
-      normalizedHeight
-    });
-
-    // Step 4: Convert normalized coordinates to captured image pixel coordinates
-    const imageX = normalizedX * imgWidth;
-    const imageY = normalizedY * imgHeight;
-    const imageWidth = normalizedWidth * imgWidth;
-    const imageHeight = normalizedHeight * imgHeight;
-
-    console.log("🖼️ Image pixel coordinates:", {
-      imageX,
-      imageY,
-      imageWidth,
-      imageHeight,
-      imgWidth,
-      imgHeight
-    });
-
-    // Step 5: Convert to displayed image coordinates (for white bounding box)
-    // The captured image is displayed with resizeMode='contain' in ImageCropper
-    const displayAspect = displayWidth / displayHeight;
-    let displayContentWidth, displayContentHeight, displayOffsetX, displayOffsetY;
-    
-    if (capturedAspect > displayAspect) {
-      // Image is wider than display → letterboxing on top/bottom
-      displayContentWidth = displayWidth;
-      displayContentHeight = displayWidth / capturedAspect;
-      displayOffsetX = displayX;
-      displayOffsetY = displayY + (displayHeight - displayContentHeight) / 2;
-    } else {
-      // Image is taller than display → letterboxing on left/right
-      displayContentHeight = displayHeight;
-      displayContentWidth = displayHeight * capturedAspect;
-      displayOffsetX = displayX + (displayWidth - displayContentWidth) / 2;
-      displayOffsetY = displayY;
     }
 
-    // Convert image pixel coordinates to display coordinates
-    const scaleX = displayContentWidth / imgWidth;
-    const scaleY = displayContentHeight / imgHeight;
+    // ✅ 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;
     
-    const displayBoxX = displayOffsetX + imageX * scaleX;
-    const displayBoxY = displayOffsetY + imageY * scaleY;
-    const displayBoxWidth = imageWidth * scaleX;
-    const displayBoxHeight = imageHeight * scaleY;
-
-    // Clamp to displayed image bounds
-    const clampedX = Math.max(displayOffsetX, Math.min(displayBoxX, displayOffsetX + displayContentWidth - displayBoxWidth));
-    const clampedY = Math.max(displayOffsetY, Math.min(displayBoxY, displayOffsetY + displayContentHeight - displayBoxHeight));
-    const clampedWidth = Math.min(displayBoxWidth, displayOffsetX + displayContentWidth - clampedX);
-    const clampedHeight = Math.min(displayBoxHeight, displayOffsetY + displayContentHeight - clampedY);
+    // ✅ PRIORITY RULE #3: IF image comes from camera → Use EXACT green frame coordinates
+    // Image is displayed in "cover" mode (full wrapper), so green frame coords = white frame coords
+    if (cameraFrameData.current && cameraFrameData.current.greenFrame && originalImageDimensions.current.width > 0) {
+      const greenFrame = cameraFrameData.current.greenFrame;
+      
+      // ✅ Image fills wrapper (cover mode), so use green frame position directly in wrapper space
+      const boxX = wrapper.x + greenFrame.x;
+      const boxY = wrapper.y + greenFrame.y;
+      const boxWidth = greenFrame.width;
+      const boxHeight = greenFrame.height;
 
-    const result = {
-      // Display coordinates (for white bounding box)
-      displayCoords: {
-        x: clampedX,
-        y: clampedY,
-        width: clampedWidth,
-        height: clampedHeight
-      },
-      // Image pixel coordinates (for backend crop)
-      imageCoords: {
-        x: Math.max(0, Math.min(imageX, imgWidth - imageWidth)),
-        y: Math.max(0, Math.min(imageY, imgHeight - imageHeight)),
-        width: Math.max(0, Math.min(imageWidth, imgWidth)),
-        height: Math.max(0, Math.min(imageHeight, imgHeight))
-      },
-      debug: {
-        previewAspect,
-        capturedAspect,
-        displayAspect,
-        previewContentWidth,
-        previewContentHeight,
-        previewOffsetX,
-        previewOffsetY,
-        displayContentWidth,
-        displayContentHeight,
-        displayOffsetX,
-        displayOffsetY,
-        scaleX,
-        scaleY
+      // ✅ 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;
+      }
+      
+      // ✅ Create points using EXACT greenFrame coordinates (mapped to ImageCropper wrapper)
+      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("✅ Green frame converted to image coordinates:", JSON.stringify(result, null, 2));
-    
-    // ✅ VALIDATION: Ensure the white bounding box matches the green frame visually
-    // Calculate what percentage of the image the green frame covers
-    const greenFramePercentOfImage = {
-      width: (imageWidth / imgWidth) * 100,
-      height: (imageHeight / imgHeight) * 100
-    };
-    const greenFramePercentOfPreview = {
-      width: (frameWidth / wrapperWidth) * 100,
-      height: (frameHeight / wrapperHeight) * 100
-    };
-    
-    console.log("📏 Green frame coverage:", {
-      percentOfImage: greenFramePercentOfImage,
-      percentOfPreview: greenFramePercentOfPreview,
-      shouldMatch: "Green frame should cover same % of image as it does of preview"
-    });
-    
-    return result;
-  };
+      console.log("✅ Initializing crop box for camera image (COVER MODE - exact green frame):", {
+        greenFrame: { x: greenFrame.x, y: greenFrame.y, width: greenFrame.width, height: greenFrame.height },
+        whiteFrame: { x: boxX.toFixed(2), y: boxY.toFixed(2), width: boxWidth.toFixed(2), height: boxHeight.toFixed(2) },
+        note: "Image in cover mode - white frame = same position/size as green frame, same content",
+      });
 
-  // ✅ REFACTORISATION : Initialiser le crop box avec les dimensions d'affichage réelles
-  // ✅ CRITICAL FIX: If camera frame data exists, use it to match green frame exactly
-  const initializeCropBox = () => {
-    // ✅ CRITICAL: Ensure displayedContentRect is available
-    let contentRect = displayedContentRect.current;
-    const layout = displayedImageLayout.current;
+      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;
+    }
     
-    // Recalculate if not available
-    if (contentRect.width === 0 || contentRect.height === 0) {
-      if (layout.width > 0 && layout.height > 0) {
-        updateDisplayedContentRect(layout.width, layout.height);
-        contentRect = displayedContentRect.current;
-      }
-      // If still not available, use layout as fallback
-      if (contentRect.width === 0 || contentRect.height === 0) {
-        if (layout.width > 0 && layout.height > 0) {
-          contentRect = {
-            x: layout.x,
-            y: layout.y,
-            width: layout.width,
-            height: layout.height
-          };
-        } else {
-          console.warn("Cannot initialize crop box: displayed dimensions are zero");
-          return;
-        }
-      }
+    // ✅ 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;
     }
     
-    const { x, y, width, height } = contentRect;
-
-    // ✅ PRIORITY: If we have green frame data from camera, use it to match exactly
-    if (cameraFrameData.current && cameraFrameData.current.greenFrame && originalImageDimensions.current.width > 0) {
-      const converted = convertGreenFrameToImageCoords(
-        cameraFrameData.current.greenFrame,
-        cameraFrameData.current.capturedImageSize || originalImageDimensions.current,
-        contentRect
-      );
-
-      if (converted && converted.displayCoords) {
-        const { x: boxX, y: boxY, width: boxWidth, height: boxHeight } = converted.displayCoords;
-        const { x: contentX, y: contentY, width: contentWidth, height: contentHeight } = contentRect;
-        
-        // ✅ CRITICAL: Clamp points to displayed image bounds (double-check)
-        // Ensure the bounding box stays within contentRect, but preserve aspect ratio and percentage
-        // First, clamp position
-        let clampedBoxX = Math.max(contentX, Math.min(boxX, contentX + contentWidth - boxWidth));
-        let clampedBoxY = Math.max(contentY, Math.min(boxY, contentY + contentHeight - boxHeight));
-        
-        // ✅ CRITICAL: Preserve the width and height from conversion (they should already be correct)
-        // Only adjust if they would exceed bounds, but try to maintain the 80% coverage
-        let clampedBoxWidth = boxWidth;
-        let clampedBoxHeight = boxHeight;
-        
-        // Ensure the box fits within contentRect
-        if (clampedBoxX + clampedBoxWidth > contentX + contentWidth) {
-          clampedBoxWidth = contentX + contentWidth - clampedBoxX;
-        }
-        if (clampedBoxY + clampedBoxHeight > contentY + contentHeight) {
-          clampedBoxHeight = contentY + contentHeight - clampedBoxY;
-        }
-        
-        // ✅ CRITICAL: If clamping reduced dimensions, adjust position to center the box
-        // This ensures the white bounding box maintains the same visual percentage as the green frame
-        if (clampedBoxWidth < boxWidth || clampedBoxHeight < boxHeight) {
-          // Re-center if possible
-          const idealX = contentX + (contentWidth - clampedBoxWidth) / 2;
-          const idealY = contentY + (contentHeight - clampedBoxHeight) / 2;
-          clampedBoxX = Math.max(contentX, Math.min(idealX, contentX + contentWidth - clampedBoxWidth));
-          clampedBoxY = Math.max(contentY, Math.min(idealY, contentY + contentHeight - clampedBoxHeight));
-        }
-        
-        // ✅ CRITICAL: Ensure points are within contentRect bounds but not exactly at the edges
-        // This allows free movement in all directions
-        const minX = contentX;
-        const maxX = contentX + contentWidth;
-        const minY = contentY;
-        const maxY = contentY + contentHeight;
-        
-        // Create points from the clamped green frame coordinates
-        // Clamp each point individually to ensure they're within bounds
-        const newPoints = [
-          { 
-            x: Math.max(minX, Math.min(clampedBoxX, maxX)), 
-            y: Math.max(minY, Math.min(clampedBoxY, maxY)) 
-          },
-          { 
-            x: Math.max(minX, Math.min(clampedBoxX + clampedBoxWidth, maxX)), 
-            y: Math.max(minY, Math.min(clampedBoxY, maxY)) 
-          },
-          { 
-            x: Math.max(minX, Math.min(clampedBoxX + clampedBoxWidth, maxX)), 
-            y: Math.max(minY, Math.min(clampedBoxY + clampedBoxHeight, maxY)) 
-          },
-          { 
-            x: Math.max(minX, Math.min(clampedBoxX, maxX)), 
-            y: Math.max(minY, Math.min(clampedBoxY + clampedBoxHeight, maxY)) 
-          },
-        ];
-
-        // ✅ VALIDATION: Verify the white bounding box matches green frame percentage (80%)
-        const whiteBoxPercentOfDisplay = {
-          width: (clampedBoxWidth / contentRect.width) * 100,
-          height: (clampedBoxHeight / contentRect.height) * 100
-        };
-        const greenFramePercentOfWrapper = {
-          width: (cameraFrameData.current.greenFrame.width / cameraFrameData.current.greenFrame.wrapperWidth) * 100,
-          height: (cameraFrameData.current.greenFrame.height / cameraFrameData.current.greenFrame.wrapperHeight) * 100
-        };
-
-        // ✅ DEBUG: Log if percentages don't match (should both be ~80%)
-        if (Math.abs(whiteBoxPercentOfDisplay.width - greenFramePercentOfWrapper.width) > 5 ||
-            Math.abs(whiteBoxPercentOfDisplay.height - greenFramePercentOfWrapper.height) > 5) {
-          console.warn("⚠️ White box percentage doesn't match green frame:", {
-            whiteBox: whiteBoxPercentOfDisplay,
-            greenFrame: greenFramePercentOfWrapper,
-            difference: {
-              width: Math.abs(whiteBoxPercentOfDisplay.width - greenFramePercentOfWrapper.width),
-              height: Math.abs(whiteBoxPercentOfDisplay.height - greenFramePercentOfWrapper.height)
-            }
-          });
-        }
-
-        console.log("✅ Initializing crop box from green frame (clamped):", {
-          greenFrame: cameraFrameData.current.greenFrame,
-          converted,
-          clamped: {
-            x: clampedBoxX,
-            y: clampedBoxY,
-            width: clampedBoxWidth,
-            height: clampedBoxHeight
-          },
-          contentRect: contentRect,
-          points: newPoints,
-          validation: {
-            whiteBoxPercentOfDisplay,
-            greenFramePercentOfWrapper,
-            shouldMatch: "White box % should match green frame % (80% - accounting for aspect ratio)"
-          }
-        });
-
-        setPoints(newPoints);
-        // Clear camera frame data after use to avoid reusing it
-        cameraFrameData.current = null;
-        return;
-      }
+    // ✅ 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;
     }
     
-    // ✅ CRITICAL: Default crop box (70% of displayed area - centered)
-    const boxWidth = width * 0.70; // 70% width
-    const boxHeight = height * 0.70; // 70% height
-    const boxX = x + (width - boxWidth) / 2; // Centered horizontally
-    const boxY = y + (height - boxHeight) / 2; // Centered vertically
     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
+      { x: boxX, y: boxY },
+      { x: boxX + boxWidth, y: boxY },
+      { x: boxX + boxWidth, y: boxY + boxHeight },
+      { x: boxX, y: boxY + boxHeight },
     ];
     
-    console.log("Initializing crop box (default - 70% centered):", {
-      displayedWidth: width,
-      displayedHeight: height,
-      boxWidth,
-      boxHeight,
-      boxX,
-      boxY,
+    // ✅ 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
@@ -686,9 +475,27 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
       height: layout.height
     };
 
-    // ✅ CORRECTION: recalculer contentRect (contain). Si les dimensions originales ne sont pas encore connues,
-    // updateDisplayedContentRect va fallback et sera recalculé quand Image.getSize arrivera.
-    updateDisplayedContentRect(layout.width, layout.height);
+    // ✅ Si l'image vient de la caméra et que les dimensions originales ne sont pas encore définies,
+    // les initialiser à partir de cameraFrameData AVANT de calculer le contentRect.
+    if (
+      originalImageDimensions.current.width === 0 &&
+      cameraFrameData.current &&
+      cameraFrameData.current.capturedImageSize
+    ) {
+      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,
@@ -697,27 +504,25 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
       y: layout.y
     });
     
-    // ✅ CRITICAL FIX: Only initialize crop box if:
-    // 1. Layout dimensions are available
-    // 2. We have no points yet (first initialization)
-    // 3. We have original image dimensions (either from camera or Image.getSize)
-    // This prevents initializing with wrong dimensions for subsequent images
-    if (layout.width > 0 && layout.height > 0 && points.length === 0) {
-      // ✅ CRITICAL: Wait for original dimensions before initializing
-      // If dimensions not available yet, initializeCropBox will be called from useEffect when Image.getSize completes
-      if (originalImageDimensions.current.width > 0 && originalImageDimensions.current.height > 0) {
+    // ✅ CRITICAL FIX #2: Do NOT initialize crop box in onImageLayout for camera images
+    // Camera images should be initialized ONLY when cameraFrameData is set (in useEffect)
+    // Gallery images can be initialized here if not already done
+    if (
+      wrapper.width > 0 &&
+      wrapper.height > 0 &&
+      layout.width > 0 &&
+      layout.height > 0 &&
+      !hasInitializedCropBox.current &&
+      points.length === 0 &&
+      originalImageDimensions.current.width > 0 &&
+      originalImageDimensions.current.height > 0
+    ) {
+      // ✅ CRITICAL: Only initialize for gallery images here
+      // Camera images should be initialized when cameraFrameData is set, not here
+      if (imageSource.current !== 'camera') {
         initializeCropBox();
-      } else if (cameraFrameData.current && cameraFrameData.current.capturedImageSize) {
-        // ✅ If we have camera dimensions, use them immediately
-        originalImageDimensions.current = {
-          width: cameraFrameData.current.capturedImageSize.width,
-          height: cameraFrameData.current.capturedImageSize.height,
-        };
-        initializeCropBox();
-      } else {
-        // ✅ For gallery images, we can initialize with layout dimensions as fallback
-        // The crop box will be recalculated when Image.getSize completes
-        // But we initialize now so the user sees a border immediately
+      } else if (cameraFrameData.current && cameraFrameData.current.greenFrame) {
+        // ✅ For camera images, initialize ONLY if greenFrame is available
         initializeCropBox();
       }
     }
@@ -730,85 +535,184 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
     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;
 
-    // ✅ CRITICAL: Ensure displayedContentRect is available
-    let contentRect = displayedContentRect.current;
-    const layout = displayedImageLayout.current;
+    // ✅ RÉFÉRENTIEL UNIQUE : Utiliser imageDisplayRect (zone réelle de l'image dans le wrapper)
+    // Les coordonnées du tap sont relatives au wrapper commun
+    let imageRect = imageDisplayRect.current;
+    const wrapper = commonWrapperLayout.current;
     
     // Recalculate if not available
-    if (contentRect.width === 0 || contentRect.height === 0) {
-      if (layout.width > 0 && layout.height > 0) {
-        updateDisplayedContentRect(layout.width, layout.height);
-        contentRect = displayedContentRect.current;
+    if (imageRect.width === 0 || imageRect.height === 0) {
+      if (wrapper.width > 0 && wrapper.height > 0 && originalImageDimensions.current.width > 0) {
+        updateImageDisplayRect(wrapper.width, wrapper.height);
+        imageRect = imageDisplayRect.current;
       }
-      // If still not available, use layout as fallback
-      if (contentRect.width === 0 || contentRect.height === 0) {
-        if (layout.width > 0 && layout.height > 0) {
-          contentRect = {
-            x: layout.x,
-            y: layout.y,
-            width: layout.width,
-            height: layout.height
+      // If still not available, use wrapper as fallback
+      if (imageRect.width === 0 || imageRect.height === 0) {
+        if (wrapper.width > 0 && wrapper.height > 0) {
+          imageRect = {
+            x: wrapper.x,
+            y: wrapper.y,
+            width: wrapper.width,
+            height: wrapper.height
           };
         } else {
-          console.warn("⚠️ Cannot handle tap: no layout dimensions available");
+          console.warn("⚠️ Cannot handle tap: wrapper or imageDisplayRect not available");
           return;
         }
       }
     }
-
-    // ✅ Clamp to real displayed image content (avoid points outside image due to letterboxing)
-    const { x: cx, y: cy, width: cw, height: ch } = contentRect;
-    const boundedTapX = Math.max(cx, Math.min(tapX, cx + cw));
-    const boundedTapY = Math.max(cy, Math.min(tapY, cy + ch));
-  
-    const selectRadius = 28; // easier to grab points
-    if (lastTap.current && now - lastTap.current < 300) {
-      const exists = points.some(p => Math.abs(p.x - boundedTapX) < selectRadius && Math.abs(p.y - boundedTapY) < selectRadius);
-      if (!exists) setPoints([...points, { x: boundedTapX, y: boundedTapY }]);
-      lastTap.current = null;
+    
+    // ✅ 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 {
-      const index = points.findIndex(p => Math.abs(p.x - boundedTapX) < selectRadius && Math.abs(p.y - boundedTapY) < selectRadius);
-      if (index !== -1) {
-        selectedPointIndex.current = index;
-        // ✅ FREE DRAG: Store initial positions for delta-based movement
-        initialTouchPosition.current = { x: tapX, y: tapY };
-        lastTouchPosition.current = { x: tapX, y: tapY }; // Store last touch for incremental delta
-        initialPointPosition.current = { ...points[index] };
-        lastValidPosition.current = { ...points[index] }; // store original position before move
+      // ✅ 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
         
-        // ✅ CRITICAL: Disable parent ScrollView scrolling when dragging a point
-        // This prevents ScrollView from intercepting vertical movement
-        try {
-          // Find and disable parent ScrollView if it exists
-          const findScrollView = (node) => {
-            if (!node) return null;
-            if (node._component && node._component.setNativeProps) {
-              // Try to disable scrolling
-              node._component.setNativeProps({ scrollEnabled: false });
-            }
-            return findScrollView(node._owner || node._parent);
-          };
-          // Note: This is a workaround - ideally we'd pass a ref to disable scroll
-        } catch (e) {
-          // Ignore errors
+        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;
     }
+    
+    lastTap.current = now;
   };
 
   const handleMove = (e) => {
     if (showResult || selectedPointIndex.current === null) return;
     
     // ✅ FREE DRAG: Use delta-based movement for smooth, unconstrained dragging
-    // ✅ CRITICAL FIX: Use incremental delta calculation for more reliable vertical movement
-    // Instead of calculating delta from initial position, calculate from last position
-    // This works better when ScrollView intercepts some events
+   
     const nativeEvent = e.nativeEvent;
     const currentX = nativeEvent.locationX;
     const currentY = nativeEvent.locationY;
@@ -822,7 +726,6 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
       return;
     }
     
-    // ✅ CRITICAL: Use incremental delta (from last position) instead of absolute delta
     // This is more reliable when ScrollView affects coordinate updates
     let deltaX, deltaY;
     if (lastTouchPosition.current) {
@@ -837,138 +740,270 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
       console.warn("⚠️ No touch position reference available");
       return;
     }
-    
-    // ✅ CRITICAL: Don't update lastTouchPosition here - update it AFTER clamping
-    // This ensures that if the point was clamped, lastTouchPosition reflects the actual
-    // touch position, allowing the next delta to be calculated correctly
-    
-    // ✅ CRITICAL: Ensure displayedContentRect is available
-    let contentRect = displayedContentRect.current;
-    const layout = displayedImageLayout.current;
+
+    // Les coordonnées de mouvement sont relatives au wrapper commun
+    let imageRect = imageDisplayRect.current;
+    const wrapper = commonWrapperLayout.current;
     
     // Recalculate if not available
-    if (contentRect.width === 0 || contentRect.height === 0) {
-      if (layout.width > 0 && layout.height > 0) {
-        updateDisplayedContentRect(layout.width, layout.height);
-        contentRect = displayedContentRect.current;
+    if (imageRect.width === 0 || imageRect.height === 0) {
+      if (wrapper.width > 0 && wrapper.height > 0 && originalImageDimensions.current.width > 0) {
+        updateImageDisplayRect(wrapper.width, wrapper.height);
+        imageRect = imageDisplayRect.current;
       }
-      // If still not available, use layout as fallback
-      if (contentRect.width === 0 || contentRect.height === 0) {
-        if (layout.width > 0 && layout.height > 0) {
-          contentRect = {
-            x: layout.x,
-            y: layout.y,
-            width: layout.width,
-            height: layout.height
+      // If still not available, use wrapper as fallback
+      if (imageRect.width === 0 || imageRect.height === 0) {
+        if (wrapper.width > 0 && wrapper.height > 0) {
+          imageRect = {
+            x: wrapper.x,
+            y: wrapper.y,
+            width: wrapper.width,
+            height: wrapper.height
           };
         } else {
-          console.warn("⚠️ Cannot move point: no layout dimensions available");
+          console.warn("⚠️ Cannot move point: wrapper or imageDisplayRect not available");
           return;
         }
       }
     }
     
+    // ✅ CRITICAL: Calculate absolute bounds of imageDisplayRect within the wrapper
+    // imageRect is relative to wrapper, so we need to add wrapper offset
+    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) {
+      if (currentPoint && typeof currentPoint.x === 'number' && typeof currentPoint.y === 'number') {
         initialPointPosition.current = { ...currentPoint };
       } else {
-        console.warn("⚠️ No point found for selected index");
+        console.warn("⚠️ No point found for selected index or invalid point data");
         return;
       }
     }
     
-    // ✅ CRITICAL: deltaX and deltaY are already calculated above using incremental approach
-    // This ensures smooth movement even when ScrollView affects coordinate updates
-    
-    // ✅ CRITICAL FIX: Use CURRENT point position (after previous clamping) instead of initial position
-    // This allows the point to move even if it was previously clamped to a limit
-    // If lastValidPosition exists (from previous clamping), use it; otherwise use initial position
-    const basePoint = lastValidPosition.current || initialPointPosition.current;
-    
-    // ✅ DEBUG: Log movement to identify vertical movement issues
-    if (Math.abs(deltaY) > 10) {
-      console.log("🔄 Movement detected:", {
-        deltaX: deltaX.toFixed(2),
-        deltaY: deltaY.toFixed(2),
-        currentY: currentY.toFixed(2),
-        initialY: initialTouchPosition.current?.y?.toFixed(2),
-        pointInitialY: initialPointPosition.current.y.toFixed(2),
-        basePointY: basePoint.y.toFixed(2),
-        usingLastValid: !!lastValidPosition.current
-      });
+    // ✅ NEW APPROACH: Use touchOffset to map touch position directly to point position
+    // This eliminates delta accumulation and "dead zone" issues completely
+    if (!touchOffset.current) {
+      console.warn("⚠️ touchOffset not initialized, cannot move point");
+      return;
     }
     
-    // ✅ FREE DRAG: Apply delta to CURRENT point position (not initial)
-    // - This allows movement even if point was previously clamped
-    // - No constraints on distance, angle, or edge length
-    // - No forced horizontal/vertical alignment
-    // - No angle locking
-    // - Direct mapping of gesture delta (dx, dy) - both X and Y treated equally
-    const newX = basePoint.x + deltaX;
-    const newY = basePoint.y + deltaY;
+    // ✅ DIRECT MAPPING: newPosition = touchPosition + offset
+    // No delta accumulation, no zone morte
+    const newX = currentX + touchOffset.current.x;
+    const newY = currentY + touchOffset.current.y;
     
-    // ✅ ONLY CONSTRAINT: Clamp to image bounds to keep points inside the image
-    // x ∈ [cx, cx + cw], y ∈ [cy, cy + ch]
-    // This is the ONLY constraint - no other geometry normalization
+    // ✅ SEPARATE DRAG BOUNDS vs CROP BOUNDS
     const { x: cx, y: cy, width: cw, height: ch } = contentRect;
-    // ✅ CRITICAL: Calculate bounds correctly - maxX = cx + cw, maxY = cy + ch
-    const maxX = cx + cw;
-    const maxY = cy + ch;
-    const boundedX = Math.max(cx, Math.min(newX, maxX));
-    const boundedY = Math.max(cy, Math.min(newY, maxY));
     
-    // ✅ DEBUG: Log bounds calculation to verify clamping is correct
-    if (Math.abs(newY - boundedY) > 1) {
-      console.log("🔍 Y coordinate clamping:", {
-        newY: newY.toFixed(2),
-        boundedY: boundedY.toFixed(2),
-        cy: cy.toFixed(2),
-        maxY: maxY.toFixed(2),
-        ch: ch.toFixed(2),
-        deltaY: deltaY.toFixed(2),
-        isAtMaxLimit: Math.abs(boundedY - maxY) < 0.01,
-        isAtMinLimit: Math.abs(boundedY - cy) < 0.01
+    // ✅ 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"
       });
     }
     
-    // ✅ DEBUG: Log if clamping is limiting movement
-    if (Math.abs(newY - boundedY) > 1 || Math.abs(newX - boundedX) > 1) {
-      console.log("⚠️ Movement clamped:", {
-        requested: { x: newX.toFixed(2), y: newY.toFixed(2) },
-        clamped: { x: boundedX.toFixed(2), y: boundedY.toFixed(2) },
-        contentRect: { x: cx.toFixed(2), y: cy.toFixed(2), width: cw.toFixed(2), height: ch.toFixed(2) }
+    // Update boundary state for next frame
+    wasClampedLastFrame.current = { x: isAtBoundaryX, y: isAtBoundaryY };
+    
+    // ✅ DEBUG: Log when in overshoot zone (only when not at boundary)
+    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)}`
       });
     }
-  
-    // ✅ FREE DRAG: Update point directly
-    // - No polygon simplification
-    // - No reordering of points
-    // - No geometry normalization during drag
-    const updatedPoint = { x: boundedX, y: boundedY };
-    // ✅ CRITICAL: Always update lastValidPosition with the clamped position
-    // This ensures that the next movement calculation uses the current (clamped) position
-    // instead of the initial position, allowing movement even after clamping
-    lastValidPosition.current = updatedPoint;
     
-    // ✅ CRITICAL: Update lastTouchPosition AFTER clamping
-    // This ensures that the next delta calculation is relative to the current touch position
-    // If the point was clamped, this allows movement in the opposite direction on the next move
+    // ✅ Update lastValidPosition ONLY if point is within strictBounds
+    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 };
   
-    setPoints(prev =>
-      prev.map((p, i) =>
-        i === selectedPointIndex.current ? updatedPoint : p
-      )
-    );
+    // ✅ 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;
-    const wasDragging = selectedPointIndex.current !== null;
+    lastValidPosition.current = null;
     selectedPointIndex.current = null;
     
     // ✅ CRITICAL: Re-enable parent ScrollView scrolling when drag ends
@@ -986,6 +1021,7 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
 
   const handleReset = () => {
     // setPoints([]);
+    hasInitializedCropBox.current = false; // ✅ CRITICAL: Reset guard to allow reinitialization
     initializeCropBox();
   };
 
@@ -1050,6 +1086,9 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                 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); 
@@ -1064,58 +1103,152 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
         />
       ) : (
         <>
-          {!showResult && (
-            <View style={image ? styles.buttonContainer : styles.centerButtonsContainer}>
- 
-              {image && Platform.OS === 'android' && (
-                <>                  
-                  <TouchableOpacity 
-                    style={styles.iconButton} 
-                    onPress={() => enableRotation && rotatePreviewImage(90)}
-                    disabled={isRotating}
-                  >
-                    <Ionicons name="sync" size={24} color="white" />
-                  </TouchableOpacity>
-                </>
-              )}
-              
-              {image && (
-                <TouchableOpacity style={styles.button} onPress={handleReset}>
-                  <Text style={styles.buttonText}>Reset</Text>
+          {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>
+            </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} 
+                  onPress={() => enableRotation && rotatePreviewImage(90)}
+                  disabled={isRotating}
+                >
+                  <Ionicons name="sync" size={24} color="white" />
                 </TouchableOpacity>
               )}
-              {image && (
+              
+              <TouchableOpacity style={styles.button} onPress={handleReset}>
+                <Text style={styles.buttonText}>Reset</Text>
+              </TouchableOpacity>
+              
               <TouchableOpacity
                 style={styles.button}
-                      onPress={async () => {
+                onPress={async () => {
                         setIsLoading(true);
                         try {
                           console.log("=== Starting pixel-perfect metadata export (no bitmap crop on mobile) ===");
                           
-                          // ✅ REFACTORISATION : Utiliser les dimensions stockées (plus efficace)
                           const actualImageWidth = originalImageDimensions.current.width;
                           const actualImageHeight = originalImageDimensions.current.height;
                           
-                          // Vérifier que les dimensions sont valides
                           if (actualImageWidth === 0 || actualImageHeight === 0) {
                             throw new Error("Original image dimensions not available. Please wait for image to load.");
                           }
                           
-                          console.log("Original image dimensions:", {
-                            width: actualImageWidth,
-                            height: actualImageHeight
-                          });
-                          
-                          // ✅ CORRECTION : Utiliser le rectangle de contenu réel (contain)
-                          // ✅ CRITICAL: Recalculate displayedContentRect if not available
                           const layout = displayedImageLayout.current;
-                          
-                          console.log("🔍 Checking displayedContentRect before crop:", {
-                            displayedContentRect: displayedContentRect.current,
-                            displayedImageLayout: layout,
-                            originalImageDimensions: originalImageDimensions.current
-                          });
-                          
                           if (layout.width > 0 && layout.height > 0) {
                             updateDisplayedContentRect(layout.width, layout.height);
                           }
@@ -1124,12 +1257,8 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                           let displayedWidth = contentRect.width;
                           let displayedHeight = contentRect.height;
                           
-                          // Vérifier que les dimensions d'affichage sont valides
                           if (displayedWidth === 0 || displayedHeight === 0) {
-                            // ✅ FALLBACK: Try to use displayedImageLayout if contentRect is not available
                             if (layout.width > 0 && layout.height > 0) {
-                              console.warn("⚠️ displayedContentRect not available, using displayedImageLayout as fallback");
-                              // Use layout dimensions as fallback (assuming no letterboxing)
                               contentRect = {
                                 x: layout.x,
                                 y: layout.y,
@@ -1138,85 +1267,52 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                               };
                               displayedWidth = contentRect.width;
                               displayedHeight = contentRect.height;
-                              // Update the ref for consistency
                               displayedContentRect.current = contentRect;
                             } else {
-                              throw new Error("Displayed image dimensions not available. Image may not be laid out yet. Please wait a moment and try again.");
+                              throw new Error("Displayed image dimensions not available.");
                             }
                           }
                           
-                          console.log("✅ Using contentRect for crop:", contentRect);
-                          
-                          console.log("Displayed image dimensions:", {
-                            width: displayedWidth,
-                            height: displayedHeight
-                          });
-                          
-                          // ✅ CORRECTION : avec resizeMode='contain', l'échelle est UNIFORME + offsets.
-                          // Vérifier que le scale est cohérent (même ratio pour width et height)
-                          const scaleX = actualImageWidth / displayedWidth;
-                          const scaleY = actualImageHeight / displayedHeight;
-                          
-                          // Pour resizeMode='contain', scaleX et scaleY doivent être égaux
-                          // Si ce n'est pas le cas, il y a un problème de calcul
-                          if (Math.abs(scaleX - scaleY) > 0.01) {
-                            console.warn("Scale mismatch detected! This may cause incorrect crop coordinates.", {
-                              scaleX,
-                              scaleY,
-                              actualImageWidth,
-                              actualImageHeight,
-                              displayedWidth,
-                              displayedHeight
-                            });
+                          const isCoverMode = !!(cameraFrameData.current && cameraFrameData.current.greenFrame);
+                          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 scale = scaleX; // Utiliser scaleX (ou scaleY, ils devraient être égaux)
-                          console.log("Scale factor (contain, uniform):", { 
-                            scale, 
-                            scaleX, 
-                            scaleY, 
-                            contentRect,
-                            actualImageSize: { width: actualImageWidth, height: actualImageHeight },
-                            displayedSize: { width: displayedWidth, height: displayedHeight }
-                          });
-                          
                           const originalUri = sourceImageUri.current || image;
                           let cropMeta = null;
                           
                           if (points.length > 0) {
                             try {
-                              console.log("Calculating crop boundaries from points...");
-                              console.log("Points (display coordinates):", points);
-                              console.log("Content rect (offsets):", contentRect);
-                              
-                              // ✅ CORRECTION : conversion display -> image px (contain) avec offsets
-                              // S'assurer que les points sont bien dans les limites de l'image affichée
                               const imagePoints = points.map(point => {
-                                // Clamp les coordonnées d'affichage à la zone réelle de l'image
-                                const clampedX = Math.max(contentRect.x, Math.min(point.x, contentRect.x + contentRect.width));
-                                const clampedY = Math.max(contentRect.y, Math.min(point.y, contentRect.y + contentRect.height));
-                                
-                                // Convertir en coordonnées de l'image originale
-                                const origX = (clampedX - contentRect.x) * scale;
-                                const origY = (clampedY - contentRect.y) * scale;
-                                
-                                // Clamp aux dimensions de l'image originale
+                                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 };
                               });
                               
-                              console.log("Converted image points (original coordinates):", imagePoints);
-                              
-                              // Calculer la bounding box : min X, min Y, max X, max Y
                               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));
                               
-                              // ✅ CORRECTION : arrondi "conservateur" (floor origin + ceil end)
-                              // évite de rogner des pixels et réduit le risque de crop plus petit (perte de détails).
                               const cropX = Math.max(0, Math.floor(minX));
                               const cropY = Math.max(0, Math.floor(minY));
                               const cropEndX = Math.min(actualImageWidth, Math.ceil(maxX));
@@ -1224,25 +1320,8 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                               const cropWidth = Math.max(0, cropEndX - cropX);
                               const cropHeight = Math.max(0, cropEndY - cropY);
                               
-                              console.log("Crop parameters (pixel-perfect):", {
-                                x: cropX,
-                                y: cropY,
-                                width: cropWidth,
-                                height: cropHeight,
-                                imageWidth: actualImageWidth,
-                                imageHeight: actualImageHeight,
-                                boundingBox: {
-                                  minX,
-                                  minY,
-                                  maxX,
-                                  maxY
-                                }
-                              });
-                              
                               if (cropWidth > 0 && cropHeight > 0) {
-                                // 1) bbox in ORIGINAL image pixel coords
                                 const bbox = { x: cropX, y: cropY, width: cropWidth, height: cropHeight };
-                                // 2) polygon points relative to bbox (still in ORIGINAL pixel grid)
                                 const polygon = imagePoints.map(point => ({
                                   x: point.x - cropX,
                                   y: point.y - cropY
@@ -1253,21 +1332,14 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                                   rotation: 0,
                                   imageSize: { width: actualImageWidth, height: actualImageHeight },
                                 };
-                                console.log("Crop meta ready:", cropMeta);
-                              } else {
-                                console.warn("Invalid crop dimensions, cannot export crop meta");
                               }
                             } catch (cropError) {
                               console.error("Error computing crop meta:", cropError);
                             }
-                          } else {
-                            console.log("No crop points defined, using original image");
                           }
                           
                           const name = `IMAGE XTK${Date.now()}`;
-
                           if (onConfirm) {
-                            console.log("Calling onConfirm with:", originalUri, name, cropMeta);
                             onConfirm(originalUri, name, cropMeta);
                           }
                         } catch (error) {
@@ -1279,101 +1351,16 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                           setShowFullScreenCapture(false);
                         }
                       }}
-  >
-    <Text style={styles.buttonText}>Confirm</Text>
-  </TouchableOpacity>
-)}
-
+              >
+                <Text style={styles.buttonText}>Confirm</Text>
+              </TouchableOpacity>
             </View>
           )}
 
-
-          {image && (
-            <View
-              ref={viewRef}
-              collapsable={false}
-              style={showFullScreenCapture ? styles.fullscreenImageContainer : styles.imageContainer}
-              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;
-                }
-                // Also capture if there's any movement to prevent ScrollView from intercepting
-                const hasMovement = Math.abs(gestureState.dx) > 0 || Math.abs(gestureState.dy) > 0;
-                if (hasMovement && Math.abs(gestureState.dy) > 2) {
-                  console.log("🔄 Capturing vertical movement before ScrollView:", { dy: gestureState.dy.toFixed(2) });
-                }
-                return hasMovement;
-              }}
-              // ✅ CRITICAL: Prevent ScrollView from scrolling by stopping propagation
-              onResponderReject={() => {
-                console.warn("⚠️ Responder rejected - ScrollView may intercept");
-              }}
-              >
-                <Image source={{ uri: image }} style={styles.image} onLayout={onImageLayout} />
-              {/* IMPORTANT: prevent SVG overlay from stealing touch events so dragging works reliably */}
-              <Svg style={styles.overlay} pointerEvents="none">
-                <Path
-                  d={`M 0 0 H ${imageMeasure.current.width} V ${imageMeasure.current.height} 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>
+          {/* ✅ Show welcome screen when no image */}
+          {!showResult && !image && (
+            <View style={styles.centerButtonsContainer}>
+              <Text style={styles.welcomeText}>Sélectionnez une image</Text>
             </View>
           )}
         </>
@@ -1386,13 +1373,13 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
               <View
                 style={{
                   position: 'absolute',
-                  left: -maskDimensions.width - 100, // Hors écran mais pas trop loin
+                  left: -maskDimensions.width - 100,
                   top: -maskDimensions.height - 100,
                   width: maskDimensions.width,
                   height: maskDimensions.height,
-                  opacity: 1, // Opacité normale pour la capture
+                  opacity: 1,
                   pointerEvents: 'none',
-                  zIndex: 9999, // Z-index élevé pour s'assurer qu'elle est au-dessus
+                  zIndex: 9999,
                   overflow: 'hidden',
                 }}
                 collapsable={false}