@aerogel/core 0.0.0-next.b3caf219a503ce9b8c65ef1463132c9507f56c0a → 0.0.0-next.b656a964404fbde17d9cce7668722596098e47fd

package/src/components/ui/Modal.vue

@@ -1,9 +1,14 @@
 <template>
-    <HeadlessModal v-slot="{ close }" :persistent="persistent" v-bind="props">
+    <HeadlessModal
+        v-slot="{ close }"
+        v-bind="props"
+        ref="$modal"
+        :persistent
+    >
         <HeadlessModalOverlay class="fixed inset-0 bg-gray-500/75" />
 
         <HeadlessModalContent :class="renderedWrapperClass">
-            <div v-if="!persistent" class="absolute top-0 right-0 hidden pt-1.5 pr-1.5 sm:block">
+            <div v-if="!persistent && dismissable" class="absolute top-0 right-0 hidden pt-1.5 pr-1.5 sm:block">
                 <Button variant="ghost" size="icon" @click="close()">
                     <span class="sr-only">{{ $td('ui.close', 'Close') }}</span>
                     <IconClose class="size-3 text-gray-400" />
@@ -11,11 +16,11 @@
             </div>
 
             <HeadlessModalTitle v-if="title" class="text-base font-semibold text-gray-900">
-                <AGMarkdown :text="title" inline />
+                <Markdown :text="title" inline />
             </HeadlessModalTitle>
 
             <div :class="renderedContentClass">
-                <slot :close="close" />
+                <slot :close />
             </div>
         </HeadlessModalContent>
     </HeadlessModal>
@@ -24,27 +29,34 @@
 <script setup lang="ts">
 import IconClose from '~icons/zondicons/close';
 
-import { computed } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 import type { HTMLAttributes } from 'vue';
 
-import AGMarkdown from '@aerogel/core/components/lib/AGMarkdown.vue';
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Button from '@aerogel/core/components/ui/Button.vue';
 import HeadlessModal from '@aerogel/core/components/headless/HeadlessModal.vue';
 import HeadlessModalContent from '@aerogel/core/components/headless/HeadlessModalContent.vue';
 import HeadlessModalOverlay from '@aerogel/core/components/headless/HeadlessModalOverlay.vue';
 import HeadlessModalTitle from '@aerogel/core/components/headless/HeadlessModalTitle.vue';
