|
|
# CONTINUE — visibilidad por breakpoint (`visibleFrom` / `hiddenFrom`) (handoff, act. 2026-08-19)
|
|
|
|
|
|
**Estado: F1–F3 HECHAS, AUDITADAS, VERIFICADAS en Chrome real y COMMITEADAS**
|
|
|
(2026-08-19, `uix(box): ocultar por CSS descarga el vídeo igual…`). La auditoría
|
|
|
de cierre encontró tres desviaciones menores, las tres corregidas antes del
|
|
|
commit (ver §Auditoría). Nada bloquea el uso.
|
|
|
|
|
|
**Por dónde entrar: [§Qué queda, por orden](#qué-queda-por-orden).** Lo único
|
|
|
pendiente es F4 (rollout al hero), y sólo si el autor lo pide.
|
|
|
|
|
|
## Qué es
|
|
|
|
|
|
Dos props en `Box` que **NO RENDERIZAN** el elemento fuera de su rango de
|
|
|
breakpoints — el subárbol no está en el DOM, sus efectos no corren y su media
|
|
|
no se pide. Es la mitad que `display={{ base: 'none' }}` no puede dar (oculta,
|
|
|
pero monta). Por herencia la ganan los once contenedores que componen `Box`
|
|
|
(Section, Container, Flex, Grid, Stack, Group, Wrap, AutoGrid, Surface,
|
|
|
AspectRatio, Float) sin tocar sus ficheros.
|
|
|
|
|
|
- `visibleFrom="md"` → no existe por debajo de `md` (desktop-only).
|
|
|
- `hiddenFrom="md"` → no existe desde `md` (mobile-only).
|
|
|
- Ambos → rango contiguo. `base` excluido del tipo a propósito.
|
|
|
|
|
|
La puerta es `eidos.dom.isAtLeast(bp)` —el predicado que `ActiveDom` ya tenía,
|
|
|
sobre los breakpoints que configura el app— en un `$derived` y un `{#if}`
|
|
|
alrededor de la raíz de `box.svelte`. Sin atributos nuevos, sin generador.
|
|
|
|
|
|
**Fuente viva de las decisiones**: `C:\Users\dev\.claude\plans\elegant-weaving-lark.md`
|
|
|
(D-V.1…4 firmadas 2026-08-18, con el estudio de cómo lo hacen Mantine, Chakra,
|
|
|
MUI, Vuetify, Framer y Webflow — todos por CSS o pagando flash/adivinando el
|
|
|
ancho). Su contenido de decisiones debería moverse a un lugar del repo si el eje
|
|
|
sigue creciendo (hoy vive en el README de Box y en `docs/architecture/eidos.md`).
|
|
|
|
|
|
## Auditoría de cierre (2026-08-19) — hallazgos y correcciones
|
|
|
|
|
|
| # | Hallazgo | Corrección |
|
|
|
| --- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
|
| 1 | El tipo aceptaba `base`: `visibleFrom="base"` = «siempre», `hiddenFrom="base"` = «nunca renderiza» — y la demo (correctamente) no lo ofrecía en los chips: paridad rota entre tipo y demo | `Exclude<Breakpoint, 'base'>` en ambas props, con el porqué en el JSDoc. El mismo `Exclude` bajó a la demo (`$state` + chips) el 2026-08-19: sin él `npm run check` daba 2 errores en `box/`. **HECHO** |
|
|
|
| 2 | README decía «los doce contenedores que componen Box» y listaba once (el doceavo es Box) | «once… — doce con Box». **HECHO** |
|
|
|
| 3 | El plan pedía en Gaps la exclusión de Card / Banner / ScrollArea / Sticky (raíz propia, no heredan) y faltaba | Fila añadida con la regla del `as` (≥2 casos reales). **HECHO** |
|
|
|
| 4 | Dos afirmaciones del informe no se habían LEÍDO en consola: «Svelte repara el `{#if}` sin aviso» y «sin `effect_update_depth_exceeded` al cruzar con capas que se registran» | Medido en Chrome con consola capturada desde la carga: **cero** avisos de hidratación, **cero** bucles en 3 ciclos con un `Background.Gradient animate` dentro; `Stack → Flex → Box` hereda. **CONFIRMADO** |
|
|
|
| 5 | La nota documental fue a `docs/architecture/eidos.md` y no a `theming/reference.md` como decía el plan | `theming/reference.md` no tiene sección responsive; el párrafo del «puente responsive» vive en `eidos.md` §tokens. Desvío justificado, no error |
|
|
|
|
|
|
Verificado (Chrome real, 2026-08-18/19): a 2133px conviven `visibleFrom="md"`
|
|
|
presente, `hiddenFrom="md"` ausente y rango `sm–lg` ausente · al cerrar la puerta
|
|
|
en vivo desaparecen sección, `<video>` e `<input>` del DOM; al reabrir el input
|
|
|
vuelve **vacío** (la renuncia D-V.4, medida) · el par cambia con un `resize` ·
|
|
|
`npm run build` → `200.html` de 1.815 bytes, shell puro: **en producción no hay
|
|
|
SSR** que pueda pintar mal · en DEV sí: el dev server sirve la variante `base` y
|
|
|
pide su media antes de que la hidratación la pode (documentado en el README de
|
|
|
Box como caveat de desarrollo).
|
|
|
|
|
|
## Qué queda, por orden
|
|
|
|
|
|
> **Commit hecho el 2026-08-19** con las seis rutas del eje
|
|
|
> (`box/{box.svelte,types.ts,README.md}`, la demo, `eidos.md`, este handoff) y
|
|
|
> `git add` por ruta, nunca `-A`: otra sesión editaba `app-shell` en paralelo.
|
|
|
> Gates en verde ese día: `check` sin nada en `box/`, `blocks:check` 0,
|
|
|
> `morfo:check` PASS box, `docs:check` 0, `npx vitest run src/uix/eidos` 434/435
|
|
|
> (el fallo es `skin-media-player`, ajeno), prettier OK — salvo `eidos.md`, que
|
|
|
> **ya fallaba en HEAD** en tablas ajenas al eje y por eso no se reformatea.
|
|
|
|
|
|
> **F4 HECHA el 2026-08-19.** La receta vive donde se usa — `hero/README.md`
|
|
|
> §«The responsive backdrop» — y el vehículo es el backdrop de `HeroSite`. La
|
|
|
> puerta va DENTRO del snippet, nunca alrededor del `<Hero>`: envolver el block
|
|
|
> duplicaría título, copy, formulario y acciones por breakpoint (lo que hace
|
|
|
> Framer). `display="contents"` en las dos Box: una puerta decide presencia, no
|
|
|
> añade geometría. **Medido sobre build de PRODUCCIón** (`npm run build` +
|
|
|
> `vite preview`, Chrome): a **375** → 0 `<video>` en el DOM y **ninguna**
|
|
|
> petición de `video.mp4`; a **1280** → 1 `<video>` y **una** peticion
|
|
|
> (`206 Partial Content`). La afirmación central del eje deja de estar medida
|
|
|
> sólo en dev, donde es falsa.
|
|
|
>
|
|
|
> ⚠️ **Hallazgo ajeno, medido de paso**: la media dentro de un
|
|
|
> `Background.Layer` DESBORDA la capa — el mínimo automático del ítem de rejilla
|
|
|
> gana a `block-size: 100%`. Hero a 1280: capa 567px, `<video>` **714px**; y en
|
|
|
> la demo del propio canon con `<Background.Video>`: capa 288px, vídeo **435px**.
|
|
|
> `min-block-size: 0` lo colapsa exacto en ambos. `overflow: clip` lo esconde, y
|
|
|
> por eso nunca se vio. Es del eje `background` (cerrado el 2026-08-18), escrito
|
|
|
> en `hero/README.md` §Found while composing — marcado, no arreglado.
|
|
|
|
|
|
1. **Si algún día hay SSR/prerender** — el puente C está escrito en el README de
|
|
|
Box §Gaps con su disparador: `data-visible-from`/`data-hidden-from`, dos
|
|
|
reglas `@media` por breakpoint en `render-css.ts` (junto a las de
|
|
|
tipografía), y la puerta `hidratado ? resuelto : true`. Hoy sería un atributo
|
|
|
que nadie lee — no construir sin el disparador.
|
|
|
2. **Card, Banner, ScrollArea, Sticky** — no heredan (raíz propia). Regla del
|
|
|
`as`: a mano cuando aparezcan ≥2 casos reales; mientras, envolver en `<Box>`.
|
|
|
|
|
|
## Lo que este eje enseñó
|
|
|
|
|
|
- **Pregunta «¿y si no tenemos SSR?» antes de diseñar el puente.** Iba a
|
|
|
construir la híbrida (CSS hasta hidratar + desmontar después) por «framework de
|
|
|
referencia»; el repo respondió: `adapter-static` + `fallback` sin ninguna ruta
|
|
|
`prerender = true` = SPA puro. La mitad cara del diseño era para un despliegue
|
|
|
que no existe.
|
|
|
- **El panel oculto miente para esto también**: `innerWidth` 0 ⇒ todo resuelve a
|
|
|
`base`. La verificación exige Chrome visible (`claude-in-chrome`), y aun ahí
|
|
|
una ventana maximizada no admite `resize` — cruza el umbral por el breakpoint
|
|
|
(`hiddenFrom` con un botón), que recorre el mismo `$derived`.
|
|
|
- **Una sonda que no puede cerrar la puerta no prueba nada**: a 2133px
|
|
|
`visibleFrom="xxl"` sigue abierta (1536 < 2133). Elegir el eje que sí cruza.
|
|
|
|
|
|
## Mapa de ficheros
|
|
|
|
|
|
| Qué | Dónde |
|
|
|
| ---------------------------------------- | --------------------------------------------------------------- |
|
|
|
| La puerta | `src/uix/eidos/components/box/box.svelte` (`visible` + `{#if}`) |
|
|
|
| El tipo y su JSDoc | `src/uix/eidos/components/box/types.ts` |
|
|
|
| Decisiones, medidas, caveat de dev, gaps | `src/uix/eidos/components/box/README.md` |
|
|
|
| La demo (chips + snippet en paridad) | `web/routes/uix/components/box/+page.svelte` |
|
|
|
| La receta (caso real, con cifras) | `src/uix/blocks/hero/README.md` §«The responsive backdrop» |
|
|
|
| El caso real | `web/routes/blocks/hero/HeroSite.svelte` (snippet `backdrop`) |
|
|
|
| El párrafo de arquitectura | `docs/architecture/eidos.md` §«responsive bridge» |
|
|
|
| El predicado que reutiliza | `src/arts/adom/active-dom.svelte.ts` `isAtLeast` |
|
