svelte-kit-vice/web/routes/uix/components/words/README.md

Words Demo

La demo publica vive en web/routes/uix/components/words/+page.svelte y sigue la plantilla bloqueada de UIX:

• Live, API, Morfo, Sema, Recipe y A11y.
• Stage permanente entre header y tabs.
• MutationObserver sobre data-event.
• Snippets Soma y Eidos reactivos.
• Controles visibles para documento, toolbar, estados Soma, size, variant y color.
• Toolbar Eidos agrupado por familias/submenus en presets minimal, formatting, full y custom.
• Import/export visible para JSON, texto, HTML limpio/import seguro y Markdown con listas indentadas, find/replace regex/preserve-case/current-match/selection, code blocks con highlighting runtime y tablas con formato de celda/tabla.
• API documentada para leer/actualizar language de code blocks desde snippets (currentCodeLanguage / setCodeLanguage).
• Selector visual Words.CodeLanguagePicker dentro de los presets de toolbar para cambiar el lenguaje del bloque code seleccionado.
• Tokens de syntax highlighting visibles desde data-words-code-token sin contaminar el export HTML limpio.
• SlashMenu opcional visible en snippets Soma/Eidos: /query abre comandos de bloque/lista/tabla anclados al caret y navegables por teclado.
• Tablas editables visibles en el preset sample, con toolbar y slash command para insertar una tabla 2x2 canonica, botones de fila/columna, navegacion por celdas con Tab/Shift+Tab y formato desde el submenu Table: header row/column, alineacion horizontal, vertical align, tonos de celda, striped rows y compact table. La demo tambien verifica formato inline dentro de celdas desde el submenu de texto. El submenu Table se renderiza por secciones rotuladas y con ancho acotado para evitar una matriz opaca de iconos.
• Checklist interactiva: el marcador de cada item se puede clicar y Ctrl/Cmd+Enter alterna el item actual.
• El snippet Soma refleja la misma capacidad con un <select> manual usando currentCodeLanguage y setCodeLanguage, porque el picker visual pertenece a Eidos.
• BubbleMenu contextual visible cuando hay seleccion de rango, compuesto con los mismos CommandButton y LinkEditor del toolbar principal.
• Sema tab con reproduccion de los eventos Morfo sobre el stage real.

Cobertura Live

Area	Controles
Documento	sample, empty, long
Soma	placeholder, toolbar, orientation, bubble menu, slash menu, import/export, disabled, readonly, required, invalid, commitOnBlur, status
Eidos	size: sm/md/lg, variant: surface/outline/ghost, color: full ColorRole
Estado visible	blocks, words, selection, export, import, last commit

Notas

• No hay data-* inventados por la demo para pintar el editor; la receta lee los attrs de Morfo/Soma.
• La seleccion se muestra como none, collapsed o range.
• El cambio de preset/import remonta el editor solo como reset explicito de la demo; Soma ya sincroniza cambios externos de value y selection sin depender de remount.