7 Commits (b59332132f551065f4a9c9a908e3ec0769d72bcc)

Author	SHA1	Message	Date
dev	b59332132f	feat(blocks): F2.5 `testimonials` — rejilla de citas con autor ... Prueba social: una cabecera sobre una rejilla responsive de tarjetas de cita, cada una con su autor (avatar · nombre · cargo). Compound —la `.Item` se repite, como feature-grid— y SIN contexto (las partes no coordinan). `<Testimonials>` + `.Header` + `.Items` + `.Item` + `.Quote` + `.Author`(slot `avatar` + `.AuthorName`/`.AuthorRole`). - `AutoGrid` de tarjetas de igual alto; `.Author` fijada al borde inferior de la tarjeta (`margin-block-start: auto`) para que una fila de citas de distinto largo alinee las caras. - La cara es del app: un `<Avatar>` con imagen o un `Avatar.Fallback` de iniciales va en el slot `avatar` (B-7). - La tarjeta del quote usa `variant="outline"` — el `soft neutral` es casi invisible en claro. Encontrado al componer (en el README del block): el tema activa solo un SUBCONJUNTO de escalas donor (`green/indigo/orange/plum/teal`); una escala no activada (`cyan/ruby/amber/jade`) en `color` cae en SILENCIO a `primary` (la regla `[data-color]` hace `var(--scale-…, primary)`). Config del tema, no bug de componente; la demo usa escalas activadas. Hueco a decisión del usuario (Gaps): la **cita única en spotlight** (grande, centrada, logo+avatar+autor) — la variante modal del dossier, el grid es minoría. Otra disposición → candidato a hermano `testimonial-spotlight`. Demo (`web/routes/blocks/testimonials/`): full-bleed + ruta `preview`, cinco citas con avatares de iniciales en cinco colores distintos. Verificado en claro/oscuro × LTR/RTL, caras alineadas al fondo. `blocks:check` verde (6 blocks) · `svelte-check` sin errores propios. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	3 months ago
dev	594e5a5db4	feat(blocks): F2.4 `pricing` — el primer compound CON CONTEXTO del tier ... La sección de planes: un toggle de periodo sobre una fila de planes, uno destacado. Es el primer block cuyas partes se COORDINAN de verdad (no solo se repiten como en feature-grid/split): el `Switch` escribe el periodo de facturación y cada `PlanPrice` lo lee. Esa coordinación es lo que gana un contexto compartido — la forma más fuerte de compound. `<Pricing bind:period>` + `.Header` + `.Switch` + `.Plans` + `.Plan`(featured, badge) + `.PlanName`/`.PlanDescription`/`.PlanPrice`/`.PlanFeatures`/ `.PlanFeature`/`.PlanAction`. - **Contexto reactivo** (`context.ts`): la raíz provee el periodo como getter sobre un `$bindable`; el `Switch` (un `ToggleGroup`) lo escribe, el `PlanPrice` lo lee y muestra el snippet `monthly` o `annual`. Mismo patrón que `CardGroup`. `period` es bindable por si la app quiere observarlo. - **El block NUNCA formatea moneda**: la app compone `FormatNumber` dentro de los snippets de precio (B-7). El block posee el switch, no el dinero. - `.PlanAction` fija el CTA al borde inferior de la tarjeta (`margin-block-start: auto`) para que una fila de planes alinee sus botones aunque tengan distinto nº de features; `.Plan` con `align="start"` deja los checks en columna limpia; `featured` da acento (borde primary) + elevación. Demo (`web/routes/blocks/pricing/`): full-bleed + ruta `preview`, tres planes (Pro destacado en el centro) con el toggle mensual/anual vivo. Hueco a decisión del usuario (Gaps del block): la **tabla de comparación** (features × planes) — la brecha recurrente del dossier en pricing. Es una tabla, no una fila de tarjetas: candidato a hermano `pricing-table`. Presentado, no resuelto. Verificado en navegador: el toggle cambia los TRES precios a la vez (0/29/99 → 0/23/79), tarjetas de igual alto con CTAs alineados, featured con acento, en claro/oscuro × LTR/RTL. `blocks:check` verde (5 blocks) · `svelte-check` sin errores propios. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	3 months ago
dev	08ea82d128	feat(blocks): F2.3b `feature-split` — la brecha nº1 del dossier, con Mockup ... La sección que las 5 refs shippean y que va justo tras el hero: una afirmación de producto junto a un screenshot, alternando lados fila a fila. Otra disposición que la rejilla de iconos de `feature-grid`, así que block hermano (decisión del usuario), no una variante turbia dentro de aquél. Compound —la `.Row` se repite—: `<FeatureSplit>` + `.Row` (`reversed`, slot `media`) + `.Eyebrow` + `.Title` + `.Text` + `.Features`/`.Feature` (checklist) + `.Actions`. El block coloca; la app pone la copy y la media. - `reversed` mueve la media al lado de inicio vía `grid-column` (Box expone `gridColumn`/`order`), dejando la copy SIEMPRE primera en el DOM — el orden de lectura y el foco no cambian aunque el screenshot salte de lado. - El check de cada `.Feature` es decorativo (`aria-hidden`): la palabra lleva el significado. - La media se COMPONE con el primitivo `Mockup`: la demo enseña cromo de navegador (dashboard) y de teléfono (app), cerrando el hueco de «tratamiento de media» del dossier de raíz en vez de falsearlo. `.Row` usa un tipo limpio (no `HTMLAttributes`) porque su slot `media` colisiona con el atributo HTML homónimo; el resto de sub-partes extienden los props del componente canon que envuelven (lección de feature-grid). Demo (`web/routes/blocks/feature-split/`): full-bleed + ruta `preview`, con control del nº de filas y del lado inicial; 3 filas con Mockup navegador/teléfono. Verificado en navegador (Playwright, módulos frescos): filas alternas en claro/oscuro × LTR/RTL, `reversed`, el orden de lectura copy-primero, y los dos cromos de Mockup. `blocks:check` verde (4 blocks) · `svelte-check` sin errores propios. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	3 months ago
dev	d01b3e6af5	feat(blocks): F2.3 `feature-grid` — el primer block compound del tier ... `<FeatureGrid>` + `.Header` + `.Items` + `.Item` + `.ItemIcon`/`.ItemTitle`/ `.ItemText`: una cabecera sobre una rejilla responsive de features (icono · título · texto). Es la sección que responde «qué hace», la nº1 tras el hero. Primer block COMPOUND del tier, y aplica la regla de forma que fijamos: el `.Item` se REPITE (el app mapea sobre N features) → gana sub-componentes, donde `hero`/`site-header` usan slots de snippet (partes fijas de layout). Las partes no coordinan —sin contexto ni estado entre ellas—: la rejilla es del padre, las celdas del app. `.Items` es el envoltorio honesto de la rejilla (`AutoGrid`), que deja la cabecera fuera sin un `grid-column: 1/-1` a pelo. - El block coloca (Section · Container · AutoGrid · Surface · Heading · Text); el app pone todo el contenido por children (B-7). - `.Items` fluido por `minChildWidth` (tantas columnas como quepan) o `columns` fijas; `.Item` `align` start/center; `.ItemIcon` chip `Surface`; `.ItemTitle` `Heading` h3; `.ItemText` `Text` apagado. - `align` de sección (center/start) coloca la cabecera coherente con las columnas. Dos cosas encontradas al construir, resueltas: - **Los sub-componentes de bloque extienden los props del componente canon que envuelven** (`BoxProps`, `StackProps`, `HeadingProps`…), **no `HTMLAttributes`**: el `style: string|null` del atributo HTML crudo choca con el `style: string` del canon al hacer spread (+ "union type too complex"). - **`.ItemIcon` por defecto `solid`, no `soft`**: el soft-primary en claro es casi blanco (oklch 0.99) → el chip era invisible; solid da el chip con glifo on-solid (la tinta de contraste la pone `Surface`). Demo (`web/routes/blocks/feature-grid/`): full-bleed + ruta `preview`, con control de columnas (fluido/2/3/4), align, nº de items y dir; 6 features con iconos del canon. Hueco a decisión del usuario (en los Gaps del block): el **feature-split/ alternante** (texto junto a un screenshot, lados alternos) — la brecha nº1 del dossier — es otra disposición (filas de 2 columnas, no rejilla de iconos): probablemente un block hermano `feature-split`. Presentado, no resuelto. Verificado en navegador (Playwright, módulos frescos): center/start × claro/ oscuro × LTR/RTL, columnas fluidas y fijas, 3/4/6 items, chips visibles. `blocks:check` verde (3 blocks) · `svelte-check` sin errores propios. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	3 months ago
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