@toolbox-web/grid-angular 1.3.1 → 1.4.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, contentChild, TemplateRef, effect, Directive, input, DestroyRef, InjectionToken, Injectable, makeEnvironmentProviders, createComponent, signal, afterNextRender, computed, output, EnvironmentInjector, ApplicationRef, ViewContainerRef } from '@angular/core';
+import { inject, ElementRef, contentChild, TemplateRef, effect, Directive, DestroyRef, input, InjectionToken, Injectable, makeEnvironmentProviders, createComponent, signal, afterNextRender, computed, output, EnvironmentInjector, ApplicationRef, ViewContainerRef } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormGroup } from '@angular/forms';
 import { startWith, debounceTime } from 'rxjs/operators';
@@ -85,6 +85,13 @@ function getEditorTemplate(element) {
  * ```
  *
  * @category Directive
+ *
+ * MOVE-IN-V2: this directive (and its companion `GridEditorContext` type and
+ * `getEditorTemplate` helper) will physically move into
+ * `@toolbox-web/grid-angular/features/editing` in v2.0.0; the deprecated
+ * re-exports from the main `@toolbox-web/grid-angular` entry will be removed
+ * at the same time. Consumers should already be importing from the feature
+ * entry.
  */
 class GridColumnEditor {
     elementRef = inject((ElementRef));
@@ -189,119 +196,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             args: [{ selector: 'tbw-grid-column-view' }]
         }], propDecorators: { template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
-// Global registry mapping DOM elements to their templates
-const detailTemplateRegistry = new Map();
-/**
- * Gets the detail template registered for a given grid element.
- * Used by AngularGridAdapter to retrieve templates at render time.
- */
-function getDetailTemplate(gridElement) {
-    // Look for tbw-grid-detail child and get its template
-    const detailElement = gridElement.querySelector('tbw-grid-detail');
-    if (detailElement) {
-        return detailTemplateRegistry.get(detailElement);
-    }
-    return undefined;
-}
-/**
- * Gets the configuration for the detail view.
- */
-function getDetailConfig(gridElement) {
-    const detailElement = gridElement.querySelector('tbw-grid-detail');
-    if (detailElement) {
-        const animationAttr = detailElement.getAttribute('animation');
-        let animation = 'slide';
-        if (animationAttr === 'false') {
-            animation = false;
-        }
-        else if (animationAttr === 'fade') {
-            animation = 'fade';
-        }
-        return {
-            showExpandColumn: detailElement.getAttribute('showExpandColumn') !== 'false',
-            animation,
-        };
-    }
-    return undefined;
-}
-/**
- * Directive that captures an `<ng-template>` for use as a master-detail row renderer.
- *
- * This enables declarative Angular component usage for expandable detail rows
- * that appear below the main row when expanded.
- *
- * ## Usage
- *
- * ```html
- * <tbw-grid [rows]="rows" [gridConfig]="config">
- *   <tbw-grid-detail [showExpandColumn]="true" animation="slide">
- *     <ng-template let-row>
- *       <app-detail-panel [employee]="row" />
- *     </ng-template>
- *   </tbw-grid-detail>
- * </tbw-grid>
- * ```
- *
- * The template context provides:
- * - `$implicit` / `row`: The full row data object
- *
- * Import the directive in your component:
- *
- * ```typescript
- * import { GridDetailView } from '@toolbox-web/grid-angular';
- *
- * @Component({
- *   imports: [GridDetailView],
- *   // ...
- * })
- * ```
- *
- * @example
- * ```html
- * <tbw-grid [rows]="rows" [gridConfig]="config">
- *   <tbw-grid-detail [showExpandColumn]="true" animation="slide">
- *     <ng-template let-row>
- *       <app-detail-panel [employee]="row" />
- *     </ng-template>
- *   </tbw-grid-detail>
- * </tbw-grid>
- * ```
- *
- * @category Directive
- */
-class GridDetailView {
-    elementRef = inject((ElementRef));
-    /** Whether to show the expand/collapse column. Default: true */
-    showExpandColumn = input(true, ...(ngDevMode ? [{ debugName: "showExpandColumn" }] : /* istanbul ignore next */ []));
-    /** Animation style for expand/collapse. Default: 'slide' */
-    animation = input('slide', ...(ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []));
-    /**
-     * Query for the ng-template content child.
-     */
-    template = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
-    /** Effect that triggers when the template is available */
-    onTemplateReceived = effect(() => {
-        const template = this.template();
-        if (template) {
-            // Register the template for this element
-            detailTemplateRegistry.set(this.elementRef.nativeElement, template);
-        }
-    }, ...(ngDevMode ? [{ debugName: "onTemplateReceived" }] : /* istanbul ignore next */ []));
-    /**
-     * Static type guard for template context.
-     * Enables type inference in templates.
-     */
-    static ngTemplateContextGuard(dir, ctx) {
-        return true;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridDetailView, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.5", type: GridDetailView, isStandalone: true, selector: "tbw-grid-detail", inputs: { showExpandColumn: { classPropertyName: "showExpandColumn", publicName: "showExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null } }, 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: GridDetailView, decorators: [{
-            type: Directive,
-            args: [{ selector: 'tbw-grid-detail' }]
-        }], propDecorators: { showExpandColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpandColumn", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
-
 // Symbol for storing form context on the grid element
 const FORM_ARRAY_CONTEXT$1 = Symbol('formArrayContext');
 /**
@@ -370,6 +264,13 @@ function getFormArrayContext(gridElement) {
  * ```
  *
  * @category Directive
+ *
+ * MOVE-IN-V2: this directive (and its `FormArrayContext` type and
+ * `getFormArrayContext` helper) will physically move into
+ * `@toolbox-web/grid-angular/features/editing` in v2.0.0; the deprecated
+ * re-exports from the main `@toolbox-web/grid-angular` entry will be removed
+ * at the same time. Consumers should already be importing from the feature
+ * entry.
  */
 class GridFormArray {
     destroyRef = inject(DestroyRef);
@@ -785,88 +686,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }], propDecorators: { formArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "formArray", required: true }] }], syncValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncValidation", required: false }] }] } });
 
-/**
- * Registry to store responsive card templates by grid element.
- * Used by AngularGridAdapter to create card renderers.
- */
-const responsiveCardTemplateRegistry = new Map();
-/**
- * Retrieves the responsive card template for a grid element.
- *
- * @param gridElement - The grid element to look up
- * @returns The template reference or undefined if not found
- */
-function getResponsiveCardTemplate(gridElement) {
-    // Find the tbw-grid-responsive-card element inside the grid
-    const cardElement = gridElement.querySelector('tbw-grid-responsive-card');
-    if (!cardElement)
-        return undefined;
-    return responsiveCardTemplateRegistry.get(cardElement);
-}
-/**
- * Directive for providing custom Angular templates for responsive card layout.
- *
- * Use this directive to define how each row should render when the grid
- * is in responsive/mobile mode. The template receives the row data and index.
- *
- * ## Usage
- *
- * ```html
- * <tbw-grid [rows]="employees">
- *   <tbw-grid-responsive-card>
- *     <ng-template let-employee let-idx="index">
- *       <div class="employee-card">
- *         <img [src]="employee.avatar" alt="">
- *         <div class="info">
- *           <strong>{{ employee.name }}</strong>
- *           <span>{{ employee.department }}</span>
- *         </div>
- *       </div>
- *     </ng-template>
- *   </tbw-grid-responsive-card>
- * </tbw-grid>
- * ```
- *
- * ## Important Notes
- *
- * - The ResponsivePlugin must be added to your grid config
- * - The Grid directive will automatically configure the plugin's cardRenderer
- * - Template context provides `$implicit` (row), `row`, and `index`
- *
- * @see ResponsivePlugin
- * @category Directive
- */
-class GridResponsiveCard {
-    elementRef = inject((ElementRef));
-    /**
-     * The ng-template containing the card content.
-     */
-    template = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
-    /**
-     * Effect that registers the template when it becomes available.
-     */
-    onTemplateReceived = effect(() => {
-        const template = this.template();
-        if (template) {
-            responsiveCardTemplateRegistry.set(this.elementRef.nativeElement, template);
-        }
-    }, ...(ngDevMode ? [{ debugName: "onTemplateReceived" }] : /* istanbul ignore next */ []));
-    /**
-     * Type guard for template context inference.
-     */
-    static ngTemplateContextGuard(_directive, context) {
-        return true;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridResponsiveCard, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.5", type: GridResponsiveCard, isStandalone: true, selector: "tbw-grid-responsive-card", 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: GridResponsiveCard, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'tbw-grid-responsive-card',
-                }]
-        }], propDecorators: { template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
-
 // Global registry mapping DOM elements to their templates
 const toolPanelTemplateRegistry = new Map();
 /**
@@ -1173,6 +992,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * ```
  *
  * @category Directive
+ *
+ * MOVE-IN-V2: this directive (and its `StructuralEditorContext` type) will
+ * physically move into `@toolbox-web/grid-angular/features/editing` in v2.0.0;
+ * the deprecated re-export from the main `@toolbox-web/grid-angular` entry
+ * will be removed at the same time. Consumers should already be importing
+ * from the feature entry. (`TbwRenderer` stays in the main entry — it is
+ * editor-agnostic.)
  */
 class TbwEditor {
     template = inject((TemplateRef));
@@ -1214,6 +1040,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             args: [{ selector: '[tbwEditor]' }]
         }], ctorParameters: () => [] });
 
+/**
+ * Editor mount hook registry — append-only hooks called when an Angular-managed
+ * editor host is mounted into the DOM with a known owner grid.
+ *
+ * This is the augmentation point that lets feature secondary entries
+ * (e.g. `@toolbox-web/grid-angular/features/editing`) install per-editor
+ * lifecycle behaviour (such as the `before-edit-close` blur bridge)
+ * without coupling the central adapter file to the editing feature.
+ * Mirrors React's and Vue's `editor-mount-hooks` and how core grid plugins
+ * augment the grid via `registerPlugin()`.
+ *
+ * @packageDocumentation
+ * @internal
+ */
+const editorMountHooks = [];
+/**
+ * Install an editor-mount hook. Called by feature secondary entries
+ * (e.g. `features/editing`) on import.
+ *
+ * @internal Plugin API
+ */
+function registerEditorMountHook(hook) {
+    editorMountHooks.push(hook);
+}
+/**
+ * Run all registered editor-mount hooks for a freshly mounted editor.
+ * Returns a combined teardown that invokes each hook's teardown in
+ * registration order.
+ *
+ * @internal Adapter use only.
+ */
+function notifyEditorMounted(container, gridEl) {
+    const teardowns = [];
+    for (const hook of editorMountHooks) {
+        const teardown = hook({ container, gridEl });
+        if (teardown)
+            teardowns.push(teardown);
+    }
+    return () => {
+        for (const teardown of teardowns)
+            teardown();
+    };
+}
+/**
+ * Returns a function that, when invoked, blurs the focused input/textarea/select
+ * inside `host` (if any). Used by the `before-edit-close` bridge installed by
+ * `@toolbox-web/grid-angular/features/editing` so editors that commit on
+ * `(blur)` flush their pending value before the cell DOM is torn down by Tab /
+ * programmatic row exit.
+ * @internal
+ */
+function makeFlushFocusedInput(host) {
+    return () => {
+        const focused = host.ownerDocument.activeElement;
+        if (focused &&
+            host.contains(focused) &&
+            (focused instanceof HTMLInputElement ||
+                focused instanceof HTMLTextAreaElement ||
+                focused instanceof HTMLSelectElement)) {
+            focused.blur();
+        }
+    };
+}
+
 /**
  * Editor Wiring Helpers
  *
@@ -1435,6 +1325,149 @@ function provideGridTypeDefaults(defaults) {
     return makeEnvironmentProviders([{ provide: GRID_TYPE_DEFAULTS, useValue: defaults }]);
 }
 
+/**
+ * Append-only bridge registries used by `@toolbox-web/grid-angular`.
+ *
+ * These let feature secondary entries plug into the central `GridAdapter`
+ * without the adapter needing to know about them. Mirrors React's and Vue's
+ * `register*Bridge` modules and how core grid plugins augment the grid via
+ * `registerPlugin()`.
+ *
+ * This module is deliberately framework-free: it holds plain module-level
+ * `let` state and never imports from `@angular/core` or from
+ * `@toolbox-web/grid/plugins/...`. Feature subpaths import the setters via
+ * the `@toolbox-web/grid-angular` package barrel (relative imports outside
+ * a secondary entry's `rootDir` are forbidden by ng-packagr).
+ *
+ * @internal
+ */
+let detailRendererBridge = null;
+let responsiveCardRendererBridge = null;
+let filterPanelTypeDefaultBridge = null;
+/**
+ * Install the master-detail row-renderer bridge. Called once on import by
+ * `@toolbox-web/grid-angular/features/master-detail`.
+ * @internal Plugin API
+ */
+function registerDetailRendererBridge(bridge) {
+    detailRendererBridge = bridge;
+}
+/**
+ * Install the responsive-card row-renderer bridge. Called once on import by
+ * `@toolbox-web/grid-angular/features/responsive`.
+ * @internal Plugin API
+ */
+function registerResponsiveCardRendererBridge(bridge) {
+    responsiveCardRendererBridge = bridge;
+}
+/**
+ * Install the type-default `filterPanelRenderer` wrapper. Called once on import
+ * by `@toolbox-web/grid-angular/features/filtering`. Without this bridge,
+ * type-default and grid-config-level component-class filterPanelRenderers are
+ * silently dropped — same precondition as the FilteringPlugin (TBW031).
+ * @internal Plugin API
+ */
+function registerFilterPanelTypeDefaultBridge(bridge) {
+    filterPanelTypeDefaultBridge = bridge;
+}
+/** @internal Adapter use only. */
+function getDetailRendererBridge() {
+    return detailRendererBridge;
+}
+/** @internal Adapter use only. */
+function getResponsiveCardRendererBridge() {
+    return responsiveCardRendererBridge;
+}
+/** @internal Adapter use only. */
+function getFilterPanelTypeDefaultBridge() {
+    return filterPanelTypeDefaultBridge;
+}
+
+/**
+ * Internal registries used by `@toolbox-web/grid-angular`.
+ *
+ * Two extension points are exposed so individual feature secondary entries
+ * (e.g. `@toolbox-web/grid-angular/features/master-detail`) can plug into
+ * the core `Grid` directive without the directive needing to know about them.
+ *
+ * - {@link registerTemplateBridge} — runs in `ngAfterContentInit` once Angular
+ *   templates inside the grid have been registered. Used to discover light-DOM
+ *   slot elements (`<tbw-grid-detail>`, `<tbw-grid-responsive-card>`, …) and
+ *   wire them to the corresponding plugin's renderer setter.
+ * - {@link registerFeatureConfigPreprocessor} — runs inside the directive's
+ *   feature-plugin builder before `createPluginFromFeature` is called. Lets a
+ *   feature transform its config object (e.g. to convert Angular component
+ *   classes embedded in `customPanels` to renderer functions).
+ *
+ * Both registries are append-only and module-scoped: they are populated by
+ * side-effect imports of feature secondary entries and consumed by the core
+ * `Grid` directive. Order is insertion order.
+ *
+ * @internal — public for cross-entry-point use; not part of the supported API.
+ */
+const templateBridges = [];
+/**
+ * Register a template bridge. Called by feature secondary entries at module
+ * load (e.g. `import '@toolbox-web/grid-angular/features/master-detail'`).
+ *
+ * Bridges are append-only and never deduplicated; calling registration twice
+ * for the same feature module is safe because module imports are deduplicated
+ * by the JS loader.
+ *
+ * @internal
+ */
+function registerTemplateBridge(bridge) {
+    templateBridges.push(bridge);
+}
+/**
+ * Run all registered template bridges for a grid. The directive calls this
+ * from `ngAfterContentInit` after `refreshColumns()`. Bridges run concurrently;
+ * errors thrown by one bridge do not stop the others.
+ *
+ * @internal
+ */
+function runTemplateBridges(ctx) {
+    for (const bridge of templateBridges) {
+        try {
+            const result = bridge(ctx);
+            if (result && typeof result.catch === 'function') {
+                result.catch((err) => {
+                    // eslint-disable-next-line no-console
+                    console.error('[tbw-grid-angular] template bridge threw:', err);
+                });
+            }
+        }
+        catch (err) {
+            // eslint-disable-next-line no-console
+            console.error('[tbw-grid-angular] template bridge threw:', err);
+        }
+    }
+}
+const featureConfigPreprocessors = new Map();
+/**
+ * Register a feature config preprocessor. Last registration wins (subsequent
+ * imports of the same feature module re-register the same function, which is
+ * a no-op).
+ *
+ * @internal
+ */
+function registerFeatureConfigPreprocessor(name, fn) {
+    featureConfigPreprocessors.set(name, fn);
+}
+/**
+ * Look up the preprocessor for a feature, if any.
+ *
+ * @internal
+ */
+function getFeatureConfigPreprocessor(name) {
+    return featureConfigPreprocessors.get(name);
+}
+
+// #region Feature bridge registries
+// (Storage lives in `./internal/feature-bridges` so feature subpaths can
+// install bridges without pulling Angular runtime into specs that mock
+// `@angular/core` — see filtering feature spec.)
+// #endregion
 /**
  * Helper to get view template from either structural directive or nested directive.
  */
