@aerogel/core 0.1.1-next.9bd06e629f34098543a54bdb87e8996767876d42 → 0.1.1-next.a8a712e051e6729532e787aab3e4573464412909

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.1.1-next.9bd06e629f34098543a54bdb87e8996767876d42",
+    "version": "0.1.1-next.a8a712e051e6729532e787aab3e4573464412909",
     "type": "module",
     "sideEffects": false,
     "exports": {
@@ -35,6 +35,7 @@
         "clsx": "^2.1.1",
         "dompurify": "^3.2.4",
         "eruda": "^3.4.1",
+        "eruda-indexeddb": "^0.1.1",
         "marked": "^15.0.7",
         "pinia": "^2.1.6",
         "reka-ui": "^2.2.0",

package/src/components/AppLayout.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex min-h-full flex-col text-base leading-tight font-normal text-gray-900 antialiased">
+    <div class="text-primary-text flex min-h-full flex-col text-base leading-tight font-normal antialiased">
         <slot v-if="$errors.hasStartupErrors" name="startup-crash">
             <component :is="$ui.requireComponent('startup-crash')" />
         </slot>

package/src/components/AppOverlays.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script setup lang="ts">
-import { ModalsPortal } from '@noeldemartin/vue-modals';
+import { ModalsPortal } from '@aerogel/core/ui/modals';
 
 import AppToasts from './AppToasts.vue';
 </script>

package/src/components/contracts/Button.ts

@@ -1,7 +1,7 @@
 import type { PrimitiveProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 
-export type ButtonVariant = 'default' | 'secondary' | 'danger' | 'ghost' | 'outline' | 'link';
+export type ButtonVariant = 'default' | 'secondary' | 'danger' | 'warning' | 'ghost' | 'outline' | 'link';
 export type ButtonSize = 'default' | 'small' | 'large' | 'icon';
 export interface ButtonProps extends PrimitiveProps {
     class?: HTMLAttributes['class'];

package/src/components/contracts/Modal.ts

@@ -5,6 +5,8 @@ export type ModalContentInstance = Nullable<InstanceType<typeof DialogContent>>;
 
 export interface ModalProps {
     persistent?: boolean;
+    fullscreen?: boolean;
+    fullscreenOnMobile?: boolean;
     title?: string;
     titleHidden?: boolean;
     description?: string;

package/src/components/contracts/Toast.ts

@@ -1,4 +1,4 @@
-export type ToastVariant = 'secondary' | 'danger';
+export type ToastVariant = 'secondary' | 'warning' | 'danger';
 
 export interface ToastAction {
     label: string;

package/src/components/headless/HeadlessInputInput.vue

@@ -19,6 +19,7 @@ import { computed, inject, useTemplateRef, watchEffect } from 'vue';
 
 import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
 import { onFormFocus } from '@aerogel/core/utils/composition/forms';
+import { LOCAL_TIMEZONE_OFFSET } from '@aerogel/core/utils';
 import type FormController from '@aerogel/core/forms/FormController';
 import type { FormFieldValue } from '@aerogel/core/forms/FormController';
 import type { InputExpose } from '@aerogel/core/components/contracts/Input';
@@ -39,7 +40,7 @@ const renderedType = computed(() => {
     return ['text', 'email', 'number', 'tel', 'url'].includes(fieldType) ? fieldType : 'text';
 });
 const checked = computed(() => {
-    if (type !== 'checkbox') {
+    if (renderedType.value !== 'checkbox') {
         return;
     }
 
@@ -59,11 +60,15 @@ function getValue(): FormFieldValue | null {
         return null;
     }
 
-    switch (type) {
+    switch (renderedType.value) {
         case 'checkbox':
             return $input.value.checked;
         case 'date':
-            return $input.value.valueAsDate;
+        case 'time':
+        case 'datetime-local':
+            return new Date(Math.round($input.value.valueAsNumber / 60000) * 60000 + LOCAL_TIMEZONE_OFFSET);
+        case 'number':
+            return $input.value.valueAsNumber;
         default:
             return $input.value.value;
     }
@@ -75,8 +80,11 @@ watchEffect(() => {
         return;
     }
 
-    if (type === 'date' && value.value instanceof Date) {
-        $input.value.valueAsDate = value.value;
+    if (['date', 'time', 'datetime-local'].includes(renderedType.value) && value.value instanceof Date) {
+        const roundedValue = Math.round(value.value.getTime() / 60000) * 60000;
+
+        $input.value.valueAsNumber = roundedValue - LOCAL_TIMEZONE_OFFSET;
+        input.update(new Date(roundedValue));
 
         return;
     }

package/src/components/headless/HeadlessModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <DialogRoot :ref="forwardRef" open @update:open="persistent || close()">
+    <DialogRoot :ref="forwardRef" open @update:open="persistent || $event || close()">
         <DialogPortal>
             <slot :close />
         </DialogPortal>
@@ -7,18 +7,17 @@
 </template>
 
 <script setup lang="ts" generic="T = void">
-import { after } from '@noeldemartin/utils';
 import { DialogPortal, DialogRoot, useForwardExpose } from 'reka-ui';
 import { provide, ref } from 'vue';
-import { useModal } from '@noeldemartin/vue-modals';
 import type { DialogContent } from 'reka-ui';
 import type { Nullable } from '@noeldemartin/utils';
 
+import { useModal } from '@aerogel/core/ui/modals';
 import type { AcceptRefs } from '@aerogel/core/utils/vue';
 import type { ModalExpose, ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
 
 const $content = ref<Nullable<InstanceType<typeof DialogContent>>>(null);
-const modal = useModal<T>({ removeOnClose: false });
+const { close } = useModal<T>();
 
 defineProps<ModalProps>();
 defineSlots<ModalSlots<T>>();
@@ -27,12 +26,4 @@ defineExpose<AcceptRefs<ModalExpose>>({ $content });
 const { forwardRef } = useForwardExpose();
 
 provide('$modalContentRef', $content);
-
-async function close(result?: T) {
-    modal.close(result);
-
-    await after(1000);
-
-    modal.remove();
-}
 </script>

package/src/components/headless/HeadlessModalContent.vue

@@ -9,9 +9,9 @@
 <script setup lang="ts">
 import { useTemplateRef, watchEffect } from 'vue';
 import { DialogContent } from 'reka-ui';
-import { ModalComponent, useModal } from '@noeldemartin/vue-modals';
 import type { Ref } from 'vue';
 
+import { ModalComponent, useModal } from '@aerogel/core/ui/modals';
 import { injectOrFail } from '@aerogel/core/utils/vue';
 import type { ModalContentInstance } from '@aerogel/core/components/contracts/Modal';
 

package/src/components/ui/AdvancedOptions.vue

@@ -1,18 +1,9 @@
 <template>
-    <details class="group">
-        <summary
-            class="-ml-2 flex w-[max-content] items-center rounded-lg py-2 pr-3 pl-1 hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700"
-        >
-            <IconCheveronRight class="size-6 transition-transform group-open:rotate-90" />
-            <span>{{ $td('ui.advancedOptions', 'Advanced options') }}</span>
-        </summary>
-
-        <div class="pt-2 pl-4">
-            <slot />
-        </div>
-    </details>
+    <Details :label="$td('ui.advancedOptions', 'Advanced options')">
+        <slot />
+    </Details>
 </template>
 
 <script setup lang="ts">
-import IconCheveronRight from '~icons/zondicons/cheveron-right';
+import Details from './Details.vue';
 </script>

package/src/components/ui/Button.vue

@@ -25,6 +25,7 @@ const renderedClasses = computed(() => variantClasses<Variants<Pick<ButtonProps,
                 default: 'bg-primary-600 text-white focus-visible:outline-primary-600',
                 secondary: 'bg-background text-gray-900 ring-gray-300',
                 danger: 'bg-red-600 text-white focus-visible:outline-red-600',
+                warning: 'bg-yellow-600 text-white focus-visible:outline-yellow-600',
                 ghost: 'bg-transparent',
                 outline: 'bg-transparent text-primary-600 ring-primary-600',
                 link: 'text-links',

package/src/components/ui/Details.vue

@@ -0,0 +1,33 @@
+<template>
+    <details class="group">
+        <summary :class="renderedSummaryClasses">
+            <IconCheveronRight class="size-6 transition-transform group-open:rotate-90" />
+            <slot name="label">
+                <span>{{ label ?? $td('ui.details', 'Details') }}</span>
+            </slot>
+        </summary>
+
+        <div :class="renderedContentClasses">
+            <slot />
+        </div>
+    </details>
+</template>
+
+<script setup lang="ts">
+import IconCheveronRight from '~icons/zondicons/cheveron-right';
+import { classes } from '@aerogel/core/utils';
+import { type HTMLAttributes, computed } from 'vue';
+
+const {
+    label = undefined,
+    contentClass,
+    summaryClass,
+} = defineProps<{ label?: string; contentClass?: HTMLAttributes['class']; summaryClass?: HTMLAttributes['class'] }>();
+const renderedContentClasses = computed(() => classes('pt-2 pl-4', contentClass));
+const renderedSummaryClasses = computed(() =>
+    classes(
+        '-ml-2 flex w-[max-content] items-center rounded-lg py-2 pr-3 pl-1 max-w-full',
+        'hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700',
+        summaryClass,
+    ));
+</script>

package/src/components/ui/Input.vue

@@ -13,8 +13,8 @@
                 <IconExclamationSolid class="size-5 text-red-500" />
             </div>
         </div>
-        <HeadlessInputDescription class="mt-2 text-sm text-gray-600" />
-        <HeadlessInputError class="mt-2 text-sm text-red-600" />
+        <HeadlessInputDescription :class="renderedDescriptionClasses" />
+        <HeadlessInputError :class="renderedErrorClasses" />
     </HeadlessInput>
 </template>
 
@@ -35,13 +35,21 @@ import type { InputEmits, InputProps } from '@aerogel/core/components/contracts/
 
 defineOptions({ inheritAttrs: false });
 defineEmits<InputEmits>();
-const { label, inputClass, wrapperClass, ...props } = defineProps<
-    InputProps & { inputClass?: HTMLAttributes['class']; wrapperClass?: HTMLAttributes['class'] }
+
+const { label, inputClass, wrapperClass, descriptionClass, errorClass, ...props } = defineProps<
+    InputProps & {
+        inputClass?: HTMLAttributes['class'];
+        wrapperClass?: HTMLAttributes['class'];
+        descriptionClass?: HTMLAttributes['class'];
+        errorClass?: HTMLAttributes['class'];
+    }
 >();
 const $input = useTemplateRef('$inputRef');
 const [inputAttrs, rootClasses] = useInputAttrs();
 const renderedWrapperClasses = computed(() =>
     classes('relative rounded-md shadow-2xs', { 'mt-1': label }, wrapperClass));
+const renderedDescriptionClasses = computed(() => classes('mt-2 text-sm text-gray-600', descriptionClass));
+const renderedErrorClasses = computed(() => classes('mt-2 text-sm text-red-600', errorClass));
 const renderedInputClasses = computed(() =>
     classes(
         // eslint-disable-next-line vue/max-len

package/src/components/ui/LoadingModal.vue

@@ -1,11 +1,10 @@
 <template>
     <Modal
         persistent
-        class="flex"
         wrapper-class="w-auto"
         :title="renderedTitle"
         :title-hidden
-        :class="{ 'flex-col-reverse': showProgress, 'items-center justify-center gap-2': !showProgress }"
+        :class="{ 'flex-col-reverse': showProgress, 'flex-row items-center justify-center gap-2': !showProgress }"
     >
         <ProgressBar
             v-if="showProgress"

package/src/components/ui/Modal.vue

@@ -12,10 +12,15 @@
                 'animate-[fade-in_var(--tw-duration)_ease-in-out]': !hasRenderedModals,
                 'bg-black/30': firstVisibleModal?.id === id || (!firstVisibleModal && modals[0]?.id === id),
                 'opacity-0': !firstVisibleModal,
+                hidden: renderFullscreen,
             }"
         />
         <HeadlessModalContent v-bind="contentProps" :class="renderedWrapperClass">
-            <div v-if="!persistent && !closeHidden" class="absolute top-0 right-0 hidden pt-3.5 pr-2.5 sm:block">
+            <div
+                v-if="!persistent && !closeHidden"
+                class="absolute top-0 right-0 pt-3.5 pr-2.5"
+                :class="{ 'hidden sm:block': !renderFullscreen }"
+            >
                 <button
                     type="button"
                     class="clickable z-10 rounded-full p-2.5 text-gray-400 hover:text-gray-500"
@@ -58,8 +63,6 @@ import IconClose from '~icons/zondicons/close';
 
 import { useForwardExpose } from 'reka-ui';
 import { computed, onMounted } from 'vue';
-import { injectModal, modals, useModal } from '@noeldemartin/vue-modals';
-import type { ModalController } from '@noeldemartin/vue-modals';
 import type { ComponentPublicInstance, HTMLAttributes, Ref } from 'vue';
 import { type Nullable, after } from '@noeldemartin/utils';
 
@@ -69,8 +72,11 @@ import HeadlessModalContent from '@aerogel/core/components/headless/HeadlessModa
 import HeadlessModalDescription from '@aerogel/core/components/headless/HeadlessModalDescription.vue';
 import HeadlessModalOverlay from '@aerogel/core/components/headless/HeadlessModalOverlay.vue';
 import HeadlessModalTitle from '@aerogel/core/components/headless/HeadlessModalTitle.vue';
+import UI from '@aerogel/core/ui/UI';
 import { classes } from '@aerogel/core/utils/classes';
 import { reactiveSet } from '@aerogel/core/utils';
+import { injectModal, modals, useModal } from '@aerogel/core/ui/modals';
+import type { ModalController } from '@aerogel/core/ui/modals';
 import type { AcceptRefs } from '@aerogel/core/utils/vue';
 import type { ModalExpose, ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
 
@@ -88,6 +94,8 @@ const {
     description,
     persistent,
     closeHidden,
+    fullscreen,
+    fullscreenOnMobile,
     ...props
 } = defineProps<
     ModalProps & {
@@ -113,18 +121,29 @@ const firstVisibleModal = computed(() => modals.value.find((modal) => modal.visi
 const hasRenderedModals = computed(() => modals.value.some((modal) => renderedModals.has(modal)));
 const contentProps = computed(() => (description ? {} : { 'aria-describedby': undefined }));
 const renderedContentClass = computed(() =>
-    classes('max-h-[90vh] overflow-auto px-4 pb-4', { 'pt-4': !title || titleHidden }, contentClass));
+    classes(
+        'overflow-auto px-4 pb-4 flex flex-col flex-1',
+        { 'pt-4': !title || titleHidden, 'max-h-[90vh]': !renderFullscreen.value },
+        contentClass,
+    ));
+const renderFullscreen = computed(() => fullscreen || (fullscreenOnMobile && UI.mobile));
 const renderedWrapperClass = computed(() =>
     classes(
-        'isolate fixed top-1/2 left-1/2 z-50 w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2',
-        'overflow-hidden rounded-lg bg-white text-left shadow-xl sm:max-w-lg',
-        renderedModals.has(modal.value) ||
-            'animate-[fade-in_var(--tw-duration)_ease-in-out,grow_var(--tw-duration)_ease-in-out]',
-        'transition-[scale,opacity] will-change-[scale,opacity] duration-300',
-        {
-            'scale-50 opacity-0': !inForeground.value,
-            'scale-100 opacity-100': inForeground.value,
-        },
+        'isolate fixed z-50 flex flex-col overflow-hidden bg-white text-left duration-300',
+        renderFullscreen.value
+            ? [
+                'inset-0 transition-[transform,translate] will-change-[transform,translate]',
+                renderedModals.has(modal.value) || 'animate-[slide-in_var(--tw-duration)_ease-in-out]',
+                inForeground.value ? 'translate-y-0' : 'translate-y-full',
+            ]
+            : [
+                'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full',
+                'max-w-[calc(100%-2rem)] rounded-lg shadow-xl sm:max-w-lg',
+                'transition-[scale,opacity] will-change-[scale,opacity]',
+                renderedModals.has(modal.value) ||
+                      'animate-[fade-in_var(--tw-duration)_ease-in-out,grow_var(--tw-duration)_ease-in-out]',
+                inForeground.value ? 'scale-100 opacity-100' : 'scale-50 opacity-0',
+            ],
         wrapperClass,
     ));
 

package/src/components/ui/ProgressBar.vue

@@ -1,6 +1,11 @@
 <template>
-    <div class="mt-1 h-2 w-full overflow-hidden rounded-full bg-gray-200">
+    <div class="relative mt-1 h-2 w-full overflow-hidden rounded-full bg-gray-200">
         <div :class="filledClasses" :style="`transform:translateX(-${(1 - renderedProgress) * 100}%)`" />
+        <div
+            v-if="overflowWidthPercentage"
+            :class="overflowClasses"
+            :style="{ width: `${overflowWidthPercentage}%` }"
+        />
         <span class="sr-only">
             {{
                 $td('ui.progress', '{progress}% complete', {
@@ -18,8 +23,9 @@ import { classes } from '@aerogel/core/utils/classes';
 import type Job from '@aerogel/core/jobs/Job';
 import type { Falsifiable } from '@aerogel/core/utils';
 
-const { filledClass, progress, job } = defineProps<{
+const { filledClass, overflowClass, progress, job } = defineProps<{
     filledClass?: string;
+    overflowClass?: string;
     progress?: number;
     job?: Falsifiable<Job>;
 }>();
@@ -28,6 +34,12 @@ let cleanup: Falsifiable<Function>;
 const jobProgress = ref(0);
 const filledClasses = computed(() =>
     classes('size-full transition-transform duration-500 rounded-r-full ease-linear bg-primary-600', filledClass));
+const overflowClasses = computed(() =>
+    classes(
+        'absolute inset-y-0 right-0 size-full rounded-r-full',
+        'bg-primary-900 transition-[width] duration-500 ease-linear',
+        overflowClass,
+    ));
 const renderedProgress = computed(() => {
     if (typeof progress === 'number') {
         return progress;
@@ -35,6 +47,8 @@ const renderedProgress = computed(() => {
 
     return jobProgress.value;
 });
+const overflowWidthPercentage = computed(() =>
+    renderedProgress.value > 1 ? 100 * ((renderedProgress.value - 1) / renderedProgress.value) : null);
 
 watch(
     () => job,

package/src/components/ui/SettingsModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <Modal :title="$td('settings.title', 'Settings')">
+    <Modal :title="$td('settings.title', 'Settings')" :fullscreen-on-mobile="$app.settingsFullscreenOnMobile">
         <component :is="setting.component" v-for="(setting, key) in settings" :key />
     </Modal>
 </template>

package/src/components/ui/Toast.vue

@@ -34,6 +34,7 @@ const renderedClasses = computed(() =>
                 variant: {
                     secondary: 'bg-gray-900 text-white ring-black',
                     danger: 'bg-red-50 text-red-900 ring-red-100',
+                    warning: 'bg-yellow-50 text-yellow-900 ring-yellow-100',
                 },
             },
             defaultVariants: {

package/src/components/ui/index.ts

@@ -3,6 +3,7 @@ export { default as AlertModal } from './AlertModal.vue';
 export { default as Button } from './Button.vue';
 export { default as Checkbox } from './Checkbox.vue';
 export { default as ConfirmModal } from './ConfirmModal.vue';
+export { default as Details } from './Details.vue';
 export { default as DropdownMenu } from './DropdownMenu.vue';
 export { default as DropdownMenuOption } from './DropdownMenuOption.vue';
 export { default as DropdownMenuOptions } from './DropdownMenuOptions.vue';

package/src/errors/Errors.ts

@@ -1,6 +1,7 @@
 import { JSError, facade, isDevelopment, isObject, isTesting, objectWithoutEmpty, toString } from '@noeldemartin/utils';
 import { watchEffect } from 'vue';
 import type Eruda from 'eruda';
+import type ErudaIndexedDB from 'eruda-indexeddb';
 
 import App from '@aerogel/core/services/App';
 import ServiceBootError from '@aerogel/core/errors/ServiceBootError';
@@ -16,6 +17,7 @@ export class ErrorsService extends Service {
     public forceReporting: boolean = false;
     private enabled: boolean = true;
     private eruda: typeof Eruda | null = null;
+    private erudaPlugins: [typeof ErudaIndexedDB] | null = null;
 
     public enable(): void {
         this.enabled = true;
@@ -131,8 +133,10 @@ export class ErrorsService extends Service {
             }
 
             this.eruda ??= (await import('eruda')).default;
+            this.erudaPlugins ??= [(await import('eruda-indexeddb')).default];
 
             this.eruda.init();
+            this.erudaPlugins.forEach((plugin) => this.eruda?.add(plugin));
         });
     }
 

package/src/forms/FormController.ts

@@ -112,6 +112,10 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
         return this._fields[field]?.rules?.split('|') ?? [];
     }
 
+    public setFieldErrors<T extends keyof Fields>(field: T, errors: string[] | null): void {
+        this._errors[field] = errors;
+    }
+
     public getFieldType<T extends keyof Fields>(field: T): FormFieldType | null {
         return this._fields[field]?.type ?? null;
     }

package/src/index.css

@@ -20,6 +20,7 @@
     --color-primary-950: color-mix(in oklab, var(--color-primary-600) 50%, black);
 
     --color-background: oklch(1 0 0);
+    --color-primary-text: var(--color-gray-900);
     --color-links: var(--color-primary);
 
     --breakpoint-content: var(--breakpoint-md);
@@ -66,6 +67,15 @@ button[data-markdown-action] {
     }
 }
 
+@keyframes slide-in {
+    0% {
+        transform: translateY(100%);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
 @keyframes grow {
     0% {
         scale: 0;

package/src/services/App.state.ts

@@ -24,6 +24,7 @@ export default defineServiceState({
         version: Aerogel.version,
         sourceUrl: Aerogel.sourceUrl,
         settings: [] as AppSetting[],
+        settingsFullscreenOnMobile: false,
     },
     computed: {
         development: (state) => state.environment === 'development',

package/src/services/App.ts

@@ -30,6 +30,10 @@ export class AppService extends Service {
         this.settings.push(markRaw(setting));
     }
 
+    public setSettingsFullscreenOnMobile(fullscreenOnMobile: boolean): void {
+        this.settingsFullscreenOnMobile = fullscreenOnMobile;
+    }
+
     public async whenReady<T>(callback: () => T): Promise<T> {
         const result = await this.ready.then(callback);
 

package/src/services/index.ts

@@ -56,6 +56,10 @@ export default definePlugin({
         app.use(getPiniaStore());
         options.settings?.forEach((setting) => App.addSetting(setting));
 
+        if (options.settingsFullscreenOnMobile !== undefined) {
+            App.setSettingsFullscreenOnMobile(options.settingsFullscreenOnMobile);
+        }
+
         await bootServices(app, services);
     },
 });
@@ -64,6 +68,7 @@ declare module '@aerogel/core/bootstrap/options' {
     export interface AerogelOptions {
         services?: Record<string, Service>;
         settings?: AppSetting[];
+        settingsFullscreenOnMobile?: boolean;
     }
 }
 

package/src/ui/UI.ts

@@ -1,11 +1,11 @@
 import { after, facade, fail, isDevelopment, uuid } from '@noeldemartin/utils';
 import { markRaw, unref } from 'vue';
-import { closeModal, createModal, modals, showModal } from '@noeldemartin/vue-modals';
 import type { Constructor } from '@noeldemartin/utils';
 import type { Component, ComputedOptions, MethodOptions } from 'vue';
-import type { GetModalProps, GetModalResponse } from '@noeldemartin/vue-modals';
 
 import Events from '@aerogel/core/services/Events';
+import { closeModal, createModal, modals, showModal } from '@aerogel/core/ui/modals';
+import type { GetModalProps, GetModalResponse } from '@aerogel/core/ui/modals';
 import type { AcceptRefs } from '@aerogel/core/utils';
 import type { AlertModalExpose, AlertModalProps } from '@aerogel/core/components/contracts/AlertModal';
 import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';

package/src/ui/index.ts

@@ -14,20 +14,10 @@ import type { Component } from 'vue';
 
 const services = { $ui: UI };
 
+export * from './modals';
 export * from './UI';
 export * from './utils';
 export { default as UI } from './UI';
-export {
-    useModal,
-    createModal,
-    showModal,
-    closeModal,
-    modals,
-    ModalComponent,
-    ModalsPortal,
-    type GetModalProps,
-    type GetModalResponse,
-} from '@noeldemartin/vue-modals';
 
 export type UIServices = typeof services;
 

package/src/ui/modals.ts

@@ -0,0 +1,36 @@
+import { after } from '@noeldemartin/utils';
+import { injectModal, useModal as useModalBase } from '@noeldemartin/vue-modals';
+
+export {
+    createModal,
+    showModal,
+    injectModal,
+    closeModal,
+    modals,
+    ModalComponent,
+    ModalsPortal,
+    type GetModalProps,
+    type GetModalResponse,
+    type ModalController,
+} from '@noeldemartin/vue-modals';
+
+const instances = new WeakSet();
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useModal<T = never>() {
+    const instance = injectModal<T>();
+    const { close, remove, ...modal } = useModalBase<T>(instances.has(instance) ? {} : { removeOnClose: false });
+
+    instances.add(instance);
+
+    return {
+        ...modal,
+        async close(result?: T) {
+            close(result);
+
+            await after(1000);
+
+            remove();
+        },
+    };
+}

package/src/utils/index.ts

@@ -7,5 +7,6 @@ export * from './composition/persistent';
 export * from './composition/reactiveSet';
 export * from './composition/state';
 export * from './markdown';
+export * from './time';
 export * from './types';
 export * from './vue';

package/src/utils/time.ts

@@ -0,0 +1,2 @@
+export const MINUTE_MILLISECONDS = 60000;
+export const LOCAL_TIMEZONE_OFFSET = -new Date().getTimezoneOffset() * -MINUTE_MILLISECONDS;