Command Palettes & Keyboard-first UI

Los resultados de busqueda deben filtrar y renderizar en menos de 100ms por keystroke para sentirse instantaneos. Por encima de 100ms el usuario percibe lag; por encima de 300ms la interfaz parece rota. El filtrado debe correr client-side contra un índice pre-cargado, jamas un request de red por tecla.

El overlay debe aparecer en menos de 150ms del shortcut y animarse con un fade-in de máximo 150-200ms. Animaciones más largas contradicen el contrato de velocidad del patrón. Focus debe moverse al input en el frame 1 de la animación, no al terminar. Respetar prefers-reduced-motion.

La lista por defecto muestra 5 a 8 resultados sin scroll. Más de 10 sin agrupar obliga a escanear visualmente y elimina la ventaja de velocidad. Cuando el total supera 10, agrupar por categoría con headers en all-caps y limitar cada grupo a 3-5 items. Altura máxima recomendada: 480-500px.

El shortcut de cada comando aparece como badge a la derecha en su fila, usando el simbolo del OS (⌘ vs Ctrl, ⌥ vs Alt). Comandos sin shortcut no muestran badge. Usa elementos <kbd> para semejanza semántica con ARIA. Tamaño de glyphs ~11px, en color secundario (60% opacidad o token text-2).

Al abrir la paleta sin query, mostrar 5-7 comandos usados recientemente o defaults curados. Esto hace la paleta inmediatamente útil: la acción más probable es el item #1, alcanzable con un solo Enter. Etiquetar la sección "Recientes" para que el usuario entienda que la lista es personalizada.

La busqueda debe encontrar "New Issue" escribiendo "nwiss" y "Project Settings" con "prj set". El scoring prioriza: (1) match exacto, (2) iniciales ("ni" → "New Issue"), (3) caracteres consecutivos, (4) caracteres dispersos. Resaltar en negrita los caracteres coincidentes para explicar el resultado.

El shortcut de apertura no debe conflictuar con combinaciones reservadas del OS o browser. La opción más segura en web es ⌘K / Ctrl+K (adoptado por Linear, GitHub, Vercel, Notion y no reservado). Dentro de la paleta, letras solas (j/k para navegar) son seguras porque solo activan sin inputs enfocados.

Mientras la paleta esta abierta, Tab y Shift+Tab solo ciclan dentro del overlay. Escape cierra la paleta en un solo press y devuelve el foco al elemento que la abrio. Usar role="combobox" en el input y aria-activedescendant en cada navegación con flecha.

Mostrar un toast no bloqueante con el shortcut equivalente inmediatamente después de que el usuario completa una acción con raton o menú. Mostrar máximo 3 veces por acción. Nunca antes de que el usuario haya demostrado necesidad realizando la acción.

Toda app keyboard-first expone una referencia completa y buscable vía ? (cuando no hay input enfocado) o ⌘/ / Ctrl+/. La referencia se abre dentro de la app, no en una nueva pestana. Incluye busqueda live por nombre de acción e incluye link a "Personalizar".

Una region aria-live="polite" visualmente oculta anuncia el total de resultados tras cada keystroke ("5 resultados") y el item enfocado con flechas ("Rename, 2 de 5"). Sin esto los usuarios de lector de pantalla no saben si la paleta esta respondiendo.

La paleta distingue comandos globales (siempre disponibles) de contextuales (solo en la vista actual). Los contextuales aparecen primero con una etiqueta de contexto en texto secundario. Eliminar comandos irrelevantes en lugar de mostrarlos desactivados; los grayed-out generan desconfianza.