|
|
# 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).** El eje está **CERRADO**:
|
|
|
tus cuatro firmas ejecutadas, la verificación en navegador completa (incluida la
|
|
|
rama `@supports not`) y `backdrop/` borrado. Lo único vivo son **dos tareas de
|
|
|
otros ejes** — y son de esos ejes, no de éste.
|
|
|
|
|
|
## ⚠️ 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.terdecies, 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()`.
|
|
|
|
|
|
### 1.ter ✅ D-BG.20 — la tinta del scrim (2026-08-18, §7.duodecies)
|
|
|
|
|
|
Firmada tras leer la doctrina entera, que corrigió mi propia recomendación. El
|
|
|
velo ya no toma prestado `--color-overlay` (= `surface.backdrop`, el dim modal,
|
|
|
afinado por MODO): su tinta es el **SUELO de la tinta que `on` puso en vigor**
|
|
|
(D12) — `#1c1917` bajo `on="dark"`, **blanco** bajo `on="light"`, la superficie de
|
|
|
la página sin `on`. Tres roles existentes, ninguno inventado.
|
|
|
|
|
|
- Arregla un defecto que no había visto: con `on="light"` el velo era OSCURO bajo
|
|
|
tinta oscura — **combatía a su propia tinta**.
|
|
|
- Quita el techo: con tinta opaca el peso ES el alpha, y **`xl` (0,70) promete
|
|
|
legibilidad sobre cualquier foto** contra los cuatro suelos del framework
|
|
|
(APCA ≥ 60 ∧ WCAG ≥ 3 de `on-solid.ts`, y AA 4,5 de §40) en ambos contextos:
|
|
|
6,45:1 / Lc 85 y 8,29:1 / Lc 61. Medido con `$color`, confirmado por píxel.
|
|
|
- Escala: `xs` 0,08 · `sm` 0,13 · **`md` 0,19** · `lg` 0,40 · **`xl` 0,70**.
|
|
|
- **Paridad exacta en el consumidor**: el hero en layout `background` sigue dando
|
|
|
1,48 / 5,17. Los heroes en modo oscuro se aclaran (0,297 → 0,19), que es lo
|
|
|
correcto: el modo no debía tocar la legibilidad.
|
|
|
- ⚠️ El selector de contexto va en `:where()`: a pelo llegaba a (0,4,0) y ganaba a
|
|
|
`[data-color]`, derrotando el sistema de color abierto (§25).
|
|
|
|
|
|
### 2. ✅ Tus cuatro firmas, TODAS ejecutadas
|
|
|
|
|
|
- **La escala del scrim** — ordenada, con tokens propios (§7.decies).
|
|
|
- **El techo de contraste** — resuelto de raíz en D-BG.20 (§7.duodecies):
|
|
|
cambiando la TINTA, no subiendo un número.
|
|
|
- **La banda de `feature-split`** — por sección, enmendada en el plan (×3) y en
|
|
|
`PLAN-blocks-quality` §3 col. B.
|
|
|
- **Borrar `backdrop/`** — hecho el 2026-08-18 con tu orden explícita
|
|
|
(§7.terdecies): cinco ficheros (el componente y su morfo), cero consumidores,
|
|
|
`git rm`. Los gates lo confirman por aritmética: `morfo:check` pasa de 168 a
|
|
|
167 morfos y de 8 a 7 saltados sin demo. Las CITAS se conservan: la §Baseline
|
|
|
del README sigue nombrando a `Backdrop`, ahora fechada, porque explica por qué
|
|
|
el componente se llama `Background`.
|
|
|
|
|
|
### 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` |
|
