@memberjunction/ng-entity-viewer 5.38.0 → 5.40.0

package/dist/lib/entity-viewer/entity-viewer.component.js

@@ -1,45 +1,41 @@
-import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewChild, ViewContainerRef, reflectComponentType } from '@angular/core';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
-import { EntityFieldTSType, RunView, CompositeKey } from '@memberjunction/core';
+import { RunView, LogError } from '@memberjunction/core';
 import { UUIDsEqual } from '@memberjunction/global';
-import { buildCompositeKey, buildPkString, computeFieldsList } from '../utils/record.util';
-import { TimelineGroup } from '@memberjunction/ng-timeline';
+import { UserInfoEngine } from '@memberjunction/core-entities';
+import { buildCompositeKey, buildPkString } from '../utils/record.util';
 import { DEFAULT_VIEWER_CONFIG } from '../types';
-import { EntityDataGridComponent } from '../entity-data-grid/entity-data-grid.component';
+import { ViewTypeEngine } from '../view-types';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/forms";
-import * as i2 from "@memberjunction/ng-shared-generic";
-import * as i3 from "@memberjunction/ng-timeline";
-import * as i4 from "@memberjunction/ng-map-view";
-import * as i5 from "../entity-cards/entity-cards.component";
-import * as i6 from "../entity-data-grid/entity-data-grid.component";
-import * as i7 from "../recycle-bin/recycle-bin-chip.component";
-import * as i8 from "@angular/common";
-const _forTrack0 = ($index, $item) => $item.Name;
+import * as i1 from "@memberjunction/ng-shared-generic";
+import * as i2 from "../recycle-bin/recycle-bin-chip.component";
+import * as i3 from "../view-type-switcher/view-type-switcher.component";
+import * as i4 from "@angular/common";
+const _c0 = ["dynamicViewHost"];
 function EntityViewerComponent_Conditional_1_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 21);
-    i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_1_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.clearFilter()); });
-    i0.ɵɵelement(1, "i", 22);
+    i0.ɵɵelementStart(0, "button", 19);
+    i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_1_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ClearFilter()); });
+    i0.ɵɵelement(1, "i", 20);
     i0.ɵɵelementEnd();
 } }
 function EntityViewerComponent_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵelement(1, "i", 18);
-    i0.ɵɵelementStart(2, "input", 19);
-    i0.ɵɵlistener("input", function EntityViewerComponent_Conditional_1_Conditional_1_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFilterChange($event.target.value)); });
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵelement(1, "i", 16);
+    i0.ɵɵelementStart(2, "input", 17);
+    i0.ɵɵlistener("input", function EntityViewerComponent_Conditional_1_Conditional_1_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnFilterChange($event.target.value)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, EntityViewerComponent_Conditional_1_Conditional_1_Conditional_3_Template, 2, 0, "button", 20);
+    i0.ɵɵconditionalCreate(3, EntityViewerComponent_Conditional_1_Conditional_1_Conditional_3_Template, 2, 0, "button", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("placeholder", ctx_r1.effectiveConfig.filterPlaceholder)("value", ctx_r1.effectiveFilterText);
+    i0.ɵɵproperty("placeholder", ctx_r1.EffectiveConfig.filterPlaceholder)("value", ctx_r1.EffectiveFilterText);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.effectiveFilterText ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.EffectiveFilterText ? 3 : -1);
 } }
 function EntityViewerComponent_Conditional_1_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -50,7 +46,7 @@ function EntityViewerComponent_Conditional_1_Conditional_2_Conditional_1_Templat
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind1(2, 2, ctx_r1.filteredRecordCount), " of ", i0.ɵɵpipeBind1(3, 4, ctx_r1.totalRecordCount), " records");
+    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind1(2, 2, ctx_r1.FilteredRecordCount), " of ", i0.ɵɵpipeBind1(3, 4, ctx_r1.TotalRecordCount), " records");
 } }
 function EntityViewerComponent_Conditional_1_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -60,147 +56,51 @@ function EntityViewerComponent_Conditional_1_Conditional_2_Conditional_2_Templat
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(2, 1, ctx_r1.totalRecordCount), " records");
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(2, 1, ctx_r1.TotalRecordCount), " records");
 } }
 function EntityViewerComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelementStart(0, "div", 13);
     i0.ɵɵconditionalCreate(1, EntityViewerComponent_Conditional_1_Conditional_2_Conditional_1_Template, 4, 6, "span")(2, EntityViewerComponent_Conditional_1_Conditional_2_Conditional_2_Template, 3, 3, "span");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.filteredRecordCount !== ctx_r1.totalRecordCount ? 1 : 2);
-} }
-function EntityViewerComponent_Conditional_1_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 30);
-    i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_3_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setViewMode("timeline")); });
-    i0.ɵɵelement(1, "i", 31);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("active", ctx_r1.effectiveViewMode === "timeline");
+    i0.ɵɵconditional(ctx_r1.FilteredRecordCount !== ctx_r1.TotalRecordCount ? 1 : 2);
 } }
 function EntityViewerComponent_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 16)(1, "button", 23);
-    i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_3_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setViewMode("grid")); });
-    i0.ɵɵelement(2, "i", 24);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 25);
-    i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_3_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setViewMode("cards")); });
-    i0.ɵɵelement(4, "i", 26);
+    i0.ɵɵelementStart(0, "mj-view-type-switcher", 21);
+    i0.ɵɵlistener("ViewTypeSelected", function EntityViewerComponent_Conditional_1_Conditional_3_Template_mj_view_type_switcher_ViewTypeSelected_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SelectViewTypeById($event.viewTypeId)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, EntityViewerComponent_Conditional_1_Conditional_3_Conditional_5_Template, 2, 2, "button", 27);
-    i0.ɵɵelementStart(6, "button", 28);
-    i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_3_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setViewMode("map")); });
-    i0.ɵɵelement(7, "i", 29);
-    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵclassProp("active", ctx_r1.effectiveViewMode === "grid");
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("active", ctx_r1.effectiveViewMode === "cards");
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.hasDateFields ? 5 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵclassProp("active", ctx_r1.effectiveViewMode === "map")("geo-hidden", !ctx_r1.HasGeoCoding);
+    i0.ɵɵproperty("Provider", ctx_r1.Provider)("Entity", ctx_r1.EffectiveEntity)("ActiveViewTypeID", ctx_r1.ActiveViewTypeId);
 } }
 function EntityViewerComponent_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-recycle-bin-chip", 17);
+    i0.ɵɵelement(0, "mj-recycle-bin-chip", 15);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("EntityName", (ctx_r1.effectiveEntity == null ? null : ctx_r1.effectiveEntity.Name) ?? null);
-} }
-function EntityViewerComponent_Conditional_1_Conditional_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 34);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.selectedDateFieldDisplayName);
-} }
-function EntityViewerComponent_Conditional_1_Conditional_5_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 40);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const field_r8 = ctx.$implicit;
-    i0.ɵɵproperty("value", field_r8.Name);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(field_r8.DisplayNameOrName);
-} }
-function EntityViewerComponent_Conditional_1_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "select", 39);
-    i0.ɵɵlistener("change", function EntityViewerComponent_Conditional_1_Conditional_5_Conditional_3_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setTimelineDateField($event.target.value)); });
-    i0.ɵɵrepeaterCreate(1, EntityViewerComponent_Conditional_1_Conditional_5_Conditional_3_For_2_Template, 2, 2, "option", 40, _forTrack0);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("value", ctx_r1.selectedTimelineDateField);
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.availableDateFields);
-} }
-function EntityViewerComponent_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 32);
-    i0.ɵɵelement(1, "i", 33);
-    i0.ɵɵconditionalCreate(2, EntityViewerComponent_Conditional_1_Conditional_5_Conditional_2_Template, 2, 1, "span", 34)(3, EntityViewerComponent_Conditional_1_Conditional_5_Conditional_3_Template, 3, 1, "select", 35);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 36)(5, "button", 37);
-    i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_5_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleTimelineOrientation()); });
-    i0.ɵɵelement(6, "i");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 38)(8, "button", 37);
-    i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_5_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleTimelineSortOrder()); });
-    i0.ɵɵelement(9, "i");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.availableDateFields.length === 1 ? 2 : 3);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("title", ctx_r1.timelineOrientation === "vertical" ? "Switch to Horizontal" : "Switch to Vertical");
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.timelineOrientation === "vertical" ? "fa-solid fa-ellipsis-vertical" : "fa-solid fa-ellipsis");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", ctx_r1.timelineSortOrder === "desc" ? "Showing Newest First (click for Oldest First)" : "Showing Oldest First (click for Newest First)");
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.timelineSortOrder === "desc" ? "fa-solid fa-arrow-down-wide-short" : "fa-solid fa-arrow-up-wide-short");
+    i0.ɵɵproperty("EntityName", (ctx_r1.EffectiveEntity == null ? null : ctx_r1.EffectiveEntity.Name) ?? null);
 } }
 function EntityViewerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵconditionalCreate(1, EntityViewerComponent_Conditional_1_Conditional_1_Template, 4, 3, "div", 14);
-    i0.ɵɵconditionalCreate(2, EntityViewerComponent_Conditional_1_Conditional_2_Template, 3, 1, "div", 15);
-    i0.ɵɵconditionalCreate(3, EntityViewerComponent_Conditional_1_Conditional_3_Template, 8, 9, "div", 16);
-    i0.ɵɵconditionalCreate(4, EntityViewerComponent_Conditional_1_Conditional_4_Template, 1, 1, "mj-recycle-bin-chip", 17);
-    i0.ɵɵconditionalCreate(5, EntityViewerComponent_Conditional_1_Conditional_5_Template, 10, 7);
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵconditionalCreate(1, EntityViewerComponent_Conditional_1_Conditional_1_Template, 4, 3, "div", 12);
+    i0.ɵɵconditionalCreate(2, EntityViewerComponent_Conditional_1_Conditional_2_Template, 3, 1, "div", 13);
+    i0.ɵɵconditionalCreate(3, EntityViewerComponent_Conditional_1_Conditional_3_Template, 1, 3, "mj-view-type-switcher", 14);
+    i0.ɵɵconditionalCreate(4, EntityViewerComponent_Conditional_1_Conditional_4_Template, 1, 1, "mj-recycle-bin-chip", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.effectiveConfig.showFilter ? 1 : -1);
+    i0.ɵɵconditional(ctx_r1.EffectiveConfig.showFilter ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.effectiveConfig.showRecordCount && ctx_r1.effectiveEntity ? 2 : -1);
+    i0.ɵɵconditional(ctx_r1.EffectiveConfig.showRecordCount && ctx_r1.EffectiveEntity ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.effectiveConfig.showViewModeToggle ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.EffectiveConfig.showViewModeToggle ? 3 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.ShowRecycleBin ? 4 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.effectiveViewMode === "timeline" && ctx_r1.hasDateFields ? 5 : -1);
-} }
-function EntityViewerComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-map-view", 41);
-    i0.ɵɵlistener("MarkerClick", function EntityViewerComponent_Conditional_18_Template_mj_map_view_MarkerClick_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMapMarkerClick($event)); })("RenderModeChange", function EntityViewerComponent_Conditional_18_Template_mj_map_view_RenderModeChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMapRenderModeChange($event)); })("DisplayStateChange", function EntityViewerComponent_Conditional_18_Template_mj_map_view_DisplayStateChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMapDisplayStateChange($event)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("hidden", ctx_r1.effectiveViewMode !== "map")("Entity", ctx_r1.effectiveEntity)("Records", ctx_r1.filteredRecords)("TotalRecordCount", ctx_r1.totalRecordCount)("RenderMode", ctx_r1.mapRenderMode)("DisplayState", ctx_r1.mapDisplayState);
 } }
