@ng-forge/dynamic-forms 0.1.1 → 0.1.3

package/fesm2022/{ng-forge-dynamic-forms-ng-forge-dynamic-forms-Dcd04rfS.mjs → ng-forge-dynamic-forms-ng-forge-dynamic-forms-B_676NHl.mjs}

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { isSignal, computed, runInInjectionContext, InjectionToken, inject, signal, Injectable, untracked, input, linkedSignal, ChangeDetectionStrategy, Component, DestroyRef, Injector, model, afterNextRender, makeEnvironmentProviders, Pipe } from '@angular/core';
+import { isSignal, computed, runInInjectionContext, InjectionToken, inject, isDevMode, signal, Injectable, untracked, input, linkedSignal, ChangeDetectionStrategy, Component, DestroyRef, Injector, model, afterNextRender, makeEnvironmentProviders, Pipe } from '@angular/core';
 import { NgComponentOutlet } from '@angular/common';
-import { submit, pattern, maxLength, minLength, max, min, email, required, validate, validateAsync, validateHttp, disabled, readonly, hidden, applyEach, applyWhenValue, applyWhen, apply, schema, validateTree, form } from '@angular/forms/signals';
+import { submit, email, min, max, minLength, maxLength, pattern, required, validate, validateAsync, validateHttp, disabled, readonly, hidden, applyEach, applyWhenValue, applyWhen, apply, schema, validateTree, form } from '@angular/forms/signals';
 import { toObservable, toSignal, takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
-import { defer, combineLatest, from, map, catchError, of, isObservable, firstValueFrom, switchMap, EMPTY, Subject, filter, pipe, forkJoin, scan as scan$1 } from 'rxjs';
-import { scan, map as map$1, filter as filter$1, take, switchMap as switchMap$1, shareReplay } from 'rxjs/operators';
+import { defer, combineLatest, from, map, catchError, of, pipe, switchMap, forkJoin, scan, isObservable, firstValueFrom, EMPTY, Subject, filter } from 'rxjs';
+import { scan as scan$1, map as map$1, filter as filter$1, take, switchMap as switchMap$1, shareReplay } from 'rxjs/operators';
 import { explicitEffect } from 'ngxtension/explicit-effect';
 
 /**
@@ -84,7 +84,7 @@ function derivedFromDeferred(source, operator, options) {
  *   `
  * })
  * export class FieldComponent {
- *   field: FieldDef<any>;
+ *   field: FieldDef<unknown>;
  *   getGridClassString = getGridClassString;
  * }
  * ```
@@ -92,11 +92,10 @@ function derivedFromDeferred(source, operator, options) {
  * @public
  */
 function getGridClassString(fieldDef) {
-    const classes = [];
-    if (typeof fieldDef.col === 'number' && fieldDef.col > 0 && fieldDef.col <= 12) {
-        classes.push(`df-col-${fieldDef.col}`);
+    if (typeof fieldDef.col === 'number' && Number.isInteger(fieldDef.col) && fieldDef.col > 0 && fieldDef.col <= 12) {
+        return `df-col-${fieldDef.col}`;
     }
-    return classes.join(' ');
+    return '';
 }
 
 /**
@@ -228,6 +227,19 @@ function reconcileFields(prev, curr) {
         return field;
     });
 }
+/**
+ * Creates an RxJS pipe for resolving field definitions to rendered components.
+ * Used by container components (page, group) to resolve their child fields.
+ */
+function createFieldResolutionPipe(getContext) {
+    return pipe(switchMap((fields) => {
+        if (!fields || fields.length === 0) {
+            return of([]);
+        }
+        const context = getContext();
+        return forkJoin(fields.map((f) => resolveField(f, context)));
+    }), map((fields) => fields.filter((f) => f !== undefined)), scan(reconcileFields, []));
+}
 
 /**
  * Wraps a submission action to handle both Promise and Observable returns.
@@ -332,7 +344,7 @@ function omit(obj, keys) {
  */
 function keyBy(array, key) {
     return array.reduce((acc, item) => {
-        acc[item[key]] = item;
+        acc[String(item[key])] = item;
         return acc;
     }, {});
 }
@@ -357,29 +369,49 @@ function mapValues(obj, fn) {
     }, {});
 }
 /**
- * Memoizes a function with optional custom cache key resolver
- * Native replacement for lodash memoize()
+ * Options for memoize function
+ */
+/** Default maximum cache size for memoized functions */
+const DEFAULT_MEMOIZE_MAX_SIZE = 100;
+/**
+ * Memoizes a function with LRU cache eviction and optional custom cache key resolver.
  *
  * @param fn - Function to memoize
- * @param resolver - Optional function to generate cache key from arguments
+ * @param resolverOrOptions - Optional key resolver function or options object
  * @returns Memoized function
  *
  * @example
  * ```typescript
  * const expensive = (a: number, b: number) => a + b;
- * const memoized = memoize(expensive, (a, b) => `${a}-${b}`);
- * memoized(1, 2); // Computed
- * memoized(1, 2); // Cached
+ * const memoized = memoize(expensive); // Uses default maxSize of 100
+ *
+ * // With custom resolver
+ * const withResolver = memoize(expensive, (a, b) => `${a}-${b}`);
+ *
+ * // With custom maxSize
+ * const small = memoize(expensive, { maxSize: 10 });
  * ```
  */
-function memoize(fn, resolver) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function memoize(fn, resolverOrOptions) {
+    const options = typeof resolverOrOptions === 'function' ? { resolver: resolverOrOptions } : (resolverOrOptions ?? {});
+    const { resolver, maxSize = DEFAULT_MEMOIZE_MAX_SIZE } = options;
     const cache = new Map();
     return ((...args) => {
         const key = resolver ? resolver(...args) : JSON.stringify(args);
         if (cache.has(key)) {
-            return cache.get(key);
+            const value = cache.get(key);
+            cache.delete(key);
+            cache.set(key, value);
+            return value;
         }
         const result = fn(...args);
+        if (cache.size >= maxSize) {
+            const oldestKey = cache.keys().next().value;
+            if (oldestKey !== undefined) {
+                cache.delete(oldestKey);
+            }
+        }
         cache.set(key, result);
         return result;
     });
@@ -421,15 +453,27 @@ function isEqual(a, b) {
     }
     // Handle objects
     if (typeof a === 'object' && typeof b === 'object') {
-        const keysA = Object.keys(a);
-        const keysB = Object.keys(b);
+        const objA = a;
+        const objB = b;
+        const keysA = Object.keys(objA);
+        const keysB = Object.keys(objB);
         if (keysA.length !== keysB.length)
             return false;
-        return keysA.every((key) => keysB.includes(key) && isEqual(a[key], b[key]));
+        return keysA.every((key) => keysB.includes(key) && isEqual(objA[key], objB[key]));
     }
     // Primitives - use Object.is to handle NaN correctly (NaN === NaN is false, but Object.is(NaN, NaN) is true)
     return Object.is(a, b);
 }
