@toolbox-web/grid-angular 2.0.0-rc.0 → 2.0.0

package/fesm2022/toolbox-web-grid-angular-features-editing.mjs

@@ -65,7 +65,8 @@ class GridColumnEditor {
     /**
      * Query for the ng-template content child.
      */
-    template = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+    template = contentChild((TemplateRef), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
     /** Effect that triggers when the template is available */
     onTemplateReceived = effect(() => {
         const template = this.template();
@@ -73,7 +74,8 @@ class GridColumnEditor {
             // Register the template for this element
             editorTemplateRegistry.set(this.elementRef.nativeElement, template);
         }
-    }, ...(ngDevMode ? [{ debugName: "onTemplateReceived" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onTemplateReceived" }] : /* istanbul ignore next */ []));
     /**
      * Static type guard for template context.
      * Enables type inference in templates.
@@ -81,10 +83,10 @@ class GridColumnEditor {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridColumnEditor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.5", type: GridColumnEditor, isStandalone: true, selector: "tbw-grid-column-editor", queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridColumnEditor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.6", type: GridColumnEditor, isStandalone: true, selector: "tbw-grid-column-editor", queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridColumnEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridColumnEditor, decorators: [{
             type: Directive,
             args: [{ selector: 'tbw-grid-column-editor' }]
         }], propDecorators: { template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
@@ -173,7 +175,8 @@ class GridFormArray {
     /**
      * The FormArray to bind to the grid.
      */
-    formArray = input.required(...(ngDevMode ? [{ debugName: "formArray" }] : /* istanbul ignore next */ []));
+    formArray = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formArray" }] : /* istanbul ignore next */ []));
     /**
      * Whether to automatically sync Angular validation state to grid's visual invalid styling.
      *
@@ -185,7 +188,8 @@ class GridFormArray {
      *
      * @default true
      */
-    syncValidation = input(true, ...(ngDevMode ? [{ debugName: "syncValidation" }] : /* istanbul ignore next */ []));
+    syncValidation = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "syncValidation" }] : /* istanbul ignore next */ []));
     /**
      * Effect that sets up valueChanges subscription when FormArray changes.
      * This handles both initial binding and when the FormArray reference changes.
@@ -216,7 +220,8 @@ class GridFormArray {
                 return;
             grid.rows = formArray.getRawValue();
         });
-    }, ...(ngDevMode ? [{ debugName: "syncFormArrayToGrid" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "syncFormArrayToGrid" }] : /* istanbul ignore next */ []));
     ngOnInit() {
         const grid = this.elementRef.nativeElement;
         if (!grid)
@@ -565,1768 +570,1786 @@ class GridFormArray {
                 return typeof error === 'string' ? error : (error?.message ?? `Validation error: ${firstKey}`);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridFormArray, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: GridFormArray, isStandalone: true, selector: "tbw-grid[formArray]", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, syncValidation: { classPropertyName: "syncValidation", publicName: "syncValidation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridFormArray, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridFormArray, isStandalone: true, selector: "tbw-grid[formArray]", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, syncValidation: { classPropertyName: "syncValidation", publicName: "syncValidation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridFormArray, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridFormArray, decorators: [{
             type: Directive,
             args: [{
                     selector: 'tbw-grid[formArray]',
                 }]
         }], propDecorators: { formArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "formArray", required: true }] }], syncValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncValidation", required: false }] }] } });
 
-// Registry for structural editor templates
-const structuralEditorRegistry = new Map();
+// Symbol for storing form context on the grid element (shared with GridFormArray)
+const FORM_ARRAY_CONTEXT = Symbol('formArrayContext');
 /**
- * Gets the editor template registered by the structural directive for a given column element.
- * Falls back to the non-structural directive registry.
+ * Gets the FormArrayContext from a grid element, if present.
+ * @internal
+ * @since 0.11.0
  */
