svelte-kit-vice

Commit Graph

Author	SHA1	Message	Date
dev	4caf1100a1	refactor(blocks)!: el eje de tamano dice de QUIEN es — size deja de significar dos cosas LA AMBIGUEDAD, medida. En el canon `size` no es ambiguo: es «el eje de tamano de ESTE componente», y cada uno lo materializa a su manera — padding de bloque en `Section`, densidad de la tira en `Banner`, escala tipografica en `Text`. La ambiguedad la creaba el tier: un block no es ninguno de esos componentes, y al reenviar `size` estaba reenviando el eje de una pieza INTERNA. Desde fuera: <FeatureGrid size="xl"> cambia el AIRE de la seccion <SiteBanner size="lg"> cambia la ALTURA de la tira Misma prop, dos cosas, y una con un valor menos en la escala (`BannerSize` no tiene `xl`). Un consumidor que aprende el eje en trece blocks se equivoca en el catorceavo. EL RENOMBRADO: - `size` -> `sectionSize` en los 13 que envuelven `Section` - `container` -> `containerSize` en los 14 que envuelven `Container` - `size` queda LIBRE y solo lo usa `banner`, donde si es el tamano del block - `minColumnWidth` -> `minChildWidth` en `site-footer`: el mismo concepto tenia dos nombres en el tier, y ninguno era el del canon El patron no se invento: el tier YA nombraba un eje por su pieza (`container`). `containerSize` + `sectionSize` lo hace explicito y simetrico. LA REGLA, en `architecture/blocks.md` §Conventions, para que no reaparezca: un block que reenvia el eje de tamano de una pieza interna lo nombra `{pieza}Size`, y `size` se reserva para el tamano del block. Corolario: un eje que el canon ya nombra se reenvia CON SU NOMBRE. METODO — se renombraron los TIPOS primero y se dejo que `svelte-check` senalara cada consumidor, en vez de buscar a mano. Cazo los cinco call sites que quedaban (`CtaSite`, `HeroSite`, `SiteHeaderSite`, `TeamSite` y un uso suelto en `cta.svelte`). ⚠️ Y cazo tambien un error propio: el primer patron era demasiado ancho y renombro `size` en SIETE sub-partes donde ese `size` es el del `Card` o el `Text` que envuelven (`testimonials-item`, `contact-reason`, `team-member-role`…). Revertidas antes de seguir. DOCUMENTACION revisada entera: corregidas las tres filas de README que describian props del block con el nombre viejo (`hero` x2, `site-header`); conservadas las seis que hablan del `size` de un componente del canon (`Banner`, `Accordion`, `Heading`), que no cambia. `PLAN-blocks.md` se deja intacto: es bitacora, y reescribir el registro historico para que cuadre con el presente lo falsearia. LEDGER — el contraste doctrinal llega a 15/15, y cinco filas nuevas: - A-95 `banner`: con `affix="top"` el aviso tapa la cabecera pegada (medido: `elementFromPoint` sobre el header devuelve la tira). NO se arregla aqui: la pieza que falta es la que POSEE las alturas de pagina — Mantine lo resuelve en `AppShell`, que declara `header={{ height }}` y desplaza el resto; nuestro equivalente es el block `app-shell`, sin construir. - A-96 `banner`: `affixOffset` es prop publica sin control vivo en la demo. - A-97 `feature-grid`: RETIRADA el mismo dia. Se midio el texto `muted` con el 4,5:1 generico de WCAG y el proyecto tiene OTRA vara — «floors APCA >= 60 ∧ WCAG >= 3», con guard propio, y la tinta secundaria es «marginal sub-4.5:1 by design». Re-medido con `src/arts/color/apca.ts`: Lc 63,7 y 3,70:1, cumple las dos. (El primer intento con `apcaLc` devolvio 102666 porque le pase 0..255 donde pide 0..1: un valor fuera de rango no es un hallazgo, es un formato.) - A-98 `hero` + A-99 `Group`: las acciones no apilan ni envuelven. La causa NO es del tier — `Group` no aplica el `wrap` que su README promete en TRES sitios: `group.svelte` nunca se lo pasa a `Flex`, el recipe no lo declara, y `Omit<FlexProps,'wrap'>` impide compensarlo desde fuera. El `align: center` si se cumple, lo que descarta que el recipe no cargue. Y A-25 cae (la demo ya no promete elevacion) y A-47 corrige su disposicion: el anillo de foco es «a config axis» por doctrina — endurecerlo es una decision de VALOR en `color.focus.ring`, «never a per-component CSS change», que es exactamente lo que hacia el intento revertido en `e468e764b`. Gates: blocks:check verde (15 blocks / 115 ficheros) · svelte-check 72 errores / 59 avisos = linea base exacta, ninguno en blocks · docs:check 0/0 sobre 629 docs. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	eb13fff409	feat(blocks): `site-footer` — el pie de la página, con el selector de idioma vivo F2.10. Es el block donde la regla de forma del tier se ve mejor: `Column` SE REPITE (el app mapea sobre N grupos), así que es parte compound; la marca, la banda de alta, lo social, lo legal y el `extra` no se repiten ni coordinan, así que son slots. El landmark es un `<footer>` de verdad: `contentinfo` sin pedir nada. Las columnas van en `AutoGrid minChildWidth`, sin un solo breakpoint: el mismo código sirve para 2 grupos o para 5, y en móvil caen a dos. La entrada es un `Motion trigger="viewport"` solo en la región superior y sin escalonado — una línea de copyright que aparece con fundido es teatro, y nadie lee un pie columna por columna. ## Los dos huecos que nombraba el dossier, cerrados - La banda de alta al boletín EN el pie (3 de 7 en Tailwind Plus) como slot `signup`, con su propia fila a lo ancho: en la columna de la marca (~230px) la fila de correo tendría que apilarse. El formulario es del app; este block NO importa el block `newsletter` (B-10) ni inventa validación. - El selector de idioma como `extra` (el slot libre de D-BLK.6), y está VIVO: escribe `uix.prefs.setIntent('language', …)`, el eje real del ecosistema. Verificado — al elegir «English», `document.documentElement.lang` pasa a `en`. ## Tres números que salieron de medir, no de suponer - El `container` bajó de `xl` a `lg`: con `xl` el pie no se alineaba con ninguna sección de la página compuesta encima. - La rejilla superior pasó de `1fr 2fr` a `1fr 3fr`: con `2fr`, un pie de cuatro grupos se partía en 3+1. - El gap entre columnas es 6, no 8: con 8, cinco grupos no comparten fila al ancho `lg` (728px justos). Horizontal más apretado que vertical, porque el gap horizontal es el que decide cuántos grupos caben. ## Dos hallazgos de canon (F21/F22 en `PLAN-blocks-quality.md` §6) - Los primitivos de layout no pueden cambiar de elemento. `Text` y `Heading` aceptan `as`; `Box` —y por tanto `Stack`, `Flex`, `Grid`, `Group`, `Wrap`, `Container`, `Section`— renderiza un `<div>` fijo. Consecuencia: una columna de enlaces no puede ser `<ul>/<li>`, que es como la marcan las referencias. Un block solo puede elegir entre divs o escribir markup que luego no puede estilar. - Un `Select` controlado muestra el VALOR crudo hasta que se abre una vez. `getDisplayText()` resuelve contra un registro de etiquetas que llenan los `Select.Item` al montarse, y con el `Content` en un portal cerrado no hay ninguno montado: `value=['es']` pintaba «es» en vez de «Español». Rodeado con el `child` de `Select.Value`. Verificado en navegador: 2/3/4/5 columnas, banda de alta sí/no, claro/oscuro/RTL y 420px (2×2 columnas, fila de correo apilada), cero desbordamiento horizontal, separador `aria-hidden`, los tres `IconButton` con nombre obligatorio, y el idioma cambiando de verdad. Cero errores de página. Gates: `blocks:check` verde (11 blocks) · `svelte-check` sin errores propios · prettier limpio. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago

