@aerogel/core 0.0.0-next.bde642c4a8096c5fc3d5e676c2115da23f4bf1d8 → 0.0.0-next.c2e6acc000e97a1020c2e232678563c53884dd0e

package/src/components/headless/{forms/AGHeadlessInputDescription.vue → HeadlessInputDescription.vue}

@@ -1,6 +1,6 @@
 <template>
     <slot :id="`${input.id}-description`">
-        <AGMarkdown
+        <Markdown
             v-if="show"
             v-bind="$attrs"
             :id="`${input.id}-description`"
@@ -12,16 +12,15 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { injectReactiveOrFail } from '@/utils/vue';
-
-import AGMarkdown from '../../lib/AGMarkdown.vue';
-import type { IAGHeadlessInput } from './AGHeadlessInput';
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 
 defineOptions({ inheritAttrs: false });
 
-const input = injectReactiveOrFail<IAGHeadlessInput>(
+const input = injectReactiveOrFail<InputExpose>(
     'input',
-    '<AGHeadlessInputDescription> must be a child of a <AGHeadlessInput>',
+    '<HeadlessInputDescription> must be a child of a <HeadlessInput>',
 );
 const text = computed(() => (typeof input.description === 'string' ? input.description : ''));
 const show = computed(() => !!input.description);

package/src/components/headless/{forms/AGHeadlessInputError.vue → HeadlessInputError.vue}

@@ -7,15 +7,11 @@
 <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 { InputExpose } from '@aerogel/core/components/contracts/Input';
 
-import type { IAGHeadlessInput } from './AGHeadlessInput';
-
-const input = injectReactiveOrFail<IAGHeadlessInput>(
-    'input',
-    '<AGHeadlessInputError> must be a child of a <AGHeadlessInput>',
-);
+const input = injectReactiveOrFail<InputExpose>('input', '<HeadlessInputError> must be a child of a <HeadlessInput>');
 const errorMessage = computed(() => {
     if (!input.errors) {
         return null;

package/src/components/headless/{forms/AGHeadlessInputInput.vue → HeadlessInputInput.vue}

@@ -4,6 +4,7 @@
         ref="$input"
         :name="name"
         :type="type"
+        :required="input.required ?? undefined"
         :aria-invalid="input.errors ? 'true' : 'false'"
         :aria-describedby="
             input.errors ? `${input.id}-error` : input.description ? `${input.id}-description` : undefined
@@ -16,26 +17,18 @@
 <script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue';
 
-import { injectReactiveOrFail, stringProp } from '@/utils/vue';
-import type { __SetsElement } from '@/components/interfaces';
-import type { FormFieldValue } from '@/forms/Form';
-import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
-
-import { onFormFocus } from './composition';
-
-const props = defineProps({
-    type: stringProp('text'),
-});
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import { onFormFocus } from '@aerogel/core/components/utils';
+import type { FormFieldValue } from '@aerogel/core/forms/FormController';
+import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 
+const { type = 'text' } = defineProps<{ type?: string }>();
 const $input = ref<HTMLInputElement>();
-const input = injectReactiveOrFail<IAGHeadlessInput>(
-    'input',
-    '<AGHeadlessInputInput> must be a child of a <AGHeadlessInput>',
-);
+const input = injectReactiveOrFail<InputExpose>('input', '<HeadlessInputInput> must be a child of a <HeadlessInput>');
 const name = computed(() => input.name ?? undefined);
 const value = computed(() => input.value);
 const checked = computed(() => {
-    if (props.type !== 'checkbox') {
+    if (type !== 'checkbox') {
         return;
     }
 
@@ -55,7 +48,7 @@ function getValue(): FormFieldValue | null {
         return null;
     }
 
-    switch (props.type) {
+    switch (type) {
         case 'checkbox':
             return $input.value.checked;
         case 'date':
@@ -66,18 +59,17 @@ function getValue(): FormFieldValue | null {
 }
 
 onFormFocus(input, () => $input.value?.focus());
-watchEffect(() => (input as unknown as __SetsElement).__setElement($input.value));
 watchEffect(() => {
     if (!$input.value) {
         return;
     }
 
-    if (props.type === 'date') {
+    if (type === 'date') {
         $input.value.valueAsDate = value.value as Date;
 
         return;
     }
 
-    $input.value.value = value.value as string;
+    $input.value.value = (value.value as string) ?? null;
 });
 </script>

package/src/components/headless/{forms/AGHeadlessInputLabel.vue → HeadlessInputLabel.vue}

@@ -9,14 +9,10 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue';
 
-import { injectReactiveOrFail } from '@/utils/vue';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 
-import type { IAGHeadlessInput } from './AGHeadlessInput';
-
-const input = injectReactiveOrFail<IAGHeadlessInput>(
-    'input',
-    '<AGHeadlessInputLabel> must be a child of a <AGHeadlessInput>',
-);
+const input = injectReactiveOrFail<InputExpose>('input', '<HeadlessInputLabel> must be a child of a <HeadlessInput>');
 const slots = useSlots();
 const show = computed(() => !!(input.label || slots.default));
 </script>

package/src/components/headless/{forms/AGHeadlessInputTextArea.vue → HeadlessInputTextArea.vue}

@@ -3,6 +3,7 @@
         :id="input.id"
         ref="$textArea"
         :name="name"
+        :required="input.required ?? undefined"
         :value="value"
         :aria-invalid="input.errors ? 'true' : 'false'"
         :aria-describedby="
@@ -13,18 +14,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue';
+import { computed, ref } from 'vue';
 
-import { injectReactiveOrFail } from '@/utils/vue';
-import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
-import type { __SetsElement } from '@/components/interfaces';
-
-import { onFormFocus } from './composition';
+import { onFormFocus } from '@aerogel/core/components/utils';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 
 const $textArea = ref<HTMLTextAreaElement>();
-const input = injectReactiveOrFail<IAGHeadlessInput>(
+const input = injectReactiveOrFail<InputExpose>(
     'input',
-    '<AGHeadlessInputTextArea> must be a child of a <AGHeadlessInput>',
+    '<HeadlessInputTextArea> must be a child of a <HeadlessInput>',
 );
 const name = computed(() => input.name ?? undefined);
 const value = computed(() => input.value as string);
@@ -37,6 +36,5 @@ function update() {
     input.update($textArea.value.value);
 }
 
-watchEffect(() => (input as unknown as __SetsElement).__setElement($textArea.value));
 onFormFocus(input, () => $textArea.value?.focus());
 </script>

package/src/components/headless/{modals/AGHeadlessModal.vue → HeadlessModal.vue}

@@ -1,29 +1,30 @@
 <template>
-    <Dialog ref="$root" :open="true" @close="cancellable && close()">
-        <slot :close="close" />
-    </Dialog>
+    <DialogRoot ref="$root" :open="true" @update:open="persistent || close()">
+        <DialogPortal>
+            <slot :close="close" />
+        </DialogPortal>
+    </DialogRoot>
 </template>
 
 <script setup lang="ts">
-import { ref, toRef } from 'vue';
-import { Dialog } from '@headlessui/vue';
-import type { VNode } from 'vue';
+import { ref } from 'vue';
+import { DialogPortal, DialogRoot } from 'reka-ui';
 
-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 { UIModalContext } from '@aerogel/core/ui/UI.state';
+import type { ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
 
-import { useModalProps } from './AGHeadlessModal';
-import type { IAGHeadlessModal, IAGHeadlessModalDefaultSlotProps } from './AGHeadlessModal';
+defineProps<ModalProps>();
+defineSlots<ModalSlots>();
 
-const props = defineProps(useModalProps());
 const $root = ref<{ $el?: HTMLElement } | null>(null);
 const hidden = ref(true);
 const closed = ref(false);
-const { modal } = injectReactiveOrFail<IAGModalContext>(
+const { modal } = injectReactiveOrFail<UIModalContext>(
     'modal',
-    'could not obtain modal reference from <AGHeadlessModal>, ' +
+    'could not obtain modal reference from <HeadlessModal>, ' +
         'did you render this component manually? Show it using $ui.openModal() instead',
 );
 
@@ -80,7 +81,4 @@ useEvent('show-modal', async ({ id }) => {
 
     await show();
 });
-
-defineSlots<{ default(props: IAGHeadlessModalDefaultSlotProps): VNode[] }>();
-defineExpose<IAGHeadlessModal>({ close, cancellable: toRef(props, 'cancellable') });
 </script>

package/src/components/headless/HeadlessModalContent.vue

@@ -0,0 +1,24 @@
+<template>
+    <DialogContent>
+        <slot />
+
+        <ModalContext 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 ModalContext from '@aerogel/core/components/ui/ModalContext.vue';
+import UI from '@aerogel/core/ui/UI';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { UIModalContext } from '@aerogel/core/ui/UI.state';
+
+const { childIndex = 0 } = injectReactiveOrFail<UIModalContext>(
+    'modal',
+    'could not obtain modal reference from <HeadlessModalContent>, ' +
+        'did you render this component manually? Show it using $ui.openModal() instead',
+);
+const childModal = computed(() => UI.modals[childIndex] ?? null);
+</script>

package/src/components/headless/HeadlessModalOverlay.vue

@@ -0,0 +1,12 @@
+<template>
+    <DialogOverlay v-bind="props">
+        <slot />
+    </DialogOverlay>
+</template>
+
+<script setup lang="ts">
+import { DialogOverlay } from 'reka-ui';
+import type { DialogOverlayProps } from 'reka-ui';
+
+const props = defineProps<DialogOverlayProps>();
+</script>

package/src/components/headless/HeadlessModalTitle.vue

@@ -0,0 +1,12 @@
+<template>
+    <DialogTitle v-bind="props">
+        <slot />
+    </DialogTitle>
+</template>
+
+<script setup lang="ts">
+import { DialogTitle } from 'reka-ui';
+import type { DialogTitleProps } from 'reka-ui';
+
+const props = defineProps<DialogTitleProps>();
+</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/FormController';
 
 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 FormController from '@aerogel/core/forms/FormController';
+import type { FormFieldValue } from '@aerogel/core/forms/FormController';
+import type { ComponentProps } from '@aerogel/core/utils/vue';
 
 import { useSelectEmits, useSelectProps } from './AGHeadlessSelect';
 import type { IAGHeadlessSelect } from './AGHeadlessSelect';
@@ -38,9 +35,11 @@ const renderText = computed(() => {
 
     return (option: FormFieldValue) => toString(option);
 });
-const form = inject<Form | null>('form', null);
+const form = inject<FormController | 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

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

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

@@ -1,18 +1,8 @@
 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/index.ts

@@ -1,3 +1,14 @@
 export * from './forms';
-export * from './modals';
 export * from './snackbars';
+
+export { default as HeadlessButton } from './HeadlessButton.vue';
+export { default as HeadlessInput } from './HeadlessInput.vue';
+export { default as HeadlessInputDescription } from './HeadlessInputDescription.vue';
+export { default as HeadlessInputError } from './HeadlessInputError.vue';
+export { default as HeadlessInputInput } from './HeadlessInputInput.vue';
+export { default as HeadlessInputLabel } from './HeadlessInputLabel.vue';
+export { default as HeadlessInputTextArea } from './HeadlessInputTextArea.vue';
+export { default as HeadlessModal } from './HeadlessModal.vue';
+export { default as HeadlessModalContent } from './HeadlessModalContent.vue';
+export { default as HeadlessModalOverlay } from './HeadlessModalOverlay.vue';
+export { default as HeadlessModalTitle } from './HeadlessModalTitle.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

@@ -1,13 +1,13 @@
-import AGAppLayout from './AGAppLayout.vue';
-import AGAppOverlays from './AGAppOverlays.vue';
+import AppLayout from './AppLayout.vue';
+import AppOverlays from './AppOverlays.vue';
 
-export { AGAppLayout, AGAppOverlays };
+export { AppLayout, AppOverlays };
 
 export * from './composition';
 export * from './constants';
+export * from './contracts';
 export * from './forms';
 export * from './headless';
-export * from './interfaces';
 export * from './lib';
-export * from './modals';
 export * from './snackbars';
+export * from './ui';

package/src/components/lib/AGErrorMessage.vue

@@ -1,15 +1,15 @@
 <template>
-    <AGMarkdown :text="message" inline />
+    <Markdown :text="message" inline />
 </template>
 
 <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';
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
 
 const props = defineProps({ error: requiredObjectProp<ErrorSource>() });
 const message = computed(() => getErrorMessage(props.error));

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/AGStartupCrash.vue

@@ -1,10 +1,10 @@
 <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!') }}
             </h1>
-            <AGMarkdown
+            <Markdown
                 :text="
                     $td(
                         'startupCrash.message',
@@ -14,18 +14,18 @@
                 class="mt-4 text-center"
             />
             <div class="mt-4 flex flex-col space-y-4">
-                <AGButton color="danger" @click="$app.reload()">
+                <Button variant="danger" @click="$app.reload()">
                     {{ $td('startupCrash.reload', 'Try again') }}
-                </AGButton>
-                <AGButton color="danger" @click="$errors.inspect($errors.startupErrors)">
+                </Button>
+                <Button variant="danger" @click="$errors.inspect($errors.startupErrors)">
                     {{ $td('startupCrash.inspect', 'View error details') }}
-                </AGButton>
+                </Button>
             </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import AGMarkdown from './AGMarkdown.vue';
-import AGButton from '../forms/AGButton.vue';
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Button from '@aerogel/core/components/ui/Button.vue';
 </script>

package/src/components/lib/index.ts

@@ -1,5 +1,3 @@
 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 AGStartupCrash } from './AGStartupCrash.vue';