62 Commits (3bf7930baa3ae26ccb38e7f33d3fb488df73f06a)

Author	SHA1	Message	Date
dev	ffa45726fd	feat(color)!: una palabra, un significado - primary/secondary son SIEMPRE jerarquia ... La homonimia muere: `primary`/`secondary` significan JERARQUIA DE MARCA en el catalogo ENTERO, tambien dentro de los seis primitivos de tinta (text, heading, display, code, label, s-text). El paso de tinta del 82 % se llama `subtle` - PROP y TOKEN, sin excepcion: el nombre es el contrato en el artefacto (la misma ley que la FIRMA B' y la 12.9; se rechazo por escrito la via "solo el prop con tabla de traduccion" - las excepciones legitimas son las FIRMADAS con razon, no las inventadas al decidir para abaratar). - Los seis CONTENT_INK, IDENTICOS: {subtle, muted, disabled, on-solid}; el nivel-1 es el DEFAULT sin prop. `label` gana `on-solid` (cierra la divergencia de familia registrada en e4fa616e5). - Renombre completo: --color-content-secondary -> --color-content-subtle y la clave de config content.secondary -> content.subtle (RUPTURA de API de tema). 355 referencias por patrones acotados; la raiz SIN prefijo (cssVar('color-content-secondary'), render-css.ts) incluida; en grafito.ts conviven tres claves `subtle` (content/border/shadow) y solo cambio content. El generado, reproducido BYTE A BYTE aplicando solo el renombre al anterior. - Codemod value-preserving: 11 call sites (6 secondary->subtle incl. expresiones y ternarias; 5 primary->fuera, incl. TRES defaults de prop) con la condicion ROJA caracterizada (--style-caption-color es el UNICO estilo cuya tinta default no es primary; los 5 sitios caen en ramas body). alpha/ (untracked, TERMINATED) fuera. - Las 6 demos migradas al vocabulario nuevo (s-text: CERO cambios, no tiene lista de tinta); label arranca en el default y pinta IDENTICO (contrafactual medido: el estado viejo habria pintado el morado de marca). - Neutra en pixel, MEDIDO: nivel 1 ESTRICTO CERO en 71.200 valores (blocks enteros, s-text entero, subarboles data-*); nivel 2: 31 diffs, todos trazados a las ediciones firmadas del harness (anchos de chips, reindexado de la lista de label con las tintas supervivientes byte a byte). Total 171.712 valores + 59.072 de re-corridas a 0 de ruido. - Guards: CONTENT_INK identicos entre los seis y sin nombres de rol (mutacion: muerde), y el generado sin rastro del token viejo con las 6 definiciones del nuevo. Dos cronicas fechadas en docs/old-deprecated, intactas a proposito. - Docs: changelog 54 - reference (eje de tinta) - next-features 13 (divergencia de label RESUELTA). Supervision: verificador independiente pre-firma (dos claims MURIERON en verificacion antes de tocar codigo), tres agentes en fases (censo+baseline -> implementacion+codemod -> demos -> verificacion de dos niveles -> docs). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2 months ago
dev	18165e74ed	uix(blocks-demos): la vista previa nace con el estado vivo de ActiveUix, no con los defaults ... El iframe de la vista previa es OTRO documento con OTRO runtime (BootUix corre su propio createActiveUix), así que el estado de la sección no cruza el marco: la rama de 375/768 se abría SIEMPRE en claro, y en 9 demos siempre en LTR, con la topbar en oscuro y RTL delante (A-29). Dentro del documento los blocks siempre atendieron a ActiveUix — el shell conduce el framework por uix.prefs.setIntent y el modeSource de eidos —; lo que faltaba era la única serialización que existe entre dos runtimes: la URL. El arreglo va en el ARNÉS, no demo a demo. BlockDemo lee el estado VIVO por la superficie sancionada del framework — readActiveUixPrefsSlot(uix.prefs, 'direction'|'language')?.get(), las lecturas por dimensión que son rune-backed (contador $state por dimensión), y eidos.getThemeContext().mode, que lee el modeSource del shell — y compone la URL final: los props del BLOCK los pone el demo, los EJES los pone el arnés. El {#key} y el enlace «abrir ↗» pasan a la URL resuelta, así que mover un toggle global re-monta el iframe con los params nuevos y el enlace abre lo que estás viendo. Retirados los 11 controles «dir (solo la vista previa)» de banner, contact, cta, feature-grid, feature-split, hero, newsletter, site-footer, site-header, stats-band y team: eran el eje de sección repetido por demo — la regla del arnés dice que tema, idioma y dirección los da el shell — y no tocaban prefs, sólo escribían la URL. El shell queda como único dueño de los ejes; una precedencia demo-gana habría dejado el toggle global inerte en esas páginas. Dos correcciones a la ficha: testimonials ya derivaba su URL (el literal desnudo quedó atrás en F2b), y el alcance real era el sistémico que la propia ficha apuntaba — mode= no viajaba en NINGUNO de los 19 demos y dir= faltaba en 9. La pata lang sigue siendo inerte salvo en contact (blocks.* registrado), pero viaja igual: es un eje del shell. Verificado con la topbar REAL de la sección, no con params a mano: en oscuro + RTL, el iframe de pricing a 375 arranca base-dark + dir=rtl (tinta oklch(0.9491 0 0)) y el de hero — que tenía control local — hereda igual; en el estado por defecto los dos vuelven a base-light + ltr. La URL sale con los props del block primero y mode/dir/lang detrás. Gates: svelte-check 72/62 antes y después · blocks:check 0/19 · docs:check 0/0. Huella: BlockDemo +31, cada demo −18 (−192/+39 en total). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2 months ago
dev	48bad6c726	uix(feature-split): una sección se nombra por su encabezado, y sus filas cuelgan de él ... feature-split era el único block de sección del tier sin parte .Header. Sus filas emitían h2 por defecto, así que una sección de tres filas aportaba tres h2 hermanos al outline y la sección misma no tenía nombre (A-110). La página compuesta lo rodeaba a mano: encabezado escrito como primer hijo y un level={3} repetido fila a fila. El h2 de las filas no era un descuido: era una decisión ESCRITA en el README del block —«.Title emits h2 by default (each row is a section-level statement of its own)… drop it to 3 when the page already put an h2 above the rows»—. Se deroga en sitio, y no por gusto sino porque el resto del tier declara lo contrario: FeatureGrid.ItemTitle, las preguntas de faq y Pricing.PlanName ponen en level 3 lo que se repite, y el h2 lo lleva el Header. Nace FeatureSplit.Header, calcado de Testimonials.Header (Box con medida + Motion + Stack) y sin contexto, porque este block no tiene eje align que heredar. Y .Title baja su default de 2 a 3. La forma queda coherente en los dos casos, que es lo que la hace preferible a las alternativas: con .Header el h2 es suyo y las filas cuelgan; sin .Header la app ya puso el h2 encima y las filas cuelgan igual. La tercera vía —un contexto donde el Header marcase su presencia y el Title derivara su nivel— daba el mismo resultado a cambio de un hijo escribiendo en el contexto del padre, que es el patrón que ya costó un bucle de $effect en este repo. Por un solo bit, no compensa. Verificado en navegador, outline leído del DOM: /blocks/feature-split/preview h2 «Del evento crudo a la decisión» h3 ×3 (las filas) ← antes: h2 ×3, sin nombre /blocks/landing h2 + h3 ×2, dentro de un outline de página que ya no salta de nivel La demo compone su encabezado y LandingSite deja de hacerlo a mano: fuera el Stack escrito a pelo y fuera los dos level={3}. Header medido en su sitio (x 144, 768 de ancho: la misma medida que la copia de las filas). Gates: svelte-check 72/62 antes y después · vitest src/uix/blocks 36/36 · blocks:check verde (19 blocks, 147 ficheros) · docs:check 0/0. Primera fila del ledger arreglada DENTRO del tier, por acotación del eje: las tres anteriores de la sesión (A-111, A-112, A-109) eran todas de canon. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	1e3a67ad39	uix(banner): la tira de aviso no es la cabecera del sitio, así que deja de reclamar su landmark ... Toda página con cabecera exponía DOS landmarks banner: el <header> del site-header y la tira de aviso, que estampaba role="banner" a mano. ARIA reserva ese rol para la cabecera DEL SITIO —identidad, búsqueda del sitio— y dice que un documento debería marcar como mucho uno (A-109). Las dos salidas que la ficha proponía estaban mal planteadas, y lo destapó una revisión adversarial de tres refutadores independientes: - «Estampar el rol ANTES de los rest props, que es la clase naming donde gana el consumidor» contradice la doctrina que la propia ficha citaba: role es clase CONTRATO por nombre de atributo (morfo/types.ts:811-832; ARIA_NAMING_ATTRS contiene sólo aria-label). El runtime siempre gana ahí, y con razón: un data-state o un role pisables son un componente que miente. - Y el orden de estampado NUNCA fue el mecanismo. Medido: el segundo landmark es el <header> del site-header, que no lleva atributo role ninguno — recibe banner IMPLÍCITO por ser una <header> fuera de un elemento de sección. Un rol pisable habría dejado quitarlo caso por caso, empujando el arreglo a cada app, en vez de arreglarlo por defecto. - El morfo, además, nunca declaró el rol (aria: []): era un literal del wrapper de eidos que el README daba por contrato de la parte. Drift morfo↔eidos que se queda sin objeto. Lo firmado: la tira deja de reclamar el landmark. defaultElement header→section en el morfo, fuera el role literal. Un <section> es region SÓLO cuando tiene nombre, así que el aria-label del consumidor la hace encontrable y su ausencia la deja como contenido plano — que es exactamente lo que el censo de landmarks de A-111 ya sancionaba por escrito. ⚠️ SIN nombre por defecto, y esta es la corrección que la revisión me obligó a hacer sobre mi propia propuesta: yo había planteado un default traducido («Aviso»), copiando el patrón de skeleton/spinner. Habría convertido TODA tira en landmark sin salida — /temas/grafito apila cuatro y habrían salido cuatro region con el mismo nombre, que es la clase de defecto de A-111 con otro traje. El precedente de <nav> no transfiere: un <nav> es SIEMPRE landmark y por eso pide nombre; un <section> lo es PORQUE lo tiene. Quien quiera una tira encontrable, la nombra. Derogadas por escrito las dos afirmaciones que decían lo contrario, porque existían y estaban firmadas: el README del canon («Banner is a landmark for page-level announcements — site header, persistent notice, system status bar») y el «✓ ejemplar» que docs/audit/components/banner.md le puso a ese contrato el 2026-07-07. La otra mitad de aquella decisión —no role="alert", el feedback transitorio es de Toast— sigue en pie y se dice. Verificado con el árbol AX de Chrome por CDP, servidor limpio: /blocks/landing banner ['Aviso del producto','Acme'] → banner ['Acme'] + region ['Aviso del producto'] /blocks/banner/preview banner ['Principal'] · region ['Aviso del producto'] /temas/grafito banner [] · region [] — las cuatro tiras sin nombre dejan de ser landmarks, que es lo correcto Píxel idéntico: la receta selecciona [data-banner], no el elemento — tira a sangre 1280×54 con el mismo fondo, capturada y mirada. Ningún test, guard, CSS ni consulta del repo seleccionaba por role=banner ni por el tag. Gates: svelte-check 72/62 antes y después · vitest eidos+blocks+morfo 692/693 (el rojo es skin-media-player, ajeno y documentado) · blocks:check 0/19 · docs:check 0/0 (644) · morfo:check PASS en banner. Prosa re-sincronizada en 11 sitios: los README de canon, block y app-shell, la ficha de auditoría, las tres demos, landing y su README. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	aced677a15	uix(toolbar): la acción principal de un cluster ya puede decir su rango — y el gesto ya suena ... `Toolbar.Button` tipaba contra el ButtonProps de SOMA ({id, disabled}): sin variant, sin color, sin size. Un cluster de acciones donde UNA es la principal no tenía cómo decirlo desde dentro, y la demo del app-shell dejaba «Nueva» FUERA del toolbar como workaround documentado (A-112). La ficha ofrecía dos salidas y mi primera recomendación fue la equivocada — declarar el toolbar deliberadamente uniforme y consagrar el workaround. El autor la tumbó, con razón: el eidos toolbar-button.svelte era un PASSTHROUGH que dejaba el <button> nativo de soma, exactamente la clase de bug que dialog-trigger (2026-06-19) y card-group-title (2026-06-27) ya pagaron, y el precedente correcto no es menubar-trigger sino Form.Submit. Dos datos que el primer análisis no tenía: - El botón era MUDO. El morfo del toolbar sólo declara commit-toggle (el group-item), así que pulsar una acción no emitía nada. Medido tras el cambio: click → contact-activate estampado en el nodo + 8 nodos de audio, donde antes 0. - La uniformidad la dan los DEFAULTS, no la ausencia del eje: ghost/neutral y el size del toolbar por contexto de eidos (toolbar/context.ts, calcado del precedente ButtonGroup y con su misma razón: la receta del Button lee data-size EN el nodo, un descendant selector no llega). El tipo estrecha a SelectionVariant (solid | outline | ghost). La forma es el Button consumer pattern entero: composición vía child de soma (con el rename outerChild contra la recursión), y la receta CEDE el nodo — cero cromo de botón en toolbar.css (regla 5); Link y GroupItem siguen siendo superficie de la barra y los pinta ella. Antes de ceder, las dos recetas sobre un mismo nodo producían un híbrido medido en el que solid/primary NO pintaba. La doctrina que faltaba queda escrita en guides/component-guide.md §4: dos clases de parte con forma de botón en una barra. ACCIÓN en barra (Toolbar. Button, Form.Submit, Dialog.Trigger) compone el Button; control de SUPERFICIE de barra (Menubar.Trigger: File, Edit) lo pinta la barra. El test: ¿significa lo mismo fuera de la barra? Esa distinción vivía en un comentario de menubar-trigger; el comentario ahora apunta a la doctrina. Verificado en navegador (Playwright, servidor limpio): el nodo ES el Button del canon (data-button + data-variant), solid/primary pinta (fondo primary, tinta blanca), paridad exacta con el GroupItem por construcción — mismo bundle --size-*: 36px/36px en md, 30px/30px en sm, con la herencia del size del toolbar medida en vivo al cambiarlo. La demo del app-shell mueve «Nueva» AL INTERIOR del cluster (workaround retirado, gap del block cerrado en su README) y la demo del toolbar gana la acción «New» con controles vivos action variant / action color. Gates: svelte-check 72/62 (base 73/62, sin regresión) · vitest eidos+blocks 470/471 (el rojo es skin-media-player, ajeno y documentado en el handoff) · blocks:check 0 errores / 19 blocks · docs:check 0/0. Los avisos de prettier de los dos README ya fallaban en HEAD. ⚠️ El árbol compartido tiene ya encima trabajo NUEVO de otra sesión (navigation-menu, PLAN-sidebar, book-deviations): este commit lleva sólo los 14 ficheros del eje A-112, verificados por lista. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2 months ago
dev	edf0639eea	blocks(app-shell): la barra y el raíl no son la misma navegación en dos tamaños, son dos ÁMBITOS ... Corrección del autor, y era una equivocación de fondo, no de forma. Yo había escrito que un menú en la barra sería «una segunda navegación dentro de un shell cuya navegación es el raíl». Es al revés: - la BARRA lleva la APLICACIÓN — su menú general, las áreas que tiene, y lo que es de la persona y no de la página (buscar, avisos, la cuenta). No cambia cuando el lector se mueve dentro de un contexto; - el RAÍL lleva el CONTEXTO en el que está — este proyecto, esta tabla: sus secciones y sus acciones. Cambias de contexto y el raíl entero cambia; la barra no se mueve. Es el `TopNav` + `SideNav` de Atlassian y el `TopBar` + `Navigation` de Polaris, que estaban en mi propio dossier. Y es también por qué una app publica DOS landmarks `navigation` legítimamente: la APG pide nombre único en los repetidos, y cada uno nombra un ámbito distinto. La demo modelaba mal: el raíl era el menú general. Ahora la barra lleva marca + `NavigationMenu` de la aplicación (Bandeja · Proyectos · Informes) y el raíl es el proyecto Apollo (Tablero · Conversaciones · Archivos + sus Acciones). El rastro se va con ella: su sitio es la cabecera de la PÁGINA, no la barra — cambia con cada vista mientras la barra no, y una barra que lo lleva crece una segunda fila en cuanto la ruta tiene tres niveles, que es lo que se midió antes de moverlo. De `site-header` se queda sólo la razón que era cierta: no es que sobre una navegación, es que la pieza es de un SITIO — `Sticky` por defecto (una barra de app bajo `scroll="main"` no debe pegarse) y `Container` MEDIDA (una barra de app va de borde a borde). Su forma marca · nav · acciones es la correcta. **Y un defecto de canon que sólo aparece con dos navegaciones**: `NavigationMenu` deja su landmark ANÓNIMO — el `aria-label` se reenvía al `<ul>` y el `<nav>` se queda sin nombre (el morfo lo declara así: «the root delegates its name to the list it wraps»). Un `<ul>` no es un landmark. Medido: `navigation: ['Navegación principal', null, 'Migas de pan']`. No se arregla desde fuera —nombrar la lista no nombra la región, y envolver en otro `<nav>` anidaría landmarks—, así que queda VISIBLE y registrado en los Gaps. Guards: `blocks:check` verde · `docs:check` 0/0 · `svelte-check` sin errores propios (de paso, `NavigationMenu.Item` exige `value` y no se lo pasaba). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	db7bcc3a55	blocks(hero): la mitad de escritorio no se oculta en el móvil, no existe — y el clip no se pide ... F4 del eje de visibilidad por breakpoint: el primer caso real, y la receta escrita donde un agente la va a buscar — el README del block que la usa. Medido sobre build de PRODUCCIÓN (`build` + `vite preview`, Chrome), que es el único sitio donde la afirmación es comprobable: a 375, cero `<video>` en el DOM y NINGUNA petición de `video.mp4`; a 1280, uno y una (`206 Partial Content`). En dev es falsa por construcción — el servidor renderiza a ancho 0 y sirve la variante `base` antes de que la hidratación la pode. Dos criterios que la receta fija para el tier. La puerta va DENTRO del snippet, nunca alrededor del `<Hero>`: envolver el block duplicaría título, copy, formulario y acciones por breakpoint, que es lo que hacen las secciones por-breakpoint de Framer y la razón de que deriven; la media es lo único que difiere, así que es lo único escrito dos veces. Y `display="contents"`: una puerta decide presencia, no añade geometría. La mitad móvil no es un vídeo más ligero: es NINGÚN vídeo. El Surface con aurora cuesta cero bytes y sigue la paleta del tema. ⚠️ Hallazgo del canon, medido de paso y NO arreglado aquí: la media dentro de un `Background.Layer` desborda la capa — el mínimo automático del ítem de rejilla gana a `block-size: 100%`. Hero a 1280: capa 567px, vídeo 714px. En la demo del propio canon con `Background.Video`: capa 288px, vídeo 435px. `min-block-size: 0` lo colapsa exacto en ambos. `overflow: clip` lo escondía, así que `cover` lleva recortando descentrado sin que se viera. Es del eje `background`, cerrado el 2026-08-18: queda escrito en §Found while composing. `launch.json` gana `preview-prod`: la entrada llamada `preview` arranca `npm run dev`, así que no servía el build y la medida no se podía hacer. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	1d91c11e89	blocks(app-shell): la demo no usaba los componentes que SIGNIFICAN lo que enseñaba ... Rehecha entera. Cada pieza es ahora el componente del canon que corresponde al acto, no una caja con el aspecto adecuado: - las tres cifras son `Metrics` (label · value · delta), con la dirección desacoplada de la valencia: en «sin asignar», BAJAR es bueno (`goodTrend`), que es justo lo que las referencias hacen mal; - la bandeja y la actividad son `Feed` — `role="feed"`, cada conversación un `role="article"` con `aria-posinset/setsize` y su título con `aria-level`, teclado de feed incluido. Medido: 2 feeds, 11 artículos, 11 encabezados; - la barra superior es `Toolbar` (`role="toolbar"`, roving tabindex: cinco controles cuestan UNA parada de tabulación) más `Breadcrumb` con `current`; - la tipografía sale de los estilos SEMÁNTICOS del tema — `Text style="label|caption|body"`, `Heading level` + `style` — en vez de tamaños elegidos a ojo, que es lo que había. **Y la avería que esto destapó, que era del arnés y afectaba a los 19 previews**: la foundation declara los `@font-face` y emite los estilos (`--style-body-*`…) pero no los aplica a ningún elemento — un `Text` ancla su familia en su recipe y todo lo demás HEREDA del documento. El arnés de blocks no anclaba nada, así que `html`, `body`, `[data-sidebar]` y cada fila del raíl computaban **Times New Roman** al lado de los `Text` en Instrument Sans. El shell de docs sí lo ancla (`uix.css`); éste no. Anclado en `_lib/reset.css` con los tokens del tema, no con una familia escrita. De paso, el sangrado de 40px que el navegador pone a `dd`. Tres huecos del canon que salieron al componer, registrados en los Gaps: 1. **`Sidebar.MenuButton` es mudo y `NavigationMenu.Link` no** — el mismo acto con dos respuestas. El README del `Sidebar` firma que «navegar una fila es nativo y no suena», pero entonces el `NavigationMenu` contradice la firma; y en un shell la fila casi nunca navega: SELECCIONA la sección. Es de sema, no del tier. 2. **`Toolbar.Button` no acepta `variant`/`color`** — tipa contra el `ButtonProps` de soma (`{id, disabled}`), así que un cluster no puede decir cuál es su acción principal. Aquí va al lado, como en las referencias. 3. **No existe `description-list`** y el panel de detalle es exactamente el «primer detail-view real» que su ficha F5 pone como disparador. Guards: `blocks:check` verde · `docs:check` 0/0 · `svelte-check` sin errores propios (dos props inexistentes corregidas de paso: `Icon.Filter` y el `variant` del `Toolbar.Button`). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	026e07beaa	blocks(app-shell): la demo estaba escrita a mano, no con la capa visual ... La escribí sin haber leído la doctrina de eidos y salió lo que sale así: `<div style>` donde hay primitivos, `inline-size: 16rem` clavado, `font-size` en un `<strong>`, bordes y fondos a pelo, y contenido de relleno («Bloque de contenido 1»). Rehecha contra la tabla «Build contract» de `guides/component-guide.md`. Ahora **cero literales y cero `style=`** en el fichero: color por token de rol, espaciado por `--space-*` a través de los props de layout, tipografía por la escala de `Text`/`Heading`, paneles por `Card`, separaciones por `Separator`, anchura del aside por `--sidebar-width` (la medida del propio sistema, que respeta densidad y `--scaling`). Dos props que no hacían NADA, encontradas al reescribir: - `Badge intent="affirm"` — `Badge` no tiene `intent`, tiene `color`. - `AutoGrid minChildWidth="var(--container-width-sm)"` — le pasé un breakpoint como suelo de pista, así que las tres tarjetas caían en una columna. Ahora `Grid columns={{ base: 1, sm: 3 }}`, sin literal ninguno. Y una tercera cosa medida que NO se arregla desde aquí: el aside llevaba `Surface variant="soft"` y es **inerte** — `oklch(0.9911 0 0)` contra un fondo de página de la misma claridad, o sea invisible en claro. Es **F15** de `PLAN-blocks-quality.md` §6, gap de canon ya registrado («soft no acota un panel, y Surface no tiene borde»). La frontera la pone un `Separator`, que es lo que sí acota, y el porqué queda escrito en el fichero para que nadie lo «arregle» con un fondo a mano. Verificado mirando las capturas, claro y oscuro, 1280 y 375. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	6a53c3dc99	blocks(app-shell): la pieza que posee las alturas de la página, y por eso el aviso deja de tapar la cabecera ... F3.1 del tier, con su fase 0 firmada delante. El block que faltaba: el que POSEE las regiones de una página de aplicación — sus landmarks, sus enlaces de salto y sus alturas. **A-95 se cierra por construcción, no compensando.** Bajo `scroll="main"` no hay nada fijo: el aviso es una fila, el cromo es una fila y la página es la fila que se desplaza. Medido con la tira puesta: aviso [0,54], cabecera [54,85], **solape 0**, y el hit-test en el centro de la cabecera cae en la cabecera (antes: 49px de solape y el clic en la tira). El eje `scroll` es el que Mantine expone como `mode` y Atlassian como `isFixed` por slot; `body` existe porque `docs-shell` lo necesitará para anclas y TOC. Compone `Sidebar` (sus tres colapsos, su drawer móvil, sus dos landmarks), `SkipLink`, `Sticky`, `Grid`/`Flex`/`Box`. Sin `.css`. Coordina tres booleanos (`navOpen · asideOpen · mobile`) por contexto, sin máquina y sin palabras: nada en un shell puede bloquearse, así que no hay frase que decir. Medido en navegador (Playwright; 1280 y 375, claro y oscuro, LTR y RTL): - landmarks por construcción — 1 banner · 1 main · 2 navigation NOMBRADOS · 2 complementary NOMBRADOS · 1 contentinfo; encabezados 1-2-2-2-2 sin saltos. - `scroll="main"`: documento 720 = viewport, el main scrollea dentro y la cabecera se queda en 0 tras desplazar 900px. `scroll="body"`: el documento scrollea y la cabecera SE PEGA (top 0 a 900px de scroll). - teclado: los tres enlaces de salto son las tres primeras paradas y Enter deja el foco en el `<main>`. - 375: el raíl es drawer, devuelve el foco al trigger con Escape, el aside se pliega y el documento no crece. RTL: sin desbordamiento horizontal, raíl a la derecha, aside a la izquierda. Cuatro averías que sólo aparecieron midiendo, y las cuatro son doctrina ahora: 1. `minHeight` es un SUELO, no un techo: con `100dvh` ahí el documento crecía con el contenido. Es `height`. 2. Un grid que sólo declara filas tiene UNA columna implícita `auto`, que se encoge a su contenido: la página salía en una tira de 32px al lado del raíl. 3. `Box` declara `flex-grow/shrink/basis`, así que pisa el `flex: 1 1 auto` de la receta del inset. Quien está más abajo en el árbol tiene que PEDIR crecer. 4. Un ancestro con `overflow` se lleva el `position: sticky` de dentro. El `overflow: auto` de `Sidebar.Inset` dejaba la barra sin pegar bajo `body` mientras `data-stuck` decía que sí — el atributo dando la razón a una página que no la tenía. Por eso el shell pone su propia caja: gap de canon anotado (el inset debería dejar elegir si es contenedor de scroll). **Y una avería del ARNÉS que este block destapó**: los 19 previews del tier llevaban los 8px de margen por defecto del navegador, así que ningún block se enseñaba a sangre — contra la regla dura del propio tier. Medido: `x: 8, y: 8, w: 1264` en 1280, la página compuesta incluida, cuyo README cita cifras a sangre. Invisible porque todos scrollean; deja de serlo con un shell que llena el viewport. Arreglado en el reset del arnés. De paso, en el canon `skip-link`: el enlace del panel complementario decía «Ir a la barra lateral», que es como todo el mundo llama al raíl de NAVEGACIÓN. En una página que tiene los dos, nombraba al que no era. Ahora «Ir al panel lateral». Guards: `blocks:check` verde con 19 blocks · `docs:check` 0/0 (638) · `svelte-check` 74, ninguno aquí. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	c786d0f804	blocks(landing): las piezas se prueban juntas, y ahí sale lo que ninguna enseñaba sola ... Cierra el tramo D y con él F2b entera. Una landing verosímil con 14 de los 18 blocks, a sangre y sin marco de demo, porque el claim del tier —que sus blocks ensamblan sin fricción— es indemostrable block a block: el outline de encabezados sólo existe cruzando secciones, dos landmarks sólo chocan cuando hay dos, y una costura vertical sólo aparece cuando algo se pone debajo. Lo que dice la medida: un h1 y 22 encabezados sin un solo salto de nivel; ningún landmark repetido sin nombre; 0px de hueco entre secciones vecinas —el aire es siempre el padding de cada Section, costuras de 112 a 192px—; cuatro de las cinco cascadas esperando a que su sección entre en viewport; un solo commit-submit en el formulario; setenta tabulaciones sin una trampa de foco y un drawer que a 375px devuelve el foco a su disparador. A-95 vuelve confirmado, ahora con cifras: con affix="top" la tira y la cabecera solapan 49px —la altura entera de la cabecera— y el hit-test en su centro cae en la tira, así que la navegación es inalcanzable. La pieza que falta sigue siendo app-shell. La página compone la tira en flujo, que es lo correcto, y deja el escenario del defecto detrás de ?banner=affix para poder medirlo en vez de citarlo. Un defecto arreglado, y era de los que importan: Newsletter.Reason medía 2,33:1 sobre el panel mientras la nota a su lado medía 8,5:1. Es la frase que explica por qué la acción está bloqueada —la que la doctrina de coordinación obliga a tener— y no se podía leer: la doctrina cumplida en la estructura y derrotada en la percepción. El block ya tenía el mecanismo y ya lo había escrito para su nota («más callado por TAMAÑO, no por tinta»); su razón no lo seguía. Ahora 8,83:1 sobre el panel, y muted fuera de él. Dos gaps nuevos, ninguno tocado aquí: los DOS landmarks banner —el canon estampa role="banner" DESPUÉS de sus rest props, así que nombrar ambos es todo lo que puede hacer la app, y esta página lo hace— y feature-split sin parte .Header, el único block de sección que no la tiene: sin ella emite tres h2 hermanos y la sección se queda sin nombre. El catálogo aprendió a publicar páginas: kind: 'page' en BlockEntry y el guard lo salta en las dos direcciones, con self-test propio probado por mutación. Y una lección de instrumento que costó un susto: una captura fullPage no hace scroll, así que toda cascada bajo el pliegue se queda en opacidad 0 y la imagen sale EN BLANCO. La primera medida dijo «la landing está vacía». Saltar de una vez al final del documento tampoco vale: las secciones pasan de debajo a encima en un frame y el observador nunca las ve entrar. Se recorre en pasos. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2 months ago
dev	dc7c4920d6	blocks(cookie-consent): la ley europea como tipo, y las dos salidas al mismo peso ... Cierra el tramo C de F2b. El único block cuya fase 0 fue jurídica antes que visual: las referencias shippean el aviso como markup, y el markup no puede impedir las tres cosas que lo vuelven ilegal — un rechazo debilitado, categorías premarcadas, y cerrar tratado como consentir. Aquí son el tipo y el constructor. `essential: true` hace inescribible una UI que ofrezca apagarlo; `initialConsent()` no admite semilla, así que una primera pregunta no puede llegar marcada; `onDecision` es obligatoria, así que un aviso que no informa de vuelta no se puede montar. Las cinco reglas están numeradas en consent.ts y afirmadas por 8 tests, porque son justo lo que un refactor rompe en silencio mientras todo sigue pintando bien. Desviación de la ficha, y a favor: UNA llamada requerida `onDecision(consent, via)` en vez de `onAcceptAll` + `onRejectAll`. Con dos callbacks el consumidor podía pasar un no-op a «rechazar»; aquí el camino de rechazo lo renderiza el block y el API no expone knob para degradarlo. Medido: las dos acciones tienen idéntico relleno, tinta, borde, tamaño, peso y alto — 5.96:1 en claro, 8.79:1 en oscuro. Tres cosas se arreglaron por mirar, no por deducir. La barra era un `Card` outline y midió 1.00:1 contra la página: se disolvía en ella, así que va al plano `overlay` del sistema, el mismo que estampa cada superficie flotante del canon. A 375 las tres acciones envolvían con «rechazar» en una fila y «aceptar» en la siguiente, leyéndose como dos botones ajenos justo donde la pareja más importa: ahora son un `Group`, y el markup lo dice. Y el panel devolvía el foco a un nodo muerto — se devuelve aquí, un frame después de que la trampa se desarme, con un pestillo para que el asentamiento del montaje no le robe el foco a nadie al cargar. Tres gaps de canon salieron al componerlo, todos en el README: `Button` acepta `ref` y no lo reenvía (forma de A-94), `Switch` no tiene parte de etiqueta, y el `Dialog` restaura el foco a un nodo muerto cuando su disparador se desmontó. El instrumento mintió antes que el código, otra vez: el pane del navegador no compone frames, así que la animación de salida no termina y un diálogo cerrado sigue pintado — el foco medido allí era ficción. Y `fillStyle` no normaliza oklch, así que todo color leído del estilo computado se volvió negro y dio 1.11:1 sobre texto perfectamente legible. Las cifras de esta ficha se miden por píxel, en Chrome real. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2 months ago
dev	313e4d52fa	blocks(article-grid): la banda editorial, y el elemento que el canon no podía dar ... Lo que las referencias llaman blog. Sus dos preguntas de fase cero quedan resueltas, y ninguna necesitó tocar el canon. El nombre. Blog nombra una sección entera de un sitio, y esto es la fila de artículos recientes dentro de otra página; el tier nombra por función de página y el elemento que renderiza es un article, así que article-grid hace coincidir nombre, función y markup. La palabra blog sobrevive donde un consumidor la busca: la primera línea del readme y la etiqueta del catálogo. El artículo semántico. Un teaser tiene que ser un article o se lee como una caja de texto suelto, pero la tarjeta del canon es un div fijo y eso parecía obligar a elegir entre añadirle un eje de elemento o declarar un hueco. Construirlo enseñó la tercera vía, que no cuesta nada: el bloque renderiza el article y compone la tarjeta dentro. El tier lleva desde su primer bloque renderizando sus propios elementos de seccionado, así que el elemento es del bloque y la superficie sigue siendo del canon. La regla amuralla al primitivo, no a la composición. Y tres decisiones más que sí son de diseño. La tarjeta entera no es un enlace, porque el teaser lleva además un chip y una firma y anidar interactivos dentro de un enlace es marcado inválido: es justo donde acaban las referencias que hacen clicable toda la tarjeta, así que el enlace vive en el título y hay exactamente uno por teaser. El realce al puntero viene encendido, al revés que en precios, porque un teaser sí es algo a lo que se va. Y el bloque no formatea fechas: las compone la app con el componente del canon. Dos errores míos en la tanda, los dos cazados mirando la captura y no la sonda. El ancho mínimo por defecto sólo cabía dos veces en la medida, cuando las referencias lideran con tres columnas; medido y corregido, ahora da tres, dos y una según el ancho. Y el segundo intento de arreglarlo no llegó a aplicarse sin que me diera cuenta, porque lancé el reemplazo sin aserción y el formateador había juntado las props en una línea: culpé a la caché del servidor antes de mirar el fichero. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	b7474e499d	blocks(logo-cloud): la banda de marcas vuelve, y su parte difícil no era la disposición ... Se difirió en F2 sobre una premisa que las referencias desmienten —que su versión honesta pedía un marquee o quedaba en un wrap trivial—: Tailwind Plus, Untitled y Flowbite lo shippean estático. Una decisión cuya premisa cae se corrige. Pero el argumento para construirlo no es la paridad. Lo difícil de un muro de logos es la tinta: veinte marcas en veinte paletas gritan sobre la página y entre ellas. Ese tratamiento acaba de entrar en la fundación como contexto, así que el bloque queda fino y es exactamente la forma correcta — cuando lo difícil es un tratamiento, el tratamiento va a la fundación y el bloque sólo lo estampa. Aquí no hay una línea de CSS, que es además lo que el contrato exige. Dos decisiones medidas, no elegidas. Las marcas van en un wrap y no en una rejilla, porque llegan con proporciones dispares y unas pistas iguales dejan huecos irregulares alrededor de las estrechas. Y la parte del ítem se gana su sitio defaulteando el eje de bloque, que es lo único que un logo nunca trae consigo: un vectorial carga su viewBox, un raster sus píxeles, y uno al lado del otro aterrizan a cinco alturas distintas. Verificado con ocho marcas de anchos y colores deliberadamente dispares: las ocho a una sola altura conservando sesenta y cuatro píxeles de diferencia de ancho, que es cada una guardando su proporción. El marquee se queda como hueco con disparador y con su forma decidida: si algún día entra será un preset de movimiento sobre la fila, no un bloque nuevo, y con la preferencia de movimiento reducido parándolo. Y el hueco de la utilidad para nombres sólo audibles sale aquí por tercera vez en la ola. Tres consumidores reales lo piden ya. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	00489be263	blocks(tramo B): las cinco primeras matrices de equivalencia ... El entregable central de la ola, y el que responde a la pregunta que la abrió: no competir en número de dumps, sino demostrar variante a variante qué composición nuestra logra cada una de las suyas — y sacar a la luz, con nombre, lo que no alcanzamos. Cada block gana una sección de equivalencias con cinco columnas: la variante de la referencia, quién la shippea, la receta exacta, dónde se ha visto, y su estado. La regla que gobierna la tabla es que una receta que no se ha visto en el navegador no entra: la columna de demostración es la prueba, no la promesa. Y la primera tabla ya justificó el tramo. El hero declaraba desde julio, en sus gaps, que el mockup de móvil estaba HECHO — y la demo sólo había enseñado nunca el cromo de navegador. El primitivo ofrece tres, así que se añadió el control, se midió el cromo de teléfono a trescientos veinte y sólo entonces se escribió la fila. Una receta declarada no es una receta demostrada, que es exactamente lo que este tramo existe para separar. Van cinco de quince: hero, pricing, cta, testimonials y faq, que son los que esta sesión ha trabajado y cuyas recetas están medidas. Entre las filas quedan nueve gaps con nombre —desde la elevación estática que Card no tiene hasta el carrusel de citas— y dos «no se ofrece» con su motivo: un carrusel en la apertura es movimiento automático sin control de pausa, y filtrar preguntas es estado de datos del app. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	e7677d6d87	blocks(pricing): la tabla de comparación, y las palabras que una marca no dice ... La brecha recurrente del dossier en pricing, y la última fila del primer tramo de la ola. Es una PARTE y no un hermano porque tiene que obedecer al periodo de la sección, y sólo una parte puede leer ese contexto: B-10 le prohíbe a un hermano importar el block que lo posee. Vivir dentro de la sección es además lo que permite que la app meta el precio en una celda y cambie con el conmutador, sin que esta página cablee nada. La app construye la tabla y el block la compone. B-5 admite datos justo donde el canon compuesto ya es data-driven, y la tabla del canon lo es: exige la instancia que devuelve createTable. Así que la parte no inventa un formato de matriz propio ni traduce nada de ida y vuelta, que es el acoplamiento que esa regla existe para evitar. Las tarjetas y la tabla conviven, como en las referencias, alimentadas por el mismo array de planes. Dos cosas que el plan había esbozado y que construirlas demostró equivocadas, y quedan escritas en vez de calladas. No hay un Record de ejes visuales por plan: acentuar una columna es componer canon, que es justo lo que ya permite el snippet de cabecera, y ese Record habría sido una segunda fuente de lo que la app declara en su plan. Y el block no fija la columna: el motor es del app, y meter mano ahí sería el block decidiendo cómo se comporta la tabla de otro. Lo que sí posee es lo que la app no puede: el nombre accesible de la tabla y las palabras que una marca de visto o de guion no dice en voz alta. Ese glifo lleva todo el significado de la celda y es silencio para un lector de pantalla, así que va oculto y la frase viaja en su etiqueta, desde un mapa exhaustivo con respaldo en inglés y su test en las dos direcciones. Y absorbe el cast del canon siendo genérico: la tabla tipa su ranura sin parámetro mientras el motor sí lo devuelve, así que todo consumidor castea, empezando por la demo del propio componente. Aquí se castea una vez a la entrada y se deshace a la salida, para que el snippet de celda devuelva la fila con la forma del app. Medido a 1280 y 375: ocho filas por cuatro columnas, tabla nombrada, marcas que se anuncian, y en móvil la tabla desplaza con la columna de características quieta y la última columna alcanzable. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	f4ce006423	blocks(faq): la lista estática, y un tipo que deja de prometer lo que no da ... La brecha del dossier para este block, y la mayoría del formato: seis de siete en Tailwind Plus no son acordeón, sino una rejilla de preguntas y respuestas siempre abiertas. El eje vive en la LISTA, no en la raíz. Primero porque la lista es lo único que cambia —la cabecera se lee igual—, y segundo porque esa colocación es la que permite que el tipo diga la verdad: pasa a ser una unión discriminada. Bajo acordeón atraviesa toda la superficie del Accordion del canon; bajo lista no se ofrece ninguna de esas props, porque una rejilla estática no tiene estado abierto que enlazar, nada que colapsar ni modo simple o múltiple. Ofrecer una superficie y descartarla en silencio es justo lo que A-94 dejó dicho que no se hace, y aquí es donde iba a morder después. El ítem lee la disposición del contexto: no puede discriminar sobre la unión de la lista sin obligar a la app a repetir el arreglo en cada pregunta. Su value y su disabled quedan documentados como del acordeón, la misma convención que el fondo del hero y la media del cta. Y bajo lista la pregunta es un encabezado de verdad, porque ahí ES el encabezado de su respuesta; bajo acordeón el canon la mete dentro del disparador y esa semántica es suya, así que el block no inventa una segunda. Medido a 1280: en acordeón, cinco disparadores, ningún encabezado, medida de setecientos sesenta y ocho y respuestas ocultas hasta pulsar; en lista, ningún disparador, cinco encabezados, tres pistas de trescientos nueve, medida de mil veinticuatro y todas las respuestas visibles sin tocar nada. A 375 cae a una columna conservando ambas cosas. El acordeón queda idéntico. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	f3bfcf2dd9	blocks(testimonials): una cita sola no va en una tarjeta ... La brecha que el dossier le apuntaba a este block: la cita única es la variante modal de todas las referencias y el grid la minoría, dos de ocho en Tailwind Plus. Entra como disposición, no como hermano. La anatomía no cambia —cita, autor, avatar—, sólo cómo se colocan, y el precedente es el fondo del hero, que también redefine lo que hacen sus partes. El hermano se reabre sólo si algún día pide rotación o carrusel, que es otro componente. Viaja por contexto de configuración, el patrón del align de feature-grid y team, no la coordinación de pricing. Y viaja porque el spotlight no es una piel sobre las mismas cajas: la rejilla deja de serlo y de estampar el ritmo estructural —que es para una FILA, no para una cita—, el ítem pierde la tarjeta, la cita sube de tamaño y se centra, y el autor pasa debajo, donde ya no hay una hilera de caras que alinear. Pedirle a la app que repita esa decisión en cinco partes es el agujero que A-84 cerró en feature-grid. Enmarcar una cita sola la hace parecer un ítem de una lista que no está ahí, así que ahí no hay tarjeta y el tipo lo dice, en vez de aceptar una superficie que luego descarta. La cita se centra con un párrafo de verdad: sobre una caja en línea el centrado no aplica, y sería mentira. Slot nuevo para la marca de quien firma, en las dos disposiciones: es lo que hace que una cita se lea como evidencia y no como una opinión, y es la pieza que ponen todas las referencias. Medido: en grid, cinco tarjetas, veinte píxeles, medida de mil veinticuatro y ritmo escalonado; en spotlight, cero tarjetas, una cita de veintiocho centrada en párrafo, medida de setecientos sesenta y ocho, autor centrado y sin escalonado; a 375 la cita cae a veinticuatro. El grid queda idéntico a antes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	0646d5ebde	blocks(pricing): el plan dice dónde estás, y el que no puedes elegir dice por qué ... Firma del usuario: faltaba la decoración del elegido, y faltaba poder marcar un plan como no disponible — si estoy cambiando de plan, el que ya tengo no debería poder seleccionarse. Lo segundo cambia la posición doctrinal del block. Su README decía desde julio que nada en una tabla de precios puede bloquearse y que por tanto no hay nada que explicar. Eso vale mientras la sección es sólo una comparación; se cae en cuanto el visitante ya está en un plan. Y ahí manda lo que costó contact: una acción bloqueada debe su frase, o es un agujero — algo que no se puede hacer y nada en pantalla diciendo por qué. El plan gana un estado: disponible, actual o elegido. Un enum y no tres booleanos, porque tres booleanos admiten lo que no existe, como elegido y no disponible a la vez. Y ortogonal a featured, que es la recomendación de quien vende: el plan recomendado puede ser justamente el que ya tienes. Se deriva una sola vez en el plan y viaja por contexto. La acción se lo entrega al botón del app por parámetro de su snippet, así que nadie vuelve a deducir en el punto de uso si se puede pulsar, y las palabras del botón siguen siendo del app. La frase, en cambio, es del block: idlangref con respaldo en inglés dentro de un Record exhaustivo, el mismo mapa que bloquea la acción es el que escribe el motivo, así que un estado que bloquea en silencio no se puede ni expresar. Su test lo afirma en las dos direcciones. Y una parte nueva la dice y posee el id al que apunta el aria-describedby del botón deshabilitado, sin renderizar nada cuando no hay nada que decir. La decoración la pone el canon: el elegido reenvía el anillo de Card, el actual su tratamiento deshabilitado. Nada de un data-pricing-selected propio: sería un atributo que nadie lee, porque un block no pinta CSS. Medido de punta a punta en el escenario de cambio de plan: el actual sale con cursor de no permitido, botón deshabilitado y aria-describedby que casa con el id de la frase, traducida por el arnés; al elegir otro, su tarjeta gana el anillo de dos píxeles con el primary de su paleta y las demás no. Queda anotado un gap del canon que salió al medir esto y que no toco: Card disabled nunca atenúa. La regla existe y su cursor sí aplica, pero la animación de montaje fija la opacidad en uno con prioridad de animación y se come la del estado; aislado con no-emerge, atenúa. Es el patrón que la doctrina de motion llama frágil-conocido —dos dueños peleándose por una propiedad en un nodo— y alcanza a toda Card deshabilitada del ecosistema. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	db026e48f5	blocks(pricing): la tarjeta responde al puntero, y el guard deja de leer prosa ... El plan reenvía el eje nuevo de Card. No es el `interactive` del canon: eso convertiría la tarjeta en un botón y `.PlanAction` ya tiene uno dentro. Apagado por defecto, porque una fila de planes es una comparación y una tarjeta que responde al puntero sugiere que la tarjeta misma es el control; se enciende donde la tarjeta entera ES la elección. Control vivo en la demo y en la URL de la vista previa. Y al escribir el comentario que explica por qué NO se usa un nativo aquí, el guard del tier se puso rojo sobre mi propia prosa: la regla B-2 leía comentarios como código. Su barrido quitaba sólo los de UNA línea, mientras el que entiende todas las formas y conserva los saltos ya existía tres líneas más abajo, usándose sólo para los imports. Es la lección de la fase cinco aplicada a una regla y no a la otra. Arreglado con dos fixtures nuevos —un nativo nombrado dentro de un comentario multilínea es prosa; un nativo de verdad debajo de ese mismo comentario sigue siendo error— y probado en rojo sobre el árbol real: un button inyectado en el hero sale señalado con su línea exacta, y el árbol queda restaurado después. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	44e4c9328e	blocks(hero): un vídeo en un hero es paisaje, y que se repita lo decide quien lo pone ... Corrección del usuario, y tenía razón: la demo componía el reproductor completo con su barra de controles, y nadie enseña un botón de play en una sección de apertura. Un vídeo de hero es decorativo — mudo, en línea, arrancando solo y sin controles. Y si se repite o no es una decisión, no algo horneado: en bucle el movimiento no termina nunca, así que sale como control vivo propio. Medido: cero botones, sin nodo de controles, y el loop siguiendo al conmutador. De paso queda registrado lo que aquello escondía. La barra que había se pintaba directamente sobre el fotograma sin fondo propio, así que en un clip claro eran siete botones a opacidad uno que nadie podía ver; es del canon y media-player está en la lista de intocables de este plan, así que se documenta por si algún día vuelve. Y un hallazgo más gordo, medido al cablear lo anterior: la preferencia de movimiento no llega a prefs en este arranque. Un vídeo que se repite sin barra de controles no se puede pausar, así que su autoplay tiene que ceder ante la preferencia declarada del visitante, igual que ya hacen las entradas de Motion del propio block. La puerta está escrita en app-land y hoy es inerte: con prefers-reduced-motion emulado en reduce, el valor efectivo sigue resolviendo allow, la raíz sigue estampando data-motion allow y el clip sigue corriendo. Queda puesta —empezará a funcionar el día que el eje lo haga— y anotada como lo que es: un problema de WCAG 2.2.2 a nivel de framework, no un detalle. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	fd9df269ef	blocks(hero): un slot apagado se pasa vacío, no se renderiza a cero ... El usuario dijo que en la demo hay propiedades que no hacen nada. Medí los diez controles uno a uno: nueve tienen efecto comprobable y uno funcionaba a medias. Apagar el eyebrow quitaba el contenido y dejaba el hueco: el stack de copia seguía con seis hijos y el primero medía cero de alto, comiéndose los veinte píxeles del gap. La causa era de la demo, no del block, y contra una regla que el propio handoff del tier tiene escrita: el snippet se declaraba con un {#if} DENTRO, así que siempre llegaba, el {#if eyebrow} del block seguía siendo cierto y sobrevivían el envoltorio de Motion y su parte del ritmo con nada dentro. Ahora el contenido se declara fuera y se pasa como undefined cuando no toca — lo mismo para la media, el formulario y el aviso de confirmación. Medido: cuatro hijos con el chip puesto, tres sin él, y ningún hijo de altura cero en ninguna combinación. Queda registrado además el defecto que el usuario vio en el vídeo del hero: los controles del MediaPlayer están —siete botones, todos con caja, opacidad uno— pero se pintan sin fondo propio sobre el fotograma, así que en un clip claro son ilegibles y se leen como ausentes. Es del canon, y media-player está en la lista de intocables de este plan, así que se documenta sin tocarlo. Con la nota de método: contar nodos y leer la opacidad no dice nada de la legibilidad sobre contenido en movimiento. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	a514ef929d	blocks(cta): el panel gana una segunda columna, y las acciones no se sueltan de su frase ... Tercera fila de la ola F2b. El README lo tenía diferido con la razón escrita: recurre en las referencias, es un tercer arreglo y el Mockup del canon ya existe para la media. Entra ahora porque la demo lo pide. Dos decisiones que la ficha del plan no traía y que salieron al colocarlo. La copia conserva sus acciones en la MISMA columna: separarlas dejaría el botón debajo de la captura, lejos de la frase que lo pide, y una llamada a la acción que no toca a su argumento pierde la mitad de su fuerza. Y split sin media cae a justified, no a una rejilla con una pista vacía — la misma regla que ya sigue el split del hero, porque un layout con un hueco reservado miente sobre lo que tiene. La media es del app, como en el hero: el block no nombra cromo propio. La demo compone el Mockup del canon con un panel falso dentro. Medido: a 1280, dos pistas de 436px en el panel de 992; a 375 una sola pista con el CTA POR ENCIMA de la media al apilar, que es el orden del argumento; idéntico en claro y oscuro. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	fd6c55a13b	blocks(pricing): un plan solo no se sostenía — la fila necesitaba un tope ... Segunda fila de la ola F2b, y la que existía para comprobar una sospecha. El README llevaba desde julio diciendo que el plan único «ya lo cubre el layout», diferido por eso. La ficha exigía medirlo antes de darlo por gratis, y no lo cubría. La causa está en la lista de pistas, no en cuántos planes hay: la fila es repeat(auto-fill, minmax(17rem, 1fr)), y auto-fill RESERVA toda pista que quepa, la ocupe alguien o no. Medido a 1280 sobre 992px de fila, un plan solo daba una tarjeta de 315px pegada al borde inicial con 677px de vacío al lado; fijar columns a 1 solo cambiaba eso por una tarjeta de 992px, que es un cartel. Meterlo en un Container sm tampoco: a 640px vuelven a caber dos pistas. Lo que faltaba era un tope sobre la FILA, y la parte no lo dejaba pasar: sus props están cerradas a propósito desde A-94, porque el envoltorio esparce el resto antes de las props que fija y un width del consumidor tipaba y se descartaba en silencio. Así que se abre nombrando: maxWidth entra en el tipo y viaja explícito al AutoGrid, que es exactamente lo que A-94 dejó dicho — el tipo dice lo que la parte honra. El marginX auto va con él sin condición: sin tope la fila ya llena la medida y auto no resuelve a nada. El número lo pone la app. Un block que horneara uno estaría decidiendo cuánto mide un plan; la demo pasa 28rem para uno y 44rem para dos, que es lo que las referencias le dan a cada arreglo, y gana un control vivo de recuento que también viaja en la URL de la vista previa. Medido después: un plan 448px centrado, dos planes 704px en dos pistas de 340 centradas, y tres planes 992px idénticos a antes — el tope es opt-in y no toca el caso que ya existía. A 375 es inerte, porque allí una sola pista ya toma el ancho. Queda anotada la lección en el README y en el handoff, porque no es de este block: una fila «diferida» puede ser una medición equivocada y no un aplazamiento. Nadie había mirado pricing con menos de tres planes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	f11b198f56	blocks(hero): el alta por correo entra por una ranura, y el block no toca el formulario ... Primera fila de la ola F2b. El hueco lo registraba el dossier desde julio y su README lo tenía esperando firma: las referencias ponen un alta por correo en el hero cuando la llamada a la acción ES un correo. La forma se eligió contra el precedente, no de cero. Newsletter recibe el handle del formulario porque lee la validez de la sección y con ella decide qué se puede pulsar; eso es coordinar, y un block que coordina tiene que poseer una máquina y las palabras de sus estados. Un hero no coordina nada, así que toma la otra puerta —la de site-footer.signup—: UNA ranura, la app compone Form + Field + Form.Submit enteros, el block no ve el handle y sigue sin poseer nada. Aterriza donde aterriza la llamada a la acción: dentro del cúmulo de copia, tras la descripción y antes de actions, así que hereda el ritmo estructural del stagger y su propia entrada. Y con medida propia: una fila de correo tan ancha como la prosa es inusable. El cap es sm y por ser un máximo resulta inerte en split, donde la columna ya es más estrecha — 480px en center contra una sección de 1264, 472px en split, que ES la columna. Los dos slots conviven si llegan los dos. En las refs el formulario sustituye al par de botones y así lo enseña la demo, pero hacerlos excluyentes en el tipo prohibiría un arreglo real: un alta junto a un «hablar con ventas». Medido en Playwright headless sobre píxeles pintados: tinta escrita 15,88:1 en claro y 16,28:1 en oscuro; el relleno del campo contra el lienzo de background 9,61:1; la fila colapsa a 375 y comparte a 1280; Enter llega al handler del app y un correo inválido lo para con el error traducido y aria-invalid; RTL espeja la fila. Dos gaps de canon quedan registrados, no tapados: Form.Submit no reenvía al Button ni el eje intent ni ninguno de anchura, así que el botón no llena su celda al colapsar —newsletter mide lo mismo y el justify de Grid es justify-content, no justify-items—, y la demo usa lo único que hay, el style que sí viaja. Y el contexto de inversión mordió por segunda vez: un Text sin color explícito bajo background mide 1,62:1 contra 10:1 con on-solid. Queda anotado también cómo se mide esto, porque dos sondas dieron cifras seguras y falsas antes de la buena: un parser rgb sobre un sistema que emite oklch, y un canvas cuyo fillStyle tampoco lo normaliza aquí, midiendo NEGRO contra todo. La señal de que la sonda es honesta es que la etiqueta del submit sale a 5,18:1, la cifra que este repositorio ya documenta para primary. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
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	4b39b718c6	fix(eidos): el aviso al pie se lee donde se ve, y la fuente unica deja de mentir sobre si misma ... Cierra los dos hallazgos que quedaban de la auditoria. ORDEN DE LECTURA (a11y). `position: fixed` saca la tira del flujo VISUAL pero no del DOM: se lee donde esta en el fuente. Con `affix="bottom"` el aviso se ve al pie y la mini-pagina lo renderizaba primero, asi que un lector de pantalla lo anunciaba ANTES que la cabecera — medido en la preview del propio block, era el primer nodo del documento. Quien decide eso es el APP, no el block: el block coloca, el documento ordena. Asi que la correccion no es un prop, es que la demo deje de modelar el desajuste — el aviso se renderiza donde se ve — mas la advertencia en el typedoc de `affix` y una fila en los Gaps. Verificado en los dos bordes: con `bottom` el aviso va DESPUES de la cabecera en el DOM y se ve al pie; con `top` va antes y se ve arriba. En ambos, z 150 y pegado a su borde. AFIRMACIONES OBSOLETAS. Cinco sitios seguian diciendo que `Fab` "ships a private copy today" y que su migracion estaba pendiente — falso desde 1fc0a7a96, que es mi propio commit. El fichero que declaro fuente unica mentia sobre su estado. Corregidos `affix.svelte`, `index.ts`, la tabla de attrs del README y las dos menciones de la demo. Lo que queda dicho es lo cierto: `Fab` la lee, `MenuDial` sigue con copia propia. check 69 = base intacta · blocks 0 · layer:check 0 violaciones · contrato de capa 10/10 · smoke 311/311. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	92c8f6466a	feat(eidos): Affix — la pieza que Sticky no puede ser, y la capa que Fab y MenuDial ya habian copiado dos veces ... Un aviso al principio del documento se va con la pagina: `position: sticky` se despega en cuanto termina su contenedor. Medido el 2026-08-10 sobre el block `banner` — `Sticky edge="bottom"` acaba en `top: -8` sin `data-stuck`. No es un cableado roto: es que un elemento anclado al viewport es `fixed`, y eso es otro componente. Pero no es un componente nuevo: la capacidad YA existia dos veces. `fab.css` fija 4 esquinas, `menu-dial.css` nueve, y las dos ya divergian (`--fab-offset` publico vs `--_menu-dial-offset` interno; `var(--fab-z)` vs `var(--z-index-sticky, 1100)`, un fallback de 1100 sobre un token que vale 100). Y antes de eso existio entera: `air/layout/float`, el primitivo de 9 zonas que el refactor retiro sin sustituto — lo dicen los README de `float` y de `Fab`. Asi que `affix.css` no es un tercer ejemplar: es la CAPA, enganchada en `data-affix-placement` y no en `data-affix`. El split es portante — `morfo-check` selecciona `[data-affix]` en toda la pagina y valida cada match contra `affixMorfo`, asi que si `Fab` estampara la identidad quedaria soldado a este contrato. Estampando solo el gancho de capa, no. Es el patron de `lib/list-surface.css`: una fuente, cero nodos extra. Lo que salio midiendo, no razonando: - `--z-index-affix: 150`, peldano nuevo. Con la tira en `top` empataba con `--sticky-z-index` (100 los dos) y el empate lo rompe el ORDEN DEL DOM: el aviso va antes que la cabecera en el fuente, luego perdia. 30,7px de solape con el cromo encima — el fallo original reproducido por su sustituto. Un peldano toca DOS sitios: `STATIC_Z_INDEX` y la lista cerrada `Z_INDEX_KEYS`. - NO compone `<Box>`, aunque sea el patron de los primitivos de layout: `box.css` declara `position: var(--box-position, revert-layer)` a la misma especificidad que el gancho, y eidos no usa `@layer`. En el orden de carga equivocado, `position: static` — un `fixed` que no hace nada. - `stretch` es solo de los bordes de bloque. El rail del eje inline se envio y se retiro el mismo dia: `Affix` no dimensiona a su hijo, asi que era una caja invisible de 380px con el hijo de 47px arriba, identica a `top-start` en pantalla. El marco medido decia otra cosa; la pintura mandaba. - `env(safe-area-inset-*)` es fisico y los anclajes logicos: remapeado bajo `:dir(rtl)`. Emparejar `inset-inline-start` con `safe-area-inset-left` despeja la muesca equivocada en RTL apaisado — que es lo que hacen hoy `fab` y `menu-dial`, registrado. `banner` recupera lo que su README daba por imposible: `affix="top" | "bottom"`. La disposicion anterior decia «app-land, el canon ya trae Sticky» y nombraba un componente que no puede hacerlo. Verificado con recorrido real (342px en la demo, 1247px en la preview del block): desplazamiento 0 en los dos bordes, nueve zonas exactas, RTL espejando, el ancestro transformado derivando -342px como esta documentado, y `elementFromPoint` sobre la tira devolviendo el aviso y no el cromo. component:audit PASS 0/0 · morfo:check PASS · rtl 0/178 · smoke 311/311. Queda: migrar `Fab` y `MenuDial` a la capa. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	866089a407	fix(blocks,canon): el ledger dice la verdad y el arco perceptivo vuelve a sonar ... La auditoria del tier tenia los veredictos desemparejados de sus hallazgos: un join por POSICION, y el journal del workflow era de sesion. Reproducido en vivo al re-verificar — el journal devuelve los resultados en otro orden que la entrada. Ledger nuevo con 90 ids estables (AUDIT-blocks-ledger.md), union SIEMPRE por id: 41 arreglados, 34 confirmados, 12 refutados con motivo escrito, 3 dato. La tasa real de refutacion es del 13%, no del 28%. De las 12 ALTA de percepcion, 8 tenian la causa raiz en el CANON. Los blocks componen bien; lo que estaba roto era el arco perceptivo. CANON - Link: la prop color era inerte en subtle/plain (inherit a 0-2-0 ganaba a la paleta a 0-1-0), el hover clavaba primary y el active quedaba tapado por el hover de variante. Medido: el enlace del footer pasa de la tinta del padre a la suya. - Card: prometia BoxProps y no los aplicaba — height="100%" era un atributo inerte. El tipo dice la verdad y el eje de tamano se aplica con un helper compartido (buildSizeStyle). Tarjetas al fin de igual alto. - Form.Submit / Form.Reset: componen el Button del canon, asi que la accion principal de un formulario recupera el contact-activate en el gesto. Y el aria-label generico deja de pisar el texto propio (WCAG 2.5.3 para todo consumidor), verificado con el AX tree de Chrome. - Field: dejaba de duplicar commit-submit dentro de un Form — un Enter emitia dos commits con intents contradictorios y dos earcons. - NavigationMenu: commit-select se mueve al Link (navegar es el acto evaluable), el despliegue habla como emerge-open/close en vez de fingir una seleccion por hover, y el pack casa por fin con la parte que recibe el estampado — antes sonaba a la ganancia base, 10x lo disenado. - Badge: el boton de quitar compone IconButton; la altura del chip pasa a ser la del control, asi que md significa lo mismo en todo el sistema. - Fundacion: [data-on] arrastra la propiedad color, no solo las variables. BLOCKS - hero: la CTA secundaria pasa de 1.61:1 a 6.61:1. - contact: separa incomplete de invalid — el camino de error por campo era inalcanzable por construccion — y su frase llega a la AT. - newsletter: coordina (fase 4 del plan). Maquina de cinco estados, palabras propias, Submit y Reason como partes que leen el contexto. - site-header ya no congela la pagina al cruzar el breakpoint; site-footer emite su commit; pricing no se vacia; cta llega a sangre de verdad. DOCTRINA - La frontera dura 1 nombra $libs/forms como puerta sancionada. - El contrato B admite un segundo servicio: el anunciador. Un block que posee las palabras de sus estados tiene que poder decirlas. Gates: blocks:check 15/0 · vitest 20/20 en blocks y 402/402 en eidos+blocks · svelte-check 75/54 (linea base) · docs:check 0/0 · prettier limpio. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	973d2c886d	feat(direction): la proyeccion prefs->DOM es del boot, y el DOM la siembra ... La proyeccion cross-modal (dir · lang · data-motion/sound/haptic sobre <html>) era cableado manual de cada app: solo 4 de ~13 boots de la demo la tenian, y el estampado per-componente del valor de prefs actuaba de SUSTITUTO de la proyeccion que faltaba. Para que el flip de P3 pueda soltar prefs del atributo, el ambiente tiene que llegar al DOM una vez y siempre: - createActiveUix la crea por defecto (opt-out `projectPrefs: false` cuando la app posee <html>: i18n por routing, proyeccion propia). En attach es opt-IN — el inverso — porque el host puede gobernar el documento. - Se dispone la PRIMERA en dispose(), antes de que prefs/dom mueran debajo. - Los 3 cableados manuales commiteables se borran EN ESTE MISMO commit (uix, blocks, BootUix); el de web/routes/alpha se edita en arbol pero no se commitea nunca (regla de la rama). Borrarlos junto a la automatica evita el agujero medido del doble montaje: dispose() BORRA los attrs gestionados sin restaurar. Y LA SEMILLA, que es lo que hace la automatica segura: sin ella, el boot REESCRIBIRIA un <html dir="rtl"> puesto a mano (el escenario 013ceac57) con el valor derivado del idioma. `readPrefsEnvironmentFromDom` lee <html dir> UNA vez al boot (SSR-safe: {} sin document; auto/vacio = "la pagina no declaro") y la dimension direction la honra con la precedencia: intent del usuario > semilla del entorno > derivacion(idioma) > default Una declaracion a nivel de pagina es una AFIRMACION explicita; el enlace por idioma es una heuristica — la afirmacion gana. Lo que pase la app en options.prefs.environment pisa la semilla. Un guard viejo fijaba el comportamiento anterior ("does not auto-project…") — es exactamente lo que la decision D2 (firmada 2026-08-05) revierte. Pasa a fijar el nuevo contrato: se proyectan SOLO los attrs cross-modales; data-theme/ mode/density siguen prohibidos (son de eidos). Tests: semilla y precedencia 6/6 (dom-environment.test.ts) · proyeccion automatica, opt-out, adopcion del dir a mano y limpieza en dispose (4 nuevos en active-uix.svelte.test.ts) · suites active-uix + prefs 79/79. Verificado en Chrome por el camino real: el toggle del topbar mueve <html dir> via prefs->proyeccion AUTOMATICA (ltr -> rtl -> auto) con el cableado manual ya borrado, en /uix y en /blocks; <html lang> viaja con el. check 77 = linea base · rtl:check 1 (palabras) · docs:check 0/566. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	6036560ff0	fix(blocks): la galeria emite — packs de sema y canales perceptivos en el arnes ... El motor SI emitia: pulsar un boton de un block estampa `data-event=contact-activate` con `family=contact` y `phase=active`, porque el morfo del `Button` declara ese evento (verbo `activate`, secuencia `pre`, sin intent a proposito — una pulsacion no carga intencion evaluativa). Lo que faltaba era el otro lado: la seccion arrancaba UIX **sin `events` y con cero packs de sema**, frente a los 69 de `/uix`. El evento salia a una sala sin altavoces. Viene de F0, cuando el arranque se monto como «espejo minimo» de `/uix` y sema se quedo fuera. Un framework semantico cuya propia galeria no suena no esta demostrando lo que existe para demostrar, asi que los canales van ENCENDIDOS aqui: `sound` y `haptic` a true en las dos cadenas de arranque (galeria y previews). La lista de packs es DERIVADA del barrel (`Object.values(packs)`), no escrita a mano, y eso es deliberado: la lista a mano del otro arnes se quedo atras dos veces — `69c108d2a` tuvo que anadir «los 25 packs que faltaban en la composicion de demos». Una lista derivada no puede quedarse atras. El barrel recomienda importar solo los que usas por tree-shaking; aqui no aplica, porque esto no es un producto sino la galeria del framework y un block compone lo que quiera del canon. Verificado espiando la Web Audio API en un clic real dentro del block: al cargar 1 AudioContext y 0 fuentes; tras pulsar, 2 fuentes y 3 nodos de ganancia mas. Y las 15 demos cargan limpias con los 69 packs, cero errores de pagina. Gates: blocks:check verde (15) · svelte-check sin errores en lo tocado · prettier limpio. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	96393e4305	docs(blocks): cada block declara su posicion bajo la doctrina de coordinacion ... Y `content-section.Media` pasa a seguir al texto por defecto. DEFAULT: `.Media` era `width='wide'`, asi que una figura se salia de la columna SALVO que dijeras lo contrario. Al reves de lo que hacen todas las referencias (en `@tailwindcss/typography` una imagen dentro de `prose` queda capada a la medida y salirse exige el truco del `translate`; en `markdown-body` de GitHub, `max-width: 100%` de la columna). Ahora el default es `measure` — la figura sigue al texto y el escape se PIDE. Cambiado en los cuatro sitios que decian lo contrario: la parte, la ruta `preview`, el estado inicial del control de la demo (una demo que pisa el default en silencio ensena algo que el block no hace solo) y la doc. Verificado: 528 = ancho del texto exacto a 1011/1280/1920, y `wide` / `full` siguen funcionando cuando se piden. DOCUMENTACION: los 15 READMEs declaran ahora su posicion bajo §«Coordination», y el mapa real no es uniforme — - Coordinan: `contact` (maquina + esquema + palabras) y `pricing` (el periodo por contexto). Pero en pricing nada se puede BLOQUEAR, asi que no necesita maquina ni palabras: coordinar no es siempre una maquina. - Comparten CONFIGURACION, no estado: `team` (`align`) y `content-section` (la medida). - Costura bindable hacia el canon: `faq` (`value` → `Accordion`) y `site-header` (`mobileOpen` → `Drawer`). Reenviar no es poseer. - No poseen nada: banner · cta · feature-grid · feature-split · hero · site-footer · stats-band · testimonials. Decirlo explicitamente es el punto: inventarle estado a un block que no coordina nada es el error contrario. - `newsletter` queda como CANDIDATO ABIERTO: coloca un envio que puede quedar bloqueado sin que nada diga por que — el `disabled` lo monta el app en el punto de uso — que es exactamente el hueco que cerro `contact`. Es anterior a la doctrina (block del 30-07, doctrina del 31-07). Registrado, no asumido: se toca con decision del usuario. El README del tier apunta a la doctrina y el handoff recoge el mapa completo. Gates: blocks:check verde (15) · docs:check 0 · svelte-check sin errores en lo tocado · prettier limpio. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	378457f46c	feat(blocks): content-section cierra F2 — la rejilla de escape, y las escalas tipograficas salen de Text ... El ultimo block de sitio, y el que mas cerca estuvo de ser un envoltorio: `Section` + `Container` + `Prose` no habria anadido nada, porque `Prose` ya trae su medida de lectura. Lo que falta en el ecosistema es el ESCAPE — dentro de un `Container` nada puede ser mas ancho que el, asi que una figura a sangre hay que sacarla del articulo y ponerla de hermana, y el orden de lectura se rompe. La seccion es una rejilla de 5 pistas (canalon · flanco · MEDIDA · flanco · canalon) y cada parte dice hasta donde llega: `measure` col 3, `wide` col 2/5, `full` col 1/-1. Todas las longitudes son tokens del sistema (`--measure-*`, `--container-width-*`, `--container-padding-inline`). `.Body` y `.Media` son compound porque SE REPITEN; la cabecera son slots de snippet. `.Body` apaga la medida de `Prose`: dos duenos del mismo ancho se pelean y ganaria el mas estrecho en silencio. Los tres ejes son RESPONSIVE (`measure`, `wide`, y el `width` de cada parte), resueltos con `eidos.resolve()` — el mismo camino que usan los primitivos de eidos, asi que los unicos breakpoints en juego son los canonicos. Es lo que un valor unico no puede decir: `{ base: 'full', md: 'wide' }` = foto a sangre en movil y contenida de `md` arriba. CANON: un componente no es libreria de otro. `Heading` importaba CINCO escalas tipograficas de `Text` (`TextTracking`, `TextLeading`, `TextWrap`, `TextNumeric`, `TextMeasure`) y al tipar este block repeti la violacion. Las cinco se mueven a `eidos/lib/types.ts`, que es donde su propio encabezado dice que van y donde ya esta documentado el precedente del mismo fallo (`ColorRole` re-escrito a mano que derivo a 8 miembros contra 9). Sin shim de compatibilidad: `text` y `heading` las importan de la libreria. Cuatro defectos que solo dijo el navegador: 1. `gap` separa tambien las COLUMNAS y una parte que las cruza se lleva esos huecos encima — `wide` media 1088 en vez de los 1024 del contenedor con el que debe alinearse, y a 420px `full` llegaba a 532 dentro de una rejilla de 404 y hacia scrollear la pagina. Van `rowGap` + `columnGap={0}`. 2. Una pista `min(medida, 100%)` ignora sus propios canalones: a 420px la central se quedaba los 404 enteros y la rejilla se iba a 436. 3. Un token de container es un ancho EXTERIOR: con `--container-width-lg` a pelo la figura `wide` sobresalia 16px por cada lado respecto al texto de la seccion hermana de debajo, a 1280/1440/1920. La pista ancha resta ahora `2 * --container-padding-inline` (992 en `lg`) y el desfase es 0. Lo cazo el usuario mirando la pantalla: yo habia medido el block contra si mismo, no contra la pagina. 4. `100%` significa algo distinto dentro de cada parte — en `measure`/`wide` ya es una pista, en `full` es la rejilla entera con canalones —, asi que capar el pie igual en los dos casos lo dejaba a 340 contra una columna de 372 en uno y a 404 en el otro. Verificado en navegador: barrido 375→1920 sin desbordamiento; alineacion pie↔prosa identica en 3 viewports × 3 medidas × 3 anchuras (18/18); figura `wide` a ras del texto de la seccion hermana en 1280/1440/1920; y el valor responsive cambia exactamente en el `md` canonico (a sangre a 767, contenida a 768). Claro, oscuro, 420px y 1920 mirados, y la geometria confirmada tambien en el Chrome del usuario. Semantica propia `figure`/`figcaption` (no interactivos → estructura de documento, B-8) con el hueco senalado: el canon no tiene primitiva `Figure`. Contexto de CONFIGURACION, no de estado — es un block de layout y no coordina nada. Gates: blocks:check verde (15 blocks) · svelte-check sin errores en lo tocado · eidos 28/29 suites (la que falla es `audio-player` sin morfo, del hilo de audio, ajena) · docs:check 0 · prettier limpio. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	b1b568e32f	feat(blocks): contact CERRADO — la coordinacion entra en el contrato B ... El estado se le pregunta al ESQUEMA, no al Form. `form.isValid` con `validationBehaviour: 'progressive'` significa «aun no se ha encontrado nada mal»: un formulario vacio e intacto no tiene errores, asi que se declaraba valido y `incomplete` era INALCANZABLE al cargar — la seccion pedia resolver la verificacion con los tres campos vacios, justo el hueco que la doctrina existe para cerrar. Ahora la raiz valida los valores con `validateSync` de SIUM: sincrono y sin escribir errores (`form.validate()` habria encendido los tres campos en rojo en el primer frame). `state.test.ts` fija la maquina con 9 casos — primer test unitario del tier, porque `state.ts` es su primera logica pura: el orden de prioridad, que solo `ready` deja enviar, y que todo estado bloqueado tiene frase. Contrato B (architecture/blocks.md): seccion «Coordination» con las tres cosas que posee un block que coordina (estado, forma de sus datos, palabras), B-5 admite el esquema por defecto, B-7 enmendado (posee las palabras de SUS estados como idlangref con fallback ingles) y la convencion de servicios acotada: el traductor es el UNICO servicio sancionado. Dice tambien a quien NO aplica — los blocks de layout no coordinan nada. i18n por la via real: el arnes registra el namespace `blocks` en las DOS cadenas de arranque (galeria y previews, que duplican el boot) y la demo se lee en castellano en vez de caer al fallback ingles. Ademas: README y pestanas de doc rehechos al reparto nuevo, ficha F2.13 y bitacora en PLAN-blocks.md, y el control vivo que faltaba para un prop publico — `verification` con reto / sin reto, porque omitir el prop no es lo mismo que pasar un estado que nunca verifica. Verificado en navegador, arco completo y las dos ramas: sin reto vacio → un campo → tres campos (se desbloquea) → «Enviando…» → «Enviado»; con reto, con los tres campos llenos el boton sigue bloqueado y la razon pasa a «Resuelve la verificacion de arriba». `verifying` y `rejected` quedan cubiertos por test unitario, no por el reto en vivo: el provider de ProofOfHuman escribe `status` el mismo y el veredicto del app no se sostiene (hilo de canon abierto). Gates: blocks:check verde (14 blocks) · vitest 9/9 · docs:check 0 · svelte-check sin errores propios · prettier limpio en los ficheros propios. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	59bd5ffb71	fix(blocks): contact — la demo al dia con el block que ya coordina ... El add del commit anterior capturo la iteracion previa de ContactSite (el app poseia schema/labels/disabled); el guardado del editor con la version final — el block coordina y al app le quedan sus palabras, sus canales, el reto y el significado de enviar — llego justo despues. Esta es esa version. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2 months ago
dev	39d3790803	feat(blocks): contact (F2.13) — el bloque de contacto completo ... Compound contact.* (header/reason/form/fields/submit/details) con schema y contexto propios, README y ruta de preview; marcado shipped en el catálogo. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2 months ago
dev	75017e5515	feat(blocks): `team` — las personas, y un contexto que sirve para una sola cosa ... F2.12. Compound porque `Member` SE REPITE (el app mapea sobre N), como `feature-grid`. Pero es el primero del tier cuyo **contexto existe para una sola cosa**: el `align` de la sección viaja a cada `Member` y a su fila de enlaces, así que la foto, el nombre, el cargo y los enlaces comparten eje sin que el app repita la alineación en cada tarjeta. Un `align` explícito en una parte siempre gana. Esa es la diferencia con `feature-grid`, cuyos ítems solo se repiten y por eso no llevan contexto: **la regla de forma se aplica parte por parte, no block por block**. ## Dos decisiones de forma - **Sin `.MemberAvatar`.** El plan la dibujaba; no tendría nada que añadir sobre `<Avatar size radius>` y escondería su API (`Image`, `Fallback`, los estados de carga). El app compone el `Avatar` del canon directamente dentro del `Member`. Se envuelve lo que el block DEFAULTEA —tipografía, retícula, eje—, no lo que solo reenvía. - **El nombre es un `Heading level={3}`** apagado con `size="sm"`: una persona en una retícula tiene nombre, y las referencias lo marcan igual. El nivel es estructura del documento; el tamaño, tipografía. Así un lector de pantalla puede saltar de persona a persona. Y un detalle que separa cumplir de sobresalir: la fila de enlaces va pegada al fondo de la tarjeta (`marginTop: auto`). Con biografías de distinto largo las filas quedaban a alturas distintas y la retícula se leía descuadrada; sin biografías las tarjetas ya miden lo mismo y la regla no cambia nada. ## Encontrado al verificar **Un `columns` fijo no colapsa.** A 420px, cuatro columnas dejan celdas de ~90px con el nombre partido en tres líneas y el avatar desbordando. El default del block es fluido (`minChildWidth`), así que el fallo era de la demo: ahora pasa `columns={{ base: 2, md: N }}` — para eso están los props responsivos. Anotado en el README. Verificado en navegador, esperando el atributo que pone la runtime del morfo y no el reloj: 2/3/4 columnas, `align` center/start propagándose por contexto al eje de cada miembro, biografía sí/no, claro/oscuro/RTL y 420px, seis avatares, doce botones de icono **con nombre propio por persona** («Escribir a Ada Lovelace», no «correo»), escalonado estructural con índices 0,1,2…, cero desbordamiento horizontal y cero errores de página. Gates: `blocks:check` verde (13 blocks) · `svelte-check` sin errores propios · `docs:check` 0 · prettier limpio. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	c57b66dc92	feat(blocks): `banner` — el aviso de arriba, y tres defectos del canon que no existían ... F2.11. El block más FINO del tier a propósito: cuando el canon ya tiene la pieza, el block es colocación y nada más. Reenvía la superficie entera del `Banner` con `Omit<BannerProps, 'children'>` —sin re-declarar `intent`/`variant`/`size` ni estrecharlos—, lo mete en columna con `Container` (`width="100%"` + `paddingX={0}`: a sangre por fuera, en columna por dentro), envuelve la fila con `Wrap` en vez de aplastarla, y cablea `Banner.Close` solo si llega `onDismiss`. La visibilidad NO es suya: es la decisión que ya tomó el componente («composición, no un booleano `dismissible`»), así que el app envuelve en su `{#if}`. Un block que guardara ese estado sería una segunda fuente de verdad. Tampoco emite sema: el canon declara cero eventos para `Banner` a propósito, y un aviso persistente sin descarte es tan legítimo como uno descartable. La demo lo enseña **encima del `site-header` de verdad**, con página para desplazarse. Un aviso dentro de un recuadro no se parece a un aviso. ## El hallazgo que la fase 0 anticipó `Banner` estampa `role="banner"` DESPUÉS de sus rest props, así que no se puede relajar a una región normal. Con el `site-header` en la misma página —que es la única colocación que shipean las referencias— quedan **dos landmarks `banner`**. Medido en la vista previa: dos. Lo único que puede hacer un app hoy es nombrarlos con `aria-label`, y eso hace la demo. ## Y una lección de método que costó una sesión Reporté tres «defectos del canon» —`aria-label` ausente en `Banner.Close`, `type` desaparecido de todo `Button`, `IconButton` tragándose el `onclick`— y **los tres eran falsos**. La causa era la misma: medir demasiado pronto. Los `data-variant` / `data-size` los escribe el componente de eidos al renderizar, así que están desde el primer frame; `type`, `aria-label` y los handlers los aplica la **runtime del morfo en un efecto posterior**. A ~1s: `type` ausente en 3 de 3 botones y ningún clic disparando. A ~6s: `type="button"`, `aria-label="Descartar"` y el descarte funcionando. La espera válida es un atributo que solo pueda haber puesto la runtime —`waitForFunction(() => boton.hasAttribute('type'))`—, no que el nodo exista ni que se vea. La regla queda afinada en `CONTINUE-blocks.md`, que ya avisaba de esperar la condición y no el reloj: fallé al elegir la condición. De paso, un aviso de soma que sí era real y era mío: `Tabs.List` sin nombre accesible en `BlockDemo.svelte`. Afectaba a las 12 demos del tier. Verificado en navegador: los 4 intents, los 3 tratamientos, `descartable` sí/no (con `no` el botón deja de renderizarse, no se oculta), claro/oscuro/RTL y 420px, la tira siempre por encima de la cabecera, cero desbordamiento horizontal, el descarte con la página recolocándose, y los controles de la demo moviendo la vista previa en línea. Gates: `blocks:check` verde (12 blocks) · `svelte-check` sin errores propios · `docs:check` sin errores míos · prettier limpio. 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
dev	f69cf76cfd	feat(blocks): `newsletter` — el alta al boletín, y el reset que el framework daba por hecho ... F2.9. Slots de snippet (eyebrow · title · description · field · submit · note · children), `center` y `justified`, y `panel` como interruptor real: el panel de marca es la cara de las referencias, pero el control, la ayuda y el error están calibrados para la superficie de página, así que apagarlo es un estado de primera y no un fallback. La fila es `Grid templateColumns={{ base: '1fr', sm: '1fr auto' }}`: el campo se queda la pista libre y la acción abraza su contenido —eso es lo que hace que un alta se lea como UN gesto— y bajo `sm` pasa a una columna, porque un botón al lado de un campo de correo deja inservibles a los dos. El block NO valida y NO emite sema. `Form` posee el runtime, el esquema, dirty/ touched, la agregación de errores y el foco al primer error; `Field` posee el cableado ARIA; el morfo del `Form` ya declara `commit-submit` y `signal-invalid`. El app posee esquema, valores y handler. No hay ni un `if` sobre un correo aquí. ## Superación del dossier: la etiqueta El único hueco que el dossier nombraba era la nota de privacidad, y está. Pero la diferencia de verdad es la etiqueta: las referencias shipean la fila escondiéndola con `sr-only` o dejando solo un placeholder. El canon tiene `Field floatingLabel` —arranca dentro del control y sube al borde al enfocar o rellenar—, así que la fila queda alineada CON etiqueta real y asociada. Verificado con pulsaciones de teclado de verdad: 10px dentro en reposo → −11px sobre el borde al enfocar y al rellenar. ## Tres hallazgos de canon más, medidos - **La fundación de eidos no trae reset de modelo de caja y lo asume del app.** `[data-field-control]` declara `inline-size: 100%` + padding, así que bajo `content-box` el control mide 30px más que su contenedor: el campo se metía por debajo del botón de envío. Campo 480 / control 510 en la galería frente a 502 / 502 en los docs de componentes, que sí resetean (igual que `web/routes/active/styles.css`). Arreglado en app-land con `web/routes/blocks/_lib/reset.css`, con A/B sobre los 10 previews y 5 páginas de shell: cambia el newsletter y NADA más. Hay que importarlo dos veces porque la galería arranca UIX en línea en vez de pasar por `BootUix` — deuda del arnés, anotada en el handoff. - **`onValidSubmit` es un no-op silencioso** cuando se pasa un `form` ya construido: el componente solo lo reenvía al `createForm` que hace él mismo. El envío validaba, limpiaba el error y no anunciaba nada. Por eso el block no expone el prop: el handler va en el `createForm` del app. - **Los mensajes de SIUM son idlangref.** La vía correcta es `uix.langs.t(issue.message, issue.params)` —verificado, sale «Debe ser una dirección de correo válida»—, pero la demo de docs del propio `Form` parte la cadena a mano tras el `|`, así que el único ejemplo del repo enseña el patrón equivocado y siempre muestra inglés. Los tres quedan en los gaps del README y en `PLAN-blocks-quality.md` §6 (F18/F19/F20), sin tocar nada fuera del tier. Verificado en navegador el arco completo: correo inválido → error traducido con `role="alert"`, `aria-invalid`, `aria-describedby` y foco al primer error; correo válido → confirmación del app (`Callout` afirmativo con la dirección) y error limpio. Claro/oscuro/RTL, tres colores, `panel` sí/no, 420px. Cero errores de página. Gates: `blocks:check` verde (10 blocks) · `svelte-check` sin errores propios · prettier limpio. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	03d6796582	feat(blocks): `cta` — el panel que pide el siguiente paso, y tres mentiras que destapó al medirlo ... F2.8. Slots de snippet (eyebrow · title · description · actions · children), misma forma que `hero`: las partes de un CTA no repiten ni coordinan, así que un compound no se gana nada. Dos disposiciones: `center` para cerrar una página y `justified` —copia al inicio, acciones al final— que es el hueco que nombraba el dossier. Un solo `Motion trigger="viewport"`: el panel llega ENTERO, porque un CTA es una sola afirmación y repartir sus tres partes se leería como duda. Lo que salió al verificarlo en navegador, medido y no a ojo: - `variant='soft'` **fuera de la API**. Su track queda a `oklch(0.9932)` contra un `--color-surface-default` de `oklch(0.9911)`: 0.002 de luminancia, o sea ningún panel en claro. Y `Surface` no tiene borde al que caer. Cortar el prop es más barato que shipear un estado que se esfuma. - La ranura `contrast` de la paleta es blanco en TODO escalón sólido, así que un lienzo de luminancia media deja el cuerpo por debajo de AA: `primary` 5.18 · `indigo` 5.21 · `plum` 4.75 pasan en ambos modos; `neutral` 3.32 · `teal` 3.07 fallan en claro. El block reenvía cualquier `color`; la demo solo ofrece los que pasan. - `Text align` es inerte por defecto: renderiza un `span`, y `text-align` no hace nada sobre una caja inline. `align="center"` dejaba la copia a la izquierda dentro del layout centrado, sin avisar. Rodeado con `as="p"`. Y `Group` no apila: a 420px la etiqueta de la acción secundaria se parte contra el botón primario, así que las acciones van en `Flex direction={{ base: 'column', sm: 'row' }}`. `hero` compone las suyas con `Group` — anotado. Los tres hallazgos de canon quedan en los gaps del README del block y en `PLAN-blocks-quality.md` §6 (F15/F16/F17), sin tocar nada fuera del tier. Verificado: `center` y `justified` en claro/oscuro/RTL y a 420px, tres colores, entrada disparada, descripción en `<p>` centrada, cero errores de página. Gates: `blocks:check` verde (9 blocks) · `svelte-check` sin errores propios. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2 months ago
dev	4e785d32bf	feat(blocks): F2.7 `stats-band` — la cifra que se cuenta sola ... La fila de números que respalda lo que la página acaba de afirmar. Compound (`.Stat` repite, sin contexto): `<StatsBand>` + `.Stat` + `.Value` + `.Label`. - **Compone, no reinventa**: la semántica de KPI es el `Metrics` del canon, leído de su API y pasado tal cual (precedente `faq`/`Accordion`). `Metrics` es surfaceless, que es exactamente lo que una banda necesita: no son tarjetas de panel. Un delta, un icono o un sparkline son `Metrics.Delta`/`.Icon`/`.Chart` que la app compone dentro — el block no los re-expone. - **La superación literal del dossier**: `<StatsBand.Value count={12500} />` compone `CountUp`, así que la cifra se cuenta sola al entrar en pantalla. NINGUNA referencia puede shipearlo: todas entregan markup estático. El formato locale-aware y el salto directo bajo reduced-motion vienen del `CountUp`, no de aquí. - **`count` es opt-in, nunca default**: una cifra que se anima sin que el lector lo pida es ruido, y algunas no son contables («99,98 %»). Sin `count`, la cifra la pone la app por children. - **Ni una palabra ni un separador salen del block** (B-7): las palabras por children, el formato por `uix.format` dentro del `CountUp`. - Escalonado estructural: `data-stagger` en la banda y cada `.Stat` es un `Motion trigger="viewport"`, así que las cifras aterrizan una tras otra sin un solo milisegundo escrito a mano. Verificado en navegador (con la banda bajo el pliegue, para cazar el conteo desde el primer fotograma): 4 cifras con índices estructurales 0,1,2,3 contando —9377→11.678 · 255→318 · 36→45—, el porcentaje quieto por no ser contable, y el separador de millares por locale (`11.678`). Cero errores de página. `blocks:check` verde (8 blocks) · `svelte-check` sin errores propios. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2 months ago
dev	cdc00bc117	fix(blocks): lo que la auditoría encontró DENTRO del tier ... Una auditoría multi-agente (7 dimensiones doctrinales + refutación adversarial) confirmó 32 hallazgos sobre la pasada de calidad. Esto corrige los que caen dentro de `blocks/`; la deuda de fuera queda REGISTRADA, no tocada (`PLAN-blocks-quality.md` §6). - **B-7 roto en `pricing`**: el block traía tres strings castellanas propias como defaults del toggle — dos visibles y un nombre accesible. Hardcodeaba un idioma DENTRO del framework y esquivaba `langs`, en el mismo block cuyo README predica «cero strings propias». Ahora los tres son props REQUERIDAS y las pone la app. - **El block pintaba**: `pricing.Plan` metía `box-shadow` por `style=` porque `Card` no expone elevación. Retirado; el hueco queda registrado como candidato a canon en vez de falseado. - **El escalonado estaba roto y el comentario mentía**: puse `spring-pop` (driver JS) en los planes, y un driver JS no lee el `animation-delay` donde vive el stagger — entraban TODOS a la vez mientras el comentario afirmaba lo contrario. Vuelto al preset CSS: verificado, índices 0,1,2 a 70ms. - **Comentario falso en la demo del hero**: atribuía al `intent` visual una consecuencia sonora/háptica que ningún camino produce (el morfo del Button dice explícitamente que `contact-activate` NO lleva intent). Reescrito. - **Composition maps mentían**: los 6 blocks que ahora componen `Motion` no lo decían; el hero seguía diciendo `Heading` (es `Display`), sin `Backdrop` ni `decor`, y declaraba DIFERIDO un preset de cromo de media que ya está shipeado (`Mockup`). Al día, sin filas duplicadas ni datos rancios (el chip de feature-grid es `solid`, no `soft`). - **Handoff y plan**: el plan seguía prescribiendo un `<Reveal>` que esta misma sesión creó y retiró; el handoff daba `feature-split` por «sin decidir» estando hecho, y los gates con números falsos. Verificado: `blocks:check` verde (7) · `svelte-check` sin errores propios · en el navegador, pricing escalona de nuevo, las etiquetas vienen de la app y ninguna tarjeta pinta sombra. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2 months ago
dev	ceab195ae1	feat(blocks): el arco semántico completo — contacto al pulsar, commit al elegir ... Elegir un plan ya no era solo un click: ahora demuestra el momento `--event` entero, que es lo que ninguna referencia puede shippear. - Pulsar emite `contact-activate` — gratis, por composición: es el evento del morfo del propio `Button`. Eso ya funcionaba en todos los bloques. - Lo que faltaba es la CONSECUENCIA: la app emite `commit-select` con intent `affirm` (CANON §2: una elección activa es afirmativa) vía `uix.events`. Un block no puede emitir eventos propios —no tiene morfo, contrato B—, así que la consecuencia es necesariamente app-land; la demo la ejerce para que el arco se vea. El commit va DESPUÉS del resultado (`await tick()`), no en la pulsación. Es la doctrina (un commit es lo que quedó fijado, no el contacto) y además evita una colisión real que medí: emitidos a la vez sobre el mismo elemento, la proyección del contacto pisa la del commit. Verificado con MutationObserver usando `attributeOldValue` —sin él la medición MIENTE, porque el callback se agrupa en microtarea y `getAttribute` ya devuelve el valor sobrescrito—: la secuencia es `contact-activate` → `commit-select` (family `commit`, intent `affirm`), cero errores de página. `blocks:check` verde (7) · `svelte-check` sin errores propios. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2 months ago
dev	164ca0183e	feat(blocks): movimiento en TODOS los bloques, vídeo e intent semántico ... El acabado deja de vivir solo en el hero. Los seis bloques restantes entran ya con movimiento, la media admite vídeo de verdad y los CTA declaran su intención semántica en vez de ser neutros. - **Movimiento en los 7**: cada rejilla marca `data-stagger` en SU contenedor y sus celdas SON un `Reveal` (feature-grid.Item, testimonials.Item, pricing.Plan) — el foundation les da el índice por `:nth-child`, así que las tarjetas se reparten una tras otra sin un solo milisegundo escrito a mano. Cabeceras, filas de feature-split (copy y media con un compás de diferencia) y el acordeón del FAQ entran también. - **Vídeo**: el hero acepta un `MediaPlayer` del canon dentro del mismo `Mockup` —nada a medida, el slot `media` toma lo que la app componga— y la demo lo expone como control («panel» / «vídeo»). La pregunta «¿y si quiero poner un vídeo?» ya tiene respuesta demostrada, no teórica. - **Semántica en la interacción**: los CTA llevan `intent`. El primario del hero es `fulfill` (esa pulsación consuma la página); en pricing, `fulfill` en el plan recomendado y `affirm` en el resto. Un CTA neutro no significa nada, y los 7 bloques lo eran. Nota arquitectónica: un block NO puede declarar eventos sema propios — no tiene morfo, es el contrato B. Su semántica entra por dos vías, y las dos estaban sin usar: el `intent` de los componentes que compone, y los eventos que esos componentes ya emiten (Accordion emerge, ToggleGroup, Drawer). Verificado con Playwright en los 6: reveals con índices estructurales (feature-grid 0..5, testimonials 0..4, pricing 0..2, hero 0..3), vídeo pintando 470×264, intents `fulfill`/`affirm` llegando al DOM, cero errores de página. `blocks:check` verde (7) · `vitest src/uix/eidos` 361/361 · `svelte-check` sin errores propios. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2 months ago
dev	f190a2266e	feat(eidos): `Reveal` + `Backdrop` + cascada por viewport — la capa de acabado ... Auditoría del tier (docs/process/PLAN-blocks-quality.md): los 7 blocks de F2 componían EXCLUSIVAMENTE la capa de layout (Box/Stack/Grid/Section/Text/Card). Uso de la capa expresiva del framework: cero. Ni un Motion, ni un Cascade, ni un Display, ni un TextGradient, ni un CountUp. La causa es estructural, no de gusto: el contrato B prohíbe que un block traiga `.css`, así que **un block solo puede ser tan expresivo como los componentes del canon que compone** — y faltaban dos primitivas. El arreglo no es maquillar 14 blocks uno a uno, es construir lo que falta en el canon y componerlo. - **`Reveal`** — reproduce la ENTRADA de un preset al entrar en viewport. No posee keyframes ni timing: estampa `data-animation-style` + `data-state='open'` cuando dispara el observador, así que reduced-motion degrada DENTRO del preset. Mientras espera, el recipe lo mantiene invisible bajo `@media (scripting: enabled)`: sin JS la regla no aplica y el contenido se ve siempre — el fallo de una animación de scroll debe ser «sin animación», nunca «página en blanco». - **Escalonado gratis**: el foundation ya escribe `--motion-stagger-index` en cada hijo de `[data-stagger]` (por `:nth-child`, sin JS) y los presets retrasan por `índice × --motion-stagger-each`. El recipe de Reveal le da ritmo por defecto, así que una lista se escalona poniendo `data-stagger` en SU contenedor: cero delays a mano, cero números en el consumidor. - **`Cascade trigger="viewport"`** — la cascada existente esperaba a `open` (disclosure); ahora puede esperar también a ser vista. - **`Backdrop`** — la capa de profundidad que no existía: `glow` · `mesh` · `grid` · `dots`, pintada en un `::before` desde tokens (acento por el forward de paleta, mesh desde `--gradient-aurora`), con `fade` para no cortar en seco. **El hero como prueba del nuevo listón**: `Display` (el primitivo de tipografía de hero que existía y no usaba — el titular pasa de `Heading` a 80px reales), entrada escalonada de eyebrow/título/subtítulo/acciones, media con `scale-fade` y `decor` (glow por defecto) expuesto como control vivo en la demo. Verificado con Playwright: glow pintado desde el token de paleta, 4 Reveal con índices estructurales 0·1·2·3 a 70ms, titular H1 a 80px, y el patrón `grid` con su máscara. `blocks:check` verde (7 blocks) · `vitest src/uix/eidos` 361/361 · `svelte-check` sin errores propios. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2 months ago
dev	54b8b838e7	feat(blocks): F2.6 `faq` — proxy fino del Accordion del canon ... La sección de preguntas: una cabecera sobre un acordeón de P/R en columna estrecha. Compound (`.Item` repite) y —la regla al envolver un componente interactivo— un PROXY FINO del `Accordion` del canon: el block lee su API y la pasa tal cual, no reinventa el disclosure. `<Faq>` + `.Header` + `.List` + `.Item`. - `.List` **ES** el `Accordion`: toda su API pasa sin gate — `type` (single/multiple), `bind:value`, `collapsible`, `variant`, `size`. Defaults de FAQ: single, collapsible (el abierto se puede cerrar), outline. - `.Item` proxya `Accordion.Item > Header > Trigger`(snippet `question`) / `Content`(children) y autogenera el `value` (clave de estado) con `$props.id()` si no se pasa — la única conveniencia sobre el andamiaje. - El teclado (flechas, Home/End, Enter/Espacio), `aria-expanded` y `aria-controls` salen del `Accordion`; el block no toca la a11y del disclosure. `Container` estrecho (`md`) para una columna legible. Demo (`web/routes/blocks/faq/`): full-bleed + ruta `preview`, cinco preguntas en una columna, con la cola «¿aún tienes dudas?» que la app pone tras `.List`. Huecos a decisión del usuario (Gaps): la **lista estática 2/3 columnas** (6 de 7 en TW NO son acordeón, sino P/R siempre abiertas) — otra disposición, prop `layout` o hermano. Verificado en navegador: el acordeón abre/cierra, claro/oscuro × LTR/RTL. `blocks:check` verde (7 blocks) · `svelte-check` sin errores propios. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	3 months ago
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