@aerogel/core 0.0.0-next.fcfbfdc3428c34c4d1c0e781b61d244f13232fc9 → 0.1.0-next.c4b24f52d8b652bd5c14c2d12e1b38b779ab7682

package/src/components/ui/ModalContext.vue

@@ -5,7 +5,8 @@
 <script setup lang="ts">
 import { computed, provide, toRef, unref } from 'vue';
 
-import type { UIModal, UIModalContext } from '@aerogel/core/ui/UI.state';
+import type { UIModal } from '@aerogel/core/ui/UI.state';
+import type { UIModalContext } from '@aerogel/core/ui/UI';
 import type { AcceptRefs } from '@aerogel/core/utils/vue';
 
 const props = defineProps<{

package/src/components/ui/PromptModal.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- @vue-generic {import('@aerogel/core/ui/UI').ModalExposeResult<PromptModalExpose>} -->
     <Modal v-slot="{ close }" :title="renderedTitle" persistent>
         <Form :form @submit="close(form.draft)">
             <Markdown v-if="renderedMessage" :text="renderedMessage" />
@@ -13,7 +14,7 @@
                 <Button :variant="acceptVariant" submit>
                     {{ renderedAcceptText }}
                 </Button>
-                <Button :variant="cancelVariant" @click="close(false)">
+                <Button :variant="cancelVariant" @click="close()">
                     {{ renderedCancelText }}
                 </Button>
             </div>
@@ -28,8 +29,10 @@ import Form from '@aerogel/core/components/ui/Form.vue';
 import Input from '@aerogel/core/components/ui/Input.vue';
 import Modal from '@aerogel/core/components/ui/Modal.vue';
 import { usePromptModal } from '@aerogel/core/components/contracts/PromptModal';
-import type { PromptModalProps } from '@aerogel/core/components/contracts/PromptModal';
+import type { PromptModalExpose, PromptModalProps } from '@aerogel/core/components/contracts/PromptModal';
 
 const { cancelVariant = 'secondary', ...props } = defineProps<PromptModalProps>();
 const { form, renderedTitle, renderedMessage, renderedAcceptText, renderedCancelText } = usePromptModal(props);
+
+defineExpose<PromptModalExpose>();
 </script>

package/src/components/ui/Select.vue

@@ -8,18 +8,20 @@
     </HeadlessSelect>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends Nullable<FormFieldValue>">
 import { useForwardExpose } from 'reka-ui';
+import type { Nullable } from '@noeldemartin/utils';
 
 import HeadlessSelect from '@aerogel/core/components/headless/HeadlessSelect.vue';
 import type { SelectEmits, SelectProps } from '@aerogel/core/components/contracts/Select';
+import type { FormFieldValue } from '@aerogel/core/forms';
 
 import SelectLabel from './SelectLabel.vue';
 import SelectOptions from './SelectOptions.vue';
 import SelectTrigger from './SelectTrigger.vue';
 
-defineProps<SelectProps>();
-defineEmits<SelectEmits>();
+defineProps<SelectProps<T>>();
+defineEmits<SelectEmits<T>>();
 
 const { forwardRef } = useForwardExpose();
 </script>

package/src/components/ui/SelectLabel.vue

@@ -7,11 +7,15 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
 
 import HeadlessSelectLabel from '@aerogel/core/components/headless/HeadlessSelectLabel.vue';
 import { classes, injectReactiveOrFail } from '@aerogel/core/utils';
 import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
 
+const { class: rootClasses } = defineProps<{ class?: HTMLAttributes['class'] }>();
+
 const select = injectReactiveOrFail<SelectExpose>('select', '<SelectLabel> must be a child of a <Select>');
-const renderedClasses = computed(() => classes('block text-sm leading-6 font-medium text-gray-900', select.labelClass));
+const renderedClasses = computed(() =>
+    classes('block text-sm leading-6 font-medium text-gray-900', select.labelClass, rootClasses));
 </script>

package/src/components/ui/SelectOptions.vue

@@ -1,10 +1,15 @@
 <template>
     <HeadlessSelectOptions :class="renderedClasses">
-        <slot>
+        <slot v-if="select.options?.length">
             <SelectOption v-for="option of select?.options ?? []" :key="option.key" :value="option.value">
                 {{ option.label }}
             </SelectOption>
         </slot>
+        <slot v-else>
+            <SelectOption disabled :value="null">
+                {{ $td('ui.selectEmpty', 'No options available') }}
+            </SelectOption>
+        </slot>
     </HeadlessSelectOptions>
 </template>
 

package/src/components/ui/SelectTrigger.vue

@@ -22,7 +22,7 @@ const select = injectReactiveOrFail<SelectExpose>('select', '<SelectTrigger> mus
 const renderedClasses = computed(() =>
     classes(
         // eslint-disable-next-line vue/max-len
-        'focus:outline-primary-600 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-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 sm:text-sm/6',
+        'focus:outline-primary-600 data-[state=open]:outline-primary-600 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-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 sm:text-sm/6',
         { 'mt-1': select.label },
         rootClasses,
     ));

package/src/components/ui/Setting.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="mt-4 flex" :class="{ 'flex-col': layout === 'vertical' }">
+        <div class="flex-grow">
+            <h3 :id="titleId" class="text-base font-semibold">
+                {{ title }}
+            </h3>
+            <Markdown v-if="description" :text="description" class="mt-1 text-sm text-gray-500" />
+        </div>
+
+        <div :class="renderedRootClass">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import { classes } from '@aerogel/core/utils';
+
+const { layout = 'horizontal', class: rootClass } = defineProps<{
+    title: string;
+    titleId?: string;
+    description?: string;
+    class?: HTMLAttributes['class'];
+    layout?: 'vertical' | 'horizontal';
+}>();
+const renderedRootClass = computed(() => classes(rootClass, 'flex flex-col justify-center gap-1'));
+</script>

package/src/components/ui/StartupCrash.vue

@@ -1,31 +1,76 @@
 <template>
     <div class="grid grow place-items-center">
-        <div class="flex flex-col items-center space-y-6 p-8">
-            <h1 class="mt-2 text-center text-4xl font-medium text-red-600">
-                {{ $td('startupCrash.title', 'Something went wrong!') }}
+        <div class="flex flex-col items-center p-8">
+            <i-majesticons-exclamation class="size-20 text-red-600" />
+            <h1 class="mt-0 mb-0 text-center text-4xl font-medium text-red-600">
+                {{ $td('startupCrash.title', 'Oops, something went wrong!') }}
             </h1>
             <Markdown
                 :text="
                     $td(
                         'startupCrash.message',
-                        'Something failed trying to start the application.\n\nHere\'s some things you can do:'
+                        'There was a problem starting the application, but here\'s some things you can do:'
                     )
                 "
                 class="mt-4 text-center"
             />
-            <div class="mt-4 flex flex-col space-y-4">
+            <div
+                class="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2 [&_button]:justify-start sm:[&_button]:size-32 sm:[&_button]:flex-col sm:[&_button]:justify-center [&_svg]:size-6 sm:[&_svg]:size-8"
+            >
                 <Button variant="danger" @click="$app.reload()">
+                    <IconRefresh />
                     {{ $td('startupCrash.reload', 'Try again') }}
                 </Button>
                 <Button variant="danger" @click="$errors.inspect($errors.startupErrors)">
+                    <IconBug />
                     {{ $td('startupCrash.inspect', 'View error details') }}
                 </Button>
+                <Button variant="danger" @click="purgeDevice()">
+                    <IconDelete />
+                    {{ $td('startupCrash.purge', 'Purge device') }}
+                </Button>
+                <Button variant="danger" @click="$errors.debug = !$errors.debug">
+                    <IconFrameInspect />
+                    {{ $td('startupCrash.debug', 'Toggle debugging') }}
+                </Button>
             </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import IconBug from '~icons/material-symbols/bug-report';
+import IconDelete from '~icons/material-symbols/delete-forever-rounded';
+import IconFrameInspect from '~icons/material-symbols/frame-inspect';
+import IconRefresh from '~icons/material-symbols/refresh-rounded';
+
+import App from '@aerogel/core/services/App';
 import Button from '@aerogel/core/components/ui/Button.vue';
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Storage from '@aerogel/core/services/Storage';
+import UI from '@aerogel/core/ui/UI';
+import { translateWithDefault } from '@aerogel/core/lang/utils';
+
+async function purgeDevice() {
+    const confirmed = await UI.confirm(
+        translateWithDefault('startupCrash.purgeConfirmTitle', 'Delete everything?'),
+        translateWithDefault(
+            'startupCrash.purgeConfirmMessage',
+            'If the problem persists, one drastic solution may be to wipe the storage in this device ' +
+                'to start from scratch. However, keep in mind that **all the data that you haven\'t ' +
+                'synchronized will be deleted forever**.\n\nDo you still want to proceed?',
+        ),
+        {
+            acceptVariant: 'danger',
+            acceptText: translateWithDefault('startupCrash.purgeConfirmAccept', 'Purge device'),
+        },
+    );
+
+    if (!confirmed) {
+        return;
+    }
+
+    await Storage.purge();
+    await App.reload();
+}
 </script>

package/src/components/ui/Switch.vue

@@ -0,0 +1,11 @@
+<template>
+    <HeadlessSwitch
+        class="flex flex-row items-center gap-1"
+        input-class="disabled:opacity-50 disabled:cursor-not-allowed data-[state=checked]:bg-primary-600 data-[state=unchecked]:bg-gray-200 relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focusdisabled:opacity-50 disabled:cursor-not-allowed :ring-2 focus:ring-primary-600 focus:ring-offset-2 focus:outline-hidden"
+        thumb-class="data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 pointer-events-none inline-block size-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out"
+    />
+</template>
+
+<script setup lang="ts">
+import HeadlessSwitch from '@aerogel/core/components/headless/HeadlessSwitch.vue';
+</script>

package/src/components/ui/TextArea.vue

@@ -0,0 +1,56 @@
+<template>
+    <HeadlessInput
+        ref="$inputRef"
+        :label="label"
+        :class="rootClasses"
+        v-bind="props"
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
+        <HeadlessInputLabel class="block text-sm leading-6 font-medium text-gray-900" />
+        <div :class="renderedWrapperClasses">
+            <HeadlessInputTextArea v-bind="inputAttrs" :class="renderedInputClasses" />
+            <div v-if="$input?.errors" class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                <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" />
+    </HeadlessInput>
+</template>
+
+<script setup lang="ts">
+import IconExclamationSolid from '~icons/zondicons/exclamation-solid';
+
+import { computed, useTemplateRef } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import HeadlessInput from '@aerogel/core/components/headless/HeadlessInput.vue';
+import HeadlessInputLabel from '@aerogel/core/components/headless/HeadlessInputLabel.vue';
+import HeadlessInputTextArea from '@aerogel/core/components/headless/HeadlessInputTextArea.vue';
+import HeadlessInputDescription from '@aerogel/core/components/headless/HeadlessInputDescription.vue';
+import HeadlessInputError from '@aerogel/core/components/headless/HeadlessInputError.vue';
+import { classes } from '@aerogel/core/utils/classes';
+import { useInputAttrs } from '@aerogel/core/utils/composition/forms';
+import type { InputEmits, InputProps } from '@aerogel/core/components/contracts/Input';
+
+defineOptions({ inheritAttrs: false });
+defineEmits<InputEmits>();
+const { label, inputClass, wrapperClass, ...props } = defineProps<
+    InputProps & { inputClass?: HTMLAttributes['class']; wrapperClass?: HTMLAttributes['class'] }
+>();
+const $input = useTemplateRef('$inputRef');
+const [inputAttrs, rootClasses] = useInputAttrs();
+const renderedWrapperClasses = computed(() =>
+    classes('relative rounded-md shadow-2xs', { 'mt-1': label }, wrapperClass));
+const renderedInputClasses = computed(() =>
+    classes(
+        // eslint-disable-next-line vue/max-len
+        'block w-full rounded-md border-0 py-1.5 ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6',
+        {
+            'focus:ring-primary-600': !$input.value?.errors,
+            'text-gray-900 shadow-2xs ring-gray-900/10 placeholder:text-gray-400': !$input.value?.errors,
+            'pr-10 text-red-900 ring-red-900/10 placeholder:text-red-300 focus:ring-red-500': $input.value?.errors,
+        },
+        inputClass,
+    ));
+</script>

package/src/components/ui/Toast.vue

@@ -13,30 +13,34 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 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 { variantClasses } from '@aerogel/core/utils/classes';
+import type { ToastExpose, 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',
+const renderedClasses = computed(() =>
+    variantClasses<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',
             },
         },
-        defaultVariants: {
-            variant: 'secondary',
-        },
-    },
-);
+    ));
+
+defineExpose<ToastExpose>();
 </script>

