svelte-kit-vice

Commit Graph

Author	SHA1	Message	Date
dev	5125502486	feat(blocks): F2.2 `hero` — center · split · background, por slots Segundo block del tier. API por SLOTS DE SNIPPET, no compound: la forma se razonó con el usuario y con el paisaje de referencia. Compound se reserva para partes que COORDINAN (estado/contexto/ARIA entre ellas — Accordion, Dialog); un hero son cinco slots de layout que no se hablan entre sí y que el root arregla, así que snippets. Además el campo entero shippea marketing como copy-paste plano —nadie aplica compound a una sección—, y los slots por zona son la historia de personalización que distingue al tier del copy-paste. `<Hero layout="center\|split\|background" level container size>` + `eyebrow/title/description/actions/media/background/children`. - El block envuelve título y subtítulo en `Heading`/`Text`: así posee el `id` que nombra el `<section aria-labelledby>` y el nivel del encabezado, mientras la app pone las palabras (B-7). `eyebrow`/`actions`/`media` son contenido libre (ahí los componentes del canon SON la API). - `center` = `Stack` centrado, media debajo (ancho-capado); `split` = `Grid` de dos columnas (una sola sin media), apila en estrecho. - `background` (cover) — añadido por scope-approval del usuario: la media a sangre detrás de la copy, con velo de contraste (`--color-overlay` a `--opacity-scrim`), texto `on-solid` y `object-fit: cover` vía un `<style>` justificado (D-BLK.2). Son las ÚNICAS reglas que el block posee, todas sobre tokens del ecosistema — cero color a mano. Capas por orden de fuente, sin `z-index`. Demo (`web/routes/blocks/hero/`): full-bleed en la página + ruta `preview` para anchos de dispositivo, cada prop un control vivo, y el backdrop del layout cover dogfooda el sistema de color — es un `Surface color="primary" gradient` (finish aurora = `--gradient-aurora`, derivado de los roles del tema; cambia con la paleta). Mini-site compartido por las dos superficies (`HeroSite.svelte`). Encontrado al componer, registrado no resuelto: `Box`/`Surface` `flex`/`grow` no hicieron crecer un hijo flex (bars a 0-width, `flex: 0 1 auto`; la prop no la usa ningún componente shipped). La demo usó `Grid` (tracks `1fr`). Flag en el README del block y en el handoff para revisar el cableado de `--box-flex`. Verificado en navegador (Playwright headless, módulos frescos): center/split/ background × claro/oscuro × LTR/RTL, media on/off, y el landmark nombrado (región con `aria-labelledby` que resuelve al título). `blocks:check` verde (2 blocks) · `svelte-check` sin errores propios. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	3 months ago
dev	356ebf92af	feat(button): el CTA que navega y parece botón, por composición (opción D) El hueco que registró `site-header`: un «Empezar gratis» de cabecera tiene que NAVEGAR y parecer botón. `Button` no crece un `href` —`Link` posee la navegación, y un ancla se activa con Enter, no con espacio, lo cual es correcto—: presta la pintura por composición. Lo que hacía de esa forma un downgrade era que el `child` (asChild) descartaba la decoración; se completa el slot. - eidos `<Button>`: el `child` recibe ahora `content`, el cuerpo YA decorado (icono · etiqueta · endIcon · spinner) en su propio snippet que comparten las dos ramas de render. Así `<a href {...props}>{@render content()}</a>` conserva TODOS los slots en vez de sustituirlos (antes la flecha del sitio alpha estaba escrita a mano). Nuevo tipo exportado `ButtonChildProps`. - soma / morfo: en la forma `child` el elemento es del consumidor, así que soma deja de estampar `type` (un `<a type="button">` es una pista de MIME falsa). El componente pasa `type: undefined` cuando hay `child`; el provider lo REENVÍA verbatim (antes lo re-defaulteaba a `'button'` y pisaba el drop — el default vive en el destructure del componente); el morfo declara el attr `type` condicional (`prop-truthy`). - docs: ejemplo rancio de `index.ts` corregido (anunciaba un `asChild`/ `variant="link"` que no existen); sección «CTA que navega» en el README de eidos con el patrón y el footgun documentado (un `<button>` en un `<form>` vía `child` se pone su propio `type`); nota en el README de soma. - site-header: el CTA de la demo usa ya la forma real (`<a>` sólido con flecha), y el hueco pasa de «candidato a canon» a CERRADO por composición — `Button` sigue sin `href` y `Link` sigue poseyendo la navegación, las dos decisiones firmadas se mantienen. Actualizados PLAN/CONTINUE-blocks. - demo de Button: control `child (asChild → <a>)` vivo, snippet del código y fila de a11y explicando por qué el ancla activa solo con Enter. Verificado en navegador (dev, restart para módulos frescos): asChild ON → `<a href="#pricing">` sin `type`, pintura sólida completa (bg primary, tinta blanca, 36px, padding 16px), y el slot de icono SOBREVIVE dentro del ancla (`[data-button-icon]` + svg + body); asChild OFF → `<button type="button">` intacto (sin regresión de submit implícito); el CTA real de `site-header` sale `<a>` con la flecha final y 0 errores de consola. `blocks:check` verde · `vitest src/uix/morfo` 114/114 · `svelte-check` sin errores propios nuevos. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	3 months ago
dev	d38bd63faa	docs(blocks): registro de F2.1, doctrina de demo del tier y handoff 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>	3 months ago

Author

SHA1

Message

Date

dev

5125502486

feat(blocks): F2.2 `hero` — center · split · background, por slots

