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

package/fesm2022/{ng-forge-dynamic-forms-ng-forge-dynamic-forms-Du3V5AOb.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, linkedSignal, ChangeDetectionStrategy, Component, Injectable, InjectionToken, 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, requiresTreeValidation, applyValidator, isPageField, isGenericContainerField, isGroupField, getFieldValueHandling, normalizeFieldsArray, getNestedValue, extractStringDependencies, isCrossFieldStateLogic, extractExpressionDependencies, isCrossFieldSchema, 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, validateTree, 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,18 +141,29 @@ 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) {
@@ -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,1656 +702,549 @@ 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.`);
+            }
+        }
+    }
+    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 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;
-    }
-}
-
-class PageNavigationStateChangeEvent {
-    state;
-    type = 'page-navigation-state-change';
-    constructor(state) {
-        this.state = state;
-    }
-}
-
-class PageOrchestratorComponent {
-    eventBus = inject(EventBus);
-    fieldContextRegistry = inject(FieldContextRegistryService);
-    functionRegistry = inject(FunctionRegistryService);
-    formOptions = inject(FORM_OPTIONS, { optional: true });
-        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;
-        }
-        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 */ []));
-    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 (i === state().currentPageIndex || i === state().currentPageIndex + 1 || i === state().currentPageIndex - 1) {
-          <!-- Current and adjacent pages (±1): 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 {
-          <!-- Distant pages: defer until browser is idle for memory savings -->
-          @defer (on idle) {
-            <section page-field [field]="pageField" [key]="pageField.key" [pageIndex]="i" [isVisible]="false"></section>
-          } @placeholder {
-            <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-amWhCdHL.mjs').then(m => m.default)], () => [/* @ts-ignore */
-                import('./ng-forge-dynamic-forms-page-field.component-amWhCdHL.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-amWhCdHL.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 (i === state().currentPageIndex || i === state().currentPageIndex + 1 || i === state().currentPageIndex - 1) {
-          <!-- Current and adjacent pages (±1): 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 {
-          <!-- Distant pages: defer until browser is idle for memory savings -->
-          @defer (on idle) {
-            <section page-field [field]="pageField" [key]="pageField.key" [pageIndex]="i" [isVisible]="false"></section>
-          } @placeholder {
-            <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);
-        }
-    }
-    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();
-    const itemOrder = [];
-    const primitiveFieldKey = signal(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "primitiveFieldKey" }] : /* istanbul ignore next */ []));
-    return {
-        templates,
-        itemOrder,
-        primitiveFieldKey,
-        nextId: () => `item-${counter++}`,
-        setTemplate(itemId, t) {
-            templates.set(itemId, t);
-        },
-        getTemplate(itemId) {
-            return templates.get(itemId);
-        },
-        hasTemplate(itemId) {
-            return templates.has(itemId);
-        },
-        setIdAt(index, itemId) {
-            itemOrder[index] = itemId;
-        },
-        removeAt(index) {
-            const [removed] = itemOrder.splice(index, 1);
-            if (removed !== undefined)
-                templates.delete(removed);
-        },
-        moveItem(fromIndex, toIndex) {
-            const [id] = itemOrder.splice(fromIndex, 1);
-            if (id !== undefined)
-                itemOrder.splice(toIndex, 0, id);
-        },
-        truncate(length) {
-            const removed = itemOrder.splice(length);
-            for (const id of removed)
-                templates.delete(id);
-        },
-        clear() {
-            templates.clear();
-            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) => {
-                                    if (requiresTreeValidation(validatorConfig)) {
-                logger?.warn(`Validator "${validatorConfig.type}" in schema definition "${schema.name}" uses a cross-field expression, ` +
-                    `which is not supported on schema definition validators; it was skipped.`);
-                return;
-            }
-            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);
-    }
-        const numberConfig = getNumberValidationConfig(fieldDef);
-    if (numberConfig) {
-        applyNumberValidators(path, numberConfig);
-    }
-}
-function applyFieldState(fieldDef, path) {
-    if (fieldDef.disabled) {
-        disabled(path);
-    }
-    if (fieldDef.readonly) {
-        readonly(path);
-    }
-    if (fieldDef.hidden) {
-        hidden(path, () => true);
-    }
-}
-function mapArrayFieldToForm(arrayField, fieldPath, context) {
-    if (!isArrayField(arrayField)) {
-        return;
-    }
-        if (arrayField.minLength !== undefined) {
-        minLength(fieldPath, arrayField.minLength);
-    }
-    if (arrayField.maxLength !== undefined) {
-        maxLength(fieldPath, arrayField.maxLength);
-    }
-        let itemDefinitions = arrayField.fields;
-                    if (!itemDefinitions || itemDefinitions.length === 0) {
-        const metadataTemplate = getNormalizedArrayMetadata(arrayField)?.template;
-        if (metadataTemplate) {
-            itemDefinitions = [
-                Array.isArray(metadataTemplate) ? [...metadataTemplate] : metadataTemplate,
-            ];
-        }
-    }
-            if (!itemDefinitions || itemDefinitions.length === 0) {
-        const emptyItemSchema = schema(() => {
-                    });
-        applyEach(fieldPath, emptyItemSchema);
-        return;
-    }
-        let hasPrimitiveItems = false;
-    const allObjectFields = [];
-    for (const itemDef of itemDefinitions) {
-        if (Array.isArray(itemDef)) {
-                        collectFieldsFromObjectItem(itemDef, allObjectFields);
-        }
-        else if (isPageField(itemDef) ||
-            isRowField(itemDef) ||
-            isGenericContainerField(itemDef)) {
-                                                collectFieldsFromObjectItem([itemDef], allObjectFields);
-        }
-        else {
-                        hasPrimitiveItems = true;
-        }
-    }
-        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);
-                    }
-                }
-            }
+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);
     });
-    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);
-            }
-        }
-        else {
-            const key = field.key;
-            if (key && !seenKeys.has(key)) {
-                seenKeys.add(key);
-                allFields.push(field);
-            }
-        }
-    }
-}
-
-function getFieldDefaultValue(field, registry) {
-    const valueHandling = getFieldValueHandling(field.type, registry);
-        if (valueHandling === 'exclude') {
-        return undefined;
-    }
-                if (valueHandling === 'flatten' && 'fields' in field && field.fields) {
-        const childFields = field.fields;
-                const flattenedValues = {};
-        for (const childField of childFields) {
-            const childValueHandling = getFieldValueHandling(childField.type, registry);
-            if (childValueHandling === 'exclude')
-                continue;
-            const childValue = getFieldDefaultValue(childField, registry);
-            if (childValue === undefined)
-                continue;
-            if (childValueHandling === 'flatten' && childValue && typeof childValue === 'object' && !Array.isArray(childValue)) {
-                                Object.assign(flattenedValues, childValue);
-            }
-            else if ('key' in childField && childField.key) {
-                flattenedValues[childField.key] = childValue;
-            }
-        }
-                return Object.keys(flattenedValues).length > 0 ? flattenedValues : undefined;
+                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 (field.type === 'group' && 'fields' in field) {
-        const fields = field.fields;
-        if (!fields || fields.length === 0) {
-            return undefined;
-        }
-        const groupDefaults = {};
-        for (const childField of fields) {
-            const childValueHandling = getFieldValueHandling(childField.type, registry);
-            if (childValueHandling === 'exclude')
-                continue;
-            const childValue = getFieldDefaultValue(childField, registry);
-            if (childValueHandling === 'flatten') {
-                                                if (childValue && typeof childValue === 'object' && !Array.isArray(childValue)) {
-                    Object.assign(groupDefaults, childValue);
-                }
-            }
-            else if ('key' in childField && childField.key) {
-                if (childValue !== undefined) {
-                    groupDefaults[childField.key] = childValue;
-                }
-            }
-        }
-        return groupDefaults;
+    if (minLength !== undefined) {
+        arrayFieldObj['minLength'] = minLength;
     }
-            const valueField = field;
-    const isNullable = valueField.nullable === true;
-        if ('value' in field) {
-        if (valueField.value !== null && valueField.value !== undefined) {
-            return valueField.value;
-        }
-                if (valueField.value === null && isNullable) {
-            return null;
-        }
-            }
-        if (isNullable) {
-        return null;
+    if (maxLength !== undefined) {
+        arrayFieldObj['maxLength'] = maxLength;
     }
-        if (field.type === 'checkbox') {
-        return false;
+    if (wrappers !== undefined) {
+        arrayFieldObj['wrappers'] = wrappers;
     }
-    if (field.type === 'array') {
-                                const arrayField = field;
-        const itemDefinitions = arrayField.fields;
-        if (!itemDefinitions || itemDefinitions.length === 0) {
-            return [];
-        }
-                return itemDefinitions.map((itemDef) => {
-                                    if (!Array.isArray(itemDef)) {
-                return getFieldDefaultValue(itemDef, registry);
-            }
-                        const itemFields = itemDef;
-            let itemValue = {};
-            for (const templateField of itemFields) {
-                const fieldValue = getFieldDefaultValue(templateField, registry);
-                const fieldValueHandling = getFieldValueHandling(templateField.type, registry);
-                if (templateField.type === 'group' && 'key' in templateField && templateField.key) {
-                                        itemValue[templateField.key] = fieldValue;
-                }
-                else if (templateField.type === 'row' || templateField.type === 'container') {
-                                        if (fieldValue && typeof fieldValue === 'object') {
-                        itemValue = { ...itemValue, ...fieldValue };
-                    }
-                }
-                else if (fieldValueHandling === 'include' && 'key' in templateField && templateField.key) {
-                    itemValue[templateField.key] = fieldValue;
-                }
-            }
-            return itemValue;
-        });
+    if (skipAutoWrappers !== undefined) {
+        arrayFieldObj['skipAutoWrappers'] = skipAutoWrappers;
     }
-                        if (field.type === 'input' && 'props' in field) {
-        const props = field.props;
-        if (props?.type === 'number') {
-            return NaN;
-        }
+    if (skipDefaultWrappers !== undefined) {
+        arrayFieldObj['skipDefaultWrappers'] = skipDefaultWrappers;
     }
-    return '';
-}
-
-function applyFormLevelSchema(path, formLevelSchema) {
-    if (isStandardSchemaMarker(formLevelSchema)) {
-                                validateStandardSchema(path, formLevelSchema.schema);
+            if (validators !== undefined) {
+        arrayFieldObj['validators'] = validators;
     }
-    else if (typeof formLevelSchema === 'function') {
-                                formLevelSchema(path);
+    if (validationMessages !== undefined) {
+        arrayFieldObj['validationMessages'] = validationMessages;
     }
-}
-function createFormLevelSchema(formLevelSchema) {
-    return schema((path) => {
-        applyFormLevelSchema(path, formLevelSchema);
+    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 };
 }
-
-const VALIDATION_EXECUTION_DEFAULTS = new InjectionToken('VALIDATION_EXECUTION_DEFAULTS', {
-    providedIn: 'root',
-    factory: () => ({
-        validateWhenHidden: false,
-    }),
-});
-
-function getFieldTreeByKey(ctx, key) {
-        if (!key.includes('.')) {
-        return ctx.fieldTree[key];
-    }
-        const parts = key.split('.');
-    let current = ctx.fieldTree;
-    for (const part of parts) {
-                        if (!current || (typeof current !== 'object' && typeof current !== 'function')) {
-            return undefined;
-        }
-        current = current[part];
+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 current;
+    return [...fieldsWithValues, buildRemoveButton(removeButton)];
 }
-function createSchemaFromFields(fields, registry, optionsOrValidators) {
-            const functionRegistry = inject(FunctionRegistryService);
-    const logger = inject(DynamicFormLogger);
-    const validationExecutionDefaults = inject(VALIDATION_EXECUTION_DEFAULTS);
-        const options = Array.isArray(optionsOrValidators)
-        ? { crossFieldValidators: optionsOrValidators }
-        : (optionsOrValidators ?? {});
-    const { crossFieldValidators, formLevelSchema } = options;
-    const rootContext = {
-        validateWhenHidden: options.validateWhenHidden ?? validationExecutionDefaults.validateWhenHidden,
-        ancestorAlwaysHidden: false,
-        ancestorHiddenLogics: [],
+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 }),
     };
-    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;
+}
+
+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);
             }
-                                                mapFieldToForm(fieldDef, fieldPath, rootContext);
         }
-                if (crossFieldValidators && crossFieldValidators.length > 0) {
-            applyCrossFieldTreeValidator(path, crossFieldValidators, functionRegistry, logger);
-        }
-                if (formLevelSchema) {
-            applyFormLevelSchema(path, formLevelSchema);
+        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);
+            }
         }
-    });
-}
-function applyCrossFieldTreeValidator(rootPath, validators, functionRegistry, logger) {
-        const customFunctions = functionRegistry.getCustomFunctions();
-                const customValidators = validators.filter((entry) => {
-        if (entry.config.type !== 'custom') {
-            logger.warn(`Unexpected non-custom validator in cross-field tree for "${entry.sourceFieldKey}"; ignoring.`);
-            return false;
+        const started = [];
+        for (const type of fieldTypes) {
+            if (fieldRegistry.getLoadedComponent(type))
+                continue;
+            started.push(Promise.resolve(fieldRegistry.loadTypeComponent(type)).catch(() => undefined));
         }
-        return true;
-    });
-    validateTree(rootPath, (ctx) => {
-        if (customValidators.length === 0) {
-            return null;         }
-                const formValue = ctx.value();
-        const errors = [];
-        for (const entry of customValidators) {
-            const { sourceFieldKey, config } = entry;
-            try {
-                const error = evaluateCrossFieldValidator(entry, formValue, sourceFieldKey, ctx, customFunctions, logger);
-                if (error) {
-                    errors.push(error);
-                }
-            }
-            catch (err) {
-                logger.error(`Error evaluating cross-field validator for ${sourceFieldKey}:`, err);
-                                const targetField = getFieldTreeByKey(ctx, sourceFieldKey);
-                if (targetField) {
-                    const customConfig = config;
-                    errors.push({
-                        kind: customConfig.kind || config.type || 'custom',
-                        fieldTree: targetField,
-                    });
-                }
-            }
+        for (const type of wrapperTypes) {
+            if (wrapperCache.has(type))
+                continue;
+            started.push(loadWrapperComponent(type, wrapperRegistry, wrapperCache, wrapperLoadCache).catch(() => undefined));
         }
-        return errors.length > 0 ? errors : null;
-    });
-}
-function evaluateCrossFieldValidator(entry, formValue, sourceFieldKey, ctx, customFunctions, logger) {
-    const { config } = entry;
-    const fieldValue = getNestedValue(formValue, sourceFieldKey);
-        const evaluationContext = {
-        fieldValue,
-        formValue,
-        fieldPath: sourceFieldKey,
-        customFunctions,
-        logger,
+                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,
     };
-        return evaluateCustomCrossFieldValidator(config, evaluationContext, sourceFieldKey, ctx);
 }
-function evaluateCustomCrossFieldValidator(config, evaluationContext, sourceFieldKey, ctx) {
-    if (!config.expression) {
-        return null;
-    }
-    const { fieldValue, formValue, logger, customFunctions } = evaluationContext;
-            if (config.when) {
-        const conditionMet = evaluateCondition(config.when, {
-            fieldValue,
-            formValue,
-            fieldPath: sourceFieldKey,
-            customFunctions: customFunctions || {},
-            logger,
-        });
-        if (!conditionMet) {
-            return null;         }
-    }
-        const result = ExpressionParser.evaluate(config.expression, evaluationContext);
-        if (result) {
-        return null;
-    }
-        const targetField = getFieldTreeByKey(ctx, sourceFieldKey);
-    if (!targetField) {
-        evaluationContext.logger.warn(`Cross-field validator references non-existent field "${sourceFieldKey}"`);
-        return null;
+
+class PageChangeEvent {
+    currentPageIndex;
+    totalPages;
+    previousPageIndex;
+    type = 'page-change';
+    constructor(
+        currentPageIndex, 
+        totalPages, 
+        previousPageIndex) {
+        this.currentPageIndex = currentPageIndex;
+        this.totalPages = totalPages;
+        this.previousPageIndex = previousPageIndex;
     }
-    const errorObj = {
-        kind: config.kind || 'custom',
-        fieldTree: targetField,
-    };
-        if (config.errorParams) {
-        for (const [key, expression] of Object.entries(config.errorParams)) {
-            try {
-                errorObj[key] = ExpressionParser.evaluate(expression, evaluationContext);
-            }
-            catch (error) {
-                evaluationContext.logger.warn(`Failed to evaluate error param expression "${key}": ${expression}`, error);
-            }
-        }
+}
+
+class PagerStateEvent {
+    state;
+    type = 'pager-state';
+    constructor(state) {
+        this.state = state;
     }
-    return errorObj;
 }
-function fieldsToDefaultValues(fields, registry) {
-    const defaultValues = {};
+
+const PAGE_PRELOAD_WINDOW = new InjectionToken('PAGE_PRELOAD_WINDOW', {
+    providedIn: 'root',
+    factory: () => 1,
+});
+
+function collectLeafFieldKeys(fields) {
+    const keys = [];
     for (const field of fields) {
-        if (!field.key)
-            continue;
-                const valueHandling = getFieldValueHandling(field.type, registry);
-        if (valueHandling === 'flatten') {
-            continue;
+        if (isRowField(field) || isGenericContainerField(field)) {
+            keys.push(...collectLeafFieldKeys(field.fields));
         }
-        const value = getFieldDefaultValue(field, registry);
-        if (value !== undefined) {
-            defaultValues[field.key] = value;
+        else if (field.key) {
+            keys.push(field.key);
         }
     }
-    return defaultValues;
+    return keys;
 }
 
-function createEmptyCollection() {
+function createSlot() {
+    let counter = 0;
+    const templates = new Map();
+    const itemOrder = [];
+    const primitiveFieldKey = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primitiveFieldKey" }] : /* istanbul ignore next */ []));
     return {
-        validators: [],
-        logic: [],
-        schemas: [],
+        templates,
+        itemOrder,
+        primitiveFieldKey,
+        nextId: () => `item-${counter++}`,
+        setTemplate(itemId, t) {
+            templates.set(itemId, t);
+        },
+        getTemplate(itemId) {
+            return templates.get(itemId);
+        },
+        hasTemplate(itemId) {
+            return templates.has(itemId);
+        },
+        setIdAt(index, itemId) {
+            itemOrder[index] = itemId;
+        },
+        removeAt(index) {
+            const [removed] = itemOrder.splice(index, 1);
+            if (removed !== undefined)
+                templates.delete(removed);
+        },
+        moveItem(fromIndex, toIndex) {
+            const [id] = itemOrder.splice(fromIndex, 1);
+            if (id !== undefined)
+                itemOrder.splice(toIndex, 0, id);
+        },
+        truncate(length) {
+            const removed = itemOrder.splice(length);
+            for (const id of removed)
+                templates.delete(id);
+        },
+        clear() {
+            templates.clear();
+            itemOrder.length = 0;
+            counter = 0;
+            primitiveFieldKey.set(undefined);
+        },
     };
 }
-function collectCrossFieldEntries(fields) {
-    const collection = createEmptyCollection();
-    traverseFields(fields, collection, '');
-    return collection;
-}
-function traverseFields(fields, collection, pathPrefix) {
-    for (const field of fields) {
-        collectFromField(field, collection, pathPrefix);
-                if (hasChildFields(field)) {
-                                                                        const groupKey = isGroupField(field) ? field.key : undefined;
-            const childPrefix = groupKey ? (pathPrefix ? `${pathPrefix}.${groupKey}` : groupKey) : pathPrefix;
-            traverseFields(normalizeFieldsArray(field.fields), collection, childPrefix);
-        }
-    }
-}
-function collectFromField(field, collection, pathPrefix) {
-    const fieldKey = field.key;
-    if (!fieldKey)
-        return;
-    const fullKey = pathPrefix ? `${pathPrefix}.${fieldKey}` : fieldKey;
-    const validationField = field;
-        if (validationField.validators) {
-        for (const config of validationField.validators) {
-            const entry = tryCreateValidatorEntry(fullKey, config);
-            if (entry) {
-                collection.validators.push(entry);
-            }
-        }
-    }
-        if (validationField.logic) {
-        for (const config of validationField.logic) {
-            const entry = tryCreateLogicEntry(fullKey, config);
-            if (entry) {
-                collection.logic.push(entry);
-            }
-        }
-    }
-        if (validationField.schemas) {
-        for (const config of validationField.schemas) {
-            const entry = tryCreateSchemaEntry(fullKey, config);
-            if (entry) {
-                collection.schemas.push(entry);
-            }
+class ArrayItemRegistryService {
+    slots = new Map();
+        slotFor(arrayPath) {
+        let slot = this.slots.get(arrayPath);
+        if (!slot) {
+            slot = createSlot();
+            this.slots.set(arrayPath, slot);
         }
+        return slot;
     }
-}
-function tryCreateValidatorEntry(fieldKey, config) {
-    if (!requiresTreeValidation(config)) {
-        return null;     }
-    if (config.type === 'custom') {
-        const customConfig = config;
-        return {
-            sourceFieldKey: fieldKey,
-            config,
-            dependsOn: extractStringDependencies(customConfig.expression || ''),
-            category: 'validator',
-        };
+        clearAll() {
+        for (const slot of this.slots.values())
+            slot.clear();
+        this.slots.clear();
     }
-    const builtInConfig = config;
-    return {
-        sourceFieldKey: fieldKey,
-        config: convertBuiltInToCustomValidator(builtInConfig),
-        validatorType: config.type,
-        dependsOn: extractStringDependencies(builtInConfig.expression || ''),
-        category: 'validator',
-    };
+    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 tryCreateLogicEntry(fieldKey, config) {
-            if (!isStateLogicConfig(config)) {
-        return null;
+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);
     }
-    if (!isCrossFieldStateLogic(config)) {
-        return null;
+        getSchema(name) {
+        return this.registeredSchemas.get(name);
     }
-    const condition = config.condition;
-    return {
-        sourceFieldKey: fieldKey,
-        logicType: config.type,
-        condition,
-        config: config,
-        dependsOn: extractExpressionDependencies(condition),
-        category: 'logic',
-    };
-}
-function tryCreateSchemaEntry(fieldKey, config) {
-    if (!isCrossFieldSchema(config)) {
-        return null;
+        getAllSchemas() {
+        return new Map(this.registeredSchemas);
     }
-    const condition = config.condition;
-    return {
-        sourceFieldKey: fieldKey,
-        config,
-        condition,
-        dependsOn: extractExpressionDependencies(condition),
-        category: 'schema',
-    };
-}
-function convertBuiltInToCustomValidator(config) {
-    const expression = config.expression;
-    if (!expression) {
-        throw new DynamicFormError(`Built-in validator ${config.type} missing required expression for cross-field conversion`);
-    }
-    let validationExpression;
-    switch (config.type) {
-        case 'min':
-            validationExpression = `fieldValue == null || fieldValue >= (${expression})`;
-            break;
-        case 'max':
-            validationExpression = `fieldValue == null || fieldValue <= (${expression})`;
-            break;
-        case 'minLength':
-            validationExpression = `fieldValue == null || (typeof fieldValue !== 'string' && !Array.isArray(fieldValue)) || fieldValue.length >= (${expression})`;
-            break;
-        case 'maxLength':
-            validationExpression = `fieldValue == null || (typeof fieldValue !== 'string' && !Array.isArray(fieldValue)) || fieldValue.length <= (${expression})`;
-            break;
-        case 'pattern':
-                        try {
-                new RegExp(expression);
-            }
-            catch (e) {
-                throw new DynamicFormError(`Invalid regex pattern in cross-field validator: '${expression}' — ${e instanceof Error ? e.message : String(e)}`);
-            }
-            validationExpression = `fieldValue == null || new RegExp(${JSON.stringify(expression)}).test(fieldValue)`;
-            break;
-        default:
-            throw new DynamicFormError(`Cannot convert ${config.type} validator to custom validator`);
+        clearSchemas() {
+        this.registeredSchemas.clear();
     }
-    return {
-        type: 'custom',
-        expression: validationExpression,
-        kind: config.type,
-        when: config.when,
-        errorParams: {
-            [config.type]: expression,
-        },
-    };
+        resolveSchema(schema) {
+        if (typeof schema === 'string') {
+            return this.getSchema(schema) || null;
+        }
+        return schema;
+    }
+    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;
@@ -2119,6 +1324,109 @@ function flattenFields(fields, registry, options = {}) {
     return result;
 }
 
+function getFieldDefaultValue(field, registry) {
+    const valueHandling = getFieldValueHandling(field.type, registry);
+        if (valueHandling === 'exclude') {
+        return undefined;
+    }
+                if (valueHandling === 'flatten' && 'fields' in field && field.fields) {
+        const childFields = field.fields;
+                const flattenedValues = {};
+        for (const childField of childFields) {
+            const childValueHandling = getFieldValueHandling(childField.type, registry);
+            if (childValueHandling === 'exclude')
+                continue;
+            const childValue = getFieldDefaultValue(childField, registry);
+            if (childValue === undefined)
+                continue;
+            if (childValueHandling === 'flatten' && childValue && typeof childValue === 'object' && !Array.isArray(childValue)) {
+                                Object.assign(flattenedValues, childValue);
+            }
+            else if ('key' in childField && childField.key) {
+                flattenedValues[childField.key] = childValue;
+            }
+        }
+                return Object.keys(flattenedValues).length > 0 ? flattenedValues : undefined;
+    }
+        if (field.type === 'group' && 'fields' in field) {
+        const fields = field.fields;
+        if (!fields || fields.length === 0) {
+            return undefined;
+        }
+        const groupDefaults = {};
+        for (const childField of fields) {
+            const childValueHandling = getFieldValueHandling(childField.type, registry);
+            if (childValueHandling === 'exclude')
+                continue;
+            const childValue = getFieldDefaultValue(childField, registry);
+            if (childValueHandling === 'flatten') {
+                                                if (childValue && typeof childValue === 'object' && !Array.isArray(childValue)) {
+                    Object.assign(groupDefaults, childValue);
+                }
+            }
+            else if ('key' in childField && childField.key) {
+                if (childValue !== undefined) {
+                    groupDefaults[childField.key] = childValue;
+                }
+            }
+        }
+        return groupDefaults;
+    }
+            const valueField = field;
+    const isNullable = valueField.nullable === true;
+        if ('value' in field) {
+        if (valueField.value !== null && valueField.value !== undefined) {
+            return valueField.value;
+        }
+                if (valueField.value === null && isNullable) {
+            return null;
+        }
+            }
+        if (isNullable) {
+        return null;
+    }
+        if (field.type === 'checkbox') {
+        return false;
+    }
+    if (field.type === 'array') {
+                                const arrayField = field;
+        const itemDefinitions = arrayField.fields;
+        if (!itemDefinitions || itemDefinitions.length === 0) {
+            return [];
+        }
+                return itemDefinitions.map((itemDef) => {
+                                    if (!Array.isArray(itemDef)) {
+                return getFieldDefaultValue(itemDef, registry);
+            }
+                        const itemFields = itemDef;
+            let itemValue = {};
+            for (const templateField of itemFields) {
+                const fieldValue = getFieldDefaultValue(templateField, registry);
+                const fieldValueHandling = getFieldValueHandling(templateField.type, registry);
+                if (templateField.type === 'group' && 'key' in templateField && templateField.key) {
+                                        itemValue[templateField.key] = fieldValue;
+                }
+                else if (templateField.type === 'row' || templateField.type === 'container') {
+                                        if (fieldValue && typeof fieldValue === 'object') {
+                        itemValue = { ...itemValue, ...fieldValue };
+                    }
+                }
+                else if (fieldValueHandling === 'include' && 'key' in templateField && templateField.key) {
+                    itemValue[templateField.key] = fieldValue;
+                }
+            }
+            return itemValue;
+        });
+    }
+                        if (field.type === 'input' && 'props' in field) {
+        const props = field.props;
+        if (props?.type === 'number') {
+            return NaN;
+        }
+    }
+    return '';
+}
+
 function createContainerFieldProcessors() {
     const flattenCache = new WeakMap();
     const memoizedFlattenFields = (fields, registry) => {
@@ -2553,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';
@@ -2653,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) {
@@ -2669,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) {
@@ -2685,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) {
@@ -2717,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]
@@ -2937,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;
@@ -2954,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;
@@ -2990,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;
@@ -3303,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.');
         }
@@ -3366,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);
@@ -3508,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 || {};
@@ -3522,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;
@@ -3559,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 */ []));
@@ -3581,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();
@@ -3602,24 +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) {
-            const crossFieldCollection = collectCrossFieldEntries(setup.schemaFields);
-            return createSchemaFromFields(setup.schemaFields, setup.registry, {
-                crossFieldValidators: crossFieldCollection.validators,
-                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();
@@ -3650,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();
@@ -3666,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();
@@ -3683,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();
@@ -3817,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,
@@ -3880,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;
@@ -3931,17 +3333,24 @@ class FormStateManager {
                         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);
             }
         });
-        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);
-            }
-        });
+                        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
@@ -3985,48 +3394,457 @@ class FormStateManager {
                                         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));
+                        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.schemaCurrent, this.pageFields], ([schemaCurrent]) => {
+            const ownership = this.activePageOwnership();
+            if (!schemaCurrent || ownership.initialized)
+                return;
+            this.activePageOwnership.set({ ...ownership, initialized: true, index: this.resolveInitialLanding() });
+        });
+                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);
+                }
+            }
+        });
+    }
+        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);
+    }
+        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',
+            };
+        }
+                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.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 (options?.validate === false) {
+            return this.executePageChange(pageIndex);
+        }
+        const disableWhenPageInvalid = this.formOptions?.()?.nextButton?.disableWhenPageInvalid ?? true;
+        if (!disableWhenPageInvalid) {
+            return this.executePageChange(pageIndex);
+        }
+        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.executePageChange(firstInvalidPage);
+        return {
+            success: false,
+            newPageIndex: firstInvalidPage,
+            error: `Cannot navigate to page ${pageIndex}: page ${firstInvalidPage} has invalid fields`,
+        };
+    }
+        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) {
@@ -4105,14 +3923,14 @@ function createDerivationRenderGate() {
         if (!has || engine() !== 'idle')
             return;
         engine.set('loading');
-                pendingTasks.run(() => import('./ng-forge-dynamic-forms-bootstrap-derivation-orchestrator-CcoUnroD.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(() => {
@@ -4123,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-';
@@ -4155,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' }]
         }] });
@@ -4209,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: () => [] });
 
@@ -4265,6 +4145,7 @@ function coreProviders() {
             deps: [FormStateManager],
         },
                         FormIdPrefixService,
+                        FieldViewportObserver,
         {
             provide: FORM_ID_PREFIX,
             useFactory: (svc) => svc.prefix,
@@ -4304,6 +4185,7 @@ function provideDynamicFormDI() {
         ...asyncExpressionProviders(),
         ...propertyDerivationProviders(),
         ...derivationProviders(),
+        { provide: WEB_MCP_GATE, useFactory: createWebMcpGate },
     ];
 }
 
@@ -4318,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
         }] });
 
@@ -4329,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]',
@@ -4346,10 +4228,10 @@ 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
         }] });
 
@@ -4368,6 +4250,7 @@ class DynamicForm {
     logger = inject(DynamicFormLogger);
     dispatcher = inject(EventDispatcher, { optional: true });
     templateRegistry = inject(DfFieldTemplateRegistry);
+    globalFieldWindowing = inject(FIELD_WINDOWING);
                     _projectedTemplates = contentChildren(DfTemplate, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_projectedTemplates" }] : /* istanbul ignore next */ []));
     stateManager = this.connectDeps();
@@ -4392,20 +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;
-                    totalComponentsCount = computed(() => {
-        const fields = this.stateManager.formSetup()?.fields ?? [];
-        return countContainersRecursive(fields) + 1;
+        fieldWindowing = computed(() => resolveFieldWindowing(this.globalFieldWindowing, this.effectiveFormOptions()?.fieldWindowing), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldWindowing" }] : /* istanbul ignore next */ []));
+                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$);
@@ -4413,18 +4307,46 @@ 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();
     }
         onNativeSubmit(event) {
         event.preventDefault();
         this.eventBus.dispatch(FormSubmitEvent);
+    }
+        windowsField(field, index) {
+        const w = this.fieldWindowing();
+        return w.enabled && index >= w.eager && !isContainerField(field.fieldDef);
+    }
+        placeholderGridClass(field) {
+        const grid = getGridClassString(field.fieldDef);
+        return grid ? `df-field-placeholder ${grid}` : 'df-field-placeholder';
     }
                 setupEffects() {
                 explicitEffect([this.formModeDetection, this.pageFieldDefinitions], ([{ mode }, pages]) => {
@@ -4432,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 });
@@ -4468,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 },
@@ -4480,12 +4402,23 @@ class DynamicForm {
           <div page-orchestrator [pageFields]="pageFieldDefinitions()" [form]="form()" [fieldSignalContext]="fieldSignalContext()"></div>
         }
         @case ('non-paged') {
-          @for (field of resolvedFields(); track field.key) {
-            <!-- @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()) {
+          @for (field of resolvedFields(); track field.key; let i = $index) {
+            @if (windowsField(field, i)) {
+              @if (!field.hidden()) {
+                @defer (on viewport) {
+                  <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+                } @placeholder {
+                  <div
+                    [class]="placeholderGridClass(field)"
+                    [style.min-height]="fieldWindowing().placeholderHeight"
+                    [attr.data-field-key]="field.key"
+                    aria-hidden="true"
+                  ></div>
+                }
+              }
+            } @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" />
             }
           }
@@ -4495,9 +4428,9 @@ 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}\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 });
+  `, 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()) {
@@ -4506,12 +4439,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
           <div page-orchestrator [pageFields]="pageFieldDefinitions()" [form]="form()" [fieldSignalContext]="fieldSignalContext()"></div>
         }
         @case ('non-paged') {
-          @for (field of resolvedFields(); track field.key) {
-            <!-- @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()) {
+          @for (field of resolvedFields(); track field.key; let i = $index) {
+            @if (windowsField(field, i)) {
+              @if (!field.hidden()) {
+                @defer (on viewport) {
+                  <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+                } @placeholder {
+                  <div
+                    [class]="placeholderGridClass(field)"
+                    [style.min-height]="fieldWindowing().placeholderHeight"
+                    [attr.data-field-key]="field.key"
+                    aria-hidden="true"
+                  ></div>
+                }
+              }
+            } @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" />
             }
           }
@@ -4533,30 +4477,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         '[attr.data-form-mode]': 'formModeDetection().mode',
                         '[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}\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;
-}
+                    }, 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"] }], activePageInitialized: [{ type: i0.Output, args: ["activePageInitialized"] }], onPageChange: [{ type: i0.Output, args: ["onPageChange"] }], onPageNavigationStateChange: [{ type: i0.Output, args: ["onPageNavigationStateChange"] }] } });
 
 const BUILT_IN_ADDON_TYPES = [
     {
@@ -4604,35 +4526,35 @@ const DISPLAY_FIELD_TYPES_BASE = {
 const BUILT_IN_FIELDS = [
     {
         name: 'row',
-                                loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-DZfVWjiM.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-CPFgu3pM.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-CvjDqYyq.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-amWhCdHL.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,
@@ -4643,7 +4565,7 @@ const BUILT_IN_FIELDS = [
     },
     {
         name: 'container',
-        loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-DZfVWjiM.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-Dc3ROhHL.mjs'),
         mapper: containerFieldMapper,
         valueHandling: 'flatten',
         ...CONTAINER_FIELD_TYPES_BASE,
@@ -4652,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,
     },
 ];
 
@@ -4717,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) => {
@@ -4732,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);
@@ -4758,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;
             },
@@ -4793,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);
@@ -4841,6 +4776,32 @@ function withValueExclusionDefaults(config) {
     return createFeature('value-exclusion', [{ provide: VALUE_EXCLUSION_DEFAULTS, useValue: resolved }]);
 }
 
+function withPagePreload(window) {
+    const resolved = clampWindowSize(window, 1);
+    return createFeature('page-preload', [{ provide: PAGE_PRELOAD_WINDOW, useValue: resolved }]);
+}
+
+function withFieldWindowing(config) {
+    const resolved = {
+        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,
@@ -4861,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',
@@ -4904,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',
@@ -4959,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',
@@ -5031,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),
@@ -5046,5 +5129,5 @@ function arrayEvent(arrayKey) {
 
 
 
-export { withValueExclusionDefaults as $, ArrayItemRegistryService as A, BUILT_IN_FIELDS as B, CONTAINER_FIELD_PROCESSORS as C, DfFieldOutlet as D, EventDispatcher as E, FormStateManager as F, PrependArrayItemEvent as G, PreviousPageEvent as H, InsertArrayItemEvent as I, TextAddonComponent as J, arrayEvent as K, createWrappers as L, MoveArrayItemEvent as M, NextPageEvent as N, isWrappersBundle as O, PROPERTY_OVERRIDE_STORE as P, provideDynamicForm as Q, RemoveAtIndexEvent as R, ShiftArrayItemEvent as S, TemplateAddonComponent as T, sanitizeFormConfig as U, withAddonActions as V, withCustomAddon as W, withEventFormValue as X, withLegacyStatusClasses as Y, withLoggerConfig as Z, withValidationExecutionDefaults as _, isSameWrapperChain as a, wrapperProps as a0, createWrapperChainController as b, createFieldResolutionPipe as c, createSchemaFromFields as d, createHiddenSignal as e, createRenderReadySignal as f, getNormalizedArrayMetadata as g, getFieldDefaultValue as h, injectFieldRegistry as i, DEV_MODE as j, DEFAULT_DEBOUNCE_MS as k, DERIVATION_WARNING_TRACKER as l, mapFieldToInputs as m, DERIVATION_LOG_CONFIG as n, AppendArrayItemEvent as o, ComponentAddonComponent as p, ConsoleLogger as q, resolveWrappers as r, DfTemplate as s, traverseFieldsWithContext as t, DynamicForm as u, FormClearEvent as v, FormResetEvent as w, FormSubmitEvent as x, PageChangeEvent as y, PopArrayItemEvent as z };
-//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-Du3V5AOb.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