package/src/components/ui/index.ts

@@ -7,6 +7,8 @@ export { default as DropdownMenu } from './DropdownMenu.vue';
 export { default as DropdownMenuOption } from './DropdownMenuOption.vue';
 export { default as DropdownMenuOptions } from './DropdownMenuOptions.vue';
 export { default as EditableContent } from './EditableContent.vue';
+export { default as ErrorLogs } from './ErrorLogs.vue';
+export { default as ErrorLogsModal } from './ErrorLogsModal.vue';
 export { default as ErrorMessage } from './ErrorMessage.vue';
 export { default as ErrorReportModal } from './ErrorReportModal.vue';
 export { default as ErrorReportModalButtons } from './ErrorReportModalButtons.vue';
@@ -25,6 +27,9 @@ export { default as SelectLabel } from './SelectLabel.vue';
 export { default as SelectOption } from './SelectOption.vue';
 export { default as SelectOptions } from './SelectOptions.vue';
 export { default as SelectTrigger } from './SelectTrigger.vue';
+export { default as Setting } from './Setting.vue';
 export { default as SettingsModal } from './SettingsModal.vue';
 export { default as StartupCrash } from './StartupCrash.vue';
+export { default as Switch } from './Switch.vue';
+export { default as TextArea } from './TextArea.vue';
 export { default as Toast } from './Toast.vue';