Author

SHA1

Message

Date

dev

4caf1100a1

refactor(blocks)!: el eje de tamano dice de QUIEN es — size deja de significar dos cosas

LA AMBIGUEDAD, medida. En el canon `size` no es ambiguo: es «el eje de tamano de
ESTE componente», y cada uno lo materializa a su manera — padding de bloque en
`Section`, densidad de la tira en `Banner`, escala tipografica en `Text`. La
ambiguedad la creaba el tier: un block no es ninguno de esos componentes, y al
reenviar `size` estaba reenviando el eje de una pieza INTERNA. Desde fuera:

    <FeatureGrid size="xl">   cambia el AIRE de la seccion
    <SiteBanner  size="lg">   cambia la ALTURA de la tira

Misma prop, dos cosas, y una con un valor menos en la escala (`BannerSize` no
tiene `xl`). Un consumidor que aprende el eje en trece blocks se equivoca en el
catorceavo.

EL RENOMBRADO:

- `size`      -> `sectionSize`   en los 13 que envuelven `Section`
- `container` -> `containerSize` en los 14 que envuelven `Container`
- `size` queda LIBRE y solo lo usa `banner`, donde si es el tamano del block
- `minColumnWidth` -> `minChildWidth` en `site-footer`: el mismo concepto tenia
  dos nombres en el tier, y ninguno era el del canon

