vanilla-jui 1.4.8 → 1.5.1

package/src/components/modal.ts

@@ -1,19 +1,17 @@
 import {
   createDeepStore,
   createEffect,
-  createRoot,
+  createSignal,
   flushSync,
   jsx,
-  onCleanup,
-  render,
   untrack,
 } from 'vanilla-signal';
 import { t } from 'vanilla-signal-i18n';
 
-import Component, {
-  type ComponentDOM,
-  type ComponentRuntime,
-} from '../core/Component.ts';
+import {
+  type FunctionalComponent,
+  defineComponent,
+} from '../core/component.ts';
 import locales from '../locales/index.ts';
 import { icon } from '../primitives/icons.ts';
 import { createLoading } from '../primitives/loading.ts';
@@ -22,29 +20,26 @@ import { joinClasses } from '../utilities/class-name.ts';
 import {
   all,
   q,
-  normalizeContentNodes,
   type RenderableContent,
 } from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
+import { createMotionGroup, createTransition } from '../core/motion.ts';
 import { isPlainObject } from '../utilities/object.ts';
+import { createPresence } from '../core/presence.ts';
 import {
   type ResolveSchema,
   resolveProps,
   validateParam,
 } from '../utilities/types.ts';
-import {
-  createForm,
-  type FormDataRecord,
-  type FormField,
-  type FormProps,
-} from './form.ts';
-
-const HIDE_DURATION = 300;
 
 type ModalTextInput = Partial<ModalText> & Record<string, unknown>;
