You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
8.6 KiB
145 lines
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](./README.md) · método y protocolo:
|
|
> [`PLAN-theming.md`](../../process/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, un `background` en 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
|
|
|
|
<!-- veredicto:start -->
|
|
|
|
**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.
|
|
|
|
<!-- veredicto:end -->
|