@groupteknology/vuno 0.6.0 → 1.0.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Diego Otayza
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Diego Otayza
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,8 +1,16 @@
 # @groupteknology/vuno
 
-Formularios, tablas y diálogos declarativos para Nuxt 4, construidos sobre [Nuxt UI](https://ui.nuxt.com).
+Formularios, tablas y diálogos declarativos para Nuxt 4, con componentes propios y sin librería de interfaz por debajo.
 
-El módulo **no aporta estética**. Todo lo que pinta sale del tema del proyecto que lo instala: usa las utilidades semánticas de Nuxt UI (`bg-default`, `text-muted`, `border-default`), su escala de radios y sus colores. Si cambias `primary` o `--ui-radius`, los componentes de vuno cambian contigo.
+El módulo **trae su propia estética, y se sobreescribe entera desde el proyecto**. Todo lo que pinta se deriva de un puñado de variables CSS —los tokens `--vuno-*`—, así que redefinir una cambia vuno entero sin tocar un solo componente. Lo que necesita comportamiento difícil —combobox, menú, pestañas, tooltip, campo numérico— lleva su patrón ARIA y su teclado escritos aquí, con [Floating UI](https://floating-ui.com) para colocar lo que flota y nada más; el resto son elementos nativos.
+
+Un color o un radio escrito a mano dentro de un componente es un error: si algo no se puede cambiar desde los tokens, falta un token.
+
+## Documentación
+
+El catálogo vive en **<https://groupteknology.github.io/vuno/>**: una ficha por componente, con la vista viva, los controles que la mueven, el código que produce cada combinación y las tablas de props, slots y emits al pie.
+
+Lo que hay aquí abajo es la referencia corta, para leerla sin salir del editor.
 
 ## Instalación
 
@@ -13,7 +21,24 @@ pnpm add @groupteknology/vuno
 ```ts
 // nuxt.config.ts
 export default defineNuxtConfig({
-  modules: ['@nuxt/ui', '@groupteknology/vuno'],
+  modules: ['@groupteknology/vuno'],
+})
+```
+
+Eso es todo: el módulo registra sus componentes, su hoja de estilos, el compilador de Tailwind y `@nuxt/icon`, que es quien pinta los iconos.
+
+¿Vienes de la `0.6.1`? El [changelog](https://github.com/groupteknology/vuno/blob/main/packages/core/CHANGELOG.md) dice qué se rompe y qué mirar después.
+
+### Tailwind
+
+**El módulo registra el compilador de Tailwind** (`@tailwindcss/vite`). No es una comodidad: la hoja que empuja vuno empieza por `@import 'tailwindcss'`, y sin nadie que lo compile ese import no hace nada —las variables del tema llegan, porque son CSS normal, y ni una sola utilidad—. La aplicación se sirve, no falla nada y sale sin estilos, que es el peor modo de fallar.
+
+Si tu proyecto ya monta Tailwind, se detecta y no se duplica. Y si prefieres llevarlo tú:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@groupteknology/vuno'],
+  vuno: { tailwind: false },
 })
 ```
 
@@ -53,8 +78,8 @@ const definition = {
 <template>
   <VForm v-model:state="state" :definition="definition" :schema="schema" @submit="guardar">
     <template #footer="{ dirty, reset }">
-      <UButton :disabled="!dirty" label="Descartar" variant="ghost" @click="reset" />
-      <UButton label="Guardar" type="submit" />
+      <VButton :disabled="!dirty" label="Descartar" variant="ghost" @click="reset" />
+      <VButton label="Guardar" type="submit" />
     </template>
   </VForm>
 </template>
@@ -68,6 +93,14 @@ const definition = {
 
 Cada uno declara sus propios props mediante una unión discriminada por `type`, así que el editor te avisa si a un `slug` le falta el `source` o si le pasas un `placeholder` a un `file`.
 
+### Campos obligatorios
+
+`required: true` hace tres cosas: pinta el asterisco en la etiqueta, pone el atributo `required` en el input —que es lo que anuncia el campo como obligatorio a un lector de pantalla y lo que permite estilar `:invalid`— y nada más. **Quien decide si el valor vale es el esquema.**
+
+El `<form>` lleva `novalidate`, así que el navegador no valida por su cuenta. Sin eso convivirían dos validaciones y ganaría la del navegador: cortaría el envío antes de que el esquema llegase a ejecutarse, y el usuario vería un globo del navegador, en su idioma y fuera del tema, en lugar del mensaje que tú escribiste.
+
+Conviene saberlo si vienes de otras librerías, donde `required` suele pintar el asterisco y no llegar al control. Aquí llega, a propósito y por accesibilidad, y por eso el `novalidate` es necesario y no una preferencia.
+
 ### Campos repetibles
 
 `type: 'array'` repite un grupo de campos y genera rutas anidadas (`variants.0.sku`) que coinciden con las que produce la validación, de modo que cada campo muestra su propio error. Admite anidamiento.
@@ -94,8 +127,8 @@ El slot `footer` recibe `formId`, necesario para enviar desde un botón propio:
 ```vue
 <VFormModal v-model:open="open" v-model:state="state" :definition="definition" :title="title">
   <template #footer="{ close, formId, loading }">
-    <UButton label="Cancelar" variant="ghost" @click="close" />
-    <UButton :form="formId" :label="editando ? 'Guardar cambios' : 'Crear'" :loading="loading" type="submit" />
+    <VButton label="Cancelar" variant="ghost" @click="close" />
+    <VButton :form="formId" :label="editando ? 'Guardar cambios' : 'Crear'" :loading="loading" type="submit" />
   </template>
 </VFormModal>
 ```
@@ -177,7 +210,7 @@ Y la página queda sin saber nada de los campos:
 | La fila en edición | Un prop —`product`, `brand`, lo que sea— que vale `null` en el alta. De él salen el título y la etiqueta del botón. |
 | `@submit` | Significa «el usuario confirmó», nada más. Sin datos: ya están en `state`. |
 
-No es casualidad que encaje: son exactamente `state`, `formOpen`, `isSaving`, `editing` y `submit` de `useVunoCrud`.
+No es casualidad que encaje: son exactamente `state`, `formOpen`, `isSaving`, `editing` y `submit` de `useCrud`.
 
 #### Qué se queda fuera
 
@@ -189,7 +222,7 @@ El estado tampoco se queda dentro. Si el formulario declara su propio `ref` en v
 
 ## Una pantalla de mantenimiento entera
 
-`useVunoCrud` resuelve el ciclo completo: listar, dar de alta o editar en un modal, borrar con confirmación, invalidar la caché y avisar. Está construido sobre [TanStack Query](https://tanstack.com/query).
+`useCrud` resuelve el ciclo completo: listar, dar de alta o editar en un modal, borrar con confirmación, invalidar la caché y avisar. Está construido sobre [TanStack Query](https://tanstack.com/query).
 
 ```vue
 <script setup lang="ts">
@@ -197,11 +230,11 @@ El estado tampoco se queda dentro. Si el formulario declara su propio `ref` en v
 // responde 401 durante el render. `useRequestFetch()` sí la lleva.
 const request = useRequestFetch()
 
-const query = useVunoTableQuery({ sort: 'sku', url: true })
+const query = useTableQuery({ sort: 'sku', url: true })
 
 const { items, total, failure, isPending, isSaving, isDeleting,
         formOpen, editing, state, submit, openCreate, openEdit,
-        confirmOpen, deleting, askDelete, confirmDelete } = useVunoCrud<Product, ProductForm>({
+        confirmOpen, deleting, askDelete, confirmDelete } = useCrud<Product, ProductForm>({
   key: 'products',
   query,
   emptyForm: () => ({ name: '', sku: '' }),
@@ -222,7 +255,7 @@ La consulta forma parte de la clave de caché, así que cada página, filtro y o
 `key` acepta un getter o un `computed`, no solo un valor fijo. Hace falta en cuanto la pantalla tiene un selector —empresa, tienda, almacén—: con una clave fija, cambiar de empresa seguiría enseñando los datos de la anterior sin dar ninguna señal de error.
 
 ```ts
-const crud = useVunoCrud({
+const crud = useCrud({
   key: () => ['products', selectedCompanyId.value],
   // ...
 })
@@ -247,7 +280,7 @@ Mientras la clave está incompleta, `isPending` sigue en `true`: la pantalla est
 Para lo que no se deduce de la clave —un permiso, una pestaña que no está a la vista— está la opción `enabled`, que se suma a la condición anterior.
 
 ```ts
-useVunoCrud({ key: () => ['products', companyId.value], enabled: () => canRead.value, /* ... */ })
+useCrud({ key: () => ['products', companyId.value], enabled: () => canRead.value, /* ... */ })
 ```
 
 ### La clave de invalidación
@@ -261,7 +294,7 @@ key: () => productKeys.list(filtros) // solo refresca esa combinación de filtro
 
 ### Render en servidor
 
-`useVunoCrud` resuelve el listado durante el render en servidor, así que el HTML sale con las filas puestas y no aparecen al hidratar. Nuxt renderiza en servidor por defecto, de modo que esto no hay que activarlo.
+`useCrud` resuelve el listado durante el render en servidor, así que el HTML sale con las filas puestas y no aparecen al hidratar. Nuxt renderiza en servidor por defecto, de modo que esto no hay que activarlo.
 
 Para que además viaje en el payload y el cliente no vuelva a pedirlo, el plugin de vue-query del proyecto tiene que deshidratar. Es responsabilidad del consumidor, no del módulo:
 
@@ -286,7 +319,13 @@ Con la clave incompleta no se espera nada: la consulta está suspendida y espera
 
 Si compruebas esto con un test, **mira el HTML renderizado, no el payload**. El payload lleva la consulta resuelta aunque el prefetch esté apagado, porque la consulta se asienta después del render y el plugin deshidrata lo que encuentra: un assert sobre el payload pasa en las dos direcciones y no mide nada.
 
-`@tanstack/vue-query` es una dependencia opcional: solo hace falta si usas este composable.
+**`@tanstack/vue-query` lo instala el proyecto**, y solo hace falta si usas este composable:
+
+```bash
+pnpm add @tanstack/vue-query
+```
+
+No se declara como dependencia opcional del módulo a propósito. npm instala igualmente los `peerDependencies` marcados como opcionales, y como los de vue-query admiten Vue 2, acababa colocando `vue@2.6.14` en la raíz y chocando con el `vue@^3.5.0` que pide vuno: `npm install @groupteknology/vuno` fallaba con `ERESOLVE` en un proyecto Nuxt que no declarara `vue` por su cuenta. Con pnpm no ocurría, que es por lo que tardó en verse.
 
 ## Páginas
 
@@ -295,7 +334,7 @@ Si compruebas esto con un test, **mira el HTML renderizado, no el payload**. El
 ```vue
 <VPage title="Productos" description="Catálogo completo." :breadcrumb="[{ label: 'Inicio', to: '/' }, { label: 'Productos' }]">
   <template #actions>
-    <UButton icon="lucide:plus" label="Nuevo producto" @click="openCreate" />
+    <VButton icon="lucide:plus" label="Nuevo producto" @click="openCreate" />
   </template>
 
   <VTable ... />
@@ -306,9 +345,11 @@ Si compruebas esto con un test, **mira el HTML renderizado, no el payload**. El
 
 `VTable` funciona en modo servidor: emite el estado de consulta y tú devuelves la página.
 
+**`query` es obligatorio.** No es un `v-model` opcional: sin él la tabla no compila, y el error de tipos que sale encabeza con el objeto `definition`, así que manda a mirar el sitio equivocado.
+
 ```vue
 <script setup lang="ts">
-const query = useVunoTableQuery({ sort: 'sku', url: true, history: 'push', filterKeys: ['status'] })
+const query = useTableQuery({ sort: 'sku', url: true, history: 'push', filterKeys: ['status'] })
 
 const { data, status } = await useFetch('/api/products', {
   query: computed(() => ({ page: query.value.page, sort: query.value.sort?.column, ...query.value.filters })),
@@ -384,10 +425,10 @@ Y un aviso al ordenar: `sortable` ordena **en servidor por `key`**, y el servido
 `map` es solo de `badge`. Para traducir en otro tipo de columna, o para componer algo que no es una etiqueta, está `type: 'custom'` con su slot:
 
 ```vue
-<VTable :definition="definition" :data="rows">
+<VTable v-model:query="query" :definition="definition" :data="rows">
   <template #cell-stock="{ row, value }">
     <span class="tabular-nums">{{ value }} uds.</span>
-    <UBadge v-if="row.stock === 0" color="error" label="Agotado" />
+    <VBadge v-if="row.stock === 0" color="error" label="Agotado" />
   </template>
 </VTable>
 ```
@@ -404,16 +445,20 @@ const failure = computed(() => isError.value
   : undefined)
 ```
 
+Con `useCrud` no hace falta escribirlo: el objeto lo construye él, y el título y la pista se declaran en `messages` con `listFailed` y `listFailedHint`.
+
+Si vienes de componerlo a mano, cuenta con un efecto lateral: si tu proyecto tiene un test que sujeta esta invariante buscando el objeto en la pantalla, se pondrá **rojo** al mudar los textos, porque ahí ya no hay ningún `retry:` que encontrar. No es una regresión —la garantía sigue, solo que ahora la sostiene el tipo `VunoTableFailure`, cuyo `retry` es obligatorio y comprueba el typecheck— pero el test tiene que mirar otra cosa.
+
 El reintento va **dentro** del objeto para que no se pueda pintar un error sin ofrecer salida. Mientras hay fallo, la tabla no muestra filas ni paginación. El estado vacío se declara en la definición (`empty: { title, hint, icon }`) y tiene un slot `empty-actions` donde encaja el «crear el primero».
 
-Los dos estados existen además como componentes sueltos, para las pantallas que no son una tabla:
+Los dos estados existen además sueltos, para las pantallas que no son una tabla, y son **un solo componente con dos tonos**: `VState`. El tono no es un adjetivo sino el discriminante de una unión, así que `tone="failure"` exige el objeto del fallo y no hay forma de escribir un error sin su salida dentro:
 
 ```vue
-<VEmptyState title="Todavía no hay pedidos" hint="Aparecerán aquí en cuanto entre el primero." icon="lucide:inbox">
-  <template #actions><UButton label="Crear pedido" /></template>
-</VEmptyState>
+<VState title="Todavía no hay pedidos" hint="Aparecerán aquí en cuanto entre el primero." icon="lucide:inbox">
+  <template #actions><VButton label="Crear pedido" /></template>
+</VState>
 
-<VFailureState :failure="failure" />
+<VState tone="failure" :failure="failure" />
 ```
 
 Tipos de columna: `text` · `number` · `currency` · `date` · `boolean` · `badge` · `image` · `custom` · `actions`. Trae búsqueda con antirrebote, paginación, selección múltiple, panel lateral de filtros y menú de acciones por fila.
@@ -425,37 +470,109 @@ Tipos de columna: `text` · `number` · `currency` · `date` · `boolean` · `ba
 ```vue
 <VConfirm v-model:open="open" :title="`¿Eliminar ${marca.nombre}?`" @confirm="borrar">
   <p>Se eliminará <strong>{{ marca.nombre }}</strong>.</p>
-  <p class="text-warning">{{ marca.productos }} productos se quedarán sin marca.</p>
+  <p class="text-vuno-warning">{{ marca.productos }} productos se quedarán sin marca.</p>
 </VConfirm>
 ```
 
 No se cierra solo cuando recibe `loading`: así se espera a que la acción termine contra la API y se cierra desde fuera.
 
+## Modales del proyecto
+
+Un modal por componente, en `components/modal/`, abierto por su clave:
+
+```
+app/components/modal/ModalProduct.vue   ->   open('product')
+app/components/modal/ModalInvoice.vue   ->   open('invoice')
+```
+
+```ts
+const modal = useModal()
+
+const guardado = await modal.open<boolean>('product', { sku: row.sku })
+```
+
+No hay que registrarlo ni colocarlo en ninguna plantilla: el módulo marca esa carpeta como global, así que la clave **es** el nombre del componente y un modal que existe se puede abrir.
+
+El componente recibe `open` y los props que le pases, y resuelve la promesa emitiendo `close` con su resultado:
+
+```vue
+<script setup lang="ts">
+const emit = defineEmits<{ close: [guardado: boolean] }>()
+const open = defineModel<boolean>('open', { default: false })
+
+function guardar() {
+  open.value = false
+  emit('close', true)
+}
+</script>
+```
+
+Se pinta en `<VApp>` y no en la pantalla que lo abrió, así que navegar no lo desmonta a medias ni deja la promesa colgada. Cerrarlo con Escape o pulsando fuera resuelve sin valor.
+
 ## Composables
 
 | Composable | Para qué |
 |---|---|
-| `useVunoCrud` | El ciclo de mantenimiento entero sobre TanStack Query. |
-| `useVunoTableQuery` | Estado de consulta de una tabla, opcionalmente sincronizado con la query string. |
-| `useVunoForm` | Contexto del `VForm` que envuelve al componente: estado, `dirty`, `reset`. |
-| `useVunoField` | Lee y escribe un campo por su ruta; para construir campos propios. |
-| `useVunoTheme` | Resuelve los slots de un componente cruzando tema, `app.config` y prop `ui`. |
-| `useVunoIcons` | Los iconos configurados en `vuno.icons`. |
-| `useVunoMessages` | Los textos configurados en `vuno.messages`. |
+| `useCrud` | El ciclo de mantenimiento entero sobre TanStack Query. |
+| `useTableQuery` | Estado de consulta de una tabla, opcionalmente sincronizado con la query string. |
+| `useForm` | Contexto del `VForm` que envuelve al componente: estado, `dirty`, `reset`. |
+| `useField` | Lee y escribe un campo por su ruta; para construir campos propios. |
+| `useTheme` | Resuelve los slots de un componente cruzando tema, `app.config` y prop `ui`. |
+| `useIcons` | Los iconos configurados en `vuno.icons`. |
+| `useMessages` | Los textos configurados en `vuno.messages`. |
 
 Los tres últimos existen para que un componente tuyo pueda usar los mismos iconos, textos y reglas de tema que los de vuno sin duplicar la configuración.
 
 ## Personalización
 
-Tres niveles, de más global a más concreto:
+### Los tokens
+
+**Es el primer sitio al que hay que ir, y casi siempre el único.** Todo el color, el radio y la jerarquía de texto de vuno salen de variables CSS que se redefinen desde el proyecto. El caso mínimo, en cualquier hoja que cargue tu aplicación:
+
+```css
+:root {
+  --vuno-primary: var(--color-indigo-600);
+}
+```
+
+Con esa línea cambian los botones sólidos, el anillo de foco de todos los campos, el enlace activo, la casilla marcada y el acento de las insignias: no hay un solo componente que escriba ese azul por su cuenta.
+
+Los que hay:
+
+| Token | Para qué |
+| --- | --- |
+| `--vuno-primary` · `--vuno-secondary` · `--vuno-neutral` | Los tres acentos de marca. |
+| `--vuno-success` · `--vuno-info` · `--vuno-warning` · `--vuno-error` | Los cuatro de estado. |
+| `--vuno-*-contrast` | El texto que va **encima** de cada acento en su variante sólida. |
+| `--vuno-font-sans` · `--vuno-font-mono` | La tipografía. El módulo **nombra** la familia y no la carga: un `@import` a un servidor de fuentes convertiría cada visita de tu proyecto en una petición a un tercero. Cárgala tú —con `@nuxt/fonts` o con tu propio `@font-face`—; si no está, la pila de respaldo se encarga. |
+| `--vuno-surface` · `--vuno-surface-1` · `--vuno-surface-2` · `--vuno-surface-inverse` | La escala de elevación: **cada cosa sube un escalón sobre lo que la sostiene**. La página es la base —blanco en claro, negro en oscuro—, lo que se levanta de ella es el 1 y lo que se levanta dentro de algo ya levantado es el 2. |
+| `--vuno-text-strong` · `-body` · `-muted` · `-subtle` · `-inverse` | El texto por jerarquía, no por color. |
+| `--vuno-border` · `--vuno-border-strong` | El borde que decora y el que delimita un control. |
+| `--vuno-radius` | La curvatura de todo. |
+| `--vuno-backdrop` | El velo que oscurece detrás de un diálogo. |
+
+Dos cosas que ahorran un rato:
+
+- **El tema oscuro se redefine aparte**, bajo `.dark`. Si solo cambias `:root`, el modo oscuro se queda con el valor de serie.
+- **Cada acento sólido necesita su contraste.** Un `--vuno-warning` claro con texto blanco no se lee; por eso el ámbar de serie trae texto oscuro.
+
+```css
+.dark {
+  --vuno-primary: var(--color-indigo-400);
+}
+```
+
+### Los tres niveles del resto
+
+Para lo que no es color: la forma de un componente concreto, sus iconos y sus textos.
 
 ```ts
 // app.config.ts — para toda la aplicación
 export default defineAppConfig({
-  ui: { colors: { primary: 'indigo' } },
   vuno: {
     formSection: { slots: { root: 'border-dashed' } },
     icons: { slugEdit: 'lucide:wand-sparkles' },
+    locale: 'es-ES',
     messages: { selectPlaceholder: 'Elige una opción' },
   },
 })
@@ -466,7 +583,9 @@ export default defineAppConfig({
 <VForm :ui="{ sections: 'gap-8' }" ... />
 ```
 
-Los textos e iconos están todos en `vuno.messages` y `vuno.icons`: el paquete no impone idioma ni colección de iconos.
+Se funden en orden de especificidad creciente —tema por defecto, `app.config`, prop `ui`— y los conflictos los deshace `tailwind-merge`, así que la última clase gana de verdad y no depende del orden de la hoja.
+
+Los textos e iconos están todos en `vuno.messages` y `vuno.icons`: el paquete no impone idioma ni colección de iconos. El formato de fechas, números y monedas sale de `vuno.locale`, que se declara en vez de leerse del navegador —con render en servidor, adivinarlo da un número en el HTML y otro al hidratar—.
 
 ## Estado
 
@@ -474,9 +593,13 @@ En desarrollo.
 
 ### Nota sobre pruebas automatizadas
 
-Al comprobar los diálogos con un navegador controlado por automatización, el nodo del modal puede seguir en el DOM después de cerrarlo. No es un fallo: Chrome congela las animaciones CSS en pestañas ocultas y Reka UI espera el evento `animationend` para desmontar el diálogo. El componente ya está cerrado —lo indica su `data-state="closed"`—, solo falta la limpieza.
+Tres trampas, las tres medidas aquí, que hacen que una comprobación afirme lo contrario de lo que pasa.
+
+**Una pestaña oculta no pinta.** Con la ventana de fondo, `document.visibilityState` es `hidden`, `requestAnimationFrame` **no dispara nunca** y con él se paran las transiciones: un diálogo puede no llegar a abrirse y una captura caducar. El DOM y las medidas de disposición sí funcionan, así que se puede comprobar casi todo; lo que no se puede es dar por cerrado un componente porque su nodo siga ahí. Mira el estado (`opacity`, `data-state`) y no la existencia del nodo, o haz la prueba con la pestaña delante.
+
+**`getComputedStyle` se queda con el valor viejo tras cambiar un token.** Si redefines `--vuno-primary` y vuelves a leer un elemento que ya existía, puede devolverte el color anterior aunque la variable ya valga otra cosa. Se nota porque el valor sale en `oklab` en vez de en `oklch`. Lee sobre un elemento **creado después** del cambio —o sobre un clon del que te interesa— y el valor es el nuevo.
 
-Comprueba la visibilidad real (`opacity`, `data-state`) en lugar de la existencia del nodo, o haz la prueba con la pestaña en primer plano.
+**Un control de Reka no responde a un clic sintético.** Sus botones actúan en `pointerdown`, no en `click`, y las flechas necesitan foco de verdad: un `.click()` o un `.focus()` desde el script no disparan nada y parece que el componente está roto. Los controles nativos —casilla, interruptor, radio— sí responden a `click()`, así que ahí el clic sintético vale.
 
 ## Licencia
 

package/dist/module.d.cts

@@ -0,0 +1,2 @@
+export * from "/woodpecker/src/github.com/groupteknology/vuno/packages/core/src/module.js";
+export { default } from "/woodpecker/src/github.com/groupteknology/vuno/packages/core/src/module.js";

package/dist/module.d.mts

@@ -1,10 +1,2 @@
-import { NuxtModule } from '@nuxt/schema';
-export * from '../dist/runtime/app/types/index.js';
-
-interface ModuleOptions {
-    prefix?: string;
-}
-declare const module$1: NuxtModule<ModuleOptions>;
-
-export { module$1 as default };
-export type { ModuleOptions };
+export * from "/woodpecker/src/github.com/groupteknology/vuno/packages/core/src/module.js";
+export { default } from "/woodpecker/src/github.com/groupteknology/vuno/packages/core/src/module.js";

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "vuno",
   "configKey": "vuno",
-  "version": "0.6.0",
+  "version": "1.0.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,28 +1,18 @@
-import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { createJiti } from "file:///woodpecker/src/github.com/groupteknology/vuno/node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/lib/jiti.mjs";
 
-const module$1 = defineNuxtModule({
-  defaults: {
-    prefix: "V"
+const jiti = createJiti(import.meta.url, {
+  "interopDefault": true,
+  "alias": {
+    "@groupteknology/vuno": "/woodpecker/src/github.com/groupteknology/vuno/packages/core"
   },
-  meta: {
-    name: "vuno",
-    configKey: "vuno"
-  },
-  moduleDependencies: {
-    "@nuxt/ui": {}
-  },
-  setup(options, nuxt) {
-    const resolver = createResolver(import.meta.url);
-    nuxt.options.alias["#vuno"] = resolver.resolve("./runtime/app");
-    addComponentsDir({
-      global: true,
-      path: resolver.resolve("./runtime/app/components"),
-      pathPrefix: false,
-      prefix: options.prefix
-    });
-    addImportsDir(resolver.resolve("./runtime/app/composables"));
-    nuxt.options.css.push(resolver.resolve("./runtime/app/assets/css/main.css"));
+  "transformOptions": {
+    "babel": {
+      "plugins": []
+    }
   }
-});
+})
+
+/** @type {import("/woodpecker/src/github.com/groupteknology/vuno/packages/core/src/module.js")} */
+const _module = await jiti.import("/woodpecker/src/github.com/groupteknology/vuno/packages/core/src/module.ts");
 
-export { module$1 as default };
+export default _module?.default ?? _module;

package/dist/types.d.mts

@@ -1,5 +1,13 @@
-export { default } from './module.mjs'
+import type { ModuleHooks, ModuleRuntimeHooks, ModuleRuntimeConfig, ModulePublicRuntimeConfig } from './module.mjs'
 
-export { type ModuleOptions } from './module.mjs'
+declare module '#app' {
+  interface RuntimeNuxtHooks extends ModuleRuntimeHooks {}
+}
 
-export * from '../dist/runtime/app/types/index.js'
+declare module '@nuxt/schema' {
+  interface NuxtHooks extends ModuleHooks {}
+  interface RuntimeConfig extends ModuleRuntimeConfig {}
+  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
+}
+
+export * from "./module.mjs"

package/package.json

@@ -1,6 +1,28 @@
 {
   "name": "@groupteknology/vuno",
-  "version": "0.6.0",
+  "version": "1.0.0",
+  "description": "Formularios, tablas y diálogos declarativos para Nuxt 4, con componentes propios y tokens sobreescribibles.",
+  "keywords": [
+    "nuxt",
+    "nuxt-module",
+    "vue",
+    "form",
+    "table",
+    "crud",
+    "datatable",
+    "typescript"
+  ],
+  "homepage": "https://github.com/groupteknology/vuno#readme",
+  "bugs": {
+    "url": "https://github.com/groupteknology/vuno/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/groupteknology/vuno.git",
+    "directory": "packages/core"
+  },
+  "license": "MIT",
+  "author": "Diego Otayza <diegootayza@live.com>",
   "type": "module",
   "exports": {
     ".": {
@@ -21,63 +43,46 @@
     "dist"
   ],
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.123",
-    "@nuxt/kit": "^4.5.2"
+    "@floating-ui/dom": "^1.8.0",
+    "@vueuse/core": "^15.0.0",
+    "@iconify-json/lucide": "^1.2.134",
+    "@nuxt/icon": "^2.5.1",
+    "@nuxt/kit": "^4.5.2",
+    "@tailwindcss/vite": "^4.3.3",
+    "gsap": "^3.15.0",
+    "tailwind-merge": "^3.7.0",
+    "tailwindcss": "^4.3.3"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^1.0.3",
+    "@nuxt/schema": "^4.5.2",
     "@tanstack/vue-query": "^5.0.0",
-    "@types/node": "^22.20.2",
+    "@types/node": "^26.6.2",
+    "@vitejs/plugin-vue": "^6.0.9",
+    "@vitest/coverage-v8": "^5.0.1",
+    "@vue/test-utils": "^2.5.0",
+    "happy-dom": "^20.14.5",
     "nuxt": "^4.5.2",
     "typescript": "^6.0.3",
-    "vitest": "^3.2.4",
-    "vue": "^3.5.42",
-    "vue-tsc": "^3.3.11",
-    "zod": "^4.6.2"
-  },
-  "description": "Formularios, tablas y diálogos declarativos para Nuxt 4, construidos sobre Nuxt UI y sin estilos propios.",
-  "keywords": [
-    "nuxt",
-    "nuxt-module",
-    "nuxt-ui",
-    "vue",
-    "form",
-    "table",
-    "crud",
-    "datatable",
-    "typescript"
-  ],
-  "license": "MIT",
-  "author": "Diego Otayza <diegootayza@live.com>",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/groupteknology/vuno.git",
-    "directory": "packages/core"
+    "vitest": "^5.0.1",
+    "vue": "^3.5.43",
+    "vue-tsc": "^3.3.11"
   },
-  "bugs": {
-    "url": "https://github.com/groupteknology/vuno/issues"
+  "peerDependencies": {
+    "nuxt": "^4.5.2",
+    "vue": "^3.5.43"
   },
-  "homepage": "https://github.com/groupteknology/vuno#readme",
   "publishConfig": {
     "access": "public"
   },
-  "peerDependencies": {
-    "@nuxt/ui": "^4.0.0",
-    "@tanstack/vue-query": "^5.0.0",
-    "nuxt": "^4.0.0",
-    "vue": "^3.5.0"
-  },
-  "peerDependenciesMeta": {
-    "@tanstack/vue-query": {
-      "optional": true
-    }
-  },
   "scripts": {
     "build": "nuxt-module-build build",
-    "clean": "rm -rf dist",
+    "clean": "node -e \"require('node:fs').rmSync('dist', { force: true, recursive: true })\"",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare",
-    "typecheck": "nuxt-module-build build",
+    "dev:watch": "node scripts/watch-build.mjs",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest",
+    "typecheck": "pnpm dev:prepare && vue-tsc --noEmit -p tsconfig.json"
   }
 }

package/dist/runtime/app/assets/css/main.css

@@ -1 +0,0 @@
-@import "tailwindcss";@import "@nuxt/ui";@source "../../**/*";

package/dist/runtime/app/components/Cell/CellBadge.d.vue.ts

@@ -1,5 +0,0 @@
-import type { VunoTableCellProps } from '#vuno/types/table';
-type __VLS_Props = VunoTableCellProps<'badge'>;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;