-type ModalContent = RenderableContent<Modal>;
-type FormInstance = ReturnType<typeof createForm>;
-export type ModalMode = 'content' | 'form';
+type ModalContentResult = RenderableContent<Modal>;
+type ModalContent =
+  | ModalContentResult
+  | ((modal: Modal) => ModalContentResult | Promise<ModalContentResult>);
+interface ResolvedModalContent {
+  value: ModalContentResult;
+}
 
 export interface ModalClassNames {
   layout: string;
@@ -68,8 +63,9 @@ export interface ModalText {
 }
 
 export interface ModalProps extends Record<string, unknown> {
-  mode?: ModalMode | null;
   content?: ModalContent;
+  cache?: boolean;
+  ttl?: number;
   position?: string;
   showCancel?: boolean;
   showClose?: boolean;
@@ -80,11 +76,7 @@ export interface ModalProps extends Record<string, unknown> {
   onHide?: ((modal: Modal) => void | Promise<void>) | null;
   onHidden?: ((modal: Modal) => void | Promise<void>) | null;
   onConfirm?: ((modal: Modal) => void | Promise<void>) | null;
-  onSubmit?:
-    | ((data: FormDataRecord, modal: Modal) => void | Promise<void>)
-    | null;
   onCancel?: ((modal: Modal) => void | Promise<void>) | null;
-  fields?: readonly FormField[] | null;
   header?: boolean;
   footer?: boolean;
   id?: string | null;
@@ -94,8 +86,9 @@ export interface ModalProps extends Record<string, unknown> {
 }
 
 interface ResolvedModalProps extends Record<string, unknown> {
-  mode: ModalMode;
   content: ModalContent;
+  cache: boolean;
+  ttl: number;
   position: string;
   showCancel: boolean;
   showClose: boolean;
@@ -106,9 +99,7 @@ interface ResolvedModalProps extends Record<string, unknown> {
   onHide: NonNullable<ModalProps['onHide']> | null;
   onHidden: NonNullable<ModalProps['onHidden']> | null;
   onConfirm: NonNullable<ModalProps['onConfirm']> | null;
-  onSubmit: NonNullable<ModalProps['onSubmit']> | null;
   onCancel: NonNullable<ModalProps['onCancel']> | null;
-  fields: FormField[] | null;
   header: boolean;
   footer: boolean;
   id: string;
@@ -118,42 +109,19 @@ interface ResolvedModalProps extends Record<string, unknown> {
 }
 
 interface ModalState extends Record<string, unknown> {
-  mode: ModalMode;
   content: ModalContent;
-  fields: FormField[] | null;
   loading: boolean;
   processing: boolean;
   visible: boolean;
-  data: FormDataRecord | null;
-  extraData: FormDataRecord | null;
-}
-
-interface ModalDOM extends ComponentDOM {
-  root: HTMLElement | null;
-  modal: HTMLElement | null;
-  header: HTMLElement | null;
-  body: HTMLElement | null;
-  footer: HTMLElement | null;
-  form: FormInstance | null;
-  formContainer: HTMLElement | null;
-}
-
-interface ModalRuntime extends ComponentRuntime {
-  scrollLocked: boolean;
-  visibleApplied: boolean;
 }
 
 interface ModalCache {
-  initial: ResolvedModalProps | null;
-  fieldIds: Map<string, string> | null;
+  initial: ResolvedModalProps;
   previousActiveElement: HTMLElement | null;
-  formId: string;
-}
-
-interface ModalCleanupExtras {
-  visibility?: (() => void) | null;
-  view?: (() => void) | null;
-  hideTimer?: ReturnType<typeof setTimeout> | null;
+  content: ModalContentResult;
+  contentSource: ModalContent | null;
+  hasContent: boolean;
+  updatedAt: number;
 }
 
 type ModalStatePatch = Partial<ModalState>;
@@ -171,25 +139,9 @@ const DEFAULT_CLASS_NAMES: ModalClassNames = {
   confirmBtn: 'is-primary',
 };
 
-function cloneFields(
-  fields: readonly FormField[] | null | undefined
-): FormField[] {
-  if (!Array.isArray(fields)) return [];
-  return fields.map((field) => ({
-    ...field,
-    options: Array.isArray(field.options)
-      ? field.options.map(
-          (option: NonNullable<FormField['options']>[number]) =>
-            option && typeof option === 'object' ? { ...option } : option
-        )
-      : field.options,
-  }));
-}
-
 function cloneProps(props: ResolvedModalProps): ResolvedModalProps {
   return {
     ...props,
-    fields: Array.isArray(props.fields) ? cloneFields(props.fields) : null,
     text: { ...props.text },
     className: { ...props.className },
   };
@@ -197,23 +149,19 @@ function cloneProps(props: ResolvedModalProps): ResolvedModalProps {
 
 function createModalState(props: ResolvedModalProps): ModalState {
   return {
-    mode: props.mode,
     content: props.content,
-    fields: Array.isArray(props.fields) ? cloneFields(props.fields) : null,
     loading: false,
     processing: false,
     visible: false,
-    data: null,
-    extraData: null,
   };
 }
 
-function mergeExtraData(
-  data: FormDataRecord,
-  extraData: FormDataRecord | null
-): FormDataRecord {
-  if (!extraData || typeof extraData !== 'object') return data;
-  return Object.assign(data, extraData);
+function isPromiseLike<T>(value: unknown): value is PromiseLike<T> {
+  return !!value && typeof (value as PromiseLike<T>).then === 'function';
+}
+
+function normalizeTtl(ttl: number): number {
+  return Number.isFinite(ttl) ? Math.max(0, ttl) : 0;
 }
 
 const MODAL_CONTENT_RULE = {
@@ -235,18 +183,10 @@ const MODAL_TEXT_RULE = {
   },
 };
 
-const MODAL_FIELDS_RULE = { types: ['array', 'null'] };
 const MODAL_PROPS_SCHEMA = {
-  mode: {
-    default: null,
-    types: ['string', 'null'],
-    enum: ['content', 'form', null],
-    normalize: (value: unknown, context) => {
-      if (value != null) return value;
-      return Array.isArray(context.options.fields) ? 'form' : 'content';
-    },
-  },
   content: { default: '', ...MODAL_CONTENT_RULE },
+  cache: { default: false, type: 'boolean' },
+  ttl: { default: 0, type: 'number' },
   position: { default: 'center', type: 'string' },
   showCancel: { default: true, type: 'boolean' },
   showClose: { default: true, type: 'boolean' },
@@ -257,9 +197,7 @@ const MODAL_PROPS_SCHEMA = {
   onHide: { default: null, types: ['function', 'null'] },
   onHidden: { default: null, types: ['function', 'null'] },
   onConfirm: { default: null, types: ['function', 'null'] },
-  onSubmit: { default: null, types: ['function', 'null'] },
   onCancel: { default: null, types: ['function', 'null'] },
-  fields: { default: null, ...MODAL_FIELDS_RULE },
   header: { default: true, type: 'boolean' },
   footer: { default: true, type: 'boolean' },
   id: {
@@ -287,14 +225,10 @@ const MODAL_PROPS_SCHEMA = {
 } satisfies ResolveSchema<ModalProps>;
 
 const MODAL_STATE_SCHEMA = {
-  mode: { type: 'string', enum: ['content', 'form'] },
   content: MODAL_PROPS_SCHEMA.content,
-  fields: MODAL_PROPS_SCHEMA.fields,
   loading: { default: false, type: 'boolean' },
   processing: { default: false, type: 'boolean' },
   visible: { default: false, type: 'boolean' },
-  data: { default: null, types: ['object', 'null'] },
-  extraData: { default: null, types: ['object', 'null'] },
 };
 
 const MODAL_UPDATE_RULE = {
@@ -304,8 +238,9 @@ const MODAL_UPDATE_RULE = {
 function normalizeProps(input: ModalProps): ResolvedModalProps {
   const props = resolveProps(input, MODAL_PROPS_SCHEMA, 'Modal');
   return {
-    mode: props.mode as ModalMode,
     content: props.content as ModalContent,
+    cache: props.cache as boolean,
+    ttl: normalizeTtl(props.ttl as number),
     position: props.position as string,
     showCancel: props.showCancel as boolean,
     showClose: props.showClose as boolean,
@@ -316,11 +251,7 @@ function normalizeProps(input: ModalProps): ResolvedModalProps {
     onHide: props.onHide as ResolvedModalProps['onHide'],
     onHidden: props.onHidden as ResolvedModalProps['onHidden'],
     onConfirm: props.onConfirm as ResolvedModalProps['onConfirm'],
-    onSubmit: props.onSubmit as ResolvedModalProps['onSubmit'],
     onCancel: props.onCancel as ResolvedModalProps['onCancel'],
-    fields: Array.isArray(props.fields)
-      ? cloneFields(props.fields as FormField[])
-      : null,
     header: props.header as boolean,
     footer: props.footer as boolean,
     id: props.id as string,
@@ -333,512 +264,288 @@ function normalizeProps(input: ModalProps): ResolvedModalProps {
 let modalScrollLockCount = 0;
 let modalBodyOverflow = '';
 
-class ModalComponent extends Component<
+interface ModalActions {
+  show(): Modal;
+  hide(): Modal;
+  reset(): Modal;
+}
+
+export type Modal = FunctionalComponent<
   ResolvedModalProps,
   ModalState,
-  ModalDOM,
-  ModalCache
-> {
-  declare runtime: ModalRuntime;
-  declare state: ModalState;
-  declare cleanup: Component['cleanup'] & ModalCleanupExtras;
-
-  constructor(input: ModalProps = {}) {
-    const props = normalizeProps(input);
-    super(props);
-
-    this.dom.modal = null;
-    this.dom.header = null;
-    this.dom.body = null;
-    this.dom.footer = null;
-    this.dom.form = null;
-    this.dom.formContainer = null;
-
-    this.cleanup.visibility = null;
-    this.cleanup.view = null;
-    this.cleanup.hideTimer = null;
-
-    this.runtime.scrollLocked = false;
-    this.runtime.visibleApplied = false;
-
-    this.cache = {
-      initial: cloneProps(this.props),
-      fieldIds: new Map(),
-      previousActiveElement: null,
-      formId: `${this.props.id}_form`,
-    };
-
-    this.state = createDeepStore(createModalState(this.props)) as ModalState;
+  HTMLElement,
+  ModalActions
+>;
 
-    this.init(props);
-  }
-
-  protected override onInit(): void {
-    this.bindReactiveVisibility();
-  }
-
-  build(): this {
-    this.assertActive('build');
-    if (this.dom.root instanceof HTMLElement) return this;
-
-    const { id, className } = this.props;
-    const dialogChildren = [
-      jsx('div', {
-        className: className.header,
-        style: { display: this.props.header ? '' : 'none' },
-        ref: (element: HTMLElement) => {
-          this.dom.header = element;
-        },
-      }),
-      jsx('div', {
-        className: className.body,
-        ref: (element: HTMLElement) => {
-          this.dom.body = element;
-        },
-      }),
-      jsx('div', {
-        className: className.footer,
-        style: { display: this.props.footer ? '' : 'none' },
-        ref: (element: HTMLElement) => {
-          this.dom.footer = element;
-        },
-      }),
-    ];
-
-    const modal = jsx('div', {
-      className: () =>
-        joinClasses(
-          this.props.className.modal,
-          this.props.fullscreen && 'is-fullscreen'
-        ),
-      id,
-      role: 'document',
-      'data-modal-dialog': id,
-      ref: (element: HTMLElement) => {
-        this.dom.modal = element;
-      },
-      children: dialogChildren,
-    }) as HTMLElement;
-
-    const root = createPopup({
-      className: className.layout,
-      position: this.props.position,
-      component: 'modal',
-      labelledby: this.props.header ? `${id}_title` : '',
-      content: modal,
-    });
-    if (!this.props.header) {
-      root.setAttribute('aria-label', this.props.text.title || 'Modal');
+export function createModal(input: ModalProps = {}): Modal {
+  const props = normalizeProps(input);
+  const state = createDeepStore(createModalState(props)) as ModalState;
+  const cache: ModalCache = {
+    initial: cloneProps(props),
+    previousActiveElement: null,
+    content: null,
+    contentSource: null,
+    hasContent: false,
+    updatedAt: 0,
+  };
+  const events = new Map<string, () => void>();
+  const [motionVisible, setMotionVisible] = createSignal(false);
+  const [resolvedContent, setResolvedContent] =
+    createSignal<ResolvedModalContent>({ value: null });
+  let modal!: Modal;
+  let dialog: HTMLElement | null = null;
+  let loadingElement: HTMLDivElement | null = null;
+  let scrollLocked = false;
+  let contentLoadId = 0;
+
+  const isBusy = (): boolean => state.processing;
+  const isContentCacheValid = (source: ModalContent): boolean => {
+    if (!props.cache || !cache.hasContent || cache.contentSource !== source) {
+      return false;
     }
-
-    this.dom.root = root;
-    this.mountView();
-    return this;
-  }
-
-  mountView(): void {
-    if (this.cleanup.view || !this.dom.body) return;
-
-    this.cleanup.view = createRoot((dispose) => {
-      if (this.dom.header) {
-        const headerDispose = render(() => this.headerView(), this.dom.header);
-        onCleanup(headerDispose);
-      }
-
-      if (this.dom.body) {
-        const bodyDispose = render(() => this.bodyView(), this.dom.body);
-        onCleanup(bodyDispose);
-      }
-
-      if (this.dom.footer) {
-        const footerDispose = render(() => this.footerView(), this.dom.footer);
-        onCleanup(footerDispose);
-      }
-
-      this.bindReactiveLoading();
-      return dispose;
-    });
-  }
-
-  headerView(): () => (Node | null)[] | null {
-    return () => {
-      if (!this.props.header) return null;
-
-      return [
-        jsx('div', {
-          className: this.props.className.title,
-          id: `${this.props.id}_title`,
-          'aria-label': this.props.text.title,
-          children: this.props.text.title,
-        }) as Node,
-        this.props.showClose
-          ? (jsx('button', {
-              type: 'button',
-              className: joinClasses(
-                this.props.className.button,
-                this.props.className.closeBtn
-              ),
-              'data-action': 'close',
-              'aria-label': t('Close', locales),
-              children: icon('close'),
-            }) as Node)
-          : null,
-      ];
-    };
-  }
-
-  footerView(): () => (Node | null)[] | null {
-    return () => {
-      if (!this.props.footer) return null;
-
-      return [
-        this.props.showCancel
-          ? (jsx('button', {
-              type: 'button',
-              className: joinClasses(
-                this.props.className.button,
-                this.props.className.cancelBtn
-              ),
-              'data-action': 'cancel',
-              disabled: () => this.isBusy(),
-              children: this.props.text.cancel,
-            }) as Node)
-          : null,
-        jsx('button', {
-          type: () => (this.state.mode === 'form' ? 'submit' : 'button'),
-          className: joinClasses(
-            this.props.className.button,
-            this.props.className.confirmBtn
-          ),
-          'data-action': () =>
-            this.state.mode === 'form' ? 'submit' : 'confirm',
-          disabled: () => this.isBusy(),
-          children: this.props.text.confirm,
-        }) as Node,
-      ];
-    };
-  }
-
-  bodyView(): RenderableContent<Modal> {
-    if (this.state.mode === 'form') return this.formView();
-    this.destroyForm();
-    return this.contentView(this.state.content);
-  }
-
-  formView(): HTMLElement {
-    return jsx('div', {
-      ref: (element: HTMLElement) => {
-        this.mountForm(element);
+    const ttl = normalizeTtl(props.ttl);
+    return !ttl || Date.now() - cache.updatedAt <= ttl;
+  };
+  const setContentCache = (
+    source: ModalContent,
+    content: ModalContentResult
+  ): void => {
+    if (!props.cache) return;
+    cache.content = content;
+    cache.contentSource = source;
+    cache.hasContent = true;
+    cache.updatedAt = Date.now();
+  };
+  const clearContentCache = (): void => {
+    cache.content = null;
+    cache.contentSource = null;
+    cache.hasContent = false;
+    cache.updatedAt = 0;
+  };
+  const clearEvents = (): void => {
+    for (const dispose of events.values()) dispose();
+    events.clear();
+  };
+  const listen = (
+    key: string,
+    target: EventTarget,
+    type: string,
+    listener: EventListener
+  ): void => {
+    events.get(key)?.();
+    target.addEventListener(type, listener);
+    events.set(key, () => target.removeEventListener(type, listener));
+  };
+  const lockScroll = (): void => {
+    if (scrollLocked) return;
+    if (modalScrollLockCount === 0) {
+      modalBodyOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+    }
+    modalScrollLockCount += 1;
+    scrollLocked = true;
+  };
+  const unlockScroll = (): void => {
+    if (!scrollLocked) return;
+    modalScrollLockCount = Math.max(0, modalScrollLockCount - 1);
+    if (modalScrollLockCount === 0) {
+      document.body.style.overflow = modalBodyOverflow;
+      modalBodyOverflow = '';
+    }
+    scrollLocked = false;
+  };
+  const restoreFocus = (): void => {
+    const target = cache.previousActiveElement;
+    cache.previousActiveElement = null;
+    if (target && document.contains(target)) target.focus();
+  };
+  const motion = createMotionGroup(
+    createTransition(() => modal.element, {
+      keyframes: [{ opacity: 0 }, { opacity: 1 }],
+      options: {
+        duration: 220,
+        easing: 'ease',
       },
-    }) as HTMLElement;
-  }
-
-  mountForm(container: HTMLElement | null): void {
-    if (!container) return;
-    this.dom.formContainer = container;
-
-    const props = this.createFormProps();
-    if (this.dom.form) {
-      this.dom.form.setFields(props.fields || []);
-      if (
-        this.dom.form.dom.root &&
-        !container.contains(this.dom.form.dom.root)
-      ) {
-        container.appendChild(this.dom.form.dom.root);
+    }),
+    createTransition(() => dialog, {
+      keyframes: [
+        { opacity: 0, transform: 'scale(0.96)' },
+        { opacity: 1, transform: 'scale(1)' },
+      ],
+      options: {
+        duration: 220,
+        easing: 'ease',
+      },
+    })
+  );
+  const presence = createPresence({
+    elements: () => [modal.element, dialog],
+    mount: () => {
+      modal.mount(document.body);
+      lockScroll();
+    },
+    activate: () => setMotionVisible(true),
+    deactivate: () => setMotionVisible(false),
+    motion,
+    unmount: () => {
+      modal.unmount();
+      unlockScroll();
+      restoreFocus();
+    },
+  });
+  const syncLoadingElement = (): void => {
+    const busy = state.loading || state.processing;
+    if (busy) {
+      if (!loadingElement) loadingElement = createLoading();
+      if (dialog && loadingElement.parentElement !== dialog) {
+        dialog.append(loadingElement);
       }
       return;
     }
-
-    this.dom.form = createForm(props).build();
-    if (this.dom.form.dom.root) container.appendChild(this.dom.form.dom.root);
-  }
-
-  createFormProps(): FormProps {
-    return {
-      id: this.cache.formId,
-      fields: this.state.fields || [],
-      buttons: false,
-      onSubmit: (data) => this.handleFormSubmit(data),
-    };
-  }
-
-  destroyForm(): void {
-    this.dom.form?.destroy();
-    this.dom.form = null;
-    this.dom.formContainer = null;
-  }
-
-  contentView(content: ModalContent): Node[] {
-    return normalizeContentNodes(content, this);
-  }
-
-  bindReactiveLoading(): void {
-    let loading: HTMLElement | null = null;
-
-    createEffect(() => {
-      if (this.state.loading && !loading) {
-        loading = createLoading();
-        this.dom.modal?.appendChild(loading);
-      } else if (!this.state.loading && loading) {
-        loading.remove();
-        loading = null;
-      }
-    });
-
-    onCleanup(() => {
-      loading?.remove();
-      loading = null;
+    loadingElement?.remove();
+    loadingElement = null;
+  };
+  const setProcessing = (value: boolean): void => {
+    if (state.processing === value) return;
+    flushSync(() => {
+      state.processing = value;
     });
-  }
-
-  isBusy(): boolean {
-    return !!(this.state.loading || this.state.processing);
-  }
-
-  bindReactiveVisibility(): void {
-    this.cleanup.visibility = createRoot((dispose) => {
-      createEffect(() => {
-        const visible = !!this.state.visible;
-        untrack(() => this.applyVisibility(visible));
+  };
+  const finishProcessing = (): void => {
+    if (state.visible && presence.phase !== 'leaving') {
+      setProcessing(false);
+    }
+  };
+  const loadContent = (source: ModalContent = state.content): void => {
+    if (isContentCacheValid(source)) {
+      contentLoadId += 1;
+      flushSync(() => {
+        setResolvedContent({ value: cache.content });
+        state.loading = false;
       });
-      return dispose;
-    });
-  }
-
-  applyVisibility(visible: boolean): void {
-    if (visible === this.runtime.visibleApplied) return;
-    if (visible) {
-      this.showFromState();
       return;
     }
-    this.hideFromState();
-  }
-
-  showFromState(): void {
-    if (this.runtime.destroyed) {
-      throw new Error('Modal: The current instance has been destroyed.');
-    }
 
-    if (!this.dom.root) {
-      throw new Error('Modal.show: build() must be called before show().');
+    const loadId = ++contentLoadId;
+    if (typeof source !== 'function') {
+      clearContentCache();
+      flushSync(() => {
+        setResolvedContent({ value: source });
+        state.loading = false;
+      });
+      return;
     }
 
-    this.cancelHideTimer();
-    this.resetAnimationStyles();
-
-    const { onShow, onShown } = this.props;
-    void onShow?.(this);
-
-    this.cache.previousActiveElement =
-      document.activeElement instanceof HTMLElement
-        ? document.activeElement
-        : null;
-    if (this.dom.root && !this.dom.root.parentNode)
-      document.body.appendChild(this.dom.root);
-    this.lockScroll();
-    this.runtime.visibleApplied = true;
-
-    this.bindEvents(this.dom.root);
-    this.focusFirst();
-
-    void onShown?.(this);
-  }
-
-  hideFromState(): void {
-    if (!this.runtime.visibleApplied || !this.dom.root) return;
-
-    const { onHide, onHidden } = this.props;
-    void onHide?.(this);
-
-    this.runtime.visibleApplied = false;
-    this.clearEvents();
-
-    flushSync(() => {
-      this.state.loading = false;
-      this.state.extraData = null;
-      this.state.data = null;
-    });
-
-    if (this.dom.modal) {
-      this.dom.modal.style.transition = `opacity ${HIDE_DURATION}ms ease-out, transform ${HIDE_DURATION}ms ease-out`;
-      this.dom.modal.style.opacity = '0';
-      this.dom.modal.style.transform = 'scale(0.3)';
+    let result: ModalContentResult | Promise<ModalContentResult>;
+    try {
+      result = source(modal);
+    } catch (error) {
+      console.error('Modal.content error:', error);
+      flushSync(() => {
+        setResolvedContent({ value: null });
+        state.loading = false;
+      });
+      return;
     }
-
-    this.cancelHideTimer();
-    this.cleanup.hideTimer = setTimeout(
-      () => this.finishHide(onHidden),
-      HIDE_DURATION
-    );
-  }
-
-  bindEvents(root: Element | null): void {
-    this.clearEvents();
-    this.bindOverlayCloseEvent(root);
-    this.bindDocumentKeyEvent();
-    this.bindInsideEvent();
-  }
-
-  bindOverlayCloseEvent(root: Element | null): void {
-    if (!root) return;
-    this.cleanup.events.on('bg', root, 'click', (event) => {
-      if (this.props.bgClose && event.target === root) {
-        this.hide();
-      }
-    });
-  }
-
-  bindDocumentKeyEvent(): void {
-    this.cleanup.events.on('keydown', document, 'keydown', (event) => {
-      if (!this.state.visible || !(event instanceof KeyboardEvent)) return;
-
-      if (event.key === 'Escape' && this.props.escClose) {
-        event.preventDefault();
-        this.hide();
-        return;
-      }
-
-      if (event.key === 'Tab') this.trapFocus(event);
-    });
-  }
-
-  bindInsideEvent(): void {
-    if (!this.dom.modal) return;
-
-    this.cleanup.events.on('inside', this.dom.modal, 'click', (event) => {
-      const target = event.target instanceof Element ? event.target : null;
-      const actionEl = target?.closest<HTMLElement>('[data-action]');
-      if (!actionEl || !this.dom.modal?.contains(actionEl)) return;
-
-      const action = actionEl.dataset.action;
-      if (action === 'cancel' || action === 'close') {
-        void this.handleCancel();
-        return;
-      }
-
-      if (action === 'submit') {
-        this.requestSubmit();
-        return;
-      }
-
-      if (action === 'confirm') {
-        if (this.state.mode === 'form') {
-          this.requestSubmit();
-          return;
-        }
-        void this.handleConfirm();
-      }
-    });
-  }
-
-  clearEvents(): void {
-    this.cleanup.events.clear();
-  }
-
-  requestSubmit(): void {
-    if (this.state.mode !== 'form' || !this.dom.form) {
-      void this.handleConfirm();
+    if (!isPromiseLike<ModalContentResult>(result)) {
+      setContentCache(source, result);
+      flushSync(() => {
+        setResolvedContent({ value: result });
+        state.loading = false;
+      });
       return;
     }
 
-    this.dom.form.requestSubmit();
-  }
-
-  async handleFormSubmit(formData: FormDataRecord): Promise<void> {
-    if (this.isBusy()) return;
-
-    const data = mergeExtraData(formData, this.state.extraData);
-
     flushSync(() => {
-      this.state.data = data;
+      state.loading = true;
+      setResolvedContent({ value: null });
     });
-
-    await this.handleSubmit(data);
-  }
-
-  async handleConfirm(): Promise<void> {
-    if (this.isBusy()) return;
-
-    flushSync(() => {
-      this.state.processing = true;
-    });
-
+    void Promise.resolve(result)
+      .then((content) => {
+        if (modal.runtime.destroyed || loadId !== contentLoadId) return;
+        setContentCache(source, content);
+        flushSync(() => {
+          setResolvedContent({ value: content });
+        });
+      })
+      .catch((error) => {
+        if (modal.runtime.destroyed || loadId !== contentLoadId) return;
+        console.error('Modal.content error:', error);
+        flushSync(() => {
+          setResolvedContent({ value: null });
+        });
+      })
+      .finally(() => {
+        if (!modal.runtime.destroyed && loadId === contentLoadId) {
+          flushSync(() => {
+            state.loading = false;
+          });
+        }
+      });
+  };
+  const handleConfirm = (): void => {
+    if (isBusy()) return;
+    let result: void | Promise<void> | undefined;
     try {
-      await Promise.resolve(this.props.onConfirm?.(this));
+      result = props.onConfirm?.(modal);
     } catch (error) {
       console.error('Modal.onConfirm error:', error);
-    } finally {
-      if (this.state) {
-        flushSync(() => {
-          this.state.processing = false;
-        });
-      }
+      return;
     }
-  }
-
-  async handleCancel(): Promise<void> {
-    if (this.isBusy()) return;
-
-    flushSync(() => {
-      this.state.processing = true;
-    });
-
+    if (!isPromiseLike<void>(result)) return;
+    setProcessing(true);
+    void Promise.resolve(result)
+      .catch((error) => {
+        console.error('Modal.onConfirm error:', error);
+      })
+      .finally(() => {
+        if (!modal.runtime.destroyed) finishProcessing();
+      });
+  };
+  const handleCancel = (): void => {
+    if (isBusy()) return;
+    let result: void | Promise<void> | undefined;
     try {
-      await Promise.resolve(this.props.onCancel?.(this));
-      this.hide();
+      result = props.onCancel?.(modal);
     } catch (error) {
       console.error('Modal.onCancel error:', error);
-    } finally {
-      if (this.state) {
-        flushSync(() => {
-          this.state.processing = false;
-        });
-      }
+      return;
     }
-  }
-
-  async handleSubmit(data: FormDataRecord): Promise<void> {
-    if (!this.props.onSubmit) return;
-
-    flushSync(() => {
-      this.state.processing = true;
-    });
-
-    try {
-      await Promise.resolve(this.props.onSubmit(data, this));
-      this.state.extraData = null;
-    } catch (error) {
-      console.error('Modal.onSubmit error:', error);
-    } finally {
-      if (this.state) {
-        flushSync(() => {
-          this.state.processing = false;
-        });
-      }
+    if (!isPromiseLike<void>(result)) {
+      modal.hide();
+      return;
     }
-  }
-
-  trapFocus(event: KeyboardEvent): void {
-    if (!this.dom.modal) return;
-    const focusable = Array.from(
-      all<HTMLElement>(
-        'a[href], button:not([disabled]):not([data-action=close]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
-        this.dom.modal
-      )
+    setProcessing(true);
+    void Promise.resolve(result)
+      .then(() => {
+        if (modal.runtime.destroyed) return;
+        modal.hide();
+      })
+      .catch((error) => {
+        console.error('Modal.onCancel error:', error);
+      })
+      .finally(() => {
+        if (!modal.runtime.destroyed) {
+          finishProcessing();
+        }
+      });
+  };
+  const trapFocus = (event: KeyboardEvent): void => {
+    if (!dialog) return;
+    const focusable = all<HTMLElement>(
+      'a[href], button:not([disabled]):not([data-action=close]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      dialog
     ).filter(
       (element) =>
         element.offsetParent !== null || element === document.activeElement
     );
-
-    if (focusable.length === 0) {
+    if (!focusable.length) {
       event.preventDefault();
-      this.dom.modal.focus();
+      dialog.focus();
       return;
     }
-
     const first = focusable[0];
     const last = focusable[focusable.length - 1];
-
     if (event.shiftKey && document.activeElement === first) {
       event.preventDefault();
       last?.focus();
@@ -846,192 +553,248 @@ class ModalComponent extends Component<
       event.preventDefault();
       first?.focus();
     }
-  }
-
-  focusFirst(): void {
-    if (!this.dom.modal) return;
-    const focusRoot = this.dom.form?.root || this.dom.modal;
-    const firstFocusable = q<HTMLElement>(
+  };
+  const focusFirst = (): void => {
+    if (!dialog) return;
+    const first = q<HTMLElement>(
       'input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]):not([data-action=close]), [tabindex]:not([tabindex="-1"])',
-      focusRoot
+      dialog
     );
-    if (firstFocusable) firstFocusable.focus();
+    if (first) first.focus();
     else {
-      this.dom.modal.setAttribute('tabindex', '-1');
-      this.dom.modal.focus();
-    }
-  }
-
-  lockScroll(): void {
-    if (this.runtime.scrollLocked) return;
-    if (modalScrollLockCount === 0) {
-      modalBodyOverflow = document.body.style.overflow;
-      document.body.style.overflow = 'hidden';
-    }
-    modalScrollLockCount += 1;
-    this.runtime.scrollLocked = true;
-  }
-
-  unlockScroll(): void {
-    if (!this.runtime.scrollLocked) return;
-    modalScrollLockCount = Math.max(0, modalScrollLockCount - 1);
-    if (modalScrollLockCount === 0) {
-      document.body.style.overflow = modalBodyOverflow;
-      modalBodyOverflow = '';
-    }
-    this.runtime.scrollLocked = false;
-  }
-
-  cancelHideTimer(): void {
-    if (!this.cleanup.hideTimer) return;
-    clearTimeout(this.cleanup.hideTimer);
-    this.cleanup.hideTimer = null;
-  }
-
-  resetAnimationStyles(): void {
-    if (!this.dom.modal) return;
-    this.dom.modal.style.removeProperty('transition');
-    this.dom.modal.style.removeProperty('opacity');
-    this.dom.modal.style.removeProperty('transform');
-  }
-
-  finishHide(onHidden: ResolvedModalProps['onHidden']): void {
-    this.cleanup.hideTimer = null;
-    this.dom.root?.remove();
-    this.resetAnimationStyles();
-    this.unlockScroll();
-    this.restoreFocus();
-    void onHidden?.(this);
-  }
-
-  restoreFocus(): void {
-    const target = this.cache.previousActiveElement;
-    this.cache.previousActiveElement = null;
-    if (
-      target &&
-      typeof target.focus === 'function' &&
-      document.contains(target)
-    ) {
-      target.focus();
-    }
-  }
-
-  assertActive(method: string): void {
-    if (this.runtime.destroyed) {
-      throw new Error(
-        `Modal.${method}: The current instance has been destroyed.`
-      );
-    }
-  }
-
-  protected override normalizeStatePatch(
-    patch: ModalStatePatch
-  ): ModalStatePatch {
-    const nextPatch: ModalStatePatch = { ...patch };
-    if (Object.hasOwn(nextPatch, 'fields')) {
-      nextPatch.fields = Array.isArray(nextPatch.fields)
-        ? cloneFields(nextPatch.fields)
-        : null;
+      dialog.setAttribute('tabindex', '-1');
+      dialog.focus();
     }
-    return nextPatch;
-  }
-
-  protected override validateStatePatch(patch: ModalStatePatch): void {
-    validateParam('state', patch, MODAL_UPDATE_RULE, 'Modal.setState');
-
-    for (const key of Object.keys(patch)) {
-      if (!Object.hasOwn(MODAL_STATE_SCHEMA, key)) {
-        throw new Error(
-          `Modal.setState: "${key}" is not a supported state key.`
-        );
-      }
-      validateParam(
-        key,
-        patch[key as keyof ModalStatePatch],
-        MODAL_STATE_SCHEMA[key as keyof typeof MODAL_STATE_SCHEMA],
-        'Modal.setState'
-      );
-    }
-  }
-
-  protected override afterSetState(patch: ModalStatePatch): void {
-    if (Object.hasOwn(patch, 'fields')) this.cache.fieldIds?.clear();
-    if (this.state.mode === 'form' && this.dom.form)
-      this.dom.form.setFields(this.createFormProps().fields || []);
-  }
-
-  show(): this {
-    this.assertActive('show');
-    if (!this.dom.root) {
+  };
+  const bindVisibleEvents = (): void => {
+    const root = modal.element;
+    if (!root || !dialog) return;
+    clearEvents();
+    listen('root', root, 'click', (event) => {
+      if (props.bgClose && !isBusy() && event.target === root) modal.hide();
+    });
+    listen('dialog', dialog, 'click', (event) => {
+      const target = event.target instanceof Element ? event.target : null;
+      const action =
+        target?.closest<HTMLElement>('[data-action]')?.dataset.action;
+      if (action === 'cancel' || action === 'close') handleCancel();
+      else if (action === 'confirm') handleConfirm();
+    });
+    listen('keyboard', document, 'keydown', (event) => {
+      if (!(event instanceof KeyboardEvent) || !state.visible) return;
+      if (event.key === 'Escape' && props.escClose && !isBusy()) {
+        event.preventDefault();
+        modal.hide();
+      } else if (event.key === 'Tab') trapFocus(event);
+    });
+  };
+  const showFromState = (): void => {
+    if (presence.phase === 'visible' || presence.phase === 'entering') return;
+    if (!modal.element) {
       throw new Error('Modal.show: build() must be called before show().');
     }
-    this.setState({
-      visible: true,
-    });
-    return this;
-  }
-
-  hide(): this {
-    this.assertActive('hide');
-    this.setState({
-      visible: false,
+    void props.onShow?.(modal);
+    cache.previousActiveElement =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    const entering = presence.enter();
+    bindVisibleEvents();
+    focusFirst();
+    void entering.then((completed) => {
+      if (completed && !modal.runtime.destroyed) void props.onShown?.(modal);
     });
-    return this;
-  }
-
-  reset(): this {
-    this.cache.fieldIds?.clear();
-    if (!this.cache.initial) return this;
-
-    this.setState({
-      mode: this.cache.initial.mode,
-      content: this.cache.initial.content,
-      fields: Array.isArray(this.cache.initial.fields)
-        ? cloneFields(this.cache.initial.fields)
-        : null,
-      loading: false,
-      processing: false,
-      data: null,
-      extraData: null,
+  };
+  const hideFromState = (): void => {
+    if (presence.phase === 'hidden' || presence.phase === 'leaving') return;
+    void props.onHide?.(modal);
+    clearEvents();
+    contentLoadId += 1;
+    void presence.leave().then((completed) => {
+      if (completed && !modal.runtime.destroyed) {
+        flushSync(() => {
+          state.loading = false;
+          state.processing = false;
+          if (!props.cache) setResolvedContent({ value: null });
+        });
+        void props.onHidden?.(modal);
+      }
     });
-    return this;
-  }
-
-  protected override onDestroy(): void {
-    const wasVisible = !!this.runtime.visibleApplied;
-    const { onHide, onHidden } = this.props;
-
-    if (wasVisible) void onHide?.(this);
-
-    this.cancelHideTimer();
-    this.clearEvents();
-    this.destroyForm();
-    this.unlockScroll();
-    this.cleanup.visibility?.();
-    this.cleanup.visibility = null;
-    this.cleanup.view?.();
-    this.cleanup.view = null;
-
-    this.dom.root?.remove();
-    if (wasVisible) void onHidden?.(this);
-
-    this.cache = {
-      initial: null,
-      fieldIds: null,
-      previousActiveElement: null,
-      formId: '',
-    };
-  }
-
-  override destroy(): this {
-    if (this.runtime.destroyed) return this;
-    super.destroy();
-    return this;
-  }
-}
+  };
 
-export type Modal = ModalComponent;
+  modal = defineComponent({
+    name: 'Modal',
+    props,
+    state,
+    actions: {
+      show() {
+        if (!modal.runtime.built) {
+          throw new Error('Modal.show: build() must be called before show().');
+        }
+        modal.setState('visible', true);
+        return modal;
+      },
+      hide() {
+        flushSync(() => {
+          state.visible = false;
+        });
+        return modal;
+      },
+      reset() {
+        modal.setState({
+          content: cache.initial.content,
+          loading: false,
+          processing: false,
+        });
+        clearContentCache();
+        setResolvedContent({ value: null });
+        return modal;
+      },
+    },
+    normalizeStatePatch(patch: ModalStatePatch) {
+      return {
+        ...patch,
+      };
+    },
+    validateStatePatch(patch: ModalStatePatch) {
+      validateParam('state', patch, MODAL_UPDATE_RULE, 'Modal.setState');
+      for (const key of Object.keys(patch)) {
+        if (!Object.hasOwn(MODAL_STATE_SCHEMA, key)) {
+          throw new Error(
+            `Modal.setState: "${key}" is not a supported state key.`
+          );
+        }
+        validateParam(
+          key,
+          patch[key as keyof ModalStatePatch],
+          MODAL_STATE_SCHEMA[key as keyof typeof MODAL_STATE_SCHEMA],
+          'Modal.setState'
+        );
+      }
+    },
+    view: () => {
+      dialog = jsx('div', {
+        className: joinClasses(
+          props.className.modal,
+          props.fullscreen ? 'is-fullscreen' : ''
+        ),
+        id: props.id,
+        role: 'document',
+        'data-modal-dialog': props.id,
+        'data-mount': () => (motionVisible() ? 'true' : 'false'),
+        children: [
+          jsx('div', {
+            className: props.className.header,
+            hidden: () => !props.header || state.loading,
+            children: () =>
+              props.header && !state.loading
+                ? [
+                  jsx('div', {
+                    className: props.className.title,
+                    id: `${props.id}_title`,
+                    'aria-label': props.text.title,
+                    children: props.text.title,
+                  }),
+                  props.showClose
+                    ? jsx('button', {
+                        type: 'button',
+                        className: joinClasses(
+                          props.className.button,
+                          props.className.closeBtn
+                        ),
+                        'data-action': 'close',
+                        'aria-label': t('Close', locales),
+                        disabled: isBusy,
+                        children: icon('close'),
+                      })
+                    : null,
+                ]
+              : null,
+          }),
+          jsx('div', {
+            className: props.className.body,
+            'data-modal-body': '',
+            children: () => {
+              return resolvedContent().value;
+            },
+          }),
+          jsx('div', {
+            className: props.className.footer,
+            hidden: () => !props.footer || state.loading,
+            children: () =>
+              props.footer && !state.loading
+                ? [
+                  props.showCancel
+                    ? jsx('button', {
+                        type: 'button',
+                        className: joinClasses(
+                          props.className.button,
+                          props.className.cancelBtn
+                        ),
+                        'data-action': 'cancel',
+                        disabled: isBusy,
+                        children: props.text.cancel,
+                      })
+                    : null,
+                  jsx('button', {
+                    type: 'button',
+                    className: joinClasses(
+                      props.className.button,
+                      props.className.confirmBtn
+                    ),
+                    'data-action': 'confirm',
+                    disabled: isBusy,
+                    children: props.text.confirm,
+                  }),
+                ]
+              : null,
+          }),
+        ],
+      }) as HTMLElement;
+      const root = createPopup({
+        className: props.className.layout,
+        position: props.position,
+        component: 'modal',
+        labelledby: props.header ? `${props.id}_title` : '',
+        content: dialog,
+      });
+      root.setAttribute('data-mount', 'false');
+      if (!props.header)
+        root.setAttribute('aria-label', props.text.title || 'Modal');
+      createEffect(() => {
+        root.setAttribute('data-mount', motionVisible() ? 'true' : 'false');
+      });
+      createEffect(syncLoadingElement);
+      createEffect(() => {
+        const visible = state.visible;
+        untrack(() => (visible ? showFromState() : hideFromState()));
+      });
+      createEffect(() => {
+        const visible = state.visible;
+        const content = state.content;
+        untrack(() => {
+          if (visible) loadContent(content);
+          else {
+            contentLoadId += 1;
+          }
+        });
+        void content;
+      });
+      return root;
+    },
+    onDestroy() {
+      const wasVisible = presence.phase !== 'hidden';
+      if (wasVisible) void props.onHide?.(modal);
+      presence.cancel();
+      clearEvents();
+      unlockScroll();
+      restoreFocus();
+      loadingElement?.remove();
+      loadingElement = null;
+      dialog = null;
+      if (wasVisible) void props.onHidden?.(modal);
+    },
+  }) as Modal;
 
-export function createModal(input: ModalProps = {}): Modal {
-  return new ModalComponent(input);
+  return modal;
 }