@ng-forge/dynamic-forms 1.2.0-next.1 → 1.2.0-next.10

package/fesm2022/{ng-forge-dynamic-forms-ng-forge-dynamic-forms-ZiNaCWHl.mjs → ng-forge-dynamic-forms-ng-forge-dynamic-forms-CXQe_5td.mjs}

@@ -1,15 +1,135 @@
 import * as i0 from '@angular/core';
-import { reflectComponentType, Injector, inject, EnvironmentInjector, DestroyRef, computed, signal, input, ViewContainerRef, Directive, InjectionToken, linkedSignal, ChangeDetectionStrategy, Component, Injectable, isSignal, runInInjectionContext, afterNextRender, untracked, PendingTasks, ElementRef, PLATFORM_ID, isDevMode, TemplateRef, model, contentChildren, makeEnvironmentProviders } from '@angular/core';
+import { InjectionToken, inject, PLATFORM_ID, DestroyRef, Injectable, reflectComponentType, Injector, EnvironmentInjector, computed, signal, afterNextRender, input, ViewContainerRef, Directive, isSignal, runInInjectionContext, untracked, linkedSignal, injectAsync, resource, ChangeDetectionStrategy, Component, PendingTasks, ElementRef, isDevMode, TemplateRef, model, contentChildren, makeEnvironmentProviders } from '@angular/core';
 import { explicitEffect } from 'ngxtension/explicit-effect';
-import { DynamicFormLogger, WRAPPER_COMPONENT_CACHE, WRAPPER_REGISTRY, toReadonlyFieldTreeCached, writeToFieldValue, WRAPPER_AUTO_ASSOCIATIONS, DEFAULT_WRAPPERS, READONLY_FIELD_TREE_CACHE, getGridClassString, EventBus, FieldContextRegistryService, FunctionRegistryService, FORM_OPTIONS, evaluateCondition, FIELD_SIGNAL_CONTEXT, isRowField, isContainerField, isArrayField, hasChildFields, isSimplifiedArrayField, DynamicFormError, isStateLogicConfig, isDerivationLogicConfig, isFormStateCondition, createFormStateLogicFunction, createDebouncedLogicFunction, createLogicFunction, ExpressionParser, applyValidator, isPageField, isGenericContainerField, isGroupField, getFieldValueHandling, normalizeFieldsArray, keyBy, mapValues, isEqual, hasTargetProperty, ARRAY_CONTEXT, GROUP_CONTEXT, FORM_ID_PREFIX, baseFieldMapper, detectFormMode, validatePageNesting, FIELD_REGISTRY, assertNever, ADDON_TYPE_REGISTRY, deepMergeDefaults, derivedFromDeferred, createWarningTracker, RootFormRegistryService, DEFAULT_PROPS, DEFAULT_VALIDATION_MESSAGES, EXTERNAL_DATA, DEPRECATION_WARNING_TRACKER, createAddonActionRegistry, ADDON_ACTION_REGISTRY, HttpConditionCache, HTTP_CONDITION_CACHE, HttpConditionFunctionCacheService, AsyncConditionFunctionCacheService, DynamicValueFunctionCacheService, LogicFunctionCacheService, setupInitializationTracking, ComponentInitializedEvent, DF_FIELD_TEMPLATES, rowFieldMapper, groupFieldMapper, arrayFieldMapper, pageFieldMapper, textFieldMapper, containerFieldMapper, isWrapperTypeDefinition, ADDON_TYPE_COMPONENT_CACHE, ADDON_TYPE_DEFINITIONS, createDefaultDerivationLogConfig, NoopLogger, EMIT_FORM_VALUE_ON_EVENTS, DynamicTextPipe, ADDON_ACTION_HANDLERS } from '@ng-forge/dynamic-forms/internal';
-import { takeUntilDestroyed, toObservable, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
-import { of, forkJoin, from, catchError, map, switchMap, isObservable, firstValueFrom, exhaustMap, EMPTY, debounceTime, distinctUntilChanged, tap, pipe, scan, Observable, Subject, concatMap, filter, take } from 'rxjs';
-import { submit, required, disabled, readonly, hidden, applyEach, applyWhenValue, applyWhen, apply, email, minLength, maxLength, pattern, min, max, schema, validateStandardSchema, form, provideSignalFormsConfig } from '@angular/forms/signals';
-import { isStandardSchemaMarker } from '@ng-forge/dynamic-forms/schema';
+import { derivedFrom } from 'ngxtension/derived-from';
+import { of, Observable, distinctUntilChanged, forkJoin, from, catchError, map, switchMap, pipe, isObservable, firstValueFrom, exhaustMap, EMPTY, defer, tap, scan, Subject, concatMap, filter, take, shareReplay } from 'rxjs';
+import { DynamicFormLogger, WRAPPER_COMPONENT_LOAD_CACHE, WRAPPER_COMPONENT_CACHE, WRAPPER_REGISTRY, toReadonlyFieldTreeCached, writeToFieldValue, ComponentInitializedEvent, isPageField, isGroupField, isArrayField, isRowField, isGenericContainerField, hasChildFields, normalizeFieldsArray, WRAPPER_AUTO_ASSOCIATIONS, DEFAULT_WRAPPERS, READONLY_FIELD_TREE_CACHE, EventBus, getGridClassString, FORM_OPTIONS, GROUP_CONTEXT, FIELD_REGISTRY, DynamicFormError, isContainerField, isSimplifiedArrayField, getFieldValueHandling, keyBy, mapValues, isEqual, isDerivationLogicConfig, hasTargetProperty, ARRAY_CONTEXT, FORM_ID_PREFIX, baseFieldMapper, detectFormMode, validatePageNesting, assertNever, FunctionRegistryService, ADDON_TYPE_REGISTRY, deepMergeDefaults, FIELD_SIGNAL_CONTEXT, derivedFromDeferred, FieldContextRegistryService, evaluateCondition, createWarningTracker, RootFormRegistryService, DEFAULT_PROPS, DEFAULT_VALIDATION_MESSAGES, EXTERNAL_DATA, DEPRECATION_WARNING_TRACKER, createAddonActionRegistry, ADDON_ACTION_REGISTRY, HttpConditionCache, HTTP_CONDITION_CACHE, HttpConditionFunctionCacheService, AsyncConditionFunctionCacheService, DynamicValueFunctionCacheService, LogicFunctionCacheService, DF_FIELD_TEMPLATES, rowFieldMapper, groupFieldMapper, arrayFieldMapper, pageFieldMapper, textFieldMapper, containerFieldMapper, isWrapperTypeDefinition, ADDON_TYPE_COMPONENT_CACHE, ADDON_TYPE_DEFINITIONS, createDefaultDerivationLogConfig, NoopLogger, EMIT_FORM_VALUE_ON_EVENTS, DynamicTextPipe, ADDON_ACTION_HANDLERS } from '@ng-forge/dynamic-forms/internal';
 import { isPlatformBrowser, AsyncPipe, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
+import { takeUntilDestroyed, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
+import { submit, form, provideSignalFormsConfig } from '@angular/forms/signals';
 import { NG_STATUS_CLASSES } from '@angular/forms/signals/compat';
 
+const FIELD_WINDOWING = new InjectionToken('FIELD_WINDOWING', {
+    providedIn: 'root',
+    factory: () => ({ enabled: false, eager: 12, placeholderHeight: '4rem', park: { enabled: false, margin: '100%' } }),
+});
+
+function clampWindowSize(value, fallback) {
+    if (value === undefined || !Number.isFinite(value))
+        return fallback;
+    return Math.max(0, Math.floor(value));
+}
+
+const DEFAULT_MARGIN = '100%';
+const ROOT_MARGIN_PART = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?(?:px|%)$/i;
+function normalizeFieldParkingMargin(value, fallback = DEFAULT_MARGIN) {
+    const normalizedFallback = isValidRootMargin(fallback) ? fallback.trim() : DEFAULT_MARGIN;
+    if (!value || !isValidRootMargin(value))
+        return normalizedFallback;
+    return value.trim().split(/\s+/).join(' ');
+}
+function isValidRootMargin(value) {
+    const parts = value.trim().split(/\s+/);
+    return parts.length >= 1 && parts.length <= 4 && parts.every((part) => ROOT_MARGIN_PART.test(part));
+}
+
+function resolveFieldWindowing(global, perForm) {
+    if (perForm === undefined) {
+        return global;
+    }
+    if (typeof perForm === 'boolean') {
+        return { ...global, enabled: perForm };
+    }
+    const configuresMounting = 'eager' in perForm || 'placeholderHeight' in perForm || Object.keys(perForm).length === 0;
+    return {
+        enabled: configuresMounting ? true : global.enabled,
+        eager: clampWindowSize(perForm.eager, global.eager),
+        placeholderHeight: perForm.placeholderHeight ?? global.placeholderHeight,
+        park: resolveFieldParking(global.park, perForm.park),
+    };
+}
+function resolveFieldParking(global, perForm) {
+    if (perForm === undefined)
+        return global;
+    if (typeof perForm === 'boolean')
+        return { ...global, enabled: perForm };
+    return { enabled: true, margin: normalizeFieldParkingMargin(perForm.margin, global.margin) };
+}
+
+const ALWAYS_VISIBLE = of(true);
+class FieldViewportObserver {
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID)) && typeof IntersectionObserver !== 'undefined';
+    observers = new Map();
+    constructor() {
+        inject(DestroyRef).onDestroy(() => {
+            for (const { observer } of this.observers.values())
+                observer.disconnect();
+            this.observers.clear();
+        });
+    }
+    observe(el, rootMargin) {
+        if (!this.isBrowser)
+            return ALWAYS_VISIBLE;
+        rootMargin = normalizeFieldParkingMargin(rootMargin);
+        return new Observable((subscriber) => {
+            const listener = (visible) => subscriber.next(visible);
+            this.startObserving(el, rootMargin, listener);
+                        subscriber.next(true);
+            return () => this.stopObserving(el, rootMargin, listener);
+        }).pipe(distinctUntilChanged());
+    }
+    startObserving(el, rootMargin, listener) {
+        const entry = this.observerFor(rootMargin);
+        const listeners = entry.listeners.get(el);
+        if (listeners) {
+            listeners.add(listener);
+            return;
+        }
+        entry.listeners.set(el, new Set([listener]));
+        entry.observer.observe(el);
+    }
+    stopObserving(el, rootMargin, listener) {
+        const entry = this.observers.get(rootMargin);
+        if (!entry)
+            return;
+        const listeners = entry.listeners.get(el);
+        if (!listeners)
+            return;
+        listeners.delete(listener);
+        if (listeners.size > 0)
+            return;
+        entry.observer.unobserve(el);
+        entry.listeners.delete(el);
+        if (entry.listeners.size > 0)
+            return;
+        entry.observer.disconnect();
+        this.observers.delete(rootMargin);
+    }
+    observerFor(rootMargin) {
+        const existing = this.observers.get(rootMargin);
+        if (existing)
+            return existing;
+        const listeners = new Map();
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                for (const listener of listeners.get(entry.target) ?? [])
+                    listener(entry.isIntersecting);
+            }
+        }, { rootMargin });
+        const entry = { observer, listeners };
+        this.observers.set(rootMargin, entry);
+        return entry;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FieldViewportObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FieldViewportObserver });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FieldViewportObserver, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 const EMPTY_WRAPPERS = Object.freeze([]);
+const FIELD_ERRORS_WRAPPER = 'field-errors';
+const FIELD_ERRORS_CONFIG = Object.freeze({ type: FIELD_ERRORS_WRAPPER });
 function isSameWrapperChain(a, b) {
     if (a === b)
         return true;
@@ -21,19 +141,30 @@ function isSameWrapperChain(a, b) {
     }
     return true;
 }
