# Editable Eidos `Editable` viste el primitive headless de Soma para edición inline. Air no tenia equivalente directo en `src/uix/air/components`, pero la rama anterior si tenia baseline en `src/uix/terra/editable`. ## Baseline | Fuente | Superficie | Estado Eidos | | --- | --- | --- | | Air `glm-5` | No existe `src/uix/air/components/editable`. | Sin baseline Air directa. | | Terra `glm-5` | `Root`, `Area`, `Preview`, `Input`, `EditTrigger`, `SubmitTrigger`, `CancelTrigger`; preview inline, input solo en modo edición y acciones auxiliares. | Baseline visual recuperada: `Editable` no debe parecer un `Field/Input` permanente. | | Soma actual | `Provider`, `Area`, `Preview`, `Input`, `EditTrigger`, `SubmitTrigger`, `CancelTrigger`; activation/submit modes, draft, auto-resize, max length, disabled/readonly. | Cubierto por passthrough. Eidos anade `size`, `variant`, `color` y receta. | | Chakra / Ark Editable | Root, Area, Preview, Input, Control, Edit/Submit/Cancel triggers, activation modes, selectOnFocus, textarea. | Cubierto salvo `Control` dedicado; `Area` agrupa preview/input y triggers son hermanos. | | Radix Vue Editable | Root, Area, Preview, Input, Edit/Submit/Cancel triggers. | Cubierto. | | React Aria TextField | Label/Input/TextArea accesibles, pero no inline-edit compuesto. | `Editable.Input` puede renderizar textarea via child snippet; label externo queda en `Field`. | Referencias externas consultadas: - Chakra UI Editable: https://chakra-ui.com/docs/components/editable - Radix Vue Editable: https://www.radix-vue.com/components/editable - Park UI / Ark Editable: https://park-ui.com/docs/components/editable - React Aria TextField: https://react-aria.adobe.com/TextField ## API Eidos ```svelte Edit Save Cancel ``` ## Decisiones - No se crea `Provider` publico: el root visual es `Editable`. - No se anade API flat con snippets. - `Editable.Control` agrupa acciones; Soma expone estado en el control y en los triggers, y Eidos decide la visibilidad visual de Edit frente a Save/Cancel. - `size` es responsive y se resuelve con `ActiveEidos`. - `variant` controla el tratamiento del preview/input, pero el preview se mantiene como contenido inline: si se quiere una caja permanente se debe usar `Field`/`Input`, no `Editable`. - `color` usa paletas canonicas de Eidos para foco y submit. - El soporte textarea se mantiene en Soma mediante `child`. ## Talla y tema 56 claves públicas. Las escalas van por talla con su nombre resuelto (`gap-{k}`, `control-height-{k}` sobre el bundle `--size-{k}-control-height`, `control-padding-inline-{k}`, `font-size-{k}`) y el cromo por PARTE: el control (`control-radius`, `control-border-width`, `control-bg`, `control-shadow`, `hover-control-border`, `placeholder-fg`) y los triggers (`trigger-*`, `hover-trigger-*`, `submit-fg`). Lo que entró el **2026-08-23** (75 % → 82 %): - **`disabled-fg`** — la tinta apagada de TODO el componente: preview, input y los tres triggers comparten la regla, así que el nombre desnudo del catálogo es el que toca (`label` y `select` ya lo llevan con este mismo valor). El CSS leía el primitivo a pelo, y además con un respaldo escrito a mano (`, var(--color-content-muted)`) que estaba MUERTO: `--color-content-disabled` sí está declarado, así que el respaldo no podía pintar nunca. - **`control-border` RETIRADO**: no lo consumía ninguna regla. El borde en reposo del control es `transparent` por diseño y el del input es el acento (`--_editable-palette-border`), así que esa clave pública prometía un knob que no existe. Retirarla no mueve un píxel. - **Dos literales de identidad firmados**: el `fit-content` del preview (es tan ancho como el texto que enseña) y el `100 %` del input (llena la celda de rejilla que comparte con el preview). **Lo que queda fuera, y por qué**: los siete knobs que van por privado son el puente de paleta THM-2 (`--_editable-palette-{solid,border,solid-hover}`), que la capa compartida alimenta por instancia desde `[data-color]` — un público encima dejaría que un tema lo fijara y matara el `color=` de cada instancia. Y cuatro knobs son sistema transversal (el anillo de foco y el velo de hover). ⚠ **Las doce claves de tono (`{tono}-{solid,border}`) no mueven nada hoy**: el bloque genérico `[data-editable][data-color]` del forward de paleta se emite EL ÚLTIMO y gana por orden a igual especificidad, así que la pintura sale del `--palette-*` global. Medido con el mecanismo a la vista — quitando `data-color` de la instancia, `--editable-primary-solid` vuelve a pintar. Es el hallazgo de cascada de paleta de next-features §13 y espera firma. ## Eventos Morfo declara: - `shift-enter-mode`: entrada en modo edición. - `commit-save`: submit del draft. - `commit-cancel`: cancelación/revert. La escritura de estado queda en Soma; Sema sólo recibe señales agregadas y no observa cada pulsación dentro del input. ## Comparativa | Capacidad | Bits UI | Ark UI | React Aria | shadcn-svelte | UIX | | --- | --- | --- | --- | --- | --- | | Surface compound (root + parts) | ✓ | ✓ | ✓ | ✓ | ✓ | | ARIA semantics + keyboard nav | ✓ | ✓ | ✓ | parcial | ✓ via morfo | | Variantes visuales (size / variant) | parcial | parcial | n/a | tailwind | ✓ recipe | | Form integration | parcial | parcial | ✓ | parcial | ✓ via Field | | Eventos sema declarativos | n/a | n/a | n/a | n/a | ✓ | ## Gaps | Gap | Disposición | Detalle | | --- | --- | --- | | API extendida sobre las referencias externas | **diferir** | Sólo si llega un caso de uso real. Mantener la superficie estable. | | Cobertura adicional de variantes visuales | **diferir** | El recipe cubre sm/md/lg + solid/outline/ghost. Más variantes requieren caso concreto. | | Documentación per-prop exhaustiva | **implementar** | Cuando se cierre el ciclo de remediación de cada componente. | | Tests browser-level del flujo completo (Playwright) | **implementar** | Cobertura visual + interacciones. Se hace en una pasada conjunta de tests. |