El patron no se invento: el tier YA nombraba un eje por su pieza (`container`).
`containerSize` + `sectionSize` lo hace explicito y simetrico.

LA REGLA, en `architecture/blocks.md` §Conventions, para que no reaparezca: un
block que reenvia el eje de tamano de una pieza interna lo nombra `{pieza}Size`,
y `size` se reserva para el tamano del block. Corolario: un eje que el canon ya
nombra se reenvia CON SU NOMBRE.

METODO — se renombraron los TIPOS primero y se dejo que `svelte-check` senalara
cada consumidor, en vez de buscar a mano. Cazo los cinco call sites que quedaban
(`CtaSite`, `HeroSite`, `SiteHeaderSite`, `TeamSite` y un uso suelto en
`cta.svelte`). ⚠️ Y cazo tambien un error propio: el primer patron era demasiado
ancho y renombro `size` en SIETE sub-partes donde ese `size` es el del `Card` o
el `Text` que envuelven (`testimonials-item`, `contact-reason`,
`team-member-role`…). Revertidas antes de seguir.

DOCUMENTACION revisada entera: corregidas las tres filas de README que describian
props del block con el nombre viejo (`hero` x2, `site-header`); conservadas las
seis que hablan del `size` de un componente del canon (`Banner`, `Accordion`,
`Heading`), que no cambia. `PLAN-blocks.md` se deja intacto: es bitacora, y
reescribir el registro historico para que cuadre con el presente lo falsearia.

LEDGER — el contraste doctrinal llega a 15/15, y cinco filas nuevas:

- A-95 `banner`: con `affix="top"` el aviso tapa la cabecera pegada (medido:
  `elementFromPoint` sobre el header devuelve la tira). NO se arregla aqui: la
  pieza que falta es la que POSEE las alturas de pagina — Mantine lo resuelve en
  `AppShell`, que declara `header={{ height }}` y desplaza el resto; nuestro
  equivalente es el block `app-shell`, sin construir.
- A-96 `banner`: `affixOffset` es prop publica sin control vivo en la demo.
- A-97 `feature-grid`: RETIRADA el mismo dia. Se midio el texto `muted` con el
  4,5:1 generico de WCAG y el proyecto tiene OTRA vara — «floors APCA >= 60 ∧
  WCAG >= 3», con guard propio, y la tinta secundaria es «marginal sub-4.5:1 by
  design». Re-medido con `src/arts/color/apca.ts`: Lc 63,7 y 3,70:1, cumple las
  dos. (El primer intento con `apcaLc` devolvio 102666 porque le pase 0..255
  donde pide 0..1: un valor fuera de rango no es un hallazgo, es un formato.)
- A-98 `hero` + A-99 `Group`: las acciones no apilan ni envuelven. La causa NO es
  del tier — `Group` no aplica el `wrap` que su README promete en TRES sitios:
  `group.svelte` nunca se lo pasa a `Flex`, el recipe no lo declara, y
  `Omit<FlexProps,'wrap'>` impide compensarlo desde fuera. El `align: center` si
  se cumple, lo que descarta que el recipe no cargue.

