@groupteknology/vuno 0.6.1 → 1.0.1

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>
@@ -74,7 +99,7 @@ Cada uno declara sus propios props mediante una unión discriminada por `type`,
 
 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 Nuxt UI a secas: `UFormField` con `required` solo pinta el asterisco y no toca el input. Los campos de vuno sí lo propagan, a propósito y por accesibilidad, y por eso el `novalidate` es necesario y no una preferencia.
+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
 
@@ -102,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>
 ```
@@ -185,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
 
@@ -197,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">
@@ -205,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: '' }),
@@ -230,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],
   // ...
 })
@@ -255,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
@@ -269,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:
 
@@ -294,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
 
@@ -303,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 ... />
@@ -314,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 })),
@@ -392,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>
 ```
@@ -412,20 +445,20 @@ const failure = computed(() => isError.value
   : undefined)
 ```
 
-Con `useVunoCrud` no hace falta escribirlo: el objeto lo construye él, y el título y la pista se declaran en `messages` con `listFailed` y `listFailedHint`.
+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.
@@ -437,7 +470,7 @@ 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>
 ```
 
@@ -453,7 +486,7 @@ app/components/modal/ModalInvoice.vue   ->   open('invoice')
 ```
 
 ```ts
-const modal = useVunoModal()
+const modal = useModal()
 
 const guardado = await modal.open<boolean>('product', { sku: row.sku })
 ```
@@ -480,27 +513,66 @@ Se pinta en `<VApp>` y no en la pantalla que lo abrió, así que navegar no lo d
 
 | 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' },
   },
 })
@@ -511,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
 
@@ -519,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.mts

@@ -3,6 +3,8 @@ export * from '../dist/runtime/app/types/index.js';
 
 interface ModuleOptions {
     prefix?: string;
+    /** Registrar el compilador de Tailwind. Ponlo en `false` si ya lo monta el proyecto. */
+    tailwind?: boolean;
 }
 declare const module$1: NuxtModule<ModuleOptions>;
 

package/dist/module.json

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

package/dist/module.mjs

@@ -1,21 +1,38 @@
-import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir, addTemplate, addVitePlugin } from '@nuxt/kit';
+import { sep } from 'node:path';
+import tailwindcss from '@tailwindcss/vite';
 
 const module$1 = defineNuxtModule({
   defaults: {
-    prefix: "V"
+    prefix: "V",
+    tailwind: true
   },
   meta: {
     name: "vuno",
     configKey: "vuno"
   },
   moduleDependencies: {
-    "@nuxt/ui": {}
+    /*
+     * Los iconos del módulo se pintan con el componente global `Icon`, que
+     * trae `@nuxt/icon`. Hoy llega de rebote porque lo instala Nuxt UI, y
+     * eso no basta: `Base/Icon.vue` cae en un `<span>` vacío cuando el
+     * global no está registrado —que es lo correcto— y por tanto quedarse
+     * sin él no rompe nada, solo deja la interfaz sin iconos.
+     */
+    "@nuxt/icon": {
+      defaults: {
+        clientBundle: {
+          scan: true
+        }
+      }
+    }
   },
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
     nuxt.options.alias["#vuno"] = resolver.resolve("./runtime/app");
     addComponentsDir({
       global: true,
+      ignore: ["forms/fields/**", "structure/cells/**", "overlays/Context.vue", "overlays/Overlay.vue", "overlays/Toast.vue", "overlays/Toaster.vue", "forms/ControlShell.vue", "forms/FormFieldRenderer.vue", "structure/TableCell.vue", "layouts/dashboard/DashboardAside.vue"],
       path: resolver.resolve("./runtime/app/components"),
       pathPrefix: false,
       prefix: options.prefix
@@ -27,8 +44,21 @@ const module$1 = defineNuxtModule({
       }
     });
     addImportsDir(resolver.resolve("./runtime/app/composables"));
+    addTemplate({
+      filename: "vuno.css",
+      write: true,
+      // `sep` en vez de un literal: en Windows `srcDir` llega con barras
+      // invertidas y Tailwind no las interpreta como separador; fuera de
+      // Windows la sustitución no hace nada.
+      getContents: () => `@source '${nuxt.options.srcDir.replaceAll(sep, "/")}/**/*';`
+    });
+    if (options.tailwind && !hasTailwindPlugin(nuxt.options.vite.plugins)) addVitePlugin(tailwindcss());
     nuxt.options.css.push(resolver.resolve("./runtime/app/assets/css/main.css"));
   }
 });
+function hasTailwindPlugin(plugins) {
+  const flat = Array.isArray(plugins) ? plugins.flat(Infinity) : [];
+  return flat.some((plugin) => typeof plugin?.name === "string" && plugin.name.startsWith("@tailwindcss/vite"));
+}
 
 export { module$1 as default };

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

@@ -0,0 +1 @@
+:root{--vuno-modal-duration:180ms;--vuno-modal-ease:cubic-bezier(0.32,0.72,0,1);--vuno-backdrop:rgba(0,0,0,.5)}dialog{opacity:0;transform:scale(.97) translateY(.5rem);transition:opacity var(--vuno-modal-duration) var(--vuno-modal-ease),transform var(--vuno-modal-duration) var(--vuno-modal-ease),display var(--vuno-modal-duration) allow-discrete,overlay var(--vuno-modal-duration) allow-discrete}dialog[open]{opacity:1;transform:scale(1) translateY(0)}@starting-style{dialog[open]{opacity:0;transform:scale(.97) translateY(.5rem)}}dialog::backdrop{background-color:transparent;transition:background-color var(--vuno-modal-duration) var(--vuno-modal-ease),display var(--vuno-modal-duration) allow-discrete,overlay var(--vuno-modal-duration) allow-discrete}dialog[open]::backdrop{background-color:var(--vuno-backdrop)}@starting-style{dialog[open]::backdrop{background-color:transparent}}dialog[data-position=end],dialog[data-position=start]{transform:translateX(var(--vuno-panel-from))}dialog[data-position=end]{--vuno-panel-from:100%}[dir=rtl] dialog[data-position=end],dialog[data-position=start]{--vuno-panel-from:-100%}[dir=rtl] dialog[data-position=start]{--vuno-panel-from:100%}dialog[data-position=end][open],dialog[data-position=start][open]{transform:translateX(0)}@starting-style{dialog[data-position=end][open],dialog[data-position=start][open]{transform:translateX(var(--vuno-panel-from))}}dialog.vuno-overlay-behind::backdrop,dialog.vuno-overlay-behind[open]::backdrop{background-color:transparent}@media (prefers-reduced-motion:reduce){dialog,dialog::backdrop{transition-duration:1ms}dialog,dialog[data-position=end],dialog[data-position=end][open],dialog[data-position=start],dialog[data-position=start][open]{transform:none}}

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

@@ -1 +1 @@
-@import "tailwindcss";@import "@nuxt/ui";@source "../../**/*";:root{--vuno-modal-duration:180ms;--vuno-modal-ease:cubic-bezier(0.32,0.72,0,1);--vuno-backdrop:rgba(0,0,0,.5)}dialog{opacity:0;transform:scale(.97) translateY(.5rem);transition:opacity var(--vuno-modal-duration) var(--vuno-modal-ease),transform var(--vuno-modal-duration) var(--vuno-modal-ease),display var(--vuno-modal-duration) allow-discrete,overlay var(--vuno-modal-duration) allow-discrete}dialog[open]{opacity:1;transform:scale(1) translateY(0)}@starting-style{dialog[open]{opacity:0;transform:scale(.97) translateY(.5rem)}}dialog::backdrop{background-color:transparent;transition:background-color var(--vuno-modal-duration) var(--vuno-modal-ease),display var(--vuno-modal-duration) allow-discrete,overlay var(--vuno-modal-duration) allow-discrete}dialog[open]::backdrop{background-color:var(--vuno-backdrop)}@starting-style{dialog[open]::backdrop{background-color:transparent}}dialog.vuno-overlay-behind::backdrop,dialog.vuno-overlay-behind[open]::backdrop{background-color:transparent}@media (prefers-reduced-motion:reduce){dialog,dialog::backdrop{transition-duration:1ms}dialog{transform:none}}
+@import "tailwindcss";@import "#build/vuno.css";@import "./tokens.css";@import "./theme.css";@import "./dialog.css";@source "../../**/*";

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

@@ -0,0 +1 @@
+@theme inline{--color-vuno-primary:var(--vuno-primary);--color-vuno-primary-contrast:var(--vuno-primary-contrast);--color-vuno-secondary:var(--vuno-secondary);--color-vuno-secondary-contrast:var(--vuno-secondary-contrast);--color-vuno-neutral:var(--vuno-neutral);--color-vuno-neutral-contrast:var(--vuno-neutral-contrast);--color-vuno-surface:var(--vuno-surface);--color-vuno-surface-1:var(--vuno-surface-1);--color-vuno-surface-2:var(--vuno-surface-2);--color-vuno-surface-inverse:var(--vuno-surface-inverse);--color-vuno-strong:var(--vuno-text-strong);--color-vuno-body:var(--vuno-text-body);--color-vuno-muted:var(--vuno-text-muted);--color-vuno-subtle:var(--vuno-text-subtle);--color-vuno-inverse:var(--vuno-text-inverse);--font-sans:var(--vuno-font-sans);--font-mono:var(--vuno-font-mono);--color-vuno-border:var(--vuno-border);--color-vuno-border-strong:var(--vuno-border-strong);--color-vuno-success:var(--vuno-success);--color-vuno-success-contrast:var(--vuno-success-contrast);--color-vuno-info:var(--vuno-info);--color-vuno-info-contrast:var(--vuno-info-contrast);--color-vuno-warning:var(--vuno-warning);--color-vuno-warning-contrast:var(--vuno-warning-contrast);--color-vuno-error:var(--vuno-error);--color-vuno-error-contrast:var(--vuno-error-contrast);--radius-vuno:var(--vuno-radius);--radius-vuno-control:var(--vuno-radius-control)}

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

@@ -0,0 +1 @@
+@layer base{:root{color-scheme:light;--vuno-color-white:oklch(100% 0 0);--vuno-color-slate-50:oklch(98.4% 0.003 247.858);--vuno-color-slate-100:oklch(96.8% 0.007 247.896);--vuno-color-slate-200:oklch(92.9% 0.013 255.508);--vuno-color-slate-300:oklch(86.9% 0.022 252.894);--vuno-color-slate-400:oklch(70.4% 0.04 256.788);--vuno-color-slate-500:oklch(55.4% 0.046 257.417);--vuno-color-slate-600:oklch(44.6% 0.043 257.281);--vuno-color-slate-700:oklch(37.2% 0.044 257.287);--vuno-color-slate-800:oklch(27.9% 0.041 260.031);--vuno-color-slate-900:oklch(20.8% 0.042 265.755);--vuno-color-slate-950:oklch(12.9% 0.042 264.695);--vuno-color-black:oklch(0% 0 0);--vuno-color-blue-400:oklch(70.7% 0.165 254.624);--vuno-color-blue-600:oklch(54.6% 0.245 262.881);--vuno-color-violet-400:oklch(70.2% 0.183 293.541);--vuno-color-violet-600:oklch(54.1% 0.281 293.009);--vuno-color-emerald-400:oklch(76.5% 0.177 163.223);--vuno-color-emerald-700:oklch(50.8% 0.118 165.612);--vuno-color-cyan-400:oklch(78.9% 0.154 211.53);--vuno-color-cyan-700:oklch(52% 0.105 223.128);--vuno-color-red-400:oklch(70.4% 0.191 22.216);--vuno-color-red-700:oklch(50.5% 0.213 27.518);--vuno-color-amber-300:oklch(87.9% 0.169 91.605);--vuno-color-amber-400:oklch(82.8% 0.189 84.429);--dashboard-navbar-height:64px;--dashboard-aside-width:384px;--vuno-radius:0.25rem;--vuno-radius-control:0.25rem;--vuno-font-sans:"Google Sans","Google Sans Text",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--vuno-font-mono:"Google Sans Code",ui-monospace,"Cascadia Code","Source Code Pro",Menlo,monospace;--vuno-primary:var(--vuno-color-blue-600);--vuno-primary-contrast:var(--vuno-color-white);--vuno-secondary:var(--vuno-color-violet-600);--vuno-secondary-contrast:var(--vuno-color-white);--vuno-neutral:var(--vuno-color-slate-600);--vuno-neutral-contrast:var(--vuno-color-white);--vuno-surface:var(--vuno-color-white);--vuno-surface-1:var(--vuno-color-slate-100);--vuno-surface-2:var(--vuno-color-slate-200);--vuno-surface-inverse:var(--vuno-color-slate-900);--vuno-text-strong:var(--vuno-color-slate-900);--vuno-text-body:var(--vuno-color-slate-700);--vuno-text-muted:var(--vuno-color-slate-600);--vuno-text-subtle:var(--vuno-color-slate-400);--vuno-text-inverse:var(--vuno-color-slate-50);--vuno-border:var(--vuno-color-slate-300);--vuno-border-strong:var(--vuno-color-slate-500);--vuno-success:var(--vuno-color-emerald-700);--vuno-success-contrast:var(--vuno-color-white);--vuno-info:var(--vuno-color-cyan-700);--vuno-info-contrast:var(--vuno-color-white);--vuno-warning:var(--vuno-color-amber-400);--vuno-warning-contrast:var(--vuno-color-slate-900);--vuno-error:var(--vuno-color-red-700);--vuno-error-contrast:var(--vuno-color-white)}.dark{color-scheme:dark;--vuno-primary:var(--vuno-color-blue-400);--vuno-primary-contrast:var(--vuno-color-slate-950);--vuno-secondary:var(--vuno-color-violet-400);--vuno-secondary-contrast:var(--vuno-color-slate-950);--vuno-neutral:var(--vuno-color-slate-400);--vuno-neutral-contrast:var(--vuno-color-slate-950);--vuno-surface:var(--vuno-color-black);--vuno-surface-1:var(--vuno-color-slate-900);--vuno-surface-2:var(--vuno-color-slate-800);--vuno-surface-inverse:var(--vuno-color-slate-50);--vuno-text-strong:var(--vuno-color-white);--vuno-text-body:var(--vuno-color-slate-200);--vuno-text-muted:var(--vuno-color-slate-400);--vuno-text-subtle:var(--vuno-color-slate-500);--vuno-text-inverse:var(--vuno-color-slate-900);--vuno-border:var(--vuno-color-slate-700);--vuno-border-strong:var(--vuno-color-slate-500);--vuno-success:var(--vuno-color-emerald-400);--vuno-success-contrast:var(--vuno-color-slate-950);--vuno-info:var(--vuno-color-cyan-400);--vuno-info-contrast:var(--vuno-color-slate-950);--vuno-warning:var(--vuno-color-amber-300);--vuno-warning-contrast:var(--vuno-color-slate-950);--vuno-error:var(--vuno-color-red-400);--vuno-error-contrast:var(--vuno-color-slate-950)}body{background-color:var(--vuno-surface);color:var(--vuno-text-body);font-family:var(--vuno-font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}

package/dist/runtime/app/components/actions/Avatar.d.vue.ts

@@ -0,0 +1,23 @@
+import type { VunoSize, VunoSlots } from '#vuno/types/base';
+/**
+ * La imagen redonda de una fila: una foto de producto, un logotipo, una
+ * persona.
+ *
+ * El `alt` no es decoración: en un listado, la alternativa útil es el nombre
+ * de la fila, y de ahí salen también las iniciales cuando no hay imagen que
+ * enseñar.
+ */
+type __VLS_Props = {
+    alt?: string;
+    size?: VunoSize;
+    src?: string;
+    ui?: VunoSlots;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: VunoSize;
+    alt: string;
+    src: string;
+    ui: VunoSlots;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/actions/Avatar.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+const props = defineProps({
+  alt: { type: String, required: false, default: "" },
+  size: { type: String, required: false, default: "md" },
+  src: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const ui = useTheme(
+  "avatar",
+  () => props.ui,
+  () => ({ size: props.size })
+);
+const failed = ref(false);
+watch(
+  () => props.src,
+  () => {
+    failed.value = false;
+  }
+);
+const showImage = computed(() => Boolean(props.src) && !failed.value);
+const initials = computed(
+  () => props.alt.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => [...word][0]?.toLocaleUpperCase() ?? "").join("")
+);
+</script>
+
+<template>
+    <span :class="ui.root">
+        <img
+            v-if="showImage"
+            :alt="props.alt"
+            :class="ui.image"
+            :src="props.src"
+            @error="failed = true"
+        />
+
+        <!--
+            Sin imagen, las iniciales son decoración: el nombre de la fila ya
+            está escrito en la columna de al lado, y anunciarlo aquí otra vez
+            —peor, deletreado— solo alarga la lectura de cada fila.
+        -->
+        <span
+            v-else
+            aria-hidden="true"
+            >{{ initials }}</span
+        >
+    </span>
+</template>

package/dist/runtime/app/components/actions/Avatar.vue.d.ts

@@ -0,0 +1,23 @@
+import type { VunoSize, VunoSlots } from '#vuno/types/base';
+/**
+ * La imagen redonda de una fila: una foto de producto, un logotipo, una
+ * persona.
+ *
+ * El `alt` no es decoración: en un listado, la alternativa útil es el nombre
+ * de la fila, y de ahí salen también las iniciales cuando no hay imagen que
+ * enseñar.
+ */
+type __VLS_Props = {
+    alt?: string;
+    size?: VunoSize;
+    src?: string;
+    ui?: VunoSlots;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: VunoSize;
+    alt: string;
+    src: string;
+    ui: VunoSlots;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/actions/Badge.d.vue.ts

@@ -0,0 +1,36 @@
+import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
+/**
+ * Una etiqueta de estado: el estado de una fila, el contador de filtros
+ * activos, el resumen de un filtro puesto.
+ *
+ * No es un botón ni lleva acción propia. Cuando algo dentro sí la lleva
+ * —la cruz que quita un filtro— va en el slot, para que el elemento que se
+ * pulsa sea ese y no la etiqueta entera.
+ */
+type VunoBadgeVariant = 'outline' | 'soft' | 'solid' | 'subtle';
+type __VLS_Props = {
+    color?: VunoColor;
+    label?: string;
+    size?: VunoSize;
+    ui?: VunoSlots;
+    variant?: VunoBadgeVariant;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: VunoColor;
+    size: VunoSize;
+    variant: VunoBadgeVariant;
+    label: string;
+    ui: VunoSlots;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/actions/Badge.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+const props = defineProps({
+  color: { type: String, required: false, default: "primary" },
+  label: { type: String, required: false, default: void 0 },
+  size: { type: String, required: false, default: "md" },
+  ui: { type: Object, required: false, default: void 0 },
+  variant: { type: String, required: false, default: "solid" }
+});
+const ui = useTheme(
+  "badge",
+  () => props.ui,
+  () => ({
+    color: props.color,
+    size: props.size,
+    variant: props.variant
+  })
+);
+</script>
+
+<template>
+    <span :class="ui.base">
+        <slot>{{ props.label }}</slot>
+    </span>
+</template>

package/dist/runtime/app/components/actions/Badge.vue.d.ts

@@ -0,0 +1,36 @@
+import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
+/**
+ * Una etiqueta de estado: el estado de una fila, el contador de filtros
+ * activos, el resumen de un filtro puesto.
+ *
+ * No es un botón ni lleva acción propia. Cuando algo dentro sí la lleva
+ * —la cruz que quita un filtro— va en el slot, para que el elemento que se
+ * pulsa sea ese y no la etiqueta entera.
+ */
+type VunoBadgeVariant = 'outline' | 'soft' | 'solid' | 'subtle';
+type __VLS_Props = {
+    color?: VunoColor;
+    label?: string;
+    size?: VunoSize;
+    ui?: VunoSlots;
+    variant?: VunoBadgeVariant;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: VunoColor;
+    size: VunoSize;
+    variant: VunoBadgeVariant;
+    label: string;
+    ui: VunoSlots;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};