|
|
# CONTINUE — F2 blocks de sitio (handoff, act. 2026-08-01)
|
|
|
|
|
|
**Estado: F1 CERRADA (8/8) · F2 CERRADA (15/15).**
|
|
|
Hechos: site-header · hero · feature-grid · **feature-split** · pricing ·
|
|
|
testimonials · faq · stats-band · cta · newsletter · site-footer · banner · team ·
|
|
|
**contact** (§F2.13, el primero que COORDINA) · **content-section** (§F2.14).
|
|
|
|
|
|
**Siguiente**: F3 (blocks de aplicación, 10) — o antes la página compuesta de
|
|
|
prueba que el plan pide para cerrar F2: header, hero, features, pricing, faq, cta
|
|
|
y footer juntos, mirada en claro/oscuro/375/1280. Es el test de integración del
|
|
|
tier y todavía no existe.
|
|
|
|
|
|
> ⚠️ **CAMBIO DE DOCTRINA (decisión del usuario, 2026-07-31).** Lee la sección
|
|
|
> «La doctrina cambió» antes de tocar nada: un block ya no es solo colocación.
|
|
|
> Ya está ESCRITA en el contrato (`architecture/blocks.md` §«Coordination»).
|
|
|
|
|
|
(El plan fijó 14; `feature-split` se añadió como block hermano con
|
|
|
scope-approval, así que el tier tiene 15 y el denominador honesto es 15.)
|
|
|
|
|
|
Todo commiteado y pusheado a `gita/alpha-0.1-sec-dom`.
|
|
|
|
|
|
Dónde vive cada cosa:
|
|
|
|
|
|
- **Plan y bitácora por block**: `docs/process/PLAN-blocks.md` (fichas §F2.x +
|
|
|
registro cronológico al final, con el detalle de cada cierre).
|
|
|
- **Contrato del tier**: `docs/architecture/blocks.md` (B-1..B-11, D-BLK).
|
|
|
- **Suelo de paridad**: `docs/process/RESEARCH-blocks-references.md` (el dossier).
|
|
|
- **Deuda de canon congelada**: `docs/process/PLAN-blocks-quality.md` §6.
|
|
|
- **Decisiones por block**: el README de cada uno (`src/uix/blocks/{kebab}/`).
|
|
|
|
|
|
---
|
|
|
|
|
|
## La doctrina cambió: un block coordina, tiene estado y trae datos
|
|
|
|
|
|
Decisión del usuario, textual: **«si al final es una lista de componentes… el
|
|
|
bloque es coordinación, estado, y data también»**. El motivo, con el `contact`
|
|
|
delante: cuando el estado vive fuera, cada `disabled` es una expresión distinta
|
|
|
montada en el punto de uso y aparecen **huecos** — un envío que no se puede hacer
|
|
|
y nadie dice por qué.
|
|
|
|
|
|
Lo que cambia respecto de lo firmado en `docs/architecture/blocks.md` (B-5/B-7 y
|
|
|
D-BLK: «todo el contenido por snippets, cero cadenas propias, sin servicios»):
|
|
|
|
|
|
1. **El block posee el estado de su sección.** Una máquina única y EXHAUSTIVA,
|
|
|
derivada, en contexto. Sus partes la leen; ninguna la recalcula ni inventa un
|
|
|
`disabled`.
|
|
|
2. **El block trae la forma de sus datos** (el esquema por defecto). El app lo
|
|
|
sustituye pasando el suyo.
|
|
|
3. **El block habla**, con idlangrefs por el traductor
|
|
|
(`#?blocks.<block>.<clave>|fallback`), la misma puerta que usa el canon para
|
|
|
sus `texts:`. Fallback en inglés; el app traduce registrando `blocks.*`.
|
|
|
|
|
|
**ESCRITO** (2026-07-31): `architecture/blocks.md` gana la sección
|
|
|
«Coordination», B-5 admite que el block traiga la FORMA de sus datos, B-7 queda
|
|
|
enmendado (posee las palabras de SUS estados, como idlangref con fallback
|
|
|
inglés) y la convención de servicios se acota: **el traductor es el único
|
|
|
servicio sancionado**. La sección dice también a quién NO aplica.
|
|
|
|
|
|
**Alcance acordado**: `contact` primero como prueba de la forma — **HECHO**.
|
|
|
**Revisión documental de los 15 HECHA** (2026-08-01): cada README declara ahora
|
|
|
su posición bajo la doctrina, y el mapa real salió así —
|
|
|
|
|
|
- **Coordinan**: `contact` (máquina + esquema + palabras) · `pricing` (el periodo
|
|
|
por contexto, pero nada se puede BLOQUEAR ahí, así que no necesita máquina ni
|
|
|
palabras: coordinar no es siempre una máquina).
|
|
|
- **Comparten configuración, no estado**: `team` (`align`) · `content-section`
|
|
|
(la medida).
|
|
|
- **Costura bindable hacia el canon**: `faq` (`value` → `Accordion`) ·
|
|
|
`site-header` (`mobileOpen` → `Drawer`). Reenviar no es poseer.
|
|
|
- **No poseen nada**: banner · cta · feature-grid · feature-split · hero ·
|
|
|
site-footer · stats-band · testimonials.
|
|
|
- ⚠️ **`newsletter` es el candidato ABIERTO**: coloca un envío que puede quedar
|
|
|
bloqueado sin que nada diga por qué (el `disabled` lo monta el app en el punto
|
|
|
de uso) — exactamente el hueco que cerró `contact`. Es anterior a la doctrina
|
|
|
(block del 2026-07-30, doctrina del 2026-07-31). **Siguiente candidato a
|
|
|
tocar**, con decisión tuya antes de moverlo.
|
|
|
|
|
|
⚠️ Al revisarlos, el listón es el que dejó `contact`: **el estado se deriva de
|
|
|
una fuente y las partes lo leen**; si un estado puede bloquear algo, tiene frase
|
|
|
por `Record` exhaustivo. Y **no inventes estado donde no lo hay** — un block de
|
|
|
layout que no coordina nada se queda como está.
|
|
|
|
|
|
---
|
|
|
|
|
|
## F2.13 `contact` — CERRADO (2026-07-31)
|
|
|
|
|
|
Los seis puntos que quedaban están hechos: arco verificado en navegador · README
|
|
|
rehecho · pestañas de doc al día · namespace `blocks` registrado en el arnés ·
|
|
|
ficha §F2.13 + bitácora en `PLAN-blocks.md` · contrato B actualizado.
|
|
|
|
|
|
**Un defecto real, encontrado al verificar**: la máquina leía `form.isValid`,
|
|
|
que con `progressive` significa «aún no se ha encontrado nada mal» — un
|
|
|
formulario vacío e intacto no tiene errores, así que se declaraba válido y
|
|
|
`incomplete` era INALCANZABLE al cargar: la sección pedía resolver la
|
|
|
verificación con los tres campos vacíos. Justo el hueco que la doctrina existe
|
|
|
para cerrar. Se arregla preguntando al ESQUEMA (`validateSync` de SIUM: síncrono
|
|
|
y sin escribir errores; `form.validate()` habría encendido los tres campos en
|
|
|
rojo al cargar). Fijado con `state.test.ts` — 9 casos, **primer test unitario
|
|
|
del tier**, porque `state.ts` es su primera lógica pura.
|
|
|
|
|
|
Añadido de paso el control vivo que faltaba para un prop público:
|
|
|
`verification` con reto / sin reto. **Omitir el prop NO es pasar `idle`**: sin
|
|
|
él la sección no tiene paso de verificación; con un estado que nunca llega a
|
|
|
`verified` tienes una verificación que no pasa, que es otra cosa.
|
|
|
|
|
|
⚠️ **Ojo con el dev server de otra sesión**: el de `:5173` sirvió un módulo VACÍO
|
|
|
para `blocks/contact/index.ts` (500 «does not provide an export named Contact»)
|
|
|
porque tenía el grafo caducado tras crear ficheros nuevos. Arrancado uno propio en
|
|
|
otro puerto, la página va perfecta. Si mañana ves ese 500, es eso: no persigas el
|
|
|
código.
|
|
|
|
|
|
## Dos hilos de canon abiertos (medidos, sin causa raíz)
|
|
|
|
|
|
1. **`Form`/SIUM**: con `progressive`/`onSubmit`, un envío inválido bloquea y
|
|
|
mueve el foco pero **no expone mensajes** (`form.errors` vacío). Con `onChange`
|
|
|
sí aparecen —y traducidos—, pero saltan en los tres campos al escribir en uno;
|
|
|
con `onBlur` aparecen desde la carga. La máquina de estado del block TAPA el
|
|
|
agujero de cara al usuario (el botón dice qué falta), pero el hueco sigue ahí.
|
|
|
2. **`ProofOfHuman`**: el provider de soma escribe `status` él mismo
|
|
|
(`writableActive`), así que el veredicto que devuelve el app tras consultar a su
|
|
|
servidor no se sostiene, y los slots `stage*` no renderizaron en ningún estado.
|
|
|
El camino «rechazado» no es contable hoy desde el app. **Consecuencia medida en
|
|
|
`contact`**: sus estados `verifying` y `rejected` quedan cubiertos por test
|
|
|
unitario de la máquina, no por el reto en vivo.
|
|
|
|
|
|
---
|
|
|
|
|
|
## La regla de forma del tier (no la re-decidas)
|
|
|
|
|
|
Compound **solo** si las partes:
|
|
|
|
|
|
- **SE REPITEN** — el app mapea sobre N (`feature-grid.Item`,
|
|
|
`testimonials.Item`, `pricing.Plan`, `faq.Item`, `stats-band.Stat`,
|
|
|
`site-footer.Column`), o
|
|
|
- **COORDINAN** — se hablan por contexto (`pricing.Switch` ↔ `PlanPrice`).
|
|
|
|
|
|
Si no hacen ninguna de las dos: **slots de snippet** en la raíz (`hero`, `cta`,
|
|
|
`newsletter`, y la marca / alta / social / legal / extra de `site-footer`). El
|
|
|
plan original dibujaba varias de esas como partes; la desviación está registrada
|
|
|
en cada README.
|
|
|
|
|
|
---
|
|
|
|
|
|
## Los 8 hallazgos de canon que dejó el tier (congelados)
|
|
|
|
|
|
Restricción del usuario en vigor: **no tocar componentes ni librerías fuera de
|
|
|
`src/uix/blocks/` y `web/routes/blocks/`**. Están todos medidos en navegador
|
|
|
y listados en `PLAN-blocks-quality.md` §6 (F15–F22) — más los de motion (A1, A2,
|
|
|
A4, C7, C8, C10, D12, E14) de la pasada de calidad.
|
|
|
|
|
|
| # | Qué |
|
|
|
| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
|
| F15 | `Surface variant='soft'` **no acota un panel**: su track queda a 0.002 de luminancia del fondo de página en claro, y `Surface` no tiene borde. `Card outline` sí acota pero no acepta `gradient` → «panel sosegado con borde» no tiene primitivo. |
|
|
|
| F16 | La ranura `contrast` de la paleta es **blanca en todo escalón sólido**, así que un lienzo de luminancia media deja el cuerpo bajo AA: `primary` 5.18 · `indigo` 5.21 · `plum` 4.75 pasan; `neutral` 3.32 · `secondary`/`slate` 3.30 · `teal` 3.07 fallan en claro. |
|
|
|
| F17 | **`Text align` es inerte por defecto**: renderiza un `span` y `text-align` no hace nada sobre caja inline. Hay que pedir `as="p"`. |
|
|
|
| F18 | **La fundación de eidos no trae reset de modelo de caja y lo asume del app.** Bajo `content-box`, `[data-field-control]` (`inline-size:100%` + padding) mide 30px más que su contenedor. Resuelto en app-land: `web/routes/blocks/_lib/reset.css`. |
|
|
|
| F19 | **`onValidSubmit`/`onInvalidSubmit` son no-op silenciosos** si se pasa un `form` ya construido: el componente solo los reenvía al `createForm` que hace él mismo. El handler va SIEMPRE en `createForm`. |
|
|
|
| F20 | Los mensajes de SIUM son **idlangref** (`#?sium.errors.email\|…`): resolver con `uix.langs.t(issue.message, issue.params)`. La demo de docs del `Form` los parte a mano y por eso siempre salen en inglés. |
|
|
|
| F21 | **Los primitivos de layout no pueden cambiar de elemento**: `Text`/`Heading` aceptan `as`, pero `Box` —y `Stack`/`Flex`/`Grid`/`Group`/`Wrap`/`Container`/`Section`— es un `<div>` fijo. Una columna de enlaces no puede ser `ul`/`li`. |
|
|
|
| F22 | **Un `Select` controlado muestra el VALOR crudo hasta abrirse una vez**: las etiquetas las registran los `Select.Item` al montarse y el `Content` portaleado está cerrado. Rodeo: el `child` de `Select.Value`. |
|
|
|
|
|
|
Y dos huecos anteriores que siguen abiertos: **`Box`/`Surface` `flex`/`grow` no
|
|
|
hacen crecer a un hijo flex** (se rodea con tracks `1fr` de `Grid`) y **`Group` no
|
|
|
apila** (usa `Flex direction={{ base: 'column', sm: 'row' }}`; `hero` todavía
|
|
|
compone sus acciones con `Group`).
|
|
|
|
|
|
---
|
|
|
|
|
|
## La plantilla ya existe — cópiala, no la reinventes
|
|
|
|
|
|
```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.**
|
|
|
- **Verifica esperando la CONDICIÓN, nunca un timeout fijo.** Con `Form`+`Field`+
|
|
|
SIUM el dev server tarda ~2,5s en hidratar y un screenshot temprano fotografía
|
|
|
el panel todavía invisible (`data-animation-pending` puesto). Esperar a que ese
|
|
|
atributo desaparezca es la diferencia entre verificar y reportar un bug que no
|
|
|
existe.
|
|
|
- **Y la condición tiene que ser algo que escriba la RUNTIME del morfo, no el
|
|
|
render.** Los `data-variant` / `data-size` los pone el componente de eidos al
|
|
|
renderizar, así que están desde el primer frame; `type`, `aria-label` y los
|
|
|
handlers los aplica la runtime en un efecto POSTERIOR. Esperar a que exista el
|
|
|
nodo (o a que se vea) no basta: a ~1s medí `type` ausente en TODOS los `Button`
|
|
|
del árbol y ningún `onclick` disparando, y a ~6s los mismos botones tenían
|
|
|
`type="button"`, `aria-label="Descartar"` y el clic funcionando. Reporté tres
|
|
|
«defectos del canon» que no existían.
|
|
|
- **MATIZ CARO (2026-07-31): que lo escriba la runtime NO basta — tiene que no
|
|
|
existir en el SSR.** Esperé `button[type="submit"]` con atributo `type` como
|
|
|
puerta de hidratación en `contact`, y **ese atributo viene ya en el HTML del
|
|
|
servidor**: la espera se cumplía sobre el documento estático y yo tecleaba
|
|
|
antes de que Svelte tomara los inputs. Resultado: los valores entraban en el
|
|
|
DOM, `form.values` seguía vacío, y pasé varias rondas persiguiendo un fallo del
|
|
|
block que no existía (llegué a «arreglar» un `$derived` que estaba bien; lo
|
|
|
revertí al medirlo). **La puerta honesta**: algo que solo pueda haber escrito
|
|
|
el cliente — aquí `<style id="uix-blocks-display">`, que pone un `$effect` de
|
|
|
`BootUix` — más un ida y vuelta reactivo real antes de dar por hidratado.
|
|
|
- **Si instrumentas con `console.log` y no lo ves en el navegador, míralo en el
|
|
|
SERVIDOR.** Un `console.log` dentro de un `$derived` sale por el stdout del dev
|
|
|
server durante el SSR. Ver el log SOLO ahí es la prueba de que el componente no
|
|
|
está corriendo en cliente — fue lo que delató el diagnóstico anterior.
|
|
|
- **Playwright headless SÍ sirve para foco y teclado.** El pane suspendido no
|
|
|
(congela rAF y pierde `activeElement`), pero un `page.keyboard.type()` real
|
|
|
dispara `:placeholder-shown` y `:focus-within`: así se verificó que la etiqueta
|
|
|
flotante del `Field` sube al borde. `page.fill()` usa el setter nativo y NO los
|
|
|
dispara. Un script del scratchpad debe importar
|
|
|
`file:///G:/dev/svelte/vicen/node_modules/playwright/index.mjs` (no resuelve
|
|
|
`playwright` por ruta relativa).
|
|
|
- **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.
|
|
|
- **Un slot que se apaga se pasa como `undefined`, no se renderiza vacío.**
|
|
|
Declara el snippet arriba y pásalo por prop
|
|
|
(`signup={activo ? banda : undefined}`): así el `{#if}` del block quita también
|
|
|
su hueco. Y **cuidado con el sombreado**: `{#snippet signup()}` pisa un prop
|
|
|
llamado `signup` dentro del componente.
|
|
|
- **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.
|
|
|
- **`gap` en un `Grid` separa también las COLUMNAS, y una parte que las cruza se
|
|
|
lleva esos huecos encima** (`content-section`, medido): con `gap={8}` y cinco
|
|
|
pistas, la parte que abarca 2/5 medía 1088 en vez de los 1024 del contenedor
|
|
|
con el que debía alinearse, y la de 1/-1 llegaba a 532 dentro de una rejilla de
|
|
|
404 y hacía scrollear la página a 420px. Si las columnas son un instrumento de
|
|
|
medida y no cosas puestas al lado: `rowGap` + `columnGap={0}`.
|
|
|
- **Y `100%` dentro de una pista no es `100%` de la rejilla.** Una pista
|
|
|
`min(medida, 100%)` se come sus propios canalones (a 420px la central se
|
|
|
quedaba los 404 enteros y la rejilla se iba a 436), y algo anidado dentro de una
|
|
|
parte ve el ancho de SU pista, no el de la rejilla — capar igual en los dos
|
|
|
casos descuadra uno de los dos. Los dos se cazaron midiendo, no leyendo.
|
|
|
- **Los números de layout se miden.** Tres defaults de `site-footer` (`container`,
|
|
|
la razón de la rejilla, el gap de columnas) salieron mal a la primera y solo el
|
|
|
navegador lo dijo. Si un default decide cuántas cosas caben en una fila, se
|
|
|
comprueba con el contenido real.
|
|
|
|
|
|
---
|
|
|
|
|
|
## Deuda del arnés de demos (mía, sin tocar)
|
|
|
|
|
|
- La galería (`web/routes/blocks/+layout@.svelte`) **arranca UIX en línea** en vez
|
|
|
de usar `_lib/BootUix.svelte`, que es lo que usan los previews: la misma cadena
|
|
|
escrita dos veces, y el motivo de que `reset.css` haya que importarlo en los dos
|
|
|
sitios.
|
|
|
- En `BlockDemo`, a ~1400px, el conmutador de anchos de dispositivo se solapa con
|
|
|
el párrafo que lo precede. Idéntico en los 11 blocks → es del arnés, no de un
|
|
|
block.
|
|
|
|
|
|
---
|
|
|
|
|
|
## Deuda a decisión tuya
|
|
|
|
|
|
Siguen sin decidir, cada una entra por el contrato B con **fase 0 ligera**
|
|
|
(mirar ≥2 catálogos del dossier y anotar adoptado/descartado en el README):
|
|
|
|
|
|
1. **Tabla de comparación** de features×planes en `pricing` (recurre en las refs;
|
|
|
sería un hermano `pricing-table`).
|
|
|
2. **Cita en spotlight** en `testimonials` (la variante modal de TODAS las refs;
|
|
|
el grid es minoría, 2 de 8 en TW).
|
|
|
3. **Lista estática 2/3 columnas** en `faq` (6 de 7 en TW no son acordeón).
|
|
|
4. **`form-in-hero`** (slot de alta al boletín dentro del hero).
|
|
|
|
|
|
Resueltas ya: feature-split/alternante (F2.3b, con `Mockup`) · hero con fondo
|
|
|
cover (layout `background`) · CTA que navega y parece botón (el `child` de
|
|
|
`Button` entrega un snippet `content`; `Button` sigue sin `href` y `Link` sigue
|
|
|
poseyendo la navegación — doctrina en el README de eidos Button §«CTA que
|
|
|
navega»).
|
|
|
|
|
|
---
|
|
|
|
|
|
## Estado de gates al parar
|
|
|
|
|
|
- `npm run blocks:check` **verde (14 blocks)**.
|
|
|
- `npx vitest run src/uix/blocks/` — **9/9** (`contact/state.test.ts`).
|
|
|
- `npm run docs:check` — **0 errores, 0 avisos**.
|
|
|
- `svelte-check`: **sin errores propios** (80 en el repo, ninguno en `blocks/`;
|
|
|
el delta sobre los 73 de ayer sale de `web/routes/alpha/` y del árbol sucio del
|
|
|
hilo de audio, ajenos).
|
|
|
- `prettier`: limpio en mis ficheros del tier. ⚠️ Hay **18 ficheros del arnés de
|
|
|
demos que fallan prettier de antes** (`hero`, `pricing`, `site-header`,
|
|
|
`feature-*`, `testimonials`, `stats-band`…) y `docs/architecture/blocks.md`
|
|
|
también fallaba ya en HEAD — no los formateé para no meter diff ajeno.
|
|
|
- `vitest src/uix/contracts.test.ts`: **3 fallos AJENOS** (35 pasan) — escrituras
|
|
|
DOM directas en soma, data-attrs hardcodeados y las claves camelCase de `aura`
|
|
|
(`components.aura.announce.returnedStopped`, …). Ninguno apunta a `blocks/`.
|
