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>
| **Los primitivos de layout no pueden cambiar de elemento** (F21) | **canon, registrado**: `Box` —y con él `Grid`/`Flex`/`Stack`— renderiza un `<div>` fijo, así que `<main>` / `<aside>` no pueden SER una caja del sistema. Por eso esos dos elementos llevan un `style` en línea con dos declaraciones (`flex`, `min-inline-size`, `overflow`). No es re-estilizar internals de un compuesto (B-3): es el elemento propio del block. Precedente en el tier: `article-grid-article.svelte` |
| **Topbar a todo lo ancho** (eje `layout` del `Sidebar`) | **canon, v2** — el provider del `Sidebar` es la fila flex. Lo pedirá `docs-shell` (F4.1) |
| **El `Sidebar` no publica su ancho actual** | no hace falta aquí (la reserva es flexbox), pero un app que quiera anclar algo al borde del rail no tiene a qué. Mantine expone 8 vars `--app-shell-*`; anotado por si aparece un consumidor real |
| **Superficie online/offline** | no existe en el ecosistema (ni art ni dimensión de prefs). Un ribbon de «sin conexión» en `banner` lo tiene que alimentar el app desde `Connections.anyReconnecting` |
| **Dos landmarks `banner`** cuando el `banner` que entra es el canon `Banner` | **ledger A-109**, del canon: `Banner` estampa `role="banner"` DESPUÉS de los rest props, así que no se puede quitar. Nombrar los dos es todo lo que puede un app |
| `scroll-margin-block-start` en los destinos bajo `scroll="body"` | del consumidor: la altura de la cabecera la sabe él. Lo cerrará `docs-shell`, que es quien tiene anclas |
| **Los primitivos de layout no pueden cambiar de elemento** (F21) | **canon, registrado**: `Box` —y con él `Grid`/`Flex`/`Stack`— renderiza un `<div>` fijo, así que `<main>` / `<aside>` no pueden SER una caja del sistema. Por eso esos dos elementos llevan un `style` en línea con dos declaraciones (`flex`, `min-inline-size`, `overflow`). No es re-estilizar internals de un compuesto (B-3): es el elemento propio del block. Precedente en el tier: `article-grid-article.svelte` |
| **Topbar a todo lo ancho** (eje `layout` del `Sidebar`) | **canon, v2** — el provider del `Sidebar` es la fila flex. Lo pedirá `docs-shell` (F4.1) |
| **El `Sidebar` no publica su ancho actual** | no hace falta aquí (la reserva es flexbox), pero un app que quiera anclar algo al borde del rail no tiene a qué. Mantine expone 8 vars `--app-shell-*`; anotado por si aparece un consumidor real |
| **Superficie online/offline** | no existe en el ecosistema (ni art ni dimensión de prefs). Un ribbon de «sin conexión» en `banner` lo tiene que alimentar el app desde `Connections.anyReconnecting` |
| **Dos landmarks `banner`** cuando el `banner` que entra es el canon `Banner` | **ledger A-109**, del canon: `Banner` estampa `role="banner"` DESPUÉS de los rest props, así que no se puede quitar. Nombrar los dos es todo lo que puede un app |
| `scroll-margin-block-start` en los destinos bajo `scroll="body"` | del consumidor: la altura de la cabecera la sabe él. Lo cerrará `docs-shell`, que es quien tiene anclas |
| **`Sidebar.MenuButton` es MUDO y `NavigationMenu.Link` no** — el mismo acto, dos respuestas | **canon, para una sesión de sema**: elegir un destino en una superficie de navegación emite `commit-select` en el `NavigationMenu` y NADA en el `Sidebar` ni en el `NavTree` (sus morfos sólo declaran `emerge-expand`/`emerge-collapse` sobre el panel). El README del `Sidebar` lo firma —«navegar una fila es nativo y no suena»— pero entonces el `NavigationMenu` contradice la firma. Además, en un shell la fila del raíl casi nunca navega: SELECCIONA la sección (`aria-current="page"`), que es exactamente el caso de `commit.select`. No se decide desde el tier |
| **`Toolbar.Button` no acepta `variant`/`color`** | **canon, anotado**: `ToolbarButtonProps` tipa contra el `ButtonProps` de SOMA (`{ id, disabled }`), así que el tratamiento es del root y todos los ítems lo llevan igual. Un grupo donde una acción es la principal no tiene cómo decirlo desde dentro; aquí la principal va al lado del cluster, como en las referencias |
| **No existe `description-list`** | **canon, F5**: el backlog lo condiciona a «el primer detail-view real» — y el panel de detalle de este shell lo es. Mientras no exista, el significado lo llevan `dl`/`dt`/`dd` con la tipografía del tema, y se declara aquí en vez de fingirlo con `div`s |
