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

package/src/components/headless/forms/AGHeadlessInputError.vue

@@ -7,8 +7,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { injectReactiveOrFail } from '@/utils/vue';
-import { translateWithDefault } from '@/lang/utils';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import { translateWithDefault } from '@aerogel/core/lang/utils';
 
 import type { IAGHeadlessInput } from './AGHeadlessInput';
 

package/src/components/headless/forms/AGHeadlessInputInput.vue

@@ -4,19 +4,25 @@
         ref="$input"
         :name="name"
         :type="type"
-        :value="value"
+        :required="input.required ?? undefined"
         :aria-invalid="input.errors ? 'true' : 'false'"
-        :aria-describedby="input.errors ? `${input.id}-error` : undefined"
+        :aria-describedby="
+            input.errors ? `${input.id}-error` : input.description ? `${input.id}-description` : undefined
+        "
         :checked="checked"
         @input="update"
     >
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 
-import { injectReactiveOrFail, stringProp } from '@/utils';
-import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
+import { injectReactiveOrFail, stringProp } from '@aerogel/core/utils/vue';
+import type { __SetsElement } from '@aerogel/core/components/contracts/shared';
+import type { FormFieldValue } from '@aerogel/core/forms/Form';
+import type { IAGHeadlessInput } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
+
+import { onFormFocus } from './composition';
 
 const props = defineProps({
     type: stringProp('text'),
@@ -42,6 +48,37 @@ function update() {
         return;
     }
 
-    input.update(props.type === 'checkbox' ? $input.value.checked : $input.value.value);
+    input.update(getValue());
 }
+
+function getValue(): FormFieldValue | null {
+    if (!$input.value) {
+        return null;
+    }
+
+    switch (props.type) {
+        case 'checkbox':
+            return $input.value.checked;
+        case 'date':
+            return $input.value.valueAsDate;
+        default:
+            return $input.value.value;
+    }
+}
+
+onFormFocus(input, () => $input.value?.focus());
+watchEffect(() => (input as unknown as __SetsElement).__setElement($input.value));
+watchEffect(() => {
+    if (!$input.value) {
+        return;
+    }
+
+    if (props.type === 'date') {
+        $input.value.valueAsDate = value.value as Date;
+
+        return;
+    }
+
+    $input.value.value = value.value as string;
+});
 </script>

package/src/components/headless/forms/AGHeadlessInputLabel.vue

@@ -9,7 +9,7 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue';
 
-import { injectReactiveOrFail } from '@/utils/vue';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
 
 import type { IAGHeadlessInput } from './AGHeadlessInput';
 

package/src/components/headless/forms/AGHeadlessInputTextArea.vue

@@ -0,0 +1,43 @@
+<template>
+    <textarea
+        :id="input.id"
+        ref="$textArea"
+        :name="name"
+        :required="input.required ?? undefined"
+        :value="value"
+        :aria-invalid="input.errors ? 'true' : 'false'"
+        :aria-describedby="
+            input.errors ? `${input.id}-error` : input.description ? `${input.id}-description` : undefined
+        "
+        @input="update"
+    />
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue';
+
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { IAGHeadlessInput } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
+import type { __SetsElement } from '@aerogel/core/components/contracts/shared';
+
+import { onFormFocus } from './composition';
+
+const $textArea = ref<HTMLTextAreaElement>();
+const input = injectReactiveOrFail<IAGHeadlessInput>(
+    'input',
+    '<AGHeadlessInputTextArea> must be a child of a <AGHeadlessInput>',
+);
+const name = computed(() => input.name ?? undefined);
+const value = computed(() => input.value as string);
+
+function update() {
+    if (!$textArea.value) {
+        return;
+    }
+
+    input.update($textArea.value.value);
+}
+
+watchEffect(() => (input as unknown as __SetsElement).__setElement($textArea.value));
+onFormFocus(input, () => $textArea.value?.focus());
+</script>

package/src/components/headless/forms/AGHeadlessSelect.ts

@@ -1,9 +1,9 @@
 import type { ComputedRef, DeepReadonly, ExtractPropTypes, Ref } from 'vue';
 import type { Writable } from '@noeldemartin/utils';
 
-import { mixedProp, requiredArrayProp, stringProp } from '@/utils/vue';
-import { extractComponentProps } from '@/components/utils';
-import type { FormFieldValue } from '@/forms/Form';
+import { mixedProp, requiredArrayProp, stringProp } from '@aerogel/core/utils/vue';
+import { extractComponentProps } from '@aerogel/core/components/utils';
+import type { FormFieldValue } from '@aerogel/core/forms/Form';
 
 export interface IAGHeadlessSelect {
     id: string;

package/src/components/headless/forms/AGHeadlessSelect.vue

@@ -1,23 +1,20 @@
 <template>
-    <Listbox
-        v-slot="{ value, open, disabled }: ComponentProps"
-        :model-value="selectedOption"
-        @update:model-value="update($event)"
-    >
-        <slot :value="value" :open="open" :disabled="disabled" />
-    </Listbox>
+    <SelectRoot v-slot="{ open }: ComponentProps" :model-value="selectedOption" @update:model-value="update($event)">
+        <slot :model-value="modelValue" :open="open" />
+    </SelectRoot>
 </template>
 
 <script setup lang="ts">
 import { computed, inject, provide } from 'vue';
 import { toString, uuid } from '@noeldemartin/utils';
-import { Listbox } from '@headlessui/vue';
+import { SelectRoot } from 'reka-ui';
+import type { AcceptableValue } from 'reka-ui';
 
-import { mixedProp } from '@/utils/vue';
-import { translateWithDefault } from '@/lang/utils';
-import type Form from '@/forms/Form';
-import type { FormFieldValue } from '@/forms/Form';
-import type { ComponentProps } from '@/utils/vue';
+import { mixedProp } from '@aerogel/core/utils/vue';
+import { translateWithDefault } from '@aerogel/core/lang/utils';
+import type Form from '@aerogel/core/forms/Form';
+import type { FormFieldValue } from '@aerogel/core/forms/Form';
+import type { ComponentProps } from '@aerogel/core/utils/vue';
 
 import { useSelectEmits, useSelectProps } from './AGHeadlessSelect';
 import type { IAGHeadlessSelect } from './AGHeadlessSelect';
@@ -40,7 +37,9 @@ const renderText = computed(() => {
 });
 const form = inject<Form | null>('form', null);
 const noSelectionText = computed(() => props.noSelectionText ?? translateWithDefault('select.noSelection', '-'));
-const selectedOption = computed(() => (form && props.name ? form.getFieldValue(props.name) : props.modelValue));
+const selectedOption = computed(
+    () => (form && props.name ? form.getFieldValue(props.name) : props.modelValue) as AcceptableValue,
+);
 const errors = computed(() => {
     if (!form || !props.name) {
         return null;
@@ -49,7 +48,8 @@ const errors = computed(() => {
     return form.errors[props.name] ?? null;
 });
 
-function update(value: FormFieldValue) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function update(value: any) {
     if (form && props.name) {
         form.setFieldValue(props.name, value);
 

package/src/components/headless/forms/AGHeadlessSelectError.vue

@@ -7,8 +7,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { injectReactiveOrFail } from '@/utils/vue';
-import { translateWithDefault } from '@/lang/utils';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import { translateWithDefault } from '@aerogel/core/lang/utils';
 
 import type { IAGHeadlessSelect } from './AGHeadlessSelect';
 

package/src/components/headless/forms/AGHeadlessSelectOption.vue

@@ -1,31 +1,23 @@
 <template>
-    <ListboxOption v-slot="{ active, selected, disabled }: ComponentProps" :value="value" as="template">
-        <slot :active="active" :selected="selected" :disabled="disabled">
-            <li
-                :class="{
-                    [activeClass ?? 'active']: active,
-                    [inactiveClass ?? 'inactive']: !active,
-                    [selectedClass ?? 'selected']: selected,
-                    [unselectedClass ?? 'unselected']: !selected,
-                }"
-            >
+    <SelectItem :value="value" as="template">
+        <SelectItemText>
+            <slot>
                 {{ select.renderText(value) }}
-            </li>
-        </slot>
-    </ListboxOption>
+            </slot>
+        </SelectItemText>
+    </SelectItem>
 </template>
 
 <script setup lang="ts">
-import { ListboxOption } from '@headlessui/vue';
+import { SelectItem, SelectItemText } from 'reka-ui';
 
-import { injectReactiveOrFail, requiredMixedProp, stringProp } from '@/utils/vue';
-import type { ComponentProps } from '@/utils/vue';
-import type { FormFieldValue } from '@/forms/Form';
+import { injectReactiveOrFail, requiredMixedProp, stringProp } from '@aerogel/core/utils/vue';
 
 import type { IAGHeadlessSelect } from './AGHeadlessSelect';
 
 defineProps({
-    value: requiredMixedProp<FormFieldValue>(),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: requiredMixedProp<any>(),
     selectedClass: stringProp(),
     unselectedClass: stringProp(),
     activeClass: stringProp(),

package/src/components/headless/forms/AGHeadlessSelectOptions.vue

@@ -0,0 +1,19 @@
+<template>
+    <SelectPortal>
+        <SelectContent :class="classes">
+            <SelectViewport>
+                <slot />
+            </SelectViewport>
+        </SelectContent>
+    </SelectPortal>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { SelectContent, SelectPortal, SelectViewport } from 'reka-ui';
+
+import { stringProp } from '@aerogel/core/utils/vue';
+
+const props = defineProps({ class: stringProp('') });
+const classes = computed(() => props.class);
+</script>

package/src/components/headless/forms/AGHeadlessSelectTrigger.vue

@@ -0,0 +1,25 @@
+<template>
+    <SelectTrigger>
+        <SelectValue>
+            <slot>
+                <span :class="textClass">{{ select?.buttonText }}</span>
+            </slot>
+            <slot name="icon" />
+        </SelectValue>
+    </SelectTrigger>
+</template>
+
+<script setup lang="ts">
+import { SelectTrigger, SelectValue } from 'reka-ui';
+
+import { injectReactiveOrFail, stringProp } from '@aerogel/core/utils/vue';
+
+import type { IAGHeadlessSelect } from './AGHeadlessSelect';
+
+defineProps({ textClass: stringProp() });
+
+const select = injectReactiveOrFail<IAGHeadlessSelect>(
+    'select',
+    '<AGHeadlessSelectTrigger> must be a child of a <AGHeadlessSelect>',
+);
+</script>

package/src/components/headless/forms/composition.ts

@@ -0,0 +1,10 @@
+import { inject, onUnmounted } from 'vue';
+
+import type Form from '@aerogel/core/forms/Form';
+
+export function onFormFocus(input: { name: string | null }, listener: () => unknown): void {
+    const form = inject<Form | null>('form', null);
+    const stop = form?.on('focus', (name) => input.name === name && listener());
+
+    onUnmounted(() => stop?.());
+}

package/src/components/headless/forms/index.ts

@@ -1,14 +1,17 @@
+export * from './composition';
+export * from './AGHeadlessButton';
 export * from './AGHeadlessInput';
 export * from './AGHeadlessSelect';
 export * from './AGHeadlessSelectOption';
 export { default as AGHeadlessButton } from './AGHeadlessButton.vue';
 export { default as AGHeadlessInput } from './AGHeadlessInput.vue';
+export { default as AGHeadlessInputDescription } from './AGHeadlessInputDescription.vue';
 export { default as AGHeadlessInputError } from './AGHeadlessInputError.vue';
 export { default as AGHeadlessInputInput } from './AGHeadlessInputInput.vue';
 export { default as AGHeadlessInputLabel } from './AGHeadlessInputLabel.vue';
+export { default as AGHeadlessInputTextArea } from './AGHeadlessInputTextArea.vue';
 export { default as AGHeadlessSelect } from './AGHeadlessSelect.vue';
-export { default as AGHeadlessSelectButton } from './AGHeadlessSelectButton.vue';
+export { default as AGHeadlessSelectTrigger } from './AGHeadlessSelectTrigger.vue';
 export { default as AGHeadlessSelectError } from './AGHeadlessSelectError.vue';
-export { default as AGHeadlessSelectLabel } from './AGHeadlessSelectLabel.vue';
 export { default as AGHeadlessSelectOption } from './AGHeadlessSelectOption.vue';
-export { default as AGHeadlessSelectOptions } from './AGHeadlessSelectOptions';
+export { default as AGHeadlessSelectOptions } from './AGHeadlessSelectOptions.vue';

package/src/components/headless/modals/AGHeadlessModal.ts

@@ -1,34 +1,33 @@
 import { computed } from 'vue';
-import type { ExtractPropTypes, Ref } from 'vue';
+import type { Ref } from 'vue';
 
-import { booleanProp, stringProp } from '@/utils';
-import { extractComponentProps } from '@/components/utils';
-import type { IAGModal } from '@/components/modals/AGModal';
+import { booleanProp, stringProp } from '@aerogel/core/utils/vue';
+import { extractComponentProps } from '@aerogel/core/components/utils';
+import type { ComponentPropDefinitions } from '@aerogel/core/components/utils';
+import type { ComponentProps } from '@aerogel/core/utils/vue';
+import type { IModal, IModalProps } from '@aerogel/core/components/contracts/Modal';
 
-export interface IAGHeadlessModal extends IAGModal {}
+export interface IAGHeadlessModal extends IModal {}
 
 export interface IAGHeadlessModalDefaultSlotProps {
     close(result?: unknown): Promise<void>;
 }
 
-export const modalProps = {
-    cancellable: booleanProp(true),
-    title: stringProp(),
-};
-
-export function useModalProps(): typeof modalProps {
-    return modalProps;
+export function extractModalProps<T extends IModalProps>(props: T): ComponentProps<IModalProps> {
+    return extractComponentProps(props, modalProps());
 }
 
-export function extractModalProps<T extends ExtractPropTypes<typeof modalProps>>(
-    props: T,
-): Pick<T, keyof typeof modalProps> {
-    return extractComponentProps(props, modalProps);
+export function modalProps(): ComponentPropDefinitions<IModalProps> {
+    return {
+        cancellable: booleanProp(true),
+        description: stringProp(),
+        title: stringProp(),
+    };
 }
 
-export function useModalExpose($modal: Ref<IAGHeadlessModal | undefined>): IAGModal {
+export function modalExpose($modal: Ref<IAGHeadlessModal | undefined>): IModal {
     return {
-        close: async () => $modal.value?.close(),
         cancellable: computed(() => !!$modal.value?.cancellable),
+        close: async () => $modal.value?.close(),
     };
 }

package/src/components/headless/modals/AGHeadlessModal.vue

@@ -1,23 +1,25 @@
 <template>
-    <Dialog ref="$root" :open="true" @close="cancellable && close()">
-        <slot :close="close" />
-    </Dialog>
+    <DialogRoot ref="$root" :open="true" @update:open="cancellable && close()">
+        <DialogPortal>
+            <slot :close="close" />
+        </DialogPortal>
+    </DialogRoot>
 </template>
 
 <script setup lang="ts">
 import { ref, toRef } from 'vue';
-import { Dialog } from '@headlessui/vue';
+import { DialogPortal, DialogRoot } from 'reka-ui';
 import type { VNode } from 'vue';
 
-import Events from '@/services/Events';
-import { useEvent } from '@/utils/composition/events';
-import { injectReactiveOrFail } from '@/utils/vue';
-import type { IAGModalContext } from '@/components/modals/AGModalContext';
+import Events from '@aerogel/core/services/Events';
+import { useEvent } from '@aerogel/core/utils/composition/events';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { IAGModalContext } from '@aerogel/core/components/modals/AGModalContext';
 
-import { useModalProps } from './AGHeadlessModal';
+import { modalProps } from './AGHeadlessModal';
 import type { IAGHeadlessModal, IAGHeadlessModalDefaultSlotProps } from './AGHeadlessModal';
 
-const props = defineProps(useModalProps());
+const props = defineProps(modalProps());
 const $root = ref<{ $el?: HTMLElement } | null>(null);
 const hidden = ref(true);
 const closed = ref(false);

package/src/components/headless/modals/AGHeadlessModalContent.vue

@@ -0,0 +1,25 @@
+<template>
+    <DialogContent>
+        <slot />
+
+        <AGModalContext v-if="childModal" :child-index="childIndex + 1" :modal="childModal" />
+    </DialogContent>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { DialogContent } from 'reka-ui';
+
+import UI from '@aerogel/core/ui/UI';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { IAGModalContext } from '@aerogel/core/components/modals/AGModalContext';
+
+import AGModalContext from '../../modals/AGModalContext.vue';
+
+const { childIndex } = injectReactiveOrFail<IAGModalContext>(
+    'modal',
+    'could not obtain modal reference from <AGHeadlessModalContent>, ' +
+        'did you render this component manually? Show it using $ui.openModal() instead',
+);
+const childModal = computed(() => UI.modals[childIndex] ?? null);
+</script>

package/src/components/headless/modals/index.ts

@@ -1,4 +1,5 @@
+export { DialogTitle as AGHeadlessModalTitle } from 'reka-ui';
+
 export * from './AGHeadlessModal';
 export { default as AGHeadlessModal } from './AGHeadlessModal.vue';
-export { default as AGHeadlessModalPanel } from './AGHeadlessModalPanel.vue';
-export { default as AGHeadlessModalTitle } from './AGHeadlessModalTitle.vue';
+export { default as AGHeadlessModalContent } from './AGHeadlessModalContent.vue';

package/src/components/headless/snackbars/index.ts

@@ -1,9 +1,9 @@
 import type { ExtractPropTypes } from 'vue';
 import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
 
-import UI from '@/ui/UI';
-import { arrayProp, enumProp, requiredStringProp } from '@/utils/vue';
-import { Colors } from '@/components/constants';
+import UI from '@aerogel/core/ui/UI';
+import { arrayProp, enumProp, requiredStringProp } from '@aerogel/core/utils/vue';
+import { Colors } from '@aerogel/core/components/constants';
 import { objectWithout } from '@noeldemartin/utils';
 
 export { default as AGHeadlessSnackbar } from './AGHeadlessSnackbar.vue';

package/src/components/index.ts

@@ -3,7 +3,9 @@ import AGAppOverlays from './AGAppOverlays.vue';
 
 export { AGAppLayout, AGAppOverlays };
 
+export * from './composition';
 export * from './constants';
+export * from './contracts';
 export * from './forms';
 export * from './headless';
 export * from './lib';

package/src/components/lib/AGErrorMessage.vue

@@ -5,9 +5,9 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { requiredObjectProp } from '@/utils/vue';
-import { getErrorMessage } from '@/errors/utils';
-import type { ErrorSource } from '@/errors/Errors.state';
+import { requiredObjectProp } from '@aerogel/core/utils/vue';
+import { getErrorMessage } from '@aerogel/core/errors/utils';
+import type { ErrorSource } from '@aerogel/core/errors/Errors.state';
 
 import AGMarkdown from './AGMarkdown.vue';
 

package/src/components/lib/AGMarkdown.vue

@@ -3,20 +3,23 @@
 </template>
 
 <script setup lang="ts">
-import { computed, h } from 'vue';
+import { computed, h, useAttrs } from 'vue';
+import { isInstanceOf } from '@noeldemartin/utils';
 
-import { renderMarkdown } from '@/utils/markdown';
-import { booleanProp, objectProp, stringProp } from '@/utils/vue';
-import { translate } from '@/lang';
+import { renderMarkdown } from '@aerogel/core/utils/markdown';
+import { booleanProp, mixedProp, objectProp, stringProp } from '@aerogel/core/utils/vue';
+import { translate } from '@aerogel/core/lang';
 
 const props = defineProps({
     as: stringProp(),
     inline: booleanProp(),
     langKey: stringProp(),
-    langParams: objectProp<Record<string, unknown>>(),
+    langParams: mixedProp<number | Record<string, unknown>>(),
     text: stringProp(),
+    actions: objectProp<Record<string, () => unknown>>(),
 });
 
+const attrs = useAttrs();
 const markdown = computed(() => props.text ?? (props.langKey && translate(props.langKey, props.langParams ?? {})));
 const html = computed(() => {
     if (!markdown.value) {
@@ -32,5 +35,20 @@ const html = computed(() => {
     return renderedHtml;
 });
 const root = () =>
-    h(props.as ?? (props.inline ? 'span' : 'div'), { class: props.inline ? '' : 'prose', innerHTML: html.value });
+    h(props.as ?? (props.inline ? 'span' : 'div'), {
+        innerHTML: html.value,
+        onClick,
+        ...attrs,
+        class: `${attrs.class ?? ''} ${props.inline ? '' : 'prose'}`,
+    });
+
+async function onClick(event: Event) {
+    const { target } = event;
+
+    if (isInstanceOf(target, HTMLElement) && target.dataset.markdownAction) {
+        props.actions?.[target.dataset.markdownAction]?.();
+
+        return;
+    }
+}
 </script>

package/src/components/lib/AGMeasured.vue

@@ -1,5 +1,5 @@
 <template>
-    <component :is="as" v-measure="() => (measured = true)" :class="{ '!invisible !absolute !w-auto': !measured }">
+    <component :is="as" v-measure="() => (measured = true)" :class="{ 'invisible! absolute! w-auto!': !measured }">
         <slot />
     </component>
 </template>
@@ -7,9 +7,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-import { stringProp } from '@/utils/vue';
+import { stringProp } from '@aerogel/core/utils/vue';
 
 defineProps({ as: stringProp('span') });
 
+// TODO use v-measure.css
 const measured = ref(false);
 </script>

package/src/components/lib/AGProgressBar.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="mt-1 h-2 w-full overflow-hidden rounded-full bg-gray-200">
+        <div :class="barClasses" :style="`transform:translateX(-${(1 - renderedProgress) * 100}%)`" />
+        <span class="sr-only">
+            {{
+                $td('ui.progress', '{progress}% complete', {
+                    progress: renderedProgress * 100,
+                })
+            }}
+        </span>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onUnmounted, ref, watch } from 'vue';
+
+import { numberProp, objectProp, stringProp } from '@aerogel/core/utils/vue';
+import type { Job } from '@aerogel/core/jobs';
+
+const props = defineProps({
+    progress: numberProp(),
+    barClass: stringProp(''),
+    job: objectProp<Job>(),
+});
+
+let cleanup: Function | undefined;
+const jobProgress = ref(0);
+const barClasses = computed(() => {
+    const classes = props.barClass ?? '';
+
+    return `size-full transition-transform duration-500 ease-linear ${
+        classes.includes('bg-') ? classes : `${classes} bg-gray-700`
+    }`;
+});
+const renderedProgress = computed(() => {
+    if (typeof props.progress === 'number') {
+        return props.progress;
+    }
+
+    return jobProgress.value;
+});
+
+watch(
+    () => props.job,
+    () => {
+        cleanup?.();
+
+        jobProgress.value = props.job?.progress ?? 0;
+        cleanup = props.job?.listeners.add({ onUpdated: (progress) => (jobProgress.value = progress) });
+    },
+    { immediate: true },
+);
+
+onUnmounted(() => cleanup?.());
+</script>

package/src/components/lib/AGStartupCrash.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="grid flex-grow place-items-center">
+    <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!') }}

package/src/components/lib/index.ts

@@ -2,4 +2,5 @@ export { default as AGErrorMessage } from './AGErrorMessage.vue';
 export { default as AGLink } from './AGLink.vue';
 export { default as AGMarkdown } from './AGMarkdown.vue';
 export { default as AGMeasured } from './AGMeasured.vue';
+export { default as AGProgressBar } from './AGProgressBar.vue';
 export { default as AGStartupCrash } from './AGStartupCrash.vue';