@archbase/components 4.0.17 → 4.0.19

package/src/image/editor/index.tsx

@@ -1,249 +1,105 @@
 /**
- * ArchbaseImagePickerEditor - Wrapper para react-image-picker-editor
- * Componente para seleção, edição e compressão de imagens em png, jpeg e webp
+ * ArchbaseImagePickerEditor — picker + editor de imagens próprio do Archbase.
  *
- * Funcionalidades:
- * - Suporta diferentes tipos de entrada: URL, data URI (base64), blob URL
- * - Debounce para evitar múltiplas chamadas do callback
- * - Mantém compatibilidade total com a API anterior
+ * Implementação:
+ *  - Upload via @mantine/dropzone (drag-and-drop + click). O conteúdo do
+ *    arquivo é lido com FileReader.readAsDataURL(), o que preserva os bytes
+ *    originais — sem nenhum canvas roundtrip. Logo, PNGs/WebPs com canal
+ *    alfa chegam ao callback com a transparência intacta.
+ *  - Preview com <img> nativa, sem any third-party.
+ *  - Botões de adicionar (re-upload), editar (crop/rotate em modal),
+ *    download e deletar — ActionIcons do Mantine.
+ *  - Crop opcional via react-easy-crop, com mime de saída respeitando
+ *    `preserveTransparency` (ver crop-image.ts).
+ *
+ * Mantém a API externa anterior (props `config`, `imageSrcProp`,
+ * `imageChanged`, `variant`, `onProcessingChange`) para compatibilidade
+ * com ArchbaseImageEdit e demais consumidores.
  */
-import { ActionIconVariant, Text, useMantineColorScheme } from '@mantine/core';
-import { useDebouncedCallback } from '@mantine/hooks';
-import { useArchbaseTranslation } from '@archbase/core';
-import React, { memo, useEffect, useMemo, useRef, useState, useCallback } from 'react';
-import { useArchbaseTheme } from '@archbase/core';
-import ReactImagePickerEditor, { ImagePickerConf } from 'react-image-picker-editor';
-import 'react-image-picker-editor/dist/index.css';
-import './image_editor_styles.scss';
+import { ActionIcon, ActionIconVariant, Box, Button, Group, Modal, Slider, Stack, Text, useMantineColorScheme } from '@mantine/core';
+import { Dropzone, IMAGE_MIME_TYPE } from '@mantine/dropzone';
+import { useDebouncedCallback, useDisclosure } from '@mantine/hooks';
+import { useArchbaseTranslation, useArchbaseTheme } from '@archbase/core';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Cropper, { Area } from 'react-easy-crop';
+import {
+	IconCrop,
+	IconDownload,
+	IconPhoto,
+	IconPhotoPlus,
+	IconRotate,
+	IconTrash,
+	IconUpload,
+	IconX,
+} from '@tabler/icons-react';
 import { ArchbaseImagePickerConf } from './models/index.models';
+import { getCroppedImage, resizeDataUri } from './functions/crop-image';
 
 export * from './models/index.models';
 
-// Mapeamento de idiomas para o react-image-picker-editor
-const LANGUAGE_MAP: Record<string, string> = {
-	'pt-BR': 'pt',
-	'pt': 'pt',
-	'en': 'en',
-	'en-US': 'en',
-	'es': 'es',
-	'es-ES': 'es',
-	'fr': 'fr',
-	'fr-FR': 'fr',
-	'de': 'de',
-	'de-DE': 'de',
-	'fa': 'fa',
-};
+// ---------------------------------------------------------------------------
+// Utilidades de detecção de formato — exportadas para uso em outros pontos do
+// pacote (ArchbaseImageEdit, etc).
+// ---------------------------------------------------------------------------
 
-/**
- * Verifica se uma string é um data URI válido (com prefixo data:image/...)
- */
 function isDataUri(str: string | null | undefined): boolean {
-	if (!str) return false;
-	return str.startsWith('data:');
+	return !!str && str.startsWith('data:');
 }
-
-/**
- * Verifica se uma string é um blob URL
- */
 function isBlobUrl(str: string | null | undefined): boolean {
-	if (!str) return false;
-	return str.startsWith('blob:');
+	return !!str && str.startsWith('blob:');
 }
