@groupteknology/vuno 0.6.0 → 0.6.1

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

@@ -68,6 +68,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 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.
+
 ### 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.
@@ -404,6 +412,10 @@ 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`.
+
+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:
@@ -431,6 +443,39 @@ Tipos de columna: `text` · `number` · `currency` · `date` · `boolean` · `ba
 
 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 = useVunoModal()
+
+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é |

package/dist/module.json

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

package/dist/module.mjs

@@ -20,6 +20,12 @@ const module$1 = defineNuxtModule({
       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"));
     nuxt.options.css.push(resolver.resolve("./runtime/app/assets/css/main.css"));
   }

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

@@ -1 +1 @@
-@import "tailwindcss";@import "@nuxt/ui";@source "../../**/*";
+@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}}

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

@@ -0,0 +1,33 @@
+import { type Component } from 'vue';
+import type { VunoAlertRequest, VunoConfirmRequest, VunoNotifyRequest } from '#vuno/types/app';
+/**
+ * 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<{}, {
+    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<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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,127 @@
+<script setup>
+import { onBeforeUnmount, provide, reactive, shallowReactive } from "vue";
+import Confirm from "#vuno/components/Confirm/Confirm.vue";
+import { vunoContextInjectionKey } from "#vuno/composables/useVunoContext";
+import AppOverlay from "./AppOverlay.vue";
+import AppToaster from "./AppToaster.vue";
+const overlays = reactive([]);
+const notifications = shallowReactive([]);
+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, props = {}) {
+  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,
+      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: { ...props }
+    });
+  });
+}
+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: 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(vunoContextInjectionKey, context);
+defineExpose({ alert, closeAll, confirm, dismiss, notify, open });
+</script>
+
+<template>
+    <slot />
+
+    <AppOverlay :overlays="overlays" />
+
+    <AppToaster
+        :notifications="notifications"
+        @dismiss="dismiss"
+    />
+</template>

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

@@ -0,0 +1,33 @@
+import { type Component } from 'vue';
+import type { VunoAlertRequest, VunoConfirmRequest, VunoNotifyRequest } from '#vuno/types/app';
+/**
+ * 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<{}, {
+    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<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/AppContext.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/App/AppContext.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div>
+        <!--  -->
+    </div>
+</template>

package/dist/runtime/app/components/App/AppContext.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/App/AppModal.d.vue.ts

@@ -0,0 +1,38 @@
+import type { VunoFieldSlots } from '#vuno/types/field';
+type __VLS_Props = {
+    description?: string;
+    /** Cerrar con Escape o pulsando el fondo. */
+    dismissible?: boolean;
+    title?: string;
+    ui?: VunoFieldSlots;
+};
+type __VLS_Slots = {
+    body?: () => unknown;
+    default?: () => unknown;
+    footer?: () => unknown;
+    header?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    description: string;
+    title: string;
+    ui: VunoFieldSlots;
+    dismissible: boolean;
+}, {}, {}, {}, 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/AppModal.vue

