@groupteknology/vuno 1.0.0 → 2.0.0

package/README.md

@@ -2,9 +2,9 @@
 
 Formularios, tablas y diálogos declarativos para Nuxt 4, con componentes propios y sin librería de interfaz por debajo.
 
-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.
+El módulo **trae su propia estética, y se sobreescribe desde el proyecto**. Los colores, superficies y tipografía se derivan de variables CSS —los tokens `--vuno-*`—; la curvatura usa directamente la escala predeterminada de Tailwind. 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.
+Un color literal dentro de un componente es un error: si algo no se puede cambiar desde los tokens, falta un token. Para radios se usan las utilidades estándar de Tailwind.
 
 ## Documentación
 
@@ -87,7 +87,28 @@ const definition = {
 
 ### Tipos de campo
 
-`text` · `email` · `password` · `textarea` · `number` · `select` · `radio` · `checkbox` · `switch` · `color` · `slug` · `file` · `array`
+`text` · `search` · `email` · `password` · `textarea` · `number` · `select` · `radio` · `checkbox` · `switch` · `color` · `slug` · `file` · `array`
+
+Los mismos campos son componentes públicos y ya incluyen etiqueta, descripción, ayuda y error. Dentro de `VForm` leen y escriben por `name`; fuera usan su propio `v-model`:
+
+```vue
+<VFieldInput name="name" label="Nombre" />
+
+<VFieldInput v-model="name" label="Nombre" />
+```
+
+La etiqueta va arriba por defecto. `orientation="horizontal"` la coloca al costado del control:
+
+```vue
+<VFieldSelect
+  v-model="role"
+  label="Rol"
+  orientation="horizontal"
+  :items="roles"
+/>
+```
+
+Los controles básicos son implementación interna. Para campos propios, `VFormField` sigue disponible y puede envolver cualquier control; un `VField*` colocado dentro reconoce ese envoltorio y no crea uno duplicado.
 
 `source` del campo `slug` es el **nombre** del campo del que deriva, no su valor.
 
@@ -296,18 +317,14 @@ key: () => productKeys.list(filtros) // solo refresca esa combinación de filtro
 
 `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:
-
-```ts
-// app/plugins/vue-query.ts
-export default defineNuxtPlugin((nuxtApp) => {
-  const state = useState<DehydratedState | null>('vue-query', () => null)
-  const queryClient = new QueryClient()
+Vuno registra TanStack Query y deshidrata su caché en el payload de Nuxt, de modo que el cliente hidrata lo resuelto en servidor sin repetir la primera consulta. No hace falta instalar ni configurar `@tanstack/vue-query` en el proyecto consumidor.
 
-  nuxtApp.vueApp.use(VueQueryPlugin, { queryClient })
+Si el proyecto ya aporta su propio `QueryClient`, desactiva el registro de Vuno y conserva esa configuración:
 
-  if (import.meta.server) nuxtApp.hooks.hook('app:rendered', () => { state.value = dehydrate(queryClient) })
-  if (import.meta.client) hydrate(queryClient, state.value)
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@groupteknology/vuno'],
+  vuno: { vueQuery: false },
 })
 ```
 
@@ -319,14 +336,6 @@ 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` 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
 
 `VPage` pone la estructura que repite cualquier pantalla de mantenimiento:
@@ -461,6 +470,18 @@ Los dos estados existen además sueltos, para las pantallas que no son una tabla
 <VState tone="failure" :failure="failure" />
 ```
 
+Un aviso que acompaña contenido existente usa `VAlert`. Es persistente, toma los mismos colores semánticos del tema y usa `role="status"` por defecto; `role="alert"` queda para lo urgente:
+
+```vue
+<VAlert
+  color="warning"
+  title="Faltan datos de facturación"
+  description="Completa la dirección fiscal antes de emitir una factura."
+>
+  <template #actions><VButton label="Completar datos" variant="outline" /></template>
+</VAlert>
+```
+
 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.
 
 ## Diálogos de confirmación
@@ -519,15 +540,22 @@ Se pinta en `<VApp>` y no en la pantalla que lo abrió, así que navegar no lo d
 | `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`. |
+| `useLocale` | El idioma configurado para fechas, números y monedas. |
 | `useMessages` | Los textos configurados en `vuno.messages`. |
+| `useToast` | Notificaciones globales que no interrumpen. |
+| `useConfirm` | Confirmación global que devuelve la respuesta como promesa. |
+| `useOverlay` | Abre componentes como capas globales desde código. |
+| `useModal` | Resuelve y abre los modales del proyecto por nombre. |
+| `useContext` | Acceso de bajo nivel al contexto provisto por `VApp`. |
+| `defineShortcuts` | Declara atajos de teclado reactivos y ligados al ciclo de vida. |
 
-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.
+`useTheme`, `useIcons`, `useLocale` y `useMessages` existen para que un componente tuyo pueda usar la misma configuración visual y regional que los de vuno sin duplicarla.
 
 ## Personalización
 
 ### 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:
+**Es el primer sitio al que hay que ir, y casi siempre el único.** El color 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 {
@@ -548,11 +576,11 @@ Los que hay:
 | `--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:
 
+- **La curvatura usa Tailwind directamente.** El tema predeterminado usa `rounded-sm` y la prop `radius` admite `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl` y `full`.
 - **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.
 
@@ -593,14 +621,12 @@ En desarrollo.
 
 ### Nota sobre pruebas automatizadas
 
-Tres trampas, las tres medidas aquí, que hacen que una comprobación afirme lo contrario de lo que pasa.
+Dos trampas, las dos 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.
 
-**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
 
 [MIT](./LICENSE) © Diego Otayza

package/dist/module.d.mts

@@ -1,2 +1,14 @@
-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";
+import { NuxtModule } from '@nuxt/schema';
+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;
+    /** Registrar TanStack Query con hidratación SSR. Ponlo en `false` si el proyecto ya aporta su propio cliente. */
+    vueQuery?: boolean;
+}
+declare const module$1: NuxtModule<ModuleOptions>;
+
+export { module$1 as default };
+export type { ModuleOptions };