-import { classes } from '@aerogel/core/components/utils';
-import type { ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
+import { classes } from '@aerogel/core/utils/classes';
+import type { ModalExpose, ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
 
 const {
     class: contentClass = '',
+    dismissable = true,
     wrapperClass = '',
     title,
     persistent,
     ...props
-} = defineProps<ModalProps & { wrapperClass?: HTMLAttributes['class']; class?: HTMLAttributes['class'] }>();
-
-defineSlots<ModalSlots>();
+} = defineProps<
+    ModalProps & {
+        dismissable?: boolean;
+        wrapperClass?: HTMLAttributes['class'];
+        class?: HTMLAttributes['class'];
+    }
+>();
 
+const $modal = useTemplateRef('$modal');
 const renderedContentClass = computed(() => classes({ 'mt-2': title }, contentClass));
 const renderedWrapperClass = computed(() =>
     classes(
@@ -52,4 +64,7 @@ const renderedWrapperClass = computed(() =>
         '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 px-4 pt-5 pb-4 text-left shadow-xl sm:max-w-lg',
         wrapperClass,
     ));
+
+defineSlots<ModalSlots>();
+defineExpose<ModalExpose>({ close: async () => $modal.value?.close() });
 </script>

package/src/components/ui/ProgressBar.vue

@@ -14,7 +14,7 @@
 <script setup lang="ts">
 import { computed, onUnmounted, ref, watch } from 'vue';
 
-import { classes } from '@aerogel/core/components/utils';
+import { classes } from '@aerogel/core/utils/classes';
 import type Job from '@aerogel/core/jobs/Job';
 
 const { filledClass, progress, job } = defineProps<{

package/src/components/ui/PromptModal.vue

@@ -1,12 +1,12 @@
 <template>
-    <Modal v-slot="{ close }" :title="title" persistent>
-        <Form :form="form" @submit="close(form.draft)">
-            <AGMarkdown :text="message" />
+    <Modal v-slot="{ close }" :title persistent>
+        <Form :form @submit="close(form.draft)">
+            <Markdown :text="message" />
             <Input
                 name="draft"
                 class="mt-2"
-                :placeholder="placeholder"
-                :label="label"
+                :placeholder
+                :label
             />
 
             <div class="mt-4 flex flex-row-reverse gap-2">
@@ -22,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import AGMarkdown from '@aerogel/core/components/lib/AGMarkdown.vue';
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
 import Button from '@aerogel/core/components/ui/Button.vue';
 import Form from '@aerogel/core/components/ui/Form.vue';
 import Input from '@aerogel/core/components/ui/Input.vue';

package/src/components/ui/Select.vue

@@ -0,0 +1,21 @@
+<template>
+    <HeadlessSelect v-bind="$props" @update:model-value="$emit('update:modelValue', $event)">
+        <SelectLabel />
+        <slot>
+            <SelectTrigger />
+            <SelectOptions />
+        </slot>
+    </HeadlessSelect>
+</template>
+
+<script setup lang="ts">
+import HeadlessSelect from '@aerogel/core/components/headless/HeadlessSelect.vue';
+import type { SelectEmits, SelectProps } from '@aerogel/core/components/contracts/Select';
+
+import SelectLabel from './SelectLabel.vue';
+import SelectOptions from './SelectOptions.vue';
+import SelectTrigger from './SelectTrigger.vue';
+
+defineProps<SelectProps>();
+defineEmits<SelectEmits>();
+</script>

package/src/components/ui/SelectLabel.vue

@@ -0,0 +1,10 @@
+<template>
+    <HeadlessSelectLabel v-if="$slots.default" class="block text-sm leading-6 font-medium text-gray-900">
+        <slot />
+    </HeadlessSelectLabel>
+    <HeadlessSelectLabel v-else class="block text-sm leading-6 font-medium text-gray-900" />
+</template>
+
+<script setup lang="ts">
+import HeadlessSelectLabel from '@aerogel/core/components/headless/HeadlessSelectLabel.vue';
+</script>

package/src/components/ui/SelectOptions.vue

@@ -0,0 +1,31 @@
+<template>
+    <HeadlessSelectOptions
+        class="z-50 overflow-auto rounded-lg bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden"
+    >
+        <slot>
+            <HeadlessSelectOption
+                v-for="option of select?.options ?? []"
+                :key="option.key"
+                :value="option.value"
+                class="group p-1 outline-none"
+            >
+                <div
+                    class="relative flex max-w-[calc(100vw-2rem)] cursor-pointer items-center truncate rounded-md px-2 py-1 select-none *:truncate group-data-[highlighted]:bg-gray-100 group-data-[state=checked]:font-semibold group-data-[state=unchecked]:opacity-50"
+                >
+                    <span class="text-sm">
+                        {{ option.label }}
+                    </span>
+                </div>
+            </HeadlessSelectOption>
+        </slot>
+    </HeadlessSelectOptions>
+</template>
+
+<script setup lang="ts">
+import HeadlessSelectOption from '@aerogel/core/components/headless/HeadlessSelectOption.vue';
+import HeadlessSelectOptions from '@aerogel/core/components/headless/HeadlessSelectOptions.vue';
+import { injectReactiveOrFail } from '@aerogel/core/utils';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+const select = injectReactiveOrFail<SelectExpose>('select', '<SelectOptions> must be a child of a <Select>');
+</script>

package/src/components/ui/SelectTrigger.vue

@@ -0,0 +1,29 @@
+<template>
+    <HeadlessSelectTrigger :class="renderedClasses">
+        <HeadlessSelectValue class="col-start-1 row-start-1 truncate pr-2" />
+        <IconCheveronDown class="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-500 sm:size-4" />
+    </HeadlessSelectTrigger>
+</template>
+
+<script setup lang="ts">
+import IconCheveronDown from '~icons/zondicons/cheveron-down';
+
+import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import HeadlessSelectTrigger from '@aerogel/core/components/headless/HeadlessSelectTrigger.vue';
+import HeadlessSelectValue from '@aerogel/core/components/headless/HeadlessSelectValue.vue';
+import { injectReactiveOrFail } from '@aerogel/core/utils';
+import { classes } from '@aerogel/core/utils/classes';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+const { class: rootClasses } = defineProps<{ class?: HTMLAttributes['class'] }>();
+const select = injectReactiveOrFail<SelectExpose>('select', '<SelectTrigger> must be a child of a <Select>');
+const renderedClasses = computed(() =>
+    classes(
+        // eslint-disable-next-line vue/max-len
+        'focus:outline-primary grid w-full cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 sm:text-sm/6',
+        { 'mt-1': select.label },
+        rootClasses,
+    ));
+</script>

package/src/components/ui/SettingsModal.vue

@@ -0,0 +1,15 @@
+<template>
+    <Modal :title="$td('settings.title', 'Settings')">
+        <component :is="setting.component" v-for="(setting, key) in settings" :key />
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import { arraySorted } from '@noeldemartin/utils';
+import { computed } from 'vue';
+
+import App from '@aerogel/core/services/App';
+import Modal from '@aerogel/core/components/ui/Modal.vue';
+
+const settings = computed(() => arraySorted(App.settings, 'priority', 'desc'));
+</script>

package/src/components/{lib/AGStartupCrash.vue → ui/StartupCrash.vue}

@@ -4,7 +4,7 @@
             <h1 class="mt-2 text-center text-4xl font-medium text-red-600">
                 {{ $td('startupCrash.title', 'Something went wrong!') }}
             </h1>
-            <AGMarkdown
+            <Markdown
                 :text="
                     $td(
                         'startupCrash.message',
@@ -26,6 +26,6 @@
 </template>
 
 <script setup lang="ts">
-import AGMarkdown from './AGMarkdown.vue';
-import Button from '../ui/Button.vue';
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Button from '@aerogel/core/components/ui/Button.vue';
 </script>

package/src/components/ui/Toast.vue

@@ -0,0 +1,42 @@
+<template>
+    <HeadlessToast :class="renderedClasses">
+        <Markdown v-if="message" :text="message" inline />
+
+        <Button
+            v-for="(action, key) of actions"
+            :key
+            :action
+            :variant
+            :as="HeadlessToastAction"
+        />
+    </HeadlessToast>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import Button from '@aerogel/core/components/ui/Button.vue';
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import HeadlessToast from '@aerogel/core/components/headless/HeadlessToast.vue';
+import HeadlessToastAction from '@aerogel/core/components/headless/HeadlessToastAction.vue';
+import { computedVariantClasses } from '@aerogel/core/utils/classes';
+import type { ToastProps } from '@aerogel/core/components/contracts/Toast';
+import type { Variants } from '@aerogel/core/utils/classes';
+
+const { class: baseClasses, variant = 'secondary' } = defineProps<ToastProps & { class?: HTMLAttributes['class'] }>();
+const renderedClasses = computedVariantClasses<Variants<Pick<ToastProps, 'variant'>>>(
+    { baseClasses, variant },
+    {
+        baseClasses: 'flex items-center gap-2 rounded-md p-2 ring-1 shadow-lg border-gray-200',
+        variants: {
+            variant: {
+                secondary: 'bg-gray-900 text-white ring-black',
+                danger: 'bg-red-50 text-red-900 ring-red-100',
+            },
+        },
+        defaultVariants: {
+            variant: 'secondary',
+        },
+    },
+);
+</script>

package/src/components/ui/index.ts

@@ -1,7 +1,11 @@
+export { default as AdvancedOptions } from './AdvancedOptions.vue';
 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 DropdownMenu } from './DropdownMenu.vue';
+export { default as EditableContent } from './EditableContent.vue';
+export { default as ErrorMessage } from './ErrorMessage.vue';
 export { default as ErrorReportModal } from './ErrorReportModal.vue';
 export { default as ErrorReportModalButtons } from './ErrorReportModalButtons.vue';
 export { default as ErrorReportModalTitle } from './ErrorReportModalTitle.vue';
@@ -9,7 +13,15 @@ export { default as Form } from './Form.vue';
 export { default as Input } from './Input.vue';
 export { default as Link } from './Link.vue';
 export { default as LoadingModal } from './LoadingModal.vue';
+export { default as Markdown } from './Markdown.vue';
 export { default as Modal } from './Modal.vue';
 export { default as ModalContext } from './ModalContext.vue';
 export { default as ProgressBar } from './ProgressBar.vue';
 export { default as PromptModal } from './PromptModal.vue';
+export { default as Select } from './Select.vue';
+export { default as SelectLabel } from './SelectLabel.vue';
+export { default as SelectOptions } from './SelectOptions.vue';
+export { default as SelectTrigger } from './SelectTrigger.vue';
+export { default as SettingsModal } from './SettingsModal.vue';
+export { default as StartupCrash } from './StartupCrash.vue';
+export { default as Toast } from './Toast.vue';

package/src/errors/Errors.ts

@@ -4,7 +4,6 @@ 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 { Colors } from '@aerogel/core/components/constants';
 import { Events } from '@aerogel/core/services';
 import type { ErrorReportModalProps } from '@aerogel/core/components/contracts/ErrorReportModal';
 import type { ModalComponent } from '@aerogel/core/ui/UI.state';
@@ -71,16 +70,16 @@ 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: () =>
+                        click: () =>
                             UI.openModal<ModalComponent<ErrorReportModalProps>>(
                                 UI.requireComponent(UIComponents.ErrorReportModal),
                                 { reports: [report] },

package/src/index.css

@@ -1,4 +1,11 @@
+@import 'tailwindcss';
+
 @source './';
+@source '../../plugin-local-first/src';
+@source '../../plugin-solid/src';
+
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
 
 @theme {
     --color-background: oklch(1 0 0);
@@ -6,3 +13,34 @@
     --color-danger: oklch(0.577 0.245 27.325);
     --color-accent: oklch(0.97 0 0);
 }
+
+.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';
 
@@ -16,6 +18,7 @@ export default definePlugin({
     async install(app) {
         app.config.globalProperties.$t ??= translate;
         app.config.globalProperties.$td = translateWithDefault;
+        App.settings.push(...settings);
 
         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="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

@@ -8,6 +8,9 @@ import type { 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;

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());
+        App.settings.push(...(options.settings ?? []));
 
         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

@@ -24,7 +24,7 @@ export interface ModalComponent<
     Result = unknown,
 > {}
 
-export interface Snackbar {
+export interface UIToast {
     id: string;
     component: Component;
     properties: Record<string, unknown>;
@@ -34,7 +34,7 @@ export default defineServiceState({
     name: 'ui',
     initialState: {
         modals: [] as UIModal[],
-        snackbars: [] as Snackbar[],
+        toasts: [] as UIToast[],
         layout: getCurrentLayout(),
     },
     computed: {

package/src/ui/UI.ts

@@ -11,11 +11,11 @@ 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 { SnackbarAction, SnackbarColor } from '@aerogel/core/components/headless/snackbars';
+import type { ToastAction, ToastVariant } from '@aerogel/core/components/contracts/Toast';
 
 import Service from './UI.state';
 import { MOBILE_BREAKPOINT, getCurrentLayout } from './utils';
-import type { ModalComponent, Snackbar, UIModal } from './UI.state';
+import type { ModalComponent, UIModal, UIToast } from './UI.state';
 
 interface ModalCallbacks<T = unknown> {
     willClose(result: T | undefined): void;
@@ -32,7 +32,7 @@ export const UIComponents = {
     ErrorReportModal: 'error-report-modal',
     LoadingModal: 'loading-modal',
     PromptModal: 'prompt-modal',
-    Snackbar: 'snackbar',
+    Toast: 'toast',
     StartupCrash: 'startup-crash',
 } as const;
 
@@ -69,10 +69,10 @@ export type PromptOptions = AcceptRefs<{
     trim?: boolean;
 }>;
 
-export interface ShowSnackbarOptions {
+export interface ToastOptions {
     component?: Component;
-    color?: SnackbarColor;
-    actions?: SnackbarAction[];
+    variant?: ToastVariant;
+    actions?: ToastAction[];
 }
 
 export class UIService extends Service {
@@ -246,23 +246,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 {

package/src/ui/index.ts

@@ -1,12 +1,12 @@
 import type { Component } from 'vue';
 
-import AGSnackbar from '@aerogel/core/components/snackbars/AGSnackbar.vue';
-import AGStartupCrash from '@aerogel/core/components/lib/AGStartupCrash.vue';
 import AlertModal from '@aerogel/core/components/ui/AlertModal.vue';
 import ConfirmModal from '@aerogel/core/components/ui/ConfirmModal.vue';
 import ErrorReportModal from '@aerogel/core/components/ui/ErrorReportModal.vue';
 import LoadingModal from '@aerogel/core/components/ui/LoadingModal.vue';
 import PromptModal from '@aerogel/core/components/ui/PromptModal.vue';
+import StartupCrash from '@aerogel/core/components/ui/StartupCrash.vue';
+import Toast from '@aerogel/core/components/ui/Toast.vue';
 import { bootServices } from '@aerogel/core/services';
 import { definePlugin } from '@aerogel/core/plugins';
 
@@ -29,8 +29,8 @@ export default definePlugin({
             [UIComponents.ErrorReportModal]: ErrorReportModal,
             [UIComponents.LoadingModal]: LoadingModal,
             [UIComponents.PromptModal]: PromptModal,
-            [UIComponents.Snackbar]: AGSnackbar,
-            [UIComponents.StartupCrash]: AGStartupCrash,
+            [UIComponents.Toast]: Toast,
+            [UIComponents.StartupCrash]: StartupCrash,
         };
 
         Object.entries({