# La entrega de UI

Esto es lo que UI entrega a dev. **Todo lo que hay aquí está revisado** por Guille: si lo
encuentras en esta carpeta, se puede coger. Lo que aún se está haciendo vive en
[`../guille/`](../guille/) y no llega hasta que se da por cerrado.

Empieza por **[`index.html`](index.html)**, que es el índice navegable.

## Qué es cada cosa

| | |
|---|---|
| **`pages/`** | Las maquetas. **Es la especificación visual, no código a copiar** — ver abajo. |
| **`new/`** | Peticiones de componente, una por fichero, con su contrato y sus criterios de aceptación. |
| **`registro-dev.md`** | **Lo primero que hay que leer.** El parte de todo lo que la maqueta hace por encima de lo publicado en staging: bugs que hemos encontrado, desviaciones conscientes y criterios nuevos. Con fecha y con el porqué. |
| **`handoff.md`** | El mapeo UI → bloques `sek_c_*` del theme. Qué nombre nuestro corresponde a qué bloque vuestro. |
| **`tokens.css`** | Los tokens del sistema, con la nomenclatura de dev. |
| **`motion-guide.html`** y **`sek-motion.js`** | La guía de movimiento y el script que la implementa. |
| **`assets/`** | Imágenes, logos, fuentes e iconos que las maquetas necesitan para verse. |

## Cómo leer una maqueta

El HTML es una **especificación visual**: dice cómo tiene que verse, no cómo hay que
construirlo. Se reproducen los estilos 1:1 y por debajo se reescribe el HTML, la accesibilidad y
el SEO con los bloques del theme.

Dos cosas que ayudan a leerlas:

- Cada página lleva en la cabecera un comentario `<!-- sek-ui: sprint=… page=… -->`. **Es
  metadato nuestro y no debe migrar al theme.**
- Cuando algo se desvía de lo publicado en staging, **está anotado en `registro-dev.md`** con el
  motivo. Si algo os chirría, mirad ahí antes de darlo por error: es probable que sea deliberado.

## Por qué las maquetas son consistentes entre sí

Esto explica algo que se nota al abrir varias: **once páginas y los mismos criterios en todas**.
No es disciplina, es un chequeo automático, y conviene que lo sepáis porque cambia cómo
interpretar lo que veis.

Teníamos un problema de fondo. Cada criterio de diseño se arreglaba **en la página que estábamos
mirando**, no en el sistema, así que la siguiente nacía con el mismo fallo y la revisión repetía
el mismo comentario una y otra vez.

Ahora **cada acuerdo es una regla**. Hay **27 reglas** en `../guille/_staging/lint-sistema.mjs`
que se pasan a las once páginas en cada compilación, y **la maqueta no se publica si alguna
falla**. Vigilan cosas como:

- los enlaces van en negro, no en azul de marca;
- la tinta se lee sobre su fondo, en los dos sentidos (blanco sobre claro y oscuro sobre marca);
- un solo grosor de trazo en todos los iconos, también los que trae el theme;
- las migas dicen dónde estás;
- el espaciado sale de un token cuando el valor existe en la escala;
- ninguna ancla apunta a una sección que no está.

Cada regla lleva escrito **su motivo y su fecha**. Si veis algo raro en una maqueta, lo más
probable es que no sea un descuido sino un criterio, y podéis consultar cuál.

> Dos ejemplos de lo que ha destapado, para que se entienda el valor: una regla nueva encontró
> que **cinco de las siete páginas de entonces decían «Inicio»** en el último nivel de las migas,
> y otra que **dos tercios de lo que contábamos como deuda de espaciado era trabajo del propio
> sistema**, no píxeles a mano. Sin el chequeo, ninguna de las dos se habría visto.

Hay un mecanismo más, el **trinquete**: una regla nueva sobre once páginas ya hechas nacería en
rojo, y un linter que nace en rojo se acaba desactivando. El trinquete congela los casos que ya
había y solo salta si aparece deuda nueva, así que la deuda solo puede bajar.

## Lo que os toca a vosotros ahora mismo

Está todo en `registro-dev.md`, pero lo urgente es un bug del theme:

**El anchor bar no lleva a la sección.** Lenis aborta su propio `scrollTo` ante cualquier evento
de rueda, y en un trackpad la inercia sigue emitiendo `wheel` segundos después de soltar: se
pulsa un ancla justo después de hacer scroll y el salto muere a los ~100 px. Medido: **un solo
`wheel` de 1 píxel lo cancela**, por eso no se reproduce con un clic programático.

Arreglo probado: `lock: true, force: true` en las dos llamadas a `window.lenis.scrollTo()` de
`sek-ui.js`. Está aplicado en nuestra copia para poder revisar las maquetas, pero **en staging
sigue fallando** hasta que lo llevéis al theme.