-
-/**
- * Verifica se uma string é uma URL externa (http/https)
- */
 function isExternalUrl(str: string | null | undefined): boolean {
-	if (!str) return false;
-	return str.startsWith('http://') || str.startsWith('https://');
+	return !!str && (str.startsWith('http://') || str.startsWith('https://'));
 }
 
 /**
- * Verifica se uma string parece ser base64 puro (sem prefixo data:)
- * Base64 válido contém apenas A-Z, a-z, 0-9, +, /, = e tem comprimento múltiplo de 4
+ * Verifica se uma string parece ser base64 puro (sem prefixo data:).
  */
 function isRawBase64(str: string | null | undefined): boolean {
-	if (!str || str.length < 100) return false; // Imagens base64 são geralmente grandes
-	// Verificar se não começa com prefixos conhecidos
+	if (!str || str.length < 100) return false;
 	if (isDataUri(str) || isBlobUrl(str) || isExternalUrl(str)) return false;
-	// Verificar padrão de base64
-	const base64Regex = /^[A-Za-z0-9+/]+=*$/;
-	// Verificar apenas os primeiros 100 caracteres para performance
-	return base64Regex.test(str.substring(0, 100));
+	const head = str.substring(0, 100);
+	return /^[A-Za-z0-9+/]+=*$/.test(head);
 }
 
 /**
- * Normaliza a imagem de entrada para um formato que o componente pode exibir
- * Converte base64 puro para data URI se necessário
+ * Normaliza a imagem de entrada para um formato que o componente pode exibir:
+ *  - data URIs, blob URLs e URLs externas são retornados como estão;
+ *  - base64 puro é convertido em data URI, com mime inferido pelos primeiros
+ *    bytes do conteúdo (JPEG/PNG/GIF/WebP).
  */
 function normalizeImageSrc(src: string | null | undefined): string | null {
 	if (!src) return null;
-
-	// Se já é um formato válido, retornar como está
-	if (isDataUri(src) || isBlobUrl(src) || isExternalUrl(src)) {
-		return src;
-	}
-
-	// Se parece ser base64 puro, converter para data URI
+	if (isDataUri(src) || isBlobUrl(src) || isExternalUrl(src)) return src;
 	if (isRawBase64(src)) {
-		// Tentar detectar o tipo da imagem pelo header base64
-		// JPEG começa com /9j/
-		// PNG começa com iVBOR
-		// GIF começa com R0lGOD
-		// WebP começa com UklGR
-		let mimeType = 'image/jpeg'; // Padrão
-		if (src.startsWith('/9j/')) {
-			mimeType = 'image/jpeg';
-		} else if (src.startsWith('iVBOR')) {
-			mimeType = 'image/png';
-		} else if (src.startsWith('R0lGOD')) {
-			mimeType = 'image/gif';
-		} else if (src.startsWith('UklGR')) {
-			mimeType = 'image/webp';
-		}
+		let mimeType = 'image/jpeg';
+		if (src.startsWith('/9j/')) mimeType = 'image/jpeg';
+		else if (src.startsWith('iVBOR')) mimeType = 'image/png';
+		else if (src.startsWith('R0lGOD')) mimeType = 'image/gif';
+		else if (src.startsWith('UklGR')) mimeType = 'image/webp';
 		return `data:${mimeType};base64,${src}`;
 	}
-
-	// Se não reconhecemos o formato, retornar como está (pode ser uma URL relativa)
 	return src;
 }
 
