@mosaicoo/form-angular 0.2.0 → 0.4.0

package/fesm2022/mosaicoo-form-angular.mjs

@@ -1,7 +1,7 @@
 import { NgComponentOutlet, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, input, signal, inject, effect, untracked, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, output } from '@angular/core';
-import { importForm, createLegacyImporter, createFormEngine, collectInputs } from '@mosaicoo/form-core';
+import { InjectionToken, makeEnvironmentProviders, input, signal, inject, ChangeDetectorRef, effect, untracked, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, output } from '@angular/core';
+import { maskValue, importForm, createLegacyImporter, createFormEngine, collectInputs } from '@mosaicoo/form-core';
 
 /** Multi-provider token: maps merge, later providers win on conflicts. */
 const MFORM_FIELD_COMPONENTS = new InjectionToken('MFORM_FIELD_COMPONENTS');
@@ -11,6 +11,7 @@ const MFORM_FIELD_COMPONENTS = new InjectionToken('MFORM_FIELD_COMPONENTS');
  * base URLs, caching). Without it, a plain `fetch` is used.
  */
 const MFORM_REMOTE_FETCHER = new InjectionToken('MFORM_REMOTE_FETCHER');
+const MFORM_UPLOAD = new InjectionToken('MFORM_UPLOAD');
 /**
  * Registers renderer extensions at any injector level:
  *
@@ -33,6 +34,9 @@ function provideMosaicooForm(config) {
     if (config.remoteFetcher) {
         providers.push({ provide: MFORM_REMOTE_FETCHER, useValue: config.remoteFetcher });
     }
+    if (config.uploadFiles) {
+        providers.push({ provide: MFORM_UPLOAD, useValue: config.uploadFiles });
+    }
     return makeEnvironmentProviders(providers);
 }
 
@@ -53,11 +57,36 @@ class FormNodeComponent {
     bare = input(false, ...(ngDevMode ? [{ debugName: "bare" }] : /* istanbul ignore next */ []));
     /** Host-registered providers for `optionsSource: provider` fields. */
     providers = input({}, ...(ngDevMode ? [{ debugName: "providers" }] : /* istanbul ignore next */ []));
+    /** Rendering mode inherited from the renderer. */
+    mode = input('edit', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Renderer-supplied refresh hook for async completions (zoneless-safe). */
+    notify = input(() => { }, ...(ngDevMode ? [{ debugName: "notify" }] : /* istanbul ignore next */ []));
     activeTab = signal(0, ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
     /** DI-registered custom field components (maps merge; later wins). */
     componentMaps = inject(MFORM_FIELD_COMPONENTS, { optional: true });
     /** Host transport for remote options; plain fetch when absent. */
     remoteFetcher = inject(MFORM_REMOTE_FETCHER, { optional: true });
+    /** Host-owned upload for `file` fields. */
+    uploader = inject(MFORM_UPLOAD, { optional: true });
+    /**
+     * Async resolutions (debounce timers, provider promises) finish outside
+     * any template event — explicitly schedule the refresh for zoneless apps.
+     */
+    changeDetector = inject(ChangeDetectorRef);
+    uploading = signal(false, ...(ngDevMode ? [{ debugName: "uploading" }] : /* istanbul ignore next */ []));
+    /** Effective disabled state: mode, schema flag or calculated field. */
+    controlDisabled() {
+        return (this.mode() !== 'edit' ||
+            this.field().disabled === true ||
+            this.field().calculate !== undefined);
+    }
+    interactive() {
+        return this.mode() === 'edit';
+    }
+    pending() {
+        this.tick();
+        return this.engine().isPending(this.path());
+    }
     /** Custom component registered for this field type, if any. */
     customComponent() {
         const node = this.node();
@@ -119,7 +148,11 @@ class FormNodeComponent {
                 if (!provider)
                     return; // no provider: static options/fallback stand
                 Promise.resolve(provider({ field: node, path, data: engine.getData(), args: source.args }))
-                    .then(apply)
+                    .then((options) => {
+                    apply(options);
+                    this.changeDetector.markForCheck();
+                    this.notify()();
+                })
                     .catch(() => { }); // provider failure keeps the static fallback
             }
             else {
@@ -133,6 +166,7 @@ class FormNodeComponent {
                     label: String(item[source.labelKey ?? 'label'] ?? item[source.valueKey ?? 'value'] ?? ''),
                     value: (item[source.valueKey ?? 'value'] ?? ''),
                 }))))
+                    .then(() => this.changeDetector.markForCheck())
                     .catch(() => { });
             }
         });
