@aerogel/core 0.0.0-next.9a1c5ba39a454b316eba36ec7bdf579fed3d95d2 → 0.0.0-next.9e0c0bbdcff5db68a1087ef53cbdc0f53299f6bb

package/src/errors/Errors.ts

@@ -4,13 +4,12 @@ import App from '@aerogel/core/services/App';
 import ServiceBootError from '@aerogel/core/errors/ServiceBootError';
 import UI, { UIComponents } from '@aerogel/core/ui/UI';
 import { translateWithDefault } from '@aerogel/core/lang/utils';
+import { Events } from '@aerogel/core/services';
+import type { ErrorReportModalProps } from '@aerogel/core/components/contracts/ErrorReportModal';
+import type { ModalComponent } from '@aerogel/core/ui/UI.state';
 
 import Service from './Errors.state';
-import { Colors } from '@aerogel/core/components/constants';
-import { Events } from '@aerogel/core/services';
-import type { AGErrorReportModalProps } from '@aerogel/core/components/modals/AGErrorReportModal';
 import type { ErrorReport, ErrorReportLog, ErrorSource } from './Errors.state';
-import type { ModalComponent } from '@aerogel/core/ui/UI.state';
 
 export class ErrorsService extends Service {
 
@@ -34,7 +33,7 @@ export class ErrorsService extends Service {
             return;
         }
 
-        UI.openModal<ModalComponent<AGErrorReportModalProps>>(UI.requireComponent(UIComponents.ErrorReportModal), {
+        UI.openModal<ModalComponent<ErrorReportModalProps>>(UI.requireComponent(UIComponents.ErrorReportModal), {
             reports,
         });
     }
@@ -71,17 +70,17 @@ export class ErrorsService extends Service {
             date: new Date(),
         };
 
-        UI.showSnackbar(
+        UI.toast(
             message ??
                 translateWithDefault('errors.notice', 'Something went wrong, but it\'s not your fault. Try again!'),
             {
-                color: Colors.Danger,
+                variant: 'danger',
                 actions: [
                     {
-                        text: translateWithDefault('errors.viewDetails', 'View details'),
+                        label: translateWithDefault('errors.viewDetails', 'View details'),
                         dismiss: true,
-                        handler: () =>
-                            UI.openModal<ModalComponent<AGErrorReportModalProps>>(
+                        click: () =>
+                            UI.openModal<ModalComponent<ErrorReportModalProps>>(
                                 UI.requireComponent(UIComponents.ErrorReportModal),
                                 { reports: [report] },
                             ),

package/src/forms/{Form.test.ts → FormController.test.ts}

@@ -3,9 +3,9 @@ import { describe, expect, expectTypeOf, it } from 'vitest';
 import { useForm } from '@aerogel/core/forms/composition';
 import { numberInput, requiredStringInput } from '@aerogel/core/forms/utils';
 
-import { FormFieldTypes } from './Form';
+import { FormFieldTypes } from './FormController';
 
-describe('Form', () => {
+describe('FormController', () => {
 
     it('defines magic fields', () => {
         const form = useForm({

package/src/forms/{Form.ts → FormController.ts}

@@ -47,12 +47,12 @@ export type GetFormFieldValue<TType> = TType extends typeof FormFieldTypes.Strin
             ? Date
             : never;
 
-const validForms: WeakMap<Form, ComputedRef<boolean>> = new WeakMap();
+const validForms: WeakMap<FormController, ComputedRef<boolean>> = new WeakMap();
 
 export type SubmitFormListener = () => unknown;
 export type FocusFormListener = (input: string) => unknown;
 
-export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinitions> extends MagicObject {
+export default class FormController<Fields extends FormFieldDefinitions = FormFieldDefinitions> extends MagicObject {
 
     public errors: DeepReadonly<UnwrapNestedRefs<FormErrors<Fields>>>;
 
@@ -207,10 +207,10 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
             return {} as FormData<Fields>;
         }
 
-        const data = Object.entries(fields).reduce((formData, [name, definition]) => {
-            formData[name as keyof Fields] = (definition.default ?? null) as FormData<Fields>[keyof Fields];
+        const data = Object.entries(fields).reduce((initialData, [name, definition]) => {
+            initialData[name as keyof Fields] = (definition.default ?? null) as FormData<Fields>[keyof Fields];
 
-            return formData;
+            return initialData;
         }, {} as FormData<Fields>);
 
         return reactive(data) as FormData<Fields>;

package/src/forms/composition.ts

@@ -1,6 +1,6 @@
-import Form from '@aerogel/core/forms/Form';
-import type { FormData, FormFieldDefinitions } from '@aerogel/core/forms/Form';
+import FormController from '@aerogel/core/forms/FormController';
+import type { FormData, FormFieldDefinitions } from '@aerogel/core/forms/FormController';
 
-export function useForm<const T extends FormFieldDefinitions>(fields: T): Form<T> & FormData<T> {
-    return new Form(fields) as Form<T> & FormData<T>;
+export function useForm<const T extends FormFieldDefinitions>(fields: T): FormController<T> & FormData<T> {
+    return new FormController(fields) as FormController<T> & FormData<T>;
 }

package/src/forms/index.ts

@@ -1,5 +1,5 @@
 export * from './composition';
-export * from './Form';
+export * from './FormController';
 export * from './utils';
 export * from './validation';
-export { default as Form } from './Form';
+export { default as FormController } from './FormController';

package/src/forms/utils.ts

@@ -1,5 +1,5 @@
-import { FormFieldTypes } from './Form';
-import type { FormFieldDefinition } from './Form';
+import { FormFieldTypes } from './FormController';
+import type { FormFieldDefinition } from './FormController';
 
 export function booleanInput(
     defaultValue?: boolean,

package/src/index.css

@@ -0,0 +1,54 @@
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+
+@source './';
+
+@theme {
+    --color-background: oklch(1 0 0);
+
+    --color-primary: oklch(0.205 0 0);
+    --color-primary-50: color-mix(in_oklab, var(--color-primary-600) 5%, transparent);
+    --color-primary-100: color-mix(in_oklab, var(--color-primary-600) 15%, transparent);
+    --color-primary-200: color-mix(in_oklab, var(--color-primary-600) 30%, transparent);
+    --color-primary-300: color-mix(in_oklab, var(--color-primary-600) 50%, transparent);
+    --color-primary-400: color-mix(in_oklab, var(--color-primary-600) 65%, transparent);
+    --color-primary-500: color-mix(in_oklab, var(--color-primary-600) 80%, transparent);
+    --color-primary-600: var(--color-primary);
+    --color-primary-700: color-mix(in_oklab, var(--color-primary-600) 90%, black);
+    --color-primary-800: color-mix(in_oklab, var(--color-primary-600) 80%, black);
+    --color-primary-900: color-mix(in_oklab, var(--color-primary-600) 70%, black);
+    --color-primary-950: color-mix(in_oklab, var(--color-primary-600) 50%, black);
+}
+
+.clickable {
+    position: relative;
+}
+
+.clickable::after {
+    --clickable-size: 44px;
+    --clickable-inset-by: min(0px, calc((100% - var(--clickable-size)) / 2));
+
+    content: '';
+    position: absolute;
+    top: var(--clickable-inset-by);
+    left: var(--clickable-inset-by);
+    right: var(--clickable-inset-by);
+    bottom: var(--clickable-inset-by);
+}
+
+input[type='number'].appearance-textfield {
+    appearance: textfield;
+}
+
+input[type='number'].appearance-textfield::-webkit-outer-spin-button,
+input[type='number'].appearance-textfield::-webkit-inner-spin-button {
+    appearance: none;
+}
+
+button[data-markdown-action] {
+    color: var(--tw-prose-links);
+    text-decoration: underline;
+    font-weight: 500;
+}

package/src/lang/index.ts

@@ -1,7 +1,9 @@
+import App from '@aerogel/core/services/App';
 import { bootServices } from '@aerogel/core/services';
 import { definePlugin } from '@aerogel/core/plugins';
 
 import Lang from './Lang';
+import settings from './settings';
 import type { LangProvider } from './Lang';
 import { translate, translateWithDefault } from './utils';
 
@@ -17,6 +19,8 @@ export default definePlugin({
         app.config.globalProperties.$t ??= translate;
         app.config.globalProperties.$td = translateWithDefault;
 
+        settings.forEach((setting) => App.addSetting(setting));
+
         await bootServices(app, services);
     },
 });

package/src/lang/settings/Language.vue

@@ -0,0 +1,48 @@
+<template>
+    <Select
+        v-model="$lang.locale"
+        class="flex flex-col items-start md:flex-row"
+        as="div"
+        :options
+        :render-option="renderLocale"
+    >
+        <div class="grow">
+            <SelectLabel>
+                {{ $td('settings.locale', 'Language') }}
+            </SelectLabel>
+            <Markdown
+                lang-key="settings.localeDescription"
+                lang-default="Choose the application's language."
+                class="mt-1 text-sm text-gray-500"
+            />
+        </div>
+        <Button variant="ghost" :as="SelectTrigger" class="grid w-auto outline-none" />
+        <SelectOptions />
+    </Select>
+</template>
+
+<script setup lang="ts">
+import Aerogel from 'virtual:aerogel';
+
+import { computed } from 'vue';
+
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Button from '@aerogel/core/components/ui/Button.vue';
+import Select from '@aerogel/core/components/ui/Select.vue';
+import SelectLabel from '@aerogel/core/components/ui/SelectLabel.vue';
+import SelectTrigger from '@aerogel/core/components/ui/SelectTrigger.vue';
+import SelectOptions from '@aerogel/core/components/ui/SelectOptions.vue';
+import { Lang, translateWithDefault } from '@aerogel/core/lang';
+
+const browserLocale = Lang.getBrowserLocale();
+const options = computed(() => [null, ...Lang.locales]);
+
+function renderLocale(locale: string | null): string {
+    return (
+        (locale && Aerogel.locales[locale]) ??
+        translateWithDefault('settings.localeDefault', '{locale} (default)', {
+            locale: Aerogel.locales[browserLocale] ?? browserLocale,
+        })
+    );
+}
+</script>

package/src/lang/settings/index.ts

@@ -0,0 +1,10 @@
+import { defineSettings } from '@aerogel/core/services';
+
+import Language from './Language.vue';
+
+export default defineSettings([
+    {
+        priority: 100,
+        component: Language,
+    },
+]);

package/src/services/App.state.ts

@@ -1,11 +1,20 @@
 import Aerogel from 'virtual:aerogel';
 
 import { getEnv } from '@noeldemartin/utils';
-import type { App } from 'vue';
+import type { App, Component } from 'vue';
 
 import { defineServiceState } from '@aerogel/core/services/Service';
 import type { Plugin } from '@aerogel/core/plugins/Plugin';
 
+export interface AppSetting {
+    component: Component;
+    priority: number;
+}
+
+export function defineSettings<T extends AppSetting[]>(settings: T): T {
+    return settings;
+}
+
 export default defineServiceState({
     name: 'app',
     initialState: {
@@ -14,6 +23,7 @@ export default defineServiceState({
         environment: getEnv() ?? 'development',
         version: Aerogel.version,
         sourceUrl: Aerogel.sourceUrl,
+        settings: [] as AppSetting[],
     },
     computed: {
         development: (state) => state.environment === 'development',

package/src/services/App.ts

@@ -1,13 +1,17 @@
 import Aerogel from 'virtual:aerogel';
 
 import { PromisedValue, facade, forever, updateLocationQueryParameters } from '@noeldemartin/utils';
+import { markRaw } from 'vue';
 
 import Events from '@aerogel/core/services/Events';
 import type { Plugin } from '@aerogel/core/plugins';
-import type { Services } from '@aerogel/core/services';
+import type { AppSetting, Services } from '@aerogel/core/services';
 
 import Service from './App.state';
 
+export { defineSettings } from './App.state';
+export type { AppSetting } from './App.state';
+
 export class AppService extends Service {
 
     public readonly name = Aerogel.name;
@@ -22,6 +26,10 @@ export class AppService extends Service {
         return this.mounted.isResolved();
     }
 
+    public addSetting(setting: AppSetting): void {
+        this.settings.push(markRaw(setting));
+    }
+
     public async whenReady<T>(callback: () => T): Promise<T> {
         const result = await this.ready.then(callback);
 

package/src/services/index.ts

@@ -9,6 +9,7 @@ import Events from './Events';
 import Service from './Service';
 import Storage from './Storage';
 import { getPiniaStore } from './store';
+import type { AppSetting } from './App.state';
 
 export * from './App';
 export * from './Cache';
@@ -53,6 +54,7 @@ export default definePlugin({
         };
 
         app.use(getPiniaStore());
+        options.settings?.forEach((setting) => App.addSetting(setting));
 
         await bootServices(app, services);
     },
@@ -61,6 +63,7 @@ export default definePlugin({
 declare module '@aerogel/core/bootstrap/options' {
     export interface AerogelOptions {
         services?: Record<string, Service>;
+        settings?: AppSetting[];
     }
 }
 

package/src/ui/UI.state.ts

@@ -4,7 +4,7 @@ import { defineServiceState } from '@aerogel/core/services/Service';
 
 import { Layouts, getCurrentLayout } from './utils';
 
-export interface Modal<T = unknown> {
+export interface UIModal<T = unknown> {
     id: string;
     properties: Record<string, unknown>;
     component: Component;
@@ -12,14 +12,19 @@ export interface Modal<T = unknown> {
     afterClose: Promise<T | undefined>;
 }
 
+export interface UIModalContext {
+    modal: UIModal;
+    childIndex?: number;
+}
+
 export interface ModalComponent<
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    Properties extends Record<string, unknown> = Record<string, unknown>,
+    Properties extends object = object,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Result = unknown,
 > {}
 
-export interface Snackbar {
+export interface UIToast {
     id: string;
     component: Component;
     properties: Record<string, unknown>;
@@ -28,8 +33,8 @@ export interface Snackbar {
 export default defineServiceState({
     name: 'ui',
     initialState: {
-        modals: [] as Modal[],
-        snackbars: [] as Snackbar[],
+        modals: [] as UIModal[],
+        toasts: [] as UIToast[],
         layout: getCurrentLayout(),
     },
     computed: {

package/src/ui/UI.ts

@@ -6,18 +6,16 @@ import type { ObjectValues } from '@noeldemartin/utils';
 import App from '@aerogel/core/services/App';
 import Events from '@aerogel/core/services/Events';
 import type { AcceptRefs } from '@aerogel/core/utils';
-import type { Color } from '@aerogel/core/components/constants';
-import type { SnackbarAction, SnackbarColor } from '@aerogel/core/components/headless/snackbars';
-import type {
-    AGAlertModalProps,
-    AGConfirmModalProps,
-    AGLoadingModalProps,
-    AGPromptModalProps,
-} from '@aerogel/core/components';
+import type { AlertModalProps } from '@aerogel/core/components/contracts/AlertModal';
+import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
+import type { ConfirmModalCheckboxes, ConfirmModalProps } from '@aerogel/core/components/contracts/ConfirmModal';
+import type { LoadingModalProps } from '@aerogel/core/components/contracts/LoadingModal';
+import type { PromptModalProps } from '@aerogel/core/components/contracts/PromptModal';
+import type { ToastAction, ToastVariant } from '@aerogel/core/components/contracts/Toast';
 
 import Service from './UI.state';
 import { MOBILE_BREAKPOINT, getCurrentLayout } from './utils';
-import type { Modal, ModalComponent, Snackbar } from './UI.state';
+import type { ModalComponent, UIModal, UIToast } from './UI.state';
 
 interface ModalCallbacks<T = unknown> {
     willClose(result: T | undefined): void;
@@ -34,19 +32,18 @@ export const UIComponents = {
     ErrorReportModal: 'error-report-modal',
     LoadingModal: 'loading-modal',
     PromptModal: 'prompt-modal',
-    Snackbar: 'snackbar',
+    Toast: 'toast',
     StartupCrash: 'startup-crash',
+    RouterLink: 'router-link',
 } as const;
 
 export type UIComponent = ObjectValues<typeof UIComponents>;
 
-export type ConfirmCheckboxes = Record<string, { label: string; default?: boolean; required?: boolean }>;
-
 export type ConfirmOptions = AcceptRefs<{
     acceptText?: string;
-    acceptColor?: Color;
+    acceptVariant?: ButtonVariant;
     cancelText?: string;
-    cancelColor?: Color;
+    cancelVariant?: ButtonVariant;
     actions?: Record<string, () => unknown>;
     required?: boolean;
 }>;
@@ -57,7 +54,8 @@ export type LoadingOptions = AcceptRefs<{
     progress?: number;
 }>;
 
-export interface ConfirmOptionsWithCheckboxes<T extends ConfirmCheckboxes = ConfirmCheckboxes> extends ConfirmOptions {
+export interface ConfirmOptionsWithCheckboxes<T extends ConfirmModalCheckboxes = ConfirmModalCheckboxes>
+    extends ConfirmOptions {
     checkboxes?: T;
 }
 
@@ -66,16 +64,16 @@ export type PromptOptions = AcceptRefs<{
     defaultValue?: string;
     placeholder?: string;
     acceptText?: string;
-    acceptColor?: Color;
+    acceptVariant?: ButtonVariant;
     cancelText?: string;
-    cancelColor?: Color;
+    cancelVariant?: ButtonVariant;
     trim?: boolean;
 }>;
 
-export interface ShowSnackbarOptions {
+export interface ToastOptions {
     component?: Component;
-    color?: SnackbarColor;
-    actions?: SnackbarAction[];
+    variant?: ToastVariant;
+    actions?: ToastAction[];
 }
 
 export class UIService extends Service {
@@ -83,14 +81,18 @@ export class UIService extends Service {
     private modalCallbacks: Record<string, Partial<ModalCallbacks>> = {};
     private components: Partial<Record<UIComponent, Component>> = {};
 
+    public resolveComponent(name: UIComponent): Component | null {
+        return this.components[name] ?? null;
+    }
+
     public requireComponent(name: UIComponent): Component {
-        return this.components[name] ?? fail(`UI Component '${name}' is not defined!`);
+        return this.resolveComponent(name) ?? fail(`UI Component '${name}' is not defined!`);
     }
 
     public alert(message: string): void;
     public alert(title: string, message: string): void;
     public alert(messageOrTitle: string, message?: string): void {
-        const getProperties = (): AGAlertModalProps => {
+        const getProperties = (): AlertModalProps => {
             if (typeof message !== 'string') {
                 return { message: messageOrTitle };
             }
@@ -101,14 +103,17 @@ export class UIService extends Service {
             };
         };
 
-        this.openModal(this.requireComponent(UIComponents.AlertModal), getProperties());
+        this.openModal<ModalComponent<AlertModalProps>>(
+            this.requireComponent(UIComponents.AlertModal),
+            getProperties(),
+        );
     }
 
     /* eslint-disable max-len */
     public async confirm(message: string, options?: ConfirmOptions): Promise<boolean>;
     public async confirm(title: string, message: string, options?: ConfirmOptions): Promise<boolean>;
-    public async confirm<T extends ConfirmCheckboxes>(message: string, options?: ConfirmOptionsWithCheckboxes<T>): Promise<[boolean, Record<keyof T, boolean>]>; // prettier-ignore
-    public async confirm<T extends ConfirmCheckboxes>(title: string, message: string, options?: ConfirmOptionsWithCheckboxes<T>): Promise<[boolean, Record<keyof T, boolean>]>; // prettier-ignore
+    public async confirm<T extends ConfirmModalCheckboxes>(message: string, options?: ConfirmOptionsWithCheckboxes<T>): Promise<[boolean, Record<keyof T, boolean>]>; // prettier-ignore
+    public async confirm<T extends ConfirmModalCheckboxes>(title: string, message: string, options?: ConfirmOptionsWithCheckboxes<T>): Promise<[boolean, Record<keyof T, boolean>]>; // prettier-ignore
     /* eslint-enable max-len */
 
     public async confirm(
@@ -116,7 +121,7 @@ export class UIService extends Service {
         messageOrOptions?: string | ConfirmOptions | ConfirmOptionsWithCheckboxes,
         options?: ConfirmOptions | ConfirmOptionsWithCheckboxes,
     ): Promise<boolean | [boolean, Record<string, boolean>]> {
-        const getProperties = (): AGConfirmModalProps => {
+        const getProperties = (): AcceptRefs<ConfirmModalProps> => {
             if (typeof messageOrOptions !== 'string') {
                 return {
                     ...(messageOrOptions ?? {}),
@@ -132,10 +137,17 @@ export class UIService extends Service {
                 required: !!options?.required,
             };
         };
+
+        type ConfirmModalComponent = ModalComponent<
+            AcceptRefs<ConfirmModalProps>,
+            boolean | [boolean, Record<string, boolean>]
+        >;
+
         const properties = getProperties();
-        const modal = await this.openModal<
-            ModalComponent<AGConfirmModalProps, boolean | [boolean, Record<string, boolean>]>
-        >(this.requireComponent(UIComponents.ConfirmModal), properties);
+        const modal = await this.openModal<ConfirmModalComponent>(
+            this.requireComponent(UIComponents.ConfirmModal),
+            properties,
+        );
         const result = await modal.beforeClose;
 
         const confirmed = typeof result === 'object' ? result[0] : (result ?? false);
@@ -174,22 +186,22 @@ export class UIService extends Service {
         options?: PromptOptions,
     ): Promise<string | null> {
         const trim = options?.trim ?? true;
-        const getProperties = (): AGPromptModalProps => {
+        const getProperties = (): PromptModalProps => {
             if (typeof messageOrOptions !== 'string') {
                 return {
                     message: messageOrTitle,
                     ...(messageOrOptions ?? {}),
-                } as AGPromptModalProps;
+                } as PromptModalProps;
             }
 
             return {
                 title: messageOrTitle,
                 message: messageOrOptions,
                 ...(options ?? {}),
-            } as AGPromptModalProps;
+            } as PromptModalProps;
         };
 
-        const modal = await this.openModal<ModalComponent<AGPromptModalProps, string | null>>(
+        const modal = await this.openModal<ModalComponent<PromptModalProps, string | null>>(
             this.requireComponent(UIComponents.PromptModal),
             getProperties(),
         );
@@ -207,7 +219,7 @@ export class UIService extends Service {
         operation?: Promise<T> | (() => T),
     ): Promise<T> {
         const processOperation = (o: Promise<T> | (() => T)) => (typeof o === 'function' ? Promise.resolve(o()) : o);
-        const processArgs = (): { operationPromise: Promise<T>; props?: AGLoadingModalProps } => {
+        const processArgs = (): { operationPromise: Promise<T>; props?: AcceptRefs<LoadingModalProps> } => {
             if (typeof operationOrMessageOrOptions === 'string') {
                 return {
                     props: { message: operationOrMessageOrOptions },
@@ -229,7 +241,9 @@ export class UIService extends Service {
         const modal = await this.openModal(this.requireComponent(UIComponents.LoadingModal), props);
 
         try {
-            const [result] = await Promise.all([operationPromise, after({ seconds: 1 })]);
+            const result = await operationPromise;
+
+            await after({ ms: 500 });
 
             return result;
         } finally {
@@ -237,23 +251,15 @@ export class UIService extends Service {
         }
     }
 
-    public showSnackbar(message: string, options: ShowSnackbarOptions = {}): void {
-        const snackbar: Snackbar = {
+    public toast(message: string, options: ToastOptions = {}): void {
+        const { component, ...otherOptions } = options;
+        const toast: UIToast = {
             id: uuid(),
-            properties: { message, ...options },
-            component: markRaw(options.component ?? this.requireComponent(UIComponents.Snackbar)),
+            properties: { message, ...otherOptions },
+            component: markRaw(component ?? this.requireComponent(UIComponents.Toast)),
         };
 
-        this.setState('snackbars', this.snackbars.concat(snackbar));
-
-        setTimeout(() => this.hideSnackbar(snackbar.id), 5000);
-    }
-
-    public hideSnackbar(id: string): void {
-        this.setState(
-            'snackbars',
-            this.snackbars.filter((snackbar) => snackbar.id !== id),
-        );
+        this.setState('toasts', this.toasts.concat(toast));
     }
 
     public registerComponent(name: UIComponent, component: Component): void {
@@ -263,10 +269,10 @@ export class UIService extends Service {
     public async openModal<TModalComponent extends ModalComponent>(
         component: TModalComponent,
         properties?: ModalProperties<TModalComponent>,
-    ): Promise<Modal<ModalResult<TModalComponent>>> {
+    ): Promise<UIModal<ModalResult<TModalComponent>>> {
         const id = uuid();
         const callbacks: Partial<ModalCallbacks<ModalResult<TModalComponent>>> = {};
-        const modal: Modal<ModalResult<TModalComponent>> = {
+        const modal: UIModal<ModalResult<TModalComponent>> = {
             id,
             properties: properties ?? {},
             component: markRaw(component),
@@ -382,8 +388,8 @@ declare module '@aerogel/core/services/Events' {
         'close-modal': { id: string; result?: unknown };
         'hide-modal': { id: string };
         'hide-overlays-backdrop': void;
-        'modal-closed': { modal: Modal; result?: unknown };
-        'modal-will-close': { modal: Modal; result?: unknown };
+        'modal-closed': { modal: UIModal; result?: unknown };
+        'modal-will-close': { modal: UIModal; result?: unknown };
         'show-modal': { id: string };
         'show-overlays-backdrop': void;
     }