Auditoría UI y propuesta de dirección — 20 de octubre de 2026

Alcance y evidencia

Revisión estática de 73 archivos TSX de componentes (20.456 líneas). Los anexos registran hallazgos por archivo, alcance activo o heredado y estados. No equivale a una prueba visual completa ni a una certificación AA. Este informe conserva los hallazgos iniciales. La implementación y evidencia posterior están en verification.md; pagos, DNS y servicios externos reales siguen pendientes.

Los estilos de sitios creados, plantillas y componentes UIverse son contenido del usuario: aplicar tokens al constructor no autoriza reescribirlos.

Hallazgos prioritarios

Restauración de copias: FloatingSettingsDrawer pasa b.pages donde el controlador espera un objeto con document/pages; la acción puede terminar sin restaurar.
Checkout: StoreContext asigna paid por elegir tarjeta/PayPal sin transacción; captura errores de envío y continúa. Mostrar el resultado real y mantener pendiente cualquier pago sin confirmación. No inventar una integración de pagos.
Dominios: AuthContext usa DNS fijo y guarda active sin verificarlo. Distinguir configuración guardada de dominio verificado.
Formularios, diálogos, inserción de elementos y acciones de capas presentan barreras de teclado o etiquetas.
Vista previa: LivePreview sigue dentro del editor; PublicSiteViewer debe ser una entrada pública independiente y leer la publicación existente.

Propuesta de sistema de diseño

Dirección aprobada e implementada en las superficies de aplicación; los estilos de autor quedan preservados.

Token	Valor propuesto	Motivo
Fondo / superficie	#f5f6f8 / #ffffff	Separación sobria por planos y bordes
Texto / secundario	#17202a / #4b5563	Lectura con contraste sobre superficies claras
Acción / foco	#1d4ed8	Identificar acción y navegación sin gradientes
Éxito / error / advertencia	#166534 / #b91c1c / #92400e	Estados semánticos acompañados de texto e iconos SVG
Borde	#cbd5e1	Separación; no sustituye indicador de foco ni contraste de controles
Tipografía	system-ui; 12, 14, 16, 20, 24 px	Escala limitada; 12 sólo metadatos secundarios
Espaciado	4, 8, 12, 16, 24, 32, 48 px	Ritmo consistente y densidad previsible
Radios	4 campos, 6 botones, 8 paneles px	Bordes discretos; círculo sólo avatar o interruptor
Sombras	Ninguna en tarjetas; 0 8px 24px rgba(0,0,0,.12) en diálogos	Elevación únicamente cuando explica una superposición
Foco	Contorno 2 px, separación 2 px	Navegación visible sin depender de hover

Mantener la llama amarilla de marca. Verificar contraste compuesto final de todos los estados; texto normal mínimo 4.5:1, texto grande y límites/indicadores pertinentes 3:1. Objetivos táctiles preferentemente 44 px. Reducir movimiento y eliminar animación decorativa.

Vista pública: decisión del usuario

Abrir la última versión publicada en una nueva pestaña, sin publicar el borrador.
Usar publishedSlug del proyecto y el mecanismo existente ?site=<slug>; no inventar dominio de producción.
Sin publicación: explicar que primero debe publicarse y ofrecer la acción real existente.
Entrada pública antes de cargar editor, autosave, herramientas y recuperación de sesión. Ninguna barra de edición.
Enlace real con target=_blank y rel=noopener noreferrer; URL copiable si abrir pestaña falla.
Diferenciar sitio inexistente, fallo de red y carga. El contrato actual devuelve null tanto ante ausencia como ante error: debe corregirse para distinguirlos.
Navegación y elementos publicados deben respetar el documento guardado, con comprobaciones de paridad frente al editor.
No afirmar pagos, DNS, certificados o envíos exitosos sin evidencia de la integración existente.

Criterios de aceptación

Para cada superficie activa: carga cuando hay operación asíncrona; vacío con siguiente acción; error específico recuperable; éxito sólo confirmado; deshabilitado con motivo; hover, focus y selección distinguibles. Los cambios locales síncronos no requieren un spinner inventado.

Verificar 320, 375, 768 y 1440 px, zoom 200 %, teclado completo, foco al abrir/cerrar, etiquetas, lectores de pantalla, movimiento reducido y contraste. Una acción principal por contexto; acciones destructivas separadas y confirmadas cuando pierden datos.

Casos de publicación: proyecto nuevo, borrador posterior a publicación, publicación automática pendiente/fallida, slug vacío, documento eliminado, desconexión, popup bloqueado, recarga directa del enlace, visitante sin sesión y navegación entre páginas.

Casos de edición: copia corrupta, conflicto local/remoto, subida fallida, URL de vídeo blob no persistente, nombres largos, listas grandes, catálogo vacío, campos inválidos y permisos insuficientes.

Cobertura del núcleo

