@greatapps/common 1.1.462 → 1.1.464

package/dist/modules/images/hooks/use-image-upload.hook.mjs

@@ -1,9 +1,15 @@
 "use client";
-import { useState, useCallback, useRef } from "react";
+import { useState, useCallback, useRef, useEffect } from "react";
 import { cropImageToCanvas } from "../utils/crop-image";
 import { validateImage } from "../utils/validate-image";
 function useImageUpload(options) {
   const { config, onSuccess, onError } = options;
+  const onSuccessRef = useRef(onSuccess);
+  const onErrorRef = useRef(onError);
+  useEffect(() => {
+    onSuccessRef.current = onSuccess;
+    onErrorRef.current = onError;
+  }, [onSuccess, onError]);
   const [originalImage, setOriginalImage] = useState(null);
   const [croppedPreview, setCroppedPreview] = useState(null);
   const [showCropModal, setShowCropModal] = useState(false);
@@ -12,48 +18,58 @@ function useImageUpload(options) {
   const [isProcessing, setIsProcessing] = useState(false);
   const fileInputRef = useRef(null);
   const currentFileName = useRef("");
+  const checkMinimumDimensions = useCallback(
+    (naturalWidth, naturalHeight) => {
+      const { width: minW, height: minH, aspectRatio } = config;
+      const imgAspect = naturalWidth / naturalHeight;
+      if (imgAspect >= aspectRatio) {
+        const cropHeight = naturalHeight;
+        const cropWidth = cropHeight * aspectRatio;
+        return cropWidth >= minW && cropHeight >= minH;
+      } else {
+        const cropWidth = naturalWidth;
+        const cropHeight = cropWidth / aspectRatio;
+        return cropWidth >= minW && cropHeight >= minH;
+      }
+    },
+    [config]
+  );
   const handleFileSelect = useCallback(
     (file) => {
       const validation = validateImage(file);
       if (!validation.valid) {
-        onError?.(validation.error || "Arquivo inv\xE1lido");
+        onErrorRef.current?.(validation.error || "Arquivo inv\xE1lido");
         return;
       }
       currentFileName.current = file.name;
       const reader = new FileReader();
       reader.onload = (e) => {
-        setOriginalImage(e.target?.result);
-        setShowCropModal(true);
+        const base64 = e.target?.result;
+        setOriginalImage(base64);
+        const img = new Image();
+        img.onload = () => {
+          const { naturalWidth, naturalHeight } = img;
+          if (checkMinimumDimensions(naturalWidth, naturalHeight)) {
+            setShowCropModal(true);
+          } else {
+            setTooSmallError({
+              fileName: currentFileName.current,
+              minWidth: config.width,
+              minHeight: config.height
+            });
+            setShowTooSmallModal(true);
+          }
+        };
+        img.src = base64;
       };
       reader.readAsDataURL(file);
     },
-    [onError]
+    [config, checkMinimumDimensions]
   );
   const handleImageLoadInModal = useCallback(
-    (naturalWidth, naturalHeight) => {
-      const { width: minW, height: minH, aspectRatio } = config;
-      const imgAspect = naturalWidth / naturalHeight;
-      let canFitMinCrop = false;
-      if (imgAspect >= aspectRatio) {
-        const cropHeight = naturalHeight;
-        const cropWidth = cropHeight * aspectRatio;
-        canFitMinCrop = cropWidth >= minW && cropHeight >= minH;
-      } else {
-        const cropWidth = naturalWidth;
-        const cropHeight = cropWidth / aspectRatio;
-        canFitMinCrop = cropWidth >= minW && cropHeight >= minH;
-      }
-      if (!canFitMinCrop) {
-        setShowCropModal(false);
-        setTooSmallError({
-          fileName: currentFileName.current,
-          minWidth: minW,
-          minHeight: minH
-        });
-        setShowTooSmallModal(true);
-      }
+    (_naturalWidth, _naturalHeight) => {
     },
-    [config]
+    []
   );
   const handleSelectAnotherFile = useCallback(() => {
     setShowTooSmallModal(false);
@@ -78,14 +94,14 @@ function useImageUpload(options) {
         );
         setCroppedPreview(croppedBase64);
         setShowCropModal(false);
-        onSuccess?.(croppedBase64);
+        onSuccessRef.current?.(croppedBase64);
       } catch {
-        onError?.("Erro ao aplicar crop");
+        onErrorRef.current?.("Erro ao aplicar crop");
       } finally {
         setIsProcessing(false);
       }
     },
-    [config, onSuccess, onError]
+    [config]
   );
   const clear = useCallback(() => {
     setOriginalImage(null);

package/dist/modules/images/hooks/use-image-upload.hook.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/modules/images/hooks/use-image-upload.hook.ts"],"sourcesContent":["'use client'\n\nimport { useState, useCallback, useRef } from 'react'\nimport type { Crop } from 'react-image-crop'\nimport { cropImageToCanvas } from '../utils/crop-image'\nimport { validateImage } from '../utils/validate-image'\nimport type { ImageConfig } from '../types/image.type'\n\nexport interface ImageTooSmallError {\n  fileName: string\n  minWidth: number\n  minHeight: number\n}\n\nexport interface UseImageUploadOptions {\n  config: ImageConfig\n  onSuccess?: (base64Image: string) => void\n  onError?: (error: string) => void\n}\n\nexport function useImageUpload(options: UseImageUploadOptions) {\n  const { config, onSuccess, onError } = options\n\n  const [originalImage, setOriginalImage] = useState<string | null>(null)\n  const [croppedPreview, setCroppedPreview] = useState<string | null>(null)\n  const [showCropModal, setShowCropModal] = useState(false)\n  const [showTooSmallModal, setShowTooSmallModal] = useState(false)\n  const [tooSmallError, setTooSmallError] = useState<ImageTooSmallError | null>(null)\n  const [isProcessing, setIsProcessing] = useState(false)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  const currentFileName = useRef<string>('')\n\n  // Abre modal IMEDIATAMENTE sem processar - muito mais rápido\n  const handleFileSelect = useCallback(\n    (file: File) => {\n      const validation = validateImage(file)\n      if (!validation.valid) {\n        onError?.(validation.error || 'Arquivo inválido')\n        return\n      }\n\n      currentFileName.current = file.name\n\n      // Converte para base64 e abre modal instantaneamente\n      const reader = new FileReader()\n      reader.onload = (e) => {\n        setOriginalImage(e.target?.result as string)\n        setShowCropModal(true)\n      }\n      reader.readAsDataURL(file)\n    },\n    [onError]\n  )\n\n  // Chamado pelo ImageCropModal quando a imagem carrega - verifica dimensões\n  const handleImageLoadInModal = useCallback(\n    (naturalWidth: number, naturalHeight: number) => {\n      const { width: minW, height: minH, aspectRatio } = config\n      const imgAspect = naturalWidth / naturalHeight\n\n      let canFitMinCrop = false\n      if (imgAspect >= aspectRatio) {\n        const cropHeight = naturalHeight\n        const cropWidth = cropHeight * aspectRatio\n        canFitMinCrop = cropWidth >= minW && cropHeight >= minH\n      } else {\n        const cropWidth = naturalWidth\n        const cropHeight = cropWidth / aspectRatio\n        canFitMinCrop = cropWidth >= minW && cropHeight >= minH\n      }\n\n      if (!canFitMinCrop) {\n        // Fecha modal de crop e abre modal de erro\n        setShowCropModal(false)\n        setTooSmallError({\n          fileName: currentFileName.current,\n          minWidth: minW,\n          minHeight: minH,\n        })\n        setShowTooSmallModal(true)\n      }\n    },\n    [config]\n  )\n\n  const handleSelectAnotherFile = useCallback(() => {\n    setShowTooSmallModal(false)\n    setTooSmallError(null)\n    fileInputRef.current?.click()\n  }, [])\n\n  const handleCancelTooSmall = useCallback(() => {\n    setShowTooSmallModal(false)\n    setShowCropModal(false)\n    setTooSmallError(null)\n    setOriginalImage(null)\n  }, [])\n\n  const handleCropConfirm = useCallback(\n    async (imageElement: HTMLImageElement, cropArea: Crop) => {\n      setIsProcessing(true)\n      try {\n        // Crop é feito inteiramente no cliente via Canvas\n        // Já produz imagem no tamanho final (config.width x config.height)\n        const croppedBase64 = await cropImageToCanvas(\n          imageElement,\n          cropArea,\n          config.width,\n          config.height\n        )\n\n        setCroppedPreview(croppedBase64)\n        setShowCropModal(false)\n        onSuccess?.(croppedBase64)\n      } catch {\n        onError?.('Erro ao aplicar crop')\n      } finally {\n        setIsProcessing(false)\n      }\n    },\n    [config, onSuccess, onError]\n  )\n\n  const clear = useCallback(() => {\n    setOriginalImage(null)\n    setCroppedPreview(null)\n  }, [])\n\n  return {\n    originalImage,\n    croppedPreview,\n    showCropModal,\n    showTooSmallModal,\n    tooSmallError,\n    config,\n    isProcessing,\n    fileInputRef,\n    handleFileSelect,\n    handleCropConfirm,\n    handleImageLoadInModal,\n    handleSelectAnotherFile,\n    handleCancelTooSmall,\n    setShowCropModal,\n    setShowTooSmallModal,\n    clear,\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/modules/images/hooks/use-image-upload.hook.ts"],"sourcesContent":["'use client'\n\nimport { useState, useCallback, useRef, useEffect } from 'react'\nimport type { Crop } from 'react-image-crop'\nimport { cropImageToCanvas } from '../utils/crop-image'\nimport { validateImage } from '../utils/validate-image'\nimport type { ImageConfig } from '../types/image.type'\n\nexport interface ImageTooSmallError {\n  fileName: string\n  minWidth: number\n  minHeight: number\n}\n\nexport interface UseImageUploadOptions {\n  config: ImageConfig\n  onSuccess?: (base64Image: string) => void\n  onError?: (error: string) => void\n}\n\nexport function useImageUpload(options: UseImageUploadOptions) {\n  const { config, onSuccess, onError } = options\n\n  // Refs para manter callbacks sempre atualizados (evita stale closures)\n  const onSuccessRef = useRef(onSuccess)\n  const onErrorRef = useRef(onError)\n  useEffect(() => {\n    onSuccessRef.current = onSuccess\n    onErrorRef.current = onError\n  }, [onSuccess, onError])\n\n  const [originalImage, setOriginalImage] = useState<string | null>(null)\n  const [croppedPreview, setCroppedPreview] = useState<string | null>(null)\n  const [showCropModal, setShowCropModal] = useState(false)\n  const [showTooSmallModal, setShowTooSmallModal] = useState(false)\n  const [tooSmallError, setTooSmallError] = useState<ImageTooSmallError | null>(null)\n  const [isProcessing, setIsProcessing] = useState(false)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  const currentFileName = useRef<string>('')\n\n  // Verifica se a imagem cabe o crop mínimo\n  const checkMinimumDimensions = useCallback(\n    (naturalWidth: number, naturalHeight: number): boolean => {\n      const { width: minW, height: minH, aspectRatio } = config\n      const imgAspect = naturalWidth / naturalHeight\n\n      if (imgAspect >= aspectRatio) {\n        const cropHeight = naturalHeight\n        const cropWidth = cropHeight * aspectRatio\n        return cropWidth >= minW && cropHeight >= minH\n      } else {\n        const cropWidth = naturalWidth\n        const cropHeight = cropWidth / aspectRatio\n        return cropWidth >= minW && cropHeight >= minH\n      }\n    },\n    [config]\n  )\n\n  // Valida dimensões ANTES de abrir qualquer modal\n  const handleFileSelect = useCallback(\n    (file: File) => {\n      const validation = validateImage(file)\n      if (!validation.valid) {\n        onErrorRef.current?.(validation.error || 'Arquivo inválido')\n        return\n      }\n\n      currentFileName.current = file.name\n\n      // Converte para base64\n      const reader = new FileReader()\n      reader.onload = (e) => {\n        const base64 = e.target?.result as string\n        setOriginalImage(base64)\n\n        // Carrega imagem em memória para verificar dimensões ANTES de abrir modal\n        const img = new Image()\n        img.onload = () => {\n          const { naturalWidth, naturalHeight } = img\n\n          if (checkMinimumDimensions(naturalWidth, naturalHeight)) {\n            // Dimensões OK - abre modal de crop\n            setShowCropModal(true)\n          } else {\n            // Imagem muito pequena - abre modal de erro diretamente\n            setTooSmallError({\n              fileName: currentFileName.current,\n              minWidth: config.width,\n              minHeight: config.height,\n            })\n            setShowTooSmallModal(true)\n          }\n        }\n        img.src = base64\n      }\n      reader.readAsDataURL(file)\n    },\n    [config, checkMinimumDimensions]\n  )\n\n  // Mantido para compatibilidade, mas não mais necessário para validação\n  const handleImageLoadInModal = useCallback(\n    (_naturalWidth: number, _naturalHeight: number) => {\n      // Validação agora é feita antes de abrir a modal\n      // Este callback pode ser usado para outros propósitos se necessário\n    },\n    []\n  )\n\n  const handleSelectAnotherFile = useCallback(() => {\n    setShowTooSmallModal(false)\n    setTooSmallError(null)\n    fileInputRef.current?.click()\n  }, [])\n\n  const handleCancelTooSmall = useCallback(() => {\n    setShowTooSmallModal(false)\n    setShowCropModal(false)\n    setTooSmallError(null)\n    setOriginalImage(null)\n  }, [])\n\n  const handleCropConfirm = useCallback(\n    async (imageElement: HTMLImageElement, cropArea: Crop) => {\n      setIsProcessing(true)\n      try {\n        // Crop é feito inteiramente no cliente via Canvas\n        // Já produz imagem no tamanho final (config.width x config.height)\n        const croppedBase64 = await cropImageToCanvas(\n          imageElement,\n          cropArea,\n          config.width,\n          config.height\n        )\n\n        setCroppedPreview(croppedBase64)\n        setShowCropModal(false)\n        onSuccessRef.current?.(croppedBase64)\n      } catch {\n        onErrorRef.current?.('Erro ao aplicar crop')\n      } finally {\n        setIsProcessing(false)\n      }\n    },\n    [config]\n  )\n\n  const clear = useCallback(() => {\n    setOriginalImage(null)\n    setCroppedPreview(null)\n  }, [])\n\n  return {\n    originalImage,\n    croppedPreview,\n    showCropModal,\n    showTooSmallModal,\n    tooSmallError,\n    config,\n    isProcessing,\n    fileInputRef,\n    handleFileSelect,\n    handleCropConfirm,\n    handleImageLoadInModal,\n    handleSelectAnotherFile,\n    handleCancelTooSmall,\n    setShowCropModal,\n    setShowTooSmallModal,\n    clear,\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/modules/images/utils/crop-image.mjs

@@ -21,7 +21,7 @@ async function cropImageToCanvas(image, crop, targetWidth, targetHeight) {
     targetWidth,
     targetHeight
   );
-  return canvas.toDataURL("image/webp", 0.9);
+  return canvas.toDataURL("image/jpeg", 0.92);
 }
 export {
   cropImageToCanvas

package/dist/modules/images/utils/crop-image.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/modules/images/utils/crop-image.ts"],"sourcesContent":["import type { Crop } from 'react-image-crop'\n\nexport async function cropImageToCanvas(\n  image: HTMLImageElement,\n  crop: Crop,\n  targetWidth: number,\n  targetHeight: number\n): Promise<string> {\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')\n\n  if (!ctx) throw new Error('Canvas não suportado')\n\n  const pixelCrop = {\n    x: crop.unit === '%' ? (crop.x / 100) * image.naturalWidth : crop.x,\n    y: crop.unit === '%' ? (crop.y / 100) * image.naturalHeight : crop.y,\n    width:\n      crop.unit === '%' ? (crop.width / 100) * image.naturalWidth : crop.width,\n    height:\n      crop.unit === '%'\n        ? (crop.height / 100) * image.naturalHeight\n        : crop.height,\n  }\n\n  canvas.width = targetWidth\n  canvas.height = targetHeight\n\n  ctx.drawImage(\n    image,\n    pixelCrop.x,\n    pixelCrop.y,\n    pixelCrop.width,\n    pixelCrop.height,\n    0,\n    0,\n    targetWidth,\n    targetHeight\n  )\n\n  return canvas.toDataURL('image/webp', 0.9)\n}\n"],"mappings":"AAEA,eAAsB,kBACpB,OACA,MACA,aACA,cACiB;AACjB,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,MAAM,OAAO,WAAW,IAAI;AAElC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,yBAAsB;AAEhD,QAAM,YAAY;AAAA,IAChB,GAAG,KAAK,SAAS,MAAO,KAAK,IAAI,MAAO,MAAM,eAAe,KAAK;AAAA,IAClE,GAAG,KAAK,SAAS,MAAO,KAAK,IAAI,MAAO,MAAM,gBAAgB,KAAK;AAAA,IACnE,OACE,KAAK,SAAS,MAAO,KAAK,QAAQ,MAAO,MAAM,eAAe,KAAK;AAAA,IACrE,QACE,KAAK,SAAS,MACT,KAAK,SAAS,MAAO,MAAM,gBAC5B,KAAK;AAAA,EACb;AAEA,SAAO,QAAQ;AACf,SAAO,SAAS;AAEhB,MAAI;AAAA,IACF;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO,OAAO,UAAU,cAAc,GAAG;AAC3C;","names":[]}
+{"version":3,"sources":["../../../../src/modules/images/utils/crop-image.ts"],"sourcesContent":["import type { Crop } from 'react-image-crop'\n\nexport async function cropImageToCanvas(\n  image: HTMLImageElement,\n  crop: Crop,\n  targetWidth: number,\n  targetHeight: number\n): Promise<string> {\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')\n\n  if (!ctx) throw new Error('Canvas não suportado')\n\n  const pixelCrop = {\n    x: crop.unit === '%' ? (crop.x / 100) * image.naturalWidth : crop.x,\n    y: crop.unit === '%' ? (crop.y / 100) * image.naturalHeight : crop.y,\n    width:\n      crop.unit === '%' ? (crop.width / 100) * image.naturalWidth : crop.width,\n    height:\n      crop.unit === '%'\n        ? (crop.height / 100) * image.naturalHeight\n        : crop.height,\n  }\n\n  canvas.width = targetWidth\n  canvas.height = targetHeight\n\n  ctx.drawImage(\n    image,\n    pixelCrop.x,\n    pixelCrop.y,\n    pixelCrop.width,\n    pixelCrop.height,\n    0,\n    0,\n    targetWidth,\n    targetHeight\n  )\n\n  // Usa JPEG para compatibilidade universal (Safari tem problemas com WebP)\n  return canvas.toDataURL('image/jpeg', 0.92)\n}\n"],"mappings":"AAEA,eAAsB,kBACpB,OACA,MACA,aACA,cACiB;AACjB,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,MAAM,OAAO,WAAW,IAAI;AAElC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,yBAAsB;AAEhD,QAAM,YAAY;AAAA,IAChB,GAAG,KAAK,SAAS,MAAO,KAAK,IAAI,MAAO,MAAM,eAAe,KAAK;AAAA,IAClE,GAAG,KAAK,SAAS,MAAO,KAAK,IAAI,MAAO,MAAM,gBAAgB,KAAK;AAAA,IACnE,OACE,KAAK,SAAS,MAAO,KAAK,QAAQ,MAAO,MAAM,eAAe,KAAK;AAAA,IACrE,QACE,KAAK,SAAS,MACT,KAAK,SAAS,MAAO,MAAM,gBAC5B,KAAK;AAAA,EACb;AAEA,SAAO,QAAQ;AACf,SAAO,SAAS;AAEhB,MAAI;AAAA,IACF;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAGA,SAAO,OAAO,UAAU,cAAc,IAAI;AAC5C;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.462",
+  "version": "1.1.464",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/modules/images/hooks/use-image-upload.hook.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useCallback, useRef } from 'react'
+import { useState, useCallback, useRef, useEffect } from 'react'
 import type { Crop } from 'react-image-crop'
 import { cropImageToCanvas } from '../utils/crop-image'
 import { validateImage } from '../utils/validate-image'
@@ -21,6 +21,14 @@ export interface UseImageUploadOptions {
 export function useImageUpload(options: UseImageUploadOptions) {
   const { config, onSuccess, onError } = options
 
+  // Refs para manter callbacks sempre atualizados (evita stale closures)
+  const onSuccessRef = useRef(onSuccess)
+  const onErrorRef = useRef(onError)
+  useEffect(() => {
+    onSuccessRef.current = onSuccess
+    onErrorRef.current = onError
+  }, [onSuccess, onError])
+
   const [originalImage, setOriginalImage] = useState<string | null>(null)
   const [croppedPreview, setCroppedPreview] = useState<string | null>(null)
   const [showCropModal, setShowCropModal] = useState(false)
@@ -30,57 +38,74 @@ export function useImageUpload(options: UseImageUploadOptions) {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const currentFileName = useRef<string>('')
 
-  // Abre modal IMEDIATAMENTE sem processar - muito mais rápido
+  // Verifica se a imagem cabe o crop mínimo
+  const checkMinimumDimensions = useCallback(
+    (naturalWidth: number, naturalHeight: number): boolean => {
+      const { width: minW, height: minH, aspectRatio } = config
+      const imgAspect = naturalWidth / naturalHeight
+
+      if (imgAspect >= aspectRatio) {
+        const cropHeight = naturalHeight
+        const cropWidth = cropHeight * aspectRatio
+        return cropWidth >= minW && cropHeight >= minH
+      } else {
+        const cropWidth = naturalWidth
+        const cropHeight = cropWidth / aspectRatio
+        return cropWidth >= minW && cropHeight >= minH
+      }
+    },
+    [config]
+  )
+
+  // Valida dimensões ANTES de abrir qualquer modal
   const handleFileSelect = useCallback(
     (file: File) => {
       const validation = validateImage(file)
       if (!validation.valid) {
-        onError?.(validation.error || 'Arquivo inválido')
+        onErrorRef.current?.(validation.error || 'Arquivo inválido')
         return
       }
 
       currentFileName.current = file.name
 
-      // Converte para base64 e abre modal instantaneamente
+      // Converte para base64
       const reader = new FileReader()
       reader.onload = (e) => {
-        setOriginalImage(e.target?.result as string)
-        setShowCropModal(true)
+        const base64 = e.target?.result as string
+        setOriginalImage(base64)
+
+        // Carrega imagem em memória para verificar dimensões ANTES de abrir modal
+        const img = new Image()
+        img.onload = () => {
+          const { naturalWidth, naturalHeight } = img
+
+          if (checkMinimumDimensions(naturalWidth, naturalHeight)) {
+            // Dimensões OK - abre modal de crop
+            setShowCropModal(true)
+          } else {
+            // Imagem muito pequena - abre modal de erro diretamente
+            setTooSmallError({
+              fileName: currentFileName.current,
+              minWidth: config.width,
+              minHeight: config.height,
+            })
+            setShowTooSmallModal(true)
+          }
+        }
+        img.src = base64
       }
       reader.readAsDataURL(file)
     },
-    [onError]
+    [config, checkMinimumDimensions]
   )
 
-  // Chamado pelo ImageCropModal quando a imagem carrega - verifica dimensões
+  // Mantido para compatibilidade, mas não mais necessário para validação
   const handleImageLoadInModal = useCallback(
-    (naturalWidth: number, naturalHeight: number) => {
-      const { width: minW, height: minH, aspectRatio } = config
-      const imgAspect = naturalWidth / naturalHeight
-
-      let canFitMinCrop = false
-      if (imgAspect >= aspectRatio) {
-        const cropHeight = naturalHeight
-        const cropWidth = cropHeight * aspectRatio
-        canFitMinCrop = cropWidth >= minW && cropHeight >= minH
-      } else {
-        const cropWidth = naturalWidth
-        const cropHeight = cropWidth / aspectRatio
-        canFitMinCrop = cropWidth >= minW && cropHeight >= minH
-      }
-
-      if (!canFitMinCrop) {
-        // Fecha modal de crop e abre modal de erro
-        setShowCropModal(false)
-        setTooSmallError({
-          fileName: currentFileName.current,
-          minWidth: minW,
-          minHeight: minH,
-        })
-        setShowTooSmallModal(true)
-      }
+    (_naturalWidth: number, _naturalHeight: number) => {
+      // Validação agora é feita antes de abrir a modal
+      // Este callback pode ser usado para outros propósitos se necessário
     },
-    [config]
+    []
   )
 
   const handleSelectAnotherFile = useCallback(() => {
@@ -111,14 +136,14 @@ export function useImageUpload(options: UseImageUploadOptions) {
 
         setCroppedPreview(croppedBase64)
         setShowCropModal(false)
-        onSuccess?.(croppedBase64)
+        onSuccessRef.current?.(croppedBase64)
       } catch {
-        onError?.('Erro ao aplicar crop')
+        onErrorRef.current?.('Erro ao aplicar crop')
       } finally {
         setIsProcessing(false)
       }
     },
-    [config, onSuccess, onError]
+    [config]
   )
 
   const clear = useCallback(() => {

package/src/modules/images/utils/crop-image.ts

@@ -37,5 +37,6 @@ export async function cropImageToCanvas(
     targetHeight
   )
 
-  return canvas.toDataURL('image/webp', 0.9)
+  // Usa JPEG para compatibilidade universal (Safari tem problemas com WebP)
+  return canvas.toDataURL('image/jpeg', 0.92)
 }