svelte-kit-vice/docs/process/CONTINUE-background.md

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. 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