+/**
+ * Normalizes a fields collection to an array.
+ * Handles both array format and object format (keyed by field key).
+ *
+ * @param fields - Fields as array or object
+ * @returns Fields as array
+ */
+function normalizeFieldsArray(fields) {
+    return Array.isArray(fields) ? [...fields] : Object.values(fields);
+}
 
 /**
  * Injection token for providing field signal context to mappers and components.
@@ -691,6 +735,101 @@ function injectFieldRegistry() {
     };
 }
 
+/**
+ * Log levels for the dynamic forms logger.
+ * Each level includes all levels above it (more severe).
+ *
+ * - Off: No logging
+ * - Error: Only errors
+ * - Warn: Errors + warnings
+ * - Info: Errors + warnings + info
+ * - Debug: All messages including debug
+ */
+var LogLevel;
+(function (LogLevel) {
+    /** Disable all logging */
+    LogLevel[LogLevel["Off"] = 0] = "Off";
+    /** Only log errors */
+    LogLevel[LogLevel["Error"] = 1] = "Error";
+    /** Log errors and warnings */
+    LogLevel[LogLevel["Warn"] = 2] = "Warn";
+    /** Log errors, warnings, and info messages */
+    LogLevel[LogLevel["Info"] = 3] = "Info";
+    /** Log all messages including debug */
+    LogLevel[LogLevel["Debug"] = 4] = "Debug";
+})(LogLevel || (LogLevel = {}));
+
+/**
+ * Console-based logger implementation.
+ * Respects log level configuration to filter messages.
+ */
+class ConsoleLogger {
+    level;
+    prefix = '[Dynamic Forms]';
+    constructor(level) {
+        this.level = level;
+    }
+    debug(message, ...args) {
+        if (this.level >= LogLevel.Debug) {
+            console.debug(this.prefix, message, ...args);
+        }
+    }
+    info(message, ...args) {
+        if (this.level >= LogLevel.Info) {
+            console.info(this.prefix, message, ...args);
+        }
+    }
+    warn(message, ...args) {
+        if (this.level >= LogLevel.Warn) {
+            console.warn(this.prefix, message, ...args);
+        }
+    }
+    error(message, ...args) {
+        if (this.level >= LogLevel.Error) {
+            console.error(this.prefix, message, ...args);
+        }
+    }
+}
+
+/**
+ * No-operation logger implementation.
+ * All methods are no-ops - used in production by default.
+ */
+class NoopLogger {
+    debug() {
+        // Intentionally empty
+    }
+    info() {
+        // Intentionally empty
+    }
+    warn() {
+        // Intentionally empty
+    }
+    error() {
+        // Intentionally empty
+    }
+}
+
+/**
+ * Injection token for the dynamic forms logger.
+ *
+ * Default behavior:
+ * - Development mode: ConsoleLogger with LogLevel.Warn
+ * - Production mode: NoopLogger (silent)
+ *
+ * Override by providing a custom logger via withLogger() feature
+ * or by providing directly to this token.
+ */
+const DYNAMIC_FORM_LOGGER = new InjectionToken('DYNAMIC_FORM_LOGGER', {
+    providedIn: 'root',
+    factory: () => {
+        if (isDevMode()) {
+            return new ConsoleLogger(LogLevel.Warn);
+        }
+        return new NoopLogger();
+    },
+});
+
 /**
  * Registry service that maintains references to root form fields.
  * This provides a type-safe way to access root form values from child fields
@@ -867,6 +1006,7 @@ function isChildFieldContext(context) {
  */
 class FieldContextRegistryService {
     rootFormRegistry = inject(RootFormRegistryService);
+    logger = inject(DYNAMIC_FORM_LOGGER);
     /**
      * Creates an evaluation context for a field by combining:
      * - The field's current value
@@ -895,43 +1035,25 @@ class FieldContextRegistryService {
         // - Validators still run when their own field value changes (via fieldValue)
         // - Cross-field validation still works, just without cascading re-evaluation
         const formValue = untracked(() => this.rootFormRegistry.getFormValue(formId));
-        // Get field path from form context
-        const formContext = this.rootFormRegistry.getFormContext(formId);
-        const fieldPath = this.extractFieldPath(fieldContext, formContext);
+        const fieldPath = this.extractFieldPath(fieldContext);
         return {
             fieldValue,
             formValue,
             fieldPath,
             customFunctions: customFunctions || {},
+            logger: this.logger,
         };
     }
     /**
-     * Registers a field path mapping for a specific form.
-     * This can be called when fields are created to maintain path information.
-     */
-    registerFieldPath(fieldKey, parentPath, formId = 'default') {
-        const context = this.rootFormRegistry.getFormContext(formId);
-        const fullPath = parentPath ? `${parentPath}.${fieldKey}` : String(fieldKey);
-        context.fieldPaths = context.fieldPaths || {};
-        context.fieldPaths[String(fieldKey)] = fullPath;
-        this.rootFormRegistry.registerFormContext(context, formId);
-    }
-    /**
-     * Extracts the field path for a given field context.
-     * This is a simplified implementation that could be enhanced
-     * based on the specific needs of the form library.
+     * Extracts the field path (key) for a given field context.
      */
-    extractFieldPath(fieldContext, formContext) {
-        // Check if the field context has a key property (for child fields)
-        const extendedContext = fieldContext;
-        if (isChildFieldContext(extendedContext)) {
+    extractFieldPath(fieldContext) {
+        if (isChildFieldContext(fieldContext)) {
             try {
-                const key = extendedContext.key();
-                const fieldPaths = formContext.fieldPaths || {};
-                return fieldPaths[String(key)] || String(key);
+                return String(fieldContext.key());
             }
             catch (error) {
-                console.warn('[Dynamic Forms] Unable to extract field key:', error);
+                this.logger.warn('Unable to extract field key:', error);
             }
         }
         // For root fields or when key is not available
@@ -957,19 +1079,39 @@ class FieldContextRegistryService {
      * hoisted to form-level using validateTree.
      */
     createReactiveEvaluationContext(fieldContext, customFunctions, formId = 'default') {
-        // Read field value reactively (creates a dependency)
         const fieldValue = fieldContext.value();
-        // Get form value using the new unified method that prefers the direct signal
-        // This creates reactive dependencies on the form value signal
         const formValue = this.rootFormRegistry.getFormValue(formId);
-        // Get field path from form context
-        const formContext = this.rootFormRegistry.getFormContext(formId);
-        const fieldPath = this.extractFieldPath(fieldContext, formContext);
+        const fieldPath = this.extractFieldPath(fieldContext);
         return {
             fieldValue,
             formValue,
             fieldPath,
             customFunctions: customFunctions || {},
+            logger: this.logger,
+        };
+    }
+    /**
+     * Creates an evaluation context for display-only components (text fields, pages)
+     * that don't have their own FieldContext.
+     *
+     * This is useful for:
+     * - Text fields (display-only, not part of form schema)
+     * - Pages (containers that need to evaluate visibility logic)
+     *
+     * Uses reactive form value access to allow logic re-evaluation when form values change.
+     *
+     * @param fieldPath - The key/path of the display-only component
+     * @param customFunctions - Optional custom functions for expression evaluation
+     * @param formId - Optional form identifier (defaults to 'default')
+     */
+    createDisplayOnlyContext(fieldPath, customFunctions, formId = 'default') {
+        const formValue = this.rootFormRegistry.getFormValue(formId);
+        return {
+            fieldValue: undefined,
+            formValue,
+            fieldPath,
+            customFunctions: customFunctions || {},
+            logger: this.logger,
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FieldContextRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -1461,7 +1603,6 @@ var TokenType;
     TokenType["RBRACKET"] = "RBRACKET";
     // Special
     TokenType["EOF"] = "EOF";
-    TokenType["TYPEOF"] = "TYPEOF";
 })(TokenType || (TokenType = {}));
 /**
  * Parser error with position information
@@ -1596,8 +1737,6 @@ class Tokenizer {
                 return TokenType.NULL;
             case 'undefined':
                 return TokenType.UNDEFINED;
-            case 'typeof':
-                return TokenType.TYPEOF;
             default:
                 return TokenType.IDENTIFIER;
         }
@@ -1757,7 +1896,7 @@ class Parser {
         return node;
     }
     parseUnary() {
-        if (this.match(TokenType.NOT, TokenType.MINUS, TokenType.PLUS, TokenType.TYPEOF)) {
+        if (this.match(TokenType.NOT, TokenType.MINUS, TokenType.PLUS)) {
             const operator = this.previous().value;
             const operand = this.parseUnary();
             return { type: 'UnaryOp', operator, operand };
@@ -2030,10 +2169,10 @@ class Evaluator {
         }
     }
     evaluateIdentifier(name) {
-        if (!(name in this.scope)) {
-            return undefined;
+        if (name in this.scope) {
+            return this.scope[name];
         }
-        return this.scope[name];
+        return undefined;
     }
     evaluateMemberAccess(node) {
         const obj = this.evaluate(node.object);
@@ -2051,6 +2190,16 @@ class Evaluator {
         return undefined;
     }
     evaluateBinaryOp(node) {
+        // Handle short-circuit evaluation for logical operators
+        if (node.operator === '&&') {
+            const left = this.evaluate(node.left);
+            return left ? this.evaluate(node.right) : left;
+        }
+        if (node.operator === '||') {
+            const left = this.evaluate(node.left);
+            return left ? left : this.evaluate(node.right);
+        }
+        // For all other operators, evaluate both sides
         const left = this.evaluate(node.left);
         const right = this.evaluate(node.right);
         switch (node.operator) {
@@ -2062,8 +2211,12 @@ class Evaluator {
             case '*':
                 return left * right;
             case '/':
+                if (right === 0)
+                    return null;
                 return left / right;
             case '%':
+                if (right === 0)
+                    return null;
                 return left % right;
             // Comparison - using == and != intentionally for loose equality
             case '==':
@@ -2082,11 +2235,6 @@ class Evaluator {
                 return left >= right;
             case '<=':
                 return left <= right;
-            // Logical
-            case '&&':
-                return left && right;
-            case '||':
-                return left || right;
             default:
                 throw new ExpressionParserError(`[Dynamic Forms] Unknown binary operator: ${node.operator}`, 0, this.expression);
         }
@@ -2100,8 +2248,6 @@ class Evaluator {
                 return -operand;
             case '+':
                 return +operand;
-            case 'typeof':
-                return typeof operand;
             default:
                 throw new ExpressionParserError(`[Dynamic Forms] Unknown unary operator: ${node.operator}`, 0, this.expression);
         }
@@ -2117,7 +2263,7 @@ class Evaluator {
         if (BLOCKED_PROPERTIES.has(methodName)) {
             throw new ExpressionParserError(`[Dynamic Forms] Property "${methodName}" is not accessible for security reasons`, 0, this.expression);
         }
-        // Check if the method is in the whitelist
+        // Check if the method is in the instance method whitelist
         if (!this.isMethodSafe(obj, methodName)) {
             throw new ExpressionParserError(`[Dynamic Forms] Method "${methodName}" is not allowed for security reasons`, 0, this.expression);
         }
@@ -2299,7 +2445,7 @@ function evaluateJavaScriptExpression(expression, context) {
         return !!result;
     }
     catch (error) {
-        console.error('[Dynamic Forms] Error evaluating JavaScript expression:', expression.expression, error);
+        context.logger.error('Error evaluating JavaScript expression:', expression.expression, error);
         return false;
     }
 }
@@ -2308,14 +2454,14 @@ function evaluateCustomFunction(expression, context) {
         return false;
     const customFn = context.customFunctions?.[expression.expression];
     if (!customFn) {
-        console.error('[Dynamic Forms] Custom function not found:', expression.expression);
+        context.logger.error('Custom function not found:', expression.expression);
         return false;
     }
     try {
         return !!customFn(context);
     }
     catch (error) {
-        console.error('[Dynamic Forms] Error executing custom function:', expression.expression, error);
+        context.logger.error('Error executing custom function:', expression.expression, error);
         return false;
     }
 }
@@ -2357,23 +2503,54 @@ function createLogicFunction(expression) {
 }
 
 /**
- * Create a dynamic value function from an expression string
- * Uses secure AST-based parsing instead of eval() or new Function()
+ * Cache for memoized dynamic value functions, keyed by service instance.
+ * Uses WeakMap to automatically clean up when service is garbage collected.
+ * Inner Map is keyed by expression string.
+ */
+const dynamicValueFunctionCache = new WeakMap();
+/**
+ * Create a dynamic value function from an expression string.
+ * Uses secure AST-based parsing instead of eval() or new Function().
+ *
+ * Optimizations:
+ * - Injects FieldContextRegistryService at creation time, not execution time
+ * - Caches created functions by expression string per injection context
+ * - Expression parsing is already cached by ExpressionParser's LRU cache
+ *
+ * @param expression The expression string to evaluate
+ * @returns A LogicFn that evaluates the expression in the context of a field
  */
 function createDynamicValueFunction(expression) {
-    return (ctx) => {
+    // Inject services during factory creation, not during execution
+    // This captures the service instance in the closure
+    const fieldContextRegistry = inject(FieldContextRegistryService);
+    const logger = inject(DYNAMIC_FORM_LOGGER);
+    // Get or create cache for this injection context
+    let contextCache = dynamicValueFunctionCache.get(fieldContextRegistry);
+    if (!contextCache) {
+        contextCache = new Map();
+        dynamicValueFunctionCache.set(fieldContextRegistry, contextCache);
+    }
+    // Check cache first
+    const cached = contextCache.get(expression);
+    if (cached) {
+        return cached;
+    }
+    const fn = (ctx) => {
         // Create evaluation context using the registry-based approach
-        const fieldContextRegistry = inject(FieldContextRegistryService);
         const evaluationContext = fieldContextRegistry.createEvaluationContext(ctx);
         try {
-            // Use secure AST-based expression parser
+            // Use secure AST-based expression parser (already has LRU cache)
             return ExpressionParser.evaluate(expression, evaluationContext);
         }
         catch (error) {
-            console.error('[Dynamic Forms] Error evaluating dynamic expression:', expression, error);
+            logger.error('Error evaluating dynamic expression:', expression, error);
             return undefined;
         }
     };
+    // Cache the function
+    contextCache.set(expression, fn);
+    return fn;
 }
 
 /**
@@ -2601,136 +2778,98 @@ function isCrossFieldSchema(config, context) {
     return isCrossFieldExpression(config.condition, context);
 }
 
-/**
- * Helper to create conditional logic function from when expression.
- * Returns undefined if no when condition is specified.
- * Reduces duplication across validator types.
- */
-function createConditionalLogic(when) {
-    return when ? createLogicFunction(when) : undefined;
+function applyEmailValidator(path) {
+    email(path);
 }
-/**
- * Safely cast a SchemaPathTree to SchemaPath with Supported rules.
- *
- * This is safe when TValue is not an AbstractControl, because:
- * - SchemaPathTree<T> for non-AbstractControl is: SchemaPath<T, Supported> & {...nested}
- * - The intersection type is structurally compatible with SchemaPath<T, Supported>
- * - We only work with signal forms, never reactive forms (AbstractControl)
- *
- * TypeScript can't automatically narrow this because SchemaPathTree is defined as a
- * conditional type, but at runtime the value is always the correct type for our use case.
- */
-function toSupportedPath$2(path) {
-    // The cast is safe because SchemaPathTree extends SchemaPath, and we constrain TValue
-    // to exclude AbstractControl in our public APIs (we never pass reactive form controls)
-    return path;
+function applyMinValidator(path, value, expression) {
+    if (expression) {
+        min(path, createDynamicValueFunction(expression));
+    }
+    else {
+        min(path, value);
+    }
 }
-/**
- * Apply validator configuration to field path, following the logic pattern.
- *
- * Accepts both SchemaPath and SchemaPathTree to support being called from both
- * individual field mappings and schema functions.
- *
- * Note: ValidatorConfig is runtime configuration that doesn't encode the field's
- * TypeScript type. The type assertions to specific types (string, number) are safe
- * because Angular's validators perform runtime value checks regardless of the static
- * type parameter.
- *
- * Cross-field validators (those referencing formValue.*) are skipped at field level.
- * They are collected by the parent form component using collectCrossFieldEntries
- * and executed at form level using validateTree.
- *
- * @param config The validator configuration
- * @param fieldPath The field path to apply the validator to
- * @param fieldKey Optional field key (used for logging)
- */
-function applyValidator(config, fieldPath, fieldKey) {
-    const path = toSupportedPath$2(fieldPath);
-    // Check if this is a built-in validator with a cross-field expression
-    // These are collected at form level - skip here
-    if (isCrossFieldBuiltInValidator(config)) {
-        // Cross-field validators are handled at form level via validateTree
-        return;
+function applyMaxValidator(path, value, expression) {
+    if (expression) {
+        max(path, createDynamicValueFunction(expression));
     }
-    // Check if the validator has a cross-field `when` condition
-    // These are collected at form level - skip here
-    if (hasCrossFieldWhenCondition(config)) {
-        // Cross-field validators are handled at form level via validateTree
+    else {
+        max(path, value);
+    }
+}
+function applyMinLengthValidator(path, value, expression) {
+    if (expression) {
+        minLength(path, createDynamicValueFunction(expression));
+    }
+    else {
+        minLength(path, value);
+    }
+}
+function applyMaxLengthValidator(path, value, expression) {
+    if (expression) {
+        maxLength(path, createDynamicValueFunction(expression));
+    }
+    else {
+        maxLength(path, value);
+    }
+}
+function applyPatternValidator(path, value, expression) {
+    if (expression) {
+        pattern(path, createDynamicValueFunction(expression));
+    }
+    else {
+        pattern(path, value);
+    }
+}
+function createConditionalLogic(when) {
+    return when ? createLogicFunction(when) : undefined;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Dynamic forms require any at the Angular API boundary
+function applyValidator(config, fieldPath) {
+    const path = fieldPath;
+    if (isCrossFieldBuiltInValidator(config) || hasCrossFieldWhenCondition(config)) {
         return;
     }
     switch (config.type) {
         case 'required':
             if (config.when) {
-                const whenLogic = createLogicFunction(config.when);
-                required(path, { when: whenLogic });
+                required(path, { when: createLogicFunction(config.when) });
             }
             else {
                 required(path);
             }
             break;
         case 'email':
-            email(fieldPath);
+            applyEmailValidator(fieldPath);
             break;
         case 'min':
             if (typeof config.value === 'number') {
-                if (config.expression) {
-                    const dynamicMin = createDynamicValueFunction(config.expression);
-                    min(fieldPath, dynamicMin);
-                }
-                else {
-                    min(fieldPath, config.value);
-                }
+                applyMinValidator(fieldPath, config.value, config.expression);
             }
             break;
         case 'max':
             if (typeof config.value === 'number') {
-                if (config.expression) {
-                    const dynamicMax = createDynamicValueFunction(config.expression);
-                    max(fieldPath, dynamicMax);
-                }
-                else {
-                    max(fieldPath, config.value);
-                }
+                applyMaxValidator(fieldPath, config.value, config.expression);
             }
             break;
         case 'minLength':
             if (typeof config.value === 'number') {
-                if (config.expression) {
-                    const dynamicMinLength = createDynamicValueFunction(config.expression);
-                    minLength(fieldPath, dynamicMinLength);
-                }
-                else {
-                    minLength(fieldPath, config.value);
-                }
+                applyMinLengthValidator(fieldPath, config.value, config.expression);
             }
             break;
         case 'maxLength':
             if (typeof config.value === 'number') {
-                if (config.expression) {
-                    const dynamicMaxLength = createDynamicValueFunction(config.expression);
-                    // MaxLength validator expects SchemaPath<string>
-                    maxLength(fieldPath, dynamicMaxLength);
-                }
-                else {
-                    maxLength(fieldPath, config.value);
-                }
+                applyMaxLengthValidator(fieldPath, config.value, config.expression);
             }
             break;
         case 'pattern':
             if (config.value instanceof RegExp || typeof config.value === 'string') {
                 const regexPattern = typeof config.value === 'string' ? new RegExp(config.value) : config.value;
-                if (config.expression) {
-                    const dynamicPattern = createDynamicValueFunction(config.expression);
-                    // Pattern validator expects SchemaPath<string>
-                    pattern(fieldPath, dynamicPattern);
-                }
-                else {
-                    pattern(fieldPath, regexPattern);
-                }
+                applyPatternValidator(fieldPath, regexPattern, config.expression);
             }
             break;
         case 'custom':
-            applyCustomValidator(config, path, fieldKey);
+            applyCustomValidator(config, path);
             break;
         case 'customAsync':
             applyAsyncValidator(config, path);
@@ -2740,95 +2879,70 @@ function applyValidator(config, fieldPath, fieldKey) {
             break;
     }
 }
-/**
- * Apply custom validator to field path using Angular's public validate() API
- * Supports both function-based and expression-based validators.
- *
- * Cross-field validators (those referencing formValue.*) are skipped at field level.
- * They are collected at form level and executed via validateTree.
- *
- * @param config The custom validator configuration
- * @param fieldPath The field path to apply validation to
- * @param fieldKey Optional field key (used for logging)
- */
-function applyCustomValidator(config, fieldPath, fieldKey) {
-    // Check if this is a cross-field validator - skip at field level
+function applyCustomValidator(config, fieldPath) {
     if (isCrossFieldValidator(config)) {
-        // Cross-field validators are handled at form level via validateTree
         return;
     }
-    // Non-cross-field validators: apply at field level as before
     let validatorFn;
     if (config.expression) {
-        // Expression-based validator
         validatorFn = createExpressionValidator(config);
     }
     else if (config.functionName) {
-        // Function-based validator
         validatorFn = createFunctionValidator(config);
     }
     else {
-        console.warn('[Dynamic Forms] Custom validator must have either "expression" or "functionName"');
+        const logger = inject(DYNAMIC_FORM_LOGGER);
+        logger.warn('Custom validator must have either "expression" or "functionName"');
         return;
     }
-    // Apply with conditional logic if specified
     const whenLogic = createConditionalLogic(config.when);
-    if (whenLogic) {
-        const conditionalValidator = (ctx) => {
-            if (!whenLogic(ctx)) {
-                return null; // Condition not met, skip validation
-            }
-            return validatorFn(ctx);
-        };
-        validate(fieldPath, conditionalValidator);
-    }
-    else {
-        validate(fieldPath, validatorFn);
-    }
+    validate(fieldPath, (ctx) => {
+        if (whenLogic && !whenLogic(ctx))
+            return null;
+        return validatorFn(ctx);
+    });
 }
-/**
- * Create a function-based validator using registered validator functions
- */
 function createFunctionValidator(config) {
+    const logger = inject(DYNAMIC_FORM_LOGGER);
+    const functionName = config.functionName;
+    if (!functionName) {
+        logger.warn('Custom validator missing functionName');
+        return () => null;
+    }
     const registry = inject(FunctionRegistryService);
-    const validatorFn = registry.getValidator(config.functionName);
+    const validatorFn = registry.getValidator(functionName);
     if (!validatorFn) {
-        console.warn(`[Dynamic Forms] Custom validator "${config.functionName}" not found in registry. ` +
+        logger.warn(`Custom validator "${functionName}" not found in registry. ` +
             `Ensure it's registered using customFnConfig.validators or check the function name for typos.`);
         return () => null;
     }
-    return (ctx) => {
-        return validatorFn(ctx, config.params);
-    };
+    return (ctx) => validatorFn(ctx, config.params);
 }
-/**
- * Create an expression-based validator using secure AST evaluation
- */
 function createExpressionValidator(config) {
+    const logger = inject(DYNAMIC_FORM_LOGGER);
+    const expression = config.expression;
+    if (!expression) {
+        logger.warn('Custom validator missing expression');
+        return () => null;
+    }
     const fieldContextRegistry = inject(FieldContextRegistryService);
     const functionRegistry = inject(FunctionRegistryService);
     return (ctx) => {
         try {
-            // Create evaluation context from FieldContext
             const evaluationContext = fieldContextRegistry.createEvaluationContext(ctx, functionRegistry.getCustomFunctions());
-            // Evaluate expression securely using AST parser
             const result = ExpressionParser.evaluate(config.expression, evaluationContext);
-            // If expression returns truthy, validation passes (no error)
-            // If expression returns falsy, validation fails
             if (result) {
-                return null; // Validation passes
+                return null;
             }
-            // Validation failed - return error with kind
             const kind = config.kind || 'custom';
             const validationError = { kind };
-            // Evaluate and include errorParams for message interpolation
             if (config.errorParams) {
                 Object.entries(config.errorParams).forEach(([key, expression]) => {
                     try {
                         validationError[key] = ExpressionParser.evaluate(expression, evaluationContext);
                     }
                     catch (err) {
-                        console.warn(`[Dynamic Forms] Error evaluating errorParam "${key}":`, expression, err);
+                        logger.warn(`Error evaluating errorParam "${key}":`, expression, err);
                     }
                 });
             }
@@ -2836,8 +2950,8 @@ function createExpressionValidator(config) {
         }
         catch (error) {
             // Gracefully degrade on errors (e.g., typos in field names, undefined functions)
-            // Log to console for debugging while keeping form functional
-            console.error('[Dynamic Forms] Error evaluating custom validator expression:', config.expression, error);
+            // Log for debugging while keeping form functional
+            logger.error('Error evaluating custom validator expression:', expression, error);
             return { kind: config.kind || 'custom' };
         }
     };
@@ -2852,42 +2966,26 @@ function createExpressionValidator(config) {
  * - onError: Optional handler for resource errors
  */
 function applyAsyncValidator(config, fieldPath) {
+    const logger = inject(DYNAMIC_FORM_LOGGER);
     const registry = inject(FunctionRegistryService);
-    // Get async validator config from registry
     const validatorConfig = registry.getAsyncValidator(config.functionName);
     if (!validatorConfig) {
-        console.warn(`[Dynamic Forms] Async validator "${config.functionName}" not found in registry. ` +
+        logger.warn(`Async validator "${config.functionName}" not found in registry. ` +
             `Ensure it's registered using customFnConfig.asyncValidators or check the function name for typos.`);
         return;
     }
-    // Build Angular's AsyncValidatorOptions
+    const whenLogic = createConditionalLogic(config.when);
     const asyncOptions = {
         params: (ctx) => {
+            if (whenLogic && !whenLogic(ctx))
+                return undefined;
             return validatorConfig.params(ctx, config.params);
         },
         factory: validatorConfig.factory,
         onSuccess: validatorConfig.onSuccess,
         onError: validatorConfig.onError,
     };
-    // Apply with conditional logic if specified
-    const whenLogic = createConditionalLogic(config.when);
-    if (whenLogic) {
-        // For conditional async validators, we wrap the params function
-        const conditionalOptions = {
-            ...asyncOptions,
-            params: (ctx) => {
-                if (!whenLogic(ctx)) {
-                    return undefined; // Skip validation when condition not met
-                }
-                return asyncOptions.params(ctx);
-            },
-        };
-        // TypeScript needs help with the ResourceRef generic - the types are correct at runtime
-        validateAsync(fieldPath, conditionalOptions);
-    }
-    else {
-        validateAsync(fieldPath, asyncOptions);
-    }
+    validateAsync(fieldPath, asyncOptions);
 }
 /**
  * Apply HTTP validator to field path using Angular's public validateHttp() API
@@ -2898,88 +2996,40 @@ function applyAsyncValidator(config, fieldPath) {
  * - onError: Optional handler for HTTP errors
  */
 function applyHttpValidator(config, fieldPath) {
+    const logger = inject(DYNAMIC_FORM_LOGGER);
     const registry = inject(FunctionRegistryService);
-    // Get HTTP validator config from registry
     const httpValidatorConfig = registry.getHttpValidator(config.functionName);
     if (!httpValidatorConfig) {
-        console.warn(`[Dynamic Forms] HTTP validator "${config.functionName}" not found in registry. ` +
+        logger.warn(`HTTP validator "${config.functionName}" not found in registry. ` +
             `Ensure it's registered using customFnConfig.httpValidators or check the function name for typos.`);
         return;
     }
-    // Build Angular's HttpValidatorOptions
+    const whenLogic = createConditionalLogic(config.when);
     const httpOptions = {
         request: (ctx) => {
+            if (whenLogic && !whenLogic(ctx))
+                return undefined;
             return httpValidatorConfig.request(ctx, config.params);
         },
         onSuccess: httpValidatorConfig.onSuccess,
         onError: httpValidatorConfig.onError,
     };
-    // Apply with conditional logic if specified
-    const whenLogic = createConditionalLogic(config.when);
-    if (whenLogic) {
-        // For conditional HTTP validators, we wrap the request function
-        const conditionalOptions = {
-            ...httpOptions,
-            request: (ctx) => {
-                if (!whenLogic(ctx)) {
-                    return undefined; // Skip validation when condition not met
-                }
-                return httpOptions.request(ctx);
-            },
-        };
-        // TypeScript needs help with the HttpResourceRequest generic - the types are correct at runtime
-        validateHttp(fieldPath, conditionalOptions);
-    }
-    else {
-        validateHttp(fieldPath, httpOptions);
-    }
+    validateHttp(fieldPath, httpOptions);
 }
-/**
- * Apply multiple validators to a field path
- *
- * @param configs Array of validator configurations
- * @param fieldPath The field path to apply validators to
- * @param fieldKey Optional field key (used for logging)
- */
-function applyValidators(configs, fieldPath, fieldKey) {
-    configs.forEach((config) => applyValidator(config, fieldPath, fieldKey));
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Dynamic forms require any at the Angular API boundary
+function applyValidators(configs, fieldPath) {
+    configs.forEach((config) => applyValidator(config, fieldPath));
 }
 
-/**
- * Safely cast a SchemaPathTree to SchemaPath with Supported rules.
- * See validator-factory.ts for detailed explanation of why this is safe.
- */
-function toSupportedPath$1(path) {
-    return path;
-}
-/**
- * Apply logic configuration to field path.
- * Accepts both SchemaPath and SchemaPathTree for flexibility.
- *
- * Cross-field logic (referencing formValue.*) is handled automatically by
- * createLogicFunction which uses RootFormRegistryService to access the
- * root form value. No special context or pre-computed signals needed.
- *
- * @param config The logic configuration
- * @param fieldPath The Angular Signal Forms path
- */
 function applyLogic(config, fieldPath) {
-    const path = toSupportedPath$1(fieldPath);
-    // Handle static boolean conditions
+    const path = fieldPath;
     if (typeof config.condition === 'boolean') {
-        const staticLogicFn = () => config.condition;
-        applyLogicFn(config.type, path, staticLogicFn);
+        applyLogicFn(config.type, path, () => config.condition);
         return;
     }
-    // Create logic function from condition expression
-    // Cross-field references (formValue.*) are handled automatically via RootFormRegistryService
-    const condition = config.condition;
-    const logicFn = createLogicFunction(condition);
+    const logicFn = createLogicFunction(config.condition);
     applyLogicFn(config.type, path, logicFn);
 }
-/**
- * Applies a logic function to a path for a specific logic type.
- */
 function applyLogicFn(type, path, logicFn) {
     switch (type) {
         case 'hidden':
@@ -2996,12 +3046,6 @@ function applyLogicFn(type, path, logicFn) {
             break;
     }
 }
-/**
- * Apply multiple logic configurations to a field path
- *
- * @param configs Array of logic configurations
- * @param fieldPath The Angular Signal Forms path
- */
 function applyMultipleLogic(configs, fieldPath) {
     configs.forEach((config) => applyLogic(config, fieldPath));
 }
@@ -3049,16 +3093,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
         }] });
 
 /**
- * Create a type predicate function from a predicate string
+ * 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:
+ * - AST-based parsing (no code execution)
+ * - Whitelisted operators only
+ * - Whitelisted methods only (Array.isArray, typeof, instanceof, etc.)
+ * - No access to global scope beyond whitelisted constructors
+ *
+ * @param predicate - A JavaScript expression that evaluates to boolean. The value to check is available as `value`.
+ * @param logger - Logger for error reporting
+ * @returns A type predicate function
+ *
+ * @example
+ * createTypePredicateFunction('typeof value === "string"')
+ * createTypePredicateFunction('Array.isArray(value)')
+ * createTypePredicateFunction('value instanceof Date')
  */
-function createTypePredicateFunction(predicate) {
+function createTypePredicateFunction(predicate, logger) {
     return (value) => {
         try {
-            const func = new Function('value', `return ${predicate};`);
-            return func(value);
+            // Evaluate using secure AST-based parser with value in scope
+            const result = ExpressionParser.evaluate(predicate, { value });
+            return Boolean(result);
         }
         catch (error) {
-            console.error('[Dynamic Forms] Error evaluating type predicate:', predicate, error);
+            logger.error('Error evaluating type predicate:', predicate, error);
             return false;
         }
     };
@@ -3074,11 +3135,12 @@ function createTypePredicateFunction(predicate) {
  * 3. The actual schema application happens at runtime via the schema function
  */
 function applySchema(config, fieldPath) {
+    const logger = inject(DYNAMIC_FORM_LOGGER);
     const schemaRegistry = inject(SchemaRegistryService);
     const schema = schemaRegistry.resolveSchema(config.schema);
     if (!schema) {
         const availableSchemas = Array.from(schemaRegistry.getAllSchemas().keys()).join(', ') || '<none>';
-        console.error(`[Dynamic Forms] Schema not found: '${config.schema}'. ` +
+        logger.error(`Schema not found: '${config.schema}'. ` +
             `Available schemas: ${availableSchemas}. ` +
             `Ensure the schema is registered in your schema registry.`);
         return;
@@ -3098,7 +3160,7 @@ function applySchema(config, fieldPath) {
             break;
         case 'applyWhenValue':
             if (config.typePredicate) {
-                const predicate = createTypePredicateFunction(config.typePredicate);
+                const predicate = createTypePredicateFunction(config.typePredicate, logger);
                 applyWhenValue(path, predicate, schemaFn);
             }
             break;
@@ -3193,259 +3255,208 @@ function hasNestedPages(fields) {
 }
 
 /**
- * Safely cast a SchemaPathTree to SchemaPath with Supported rules.
- * See validator-factory.ts for detailed explanation of why this is safe.
+ * Applies string-specific validators to a schema path.
+ * This function is properly typed - no casts needed internally.
+ */
+function applyStringValidators(path, config) {
+    if (config.email) {
+        email(path);
+    }
+    if (config.minLength !== undefined) {
+        minLength(path, config.minLength);
+    }
+    if (config.maxLength !== undefined) {
+        maxLength(path, config.maxLength);
+    }
+    if (config.pattern) {
+        const regex = typeof config.pattern === 'string' ? new RegExp(config.pattern) : config.pattern;
+        pattern(path, regex);
+    }
+}
+/**
+ * Applies number-specific validators to a schema path.
+ * This function is properly typed - no casts needed internally.
+ */
+function applyNumberValidators(path, config) {
+    if (config.min !== undefined) {
+        min(path, config.min);
+    }
+    if (config.max !== undefined) {
+        max(path, config.max);
+    }
+}
+/**
+ * Extracts string validation config from a field definition.
+ * Returns undefined if no string validators are configured.
+ */
+function getStringValidationConfig(fieldDef) {
+    if (!fieldDef.email && fieldDef.minLength === undefined && fieldDef.maxLength === undefined && !fieldDef.pattern) {
+        return undefined;
+    }
+    return {
+        email: fieldDef.email,
+        minLength: fieldDef.minLength,
+        maxLength: fieldDef.maxLength,
+        pattern: fieldDef.pattern,
+    };
+}
+/**
+ * Extracts number validation config from a field definition.
+ * Handles both 'min'/'max' (standard) and 'minValue'/'maxValue' (SliderField).
+ * Returns undefined if no number validators are configured.
  */
-function toSupportedPath(path) {
-    return path;
+function getNumberValidationConfig(fieldDef) {
+    const minVal = fieldDef.min ?? fieldDef.minValue;
+    const maxVal = fieldDef.max ?? fieldDef.maxValue;
+    if (minVal === undefined && maxVal === undefined) {
+        return undefined;
+    }
+    return { min: minVal, max: maxVal };
 }
 /**
- * Single entry point to map field data into form
- * This is the main function that should be called from the dynamic form component
+ * Maps a field definition to the Angular Signal Forms schema.
  *
- * Cross-field logic (formValue.*) is handled automatically by createLogicFunction
- * which uses RootFormRegistryService. No special context needed.
+ * This is the main entry point that should be called from the dynamic form component.
+ * It handles all field types: leaf fields, containers (page, row, group), and arrays.
  *
- * Cross-field validators are skipped at field level - they are collected and
- * applied at form level using validateTree.
+ * Cross-field logic (formValue.*) is handled automatically by createLogicFunction
+ * which uses RootFormRegistryService.
  *
- * @param fieldDef The field definition to map
- * @param fieldPath The Angular Signal Forms schema path
+ * Cross-field validators are skipped at field level and applied at form level via validateTree.
  */
 function mapFieldToForm(fieldDef, fieldPath) {
-    // Cast to FieldWithValidation to access validation properties
-    const validationField = fieldDef;
-    // Special handling for page fields - flatten child fields to root level
-    if (isPageField(fieldDef)) {
-        mapPageFieldToForm(fieldDef, fieldPath);
+    // Layout containers (page, row) - flatten children to current level
+    if (isPageField(fieldDef) || isRowField(fieldDef)) {
+        mapContainerChildren(fieldDef.fields, fieldPath);
         return;
     }
-    // Special handling for row fields - flatten child fields to root level (like pages)
-    if (isRowField(fieldDef)) {
-        mapRowFieldToForm(fieldDef, fieldPath);
-        return;
-    }
-    // Special handling for group fields - apply child field validations to the parent form schema
+    // Group fields - map children under the group's path
     if (isGroupField(fieldDef)) {
-        mapGroupFieldToForm(fieldDef, fieldPath);
+        mapContainerChildren(fieldDef.fields, fieldPath);
         return;
     }
-    // Special handling for array fields - apply child field validations to the parent form schema
+    // Array fields - use applyEach for item schema
     if (isArrayField(fieldDef)) {
         mapArrayFieldToForm(fieldDef, fieldPath);
         return;
     }
-    // Apply simple validation rules from field properties (backward compatibility)
-    applySimpleValidationRules(validationField, fieldPath);
-    // Apply advanced validators if they exist
-    // Cross-field validators are skipped here (detected by validator-factory)
-    // and applied at form level via validateTree
+    // Leaf field - apply validation, logic, and configuration
+    mapLeafField(fieldDef, fieldPath);
+}
+/**
+ * Maps children of a container field (page, row, group) to the form schema.
+ */
+function mapContainerChildren(fields, parentPath) {
+    if (!fields)
+        return;
+    const pathRecord = parentPath;
+    for (const field of fields) {
+        if (!field.key)
+            continue;
+        const childPath = pathRecord[field.key];
+        if (childPath) {
+            mapFieldToForm(field, childPath);
+        }
+    }
+}
+/**
+ * Maps a leaf field (value-bearing field) to the form schema.
+ */
+function mapLeafField(fieldDef, fieldPath) {
+    const validationField = fieldDef;
+    const path = fieldPath;
+    // Apply simple validation rules from field properties
+    applySimpleValidationRules(validationField, path);
     if (validationField.validators) {
-        validationField.validators.forEach((validatorConfig) => {
-            applyValidator(validatorConfig, fieldPath, fieldDef.key);
-        });
+        for (const config of validationField.validators) {
+            applyValidator(config, fieldPath);
+        }
     }
-    // Apply logic if it exists
-    // Cross-field logic (formValue.*) is handled automatically by createLogicFunction
+    // Apply logic rules
     if (validationField.logic) {
-        validationField.logic.forEach((logicConfig) => {
-            applyLogic(logicConfig, fieldPath);
-        });
+        for (const config of validationField.logic) {
+            applyLogic(config, fieldPath);
+        }
     }
-    // Apply schemas if they exist
+    // Apply schemas
     if (validationField.schemas) {
-        validationField.schemas.forEach((schemaConfig) => {
-            applySchema(schemaConfig, fieldPath);
-        });
+        for (const config of validationField.schemas) {
+            applySchema(config, fieldPath);
+        }
     }
-    // Handle any additional field-specific configuration
-    mapFieldSpecificConfiguration(fieldDef, fieldPath);
+    // Apply field state configuration
+    applyFieldState(fieldDef, path);
 }
 /**
- * Apply simple validation rules from field properties for backward compatibility
- *
- * Note: This function accepts SchemaPath<any> because FieldDef doesn't encode
- * the field's TypeScript type at compile time. The validators are applied based
- * on runtime FieldDef properties (email, min, max, etc.). The type assertions
- * to specific types (string, number) are safe because:
- * 1. Angular's validators perform runtime value checks, not compile-time type checks
- * 2. The FieldDef properties indicate which validator to apply
- * 3. The SchemaPath type parameter is primarily for IDE autocomplete/type inference
+ * Applies simple validation rules from field properties.
+ * Casts are isolated to the boundary between untyped field definitions and typed validator functions.
  */
-function applySimpleValidationRules(fieldDef, fieldPath) {
-    const path = toSupportedPath(fieldPath);
-    // Required validator
+function applySimpleValidationRules(fieldDef, path) {
     if (fieldDef.required) {
         required(path);
     }
-    // Email validator
-    if (fieldDef.email) {
-        // Email validator expects SchemaPath<string>
-        email(path);
-    }
-    // Numeric validators (min/max)
-    // Support both 'min'/'max' (from FieldWithValidation) and 'minValue'/'maxValue' (from SliderField)
-    const minVal = fieldDef.min ?? fieldDef.minValue ?? fieldDef.props?.min;
-    const maxVal = fieldDef.max ?? fieldDef.maxValue ?? fieldDef.props?.max;
-    if (minVal !== undefined) {
-        // Min validator expects SchemaPath<number>
-        min(path, minVal);
-    }
-    if (maxVal !== undefined) {
-        // Max validator expects SchemaPath<number>
-        max(path, maxVal);
-    }
-    // String length validators
-    if (fieldDef.minLength !== undefined) {
-        // MinLength validator expects SchemaPath<string>
-        minLength(path, fieldDef.minLength);
-    }
-    if (fieldDef.maxLength !== undefined) {
-        // MaxLength validator expects SchemaPath<string>
-        maxLength(path, fieldDef.maxLength);
+    // String validators - single cast at boundary
+    const stringConfig = getStringValidationConfig(fieldDef);
+    if (stringConfig) {
+        applyStringValidators(path, stringConfig);
     }
-    // Pattern validator
-    if (fieldDef.pattern) {
-        const regexPattern = typeof fieldDef.pattern === 'string' ? new RegExp(fieldDef.pattern) : fieldDef.pattern;
-        // Pattern validator expects SchemaPath<string>
-        pattern(path, regexPattern);
+    // Number validators - single cast at boundary
+    const numberConfig = getNumberValidationConfig(fieldDef);
+    if (numberConfig) {
+        applyNumberValidators(path, numberConfig);
     }
 }
 /**
- * Handle field-specific configuration that doesn't fit into validators/logic/schemas
+ * Applies field state configuration (disabled, readonly, hidden).
  */
-function mapFieldSpecificConfiguration(fieldDef, fieldPath) {
-    // Handle disabled state
+function applyFieldState(fieldDef, path) {
     if (fieldDef.disabled) {
-        disabled(toSupportedPath(fieldPath));
+        disabled(path);
     }
-    // Handle readonly state
     if (fieldDef.readonly) {
-        readonly(toSupportedPath(fieldPath));
+        readonly(path);
     }
-    // Handle hidden state (hidden() requires a logic function, so we provide a static true)
     if (fieldDef.hidden) {
-        hidden(toSupportedPath(fieldPath), () => true);
-    }
-    // Handle any additional configuration specific to the field type
-    // This can be extended as needed for specific field requirements
-    // Example: if field has custom form integration requirements
-    if ('customFormConfig' in fieldDef && fieldDef.customFormConfig) {
-        console.log('Custom form configuration detected for field:', fieldDef.key);
-        // Handle custom configuration here
+        hidden(path, () => true);
     }
 }
 /**
- * Common helper to map child fields to their parent form paths
- * @param fields - Array of child field definitions
- * @param parentPath - The parent field path
+ * Maps an array field to the form schema using applyEach.
+ *
+ * Array items use a template field definition. applyEach creates proper
+ * FieldTree structure for each array item.
  */
-function mapChildFieldsToForm(fields, parentPath) {
-    for (const childField of fields) {
-        if (!childField.key) {
-            continue;
-        }
-        // Type assertion needed due to dynamic field keys
-        const childPath = parentPath[childField.key];
-        if (childPath) {
-            mapFieldToForm(childField, childPath);
-        }
+function mapArrayFieldToForm(arrayField, fieldPath) {
+    if (!isArrayField(arrayField) || !arrayField.fields?.length) {
+        return;
     }
-}
-/**
- * Maps page field children to the root form schema
- * Page fields are layout containers that don't create their own form controls
- * Their children are flattened to the root level of the form
- */
-function mapPageFieldToForm(pageField, rootPath) {
-    if (!isPageField(pageField) || !pageField.fields) {
-        return;
-    }
-    const fields = pageField.fields;
-    mapChildFieldsToForm(fields, rootPath);
-}
-/**
- * Maps row field children to the root form schema
- * Row fields are layout containers (horizontal) that don't create their own form controls
- * Their children are flattened to the root level of the form, similar to page fields
- */
-function mapRowFieldToForm(rowField, rootPath) {
-    if (!isRowField(rowField) || !rowField.fields) {
-        return;
-    }
-    const fields = rowField.fields;
-    mapChildFieldsToForm(fields, rootPath);
-}
-/**
- * Maps group field children to the parent form schema
- * This ensures that validation from child fields is applied to the parent form
- */
-function mapGroupFieldToForm(groupField, fieldPath) {
-    if (!isGroupField(groupField) || !groupField.fields) {
-        return;
-    }
-    const fields = groupField.fields;
-    mapChildFieldsToForm(fields, fieldPath);
-}
-/**
- * Maps array field to the parent form schema using applyEach.
- *
- * Array fields are fundamentally different from groups:
- * - The fields array is a TEMPLATE (single field definition), not instances
- * - Array items are created/removed dynamically at runtime
- * - applyEach creates proper FieldTree structure for each array item
- *
- * By using applyEach, Angular Signal Forms will:
- * 1. Create FieldTree instances for each array item
- * 2. Apply the item schema (validation, logic) to each item
- * 3. Allow array items to be accessed via arrayFieldTree[index]
- */
-function mapArrayFieldToForm(arrayField, fieldPath) {
-    if (!isArrayField(arrayField) || !arrayField.fields || arrayField.fields.length === 0) {
-        return;
-    }
-    // Get the template field (first field in array.fields)
     const templateField = arrayField.fields[0];
-    // Create an item schema from the template field
     const itemSchema = schema((itemPath) => {
-        // Handle container fields (row, group) that have nested fields
+        const pathRecord = itemPath;
         if (isRowField(templateField) || isPageField(templateField)) {
-            // Row/page templates flatten their children - apply child validations directly to item
-            if (templateField.fields && Array.isArray(templateField.fields)) {
-                for (const childField of templateField.fields) {
-                    if (!childField.key)
-                        continue;
-                    const childPath = itemPath[childField.key];
-                    if (childPath) {
-                        mapFieldToForm(childField, childPath);
-                    }
-                }
-            }
+            // Row/page templates flatten their children
+            mapContainerChildren(templateField.fields, itemPath);
         }
         else if (isGroupField(templateField)) {
-            // Group template - apply child validations to the item
-            if (templateField.fields && Array.isArray(templateField.fields)) {
-                for (const childField of templateField.fields) {
-                    if (!childField.key)
-                        continue;
-                    const childPath = itemPath[childField.key];
-                    if (childPath) {
-                        mapFieldToForm(childField, childPath);
-                    }
+            // Group template - access group's path first
+            const groupKey = templateField.key;
+            if (groupKey) {
+                const groupPath = pathRecord[groupKey];
+                if (groupPath) {
+                    mapContainerChildren(templateField.fields, groupPath);
                 }
             }
+            else {
+                // No group key - apply children directly (edge case)
+                mapContainerChildren(templateField.fields, itemPath);
+            }
         }
         else {
-            // Simple field template - apply validation directly
+            // Simple field template
             mapFieldToForm(templateField, itemPath);
         }
     });
-    // Apply the item schema to each array element
     applyEach(fieldPath, itemSchema);
-    // TODO: Support array-level validation (min/max length, unique items, etc.)
-    // This would be applied to the array field itself, not individual items:
-    //   if (arrayField.minLength) minLength(fieldPath, arrayField.minLength);
-    //   if (arrayField.maxLength) maxLength(fieldPath, arrayField.maxLength);
 }
 
 /**
@@ -3531,10 +3542,6 @@ function getFieldDefaultValue(field, registry) {
         }
         return groupDefaults;
     }
-    // Check for defaultValue first (used for reset/clear operations)
-    if ('defaultValue' in field && field.defaultValue !== undefined && field.defaultValue !== null) {
-        return field.defaultValue;
-    }
     // Use explicit value if provided, with type-specific handling for null
     if ('value' in field) {
         // If value is explicitly set (even to null/undefined), respect it
@@ -3603,7 +3610,75 @@ function isDisplayOnlyField(field) {
     return field.type === 'text' || isContainerField(field);
 }
 
+/**
+ * Type guard to check if a value is a DynamicFormFeature
+ */
+function isDynamicFormFeature(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        'ɵkind' in value &&
+        typeof value.ɵkind === 'string' &&
+        'ɵproviders' in value &&
+        Array.isArray(value.ɵproviders));
+}
+/**
+ * Helper to create a feature with proper typing
+ */
+function createFeature(kind, providers) {
+    return {
+        ɵkind: kind,
+        ɵproviders: providers,
+    };
+}
+
+/**
+ * Configure logging for dynamic forms.
+ *
+ * @example
+ * ```typescript
+ * // Set log level
+ * provideDynamicForm(
+ *   ...withMaterialFields(),
+ *   withLogger({ level: LogLevel.Debug })
+ * )
+ *
+ * // Disable logging entirely
+ * provideDynamicForm(
+ *   ...withMaterialFields(),
+ *   withLogger({ level: LogLevel.Off })
+ * )
+ *
+ * // Custom logger implementation
+ * provideDynamicForm(
+ *   ...withMaterialFields(),
+ *   withLogger({ logger: mySentryLogger })
+ * )
+ * ```
+ *
+ * @param options - Logger configuration options
+ * @returns A DynamicFormFeature that configures logging
+ */
+function withLogger(options = {}) {
+    let logger;
+    if (options.logger) {
+        // Use custom logger implementation
+        logger = options.logger;
+    }
+    else if (options.level === LogLevel.Off) {
+        // Explicit disable - use noop
+        logger = new NoopLogger();
+    }
+    else {
+        // Use console logger with specified level (default to Warn)
+        logger = new ConsoleLogger(options.level ?? LogLevel.Warn);
+    }
+    return createFeature('logger', [{ provide: DYNAMIC_FORM_LOGGER, useValue: logger }]);
+}
+
 const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function getFieldTreeByKey(ctx, key) {
+    return ctx.field[key];
+}
 /**
  * Creates an Angular signal forms schema from field definitions
  * This is the single entry point at dynamic form level that replaces createSchemaFromFields
@@ -3622,6 +3697,7 @@ function createSchemaFromFields(fields, registry, crossFieldValidators) {
     // Inject services for cross-field validation
     // These will be available because createSchemaFromFields is called within runInInjectionContext
     const functionRegistry = inject(FunctionRegistryService);
+    const logger = inject(DYNAMIC_FORM_LOGGER);
     return schema((path) => {
         for (const fieldDef of fields) {
             const valueHandling = getFieldValueHandling(fieldDef.type, registry);
@@ -3631,9 +3707,7 @@ function createSchemaFromFields(fields, registry, crossFieldValidators) {
                 continue;
             }
             if (valueHandling === 'flatten' && hasChildFields(fieldDef)) {
-                // Handle both array (page/row fields) and object (group fields)
-                const fieldsArray = Array.isArray(fieldDef.fields) ? fieldDef.fields : Object.values(fieldDef.fields);
-                for (const childField of fieldsArray) {
+                for (const childField of normalizeFieldsArray(fieldDef.fields)) {
                     if (!childField.key)
                         continue;
                     const childPath = path[childField.key];
@@ -3655,7 +3729,7 @@ function createSchemaFromFields(fields, registry, crossFieldValidators) {
         }
         // Apply cross-field validators using validateTree
         if (crossFieldValidators && crossFieldValidators.length > 0) {
-            applyCrossFieldTreeValidator(path, crossFieldValidators, functionRegistry);
+            applyCrossFieldTreeValidator(path, crossFieldValidators, functionRegistry, logger);
         }
     });
 }
@@ -3676,8 +3750,9 @@ function createSchemaFromFields(fields, registry, crossFieldValidators) {
  * @param rootPath The root schema path tree
  * @param validators Array of collected cross-field validators
  * @param functionRegistry Registry containing custom functions for expression evaluation
+ * @param logger Logger for error reporting
  */
-function applyCrossFieldTreeValidator(rootPath, validators, functionRegistry) {
+function applyCrossFieldTreeValidator(rootPath, validators, functionRegistry, logger) {
     // Get custom functions for expression evaluation
     const customFunctions = functionRegistry.getCustomFunctions();
     validateTree(rootPath, (ctx) => {
@@ -3696,10 +3771,9 @@ function applyCrossFieldTreeValidator(rootPath, validators, functionRegistry) {
                 }
             }
             catch (err) {
-                console.error(`[Dynamic Forms] Error evaluating cross-field validator for ${sourceFieldKey}:`, err);
+                logger.error(`Error evaluating cross-field validator for ${sourceFieldKey}:`, err);
                 // On error, add a validation error to indicate the failure
-                // Use ctx.field[key] to access the field tree for dynamic field names
-                const targetField = ctx.field[sourceFieldKey];
+                const targetField = getFieldTreeByKey(ctx, sourceFieldKey);
                 if (targetField) {
                     const customConfig = config;
                     errors.push({
@@ -3750,6 +3824,7 @@ function evaluateCustomCrossFieldValidator(config, evaluationContext, sourceFiel
             formValue,
             fieldPath: sourceFieldKey,
             customFunctions: evaluationContext.customFunctions || {},
+            logger: evaluationContext.logger,
         });
         if (!conditionMet) {
             return null; // Condition not met, skip validation
@@ -3762,8 +3837,7 @@ function evaluateCustomCrossFieldValidator(config, evaluationContext, sourceFiel
         return null;
     }
     // Validation failed - create error targeting the source field
-    // Use ctx.field[key] to access the field tree for dynamic field names
-    const targetField = ctx.field[sourceFieldKey];
+    const targetField = getFieldTreeByKey(ctx, sourceFieldKey);
     if (!targetField) {
         return null;
     }
@@ -3798,6 +3872,7 @@ function evaluateBuiltInCrossFieldValidator(config, evaluationContext, sourceFie
             formValue,
             fieldPath: sourceFieldKey,
             customFunctions: evaluationContext.customFunctions || {},
+            logger: evaluationContext.logger,
         });
         if (!conditionMet) {
             return null; // Condition not met, skip validation
@@ -3809,8 +3884,7 @@ function evaluateBuiltInCrossFieldValidator(config, evaluationContext, sourceFie
         return null; // Validation passed
     }
     // Validation failed - create error targeting the source field
-    // Use ctx.field[key] to access the field tree for dynamic field names
-    const targetField = ctx.field[sourceFieldKey];
+    const targetField = getFieldTreeByKey(ctx, sourceFieldKey);
     if (!targetField) {
         return null;
     }
@@ -4052,7 +4126,7 @@ class ComponentInitializedEvent {
  * ```
  */
 function createInitializationTracker(eventBus, expectedCount) {
-    return eventBus.on('component-initialized').pipe(scan((count, _event) => count + 1, 0), map$1((currentCount) => currentCount >= expectedCount), filter$1((isComplete) => isComplete));
+    return eventBus.on('component-initialized').pipe(scan$1((count, _event) => count + 1, 0), map$1((currentCount) => currentCount >= expectedCount), filter$1((isComplete) => isComplete));
 }
 /**
  * Creates an observable that tracks component initialization progress with detailed status.
@@ -4077,7 +4151,7 @@ function createInitializationTracker(eventBus, expectedCount) {
  * ```
  */
 function createDetailedInitializationTracker(eventBus, expectedCount) {
-    return eventBus.on('component-initialized').pipe(scan((count, _event) => count + 1, 0), map$1((currentCount) => ({
+    return eventBus.on('component-initialized').pipe(scan$1((count, _event) => count + 1, 0), map$1((currentCount) => ({
         currentCount,
         expectedCount,
         isComplete: currentCount >= expectedCount,
@@ -4325,10 +4399,8 @@ function flattenFields(fields, registry, options = {}) {
         // Row fields need to render their container element for grid layouts to work
         if (options.preserveRows && isRowField(field)) {
             if (field.fields) {
-                // Normalize field children to array format (handles both array and object syntax)
-                const fieldsArray = Array.isArray(field.fields) ? field.fields : Object.values(field.fields);
                 // Recursively flatten children while preserving row structure
-                const flattenedChildren = flattenFields(fieldsArray, registry, options);
+                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
                 result.push({
@@ -4342,8 +4414,8 @@ function flattenFields(fields, registry, options = {}) {
             // Step 3: Handle fields with 'flatten' value handling (typically page/row fields)
             // These fields are pure containers - merge their children directly into the parent level
             if (field.fields) {
-                const fieldsArray = Array.isArray(field.fields) ? field.fields : Object.values(field.fields);
-                const flattenedChildren = flattenFields(fieldsArray, registry, options);
+                const fields = field.fields;
+                const flattenedChildren = flattenFields(normalizeFieldsArray(fields), registry, options);
                 // Spread children directly into result - the container field itself is discarded
                 // This is used for page fields (form structure) and row fields (form values)
                 result.push(...flattenedChildren);
@@ -4405,8 +4477,7 @@ function traverseFields(fields, collection) {
         collectFromField(field, collection);
         // Recursively process container fields (page, row, group, array)
         if (hasChildFields(field)) {
-            const childFields = Array.isArray(field.fields) ? field.fields : Object.values(field.fields);
-            traverseFields(childFields, collection);
+            traverseFields(normalizeFieldsArray(field.fields), collection);
         }
     }
 }
@@ -4812,14 +4883,16 @@ class PageNavigationStateChangeEvent {
  */
 class PageOrchestratorComponent {
     eventBus = inject(EventBus);
-    rootFormRegistry = inject(RootFormRegistryService);
+    fieldContextRegistry = inject(FieldContextRegistryService);
     functionRegistry = inject(FunctionRegistryService);
+    logger = inject(DYNAMIC_FORM_LOGGER);
     /**
      * Array of page field definitions to render
      */
     pageFields = input.required(...(ngDevMode ? [{ debugName: "pageFields" }] : []));
     /**
-     * Root form instance from parent DynamicForm
+     * Root form instance from parent DynamicForm.
+     * Uses FieldTree<unknown> to accept any form type.
      */
     form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
     /**
@@ -4833,8 +4906,7 @@ class PageOrchestratorComponent {
      */
     pageHiddenStates = computed(() => {
         const pages = this.pageFields();
-        const formValue = this.rootFormRegistry.getFormValue();
-        return pages.map((page) => this.evaluatePageHidden(page, formValue));
+        return pages.map((page) => this.evaluatePageHidden(page));
     }, ...(ngDevMode ? [{ debugName: "pageHiddenStates" }] : []));
     /**
      * Computed signal that returns indices of visible (non-hidden) pages.
@@ -5056,10 +5128,9 @@ class PageOrchestratorComponent {
      * A page is hidden if ANY of its hidden logic conditions evaluate to true.
      *
      * @param page The page field to evaluate
-     * @param formValue The current form value to evaluate against
      * @returns true if the page should be hidden, false otherwise
      */
-    evaluatePageHidden(page, formValue) {
+    evaluatePageHidden(page) {
         // If no logic defined, page is visible
         if (!page.logic || page.logic.length === 0) {
             return false;
@@ -5079,14 +5150,9 @@ class PageOrchestratorComponent {
                 }
                 continue;
             }
-            // Evaluate conditional expression
+            // Evaluate conditional expression using centralized context creation
             const condition = logic.condition;
-            const context = {
-                fieldValue: null, // Pages don't have field values
-                formValue: (formValue ?? {}),
-                fieldPath: page.key || '',
-                customFunctions: this.functionRegistry.getCustomFunctions(),
-            };
+            const context = this.fieldContextRegistry.createDisplayOnlyContext(page.key || '', this.functionRegistry.getCustomFunctions());
             if (evaluateCondition(condition, context)) {
                 return true;
             }
@@ -5124,9 +5190,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-DjrahUgb.mjs').then(m => m.default)], () => [import('./ng-forge-dynamic-forms-page-field.component-DjrahUgb.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-YHFQcpCS.mjs').then(m => m.default)], () => [import('./ng-forge-dynamic-forms-page-field.component-YHFQcpCS.mjs').then(m => m.default)]] });
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.5", ngImport: i0, type: PageOrchestratorComponent, resolveDeferredDeps: () => [import('./ng-forge-dynamic-forms-page-field.component-DjrahUgb.mjs').then(m => m.default)], resolveMetadata: PageFieldComponent => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.5", ngImport: i0, type: PageOrchestratorComponent, resolveDeferredDeps: () => [import('./ng-forge-dynamic-forms-page-field.component-YHFQcpCS.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) {
@@ -5195,6 +5261,7 @@ class DynamicForm {
     rootFormRegistry = inject(RootFormRegistryService);
     functionRegistry = inject(FunctionRegistryService);
     schemaRegistry = inject(SchemaRegistryService);
+    logger = inject(DYNAMIC_FORM_LOGGER);
     // ─────────────────────────────────────────────────────────────────────────────
     // Inputs
     // ─────────────────────────────────────────────────────────────────────────────
@@ -5207,17 +5274,26 @@ class DynamicForm {
     // ─────────────────────────────────────────────────────────────────────────────
     // Memoized Functions
     // ─────────────────────────────────────────────────────────────────────────────
-    memoizedFlattenFields = memoize((fields, registry) => flattenFields(fields, registry), (fields, registry) => {
-        const fieldKeys = fields.map((f) => `${f.key || ''}:${f.type}`).join('|');
-        const registryKeys = Array.from(registry.keys()).sort().join('|');
-        return `${fieldKeys}__${registryKeys}`;
+    memoizedFlattenFields = memoize((fields, registry) => flattenFields(fields, registry), {
+        resolver: (fields, registry) => {
+            const fieldKeys = fields.map((f) => `${f.key || ''}:${f.type}`).join('|');
+            const registryKeys = Array.from(registry.keys()).sort().join('|');
+            return `${fieldKeys}__${registryKeys}`;
+        },
+        maxSize: 10,
+    });
+    memoizedFlattenFieldsForRendering = memoize((fields, registry) => flattenFields(fields, registry, { preserveRows: true }), {
+        resolver: (fields, registry) => {
+            const fieldKeys = fields.map((f) => `${f.key || ''}:${f.type}`).join('|');
+            const registryKeys = Array.from(registry.keys()).sort().join('|');
+            return `render_${fieldKeys}__${registryKeys}`;
+        },
+        maxSize: 10,
     });
-    memoizedFlattenFieldsForRendering = memoize((fields, registry) => flattenFields(fields, registry, { preserveRows: true }), (fields, registry) => {
-        const fieldKeys = fields.map((f) => `${f.key || ''}:${f.type}`).join('|');
-        const registryKeys = Array.from(registry.keys()).sort().join('|');
-        return `render_${fieldKeys}__${registryKeys}`;
+    memoizedKeyBy = memoize((fields) => keyBy(fields, 'key'), {
+        resolver: (fields) => fields.map((f) => f.key).join('|'),
+        maxSize: 10,
     });
-    memoizedKeyBy = memoize((fields) => keyBy(fields, 'key'), (fields) => fields.map((f) => f.key).join('|'));
     memoizedDefaultValues = memoize((fieldsById, registry) => {
         const result = {};
         for (const [key, field] of Object.entries(fieldsById)) {
@@ -5227,10 +5303,13 @@ class DynamicForm {
             }
         }
         return result;
-    }, (fieldsById, registry) => {
-        const fieldKeys = Object.keys(fieldsById).sort().join('|');
-        const registryKeys = Array.from(registry.keys()).sort().join('|');
-        return `defaults_${fieldKeys}__${registryKeys}`;
+    }, {
+        resolver: (fieldsById, registry) => {
+            const fieldKeys = Object.keys(fieldsById).sort().join('|');
+            const registryKeys = Array.from(registry.keys()).sort().join('|');
+            return `defaults_${fieldKeys}__${registryKeys}`;
+        },
+        maxSize: 10,
     });
     // ─────────────────────────────────────────────────────────────────────────────
     // Computed Signals
@@ -5242,10 +5321,10 @@ class DynamicForm {
         const detection = detectFormMode(fields);
         const validation = FormModeValidator.validateFormConfiguration(fields);
         if (!validation.isValid) {
-            console.error('[Dynamic Forms] Invalid form configuration:', validation.errors);
+            this.logger.error('Invalid form configuration:', validation.errors);
         }
         if (validation.warnings.length > 0) {
-            console.warn('[Dynamic Forms] Form configuration warnings:', validation.warnings);
+            this.logger.warn('Form configuration warnings:', validation.warnings);
         }
         return detection;
     }, ...(ngDevMode ? [{ debugName: "formModeDetection" }] : []));
@@ -5362,11 +5441,6 @@ class DynamicForm {
     }, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     /** Whether the form is currently submitting. */
     submitting = computed(() => this.form()().submitting(), ...(ngDevMode ? [{ debugName: "submitting" }] : []));
-    /**
-     * Announcement message for screen readers.
-     * Updates when form submission fails due to validation errors.
-     */
-    errorAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "errorAnnouncement" }] : []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Initialization
     // ─────────────────────────────────────────────────────────────────────────────
@@ -5390,7 +5464,7 @@ class DynamicForm {
     submitted = outputFromObservable(this.eventBus.on('submit').pipe(switchMap(() => {
         const submissionConfig = this.config().submission;
         if (submissionConfig?.action) {
-            console.warn('[Dynamic Forms] Both `submission.action` and `(submitted)` output are configured. ' +
+            this.logger.warn('Both `submission.action` and `(submitted)` output are configured. ' +
                 'When using `submission.action`, the `(submitted)` output will not emit. ' +
                 'Use either `submission.action` OR `(submitted)`, not both.');
             return EMPTY;
@@ -5434,74 +5508,19 @@ class DynamicForm {
                         error: error instanceof Error ? error : new Error(String(error)),
                     },
                 ]);
-                console.error(`[Dynamic Forms] Failed to load component for field type '${fieldDef.type}' (key: ${fieldKey}). ` +
+                this.logger.error(`Failed to load component for field type '${fieldDef.type}' (key: ${fieldKey}). ` +
                     `Ensure the field type is registered in your field registry.`, error);
             },
         };
         return forkJoin(fields.map((f) => resolveField(f, context)));
-    }), map((fields) => fields.filter((f) => f !== undefined)), scan$1(reconcileFields, [])), { initialValue: [], injector: this.injector });
-    // ─────────────────────────────────────────────────────────────────────────────
-    // Effects
-    // ─────────────────────────────────────────────────────────────────────────────
-    syncEntityToValue = explicitEffect([this.entity], ([currentEntity]) => {
-        const currentValue = this.value();
-        if (!isEqual(currentEntity, currentValue)) {
-            this.value.set(currentEntity);
-        }
-    });
-    clearErrorsOnConfigChange = explicitEffect([this.config], () => {
-        this.fieldLoadingErrors.set([]);
-    });
-    emitPagedFormInitialized = explicitEffect([this.formModeDetection, this.pageFieldDefinitions], ([{ mode }, pages]) => {
-        if (mode === 'paged' && pages.length > 0) {
-            this.eventBus.dispatch(ComponentInitializedEvent, 'dynamic-form', this.componentId);
-        }
-    });
-    emitNonPagedFormInitialized = explicitEffect([this.resolvedFields, this.formModeDetection], ([fields, { mode }]) => {
-        if (mode === 'non-paged' && fields.length > 0) {
-            afterNextRender(() => {
-                this.eventBus.dispatch(ComponentInitializedEvent, 'dynamic-form', this.componentId);
-            }, { injector: this.injector });
-        }
-    });
+    }), map((fields) => fields.filter((f) => f !== undefined)), scan(reconcileFields, [])), { initialValue: [], injector: this.injector });
     // ─────────────────────────────────────────────────────────────────────────────
-    // Event Handlers
+    // Constructor
     // ─────────────────────────────────────────────────────────────────────────────
-    handleFormReset = this.eventBus
-        .on('form-reset')
-        .pipe(takeUntilDestroyed())
-        .subscribe(() => this.onFormReset());
-    handleFormClear = this.eventBus
-        .on('form-clear')
-        .pipe(takeUntilDestroyed())
-        .subscribe(() => this.onFormClear());
-    /**
-     * Announces form validation errors to screen readers when submission is attempted
-     * on an invalid form.
-     */
-    handleErrorAnnouncement = this.eventBus
-        .on('submit')
-        .pipe(takeUntilDestroyed())
-        .subscribe(() => {
-        const formState = this.form()();
-        if (formState.invalid()) {
-            const errorCount = this.countErrors(formState.errors());
-            const message = errorCount === 1
-                ? 'Form submission failed. Please fix 1 validation error before submitting.'
-                : `Form submission failed. Please fix ${errorCount} validation errors before submitting.`;
-            // Clear first to ensure screen readers announce even if message is the same
-            this.errorAnnouncement.set('');
-            // Use setTimeout to ensure the clear is processed before the new message
-            setTimeout(() => this.errorAnnouncement.set(message), 50);
-        }
-    });
-    handleSubmission = createSubmissionHandler({
-        eventBus: this.eventBus,
-        configSignal: this.config,
-        formSignal: this.form,
-    })
-        .pipe(takeUntilDestroyed())
-        .subscribe();
+    constructor() {
+        this.setupEffects();
+        this.setupEventHandlers();
+    }
     /**
      * Handles native form submission triggered by:
      * - Pressing Enter in an input field
@@ -5520,6 +5539,50 @@ class DynamicForm {
     // ─────────────────────────────────────────────────────────────────────────────
     // Private Methods
     // ─────────────────────────────────────────────────────────────────────────────
+    setupEffects() {
+        // Sync entity changes to the value signal
+        explicitEffect([this.entity], ([currentEntity]) => {
+            const currentValue = this.value();
+            if (!isEqual(currentEntity, currentValue)) {
+                this.value.set(currentEntity);
+            }
+        });
+        // Clear loading errors when config changes
+        explicitEffect([this.config], () => {
+            this.fieldLoadingErrors.set([]);
+        });
+        // Emit initialization event for paged forms
+        explicitEffect([this.formModeDetection, this.pageFieldDefinitions], ([{ mode }, pages]) => {
+            if (mode === 'paged' && pages.length > 0) {
+                this.eventBus.dispatch(ComponentInitializedEvent, 'dynamic-form', this.componentId);
+            }
+        });
+        // Emit initialization event for non-paged forms
+        explicitEffect([this.resolvedFields, this.formModeDetection], ([fields, { mode }]) => {
+            if (mode === 'non-paged' && fields.length > 0) {
+                afterNextRender(() => {
+                    this.eventBus.dispatch(ComponentInitializedEvent, 'dynamic-form', this.componentId);
+                }, { injector: this.injector });
+            }
+        });
+    }
+    setupEventHandlers() {
+        this.eventBus
+            .on('form-reset')
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.onFormReset());
+        this.eventBus
+            .on('form-clear')
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.onFormClear());
+        createSubmissionHandler({
+            eventBus: this.eventBus,
+            configSignal: this.config,
+            formSignal: this.form,
+        })
+            .pipe(takeUntilDestroyed())
+            .subscribe();
+    }
     registerValidatorsFromConfig({ customFnConfig, schemas }) {
         if (schemas) {
             schemas.forEach((schema) => {
@@ -5576,15 +5639,6 @@ class DynamicForm {
         this.form()().value.set(emptyValue);
         this.value.set(emptyValue);
     }
-    /**
-     * Counts the total number of validation errors across all fields.
-     * Used for screen reader announcements.
-     */
-    countErrors(errors) {
-        if (!errors)
-            return 0;
-        return errors.length;
-    }
     // ─────────────────────────────────────────────────────────────────────────────
     // Lifecycle
     // ─────────────────────────────────────────────────────────────────────────────
@@ -5594,28 +5648,24 @@ class DynamicForm {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: DynamicForm, isStandalone: true, selector: "form[dynamic-form]", inputs: { config: { classPropertyName: "config", publicName: "dynamic-form", isSignal: true, isRequired: true, transformFunction: null }, formOptions: { classPropertyName: "formOptions", publicName: "formOptions", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted", reset: "reset", cleared: "cleared", events: "events", initialized: "initialized", onPageChange: "onPageChange", onPageNavigationStateChange: "onPageNavigationStateChange" }, host: { 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: [EventBus, SchemaRegistryService, FunctionRegistryService, RootFormRegistryService, FieldContextRegistryService], ngImport: i0, template: `
     @if (formModeDetection().mode === 'paged') {
-      <div page-orchestrator [pageFields]="pageFieldDefinitions()" [form]="$any(form())" [fieldSignalContext]="fieldSignalContext()"></div>
+      <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()" />
       }
     }
-    <!-- Live region for screen reader announcements -->
-    <div class="df-live-region" role="status" aria-live="polite" aria-atomic="true">{{ errorAnnouncement() }}</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-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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DynamicForm, decorators: [{
             type: Component,
             args: [{ selector: 'form[dynamic-form]', imports: [NgComponentOutlet, PageOrchestratorComponent], template: `
     @if (formModeDetection().mode === 'paged') {
-      <div page-orchestrator [pageFields]="pageFieldDefinitions()" [form]="$any(form())" [fieldSignalContext]="fieldSignalContext()"></div>
+      <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()" />
       }
     }
-    <!-- Live region for screen reader announcements -->
-    <div class="df-live-region" role="status" aria-live="polite" aria-atomic="true">{{ errorAnnouncement() }}</div>
   `, providers: [EventBus, SchemaRegistryService, FunctionRegistryService, RootFormRegistryService, FieldContextRegistryService], host: {
                         class: 'df-dynamic-form df-form',
                         '[class.disabled]': 'disabled()',
@@ -5624,7 +5674,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                         '[attr.data-form-mode]': 'formModeDetection().mode',
                         '(submit)': 'onNativeSubmit($event)',
                     }, 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-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"] }]
-        }], 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"] }] } });
+        }], 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"] }] } });
 
 /**
  * Maps an array field definition to component inputs.
@@ -5707,8 +5757,9 @@ function pageFieldMapper(fieldDef) {
  * @returns Signal containing Record of input names to values for ngComponentOutlet
  */
 function textFieldMapper(fieldDef) {
-    const rootFormRegistry = inject(RootFormRegistryService);
+    const fieldContextRegistry = inject(FieldContextRegistryService);
     const functionRegistry = inject(FunctionRegistryService);
+    const logger = inject(DYNAMIC_FORM_LOGGER);
     // Build base inputs (static, from field definition)
     const baseInputs = buildBaseInputs(fieldDef);
     // Create computed signal for hidden state based on logic configuration
@@ -5718,16 +5769,8 @@ function textFieldMapper(fieldDef) {
         const inputs = { ...baseInputs };
         // Evaluate hidden logic if present
         if (hiddenLogic.length > 0) {
-            const formValue = rootFormRegistry.getFormValue();
-            const customFunctions = functionRegistry.getCustomFunctions();
-            // Create evaluation context without a specific field value
-            // (text fields don't have their own value in the form)
-            const evaluationContext = {
-                fieldValue: undefined,
-                formValue,
-                fieldPath: fieldDef.key,
-                customFunctions,
-            };
+            // Use centralized context creation for display-only components
+            const evaluationContext = fieldContextRegistry.createDisplayOnlyContext(fieldDef.key, functionRegistry.getCustomFunctions());
             // Evaluate all hidden logic conditions - if ANY is true, the field is hidden
             inputs['hidden'] = hiddenLogic.some((logic) => {
                 if (typeof logic.condition === 'boolean') {
@@ -5792,13 +5835,13 @@ const BUILT_IN_FIELDS = [
     },
     {
         name: 'page',
-        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-DjrahUgb.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-YHFQcpCS.mjs'),
         mapper: pageFieldMapper,
         valueHandling: 'flatten',
     },
     {
         name: 'text',
-        loadComponent: () => import('./ng-forge-dynamic-forms-text-field.component-7QVNm95W.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-text-field.component-CiYq73aF.mjs'),
         mapper: textFieldMapper,
         valueHandling: 'exclude',
     },
@@ -5810,7 +5853,7 @@ const BUILT_IN_FIELDS = [
  * This function creates environment providers that can be used at application or route level
  * to register field types. It provides type-safe field registration with automatic type inference.
  *
- * @param fieldTypes - Custom field type definitions to register alongside built-in types
+ * @param items - Field type definitions and/or features (like withLogger)
  * @returns Environment providers for dependency injection with type inference
  *
  * @example
@@ -5825,6 +5868,19 @@ const BUILT_IN_FIELDS = [
  *
  * @example
  * ```typescript
+ * // With logging configuration
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideDynamicForm(
+ *       ...withMaterialFields(),
+ *       withLogger({ level: LogLevel.Debug })
+ *     )
+ *   ]
+ * });
+ * ```
+ *
+ * @example
+ * ```typescript
  * // Route-level setup
  * const routes: Routes = [
  *   {
@@ -5851,7 +5907,10 @@ const BUILT_IN_FIELDS = [
  *
  * @public
  */
-function provideDynamicForm(...fieldTypes) {
+function provideDynamicForm(...items) {
+    // Separate field types from features
+    const fieldTypes = items.filter((item) => !isDynamicFormFeature(item));
+    const features = items.filter(isDynamicFormFeature);
     const fields = [...BUILT_IN_FIELDS, ...fieldTypes];
     // Extract config providers from field type arrays
     const configProviders = [];
@@ -5861,15 +5920,21 @@ function provideDynamicForm(...fieldTypes) {
             configProviders.push(...fieldTypeWithConfig.__configProviders);
         }
     });
+    // Extract providers from features
+    const featureProviders = [];
+    features.forEach((feature) => {
+        featureProviders.push(...feature.ɵproviders);
+    });
     return makeEnvironmentProviders([
         {
             provide: FIELD_REGISTRY,
             useFactory: () => {
+                const logger = inject(DYNAMIC_FORM_LOGGER);
                 const registry = new Map();
                 // Add custom field types
                 fields.forEach((fieldType) => {
                     if (registry.has(fieldType.name)) {
-                        console.warn(`[Dynamic Forms] Field type "${fieldType.name}" is already registered. Overwriting.`);
+                        logger.warn(`Field type "${fieldType.name}" is already registered. Overwriting.`);
                     }
                     registry.set(fieldType.name, fieldType);
                 });
@@ -5877,9 +5942,24 @@ function provideDynamicForm(...fieldTypes) {
             },
         },
         ...configProviders,
+        ...featureProviders,
     ]);
 }
 
+/**
+ * No-op logger for when no logger is provided.
+ * Used as fallback in button logic evaluation to avoid breaking downstream packages.
+ */
+const noOpLogger = {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    debug: () => { },
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    info: () => { },
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    warn: () => { },
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    error: () => { },
+};
 /**
  * Default options for submit button disabled behavior.
  */
@@ -5936,6 +6016,7 @@ function evaluateLogicCondition(condition, ctx) {
         fieldValue: undefined,
         formValue,
         fieldPath: '',
+        logger: ctx.logger ?? noOpLogger,
     };
     return evaluateCondition(condition, evaluationContext);
 }
@@ -6120,244 +6201,6 @@ function resolveTokens(args, context) {
     });
 }
 
-/**
- * Type guard to check if a value has the FormInternals structure.
- */
-function isFormInternals(value) {
-    return (typeof value === 'object' &&
-        value !== null &&
-        'structure' in value &&
-        typeof value.structure?.childrenMap === 'function');
-}
-/**
- * Type guard that unwraps signals and checks for FormInternals structure.
- * Use this when the input might be a signal wrapping FormInternals.
- */
-function hasFormStructure(form) {
-    const unwrapped = isSignal(form) ? form() : form;
-    return isFormInternals(unwrapped);
-}
-/**
- * Unwraps a signal if needed and returns the FormInternals or null.
- */
-function unwrapFormInput(form) {
-    const unwrapped = isSignal(form) ? form() : form;
-    return isFormInternals(unwrapped) ? unwrapped : null;
-}
-function getChildrenMap(form) {
-    const target = unwrapFormInput(form);
-    if (!target) {
-        return null;
-    }
-    const result = target.structure.childrenMap();
-    const normalizedMap = new Map();
-    for (const [key, childData] of result.byPropertyKey) {
-        normalizedMap.set(key, childData.reader);
-    }
-    return normalizedMap;
-}
-function getFieldProxy(node) {
-    if (!isFormInternals(node)) {
-        return null;
-    }
-    return node.fieldProxy ?? null;
-}
-function getChildFieldTree(form, key) {
-    const childrenMap = getChildrenMap(form);
-    return childrenMap?.get(key) ?? null;
-}
-
-/**
- * Resolves the field proxy and default validation messages from the form context.
- * Must be called within an injection context.
- *
- * @param fieldKey The key of the field to resolve
- * @returns The resolved context with field proxy and validation messages
- */
-function resolveValueFieldContext(fieldKey) {
-    const context = inject(FIELD_SIGNAL_CONTEXT);
-    // Get form-level validation messages
-    const defaultValidationMessages = context.defaultValidationMessages;
-    // Get the form root to access field proxy
-    const formRoot = context.form();
-    const childrenMap = getChildrenMap(formRoot);
-    // Resolve field proxy
-    let fieldProxy = undefined;
-    if (!childrenMap) {
-        // No childrenMap - the form might be a FormRecord where fields are direct properties
-        // First check if formRoot itself has fieldProxy (for FieldTree items)
-        const rootFieldProxy = getFieldProxy(formRoot);
-        if (rootFieldProxy) {
-            fieldProxy = rootFieldProxy;
-        }
-        else {
-            // Try accessing the field as a direct property on formRoot (FormRecord case)
-            // This handles forms created with form(entity, schema) where fields are accessible as formRoot[key]
-            const formField = formRoot[fieldKey];
-            const resolvedProxy = getFieldProxy(formField);
-            if (resolvedProxy) {
-                fieldProxy = resolvedProxy;
-            }
-            else if (isSignal(formField) || formField) {
-                // The field itself might be the proxy (signal), or might have a different structure
-                // Try using the field directly as the proxy
-                fieldProxy = formField;
-            }
-        }
-    }
-    else {
-        // Standard field access for non-array keys via childrenMap lookup
-        const formField = childrenMap.get(fieldKey);
-        if (formField) {
-            fieldProxy = formField;
-        }
-    }
-    return { fieldProxy, defaultValidationMessages };
-}
-/**
- * Builds the base inputs for a value field.
- * This is a helper function used by valueFieldMapper and specialized mappers.
- *
- * @param fieldDef The value field definition
- * @param ctx The resolved value field context
- * @returns Record of input names to values
- */
-function buildValueFieldInputs(fieldDef, ctx) {
-    const omittedFields = omit(fieldDef, ['value']);
-    const baseInputs = buildBaseInputs(omittedFields);
-    const inputs = {
-        ...baseInputs,
-        // Always pass validationMessages (or empty object) - required for error display signals
-        validationMessages: fieldDef.validationMessages ?? {},
-    };
-    // Value field specific properties
-    if (fieldDef.placeholder !== undefined) {
-        inputs['placeholder'] = fieldDef.placeholder;
-    }
-    if (ctx.defaultValidationMessages !== undefined) {
-        inputs['defaultValidationMessages'] = ctx.defaultValidationMessages;
-    }
-    if (ctx.fieldProxy !== undefined) {
-        inputs['field'] = ctx.fieldProxy;
-    }
-    return inputs;
-}
-/**
- * Maps a value field definition to component inputs.
- *
- * Value fields are input fields that contribute to the form's value (text, number, etc.).
- * This mapper injects FIELD_SIGNAL_CONTEXT to access the form structure and retrieve the field proxy.
- *
- * For fields with specific properties (select, datepicker, textarea, slider), use the specialized mappers:
- * - selectFieldMapper: for fields with options (select, radio, multi-checkbox)
- * - datepickerFieldMapper: for fields with minDate, maxDate, startAt
- * - textareaFieldMapper: for fields with rows, cols
- * - sliderFieldMapper: for fields with minValue, maxValue, step
- *
- * @param fieldDef The value field definition
- * @returns Signal containing Record of input names to values for ngComponentOutlet
- */
-function valueFieldMapper(fieldDef) {
-    const ctx = resolveValueFieldContext(fieldDef.key);
-    return computed(() => buildValueFieldInputs(fieldDef, ctx));
-}
-
-/**
- * Maps a checkbox/toggle field definition to component inputs.
- *
- * Checkbox fields are checked fields that contribute to the form's value as boolean.
- * This mapper injects FIELD_SIGNAL_CONTEXT to access the form structure and retrieve the field proxy.
- *
- * @param fieldDef The checkbox field definition
- * @returns Signal containing Record of input names to values for ngComponentOutlet
- */
-function checkboxFieldMapper(fieldDef) {
-    const context = inject(FIELD_SIGNAL_CONTEXT);
-    const omittedFields = omit(fieldDef, ['value']);
-    // Build base inputs (static, from field definition)
-    const baseInputs = buildBaseInputs(omittedFields);
-    // Get form-level validation messages (static)
-    const defaultValidationMessages = context.defaultValidationMessages;
-    // Get the form root to access field proxy
-    const formRoot = context.form();
-    const childrenMap = getChildrenMap(formRoot);
-    // Resolve field proxy (static - determined once during mapping)
-    let fieldProxy = undefined;
-    if (childrenMap) {
-        const formField = childrenMap.get(fieldDef.key);
-        if (formField) {
-            fieldProxy = formField;
-        }
-    }
-    // Return computed signal for reactive updates
-    return computed(() => {
-        const inputs = {
-            ...baseInputs,
-            // Always pass validationMessages (or empty object) - required for error display signals
-            validationMessages: fieldDef.validationMessages ?? {},
-        };
-        // Checked field specific property: placeholder
-        if (fieldDef.placeholder !== undefined) {
-            inputs['placeholder'] = fieldDef.placeholder;
-        }
-        if (defaultValidationMessages !== undefined) {
-            inputs['defaultValidationMessages'] = defaultValidationMessages;
-        }
-        if (fieldProxy !== undefined) {
-            inputs['field'] = fieldProxy;
-        }
-        return inputs;
-    });
-}
-
-/**
- * Maps a field with options (select, radio, multi-checkbox) to component inputs.
- *
- * Extends the base value field mapper by adding the options property.
- *
- * @param fieldDef The field definition with options
- * @returns Signal containing Record of input names to values for ngComponentOutlet
- */
-function optionsFieldMapper(fieldDef) {
-    const ctx = resolveValueFieldContext(fieldDef.key);
-    return computed(() => {
-        // Cast to BaseValueField - safe because all FieldWithOptions types extend BaseValueField
-        const inputs = buildValueFieldInputs(fieldDef, ctx);
-        // Add options property
-        inputs['options'] = fieldDef.options;
-        return inputs;
-    });
-}
-
-/**
- * Maps a datepicker field to component inputs.
- *
- * Extends the base value field mapper by adding datepicker-specific properties:
- * - minDate: Minimum selectable date
- * - maxDate: Maximum selectable date
- * - startAt: Initial date to display when opening the picker
- *
- * @param fieldDef The datepicker field definition
- * @returns Signal containing Record of input names to values for ngComponentOutlet
- */
-function datepickerFieldMapper(fieldDef) {
-    const ctx = resolveValueFieldContext(fieldDef.key);
-    return computed(() => {
-        const inputs = buildValueFieldInputs(fieldDef, ctx);
-        // Add datepicker-specific properties
-        if (fieldDef.minDate !== undefined) {
-            inputs['minDate'] = fieldDef.minDate;
-        }
-        if (fieldDef.maxDate !== undefined) {
-            inputs['maxDate'] = fieldDef.maxDate;
-        }
-        if (fieldDef.startAt !== undefined) {
-            inputs['startAt'] = fieldDef.startAt;
-        }
-        return inputs;
-    });
-}
-
 /**
  * Converts DynamicText (string | Observable | Signal) to Observable<string>
  * Unifies all three types into a consistent Observable stream
@@ -6379,187 +6222,6 @@ function dynamicTextToObservable(value, injector) {
     return of(String(value));
 }
 
-/**
- * Computed signal that determines if errors should be displayed
- * Based on field's invalid, touched, and error count
- *
- * @param field - Signal containing FieldTree
- * @returns Signal<boolean> - True if errors should be displayed
- */
-function shouldShowErrors(field) {
-    return computed(() => {
-        const fieldTree = field();
-        const control = fieldTree();
-        return control.invalid() && control.touched() && control.errors().length > 0;
-    });
-}
-
-/**
- * Interpolates {{param}} placeholders in message with error values
- *
- * @param message - Message template with {{param}} placeholders
- * @param error - Validation error containing parameter values
- * @returns Message with interpolated parameters
- *
- * @example
- * interpolateParams("Min value is {{min}}", { kind: 'min', min: 5 })
- * // Returns: "Min value is 5"
- */
-function interpolateParams(message, error) {
-    let result = message;
-    const params = extractErrorParams(error);
-    Object.entries(params).forEach(([key, value]) => {
-        const placeholder = new RegExp(`{{\\s*${key}\\s*}}`, 'g');
-        result = result.replace(placeholder, safeToString(value));
-    });
-    return result;
-}
-/**
- * Safely converts a value to a string, handling complex objects
- * @internal
- */
-function safeToString(value) {
-    if (value === null || value === undefined) {
-        return '';
-    }
-    // Handle primitives directly
-    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-        return String(value);
-    }
-    // Handle RegExp (has its own toString)
-    if (value instanceof RegExp) {
-        return value.toString();
-    }
-    // Handle Date
-    if (value instanceof Date) {
-        return value.toISOString();
-    }
-    // Handle arrays
-    if (Array.isArray(value)) {
-        return value.join(', ');
-    }
-    // For objects, try JSON.stringify first, fall back to empty string
-    try {
-        // Check if object has a custom toString that's not Object.prototype.toString
-        if (typeof value === 'object' && value.toString !== Object.prototype.toString) {
-            return value.toString();
-        }
-        // Otherwise use JSON representation
-        return JSON.stringify(value);
-    }
-    catch {
-        // If JSON.stringify fails (circular reference, etc.), return empty string
-        return '[object]';
-    }
-}
-/**
- * Extracts parameter values from validation error
- * @internal
- */
-function extractErrorParams(error) {
-    const params = {};
-    // Common validation error parameters
-    if ('min' in error)
-        params.min = error.min;
-    if ('max' in error)
-        params.max = error.max;
-    if ('requiredLength' in error)
-        params.requiredLength = error.requiredLength;
-    if ('actualLength' in error)
-        params.actualLength = error.actualLength;
-    if ('pattern' in error)
-        params.pattern = error.pattern;
-    if ('actual' in error)
-        params.actual = error.actual;
-    if ('expected' in error)
-        params.expected = error.expected;
-    // Include all custom properties from error object (for custom validators)
-    // Skip 'kind' as it's the error type identifier, not a parameter
-    Object.keys(error).forEach((key) => {
-        if (key !== 'kind' && !(key in params)) {
-            params[key] = error[key];
-        }
-    });
-    return params;
-}
-
-/**
- * Factory function that creates a signal of resolved validation errors
- * Handles async resolution of DynamicText validation messages
- *
- * @param field - Signal containing FieldTree
- * @param validationMessages - Signal containing custom field-level validation messages
- * @param defaultValidationMessages - Signal containing default validation messages (fallback)
- * @param injector - Optional injector for DynamicText resolution
- * @returns Signal<ResolvedError[]> - Reactively resolved error messages
- *
- * @example
- * ```typescript
- * readonly resolvedErrors = createResolvedErrorsSignal(
- *   this.field,
- *   this.validationMessages,
- *   this.defaultValidationMessages
- * );
- * ```
- */
-function createResolvedErrorsSignal(field, validationMessages, defaultValidationMessages = signal(undefined), injector = inject(Injector)) {
-    // Ensure validationMessages is never undefined (mappers pass {} if not defined)
-    const messages = computed(() => validationMessages() ?? {}, ...(ngDevMode ? [{ debugName: "messages" }] : []));
-    const defaultMessages = computed(() => defaultValidationMessages() ?? {}, ...(ngDevMode ? [{ debugName: "defaultMessages" }] : []));
-    // Create a computed signal that reads the actual errors from the field
-    // This ensures the signal tracks changes to field().errors(), not just the field reference
-    const errors = computed(() => {
-        const control = field()();
-        return control.errors();
-    }, ...(ngDevMode ? [{ debugName: "errors" }] : []));
-    // Convert signals to observables using toObservable with injector
-    const errors$ = toObservable(errors, { injector });
-    const messages$ = toObservable(messages, { injector });
-    const defaultMessages$ = toObservable(defaultMessages, { injector });
-    // Combine observables and process errors
-    const resolvedErrors$ = combineLatest([errors$, messages$, defaultMessages$]).pipe(switchMap$1(([currentErrors, msgs, defaultMsgs]) => {
-        // No errors - return empty array
-        if (!currentErrors || currentErrors.length === 0) {
-            return of([]);
-        }
-        // Create observable for each error's resolved message
-        const errorResolvers = currentErrors.map((error) => resolveErrorMessage(error, msgs, defaultMsgs, injector));
-        // Combine all error message observables into single array emission, filtering out nulls
-        return errorResolvers.length > 0
-            ? combineLatest(errorResolvers).pipe(map$1((errors) => errors.filter((e) => e !== null)))
-            : of([]);
-    }));
-    // Convert observable back to signal using toSignal with injector
-    // toSignal properly handles the injection context and manages subscriptions
-    return toSignal(resolvedErrors$, { initialValue: [], injector });
-}
-/**
- * Resolves a single error message from DynamicText sources with fallback logic
- * Priority: field-level message → default message → no message (logs warning)
- * @internal
- */
-function resolveErrorMessage(error, fieldMessages, defaultMessages, injector) {
-    // Check for field-level custom message first
-    const fieldMessage = fieldMessages[error.kind];
-    // Fall back to default message if no field-level message exists
-    const defaultMessage = defaultMessages[error.kind];
-    // Determine which message to use: field-level → default
-    const messageToUse = fieldMessage ?? defaultMessage;
-    // If no message found, log warning and return null (will be filtered out)
-    if (!messageToUse) {
-        console.warn(`[Dynamic Forms] No validation message found for error kind "${error.kind}". ` +
-            `Please provide a message via field-level validationMessages or form-level defaultValidationMessages.`);
-        return of(null);
-    }
-    // Convert DynamicText to Observable
-    const messageObservable = dynamicTextToObservable(messageToUse, injector);
-    // Apply parameter interpolation to support {{param}} syntax
-    return messageObservable.pipe(map$1((msg) => ({
-        kind: error.kind,
-        message: interpolateParams(msg, error),
-    })));
-}
-
 /**
  * Pipe that handles dynamic text resolution with support for static strings,
  * Observables, and Signals.
@@ -6649,6 +6311,7 @@ class RowFieldComponent {
     fieldRegistry = injectFieldRegistry();
     injector = inject(Injector);
     eventBus = inject(EventBus);
+    logger = inject(DYNAMIC_FORM_LOGGER);
     // ─────────────────────────────────────────────────────────────────────────────
     // Inputs
     // ─────────────────────────────────────────────────────────────────────────────
@@ -6682,20 +6345,29 @@ class RowFieldComponent {
             destroyRef: this.destroyRef,
             onError: (fieldDef, error) => {
                 const fieldKey = fieldDef.key || '<no key>';
-                console.error(`[Dynamic Forms] Failed to load component for field type '${fieldDef.type}' (key: ${fieldKey}) ` +
+                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);
             },
         };
         return forkJoin(fields.map((f) => resolveField(f, context)));
-    }), map((fields) => fields.filter((f) => f !== undefined)), scan$1(reconcileFields, [])), { initialValue: [], injector: this.injector });
+    }), map((fields) => fields.filter((f) => f !== undefined)), scan(reconcileFields, [])), { initialValue: [], injector: this.injector });
     // ─────────────────────────────────────────────────────────────────────────────
-    // Effects
+    // Constructor
     // ─────────────────────────────────────────────────────────────────────────────
-    emitInitializedOnFieldsResolved = explicitEffect([this.resolvedFields], ([fields]) => {
-        if (fields.length > 0) {
-            emitComponentInitialized(this.eventBus, 'row', this.field().key, this.injector);
-        }
-    });
+    constructor() {
+        this.setupEffects();
+    }
+    // ─────────────────────────────────────────────────────────────────────────────
+    // Private Methods
+    // ─────────────────────────────────────────────────────────────────────────────
+    setupEffects() {
+        // Emit initialization event when fields are resolved
+        explicitEffect([this.resolvedFields], ([fields]) => {
+            if (fields.length > 0) {
+                emitComponentInitialized(this.eventBus, 'row', this.field().key, this.injector);
+            }
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RowFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", 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 } }, host: { properties: { "class.disabled": "disabled()", "id": "`${key()}`", "attr.data-testid": "key()" }, classAttribute: "df-field df-row" }, ngImport: i0, template: `
     @for (field of resolvedFields(); track field.key) {
@@ -6715,7 +6387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                         '[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-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)}}@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"] }]
-        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }] } });
 
 var rowField_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -6739,12 +6411,22 @@ class GroupFieldComponent {
     parentFieldSignalContext = inject(FIELD_SIGNAL_CONTEXT);
     injector = inject(Injector);
     eventBus = inject(EventBus);
+    logger = inject(DYNAMIC_FORM_LOGGER);
     // ─────────────────────────────────────────────────────────────────────────────
     // Memoized Functions
     // ─────────────────────────────────────────────────────────────────────────────
-    memoizedFlattenFields = memoize((fields, registry) => flattenFields([...fields], registry), (fields, registry) => JSON.stringify(fields.map((f) => ({ key: f.key, type: f.type }))) + '_' + Array.from(registry.keys()).sort().join(','));
-    memoizedKeyBy = memoize((fields) => keyBy(fields, 'key'), (fields) => fields.map((f) => f.key).join(','));
-    memoizedDefaultValues = memoize((fieldsById, registry) => mapValues(fieldsById, (field) => getFieldDefaultValue(field, registry)), (fieldsById, registry) => Object.keys(fieldsById).sort().join(',') + '_' + Array.from(registry.keys()).sort().join(','));
+    memoizedFlattenFields = memoize((fields, registry) => flattenFields([...fields], registry), {
+        resolver: (fields, registry) => JSON.stringify(fields.map((f) => ({ key: f.key, type: f.type }))) + '_' + Array.from(registry.keys()).sort().join(','),
+        maxSize: 10,
+    });
+    memoizedKeyBy = memoize((fields) => keyBy(fields, 'key'), {
+        resolver: (fields) => fields.map((f) => f.key).join(','),
+        maxSize: 10,
+    });
+    memoizedDefaultValues = memoize((fieldsById, registry) => mapValues(fieldsById, (field) => getFieldDefaultValue(field, registry)), {
+        resolver: (fieldsById, registry) => Object.keys(fieldsById).sort().join(',') + '_' + Array.from(registry.keys()).sort().join(','),
+        maxSize: 10,
+    });
     // ─────────────────────────────────────────────────────────────────────────────
     // Inputs
     // ─────────────────────────────────────────────────────────────────────────────
@@ -6755,35 +6437,25 @@ class GroupFieldComponent {
     // ─────────────────────────────────────────────────────────────────────────────
     rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : []));
     formSetup = computed(() => {
-        try {
-            const groupField = this.field();
-            const registry = this.rawFieldRegistry();
-            if (groupField.fields && groupField.fields.length > 0) {
-                const flattenedFields = this.memoizedFlattenFields(groupField.fields, registry);
-                const fieldsById = this.memoizedKeyBy(flattenedFields);
-                const defaultValues = this.memoizedDefaultValues(fieldsById, registry);
-                return {
-                    fields: flattenedFields,
-                    originalFields: groupField.fields,
-                    defaultValues,
-                    registry,
-                };
-            }
+        const groupField = this.field();
+        const registry = this.rawFieldRegistry();
+        if (groupField.fields && groupField.fields.length > 0) {
+            const flattenedFields = this.memoizedFlattenFields(groupField.fields, registry);
+            const fieldsById = this.memoizedKeyBy(flattenedFields);
+            const defaultValues = this.memoizedDefaultValues(fieldsById, registry);
             return {
-                fields: [],
-                originalFields: [],
-                defaultValues: {},
+                fields: flattenedFields,
+                originalFields: groupField.fields,
+                defaultValues,
                 registry,
             };
         }
-        catch {
-            return {
-                fields: [],
-                originalFields: [],
-                defaultValues: {},
-                registry: this.rawFieldRegistry(),
-            };
-        }
+        return {
+            fields: [],
+            originalFields: [],
+            defaultValues: {},
+            registry,
+        };
     }, ...(ngDevMode ? [{ debugName: "formSetup" }] : []));
     defaultValues = linkedSignal(() => this.formSetup().defaultValues, ...(ngDevMode ? [{ debugName: "defaultValues" }] : []));
     entity = linkedSignal(() => {
@@ -6813,36 +6485,26 @@ class GroupFieldComponent {
     touched = computed(() => this.form()().touched(), ...(ngDevMode ? [{ debugName: "touched" }] : []));
     errors = computed(() => this.form()().errors(), ...(ngDevMode ? [{ debugName: "errors" }] : []));
     disabled = computed(() => this.form()().disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    /**
-     * Get the nested FieldTree from the parent form for this group.
-     * This allows child fields to update the parent form directly,
-     * avoiding the need for separate form synchronization.
-     */
     nestedFieldTree = computed(() => {
-        const parentForm = this.parentFieldSignalContext.form();
+        const parentForm = this.parentFieldSignalContext.form;
         const groupKey = this.field().key;
-        return getChildFieldTree(parentForm, groupKey);
+        const child = parentForm[groupKey];
+        if (!child) {
+            throw new Error(`[Dynamic Forms] Group field "${groupKey}" not found in parent form. ` + `Ensure the parent form schema includes this group field.`);
+        }
+        return child;
     }, ...(ngDevMode ? [{ debugName: "nestedFieldTree" }] : []));
     groupInjector = computed(() => {
-        const nestedTree = this.nestedFieldTree();
-        // Use the nested FieldTree from parent if available, otherwise fall back to our own form
-        // The nested FieldTree ensures changes propagate directly to the parent form
-        const formToProvide = nestedTree ?? this.form();
         const groupFieldSignalContext = {
             injector: this.injector,
             value: this.parentFieldSignalContext.value,
             defaultValues: this.defaultValues,
-            form: (() => formToProvide),
+            form: this.nestedFieldTree(),
             defaultValidationMessages: this.parentFieldSignalContext.defaultValidationMessages,
         };
         return Injector.create({
             parent: this.injector,
-            providers: [
-                {
-                    provide: FIELD_SIGNAL_CONTEXT,
-                    useValue: groupFieldSignalContext,
-                },
-            ],
+            providers: [{ provide: FIELD_SIGNAL_CONTEXT, useValue: groupFieldSignalContext }],
         });
     }, ...(ngDevMode ? [{ debugName: "groupInjector" }] : []));
     // ─────────────────────────────────────────────────────────────────────────────
@@ -6855,32 +6517,34 @@ class GroupFieldComponent {
     // Field Resolution
     // ─────────────────────────────────────────────────────────────────────────────
     fieldsSource = computed(() => this.formSetup().fields, ...(ngDevMode ? [{ debugName: "fieldsSource" }] : []));
-    resolvedFields = derivedFromDeferred(this.fieldsSource, pipe(switchMap((fields) => {
-        if (!fields || fields.length === 0) {
-            return of([]);
-        }
-        const groupKey = this.field().key;
-        const context = {
-            loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
-            registry: this.rawFieldRegistry(),
-            injector: this.groupInjector(),
-            destroyRef: this.destroyRef,
-            onError: (fieldDef, error) => {
-                const fieldKey = fieldDef.key || '<no key>';
-                console.error(`[Dynamic Forms] Failed to load component for field type '${fieldDef.type}' (key: ${fieldKey}) ` +
-                    `within group '${groupKey}'. Ensure the field type is registered in your field registry.`, error);
-            },
-        };
-        return forkJoin(fields.map((f) => resolveField(f, context)));
-    }), map((fields) => fields.filter((f) => f !== undefined)), scan$1(reconcileFields, [])), { initialValue: [], injector: this.injector });
+    resolvedFields = derivedFromDeferred(this.fieldsSource, createFieldResolutionPipe(() => ({
+        loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
+        registry: this.rawFieldRegistry(),
+        injector: this.groupInjector(),
+        destroyRef: this.destroyRef,
+        onError: (fieldDef, error) => {
+            const fieldKey = fieldDef.key || '<no key>';
+            this.logger.error(`Failed to load component for field type '${fieldDef.type}' (key: ${fieldKey}) ` +
+                `within group '${this.field().key}'. Ensure the field type is registered in your field registry.`, error);
+        },
+    })), { initialValue: [], injector: this.injector });
     // ─────────────────────────────────────────────────────────────────────────────
-    // Effects
+    // Constructor
     // ─────────────────────────────────────────────────────────────────────────────
-    emitInitializedOnFieldsResolved = explicitEffect([this.resolvedFields], ([fields]) => {
-        if (fields.length > 0) {
-            emitComponentInitialized(this.eventBus, 'group', this.field().key, this.injector);
-        }
-    });
+    constructor() {
+        this.setupEffects();
+    }
+    // ─────────────────────────────────────────────────────────────────────────────
+    // Private Methods
+    // ─────────────────────────────────────────────────────────────────────────────
+    setupEffects() {
+        // Emit initialization event when fields are resolved
+        explicitEffect([this.resolvedFields], ([fields]) => {
+            if (fields.length > 0) {
+                emitComponentInitialized(this.eventBus, 'group', this.field().key, this.injector);
+            }
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", 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 } }, outputs: { validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted" }, host: { attributes: { "role": "group" }, properties: { "class.disabled": "disabled()", "id": "`${key()}`", "attr.data-testid": "key()" }, classAttribute: "df-field df-group" }, ngImport: i0, template: `
     @for (field of resolvedFields(); track field.key) {
@@ -6901,7 +6565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                         '[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-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}\n"] }]
-        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], validityChange: [{ type: i0.Output, args: ["validityChange"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], submitted: [{ type: i0.Output, args: ["submitted"] }] } });
+        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], validityChange: [{ type: i0.Output, args: ["validityChange"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], submitted: [{ type: i0.Output, args: ["submitted"] }] } });
 
 var groupField_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -6969,8 +6633,8 @@ function syncItemToParent(itemFormInstance, parentFieldSignalContext, arrayKey,
         explicitEffect([() => itemFormInstance().value()], ([itemValue]) => {
             if (isSyncing)
                 return;
-            const parentForm = parentFieldSignalContext.form();
-            const parentValue = untracked(() => parentForm.value());
+            const parentForm = parentFieldSignalContext.form;
+            const parentValue = untracked(() => parentForm().value());
             const currentArray = getArrayValue(parentValue, arrayKey);
             const idx = untracked(() => indexSignal());
             // Only sync if value actually changed
@@ -6978,8 +6642,10 @@ function syncItemToParent(itemFormInstance, parentFieldSignalContext, arrayKey,
                 isSyncing = true;
                 const newArray = [...currentArray];
                 newArray[idx] = itemValue;
+                // Update the parent form with the new array value
+                // The `as any` is required due to Angular Signal Forms' complex conditional types
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                parentForm.value.set({ ...parentValue, [arrayKey]: newArray });
+                parentForm().value.set({ ...parentValue, [arrayKey]: newArray });
                 isSyncing = false;
             }
         });
@@ -7026,7 +6692,7 @@ function createArrayItemInjectorAndInputs(options) {
  * The linkedSignal derives from the parent array at the current index.
  *
  * For array items, we always create a form with a schema to ensure proper field structure.
- * This is needed for valueFieldMapper to find fields via childrenMap.
+ * This is needed for valueFieldMapper to find fields via bracket notation.
  */
 function createObjectItemForm(options) {
     const { template, indexSignal, parentFieldSignalContext, parentInjector, registry, arrayKey } = options;
@@ -7062,7 +6728,6 @@ function createItemInjector(options) {
         injector: undefined,
         value: parentFieldSignalContext.value,
         defaultValues: () => ({}),
-        // formRef is already the form instance (result of form()), no need to wrap in another function
         form: formRef,
         defaultValidationMessages: parentFieldSignalContext.defaultValidationMessages,
     };
@@ -7113,7 +6778,8 @@ function resolveArrayItem(options) {
         };
     }), catchError((error) => {
         if (!destroyRef.destroyed) {
-            console.error(`[Dynamic Forms] Failed to load component for field type '${template.type}' at index ${index} ` +
+            const logger = parentInjector.get(DYNAMIC_FORM_LOGGER);
+            logger.error(`Failed to load component for field type '${template.type}' at index ${index} ` +
                 `within array '${arrayField.key}'. Ensure the field type is registered in your field registry.`, error);
         }
         return of(undefined);
@@ -7136,6 +6802,7 @@ class ArrayFieldComponent {
     parentFieldSignalContext = inject(FIELD_SIGNAL_CONTEXT);
     parentInjector = inject(Injector);
     eventBus = inject(EventBus);
+    logger = inject(DYNAMIC_FORM_LOGGER);
     // ─────────────────────────────────────────────────────────────────────────────
     // Inputs
     // ─────────────────────────────────────────────────────────────────────────────
@@ -7151,21 +6818,18 @@ class ArrayFieldComponent {
     }, ...(ngDevMode ? [{ debugName: "fieldTemplate" }] : []));
     arrayFieldTrees = computed(() => {
         const arrayKey = this.field().key;
-        const parentForm = this.parentFieldSignalContext.form();
+        const parentForm = this.parentFieldSignalContext.form;
         const arrayValue = getArrayValue(this.parentFieldSignalContext.value(), arrayKey);
         if (arrayValue.length === 0)
             return [];
-        // Get the array FieldTree from the parent form
-        const arrayFieldTree = getChildFieldTree(parentForm, arrayKey);
+        const arrayFieldTree = parentForm[arrayKey];
         if (!arrayFieldTree)
             return arrayValue.map(() => null);
         // Access array items via bracket notation - Angular Signal Forms arrays support this
-        // The type is ReadonlyArrayLike<MaybeFieldTree<U, number>>
-        const arrayWithIndex = arrayFieldTree;
         const items = [];
         for (let i = 0; i < arrayValue.length; i++) {
-            // Access item FieldTree directly via bracket notation
-            const itemFieldTree = arrayWithIndex[i];
+            // Access item FieldTree directly via numeric indexing (ArrayFieldTree supports this)
+            const itemFieldTree = arrayFieldTree[i];
             items.push(itemFieldTree ?? null);
         }
         return items;
@@ -7178,27 +6842,35 @@ class ArrayFieldComponent {
     itemOrderSignal = linkedSignal(() => this.resolvedItemsSignal().map((item) => item.id), ...(ngDevMode ? [{ debugName: "itemOrderSignal" }] : []));
     resolvedItems = linkedSignal(() => this.resolvedItemsSignal(), ...(ngDevMode ? [{ debugName: "resolvedItems" }] : []));
     // ─────────────────────────────────────────────────────────────────────────────
-    // Effects
-    // ─────────────────────────────────────────────────────────────────────────────
-    syncFieldsOnArrayChange = explicitEffect([this.arrayFieldTrees], ([fieldTrees]) => {
-        this.updateVersion.update((v) => v + 1);
-        const currentVersion = this.updateVersion();
-        this.performDifferentialUpdate(fieldTrees, currentVersion);
-    });
-    // ─────────────────────────────────────────────────────────────────────────────
-    // Event Handlers
+    // Constructor
     // ─────────────────────────────────────────────────────────────────────────────
-    handleAddItem = this.eventBus
-        .on('add-array-item')
-        .pipe(takeUntilDestroyed(), filter((event) => event.arrayKey === this.key()))
-        .subscribe((event) => this.addItem(event.field ?? this.fieldTemplate(), event.index));
-    handleRemoveItem = this.eventBus
-        .on('remove-array-item')
-        .pipe(takeUntilDestroyed(), filter((event) => event.arrayKey === this.key()))
-        .subscribe((event) => this.removeItem(event.index));
+    constructor() {
+        this.setupEffects();
+        this.setupEventHandlers();
+    }
     // ─────────────────────────────────────────────────────────────────────────────
     // Private Methods
     // ─────────────────────────────────────────────────────────────────────────────
+    setupEffects() {
+        // Sync field components when array data changes
+        explicitEffect([this.arrayFieldTrees], ([fieldTrees]) => {
+            this.updateVersion.update((v) => v + 1);
+            const currentVersion = this.updateVersion();
+            this.performDifferentialUpdate(fieldTrees, currentVersion);
+        });
+    }
+    setupEventHandlers() {
+        // Handle add item events
+        this.eventBus
+            .on('add-array-item')
+            .pipe(takeUntilDestroyed(), filter((event) => event.arrayKey === this.key()))
+            .subscribe((event) => this.addItem(event.field ?? this.fieldTemplate(), event.index));
+        // Handle remove item events
+        this.eventBus
+            .on('remove-array-item')
+            .pipe(takeUntilDestroyed(), filter((event) => event.arrayKey === this.key()))
+            .subscribe((event) => this.removeItem(event.index));
+    }
     performDifferentialUpdate(fieldTrees, updateId) {
         const resolvedItems = this.resolvedItemsSignal();
         const operation = determineDifferentialOperation(resolvedItems, fieldTrees.length);
@@ -7270,13 +6942,13 @@ class ArrayFieldComponent {
     }
     addItem(fieldTemplate, index) {
         if (!fieldTemplate) {
-            console.error(`[Dynamic Forms] Cannot add item to array '${this.field().key}': no field template provided. ` +
+            this.logger.error(`Cannot add item to array '${this.field().key}': no field template provided. ` +
                 'Ensure the array field has a fields property with at least one field definition.');
             return;
         }
         const arrayKey = this.field().key;
-        const formObject = this.parentFieldSignalContext.form();
-        const currentValue = formObject.value();
+        const parentForm = this.parentFieldSignalContext.form;
+        const currentValue = parentForm().value();
         const currentArray = getArrayValue(currentValue, arrayKey);
         const insertIndex = index !== undefined ? Math.min(index, currentArray.length) : currentArray.length;
         const rawValue = getFieldDefaultValue(fieldTemplate, this.rawFieldRegistry());
@@ -7286,21 +6958,25 @@ class ArrayFieldComponent {
         const value = valueHandling === 'include' && fieldTemplate.key ? { [fieldTemplate.key]: rawValue } : rawValue;
         const newArray = [...currentArray];
         newArray.splice(insertIndex, 0, value);
+        // Update the parent form with the new array value
+        // The `as any` is required due to Angular Signal Forms' complex conditional types
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        formObject.value.set({ ...currentValue, [arrayKey]: newArray });
+        parentForm().value.set({ ...currentValue, [arrayKey]: newArray });
     }
     removeItem(index) {
         const arrayKey = this.field().key;
-        const formObject = this.parentFieldSignalContext.form();
-        const currentValue = formObject.value();
+        const parentForm = this.parentFieldSignalContext.form;
+        const currentValue = parentForm().value();
         const currentArray = getArrayValue(currentValue, arrayKey);
         if (currentArray.length === 0)
             return;
         const removeIndex = index !== undefined ? Math.min(index, currentArray.length - 1) : currentArray.length - 1;
         const newArray = [...currentArray];
         newArray.splice(removeIndex, 1);
+        // Update the parent form with the new array value
+        // The `as any` is required due to Angular Signal Forms' complex conditional types
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        formObject.value.set({ ...currentValue, [arrayKey]: newArray });
+        parentForm().value.set({ ...currentValue, [arrayKey]: newArray });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", 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 } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()" }, classAttribute: "df-field df-array" }, ngImport: i0, template: `
@@ -7320,7 +6996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                         '[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-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, .5rem);width:100%}:host>*{grid-column:1/-1}\n"] }]
-        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }] } });
 
 var arrayField_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -7328,6 +7004,103 @@ var arrayField_component = /*#__PURE__*/Object.freeze({
     default: ArrayFieldComponent
 });
 
+/**
+ * Get the length of an array FieldTree.
+ */
+function getArrayLength(arrayFieldTree) {
+    const value = arrayFieldTree().value();
+    return Array.isArray(value) ? value.length : 0;
+}
+
+/**
+ * Interpolates {{param}} placeholders in message with error values
+ *
+ * @param message - Message template with {{param}} placeholders
+ * @param error - Validation error containing parameter values
+ * @returns Message with interpolated parameters
+ *
+ * @example
+ * interpolateParams("Min value is {{min}}", { kind: 'min', min: 5 })
+ * // Returns: "Min value is 5"
+ */
+function interpolateParams(message, error) {
+    let result = message;
+    const params = extractErrorParams(error);
+    Object.entries(params).forEach(([key, value]) => {
+        const placeholder = new RegExp(`{{\\s*${key}\\s*}}`, 'g');
+        result = result.replace(placeholder, safeToString(value));
+    });
+    return result;
+}
+/**
+ * Safely converts a value to a string, handling complex objects
+ * @internal
+ */
+function safeToString(value) {
+    if (value === null || value === undefined) {
+        return '';
+    }
+    // Handle primitives directly
+    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+        return String(value);
+    }
+    // Handle RegExp (has its own toString)
+    if (value instanceof RegExp) {
+        return value.toString();
+    }
+    // Handle Date
+    if (value instanceof Date) {
+        return value.toISOString();
+    }
+    // Handle arrays
+    if (Array.isArray(value)) {
+        return value.join(', ');
+    }
+    // For objects, try JSON.stringify first, fall back to empty string
+    try {
+        // Check if object has a custom toString that's not Object.prototype.toString
+        if (typeof value === 'object' && value.toString !== Object.prototype.toString) {
+            return value.toString();
+        }
+        // Otherwise use JSON representation
+        return JSON.stringify(value);
+    }
+    catch {
+        // If JSON.stringify fails (circular reference, etc.), return empty string
+        return '[object]';
+    }
+}
+/**
+ * Extracts parameter values from validation error
+ * @internal
+ */
+function extractErrorParams(error) {
+    const params = {};
+    // Common validation error parameters
+    if ('min' in error)
+        params.min = error.min;
+    if ('max' in error)
+        params.max = error.max;
+    if ('requiredLength' in error)
+        params.requiredLength = error.requiredLength;
+    if ('actualLength' in error)
+        params.actualLength = error.actualLength;
+    if ('pattern' in error)
+        params.pattern = error.pattern;
+    if ('actual' in error)
+        params.actual = error.actual;
+    if ('expected' in error)
+        params.expected = error.expected;
+    // Include all custom properties from error object (for custom validators)
+    // Skip 'kind' as it's the error type identifier, not a parameter
+    Object.keys(error).forEach((key) => {
+        if (key !== 'kind' && !(key in params)) {
+            params[key] = error[key];
+        }
+    });
+    return params;
+}
+
 /**
  * @ng-forge/dynamic-forms
  *
@@ -7339,11 +7112,16 @@ var arrayField_component = /*#__PURE__*/Object.freeze({
  * - FormConfig and field definition types
  * - Event classes (SubmitEvent, PageChangeEvent, etc.)
  *
- * ## Integration API (for UI library authors building Material, Bootstrap, etc.)
- * - Mappers (baseFieldMapper, valueFieldMapper, etc.)
- * - FieldTypeDefinition for registering field types
- * - DynamicTextPipe, shouldShowErrors, createResolvedErrorsSignal
- * - EventBus for custom event handling
+ * ## Integration API (for UI library authors)
+ * Import from '@ng-forge/dynamic-forms/integration' for:
+ * - Specific field types (InputField, SelectField, etc.)
+ * - Field mappers (valueFieldMapper, checkboxFieldMapper, etc.)
+ * - Error utilities (createResolvedErrorsSignal, shouldShowErrors)
+ *
+ * ## Testing API
+ * Import from '@ng-forge/dynamic-forms/testing' for:
+ * - Test utilities and harnesses
+ * - Form config builders for testing
  */
 // ============================================================
 // PUBLIC API - For end users
@@ -7354,5 +7132,5 @@ var arrayField_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { resolveTokens as $, AddArrayItemEvent as A, checkboxFieldMapper as B, datepickerFieldMapper as C, DynamicTextPipe as D, EventBus as E, FormClearEvent as F, groupFieldMapper as G, pageFieldMapper as H, optionsFieldMapper as I, rowFieldMapper as J, valueFieldMapper as K, FIELD_REGISTRY as L, getFieldValueHandling as M, NextPageEvent as N, ARRAY_CONTEXT as O, PageChangeEvent as P, FIELD_SIGNAL_CONTEXT as Q, RemoveArrayItemEvent as R, SubmitEvent as S, createResolvedErrorsSignal as T, shouldShowErrors as U, dynamicTextToObservable as V, ArrayFieldComponent as W, GroupFieldComponent as X, RowFieldComponent as Y, applyValidator as Z, applyValidators as _, reconcileFields as a, BUILT_IN_FIELDS as a0, getChildFieldTree as a1, getChildrenMap as a2, getFieldProxy as a3, hasFormStructure as a4, DynamicForm as b, isFormStateCondition as c, derivedFromDeferred as d, emitComponentInitialized as e, resolveSubmitButtonDisabled as f, resolveNextButtonDisabled as g, isCheckedField as h, injectFieldRegistry as i, isValueField as j, isArrayField as k, isContainerField as l, isDisplayOnlyField as m, isGroupField as n, isLeafField as o, provideDynamicForm as p, isPageField as q, resolveField as r, isRowField as s, isValueBearingField as t, FormResetEvent as u, validatePageNesting as v, PreviousPageEvent as w, arrayFieldMapper as x, baseFieldMapper as y, buildBaseInputs as z };
-//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-Dcd04rfS.mjs.map
+export { omit as $, AddArrayItemEvent as A, buildBaseInputs as B, arrayFieldMapper as C, DYNAMIC_FORM_LOGGER as D, EventBus as E, FormClearEvent as F, groupFieldMapper as G, pageFieldMapper as H, rowFieldMapper as I, textFieldMapper as J, FIELD_REGISTRY as K, LogLevel as L, ARRAY_CONTEXT as M, NoopLogger as N, FIELD_SIGNAL_CONTEXT as O, PageChangeEvent as P, dynamicTextToObservable as Q, RemoveArrayItemEvent as R, SubmitEvent as S, ArrayFieldComponent as T, GroupFieldComponent as U, RowFieldComponent as V, applyValidator as W, applyValidators as X, getArrayLength as Y, resolveTokens as Z, BUILT_IN_FIELDS as _, DynamicTextPipe as a, interpolateParams as a0, DynamicForm as b, createFieldResolutionPipe as c, derivedFromDeferred as d, emitComponentInitialized as e, isFormStateCondition as f, resolveNextButtonDisabled as g, isCheckedField as h, injectFieldRegistry as i, isValueField as j, isRowField as k, isArrayField as l, isContainerField as m, isDisplayOnlyField as n, isGroupField as o, provideDynamicForm as p, isLeafField as q, resolveSubmitButtonDisabled as r, isPageField as s, isValueBearingField as t, FormResetEvent as u, validatePageNesting as v, withLogger as w, NextPageEvent as x, PreviousPageEvent as y, baseFieldMapper as z };
+//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-B_676NHl.mjs.map