@aerogel/core 0.0.0-next.d7394c3aa6aac799b0971e63819a8713d05a5123 → 0.0.0-next.eed7a057cf5b844cd9f7fc6bda2d8df49fcd6736

package/package.json

@@ -1,51 +1,36 @@
 {
     "name": "@aerogel/core",
-    "description": "The Lightest Solid",
-    "version": "0.0.0-next.d7394c3aa6aac799b0971e63819a8713d05a5123",
-    "main": "dist/aerogel-core.cjs.js",
-    "module": "dist/aerogel-core.esm.js",
-    "types": "dist/aerogel-core.d.ts",
+    "version": "0.0.0-next.eed7a057cf5b844cd9f7fc6bda2d8df49fcd6736",
+    "type": "module",
     "sideEffects": false,
-    "scripts": {
-        "build": "rm dist -rf && npm run build:js && npm run build:types",
-        "build:js": "noeldemartin-build-javascript",
-        "build:types": "noeldemartin-build-types",
-        "histoire": "histoire dev",
-        "lint": "noeldemartin-lint src",
-        "publish-next": "noeldemartin-publish-next",
-        "test": "vitest --run",
-        "test:ci": "vitest --run --reporter verbose"
-    },
-    "engines": {
-        "node": ">=18.x"
-    },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/NoelDeMartin/aerogeljs.git"
+    "exports": {
+        "types": "./dist/aerogel-core.d.ts",
+        "default": "./dist/aerogel-core.js"
     },
-    "keywords": [
-        "javascript",
-        "framework",
-        "solid"
+    "files": [
+        "src",
+        "dist"
     ],
-    "author": "Noel De Martin",
     "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/NoelDeMartin/aerogeljs/issues"
+    "author": "Noel De Martin",
+    "repository": "github:NoelDeMartin/aerogel",
+    "scripts": {
+        "build": "vite build && ./scripts/fix-types.sh",
+        "lint": "noeldemartin-lint src",
+        "test": "vitest --run",
+        "test:ci": "vitest --run --reporter verbose",
+        "verify": "noeldemartin-verify"
     },
     "dependencies": {
         "@headlessui/vue": "^1.7.14",
-        "@noeldemartin/utils": "0.5.1-next.4fd89de2cbde6c7e1cfa4d5f9bdac234e9cd3d98",
-        "dompurify": "^3.0.3",
-        "marked": "^5.0.4",
+        "@noeldemartin/utils": "0.7.0-next.febf11f10be81ab8b5562e4fe2cddbd1929ac9ca",
+        "dompurify": "^3.2.4",
+        "marked": "^15.0.7",
         "pinia": "^2.1.6",
         "vue": "^3.3.0"
     },
     "devDependencies": {
         "@aerogel/vite": "*",
-        "@histoire/plugin-vue": "^0.17.6",
-        "@types/dompurify": "^3.0.2",
-        "@types/marked": "^5.0.0",
         "tailwindcss": "^3.3.5"
     },
     "eslintConfig": {

package/src/bootstrap/bootstrap.test.ts

@@ -1,10 +1,10 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { createApp } from 'vue';
-import { mock } from '@noeldemartin/utils';
+import { mock } from '@noeldemartin/testing';
 import type { Component } from 'vue';
 
-import Events from '@/services/Events';
-import initialFocus from '@/directives/initial-focus';
+import Events from '@aerogel/core/services/Events';
+import measure from '@aerogel/core/directives/measure';
 
 import { bootstrap } from './index';
 
@@ -48,10 +48,7 @@ describe('Aerogel', () => {
         await bootstrap(rootComponent);
 
         // Assert
-        expect(vi.mocked(createApp).mock.results[0]?.value.directive).toHaveBeenCalledWith(
-            'initial-focus',
-            initialFocus,
-        );
+        expect(vi.mocked(createApp).mock.results[0]?.value.directive).toHaveBeenCalledWith('measure', measure);
     });
 
 });

package/src/bootstrap/index.ts

@@ -1,21 +1,25 @@
 import { createApp } from 'vue';
-import type { App, Component } from 'vue';
-
-import directives from '@/directives';
-import errors from '@/errors';
-import Events from '@/services/Events';
-import lang from '@/lang';
-import services from '@/services';
-import testing from '@/testing';
-import ui from '@/ui';
-import { installPlugins } from '@/plugins';
-import type { AerogelOptions } from '@/bootstrap/options';
-
-export { AerogelOptions };
-
-export async function bootstrapApplication(app: App, options: AerogelOptions = {}): Promise<void> {
+import { isDevelopment } from '@noeldemartin/utils';
+import type { App as AppInstance, Component } from 'vue';
+
+import App from '@aerogel/core/services/App';
+import directives from '@aerogel/core/directives';
+import errors from '@aerogel/core/errors';
+import Events from '@aerogel/core/services/Events';
+import lang from '@aerogel/core/lang';
+import services from '@aerogel/core/services';
+import testing from '@aerogel/core/testing';
+import ui from '@aerogel/core/ui';
+import { installPlugins } from '@aerogel/core/plugins';
+import type { AerogelOptions } from '@aerogel/core/bootstrap/options';
+
+export type { AerogelOptions };
+
+export async function bootstrapApplication(app: AppInstance, options: AerogelOptions = {}): Promise<void> {
     const plugins = [testing, directives, errors, lang, services, ui, ...(options.plugins ?? [])];
 
+    App.instance = app;
+
     await installPlugins(plugins, app, options);
     await options.install?.(app);
     await Events.emit('application-ready');
@@ -24,6 +28,11 @@ export async function bootstrapApplication(app: App, options: AerogelOptions = {
 export async function bootstrap(rootComponent: Component, options: AerogelOptions = {}): Promise<void> {
     const app = createApp(rootComponent);
 
+    if (isDevelopment()) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (window as any).$aerogel = app;
+    }
+
     await bootstrapApplication(app, options);
 
     app.mount('#app');
@@ -32,7 +41,7 @@ export async function bootstrap(rootComponent: Component, options: AerogelOption
     await Events.emit('application-mounted');
 }
 
-declare module '@/services/Events' {
+declare module '@aerogel/core/services/Events' {
     export interface EventsPayload {
         'application-ready': void;
         'application-mounted': void;

package/src/bootstrap/options.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue';
 
-import type { Plugin } from '@/plugins';
+import type { Plugin } from '@aerogel/core/plugins';
 
 export interface AerogelOptions {
     plugins?: Plugin[];

package/src/components/AGAppLayout.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { UIComponents } from '@/ui/UI';
+import { UIComponents } from '@aerogel/core/ui/UI';
 
 import AGAppOverlays from './AGAppOverlays.vue';
 </script>

package/src/components/AGAppModals.vue

@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import UI from '@/ui/UI';
+import UI from '@aerogel/core/ui/UI';
 
 import AGModalContext from './modals/AGModalContext.vue';
 

package/src/components/AGAppOverlays.vue

@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-import { useEvent } from '@/utils/composition/events';
+import { useEvent } from '@aerogel/core/utils/composition/events';
 
 import AGAppModals from './AGAppModals.vue';
 import AGAppSnackbars from './AGAppSnackbars.vue';

package/src/components/composition.ts

@@ -1,7 +1,7 @@
 import { customRef } from 'vue';
 import type { Ref } from 'vue';
 
-import { getElement } from '@/components/interfaces';
+import { getElement } from '@aerogel/core/components/interfaces';
 
 export function elementRef(): Ref<HTMLElement | undefined> {
     return customRef((track, trigger) => {

package/src/components/forms/AGButton.vue

@@ -7,8 +7,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { enumProp } from '@/utils/vue';
-import { Colors } from '@/components/constants';
+import { enumProp } from '@aerogel/core/utils/vue';
+import { Colors } from '@aerogel/core/components/constants';
 
 import AGHeadlessButton from '../headless/forms/AGHeadlessButton.vue';
 

package/src/components/forms/AGCheckbox.vue

@@ -24,9 +24,10 @@
 </template>
 
 <script setup lang="ts">
-import { componentRef, stringProp } from '@/utils/vue';
+import { componentRef, stringProp } from '@aerogel/core/utils/vue';
 
-import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
+import { useInputEmits } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
+import type { IAGHeadlessInput } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
 
 import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
 import AGHeadlessInputError from '../headless/forms/AGHeadlessInputError.vue';
@@ -35,7 +36,7 @@ import AGHeadlessInputLabel from '../headless/forms/AGHeadlessInputLabel.vue';
 
 defineProps({ name: stringProp() });
 defineOptions({ inheritAttrs: false });
-defineEmits(['update:modelValue']);
+defineEmits(useInputEmits());
 
 const $input = componentRef<IAGHeadlessInput>();
 </script>

package/src/components/forms/AGForm.vue

@@ -7,8 +7,8 @@
 <script setup lang="ts">
 import { provide, watchEffect } from 'vue';
 
-import { objectProp } from '@/utils/vue';
-import type Form from '@/forms/Form';
+import { objectProp } from '@aerogel/core/utils/vue';
+import type Form from '@aerogel/core/forms/Form';
 
 let offSubmit: (() => void) | undefined;
 const props = defineProps({ form: objectProp<Form>() });

package/src/components/forms/AGInput.vue

@@ -4,6 +4,7 @@
         class="relative flex flex-col items-center"
         :class="className"
         v-bind="props"
+        @update:model-value="$emit('update:modelValue', $event)"
     >
         <AGHeadlessInputLabel class="sr-only" />
         <AGHeadlessInputInput
@@ -21,10 +22,10 @@
 </template>
 
 <script setup lang="ts">
-import { componentRef } from '@/utils/vue';
-import { useInputAttrs } from '@/utils/composition/forms';
-import { useInputProps } from '@/components/headless/forms/AGHeadlessInput';
-import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
+import { componentRef } from '@aerogel/core/utils/vue';
+import { useInputAttrs } from '@aerogel/core/utils/composition/forms';
+import { useInputEmits, useInputProps } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
+import type { IAGHeadlessInput } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
 
 import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
 import AGHeadlessInputDescription from '../headless/forms/AGHeadlessInputDescription.vue';
@@ -33,6 +34,7 @@ import AGHeadlessInputInput from '../headless/forms/AGHeadlessInputInput.vue';
 import AGHeadlessInputLabel from '../headless/forms/AGHeadlessInputLabel.vue';
 
 defineOptions({ inheritAttrs: false });
+defineEmits(useInputEmits());
 
 const props = defineProps(useInputProps());
 const $input = componentRef<IAGHeadlessInput>();

package/src/components/forms/AGSelect.vue

@@ -42,9 +42,9 @@
 <script setup lang="ts">
 import IconCheveronDown from '~icons/zondicons/cheveron-down';
 
-import { componentRef } from '@/utils/vue';
-import { useSelectEmits, useSelectProps } from '@/components/headless/forms/AGHeadlessSelect';
-import type { IAGHeadlessSelect } from '@/components/headless/forms/AGHeadlessSelect';
+import { componentRef } from '@aerogel/core/utils/vue';
+import { useSelectEmits, useSelectProps } from '@aerogel/core/components/headless/forms/AGHeadlessSelect';
+import type { IAGHeadlessSelect } from '@aerogel/core/components/headless/forms/AGHeadlessSelect';
 
 import AGHeadlessSelect from '../headless/forms/AGHeadlessSelect.vue';
 import AGHeadlessSelectButton from '../headless/forms/AGHeadlessSelectButton.vue';

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

@@ -1,3 +1,3 @@
-import type { HasElement } from '@/components/interfaces';
+import type { HasElement } from '@aerogel/core/components/interfaces';
 
 export interface IAGHeadlessButton extends HasElement {}

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

@@ -8,8 +8,8 @@
 import { computed } from 'vue';
 import { objectWithoutEmpty } from '@noeldemartin/utils';
 
-import { booleanProp, objectProp, stringProp } from '@/utils/vue';
-import { elementRef } from '@/components/composition';
+import { booleanProp, objectProp, stringProp } from '@aerogel/core/utils/vue';
+import { elementRef } from '@aerogel/core/components/composition';
 
 import type { IAGHeadlessButton } from './AGHeadlessButton';
 

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

@@ -1,9 +1,10 @@
 import type { ComputedRef, DeepReadonly, ExtractPropTypes, Ref } from 'vue';
+import type { Writable } from '@noeldemartin/utils';
 
-import { mixedProp, stringProp } from '@/utils';
-import { extractComponentProps } from '@/components/utils';
-import type { FormFieldValue } from '@/forms/Form';
-import type { HasElement } from '@/components/interfaces';
+import { mixedProp, stringProp } from '@aerogel/core/utils';
+import { extractComponentProps } from '@aerogel/core/components/utils';
+import type { FormFieldValue } from '@aerogel/core/forms/Form';
+import type { HasElement } from '@aerogel/core/components/interfaces';
 
 export interface IAGHeadlessInput extends HasElement {
     id: string;
@@ -23,6 +24,12 @@ export const inputProps = {
     modelValue: mixedProp<FormFieldValue>([String, Number, Boolean]),
 };
 
+export const inputEmits = ['update:modelValue'] as const;
+
+export function useInputEmits(): Writable<typeof inputEmits> {
+    return [...inputEmits];
+}
+
 export function useInputProps(): typeof inputProps {
     return inputProps;
 }

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

@@ -9,9 +9,9 @@
 import { computed, inject, provide, readonly, ref } from 'vue';
 import { uuid } from '@noeldemartin/utils';
 
-import { stringProp } from '@/utils/vue';
-import type Form from '@/forms/Form';
-import type { __SetsElement } from '@/components/interfaces';
+import { stringProp } from '@aerogel/core/utils/vue';
+import type Form from '@aerogel/core/forms/Form';
+import type { __SetsElement } from '@aerogel/core/components/interfaces';
 
 import { useInputProps } from './AGHeadlessInput';
 import type { IAGHeadlessInput } from './AGHeadlessInput';

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

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

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

@@ -17,10 +17,10 @@
 <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 { injectReactiveOrFail, stringProp } from '@aerogel/core/utils/vue';
+import type { __SetsElement } from '@aerogel/core/components/interfaces';
+import type { FormFieldValue } from '@aerogel/core/forms/Form';
+import type { IAGHeadlessInput } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
 
 import { onFormFocus } from './composition';
 

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

@@ -16,9 +16,9 @@
 <script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue';
 
-import { injectReactiveOrFail } from '@/utils/vue';
-import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
-import type { __SetsElement } from '@/components/interfaces';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { IAGHeadlessInput } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
+import type { __SetsElement } from '@aerogel/core/components/interfaces';
 
 import { onFormFocus } from './composition';
 

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

@@ -13,11 +13,11 @@ import { computed, inject, provide } from 'vue';
 import { toString, uuid } from '@noeldemartin/utils';
 import { Listbox } from '@headlessui/vue';
 
-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';

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

@@ -10,8 +10,8 @@
 <script setup lang="ts">
 import { ListboxButton } from '@headlessui/vue';
 
-import { injectReactiveOrFail, stringProp } from '@/utils/vue';
-import type { ComponentProps } from '@/utils/vue';
+import { injectReactiveOrFail, stringProp } from '@aerogel/core/utils/vue';
+import type { ComponentProps } from '@aerogel/core/utils/vue';
 
 import type { IAGHeadlessSelect } from './AGHeadlessSelect';
 

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

@@ -10,8 +10,8 @@
 import { computed, useSlots } from 'vue';
 import { ListboxLabel } from '@headlessui/vue';
 
-import { injectReactiveOrFail } from '@/utils/vue';
-import type { ComponentProps } from '@/utils/vue';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { ComponentProps } from '@aerogel/core/utils/vue';
 
 import type { IAGHeadlessSelect } from './AGHeadlessSelect';
 

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

@@ -18,9 +18,9 @@
 <script setup lang="ts">
 import { ListboxOption } from '@headlessui/vue';
 
-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 { ComponentProps } from '@aerogel/core/utils/vue';
+import type { FormFieldValue } from '@aerogel/core/forms/Form';
 
 import type { IAGHeadlessSelect } from './AGHeadlessSelect';
 

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

@@ -1,6 +1,6 @@
 import { inject, onUnmounted } from 'vue';
 
-import type Form from '@/forms/Form';
+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);

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

@@ -1,9 +1,9 @@
 import { computed } from 'vue';
 import type { ExtractPropTypes, 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';
+import { extractComponentProps } from '@aerogel/core/components/utils';
+import type { IAGModal } from '@aerogel/core/components/modals/AGModal';
 
 export interface IAGHeadlessModal extends IAGModal {}
 
@@ -13,6 +13,7 @@ export interface IAGHeadlessModalDefaultSlotProps {
 
 export const modalProps = {
     cancellable: booleanProp(true),
+    inline: booleanProp(),
     title: stringProp(),
 };
 
@@ -28,7 +29,8 @@ export function extractModalProps<T extends ExtractPropTypes<typeof modalProps>>
 
 export function useModalExpose($modal: Ref<IAGHeadlessModal | undefined>): IAGModal {
     return {
-        close: async () => $modal.value?.close(),
+        inline: computed(() => !!$modal.value?.inline),
         cancellable: computed(() => !!$modal.value?.cancellable),
+        close: async () => $modal.value?.close(),
     };
 }

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

@@ -1,18 +1,23 @@
 <template>
-    <Dialog ref="$root" :open="true" @close="cancellable && close()">
+    <component
+        :is="rootComponent"
+        ref="$root"
+        :open="true"
+        @close="cancellable && close()"
+    >
         <slot :close="close" />
-    </Dialog>
+    </component>
 </template>
 
 <script setup lang="ts">
-import { ref, toRef } from 'vue';
+import { computed, ref, toRef } from 'vue';
 import { Dialog } from '@headlessui/vue';
 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 type { IAGHeadlessModal, IAGHeadlessModalDefaultSlotProps } from './AGHeadlessModal';
@@ -26,6 +31,7 @@ const { modal } = injectReactiveOrFail<IAGModalContext>(
     'could not obtain modal reference from <AGHeadlessModal>, ' +
         'did you render this component manually? Show it using $ui.openModal() instead',
 );
+const rootComponent = computed(() => (modal.properties.inline ? 'div' : Dialog));
 
 async function hide(): Promise<void> {
     if (!$root.value?.$el) {
@@ -82,5 +88,5 @@ useEvent('show-modal', async ({ id }) => {
 });
 
 defineSlots<{ default(props: IAGHeadlessModalDefaultSlotProps): VNode[] }>();
-defineExpose<IAGHeadlessModal>({ close, cancellable: toRef(props, 'cancellable') });
+defineExpose<IAGHeadlessModal>({ close, cancellable: toRef(props, 'cancellable'), inline: toRef(props, 'inline') });
 </script>