-function resolveWrappers(field, defaultWrappers, autoAssociations) {
-    if (field.wrappers === null) {
+function resolveWrappers(field, defaultWrappers, autoAssociations, wrapperRegistry) {
+        if (field.wrappers === null) {
         return EMPTY_WRAPPERS;
     }
     const autoWrappers = field.skipAutoWrappers ? EMPTY_WRAPPERS : (autoAssociations.get(field.type) ?? EMPTY_WRAPPERS);
     const defaults = field.skipDefaultWrappers ? EMPTY_WRAPPERS : (defaultWrappers ?? EMPTY_WRAPPERS);
     const fieldLevel = field.wrappers ?? EMPTY_WRAPPERS;
-    if (autoWrappers.length === 0 && defaults.length === 0 && fieldLevel.length === 0) {
-        return EMPTY_WRAPPERS;
+    const composed = [...autoWrappers, ...defaults, ...fieldLevel];
+            if (needsErrorWrapper(field, composed, wrapperRegistry)) {
+        composed.push(FIELD_ERRORS_CONFIG);
     }
-    return [...autoWrappers, ...defaults, ...fieldLevel];
+    return composed.length === 0 ? EMPTY_WRAPPERS : composed;
+}
+const VALIDATABLE_CONTAINERS = new Set(['group', 'array']);
+function needsErrorWrapper(field, composed, wrapperRegistry) {
+        if (!VALIDATABLE_CONTAINERS.has(field.type))
+        return false;
+    if (!field.validators || field.validators.length === 0)
+        return false;
+    return !composed.some((w) => w.type === FIELD_ERRORS_WRAPPER || wrapperRegistry.get(w.type)?.rendersFieldErrors);
 }
 
+const DEV_MODE = typeof ngDevMode === 'undefined' || !!ngDevMode;
+
 const inputNamesCache = new WeakMap();
 function getDeclaredInputs(componentType) {
     let inputs = inputNamesCache.get(componentType);
@@ -55,24 +186,33 @@ function hasDefaultExport(value) {
 function resolveDefaultExport(result) {
     return hasDefaultExport(result) ? result.default : result;
 }
-async function loadWrapperComponent(type, registry, cache) {
+async function loadWrapperComponent(type, registry, cache, loadCache) {
     const cached = cache.get(type);
     if (cached)
         return cached;
+    const pending = loadCache?.get(type);
+    if (pending)
+        return pending;
     const definition = registry.get(type);
     if (!definition)
         return undefined;
-    const component = resolveDefaultExport(await definition.loadComponent());
-    if (component)
-        cache.set(type, component);
-    return component;
-}
-function loadWrapperComponents(configs, registry, cache, logger) {
+    const load = (async () => {
+        const component = resolveDefaultExport(await definition.loadComponent());
+        if (component)
+            cache.set(type, component);
+        return component;
+    })().finally(() => loadCache?.delete(type));
+    loadCache?.set(type, load);
+    return load;
+}
+function loadWrapperComponents(configs, registry, cache, logger, loadCache) {
     if (configs.length === 0)
         return of([]);
-    return forkJoin(configs.map((config) => from(loadWrapperComponent(config.type, registry, cache)).pipe(catchError(() => of(undefined)), map((component) => {
+    return forkJoin(configs.map((config) => from(loadWrapperComponent(config.type, registry, cache, loadCache)).pipe(catchError(() => of(undefined)), map((component) => {
         if (!component) {
-            logger.error(`Wrapper type '${config.type}' could not be loaded. Ensure it is registered via provideDynamicForm().`);
+                        if (DEV_MODE) {
+                logger.error(`Wrapper type '${config.type}' could not be loaded. Ensure it is registered via provideDynamicForm().`);
+            }
             return null;
         }
         return { config, component };
@@ -112,9 +252,11 @@ function renderStep(slot, remaining, options, refs) {
                 ref.changeDetectorRef.detectChanges();
     const inner = resolveInnerSlot(ref);
     if (!inner) {
-        options.logger.error(`Wrapper component for type '${wrapper.config.type}' does not provide a 'fieldComponent' ViewContainerRef. ` +
-            `Ensure the wrapper component has a viewChild('fieldComponent', { read: ViewContainerRef }) query ` +
-            `and that #fieldComponent is not inside a conditional (@if, @defer).`);
+                if (DEV_MODE) {
+            options.logger.error(`Wrapper component for type '${wrapper.config.type}' does not provide a 'fieldComponent' ViewContainerRef. ` +
+                `Ensure the wrapper component has a viewChild('fieldComponent', { read: ViewContainerRef }) query ` +
+                `and that #fieldComponent is not inside a conditional (@if, @defer).`);
+        }
                         while (refs.length)
             refs.pop().destroy();
         return;
@@ -156,27 +298,34 @@ function createWrapperChainController(opts) {
     const deps = injectChainDeps();
     const state = createStateSignal(opts);
     const mounted = { value: null };
+    const detached = { value: null };
     let refs = [];
                 buildEmissionStream(state, deps)
         .pipe(takeUntilDestroyed(deps.destroyRef))
         .subscribe((emission) => {
                                 try {
-            refs = applyEmission(emission, { opts, deps, mounted, refs });
+            refs = applyEmission(emission, { opts, deps, mounted, refs, detached });
         }
         catch (err) {
             deps.logger.error('Wrapper chain render failed; tearing down partial state.', err);
             opts.vcr().clear();
             refs = [];
             mounted.value = null;
+                        detached.value?.destroy();
+            detached.value = null;
         }
     });
     pushFieldInputsOnChange(opts, () => refs);
-    deps.destroyRef.onDestroy(() => opts.vcr().clear());
+    deps.destroyRef.onDestroy(() => {
+        detached.value?.destroy();
+        opts.vcr().clear();
+    });
 }
 function injectChainDeps() {
     return {
         registry: inject(WRAPPER_REGISTRY),
         cache: inject(WRAPPER_COMPONENT_CACHE),
+        loadCache: inject(WRAPPER_COMPONENT_LOAD_CACHE),
         logger: inject(DynamicFormLogger),
         destroyRef: inject(DestroyRef),
         environmentInjector: inject(EnvironmentInjector),
@@ -200,16 +349,27 @@ function resolveLoadedWrappers(state, deps) {
                         const loaded = state.wrappers.map((config) => ({ config, component: deps.cache.get(config.type) }));
         return of({ state, loaded });
     }
-    return loadWrapperComponents(state.wrappers, deps.registry, deps.cache, deps.logger).pipe(map((loaded) => ({ state, loaded })));
+    return loadWrapperComponents(state.wrappers, deps.registry, deps.cache, deps.logger, deps.loadCache).pipe(map((loaded) => ({ state, loaded })));
 }
 function applyEmission({ state, loaded }, ctx) {
     const { opts, deps, mounted, refs } = ctx;
     const vcr = opts.vcr();
     const structurallyChanged = isStructurallyDifferent(mounted.value, state);
-                if (!structurallyChanged && !state.open)
+                if (!structurallyChanged && !state.open) {
+        if (vcr.length > 0)
+            ctx.detached.value = vcr.detach(0) ?? ctx.detached.value;
+        return refs;
+    }
+        if (state.open && !structurallyChanged && mounted.value !== null && ctx.detached.value) {
+        vcr.insert(ctx.detached.value);
+        ctx.detached.value = null;
         return refs;
+    }
                     if (structurallyChanged && mounted.value !== null) {
-        opts.beforeRebuild?.();
+                        const preservesDetachedOuterView = opts.beforeRebuild?.() === true;
+                        if (ctx.detached.value && !preservesDetachedOuterView)
+            ctx.detached.value.destroy();
+        ctx.detached.value = null;
         vcr.clear();
         mounted.value = null;
     }
@@ -246,7 +406,7 @@ function pushFieldInputsOnChange(opts, getRefs) {
     });
 }
 
-function buildFieldInputs(rawInputs, cache, fieldType) {
+function buildFieldInputs(rawInputs, cache, fieldType, validationMessages) {
     const fieldTreeCandidate = rawInputs['field'];
             const hasFieldTree = fieldTreeCandidate !== undefined && typeof fieldTreeCandidate === 'function';
     const readonlyField = hasFieldTree ? toReadonlyFieldTreeCached(cache, fieldTreeCandidate) : undefined;
@@ -258,6 +418,7 @@ function buildFieldInputs(rawInputs, cache, fieldType) {
         type: fieldType,
         field: readonlyField,
         setValue,
+                        ...(validationMessages !== undefined && { validationMessages }),
     };
 }
 
@@ -266,14 +427,19 @@ class FieldComponentSlot {
     state = signal(EMPTY_STATE, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
         lastInputs = null;
+        _parked = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_parked" }] : /* istanbul ignore next */ []));
         phase = () => this.state().phase;
         snapshot = () => this.state();
+        parked = this._parked.asReadonly();
         mountOrReuse(slot, component, fieldInjector, environmentInjector, rawInputs, fieldInputs) {
         const current = this.state();
         if (current.phase !== 'empty' && current.ref.componentType === component) {
             slot.insert(current.ref.hostView);
             this.lastInputs = null;
             this.state.set(Object.freeze({ phase: 'mounted', ref: current.ref, slot }));
+                                    if (this._parked())
+                current.ref.changeDetectorRef.detach();
             this.pushInputs(rawInputs, fieldInputs);
             if (current.phase === 'detached')
                 this.replayFocus(current.focusSnapshot);
@@ -282,6 +448,7 @@ class FieldComponentSlot {
                                         if (current.phase !== 'empty')
             current.ref.destroy();
         this.lastInputs = null;
+                        this._parked.set(false);
         this.state.set(EMPTY_STATE);
         const ref = slot.createComponent(component, {
             environmentInjector,
@@ -310,19 +477,42 @@ class FieldComponentSlot {
         detach() {
         const current = this.state();
         if (current.phase !== 'mounted')
-            return;
+            return false;
         const focusSnapshot = this.captureFocus(current.ref);
         const idx = current.slot.indexOf(current.ref.hostView);
         if (idx >= 0)
             current.slot.detach(idx);
         this.lastInputs = null;
         this.state.set(Object.freeze({ phase: 'detached', ref: current.ref, focusSnapshot }));
+                        return idx < 0;
+    }
+        park() {
+        const current = this.state();
+        if (current.phase === 'empty' || this._parked())
+            return;
+        current.ref.changeDetectorRef.detach();
+        this._parked.set(true);
+    }
+        refresh() {
+        const current = this.state();
+        if (current.phase === 'empty' || !this._parked())
+            return;
+        current.ref.changeDetectorRef.detectChanges();
+    }
+        unpark() {
+        const current = this.state();
+        if (current.phase === 'empty' || !this._parked())
+            return;
+        current.ref.changeDetectorRef.reattach();
+        current.ref.changeDetectorRef.markForCheck();
+        this._parked.set(false);
     }
         destroyOnTeardown() {
         const current = this.state();
         if (current.phase === 'detached')
             current.ref.destroy();
         this.lastInputs = null;
+        this._parked.set(false);
         this.state.set(EMPTY_STATE);
     }
     captureFocus(ref) {
@@ -347,6 +537,100 @@ class FieldComponentSlot {
     }
 }
 
+function emitComponentInitialized(eventBus, componentType, componentKey, injector) {
+    const logger = injector.get(DynamicFormLogger);
+    afterNextRender(() => {
+        try {
+            eventBus.dispatch(ComponentInitializedEvent, componentType, componentKey);
+        }
+        catch (error) {
+            logger.error(`Failed to emit initialization event for ${componentType} '${componentKey}'`, error);
+        }
+    }, { injector });
+}
+
+function initializationComponentKey(type, key) {
+    return `${type}:${key}`;
+}
+function initializationComponentPath(key, groupPath) {
+    return groupPath ? `${groupPath}.${key}` : key;
+}
+function initializationComponentType(field) {
+    if (isPageField(field))
+        return 'page';
+    if (isGroupField(field))
+        return 'group';
+    if (isArrayField(field))
+        return 'array';
+    if (isRowField(field) || isGenericContainerField(field))
+        return 'container';
+    return undefined;
+}
+function collectInitializingContainers(fields, groupPath = '') {
+    const identities = [];
+    for (const field of fields) {
+                if (field.hidden === true)
+            continue;
+        const type = initializationComponentType(field);
+        const componentPath = initializationComponentPath(field.key, groupPath);
+        if (type && field.key)
+            identities.push({ type, path: componentPath });
+        if (!hasChildFields(field))
+            continue;
+        const childGroupPath = isGroupField(field) ? componentPath : groupPath;
+        for (const child of normalizeFieldsArray(field.fields)) {
+            identities.push(...collectInitializingContainers((Array.isArray(child) ? child : [child]), childGroupPath));
+        }
+    }
+    return identities;
+}
+function collectInitializingContainerKeys(fields, groupPath = '') {
+    return collectInitializingContainers(fields, groupPath).map(({ type, path }) => initializationComponentKey(type, path));
+}
+function computeContainerHostClasses(containerType, className) {
+    const base = `df-field df-${containerType}`;
+    return className ? `${base} ${className}` : base;
+}
+function setupContainerInitEffect(resolvedFields, eventBus, componentType, fieldKeyFn, injector) {
+    const allReady = computed(() => {
+        const fields = resolvedFields();
+        return fields.length > 0 && fields.every((field) => field.renderReady());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allReady" }] : /* istanbul ignore next */ []));
+    explicitEffect([allReady], ([ready]) => {
+        if (ready) {
+            const type = typeof componentType === 'function' ? componentType() : componentType;
+            emitComponentInitialized(eventBus, type, fieldKeyFn(), injector);
+        }
+    });
+}
+
+const EMPTY_ERRORS = Object.freeze([]);
+function snapshotParkedDomState(fieldTree) {
+    const state = fieldTree?.();
+    if (!state)
+        return null;
+    return {
+        disabled: state.disabled?.() ?? false,
+        readonly: state.readonly?.() ?? false,
+        required: state.required?.() ?? false,
+        touched: state.touched?.() ?? false,
+        dirty: state.dirty?.() ?? false,
+        errors: state.errors?.() ?? EMPTY_ERRORS,
+    };
+}
+function isSameParkedDomState(a, b) {
+    return (a === b ||
+        (a !== null &&
+            b !== null &&
+            a.disabled === b.disabled &&
+            a.readonly === b.readonly &&
+            a.required === b.required &&
+            a.touched === b.touched &&
+            a.dirty === b.dirty &&
+            a.errors === b.errors));
+}
+
 class DfFieldOutlet {
             dfFieldOutlet = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dfFieldOutlet" }] : /* istanbul ignore next */ []));
@@ -356,25 +640,53 @@ class DfFieldOutlet {
     vcr = signal(this.vcrRef).asReadonly();
     destroyRef = inject(DestroyRef);
     wrapperAutoAssociations = inject(WRAPPER_AUTO_ASSOCIATIONS);
+    wrapperRegistry = inject(WRAPPER_REGISTRY);
     defaultWrappersSignal = inject(DEFAULT_WRAPPERS, { optional: true });
     readonlyFieldCache = inject(READONLY_FIELD_TREE_CACHE);
-        fieldComponent = new FieldComponentSlot();
+    eventBus = inject(EventBus, { optional: true });
+    injector = inject(Injector);
+    fieldComponent = new FieldComponentSlot();
     componentIdentity = computed(() => this.dfFieldOutlet().component, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "componentIdentity" }] : /* istanbul ignore next */ []));
         renderReady = computed(() => this.dfFieldOutlet().renderReady() && !this.dfFieldOutlet().hidden(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "renderReady" }] : /* istanbul ignore next */ []));
+    hidden = computed(() => this.dfFieldOutlet().hidden(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
     rawInputs = computed(() => this.dfFieldOutlet().inputs(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rawInputs" }] : /* istanbul ignore next */ []));
-        wrappers = computed(() => resolveWrappers(this.dfFieldOutlet().fieldDef, this.defaultWrappersSignal?.(), this.wrapperAutoAssociations), { ...(ngDevMode ? { debugName: "wrappers" } : /* istanbul ignore next */ {}), equal: isSameWrapperChain });
-        fieldInputs = computed(() => buildFieldInputs(this.rawInputs(), this.readonlyFieldCache, this.dfFieldOutlet().fieldDef.type), /* @ts-ignore */
+        wrappers = computed(() => resolveWrappers(this.dfFieldOutlet().fieldDef, this.defaultWrappersSignal?.(), this.wrapperAutoAssociations, this.wrapperRegistry), { ...(ngDevMode ? { debugName: "wrappers" } : /* istanbul ignore next */ {}), equal: isSameWrapperChain });
+        fieldInputs = computed(() => buildFieldInputs(this.rawInputs(), this.readonlyFieldCache, this.dfFieldOutlet().fieldDef.type, this.dfFieldOutlet().fieldDef.validationMessages), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
     defaultEnvInjector = inject(EnvironmentInjector);
-        fieldEnvInjector = computed(() => this.dfFieldOutletEnvironmentInjector() ?? this.defaultEnvInjector, /* @ts-ignore */
+    fieldEnvInjector = computed(() => this.dfFieldOutletEnvironmentInjector() ?? this.defaultEnvInjector, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fieldEnvInjector" }] : /* istanbul ignore next */ []));
-        fieldInjector = computed(() => this.dfFieldOutlet().injector, /* @ts-ignore */
+    fieldInjector = computed(() => this.dfFieldOutlet().injector, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fieldInjector" }] : /* istanbul ignore next */ []));
         outermostHostClasses = computed(() => getGridClassString(this.dfFieldOutlet().fieldDef) || undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "outermostHostClasses" }] : /* istanbul ignore next */ []));
+    formOptions = inject(FORM_OPTIONS, { optional: true });
+    globalFieldWindowing = inject(FIELD_WINDOWING);
+    viewportObserver = inject(FieldViewportObserver, { optional: true });
+    parking = computed(() => resolveFieldWindowing(this.globalFieldWindowing, this.formOptions?.()?.fieldWindowing).park, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parking" }] : /* istanbul ignore next */ []));
+        observedElement = computed(() => {
+        const state = this.fieldComponent.snapshot();
+        return state.phase === 'empty' ? null : state.ref.location.nativeElement;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "observedElement" }] : /* istanbul ignore next */ []));
+    visibility = derivedFrom([this.observedElement, this.parking], pipe(switchMap(([element, parking]) => {
+        const observer = this.viewportObserver;
+        return parking.enabled && element && observer ? observer.observe(element, parking.margin) : of(true);
+    })), { initialValue: true });
+    focusEpoch = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusEpoch" }] : /* istanbul ignore next */ []));
+    parked = computed(() => this.parking().enabled && !this.visibility(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parked" }] : /* istanbul ignore next */ []));
+    fieldTree = computed(() => {
+        const candidate = this.rawInputs()['field'];
+        return typeof candidate === 'function' ? candidate : undefined;
+    }, { ...(ngDevMode ? { debugName: "fieldTree" } : /* istanbul ignore next */ {}), equal: Object.is });
+        parkedDomState = computed(() => (this.parked() ? snapshotParkedDomState(this.fieldTree()) : null), { ...(ngDevMode ? { debugName: "parkedDomState" } : /* istanbul ignore next */ {}), equal: isSameParkedDomState });
     constructor() {
         createWrapperChainController({
             vcr: this.vcr,
@@ -390,170 +702,432 @@ class DfFieldOutlet {
                 this.fieldComponent.mountOrReuse(slot, resolved.component, resolved.injector, this.fieldEnvInjector(), this.rawInputs(), this.fieldInputs());
             },
         });
-                                        explicitEffect([this.rawInputs, this.fieldInputs], ([rawInputs, fieldInputs]) => this.fieldComponent.pushInputs(rawInputs, fieldInputs));
+                explicitEffect([this.rawInputs, this.fieldInputs], ([rawInputs, fieldInputs]) => this.fieldComponent.pushInputs(rawInputs, fieldInputs));
+                explicitEffect([this.hidden], ([hidden]) => {
+            if (!hidden || !this.eventBus)
+                return;
+            const resolved = this.dfFieldOutlet();
+            const groupContext = resolved.injector.get(GROUP_CONTEXT, null);
+            for (const { type, path } of collectInitializingContainers([resolved.fieldDef], groupContext?.groupPath())) {
+                emitComponentInitialized(this.eventBus, type, path, this.injector);
+            }
+        });
+                explicitEffect([this.observedElement, this.parking], ([element, parking], onCleanup) => {
+            if (!parking.enabled || !element)
+                return;
+                        const bumpEpoch = () => queueMicrotask(() => {
+                if (!this.destroyRef.destroyed)
+                    this.focusEpoch.update((n) => n + 1);
+            });
+            element.addEventListener('focusin', bumpEpoch);
+            element.addEventListener('focusout', bumpEpoch);
+            onCleanup(() => {
+                element.removeEventListener('focusin', bumpEpoch);
+                element.removeEventListener('focusout', bumpEpoch);
+            });
+        });
+                explicitEffect([this.parked, this.focusEpoch, this.parkedDomState], ([parked, , domState]) => {
+            if (parked && this.canPark(domState)) {
+                const alreadyParked = this.fieldComponent.parked();
+                this.fieldComponent.park();
+                if (alreadyParked)
+                    this.fieldComponent.refresh();
+            }
+            else {
+                this.fieldComponent.unpark();
+            }
+        });
         this.destroyRef.onDestroy(() => this.fieldComponent.destroyOnTeardown());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DfFieldOutlet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: DfFieldOutlet, isStandalone: true, selector: "[dfFieldOutlet]", inputs: { dfFieldOutlet: { classPropertyName: "dfFieldOutlet", publicName: "dfFieldOutlet", isSignal: true, isRequired: true, transformFunction: null }, dfFieldOutletEnvironmentInjector: { classPropertyName: "dfFieldOutletEnvironmentInjector", publicName: "dfFieldOutletEnvironmentInjector", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+        canPark(domState) {
+        const element = this.observedElement();
+        if (!element)
+            return false;
+        if (element.contains(document.activeElement))
+            return false;
+        return (domState?.errors.length ?? 0) === 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DfFieldOutlet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: DfFieldOutlet, isStandalone: true, selector: "[dfFieldOutlet]", inputs: { dfFieldOutlet: { classPropertyName: "dfFieldOutlet", publicName: "dfFieldOutlet", isSignal: true, isRequired: true, transformFunction: null }, dfFieldOutletEnvironmentInjector: { classPropertyName: "dfFieldOutletEnvironmentInjector", publicName: "dfFieldOutletEnvironmentInjector", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DfFieldOutlet, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DfFieldOutlet, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfFieldOutlet]',
                 }]
         }], ctorParameters: () => [], propDecorators: { dfFieldOutlet: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfFieldOutlet", required: true }] }], dfFieldOutletEnvironmentInjector: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfFieldOutletEnvironmentInjector", required: false }] }] } });
 
+function isPending(formSignal) {
+    return formSignal()().pending();
+}
+function isTreeValidationErrors(result) {
+    const isError = (v) => typeof v === 'object' && v !== null && 'kind' in v;
+    return Array.isArray(result) ? result.every(isError) && result.length > 0 : isError(result);
+}
 function wrapSubmissionAction(action) {
     return async (formTree) => {
         const result = action(formTree);
-                if (isObservable(result)) {
-            await firstValueFrom(result);
-            return;
-        }
-        await Promise.resolve(result);
+                const resolved = isObservable(result) ? await firstValueFrom(result) : await Promise.resolve(result);
+        return isTreeValidationErrors(resolved) ? resolved : undefined;
     };
 }
 function createSubmissionHandler(options) {
     const { eventBus, configSignal, formSignal, validSignal, logger } = options;
-                    return eventBus.on('submit').pipe(exhaustMap(() => {
+                    return eventBus.on('submit').pipe(exhaustMap((event) => {
+                                const reply = event.reply;
+        reply?.accept();
         const submissionConfig = configSignal().submission;
                         if (!submissionConfig?.action) {
+            reply?.settle(validSignal() ? { status: 'dispatched' } : { status: 'validation-failed' });
             return EMPTY;
         }
                         if (!validSignal()) {
             logger.debug('Submission action skipped: form is not valid (invalid or pending async validators)');
+            reply?.settle(isPending(formSignal) ? { status: 'pending-validation' } : { status: 'validation-failed' });
             return EMPTY;
         }
                         const wrappedAction = wrapSubmissionAction(submissionConfig.action);
-                                                                return from(submit(formSignal(), wrappedAction)).pipe(catchError((error) => {
-            logger.error('Submission action failed:', error);
-            return EMPTY;
-        }));
+                                                                                return defer(() => {
+            const formTree = formSignal();
+            return from(submit(formTree, wrappedAction)).pipe(
+                                                tap(() => {
+                                                reply?.settle(formTree().errorSummary().length ? { status: 'server-errors' } : { status: 'success' });
+            }), catchError((error) => {
+                logger.error('Submission action failed:', error);
+                reply?.settle({ status: 'action-failed', error });
+                return EMPTY;
+            }));
+        });
     }));
 }
 
 class FormSubmitEvent {
+    reply;
     type = 'submit';
-}
-
-class NextPageEvent {
-    type = 'next-page';
-}
-
-class PageChangeEvent {
-    currentPageIndex;
-    totalPages;
-    previousPageIndex;
-    type = 'page-change';
-    constructor(
-        currentPageIndex, 
-        totalPages, 
-        previousPageIndex) {
-        this.currentPageIndex = currentPageIndex;
-        this.totalPages = totalPages;
-        this.previousPageIndex = previousPageIndex;
+    constructor(reply) {
+        this.reply = reply;
     }
 }
 
-class PreviousPageEvent {
-    type = 'previous-page';
+const COMPONENT_CACHE = new InjectionToken('COMPONENT_CACHE', {
+    providedIn: 'root',
+    factory: () => new Map(),
+});
+const COMPONENT_LOAD_CACHE = new InjectionToken('COMPONENT_LOAD_CACHE', {
+    providedIn: 'root',
+    factory: () => new Map(),
+});
+function injectFieldRegistry() {
+    const registry = inject(FIELD_REGISTRY);
+    const componentCache = inject(COMPONENT_CACHE);
+    const componentLoadCache = inject(COMPONENT_LOAD_CACHE);
+    return {
+                getType(name) {
+            return registry.get(name);
+        },
+                hasType(name) {
+            return registry.has(name);
+        },
+                async loadTypeComponent(name) {
+            const fieldType = registry.get(name);
+            if (!fieldType) {
+                throw new DynamicFormError(`Field type "${name}" is not registered`);
+            }
+                        if (!fieldType.loadComponent) {
+                return undefined;
+            }
+                        const cached = componentCache.get(name);
+            if (cached) {
+                return cached;
+            }
+            const pending = componentLoadCache.get(name);
+            if (pending) {
+                return pending;
+            }
+            try {
+                const load = fieldType
+                    .loadComponent()
+                    .then(resolveDefaultExport)
+                    .then((component) => {
+                    if (component) {
+                        componentCache.set(name, component);
+                    }
+                    return component;
+                })
+                    .catch((error) => {
+                    throw new DynamicFormError(`Failed to load component for field type "${name}": ${error}`);
+                })
+                    .finally(() => componentLoadCache.delete(name));
+                componentLoadCache.set(name, load);
+                return load;
+            }
+            catch (error) {
+                throw new DynamicFormError(`Failed to load component for field type "${name}": ${error}`);
+            }
+        },
+                getLoadedComponent(name) {
+            return componentCache.get(name);
+        },
+                getTypes() {
+            return Array.from(registry.values());
+        },
+                registerTypes(types) {
+            types.forEach((type) => {
+                registry.set(type.name, type);
+            });
+        },
+                get raw() {
+            return registry;
+        },
+    };
 }
 
-class FormResetEvent {
-    type = 'form-reset';
+const NORMALIZED_ARRAY_METADATA = Symbol('normalizedArrayMetadata');
+function setNormalizedArrayMetadata(arrayField, metadata) {
+    arrayField[NORMALIZED_ARRAY_METADATA] = metadata;
 }
-
-class FormClearEvent {
-    type = 'form-clear';
+function getNormalizedArrayMetadata(arrayField) {
+    return arrayField[NORMALIZED_ARRAY_METADATA];
 }
 
-class AppendArrayItemEvent {
-    arrayKey;
-    template;
-    type = 'append-array-item';
-    constructor(
-        arrayKey, 
-        template) {
-        this.arrayKey = arrayKey;
-        this.template = template;
-    }
+function normalizeSimplifiedArrays(fields) {
+    return fields.flatMap((field) => {
+                if (isContainerField(field) && !isArrayField(field) && hasChildFields(field)) {
+            return [{ ...field, fields: normalizeSimplifiedArrays(field.fields) }];
+        }
+                if (isArrayField(field) && !isSimplifiedArrayField(field)) {
+            const normalizedItems = field.fields.map((item) => Array.isArray(item) ? normalizeSimplifiedArrays(item) : item);
+            return [{ ...field, fields: normalizedItems }];
+        }
+                if (isSimplifiedArrayField(field)) {
+            const { arrayField, addButton } = expandSimplifiedArray(field);
+            return addButton ? [arrayField, addButton] : [arrayField];
+        }
+                return [field];
+    });
 }
-
-class PrependArrayItemEvent {
-    arrayKey;
-    template;
-    type = 'prepend-array-item';
-    constructor(
-        arrayKey, 
-        template) {
-        this.arrayKey = arrayKey;
-        this.template = template;
+const INVALID_ARRAY_CHILD_TYPES = new Set(['page', 'array']);
+function validateSimplifiedTemplate(field) {
+    const { template, key } = field;
+    const isObjectTemplate = Array.isArray(template);
+    if (isObjectTemplate) {
+        const templateFields = template;
+        for (const tmpl of templateFields) {
+                                    if (INVALID_ARRAY_CHILD_TYPES.has(tmpl.type)) {
+                throw new DynamicFormError(`Simplified array "${key}" template contains a '${tmpl.type}' field (key: '${tmpl.key}'). ` +
+                    `Only leaf fields, rows, and groups are allowed as array children.`);
+            }
+        }
     }
-}
-
-class InsertArrayItemEvent {
-    arrayKey;
-    index;
-    template;
-    type = 'insert-array-item';
-    constructor(
-        arrayKey, 
-        index, 
-        template) {
-        this.arrayKey = arrayKey;
-        this.index = index;
-        this.template = template;
+    else {
+        const singleTemplate = template;
+        if (INVALID_ARRAY_CHILD_TYPES.has(singleTemplate.type)) {
+            throw new DynamicFormError(`Simplified array "${key}" template has type '${singleTemplate.type}'. ` +
+                `Only leaf fields, rows, and groups are allowed as array children.`);
+        }
     }
 }
-
-class PopArrayItemEvent {
-    arrayKey;
-    type = 'pop-array-item';
-    constructor(
-        arrayKey) {
-        this.arrayKey = arrayKey;
+function expandSimplifiedArray(field) {
+    const { template, value = [], addButton, removeButton, key, logic, minLength, maxLength, wrappers, skipAutoWrappers, skipDefaultWrappers, validators, validationMessages, required, validateWhenHidden, } = field;
+    const isObjectTemplate = Array.isArray(template);
+    const values = value;
+        validateSimplifiedTemplate(field);
+        const items = values.map((v) => {
+        if (isObjectTemplate) {
+            return buildObjectItem(template, v, removeButton);
+        }
+        return buildPrimitiveItem(template, v);
+    });
+                const addTemplate = isObjectTemplate
+        ? buildObjectItemTemplate(template, removeButton)
+        : template;
+                const hasAutoRemove = !isObjectTemplate && removeButton !== false;
+        const arrayFieldObj = {
+        key,
+        type: 'array',
+        fields: items,
+    };
+    if (logic) {
+        arrayFieldObj['logic'] = logic;
+    }
+    if (minLength !== undefined) {
+        arrayFieldObj['minLength'] = minLength;
+    }
+    if (maxLength !== undefined) {
+        arrayFieldObj['maxLength'] = maxLength;
+    }
+    if (wrappers !== undefined) {
+        arrayFieldObj['wrappers'] = wrappers;
+    }
+    if (skipAutoWrappers !== undefined) {
+        arrayFieldObj['skipAutoWrappers'] = skipAutoWrappers;
+    }
+    if (skipDefaultWrappers !== undefined) {
+        arrayFieldObj['skipDefaultWrappers'] = skipDefaultWrappers;
+    }
+            if (validators !== undefined) {
+        arrayFieldObj['validators'] = validators;
+    }
+    if (validationMessages !== undefined) {
+        arrayFieldObj['validationMessages'] = validationMessages;
+    }
+    if (required !== undefined) {
+        arrayFieldObj['required'] = required;
+    }
+    if (validateWhenHidden !== undefined) {
+        arrayFieldObj['validateWhenHidden'] = validateWhenHidden;
     }
+        const arrayField = arrayFieldObj;
+                                                const primitiveFieldKey = !isObjectTemplate ? template.key : undefined;
+    const metadataTemplate = isObjectTemplate ? buildObjectItemTemplate(template, removeButton) : template;
+    setNormalizedArrayMetadata(arrayFieldObj, {
+        ...(hasAutoRemove && { autoRemoveButton: buildRemoveButton(removeButton) }),
+        ...(primitiveFieldKey && { primitiveFieldKey }),
+        template: metadataTemplate,
+    });
+        let addButtonField;
+    if (addButton !== false) {
+        const buttonConfig = (typeof addButton === 'object' ? addButton : {});
+                addButtonField = {
+            key: `${key}__add`,
+            type: 'add-array-item',
+            label: buttonConfig.label ?? 'Add',
+            arrayKey: key,
+            template: addTemplate,
+            ...(buttonConfig.props && { props: buttonConfig.props }),
+                                    ...(logic && { logic }),
+        };
+    }
+    return { arrayField, addButton: addButtonField };
 }
-
-class ShiftArrayItemEvent {
-    arrayKey;
-    type = 'shift-array-item';
-    constructor(
-        arrayKey) {
-        this.arrayKey = arrayKey;
+function buildPrimitiveItem(template, value) {
+    return { ...template, value };
+}
+function buildObjectItem(template, valueObj, removeButton) {
+    const fieldsWithValues = template.map((templateField) => ({
+        ...templateField,
+        ...(Object.hasOwn(valueObj, templateField.key) && { value: valueObj[templateField.key] }),
+    }));
+    if (removeButton === false) {
+        return fieldsWithValues;
     }
+    return [...fieldsWithValues, buildRemoveButton(removeButton)];
 }
-
-class MoveArrayItemEvent {
-    arrayKey;
-    fromIndex;
-    toIndex;
-    type = 'move-array-item';
-    constructor(
-        arrayKey, 
-        fromIndex, 
-        toIndex) {
-        this.arrayKey = arrayKey;
-        this.fromIndex = fromIndex;
-        this.toIndex = toIndex;
+function buildObjectItemTemplate(template, removeButton) {
+    if (removeButton === false) {
+        return template;
     }
+    return [...template, buildRemoveButton(removeButton)];
+}
+function buildRemoveButton(config) {
+    const buttonConfig = (typeof config === 'object' ? config : {});
+        return {
+        key: '__remove',
+        type: 'remove-array-item',
+        label: buttonConfig.label ?? 'Remove',
+        ...(buttonConfig.props && { props: buttonConfig.props }),
+    };
 }
 
-class RemoveAtIndexEvent {
-    arrayKey;
-    index;
-    type = 'remove-at-index';
+function collectFieldDefs(fields, out = []) {
+    for (const field of fields ?? []) {
+        out.push(field);
+        const children = field.fields;
+        if (Array.isArray(children)) {
+                        for (const child of children) {
+                if (Array.isArray(child))
+                    collectFieldDefs(child, out);
+                else
+                    collectFieldDefs([child], out);
+            }
+        }
+        const metadata = getNormalizedArrayMetadata(field);
+        const template = metadata?.template;
+        if (Array.isArray(template))
+            collectFieldDefs(template, out);
+        else if (template)
+            collectFieldDefs([template], out);
+        if (metadata?.autoRemoveButton)
+            collectFieldDefs([metadata.autoRemoveButton], out);
+    }
+    return out;
+}
+function injectFormComponentPreloader() {
+    const fieldRegistry = injectFieldRegistry();
+    const wrapperRegistry = inject(WRAPPER_REGISTRY);
+    const wrapperCache = inject(WRAPPER_COMPONENT_CACHE);
+    const wrapperLoadCache = inject(WRAPPER_COMPONENT_LOAD_CACHE);
+    const autoAssociations = inject(WRAPPER_AUTO_ASSOCIATIONS);
+    const defaultWrappers = inject(DEFAULT_WRAPPERS, { optional: true });
+    const preloadedConfigs = new WeakSet();
+    const preloadedFieldRoots = new WeakSet();
+    const preloadFields = (fields) => {
+        const unseenFields = fields.filter((field) => {
+            if (preloadedFieldRoots.has(field))
+                return false;
+            preloadedFieldRoots.add(field);
+            return true;
+        });
+        if (unseenFields.length === 0)
+            return;
+        const normalizedFields = normalizeSimplifiedArrays(unseenFields);
+        const defs = collectFieldDefs(normalizedFields);
+        if (defs.length === 0)
+            return;
+        const fieldTypes = new Set();
+        const wrapperTypes = new Set();
+        for (const def of defs) {
+            if (def.type)
+                fieldTypes.add(def.type);
+                                                for (const wrapper of resolveWrappers(def, defaultWrappers?.(), autoAssociations, wrapperRegistry)) {
+                wrapperTypes.add(wrapper.type);
+            }
+        }
+        const started = [];
+        for (const type of fieldTypes) {
+            if (fieldRegistry.getLoadedComponent(type))
+                continue;
+            started.push(Promise.resolve(fieldRegistry.loadTypeComponent(type)).catch(() => undefined));
+        }
+        for (const type of wrapperTypes) {
+            if (wrapperCache.has(type))
+                continue;
+            started.push(loadWrapperComponent(type, wrapperRegistry, wrapperCache, wrapperLoadCache).catch(() => undefined));
+        }
+                void Promise.allSettled(started);
+    };
+    return {
+        preloadConfig: (config) => {
+            if (preloadedConfigs.has(config))
+                return;
+            preloadedConfigs.add(config);
+            const fields = config.fields;
+                                                if (fields.length > 0 && fields.every(isPageField))
+                return;
+            preloadFields(fields);
+        },
+        preloadFields,
+    };
+}
+
+class PageChangeEvent {
+    currentPageIndex;
+    totalPages;
+    previousPageIndex;
+    type = 'page-change';
     constructor(
-        arrayKey, 
-        index) {
-        this.arrayKey = arrayKey;
-        this.index = index;
+        currentPageIndex, 
+        totalPages, 
+        previousPageIndex) {
+        this.currentPageIndex = currentPageIndex;
+        this.totalPages = totalPages;
+        this.previousPageIndex = previousPageIndex;
     }
 }
 
-class PageNavigationStateChangeEvent {
+class PagerStateEvent {
     state;
-    type = 'page-navigation-state-change';
+    type = 'pager-state';
     constructor(state) {
         this.state = state;
     }
@@ -564,512 +1138,19 @@ const PAGE_PRELOAD_WINDOW = new InjectionToken('PAGE_PRELOAD_WINDOW', {
     factory: () => 1,
 });
 
-function clampWindowSize(value, fallback) {
-    if (value === undefined || !Number.isFinite(value))
-        return fallback;
-    return Math.max(0, Math.floor(value));
-}
-
-class PageOrchestratorComponent {
-    eventBus = inject(EventBus);
-    fieldContextRegistry = inject(FieldContextRegistryService);
-    functionRegistry = inject(FunctionRegistryService);
-    formOptions = inject(FORM_OPTIONS, { optional: true });
-    globalPreloadWindow = inject(PAGE_PRELOAD_WINDOW);
-        pageFields = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pageFields" }] : /* istanbul ignore next */ []));
-        form = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
-            fieldSignalContext = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fieldSignalContext" }] : /* istanbul ignore next */ []));
-        pageHiddenStates = computed(() => {
-        const pages = this.pageFields();
-        return pages.map((page) => this.evaluatePageHidden(page));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pageHiddenStates" }] : /* istanbul ignore next */ []));
-        visiblePageIndices = computed(() => {
-        const hiddenStates = this.pageHiddenStates();
-        return hiddenStates
-            .map((hidden, index) => ({ index, hidden }))
-            .filter((item) => !item.hidden)
-            .map((item) => item.index);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visiblePageIndices" }] : /* istanbul ignore next */ []));
-        currentPageIndex = linkedSignal(() => {
-        const totalPages = this.pageFields().length;
-        if (totalPages === 0)
-            return 0;
-                return 0;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentPageIndex" }] : /* istanbul ignore next */ []));
-        state = computed(() => {
-        const currentIndex = this.currentPageIndex();
-        const totalPages = this.pageFields().length;
-        const visibleIndices = this.visiblePageIndices();
-                const currentVisiblePosition = visibleIndices.indexOf(currentIndex);
-        const isFirstVisiblePage = currentVisiblePosition === 0 || currentVisiblePosition === -1;
-        const isLastVisiblePage = currentVisiblePosition >= visibleIndices.length - 1;
-        return {
-            currentPageIndex: currentIndex,
-            totalPages,
-            isFirstPage: isFirstVisiblePage,
-            isLastPage: isLastVisiblePage,
-            navigationDisabled: false,
-        };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-        currentPageValid = computed(() => {
-        const currentIndex = this.currentPageIndex();
-        const pages = this.pageFields();
-        const form = this.form();
-                if (pages.length === 0 || currentIndex >= pages.length) {
-            return true;
+function collectLeafFieldKeys(fields) {
+    const keys = [];
+    for (const field of fields) {
+        if (isRowField(field) || isGenericContainerField(field)) {
+            keys.push(...collectLeafFieldKeys(field.fields));
         }
-        const currentPage = pages[currentIndex];
-        const pageFields = currentPage.fields || [];
-                const leafKeys = collectLeafFieldKeys(pageFields);
-                        for (const fieldKey of leafKeys) {
-            const field = form[fieldKey];
-            if (field && typeof field === 'function') {
-                const fieldState = field();
-                if (fieldState && typeof fieldState.valid === 'function' && !fieldState.valid()) {
-                    return false;
-                }
-            }
-        }
-        return true;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentPageValid" }] : /* istanbul ignore next */ []));
-        extendedFieldSignalContext = computed(() => ({
-        ...this.fieldSignalContext(),
-        currentPageValid: this.currentPageValid,
-    }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "extendedFieldSignalContext" }] : /* istanbul ignore next */ []));
-        preloadWindow = computed(() => {
-        const perForm = this.formOptions?.()?.pagePreloadWindow;
-                return clampWindowSize(perForm, this.globalPreloadWindow);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "preloadWindow" }] : /* istanbul ignore next */ []));
-        isWithinPreloadWindow(i) {
-        return Math.abs(i - this.state().currentPageIndex) <= this.preloadWindow();
-    }
-    constructor() {
-                this.setupEventListeners();
-                explicitEffect([this.state, this.visiblePageIndices], ([state, visibleIndices]) => {
-            const currentVisiblePosition = visibleIndices.indexOf(state.currentPageIndex);
-            if (currentVisiblePosition === -1 && visibleIndices.length > 0) {
-                                const nearest = this.findNearestVisiblePage(state.currentPageIndex, visibleIndices);
-                if (nearest !== -1) {
-                    this.navigateToPage(nearest);
-                }
-            }
-        });
-    }
-        navigateToNextPage() {
-                        const disableWhenPageInvalid = this.formOptions?.()?.nextButton?.disableWhenPageInvalid ?? true;
-        if (disableWhenPageInvalid && !this.currentPageValid()) {
-            return {
-                success: false,
-                newPageIndex: this.state().currentPageIndex,
-                error: 'Current page has invalid fields',
-            };
-        }
-        const currentState = this.state();
-        const visibleIndices = this.visiblePageIndices();
-        if (currentState.isLastPage) {
-            return {
-                success: false,
-                newPageIndex: currentState.currentPageIndex,
-                error: 'Already on the last visible page',
-            };
-        }
-        if (currentState.navigationDisabled) {
-            return {
-                success: false,
-                newPageIndex: currentState.currentPageIndex,
-                error: 'Navigation is currently disabled',
-            };
-        }
-                const currentVisiblePosition = visibleIndices.indexOf(currentState.currentPageIndex);
-        if (currentVisiblePosition === -1 || currentVisiblePosition >= visibleIndices.length - 1) {
-            return {
-                success: false,
-                newPageIndex: currentState.currentPageIndex,
-                error: 'No next visible page available',
-            };
-        }
-        const nextVisiblePageIndex = visibleIndices[currentVisiblePosition + 1];
-        return this.navigateToPage(nextVisiblePageIndex);
-    }
-        navigateToPreviousPage() {
-        const currentState = this.state();
-        const visibleIndices = this.visiblePageIndices();
-        if (currentState.isFirstPage) {
-            return {
-                success: false,
-                newPageIndex: currentState.currentPageIndex,
-                error: 'Already on the first visible page',
-            };
-        }
-        if (currentState.navigationDisabled) {
-            return {
-                success: false,
-                newPageIndex: currentState.currentPageIndex,
-                error: 'Navigation is currently disabled',
-            };
-        }
-                const currentVisiblePosition = visibleIndices.indexOf(currentState.currentPageIndex);
-        if (currentVisiblePosition <= 0) {
-            return {
-                success: false,
-                newPageIndex: currentState.currentPageIndex,
-                error: 'No previous visible page available',
-            };
-        }
-        const prevVisiblePageIndex = visibleIndices[currentVisiblePosition - 1];
-        return this.navigateToPage(prevVisiblePageIndex);
-    }
-        navigateToPage(pageIndex) {
-        const currentState = this.state();
-        const totalPages = currentState.totalPages;
-                if (pageIndex < 0 || pageIndex >= totalPages) {
-            return {
-                success: false,
-                newPageIndex: currentState.currentPageIndex,
-                error: `Invalid page index: ${pageIndex}. Valid range is 0 to ${totalPages - 1}`,
-            };
-        }
-                const visibleIndices = this.visiblePageIndices();
-        if (!visibleIndices.includes(pageIndex)) {
-            return {
-                success: false,
-                newPageIndex: currentState.currentPageIndex,
-                error: `Cannot navigate to hidden page at index ${pageIndex}. Visible pages: [${visibleIndices.join(', ')}]`,
-            };
-        }
-                if (pageIndex === currentState.currentPageIndex) {
-            return {
-                success: true,
-                newPageIndex: pageIndex,
-            };
-        }
-                const previousIndex = currentState.currentPageIndex;
-        this.currentPageIndex.set(pageIndex);
-                this.eventBus.dispatch(PageChangeEvent, pageIndex, totalPages, previousIndex);
-        return {
-            success: true,
-            newPageIndex: pageIndex,
-        };
-    }
-        findNearestVisiblePage(currentIndex, visibleIndices) {
-        let nearest = -1;
-        let minDistance = Infinity;
-        for (const idx of visibleIndices) {
-            const distance = Math.abs(idx - currentIndex);
-                        if (distance < minDistance || (distance === minDistance && idx > nearest)) {
-                minDistance = distance;
-                nearest = idx;
-            }
-        }
-        return nearest;
-    }
-        setupEventListeners() {
-                this.eventBus
-            .on('next-page')
-            .pipe(takeUntilDestroyed())
-            .subscribe(() => {
-            this.navigateToNextPage();
-        });
-                this.eventBus
-            .on('previous-page')
-            .pipe(takeUntilDestroyed())
-            .subscribe(() => {
-            this.navigateToPreviousPage();
-        });
-        explicitEffect([this.state], ([state]) => this.eventBus.dispatch(PageNavigationStateChangeEvent, state));
-    }
-        evaluatePageHidden(page) {
-                if (!page.logic || page.logic.length === 0) {
-            return false;
-        }
-                const hiddenLogic = page.logic.filter((l) => l.type === 'hidden');
-                if (hiddenLogic.length === 0) {
-            return false;
-        }
-                for (const logic of hiddenLogic) {
-                        if (typeof logic.condition === 'boolean') {
-                if (logic.condition) {
-                    return true;
-                }
-                continue;
-            }
-                        const condition = logic.condition;
-            const context = this.fieldContextRegistry.createDisplayOnlyContext(page.key || '', this.functionRegistry.getCustomFunctions());
-            if (evaluateCondition(condition, context)) {
-                return true;
-            }
-        }
-        return false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: PageOrchestratorComponent, isStandalone: true, selector: "div[page-orchestrator]", inputs: { pageFields: { classPropertyName: "pageFields", publicName: "pageFields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, fieldSignalContext: { classPropertyName: "fieldSignalContext", publicName: "fieldSignalContext", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-current-page": "state().currentPageIndex", "attr.data-total-pages": "state().totalPages" }, classAttribute: "df-page-orchestrator" }, providers: [
-            {
-                provide: FIELD_SIGNAL_CONTEXT,
-                useFactory: (orchestrator) => orchestrator.extendedFieldSignalContext(),
-                deps: [PageOrchestratorComponent],
-            },
-        ], ngImport: i0, template: `
-    @for (pageField of pageFields(); track pageField.key; let i = $index) {
-      <!--
-        Skip pages hidden by 'hidden' logic conditions entirely. FormStateManager
-        derives schema/value/validators from config (not from mounted components),
-        so unmounting a hidden page has no effect on form state — only on render +
-        CD cost. This is the page-level equivalent of the existing field-level
-        \`@if (!field.hidden())\` gate in page-field.component.ts.
-      -->
-      @if (!pageHiddenStates()[i]) {
-        @if (isWithinPreloadWindow(i)) {
-          <!-- Current and preloaded neighbour pages: render immediately for flicker-free navigation -->
-          @defer (on immediate) {
-            <section
-              page-field
-              [field]="pageField"
-              [key]="pageField.key"
-              [pageIndex]="i"
-              [isVisible]="i === state().currentPageIndex"
-            ></section>
-          } @placeholder {
-            <div class="df-page-placeholder" [attr.data-page-index]="i" [attr.data-page-key]="pageField.key"></div>
-          }
-        } @else {
-          <!--
-            Pages outside the preload window render only a lightweight placeholder
-            — they are NOT mounted. Mounting every page eagerly (previously via
-            \`@defer (on idle)\`, which fires almost immediately post-load) put all
-            fields of every page in the DOM at once: O(all-fields) initial render
-            blocking + O(all-fields) change detection on every keystroke, with no
-            visible benefit since only one page is shown at a time.
-
-            Form state (schema/value/validators) derives from config, not from
-            mounted components, so leaving a page unmounted does not affect
-            validity, derivations, or navigation. A page mounts the moment
-            navigation brings it into the preload window (above), which is
-            flicker-free for sequential next/previous navigation. The window size
-            is configurable via \`withPagePreload(n)\` or \`FormOptions.pagePreloadWindow\`.
-          -->
-          <div class="df-page-placeholder" [attr.data-page-index]="i" [attr.data-page-key]="pageField.key"></div>
-        }
-      }
-    }
-  `, isInline: true, styles: [":host{display:block;position:relative;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [/* @ts-ignore */
-                import('./ng-forge-dynamic-forms-page-field.component-Wbz6S8iH.mjs').then(m => m.default)]] });
-}
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.1", ngImport: i0, type: PageOrchestratorComponent, resolveDeferredDeps: () => [/* @ts-ignore */
-        import('./ng-forge-dynamic-forms-page-field.component-Wbz6S8iH.mjs').then(m => m.default)], resolveMetadata: PageFieldComponent => ({ decorators: [{
-                type: Component,
-                args: [{ selector: 'div[page-orchestrator]', imports: [PageFieldComponent], template: `
-    @for (pageField of pageFields(); track pageField.key; let i = $index) {
-      <!--
-        Skip pages hidden by 'hidden' logic conditions entirely. FormStateManager
-        derives schema/value/validators from config (not from mounted components),
-        so unmounting a hidden page has no effect on form state — only on render +
-        CD cost. This is the page-level equivalent of the existing field-level
-        \`@if (!field.hidden())\` gate in page-field.component.ts.
-      -->
-      @if (!pageHiddenStates()[i]) {
-        @if (isWithinPreloadWindow(i)) {
-          <!-- Current and preloaded neighbour pages: render immediately for flicker-free navigation -->
-          @defer (on immediate) {
-            <section
-              page-field
-              [field]="pageField"
-              [key]="pageField.key"
-              [pageIndex]="i"
-              [isVisible]="i === state().currentPageIndex"
-            ></section>
-          } @placeholder {
-            <div class="df-page-placeholder" [attr.data-page-index]="i" [attr.data-page-key]="pageField.key"></div>
-          }
-        } @else {
-          <!--
-            Pages outside the preload window render only a lightweight placeholder
-            — they are NOT mounted. Mounting every page eagerly (previously via
-            \`@defer (on idle)\`, which fires almost immediately post-load) put all
-            fields of every page in the DOM at once: O(all-fields) initial render
-            blocking + O(all-fields) change detection on every keystroke, with no
-            visible benefit since only one page is shown at a time.
-
-            Form state (schema/value/validators) derives from config, not from
-            mounted components, so leaving a page unmounted does not affect
-            validity, derivations, or navigation. A page mounts the moment
-            navigation brings it into the preload window (above), which is
-            flicker-free for sequential next/previous navigation. The window size
-            is configurable via \`withPagePreload(n)\` or \`FormOptions.pagePreloadWindow\`.
-          -->
-          <div class="df-page-placeholder" [attr.data-page-index]="i" [attr.data-page-key]="pageField.key"></div>
-        }
-      }
-    }
-  `, host: {
-                            class: 'df-page-orchestrator',
-                            '[attr.data-current-page]': 'state().currentPageIndex',
-                            '[attr.data-total-pages]': 'state().totalPages',
-                        }, providers: [
-                            {
-                                provide: FIELD_SIGNAL_CONTEXT,
-                                useFactory: (orchestrator) => orchestrator.extendedFieldSignalContext(),
-                                deps: [PageOrchestratorComponent],
-                            },
-                        ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;position:relative;width:100%}\n"] }]
-            }], ctorParameters: () => [], propDecorators: { pageFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageFields", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], fieldSignalContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldSignalContext", required: true }] }] } }) });
-function collectLeafFieldKeys(fields) {
-    const keys = [];
-    for (const field of fields) {
-        if (isRowField(field)) {
-                        keys.push(...collectLeafFieldKeys(field.fields));
-        }
-        else if (field.key) {
-            keys.push(field.key);
+        else if (field.key) {
+            keys.push(field.key);
         }
     }
     return keys;
 }
 
-const NORMALIZED_ARRAY_METADATA = Symbol('normalizedArrayMetadata');
-function setNormalizedArrayMetadata(arrayField, metadata) {
-    arrayField[NORMALIZED_ARRAY_METADATA] = metadata;
-}
-function getNormalizedArrayMetadata(arrayField) {
-    return arrayField[NORMALIZED_ARRAY_METADATA];
-}
-
-function normalizeSimplifiedArrays(fields) {
-    return fields.flatMap((field) => {
-                if (isContainerField(field) && !isArrayField(field) && hasChildFields(field)) {
-            return [{ ...field, fields: normalizeSimplifiedArrays(field.fields) }];
-        }
-                if (isArrayField(field) && !isSimplifiedArrayField(field)) {
-            const normalizedItems = field.fields.map((item) => Array.isArray(item) ? normalizeSimplifiedArrays(item) : item);
-            return [{ ...field, fields: normalizedItems }];
-        }
-                if (isSimplifiedArrayField(field)) {
-            const { arrayField, addButton } = expandSimplifiedArray(field);
-            return addButton ? [arrayField, addButton] : [arrayField];
-        }
-                return [field];
-    });
-}
-const INVALID_ARRAY_CHILD_TYPES = new Set(['page', 'array']);
-function validateSimplifiedTemplate(field) {
-    const { template, key } = field;
-    const isObjectTemplate = Array.isArray(template);
-    if (isObjectTemplate) {
-        const templateFields = template;
-        for (const tmpl of templateFields) {
-                                    if (INVALID_ARRAY_CHILD_TYPES.has(tmpl.type)) {
-                throw new DynamicFormError(`Simplified array "${key}" template contains a '${tmpl.type}' field (key: '${tmpl.key}'). ` +
-                    `Only leaf fields, rows, and groups are allowed as array children.`);
-            }
-        }
-    }
-    else {
-        const singleTemplate = template;
-        if (INVALID_ARRAY_CHILD_TYPES.has(singleTemplate.type)) {
-            throw new DynamicFormError(`Simplified array "${key}" template has type '${singleTemplate.type}'. ` +
-                `Only leaf fields, rows, and groups are allowed as array children.`);
-        }
-    }
-}
-function expandSimplifiedArray(field) {
-    const { template, value = [], addButton, removeButton, key, logic, minLength, maxLength, wrappers, skipAutoWrappers, skipDefaultWrappers, } = field;
-    const isObjectTemplate = Array.isArray(template);
-    const values = value;
-        validateSimplifiedTemplate(field);
-        const items = values.map((v) => {
-        if (isObjectTemplate) {
-            return buildObjectItem(template, v, removeButton);
-        }
-        return buildPrimitiveItem(template, v);
-    });
-                const addTemplate = isObjectTemplate
-        ? buildObjectItemTemplate(template, removeButton)
-        : template;
-                const hasAutoRemove = !isObjectTemplate && removeButton !== false;
-        const arrayFieldObj = {
-        key,
-        type: 'array',
-        fields: items,
-    };
-    if (logic) {
-        arrayFieldObj['logic'] = logic;
-    }
-    if (minLength !== undefined) {
-        arrayFieldObj['minLength'] = minLength;
-    }
-    if (maxLength !== undefined) {
-        arrayFieldObj['maxLength'] = maxLength;
-    }
-    if (wrappers !== undefined) {
-        arrayFieldObj['wrappers'] = wrappers;
-    }
-    if (skipAutoWrappers !== undefined) {
-        arrayFieldObj['skipAutoWrappers'] = skipAutoWrappers;
-    }
-    if (skipDefaultWrappers !== undefined) {
-        arrayFieldObj['skipDefaultWrappers'] = skipDefaultWrappers;
-    }
-        const arrayField = arrayFieldObj;
-                                                const primitiveFieldKey = !isObjectTemplate ? template.key : undefined;
-    const metadataTemplate = isObjectTemplate ? buildObjectItemTemplate(template, removeButton) : template;
-    setNormalizedArrayMetadata(arrayFieldObj, {
-        ...(hasAutoRemove && { autoRemoveButton: buildRemoveButton(removeButton) }),
-        ...(primitiveFieldKey && { primitiveFieldKey }),
-        template: metadataTemplate,
-    });
-        let addButtonField;
-    if (addButton !== false) {
-        const buttonConfig = (typeof addButton === 'object' ? addButton : {});
-                addButtonField = {
-            key: `${key}__add`,
-            type: 'add-array-item',
-            label: buttonConfig.label ?? 'Add',
-            arrayKey: key,
-            template: addTemplate,
-            ...(buttonConfig.props && { props: buttonConfig.props }),
-                                    ...(logic && { logic }),
-        };
-    }
-    return { arrayField, addButton: addButtonField };
-}
-function buildPrimitiveItem(template, value) {
-    return { ...template, value };
-}
-function buildObjectItem(template, valueObj, removeButton) {
-    const fieldsWithValues = template.map((templateField) => ({
-        ...templateField,
-        ...(Object.hasOwn(valueObj, templateField.key) && { value: valueObj[templateField.key] }),
-    }));
-    if (removeButton === false) {
-        return fieldsWithValues;
-    }
-    return [...fieldsWithValues, buildRemoveButton(removeButton)];
-}
-function buildObjectItemTemplate(template, removeButton) {
-    if (removeButton === false) {
-        return template;
-    }
-    return [...template, buildRemoveButton(removeButton)];
-}
-function buildRemoveButton(config) {
-    const buttonConfig = (typeof config === 'object' ? config : {});
-        return {
-        key: '__remove',
-        type: 'remove-array-item',
-        label: buttonConfig.label ?? 'Remove',
-        ...(buttonConfig.props && { props: buttonConfig.props }),
-    };
-}
-
 function createSlot() {
     let counter = 0;
     const templates = new Map();
@@ -1113,529 +1194,134 @@ function createSlot() {
             itemOrder.length = 0;
             counter = 0;
             primitiveFieldKey.set(undefined);
-        },
-    };
-}
-class ArrayItemRegistryService {
-    slots = new Map();
-        slotFor(arrayPath) {
-        let slot = this.slots.get(arrayPath);
-        if (!slot) {
-            slot = createSlot();
-            this.slots.set(arrayPath, slot);
-        }
-        return slot;
-    }
-        clearAll() {
-        for (const slot of this.slots.values())
-            slot.clear();
-        this.slots.clear();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ArrayItemRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ArrayItemRegistryService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ArrayItemRegistryService, decorators: [{
-            type: Injectable
-        }] });
-
-class SchemaRegistryService {
-    registeredSchemas = new Map();
-        registerSchema(schema) {
-        this.registeredSchemas.set(schema.name, schema);
-    }
-        getSchema(name) {
-        return this.registeredSchemas.get(name);
-    }
-        getAllSchemas() {
-        return new Map(this.registeredSchemas);
-    }
-        clearSchemas() {
-        this.registeredSchemas.clear();
-    }
-        resolveSchema(schema) {
-        if (typeof schema === 'string') {
-            return this.getSchema(schema) || null;
-        }
-        return schema;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SchemaRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SchemaRegistryService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SchemaRegistryService, decorators: [{
-            type: Injectable
-        }] });
-
-const DEV_MODE = typeof ngDevMode === 'undefined' || !!ngDevMode;
-
-const DEFAULT_DEBOUNCE_MS = 500;
-function createDebouncedEffect(source, callback, options) {
-    const { ms = DEFAULT_DEBOUNCE_MS, injector } = options;
-    const source$ = toObservable(source, { injector }).pipe(debounceTime(ms), distinctUntilChanged(), tap((value) => callback(value)));
-    return toSignal(source$, { injector });
-}
-function createDebouncedSignal(source, options) {
-    const { ms = DEFAULT_DEBOUNCE_MS, injector } = options;
-    const source$ = toObservable(source, { injector }).pipe(debounceTime(ms), distinctUntilChanged());
-    return toSignal(source$, { injector });
-}
-
-function getConfigTrigger(config) {
-    if (!isStateLogicConfig(config)) {
-        return 'onChange';
-    }
-    return config.trigger ?? 'onChange';
-}
-function getConfigDebounceMs(config) {
-    if (!isStateLogicConfig(config)) {
-        return undefined;
-    }
-        if (config.trigger === 'debounced') {
-        return config.debounceMs;
-    }
-    return undefined;
-}
-function applyLogic(config, fieldPath) {
-        if (isDerivationLogicConfig(config))
-        return;
-        if (!isStateLogicConfig(config)) {
-        if (DEV_MODE) {
-            console.warn(`[Dynamic Forms] Unrecognized logic config type '${config.type}' in applyLogic. ` +
-                'This config will be ignored. If this is a new logic type, ensure it is handled explicitly.');
-        }
-        return;
-    }
-    const path = fieldPath;
-    const trigger = getConfigTrigger(config);
-    const debounceMs = getConfigDebounceMs(config) ?? DEFAULT_DEBOUNCE_MS;
-    if (typeof config.condition === 'boolean') {
-        applyLogicFn(config.type, path, () => config.condition);
-        return;
-    }
-        if (isFormStateCondition(config.condition)) {
-                        if (config.condition === 'formInvalid' || config.condition === 'pageInvalid') {
-            const reason = config.condition === 'formInvalid'
-                ? `it would create a validation cycle against the form's own validity`
-                : `a value field has no page context for it to resolve against`;
-            throw new DynamicFormError(`The '${config.condition}' form-state condition is not supported on value-field logic because ${reason}. ` +
-                `Use 'formSubmitting', or apply this condition to a button or container instead.`);
-        }
-        applyLogicFn(config.type, path, createFormStateLogicFunction(config.condition));
-        return;
-    }
-        const logicFn = trigger === 'debounced'
-        ? createDebouncedLogicFunction(config.condition, debounceMs)
-        : createLogicFunction(config.condition);
-    applyLogicFn(config.type, path, logicFn);
-}
-function applyLogicFn(type, path, logicFn) {
-    switch (type) {
-        case 'hidden':
-            hidden(path, logicFn);
-            break;
-        case 'readonly':
-            readonly(path, logicFn);
-            break;
-        case 'disabled':
-            disabled(path, logicFn);
-            break;
-        case 'required':
-            required(path, { when: logicFn });
-            break;
-        default: {
-            const _exhaustive = type;
-            throw new DynamicFormError(`Unhandled state logic type: ${_exhaustive}`);
-        }
-    }
-}
-function applyMultipleLogic(configs, fieldPath) {
-    configs.forEach((config) => applyLogic(config, fieldPath));
-}
-
-function createTypePredicateFunction(predicate, logger) {
-    return (value) => {
-        try {
-                        const result = ExpressionParser.evaluate(predicate, { value });
-            return Boolean(result);
-        }
-        catch (error) {
-            logger.error('Error evaluating type predicate:', predicate, error);
-            return false;
-        }
-    };
-}
-
-function applySchema(config, fieldPath) {
-    const logger = inject(DynamicFormLogger);
-    const schemaRegistry = inject(SchemaRegistryService);
-    const schema = schemaRegistry.resolveSchema(config.schema);
-    if (!schema) {
-        const availableSchemas = Array.from(schemaRegistry.getAllSchemas().keys()).join(', ') || '<none>';
-        logger.error(`Schema not found: '${config.schema}'. ` +
-            `Available schemas: ${availableSchemas}. ` +
-            `Ensure the schema is registered in your schema registry.`);
-        return;
-    }
-    const schemaFn = createSchemaFunction(schema, logger);
-        const path = fieldPath;
-    switch (config.type) {
-        case 'apply':
-            apply(path, schemaFn);
-            break;
-        case 'applyWhen':
-            if (config.condition) {
-                const conditionFn = createLogicFunction(config.condition);
-                applyWhen(path, conditionFn, schemaFn);
-            }
-            break;
-        case 'applyWhenValue':
-            if (config.typePredicate) {
-                const predicate = createTypePredicateFunction(config.typePredicate, logger);
-                applyWhenValue(path, predicate, schemaFn);
-            }
-            break;
-        case 'applyEach':
-            applyEach(path, schemaFn);
-            break;
-    }
-}
-function createSchemaFunction(schema, logger) {
-    return (path) => {
-                schema.validators?.forEach((validatorConfig) => {
-            applyValidator(validatorConfig, path);
-        });
-                schema.logic?.forEach((logicConfig) => {
-            applyLogic(logicConfig, path);
-        });
-                schema.subSchemas?.forEach((subSchemaConfig) => {
-            applySchema(subSchemaConfig, path);
-        });
-    };
-}
-
-function combineAncestorHiddenLogics(logics) {
-    if (logics.length === 0)
-        return undefined;
-    if (logics.length === 1)
-        return logics[0];
-    return (ctx) => logics.some((fn) => fn(ctx));
-}
-function resolveFieldOwnContext(fieldDef, parentContext) {
-    if (fieldDef.validateWhenHidden === undefined)
-        return parentContext;
-    if (fieldDef.validateWhenHidden === parentContext.validateWhenHidden)
-        return parentContext;
-    return {
-        ...parentContext,
-        validateWhenHidden: fieldDef.validateWhenHidden,
-    };
-}
-function resolveDescendantContext(fieldDef, ownContext) {
-    let ancestorAlwaysHidden = ownContext.ancestorAlwaysHidden;
-    let ancestorHiddenLogics = ownContext.ancestorHiddenLogics;
-    let mutated = false;
-    if (fieldDef.hidden === true && !ancestorAlwaysHidden) {
-        ancestorAlwaysHidden = true;
-        mutated = true;
-    }
-    if (fieldDef.logic) {
-        for (const logic of fieldDef.logic) {
-            if (!isStateLogicConfig(logic) || logic.type !== 'hidden')
-                continue;
-            const condition = logic.condition;
-            if (condition === true) {
-                if (!ancestorAlwaysHidden) {
-                    ancestorAlwaysHidden = true;
-                    mutated = true;
-                }
-                continue;
-            }
-            if (condition === false)
-                continue;
-                                    if (typeof condition === 'string')
-                continue;
-                                    const fn = createLogicFunction(condition);
-            ancestorHiddenLogics = ancestorHiddenLogics.length === 0 ? [fn] : [...ancestorHiddenLogics, fn];
-            mutated = true;
-        }
-    }
-    if (!mutated)
-        return ownContext;
-    return {
-        validateWhenHidden: ownContext.validateWhenHidden,
-        ancestorAlwaysHidden,
-        ancestorHiddenLogics,
-    };
-}
-
-const DEFAULT_FIELD_TREE_MAPPING_CONTEXT = {
-    validateWhenHidden: false,
-    ancestorAlwaysHidden: false,
-    ancestorHiddenLogics: [],
-};
-function applyStringValidators(path, config) {
-    if (config.email) {
-        email(path);
-    }
-    if (config.minLength !== undefined) {
-        minLength(path, config.minLength);
-    }
-    if (config.maxLength !== undefined) {
-        maxLength(path, config.maxLength);
-    }
-    if (config.pattern) {
-        let regex;
-        if (typeof config.pattern === 'string') {
-            try {
-                regex = new RegExp(config.pattern);
-            }
-            catch (e) {
-                throw new DynamicFormError(`Invalid regex pattern: '${config.pattern}' — ${e instanceof Error ? e.message : String(e)}`);
-            }
-        }
-        else {
-            regex = config.pattern;
-        }
-        pattern(path, regex);
-    }
-}
-function applyNumberValidators(path, config) {
-    if (config.min !== undefined) {
-        min(path, config.min);
-    }
-    if (config.max !== undefined) {
-        max(path, config.max);
-    }
-}
-function getStringValidationConfig(fieldDef) {
-    if (!fieldDef.email && fieldDef.minLength === undefined && fieldDef.maxLength === undefined && !fieldDef.pattern) {
-        return undefined;
-    }
-    return {
-        email: fieldDef.email,
-        minLength: fieldDef.minLength,
-        maxLength: fieldDef.maxLength,
-        pattern: fieldDef.pattern,
-    };
-}
-function getNumberValidationConfig(fieldDef) {
-    const minVal = fieldDef.min ?? fieldDef.minValue;
-    const maxVal = fieldDef.max ?? fieldDef.maxValue;
-    if (minVal === undefined && maxVal === undefined) {
-        return undefined;
-    }
-    return { min: minVal, max: maxVal };
-}
-function mapFieldToForm(fieldDef, fieldPath, inheritedContext = DEFAULT_FIELD_TREE_MAPPING_CONTEXT) {
-    const ownContext = resolveFieldOwnContext(fieldDef, inheritedContext);
-                if (isPageField(fieldDef) || isRowField(fieldDef) || isGenericContainerField(fieldDef)) {
-        const descendantContext = resolveDescendantContext(fieldDef, ownContext);
-        mapContainerChildren(fieldDef.fields, fieldPath, descendantContext);
-        return;
-    }
-                    if (isGroupField(fieldDef)) {
-        const descendantContext = resolveDescendantContext(fieldDef, ownContext);
-        mapContainerChildren(fieldDef.fields, fieldPath, descendantContext);
-        return;
-    }
-        if (isArrayField(fieldDef)) {
-        const descendantContext = resolveDescendantContext(fieldDef, ownContext);
-        mapArrayFieldToForm(fieldDef, fieldPath, descendantContext);
-        return;
-    }
-                mapLeafField(fieldDef, fieldPath, ownContext);
-}
-function mapContainerChildren(fields, parentPath, inheritedContext) {
-    if (!fields)
-        return;
-    const pathRecord = parentPath;
-    for (const field of fields) {
-        if (isPageField(field) || isRowField(field) || isGenericContainerField(field)) {
-                                    const layoutOwn = resolveFieldOwnContext(field, inheritedContext);
-            const layoutDescendant = resolveDescendantContext(field, layoutOwn);
-            mapContainerChildren(field.fields, parentPath, layoutDescendant);
-            continue;
-        }
-        if (!field.key)
-            continue;
-        const childPath = pathRecord[field.key];
-        if (childPath) {
-            mapFieldToForm(field, childPath, inheritedContext);
-        }
-    }
-}
-function isValidationStateLogic(config) {
-    return isStateLogicConfig(config) && config.type === 'required';
-}
-function mapLeafField(fieldDef, fieldPath, context) {
-    const validationField = fieldDef;
-    const path = fieldPath;
-                applyFieldState(fieldDef, path);
-    if (validationField.logic) {
-        for (const config of validationField.logic) {
-            if (!isValidationStateLogic(config)) {
-                applyLogic(config, fieldPath);
-            }
-        }
-    }
-    if (validationField.schemas) {
-        for (const config of validationField.schemas) {
-            applySchema(config, fieldPath);
-        }
-    }
-        const applyValidation = (validationPath) => {
-        applySimpleValidationRules(validationField, validationPath);
-        if (validationField.validators) {
-            for (const config of validationField.validators) {
-                applyValidator(config, validationPath);
-            }
-        }
-        if (validationField.logic) {
-            for (const config of validationField.logic) {
-                if (isValidationStateLogic(config)) {
-                    applyLogic(config, validationPath);
-                }
-            }
-        }
+        },
     };
-    if (context.validateWhenHidden) {
-        applyValidation(path);
-        return;
-    }
-            if (context.ancestorAlwaysHidden) {
-        return;
-    }
-                            const ancestorHiddenLogic = combineAncestorHiddenLogics(context.ancestorHiddenLogics);
-    applyWhen(path, (ctx) => {
-        if (ctx.state.hidden())
-            return false;
-        if (ancestorHiddenLogic && ancestorHiddenLogic(ctx))
-            return false;
-        return true;
-    }, schema((subPath) => applyValidation(subPath)));
 }
-function applySimpleValidationRules(fieldDef, path) {
-    if (fieldDef.required) {
-        required(path);
-    }
-        const stringConfig = getStringValidationConfig(fieldDef);
-    if (stringConfig) {
-        applyStringValidators(path, stringConfig);
+class ArrayItemRegistryService {
+    slots = new Map();
+        slotFor(arrayPath) {
+        let slot = this.slots.get(arrayPath);
+        if (!slot) {
+            slot = createSlot();
+            this.slots.set(arrayPath, slot);
+        }
+        return slot;
     }
-        const numberConfig = getNumberValidationConfig(fieldDef);
-    if (numberConfig) {
-        applyNumberValidators(path, numberConfig);
+        clearAll() {
+        for (const slot of this.slots.values())
+            slot.clear();
+        this.slots.clear();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ArrayItemRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ArrayItemRegistryService });
 }
-function applyFieldState(fieldDef, path) {
-    if (fieldDef.disabled) {
-        disabled(path);
-    }
-    if (fieldDef.readonly) {
-        readonly(path);
-    }
-    if (fieldDef.hidden) {
-        hidden(path, () => true);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ArrayItemRegistryService, decorators: [{
+            type: Injectable
+        }] });
+
+class SchemaRegistryService {
+    registeredSchemas = new Map();
+        registerSchema(schema) {
+        this.registeredSchemas.set(schema.name, schema);
     }
-}
-function mapArrayFieldToForm(arrayField, fieldPath, context) {
-    if (!isArrayField(arrayField)) {
-        return;
+        getSchema(name) {
+        return this.registeredSchemas.get(name);
     }
-        if (arrayField.minLength !== undefined) {
-        minLength(fieldPath, arrayField.minLength);
+        getAllSchemas() {
+        return new Map(this.registeredSchemas);
     }
-    if (arrayField.maxLength !== undefined) {
-        maxLength(fieldPath, arrayField.maxLength);
+        clearSchemas() {
+        this.registeredSchemas.clear();
     }
-        let itemDefinitions = arrayField.fields;
-                    if (!itemDefinitions || itemDefinitions.length === 0) {
-        const metadataTemplate = getNormalizedArrayMetadata(arrayField)?.template;
-        if (metadataTemplate) {
-            itemDefinitions = [
-                Array.isArray(metadataTemplate) ? [...metadataTemplate] : metadataTemplate,
-            ];
+        resolveSchema(schema) {
+        if (typeof schema === 'string') {
+            return this.getSchema(schema) || null;
         }
+        return schema;
     }
-            if (!itemDefinitions || itemDefinitions.length === 0) {
-        const emptyItemSchema = schema(() => {
-                    });
-        applyEach(fieldPath, emptyItemSchema);
-        return;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SchemaRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SchemaRegistryService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SchemaRegistryService, decorators: [{
+            type: Injectable
+        }] });
+
+function inheritContainerExclusion(container, child) {
+    const inheritedHidden = container.hidden === true || child.inheritedExclusionState?.hidden === true;
+    const inheritedDisabled = container.disabled === true || child.inheritedExclusionState?.disabled === true;
+    const inheritedReadonly = container.readonly === true || child.inheritedExclusionState?.readonly === true;
+    const hasInheritedState = inheritedHidden || inheritedDisabled || inheritedReadonly;
+    const containerExcludeConfig = container.excludeValueIfHidden !== undefined ||
+        container.excludeValueIfDisabled !== undefined ||
+        container.excludeValueIfReadonly !== undefined;
+    if (!hasInheritedState && !containerExcludeConfig) {
+        return child;
     }
-        let hasPrimitiveItems = false;
-    const allObjectFields = [];
-    for (const itemDef of itemDefinitions) {
-        if (Array.isArray(itemDef)) {
-                        collectFieldsFromObjectItem(itemDef, allObjectFields);
+    return {
+        ...child,
+        ...(hasInheritedState
+            ? { inheritedExclusionState: { hidden: inheritedHidden, disabled: inheritedDisabled, readonly: inheritedReadonly } }
+            : {}),
+                excludeValueIfHidden: child.excludeValueIfHidden ?? container.excludeValueIfHidden,
+        excludeValueIfDisabled: child.excludeValueIfDisabled ?? container.excludeValueIfDisabled,
+        excludeValueIfReadonly: child.excludeValueIfReadonly ?? container.excludeValueIfReadonly,
+    };
+}
+function flattenFields(fields, registry, options = {}) {
+    const result = [];
+    let autoKeyCounter = 0;
+        for (const field of fields) {
+                        const valueHandling = getFieldValueHandling(field.type, registry);
+                                if (options.preserveRows && (isRowField(field) || isGenericContainerField(field))) {
+            if (field.fields) {
+                                const flattenedChildren = flattenFields(normalizeFieldsArray(field.fields), registry, options);
+                                                const autoPrefix = isRowField(field) ? 'auto_row' : 'auto_container';
+                result.push({
+                    ...field,
+                    fields: flattenedChildren,
+                    key: field.key || `${autoPrefix}_${autoKeyCounter++}`,
+                });
+            }
         }
-        else if (isPageField(itemDef) ||
-            isRowField(itemDef) ||
-            isGenericContainerField(itemDef)) {
-                                                collectFieldsFromObjectItem([itemDef], allObjectFields);
+        else if (valueHandling === 'flatten' && 'fields' in field) {
+                                    if (field.fields) {
+                const fields = field.fields;
+                const flattenedChildren = flattenFields(normalizeFieldsArray(fields), registry, options);
+                                                                                                                result.push(...flattenedChildren.map((child) => inheritContainerExclusion(field, child)));
+            }
         }
-        else {
-                        hasPrimitiveItems = true;
+        else if (isGroupField(field)) {
+                                    const childFieldsArray = Object.values(field.fields);
+            const flattenedChildren = flattenFields(childFieldsArray, registry, options);
+                        result.push({
+                ...field,
+                fields: flattenedChildren,
+                key: field.key || `auto_group_${autoKeyCounter++}`,
+            });
         }
-    }
-        if (hasPrimitiveItems && allObjectFields.length === 0) {
-        const primitiveItemSchema = schema(() => {
-                    });
-        applyEach(fieldPath, primitiveItemSchema);
-        return;
-    }
-            const itemSchema = schema((itemPath) => {
-        const pathRecord = itemPath;
-                for (const templateField of allObjectFields) {
-            if (isRowField(templateField) || isPageField(templateField) || isGenericContainerField(templateField)) {
-                                const layoutOwn = resolveFieldOwnContext(templateField, context);
-                const layoutDescendant = resolveDescendantContext(templateField, layoutOwn);
-                mapContainerChildren(templateField.fields, itemPath, layoutDescendant);
-            }
-            else if (isGroupField(templateField)) {
-                                const groupKey = templateField.key;
-                const groupOwn = resolveFieldOwnContext(templateField, context);
-                const groupDescendant = resolveDescendantContext(templateField, groupOwn);
-                if (groupKey) {
-                    const groupPath = pathRecord[groupKey];
-                    if (groupPath) {
-                        mapContainerChildren(templateField.fields, groupPath, groupDescendant);
-                    }
-                }
-                else {
-                                        mapContainerChildren(templateField.fields, itemPath, groupDescendant);
-                }
-            }
-            else {
-                                const fieldKey = templateField.key;
-                if (fieldKey) {
-                    const fieldPathForKey = pathRecord[fieldKey];
-                    if (fieldPathForKey) {
-                        mapFieldToForm(templateField, fieldPathForKey, context);
-                    }
+        else if (isArrayField(field)) {
+                                                                                                            const flattenedItemTemplates = field.fields.map((itemDef) => {
+                if (!Array.isArray(itemDef)) {
+                                        const flattened = flattenFields([itemDef], registry, options);
+                    return flattened[0];
                 }
-            }
-        }
-    });
-    applyEach(fieldPath, itemSchema);
-}
-function collectFieldsFromObjectItem(itemFields, allFields) {
-    const seenKeys = new Set(allFields.map((f) => f.key).filter(Boolean));
-    for (const field of itemFields) {
-                if (isRowField(field) || isPageField(field) || isGenericContainerField(field)) {
-                        const containerKey = `__container_${field.type}_${JSON.stringify(field.fields?.map((f) => f.key))}`;
-            if (!seenKeys.has(containerKey)) {
-                seenKeys.add(containerKey);
-                allFields.push(field);
-            }
+                                return flattenFields([...itemDef], registry, options);
+            });
+                        result.push({
+                ...field,
+                fields: flattenedItemTemplates,
+                key: field.key || `auto_array_${autoKeyCounter++}`,
+            });
         }
         else {
-            const key = field.key;
-            if (key && !seenKeys.has(key)) {
-                seenKeys.add(key);
-                allFields.push(field);
-            }
+                                    const key = field.key || `auto_field_${autoKeyCounter++}`;
+            result.push({
+                ...field,
+                key,
+            });
         }
     }
+    return result;
 }
 
 function getFieldDefaultValue(field, registry) {
@@ -1730,169 +1416,15 @@ function getFieldDefaultValue(field, registry) {
                 }
             }
             return itemValue;
-        });
-    }
-                        if (field.type === 'input' && 'props' in field) {
-        const props = field.props;
-        if (props?.type === 'number') {
-            return NaN;
-        }
-    }
-    return '';
-}
-
-function applyFormLevelSchema(path, formLevelSchema) {
-    if (isStandardSchemaMarker(formLevelSchema)) {
-                                validateStandardSchema(path, formLevelSchema.schema);
-    }
-    else if (typeof formLevelSchema === 'function') {
-                                formLevelSchema(path);
-    }
-}
-function createFormLevelSchema(formLevelSchema) {
-    return schema((path) => {
-        applyFormLevelSchema(path, formLevelSchema);
-    });
-}
-
-const VALIDATION_EXECUTION_DEFAULTS = new InjectionToken('VALIDATION_EXECUTION_DEFAULTS', {
-    providedIn: 'root',
-    factory: () => ({
-        validateWhenHidden: false,
-    }),
-});
-
-function createSchemaFromFields(fields, registry, options = {}) {
-            const validationExecutionDefaults = inject(VALIDATION_EXECUTION_DEFAULTS);
-    const { formLevelSchema } = options;
-    const rootContext = {
-        validateWhenHidden: options.validateWhenHidden ?? validationExecutionDefaults.validateWhenHidden,
-        ancestorAlwaysHidden: false,
-        ancestorHiddenLogics: [],
-    };
-    return schema((path) => {
-        for (const fieldDef of fields) {
-            const valueHandling = getFieldValueHandling(fieldDef.type, registry);
-                        if (valueHandling === 'exclude') {
-                                continue;
-            }
-            if (valueHandling === 'flatten' && hasChildFields(fieldDef)) {
-                                                                const flattenedOwn = resolveFieldOwnContext(fieldDef, rootContext);
-                const flattenedContext = resolveDescendantContext(fieldDef, flattenedOwn);
-                for (const childField of normalizeFieldsArray(fieldDef.fields)) {
-                    if (!childField.key)
-                        continue;
-                    const childPath = path[childField.key];
-                    if (childPath) {
-                        mapFieldToForm(childField, childPath, flattenedContext);
-                    }
-                }
-                continue;
-            }
-                        const fieldPath = path[fieldDef.key];
-            if (!fieldPath) {
-                continue;
-            }
-                                                mapFieldToForm(fieldDef, fieldPath, rootContext);
-        }
-                if (formLevelSchema) {
-            applyFormLevelSchema(path, formLevelSchema);
-        }
-    });
-}
-function fieldsToDefaultValues(fields, registry) {
-    const defaultValues = {};
-    for (const field of fields) {
-        if (!field.key)
-            continue;
-                const valueHandling = getFieldValueHandling(field.type, registry);
-        if (valueHandling === 'flatten') {
-            continue;
-        }
-        const value = getFieldDefaultValue(field, registry);
-        if (value !== undefined) {
-            defaultValues[field.key] = value;
-        }
-    }
-    return defaultValues;
-}
-
-function inheritContainerExclusion(container, child) {
-    const inheritedHidden = container.hidden === true || child.inheritedExclusionState?.hidden === true;
-    const inheritedDisabled = container.disabled === true || child.inheritedExclusionState?.disabled === true;
-    const inheritedReadonly = container.readonly === true || child.inheritedExclusionState?.readonly === true;
-    const hasInheritedState = inheritedHidden || inheritedDisabled || inheritedReadonly;
-    const containerExcludeConfig = container.excludeValueIfHidden !== undefined ||
-        container.excludeValueIfDisabled !== undefined ||
-        container.excludeValueIfReadonly !== undefined;
-    if (!hasInheritedState && !containerExcludeConfig) {
-        return child;
-    }
-    return {
-        ...child,
-        ...(hasInheritedState
-            ? { inheritedExclusionState: { hidden: inheritedHidden, disabled: inheritedDisabled, readonly: inheritedReadonly } }
-            : {}),
-                excludeValueIfHidden: child.excludeValueIfHidden ?? container.excludeValueIfHidden,
-        excludeValueIfDisabled: child.excludeValueIfDisabled ?? container.excludeValueIfDisabled,
-        excludeValueIfReadonly: child.excludeValueIfReadonly ?? container.excludeValueIfReadonly,
-    };
-}
-function flattenFields(fields, registry, options = {}) {
-    const result = [];
-    let autoKeyCounter = 0;
-        for (const field of fields) {
-                        const valueHandling = getFieldValueHandling(field.type, registry);
-                                if (options.preserveRows && (isRowField(field) || isGenericContainerField(field))) {
-            if (field.fields) {
-                                const flattenedChildren = flattenFields(normalizeFieldsArray(field.fields), registry, options);
-                                                const autoPrefix = isRowField(field) ? 'auto_row' : 'auto_container';
-                result.push({
-                    ...field,
-                    fields: flattenedChildren,
-                    key: field.key || `${autoPrefix}_${autoKeyCounter++}`,
-                });
-            }
-        }
-        else if (valueHandling === 'flatten' && 'fields' in field) {
-                                    if (field.fields) {
-                const fields = field.fields;
-                const flattenedChildren = flattenFields(normalizeFieldsArray(fields), registry, options);
-                                                                                                                result.push(...flattenedChildren.map((child) => inheritContainerExclusion(field, child)));
-            }
-        }
-        else if (isGroupField(field)) {
-                                    const childFieldsArray = Object.values(field.fields);
-            const flattenedChildren = flattenFields(childFieldsArray, registry, options);
-                        result.push({
-                ...field,
-                fields: flattenedChildren,
-                key: field.key || `auto_group_${autoKeyCounter++}`,
-            });
-        }
-        else if (isArrayField(field)) {
-                                                                                                            const flattenedItemTemplates = field.fields.map((itemDef) => {
-                if (!Array.isArray(itemDef)) {
-                                        const flattened = flattenFields([itemDef], registry, options);
-                    return flattened[0];
-                }
-                                return flattenFields([...itemDef], registry, options);
-            });
-                        result.push({
-                ...field,
-                fields: flattenedItemTemplates,
-                key: field.key || `auto_array_${autoKeyCounter++}`,
-            });
-        }
-        else {
-                                    const key = field.key || `auto_field_${autoKeyCounter++}`;
-            result.push({
-                ...field,
-                key,
-            });
+        });
+    }
+                        if (field.type === 'input' && 'props' in field) {
+        const props = field.props;
+        if (props?.type === 'number') {
+            return NaN;
         }
     }
-    return result;
+    return '';
 }
 
 function createContainerFieldProcessors() {
@@ -2329,60 +1861,6 @@ function isValidFormConfiguration(fields) {
     return FormModeValidator.validateFormConfiguration(fields).isValid;
 }
 
-const COMPONENT_CACHE = new InjectionToken('COMPONENT_CACHE', {
-    providedIn: 'root',
-    factory: () => new Map(),
-});
-function injectFieldRegistry() {
-    const registry = inject(FIELD_REGISTRY);
-    const componentCache = inject(COMPONENT_CACHE);
-    return {
-                getType(name) {
-            return registry.get(name);
-        },
-                hasType(name) {
-            return registry.has(name);
-        },
-                async loadTypeComponent(name) {
-            const fieldType = registry.get(name);
-            if (!fieldType) {
-                throw new DynamicFormError(`Field type "${name}" is not registered`);
-            }
-                        if (!fieldType.loadComponent) {
-                return undefined;
-            }
-                        const cached = componentCache.get(name);
-            if (cached) {
-                return cached;
-            }
-            try {
-                const component = resolveDefaultExport(await fieldType.loadComponent());
-                if (component) {
-                    componentCache.set(name, component);
-                }
-                return component;
-            }
-            catch (error) {
-                throw new DynamicFormError(`Failed to load component for field type "${name}": ${error}`);
-            }
-        },
-                getLoadedComponent(name) {
-            return componentCache.get(name);
-        },
-                getTypes() {
-            return Array.from(registry.values());
-        },
-                registerTypes(types) {
-            types.forEach((type) => {
-                registry.set(type.name, type);
-            });
-        },
-                get raw() {
-            return registry;
-        },
-    };
-}
-
 function collectFieldData(fields, data, registry, pathPrefix, collectKeys = true) {
     for (const field of fields) {
                                 const valueHandling = field.type ? getFieldValueHandling(field.type, registry) : 'include';
@@ -2429,7 +1907,9 @@ function validateRegexPattern(pattern, fieldKey, errors) {
         new RegExp(pattern);
     }
     catch (e) {
-        errors.push(`Invalid regex pattern in validator for field '${fieldKey}': '${pattern}' — ${e instanceof Error ? e.message : String(e)}`);
+                errors.push(DEV_MODE
+            ? `Invalid regex pattern in validator for field '${fieldKey}': '${pattern}' — ${e instanceof Error ? e.message : String(e)}`
+            : `Invalid regex pattern: '${pattern}'`);
     }
 }
 function validateNoDuplicateKeys(allKeys) {
@@ -2445,7 +1925,9 @@ function validateNoDuplicateKeys(allKeys) {
         const duplicateList = Array.from(duplicates)
             .map((k) => `'${k}'`)
             .join(', ');
-        throw new DynamicFormError(`Duplicate field keys detected: ${duplicateList}. Field keys must be unique within their group scope (the same key may appear inside different groups).`);
+                throw new DynamicFormError(DEV_MODE
+            ? `Duplicate field keys detected: ${duplicateList}. Field keys must be unique within their group scope (the same key may appear inside different groups).`
+            : `Duplicate field keys detected: ${duplicateList}.`);
     }
 }
 function validateNoDomIdCollisions(domIds) {
@@ -2461,9 +1943,11 @@ function validateNoDomIdCollisions(domIds) {
         const duplicateList = Array.from(duplicates)
             .map((k) => `'${k}'`)
             .join(', ');
-        throw new DynamicFormError(`DOM id collision detected for: ${duplicateList}. Group-nested keys are joined with '_' to form DOM ids ` +
-            `(e.g. group 'foo' + leaf 'bar' renders as id='foo_bar'). A separate top-level key like 'foo_bar' or a different ` +
-            `group/leaf pair that underscores to the same string will produce duplicate ids. Rename one of the colliding keys.`);
+                throw new DynamicFormError(DEV_MODE
+            ? `DOM id collision detected for: ${duplicateList}. Group-nested keys are joined with '_' to form DOM ids ` +
+                `(e.g. group 'foo' + leaf 'bar' renders as id='foo_bar'). A separate top-level key like 'foo_bar' or a different ` +
+                `group/leaf pair that underscores to the same string will produce duplicate ids. Rename one of the colliding keys.`
+            : `DOM id collision detected for: ${duplicateList}.`);
     }
 }
 function validateFieldTypesRegistered(allTypes, registry, logger) {
@@ -2493,12 +1977,15 @@ function validateFormConfig(fields, registry, logger) {
         const list = Array.from(new Set(data.dottedKeys))
             .map((k) => `'${k}'`)
             .join(', ');
-        throw new DynamicFormError(`Field key(s) contain a dot: ${list}. Dotted keys are not supported — express nesting with 'group' fields ` +
-            `(e.g. { type: 'group', key: 'address', fields: [{ type: 'input', key: 'city' }] }).`);
+                throw new DynamicFormError(DEV_MODE
+            ? `Field key(s) contain a dot: ${list}. Dotted keys are not supported — express nesting with 'group' fields ` +
+                `(e.g. { type: 'group', key: 'address', fields: [{ type: 'input', key: 'city' }] }).`
+            : `Field key(s) contain a dot: ${list}.`);
     }
     validateNoDuplicateKeys(data.keys);
     validateNoDomIdCollisions(data.domIds);
-    validateFieldTypesRegistered(data.types, registry, logger);
+        if (DEV_MODE)
+        validateFieldTypesRegistered(data.types, registry, logger);
     if (data.regexErrors.length > 0) {
         throw new DynamicFormError(data.regexErrors.length === 1
             ? data.regexErrors[0]
@@ -2713,6 +2200,33 @@ function resolveExclusionConfig(global, form, field) {
         excludeValueIfReadonly: field?.excludeValueIfReadonly ?? form?.excludeValueIfReadonly ?? global.excludeValueIfReadonly,
     };
 }
+function hasEnabledValueExclusion(fields, global, form) {
+    return fields.some((field) => {
+        const resolved = resolveExclusionConfig(global, form, field);
+        if (resolved.excludeValueIfHidden || resolved.excludeValueIfDisabled || resolved.excludeValueIfReadonly) {
+            return true;
+        }
+        return (isGroupField(field) && !!field.fields && hasEnabledValueExclusion(Object.values(field.fields), global, form));
+    });
+}
+function filterDeclaredValueShape(rawValue, fields, registry) {
+    const kept = {};
+    for (const field of fields) {
+        const key = field.key;
+        if (!key || !(key in rawValue))
+            continue;
+        const valueHandling = getFieldValueHandling(field.type, registry);
+        if (valueHandling === 'exclude' || valueHandling === 'flatten')
+            continue;
+        const value = rawValue[key];
+        if (isGroupField(field) && field.fields && value !== null && typeof value === 'object' && !Array.isArray(value)) {
+            kept[key] = filterDeclaredValueShape(value, Object.values(field.fields), registry);
+            continue;
+        }
+        kept[key] = value;
+    }
+    return kept;
+}
 function shouldExcludeField(field, fieldState, config) {
     const state = fieldState();
     const inherited = field.inheritedExclusionState;
@@ -2730,7 +2244,10 @@ function shouldExcludeField(field, fieldState, config) {
     }
     return false;
 }
-function filterFormValue(rawValue, schemaFields, formTree, registry, globalDefaults, formOptions) {
+function filterFormValue(rawValue, schemaFields, formTree, registry, globalDefaults, formOptions, exclusionEnabled = hasEnabledValueExclusion(schemaFields, globalDefaults, formOptions)) {
+            if (!exclusionEnabled) {
+        return filterDeclaredValueShape(rawValue, schemaFields, registry);
+    }
     const result = {};
     for (const field of schemaFields) {
         const key = field.key;
@@ -2766,7 +2283,7 @@ function filterFormValue(rawValue, schemaFields, formTree, registry, globalDefau
             if (groupValue && typeof groupValue === 'object') {
                 const childFields = Object.values(field.fields);
                 const nestedTree = fieldState;
-                result[key] = filterFormValue(groupValue, childFields, nestedTree, registry, globalDefaults, formOptions);
+                result[key] = filterFormValue(groupValue, childFields, nestedTree, registry, globalDefaults, formOptions, true);
             }
             else {
                 result[key] = groupValue;
@@ -3079,7 +2596,7 @@ class FormStateMachine {
         if (!isTransitioningState(state) || state.phase !== Phase.Restoring) {
             return { state, sideEffects: [] };
         }
-        if (!state.pendingFormSetup) {
+                if (DEV_MODE && !state.pendingFormSetup) {
             this.config.logger.warn('handleRestoreComplete: pendingFormSetup was not set — falling back to recomputing. ' +
                 'This indicates a bug in the transition flow.');
         }
@@ -3142,7 +2659,7 @@ class FormStateMachine {
                     const state = untracked(() => this._state());
                     if (!isTransitioningState(state) || state.phase !== Phase.Restoring)
                         return;
-                    if (!state.pendingFormSetup) {
+                                        if (DEV_MODE && !state.pendingFormSetup) {
                         this.config.logger.warn('RestoreValues effect: pendingFormSetup was not set — falling back to recomputing.');
                     }
                     const formSetup = state.pendingFormSetup ?? this.config.createFormSetup(state.pendingConfig);
@@ -3284,13 +2801,6 @@ class FormStateManager {
         return detectFormMode(config.fields || []);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "formModeDetection" }] : /* istanbul ignore next */ []));
-        formConfigValidation = computed(() => {
-        const config = this.activeConfig();
-        if (!config)
-            return { isValid: true, errors: [], warnings: [] };
-        return FormModeValidator.validateFormConfiguration(config.fields || []);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "formConfigValidation" }] : /* istanbul ignore next */ []));
         effectiveFormOptions = computed(() => {
         const config = this.activeConfig();
         const configOptions = config?.options || {};
@@ -3298,6 +2808,8 @@ class FormStateManager {
         return { ...configOptions, ...inputOptions };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveFormOptions" }] : /* istanbul ignore next */ []));
+        pendingPageRequest = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingPageRequest" }] : /* istanbul ignore next */ []));
         pageFieldDefinitions = computed(() => {
         const config = this.activeConfig();
         const mode = this.formModeDetection().mode;
@@ -3335,21 +2847,70 @@ class FormStateManager {
         return this.createEmptyFormSetup(registry);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "formSetup" }] : /* istanbul ignore next */ []));
+        formSetupConfig = computed(() => {
+        const state = this.machine.state();
+        if (isReadyState(state))
+            return state.config;
+        if (isTransitioningState(state)) {
+            if (state.phase === Phase.Restoring && state.pendingFormSetup) {
+                return state.pendingConfig;
+            }
+            return state.currentConfig;
+        }
+        if (state.type === LifecycleState.Initializing)
+            return state.config;
+        if (state.type === LifecycleState.Uninitialized)
+            return this.activeConfig();
+        return undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formSetupConfig" }] : /* istanbul ignore next */ []));
+        activePageState = linkedSignal({ ...(ngDevMode ? { debugName: "activePageState" } : /* istanbul ignore next */ {}), source: this.activeConfig,
+        computation: (config) => ({ config, initialized: false, index: 0 }) });
         defaultValues = linkedSignal(() => this.formSetup().defaultValues, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "defaultValues" }] : /* istanbul ignore next */ []));
         validKeys = computed(() => {
         const schemaFields = this.formSetup().schemaFields;
         if (!schemaFields || schemaFields.length === 0)
             return undefined;
-        return new Set(schemaFields.map((f) => f.key).filter((key) => key !== undefined));
+        const keys = new Set();
+        for (const field of schemaFields) {
+            if (field.key === undefined)
+                continue;
+            keys.add(field.key);
+        }
+        return keys;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "validKeys" }] : /* istanbul ignore next */ []));
-        fieldStateSnapshot = computed(() => {
+        boundValueExclusionEnabled = computed(() => {
+        const setup = this.formSetup();
+        if (!setup.schemaFields || setup.schemaFields.length === 0)
+            return false;
+        const options = this.effectiveFormOptions();
+        return hasEnabledValueExclusion(setup.schemaFields, BOUND_VALUE_EXCLUSION_BASELINE, {
+            excludeValueIfHidden: options.excludeValueIfHidden,
+            excludeValueIfDisabled: options.excludeValueIfDisabled,
+            excludeValueIfReadonly: options.excludeValueIfReadonly,
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boundValueExclusionEnabled" }] : /* istanbul ignore next */ []));
+        valueExclusionEnabled = computed(() => {
         const setup = this.formSetup();
         if (!setup.schemaFields || setup.schemaFields.length === 0)
+            return false;
+        const options = this.effectiveFormOptions();
+        return hasEnabledValueExclusion(setup.schemaFields, this.valueExclusionDefaults, {
+            excludeValueIfHidden: options.excludeValueIfHidden,
+            excludeValueIfDisabled: options.excludeValueIfDisabled,
+            excludeValueIfReadonly: options.excludeValueIfReadonly,
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueExclusionEnabled" }] : /* istanbul ignore next */ []));
+        fieldStateSnapshot = computed(() => {
+        const schemaFields = this.formSetup().schemaFields;
+        if (!this.formSchemaReady() || !this.boundValueExclusionEnabled() || !schemaFields || schemaFields.length === 0)
             return {};
         const snapshot = {};
-        collectFieldStateSnapshot(setup.schemaFields, asFieldTreeRecord(this.form()), [], snapshot);
+        collectFieldStateSnapshot(schemaFields, asFieldTreeRecord(this.form()), [], snapshot);
         return snapshot;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fieldStateSnapshot" }] : /* istanbul ignore next */ []));
@@ -3357,8 +2918,22 @@ class FormStateManager {
     ...(ngDevMode ? [{ debugName: "excludedValueStore" }] : /* istanbul ignore next */ []));
         prevFieldStateSnapshot = signal({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "prevFieldStateSnapshot" }] : /* istanbul ignore next */ []));
+        lastOutwardValue = { current: undefined, pending: false };
+        lastExternalValue = { current: undefined };
+        externalValue = computed(() => {
+        const incoming = this.deps.value();
+        if (this.lastOutwardValue.pending && incoming === this.lastOutwardValue.current) {
+            this.lastOutwardValue.pending = false;
+            return this.lastExternalValue.current;
+        }
+        this.lastOutwardValue.pending = false;
+        this.lastExternalValue.current = incoming;
+        return incoming;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "externalValue" }] : /* istanbul ignore next */ []));
                     entity = linkedSignal(() => {
-        const inputValue = this.deps.value();
+                                                                this.externalValue();
+        const inputValue = untracked(() => this.deps.value());
         const defaults = this.defaultValues();
         const keys = this.validKeys();
         const saved = this.excludedValueStore();
@@ -3378,22 +2953,62 @@ class FormStateManager {
         debugName: 'FormStateManager.entity',
         equal: isEqual,
     });
-        formSchema = computed(() => runInInjectionContext(this.injector, () => {
+        loadFormSchemaService = injectAsync(() => import('./ng-forge-dynamic-forms-form-schema.service-Dx5Dlb15.mjs'));
+        formSchemaRequest = computed(() => {
         const setup = this.formSetup();
         const config = this.activeConfig();
-        if (!config)
+        if (!config || (!(setup.schemaFields?.length > 0) && !config.schema))
+            return undefined;
+        return {
+            fields: setup.schemaFields ?? [],
+            registry: setup.registry,
+            formLevelSchema: config.schema,
+            validateWhenHidden: this.effectiveFormOptions().validateWhenHidden,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formSchemaRequest" }] : /* istanbul ignore next */ []));
+        formSchemaResource = resource({ ...(ngDevMode ? { debugName: "formSchemaResource" } : /* istanbul ignore next */ {}), params: () => this.formSchemaRequest(),
+        loader: async ({ params }) => {
+            const schemaService = await this.loadFormSchemaService();
+                                                return runInInjectionContext(this.injector, () => schemaService.create(params));
+        } });
+        schemaCache = { current: undefined };
+        trackSchemaCache = computed(() => {
+        const request = this.formSchemaRequest();
+        if (!request) {
+            this.schemaCache.current = undefined;
             return undefined;
-        if (setup.schemaFields?.length) {
-            return createSchemaFromFields(setup.schemaFields, setup.registry, {
-                formLevelSchema: config.schema,
-                validateWhenHidden: this.effectiveFormOptions().validateWhenHidden,
-            });
         }
-        if (config.schema) {
-            return createFormLevelSchema(config.schema);
+        if (this.formSchemaResource.status() === 'error') {
+            this.schemaCache.current = undefined;
+            return undefined;
         }
-        return undefined;
-    }), /* @ts-ignore */
+        if (this.formSchemaResource.hasValue()) {
+            this.schemaCache.current = { schema: this.formSchemaResource.value(), request };
+        }
+        return this.schemaCache.current;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackSchemaCache" }] : /* istanbul ignore next */ []));
+        isSchemaCurrent = computed(() => {
+        if (this.formSetupConfig() !== this.activeConfig())
+            return false;
+        const request = this.formSchemaRequest();
+        if (!request)
+            return true;
+        return this.trackSchemaCache()?.request === request;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSchemaCurrent" }] : /* istanbul ignore next */ []));
+        formSchemaReady = computed(() => {
+        if (this.formSetupConfig() !== this.activeConfig())
+            return false;
+        if (!this.formSchemaRequest())
+            return true;
+        if (this.formSchemaResource.status() === 'error')
+            return true;
+        return this.trackSchemaCache() !== undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formSchemaReady" }] : /* istanbul ignore next */ []));
+        formSchema = computed(() => this.trackSchemaCache()?.schema, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "formSchema" }] : /* istanbul ignore next */ []));
         form = computed(() => {
         const schema = this.formSchema();
@@ -3424,13 +3039,16 @@ class FormStateManager {
     ...(ngDevMode ? [{ debugName: "fieldSignalContext" }] : /* istanbul ignore next */ []));
                     formInstance = computed(() => this.form()(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "formInstance" }] : /* istanbul ignore next */ []));
-        formValue = computed(() => this.formInstance().value(), /* @ts-ignore */
+        modelValue = computed(() => this.formInstance().value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modelValue" }] : /* istanbul ignore next */ []));
+        formValue = computed(() => this.modelValue(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
         filteredFormValue = computed(() => {
-        const rawValue = this.formValue();
+        const rawValue = this.modelValue();
         const setup = this.formSetup();
+        const schemaFields = setup.schemaFields;
         const options = this.effectiveFormOptions();
-        if (!setup.schemaFields || setup.schemaFields.length === 0) {
+        if (!this.formSchemaReady() || !schemaFields || schemaFields.length === 0) {
             return rawValue;
         }
                                 const formTree = this.form();
@@ -3440,14 +3058,15 @@ class FormStateManager {
             excludeValueIfReadonly: options.excludeValueIfReadonly,
         };
                                 const fieldTreeRecord = asFieldTreeRecord(formTree);
-        return filterFormValue(rawValue, setup.schemaFields, fieldTreeRecord, setup.registry, this.valueExclusionDefaults, formOptions);
+        return filterFormValue(rawValue, schemaFields, fieldTreeRecord, setup.registry, this.valueExclusionDefaults, formOptions, this.valueExclusionEnabled());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filteredFormValue" }] : /* istanbul ignore next */ []));
         boundFormValue = computed(() => {
-        const rawValue = this.formValue();
+        const rawValue = this.modelValue();
         const setup = this.formSetup();
+        const schemaFields = setup.schemaFields;
         const options = this.effectiveFormOptions();
-        if (!setup.schemaFields || setup.schemaFields.length === 0) {
+        if (!this.formSchemaReady() || !schemaFields || schemaFields.length === 0) {
             return rawValue;
         }
         const formTree = this.form();
@@ -3457,26 +3076,26 @@ class FormStateManager {
             excludeValueIfReadonly: options.excludeValueIfReadonly,
         };
         const fieldTreeRecord = asFieldTreeRecord(formTree);
-        return filterFormValue(rawValue, setup.schemaFields, fieldTreeRecord, setup.registry, BOUND_VALUE_EXCLUSION_BASELINE, formOptions);
+        return filterFormValue(rawValue, schemaFields, fieldTreeRecord, setup.registry, BOUND_VALUE_EXCLUSION_BASELINE, formOptions, this.boundValueExclusionEnabled());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "boundFormValue" }] : /* istanbul ignore next */ []));
-        valid = computed(() => this.formInstance().valid(), /* @ts-ignore */
+            valid = computed(() => this.formSchemaReady() && this.formSchemaResource.status() !== 'error' && this.formInstance().valid(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
-        invalid = computed(() => this.formInstance().invalid(), /* @ts-ignore */
+        invalid = computed(() => !this.formSchemaReady() || this.formSchemaResource.status() === 'error' || this.formInstance().invalid(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-        dirty = computed(() => this.formInstance().dirty(), /* @ts-ignore */
+        dirty = computed(() => this.formSchemaReady() && this.formInstance().dirty(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
-        touched = computed(() => this.formInstance().touched(), /* @ts-ignore */
+        touched = computed(() => this.formSchemaReady() && this.formInstance().touched(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
-        errors = computed(() => this.formInstance().errors(), /* @ts-ignore */
+        errors = computed(() => (this.formSchemaReady() ? this.formInstance().errors() : []), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
         disabled = computed(() => {
         const optionsDisabled = this.effectiveFormOptions().disabled;
-        const formDisabled = this.formInstance().disabled();
+        const formDisabled = this.formSchemaReady() && this.formInstance().disabled();
         return optionsDisabled ?? formDisabled;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        submitting = computed(() => this.formInstance().submitting(), /* @ts-ignore */
+        submitting = computed(() => this.formSchemaReady() && this.formInstance().submitting(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []));
                     fieldsSource = computed(() => {
         const state = this.machine.state();
@@ -3591,6 +3210,10 @@ class FormStateManager {
         }), takeUntilDestroyed(this.destroyRef));
         this.reset$ = this.eventBus.on('form-reset').pipe(map(() => undefined), takeUntilDestroyed(this.destroyRef));
         this.cleared$ = this.eventBus.on('form-clear').pipe(map(() => undefined), takeUntilDestroyed(this.destroyRef));
+                        this.eventBus
+            .on('go-to-page')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => this.pendingPageRequest.set({ index: event.pageIndex, options: event.options }));
                 this.machine = createFormStateMachine({
             injector: this.injector,
             destroyRef: this.destroyRef,
@@ -3654,6 +3277,11 @@ class FormStateManager {
         this.eventBus.dispatch(FormSubmitEvent);
     }
                 setupEffects() {
+        explicitEffect([this.formSchemaResource.error], ([error]) => {
+            if (error) {
+                this.logger.error('Failed to compile the form schema; rendering without validation and blocking submission.', error);
+            }
+        });
         explicitEffect([this.deps.config], ([config]) => {
             this.fieldLoadingErrors.set([]);
             const state = this.machine.currentState;
@@ -3680,127 +3308,543 @@ class FormStateManager {
                     }
                 }
             }
-            this.prevFieldStateSnapshot.set({ ...snapshot });
-            if (newSaved !== currentSaved && !isEqual(newSaved, currentSaved)) {
-                this.excludedValueStore.set(newSaved);
-            }
-        });
-                                let warnedAboutMissingArrayRegistry = false;
-        explicitEffect([this.formSetup], () => {
-            this.prevFieldStateSnapshot.set({});
-            if (Object.keys(this.excludedValueStore()).length > 0) {
-                this.excludedValueStore.set({});
-            }
-            if (this.arrayItemRegistry) {
-                this.arrayItemRegistry.clearAll();
-            }
-            else if (DEV_MODE && !warnedAboutMissingArrayRegistry) {
-                warnedAboutMissingArrayRegistry = true;
-                this.logger.warn('ArrayItemRegistryService was not provided to FormStateManager. ' +
-                    'Array fields will lose dynamically-added item templates across hide/show cycles. ' +
-                    'This usually means DynamicForm was bootstrapped without provideDynamicFormDI() — ' +
-                    'check your providers chain.');
-            }
+            this.prevFieldStateSnapshot.set({ ...snapshot });
+            if (newSaved !== currentSaved && !isEqual(newSaved, currentSaved)) {
+                this.excludedValueStore.set(newSaved);
+            }
+        });
+                                let warnedAboutMissingArrayRegistry = false;
+        explicitEffect([this.formSetup], () => {
+            this.prevFieldStateSnapshot.set({});
+            if (Object.keys(this.excludedValueStore()).length > 0) {
+                this.excludedValueStore.set({});
+            }
+            if (this.arrayItemRegistry) {
+                this.arrayItemRegistry.clearAll();
+            }
+            else if (DEV_MODE && !warnedAboutMissingArrayRegistry) {
+                warnedAboutMissingArrayRegistry = true;
+                this.logger.warn('ArrayItemRegistryService was not provided to FormStateManager. ' +
+                    'Array fields will lose dynamically-added item templates across hide/show cycles. ' +
+                    'This usually means DynamicForm was bootstrapped without provideDynamicFormDI() — ' +
+                    'check your providers chain.');
+            }
+        });
+                        explicitEffect([this.boundFormValue], ([currentBound]) => {
+            const currentValue = this.deps.value();
+            if (!isEqual(currentBound, currentValue)) {
+                                                                                this.lastOutwardValue.current = currentBound;
+                this.lastOutwardValue.pending = true;
+                this.deps.value.set(currentBound);
+            }
+        });
+                        if (DEV_MODE) {
+            explicitEffect([this.activeConfig], ([config]) => {
+                if (!config)
+                    return;
+                const validation = FormModeValidator.validateFormConfiguration(config.fields || []);
+                if (!validation.isValid) {
+                    this.logger.error('Invalid form configuration:', validation.errors);
+                }
+                if (validation.warnings.length > 0) {
+                    this.logger.warn('Form configuration warnings:', validation.warnings);
+                }
+            });
+        }
+    }
+    setupEventHandlers() {
+        this.eventBus
+            .on('form-reset')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.reset());
+        this.eventBus
+            .on('form-clear')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.clear());
+    }
+    registerValidatorsFromConfig({ customFnConfig, schemas }) {
+        if (schemas) {
+            schemas.forEach((schema) => {
+                this.schemaRegistry.registerSchema(schema);
+            });
+        }
+        if (!customFnConfig) {
+            return;
+        }
+        if (customFnConfig.customFunctions) {
+            Object.entries(customFnConfig.customFunctions).forEach(([name, fn]) => {
+                this.functionRegistry.registerCustomFunction(name, fn);
+            });
+        }
+        if (customFnConfig.derivations) {
+            this.functionRegistry.setDerivationFunctions(customFnConfig.derivations);
+        }
+        if (customFnConfig.asyncDerivations) {
+            this.functionRegistry.setAsyncDerivationFunctions(customFnConfig.asyncDerivations);
+        }
+        if (customFnConfig.asyncConditions) {
+            this.functionRegistry.setAsyncConditionFunctions(customFnConfig.asyncConditions);
+        }
+        this.functionRegistry.setValidators(customFnConfig.validators);
+        this.functionRegistry.setAsyncValidators(customFnConfig.asyncValidators);
+        this.functionRegistry.setHttpValidators(customFnConfig.httpValidators);
+    }
+    createFormSetupFromConfig(fields, mode, registry) {
+        const normalizedFields = normalizeSimplifiedArrays(fields);
+                                        validateFormConfig(normalizedFields, registry, this.logger);
+                                                                const source = this.deps.source?.() ?? 'inline';
+        const { fields: sanitizedFields, warnings: addonWarnings } = walkAndValidateAddons(normalizedFields, registry, this.addonKindRegistry, source);
+                        if (DEV_MODE) {
+            const nextKeys = new Set();
+            for (const w of addonWarnings) {
+                                                                const key = addonWarningKey(w);
+                nextKeys.add(key);
+                if (!this.lastAddonWarningKeys.has(key)) {
+                    this.logger.warn(formatAddonWarning(w));
+                }
+            }
+            this.lastAddonWarningKeys = nextKeys;
+        }
+        const validatedFields = sanitizedFields;
+        const flattenedFields = this.fieldProcessors.memoizedFlattenFields(validatedFields, registry);
+        const flattenedFieldsForRendering = this.fieldProcessors.memoizedFlattenFieldsForRendering(validatedFields, registry);
+        const fieldsById = this.fieldProcessors.memoizedKeyBy(flattenedFields);
+        const defaultValues = this.fieldProcessors.memoizedDefaultValues(fieldsById, registry);
+        const fieldsToRender = mode === 'paged' ? [] : flattenedFieldsForRendering;
+        return {
+            fields: fieldsToRender,
+            schemaFields: flattenedFields,
+            originalFields: fields,
+            defaultValues,
+            mode,
+            registry,
+        };
+    }
+    createEmptyFormSetup(registry) {
+        return {
+            fields: [],
+            schemaFields: [],
+            defaultValues: {},
+            mode: 'non-paged',
+            registry,
+        };
+    }
+                ngOnDestroy() {
+        this.machine.dispatch({ type: Action.Destroy });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FormStateManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FormStateManager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FormStateManager, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class PageOrchestratorComponent {
+    eventBus = inject(EventBus);
+    fieldContextRegistry = inject(FieldContextRegistryService);
+    functionRegistry = inject(FunctionRegistryService);
+    formOptions = inject(FORM_OPTIONS, { optional: true });
+    globalPreloadWindow = inject(PAGE_PRELOAD_WINDOW);
+    stateManager = inject(FormStateManager, { optional: true });
+        pendingPageRequest = computed(() => this.stateManager?.pendingPageRequest() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingPageRequest" }] : /* istanbul ignore next */ []));
+        schemaCurrent = computed(() => this.stateManager?.isSchemaCurrent() ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "schemaCurrent" }] : /* istanbul ignore next */ []));
+        configScope = computed(() => this.stateManager?.activeConfig(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "configScope" }] : /* istanbul ignore next */ []));
+        pageFields = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageFields" }] : /* istanbul ignore next */ []));
+        form = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
+            fieldSignalContext = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldSignalContext" }] : /* istanbul ignore next */ []));
+        pageHiddenStates = computed(() => {
+        const pages = this.pageFields();
+        return pages.map((page) => this.evaluatePageHidden(page));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageHiddenStates" }] : /* istanbul ignore next */ []));
+        visiblePageIndices = computed(() => {
+        const hiddenStates = this.pageHiddenStates();
+        return hiddenStates
+            .map((hidden, index) => ({ index, hidden }))
+            .filter((item) => !item.hidden)
+            .map((item) => item.index);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visiblePageIndices" }] : /* istanbul ignore next */ []));
+        activePageOwnership = linkedSignal({ ...(ngDevMode ? { debugName: "activePageOwnership" } : /* istanbul ignore next */ {}), source: this.configScope,
+        computation: (config, previous) => {
+            const totalPages = this.pageFields().length;
+            if (totalPages === 0)
+                return { config, initialized: true, index: 0 };
+                        return untracked(() => {
+                                                                const owned = this.stateManager?.activePageState();
+                const mayRestore = previous === undefined || previous.source === config;
+                if (mayRestore &&
+                    owned !== undefined &&
+                    owned.config === config &&
+                    owned.initialized &&
+                    owned.index >= 0 &&
+                    owned.index < totalPages) {
+                    return { config, initialized: true, index: owned.index };
+                }
+                if (this.initialPage().validate && !this.schemaCurrent()) {
+                    return { config, initialized: false, index: 0 };
+                }
+                return { config, initialized: true, index: this.resolveInitialLanding() };
+            });
+        } });
+        currentPageIndex = computed(() => this.activePageOwnership().index, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentPageIndex" }] : /* istanbul ignore next */ []));
+    setCurrentPageIndex(index) {
+        this.activePageOwnership.update((ownership) => ({ ...ownership, initialized: true, index }));
+    }
+        resolveInitialLanding() {
+        const { index, validate } = this.initialPage();
+        const visible = this.visiblePageIndices();
+        if (index === 0 || visible.length === 0)
+            return 0;
+        const target = visible.includes(index) ? index : this.findNearestVisiblePage(index, visible);
+        if (target <= 0)
+            return Math.max(target, 0);
+        if (!validate)
+            return target;
+        const firstInvalid = visible.filter((i) => i < target).find((i) => !this.isPageValid(i));
+        return firstInvalid ?? target;
+    }
+        initialPage = computed(() => {
+        const raw = this.formOptions?.()?.initialPage;
+        const totalPages = this.pageFields().length;
+        const requested = typeof raw === 'number' ? raw : raw?.index;
+        const validate = typeof raw === 'number' ? false : (raw?.validate ?? false);
+        if (typeof requested !== 'number' || !Number.isFinite(requested) || requested < 0 || totalPages === 0) {
+            return { index: 0, validate: false };
+        }
+        return { index: Math.min(Math.trunc(requested), totalPages - 1), validate };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialPage" }] : /* istanbul ignore next */ []));
+        state = computed(() => {
+        const currentIndex = this.currentPageIndex();
+        const totalPages = this.pageFields().length;
+        const visibleIndices = this.visiblePageIndices();
+                const currentVisiblePosition = visibleIndices.indexOf(currentIndex);
+        const isFirstVisiblePage = currentVisiblePosition === 0 || currentVisiblePosition === -1;
+        const isLastVisiblePage = currentVisiblePosition >= visibleIndices.length - 1;
+        return {
+            currentPageIndex: currentIndex,
+            totalPages,
+            isFirstPage: isFirstVisiblePage,
+            isLastPage: isLastVisiblePage,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+                currentPageValid = computed(() => (this.stateManager?.isSchemaCurrent() ?? true) && this.isPageValid(this.currentPageIndex()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentPageValid" }] : /* istanbul ignore next */ []));
+        isPageValid(pageIndex) {
+        const pages = this.pageFields();
+        const form = this.form();
+        if (pageIndex < 0 || pageIndex >= pages.length) {
+            return true;
+        }
+                const leafKeys = collectLeafFieldKeys(pages[pageIndex].fields || []);
+                        for (const fieldKey of leafKeys) {
+            const field = form[fieldKey];
+            if (field && typeof field === 'function') {
+                const fieldState = field();
+                if (fieldState && typeof fieldState.valid === 'function' && !fieldState.valid()) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+        extendedFieldSignalContext = computed(() => ({
+        ...this.fieldSignalContext(),
+        currentPageValid: this.currentPageValid,
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "extendedFieldSignalContext" }] : /* istanbul ignore next */ []));
+        preloadWindow = computed(() => {
+        const perForm = this.formOptions?.()?.pagePreloadWindow;
+                return clampWindowSize(perForm, this.globalPreloadWindow);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "preloadWindow" }] : /* istanbul ignore next */ []));
+        pageRenderStates = computed(() => {
+        const activeIndex = this.currentPageIndex();
+        const hiddenStates = this.pageHiddenStates();
+        const preloadWindow = this.preloadWindow();
+        return this.pageFields().map((field, index) => ({
+            field,
+            index,
+            hidden: hiddenStates[index],
+            active: index === activeIndex,
+            preload: index !== activeIndex && Math.abs(index - activeIndex) <= preloadWindow,
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageRenderStates" }] : /* istanbul ignore next */ []));
+    constructor() {
+                this.setupEventListeners();
+                                const preloader = injectFormComponentPreloader();
+        explicitEffect([this.pageRenderStates], ([states]) => {
+            preloader.preloadFields(states.filter((page) => !page.hidden && (page.active || page.preload)).map((page) => page.field));
         });
-                        explicitEffect([this.boundFormValue], ([currentBound]) => {
-            const currentValue = this.deps.value();
-            if (!isEqual(currentBound, currentValue)) {
-                this.deps.value.set(currentBound);
-            }
+                        explicitEffect([this.schemaCurrent, this.pageFields], ([schemaCurrent]) => {
+            const ownership = this.activePageOwnership();
+            if (!schemaCurrent || ownership.initialized)
+                return;
+            this.activePageOwnership.set({ ...ownership, initialized: true, index: this.resolveInitialLanding() });
         });
-        explicitEffect([this.formConfigValidation], ([validation]) => {
-            if (!validation.isValid) {
-                this.logger.error('Invalid form configuration:', validation.errors);
-            }
-            if (validation.warnings.length > 0) {
-                this.logger.warn('Form configuration warnings:', validation.warnings);
+                explicitEffect([this.state, this.visiblePageIndices], ([state, visibleIndices]) => {
+            const currentVisiblePosition = visibleIndices.indexOf(state.currentPageIndex);
+            if (currentVisiblePosition === -1 && visibleIndices.length > 0) {
+                                const nearest = this.findNearestVisiblePage(state.currentPageIndex, visibleIndices);
+                if (nearest !== -1) {
+                    this.executePageChange(nearest);
+                }
             }
         });
     }
-    setupEventHandlers() {
-        this.eventBus
-            .on('form-reset')
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.reset());
-        this.eventBus
-            .on('form-clear')
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.clear());
+        navigateToNextPage() {
+                        const disableWhenPageInvalid = this.formOptions?.()?.nextButton?.disableWhenPageInvalid ?? true;
+        if (disableWhenPageInvalid && !this.currentPageValid()) {
+            return {
+                success: false,
+                newPageIndex: this.state().currentPageIndex,
+                error: 'Current page has invalid fields',
+            };
+        }
+        const currentState = this.state();
+        const visibleIndices = this.visiblePageIndices();
+        if (currentState.isLastPage) {
+            return {
+                success: false,
+                newPageIndex: currentState.currentPageIndex,
+                error: 'Already on the last visible page',
+            };
+        }
+                const currentVisiblePosition = visibleIndices.indexOf(currentState.currentPageIndex);
+        if (currentVisiblePosition === -1 || currentVisiblePosition >= visibleIndices.length - 1) {
+            return {
+                success: false,
+                newPageIndex: currentState.currentPageIndex,
+                error: 'No next visible page available',
+            };
+        }
+        const nextVisiblePageIndex = visibleIndices[currentVisiblePosition + 1];
+        return this.executePageChange(nextVisiblePageIndex);
     }
-    registerValidatorsFromConfig({ customFnConfig, schemas }) {
-        if (schemas) {
-            schemas.forEach((schema) => {
-                this.schemaRegistry.registerSchema(schema);
-            });
+        navigateToPreviousPage() {
+        const currentState = this.state();
+        const visibleIndices = this.visiblePageIndices();
+        if (currentState.isFirstPage) {
+            return {
+                success: false,
+                newPageIndex: currentState.currentPageIndex,
+                error: 'Already on the first visible page',
+            };
         }
-        if (!customFnConfig) {
-            return;
+                const currentVisiblePosition = visibleIndices.indexOf(currentState.currentPageIndex);
+        if (currentVisiblePosition <= 0) {
+            return {
+                success: false,
+                newPageIndex: currentState.currentPageIndex,
+                error: 'No previous visible page available',
+            };
         }
-        if (customFnConfig.customFunctions) {
-            Object.entries(customFnConfig.customFunctions).forEach(([name, fn]) => {
-                this.functionRegistry.registerCustomFunction(name, fn);
-            });
+        const prevVisiblePageIndex = visibleIndices[currentVisiblePosition - 1];
+        return this.executePageChange(prevVisiblePageIndex);
+    }
+        navigateToPage(pageIndex, options) {
+        const currentIndex = this.state().currentPageIndex;
+        const visibleIndices = this.visiblePageIndices();
+                        if (pageIndex <= currentIndex || !visibleIndices.includes(pageIndex)) {
+            return this.executePageChange(pageIndex);
         }
-        if (customFnConfig.derivations) {
-            this.functionRegistry.setDerivationFunctions(customFnConfig.derivations);
+                if (options?.validate === false) {
+            return this.executePageChange(pageIndex);
         }
-        if (customFnConfig.asyncDerivations) {
-            this.functionRegistry.setAsyncDerivationFunctions(customFnConfig.asyncDerivations);
+        const disableWhenPageInvalid = this.formOptions?.()?.nextButton?.disableWhenPageInvalid ?? true;
+        if (!disableWhenPageInvalid) {
+            return this.executePageChange(pageIndex);
         }
-        if (customFnConfig.asyncConditions) {
-            this.functionRegistry.setAsyncConditionFunctions(customFnConfig.asyncConditions);
+        const crossedPages = visibleIndices.filter((index) => index >= currentIndex && index < pageIndex);
+        const firstInvalidPage = crossedPages.find((index) => !this.isPageValid(index));
+        if (firstInvalidPage === undefined) {
+            return this.executePageChange(pageIndex);
         }
-        this.functionRegistry.setValidators(customFnConfig.validators);
-        this.functionRegistry.setAsyncValidators(customFnConfig.asyncValidators);
-        this.functionRegistry.setHttpValidators(customFnConfig.httpValidators);
+                this.executePageChange(firstInvalidPage);
+        return {
+            success: false,
+            newPageIndex: firstInvalidPage,
+            error: `Cannot navigate to page ${pageIndex}: page ${firstInvalidPage} has invalid fields`,
+        };
     }
-    createFormSetupFromConfig(fields, mode, registry) {
-        const normalizedFields = normalizeSimplifiedArrays(fields);
-                                        validateFormConfig(normalizedFields, registry, this.logger);
-                                                                const source = this.deps.source?.() ?? 'inline';
-        const { fields: sanitizedFields, warnings: addonWarnings } = walkAndValidateAddons(normalizedFields, registry, this.addonKindRegistry, source);
-        const nextKeys = new Set();
-        for (const w of addonWarnings) {
-                                                const key = addonWarningKey(w);
-            nextKeys.add(key);
-            if (!this.lastAddonWarningKeys.has(key)) {
-                this.logger.warn(formatAddonWarning(w));
+        executePageChange(pageIndex) {
+        const currentState = this.state();
+        const totalPages = currentState.totalPages;
+                if (pageIndex < 0 || pageIndex >= totalPages) {
+            return {
+                success: false,
+                newPageIndex: currentState.currentPageIndex,
+                error: `Invalid page index: ${pageIndex}. Valid range is 0 to ${totalPages - 1}`,
+            };
+        }
+                const visibleIndices = this.visiblePageIndices();
+        if (!visibleIndices.includes(pageIndex)) {
+            return {
+                success: false,
+                newPageIndex: currentState.currentPageIndex,
+                error: `Cannot navigate to hidden page at index ${pageIndex}. Visible pages: [${visibleIndices.join(', ')}]`,
+            };
+        }
+                if (pageIndex === currentState.currentPageIndex) {
+            return {
+                success: true,
+                newPageIndex: pageIndex,
+            };
+        }
+                const previousIndex = currentState.currentPageIndex;
+        this.setCurrentPageIndex(pageIndex);
+                this.eventBus.dispatch(PageChangeEvent, pageIndex, totalPages, previousIndex);
+        return {
+            success: true,
+            newPageIndex: pageIndex,
+        };
+    }
+        findNearestVisiblePage(currentIndex, visibleIndices) {
+        let nearest = -1;
+        let minDistance = Infinity;
+        for (const idx of visibleIndices) {
+            const distance = Math.abs(idx - currentIndex);
+                        if (distance < minDistance || (distance === minDistance && idx > nearest)) {
+                minDistance = distance;
+                nearest = idx;
+            }
+        }
+        return nearest;
+    }
+        setupEventListeners() {
+                this.eventBus
+            .on('next-page')
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => {
+            this.navigateToNextPage();
+        });
+                this.eventBus
+            .on('previous-page')
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => {
+            this.navigateToPreviousPage();
+        });
+                                        explicitEffect([this.pendingPageRequest], ([request]) => {
+            if (!request)
+                return;
+            this.stateManager?.pendingPageRequest.set(null);
+            this.navigateToPage(request.index, request.options);
+        });
+        explicitEffect([this.state], ([state]) => this.eventBus.dispatch(PagerStateEvent, state));
+                explicitEffect([this.activePageOwnership], ([ownership]) => this.stateManager?.activePageState.set(ownership));
+    }
+        evaluatePageHidden(page) {
+                if (!page.logic || page.logic.length === 0) {
+            return false;
+        }
+                const hiddenLogic = page.logic.filter((l) => l.type === 'hidden');
+                if (hiddenLogic.length === 0) {
+            return false;
+        }
+                for (const logic of hiddenLogic) {
+                        if (typeof logic.condition === 'boolean') {
+                if (logic.condition) {
+                    return true;
+                }
+                continue;
+            }
+                        const condition = logic.condition;
+            const context = this.fieldContextRegistry.createDisplayOnlyContext(page.key || '', this.functionRegistry.getCustomFunctions());
+            if (evaluateCondition(condition, context)) {
+                return true;
             }
         }
-        this.lastAddonWarningKeys = nextKeys;
-        const validatedFields = sanitizedFields;
-        const flattenedFields = this.fieldProcessors.memoizedFlattenFields(validatedFields, registry);
-        const flattenedFieldsForRendering = this.fieldProcessors.memoizedFlattenFieldsForRendering(validatedFields, registry);
-        const fieldsById = this.fieldProcessors.memoizedKeyBy(flattenedFields);
-        const defaultValues = this.fieldProcessors.memoizedDefaultValues(fieldsById, registry);
-        const fieldsToRender = mode === 'paged' ? [] : flattenedFieldsForRendering;
-        return {
-            fields: fieldsToRender,
-            schemaFields: flattenedFields,
-            originalFields: fields,
-            defaultValues,
-            mode,
-            registry,
-        };
-    }
-    createEmptyFormSetup(registry) {
-        return {
-            fields: [],
-            schemaFields: [],
-            defaultValues: {},
-            mode: 'non-paged',
-            registry,
-        };
+        return false;
     }
-                ngOnDestroy() {
-        this.machine.dispatch({ type: Action.Destroy });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: PageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: PageOrchestratorComponent, isStandalone: true, selector: "div[page-orchestrator]", inputs: { pageFields: { classPropertyName: "pageFields", publicName: "pageFields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, fieldSignalContext: { classPropertyName: "fieldSignalContext", publicName: "fieldSignalContext", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-current-page": "state().currentPageIndex", "attr.data-total-pages": "state().totalPages" }, classAttribute: "df-page-orchestrator" }, providers: [
+            {
+                provide: FIELD_SIGNAL_CONTEXT,
+                useFactory: (orchestrator) => orchestrator.extendedFieldSignalContext(),
+                deps: [PageOrchestratorComponent],
+            },
+        ], ngImport: i0, template: `
+    @for (page of pageRenderStates(); track page.field.key) {
+      <!--
+        Skip pages hidden by 'hidden' logic conditions entirely. FormStateManager
+        derives schema/value/validators from config (not from mounted components),
+        so unmounting a hidden page has no effect on form state — only on render +
+        CD cost. This is the page-level equivalent of the existing field-level
+        \`@if (!field.hidden())\` gate in page-field.component.ts.
+      -->
+      @if (!page.hidden) {
+        @if (page.active || page.preload) {
+          @defer (when page.active; on idle) {
+            <section page-field [field]="page.field" [key]="page.field.key" [pageIndex]="page.index" [isVisible]="page.active"></section>
+          } @placeholder {
+            <div class="df-page-placeholder" [attr.data-page-index]="page.index" [attr.data-page-key]="page.field.key"></div>
+          }
+        } @else {
+          <!--
+            Pages outside the preload window remain lightweight placeholders.
+            Form state derives from config, so leaving their components unmounted
+            does not affect validity, derivations, or navigation. The active page
+            renders directly; configured neighbours preload declaratively on idle.
+          -->
+          <div class="df-page-placeholder" [attr.data-page-index]="page.index" [attr.data-page-key]="page.field.key"></div>
+        }
+      }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FormStateManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FormStateManager });
+  `, isInline: true, styles: [":host{display:block;position:relative;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [/* @ts-ignore */
+                import('./ng-forge-dynamic-forms-page-field.component-DPKJcwUO.mjs').then(m => m.default)]] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FormStateManager, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.5", ngImport: i0, type: PageOrchestratorComponent, resolveDeferredDeps: () => [/* @ts-ignore */
+        import('./ng-forge-dynamic-forms-page-field.component-DPKJcwUO.mjs').then(m => m.default)], resolveMetadata: PageFieldComponent => ({ decorators: [{
+                type: Component,
+                args: [{ selector: 'div[page-orchestrator]', imports: [PageFieldComponent], template: `
+    @for (page of pageRenderStates(); track page.field.key) {
+      <!--
+        Skip pages hidden by 'hidden' logic conditions entirely. FormStateManager
+        derives schema/value/validators from config (not from mounted components),
+        so unmounting a hidden page has no effect on form state — only on render +
+        CD cost. This is the page-level equivalent of the existing field-level
+        \`@if (!field.hidden())\` gate in page-field.component.ts.
+      -->
+      @if (!page.hidden) {
+        @if (page.active || page.preload) {
+          @defer (when page.active; on idle) {
+            <section page-field [field]="page.field" [key]="page.field.key" [pageIndex]="page.index" [isVisible]="page.active"></section>
+          } @placeholder {
+            <div class="df-page-placeholder" [attr.data-page-index]="page.index" [attr.data-page-key]="page.field.key"></div>
+          }
+        } @else {
+          <!--
+            Pages outside the preload window remain lightweight placeholders.
+            Form state derives from config, so leaving their components unmounted
+            does not affect validity, derivations, or navigation. The active page
+            renders directly; configured neighbours preload declaratively on idle.
+          -->
+          <div class="df-page-placeholder" [attr.data-page-index]="page.index" [attr.data-page-key]="page.field.key"></div>
+        }
+      }
+    }
+  `, host: {
+                            class: 'df-page-orchestrator',
+                            '[attr.data-current-page]': 'state().currentPageIndex',
+                            '[attr.data-total-pages]': 'state().totalPages',
+                        }, providers: [
+                            {
+                                provide: FIELD_SIGNAL_CONTEXT,
+                                useFactory: (orchestrator) => orchestrator.extendedFieldSignalContext(),
+                                deps: [PageOrchestratorComponent],
+                            },
+                        ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;position:relative;width:100%}\n"] }]
+            }], ctorParameters: () => [], propDecorators: { pageFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageFields", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], fieldSignalContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldSignalContext", required: true }] }] } }) });
 
 function traverseFieldsWithContext(fields, context, visitor, hooks) {
     for (const field of fields) {
@@ -3879,14 +3923,14 @@ function createDerivationRenderGate() {
         if (!has || engine() !== 'idle')
             return;
         engine.set('loading');
-                pendingTasks.run(() => import('./ng-forge-dynamic-forms-bootstrap-derivation-orchestrator-CkqvXXs_.mjs')
+                pendingTasks.run(() => import('./ng-forge-dynamic-forms-bootstrap-derivation-orchestrator-CTOTwzzw.mjs')
             .then(({ bootstrapDerivationOrchestrator }) => {
             runInInjectionContext(injector, () => bootstrapDerivationOrchestrator());
             engine.set('wired');
         })
             .catch((error) => {
                                     engine.set('failed');
-            logger.error('[Dynamic Forms] Failed to load the derivation engine; derivations will not apply.', error);
+            logger.error('Failed to load the derivation engine; derivations will not apply.', error);
         }));
     });
             return computed(() => {
@@ -3897,6 +3941,68 @@ function createDerivationRenderGate() {
     });
 }
 
+const WEB_MCP_ENABLED = new InjectionToken('WEB_MCP_ENABLED', {
+    providedIn: 'root',
+    factory: () => false,
+});
+
+const WEB_MCP_GATE = new InjectionToken('WEB_MCP_GATE');
+function createWebMcpGate() {
+    const enabled = inject(WEB_MCP_ENABLED);
+    const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    const stateManager = inject(FormStateManager);
+    const injector = inject(Injector);
+    const destroyRef = inject(DestroyRef);
+    const logger = inject(DynamicFormLogger);
+            if (!enabled || !isBrowser)
+        return computed(() => 'disabled');
+        const registration = computed(() => {
+        const options = stateManager.effectiveFormOptions().webMcp;
+        return options ? { options: options, setup: stateManager.formSetup() } : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registration" }] : /* istanbul ignore next */ []));
+    const status = signal('idle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+        let epoch;
+        let epochId = 0;
+    const closeEpoch = () => {
+        epoch?.abort();
+        epoch = undefined;
+    };
+    destroyRef.onDestroy(closeEpoch);
+    explicitEffect([registration], ([input]) => {
+                        closeEpoch();
+        epochId += 1;
+        const thisEpoch = epochId;
+        if (!input) {
+            status.set('idle');
+            return;
+        }
+        const controller = new AbortController();
+        epoch = controller;
+        status.set('registering');
+        void import('./ng-forge-dynamic-forms-bootstrap-web-mcp-BtjqeJOj.mjs')
+            .then(({ bootstrapWebMcp }) => {
+                        if (thisEpoch !== epochId || controller.signal.aborted)
+                return;
+            return runInInjectionContext(injector, () => bootstrapWebMcp(input.options, controller.signal));
+        })
+            .then((result) => {
+            if (thisEpoch !== epochId || controller.signal.aborted)
+                return;
+            if (result)
+                status.set(result);
+        })
+            .catch((error) => {
+            if (thisEpoch !== epochId)
+                return;
+                                    status.set('failed');
+            logger.error('Failed to load the WebMCP registrar; this form will not be exposed to agents.', error);
+        });
+    });
+    return status.asReadonly();
+}
+
 const FORM_INITIALIZER = new InjectionToken('FORM_INITIALIZER');
 
 const AUTO_ID_PREFIX = 'df-';
@@ -3929,10 +4035,10 @@ class DynamicFormInstanceRegistry {
         this.slots.delete(Number(id.slice(AUTO_ID_PREFIX.length)));
         this._membership.update((m) => m + 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DynamicFormInstanceRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DynamicFormInstanceRegistry, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DynamicFormInstanceRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DynamicFormInstanceRegistry, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DynamicFormInstanceRegistry, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DynamicFormInstanceRegistry, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -3983,10 +4089,10 @@ class FormIdPrefixService {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FormIdPrefixService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FormIdPrefixService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FormIdPrefixService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FormIdPrefixService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FormIdPrefixService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FormIdPrefixService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -4039,6 +4145,7 @@ function coreProviders() {
             deps: [FormStateManager],
         },
                         FormIdPrefixService,
+                        FieldViewportObserver,
         {
             provide: FORM_ID_PREFIX,
             useFactory: (svc) => svc.prefix,
@@ -4078,6 +4185,7 @@ function provideDynamicFormDI() {
         ...asyncExpressionProviders(),
         ...propertyDerivationProviders(),
         ...derivationProviders(),
+        { provide: WEB_MCP_GATE, useFactory: createWebMcpGate },
     ];
 }
 
@@ -4092,10 +4200,10 @@ class EventDispatcher {
         disconnect() {
         this.bus = undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: EventDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: EventDispatcher });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: EventDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: EventDispatcher });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: EventDispatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: EventDispatcher, decorators: [{
             type: Injectable
         }] });
 
@@ -4103,10 +4211,10 @@ class DfTemplate {
         dfTemplate = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dfTemplate" }] : /* istanbul ignore next */ []));
         templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DfTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: DfTemplate, isStandalone: true, selector: "ng-template[dfTemplate]", inputs: { dfTemplate: { classPropertyName: "dfTemplate", publicName: "dfTemplate", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["dfTemplate"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DfTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: DfTemplate, isStandalone: true, selector: "ng-template[dfTemplate]", inputs: { dfTemplate: { classPropertyName: "dfTemplate", publicName: "dfTemplate", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["dfTemplate"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DfTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DfTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[dfTemplate]',
@@ -4120,32 +4228,13 @@ class DfFieldTemplateRegistry {
         set(value) {
         this._map.set(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DfFieldTemplateRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DfFieldTemplateRegistry });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DfFieldTemplateRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DfFieldTemplateRegistry });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DfFieldTemplateRegistry, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DfFieldTemplateRegistry, decorators: [{
             type: Injectable
         }] });
 
-const FIELD_WINDOWING = new InjectionToken('FIELD_WINDOWING', {
-    providedIn: 'root',
-    factory: () => ({ enabled: false, eager: 12, placeholderHeight: '4rem' }),
-});
-
-function resolveFieldWindowing(global, perForm) {
-    if (perForm === undefined) {
-        return global;
-    }
-    if (typeof perForm === 'boolean') {
-        return { ...global, enabled: perForm };
-    }
-    return {
-        enabled: true,
-        eager: clampWindowSize(perForm.eager, global.eager),
-        placeholderHeight: perForm.placeholderHeight ?? global.placeholderHeight,
-    };
-}
-
 class DynamicForm {
                     config = input.required({ ...(ngDevMode ? { debugName: "config" } : /* istanbul ignore next */ {}), alias: 'dynamic-form' });
         formOptions = input(undefined, /* @ts-ignore */
@@ -4186,22 +4275,31 @@ class DynamicForm {
         submitting = this.stateManager.submitting;
         fieldLoadingErrors = this.stateManager.fieldLoadingErrors;
                 derivationReady = inject(DERIVATION_RENDER_GATE);
-    shouldRender = computed(() => this.stateManager.shouldRender() && this.derivationReady(), /* @ts-ignore */
+    shouldRender = computed(() => this.stateManager.shouldRender() && this.stateManager.formSchemaReady() && this.derivationReady(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []));
+        webMcpStatus = inject(WEB_MCP_GATE);
         resolvedFields = this.stateManager.resolvedFields;
         fieldWindowing = computed(() => resolveFieldWindowing(this.globalFieldWindowing, this.effectiveFormOptions()?.fieldWindowing), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fieldWindowing" }] : /* istanbul ignore next */ []));
-                    totalComponentsCount = computed(() => {
-        const fields = this.stateManager.formSetup()?.fields ?? [];
-        return countContainersRecursive(fields) + 1;
+                initializedComponents = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initializedComponents" }] : /* istanbul ignore next */ []));
+    initialPageReady = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialPageReady" }] : /* istanbul ignore next */ []));
+    initializationReady = computed(() => {
+        const config = this.activeConfig();
+        if (!config)
+            return false;
+        if (this.formModeDetection().mode === 'paged')
+            return this.initialPageReady();
+        const initialized = this.initializedComponents();
+        const expected = [
+            initializationComponentKey('dynamic-form', this.componentId),
+            ...collectInitializingContainerKeys(config.fields ?? []),
+        ];
+        return expected.every((key) => initialized.has(key));
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "totalComponentsCount" }] : /* istanbul ignore next */ []));
-                initialized$ = setupInitializationTracking({
-        eventBus: this.eventBus,
-        totalComponentsCount: this.totalComponentsCount,
-        injector: this.injector,
-        componentId: this.componentId,
-    });
+    ...(ngDevMode ? [{ debugName: "initializationReady" }] : /* istanbul ignore next */ []));
+                    initialized$ = toObservable(this.initializationReady, { injector: this.injector }).pipe(filter((ready) => ready), take(1), shareReplay({ bufferSize: 1, refCount: false }));
                     validityChange = outputFromObservable(toObservable(this.valid));
         dirtyChange = outputFromObservable(toObservable(this.dirty));
         submitted = outputFromObservable(this.stateManager.submitted$);
@@ -4209,12 +4307,32 @@ class DynamicForm {
         cleared = outputFromObservable(this.eventBus.on('form-clear'));
         events = outputFromObservable(this.eventBus.events$);
         initialized = outputFromObservable(this.initialized$);
+        activePageInitialized = outputFromObservable(this.eventBus.on('active-page-initialized'));
         onPageChange = outputFromObservable(this.eventBus.on('page-change'));
-        onPageNavigationStateChange = outputFromObservable(this.eventBus.on('page-navigation-state-change'));
+        onPageNavigationStateChange = outputFromObservable(this.eventBus.on('pager-state'));
                 constructor() {
+        this.eventBus
+            .on('component-initialized')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            const key = initializationComponentKey(event.componentType, event.componentId);
+            this.initializedComponents.update((current) => {
+                if (current.has(key))
+                    return current;
+                const next = new Set(current);
+                next.add(key);
+                return next;
+            });
+        });
+        this.eventBus
+            .on('active-page-initialized')
+            .pipe(takeUntilDestroyed(this.destroyRef), take(1))
+            .subscribe(() => this.initialPageReady.set(true));
         this.dispatcher?.connect(this.eventBus);
         this.destroyRef.onDestroy(() => this.dispatcher?.disconnect());
                                                         inject(FORM_INITIALIZER, { optional: true });
+                                                const preload = injectFormComponentPreloader();
+        explicitEffect([this.config], ([config]) => preload.preloadConfig(config));
         this.setupEffects();
         this.setupEventHandlers();
     }
@@ -4236,8 +4354,8 @@ class DynamicForm {
                 this.eventBus.dispatch(ComponentInitializedEvent, 'dynamic-form', this.componentId);
             }
         });
-                explicitEffect([this.resolvedFields, this.formModeDetection], ([fields, { mode }]) => {
-            if (mode === 'non-paged' && fields.length > 0) {
+                explicitEffect([this.resolvedFields, this.formModeDetection, this.activeConfig], ([, { mode }, config]) => {
+            if (config && mode === 'non-paged') {
                 afterNextRender(() => {
                     this.eventBus.dispatch(ComponentInitializedEvent, 'dynamic-form', this.componentId);
                 }, { injector: this.injector });
@@ -4272,8 +4390,8 @@ class DynamicForm {
             error: (err) => this.logger.error('Submission handler error', err),
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: DynamicForm, isStandalone: true, selector: "form[dynamic-form]", inputs: { config: { classPropertyName: "config", publicName: "dynamic-form", isSignal: true, isRequired: true, transformFunction: null }, formOptions: { classPropertyName: "formOptions", publicName: "formOptions", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted", reset: "reset", cleared: "cleared", events: "events", initialized: "initialized", onPageChange: "onPageChange", onPageNavigationStateChange: "onPageNavigationStateChange" }, host: { attributes: { "novalidate": "" }, listeners: { "submit": "onNativeSubmit($event)" }, properties: { "class.disabled": "disabled()", "class.df-form-paged": "formModeDetection().mode === \"paged\"", "class.df-form-non-paged": "formModeDetection().mode === \"non-paged\"", "attr.data-form-mode": "formModeDetection().mode", "attr.id": "idPrefix() || null" }, classAttribute: "df-dynamic-form df-form" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: DynamicForm, isStandalone: true, selector: "form[dynamic-form]", inputs: { config: { classPropertyName: "config", publicName: "dynamic-form", isSignal: true, isRequired: true, transformFunction: null }, formOptions: { classPropertyName: "formOptions", publicName: "formOptions", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted", reset: "reset", cleared: "cleared", events: "events", initialized: "initialized", activePageInitialized: "activePageInitialized", onPageChange: "onPageChange", onPageNavigationStateChange: "onPageNavigationStateChange" }, host: { attributes: { "novalidate": "" }, listeners: { "submit": "onNativeSubmit($event)" }, properties: { "class.disabled": "disabled()", "class.df-form-paged": "formModeDetection().mode === \"paged\"", "class.df-form-non-paged": "formModeDetection().mode === \"non-paged\"", "attr.data-form-mode": "formModeDetection().mode", "attr.id": "idPrefix() || null" }, classAttribute: "df-dynamic-form df-form" }, providers: [
             provideDynamicFormDI(),
             DfFieldTemplateRegistry,
             { provide: DF_FIELD_TEMPLATES, useFactory: () => inject(DfFieldTemplateRegistry).map },
@@ -4285,12 +4403,8 @@ class DynamicForm {
         }
         @case ('non-paged') {
           @for (field of resolvedFields(); track field.key; let i = $index) {
-            <!-- @if + DfFieldOutlet's own renderReady-&-!hidden gate together silence NG01916:
-                 the template @if removes the host from the DOM (Angular's prescribed pattern), and
-                 the directive's gate stops a same-CD-pass mount before [formField] can warn.
-                 Don't dedupe one without the other — see DfFieldOutlet.renderReady. -->
-            @if (!field.hidden()) {
-              @if (windowsField(field, i)) {
+            @if (windowsField(field, i)) {
+              @if (!field.hidden()) {
                 @defer (on viewport) {
                   <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
                 } @placeholder {
@@ -4301,9 +4415,11 @@ class DynamicForm {
                     aria-hidden="true"
                   ></div>
                 }
-              } @else {
-                <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
               }
+            } @else {
+              <!-- DfFieldOutlet owns the hidden gate so an already-mounted field can be detached
+                   and restored without recreating its component and wrapper chain. -->
+              <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
             }
           }
         }
@@ -4314,7 +4430,7 @@ class DynamicForm {
     }
   `, isInline: true, styles: [".df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap, .5rem);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-sm, .5rem)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns, 12),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-md, .5rem)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-lg, .5rem)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-xl, .5rem)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}:host>*{grid-column:1/-1}:host.df-form-spacing-custom{--df-grid-row-gap: var(--df-form-custom-spacing, 1.5rem)}:host.df-form-gap-none{--df-grid-row-gap: 0}:host.df-form-gap-xs{--df-grid-row-gap: .25rem}:host.df-form-gap-sm{--df-grid-row-gap: .5rem}:host.df-form-gap-md{--df-grid-row-gap: 1rem}:host.df-form-gap-lg{--df-grid-row-gap: 1.5rem}:host.df-form-gap-xl{--df-grid-row-gap: 2rem}:host.df-form-paged{gap:0}.df-field-placeholder{display:block}\n"], dependencies: [{ kind: "directive", type: DfFieldOutlet, selector: "[dfFieldOutlet]", inputs: ["dfFieldOutlet", "dfFieldOutletEnvironmentInjector"] }, { kind: "component", type: PageOrchestratorComponent, selector: "div[page-orchestrator]", inputs: ["pageFields", "form", "fieldSignalContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [DfFieldOutlet]] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DynamicForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DynamicForm, decorators: [{
             type: Component,
             args: [{ selector: 'form[dynamic-form]', imports: [DfFieldOutlet, PageOrchestratorComponent], template: `
     @if (shouldRender()) {
@@ -4324,12 +4440,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
         }
         @case ('non-paged') {
           @for (field of resolvedFields(); track field.key; let i = $index) {
-            <!-- @if + DfFieldOutlet's own renderReady-&-!hidden gate together silence NG01916:
-                 the template @if removes the host from the DOM (Angular's prescribed pattern), and
-                 the directive's gate stops a same-CD-pass mount before [formField] can warn.
-                 Don't dedupe one without the other — see DfFieldOutlet.renderReady. -->
-            @if (!field.hidden()) {
-              @if (windowsField(field, i)) {
+            @if (windowsField(field, i)) {
+              @if (!field.hidden()) {
                 @defer (on viewport) {
                   <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
                 } @placeholder {
@@ -4340,9 +4452,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     aria-hidden="true"
                   ></div>
                 }
-              } @else {
-                <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
               }
+            } @else {
+              <!-- DfFieldOutlet owns the hidden gate so an already-mounted field can be detached
+                   and restored without recreating its component and wrapper chain. -->
+              <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
             }
           }
         }
@@ -4364,29 +4478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         '[attr.id]': 'idPrefix() || null',
                         '(submit)': 'onNativeSubmit($event)',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap, .5rem);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-sm, .5rem)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns, 12),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-md, .5rem)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-lg, .5rem)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-xl, .5rem)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}:host>*{grid-column:1/-1}:host.df-form-spacing-custom{--df-grid-row-gap: var(--df-form-custom-spacing, 1.5rem)}:host.df-form-gap-none{--df-grid-row-gap: 0}:host.df-form-gap-xs{--df-grid-row-gap: .25rem}:host.df-form-gap-sm{--df-grid-row-gap: .5rem}:host.df-form-gap-md{--df-grid-row-gap: 1rem}:host.df-form-gap-lg{--df-grid-row-gap: 1.5rem}:host.df-form-gap-xl{--df-grid-row-gap: 2rem}:host.df-form-paged{gap:0}.df-field-placeholder{display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamic-form", required: true }] }], formOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formOptions", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], _projectedTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfTemplate), { isSignal: true }] }], validityChange: [{ type: i0.Output, args: ["validityChange"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], submitted: [{ type: i0.Output, args: ["submitted"] }], reset: [{ type: i0.Output, args: ["reset"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], events: [{ type: i0.Output, args: ["events"] }], initialized: [{ type: i0.Output, args: ["initialized"] }], onPageChange: [{ type: i0.Output, args: ["onPageChange"] }], onPageNavigationStateChange: [{ type: i0.Output, args: ["onPageNavigationStateChange"] }] } });
-function countContainersRecursive(fields) {
-    let count = 0;
-    for (const field of fields) {
-        if (isContainerField(field)) {
-            count += 1;
-            if (hasChildFields(field)) {
-                const children = field.fields;
-                if (Array.isArray(children)) {
-                    for (const child of children) {
-                        if (Array.isArray(child)) {
-                                                        count += countContainersRecursive(child);
-                        }
-                        else if (child != null && isContainerField(child)) {
-                            count += countContainersRecursive([child]);
-                        }
-                    }
-                }
-            }
-        }
-    }
-    return count;
-}
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamic-form", required: true }] }], formOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formOptions", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], _projectedTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfTemplate), { isSignal: true }] }], validityChange: [{ type: i0.Output, args: ["validityChange"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], submitted: [{ type: i0.Output, args: ["submitted"] }], reset: [{ type: i0.Output, args: ["reset"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], events: [{ type: i0.Output, args: ["events"] }], initialized: [{ type: i0.Output, args: ["initialized"] }], activePageInitialized: [{ type: i0.Output, args: ["activePageInitialized"] }], onPageChange: [{ type: i0.Output, args: ["onPageChange"] }], onPageNavigationStateChange: [{ type: i0.Output, args: ["onPageNavigationStateChange"] }] } });
 
 const BUILT_IN_ADDON_TYPES = [
     {
@@ -4434,35 +4526,35 @@ const DISPLAY_FIELD_TYPES_BASE = {
 const BUILT_IN_FIELDS = [
     {
         name: 'row',
-                                loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-CM1pY9v5.mjs'),
+                                loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-Dc3ROhHL.mjs'),
         mapper: rowFieldMapper,
         valueHandling: 'flatten',
         ...CONTAINER_FIELD_TYPES_BASE,
     },
     {
         name: 'group',
-        loadComponent: () => import('./ng-forge-dynamic-forms-group-field.component-D4JhDffB.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-group-field.component-DAC3P9DC.mjs'),
         mapper: groupFieldMapper,
         valueHandling: 'include',
         ...CONTAINER_FIELD_TYPES_BASE,
     },
     {
         name: 'array',
-        loadComponent: () => import('./ng-forge-dynamic-forms-array-field.component-BVnXnaNw.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-array-field.component-CSCKq_1K.mjs'),
         mapper: arrayFieldMapper,
         valueHandling: 'include',
         ...CONTAINER_FIELD_TYPES_BASE,
     },
     {
         name: 'page',
-        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-Wbz6S8iH.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-DPKJcwUO.mjs'),
         mapper: pageFieldMapper,
         valueHandling: 'flatten',
         ...CONTAINER_FIELD_TYPES_BASE,
     },
     {
         name: 'text',
-        loadComponent: () => import('./ng-forge-dynamic-forms-text-field.component-C-f80sbk.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-text-field.component-BB-jutBq.mjs'),
         mapper: textFieldMapper,
         valueHandling: 'exclude',
         ...DISPLAY_FIELD_TYPES_BASE,
@@ -4473,7 +4565,7 @@ const BUILT_IN_FIELDS = [
     },
     {
         name: 'container',
-        loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-CM1pY9v5.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-Dc3ROhHL.mjs'),
         mapper: containerFieldMapper,
         valueHandling: 'flatten',
         ...CONTAINER_FIELD_TYPES_BASE,
@@ -4482,11 +4574,16 @@ const BUILT_IN_FIELDS = [
 const BUILT_IN_WRAPPERS = [
     {
         wrapperName: 'css',
-        loadComponent: () => import('./ng-forge-dynamic-forms-css-wrapper.component-D_yRuLpu.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-css-wrapper.component-BzgX8lAD.mjs'),
     },
     {
         wrapperName: 'row',
-        loadComponent: () => import('./ng-forge-dynamic-forms-row-wrapper.component-BBWmqQA_.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-row-wrapper.component-DMEeKZny.mjs'),
+    },
+    {
+        wrapperName: 'field-errors',
+        loadComponent: () => import('./ng-forge-dynamic-forms-field-errors-wrapper.component-CIKbWqYA.mjs'),
+        rendersFieldErrors: true,
     },
 ];
 
@@ -4547,7 +4644,8 @@ function provideDynamicForm(...items) {
     const wrapperBundles = items.filter(isWrappersBundle);
     const features = items.filter(isDynamicFormFeature);
     const fields = [...BUILT_IN_FIELDS, ...fieldTypes];
-    const wrappers = [...BUILT_IN_WRAPPERS, ...wrapperTypes, ...wrapperBundles.flatMap((bundle) => bundle.ɵdefinitions)];
+    const customWrappers = [...wrapperTypes, ...wrapperBundles.flatMap((bundle) => bundle.ɵdefinitions)];
+    const wrappers = [...BUILT_IN_WRAPPERS, ...customWrappers];
         const featureProviders = [];
     const hasLoggerFeature = features.some((feature) => feature.ɵkind === 'logger');
     features.forEach((feature) => {
@@ -4562,7 +4660,7 @@ function provideDynamicForm(...items) {
                 const logger = inject(DynamicFormLogger);
                 const registry = new Map();
                                 fields.forEach((fieldType) => {
-                    if (registry.has(fieldType.name)) {
+                                        if (DEV_MODE && registry.has(fieldType.name)) {
                         logger.warn(`Field type "${fieldType.name}" is already registered. Overwriting.`);
                     }
                     registry.set(fieldType.name, fieldType);
@@ -4588,11 +4686,18 @@ function provideDynamicForm(...items) {
             useFactory: () => {
                 const logger = inject(DynamicFormLogger);
                 const registry = new Map();
-                                wrappers.forEach((wrapperType) => {
-                    if (registry.has(wrapperType.wrapperName)) {
-                        logger.warn(`Wrapper type "${wrapperType.wrapperName}" is already registered. Overwriting.`);
+                                                                                const builtInNames = new Set(BUILT_IN_WRAPPERS.map((w) => w.wrapperName));
+                BUILT_IN_WRAPPERS.forEach((wrapperType) => registry.set(wrapperType.wrapperName, wrapperType));
+                                const seenCustom = DEV_MODE ? new Set() : null;
+                customWrappers.forEach((wrapperType) => {
+                    const name = wrapperType.wrapperName;
+                    if (seenCustom) {
+                        if (seenCustom.has(name) && !builtInNames.has(name)) {
+                            logger.warn(`Wrapper type "${name}" is already registered. Overwriting.`);
+                        }
+                        seenCustom.add(name);
                     }
-                    registry.set(wrapperType.wrapperName, wrapperType);
+                    registry.set(name, wrapperType);
                 });
                 return registry;
             },
@@ -4623,7 +4728,7 @@ function provideDynamicForm(...items) {
                     registry.set(def.type, def);
                 }
                 for (const def of contributed) {
-                    if (registry.has(def.type)) {
+                                        if (DEV_MODE && registry.has(def.type)) {
                         logger.warn(`Addon type "${def.type}" is already registered. Overwriting.`);
                     }
                     registry.set(def.type, def);
@@ -4681,10 +4786,22 @@ function withFieldWindowing(config) {
         enabled: true,
         eager: clampWindowSize(config?.eager, 12),
         placeholderHeight: config?.placeholderHeight ?? '4rem',
+        park: resolveFieldParking({ enabled: true, margin: '100%' }, config?.park),
     };
     return createFeature('field-windowing', [{ provide: FIELD_WINDOWING, useValue: resolved }]);
 }
 
+function withExperimentalWebMcp() {
+    return createFeature('web-mcp', [{ provide: WEB_MCP_ENABLED, useValue: true }]);
+}
+
+const VALIDATION_EXECUTION_DEFAULTS = new InjectionToken('VALIDATION_EXECUTION_DEFAULTS', {
+    providedIn: 'root',
+    factory: () => ({
+        validateWhenHidden: false,
+    }),
+});
+
 function withValidationExecutionDefaults(config) {
     const resolved = {
         validateWhenHidden: config?.validateWhenHidden ?? false,
@@ -4705,10 +4822,10 @@ class TextAddonComponent {
     ...(ngDevMode ? [{ debugName: "addon" }] : /* istanbul ignore next */ []));
         fieldInputs = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: TextAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: TextAddonComponent, isStandalone: true, selector: "df-text-addon", inputs: { addon: { classPropertyName: "addon", publicName: "addon", isSignal: true, isRequired: true, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "\"true\"" } }, ngImport: i0, template: `<span>{{ addon().text | dynamicText | async }}</span>`, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TextAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: TextAddonComponent, isStandalone: true, selector: "df-text-addon", inputs: { addon: { classPropertyName: "addon", publicName: "addon", isSignal: true, isRequired: true, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "\"true\"" } }, ngImport: i0, template: `<span>{{ addon().text | dynamicText | async }}</span>`, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: TextAddonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TextAddonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-text-addon',
@@ -4748,14 +4865,14 @@ class TemplateAddonComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: TemplateAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: TemplateAddonComponent, isStandalone: true, selector: "df-template-addon", inputs: { addon: { classPropertyName: "addon", publicName: "addon", isSignal: true, isRequired: true, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TemplateAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: TemplateAddonComponent, isStandalone: true, selector: "df-template-addon", inputs: { addon: { classPropertyName: "addon", publicName: "addon", isSignal: true, isRequired: true, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (template(); as tpl) {
       <ng-container *ngTemplateOutlet="tpl; context: outletContext()" />
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: TemplateAddonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TemplateAddonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-template-addon',
@@ -4803,14 +4920,14 @@ class ComponentAddonComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ComponentAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ComponentAddonComponent, isStandalone: true, selector: "df-component-addon", inputs: { addon: { classPropertyName: "addon", publicName: "addon", isSignal: true, isRequired: true, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ComponentAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: ComponentAddonComponent, isStandalone: true, selector: "df-component-addon", inputs: { addon: { classPropertyName: "addon", publicName: "addon", isSignal: true, isRequired: true, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (resolvedComponent(); as cmp) {
       <ng-container *ngComponentOutlet="cmp; inputs: inputs()" />
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ComponentAddonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ComponentAddonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-component-addon',
@@ -4875,6 +4992,128 @@ function sanitizeFormConfigPure(config, fieldRegistry, typeRegistry, options = {
     return { sanitized: { ...config, fields: fields }, warnings };
 }
 
+class ActivePageInitializedEvent {
+    pageIndex;
+    pageKey;
+    type = 'active-page-initialized';
+    constructor(pageIndex, pageKey) {
+        this.pageIndex = pageIndex;
+        this.pageKey = pageKey;
+    }
+}
+
+class GoToPageEvent {
+    pageIndex;
+    options;
+    type = 'go-to-page';
+    constructor(
+        pageIndex, 
+        options) {
+        this.pageIndex = pageIndex;
+        this.options = options;
+    }
+}
+
+class NextPageEvent {
+    type = 'next-page';
+}
+
+class PreviousPageEvent {
+    type = 'previous-page';
+}
+
+class FormResetEvent {
+    type = 'form-reset';
+}
+
+class FormClearEvent {
+    type = 'form-clear';
+}
+
+class AppendArrayItemEvent {
+    arrayKey;
+    template;
+    type = 'append-array-item';
+    constructor(
+        arrayKey, 
+        template) {
+        this.arrayKey = arrayKey;
+        this.template = template;
+    }
+}
+
+class PrependArrayItemEvent {
+    arrayKey;
+    template;
+    type = 'prepend-array-item';
+    constructor(
+        arrayKey, 
+        template) {
+        this.arrayKey = arrayKey;
+        this.template = template;
+    }
+}
+
+class InsertArrayItemEvent {
+    arrayKey;
+    index;
+    template;
+    type = 'insert-array-item';
+    constructor(
+        arrayKey, 
+        index, 
+        template) {
+        this.arrayKey = arrayKey;
+        this.index = index;
+        this.template = template;
+    }
+}
+
+class PopArrayItemEvent {
+    arrayKey;
+    type = 'pop-array-item';
+    constructor(
+        arrayKey) {
+        this.arrayKey = arrayKey;
+    }
+}
+
+class ShiftArrayItemEvent {
+    arrayKey;
+    type = 'shift-array-item';
+    constructor(
+        arrayKey) {
+        this.arrayKey = arrayKey;
+    }
+}
+
+class MoveArrayItemEvent {
+    arrayKey;
+    fromIndex;
+    toIndex;
+    type = 'move-array-item';
+    constructor(
+        arrayKey, 
+        fromIndex, 
+        toIndex) {
+        this.arrayKey = arrayKey;
+        this.fromIndex = fromIndex;
+        this.toIndex = toIndex;
+    }
+}
+
+class RemoveAtIndexEvent {
+    arrayKey;
+    index;
+    type = 'remove-at-index';
+    constructor(
+        arrayKey, 
+        index) {
+        this.arrayKey = arrayKey;
+        this.index = index;
+    }
+}
+
 function arrayEvent(arrayKey) {
     return {
                 append: (template) => new AppendArrayItemEvent(arrayKey, template),
@@ -4890,5 +5129,5 @@ function arrayEvent(arrayKey) {
 
 
 
-export { withLegacyStatusClasses as $, ArrayItemRegistryService as A, BUILT_IN_FIELDS as B, CONTAINER_FIELD_PROCESSORS as C, DfFieldOutlet as D, EventDispatcher as E, FIELD_WINDOWING as F, PageChangeEvent as G, PopArrayItemEvent as H, InsertArrayItemEvent as I, PrependArrayItemEvent as J, PreviousPageEvent as K, TextAddonComponent as L, MoveArrayItemEvent as M, NextPageEvent as N, arrayEvent as O, PROPERTY_OVERRIDE_STORE as P, createWrappers as Q, RemoveAtIndexEvent as R, ShiftArrayItemEvent as S, TemplateAddonComponent as T, isWrappersBundle as U, provideDynamicForm as V, sanitizeFormConfig as W, withAddonActions as X, withCustomAddon as Y, withEventFormValue as Z, withFieldWindowing as _, isSameWrapperChain as a, withLoggerConfig as a0, withPagePreload as a1, withValidationExecutionDefaults as a2, withValueExclusionDefaults as a3, wrapperProps as a4, createWrapperChainController as b, createFieldResolutionPipe as c, createSchemaFromFields as d, createHiddenSignal as e, createRenderReadySignal as f, getNormalizedArrayMetadata as g, getFieldDefaultValue as h, injectFieldRegistry as i, resolveFieldWindowing as j, DEV_MODE as k, DEFAULT_DEBOUNCE_MS as l, mapFieldToInputs as m, DERIVATION_WARNING_TRACKER as n, FormStateManager as o, DERIVATION_LOG_CONFIG as p, AppendArrayItemEvent as q, resolveWrappers as r, ComponentAddonComponent as s, traverseFieldsWithContext as t, ConsoleLogger as u, DfTemplate as v, DynamicForm as w, FormClearEvent as x, FormResetEvent as y, FormSubmitEvent as z };
-//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-ZiNaCWHl.mjs.map
+export { arrayEvent as $, ArrayItemRegistryService as A, BUILT_IN_FIELDS as B, CONTAINER_FIELD_PROCESSORS as C, DfFieldOutlet as D, ConsoleLogger as E, FIELD_WINDOWING as F, DfTemplate as G, DynamicForm as H, EventDispatcher as I, FormClearEvent as J, FormResetEvent as K, GoToPageEvent as L, InsertArrayItemEvent as M, MoveArrayItemEvent as N, NextPageEvent as O, PROPERTY_OVERRIDE_STORE as P, PageChangeEvent as Q, PagerStateEvent as R, SchemaRegistryService as S, PopArrayItemEvent as T, PrependArrayItemEvent as U, VALIDATION_EXECUTION_DEFAULTS as V, PreviousPageEvent as W, RemoveAtIndexEvent as X, ShiftArrayItemEvent as Y, TemplateAddonComponent as Z, TextAddonComponent as _, createFieldResolutionPipe as a, createWrappers as a0, isWrappersBundle as a1, provideDynamicForm as a2, sanitizeFormConfig as a3, withAddonActions as a4, withCustomAddon as a5, withEventFormValue as a6, withExperimentalWebMcp as a7, withFieldWindowing as a8, withLegacyStatusClasses as a9, withLoggerConfig as aa, withPagePreload as ab, withValidationExecutionDefaults as ac, withValueExclusionDefaults as ad, wrapperProps as ae, isSameWrapperChain as b, computeContainerHostClasses as c, initializationComponentPath as d, createWrapperChainController as e, createHiddenSignal as f, createRenderReadySignal as g, getNormalizedArrayMetadata as h, injectFieldRegistry as i, emitComponentInitialized as j, getFieldDefaultValue as k, resolveFieldWindowing as l, mapFieldToInputs as m, collectInitializingContainerKeys as n, ActivePageInitializedEvent as o, initializationComponentKey as p, DEV_MODE as q, resolveWrappers as r, setupContainerInitEffect as s, traverseFieldsWithContext as t, DERIVATION_WARNING_TRACKER as u, FormStateManager as v, DERIVATION_LOG_CONFIG as w, FormSubmitEvent as x, AppendArrayItemEvent as y, ComponentAddonComponent as z };
+//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-CXQe_5td.mjs.map