@ng-forge/dynamic-forms 0.1.2 → 0.2.0

package/fesm2022/{ng-forge-dynamic-forms-ng-forge-dynamic-forms-BWj75LVN.mjs → ng-forge-dynamic-forms-ng-forge-dynamic-forms-CZBdtTAU.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 { 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';
 
 /**
@@ -73,30 +73,14 @@ function derivedFromDeferred(source, operator, options) {
  * // Returns: ''
  * ```
  *
- * @example
- * ```typescript
- * // Usage in component template
- * @Component({
- *   template: `
- *     <div [class]="getGridClassString(field)" class="form-field">
- *       <!-- Field content -->
- *     </div>
- *   `
- * })
- * export class FieldComponent {
- *   field: FieldDef<any>;
- *   getGridClassString = getGridClassString;
- * }
- * ```
- *
  * @public
  */
 function getGridClassString(fieldDef) {
-    const classes = [];
-    if (typeof fieldDef.col === 'number' && fieldDef.col > 0 && fieldDef.col <= 12) {
-        classes.push(`df-col-${fieldDef.col}`);
+    const col = fieldDef.col;
+    if (typeof col === 'number' && Number.isInteger(col) && col > 0 && col <= 12) {
+        return `df-col-${col}`;
     }
-    return classes.join(' ');
+    return '';
 }
 
 /**
@@ -228,6 +212,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.
@@ -236,7 +233,7 @@ function reconcileFields(prev, curr) {
  * @param action - The submission action function
  * @returns A wrapped function that always returns a Promise
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Form tree type is dynamic, action signatures vary
 function wrapSubmissionAction(action) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return (formTree) => {
@@ -332,7 +329,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 +354,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 cachedValue = cache.get(key);
+        if (cachedValue !== undefined) {
+            cache.delete(key);
+            cache.set(key, cachedValue);
+            return cachedValue;
         }
         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 +438,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.
@@ -490,6 +519,21 @@ const FIELD_SIGNAL_CONTEXT = new InjectionToken('FIELD_SIGNAL_CONTEXT', {
  */
 const ARRAY_CONTEXT = new InjectionToken('ARRAY_CONTEXT');
 
+/**
+ * Base error class for all Dynamic Forms errors.
+ *
+ * This class centralizes the `[Dynamic Forms]` prefix, ensuring consistent
+ * error messaging across the library without requiring each error site to
+ * manually include the prefix.
+ */
+class DynamicFormError extends Error {
+    static PREFIX = '[Dynamic Forms]';
+    constructor(message) {
+        super(`${DynamicFormError.PREFIX} ${message}`);
+        this.name = 'DynamicFormError';
+    }
+}
+
 /**
  * Injection token for the global field type registry.
  *
@@ -619,20 +663,21 @@ function injectFieldRegistry() {
         async loadTypeComponent(name) {
             const fieldType = registry.get(name);
             if (!fieldType) {
-                throw new Error(`[Dynamic Forms] Field type "${name}" is not registered`);
+                throw new DynamicFormError(`Field type "${name}" is not registered`);
             }
             // Handle async loading
             if (fieldType.loadComponent) {
                 try {
                     const result = await fieldType.loadComponent();
                     // Handle ES module imports - extract default export if needed
-                    return result?.default || result;
+                    const moduleResult = result;
+                    return (typeof moduleResult === 'object' && 'default' in moduleResult && moduleResult.default) || result;
                 }
                 catch (error) {
-                    throw new Error(`[Dynamic Forms] Failed to load component for field type "${name}": ${error}`);
+                    throw new DynamicFormError(`Failed to load component for field type "${name}": ${error}`);
                 }
             }
-            throw new Error(`[Dynamic Forms] Field type "${name}" has no component or loadComponent function`);
+            throw new DynamicFormError(`Field type "${name}" has no component or loadComponent function`);
         },
         /**
          * Gets all registered field type definitions.
@@ -691,6 +736,14 @@ function injectFieldRegistry() {
     };
 }
 
+/**
+ * Injection token for the dynamic forms logger.
+ *
+ * Provided by provideDynamicForm() with ConsoleLogger as default.
+ * Override with withLoggerConfig(false) to disable logging.
+ */
+const DynamicFormLogger = new InjectionToken('DynamicFormLogger');
+
 /**
  * Registry service that maintains references to root form fields.
  * This provides a type-safe way to access root form values from child fields
@@ -848,10 +901,10 @@ class RootFormRegistryService {
         this._formValueSignals.set(new Map());
         this.formContexts.clear();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RootFormRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RootFormRegistryService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RootFormRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RootFormRegistryService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RootFormRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RootFormRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -867,6 +920,7 @@ function isChildFieldContext(context) {
  */
 class FieldContextRegistryService {
     rootFormRegistry = inject(RootFormRegistryService);
+    logger = inject(DynamicFormLogger);
     /**
      * Creates an evaluation context for a field by combining:
      * - The field's current value
@@ -895,43 +949,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,25 +993,45 @@ 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 });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FieldContextRegistryService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FieldContextRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FieldContextRegistryService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FieldContextRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FieldContextRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -1315,10 +1371,10 @@ class FunctionRegistryService {
         this.clearAsyncValidators();
         this.clearHttpValidators();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FunctionRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FunctionRegistryService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FunctionRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FunctionRegistryService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FunctionRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FunctionRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -1461,12 +1517,11 @@ var TokenType;
     TokenType["RBRACKET"] = "RBRACKET";
     // Special
     TokenType["EOF"] = "EOF";
-    TokenType["TYPEOF"] = "TYPEOF";
 })(TokenType || (TokenType = {}));
 /**
  * Parser error with position information
  */
-class ExpressionParserError extends Error {
+class ExpressionParserError extends DynamicFormError {
     position;
     expression;
     constructor(message, position, expression) {
@@ -1564,7 +1619,7 @@ class Tokenizer {
                 this.position++;
             }
         }
-        throw new ExpressionParserError('[Dynamic Forms] Unterminated string literal', start, this.expression);
+        throw new ExpressionParserError('Unterminated string literal', start, this.expression);
     }
     readNumber() {
         const start = this.position;
@@ -1596,8 +1651,6 @@ class Tokenizer {
                 return TokenType.NULL;
             case 'undefined':
                 return TokenType.UNDEFINED;
-            case 'typeof':
-                return TokenType.TYPEOF;
             default:
                 return TokenType.IDENTIFIER;
         }
@@ -1671,7 +1724,7 @@ class Tokenizer {
             case ']':
                 return { type: TokenType.RBRACKET, value: ']', position: start };
             default:
-                throw new ExpressionParserError(`[Dynamic Forms] Unexpected character: ${char}`, start, this.expression);
+                throw new ExpressionParserError(`Unexpected character: ${char}`, start, this.expression);
         }
     }
 }
@@ -1695,7 +1748,7 @@ class Parser {
         this.tokens = tokenizer.tokenize();
         this.current = 0;
         if (this.isAtEnd()) {
-            throw new ExpressionParserError('[Dynamic Forms] Empty expression', 0, this.expression);
+            throw new ExpressionParserError('Empty expression', 0, this.expression);
         }
         return this.parseExpression();
     }
@@ -1757,7 +1810,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 };
@@ -1770,7 +1823,7 @@ class Parser {
             if (this.match(TokenType.DOT)) {
                 // Member access: obj.property
                 if (!this.check(TokenType.IDENTIFIER)) {
-                    throw new ExpressionParserError('[Dynamic Forms] Expected property name after "."', this.peek().position, this.expression);
+                    throw new ExpressionParserError('Expected property name after "."', this.peek().position, this.expression);
                 }
                 const property = this.advance().value;
                 node = { type: 'MemberAccess', object: node, property };
@@ -1823,7 +1876,7 @@ class Parser {
             this.consume(TokenType.RPAREN, 'Expected ")" after expression');
             return expr;
         }
-        throw new ExpressionParserError(`[Dynamic Forms] Unexpected token: ${this.peek().value}`, this.peek().position, this.expression);
+        throw new ExpressionParserError(`Unexpected token: ${this.peek().value}`, this.peek().position, this.expression);
     }
     parseArgumentList() {
         const args = [];
@@ -1874,7 +1927,7 @@ class Parser {
     consume(type, message) {
         if (this.check(type))
             return this.advance();
-        throw new ExpressionParserError(`[Dynamic Forms] ${message}`, this.peek().position, this.expression);
+        throw new ExpressionParserError(message, this.peek().position, this.expression);
     }
 }
 
@@ -2026,14 +2079,14 @@ class Evaluator {
             case 'ArrayLiteral':
                 return this.evaluateArrayLiteral(node);
             default:
-                throw new ExpressionParserError(`[Dynamic Forms] Unknown node type: ${node.type}`, 0, this.expression);
+                throw new ExpressionParserError(`Unknown node type: ${node.type}`, 0, this.expression);
         }
     }
     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);
@@ -2042,7 +2095,7 @@ class Evaluator {
         }
         // Block access to dangerous properties that could leak information or enable attacks
         if (BLOCKED_PROPERTIES.has(node.property)) {
-            throw new ExpressionParserError(`[Dynamic Forms] Property "${node.property}" is not accessible for security reasons`, 0, this.expression);
+            throw new ExpressionParserError(`Property "${node.property}" is not accessible for security reasons`, 0, this.expression);
         }
         // Allow property access on plain objects and primitives
         if (typeof obj === 'object' || typeof obj === 'string' || typeof obj === 'number') {
@@ -2051,6 +2104,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 +2125,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,13 +2149,8 @@ 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);
+                throw new ExpressionParserError(`Unknown binary operator: ${node.operator}`, 0, this.expression);
         }
     }
     evaluateUnaryOp(node) {
@@ -2100,26 +2162,24 @@ 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);
+                throw new ExpressionParserError(`Unknown unary operator: ${node.operator}`, 0, this.expression);
         }
     }
     evaluateCallExpression(node) {
         // Only allow method calls (member access), not arbitrary function calls
         if (node.callee.type !== 'MemberAccess') {
-            throw new ExpressionParserError('[Dynamic Forms] Only method calls are allowed, not arbitrary function calls', 0, this.expression);
+            throw new ExpressionParserError('Only method calls are allowed, not arbitrary function calls', 0, this.expression);
         }
         const obj = this.evaluate(node.callee.object);
         const methodName = node.callee.property;
         // Block access to dangerous properties (must check before method call)
         if (BLOCKED_PROPERTIES.has(methodName)) {
-            throw new ExpressionParserError(`[Dynamic Forms] Property "${methodName}" is not accessible for security reasons`, 0, this.expression);
+            throw new ExpressionParserError(`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);
+            throw new ExpressionParserError(`Method "${methodName}" is not allowed for security reasons`, 0, this.expression);
         }
         // Evaluate arguments
         const args = node.arguments.map((arg) => this.evaluate(arg));
@@ -2237,7 +2297,7 @@ class ExpressionParser {
                 throw error;
             }
             // Wrap other errors for consistency
-            throw new ExpressionParserError(`[Dynamic Forms] Error evaluating expression: ${error instanceof Error ? error.message : String(error)}`, 0, expression);
+            throw new ExpressionParserError(`Error evaluating expression: ${error instanceof Error ? error.message : String(error)}`, 0, expression);
         }
     }
     /**
@@ -2299,7 +2359,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 +2368,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;
     }
 }
@@ -2332,6 +2392,56 @@ function evaluateOrCondition(expression, context) {
     return expression.conditions.some((condition) => evaluateCondition(condition, context));
 }
 
+/**
+ * Cache for memoized logic functions, keyed by injection context.
+ * Uses WeakMap with FunctionRegistryService as outer key to automatically clean up.
+ * Inner structure: Map<FieldContextRegistryService, Map<expressionKey, LogicFn>>
+ */
+const logicFunctionCache = new WeakMap();
+/**
+ * Serializes a value to a deterministic string for cache key generation.
+ * Unlike JSON.stringify, this sorts object keys to ensure consistent output
+ * regardless of property insertion order.
+ */
+function stableStringify(value) {
+    if (value === null || value === undefined) {
+        return String(value);
+    }
+    if (typeof value !== 'object') {
+        return JSON.stringify(value);
+    }
+    if (Array.isArray(value)) {
+        return '[' + value.map(stableStringify).join(',') + ']';
+    }
+    const obj = value;
+    const sortedKeys = Object.keys(obj).sort();
+    const pairs = sortedKeys.map((key) => JSON.stringify(key) + ':' + stableStringify(obj[key]));
+    return '{' + pairs.join(',') + '}';
+}
+/**
+ * Serializes a conditional expression to a deterministic string key for caching.
+ * Uses stable stringification to ensure equivalent objects produce the same key
+ * regardless of property order.
+ */
+function serializeExpression(expression) {
+    return stableStringify(expression);
+}
+/**
+ * Gets or creates the cache map for a specific injection context.
+ */
+function getContextCache(ctx) {
+    let outerCache = logicFunctionCache.get(ctx.functionRegistry);
+    if (!outerCache) {
+        outerCache = new WeakMap();
+        logicFunctionCache.set(ctx.functionRegistry, outerCache);
+    }
+    let innerCache = outerCache.get(ctx.fieldContextRegistry);
+    if (!innerCache) {
+        innerCache = new Map();
+        outerCache.set(ctx.fieldContextRegistry, innerCache);
+    }
+    return innerCache;
+}
 /**
  * Create a logic function from a conditional expression.
  *
@@ -2343,37 +2453,78 @@ function evaluateOrCondition(expression, context) {
  * NOTE: For validators, use createEvaluationContext directly (with untracked) to prevent
  * infinite reactive loops. Validators with cross-field dependencies should be hoisted
  * to form-level using validateTree.
+ *
+ * @param expression The conditional expression to evaluate
+ * @returns A LogicFn that evaluates the condition in the context of a field
  */
 function createLogicFunction(expression) {
     // Inject services during factory creation, not during execution
     const functionRegistry = inject(FunctionRegistryService);
     const fieldContextRegistry = inject(FieldContextRegistryService);
-    return (ctx) => {
+    // Get cache for this injection context
+    const contextCache = getContextCache({ functionRegistry, fieldContextRegistry });
+    // Generate cache key from serialized expression
+    const cacheKey = serializeExpression(expression);
+    // Check cache first
+    const cached = contextCache.get(cacheKey);
+    if (cached) {
+        return cached;
+    }
+    const fn = (ctx) => {
         // Create REACTIVE evaluation context for logic functions
         // This allows logic to re-evaluate when dependent fields change
         const evaluationContext = fieldContextRegistry.createReactiveEvaluationContext(ctx, functionRegistry.getCustomFunctions());
         return evaluateCondition(expression, evaluationContext);
     };
+    // Cache the function
+    contextCache.set(cacheKey, fn);
+    return fn;
 }
 
 /**
- * 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().
+ *
+ * @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(DynamicFormLogger);
+    // 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 +2752,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 +2853,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(DynamicFormLogger);
+        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(DynamicFormLogger);
+    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(DynamicFormLogger);
+    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
+            const result = ExpressionParser.evaluate(expression, evaluationContext);
             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 +2924,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 +2940,26 @@ function createExpressionValidator(config) {
  * - onError: Optional handler for resource errors
  */
 function applyAsyncValidator(config, fieldPath) {
+    const logger = inject(DynamicFormLogger);
     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 +2970,40 @@ function applyAsyncValidator(config, fieldPath) {
  * - onError: Optional handler for HTTP errors
  */
 function applyHttpValidator(config, fieldPath) {
+    const logger = inject(DynamicFormLogger);
     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 +3020,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));
 }
@@ -3041,24 +3059,41 @@ class SchemaRegistryService {
         }
         return schema;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: SchemaRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: SchemaRegistryService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SchemaRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SchemaRegistryService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: SchemaRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SchemaRegistryService, decorators: [{
             type: Injectable
         }] });
 
 /**
- * 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 +3109,12 @@ function createTypePredicateFunction(predicate) {
  * 3. The actual schema application happens at runtime via the schema function
  */
 function applySchema(config, fieldPath) {
+    const logger = inject(DynamicFormLogger);
     const schemaRegistry = inject(SchemaRegistryService);
     const schema = schemaRegistry.resolveSchema(config.schema);
     if (!schema) {
         const availableSchemas = Array.from(schemaRegistry.getAllSchemas().keys()).join(', ') || '<none>';
-        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 +3134,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;
@@ -3134,6 +3170,7 @@ function createSchemaFunction(schema) {
 /**
  * Type guard for GroupField with proper type narrowing
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Type guard must accept any field type
 function isGroupField(field) {
     return field.type === 'group' && 'fields' in field;
 }
@@ -3141,6 +3178,7 @@ function isGroupField(field) {
 /**
  * Type guard for ArrayField with proper type narrowing
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Type guard must accept any field type
 function isArrayField(field) {
     return field.type === 'array' && 'fields' in field;
 }
@@ -3148,6 +3186,7 @@ function isArrayField(field) {
 /**
  * Type guard for RowField with proper type narrowing
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Type guard must accept any field type
 function isRowField(field) {
     return field.type === 'row' && 'fields' in field && Array.isArray(field.fields);
 }
@@ -3193,259 +3232,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);
-        return;
-    }
-    // Special handling for row fields - flatten child fields to root level (like pages)
-    if (isRowField(fieldDef)) {
-        mapRowFieldToForm(fieldDef, fieldPath);
+    // Layout containers (page, row) - flatten children to current level
+    if (isPageField(fieldDef) || isRowField(fieldDef)) {
+        mapContainerChildren(fieldDef.fields, 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);
+    // String validators - single cast at boundary
+    const stringConfig = getStringValidationConfig(fieldDef);
+    if (stringConfig) {
+        applyStringValidators(path, stringConfig);
     }
-    if (fieldDef.maxLength !== undefined) {
-        // MaxLength validator expects SchemaPath<string>
-        maxLength(path, fieldDef.maxLength);
-    }
-    // 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
- */
-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);
-        }
-    }
-}
-/**
- * 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]
+ * 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 mapArrayFieldToForm(arrayField, fieldPath) {
-    if (!isArrayField(arrayField) || !arrayField.fields || arrayField.fields.length === 0) {
+    if (!isArrayField(arrayField) || !arrayField.fields?.length) {
         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 +3519,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
@@ -3604,6 +3588,9 @@ function isDisplayOnlyField(field) {
 }
 
 const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function getFieldTreeByKey(ctx, key) {
+    return ctx.fieldTree[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 +3609,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(DynamicFormLogger);
     return schema((path) => {
         for (const fieldDef of fields) {
             const valueHandling = getFieldValueHandling(fieldDef.type, registry);
@@ -3631,9 +3619,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 +3641,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);
         }
     });
 }
@@ -3665,7 +3651,7 @@ function createSchemaFromFields(fields, registry, crossFieldValidators) {
  * This is the key integration point that routes cross-field validation errors
  * to the appropriate target fields via Angular's form state system.
  *
- * The validateTree function allows returning errors with a `field` property
+ * The validateTree function allows returning errors with a `fieldTree` property
  * that targets specific fields, which Angular automatically routes to those
  * fields' errors() signal.
  *
@@ -3676,8 +3662,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) => {
@@ -3690,21 +3677,20 @@ function applyCrossFieldTreeValidator(rootPath, validators, functionRegistry) {
         for (const entry of validators) {
             const { sourceFieldKey, config } = entry;
             try {
-                const error = evaluateCrossFieldValidator(entry, formValue, sourceFieldKey, ctx, customFunctions);
+                const error = evaluateCrossFieldValidator(entry, formValue, sourceFieldKey, ctx, customFunctions, logger);
                 if (error) {
                     errors.push(error);
                 }
             }
             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({
                         kind: customConfig.kind || config.type || 'custom',
-                        field: targetField,
+                        fieldTree: targetField,
                     });
                 }
             }
@@ -3715,7 +3701,7 @@ function applyCrossFieldTreeValidator(rootPath, validators, functionRegistry) {
 /**
  * Evaluates a single cross-field validator entry and returns an error if validation fails.
  */
-function evaluateCrossFieldValidator(entry, formValue, sourceFieldKey, ctx, customFunctions) {
+function evaluateCrossFieldValidator(entry, formValue, sourceFieldKey, ctx, customFunctions, logger) {
     const { config } = entry;
     const fieldValue = formValue[sourceFieldKey];
     // Create evaluation context for condition/expression evaluation
@@ -3724,6 +3710,7 @@ function evaluateCrossFieldValidator(entry, formValue, sourceFieldKey, ctx, cust
         formValue,
         fieldPath: sourceFieldKey,
         customFunctions,
+        logger,
     };
     // Check if this is a custom validator (with expression) or a built-in validator (with when condition)
     if (config.type === 'custom') {
@@ -3741,7 +3728,7 @@ function evaluateCustomCrossFieldValidator(config, evaluationContext, sourceFiel
     if (!config.expression) {
         return null;
     }
-    const { fieldValue, formValue } = evaluationContext;
+    const { fieldValue, formValue, logger, customFunctions } = evaluationContext;
     // First, evaluate the when condition if present
     // If the condition is false, the validator doesn't apply (validation passes)
     if (config.when) {
@@ -3749,7 +3736,8 @@ function evaluateCustomCrossFieldValidator(config, evaluationContext, sourceFiel
             fieldValue,
             formValue,
             fieldPath: sourceFieldKey,
-            customFunctions: evaluationContext.customFunctions || {},
+            customFunctions: customFunctions || {},
+            logger,
         });
         if (!conditionMet) {
             return null; // Condition not met, skip validation
@@ -3762,14 +3750,13 @@ 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;
     }
     const errorObj = {
         kind: config.kind || 'custom',
-        field: targetField,
+        fieldTree: targetField,
     };
     // Evaluate and include errorParams for message interpolation
     if (config.errorParams) {
@@ -3789,7 +3776,7 @@ function evaluateCustomCrossFieldValidator(config, evaluationContext, sourceFiel
  * First checks the when condition, then applies the built-in validation logic.
  */
 function evaluateBuiltInCrossFieldValidator(config, evaluationContext, sourceFieldKey, ctx) {
-    const { fieldValue, formValue } = evaluationContext;
+    const { fieldValue, formValue, logger, customFunctions } = evaluationContext;
     // First, evaluate the when condition
     // If the condition is false, the validator doesn't apply (validation passes)
     if (config.when) {
@@ -3797,7 +3784,8 @@ function evaluateBuiltInCrossFieldValidator(config, evaluationContext, sourceFie
             fieldValue,
             formValue,
             fieldPath: sourceFieldKey,
-            customFunctions: evaluationContext.customFunctions || {},
+            customFunctions: customFunctions || {},
+            logger,
         });
         if (!conditionMet) {
             return null; // Condition not met, skip validation
@@ -3809,14 +3797,13 @@ 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;
     }
     return {
         kind: config.type,
-        field: targetField,
+        fieldTree: targetField,
     };
 }
 /**
@@ -3964,6 +3951,7 @@ class EventBus {
      * eventBus.dispatch(CustomFormEvent);
      * ```
      */
+    // TypeScript limitation: Must use ConstructorParameters which relies on `any` in FormEventConstructor
     dispatch(eventConstructor, ...args) {
         this.pipeline$.next(new eventConstructor(...args));
     }
@@ -4005,10 +3993,10 @@ class EventBus {
         }
         return this.pipeline$.pipe(filter((event) => event.type === eventType));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EventBus, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EventBus });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EventBus, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EventBus });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EventBus, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EventBus, decorators: [{
             type: Injectable
         }] });
 
