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

package/src/components/modals/AGAlertModal.ts

@@ -1,14 +1,17 @@
 import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
+import type { ObjectWithout, Pretty } from '@noeldemartin/utils';
 
-import { requiredStringProp, stringProp } from '@/utils';
+import { requiredStringProp, stringProp } from '@aerogel/core/utils';
+import type { AcceptRefs } from '@aerogel/core/utils';
 
 export const alertModalProps = {
     title: stringProp(),
     message: requiredStringProp(),
 };
 
-export type AGAlertModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof alertModalProps>>;
+export type AGAlertModalProps = Pretty<
+    AcceptRefs<ObjectWithout<ExtractPropTypes<typeof alertModalProps>, null | undefined>>
+>;
 
 export function useAlertModalProps(): typeof alertModalProps {
     return alertModalProps;

package/src/components/modals/AGConfirmModal.ts

@@ -1,18 +1,33 @@
 import { computed } from 'vue';
 import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
+import type { ObjectWithout, Pretty, SubPartial } from '@noeldemartin/utils';
 
-import { requiredStringProp, stringProp } from '@/utils';
-import { translateWithDefault } from '@/lang';
+import { Colors } from '@aerogel/core/components/constants';
+import { booleanProp, enumProp, objectProp, requiredStringProp, stringProp } from '@aerogel/core/utils';
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { AcceptRefs } from '@aerogel/core/utils';
+import type { ConfirmCheckboxes } from '@aerogel/core/ui';
 
 export const confirmModalProps = {
     title: stringProp(),
     message: requiredStringProp(),
     acceptText: stringProp(),
+    acceptColor: enumProp(Colors, Colors.Primary),
     cancelText: stringProp(),
+    cancelColor: enumProp(Colors, Colors.Clear),
+    checkboxes: objectProp<ConfirmCheckboxes>(),
+    actions: objectProp<Record<string, () => unknown>>(),
+    required: booleanProp(false),
 };
 
-export type AGConfirmModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof confirmModalProps>>;
+export type AGConfirmModalProps = Pretty<
+    AcceptRefs<
+        SubPartial<
+            ObjectWithout<ExtractPropTypes<typeof confirmModalProps>, null | undefined>,
+            'acceptColor' | 'cancelColor'
+        >
+    >
+>;
 
 export function useConfirmModalProps(): typeof confirmModalProps {
     return confirmModalProps;

package/src/components/modals/AGConfirmModal.vue

@@ -1,12 +1,12 @@
 <template>
-    <AGModal v-slot="{ close }: IAGModalDefaultSlotProps" :cancellable="false" :title="title">
-        <AGMarkdown :text="message" />
+    <AGModal v-slot="{ close }: IModalDefaultSlotProps" :cancellable="false" :title="title">
+        <AGMarkdown :text="message" :actions="actions" />
 
         <div class="mt-2 flex flex-row-reverse gap-2">
-            <AGButton @click="close(true)">
+            <AGButton :color="acceptColor" @click="close(true)">
                 {{ renderedAcceptText }}
             </AGButton>
-            <AGButton color="secondary" @click="close()">
+            <AGButton v-if="!required" :color="cancelColor" @click="close()">
                 {{ renderedCancelText }}
             </AGButton>
         </div>
@@ -14,9 +14,10 @@
 </template>
 
 <script setup lang="ts">
+import type { IModalDefaultSlotProps } from '@aerogel/core/components/contracts/Modal';
+
 import AGModal from './AGModal.vue';
 import { useConfirmModal, useConfirmModalProps } from './AGConfirmModal';
-import type { IAGModalDefaultSlotProps } from './AGModal';
 
 import AGButton from '../forms/AGButton.vue';
 import AGMarkdown from '../lib/AGMarkdown.vue';

package/src/components/modals/AGErrorReportModal.ts

@@ -1,10 +1,11 @@
 import { computed, ref } from 'vue';
 import type { Component, ExtractPropTypes } from 'vue';
-import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
+import type { ObjectWithout, Pretty } from '@noeldemartin/utils';
 
-import { requiredArrayProp } from '@/utils/vue';
-import { translateWithDefault } from '@/lang';
-import type { ErrorReport } from '@/errors';
+import { requiredArrayProp } from '@aerogel/core/utils/vue';
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { AcceptRefs } from '@aerogel/core/utils/vue';
+import type { ErrorReport } from '@aerogel/core/errors';
 
 export interface IAGErrorReportModalButtonsDefaultSlotProps {
     id: string;
@@ -18,7 +19,9 @@ export const errorReportModalProps = {
     reports: requiredArrayProp<ErrorReport>(),
 };
 
-export type AGErrorReportModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof errorReportModalProps>>;
+export type AGErrorReportModalProps = Pretty<
+    AcceptRefs<ObjectWithout<ExtractPropTypes<typeof errorReportModalProps>, null | undefined>>
+>;
 
 export function useErrorReportModalProps(): typeof errorReportModalProps {
     return errorReportModalProps;

package/src/components/modals/AGErrorReportModal.vue

@@ -16,7 +16,7 @@
                             :aria-label="previousReportText"
                             @click="activeReportIndex--"
                         >
-                            <IconCheveronLeft aria-hidden="true" class="h-4 w-4" />
+                            <IconCheveronLeft aria-hidden="true" class="size-4" />
                         </AGButton>
                         <AGButton
                             color="clear"
@@ -25,7 +25,7 @@
                             :aria-label="nextReportText"
                             @click="activeReportIndex++"
                         >
-                            <IconCheveronRight aria-hidden="true" class="h-4 w-4" />
+                            <IconCheveronRight aria-hidden="true" class="size-4" />
                         </AGButton>
                     </template>
                 </div>

package/src/components/modals/AGErrorReportModalButtons.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="flex">
-        <slot v-for="(button, i) of buttons" v-bind="(button as unknown as ComponentProps)" :key="i">
+        <slot v-for="(button, i) of buttons" v-bind="button as unknown as ComponentProps" :key="i">
             <AGButton
                 color="clear"
                 :url="button.url"
@@ -8,7 +8,7 @@
                 :aria-label="$td(`errors.report_${button.id}`, button.description)"
                 @click="button.handler"
             >
-                <component :is="button.iconComponent" class="h-4 w-4" aria-hidden="true" />
+                <component :is="button.iconComponent" class="size-4" aria-hidden="true" />
             </AGButton>
         </slot>
     </div>
@@ -22,12 +22,12 @@ import IconGitHub from '~icons/mdi/github';
 import { computed } from 'vue';
 import { stringExcerpt, tap } from '@noeldemartin/utils';
 
-import App from '@/services/App';
-import UI from '@/ui/UI';
-import { requiredObjectProp } from '@/utils/vue';
-import { translateWithDefault } from '@/lang/utils';
-import type { ComponentProps } from '@/utils/vue';
-import type { ErrorReport } from '@/errors';
+import App from '@aerogel/core/services/App';
+import UI from '@aerogel/core/ui/UI';
+import { requiredObjectProp } from '@aerogel/core/utils/vue';
+import { translateWithDefault } from '@aerogel/core/lang/utils';
+import type { ComponentProps } from '@aerogel/core/utils/vue';
+import type { ErrorReport } from '@aerogel/core/errors';
 
 import AGButton from '../forms/AGButton.vue';
 import type { IAGErrorReportModalButtonsDefaultSlotProps } from './AGErrorReportModal';
@@ -94,8 +94,8 @@ const buttons = computed(() =>
                     );
                 },
             },
-        ],
-        (reportButtons: IAGErrorReportModalButtonsDefaultSlotProps[]) => {
+        ] as IAGErrorReportModalButtonsDefaultSlotProps[],
+        (reportButtons) => {
             if (!githubReportUrl.value) {
                 return;
             }

package/src/components/modals/AGErrorReportModalTitle.vue

@@ -5,8 +5,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { numberProp, requiredObjectProp } from '@/utils/vue';
-import type { ErrorReport } from '@/errors';
+import { numberProp, requiredObjectProp } from '@aerogel/core/utils/vue';
+import type { ErrorReport } from '@aerogel/core/errors';
 
 import AGMarkdown from '../lib/AGMarkdown.vue';
 

package/src/components/modals/AGLoadingModal.ts

@@ -1,15 +1,20 @@
 import { computed } from 'vue';
 import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
+import type { ObjectWithout } from '@noeldemartin/utils';
 
-import { stringProp } from '@/utils';
-import { translateWithDefault } from '@/lang';
+import { numberProp, stringProp } from '@aerogel/core/utils';
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { AcceptRefs } from '@aerogel/core/utils';
 
 export const loadingModalProps = {
+    title: stringProp(),
     message: stringProp(),
+    progress: numberProp(),
 };
 
-export type AGLoadingModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof loadingModalProps>>;
+export type AGLoadingModalProps = AcceptRefs<
+    ObjectWithout<ExtractPropTypes<typeof loadingModalProps>, null | undefined>
+>;
 
 export function useLoadingModalProps(): typeof loadingModalProps {
     return loadingModalProps;
@@ -18,6 +23,7 @@ export function useLoadingModalProps(): typeof loadingModalProps {
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function useLoadingModal(props: ExtractPropTypes<typeof loadingModalProps>) {
     const renderedMessage = computed(() => props.message ?? translateWithDefault('ui.loading', 'Loading...'));
+    const showProgress = computed(() => typeof props.progress === 'number');
 
-    return { renderedMessage };
+    return { renderedMessage, showProgress };
 }

package/src/components/modals/AGModal.vue

@@ -3,37 +3,38 @@
         ref="$modal"
         v-slot="{ close }: IAGHeadlessModalDefaultSlotProps"
         v-bind="props"
-        class="relative z-50"
+        class="relative"
     >
-        <div class="fixed inset-0 flex items-center justify-center p-8">
-            <AGHeadlessModalPanel class="flex max-h-full max-w-full flex-col overflow-hidden bg-white p-4">
-                <AGHeadlessModalTitle v-if="title" class="mb-2 text-lg font-semibold">
-                    <AGMarkdown :text="title" inline />
-                </AGHeadlessModalTitle>
-                <div class="flex max-h-full flex-col overflow-auto" v-bind="$attrs">
-                    <slot :close="close" />
-                </div>
-            </AGHeadlessModalPanel>
-        </div>
+        <AGHeadlessModalContent
+            class="fixed top-1/2 left-1/2 z-50 max-w-lg -translate-x-1/2 -translate-y-1/2 bg-white p-4"
+        >
+            <AGHeadlessModalTitle v-if="title" class="mb-2 text-lg font-semibold">
+                <AGMarkdown :text="title" inline />
+            </AGHeadlessModalTitle>
+            <div class="flex max-h-full flex-col overflow-auto" v-bind="$attrs">
+                <slot :close="close" />
+            </div>
+        </AGHeadlessModalContent>
     </AGHeadlessModal>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 
-import { useModalExpose, useModalProps } from '@/components/headless/modals/AGHeadlessModal';
-import type { IAGHeadlessModal, IAGHeadlessModalDefaultSlotProps } from '@/components/headless/modals/AGHeadlessModal';
-
-import type { IAGModal } from './AGModal';
+import { AGHeadlessModalTitle } from '@aerogel/core/components/headless/modals';
+import { modalExpose, modalProps } from '@aerogel/core/components/headless/modals/AGHeadlessModal';
+import type {
+    IAGHeadlessModal,
+    IAGHeadlessModalDefaultSlotProps,
+} from '@aerogel/core/components/headless/modals/AGHeadlessModal';
 
 import AGHeadlessModal from '../headless/modals/AGHeadlessModal.vue';
-import AGHeadlessModalPanel from '../headless/modals/AGHeadlessModalPanel.vue';
-import AGHeadlessModalTitle from '../headless/modals/AGHeadlessModalTitle.vue';
+import AGHeadlessModalContent from '../headless/modals/AGHeadlessModalContent.vue';
 import AGMarkdown from '../lib/AGMarkdown.vue';
 
-const props = defineProps(useModalProps());
+const props = defineProps(modalProps());
 const $modal = ref<IAGHeadlessModal>();
 
 defineOptions({ inheritAttrs: false });
-defineExpose<IAGModal>(useModalExpose($modal));
+defineExpose(modalExpose($modal));
 </script>

package/src/components/modals/AGModalContext.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue';
 
-import type { Modal } from '@/ui/UI.state';
+import type { Modal } from '@aerogel/core/ui/UI.state';
 
 export interface IAGModalContext {
     modal: Ref<Modal>;

package/src/components/modals/AGModalContext.vue

@@ -1,18 +1,28 @@
 <template>
-    <component :is="modal.component" v-bind="modal.properties" />
+    <component :is="modal.component" v-bind="modalProperties" />
 </template>
 
 <script setup lang="ts">
-import { provide, toRef } from 'vue';
+import { computed, provide, toRef, unref } from 'vue';
 
-import { requiredNumberProp, requiredObjectProp } from '@/utils/vue';
-import type { Modal } from '@/ui/UI.state';
+import { numberProp, requiredObjectProp } from '@aerogel/core/utils/vue';
+import type { Modal } from '@aerogel/core/ui/UI.state';
 
 import type { IAGModalContext } from './AGModalContext';
 
 const props = defineProps({
     modal: requiredObjectProp<Modal>(),
-    childIndex: requiredNumberProp(),
+    childIndex: numberProp(0),
+});
+
+const modalProperties = computed(() => {
+    const properties = {} as typeof props.modal.properties;
+
+    for (const property in props.modal.properties) {
+        properties[property] = unref(props.modal.properties[property]);
+    }
+
+    return properties;
 });
 
 provide<IAGModalContext>('modal', {

package/src/components/modals/AGModalTitle.vue

@@ -5,5 +5,5 @@
 </template>
 
 <script setup lang="ts">
-import AGHeadlessModalTitle from '../headless/modals/AGHeadlessModalTitle.vue';
+import { AGHeadlessModalTitle } from '@aerogel/core/components/headless/modals';
 </script>

package/src/components/modals/AGPromptModal.ts

@@ -1,9 +1,11 @@
 import { computed } from 'vue';
 import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
+import type { ObjectWithout, Pretty, SubPartial } from '@noeldemartin/utils';
 
-import { requiredStringProp, stringProp } from '@/utils';
-import { translateWithDefault } from '@/lang';
+import { Colors } from '@aerogel/core/components/constants';
+import { enumProp, requiredStringProp, stringProp } from '@aerogel/core/utils';
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { AcceptRefs } from '@aerogel/core/utils';
 
 export const promptModalProps = {
     title: stringProp(),
@@ -12,10 +14,19 @@ export const promptModalProps = {
     defaultValue: stringProp(),
     placeholder: stringProp(),
     acceptText: stringProp(),
+    acceptColor: enumProp(Colors, Colors.Primary),
     cancelText: stringProp(),
+    cancelColor: enumProp(Colors, Colors.Clear),
 };
 
-export type AGPromptModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof promptModalProps>>;
+export type AGPromptModalProps = Pretty<
+    AcceptRefs<
+        SubPartial<
+            ObjectWithout<ExtractPropTypes<typeof promptModalProps>, null | undefined>,
+            'acceptColor' | 'cancelColor'
+        >
+    >
+>;
 
 export function usePromptModalProps(): typeof promptModalProps {
     return promptModalProps;

package/src/components/modals/AGPromptModal.vue

@@ -1,15 +1,15 @@
 <template>
-    <AGModal v-slot="{ close }: IAGModalDefaultSlotProps" :cancellable="false" :title="title">
+    <AGModal v-slot="{ close }: IModalDefaultSlotProps" :cancellable="false" :title="title">
         <AGMarkdown :text="message" />
 
         <AGForm :form="form" @submit="close(form.draft)">
             <AGInput name="draft" :placeholder="placeholder" :label="label" />
 
             <div class="mt-2 flex flex-row-reverse gap-2">
-                <AGButton submit>
+                <AGButton :color="acceptColor" submit>
                     {{ renderedAcceptText }}
                 </AGButton>
-                <AGButton color="secondary" @click="close()">
+                <AGButton :color="cancelColor" @click="close()">
                     {{ renderedCancelText }}
                 </AGButton>
             </div>
@@ -18,9 +18,10 @@
 </template>
 
 <script setup lang="ts">
+import type { IModalDefaultSlotProps } from '@aerogel/core/components/contracts/Modal';
+
 import AGModal from './AGModal.vue';
 import { usePromptModal, usePromptModalProps } from './AGPromptModal';
-import type { IAGModalDefaultSlotProps } from './AGModal';
 
 import AGButton from '../forms/AGButton.vue';
 import AGForm from '../forms/AGForm.vue';

package/src/components/modals/index.ts

@@ -2,7 +2,6 @@ export * from './AGAlertModal';
 export * from './AGConfirmModal';
 export * from './AGErrorReportModal';
 export * from './AGLoadingModal';
-export * from './AGModal';
 export * from './AGModalContext';
 export * from './AGPromptModal';
 

package/src/components/snackbars/AGSnackbar.vue

@@ -15,8 +15,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { Colors } from '@/components/constants';
-import { useSnackbar, useSnackbarProps } from '@/components/headless/snackbars';
+import { Colors } from '@aerogel/core/components/constants';
+import { useSnackbar, useSnackbarProps } from '@aerogel/core/components/headless/snackbars';
 
 import AGButton from '../forms/AGButton.vue';
 import AGHeadlessSnackbar from '../headless/snackbars/AGHeadlessSnackbar.vue';

package/src/components/utils.ts

@@ -1,10 +1,63 @@
-export function extractComponentProps<T extends Record<string, unknown>>(
-    values: Record<string, unknown>,
-    definitions: Record<string, unknown>,
-): T {
-    return Object.keys(definitions).reduce((extracted, prop) => {
-        extracted[prop] = values[prop];
-
-        return extracted;
-    }, {} as Record<string, unknown>) as T;
+import { isObject } from '@noeldemartin/utils';
+import { customRef } from 'vue';
+import type { ExtractPropTypes, PropType, Ref, UnwrapNestedRefs } from 'vue';
+
+import type { HasElement } from '@aerogel/core/components/contracts/shared';
+
+export type ComponentPropDefinitions<T> = {
+    [K in keyof T]: {
+        type?: PropType<T[K]>;
+        default: T[K] | (() => T[K]) | null;
+    };
+};
+
+export type PickComponentProps<TValues, TDefinitions> = {
+    [K in keyof TValues]: K extends keyof TDefinitions ? TValues[K] : never;
+};
+
+export function elementRef(): Ref<HTMLElement | undefined> {
+    return customRef((track, trigger) => {
+        let value: HTMLElement | undefined = undefined;
+
+        return {
+            get() {
+                track();
+
+                return value;
+            },
+            set(newValue) {
+                value = getElement(newValue);
+
+                trigger();
+            },
+        };
+    });
+}
+
+export function extractComponentProps<TDefinitions extends {}, TValues extends ExtractPropTypes<TDefinitions>>(
+    values: TValues,
+    definitions: TDefinitions,
+): PickComponentProps<TValues, TDefinitions> {
+    return Object.keys(definitions).reduce(
+        (extracted, prop) => {
+            extracted[prop] = values[prop as keyof TValues];
+
+            return extracted;
+        },
+        {} as Record<string, unknown>,
+    ) as PickComponentProps<TValues, TDefinitions>;
+}
+
+export function getElement(value: unknown): HTMLElement | undefined {
+    if (value instanceof HTMLElement) {
+        return value;
+    }
+
+    if (hasElement(value)) {
+        return value.$el;
+    }
+}
+
+export function hasElement(value: unknown): value is UnwrapNestedRefs<HasElement> {
+    return isObject(value) && '$el' in value;
 }

package/src/directives/index.ts

@@ -1,15 +1,15 @@
 import type { Directive } from 'vue';
 
-import { definePlugin } from '@/plugins';
+import { definePlugin } from '@aerogel/core/plugins';
 
-import initialFocus from './initial-focus';
 import measure from './measure';
 
 const builtInDirectives: Record<string, Directive> = {
-    'initial-focus': initialFocus,
-    'measure': measure,
+    measure: measure,
 };
 
+export * from './measure';
+
 export default definePlugin({
     install(app, options) {
         const directives = {
@@ -23,8 +23,14 @@ export default definePlugin({
     },
 });
 
-declare module '@/bootstrap/options' {
+declare module '@aerogel/core/bootstrap/options' {
     export interface AerogelOptions {
         directives?: Record<string, Directive>;
     }
 }
+
+declare module 'vue' {
+    interface ComponentCustomDirectives {
+        measure: Directive<string, string>;
+    }
+}

package/src/directives/measure.ts

@@ -1,12 +1,40 @@
-import { defineDirective } from '@/utils/vue';
+import { defineDirective } from '@aerogel/core/utils/vue';
+import { tap } from '@noeldemartin/utils';
+
+const resizeObservers: WeakMap<HTMLElement, ResizeObserver> = new WeakMap();
+
+export interface ElementSize {
+    width: number;
+    height: number;
+}
+
+export type MeasureDirectiveListener = (size: ElementSize) => unknown;
 
 export default defineDirective({
-    mounted(element: HTMLElement, { value }: { value?: () => unknown }) {
-        const sizes = element.getBoundingClientRect();
+    mounted(element: HTMLElement, { value }) {
+        // TODO replace with argument when typed properly
+        const modifiers = { css: true, watch: true };
+
+        const listener = typeof value === 'function' ? (value as MeasureDirectiveListener) : null;
+        const update = () => {
+            const sizes = element.getBoundingClientRect();
 
-        element.style.setProperty('--width', `${sizes.width}px`);
-        element.style.setProperty('--height', `${sizes.height}px`);
+            if (modifiers.css) {
+                element.style.setProperty('--width', `${sizes.width}px`);
+                element.style.setProperty('--height', `${sizes.height}px`);
+            }
 
-        value?.();
+            listener?.({ width: sizes.width, height: sizes.height });
+        };
+
+        if (modifiers.watch) {
+            resizeObservers.set(element, tap(new ResizeObserver(update)).observe(element));
+        }
+
+        update();
+    },
+    unmounted(element) {
+        resizeObservers.get(element)?.unobserve(element);
+        resizeObservers.delete(element);
     },
 });

package/src/errors/Errors.state.ts

@@ -1,6 +1,6 @@
 import type { JSError } from '@noeldemartin/utils';
 
-import { defineServiceState } from '@/services';
+import { defineServiceState } from '@aerogel/core/services';
 
 export type ErrorSource = string | Error | JSError | unknown;
 

package/src/errors/Errors.ts

@@ -1,16 +1,16 @@
-import { JSError, facade, isObject, objectWithoutEmpty, toString } from '@noeldemartin/utils';
+import { JSError, facade, isDevelopment, isObject, isTesting, objectWithoutEmpty, toString } from '@noeldemartin/utils';
 
-import App from '@/services/App';
-import ServiceBootError from '@/errors/ServiceBootError';
-import UI, { UIComponents } from '@/ui/UI';
-import { translateWithDefault } from '@/lang/utils';
+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 Service from './Errors.state';
-import { Colors } from '@/components/constants';
-import { Events } from '@/services';
-import type { AGErrorReportModalProps } from '@/components/modals/AGErrorReportModal';
+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 '@/ui/UI.state';
+import type { ModalComponent } from '@aerogel/core/ui/UI.state';
 
 export class ErrorsService extends Service {
 
@@ -42,11 +42,11 @@ export class ErrorsService extends Service {
     public async report(error: ErrorSource, message?: string): Promise<void> {
         await Events.emit('error', { error, message });
 
-        if (App.testing) {
+        if (isTesting('unit')) {
             throw error;
         }
 
-        if (App.development) {
+        if (isDevelopment()) {
             this.logError(error);
         }
 
@@ -178,7 +178,7 @@ export class ErrorsService extends Service {
 
 export default facade(ErrorsService);
 
-declare module '@/services/Events' {
+declare module '@aerogel/core/services/Events' {
     export interface EventsPayload {
         error: { error: ErrorSource; message?: string };
     }