User presence & avatars

Cuando varios usuarios están activos en el mismo documento, muestra sus avatares apilados en una fila compacta con máximo 4-5 visibles y un indicador "+N" para el resto. El orden debe ser estable: no reordenar la fila cuando alguien se conecta o desconecta, porque el reordenamiento continuo destruye la referencia visual de quien estaba antes. El contador de desbordamiento tope en 99+ y, al hover, despliega la lista de nombres ocultos.

El estado de presencia (en línea, ausente, escribiendo) no puede depender unicamente del color: aproximadamente 1 de cada 12 hombres tiene deficiencia de visión del color, y un punto verde sin etiqueta o icono incumple WCAG 1.4.1 (Use of Color, Nivel A). Acompana cada estado con un segundo canal: forma distinta del indicador, icono (luna para ausente), o texto descriptivo. El color refuerza el significado, no lo carga solo.

Cada cursor o selección de otro usuario lleva una etiqueta con su nombre (o iniciales) y un color asignado de forma determinista, estable durante la sesión: si ves el cursor de Carlos en azul, sigue azul aunque se desconecte y reconecte. El patrón de Prosemirror+Yjs deriva el color de la posición del clientId en una lista historica ordenada, sin sincronizar colores entre clientes. Cursores sin nombre o que cambian de color en cada reconexion vuelven imposible identificar a los colaboradores.

Las posiciones de cursor en tiempo real deben enviarse con throttle para no disparar un mensaje por cada píxel movido. Liveblocks documenta un rango de 16-100ms (default 100ms = 10fps; 16ms = 60fps): 100ms es suficiente para conciencia ambiental con bajo trafico, mientras 16ms da máxima suavidad a costa de más mensajes por segundo. Elige según el caso: 100ms para rosters y presencia general, valores menores solo para canvas donde la precisión del cursor importa.

Un avatar sin nombre obliga al usuario a memorizar iniciales o fotos. Al hover o focus sobre cualquier avatar de presencia, muestra el nombre completo (y correo si aplica) en un tooltip. Sin foto, usa las iniciales sobre un fondo de color con contraste suficiente, derivado de forma estable del identificador del usuario. Nunca uses una silueta genérica como único identificador en contextos colaborativos: con 8 personas en el documento, nadie sabra quien es quien.

Con más de ~10 colaboradores simultaneos, renderizar todos los cursores y avatares sin filtro satura la interfaz y degrada el rendimiento. Limita el stack a 5 avatares más un contador, oculta cursores de usuarios inactivos por más de unos segundos, y filtra los cursores fuera de pantalla (presence.cursor !== null). El contador de overflow tope en 99+. El objetivo es conciencia del equipo, no un enjambre de cursores que tira los fps.

Los indicadores de presencia son información ambiental, no notificaciones. Deben ser sutiles: cursores que se vuelven semitransparentes tras unos segundos de inactividad, entradas con transición suave, sin sonidos ni badges parpadeantes. Un banner de "Juan se unio al documento" que bloquea el contenido durante 5 segundos, o cursores con animaciones bounce, sacan al usuario de su flujo. El objetivo es conciencia del equipo, no demandar atención.

Los usuarios de lector de pantalla deben enterarse de quien entra o sale del espacio colaborativo, pero sin ser interrumpidos por cada movimiento de cursor. Envuelve el roster en aria-live="polite" con aria-relevant="additions removals" y aria-atomic="false", para anunciar solo el usuario que cambio. Cada avatar lleva aria-label con el nombre completo y su estado, no solo iniciales; el indicador de estado incluye texto visualmente oculto (.sr-only). Usar assertive o avatares con alt="" es el antipatron.