@@ -0,0 +1,103 @@
+<script setup>
+import { onBeforeUnmount, useTemplateRef, watch } from "vue";
+import { useVunoTheme } from "#vuno/composables/useVunoTheme";
+const props = defineProps({
+  description: { type: String, required: false, default: void 0 },
+  dismissible: { type: Boolean, required: false, default: true },
+  title: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["close"]);
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+defineSlots();
+const ui = useVunoTheme("appModal", () => props.ui);
+const dialog = useTemplateRef("dialog");
+function lockScroll(locked) {
+  if (typeof document === "undefined") return;
+  document.body.style.overflow = locked ? "hidden" : "";
+}
+watch(
+  [open, dialog],
+  ([value, element]) => {
+    if (!element) return;
+    if (value && !element.open) {
+      element.showModal();
+      lockScroll(true);
+      return;
+    }
+    if (!value && element.open) {
+      element.close();
+      lockScroll(false);
+    }
+  },
+  { immediate: true }
+);
+onBeforeUnmount(() => lockScroll(false));
+function requestClose() {
+  open.value = false;
+  lockScroll(false);
+  emit("close");
+}
+function onCancel(event) {
+  event.preventDefault();
+  if (props.dismissible) requestClose();
+}
+function onClick(event) {
+  if (!props.dismissible) return;
+  const element = dialog.value;
+  if (!element || event.target !== element) return;
+  const box = element.getBoundingClientRect();
+  const inside = event.clientX >= box.left && event.clientX <= box.right && event.clientY >= box.top && event.clientY <= box.bottom;
+  if (!inside) requestClose();
+}
+</script>
+
+<template>
+    <dialog
+        ref="dialog"
+        :aria-describedby="props.description ? 'vuno-modal-description' : void 0"
+        :aria-labelledby="props.title ? 'vuno-modal-title' : void 0"
+        :class="ui.root"
+        @cancel="onCancel"
+        @click="onClick"
+        @close="open = false"
+    >
+        <div :class="ui.content">
+            <slot name="header">
+                <div
+                    v-if="props.title || props.description"
+                    :class="ui.header"
+                >
+                    <h2
+                        v-if="props.title"
+                        id="vuno-modal-title"
+                        :class="ui.title"
+                    >
+                        {{ props.title }}
+                    </h2>
+
+                    <p
+                        v-if="props.description"
+                        id="vuno-modal-description"
+                        :class="ui.description"
+                    >
+                        {{ props.description }}
+                    </p>
+                </div>
+            </slot>
+
+            <div :class="ui.body">
+                <slot name="body">
+                    <slot />
+                </slot>
+            </div>
+
+            <div
+                v-if="$slots.footer"
+                :class="ui.footer"
+            >
+                <slot name="footer" />
+            </div>
+        </div>
+    </dialog>
+</template>

package/dist/runtime/app/components/App/AppModal.vue.d.ts

@@ -0,0 +1,38 @@
+import type { VunoFieldSlots } from '#vuno/types/field';
+type __VLS_Props = {
+    description?: string;
+    /** Cerrar con Escape o pulsando el fondo. */
+    dismissible?: boolean;
+    title?: string;
+    ui?: VunoFieldSlots;
+};
+type __VLS_Slots = {
+    body?: () => unknown;
+    default?: () => unknown;
+    footer?: () => unknown;
+    header?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    description: string;
+    title: string;
+    ui: VunoFieldSlots;
+    dismissible: boolean;
+}, {}, {}, {}, 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/AppOverlay.d.vue.ts

@@ -0,0 +1,7 @@
+import type { VunoOverlayEntry } from '#vuno/types/app';
+type __VLS_Props = {
+    overlays: VunoOverlayEntry[];
+};
+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;

package/dist/runtime/app/components/App/AppOverlay.vue

@@ -0,0 +1,33 @@
+<script setup>
+const props = defineProps({
+  overlays: { type: Array, required: true }
+});
+const isTopmost = (index) => index === props.overlays.length - 1;
+</script>
+
+<template>
+    <!--
+        Los overlays globales se pintan aquí y no donde se pidieron. Un diálogo
+        montado dentro de la pantalla que lo abre desaparece con ella —al navegar,
+        al cerrarse un modal que lo contenía— y su promesa se queda sin resolver.
+
+        No hay escalera de z-index, y no por olvido: se escribió una y resultó
+        inútil. Los diálogos de vuno son `<dialog>` nativos, que viven en la capa
+        superior del navegador y se apilan por orden de apertura, por encima de
+        cualquier z-index. Mientras todo sea nativo, el apilado ya es correcto;
+        en cuanto se mezcla con algo que no lo sea, ningún z-index lo arregla,
+        porque la capa superior siempre gana.
+
+        Tampoco lleva contenedor propio: cada diálogo se sale del flujo por su
+        cuenta, así que un elemento aquí solo añadiría un nodo vacío.
+    -->
+    <component
+        :is="entry.component"
+        v-for="(entry, index) in props.overlays"
+        :key="entry.id"
+        v-bind="entry.props"
+        :class="isTopmost(index) ? void 0 : 'vuno-overlay-behind'"
+        :open="entry.open"
+        v-on="entry.listeners"
+    />
+</template>

package/dist/runtime/app/components/App/AppOverlay.vue.d.ts

@@ -0,0 +1,7 @@
+import type { VunoOverlayEntry } from '#vuno/types/app';
+type __VLS_Props = {
+    overlays: VunoOverlayEntry[];
+};
+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;

package/dist/runtime/app/components/App/AppToast.d.vue.ts

@@ -0,0 +1,11 @@
+import type { VunoNotification } from '#vuno/types/app';
+type __VLS_Props = {
+    notification: VunoNotification;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dismiss: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDismiss?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/App/AppToast.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { computed } from "vue";
+import { useVunoIcons, useVunoMessages, useVunoTheme } from "#vuno/composables/useVunoTheme";
+const props = defineProps({
+  notification: { type: Object, required: true }
+});
+const emit = defineEmits(["dismiss"]);
+const icons = useVunoIcons();
+const messages = useVunoMessages();
+const ui = useVunoTheme("appToast");
+const defaultIcons = {
+  error: icons.value.notifyError,
+  info: icons.value.notifyInfo,
+  neutral: icons.value.notifyInfo,
+  success: icons.value.notifySuccess,
+  warning: icons.value.notifyWarning
+};
+const icon = computed(() => props.notification.icon ?? defaultIcons[props.notification.color]);
+const live = computed(() => props.notification.color === "error" ? "assertive" : "polite");
+</script>
+
+<template>
+    <div
+        :aria-live="live"
+        :class="ui.root"
+        role="status"
+    >
+        <UIcon
+            :class="[ui.icon, `text-${props.notification.color}`]"
+            :name="icon"
+        />
+
+        <div :class="ui.body">
+            <p :class="ui.title">{{ props.notification.title }}</p>
+
+            <p
+                v-if="props.notification.description"
+                :class="ui.description"
+            >
+                {{ props.notification.description }}
+            </p>
+        </div>
+
+        <UButton
+            :aria-label="messages.close"
+            color="neutral"
+            :icon="icons.close"
+            size="xs"
+            variant="ghost"
+            @click="emit('dismiss')"
+        />
+    </div>
+</template>

package/dist/runtime/app/components/App/AppToast.vue.d.ts

@@ -0,0 +1,11 @@
+import type { VunoNotification } from '#vuno/types/app';
+type __VLS_Props = {
+    notification: VunoNotification;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dismiss: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDismiss?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;