package/src/directives/measure.ts

@@ -3,6 +3,15 @@ import { tap } from '@noeldemartin/utils';
 
 const resizeObservers: WeakMap<HTMLElement, ResizeObserver> = new WeakMap();
 
+export type MeasureDirectiveValue =
+    | MeasureDirectiveListener
+    | {
+          css?: boolean;
+          watch?: boolean;
+      };
+
+export type MeasureDirectiveModifiers = 'css' | 'watch';
+
 export interface ElementSize {
     width: number;
     height: number;
@@ -10,11 +19,8 @@ export interface ElementSize {
 
 export type MeasureDirectiveListener = (size: ElementSize) => unknown;
 
-export default defineDirective({
-    mounted(element: HTMLElement, { value }) {
-        // TODO replace with argument when typed properly
-        const modifiers = { css: true, watch: true };
-
+export default defineDirective<MeasureDirectiveValue, MeasureDirectiveModifiers>({
+    mounted(element: HTMLElement, { value, modifiers }) {
         const listener = typeof value === 'function' ? (value as MeasureDirectiveListener) : null;
         const update = () => {
             const sizes = element.getBoundingClientRect();

package/src/errors/Errors.state.ts

@@ -22,6 +22,7 @@ export default defineServiceState({
     initialState: {
         logs: [] as ErrorReportLog[],
         startupErrors: [] as ErrorReport[],
+        debug: false,
     },
     computed: {
         hasErrors: ({ logs }) => logs.length > 0,

package/src/errors/Errors.ts

@@ -1,12 +1,12 @@
 import { JSError, facade, isDevelopment, isObject, isTesting, objectWithoutEmpty, toString } from '@noeldemartin/utils';
+import { watchEffect } from 'vue';
+import type Eruda from 'eruda';
 
 import App from '@aerogel/core/services/App';
 import ServiceBootError from '@aerogel/core/errors/ServiceBootError';
-import UI, { UIComponents } from '@aerogel/core/ui/UI';
+import UI 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 type { ErrorReport, ErrorReportLog, ErrorSource } from './Errors.state';
@@ -15,6 +15,7 @@ export class ErrorsService extends Service {
 
     public forceReporting: boolean = false;
     private enabled: boolean = true;
+    private eruda: typeof Eruda | null = null;
 
     public enable(): void {
         this.enabled = true;
@@ -24,18 +25,23 @@ export class ErrorsService extends Service {
         this.enabled = false;
     }
 
-    public async inspect(error: ErrorSource | ErrorReport[]): Promise<void> {
-        const reports = Array.isArray(error) ? (error as ErrorReport[]) : [await this.createErrorReport(error)];
-
-        if (reports.length === 0) {
+    public async inspect(error: ErrorSource | ErrorReport, reports?: ErrorReport[]): Promise<void>;
+    public async inspect(reports: ErrorReport[]): Promise<void>;
+    public async inspect(errorOrReports: ErrorSource | ErrorReport[], _reports?: ErrorReport[]): Promise<void> {
+        if (Array.isArray(errorOrReports) && errorOrReports.length === 0) {
             UI.alert(translateWithDefault('errors.inspectEmpty', 'Nothing to inspect!'));
 
             return;
         }
 
-        UI.openModal<ModalComponent<ErrorReportModalProps>>(UI.requireComponent(UIComponents.ErrorReportModal), {
-            reports,
-        });
+        const report = Array.isArray(errorOrReports)
+            ? (errorOrReports[0] as ErrorReport)
+            : this.isErrorReport(errorOrReports)
+                ? errorOrReports
+                : await this.createErrorReport(errorOrReports);
+        const reports = Array.isArray(errorOrReports) ? (errorOrReports as ErrorReport[]) : (_reports ?? [report]);
+
+        UI.modal(UI.requireComponent('error-report-modal'), { report, reports });
     }
 
     public async report(error: ErrorSource, message?: string): Promise<void> {
@@ -79,11 +85,7 @@ export class ErrorsService extends Service {
                     {
                         label: translateWithDefault('errors.viewDetails', 'View details'),
                         dismiss: true,
-                        click: () =>
-                            UI.openModal<ModalComponent<ErrorReportModalProps>>(
-                                UI.requireComponent(UIComponents.ErrorReportModal),
-                                { reports: [report] },
-                            ),
+                        click: () => UI.modal(UI.requireComponent('error-report-modal'), { report, reports: [report] }),
                     },
                 ],
             },
@@ -92,6 +94,19 @@ export class ErrorsService extends Service {
         this.setState({ logs: [log].concat(this.logs) });
     }
 
+    public reportDevelopmentError(error: ErrorSource, message?: string): void {
+        if (!isDevelopment()) {
+            return;
+        }
+
+        if (message) {
+            // eslint-disable-next-line no-console
+            console.warn(message);
+        }
+
+        this.logError(error);
+    }
+
     public see(report: ErrorReport): void {
         this.setState({
             logs: this.logs.map((log) => {
@@ -107,12 +122,17 @@ export class ErrorsService extends Service {
         });
     }
 
-    public seeAll(): void {
-        this.setState({
-            logs: this.logs.map((log) => ({
-                ...log,
-                seen: true,
-            })),
+    protected override async boot(): Promise<void> {
+        watchEffect(async () => {
+            if (!this.debug) {
+                this.eruda?.destroy();
+
+                return;
+            }
+
+            this.eruda ??= (await import('eruda')).default;
+
+            this.eruda.init();
         });
     }
 
@@ -125,6 +145,10 @@ export class ErrorsService extends Service {
         }
     }
 
+    private isErrorReport(error: unknown): error is ErrorReport {
+        return isObject(error) && 'title' in error;
+    }
+
     private async createErrorReport(error: ErrorSource): Promise<ErrorReport> {
         if (typeof error === 'string') {
             return { title: error };

package/src/errors/index.ts

@@ -1,9 +1,11 @@
-import type { App } from 'vue';
+import type { App as AppInstance } from 'vue';
 
+import App from '@aerogel/core/services/App';
 import { bootServices } from '@aerogel/core/services';
 import { definePlugin } from '@aerogel/core/plugins';
 
 import Errors from './Errors';
+import settings from './settings';
 import type { ErrorReport, ErrorReportLog, ErrorSource } from './Errors.state';
 
 export * from './utils';
@@ -19,7 +21,7 @@ const frameworkHandler: ErrorHandler = (error) => {
     return true;
 };
 
-function setUpErrorHandler(app: App, baseHandler: ErrorHandler = () => false): void {
+function setUpErrorHandler(app: AppInstance, baseHandler: ErrorHandler = () => false): void {
     const errorHandler: ErrorHandler = (error) => baseHandler(error) || frameworkHandler(error);
 
     app.config.errorHandler = errorHandler;
@@ -34,6 +36,8 @@ export default definePlugin({
     async install(app, options) {
         setUpErrorHandler(app, options.handleError);
 
+        settings.forEach((setting) => App.addSetting(setting));
+
         await bootServices(app, services);
     },
 });

package/src/errors/settings/Debug.vue

@@ -0,0 +1,14 @@
+<template>
+    <Setting
+        title-id="debug-setting"
+        :title="$td('settings.debug', 'Debugging')"
+        :description="$td('settings.debugDescription', 'Enable debugging with [Eruda](https://eruda.liriliri.io/).')"
+    >
+        <Switch v-model="$errors.debug" aria-labelledby="debug-setting" />
+    </Setting>
+</template>
+
+<script setup lang="ts">
+import Setting from '@aerogel/core/components/ui/Setting.vue';
+import Switch from '@aerogel/core/components/ui/Switch.vue';
+</script>

package/src/errors/settings/index.ts

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