@@ -217,7 +251,12 @@ class FormNodeComponent {
     }
     stringValue() {
         const value = this.value();
-        return value === undefined || value === null ? '' : String(value);
+        if (value === undefined || value === null)
+            return '';
+        const mask = this.field().format?.mask;
+        if (mask && typeof value === 'string')
+            return maskValue(value, mask).masked;
+        return String(value);
     }
     mapValue() {
         const value = this.value();
@@ -275,7 +314,15 @@ class FormNodeComponent {
         this.engine().setValue(this.path(), value);
     }
     setString(event) {
-        const raw = event.target.value;
+        const target = event.target;
+        const raw = target.value;
+        const mask = this.field().format?.mask;
+        if (mask) {
+            const { masked, raw: stripped } = maskValue(raw, mask);
+            target.value = masked; // the control always shows the masked shape
+            this.setValue(this.field().format?.keepMask ? masked : stripped);
+            return;
+        }
         if (this.field().dataType === 'number') {
             const parsed = raw === '' ? undefined : Number(raw);
             this.setValue(parsed !== undefined && Number.isFinite(parsed) ? parsed : undefined);
@@ -296,11 +343,124 @@ class FormNodeComponent {
     }
     setFiles(event) {
         const files = event.target.files;
-        this.setValue(files ? Array.from(files).map((f) => f.name) : []);
+        const list = files ? Array.from(files) : [];
+        if (!this.uploader || list.length === 0) {
+            // no host uploader: only file names are stored
+            this.setValue(list.map((f) => f.name));
+            return;
+        }
+        const field = this.field();
+        const path = this.path();
+        this.uploading.set(true);
+        Promise.all(list.map((file) => this.uploader(file, { field, path })))
+            .then((refs) => this.setValue(refs))
+            .catch(() => { }) // host upload failure keeps the previous value
+            .finally(() => {
+            this.uploading.set(false);
+            this.changeDetector.markForCheck();
+            this.notify()();
+        });
+    }
+    /** Names shown under a `file` control (refs or plain names). */
+    fileNames() {
+        const value = this.value();
+        if (!Array.isArray(value))
+            return [];
+        return value.map((item) => typeof item === 'object' && item !== null
+            ? String(item.name ?? '')
+            : String(item));
+    }
+    prefix() {
+        const value = this.node().props?.['prefix'];
+        return typeof value === 'string' && value ? value : null;
+    }
+    suffix() {
+        const value = this.node().props?.['suffix'];
+        return typeof value === 'string' && value ? value : null;
+    }
+    tagValues() {
+        const value = this.value();
+        return Array.isArray(value) ? value.map(String) : [];
+    }
+    addTag(event) {
+        event.preventDefault();
+        const input = event.target;
+        const tag = input.value.trim();
+        if (!tag)
+            return;
+        this.setValue([...this.tagValues(), tag]);
+        input.value = '';
+    }
+    removeTag(index) {
+        const next = [...this.tagValues()];
+        next.splice(index, 1);
+        this.setValue(next);
     }
     touch() {
         this.engine().markTouched(this.path());
-        this.engine().validateField(this.path());
+        // Async-aware: resolves immediately for sync-only fields; pending events
+        // drive the busy indicator otherwise.
+        void this.engine().validateFieldAsync(this.path());
+    }
+    // -- reference (autocomplete) ---------------------------------------------
+    refOptions = signal([], ...(ngDevMode ? [{ debugName: "refOptions" }] : /* istanbul ignore next */ []));
+    refOpen = signal(false, ...(ngDevMode ? [{ debugName: "refOpen" }] : /* istanbul ignore next */ []));
+    refTimer = null;
+    /** Label of the chosen option (falls back to the raw value). */
+    refLabel = signal(null, ...(ngDevMode ? [{ debugName: "refLabel" }] : /* istanbul ignore next */ []));
+    refDisplay() {
+        return this.refLabel() ?? this.stringValue();
+    }
+    refSearch(event) {
+        const query = event.target.value;
+        this.refLabel.set(null);
+        if (this.refTimer)
+            clearTimeout(this.refTimer);
+        this.refTimer = setTimeout(() => this.refResolve(query), 250);
+    }
+    refResolve(query) {
+        const source = this.field().optionsSource;
+        if (!source || source.type !== 'provider') {
+            // static options filter locally
+            const filter = query.toLowerCase();
+            this.refOptions.set((this.field().options ?? []).filter((o) => o.label.toLowerCase().includes(filter)));
+            this.refOpen.set(true);
+            this.changeDetector.markForCheck();
+            this.notify()();
+            return;
+        }
+        const provider = this.providers()[source.name];
+        if (!provider)
+            return;
+        Promise.resolve(provider({
+            field: this.field(),
+            path: this.path(),
+            data: this.engine().getData(),
+            args: source.args,
+            query,
+        }))
+            .then((options) => {
+            this.refOptions.set(options);
+            this.refOpen.set(true);
+            this.changeDetector.markForCheck();
+            this.notify()();
+        })
+            .catch(() => { });
+    }
+    refPick(option) {
+        this.setValue(option.value);
+        this.refLabel.set(option.label);
+        this.refOpen.set(false);
+        this.touch();
+    }
+    refBlur() {
+        // let a click on an option land before closing
+        setTimeout(() => {
+            this.refOpen.set(false);
+            this.changeDetector.markForCheck();
+            this.notify()();
+        }, 150);
+        this.touch();
     }
     addRow() {
         this.engine().addRow(this.path());
@@ -309,18 +469,20 @@ class FormNodeComponent {
         this.engine().removeRow(this.path(), index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FormNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FormNodeComponent, isStandalone: true, selector: "mform-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, engine: { classPropertyName: "engine", publicName: "engine", isSignal: true, isRequired: true, transformFunction: null }, tick: { classPropertyName: "tick", publicName: "tick", isSignal: true, isRequired: true, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, bare: { classPropertyName: "bare", publicName: "bare", isSignal: true, isRequired: false, transformFunction: null }, providers: { classPropertyName: "providers", publicName: "providers", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mform-node" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FormNodeComponent, isStandalone: true, selector: "mform-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, engine: { classPropertyName: "engine", publicName: "engine", isSignal: true, isRequired: true, transformFunction: null }, tick: { classPropertyName: "tick", publicName: "tick", isSignal: true, isRequired: true, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, bare: { classPropertyName: "bare", publicName: "bare", isSignal: true, isRequired: false, transformFunction: null }, providers: { classPropertyName: "providers", publicName: "providers", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, notify: { classPropertyName: "notify", publicName: "notify", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mform-node" }, ngImport: i0, template: `
     @let n = node();
     @if (visible()) {
       @switch (n.kind) {
         @case ('static') {
           @if (n.type === 'button') {
-            <button
-              class="mform-btn"
-              [type]="buttonAction() === 'submit' ? 'submit' : 'button'"
-            >
-              {{ n.label || 'Submit' }}
-            </button>
+            @if (interactive()) {
+              <button
+                class="mform-btn"
+                [type]="buttonAction() === 'submit' ? 'submit' : 'button'"
+              >
+                {{ n.label || 'Submit' }}
+              </button>
+            }
           } @else if (n.type === 'content') {
             <div class="mform-content" [innerHTML]="content()"></div>
           } @else {
@@ -336,7 +498,7 @@ class FormNodeComponent {
                 @for (column of columns(); track $index) {
                   <div class="mform-column">
                     @for (child of column; track child.key) {
-                      <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="childScope()" />
+                      <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [mode]="mode()" [notify]="notify()" [scope]="childScope()" />
                     }
                   </div>
                 }
@@ -361,7 +523,7 @@ class FormNodeComponent {
                 @for (tab of container().children; track tab.key; let i = $index) {
                   @if (activeTab() === i) {
                     <div class="mform-tabpanel" role="tabpanel">
-                      <mform-node [node]="tab" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="childScope()" [bare]="true" />
+                      <mform-node [node]="tab" [engine]="engine()" [tick]="tick()" [providers]="providers()" [mode]="mode()" [notify]="notify()" [scope]="childScope()" [bare]="true" />
                     </div>
                   }
                 }
@@ -377,20 +539,24 @@ class FormNodeComponent {
                     <div class="mform-grid-row" role="group" [attr.aria-label]="(container().label || container().key) + ' ' + (i + 1)">
                       <div class="mform-grid-fields">
                         @for (child of container().children; track child.key) {
-                          <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="rowScope(i)" />
+                          <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [mode]="mode()" [notify]="notify()" [scope]="rowScope(i)" />
                         }
                       </div>
-                      <button
-                        type="button"
-                        class="mform-row-remove"
-                        (click)="removeRow(i)"
-                        [attr.aria-label]="'Remove row ' + (i + 1)"
-                      >
-                        ✕
-                      </button>
+                      @if (interactive()) {
+                        <button
+                          type="button"
+                          class="mform-row-remove"
+                          (click)="removeRow(i)"
+                          [attr.aria-label]="'Remove row ' + (i + 1)"
+                        >
+                          ✕
+                        </button>
+                      }
                     </div>
                   }
-                  <button type="button" class="mform-row-add" (click)="addRow()">+ Add</button>
+                  @if (interactive()) {
+                    <button type="button" class="mform-row-add" (click)="addRow()">+ Add</button>
+                  }
                 </div>
               </section>
             }
@@ -400,14 +566,14 @@ class FormNodeComponent {
                   <header class="mform-panel-head">{{ container().label }}</header>
                   <div class="mform-panel-body">
                     @for (child of container().children; track child.key) {
-                      <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="childScope()" />
+                      <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [mode]="mode()" [notify]="notify()" [scope]="childScope()" />
                     }
                   </div>
                 </section>
               } @else {
                 <div class="mform-group">
                   @for (child of container().children; track child.key) {
-                    <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="childScope()" />
+                    <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [mode]="mode()" [notify]="notify()" [scope]="childScope()" />
                   }
                 </div>
               }
@@ -421,7 +587,7 @@ class FormNodeComponent {
               [ngComponentOutletInputs]="customInputs()"
             />
           } @else if (field().type !== 'hidden') {
-            <div class="mform-field" [class.has-error]="errors().length > 0">
+            <div class="mform-field" [class.has-error]="errors().length > 0" [class.is-pending]="pending()">
               @if (field().type !== 'checkbox') {
                 <label class="mform-label" [attr.for]="controlId()">
                   {{ field().label || field().key }}
@@ -437,7 +603,7 @@ class FormNodeComponent {
                     [id]="controlId()"
                     [value]="stringValue()"
                     [placeholder]="field().placeholder || ''"
-                    [disabled]="field().disabled === true"
+                    [disabled]="controlDisabled()"
                     [attr.rows]="rowsProp()"
                     [attr.aria-required]="required() || null"
                     [attr.aria-invalid]="errors().length > 0 || null"
@@ -450,7 +616,7 @@ class FormNodeComponent {
                   <select
                     class="mform-control"
                     [id]="controlId()"
-                    [disabled]="field().disabled === true"
+                    [disabled]="controlDisabled()"
                     [attr.aria-required]="required() || null"
                     [attr.aria-invalid]="errors().length > 0 || null"
                     [attr.aria-describedby]="describedBy()"
@@ -476,7 +642,7 @@ class FormNodeComponent {
                           type="radio"
                           [name]="controlId()"
                           [checked]="stringValue() === '' + option.value"
-                          [disabled]="field().disabled === true"
+                          [disabled]="controlDisabled()"
                           (change)="setValue(option.value)"
                           (blur)="touch()"
                         />
@@ -491,7 +657,7 @@ class FormNodeComponent {
                       type="checkbox"
                       [id]="controlId()"
                       [checked]="value() === true"
-                      [disabled]="field().disabled === true"
+                      [disabled]="controlDisabled()"
                       [attr.aria-invalid]="errors().length > 0 || null"
                       [attr.aria-describedby]="describedBy()"
                       (change)="setChecked($event)"
@@ -512,7 +678,7 @@ class FormNodeComponent {
                         <input
                           type="checkbox"
                           [checked]="mapValue()['' + option.value] === true"
-                          [disabled]="field().disabled === true"
+                          [disabled]="controlDisabled()"
                           (change)="toggleMap('' + option.value, $event)"
                           (blur)="touch()"
                         />
@@ -521,17 +687,75 @@ class FormNodeComponent {
                     }
                   </div>
                 }
+                @case ('tags') {
+                  <div class="mform-tags">
+                    @for (tag of tagValues(); track $index; let i = $index) {
+                      <span class="mform-tag">
+                        {{ tag }}
+                        <button
+                          type="button"
+                          (click)="removeTag(i)"
+                          [attr.aria-label]="'Remove ' + tag"
+                        >✕</button>
+                      </span>
+                    }
+                    <input
+                      class="mform-control mform-tag-input"
+                      type="text"
+                      [id]="controlId()"
+                      [placeholder]="field().placeholder || ''"
+                      [disabled]="controlDisabled()"
+                      [attr.aria-describedby]="describedBy()"
+                      (keydown.enter)="addTag($event)"
+                      (blur)="touch()"
+                    />
+                  </div>
+                }
                 @case ('file') {
                   <input
                     class="mform-control"
                     type="file"
                     multiple
                     [id]="controlId()"
-                    [disabled]="field().disabled === true"
+                    [disabled]="controlDisabled() || uploading()"
+                    [attr.aria-busy]="uploading() || null"
                     [attr.aria-describedby]="describedBy()"
                     (change)="setFiles($event)"
                     (blur)="touch()"
                   />
+                  @if (uploading()) {
+                    <div class="mform-desc" role="status">Uploading…</div>
+                  }
+                  @for (name of fileNames(); track $index) {
+                    <div class="mform-file-name">📎 {{ name }}</div>
+                  }
+                }
+                @case ('reference') {
+                  <div class="mform-reference">
+                    <input
+                      class="mform-control"
+                      type="text"
+                      role="combobox"
+                      [id]="controlId()"
+                      [value]="refDisplay()"
+                      [placeholder]="field().placeholder || ''"
+                      [disabled]="controlDisabled()"
+                      [attr.aria-expanded]="refOpen()"
+                      [attr.aria-invalid]="errors().length > 0 || null"
+                      [attr.aria-describedby]="describedBy()"
+                      (input)="refSearch($event)"
+                      (blur)="refBlur()"
+                    />
+                    @if (refOpen() && refOptions().length > 0) {
+                      <ul class="mform-ref-list" role="listbox">
+                        @for (option of refOptions(); track option.value) {
+                          <li role="option">
+                            <button type="button" (click)="refPick(option)">{{ option.label }}</button>
+                          </li>
+                        }
+                      </ul>
+                    }
+                  </div>
                 }
                 @case ('unsupported') {
                   <input
@@ -543,19 +767,29 @@ class FormNodeComponent {
                   />
                 }
                 @default {
-                  <input
-                    class="mform-control"
-                    [type]="inputType()"
-                    [id]="controlId()"
-                    [value]="stringValue()"
-                    [placeholder]="field().placeholder || ''"
-                    [disabled]="field().disabled === true"
-                    [attr.aria-required]="required() || null"
-                    [attr.aria-invalid]="errors().length > 0 || null"
-                    [attr.aria-describedby]="describedBy()"
-                    (input)="setString($event)"
-                    (blur)="touch()"
-                  />
+                  <div class="mform-affix" [class.has-affix]="prefix() || suffix()">
+                    @if (prefix(); as p) {
+                      <span class="mform-prefix" aria-hidden="true">{{ p }}</span>
+                    }
+                    <input
+                      class="mform-control"
+                      [type]="inputType()"
+                      [id]="controlId()"
+                      [value]="stringValue()"
+                      [placeholder]="field().placeholder || ''"
+                      [disabled]="controlDisabled()"
+                      [attr.step]="field().type === 'currency' ? '0.01' : null"
+                      [attr.inputmode]="field().type === 'currency' ? 'decimal' : null"
+                      [attr.aria-required]="required() || null"
+                      [attr.aria-invalid]="errors().length > 0 || null"
+                      [attr.aria-describedby]="describedBy()"
+                      (input)="setString($event)"
+                      (blur)="touch()"
+                    />
+                    @if (suffix(); as s) {
+                      <span class="mform-suffix" aria-hidden="true">{{ s }}</span>
+                    }
+                  </div>
                 }
               }
               @if (field().description) {
@@ -569,7 +803,7 @@ class FormNodeComponent {
         }
       }
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: FormNodeComponent, selector: "mform-node", inputs: ["node", "engine", "tick", "scope", "bare", "providers"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: FormNodeComponent, selector: "mform-node", inputs: ["node", "engine", "tick", "scope", "bare", "providers", "mode", "notify"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FormNodeComponent, decorators: [{
             type: Component,
@@ -585,12 +819,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
       @switch (n.kind) {
         @case ('static') {
           @if (n.type === 'button') {
-            <button
-              class="mform-btn"
-              [type]="buttonAction() === 'submit' ? 'submit' : 'button'"
-            >
-              {{ n.label || 'Submit' }}
-            </button>
+            @if (interactive()) {
+              <button
+                class="mform-btn"
+                [type]="buttonAction() === 'submit' ? 'submit' : 'button'"
+              >
+                {{ n.label || 'Submit' }}
+              </button>
+            }
           } @else if (n.type === 'content') {
             <div class="mform-content" [innerHTML]="content()"></div>
           } @else {
@@ -606,7 +842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 @for (column of columns(); track $index) {
                   <div class="mform-column">
                     @for (child of column; track child.key) {
-                      <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="childScope()" />
+                      <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [mode]="mode()" [notify]="notify()" [scope]="childScope()" />
                     }
                   </div>
                 }
@@ -631,7 +867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 @for (tab of container().children; track tab.key; let i = $index) {
                   @if (activeTab() === i) {
                     <div class="mform-tabpanel" role="tabpanel">
-                      <mform-node [node]="tab" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="childScope()" [bare]="true" />
+                      <mform-node [node]="tab" [engine]="engine()" [tick]="tick()" [providers]="providers()" [mode]="mode()" [notify]="notify()" [scope]="childScope()" [bare]="true" />
                     </div>
                   }
                 }
@@ -647,20 +883,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     <div class="mform-grid-row" role="group" [attr.aria-label]="(container().label || container().key) + ' ' + (i + 1)">
                       <div class="mform-grid-fields">
                         @for (child of container().children; track child.key) {
-                          <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="rowScope(i)" />
+                          <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [mode]="mode()" [notify]="notify()" [scope]="rowScope(i)" />
                         }
                       </div>
-                      <button
-                        type="button"
-                        class="mform-row-remove"
-                        (click)="removeRow(i)"
-                        [attr.aria-label]="'Remove row ' + (i + 1)"
-                      >
-                        ✕
-                      </button>
+                      @if (interactive()) {
+                        <button
+                          type="button"
+                          class="mform-row-remove"
+                          (click)="removeRow(i)"
+                          [attr.aria-label]="'Remove row ' + (i + 1)"
+                        >
+                          ✕
+                        </button>
+                      }
                     </div>
                   }
-                  <button type="button" class="mform-row-add" (click)="addRow()">+ Add</button>
+                  @if (interactive()) {
+                    <button type="button" class="mform-row-add" (click)="addRow()">+ Add</button>
+                  }
                 </div>
               </section>
             }
@@ -670,14 +910,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                   <header class="mform-panel-head">{{ container().label }}</header>
                   <div class="mform-panel-body">
                     @for (child of container().children; track child.key) {
-                      <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="childScope()" />
+                      <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [mode]="mode()" [notify]="notify()" [scope]="childScope()" />
                     }
                   </div>
                 </section>
               } @else {
                 <div class="mform-group">
                   @for (child of container().children; track child.key) {
-                    <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="childScope()" />
+                    <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [mode]="mode()" [notify]="notify()" [scope]="childScope()" />
                   }
                 </div>
               }
@@ -691,7 +931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
               [ngComponentOutletInputs]="customInputs()"
             />
           } @else if (field().type !== 'hidden') {
-            <div class="mform-field" [class.has-error]="errors().length > 0">
+            <div class="mform-field" [class.has-error]="errors().length > 0" [class.is-pending]="pending()">
               @if (field().type !== 'checkbox') {
                 <label class="mform-label" [attr.for]="controlId()">
                   {{ field().label || field().key }}
@@ -707,7 +947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     [id]="controlId()"
                     [value]="stringValue()"
                     [placeholder]="field().placeholder || ''"
-                    [disabled]="field().disabled === true"
+                    [disabled]="controlDisabled()"
                     [attr.rows]="rowsProp()"
                     [attr.aria-required]="required() || null"
                     [attr.aria-invalid]="errors().length > 0 || null"
@@ -720,7 +960,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                   <select
                     class="mform-control"
                     [id]="controlId()"
-                    [disabled]="field().disabled === true"
+                    [disabled]="controlDisabled()"
                     [attr.aria-required]="required() || null"
                     [attr.aria-invalid]="errors().length > 0 || null"
                     [attr.aria-describedby]="describedBy()"
@@ -746,7 +986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                           type="radio"
                           [name]="controlId()"
                           [checked]="stringValue() === '' + option.value"
-                          [disabled]="field().disabled === true"
+                          [disabled]="controlDisabled()"
                           (change)="setValue(option.value)"
                           (blur)="touch()"
                         />
@@ -761,7 +1001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                       type="checkbox"
                       [id]="controlId()"
                       [checked]="value() === true"
-                      [disabled]="field().disabled === true"
+                      [disabled]="controlDisabled()"
                       [attr.aria-invalid]="errors().length > 0 || null"
                       [attr.aria-describedby]="describedBy()"
                       (change)="setChecked($event)"
@@ -782,7 +1022,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         <input
                           type="checkbox"
                           [checked]="mapValue()['' + option.value] === true"
-                          [disabled]="field().disabled === true"
+                          [disabled]="controlDisabled()"
                           (change)="toggleMap('' + option.value, $event)"
                           (blur)="touch()"
                         />
@@ -791,17 +1031,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     }
                   </div>
                 }
+                @case ('tags') {
+                  <div class="mform-tags">
+                    @for (tag of tagValues(); track $index; let i = $index) {
+                      <span class="mform-tag">
+                        {{ tag }}
+                        <button
+                          type="button"
+                          (click)="removeTag(i)"
+                          [attr.aria-label]="'Remove ' + tag"
+                        >✕</button>
+                      </span>
+                    }
+                    <input
+                      class="mform-control mform-tag-input"
+                      type="text"
+                      [id]="controlId()"
+                      [placeholder]="field().placeholder || ''"
+                      [disabled]="controlDisabled()"
+                      [attr.aria-describedby]="describedBy()"
+                      (keydown.enter)="addTag($event)"
+                      (blur)="touch()"
+                    />
+                  </div>
+                }
                 @case ('file') {
                   <input
                     class="mform-control"
                     type="file"
                     multiple
                     [id]="controlId()"
-                    [disabled]="field().disabled === true"
+                    [disabled]="controlDisabled() || uploading()"
+                    [attr.aria-busy]="uploading() || null"
                     [attr.aria-describedby]="describedBy()"
                     (change)="setFiles($event)"
                     (blur)="touch()"
                   />
+                  @if (uploading()) {
+                    <div class="mform-desc" role="status">Uploading…</div>
+                  }
+                  @for (name of fileNames(); track $index) {
+                    <div class="mform-file-name">📎 {{ name }}</div>
+                  }
+                }
+                @case ('reference') {
+                  <div class="mform-reference">
+                    <input
+                      class="mform-control"
+                      type="text"
+                      role="combobox"
+                      [id]="controlId()"
+                      [value]="refDisplay()"
+                      [placeholder]="field().placeholder || ''"
+                      [disabled]="controlDisabled()"
+                      [attr.aria-expanded]="refOpen()"
+                      [attr.aria-invalid]="errors().length > 0 || null"
+                      [attr.aria-describedby]="describedBy()"
+                      (input)="refSearch($event)"
+                      (blur)="refBlur()"
+                    />
+                    @if (refOpen() && refOptions().length > 0) {
+                      <ul class="mform-ref-list" role="listbox">
+                        @for (option of refOptions(); track option.value) {
+                          <li role="option">
+                            <button type="button" (click)="refPick(option)">{{ option.label }}</button>
+                          </li>
+                        }
+                      </ul>
+                    }
+                  </div>
                 }
                 @case ('unsupported') {
                   <input
@@ -813,19 +1111,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                   />
                 }
                 @default {
-                  <input
-                    class="mform-control"
-                    [type]="inputType()"
-                    [id]="controlId()"
-                    [value]="stringValue()"
-                    [placeholder]="field().placeholder || ''"
-                    [disabled]="field().disabled === true"
-                    [attr.aria-required]="required() || null"
-                    [attr.aria-invalid]="errors().length > 0 || null"
-                    [attr.aria-describedby]="describedBy()"
-                    (input)="setString($event)"
-                    (blur)="touch()"
-                  />
+                  <div class="mform-affix" [class.has-affix]="prefix() || suffix()">
+                    @if (prefix(); as p) {
+                      <span class="mform-prefix" aria-hidden="true">{{ p }}</span>
+                    }
+                    <input
+                      class="mform-control"
+                      [type]="inputType()"
+                      [id]="controlId()"
+                      [value]="stringValue()"
+                      [placeholder]="field().placeholder || ''"
+                      [disabled]="controlDisabled()"
+                      [attr.step]="field().type === 'currency' ? '0.01' : null"
+                      [attr.inputmode]="field().type === 'currency' ? 'decimal' : null"
+                      [attr.aria-required]="required() || null"
+                      [attr.aria-invalid]="errors().length > 0 || null"
+                      [attr.aria-describedby]="describedBy()"
+                      (input)="setString($event)"
+                      (blur)="touch()"
+                    />
+                    @if (suffix(); as s) {
+                      <span class="mform-suffix" aria-hidden="true">{{ s }}</span>
+                    }
+                  </div>
                 }
               }
               @if (field().description) {
@@ -841,7 +1149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
     }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], engine: [{ type: i0.Input, args: [{ isSignal: true, alias: "engine", required: true }] }], tick: [{ type: i0.Input, args: [{ isSignal: true, alias: "tick", required: true }] }], scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }], bare: [{ type: i0.Input, args: [{ isSignal: true, alias: "bare", required: false }] }], providers: [{ type: i0.Input, args: [{ isSignal: true, alias: "providers", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], engine: [{ type: i0.Input, args: [{ isSignal: true, alias: "engine", required: true }] }], tick: [{ type: i0.Input, args: [{ isSignal: true, alias: "tick", required: true }] }], scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }], bare: [{ type: i0.Input, args: [{ isSignal: true, alias: "bare", required: false }] }], providers: [{ type: i0.Input, args: [{ isSignal: true, alias: "providers", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], notify: [{ type: i0.Input, args: [{ isSignal: true, alias: "notify", required: false }] }] } });
 
 /**
  * `<mform-renderer>` — renders a form at runtime from a `FormSchema` (or any
@@ -864,6 +1172,20 @@ class FormRendererComponent {
     optionsProviders = input({}, ...(ngDevMode ? [{ debugName: "optionsProviders" }] : /* istanbul ignore next */ []));
     /** Host-supplied message resolver (localization of validation messages). */
     messages = input(null, ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** Named custom validators (sync or async — Promises get pending states). */
+    validators = input(null, ...(ngDevMode ? [{ debugName: "validators" }] : /* istanbul ignore next */ []));
+    /** `edit` (default), `readonly` (no actions) or `disabled`. */
+    mode = input('edit', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional host submission: called after a VALID submit with the result;
+     * rejections surface as the submission error state. Persistence transport
+     * stays entirely on the host side.
+     */
+    submitHandler = input(null, ...(ngDevMode ? [{ debugName: "submitHandler" }] : /* istanbul ignore next */ []));
+    /** True while async validation or the submit handler is running. */
+    submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []));
+    /** Message when the host submission rejected. */
+    submitError = signal(null, ...(ngDevMode ? [{ debugName: "submitError" }] : /* istanbul ignore next */ []));
     /** Fixed renderer texts (override to localize). `{{count}}` in `summary`. */
     labels = input({
         previous: 'Previous',
@@ -886,6 +1208,8 @@ class FormRendererComponent {
     valueChanged = output();
     /** Bumped on every engine event; nodes read it to refresh. */
     tick = signal(0, ...(ngDevMode ? [{ debugName: "tick" }] : /* istanbul ignore next */ []));
+    /** Handed to nodes so async completions re-render (zoneless-safe). */
+    bumpTick = () => this.tick.update((v) => v + 1);
     /** Active wizard step index. */
     currentStep = signal(0, ...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
     resolved = computed(() => {
@@ -916,6 +1240,7 @@ class FormRendererComponent {
             ? createFormEngine(schema, {
                 initialData: this.initialData() ?? undefined,
                 messages: this.messages() ?? undefined,
+                validators: this.validators() ?? undefined,
             })
             : null;
     }, ...(ngDevMode ? [{ debugName: "engine" }] : /* istanbul ignore next */ []));
@@ -966,22 +1291,37 @@ class FormRendererComponent {
         this.currentStep.update((index) => Math.min(this.steps().length - 1, index + 1));
     }
     // -- submission -----------------------------------------------------------
-    onSubmit(event) {
+    async onSubmit(event) {
         event.preventDefault();
         const engine = this.engine();
-        if (!engine)
+        if (!engine || this.submitting() || this.mode() !== 'edit')
             return;
-        const result = engine.submit();
-        this.errorSummary.set(result.errors);
-        if (!result.ok) {
-            if (this.isWizard()) {
-                const stepIndex = this.stepIndexForPath(result.errors[0]?.path ?? '');
-                if (stepIndex >= 0)
-                    this.currentStep.set(stepIndex);
+        this.submitting.set(true);
+        this.submitError.set(null);
+        try {
+            const result = await engine.submitAsync();
+            this.errorSummary.set(result.errors);
+            if (!result.ok) {
+                if (this.isWizard()) {
+                    const stepIndex = this.stepIndexForPath(result.errors[0]?.path ?? '');
+                    if (stepIndex >= 0)
+                        this.currentStep.set(stepIndex);
+                }
+                this.focusFirstError(result.errors);
             }
-            this.focusFirstError(result.errors);
+            else if (this.submitHandler()) {
+                try {
+                    await this.submitHandler()(result);
+                }
+                catch (error) {
+                    this.submitError.set(String(error instanceof Error ? error.message : error));
+                }
+            }
+            this.submitted.emit(result);
+        }
+        finally {
+            this.submitting.set(false);
         }
-        this.submitted.emit(result);
     }
     /** Finds the wizard step that owns a (possibly row-indexed) data path. */
     stepIndexForPath(path) {
@@ -1001,7 +1341,7 @@ class FormRendererComponent {
         queueMicrotask(() => this.documentRef.getElementById(id)?.focus());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FormRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FormRendererComponent, isStandalone: true, selector: "mform-renderer", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, initialData: { classPropertyName: "initialData", publicName: "initialData", isSignal: true, isRequired: false, transformFunction: null }, optionsProviders: { classPropertyName: "optionsProviders", publicName: "optionsProviders", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", valueChanged: "valueChanged" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FormRendererComponent, isStandalone: true, selector: "mform-renderer", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, initialData: { classPropertyName: "initialData", publicName: "initialData", isSignal: true, isRequired: false, transformFunction: null }, optionsProviders: { classPropertyName: "optionsProviders", publicName: "optionsProviders", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, submitHandler: { classPropertyName: "submitHandler", publicName: "submitHandler", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", valueChanged: "valueChanged" }, ngImport: i0, template: `
     @if (engine(); as engine) {
       <form class="mform-root" novalidate (submit)="onSubmit($event)">
         @if (errorSummary().length > 0) {
@@ -1034,6 +1374,7 @@ class FormRendererComponent {
               [engine]="engine"
               [tick]="tick()"
               [providers]="optionsProviders()"
+              [mode]="mode()" [notify]="bumpTick"
               [bare]="true"
             />
           }
@@ -1047,18 +1388,23 @@ class FormRendererComponent {
               <button type="button" class="mform-btn" (click)="nextStep()">
                 {{ labels().next }}
               </button>
-            } @else {
-              <button type="submit" class="mform-btn">{{ labels().submit }}</button>
+            } @else if (mode() === 'edit') {
+              <button type="submit" class="mform-btn" [disabled]="submitting()">
+                {{ submitting() ? '…' : labels().submit }}
+              </button>
             }
           </div>
         } @else {
           @for (node of engine.schema.fields; track node.key) {
-            <mform-node [node]="node" [engine]="engine" [tick]="tick()" [providers]="optionsProviders()" />
+            <mform-node [node]="node" [engine]="engine" [tick]="tick()" [providers]="optionsProviders()" [mode]="mode()" [notify]="bumpTick" />
           }
         }
+        @if (submitError(); as error) {
+          <div class="mform-summary" role="alert">{{ error }}</div>
+        }
       </form>
     }
-  `, isInline: true, styles: [".mform-root{display:flex;flex-direction:column;gap:var(--mform-gap, 16px);font-family:var(--mform-font, system-ui, \"Segoe UI\", sans-serif);color:var(--mform-text, #1f1b2e)}.mform-node{display:contents}.mform-field{display:flex;flex-direction:column;gap:6px}.mform-label{font-size:var(--mform-label-size, 13px);font-weight:var(--mform-label-weight, 600)}.mform-req{color:var(--mform-danger, #c62842);margin-left:2px}.mform-control{font:inherit;width:100%;padding:var(--mform-control-padding, 9px 12px);border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-control-radius, 8px);background:var(--mform-control-bg, #fff);color:inherit;box-sizing:border-box}textarea.mform-control{min-height:72px;resize:vertical}.mform-control:focus-visible{outline:2px solid var(--mform-focus, #8e6ff0);outline-offset:1px;border-color:var(--mform-focus, #8e6ff0)}.mform-field.has-error .mform-control{border-color:var(--mform-danger, #c62842)}.mform-desc{font-size:12px;color:var(--mform-muted, #6b6580)}.mform-error{font-size:12px;color:var(--mform-danger, #c62842)}.mform-choices{display:flex;flex-direction:column;gap:6px}.mform-check{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}.mform-check input{width:16px;height:16px;accent-color:var(--mform-primary, #6d4bd0)}.mform-panel{border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);overflow:hidden}.mform-panel-head{background:var(--mform-panel-head-bg, linear-gradient(90deg, #efeaff, #f8f6ff));color:var(--mform-panel-head-text, inherit);padding:10px 16px;font-weight:600;font-size:14px;border-bottom:1px solid var(--mform-border, #d9d5e6)}.mform-panel-body,.mform-group,.mform-column,.mform-tabpanel{display:flex;flex-direction:column;gap:var(--mform-gap, 16px)}.mform-panel-body{padding:var(--mform-panel-padding, 16px)}.mform-columns{display:grid;gap:var(--mform-gap, 16px)}.mform-tabbar{display:flex;gap:4px;border-bottom:2px solid var(--mform-border, #d9d5e6);margin-bottom:14px}.mform-tab{padding:8px 18px;font:inherit;font-size:14px;border:none;background:none;color:var(--mform-muted, #6b6580);cursor:pointer}.mform-tab.is-active{color:var(--mform-primary, #6d4bd0);font-weight:600;border-bottom:2px solid var(--mform-primary, #6d4bd0);margin-bottom:-2px}.mform-grid-row{display:flex;align-items:flex-start;gap:8px;padding:10px 0;border-bottom:1px dashed var(--mform-border, #d9d5e6)}.mform-grid-fields{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--mform-gap, 16px)}.mform-row-remove{border:none;background:none;color:var(--mform-muted, #6b6580);font:inherit;cursor:pointer;padding:6px 8px}.mform-row-remove:hover{color:var(--mform-danger, #c62842)}.mform-row-add{align-self:flex-start;background:none;border:1px dashed var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0);padding:7px 14px;border-radius:var(--mform-control-radius, 8px);font:inherit;font-size:13px;cursor:pointer}.mform-btn{align-self:flex-start;background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff);border:none;border-radius:var(--mform-control-radius, 8px);padding:11px 26px;font:inherit;font-weight:600;cursor:pointer}.mform-btn:hover{filter:brightness(1.08)}.mform-btn:focus-visible{outline:2px solid var(--mform-focus, #8e6ff0);outline-offset:2px}.mform-content{font-size:14px}.mform-unsupported{font-size:13px;color:var(--mform-muted, #6b6580);border:1px dashed var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);padding:10px 14px}.mform-steps{display:flex;gap:18px;list-style:none;margin:0 0 4px;padding:0 0 12px;border-bottom:1px solid var(--mform-border, #d9d5e6);flex-wrap:wrap}.mform-step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mform-muted, #6b6580)}.mform-step-index{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--mform-border, #d9d5e6);font-size:11px;font-weight:600}.mform-step.is-active{color:var(--mform-primary, #6d4bd0);font-weight:600}.mform-step.is-active .mform-step-index{border-color:var(--mform-primary, #6d4bd0);background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff)}.mform-step.is-done .mform-step-index{border-color:var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0)}.mform-wizard-nav{display:flex;gap:10px;padding-top:4px}.mform-btn-secondary{background:none;border:1px solid var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0)}.mform-summary{border:1px solid var(--mform-danger, #c62842);background:var(--mform-danger-bg, #fdf0f2);color:var(--mform-danger, #c62842);border-radius:var(--mform-radius, 10px);padding:12px 16px;font-size:13px}.mform-summary ul{margin:6px 0 0;padding-left:18px}\n"], dependencies: [{ kind: "component", type: FormNodeComponent, selector: "mform-node", inputs: ["node", "engine", "tick", "scope", "bare", "providers"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".mform-root{display:flex;flex-direction:column;gap:var(--mform-gap, 16px);font-family:var(--mform-font, system-ui, \"Segoe UI\", sans-serif);color:var(--mform-text, #1f1b2e)}.mform-node{display:contents}.mform-field{display:flex;flex-direction:column;gap:6px}.mform-label{font-size:var(--mform-label-size, 13px);font-weight:var(--mform-label-weight, 600)}.mform-req{color:var(--mform-danger, #c62842);margin-left:2px}.mform-control{font:inherit;width:100%;padding:var(--mform-control-padding, 9px 12px);border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-control-radius, 8px);background:var(--mform-control-bg, #fff);color:inherit;box-sizing:border-box}textarea.mform-control{min-height:72px;resize:vertical}.mform-control:focus-visible{outline:2px solid var(--mform-focus, #8e6ff0);outline-offset:1px;border-color:var(--mform-focus, #8e6ff0)}.mform-field.has-error .mform-control{border-color:var(--mform-danger, #c62842)}.mform-desc{font-size:12px;color:var(--mform-muted, #6b6580)}.mform-error{font-size:12px;color:var(--mform-danger, #c62842)}.mform-choices{display:flex;flex-direction:column;gap:6px}.mform-check{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}.mform-check input{width:16px;height:16px;accent-color:var(--mform-primary, #6d4bd0)}.mform-panel{border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);overflow:hidden}.mform-panel-head{background:var(--mform-panel-head-bg, linear-gradient(90deg, #efeaff, #f8f6ff));color:var(--mform-panel-head-text, inherit);padding:10px 16px;font-weight:600;font-size:14px;border-bottom:1px solid var(--mform-border, #d9d5e6)}.mform-panel-body,.mform-group,.mform-column,.mform-tabpanel{display:flex;flex-direction:column;gap:var(--mform-gap, 16px)}.mform-panel-body{padding:var(--mform-panel-padding, 16px)}.mform-columns{display:grid;gap:var(--mform-gap, 16px)}@media(max-width:640px){.mform-columns{grid-template-columns:1fr!important}}.mform-affix{display:flex;align-items:center}.mform-affix.has-affix{border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-control-radius, 8px);background:var(--mform-control-bg, #fff)}.mform-affix.has-affix .mform-control{border:none;background:none;flex:1}.mform-affix.has-affix:focus-within{outline:2px solid var(--mform-focus, #8e6ff0);outline-offset:1px}.mform-prefix,.mform-suffix{padding:0 10px;color:var(--mform-muted, #6b6580);font-size:13px;white-space:nowrap}.mform-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.mform-tag{background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff);border-radius:999px;padding:3px 10px;font-size:12px;display:inline-flex;align-items:center;gap:6px}.mform-tag button{border:none;background:none;color:inherit;cursor:pointer;font-size:12px;padding:0;line-height:1}.mform-tag-input{flex:1;min-width:140px;width:auto}.mform-field.is-pending .mform-control{background-image:linear-gradient(90deg,transparent 0%,rgb(109 75 208 / 12%) 50%,transparent 100%);background-size:200% 100%;animation:mform-pending 1.2s linear infinite}@keyframes mform-pending{0%{background-position:200% 0}to{background-position:-200% 0}}.mform-file-name{font-size:12px;color:var(--mform-muted, #6b6580);padding:2px 0}.mform-reference{position:relative}.mform-ref-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:10;margin:0;padding:4px;list-style:none;background:var(--mform-control-bg, #fff);border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-control-radius, 8px);box-shadow:0 8px 24px #1f1b2e1f;max-height:220px;overflow-y:auto}.mform-ref-list button{display:block;width:100%;text-align:left;font:inherit;font-size:13px;padding:7px 10px;border:none;border-radius:6px;background:none;color:inherit;cursor:pointer}.mform-ref-list button:hover{background:var(--mform-bg, #f6f5fa)}.mform-tabbar{display:flex;gap:4px;border-bottom:2px solid var(--mform-border, #d9d5e6);margin-bottom:14px}.mform-tab{padding:8px 18px;font:inherit;font-size:14px;border:none;background:none;color:var(--mform-muted, #6b6580);cursor:pointer}.mform-tab.is-active{color:var(--mform-primary, #6d4bd0);font-weight:600;border-bottom:2px solid var(--mform-primary, #6d4bd0);margin-bottom:-2px}.mform-grid-row{display:flex;align-items:flex-start;gap:8px;padding:10px 0;border-bottom:1px dashed var(--mform-border, #d9d5e6)}.mform-grid-fields{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--mform-gap, 16px)}.mform-row-remove{border:none;background:none;color:var(--mform-muted, #6b6580);font:inherit;cursor:pointer;padding:6px 8px}.mform-row-remove:hover{color:var(--mform-danger, #c62842)}.mform-row-add{align-self:flex-start;background:none;border:1px dashed var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0);padding:7px 14px;border-radius:var(--mform-control-radius, 8px);font:inherit;font-size:13px;cursor:pointer}.mform-btn{align-self:flex-start;background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff);border:none;border-radius:var(--mform-control-radius, 8px);padding:11px 26px;font:inherit;font-weight:600;cursor:pointer}.mform-btn:hover{filter:brightness(1.08)}.mform-btn:focus-visible{outline:2px solid var(--mform-focus, #8e6ff0);outline-offset:2px}.mform-content{font-size:14px}.mform-unsupported{font-size:13px;color:var(--mform-muted, #6b6580);border:1px dashed var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);padding:10px 14px}.mform-steps{display:flex;gap:18px;list-style:none;margin:0 0 4px;padding:0 0 12px;border-bottom:1px solid var(--mform-border, #d9d5e6);flex-wrap:wrap}.mform-step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mform-muted, #6b6580)}.mform-step-index{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--mform-border, #d9d5e6);font-size:11px;font-weight:600}.mform-step.is-active{color:var(--mform-primary, #6d4bd0);font-weight:600}.mform-step.is-active .mform-step-index{border-color:var(--mform-primary, #6d4bd0);background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff)}.mform-step.is-done .mform-step-index{border-color:var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0)}.mform-wizard-nav{display:flex;gap:10px;padding-top:4px}.mform-btn-secondary{background:none;border:1px solid var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0)}.mform-summary{border:1px solid var(--mform-danger, #c62842);background:var(--mform-danger-bg, #fdf0f2);color:var(--mform-danger, #c62842);border-radius:var(--mform-radius, 10px);padding:12px 16px;font-size:13px}.mform-summary ul{margin:6px 0 0;padding-left:18px}\n"], dependencies: [{ kind: "component", type: FormNodeComponent, selector: "mform-node", inputs: ["node", "engine", "tick", "scope", "bare", "providers", "mode", "notify"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FormRendererComponent, decorators: [{
             type: Component,
@@ -1095,6 +1441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
               [engine]="engine"
               [tick]="tick()"
               [providers]="optionsProviders()"
+              [mode]="mode()" [notify]="bumpTick"
               [bare]="true"
             />
           }
@@ -1108,19 +1455,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
               <button type="button" class="mform-btn" (click)="nextStep()">
                 {{ labels().next }}
               </button>
-            } @else {
-              <button type="submit" class="mform-btn">{{ labels().submit }}</button>
+            } @else if (mode() === 'edit') {
+              <button type="submit" class="mform-btn" [disabled]="submitting()">
+                {{ submitting() ? '…' : labels().submit }}
+              </button>
             }
           </div>
         } @else {
           @for (node of engine.schema.fields; track node.key) {
-            <mform-node [node]="node" [engine]="engine" [tick]="tick()" [providers]="optionsProviders()" />
+            <mform-node [node]="node" [engine]="engine" [tick]="tick()" [providers]="optionsProviders()" [mode]="mode()" [notify]="bumpTick" />
           }
         }
+        @if (submitError(); as error) {
+          <div class="mform-summary" role="alert">{{ error }}</div>
+        }
       </form>
     }
-  `, styles: [".mform-root{display:flex;flex-direction:column;gap:var(--mform-gap, 16px);font-family:var(--mform-font, system-ui, \"Segoe UI\", sans-serif);color:var(--mform-text, #1f1b2e)}.mform-node{display:contents}.mform-field{display:flex;flex-direction:column;gap:6px}.mform-label{font-size:var(--mform-label-size, 13px);font-weight:var(--mform-label-weight, 600)}.mform-req{color:var(--mform-danger, #c62842);margin-left:2px}.mform-control{font:inherit;width:100%;padding:var(--mform-control-padding, 9px 12px);border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-control-radius, 8px);background:var(--mform-control-bg, #fff);color:inherit;box-sizing:border-box}textarea.mform-control{min-height:72px;resize:vertical}.mform-control:focus-visible{outline:2px solid var(--mform-focus, #8e6ff0);outline-offset:1px;border-color:var(--mform-focus, #8e6ff0)}.mform-field.has-error .mform-control{border-color:var(--mform-danger, #c62842)}.mform-desc{font-size:12px;color:var(--mform-muted, #6b6580)}.mform-error{font-size:12px;color:var(--mform-danger, #c62842)}.mform-choices{display:flex;flex-direction:column;gap:6px}.mform-check{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}.mform-check input{width:16px;height:16px;accent-color:var(--mform-primary, #6d4bd0)}.mform-panel{border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);overflow:hidden}.mform-panel-head{background:var(--mform-panel-head-bg, linear-gradient(90deg, #efeaff, #f8f6ff));color:var(--mform-panel-head-text, inherit);padding:10px 16px;font-weight:600;font-size:14px;border-bottom:1px solid var(--mform-border, #d9d5e6)}.mform-panel-body,.mform-group,.mform-column,.mform-tabpanel{display:flex;flex-direction:column;gap:var(--mform-gap, 16px)}.mform-panel-body{padding:var(--mform-panel-padding, 16px)}.mform-columns{display:grid;gap:var(--mform-gap, 16px)}.mform-tabbar{display:flex;gap:4px;border-bottom:2px solid var(--mform-border, #d9d5e6);margin-bottom:14px}.mform-tab{padding:8px 18px;font:inherit;font-size:14px;border:none;background:none;color:var(--mform-muted, #6b6580);cursor:pointer}.mform-tab.is-active{color:var(--mform-primary, #6d4bd0);font-weight:600;border-bottom:2px solid var(--mform-primary, #6d4bd0);margin-bottom:-2px}.mform-grid-row{display:flex;align-items:flex-start;gap:8px;padding:10px 0;border-bottom:1px dashed var(--mform-border, #d9d5e6)}.mform-grid-fields{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--mform-gap, 16px)}.mform-row-remove{border:none;background:none;color:var(--mform-muted, #6b6580);font:inherit;cursor:pointer;padding:6px 8px}.mform-row-remove:hover{color:var(--mform-danger, #c62842)}.mform-row-add{align-self:flex-start;background:none;border:1px dashed var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0);padding:7px 14px;border-radius:var(--mform-control-radius, 8px);font:inherit;font-size:13px;cursor:pointer}.mform-btn{align-self:flex-start;background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff);border:none;border-radius:var(--mform-control-radius, 8px);padding:11px 26px;font:inherit;font-weight:600;cursor:pointer}.mform-btn:hover{filter:brightness(1.08)}.mform-btn:focus-visible{outline:2px solid var(--mform-focus, #8e6ff0);outline-offset:2px}.mform-content{font-size:14px}.mform-unsupported{font-size:13px;color:var(--mform-muted, #6b6580);border:1px dashed var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);padding:10px 14px}.mform-steps{display:flex;gap:18px;list-style:none;margin:0 0 4px;padding:0 0 12px;border-bottom:1px solid var(--mform-border, #d9d5e6);flex-wrap:wrap}.mform-step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mform-muted, #6b6580)}.mform-step-index{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--mform-border, #d9d5e6);font-size:11px;font-weight:600}.mform-step.is-active{color:var(--mform-primary, #6d4bd0);font-weight:600}.mform-step.is-active .mform-step-index{border-color:var(--mform-primary, #6d4bd0);background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff)}.mform-step.is-done .mform-step-index{border-color:var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0)}.mform-wizard-nav{display:flex;gap:10px;padding-top:4px}.mform-btn-secondary{background:none;border:1px solid var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0)}.mform-summary{border:1px solid var(--mform-danger, #c62842);background:var(--mform-danger-bg, #fdf0f2);color:var(--mform-danger, #c62842);border-radius:var(--mform-radius, 10px);padding:12px 16px;font-size:13px}.mform-summary ul{margin:6px 0 0;padding-left:18px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: false }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], initialData: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialData", required: false }] }], optionsProviders: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsProviders", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
+  `, styles: [".mform-root{display:flex;flex-direction:column;gap:var(--mform-gap, 16px);font-family:var(--mform-font, system-ui, \"Segoe UI\", sans-serif);color:var(--mform-text, #1f1b2e)}.mform-node{display:contents}.mform-field{display:flex;flex-direction:column;gap:6px}.mform-label{font-size:var(--mform-label-size, 13px);font-weight:var(--mform-label-weight, 600)}.mform-req{color:var(--mform-danger, #c62842);margin-left:2px}.mform-control{font:inherit;width:100%;padding:var(--mform-control-padding, 9px 12px);border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-control-radius, 8px);background:var(--mform-control-bg, #fff);color:inherit;box-sizing:border-box}textarea.mform-control{min-height:72px;resize:vertical}.mform-control:focus-visible{outline:2px solid var(--mform-focus, #8e6ff0);outline-offset:1px;border-color:var(--mform-focus, #8e6ff0)}.mform-field.has-error .mform-control{border-color:var(--mform-danger, #c62842)}.mform-desc{font-size:12px;color:var(--mform-muted, #6b6580)}.mform-error{font-size:12px;color:var(--mform-danger, #c62842)}.mform-choices{display:flex;flex-direction:column;gap:6px}.mform-check{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}.mform-check input{width:16px;height:16px;accent-color:var(--mform-primary, #6d4bd0)}.mform-panel{border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);overflow:hidden}.mform-panel-head{background:var(--mform-panel-head-bg, linear-gradient(90deg, #efeaff, #f8f6ff));color:var(--mform-panel-head-text, inherit);padding:10px 16px;font-weight:600;font-size:14px;border-bottom:1px solid var(--mform-border, #d9d5e6)}.mform-panel-body,.mform-group,.mform-column,.mform-tabpanel{display:flex;flex-direction:column;gap:var(--mform-gap, 16px)}.mform-panel-body{padding:var(--mform-panel-padding, 16px)}.mform-columns{display:grid;gap:var(--mform-gap, 16px)}@media(max-width:640px){.mform-columns{grid-template-columns:1fr!important}}.mform-affix{display:flex;align-items:center}.mform-affix.has-affix{border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-control-radius, 8px);background:var(--mform-control-bg, #fff)}.mform-affix.has-affix .mform-control{border:none;background:none;flex:1}.mform-affix.has-affix:focus-within{outline:2px solid var(--mform-focus, #8e6ff0);outline-offset:1px}.mform-prefix,.mform-suffix{padding:0 10px;color:var(--mform-muted, #6b6580);font-size:13px;white-space:nowrap}.mform-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.mform-tag{background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff);border-radius:999px;padding:3px 10px;font-size:12px;display:inline-flex;align-items:center;gap:6px}.mform-tag button{border:none;background:none;color:inherit;cursor:pointer;font-size:12px;padding:0;line-height:1}.mform-tag-input{flex:1;min-width:140px;width:auto}.mform-field.is-pending .mform-control{background-image:linear-gradient(90deg,transparent 0%,rgb(109 75 208 / 12%) 50%,transparent 100%);background-size:200% 100%;animation:mform-pending 1.2s linear infinite}@keyframes mform-pending{0%{background-position:200% 0}to{background-position:-200% 0}}.mform-file-name{font-size:12px;color:var(--mform-muted, #6b6580);padding:2px 0}.mform-reference{position:relative}.mform-ref-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:10;margin:0;padding:4px;list-style:none;background:var(--mform-control-bg, #fff);border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-control-radius, 8px);box-shadow:0 8px 24px #1f1b2e1f;max-height:220px;overflow-y:auto}.mform-ref-list button{display:block;width:100%;text-align:left;font:inherit;font-size:13px;padding:7px 10px;border:none;border-radius:6px;background:none;color:inherit;cursor:pointer}.mform-ref-list button:hover{background:var(--mform-bg, #f6f5fa)}.mform-tabbar{display:flex;gap:4px;border-bottom:2px solid var(--mform-border, #d9d5e6);margin-bottom:14px}.mform-tab{padding:8px 18px;font:inherit;font-size:14px;border:none;background:none;color:var(--mform-muted, #6b6580);cursor:pointer}.mform-tab.is-active{color:var(--mform-primary, #6d4bd0);font-weight:600;border-bottom:2px solid var(--mform-primary, #6d4bd0);margin-bottom:-2px}.mform-grid-row{display:flex;align-items:flex-start;gap:8px;padding:10px 0;border-bottom:1px dashed var(--mform-border, #d9d5e6)}.mform-grid-fields{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--mform-gap, 16px)}.mform-row-remove{border:none;background:none;color:var(--mform-muted, #6b6580);font:inherit;cursor:pointer;padding:6px 8px}.mform-row-remove:hover{color:var(--mform-danger, #c62842)}.mform-row-add{align-self:flex-start;background:none;border:1px dashed var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0);padding:7px 14px;border-radius:var(--mform-control-radius, 8px);font:inherit;font-size:13px;cursor:pointer}.mform-btn{align-self:flex-start;background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff);border:none;border-radius:var(--mform-control-radius, 8px);padding:11px 26px;font:inherit;font-weight:600;cursor:pointer}.mform-btn:hover{filter:brightness(1.08)}.mform-btn:focus-visible{outline:2px solid var(--mform-focus, #8e6ff0);outline-offset:2px}.mform-content{font-size:14px}.mform-unsupported{font-size:13px;color:var(--mform-muted, #6b6580);border:1px dashed var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);padding:10px 14px}.mform-steps{display:flex;gap:18px;list-style:none;margin:0 0 4px;padding:0 0 12px;border-bottom:1px solid var(--mform-border, #d9d5e6);flex-wrap:wrap}.mform-step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mform-muted, #6b6580)}.mform-step-index{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--mform-border, #d9d5e6);font-size:11px;font-weight:600}.mform-step.is-active{color:var(--mform-primary, #6d4bd0);font-weight:600}.mform-step.is-active .mform-step-index{border-color:var(--mform-primary, #6d4bd0);background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff)}.mform-step.is-done .mform-step-index{border-color:var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0)}.mform-wizard-nav{display:flex;gap:10px;padding-top:4px}.mform-btn-secondary{background:none;border:1px solid var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0)}.mform-summary{border:1px solid var(--mform-danger, #c62842);background:var(--mform-danger-bg, #fdf0f2);color:var(--mform-danger, #c62842);border-radius:var(--mform-radius, 10px);padding:12px 16px;font-size:13px}.mform-summary ul{margin:6px 0 0;padding-left:18px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: false }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], initialData: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialData", required: false }] }], optionsProviders: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsProviders", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], submitHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitHandler", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
 
 /*
  * Runtime entry point of @mosaicoo/form-angular.
@@ -1135,5 +1487,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { FormNodeComponent, FormRendererComponent, MFORM_FIELD_COMPONENTS, MFORM_REMOTE_FETCHER, provideMosaicooForm };
+export { FormNodeComponent, FormRendererComponent, MFORM_FIELD_COMPONENTS, MFORM_REMOTE_FETCHER, MFORM_UPLOAD, provideMosaicooForm };
 //# sourceMappingURL=mosaicoo-form-angular.mjs.map