Avatar Upload & Crop

Si el avatar se renderiza como circulo en el producto, el recortador debe mostrar un preview circular en vivo, nunca solo cuadrado. El usuario necesita ver exactamente que área quedara visible antes de confirmar: un marco cuadrado que luego produce un circulo recorta las orejas o la barbilla y obliga a iterar. El preview no reemplaza el marco de selección, convive con el: la selección mantiene aspecto 1:1 mientras el panel lateral muestra el circulo final a los tamaños reales de la UI.

El flujo de recorte debe permitir hacer zoom de la imagen dentro del marco, arrastrar (pan) para reposicionar al sujeto y, opcionalmente, rotar. Un recorte estático donde solo se mueve el borde de la selección obliga a recargar la foto si quedo mal encuadrada. La interacción canonica fija la selección (aspecto bloqueado 1:1) y mueve o escala la imagen dentro de ella, con un slider de zoom claro y un doble clic que resetea al encuadre original.

El recortador de avatar debe forzar aspect ratio 1:1 (cuadrado, luego renderizado como circulo o cuadrado redondeado por CSS). Dar libertad de aspecto produce avatares rectangulares que rompen la cuadricula de listas, notificaciones y mensajes, y aparecen aplastados o estirados. La decisión de mostrar circular o cuadrado pertenece al sistema de diseño, no al usuario: la selección solo se mueve y escala, jamas se estira a un rectangulo.

Antes de lanzar el recorte, valida en el cliente que el archivo sea una imagen aceptada (JPG, PNG, WebP) y que no supere el límite de peso. Si no pasa, muestra un mensaje concreto y no abras el cropper: abrirlo con un PDF o un archivo de 40 MB desperdicia el tiempo del usuario y puede congelar el navegador. El error debe nombrar el problema real, "El archivo pesa 8 MB, el máximo es 5 MB", nunca un genérico "Error al subir" que aparece recien al guardar.

Cuando el usuario no tiene foto o la URL falla, muestra iniciales sobre un fondo de color derivado deterministicamente del identificador (nombre o ID), no aleatorio en cada render: el mismo usuario siempre con el mismo color para que sea reconocible. Nunca muestres el icono de imagen rota del navegador: intercepta el error con onerror y sustituye el <img> por el componente de iniciales. Avatares pequeños muestran 1 inicial; los de 48px o más, hasta 2 o 3.

Las fotos tomadas en vertical con el telefono se almacenan en landscape con un tag EXIF de orientación. Los navegadores aplican image-orientation: from-image por CSS, pero el canvas de los croppers ignora ese dato y renderiza la imagen rotada -90 grados. Hay que leer el valor EXIF (1-8) al cargar, rotar el canvas en consecuencia antes de mostrar el cropper y asegurar que el servidor recibe la imagen ya corregida: una solución solo visual deja la foto de lado en la base de datos.

El recortador debe funcionar sin mouse: flechas para mover la imagen, + y - para zoom, Tab para recorrer los controles (slider de zoom, rotar, confirmar, cancelar) y Enter/Escape para confirmar o cancelar. Cada control custom necesita nombre accesible (aria-label) y estado expuesto (aria-valuenow en el slider). WCAG 2.1.1 exige que toda funcionalidad sea operable por teclado; los croppers móviles típicos no lo cumplen.

Una vez subido, el usuario debe poder reemplazar o eliminar el avatar sin fricción. El disparador de edición va visible sobre el avatar (icono de camara o lapiz con hover/focus), no enterrado en un menú de Configuración. Al eliminar, el sistema regresa al fallback de iniciales, no a una imagen rota ni a un hueco sin estructura. El flujo de cambio reutiliza exactamente el mismo cropper de la carga inicial: no implementes dos flujos separados.