-/**
- * Converte a configuração do Archbase para o formato do react-image-picker-editor
- */
-function toImagePickerConf(
-	config: ArchbaseImagePickerConf,
-	colorScheme: 'light' | 'dark',
-	language: string
-): ImagePickerConf {
-	return {
-		width: typeof config.width === 'number' ? `${config.width}px` : (config.width as string),
-		height: typeof config.height === 'number' ? `${config.height}px` : (config.height as string),
-		borderRadius: typeof config.borderRadius === 'number' ? `${config.borderRadius}px` : (config.borderRadius as string),
-		aspectRatio: config.aspectRatio ?? undefined,
-		objectFit: config.objectFit,
-		compressInitial: config.compressInitial ?? undefined,
-		hideDeleteBtn: config.hideDeleteBtn,
-		hideDownloadBtn: config.hideDownloadBtn,
-		hideEditBtn: config.hideEditBtn,
-		hideAddBtn: config.hideAddBtn,
-		darkMode: colorScheme === 'dark',
-		language: LANGUAGE_MAP[language] || 'en',
-	};
-}
-
-/**
- * Calcula o tamanho da imagem em KB a partir de uma string base64
- */
-function calculateImageSize(dataUri: string | null | undefined): number | null {
-	if (!dataUri || !dataUri.length || !isDataUri(dataUri)) return null;
-	// Remove o header do data URI para calcular apenas o conteúdo base64
+function calculateImageSizeKb(dataUri: string | null | undefined): number | null {
+	if (!dataUri || !isDataUri(dataUri)) return null;
 	const base64 = dataUri.split(',')[1];
 	if (!base64) return null;
-	// Fórmula: (3/4) * length / 1024 para obter KB aproximado
 	return Math.ceil(((3 / 4) * base64.length) / 1024);
 }
 
-/**
- * Extrai o formato da imagem do data URI
- */
 function extractFormat(dataUri: string | null | undefined): string {
 	if (!dataUri || !isDataUri(dataUri)) return '';
-	const match = dataUri.match(/data:image\/([a-zA-Z]+);base64,/);
-	if (match && match[1]) {
-		return match[1] === 'jpeg' ? 'jpeg' : match[1];
-	}
-	return 'png';
+	const match = dataUri.match(/data:image\/([a-zA-Z+\-.]+);base64,/);
+	if (match && match[1]) return match[1] === 'jpeg' ? 'jpeg' : match[1];
+	return '';
 }
 
-/**
- * Redimensiona uma imagem se exceder os limites de tamanho
- * @param dataUri Data URI da imagem original
- * @param maxWidth Largura máxima em pixels
- * @param maxHeight Altura máxima em pixels
- * @param maxSizeKb Tamanho máximo em KB
- * @param quality Qualidade inicial da compressão (0-100)
- * @returns Promise com o data URI redimensionado
- */
-async function resizeImageIfNeeded(
-	dataUri: string,
-	maxWidth?: number,
-	maxHeight?: number,
-	maxSizeKb?: number,
-	quality: number = 80
-): Promise<string> {
-	return new Promise((resolve) => {
-		// Se não há limites definidos, retorna como está
-		if (!maxWidth && !maxHeight && !maxSizeKb) {
-			resolve(dataUri);
-			return;
-		}
-
-		const img = new Image();
-		img.onload = () => {
-			let targetWidth = img.width;
-			let targetHeight = img.height;
-
-			// Calcular novo tamanho se exceder limites
-			if (maxWidth && img.width > maxWidth) {
-				const ratio = maxWidth / img.width;
-				targetWidth = maxWidth;
-				targetHeight = Math.round(img.height * ratio);
-			}
-			if (maxHeight && targetHeight > maxHeight) {
-				const ratio = maxHeight / targetHeight;
-				targetHeight = maxHeight;
-				targetWidth = Math.round(targetWidth * ratio);
-			}
-
-			// Se não precisa redimensionar e não há limite de tamanho, retorna original
-			if (targetWidth === img.width && targetHeight === img.height && !maxSizeKb) {
-				resolve(dataUri);
-				return;
-			}
-
-			// Criar canvas para redimensionar
-			const canvas = document.createElement('canvas');
-			canvas.width = targetWidth;
-			canvas.height = targetHeight;
-			const ctx = canvas.getContext('2d');
-			if (!ctx) {
-				resolve(dataUri);
-				return;
-			}
+// ---------------------------------------------------------------------------
+// Componente
+// ---------------------------------------------------------------------------
 
-			ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
-
-			// Determinar formato de saída
-			const format = extractFormat(dataUri);
-			const mimeType = format === 'png' ? 'image/png' : 'image/jpeg';
-
-			// Função para comprimir até atingir o tamanho desejado
-			const compressToSize = (currentQuality: number): string => {
-				const result = canvas.toDataURL(mimeType, currentQuality / 100);
-				if (maxSizeKb) {
-					const sizeKb = Math.ceil(((3 / 4) * result.split(',')[1].length) / 1024);
-					// Se ainda está grande e qualidade pode ser reduzida
-					if (sizeKb > maxSizeKb && currentQuality > 20) {
-						return compressToSize(currentQuality - 10);
-					}
-				}
-				return result;
-			};
-
-			resolve(compressToSize(quality));
-		};
-		img.onerror = () => {
-			resolve(dataUri);
-		};
-		img.src = dataUri;
-	});
-}
-
-/**
- * Props do ArchbaseImagePickerEditor
- * Mantém compatibilidade total com a versão anterior
- */
 export interface ArchbaseImagePickerEditorProps {
 	/** Configuração do editor (interface ArchbaseImagePickerConf) */
 	config?: ArchbaseImagePickerConf;
@@ -262,32 +118,19 @@ export interface ArchbaseImagePickerEditorProps {
 	onProcessingChange?: (isProcessing: boolean) => void;
 }
 
-/**
- * ArchbaseImagePickerEditor - Componente de seleção e edição de imagens
- *
- * Funcionalidades:
- * - Seleção de imagens (upload)
- * - Edição com crop, redimensionamento
- * - Compressão de qualidade (JPEG/WebP)
- * - Conversão de formatos (PNG, JPEG, WebP)
- * - Filtros (contraste, brilho, saturação, sépia, blur)
- * - Suporte a dark mode
- * - Suporte a URL externa, data URI e blob URL
- *
- * @example
- * ```tsx
- * <ArchbaseImagePickerEditor
- *   imageSrcProp={imageValue}
- *   config={{
- *     width: 300,
- *     height: 200,
- *     compressInitial: 80,
- *     objectFit: 'contain',
- *     onChangeImage: (newImage) => setImageValue(newImage),
- *   }}
- * />
- * ```
- */
+const DEFAULT_CONFIG: ArchbaseImagePickerConf = {
+	objectFit: 'cover',
+	hideDeleteBtn: false,
+	hideDownloadBtn: false,
+	hideEditBtn: false,
+	hideAddBtn: false,
+	compressInitial: null,
+	showImageSize: true,
+	width: 330,
+	height: 250,
+	borderRadius: '8px',
+};
+
 export const ArchbaseImagePickerEditor = memo(
 	({
 		config = {},
@@ -299,216 +142,371 @@ export const ArchbaseImagePickerEditor = memo(
 	}: ArchbaseImagePickerEditorProps) => {
 		const theme = useArchbaseTheme();
 		const { colorScheme } = useMantineColorScheme();
-		const { t, i18n } = useArchbaseTranslation();
-
-		// Normalizar a imagem de entrada para formato suportado
-		const normalizedInitialSrc = useMemo(() => normalizeImageSrc(imageSrcProp), [imageSrcProp]);
-
-		const [imageSrc, setImageSrc] = useState<string | null>(normalizedInitialSrc);
-		const [loadImage, setLoadImage] = useState<boolean>(!!normalizedInitialSrc);
-		const imageName = useRef('download');
-
-		// Ref para rastrear a última imagem reportada (evitar callbacks duplicados)
-		const lastReportedImageRef = useRef<string | null | undefined>(undefined);
+		const { t } = useArchbaseTranslation();
+		// Wrapper para silenciar o tipo `string | object` retornado pelo i18next
+		// e prover fallback ao próprio default em pt-BR quando a chave não existir.
+		const tr = useCallback(
+			(key: string, fallback: string): string => {
+				const out = t(key, { defaultValue: fallback }) as unknown;
+				return typeof out === 'string' ? out : fallback;
+			},
+			[t],
+		);
 
-		// Ref para a imagem original (antes de normalização) para comparação
-		const originalImagePropRef = useRef<string | undefined>(imageSrcProp);
+		const mergedConfig = useMemo<ArchbaseImagePickerConf>(
+			() => ({ ...DEFAULT_CONFIG, ...config }),
+			[config],
+		);
 
-		// Ref para onProcessingChange para evitar closure stale no debounce
+		// ---- Estado --------------------------------------------------------
+		const initialSrc = useMemo(() => normalizeImageSrc(imageSrcProp), [imageSrcProp]);
+		const [imageSrc, setImageSrc] = useState<string | null>(initialSrc);
+		const [isProcessing, setIsProcessing] = useState(false);
+
+		// Modal de crop
+		const [cropOpen, { open: openCrop, close: closeCrop }] = useDisclosure(false);
+		const [cropPosition, setCropPosition] = useState({ x: 0, y: 0 });
+		const [cropZoom, setCropZoom] = useState(1);
+		const [cropRotation, setCropRotation] = useState(0);
+		const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
+
+		// Refs auxiliares
+		const fileInputRef = useRef<HTMLInputElement | null>(null);
+		const lastReportedRef = useRef<string | null | undefined>(initialSrc);
 		const onProcessingChangeRef = useRef(onProcessingChange);
 		onProcessingChangeRef.current = onProcessingChange;
 
-		// Ref para saber se é a primeira renderização
-		const isFirstRender = useRef(true);
-
-		// Ref para saber se já recebemos a imagem inicial (evita que o picker zere antes de carregar)
-		const hasReceivedInitialImage = useRef(false);
-
-		// Timestamp de quando o componente foi montado (para ignorar valores vazios só no início)
-		const mountTimeRef = useRef(Date.now());
-
-		// Configuração padrão
-		const defaultConfig: ArchbaseImagePickerConf = {
-			objectFit: 'cover',
-			hideDeleteBtn: false,
-			hideDownloadBtn: false,
-			hideEditBtn: false,
-			hideAddBtn: false,
-			compressInitial: null,
-			showImageSize: true,
-			width: 330,
-			height: 250,
-			borderRadius: '8px',
-		};
-
-		const mergedConfig = useMemo(() => ({ ...defaultConfig, ...config }), [config]);
-
-		// Converter para configuração do react-image-picker-editor
-		const pickerConfig = useMemo(
-			() => toImagePickerConf(mergedConfig, colorScheme as 'light' | 'dark', i18n.language),
-			[mergedConfig, colorScheme, i18n.language]
-		);
-
-		// Callback com debounce para evitar múltiplas chamadas rápidas
-		const debouncedOnChange = useDebouncedCallback((newDataUri: string | undefined) => {
-			// Verificar se a imagem realmente mudou
-			if (lastReportedImageRef.current === newDataUri) {
-				// Notificar que o processamento terminou (usando ref para evitar closure stale)
-				onProcessingChangeRef.current?.(false);
-				return;
-			}
-
-			lastReportedImageRef.current = newDataUri;
-
-			// Chamar callback do config (API principal)
-			if (mergedConfig.onChangeImage) {
-				mergedConfig.onChangeImage(newDataUri);
-			}
-
-			// Chamar callback legado (para compatibilidade)
-			if (imageChanged) {
-				imageChanged(newDataUri);
-			}
-
-			// Notificar que o processamento terminou (usando ref para evitar closure stale)
-			onProcessingChangeRef.current?.(false);
-		}, 300); // 300ms de debounce
-
-		// Sincronizar com prop externa
+		// Sincronizar com prop externa, evitando reentrância do que nós mesmos emitimos.
 		useEffect(() => {
-			// Sempre atualizar quando a prop mudar (mesmo que seja a mesma do ref inicial)
-			const normalizedSrc = normalizeImageSrc(imageSrcProp);
-
-			// Marcar que recebemos a imagem inicial quando receber um valor não vazio
-			if (normalizedSrc && !hasReceivedInitialImage.current) {
-				hasReceivedInitialImage.current = true;
-			}
+			const normalized = normalizeImageSrc(imageSrcProp);
+			if (normalized === lastReportedRef.current) return;
+			lastReportedRef.current = normalized;
+			setImageSrc(normalized);
+		}, [imageSrcProp]);
 
-			// Só atualizar o estado se o valor normalizado for diferente do atual
-			if (normalizedSrc !== imageSrc) {
-				setImageSrc(normalizedSrc);
-				setLoadImage(!!normalizedSrc);
+		// Manter ref de processing sincronizada e refletir externamente
+		useEffect(() => {
+			onProcessingChangeRef.current?.(isProcessing);
+		}, [isProcessing]);
+
+		// Notificação debounceada — evita rajadas de callbacks ao redimensionar.
+		const debouncedNotify = useDebouncedCallback((dataUri: string | undefined) => {
+			if (lastReportedRef.current === dataUri) return;
+			lastReportedRef.current = dataUri ?? null;
+			mergedConfig.onChangeImage?.(dataUri);
+			imageChanged?.(dataUri);
+			if (mergedConfig.debug) {
+				const mime = dataUri?.match(/^data:(image\/[a-zA-Z+\-.]+);/)?.[1] ?? null;
+				// eslint-disable-next-line no-console
+				console.log('[ArchbaseImagePickerEditor] notify', {
+					mime,
+					sizeKb: dataUri ? calculateImageSizeKb(dataUri) : null,
+				});
 			}
+		}, 200);
+
+		// ---- Upload -------------------------------------------------------
+		const ingestFile = useCallback(
+			async (file: File) => {
+				setIsProcessing(true);
+				try {
+					// Ler arquivo como data URI puro — preserva bytes originais
+					// (sem canvas roundtrip), garantindo PNG/WebP com alpha intactos.
+					const dataUri = await new Promise<string>((resolve, reject) => {
+						const reader = new FileReader();
+						reader.onload = () => resolve(reader.result as string);
+						reader.onerror = () => reject(reader.error);
+						reader.readAsDataURL(file);
+					});
+
+					// Aplicar limites de tamanho/peso (opcionais).
+					const processed = await resizeDataUri(
+						dataUri,
+						mergedConfig.maxWidth,
+						mergedConfig.maxHeight,
+						mergedConfig.maxSizeKb,
+						mergedConfig.compressInitial ?? 92,
+						mergedConfig.preserveTransparency ?? false,
+					);
+
+					setImageSrc(processed);
+					debouncedNotify(processed);
+				} catch (e) {
+					// eslint-disable-next-line no-console
+					console.error('[ArchbaseImagePickerEditor] failed to read file', e);
+				} finally {
+					setIsProcessing(false);
+				}
+			},
+			[
+				debouncedNotify,
+				mergedConfig.maxWidth,
+				mergedConfig.maxHeight,
+				mergedConfig.maxSizeKb,
+				mergedConfig.compressInitial,
+				mergedConfig.preserveTransparency,
+			],
+		);
 
-			// Atualizar a referência
-			originalImagePropRef.current = imageSrcProp;
+		const handleDrop = useCallback(
+			(files: File[]) => {
+				const file = files?.[0];
+				if (file) ingestFile(file);
+			},
+			[ingestFile],
+		);
 
-			// Atualizar a referência sem disparar callback na sincronização inicial
-			if (isFirstRender.current) {
-				lastReportedImageRef.current = normalizedSrc;
-				isFirstRender.current = false;
-			}
-		}, [imageSrcProp]);
+		const handleHiddenInputChange = useCallback(
+			(e: React.ChangeEvent<HTMLInputElement>) => {
+				const file = e.target.files?.[0];
+				if (file) ingestFile(file);
+				// Permite re-selecionar o mesmo arquivo
+				e.target.value = '';
+			},
+			[ingestFile],
+		);
 
-		// Handler quando a imagem muda no editor
-		const handleImageChanged = useCallback(async (newDataUri: string) => {
-			const timeSinceMount = Date.now() - mountTimeRef.current;
+		const triggerReupload = useCallback(() => {
+			fileInputRef.current?.click();
+		}, []);
 
-			// Só processa se for diferente do valor atual
-			if (imageSrc === newDataUri) {
-				return;
-			}
+		// ---- Actions ------------------------------------------------------
+		const handleDelete = useCallback(() => {
+			setImageSrc(null);
+			debouncedNotify(undefined);
+		}, [debouncedNotify]);
+
+		const handleDownload = useCallback(() => {
+			if (!imageSrc) return;
+			// Para data URI, fazer download manual para evitar bloqueio em alguns browsers
+			const ext = extractFormat(imageSrc) || 'png';
+			const a = document.createElement('a');
+			a.href = imageSrc;
+			a.download = `image.${ext === 'jpeg' ? 'jpg' : ext}`;
+			document.body.appendChild(a);
+			a.click();
+			document.body.removeChild(a);
+		}, [imageSrc]);
+
+		// ---- Crop ---------------------------------------------------------
+		const onCropComplete = useCallback((_croppedArea: Area, croppedAreaPx: Area) => {
+			setCroppedAreaPixels(croppedAreaPx);
+		}, []);
 
-			// Ignorar valores vazios APENAS nos primeiros 1000ms após montar
-			// Isso evita que o react-image-picker-editor zere a imagem antes de carregar
-			// Mas permite que o usuário remova a imagem depois
-			if (!newDataUri && timeSinceMount < 1000) {
+		const handleOpenCrop = useCallback(() => {
+			setCropPosition({ x: 0, y: 0 });
+			setCropZoom(1);
+			setCropRotation(0);
+			setCroppedAreaPixels(null);
+			openCrop();
+		}, [openCrop]);
+
+		const handleApplyCrop = useCallback(async () => {
+			if (!imageSrc || !croppedAreaPixels) {
+				closeCrop();
 				return;
 			}
-
-			// Notificar que o processamento iniciou
-			onProcessingChange?.(true);
-
-			// Redimensionar se necessário
-			let processedDataUri = newDataUri;
-			if (newDataUri && (mergedConfig.maxWidth || mergedConfig.maxHeight || mergedConfig.maxSizeKb)) {
-				processedDataUri = await resizeImageIfNeeded(
-					newDataUri,
-					mergedConfig.maxWidth,
-					mergedConfig.maxHeight,
-					mergedConfig.maxSizeKb,
-					mergedConfig.compressInitial ?? 80
+			setIsProcessing(true);
+			try {
+				const cropped = await getCroppedImage(
+					imageSrc,
+					croppedAreaPixels,
+					cropRotation,
+					mergedConfig.preserveTransparency ?? false,
+					mergedConfig.compressInitial ?? 92,
 				);
+				setImageSrc(cropped);
+				debouncedNotify(cropped);
+			} catch (e) {
+				// eslint-disable-next-line no-console
+				console.error('[ArchbaseImagePickerEditor] crop failed', e);
+			} finally {
+				setIsProcessing(false);
+				closeCrop();
 			}
-
-			const newValue = processedDataUri || undefined;
-
-			setImageSrc(processedDataUri || null);
-			setLoadImage(!!processedDataUri);
-
-			// Usar callback com debounce
-			debouncedOnChange(newValue);
-		}, [imageSrc, debouncedOnChange, onProcessingChange, mergedConfig.maxWidth, mergedConfig.maxHeight, mergedConfig.maxSizeKb, mergedConfig.compressInitial]);
-
-		// Calcular tamanho e formato da imagem (apenas para data URIs)
-		const sizeImage = useMemo(() => calculateImageSize(imageSrc), [imageSrc]);
+		}, [
+			imageSrc,
+			croppedAreaPixels,
+			cropRotation,
+			mergedConfig.preserveTransparency,
+			mergedConfig.compressInitial,
+			closeCrop,
+			debouncedNotify,
+		]);
+
+		// ---- Render -------------------------------------------------------
+		const sizeKb = useMemo(() => calculateImageSizeKb(imageSrc), [imageSrc]);
 		const format = useMemo(() => extractFormat(imageSrc), [imageSrc]);
+		const showSizeInfo = !!(mergedConfig.showImageSize && sizeKb !== null);
 
-		// Verificar se deve mostrar informações de tamanho
-		const showSizeInfo = loadImage && sizeImage !== null && mergedConfig.showImageSize && isDataUri(imageSrc);
-
-		// Estilo do container
-		const containerStyle = useMemo(() => ({
-			width: typeof mergedConfig.width === 'number' ? `${mergedConfig.width}px` : mergedConfig.width,
-			backgroundColor: mergedConfig.imageBackgroundColor ?? (colorScheme === 'dark' ? theme.colors.dark[7] : theme.white),
-		}), [mergedConfig.width, mergedConfig.imageBackgroundColor, colorScheme, theme]);
-
-		// Handler para prevenir submit de formulário e navegação acidental
-		const handleContainerClick = useCallback((e: React.MouseEvent) => {
-			const target = e.target as HTMLElement;
-
-			// Prevenir submit de formulário quando botões são clicados
-			// Os botões do react-image-picker-editor não têm type="button",
-			// então agem como type="submit" quando dentro de um form
-			const button = target.closest('button');
-			if (button && !button.getAttribute('type')) {
-				e.preventDefault();
-			}
+		const widthStyle = typeof mergedConfig.width === 'number' ? `${mergedConfig.width}px` : mergedConfig.width;
+		const heightStyle = typeof mergedConfig.height === 'number' ? `${mergedConfig.height}px` : mergedConfig.height;
+		const borderRadiusStyle =
+			typeof mergedConfig.borderRadius === 'number'
+				? `${mergedConfig.borderRadius}px`
+				: mergedConfig.borderRadius;
 
-			// Prevenir navegação para data URIs em links
-			const anchor = target.closest('a');
-			if (anchor) {
-				const href = anchor.getAttribute('href');
-				if (href && href.startsWith('data:')) {
-					e.preventDefault();
-					// Se for o botão de download, fazer download manualmente
-					if (anchor.hasAttribute('download')) {
-						const link = document.createElement('a');
-						link.href = href;
-						link.download = anchor.getAttribute('download') || 'image';
-						document.body.appendChild(link);
-						link.click();
-						document.body.removeChild(link);
-					}
-				}
-			}
-		}, []);
+		const containerBg =
+			mergedConfig.imageBackgroundColor ??
+			(colorScheme === 'dark' ? theme.colors.dark[7] : theme.white);
+
+		const showPlaceholder = !imageSrc;
 
 		return (
-			<div className="ArchbaseImagePickerEditor" style={containerStyle} onClick={handleContainerClick}>
-				{/* Componente react-image-picker-editor */}
-				<ReactImagePickerEditor
-					config={pickerConfig}
-					imageSrcProp={imageSrc || ''}
-					imageChanged={handleImageChanged}
-					color={color}
+			<Box style={{ width: widthStyle }}>
+				{/* Input file escondido — reaproveitado para botão "Adicionar" */}
+				<input
+					ref={fileInputRef}
+					type="file"
+					accept={IMAGE_MIME_TYPE.join(',')}
+					style={{ display: 'none' }}
+					onChange={handleHiddenInputChange}
 				/>
 
-				{/* Informação de tamanho (quando habilitado, imagem carregada e é data URI) */}
-				{showSizeInfo && (
-					<div
-						className="caption image-caption"
+				{showPlaceholder ? (
+					<Dropzone
+						onDrop={handleDrop}
+						accept={IMAGE_MIME_TYPE}
+						maxFiles={1}
+						multiple={false}
+						loading={isProcessing}
+						styles={{
+							root: {
+								width: widthStyle,
+								height: heightStyle,
+								borderRadius: borderRadiusStyle,
+								backgroundColor: containerBg,
+								display: 'flex',
+								alignItems: 'center',
+								justifyContent: 'center',
+							},
+						}}
+					>
+						<Stack align="center" gap="xs" justify="center" style={{ pointerEvents: 'none' }}>
+							<Dropzone.Accept>
+								<IconUpload size={32} color={color} />
+							</Dropzone.Accept>
+							<Dropzone.Reject>
+								<IconX size={32} color="var(--mantine-color-red-6)" />
+							</Dropzone.Reject>
+							<Dropzone.Idle>
+								<IconPhotoPlus size={32} color={color} />
+							</Dropzone.Idle>
+							<Text size="sm" c="dimmed" ta="center">
+								{tr('archbase:Arraste uma imagem ou clique para selecionar', 'Arraste uma imagem ou clique para selecionar')}
+							</Text>
+						</Stack>
+					</Dropzone>
+				) : (
+					<Box
 						style={{
-							color: sizeImage! > 120 ? '#f44336' : 'unset',
-							fontWeight: sizeImage! > 120 ? '500' : 'unset',
-							marginTop: '4px',
-							textAlign: 'center',
+							position: 'relative',
+							width: widthStyle,
+							height: heightStyle,
+							borderRadius: borderRadiusStyle,
+							overflow: 'hidden',
+							backgroundColor: containerBg,
 						}}
 					>
-						<Text size="sm">{`${t('archbase:size')}: ${sizeImage}Kb ${format}`}</Text>
-					</div>
+						<img
+							src={imageSrc}
+							alt=""
+							style={{
+								width: '100%',
+								height: '100%',
+								objectFit: mergedConfig.objectFit ?? 'contain',
+								display: 'block',
+							}}
+						/>
+					</Box>
 				)}
-			</div>
+
+				{/* Barra de ações — fora da imagem para não competir por área de clique
+				    em previews pequenos (ex.: favicons 48px). */}
+				{imageSrc && (
+					<Group gap={4} mt={6} justify="flex-start" wrap="nowrap">
+						{!mergedConfig.hideAddBtn && (
+							<ActionIcon variant={variant} color={color} title={tr('archbase:Trocar imagem', 'Trocar imagem')} onClick={triggerReupload}>
+								<IconPhoto size={18} />
+							</ActionIcon>
+						)}
+						{!mergedConfig.hideEditBtn && (
+							<ActionIcon variant={variant} color={color} title={tr('archbase:Editar', 'Editar')} onClick={handleOpenCrop}>
+								<IconCrop size={18} />
+							</ActionIcon>
+						)}
+						{!mergedConfig.hideDownloadBtn && (
+							<ActionIcon variant={variant} color={color} title={tr('archbase:Baixar', 'Baixar')} onClick={handleDownload}>
+								<IconDownload size={18} />
+							</ActionIcon>
+						)}
+						{!mergedConfig.hideDeleteBtn && (
+							<ActionIcon variant={variant} color="red" title={tr('archbase:Remover', 'Remover')} onClick={handleDelete}>
+								<IconTrash size={18} />
+							</ActionIcon>
+						)}
+					</Group>
+				)}
+
+				{showSizeInfo && imageSrc && (
+					<Text size="xs" c="dimmed" mt={4} ta="center">
+						{`${tr('archbase:size', 'tamanho')}: ${sizeKb}Kb ${format}`}
+					</Text>
+				)}
+
+				{/* Modal de crop/rotate */}
+				<Modal
+					opened={cropOpen}
+					onClose={closeCrop}
+					title={tr('archbase:Editar imagem', 'Editar imagem')}
+					size="xl"
+					centered
+				>
+					{imageSrc && (
+						<Stack>
+							<Box style={{ position: 'relative', width: '100%', height: 400, background: '#333' }}>
+								<Cropper
+									image={imageSrc}
+									crop={cropPosition}
+									zoom={cropZoom}
+									rotation={cropRotation}
+									aspect={mergedConfig.aspectRatio ?? undefined}
+									onCropChange={setCropPosition}
+									onZoomChange={setCropZoom}
+									onRotationChange={setCropRotation}
+									onCropComplete={onCropComplete}
+									restrictPosition={false}
+								/>
+							</Box>
+							<Group grow align="flex-end">
+								<Stack gap={2}>
+									<Text size="xs">{tr('archbase:Zoom', 'Zoom')}</Text>
+									<Slider min={1} max={5} step={0.1} value={cropZoom} onChange={setCropZoom} />
+								</Stack>
+								<Stack gap={2}>
+									<Text size="xs">{tr('archbase:Rotação', 'Rotação')}</Text>
+									<Slider
+										min={0}
+										max={360}
+										step={1}
+										value={cropRotation}
+										onChange={setCropRotation}
+										thumbChildren={<IconRotate size={12} />}
+									/>
+								</Stack>
+							</Group>
+							<Group justify="flex-end">
+								<Button variant="default" onClick={closeCrop} disabled={isProcessing}>
+									{tr('archbase:Cancelar', 'Cancelar')}
+								</Button>
+								<Button onClick={handleApplyCrop} loading={isProcessing}>
+									{tr('archbase:Aplicar', 'Aplicar')}
+								</Button>
+							</Group>
+						</Stack>
+					)}
+				</Modal>
+			</Box>
 		);
 	},
 );