vanilla-jui 1.4.5 → 1.4.6

package/src/components/modal.ts

@@ -8,63 +8,55 @@ import {
   render,
   untrack,
 } from 'vanilla-signal';
+import { t } from 'vanilla-signal-i18n';
 
 import Component, {
   type ComponentDOM,
   type ComponentRuntime,
-  type ComponentUpdateOptions,
 } from '../core/Component.ts';
-import {
-  type ResolveSchema,
-  hasOwn,
-  isPlainObject,
-  randomId,
-  resolveProps,
-  validateParam,
-} from '../utilities/core.ts';
+import locales from '../locales/index.ts';
+import { icon } from '../primitives/icons.ts';
+import { createLoading } from '../primitives/loading.ts';
+import { createPopup } from '../primitives/popup.ts';
+import { joinClasses } from '../utilities/class-name.ts';
 import {
   all,
   q,
-  createLoading,
-  isRenderableContent,
   normalizeContentNodes,
   type RenderableContent,
 } from '../utilities/dom.ts';
+import { randomId } from '../utilities/id.ts';
+import { isPlainObject } from '../utilities/object.ts';
+import {
+  type ResolveSchema,
+  resolveProps,
+  validateParam,
+} from '../utilities/types.ts';
 import {
-  Form,
+  createForm,
   type FormDataRecord,
   type FormField,
   type FormProps,
 } from './form.ts';
-import { icon } from './icons.ts';
 
 const HIDE_DURATION = 300;
 
-type ModalStyle =
-  | string
-  | Record<string, string | number | null | undefined>
-  | null;
 type ModalTextInput = Partial<ModalText> & Record<string, unknown>;
 type ModalContent = RenderableContent<Modal>;
-type FlowDirection = 'next' | 'back';
+type FormInstance = ReturnType<typeof createForm>;
+export type ModalMode = 'content' | 'form';
 
 export interface ModalClassNames {
   layout: string;
   modal: string;
-  fullscreen: string;
   header: string;
   body: string;
   footer: string;
   title: string;
-  close: string;
-  cancel: string;
-  confirm: string;
+  closeBtn: string;
+  cancelBtn: string;
+  confirmBtn: string;
   button: string;
-  buttonIcon: string;
-  buttonGhost: string;
-  buttonPrimary: string;
-  buttonSmall: string;
-  formContainer: string;
 }
 
 export type ModalClassNameConfig = Partial<ModalClassNames>;
@@ -75,55 +67,13 @@ export interface ModalText {
   cancel: string;
 }
 