@@ -4052,7 +4040,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) => 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 +4065,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) => count + 1, 0), map$1((currentCount) => ({
         currentCount,
         expectedCount,
         isComplete: currentCount >= expectedCount,
@@ -4325,10 +4313,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 +4328,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 +4391,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);
         }
     }
 }
@@ -4513,6 +4498,9 @@ function tryCreateSchemaEntry(fieldKey, config) {
 /** Converts a built-in validator with cross-field expression to a custom validator. */
 function convertBuiltInToCustomValidator(config) {
     const expression = config.expression;
+    if (!expression) {
+        throw new Error(`Built-in validator ${config.type} missing required expression for cross-field conversion`);
+    }
     let validationExpression;
     switch (config.type) {
         case 'min':
@@ -4588,11 +4576,8 @@ class FormModeValidator {
     static validateFormConfigurationOrThrow(fields) {
         const result = this.validateFormConfiguration(fields);
         if (!result.isValid) {
-            const errorMessage = [
-                `[Dynamic Forms] Invalid form configuration (${result.mode} mode):`,
-                ...result.errors.map((error) => `  - ${error}`),
-            ].join('\n');
-            throw new Error(errorMessage);
+            const errorMessage = [`Invalid form configuration (${result.mode} mode):`, ...result.errors.map((error) => `  - ${error}`)].join('\n');
+            throw new DynamicFormError(errorMessage);
         }
     }
     /**
@@ -4812,19 +4797,22 @@ class PageNavigationStateChangeEvent {
  */
 class PageOrchestratorComponent {
     eventBus = inject(EventBus);
-    rootFormRegistry = inject(RootFormRegistryService);
+    fieldContextRegistry = inject(FieldContextRegistryService);
     functionRegistry = inject(FunctionRegistryService);
+    logger = inject(DynamicFormLogger);
     /**
      * 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" }] : []));
     /**
      * Field signal context for child fields
      */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- FieldSignalContext is contravariant in TModel, using any allows accepting any form type
     fieldSignalContext = input.required(...(ngDevMode ? [{ debugName: "fieldSignalContext" }] : []));
     /**
      * Computed signal that tracks which pages are hidden.
@@ -4833,8 +4821,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.
@@ -4906,7 +4893,7 @@ class PageOrchestratorComponent {
             const fieldKey = fieldDef.key;
             if (!fieldKey)
                 continue;
-            // Access the field from the form using dynamic key access
+            // Access the field from the form using bracket notation
             const field = form[fieldKey];
             if (field && typeof field === 'function') {
                 const fieldState = field();
@@ -5056,10 +5043,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;
@@ -5072,29 +5058,24 @@ class PageOrchestratorComponent {
         }
         // Check each hidden logic - if ANY condition is true, the page is hidden
         for (const logic of hiddenLogic) {
-            // Handle static boolean conditions
+            // Handle static boolean conditions (fast path)
             if (typeof logic.condition === 'boolean') {
                 if (logic.condition) {
                     return true;
                 }
                 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;
             }
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: PageOrchestratorComponent, isStandalone: true, selector: "div[page-orchestrator]", inputs: { pageFields: { classPropertyName: "pageFields", publicName: "pageFields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, fieldSignalContext: { classPropertyName: "fieldSignalContext", publicName: "fieldSignalContext", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-current-page": "state().currentPageIndex", "attr.data-total-pages": "state().totalPages" }, classAttribute: "df-page-orchestrator" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PageOrchestratorComponent, isStandalone: true, selector: "div[page-orchestrator]", inputs: { pageFields: { classPropertyName: "pageFields", publicName: "pageFields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, fieldSignalContext: { classPropertyName: "fieldSignalContext", publicName: "fieldSignalContext", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-current-page": "state().currentPageIndex", "attr.data-total-pages": "state().totalPages" }, classAttribute: "df-page-orchestrator" }, providers: [
             {
                 provide: FIELD_SIGNAL_CONTEXT,
                 useFactory: (orchestrator) => orchestrator.extendedFieldSignalContext(),
@@ -5124,9 +5105,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-ZVrJUMNb.mjs').then(m => m.default)], () => [import('./ng-forge-dynamic-forms-page-field.component-ZVrJUMNb.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-BM32StxL.mjs').then(m => m.default)], () => [import('./ng-forge-dynamic-forms-page-field.component-BM32StxL.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-ZVrJUMNb.mjs').then(m => m.default)], resolveMetadata: PageFieldComponent => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.6", ngImport: i0, type: PageOrchestratorComponent, resolveDeferredDeps: () => [import('./ng-forge-dynamic-forms-page-field.component-BM32StxL.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 +5176,7 @@ class DynamicForm {
     rootFormRegistry = inject(RootFormRegistryService);
     functionRegistry = inject(FunctionRegistryService);
     schemaRegistry = inject(SchemaRegistryService);
+    logger = inject(DynamicFormLogger);
     // ─────────────────────────────────────────────────────────────────────────────
     // Inputs
     // ─────────────────────────────────────────────────────────────────────────────
@@ -5207,17 +5189,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 }), (fields, registry) => {
-        const fieldKeys = fields.map((f) => `${f.key || ''}:${f.type}`).join('|');
-        const registryKeys = Array.from(registry.keys()).sort().join('|');
-        return `render_${fieldKeys}__${registryKeys}`;
+    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,
+    });
+    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 +5218,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 +5236,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" }] : []));
@@ -5385,7 +5379,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;
@@ -5429,12 +5423,12 @@ 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 });
+    }), map((fields) => fields.filter((f) => f !== undefined)), scan(reconcileFields, [])), { initialValue: [], injector: this.injector });
     // ─────────────────────────────────────────────────────────────────────────────
     // Constructor
     // ─────────────────────────────────────────────────────────────────────────────
@@ -5488,17 +5482,14 @@ class DynamicForm {
         });
     }
     setupEventHandlers() {
-        // Handle form reset events
         this.eventBus
             .on('form-reset')
             .pipe(takeUntilDestroyed())
             .subscribe(() => this.onFormReset());
-        // Handle form clear events
         this.eventBus
             .on('form-clear')
             .pipe(takeUntilDestroyed())
             .subscribe(() => this.onFormClear());
-        // Handle form submission
         createSubmissionHandler({
             eventBus: this.eventBus,
             configSignal: this.config,
@@ -5553,13 +5544,13 @@ class DynamicForm {
     }
     onFormReset() {
         const defaults = this.defaultValues();
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        // Type assertion is necessary: Angular Signal Forms expects exact form value type
         this.form()().value.set(defaults);
         this.value.set(defaults);
     }
     onFormClear() {
         const emptyValue = {};
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        // Type assertion is necessary: Angular Signal Forms expects exact form value type
         this.form()().value.set(emptyValue);
         this.value.set(emptyValue);
     }
@@ -5569,10 +5560,10 @@ class DynamicForm {
     ngOnDestroy() {
         this.rootFormRegistry.unregisterForm();
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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()" />
@@ -5580,11 +5571,11 @@ class DynamicForm {
     }
   `, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", 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()" />
@@ -5681,7 +5672,7 @@ 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);
     // Build base inputs (static, from field definition)
     const baseInputs = buildBaseInputs(fieldDef);
@@ -5692,16 +5683,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') {
@@ -5745,6 +5728,13 @@ function textFieldMapper(fieldDef) {
  * { type: 'page', key: 'step1', fields: [...] }
  * ```
  */
+/**
+ * Built-in field types provided by the dynamic form library.
+ *
+ * Each field type is validated at compile time using satisfies, ensuring
+ * type safety of the mapper function while allowing the array to be typed
+ * as FieldTypeDefinition[] for consumer flexibility.
+ */
 const BUILT_IN_FIELDS = [
     {
         name: 'row',
@@ -5766,25 +5756,65 @@ const BUILT_IN_FIELDS = [
     },
     {
         name: 'page',
-        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-ZVrJUMNb.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-BM32StxL.mjs'),
         mapper: pageFieldMapper,
         valueHandling: 'flatten',
     },
     {
         name: 'text',
-        loadComponent: () => import('./ng-forge-dynamic-forms-text-field.component-BKTbxAKn.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-text-field.component-C0I8jf9T.mjs'),
         mapper: textFieldMapper,
         valueHandling: 'exclude',
     },
 ];
 
+/**
+ * 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,
+    };
+}
+
+/**
+ * Console-based logger implementation.
+ */
+class ConsoleLogger {
+    prefix = '[Dynamic Forms]';
+    debug(message, ...args) {
+        console.debug(this.prefix, message, ...args);
+    }
+    info(message, ...args) {
+        console.info(this.prefix, message, ...args);
+    }
+    warn(message, ...args) {
+        console.warn(this.prefix, message, ...args);
+    }
+    error(message, ...args) {
+        console.error(this.prefix, message, ...args);
+    }
+}
+
 /**
  * Provider function to configure the dynamic form system with field types and options.
  *
  * 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 withLoggerConfig)
  * @returns Environment providers for dependency injection with type inference
  *
  * @example
@@ -5799,14 +5829,15 @@ const BUILT_IN_FIELDS = [
  *
  * @example
  * ```typescript
- * // Route-level setup
- * const routes: Routes = [
- *   {
- *     path: 'form',
- *     component: FormComponent,
- *     providers: [provideDynamicForm(...withMaterialFields())]
- *   }
- * ];
+ * // Disable logging
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideDynamicForm(
+ *       ...withMaterialFields(),
+ *       withLoggerConfig(false)
+ *     )
+ *   ]
+ * });
  * ```
  *
  * @example
@@ -5825,7 +5856,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 = [];
@@ -5835,15 +5869,25 @@ function provideDynamicForm(...fieldTypes) {
             configProviders.push(...fieldTypeWithConfig.__configProviders);
         }
     });
+    // Extract providers from features
+    const featureProviders = [];
+    const hasLoggerFeature = features.some((feature) => feature.ɵkind === 'logger');
+    features.forEach((feature) => {
+        featureProviders.push(...feature.ɵproviders);
+    });
+    // Default logger provider (ConsoleLogger) if no logger feature was provided
+    const defaultLoggerProvider = hasLoggerFeature ? [] : [{ provide: DynamicFormLogger, useValue: new ConsoleLogger() }];
     return makeEnvironmentProviders([
+        ...defaultLoggerProvider,
         {
             provide: FIELD_REGISTRY,
             useFactory: () => {
+                const logger = inject(DynamicFormLogger);
                 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);
                 });
@@ -5851,9 +5895,73 @@ function provideDynamicForm(...fieldTypes) {
             },
         },
         ...configProviders,
+        ...featureProviders,
     ]);
 }
 
+/**
+ * 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
+    }
+}
+
+/**
+ * Configure logging for dynamic forms.
+ *
+ * By default, logging is enabled (ConsoleLogger). Use this feature to disable logging
+ * or configure it conditionally.
+ *
+ * @example
+ * ```typescript
+ * // Disable logging
+ * provideDynamicForm(
+ *   ...withMaterialFields(),
+ *   withLoggerConfig(false)
+ * )
+ *
+ * // Conditional logging (e.g., only in dev mode)
+ * provideDynamicForm(
+ *   ...withMaterialFields(),
+ *   withLoggerConfig(() => isDevMode())
+ * )
+ * ```
+ *
+ * @param enabled - Whether logging is enabled. Can be a boolean or a function that returns a boolean. Defaults to true.
+ * @returns A DynamicFormFeature that configures logging
+ */
+function withLoggerConfig(enabled = true) {
+    const isEnabled = typeof enabled === 'function' ? enabled() : enabled;
+    const logger = isEnabled ? new ConsoleLogger() : new NoopLogger();
+    return createFeature('logger', [{ provide: DynamicFormLogger, useValue: logger }]);
+}
+
+/**
+ * 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.
  */
@@ -5910,6 +6018,7 @@ function evaluateLogicCondition(condition, ctx) {
         fieldValue: undefined,
         formValue,
         fieldPath: '',
+        logger: ctx.logger ?? noOpLogger,
     };
     return evaluateCondition(condition, evaluationContext);
 }
@@ -6094,244 +6203,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
@@ -6353,187 +6224,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.
@@ -6574,10 +6264,10 @@ class DynamicTextPipe {
         }
         return of(value || '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DynamicTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: DynamicTextPipe, isStandalone: true, name: "dynamicText" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DynamicTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DynamicTextPipe, isStandalone: true, name: "dynamicText" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DynamicTextPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DynamicTextPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dynamicText',
@@ -6623,6 +6313,7 @@ class RowFieldComponent {
     fieldRegistry = injectFieldRegistry();
     injector = inject(Injector);
     eventBus = inject(EventBus);
+    logger = inject(DynamicFormLogger);
     // ─────────────────────────────────────────────────────────────────────────────
     // Inputs
     // ─────────────────────────────────────────────────────────────────────────────
@@ -6656,12 +6347,12 @@ 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 });
     // ─────────────────────────────────────────────────────────────────────────────
     // Constructor
     // ─────────────────────────────────────────────────────────────────────────────
@@ -6679,14 +6370,14 @@ class RowFieldComponent {
             }
         });
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RowFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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) {
       <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
     }
   `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-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"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RowFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RowFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[row-field]', imports: [NgComponentOutlet], template: `
     @for (field of resolvedFields(); track field.key) {
@@ -6722,12 +6413,22 @@ class GroupFieldComponent {
     parentFieldSignalContext = inject(FIELD_SIGNAL_CONTEXT);
     injector = inject(Injector);
     eventBus = inject(EventBus);
+    logger = inject(DynamicFormLogger);
     // ─────────────────────────────────────────────────────────────────────────────
     // 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
     // ─────────────────────────────────────────────────────────────────────────────
@@ -6738,35 +6439,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(() => {
@@ -6796,36 +6487,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 DynamicFormError(`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" }] : []));
     // ─────────────────────────────────────────────────────────────────────────────
@@ -6838,24 +6519,17 @@ 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 });
     // ─────────────────────────────────────────────────────────────────────────────
     // Constructor
     // ─────────────────────────────────────────────────────────────────────────────
@@ -6873,14 +6547,14 @@ class GroupFieldComponent {
             }
         });
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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) {
       <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
     }
   `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-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"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: GroupFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GroupFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fieldset[group-field]', imports: [NgComponentOutlet], template: `
     @for (field of resolvedFields(); track field.key) {
@@ -6961,8 +6635,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
@@ -6970,8 +6644,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;
             }
         });
@@ -7018,7 +6694,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;
@@ -7054,7 +6730,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,
     };
@@ -7098,14 +6773,14 @@ function resolveArrayItem(options) {
         });
         return {
             id: itemId,
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             component: component,
             injector,
             inputs,
         };
     }), 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(DynamicFormLogger);
+            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);
@@ -7128,6 +6803,7 @@ class ArrayFieldComponent {
     parentFieldSignalContext = inject(FIELD_SIGNAL_CONTEXT);
     parentInjector = inject(Injector);
     eventBus = inject(EventBus);
+    logger = inject(DynamicFormLogger);
     // ─────────────────────────────────────────────────────────────────────────────
     // Inputs
     // ─────────────────────────────────────────────────────────────────────────────
@@ -7143,21 +6819,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;
@@ -7270,13 +6943,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,30 +6959,34 @@ 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: `
     @for (item of resolvedItems(); track item.id) {
       <ng-container *ngComponentOutlet="item.component; injector: item.injector; inputs: item.inputs()" />
     }
   `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-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"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ArrayFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ArrayFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'array-field', imports: [NgComponentOutlet], template: `
     @for (item of resolvedItems(); track item.id) {
@@ -7328,6 +7005,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 +7113,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 +7133,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-BWj75LVN.mjs.map
+export { BUILT_IN_FIELDS as $, AddArrayItemEvent as A, baseFieldMapper as B, ConsoleLogger as C, DynamicFormLogger as D, EventBus as E, FormClearEvent as F, buildBaseInputs as G, arrayFieldMapper as H, groupFieldMapper as I, pageFieldMapper as J, rowFieldMapper as K, textFieldMapper as L, FIELD_REGISTRY as M, NoopLogger as N, ARRAY_CONTEXT as O, PageChangeEvent as P, FIELD_SIGNAL_CONTEXT as Q, RemoveArrayItemEvent as R, SubmitEvent as S, dynamicTextToObservable as T, ArrayFieldComponent as U, GroupFieldComponent as V, RowFieldComponent as W, applyValidator as X, applyValidators as Y, getArrayLength as Z, resolveTokens as _, DynamicTextPipe as a, omit as a0, interpolateParams as a1, 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, withLoggerConfig as w, NextPageEvent as x, PreviousPageEvent as y, DynamicFormError as z };
+//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-CZBdtTAU.mjs.map