Archivo	Hallazgo o límite de responsabilidad
`src/components/canvas/CanvasViewport/CanvasElement.tsx`	Selección y redimensionado dependen del ratón; ofrecer acceso por teclado y campos numéricos. Unificar herramientas superpuestas sin modificar estilos guardados del contenido.
`src/components/canvas/CanvasViewport/CanvasSection.tsx`	Controles de sección pequeños y ajuste de altura mediante arrastre; añadir alternativa accesible y mantener estados deshabilitados de ordenación.
`src/components/canvas/CanvasViewport/CanvasViewport.tsx`	Eliminar marco de teléfono ornamental, sombras y muesca simulada. Corregir origen de reglas con márgenes y evitar que atajos del lienzo intercepten flechas en selects.
`src/components/canvas/CanvasViewport/ElementContextMenu.tsx`	Faltan foco inicial, navegación de menú y devolución del foco; limitar posición también en pantallas pequeñas.
`src/components/canvas/CanvasViewport/EmptyCanvasState.tsx`	Conservar una acción principal para añadir sección y una secundaria para plantillas; reducir espacio vertical en móvil.
`src/components/common/DeferredPanel.tsx`	Ya muestra carga y error con reintento. Limitar ancho en móvil y gestionar foco cuando sustituye el panel por error.
`src/components/common/UiverseElement.tsx`	Contenido de autor aislado: conservar su CSS. Verificar que reconstruir Shadow DOM no borre valores de formularios durante actualizaciones.
`src/components/design/AdvancedTab.tsx`	Texto secundario de bajo contraste y controles pequeños; exponer selección y resultados reales de importación.
`src/components/design/BackgroundTab.tsx`	Ampliar objetivos de muestras y eliminar imagen; asociar estado de carga/error a subida y errores de imagen. Traducir etiquetas de interfaz.
`src/components/design/CanvasRulers.tsx`	Conservar gris oscuro; corregir origen y ocultar marcas decorativas a lectores de pantalla.
`src/components/design/CanvasToolsContext.tsx`	Proveedor sin interfaz visible. Verificar contrato de herramientas; no añadir estados visuales artificiales.
`src/components/design/LayersTab.tsx`	Búsqueda sin indicador sustituto de foco; exponer selección y bloqueo, ampliar botones y conservar acciones de ordenación deshabilitadas.
`src/components/design/SiteThemeProvider.tsx`	Tema del sitio creado por el usuario. Mantener aislamiento respecto de tokens del constructor y comprobar que el CSS no invade herramientas.
`src/components/design/TypographyTab.tsx`	Mejorar contraste de ayuda y tamaño de controles; completar relaciones de acordeones y estados de enlaces.
`src/components/layout/StudioHeader/StudioHeader.tsx`	Cabecera heredada sin montaje activo encontrado: dropdown dependiente de hover. Si se conserva, eliminar ruta de previsualización interna y completar teclado.
`src/components/modals/CustomDomainModal/CustomDomainModal.tsx`	No hay gestión completa de diálogo/foco. DNS codificado en AuthContext y estado active sin verificación DNS: no afirmar dominio conectado.
`src/components/modals/ExportCodeModal/ExportCodeModal.tsx`	Completar semántica de diálogo, foco, etiquetas, tabs y errores al copiar; mantener contenido desplazable en móvil.
`src/components/modals/ExportCodeModal/FileTreeItem.tsx`	Árbol heredado: archivos clicables sin teclado y descarga visible sólo en hover. Usar botones reales y expansión accesible.
`src/components/modals/PublishSuccessModal/PublishSuccessModal.tsx`	Copiado anuncia éxito sin esperar resultado. Abrir enlace publicado real en nueva pestaña; completar foco y reducir acciones de igual prioridad.
`src/components/modals/TemplatesModal/TemplatesModal.tsx`	Etiquetar búsqueda y categorías; completar diálogo/foco y estado sin resultados. Diferenciar inspección de plantilla de abrir el sitio publicado.
`src/components/preview/LivePreview/LivePreview.tsx`	Vista previa del proyecto dentro del editor: retirar sus entradas activas. No usarla como sustituto del sitio publicado ni simular envío de formularios.
`src/components/preview/PublicSiteViewer.tsx`	Separar entrada pública antes de montar editor/sesión. Quitar controles y marca flotante añadidos por el visor; comprobar paridad de elementos, navegación y tienda del propietario.
`src/components/project/ProjectSaveStatus.tsx`	Estados de guardado presentes. Mejorar contraste de publicación verde, distribución móvil, errores largos y foco del diálogo de recuperación.

Anexos de cobertura

Los 23 archivos del núcleo más los 50 de los anexos completan el inventario de 73 componentes. Los componentes heredados se documentan, sin reactivarlos.

Opciones y recomendación

Recomendada: corregir funciones engañosas y acceso público, aplicar tokens y controles compartidos y recorrer todas las superficies activas con una matriz de verificación. Reduce duplicación y permite comprobar cada módulo.
Cambiar sólo CSS: menor esfuerzo inicial, pero deja intactos restauración, estados falsos y barreras de teclado. No satisface la petición.
Reescribir toda la interfaz de una vez: aumenta riesgo sobre documentos existentes y diluye evidencia por componente. No recomendado.

Dirección de diseño aprobada por Walter. Especificación redactada en docs/superpowers/specs/2026-10-20-platform-ui-and-public-preview-design.md, pendiente de revisión escrita; después se prepara el plan según Superpowers. Las integraciones sin contrato real no se sustituyen por APIs inventadas.