@ng-forge/dynamic-forms 0.6.1 → 0.8.0-next.1

package/fesm2022/{ng-forge-dynamic-forms-ng-forge-dynamic-forms-DXXp5M0q.mjs → ng-forge-dynamic-forms-ng-forge-dynamic-forms-D276M2vh.mjs}

@@ -1,128 +1,58 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, isSignal, untracked, isDevMode, isWritableSignal, Injector, DestroyRef, computed, input, linkedSignal, ChangeDetectionStrategy, Component, signal, runInInjectionContext, afterNextRender, model, makeEnvironmentProviders, Pipe } from '@angular/core';
-import { NgComponentOutlet } from '@angular/common';
-import { toObservable, toSignal, takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
-import { submit, email, min, max, minLength, maxLength, pattern, required, validate, validateAsync, validateHttp, disabled, readonly, hidden, applyEach, applyWhenValue, applyWhen, apply, schema, validateStandardSchema, validateTree, form, provideSignalFormsConfig } from '@angular/forms/signals';
-import { isObservable, firstValueFrom, exhaustMap, EMPTY, from, catchError, Subject, filter, TimeoutError, of, throwError, debounceTime, distinctUntilChanged, tap, take as take$1, startWith, pairwise, map as map$1, switchMap as switchMap$1, Observable, takeUntil, combineLatestWith, auditTime, scheduled, queueScheduler, merge, timer, concat, defer, combineLatest, pipe, forkJoin, scan as scan$1, concatMap } from 'rxjs';
-import { scan, map, filter as filter$1, take, switchMap, timeout, catchError as catchError$1, shareReplay } from 'rxjs/operators';
+import { InjectionToken, reflectComponentType, Injector, inject, EnvironmentInjector, DestroyRef, computed, input, ViewContainerRef, signal, Directive, Injectable, isSignal, untracked, isWritableSignal, isDevMode, linkedSignal, ChangeDetectionStrategy, Component, resourceFromSnapshots, runInInjectionContext, afterNextRender, model, makeEnvironmentProviders, Pipe, viewChild, TemplateRef } from '@angular/core';
 import { explicitEffect } from 'ngxtension/explicit-effect';
+import { of, forkJoin, from, catchError, map, switchMap, isObservable, firstValueFrom, exhaustMap, EMPTY, Subject, filter, TimeoutError, throwError, debounceTime, distinctUntilChanged, tap, take as take$1, startWith, pairwise, Observable, takeUntil, combineLatestWith, auditTime, scheduled, queueScheduler, merge, timer, defer, combineLatest, pipe, scan as scan$1, concatMap } from 'rxjs';
+import { takeUntilDestroyed, toObservable, toSignal, rxResource, outputFromObservable } from '@angular/core/rxjs-interop';
+import { submit, email, min, max, minLength, maxLength, pattern, required, validate, validateAsync, validateHttp, disabled, readonly, hidden, applyEach, applyWhenValue, applyWhen, apply, schema, validateStandardSchema, validateTree, form, provideSignalFormsConfig } from '@angular/forms/signals';
+import { scan, map as map$1, filter as filter$1, take, switchMap as switchMap$1, timeout, catchError as catchError$1, shareReplay } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
 import { isStandardSchemaMarker } from '@ng-forge/dynamic-forms/schema';
 import { NG_STATUS_CLASSES } from '@angular/forms/signals/compat';
 
 /**
- * Wraps a submission action to handle both Promise and Observable returns.
- * Converts Observables to Promises for compatibility with Angular Signal Forms' submit().
- *
- * Errors are NOT caught here — they propagate so that submit() can reject its Promise,
- * allowing the caller's catchError to log and keep the submission stream alive.
+ * Type guard for WrapperTypeDefinition.
  *
- * @param action - The submission action function
- * @returns A wrapped function that returns a Promise
+ * Discriminates via `wrapperName` — field types use `name`, wrapper types use `wrapperName`.
  */
-function wrapSubmissionAction(action) {
-    return async (formTree) => {
-        const result = action(formTree);
-        // If the action returns an Observable, convert it to a Promise
-        if (isObservable(result)) {
-            await firstValueFrom(result);
-            return;
-        }
-        await Promise.resolve(result);
-    };
+function isWrapperTypeDefinition(value) {
+    return typeof value === 'object' && value !== null && 'wrapperName' in value;
 }
 /**
- * Creates an Observable that handles form submission with optional submission action.
- *
- * This utility encapsulates the submission handling logic:
- * - Listens for submit events from the event bus
- * - If a submission.action is configured, wraps it and uses Angular Signal Forms' submit()
- * - Handles both Promise and Observable returns from the action
- * - Uses exhaustMap to ignore new submissions while one is in-flight (first-submit-wins)
- *
- * The returned Observable should be subscribed to with takeUntilDestroyed() in the component.
+ * Injection token for the wrapper type registry.
  *
- * @param options - Configuration options for the submission handler
- * @returns Observable that processes submissions (emits when submission completes)
- *
- * @example
- * ```typescript
- * // In component constructor
- * createSubmissionHandler({
- *   eventBus: this.eventBus,
- *   configSignal: this.config,
- *   formSignal: this.form,
- * })
- *   .pipe(takeUntilDestroyed())
- *   .subscribe();
- * ```
+ * Provides access to the map of registered wrapper types. The registry is
+ * populated via `provideDynamicForm()` and used by `ContainerFieldComponent` to
+ * resolve wrapper types to their component implementations.
  */
-function createSubmissionHandler(options) {
-    const { eventBus, configSignal, formSignal, validSignal, logger } = options;
-    // exhaustMap ensures first-submit-wins: a second submit event while the first
-    // is in-flight is silently dropped rather than cancelling the running Promise.
-    // switchMap would unsubscribe the Observable wrapper but cannot cancel the
-    // underlying Promise, causing both side effects to execute.
-    return eventBus.on('submit').pipe(exhaustMap(() => {
-        const submissionConfig = configSignal().submission;
-        // If no submission action is configured, let the submitted output handle it
-        // This maintains backward compatibility for users handling submission manually
-        if (!submissionConfig?.action) {
-            return EMPTY;
-        }
-        // Guard: match the (submitted) output's safety contract — reject submission
-        // when the form is invalid or has pending async validators.
-        if (!validSignal()) {
-            logger.debug('Submission action skipped: form is not valid (invalid or pending async validators)');
-            return EMPTY;
-        }
-        // Type assertion needed: submission.action accepts the form tree but its signature
-        // is defined broadly in FormConfig. The actual runtime type is FieldTree<TModel>.
-        const wrappedAction = wrapSubmissionAction(submissionConfig.action);
-        // Use Angular Signal Forms' native submit() function
-        // This automatically:
-        // - Sets form.submitting() to true during execution
-        // - Applies server errors to form fields on completion
-        // - Sets form.submitting() to false when done
-        // catchError keeps the exhaustMap stream alive after action failure —
-        // without it, an unhandled error would terminate all future submissions.
-        return from(submit(formSignal(), wrappedAction)).pipe(catchError((error) => {
-            logger.error('Submission action failed:', error);
-            return EMPTY;
-        }));
-    }));
-}
-
+const WRAPPER_REGISTRY = new InjectionToken('WRAPPER_REGISTRY', {
+    providedIn: 'root',
+    factory: () => new Map(),
+});
 /**
- * Injection token for globally enabling form value emission on events.
+ * Component cache for loaded wrapper components.
  *
- * When set to `true`, all events dispatched through the EventBus will include
- * the current form value in the `formValue` property.
- *
- * This token is configured via `withEventFormValue()` feature function.
- * Per-form overrides can be set via `options.emitFormValueOnEvents` in the form config.
+ * Caches resolved wrapper component classes for instant re-resolution.
+ * SSR-safe because it's DI-scoped, not module-scoped.
  *
- * @internal
+ * NOTE: The cache grows across the application lifetime. It's bounded by the
+ * number of wrapper types registered (typically small), so this is not a leak;
+ * the COMPONENT_CACHE for field types has the same shape.
  */
-const EMIT_FORM_VALUE_ON_EVENTS = new InjectionToken('EMIT_FORM_VALUE_ON_EVENTS', {
+const WRAPPER_COMPONENT_CACHE = new InjectionToken('WRAPPER_COMPONENT_CACHE', {
     providedIn: 'root',
-    factory: () => false,
+    factory: () => new Map(),
 });
-
 /**
- * Registry service that provides access to the root form and its values.
- *
- * Constructed via factory in `provideDynamicFormDI` with signals from
- * `FormStateManager` — no DI injection, no Maps, no lifecycle.
+ * Pre-computed reverse index: `fieldType → WrapperConfig[]` for every
+ * registered `WrapperTypeDefinition.types` entry. Built once in the
+ * `provideDynamicForm(...)` factory so `resolveWrappers` can look up
+ * auto-associations in O(1) per field instead of scanning the full
+ * wrapper registry on every render.
  */
-class RootFormRegistryService {
-    formValue;
-    rootForm;
-    constructor(formValue, rootForm) {
-        this.formValue = formValue;
-        this.rootForm = rootForm;
-    }
-}
+const WRAPPER_AUTO_ASSOCIATIONS = new InjectionToken('WRAPPER_AUTO_ASSOCIATIONS', {
+    providedIn: 'root',
+    factory: () => new Map(),
+});
 
 /**
  * Base error class for all Dynamic Forms errors.
@@ -139,6 +69,18 @@ class DynamicFormError extends Error {
     }
 }
 
+/**
+ * Injection token for form-level default wrappers.
+ *
+ * Provides a Signal of the `defaultWrappers` array from FormConfig. Consumed by
+ * `DfFieldOutlet` / `ContainerFieldComponent` to merge into each field's
+ * effective wrapper chain (lowest priority after auto-associations, higher
+ * than field-level `wrappers`).
+ *
+ * Provided once at the DynamicForm level and inherited via Angular's
+ * hierarchical injector.
+ */
+const DEFAULT_WRAPPERS = new InjectionToken('DEFAULT_WRAPPERS');
 /**
  * Injection token for providing field signal context to mappers and components.
  *
@@ -345,6 +287,201 @@ function createArrayItemIdGenerator() {
     return () => `item-${counter++}`;
 }
 
+/**
+ * Module-level cache keyed by component class. `reflectComponentType` returns
+ * immutable metadata per class, so we probe it once and reuse the resulting
+ * `Set<templateName>` for every `setInputIfDeclared` call afterwards.
+ *
+ * We cache `templateName` (the public input name, aka alias) rather than
+ * `propName` (the class field name) because `ComponentRef.setInput()` keys by
+ * the public name — that's also the name wrapper configs use. An aliased
+ * input declared as `input(..., { alias: 'header' })` with class field
+ * `headerText` must be addressed as `'header'`; caching `propName` would
+ * leave the alias out of the declared set and silently drop config values.
+ *
+ * SSR-safe: the WeakMap is keyed by the component class object — classes are
+ * created per Angular application bootstrap and GC'd with it, so this does not
+ * leak state between server renders.
+ */
+const inputNamesCache = new WeakMap();
+function getDeclaredInputs(componentType) {
+    let inputs = inputNamesCache.get(componentType);
+    if (!inputs) {
+        const meta = reflectComponentType(componentType);
+        inputs = new Set(meta?.inputs.map((i) => i.templateName) ?? []);
+        inputNamesCache.set(componentType, inputs);
+    }
+    return inputs;
+}
+/**
+ * Set an input on a ComponentRef only when the target component actually declares it.
+ *
+ * Angular's `ComponentRef.setInput()` throws NG0303 when the input is missing.
+ * For config keys driven by user data (e.g. a wrapper config containing a prop
+ * the wrapper doesn't care about) that would surface as a noisy runtime error.
+ * We probe the component's metadata via `reflectComponentType` (public API),
+ * cached per component class — called once per input key per emission, so
+ * avoiding the reflection scan on each call is meaningful under heavy typing.
+ */
+function setInputIfDeclared(ref, inputName, value) {
+    const declared = getDeclaredInputs(ref.componentType);
+    if (declared.has(inputName)) {
+        ref.setInput(inputName, value);
+    }
+}
+/**
+ * Narrows an ES-module-with-default-export from a bare component class.
+ * Lazy component loaders may return either shape depending on how the user
+ * wrote the import expression (`import('./x')` vs `import('./x').then(m => m.Foo)`).
+ */
+function hasDefaultExport(value) {
+    return typeof value === 'object' && value !== null && 'default' in value && !!value.default;
+}
+/**
+ * Pick the component class out of whatever a lazy loader returned.
+ */
+function resolveDefaultExport(result) {
+    return hasDefaultExport(result) ? result.default : result;
+}
+/**
+ * Resolve a wrapper type name to its component class, with DI-scoped caching.
+ */
+async function loadWrapperComponent(type, registry, cache) {
+    const cached = cache.get(type);
+    if (cached)
+        return cached;
+    const definition = registry.get(type);
+    if (!definition)
+        return undefined;
+    const component = resolveDefaultExport(await definition.loadComponent());
+    if (component)
+        cache.set(type, component);
+    return component;
+}
+/**
+ * Load every wrapper for a chain, all-or-nothing. A single failed load
+ * aborts the whole chain (emits `[]`) so the field renders bare rather
+ * than in a partially-wrapped, visually-misleading state. Each failure
+ * is logged; field-type resolution still throws — this isn't silent.
+ */
+function loadWrapperComponents(configs, registry, cache, logger) {
+    if (configs.length === 0)
+        return of([]);
+    return forkJoin(configs.map((config) => from(loadWrapperComponent(config.type, registry, cache)).pipe(catchError(() => of(undefined)), map((component) => {
+        if (!component) {
+            logger.error(`Wrapper type '${config.type}' could not be loaded. Ensure it is registered via provideDynamicForm().`);
+            return null;
+        }
+        return { config, component };
+    })))).pipe(map((results) => (results.some((r) => r === null) ? [] : results)));
+}
+/**
+ * Recursively create each wrapper component, threading the next one (or the
+ * innermost content) into its `#fieldComponent` slot.
+ *
+ * Each wrapper receives:
+ * - Each of its config properties (minus `type`) as an individual Angular input
+ * - `fieldInputs` as a single input, if provided
+ *
+ * Returns the list of wrapper `ComponentRef`s — callers retain them for later
+ * cleanup and for re-setting `fieldInputs` when the mapper signal emits.
+ */
+function renderWrapperChain(options) {
+    const refs = [];
+    renderStep(options.outerContainer, options.loadedWrappers, options, refs);
+    return refs;
+}
+function renderStep(slot, remaining, options, refs) {
+    if (remaining.length === 0) {
+        options.renderInnermost(slot);
+        return;
+    }
+    const [wrapper, ...rest] = remaining;
+    // `slot.injector` is the element injector seen from inside the current slot —
+    // for nested slots that includes the outer wrapper's component, enabling
+    // `inject(OuterWrapper)`. When a field injector is provided we merge it in
+    // front so tokens like `ARRAY_CONTEXT` also resolve.
+    const wrapperInjector = options.fieldInjector ? createWrapperAwareInjector(options.fieldInjector, slot.injector) : slot.injector;
+    const ref = slot.createComponent(wrapper.component, {
+        environmentInjector: options.environmentInjector,
+        injector: wrapperInjector,
+    });
+    refs.push(ref);
+    for (const [key, value] of Object.entries(wrapper.config)) {
+        // `type` is the registry discriminant; `fieldInputs` is set explicitly
+        // below. Don't let a stray config key override either.
+        if (key === 'type' || key === 'fieldInputs')
+            continue;
+        setInputIfDeclared(ref, key, value);
+    }
+    if (options.fieldInputs !== undefined) {
+        setInputIfDeclared(ref, 'fieldInputs', options.fieldInputs);
+    }
+    // Required to resolve `viewChild.required('fieldComponent')` before we
+    // recurse into the slot. O(chain length) CD passes per rebuild — acceptable
+    // for typical chains (≤3); refactor to a template-based render if it bites.
+    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).`);
+        // Unwind: destroy every wrapper built so far, including this one, so the
+        // caller doesn't end up with a partial chain left in the DOM.
+        while (refs.length)
+            refs.pop().destroy();
+        return;
+    }
+    renderStep(inner, rest, options, refs);
+}
+/**
+ * Read a wrapper's `#fieldComponent` ViewContainerRef. `viewChild.required`
+ * throws when the query can't resolve (missing template ref, or ref sitting
+ * inside `@if` / `@defer` / `@for`); any throw from this pure signal read
+ * means the slot is unusable, so we return undefined and let the caller log
+ * the actionable "wrapper missing fieldComponent" message.
+ */
+function resolveInnerSlot(ref) {
+    const contract = ref.instance;
+    try {
+        return contract.fieldComponent?.();
+    }
+    catch {
+        return undefined;
+    }
+}
+/**
+ * Merged injector: check the field-level injector first (for tokens like
+ * `ARRAY_CONTEXT` / `FIELD_SIGNAL_CONTEXT`), fall back to the element-chain
+ * injector (so nested wrappers can still `inject(OuterWrapper)`).
+ *
+ * Precedence: a field-level token shadows a same-named token provided by an
+ * outer wrapper. That matches "more specific context wins" but is worth
+ * keeping in mind if a wrapper exports service tokens.
+ */
+function createWrapperAwareInjector(fieldInjector, elementInjector) {
+    if (fieldInjector === elementInjector)
+        return fieldInjector;
+    return new WrapperAwareInjector(fieldInjector, elementInjector);
+}
+/** Sentinel — distinguishes "token not found" from a legitimate `undefined` provider value. */
+const WRAPPER_NOT_FOUND = {};
+class WrapperAwareInjector extends Injector {
+    fieldInjector;
+    elementInjector;
+    constructor(fieldInjector, elementInjector) {
+        super();
+        this.fieldInjector = fieldInjector;
+        this.elementInjector = elementInjector;
+    }
+    get(token, notFoundValue, options) {
+        const field = this.fieldInjector.get(token, WRAPPER_NOT_FOUND, options);
+        if (field !== WRAPPER_NOT_FOUND)
+            return field;
+        return this.elementInjector.get(token, notFoundValue, options);
+    }
+}
+
 /**
  * Injection token for the dynamic forms logger.
  *
@@ -353,6 +490,567 @@ function createArrayItemIdGenerator() {
  */
 const DynamicFormLogger = new InjectionToken('DynamicFormLogger');
 
+/**
+ * Shared empty chain — returned when no wrappers apply so callers get a
+ * stable reference. Freezing makes accidental mutation observable.
+ */
+const EMPTY_WRAPPERS = Object.freeze([]);
+/**
+ * Element-wise identity (`===`) comparator for wrapper chains. Used as the
+ * `equal` option on signal memoisation so reconciled `FieldDef`s with the
+ * same chain don't churn downstream — relies on `WrapperConfig` objects
+ * being stable across ticks, which holds for configs declared in
+ * `FormConfig` / `createWrappers(...)`.
+ */
+function isSameWrapperChain(a, b) {
+    if (a === b)
+        return true;
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
+}
+/**
+ * Resolves the wrapper chain for a field.
+ *
+ * Merge order (outermost → innermost): auto-associations, form defaults,
+ * field-level wrappers. `wrappers: null` skips all three; `skipAutoWrappers` /
+ * `skipDefaultWrappers` on the field opt out of individual layers. Fresh
+ * array per call — downstream memoisation is on the consuming computed.
+ */
+function resolveWrappers(field, defaultWrappers, autoAssociations) {
+    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;
+    }
+    return [...autoWrappers, ...defaults, ...fieldLevel];
+}
+
+/**
+ * Owns the wrapper-chain lifecycle for a field or container: async component
+ * loading, switchMap-based cancellation of stale loads, flicker-tolerant
+ * rebuilds (only structural changes tear down), and `fieldInputs` push-through.
+ * Must be called from a DI injection context.
+ */
+function createWrapperChainController(opts) {
+    const deps = injectChainDeps();
+    const state = createStateSignal(opts);
+    const mounted = { value: null };
+    let refs = [];
+    buildEmissionStream(state, deps)
+        .pipe(takeUntilDestroyed(deps.destroyRef))
+        .subscribe((emission) => {
+        // Wrap the whole render path — a throw here (bad wrapper template,
+        // caller's renderInnermost blew up, etc.) would otherwise terminate
+        // the subscription and silently freeze subsequent chain updates.
+        try {
+            refs = applyEmission(emission, { opts, deps, mounted, refs });
+        }
+        catch (err) {
+            deps.logger.error('Wrapper chain render failed; tearing down partial state.', err);
+            opts.vcr().clear();
+            refs = [];
+            mounted.value = null;
+        }
+    });
+    pushFieldInputsOnChange(opts, () => refs);
+    deps.destroyRef.onDestroy(() => opts.vcr().clear());
+}
+function injectChainDeps() {
+    return {
+        registry: inject(WRAPPER_REGISTRY),
+        cache: inject(WRAPPER_COMPONENT_CACHE),
+        logger: inject(DynamicFormLogger),
+        destroyRef: inject(DestroyRef),
+        environmentInjector: inject(EnvironmentInjector),
+    };
+}
+function createStateSignal(opts) {
+    return computed(() => ({
+        open: opts.gate?.() ?? true,
+        wrappers: opts.wrappers(),
+        rebuildKey: opts.rebuildKey?.(),
+    }), { equal: (a, b) => a.open === b.open && a.rebuildKey === b.rebuildKey && isSameWrapperChain(a.wrappers, b.wrappers) });
+}
+/**
+ * Resolve a `ChainState` into a `ChainEmission`. `switchMap` cancellation
+ * guarantees in-flight async loads are discarded when a newer state arrives.
+ */
+function buildEmissionStream(state, deps) {
+    return toObservable(state).pipe(switchMap((s) => resolveLoadedWrappers(s, deps)));
+}
+function resolveLoadedWrappers(state, deps) {
+    if (!state.open) {
+        return of({ state, loaded: null });
+    }
+    if (state.wrappers.every((w) => deps.cache.has(w.type))) {
+        // Sync fast-path — the cache only holds SUCCESSFUL loads, so "every cached"
+        // means every wrapper was previously resolved cleanly. No need to re-log.
+        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 })));
+}
+/**
+ * Diff what's mounted against the next state and act:
+ *   - Gate-only flicker → no-op (preserve the mounted chain)
+ *   - Structural change → beforeRebuild → vcr.clear → render fresh
+ *   - Idempotent re-emission → no-op
+ *
+ * Returns the (possibly new) wrapper refs so the caller can track them for
+ * `fieldInputs` push-through.
+ */
+function applyEmission({ state, loaded }, ctx) {
+    const { opts, deps, mounted, refs } = ctx;
+    const vcr = opts.vcr();
+    const structurallyChanged = isStructurallyDifferent(mounted.value, state);
+    // Gate-only flicker after first mount — keep the chain alive so the user's
+    // focus / caret / scroll survive. The caller's rawInputs effect continues
+    // to push live mapper outputs through the still-mounted innermost.
+    if (!structurallyChanged && !state.open)
+        return refs;
+    // Real structural change — tear down. Angular cascades destroy through
+    // every nested ComponentRef, so walking `refs` manually is redundant.
+    // `beforeRebuild` gives the caller a chance to detach views it wants to
+    // preserve (e.g. the innermost field when only wrappers changed).
+    if (structurallyChanged && mounted.value !== null) {
+        opts.beforeRebuild?.();
+        vcr.clear();
+        mounted.value = null;
+    }
+    if (!state.open || loaded === null)
+        return [];
+    // Same structure + already mounted — idempotent re-emission, nothing to do.
+    if (mounted.value !== null)
+        return refs;
+    const newRefs = renderWrapperChain({
+        outerContainer: vcr,
+        loadedWrappers: loaded,
+        environmentInjector: deps.environmentInjector,
+        logger: deps.logger,
+        fieldInputs: opts.fieldInputs?.(),
+        fieldInjector: opts.fieldInjector?.(),
+        renderInnermost: opts.renderInnermost,
+    });
+    mounted.value = { wrappers: state.wrappers, rebuildKey: state.rebuildKey };
+    return newRefs;
+}
+function isStructurallyDifferent(mounted, next) {
+    if (mounted === null)
+        return true;
+    if (mounted.rebuildKey !== next.rebuildKey)
+        return true;
+    return !isSameWrapperChain(mounted.wrappers, next.wrappers);
+}
+/**
+ * Push the latest `fieldInputs` bag to every mounted wrapper whenever it
+ * changes — without rebuilding the chain. No-op when the chain is empty
+ * (gated off, or nothing rendered yet).
+ */
+function pushFieldInputsOnChange(opts, getRefs) {
+    if (!opts.fieldInputs)
+        return;
+    explicitEffect([opts.fieldInputs], ([fi]) => {
+        for (const ref of getRefs())
+            setInputIfDeclared(ref, 'fieldInputs', fi);
+    });
+}
+
+/**
+ * Get the length of an array FieldTree.
+ */
+function getArrayLength(arrayFieldTree) {
+    const value = arrayFieldTree().value();
+    return Array.isArray(value) ? value.length : 0;
+}
+/**
+ * Build a `ReadonlyFieldTree` by extracting the whitelisted read signals from a
+ * Signal Forms `FieldTree`. Returns a fresh plain object — no casting, no proxying,
+ * so consumers only see the narrow surface and Angular's `WritableSignal` capability
+ * on `value` is hidden.
+ */
+function toReadonlyFieldTree(field) {
+    const state = field();
+    return {
+        value: state.value,
+        valid: state.valid,
+        invalid: state.invalid,
+        touched: state.touched,
+        dirty: state.dirty,
+        required: state.required,
+        disabled: state.disabled,
+        hidden: state.hidden,
+        errors: state.errors,
+    };
+}
+/**
+ * DI-scoped cache for `ReadonlyFieldTree` views, keyed on the source FieldTree
+ * identity. A fresh WeakMap per root injector keeps renders isolated under SSR —
+ * Angular creates a new root injector per request, so there's no shared state
+ * between server renders (same pattern as `COMPONENT_CACHE`).
+ *
+ * @internal
+ */
+const READONLY_FIELD_TREE_CACHE = new InjectionToken('READONLY_FIELD_TREE_CACHE', {
+    providedIn: 'root',
+    factory: () => new WeakMap(),
+});
+/**
+ * Cached variant of {@link toReadonlyFieldTree}. Each FieldTree instance is a
+ * stable reference for the lifetime of its form, so one `ReadonlyFieldTree`
+ * view per tree is enough. Callers on hot paths (`pushInputs` on every mapper
+ * emission) avoid re-allocating the nine-property view object.
+ *
+ * @internal
+ */
+function toReadonlyFieldTreeCached(cache, field) {
+    const key = field;
+    const cached = cache.get(key);
+    if (cached)
+        return cached;
+    const view = toReadonlyFieldTree(field);
+    cache.set(key, view);
+    return view;
+}
+
+/**
+ * Structural directive that renders a `ResolvedField` with its effective
+ * wrapper chain.
+ *
+ * Replaces `*ngComponentOutlet` in field-rendering templates. When the field
+ * has no wrappers, the component is created directly at the outlet position
+ * (no extra DOM nesting). When wrappers apply, they chain outermost-first and
+ * the field renders in the innermost slot.
+ *
+ * Effective wrappers are merged from (outermost → innermost):
+ * 1. `WrapperTypeDefinition.types` auto-associations for the field's `type`
+ * 2. `FormConfig.defaultWrappers`
+ * 3. Field-level `FieldDef.wrappers` (`null` = explicit opt-out; `[]` does not
+ *    opt out — auto + defaults still apply)
+ *
+ * Wrapper config keys (minus `type`) are pushed as individual Angular inputs;
+ * every wrapper also receives `fieldInputs` — a `WrapperFieldInputs` bag that
+ * includes the field's mapper outputs and a `ReadonlyFieldTree` view of its
+ * form state.
+ *
+ * Rendering is gated by `field.renderReady()` — the directive waits until
+ * the mapper produces the required inputs before instantiating the component.
+ * Once rendered, a transient `renderReady → false` does *not* tear the chain
+ * down; the controller keeps the mounted components alive and ignores the
+ * flicker. Only a structural change (wrappers or component class) triggers
+ * a rebuild.
+ *
+ * @example
+ * ```html
+ * \@for (field of resolvedFields(); track field.key) {
+ *   <ng-container *dfFieldOutlet="field; environmentInjector: envInjector" />
+ * }
+ * ```
+ */
+class DfFieldOutlet {
+    // Named to match the structural directive microsyntax directly
+    // (`*dfFieldOutlet="field; environmentInjector: env"`) so no aliasing is needed.
+    dfFieldOutlet = input.required(...(ngDevMode ? [{ debugName: "dfFieldOutlet" }] : /* istanbul ignore next */ []));
+    dfFieldOutletEnvironmentInjector = input(undefined, ...(ngDevMode ? [{ debugName: "dfFieldOutletEnvironmentInjector" }] : /* istanbul ignore next */ []));
+    vcrRef = inject(ViewContainerRef);
+    vcr = signal(this.vcrRef).asReadonly();
+    destroyRef = inject(DestroyRef);
+    wrapperAutoAssociations = inject(WRAPPER_AUTO_ASSOCIATIONS);
+    defaultWrappersSignal = inject(DEFAULT_WRAPPERS, { optional: true });
+    readonlyFieldCache = inject(READONLY_FIELD_TREE_CACHE);
+    fieldRef;
+    /**
+     * VCR the `fieldRef`'s host view is currently inserted into (either the outer
+     * VCR when there are no wrappers, or the innermost wrapper's `#fieldComponent`
+     * slot). Tracked so `beforeRebuild` can detach the view before the outer VCR
+     * cascade-destroys it.
+     */
+    fieldSlot;
+    /** Focus + caret captured during detach, replayed after re-insert. */
+    focusSnapshot;
+    /**
+     * Last rawInputs reference pushed to the innermost field. Used to dedupe the
+     * rawInputs effect when the same snapshot was already applied as part of the
+     * initial render — keeps per-keystroke input updates O(changed-keys) instead
+     * of re-walking the whole input bag.
+     */
+    lastPushedInputs;
+    componentIdentity = computed(() => this.dfFieldOutlet().component, ...(ngDevMode ? [{ debugName: "componentIdentity" }] : /* istanbul ignore next */ []));
+    renderReady = computed(() => this.dfFieldOutlet().renderReady(), ...(ngDevMode ? [{ debugName: "renderReady" }] : /* istanbul ignore next */ []));
+    rawInputs = computed(() => this.dfFieldOutlet().inputs(), ...(ngDevMode ? [{ debugName: "rawInputs" }] : /* istanbul ignore next */ []));
+    /**
+     * Effective wrapper chain. Element-wise identity comparison keeps the signal
+     * stable across `ResolvedField` reference changes that don't actually change
+     * the chain — avoids rebuilds on reconciled fields.
+     */
+    wrappers = computed(() => resolveWrappers(this.dfFieldOutlet().fieldDef, this.defaultWrappersSignal?.(), this.wrapperAutoAssociations), { ...(ngDevMode ? { debugName: "wrappers" } : /* istanbul ignore next */ {}), equal: isSameWrapperChain });
+    /**
+     * `fieldInputs` bag handed to every wrapper in the chain. Memoised on
+     * `rawInputs` identity so repeated emissions with the same underlying object
+     * return the same view and don't cascade OnPush re-evaluations.
+     */
+    fieldInputs = computed(() => this.buildFieldInputs(this.rawInputs()), ...(ngDevMode ? [{ debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
+    defaultEnvInjector = inject(EnvironmentInjector);
+    /** Environment injector for the innermost field component — `[environmentInjector]` input takes precedence over the directive's own DI. */
+    fieldEnvInjector = computed(() => this.dfFieldOutletEnvironmentInjector() ?? this.defaultEnvInjector, ...(ngDevMode ? [{ debugName: "fieldEnvInjector" }] : /* istanbul ignore next */ []));
+    /** Field-level injector (FIELD_SIGNAL_CONTEXT, ARRAY_CONTEXT, …). Threaded to the controller so wrappers can inject it too. */
+    fieldInjector = computed(() => this.dfFieldOutlet().injector, ...(ngDevMode ? [{ debugName: "fieldInjector" }] : /* istanbul ignore next */ []));
+    constructor() {
+        createWrapperChainController({
+            vcr: this.vcr,
+            wrappers: this.wrappers,
+            gate: this.renderReady,
+            rebuildKey: this.componentIdentity,
+            fieldInputs: this.fieldInputs,
+            fieldInjector: this.fieldInjector,
+            beforeRebuild: () => this.detachFieldRef(),
+            renderInnermost: (slot) => {
+                const resolved = this.dfFieldOutlet();
+                if (this.fieldRef && this.fieldRef.componentType === resolved.component) {
+                    // Same component class — re-insert the preserved hostView. Browser
+                    // loses focus on detach, so we replay the snapshot captured in
+                    // detachFieldRef. Input value persists on the DOM node itself.
+                    slot.insert(this.fieldRef.hostView);
+                    this.fieldSlot = slot;
+                    this.pushRawInputs(this.fieldRef, this.rawInputs());
+                    this.restoreFocusSnapshot();
+                    return;
+                }
+                // Different component class — discard the old ref and create fresh.
+                // Merge field + element injectors so the field can inject ancestor
+                // wrappers AND form-context tokens (ARRAY_CONTEXT etc.).
+                // Clear state before createComponent — if it throws (bad provider,
+                // invalid class) we don't want to leak a reference to a destroyed ref
+                // that the same-component branch would later try to re-insert.
+                this.focusSnapshot = undefined;
+                this.lastPushedInputs = undefined;
+                const previousRef = this.fieldRef;
+                this.fieldRef = undefined;
+                this.fieldSlot = undefined;
+                previousRef?.destroy();
+                this.fieldRef = slot.createComponent(resolved.component, {
+                    environmentInjector: this.fieldEnvInjector(),
+                    injector: createWrapperAwareInjector(resolved.injector, slot.injector),
+                });
+                this.fieldSlot = slot;
+                this.pushRawInputs(this.fieldRef, this.rawInputs());
+            },
+        });
+        // Push rawInputs to the innermost field. Safe mid-rebuild — renderInnermost
+        // re-reads rawInputs synchronously on mount, so skipping here loses nothing.
+        explicitEffect([this.rawInputs], ([rawInputs]) => {
+            if (!this.fieldRef)
+                return;
+            if (this.lastPushedInputs === rawInputs)
+                return;
+            this.pushRawInputs(this.fieldRef, rawInputs);
+        });
+        this.destroyRef.onDestroy(() => {
+            // Only destroy when detached — vcr.clear() cascades otherwise.
+            if (this.fieldRef && !this.fieldSlot)
+                this.fieldRef.destroy();
+            this.fieldRef = undefined;
+            this.fieldSlot = undefined;
+            this.lastPushedInputs = undefined;
+        });
+    }
+    detachFieldRef() {
+        if (!this.fieldRef)
+            return;
+        if (!this.fieldSlot) {
+            // Stranded fieldRef — destroy to prevent a leak.
+            this.fieldRef.destroy();
+            this.fieldRef = undefined;
+            return;
+        }
+        this.captureFocusSnapshot();
+        const idx = this.fieldSlot.indexOf(this.fieldRef.hostView);
+        if (idx >= 0)
+            this.fieldSlot.detach(idx);
+        this.fieldSlot = undefined;
+    }
+    /** Capture active element + selection before the hostView is detached from DOM. */
+    captureFocusSnapshot() {
+        if (!this.fieldRef)
+            return;
+        const hostEl = this.fieldRef.location.nativeElement;
+        const active = document.activeElement;
+        if (!(active instanceof HTMLElement) || !hostEl.contains(active))
+            return;
+        const sel = active;
+        this.focusSnapshot = {
+            element: active,
+            selectionStart: typeof sel.selectionStart === 'number' ? sel.selectionStart : null,
+            selectionEnd: typeof sel.selectionEnd === 'number' ? sel.selectionEnd : null,
+        };
+    }
+    /** Re-apply the pre-detach focus + caret after the hostView is back in the DOM. */
+    restoreFocusSnapshot() {
+        const snap = this.focusSnapshot;
+        this.focusSnapshot = undefined;
+        if (!snap || !snap.element.isConnected)
+            return;
+        snap.element.focus();
+        if (snap.selectionStart !== null && snap.selectionEnd !== null && 'setSelectionRange' in snap.element) {
+            snap.element.setSelectionRange(snap.selectionStart, snap.selectionEnd);
+        }
+    }
+    pushRawInputs(ref, rawInputs) {
+        // Ref-identity dedupe per key — mappers must emit immutable snapshots.
+        const last = this.lastPushedInputs;
+        for (const [key, value] of Object.entries(rawInputs)) {
+            if (last && last[key] === value)
+                continue;
+            setInputIfDeclared(ref, key, value);
+        }
+        this.lastPushedInputs = rawInputs;
+    }
+    buildFieldInputs(rawInputs) {
+        const fieldTreeCandidate = rawInputs['field'];
+        // A FieldTree is a callable (() => FieldState). We expose it to wrappers via a narrow
+        // read-only view; raw FieldTree is still pushed to the innermost component for writes.
+        const readonlyField = fieldTreeCandidate && typeof fieldTreeCandidate === 'function'
+            ? toReadonlyFieldTreeCached(this.readonlyFieldCache, fieldTreeCandidate)
+            : undefined;
+        // Shallow spread — relies on the mapper contract (see WrapperFieldInputs)
+        // that rawInputs are emitted as fresh snapshots, not mutated in place.
+        return {
+            ...rawInputs,
+            field: readonlyField,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DfFieldOutlet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", 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: "21.2.8", 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 }] }] } });
+
+/**
+ * Wraps a submission action to handle both Promise and Observable returns.
+ * Converts Observables to Promises for compatibility with Angular Signal Forms' submit().
+ *
+ * Errors are NOT caught here — they propagate so that submit() can reject its Promise,
+ * allowing the caller's catchError to log and keep the submission stream alive.
+ *
+ * @param action - The submission action function
+ * @returns A wrapped function that returns a Promise
+ */
+function wrapSubmissionAction(action) {
+    return async (formTree) => {
+        const result = action(formTree);
+        // If the action returns an Observable, convert it to a Promise
+        if (isObservable(result)) {
+            await firstValueFrom(result);
+            return;
+        }
+        await Promise.resolve(result);
+    };
+}
+/**
+ * Creates an Observable that handles form submission with optional submission action.
+ *
+ * This utility encapsulates the submission handling logic:
+ * - Listens for submit events from the event bus
+ * - If a submission.action is configured, wraps it and uses Angular Signal Forms' submit()
+ * - Handles both Promise and Observable returns from the action
+ * - Uses exhaustMap to ignore new submissions while one is in-flight (first-submit-wins)
+ *
+ * The returned Observable should be subscribed to with takeUntilDestroyed() in the component.
+ *
+ * @param options - Configuration options for the submission handler
+ * @returns Observable that processes submissions (emits when submission completes)
+ *
+ * @example
+ * ```typescript
+ * // In component constructor
+ * createSubmissionHandler({
+ *   eventBus: this.eventBus,
+ *   configSignal: this.config,
+ *   formSignal: this.form,
+ * })
+ *   .pipe(takeUntilDestroyed())
+ *   .subscribe();
+ * ```
+ */
+function createSubmissionHandler(options) {
+    const { eventBus, configSignal, formSignal, validSignal, logger } = options;
+    // exhaustMap ensures first-submit-wins: a second submit event while the first
+    // is in-flight is silently dropped rather than cancelling the running Promise.
+    // switchMap would unsubscribe the Observable wrapper but cannot cancel the
+    // underlying Promise, causing both side effects to execute.
+    return eventBus.on('submit').pipe(exhaustMap(() => {
+        const submissionConfig = configSignal().submission;
+        // If no submission action is configured, let the submitted output handle it
+        // This maintains backward compatibility for users handling submission manually
+        if (!submissionConfig?.action) {
+            return EMPTY;
+        }
+        // Guard: match the (submitted) output's safety contract — reject submission
+        // when the form is invalid or has pending async validators.
+        if (!validSignal()) {
+            logger.debug('Submission action skipped: form is not valid (invalid or pending async validators)');
+            return EMPTY;
+        }
+        // Type assertion needed: submission.action accepts the form tree but its signature
+        // is defined broadly in FormConfig. The actual runtime type is FieldTree<TModel>.
+        const wrappedAction = wrapSubmissionAction(submissionConfig.action);
+        // Use Angular Signal Forms' native submit() function
+        // This automatically:
+        // - Sets form.submitting() to true during execution
+        // - Applies server errors to form fields on completion
+        // - Sets form.submitting() to false when done
+        // catchError keeps the exhaustMap stream alive after action failure —
+        // without it, an unhandled error would terminate all future submissions.
+        return from(submit(formSignal(), wrappedAction)).pipe(catchError((error) => {
+            logger.error('Submission action failed:', error);
+            return EMPTY;
+        }));
+    }));
+}
+
+/**
+ * Injection token for globally enabling form value emission on events.
+ *
+ * When set to `true`, all events dispatched through the EventBus will include
+ * the current form value in the `formValue` property.
+ *
+ * This token is configured via `withEventFormValue()` feature function.
+ * Per-form overrides can be set via `options.emitFormValueOnEvents` in the form config.
+ *
+ * @internal
+ */
+const EMIT_FORM_VALUE_ON_EVENTS = new InjectionToken('EMIT_FORM_VALUE_ON_EVENTS', {
+    providedIn: 'root',
+    factory: () => false,
+});
+
+/**
+ * Registry service that provides access to the root form and its values.
+ *
+ * Constructed via factory in `provideDynamicFormDI` with signals from
+ * `FormStateManager` — no DI injection, no Maps, no lifecycle.
+ */
+class RootFormRegistryService {
+    formValue;
+    rootForm;
+    constructor(formValue, rootForm) {
+        this.formValue = formValue;
+        this.rootForm = rootForm;
+    }
+}
+
 /**
  * No-operation logger implementation.
  * All methods are no-ops - used in production by default.
@@ -532,10 +1230,10 @@ class EventBus {
         }
         return this.pipeline$.pipe(filter((event) => event.type === eventType));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EventBus, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EventBus });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EventBus, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EventBus });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EventBus, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EventBus, decorators: [{
             type: Injectable
         }] });
 
@@ -588,7 +1286,7 @@ const INITIALIZATION_TIMEOUT_MS = new InjectionToken('INITIALIZATION_TIMEOUT_MS'
  * ```
  */
 function createInitializationTracker(eventBus, expectedCount) {
-    return eventBus.on('component-initialized').pipe(scan((count) => count + 1, 0), map((currentCount) => currentCount >= expectedCount), filter$1((isComplete) => isComplete));
+    return eventBus.on('component-initialized').pipe(scan((count) => count + 1, 0), map$1((currentCount) => currentCount >= expectedCount), filter$1((isComplete) => isComplete));
 }
 /**
  * Creates an observable that tracks component initialization progress with detailed status.
@@ -613,7 +1311,7 @@ function createInitializationTracker(eventBus, expectedCount) {
  * ```
  */
 function createDetailedInitializationTracker(eventBus, expectedCount) {
-    return eventBus.on('component-initialized').pipe(scan((count) => count + 1, 0), map((currentCount) => ({
+    return eventBus.on('component-initialized').pipe(scan((count) => count + 1, 0), map$1((currentCount) => ({
         currentCount,
         expectedCount,
         isComplete: currentCount >= expectedCount,
@@ -649,11 +1347,11 @@ function setupInitializationTracking(options) {
     const { eventBus, totalComponentsCount, injector, componentId } = options;
     const timeoutMs = injector.get(INITIALIZATION_TIMEOUT_MS);
     const logger = injector.get(DynamicFormLogger);
-    return toObservable(totalComponentsCount, { injector }).pipe(take(1), switchMap((count) => {
+    return toObservable(totalComponentsCount, { injector }).pipe(take(1), switchMap$1((count) => {
         let tracking$;
         if (count === 1) {
             // Only dynamic-form component, emit immediately when it initializes
-            tracking$ = eventBus.on('component-initialized').pipe(filter$1((event) => event.componentType === 'dynamic-form' && event.componentId === componentId), map(() => true), take(1));
+            tracking$ = eventBus.on('component-initialized').pipe(filter$1((event) => event.componentType === 'dynamic-form' && event.componentId === componentId), map$1(() => true), take(1));
         }
         else {
             tracking$ = createInitializationTracker(eventBus, count);
@@ -787,6 +1485,14 @@ function isSimplifiedArrayField(field) {
     return field.type === 'array' && 'template' in field;
 }
 
+/**
+ * Type guard for ContainerField with proper type narrowing
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Type guard must accept any field type
+function isContainerTypedField(field) {
+    return field.type === 'container' && 'fields' in field && 'wrappers' in field;
+}
+
 /**
  * Type guard to check if a field definition has child fields.
  * This is a looser check that works with FieldDef<unknown> without requiring RegisteredFieldTypes.
@@ -795,7 +1501,7 @@ function hasChildFields(field) {
     return 'fields' in field && field.fields != null;
 }
 /** Container field type names */
-const CONTAINER_TYPES$1 = new Set(['page', 'row', 'group', 'array']);
+const CONTAINER_TYPES$1 = new Set(['page', 'row', 'group', 'array', 'container']);
 function isContainerField(field) {
     return CONTAINER_TYPES$1.has(field.type);
 }
@@ -1240,12 +1946,12 @@ function assertNever(value) {
  *    - Example: `noSpaces: (ctx) => ctx.value().includes(' ') ? { kind: 'noSpaces' } : null`
  *
  * 3. **Async Validators** - For asynchronous validation (debouncing, database lookups, etc.)
- *    - Used in: validators array on fields with type 'customAsync'
+ *    - Used in: validators array on fields with type 'async'
  *    - Return type: Observable<ValidationError | ValidationError[] | null>
  *    - Example: `checkUsername: (ctx) => userService.checkAvailability(ctx.value())`
  *
  * 4. **HTTP Validators** - For HTTP-based validation with automatic request cancellation
- *    - Used in: validators array on fields with type 'customHttp'
+ *    - Used in: validators array on fields with type 'http'
  *    - Configuration object with url, method, mapResponse, etc.
  *    - Example: `{ url: '/api/check', method: 'GET', mapResponse: ... }`
  *
@@ -1292,8 +1998,6 @@ class FunctionRegistryService {
     customFunctions = new Map();
     customFunctionScopes = new Map();
     derivationFunctions = new Map();
-    // TODO(@ng-forge): remove deprecated code in next minor
-    propertyDerivationFunctions = new Map();
     asyncDerivationFunctions = new Map();
     asyncConditionFunctions = new Map();
     validators = new Map();
@@ -1395,66 +2099,14 @@ class FunctionRegistryService {
      *
      * @param derivations - Object mapping function names to derivation functions
      */
-    setDerivationFunctions(derivations) {
-        this.setRegistryIfChanged(this.derivationFunctions, derivations);
-    }
-    /**
-     * Clear all derivation functions
-     */
-    clearDerivationFunctions() {
-        this.derivationFunctions.clear();
-    }
-    // ─────────────────────────────────────────────────────────────────────────────
-    // Property Derivation Functions
-    // TODO(@ng-forge): remove deprecated code in next minor
-    // ─────────────────────────────────────────────────────────────────────────────
-    /**
-     * Register a property derivation function.
-     *
-     * Property derivation functions compute derived values for field properties
-     * (like `minDate`, `options`, `label`) and are called when a
-     * `PropertyDerivationLogicConfig` references them by `functionName`.
-     *
-     * @param name - Unique identifier for the function
-     * @param fn - Function that receives EvaluationContext and returns the derived property value
-     */
-    registerPropertyDerivationFunction(name, fn) {
-        this.propertyDerivationFunctions.set(name, fn);
-    }
-    /**
-     * Get a property derivation function by name
-     */
-    getPropertyDerivationFunction(name) {
-        return this.propertyDerivationFunctions.get(name) ?? this.derivationFunctions.get(name);
-    }
-    /**
-     * Get all property derivation functions as an object.
-     *
-     * Merges both `derivationFunctions` and `propertyDerivationFunctions` maps,
-     * with `propertyDerivationFunctions` taking precedence. This allows users
-     * to migrate functions from `propertyDerivations` to `derivations` without
-     * breaking property derivation lookups.
-     */
-    getPropertyDerivationFunctions() {
-        return {
-            ...Object.fromEntries(this.derivationFunctions),
-            ...Object.fromEntries(this.propertyDerivationFunctions),
-        };
-    }
-    /**
-     * Set property derivation functions from a config object.
-     * Only updates functions if their references have changed.
-     *
-     * @param functions - Object mapping function names to property derivation functions
-     */
-    setPropertyDerivationFunctions(functions) {
-        this.setRegistryIfChanged(this.propertyDerivationFunctions, functions);
+    setDerivationFunctions(derivations) {
+        this.setRegistryIfChanged(this.derivationFunctions, derivations);
     }
     /**
-     * Clear all property derivation functions
+     * Clear all derivation functions
      */
-    clearPropertyDerivationFunctions() {
-        this.propertyDerivationFunctions.clear();
+    clearDerivationFunctions() {
+        this.derivationFunctions.clear();
     }
     // ─────────────────────────────────────────────────────────────────────────────
     // Async Derivation Functions
@@ -1757,17 +2409,16 @@ class FunctionRegistryService {
     clearAll() {
         this.clearCustomFunctions();
         this.clearDerivationFunctions();
-        this.clearPropertyDerivationFunctions();
         this.clearAsyncDerivationFunctions();
         this.clearAsyncConditionFunctions();
         this.clearValidators();
         this.clearAsyncValidators();
         this.clearHttpValidators();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FunctionRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FunctionRegistryService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FunctionRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FunctionRegistryService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FunctionRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FunctionRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -1806,10 +2457,10 @@ class SchemaRegistryService {
         }
         return schema;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SchemaRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SchemaRegistryService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SchemaRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SchemaRegistryService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SchemaRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SchemaRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -2390,10 +3041,10 @@ class FieldContextRegistryService {
             },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FieldContextRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FieldContextRegistryService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FieldContextRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FieldContextRegistryService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FieldContextRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FieldContextRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -2721,24 +3372,6 @@ function countArrayPlaceholders(path) {
     return path.split('.').filter((part) => part === '$').length;
 }
 
-/**
- * Emits a deprecation warning once per unique key in dev mode only.
- * Subsequent calls with the same `id` are silently ignored.
- *
- * @param logger - The DynamicFormLogger instance for output
- * @param tracker - DI-scoped tracker to deduplicate warnings
- * @param id - Unique identifier for this deprecation (e.g., 'type:propertyDerivation')
- * @param message - Human-readable deprecation message
- *
- * @public
- */
-function warnDeprecated(logger, tracker, id, message) {
-    if (isDevMode() && !tracker.warnedKeys.has(id)) {
-        tracker.warnedKeys.add(id);
-        logger.warn(`[Dynamic Forms] DEPRECATED: ${message}`);
-    }
-}
-
 /**
  * Token types for expression parsing
  */
@@ -3595,16 +4228,22 @@ function evaluateCondition(expression, context) {
     switch (expression.type) {
         case 'fieldValue':
             return evaluateFieldValueCondition(expression, context);
-        case 'formValue':
-            // TODO(@ng-forge): remove deprecated code in next minor
-            if (context.deprecationTracker) {
-                warnDeprecated(context.logger, context.deprecationTracker, 'condition:formValue', "Condition type 'formValue' is deprecated. Use 'fieldValue' with a specific fieldPath, or 'javascript' for complex form-level comparisons.");
-            }
-            return evaluateFormValueCondition(expression, context);
         case 'javascript':
             return evaluateJavaScriptExpression(expression, context);
-        case 'custom':
-            return evaluateCustomFunction(expression, context);
+        case 'custom': {
+            const customFn = context.customFunctions?.[expression.functionName];
+            if (!customFn) {
+                context.logger.error('Custom function not found:', expression.functionName);
+                return false;
+            }
+            try {
+                return !!customFn(context);
+            }
+            catch (error) {
+                context.logger.error('Error executing custom function:', expression.functionName, error);
+                return false;
+            }
+        }
         case 'and':
             return evaluateAndCondition(expression, context);
         case 'or':
@@ -3637,12 +4276,9 @@ function evaluateFieldValueCondition(expression, context) {
             : undefined;
     return compareValues(fieldValue, expression.value, expression.operator);
 }
-function evaluateFormValueCondition(expression, context) {
-    return compareValues(context.formValue, expression.value, expression.operator);
-}
 function evaluateJavaScriptExpression(expression, context) {
     try {
-        // Use secure AST-based expression parser instead of new Function()
+        // Use secure AST-based expression parser instead of dynamic code execution
         const result = ExpressionParser.evaluate(expression.expression, context);
         return !!result;
     }
@@ -3651,25 +4287,6 @@ function evaluateJavaScriptExpression(expression, context) {
         return false;
     }
 }
-function evaluateCustomFunction(expression, context) {
-    const fnName = 'functionName' in expression ? expression.functionName : expression.expression;
-    // TODO(@ng-forge): remove deprecated code in next minor
-    if (!('functionName' in expression) && context.deprecationTracker) {
-        warnDeprecated(context.logger, context.deprecationTracker, 'condition:custom:expression', "CustomCondition 'expression' field is deprecated. Use 'functionName' instead.");
-    }
-    const customFn = context.customFunctions?.[fnName];
-    if (!customFn) {
-        context.logger.error('Custom function not found:', fnName);
-        return false;
-    }
-    try {
-        return !!customFn(context);
-    }
-    catch (error) {
-        context.logger.error('Error executing custom function:', fnName, error);
-        return false;
-    }
-}
 function evaluateAndCondition(expression, context) {
     if (expression.conditions.length === 0)
         return false;
@@ -4578,21 +5195,6 @@ function isStateLogicConfig(config) {
 function isDerivationLogicConfig(config) {
     return config.type === 'derivation';
 }
-// TODO(@ng-forge): remove deprecated code in next minor
-/**
- * Type guard to check if a logic config is a PropertyDerivationLogicConfig.
- *
- * @deprecated Use `isDerivationLogicConfig(config) && hasTargetProperty(config)` instead.
- * Will be removed in a future minor version.
- *
- * @param config - The logic config to check
- * @returns true if the config is for property derivation
- *
- * @public
- */
-function isPropertyDerivationLogicConfig(config) {
-    return config.type === 'propertyDerivation';
-}
 /**
  * Type guard to check if a derivation config targets a property rather than the field value.
  *
@@ -4651,18 +5253,13 @@ function isCrossFieldExpression(expr, context) {
         case 'fieldValue':
             // fieldPath means it references another field's value
             return !!expr.fieldPath;
-        case 'formValue':
-            // formValue type always accesses the form state
-            return true;
         case 'javascript':
             // Check for formValue.* patterns in the expression string
             return FORM_VALUE_ACCESS_PATTERN.test(expr.expression || '');
         case 'custom': {
             // For custom functions, determine scope from registry or default to cross-field.
-            // Support both new API (functionName) and deprecated API (expression).
-            //
             // Look up function scope from registry if context is provided
-            const functionName = 'functionName' in expr ? expr.functionName : expr.expression;
+            const functionName = expr.functionName;
             if (context?.getFunctionScope && functionName) {
                 const scope = context.getFunctionScope(functionName);
                 if (scope === 'field') {
@@ -4708,10 +5305,6 @@ function extractExpressionDependencies(expr) {
                 deps.add(expr.fieldPath.split('.')[0]);
             }
             break;
-        case 'formValue':
-            // Full form access - depends on everything
-            deps.add('*');
-            break;
         case 'javascript':
             // Extract from formValue.* patterns in expression
             extractFromExpressionString(expr.expression || '', deps);
@@ -4826,7 +5419,7 @@ function isCrossFieldBuiltInValidator(config) {
  * because they require field-level registration.
  */
 function isResourceBasedValidator(config) {
-    return config.type === 'customAsync' || config.type === 'customHttp' || config.type === 'http';
+    return config.type === 'async' || config.type === 'http';
 }
 /**
  * Detects if a validator's `when` condition is cross-field.
@@ -4857,23 +5450,6 @@ function hasCrossFieldWhenCondition(config, context) {
 function isCrossFieldStateLogic(config, context) {
     return isCrossFieldExpression(config.condition, context);
 }
-/**
- * Detects if a LogicConfig has a cross-field condition.
- *
- * @param config The logic configuration to check
- * @param context Optional context providing function scope lookup
- * @returns true if the logic condition references other fields
- *
- * @deprecated Use `isCrossFieldStateLogic` for state logic configs.
- *             Derivation logic is handled by the derivation system.
- */
-function isCrossFieldLogic(config, context) {
-    // Only check state logic configs
-    if (!isStateLogicConfig(config)) {
-        return false;
-    }
-    return isCrossFieldExpression(config.condition, context);
-}
 // ============================================================================
 // Schema Detection
 // ============================================================================
@@ -5696,7 +6272,7 @@ function createHttpDerivationStream(entry, formValue$, context) {
     // Capture after the guard — TS narrows this to `string` here
     const responseExpression = entry.responseExpression;
     const debounceMs = entry.debounceMs ?? DEFAULT_HTTP_DEBOUNCE_MS;
-    return formValue$.pipe(startWith(null), pairwise(), map$1(([previous, current]) => ({
+    return formValue$.pipe(startWith(null), pairwise(), map(([previous, current]) => ({
         current: current,
         changedFields: getChangedKeys(previous, current),
     })), 
@@ -5705,7 +6281,7 @@ function createHttpDerivationStream(entry, formValue$, context) {
         if (changedFields.size === 0)
             return false;
         return entry.dependsOn.some((dep) => changedFields.has(dep));
-    }), debounceTime(debounceMs), switchMap$1(({ current, changedFields }) => {
+    }), debounceTime(debounceMs), switchMap(({ current, changedFields }) => {
         return new Observable((subscriber) => {
             const formAccessor = untracked(() => context.form());
             // Check stopOnUserOverride — skip if the user has manually edited the target field
@@ -5890,7 +6466,7 @@ function createAsyncDerivationStream(entry, formValue$, context) {
     // first emission (null vs actual form value), so every dependsOn field matches.
     // This intentionally fires the async derivation on initial form load — same
     // pattern as http-derivation-stream.ts.
-    return formValue$.pipe(startWith(null), pairwise(), map$1(([previous, current]) => ({
+    return formValue$.pipe(startWith(null), pairwise(), map(([previous, current]) => ({
         current: current,
         changedFields: getChangedKeys(previous, current),
     })), 
@@ -5899,7 +6475,7 @@ function createAsyncDerivationStream(entry, formValue$, context) {
         if (changedFields.size === 0)
             return false;
         return entry.dependsOn.some((dep) => changedFields.has(dep));
-    }), debounceTime(debounceMs), switchMap$1(({ current, changedFields }) => {
+    }), debounceTime(debounceMs), switchMap(({ current, changedFields }) => {
         return new Observable((subscriber) => {
             const formAccessor = untracked(() => context.form());
             // Check stopOnUserOverride — skip if the user has manually edited the target field
@@ -6083,7 +6659,7 @@ class DerivationOrchestrator {
             this.warnAboutWildcardDependencies(collection.entries, fields.length);
             this.warnAboutMisconfiguredReEngagement(collection.entries);
             return collection;
-        }, ...(ngDevMode ? [{ debugName: "derivationCollection" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "derivationCollection" }] : /* istanbul ignore next */ []));
         this.setupOnChangeStream();
         this.setupDebouncedStream();
         this.setupHttpStreams();
@@ -6101,7 +6677,7 @@ class DerivationOrchestrator {
         auditTime(0), 
         // startWith + pairwise: Track previous and current values to detect changed fields.
         // This enables reEngageOnDependencyChange for onChange derivations.
-        startWith(null), pairwise(), filter((pair) => pair[1] !== null), map$1(([previous, current]) => ({
+        startWith(null), pairwise(), filter((pair) => pair[1] !== null), map(([previous, current]) => ({
             collection: current[0],
             formAccessor: current[2],
             changedFields: getChangedKeys(previous?.[1] ?? null, current[1]),
@@ -6129,14 +6705,14 @@ class DerivationOrchestrator {
         debounceTime(DEFAULT_DEBOUNCE_MS), 
         // startWith + pairwise: Track previous and current values to detect changes.
         // startWith(null) ensures pairwise has an initial value to pair with.
-        startWith(null), pairwise(), filter((pair) => pair[1] !== null), map$1(([previous, current]) => ({
+        startWith(null), pairwise(), filter((pair) => pair[1] !== null), map(([previous, current]) => ({
             current,
             changedFields: getChangedKeys(previous, current),
         })), filter(({ changedFields }) => changedFields.size > 0), 
         // switchMap: For debounced derivations, it's OK to cancel pending work
         // if new changes come in - we want the latest debounced values.
         // (Unlike onChange which uses exhaustMap to prevent cancellation)
-        switchMap$1(({ changedFields }) => {
+        switchMap(({ changedFields }) => {
             const collection = untracked(() => this.derivationCollection());
             const formAccessor = untracked(() => this.config.form());
             if (!collection || !formAccessor)
@@ -6157,11 +6733,11 @@ class DerivationOrchestrator {
     createPeriodStream(debounceMs, collection, formAccessor, changedFields) {
         const additionalWait = Math.max(0, debounceMs - DEFAULT_DEBOUNCE_MS);
         if (additionalWait === 0) {
-            return of(null).pipe(map$1(() => {
+            return of(null).pipe(map(() => {
                 this.applyDebouncedEntriesForPeriod(debounceMs, collection, formAccessor, changedFields);
             }));
         }
-        return timer(additionalWait).pipe(map$1(() => {
+        return timer(additionalWait).pipe(map(() => {
             const currentCollection = untracked(() => this.derivationCollection());
             const currentFormAccessor = untracked(() => this.config.form());
             if (currentCollection && currentFormAccessor) {
@@ -6658,9 +7234,9 @@ function computePropertyValue(entry, evalContext, applicatorContext) {
     }
     // Custom function
     if (entry.functionName) {
-        const fn = applicatorContext.propertyDerivationFunctions?.[entry.functionName];
+        const fn = applicatorContext.derivationFunctions?.[entry.functionName];
         if (!fn) {
-            throw new DynamicFormError(`Property derivation function '${entry.functionName}' not found in customFnConfig.derivations or customFnConfig.propertyDerivations`);
+            throw new DynamicFormError(`Property derivation function '${entry.functionName}' not found in customFnConfig.derivations`);
         }
         return fn(evalContext);
     }
@@ -6707,7 +7283,7 @@ function buildPropertyOverrideKey(arrayKey, index, fieldKey) {
 /**
  * Collects all property derivation entries from field definitions.
  *
- * Traverses the field definition tree and extracts `type: 'propertyDerivation'`
+ * Traverses the field definition tree and extracts `type: 'derivation'` with `targetProperty`
  * entries from each field's `logic` array.
  *
  * No topological sort is needed because property derivations don't chain —
@@ -6767,46 +7343,13 @@ function collectFromField$1(field, entries, context) {
     const validationField = field;
     if (validationField.logic) {
         for (const logicConfig of validationField.logic) {
-            if (isPropertyDerivationLogicConfig(logicConfig)) {
-                // TODO(@ng-forge): remove deprecated code in next minor
-                // Deprecated path — emit warning, then process normally
-                warnDeprecated(context.logger, context.tracker, 'type:propertyDerivation', "Logic type 'propertyDerivation' is deprecated. Use type: 'derivation' with targetProperty instead.");
-                const entry = createPropertyDerivationEntry(fieldKey, logicConfig, context);
-                entries.push(entry);
-            }
-            else if (isDerivationLogicConfig(logicConfig) && hasTargetProperty(logicConfig)) {
-                // New unified path: type: 'derivation' + targetProperty → property derivation pipeline
+            if (isDerivationLogicConfig(logicConfig) && hasTargetProperty(logicConfig)) {
                 const entry = createPropertyDerivationEntryFromDerivation(fieldKey, logicConfig, context);
                 entries.push(entry);
             }
         }
     }
 }
-/**
- * Creates a property derivation entry from a `PropertyDerivationLogicConfig`.
- *
- * @internal
- */
-function createPropertyDerivationEntry(fieldKey, config, context) {
-    const effectiveFieldKey = buildPropertyOverrideKey(context.arrayPath, context.arrayPath ? PLACEHOLDER_INDEX : undefined, fieldKey);
-    const dependsOn = extractDependencies(config);
-    const condition = config.condition ?? true;
-    const trigger = config.trigger ?? 'onChange';
-    const debounceMs = trigger === 'debounced' ? config.debounceMs : undefined;
-    return {
-        fieldKey: effectiveFieldKey,
-        targetProperty: config.targetProperty,
-        dependsOn,
-        condition,
-        value: config.value,
-        expression: config.expression,
-        functionName: config.functionName,
-        trigger,
-        debounceMs,
-        debugName: config.debugName,
-        originalConfig: config,
-    };
-}
 /**
  * Creates a property derivation entry from a `DerivationLogicConfig` that has `targetProperty`.
  *
@@ -6899,7 +7442,7 @@ class PropertyDerivationOrchestrator {
                 return null;
             }
             return collection;
-        }, ...(ngDevMode ? [{ debugName: "propertyDerivationCollection" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "propertyDerivationCollection" }] : /* istanbul ignore next */ []));
         // Side effects react to collection changes: clear the store, register fields, warn.
         // schemaFields is included in the dependency array to ensure the field count is always
         // in sync with the collection (avoids reading a stale value via untracked).
@@ -6929,10 +7472,10 @@ class PropertyDerivationOrchestrator {
     }
     setupDebouncedStream() {
         toObservable(this.config.formValue, { injector: this.injector })
-            .pipe(debounceTime(DEFAULT_DEBOUNCE_MS), startWith(null), pairwise(), filter((pair) => pair[1] !== null), map$1(([previous, current]) => ({
+            .pipe(debounceTime(DEFAULT_DEBOUNCE_MS), startWith(null), pairwise(), filter((pair) => pair[1] !== null), map(([previous, current]) => ({
             current,
             changedFields: getChangedKeys(previous, current),
-        })), filter(({ changedFields }) => changedFields.size > 0), switchMap$1(({ changedFields }) => {
+        })), filter(({ changedFields }) => changedFields.size > 0), switchMap(({ changedFields }) => {
             const collection = untracked(() => this.propertyDerivationCollection());
             if (!collection)
                 return of(null);
@@ -6948,7 +7491,7 @@ class PropertyDerivationOrchestrator {
     }
     createPeriodStream(debounceMs, collection, changedFields) {
         const additionalWait = Math.max(0, debounceMs - DEFAULT_DEBOUNCE_MS);
-        return timer(additionalWait).pipe(map$1(() => {
+        return timer(additionalWait).pipe(map(() => {
             // For periods beyond DEFAULT_DEBOUNCE_MS, re-read collection as it may have changed during the wait.
             // For zero-wait periods, use the original collection directly since no time has elapsed.
             const currentCollection = additionalWait > 0 ? (untracked(() => this.propertyDerivationCollection()) ?? collection) : collection;
@@ -6959,7 +7502,7 @@ class PropertyDerivationOrchestrator {
         const applicatorContext = {
             formValue: this.config.formValue,
             store: this.config.store,
-            propertyDerivationFunctions: this.functionRegistry.getPropertyDerivationFunctions(),
+            derivationFunctions: this.functionRegistry.getDerivationFunctions(),
             customFunctions: this.functionRegistry.getCustomFunctions(),
             externalData: this.resolveExternalData(),
             logger: this.logger,
@@ -6975,7 +7518,7 @@ class PropertyDerivationOrchestrator {
         const applicatorContext = {
             formValue: this.config.formValue,
             store: this.config.store,
-            propertyDerivationFunctions: this.functionRegistry.getPropertyDerivationFunctions(),
+            derivationFunctions: this.functionRegistry.getDerivationFunctions(),
             customFunctions: this.functionRegistry.getCustomFunctions(),
             externalData: this.resolveExternalData(),
             logger: this.logger,
@@ -7297,6 +7840,40 @@ class ShiftArrayItemEvent {
     }
 }
 
+/**
+ * Event dispatched to move an existing item from one index to another within an array field.
+ *
+ * This is an atomic reorder operation — the item at `fromIndex` is removed and
+ * reinserted at `toIndex`. No template is required because the existing item
+ * (resolved component, form value, and stored template) is preserved.
+ *
+ * @example
+ * ```typescript
+ * // Use the builder API (recommended)
+ * eventBus.dispatch(arrayEvent('contacts').move(0, 2));
+ *
+ * // Or instantiate directly
+ * eventBus.dispatch(new MoveArrayItemEvent('contacts', 0, 2));
+ * ```
+ */
+class MoveArrayItemEvent {
+    arrayKey;
+    fromIndex;
+    toIndex;
+    type = 'move-array-item';
+    constructor(
+    /** The key of the array field containing the item to move */
+    arrayKey, 
+    /** The current index of the item to move */
+    fromIndex, 
+    /** The target index to move the item to */
+    toIndex) {
+        this.arrayKey = arrayKey;
+        this.fromIndex = fromIndex;
+        this.toIndex = toIndex;
+    }
+}
+
 /**
  * Event dispatched to remove an item at a SPECIFIC INDEX from an array field.
  *
@@ -7369,17 +7946,17 @@ class PageOrchestratorComponent {
     /**
      * Array of page field definitions to render
      */
-    pageFields = input.required(...(ngDevMode ? [{ debugName: "pageFields" }] : []));
+    pageFields = input.required(...(ngDevMode ? [{ debugName: "pageFields" }] : /* istanbul ignore next */ []));
     /**
      * Root form instance from parent DynamicForm.
      * Uses FieldTree<unknown> to accept any form type.
      */
-    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
     /**
      * Field signal context for child fields
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any -- FieldSignalContext is contravariant in TModel, using any allows accepting any form type
-    fieldSignalContext = input.required(...(ngDevMode ? [{ debugName: "fieldSignalContext" }] : []));
+    fieldSignalContext = input.required(...(ngDevMode ? [{ debugName: "fieldSignalContext" }] : /* istanbul ignore next */ []));
     /**
      * Computed signal that tracks which pages are hidden.
      * Returns an array of booleans where true means the page is hidden.
@@ -7388,7 +7965,7 @@ class PageOrchestratorComponent {
     pageHiddenStates = computed(() => {
         const pages = this.pageFields();
         return pages.map((page) => this.evaluatePageHidden(page));
-    }, ...(ngDevMode ? [{ debugName: "pageHiddenStates" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "pageHiddenStates" }] : /* istanbul ignore next */ []));
     /**
      * Computed signal that returns indices of visible (non-hidden) pages.
      * This is used for navigation to skip hidden pages.
@@ -7399,7 +7976,7 @@ class PageOrchestratorComponent {
             .map((hidden, index) => ({ index, hidden }))
             .filter((item) => !item.hidden)
             .map((item) => item.index);
-    }, ...(ngDevMode ? [{ debugName: "visiblePageIndices" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "visiblePageIndices" }] : /* istanbul ignore next */ []));
     /**
      * Internal signal for current page index that tracks with page fields.
      * This tracks the actual page index, not the visible page index.
@@ -7414,7 +7991,7 @@ class PageOrchestratorComponent {
             return 0;
         // Start on page 0 (will be adjusted if page 0 is hidden by initial navigation)
         return 0;
-    }, ...(ngDevMode ? [{ debugName: "currentPageIndex" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "currentPageIndex" }] : /* istanbul ignore next */ []));
     /**
      * Computed state for the orchestrator
      */
@@ -7433,7 +8010,7 @@ class PageOrchestratorComponent {
             isLastPage: isLastVisiblePage,
             navigationDisabled: false,
         };
-    }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
     /**
      * Signal indicating whether all fields on the current page are valid.
      *
@@ -7467,7 +8044,7 @@ class PageOrchestratorComponent {
             }
         }
         return true;
-    }, ...(ngDevMode ? [{ debugName: "currentPageValid" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "currentPageValid" }] : /* istanbul ignore next */ []));
     /**
      * Extended field signal context that includes currentPageValid.
      *
@@ -7478,7 +8055,7 @@ class PageOrchestratorComponent {
     extendedFieldSignalContext = computed(() => ({
         ...this.fieldSignalContext(),
         currentPageValid: this.currentPageValid,
-    }), ...(ngDevMode ? [{ debugName: "extendedFieldSignalContext" }] : []));
+    }), ...(ngDevMode ? [{ debugName: "extendedFieldSignalContext" }] : /* istanbul ignore next */ []));
     constructor() {
         // Setup event listeners for navigation
         this.setupEventListeners();
@@ -7685,8 +8262,8 @@ class PageOrchestratorComponent {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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(),
@@ -7716,9 +8293,9 @@ class PageOrchestratorComponent {
         }
       }
     }
-  `, isInline: true, styles: [":host{display:block;position:relative;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./ng-forge-dynamic-forms-page-field.component-D6M_uJKu.mjs').then(m => m.default)], () => [import('./ng-forge-dynamic-forms-page-field.component-D6M_uJKu.mjs').then(m => m.default)]] });
+  `, isInline: true, styles: [":host{display:block;position:relative;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./ng-forge-dynamic-forms-page-field.component-CEN5u1dd.mjs').then(m => m.default)], () => [import('./ng-forge-dynamic-forms-page-field.component-CEN5u1dd.mjs').then(m => m.default)]] });
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.0", ngImport: i0, type: PageOrchestratorComponent, resolveDeferredDeps: () => [import('./ng-forge-dynamic-forms-page-field.component-D6M_uJKu.mjs').then(m => m.default)], resolveMetadata: PageFieldComponent => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.8", ngImport: i0, type: PageOrchestratorComponent, resolveDeferredDeps: () => [import('./ng-forge-dynamic-forms-page-field.component-CEN5u1dd.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) {
@@ -7870,7 +8447,7 @@ function validateSimplifiedTemplate(field) {
  * Expands a simplified array field into a full ArrayField + optional add button.
  */
 function expandSimplifiedArray(field) {
-    const { template, value = [], addButton, removeButton, key, logic, minLength, maxLength } = field;
+    const { template, value = [], addButton, removeButton, key, logic, minLength, maxLength, wrappers, skipAutoWrappers, skipDefaultWrappers, } = field;
     const isObjectTemplate = Array.isArray(template);
     const values = value;
     // Validate template before expansion
@@ -7907,6 +8484,15 @@ function expandSimplifiedArray(field) {
     if (maxLength !== undefined) {
         arrayFieldObj['maxLength'] = maxLength;
     }
+    if (wrappers !== undefined) {
+        arrayFieldObj['wrappers'] = wrappers;
+    }
+    if (skipAutoWrappers !== undefined) {
+        arrayFieldObj['skipAutoWrappers'] = skipAutoWrappers;
+    }
+    if (skipDefaultWrappers !== undefined) {
+        arrayFieldObj['skipDefaultWrappers'] = skipDefaultWrappers;
+    }
     // Safe cast: we're constructing a valid ArrayField shape with key, type, and fields
     const arrayField = arrayFieldObj;
     // Store normalization metadata via Symbol property instead of a runtime property
@@ -7989,7 +8575,7 @@ function buildRemoveButton(config) {
  * Type guard to check if a field is a container with fields
  */
 function isContainerWithFields(field) {
-    return ((field.type === 'row' || field.type === 'group' || field.type === 'page') &&
+    return ((field.type === 'row' || field.type === 'group' || field.type === 'page' || field.type === 'container') &&
         'fields' in field &&
         Array.isArray(field.fields));
 }
@@ -8244,6 +8830,83 @@ class HttpConditionFunctionCacheService {
     httpConditionFunctionCache = new Map();
 }
 
+/**
+ * Wraps a `Resource` so that the previous resolved value is preserved while the resource
+ * is loading or reloading. This prevents UI flicker when params change and a new request
+ * is in-flight — the consumer sees the stale value with a `loading`/`reloading` status
+ * instead of `undefined`.
+ *
+ * Uses Angular's `resource.snapshot` + `resourceFromSnapshots` composition pattern.
+ *
+ * @example
+ * ```typescript
+ * const user = withPreviousValue(
+ *   resource({ params: () => userId(), loader: ({ params }) => fetchUser(params) })
+ * );
+ * // user.value() keeps the old user data during loading transitions
+ * ```
+ *
+ * @experimental Uses Angular's experimental resource composition APIs.
+ */
+function withPreviousValue(input) {
+    const derived = linkedSignal({ ...(ngDevMode ? { debugName: "derived" } : /* istanbul ignore next */ {}), source: input.snapshot,
+        computation: (snapshot, previous) => {
+            // During loading/reloading, keep the previous resolved value if available.
+            // Don't preserve values from error states — those aren't useful to show.
+            if ((snapshot.status === 'loading' || snapshot.status === 'reloading') &&
+                previous !== undefined &&
+                previous.value.status !== 'error') {
+                return { status: snapshot.status, value: previous.value.value };
+            }
+            return snapshot;
+        } });
+    return resourceFromSnapshots(derived);
+}
+
+/**
+ * Type guard to check if a value is an array of Signals.
+ * @internal
+ */
+function isSignalArray(value) {
+    return Array.isArray(value) && value.every((item) => isSignal(item));
+}
+/**
+ * Type guard to check if a value is a record (object) of Signals.
+ * @internal
+ */
+function isSignalRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value) && Object.values(value).every((item) => isSignal(item));
+}
+// Implementation
+function derivedFromDeferred(source, operator, options) {
+    const deferred$ = defer(() => {
+        // Handle single signal
+        if (isSignal(source)) {
+            return toObservable(source, { injector: options.injector });
+        }
+        // Handle array of signals
+        if (isSignalArray(source)) {
+            const observables = source.map((s) => toObservable(s, { injector: options.injector }));
+            return combineLatest(observables);
+        }
+        // Handle object of signals
+        if (isSignalRecord(source)) {
+            const keys = Object.keys(source);
+            const observables = keys.map((key) => toObservable(source[key], { injector: options.injector }));
+            return combineLatest(observables, (...values) => {
+                const result = {};
+                keys.forEach((key, index) => {
+                    result[key] = values[index];
+                });
+                return result;
+            });
+        }
+        // Fallback - should not happen with proper typing
+        throw new Error('Invalid source type. Expected a Signal, array of Signals, or object of Signals.');
+    }).pipe(operator);
+    return toSignal(deferred$, { initialValue: options.initialValue, injector: options.injector });
+}
+
 /**
  * Extracts a boolean from an HTTP response using an optional expression.
  * When `responseExpression` is provided, evaluates it with `{ response }` scope.
@@ -8269,10 +8932,10 @@ function extractBoolean(response, responseExpression, pendingValue, logger) {
 /**
  * Creates a logic function for an HTTP condition.
  *
- * Uses a signal-based async resolution pattern: the LogicFn updates a `resolvedRequest` signal,
- * a reactive pipeline fetches the response and updates a `resultValue` signal.
- * The LogicFn returns the current `resultValue()`, which starts as `pendingValue` and
- * transitions to the actual HTTP result.
+ * Uses Angular's `rxResource()` API with snapshot composition for async resolution:
+ * the LogicFn updates a `resolvedRequest` signal, a debounced version feeds into
+ * an `rxResource()` that manages the HTTP lifecycle, and `withPreviousValue()` preserves
+ * the last resolved boolean during re-fetching to prevent UI flicker.
  *
  * Must be called in injection context (same as `createLogicFunction`).
  */
@@ -8303,30 +8966,45 @@ function createHttpConditionLogicFunction(condition) {
         const contextKey = safeReadPathKeys(ctx).join('.');
         let signalPair = perFunctionSignalStore.get(contextKey);
         if (!signalPair) {
-            const resolvedRequest = signal(undefined, ...(ngDevMode ? [{ debugName: "resolvedRequest" }] : []));
-            // Wrap in untracked() to avoid NG0602: toObservable() internally calls effect(),
+            const resolvedRequest = signal(undefined, ...(ngDevMode ? [{ debugName: "resolvedRequest" }] : /* istanbul ignore next */ []));
+            // Wrap in untracked() to avoid NG0602: resource() internally creates effects,
             // which cannot be created inside a reactive context (computed). The LogicFn runs
             // inside Angular Signal Forms' BooleanOrLogic.compute (a computed), so we must
-            // clear the active reactive consumer before creating the observable pipeline.
-            const resultValue = untracked(() => {
-                const pipeline = toObservable(resolvedRequest, { injector }).pipe(debounceTime(debounceMs), distinctUntilChanged((prev, curr) => stableStringify(prev) === stableStringify(curr)), filter((request) => request !== undefined), switchMap$1((request) => {
-                    const method = request.method ?? 'GET';
-                    const options = {};
-                    if (request.body)
-                        options['body'] = request.body;
-                    if (request.headers)
-                        options['headers'] = request.headers;
-                    return httpClient.request(method, request.url, options).pipe(map$1((response) => extractBoolean(response, condition.responseExpression, pendingValue, logger)), tap((value) => {
-                        const requestKey = stableStringify(request);
-                        cache.set(requestKey, value, cacheDurationMs);
-                    }), catchError((error) => {
-                        logger.warn('HTTP condition request failed:', error);
-                        return of(pendingValue);
-                    }));
-                }), startWith(pendingValue));
-                return toSignal(pipeline, { injector, initialValue: pendingValue });
+            // clear the active reactive consumer before creating the resource pipeline.
+            const resultResource = untracked(() => {
+                // Create a debounced, stabilized version of the request signal.
+                // This prevents rapid re-fetches when form values change quickly.
+                const debouncedRequest = derivedFromDeferred(resolvedRequest, pipe(debounceTime(debounceMs), distinctUntilChanged((prev, curr) => stableStringify(prev) === stableStringify(curr))), { initialValue: undefined, injector });
+                // rxResource() manages the HTTP lifecycle natively with Observables:
+                // auto-cancellation via unsubscription, loading/resolved/error status tracking,
+                // and signal-based reactivity.
+                const httpResource = rxResource({
+                    params: () => debouncedRequest() ?? undefined,
+                    // When params() returns undefined, rxResource() enters idle state and skips the stream.
+                    stream: ({ params: request }) => {
+                        const method = request.method ?? 'GET';
+                        const options = {};
+                        if (request.body)
+                            options['body'] = request.body;
+                        if (request.headers)
+                            options['headers'] = request.headers;
+                        return httpClient.request(method, request.url, options).pipe(map((response) => extractBoolean(response, condition.responseExpression, pendingValue, logger)), tap((value) => {
+                            const requestKey = stableStringify(request);
+                            cache.set(requestKey, value, cacheDurationMs);
+                        }), catchError((error) => {
+                            logger.warn('HTTP condition request failed:', error);
+                            return of(pendingValue);
+                        }));
+                    },
+                    defaultValue: pendingValue,
+                    injector,
+                });
+                // Snapshot composition: preserve the previous boolean result during re-fetching.
+                // Without this, the condition would briefly flash to pendingValue when params change,
+                // causing visible UI flicker (e.g., a conditionally visible field briefly disappearing).
+                return withPreviousValue(httpResource);
             });
-            signalPair = { resolvedRequest, resultValue };
+            signalPair = { resolvedRequest, resultResource };
             perFunctionSignalStore.set(contextKey, signalPair);
         }
         // Build reactive evaluation context (creates signal dependencies on form values)
@@ -8334,7 +9012,7 @@ function createHttpConditionLogicFunction(condition) {
         // Returns null when a path param is undefined — skip the request and return pending value
         const resolved = resolveHttpRequest(condition.http, evaluationContext);
         if (!resolved) {
-            return signalPair.resultValue();
+            return signalPair.resultResource.value();
         }
         const requestKey = stableStringify(resolved);
         // Check response cache first
@@ -8342,15 +9020,15 @@ function createHttpConditionLogicFunction(condition) {
         if (cachedResult !== undefined) {
             return cachedResult;
         }
-        // Update the resolved request signal (triggers pipeline if request changed)
-        const { resolvedRequest, resultValue } = signalPair;
+        // Update the resolved request signal (triggers resource if request changed)
+        const { resolvedRequest, resultResource } = signalPair;
         untracked(() => {
             const current = resolvedRequest();
             if (stableStringify(current) !== requestKey) {
                 resolvedRequest.set(resolved);
             }
         });
-        return resultValue();
+        return resultResource.value();
     };
     cacheService.httpConditionFunctionCache.set(cacheKey, fn);
     return fn;
@@ -8374,10 +9052,11 @@ class AsyncConditionFunctionCacheService {
 /**
  * Creates a logic function for an async condition.
  *
- * Uses a signal-based async resolution pattern: the LogicFn updates a `trigger` signal,
- * a reactive pipeline calls the async function and updates a `resultValue` signal.
- * The LogicFn returns the current `resultValue()`, which starts as `pendingValue` and
- * transitions to the actual async result.
+ * Uses Angular's `rxResource()` API with snapshot composition for async resolution:
+ * the LogicFn updates a `trigger` signal (serialized evaluation context), a debounced
+ * version feeds into an `rxResource()` that manages the async function lifecycle, and
+ * `withPreviousValue()` preserves the last resolved boolean during re-evaluation
+ * to prevent UI flicker.
  *
  * Must be called in injection context (same as `createLogicFunction`).
  */
@@ -8401,33 +9080,53 @@ function createAsyncConditionLogicFunction(condition) {
         const contextKey = safeReadPathKeys(ctx).join('.');
         let signalPair = perFunctionSignalStore.get(contextKey);
         if (!signalPair) {
-            const trigger = signal(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : []));
-            // Wrap in untracked() to avoid NG0602: toObservable() internally calls effect(),
+            const trigger = signal(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+            const ctxByTrigger = new Map();
+            // Wrap in untracked() to avoid NG0602: resource() internally creates effects,
             // which cannot be created inside a reactive context (computed). The LogicFn runs
             // inside Angular Signal Forms' BooleanOrLogic.compute (a computed), so we must
-            // clear the active reactive consumer before creating the observable pipeline.
-            const resultValue = untracked(() => {
-                const pipeline = toObservable(trigger, { injector }).pipe(debounceTime(debounceMs), distinctUntilChanged(), filter((value) => value !== undefined), switchMap$1(() => {
-                    // Look up the async function at call time (fresh reference)
-                    const asyncFn = functionRegistry.getAsyncConditionFunction(condition.asyncFunctionName);
-                    if (!asyncFn) {
-                        logger.warn(`Async Condition - function '${condition.asyncFunctionName}' not found. ` +
-                            `Register it in customFnConfig.asyncConditions.`);
-                        return of(pendingValue);
-                    }
-                    // Build evaluation context from current registry state
-                    const evaluationContext = untracked(() => fieldContextRegistry.createReactiveEvaluationContext(ctx, functionRegistry.getCustomFunctions()));
-                    // concat ensures pendingValue is emitted immediately when a new trigger
-                    // arrives, before the async call resolves. This prevents the signal from
-                    // showing a stale resolved value during re-evaluation.
-                    return concat(of(pendingValue), from(asyncFn(evaluationContext)).pipe(map$1((result) => !!result), catchError((error) => {
-                        logger.warn('Async Condition - function failed:', error);
-                        return of(pendingValue);
-                    })));
-                }));
-                return toSignal(pipeline, { injector, initialValue: pendingValue });
+            // clear the active reactive consumer before creating the resource pipeline.
+            const resultResource = untracked(() => {
+                // Debounce the trigger to batch rapid form value changes.
+                const debouncedTrigger = derivedFromDeferred(trigger, pipe(debounceTime(debounceMs), distinctUntilChanged()), {
+                    initialValue: undefined,
+                    injector,
+                });
+                // rxResource() manages the async function lifecycle natively with Observables:
+                // auto-cancellation via unsubscription and signal-based reactivity.
+                const asyncResource = rxResource({
+                    params: () => debouncedTrigger() ?? undefined,
+                    stream: ({ params: triggerKey }) => {
+                        // Look up the async function at call time (fresh reference)
+                        const asyncFn = functionRegistry.getAsyncConditionFunction(condition.asyncFunctionName);
+                        if (!asyncFn) {
+                            logger.warn(`Async Condition - function '${condition.asyncFunctionName}' not found. ` +
+                                `Register it in customFnConfig.asyncConditions.`);
+                            return of(pendingValue);
+                        }
+                        // Retrieve the FieldContext that was captured when this trigger key was set.
+                        // This avoids a race condition where a mutable ref could be overwritten by
+                        // a later LogicFn call before the loader finishes executing.
+                        const capturedCtx = ctxByTrigger.get(triggerKey);
+                        if (!capturedCtx)
+                            return of(pendingValue);
+                        const evaluationContext = untracked(() => fieldContextRegistry.createReactiveEvaluationContext(capturedCtx, functionRegistry.getCustomFunctions()));
+                        // asyncFn may return Promise<boolean> or Observable<boolean>.
+                        // from() normalizes both to Observable.
+                        return from(asyncFn(evaluationContext)).pipe(map((result) => !!result), catchError((error) => {
+                            logger.warn('Async Condition - function failed:', error);
+                            return of(pendingValue);
+                        }));
+                    },
+                    defaultValue: pendingValue,
+                    injector,
+                });
+                // Snapshot composition: preserve the previous boolean result during re-evaluation.
+                // Without this, the condition would briefly flash to pendingValue when the async
+                // function is re-invoked, causing visible UI flicker.
+                return withPreviousValue(asyncResource);
             });
-            signalPair = { trigger, resultValue };
+            signalPair = { trigger, resultResource, ctxByTrigger };
             perFunctionSignalStore.set(contextKey, signalPair);
         }
         // Build reactive evaluation context (creates signal dependencies on form values)
@@ -8438,15 +9137,18 @@ function createAsyncConditionLogicFunction(condition) {
             fieldValue: evaluationContext.fieldValue,
             externalData: evaluationContext.externalData,
         });
-        // Update the trigger signal (triggers pipeline if context changed)
-        const { trigger: triggerSignal, resultValue } = signalPair;
+        // Capture the FieldContext for this trigger key so the loader can retrieve it.
+        // Only keep the latest — previous entries are stale once the trigger changes.
+        const { trigger: triggerSignal, resultResource, ctxByTrigger } = signalPair;
+        ctxByTrigger.clear();
+        ctxByTrigger.set(contextSnapshot, ctx);
         untracked(() => {
             const current = triggerSignal();
             if (current !== contextSnapshot) {
                 triggerSignal.set(contextSnapshot);
             }
         });
-        return resultValue();
+        return resultResource.value();
     };
     cacheService.asyncConditionFunctionCache.set(cacheKey, fn);
     return fn;
@@ -8574,7 +9276,7 @@ function createDebouncedLogicFunction(expression, debounceMs) {
         let signalPair = cacheService.debouncedSignalStore.get(contextKey);
         if (!signalPair) {
             // Create a signal to hold the immediate evaluation result
-            const immediateValue = signal(false, ...(ngDevMode ? [{ debugName: "immediateValue" }] : []));
+            const immediateValue = signal(false, ...(ngDevMode ? [{ debugName: "immediateValue" }] : /* istanbul ignore next */ []));
             // Wrap in untracked() to avoid NG0602: toObservable() internally calls effect(),
             // which cannot be created inside a reactive context (computed). The LogicFn runs
             // inside Angular Signal Forms' BooleanOrLogic.compute (a computed).
@@ -8758,22 +9460,6 @@ function applyValidator(config, fieldPath) {
         case 'async':
             applyAsyncValidator(config, path);
             break;
-        case 'customAsync': {
-            // TODO(@ng-forge): remove deprecated code in next minor
-            const logger = inject(DynamicFormLogger);
-            const tracker = inject(DEPRECATION_WARNING_TRACKER);
-            warnDeprecated(logger, tracker, 'type:customAsync', "Validator type 'customAsync' is deprecated. Use type: 'async' instead.");
-            applyAsyncValidator(config, path);
-            break;
-        }
-        case 'customHttp': {
-            // TODO(@ng-forge): remove deprecated code in next minor
-            const logger = inject(DynamicFormLogger);
-            const tracker = inject(DEPRECATION_WARNING_TRACKER);
-            warnDeprecated(logger, tracker, 'type:customHttp', "Validator type 'customHttp' is deprecated. Use type: 'http' with functionName instead.");
-            applyFunctionHttpValidator(config, path);
-            break;
-        }
         case 'http':
             applyUnifiedHttpValidator(config, path);
             break;
@@ -8979,8 +9665,8 @@ function getConfigDebounceMs(config) {
     return undefined;
 }
 function applyLogic(config, fieldPath) {
-    // Value derivations and property derivations are handled by their respective orchestrators — skip them.
-    if (isDerivationLogicConfig(config) || isPropertyDerivationLogicConfig(config))
+    // Value derivations (including property derivations via targetProperty) are handled by their orchestrators — skip them.
+    if (isDerivationLogicConfig(config))
         return;
     // Guard against unrecognized logic types that may be added in the future.
     if (!isStateLogicConfig(config)) {
@@ -9017,6 +9703,10 @@ function applyLogicFn(type, path, logicFn) {
         case 'required':
             required(path, { when: logicFn });
             break;
+        default: {
+            const _exhaustive = type;
+            throw new DynamicFormError(`Unhandled state logic type: ${_exhaustive}`);
+        }
     }
 }
 function applyMultipleLogic(configs, fieldPath) {
@@ -9027,7 +9717,7 @@ function applyMultipleLogic(configs, fieldPath) {
  * Create a type predicate function from a predicate string.
  *
  * Uses the secure ExpressionParser with whitelist-based evaluation instead of
- * new Function() / eval. This provides security through:
+ * dynamic code execution. This provides security through:
  * - AST-based parsing (no code execution)
  * - Whitelisted operators only
  * - Whitelisted methods only (Array.isArray, typeof, instanceof, etc.)
@@ -9206,8 +9896,8 @@ function getNumberValidationConfig(fieldDef) {
  * Cross-field validators are skipped at field level and applied at form level via validateTree.
  */
 function mapFieldToForm(fieldDef, fieldPath) {
-    // Layout containers (page, row) - flatten children to current level
-    if (isPageField(fieldDef) || isRowField(fieldDef)) {
+    // Layout containers (page, row, container) - flatten children to current level
+    if (isPageField(fieldDef) || isRowField(fieldDef) || isContainerTypedField(fieldDef)) {
         mapContainerChildren(fieldDef.fields, fieldPath);
         return;
     }
@@ -9364,8 +10054,8 @@ function mapArrayFieldToForm(arrayField, fieldPath) {
         const pathRecord = itemPath;
         // Map ALL unique template fields from all object items
         for (const templateField of allObjectFields) {
-            if (isRowField(templateField) || isPageField(templateField)) {
-                // Row/page templates flatten their children
+            if (isRowField(templateField) || isPageField(templateField) || isContainerTypedField(templateField)) {
+                // Row/page/container templates flatten their children
                 mapContainerChildren(templateField.fields, itemPath);
             }
             else if (isGroupField(templateField)) {
@@ -9404,8 +10094,8 @@ function mapArrayFieldToForm(arrayField, fieldPath) {
 function collectFieldsFromObjectItem(itemFields, allFields) {
     const seenKeys = new Set(allFields.map((f) => f.key).filter(Boolean));
     for (const field of itemFields) {
-        // For row/page fields, we need to collect their children's keys
-        if (isRowField(field) || isPageField(field)) {
+        // For row/page/container fields, we need to collect their children's keys
+        if (isRowField(field) || isPageField(field) || isContainerTypedField(field)) {
             // Use a synthetic key for container fields to dedupe them
             const containerKey = `__container_${field.type}_${JSON.stringify(field.fields?.map((f) => f.key))}`;
             if (!seenKeys.has(containerKey)) {
@@ -9536,17 +10226,24 @@ function getFieldDefaultValue(field, registry) {
         }
         return groupDefaults;
     }
-    // Use explicit value if provided, with type-specific handling for null
+    // Narrow once: `field` is FieldDef<unknown>, but value/nullable are defined on BaseValueField.
+    // This cast avoids per-access `as` and documents what we're reading.
+    const valueField = field;
+    const isNullable = valueField.nullable === true;
+    // Use explicit value if provided (including null when nullable)
     if ('value' in field) {
-        // If value is explicitly set (even to null/undefined), respect it
-        if (field.value !== null && field.value !== undefined) {
-            return field.value;
+        if (valueField.value !== null && valueField.value !== undefined) {
+            return valueField.value;
         }
-        // Handle explicit null: use type-specific default
-        if (field.value === null) {
-            return field.type === 'checkbox' ? false : '';
+        // Preserve explicit null for nullable fields
+        if (valueField.value === null && isNullable) {
+            return null;
         }
-        // Handle explicit undefined: fall through to type-specific defaults
+        // Non-nullable null and undefined both fall through to type-specific defaults below
+    }
+    // Nullable fields with no explicit value default to null
+    if (isNullable) {
+        return null;
     }
     // Type-specific defaults when no value is specified
     if (field.type === 'checkbox') {
@@ -9578,8 +10275,8 @@ function getFieldDefaultValue(field, registry) {
                     // Groups wrap their value under the group key
                     itemValue[templateField.key] = fieldValue;
                 }
-                else if (templateField.type === 'row') {
-                    // Rows flatten their fields directly
+                else if (templateField.type === 'row' || templateField.type === 'container') {
+                    // Rows and containers flatten their fields directly
                     if (fieldValue && typeof fieldValue === 'object') {
                         itemValue = { ...itemValue, ...fieldValue };
                     }
@@ -10268,18 +10965,20 @@ function flattenFields(fields, registry, options = {}) {
         // Step 1: Determine how this field type should handle its value in the form
         // valueHandling can be: 'include', 'exclude', or 'flatten'
         const valueHandling = getFieldValueHandling(field.type, registry);
-        // Step 2: Check if this is a row field that should be preserved for DOM rendering
+        // Step 2: Check if this is a row or container field that should be preserved for DOM rendering
         // Row fields need to render their container element for grid layouts to work
-        if (options.preserveRows && isRowField(field)) {
+        // Container fields need to render their container for the wrapper chain
+        if (options.preserveRows && (isRowField(field) || isContainerTypedField(field))) {
             if (field.fields) {
                 // Recursively flatten children while preserving row structure
                 const flattenedChildren = flattenFields(normalizeFieldsArray(field.fields), registry, options);
-                // Keep the row field in the result with its flattened children
-                // This allows the row component to render its container while children are flattened
+                // Keep the row/container field in the result with its flattened children
+                // This allows the container component to render while children are flattened
+                const autoPrefix = isRowField(field) ? 'auto_row' : 'auto_container';
                 result.push({
                     ...field,
                     fields: flattenedChildren,
-                    key: field.key || `auto_row_${autoKeyCounter++}`,
+                    key: field.key || `${autoPrefix}_${autoKeyCounter++}`,
                 });
             }
         }
@@ -10353,17 +11052,25 @@ function flattenFields(fields, registry, options = {}) {
  * @returns Object containing memoized processing functions
  */
 function createContainerFieldProcessors() {
+    const createFieldsResolver = (preserveRows = false) => (fields, registry) => {
+        let key = '';
+        for (const f of fields) {
+            key += (f.key ?? '') + ':' + (f.type ?? '') + '|';
+        }
+        return key + registry.size + '|' + preserveRows;
+    };
     const memoizedFlattenFields = memoize((fields, registry) => flattenFields([...fields], registry), {
         // registry.size is a valid cache key proxy because the field registry is populated
         // once at bootstrap and never mutated at runtime. If the registry were mutable,
         // we would need a content-based hash instead.
-        resolver: (fields, registry) => {
-            let key = '';
-            for (const f of fields) {
-                key += (f.key ?? '') + ':' + (f.type ?? '') + '|';
-            }
-            return key + registry.size;
-        },
+        resolver: createFieldsResolver(),
+        maxSize: 10,
+    });
+    const memoizedFlattenFieldsForRendering = memoize((fields, registry) => flattenFields([...fields], registry, { preserveRows: true }), {
+        // registry.size is a valid cache key proxy because the field registry is populated
+        // once at bootstrap and never mutated at runtime. If the registry were mutable,
+        // we would need a content-based hash instead.
+        resolver: createFieldsResolver(true),
         maxSize: 10,
     });
     const memoizedKeyBy = memoize((fields) => keyBy(fields, 'key'), {
@@ -10385,7 +11092,7 @@ function createContainerFieldProcessors() {
         },
         maxSize: 10,
     });
-    return { memoizedFlattenFields, memoizedKeyBy, memoizedDefaultValues };
+    return { memoizedFlattenFields, memoizedFlattenFieldsForRendering, memoizedKeyBy, memoizedDefaultValues };
 }
 /**
  * Shared container field processors injection token.
@@ -10407,50 +11114,6 @@ const CONTAINER_FIELD_PROCESSORS = new InjectionToken('CONTAINER_FIELD_PROCESSOR
     factory: () => createContainerFieldProcessors(),
 });
 
-/**
- * Type guard to check if a value is an array of Signals.
- * @internal
- */
-function isSignalArray(value) {
-    return Array.isArray(value) && value.every((item) => isSignal(item));
-}
-/**
- * Type guard to check if a value is a record (object) of Signals.
- * @internal
- */
-function isSignalRecord(value) {
-    return typeof value === 'object' && value !== null && !Array.isArray(value) && Object.values(value).every((item) => isSignal(item));
-}
-// Implementation
-function derivedFromDeferred(source, operator, options) {
-    const deferred$ = defer(() => {
-        // Handle single signal
-        if (isSignal(source)) {
-            return toObservable(source, { injector: options.injector });
-        }
-        // Handle array of signals
-        if (isSignalArray(source)) {
-            const observables = source.map((s) => toObservable(s, { injector: options.injector }));
-            return combineLatest(observables);
-        }
-        // Handle object of signals
-        if (isSignalRecord(source)) {
-            const keys = Object.keys(source);
-            const observables = keys.map((key) => toObservable(source[key], { injector: options.injector }));
-            return combineLatest(observables, (...values) => {
-                const result = {};
-                keys.forEach((key, index) => {
-                    result[key] = values[index];
-                });
-                return result;
-            });
-        }
-        // Fallback - should not happen with proper typing
-        throw new Error('Invalid source type. Expected a Signal, array of Signals, or object of Signals.');
-    }).pipe(operator);
-    return toSignal(deferred$, { initialValue: options.initialValue, injector: options.injector });
-}
-
 /**
  * Generates CSS class string for responsive grid layout based on field column configuration.
  *
@@ -10887,6 +11550,17 @@ function mapFieldToInputs(fieldDef, fieldRegistry) {
     });
 }
 
+function createRenderReadySignal(inputs, definition) {
+    const explicitRenderReadyWhen = definition?.renderReadyWhen;
+    const requiredInputs = definition?.mapper && explicitRenderReadyWhen === undefined ? ['field'] : (explicitRenderReadyWhen ?? []);
+    if (requiredInputs.length === 0) {
+        return computed(() => true);
+    }
+    return computed(() => {
+        const currentInputs = inputs();
+        return requiredInputs.every((inputName) => currentInputs[inputName] !== undefined);
+    });
+}
 /**
  * Resolves a single field definition to a ResolvedField using RxJS.
  * Loads the component asynchronously and maps inputs in the injection context.
@@ -10900,7 +11574,7 @@ function mapFieldToInputs(fieldDef, fieldRegistry) {
  * @returns Observable that emits ResolvedField or undefined (for componentless fields or on error)
  */
 function resolveField(fieldDef, context) {
-    return from(context.loadTypeComponent(fieldDef.type)).pipe(map$1((component) => {
+    return from(context.loadTypeComponent(fieldDef.type)).pipe(map((component) => {
         // Check if component is destroyed before proceeding
         if (context.destroyRef.destroyed) {
             return undefined;
@@ -10911,15 +11585,18 @@ function resolveField(fieldDef, context) {
         }
         // Run mapper in injection context
         const inputs = runInInjectionContext(context.injector, () => mapFieldToInputs(fieldDef, context.registry));
+        const definition = context.registry.get(fieldDef.type);
         // Fields with components should always have inputs (componentless fields are handled above)
         if (!inputs) {
             return undefined;
         }
         return {
             key: fieldDef.key,
+            fieldDef,
             component,
             injector: context.injector,
             inputs,
+            renderReady: createRenderReadySignal(inputs, definition),
         };
     }), catchError((error) => {
         // Only call onError if component is not destroyed to avoid accessing cleaned-up state
@@ -10945,14 +11622,17 @@ function resolveFieldSync(fieldDef, context) {
         return undefined;
     }
     const inputs = runInInjectionContext(context.injector, () => mapFieldToInputs(fieldDef, context.registry));
+    const definition = context.registry.get(fieldDef.type);
     if (!inputs) {
         return undefined;
     }
     return {
         key: fieldDef.key,
+        fieldDef,
         component,
         injector: context.injector,
         inputs,
+        renderReady: createRenderReadySignal(inputs, definition),
     };
 }
 /**
@@ -10980,13 +11660,13 @@ function reconcileFields(prev, curr) {
  * Used by container components (page, group) to resolve their child fields.
  */
 function createFieldResolutionPipe(getContext) {
-    return pipe(switchMap$1((fields) => {
+    return pipe(switchMap((fields) => {
         if (!fields || fields.length === 0) {
             return of([]);
         }
         const context = getContext();
         return forkJoin(fields.map((f) => resolveField(f, context)));
-    }), map$1((fields) => fields.filter((f) => f !== undefined)), scan$1(reconcileFields, []));
+    }), map((fields) => fields.filter((f) => f !== undefined)), scan$1(reconcileFields, []));
 }
 
 /**
@@ -11251,13 +11931,8 @@ function injectFieldRegistry() {
             if (cached) {
                 return cached;
             }
-            // Handle async loading
             try {
-                const result = await fieldType.loadComponent();
-                // Handle ES module imports - extract default export if needed
-                const moduleResult = result;
-                const component = (typeof moduleResult === 'object' && 'default' in moduleResult && moduleResult.default) || result;
-                // Populate cache for future sync lookups
+                const component = resolveDefaultExport(await fieldType.loadComponent());
                 if (component) {
                     componentCache.set(name, component);
                 }
@@ -11802,7 +12477,7 @@ class FormStateMachine {
     }
     constructor(config) {
         this.config = config;
-        this._state = signal(createUninitializedState(), ...(ngDevMode ? [{ debugName: "_state" }] : []));
+        this._state = signal(createUninitializedState(), ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
         this.state = this._state.asReadonly();
         this.state$ = toObservable(this._state, { injector: config.injector });
         this.setupActionProcessing();
@@ -12076,7 +12751,6 @@ class FormStateManager {
     injector = inject(Injector);
     destroyRef = inject(DestroyRef);
     logger = inject(DynamicFormLogger);
-    deprecationTracker = inject(DEPRECATION_WARNING_TRACKER, { optional: true });
     eventBus = inject(EventBus);
     functionRegistry = inject(FunctionRegistryService);
     schemaRegistry = inject(SchemaRegistryService);
@@ -12102,27 +12776,14 @@ class FormStateManager {
     // ─────────────────────────────────────────────────────────────────────────────
     // Memoized Functions
     // ─────────────────────────────────────────────────────────────────────────────
-    fieldProcessors = inject(CONTAINER_FIELD_PROCESSORS);
-    memoizedFlattenFieldsForRendering = memoize((fields, registry) => flattenFields(fields, registry, { preserveRows: true }), {
-        // registry.size is a valid cache key proxy because the field registry is populated
-        // once at bootstrap and never mutated at runtime. If the registry were mutable,
-        // we would need a content-based hash instead.
-        resolver: (fields, registry) => {
-            let key = '';
-            for (const f of fields) {
-                key += (f.key ?? '') + ':' + (f.type ?? '') + '|';
-            }
-            return key + registry.size;
-        },
-        maxSize: 10,
-    });
-    // ─────────────────────────────────────────────────────────────────────────────
+    fieldProcessors = inject(CONTAINER_FIELD_PROCESSORS);
+    // ─────────────────────────────────────────────────────────────────────────────
     // Internal State Signals
     // ─────────────────────────────────────────────────────────────────────────────
     /**
      * Field loading errors accumulated during resolution.
      */
-    fieldLoadingErrors = signal([], ...(ngDevMode ? [{ debugName: "fieldLoadingErrors" }] : []));
+    fieldLoadingErrors = signal([], ...(ngDevMode ? [{ debugName: "fieldLoadingErrors" }] : /* istanbul ignore next */ []));
     /**
      * Class-level form cache for the "hold until settled" pattern.
      * MUST be class-level — a local variable in the computed would reset on re-evaluation.
@@ -12153,7 +12814,7 @@ class FormStateManager {
         if (state.type === LifecycleState.Initializing)
             return state.config;
         return undefined;
-    }, ...(ngDevMode ? [{ debugName: "activeConfig" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "activeConfig" }] : /* istanbul ignore next */ []));
     /**
      * Current render phase: 'render' = showing form, 'teardown' = hiding old components.
      */
@@ -12162,9 +12823,9 @@ class FormStateManager {
         if (isTransitioningState(state) && state.phase === Phase.Teardown)
             return Phase.Teardown;
         return 'render';
-    }, ...(ngDevMode ? [{ debugName: "renderPhase" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "renderPhase" }] : /* istanbul ignore next */ []));
     /** Whether to render the form template. */
-    shouldRender = computed(() => this.activeConfig() !== undefined, ...(ngDevMode ? [{ debugName: "shouldRender" }] : []));
+    shouldRender = computed(() => this.activeConfig() !== undefined, ...(ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []));
     /**
      * Computed form mode detection with validation.
      */
@@ -12174,14 +12835,14 @@ class FormStateManager {
             return { mode: 'non-paged', isValid: true, errors: [] };
         }
         return detectFormMode(config.fields || []);
-    }, ...(ngDevMode ? [{ debugName: "formModeDetection" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "formModeDetection" }] : /* istanbul ignore next */ []));
     /** Validation result for the current form configuration. */
     formConfigValidation = computed(() => {
         const config = this.activeConfig();
         if (!config)
             return { isValid: true, errors: [], warnings: [] };
         return FormModeValidator.validateFormConfiguration(config.fields || []);
-    }, ...(ngDevMode ? [{ debugName: "formConfigValidation" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "formConfigValidation" }] : /* istanbul ignore next */ []));
     /**
      * Effective form options (merged from config and input).
      */
@@ -12190,7 +12851,7 @@ class FormStateManager {
         const configOptions = config?.options || {};
         const inputOptions = this.deps.formOptions() ?? undefined;
         return { ...configOptions, ...inputOptions };
-    }, ...(ngDevMode ? [{ debugName: "effectiveFormOptions" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "effectiveFormOptions" }] : /* istanbul ignore next */ []));
     /**
      * Page field definitions (for paged forms).
      */
@@ -12201,11 +12862,11 @@ class FormStateManager {
             return config.fields.filter(isPageField);
         }
         return [];
-    }, ...(ngDevMode ? [{ debugName: "pageFieldDefinitions" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "pageFieldDefinitions" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Computed Signals - Form Setup
     // ─────────────────────────────────────────────────────────────────────────────
-    rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : []));
+    rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : /* istanbul ignore next */ []));
     /** Computed form setup — reads from the state machine, computed from config on bootstrap. */
     formSetup = computed(() => {
         const registry = this.rawFieldRegistry();
@@ -12236,18 +12897,18 @@ class FormStateManager {
             return this.createFormSetupFromConfig(config.fields, modeDetection.mode, registry);
         }
         return this.createEmptyFormSetup(registry);
-    }, ...(ngDevMode ? [{ debugName: "formSetup" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "formSetup" }] : /* istanbul ignore next */ []));
     /**
      * Default values computed from field definitions.
      */
-    defaultValues = linkedSignal(() => this.formSetup().defaultValues, ...(ngDevMode ? [{ debugName: "defaultValues" }] : []));
+    defaultValues = linkedSignal(() => this.formSetup().defaultValues, ...(ngDevMode ? [{ debugName: "defaultValues" }] : /* istanbul ignore next */ []));
     /** Valid field keys — memoized separately so the Set isn't rebuilt on every keystroke. */
     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));
-    }, ...(ngDevMode ? [{ debugName: "validKeys" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "validKeys" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Computed Signals - Entity & Form
     // ─────────────────────────────────────────────────────────────────────────────
@@ -12307,7 +12968,7 @@ class FormStateManager {
             return createFormLevelSchema(config.schema);
         }
         return undefined;
-    }), ...(ngDevMode ? [{ debugName: "formSchema" }] : []));
+    }), ...(ngDevMode ? [{ debugName: "formSchema" }] : /* istanbul ignore next */ []));
     /**
      * The Angular Signal Form instance.
      */
@@ -12315,7 +12976,7 @@ class FormStateManager {
         const schema = this.formSchema();
         const injector = this.injector;
         return untracked(() => (schema ? form(this.entity, schema, { injector }) : form(this.entity, { injector })));
-    }, ...(ngDevMode ? [{ debugName: "form" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
     /** Whether resolvedFields has caught up with fieldsSource (set in constructor). */
     isFieldPipelineSettled;
     /**
@@ -12342,14 +13003,14 @@ class FormStateManager {
                 return currentForm;
             },
         };
-    }, ...(ngDevMode ? [{ debugName: "fieldSignalContext" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "fieldSignalContext" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Computed Signals - Form State
     // ─────────────────────────────────────────────────────────────────────────────
     /** Intermediate computed that unwraps the double-signal (form()()) once. */
-    formInstance = computed(() => this.form()(), ...(ngDevMode ? [{ debugName: "formInstance" }] : []));
+    formInstance = computed(() => this.form()(), ...(ngDevMode ? [{ debugName: "formInstance" }] : /* istanbul ignore next */ []));
     /** Current form values (reactive). */
-    formValue = computed(() => this.formInstance().value(), ...(ngDevMode ? [{ debugName: "formValue" }] : []));
+    formValue = computed(() => this.formInstance().value(), ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
     /**
      * Form values filtered by value exclusion rules.
      *
@@ -12379,25 +13040,25 @@ class FormStateManager {
         // FieldTree doesn't expose this index signature, so we use a helper cast.
         const fieldTreeRecord = asFieldTreeRecord(formTree);
         return filterFormValue(rawValue, setup.schemaFields, fieldTreeRecord, setup.registry, this.valueExclusionDefaults, formOptions);
-    }, ...(ngDevMode ? [{ debugName: "filteredFormValue" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "filteredFormValue" }] : /* istanbul ignore next */ []));
     /** Whether the form is currently valid. */
-    valid = computed(() => this.formInstance().valid(), ...(ngDevMode ? [{ debugName: "valid" }] : []));
+    valid = computed(() => this.formInstance().valid(), ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
     /** Whether the form is currently invalid. */
-    invalid = computed(() => this.formInstance().invalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    invalid = computed(() => this.formInstance().invalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
     /** Whether any form field has been modified. */
-    dirty = computed(() => this.formInstance().dirty(), ...(ngDevMode ? [{ debugName: "dirty" }] : []));
+    dirty = computed(() => this.formInstance().dirty(), ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
     /** Whether any form field has been touched (blurred). */
-    touched = computed(() => this.formInstance().touched(), ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    touched = computed(() => this.formInstance().touched(), ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     /** Current validation errors from all fields. */
-    errors = computed(() => this.formInstance().errors(), ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    errors = computed(() => this.formInstance().errors(), ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
     /** Whether the form is disabled (from options or form state). */
     disabled = computed(() => {
         const optionsDisabled = this.effectiveFormOptions().disabled;
         const formDisabled = this.formInstance().disabled();
         return optionsDisabled ?? formDisabled;
-    }, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** Whether the form is currently submitting. */
-    submitting = computed(() => this.formInstance().submitting(), ...(ngDevMode ? [{ debugName: "submitting" }] : []));
+    submitting = computed(() => this.formInstance().submitting(), ...(ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Field Resolution
     // ─────────────────────────────────────────────────────────────────────────────
@@ -12420,7 +13081,7 @@ class FormStateManager {
             }
         }
         return this.formSetup().fields;
-    }, { ...(ngDevMode ? { debugName: "fieldsSource" } : {}), equal: (a, b) => {
+    }, { ...(ngDevMode ? { debugName: "fieldsSource" } : /* istanbul ignore next */ {}), equal: (a, b) => {
             if (a === b)
                 return true;
             if (a.length !== b.length)
@@ -12439,7 +13100,7 @@ class FormStateManager {
     fieldInjector = computed(() => Injector.create({
         parent: this.injector,
         providers: [{ provide: FIELD_SIGNAL_CONTEXT, useValue: this.fieldSignalContext() }],
-    }), ...(ngDevMode ? [{ debugName: "fieldInjector" }] : []));
+    }), ...(ngDevMode ? [{ debugName: "fieldInjector" }] : /* istanbul ignore next */ []));
     /** Resolved fields ready for rendering. */
     resolvedFields;
     // ─────────────────────────────────────────────────────────────────────────────
@@ -12453,13 +13114,13 @@ class FormStateManager {
     cleared$;
     /** Emits once when the state machine reaches 'ready'. Useful for tests. */
     get ready$() {
-        return this.machine.state$.pipe(filter(isReadyState), take$1(1), map$1(() => undefined));
+        return this.machine.state$.pipe(filter(isReadyState), take$1(1), map(() => undefined));
     }
     // ─────────────────────────────────────────────────────────────────────────────
     // Constructor
     // ─────────────────────────────────────────────────────────────────────────────
     constructor() {
-        this.resolvedFields = derivedFromDeferred(this.fieldsSource, pipe(switchMap$1((fields) => {
+        this.resolvedFields = derivedFromDeferred(this.fieldsSource, pipe(switchMap((fields) => {
             if (!fields || fields.length === 0) {
                 return of([]);
             }
@@ -12508,18 +13169,18 @@ class FormStateManager {
             if (asyncObs.length === 0) {
                 return of(results);
             }
-            return forkJoin(asyncObs).pipe(map$1((asyncResults) => {
+            return forkJoin(asyncObs).pipe(map((asyncResults) => {
                 for (let j = 0; j < asyncResults.length; j++) {
                     results[asyncIndexes[j]] = asyncResults[j];
                 }
                 return results;
             }));
-        }), map$1((fields) => fields.filter((f) => f !== undefined)), scan$1(reconcileFields, [])), { initialValue: [], injector: this.injector });
+        }), map((fields) => fields.filter((f) => f !== undefined)), scan$1(reconcileFields, [])), { initialValue: [], injector: this.injector });
         // Length comparison works because reconcileFields preserves ordering and
         // fieldsSource changes atomically during transitions (lengths won't match until settled).
         this.isFieldPipelineSettled = computed(() => {
             return this.fieldsSource().length === this.resolvedFields().length;
-        }, ...(ngDevMode ? [{ debugName: "isFieldPipelineSettled" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "isFieldPipelineSettled" }] : /* istanbul ignore next */ []));
         this.submitted$ = this.eventBus.on('submit').pipe(filter(() => {
             if (!this.valid()) {
                 this.logger.debug('Form submitted while invalid, not emitting to (submitted) output');
@@ -12529,7 +13190,7 @@ class FormStateManager {
         }), 
         // switchMap is intentional here: mapping is synchronous (reads signals, no async Promise).
         // The exhaustMap concern in createSubmissionHandler does not apply to this path.
-        switchMap$1(() => {
+        switchMap(() => {
             const config = this.activeConfig();
             const submissionConfig = config?.submission;
             if (submissionConfig?.action) {
@@ -12540,8 +13201,8 @@ class FormStateManager {
             }
             return of(this.filteredFormValue());
         }), takeUntilDestroyed(this.destroyRef));
-        this.reset$ = this.eventBus.on('form-reset').pipe(map$1(() => undefined), takeUntilDestroyed(this.destroyRef));
-        this.cleared$ = this.eventBus.on('form-clear').pipe(map$1(() => undefined), 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));
         // Create the state machine eagerly
         this.machine = createFormStateMachine({
             injector: this.injector,
@@ -12667,13 +13328,6 @@ class FormStateManager {
         if (customFnConfig.derivations) {
             this.functionRegistry.setDerivationFunctions(customFnConfig.derivations);
         }
-        // TODO(@ng-forge): remove deprecated code in next minor
-        if (customFnConfig.propertyDerivations) {
-            if (this.deprecationTracker) {
-                warnDeprecated(this.logger, this.deprecationTracker, 'customFnConfig:propertyDerivations', "customFnConfig.propertyDerivations is deprecated. Register functions under 'derivations' instead and use type: 'derivation' with targetProperty.");
-            }
-            this.functionRegistry.setPropertyDerivationFunctions(customFnConfig.propertyDerivations);
-        }
         if (customFnConfig.asyncDerivations) {
             this.functionRegistry.setAsyncDerivationFunctions(customFnConfig.asyncDerivations);
         }
@@ -12682,10 +13336,6 @@ class FormStateManager {
         }
         this.functionRegistry.setValidators(customFnConfig.validators);
         this.functionRegistry.setAsyncValidators(customFnConfig.asyncValidators);
-        // TODO(@ng-forge): remove deprecated code in next minor
-        if (customFnConfig.httpValidators && this.deprecationTracker) {
-            warnDeprecated(this.logger, this.deprecationTracker, 'customFnConfig:httpValidators', "customFnConfig.httpValidators registration path is deprecated. Use type: 'http' with functionName (for function-based) or http + responseMapping (for declarative).");
-        }
         this.functionRegistry.setHttpValidators(customFnConfig.httpValidators);
     }
     createFormSetupFromConfig(fields, mode, registry) {
@@ -12694,7 +13344,7 @@ class FormStateManager {
         // into full ArrayField.fields and are reachable during traversal.
         validateFormConfig(normalizedFields, registry, this.logger);
         const flattenedFields = this.fieldProcessors.memoizedFlattenFields(normalizedFields, registry);
-        const flattenedFieldsForRendering = this.memoizedFlattenFieldsForRendering(normalizedFields, registry);
+        const flattenedFieldsForRendering = this.fieldProcessors.memoizedFlattenFieldsForRendering(normalizedFields, registry);
         const fieldsById = this.fieldProcessors.memoizedKeyBy(flattenedFields);
         const defaultValues = this.fieldProcessors.memoizedDefaultValues(fieldsById, registry);
         const fieldsToRender = mode === 'paged' ? [] : flattenedFieldsForRendering;
@@ -12722,10 +13372,10 @@ class FormStateManager {
     ngOnDestroy() {
         this.machine.dispatch({ type: Action.Destroy });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormStateManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormStateManager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormStateManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormStateManager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormStateManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormStateManager, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -12996,6 +13646,11 @@ function provideDynamicFormDI() {
             useFactory: (stateManager) => computed(() => stateManager.activeConfig()?.defaultProps),
             deps: [FormStateManager],
         },
+        {
+            provide: DEFAULT_WRAPPERS,
+            useFactory: (stateManager) => computed(() => stateManager.activeConfig()?.defaultWrappers),
+            deps: [FormStateManager],
+        },
         {
             provide: DEFAULT_VALIDATION_MESSAGES,
             useFactory: (stateManager) => computed(() => stateManager.activeConfig()?.defaultValidationMessages),
@@ -13126,10 +13781,10 @@ class EventDispatcher {
     disconnect() {
         this.bus = undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EventDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EventDispatcher });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EventDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EventDispatcher });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EventDispatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EventDispatcher, decorators: [{
             type: Injectable
         }] });
 
@@ -13147,16 +13802,17 @@ class DynamicForm {
     // Inputs (must be declared BEFORE deps connection and stateManager injection)
     // ─────────────────────────────────────────────────────────────────────────────
     /** Form configuration defining the structure, validation, and behavior. */
-    config = input.required({ ...(ngDevMode ? { debugName: "config" } : {}), alias: 'dynamic-form' });
+    config = input.required({ ...(ngDevMode ? { debugName: "config" } : /* istanbul ignore next */ {}), alias: 'dynamic-form' });
     /** Runtime form options that override config options when provided. */
-    formOptions = input(undefined, ...(ngDevMode ? [{ debugName: "formOptions" }] : []));
+    formOptions = input(undefined, ...(ngDevMode ? [{ debugName: "formOptions" }] : /* istanbul ignore next */ []));
     /** Form values for two-way data binding. */
-    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Dependencies
     // ─────────────────────────────────────────────────────────────────────────────
     destroyRef = inject(DestroyRef);
     injector = inject(Injector);
+    environmentInjector = inject(EnvironmentInjector);
     eventBus = inject(EventBus);
     logger = inject(DynamicFormLogger);
     dispatcher = inject(EventDispatcher, { optional: true });
@@ -13221,7 +13877,7 @@ class DynamicForm {
     totalComponentsCount = computed(() => {
         const fields = this.stateManager.formSetup()?.fields ?? [];
         return countContainersRecursive(fields) + 1;
-    }, ...(ngDevMode ? [{ debugName: "totalComponentsCount" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "totalComponentsCount" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Initialization
     // ─────────────────────────────────────────────────────────────────────────────
@@ -13338,28 +13994,40 @@ class DynamicForm {
             error: (err) => this.logger.error('Submission handler error', err),
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 } }, 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" }, classAttribute: "df-dynamic-form df-form" }, providers: [provideDynamicFormDI()], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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 } }, 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" }, classAttribute: "df-dynamic-form df-form" }, providers: [provideDynamicFormDI()], ngImport: i0, template: `
     @if (shouldRender()) {
-      @if (formModeDetection().mode === 'paged') {
-        <div page-orchestrator [pageFields]="pageFieldDefinitions()" [form]="form()" [fieldSignalContext]="fieldSignalContext()"></div>
-      } @else {
-        @for (field of resolvedFields(); track field.key) {
-          <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
+      @switch (formModeDetection().mode) {
+        @case ('paged') {
+          <div page-orchestrator [pageFields]="pageFieldDefinitions()" [form]="form()" [fieldSignalContext]="fieldSignalContext()"></div>
+        }
+        @case ('non-paged') {
+          @for (field of resolvedFields(); track field.key) {
+            <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+          }
+        }
+        @default {
+          never;
         }
       }
     }
-  `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);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);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);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.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),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);--df-grid-row-gap: var(--df-grid-row-gap-md)}.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);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.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);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.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);width:100%}:host>*{grid-column:1/-1}:host.df-form-spacing-custom{--df-grid-row-gap: var(--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{--df-grid-row-gap: 0}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: PageOrchestratorComponent, selector: "div[page-orchestrator]", inputs: ["pageFields", "form", "fieldSignalContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);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);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);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.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),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);--df-grid-row-gap: var(--df-grid-row-gap-md)}.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);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.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);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.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);width:100%}:host>*{grid-column:1/-1}:host.df-form-spacing-custom{--df-grid-row-gap: var(--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{--df-grid-row-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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DynamicForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicForm, decorators: [{
             type: Component,
-            args: [{ selector: 'form[dynamic-form]', imports: [NgComponentOutlet, PageOrchestratorComponent], template: `
+            args: [{ selector: 'form[dynamic-form]', imports: [DfFieldOutlet, PageOrchestratorComponent], template: `
     @if (shouldRender()) {
-      @if (formModeDetection().mode === 'paged') {
-        <div page-orchestrator [pageFields]="pageFieldDefinitions()" [form]="form()" [fieldSignalContext]="fieldSignalContext()"></div>
-      } @else {
-        @for (field of resolvedFields(); track field.key) {
-          <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
+      @switch (formModeDetection().mode) {
+        @case ('paged') {
+          <div page-orchestrator [pageFields]="pageFieldDefinitions()" [form]="form()" [fieldSignalContext]="fieldSignalContext()"></div>
+        }
+        @case ('non-paged') {
+          @for (field of resolvedFields(); track field.key) {
+            <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+          }
+        }
+        @default {
+          never;
         }
       }
     }
@@ -13374,7 +14042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);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);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);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.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),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);--df-grid-row-gap: var(--df-grid-row-gap-md)}.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);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.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);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.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);width:100%}:host>*{grid-column:1/-1}:host.df-form-spacing-custom{--df-grid-row-gap: var(--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{--df-grid-row-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"] }], 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"] }] } });
 /**
- * Recursively counts container fields (page, row, group, array) in a field tree.
+ * Recursively counts container fields (page, row, group, array, wrapper) in a field tree.
  * Descends into container children including array item templates to ensure
  * nested containers are counted for accurate initialization tracking.
  */
@@ -13791,24 +14459,28 @@ function groupFieldMapper(fieldDef) {
     });
 }
 
+const ROW_WRAPPERS = [{ type: 'row' }];
 /**
- * Maps a row field definition to component inputs.
+ * Maps a row field definition to container component inputs.
  *
- * Row components are layout containers that don't change the form shape.
- * The row component will inject FIELD_SIGNAL_CONTEXT directly.
+ * `row` is a virtual field type: it resolves to `ContainerFieldComponent` with a
+ * synthesized `{ type: 'row' }` wrapper, so the user-facing config stays
+ * `{ type: 'row', fields: [...] }` while the runtime uses the container +
+ * wrapper pipeline.
  *
  * Supports hidden state resolution via `logic` array or static `hidden` property.
- *
- * @param fieldDef The row field definition
- * @returns Signal containing Record of input names to values for ngComponentOutlet
  */
 function rowFieldMapper(fieldDef) {
     const rootFormRegistry = inject(RootFormRegistryService);
     const className = buildClassName(fieldDef);
     return computed(() => {
+        // Rebuilt each emission so logic-driven updates to fieldDef (e.g. `disabled`)
+        // flow through. Shallow spread is safe while RowField has no nested
+        // mutable props; add a deep-clone if that stops being true.
+        const containerField = { ...fieldDef, wrappers: ROW_WRAPPERS };
         const inputs = {
             key: fieldDef.key,
-            field: fieldDef,
+            field: containerField,
             ...(className !== undefined && { className }),
         };
         applyHiddenLogic(inputs, fieldDef, rootFormRegistry);
@@ -13867,6 +14539,38 @@ function textFieldMapper(fieldDef) {
     });
 }
 
+/**
+ * Maps a container field definition to component inputs.
+ *
+ * Container components are layout containers that don't change the form shape.
+ * The container component will inject FIELD_SIGNAL_CONTEXT directly.
+ *
+ * Supports hidden state resolution via `logic` array or static `hidden` property.
+ *
+ * @param fieldDef The container field definition
+ * @returns Signal containing Record of input names to values for ngComponentOutlet
+ */
+function containerFieldMapper(fieldDef) {
+    const rootFormRegistry = inject(RootFormRegistryService);
+    const className = buildClassName(fieldDef);
+    return computed(() => {
+        // Nullify wrapper-related props on the field passed to the container
+        // component — DfFieldOutlet handles field-level wrappers at the outlet
+        // level. Passing them here would cause double-wrapping since the
+        // container's internal wrapper chain also resolves from `this.field()`.
+        // We set wrappers to undefined (not stripped) so the object identity
+        // stays close to the original fieldDef shape.
+        const containerField = { ...fieldDef, wrappers: undefined, skipAutoWrappers: undefined, skipDefaultWrappers: undefined };
+        const inputs = {
+            key: fieldDef.key,
+            field: containerField,
+            ...(className !== undefined && { className }),
+        };
+        applyHiddenLogic(inputs, fieldDef, rootFormRegistry);
+        return inputs;
+    });
+}
+
 /**
  * Built-in field types provided by the dynamic form library.
  *
@@ -13898,6 +14602,14 @@ function textFieldMapper(fieldDef) {
  * { type: 'page', key: 'step1', fields: [...] }
  * ```
  */
+/**
+ * Base field type definitions for fields that don't use the `field` input.
+ * Used by display-only fields like `text` that render immediately without
+ * waiting for form value integration.
+ */
+const DISPLAY_FIELD_TYPES_BASE = {
+    renderReadyWhen: [],
+};
 /**
  * Built-in field types provided by the dynamic form library.
  *
@@ -13908,7 +14620,10 @@ function textFieldMapper(fieldDef) {
 const BUILT_IN_FIELDS = [
     {
         name: 'row',
-        loadComponent: () => Promise.resolve().then(function () { return rowField_component; }),
+        // `row` is a virtual field type: it maps to ContainerFieldComponent, and
+        // the rowFieldMapper injects a `{ type: 'row' }` wrapper so the container
+        // renders the flex/grid layout via RowWrapperComponent.
+        loadComponent: () => Promise.resolve().then(function () { return containerField_component; }),
         mapper: rowFieldMapper,
         valueHandling: 'flatten',
     },
@@ -13926,23 +14641,90 @@ const BUILT_IN_FIELDS = [
     },
     {
         name: 'page',
-        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-D6M_uJKu.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-CEN5u1dd.mjs'),
         mapper: pageFieldMapper,
         valueHandling: 'flatten',
     },
     {
         name: 'text',
-        loadComponent: () => import('./ng-forge-dynamic-forms-text-field.component-Ael-STTb.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-text-field.component-9OIByjZZ.mjs'),
         mapper: textFieldMapper,
         valueHandling: 'exclude',
+        ...DISPLAY_FIELD_TYPES_BASE,
     },
     {
         name: 'hidden',
         // Componentless field - no loadComponent or mapper needed
         valueHandling: 'include',
     },
+    {
+        name: 'container',
+        loadComponent: () => Promise.resolve().then(function () { return containerField_component; }),
+        mapper: containerFieldMapper,
+        valueHandling: 'flatten',
+    },
+];
+const BUILT_IN_WRAPPERS = [
+    {
+        wrapperName: 'css',
+        loadComponent: () => import('./ng-forge-dynamic-forms-css-wrapper.component-Civn5kLJ.mjs'),
+    },
+    {
+        wrapperName: 'row',
+        loadComponent: () => import('./ng-forge-dynamic-forms-row-wrapper.component-BIvEUoia.mjs'),
+    },
 ];
 
+/**
+ * Bundle wrapper registrations into a single object that can be passed to
+ * `provideDynamicForm(...)`.
+ *
+ * @example
+ * ```typescript
+ * const appWrappers = createWrappers(
+ *   {
+ *     wrapperName: 'section',
+ *     loadComponent: () => import('./section-wrapper'),
+ *     props: wrapperProps<SectionWrapper>(),
+ *   },
+ *   {
+ *     wrapperName: 'highlight',
+ *     loadComponent: () => import('./highlight-wrapper'),
+ *     types: ['input', 'select'],
+ *     props: wrapperProps<HighlightWrapper>(),
+ *   },
+ * );
+ *
+ * declare module '@ng-forge/dynamic-forms' {
+ *   interface FieldRegistryWrappers extends InferWrapperRegistry<typeof appWrappers> {}
+ * }
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideDynamicForm(appWrappers)],
+ * });
+ * ```
+ */
+function createWrappers(...registrations) {
+    return {
+        ɵkind: 'wrappers',
+        ɵregistrations: registrations,
+        ɵdefinitions: registrations.map(({ wrapperName, loadComponent, types }) => ({
+            wrapperName,
+            loadComponent,
+            types,
+        })),
+    };
+}
+/** Type guard for a `WrappersBundle`. */
+function isWrappersBundle(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        'ɵkind' in value &&
+        value.ɵkind === 'wrappers' &&
+        'ɵdefinitions' in value &&
+        Array.isArray(value.ɵdefinitions));
+}
+
 /**
  * Provider function to configure the dynamic form system with field types and options.
  *
@@ -13992,19 +14774,14 @@ const BUILT_IN_FIELDS = [
  * @public
  */
 function provideDynamicForm(...items) {
-    // Separate field types from features
-    const fieldTypes = items.filter((item) => !isDynamicFormFeature(item));
+    // Separate field types, wrapper types, wrapper bundles, and features
+    const fieldTypes = items.filter((item) => !isDynamicFormFeature(item) && !isWrapperTypeDefinition(item) && !isWrappersBundle(item));
+    const wrapperTypes = items.filter(isWrapperTypeDefinition);
+    const wrapperBundles = items.filter(isWrappersBundle);
     const features = items.filter(isDynamicFormFeature);
     const fields = [...BUILT_IN_FIELDS, ...fieldTypes];
-    // Extract config providers from field type arrays
-    const configProviders = [];
-    fieldTypes.forEach((fieldTypeArray) => {
-        const fieldTypeWithConfig = fieldTypeArray;
-        if (fieldTypeWithConfig.__configProviders) {
-            configProviders.push(...fieldTypeWithConfig.__configProviders);
-        }
-    });
-    // Extract providers from features
+    const wrappers = [...BUILT_IN_WRAPPERS, ...wrapperTypes, ...wrapperBundles.flatMap((bundle) => bundle.ɵdefinitions)];
+    // Extract providers from features (includes config features like material-config, bootstrap-config, etc.)
     const featureProviders = [];
     const hasLoggerFeature = features.some((feature) => feature.ɵkind === 'logger');
     features.forEach((feature) => {
@@ -14031,7 +14808,41 @@ function provideDynamicForm(...items) {
                 return registry;
             },
         },
-        ...configProviders,
+        // Always provide default Wrapper classes
+        {
+            provide: WRAPPER_REGISTRY,
+            useFactory: () => {
+                const logger = inject(DynamicFormLogger);
+                const registry = new Map();
+                // Add custom wrapper types
+                wrappers.forEach((wrapperType) => {
+                    if (registry.has(wrapperType.wrapperName)) {
+                        logger.warn(`Wrapper type "${wrapperType.wrapperName}" is already registered. Overwriting.`);
+                    }
+                    registry.set(wrapperType.wrapperName, wrapperType);
+                });
+                return registry;
+            },
+        },
+        // Pre-computed reverse index for auto-association lookup — built once so
+        // resolveWrappers is O(1) per field render instead of scanning every
+        // registered wrapper.
+        {
+            provide: WRAPPER_AUTO_ASSOCIATIONS,
+            useFactory: () => {
+                const autoMap = new Map();
+                for (const wrapperType of wrappers) {
+                    if (!wrapperType.types)
+                        continue;
+                    for (const fieldType of wrapperType.types) {
+                        const existing = autoMap.get(fieldType) ?? [];
+                        existing.push({ type: wrapperType.wrapperName });
+                        autoMap.set(fieldType, existing);
+                    }
+                }
+                return autoMap;
+            },
+        },
         ...featureProviders,
     ]);
 }
@@ -14166,8 +14977,38 @@ function withValueExclusionDefaults(config) {
     return createFeature('value-exclusion', [{ provide: VALUE_EXCLUSION_DEFAULTS, useValue: resolved }]);
 }
 
+/**
+ * Zero-cost type carrier used in wrapper registrations.
+ *
+ * Returns `undefined` at runtime but is typed as `T`, so TypeScript can
+ * thread a wrapper's config type through `createWrappers(...)` into the
+ * `InferWrapperRegistry<typeof ...>` utility without requiring users to
+ * hand-write the augmentation shape.
+ *
+ * @example
+ * ```typescript
+ * const wrappers = createWrappers(
+ *   {
+ *     wrapperName: 'section',
+ *     loadComponent: () => import('./section-wrapper'),
+ *     props: wrapperProps<SectionWrapper>(),
+ *   },
+ * );
+ *
+ * declare module '@ng-forge/dynamic-forms' {
+ *   interface FieldRegistryWrappers extends InferWrapperRegistry<typeof wrappers> {}
+ * }
+ * ```
+ */
+function wrapperProps() {
+    return undefined;
+}
+
 function isValueField(field) {
-    return 'value' in field;
+    // `nullable: true` without an explicit `value` is still a value-bearing declaration:
+    // the field resolves to `null` at runtime. Treating it as a value field keeps
+    // downstream narrowing consistent with getFieldDefaultValue's behavior.
+    return 'value' in field || 'nullable' in field;
 }
 
 function isCheckedField(field) {
@@ -14205,10 +15046,13 @@ function isCheckedField(field) {
  * eventBus.dispatch(arrayEvent('contacts').pop());      // Remove last
  * eventBus.dispatch(arrayEvent('contacts').shift());    // Remove first
  * eventBus.dispatch(arrayEvent('contacts').removeAt(2)); // Remove at index
+ *
+ * // Reordering items (no template needed, preserves item identity)
+ * eventBus.dispatch(arrayEvent('contacts').move(0, 2)); // Move first to third
  * ```
  *
  * @param arrayKey - The key of the array field to operate on
- * @returns An object with methods for all 6 array operations
+ * @returns An object with methods for all 7 array operations
  */
 function arrayEvent(arrayKey) {
     return {
@@ -14319,6 +15163,22 @@ function arrayEvent(arrayKey) {
          * ```
          */
         removeAt: (index) => new RemoveAtIndexEvent(arrayKey, index),
+        /**
+         * Move an existing item from one position to another within the array.
+         * This is an atomic reorder — the item is NOT destroyed and recreated.
+         * The resolved component, form value, and stored template are preserved.
+         *
+         * @param from - The current index of the item to move
+         * @param to - The target index to move the item to
+         * @returns A MoveArrayItemEvent to dispatch
+         *
+         * @example
+         * ```typescript
+         * // Move item from index 0 to index 2
+         * eventBus.dispatch(arrayEvent('contacts').move(0, 2));
+         * ```
+         */
+        move: (from, to) => new MoveArrayItemEvent(arrayKey, from, to),
     };
 }
 
@@ -14434,11 +15294,11 @@ function formConfig(config) {
 /**
  * Container field types that do NOT support labels
  */
-const CONTAINER_TYPES = ['group', 'row', 'array'];
+const CONTAINER_TYPES = ['group', 'row', 'array', 'container'];
 /**
  * Container and page field types that only support 'hidden' logic
  */
-const HIDDEN_ONLY_LOGIC_TYPES = ['group', 'row', 'array', 'page'];
+const HIDDEN_ONLY_LOGIC_TYPES = ['group', 'row', 'array', 'container', 'page'];
 /**
  * Field types that support options at the field level
  */
@@ -14698,14 +15558,13 @@ class DynamicTextPipe {
         }
         return of(value || '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DynamicTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: DynamicTextPipe, isStandalone: true, name: "dynamicText" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: DynamicTextPipe, isStandalone: true, name: "dynamicText" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DynamicTextPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicTextPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dynamicText',
-                    standalone: true,
                 }]
         }] });
 
@@ -14752,106 +15611,30 @@ function computeContainerHostClasses(containerType, className) {
  * When resolved fields become non-empty, emits a ComponentInitializedEvent
  * via afterNextRender to signal the container is ready.
  *
+ * `componentType` may be a static value or a lazy getter — the latter lets
+ * virtual field types (e.g. `row`, which renders via ContainerFieldComponent)
+ * preserve their original type on the emitted event instead of collapsing to
+ * the host component's type.
+ *
  * @param resolvedFields - Signal of resolved fields
  * @param eventBus - EventBus for dispatching initialization events
- * @param componentType - The type of container component
+ * @param componentType - Static type, or a getter evaluated at emission time
  * @param fieldKeyFn - Function returning the field's key
  * @param injector - Injector for afterNextRender scheduling
  */
 function setupContainerInitEffect(resolvedFields, eventBus, componentType, fieldKeyFn, injector) {
-    explicitEffect([resolvedFields], ([fields]) => {
-        if (fields.length > 0) {
-            emitComponentInitialized(eventBus, componentType, fieldKeyFn(), injector);
+    const allReady = computed(() => {
+        const fields = resolvedFields();
+        return fields.length > 0 && fields.every((field) => field.renderReady());
+    }, ...(ngDevMode ? [{ debugName: "allReady" }] : /* istanbul ignore next */ []));
+    explicitEffect([allReady], ([ready]) => {
+        if (ready) {
+            const type = typeof componentType === 'function' ? componentType() : componentType;
+            emitComponentInitialized(eventBus, type, fieldKeyFn(), injector);
         }
     });
 }
 
-/**
- * Layout container for horizontal field arrangement.
- *
- * Does not create a new form context - fields share the parent's context.
- * Field values are flattened into the parent form (no nesting under row key).
- * Purely a visual/layout container with no impact on form structure.
- */
-class RowFieldComponent {
-    // ─────────────────────────────────────────────────────────────────────────────
-    // Dependencies
-    // ─────────────────────────────────────────────────────────────────────────────
-    destroyRef = inject(DestroyRef);
-    fieldRegistry = injectFieldRegistry();
-    injector = inject(Injector);
-    eventBus = inject(EventBus);
-    logger = inject(DynamicFormLogger);
-    // ─────────────────────────────────────────────────────────────────────────────
-    // Inputs
-    // ─────────────────────────────────────────────────────────────────────────────
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
-    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
-    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
-    // ─────────────────────────────────────────────────────────────────────────────
-    // Computed Signals
-    // ─────────────────────────────────────────────────────────────────────────────
-    hostClasses = computed(() => computeContainerHostClasses('row', this.className()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-    disabled = computed(() => this.field().disabled || false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : []));
-    // ─────────────────────────────────────────────────────────────────────────────
-    // Field Resolution
-    // ─────────────────────────────────────────────────────────────────────────────
-    fieldsSource = computed(() => (this.field().fields || []), ...(ngDevMode ? [{ debugName: "fieldsSource" }] : []));
-    resolvedFields = derivedFromDeferred(this.fieldsSource, createFieldResolutionPipe(() => ({
-        loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
-        registry: this.rawFieldRegistry(),
-        injector: this.injector,
-        destroyRef: this.destroyRef,
-        onError: (fieldDef, error) => {
-            const fieldKey = fieldDef.key || '<no key>';
-            const rowKey = this.field().key || '<no key>';
-            this.logger.error(`Failed to load component for field type '${fieldDef.type}' (key: ${fieldKey}) ` +
-                `within row '${rowKey}'. Ensure the field type is registered in your field registry.`, error);
-        },
-    })), { initialValue: [], injector: this.injector });
-    // ─────────────────────────────────────────────────────────────────────────────
-    // Constructor
-    // ─────────────────────────────────────────────────────────────────────────────
-    constructor() {
-        this.setupEffects();
-    }
-    // ─────────────────────────────────────────────────────────────────────────────
-    // Private Methods
-    // ─────────────────────────────────────────────────────────────────────────────
-    setupEffects() {
-        setupContainerInitEffect(this.resolvedFields, this.eventBus, 'row', () => this.field().key, this.injector);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RowFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: RowFieldComponent, isStandalone: true, selector: "div[row-field]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "class.disabled": "disabled()", "class.df-container-hidden": "hidden()", "attr.aria-hidden": "hidden() || null", "id": "`${key()}`", "attr.data-testid": "key()" } }, ngImport: i0, template: `
-    @for (field of resolvedFields(); track field.key) {
-      <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
-    }
-  `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);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);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);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.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),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);--df-grid-row-gap: var(--df-grid-row-gap-md)}.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);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.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);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.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:flex;flex-wrap:wrap;gap:var(--df-grid-gap);align-items:flex-start;width:100%}:host ::ng-deep>*:not([class*=df-col-]){flex:0 0 auto}:host ::ng-deep>.df-col-1{flex:0 0 calc(8.3333333333% - var(--df-grid-gap) * .9166666667);max-width:calc(8.3333333333% - var(--df-grid-gap) * .9166666667)}:host ::ng-deep>.df-col-2{flex:0 0 calc(16.6666666667% - var(--df-grid-gap) * .8333333333);max-width:calc(16.6666666667% - var(--df-grid-gap) * .8333333333)}:host ::ng-deep>.df-col-3{flex:0 0 calc(25% - var(--df-grid-gap) * .75);max-width:calc(25% - var(--df-grid-gap) * .75)}:host ::ng-deep>.df-col-4{flex:0 0 calc(33.3333333333% - var(--df-grid-gap) * .6666666667);max-width:calc(33.3333333333% - var(--df-grid-gap) * .6666666667)}:host ::ng-deep>.df-col-5{flex:0 0 calc(41.6666666667% - var(--df-grid-gap) * .5833333333);max-width:calc(41.6666666667% - var(--df-grid-gap) * .5833333333)}:host ::ng-deep>.df-col-6{flex:0 0 calc(50% - var(--df-grid-gap) * .5);max-width:calc(50% - var(--df-grid-gap) * .5)}:host ::ng-deep>.df-col-7{flex:0 0 calc(58.3333333333% - var(--df-grid-gap) * .4166666667);max-width:calc(58.3333333333% - var(--df-grid-gap) * .4166666667)}:host ::ng-deep>.df-col-8{flex:0 0 calc(66.6666666667% - var(--df-grid-gap) * .3333333333);max-width:calc(66.6666666667% - var(--df-grid-gap) * .3333333333)}:host ::ng-deep>.df-col-9{flex:0 0 calc(75% - var(--df-grid-gap) * .25);max-width:calc(75% - var(--df-grid-gap) * .25)}:host ::ng-deep>.df-col-10{flex:0 0 calc(83.3333333333% - var(--df-grid-gap) * .1666666667);max-width:calc(83.3333333333% - var(--df-grid-gap) * .1666666667)}:host ::ng-deep>.df-col-11{flex:0 0 calc(91.6666666667% - var(--df-grid-gap) * .0833333333);max-width:calc(91.6666666667% - var(--df-grid-gap) * .0833333333)}:host ::ng-deep>.df-col-12{flex:0 0 calc(100% - var(--df-grid-gap) * 0);max-width:calc(100% - var(--df-grid-gap) * 0)}:host.df-gap-custom{--df-grid-gap: var(--row-custom-gap, 1rem)}@media(max-width:576px){:host.df-row-mobile-stack{flex-direction:column}:host.df-row-mobile-stack ::ng-deep>*{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:577px)and (max-width:768px){:host.df-row-tablet-2col ::ng-deep>*{flex:0 0 calc(50% - var(--df-grid-gap) / 2);max-width:calc(50% - var(--df-grid-gap) / 2)}}:host.df-container-hidden{display:none}@media(max-width:576px){:host{flex-direction:column}:host ::ng-deep>*{flex:0 0 100%!important;max-width:100%!important}:host.df-row-mobile-keep-cols{flex-direction:row}:host.df-row-mobile-keep-cols ::ng-deep>*:not([class*=df-col-]){flex:0 0 auto!important;max-width:none!important}}\n"], 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: "21.2.0", ngImport: i0, type: RowFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'div[row-field]', imports: [NgComponentOutlet], template: `
-    @for (field of resolvedFields(); track field.key) {
-      <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
-    }
-  `, host: {
-                        '[class]': 'hostClasses()',
-                        '[class.disabled]': 'disabled()',
-                        '[class.df-container-hidden]': 'hidden()',
-                        '[attr.aria-hidden]': 'hidden() || null',
-                        '[id]': '`${key()}`',
-                        '[attr.data-testid]': 'key()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);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);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);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.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),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);--df-grid-row-gap: var(--df-grid-row-gap-md)}.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);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.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);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.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:flex;flex-wrap:wrap;gap:var(--df-grid-gap);align-items:flex-start;width:100%}:host ::ng-deep>*:not([class*=df-col-]){flex:0 0 auto}:host ::ng-deep>.df-col-1{flex:0 0 calc(8.3333333333% - var(--df-grid-gap) * .9166666667);max-width:calc(8.3333333333% - var(--df-grid-gap) * .9166666667)}:host ::ng-deep>.df-col-2{flex:0 0 calc(16.6666666667% - var(--df-grid-gap) * .8333333333);max-width:calc(16.6666666667% - var(--df-grid-gap) * .8333333333)}:host ::ng-deep>.df-col-3{flex:0 0 calc(25% - var(--df-grid-gap) * .75);max-width:calc(25% - var(--df-grid-gap) * .75)}:host ::ng-deep>.df-col-4{flex:0 0 calc(33.3333333333% - var(--df-grid-gap) * .6666666667);max-width:calc(33.3333333333% - var(--df-grid-gap) * .6666666667)}:host ::ng-deep>.df-col-5{flex:0 0 calc(41.6666666667% - var(--df-grid-gap) * .5833333333);max-width:calc(41.6666666667% - var(--df-grid-gap) * .5833333333)}:host ::ng-deep>.df-col-6{flex:0 0 calc(50% - var(--df-grid-gap) * .5);max-width:calc(50% - var(--df-grid-gap) * .5)}:host ::ng-deep>.df-col-7{flex:0 0 calc(58.3333333333% - var(--df-grid-gap) * .4166666667);max-width:calc(58.3333333333% - var(--df-grid-gap) * .4166666667)}:host ::ng-deep>.df-col-8{flex:0 0 calc(66.6666666667% - var(--df-grid-gap) * .3333333333);max-width:calc(66.6666666667% - var(--df-grid-gap) * .3333333333)}:host ::ng-deep>.df-col-9{flex:0 0 calc(75% - var(--df-grid-gap) * .25);max-width:calc(75% - var(--df-grid-gap) * .25)}:host ::ng-deep>.df-col-10{flex:0 0 calc(83.3333333333% - var(--df-grid-gap) * .1666666667);max-width:calc(83.3333333333% - var(--df-grid-gap) * .1666666667)}:host ::ng-deep>.df-col-11{flex:0 0 calc(91.6666666667% - var(--df-grid-gap) * .0833333333);max-width:calc(91.6666666667% - var(--df-grid-gap) * .0833333333)}:host ::ng-deep>.df-col-12{flex:0 0 calc(100% - var(--df-grid-gap) * 0);max-width:calc(100% - var(--df-grid-gap) * 0)}:host.df-gap-custom{--df-grid-gap: var(--row-custom-gap, 1rem)}@media(max-width:576px){:host.df-row-mobile-stack{flex-direction:column}:host.df-row-mobile-stack ::ng-deep>*{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:577px)and (max-width:768px){:host.df-row-tablet-2col ::ng-deep>*{flex:0 0 calc(50% - var(--df-grid-gap) / 2);max-width:calc(50% - var(--df-grid-gap) / 2)}}:host.df-container-hidden{display:none}@media(max-width:576px){:host{flex-direction:column}:host ::ng-deep>*{flex:0 0 100%!important;max-width:100%!important}:host.df-row-mobile-keep-cols{flex-direction:row}:host.df-row-mobile-keep-cols ::ng-deep>*:not([class*=df-col-]){flex:0 0 auto!important;max-width:none!important}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }] } });
-
-var rowField_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    RowFieldComponent: RowFieldComponent,
-    default: RowFieldComponent
-});
-
 /**
  * Container component for rendering nested form groups.
  *
@@ -14867,6 +15650,7 @@ class GroupFieldComponent {
     fieldRegistry = injectFieldRegistry();
     parentFieldSignalContext = inject(FIELD_SIGNAL_CONTEXT);
     injector = inject(Injector);
+    environmentInjector = inject(EnvironmentInjector);
     eventBus = inject(EventBus);
     logger = inject(DynamicFormLogger);
     // ─────────────────────────────────────────────────────────────────────────────
@@ -14876,24 +15660,26 @@ class GroupFieldComponent {
     // ─────────────────────────────────────────────────────────────────────────────
     // Inputs
     // ─────────────────────────────────────────────────────────────────────────────
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
-    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
-    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
+    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Computed Signals
     // ─────────────────────────────────────────────────────────────────────────────
-    hostClasses = computed(() => computeContainerHostClasses('group', this.className()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-    rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : []));
+    hostClasses = computed(() => computeContainerHostClasses('group', this.className()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : /* istanbul ignore next */ []));
     formSetup = computed(() => {
         const groupField = this.field();
         const registry = this.rawFieldRegistry();
         if (groupField.fields && groupField.fields.length > 0) {
             const flattenedFields = this.fieldProcessors.memoizedFlattenFields(groupField.fields, registry);
+            const flattenedFieldsForRendering = this.fieldProcessors.memoizedFlattenFieldsForRendering(groupField.fields, registry);
             const fieldsById = this.fieldProcessors.memoizedKeyBy(flattenedFields);
             const defaultValues = this.fieldProcessors.memoizedDefaultValues(fieldsById, registry);
             return {
-                fields: flattenedFields,
+                fields: flattenedFieldsForRendering,
+                schemaFields: flattenedFields,
                 originalFields: groupField.fields,
                 defaultValues,
                 registry,
@@ -14901,12 +15687,13 @@ class GroupFieldComponent {
         }
         return {
             fields: [],
+            schemaFields: [],
             originalFields: [],
             defaultValues: {},
             registry,
         };
-    }, ...(ngDevMode ? [{ debugName: "formSetup" }] : []));
-    defaultValues = linkedSignal(() => this.formSetup().defaultValues, ...(ngDevMode ? [{ debugName: "defaultValues" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "formSetup" }] : /* istanbul ignore next */ []));
+    defaultValues = linkedSignal(() => this.formSetup().defaultValues, ...(ngDevMode ? [{ debugName: "defaultValues" }] : /* istanbul ignore next */ []));
     /**
      * Entity computed from parent value, group key, and defaults.
      * Uses deep equality check to prevent unnecessary updates when
@@ -14925,28 +15712,28 @@ class GroupFieldComponent {
     form = computed(() => {
         return runInInjectionContext(this.injector, () => {
             const setup = this.formSetup();
-            if (setup.fields.length > 0) {
-                const schema = createSchemaFromFields(setup.fields, setup.registry);
+            if (setup.schemaFields.length > 0) {
+                const schema = createSchemaFromFields(setup.schemaFields, setup.registry);
                 return untracked(() => form(this.entity, schema));
             }
             return untracked(() => form(this.entity));
         });
-    }, ...(ngDevMode ? [{ debugName: "form" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Public State Signals
     // ─────────────────────────────────────────────────────────────────────────────
-    formValue = computed(() => this.entity(), ...(ngDevMode ? [{ debugName: "formValue" }] : []));
-    valid = computed(() => this.form()().valid(), ...(ngDevMode ? [{ debugName: "valid" }] : []));
-    invalid = computed(() => this.form()().invalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : []));
-    dirty = computed(() => this.form()().dirty(), ...(ngDevMode ? [{ debugName: "dirty" }] : []));
-    touched = computed(() => this.form()().touched(), ...(ngDevMode ? [{ debugName: "touched" }] : []));
-    errors = computed(() => this.form()().errors(), ...(ngDevMode ? [{ debugName: "errors" }] : []));
-    disabled = computed(() => this.form()().disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    formValue = computed(() => this.entity(), ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
+    valid = computed(() => this.form()().valid(), ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
+    invalid = computed(() => this.form()().invalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = computed(() => this.form()().dirty(), ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    touched = computed(() => this.form()().touched(), ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    errors = computed(() => this.form()().errors(), ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.form()().disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     nestedFieldTree = computed(() => {
         const parentForm = this.parentFieldSignalContext.form;
         const groupKey = this.field().key;
         return parentForm[groupKey];
-    }, ...(ngDevMode ? [{ debugName: "nestedFieldTree" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "nestedFieldTree" }] : /* istanbul ignore next */ []));
     groupFieldSignalContext = (() => {
         const nestedFieldTree = this.nestedFieldTree;
         return {
@@ -14971,7 +15758,7 @@ class GroupFieldComponent {
     // ─────────────────────────────────────────────────────────────────────────────
     // Field Resolution
     // ─────────────────────────────────────────────────────────────────────────────
-    fieldsSource = computed(() => this.formSetup().fields, ...(ngDevMode ? [{ debugName: "fieldsSource" }] : []));
+    fieldsSource = computed(() => this.formSetup().fields, ...(ngDevMode ? [{ debugName: "fieldsSource" }] : /* istanbul ignore next */ []));
     resolvedFields = derivedFromDeferred(this.fieldsSource, createFieldResolutionPipe(() => ({
         loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
         registry: this.rawFieldRegistry(),
@@ -15000,18 +15787,18 @@ class GroupFieldComponent {
             }
         }, { defer: true });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GroupFieldComponent, isStandalone: true, selector: "fieldset[group-field]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted" }, host: { attributes: { "role": "group" }, properties: { "class": "hostClasses()", "class.disabled": "disabled()", "class.df-container-hidden": "hidden()", "attr.aria-hidden": "hidden() || null", "id": "`${key()}`", "attr.data-testid": "key()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: GroupFieldComponent, isStandalone: true, selector: "fieldset[group-field]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted" }, host: { attributes: { "role": "group" }, properties: { "class": "hostClasses()", "class.disabled": "disabled()", "class.df-container-hidden": "hidden()", "attr.aria-hidden": "hidden() || null", "id": "`${key()}`", "attr.data-testid": "key()" } }, ngImport: i0, template: `
     @for (field of resolvedFields(); track field.key) {
-      <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
+      <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
     }
-  `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);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);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);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.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),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);--df-grid-row-gap: var(--df-grid-row-gap-md)}.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);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.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);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.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{border:none;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}:host>*{grid-column:1/-1}:host.df-container-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);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);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);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.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),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);--df-grid-row-gap: var(--df-grid-row-gap-md)}.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);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.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);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.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{border:none;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}:host>*{grid-column:1/-1}:host.df-container-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: DfFieldOutlet, selector: "[dfFieldOutlet]", inputs: ["dfFieldOutlet", "dfFieldOutletEnvironmentInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GroupFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: GroupFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fieldset[group-field]', imports: [NgComponentOutlet], template: `
+            args: [{ selector: 'fieldset[group-field]', imports: [DfFieldOutlet], template: `
     @for (field of resolvedFields(); track field.key) {
-      <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
+      <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
     }
   `, host: {
                         '[class]': 'hostClasses()',
@@ -15112,7 +15899,7 @@ function createArrayItemInjectorAndInputs(options) {
             return undefined;
         }
         return arrayFieldTree[index];
-    }, { ...(ngDevMode ? { debugName: "itemFormAccessor" } : {}), equal: isEqual });
+    }, { ...(ngDevMode ? { debugName: "itemFormAccessor" } : /* istanbul ignore next */ {}), equal: isEqual });
     const injector = createItemInjector({
         itemFormAccessor,
         indexSignal,
@@ -15219,9 +16006,9 @@ function resolveArrayItem(options) {
     const indexSignal = linkedSignal(() => {
         const positionMap = itemPositionMap();
         return positionMap.get(itemId) ?? index;
-    }, ...(ngDevMode ? [{ debugName: "indexSignal" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "indexSignal" }] : /* istanbul ignore next */ []));
     // Resolve all templates in parallel
-    const fieldObservables = templates.map((template) => from(loadTypeComponent(template.type)).pipe(map$1((component) => {
+    const fieldObservables = templates.map((template) => from(loadTypeComponent(template.type)).pipe(map((component) => {
         if (destroyRef.destroyed) {
             return undefined;
         }
@@ -15243,9 +16030,12 @@ function resolveArrayItem(options) {
             return undefined;
         }
         return {
+            key: template.key,
+            fieldDef: template,
             component,
             injector,
             inputs,
+            renderReady: createRenderReadySignal(inputs, registry.get(template.type)),
         };
     }), catchError((error) => {
         if (!destroyRef.destroyed) {
@@ -15255,7 +16045,7 @@ function resolveArrayItem(options) {
         }
         return of(undefined);
     })));
-    return forkJoin(fieldObservables).pipe(map$1((fields) => {
+    return forkJoin(fieldObservables).pipe(map((fields) => {
         const validFields = fields.filter((f) => f !== undefined);
         // If no fields resolved, return undefined
         if (validFields.length === 0) {
@@ -15275,6 +16065,7 @@ const ARRAY_EVENT_TYPES = [
     'append-array-item',
     'prepend-array-item',
     'insert-array-item',
+    'move-array-item',
     'pop-array-item',
     'shift-array-item',
     'remove-at-index',
@@ -15291,6 +16082,8 @@ function toArrayAction(event) {
             return { action: 'add', template: event.template, index: 0 };
         case 'insert-array-item':
             return { action: 'add', template: event.template, index: event.index };
+        case 'move-array-item':
+            return { action: 'move', fromIndex: event.fromIndex, toIndex: event.toIndex };
         case 'pop-array-item':
             return { action: 'remove' };
         case 'shift-array-item':
@@ -15320,13 +16113,13 @@ function toArrayAction(event) {
  * ```
  */
 function observeArrayActions(eventBus, arrayKey) {
-    return eventBus.on(ARRAY_EVENT_TYPES).pipe(filter((event) => event.arrayKey === arrayKey()), map$1(toArrayAction));
+    return eventBus.on(ARRAY_EVENT_TYPES).pipe(filter((event) => event.arrayKey === arrayKey()), map(toArrayAction));
 }
 
 /**
  * Container component for rendering dynamic arrays of fields.
  *
- * Supports add/remove operations via the arrayEvent() builder API.
+ * Supports add/remove/move operations via the arrayEvent() builder API.
  * Uses differential updates to optimize rendering - only recreates items when necessary.
  * Each item gets a scoped injector with ARRAY_CONTEXT for position-aware operations.
  * Supports multiple sibling fields per array item (e.g., name + email without a wrapper).
@@ -15339,6 +16132,7 @@ class ArrayFieldComponent {
     fieldRegistry = injectFieldRegistry();
     parentFieldSignalContext = inject(FIELD_SIGNAL_CONTEXT);
     parentInjector = inject(Injector);
+    environmentInjector = inject(EnvironmentInjector);
     eventBus = inject(EventBus);
     logger = inject(DynamicFormLogger);
     templateRegistry = inject(ARRAY_TEMPLATE_REGISTRY);
@@ -15346,10 +16140,10 @@ class ArrayFieldComponent {
     // ─────────────────────────────────────────────────────────────────────────────
     // Inputs
     // ─────────────────────────────────────────────────────────────────────────────
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
-    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
-    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
+    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Computed Signals
     // ─────────────────────────────────────────────────────────────────────────────
@@ -15357,8 +16151,8 @@ class ArrayFieldComponent {
         const base = 'df-field df-array';
         const custom = this.className();
         return custom ? `${base} ${custom}` : base;
-    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-    rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : /* istanbul ignore next */ []));
     /**
      * Gets the auto-remove button FieldDef from normalization metadata.
      * Set by simplified array normalization for primitive arrays with remove buttons.
@@ -15368,7 +16162,7 @@ class ArrayFieldComponent {
     autoRemoveButton = computed(() => {
         const metadata = getNormalizedArrayMetadata(this.field());
         return metadata?.autoRemoveButton;
-    }, ...(ngDevMode ? [{ debugName: "autoRemoveButton" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "autoRemoveButton" }] : /* istanbul ignore next */ []));
     /**
      * For primitive array items, the key of the value field template (e.g., 'value').
      * Used to wrap the FormControl in the item context so getFieldTree(key) works.
@@ -15394,7 +16188,22 @@ class ArrayFieldComponent {
             return definitions[0].key;
         }
         return undefined;
-    }, ...(ngDevMode ? [{ debugName: "primitiveFieldKey" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "primitiveFieldKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Normalized item templates WITHOUT auto-remove button appended.
+     * Each element is normalized to an array: single FieldDef → [FieldDef], array stays as-is.
+     *
+     * Used by moveItem() to stash raw templates into the templateRegistry, preserving
+     * the invariant that registry entries are pre-synthesis (withAutoRemove() adds the
+     * button during resolution).
+     */
+    rawItemTemplates = computed(() => {
+        const arrayField = this.field();
+        const definitions = arrayField.fields || [];
+        return definitions.map((def) => {
+            return (Array.isArray(def) ? def : [def]);
+        });
+    }, ...(ngDevMode ? [{ debugName: "rawItemTemplates" }] : /* istanbul ignore next */ []));
     /**
      * Gets the item templates (field definitions) for the array.
      * Each element can be either:
@@ -15408,19 +16217,14 @@ class ArrayFieldComponent {
      * Returns normalized templates where all items are arrays for consistent handling.
      */
     itemTemplates = computed(() => {
-        const arrayField = this.field();
-        const definitions = arrayField.fields || [];
+        const raw = this.rawItemTemplates();
         const removeButton = this.autoRemoveButton();
-        // Normalize: single FieldDef → [FieldDef], array stays as-is
-        // Append auto-remove button if configured (for primitive simplified arrays)
-        return definitions.map((def) => {
-            const normalized = (Array.isArray(def) ? def : [def]);
-            if (removeButton) {
-                return [...normalized, removeButton];
-            }
-            return normalized;
+        if (!removeButton)
+            return raw;
+        return raw.map((normalized) => {
+            return [...normalized, removeButton];
         });
-    }, ...(ngDevMode ? [{ debugName: "itemTemplates" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "itemTemplates" }] : /* istanbul ignore next */ []));
     arrayFieldTrees = computed(() => {
         const arrayKey = this.field().key;
         const parentForm = this.parentFieldSignalContext.form;
@@ -15438,12 +16242,14 @@ class ArrayFieldComponent {
             items.push(itemFieldTree ?? null);
         }
         return items;
-    }, ...(ngDevMode ? [{ debugName: "arrayFieldTrees" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "arrayFieldTrees" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // State Signals
     // ─────────────────────────────────────────────────────────────────────────────
-    resolvedItemsSignal = signal([], ...(ngDevMode ? [{ debugName: "resolvedItemsSignal" }] : []));
-    updateVersion = signal(0, ...(ngDevMode ? [{ debugName: "updateVersion" }] : []));
+    resolvedItemsSignal = signal([], ...(ngDevMode ? [{ debugName: "resolvedItemsSignal" }] : /* istanbul ignore next */ []));
+    updateVersion = signal(0, ...(ngDevMode ? [{ debugName: "updateVersion" }] : /* istanbul ignore next */ []));
+    pendingInitializationCycle = signal(null, ...(ngDevMode ? [{ debugName: "pendingInitializationCycle" }] : /* istanbul ignore next */ []));
+    settledInitializationCycle = signal(null, ...(ngDevMode ? [{ debugName: "settledInitializationCycle" }] : /* istanbul ignore next */ []));
     /**
      * Map of item IDs to their current positions. O(1) lookup vs O(n) indexOf().
      * Used by child linkedSignals to reactively track their position in the array.
@@ -15451,9 +16257,10 @@ class ArrayFieldComponent {
     itemPositionMap = computed(() => {
         const items = this.resolvedItemsSignal();
         return new Map(items.map((item, idx) => [item.id, idx]));
-    }, ...(ngDevMode ? [{ debugName: "itemPositionMap" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "itemPositionMap" }] : /* istanbul ignore next */ []));
     /** Read-only view of resolved items for template consumption. */
-    resolvedItems = computed(() => this.resolvedItemsSignal(), ...(ngDevMode ? [{ debugName: "resolvedItems" }] : []));
+    resolvedItems = computed(() => this.resolvedItemsSignal(), ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
+    allResolvedFieldsRenderReady = computed(() => this.resolvedItems().every((item) => item.fields.every((field) => field.renderReady())), ...(ngDevMode ? [{ debugName: "allResolvedFieldsRenderReady" }] : /* istanbul ignore next */ []));
     /**
      * Whether the array has reached its configured maxLength.
      * Exposed as a public signal so add-button components can bind [disabled]="atMaxLength()".
@@ -15465,7 +16272,7 @@ class ArrayFieldComponent {
         const arrayKey = this.field().key;
         const currentArray = getArrayValue(this.parentFieldSignalContext.value(), arrayKey);
         return currentArray.length >= maxLength;
-    }, ...(ngDevMode ? [{ debugName: "atMaxLength" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "atMaxLength" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Auto-remove Cache
     // ─────────────────────────────────────────────────────────────────────────────
@@ -15492,6 +16299,12 @@ class ArrayFieldComponent {
         explicitEffect([this.arrayFieldTrees], ([fieldTrees]) => {
             this.performDifferentialUpdate(fieldTrees);
         });
+        explicitEffect([this.pendingInitializationCycle, this.settledInitializationCycle, this.allResolvedFieldsRenderReady], ([pending, settled, allReady]) => {
+            if (pending !== null && settled === pending && allReady) {
+                emitComponentInitialized(this.eventBus, 'array', this.field().key, this.parentInjector);
+                this.pendingInitializationCycle.set(null);
+            }
+        });
     }
     setupEventHandlers() {
         observeArrayActions(this.eventBus, () => this.key())
@@ -15508,6 +16321,9 @@ class ArrayFieldComponent {
                 }
                 void this.handleAddFromEvent(action.template, action.index);
             }
+            else if (action.action === 'move') {
+                this.moveItem(action.fromIndex, action.toIndex);
+            }
             else {
                 this.removeItem(action.index);
             }
@@ -15522,9 +16338,13 @@ class ArrayFieldComponent {
      * Supports both primitive (single FieldDef) and object (FieldDef[]) templates.
      */
     async handleAddFromEvent(template, index) {
-        // Normalize template to mutable array for consistent handling
+        // Normalize template to mutable array for consistent handling.
+        // A single FieldDef with valueHandling: 'flatten' (container, row) is an object item
+        // whose children should be flattened — NOT a primitive item. Only true leaf fields
+        // (input, checkbox, etc.) are primitive when passed as a single FieldDef.
         const templates = Array.isArray(template) ? [...template] : [template];
-        const isPrimitiveItem = !Array.isArray(template);
+        const isSingleField = !Array.isArray(template);
+        const isPrimitiveItem = isSingleField && getFieldValueHandling(templates[0].type, this.rawFieldRegistry()) !== 'flatten';
         // Track primitive field key for full-API arrays that start empty.
         // Simplified arrays already have this info from normalization metadata.
         if (isPrimitiveItem && templates[0].key && !this.primitiveFieldKey()) {
@@ -15552,14 +16372,14 @@ class ArrayFieldComponent {
             for (const templateField of templates) {
                 const rawValue = getFieldDefaultValue(templateField, this.rawFieldRegistry());
                 const valueHandling = getFieldValueHandling(templateField.type, this.rawFieldRegistry());
-                const isContainer = templateField.type === 'group' || templateField.type === 'row';
+                const isContainer = templateField.type === 'group' || templateField.type === 'row' || templateField.type === 'container';
                 if (isContainer) {
                     if (isGroupField(templateField)) {
                         // Groups wrap their fields under the group key
                         value = { ...value, [templateField.key]: rawValue };
                     }
                     else {
-                        // Rows flatten their fields directly
+                        // Rows and containers flatten their fields directly
                         value = { ...value, ...rawValue };
                     }
                 }
@@ -15624,26 +16444,31 @@ class ArrayFieldComponent {
                 // Clean up template registry when all items are removed
                 this.templateRegistry.clear();
                 this.resolvedItemsSignal.set([]);
+                if (resolvedItems.length === 0 && this.pendingInitializationCycle() === null && this.settledInitializationCycle() === null) {
+                    this.pendingInitializationCycle.set(currentVersion);
+                    this.settledInitializationCycle.set(currentVersion);
+                }
                 break;
             case 'initial':
+                this.pendingInitializationCycle.set(currentVersion);
+                this.settledInitializationCycle.set(null);
                 void this.resolveAllItems(fieldTrees, currentVersion);
                 break;
             case 'append':
                 void this.appendItems(fieldTrees, operation.startIndex, operation.endIndex, currentVersion);
                 break;
             case 'recreate': {
-                // Before clearing, capture templates by position for items beyond defined templates.
-                // This allows dynamically added items to be recreated with their original templates.
-                const itemTemplates = this.itemTemplates();
-                const positionalTemplates = resolvedItems.map((item, idx) => {
-                    // For items within the defined templates range, use the config directly
-                    if (idx < itemTemplates.length) {
-                        return undefined; // Will use itemTemplates[idx] during resolve
-                    }
-                    // For dynamically added items, look up their stored template
+                // Capture templates by item ID so each item is recreated with its original template,
+                // even after move operations that change positions. Registry entries (from dynamic adds
+                // or moves) take priority over positional itemTemplates lookup.
+                const positionalTemplates = resolvedItems.map((item) => {
+                    // Registry entries (from dynamic adds or moves) take priority;
+                    // unmoved initial items return undefined → falls through to itemTemplates[idx] during resolve.
                     return this.templateRegistry.get(item.id);
                 });
                 this.resolvedItemsSignal.set([]);
+                this.pendingInitializationCycle.set(currentVersion);
+                this.settledInitializationCycle.set(null);
                 void this.resolveAllItems(fieldTrees, currentVersion, positionalTemplates);
                 break;
             }
@@ -15660,7 +16485,7 @@ class ArrayFieldComponent {
             return of(undefined);
         })));
         try {
-            const items = await firstValueFrom(forkJoin(safeItemObservables).pipe(map$1((items) => items.filter((item) => item !== undefined))));
+            const items = await firstValueFrom(forkJoin(safeItemObservables).pipe(map((items) => items.filter((item) => item !== undefined))));
             if (updateId === this.updateVersion()) {
                 // Update template registry with new item IDs for dynamically added items
                 if (positionalTemplates) {
@@ -15679,7 +16504,9 @@ class ArrayFieldComponent {
                     });
                 }
                 this.resolvedItemsSignal.set(items);
-                emitComponentInitialized(this.eventBus, 'array', this.field().key, this.parentInjector);
+                if (this.pendingInitializationCycle() === updateId) {
+                    this.settledInitializationCycle.set(updateId);
+                }
             }
         }
         catch (err) {
@@ -15700,7 +16527,7 @@ class ArrayFieldComponent {
             }));
         });
         try {
-            const newItems = await firstValueFrom(forkJoin(safeItemObservables).pipe(map$1((items) => items.filter((item) => item !== undefined))));
+            const newItems = await firstValueFrom(forkJoin(safeItemObservables).pipe(map((items) => items.filter((item) => item !== undefined))));
             if (updateId === this.updateVersion()) {
                 this.resolvedItemsSignal.update((current) => [...current, ...newItems]);
             }
@@ -15781,6 +16608,61 @@ class ArrayFieldComponent {
         this.autoRemoveCache.set(templates, cached);
         return cached;
     }
+    /**
+     * Handles move operations — reorders an existing item without destroying it.
+     * Updates resolvedItems and form value atomically. Since the array length
+     * doesn't change, `determineDifferentialOperation` returns 'none' and no
+     * recreate is triggered. The `@for` loop tracks by `item.id`, so Angular
+     * moves the DOM node instead of destroying/recreating. The `itemPositionMap`
+     * computed auto-recomputes, propagating new indices to child linkedSignals.
+     */
+    moveItem(fromIndex, toIndex) {
+        const arrayKey = this.field().key;
+        const parentForm = this.parentFieldSignalContext.form;
+        const currentValue = parentForm().value();
+        const currentArray = getArrayValue(currentValue, arrayKey);
+        const length = currentArray.length;
+        if (fromIndex < 0 || fromIndex >= length) {
+            this.logger.warn(`moveArrayItem fromIndex ${fromIndex} is out of bounds for array '${arrayKey}' with length ${length}. Operation skipped.`);
+            return;
+        }
+        if (toIndex < 0 || toIndex >= length) {
+            this.logger.warn(`moveArrayItem toIndex ${toIndex} is out of bounds for array '${arrayKey}' with length ${length}. Operation skipped.`);
+            return;
+        }
+        if (fromIndex === toIndex)
+            return;
+        // Register raw (pre-auto-remove) templates for all items whose position will change.
+        // Initial items use itemTemplates[currentIndex] during recreate, but after
+        // a move their position no longer matches their original template. Stashing
+        // the template by item ID lets the recreate path resolve the correct one.
+        // We use rawItemTemplates (without auto-remove button) because the recreate path
+        // calls withAutoRemove() during resolution — storing the synthesized version would
+        // cause duplicate remove buttons.
+        const rawTemplates = this.rawItemTemplates();
+        const currentItems = this.resolvedItemsSignal();
+        const lo = Math.min(fromIndex, toIndex);
+        const hi = Math.max(fromIndex, toIndex);
+        for (let i = lo; i <= hi; i++) {
+            const item = currentItems[i];
+            if (item && !this.templateRegistry.has(item.id) && i < rawTemplates.length) {
+                this.templateRegistry.set(item.id, rawTemplates[i]);
+            }
+        }
+        // Reorder resolvedItems — splice preserves object identity (no destroy/recreate)
+        this.resolvedItemsSignal.update((current) => {
+            const newItems = [...current];
+            const [moved] = newItems.splice(fromIndex, 1);
+            newItems.splice(toIndex, 0, moved);
+            return newItems;
+        });
+        // Reorder form value array the same way
+        const newArray = [...currentArray];
+        const [movedValue] = newArray.splice(fromIndex, 1);
+        newArray.splice(toIndex, 0, movedValue);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        parentForm().value.set({ ...currentValue, [arrayKey]: newArray });
+    }
     /**
      * Handles remove operations from events (pop, shift, removeAt).
      * Updates resolvedItems FIRST, then form value - this ensures differential
@@ -15831,8 +16713,8 @@ class ArrayFieldComponent {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         parentForm().value.set({ ...currentValue, [arrayKey]: newArray });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ArrayFieldComponent, isStandalone: true, selector: "array-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "class.df-container-hidden": "hidden()", "attr.aria-hidden": "hidden() || null", "id": "`${key()}`", "attr.data-testid": "key()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ArrayFieldComponent, isStandalone: true, selector: "array-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "class.df-container-hidden": "hidden()", "attr.aria-hidden": "hidden() || null", "id": "`${key()}`", "attr.data-testid": "key()" } }, providers: [
             // Each array gets its own template registry to track templates used for dynamically added items
             { provide: ARRAY_TEMPLATE_REGISTRY, useFactory: () => new Map() },
             // Each array gets its own ID generator for SSR hydration compatibility
@@ -15847,15 +16729,15 @@ class ArrayFieldComponent {
         [attr.data-array-item-index]="i"
       >
         @for (field of item.fields; track $index) {
-          <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
+          <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
         }
       </div>
     }
-  `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);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);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);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.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),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);--df-grid-row-gap: var(--df-grid-row-gap-md)}.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);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.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);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.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-array-item-gap, var(--df-grid-row-gap, .5rem));width:100%}:host>*{grid-column:1/-1}:host.df-container-hidden{display:none}.df-array-item{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}.df-array-item>*{grid-column:1/-1}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);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);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);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.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),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);--df-grid-row-gap: var(--df-grid-row-gap-md)}.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);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.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);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.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-array-item-gap, var(--df-grid-row-gap, .5rem));width:100%}:host>*{grid-column:1/-1}:host.df-container-hidden{display:none}.df-array-item{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}.df-array-item>*{grid-column:1/-1}\n"], dependencies: [{ kind: "directive", type: DfFieldOutlet, selector: "[dfFieldOutlet]", inputs: ["dfFieldOutlet", "dfFieldOutletEnvironmentInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ArrayFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ArrayFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'array-field', imports: [NgComponentOutlet], template: `
+            args: [{ selector: 'array-field', imports: [DfFieldOutlet], template: `
     @for (item of resolvedItems(); track item.id; let i = $index) {
       <div
         class="df-array-item"
@@ -15865,7 +16747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         [attr.data-array-item-index]="i"
       >
         @for (field of item.fields; track $index) {
-          <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
+          <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
         }
       </div>
     }
@@ -15890,12 +16772,95 @@ var arrayField_component = /*#__PURE__*/Object.freeze({
 });
 
 /**
- * Get the length of an array FieldTree.
+ * Layout container that wraps child fields with UI chrome.
+ *
+ * Resolves children like a row, then chains wrapper components around them
+ * using imperative `ViewContainerRef.createComponent()` — each wrapper's
+ * `#fieldComponent` slot hosts the next wrapper or the children template.
+ *
+ * Does not create a new form context - fields share the parent's context.
+ * Field values are flattened into the parent form (no nesting under container key).
+ * Purely a visual/layout container with no impact on form structure.
  */
-function getArrayLength(arrayFieldTree) {
-    const value = arrayFieldTree().value();
-    return Array.isArray(value) ? value.length : 0;
+class ContainerFieldComponent {
+    destroyRef = inject(DestroyRef);
+    fieldRegistry = injectFieldRegistry();
+    injector = inject(Injector);
+    environmentInjector = inject(EnvironmentInjector);
+    eventBus = inject(EventBus);
+    logger = inject(DynamicFormLogger);
+    wrapperAutoAssociations = inject(WRAPPER_AUTO_ASSOCIATIONS);
+    defaultWrappersSignal = inject(DEFAULT_WRAPPERS, { optional: true });
+    childrenTpl = viewChild.required('childrenTpl', { read: TemplateRef });
+    wrapperContainer = viewChild.required('wrapperContainer', { read: ViewContainerRef });
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
+    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => computeContainerHostClasses('container', this.className()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.field().disabled || false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : /* istanbul ignore next */ []));
+    fieldsSource = computed(() => (this.field().fields || []), ...(ngDevMode ? [{ debugName: "fieldsSource" }] : /* istanbul ignore next */ []));
+    resolvedFields = derivedFromDeferred(this.fieldsSource, createFieldResolutionPipe(() => ({
+        loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
+        registry: this.rawFieldRegistry(),
+        injector: this.injector,
+        destroyRef: this.destroyRef,
+        onError: (fieldDef, error) => {
+            const fieldKey = fieldDef.key || '<no key>';
+            const containerKey = this.field().key || '<no key>';
+            this.logger.error(`Failed to load component for field type '${fieldDef.type}' (key: ${fieldKey}) ` +
+                `within container '${containerKey}'. Ensure the field type is registered in your field registry.`, error);
+        },
+    })), { initialValue: [], injector: this.injector });
+    wrappers = computed(() => resolveWrappers(this.field(), this.defaultWrappersSignal?.(), this.wrapperAutoAssociations), { ...(ngDevMode ? { debugName: "wrappers" } : /* istanbul ignore next */ {}), equal: isSameWrapperChain });
+    constructor() {
+        // `row` is a virtual field type backed by ContainerFieldComponent — at
+        // runtime the spread in rowFieldMapper preserves `type: 'row'` on the
+        // field input, even though the declared type is `ContainerField`. Widen
+        // here so `(events)` consumers filtering by `componentType === 'row'`
+        // keep receiving emissions.
+        setupContainerInitEffect(this.resolvedFields, this.eventBus, () => (this.field().type === 'row' ? 'row' : 'container'), () => this.field().key, this.injector);
+        createWrapperChainController({
+            vcr: this.wrapperContainer,
+            wrappers: this.wrappers,
+            renderInnermost: (slot) => slot.createEmbeddedView(this.childrenTpl()),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ContainerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ContainerFieldComponent, isStandalone: true, selector: "div[container-field]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "class.disabled": "disabled()", "class.df-container-hidden": "hidden()", "attr.aria-hidden": "hidden() || null", "id": "`${key()}`", "attr.data-testid": "key()" } }, viewQueries: [{ propertyName: "childrenTpl", first: true, predicate: ["childrenTpl"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "wrapperContainer", first: true, predicate: ["wrapperContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+    <ng-template #childrenTpl>
+      @for (field of resolvedFields(); track field.key) {
+        <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+      }
+    </ng-template>
+    <ng-container #wrapperContainer></ng-container>
+  `, isInline: true, styles: [":host{display:block;width:100%}:host.df-container-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: DfFieldOutlet, selector: "[dfFieldOutlet]", inputs: ["dfFieldOutlet", "dfFieldOutletEnvironmentInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ContainerFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[container-field]', imports: [DfFieldOutlet], template: `
+    <ng-template #childrenTpl>
+      @for (field of resolvedFields(); track field.key) {
+        <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+      }
+    </ng-template>
+    <ng-container #wrapperContainer></ng-container>
+  `, host: {
+                        '[class]': 'hostClasses()',
+                        '[class.disabled]': 'disabled()',
+                        '[class.df-container-hidden]': 'hidden()',
+                        '[attr.aria-hidden]': 'hidden() || null',
+                        '[id]': '`${key()}`',
+                        '[attr.data-testid]': 'key()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host.df-container-hidden{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { childrenTpl: [{ type: i0.ViewChild, args: ['childrenTpl', { ...{ read: TemplateRef }, isSignal: true }] }], wrapperContainer: [{ type: i0.ViewChild, args: ['wrapperContainer', { ...{ read: ViewContainerRef }, isSignal: true }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }] } });
+
+var containerField_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ContainerFieldComponent: ContainerFieldComponent,
+    default: ContainerFieldComponent
+});
 
 /**
  * Interpolates {{param}} placeholders in message with error values
@@ -16028,5 +16993,5 @@ function extractErrorParams(error) {
  * Generated bundle index. Do not edit.
  */
 
-export { hasFormValue as $, ARRAY_CONTEXT as A, BUILT_IN_FIELDS as B, ConsoleLogger as C, DynamicFormLogger as D, EventBus as E, FIELD_REGISTRY as F, GroupFieldComponent as G, applyMetaToElement as H, INITIALIZATION_TIMEOUT_MS as I, applyValidator as J, applyValidators as K, arrayEvent as L, arrayFieldMapper as M, NextPageEvent as N, baseFieldMapper as O, PageChangeEvent as P, buildBaseInputs as Q, RemoveAtIndexEvent as R, ShiftArrayItemEvent as S, createField as T, dynamicTextToObservable as U, evaluateNonFieldDisabled as V, evaluateNonFieldHidden as W, field as X, formConfig as Y, getArrayLength as Z, groupFieldMapper as _, createFieldResolutionPipe as a, interpolateParams as a0, isArrayField as a1, isCheckedField as a2, isContainerField as a3, isDisplayOnlyField as a4, isEqual as a5, isFormStateCondition as a6, isGroupField as a7, isLeafField as a8, isPageField as a9, isPropertyDerivationLogicConfig as aa, isRowField as ab, isSimplifiedArrayField as ac, isValueBearingField as ad, isValueField as ae, omit as af, pageFieldMapper as ag, provideDynamicForm as ah, resolveNextButtonDisabled as ai, resolveNonFieldDisabled as aj, resolveNonFieldHidden as ak, resolveSubmitButtonDisabled as al, resolveTokens as am, rowFieldMapper as an, textFieldMapper as ao, withEventFormValue as ap, withLoggerConfig as aq, withValueExclusionDefaults as ar, DynamicTextPipe as b, computeContainerHostClasses as c, derivedFromDeferred as d, AppendArrayItemEvent as e, ArrayFieldComponent as f, DEFAULT_PROPS as g, DEFAULT_VALIDATION_MESSAGES as h, injectFieldRegistry as i, DynamicForm as j, DynamicFormError as k, EventDispatcher as l, FIELD_SIGNAL_CONTEXT as m, FORM_OPTIONS as n, FormClearEvent as o, FormResetEvent as p, InsertArrayItemEvent as q, NoopLogger as r, setupContainerInitEffect as s, PopArrayItemEvent as t, PrependArrayItemEvent as u, validatePageNesting as v, PreviousPageEvent as w, RootFormRegistryService as x, RowFieldComponent as y, SubmitEvent as z };
-//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-DXXp5M0q.mjs.map
+export { evaluateNonFieldDisabled as $, ARRAY_CONTEXT as A, BUILT_IN_FIELDS as B, ConsoleLogger as C, DynamicFormLogger as D, EventBus as E, FIELD_REGISTRY as F, GroupFieldComponent as G, PreviousPageEvent as H, INITIALIZATION_TIMEOUT_MS as I, RootFormRegistryService as J, SubmitEvent as K, applyMetaToElement as L, MoveArrayItemEvent as M, NextPageEvent as N, applyValidator as O, PageChangeEvent as P, applyValidators as Q, RemoveAtIndexEvent as R, ShiftArrayItemEvent as S, arrayEvent as T, arrayFieldMapper as U, baseFieldMapper as V, WRAPPER_REGISTRY as W, buildBaseInputs as X, containerFieldMapper as Y, createField as Z, createWrappers as _, createFieldResolutionPipe as a, evaluateNonFieldHidden as a0, field as a1, formConfig as a2, getArrayLength as a3, groupFieldMapper as a4, hasFormValue as a5, interpolateParams as a6, isArrayField as a7, isCheckedField as a8, isContainerField as a9, withPreviousValue as aA, withValueExclusionDefaults as aB, wrapperProps as aC, isContainerTypedField as aa, isDisplayOnlyField as ab, isEqual as ac, isFormStateCondition as ad, isGroupField as ae, isLeafField as af, isPageField as ag, isRowField as ah, isSimplifiedArrayField as ai, isValueBearingField as aj, isValueField as ak, isWrapperTypeDefinition as al, isWrappersBundle as am, omit as an, pageFieldMapper as ao, provideDynamicForm as ap, resolveNextButtonDisabled as aq, resolveNonFieldDisabled as ar, resolveNonFieldHidden as as, resolveSubmitButtonDisabled as at, resolveTokens as au, rowFieldMapper as av, textFieldMapper as aw, toReadonlyFieldTree as ax, withEventFormValue as ay, withLoggerConfig as az, DfFieldOutlet as b, computeContainerHostClasses as c, derivedFromDeferred as d, DynamicTextPipe as e, dynamicTextToObservable as f, AppendArrayItemEvent as g, ArrayFieldComponent as h, injectFieldRegistry as i, ContainerFieldComponent as j, DEFAULT_PROPS as k, DEFAULT_VALIDATION_MESSAGES as l, DEFAULT_WRAPPERS as m, DynamicForm as n, DynamicFormError as o, EventDispatcher as p, FIELD_SIGNAL_CONTEXT as q, FORM_OPTIONS as r, setupContainerInitEffect as s, FormClearEvent as t, FormResetEvent as u, validatePageNesting as v, InsertArrayItemEvent as w, NoopLogger as x, PopArrayItemEvent as y, PrependArrayItemEvent as z };
+//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-D276M2vh.mjs.map