Segundo block del tier. API por SLOTS DE SNIPPET, no compound: la forma se
razonó con el usuario y con el paisaje de referencia. Compound se reserva para
partes que COORDINAN (estado/contexto/ARIA entre ellas — Accordion, Dialog); un
hero son cinco slots de layout que no se hablan entre sí y que el root arregla,
así que snippets. Además el campo entero shippea marketing como copy-paste
plano —nadie aplica compound a una sección—, y los slots por zona son la
historia de personalización que distingue al tier del copy-paste.

`<Hero layout="center|split|background" level container size>` +
`eyebrow/title/description/actions/media/background/children`.

- El block **envuelve** título y subtítulo en `Heading`/`Text`: así posee el
  `id` que nombra el `<section aria-labelledby>` y el nivel del encabezado,
  mientras la app pone las palabras (B-7). `eyebrow`/`actions`/`media` son
  contenido libre (ahí los componentes del canon SON la API).
- `center` = `Stack` centrado, media debajo (ancho-capado); `split` = `Grid` de
  dos columnas (una sola sin media), apila en estrecho.
- **`background` (cover)** — añadido por scope-approval del usuario: la media a
  sangre detrás de la copy, con velo de contraste (`--color-overlay` a
  `--opacity-scrim`), texto `on-solid` y `object-fit: cover` vía un `<style>`
  justificado (D-BLK.2). Son las ÚNICAS reglas que el block posee, todas sobre
  tokens del ecosistema — cero color a mano. Capas por orden de fuente, sin
  `z-index`.

Demo (`web/routes/blocks/hero/`): full-bleed en la página + ruta `preview` para
anchos de dispositivo, cada prop un control vivo, y el backdrop del layout cover
dogfooda el sistema de color — es un `Surface color="primary" gradient` (finish
aurora = `--gradient-aurora`, derivado de los roles del tema; cambia con la
paleta). Mini-site compartido por las dos superficies (`HeroSite.svelte`).

Encontrado al componer, registrado no resuelto: `Box`/`Surface` `flex`/`grow`
no hicieron crecer un hijo flex (bars a 0-width, `flex: 0 1 auto`; la prop no la
usa ningún componente shipped). La demo usó `Grid` (tracks `1fr`). Flag en el
README del block y en el handoff para revisar el cableado de `--box-flex`.

Verificado en navegador (Playwright headless, módulos frescos): center/split/
background × claro/oscuro × LTR/RTL, media on/off, y el landmark nombrado
(región con `aria-labelledby` que resuelve al título). `blocks:check` verde
(2 blocks) · `svelte-check` sin errores propios.

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

dev

356ebf92af

feat(button): el CTA que navega y parece botón, por composición (opción D)

El hueco que registró `site-header`: un «Empezar gratis» de cabecera tiene que
NAVEGAR y parecer botón. `Button` no crece un `href` —`Link` posee la
navegación, y un ancla se activa con Enter, no con espacio, lo cual es
correcto—: presta la pintura por composición. Lo que hacía de esa forma un
downgrade era que el `child` (asChild) descartaba la decoración; se completa el
slot.

- **eidos `<Button>`**: el `child` recibe ahora `content`, el cuerpo YA
  decorado (icono · etiqueta · endIcon · spinner) en su propio snippet que
  comparten las dos ramas de render. Así
  `<a href {...props}>{@render content()}</a>` conserva TODOS los slots en vez
  de sustituirlos (antes la flecha del sitio alpha estaba escrita a mano).
  Nuevo tipo exportado `ButtonChildProps`.
- **soma / morfo**: en la forma `child` el elemento es del consumidor, así que
  soma deja de estampar `type` (un `<a type="button">` es una pista de MIME
  falsa). El componente pasa `type: undefined` cuando hay `child`; el provider
  lo REENVÍA verbatim (antes lo re-defaulteaba a `'button'` y pisaba el drop —
  el default vive en el destructure del componente); el morfo declara el attr
  `type` condicional (`prop-truthy`).
- **docs**: ejemplo rancio de `index.ts` corregido (anunciaba un `asChild`/
  `variant="link"` que no existen); sección «CTA que navega» en el README de
  eidos con el patrón y el footgun documentado (un `<button>` en un `<form>` vía
  `child` se pone su propio `type`); nota en el README de soma.
- **site-header**: el CTA de la demo usa ya la forma real (`<a>` sólido con
  flecha), y el hueco pasa de «candidato a canon» a CERRADO por composición —
  `Button` sigue sin `href` y `Link` sigue poseyendo la navegación, las dos
  decisiones firmadas se mantienen. Actualizados PLAN/CONTINUE-blocks.
- **demo de Button**: control `child (asChild → <a>)` vivo, snippet del código
  y fila de a11y explicando por qué el ancla activa solo con Enter.

Verificado en navegador (dev, restart para módulos frescos): asChild ON →
`<a href="#pricing">` sin `type`, pintura sólida completa (bg primary, tinta
blanca, 36px, padding 16px), y el slot de icono SOBREVIVE dentro del ancla
(`[data-button-icon]` + svg + body); asChild OFF → `<button type="button">`
intacto (sin regresión de submit implícito); el CTA real de `site-header` sale
`<a>` con la flecha final y 0 errores de consola. `blocks:check` verde ·
`vitest src/uix/morfo` 114/114 · `svelte-check` sin errores propios nuevos.

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

dev

d38bd63faa

docs(blocks): registro de F2.1, doctrina de demo del tier y handoff

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>

3 Commits (5125502486863e684e41d5e29dba37bc7dbb0adb)