|
|
# CONTINUE — eje `Background` (handoff, act. 2026-08-18)
|
|
|
|
|
|
**Estado: F0 → F5 CERRADAS Y COMMITEADAS.** El componente existe, tiene demo,
|
|
|
está documentado y el tier lo usa. Cuatro commits en `alpha-0.1-background`:
|
|
|
|
|
|
| Commit | Qué cerró |
|
|
|
| ----------- | --------------------------------------------------------------------------------- |
|
|
|
| `70f45033f` | F1 — la pila y la adopción del anfitrión (+ F1.5, con el bug de `Box flex`) |
|
|
|
| `33031c2ad` | F2 — `Image` · `Video` · `Pause`, y el hero se queda sin CSS |
|
|
|
| `740274a84` | F3 + F3.5 + F4 — parallax, puntero, `attach`, la demo v2 y el registro documental |
|
|
|
| `331912cf2` | F5 — rollout a los seis blocks |
|
|
|
|
|
|
**La verificación con Chrome visible está HECHA** (2026-08-18, §1 abajo): travel
|
|
|
real, 60 fps y 0 reflows, con dos defectos encontrados y arreglados — el
|
|
|
`overflow: hidden` del stage que congelaba la timeline, y el rect cacheado del
|
|
|
puntero que se desviaba con el scroll. Sin commitear todavía.
|
|
|
|
|
|
**Por dónde entrar mañana: [§Qué queda](#qué-queda).** Nada bloquea el uso del
|
|
|
componente. Lo que queda son **DOS firmas tuyas** (borrar `backdrop/` · qué hacer
|
|
|
con el techo de contraste del scrim) y **dos tareas de otros ejes**. La
|
|
|
verificación en navegador está cerrada, incluida la rama `@supports not`.
|
|
|
|
|
|
## ⚠️ LO PRIMERO: la fuente viva es el PLAN, no este fichero
|
|
|
|
|
|
**`docs/process/PLAN-background.md`** — decisiones firmadas `D-BG.1…D-BG.18` en
|
|
|
§6, y el registro de ejecución fase por fase en §7.bis…§7.decies, cada uno con
|
|
|
sus mediciones. Este handoff indexa; el plan manda.
|
|
|
|
|
|
## Qué queda
|
|
|
|
|
|
### 1. ✅ HECHA con Chrome visible (2026-08-18) — y destapó dos defectos, ya arreglados
|
|
|
|
|
|
Registro completo en `PLAN-background.md` §7.nonies. Resumen:
|
|
|
|
|
|
- **travel real** ✓ progreso 43,5%→95,5%, `translate` −8,34px→+58,19px, hasta
|
|
|
`0px 64px` = `4rem` en el extremo (los keyframes van −travel→+travel, así que
|
|
|
la amplitud pico a pico es el doble del token);
|
|
|
- **60 fps** ✓ mediana 16,7ms · p95 17,0 · max 17,1 · **0 de 200** frames >20ms;
|
|
|
- **detector de reflow** ✓ 0ms forzados en 200 frames moviendo LOS DOS ejes, con
|
|
|
el instrumento validado por mutación (un thrash de 65ms sí se reporta);
|
|
|
- **`@supports not`** ✅ ejercitada (§7.decies) en el Firefox de Playwright, que
|
|
|
NO soporta `view()` — la rama está viva ahí sin emulación: progress 0→−64px,
|
|
|
0,5→0, 1→+64px, los mismos extremos que el camino CSS, y en Chromium la rama no
|
|
|
aplica ni la var mueve nada (exclusión mutua, medida). Queda sin ejercitar UN
|
|
|
eslabón: que `ScrollProgress` escriba la var extremo a extremo, porque desde
|
|
|
este entorno Firefox no alcanza el dev server.
|
|
|
|
|
|
**Los dos defectos que salieron, ambos arreglados y verificados:**
|
|
|
|
|
|
1. **Un ancestro `overflow: hidden` mata el travel en silencio** — `view()` se
|
|
|
ancla al scroll container más cercano y `hidden` lo es aunque no scrollee.
|
|
|
La demo lo sufría (`[data-uix-stage]`), progreso clavado en 52,63%. Arreglado
|
|
|
con `overflow: clip` en el stage + **quinto límite** en el README del
|
|
|
componente, porque el caso real es el `overflow-x: hidden` de cualquier
|
|
|
landing. Las 174 demos que comparten el stage: `affix` y `sticky` idénticos,
|
|
|
`anchor-nav` cambia a mejor (su rail sticky ya no se escapa por arriba).
|
|
|
2. **El eje del puntero se desviaba exactamente lo scrolleado** — rect cacheado
|
|
|
en coordenadas de viewport, invalidado sólo por `pointerenter`/resize.
|
|
|
Arreglado cacheando en coordenadas de DOCUMENTO contra `pageX`/`pageY`; error
|
|
|
0 con ratón real, halo del spotlight a 1px del cursor. ⚠️ Un `PointerEvent`
|
|
|
sintético NO puede verificarlo (`pageY === clientY` en eventos construidos).
|
|
|
|
|
|
Lo que ya estaba medido antes: la composición de los dos ejes en un `translate`
|
|
|
(parallax solo `0px 30px`; con puntero y `depth: 20px` → `20px 10px` — ratificado
|
|
|
por la aritmética de ahora), el puntero entero, `attach='fixed'`, y RTL.
|
|
|
|
|
|
### 1.bis ✅ Cierre ejecutado (2026-08-18) — §7.decies
|
|
|
|
|
|
- **Escala del scrim ORDENADA**: `strength` pasa de `scrim|overlay|muted|subtle|ghost`
|
|
|
a **`xs|sm|md|lg|xl`** con tokens propios; α 0,084…0,420 estrictamente creciente,
|
|
|
`md` conserva el 0,45 del hero. Cambio de API hecho con la demo como único
|
|
|
consumidor.
|
|
|
- **La tabla de contraste del README estaba MAL** (asumía tinta α 0,66; es 0,42):
|
|
|
el default da 1,48:1 sobre foto blanca, no 2,10, y el techo es 2,66:1. Re-medida
|
|
|
por píxel.
|
|
|
- **`feature-split`: banda por SECCIÓN**, enmendado en el plan (×3) y en
|
|
|
`PLAN-blocks-quality` §3 col. B.
|
|
|
- **Paseo A–H registrado**: añadidas al README la excepción `A2.3` y la sección
|
|
|
`## Subset`; corregida una deriva de TRES sitios que llamaba `Toggle` al control
|
|
|
de pausa (compone `IconButton`, evento `contact-activate`).
|
|
|
- **D-BG.19 · un fondo NUNCA suena** (§7.undecies, firmada por el autor): `muted`
|
|
|
deja de ser prop y se escribe `true` siempre, así que la API no puede expresar un
|
|
|
fondo audible. No estaba resuelto, estaba evitado: con `muted={false}` el clip
|
|
|
sonaba FUERA de `arts/sound` — ni bus `content`, ni audio focus, ni duck del bus
|
|
|
`ui`, ni MediaSession, ni el slot `sound` de `$prefs`. Un clip que debe oírse es
|
|
|
contenido: `MediaPlayer`, que ya es ciudadano de `sound.media()`.
|
|
|
|
|
|
### 2. Lo que queda de tus firmas: DOS
|
|
|
|
|
|
De las cuatro, dos quedaron ejecutadas en §7.decies (la escala del scrim, ordenada
|
|
|
con tokens propios; la banda de `feature-split`, por sección y enmendada en los
|
|
|
tres sitios del plan más el de calidad). Quedan:
|
|
|
|
|
|
- ⛔ **Borrar `src/uix/eidos/components/backdrop/`** — D-BG.1 lo firmó y no lo usa
|
|
|
nadie (sólo se cita como baseline en el README de `Background` y en tres docs de
|
|
|
proceso, citas históricas que se conservan). **No lo he tocado**: la regla del
|
|
|
repo exige orden de borrado explícita, y «ejecuta el plan» no la sustituye. Una
|
|
|
palabra tuya y va.
|
|
|
- ⛔ **El techo de contraste del scrim, con las cifras corregidas.** Lo que había
|
|
|
escrito era falso por la mitad: el README asumía una tinta de α 0,66 y
|
|
|
`--color-overlay` trae **0,42**, así que el default no da 2,10:1 sobre foto
|
|
|
blanca sino **1,48:1**, y el paso más fuerte no da 4,42 sino **2,14**. Peor aún,
|
|
|
hay un **techo**: `xl` gasta la tinta entera y llega a **2,66:1**, de modo que
|
|
|
**ningún paso nuevo puede alcanzar AA** — el límite es el alpha del token, no la
|
|
|
escala. Las tres salidas, medidas por píxel:
|
|
|
1. **que el velo deje de heredar ese alpha** (con tinta opaca los mismos pesos
|
|
|
dan 5,45:1 a 0,65 y 9,22:1 a 0,80) — cambia qué ES un scrim y su relación con
|
|
|
el velo del modal;
|
|
|
2. **doctrinar que la respuesta es el scrim graduado**, y que sobre foto clara la
|
|
|
copia se pone en el extremo calmado;
|
|
|
3. dejarlo dicho y que cada consumidor oscurezca su propia foto.
|
|
|
Es decisión sobre la naturaleza del componente, no sobre un número.
|
|
|
|
|
|
### 3. Tareas de otros ejes que este abrió
|
|
|
|
|
|
- **`Ambient` honrando la pausa** (D-BG.8): el canon publica el contexto
|
|
|
(`paused`, `reduced`, `seen`); el pack lo lee y llama `handle.pause()`.
|
|
|
**Es tarea DEL PACK** — la dependencia corre pack → framework y nunca al revés.
|
|
|
- **Un puerto de estado para `<video>`** compartido: el framework tiene contrato
|
|
|
de carga para `<img>` (`ImageProvider` en `soma/layers`) y ninguno para vídeo.
|
|
|
Hoy `ScrollFrames` escucha a mano y `Background.Video` también. Dos consumidores
|
|
|
es el umbral que este repo usa para extraer una capa. (Anotado en
|
|
|
`next-features.md` §11.)
|
|
|
- Los huecos `Display` / `Link` bajo `data-on` siguen siendo candidatos de canon
|
|
|
aparte, como los dejó el hero.
|
|
|
|
|
|
## Lo que este eje enseñó, y conviene no volver a aprender
|
|
|
|
|
|
1. **A30 no es estilo, es supervivencia.** Registrarse con el padre desde un
|
|
|
`$effect` escribe su estado en fase de efectos, el hermano que lo lee re-entra
|
|
|
y el flush no cierra: `effect_update_depth_exceeded`. No hace ruido — **mata el
|
|
|
efecto raíz**, así que la superficie se pinta una vez y luego ignora todos los
|
|
|
clics en silencio. La ley vive en `declare.svelte.ts` con sus dos mitades
|
|
|
(registrar desde el init, y seguir el prop sin escribir en la primera pasada).
|
|
|
2. **`revert-layer` sin `@layer` es `revert`.** Costó dos defectos distintos: la
|
|
|
regla de anfitrión que no posicionaba (D-BG.16) y el `flex` de `Box` que no
|
|
|
crecía. Cuando una declaración «no hace nada», mira si un shorthand vecino la
|
|
|
borró.
|
|
|
3. **La demo destapa lo que una sonda no.** El registro de «esta capa se mueve»
|
|
|
era un hecho de montaje: encender `animate` en caliente no hacía aparecer el
|
|
|
control de pausa. Invisible en una sonda, obvio con un interruptor.
|
|
|
4. **Mide antes de afirmar rendimiento.** Escribí tres veces que el travel «va en
|
|
|
el compositor»; animar una custom property registrada no se puede compositar.
|
|
|
Lo cierto era «sin listener ni rAF», que es otra cosa.
|
|
|
5. **La decoración que parece mejor puede ser la ilegible.** Dentro del panel
|
|
|
sólido del `cta`, el `glow` hunde el titular blanco de 5,18:1 a 3,06:1.
|
|
|
|
|
|
## Mapa de ficheros
|
|
|
|
|
|
| Qué | Dónde |
|
|
|
| -------------------------- | ------------------------------------------------------------------------ |
|
|
|
| Plan + decisiones firmadas | `docs/process/PLAN-background.md` |
|
|
|
| El componente | `src/uix/eidos/components/background/` (README con todas las mediciones) |
|
|
|
| El morfo | `src/uix/morfo/components/background.ts` |
|
|
|
| Los dos puertos que abrió | `src/arts/adom/scroll-progress.svelte.ts` · `reduced-data.svelte.ts` |
|
|
|
| La regla de anfitrión | `src/uix/eidos/lib/render-css.ts` → `renderBackgroundHostBlock` |
|
|
|
| La demo | `web/routes/uix/components/background/+page.svelte` |
|
|
|
| Ledger del tier | `docs/process/AUDIT-blocks-ledger.md` — filas `A-100`…`A-105` |
|