+function EntityViewerComponent_ng_template_16_Template(rf, ctx) { }
 /**
  * EntityViewerComponent - Full-featured composite component for viewing entity data
  *
@@ -217,163 +117,209 @@ function EntityViewerComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
  * ```html
  * <!-- Basic usage - loads data automatically -->
  * <mj-entity-viewer
- *   [entity]="selectedEntity"
- *   (recordSelected)="onRecordSelected($event)"
- *   (recordOpened)="onRecordOpened($event)">
+ *   [Entity]="selectedEntity"
+ *   (RecordSelected)="onRecordSelected($event)"
+ *   (RecordOpened)="onRecordOpened($event)">
  * </mj-entity-viewer>
  *
  * <!-- With external state control (like Data Explorer) -->
  * <mj-entity-viewer
- *   [entity]="selectedEntity"
- *   [(viewMode)]="state.viewMode"
- *   [filterText]="state.filterText"
- *   [selectedRecordId]="state.selectedRecordId"
- *   (recordSelected)="onRecordSelected($event)"
- *   (recordOpened)="onRecordOpened($event)"
- *   (sortChanged)="onSortChanged($event)">
+ *   [Entity]="selectedEntity"
+ *   [ViewTypeID]="state.viewTypeId"
+ *   [FilterText]="state.filterText"
+ *   [SelectedRecordID]="state.selectedRecordId"
+ *   (RecordSelected)="onRecordSelected($event)"
+ *   (RecordOpened)="onRecordOpened($event)">
  * </mj-entity-viewer>
  * ```
  */
 export class EntityViewerComponent extends BaseAngularComponent {
     cdr;
     ngZone;
+    elementRef;
     /**
-     * Maximum records to load in map mode. Map view needs all records for
-     * geographic visualization — paging doesn't make sense for maps. This cap
-     * prevents unbounded queries on very large entities.
+     * Safety cap on the number of records loaded when a plug-in renderer asks the container to
+     * load the full set (via a {@link ViewDataRequest} with `loadAll: true`). Prevents unbounded
+     * queries on very large entities. Generic — not tied to any specific view type.
      */
-    static MAP_MAX_RECORDS = 10000;
+    static LOAD_ALL_MAX_RECORDS = 10000;
     // ========================================
     // INPUTS (using getter/setter pattern)
     // ========================================
     _entity = null;
     _records = null;
     _config = {};
-    _viewMode = null;
     _filterText = null;
     _sortState = null;
     _viewEntity = null;
-    _timelineConfig = null;
     _initialized = false;
+    /**
+     * When true, the next {@link LoadData} loads the full record set (up to
+     * {@link LOAD_ALL_MAX_RECORDS}) instead of paginating. Set generically from a plug-in's
+     * {@link ViewDataRequest} (`loadAll`) — never from any view-type check.
+     */
+    _loadAllRecords = false;
     /** Whether a deferred reload has been queued via deferReload() */
     _reloadDeferred = false;
     /**
      * The entity to display records for
      */
-    get entity() {
+    get Entity() {
         return this._entity;
     }
-    set entity(value) {
+    set Entity(value) {
         const previousEntity = this._entity;
         this._entity = value;
-        // Detect date fields for timeline support
-        this.detectDateFields();
-        // Detect geocoding support for map view
-        this.updateGeoCodingSupport();
-        if (this._initialized) {
-            // If entity changed to a different entity, clear all stale state from the old entity
-            if (value && previousEntity && !UUIDsEqual(value.ID, previousEntity.ID)) {
-                if (this._viewEntity && !UUIDsEqual(this._viewEntity.EntityID, value.ID)) {
-                    this._viewEntity = null;
-                }
-                // Clear sort state — it references fields from the old entity (e.g., FirstName)
-                // and would produce invalid ORDER BY on the new entity
-                this.internalSortState = null;
+        const entityChanged = !!(this._initialized && value && previousEntity && !UUIDsEqual(value.ID, previousEntity.ID));
+        // On a real entity change, drop per-entity state BEFORE we recompute view types + re-seed config,
+        // so the new entity starts clean:
+        //  - The per-view-type config map (grid columnSettings, timeline date field, …) is per-ENTITY.
+        //    Keeping the old entity's config applies its columnSettings to the new entity, so only fields
+        //    common to both survive (e.g. just Name/Description) — the "no/too-few columns" symptom.
+        //  - The loaded UserView record belongs to the old entity; clear it so re-seeding reads the new
+        //    entity's saved view / per-user default-view setting.
+        //  - Sort state references old-entity fields and would produce an invalid ORDER BY.
+        if (entityChanged) {
+            if (this._viewEntity && value && !UUIDsEqual(this._viewEntity.EntityID, value.ID)) {
+                this._viewEntity = null;
             }
+            this.viewTypeConfigById.clear();
+            this.InternalSortState = null;
+            // Throw out the cached plug-in instances — they belong to the previous entity. The next
+            // selection rebuilds them fresh for the new entity (correct columns / date fields / geo).
+            this.clearDynamicRendererCache();
+        }
+        // Recompute available view types for the new entity from the registry (if loaded). This also
+        // re-seeds the per-view-type config from the NEW entity's saved view / default-view setting
+        // (now that the stale map was cleared above). Falls back silently when the registry has no data.
+        this.refreshAvailableViewTypes();
+        if (this._initialized) {
             if (value && !this._records) {
                 // Reset state for new entity - synchronously clear all data and force change detection
                 // before starting the async load to prevent stale data display
                 this.resetPaginationState();
-                this.internalRecords = [];
-                this.totalRecordCount = 0;
-                this.filteredRecordCount = 0;
+                this.InternalRecords = [];
+                this.TotalRecordCount = 0;
+                this.FilteredRecordCount = 0;
                 this.cdr.detectChanges();
                 // Defer the actual load so all input bindings (viewEntity, gridState, etc.)
                 // complete before we fire the RunView — prevents duplicate loads with stale state
                 this.deferReload();
             }
             else if (!value) {
-                this.internalRecords = [];
-                this.totalRecordCount = 0;
-                this.filteredRecordCount = 0;
+                this.InternalRecords = [];
+                this.TotalRecordCount = 0;
+                this.FilteredRecordCount = 0;
                 this.resetPaginationState();
                 this.cdr.detectChanges();
             }
+            // The cache was thrown out above, so re-create the active view type FRESH for the new entity
+            // (unless refreshAvailableViewTypes already re-selected because the active type became
+            // unavailable). This rebuilds columns / date fields / geo cleanly; records flow in via the
+            // deferred reload. The container stays generic — it re-creates whatever plug-in is active
+            // without knowing what it is.
+            if (entityChanged && !this.dynamicRendererRef) {
+                const activeOption = this.AvailableViewTypes.find(o => o.key === this.ActiveViewTypeKey) ?? this.AvailableViewTypes[0];
+                if (activeOption) {
+                    this.ActiveViewTypeKey = activeOption.key;
+                    this.ActiveDynamicOption = activeOption;
+                    this.selectDynamicRenderer(activeOption);
+                }
+            }
+        }
+    }
+    /**
+     * Convenience input: the entity to display by **name**. Resolved internally to an `EntityInfo`
+     * via the active provider and applied through the {@link entity} setter. Use this OR `[entity]`
+     * OR `[EntityID]` — whichever is most convenient for the consumer.
+     */
+    set EntityName(value) {
+        if (!value) {
+            return;
+        }
+        const resolved = this.ProviderToUse?.EntityByName(value) ?? null;
+        if (resolved) {
+            this.Entity = resolved;
+        }
+    }
+    /**
+     * Convenience input: the entity to display by **ID**. Resolved internally to an `EntityInfo`
+     * and applied through the {@link entity} setter.
+     */
+    set EntityID(value) {
+        if (!value) {
+            return;
+        }
+        const resolved = this.ProviderToUse?.Entities.find(e => UUIDsEqual(e.ID, value)) ?? null;
+        if (resolved) {
+            this.Entity = resolved;
+        }
+    }
+    /**
+     * Convenience input: load and display a saved view by its `MJ: User Views` **ID**. The viewer
+     * loads the record via the active provider and applies it through the {@link viewEntity} setter
+     * (which also resolves the entity if `[entity]`/`[EntityName]`/`[EntityID]` weren't supplied).
+     */
+    set ViewID(value) {
+        if (value) {
+            void this.loadViewById(value);
         }
     }
     /**
      * Pre-loaded records (optional - if not provided, component loads data)
      */
-    get records() {
+    get Records() {
         return this._records;
     }
-    set records(value) {
+    set Records(value) {
         this._records = value;
         if (value) {
-            this.internalRecords = value;
-            this.totalRecordCount = value.length;
-            this.filteredRecordCount = value.length;
-            // Update timeline with new records
-            this.updateTimelineGroups();
+            this.InternalRecords = value;
+            this.TotalRecordCount = value.length;
+            this.FilteredRecordCount = value.length;
+            this.pushDynamicRendererInputs();
         }
     }
     /**
      * Configuration options for the viewer
      */
-    get config() {
+    get Config() {
         return this._config;
     }
-    set config(value) {
+    set Config(value) {
         this._config = value;
         this.applyConfig();
     }
     /**
      * Currently selected record ID (primary key string)
      */
-    selectedRecordId = null;
-    /**
-     * External view mode - allows parent to control view mode
-     * Supports two-way binding: [(viewMode)]="state.viewMode"
-     */
-    get viewMode() {
-        return this._viewMode;
+    get SelectedRecordID() {
+        return this._selectedRecordId;
     }
-    set viewMode(value) {
-        const previousEffective = this.effectiveViewMode;
-        this._viewMode = value;
-        if (value !== null) {
-            this.internalViewMode = value;
-        }
-        // Map mode uses different RunView params (MaxRows = MAP_MAX_RECORDS, no pagination)
-        // and different field set (includes BoundaryGeoJSON when entity.SupportsGeoCoding=1).
-        // If the parent flips us into/out of map mode via two-way binding we need to reload —
-        // otherwise the map gets the grid's paginated data without per-record geometry.
-        const newEffective = this.effectiveViewMode;
-        if (this._initialized && previousEffective !== newEffective &&
-            (newEffective === 'map' || previousEffective === 'map')) {
-            this.resetPaginationState();
-            this.loadData();
-        }
+    set SelectedRecordID(value) {
+        this._selectedRecordId = value;
+        this.pushDynamicRendererInputs();
     }
+    _selectedRecordId = null;
     /**
      * External filter text - allows parent to control filter
      * Supports two-way binding: [(filterText)]="state.filterText"
      */
-    get filterText() {
+    get FilterText() {
         return this._filterText;
     }
-    set filterText(value) {
-        const oldFilter = this.debouncedFilterText;
+    set FilterText(value) {
+        const oldFilter = this.DebouncedFilterText;
         this._filterText = value;
         const newFilter = value ?? '';
-        this.internalFilterText = newFilter;
-        this.debouncedFilterText = newFilter;
+        this.InternalFilterText = newFilter;
+        this.DebouncedFilterText = newFilter;
         if (this._initialized) {
             // If server-side filtering and filter changed, reload from page 1
             // Keep existing records visible during refresh for better UX
-            if (this.effectiveConfig.serverSideFiltering && newFilter !== oldFilter && !this._records) {
+            if (this.EffectiveConfig.serverSideFiltering && newFilter !== oldFilter && !this._records) {
                 this.resetPaginationState(false);
-                this.loadData();
+                this.LoadData();
             }
             else {
                 this.updateFilteredCount();
@@ -384,47 +330,61 @@ export class EntityViewerComponent extends BaseAngularComponent {
     /**
      * External sort state - allows parent to control sorting
      */
-    get sortState() {
+    get SortState() {
         return this._sortState;
     }
-    set sortState(value) {
-        const oldSort = this.internalSortState;
+    set SortState(value) {
+        const oldSort = this.InternalSortState;
         this._sortState = value;
         if (value !== null) {
-            this.internalSortState = value;
+            this.InternalSortState = value;
             if (this._initialized) {
                 // If sort changed and using server-side sorting, reload
                 // Keep existing records visible during refresh for better UX
-                if (this.effectiveConfig.serverSideSorting && !this._records) {
+                if (this.EffectiveConfig.serverSideSorting && !this._records) {
                     const sortChanged = !oldSort || !value ||
                         oldSort.field !== value.field ||
                         oldSort.direction !== value.direction;
                     if (sortChanged) {
                         this.resetPaginationState(false);
-                        this.loadData();
+                        this.LoadData();
                     }
                 }
             }
         }
     }
-    /**
-     * Custom grid column definitions
-     */
-    gridColumns = [];
-    /**
-     * Custom card template
-     */
-    cardTemplate = null;
     /**
      * Optional User View entity that provides view configuration
      * When provided, the component will use the view's WhereClause, GridState, SortState, etc.
      * The view's filter is additive - UserSearchString is applied ON TOP of the view's WhereClause
      */
-    get viewEntity() {
+    get ViewEntity() {
         return this._viewEntity;
     }
-    set viewEntity(value) {
+    set ViewEntity(value) {
+        const previousViewId = this._viewEntity?.ID ?? null;
+        const nextViewId = value?.ID ?? null;
+        const viewChanged = this._initialized && previousViewId !== nextViewId;
         this._viewEntity = value;
+        // A changed view (including default↔saved and saved↔different) is a new data context: throw out
+        // the cached plug-in instances + per-view-type config so they rebuild/re-seed from the new view.
+        if (viewChanged) {
+            this.viewTypeConfigById.clear();
+            this.clearDynamicRendererCache();
+        }
+        // Re-resolve available view types + the initial view type/config from the new view record
+        // (self-contained: the viewer reads ViewTypeID + DisplayState.viewTypeConfigs off the record).
+        this.refreshAvailableViewTypes();
+        // If the cache was thrown out but refreshAvailableViewTypes didn't re-select (active type still
+        // valid), re-create the active view type fresh for the new view.
+        if (viewChanged && !this.dynamicRendererRef) {
+            const activeOption = this.AvailableViewTypes.find(o => o.key === this.ActiveViewTypeKey) ?? this.AvailableViewTypes[0];
+            if (activeOption) {
+                this.ActiveViewTypeKey = activeOption.key;
+                this.ActiveDynamicOption = activeOption;
+                this.selectDynamicRenderer(activeOption);
+            }
+        }
         if (this._initialized && this._entity && !this._records) {
             // Apply view's sort state if available, then defer the reload.
             // Deferring ensures all sibling input bindings (gridState, etc.) are
@@ -438,54 +398,7 @@ export class EntityViewerComponent extends BaseAngularComponent {
      * Grid state configuration from a User View
      * Controls column visibility, widths, order, and sort settings
      */
-    gridState = null;
-    /**
-     * Timeline configuration state
-     * Controls which date field is used and segment grouping
-     */
-    get timelineConfig() {
-        return this._timelineConfig;
-    }
-    set timelineConfig(value) {
-        const prev = this._timelineConfig;
-        // Compare by value, not reference
-        const isEqual = (prev === null && value === null) ||
-            (prev !== null && value !== null &&
-                prev.dateFieldName === value.dateFieldName &&
-                prev.sortOrder === value.sortOrder &&
-                prev.orientation === value.orientation &&
-                prev.segmentGrouping === value.segmentGrouping);
-        if (!isEqual) {
-            this._timelineConfig = value;
-            if (value && this._entity) {
-                this.configureTimeline();
-                this.cdr.markForCheck();
-            }
-        }
-    }
-    /**
-     * Whether to show the grid toolbar.
-     * When false, the grid is displayed without its own toolbar - useful when
-     * entity-viewer provides its own filter/actions in the header.
-     * @default false
-     */
-    showGridToolbar = false;
-    /**
-     * Grid toolbar configuration - controls which buttons are shown and their behavior
-     * When not provided, uses sensible defaults
-     */
-    gridToolbarConfig = null;
-    /**
-     * Grid selection mode
-     * @default 'single'
-     */
-    gridSelectionMode = 'single';
-    /**
-     * Show the "Add to List" button in the grid toolbar.
-     * Requires gridSelectionMode to be 'multiple' for best UX.
-     * @default false
-     */
-    showAddToListButton = false;
+    GridState = null;
     /**
      * Whether to render the Recycle Bin chip in the viewer header.
      * The chip auto-hides itself when the entity has no deleted records,
@@ -500,148 +413,190 @@ export class EntityViewerComponent extends BaseAngularComponent {
     /**
      * Emitted when a record is selected (single click)
      */
-    recordSelected = new EventEmitter();
+    RecordSelected = new EventEmitter();
     /**
      * Emitted when a record should be opened (double-click or open button)
      */
-    recordOpened = new EventEmitter();
+    RecordOpened = new EventEmitter();
     /**
      * Emitted when data is loaded
      */
-    dataLoaded = new EventEmitter();
-    /**
-     * Emitted when the view mode changes (for two-way binding)
-     */
-    viewModeChange = new EventEmitter();
+    DataLoaded = new EventEmitter();
     /**
      * Emitted when filter text changes (for two-way binding)
      */
-    filterTextChange = new EventEmitter();
+    FilterTextChange = new EventEmitter();
     /**
      * Emitted when filtered count changes
      */
-    filteredCountChanged = new EventEmitter();
+    FilteredCountChanged = new EventEmitter();
+    /**
+     * NAVIGATION request bubbled up from a plug-in renderer to open a *related* record on a
+     * (possibly different) entity — e.g. a grid foreign-key drill-through. Routing lives in the
+     * outer app, so this is one of the few signals that legitimately bubbles up. The container
+     * forwards it untouched.
+     */
+    OpenRelatedRecordRequested = new EventEmitter();
+    /**
+     * NAVIGATION request bubbled up from a plug-in renderer to create a new record of the current
+     * entity (e.g. a grid's "New" button). Opening the create form is a routing concern owned by
+     * the outer app; the container forwards it without acting on it.
+     */
+    CreateRecordRequested = new EventEmitter();
+    /**
+     * The initial/active view type to open in, by `MJ: View Types` row ID. Hosts that persist
+     * the selection (e.g. Explorer's `UserView.ViewTypeID`) bind this so the viewer opens in the
+     * saved type — built-in OR plug-in. Applied once the registry resolves; later user switches
+     * emit {@link viewTypeChange} for the host to persist.
+     */
+    set ViewTypeID(value) {
+        this._initialViewTypeId = value;
+        // If options are already loaded, apply immediately; otherwise refreshAvailableViewTypes will.
+        if (value && this.AvailableViewTypes.length > 0) {
+            const opt = this.AvailableViewTypes.find(o => o.viewTypeId === value);
+            if (opt && opt.key !== this.ActiveViewTypeKey) {
+                this.applyViewTypeSelection(opt, false);
+            }
+        }
+    }
+    get ViewTypeID() {
+        return this._initialViewTypeId;
+    }
+    _initialViewTypeId = null;
+    // ========================================
+    // INTERNAL STATE
+    // ========================================
     /**
-     * Emitted when sort state changes
+     * The view-type options shown in the switcher, sourced from {@link ViewTypeEngine}
+     * (the `MJ: View Types` registry), filtered by each descriptor's availability predicate.
+     * Every option is a dynamic-mounted plug-in.
      */
-    sortChanged = new EventEmitter();
+    AvailableViewTypes = [];
+    /** Whether the registry (ViewTypeEngine) successfully sourced the available view types. */
+    ViewTypesFromRegistry = false;
     /**
-     * Emitted when grid state changes (column resize, reorder, etc.)
+     * The currently-active view type's stable key (descriptor Name). Null until the registry resolves.
      */
-    gridStateChanged = new EventEmitter();
+    ActiveViewTypeKey = null;
     /**
-     * Emitted when timeline configuration changes (date field, grouping, etc.)
+     * The currently-active view type's option (the plug-in being mounted). Null until the
+     * registry resolves / a type is selected. Drives the dynamic-mount host in the template.
      */
-    timelineConfigChange = new EventEmitter();
+    ActiveDynamicOption = null;
+    /** True once a plug-in view type is mounted (drives the dynamic host's visibility). */
+    get IsDynamicViewActive() {
+        return this.ActiveDynamicOption !== null;
+    }
+    /** Whether the view-type dropdown menu is currently open. */
+    ViewTypeDropdownOpen = false;
     /**
-     * Emitted when the Add/New button is clicked in the grid toolbar
+     * Per-view-type configuration payloads, keyed by `MJ: View Types` row ID. Seeded from
+     * {@link viewTypeConfigsInput} and updated as plug-in renderers emit config changes;
+     * handed to each dynamic renderer on mount.
      */
-    addRequested = new EventEmitter();
+    viewTypeConfigById = new Map();
     /**
-     * Emitted when the Delete button is clicked in the grid toolbar
-     * Includes the selected records to be deleted
+     * Per-view-type configuration provided by the host (e.g. Explorer reading
+     * `UserView.DisplayState.viewTypeConfigs`). The active type is controlled separately via
+     * the `viewMode` / ViewTypeID inputs; this carries only the config payloads.
      */
-    deleteRequested = new EventEmitter();
+    set ViewTypeConfigs(value) {
+        this.viewTypeConfigById.clear();
+        for (const entry of value ?? []) {
+            if (entry?.viewTypeId) {
+                this.viewTypeConfigById.set(entry.viewTypeId, entry.config ?? {});
+            }
+        }
+        if (this.dynamicRendererRef && this.ActiveDynamicOption) {
+            this.pushDynamicRendererInputs();
+        }
+    }
     /**
-     * Emitted when the Refresh button is clicked in the grid toolbar
+     * When true, the viewer persists view-type/config changes itself — to the loaded `UserView`
+     * record (when a `ViewEntity`/`ViewID` is present) or to per-user User Settings (the default-view
+     * case). When false (the default), the viewer only emits the `Before…`/`After…` events and the
+     * consumer is responsible for persistence. Persistence is provider-based (generic-safe) — never
+     * routing, which stays with the host app.
      */
-    refreshRequested = new EventEmitter();
+    AutoSaveView = false;
     /**
-     * Emitted when the Export button is clicked in the grid toolbar
+     * Emitted (cancelable) BEFORE the active view type changes. A handler may set
+     * `args.Cancel = true` to veto the switch. Fires for both built-in and plug-in types.
      */
-    exportRequested = new EventEmitter();
+    BeforeViewTypeChange = new EventEmitter();
     /**
-     * Emitted when the Add to List button is clicked in the grid toolbar.
-     * Parent components should handle this to show the list management dialog.
+     * Emitted AFTER the active view type has changed (and, when {@link AutoSaveView} is on, after
+     * it has been persisted). Notification only.
      */
-    addToListRequested = new EventEmitter();
+    AfterViewTypeChange = new EventEmitter();
     /**
-     * Emitted when grid selection changes.
-     * Parent components can use this to track selected records for their own toolbar buttons.
+     * Emitted (cancelable) BEFORE a plug-in renderer's configuration change is applied/persisted.
      */
-    selectionChanged = new EventEmitter();
-    // ========================================
-    // INTERNAL STATE
-    // ========================================
-    internalViewMode = 'grid';
-    internalFilterText = '';
-    debouncedFilterText = '';
-    isLoading = false;
-    loadingMessage = 'Loading...';
-    internalRecords = [];
-    totalRecordCount = 0;
-    filteredRecordCount = 0;
+    BeforeViewTypeConfigChange = new EventEmitter();
+    /**
+     * Emitted AFTER a plug-in renderer's configuration change has been applied (and persisted when
+     * {@link AutoSaveView} is on).
+     */
+    AfterViewTypeConfigChange = new EventEmitter();
+    /** Anchor for dynamically-mounted plug-in view renderers. */
+    dynamicViewHost;
+    /** The currently-ACTIVE (visible) plug-in renderer, if any. */
+    dynamicRendererRef = null;
+    /** Input names the active plug-in declares (from `reflectComponentType`), used to push only the
+     *  generic inputs it accepts. Mirrors the active cache entry's input set. */
+    dynamicInputNames = new Set();
+    /**
+     * Cache of mounted plug-in renderer instances for the CURRENT data context (entity + view),
+     * keyed by `MJ: View Types` row ID. Switching view types within the same entity+view SHOWS/HIDES
+     * cached instances (preserving their state — e.g. a computed cluster scatter, grid scroll) instead
+     * of destroy/recreate. The whole cache is destroyed + rebuilt only when the data context changes:
+     * entity change, or view (record / ViewID, including default↔saved) change. See
+     * {@link clearDynamicRendererCache}.
+     */
+    dynamicRendererCache = new Map();
+    InternalFilterText = '';
+    DebouncedFilterText = '';
+    IsLoading = false;
+    LoadingMessage = 'Loading...';
+    InternalRecords = [];
+    TotalRecordCount = 0;
+    FilteredRecordCount = 0;
     /** Track which records matched on hidden (non-visible) fields */
-    hiddenFieldMatches = new Map();
+    HiddenFieldMatches = new Map();
     /** Current sort state */
-    internalSortState = null;
-    /** Cached grid params to avoid recreating object on every change detection */
-    _cachedGridParams = null;
-    _lastGridParamsEntity = null;
-    _lastGridParamsViewEntity = null;
+    InternalSortState = null;
     /** Pagination state */
-    pagination = {
+    Pagination = {
         currentPage: 0,
         pageSize: 100,
         totalRecords: 0,
         hasMore: false,
         isLoading: false
     };
-    // ========================================
-    // TIMELINE STATE
-    // ========================================
-    /** Whether the current entity has date fields available for timeline view */
-    hasDateFields = false;
-    /** Whether the current entity supports geocoding (has SupportsGeoCoding = 1) */
-    HasGeoCoding = false;
-    /** Available date fields from the entity (sorted by priority) */
-    availableDateFields = [];
-    /** Timeline groups configuration for the timeline component */
-    get timelineGroups() {
-        return this._timelineGroups;
-    }
-    set timelineGroups(value) {
-        const prev = this._timelineGroups;
-        this._timelineGroups = value;
-        // Detect meaningful changes to trigger refresh in child timeline component
-        const hasChanged = prev !== value ||
-            (prev.length > 0 && value.length > 0 &&
-                (prev[0].EntityObjects !== value[0]?.EntityObjects ||
-                    prev[0].DateFieldName !== value[0]?.DateFieldName));
-        if (hasChanged) {
-            // Force change detection to propagate to child timeline component
-            this.cdr.markForCheck();
-        }
-    }
-    _timelineGroups = [];
-    /** Timeline sort order */
-    timelineSortOrder = 'desc';
-    /** Timeline segment grouping */
-    timelineSegmentGrouping = 'month';
-    /** Timeline orientation (vertical or horizontal) */
-    timelineOrientation = 'vertical';
-    /** Currently selected date field for timeline */
-    selectedTimelineDateField = null;
     destroy$ = new Subject();
     filterInput$ = new Subject();
     /** Track if this is the first load (vs. load more) */
     isInitialLoad = true;
-    /** Reference to the data grid component for flushing pending changes */
-    dataGridRef;
-    constructor(cdr, ngZone) {
+    constructor(cdr, ngZone, elementRef) {
         super();
         this.cdr = cdr;
         this.ngZone = ngZone;
+        this.elementRef = elementRef;
     }
+    /** IntersectionObserver used to detect when this viewer is re-attached/re-shown (Explorer caches +
+     *  reattaches resource components without firing Angular lifecycle hooks). See {@link ngAfterViewInit}. */
+    _visibilityObserver = null;
+    _wasVisible = false;
     // ========================================
     // PUBLIC METHODS
     // ========================================
     /**
-     * Ensures any pending grid state changes are saved immediately without waiting for debounce.
-     * Call this before switching views or entities to ensure changes are saved.
+     * Hook retained for hosts (e.g. the workspace) that call this before switching views/entities.
+     * View-type-specific persistence (e.g. a grid's live column/sort state) is now owned by the
+     * mounted plug-in renderer, so the container has nothing to flush — this is a no-op.
      */
     EnsurePendingChangesSaved() {
-        this.dataGridRef?.EnsurePendingChangesSaved();
+        // no-op: plug-in renderers own their own pending-state persistence
     }
     // ========================================
     // COMPUTED PROPERTIES
@@ -651,13 +606,13 @@ export class EntityViewerComponent extends BaseAngularComponent {
      * This allows callers to provide just a viewEntity without explicitly setting the entity input.
      * Uses fallback resolution when ViewEntityInfo is not available.
      */
-    get effectiveEntity() {
-        if (this.entity) {
-            return this.entity;
+    get EffectiveEntity() {
+        if (this.Entity) {
+            return this.Entity;
         }
         // Auto-derive from viewEntity if available
-        if (this.viewEntity) {
-            return this.getEntityInfoFromViewEntity(this.viewEntity);
+        if (this.ViewEntity) {
+            return this.getEntityInfoFromViewEntity(this.ViewEntity);
         }
         return null;
     }
@@ -691,129 +646,52 @@ export class EntityViewerComponent extends BaseAngularComponent {
         console.warn(`[EntityViewer] Could not determine entity for view "${viewEntity.Name}" (ID: ${viewEntity.ID})`);
         return null;
     }
-    /**
-     * Get the effective view mode (external or internal)
-     */
-    get effectiveViewMode() {
-        return this.viewMode ?? this.internalViewMode;
-    }
     /**
      * Get the effective filter text (external or internal)
      */
-    get effectiveFilterText() {
-        return this.filterText ?? this.internalFilterText;
-    }
-    /**
-     * Get the raw ID value from selectedRecordId for timeline selection.
-     * The selectedRecordId is in composite key format (e.g., "ID|abc-123" or "ID=abc-123"),
-     * but the timeline stores just the raw ID value.
-     */
-    get timelineSelectedEventId() {
-        if (!this.selectedRecordId)
-            return null;
-        // Handle "ID|value" format (pipe separator)
-        if (this.selectedRecordId.includes('|')) {
-            const parts = this.selectedRecordId.split('|');
-            return parts.length > 1 ? parts[1] : this.selectedRecordId;
-        }
-        // Handle "ID=value" format (equals separator)
-        if (this.selectedRecordId.includes('=')) {
-            const parts = this.selectedRecordId.split('=');
-            return parts.length > 1 ? parts[1] : this.selectedRecordId;
-        }
-        // Return as-is if no separator found
-        return this.selectedRecordId;
+    get EffectiveFilterText() {
+        return this.FilterText ?? this.InternalFilterText;
     }
     /**
      * Get the effective sort state (external or internal)
      */
-    get effectiveSortState() {
-        return this.sortState ?? this.internalSortState;
-    }
-    /**
-     * Get the OrderBy string for mj-entity-data-grid from the effective sort state
-     */
-    get effectiveSortOrderBy() {
-        const sortState = this.effectiveSortState;
-        if (!sortState?.field || !sortState.direction) {
-            return '';
-        }
-        return `${sortState.field} ${sortState.direction.toUpperCase()}`;
+    get EffectiveSortState() {
+        return this.SortState ?? this.InternalSortState;
     }
     /**
      * Get merged configuration with defaults
      */
-    get effectiveConfig() {
-        return { ...DEFAULT_VIEWER_CONFIG, ...this.config };
-    }
-    /**
-     * Get cached grid params - only recreates object when entity or viewEntity changes
-     * This prevents Angular from seeing a new object reference on every change detection
-     * which would cause the grid to reinitialize
-     */
-    get gridParams() {
-        const entity = this.effectiveEntity;
-        if (!entity) {
-            return null;
-        }
-        // Check if we need to recreate the params object
-        const entityChanged = this._lastGridParamsEntity !== entity.Name;
-        const viewEntityChanged = this._lastGridParamsViewEntity !== this.viewEntity;
-        if (entityChanged || viewEntityChanged || !this._cachedGridParams) {
-            this._lastGridParamsEntity = entity.Name;
-            this._lastGridParamsViewEntity = this.viewEntity ?? null;
-            this._cachedGridParams = {
-                EntityName: entity.Name,
-                ViewEntity: this.viewEntity || undefined
-            };
-        }
-        return this._cachedGridParams;
-    }
-    /**
-     * Get the effective grid toolbar configuration
-     * Merges user-provided config with defaults appropriate for entity-viewer context
-     */
-    get effectiveGridToolbarConfig() {
-        const defaults = {
-            showSearch: false, // Entity-viewer has its own filter
-            showRefresh: true,
-            showAdd: true,
-            showDelete: true,
-            showExport: true,
-            showColumnChooser: true,
-            showRowCount: true,
-            showSelectionCount: true
-        };
-        return { ...defaults, ...this.gridToolbarConfig };
+    get EffectiveConfig() {
+        return { ...DEFAULT_VIEWER_CONFIG, ...this.Config };
     }
     /**
      * Get the records to display (external or internal)
      */
-    get displayRecords() {
-        return this.records ?? this.internalRecords;
+    get DisplayRecords() {
+        return this.Records ?? this.InternalRecords;
     }
     /**
      * Get filtered records - when using server-side filtering, records are already filtered
      * When using client-side filtering, apply filter locally
      */
-    get filteredRecords() {
-        const records = this.displayRecords;
+    get FilteredRecords() {
+        const records = this.DisplayRecords;
         // If server-side filtering is enabled, records are already filtered
-        if (this.effectiveConfig.serverSideFiltering) {
+        if (this.EffectiveConfig.serverSideFiltering) {
             return records;
         }
         // Client-side filtering fallback
-        const filterText = this.debouncedFilterText?.trim().toLowerCase();
-        this.hiddenFieldMatches.clear();
-        if (!filterText || !this.entity) {
+        const filterText = this.DebouncedFilterText?.trim().toLowerCase();
+        this.HiddenFieldMatches.clear();
+        if (!filterText || !this.Entity) {
             return records;
         }
         const visibleFields = this.getVisibleFieldNames();
         return records.filter(record => {
             const matchResult = this.recordMatchesFilter(record, filterText, visibleFields);
             if (matchResult.matches && matchResult.matchedField && !matchResult.matchedInVisibleField) {
-                const recordKey = buildPkString(record, this.entity);
-                this.hiddenFieldMatches.set(recordKey, matchResult.matchedField);
+                const recordKey = buildPkString(record, this.Entity);
+                this.HiddenFieldMatches.set(recordKey, matchResult.matchedField);
             }
             return matchResult.matches;
         });
@@ -822,11 +700,11 @@ export class EntityViewerComponent extends BaseAngularComponent {
      * Check if a record matches the filter text (client-side)
      */
     recordMatchesFilter(record, filterText, visibleFields) {
-        if (!this.entity)
+        if (!this.Entity)
             return { matches: true, matchedField: null, matchedInVisibleField: false };
         let matchedField = null;
         let matchedInVisibleField = false;
-        for (const field of this.entity.Fields) {
+        for (const field of this.Entity.Fields) {
             if (!this.shouldSearchField(field))
                 continue;
             const value = record[field.Name];
@@ -883,36 +761,36 @@ export class EntityViewerComponent extends BaseAngularComponent {
      */
     getVisibleFieldNames() {
         const visible = new Set();
-        if (!this.entity)
+        if (!this.Entity)
             return visible;
-        for (const field of this.entity.Fields) {
+        for (const field of this.Entity.Fields) {
             if (field.DefaultInView === true) {
                 visible.add(field.Name);
             }
         }
-        if (this.entity.NameField) {
-            visible.add(this.entity.NameField.Name);
+        if (this.Entity.NameField) {
+            visible.add(this.Entity.NameField.Name);
         }
         return visible;
     }
     /**
      * Check if a record matched on a hidden field
      */
-    hasHiddenFieldMatch(record) {
-        if (!this.debouncedFilterText || !this.entity)
+    HasHiddenFieldMatch(record) {
+        if (!this.DebouncedFilterText || !this.Entity)
             return false;
-        return this.hiddenFieldMatches.has(buildPkString(record, this.entity));
+        return this.HiddenFieldMatches.has(buildPkString(record, this.Entity));
     }
     /**
      * Get the name of the hidden field that matched for display
      */
-    getHiddenMatchFieldName(record) {
-        if (!this.entity)
+    GetHiddenMatchFieldName(record) {
+        if (!this.Entity)
             return '';
-        const fieldName = this.hiddenFieldMatches.get(buildPkString(record, this.entity));
-        if (!fieldName || !this.entity)
+        const fieldName = this.HiddenFieldMatches.get(buildPkString(record, this.Entity));
+        if (!fieldName || !this.Entity)
             return '';
-        const field = this.entity.Fields.find(f => f.Name === fieldName);
+        const field = this.Entity.Fields.find(f => f.Name === fieldName);
         return field ? field.DisplayNameOrName : fieldName;
     }
     // ========================================
@@ -922,18 +800,22 @@ export class EntityViewerComponent extends BaseAngularComponent {
         this.applyConfig();
         this.setupFilterDebounce();
         // Initialize debounced filter from external filter text if provided
-        if (this.filterText !== null) {
-            this.debouncedFilterText = this.filterText;
+        if (this.FilterText !== null) {
+            this.DebouncedFilterText = this.FilterText;
         }
         // Initialize sort state from config
-        if (this.effectiveConfig.defaultSortField) {
-            this.internalSortState = {
-                field: this.effectiveConfig.defaultSortField,
-                direction: this.effectiveConfig.defaultSortDirection ?? 'asc'
+        if (this.EffectiveConfig.defaultSortField) {
+            this.InternalSortState = {
+                field: this.EffectiveConfig.defaultSortField,
+                direction: this.EffectiveConfig.defaultSortDirection ?? 'asc'
             };
         }
         // Mark as initialized - setters will now trigger data loading
         this._initialized = true;
+        // Load the view-type registry and source the available-modes list from it.
+        // Fire-and-forget: until it resolves (or if it fails), the template uses the
+        // hardcoded fallback switcher, so behavior is unchanged on un-seeded systems.
+        void this.ensureViewTypesLoaded();
         // If viewEntity was set before initialization, extract its sort state now.
         // The viewEntity setter skips this when _initialized is false.
         if (this._viewEntity) {
@@ -958,7 +840,7 @@ export class EntityViewerComponent extends BaseAngularComponent {
         Promise.resolve().then(async () => {
             try {
                 if (this._initialized && this._entity && !this._records) {
-                    await this.loadData();
+                    await this.LoadData();
                 }
             }
             finally {
@@ -968,7 +850,60 @@ export class EntityViewerComponent extends BaseAngularComponent {
             }
         });
     }
+    ngAfterViewInit() {
+        // CRITICAL: the active view type is selected during ngOnInit (Entity setter → refreshAvailableViewTypes
+        // → applyViewTypeSelection → selectDynamicRenderer), but `dynamicViewHost` is a NON-static @ViewChild
+        // that only resolves now (ngAfterViewInit). So that earlier selectDynamicRenderer() returned early
+        // (host undefined) and never created the renderer — leaving a stale ActiveDynamicOption with no
+        // mounted ref (symptom: "171 records" header but an empty grid, pushInputs SKIPPED ref=null). Now
+        // that the host exists, mount the active renderer if it hasn't been.
+        if (this.ActiveDynamicOption && !this.dynamicRendererRef && this.dynamicViewHost) {
+            this.selectDynamicRenderer(this.ActiveDynamicOption);
+        }
+        // Detect re-attach: Explorer caches resource components and detaches/re-attaches their VIEW
+        // without firing ngOnInit/ngOnDestroy. When the dashboard tab is re-focused, this viewer's host
+        // re-enters the DOM/viewport — but the mounted plug-in (e.g. AG Grid) was rendered while detached
+        // and may show an empty body even though the data is still loaded. An IntersectionObserver gives
+        // us a reliable "became visible again" signal with no lifecycle hook.
+        if (typeof IntersectionObserver !== 'undefined' && this.elementRef?.nativeElement) {
+            this.ngZone.runOutsideAngular(() => {
+                this._visibilityObserver = new IntersectionObserver((entries) => {
+                    const visible = entries.some(e => e.isIntersecting);
+                    if (visible && !this._wasVisible) {
+                        this._wasVisible = true;
+                        this.ngZone.run(() => this.onViewerReattached());
+                    }
+                    else if (!visible) {
+                        this._wasVisible = false;
+                    }
+                });
+                this._visibilityObserver.observe(this.elementRef.nativeElement);
+            });
+        }
+    }
+    /**
+     * Called when the viewer becomes visible again after being detached (cached-tab reattach). Mounts
+     * the active plug-in if it was never created (host wasn't ready at selection time), or re-pushes the
+     * current inputs so a host-fed grid re-renders its rows (the "N records in header but empty grid on
+     * return" symptom).
+     */
+    onViewerReattached() {
+        const active = this.ActiveDynamicOption;
+        if (active && !this.dynamicRendererRef && this.dynamicViewHost) {
+            // Active view type selected but never mounted (host wasn't ready at selection time) — mount now.
+            this.selectDynamicRenderer(active);
+        }
+        else if (active && this.dynamicRendererRef) {
+            // Re-assert visibility (force display:block) + re-push inputs so the mounted renderer re-renders.
+            this.setRendererVisible(this.dynamicRendererRef, true);
+            this.pushDynamicRendererInputs();
+            this.dynamicRendererRef.changeDetectorRef.detectChanges();
+        }
+    }
     ngOnDestroy() {
+        this._visibilityObserver?.disconnect();
+        this._visibilityObserver = null;
+        this.clearDynamicRendererCache();
         this.destroy$.next();
         this.destroy$.complete();
     }
@@ -982,13 +917,13 @@ export class EntityViewerComponent extends BaseAngularComponent {
      */
     applySortStateFromView(view) {
         if (!view) {
-            this.internalSortState = null;
+            this.InternalSortState = null;
             return;
         }
         // Priority 1: SortState column (via ViewSortInfo)
         const viewSortInfo = view.ViewSortInfo;
         if (viewSortInfo && viewSortInfo.length > 0) {
-            this.internalSortState = {
+            this.InternalSortState = {
                 field: viewSortInfo[0].field,
                 direction: viewSortInfo[0].direction?.toLowerCase() === 'desc' ? 'desc' : 'asc'
             };
@@ -999,7 +934,7 @@ export class EntityViewerComponent extends BaseAngularComponent {
             const gridState = view.GridStateObject;
             if (gridState?.sortSettings && gridState.sortSettings.length > 0) {
                 const firstSort = gridState.sortSettings[0];
-                this.internalSortState = {
+                this.InternalSortState = {
                     field: firstSort.field,
                     direction: firstSort.dir === 'desc' ? 'desc' : 'asc'
                 };
@@ -1007,31 +942,29 @@ export class EntityViewerComponent extends BaseAngularComponent {
             }
         }
         // No sort defined — reset to prevent stale sort from previous view
-        this.internalSortState = null;
+        this.InternalSortState = null;
     }
     applyConfig() {
-        const config = this.effectiveConfig;
-        this.pagination.pageSize = config.pageSize;
-        if (this.viewMode === null) {
-            this.internalViewMode = config.defaultViewMode;
-        }
+        const config = this.EffectiveConfig;
+        this.Pagination.pageSize = config.pageSize;
     }
     setupFilterDebounce() {
         this.filterInput$
-            .pipe(debounceTime(this.effectiveConfig.filterDebounceMs), distinctUntilChanged(), takeUntil(this.destroy$))
+            .pipe(debounceTime(this.EffectiveConfig.filterDebounceMs), distinctUntilChanged(), takeUntil(this.destroy$))
             .subscribe(filterText => {
-            const oldFilter = this.debouncedFilterText;
-            this.debouncedFilterText = filterText;
-            this.filterTextChange.emit(filterText);
+            const oldFilter = this.DebouncedFilterText;
+            this.DebouncedFilterText = filterText;
+            this.FilterTextChange.emit(filterText);
             // If server-side filtering and filter changed, reload from page 1
             // Keep existing records visible during refresh for better UX
-            if (this.effectiveConfig.serverSideFiltering && filterText !== oldFilter && !this.records) {
+            if (this.EffectiveConfig.serverSideFiltering && filterText !== oldFilter && !this.Records) {
                 this.resetPaginationState(false);
-                this.loadData();
+                this.LoadData();
             }
             else {
                 this.updateFilteredCount();
             }
+            this.pushDynamicRendererInputs(); // client-side filter changed — refresh a mounted plug-in
             this.cdr.detectChanges();
         });
     }
@@ -1039,12 +972,12 @@ export class EntityViewerComponent extends BaseAngularComponent {
      * Update the filtered record count and emit event
      */
     updateFilteredCount() {
-        const newCount = this.filteredRecords.length;
-        if (this.filteredRecordCount !== newCount) {
-            this.filteredRecordCount = newCount;
-            this.filteredCountChanged.emit({
+        const newCount = this.FilteredRecords.length;
+        if (this.FilteredRecordCount !== newCount) {
+            this.FilteredRecordCount = newCount;
+            this.FilteredCountChanged.emit({
                 filteredCount: newCount,
-                totalCount: this.totalRecordCount
+                totalCount: this.TotalRecordCount
             });
         }
     }
@@ -1054,17 +987,17 @@ export class EntityViewerComponent extends BaseAngularComponent {
      * When clearRecords is false, keeps existing records visible during refresh - use for sort/filter changes.
      */
     resetPaginationState(clearRecords = true) {
-        this.pagination = {
+        this.Pagination = {
             currentPage: 0,
-            pageSize: this.effectiveConfig.pageSize,
-            totalRecords: clearRecords ? 0 : this.pagination.totalRecords,
+            pageSize: this.EffectiveConfig.pageSize,
+            totalRecords: clearRecords ? 0 : this.Pagination.totalRecords,
             hasMore: false,
             isLoading: false
         };
         if (clearRecords) {
-            this.internalRecords = [];
-            this.totalRecordCount = 0;
-            this.filteredRecordCount = 0;
+            this.InternalRecords = [];
+            this.TotalRecordCount = 0;
+            this.FilteredRecordCount = 0;
         }
         this.isInitialLoad = true;
     }
@@ -1078,12 +1011,12 @@ export class EntityViewerComponent extends BaseAngularComponent {
     /**
      * Load data for the current entity with server-side filtering/sorting/pagination
      */
-    async loadData() {
-        const entity = this.effectiveEntity;
+    async LoadData() {
+        const entity = this.EffectiveEntity;
         if (!entity) {
-            this.internalRecords = [];
-            this.totalRecordCount = 0;
-            this.filteredRecordCount = 0;
+            this.InternalRecords = [];
+            this.TotalRecordCount = 0;
+            this.FilteredRecordCount = 0;
             return;
         }
         // Increment sequence to track this load request
@@ -1091,55 +1024,60 @@ export class EntityViewerComponent extends BaseAngularComponent {
         // If a load is already in progress, set a flag so we reload once the current
         // load completes. We can't use deferReload() here because the microtask would
         // fire while isLoading is still true, causing an infinite loop.
-        if (this.isLoading) {
+        if (this.IsLoading) {
             this._pendingReload = true;
             return;
         }
-        this.isLoading = true;
-        this.pagination.isLoading = true;
-        this.loadingMessage = `Loading ${entity.Name}...`;
+        this.IsLoading = true;
+        this.Pagination.isLoading = true;
+        this.LoadingMessage = `Loading ${entity.Name}...`;
         this.cdr.detectChanges();
         const startTime = Date.now();
-        const config = this.effectiveConfig;
+        const config = this.EffectiveConfig;
         try {
             const rv = RunView.FromMetadataProvider(this.ProviderToUse);
             // Build OrderBy clause
             // Priority: 1) External/internal sort state  2) View's OrderByClause
             //           3) GridState.sortSettings (saved user defaults)  4) undefined
             let orderBy;
-            const sortState = this.effectiveSortState;
+            const sortState = this.EffectiveSortState;
             if (config.serverSideSorting && sortState?.field && sortState.direction) {
                 orderBy = `${sortState.field} ${sortState.direction.toUpperCase()}`;
             }
-            else if (this.viewEntity?.OrderByClause) {
-                orderBy = this.viewEntity.OrderByClause;
+            else if (this.ViewEntity?.OrderByClause) {
+                orderBy = this.ViewEntity.OrderByClause;
             }
-            else if (this.gridState?.sortSettings?.length) {
-                orderBy = this.gridState.sortSettings
+            else if (this.GridState?.sortSettings?.length) {
+                orderBy = this.GridState.sortSettings
                     .map(s => `${s.field} ${(s.dir || 'asc').toUpperCase()}`)
                     .join(', ');
             }
-            // Map mode loads all records (up to MAP_MAX_RECORDS) since paging
-            // doesn't make sense for geographic visualization. Other modes use
-            // standard page-based pagination.
-            const isMapMode = this.effectiveViewMode === 'map';
-            const maxRows = isMapMode ? EntityViewerComponent.MAP_MAX_RECORDS : config.pageSize;
-            const startRow = isMapMode ? 0 : this.pagination.currentPage * config.pageSize;
+            // When a plug-in renderer has asked the container to load the full set (via a generic
+            // ViewDataRequest with loadAll:true), load all records up to the safety cap and skip
+            // pagination. Otherwise use standard page-based pagination. This is fully view-type-agnostic
+            // — the container never inspects which plug-in is mounted.
+            const maxRows = this._loadAllRecords ? EntityViewerComponent.LOAD_ALL_MAX_RECORDS : config.pageSize;
+            const startRow = this._loadAllRecords ? 0 : this.Pagination.currentPage * config.pageSize;
             // Build ExtraFilter from view's WhereClause if available
             // The view's WhereClause is the "business filter" - UserSearchString is additive
-            const extraFilter = this.viewEntity?.WhereClause || undefined;
+            const extraFilter = this.ViewEntity?.WhereClause || undefined;
             const result = await rv.RunView({
                 EntityName: entity.Name,
                 ResultType: 'simple',
-                Fields: computeFieldsList(entity, this.gridState),
+                // Load the FULL field set. The container is a generic plug-in host: different view types need
+                // different fields (the grid shows its columns, but Timeline needs the date field, Map needs
+                // lat/long, etc.). It cannot restrict to any one plug-in's columns, so it fetches all fields and
+                // lets each plug-in pick what it needs. (Omitting `Fields` on a 'simple' RunView returns all
+                // entity fields.) Previously this used `computeFieldsList(entity, GridState)` — correct when the
+                // host WAS the grid, but it dropped `__mj_*` date fields, leaving Timeline with "no events".
                 MaxRows: maxRows,
                 StartRow: startRow,
                 OrderBy: orderBy,
                 ExtraFilter: extraFilter,
                 // Only use UserSearchString for regular text search, NOT for smart filters
                 // Smart filters generate WhereClause via AI on the server, so the prompt text should not be passed as UserSearchString
-                UserSearchString: config.serverSideFiltering && !this.viewEntity?.SmartFilterEnabled
-                    ? this.debouncedFilterText || undefined
+                UserSearchString: config.serverSideFiltering && !this.ViewEntity?.SmartFilterEnabled
+                    ? this.DebouncedFilterText || undefined
                     : undefined
             });
             // Check if this load is still the current one (detect stale responses)
@@ -1148,50 +1086,47 @@ export class EntityViewerComponent extends BaseAngularComponent {
             }
             if (result.Success) {
                 // Always replace records (page-based navigation, not accumulation)
-                this.internalRecords = result.Results;
-                this.totalRecordCount = result.TotalRowCount;
-                this.filteredRecordCount = this.internalRecords.length;
+                this.InternalRecords = result.Results;
+                this.TotalRecordCount = result.TotalRowCount;
+                this.FilteredRecordCount = this.InternalRecords.length;
                 // Update pagination state
-                this.pagination.totalRecords = result.TotalRowCount;
-                this.pagination.hasMore = false; // No longer used with page-based paging
-                // Re-check geo support after data loads (effectiveEntity may have resolved via viewEntity)
-                this.updateGeoCodingSupport();
-                this.dataLoaded.emit({
+                this.Pagination.totalRecords = result.TotalRowCount;
+                this.Pagination.hasMore = false; // No longer used with page-based paging
+                this.DataLoaded.emit({
                     totalRowCount: result.TotalRowCount,
-                    loadedRowCount: this.internalRecords.length,
+                    loadedRowCount: this.InternalRecords.length,
                     loadTime: Date.now() - startTime,
-                    records: this.internalRecords
+                    records: this.InternalRecords
                 });
-                this.filteredCountChanged.emit({
-                    filteredCount: this.internalRecords.length,
+                this.FilteredCountChanged.emit({
+                    filteredCount: this.InternalRecords.length,
                     totalCount: result.TotalRowCount
                 });
-                // Update timeline groups with new data
-                this.updateTimelineGroups();
             }
             else {
                 if (this.isInitialLoad) {
-                    this.internalRecords = [];
+                    this.InternalRecords = [];
                 }
-                this.totalRecordCount = 0;
-                this.filteredRecordCount = 0;
+                this.TotalRecordCount = 0;
+                this.FilteredRecordCount = 0;
             }
         }
         catch (error) {
             if (this.isInitialLoad) {
-                this.internalRecords = [];
+                this.InternalRecords = [];
             }
-            this.totalRecordCount = 0;
-            this.filteredRecordCount = 0;
+            this.TotalRecordCount = 0;
+            this.FilteredRecordCount = 0;
         }
         finally {
             // Use ngZone.run() to ensure state changes trigger change detection.
             // With es2022 native async/await + zone.js 0.16, the await resumes
             // outside Angular's zone, so detectChanges() alone may not flush properly.
             this.ngZone.run(() => {
-                this.isLoading = false;
-                this.pagination.isLoading = false;
+                this.IsLoading = false;
+                this.Pagination.isLoading = false;
                 this.isInitialLoad = false;
+                this.pushDynamicRendererInputs(); // keep a mounted plug-in renderer in sync with new data
                 this.cdr.detectChanges();
             });
             // If a reload was requested while we were loading, trigger it now.
@@ -1199,699 +1134,660 @@ export class EntityViewerComponent extends BaseAngularComponent {
             if (this._pendingReload) {
                 this._pendingReload = false;
                 this.resetPaginationState();
-                this.loadData();
+                this.LoadData();
             }
         }
     }
     /**
      * Handle page change from PaginationComponent
      */
-    onPageChange(event) {
-        this.pagination.currentPage = event.PageNumber - 1; // Convert 1-based to 0-based
+    OnPageChange(event) {
+        this.Pagination.currentPage = event.PageNumber - 1; // Convert 1-based to 0-based
         this.isInitialLoad = true; // Treat page navigation as a fresh load for loading state
-        this.loadData();
+        this.LoadData();
     }
     /**
      * Refresh data (re-load from server, starting at page 1)
      * Keeps existing records visible during refresh for better UX
      */
-    refresh() {
-        if (!this.records) {
+    Refresh() {
+        if (!this.Records) {
             this.resetPaginationState(false);
-            this.loadData();
+            this.LoadData();
         }
     }
     // ========================================
     // VIEW MODE
     // ========================================
     /**
-     * Set the view mode and emit change event
-     */
-    setViewMode(mode) {
-        const previousMode = this.effectiveViewMode;
-        if (previousMode !== mode) {
-            this.internalViewMode = mode;
-            this.viewModeChange.emit(mode);
-            // Reload data when switching to/from map mode because map loads all
-            // records (up to MAP_MAX_RECORDS) while other modes use page-based pagination.
-            const switchingToMap = mode === 'map' && previousMode !== 'map';
-            const switchingFromMap = mode !== 'map' && previousMode === 'map';
-            if (switchingToMap || switchingFromMap) {
-                this.resetPaginationState();
-                this.loadData();
-            }
-            else {
-                this.cdr.detectChanges();
-            }
-        }
-    }
-    // ========================================
-    // FILTERING
-    // ========================================
-    /**
-     * Handle filter input change
-     */
-    onFilterChange(value) {
-        this.internalFilterText = value;
-        this.filterInput$.next(value);
-    }
-    /**
-     * Clear the filter
+     * Loads the ViewTypeEngine once, then recomputes the available view types for the
+     * current entity. Fire-and-forget from lifecycle/setters — failures simply leave the
+     * switcher empty until the registry is available.
      */
-    clearFilter() {
-        this.internalFilterText = '';
-        this.filterInput$.next('');
-        this.cdr.detectChanges();
-    }
-    // ========================================
-    // SORTING
-    // ========================================
-    /**
-     * Handle sort change from grid component
-     */
-    onSortChanged(event) {
-        const oldSort = this.internalSortState;
-        this.internalSortState = event.sort;
-        this.sortChanged.emit(event);
-        // If server-side sorting, reload from page 1
-        // Keep existing records visible during refresh for better UX
-        if (this.effectiveConfig.serverSideSorting && !this.records) {
-            const sortChanged = !oldSort || !event.sort ||
-                oldSort.field !== event.sort?.field ||
-                oldSort.direction !== event.sort?.direction;
-            if (sortChanged) {
-                this.resetPaginationState(false);
-                this.loadData();
-            }
+    async ensureViewTypesLoaded() {
+        try {
+            const provider = this.ProviderToUse;
+            await ViewTypeEngine.Instance.Config(false, provider?.CurrentUser, provider ?? undefined);
+            // Let plug-in descriptors (e.g. Cluster) preload availability data before predicates run.
+            await ViewTypeEngine.Instance.EnsureAvailabilityData(provider ?? undefined);
+            this.refreshAvailableViewTypes();
+        }
+        catch {
+            // Engine unavailable / not seeded — leave the switcher empty.
+            this.ViewTypesFromRegistry = false;
         }
     }
-    // ========================================
-    // EVENT HANDLERS
-    // ========================================
     /**
-     * Handle record selection from child components (grid or cards)
+     * Recomputes {@link AvailableViewTypes} from the registry for the current entity. Every
+     * available view type is a dynamic-mounted plug-in. Reconciles the active selection when the
+     * previously-active type is no longer available (e.g. the entity changed).
      */
-    onRecordSelected(event) {
-        this.recordSelected.emit(event);
+    refreshAvailableViewTypes() {
+        const entity = this.EffectiveEntity;
+        if (!entity) {
+            this.AvailableViewTypes = [];
+            this.ViewTypesFromRegistry = false;
+            return;
+        }
+        // Self-contained config seeding: pull per-view-type config from the loaded view record or
+        // the per-user default-view setting when the consumer didn't supply it via [ViewTypeConfigs].
+        this.seedViewTypeConfigsIfEmpty();
+        let rows = [];
+        try {
+            rows = ViewTypeEngine.Instance.GetAvailableViewTypeRows(entity, this.ProviderToUse ?? undefined);
+        }
+        catch {
+            rows = [];
+        }
+        const options = [];
+        for (const { ViewType, Descriptor } of rows) {
+            options.push({
+                key: Descriptor.Name,
+                mode: null, // every view type is dynamic-mounted
+                label: Descriptor.DisplayName,
+                icon: Descriptor.Icon ?? '',
+                isDynamic: true,
+                descriptor: Descriptor,
+                viewTypeId: ViewType.ID,
+            });
+        }
+        this.AvailableViewTypes = options;
+        this.ViewTypesFromRegistry = options.length > 0;
+        // Keep the active key valid: if the previously-active type is no longer available
+        // (entity changed), select — in priority order — the resolved initial ViewTypeID
+        // (explicit input → loaded view record → per-user default-view setting), then the first
+        // available type.
+        if (options.length > 0 && !options.some(o => o.key === this.ActiveViewTypeKey)) {
+            const desiredId = this.resolveInitialViewTypeId();
+            const desired = desiredId ? options.find(o => o.viewTypeId === desiredId) : undefined;
+            const fallback = desired ?? options[0];
+            this.applyViewTypeSelection(fallback, false);
+        }
+        this.cdr.detectChanges();
     }
     /**
-     * Handle record opened from child components (grid or cards)
+     * Returns the switcher option for the active view type (for the current-type chip in the
+     * switcher), or null before the registry resolves.
      */
-    onRecordOpened(event) {
-        this.recordOpened.emit(event);
+    get ActiveViewTypeOption() {
+        return this.AvailableViewTypes.find(o => o.key === this.ActiveViewTypeKey) ?? null;
     }
     /**
-     * Handle grid state changes (column resize, reorder, etc.)
+     * Selects a view type from the switcher. Built-in types route to {@link setViewMode}
+     * (preserving the rich grid/cards/timeline/map integration); plug-in types are
+     * dynamic-mounted via the descriptor's RendererComponent. Emits {@link viewTypeChange}
+     * so hosts can persist `UserView.ViewTypeID`.
      */
-    onGridStateChanged(event) {
-        this.gridStateChanged.emit(event);
+    SelectViewType(option) {
+        this.ViewTypeDropdownOpen = false;
+        this.applyViewTypeSelection(option, true);
     }
     /**
-     * Handle page change from the data grid's pager
+     * Selects a view type by its `MJ: View Types` row ID. This is the entry point used by external
+     * chrome (e.g. the workspace toolbar's {@link ViewTypeSwitcherComponent}) that surfaces the
+     * switcher outside the viewer's own header. Resolves the matching available option and applies
+     * it through the same lifecycle as a header-driven switch (cancelable events + persistence).
+     * No-op when the ID isn't an available view type or is already active.
+     *
+     * @param viewTypeId the `MJ: View Types` row ID to switch to.
      */
-    onGridPageChange(event) {
-        this.onPageChange(event);
-    }
-    // ========================================
-    // DATA GRID EVENT HANDLERS
-    // ========================================
-    /**
-     * Handle row click from mj-entity-data-grid
-     * Maps to recordSelected event for parent components
-     */
-    onDataGridRowClick(event) {
-        const entity = this.effectiveEntity;
-        if (!entity || !event.row)
+    SelectViewTypeById(viewTypeId) {
+        if (!viewTypeId) {
             return;
-        this.recordSelected.emit({
-            record: event.row,
-            entity: entity,
-            compositeKey: buildCompositeKey(event.row, entity)
-        });
+        }
+        const option = this.AvailableViewTypes.find(o => o.viewTypeId === viewTypeId);
+        if (option && option.key !== this.ActiveViewTypeKey) {
+            this.applyViewTypeSelection(option, true);
+        }
     }
     /**
-     * Handle row double-click from mj-entity-data-grid
-     * Maps to recordOpened event for parent components
+     * The `MJ: View Types` row ID of the currently-active view type, or null before the registry
+     * resolves. Lets external chrome (the workspace toolbar switcher) reflect the viewer's active
+     * type without reaching into the viewer's internal {@link ViewModeOption}s.
      */
-    onDataGridRowDoubleClick(event) {
-        const entity = this.effectiveEntity;
-        if (!entity || !event.row)
-            return;
-        this.recordOpened.emit({
-            record: event.row,
-            entity: entity,
-            compositeKey: buildCompositeKey(event.row, entity)
-        });
+    get ActiveViewTypeId() {
+        return this.ActiveViewTypeOption?.viewTypeId ?? null;
     }
     /**
-     * Handle sort changed from mj-entity-data-grid
-     * Maps to sortChanged event for parent components
+     * Applies a view-type selection. `emit` is true for user-initiated switches (fires the
+     * cancelable {@link BeforeViewTypeChange}, persists when {@link AutoSaveView} is on, then fires
+     * {@link AfterViewTypeChange}) and false for internal reconciliation (no events, no persist).
+     *
+     * Every view type is a dynamic-mounted plug-in: this tears down the previous renderer and mounts
+     * the selected descriptor's `RendererComponent`. The container resets its generic load mode (a
+     * fresh plug-in that needs the full set will re-request it via `dataRequest({loadAll:true})`) and
+     * reloads page-based data when the active type changes.
      */
-    onDataGridSortChanged(event) {
-        // Convert the data grid's sort state to our SortState format
-        const newSort = event.newSortState && event.newSortState.length > 0
-            ? {
-                field: event.newSortState[0].field,
-                direction: event.newSortState[0].direction
+    applyViewTypeSelection(option, emit) {
+        const previousViewTypeId = this.ActiveViewTypeOption?.viewTypeId ?? null;
+        if (emit) {
+            const before = {
+                ViewTypeID: option.viewTypeId,
+                DriverClass: option.key,
+                PreviousViewTypeID: previousViewTypeId,
+                Cancel: false,
+            };
+            this.BeforeViewTypeChange.emit(before);
+            if (before.Cancel) {
+                return; // a handler vetoed the switch — leave the switcher unchanged
             }
-            : null;
-        this.internalSortState = newSort;
-        this.sortChanged.emit({ sort: newSort });
-        // If server-side sorting, reload from page 1.
-        // Use deferReload() so that if a view-switch reload is already in-flight
-        // (e.g., AG Grid fired an async sortChanged from applySortStateToGrid),
-        // we don't trigger a redundant second RunView.
-        // For normal user-initiated column-header clicks, no deferred reload is
-        // pending so deferReload() fires immediately — no UX difference.
-        if (this.effectiveConfig.serverSideSorting && !this.records) {
+        }
+        const typeChanged = this.ActiveViewTypeKey !== option.key;
+        this.ActiveViewTypeKey = option.key;
+        this.ActiveDynamicOption = option;
+        this.selectDynamicRenderer(option);
+        // On a real type switch, drop any prior load-all mode and reload page-based data so the newly
+        // mounted plug-in starts from the standard paginated set. A plug-in needing everything (e.g. a
+        // map) re-asks via dataRequest on its own init. Skip the reload for the initial reconciliation
+        // (no prior type) — the regular entity/view data-load path already handles the first load.
+        if (typeChanged && previousViewTypeId !== null && this._loadAllRecords && !this._records) {
+            this._loadAllRecords = false;
             this.resetPaginationState(false);
-            this.deferReload();
+            this.LoadData();
         }
-    }
-    /**
-     * Handle foreign key link click from mj-entity-data-grid
-     * Bubbles the event up for parent components to handle navigation
-     */
-    /**
-     * Handle foreign key link click from mj-entity-data-grid
-     * Converts to recordOpened event for seamless navigation integration
-     */
-    onForeignKeyClick(event) {
-        // Look up the related entity by name
-        const md = this.ProviderToUse;
-        const relatedEntity = event.relatedEntityName
-            ? md.Entities.find(e => e.Name === event.relatedEntityName)
-            : md.Entities.find(e => UUIDsEqual(e.ID, event.relatedEntityId));
-        if (!relatedEntity) {
-            return;
+        if (emit) {
+            if (this.AutoSaveView) {
+                void this.persistActiveViewType(option);
+            }
+            this.AfterViewTypeChange.emit({
+                ViewTypeID: option.viewTypeId,
+                DriverClass: option.key,
+                PreviousViewTypeID: previousViewTypeId,
+                Cancel: false,
+            });
         }
-        // Create composite key using the target entity's actual primary key field name
-        const pkFieldName = relatedEntity.FirstPrimaryKey?.Name || 'ID';
-        const compositeKey = new CompositeKey([{ FieldName: pkFieldName, Value: event.recordId }]);
-        // Emit recordOpened for the related entity (record is undefined since it's not loaded)
-        this.recordOpened.emit({
-            entity: relatedEntity,
-            compositeKey
-        });
-    }
-    /**
-     * Handle Add/New button click from data grid toolbar
-     */
-    onGridAddRequested() {
-        this.addRequested.emit();
-    }
-    /**
-     * Handle Refresh button click from data grid toolbar
-     */
-    onGridRefreshRequested() {
-        this.refreshRequested.emit();
-        // Also trigger an internal refresh
-        this.refresh();
-    }
-    /**
-     * Handle Delete button click from data grid toolbar
-     */
-    onGridDeleteRequested(records) {
-        this.deleteRequested.emit({ records });
-    }
-    /**
-     * Handle Export button click from data grid toolbar
-     */
-    onGridExportRequested() {
-        this.exportRequested.emit({ format: 'excel' });
-    }
-    /**
-     * Handle Add to List button click from data grid toolbar.
-     * Forwards the event to parent components for list management.
-     */
-    onGridAddToListRequested(event) {
-        this.addToListRequested.emit(event);
-    }
-    /**
-     * Handle selection change from data grid.
-     * Converts selected keys to records and forwards to parent components.
-     */
-    onGridSelectionChange(selectedKeys) {
-        const entity = this.effectiveEntity;
-        if (!entity)
-            return;
-        // Find the actual records from our filtered records
-        const records = this.filteredRecords.filter(record => {
-            const key = buildPkString(record, entity);
-            return selectedKeys.includes(key);
-        });
-        // Get the raw primary key values for list management
-        const recordIds = records.map(record => String(record[entity.PrimaryKeys[0].Name]));
-        this.selectionChanged.emit({ records, recordIds });
+        this.cdr.detectChanges();
     }
     // ========================================
-    // TIMELINE METHODS
+    // VIEW-TYPE PERSISTENCE (provider-based; never routing)
     // ========================================
     /**
-     * Handle timeline event click - emit as record selection
+     * Where view-type/config persists when {@link AutoSaveView} is on: a loaded `UserView` record,
+     * per-user User Settings (the default-view case), or nowhere.
      */
-    onTimelineEventClick(event) {
-        const record = event.event.entity;
-        const entity = this.effectiveEntity;
-        if (record && entity) {
-            this.recordSelected.emit({
-                record,
-                entity: entity,
-                compositeKey: buildCompositeKey(record, entity)
-            });
+    persistenceTarget() {
+        if (this._viewEntity?.ID) {
+            return 'record';
         }
+        if (this.EffectiveEntity) {
+            return 'user-settings';
+        }
+        return 'none';
     }
-    /**
-     * Update HasGeoCoding based on the current effectiveEntity.
-     * Called from entity setter and after data loads (when effectiveEntity may resolve via viewEntity).
-     */
-    updateGeoCodingSupport() {
-        const entity = this.effectiveEntity;
-        const newValue = !!(entity && entity.SupportsGeoCoding);
-        if (newValue !== this.HasGeoCoding) {
-            this.HasGeoCoding = newValue;
-            this.fallbackFromMapIfNeeded();
-            this.cdr.detectChanges();
+    /** Persist the active view-type selection to the resolved target. */
+    async persistActiveViewType(option) {
+        const target = this.persistenceTarget();
+        if (target === 'record') {
+            const ve = this._viewEntity;
+            ve.ViewTypeID = option.viewTypeId;
+            await this.saveViewEntity(ve);
+        }
+        else if (target === 'user-settings') {
+            this.saveDefaultViewSetting();
         }
     }
-    /**
-     * Handle map marker click — emit the record for the parent to handle (open record, etc.)
-     */
-    onMapMarkerClick(event) {
-        const entity = this.effectiveEntity;
-        if (event.Record && entity) {
-            const compositeKey = buildCompositeKey(event.Record, entity);
-            // Emit both recordSelected (for detail panels) and recordOpened (for navigation)
-            this.recordSelected.emit({
-                record: event.Record,
-                entity: entity,
-                compositeKey
-            });
-            this.recordOpened.emit({
-                record: event.Record,
-                entity: entity,
-                compositeKey
-            });
+    /** Persist a per-view-type config change to the resolved target. */
+    async persistViewTypeConfig(viewTypeId) {
+        const target = this.persistenceTarget();
+        if (target === 'record') {
+            const ve = this._viewEntity;
+            const displayState = ve.DisplayStateObject ?? { defaultMode: 'grid' };
+            const configs = (displayState.viewTypeConfigs ?? []).filter(c => c.viewTypeId !== viewTypeId);
+            configs.push({ viewTypeId, config: this.viewTypeConfigById.get(viewTypeId) ?? {} });
+            displayState.viewTypeConfigs = configs;
+            ve.DisplayStateObject = displayState;
+            await this.saveViewEntity(ve);
+        }
+        else if (target === 'user-settings') {
+            this.saveDefaultViewSetting();
         }
     }
-    /** Map display state (zoom, center) — passed from parent for persistence across reloads. */
-    mapDisplayState = null;
-    /** Map render mode — separate from DisplayState for clear single-source-of-truth. */
-    mapRenderMode = 'point';
-    /** Emitted when the map's display state changes (zoom, center). */
-    mapDisplayStateChange = new EventEmitter();
-    /** Emitted when the map's render mode changes (user clicks mode buttons). */
-    mapRenderModeChange = new EventEmitter();
-    /**
-     * Handle map display state changes — bubble up to parent for persistence.
-     */
-    onMapDisplayStateChange(state) {
-        this.mapDisplayStateChange.emit(state);
+    /** Save the loaded view record, logging (not throwing) on failure. */
+    async saveViewEntity(viewEntity) {
+        const saved = await viewEntity.Save();
+        if (!saved) {
+            LogError(`EntityViewer: failed to persist view: ${viewEntity.LatestResult?.CompleteMessage ?? 'unknown error'}`);
+        }
     }
-    onMapRenderModeChange(mode) {
-        this.mapRenderModeChange.emit(mode);
+    /** User Settings key for this entity's per-user default-view state. */
+    defaultViewSettingKey() {
+        const entity = this.EffectiveEntity;
+        return entity ? `mj.entityViewer.${entity.ID.toLowerCase()}.view` : null;
     }
-    /**
-     * Toggle timeline orientation between vertical and horizontal
-     */
-    toggleTimelineOrientation() {
-        this.timelineOrientation = this.timelineOrientation === 'vertical' ? 'horizontal' : 'vertical';
-        // Emit config change so parent can persist the preference
-        this.emitTimelineConfigChange();
-        this.cdr.detectChanges();
+    /** Persist the per-user default-view state (active view type + per-type configs) to User Settings. */
+    saveDefaultViewSetting() {
+        const key = this.defaultViewSettingKey();
+        if (!key) {
+            return;
+        }
+        const payload = {
+            viewTypeId: this.ActiveViewTypeOption?.viewTypeId ?? null,
+            viewTypeConfigs: this.serializeViewTypeConfigs(),
+        };
+        UserInfoEngine.Instance.SetSettingDebounced(key, JSON.stringify(payload));
     }
-    /**
-     * Toggle timeline sort order between newest first (desc) and oldest first (asc)
-     */
-    toggleTimelineSortOrder() {
-        this.timelineSortOrder = this.timelineSortOrder === 'desc' ? 'asc' : 'desc';
-        // Emit config change so parent can persist the preference
-        this.emitTimelineConfigChange();
-        this.cdr.detectChanges();
+    /** Convert the in-memory per-view-type config map to the persisted array shape. */
+    serializeViewTypeConfigs() {
+        return Array.from(this.viewTypeConfigById.entries()).map(([viewTypeId, config]) => ({ viewTypeId, config }));
     }
     /**
-     * Change the date field used for the timeline
+     * Resolve which view type the viewer should open in, in priority order:
+     * explicit `ViewTypeID` input → the loaded `UserView` record's `ViewTypeID` → the per-user
+     * default-view setting (User Settings). Returns null to let the caller fall back to the legacy
+     * mode / first available type. This is how the viewer is self-contained for both the saved-view
+     * and default-view cases without the consumer wiring anything.
      */
-    setTimelineDateField(fieldName) {
-        if (this.availableDateFields.some(f => f.Name === fieldName)) {
-            this.selectedTimelineDateField = fieldName;
-            this.updateTimelineGroups();
-            this.emitTimelineConfigChange();
-            this.cdr.detectChanges();
+    resolveInitialViewTypeId() {
+        if (this._initialViewTypeId) {
+            return this._initialViewTypeId;
+        }
+        if (this._viewEntity?.ViewTypeID) {
+            return this._viewEntity.ViewTypeID;
         }
+        return this.readDefaultViewSetting()?.viewTypeId ?? null;
     }
     /**
-     * Get the display name of the currently selected timeline date field
+     * Load a saved view by ID via the active provider and apply it through the {@link viewEntity}
+     * setter. Backs the {@link ViewID} convenience input. Logs (does not throw) on failure.
      */
-    get selectedDateFieldDisplayName() {
-        if (!this.selectedTimelineDateField)
-            return '';
-        const field = this.availableDateFields.find(f => f.Name === this.selectedTimelineDateField);
-        return field?.DisplayNameOrName || this.selectedTimelineDateField;
+    async loadViewById(viewId) {
+        const provider = this.ProviderToUse;
+        if (!provider) {
+            return;
+        }
+        const view = await provider.GetEntityObject('MJ: User Views', provider.CurrentUser);
+        const loaded = await view.Load(viewId);
+        if (loaded) {
+            this.ViewEntity = view;
+        }
+        else {
+            LogError(`EntityViewer: failed to load view ${viewId}: ${view.LatestResult?.CompleteMessage ?? 'unknown error'}`);
+        }
     }
-    /**
-     * Emit the current timeline configuration for persistence
-     */
-    emitTimelineConfigChange() {
-        if (this.selectedTimelineDateField) {
-            this.timelineConfigChange.emit({
-                dateFieldName: this.selectedTimelineDateField,
-                sortOrder: this.timelineSortOrder,
-                segmentGrouping: this.timelineSegmentGrouping,
-                orientation: this.timelineOrientation
-            });
+    /** Read the per-user default-view setting for the current entity (or null). */
+    readDefaultViewSetting() {
+        const key = this.defaultViewSettingKey();
+        if (!key) {
+            return null;
+        }
+        const raw = UserInfoEngine.Instance.GetSetting(key);
+        if (!raw) {
+            return null;
+        }
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
         }
     }
     /**
-     * Detect and configure timeline based on entity's date fields
-     * Called when entity changes
+     * Seed the in-memory per-view-type config map from the available sources when the consumer
+     * hasn't supplied them via the {@link ViewTypeConfigs} input: the loaded `UserView` record's
+     * `DisplayState.viewTypeConfigs` (saved-view case) or the per-user default-view setting.
+     * Only seeds when the map is empty, so an explicit input always wins.
      */
-    detectDateFields() {
-        if (!this.entity) {
-            this.hasDateFields = false;
-            this.availableDateFields = [];
-            this.timelineGroups = [];
-            this.fallbackFromTimelineIfNeeded();
+    seedViewTypeConfigsIfEmpty() {
+        if (this.viewTypeConfigById.size > 0) {
             return;
         }
-        // Find all date fields - include __mj_CreatedAt and __mj_UpdatedAt as they're useful for timelines
-        const dateFields = this.entity.Fields.filter(f => f.TSType === EntityFieldTSType.Date);
-        if (dateFields.length === 0) {
-            this.hasDateFields = false;
-            this.availableDateFields = [];
-            this.timelineGroups = [];
-            this.fallbackFromTimelineIfNeeded();
-            return;
+        const fromRecord = this._viewEntity?.DisplayStateObject?.viewTypeConfigs;
+        const source = fromRecord ?? this.readDefaultViewSetting()?.viewTypeConfigs ?? [];
+        for (const entry of source) {
+            if (entry?.viewTypeId) {
+                this.viewTypeConfigById.set(entry.viewTypeId, entry.config ?? {});
+            }
         }
-        // Sort by priority: DefaultInView date fields first (by Sequence), then others (by Sequence)
-        this.availableDateFields = this.sortDateFieldsByPriority(dateFields);
-        this.hasDateFields = true;
-        // Configure timeline with the best date field
-        this.configureTimeline();
     }
+    // ========================================
+    // DYNAMIC (PLUG-IN) VIEW RENDERER MOUNTING
+    // ========================================
     /**
-     * If currently on timeline view but timeline is no longer available,
-     * fall back to grid view
+     * Makes `option`'s plug-in the ACTIVE view: reuses its cached instance when present (preserving
+     * state), otherwise creates it. All other cached instances are hidden (kept mounted). The container
+     * has zero knowledge of which plug-in this is — it only knows the {@link IViewRenderer} contract.
      */
-    fallbackFromTimelineIfNeeded() {
-        if (this.effectiveViewMode === 'timeline' && !this.hasDateFields) {
-            this.setViewMode('grid');
+    selectDynamicRenderer(option) {
+        const host = this.dynamicViewHost;
+        if (!host || !option.descriptor.RendererComponent) {
+            return;
+        }
+        // Hide every cached instance; the active one is shown below. Hidden instances stay mounted so
+        // their state survives a round-trip (e.g. switch Grid → Cluster → Grid without re-clustering).
+        for (const entry of this.dynamicRendererCache.values()) {
+            this.setRendererVisible(entry.ref, false);
+        }
+        let entry = this.dynamicRendererCache.get(option.viewTypeId);
+        if (!entry) {
+            entry = this.createDynamicRenderer(option);
+        }
+        this.dynamicRendererRef = entry.ref;
+        this.dynamicInputNames = entry.inputs;
+        this.setRendererVisible(entry.ref, true);
+        this.pushDynamicRendererInputs();
+        entry.ref.changeDetectorRef.detectChanges();
+    }
+    /**
+     * Creates a plug-in renderer instance, wires its generic outputs, captures its declared inputs,
+     * and caches it by `MJ: View Types` row ID. (Does not show/activate it — {@link selectDynamicRenderer}
+     * does that.)
+     */
+    createDynamicRenderer(option) {
+        const host = this.dynamicViewHost;
+        const componentType = option.descriptor.RendererComponent;
+        const ref = host.createComponent(componentType);
+        // Capture the set of input names this plug-in actually declares, so we only push the generic
+        // inputs it accepts. A lean plug-in (e.g. Timeline/Cards) won't declare grid-only inputs like
+        // `totalRecordCount`/`page` — calling `setInput` for those logs NG0303 in dev (the log fires
+        // before the throw, so a try/catch can't suppress it). Pre-checking with the reflected metadata
+        // keeps the console clean and the container plug-in-agnostic.
+        const inputs = new Set(reflectComponentType(componentType)?.inputs.map(i => i.templateName) ?? []);
+        // Wire the generic IViewRenderer outputs. All are optional on lean plug-ins, so guard each
+        // with `?.`. Only navigation (record open / related-record / create) bubbles to the outer app;
+        // config and dataRequest are generic plug-in↔container coordination.
+        const inst = ref.instance;
+        inst.recordSelected?.pipe(takeUntil(this.destroy$)).subscribe((r) => this.onDynamicRecordSelected(r));
+        inst.recordOpened?.pipe(takeUntil(this.destroy$)).subscribe((r) => this.onDynamicRecordOpened(r));
+        inst.configChanged
+            ?.pipe(takeUntil(this.destroy$))
+            .subscribe((cfg) => this.onDynamicConfigChanged(option.viewTypeId, (cfg ?? {})));
+        inst.openRelatedRecordRequested
+            ?.pipe(takeUntil(this.destroy$))
+            .subscribe((nav) => this.OpenRelatedRecordRequested.emit(nav));
+        inst.createRecordRequested
+            ?.pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.CreateRecordRequested.emit());
+        inst.dataRequest
+            ?.pipe(takeUntil(this.destroy$))
+            .subscribe((req) => this.onDynamicDataRequest(req));
+        const created = { ref, inputs };
+        this.dynamicRendererCache.set(option.viewTypeId, created);
+        return created;
+    }
+    /**
+     * Toggle a cached renderer's host element visibility without destroying it (preserves state).
+     * When visible, force `display: block` + `height: 100%` rather than clearing the style: the wrapper
+     * components use `ViewEncapsulation.None`, under which their `:host { display:block; height:100% }`
+     * rule is a no-op, so a custom element defaults to `display: inline` — which gives AG Grid a
+     * zero-width viewport (no rows/columns render), especially after a hide → show cycle. Forcing block
+     * here guarantees every view-type plug-in gets a full-size block container.
+     */
+    setRendererVisible(ref, visible) {
+        const el = ref.location.nativeElement;
+        if (el) {
+            el.style.display = visible ? 'block' : 'none';
+            if (visible) {
+                el.style.height = '100%';
+            }
         }
     }
     /**
-     * If currently on map view but geocoding is no longer available,
-     * fall back to grid view
+     * Destroys ALL cached plug-in instances and clears the host. Called when the data context changes
+     * (entity change / view (record / ViewID) change) so the next selection rebuilds fresh. NOT called
+     * on a plain view-type switch within the same context — that path reuses cached instances.
      */
-    fallbackFromMapIfNeeded() {
-        if (this.effectiveViewMode === 'map' && !this.HasGeoCoding) {
-            this.setViewMode('grid');
+    clearDynamicRendererCache() {
+        for (const entry of this.dynamicRendererCache.values()) {
+            entry.ref.destroy();
         }
+        this.dynamicRendererCache.clear();
+        this.dynamicRendererRef = null;
+        this.dynamicInputNames = new Set();
+        this.dynamicViewHost?.clear();
     }
     /**
-     * Sort date fields by priority:
-     * 1. DefaultInView=true fields, sorted by Sequence (lowest first)
-     * 2. Other date fields, sorted by Sequence (lowest first)
+     * Pushes the current generic data-context into the mounted plug-in renderer via `setInput`.
+     * Every input is part of the generic {@link IViewRenderer} contract; lean plug-ins may not declare
+     * all of them, so each `setInput` is wrapped in try/catch (Angular throws on undeclared inputs).
      */
-    sortDateFieldsByPriority(dateFields) {
-        const defaultInView = dateFields.filter(f => f.DefaultInView).sort((a, b) => a.Sequence - b.Sequence);
-        const others = dateFields.filter(f => !f.DefaultInView).sort((a, b) => a.Sequence - b.Sequence);
-        return [...defaultInView, ...others];
+    pushDynamicRendererInputs() {
+        const ref = this.dynamicRendererRef;
+        const option = this.ActiveDynamicOption;
+        if (!ref || !option) {
+            return;
+        }
+        this.setDynamicInput(ref, 'entity', this.EffectiveEntity);
+        this.setDynamicInput(ref, 'provider', this.ProviderToUse);
+        this.setDynamicInput(ref, 'Provider', this.Provider);
+        this.setDynamicInput(ref, 'records', this.FilteredRecords);
+        this.setDynamicInput(ref, 'selectedRecordId', this.SelectedRecordID);
+        this.setDynamicInput(ref, 'filterText', this.DebouncedFilterText);
+        this.setDynamicInput(ref, 'config', this.viewTypeConfigById.get(option.viewTypeId) ?? {});
+        this.setDynamicInput(ref, 'totalRecordCount', this.TotalRecordCount);
+        this.setDynamicInput(ref, 'page', this.Pagination.currentPage + 1);
+        this.setDynamicInput(ref, 'pageSize', this.Pagination.pageSize);
+        this.setDynamicInput(ref, 'isLoading', this.IsLoading);
     }
     /**
-     * Configure the timeline with the current date field and records
+     * Guarded `setInput`: lean plug-ins implement only the core contract, so we only set an input the
+     * mounted plug-in actually declares (per {@link dynamicInputNames}, captured at mount via
+     * `reflectComponentType`). This avoids NG0303 dev errors for optional inputs the plug-in omits and
+     * keeps the container plug-in-agnostic.
      */
-    configureTimeline() {
-        if (!this.entity || !this.hasDateFields || this.availableDateFields.length === 0) {
-            this.timelineGroups = [];
-            return;
+    setDynamicInput(ref, name, value) {
+        if (this.dynamicInputNames.has(name)) {
+            ref.setInput(name, value);
         }
-        // Determine which date field to use
-        const dateFieldName = this.getEffectiveTimelineDateField();
-        this.selectedTimelineDateField = dateFieldName;
-        // Apply timeline config if provided
-        if (this.timelineConfig) {
-            this.timelineSortOrder = (this.timelineConfig.sortOrder || 'desc');
-            this.timelineSegmentGrouping = (this.timelineConfig.segmentGrouping || 'month');
-            this.timelineOrientation = this.timelineConfig.orientation || 'vertical';
+    }
+    onDynamicRecordSelected(record) {
+        const entity = this.EffectiveEntity;
+        if (entity && record) {
+            const row = record;
+            this.RecordSelected.emit({ record: row, entity, compositeKey: buildCompositeKey(row, entity) });
         }
-        // Create a timeline group for the current entity's data
-        this.updateTimelineGroups();
     }
-    /**
-     * Get the effective date field to use for timeline
-     * Priority: timelineConfig > first available date field
-     */
-    getEffectiveTimelineDateField() {
-        // If we have a config with a specific date field, use it if valid
-        if (this.timelineConfig?.dateFieldName) {
-            const configField = this.availableDateFields.find(f => f.Name === this.timelineConfig.dateFieldName);
-            if (configField) {
-                return configField.Name;
-            }
+    onDynamicRecordOpened(record) {
+        const entity = this.EffectiveEntity;
+        if (entity && record) {
+            const row = record;
+            this.RecordOpened.emit({ record: row, entity, compositeKey: buildCompositeKey(row, entity) });
         }
-        // Otherwise use the first available date field (already sorted by priority)
-        return this.availableDateFields[0].Name;
     }
-    /**
-     * Update timeline groups with current records
-     * Called when records change
-     */
-    updateTimelineGroups() {
-        if (!this.entity || !this.selectedTimelineDateField) {
-            this.timelineGroups = [];
+    onDynamicConfigChanged(viewTypeId, config) {
+        const before = { ViewTypeID: viewTypeId, Config: config, Cancel: false };
+        this.BeforeViewTypeConfigChange.emit(before);
+        if (before.Cancel) {
             return;
         }
-        // Find title field - prefer NameField, then first string field with DefaultInView
-        const titleField = this.findTitleField();
-        // Create a single group for the current data
-        const group = new TimelineGroup();
-        group.DataSourceType = 'array';
-        group.EntityObjects = this.filteredRecords;
-        group.TitleFieldName = titleField;
-        group.DateFieldName = this.selectedTimelineDateField;
-        group.IdFieldName = 'ID';
-        group.GroupLabel = this.entity.Name;
-        // Find a suitable description field
-        const descField = this.findDescriptionField();
-        if (descField) {
-            group.DescriptionFieldName = descField;
-        }
-        // Find a suitable subtitle field
-        const subtitleField = this.findSubtitleField(titleField);
-        if (subtitleField) {
-            group.SubtitleFieldName = subtitleField;
-        }
-        // Configure card display
-        group.CardConfig = {
-            collapsible: true,
-            defaultExpanded: false,
-            showDate: true,
-            dateFormat: 'MMM d, yyyy h:mm a'
-        };
-        this.timelineGroups = [group];
+        this.viewTypeConfigById.set(viewTypeId, config);
+        if (this.AutoSaveView) {
+            void this.persistViewTypeConfig(viewTypeId);
+        }
+        this.AfterViewTypeConfigChange.emit({ ViewTypeID: viewTypeId, Config: config, Cancel: false });
     }
     /**
-     * Find the best field to use as the title
+     * Honors a generic {@link ViewDataRequest} from the mounted plug-in. Fully view-type-agnostic —
+     * the container applies whatever is present (sort / page / pageSize / loadAll) against its
+     * existing generic data-loading path. No per-view-type branching.
      */
-    findTitleField() {
-        if (!this.entity)
-            return 'ID';
-        // Prefer the entity's NameField
-        if (this.entity.NameField) {
-            return this.entity.NameField.Name;
+    onDynamicDataRequest(req) {
+        if (!req || this._records) {
+            // Nothing to do when records are externally supplied (no internal RunView to retrigger).
+            return;
+        }
+        // loadAll → switch the data loader into full-set mode (replaces the old map-specific branch).
+        if (req.loadAll === true && !this._loadAllRecords) {
+            this._loadAllRecords = true;
+            this.resetPaginationState(false);
+            this.LoadData();
+            return;
+        }
+        if (req.loadAll === false && this._loadAllRecords) {
+            this._loadAllRecords = false;
+            this.resetPaginationState(false);
+            this.LoadData();
+            return;
+        }
+        // sort → set the host's internal sort state and reload via the server-side-sort path.
+        if (req.sort) {
+            const first = req.sort.length > 0 ? req.sort[0] : null;
+            const newSort = first ? { field: first.field, direction: first.direction } : null;
+            const oldSort = this.InternalSortState;
+            this.InternalSortState = newSort;
+            const sortChanged = !oldSort || !newSort ||
+                oldSort.field !== newSort.field || oldSort.direction !== newSort.direction;
+            if (this.EffectiveConfig.serverSideSorting && sortChanged) {
+                this.resetPaginationState(false);
+                this.LoadData();
+            }
+            return;
+        }
+        // page / pageSize → load that page via the existing pager path.
+        if (req.pageSize != null && req.pageSize !== this.Pagination.pageSize) {
+            this.Pagination.pageSize = req.pageSize;
         }
-        // Look for common name patterns in DefaultInView string fields
-        const stringFields = this.entity.Fields.filter(f => f.TSType === EntityFieldTSType.String && f.DefaultInView && !f.Name.startsWith('__mj_')).sort((a, b) => a.Sequence - b.Sequence);
-        const namePatterns = ['name', 'title', 'subject', 'label'];
-        for (const pattern of namePatterns) {
-            const match = stringFields.find(f => f.Name.toLowerCase().includes(pattern));
-            if (match)
-                return match.Name;
+        if (req.page != null) {
+            this.OnPageChange({ PageNumber: req.page, PageSize: req.pageSize ?? this.Pagination.pageSize });
         }
-        // Fall back to first string field
-        return stringFields.length > 0 ? stringFields[0].Name : 'ID';
     }
+    // ========================================
+    // FILTERING
+    // ========================================
     /**
-     * Find a suitable description field
+     * Handle filter input change
      */
-    findDescriptionField() {
-        if (!this.entity)
-            return null;
-        // Look for common description patterns
-        const descPatterns = ['description', 'notes', 'summary', 'content', 'body', 'details'];
-        const textFields = this.entity.Fields.filter(f => (f.TSType === EntityFieldTSType.String) && !f.Name.startsWith('__mj_'));
-        for (const pattern of descPatterns) {
-            const match = textFields.find(f => f.Name.toLowerCase().includes(pattern));
-            if (match)
-                return match.Name;
-        }
-        return null;
+    OnFilterChange(value) {
+        this.InternalFilterText = value;
+        this.filterInput$.next(value);
     }
     /**
-     * Find a suitable subtitle field (different from title)
+     * Clear the filter
      */
-    findSubtitleField(excludeField) {
-        if (!this.entity)
-            return null;
-        // Look for status, type, category, or other short classification fields
-        const patterns = ['status', 'type', 'category', 'state', 'priority'];
-        const fields = this.entity.Fields.filter(f => f.TSType === EntityFieldTSType.String &&
-            f.DefaultInView &&
-            f.Name !== excludeField &&
-            !f.Name.startsWith('__mj_')).sort((a, b) => a.Sequence - b.Sequence);
-        for (const pattern of patterns) {
-            const match = fields.find(f => f.Name.toLowerCase().includes(pattern));
-            if (match)
-                return match.Name;
-        }
-        // Use the first string field that's not the title field
-        const firstOther = fields.find(f => f.Name !== excludeField);
-        return firstOther?.Name || null;
-    }
-    static ɵfac = function EntityViewerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EntityViewerComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
+    ClearFilter() {
+        this.InternalFilterText = '';
+        this.filterInput$.next('');
+        this.cdr.detectChanges();
+    }
+    static ɵfac = function EntityViewerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EntityViewerComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityViewerComponent, selectors: [["mj-entity-viewer"]], viewQuery: function EntityViewerComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(EntityDataGridComponent, 5);
+            i0.ɵɵviewQuery(_c0, 5, ViewContainerRef);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dataGridRef = _t.first);
-        } }, hostAttrs: [2, "display", "block", "height", "100%"], inputs: { entity: "entity", records: "records", config: "config", selectedRecordId: "selectedRecordId", viewMode: "viewMode", filterText: "filterText", sortState: "sortState", gridColumns: "gridColumns", cardTemplate: "cardTemplate", viewEntity: "viewEntity", gridState: "gridState", timelineConfig: "timelineConfig", showGridToolbar: "showGridToolbar", gridToolbarConfig: "gridToolbarConfig", gridSelectionMode: "gridSelectionMode", showAddToListButton: "showAddToListButton", ShowRecycleBin: "ShowRecycleBin", mapDisplayState: "mapDisplayState", mapRenderMode: "mapRenderMode" }, outputs: { recordSelected: "recordSelected", recordOpened: "recordOpened", dataLoaded: "dataLoaded", viewModeChange: "viewModeChange", filterTextChange: "filterTextChange", filteredCountChanged: "filteredCountChanged", sortChanged: "sortChanged", gridStateChanged: "gridStateChanged", timelineConfigChange: "timelineConfigChange", addRequested: "addRequested", deleteRequested: "deleteRequested", refreshRequested: "refreshRequested", exportRequested: "exportRequested", addToListRequested: "addToListRequested", selectionChanged: "selectionChanged", mapDisplayStateChange: "mapDisplayStateChange", mapRenderModeChange: "mapRenderModeChange" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 19, vars: 42, consts: [[1, "entity-viewer-container"], [1, "viewer-header"], [1, "viewer-content"], [1, "loading-container", 3, "hidden"], ["size", "medium", 3, "text"], [1, "loading-overlay", 3, "hidden"], ["size", "small", 3, "text"], [1, "empty-state", 3, "hidden"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-inbox"], [3, "AfterRowClick", "AfterRowDoubleClick", "AfterSort", "GridStateChanged", "SelectionChange", "NewButtonClick", "RefreshButtonClick", "DeleteButtonClick", "ExportButtonClick", "AddToListRequested", "ForeignKeyClick", "PageChange", "hidden", "Data", "Params", "FilterText", "GridState", "Height", "ShowToolbar", "ToolbarConfig", "SelectionMode", "ShowAddToListButton", "AllowLoad", "ShowPager", "PageSize", "TotalRowCount", "PagerPageNumber"], [3, "recordSelected", "recordOpened", "hidden", "entity", "records", "selectedRecordId", "cardTemplate", "hiddenFieldMatches", "filterText"], [3, "afterEventClick", "hidden", "groups", "orientation", "layout", "sortOrder", "segmentGrouping", "segmentsCollapsible", "segmentsDefaultExpanded", "selectedEventId"], [3, "hidden", "Entity", "Records", "TotalRecordCount", "RenderMode", "DisplayState"], [1, "filter-container"], [1, "record-count"], [1, "view-mode-toggle"], [3, "EntityName"], [1, "fa-solid", "fa-search", "filter-icon"], ["type", "text", 1, "filter-input", 3, "input", "placeholder", "value"], ["title", "Clear filter", 1, "clear-filter-btn"], ["title", "Clear filter", 1, "clear-filter-btn", 3, "click"], [1, "fa-solid", "fa-times"], ["title", "Grid View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Cards View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-grip"], ["title", "Timeline View", 1, "toggle-btn", 3, "active"], ["title", "Map View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-map-location-dot"], ["title", "Timeline View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-timeline"], [1, "timeline-date-selector"], [1, "fa-solid", "fa-calendar-days"], [1, "date-field-label"], [1, "date-field-select", 3, "value"], [1, "timeline-orientation-toggle"], [1, "toggle-btn", 3, "click", "title"], [1, "timeline-sort-toggle"], [1, "date-field-select", 3, "change", "value"], [3, "value"], [3, "MarkerClick", "RenderModeChange", "DisplayStateChange", "hidden", "Entity", "Records", "TotalRecordCount", "RenderMode", "DisplayState"]], template: function EntityViewerComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵconditionalCreate(1, EntityViewerComponent_Conditional_1_Template, 6, 5, "div", 1);
-            i0.ɵɵelementStart(2, "div", 2)(3, "div", 3);
-            i0.ɵɵelement(4, "mj-loading", 4);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dynamicViewHost = _t.first);
+        } }, hostAttrs: [2, "display", "block", "height", "100%"], inputs: { Entity: "Entity", EntityName: "EntityName", EntityID: "EntityID", ViewID: "ViewID", Records: "Records", Config: "Config", SelectedRecordID: "SelectedRecordID", FilterText: "FilterText", SortState: "SortState", ViewEntity: "ViewEntity", GridState: "GridState", ShowRecycleBin: "ShowRecycleBin", ViewTypeID: "ViewTypeID", ViewTypeConfigs: "ViewTypeConfigs", AutoSaveView: "AutoSaveView" }, outputs: { RecordSelected: "RecordSelected", RecordOpened: "RecordOpened", DataLoaded: "DataLoaded", FilterTextChange: "FilterTextChange", FilteredCountChanged: "FilteredCountChanged", OpenRelatedRecordRequested: "OpenRelatedRecordRequested", CreateRecordRequested: "CreateRecordRequested", BeforeViewTypeChange: "BeforeViewTypeChange", AfterViewTypeChange: "AfterViewTypeChange", BeforeViewTypeConfigChange: "BeforeViewTypeConfigChange", AfterViewTypeConfigChange: "AfterViewTypeConfigChange" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 11, consts: [["dynamicViewHost", ""], [1, "entity-viewer-container"], [1, "viewer-header"], [1, "viewer-content"], [1, "loading-container", 3, "hidden"], ["size", "medium", 3, "text"], [1, "loading-overlay", 3, "hidden"], ["size", "small", 3, "text"], [1, "empty-state", 3, "hidden"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-inbox"], [1, "dynamic-view-host", 3, "hidden"], [1, "filter-container"], [1, "record-count"], [3, "Provider", "Entity", "ActiveViewTypeID"], [3, "EntityName"], [1, "fa-solid", "fa-search", "filter-icon"], ["type", "text", 1, "filter-input", 3, "input", "placeholder", "value"], ["title", "Clear filter", 1, "clear-filter-btn"], ["title", "Clear filter", 1, "clear-filter-btn", 3, "click"], [1, "fa-solid", "fa-times"], [3, "ViewTypeSelected", "Provider", "Entity", "ActiveViewTypeID"]], template: function EntityViewerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1);
+            i0.ɵɵconditionalCreate(1, EntityViewerComponent_Conditional_1_Template, 5, 4, "div", 2);
+            i0.ɵɵelementStart(2, "div", 3)(3, "div", 4);
+            i0.ɵɵelement(4, "mj-loading", 5);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "div", 5);
-            i0.ɵɵelement(6, "mj-loading", 6);
+            i0.ɵɵelementStart(5, "div", 6);
+            i0.ɵɵelement(6, "mj-loading", 7);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "div", 7);
-            i0.ɵɵelement(8, "i", 8);
+            i0.ɵɵelementStart(7, "div", 8);
+            i0.ɵɵelement(8, "i", 9);
             i0.ɵɵelementStart(9, "p");
             i0.ɵɵtext(10, "Select an entity to view records");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(11, "div", 7);
-            i0.ɵɵelement(12, "i", 9);
+            i0.ɵɵelementStart(11, "div", 8);
+            i0.ɵɵelement(12, "i", 10);
             i0.ɵɵelementStart(13, "p");
             i0.ɵɵtext(14);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(15, "mj-entity-data-grid", 10);
-            i0.ɵɵlistener("AfterRowClick", function EntityViewerComponent_Template_mj_entity_data_grid_AfterRowClick_15_listener($event) { return ctx.onDataGridRowClick($event); })("AfterRowDoubleClick", function EntityViewerComponent_Template_mj_entity_data_grid_AfterRowDoubleClick_15_listener($event) { return ctx.onDataGridRowDoubleClick($event); })("AfterSort", function EntityViewerComponent_Template_mj_entity_data_grid_AfterSort_15_listener($event) { return ctx.onDataGridSortChanged($event); })("GridStateChanged", function EntityViewerComponent_Template_mj_entity_data_grid_GridStateChanged_15_listener($event) { return ctx.onGridStateChanged($event); })("SelectionChange", function EntityViewerComponent_Template_mj_entity_data_grid_SelectionChange_15_listener($event) { return ctx.onGridSelectionChange($event); })("NewButtonClick", function EntityViewerComponent_Template_mj_entity_data_grid_NewButtonClick_15_listener() { return ctx.onGridAddRequested(); })("RefreshButtonClick", function EntityViewerComponent_Template_mj_entity_data_grid_RefreshButtonClick_15_listener() { return ctx.onGridRefreshRequested(); })("DeleteButtonClick", function EntityViewerComponent_Template_mj_entity_data_grid_DeleteButtonClick_15_listener($event) { return ctx.onGridDeleteRequested($event); })("ExportButtonClick", function EntityViewerComponent_Template_mj_entity_data_grid_ExportButtonClick_15_listener() { return ctx.onGridExportRequested(); })("AddToListRequested", function EntityViewerComponent_Template_mj_entity_data_grid_AddToListRequested_15_listener($event) { return ctx.onGridAddToListRequested($event); })("ForeignKeyClick", function EntityViewerComponent_Template_mj_entity_data_grid_ForeignKeyClick_15_listener($event) { return ctx.onForeignKeyClick($event); })("PageChange", function EntityViewerComponent_Template_mj_entity_data_grid_PageChange_15_listener($event) { return ctx.onGridPageChange($event); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(16, "mj-entity-cards", 11);
-            i0.ɵɵlistener("recordSelected", function EntityViewerComponent_Template_mj_entity_cards_recordSelected_16_listener($event) { return ctx.onRecordSelected($event); })("recordOpened", function EntityViewerComponent_Template_mj_entity_cards_recordOpened_16_listener($event) { return ctx.onRecordOpened($event); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(17, "mj-timeline", 12);
-            i0.ɵɵlistener("afterEventClick", function EntityViewerComponent_Template_mj_timeline_afterEventClick_17_listener($event) { return ctx.onTimelineEventClick($event); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(18, EntityViewerComponent_Conditional_18_Template, 1, 6, "mj-map-view", 13);
-            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(15, "div", 11);
+            i0.ɵɵtemplate(16, EntityViewerComponent_ng_template_16_Template, 0, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementEnd()()();
         } if (rf & 2) {
-            i0.ɵɵstyleProp("height", ctx.effectiveConfig.height);
+            i0.ɵɵstyleProp("height", ctx.EffectiveConfig.height);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.effectiveConfig.showFilter || ctx.effectiveConfig.showViewModeToggle || ctx.effectiveConfig.showRecordCount ? 1 : -1);
+            i0.ɵɵconditional(ctx.EffectiveConfig.showFilter || ctx.EffectiveConfig.showViewModeToggle || ctx.EffectiveConfig.showRecordCount ? 1 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("hidden", !(ctx.isLoading && ctx.filteredRecords.length === 0));
+            i0.ɵɵproperty("hidden", !(ctx.IsLoading && ctx.FilteredRecords.length === 0));
             i0.ɵɵadvance();
-            i0.ɵɵproperty("text", ctx.loadingMessage);
+            i0.ɵɵproperty("text", ctx.LoadingMessage);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("hidden", !(ctx.isLoading && ctx.filteredRecords.length > 0));
+            i0.ɵɵproperty("hidden", !(ctx.IsLoading && ctx.FilteredRecords.length > 0));
             i0.ɵɵadvance();
-            i0.ɵɵproperty("text", ctx.loadingMessage);
+            i0.ɵɵproperty("text", ctx.LoadingMessage);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("hidden", !!ctx.effectiveEntity);
+            i0.ɵɵproperty("hidden", !!ctx.EffectiveEntity);
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("hidden", !ctx.effectiveEntity || ctx.filteredRecords.length > 0 || ctx.isLoading);
+            i0.ɵɵproperty("hidden", !ctx.EffectiveEntity || ctx.FilteredRecords.length > 0 || ctx.IsLoading || ctx.IsDynamicViewActive);
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.debouncedFilterText ? "No matching records" : "No records found");
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("hidden", ctx.effectiveViewMode !== "grid" || !ctx.effectiveEntity)("Data", ctx.filteredRecords)("Params", ctx.gridParams)("FilterText", ctx.debouncedFilterText)("GridState", ctx.gridState)("Height", "auto")("ShowToolbar", ctx.showGridToolbar)("ToolbarConfig", ctx.effectiveGridToolbarConfig)("SelectionMode", ctx.gridSelectionMode)("ShowAddToListButton", ctx.showAddToListButton)("AllowLoad", false)("ShowPager", ctx.effectiveConfig.showPagination)("PageSize", ctx.effectiveConfig.pageSize)("TotalRowCount", ctx.pagination.totalRecords)("PagerPageNumber", ctx.pagination.currentPage + 1);
+            i0.ɵɵtextInterpolate(ctx.DebouncedFilterText ? "No matching records" : "No records found");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("hidden", ctx.effectiveViewMode !== "cards" || !ctx.effectiveEntity)("entity", ctx.effectiveEntity)("records", ctx.filteredRecords)("selectedRecordId", ctx.selectedRecordId)("cardTemplate", ctx.cardTemplate)("hiddenFieldMatches", ctx.hiddenFieldMatches)("filterText", ctx.debouncedFilterText);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("hidden", ctx.effectiveViewMode !== "timeline" || !ctx.hasDateFields)("groups", ctx.timelineGroups)("orientation", ctx.timelineOrientation)("layout", ctx.timelineOrientation === "vertical" ? "alternating" : "single")("sortOrder", ctx.timelineSortOrder)("segmentGrouping", ctx.timelineSegmentGrouping)("segmentsCollapsible", true)("segmentsDefaultExpanded", true)("selectedEventId", ctx.timelineSelectedEventId);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.HasGeoCoding ? 18 : -1);
-        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i2.LoadingComponent, i3.TimelineComponent, i4.MapViewComponent, i5.EntityCardsComponent, i6.EntityDataGridComponent, i7.RecycleBinChipComponent, i8.DecimalPipe], styles: [".entity-viewer-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n\n\n.viewer-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n\n\n.filter-container[_ngcontent-%COMP%] {\n  flex: 1;\n  max-width: 400px;\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.filter-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 12px;\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.filter-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 8px 36px 8px 36px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.filter-input[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.clear-filter-btn[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 8px;\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n\n\n.record-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-card);\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n.timeline-date-selector[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.timeline-date-selector[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n}\n\n.date-field-label[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.date-field-select[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 13px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.date-field-select[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\n}\n\n.date-field-select[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n\n\n.timeline-orientation-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-card);\n  border-radius: 6px;\n  padding: 2px;\n}\n\n\n\n.viewer-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n  background: var(--mj-bg-surface);\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n\n\n.loading-container[hidden][_ngcontent-%COMP%], \n.loading-overlay[hidden][_ngcontent-%COMP%] {\n  display: none !important;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--mj-text-disabled);\n  text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n\n\nmj-entity-cards[hidden][_ngcontent-%COMP%], \nmj-timeline[hidden][_ngcontent-%COMP%], \nmj-map-view[hidden][_ngcontent-%COMP%] {\n  display: none !important;\n}\n\n\n\nmj-entity-cards[_ngcontent-%COMP%]:not([hidden]), \nmj-timeline[_ngcontent-%COMP%]:not([hidden]), \nmj-map-view[_ngcontent-%COMP%]:not([hidden]) {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n\n\n.toggle-btn.geo-hidden[_ngcontent-%COMP%] {\n  display: none !important;\n}"] });
+            i0.ɵɵproperty("hidden", !ctx.EffectiveEntity);
+        } }, dependencies: [i1.LoadingComponent, i2.RecycleBinChipComponent, i3.ViewTypeSwitcherComponent, i4.DecimalPipe], styles: [".entity-viewer-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n\n\n.viewer-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n\n\n.filter-container[_ngcontent-%COMP%] {\n  flex: 1;\n  max-width: 400px;\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.filter-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 12px;\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.filter-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 8px 36px 8px 36px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.filter-input[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.clear-filter-btn[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 8px;\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n\n\n.record-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-card);\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n.view-type-dropdown[_ngcontent-%COMP%] {\n  position: relative;\n  display: inline-flex;\n}\n\n.view-type-dropdown-trigger[_ngcontent-%COMP%] {\n  width: auto;\n  gap: 6px;\n  padding: 0 10px;\n}\n\n.view-type-dropdown-label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.view-type-dropdown-caret[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0.7;\n}\n\n.view-type-dropdown-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  z-index: 20;\n  min-width: 180px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-text-primary) 14%, transparent);\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n}\n\n.view-type-dropdown-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 8px 10px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  text-align: left;\n  transition: background 0.12s ease, color 0.12s ease;\n}\n\n.view-type-dropdown-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.view-type-dropdown-item.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.view-type-dropdown-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 16px;\n  text-align: center;\n}\n\n\n\n.dynamic-view-host[_ngcontent-%COMP%] {\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n}\n\n\n\n.viewer-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n  background: var(--mj-bg-surface);\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n\n\n.loading-container[hidden][_ngcontent-%COMP%], \n.loading-overlay[hidden][_ngcontent-%COMP%] {\n  display: none !important;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--mj-text-disabled);\n  text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n\n\n.dynamic-view-host[hidden][_ngcontent-%COMP%] {\n  display: none !important;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityViewerComponent, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-entity-viewer', host: {
                     'style': 'display: block; height: 100%;'
-                }, template: "<div class=\"entity-viewer-container\" [style.height]=\"effectiveConfig.height\">\n  <!-- Header -->\n  @if (effectiveConfig.showFilter || effectiveConfig.showViewModeToggle || effectiveConfig.showRecordCount) {\n    <div class=\"viewer-header\">\n      <!-- Filter Input -->\n      @if (effectiveConfig.showFilter) {\n        <div class=\"filter-container\">\n          <i class=\"fa-solid fa-search filter-icon\"></i>\n          <input\n            type=\"text\"\n            class=\"filter-input\"\n            [placeholder]=\"effectiveConfig.filterPlaceholder\"\n            [value]=\"effectiveFilterText\"\n            (input)=\"onFilterChange($any($event.target).value)\"\n          />\n          @if (effectiveFilterText) {\n            <button class=\"clear-filter-btn\" (click)=\"clearFilter()\" title=\"Clear filter\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Record Count -->\n      @if (effectiveConfig.showRecordCount && effectiveEntity) {\n        <div class=\"record-count\">\n          @if (filteredRecordCount !== totalRecordCount) {\n            <span>{{ filteredRecordCount | number }} of {{ totalRecordCount | number }} records</span>\n          } @else {\n            <span>{{ totalRecordCount | number }} records</span>\n          }\n        </div>\n      }\n\n      <!-- View Mode Toggle -->\n      @if (effectiveConfig.showViewModeToggle) {\n        <div class=\"view-mode-toggle\">\n          <button\n            class=\"toggle-btn\"\n            [class.active]=\"effectiveViewMode === 'grid'\"\n            (click)=\"setViewMode('grid')\"\n            title=\"Grid View\">\n            <i class=\"fa-solid fa-list\"></i>\n          </button>\n          <button\n            class=\"toggle-btn\"\n            [class.active]=\"effectiveViewMode === 'cards'\"\n            (click)=\"setViewMode('cards')\"\n            title=\"Cards View\">\n            <i class=\"fa-solid fa-grip\"></i>\n          </button>\n          @if (hasDateFields) {\n            <button\n              class=\"toggle-btn\"\n              [class.active]=\"effectiveViewMode === 'timeline'\"\n              (click)=\"setViewMode('timeline')\"\n              title=\"Timeline View\">\n              <i class=\"fa-solid fa-timeline\"></i>\n            </button>\n          }\n          <button\n            class=\"toggle-btn\"\n            [class.active]=\"effectiveViewMode === 'map'\"\n            [class.geo-hidden]=\"!HasGeoCoding\"\n            (click)=\"setViewMode('map')\"\n            title=\"Map View\">\n            <i class=\"fa-solid fa-map-location-dot\"></i>\n          </button>\n        </div>\n      }\n\n      <!-- Recycle Bin chip (auto-hides when entity has no deleted records, no tracking,\n           or user lacks Delete permission) -->\n      @if (ShowRecycleBin) {\n        <mj-recycle-bin-chip [EntityName]=\"effectiveEntity?.Name ?? null\"></mj-recycle-bin-chip>\n      }\n\n      <!-- Timeline Controls (only shown when timeline is active) -->\n      @if (effectiveViewMode === 'timeline' && hasDateFields) {\n        <!-- Date Field Selector -->\n        <div class=\"timeline-date-selector\">\n          <i class=\"fa-solid fa-calendar-days\"></i>\n          @if (availableDateFields.length === 1) {\n            <span class=\"date-field-label\">{{ selectedDateFieldDisplayName }}</span>\n          } @else {\n            <select\n              class=\"date-field-select\"\n              [value]=\"selectedTimelineDateField\"\n              (change)=\"setTimelineDateField($any($event.target).value)\">\n              @for (field of availableDateFields; track field.Name) {\n                <option [value]=\"field.Name\">{{ field.DisplayNameOrName }}</option>\n              }\n            </select>\n          }\n        </div>\n\n        <!-- Orientation Toggle -->\n        <div class=\"timeline-orientation-toggle\">\n          <button\n            class=\"toggle-btn\"\n            (click)=\"toggleTimelineOrientation()\"\n            [title]=\"timelineOrientation === 'vertical' ? 'Switch to Horizontal' : 'Switch to Vertical'\">\n            <i [class]=\"timelineOrientation === 'vertical' ? 'fa-solid fa-ellipsis-vertical' : 'fa-solid fa-ellipsis'\"></i>\n          </button>\n        </div>\n\n        <!-- Sort Order Toggle -->\n        <div class=\"timeline-sort-toggle\">\n          <button\n            class=\"toggle-btn\"\n            (click)=\"toggleTimelineSortOrder()\"\n            [title]=\"timelineSortOrder === 'desc' ? 'Showing Newest First (click for Oldest First)' : 'Showing Oldest First (click for Newest First)'\">\n            <i [class]=\"timelineSortOrder === 'desc' ? 'fa-solid fa-arrow-down-wide-short' : 'fa-solid fa-arrow-up-wide-short'\"></i>\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Content -->\n  <div class=\"viewer-content\">\n    <!-- Loading container - full page when no data exists -->\n    <div class=\"loading-container\" [hidden]=\"!(isLoading && filteredRecords.length === 0)\">\n      <mj-loading [text]=\"loadingMessage\" size=\"medium\"></mj-loading>\n    </div>\n\n    <!-- Loading overlay - shown on top of content when loading with existing data -->\n    <div class=\"loading-overlay\" [hidden]=\"!(isLoading && filteredRecords.length > 0)\">\n      <mj-loading [text]=\"loadingMessage\" size=\"small\"></mj-loading>\n    </div>\n\n    <!-- Empty state: no entity selected -->\n    <div class=\"empty-state\" [hidden]=\"!!effectiveEntity\">\n      <i class=\"fa-solid fa-database\"></i>\n      <p>Select an entity to view records</p>\n    </div>\n\n    <!-- Empty state: no records found -->\n    <div class=\"empty-state\" [hidden]=\"!effectiveEntity || filteredRecords.length > 0 || isLoading\">\n      <i class=\"fa-solid fa-inbox\"></i>\n      <p>{{ debouncedFilterText ? 'No matching records' : 'No records found' }}</p>\n    </div>\n\n    <!-- Grid View - always rendered, visibility controlled by hidden -->\n    <mj-entity-data-grid\n      [hidden]=\"effectiveViewMode !== 'grid' || !effectiveEntity\"\n      [Data]=\"filteredRecords\"\n      [Params]=\"gridParams\"\n      [FilterText]=\"debouncedFilterText\"\n      [GridState]=\"gridState\"\n      [Height]=\"'auto'\"\n      [ShowToolbar]=\"showGridToolbar\"\n      [ToolbarConfig]=\"effectiveGridToolbarConfig\"\n      [SelectionMode]=\"gridSelectionMode\"\n      [ShowAddToListButton]=\"showAddToListButton\"\n      [AllowLoad]=\"false\"\n      [ShowPager]=\"effectiveConfig.showPagination\"\n      [PageSize]=\"effectiveConfig.pageSize\"\n      [TotalRowCount]=\"pagination.totalRecords\"\n      [PagerPageNumber]=\"pagination.currentPage + 1\"\n      (AfterRowClick)=\"onDataGridRowClick($event)\"\n      (AfterRowDoubleClick)=\"onDataGridRowDoubleClick($event)\"\n      (AfterSort)=\"onDataGridSortChanged($event)\"\n      (GridStateChanged)=\"onGridStateChanged($event)\"\n      (SelectionChange)=\"onGridSelectionChange($event)\"\n      (NewButtonClick)=\"onGridAddRequested()\"\n      (RefreshButtonClick)=\"onGridRefreshRequested()\"\n      (DeleteButtonClick)=\"onGridDeleteRequested($event)\"\n      (ExportButtonClick)=\"onGridExportRequested()\"\n      (AddToListRequested)=\"onGridAddToListRequested($event)\"\n      (ForeignKeyClick)=\"onForeignKeyClick($event)\"\n      (PageChange)=\"onGridPageChange($event)\">\n    </mj-entity-data-grid>\n\n    <!-- Cards View - always rendered, visibility controlled by hidden -->\n    <mj-entity-cards\n      [hidden]=\"effectiveViewMode !== 'cards' || !effectiveEntity\"\n      [entity]=\"effectiveEntity\"\n      [records]=\"filteredRecords\"\n      [selectedRecordId]=\"selectedRecordId\"\n      [cardTemplate]=\"cardTemplate\"\n      [hiddenFieldMatches]=\"hiddenFieldMatches\"\n      [filterText]=\"debouncedFilterText\"\n      (recordSelected)=\"onRecordSelected($event)\"\n      (recordOpened)=\"onRecordOpened($event)\">\n    </mj-entity-cards>\n\n    <!-- Timeline View - always rendered when date fields exist, visibility controlled by hidden -->\n    <mj-timeline\n      [hidden]=\"effectiveViewMode !== 'timeline' || !hasDateFields\"\n      [groups]=\"timelineGroups\"\n      [orientation]=\"timelineOrientation\"\n      [layout]=\"timelineOrientation === 'vertical' ? 'alternating' : 'single'\"\n      [sortOrder]=\"timelineSortOrder\"\n      [segmentGrouping]=\"timelineSegmentGrouping\"\n      [segmentsCollapsible]=\"true\"\n      [segmentsDefaultExpanded]=\"true\"\n      [selectedEventId]=\"timelineSelectedEventId\"\n      (afterEventClick)=\"onTimelineEventClick($event)\">\n    </mj-timeline>\n\n    <!-- Map View - rendered when geocoding supported, visibility controlled by hidden -->\n    @if (HasGeoCoding) {\n      <mj-map-view\n        [hidden]=\"effectiveViewMode !== 'map'\"\n        [Entity]=\"effectiveEntity!\"\n        [Records]=\"filteredRecords\"\n        [TotalRecordCount]=\"totalRecordCount\"\n        [RenderMode]=\"mapRenderMode\"\n        [DisplayState]=\"mapDisplayState\"\n        (MarkerClick)=\"onMapMarkerClick($event)\"\n        (RenderModeChange)=\"onMapRenderModeChange($event)\"\n        (DisplayStateChange)=\"onMapDisplayStateChange($event)\">\n      </mj-map-view>\n    }\n  </div>\n\n</div>\n", styles: [".entity-viewer-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n/* Header */\n.viewer-header {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n/* Filter */\n.filter-container {\n  flex: 1;\n  max-width: 400px;\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.filter-icon {\n  position: absolute;\n  left: 12px;\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.filter-input {\n  width: 100%;\n  padding: 8px 36px 8px 36px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.filter-input:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.filter-input::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.clear-filter-btn {\n  position: absolute;\n  right: 8px;\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n/* Record Count */\n.record-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n/* View Mode Toggle */\n.view-mode-toggle {\n  display: flex;\n  background: var(--mj-bg-surface-card);\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.toggle-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.toggle-btn:hover {\n  color: var(--mj-text-secondary);\n}\n\n.toggle-btn.active {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* Timeline Date Field Selector */\n.timeline-date-selector {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.timeline-date-selector i {\n  color: var(--mj-text-disabled);\n}\n\n.date-field-label {\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.date-field-select {\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 13px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.date-field-select:hover {\n  border-color: var(--mj-border-strong);\n}\n\n.date-field-select:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n/* Timeline Orientation Toggle */\n.timeline-orientation-toggle {\n  display: flex;\n  background: var(--mj-bg-surface-card);\n  border-radius: 6px;\n  padding: 2px;\n}\n\n/* Content */\n.viewer-content {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n  background: var(--mj-bg-surface);\n}\n\n/* Loading State - full-page centered loading for initial load when no data exists */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n/* Loading overlay - semi-transparent overlay on top of existing content during refresh */\n.loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Ensure [hidden] attribute works properly on loading elements */\n.loading-container[hidden],\n.loading-overlay[hidden] {\n  display: none !important;\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--mj-text-disabled);\n  text-align: center;\n}\n\n.empty-state i {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n}\n\n/* Hidden components should not display - ensure [hidden] attribute works properly */\nmj-entity-cards[hidden],\nmj-timeline[hidden],\nmj-map-view[hidden] {\n  display: none !important;\n}\n\n/* Visible view components should fill available space */\nmj-entity-cards:not([hidden]),\nmj-timeline:not([hidden]),\nmj-map-view:not([hidden]) {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n/* Hide map toggle when entity does not support geocoding */\n.toggle-btn.geo-hidden {\n  display: none !important;\n}\n"] }]
-    }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], { entity: [{
-            type: Input
-        }], records: [{
+                }, template: "<div class=\"entity-viewer-container\" [style.height]=\"EffectiveConfig.height\">\n  <!-- Header -->\n  @if (EffectiveConfig.showFilter || EffectiveConfig.showViewModeToggle || EffectiveConfig.showRecordCount) {\n    <div class=\"viewer-header\">\n      <!-- Filter Input -->\n      @if (EffectiveConfig.showFilter) {\n        <div class=\"filter-container\">\n          <i class=\"fa-solid fa-search filter-icon\"></i>\n          <input\n            type=\"text\"\n            class=\"filter-input\"\n            [placeholder]=\"EffectiveConfig.filterPlaceholder\"\n            [value]=\"EffectiveFilterText\"\n            (input)=\"OnFilterChange($any($event.target).value)\"\n          />\n          @if (EffectiveFilterText) {\n            <button class=\"clear-filter-btn\" (click)=\"ClearFilter()\" title=\"Clear filter\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Record Count -->\n      @if (EffectiveConfig.showRecordCount && EffectiveEntity) {\n        <div class=\"record-count\">\n          @if (FilteredRecordCount !== TotalRecordCount) {\n            <span>{{ FilteredRecordCount | number }} of {{ TotalRecordCount | number }} records</span>\n          } @else {\n            <span>{{ TotalRecordCount | number }} records</span>\n          }\n        </div>\n      }\n\n      <!-- View Type Toggle \u2014 the reusable switcher, driven entirely by the MJ: View Types\n           registry (ViewTypeEngine). The available types and their icons come from metadata\n           (ViewType.Icon), filtered by each descriptor's availability predicate. Selecting routes\n           back through SelectViewTypeById, which mounts the chosen descriptor's RendererComponent\n           into #dynamicViewHost. The container has zero knowledge of any view type's chrome. -->\n      @if (EffectiveConfig.showViewModeToggle) {\n        <mj-view-type-switcher\n          [Provider]=\"Provider\"\n          [Entity]=\"EffectiveEntity\"\n          [ActiveViewTypeID]=\"ActiveViewTypeId\"\n          (ViewTypeSelected)=\"SelectViewTypeById($event.viewTypeId)\">\n        </mj-view-type-switcher>\n      }\n\n      <!-- Recycle Bin chip (auto-hides when entity has no deleted records, no tracking,\n           or user lacks Delete permission) -->\n      @if (ShowRecycleBin) {\n        <mj-recycle-bin-chip [EntityName]=\"EffectiveEntity?.Name ?? null\"></mj-recycle-bin-chip>\n      }\n    </div>\n  }\n\n  <!-- Content -->\n  <div class=\"viewer-content\">\n    <!-- Loading container - full page when no data exists -->\n    <div class=\"loading-container\" [hidden]=\"!(IsLoading && FilteredRecords.length === 0)\">\n      <mj-loading [text]=\"LoadingMessage\" size=\"medium\"></mj-loading>\n    </div>\n\n    <!-- Loading overlay - shown on top of content when loading with existing data -->\n    <div class=\"loading-overlay\" [hidden]=\"!(IsLoading && FilteredRecords.length > 0)\">\n      <mj-loading [text]=\"LoadingMessage\" size=\"small\"></mj-loading>\n    </div>\n\n    <!-- Empty state: no entity selected -->\n    <div class=\"empty-state\" [hidden]=\"!!EffectiveEntity\">\n      <i class=\"fa-solid fa-database\"></i>\n      <p>Select an entity to view records</p>\n    </div>\n\n    <!-- Empty state: no records found. Suppressed while a plug-in is active \u2014 every plug-in renders\n         its own empty/loading state, so the container never shows a generic \"no records\" over it. -->\n    <div class=\"empty-state\" [hidden]=\"!EffectiveEntity || FilteredRecords.length > 0 || IsLoading || IsDynamicViewActive\">\n      <i class=\"fa-solid fa-inbox\"></i>\n      <p>{{ DebouncedFilterText ? 'No matching records' : 'No records found' }}</p>\n    </div>\n\n    <!-- Plug-in (dynamic) view renderer host \u2014 the ONLY render path. The active descriptor's\n         RendererComponent is created into #dynamicViewHost via ViewContainerRef and fed the generic\n         IViewRenderer contract. Shown whenever there's an entity; the plug-in owns all its chrome. -->\n    <div class=\"dynamic-view-host\" [hidden]=\"!EffectiveEntity\">\n      <ng-template #dynamicViewHost></ng-template>\n    </div>\n  </div>\n\n</div>\n", styles: [".entity-viewer-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n/* Header */\n.viewer-header {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n/* Filter */\n.filter-container {\n  flex: 1;\n  max-width: 400px;\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.filter-icon {\n  position: absolute;\n  left: 12px;\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.filter-input {\n  width: 100%;\n  padding: 8px 36px 8px 36px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.filter-input:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.filter-input::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.clear-filter-btn {\n  position: absolute;\n  right: 8px;\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n/* Record Count */\n.record-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n/* View Mode Toggle */\n.view-mode-toggle {\n  display: flex;\n  background: var(--mj-bg-surface-card);\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.toggle-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.toggle-btn:hover {\n  color: var(--mj-text-secondary);\n}\n\n.toggle-btn.active {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* Compact view-type dropdown \u2014 used when there are more view types than the strip threshold */\n.view-type-dropdown {\n  position: relative;\n  display: inline-flex;\n}\n\n.view-type-dropdown-trigger {\n  width: auto;\n  gap: 6px;\n  padding: 0 10px;\n}\n\n.view-type-dropdown-label {\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.view-type-dropdown-caret {\n  font-size: 10px;\n  opacity: 0.7;\n}\n\n.view-type-dropdown-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  z-index: 20;\n  min-width: 180px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-text-primary) 14%, transparent);\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n}\n\n.view-type-dropdown-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 8px 10px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  text-align: left;\n  transition: background 0.12s ease, color 0.12s ease;\n}\n\n.view-type-dropdown-item:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.view-type-dropdown-item.active {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.view-type-dropdown-item i {\n  width: 16px;\n  text-align: center;\n}\n\n/* Host for dynamically-mounted plug-in view renderers (Cluster, third-party) */\n.dynamic-view-host {\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n}\n\n/* Content */\n.viewer-content {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n  background: var(--mj-bg-surface);\n}\n\n/* Loading State - full-page centered loading for initial load when no data exists */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n/* Loading overlay - semi-transparent overlay on top of existing content during refresh */\n.loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Ensure [hidden] attribute works properly on loading elements */\n.loading-container[hidden],\n.loading-overlay[hidden] {\n  display: none !important;\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--mj-text-disabled);\n  text-align: center;\n}\n\n.empty-state i {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n}\n\n/* Hide the dynamic host when no plug-in is mounted (no entity) */\n.dynamic-view-host[hidden] {\n  display: none !important;\n}\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }], { Entity: [{
             type: Input
-        }], config: [{
+        }], EntityName: [{
             type: Input
-        }], selectedRecordId: [{
+        }], EntityID: [{
             type: Input
-        }], viewMode: [{
+        }], ViewID: [{
             type: Input
-        }], filterText: [{
+        }], Records: [{
             type: Input
-        }], sortState: [{
+        }], Config: [{
             type: Input
-        }], gridColumns: [{
+        }], SelectedRecordID: [{
             type: Input
-        }], cardTemplate: [{
+        }], FilterText: [{
             type: Input
-        }], viewEntity: [{
+        }], SortState: [{
             type: Input
-        }], gridState: [{
+        }], ViewEntity: [{
             type: Input
-        }], timelineConfig: [{
-            type: Input
-        }], showGridToolbar: [{
-            type: Input
-        }], gridToolbarConfig: [{
-            type: Input
-        }], gridSelectionMode: [{
-            type: Input
-        }], showAddToListButton: [{
+        }], GridState: [{
             type: Input
         }], ShowRecycleBin: [{
             type: Input
-        }], recordSelected: [{
-            type: Output
-        }], recordOpened: [{
+        }], RecordSelected: [{
             type: Output
-        }], dataLoaded: [{
+        }], RecordOpened: [{
             type: Output
-        }], viewModeChange: [{
+        }], DataLoaded: [{
             type: Output
-        }], filterTextChange: [{
+        }], FilterTextChange: [{
             type: Output
-        }], filteredCountChanged: [{
+        }], FilteredCountChanged: [{
             type: Output
-        }], sortChanged: [{
+        }], OpenRelatedRecordRequested: [{
             type: Output
-        }], gridStateChanged: [{
+        }], CreateRecordRequested: [{
             type: Output
-        }], timelineConfigChange: [{
-            type: Output
-        }], addRequested: [{
-            type: Output
-        }], deleteRequested: [{
-            type: Output
-        }], refreshRequested: [{
+        }], ViewTypeID: [{
+            type: Input
+        }], ViewTypeConfigs: [{
+            type: Input
+        }], AutoSaveView: [{
+            type: Input
+        }], BeforeViewTypeChange: [{
             type: Output
-        }], exportRequested: [{
+        }], AfterViewTypeChange: [{
             type: Output
-        }], addToListRequested: [{
+        }], BeforeViewTypeConfigChange: [{
             type: Output
-        }], selectionChanged: [{
+        }], AfterViewTypeConfigChange: [{
             type: Output
-        }], dataGridRef: [{
+        }], dynamicViewHost: [{
             type: ViewChild,
-            args: [EntityDataGridComponent]
-        }], mapDisplayState: [{
-            type: Input
-        }], mapRenderMode: [{
-            type: Input
-        }], mapDisplayStateChange: [{
-            type: Output
-        }], mapRenderModeChange: [{
-            type: Output
+            args: ['dynamicViewHost', { read: ViewContainerRef }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityViewerComponent, { className: "EntityViewerComponent", filePath: "src/lib/entity-viewer/entity-viewer.component.ts", lineNumber: 81 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityViewerComponent, { className: "EntityViewerComponent", filePath: "src/lib/entity-viewer/entity-viewer.component.ts", lineNumber: 133 }); })();
 //# sourceMappingURL=entity-viewer.component.js.map