6.3 KiB

Raw Blame History

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

<Editable bind:value activationMode="click" submitMode="both" size="md" color="primary">
	<Editable.Area>
		<Editable.Preview />
		<Editable.Input />
	</Editable.Area>
	<Editable.Control>
		<Editable.EditTrigger>Edit</Editable.EditTrigger>
		<Editable.SubmitTrigger>Save</Editable.SubmitTrigger>
		<Editable.CancelTrigger>Cancel</Editable.CancelTrigger>
	</Editable.Control>
</Editable>

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.

6.3 KiB Raw Blame History