react-native-expo-cropper 1.2.53 → 1.3.53

package/src/ImageCropper.js

@@ -1,6 +1,6 @@
 import styles from './ImageCropperStyles';
 import React, { useState, useRef, useEffect } from 'react';
-import { Modal, View, Image, TouchableOpacity, Animated, Text, Platform, SafeAreaView, PixelRatio, StyleSheet, ActivityIndicator, useWindowDimensions } from 'react-native';
+import { Modal, View, Image, TouchableOpacity, Text, Platform, PixelRatio, StyleSheet, ActivityIndicator, useWindowDimensions } from 'react-native';
 import Svg, { Path, Circle } from 'react-native-svg';
 import CustomCamera from './CustomCamera';
 import * as ImageManipulator from 'expo-image-manipulator';
@@ -8,7 +8,8 @@ import { Ionicons } from '@expo/vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { applyMaskToImage, MaskView } from './ImageMaskProcessor';
 
-const PRIMARY_GREEN = '#198754';
+const PRIMARY_GREEN = '#689F38';
+const ACCENT_GREEN = '#689F38';
 
 // Base dimension for responsive scaling (e.g. ~375pt design width)
 const RESPONSIVE_BASE = 375;
@@ -20,8 +21,10 @@ const ImageCropper = ({
   addheight,
   rotationLabel,
   onCancel,
-  confirmText = 'Confirm',
-  resetText = 'Reset',
+  cancelText = 'Cancel',
+  confirmText = 'Use Scan',
+  resetText = 'Enhance',
+  rotateText = 'Rotate',
   cameraInstructionText = 'Place the tray inside the green box',
 }) => {
   const { width: windowWidth, height: windowHeight } = useWindowDimensions();
@@ -559,425 +562,96 @@ const ImageCropper = ({
   };
 
   const handleTap = (e) => {
-    if (!image || showResult) return;
+    if (!image || showResult || points.length === 0) return;
     const now = Date.now();
     const { locationX: tapX, locationY: tapY } = e.nativeEvent;
-
-    // ✅ RÉFÉRENTIEL UNIQUE : Utiliser imageDisplayRect (zone réelle de l'image dans le wrapper)
-    // Les coordonnées du tap sont relatives au wrapper commun
-    let imageRect = imageDisplayRect.current;
-    const wrapper = commonWrapperLayout.current;
-    
-    // Recalculate if not available
-    if (imageRect.width === 0 || imageRect.height === 0) {
-      if (wrapper.width > 0 && wrapper.height > 0 && originalImageDimensions.current.width > 0) {
-        updateImageDisplayRect(wrapper.width, wrapper.height);
-        imageRect = imageDisplayRect.current;
-      }
-      // If still not available, use full wrapper as fallback (wrapper-relative coords)
-      if (imageRect.width === 0 || imageRect.height === 0) {
-        if (wrapper.width > 0 && wrapper.height > 0) {
-          imageRect = {
-            x: 0,
-            y: 0,
-            width: wrapper.width,
-            height: wrapper.height,
-          };
-        } else {
-          console.warn("⚠️ Cannot handle tap: wrapper or imageDisplayRect not available");
-          return;
-        }
-      }
-    }
-    
-    // ✅ Clamp to real displayed image content (imageDisplayRect dans le wrapper)
-    // Les coordonnées tapX/tapY et imageRect sont RELATIVES au wrapper commun (origine 0,0)
-    const { x: cx, y: cy, width: cw, height: ch } = {
-      x: imageRect.x,
-      y: imageRect.y,
-      width: imageRect.width,
-      height: imageRect.height,
-    };
-    // ✅ Responsive select radius: scales with screen so touch target matches handle size
-    const selectRadius = Math.max(28, Math.round(50 * responsiveScale));
-    
-    // ✅ 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);
-    
+    const selectRadius = Math.max(18, Math.round(26 * responsiveScale));
+    const index = points.findIndex((p) => Math.abs(p.x - tapX) < selectRadius && Math.abs(p.y - tapY) < selectRadius);
     if (index !== -1) {
-      // ✅ Point found - select it for dragging
       selectedPointIndex.current = index;
-      
-      // Store initial positions
       initialTouchPosition.current = { x: tapX, y: tapY };
       lastTouchPosition.current = { x: tapX, y: tapY };
-      initialPointPosition.current = { ...points[index] };
-      lastValidPosition.current = { ...points[index] };
-      
-      // Calculate offset between point and touch at drag start
-      touchOffset.current = {
-        x: points[index].x - tapX,
-        y: points[index].y - tapY
-      };
-      
-      console.log("🎯 DRAG START - Offset calculated:", {
-        pointX: points[index].x.toFixed(2),
-        pointY: points[index].y.toFixed(2),
-        touchX: tapX.toFixed(2),
-        touchY: tapY.toFixed(2),
-        offsetX: touchOffset.current.x.toFixed(2),
-        offsetY: touchOffset.current.y.toFixed(2)
-      });
-      
-      // Disable parent ScrollView scrolling when dragging
-      try {
-        const findScrollView = (node) => {
-          if (!node) return null;
-          if (node._component && node._component.setNativeProps) {
-            node._component.setNativeProps({ scrollEnabled: false });
-          }
-          return findScrollView(node._owner || node._parent);
-        };
-      } catch (e) {
-        // Ignore errors
-      }
-    } else {
-      // ✅ No point found - check if double-tap on a line to create new point
-      const isDoubleTap = lastTap.current && now - lastTap.current < 300;
-      
-      if (isDoubleTap && points.length >= 2) {
-        // Find closest point on frame lines
-        const lineResult = findClosestPointOnFrame(tapX, tapY, 30); // 30px tolerance
-        
-        if (lineResult) {
-          const { point, insertIndex } = lineResult;
-          
-          // Check if a point already exists very close to this position
-          const exists = points.some(p => Math.abs(p.x - point.x) < selectRadius && Math.abs(p.y - point.y) < selectRadius);
-          
-          if (!exists) {
-            // Insert new point at the correct position in the polygon
-            const newPoints = [...points];
-            newPoints.splice(insertIndex, 0, point);
-            setPoints(newPoints);
-            
-            console.log("✅ New point created on frame line:", {
-              tap: { x: tapX.toFixed(2), y: tapY.toFixed(2) },
-              newPoint: { x: point.x.toFixed(2), y: point.y.toFixed(2) },
-              insertIndex,
-              totalPoints: newPoints.length
-            });
-            
-            lastTap.current = null; // Reset to prevent triple-tap
-            return;
-          }
+      lastTap.current = now;
+      return;
+    }
+
+    // Restore UX: double tap near an edge inserts a new draggable point.
+    const isDoubleTap = lastTap.current && now - lastTap.current < 300;
+    if (isDoubleTap && points.length >= 2) {
+      const lineResult = findClosestPointOnFrame(tapX, tapY, 30);
+      if (lineResult) {
+        const { point, insertIndex } = lineResult;
+        const exists = points.some((p) => Math.abs(p.x - point.x) < selectRadius && Math.abs(p.y - point.y) < selectRadius);
+        if (!exists) {
+          const newPoints = [...points];
+          newPoints.splice(insertIndex, 0, point);
+          setPoints(newPoints);
+          lastTap.current = null;
+          return;
         }
       }
     }
-    
+
     lastTap.current = now;
   };
 
   const handleMove = (e) => {
     if (showResult || selectedPointIndex.current === null) return;
-    
-    // ✅ FREE DRAG: Use delta-based movement for smooth, unconstrained dragging
-   
+
     const nativeEvent = e.nativeEvent;
     const currentX = nativeEvent.locationX;
     const currentY = nativeEvent.locationY;
-    
-    // ✅ Validate coordinates
-    if (currentX === undefined || currentY === undefined || isNaN(currentX) || isNaN(currentY)) {
-      console.warn("⚠️ Cannot get touch coordinates", { 
-        locationX: nativeEvent.locationX, 
-        locationY: nativeEvent.locationY
-      });
-      return;
-    }
-    
-    // This is more reliable when ScrollView affects coordinate updates
-    let deltaX, deltaY;
+    if (currentX === undefined || currentY === undefined || isNaN(currentX) || isNaN(currentY)) return;
+
+    let deltaX = 0;
+    let deltaY = 0;
     if (lastTouchPosition.current) {
-      // Calculate incremental delta from last touch position
       deltaX = currentX - lastTouchPosition.current.x;
       deltaY = currentY - lastTouchPosition.current.y;
     } else if (initialTouchPosition.current) {
-      // Fallback to absolute delta if lastTouchPosition not set
       deltaX = currentX - initialTouchPosition.current.x;
       deltaY = currentY - initialTouchPosition.current.y;
-    } else {
-      console.warn("⚠️ No touch position reference available");
-      return;
     }
 
-    // Les coordonnées de mouvement sont relatives au wrapper commun
     let imageRect = imageDisplayRect.current;
     const wrapper = commonWrapperLayout.current;
-    
-    // Recalculate if not available
     if (imageRect.width === 0 || imageRect.height === 0) {
       if (wrapper.width > 0 && wrapper.height > 0 && originalImageDimensions.current.width > 0) {
         updateImageDisplayRect(wrapper.width, wrapper.height);
         imageRect = imageDisplayRect.current;
       }
-      // If still not available, use full wrapper as fallback (wrapper-relative coords)
       if (imageRect.width === 0 || imageRect.height === 0) {
-        if (wrapper.width > 0 && wrapper.height > 0) {
-          imageRect = {
-            x: 0,
-            y: 0,
-            width: wrapper.width,
-            height: wrapper.height,
-          };
-        } else {
-          console.warn("⚠️ Cannot move point: wrapper or imageDisplayRect not available");
-          return;
-        }
+        imageRect = { x: 0, y: 0, width: wrapper.width || 0, height: wrapper.height || 0 };
       }
     }
-    
-    // ✅ Bounds in wrapper-relative coordinates (touch/points use wrapper as origin)
-    // Full picture = entire wrapper; visible image = imageDisplayRect
-    const contentRect = {
-      x: imageRect.x,
-      y: imageRect.y,
-      width: imageRect.width,
-      height: imageRect.height
-    };
-    
-    // ✅ FREE DRAG: Ensure initial positions are set
-    if (!initialPointPosition.current) {
-      const currentPoint = points[selectedPointIndex.current];
-      if (currentPoint && typeof currentPoint.x === 'number' && typeof currentPoint.y === 'number') {
-        initialPointPosition.current = { ...currentPoint };
-      } else {
-        console.warn("⚠️ No point found for selected index or invalid point data");
-        return;
-      }
-    }
-    
-    // ✅ NEW APPROACH: Use touchOffset to map touch position directly to point position
-    // This eliminates delta accumulation and "dead zone" issues completely
-    if (!touchOffset.current) {
-      console.warn("⚠️ touchOffset not initialized, cannot move point");
-      return;
-    }
-    
-    // ✅ DIRECT MAPPING: newPosition = touchPosition + offset
-    // No delta accumulation, no zone morte
-    const newX = currentX + touchOffset.current.x;
-    const newY = currentY + touchOffset.current.y;
-    
-    // ✅ STRICT BOUNDS: visible image area (wrapper-relative) for lastValidPosition
-    const strictMinX = contentRect.x;
-    const strictMaxX = contentRect.x + contentRect.width;
-    // Tiny safety margin at bottom (2px) so point can almost reach bottom edge
-    const bottomSafePadding = 2;
-    const strictMinY = contentRect.y;
-    const strictMaxY = contentRect.y + contentRect.height - bottomSafePadding;
-    
-    // ✅ DRAG BOUNDS: keep points strictly on the visible picture (no going outside image)
-    const overshootMinX = strictMinX;
-    const overshootMaxX = strictMaxX;
-    const overshootMinY = strictMinY;
-    const overshootMaxY = strictMaxY;
-    
-    // ✅ Clamp to visible image so points always stay on the picture
-    const dragX = Math.max(overshootMinX, Math.min(newX, overshootMaxX));
-    let dragY = Math.max(overshootMinY, Math.min(newY, overshootMaxY));
-  
-    // ✅ Bottom-band "stickiness": if the point is already in the last few pixels
-    // near the bottom, ignore any move that would suddenly pull it back up.
-    const bottomBandThreshold = strictMaxY - 3; // last ~3px of allowed area
-    const prevPoint = points[selectedPointIndex.current];
-    if (prevPoint && prevPoint.y >= bottomBandThreshold && dragY < prevPoint.y) {
-      dragY = prevPoint.y;
-    }
-  
-    // ✅ UPDATE POINT: Use (possibly adjusted) dragY
-    const updatedPoint = { x: dragX, y: dragY };
-    
-    // ✅ CRITICAL: Detect if point is AT overshoot boundary (not just clamped)
-    // Check if point is exactly at overshootMin/Max (within 1px tolerance)
-    const isAtOvershootMinX = Math.abs(dragX - overshootMinX) < 1;
-    const isAtOvershootMaxX = Math.abs(dragX - overshootMaxX) < 1;
-    const isAtOvershootMinY = Math.abs(dragY - overshootMinY) < 1;
-    const isAtOvershootMaxY = Math.abs(dragY - overshootMaxY) < 1;
-    
-    const isAtBoundaryX = isAtOvershootMinX || isAtOvershootMaxX;
-    const isAtBoundaryY = isAtOvershootMinY || isAtOvershootMaxY;
-    
-    // Only recalculate offset when FIRST hitting boundary (transition free → boundary)
-    const justHitBoundaryX = isAtBoundaryX && !wasClampedLastFrame.current.x;
-    const justHitBoundaryY = isAtBoundaryY && !wasClampedLastFrame.current.y;
-    
-    if (justHitBoundaryX || justHitBoundaryY) {
-      // Point JUST hit overshoot boundary - recalculate offset once
-      const newOffsetX = justHitBoundaryX ? (dragX - currentX) : touchOffset.current.x;
-      const newOffsetY = justHitBoundaryY ? (dragY - currentY) : touchOffset.current.y;
-      
-      touchOffset.current = {
-        x: newOffsetX,
-        y: newOffsetY
-      };
-      
-      console.log("✅ OFFSET RECALCULATED (hit boundary):", {
-        axis: justHitBoundaryX ? 'X' : 'Y',
-        touchY: currentY.toFixed(2),
-        dragY: dragY.toFixed(2),
-        newOffsetY: touchOffset.current.y.toFixed(2),
-        note: "First contact with boundary - offset locked"
-      });
-    }
-    
-    // Update boundary state for next frame
-    wasClampedLastFrame.current = { x: isAtBoundaryX, y: isAtBoundaryY };
-    
-    // ✅ DEBUG: Log when in overshoot zone (only when not at boundary)
-    const isInOvershootY = dragY < strictMinY || dragY > strictMaxY;
-    if (isInOvershootY && !isAtBoundaryY) {
-      console.log("🎯 IN OVERSHOOT ZONE:", {
-        touchY: currentY.toFixed(2),
-        appliedY: dragY.toFixed(2),
-        overshootRange: `${overshootMinY.toFixed(2)} - ${overshootMaxY.toFixed(2)}`,
-        strictRange: `${strictMinY.toFixed(2)} - ${strictMaxY.toFixed(2)}`
-      });
-    }
-    
-    // ✅ Update lastValidPosition ONLY if point is within strictBounds
-    const isStrictlyValid = 
-      dragX >= strictMinX && dragX <= strictMaxX &&
-      dragY >= strictMinY && dragY <= strictMaxY;
-    
-    if (isStrictlyValid) {
-      lastValidPosition.current = updatedPoint;
-    }
-    
-    // ✅ Update lastTouchPosition for next frame (simple tracking)
+
     lastTouchPosition.current = { x: currentX, y: currentY };
-  
-    // ✅ DEBUG: Log the point update before setPoints
-    console.log("📍 UPDATING POINT:", {
-      index: selectedPointIndex.current,
-      newX: updatedPoint.x.toFixed(2),
-      newY: updatedPoint.y.toFixed(2),
-      touchX: currentX.toFixed(2),
-      touchY: currentY.toFixed(2),
-      offsetX: touchOffset.current.x.toFixed(2),
-      offsetY: touchOffset.current.y.toFixed(2)
-    });
-  
-    setPoints(prev => {
-      // ✅ SAFETY: Ensure prev is a valid array
-      if (!Array.isArray(prev) || prev.length === 0) {
-        return prev;
-      }
-      
+
+    setPoints((prev) => {
+      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
+      if (pointIndex === null || pointIndex < 0 || pointIndex >= prev.length) return prev;
+
+      return prev.map((p, i) => {
+        if (i !== pointIndex) return p;
+        return {
+          x: Math.max(imageRect.x, Math.min(p.x + deltaX, imageRect.x + imageRect.width)),
+          y: Math.max(imageRect.y, Math.min(p.y + deltaY, imageRect.y + imageRect.height)),
+        };
       });
-      
-      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) {
-        // Bounds in wrapper-relative coords (same as point coords)
-        const minX = imageRect.x;
-        const minY = imageRect.y;
-        const maxX = imageRect.x + imageRect.width;
-        const maxY = imageRect.y + imageRect.height;
-        
-        // Clamp the dragged point back to visible image area (full picture in wrapper-relative coords)
-        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(minX, Math.min(point.x, maxX)),
-            y: Math.max(minY, Math.min(point.y, maxY))
-          };
-          
-          // 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: minX.toFixed(2), maxX: maxX.toFixed(2), minY: minY.toFixed(2), maxY: maxY.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;
+    lastTouchPosition.current = null;
     lastValidPosition.current = null;
+    touchOffset.current = null;
+    wasClampedLastFrame.current = { x: false, y: false };
     selectedPointIndex.current = null;
     
     // ✅ CRITICAL: Re-enable parent ScrollView scrolling when drag ends
@@ -1058,6 +732,18 @@ const rotatePreviewImage = async (degrees) => {
     });
   };
 
+  const getFrameBounds = () => {
+    if (!points || points.length < 4) return null;
+    const xs = points.map((p) => p.x);
+    const ys = points.map((p) => p.y);
+    return {
+      minX: Math.min(...xs),
+      maxX: Math.max(...xs),
+      minY: Math.min(...ys),
+      maxY: Math.max(...ys),
+    };
+  };
+
 
   return (
     <View style={styles.container}>
@@ -1181,7 +867,7 @@ const rotatePreviewImage = async (degrees) => {
                     const sizeScale = Math.max(0.6, Math.min(1.4, sizeScaleRaw)); // clamp
 
                     const stroke = Math.max(0.75, 2 * responsiveScale * sizeScale);
-                    const handleRadius = Math.max(4, 10 * responsiveScale * sizeScale);
+                    const handleRadius = Math.max(5, 9 * responsiveScale * sizeScale);
 
                     return (
                       <>
@@ -1191,15 +877,31 @@ const rotatePreviewImage = async (degrees) => {
                           fillRule="evenodd"
                         />
                         {!showResult && points.length > 0 && (
-                          <Path d={createPath()} fill="transparent" stroke="white" strokeWidth={stroke} />
+                          <Path d={createPath()} fill="transparent" stroke="rgba(255,255,255,0.95)" strokeWidth={stroke} />
                         )}
                         {!showResult && points.map((point, index) => (
-                          <Circle key={index} cx={point.x} cy={point.y} r={handleRadius} fill="white" />
+                          <Circle key={`dot-${index}`} cx={point.x} cy={point.y} r={handleRadius} fill="#E7FFD9" stroke={ACCENT_GREEN} strokeWidth={1.5} />
                         ))}
                       </>
                     );
                   })()}
                 </Svg>
+                {!showResult && image && (
+                  <>
+                    {/* <View style={[styles.topBar, { paddingTop: Math.max(insets.top + 8, 18) }]}>
+                      <TouchableOpacity style={styles.topIconButton} activeOpacity={0.8}>
+                        <Ionicons name="flash" size={18} color={ACCENT_GREEN} />
+                      </TouchableOpacity>
+                      <Text style={[styles.topBarTitle, { fontSize: Math.max(22, Math.round(30 * responsiveScale)) }]}>Precision Scan</Text>
+                      <TouchableOpacity style={styles.topIconButton} onPress={handleReset} activeOpacity={0.8}>
+                        <Ionicons name="settings-outline" size={20} color="white" />
+                      </TouchableOpacity>
+                    </View> */}
+                    {/* <View style={styles.detectBadge}>
+                      <Text style={styles.detectBadgeText}>A4 Document Detected</Text>
+                    </View> */}
+                  </>
+                )}
               </View>
               {isRotating && (
                 <View style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center' }}>
@@ -1217,90 +919,91 @@ const rotatePreviewImage = async (degrees) => {
               style={[
                 styles.buttonContainerBelow,
                 {
-                  paddingBottom: Math.max(insets.bottom, Math.round(16 * responsiveScale)),
-                  paddingTop: Math.round(12 * responsiveScale),
+                  // Keep controls clearly above home indicator / bottom gesture bar.
+                  paddingBottom: Math.max(insets.bottom + Math.round(12 * responsiveScale), Math.round(20 * responsiveScale)),
+                  paddingTop: Math.round(10 * responsiveScale),
                   paddingHorizontal: Math.round(12 * responsiveScale),
-                  gap: Math.round(8 * responsiveScale),
                 },
               ]}
             >
-              {/* Close button: always visible, closes cropper */}
-              <TouchableOpacity
-                style={[
-                  styles.rotationButton,
-                  {
-                    backgroundColor: 'transparent',
-                    borderWidth: 1,
-                    borderColor: 'white',
-                    width: Math.round(40 * responsiveScale),
-                    height: Math.round(40 * responsiveScale),
-                    borderRadius: Math.round(20 * responsiveScale),
-                    marginRight: Math.round(6 * responsiveScale),
-                  },
-                ]}
-                onPress={() => {
-                  if (onCancel) {
-                    onCancel();
-                  }
-                }}
-              >
-                <Ionicons name="close" size={Math.round(20 * responsiveScale)} color="white" />
-              </TouchableOpacity>
-
-              {Platform.OS === 'android' && (
-                <TouchableOpacity 
+              <View style={styles.controlsRow}>
+                <TouchableOpacity
+                  style={[
+                    styles.roundControl,
+                    {
+                      width: 'auto',
+                      minWidth: Math.max(
+                        Math.round(84 * responsiveScale),
+                        Math.round(((cancelText ? String(cancelText).length : 6) * 7 + 32) * responsiveScale)
+                      ),
+                      paddingHorizontal: Math.round(12 * responsiveScale),
+                    },
+                  ]}
+                  onPress={() => {
+                    if (onCancel) {
+                      onCancel();
+                    }
+                  }}
+                  activeOpacity={0.85}
+                >
+                  <Text
+                    style={[
+                      styles.buttonText,
+                      {
+                        fontSize: Math.max(10, Math.round(11 * responsiveScale)),
+                        letterSpacing: 0.5,
+                      },
+                    ]}
+                  >
+                    {cancelText}
+                  </Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={styles.enhanceButton}
+                  onPress={handleReset}
+                  activeOpacity={0.85}
+                >
+                  <Ionicons name="sparkles-outline" size={Math.round(18 * responsiveScale)} color="rgba(255,255,255,0.95)" />
+                  <Text style={styles.buttonText} numberOfLines={1} ellipsizeMode="tail">
+                    {resetText || 'Enhance'}
+                  </Text>
+                </TouchableOpacity>
+                <TouchableOpacity
                   style={[
                     styles.rotationButton,
                     {
-                      width: Math.round(56 * responsiveScale),
-                      height: Math.round(48 * responsiveScale),
-                      borderRadius: Math.round(28 * responsiveScale),
+                      minWidth: Math.max(
+                        Math.round(88 * responsiveScale),
+                        Math.round(((rotateText ? String(rotateText).length : 6) * 7 + 38) * responsiveScale)
+                      ),
                     },
                     isRotating && { opacity: 0.7 },
-                  ]} 
+                  ]}
                   onPress={() => enableRotation && rotatePreviewImage(90)}
                   disabled={isRotating}
+                  activeOpacity={0.85}
                 >
                   {isRotating ? (
                     <ActivityIndicator size="small" color="white" />
                   ) : (
-                    <Ionicons name="sync" size={Math.round(24 * responsiveScale)} color="white" />
+                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                      <Ionicons name="refresh" size={Math.round(15 * responsiveScale)} color="white" />
+                      <Text
+                        style={[
+                          styles.buttonText,
+                          {
+                            fontSize: Math.max(10, Math.round(11 * responsiveScale)),
+                            letterSpacing: 0.5,
+                          },
+                        ]}
+                      >
+                        {rotateText}
+                      </Text>
+                    </View>
                   )}
                 </TouchableOpacity>
-              )}
-              
-              <TouchableOpacity
-                style={[
-                  styles.button,
-                  {
-                    minHeight: Math.round(48 * responsiveScale),
-                    paddingVertical: Math.round(12 * responsiveScale),
-                    paddingHorizontal: Math.round(10 * responsiveScale),
-                  },
-                ]}
-                onPress={handleReset}
-              >
-                <Text
-                  style={[
-                    styles.buttonText,
-                    {
-                      // Smaller font for longer labels so they stay on one line
-                      fontSize: Math.max(
-                        12,
-                        Math.round(
-                          (resetText && resetText.length > 10 ? 14 : 18) *
-                            responsiveScale
-                        )
-                      ),
-                    },
-                  ]}
-                  numberOfLines={1}
-                  ellipsizeMode="tail"
-                >
-                  {resetText}
-                </Text>
-              </TouchableOpacity>
-              
+              </View>
+
               <TouchableOpacity
                 onPress={async () => {
                         setIsLoading(true);
@@ -1435,30 +1138,26 @@ const rotatePreviewImage = async (degrees) => {
                 style={[
                   styles.button,
                   {
-                    minHeight: Math.round(48 * responsiveScale),
-                    paddingVertical: Math.round(12 * responsiveScale),
-                    paddingHorizontal: Math.round(10 * responsiveScale),
+                    marginTop: Math.round(10 * responsiveScale),
+                    // Keep confirm action above browser/system navigation bars.
+                    marginBottom: Math.max(insets.bottom + Math.round(10 * responsiveScale), Math.round(22 * responsiveScale)),
+                    borderWidth: 1.8,
+                    borderColor: ACCENT_GREEN,
                   },
                 ]}
+                hitSlop={{ top: 8, left: 8, right: 8, bottom: 12 }}
               >
                 <Text
                   style={[
                     styles.buttonText,
                     {
-                      // Smaller font for longer labels so they stay on one line
-                      fontSize: Math.max(
-                        12,
-                        Math.round(
-                          (confirmText && confirmText.length > 10 ? 14 : 18) *
-                            responsiveScale
-                        )
-                      ),
+                      fontSize: Math.max(13, Math.round(14 * responsiveScale)),
                     },
                   ]}
                   numberOfLines={1}
                   ellipsizeMode="tail"
                 >
-                  {confirmText}
+                  {confirmText || 'Use Scan'}
                 </Text>
               </TouchableOpacity>
             </View>