@@ -1555,20 +1588,16 @@ class GridAdapter {
     /** Editor-specific component refs tracked separately for per-cell cleanup via releaseCell. */
     editorComponentRefs = [];
     /**
-     * Per-editor `before-edit-close` listener teardown functions, keyed by
-     * editor host element.
-     *
-     * The grid's editing plugin emits `before-edit-close` on the host
-     * `<tbw-grid>` before tearing down a row's managed editors. Angular
-     * editors that commit on `(blur)` rely on the focused input firing `blur`
-     * naturally, but Tab / programmatic row exit rebuilds the cell DOM
-     * synchronously without giving the focused input a chance to blur first
-     * — pending input is silently discarded.
+     * Per-editor mount-hook teardown functions, keyed by editor host element.
      *
-     * Mirror of Vue's `editorBeforeCloseUnsubs` and React's
-     * `wrapReactEditor` queueMicrotask bridge.
+     * Populated by {@link runEditorMountHooks} (which invokes
+     * {@link notifyEditorMounted}) and torn down per-cell from
+     * {@link releaseCell}, with full sweep on {@link destroy}. The actual
+     * lifecycle behaviour is supplied by feature secondary entries (e.g.
+     * `@toolbox-web/grid-angular/features/editing` installs the
+     * `before-edit-close` blur bridge).
      */
-    editorBeforeCloseUnsubs = new Map();
+    editorMountTeardowns = new Map();
     typeRegistry = null;
     constructor(injector, appRef, viewContainerRef) {
         this.injector = injector;
@@ -1656,9 +1685,13 @@ class GridAdapter {
             if (config.editor && isComponentClass(config.editor)) {
                 processedConfig.editor = this.createComponentEditor(config.editor);
             }
-            // Convert filterPanelRenderer component class to function
+            // Convert filterPanelRenderer component class to function via the
+            // filtering feature bridge. Without `@toolbox-web/grid-angular/features/filtering`
+            // imported, component-class filterPanelRenderers are dropped silently.
             if (config.filterPanelRenderer && isComponentClass(config.filterPanelRenderer)) {
-                processedConfig.filterPanelRenderer = this.createComponentFilterPanelRenderer(config.filterPanelRenderer);
+                const wrapped = getFilterPanelTypeDefaultBridge()?.(config.filterPanelRenderer, this);
+                if (wrapped)
+                    processedConfig.filterPanelRenderer = wrapped;
             }
             processed[type] = processedConfig;
         }
@@ -1843,7 +1876,7 @@ class GridAdapter {
             const container = document.createElement('span');
             container.style.display = 'contents';
             syncRootNodes(viewRef, container);
-            this.attachBeforeEditCloseFlush(container);
+            this.runEditorMountHooks(container);
             // Auto-wire: Listen for commit/cancel events on the rendered component.
             // This allows components to just emit (commit) and (cancel) without
             // requiring explicit template bindings like (commit)="onCommit($event)".
@@ -1869,101 +1902,40 @@ class GridAdapter {
         };
     }
     /**
-     * Creates a detail renderer function for MasterDetailPlugin.
-     * Renders Angular templates for expandable detail rows.
+     * Creates a detail renderer function for MasterDetailPlugin. Delegates to
+     * the bridge installed by `@toolbox-web/grid-angular/features/master-detail`.
+     * Returns undefined if the feature is not imported or no `<tbw-grid-detail>`
+     * template is registered for this grid.
      */
     createDetailRenderer(gridElement) {
-        const template = getDetailTemplate(gridElement);
-        if (!template) {
-            return undefined;
-        }
-        return (row) => {
-            // Create the context for the template
-            const context = {
-                $implicit: row,
-                row: row,
-            };
-            // Create embedded view from template
-            const viewRef = this.viewContainerRef.createEmbeddedView(template, context);
-            this.viewRefs.push(viewRef);
-            // Trigger change detection
-            viewRef.detectChanges();
-            // Create a container for the root nodes
-            const container = document.createElement('div');
-            viewRef.rootNodes.forEach((node) => container.appendChild(node));
-            return container;
-        };
+        return getDetailRendererBridge()?.(gridElement, this);
     }
     /**
-     * Framework adapter hook called by MasterDetailPlugin during attach().
-     * Parses the <tbw-grid-detail> element and returns an Angular template-based renderer.
-     *
-     * This enables MasterDetailPlugin to automatically use Angular templates
-     * without manual configuration in the Grid directive.
+     * FrameworkAdapter hook called by MasterDetailPlugin during attach(). Delegates
+     * to {@link createDetailRenderer} (bridge installed by master-detail feature).
      */
     parseDetailElement(detailElement) {
-        // Get the template from the registry for this detail element
-        const template = getDetailTemplate(detailElement.closest('tbw-grid'));
-        if (!template) {
+        const gridElement = detailElement.closest('tbw-grid');
+        if (!gridElement)
             return undefined;
-        }
-        // Return a renderer function that creates embedded views
-        // Note: rowIndex is part of the MasterDetailPlugin detailRenderer signature but not needed here
-        return (row) => {
-            const context = {
-                $implicit: row,
-                row: row,
-            };
-            const viewRef = this.viewContainerRef.createEmbeddedView(template, context);
-            this.viewRefs.push(viewRef);
-            viewRef.detectChanges();
-            const container = document.createElement('div');
-            viewRef.rootNodes.forEach((node) => container.appendChild(node));
-            return container;
-        };
+        return getDetailRendererBridge()?.(gridElement, this);
     }
     /**
-     * Creates a responsive card renderer function for ResponsivePlugin.
-     * Renders Angular templates for card layout in responsive mode.
-     *
-     * @param gridElement - The grid element to look up the template for
-     * @returns A card renderer function or undefined if no template is found
+     * Creates a responsive card renderer function for ResponsivePlugin. Delegates
+     * to the bridge installed by `@toolbox-web/grid-angular/features/responsive`.
      */
     createResponsiveCardRenderer(gridElement) {
-        const template = getResponsiveCardTemplate(gridElement);
-        if (!template) {
-            return undefined;
-        }
-        return (row, rowIndex) => {
-            // Create the context for the template
-            const context = {
-                $implicit: row,
-                row: row,
-                index: rowIndex,
-            };
-            // Create embedded view from template
-            const viewRef = this.viewContainerRef.createEmbeddedView(template, context);
-            this.viewRefs.push(viewRef);
-            // Trigger change detection
-            viewRef.detectChanges();
-            // Create a container for the root nodes
-            const container = document.createElement('div');
-            viewRef.rootNodes.forEach((node) => container.appendChild(node));
-            return container;
-        };
+        return getResponsiveCardRendererBridge()?.(gridElement, this);
     }
     /**
-     * FrameworkAdapter hook called by ResponsivePlugin during attach().
-     * Parses the `<tbw-grid-responsive-card>` element and delegates to
-     * {@link createResponsiveCardRenderer}. Required for parity with the Vue
-     * adapter so ResponsivePlugin's standard lookup path works for Angular
-     * users without relying on imperative `refreshCardRenderer` calls.
+     * FrameworkAdapter hook called by ResponsivePlugin during attach(). Delegates
+     * to {@link createResponsiveCardRenderer} (bridge installed by responsive feature).
      */
     parseResponsiveCardElement(cardElement) {
         const gridElement = cardElement.closest('tbw-grid');
         if (!gridElement)
             return undefined;
-        return this.createResponsiveCardRenderer(gridElement);
+        return getResponsiveCardRendererBridge()?.(gridElement, this);
     }
     /**
      * Creates a tool panel renderer from a light DOM element.
@@ -2047,8 +2019,11 @@ class GridAdapter {
             typeDefault.editor = this.createComponentEditor(config.editor);
         }
         // Create filterPanelRenderer function that instantiates the Angular component
+        // via the filtering feature bridge. Drop silently if the feature is not imported.
         if (config.filterPanelRenderer && isComponentClass(config.filterPanelRenderer)) {
-            typeDefault.filterPanelRenderer = this.createComponentFilterPanelRenderer(config.filterPanelRenderer);
+            const wrapped = getFilterPanelTypeDefaultBridge()?.(config.filterPanelRenderer, this);
+            if (wrapped)
+                typeDefault.filterPanelRenderer = wrapped;
         }
         else if (config.filterPanelRenderer) {
             typeDefault.filterPanelRenderer = config.filterPanelRenderer;
@@ -2056,47 +2031,56 @@ class GridAdapter {
         return typeDefault;
     }
     /**
-     * Creates and mounts an Angular component dynamically.
-     * Shared logic between renderer and editor component creation.
+     * Generalized component-mount primitive. All `createComponent*Renderer` methods
+     * are thin wrappers around this. Returns a function `(ctx) => { hostElement, componentRef }`
+     * so callers that need the `componentRef` (editor wiring, value-change subscription)
+     * still have it; callers that only need the host element use `.hostElement`.
+     *
+     * Public so feature secondary entries can compose their own component renderers
+     * without re-implementing the mount/track plumbing.
+     *
+     * @param componentClass Angular component class to instantiate per call.
+     * @param mapInputs Maps the renderer context to a `setInput()` bag.
+     * @param pool Which `componentRefs[]` array tracks the instance for cleanup.
+     *   `'render'` (default) is the long-lived pool cleared at `dispose()`.
+     *   `'editor'` is the per-cell pool swept by `releaseCell()`.
      * @internal
      */
-    mountComponent(componentClass, inputs, isEditor = false) {
-        // Create a host element for the component
-        const hostElement = document.createElement('span');
-        hostElement.style.display = 'contents';
-        // Create the component dynamically
-        const componentRef = createComponent(componentClass, {
-            environmentInjector: this.injector,
-            hostElement,
-        });
-        // Set inputs - components should have value, row, column inputs
-        this.setComponentInputs(componentRef, inputs);
-        // Attach to app for change detection
-        this.appRef.attachView(componentRef.hostView);
-        // Track in editor-specific array for per-cell cleanup, or general array for renderers
-        if (isEditor) {
-            this.editorComponentRefs.push(componentRef);
-        }
-        else {
-            this.componentRefs.push(componentRef);
-        }
-        // Trigger change detection
-        componentRef.changeDetectorRef.detectChanges();
-        return { hostElement, componentRef };
+    mountComponentRenderer(componentClass, mapInputs, pool = 'render') {
+        return (ctx) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, mapInputs(ctx));
+            this.appRef.attachView(componentRef.hostView);
+            (pool === 'editor' ? this.editorComponentRefs : this.componentRefs).push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return { hostElement, componentRef };
+        };
     }
     /**
      * Creates a renderer function from an Angular component class.
+     * Wraps {@link mountComponentRenderer} with a per-cell `WeakMap` cache so
+     * scroll-recycled cells reuse the existing component (just refresh inputs)
+     * instead of mounting a fresh one.
      * @internal
      */
     createComponentRenderer(componentClass) {
-        // Cell cache for component-based renderers - maps cell element to its component ref
         const cellCache = new WeakMap();
+        const mount = this.mountComponentRenderer(componentClass, (ctx) => ({
+            value: ctx.value,
+            row: ctx.row,
+            column: ctx.column,
+        }));
         return (ctx) => {
             const cellEl = ctx.cellEl;
             if (cellEl) {
                 const cached = cellCache.get(cellEl);
                 if (cached) {
-                    // Reuse existing component - just update inputs
+                    // Reuse existing component - just update inputs.
                     this.setComponentInputs(cached.componentRef, {
                         value: ctx.value,
                         row: ctx.row,
@@ -2106,31 +2090,25 @@ class GridAdapter {
                     return cached.hostElement;
                 }
             }
-            const { hostElement, componentRef } = this.mountComponent(componentClass, {
-                value: ctx.value,
-                row: ctx.row,
-                column: ctx.column,
-            });
-            // Cache for reuse on scroll recycles
-            if (cellEl) {
+            const { hostElement, componentRef } = mount(ctx);
+            if (cellEl)
                 cellCache.set(cellEl, { componentRef, hostElement });
-            }
             return hostElement;
         };
     }
     /**
      * Creates an editor function from an Angular component class.
+     * Wraps {@link mountComponentRenderer} (using the `'editor'` pool for per-cell
+     * cleanup) plus editor-specific wiring: callback bridge, mount-hook fan-out
+     * (see {@link runEditorMountHooks}), and external value-change subscription.
      * @internal
      */
     createComponentEditor(componentClass) {
+        const mount = this.mountComponentRenderer(componentClass, (ctx) => ({ value: ctx.value, row: ctx.row, column: ctx.column }), 'editor');
         return (ctx) => {
-            const { hostElement, componentRef } = this.mountComponent(componentClass, {
-                value: ctx.value,
-                row: ctx.row,
-                column: ctx.column,
-            }, true);
+            const { hostElement, componentRef } = mount(ctx);
             wireEditorCallbacks(hostElement, componentRef.instance, (value) => ctx.commit(value), () => ctx.cancel());
-            this.attachBeforeEditCloseFlush(hostElement);
+            this.runEditorMountHooks(hostElement);
             // Auto-update editor when value changes externally (e.g., via updateRow cascade
             // or Escape-revert). Update the component input and run detectChanges() —
             // the component's own template handles rendering regardless of editor type.
@@ -2154,180 +2132,31 @@ class GridAdapter {
     }
     /**
      * Creates a header renderer function from an Angular component class.
-     * Mounts the component with full header context (column, value, sortState, etc.).
-     * @internal
-     */
-    createComponentHeaderRenderer(componentClass) {
-        return (ctx) => {
-            const hostElement = document.createElement('span');
-            hostElement.style.display = 'contents';
-            const componentRef = createComponent(componentClass, {
-                environmentInjector: this.injector,
-                hostElement,
-            });
-            this.setComponentInputs(componentRef, {
-                column: ctx.column,
-                value: ctx.value,
-                sortState: ctx.sortState,
-                filterActive: ctx.filterActive,
-                renderSortIcon: ctx.renderSortIcon,
-                renderFilterButton: ctx.renderFilterButton,
-            });
-            this.appRef.attachView(componentRef.hostView);
-            this.componentRefs.push(componentRef);
-            componentRef.changeDetectorRef.detectChanges();
-            return hostElement;
-        };
-    }
-    /**
-     * Creates a header label renderer function from an Angular component class.
-     * Mounts the component with label context (column, value).
-     * @internal
-     */
-    createComponentHeaderLabelRenderer(componentClass) {
-        return (ctx) => {
-            const hostElement = document.createElement('span');
-            hostElement.style.display = 'contents';
-            const componentRef = createComponent(componentClass, {
-                environmentInjector: this.injector,
-                hostElement,
-            });
-            this.setComponentInputs(componentRef, {
-                column: ctx.column,
-                value: ctx.value,
-            });
-            this.appRef.attachView(componentRef.hostView);
-            this.componentRefs.push(componentRef);
-            componentRef.changeDetectorRef.detectChanges();
-            return hostElement;
-        };
-    }
-    /**
-     * Creates a group header renderer function from an Angular component class.
-     *
-     * The component should accept group header inputs (id, label, columns, firstIndex, isImplicit).
-     * Returns the host element directly (groupHeaderRenderer returns an element, not void).
-     * @internal
-     */
-    createComponentGroupHeaderRenderer(componentClass) {
-        return (params) => {
-            const hostElement = document.createElement('span');
-            hostElement.style.display = 'contents';
-            const componentRef = createComponent(componentClass, {
-                environmentInjector: this.injector,
-                hostElement,
-            });
-            this.setComponentInputs(componentRef, {
-                id: params.id,
-                label: params.label,
-                columns: params.columns,
-                firstIndex: params.firstIndex,
-                isImplicit: params.isImplicit,
-            });
-            this.appRef.attachView(componentRef.hostView);
-            this.componentRefs.push(componentRef);
-            componentRef.changeDetectorRef.detectChanges();
-            return hostElement;
-        };
-    }
-    /**
-     * Processes a GroupingColumnsConfig, converting component class references
-     * to actual renderer functions.
-     *
-     * @param config - Angular grouping columns configuration with possible component class references
-     * @returns Processed GroupingColumnsConfig with actual renderer functions
-     */
-    processGroupingColumnsConfig(config) {
-        const processed = { ...config };
-        let changed = false;
-        // Bridge top-level groupHeaderRenderer component class
-        if (config.groupHeaderRenderer && isComponentClass(config.groupHeaderRenderer)) {
-            processed.groupHeaderRenderer = this.createComponentGroupHeaderRenderer(config.groupHeaderRenderer);
-            changed = true;
-        }
-        // Bridge per-group renderer component classes inside columnGroups
-        if (Array.isArray(config.columnGroups)) {
-            const mappedGroups = config.columnGroups.map((def) => {
-                if (def.renderer && isComponentClass(def.renderer)) {
-                    changed = true;
-                    return { ...def, renderer: this.createComponentGroupHeaderRenderer(def.renderer) };
-                }
-                return def;
-            });
-            if (changed)
-                processed.columnGroups = mappedGroups;
-        }
-        return changed ? processed : config;
-    }
-    /**
-     * Processes a GroupingRowsConfig, converting component class references
-     * to actual renderer functions.
-     *
-     * @param config - Angular grouping rows configuration with possible component class references
-     * @returns Processed GroupingRowsConfig with actual renderer functions
-     */
-    processGroupingRowsConfig(config) {
-        if (config.groupRowRenderer && isComponentClass(config.groupRowRenderer)) {
-            return {
-                ...config,
-                groupRowRenderer: this.createComponentGroupRowRenderer(config.groupRowRenderer),
-            };
-        }
-        return config;
-    }
-    /**
-     * Processes a PinnedRowsConfig, converting component class references
-     * in `customPanels[].render` to actual renderer functions.
-     *
-     * @param config - Angular pinned rows configuration with possible component class references
-     * @returns Processed PinnedRowsConfig with actual renderer functions
-     */
-    processPinnedRowsConfig(config) {
-        if (!Array.isArray(config.customPanels))
-            return config;
-        const hasComponentRender = config.customPanels.some((panel) => isComponentClass(panel.render));
-        if (!hasComponentRender)
-            return config;
-        return {
-            ...config,
-            customPanels: config.customPanels.map((panel) => {
-                if (!isComponentClass(panel.render))
-                    return panel;
-                return {
-                    ...panel,
-                    render: this.createComponentPinnedRowsPanelRenderer(panel.render),
-                };
-            }),
-        };
-    }
-    /**
-     * Creates a pinned rows panel renderer function from an Angular component class.
-     *
-     * The component should accept inputs from PinnedRowsContext (totalRows, filteredRows,
-     * selectedRows, columns, rows, grid).
-     * @internal
-     */
-    createComponentPinnedRowsPanelRenderer(componentClass) {
-        return (ctx) => {
-            const hostElement = document.createElement('span');
-            hostElement.style.display = 'contents';
-            const componentRef = createComponent(componentClass, {
-                environmentInjector: this.injector,
-                hostElement,
-            });
-            this.setComponentInputs(componentRef, {
-                totalRows: ctx.totalRows,
-                filteredRows: ctx.filteredRows,
-                selectedRows: ctx.selectedRows,
-                columns: ctx.columns,
-                rows: ctx.rows,
-                grid: ctx.grid,
-            });
-            this.appRef.attachView(componentRef.hostView);
-            this.componentRefs.push(componentRef);
-            componentRef.changeDetectorRef.detectChanges();
-            return hostElement;
-        };
+     * Mounts the component with full header context (column, value, sortState, etc.).
+     * @internal
+     */
+    createComponentHeaderRenderer(componentClass) {
+        const mount = this.mountComponentRenderer(componentClass, (ctx) => ({
+            column: ctx.column,
+            value: ctx.value,
+            sortState: ctx.sortState,
+            filterActive: ctx.filterActive,
+            renderSortIcon: ctx.renderSortIcon,
+            renderFilterButton: ctx.renderFilterButton,
+        }));
+        return (ctx) => mount(ctx).hostElement;
+    }
+    /**
+     * Creates a header label renderer function from an Angular component class.
+     * Mounts the component with label context (column, value).
+     * @internal
+     */
+    createComponentHeaderLabelRenderer(componentClass) {
+        const mount = this.mountComponentRenderer(componentClass, (ctx) => ({
+            column: ctx.column,
+            value: ctx.value,
+        }));
+        return (ctx) => mount(ctx).hostElement;
     }
     /**
      * Creates a loading renderer function from an Angular component class.
@@ -2336,78 +2165,59 @@ class GridAdapter {
      * @internal
      */
     createComponentLoadingRenderer(componentClass) {
-        return (ctx) => {
-            const hostElement = document.createElement('span');
-            hostElement.style.display = 'contents';
-            const componentRef = createComponent(componentClass, {
-                environmentInjector: this.injector,
-                hostElement,
-            });
-            this.setComponentInputs(componentRef, {
-                size: ctx.size,
-            });
-            this.appRef.attachView(componentRef.hostView);
-            this.componentRefs.push(componentRef);
-            componentRef.changeDetectorRef.detectChanges();
-            return hostElement;
-        };
+        const mount = this.mountComponentRenderer(componentClass, (ctx) => ({ size: ctx.size }));
+        return (ctx) => mount(ctx).hostElement;
     }
     /**
-     * Creates a group row renderer function from an Angular component class.
-     *
-     * The component should accept group row inputs (key, value, depth, rows, expanded, toggleExpand).
-     * Returns the host element directly (groupRowRenderer returns an element, not void).
+     * Create an embedded view from a `TemplateRef` and append-track it on the
+     * adapter's view-ref pool so it is cleaned up on `destroy()` / `unmount()`.
+     * Public so feature secondary entries can mount Angular templates (e.g.
+     * master-detail rows, responsive cards) without reaching into the adapter's
+     * private `viewContainerRef` / `viewRefs`.
      * @internal
      */
-    createComponentGroupRowRenderer(componentClass) {
-        return (params) => {
-            const hostElement = document.createElement('span');
-            hostElement.style.display = 'contents';
-            const componentRef = createComponent(componentClass, {
-                environmentInjector: this.injector,
-                hostElement,
-            });
-            this.setComponentInputs(componentRef, {
-                key: params.key,
-                value: params.value,
-                depth: params.depth,
-                rows: params.rows,
-                expanded: params.expanded,
-                toggleExpand: params.toggleExpand,
-            });
-            this.appRef.attachView(componentRef.hostView);
-            this.componentRefs.push(componentRef);
-            componentRef.changeDetectorRef.detectChanges();
-            return hostElement;
-        };
+    createTrackedEmbeddedView(template, context) {
+        const viewRef = this.viewContainerRef.createEmbeddedView(template, context);
+        this.viewRefs.push(viewRef);
+        viewRef.detectChanges();
+        return viewRef;
     }
     /**
-     * Creates a filter panel renderer function from an Angular component class.
-     *
-     * The component must implement `FilterPanel` (i.e., have a `params` input).
-     * The component is mounted into the filter panel container element.
+     * Processes a GroupingColumnsConfig. Delegates to the feature config
+     * preprocessor installed by `@toolbox-web/grid-angular/features/grouping-columns`,
+     * which handles converting Angular component class references to actual
+     * renderer functions. Returns the input config unchanged if the feature
+     * is not imported.
+     */
+    processGroupingColumnsConfig(config) {
+        return this.applyFeatureConfigPreprocessor('groupingColumns', config);
+    }
+    /**
+     * Processes a GroupingRowsConfig. Delegates to the feature config preprocessor
+     * installed by `@toolbox-web/grid-angular/features/grouping-rows`.
+     */
+    processGroupingRowsConfig(config) {
+        return this.applyFeatureConfigPreprocessor('groupingRows', config);
+    }
+    /**
+     * Processes a PinnedRowsConfig. Delegates to the feature config preprocessor
+     * installed by `@toolbox-web/grid-angular/features/pinned-rows`.
+     */
+    processPinnedRowsConfig(config) {
+        return this.applyFeatureConfigPreprocessor('pinnedRows', config);
+    }
+    /**
+     * Run a registered feature-config preprocessor against `config`, returning
+     * the original config unchanged when the feature is not imported.
      * @internal
      */
-    createComponentFilterPanelRenderer(componentClass) {
-        return (container, params) => {
-            const hostElement = document.createElement('span');
-            hostElement.style.display = 'contents';
-            const componentRef = createComponent(componentClass, {
-                environmentInjector: this.injector,
-                hostElement,
-            });
-            // Set params input
-            try {
-                componentRef.setInput('params', params);
-            }
-            catch {
-                // Input doesn't exist on component — ignore
-            }
-            this.appRef.attachView(componentRef.hostView);
-            this.componentRefs.push(componentRef);
-            componentRef.changeDetectorRef.detectChanges();
-            container.appendChild(hostElement);
-        };
+    applyFeatureConfigPreprocessor(name, config) {
+        if (!config || typeof config !== 'object')
+            return config;
+        const preprocessor = getFeatureConfigPreprocessor(name);
+        if (!preprocessor)
+            return config;
+        return preprocessor(config, this);
     }
     /**
      * Sets component inputs using Angular's setInput API.
@@ -2449,11 +2259,11 @@ class GridAdapter {
                 this.editorComponentRefs.splice(i, 1);
             }
         }
-        // Detach `before-edit-close` listeners for editor hosts inside this cell
-        for (const [hostEl, unsub] of this.editorBeforeCloseUnsubs) {
+        // Detach editor-mount hook teardowns for editor hosts inside this cell.
+        for (const [hostEl, unsub] of this.editorMountTeardowns) {
             if (cellEl.contains(hostEl)) {
                 unsub();
-                this.editorBeforeCloseUnsubs.delete(hostEl);
+                this.editorMountTeardowns.delete(hostEl);
             }
         }
     }
@@ -2493,40 +2303,28 @@ class GridAdapter {
         this.componentRefs = [];
         this.editorComponentRefs.forEach((ref) => ref.destroy());
         this.editorComponentRefs = [];
-        this.editorBeforeCloseUnsubs.forEach((unsub) => unsub());
-        this.editorBeforeCloseUnsubs.clear();
+        this.editorMountTeardowns.forEach((unsub) => unsub());
+        this.editorMountTeardowns.clear();
     }
     /**
-     * Attaches a `before-edit-close` listener on the host grid that flushes
-     * the focused input inside `host` via native `.blur()` so editors that
-     * commit on `(blur)` flush pending input before the cell DOM is torn
-     * down by Tab / programmatic row exit.
-     *
-     * The grid is resolved lazily via `queueMicrotask` because the host is
-     * appended to the cell *after* the editor wrapper returns. Mirror of
-     * Vue's `attachBeforeEditCloseFlush` and React's `wrapReactEditor`
+     * Runs every registered {@link EditorMountHook} against a freshly mounted
+     * editor host once it has been parented to the grid. The grid is resolved
+     * lazily via `queueMicrotask` because the host is appended to the cell
+     * *after* the editor wrapper returns. Mirror of Vue's
+     * `attachBeforeEditCloseFlush` and React's `wrapReactEditor`
      * queueMicrotask bridge.
+     *
+     * Without any feature imports the hook list is empty and this is a no-op
+     * — `before-edit-close` blur handling lives in
+     * `@toolbox-web/grid-angular/features/editing`.
      * @internal
      */
-    attachBeforeEditCloseFlush(host) {
+    runEditorMountHooks(host) {
         queueMicrotask(() => {
             const gridEl = host.closest('tbw-grid');
             if (!gridEl)
                 return;
-            const flush = () => {
-                const focused = host.ownerDocument.activeElement;
-                if (focused &&
-                    host.contains(focused) &&
-                    (focused instanceof HTMLInputElement ||
-                        focused instanceof HTMLTextAreaElement ||
-                        focused instanceof HTMLSelectElement)) {
-                    focused.blur();
-                }
-            };
-            gridEl.addEventListener('before-edit-close', flush);
-            this.editorBeforeCloseUnsubs.set(host, () => {
-                gridEl.removeEventListener('before-edit-close', flush);
-            });
+            this.editorMountTeardowns.set(host, notifyEditorMounted(host, gridEl));
         });
     }
 }
@@ -2788,6 +2586,12 @@ function injectGrid(selector = 'tbw-grid') {
     const unregisterStyles = (id) => {
         element()?.unregisterStyles?.(id);
     };
+    const getPlugin = (pluginClass) => {
+        return element()?.getPlugin?.(pluginClass);
+    };
+    const getPluginByName = ((name) => {
+        return element()?.getPluginByName?.(name);
+    });
     return {
         element,
         isReady,
@@ -2798,6 +2602,8 @@ function injectGrid(selector = 'tbw-grid') {
         toggleGroup,
         registerStyles,
         unregisterStyles,
+        getPlugin,
+        getPluginByName,
     };
 }
 
@@ -2864,6 +2670,11 @@ function injectGrid(selector = 'tbw-grid') {
  * ```
  *
  * @typeParam TRow - The row data type (available via `params().column`)
+ *
+ * MOVE-IN-V2: this class will physically move into
+ * `@toolbox-web/grid-angular/features/filtering` in v2.0.0; the deprecated
+ * re-export from the main `@toolbox-web/grid-angular` entry will be removed at
+ * the same time. Consumers should already be importing from the feature entry.
  */
 class BaseFilterPanel {
     /**
@@ -2967,6 +2778,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  *
  * @typeParam TRow - The row data type
  * @typeParam TValue - The cell value type
+ *
+ * MOVE-IN-V2: this class will physically move into
+ * `@toolbox-web/grid-angular/features/editing` in v2.0.0; the deprecated
+ * re-export from the main `@toolbox-web/grid-angular` entry will be removed at
+ * the same time. Consumers should already be importing from the feature entry.
  */
 class BaseGridEditor {
     elementRef = inject(ElementRef);
@@ -3269,6 +3085,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  *
  * @typeParam TRow - The row data type
  * @typeParam TValue - The cell/control value type
+ *
+ * MOVE-IN-V2: this class will physically move into
+ * `@toolbox-web/grid-angular/features/editing` in v2.0.0; the deprecated
+ * re-export from the main `@toolbox-web/grid-angular` entry will be removed at
+ * the same time. Consumers should already be importing from the feature entry.
  */
 class BaseGridEditorCVA extends BaseGridEditor {
     // ============================================================================
@@ -3532,6 +3353,12 @@ let anchorCounter = 0;
  *
  * @typeParam TRow - The row data type
  * @typeParam TValue - The cell value type
+ *
+ * MOVE-IN-V2: this class (and its companion `OverlayPosition` type) will
+ * physically move into `@toolbox-web/grid-angular/features/editing` in v2.0.0;
+ * the deprecated re-export from the main `@toolbox-web/grid-angular` entry
+ * will be removed at the same time. Consumers should already be importing
+ * from the feature entry.
  */
 class BaseOverlayEditor extends BaseGridEditor {
     _elementRef = inject(ElementRef);
@@ -4010,6 +3837,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }] });
 
+// Global registry mapping DOM elements to their templates
+const detailTemplateRegistry = new Map();
+/**
+ * Gets the detail template registered for a given grid element.
+ * Used by AngularGridAdapter to retrieve templates at render time.
+ */
+function getDetailTemplate(gridElement) {
+    // Look for tbw-grid-detail child and get its template
+    const detailElement = gridElement.querySelector('tbw-grid-detail');
+    if (detailElement) {
+        return detailTemplateRegistry.get(detailElement);
+    }
+    return undefined;
+}
+/**
+ * Directive that captures an `<ng-template>` for use as a master-detail row renderer.
+ *
+ * This enables declarative Angular component usage for expandable detail rows
+ * that appear below the main row when expanded.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <tbw-grid [rows]="rows" [gridConfig]="config">
+ *   <tbw-grid-detail [showExpandColumn]="true" animation="slide">
+ *     <ng-template let-row>
+ *       <app-detail-panel [employee]="row" />
+ *     </ng-template>
+ *   </tbw-grid-detail>
+ * </tbw-grid>
+ * ```
+ *
+ * The template context provides:
+ * - `$implicit` / `row`: The full row data object
+ *
+ * Import the directive from the master-detail feature entry:
+ *
+ * ```typescript
+ * import { GridDetailView } from '@toolbox-web/grid-angular/features/master-detail';
+ *
+ * @Component({
+ *   imports: [GridDetailView],
+ *   // ...
+ * })
+ * ```
+ *
+ * > Note: `GridDetailView` is also re-exported from `@toolbox-web/grid-angular`
+ * > for backwards compatibility, but that re-export is deprecated and will be
+ * > removed in v2.0.0. Always import from the feature entry.
+ *
+ * @example
+ * ```html
+ * <tbw-grid [rows]="rows" [gridConfig]="config">
+ *   <tbw-grid-detail [showExpandColumn]="true" animation="slide">
+ *     <ng-template let-row>
+ *       <app-detail-panel [employee]="row" />
+ *     </ng-template>
+ *   </tbw-grid-detail>
+ * </tbw-grid>
+ * ```
+ *
+ * @category Directive
+ */
+class GridDetailView {
+    elementRef = inject((ElementRef));
+    /** Whether to show the expand/collapse column. Default: true */
+    showExpandColumn = input(true, ...(ngDevMode ? [{ debugName: "showExpandColumn" }] : /* istanbul ignore next */ []));
+    /** Animation style for expand/collapse. Default: 'slide' */
+    animation = input('slide', ...(ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []));
+    /**
+     * Query for the ng-template content child.
+     */
+    template = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+    /** Effect that triggers when the template is available */
+    onTemplateReceived = effect(() => {
+        const template = this.template();
+        if (template) {
+            // Register the template for this element
+            detailTemplateRegistry.set(this.elementRef.nativeElement, template);
+        }
+    }, ...(ngDevMode ? [{ debugName: "onTemplateReceived" }] : /* istanbul ignore next */ []));
+    /**
+     * Static type guard for template context.
+     * Enables type inference in templates.
+     */
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridDetailView, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.5", type: GridDetailView, isStandalone: true, selector: "tbw-grid-detail", inputs: { showExpandColumn: { classPropertyName: "showExpandColumn", publicName: "showExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null } }, 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: GridDetailView, decorators: [{
+            type: Directive,
+            args: [{ selector: 'tbw-grid-detail' }]
+        }], propDecorators: { showExpandColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpandColumn", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
 /**
  * Directive that registers `<tbw-grid-header>` as a known Angular element.
  *
@@ -4132,6 +4055,13 @@ function getLazyFormContext(gridElement) {
  *
  * @see GridFormArray For small datasets with full upfront validation
  * @category Directive
+ *
+ * MOVE-IN-V2: this directive (and its `LazyFormFactory`, `RowFormChangeEvent`
+ * types and `getLazyFormContext` helper) will physically move into
+ * `@toolbox-web/grid-angular/features/editing` in v2.0.0; the deprecated
+ * re-exports from the main `@toolbox-web/grid-angular` entry will be removed
+ * at the same time. Consumers should already be importing from the feature
+ * entry.
  */
 class GridLazyForm {
     elementRef = inject((ElementRef));
@@ -4517,15 +4447,119 @@ class GridLazyForm {
         }
         return true;
     }
-    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: "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 });
+}
+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"] }] } });
+
+/**
+ * Registry to store responsive card templates by grid element.
+ * Used by AngularGridAdapter to create card renderers.
+ */
+const responsiveCardTemplateRegistry = new Map();
+/**
+ * Retrieves the responsive card template for a grid element.
+ *
+ * @param gridElement - The grid element to look up
+ * @returns The template reference or undefined if not found
+ */
+function getResponsiveCardTemplate(gridElement) {
+    // Find the tbw-grid-responsive-card element inside the grid
+    const cardElement = gridElement.querySelector('tbw-grid-responsive-card');
+    if (!cardElement)
+        return undefined;
+    return responsiveCardTemplateRegistry.get(cardElement);
+}
+/**
+ * Directive for providing custom Angular templates for responsive card layout.
+ *
+ * Use this directive to define how each row should render when the grid
+ * is in responsive/mobile mode. The template receives the row data and index.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <tbw-grid [rows]="employees">
+ *   <tbw-grid-responsive-card>
+ *     <ng-template let-employee let-idx="index">
+ *       <div class="employee-card">
+ *         <img [src]="employee.avatar" alt="">
+ *         <div class="info">
+ *           <strong>{{ employee.name }}</strong>
+ *           <span>{{ employee.department }}</span>
+ *         </div>
+ *       </div>
+ *     </ng-template>
+ *   </tbw-grid-responsive-card>
+ * </tbw-grid>
+ * ```
+ *
+ * ## Important Notes
+ *
+ * - The ResponsivePlugin must be added to your grid config
+ * - The Grid directive will automatically configure the plugin's cardRenderer
+ * - Template context provides `$implicit` (row), `row`, and `index`
+ *
+ * @see ResponsivePlugin
+ * @category Directive
+ */
+class GridResponsiveCard {
+    elementRef = inject((ElementRef));
+    /**
+     * Card row height in pixels. Use `'auto'` for dynamic height based on content.
+     *
+     * Mirrors to the `card-row-height` attribute on the underlying
+     * `<tbw-grid-responsive-card>` element which the ResponsivePlugin reads.
+     *
+     * @default 'auto'
+     */
+    cardRowHeight = input(...(ngDevMode ? [undefined, { debugName: "cardRowHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * The ng-template containing the card content.
+     */
+    template = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+    /**
+     * Effect that registers the template when it becomes available.
+     */
+    onTemplateReceived = effect(() => {
+        const template = this.template();
+        if (template) {
+            responsiveCardTemplateRegistry.set(this.elementRef.nativeElement, template);
+        }
+    }, ...(ngDevMode ? [{ debugName: "onTemplateReceived" }] : /* istanbul ignore next */ []));
+    /**
+     * Effect that mirrors the `cardRowHeight` input to the kebab-cased attribute
+     * read by the ResponsivePlugin.
+     */
+    onCardRowHeightChange = effect(() => {
+        const value = this.cardRowHeight();
+        const element = this.elementRef.nativeElement;
+        if (value === undefined) {
+            element.removeAttribute('card-row-height');
+            return;
+        }
+        element.setAttribute('card-row-height', value === 'auto' ? 'auto' : String(value));
+    }, ...(ngDevMode ? [{ debugName: "onCardRowHeightChange" }] : /* istanbul ignore next */ []));
+    /**
+     * Type guard for template context inference.
+     */
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridResponsiveCard, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.5", type: GridResponsiveCard, isStandalone: true, selector: "tbw-grid-responsive-card", inputs: { cardRowHeight: { classPropertyName: "cardRowHeight", publicName: "cardRowHeight", isSignal: true, isRequired: false, transformFunction: null } }, 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: GridLazyForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridResponsiveCard, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'tbw-grid[lazyForm]',
+                    selector: 'tbw-grid-responsive-card',
                 }]
-        }], 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"] }] } });
+        }], propDecorators: { cardRowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardRowHeight", required: false }] }], template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 /**
  * Directive that registers `<tbw-grid-tool-buttons>` as a known Angular element.
@@ -4566,6 +4600,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }] });
 
+/** Capitalize the first letter of a string for header generation. */
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+/**
+ * Generate a human-readable header from a field name.
+ *
+ * Handles camelCase, snake_case, and kebab-case.
+ *
+ * @example
+ * generateHeader('firstName') → 'First Name'
+ * generateHeader('last_name') → 'Last Name'
+ * generateHeader('email-address') → 'Email Address'
+ * generateHeader('id') → 'ID' (special case)
+ */
+function generateHeader(field) {
+    if (field.toLowerCase() === 'id')
+        return 'ID';
+    const words = field
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .replace(/[_-]/g, ' ')
+        .split(' ')
+        .filter(Boolean);
+    return words.map(capitalize).join(' ');
+}
+/** Valid column types from the shorthand notation. */
+const VALID_TYPES = new Set(['string', 'number', 'boolean', 'date', 'datetime', 'currency']);
+/**
+ * Parse a column shorthand string into a ColumnConfig.
+ *
+ * Supports formats:
+ * - `'fieldName'` → `{ field: 'fieldName', header: 'Field Name' }`
+ * - `'fieldName:type'` → `{ field: 'fieldName', header: 'Field Name', type: 'type' }`
+ *
+ * @param shorthand - The shorthand string (e.g., 'name', 'salary:number')
+ * @returns A ColumnConfig object
+ */
+function parseColumnShorthand(shorthand) {
+    const colonIndex = shorthand.lastIndexOf(':');
+    if (colonIndex > 0) {
+        const potentialType = shorthand.slice(colonIndex + 1).toLowerCase();
+        if (VALID_TYPES.has(potentialType)) {
+            const field = shorthand.slice(0, colonIndex);
+            return {
+                field: field,
+                header: generateHeader(field),
+                type: potentialType,
+            };
+        }
+    }
+    return {
+        field: shorthand,
+        header: generateHeader(shorthand),
+    };
+}
+/**
+ * Normalize an array of column shorthands to ColumnConfig objects.
+ *
+ * @param columns - Array of column shorthands (strings or ColumnConfig objects)
+ * @returns Array of ColumnConfig objects
+ */
+function normalizeColumns(columns) {
+    return columns.map((col) => (typeof col === 'string' ? parseColumnShorthand(col) : col));
+}
+/**
+ * Apply column defaults to a list of columns. Individual column properties
+ * override defaults.
+ */
+function applyColumnDefaults(columns, defaults) {
+    if (!defaults)
+        return columns;
+    return columns.map((col) => ({ ...defaults, ...col }));
+}
+/** Check if an array of columns contains any shorthand strings. */
+function hasColumnShorthands(columns) {
+    return columns.some((col) => typeof col === 'string');
+}
+
+/** Per-element map of claimed feature names → config getter. */
+const featureClaims = new WeakMap();
+/** Per-element set of claimed event names (matches `keyof DataGridEventMap`). */
+const eventClaims = new WeakMap();
+/**
+ * Register a feature claim. Called by a feature directive's constructor;
+ * the {@link Grid} directive will then use {@link getFeatureClaim} during
+ * plugin creation instead of reading its own deprecated input.
+ * @internal
+ */
+function registerFeatureClaim(grid, name, getConfig) {
+    let map = featureClaims.get(grid);
+    if (!map) {
+        map = new Map();
+        featureClaims.set(grid, map);
+    }
+    map.set(name, getConfig);
+}
+/**
+ * Look up a feature claim. Returns the registered config getter, or
+ * `undefined` if no directive owns this feature on this element.
+ * @internal
+ */
+function getFeatureClaim(grid, name) {
+    return featureClaims.get(grid)?.get(name);
+}
+/**
+ * Drop a feature claim. Called by a feature directive's `ngOnDestroy` so
+ * that, if the directive is removed (e.g. via `*ngIf`) but the host
+ * `<tbw-grid>` survives, {@link Grid}'s deprecated input takes back over.
+ * @internal
+ */
+function unregisterFeatureClaim(grid, name) {
+    featureClaims.get(grid)?.delete(name);
+}
+/**
+ * Mark an event as owned by a feature directive. {@link Grid}'s
+ * `setupEventListeners` skips wiring its own deprecated `output()` for any
+ * claimed event — the directive owns the listener and the emit.
+ * @internal
+ */
+function claimEvent(grid, eventName) {
+    let set = eventClaims.get(grid);
+    if (!set) {
+        set = new Set();
+        eventClaims.set(grid, set);
+    }
+    set.add(eventName);
+}
+/**
+ * Returns true if a directive has claimed this event on this grid element.
+ * @internal
+ */
+function isEventClaimed(grid, eventName) {
+    return eventClaims.get(grid)?.has(eventName) ?? false;
+}
+/**
+ * Drop an event claim. Pair with {@link claimEvent} in a directive's
+ * `ngOnDestroy`.
+ * @internal
+ */
+function unclaimEvent(grid, eventName) {
+    eventClaims.get(grid)?.delete(eventName);
+}
+
 /**
  * Directive that automatically registers the Angular adapter with tbw-grid elements.
  *
@@ -4683,13 +4860,25 @@ class Grid {
             if (columnsValue === undefined)
                 return;
             const grid = this.elementRef.nativeElement;
+            // First normalize any shorthand strings to ColumnConfig objects, then
+            // merge in any per-grid column defaults. Individual column props always win.
+            // Note: Angular ColumnConfig allows component classes for renderer/editor,
+            // which the adapter normalizes via processColumn below; we widen to `any`
+            // here so the shorthand helpers (typed against the core ColumnConfig) accept
+            // the Angular-flavoured payload unchanged.
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const normalized = applyColumnDefaults(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            normalizeColumns(columnsValue), 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.columnDefaults());
             // Process columns through the adapter to convert Angular component classes
             // (renderer/editor) to functions — the grid's columns setter does NOT call
             // processConfig, unlike gridConfig. Without this, raw component classes
             // would be invoked without `new`, causing runtime errors.
             const processed = this.adapter
-                ? columnsValue.map((col) => this.adapter.processColumn(col))
-                : columnsValue;
+                ? normalized.map((col) => this.adapter.processColumn(col))
+                : normalized;
             grid.columns = processed;
         });
         // Effect to sync fitMode to the grid element
@@ -4824,21 +5013,35 @@ class Grid {
     /**
      * Column configuration array.
      *
+     * Accepts either full `ColumnConfig` objects or shorthand strings such as
+     * `'name'` or `'salary:number'`. Shorthands auto-generate human-readable
+     * headers from the field name.
+     *
      * Shorthand for setting columns without wrapping them in a full `gridConfig`.
      * If both `columns` and `gridConfig.columns` are set, `columns` takes precedence
      * (see configuration precedence system).
      *
      * @example
      * ```html
-     * <tbw-grid [rows]="data" [columns]="[
-     *   { field: 'id', header: 'ID', pinned: 'left', width: 80 },
-     *   { field: 'name', header: 'Name' },
-     *   { field: 'email', header: 'Email' }
-     * ]" />
+     * <tbw-grid [rows]="data" [columns]="['id:number', 'name', { field: 'status', editable: true }]" />
      * ```
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     columns = input(...(ngDevMode ? [undefined, { debugName: "columns" }] : /* istanbul ignore next */ []));
+    /**
+     * Default column properties applied to every column in `columns`.
+     * Individual column properties override these defaults.
+     *
+     * @example
+     * ```html
+     * <tbw-grid
+     *   [columnDefaults]="{ sortable: true, resizable: true }"
+     *   [columns]="[{ field: 'id', sortable: false }, { field: 'name' }]"
+     * />
+     * ```
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    columnDefaults = input(...(ngDevMode ? [undefined, { debugName: "columnDefaults" }] : /* istanbul ignore next */ []));
     /**
      * Column sizing strategy.
      *
@@ -4912,6 +5115,9 @@ class Grid {
      * <!-- Full config object -->
      * <tbw-grid [selection]="{ mode: 'range', checkbox: true }" />
      * ```
+     *
+     * @deprecated Use `GridSelectionDirective` from
+     * `@toolbox-web/grid-angular/features/selection`. Will be removed in v2.0.0.
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     selection = input(...(ngDevMode ? [undefined, { debugName: "selection" }] : /* istanbul ignore next */ []));
@@ -4936,6 +5142,9 @@ class Grid {
      * <!-- Full config with callbacks -->
      * <tbw-grid [editing]="{ editOn: 'dblclick', onBeforeEditClose: myCallback }" />
      * ```
+     *
+     * @deprecated Use `GridEditingDirective` from
+     * `@toolbox-web/grid-angular/features/editing`. Will be removed in v2.0.0.
      */
     editing = input(...(ngDevMode ? [undefined, { debugName: "editing" }] : /* istanbul ignore next */ []));
     /**
@@ -4950,6 +5159,9 @@ class Grid {
      * ```html
      * <tbw-grid [selection]="'range'" [clipboard]="true" />
      * ```
+     *
+     * @deprecated Use `GridClipboardDirective` from
+     * `@toolbox-web/grid-angular/features/clipboard`. Will be removed in v2.0.0.
      */
     clipboard = input(...(ngDevMode ? [undefined, { debugName: "clipboard" }] : /* istanbul ignore next */ []));
     /**
@@ -4964,6 +5176,9 @@ class Grid {
      * ```html
      * <tbw-grid [contextMenu]="true" />
      * ```
+     *
+     * @deprecated Use `GridContextMenuDirective` from
+     * `@toolbox-web/grid-angular/features/context-menu`. Will be removed in v2.0.0.
      */
     contextMenu = input(...(ngDevMode ? [undefined, { debugName: "contextMenu" }] : /* istanbul ignore next */ []));
     /**
@@ -4988,6 +5203,9 @@ class Grid {
      * <!-- Full config -->
      * <tbw-grid [multiSort]="{ maxSortColumns: 3 }" />
      * ```
+     *
+     * @deprecated Use `GridMultiSortDirective` from
+     * `@toolbox-web/grid-angular/features/multi-sort`. Will be removed in v2.0.0.
      */
     multiSort = input(...(ngDevMode ? [undefined, { debugName: "multiSort" }] : /* istanbul ignore next */ []));
     /**
@@ -5003,6 +5221,13 @@ class Grid {
      * <tbw-grid [filtering]="true" />
      * <tbw-grid [filtering]="{ debounceMs: 200 }" />
      * ```
+     *
+     * @deprecated Use `GridFilteringDirective` from
+     * `@toolbox-web/grid-angular/features/filtering` and add it to your
+     * component's `imports`. The directive owns the `filtering` input + the
+     * `filterChange` output and lets the typed surface tree-shake away when
+     * the feature is not imported. This input remains as a non-breaking shim
+     * and will be removed in v2.0.0.
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     filtering = input(...(ngDevMode ? [undefined, { debugName: "filtering" }] : /* istanbul ignore next */ []));
@@ -5018,6 +5243,9 @@ class Grid {
      * ```html
      * <tbw-grid [reorderColumns]="true" />
      * ```
+     *
+     * @deprecated Use `GridReorderColumnsDirective` from
+     * `@toolbox-web/grid-angular/features/reorder-columns`. Will be removed in v2.0.0.
      */
     reorderColumns = input(...(ngDevMode ? [undefined, { debugName: "reorderColumns" }] : /* istanbul ignore next */ []));
     /**
@@ -5032,6 +5260,9 @@ class Grid {
      * ```html
      * <tbw-grid [visibility]="true" />
      * ```
+     *
+     * @deprecated Use `GridVisibilityDirective` from
+     * `@toolbox-web/grid-angular/features/visibility`. Will be removed in v2.0.0.
      */
     visibility = input(...(ngDevMode ? [undefined, { debugName: "visibility" }] : /* istanbul ignore next */ []));
     /**
@@ -5051,6 +5282,9 @@ class Grid {
      *   { field: 'actions', pinned: 'right' }
      * ]" />
      * ```
+     *
+     * @deprecated Use `GridPinnedColumnsDirective` from
+     * `@toolbox-web/grid-angular/features/pinned-columns`. Will be removed in v2.0.0.
      */
     pinnedColumns = input(...(ngDevMode ? [undefined, { debugName: "pinnedColumns" }] : /* istanbul ignore next */ []));
     /**
@@ -5065,6 +5299,9 @@ class Grid {
      * ```html
      * <tbw-grid [groupingColumns]="true" />
      * ```
+     *
+     * @deprecated Use `GridGroupingColumnsDirective` from
+     * `@toolbox-web/grid-angular/features/grouping-columns`. Will be removed in v2.0.0.
      */
     groupingColumns = input(...(ngDevMode ? [undefined, { debugName: "groupingColumns" }] : /* istanbul ignore next */ []));
     /**
@@ -5079,6 +5316,9 @@ class Grid {
      * ```html
      * <tbw-grid [columnVirtualization]="true" />
      * ```
+     *
+     * @deprecated Use `GridColumnVirtualizationDirective` from
+     * `@toolbox-web/grid-angular/features/column-virtualization`. Will be removed in v2.0.0.
      */
     columnVirtualization = input(...(ngDevMode ? [undefined, { debugName: "columnVirtualization" }] : /* istanbul ignore next */ []));
     /**
@@ -5104,6 +5344,9 @@ class Grid {
      * ```html
      * <tbw-grid [rowDragDrop]="{ dropZone: 'employees', operation: 'move' }" />
      * ```
+     *
+     * @deprecated Use `GridRowDragDropDirective` from
+     * `@toolbox-web/grid-angular/features/row-drag-drop`. Will be removed in v2.0.0.
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     rowDragDrop = input(...(ngDevMode ? [undefined, { debugName: "rowDragDrop" }] : /* istanbul ignore next */ []));
@@ -5119,6 +5362,9 @@ class Grid {
      * ```html
      * <tbw-grid [groupingRows]="{ groupBy: ['department'] }" />
      * ```
+     *
+     * @deprecated Use `GridGroupingRowsDirective` from
+     * `@toolbox-web/grid-angular/features/grouping-rows`. Will be removed in v2.0.0.
      */
     groupingRows = input(...(ngDevMode ? [undefined, { debugName: "groupingRows" }] : /* istanbul ignore next */ []));
     /**
@@ -5133,6 +5379,9 @@ class Grid {
      * ```html
      * <tbw-grid [pinnedRows]="{ bottom: [{ type: 'aggregation' }] }" />
      * ```
+     *
+     * @deprecated Use `GridPinnedRowsDirective` from
+     * `@toolbox-web/grid-angular/features/pinned-rows`. Will be removed in v2.0.0.
      */
     pinnedRows = input(...(ngDevMode ? [undefined, { debugName: "pinnedRows" }] : /* istanbul ignore next */ []));
     /**
@@ -5147,6 +5396,9 @@ class Grid {
      * ```html
      * <tbw-grid [tree]="{ childrenField: 'children' }" />
      * ```
+     *
+     * @deprecated Use `GridTreeDirective` from
+     * `@toolbox-web/grid-angular/features/tree`. Will be removed in v2.0.0.
      */
     tree = input(...(ngDevMode ? [undefined, { debugName: "tree" }] : /* istanbul ignore next */ []));
     /**
@@ -5161,6 +5413,9 @@ class Grid {
      * ```html
      * <tbw-grid [masterDetail]="{ detailRenderer: detailFn }" />
      * ```
+     *
+     * @deprecated Use `GridMasterDetailDirective` from
+     * `@toolbox-web/grid-angular/features/master-detail`. Will be removed in v2.0.0.
      */
     masterDetail = input(...(ngDevMode ? [undefined, { debugName: "masterDetail" }] : /* istanbul ignore next */ []));
     /**
@@ -5175,6 +5430,9 @@ class Grid {
      * ```html
      * <tbw-grid [responsive]="{ breakpoint: 768 }" />
      * ```
+     *
+     * @deprecated Use `GridResponsiveDirective` from
+     * `@toolbox-web/grid-angular/features/responsive`. Will be removed in v2.0.0.
      */
     responsive = input(...(ngDevMode ? [undefined, { debugName: "responsive" }] : /* istanbul ignore next */ []));
     /**
@@ -5189,6 +5447,9 @@ class Grid {
      * ```html
      * <tbw-grid [editing]="'dblclick'" [undoRedo]="true" />
      * ```
+     *
+     * @deprecated Use `GridUndoRedoDirective` from
+     * `@toolbox-web/grid-angular/features/undo-redo`. Will be removed in v2.0.0.
      */
     undoRedo = input(...(ngDevMode ? [undefined, { debugName: "undoRedo" }] : /* istanbul ignore next */ []));
     /**
@@ -5204,6 +5465,9 @@ class Grid {
      * <tbw-grid [export]="true" />
      * <tbw-grid [export]="{ filename: 'data.csv' }" />
      * ```
+     *
+     * @deprecated Use `GridExportDirective` from
+     * `@toolbox-web/grid-angular/features/export`. Will be removed in v2.0.0.
      */
     exportFeature = input(undefined, { ...(ngDevMode ? { debugName: "exportFeature" } : /* istanbul ignore next */ {}), alias: 'export' });
     /**
@@ -5218,6 +5482,9 @@ class Grid {
      * ```html
      * <tbw-grid [print]="true" />
      * ```
+     *
+     * @deprecated Use `GridPrintDirective` from
+     * `@toolbox-web/grid-angular/features/print`. Will be removed in v2.0.0.
      */
     print = input(...(ngDevMode ? [undefined, { debugName: "print" }] : /* istanbul ignore next */ []));
     /**
@@ -5232,6 +5499,9 @@ class Grid {
      * ```html
      * <tbw-grid [pivot]="{ rowFields: ['category'], valueField: 'sales' }" />
      * ```
+     *
+     * @deprecated Use `GridPivotDirective` from
+     * `@toolbox-web/grid-angular/features/pivot`. Will be removed in v2.0.0.
      */
     pivot = input(...(ngDevMode ? [undefined, { debugName: "pivot" }] : /* istanbul ignore next */ []));
     /**
@@ -5246,6 +5516,9 @@ class Grid {
      * ```html
      * <tbw-grid [serverSide]="{ dataSource: fetchDataFn }" />
      * ```
+     *
+     * @deprecated Use `GridServerSideDirective` from
+     * `@toolbox-web/grid-angular/features/server-side`. Will be removed in v2.0.0.
      */
     serverSide = input(...(ngDevMode ? [undefined, { debugName: "serverSide" }] : /* istanbul ignore next */ []));
     /**
@@ -5256,6 +5529,9 @@ class Grid {
      * <tbw-grid [tooltip]="true" />
      * <tbw-grid [tooltip]="{ header: true, cell: false }" />
      * ```
+     *
+     * @deprecated Use `GridTooltipDirective` from
+     * `@toolbox-web/grid-angular/features/tooltip`. Will be removed in v2.0.0.
      */
     tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
     // ═══════════════════════════════════════════════════════════════════════════
@@ -5315,8 +5591,85 @@ class Grid {
      *   console.log(`Changed ${event.field} to ${event.value} in row ${event.rowIndex}`);
      * }
      * ```
+     *
+     * @deprecated Use `GridEditingDirective` from
+     * `@toolbox-web/grid-angular/features/editing`. Will be removed in v2.0.0.
      */
     cellCommit = output();
+    /**
+     * Emitted when a cell edit is cancelled (Escape, click outside without
+     * commit, or `editor.cancel()`).
+     *
+     * @example
+     * ```html
+     * <tbw-grid (cellCancel)="onCellCancel($event)">...</tbw-grid>
+     * ```
+     *
+     * @deprecated Use `GridEditingDirective` from
+     * `@toolbox-web/grid-angular/features/editing`. Will be removed in v2.0.0.
+     */
+    cellCancel = output();
+    /**
+     * Emitted when a cell editor opens.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (editOpen)="onEditOpen($event)">...</tbw-grid>
+     * ```
+     *
+     * @deprecated Use `GridEditingDirective` from
+     * `@toolbox-web/grid-angular/features/editing`. Will be removed in v2.0.0.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    editOpen = output();
+    /**
+     * Emitted before an editor closes. Useful for last-chance validation.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (beforeEditClose)="onBeforeEditClose($event)">...</tbw-grid>
+     * ```
+     *
+     * @deprecated Use `GridEditingDirective` from
+     * `@toolbox-web/grid-angular/features/editing`. Will be removed in v2.0.0.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    beforeEditClose = output();
+    /**
+     * Emitted after an editor closes (whether committed or cancelled).
+     *
+     * @example
+     * ```html
+     * <tbw-grid (editClose)="onEditClose($event)">...</tbw-grid>
+     * ```
+     *
+     * @deprecated Use `GridEditingDirective` from
+     * `@toolbox-web/grid-angular/features/editing`. Will be removed in v2.0.0.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    editClose = output();
+    /**
+     * Emitted when the dirty / changed-rows state transitions.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (dirtyChange)="onDirtyChange($event)">...</tbw-grid>
+     * ```
+     *
+     * @deprecated Use `GridEditingDirective` from
+     * `@toolbox-web/grid-angular/features/editing`. Will be removed in v2.0.0.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    dirtyChange = output();
+    /**
+     * Emitted when row data is replaced (e.g. via the `rows` setter).
+     *
+     * @example
+     * ```html
+     * <tbw-grid (dataChange)="onDataChange($event)">...</tbw-grid>
+     * ```
+     */
+    dataChange = output();
     /**
      * Emitted when a row's values are committed (bulk/row editing).
      * Provides the row data and change tracking information.
@@ -5325,6 +5678,9 @@ class Grid {
      * ```html
      * <tbw-grid (rowCommit)="onRowCommit($event)">...</tbw-grid>
      * ```
+     *
+     * @deprecated Use `GridEditingDirective` from
+     * `@toolbox-web/grid-angular/features/editing`. Will be removed in v2.0.0.
      */
     rowCommit = output();
     /**
@@ -5334,6 +5690,9 @@ class Grid {
      * ```html
      * <tbw-grid (changedRowsReset)="onChangedRowsReset($event)">...</tbw-grid>
      * ```
+     *
+     * @deprecated Use `GridEditingDirective` from
+     * `@toolbox-web/grid-angular/features/editing`. Will be removed in v2.0.0.
      */
     changedRowsReset = output();
     /**
@@ -5352,6 +5711,11 @@ class Grid {
      * ```html
      * <tbw-grid (filterChange)="onFilterChange($event)">...</tbw-grid>
      * ```
+     *
+     * @deprecated Use `GridFilteringDirective` from
+     * `@toolbox-web/grid-angular/features/filtering` (the directive
+     * declares the `(filterChange)` output). This output remains as a
+     * non-breaking shim and will be removed in v2.0.0.
      */
     filterChange = output();
     /**
@@ -5363,6 +5727,15 @@ class Grid {
      * ```
      */
     columnResize = output();
+    /**
+     * Emitted when a column's width is reset (double-click on the resize handle).
+     *
+     * @example
+     * ```html
+     * <tbw-grid (columnResizeReset)="onColumnResizeReset($event)">...</tbw-grid>
+     * ```
+     */
+    columnResizeReset = output();
     /**
      * Emitted when a column is moved via drag-and-drop.
      *
@@ -5370,15 +5743,23 @@ class Grid {
      * ```html
      * <tbw-grid (columnMove)="onColumnMove($event)">...</tbw-grid>
      * ```
+     *
+     * @deprecated Use `GridReorderColumnsDirective` from
+     * `@toolbox-web/grid-angular/features/reorder-columns`. Will be removed in v2.0.0.
      */
     columnMove = output();
     /**
-     * Emitted when column visibility changes.
+     * Emitted when a column is shown or hidden — either via the visibility
+     * sidebar, `grid.toggleColumnVisibility(field)`, `grid.setColumnVisible(field, visible)`,
+     * or `grid.showAllColumns()`.
      *
      * @example
      * ```html
      * <tbw-grid (columnVisibility)="onColumnVisibility($event)">...</tbw-grid>
      * ```
+     *
+     * @deprecated Use `GridVisibilityDirective` from
+     * `@toolbox-web/grid-angular/features/visibility`. Will be removed in v2.0.0.
      */
     columnVisibility = output();
     /**
@@ -5397,6 +5778,9 @@ class Grid {
      * ```html
      * <tbw-grid (selectionChange)="onSelectionChange($event)">...</tbw-grid>
      * ```
+     *
+     * @deprecated Use `GridSelectionDirective` from
+     * `@toolbox-web/grid-angular/features/selection`. Will be removed in v2.0.0.
      */
     selectionChange = output();
     /**
@@ -5406,6 +5790,9 @@ class Grid {
      * ```html
      * <tbw-grid (rowMove)="onRowMove($event)">...</tbw-grid>
      * ```
+     *
+     * @deprecated Use `GridRowDragDropDirective` from
+     * `@toolbox-web/grid-angular/features/row-drag-drop`. Will be removed in v2.0.0.
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     rowMove = output();
@@ -5416,23 +5803,35 @@ class Grid {
      * ```html
      * <tbw-grid (rowDragStart)="onRowDragStart($event)">...</tbw-grid>
      * ```
+     *
+     * @deprecated Use `GridRowDragDropDirective` from
+     * `@toolbox-web/grid-angular/features/row-drag-drop`. Will be removed in v2.0.0.
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     rowDragStart = output();
     /**
      * Emitted when a row drag ends (after drop or cancel).
+     *
+     * @deprecated Use `GridRowDragDropDirective` from
+     * `@toolbox-web/grid-angular/features/row-drag-drop`. Will be removed in v2.0.0.
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     rowDragEnd = output();
     /**
      * Emitted on the target grid when rows are dropped from another grid.
      * Cancelable via `event.preventDefault()`.
+     *
+     * @deprecated Use `GridRowDragDropDirective` from
+     * `@toolbox-web/grid-angular/features/row-drag-drop`. Will be removed in v2.0.0.
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     rowDrop = output();
     /**
      * Emitted on BOTH source and target grids after a successful cross-grid
      * row transfer.
+     *
+     * @deprecated Use `GridRowDragDropDirective` from
+     * `@toolbox-web/grid-angular/features/row-drag-drop`. Will be removed in v2.0.0.
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     rowTransfer = output();
@@ -5443,8 +5842,35 @@ class Grid {
      * ```html
      * <tbw-grid (groupToggle)="onGroupToggle($event)">...</tbw-grid>
      * ```
+     *
+     * @deprecated Use `GridGroupingRowsDirective` from
+     * `@toolbox-web/grid-angular/features/grouping-rows`. Will be removed in v2.0.0.
      */
     groupToggle = output();
+    /**
+     * Emitted when a group is expanded.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (groupExpand)="onGroupExpand($event)">...</tbw-grid>
+     * ```
+     *
+     * @deprecated Use `GridGroupingRowsDirective` from
+     * `@toolbox-web/grid-angular/features/grouping-rows`. Will be removed in v2.0.0.
+     */
+    groupExpand = output();
+    /**
+     * Emitted when a group is collapsed.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (groupCollapse)="onGroupCollapse($event)">...</tbw-grid>
+     * ```
+     *
+     * @deprecated Use `GridGroupingRowsDirective` from
+     * `@toolbox-web/grid-angular/features/grouping-rows`. Will be removed in v2.0.0.
+     */
+    groupCollapse = output();
     /**
      * Emitted when a tree node is expanded.
      *
@@ -5452,6 +5878,9 @@ class Grid {
      * ```html
      * <tbw-grid (treeExpand)="onTreeExpand($event)">...</tbw-grid>
      * ```
+     *
+     * @deprecated Use `GridTreeDirective` from
+     * `@toolbox-web/grid-angular/features/tree`. Will be removed in v2.0.0.
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     treeExpand = output();
@@ -5462,6 +5891,9 @@ class Grid {
      * ```html
      * <tbw-grid (detailExpand)="onDetailExpand($event)">...</tbw-grid>
      * ```
+     *
+     * @deprecated Use `GridMasterDetailDirective` from
+     * `@toolbox-web/grid-angular/features/master-detail`. Will be removed in v2.0.0.
      */
     detailExpand = output();
     /**
@@ -5471,8 +5903,23 @@ class Grid {
      * ```html
      * <tbw-grid (responsiveChange)="onResponsiveChange($event)">...</tbw-grid>
      * ```
+     *
+     * @deprecated Use `GridResponsiveDirective` from
+     * `@toolbox-web/grid-angular/features/responsive`. Will be removed in v2.0.0.
      */
     responsiveChange = output();
+    /**
+     * Emitted when the context menu opens.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (contextMenuOpen)="onContextMenuOpen($event)">...</tbw-grid>
+     * ```
+     *
+     * @deprecated Use `GridContextMenuDirective` from
+     * `@toolbox-web/grid-angular/features/context-menu`. Will be removed in v2.0.0.
+     */
+    contextMenuOpen = output();
     /**
      * Emitted when cells are copied to clipboard.
      *
@@ -5480,6 +5927,9 @@ class Grid {
      * ```html
      * <tbw-grid (copy)="onCopy($event)">...</tbw-grid>
      * ```
+     *
+     * @deprecated Use `GridClipboardDirective` from
+     * `@toolbox-web/grid-angular/features/clipboard`. Will be removed in v2.0.0.
      */
     copy = output();
     /**
@@ -5489,17 +5939,35 @@ class Grid {
      * ```html
      * <tbw-grid (paste)="onPaste($event)">...</tbw-grid>
      * ```
+     *
+     * @deprecated Use `GridClipboardDirective` from
+     * `@toolbox-web/grid-angular/features/clipboard`. Will be removed in v2.0.0.
      */
     paste = output();
     /**
-     * Emitted when undo/redo is performed.
+     * Emitted when an undo action is performed.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (undo)="onUndo($event)">...</tbw-grid>
+     * ```
+     *
+     * @deprecated Use `GridUndoRedoDirective` from
+     * `@toolbox-web/grid-angular/features/undo-redo`. Will be removed in v2.0.0.
+     */
+    undo = output();
+    /**
+     * Emitted when a redo action is performed.
      *
      * @example
      * ```html
-     * <tbw-grid (undoRedoAction)="onUndoRedo($event)">...</tbw-grid>
+     * <tbw-grid (redo)="onRedo($event)">...</tbw-grid>
      * ```
+     *
+     * @deprecated Use `GridUndoRedoDirective` from
+     * `@toolbox-web/grid-angular/features/undo-redo`. Will be removed in v2.0.0.
      */
-    undoRedoAction = output();
+    redo = output();
     /**
      * Emitted when export completes.
      *
@@ -5507,6 +5975,9 @@ class Grid {
      * ```html
      * <tbw-grid (exportComplete)="onExportComplete($event)">...</tbw-grid>
      * ```
+     *
+     * @deprecated Use `GridExportDirective` from
+     * `@toolbox-web/grid-angular/features/export`. Will be removed in v2.0.0.
      */
     exportComplete = output();
     /**
@@ -5516,6 +5987,9 @@ class Grid {
      * ```html
      * <tbw-grid (printStart)="onPrintStart($event)">...</tbw-grid>
      * ```
+     *
+     * @deprecated Use `GridPrintDirective` from
+     * `@toolbox-web/grid-angular/features/print`. Will be removed in v2.0.0.
      */
     printStart = output();
     /**
@@ -5525,6 +5999,9 @@ class Grid {
      * ```html
      * <tbw-grid (printComplete)="onPrintComplete($event)">...</tbw-grid>
      * ```
+     *
+     * @deprecated Use `GridPrintDirective` from
+     * `@toolbox-web/grid-angular/features/print`. Will be removed in v2.0.0.
      */
     printComplete = output();
     /**
@@ -5543,18 +6020,31 @@ class Grid {
      * ```
      */
     tbwScroll = output();
-    // Map of output names to event names for automatic wiring
+    // Map of output names to event names for automatic wiring.
+    //
+    // The `satisfies` clause enforces compile-time sync against
+    // `DataGridEventMap`: every value must be a real event name (typos and
+    // stale entries pointing at non-existent events fail to compile).
+    // Plugin event augmentations of `DataGridEventMap` flow through
+    // automatically via the `/all` import.
     eventOutputMap = {
         cellClick: 'cell-click',
         rowClick: 'row-click',
         cellActivate: 'cell-activate',
         cellChange: 'cell-change',
         cellCommit: 'cell-commit',
+        cellCancel: 'cell-cancel',
         rowCommit: 'row-commit',
         changedRowsReset: 'changed-rows-reset',
+        editOpen: 'edit-open',
+        beforeEditClose: 'before-edit-close',
+        editClose: 'edit-close',
+        dirtyChange: 'dirty-change',
+        dataChange: 'data-change',
         sortChange: 'sort-change',
         filterChange: 'filter-change',
         columnResize: 'column-resize',
+        columnResizeReset: 'column-resize-reset',
         columnMove: 'column-move',
         columnVisibility: 'column-visibility',
         columnStateChange: 'column-state-change',
@@ -5565,17 +6055,39 @@ class Grid {
         rowDrop: 'row-drop',
         rowTransfer: 'row-transfer',
         groupToggle: 'group-toggle',
+        groupExpand: 'group-expand',
+        groupCollapse: 'group-collapse',
         treeExpand: 'tree-expand',
         detailExpand: 'detail-expand',
         responsiveChange: 'responsive-change',
+        contextMenuOpen: 'context-menu-open',
         copy: 'copy',
         paste: 'paste',
-        undoRedoAction: 'undo-redo',
+        undo: 'undo',
+        redo: 'redo',
         exportComplete: 'export-complete',
         printStart: 'print-start',
         printComplete: 'print-complete',
         tbwScroll: 'tbw-scroll',
     };
+    // ─────────────────────────────────────────────────────────────────────────
+    // Forward-only event coverage guard.
+    //
+    // Mirrors the React adapter's `_AssertFeaturePropsCoverCore` pattern. If a
+    // new event is added to core's `DataGridEventMap` (via plugin module
+    // augmentation in `/all`) but no `eventOutputMap` entry covers it, this
+    // type fails to evaluate to `true` and the build breaks. Adapter consumers
+    // never see a silently-dropped event.
+    //
+    // Reverse direction (extra `eventOutputMap` entries pointing at non-existent
+    // events) is already enforced by the `satisfies` clause above.
+    //
+    // To consciously omit an event from the Angular surface, add it to the
+    // `IntentionallyOmittedEvents` union below with a comment explaining why.
+    // ─────────────────────────────────────────────────────────────────────────
+    /** Events deliberately not exposed as Angular outputs. Keep empty unless documented. */
+    _intentionallyOmittedEvents;
+    _assertEventOutputMapCoversCore;
     // Store event listeners for cleanup
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     eventListeners = new Map();
@@ -5594,10 +6106,18 @@ class Grid {
     }
     /**
      * Sets up event listeners for all outputs using the eventOutputMap.
+     *
+     * Hybrid v1.x / v2 ownership: events claimed by an attribute-selector
+     * feature directive (via `claimEvent` in `feature-claims.ts`) are skipped
+     * here so the directive's own `output()` is the sole emitter. Without
+     * this skip both this directive's deprecated output and the directive's
+     * new output would fire for the same DOM event.
      */
     setupEventListeners(grid) {
         // Wire up all event listeners
         for (const [outputName, eventName] of Object.entries(this.eventOutputMap)) {
+            if (isEventClaimed(grid, eventName))
+                continue;
             const listener = (e) => {
                 const detail = e.detail;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -5610,57 +6130,62 @@ class Grid {
     /**
      * Creates plugins from feature inputs.
      * Uses the feature registry to allow tree-shaking - only imported features are bundled.
+     * Per-feature config bridging (e.g. converting Angular component classes inside
+     * `groupingColumns` / `groupingRows` / `pinnedRows` configs to renderer functions)
+     * runs via `getFeatureConfigPreprocessor`, populated by feature secondary entries.
+     *
+     * Hybrid v1.x / v2 ownership: when an attribute-selector feature directive
+     * (e.g. `GridFilteringDirective`) is present on the same `<tbw-grid>`
+     * element it claims its feature in `feature-claims.ts`. We then read the
+     * claim's config getter — which transitively reads the directive's input
+     * signal, establishing reactive dependency tracking — instead of the
+     * deprecated input on this directive. This keeps the existing `[filtering]`
+     * binding working when used directly on `<tbw-grid>` (no directive, no
+     * claim) while letting the directive own the binding when imported.
+     *
      * Returns the array of created plugins (doesn't modify grid).
      */
     createFeaturePlugins() {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const plugins = [];
+        const adapter = this.adapter;
+        const grid = this.elementRef.nativeElement;
         // Helper to add plugin if feature is registered
-        const addPlugin = (name, config) => {
+        const addPlugin = (name, ownInput) => {
+            // Directive-owned config wins. Reading the claim's getter inside this
+            // effect registers the directive's input signal as a dependency, so
+            // changes to e.g. `[filtering]` on the directive re-trigger this effect.
+            const claim = getFeatureClaim(grid, name);
+            const config = claim ? claim() : ownInput;
             if (config === undefined || config === null || config === false)
                 return;
-            const plugin = createPluginFromFeature(name, config);
+            // Apply per-feature config preprocessor (registered by feature secondary entries)
+            // to bridge Angular component classes embedded in the config before instantiation.
+            let finalConfig = config;
+            if (adapter && config !== true && typeof config === 'object') {
+                const preprocess = getFeatureConfigPreprocessor(name);
+                if (preprocess)
+                    finalConfig = preprocess(config, adapter);
+            }
+            const plugin = createPluginFromFeature(name, finalConfig);
             if (plugin)
                 plugins.push(plugin);
         };
-        // Add plugins for each feature input
         addPlugin('selection', this.selection());
         addPlugin('editing', this.editing());
         addPlugin('clipboard', this.clipboard());
         addPlugin('contextMenu', this.contextMenu());
-        // multiSort is the primary input
         addPlugin('multiSort', this.multiSort());
         addPlugin('filtering', this.filtering());
         addPlugin('reorderColumns', this.reorderColumns());
         addPlugin('visibility', this.visibility());
         addPlugin('pinnedColumns', this.pinnedColumns());
-        // Pre-process groupingColumns config to bridge Angular component classes
-        const gcConfig = this.groupingColumns();
-        if (gcConfig && typeof gcConfig === 'object' && this.adapter) {
-            addPlugin('groupingColumns', this.adapter.processGroupingColumnsConfig(gcConfig));
-        }
-        else {
-            addPlugin('groupingColumns', gcConfig);
-        }
+        addPlugin('groupingColumns', this.groupingColumns());
         addPlugin('columnVirtualization', this.columnVirtualization());
         addPlugin('reorderRows', this.reorderRows());
         addPlugin('rowDragDrop', this.rowDragDrop());
-        // Pre-process groupingRows config to bridge Angular component classes
-        const grConfig = this.groupingRows();
-        if (grConfig && typeof grConfig === 'object' && this.adapter) {
-            addPlugin('groupingRows', this.adapter.processGroupingRowsConfig(grConfig));
-        }
-        else {
-            addPlugin('groupingRows', grConfig);
-        }
-        // Pre-process pinnedRows config to bridge Angular component classes in customPanels
-        const prConfig = this.pinnedRows();
-        if (prConfig && typeof prConfig === 'object' && this.adapter) {
-            addPlugin('pinnedRows', this.adapter.processPinnedRowsConfig(prConfig));
-        }
-        else {
-            addPlugin('pinnedRows', prConfig);
-        }
+        addPlugin('groupingRows', this.groupingRows());
+        addPlugin('pinnedRows', this.pinnedRows());
         addPlugin('tree', this.tree());
         addPlugin('masterDetail', this.masterDetail());
         addPlugin('responsive', this.responsive());
@@ -5680,10 +6205,13 @@ class Grid {
             // Use setTimeout to ensure Angular effects have run (template registration)
             setTimeout(() => {
                 grid.refreshColumns();
-                // Configure MasterDetailPlugin after Angular templates are registered
-                this.configureMasterDetail(grid);
-                // Configure ResponsivePlugin card renderer if template is present
-                this.configureResponsiveCard(grid);
+                // Run feature-registered template bridges. Each bridge wires a specific
+                // light-DOM slot element (<tbw-grid-detail>, <tbw-grid-responsive-card>, ...)
+                // to its plugin. Bridges are registered by feature secondary entries
+                // (e.g. `import '@toolbox-web/grid-angular/features/master-detail';`).
+                if (this.adapter) {
+                    runTemplateBridges({ grid, adapter: this.adapter });
+                }
                 // Refresh shell header to pick up tool panel templates
                 // This allows Angular templates to be used in tool panels
                 if (typeof grid.refreshShellHeader === 'function') {
@@ -5707,85 +6235,6 @@ class Grid {
             grid.registerStyles?.('angular-custom-styles', styles);
         });
     }
-    /**
-     * Configures the MasterDetailPlugin after Angular templates are registered.
-     * - If plugin exists: refresh its detail renderer
-     * - If plugin doesn't exist but <tbw-grid-detail> is present: dynamically import and add the plugin
-     */
-    async configureMasterDetail(grid) {
-        if (!this.adapter)
-            return;
-        // Check for existing plugin by name to avoid importing the class
-        const existingPlugin = grid.gridConfig?.plugins?.find((p) => p.name === 'masterDetail');
-        if (existingPlugin && typeof existingPlugin.refreshDetailRenderer === 'function') {
-            // Plugin exists - just refresh the renderer to pick up Angular templates
-            existingPlugin.refreshDetailRenderer();
-            return;
-        }
-        // Check if <tbw-grid-detail> is present in light DOM
-        const detailElement = grid.querySelector('tbw-grid-detail');
-        if (!detailElement)
-            return;
-        // Create detail renderer from Angular template
-        const detailRenderer = this.adapter.createDetailRenderer(grid);
-        if (!detailRenderer)
-            return;
-        // Parse configuration from attributes
-        const animationAttr = detailElement.getAttribute('animation');
-        let animation = 'slide';
-        if (animationAttr === 'false') {
-            animation = false;
-        }
-        else if (animationAttr === 'fade') {
-            animation = 'fade';
-        }
-        const showExpandColumn = detailElement.getAttribute('showExpandColumn') !== 'false';
-        // Dynamically import the plugin to avoid bundling it when not used
-        const { MasterDetailPlugin } = await import('@toolbox-web/grid/plugins/master-detail');
-        // Create and add the plugin
-        const plugin = new MasterDetailPlugin({
-            detailRenderer: detailRenderer,
-            showExpandColumn,
-            animation,
-        });
-        const currentConfig = grid.gridConfig || {};
-        const existingPlugins = currentConfig.plugins || [];
-        grid.gridConfig = {
-            ...currentConfig,
-            plugins: [...existingPlugins, plugin],
-        };
-    }
-    /**
-     * Configures the ResponsivePlugin with Angular template-based card renderer.
-     * - If plugin exists: updates its cardRenderer configuration
-     * - If plugin doesn't exist but <tbw-grid-responsive-card> is present: logs a warning
-     */
-    configureResponsiveCard(grid) {
-        if (!this.adapter)
-            return;
-        // Check if <tbw-grid-responsive-card> is present in light DOM
-        const cardElement = grid.querySelector('tbw-grid-responsive-card');
-        if (!cardElement)
-            return;
-        // Create card renderer from Angular template
-        const cardRenderer = this.adapter.createResponsiveCardRenderer(grid);
-        if (!cardRenderer)
-            return;
-        // Find existing plugin by name to avoid importing the class
-        const existingPlugin = grid.gridConfig?.plugins?.find((p) => p.name === 'responsive');
-        if (existingPlugin && typeof existingPlugin.setCardRenderer === 'function') {
-            // Plugin exists - update its cardRenderer
-            existingPlugin.setCardRenderer(cardRenderer);
-            return;
-        }
-        // Plugin doesn't exist - log a warning
-        console.warn('[tbw-grid-angular] <tbw-grid-responsive-card> found but ResponsivePlugin is not configured.\n' +
-            'Add ResponsivePlugin to your gridConfig.plugins array:\n\n' +
-            '  import { ResponsivePlugin } from "@toolbox-web/grid/plugins/responsive";\n' +
-            '  gridConfig = {\n' +
-            '    plugins: [new ResponsivePlugin({ breakpoint: 600 })]\n' +
-            '  };');
-    }
     ngOnDestroy() {
         const grid = this.elementRef.nativeElement;
         // Cleanup all event listeners
@@ -5806,12 +6255,60 @@ class Grid {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Grid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: Grid, isStandalone: true, selector: "tbw-grid", inputs: { customStyles: { classPropertyName: "customStyles", publicName: "customStyles", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, fitMode: { classPropertyName: "fitMode", publicName: "fitMode", isSignal: true, isRequired: false, transformFunction: null }, gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, clipboard: { classPropertyName: "clipboard", publicName: "clipboard", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, filtering: { classPropertyName: "filtering", publicName: "filtering", isSignal: true, isRequired: false, transformFunction: null }, reorderColumns: { classPropertyName: "reorderColumns", publicName: "reorderColumns", isSignal: true, isRequired: false, transformFunction: null }, visibility: { classPropertyName: "visibility", publicName: "visibility", isSignal: true, isRequired: false, transformFunction: null }, pinnedColumns: { classPropertyName: "pinnedColumns", publicName: "pinnedColumns", isSignal: true, isRequired: false, transformFunction: null }, groupingColumns: { classPropertyName: "groupingColumns", publicName: "groupingColumns", isSignal: true, isRequired: false, transformFunction: null }, columnVirtualization: { classPropertyName: "columnVirtualization", publicName: "columnVirtualization", isSignal: true, isRequired: false, transformFunction: null }, reorderRows: { classPropertyName: "reorderRows", publicName: "reorderRows", isSignal: true, isRequired: false, transformFunction: null }, rowDragDrop: { classPropertyName: "rowDragDrop", publicName: "rowDragDrop", isSignal: true, isRequired: false, transformFunction: null }, groupingRows: { classPropertyName: "groupingRows", publicName: "groupingRows", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, masterDetail: { classPropertyName: "masterDetail", publicName: "masterDetail", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, undoRedo: { classPropertyName: "undoRedo", publicName: "undoRedo", isSignal: true, isRequired: false, transformFunction: null }, exportFeature: { classPropertyName: "exportFeature", publicName: "export", isSignal: true, isRequired: false, transformFunction: null }, print: { classPropertyName: "print", publicName: "print", isSignal: true, isRequired: false, transformFunction: null }, pivot: { classPropertyName: "pivot", publicName: "pivot", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellClick: "cellClick", rowClick: "rowClick", cellActivate: "cellActivate", cellChange: "cellChange", cellCommit: "cellCommit", rowCommit: "rowCommit", changedRowsReset: "changedRowsReset", sortChange: "sortChange", filterChange: "filterChange", columnResize: "columnResize", columnMove: "columnMove", columnVisibility: "columnVisibility", columnStateChange: "columnStateChange", selectionChange: "selectionChange", rowMove: "rowMove", rowDragStart: "rowDragStart", rowDragEnd: "rowDragEnd", rowDrop: "rowDrop", rowTransfer: "rowTransfer", groupToggle: "groupToggle", treeExpand: "treeExpand", detailExpand: "detailExpand", responsiveChange: "responsiveChange", copy: "copy", paste: "paste", undoRedoAction: "undoRedoAction", exportComplete: "exportComplete", printStart: "printStart", printComplete: "printComplete", tbwScroll: "tbwScroll" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: Grid, isStandalone: true, selector: "tbw-grid", inputs: { customStyles: { classPropertyName: "customStyles", publicName: "customStyles", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, columnDefaults: { classPropertyName: "columnDefaults", publicName: "columnDefaults", isSignal: true, isRequired: false, transformFunction: null }, fitMode: { classPropertyName: "fitMode", publicName: "fitMode", isSignal: true, isRequired: false, transformFunction: null }, gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, clipboard: { classPropertyName: "clipboard", publicName: "clipboard", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, filtering: { classPropertyName: "filtering", publicName: "filtering", isSignal: true, isRequired: false, transformFunction: null }, reorderColumns: { classPropertyName: "reorderColumns", publicName: "reorderColumns", isSignal: true, isRequired: false, transformFunction: null }, visibility: { classPropertyName: "visibility", publicName: "visibility", isSignal: true, isRequired: false, transformFunction: null }, pinnedColumns: { classPropertyName: "pinnedColumns", publicName: "pinnedColumns", isSignal: true, isRequired: false, transformFunction: null }, groupingColumns: { classPropertyName: "groupingColumns", publicName: "groupingColumns", isSignal: true, isRequired: false, transformFunction: null }, columnVirtualization: { classPropertyName: "columnVirtualization", publicName: "columnVirtualization", isSignal: true, isRequired: false, transformFunction: null }, reorderRows: { classPropertyName: "reorderRows", publicName: "reorderRows", isSignal: true, isRequired: false, transformFunction: null }, rowDragDrop: { classPropertyName: "rowDragDrop", publicName: "rowDragDrop", isSignal: true, isRequired: false, transformFunction: null }, groupingRows: { classPropertyName: "groupingRows", publicName: "groupingRows", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, masterDetail: { classPropertyName: "masterDetail", publicName: "masterDetail", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, undoRedo: { classPropertyName: "undoRedo", publicName: "undoRedo", isSignal: true, isRequired: false, transformFunction: null }, exportFeature: { classPropertyName: "exportFeature", publicName: "export", isSignal: true, isRequired: false, transformFunction: null }, print: { classPropertyName: "print", publicName: "print", isSignal: true, isRequired: false, transformFunction: null }, pivot: { classPropertyName: "pivot", publicName: "pivot", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellClick: "cellClick", rowClick: "rowClick", cellActivate: "cellActivate", cellChange: "cellChange", cellCommit: "cellCommit", cellCancel: "cellCancel", editOpen: "editOpen", beforeEditClose: "beforeEditClose", editClose: "editClose", dirtyChange: "dirtyChange", dataChange: "dataChange", rowCommit: "rowCommit", changedRowsReset: "changedRowsReset", sortChange: "sortChange", filterChange: "filterChange", columnResize: "columnResize", columnResizeReset: "columnResizeReset", columnMove: "columnMove", columnVisibility: "columnVisibility", columnStateChange: "columnStateChange", selectionChange: "selectionChange", rowMove: "rowMove", rowDragStart: "rowDragStart", rowDragEnd: "rowDragEnd", rowDrop: "rowDrop", rowTransfer: "rowTransfer", groupToggle: "groupToggle", groupExpand: "groupExpand", groupCollapse: "groupCollapse", treeExpand: "treeExpand", detailExpand: "detailExpand", responsiveChange: "responsiveChange", contextMenuOpen: "contextMenuOpen", copy: "copy", paste: "paste", undo: "undo", redo: "redo", exportComplete: "exportComplete", printStart: "printStart", printComplete: "printComplete", tbwScroll: "tbwScroll" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Grid, decorators: [{
             type: Directive,
             args: [{ selector: 'tbw-grid' }]
-        }], ctorParameters: () => [], propDecorators: { customStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyles", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], fitMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitMode", required: false }] }], gridConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridConfig", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], clipboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboard", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], filtering: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtering", required: false }] }], reorderColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderColumns", required: false }] }], visibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibility", required: false }] }], pinnedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedColumns", required: false }] }], groupingColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingColumns", required: false }] }], columnVirtualization: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVirtualization", required: false }] }], reorderRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderRows", required: false }] }], rowDragDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDragDrop", required: false }] }], groupingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingRows", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], masterDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "masterDetail", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], undoRedo: [{ type: i0.Input, args: [{ isSignal: true, alias: "undoRedo", required: false }] }], exportFeature: [{ type: i0.Input, args: [{ isSignal: true, alias: "export", required: false }] }], print: [{ type: i0.Input, args: [{ isSignal: true, alias: "print", required: false }] }], pivot: [{ type: i0.Input, args: [{ isSignal: true, alias: "pivot", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellActivate: [{ type: i0.Output, args: ["cellActivate"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], rowCommit: [{ type: i0.Output, args: ["rowCommit"] }], changedRowsReset: [{ type: i0.Output, args: ["changedRowsReset"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], columnMove: [{ type: i0.Output, args: ["columnMove"] }], columnVisibility: [{ type: i0.Output, args: ["columnVisibility"] }], columnStateChange: [{ type: i0.Output, args: ["columnStateChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowMove: [{ type: i0.Output, args: ["rowMove"] }], rowDragStart: [{ type: i0.Output, args: ["rowDragStart"] }], rowDragEnd: [{ type: i0.Output, args: ["rowDragEnd"] }], rowDrop: [{ type: i0.Output, args: ["rowDrop"] }], rowTransfer: [{ type: i0.Output, args: ["rowTransfer"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }], treeExpand: [{ type: i0.Output, args: ["treeExpand"] }], detailExpand: [{ type: i0.Output, args: ["detailExpand"] }], responsiveChange: [{ type: i0.Output, args: ["responsiveChange"] }], copy: [{ type: i0.Output, args: ["copy"] }], paste: [{ type: i0.Output, args: ["paste"] }], undoRedoAction: [{ type: i0.Output, args: ["undoRedoAction"] }], exportComplete: [{ type: i0.Output, args: ["exportComplete"] }], printStart: [{ type: i0.Output, args: ["printStart"] }], printComplete: [{ type: i0.Output, args: ["printComplete"] }], tbwScroll: [{ type: i0.Output, args: ["tbwScroll"] }] } });
+        }], ctorParameters: () => [], propDecorators: { customStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyles", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], columnDefaults: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDefaults", required: false }] }], fitMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitMode", required: false }] }], gridConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridConfig", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], clipboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboard", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], filtering: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtering", required: false }] }], reorderColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderColumns", required: false }] }], visibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibility", required: false }] }], pinnedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedColumns", required: false }] }], groupingColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingColumns", required: false }] }], columnVirtualization: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVirtualization", required: false }] }], reorderRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderRows", required: false }] }], rowDragDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDragDrop", required: false }] }], groupingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingRows", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], masterDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "masterDetail", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], undoRedo: [{ type: i0.Input, args: [{ isSignal: true, alias: "undoRedo", required: false }] }], exportFeature: [{ type: i0.Input, args: [{ isSignal: true, alias: "export", required: false }] }], print: [{ type: i0.Input, args: [{ isSignal: true, alias: "print", required: false }] }], pivot: [{ type: i0.Input, args: [{ isSignal: true, alias: "pivot", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellActivate: [{ type: i0.Output, args: ["cellActivate"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], cellCancel: [{ type: i0.Output, args: ["cellCancel"] }], editOpen: [{ type: i0.Output, args: ["editOpen"] }], beforeEditClose: [{ type: i0.Output, args: ["beforeEditClose"] }], editClose: [{ type: i0.Output, args: ["editClose"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }], rowCommit: [{ type: i0.Output, args: ["rowCommit"] }], changedRowsReset: [{ type: i0.Output, args: ["changedRowsReset"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], columnResizeReset: [{ type: i0.Output, args: ["columnResizeReset"] }], columnMove: [{ type: i0.Output, args: ["columnMove"] }], columnVisibility: [{ type: i0.Output, args: ["columnVisibility"] }], columnStateChange: [{ type: i0.Output, args: ["columnStateChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowMove: [{ type: i0.Output, args: ["rowMove"] }], rowDragStart: [{ type: i0.Output, args: ["rowDragStart"] }], rowDragEnd: [{ type: i0.Output, args: ["rowDragEnd"] }], rowDrop: [{ type: i0.Output, args: ["rowDrop"] }], rowTransfer: [{ type: i0.Output, args: ["rowTransfer"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }], groupExpand: [{ type: i0.Output, args: ["groupExpand"] }], groupCollapse: [{ type: i0.Output, args: ["groupCollapse"] }], treeExpand: [{ type: i0.Output, args: ["treeExpand"] }], detailExpand: [{ type: i0.Output, args: ["detailExpand"] }], responsiveChange: [{ type: i0.Output, args: ["responsiveChange"] }], contextMenuOpen: [{ type: i0.Output, args: ["contextMenuOpen"] }], copy: [{ type: i0.Output, args: ["copy"] }], paste: [{ type: i0.Output, args: ["paste"] }], undo: [{ type: i0.Output, args: ["undo"] }], redo: [{ type: i0.Output, args: ["redo"] }], exportComplete: [{ type: i0.Output, args: ["exportComplete"] }], printStart: [{ type: i0.Output, args: ["printStart"] }], printComplete: [{ type: i0.Output, args: ["printComplete"] }], tbwScroll: [{ type: i0.Output, args: ["tbwScroll"] }] } });
+
+/**
+ * Combined provider helper for grid type defaults and icons.
+ *
+ * Convenience function that combines `provideGridTypeDefaults` and
+ * `provideGridIcons` into a single call for application bootstrap.
+ *
+ * @example
+ * ```typescript
+ * // app.config.ts
+ * import { ApplicationConfig } from '@angular/core';
+ * import { provideGrid } from '@toolbox-web/grid-angular';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideGrid({
+ *       typeDefaults: {
+ *         country: { renderer: CountryCellComponent },
+ *       },
+ *       icons: {
+ *         sortAsc: '↑',
+ *         sortDesc: '↓',
+ *       },
+ *     }),
+ *   ],
+ * };
+ * ```
+ */
+/**
+ * Combined provider for grid type defaults and icons.
+ *
+ * Returns environment providers that can be added to your `ApplicationConfig`
+ * `providers` array. Either field is optional — only the registries you
+ * supply are wired up.
+ *
+ * Equivalent to calling `provideGridTypeDefaults(options.typeDefaults)` and
+ * `provideGridIcons(options.icons)` separately.
+ */
+function provideGrid(options = {}) {
+    const providers = [];
+    if (options.typeDefaults) {
+        providers.push(provideGridTypeDefaults(options.typeDefaults));
+    }
+    if (options.icons) {
+        providers.push(provideGridIcons(options.icons));
+    }
+    return makeEnvironmentProviders(providers);
+}
 
 /**
  * @packageDocumentation
@@ -5825,5 +6322,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseFilterPanel, BaseGridEditor, BaseGridEditorCVA, BaseOverlayEditor, GRID_ICONS, GRID_TYPE_DEFAULTS, Grid, GridAdapter, GridColumnEditor, GridColumnView, GridDetailView, GridFormArray, GridIconRegistry, GridLazyForm, GridResponsiveCard, GridToolPanel, GridTypeRegistry, TbwEditor, TbwGridColumn, TbwGridHeader, TbwGridToolButtons, TbwRenderer, getFormArrayContext, getLazyFormContext, injectGrid, isComponentClass, provideGridIcons, provideGridTypeDefaults };
+export { BaseFilterPanel, BaseGridEditor, BaseGridEditorCVA, BaseOverlayEditor, GRID_ICONS, GRID_TYPE_DEFAULTS, Grid, GridAdapter, GridColumnEditor, GridColumnView, GridDetailView, GridFormArray, GridIconRegistry, GridLazyForm, GridResponsiveCard, GridToolPanel, GridTypeRegistry, TbwEditor, TbwGridColumn, TbwGridHeader, TbwGridToolButtons, TbwRenderer, applyColumnDefaults, claimEvent, getDetailTemplate, getFeatureClaim, getFeatureConfigPreprocessor, getFormArrayContext, getLazyFormContext, getResponsiveCardTemplate, hasColumnShorthands, injectGrid, isComponentClass, isEventClaimed, makeFlushFocusedInput, normalizeColumns, parseColumnShorthand, provideGrid, provideGridIcons, provideGridTypeDefaults, registerDetailRendererBridge, registerEditorMountHook, registerFeatureClaim, registerFeatureConfigPreprocessor, registerFilterPanelTypeDefaultBridge, registerResponsiveCardRendererBridge, registerTemplateBridge, runTemplateBridges, unclaimEvent, unregisterFeatureClaim };
 //# sourceMappingURL=toolbox-web-grid-angular.mjs.map