Documentación al día de lo que se cerró hoy y handoff para retomar mañana.
- `PLAN-blocks.md` §7: **F2.1 `site-header` HECHA** con sus siete commits, la
fase 0 contra el dossier §P1, el landmark que le faltaba a `NavigationMenu`
(arreglado en el canon, no parcheado en el block), el hueco del CTA que
navega y parece botón (registrado, no falseado) y el defecto de framework
que destapó la demo.
- `theming/changelog.md` §46: las 44 variables de cascada de `Box` dejan de
heredarse. Un `Section` regalaba su padding a cada descendiente —la galería
arrastraba ~300px de aire desde F0— y los hijos heredaban anchos y `display`
ajenos. `@property { inherits: false }`, radio verificado sin regresiones.
Lección: una variable que un componente escribe para SÍ MISMO debe declararse
`inherits: false`; si no, deja de ser un prop y se vuelve un contagio.
- `architecture/blocks.md` B-9: la demo de un block se construye sobre el
harness compartido y el block se enseña A SANGRE — nunca dentro de un marco
con relleno ni de una caja con scroll, porque eso cambia lo que el block
hace.
- `src/uix/blocks/README.md`: anatomía de la demo (harness, `{Name}Site`, ruta
`preview`, `DocRow`, catálogo único, ejes en el shell).
- `CONTINUE-blocks.md` (nuevo): handoff — qué toca (F2.2 `hero`), la plantilla
de ficheros para copiar, las reglas que ya costaron sangre (a sangre, iframe
solo para anchos de dispositivo, cada prop un control, nada de backticks en
`<Text>`, ojo con las variables que heredan), la deuda declarada que es
decisión del usuario y el estado exacto de los gates.
Gates al parar: `blocks:check` verde · `svelte-check` 73 errores, todos deuda
ajena (0 propios) · `vitest src/uix/eidos` 353/353 · `contracts.test` con los
3 fallos ajenos conocidos.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
alpha-0.1-sec-dom
parent
ae7b4f8c3b
commit
d38bd63faa
@ -0,0 +1,82 @@
|
||||
# CONTINUE — F2 blocks de sitio (handoff 2026-07-23)
|
||||
|
||||
Estado al parar: **F1 CERRADA (8/8 componentes canon)** y **F2.1 `site-header`
|
||||
HECHA** — el primer block del tier, que además fijó la superficie de demo para
|
||||
los 13 que quedan. Plan maestro: `docs/process/PLAN-blocks.md` (§F2 y el
|
||||
registro §7). Todo commiteado y pusheado a `gita/alpha-0.1-sec-dom`; último
|
||||
commit `ae7b4f8c3`.
|
||||
|
||||
## Lo siguiente
|
||||
|
||||
**F2.2 `hero`** (ficha en `PLAN-blocks.md` §F2.2). No depende de nada. Después,
|
||||
el orden del plan: feature-grid → pricing → testimonials → faq → stats-band →
|
||||
cta → newsletter → site-footer → banner → team → contact → content-section.
|
||||
|
||||
Cada uno entra por el contrato B (`docs/architecture/blocks.md`) con **fase 0
|
||||
ligera obligatoria**: mirar el equivalente en ≥2 catálogos del dossier
|
||||
(`docs/process/RESEARCH-blocks-references.md`) y anotar en el README del block
|
||||
qué se adopta y qué se descarta.
|
||||
|
||||
## La plantilla ya existe — cópiala, no la reinventes
|
||||
|
||||
Un block terminado son estos ficheros (ejemplo real: `site-header`):
|
||||
|
||||
```text
|
||||
src/uix/blocks/{kebab}/
|
||||
├── README.md # Función · Mapa de composición · Decisiones · Gaps
|
||||
├── index.ts # export del compound + tipos
|
||||
├── types.ts # props (todo contenido entra por snippets, B-5/B-7)
|
||||
└── {kebab}.svelte # composición: solo componentes del canon, sin CSS
|
||||
|
||||
web/routes/blocks/{kebab}/
|
||||
├── +page.svelte # BlockDemo + controles vivos + pestañas de doc
|
||||
├── {Name}Site.svelte # el block dentro de contenido REAL de producto
|
||||
└── preview/
|
||||
├── +layout@.svelte # `@` resetea el layout: la vista previa es su página
|
||||
└── +page.svelte # sirve {Name}Site leyendo la URL
|
||||
```
|
||||
|
||||
Y luego: marcar `shipped: true` en `web/routes/blocks/_lib/catalog.ts` (raíl y
|
||||
galería leen esa única fuente) y `npm run blocks:check`.
|
||||
|
||||
## Reglas que ya costaron sangre (no las re-aprendas)
|
||||
|
||||
- **El block se enseña A SANGRE en la página.** Nada entre el block y el borde:
|
||||
ni marco con relleno, ni caja con scroll, ni cromo pegajoso encima. Medido: un
|
||||
`Card` desplazaba 21px un header con `offset: 0` (su recipe pinta con
|
||||
`--card-padding-*`, que `padding={0}` de la capa Box no alcanza), y un
|
||||
`position: sticky` dentro de un div con scroll es un comportamiento que nadie
|
||||
vive. **Si un block se ancla a algo, se mide contra lo que se anclará en
|
||||
producción.**
|
||||
- **Los anchos de dispositivo (375/768) van por la ruta `preview` en iframe**, y
|
||||
es opt-in: en dev, dos documentos sin empaquetar a la vez agotan las
|
||||
conexiones del navegador (`ERR_INSUFFICIENT_RESOURCES` mata las DOS páginas).
|
||||
- **Cada prop público, un control vivo** en la demo; los ejes de sección (tema,
|
||||
idioma, dirección, densidad) ya los da el shell, no los repitas.
|
||||
- **Nada de backticks de markdown dentro de `<Text>`**: se ven literales. Lo que
|
||||
es código va en `<Code>`.
|
||||
- **Ojo con las variables de layout que heredan.** `justify` de `Group` se
|
||||
hereda a los clusters anidados (pon `justify` explícito) y las de `Box` YA no
|
||||
heredan desde 2026-07-23 (`docs/theming/changelog.md` §46).
|
||||
- **Un hueco del canon se registra, no se falsea.** Si al componer falta algo,
|
||||
va a los Gaps del block como candidato a canon y la demo usa lo que hay.
|
||||
|
||||
## Deuda declarada (decisiones tuyas pendientes)
|
||||
|
||||
1. **CTA que navega y parece botón**: hoy no existe. `Button` no tiene `href`
|
||||
por decisión propia («`Link` posee la navegación») y `Link` no tiene variante
|
||||
prominente, así que el «Empezar gratis» de la cabecera es un enlace de texto.
|
||||
Arreglo honesto = una decisión en el canon (`Link variant="solid"` o
|
||||
`Button href`). Está en los Gaps de `site-header`.
|
||||
2. **`hero`, `pricing`, `feature-grid`** tienen brechas ya anotadas en el
|
||||
dossier §P1 que el plan v1 no cubre (split alternante texto/screenshot, tabla
|
||||
comparativa de precios, cita en spotlight). Cada fase 0 las presentará como
|
||||
scope-approval, no se decidirán solas.
|
||||
|
||||
## Estado de gates al parar
|
||||
|
||||
- `npm run blocks:check` verde (1 block).
|
||||
- `npm run check` sin errores propios (la deuda restante es ajena).
|
||||
- `vitest src/uix/eidos` 353/353.
|
||||
- `contracts.test.ts`: 3 fallos AJENOS conocidos (menubar DOM-write ·
|
||||
radio-group `data-ready` · claves camelCase de `aura`), de sesiones paralelas.
|
||||
Loading…
Reference in new issue