8.6 KiB
chat-composer — alcance de tema: análisis y propuesta
Generado por
node --import tsx/esm scripts/theming-census.ts --report. Lo medido y la propuesta se regeneran; el Veredicto (§5) se conserva. Vista de conjunto: README · método y protocolo:PLAN-theming.md§1, §2, §7.
- Medido: 2026-08-23 (tras el commit) · Alcance: 100% — 34 de 34 knobs por token público
- Knobs de apariencia: 39 — público 34 · privado 0 · global 0 · literal 0 · sistema 5 · excepción 1 (los dos últimos, fuera del ratio)
- Contrato hoy (
lib/recipes/base.ts): 33 pública(s) —gap,bg,border,border-width,focus-border,radius,padding-inline,padding-block,input-font-size,input-line-height,input-fg,input-placeholder-fg,input-padding-inline,input-padding-block,context-bg,context-accent,context-accent-size,context-font-size,context-fg,context-radius,context-padding-inline,context-padding-block,context-gap,context-close-size,context-close-radius,attachments-gap,send-size,send-bg,send-fg,send-radius,transition-duration,transition-ease,disabled-opacity - Eje
size: no · ficheros:chat-composer.css
1. Knobs fuera de alcance
1.1 Directo a primitivo global (0)
Ninguno — los tres que había (los dos ejes y el radio del chip de descarte) están cosidos en dos claves: la clave es del componente, el valor sigue siendo el del sistema.
1.2 A través de un privado (0)
Ninguno.
1.3 Literales (0)
Ninguno sin firmar.
1.4 Excepciones firmadas (1) — fuera del ratio
Literales que llevan su anotación /* literal: <razón> */ en la propia
declaración: la válvula de recipe-contract §3, la misma que honra
component-audit. Una desviación firmada no es deuda — se listan para que la
razón se lea, no para acuñarlas.
| # | fichero:línea | selector | propiedad | valor | razón |
|---|---|---|---|---|---|
| 1 | chat-composer.css:123 |
[data-chat-composer-input] |
inline-size |
100% |
el textarea ocupa su celda de la rejilla — identidad |
Y cuatro declaraciones RETIRADAS por muertas (no son excepción: dejaron de
existir): [data-chat-composer-context-close] > svg (1em en los dos ejes) y
[data-chat-composer-send] > svg (1.1em). Los dos glifos son Icon
compuestos y el Icon escribe style="width: var(--icon-size-{k})" EN LÍNEA:
ningún selector gana a un estilo en línea. Medido — cierre 14 px
(--icon-size-xs) contra los 13,3 px de 1em; envío 16 px (--icon-size-sm)
contra los 14,7 px de 1.1em. Retirarlas da 0 diffs.
2. Sistema transversal (5) — informativo, fuera del ratio
Un tema los alcanza a nivel de sistema, por diseño (recipe-contract §2).
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | chat-composer.css:78 |
[data-chat-composer-context-close]:hover |
background-image |
linear-gradient(var(--state-hover), var(--state-hover)) |
| 2 | chat-composer.css:82 |
[data-chat-composer-context-close]:active |
background-image |
linear-gradient(var(--state-press), var(--state-press)) |
| 3 | chat-composer.css:160 |
[data-chat-composer-send]:hover |
background-image |
linear-gradient(var(--state-hover), var(--state-hover)) |
| 4 | chat-composer.css:164 |
[data-chat-composer-send]:active |
background-image |
linear-gradient(var(--state-press), var(--state-press)) |
| 5 | chat-composer.css:177 |
[data-chat-composer-context-close]:focus-visible, [data-chat-composer-send]:focus-visible |
outline |
var(--focus-ring-width) solid var(--focus-ring-color) |
3. Privados de la receta — ¿de dónde sale su valor?
La receta no declara privados propios en su CSS.
4. Propuesta de corrección
4.1 EJECUTADA (2026-08-23) — 2 claves acuñadas, 4 declaraciones retiradas
La propuesta generada pedía 5 claves. Entraron 2:
| propuesto | acuñado | por qué |
|---|---|---|
context-close-width + context-close-height (⚠ dos valores) |
context-close-size |
el chip es un control CUADRADO: una clave para los dos ejes, la forma que send-size ya usa en esta misma receta. El ⚠ del generador era un falso conflicto: fundía la caja con su glifo |
context-close-radius |
context-close-radius |
correcto |
send-width / send-height (1.1em) |
— | la regla estaba MUERTA (el Icon compuesto escribe su tamaño en línea): retirada, junto con la gemela del chip de cierre |
4.2 Sin nombre mecánico (1)
- El
inline-size: 100%del textarea es identidad (§1.4), firmado con su anotación.
4.4 Lo que hay que comprobar a mano (PLAN-theming §1.3 · §7.4)
- Privado que no deriva de un público — §3 lo marca; el privado debe leer el público o desaparecer.
- Velo o acento en el nodo equivocado (
archetype: 'item'en un envoltorio, unbackgrounden shorthand que mata la capa de estado) — se mide desde el píxel hacia arriba. - Doble animación al mover un sello a una superficie con animación propia — registro de
animationstart/animationend. - Diff de computed = 0 en reposo · hover · abierto · disabled · foco, por talla, antes y después.
- Centinela por token nuevo: valor imposible en el root → el nodo lo sigue. Si no, el token miente.
5. Veredicto
EJECUTADO 2026-08-23 — 79 % → 100 %. Contrato 31 → 33 claves; censo
público 34 · global 0 · literal 0 · sistema 5 · excepción 1. Centinela
29/33, 4 adjudicadas. component-audit PASS · eidos-lint 0 invalid ·
rtl:check 0 · docs:check 0 · check sin errores del componente.
La mitad de su contrato no la montaba la demo. El guard leía 14 muertas de
31, y once eran la barra de contexto (context-*, opt-in tras un chip) más la
bandeja de adjuntos (attachments-gap, opt-in tras un botón). Con las dos
encendidas por prepareWith, 29/33 sin tocar el código. El resto es lo de
siempre: enciende sólo lo que no tapa y cuenta los nodos (9 aquí, con los dos
glifos).
Lo acuñado son DOS claves, no cuatro. El generador partía el chip de
descarte en width + height y marcaba conflicto porque metía en el mismo
saco la caja (26 px) y su glifo (1em). Son dos cosas distintas: la caja es un
control cuadrado —una clave, context-close-size, como send-size en esta
misma receta— y el glifo no es un knob de tema.
Cuatro declaraciones RETIRADAS por muertas. Los dos > svg (el 1em del
cierre y el 1.1em del envío) no pueden ganar: el Icon compuesto emite
style="width: var(--icon-size-{k})" INLINE. Medido: 14 px contra 13,3 px, y
16 px contra 14,7 px. Retirarlas da 0 diffs. Es la misma lección que chat-log
la misma tarde, con dos glifos en vez de uno.
Y una colisión ENTRE RECETAS que no es del instrumento:
--chat-composer-disabled-opacity no alcanza porque file-upload barre
DESCENDIENTES — [data-file-upload] [data-disabled] pesa (0,2,0), lo mismo que
[data-chat-composer-send][data-disabled], y su receta se emite MÁS TARDE.
El composer vive dentro de un FileUpload en su composición DOCUMENTADA (su
propio README y su demo), así que pierde siempre. Fuera del envoltorio alcanza
(0.4 → 0.123 en el send y en el shell). Los dos defaults son
--opacity-disabled, así que la colisión es invisible hasta que un tema mueva
uno. No se arregla aquí (tocar file-upload es cascadear): se adjudica.
Las otras tres adjudicaciones son hábitos del guard: focus-border (sólo
bajo :focus-within, y el guard blurea tras abrir; enfocado el textarea REAL,
color(srgb …/0.48) → rgb(1, 2, 3)) y el par de la transición, que ES la
transición que el guard congela (0,12 s → 4,321 s sin congelar).
El diff de computed NO salió limpio del todo, y la causa está medida: 2-4
valores de [data-chat-composer-attach] blockSize, que flota entre 30 px y
36 px. Flota igual corriendo dos veces el MISMO código (control: after vs
after2, 2 diffs). La causa: en una recarga de cada ocho, el Button size="sm" variant="ghost" que la demo compone en esa ranura computa 36 px y fondo
oklch(0.5556 0.1829 305.86) —el sólido primario— con sus data-size y
data-variant puestos: las reglas de talla/variante de button llegan tarde
en el dev server. Un nodo que esta receta no dimensiona, y una carrera de CSS
del servidor de desarrollo. Los 2.204 valores restantes, idénticos.
Lo que queda fuera y por qué: una identidad firmada (§1.4) y cinco knobs de sistema transversal (§2). El componente está CERRADO en su número.