Y A-25 cae (la demo ya no promete elevacion) y A-47 corrige su disposicion: el
anillo de foco es «a config axis» por doctrina — endurecerlo es una decision de
VALOR en `color.focus.ring`, «never a per-component CSS change», que es
exactamente lo que hacia el intento revertido en `e468e764b`.

Gates: blocks:check verde (15 blocks / 115 ficheros) · svelte-check 72 errores /
59 avisos = linea base exacta, ninguno en blocks · docs:check 0/0 sobre 629 docs.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

dev

eb13fff409

feat(blocks): `site-footer` — el pie de la página, con el selector de idioma vivo

F2.10. Es el block donde la regla de forma del tier se ve mejor: `Column` SE
REPITE (el app mapea sobre N grupos), así que es parte compound; la marca, la
banda de alta, lo social, lo legal y el `extra` no se repiten ni coordinan, así
que son slots. El landmark es un `<footer>` de verdad: `contentinfo` sin pedir
nada.

Las columnas van en `AutoGrid minChildWidth`, **sin un solo breakpoint**: el mismo
código sirve para 2 grupos o para 5, y en móvil caen a dos. La entrada es un
`Motion trigger="viewport"` solo en la región superior y **sin escalonado** — una
línea de copyright que aparece con fundido es teatro, y nadie lee un pie columna
por columna.

## Los dos huecos que nombraba el dossier, cerrados

- **La banda de alta al boletín EN el pie** (3 de 7 en Tailwind Plus) como slot
  `signup`, con su propia fila a lo ancho: en la columna de la marca (~230px) la
  fila de correo tendría que apilarse. El formulario es del app; este block NO
  importa el block `newsletter` (B-10) ni inventa validación.
- **El selector de idioma** como `extra` (el slot libre de D-BLK.6), y está VIVO:
  escribe `uix.prefs.setIntent('language', …)`, el eje real del ecosistema.
  Verificado — al elegir «English», `document.documentElement.lang` pasa a `en`.

## Tres números que salieron de medir, no de suponer

- El `container` bajó de `xl` a **`lg`**: con `xl` el pie no se alineaba con
  ninguna sección de la página compuesta encima.
- La rejilla superior pasó de `1fr 2fr` a **`1fr 3fr`**: con `2fr`, un pie de
  cuatro grupos se partía en 3+1.
- El gap entre columnas es **6, no 8**: con 8, cinco grupos no comparten fila al
  ancho `lg` (728px justos). Horizontal más apretado que vertical, porque el gap
  horizontal es el que decide cuántos grupos caben.

## Dos hallazgos de canon (F21/F22 en `PLAN-blocks-quality.md` §6)

- **Los primitivos de layout no pueden cambiar de elemento.** `Text` y `Heading`
  aceptan `as`; `Box` —y por tanto `Stack`, `Flex`, `Grid`, `Group`, `Wrap`,
  `Container`, `Section`— renderiza un `<div>` fijo. Consecuencia: una columna de
  enlaces no puede ser `<ul>/<li>`, que es como la marcan las referencias. Un
  block solo puede elegir entre divs o escribir markup que luego no puede estilar.
- **Un `Select` controlado muestra el VALOR crudo hasta que se abre una vez.**
  `getDisplayText()` resuelve contra un registro de etiquetas que llenan los
  `Select.Item` al montarse, y con el `Content` en un portal cerrado no hay ninguno
  montado: `value=['es']` pintaba «es» en vez de «Español». Rodeado con el `child`
  de `Select.Value`.

Verificado en navegador: 2/3/4/5 columnas, banda de alta sí/no, claro/oscuro/RTL
y 420px (2×2 columnas, fila de correo apilada), cero desbordamiento horizontal,
separador `aria-hidden`, los tres `IconButton` con nombre obligatorio, y el
idioma cambiando de verdad. Cero errores de página. Gates: `blocks:check` verde
(11 blocks) · `svelte-check` sin errores propios · prettier limpio.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

2 Commits (4caf1100a174f1c948b84a01dba236d9cac93258)