-function getStructuralEditorTemplate(columnElement) {
-    // First check structural directive registry
-    const template = structuralEditorRegistry.get(columnElement);
-    if (template)
-        return template;
-    // Fall back to the nested element registry
-    const editorEl = columnElement.querySelector('tbw-grid-column-editor');
-    if (editorEl) {
-        return getEditorTemplate(editorEl);
-    }
-    return undefined;
+function getLazyFormContext(gridElement) {
+    return gridElement[FORM_ARRAY_CONTEXT];
 }
 /**
- * Structural directive for cell editor rendering.
- *
- * This provides a cleaner syntax for defining custom cell editors without
- * the nested `<tbw-grid-column-editor>` and `<ng-template>` boilerplate.
- *
- * ## Usage
- *
- * ```html
- * <!-- Instead of this verbose syntax: -->
- * <tbw-grid-column field="status">
- *   <tbw-grid-column-editor>
- *     <ng-template let-value let-onCommit="onCommit" let-onCancel="onCancel">
- *       <app-status-editor [value]="value" (commit)="onCommit($event)" (cancel)="onCancel()" />
- *     </ng-template>
- *   </tbw-grid-column-editor>
- * </tbw-grid-column>
+ * Directive that provides lazy FormGroup creation for grid editing.
  *
- * <!-- Use this cleaner syntax (with auto-wiring - no explicit bindings needed!): -->
- * <tbw-grid-column field="status">
- *   <app-status-editor *tbwEditor="let value" [value]="value" />
- * </tbw-grid-column>
- * ```
+ * Unlike `GridFormArray` which creates all FormGroups upfront, this directive
+ * creates FormGroups on-demand only when a row enters edit mode. This provides
+ * much better performance for large datasets while still enabling full
+ * Angular Reactive Forms integration.
  *
- * ## Template Context
+ * ## Key Benefits
  *
- * The structural directive provides the same context as `GridColumnEditor`:
- * - `$implicit` / `value`: The cell value
- * - `row`: The full row data object
- * - `column`: The column configuration
- * - `onCommit`: Callback function to commit the new value (optional - auto-wired if component emits `commit` event)
- * - `onCancel`: Callback function to cancel editing (optional - auto-wired if component emits `cancel` event)
+ * - **Performance**: Only creates FormGroups for rows being edited (20-100x fewer controls)
+ * - **Same DX**: Editors still receive `control` in their context for validation
+ * - **Memory efficient**: FormGroups are cleaned up when rows exit edit mode
  *
- * ## Import
+ * ## Usage
  *
  * ```typescript
- * import { TbwEditor } from '@toolbox-web/grid-angular/features/editing';
+ * import { Component, inject, signal } from '@angular/core';
+ * import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+ * import { Grid, GridLazyForm, TbwEditor } from '@toolbox-web/grid-angular/features/editing';
  *
  * @Component({
- *   imports: [TbwEditor],
- *   // ...
+ *   imports: [Grid, GridLazyForm, TbwEditor, ReactiveFormsModule],
+ *   template: \`
+ *     <tbw-grid
+ *       [rows]="employees()"
+ *       [lazyForm]="createRowForm"
+ *       [gridConfig]="config">
+ *
+ *       <tbw-grid-column field="firstName">
+ *         <input *tbwEditor="let _; control as ctrl"
+ *                [formControl]="ctrl"
+ *                [class.is-invalid]="ctrl?.invalid && ctrl?.touched" />
+ *       </tbw-grid-column>
+ *     </tbw-grid>
+ *   \`
  * })
+ * export class MyComponent {
+ *   private fb = inject(FormBuilder);
+ *   employees = signal(generateEmployees(1000));
+ *
+ *   // Factory called when editing starts - only include editable fields!
+ *   createRowForm = (row: Employee): FormGroup => this.fb.group({
+ *     firstName: [row.firstName, Validators.required],
+ *     lastName: [row.lastName, Validators.minLength(2)],
+ *     salary: [row.salary, [Validators.required, Validators.min(0)]],
+ *   });
+ *
+ *   gridConfig = { columns: [...] };
+ * }
  * ```
  *
+ * ## How It Works
+ *
+ * 1. Rows come from `[rows]` input (plain data array)
+ * 2. When a cell enters edit mode, the FormGroup is created lazily
+ * 3. Editors receive the FormControl in their template context
+ * 4. On commit, FormGroup values are synced back to the row
+ * 5. FormGroup is cleaned up when the row exits edit mode (configurable)
+ *
+ * ## Performance Comparison
+ *
+ * | Rows | GridFormArray (20 fields) | GridLazyForm |
+ * |------|---------------------------|--------------|
+ * | 100  | 2,000 controls           | ~20 controls |
+ * | 500  | 10,000 controls          | ~20 controls |
+ * | 1000 | 20,000 controls          | ~20 controls |
+ *
  * @example
  * ```html
- * <tbw-grid-column field="status" editable>
- *   <app-status-editor *tbwEditor="let value" [value]="value" />
- * </tbw-grid-column>
+ * <tbw-grid [rows]="employees()" [lazyForm]="createRowForm" [gridConfig]="gridConfig" />
  * ```
  *
+ * @see GridFormArray For small datasets with full upfront validation
  * @category Directive
- * @since 0.1.1
+ *
+ * @since 0.11.0
  */
-class TbwEditor {
-    template = inject((TemplateRef));
+class GridLazyForm {
     elementRef = inject((ElementRef));
-    columnElement = null;
-    constructor() {
-        effect(() => {
-            this.registerTemplate();
+    // Cache of FormGroups by row reference
+    formGroupCache = new Map();
+    // Map from row reference to rowIndex (needed for getControl)
+    rowIndexMap = new Map();
+    // Track which row is currently being edited
+    editingRowIndex = null;
+    cellCommitUnsub = null;
+    rowCommitUnsub = null;
+    rowsChangeUnsub = null;
+    /**
+     * Factory function to create a FormGroup for a row.
+     * Called lazily when the row first enters edit mode.
+     *
+     * @example
+     * ```typescript
+     * createRowForm = (row: Employee): FormGroup => this.fb.group({
+     *   firstName: [row.firstName, Validators.required],
+     *   lastName: [row.lastName],
+     *   salary: [row.salary, [Validators.min(0)]],
+     * });
+     * ```
+     */
+    lazyForm = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lazyForm" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to automatically sync Angular validation state to grid's visual invalid styling.
+     *
+     * When enabled:
+     * - After a cell commit, if the FormControl is invalid, the cell is marked with `setInvalid()`
+     * - When a FormControl becomes valid, `clearInvalid()` is called
+     * - On `row-commit`, if the row's FormGroup has invalid controls, the commit is prevented
+     *
+     * @default true
+     */
+    syncValidation = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "syncValidation" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to keep FormGroups cached after a row exits edit mode.
+     *
+     * - `true`: FormGroups are kept, preserving dirty/touched state across edit sessions
+     * - `false`: FormGroups are disposed when the row exits edit mode (default)
+     *
+     * @default false
+     */
+    keepFormGroups = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keepFormGroups" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted when a row's form values change.
+     * Useful for auto-save, validation display, or syncing to external state.
+     */
+    rowFormChange = output();
+    ngOnInit() {
+        const grid = this.elementRef.nativeElement;
+        if (!grid)
+            return;
+        // Store the form context for AngularGridAdapter to access
+        this.#storeFormContext(grid);
+        // Listen for cell-commit to update FormControl and sync validation
+        this.cellCommitUnsub = grid.on('cell-commit', (detail) => {
+            this.#handleCellCommit(detail);
         });
-    }
-    registerTemplate() {
-        // Find the parent tbw-grid-column or tbw-grid-type element
-        let parent = this.elementRef.nativeElement?.parentElement;
-        while (parent && parent.tagName !== 'TBW-GRID-COLUMN' && parent.tagName !== 'TBW-GRID-TYPE') {
-            parent = parent.parentElement;
-        }
-        if (parent) {
-            this.columnElement = parent;
-            structuralEditorRegistry.set(parent, this.template);
-        }
+        // Listen for row-commit to sync FormGroup values back to row and cleanup
+        this.rowCommitUnsub = grid.on('row-commit', (detail, event) => {
+            this.#handleRowCommit(event, detail);
+        });
+        // Listen for rows-change to update row index mappings
+        this.rowsChangeUnsub = grid.on('rows-change', () => {
+            this.#updateRowIndexMap();
+        });
+        // Initial row index mapping
+        this.#updateRowIndexMap();
     }
     ngOnDestroy() {
-        if (this.columnElement) {
-            structuralEditorRegistry.delete(this.columnElement);
+        const grid = this.elementRef.nativeElement;
+        if (!grid)
+            return;
+        this.cellCommitUnsub?.();
+        this.rowCommitUnsub?.();
+        this.rowsChangeUnsub?.();
+        this.#clearFormContext(grid);
+        this.formGroupCache.clear();
+        this.rowIndexMap.clear();
+    }
+    // #region FormArrayContext Implementation
+    /**
+     * Gets or creates the FormGroup for a row.
+     * This is the core lazy initialization logic.
+     */
+    #getOrCreateFormGroup(row, rowIndex) {
+        let formGroup = this.formGroupCache.get(row);
+        if (!formGroup) {
+            const factory = this.lazyForm();
+            formGroup = factory(row, rowIndex);
+            this.formGroupCache.set(row, formGroup);
+            this.rowIndexMap.set(row, rowIndex);
         }
+        return formGroup;
     }
     /**
-     * Static type guard for template context.
-     * Uses `any` defaults for ergonomic template usage.
+     * Gets the FormGroup for a row if it exists (without creating).
      */
-    static ngTemplateContextGuard(dir, ctx) {
-        return true;
+    #getRowFormGroup(rowIndex) {
+        const grid = this.elementRef.nativeElement;
+        const rows = grid?.rows;
+        if (!rows || rowIndex < 0 || rowIndex >= rows.length)
+            return undefined;
+        const row = rows[rowIndex];
+        return this.formGroupCache.get(row);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TbwEditor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: TbwEditor, isStandalone: true, selector: "[tbwEditor]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TbwEditor, decorators: [{
-            type: Directive,
-            args: [{ selector: '[tbwEditor]' }]
-        }], ctorParameters: () => [] });
-
-/**
- * `GridEditingDirective` — owns `[editing]` and the editing-specific
- * outputs on `<tbw-grid>`. The shared outputs `cellChange` and `dataChange`
- * stay on `Grid` because they are emitted by multiple sources, not just
- * the editing plugin. See `GridFilteringDirective` for full rationale.
- *
- * Output type compatibility note: this directive uses the Angular adapter
- * wrapper types `CellCommitEvent` / `RowCommitEvent` (re-exported from the
- * package barrel) to stay binary-compatible with apps migrating from the
- * deprecated bindings on `Grid`.
- *
- * @category Directive
- */
-/**
- * Owns the binding(s) `[editing], [cellCommit], [cellCancel], [rowCommit], [changedRowsReset], [editOpen], [beforeEditClose], [editClose], [dirtyChange]` on `<tbw-grid>` for the matching feature plugin. See `GridFilteringDirective` for the full rationale.
- *
- * @category Directive
- */
-class GridEditingDirective {
-    elementRef = inject((ElementRef));
-    editing = input(...(ngDevMode ? [undefined, { debugName: "editing" }] : /* istanbul ignore next */ []));
-    cellCommit = output();
-    cellCancel = output();
-    rowCommit = output();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    changedRowsReset = output();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    editOpen = output();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    beforeEditClose = output();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    editClose = output();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    dirtyChange = output();
-    listeners = new Map();
-    static EVENTS = [
-        'cell-commit',
-        'cell-cancel',
-        'row-commit',
-        'changed-rows-reset',
-        'edit-open',
-        'before-edit-close',
-        'edit-close',
-        'dirty-change',
-    ];
-    constructor() {
-        const grid = this.elementRef.nativeElement;
-        registerFeatureClaim(grid, 'editing', () => this.editing());
-        for (const ev of GridEditingDirective.EVENTS)
-            claimEvent(grid, ev);
-    }
-    ngOnInit() {
-        const grid = this.elementRef.nativeElement;
-        const wire = (name, out) => {
-            const l = (e) => out.emit(e.detail);
-            grid.addEventListener(name, l);
-            this.listeners.set(name, l);
-        };
-        wire('cell-commit', this.cellCommit);
-        wire('cell-cancel', this.cellCancel);
-        wire('row-commit', this.rowCommit);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        wire('changed-rows-reset', this.changedRowsReset);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        wire('edit-open', this.editOpen);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        wire('before-edit-close', this.beforeEditClose);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        wire('edit-close', this.editClose);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        wire('dirty-change', this.dirtyChange);
-    }
-    ngOnDestroy() {
-        const grid = this.elementRef.nativeElement;
-        for (const [name, l] of this.listeners)
-            grid.removeEventListener(name, l);
-        this.listeners.clear();
-        unregisterFeatureClaim(grid, 'editing');
-        for (const ev of GridEditingDirective.EVENTS)
-            unclaimEvent(grid, ev);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridEditingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: GridEditingDirective, isStandalone: true, selector: "tbw-grid[editing], tbw-grid[cellCommit], tbw-grid[cellCancel], tbw-grid[rowCommit], tbw-grid[changedRowsReset], tbw-grid[editOpen], tbw-grid[beforeEditClose], tbw-grid[editClose], tbw-grid[dirtyChange]", inputs: { editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellCommit: "cellCommit", cellCancel: "cellCancel", rowCommit: "rowCommit", changedRowsReset: "changedRowsReset", editOpen: "editOpen", beforeEditClose: "beforeEditClose", editClose: "editClose", dirtyChange: "dirtyChange" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridEditingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'tbw-grid[editing], tbw-grid[cellCommit], tbw-grid[cellCancel], tbw-grid[rowCommit], tbw-grid[changedRowsReset], tbw-grid[editOpen], tbw-grid[beforeEditClose], tbw-grid[editClose], tbw-grid[dirtyChange]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [], propDecorators: { editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], cellCancel: [{ type: i0.Output, args: ["cellCancel"] }], rowCommit: [{ type: i0.Output, args: ["rowCommit"] }], changedRowsReset: [{ type: i0.Output, args: ["changedRowsReset"] }], editOpen: [{ type: i0.Output, args: ["editOpen"] }], beforeEditClose: [{ type: i0.Output, args: ["beforeEditClose"] }], editClose: [{ type: i0.Output, args: ["editClose"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }] } });
-
-/**
- * Base class for grid cell editors.
- *
- * Provides common functionality for Angular cell editors:
- * - Automatic value resolution from FormControl or value input
- * - Common inputs (value, row, column, control)
- * - Common outputs (commit, cancel)
- * - Validation state helpers
- *
- * ## Usage
- *
- * ```typescript
- * import { Component } from '@angular/core';
- * import { BaseGridEditor } from '@toolbox-web/grid-angular/features/editing';
- *
- * @Component({
- *   selector: 'app-my-editor',
- *   template: \`
- *     <input
- *       [value]="currentValue()"
- *       [class.is-invalid]="isInvalid()"
- *       (input)="commitValue($event.target.value)"
- *       (keydown.escape)="cancelEdit()"
- *     />
- *     @if (hasErrors()) {
- *       <div class="error">{{ firstErrorMessage() }}</div>
- *     }
- *   \`
- * })
- * export class MyEditorComponent extends BaseGridEditor<MyRow, string> {
- *   // Override to customize error messages
- *   protected override getErrorMessage(errorKey: string): string {
- *     if (errorKey === 'required') return 'This field is required';
- *     if (errorKey === 'minlength') return 'Too short';
- *     return super.getErrorMessage(errorKey);
- *   }
- * }
- * ```
- *
- * ## Template Syntax
- *
- * When using the base class, you only need to pass the control:
- *
- * ```html
- * <tbw-grid-column field="name">
- *   <app-my-editor *tbwEditor="let _; control as control" [control]="control" />
- * </tbw-grid-column>
- * ```
- *
- * Or without FormArray binding (fallback to value):
- *
- * ```html
- * <tbw-grid-column field="name">
- *   <app-my-editor *tbwEditor="let value" [value]="value" />
- * </tbw-grid-column>
- * ```
- *
- * @typeParam TRow - The row data type
- * @typeParam TValue - The cell value type
- *
- * @since 0.5.0
- */
-class BaseGridEditor {
-    elementRef = inject(ElementRef);
-    _destroyRef = inject(DestroyRef);
-    /** Cleanup function for the edit-close listener */
-    _editCloseCleanup = null;
-    // ============================================================================
-    // Inputs
-    // ============================================================================
-    /**
-     * The cell value. Used when FormControl is not available.
-     * When a FormControl is provided, value is derived from control.value instead.
-     */
-    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-    /**
-     * The full row data object.
-     */
-    row = input(...(ngDevMode ? [undefined, { debugName: "row" }] : /* istanbul ignore next */ []));
-    /**
-     * The column configuration.
-     */
-    column = input(...(ngDevMode ? [undefined, { debugName: "column" }] : /* istanbul ignore next */ []));
-    /**
-     * The FormControl for this cell, if the grid is bound to a FormArray.
-     * When provided, the editor uses control.value instead of the value input.
-     */
-    control = input(...(ngDevMode ? [undefined, { debugName: "control" }] : /* istanbul ignore next */ []));
-    // ============================================================================
-    // Outputs
-    // ============================================================================
-    /**
-     * Emits when the user commits a new value.
-     * Emits `null` when a nullable field is cleared.
-     */
-    commit = output();
-    /**
-     * Emits when the user cancels editing.
-     */
-    cancel = output();
-    // ============================================================================
-    // Computed State
-    // ============================================================================
-    /**
-     * The current value, derived from FormControl if available, otherwise from value input.
-     * This is the recommended way to get the current value in your editor template.
-     */
-    currentValue = computed(() => {
-        const ctrl = this.control();
-        if (ctrl) {
-            return ctrl.value;
-        }
-        return this.value();
-    }, ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether the control is invalid (has validation errors).
-     * Returns false if no FormControl is available.
-     */
-    isInvalid = computed(() => {
-        return this.control()?.invalid ?? false;
-    }, ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     /**
-     * Whether the control is dirty (has been modified).
-     * Returns false if no FormControl is available.
-     */
-    isDirty = computed(() => {
-        return this.control()?.dirty ?? false;
-    }, ...(ngDevMode ? [{ debugName: "isDirty" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether the control has been touched.
-     * Returns false if no FormControl is available.
-     */
-    isTouched = computed(() => {
-        return this.control()?.touched ?? false;
-    }, ...(ngDevMode ? [{ debugName: "isTouched" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether the control has any validation errors.
+     * Stores the FormArrayContext on the grid element.
+     * This uses the same interface as GridFormArray for compatibility.
      */
-    hasErrors = computed(() => {
-        const ctrl = this.control();
-        return ctrl?.errors != null && Object.keys(ctrl.errors).length > 0;
-    }, ...(ngDevMode ? [{ debugName: "hasErrors" }] : /* istanbul ignore next */ []));
+    #storeFormContext(grid) {
+        const context = {
+            getRow: (rowIndex) => {
+                const rows = grid.rows;
+                if (!rows || rowIndex < 0 || rowIndex >= rows.length)
+                    return null;
+                return rows[rowIndex];
+            },
+            updateField: (rowIndex, field, value) => {
+                const formGroup = this.#getRowFormGroup(rowIndex);
+                if (formGroup) {
+                    const control = formGroup.get(field);
+                    if (control) {
+                        control.setValue(value);
+                        control.markAsDirty();
+                    }
+                }
+            },
+            getValue: () => {
+                return (grid.rows ?? []);
+            },
+            // Always true for lazy forms - we create FormGroups on demand
+            hasFormGroups: true,
+            getControl: (rowIndex, field) => {
+                const rows = grid.rows;
+                if (!rows || rowIndex < 0 || rowIndex >= rows.length)
+                    return undefined;
+                const row = rows[rowIndex];
+                // LAZY: Create the FormGroup when first needed
+                const formGroup = this.#getOrCreateFormGroup(row, rowIndex);
+                return formGroup.get(field) ?? undefined;
+            },
+            getRowFormGroup: (rowIndex) => {
+                const rows = grid.rows;
+                if (!rows || rowIndex < 0 || rowIndex >= rows.length)
+                    return undefined;
+                const row = rows[rowIndex];
+                // LAZY: Create the FormGroup when first needed
+                return this.#getOrCreateFormGroup(row, rowIndex);
+            },
+            isRowValid: (rowIndex) => {
+                const formGroup = this.#getRowFormGroup(rowIndex);
+                // If no FormGroup exists yet, consider it valid (not edited)
+                if (!formGroup)
+                    return true;
+                return formGroup.valid;
+            },
+            isRowTouched: (rowIndex) => {
+                const formGroup = this.#getRowFormGroup(rowIndex);
+                if (!formGroup)
+                    return false;
+                return formGroup.touched;
+            },
+            isRowDirty: (rowIndex) => {
+                const formGroup = this.#getRowFormGroup(rowIndex);
+                if (!formGroup)
+                    return false;
+                return formGroup.dirty;
+            },
+            getRowErrors: (rowIndex) => {
+                const formGroup = this.#getRowFormGroup(rowIndex);
+                if (!formGroup)
+                    return null;
+                const errors = {};
+                let hasErrors = false;
+                Object.keys(formGroup.controls).forEach((field) => {
+                    const control = formGroup.get(field);
+                    if (control?.errors) {
+                        errors[field] = control.errors;
+                        hasErrors = true;
+                    }
+                });
+                if (formGroup.errors) {
+                    errors['_group'] = formGroup.errors;
+                    hasErrors = true;
+                }
+                return hasErrors ? errors : null;
+            },
+        };
+        grid[FORM_ARRAY_CONTEXT] = context;
+    }
     /**
-     * The first error message from the control's validation errors.
-     * Returns an empty string if no errors.
+     * Clears the FormArrayContext from the grid element.
      */
-    firstErrorMessage = computed(() => {
-        const ctrl = this.control();
-        if (!ctrl?.errors)
-            return '';
-        const firstKey = Object.keys(ctrl.errors)[0];
-        return this.getErrorMessage(firstKey, ctrl.errors[firstKey]);
-    }, ...(ngDevMode ? [{ debugName: "firstErrorMessage" }] : /* istanbul ignore next */ []));
+    #clearFormContext(grid) {
+        delete grid[FORM_ARRAY_CONTEXT];
+    }
+    // #endregion
+    // #region Event Handlers
     /**
-     * All error messages from the control's validation errors.
+     * Updates the row index map when rows change.
+     * This ensures we can find FormGroups by row reference after sorting/filtering.
      */
-    allErrorMessages = computed(() => {
-        const ctrl = this.control();
-        if (!ctrl?.errors)
-            return [];
-        return Object.entries(ctrl.errors).map(([key, value]) => this.getErrorMessage(key, value));
-    }, ...(ngDevMode ? [{ debugName: "allErrorMessages" }] : /* istanbul ignore next */ []));
-    // ============================================================================
-    // Lifecycle
-    // ============================================================================
-    constructor() {
-        afterNextRender(() => this._initEditCloseListener());
-        this._destroyRef.onDestroy(() => {
-            this._editCloseCleanup?.();
-            this._editCloseCleanup = null;
-        });
-    }
-    _initEditCloseListener() {
-        const grid = this.elementRef.nativeElement.closest('tbw-grid, [data-tbw-grid]');
-        if (!grid)
+    #updateRowIndexMap() {
+        const grid = this.elementRef.nativeElement;
+        const rows = grid?.rows;
+        if (!rows)
             return;
-        let unsubBefore;
-        let unsubClose;
-        unsubBefore = grid.on('before-edit-close', () => {
-            this.onBeforeEditClose();
-            unsubBefore?.();
-            unsubBefore = undefined;
-        });
-        unsubClose = grid.on('edit-close', () => {
-            this.onEditClose();
-            unsubClose?.();
-            unsubClose = undefined;
+        this.rowIndexMap.clear();
+        rows.forEach((row, index) => {
+            if (this.formGroupCache.has(row)) {
+                this.rowIndexMap.set(row, index);
+            }
         });
-        this._editCloseCleanup = () => {
-            unsubBefore?.();
-            unsubClose?.();
-        };
     }
-    // ============================================================================
-    // Methods
-    // ============================================================================
     /**
-     * Whether this editor's cell is the currently focused cell.
-     *
-     * In row editing mode the grid creates editors for every editable cell
-     * in the row simultaneously. Use this to conditionally auto-focus inputs
-     * or open panels only in the active cell.
-     *
-     * Performs a synchronous DOM check — safe to call from `ngAfterViewInit`.
+     * Handles cell-commit events by updating the FormControl in the FormGroup.
+     */
+    #handleCellCommit(detail) {
+        const { rowIndex, field, value, rowId } = detail;
+        const formGroup = this.#getRowFormGroup(rowIndex);
+        if (formGroup) {
+            const control = formGroup.get(field);
+            if (control) {
+                control.setValue(value);
+                control.markAsDirty();
+                control.markAsTouched();
+                // Sync Angular validation state to grid's visual invalid styling
+                if (this.syncValidation() && rowId) {
+                    this.#syncControlValidationToGrid(rowId, field, control);
+                }
+                // Emit change event
+                const grid = this.elementRef.nativeElement;
+                const row = grid?.rows?.[rowIndex];
+                if (row) {
+                    this.rowFormChange.emit({
+                        rowIndex,
+                        rowId,
+                        row,
+                        formGroup,
+                        values: formGroup.value,
+                        valid: formGroup.valid,
+                        dirty: formGroup.dirty,
+                    });
+                }
+            }
+        }
+    }
+    /**
+     * Handles row-commit events.
+     * - Prevents commit if FormGroup is invalid (when syncValidation is true)
+     * - Syncs FormGroup values back to the row
+     * - Cleans up FormGroup if keepFormGroups is false
      */
-    isCellFocused() {
-        return this.elementRef.nativeElement.closest('[part="cell"]')?.classList.contains('cell-focus') ?? false;
+    #handleRowCommit(event, detail) {
+        const { rowIndex, rowId } = detail;
+        const grid = this.elementRef.nativeElement;
+        const rows = grid?.rows;
+        if (!rows || rowIndex < 0 || rowIndex >= rows.length)
+            return;
+        const row = rows[rowIndex];
+        const formGroup = this.formGroupCache.get(row);
+        if (!formGroup)
+            return;
+        // Prevent commit if invalid (when syncValidation is enabled)
+        if (this.syncValidation() && formGroup.invalid) {
+            // Mark all controls as touched to show validation errors
+            formGroup.markAllAsTouched();
+            event.preventDefault();
+            return;
+        }
+        // Sync FormGroup values back to the row object
+        if (formGroup.dirty) {
+            const formValue = formGroup.value;
+            Object.keys(formValue).forEach((field) => {
+                if (field in row) {
+                    row[field] = formValue[field];
+                }
+            });
+        }
+        // Clean up FormGroup if not keeping them
+        if (!this.keepFormGroups()) {
+            this.formGroupCache.delete(row);
+            this.rowIndexMap.delete(row);
+            // Clear any validation state in the grid
+            if (rowId) {
+                const editingPlugin = grid.getPluginByName?.('editing');
+                editingPlugin?.clearRowInvalid(rowId);
+            }
+        }
     }
+    // #endregion
+    // #region Validation Sync
     /**
-     * Called **before** the grid clears editing state and destroys editor DOM.
-     *
-     * At this point the commit callback is still active, so subclasses can
-     * call {@link commitValue} to flush any pending/deferred values.
-     *
-     * This fires only on the **commit** path (not on revert/cancel).
-     * Use {@link onEditClose} for cleanup that should happen on both paths.
+     * Syncs a FormControl's validation state to the grid's visual invalid styling.
      */
-    onBeforeEditClose() {
-        // Default: no-op. Subclasses override to flush pending values.
+    #syncControlValidationToGrid(rowId, field, control) {
+        const grid = this.elementRef.nativeElement;
+        if (!grid)
+            return;
+        const editingPlugin = grid.getPluginByName?.('editing');
+        if (!editingPlugin)
+            return;
+        if (control.invalid) {
+            const errorMessage = this.#getFirstErrorMessage(control);
+            editingPlugin.setInvalid(rowId, field, errorMessage);
+        }
+        else {
+            editingPlugin.clearInvalid(rowId, field);
+        }
     }
     /**
-     * Called when the grid ends the editing session for this cell.
-     *
-     * Override to perform cleanup such as closing overlay panels, autocomplete
-     * dropdowns, or other floating UI that lives at `<body>` level and would
-     * otherwise persist after the editor DOM is removed.
-     *
-     * The listener is set up automatically via `afterNextRender` — no manual
-     * wiring required.
+     * Gets a human-readable error message from the first validation error.
      */
-    onEditClose() {
-        // Default: no-op. Subclasses override.
+    #getFirstErrorMessage(control) {
+        const errors = control.errors;
+        if (!errors)
+            return '';
+        const firstKey = Object.keys(errors)[0];
+        const error = errors[firstKey];
+        switch (firstKey) {
+            case 'required':
+                return 'This field is required';
+            case 'minlength':
+                return `Minimum length is ${error.requiredLength}`;
+            case 'maxlength':
+                return `Maximum length is ${error.requiredLength}`;
+            case 'min':
+                return `Minimum value is ${error.min}`;
+            case 'max':
+                return `Maximum value is ${error.max}`;
+            case 'email':
+                return 'Invalid email address';
+            case 'pattern':
+                return 'Invalid format';
+            default:
+                return typeof error === 'string' ? error : (error?.message ?? `Validation error: ${firstKey}`);
+        }
     }
+    // #endregion
+    // #region Public API
     /**
-     * Called by the grid adapter when the cell value changes externally
-     * (e.g., via `updateRow()` cascade or undo/redo).
-     *
-     * Override in subclasses to reset internal state (search text, selection
-     * flags, etc.) so the editor displays the updated value.
-     *
-     * This runs **synchronously** before the value input is updated, giving
-     * the editor a chance to clear stale state before the next change-detection
-     * pass re-reads the template.
+     * Gets the FormGroup for a row, if it exists.
+     * Unlike the context methods, this does NOT create a FormGroup lazily.
      *
-     * @param _newVal The new cell value being pushed from the grid
+     * @param rowIndex The row index
+     * @returns The FormGroup or undefined
      */
-    onExternalValueChange(_newVal) {
-        // Default: no-op. Subclasses override as needed.
+    getFormGroup(rowIndex) {
+        return this.#getRowFormGroup(rowIndex);
     }
     /**
-     * Commit a new value. Emits the commit output AND dispatches a DOM event.
-     * The DOM event enables the grid's auto-wiring to catch the commit.
-     * Call this when the user confirms their edit.
+     * Gets all cached FormGroups.
+     * Useful for bulk validation or inspection.
+     *
+     * @returns Map of row objects to their FormGroups
      */
-    commitValue(newValue) {
-        // Emit Angular output for template bindings
-        this.commit.emit(newValue);
-        // Dispatch DOM CustomEvent for grid's auto-wiring
-        // This allows the adapter to catch commits without explicit (commit)="..." bindings
-        this.elementRef.nativeElement.dispatchEvent(new CustomEvent('commit', { detail: newValue, bubbles: true }));
+    getAllFormGroups() {
+        return this.formGroupCache;
     }
     /**
-     * Cancel editing. Emits the cancel output AND dispatches a DOM event.
-     * Call this when the user cancels (e.g., presses Escape).
+     * Clears all cached FormGroups.
+     * Useful when the underlying data changes significantly.
      */
-    cancelEdit() {
-        // Emit Angular output for template bindings
-        this.cancel.emit();
-        // Dispatch DOM CustomEvent for grid's auto-wiring
-        this.elementRef.nativeElement.dispatchEvent(new CustomEvent('cancel', { bubbles: true }));
+    clearAllFormGroups() {
+        this.formGroupCache.clear();
+        this.rowIndexMap.clear();
     }
     /**
-     * Get a human-readable error message for a validation error.
-     * Override this method to customize error messages for your editor.
+     * Validates all currently cached FormGroups.
      *
-     * @param errorKey - The validation error key (e.g., 'required', 'minlength')
-     * @param errorValue - The error value (e.g., { requiredLength: 5, actualLength: 3 })
-     * @returns A human-readable error message
+     * @returns true if all FormGroups are valid, false otherwise
      */
-    getErrorMessage(errorKey, errorValue) {
-        switch (errorKey) {
-            case 'required':
-                return 'This field is required';
-            case 'minlength': {
-                const err = errorValue;
-                return `Minimum length is ${err?.requiredLength ?? 'unknown'}`;
-            }
-            case 'maxlength': {
-                const err = errorValue;
-                return `Maximum length is ${err?.requiredLength ?? 'unknown'}`;
-            }
-            case 'min': {
-                const err = errorValue;
-                return `Minimum value is ${err?.min ?? 'unknown'}`;
-            }
-            case 'max': {
-                const err = errorValue;
-                return `Maximum value is ${err?.max ?? 'unknown'}`;
+    validateAll() {
+        for (const formGroup of this.formGroupCache.values()) {
+            if (formGroup.invalid) {
+                formGroup.markAllAsTouched();
+                return false;
             }
-            case 'email':
-                return 'Invalid email address';
-            case 'pattern':
-                return 'Invalid format';
-            default:
-                return `Invalid value (${errorKey})`;
         }
+        return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BaseGridEditor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: BaseGridEditor, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commit: "commit", cancel: "cancel" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridLazyForm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridLazyForm, isStandalone: true, selector: "tbw-grid[lazyForm]", inputs: { lazyForm: { classPropertyName: "lazyForm", publicName: "lazyForm", isSignal: true, isRequired: true, transformFunction: null }, syncValidation: { classPropertyName: "syncValidation", publicName: "syncValidation", isSignal: true, isRequired: false, transformFunction: null }, keepFormGroups: { classPropertyName: "keepFormGroups", publicName: "keepFormGroups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowFormChange: "rowFormChange" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BaseGridEditor, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], commit: [{ type: i0.Output, args: ["commit"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridLazyForm, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tbw-grid[lazyForm]',
+                }]
+        }], propDecorators: { lazyForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyForm", required: true }] }], syncValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncValidation", required: false }] }], keepFormGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepFormGroups", required: false }] }], rowFormChange: [{ type: i0.Output, args: ["rowFormChange"] }] } });
 
+// Registry for structural editor templates
+const structuralEditorRegistry = new Map();
 /**
- * Base class for grid editors that also work as Angular form controls.
+ * Gets the editor template registered by the structural directive for a given column element.
+ * Falls back to the non-structural directive registry.
+ */
+function getStructuralEditorTemplate(columnElement) {
+    // First check structural directive registry
+    const template = structuralEditorRegistry.get(columnElement);
+    if (template)
+        return template;
+    // Fall back to the nested element registry
+    const editorEl = columnElement.querySelector('tbw-grid-column-editor');
+    if (editorEl) {
+        return getEditorTemplate(editorEl);
+    }
+    return undefined;
+}
+/**
+ * Structural directive for cell editor rendering.
+ *
+ * This provides a cleaner syntax for defining custom cell editors without
+ * the nested `<tbw-grid-column-editor>` and `<ng-template>` boilerplate.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <!-- Instead of this verbose syntax: -->
+ * <tbw-grid-column field="status">
+ *   <tbw-grid-column-editor>
+ *     <ng-template let-value let-onCommit="onCommit" let-onCancel="onCancel">
+ *       <app-status-editor [value]="value" (commit)="onCommit($event)" (cancel)="onCancel()" />
+ *     </ng-template>
+ *   </tbw-grid-column-editor>
+ * </tbw-grid-column>
  *
- * Combines `BaseGridEditor` with `ControlValueAccessor` so the same component
- * can be used inside a `<tbw-grid>` **and** in a standalone `<form>`.
+ * <!-- Use this cleaner syntax (with auto-wiring - no explicit bindings needed!): -->
+ * <tbw-grid-column field="status">
+ *   <app-status-editor *tbwEditor="let value" [value]="value" />
+ * </tbw-grid-column>
+ * ```
  *
- * ## What it provides
+ * ## Template Context
  *
- * | Member | Purpose |
- * |--------|---------|
- * | `cvaValue` | Signal holding the value written by the form control |
- * | `disabledState` | Signal tracking `setDisabledState` calls |
- * | `displayValue` | Computed that prefers grid value (`currentValue`) and falls back to `cvaValue` |
- * | `commitBoth(v)` | Commits via both CVA `onChange` and grid `commitValue` |
- * | `writeValue` / `registerOn*` / `setDisabledState` | Full CVA implementation |
+ * The structural directive provides the same context as `GridColumnEditor`:
+ * - `$implicit` / `value`: The cell value
+ * - `row`: The full row data object
+ * - `column`: The column configuration
+ * - `onCommit`: Callback function to commit the new value (optional - auto-wired if component emits `commit` event)
+ * - `onCancel`: Callback function to cancel editing (optional - auto-wired if component emits `cancel` event)
  *
- * ## Usage
+ * ## Import
  *
  * ```typescript
- * import { Component, forwardRef } from '@angular/core';
- * import { NG_VALUE_ACCESSOR } from '@angular/forms';
- * import { BaseGridEditorCVA } from '@toolbox-web/grid-angular/features/editing';
+ * import { TbwEditor } from '@toolbox-web/grid-angular/features/editing';
  *
  * @Component({
- *   selector: 'app-date-picker',
- *   providers: [{
- *     provide: NG_VALUE_ACCESSOR,
- *     useExisting: forwardRef(() => DatePickerComponent),
- *     multi: true,
- *   }],
- *   template: `
- *     <input
- *       type="date"
- *       [value]="displayValue()"
- *       [disabled]="disabledState()"
- *       (change)="commitBoth($event.target.value)"
- *       (keydown.escape)="cancelEdit()"
- *     />
- *   `
+ *   imports: [TbwEditor],
+ *   // ...
  * })
- * export class DatePickerComponent extends BaseGridEditorCVA<MyRow, string> {}
  * ```
  *
- * > **Note:** Subclasses must still provide `NG_VALUE_ACCESSOR` themselves
- * > because `forwardRef(() => ConcreteClass)` must reference the concrete
- * > component — this is an Angular limitation.
- *
- * @typeParam TRow - The row data type
- * @typeParam TValue - The cell/control value type
+ * @example
+ * ```html
+ * <tbw-grid-column field="status" editable>
+ *   <app-status-editor *tbwEditor="let value" [value]="value" />
+ * </tbw-grid-column>
+ * ```
  *
- * @since 0.13.0
+ * @category Directive
+ * @since 0.1.1
  */
-class BaseGridEditorCVA extends BaseGridEditor {
-    // ============================================================================
-    // CVA State
-    // ============================================================================
-    /** Internal onChange callback registered by the form control. */
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    _onChange = () => { };
-    /** Internal onTouched callback registered by the form control. */
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    _onTouched = () => { };
-    /**
-     * Signal holding the value written by the form control via `writeValue()`.
-     * Updated when the form control pushes a new value (e.g. `patchValue`, `setValue`).
-     */
-    cvaValue = signal(null, ...(ngDevMode ? [{ debugName: "cvaValue" }] : /* istanbul ignore next */ []));
-    /**
-     * Signal tracking the disabled state set by the form control.
-     * Updated when `setDisabledState()` is called by Angular's forms module.
-     */
-    disabledState = signal(false, ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
-    /**
-     * Resolved display value.
-     *
-     * Prefers `currentValue()` (grid context — from `control.value` or `value` input)
-     * and falls back to `cvaValue()` (standalone form context — from `writeValue`).
-     *
-     * Use this in your template instead of reading `currentValue()` directly
-     * so the component works in both grid and standalone form contexts.
-     */
-    displayValue = computed(() => {
-        return this.currentValue() ?? this.cvaValue();
-    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
-    // ============================================================================
-    // ControlValueAccessor Implementation
-    // ============================================================================
-    /**
-     * Called by Angular forms when the form control value changes programmatically.
-     */
-    writeValue(value) {
-        this.cvaValue.set(value);
-    }
-    /**
-     * Called by Angular forms to register a change callback.
-     */
-    registerOnChange(fn) {
-        this._onChange = fn;
+class TbwEditor {
+    template = inject((TemplateRef));
+    elementRef = inject((ElementRef));
+    columnElement = null;
+    constructor() {
+        effect(() => {
+            this.registerTemplate();
+        });
     }
-    /**
-     * Called by Angular forms to register a touched callback.
-     */
-    registerOnTouched(fn) {
-        this._onTouched = fn;
+    registerTemplate() {
+        // Find the parent tbw-grid-column or tbw-grid-type element
+        let parent = this.elementRef.nativeElement?.parentElement;
+        while (parent && parent.tagName !== 'TBW-GRID-COLUMN' && parent.tagName !== 'TBW-GRID-TYPE') {
+            parent = parent.parentElement;
+        }
+        if (parent) {
+            this.columnElement = parent;
+            structuralEditorRegistry.set(parent, this.template);
+        }
     }
-    /**
-     * Called by Angular forms to set the disabled state.
-     */
-    setDisabledState(isDisabled) {
-        this.disabledState.set(isDisabled);
+    ngOnDestroy() {
+        if (this.columnElement) {
+            structuralEditorRegistry.delete(this.columnElement);
+        }
     }
-    // ============================================================================
-    // Dual-Commit Helpers
-    // ============================================================================
     /**
-     * Commit a value through both the CVA (form control) and the grid.
-     *
-     * - Calls the CVA `onChange` callback (updates the form control)
-     * - Marks the control as touched
-     * - Calls `commitValue()` (emits grid commit event + DOM `CustomEvent`)
-     *
-     * Use this instead of `commitValue()` when your editor doubles as a form control.
-     *
-     * @param value - The new value to commit
+     * Static type guard for template context.
+     * Uses `any` defaults for ergonomic template usage.
      */
-    commitBoth(value) {
-        // Update CVA
-        this.cvaValue.set(value);
-        this._onChange(value);
-        this._onTouched();
-        // Update grid (null is valid for nullable columns — the grid's cell-commit
-        // handler and EditingPlugin will apply it correctly)
-        this.commitValue(value);
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BaseGridEditorCVA, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: BaseGridEditorCVA, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TbwEditor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: TbwEditor, isStandalone: true, selector: "[tbwEditor]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BaseGridEditorCVA, decorators: [{
-            type: Directive
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TbwEditor, decorators: [{
+            type: Directive,
+            args: [{ selector: '[tbwEditor]' }]
+        }], ctorParameters: () => [] });
 
-// #endregion
-// #region Global Styles
-/** Tracks whether the global overlay stylesheet has been injected. */
-let overlayStylesInjected = false;
 /**
- * CSS for the overlay panel base layer.
- * Injected once into `<head>` on first `BaseOverlayEditor` use.
+ * `GridEditingDirective` — owns `[editing]` and the editing-specific
+ * outputs on `<tbw-grid>`. The shared outputs `cellChange` and `dataChange`
+ * stay on `Grid` because they are emitted by multiple sources, not just
+ * the editing plugin. See `GridFilteringDirective` for full rationale.
  *
- * Uses CSS Anchor Positioning as primary strategy with a JS fallback
- * for browsers that don't support it (Firefox, Safari as of late 2025).
+ * Output type compatibility note: this directive uses the Angular adapter
+ * wrapper types `CellCommitEvent` / `RowCommitEvent` (re-exported from the
+ * package barrel) to stay binary-compatible with apps migrating from the
+ * deprecated bindings on `Grid`.
+ *
+ * @category Directive
  */
-const OVERLAY_STYLES = /* css */ `
-.tbw-overlay-panel {
-  position: fixed;
-  z-index: 10000;
-  background: var(--tbw-overlay-bg, #fff);
-  border: 1px solid var(--tbw-overlay-border, #ccc);
-  border-radius: var(--tbw-overlay-radius, 4px);
-  box-shadow: var(--tbw-overlay-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
-  box-sizing: border-box;
-  overflow: auto;
-}
-
-/* Hide panels that have not been initialised via initOverlay() yet.
-   Prevents a flash-of-unstyled-content when the subclass defers
-   the initOverlay call (e.g. via setTimeout or afterNextRender). */
-.tbw-overlay-panel:not([data-anchor-id]) {
-  display: none;
-}
-
-.tbw-overlay-panel:popover-open {
-  display: block;
+/**
+ * Owns the binding(s) `[editing], [cellCommit], [cellCancel], [rowCommit], [changedRowsReset], [editOpen], [beforeEditClose], [editClose], [dirtyChange]` on `<tbw-grid>` for the matching feature plugin. See `GridFilteringDirective` for the full rationale.
+ *
+ * @category Directive
+ */
+class GridEditingDirective {
+    elementRef = inject((ElementRef));
+    editing = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "editing" }] : /* istanbul ignore next */ []));
+    cellCommit = output();
+    cellCancel = output();
+    rowCommit = output();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    changedRowsReset = output();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    editOpen = output();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    beforeEditClose = output();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    editClose = output();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    dirtyChange = output();
+    listeners = new Map();
+    static EVENTS = [
+        'cell-commit',
+        'cell-cancel',
+        'row-commit',
+        'changed-rows-reset',
+        'edit-open',
+        'before-edit-close',
+        'edit-close',
+        'dirty-change',
+    ];
+    constructor() {
+        const grid = this.elementRef.nativeElement;
+        registerFeatureClaim(grid, 'editing', () => this.editing());
+        for (const ev of GridEditingDirective.EVENTS)
+            claimEvent(grid, ev);
+    }
+    ngOnInit() {
+        const grid = this.elementRef.nativeElement;
+        const wire = (name, out) => {
+            const l = (e) => out.emit(e.detail);
+            grid.addEventListener(name, l);
+            this.listeners.set(name, l);
+        };
+        wire('cell-commit', this.cellCommit);
+        wire('cell-cancel', this.cellCancel);
+        wire('row-commit', this.rowCommit);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        wire('changed-rows-reset', this.changedRowsReset);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        wire('edit-open', this.editOpen);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        wire('before-edit-close', this.beforeEditClose);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        wire('edit-close', this.editClose);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        wire('dirty-change', this.dirtyChange);
+    }
+    ngOnDestroy() {
+        const grid = this.elementRef.nativeElement;
+        for (const [name, l] of this.listeners)
+            grid.removeEventListener(name, l);
+        this.listeners.clear();
+        unregisterFeatureClaim(grid, 'editing');
+        for (const ev of GridEditingDirective.EVENTS)
+            unclaimEvent(grid, ev);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridEditingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridEditingDirective, isStandalone: true, selector: "tbw-grid[editing], tbw-grid[cellCommit], tbw-grid[cellCancel], tbw-grid[rowCommit], tbw-grid[changedRowsReset], tbw-grid[editOpen], tbw-grid[beforeEditClose], tbw-grid[editClose], tbw-grid[dirtyChange]", inputs: { editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellCommit: "cellCommit", cellCancel: "cellCancel", rowCommit: "rowCommit", changedRowsReset: "changedRowsReset", editOpen: "editOpen", beforeEditClose: "beforeEditClose", editClose: "editClose", dirtyChange: "dirtyChange" }, ngImport: i0 });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridEditingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tbw-grid[editing], tbw-grid[cellCommit], tbw-grid[cellCancel], tbw-grid[rowCommit], tbw-grid[changedRowsReset], tbw-grid[editOpen], tbw-grid[beforeEditClose], tbw-grid[editClose], tbw-grid[dirtyChange]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], cellCancel: [{ type: i0.Output, args: ["cellCancel"] }], rowCommit: [{ type: i0.Output, args: ["rowCommit"] }], changedRowsReset: [{ type: i0.Output, args: ["changedRowsReset"] }], editOpen: [{ type: i0.Output, args: ["editOpen"] }], beforeEditClose: [{ type: i0.Output, args: ["beforeEditClose"] }], editClose: [{ type: i0.Output, args: ["editClose"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }] } });
 
-@supports (anchor-name: --a) {
-  .tbw-overlay-panel[data-anchor-id] {
-    position: fixed;
-    position-anchor: var(--tbw-overlay-anchor);
-    inset: unset;
-  }
-  .tbw-overlay-panel[data-pos="below"] {
-    top: anchor(bottom);
-    left: anchor(left);
-    position-try-fallbacks: flip-block;
-  }
-  .tbw-overlay-panel[data-pos="above"] {
-    bottom: anchor(top);
-    left: anchor(left);
-    position-try-fallbacks: flip-block;
-  }
-  .tbw-overlay-panel[data-pos="below-right"] {
-    top: anchor(bottom);
-    right: anchor(right);
-    position-try-fallbacks: flip-block;
-  }
-  .tbw-overlay-panel[data-pos="over-top-left"] {
-    top: anchor(top);
-    left: anchor(left);
-  }
-  .tbw-overlay-panel[data-pos="over-bottom-left"] {
-    bottom: anchor(bottom);
-    left: anchor(left);
-  }
-}
-`;
-function ensureOverlayStyles() {
-    if (overlayStylesInjected)
-        return;
-    overlayStylesInjected = true;
-    const style = document.createElement('style');
-    style.setAttribute('data-tbw-overlay', '');
-    style.textContent = OVERLAY_STYLES;
-    document.head.appendChild(style);
-}
-// #endregion
-// #region Anchor ID Counter
-let anchorCounter = 0;
-// #endregion
 /**
- * Base class for grid editors that display a floating overlay panel.
+ * Base class for grid cell editors.
  *
- * Provides infrastructure for:
- * - **Overlay positioning** — CSS Anchor Positioning with JS fallback
- * - **Focus gating** — in row editing mode, the panel only opens for the focused cell
- * - **Click-outside detection** — closes the panel when clicking outside
- * - **MutationObserver** — detects cell focus changes (row editing mode)
- * - **Escape handling** — closes the panel and returns focus to the inline input
- * - **Synthetic Tab dispatch** — advances grid focus after overlay close
- * - **Automatic teardown** — removes the panel from `<body>` and cleans up listeners
- * - **External focus registration** — auto-registers the panel via `grid.registerExternalFocusContainer()` so the grid keeps `data-has-focus` and editors stay open while the overlay has focus
+ * Provides common functionality for Angular cell editors:
+ * - Automatic value resolution from FormControl or value input
+ * - Common inputs (value, row, column, control)
+ * - Common outputs (commit, cancel)
+ * - Validation state helpers
  *
  * ## Usage
  *
  * ```typescript
- * import { Component, viewChild, ElementRef, effect } from '@angular/core';
- * import { BaseOverlayEditor } from '@toolbox-web/grid-angular/features/editing';
+ * import { Component } from '@angular/core';
+ * import { BaseGridEditor } from '@toolbox-web/grid-angular/features/editing';
  *
  * @Component({
- *   selector: 'app-date-editor',
- *   template: `
+ *   selector: 'app-my-editor',
+ *   template: \`
  *     <input
- *       #inlineInput
- *       readonly
  *       [value]="currentValue()"
- *       (click)="onInlineClick()"
- *       (keydown)="onInlineKeydown($event)"
+ *       [class.is-invalid]="isInvalid()"
+ *       (input)="commitValue($event.target.value)"
+ *       (keydown.escape)="cancelEdit()"
  *     />
- *     <div #panel class="tbw-overlay-panel" style="width: 280px;">
- *       <!-- your date picker UI here -->
- *       <div class="actions">
- *         <button (click)="selectAndClose(selectedDate)">OK</button>
- *         <button (click)="hideOverlay()">Cancel</button>
- *       </div>
- *     </div>
- *   `
+ *     @if (hasErrors()) {
+ *       <div class="error">{{ firstErrorMessage() }}</div>
+ *     }
+ *   \`
  * })
- * export class DateEditorComponent extends BaseOverlayEditor<MyRow, string> {
- *   panelRef = viewChild.required<ElementRef<HTMLElement>>('panel');
- *   inputRef = viewChild.required<ElementRef<HTMLInputElement>>('inlineInput');
- *
- *   protected override overlayPosition = 'below' as const;
- *
- *   constructor() {
- *     super();
- *     effect(() => {
- *       const panel = this.panelRef().nativeElement;
- *       this.initOverlay(panel);
- *       if (this.isCellFocused()) this.showOverlay();
- *     });
+ * export class MyEditorComponent extends BaseGridEditor<MyRow, string> {
+ *   // Override to customize error messages
+ *   protected override getErrorMessage(errorKey: string): string {
+ *     if (errorKey === 'required') return 'This field is required';
+ *     if (errorKey === 'minlength') return 'Too short';
+ *     return super.getErrorMessage(errorKey);
  *   }
+ * }
+ * ```
  *
- *   protected getInlineInput(): HTMLInputElement | null {
- *     return this.inputRef()?.nativeElement ?? null;
- *   }
+ * ## Template Syntax
  *
- *   protected onOverlayOutsideClick(): void {
- *     this.hideOverlay();
- *   }
+ * When using the base class, you only need to pass the control:
  *
- *   selectAndClose(date: string): void {
- *     this.commitValue(date);
- *     this.hideOverlay();
- *   }
- * }
+ * ```html
+ * <tbw-grid-column field="name">
+ *   <app-my-editor *tbwEditor="let _; control as control" [control]="control" />
+ * </tbw-grid-column>
  * ```
  *
- * @example
- * ```typescript
- * @Component({
- *   template: `
- *     <input #inlineInput readonly [value]="currentValue()"
- *       (click)="onInlineClick()" (keydown)="onInlineKeydown($event)" />
- *     <div #panel style="width: 280px">
- *       <!-- overlay content -->
- *     </div>
- *   `
- * })
- * export class MyEditor extends BaseOverlayEditor<MyRow, string> {
- *   panelRef = viewChild.required<ElementRef<HTMLElement>>('panel');
- *   inputRef = viewChild.required<ElementRef<HTMLInputElement>>('inlineInput');
- *
- *   constructor() {
- *     super();
- *     effect(() => this.initOverlay(this.panelRef().nativeElement));
- *   }
+ * Or without FormArray binding (fallback to value):
  *
- *   protected getInlineInput() { return this.inputRef()?.nativeElement ?? null; }
- *   protected onOverlayOutsideClick() { this.hideOverlay(); }
- * }
+ * ```html
+ * <tbw-grid-column field="name">
+ *   <app-my-editor *tbwEditor="let value" [value]="value" />
+ * </tbw-grid-column>
  * ```
  *
  * @typeParam TRow - The row data type
  * @typeParam TValue - The cell value type
  *
- * @since 0.13.0
+ * @since 0.5.0
  */
-class BaseOverlayEditor extends BaseGridEditor {
-    _elementRef = inject(ElementRef);
-    _overlayDestroyRef = inject(DestroyRef);
+class BaseGridEditor {
+    elementRef = inject(ElementRef);
+    _destroyRef = inject(DestroyRef);
+    /** Cleanup function for the edit-close listener */
+    _editCloseCleanup = null;
     // ============================================================================
-    // Configuration
+    // Inputs
+    // ============================================================================
+    /**
+     * The cell value. Used when FormControl is not available.
+     * When a FormControl is provided, value is derived from control.value instead.
+     */
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * The full row data object.
+     */
+    row = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "row" }] : /* istanbul ignore next */ []));
+    /**
+     * The column configuration.
+     */
+    column = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "column" }] : /* istanbul ignore next */ []));
+    /**
+     * The FormControl for this cell, if the grid is bound to a FormArray.
+     * When provided, the editor uses control.value instead of the value input.
+     */
+    control = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "control" }] : /* istanbul ignore next */ []));
+    // ============================================================================
+    // Outputs
+    // ============================================================================
+    /**
+     * Emits when the user commits a new value.
+     * Emits `null` when a nullable field is cleared.
+     */
+    commit = output();
+    /**
+     * Emits when the user cancels editing.
+     */
+    cancel = output();
     // ============================================================================
+    // Computed State
+    // ============================================================================
+    /**
+     * The current value, derived from FormControl if available, otherwise from value input.
+     * This is the recommended way to get the current value in your editor template.
+     */
+    currentValue = computed(() => {
+        const ctrl = this.control();
+        if (ctrl) {
+            return ctrl.value;
+        }
+        return this.value();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the control is invalid (has validation errors).
+     * Returns false if no FormControl is available.
+     */
+    isInvalid = computed(() => {
+        return this.control()?.invalid ?? false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the control is dirty (has been modified).
+     * Returns false if no FormControl is available.
+     */
+    isDirty = computed(() => {
+        return this.control()?.dirty ?? false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDirty" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the control has been touched.
+     * Returns false if no FormControl is available.
+     */
+    isTouched = computed(() => {
+        return this.control()?.touched ?? false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTouched" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the control has any validation errors.
+     */
+    hasErrors = computed(() => {
+        const ctrl = this.control();
+        return ctrl?.errors != null && Object.keys(ctrl.errors).length > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasErrors" }] : /* istanbul ignore next */ []));
+    /**
+     * The first error message from the control's validation errors.
+     * Returns an empty string if no errors.
+     */
+    firstErrorMessage = computed(() => {
+        const ctrl = this.control();
+        if (!ctrl?.errors)
+            return '';
+        const firstKey = Object.keys(ctrl.errors)[0];
+        return this.getErrorMessage(firstKey, ctrl.errors[firstKey]);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstErrorMessage" }] : /* istanbul ignore next */ []));
     /**
-     * Position of the overlay panel relative to the anchor cell.
-     * Override in subclasses to change the default position.
-     *
-     * @default 'below'
+     * All error messages from the control's validation errors.
      */
-    overlayPosition = 'below';
-    // ============================================================================
-    // Internal State
-    // ============================================================================
-    /** The overlay panel element (set via `initOverlay()`). */
-    _panel = null;
-    /** Whether the overlay is currently visible. */
-    _isOpen = false;
-    /** Unique anchor ID for CSS Anchor Positioning. */
-    _anchorId = '';
-    /** Whether the browser supports CSS Anchor Positioning. */
-    _supportsAnchor = false;
-    /** AbortController for all overlay-related listeners. */
-    _abortCtrl = null;
-    /** MutationObserver watching cell focus class changes. */
-    _focusObserver = null;
+    allErrorMessages = computed(() => {
+        const ctrl = this.control();
+        if (!ctrl?.errors)
+            return [];
+        return Object.entries(ctrl.errors).map(([key, value]) => this.getErrorMessage(key, value));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allErrorMessages" }] : /* istanbul ignore next */ []));
     // ============================================================================
     // Lifecycle
     // ============================================================================
     constructor() {
-        super();
-        this._supportsAnchor = typeof CSS !== 'undefined' && CSS.supports('anchor-name', '--a');
-        ensureOverlayStyles();
-        afterNextRender(() => this._setupFocusObserver());
-        this._overlayDestroyRef.onDestroy(() => this.teardownOverlay());
+        afterNextRender(() => this._initEditCloseListener());
+        this._destroyRef.onDestroy(() => {
+            this._editCloseCleanup?.();
+            this._editCloseCleanup = null;
+        });
+    }
+    _initEditCloseListener() {
+        const grid = this.elementRef.nativeElement.closest('tbw-grid, [data-tbw-grid]');
+        if (!grid)
+            return;
+        let unsubBefore;
+        let unsubClose;
+        unsubBefore = grid.on('before-edit-close', () => {
+            this.onBeforeEditClose();
+            unsubBefore?.();
+            unsubBefore = undefined;
+        });
+        unsubClose = grid.on('edit-close', () => {
+            this.onEditClose();
+            unsubClose?.();
+            unsubClose = undefined;
+        });
+        this._editCloseCleanup = () => {
+            unsubBefore?.();
+            unsubClose?.();
+        };
     }
     // ============================================================================
-    // Public API — Subclass Interface
+    // Methods
     // ============================================================================
     /**
-     * Initialise the overlay with the panel element.
+     * Whether this editor's cell is the currently focused cell.
      *
-     * Call this in an `effect()` or `afterNextRender()` with your `viewChild` panel reference.
-     * The panel is moved to `<body>` and hidden until {@link showOverlay} is called.
+     * In row editing mode the grid creates editors for every editable cell
+     * in the row simultaneously. Use this to conditionally auto-focus inputs
+     * or open panels only in the active cell.
      *
-     * @param panel - The overlay panel DOM element
+     * Performs a synchronous DOM check — safe to call from `ngAfterViewInit`.
      */
-    initOverlay(panel) {
-        this._panel = panel;
-        // Assign a unique anchor ID
-        this._anchorId = `tbw-anchor-${++anchorCounter}`;
-        panel.classList.add('tbw-overlay-panel');
-        panel.setAttribute('data-pos', this.overlayPosition);
-        panel.setAttribute('data-anchor-id', this._anchorId);
-        panel.style.display = 'none';
-        // Set up CSS Anchor Positioning on the cell
-        if (this._supportsAnchor) {
-            const cell = this._getCell();
-            if (cell) {
-                cell.style.setProperty('anchor-name', `--${this._anchorId}`);
-                panel.style.setProperty('--tbw-overlay-anchor', `--${this._anchorId}`);
-            }
-        }
-        // Move panel to body so it escapes grid overflow clipping
-        document.body.appendChild(panel);
-        // Register the panel as an external focus container on the grid
-        // so focus moving into the overlay is treated as "still in the grid"
-        this._getGridElement()?.registerExternalFocusContainer?.(panel);
-        // Set up click-outside detection
-        this._abortCtrl = new AbortController();
-        document.addEventListener('pointerdown', (e) => this._onDocumentPointerDown(e), {
-            signal: this._abortCtrl.signal,
-        });
-        // Close overlay when the grid viewport scrolls. Mirrors outside-click
-        // semantics so subclasses' `onOverlayOutsideClick()` drives commit/cancel.
-        // Uses the public `tbw-scroll` CustomEvent dispatched on the grid host —
-        // no shadow-DOM reach-arounds required (composed: true crosses boundaries).
-        const grid = this._getGridElement();
-        if (grid) {
-            grid.addEventListener('tbw-scroll', () => this._onGridScroll(), {
-                signal: this._abortCtrl.signal,
-            });
-        }
-        // If the focus observer already fired before the panel was initialised
-        // (e.g. initOverlay called from a deferred setTimeout), the showOverlay()
-        // call was silently ignored because _panel was still null.  Catch up now.
-        if (this._getCell()?.classList.contains('cell-focus')) {
-            this.showOverlay();
-            this.onOverlayOpened();
-        }
+    isCellFocused() {
+        return this.elementRef.nativeElement.closest('[part="cell"]')?.classList.contains('cell-focus') ?? false;
     }
     /**
-     * Show the overlay panel.
+     * Called **before** the grid clears editing state and destroys editor DOM.
      *
-     * If CSS Anchor Positioning is not supported, falls back to JS-based
-     * positioning using `getBoundingClientRect()`.
-     */
-    showOverlay() {
-        if (!this._panel || this._isOpen)
-            return;
-        this._isOpen = true;
-        this._panel.style.display = '';
-        // JS fallback positioning for browsers without CSS Anchor Positioning
-        if (!this._supportsAnchor) {
-            this._positionWithJs();
-        }
-    }
-    /**
-     * Hide the overlay panel.
+     * At this point the commit callback is still active, so subclasses can
+     * call {@link commitValue} to flush any pending/deferred values.
      *
-     * @param suppressTabAdvance - When `true`, skip synthetic Tab dispatch
-     *   (useful when hiding is triggered by an external focus change).
-     */
-    hideOverlay(suppressTabAdvance) {
-        if (!this._panel || !this._isOpen)
-            return;
-        this._isOpen = false;
-        this._panel.style.display = 'none';
-        if (!suppressTabAdvance) {
-            this.getInlineInput()?.focus();
-        }
-    }
-    /**
-     * Close and immediately re-open the overlay.
-     * Useful after the panel content changes size and needs repositioning.
+     * This fires only on the **commit** path (not on revert/cancel).
+     * Use {@link onEditClose} for cleanup that should happen on both paths.
      */
-    reopenOverlay() {
-        if (!this._panel)
-            return;
-        this._isOpen = false;
-        this._panel.style.display = 'none';
-        this.showOverlay();
+    onBeforeEditClose() {
+        // Default: no-op. Subclasses override to flush pending values.
     }
     /**
-     * Remove the overlay from the DOM and clean up all listeners.
+     * Called when the grid ends the editing session for this cell.
      *
-     * Called automatically on `DestroyRef.onDestroy`. Can also be called
-     * manually if the editor needs early cleanup.
-     */
-    teardownOverlay() {
-        this._abortCtrl?.abort();
-        this._abortCtrl = null;
-        this._focusObserver?.disconnect();
-        this._focusObserver = null;
-        // Unregister the panel from the grid's external focus container registry
-        if (this._panel) {
-            this._getGridElement()?.unregisterExternalFocusContainer?.(this._panel);
-        }
-        if (this._panel?.parentNode) {
-            this._panel.parentNode.removeChild(this._panel);
-        }
-        this._panel = null;
-        this._isOpen = false;
-        // Clean up anchor-name on the cell
-        if (this._supportsAnchor) {
-            const cell = this._getCell();
-            if (cell) {
-                cell.style.removeProperty('anchor-name');
-            }
-        }
-    }
-    /**
-     * Override in `edit-close` handler to also hide the overlay.
-     * This is called automatically by `BaseGridEditor` when the grid
-     * ends the editing session.
+     * Override to perform cleanup such as closing overlay panels, autocomplete
+     * dropdowns, or other floating UI that lives at `<body>` level and would
+     * otherwise persist after the editor DOM is removed.
+     *
+     * The listener is set up automatically via `afterNextRender` — no manual
+     * wiring required.
      */
     onEditClose() {
-        this.hideOverlay(true);
+        // Default: no-op. Subclasses override.
     }
-    // ============================================================================
-    // Keyboard & Click Helpers
-    // ============================================================================
     /**
-     * Keydown handler for the inline readonly input.
+     * Called by the grid adapter when the cell value changes externally
+     * (e.g., via `updateRow()` cascade or undo/redo).
      *
-     * - **Enter / Space / ArrowDown / F2** → open overlay
-     * - **Escape** → calls {@link handleEscape}
+     * Override in subclasses to reset internal state (search text, selection
+     * flags, etc.) so the editor displays the updated value.
      *
-     * Bind this to `(keydown)` on your inline input element.
+     * This runs **synchronously** before the value input is updated, giving
+     * the editor a chance to clear stale state before the next change-detection
+     * pass re-reads the template.
+     *
+     * @param _newVal The new cell value being pushed from the grid
      */
-    onInlineKeydown(event) {
-        switch (event.key) {
-            case 'Enter':
-            case ' ':
-            case 'ArrowDown':
-            case 'F2':
-                event.preventDefault();
-                this.showOverlay();
-                this.onOverlayOpened();
-                break;
-            case 'Escape':
-                this.handleEscape(event);
-                break;
-        }
+    onExternalValueChange(_newVal) {
+        // Default: no-op. Subclasses override as needed.
     }
     /**
-     * Click handler for the inline input.
-     * Opens the overlay and calls {@link onOverlayOpened}.
-     *
-     * Bind this to `(click)` on your inline input element.
+     * Commit a new value. Emits the commit output AND dispatches a DOM event.
+     * The DOM event enables the grid's auto-wiring to catch the commit.
+     * Call this when the user confirms their edit.
      */
-    onInlineClick() {
-        if (this._isOpen) {
-            this.hideOverlay();
-        }
-        else {
-            this.showOverlay();
-            this.onOverlayOpened();
-        }
+    commitValue(newValue) {
+        // Emit Angular output for template bindings
+        this.commit.emit(newValue);
+        // Dispatch DOM CustomEvent for grid's auto-wiring
+        // This allows the adapter to catch commits without explicit (commit)="..." bindings
+        this.elementRef.nativeElement.dispatchEvent(new CustomEvent('commit', { detail: newValue, bubbles: true }));
+    }
+    /**
+     * Cancel editing. Emits the cancel output AND dispatches a DOM event.
+     * Call this when the user cancels (e.g., presses Escape).
+     */
+    cancelEdit() {
+        // Emit Angular output for template bindings
+        this.cancel.emit();
+        // Dispatch DOM CustomEvent for grid's auto-wiring
+        this.elementRef.nativeElement.dispatchEvent(new CustomEvent('cancel', { bubbles: true }));
     }
     /**
-     * Handle Escape key press.
+     * Get a human-readable error message for a validation error.
+     * Override this method to customize error messages for your editor.
      *
-     * If the overlay is open, closes it and returns focus to the inline input.
-     * If the overlay is already closed, cancels the edit entirely.
+     * @param errorKey - The validation error key (e.g., 'required', 'minlength')
+     * @param errorValue - The error value (e.g., { requiredLength: 5, actualLength: 3 })
+     * @returns A human-readable error message
      */
-    handleEscape(event) {
-        if (this._isOpen) {
-            event.stopPropagation();
-            this.hideOverlay();
-        }
-        else {
-            this.cancelEdit();
+    getErrorMessage(errorKey, errorValue) {
+        switch (errorKey) {
+            case 'required':
+                return 'This field is required';
+            case 'minlength': {
+                const err = errorValue;
+                return `Minimum length is ${err?.requiredLength ?? 'unknown'}`;
+            }
+            case 'maxlength': {
+                const err = errorValue;
+                return `Maximum length is ${err?.requiredLength ?? 'unknown'}`;
+            }
+            case 'min': {
+                const err = errorValue;
+                return `Minimum value is ${err?.min ?? 'unknown'}`;
+            }
+            case 'max': {
+                const err = errorValue;
+                return `Maximum value is ${err?.max ?? 'unknown'}`;
+            }
+            case 'email':
+                return 'Invalid email address';
+            case 'pattern':
+                return 'Invalid format';
+            default:
+                return `Invalid value (${errorKey})`;
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseGridEditor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: BaseGridEditor, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commit: "commit", cancel: "cancel" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseGridEditor, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], commit: [{ type: i0.Output, args: ["commit"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
+
+/**
+ * Base class for grid editors that also work as Angular form controls.
+ *
+ * Combines `BaseGridEditor` with `ControlValueAccessor` so the same component
+ * can be used inside a `<tbw-grid>` **and** in a standalone `<form>`.
+ *
+ * ## What it provides
+ *
+ * | Member | Purpose |
+ * |--------|---------|
+ * | `cvaValue` | Signal holding the value written by the form control |
+ * | `disabledState` | Signal tracking `setDisabledState` calls |
+ * | `displayValue` | Computed that prefers grid value (`currentValue`) and falls back to `cvaValue` |
+ * | `commitBoth(v)` | Commits via both CVA `onChange` and grid `commitValue` |
+ * | `writeValue` / `registerOn*` / `setDisabledState` | Full CVA implementation |
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { Component, forwardRef } from '@angular/core';
+ * import { NG_VALUE_ACCESSOR } from '@angular/forms';
+ * import { BaseGridEditorCVA } from '@toolbox-web/grid-angular/features/editing';
+ *
+ * @Component({
+ *   selector: 'app-date-picker',
+ *   providers: [{
+ *     provide: NG_VALUE_ACCESSOR,
+ *     useExisting: forwardRef(() => DatePickerComponent),
+ *     multi: true,
+ *   }],
+ *   template: `
+ *     <input
+ *       type="date"
+ *       [value]="displayValue()"
+ *       [disabled]="disabledState()"
+ *       (change)="commitBoth($event.target.value)"
+ *       (keydown.escape)="cancelEdit()"
+ *     />
+ *   `
+ * })
+ * export class DatePickerComponent extends BaseGridEditorCVA<MyRow, string> {}
+ * ```
+ *
+ * > **Note:** Subclasses must still provide `NG_VALUE_ACCESSOR` themselves
+ * > because `forwardRef(() => ConcreteClass)` must reference the concrete
+ * > component — this is an Angular limitation.
+ *
+ * @typeParam TRow - The row data type
+ * @typeParam TValue - The cell/control value type
+ *
+ * @since 0.13.0
+ */
+class BaseGridEditorCVA extends BaseGridEditor {
+    // ============================================================================
+    // CVA State
+    // ============================================================================
+    /** Internal onChange callback registered by the form control. */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    _onChange = () => { };
+    /** Internal onTouched callback registered by the form control. */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    _onTouched = () => { };
     /**
-     * Dispatch a synthetic Tab key event to advance grid focus.
-     *
-     * Call this after committing a value and closing the overlay so the
-     * grid moves focus to the next cell.
-     *
-     * @param backward - When `true`, dispatch Shift+Tab to move backwards.
+     * Signal holding the value written by the form control via `writeValue()`.
+     * Updated when the form control pushes a new value (e.g. `patchValue`, `setValue`).
      */
-    advanceGridFocus(backward = false) {
-        const cell = this._getCell();
-        if (!cell)
-            return;
-        cell.dispatchEvent(new KeyboardEvent('keydown', {
-            key: 'Tab',
-            shiftKey: backward,
-            bubbles: true,
-            cancelable: true,
-        }));
-    }
+    cvaValue = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaValue" }] : /* istanbul ignore next */ []));
     /**
-     * Called after the overlay is shown.
+     * Signal tracking the disabled state set by the form control.
+     * Updated when `setDisabledState()` is called by Angular's forms module.
+     */
+    disabledState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolved display value.
      *
-     * Override to focus an element inside the panel, start animations, etc.
-     * Default implementation is a no-op.
+     * Prefers `currentValue()` (grid context — from `control.value` or `value` input)
+     * and falls back to `cvaValue()` (standalone form context — from `writeValue`).
+     *
+     * Use this in your template instead of reading `currentValue()` directly
+     * so the component works in both grid and standalone form contexts.
      */
-    onOverlayOpened() {
-        // Default: no-op. Subclasses override.
-    }
+    displayValue = computed(() => {
+        return this.currentValue() ?? this.cvaValue();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     // ============================================================================
-    // Private Helpers
+    // ControlValueAccessor Implementation
     // ============================================================================
-    /** Find the parent cell element for this editor. */
-    _getCell() {
-        return this._elementRef.nativeElement.closest('[part="cell"]') ?? null;
-    }
-    /** Find the parent `<tbw-grid>` element for this editor. */
-    _getGridElement() {
-        return this._elementRef.nativeElement.closest('tbw-grid, [data-tbw-grid]') ?? null;
+    /**
+     * Called by Angular forms when the form control value changes programmatically.
+     */
+    writeValue(value) {
+        this.cvaValue.set(value);
     }
     /**
-     * JS fallback positioning for browsers without CSS Anchor Positioning.
-     * Uses `getBoundingClientRect()` with viewport overflow detection.
+     * Called by Angular forms to register a change callback.
      */
-    _positionWithJs() {
-        const cell = this._getCell();
-        const panel = this._panel;
-        if (!cell || !panel)
-            return;
-        const cellRect = cell.getBoundingClientRect();
-        // Temporarily make visible to measure
-        panel.style.visibility = 'hidden';
-        panel.style.display = '';
-        const panelRect = panel.getBoundingClientRect();
-        panel.style.visibility = '';
-        const viewportH = window.innerHeight;
-        const viewportW = window.innerWidth;
-        let top;
-        let left;
-        switch (this.overlayPosition) {
-            case 'above': {
-                top = cellRect.top - panelRect.height;
-                left = cellRect.left;
-                // Flip to below if off-screen
-                if (top < 0)
-                    top = cellRect.bottom;
-                break;
-            }
-            case 'below-right': {
-                top = cellRect.bottom;
-                left = cellRect.right - panelRect.width;
-                // Flip to above if off-screen
-                if (top + panelRect.height > viewportH)
-                    top = cellRect.top - panelRect.height;
-                break;
-            }
-            case 'over-top-left': {
-                top = cellRect.top;
-                left = cellRect.left;
-                break;
-            }
-            case 'over-bottom-left': {
-                top = cellRect.bottom - panelRect.height;
-                left = cellRect.left;
-                break;
-            }
-            case 'below':
-            default: {
-                top = cellRect.bottom;
-                left = cellRect.left;
-                // Flip to above if off-screen
-                if (top + panelRect.height > viewportH)
-                    top = cellRect.top - panelRect.height;
-                break;
-            }
-        }
-        // Clamp to viewport
-        if (left + panelRect.width > viewportW)
-            left = viewportW - panelRect.width - 4;
-        if (left < 0)
-            left = 4;
-        if (top < 0)
-            top = 4;
-        panel.style.top = `${top}px`;
-        panel.style.left = `${left}px`;
+    registerOnChange(fn) {
+        this._onChange = fn;
     }
     /**
-     * Document pointerdown handler for click-outside detection.
-     * Fires `onOverlayOutsideClick()` if the click is outside the panel
-     * and outside the editor's host element.
+     * Called by Angular forms to register a touched callback.
      */
-    _onDocumentPointerDown(event) {
-        if (!this._isOpen || !this._panel)
-            return;
-        const target = event.target;
-        const hostEl = this._elementRef.nativeElement;
-        // Click inside panel or host — ignore
-        if (this._panel.contains(target) || hostEl.contains(target))
-            return;
-        this.onOverlayOutsideClick();
+    registerOnTouched(fn) {
+        this._onTouched = fn;
     }
     /**
-     * Handle the grid's `tbw-scroll` CustomEvent while the overlay is open.
-     *
-     * When the viewport scrolls, the anchored overlay would otherwise float
-     * over content that no longer corresponds to the edited cell (or the
-     * cell may be virtualized out entirely). Treat scroll as a dismissal
-     * signal equivalent to clicking outside so subclasses' overlay-outside
-     * handler drives the appropriate commit/cancel path.
+     * Called by Angular forms to set the disabled state.
      */
-    _onGridScroll() {
-        if (!this._isOpen || !this._panel)
-            return;
-        this.onOverlayOutsideClick();
+    setDisabledState(isDisabled) {
+        this.disabledState.set(isDisabled);
     }
+    // ============================================================================
+    // Dual-Commit Helpers
+    // ============================================================================
     /**
-     * Set up a MutationObserver on the parent cell to watch for
-     * `cell-focus` class changes. This handles row-editing mode where
-     * all editors exist simultaneously but only the focused cell's
-     * editor should have its overlay visible.
+     * Commit a value through both the CVA (form control) and the grid.
      *
-     * A `justOpened` flash guard suppresses the observer from
-     * immediately closing the overlay when `beginBulkEdit()` moves
-     * focus to the first editable column. Without this guard,
-     * double-click triggers a "flash open then close" effect.
+     * - Calls the CVA `onChange` callback (updates the form control)
+     * - Marks the control as touched
+     * - Calls `commitValue()` (emits grid commit event + DOM `CustomEvent`)
+     *
+     * Use this instead of `commitValue()` when your editor doubles as a form control.
+     *
+     * @param value - The new value to commit
      */
-    _setupFocusObserver() {
-        const cell = this._getCell();
-        if (!cell)
-            return;
-        let justOpened = false;
-        let pendingHideRaf = 0;
-        const hostEl = this._elementRef.nativeElement;
-        this._focusObserver = new MutationObserver((mutations) => {
-            // Guard: if the editor's host element is no longer inside the cell,
-            // it means the component was detached (e.g., editing session ended
-            // and the render pipeline cleared the cell DOM). Disconnect to
-            // prevent orphaned observers from opening stale overlay panels.
-            if (!cell.contains(hostEl)) {
-                this._focusObserver?.disconnect();
-                this._focusObserver = null;
-                return;
-            }
-            for (const mutation of mutations) {
-                if (mutation.type !== 'attributes' || mutation.attributeName !== 'class')
-                    continue;
-                const isFocused = cell.classList.contains('cell-focus');
-                if (isFocused && !this._isOpen) {
-                    // Cell just gained focus — cancel any pending hide and open overlay.
-                    if (pendingHideRaf) {
-                        cancelAnimationFrame(pendingHideRaf);
-                        pendingHideRaf = 0;
-                    }
-                    justOpened = true;
-                    this.showOverlay();
-                    this.onOverlayOpened();
-                    // Clear the guard after a macrotask so that an immediate
-                    // focus-away (e.g. beginBulkEdit focus adjustment) does
-                    // not close the overlay in the same event loop tick.
-                    setTimeout(() => {
-                        justOpened = false;
-                    }, 0);
-                }
-                else if (!isFocused && this._isOpen && !justOpened) {
-                    // Cell lost focus — defer hide to allow render cycles to settle.
-                    // Re-renders (e.g., from ResizeObserver after a footer appears)
-                    // may transiently toggle cell-focus within the same frame.
-                    // Deferring to the next animation frame lets the render pipeline
-                    // finish before we decide whether the overlay should actually close.
-                    if (pendingHideRaf)
-                        cancelAnimationFrame(pendingHideRaf);
-                    pendingHideRaf = requestAnimationFrame(() => {
-                        pendingHideRaf = 0;
-                        // Re-check settled state — cell-focus may have been re-applied
-                        if (!cell.classList.contains('cell-focus') && this._isOpen) {
-                            this.hideOverlay(true);
-                        }
-                    });
-                }
-            }
-        });
-        this._focusObserver.observe(cell, { attributes: true, attributeFilter: ['class'] });
+    commitBoth(value) {
+        // Update CVA
+        this.cvaValue.set(value);
+        this._onChange(value);
+        this._onTouched();
+        // Update grid (null is valid for nullable columns — the grid's cell-commit
+        // handler and EditingPlugin will apply it correctly)
+        this.commitValue(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BaseOverlayEditor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: BaseOverlayEditor, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseGridEditorCVA, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: BaseGridEditorCVA, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BaseOverlayEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseGridEditorCVA, decorators: [{
             type: Directive
-        }], ctorParameters: () => [] });
+        }] });
 
-// Symbol for storing form context on the grid element (shared with GridFormArray)
-const FORM_ARRAY_CONTEXT = Symbol('formArrayContext');
+// #endregion
+// #region Global Styles
+/** Tracks whether the global overlay stylesheet has been injected. */
+let overlayStylesInjected = false;
 /**
- * Gets the FormArrayContext from a grid element, if present.
- * @internal
- * @since 0.11.0
+ * CSS for the overlay panel base layer.
+ * Injected once into `<head>` on first `BaseOverlayEditor` use.
+ *
+ * Uses CSS Anchor Positioning as primary strategy with a JS fallback
+ * for browsers that don't support it (Firefox, Safari as of late 2025).
  */
-function getLazyFormContext(gridElement) {
-    return gridElement[FORM_ARRAY_CONTEXT];
+const OVERLAY_STYLES = /* css */ `
+.tbw-overlay-panel {
+  position: fixed;
+  z-index: 10000;
+  background: var(--tbw-overlay-bg, #fff);
+  border: 1px solid var(--tbw-overlay-border, #ccc);
+  border-radius: var(--tbw-overlay-radius, 4px);
+  box-shadow: var(--tbw-overlay-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+/* Hide panels that have not been initialised via initOverlay() yet.
+   Prevents a flash-of-unstyled-content when the subclass defers
+   the initOverlay call (e.g. via setTimeout or afterNextRender). */
+.tbw-overlay-panel:not([data-anchor-id]) {
+  display: none;
+}
+
+.tbw-overlay-panel:popover-open {
+  display: block;
+}
+
+@supports (anchor-name: --a) {
+  .tbw-overlay-panel[data-anchor-id] {
+    position: fixed;
+    position-anchor: var(--tbw-overlay-anchor);
+    inset: unset;
+  }
+  .tbw-overlay-panel[data-pos="below"] {
+    top: anchor(bottom);
+    left: anchor(left);
+    position-try-fallbacks: flip-block;
+  }
+  .tbw-overlay-panel[data-pos="above"] {
+    bottom: anchor(top);
+    left: anchor(left);
+    position-try-fallbacks: flip-block;
+  }
+  .tbw-overlay-panel[data-pos="below-right"] {
+    top: anchor(bottom);
+    right: anchor(right);
+    position-try-fallbacks: flip-block;
+  }
+  .tbw-overlay-panel[data-pos="over-top-left"] {
+    top: anchor(top);
+    left: anchor(left);
+  }
+  .tbw-overlay-panel[data-pos="over-bottom-left"] {
+    bottom: anchor(bottom);
+    left: anchor(left);
+  }
+}
+`;
+function ensureOverlayStyles() {
+    if (overlayStylesInjected)
+        return;
+    overlayStylesInjected = true;
+    const style = document.createElement('style');
+    style.setAttribute('data-tbw-overlay', '');
+    style.textContent = OVERLAY_STYLES;
+    document.head.appendChild(style);
 }
+// #endregion
+// #region Anchor ID Counter
+let anchorCounter = 0;
+// #endregion
 /**
- * Directive that provides lazy FormGroup creation for grid editing.
- *
- * Unlike `GridFormArray` which creates all FormGroups upfront, this directive
- * creates FormGroups on-demand only when a row enters edit mode. This provides
- * much better performance for large datasets while still enabling full
- * Angular Reactive Forms integration.
- *
- * ## Key Benefits
+ * Base class for grid editors that display a floating overlay panel.
  *
- * - **Performance**: Only creates FormGroups for rows being edited (20-100x fewer controls)
- * - **Same DX**: Editors still receive `control` in their context for validation
- * - **Memory efficient**: FormGroups are cleaned up when rows exit edit mode
+ * Provides infrastructure for:
+ * - **Overlay positioning** — CSS Anchor Positioning with JS fallback
+ * - **Focus gating** — in row editing mode, the panel only opens for the focused cell
+ * - **Click-outside detection** — closes the panel when clicking outside
+ * - **MutationObserver** — detects cell focus changes (row editing mode)
+ * - **Escape handling** — closes the panel and returns focus to the inline input
+ * - **Synthetic Tab dispatch** — advances grid focus after overlay close
+ * - **Automatic teardown** — removes the panel from `<body>` and cleans up listeners
+ * - **External focus registration** — auto-registers the panel via `grid.registerExternalFocusContainer()` so the grid keeps `data-has-focus` and editors stay open while the overlay has focus
  *
  * ## Usage
  *
  * ```typescript
- * import { Component, inject, signal } from '@angular/core';
- * import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
- * import { Grid, GridLazyForm, TbwEditor } from '@toolbox-web/grid-angular/features/editing';
+ * import { Component, viewChild, ElementRef, effect } from '@angular/core';
+ * import { BaseOverlayEditor } from '@toolbox-web/grid-angular/features/editing';
  *
  * @Component({
- *   imports: [Grid, GridLazyForm, TbwEditor, ReactiveFormsModule],
- *   template: \`
- *     <tbw-grid
- *       [rows]="employees()"
- *       [lazyForm]="createRowForm"
- *       [gridConfig]="config">
- *
- *       <tbw-grid-column field="firstName">
- *         <input *tbwEditor="let _; control as ctrl"
- *                [formControl]="ctrl"
- *                [class.is-invalid]="ctrl?.invalid && ctrl?.touched" />
- *       </tbw-grid-column>
- *     </tbw-grid>
- *   \`
+ *   selector: 'app-date-editor',
+ *   template: `
+ *     <input
+ *       #inlineInput
+ *       readonly
+ *       [value]="currentValue()"
+ *       (click)="onInlineClick()"
+ *       (keydown)="onInlineKeydown($event)"
+ *     />
+ *     <div #panel class="tbw-overlay-panel" style="width: 280px;">
+ *       <!-- your date picker UI here -->
+ *       <div class="actions">
+ *         <button (click)="selectAndClose(selectedDate)">OK</button>
+ *         <button (click)="hideOverlay()">Cancel</button>
+ *       </div>
+ *     </div>
+ *   `
  * })
- * export class MyComponent {
- *   private fb = inject(FormBuilder);
- *   employees = signal(generateEmployees(1000));
+ * export class DateEditorComponent extends BaseOverlayEditor<MyRow, string> {
+ *   panelRef = viewChild.required<ElementRef<HTMLElement>>('panel');
+ *   inputRef = viewChild.required<ElementRef<HTMLInputElement>>('inlineInput');
  *
- *   // Factory called when editing starts - only include editable fields!
- *   createRowForm = (row: Employee): FormGroup => this.fb.group({
- *     firstName: [row.firstName, Validators.required],
- *     lastName: [row.lastName, Validators.minLength(2)],
- *     salary: [row.salary, [Validators.required, Validators.min(0)]],
- *   });
+ *   protected override overlayPosition = 'below' as const;
+ *
+ *   constructor() {
+ *     super();
+ *     effect(() => {
+ *       const panel = this.panelRef().nativeElement;
+ *       this.initOverlay(panel);
+ *       if (this.isCellFocused()) this.showOverlay();
+ *     });
+ *   }
+ *
+ *   protected getInlineInput(): HTMLInputElement | null {
+ *     return this.inputRef()?.nativeElement ?? null;
+ *   }
+ *
+ *   protected onOverlayOutsideClick(): void {
+ *     this.hideOverlay();
+ *   }
  *
- *   gridConfig = { columns: [...] };
+ *   selectAndClose(date: string): void {
+ *     this.commitValue(date);
+ *     this.hideOverlay();
+ *   }
  * }
  * ```
  *
- * ## How It Works
- *
- * 1. Rows come from `[rows]` input (plain data array)
- * 2. When a cell enters edit mode, the FormGroup is created lazily
- * 3. Editors receive the FormControl in their template context
- * 4. On commit, FormGroup values are synced back to the row
- * 5. FormGroup is cleaned up when the row exits edit mode (configurable)
- *
- * ## Performance Comparison
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <input #inlineInput readonly [value]="currentValue()"
+ *       (click)="onInlineClick()" (keydown)="onInlineKeydown($event)" />
+ *     <div #panel style="width: 280px">
+ *       <!-- overlay content -->
+ *     </div>
+ *   `
+ * })
+ * export class MyEditor extends BaseOverlayEditor<MyRow, string> {
+ *   panelRef = viewChild.required<ElementRef<HTMLElement>>('panel');
+ *   inputRef = viewChild.required<ElementRef<HTMLInputElement>>('inlineInput');
  *
- * | Rows | GridFormArray (20 fields) | GridLazyForm |
- * |------|---------------------------|--------------|
- * | 100  | 2,000 controls           | ~20 controls |
- * | 500  | 10,000 controls          | ~20 controls |
- * | 1000 | 20,000 controls          | ~20 controls |
+ *   constructor() {
+ *     super();
+ *     effect(() => this.initOverlay(this.panelRef().nativeElement));
+ *   }
  *
- * @example
- * ```html
- * <tbw-grid [rows]="employees()" [lazyForm]="createRowForm" [gridConfig]="gridConfig" />
+ *   protected getInlineInput() { return this.inputRef()?.nativeElement ?? null; }
+ *   protected onOverlayOutsideClick() { this.hideOverlay(); }
+ * }
  * ```
  *
- * @see GridFormArray For small datasets with full upfront validation
- * @category Directive
+ * @typeParam TRow - The row data type
+ * @typeParam TValue - The cell value type
  *
- * @since 0.11.0
+ * @since 0.13.0
  */
-class GridLazyForm {
-    elementRef = inject((ElementRef));
-    // Cache of FormGroups by row reference
-    formGroupCache = new Map();
-    // Map from row reference to rowIndex (needed for getControl)
-    rowIndexMap = new Map();
-    // Track which row is currently being edited
-    editingRowIndex = null;
-    cellCommitUnsub = null;
-    rowCommitUnsub = null;
-    rowsChangeUnsub = null;
-    /**
-     * Factory function to create a FormGroup for a row.
-     * Called lazily when the row first enters edit mode.
-     *
-     * @example
-     * ```typescript
-     * createRowForm = (row: Employee): FormGroup => this.fb.group({
-     *   firstName: [row.firstName, Validators.required],
-     *   lastName: [row.lastName],
-     *   salary: [row.salary, [Validators.min(0)]],
-     * });
-     * ```
-     */
-    lazyForm = input.required(...(ngDevMode ? [{ debugName: "lazyForm" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether to automatically sync Angular validation state to grid's visual invalid styling.
-     *
-     * When enabled:
-     * - After a cell commit, if the FormControl is invalid, the cell is marked with `setInvalid()`
-     * - When a FormControl becomes valid, `clearInvalid()` is called
-     * - On `row-commit`, if the row's FormGroup has invalid controls, the commit is prevented
-     *
-     * @default true
-     */
-    syncValidation = input(true, ...(ngDevMode ? [{ debugName: "syncValidation" }] : /* istanbul ignore next */ []));
+class BaseOverlayEditor extends BaseGridEditor {
+    _elementRef = inject(ElementRef);
+    _overlayDestroyRef = inject(DestroyRef);
+    // ============================================================================
+    // Configuration
+    // ============================================================================
     /**
-     * Whether to keep FormGroups cached after a row exits edit mode.
-     *
-     * - `true`: FormGroups are kept, preserving dirty/touched state across edit sessions
-     * - `false`: FormGroups are disposed when the row exits edit mode (default)
+     * Position of the overlay panel relative to the anchor cell.
+     * Override in subclasses to change the default position.
      *
-     * @default false
-     */
-    keepFormGroups = input(false, ...(ngDevMode ? [{ debugName: "keepFormGroups" }] : /* istanbul ignore next */ []));
-    /**
-     * Emitted when a row's form values change.
-     * Useful for auto-save, validation display, or syncing to external state.
-     */
-    rowFormChange = output();
-    ngOnInit() {
-        const grid = this.elementRef.nativeElement;
-        if (!grid)
-            return;
-        // Store the form context for AngularGridAdapter to access
-        this.#storeFormContext(grid);
-        // Listen for cell-commit to update FormControl and sync validation
-        this.cellCommitUnsub = grid.on('cell-commit', (detail) => {
-            this.#handleCellCommit(detail);
-        });
-        // Listen for row-commit to sync FormGroup values back to row and cleanup
-        this.rowCommitUnsub = grid.on('row-commit', (detail, event) => {
-            this.#handleRowCommit(event, detail);
-        });
-        // Listen for rows-change to update row index mappings
-        this.rowsChangeUnsub = grid.on('rows-change', () => {
-            this.#updateRowIndexMap();
-        });
-        // Initial row index mapping
-        this.#updateRowIndexMap();
-    }
-    ngOnDestroy() {
-        const grid = this.elementRef.nativeElement;
-        if (!grid)
-            return;
-        this.cellCommitUnsub?.();
-        this.rowCommitUnsub?.();
-        this.rowsChangeUnsub?.();
-        this.#clearFormContext(grid);
-        this.formGroupCache.clear();
-        this.rowIndexMap.clear();
-    }
-    // #region FormArrayContext Implementation
-    /**
-     * Gets or creates the FormGroup for a row.
-     * This is the core lazy initialization logic.
-     */
-    #getOrCreateFormGroup(row, rowIndex) {
-        let formGroup = this.formGroupCache.get(row);
-        if (!formGroup) {
-            const factory = this.lazyForm();
-            formGroup = factory(row, rowIndex);
-            this.formGroupCache.set(row, formGroup);
-            this.rowIndexMap.set(row, rowIndex);
-        }
-        return formGroup;
-    }
-    /**
-     * Gets the FormGroup for a row if it exists (without creating).
-     */
-    #getRowFormGroup(rowIndex) {
-        const grid = this.elementRef.nativeElement;
-        const rows = grid?.rows;
-        if (!rows || rowIndex < 0 || rowIndex >= rows.length)
-            return undefined;
-        const row = rows[rowIndex];
-        return this.formGroupCache.get(row);
-    }
-    /**
-     * Stores the FormArrayContext on the grid element.
-     * This uses the same interface as GridFormArray for compatibility.
+     * @default 'below'
      */
-    #storeFormContext(grid) {
-        const context = {
-            getRow: (rowIndex) => {
-                const rows = grid.rows;
-                if (!rows || rowIndex < 0 || rowIndex >= rows.length)
-                    return null;
-                return rows[rowIndex];
-            },
-            updateField: (rowIndex, field, value) => {
-                const formGroup = this.#getRowFormGroup(rowIndex);
-                if (formGroup) {
-                    const control = formGroup.get(field);
-                    if (control) {
-                        control.setValue(value);
-                        control.markAsDirty();
-                    }
-                }
-            },
-            getValue: () => {
-                return (grid.rows ?? []);
-            },
-            // Always true for lazy forms - we create FormGroups on demand
-            hasFormGroups: true,
-            getControl: (rowIndex, field) => {
-                const rows = grid.rows;
-                if (!rows || rowIndex < 0 || rowIndex >= rows.length)
-                    return undefined;
-                const row = rows[rowIndex];
-                // LAZY: Create the FormGroup when first needed
-                const formGroup = this.#getOrCreateFormGroup(row, rowIndex);
-                return formGroup.get(field) ?? undefined;
-            },
-            getRowFormGroup: (rowIndex) => {
-                const rows = grid.rows;
-                if (!rows || rowIndex < 0 || rowIndex >= rows.length)
-                    return undefined;
-                const row = rows[rowIndex];
-                // LAZY: Create the FormGroup when first needed
-                return this.#getOrCreateFormGroup(row, rowIndex);
-            },
-            isRowValid: (rowIndex) => {
-                const formGroup = this.#getRowFormGroup(rowIndex);
-                // If no FormGroup exists yet, consider it valid (not edited)
-                if (!formGroup)
-                    return true;
-                return formGroup.valid;
-            },
-            isRowTouched: (rowIndex) => {
-                const formGroup = this.#getRowFormGroup(rowIndex);
-                if (!formGroup)
-                    return false;
-                return formGroup.touched;
-            },
-            isRowDirty: (rowIndex) => {
-                const formGroup = this.#getRowFormGroup(rowIndex);
-                if (!formGroup)
-                    return false;
-                return formGroup.dirty;
-            },
-            getRowErrors: (rowIndex) => {
-                const formGroup = this.#getRowFormGroup(rowIndex);
-                if (!formGroup)
-                    return null;
-                const errors = {};
-                let hasErrors = false;
-                Object.keys(formGroup.controls).forEach((field) => {
-                    const control = formGroup.get(field);
-                    if (control?.errors) {
-                        errors[field] = control.errors;
-                        hasErrors = true;
-                    }
-                });
-                if (formGroup.errors) {
-                    errors['_group'] = formGroup.errors;
-                    hasErrors = true;
-                }
-                return hasErrors ? errors : null;
-            },
-        };
-        grid[FORM_ARRAY_CONTEXT] = context;
+    overlayPosition = 'below';
+    // ============================================================================
+    // Internal State
+    // ============================================================================
+    /** The overlay panel element (set via `initOverlay()`). */
+    _panel = null;
+    /** Whether the overlay is currently visible. */
+    _isOpen = false;
+    /** Unique anchor ID for CSS Anchor Positioning. */
+    _anchorId = '';
+    /** Whether the browser supports CSS Anchor Positioning. */
+    _supportsAnchor = false;
+    /** AbortController for all overlay-related listeners. */
+    _abortCtrl = null;
+    /** MutationObserver watching cell focus class changes. */
+    _focusObserver = null;
+    // ============================================================================
+    // Lifecycle
+    // ============================================================================
+    constructor() {
+        super();
+        this._supportsAnchor = typeof CSS !== 'undefined' && CSS.supports('anchor-name', '--a');
+        ensureOverlayStyles();
+        afterNextRender(() => this._setupFocusObserver());
+        this._overlayDestroyRef.onDestroy(() => this.teardownOverlay());
     }
+    // ============================================================================
+    // Public API — Subclass Interface
+    // ============================================================================
     /**
-     * Clears the FormArrayContext from the grid element.
+     * Initialise the overlay with the panel element.
+     *
+     * Call this in an `effect()` or `afterNextRender()` with your `viewChild` panel reference.
+     * The panel is moved to `<body>` and hidden until {@link showOverlay} is called.
+     *
+     * @param panel - The overlay panel DOM element
      */
-    #clearFormContext(grid) {
-        delete grid[FORM_ARRAY_CONTEXT];
+    initOverlay(panel) {
+        this._panel = panel;
+        // Assign a unique anchor ID
+        this._anchorId = `tbw-anchor-${++anchorCounter}`;
+        panel.classList.add('tbw-overlay-panel');
+        panel.setAttribute('data-pos', this.overlayPosition);
+        panel.setAttribute('data-anchor-id', this._anchorId);
+        panel.style.display = 'none';
+        // Set up CSS Anchor Positioning on the cell
+        if (this._supportsAnchor) {
+            const cell = this._getCell();
+            if (cell) {
+                cell.style.setProperty('anchor-name', `--${this._anchorId}`);
+                panel.style.setProperty('--tbw-overlay-anchor', `--${this._anchorId}`);
+            }
+        }
+        // Move panel to body so it escapes grid overflow clipping
+        document.body.appendChild(panel);
+        // Register the panel as an external focus container on the grid
+        // so focus moving into the overlay is treated as "still in the grid"
+        this._getGridElement()?.registerExternalFocusContainer?.(panel);
+        // Set up click-outside detection
+        this._abortCtrl = new AbortController();
+        document.addEventListener('pointerdown', (e) => this._onDocumentPointerDown(e), {
+            signal: this._abortCtrl.signal,
+        });
+        // Close overlay when the grid viewport scrolls. Mirrors outside-click
+        // semantics so subclasses' `onOverlayOutsideClick()` drives commit/cancel.
+        // Uses the public `tbw-scroll` CustomEvent dispatched on the grid host —
+        // no shadow-DOM reach-arounds required (composed: true crosses boundaries).
+        const grid = this._getGridElement();
+        if (grid) {
+            grid.addEventListener('tbw-scroll', () => this._onGridScroll(), {
+                signal: this._abortCtrl.signal,
+            });
+        }
+        // If the focus observer already fired before the panel was initialised
+        // (e.g. initOverlay called from a deferred setTimeout), the showOverlay()
+        // call was silently ignored because _panel was still null.  Catch up now.
+        if (this._getCell()?.classList.contains('cell-focus')) {
+            this.showOverlay();
+            this.onOverlayOpened();
+        }
     }
-    // #endregion
-    // #region Event Handlers
     /**
-     * Updates the row index map when rows change.
-     * This ensures we can find FormGroups by row reference after sorting/filtering.
+     * Show the overlay panel.
+     *
+     * If CSS Anchor Positioning is not supported, falls back to JS-based
+     * positioning using `getBoundingClientRect()`.
      */
-    #updateRowIndexMap() {
-        const grid = this.elementRef.nativeElement;
-        const rows = grid?.rows;
-        if (!rows)
+    showOverlay() {
+        if (!this._panel || this._isOpen)
             return;
-        this.rowIndexMap.clear();
-        rows.forEach((row, index) => {
-            if (this.formGroupCache.has(row)) {
-                this.rowIndexMap.set(row, index);
-            }
-        });
+        this._isOpen = true;
+        this._panel.style.display = '';
+        // JS fallback positioning for browsers without CSS Anchor Positioning
+        if (!this._supportsAnchor) {
+            this._positionWithJs();
+        }
     }
     /**
-     * Handles cell-commit events by updating the FormControl in the FormGroup.
+     * Hide the overlay panel.
+     *
+     * @param suppressTabAdvance - When `true`, skip synthetic Tab dispatch
+     *   (useful when hiding is triggered by an external focus change).
      */
-    #handleCellCommit(detail) {
-        const { rowIndex, field, value, rowId } = detail;
-        const formGroup = this.#getRowFormGroup(rowIndex);
-        if (formGroup) {
-            const control = formGroup.get(field);
-            if (control) {
-                control.setValue(value);
-                control.markAsDirty();
-                control.markAsTouched();
-                // Sync Angular validation state to grid's visual invalid styling
-                if (this.syncValidation() && rowId) {
-                    this.#syncControlValidationToGrid(rowId, field, control);
-                }
-                // Emit change event
-                const grid = this.elementRef.nativeElement;
-                const row = grid?.rows?.[rowIndex];
-                if (row) {
-                    this.rowFormChange.emit({
-                        rowIndex,
-                        rowId,
-                        row,
-                        formGroup,
-                        values: formGroup.value,
-                        valid: formGroup.valid,
-                        dirty: formGroup.dirty,
-                    });
-                }
-            }
+    hideOverlay(suppressTabAdvance) {
+        if (!this._panel || !this._isOpen)
+            return;
+        this._isOpen = false;
+        this._panel.style.display = 'none';
+        if (!suppressTabAdvance) {
+            this.getInlineInput()?.focus();
         }
     }
     /**
-     * Handles row-commit events.
-     * - Prevents commit if FormGroup is invalid (when syncValidation is true)
-     * - Syncs FormGroup values back to the row
-     * - Cleans up FormGroup if keepFormGroups is false
+     * Close and immediately re-open the overlay.
+     * Useful after the panel content changes size and needs repositioning.
      */
-    #handleRowCommit(event, detail) {
-        const { rowIndex, rowId } = detail;
-        const grid = this.elementRef.nativeElement;
-        const rows = grid?.rows;
-        if (!rows || rowIndex < 0 || rowIndex >= rows.length)
-            return;
-        const row = rows[rowIndex];
-        const formGroup = this.formGroupCache.get(row);
-        if (!formGroup)
-            return;
-        // Prevent commit if invalid (when syncValidation is enabled)
-        if (this.syncValidation() && formGroup.invalid) {
-            // Mark all controls as touched to show validation errors
-            formGroup.markAllAsTouched();
-            event.preventDefault();
+    reopenOverlay() {
+        if (!this._panel)
             return;
+        this._isOpen = false;
+        this._panel.style.display = 'none';
+        this.showOverlay();
+    }
+    /**
+     * Remove the overlay from the DOM and clean up all listeners.
+     *
+     * Called automatically on `DestroyRef.onDestroy`. Can also be called
+     * manually if the editor needs early cleanup.
+     */
+    teardownOverlay() {
+        this._abortCtrl?.abort();
+        this._abortCtrl = null;
+        this._focusObserver?.disconnect();
+        this._focusObserver = null;
+        // Unregister the panel from the grid's external focus container registry
+        if (this._panel) {
+            this._getGridElement()?.unregisterExternalFocusContainer?.(this._panel);
         }
-        // Sync FormGroup values back to the row object
-        if (formGroup.dirty) {
-            const formValue = formGroup.value;
-            Object.keys(formValue).forEach((field) => {
-                if (field in row) {
-                    row[field] = formValue[field];
-                }
-            });
+        if (this._panel?.parentNode) {
+            this._panel.parentNode.removeChild(this._panel);
         }
-        // Clean up FormGroup if not keeping them
-        if (!this.keepFormGroups()) {
-            this.formGroupCache.delete(row);
-            this.rowIndexMap.delete(row);
-            // Clear any validation state in the grid
-            if (rowId) {
-                const editingPlugin = grid.getPluginByName?.('editing');
-                editingPlugin?.clearRowInvalid(rowId);
+        this._panel = null;
+        this._isOpen = false;
+        // Clean up anchor-name on the cell
+        if (this._supportsAnchor) {
+            const cell = this._getCell();
+            if (cell) {
+                cell.style.removeProperty('anchor-name');
             }
         }
     }
-    // #endregion
-    // #region Validation Sync
     /**
-     * Syncs a FormControl's validation state to the grid's visual invalid styling.
+     * Override in `edit-close` handler to also hide the overlay.
+     * This is called automatically by `BaseGridEditor` when the grid
+     * ends the editing session.
      */
-    #syncControlValidationToGrid(rowId, field, control) {
-        const grid = this.elementRef.nativeElement;
-        if (!grid)
-            return;
-        const editingPlugin = grid.getPluginByName?.('editing');
-        if (!editingPlugin)
-            return;
-        if (control.invalid) {
-            const errorMessage = this.#getFirstErrorMessage(control);
-            editingPlugin.setInvalid(rowId, field, errorMessage);
+    onEditClose() {
+        this.hideOverlay(true);
+    }
+    // ============================================================================
+    // Keyboard & Click Helpers
+    // ============================================================================
+    /**
+     * Keydown handler for the inline readonly input.
+     *
+     * - **Enter / Space / ArrowDown / F2** → open overlay
+     * - **Escape** → calls {@link handleEscape}
+     *
+     * Bind this to `(keydown)` on your inline input element.
+     */
+    onInlineKeydown(event) {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+            case 'F2':
+                event.preventDefault();
+                this.showOverlay();
+                this.onOverlayOpened();
+                break;
+            case 'Escape':
+                this.handleEscape(event);
+                break;
+        }
+    }
+    /**
+     * Click handler for the inline input.
+     * Opens the overlay and calls {@link onOverlayOpened}.
+     *
+     * Bind this to `(click)` on your inline input element.
+     */
+    onInlineClick() {
+        if (this._isOpen) {
+            this.hideOverlay();
         }
         else {
-            editingPlugin.clearInvalid(rowId, field);
+            this.showOverlay();
+            this.onOverlayOpened();
         }
     }
     /**
-     * Gets a human-readable error message from the first validation error.
+     * Handle Escape key press.
+     *
+     * If the overlay is open, closes it and returns focus to the inline input.
+     * If the overlay is already closed, cancels the edit entirely.
      */
-    #getFirstErrorMessage(control) {
-        const errors = control.errors;
-        if (!errors)
-            return '';
-        const firstKey = Object.keys(errors)[0];
-        const error = errors[firstKey];
-        switch (firstKey) {
-            case 'required':
-                return 'This field is required';
-            case 'minlength':
-                return `Minimum length is ${error.requiredLength}`;
-            case 'maxlength':
-                return `Maximum length is ${error.requiredLength}`;
-            case 'min':
-                return `Minimum value is ${error.min}`;
-            case 'max':
-                return `Maximum value is ${error.max}`;
-            case 'email':
-                return 'Invalid email address';
-            case 'pattern':
-                return 'Invalid format';
-            default:
-                return typeof error === 'string' ? error : (error?.message ?? `Validation error: ${firstKey}`);
+    handleEscape(event) {
+        if (this._isOpen) {
+            event.stopPropagation();
+            this.hideOverlay();
+        }
+        else {
+            this.cancelEdit();
         }
     }
-    // #endregion
-    // #region Public API
     /**
-     * Gets the FormGroup for a row, if it exists.
-     * Unlike the context methods, this does NOT create a FormGroup lazily.
+     * Dispatch a synthetic Tab key event to advance grid focus.
      *
-     * @param rowIndex The row index
-     * @returns The FormGroup or undefined
+     * Call this after committing a value and closing the overlay so the
+     * grid moves focus to the next cell.
+     *
+     * @param backward - When `true`, dispatch Shift+Tab to move backwards.
      */
-    getFormGroup(rowIndex) {
-        return this.#getRowFormGroup(rowIndex);
+    advanceGridFocus(backward = false) {
+        const cell = this._getCell();
+        if (!cell)
+            return;
+        cell.dispatchEvent(new KeyboardEvent('keydown', {
+            key: 'Tab',
+            shiftKey: backward,
+            bubbles: true,
+            cancelable: true,
+        }));
     }
     /**
-     * Gets all cached FormGroups.
-     * Useful for bulk validation or inspection.
+     * Called after the overlay is shown.
      *
-     * @returns Map of row objects to their FormGroups
+     * Override to focus an element inside the panel, start animations, etc.
+     * Default implementation is a no-op.
      */
-    getAllFormGroups() {
-        return this.formGroupCache;
+    onOverlayOpened() {
+        // Default: no-op. Subclasses override.
+    }
+    // ============================================================================
+    // Private Helpers
+    // ============================================================================
+    /** Find the parent cell element for this editor. */
+    _getCell() {
+        return this._elementRef.nativeElement.closest('[part="cell"]') ?? null;
+    }
+    /** Find the parent `<tbw-grid>` element for this editor. */
+    _getGridElement() {
+        return this._elementRef.nativeElement.closest('tbw-grid, [data-tbw-grid]') ?? null;
     }
     /**
-     * Clears all cached FormGroups.
-     * Useful when the underlying data changes significantly.
+     * JS fallback positioning for browsers without CSS Anchor Positioning.
+     * Uses `getBoundingClientRect()` with viewport overflow detection.
      */
-    clearAllFormGroups() {
-        this.formGroupCache.clear();
-        this.rowIndexMap.clear();
+    _positionWithJs() {
+        const cell = this._getCell();
+        const panel = this._panel;
+        if (!cell || !panel)
+            return;
+        const cellRect = cell.getBoundingClientRect();
+        // Temporarily make visible to measure
+        panel.style.visibility = 'hidden';
+        panel.style.display = '';
+        const panelRect = panel.getBoundingClientRect();
+        panel.style.visibility = '';
+        const viewportH = window.innerHeight;
+        const viewportW = window.innerWidth;
+        let top;
+        let left;
+        switch (this.overlayPosition) {
+            case 'above': {
+                top = cellRect.top - panelRect.height;
+                left = cellRect.left;
+                // Flip to below if off-screen
+                if (top < 0)
+                    top = cellRect.bottom;
+                break;
+            }
+            case 'below-right': {
+                top = cellRect.bottom;
+                left = cellRect.right - panelRect.width;
+                // Flip to above if off-screen
+                if (top + panelRect.height > viewportH)
+                    top = cellRect.top - panelRect.height;
+                break;
+            }
+            case 'over-top-left': {
+                top = cellRect.top;
+                left = cellRect.left;
+                break;
+            }
+            case 'over-bottom-left': {
+                top = cellRect.bottom - panelRect.height;
+                left = cellRect.left;
+                break;
+            }
+            case 'below':
+            default: {
+                top = cellRect.bottom;
+                left = cellRect.left;
+                // Flip to above if off-screen
+                if (top + panelRect.height > viewportH)
+                    top = cellRect.top - panelRect.height;
+                break;
+            }
+        }
+        // Clamp to viewport
+        if (left + panelRect.width > viewportW)
+            left = viewportW - panelRect.width - 4;
+        if (left < 0)
+            left = 4;
+        if (top < 0)
+            top = 4;
+        panel.style.top = `${top}px`;
+        panel.style.left = `${left}px`;
     }
     /**
-     * Validates all currently cached FormGroups.
+     * Document pointerdown handler for click-outside detection.
+     * Fires `onOverlayOutsideClick()` if the click is outside the panel
+     * and outside the editor's host element.
+     */
+    _onDocumentPointerDown(event) {
+        if (!this._isOpen || !this._panel)
+            return;
+        const target = event.target;
+        const hostEl = this._elementRef.nativeElement;
+        // Click inside panel or host — ignore
+        if (this._panel.contains(target) || hostEl.contains(target))
+            return;
+        this.onOverlayOutsideClick();
+    }
+    /**
+     * Handle the grid's `tbw-scroll` CustomEvent while the overlay is open.
      *
-     * @returns true if all FormGroups are valid, false otherwise
+     * When the viewport scrolls, the anchored overlay would otherwise float
+     * over content that no longer corresponds to the edited cell (or the
+     * cell may be virtualized out entirely). Treat scroll as a dismissal
+     * signal equivalent to clicking outside so subclasses' overlay-outside
+     * handler drives the appropriate commit/cancel path.
      */
-    validateAll() {
-        for (const formGroup of this.formGroupCache.values()) {
-            if (formGroup.invalid) {
-                formGroup.markAllAsTouched();
-                return false;
+    _onGridScroll() {
+        if (!this._isOpen || !this._panel)
+            return;
+        this.onOverlayOutsideClick();
+    }
+    /**
+     * Set up a MutationObserver on the parent cell to watch for
+     * `cell-focus` class changes. This handles row-editing mode where
+     * all editors exist simultaneously but only the focused cell's
+     * editor should have its overlay visible.
+     *
+     * A `justOpened` flash guard suppresses the observer from
+     * immediately closing the overlay when `beginBulkEdit()` moves
+     * focus to the first editable column. Without this guard,
+     * double-click triggers a "flash open then close" effect.
+     */
+    _setupFocusObserver() {
+        const cell = this._getCell();
+        if (!cell)
+            return;
+        let justOpened = false;
+        let pendingHideRaf = 0;
+        const hostEl = this._elementRef.nativeElement;
+        this._focusObserver = new MutationObserver((mutations) => {
+            // Guard: if the editor's host element is no longer inside the cell,
+            // it means the component was detached (e.g., editing session ended
+            // and the render pipeline cleared the cell DOM). Disconnect to
+            // prevent orphaned observers from opening stale overlay panels.
+            if (!cell.contains(hostEl)) {
+                this._focusObserver?.disconnect();
+                this._focusObserver = null;
+                return;
             }
-        }
-        return true;
+            for (const mutation of mutations) {
+                if (mutation.type !== 'attributes' || mutation.attributeName !== 'class')
+                    continue;
+                const isFocused = cell.classList.contains('cell-focus');
+                if (isFocused && !this._isOpen) {
+                    // Cell just gained focus — cancel any pending hide and open overlay.
+                    if (pendingHideRaf) {
+                        cancelAnimationFrame(pendingHideRaf);
+                        pendingHideRaf = 0;
+                    }
+                    justOpened = true;
+                    this.showOverlay();
+                    this.onOverlayOpened();
+                    // Clear the guard after a macrotask so that an immediate
+                    // focus-away (e.g. beginBulkEdit focus adjustment) does
+                    // not close the overlay in the same event loop tick.
+                    setTimeout(() => {
+                        justOpened = false;
+                    }, 0);
+                }
+                else if (!isFocused && this._isOpen && !justOpened) {
+                    // Cell lost focus — defer hide to allow render cycles to settle.
+                    // Re-renders (e.g., from ResizeObserver after a footer appears)
+                    // may transiently toggle cell-focus within the same frame.
+                    // Deferring to the next animation frame lets the render pipeline
+                    // finish before we decide whether the overlay should actually close.
+                    if (pendingHideRaf)
+                        cancelAnimationFrame(pendingHideRaf);
+                    pendingHideRaf = requestAnimationFrame(() => {
+                        pendingHideRaf = 0;
+                        // Re-check settled state — cell-focus may have been re-applied
+                        if (!cell.classList.contains('cell-focus') && this._isOpen) {
+                            this.hideOverlay(true);
+                        }
+                    });
+                }
+            }
+        });
+        this._focusObserver.observe(cell, { attributes: true, attributeFilter: ['class'] });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridLazyForm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: GridLazyForm, isStandalone: true, selector: "tbw-grid[lazyForm]", inputs: { lazyForm: { classPropertyName: "lazyForm", publicName: "lazyForm", isSignal: true, isRequired: true, transformFunction: null }, syncValidation: { classPropertyName: "syncValidation", publicName: "syncValidation", isSignal: true, isRequired: false, transformFunction: null }, keepFormGroups: { classPropertyName: "keepFormGroups", publicName: "keepFormGroups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowFormChange: "rowFormChange" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseOverlayEditor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: BaseOverlayEditor, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridLazyForm, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'tbw-grid[lazyForm]',
-                }]
-        }], propDecorators: { lazyForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyForm", required: true }] }], syncValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncValidation", required: false }] }], keepFormGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepFormGroups", required: false }] }], rowFormChange: [{ type: i0.Output, args: ["rowFormChange"] }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseOverlayEditor, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
 
 /**
  * Editing feature for @toolbox-web/grid-angular
@@ -2378,9 +2401,13 @@ registerEditorSpecBridge((element, adapter) => {
         const onCommit = (value) => ctx.commit(value);
         const onCancel = () => ctx.cancel();
         // Resolve the FormControl from the FormArrayContext, if available.
+        // Both GridFormArray and GridLazyForm expose a FormArrayContext, but each
+        // stores it under its own module-local Symbol. Check both so control-based
+        // template editors (`*tbwEditor="let _; control as control"`) receive the
+        // FormControl whether the grid uses `[formArray]` or `[lazyForm]`.
         let control;
         if (gridElement) {
-            const formContext = getFormArrayContext(gridElement);
+            const formContext = getFormArrayContext(gridElement) ?? getLazyFormContext(gridElement);
             if (formContext?.hasFormGroups) {
                 const gridRows = gridElement.rows;
                 if (gridRows) {