package/dist/module.json

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

package/dist/module.mjs

@@ -1,18 +1,85 @@
-import { createJiti } from "file:///woodpecker/src/github.com/groupteknology/vuno/node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/lib/jiti.mjs";
+import { defineNuxtModule, createResolver, addComponent, resolveModule, addTypeTemplate, addComponentsDir, addImportsDir, addPlugin, addTemplate, addVitePlugin } from '@nuxt/kit';
+import tailwindcss from '@tailwindcss/vite';
+import { sep } from 'node:path';
 
-const jiti = createJiti(import.meta.url, {
-  "interopDefault": true,
-  "alias": {
-    "@groupteknology/vuno": "/woodpecker/src/github.com/groupteknology/vuno/packages/core"
+const module$1 = defineNuxtModule({
+  defaults: {
+    prefix: "V",
+    tailwind: true,
+    vueQuery: true
   },
-  "transformOptions": {
-    "babel": {
-      "plugins": []
+  meta: {
+    name: "vuno",
+    configKey: "vuno"
+  },
+  moduleDependencies: {
+    "@nuxt/icon": {
+      defaults: {
+        clientBundle: {
+          scan: true
+        }
+      }
     }
-  }
-})
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    const runtimeDir = resolver.resolve("./runtime/app");
+    addComponent({
+      name: "VunoIconRenderer",
+      filePath: resolveModule("@nuxt/icon/runtime/components/index", { url: new URL(import.meta.url) }),
+      global: true
+    });
+    nuxt.options.alias["#vuno"] = runtimeDir;
+    nuxt.hook("prepare:types", ({ nodeTsConfig }) => {
+      nodeTsConfig.compilerOptions ??= {};
+      nodeTsConfig.compilerOptions.paths ??= {};
+      nodeTsConfig.compilerOptions.paths["#vuno"] = [runtimeDir];
+      nodeTsConfig.compilerOptions.paths["#vuno/*"] = [`${runtimeDir}/*`];
+    });
+    addTypeTemplate({
+      filename: "types/vuno-page-meta.d.ts",
+      getContents: () => `declare module '#app' {
+    interface PageMeta {
+        /** T\xEDtulo de la p\xE1gina disponible tambi\xE9n mediante \`route.meta.title\`. */
+        title?: string
+        /** \xCDndice declarativo disponible durante el render del servidor. */
+        toc?: import('@groupteknology/vuno').VunoNavigationTocItem[]
+    }
+}
 
-/** @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 {}
+`
+    });
+    addComponentsDir({
+      global: true,
+      ignore: ["**/internal/**"],
+      path: resolver.resolve("./runtime/app/components"),
+      pathPrefix: false,
+      prefix: options.prefix
+    });
+    nuxt.hook("components:extend", (components) => {
+      for (const component of components) {
+        const path = component.filePath.split("\\").join("/");
+        if (path.includes("/components/modal/")) component.global = true;
+      }
+    });
+    addImportsDir(resolver.resolve("./runtime/app/composables"));
+    if (options.vueQuery) addPlugin(resolver.resolve("./runtime/app/plugins/vue-query"));
+    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 default _module?.default ?? _module;
+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[data-vuno-modal]{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[data-vuno-modal][open]{opacity:1;transform:scale(1) translateY(0)}@starting-style{dialog[data-vuno-modal][open]{opacity:0;transform:scale(.97) translateY(.5rem)}}dialog[data-vuno-modal]::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[data-vuno-modal][open]::backdrop{background-color:var(--vuno-backdrop)}@starting-style{dialog[data-vuno-modal][open]::backdrop{background-color:transparent}}dialog[data-vuno-modal][data-position=end],dialog[data-vuno-modal][data-position=start]{transform:translateX(var(--vuno-panel-from))}dialog[data-vuno-modal][data-position=end]{--vuno-panel-from:100%}[dir=rtl] dialog[data-vuno-modal][data-position=end],dialog[data-vuno-modal][data-position=start]{--vuno-panel-from:-100%}[dir=rtl] dialog[data-vuno-modal][data-position=start]{--vuno-panel-from:100%}dialog[data-vuno-modal][data-position=end][open],dialog[data-vuno-modal][data-position=start][open]{transform:translateX(0)}@starting-style{dialog[data-vuno-modal][data-position=end][open],dialog[data-vuno-modal][data-position=start][open]{transform:translateX(var(--vuno-panel-from))}}dialog[data-vuno-modal].vuno-overlay-behind::backdrop,dialog[data-vuno-modal].vuno-overlay-behind[open]::backdrop{background-color:transparent}@media (prefers-reduced-motion:reduce){dialog[data-vuno-modal],dialog[data-vuno-modal]::backdrop{transition-duration:1ms}dialog[data-vuno-modal],dialog[data-vuno-modal][data-position=end],dialog[data-vuno-modal][data-position=end][open],dialog[data-vuno-modal][data-position=start],dialog[data-vuno-modal][data-position=start][open]{transform:none}}

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

@@ -0,0 +1 @@
+@import "tailwindcss";@import "#build/vuno.css";@import "./tokens.css";@import "./theme.css";@import "./dialog.css";@source "../../**/*";

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

@@ -0,0 +1 @@
+@import "tailwindcss";@import "./tokens.css";@import "./theme.css";

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);--container-8xl:96rem}

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-font-sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--vuno-font-mono:"JetBrains Mono",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)}html{scrollbar-gutter:stable}body{background-color:var(--vuno-surface);color:var(--vuno-text-body);font-family:var(--vuno-font-sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}

package/dist/runtime/app/components/Alert/Alert.d.vue.ts

@@ -0,0 +1,20 @@
+import type { VunoAlertProps } from '#vuno/types/alert';
+import type { VunoColor } from '#vuno/types/base';
+type __VLS_Slots = {
+    /** Acciones relacionadas con el aviso. */
+    actions?: () => unknown;
+    /** Contenido que sustituye a `description`. */
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<VunoAlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoAlertProps> & Readonly<{}>, {
+    color: VunoColor;
+    role: "alert" | "status";
+}, {}, {}, {}, 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/Alert/Alert.theme.d.ts

@@ -0,0 +1,13 @@
+export declare const alertTheme: Record<"alert", {
+    readonly slots: {
+        readonly actions: "mt-3 flex flex-wrap items-center gap-2 empty:hidden";
+        readonly body: "min-w-0 flex-1";
+        readonly description: "mt-1 text-sm text-vuno-body";
+        readonly icon: "size-5 shrink-0 self-center text-(--vuno-accent)";
+        readonly root: "flex w-full items-start gap-3 rounded-sm bg-(--vuno-accent)/10 p-4 ring-1 ring-(--vuno-accent)/25 ring-inset";
+        readonly title: "font-medium text-vuno-strong";
+    };
+    readonly variants: {
+        readonly color: Record<import("../../types/base.js").VunoColor, Record<"root", string>>;
+    };
+}>;

package/dist/runtime/app/components/Alert/Alert.theme.js

@@ -0,0 +1,13 @@
+import { accentByColor } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const alertTheme = defineTheme("alert", {
+  slots: {
+    actions: "mt-3 flex flex-wrap items-center gap-2 empty:hidden",
+    body: "min-w-0 flex-1",
+    description: "mt-1 text-sm text-vuno-body",
+    icon: "size-5 shrink-0 self-center text-(--vuno-accent)",
+    root: "flex w-full items-start gap-3 rounded-sm bg-(--vuno-accent)/10 p-4 ring-1 ring-(--vuno-accent)/25 ring-inset",
+    title: "font-medium text-vuno-strong"
+  },
+  variants: { color: accentByColor("root") }
+});

package/dist/runtime/app/components/Alert/Alert.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { computed } from "vue";
+import { useIcons, useTheme } from "#vuno/composables/useTheme";
+import Icon from "#vuno/components/Icon/Icon.vue";
+defineOptions({ name: "VunoAlert" });
+const props = defineProps({
+  color: { type: String, required: false, default: "info" },
+  description: { type: String, required: false },
+  icon: { type: [null, String], required: false },
+  role: { type: String, required: false, default: "status" },
+  title: { type: String, required: true },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const icons = useIcons();
+const defaultIcons = {
+  error: icons.value.notifyError,
+  info: icons.value.notifyInfo,
+  neutral: icons.value.notifyInfo,
+  primary: icons.value.notifyInfo,
+  secondary: icons.value.notifyInfo,
+  success: icons.value.notifySuccess,
+  warning: icons.value.notifyWarning
+};
+const iconName = computed(() => props.icon === null ? void 0 : props.icon ?? defaultIcons[props.color]);
+const ui = useTheme(
+  "alert",
+  () => props.ui,
+  () => ({ color: props.color })
+);
+</script>
+
+<template>
+    <div
+        :class="ui.root"
+        :role="props.role"
+    >
+        <Icon
+            v-if="iconName"
+            :class="ui.icon"
+            :name="iconName"
+        />
+
+        <div :class="ui.body">
+            <p :class="ui.title">{{ props.title }}</p>
+
+            <div
+                v-if="props.description || $slots.default"
+                :class="ui.description"
+            >
+                <slot>{{ props.description }}</slot>
+            </div>
+
+            <div :class="ui.actions">
+                <slot name="actions" />
+            </div>
+        </div>
+    </div>
+</template>

package/dist/runtime/app/components/Alert/Alert.vue.d.ts

@@ -0,0 +1,20 @@
+import type { VunoAlertProps } from '#vuno/types/alert';
+import type { VunoColor } from '#vuno/types/base';
+type __VLS_Slots = {
+    /** Acciones relacionadas con el aviso. */
+    actions?: () => unknown;
+    /** Contenido que sustituye a `description`. */
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<VunoAlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoAlertProps> & Readonly<{}>, {
+    color: VunoColor;
+    role: "alert" | "status";
+}, {}, {}, {}, 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/App/App.d.vue.ts

@@ -0,0 +1,52 @@
+import { type Component } from 'vue';
+import type { VunoAlertRequest, VunoConfirmRequest, VunoNotifyRequest } from '#vuno/types/app';
+/**
+ * Raíz del módulo: provee el contexto global, aloja los overlays y la pila
+ * de notificaciones.
+ *
+ * Monta directamente todo lo que necesitan las piezas del módulo.
+ */
+type Props = {
+    /**
+     * Dirección de lectura.
+     *
+     * Se provee a los componentes que la necesitan —hoy solo las
+     * pestañas, para invertir sus flechas— y se pone además en el
+     * elemento, que es de donde la lee el navegador para el texto y
+     * para las propiedades lógicas del CSS.
+     */
+    dir?: 'ltr' | 'rtl';
+};
+/**
+ * Monta un componente y espera a que emita `close`.
+ *
+ * Cerrar con Escape o pulsando fuera cuenta como cerrar sin resultado: un
+ * `update:open` en falso resuelve igual, porque si no la promesa se quedaría
+ * esperando para siempre a un diálogo que ya no está en pantalla.
+ */
+declare function open<TResult = unknown>(component: Component, props?: Record<string, unknown>): Promise<TResult | undefined>;
+declare function closeAll(): void;
+declare function dismiss(id: number): void;
+declare function notify(request: VunoNotifyRequest): number;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {
+    alert: (request: VunoAlertRequest) => Promise<void>;
+    closeAll: typeof closeAll;
+    confirm: (request: VunoConfirmRequest) => Promise<boolean>;
+    dismiss: typeof dismiss;
+    notify: typeof notify;
+    open: typeof open;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    dir: "ltr" | "rtl";
+}, {}, {}, {}, 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/App/App.vue

@@ -0,0 +1,150 @@
+<script setup>
+import { markRaw, onBeforeUnmount, provide, reactive, shallowReactive } from "vue";
+import { vunoContextInjectionKey, vunoDirectionInjectionKey } from "#vuno/internal/keys";
+import Overlay from "#vuno/components/App/internal/Overlay/Overlay.vue";
+import Toaster from "#vuno/components/App/internal/Toaster/Toaster.vue";
+import Confirm from "#vuno/components/Confirm/Confirm.vue";
+defineOptions({ name: "VunoApp" });
+const props = defineProps({
+  dir: { type: String, required: false, default: "ltr" }
+});
+const notifications = shallowReactive([]);
+const overlays = reactive([]);
+let nextId = 0;
+const EXIT_MS = 220;
+function removeOverlay(id) {
+  const index = overlays.findIndex((entry) => entry.id === id);
+  if (index !== -1) overlays.splice(index, 1);
+}
+function dismissOverlay(id) {
+  const entry = overlays.find((item) => item.id === id);
+  if (entry) entry.open = false;
+  setTimeout(() => removeOverlay(id), EXIT_MS);
+}
+function open(component, props2 = {}) {
+  return new Promise((resolve) => {
+    const id = nextId++;
+    let settled = false;
+    const settle = (value) => {
+      if (settled) return;
+      settled = true;
+      resolve(value);
+      dismissOverlay(id);
+    };
+    overlays.push({
+      id,
+      // El registro es reactivo en profundidad para poder animar la
+      // salida, y eso alcanzaría también al componente: envolverlo en
+      // un proxy no sirve de nada y Vue avisa de ello.
+      component: markRaw(component),
+      listeners: {
+        close: (value) => settle(value),
+        /**
+         * Se aplaza una microtarea porque lo normal dentro del modal
+         * es cerrar y luego emitir el resultado:
+         *
+         * ```ts
+         * open.value = false
+         * emit('close', true)
+         * ```
+         *
+         * Resolver aquí en el acto se quedaría con el primero de los
+         * dos y devolvería `undefined` habiendo un resultado. Con el
+         * aplazamiento, un `close` síncrono llega antes y gana; si no
+         * llega ninguno —Escape, pulsar fuera—, resuelve sin valor.
+         */
+        "update:open": (value) => {
+          if (!value) queueMicrotask(() => settle(void 0));
+        }
+      },
+      open: true,
+      props: { ...props2 }
+    });
+  });
+}
+function askConfirm(request, dismissed) {
+  return new Promise((resolve) => {
+    const id = nextId++;
+    let settled = false;
+    const settle = (value) => {
+      if (settled) return;
+      settled = true;
+      resolve(value);
+      dismissOverlay(id);
+    };
+    overlays.push({
+      id,
+      component: markRaw(Confirm),
+      listeners: {
+        cancel: () => settle(false),
+        confirm: () => settle(true),
+        // Escape o pulsar fuera: en una confirmación es que no, y en
+        // una alerta es que ya se enteró.
+        "update:open": (value) => {
+          if (!value) settle(dismissed);
+        }
+      },
+      open: true,
+      props: { ...request }
+    });
+  });
+}
+const confirm = (request) => askConfirm(request, false);
+const alert = async (request) => {
+  await askConfirm({ ...request, alert: true }, true);
+};
+function closeAll() {
+  for (const entry of [...overlays]) (entry.listeners.cancel ?? entry.listeners.close)?.();
+}
+const timers = /* @__PURE__ */ new Map();
+function dismiss(id) {
+  const timer = timers.get(id);
+  if (timer) {
+    clearTimeout(timer);
+    timers.delete(id);
+  }
+  const index = notifications.findIndex((entry) => entry.id === id);
+  if (index !== -1) notifications.splice(index, 1);
+}
+function notify(request) {
+  const id = nextId++;
+  const duration = request.duration ?? 5e3;
+  notifications.push({ ...request, id, color: request.color ?? "neutral", duration });
+  if (duration > 0)
+    timers.set(
+      id,
+      setTimeout(() => dismiss(id), duration)
+    );
+  return id;
+}
+onBeforeUnmount(() => {
+  for (const timer of timers.values()) clearTimeout(timer);
+  timers.clear();
+});
+const context = { alert, closeAll, confirm, dismiss, notifications, notify, open, overlays };
+provide(vunoDirectionInjectionKey, () => props.dir);
+provide(vunoContextInjectionKey, context);
+defineExpose({ alert, closeAll, confirm, dismiss, notify, open });
+</script>
+
+<template>
+    <!--
+        La dirección de lectura se pone en el elemento —de donde la lee el
+        navegador— y se provee además a los componentes que la necesitan.
+        Vue aporta un `useId` estable que Nuxt conserva entre servidor y cliente.
+
+        El `div` es la única forma de llevar el `dir` sin pedirle nada al
+        proyecto. No pinta: no tiene clase ni estilo, así que el hijo se
+        comporta igual que si colgara del padre.
+    -->
+    <div :dir="props.dir">
+        <slot />
+
+        <Overlay :overlays="overlays" />
+
+        <Toaster
+            :notifications="notifications"
+            @dismiss="dismiss"
+        />
+    </div>
+</template>