-interface FlowStep {
-  id?: string;
-  title?: RenderableContent<Modal>;
-  content?: ModalContent;
-  modal?: ModalFlowView | ModalFlowViewFactory;
-  view?: ModalFlowView | ModalFlowViewFactory;
-  [key: string]: unknown;
-}
-
-interface FlowSnapshot {
-  data?: Record<string, unknown> | null;
-  currentData?: Record<string, unknown> | null;
-  currentStep?: FlowStep;
-  [key: string]: unknown;
-}
-
-interface FlowLike {
-  currentStep?: FlowStep;
-  next: (
-    payload: FormDataRecord | null
-  ) => Promise<FlowSnapshot> | FlowSnapshot;
-  back: (
-    payload: FormDataRecord | null
-  ) => Promise<FlowSnapshot> | FlowSnapshot;
-  snapshot: () => FlowSnapshot;
-  reset?: () => void;
-  destroy?: () => void;
-}
-
-interface ModalFlowView extends Partial<ModalProps> {
-  [key: string]: unknown;
-}
-
-type ModalFlowViewFactory = (context: {
-  flow: FlowLike;
-  snapshot: FlowSnapshot | null;
-  step: FlowStep | undefined;
-  modal: Modal;
-  data: Record<string, unknown> | null;
-  currentData: Record<string, unknown> | null;
-}) => unknown;
-
 export interface ModalProps extends Record<string, unknown> {
+  mode?: ModalMode | null;
   content?: ModalContent;
   position?: string;
   showCancel?: boolean;
   showClose?: boolean;
   fullscreen?: boolean;
-  flow?: FlowLike | null;
   text?: ModalTextInput;
   onShow?: ((modal: Modal) => void | Promise<void>) | null;
   onShown?: ((modal: Modal) => void | Promise<void>) | null;
@@ -137,21 +87,19 @@ export interface ModalProps extends Record<string, unknown> {
   fields?: readonly FormField[] | null;
   header?: boolean;
   footer?: boolean;
-  style?: ModalStyle;
   id?: string | null;
   escClose?: boolean;
   bgClose?: boolean;
-  lazy?: boolean;
   className?: ModalClassNameConfig;
 }
 
 interface ResolvedModalProps extends Record<string, unknown> {
+  mode: ModalMode;
   content: ModalContent;
   position: string;
   showCancel: boolean;
   showClose: boolean;
   fullscreen: boolean;
-  flow: FlowLike | null;
   text: ModalText;
   onShow: NonNullable<ModalProps['onShow']> | null;
   onShown: NonNullable<ModalProps['onShown']> | null;
@@ -163,17 +111,18 @@ interface ResolvedModalProps extends Record<string, unknown> {
   fields: FormField[] | null;
   header: boolean;
   footer: boolean;
-  style: ModalStyle;
   id: string;
   escClose: boolean;
   bgClose: boolean;
-  lazy: boolean;
   className: ModalClassNames;
 }
 
-interface ModalState extends ResolvedModalProps {
+interface ModalState extends Record<string, unknown> {
+  mode: ModalMode;
+  content: ModalContent;
+  fields: FormField[] | null;
   loading: boolean;
-  submitting: boolean;
+  processing: boolean;
   visible: boolean;
   data: FormDataRecord | null;
   extraData: FormDataRecord | null;
@@ -185,7 +134,7 @@ interface ModalDOM extends ComponentDOM {
   header: HTMLElement | null;
   body: HTMLElement | null;
   footer: HTMLElement | null;
-  form: Form | null;
+  form: FormInstance | null;
   formContainer: HTMLElement | null;
 }
 
@@ -197,7 +146,6 @@ interface ModalRuntime extends ComponentRuntime {
 interface ModalCache {
   initial: ResolvedModalProps | null;
   fieldIds: Map<string, string> | null;
-  baseStyle: string;
   previousActiveElement: HTMLElement | null;
   formId: string;
 }
@@ -208,26 +156,19 @@ interface ModalCleanupExtras {
   hideTimer?: ReturnType<typeof setTimeout> | null;
 }
 
-type ModalPatch = Partial<ModalProps>;
 type ModalStatePatch = Partial<ModalState>;
 
 const DEFAULT_CLASS_NAMES: ModalClassNames = {
   layout: 'j-popup-layout',
   modal: 'j-modal',
-  fullscreen: 'is-fullscreen',
   header: 'modal-header',
   body: 'modal-body',
   footer: 'modal-footer',
   title: 'modal-title',
-  close: 'modal-close',
-  cancel: 'modal-cancel',
-  confirm: 'modal-confirm',
   button: 'j-button',
-  buttonIcon: 'is-icon',
-  buttonGhost: 'is-ghost',
-  buttonPrimary: 'is-primary',
-  buttonSmall: 'is-sm',
-  formContainer: 'modal-form-container',
+  closeBtn: 'is-icon is-sm is-ghost',
+  cancelBtn: 'is-ghost',
+  confirmBtn: 'is-primary',
 };
 
 function cloneFields(
@@ -254,66 +195,13 @@ function cloneProps(props: ResolvedModalProps): ResolvedModalProps {
   };
 }
 
-function isUpdateProps(value: unknown): value is ModalPatch {
-  return isPlainObject(value);
-}
-
-function isFlowLike(value: unknown): value is FlowLike | null {
-  return (
-    value == null ||
-    (typeof value === 'object' &&
-      typeof (value as Partial<FlowLike>).next === 'function' &&
-      typeof (value as Partial<FlowLike>).back === 'function' &&
-      typeof (value as Partial<FlowLike>).snapshot === 'function')
-  );
-}
-
-function hydrateFields(
-  fields: readonly FormField[] | null,
-  data: Record<string, unknown> | null | undefined
-): FormField[] | null {
-  if (!Array.isArray(fields) || !isPlainObject(data))
-    return fields ? cloneFields(fields) : null;
-
-  return fields.map((field) => {
-    if (!field?.name || !hasOwn(data, field.name)) return { ...field };
-    const value = data[field.name];
-
-    if (field.type === 'checkbox' || field.type === 'radio') {
-      const optionValue = field.value ?? 'on';
-      const checked = Array.isArray(value)
-        ? value.map(String).includes(String(optionValue))
-        : value === true || String(value) === String(optionValue);
-      return { ...field, checked };
-    }
-
-    return {
-      ...field,
-      value: Array.isArray(value)
-        ? value.map(String)
-        : (value as FormField['value']),
-    };
-  });
-}
-
-function createTextState(
-  props: Partial<ModalProps> | Partial<ResolvedModalProps>
-): ModalText {
-  const text = isPlainObject(props?.text) ? props.text : {};
-  return {
-    title: typeof text.title === 'string' ? text.title : 'Tip',
-    confirm: typeof text.confirm === 'string' ? text.confirm : 'Confirm',
-    cancel: typeof text.cancel === 'string' ? text.cancel : 'Cancel',
-  };
-}
-
 function createModalState(props: ResolvedModalProps): ModalState {
   return {
-    ...props,
+    mode: props.mode,
+    content: props.content,
     fields: Array.isArray(props.fields) ? cloneFields(props.fields) : null,
-    text: createTextState(props),
     loading: false,
-    submitting: false,
+    processing: false,
     visible: false,
     data: null,
     extraData: null,
@@ -328,33 +216,16 @@ function mergeExtraData(
   return Object.assign(data, extraData);
 }
 
-function clonePlainObject(value: unknown): ModalFlowView {
-  return isPlainObject(value) ? { ...value } : {};
-}
-
-function joinClasses(
-  ...classes: Array<string | false | null | undefined>
-): string {
-  return classes.filter(Boolean).join(' ');
-}
-
-function textValue(value: RenderableContent<Modal> | undefined): string {
-  return typeof value === 'string' || typeof value === 'number'
-    ? String(value)
-    : '';
-}
-
 const MODAL_CONTENT_RULE = {
-  validate: isRenderableContent,
-  message: 'expects string, number, Node, array, function or null.',
+  type: 'renderable',
 };
 
 const MODAL_TEXT_RULE = {
   default: {},
-  validate: (value: unknown) => isPlainObject(value),
-  message: 'expects an object with text fields.',
+  type: 'object',
+  plain: true,
   normalize: (value: unknown) => {
-    const text = isPlainObject(value) ? value : {};
+    const text = (isPlainObject(value) ? value : {}) as ModalTextInput;
     return {
       ...text,
       title: typeof text.title === 'string' ? text.title : 'Tip',
@@ -366,16 +237,20 @@ 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 },
   position: { default: 'center', type: 'string' },
   showCancel: { default: true, type: 'boolean' },
   showClose: { default: true, type: 'boolean' },
   fullscreen: { default: false, type: 'boolean' },
-  flow: {
-    default: null,
-    validate: isFlowLike,
-    message: 'expects a Flow instance or null.',
-  },
   text: MODAL_TEXT_RULE,
   onShow: { default: null, types: ['function', 'null'] },
   onShown: { default: null, types: ['function', 'null'] },
@@ -387,7 +262,6 @@ const MODAL_PROPS_SCHEMA = {
   fields: { default: null, ...MODAL_FIELDS_RULE },
   header: { default: true, type: 'boolean' },
   footer: { default: true, type: 'boolean' },
-  style: { default: null, types: ['string', 'null', 'object'] },
   id: {
     default: null,
     types: ['string', 'null'],
@@ -402,7 +276,6 @@ const MODAL_PROPS_SCHEMA = {
   },
   escClose: { default: false, type: 'boolean' },
   bgClose: { default: false, type: 'boolean' },
-  lazy: { default: false, type: 'boolean' },
   className: {
     default: DEFAULT_CLASS_NAMES,
     type: 'object',
@@ -414,36 +287,29 @@ const MODAL_PROPS_SCHEMA = {
 } satisfies ResolveSchema<ModalProps>;
 
 const MODAL_STATE_SCHEMA = {
-  ...MODAL_PROPS_SCHEMA,
+  mode: { type: 'string', enum: ['content', 'form'] },
+  content: MODAL_PROPS_SCHEMA.content,
+  fields: MODAL_PROPS_SCHEMA.fields,
   loading: { default: false, type: 'boolean' },
-  submitting: { 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_BLOCKED_KEYS = new Set(['id', 'lazy']);
-
-const MODAL_EXTRA_FIELDS_RULE = {
-  validate: (value: unknown) =>
-    !!value && typeof value === 'object' && !Array.isArray(value),
-  message: 'expects an object.',
-};
-
 const MODAL_UPDATE_RULE = {
-  validate: isUpdateProps,
-  message: 'expects a props object.',
+  type: 'plainObject',
 };
 
 function normalizeProps(input: ModalProps): ResolvedModalProps {
   const props = resolveProps(input, MODAL_PROPS_SCHEMA, 'Modal');
   return {
+    mode: props.mode as ModalMode,
     content: props.content as ModalContent,
     position: props.position as string,
     showCancel: props.showCancel as boolean,
     showClose: props.showClose as boolean,
     fullscreen: props.fullscreen as boolean,
-    flow: props.flow as FlowLike | null,
     text: props.text as ModalText,
     onShow: props.onShow as ResolvedModalProps['onShow'],
     onShown: props.onShown as ResolvedModalProps['onShown'],
@@ -457,11 +323,9 @@ function normalizeProps(input: ModalProps): ResolvedModalProps {
       : null,
     header: props.header as boolean,
     footer: props.footer as boolean,
-    style: props.style as ModalStyle,
     id: props.id as string,
     escClose: props.escClose as boolean,
     bgClose: props.bgClose as boolean,
-    lazy: props.lazy as boolean,
     className: props.className as ModalClassNames,
   };
 }
@@ -469,11 +333,15 @@ function normalizeProps(input: ModalProps): ResolvedModalProps {
 let modalScrollLockCount = 0;
 let modalBodyOverflow = '';
 
-export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
+class ModalComponent extends Component<
+  ResolvedModalProps,
+  ModalState,
+  ModalDOM,
+  ModalCache
+> {
   declare runtime: ModalRuntime;
   declare state: ModalState;
   declare cleanup: Component['cleanup'] & ModalCleanupExtras;
-  cache: ModalCache;
 
   constructor(input: ModalProps = {}) {
     const props = normalizeProps(input);
@@ -496,7 +364,6 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
     this.cache = {
       initial: cloneProps(this.props),
       fieldIds: new Map(),
-      baseStyle: '',
       previousActiveElement: null,
       formId: `${this.props.id}_form`,
     };
@@ -508,33 +375,30 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
 
   protected override onInit(): void {
     this.bindReactiveVisibility();
-    if (!this.state.lazy) this.buildRoot();
   }
 
-  buildRoot(): HTMLElement {
-    if (this.root instanceof HTMLElement) return this.root;
+  build(): this {
+    this.assertActive('build');
+    if (this.dom.root instanceof HTMLElement) return this;
 
-    const { id, className } = this.state;
+    const { id, className } = this.props;
     const dialogChildren = [
       jsx('div', {
         className: className.header,
-        'data-modal-header': id,
-        style: () => ({ display: this.state.header ? '' : 'none' }),
+        style: { display: this.props.header ? '' : 'none' },
         ref: (element: HTMLElement) => {
           this.dom.header = element;
         },
       }),
       jsx('div', {
         className: className.body,
-        'data-modal-body': id,
         ref: (element: HTMLElement) => {
           this.dom.body = element;
         },
       }),
       jsx('div', {
         className: className.footer,
-        'data-modal-footer': id,
-        style: () => ({ display: this.state.footer ? '' : 'none' }),
+        style: { display: this.props.footer ? '' : 'none' },
         ref: (element: HTMLElement) => {
           this.dom.footer = element;
         },
@@ -544,35 +408,32 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
     const modal = jsx('div', {
       className: () =>
         joinClasses(
-          this.state.className.modal,
-          this.state.fullscreen && this.state.className.fullscreen
+          this.props.className.modal,
+          this.props.fullscreen && 'is-fullscreen'
         ),
       id,
       role: 'document',
       'data-modal-dialog': id,
       ref: (element: HTMLElement) => {
         this.dom.modal = element;
-        this.applyStyle(element, this.state.style);
       },
       children: dialogChildren,
     }) as HTMLElement;
 
-    const root = jsx('div', {
-      className: () =>
-        joinClasses(this.state.className.layout, `is-${this.state.position}`),
-      role: 'dialog',
-      'data-modal': 'root',
-      'data-modal-position': () => this.state.position,
-      'aria-modal': 'true',
-      'aria-labelledby': () => (this.state.header ? `${id}_title` : null),
-      'aria-label': () =>
-        this.state.header ? null : this.state.text?.title || 'Modal',
-      children: modal,
-    }) 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');
+    }
 
-    this.root = root;
+    this.dom.root = root;
     this.mountView();
-    return root;
+    return this;
   }
 
   mountView(): void {
@@ -584,7 +445,10 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
         onCleanup(headerDispose);
       }
 
-      if (this.dom.body) render(() => this.bodyView(), this.dom.body);
+      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);
@@ -592,34 +456,30 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
       }
 
       this.bindReactiveLoading();
-      this.bindReactiveStyle();
       return dispose;
     });
   }
 
   headerView(): () => (Node | null)[] | null {
     return () => {
-      if (!this.state.header) return null;
+      if (!this.props.header) return null;
 
       return [
         jsx('div', {
-          className: this.state.className.title,
-          id: `${this.state.id}_title`,
-          'data-modal-title': this.state.id,
-          children: () => this.state.text?.title,
+          className: this.props.className.title,
+          id: `${this.props.id}_title`,
+          'aria-label': this.props.text.title,
+          children: this.props.text.title,
         }) as Node,
-        this.state.showClose
+        this.props.showClose
           ? (jsx('button', {
               type: 'button',
               className: joinClasses(
-                this.state.className.button,
-                this.state.className.buttonIcon,
-                this.state.className.buttonGhost,
-                this.state.className.buttonSmall,
-                this.state.className.close
+                this.props.className.button,
+                this.props.className.closeBtn
               ),
               'data-action': 'close',
-              'aria-label': 'close',
+              'aria-label': t('Close', locales),
               children: icon('close'),
             }) as Node)
           : null,
@@ -629,49 +489,44 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
 
   footerView(): () => (Node | null)[] | null {
     return () => {
-      if (!this.state.footer) return null;
+      if (!this.props.footer) return null;
 
       return [
-        this.state.showCancel
+        this.props.showCancel
           ? (jsx('button', {
               type: 'button',
               className: joinClasses(
-                this.state.className.button,
-                this.state.className.buttonGhost,
-                this.state.className.cancel
+                this.props.className.button,
+                this.props.className.cancelBtn
               ),
-              'data-action': 'close',
-              'aria-label': 'close',
+              'data-action': 'cancel',
               disabled: () => this.isBusy(),
-              children: () => this.state.text?.cancel,
+              children: this.props.text.cancel,
             }) as Node)
           : null,
         jsx('button', {
-          type: () => (this.isFormMode() ? 'submit' : 'button'),
-          form: () => (this.isFormMode() ? this.cache.formId : null),
+          type: () => (this.state.mode === 'form' ? 'submit' : 'button'),
           className: joinClasses(
-            this.state.className.button,
-            this.state.className.buttonPrimary,
-            this.state.className.confirm
+            this.props.className.button,
+            this.props.className.confirmBtn
           ),
-          'data-action': () => (this.isFormMode() ? 'submit' : 'confirm'),
+          'data-action': () =>
+            this.state.mode === 'form' ? 'submit' : 'confirm',
           disabled: () => this.isBusy(),
-          children: () => this.state.text?.confirm,
+          children: this.props.text.confirm,
         }) as Node,
       ];
     };
   }
 
   bodyView(): RenderableContent<Modal> {
-    if (this.isFormMode()) return this.formView();
+    if (this.state.mode === 'form') return this.formView();
     this.destroyForm();
     return this.contentView(this.state.content);
   }
 
   formView(): HTMLElement {
     return jsx('div', {
-      className: this.state.className.formContainer,
-      'data-modal-form-container': this.state.id,
       ref: (element: HTMLElement) => {
         this.mountForm(element);
       },
@@ -684,11 +539,18 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
 
     const props = this.createFormProps();
     if (this.dom.form) {
-      this.dom.form.update(props);
+      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);
+      }
       return;
     }
 
-    this.dom.form = new Form(props, container).build();
+    this.dom.form = createForm(props).build();
+    if (this.dom.form.dom.root) container.appendChild(this.dom.form.dom.root);
   }
 
   createFormProps(): FormProps {
@@ -729,144 +591,8 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
     });
   }
 
-  bindReactiveStyle(): void {
-    createEffect(() => {
-      const style = this.state.style;
-      if (this.dom.modal) this.applyStyle(this.dom.modal, style);
-    });
-  }
-
-  isFormMode(): boolean {
-    return Array.isArray(this.state.fields);
-  }
-
   isBusy(): boolean {
-    return !!(this.state.loading || this.state.submitting);
-  }
-
-  validatePropsPatch(patch: ModalPatch, namespace = 'Modal.update'): void {
-    validateParam('props', patch, MODAL_UPDATE_RULE, namespace);
-
-    for (const key of Object.keys(patch)) {
-      if (!hasOwn(MODAL_PROPS_SCHEMA, key)) {
-        throw new Error(
-          `Validator: ${namespace}.${key} is not a supported modal prop.`
-        );
-      }
-      if (MODAL_UPDATE_BLOCKED_KEYS.has(key)) {
-        throw new Error(
-          `Modal.update: "${key}" cannot be updated after initialization.`
-        );
-      }
-      validateParam(
-        key,
-        patch[key],
-        MODAL_PROPS_SCHEMA[key as keyof typeof MODAL_PROPS_SCHEMA],
-        namespace
-      );
-    }
-  }
-
-  applyProps(
-    patch: ModalPatch,
-    {
-      validate = true,
-      force = false,
-    }: { validate?: boolean; force?: boolean } = {}
-  ): this {
-    if (validate) this.validatePropsPatch(patch);
-    if (!patch || Object.keys(patch).length === 0) return this;
-
-    const hasFields = hasOwn(patch, 'fields');
-    const hasContent = hasOwn(patch, 'content');
-
-    if (hasContent && !hasFields && this.isFormMode() && !force) {
-      throw new Error(
-        'Modal.update: Cannot update content when fields are defined.'
-      );
-    }
-
-    const nextInput: ModalProps = {
-      ...(this.props as ModalProps),
-      ...patch,
-      text: (hasOwn(patch, 'text')
-        ? { ...this.props.text, ...patch.text }
-        : this.props.text) as ModalTextInput,
-      className: hasOwn(patch, 'className')
-        ? { ...this.props.className, ...patch.className }
-        : this.props.className,
-    };
-    const nextProps = normalizeProps(nextInput);
-
-    this.props = nextProps;
-    super.update(patch as Partial<ResolvedModalProps>, { force });
-    this.props = nextProps;
-
-    const statePatch: ModalStatePatch = {};
-    if (hasFields) {
-      this.cache.fieldIds?.clear();
-      statePatch.fields = Array.isArray(patch.fields)
-        ? cloneFields(patch.fields)
-        : null;
-    }
-
-    for (const [key, value] of Object.entries(patch)) {
-      if (key === 'fields' || key === 'text' || key === 'className') continue;
-      statePatch[key as keyof ModalStatePatch] =
-        value as ModalStatePatch[keyof ModalStatePatch];
-    }
-
-    if (hasOwn(patch, 'text')) {
-      statePatch.text = createTextState(nextProps);
-    }
-    if (hasOwn(patch, 'className')) {
-      statePatch.className = nextProps.className;
-    }
-
-    flushSync(() => {
-      for (const [key, value] of Object.entries(statePatch)) {
-        this.state[key as keyof ModalState] =
-          value as ModalState[keyof ModalState];
-      }
-    });
-
-    if (hasOwn(patch, 'style') && this.dom.modal) {
-      this.applyStyle(this.dom.modal, this.state.style);
-    }
-
-    if (
-      this.state.visible &&
-      (hasOwn(patch, 'bgClose') || hasOwn(patch, 'escClose'))
-    ) {
-      this.bindEvents(this.root);
-    }
-
-    if (this.dom.form && hasFields) {
-      this.dom.form.update(this.createFormProps());
-    }
-
-    return this;
-  }
-
-  applyStyle(element: HTMLElement, style: ModalStyle): void {
-    element.removeAttribute('style');
-    if (!style) {
-      this.cache.baseStyle = '';
-      return;
-    }
-    if (typeof style === 'string') {
-      element.style.cssText = style;
-      this.cache.baseStyle = element.getAttribute('style') || '';
-      return;
-    }
-    Object.entries(style).forEach(([key, value]) => {
-      if (value == null) return;
-      const name = key.startsWith('--')
-        ? key
-        : key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
-      element.style.setProperty(name, String(value));
-    });
-    this.cache.baseStyle = element.getAttribute('style') || '';
+    return !!(this.state.loading || this.state.processing);
   }
 
   bindReactiveVisibility(): void {
@@ -893,33 +619,35 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
       throw new Error('Modal: The current instance has been destroyed.');
     }
 
-    if (!this.root) this.buildRoot();
+    if (!this.dom.root) {
+      throw new Error('Modal.show: build() must be called before show().');
+    }
 
     this.cancelHideTimer();
     this.resetAnimationStyles();
 
-    const { onShow, onShown } = this.state;
+    const { onShow, onShown } = this.props;
     void onShow?.(this);
 
     this.cache.previousActiveElement =
       document.activeElement instanceof HTMLElement
         ? document.activeElement
         : null;
-    if (this.root && !this.root.parentNode)
-      document.body.appendChild(this.root);
+    if (this.dom.root && !this.dom.root.parentNode)
+      document.body.appendChild(this.dom.root);
     this.lockScroll();
     this.runtime.visibleApplied = true;
 
-    this.bindEvents(this.root);
+    this.bindEvents(this.dom.root);
     this.focusFirst();
 
     void onShown?.(this);
   }
 
   hideFromState(): void {
-    if (!this.runtime.visibleApplied || !this.root) return;
+    if (!this.runtime.visibleApplied || !this.dom.root) return;
 
-    const { onHide, onHidden } = this.state;
+    const { onHide, onHidden } = this.props;
     void onHide?.(this);
 
     this.runtime.visibleApplied = false;
@@ -954,7 +682,7 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
   bindOverlayCloseEvent(root: Element | null): void {
     if (!root) return;
     this.cleanup.events.on('bg', root, 'click', (event) => {
-      if (this.state.bgClose && event.target === root) {
+      if (this.props.bgClose && event.target === root) {
         this.hide();
       }
     });
@@ -964,7 +692,7 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
     this.cleanup.events.on('keydown', document, 'keydown', (event) => {
       if (!this.state.visible || !(event instanceof KeyboardEvent)) return;
 
-      if (event.key === 'Escape' && this.state.escClose) {
+      if (event.key === 'Escape' && this.props.escClose) {
         event.preventDefault();
         this.hide();
         return;
@@ -993,18 +721,8 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
         return;
       }
 
-      if (action === 'back') {
-        void this.handleBack();
-        return;
-      }
-
-      if (action === 'next') {
-        void this.handleNext();
-        return;
-      }
-
       if (action === 'confirm') {
-        if (this.isFormMode()) {
+        if (this.state.mode === 'form') {
           this.requestSubmit();
           return;
         }
@@ -1018,7 +736,7 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
   }
 
   requestSubmit(): void {
-    if (!this.dom.form) {
+    if (this.state.mode !== 'form' || !this.dom.form) {
       void this.handleConfirm();
       return;
     }
@@ -1038,138 +756,21 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
     await this.handleSubmit(data);
   }
 
-  async handleNext(): Promise<void> {
-    if (this.isBusy()) return;
-    if (!this.hasFlow()) return;
-    await this.moveFlow('next');
-  }
-
-  async handleBack(): Promise<void> {
-    if (this.isBusy()) return;
-    if (!this.hasFlow()) return;
-    await this.moveFlow('back');
-  }
-
-  hasFlow(): this is this & { state: ModalState & { flow: FlowLike } } {
-    return isFlowLike(this.state.flow) && !!this.state.flow;
-  }
-
-  async moveFlow(direction: FlowDirection): Promise<void> {
-    if (!this.hasFlow()) return;
-    const payload = this.createFlowPayload();
-    if (payload === false) return;
-
-    flushSync(() => {
-      this.state.submitting = true;
-    });
-
-    try {
-      const snapshot = await Promise.resolve(
-        this.state.flow[direction](payload)
-      );
-      this.syncFlowView(this.state.flow, snapshot);
-    } catch (error) {
-      console.error(`Modal.flow.${direction} error:`, error);
-      this.syncFlowView(this.state.flow);
-    } finally {
-      if (this.state) {
-        flushSync(() => {
-          this.state.submitting = false;
-        });
-      }
-    }
-  }
-
-  createFlowPayload(): FormDataRecord | null | false {
-    if (!this.isFormMode()) return null;
-
-    const form = this.dom.form;
-    if (!form) return this.state.data || null;
-    if (!form.validate()) return false;
-
-    const data = mergeExtraData(form.collectData(), this.state.extraData);
-    flushSync(() => {
-      this.state.data = data;
-    });
-
-    return this.state.data;
-  }
-
-  resolveFlowModalView(
-    flow: FlowLike,
-    snapshot: FlowSnapshot | null,
-    step?: FlowStep
-  ): ModalFlowView {
-    const source = step?.modal ?? step?.view;
-    if (typeof source === 'function') {
-      const result = source({
-        flow,
-        snapshot,
-        step,
-        modal: this,
-        data: snapshot?.data ?? null,
-        currentData: snapshot?.currentData ?? null,
-      });
-      return isPlainObject(result) ? result : {};
-    }
-    return clonePlainObject(source);
-  }
-
-  syncFlowView(
-    flow: FlowLike | null,
-    snapshot: FlowSnapshot | null = null
-  ): void {
-    if (!flow || !this.state) return;
-    const state = flow.snapshot() || snapshot;
-    const step =
-      flow.currentStep || state?.currentStep || snapshot?.currentStep;
-    const modalView = this.resolveFlowModalView(flow, state, step);
-    const nextText = isPlainObject(modalView.text) ? modalView.text : {};
-    const shouldInjectStepTitle =
-      (!hasOwn(modalView, 'text') || !hasOwn(nextText, 'title')) &&
-      step?.title != null;
-
-    const patch: ModalPatch = {
-      ...(shouldInjectStepTitle
-        ? {
-            text: {
-              ...nextText,
-              title: textValue(step.title),
-            },
-          }
-        : {}),
-      ...(!hasOwn(modalView, 'content') && !hasOwn(modalView, 'fields')
-        ? { content: step?.content ?? null }
-        : {}),
-      ...modalView,
-    };
-
-    if (Array.isArray(patch.fields)) {
-      patch.fields = hydrateFields(patch.fields, state?.currentData);
-    }
-    if (!hasOwn(patch, 'fields') && hasOwn(patch, 'content')) {
-      patch.fields = null;
-    }
-
-    this.update(patch);
-  }
-
   async handleConfirm(): Promise<void> {
     if (this.isBusy()) return;
 
     flushSync(() => {
-      this.state.submitting = true;
+      this.state.processing = true;
     });
 
     try {
-      await Promise.resolve(this.state.onConfirm?.(this));
-      this.hide();
+      await Promise.resolve(this.props.onConfirm?.(this));
     } catch (error) {
       console.error('Modal.onConfirm error:', error);
     } finally {
       if (this.state) {
         flushSync(() => {
-          this.state.submitting = false;
+          this.state.processing = false;
         });
       }
     }
@@ -1179,39 +780,39 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
     if (this.isBusy()) return;
 
     flushSync(() => {
-      this.state.submitting = true;
+      this.state.processing = true;
     });
 
     try {
-      await Promise.resolve(this.state.onCancel?.(this));
+      await Promise.resolve(this.props.onCancel?.(this));
       this.hide();
     } catch (error) {
       console.error('Modal.onCancel error:', error);
     } finally {
       if (this.state) {
         flushSync(() => {
-          this.state.submitting = false;
+          this.state.processing = false;
         });
       }
     }
   }
 
   async handleSubmit(data: FormDataRecord): Promise<void> {
-    if (!this.state.onSubmit) return;
+    if (!this.props.onSubmit) return;
 
     flushSync(() => {
-      this.state.submitting = true;
+      this.state.processing = true;
     });
 
     try {
-      await Promise.resolve(this.state.onSubmit(data, this));
+      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.submitting = false;
+          this.state.processing = false;
         });
       }
     }
@@ -1289,14 +890,14 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
 
   resetAnimationStyles(): void {
     if (!this.dom.modal) return;
-    if (this.cache.baseStyle)
-      this.dom.modal.setAttribute('style', this.cache.baseStyle);
-    else this.dom.modal.removeAttribute('style');
+    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.root?.remove();
+    this.dom.root?.remove();
     this.resetAnimationStyles();
     this.unlockScroll();
     this.restoreFocus();
@@ -1323,22 +924,27 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
     }
   }
 
-  validateStatePatch(patch: ModalStatePatch): void {
-    if (!patch || typeof patch !== 'object' || Array.isArray(patch)) {
-      throw new Error('Modal.setState: expects a plain object patch.');
+  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;
     }
+    return nextPatch;
+  }
+
+  protected override validateStatePatch(patch: ModalStatePatch): void {
+    validateParam('state', patch, MODAL_UPDATE_RULE, 'Modal.setState');
 
     for (const key of Object.keys(patch)) {
-      if (!hasOwn(MODAL_STATE_SCHEMA, key)) {
+      if (!Object.hasOwn(MODAL_STATE_SCHEMA, key)) {
         throw new Error(
           `Modal.setState: "${key}" is not a supported state key.`
         );
       }
-      if (MODAL_UPDATE_BLOCKED_KEYS.has(key)) {
-        throw new Error(
-          `Modal.setState: "${key}" cannot be updated after initialization.`
-        );
-      }
       validateParam(
         key,
         patch[key as keyof ModalStatePatch],
@@ -1348,119 +954,52 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
     }
   }
 
-  override setState(patch: ModalStatePatch = {}): this {
-    this.assertActive('setState');
-    this.validateStatePatch(patch);
-
-    flushSync(() => {
-      for (const [key, value] of Object.entries(patch)) {
-        if (key === 'fields') this.cache.fieldIds?.clear();
-        this.state[key as keyof ModalState] =
-          key === 'fields' && Array.isArray(value)
-            ? (cloneFields(
-                value as FormField[]
-              ) as ModalState[keyof ModalState])
-            : (value as ModalState[keyof ModalState]);
-      }
-    });
-    return this;
+  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');
-    flushSync(() => {
-      this.state.visible = true;
+    if (!this.dom.root) {
+      throw new Error('Modal.show: build() must be called before show().');
+    }
+    this.setState({
+      visible: true,
     });
     return this;
   }
 
   hide(): this {
     this.assertActive('hide');
-    flushSync(() => {
-      this.state.visible = false;
+    this.setState({
+      visible: false,
     });
     return this;
   }
 
-  setFields(data: readonly FormField[] | null, force = false): this {
-    validateParam('data', data, MODAL_FIELDS_RULE, 'Modal.setFields');
-    this.applyProps({ fields: data }, { validate: false, force });
-    return this;
-  }
-
-  addFields(data: FormDataRecord): this {
-    validateParam('data', data, MODAL_EXTRA_FIELDS_RULE, 'Modal.addFields');
-    flushSync(() => {
-      this.state.extraData = data;
-    });
-    return this;
-  }
-
-  setContent(content: ModalContent, force = false): this {
-    validateParam('content', content, MODAL_CONTENT_RULE, 'Modal.setContent');
-
-    if (this.isFormMode() && !force) {
-      throw new Error(
-        'Modal.setContent: Cannot setContent when fields are defined.'
-      );
-    }
-
-    this.applyProps({ content }, { validate: false, force });
-    return this;
-  }
-
-  override update(
-    patch?: Partial<ResolvedModalProps> | null,
-    options?: ComponentUpdateOptions
-  ): this;
-  update(patch?: ModalPatch | null, force?: boolean): this;
-  update(
-    patch: ModalPatch | Partial<ResolvedModalProps> | null = {},
-    forceOrOptions: boolean | ComponentUpdateOptions = false
-  ): this {
-    const force =
-      typeof forceOrOptions === 'boolean'
-        ? forceOrOptions
-        : !!forceOrOptions.force;
-    return this.applyProps((patch || {}) as ModalPatch, {
-      validate: true,
-      force,
-    });
-  }
-
   reset(): this {
     this.cache.fieldIds?.clear();
     if (!this.cache.initial) return this;
 
-    const initialProps = cloneProps(this.cache.initial);
-    const patch: ModalPatch = { ...(initialProps as unknown as ModalProps) };
-    delete patch.id;
-    delete patch.lazy;
-    this.props = normalizeProps(patch);
-    this.applyProps(patch, { validate: false });
-    flushSync(() => {
-      this.state.data = null;
-      this.state.extraData = null;
+    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,
     });
     return this;
   }
 
-  resetContent(): this {
-    return this.setContent(this.cache.initial?.content ?? '');
-  }
-
-  resetFields(): this {
-    return this.setFields(
-      Array.isArray(this.cache.initial?.fields)
-        ? cloneFields(this.cache.initial.fields)
-        : null
-    );
-  }
-
   protected override onDestroy(): void {
     const wasVisible = !!this.runtime.visibleApplied;
-    const onHide = this.state?.onHide;
-    const onHidden = this.state?.onHidden;
+    const { onHide, onHidden } = this.props;
 
     if (wasVisible) void onHide?.(this);
 
@@ -1473,13 +1012,12 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
     this.cleanup.view?.();
     this.cleanup.view = null;
 
-    this.root?.remove();
+    this.dom.root?.remove();
     if (wasVisible) void onHidden?.(this);
 
     this.cache = {
       initial: null,
       fieldIds: null,
-      baseStyle: '',
       previousActiveElement: null,
       formId: '',
     };
@@ -1492,6 +1030,8 @@ export class Modal extends Component<ResolvedModalProps, ModalState, ModalDOM> {
   }
 }
 
+export type Modal = ModalComponent;
+
 export function createModal(input: ModalProps = {}): Modal {
-  return new Modal(input);
+  return new ModalComponent(input);
 }