@memberjunction/ng-explorer-core 5.51.0 → 6.1.0-edge.0

package/dist/lib/shell/components/tabs/tab-container.component.js

@@ -1,77 +1,146 @@
 import { Component, ViewChild, runInInjectionContext, createComponent, ViewEncapsulation, HostListener, Output, EventEmitter, inject } from '@angular/core';
+import { GoldenLayoutManager, FlattenLayoutToSingleStack } from '@memberjunction/ng-base-application';
 import { MJGlobal } from '@memberjunction/global';
-import { BaseResourceComponent, HomeAppPinService, NavigationService } from '@memberjunction/ng-shared';
+import { BaseResourceComponent, HomeAppPinService, NavigationService, IsRecordTabsStyle, IsRecordsTabConfiguration, IsRecordsRegionTab, IsRecordDockedToWorkspace, RECORD_DOCKED_TO_WORKSPACE_KEY, GetRecordSourceContext, SafeDetectChanges, ExplorerBreakpointService, ResolveRecordTypeIcon } from '@memberjunction/ng-shared';
 import { ResourceData, ResourcePermissionEngine } from '@memberjunction/core-entities';
+import { RecordOriginCrumbComponent } from '../record-open/record-origin-crumb.component';
+import { RecordSwitcherService } from '../record-open/record-switcher.service';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
 import { LogError } from '@memberjunction/core';
 import { ComponentCacheManager } from './component-cache-manager';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-base-application";
+import * as i2 from "../record-open/record-bar.component";
+import * as i3 from "../record-open/record-switcher-sheet.component";
 const _c0 = ["glContainer"];
 const _c1 = ["directContentContainer"];
-function TabContainerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 3, 0);
-} }
+const _c2 = ["recordsGlContainer"];
 function TabContainerComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 4, 1);
+    i0.ɵɵelement(0, "div", 5, 0);
+} }
+function TabContainerComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 6, 1);
+} }
+function TabContainerComponent_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-record-bar", 12);
+    i0.ɵɵlistener("SwitcherRequested", function TabContainerComponent_Conditional_4_Conditional_1_Template_mj_record_bar_SwitcherRequested_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OpenRecordSwitcher()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Title", ctx_r2.RecordBarTitle)("Icon", ctx_r2.RecordBarIcon)("Color", ctx_r2.RecordBarColor)("Count", ctx_r2.OpenRecordCount);
+} }
+function TabContainerComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵconditionalCreate(1, TabContainerComponent_Conditional_4_Conditional_1_Template, 1, 4, "mj-record-bar", 9);
+    i0.ɵɵelement(2, "div", 10, 2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "mj-record-switcher-sheet", 11);
+    i0.ɵɵlistener("VisibleChange", function TabContainerComponent_Conditional_4_Template_mj_record_switcher_sheet_VisibleChange_4_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnSwitcherVisibleChange($event)); })("ActivateRequested", function TabContainerComponent_Conditional_4_Template_mj_record_switcher_sheet_ActivateRequested_4_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnSwitcherActivate($event)); })("CloseRequested", function TabContainerComponent_Conditional_4_Template_mj_record_switcher_sheet_CloseRequested_4_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnSwitcherClose($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("region-hidden", !ctx_r2.ShowRecordsRegion);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.IsMobileRecords ? 1 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("Entries", ctx_r2.SwitcherEntries)("Visible", ctx_r2.RecordSwitcherVisible);
 } }
-function TabContainerComponent_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function TabContainerComponent_Conditional_5_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "Pinned to Home");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 14);
-    i0.ɵɵelement(3, "i", 15);
+    i0.ɵɵelementStart(2, "span", 22);
+    i0.ɵɵelement(3, "i", 23);
     i0.ɵɵelementEnd();
 } }
-function TabContainerComponent_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function TabContainerComponent_Conditional_5_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "Pin to Home");
     i0.ɵɵelementEnd();
 } }
-function TabContainerComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 6)(1, "div", 7);
-    i0.ɵɵlistener("click", function TabContainerComponent_Conditional_3_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onContextPin()); });
-    i0.ɵɵelement(2, "i", 8);
+function TabContainerComponent_Conditional_5_Conditional_10_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 14);
+    i0.ɵɵlistener("click", function TabContainerComponent_Conditional_5_Conditional_10_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onContextMoveToWorkspace()); });
+    i0.ɵɵelement(1, "i", 25);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Move to Workspace");
+    i0.ɵɵelementEnd()();
+} }
+function TabContainerComponent_Conditional_5_Conditional_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 14);
+    i0.ɵɵlistener("click", function TabContainerComponent_Conditional_5_Conditional_10_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onContextMoveToRecords()); });
+    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Move to Records");
+    i0.ɵɵelementEnd()();
+} }
+function TabContainerComponent_Conditional_5_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 16);
+    i0.ɵɵconditionalCreate(1, TabContainerComponent_Conditional_5_Conditional_10_Conditional_1_Template, 4, 0, "button", 24);
+    i0.ɵɵconditionalCreate(2, TabContainerComponent_Conditional_5_Conditional_10_Conditional_2_Template, 4, 0, "button", 24);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.canContextMoveToWorkspace ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.canContextMoveToRecords ? 2 : -1);
+} }
+function TabContainerComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵlistener("keydown", function TabContainerComponent_Conditional_5_Template_div_keydown_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onMenuKeydown($event)); });
+    i0.ɵɵelementStart(1, "button", 14);
+    i0.ɵɵlistener("click", function TabContainerComponent_Conditional_5_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onContextPin()); });
+    i0.ɵɵelement(2, "i", 15);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(5, "div", 9);
-    i0.ɵɵelementStart(6, "div", 7);
-    i0.ɵɵlistener("click", function TabContainerComponent_Conditional_3_Template_div_click_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onContextPinToHome()); });
-    i0.ɵɵelement(7, "i", 10);
-    i0.ɵɵconditionalCreate(8, TabContainerComponent_Conditional_3_Conditional_8_Template, 4, 0)(9, TabContainerComponent_Conditional_3_Conditional_9_Template, 2, 0, "span");
+    i0.ɵɵelement(5, "div", 16);
+    i0.ɵɵelementStart(6, "button", 17);
+    i0.ɵɵlistener("click", function TabContainerComponent_Conditional_5_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onContextPinToHome()); });
+    i0.ɵɵelement(7, "i", 18);
+    i0.ɵɵconditionalCreate(8, TabContainerComponent_Conditional_5_Conditional_8_Template, 4, 0)(9, TabContainerComponent_Conditional_5_Conditional_9_Template, 2, 0, "span");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(10, "div", 9);
-    i0.ɵɵelementStart(11, "div", 7);
-    i0.ɵɵlistener("click", function TabContainerComponent_Conditional_3_Template_div_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onContextClose()); });
-    i0.ɵɵelement(12, "i", 11);
-    i0.ɵɵelementStart(13, "span");
-    i0.ɵɵtext(14, "Close Tab");
+    i0.ɵɵconditionalCreate(10, TabContainerComponent_Conditional_5_Conditional_10_Template, 3, 2);
+    i0.ɵɵelement(11, "div", 16);
+    i0.ɵɵelementStart(12, "button", 14);
+    i0.ɵɵlistener("click", function TabContainerComponent_Conditional_5_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onContextClose()); });
+    i0.ɵɵelement(13, "i", 19);
+    i0.ɵɵelementStart(14, "span");
+    i0.ɵɵtext(15, "Close Tab");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "div", 7);
-    i0.ɵɵlistener("click", function TabContainerComponent_Conditional_3_Template_div_click_15_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onContextCloseOthers()); });
-    i0.ɵɵelement(16, "i", 12);
-    i0.ɵɵelementStart(17, "span");
-    i0.ɵɵtext(18, "Close Others");
+    i0.ɵɵelementStart(16, "button", 14);
+    i0.ɵɵlistener("click", function TabContainerComponent_Conditional_5_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onContextCloseOthers()); });
+    i0.ɵɵelement(17, "i", 20);
+    i0.ɵɵelementStart(18, "span");
+    i0.ɵɵtext(19, "Close Others");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 7);
-    i0.ɵɵlistener("click", function TabContainerComponent_Conditional_3_Template_div_click_19_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onContextCloseToRight()); });
-    i0.ɵɵelement(20, "i", 13);
-    i0.ɵɵelementStart(21, "span");
-    i0.ɵɵtext(22, "Close to Right");
+    i0.ɵɵelementStart(20, "button", 14);
+    i0.ɵɵlistener("click", function TabContainerComponent_Conditional_5_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onContextCloseToRight()); });
+    i0.ɵɵelement(21, "i", 21);
+    i0.ɵɵelementStart(22, "span");
+    i0.ɵɵtext(23, "Close to Right");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("left", ctx_r1.contextMenuX, "px")("top", ctx_r1.contextMenuY, "px");
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("left", ctx_r2.contextMenuX, "px")("top", ctx_r2.contextMenuY, "px");
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.isContextTabPinned ? "Unpin Tab" : "Pin Tab");
+    i0.ɵɵtextInterpolate(ctx_r2.isContextTabPinned ? "Unpin Tab" : "Pin Tab");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("new-item", !ctx_r2.isContextTabPinnedToHome)("disabled", ctx_r2.isContextTabPinnedToHome);
+    i0.ɵɵproperty("disabled", ctx_r2.isContextTabPinnedToHome);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("new-item", !ctx_r1.isContextTabPinnedToHome)("disabled", ctx_r1.isContextTabPinnedToHome);
+    i0.ɵɵconditional(ctx_r2.isContextTabPinnedToHome ? 8 : 9);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.isContextTabPinnedToHome ? 8 : 9);
+    i0.ɵɵconditional(ctx_r2.canContextMoveToWorkspace || ctx_r2.canContextMoveToRecords ? 10 : -1);
 } }
+/** Fallback tab accent when an app has no color (matches pre-existing usage) */
+const DEFAULT_APP_COLOR = '#757575';
 /**
  * Container for Golden Layout tabs with app-colored styling.
  *
@@ -91,6 +160,7 @@ export class TabContainerComponent extends BaseAngularComponent {
     cdr;
     glContainer;
     directContentContainer;
+    recordsGlContainer;
     /**
      * Emitted when the first resource component finishes loading.
      * This allows the shell to keep showing its loading indicator until the first
@@ -104,6 +174,7 @@ export class TabContainerComponent extends BaseAngularComponent {
     layoutInitError = new EventEmitter();
     pinService = inject(HomeAppPinService);
     navigationService = inject(NavigationService);
+    recordSwitcher = inject(RecordSwitcherService);
     subscriptions = [];
     layoutInitRetryCount = 0;
     MAX_LAYOUT_INIT_RETRIES = 5;
@@ -111,6 +182,8 @@ export class TabContainerComponent extends BaseAngularComponent {
     layoutRestorationComplete = false; // True only AFTER layout is fully restored/created
     // Track component references for cleanup (legacy - keep for backward compat during transition)
     componentRefs = new Map();
+    /** Pane-level origin crumbs, one per record pane (see RecordOriginCrumbComponent) */
+    originCrumbRefs = new Map();
     // Guard against concurrent loadTabContent calls for the same tab.
     // When a tab's content changes while active, both the reload path (workspace config subscription)
     // and onTabShown can race to call loadTabContent, resulting in duplicate component rendering.
@@ -131,6 +204,379 @@ export class TabContainerComponent extends BaseAngularComponent {
     contextMenuX = 0;
     contextMenuY = 0;
     contextMenuTabId = null;
+    /** The control that opened the context menu — focus returns here on close */
+    contextMenuAnchor = null;
+    // ---- RECORDS region (records-style record opens) ----
+    /**
+     * A SEPARATE Golden Layout instance hosting only record tabs. Instantiated
+     * directly (not DI) — GoldenLayoutManager has no constructor dependencies
+     * and the root-provided instance belongs to the MAIN region. Records get
+     * native GL tabs (close/drag-to-split/pin) without ever appearing in the
+     * main workspace's tab bar.
+     */
+    recordsLayoutManager = new GoldenLayoutManager();
+    recordsLayoutInitialized = false;
+    /** Last active tab id reported by the records GL (guards focus feedback loops) */
+    recordsRegionActiveTabId = null;
+    /**
+     * True while records-GL tabs are being created/restored in a batch. GL
+     * fires an activation event for EVERY tab it creates; letting those write
+     * back into the workspace during init steals focus from the tab the user
+     * actually asked for (and persists junk layouts mid-build). Suppress both
+     * write-backs while set; the batch ends with one explicit focus.
+     */
+    recordsCreatingTabs = false;
+    /** Shell mobile breakpoint (768px) — drives the records mobile surface */
+    breakpoint = inject(ExplorerBreakpointService);
+    /**
+     * True while the records surface renders MOBILE chrome: strip hidden
+     * (headerless GL), record bar shown, splits flattened at render, layout
+     * persistence suppressed (see the LayoutChanged guard), move actions
+     * hidden. Mirrors the breakpoint; flips via rebuildRecordsLayoutForBreakpoint.
+     */
+    mobileRecordsActive = this.breakpoint.IsMobile;
+    /**
+     * True only synchronously around Destroy() during a breakpoint-crossing
+     * rebuild. Destroy fires TabClosed for EVERY live pane; without this guard
+     * the records TabClosed handler would CloseTab each one — a crossing would
+     * close every open record. cleanupTabComponent still runs (the cache
+     * detach is what lets the re-init reattach content).
+     */
+    recordsRebuilding = false;
+    /** True when the deployment runs the records-style record-open model */
+    get RecordsStyleActive() {
+        return IsRecordTabsStyle();
+    }
+    /** Records surface is in mobile chrome (record bar instead of tab strip) */
+    get IsMobileRecords() {
+        return this.RecordsStyleActive && this.mobileRecordsActive;
+    }
+    // ---- Mobile record bar state (computed by updateRecordSurfaceState) ----
+    /** Active record's title, entity icon, and app color for the mobile bar */
+    RecordBarTitle = '';
+    RecordBarIcon = 'fa-regular fa-file-lines';
+    RecordBarColor = DEFAULT_APP_COLOR;
+    /**
+     * ALL open records — region AND docked — matching the switcher sheet's
+     * row count (docked/region composition is a desktop concept; on mobile
+     * they're one list).
+     */
+    OpenRecordCount = 0;
+    /** Record switcher sheet visibility (mobile) */
+    RecordSwitcherVisible = false;
+    /** Rows for the record switcher sheet (region + docked records, by sequence) */
+    SwitcherEntries = [];
+    /** Open the record switcher sheet (record bar tap / drawer pill) */
+    OpenRecordSwitcher() {
+        if (this.OpenRecordCount === 0) {
+            return;
+        }
+        this.RecordSwitcherVisible = true;
+        this.flushRegionCd();
+    }
+    /** Sheet row tapped: activate — same contract as the pill (sync drives GL focus) */
+    OnSwitcherActivate(tabId) {
+        this.RecordSwitcherVisible = false;
+        this.flushRegionCd();
+        // Guard against a stale row (SetActiveTab doesn't validate existence —
+        // stamping a closed tab's id would leave no resolvable active tab)
+        if (this.workspaceManager.GetTab(tabId)) {
+            this.workspaceManager.SetActiveTab(tabId);
+        }
+    }
+    /**
+     * Sheet row ✕: close the record through the SAME path as the tab context
+     * menu — GL RemoveTab → TabClosed handler (workspace bookkeeping, close
+     * guards, cache eviction all apply). The workspace-level fallback covers
+     * the edge where GL never held the tab (zero-height init refusal).
+     * The sheet stays open; entries recompute on the config emission.
+     */
+    OnSwitcherClose(tabId) {
+        const tab = this.workspaceManager.GetTab(tabId);
+        const manager = tab && this.isRecordTab(tab) ? this.recordsLayoutManager : this.layoutManager;
+        if (manager.GetContainer(tabId)) {
+            manager.RemoveTab(tabId);
+        }
+        else if (tab) {
+            // GL never held this tab (e.g. docked record in single-resource mode) —
+            // run the same cleanup the GL close path does (cache detach, origin
+            // crumb destroy) or the crumb ComponentRef leaks in originCrumbRefs.
+            this.cleanupTabComponent(tabId);
+            this.workspaceManager.CloseTab(tabId);
+        }
+    }
+    OnSwitcherVisibleChange(visible) {
+        this.RecordSwitcherVisible = visible;
+    }
+    /**
+     * Recompute the mobile record-surface state (bar inputs + count) from a
+     * workspace configuration emission. Cheap and unconditional — the values
+     * only render while IsMobileRecords, but keeping them current at all
+     * widths makes the breakpoint flip instant.
+     */
+    updateRecordSurfaceState(config) {
+        if (!this.RecordsStyleActive) {
+            return;
+        }
+        const previous = `${this.RecordBarTitle}|${this.RecordBarIcon}|${this.RecordBarColor}|${this.OpenRecordCount}`;
+        const allRecords = config.tabs
+            .filter(t => IsRecordsTabConfiguration(t.configuration))
+            .sort((a, b) => a.sequence - b.sequence);
+        this.OpenRecordCount = allRecords.length;
+        this.SwitcherEntries = allRecords.map(tab => this.buildSwitcherEntry(tab, config.activeTabId));
+        const activeTab = config.tabs.find(t => t.id === config.activeTabId);
+        if (activeTab && this.isRecordTab(activeTab)) {
+            const app = this.appManager.GetAppById(activeTab.applicationId);
+            this.RecordBarTitle = activeTab.title;
+            this.RecordBarIcon = ResolveRecordTypeIcon(activeTab.configuration, this.ProviderToUse);
+            this.RecordBarColor = app?.GetColor() || DEFAULT_APP_COLOR;
+        }
+        // If the active tab is NOT a region record the bar isn't visible (the
+        // records region is hidden) — stale bar values are harmless.
+        if (this.RecordSwitcherVisible && this.OpenRecordCount === 0) {
+            // Last record closed from the sheet — nothing left to switch to
+            this.RecordSwitcherVisible = false;
+        }
+        const current = `${this.RecordBarTitle}|${this.RecordBarIcon}|${this.RecordBarColor}|${this.OpenRecordCount}`;
+        // Always flush while the sheet is OPEN: its rows carry state the bar hash
+        // can't see (row titles, origins, IsActive) — an activation or async
+        // title change with identical bar values would otherwise render stale.
+        if (this.RecordSwitcherVisible || (this.mobileRecordsActive && current !== previous)) {
+            this.flushRegionCd();
+        }
+    }
+    /** One switcher sheet row: identity + origin subtitle (crumb semantics) */
+    buildSwitcherEntry(tab, activeTabId) {
+        const app = this.appManager.GetAppById(tab.applicationId);
+        const origin = GetRecordSourceContext(tab.configuration);
+        const originLabel = origin
+            ? (origin.sourceLabel ?? ([origin.sourceAppName, origin.sourceNavLabel].filter(Boolean).join(' › ') || null))
+            : null;
+        return {
+            TabId: tab.id,
+            Title: tab.title,
+            Icon: ResolveRecordTypeIcon(tab.configuration, this.ProviderToUse),
+            Color: app?.GetColor() || DEFAULT_APP_COLOR,
+            OriginLabel: originLabel,
+            IsActive: tab.id === activeTabId
+        };
+    }
+    /** True while the RECORDS region is the visible surface (active tab is a record) */
+    ShowRecordsRegion = false;
+    /**
+     * A tab belongs to the records REGION (not the main workspace layout).
+     * Records docked to the workspace ("Move to Workspace") fail this check —
+     * they are main-layout tabs everywhere this predicate gates.
+     */
+    isRecordTab(tab) {
+        return this.RecordsStyleActive && IsRecordsRegionTab(tab.configuration);
+    }
+    /**
+     * Synchronous, exception-safe change-detection flush. Zoneless + OnPush
+     * ancestors make RxJS-driven mutations invisible until SOMETHING runs CD;
+     * detectChanges throws when a pass is already in flight, and an unguarded
+     * throw inside a promise/subscription silently kills the update (the
+     * original "clicked the pill, nothing happened for seconds" bug). markForCheck
+     * first so even the re-entrant case gets picked up by the in-flight pass.
+     */
+    flushRegionCd() {
+        SafeDetectChanges(this.cdr);
+    }
+    /**
+     * Keep the RECORDS region in lockstep with the workspace configuration:
+     * resolve region visibility (active tab is a record), lazily initialize the
+     * records layout on first show (restoring the persisted records layout when
+     * it matches the tab set), add/remove record tabs, and focus the active one.
+     */
+    syncRecordsRegion(config) {
+        if (!this.RecordsStyleActive) {
+            // Defense in depth: if the style ever resolves to classic AFTER a
+            // records-style pass set the flag (e.g. late instance-config load),
+            // un-hide the main region — otherwise it stays invisible forever.
+            if (this.ShowRecordsRegion) {
+                this.ShowRecordsRegion = false;
+                this.flushRegionCd();
+            }
+            return;
+        }
+        const recordTabs = config.tabs.filter(t => this.isRecordTab(t));
+        const activeTab = config.tabs.find(t => t.id === config.activeTabId);
+        const showing = !!activeTab && this.isRecordTab(activeTab);
+        // EAGER init + sync on EVERY emission. The region container always keeps
+        // its full layout box (visibility-hidden, never display:none — see the
+        // component CSS), so the records GL can initialize and reconcile even
+        // while the region isn't the visible surface. This is what keeps the
+        // strip, the pill, and the workspace from ever drifting apart: closed
+        // records leave the strip immediately, new ones appear immediately,
+        // whether or not the user is looking at the region.
+        if (!this.recordsLayoutInitialized && recordTabs.length > 0) {
+            this.ensureRecordsLayoutInitialized(recordTabs);
+        }
+        if (this.recordsLayoutInitialized) {
+            this.syncRecordsTabs(recordTabs);
+        }
+        if (showing !== this.ShowRecordsRegion) {
+            this.ShowRecordsRegion = showing;
+            // Flush NOW — the visibility class must land in this pass, not
+            // whenever the next unrelated emission happens to run CD.
+            this.flushRegionCd();
+        }
+        if (showing && activeTab && this.recordsLayoutInitialized) {
+            this.focusRecordsTab(activeTab.id);
+        }
+    }
+    /** Add/remove/style record tabs in the records GL to match the configuration */
+    syncRecordsTabs(recordTabs) {
+        if (!this.recordsLayoutInitialized) {
+            return;
+        }
+        const existingIds = this.recordsLayoutManager.GetAllTabIds();
+        const configIds = recordTabs.map(t => t.id);
+        existingIds.forEach(id => {
+            if (!configIds.includes(id)) {
+                this.recordsLayoutManager.RemoveTab(id);
+            }
+        });
+        const toCreate = recordTabs.filter(t => !existingIds.includes(t.id));
+        if (toCreate.length > 0) {
+            this.recordsCreatingTabs = true;
+            try {
+                toCreate.forEach(tab => this.createRecordsRegionTab(tab));
+            }
+            finally {
+                this.recordsCreatingTabs = false;
+            }
+        }
+        recordTabs.forEach(tab => {
+            if (existingIds.includes(tab.id)) {
+                const app = this.appManager.GetAppById(tab.applicationId);
+                this.recordsLayoutManager.UpdateTabStyle(tab.id, {
+                    isPinned: tab.isPinned,
+                    title: tab.title,
+                    appColor: app?.GetColor() || DEFAULT_APP_COLOR,
+                    typeIcon: this.resolveTabTypeIcon(tab)
+                });
+                // Origin can change on re-open re-capture — keep the pane crumb live
+                this.updateOriginCrumb(tab);
+            }
+        });
+    }
+    /** Focus a records-region tab without feeding back into SetActiveTab loops */
+    focusRecordsTab(tabId) {
+        if (this.recordsRegionActiveTabId !== tabId) {
+            this.recordsLayoutManager.FocusTab(tabId);
+        }
+    }
+    /**
+     * Initialize the records Golden Layout as soon as record tabs exist —
+     * EAGERLY, whether or not the region is visible (its container always has
+     * a full layout box). Restores the persisted records layout when its
+     * component count matches the current record-tab set; otherwise builds
+     * tabs fresh. Creation/restore runs with activation write-backs
+     * suppressed (see recordsCreatingTabs).
+     */
+    ensureRecordsLayoutInitialized(recordTabs) {
+        if (this.recordsLayoutInitialized) {
+            return;
+        }
+        const container = this.recordsGlContainer?.nativeElement;
+        if (!container) {
+            return; // Template not settled yet — the next sync pass retries
+        }
+        // NEVER initialize GL inside a zero-size (hidden) container — it bakes a
+        // 0x0 internal size into every stack it later creates and the region
+        // renders collapsed forever. Happens when the region flip is reverted
+        // (activation stolen) before this deferred init runs; staying
+        // uninitialized is safe — the next real show retries.
+        if (container.getBoundingClientRect().height === 0) {
+            return;
+        }
+        // Mobile: headerless GL — the record bar replaces the strip
+        this.recordsLayoutManager.Initialize(container, { HideHeaders: this.mobileRecordsActive });
+        this.recordsLayoutInitialized = true;
+        this.recordsCreatingTabs = true;
+        try {
+            const config = this.workspaceManager.GetConfiguration();
+            const savedLayout = config?.recordsLayout;
+            // Mobile renders the persisted layout FLATTENED to one stack — a clone;
+            // the persisted recordsLayout is never touched (and never written back
+            // while mobile — see the LayoutChanged guard). Flattening preserves
+            // components, so the restore gate below is unaffected.
+            const layoutToLoad = this.mobileRecordsActive ? FlattenLayoutToSingleStack(savedLayout) : savedLayout;
+            // Restore gate: the persisted layout must cover EXACTLY the current tab
+            // set — identity, not count. Counts can match while identities diverge
+            // (open one + close one during a persistence-suppressed mobile session);
+            // loading such a layout would render a ghost pane for a closed record.
+            if (layoutToLoad?.root && recordTabs.length > 0 && this.layoutCoversExactTabSet(layoutToLoad.root, recordTabs)) {
+                if (this.recordsLayoutManager.LoadLayout(layoutToLoad)) {
+                    return;
+                }
+            }
+            // No (or mismatched) saved layout — create record tabs fresh
+            [...recordTabs]
+                .sort((a, b) => a.sequence - b.sequence)
+                .forEach(tab => this.createRecordsRegionTab(tab));
+        }
+        finally {
+            this.recordsCreatingTabs = false;
+        }
+    }
+    /**
+     * Breakpoint crossing: tear the records GL down and let the next sync pass
+     * rebuild it in the other chrome mode (mobile: headerless + flattened;
+     * desktop: full strip + restored splits). The teardown runs under
+     * recordsRebuilding — Destroy() fires TabClosed per pane, and without the
+     * guard those events would CloseTab every open record (see the guard's
+     * field comment). Content survives via the component cache: cleanup
+     * detaches each pane's component, and the re-init's first-show reattaches.
+     */
+    rebuildRecordsLayoutForBreakpoint() {
+        // The switcher sheet is MOBILE chrome — never let it survive a crossing
+        // (it would overlay the desktop UI and its entries stop re-rendering)
+        this.RecordSwitcherVisible = false;
+        // Template state first (bar/strip @if flips, region height settles)
+        this.flushRegionCd();
+        if (!this.recordsLayoutInitialized) {
+            return; // GL not built yet — the next sync initializes in the new mode
+        }
+        this.recordsRebuilding = true;
+        try {
+            this.recordsLayoutManager.Destroy();
+        }
+        finally {
+            // ALL teardown state resets live in the finally: if Destroy() throws
+            // mid-walk, leaving recordsLayoutInitialized=true over a half-destroyed
+            // GL would corrupt every subsequent sync pass.
+            this.recordsRebuilding = false;
+            this.recordsLayoutInitialized = false;
+            this.recordsRegionActiveTabId = null;
+        }
+        // Defer re-init one macrotask so the flipped template has painted and
+        // the GL container has its final (bar-adjusted) height before Initialize
+        // measures it — same reason handleTabBarVisibilityChange defers.
+        setTimeout(() => {
+            const config = this.workspaceManager.GetConfiguration();
+            if (config) {
+                this.syncRecordsRegion(config);
+            }
+        }, 0);
+    }
+    /** Create a record tab in the RECORDS layout (mirror of createTab for main) */
+    createRecordsRegionTab(tab) {
+        const app = this.appManager.GetAppById(tab.applicationId);
+        const state = {
+            tabId: tab.id,
+            appId: tab.applicationId,
+            appColor: app?.GetColor() || DEFAULT_APP_COLOR,
+            title: tab.title,
+            route: tab.configuration['route'] || '',
+            isPinned: tab.isPinned,
+            isLoaded: false,
+            typeIcon: this.resolveTabTypeIcon(tab)
+        };
+        this.recordsLayoutManager.AddTab(state);
+        this.updateTabDisplayName(tab);
+    }
     constructor(layoutManager, workspaceManager, appManager, appRef, environmentInjector, cdr) {
         super();
         this.layoutManager = layoutManager;
@@ -148,6 +594,16 @@ export class TabContainerComponent extends BaseAngularComponent {
             this.onTabShown(event);
         }), this.layoutManager.TabClosed.subscribe(tabId => {
             this.cleanupTabComponent(tabId);
+            // DEMOTE guard ("Move to Records"): the tab was removed from the
+            // main GL because its region membership changed — it's still in the
+            // workspace config and the records region is about to pick it up.
+            // Closing it here would destroy the tab the user asked to keep.
+            // cleanupTabComponent above still runs: the cache detach is what
+            // lets the records GL reattach the component with state intact.
+            const movedTab = this.workspaceManager.GetTab(tabId);
+            if (movedTab && this.isRecordTab(movedTab)) {
+                return;
+            }
             this.workspaceManager.CloseTab(tabId);
         }), this.layoutManager.LayoutChanged.subscribe(event => {
             const layout = this.layoutManager.SaveLayout();
@@ -159,44 +615,162 @@ export class TabContainerComponent extends BaseAngularComponent {
         }), this.layoutManager.TabDoubleClicked.subscribe(tabId => {
             this.workspaceManager.TogglePin(tabId);
         }), this.layoutManager.TabRightClicked.subscribe(event => {
-            this.showContextMenu(event.x, event.y, event.tabId);
+            this.showContextMenu(event.x, event.y, event.tabId, event.anchorEl);
+        }));
+        this.wireRecordsLayoutEvents();
+        // Breakpoint crossings rebuild the records GL in the other chrome mode
+        // (headerless+flattened vs full strip+splits). Skip-if-equal: the
+        // BehaviorSubject replays the current value on subscribe.
+        this.subscriptions.push(this.breakpoint.IsMobile$.subscribe(isMobile => {
+            // Exception-guarded like the Configuration subscription: a throw from
+            // one crossing (e.g. a cached component's ngOnDestroy during the GL
+            // teardown) would otherwise unsubscribe the stream permanently and
+            // brick breakpoint handling until reload.
+            try {
+                if (isMobile === this.mobileRecordsActive) {
+                    return;
+                }
+                this.mobileRecordsActive = isMobile;
+                this.rebuildRecordsLayoutForBreakpoint();
+            }
+            catch (err) {
+                LogError(err);
+            }
+        }), 
+        // Open requests from surfaces outside this component (drawer pill)
+        this.recordSwitcher.OpenRequested.subscribe(() => {
+            this.OpenRecordSwitcher();
         }));
-        // Subscribe to configuration changes to sync tabs
+        // Subscribe to configuration changes to sync tabs.
+        // The callback is exception-guarded: an error thrown from ONE emission
+        // would otherwise unsubscribe the stream permanently — after which the
+        // regions silently stop tracking the workspace (tabs drift, content
+        // stops loading) with no visible failure.
         this.subscriptions.push(this.workspaceManager.Configuration.subscribe(config => {
-            if (config) {
-                if (this.useSingleResourceMode) {
-                    // In single-resource mode, reload content if the tab content changed
-                    // The same tab ID can have different content (tab gets reused)
-                    const activeTab = config.tabs.find(t => t.id === config.activeTabId) || config.tabs[0];
-                    if (activeTab) {
-                        const signature = this.getTabContentSignature(activeTab);
-                        if (signature !== this.currentSingleResourceSignature) {
-                            // DO NOT call saveCurrentComponentQueryParams() here — by the time this
-                            // subscription fires, OpenTab has already replaced the tab config with the
-                            // new nav item's config, so queryParams are gone. The cache entry already
-                            // has the correct queryParams from the most recent unchanged-signature save.
-                            this.loadSingleResourceContent();
+            try {
+                if (config) {
+                    // Keep the RECORDS region in sync first — it also resolves whether
+                    // the region is the visible surface for this configuration.
+                    this.syncRecordsRegion(config);
+                    this.updateRecordSurfaceState(config);
+                    if (this.useSingleResourceMode) {
+                        // In single-resource mode, reload content if the tab content changed
+                        // The same tab ID can have different content (tab gets reused)
+                        const activeTab = config.tabs.find(t => t.id === config.activeTabId) || config.tabs[0];
+                        if (activeTab && this.isRecordTab(activeTab)) {
+                            // Active tab is a RECORD — the records region owns it. Leave the
+                            // main region's content (the last nav page) untouched behind it.
                         }
-                        else {
-                            // Signature unchanged — sync queryParams to cache entry so it stays current.
-                            // This catches incremental queryParam updates (e.g., user selects a conversation).
-                            this.saveCurrentComponentQueryParams();
+                        else if (activeTab) {
+                            const signature = this.getTabContentSignature(activeTab);
+                            if (signature !== this.currentSingleResourceSignature) {
+                                // DO NOT call saveCurrentComponentQueryParams() here — by the time this
+                                // subscription fires, OpenTab has already replaced the tab config with the
+                                // new nav item's config, so queryParams are gone. The cache entry already
+                                // has the correct queryParams from the most recent unchanged-signature save.
+                                this.loadSingleResourceContent();
+                            }
+                            else {
+                                // Signature unchanged — sync queryParams to cache entry so it stays current.
+                                // This catches incremental queryParam updates (e.g., user selects a conversation).
+                                this.saveCurrentComponentQueryParams();
+                            }
                         }
                     }
-                }
-                else if (this.layoutRestorationComplete && !this.isCreatingInitialTabs) {
-                    // In multi-tab mode, sync with Golden Layout
-                    // IMPORTANT: Only sync AFTER layout restoration is complete to avoid creating duplicate tabs
-                    // layoutRestorationComplete is set to true only after initializeGoldenLayout finishes
-                    this.syncTabsWithConfiguration(config.tabs);
+                    else if (this.layoutRestorationComplete && !this.isCreatingInitialTabs) {
+                        // In multi-tab mode, sync with Golden Layout.
+                        // Record tabs live in the records region — never in the main layout.
+                        // IMPORTANT: Only sync AFTER layout restoration is complete to avoid creating duplicate tabs
+                        // layoutRestorationComplete is set to true only after initializeGoldenLayout finishes
+                        this.syncTabsWithConfiguration(config.tabs.filter(t => !this.isRecordTab(t)));
+                    }
                 }
             }
+            catch (err) {
+                // Never let one bad emission kill the stream — see comment above.
+                LogError(err);
+            }
         }));
         // Subscribe to tab bar visibility changes for single-resource mode
         this.subscriptions.push(this.workspaceManager.TabBarVisible.subscribe(tabBarVisible => {
             this.handleTabBarVisibilityChange(tabBarVisible);
         }));
     }
+    /**
+     * RECORDS region event wiring: the separate layout's events route through
+     * the SAME handlers as the main layout — content loading, close, pin, and
+     * context menu are layout-agnostic; only layout persistence targets its
+     * own slot. Activation + persistence write-backs are suppressed during
+     * batch creation/restore (recordsCreatingTabs) so GL's per-tab-created
+     * events can't steal focus or persist half-built layouts.
+     */
+    wireRecordsLayoutEvents() {
+        this.subscriptions.push(this.recordsLayoutManager.TabShown.subscribe(async (event) => {
+            if (event.isFirstShow) {
+                await this.loadTabContent(event.tabId, event.container);
+                // Mark loaded ONLY when content actually attached to the LIVE
+                // container. During layout restore, GL can re-render item elements
+                // while an async load is in flight — the load appends into a
+                // detached element and the visible pane stays blank. Leaving the
+                // tab unmarked lets the next show retry, which hits the component
+                // cache and reattaches instantly into the live element.
+                const live = this.recordsLayoutManager.GetContainer(event.tabId);
+                if (live?.element && live.element.childElementCount > 0) {
+                    this.recordsLayoutManager.MarkTabLoaded(event.tabId);
+                }
+            }
+        }), this.recordsLayoutManager.TabClosed.subscribe(async (tabId) => {
+            this.cleanupTabComponent(tabId);
+            // REBUILD guard (breakpoint crossing): Destroy() fires TabClosed for
+            // every pane. The tabs are NOT closing — the layout is being rebuilt
+            // in the other chrome mode. Cache detach above is exactly what the
+            // re-init needs; everything below (CloseTab, backfill) must not run.
+            if (this.recordsRebuilding) {
+                return;
+            }
+            const closedTab = this.workspaceManager.GetTab(tabId);
+            // PROMOTE guard ("Move to Workspace"): the tab left the records GL
+            // because its region membership changed — it's still in the
+            // workspace config and the MAIN layout is about to pick it up.
+            // Closing it here would destroy the tab the user just promoted.
+            // cleanupTabComponent above still runs: the cache detach is what
+            // lets the main GL reattach the component with state intact.
+            if (closedTab && !this.isRecordTab(closedTab)) {
+                return;
+            }
+            // Guard: a configuration sync that removed this tab already updated
+            // the workspace — closing again would re-emit an unchanged config
+            // from inside a subscription pass.
+            if (closedTab) {
+                this.workspaceManager.CloseTab(tabId);
+            }
+            // Records close OUTRIGHT (no keep-last-tab-alive rule) — if that
+            // emptied the workspace, land the user on the active app's default
+            // tab instead of a blank shell.
+            await this.backfillEmptyWorkspace();
+        }), this.recordsLayoutManager.ActiveTab.subscribe(tabId => {
+            this.recordsRegionActiveTabId = tabId;
+            if (tabId && this.ShowRecordsRegion && !this.recordsCreatingTabs && !this.recordsRebuilding) {
+                this.workspaceManager.SetActiveTab(tabId);
+            }
+        }), this.recordsLayoutManager.LayoutChanged.subscribe(() => {
+            // MOBILE suppression: the mobile surface renders a FLATTENED clone of
+            // the persisted layout — persisting it would destroy the user's
+            // desktop splits (GL fires stateChanged on load/resize/tab ops, so
+            // the clobber would land within the 500ms persist debounce of the
+            // first mobile render). While suppressed, tab opens/closes still
+            // persist via the tab LIST; on the next desktop init a changed tab
+            // count hits the existing count-mismatch restore path (fresh
+            // sequential creation — splits lost gracefully, records kept).
+            if (this.recordsLayoutInitialized && !this.recordsCreatingTabs && !this.recordsRebuilding && !this.mobileRecordsActive) {
+                this.workspaceManager.UpdateRecordsLayout(this.recordsLayoutManager.SaveLayout());
+            }
+        }), this.recordsLayoutManager.TabDoubleClicked.subscribe(tabId => {
+            this.workspaceManager.TogglePin(tabId);
+        }), this.recordsLayoutManager.TabRightClicked.subscribe(event => {
+            this.showContextMenu(event.x, event.y, event.tabId, event.anchorEl);
+        }));
+    }
     ngAfterViewInit() {
         // Initialize Golden Layout only if we're not in single-resource mode
         if (!this.useSingleResourceMode) {
@@ -235,7 +809,13 @@ export class TabContainerComponent extends BaseAngularComponent {
         // If not, wait for it to be loaded before proceeding
         const config = this.workspaceManager.GetConfiguration();
         if (!config) {
-            // Configuration not loaded yet - wait for it
+            // Configuration not loaded yet — wait for it. TRACKED in
+            // this.subscriptions: the sub normally retires itself on the first
+            // non-null config, but if the component is destroyed while config is
+            // still null (failed load, fast navigation away), an untracked sub
+            // would outlive us and re-init a destroyed component when config
+            // finally lands. Unsubscribe is idempotent — self-retire + ngOnDestroy
+            // both firing is safe.
             const configSub = this.workspaceManager.Configuration.subscribe(loadedConfig => {
                 if (loadedConfig) {
                     configSub.unsubscribe();
@@ -243,14 +823,18 @@ export class TabContainerComponent extends BaseAngularComponent {
                     this.initializeGoldenLayout(forceCreateTabs);
                 }
             });
+            this.subscriptions.push(configSub);
             return;
         }
         // Initialize Golden Layout (we have config now)
         this.layoutManager.Initialize(this.glContainer.nativeElement);
         // Mark layout as initialized
         this.layoutInitialized = true;
+        // The MAIN layout hosts only non-record tabs — record tabs live in the
+        // separate records region (no-op filter under classic style).
+        const mainTabs = config.tabs.filter(t => !this.isRecordTab(t));
         // Check if config has no tabs
-        if (config.tabs.length === 0) {
+        if (mainTabs.length === 0) {
             // No tabs to load, but mark restoration as complete
             this.layoutRestorationComplete = true;
             return;
@@ -260,8 +844,8 @@ export class TabContainerComponent extends BaseAngularComponent {
         if (hasSavedLayout && !forceCreateTabs && config.layout) {
             // VALIDATE: Check that layout component count matches tabs array count
             const layoutComponentCount = this.countLayoutComponents(config.layout.root);
-            if (layoutComponentCount !== config.tabs.length) {
-                console.warn(`[TabContainer.initializeGoldenLayout] Layout/tabs mismatch: layout has ${layoutComponentCount} components but tabs array has ${config.tabs.length} tabs. Clearing layout.`);
+            if (layoutComponentCount !== mainTabs.length) {
+                console.warn(`[TabContainer.initializeGoldenLayout] Layout/tabs mismatch: layout has ${layoutComponentCount} components but tabs array has ${mainTabs.length} tabs. Clearing layout.`);
                 this.workspaceManager.ClearLayout();
                 // Fall through to create fresh tabs
             }
@@ -290,8 +874,8 @@ export class TabContainerComponent extends BaseAngularComponent {
             }
         }
         // CREATE FRESH - no saved layout, forceCreateTabs=true, or layout load failed
-        // Use config.tabs sorted by sequence to build a simple single-stack layout
-        const sortedTabs = [...config.tabs].sort((a, b) => a.sequence - b.sequence);
+        // Use the main (non-record) tabs sorted by sequence for a single-stack layout
+        const sortedTabs = [...mainTabs].sort((a, b) => a.sequence - b.sequence);
         this.isCreatingInitialTabs = true;
         try {
             sortedTabs.forEach(tab => {
@@ -366,9 +950,59 @@ export class TabContainerComponent extends BaseAngularComponent {
                 }
             }
         }
+        // The RECORDS region is a separate layout with the same destroyed-cache
+        // problem — sweep it in BOTH main modes or every record pane stays
+        // permanently blank after a tenant switch (marked loaded, component gone).
+        await this.reloadRecordsRegionTabs();
+    }
+    /** Mark all records-region tabs not-loaded and reload the active one (tenant switch) */
+    async reloadRecordsRegionTabs() {
+        if (!this.recordsLayoutInitialized) {
+            return;
+        }
+        for (const tabId of this.recordsLayoutManager.GetAllTabIds()) {
+            this.recordsLayoutManager.MarkTabNotLoaded(tabId);
+        }
+        const activeTabId = this.workspaceManager.GetActiveTabId();
+        const activeTab = activeTabId ? this.workspaceManager.GetTab(activeTabId) : undefined;
+        if (activeTab && this.isRecordTab(activeTab)) {
+            const container = this.recordsLayoutManager.GetContainer(activeTab.id);
+            if (container) {
+                await this.loadTabContent(activeTab.id, container);
+                this.recordsLayoutManager.MarkTabLoaded(activeTab.id);
+            }
+        }
+    }
+    /**
+     * If the workspace has no tabs left (closing the last record empties it —
+     * records skip the manager's keep-last-tab-alive rule), open the active
+     * app's default tab so the user lands on a meaningful surface.
+     */
+    async backfillEmptyWorkspace() {
+        const config = this.workspaceManager.GetConfiguration();
+        if (!config || config.tabs.length > 0) {
+            return;
+        }
+        const app = this.appManager.GetActiveApp();
+        if (!app) {
+            return;
+        }
+        const request = await app.CreateDefaultTab();
+        if (request) {
+            this.workspaceManager.OpenTab(request, app.GetColor());
+        }
     }
     ngOnDestroy() {
+        // Pane crumbs are appRef-attached views — destroy them or they stay in
+        // every CD pass after the container is gone (logout/tenant teardown).
+        this.originCrumbRefs.forEach(ref => ref.destroy());
+        this.originCrumbRefs.clear();
         this.subscriptions.forEach(sub => sub.unsubscribe());
+        // Tear down the records region's layout
+        if (this.recordsLayoutInitialized) {
+            this.recordsLayoutManager.Destroy();
+            this.recordsLayoutInitialized = false;
+        }
         // Cleanup single-resource mode component if exists
         this.cleanupSingleResourceComponent();
         // Clear the component cache (destroys all components)
@@ -435,8 +1069,11 @@ export class TabContainerComponent extends BaseAngularComponent {
                     // All OTHER unpinned tabs should be pinned since they represent content
                     // the user explicitly kept open
                     const updatedTabs = config.tabs.map(tab => {
-                        // Pin all tabs except the newly active one (which is the temporary tab)
-                        if (tab.id !== config.activeTabId && !tab.isPinned) {
+                        // Pin all MAIN-layout tabs except the newly active one (which is
+                        // the temporary tab). Record tabs are exempt — their pin state is
+                        // user-owned (PreservePinState), and force-pinning them makes the
+                        // temp-tab semantics path-dependent.
+                        if (tab.id !== config.activeTabId && !tab.isPinned && !this.isRecordTab(tab)) {
                             return { ...tab, isPinned: true };
                         }
                         return tab;
@@ -479,7 +1116,18 @@ export class TabContainerComponent extends BaseAngularComponent {
             return;
         }
         // Get the active tab (or first tab)
-        const activeTab = config.tabs.find(t => t.id === config.activeTabId) || config.tabs[0];
+        let activeTab = config.tabs.find(t => t.id === config.activeTabId) || config.tabs[0];
+        // Records style: record tabs render in the RECORDS region, never here.
+        // When the active tab is a record (e.g. reloading the app while viewing
+        // one), the main region shows the most recently used NAV tab behind it.
+        if (activeTab && this.isRecordTab(activeTab)) {
+            const navTabs = config.tabs.filter(t => !this.isRecordTab(t));
+            activeTab = [...navTabs].sort((a, b) => (b.lastAccessedAt || '').localeCompare(a.lastAccessedAt || ''))[0];
+            if (!activeTab) {
+                // Only record tabs exist — the records region owns first-load
+                return;
+            }
+        }
         if (!activeTab) {
             // Config has tabs but none match activeTabId and the array fallback failed.
             // This shouldn't happen, but if it does, unblock the loading screen.
@@ -523,8 +1171,13 @@ export class TabContainerComponent extends BaseAngularComponent {
             // IMPORTANT: We use markAsAttached here, NOT markAsDetached — the component is being
             // reattached to the DOM and should NOT be eligible for LRU eviction.
             this.cacheManager.markAsAttached(driverClass, resourceData.ResourceRecordID || '', activeTab.applicationId, activeTab.id, cacheDiscriminator);
+            // Record panes lead with their origin crumb
+            this.ensureRecordOriginCrumb(activeTab, container);
+            // Re-home the component's tab binding (see loadTabContent's cached
+            // branch — same cross-tab reattach hazard).
+            cached.componentRef.instance.RebindTabId(activeTab.id);
             // Reattach the cached wrapper element to single-resource container
-            cached.wrapperElement.style.height = "100%"; // Ensure full height
+            // (sizing via the pane-layout CSS: crumb fixed, content flex-fills)
             container.appendChild(cached.wrapperElement);
             // Store reference and identity for cleanup/detachment
             this.singleResourceComponentRef = cached.componentRef;
@@ -594,12 +1247,15 @@ export class TabContainerComponent extends BaseAngularComponent {
         // Guard: only update the title if THIS component is the currently displayed one.
         // Without this guard, cached components (detached but alive) can fire this callback
         // and overwrite the active tab's title with a stale name.
+        // CRITICAL: rename the tab this component was RENDERED FOR — never
+        // GetActiveTabId(). Under the records style the active tab can be a
+        // record (region showing) while the main region keeps a SUBSTITUTE nav
+        // component alive underneath; its emission was renaming the user's
+        // record tab (an Action Params record ended up titled "Data").
+        const renderedTabId = activeTab.id;
         instance.DisplayNameChangedEvent = (newName) => {
             if (this.singleResourceComponentRef?.instance === instance) {
-                const tabId = this.workspaceManager.GetActiveTabId();
-                if (tabId) {
-                    this.workspaceManager.UpdateTabTitle(tabId, newName);
-                }
+                this.workspaceManager.UpdateTabTitle(renderedTabId, newName);
             }
         };
         // When a record is saved, re-key the tab and cache (new-record → saved transition)
@@ -613,13 +1269,12 @@ export class TabContainerComponent extends BaseAngularComponent {
         instance.ResourceCloseRequestedEvent = () => {
             this.handleResourceCloseRequested(activeTab.id, instance);
         };
+        // Record panes lead with their origin crumb
+        this.ensureRecordOriginCrumb(activeTab, container);
         // Get the native element and append to container
+        // (sizing via the pane-layout CSS: crumb fixed, content flex-fills)
         const nativeElement = componentRef.hostView.rootNodes[0];
         container.appendChild(nativeElement);
-        // now make sure that the container's direct child is 100% height
-        if (container.children?.length > 0) {
-            container.children[0].style.height = "100%";
-        }
         // Cache the component for reuse when switching between nav items within the same app.
         // Without this, every nav switch creates a brand new component from scratch.
         const wrapperElement = nativeElement;
@@ -880,12 +1535,56 @@ export class TabContainerComponent extends BaseAngularComponent {
             title: tab.title,
             route: tab.configuration['route'] || '',
             isPinned: tab.isPinned,
-            isLoaded: false
+            isLoaded: false,
+            typeIcon: this.resolveTabTypeIcon(tab)
         };
         this.layoutManager.AddTab(state);
+        // Nav-item icons live behind an async lookup — upgrade in the background
+        void this.upgradeNavTabIcon(tab, this.layoutManager);
         // Load display name in background without loading full component
         this.updateTabDisplayName(tab);
     }
+    /**
+     * Synchronous best-effort TYPE icon for a tab (the app-colored icon in
+     * the tab's type slot — see TabComponentState.typeIcon). Record tabs
+     * resolve fully here (entity metadata is loaded); nav tabs start with the
+     * app's icon and get upgraded to the nav item's own icon asynchronously
+     * (upgradeNavTabIcon).
+     */
+    resolveTabTypeIcon(tab) {
+        if (IsRecordsTabConfiguration(tab.configuration)) {
+            // Shared helper — the record bar and switcher sheet resolve through the
+            // same function so a record shows one icon everywhere
+            return ResolveRecordTypeIcon(tab.configuration, this.ProviderToUse);
+        }
+        const app = this.appManager.GetAppById(tab.applicationId);
+        return app?.Icon || 'fa-regular fa-file';
+    }
+    /**
+     * Resolve and apply a NAV tab's type icon — the async owner of nav-tab
+     * icons (GetNavItems is a cached JSON parse: near-instant, but async by
+     * contract). Ladder: nav item's own icon → app icon → generic. No-op for
+     * record tabs (their icons resolve synchronously). Idempotent: the slot
+     * only touches the DOM when the class actually changes.
+     */
+    async upgradeNavTabIcon(tab, manager) {
+        if (IsRecordsTabConfiguration(tab.configuration)) {
+            return;
+        }
+        const app = this.appManager.GetAppById(tab.applicationId);
+        let navItemIcon;
+        const navItemName = tab.configuration?.['navItemName'];
+        if (app && typeof navItemName === 'string' && navItemName) {
+            try {
+                const navItems = await app.GetNavItems();
+                navItemIcon = navItems.find(i => i.Label === navItemName)?.Icon;
+            }
+            catch {
+                // Icon resolution is cosmetic — fall through to the app fallback.
+            }
+        }
+        manager.UpdateTabStyle(tab.id, { typeIcon: navItemIcon || app?.Icon || 'fa-regular fa-file' });
+    }
     /**
      * Handle tab shown event for lazy loading
      */
@@ -931,6 +1630,9 @@ export class TabContainerComponent extends BaseAngularComponent {
             }
             // Clear any existing content from the container (important for tab reuse)
             glContainer.element.innerHTML = '';
+            // Record panes lead with their origin crumb — BEFORE content attaches
+            // (fresh or cached), so it is always the pane's first element.
+            this.ensureRecordOriginCrumb(tab, glContainer.element);
             // Get driver class for cache lookup (resolves to actual component class name)
             const driverClass = resourceData.Configuration?.resourceTypeDriverClass || resourceData.ResourceType;
             // Discriminate distinct "new record" tabs of different entities (all have empty
@@ -943,6 +1645,12 @@ export class TabContainerComponent extends BaseAngularComponent {
                 glContainer.element.appendChild(cached.wrapperElement);
                 // Mark as attached to this tab
                 this.cacheManager.markAsAttached(driverClass, resourceData.ResourceRecordID || '', tab.applicationId, tabId, cacheDiscriminator);
+                // RE-HOME the component's tab binding: the cache keys on
+                // driver+record+app, so this component may have been born under a
+                // DIFFERENT tab id — without the rebind its query-param
+                // subscription listens to the dead tab forever and deliveries to
+                // this tab are lost.
+                cached.componentRef.instance.RebindTabId(tabId);
                 // Keep legacy componentRefs map updated
                 this.componentRefs.set(tabId, cached.componentRef);
                 // If resource is already loaded, update tab title immediately and signal
@@ -991,9 +1699,12 @@ export class TabContainerComponent extends BaseAngularComponent {
             instance.ResourceCloseRequestedEvent = () => {
                 this.handleResourceCloseRequested(tabId, instance);
             };
-            // Wire up display name change notifications
+            // Wire up display name change notifications (routed to whichever
+            // Golden Layout hosts this tab)
             instance.DisplayNameChangedEvent = (newName) => {
-                this.layoutManager.UpdateTabStyle(tabId, { title: newName });
+                const t = this.workspaceManager.GetTab(tabId);
+                const manager = t && this.isRecordTab(t) ? this.recordsLayoutManager : this.layoutManager;
+                manager.UpdateTabStyle(tabId, { title: newName });
                 this.workspaceManager.UpdateTabTitle(tabId, newName);
             };
             // Create a container div for the component
@@ -1056,8 +1767,9 @@ export class TabContainerComponent extends BaseAngularComponent {
             const tempInstance = runInInjectionContext(this.environmentInjector, () => new resourceReg.SubClass());
             const displayName = await tempInstance.GetResourceDisplayName(resourceData);
             if (displayName && displayName !== tab.title) {
-                // Update the tab title in Golden Layout
-                this.layoutManager.UpdateTabStyle(tab.id, { title: displayName });
+                // Update the tab title in whichever Golden Layout hosts this tab
+                const targetManager = this.isRecordTab(tab) ? this.recordsLayoutManager : this.layoutManager;
+                targetManager.UpdateTabStyle(tab.id, { title: displayName });
                 // Update the tab title in workspace configuration for persistence
                 this.workspaceManager.UpdateTabTitle(tab.id, displayName);
             }
@@ -1233,11 +1945,97 @@ export class TabContainerComponent extends BaseAngularComponent {
         }
         return 0;
     }
+    /**
+     * A saved records layout is restorable only when its component tabIds are
+     * EXACTLY the current record-tab set. Count equality is not enough: a
+     * persistence-suppressed mobile session can open one record and close
+     * another, leaving a same-sized layout that references a closed tab —
+     * restoring it renders a ghost pane (content load fails) until the next
+     * sync sweeps it.
+     */
+    layoutCoversExactTabSet(root, recordTabs) {
+        const layoutIds = new Set();
+        const collect = (node) => {
+            if (!node) {
+                return;
+            }
+            if (node.type === 'component') {
+                const id = node.componentState?.['tabId'];
+                if (typeof id === 'string') {
+                    layoutIds.add(id);
+                }
+                return;
+            }
+            node.content?.forEach(collect);
+        };
+        collect(root);
+        return layoutIds.size === recordTabs.length && recordTabs.every(t => layoutIds.has(t.id));
+    }
     /**
      * Cleanup a tab's component
      * Detaches from DOM but keeps in cache for potential reuse
      */
+    /**
+     * Ensure a record pane's FIRST element is its origin crumb (Matt's
+     * pane-level placement — correct in splits, docked panes, and
+     * single-resource, unlike the old region-level bar). Recreated on every
+     * content attach: the pane container is cleared/re-homed on loads,
+     * cache reattaches, and promote/demote moves.
+     */
+    ensureRecordOriginCrumb(tab, containerEl) {
+        this.destroyOriginCrumb(tab.id);
+        // The single-resource container is REUSED across tabs — sweep any crumb
+        // element a previous tab left behind before (maybe) adding ours.
+        containerEl.querySelectorAll('mj-record-origin-crumb').forEach(e => e.remove());
+        if (!this.RecordsStyleActive || !IsRecordsTabConfiguration(tab.configuration)) {
+            return;
+        }
+        const origin = GetRecordSourceContext(tab.configuration);
+        if (!origin) {
+            return; // No captured origin (deep link, history re-open) — no crumb.
+        }
+        const ref = createComponent(RecordOriginCrumbComponent, {
+            environmentInjector: this.environmentInjector
+        });
+        ref.setInput('Origin', origin);
+        this.appRef.attachView(ref.hostView);
+        const el = ref.hostView.rootNodes[0];
+        containerEl.insertBefore(el, containerEl.firstChild);
+        this.originCrumbRefs.set(tab.id, ref);
+    }
+    /**
+     * Refresh a pane crumb's origin after a config change (re-open
+     * re-capture). Also handles the CREATE case: a record first opened
+     * WITHOUT an origin (deep link, history recreate) whose re-open just
+     * captured one — the pane is already attached, so ensureRecordOriginCrumb
+     * never runs again; build the crumb into the live pane here.
+     */
+    updateOriginCrumb(tab) {
+        const ref = this.originCrumbRefs.get(tab.id);
+        const origin = GetRecordSourceContext(tab.configuration);
+        if (ref) {
+            ref.setInput('Origin', origin);
+            return;
+        }
+        if (origin && this.RecordsStyleActive && IsRecordsTabConfiguration(tab.configuration)) {
+            const paneEl = this.recordsLayoutManager.GetContainer(tab.id)?.element
+                ?? this.layoutManager.GetContainer(tab.id)?.element;
+            if (paneEl && paneEl.childElementCount > 0) {
+                this.ensureRecordOriginCrumb(tab, paneEl);
+            }
+        }
+    }
+    destroyOriginCrumb(tabId) {
+        const ref = this.originCrumbRefs.get(tabId);
+        if (ref) {
+            ref.destroy();
+            this.originCrumbRefs.delete(tabId);
+        }
+    }
     cleanupTabComponent(tabId) {
+        // The pane crumb belongs to the pane, not the cached component — always
+        // destroyed here; the next attach recreates it in the new pane.
+        this.destroyOriginCrumb(tabId);
         // First, try to detach from cache (preserves component for reuse)
         const cachedInfo = this.cacheManager.findAndDetachByTabId(tabId);
         if (cachedInfo) {
@@ -1315,13 +2113,24 @@ export class TabContainerComponent extends BaseAngularComponent {
                         }
                     }
                 }
-                // Update styling for existing tabs
+                // Update styling for existing tabs. typeIcon ownership is split:
+                // record tabs resolve synchronously here; NAV tab icons are owned
+                // by upgradeNavTabIcon (async ladder) — setting the sync fallback
+                // here too would downgrade an upgraded icon every emission and
+                // flicker. Restored nav tabs never pass through createTab, so the
+                // upgrade call here is also their FIRST icon application.
                 const app = this.appManager.GetAppById(tab.applicationId);
-                this.layoutManager.UpdateTabStyle(tab.id, {
+                const styleUpdate = {
                     isPinned: tab.isPinned,
                     title: tab.title,
-                    appColor: app?.GetColor() || '#757575'
-                });
+                    appColor: app?.GetColor() || DEFAULT_APP_COLOR
+                };
+                if (IsRecordsTabConfiguration(tab.configuration)) {
+                    styleUpdate.typeIcon = this.resolveTabTypeIcon(tab);
+                }
+                this.layoutManager.UpdateTabStyle(tab.id, styleUpdate);
+                void this.upgradeNavTabIcon(tab, this.layoutManager);
+                this.updateOriginCrumb(tab);
             }
         });
         // Focus the active tab
@@ -1333,38 +2142,113 @@ export class TabContainerComponent extends BaseAngularComponent {
     /**
      * Show context menu
      */
-    showContextMenu(x, y, tabId) {
+    showContextMenu(x, y, tabId, anchorEl) {
         this.contextMenuX = x;
         this.contextMenuY = y;
         this.contextMenuTabId = tabId;
         this.contextMenuVisible = true;
-        // Close menu when clicking outside - use setTimeout to avoid immediate trigger
+        // Remember the invoking control so closing can hand focus back (the
+        // slot button passes itself; right-click falls back to whatever was
+        // focused). aria-expanded reflects the open menu on the anchor.
+        this.contextMenuAnchor = anchorEl ?? (document.activeElement instanceof HTMLElement ? document.activeElement : null);
+        if (this.contextMenuAnchor?.classList.contains('mj-tab-type-slot')) {
+            this.contextMenuAnchor.setAttribute('aria-expanded', 'true');
+        }
+        // GL tab events (right-click, type-slot click) originate OUTSIDE any
+        // Angular CD trigger — zoneless: without an explicit flush the flag
+        // flips but the menu never renders.
+        SafeDetectChanges(this.cdr);
+        // Menu-pattern focus: land on the first enabled item so arrow keys work
+        // immediately (rAF — the flush above just created the DOM).
+        requestAnimationFrame(() => {
+            const first = document.querySelector('.context-menu [role="menuitem"]:not([disabled])');
+            first?.focus();
+        });
+        // Close menu when clicking outside - use setTimeout to avoid immediate trigger.
+        // CAPTURE phase: bubble-phase closers are blind to clicks whose
+        // propagation something stopped (the origin crumb stops its clicks so
+        // GL pane-focus can't stomp navigation) — the menu stayed open when the
+        // outside click landed on such an element.
         setTimeout(() => {
             const clickHandler = (event) => {
                 const target = event.target;
                 if (!target.closest('.context-menu')) {
                     this.hideContextMenu();
-                    document.removeEventListener('click', clickHandler);
-                    document.removeEventListener('keydown', keyHandler);
+                    document.removeEventListener('click', clickHandler, true);
+                    document.removeEventListener('keydown', keyHandler, true);
                 }
             };
             const keyHandler = (event) => {
                 if (event.key === 'Escape') {
                     this.hideContextMenu();
-                    document.removeEventListener('click', clickHandler);
-                    document.removeEventListener('keydown', keyHandler);
+                    document.removeEventListener('click', clickHandler, true);
+                    document.removeEventListener('keydown', keyHandler, true);
                 }
             };
-            document.addEventListener('click', clickHandler);
-            document.addEventListener('keydown', keyHandler);
+            document.addEventListener('click', clickHandler, true);
+            document.addEventListener('keydown', keyHandler, true);
         }, 0);
     }
     /**
      * Hide context menu
      */
-    hideContextMenu() {
+    hideContextMenu(restoreFocus = true) {
         this.contextMenuVisible = false;
         this.contextMenuTabId = null;
+        const anchor = this.contextMenuAnchor;
+        this.contextMenuAnchor = null;
+        if (anchor?.classList.contains('mj-tab-type-slot')) {
+            anchor.setAttribute('aria-expanded', 'false');
+        }
+        // Outside-click/Escape teardown also runs outside CD — flush so the
+        // menu actually disappears (see showContextMenu).
+        SafeDetectChanges(this.cdr);
+        // Menu-pattern focus return (app-switcher precedent). Actions that
+        // deliberately move the user to another surface pass restoreFocus=false
+        // and let the destination own focus.
+        if (restoreFocus && anchor?.isConnected) {
+            requestAnimationFrame(() => anchor.focus());
+        }
+    }
+    /**
+     * role="menu" keyboard model: ArrowUp/Down rove (wrapping) over enabled
+     * items, Home/End jump, Escape closes with focus return, Tab dismisses
+     * (native menus don't trap Tab).
+     */
+    onMenuKeydown(event) {
+        const items = Array.from(document.querySelectorAll('.context-menu [role="menuitem"]:not([disabled])'));
+        if (items.length === 0) {
+            return;
+        }
+        const idx = items.indexOf(document.activeElement);
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                items[(idx + 1) % items.length].focus();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                items[(idx - 1 + items.length) % items.length].focus();
+                break;
+            case 'Home':
+                event.preventDefault();
+                items[0].focus();
+                break;
+            case 'End':
+                event.preventDefault();
+                items[items.length - 1].focus();
+                break;
+            case 'Escape':
+                // Handle here (with stopPropagation) so Escape works even before the
+                // deferred document-level teardown listener attaches.
+                event.preventDefault();
+                event.stopPropagation();
+                this.hideContextMenu();
+                break;
+            case 'Tab':
+                this.hideContextMenu(false);
+                break;
+        }
     }
     /**
      * Check if context menu tab is pinned
@@ -1375,6 +2259,69 @@ export class TabContainerComponent extends BaseAngularComponent {
         const tab = this.workspaceManager.GetTab(this.contextMenuTabId);
         return tab?.isPinned || false;
     }
+    /** Context tab is a records-REGION record — eligible for "Move to Workspace" */
+    get canContextMoveToWorkspace() {
+        // Docked/region composition is a DESKTOP concept — no move actions on mobile
+        if (!this.contextMenuTabId || !this.RecordsStyleActive || this.mobileRecordsActive)
+            return false;
+        const tab = this.workspaceManager.GetTab(this.contextMenuTabId);
+        return !!tab && IsRecordsRegionTab(tab.configuration);
+    }
+    /** Context tab is a DOCKED record — eligible for "Move to Records" */
+    get canContextMoveToRecords() {
+        if (!this.contextMenuTabId || !this.RecordsStyleActive || this.mobileRecordsActive)
+            return false;
+        const tab = this.workspaceManager.GetTab(this.contextMenuTabId);
+        return !!tab && IsRecordsTabConfiguration(tab.configuration) && IsRecordDockedToWorkspace(tab.configuration);
+    }
+    /**
+     * Promote: records region → main workspace layout ("Move to Workspace").
+     * ORDER MATTERS: activate FIRST, then flip the flag. With the tab already
+     * active, (a) the moved tab stays the user's focus through the membership
+     * flip (syncTabsWithConfiguration's tail focuses config.activeTabId), and
+     * (b) a single-resource→multi-tab transition triggered by the flip exempts
+     * it from the force-pin sweep (it IS the activeTabId).
+     */
+    onContextMoveToWorkspace() {
+        const tabId = this.contextMenuTabId;
+        this.hideContextMenu(false);
+        if (!tabId)
+            return;
+        this.workspaceManager.SetActiveTab(tabId);
+        this.workspaceManager.UpdateTabConfiguration(tabId, { [RECORD_DOCKED_TO_WORKSPACE_KEY]: true });
+        this.assertMovedTabActivation(tabId);
+    }
+    /**
+     * Demote: main workspace layout → records region ("Move to Records").
+     * Same activate-first ordering: the flip's emission then computes
+     * showing=true in syncRecordsRegion, so the region surfaces focused on
+     * the returned tab. `false` (not undefined) so the choice is explicit in
+     * the persisted configuration.
+     */
+    onContextMoveToRecords() {
+        const tabId = this.contextMenuTabId;
+        this.hideContextMenu(false);
+        if (!tabId)
+            return;
+        this.workspaceManager.SetActiveTab(tabId);
+        this.workspaceManager.UpdateTabConfiguration(tabId, { [RECORD_DOCKED_TO_WORKSPACE_KEY]: false });
+        this.assertMovedTabActivation(tabId);
+    }
+    /**
+     * A move's SOURCE layout auto-activates its next tab when the moved tab is
+     * removed, and that GL activation WRITES BACK into the workspace — stomping
+     * the moved tab's activation (demote left the user staring at the main
+     * layout while the record surfaced in the records region). Re-assert after
+     * the removal cascade settles — the assertRecordActivation pattern.
+     */
+    assertMovedTabActivation(tabId) {
+        setTimeout(() => {
+            const config = this.workspaceManager.GetConfiguration();
+            if (config?.tabs.some(t => t.id === tabId) && config.activeTabId !== tabId) {
+                this.workspaceManager.SetActiveTab(tabId);
+            }
+        }, 0);
+    }
     /**
      * Toggle pin from context menu
      */
@@ -1389,9 +2336,12 @@ export class TabContainerComponent extends BaseAngularComponent {
      */
     onContextClose() {
         if (this.contextMenuTabId) {
-            this.layoutManager.RemoveTab(this.contextMenuTabId);
+            const tab = this.workspaceManager.GetTab(this.contextMenuTabId);
+            const manager = tab && this.isRecordTab(tab) ? this.recordsLayoutManager : this.layoutManager;
+            manager.RemoveTab(this.contextMenuTabId);
         }
-        this.hideContextMenu();
+        // The anchor lives on the closed tab — nothing to return focus to.
+        this.hideContextMenu(false);
     }
     /**
      * Close all other tabs from context menu
@@ -1604,34 +2554,44 @@ export class TabContainerComponent extends BaseAngularComponent {
     }
     static ɵfac = function TabContainerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TabContainerComponent)(i0.ɵɵdirectiveInject(i1.GoldenLayoutManager), i0.ɵɵdirectiveInject(i1.WorkspaceStateManager), i0.ɵɵdirectiveInject(i1.ApplicationManager), i0.ɵɵdirectiveInject(i0.ApplicationRef), i0.ɵɵdirectiveInject(i0.EnvironmentInjector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TabContainerComponent, selectors: [["mj-tab-container"]], viewQuery: function TabContainerComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 5)(_c1, 5);
+            i0.ɵɵviewQuery(_c0, 5)(_c1, 5)(_c2, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.glContainer = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.directContentContainer = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.recordsGlContainer = _t.first);
         } }, hostBindings: function TabContainerComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("resize", function TabContainerComponent_resize_HostBindingHandler() { return ctx.onWindowResize(); }, i0.ɵɵresolveWindow);
-        } }, outputs: { firstResourceLoadComplete: "firstResourceLoadComplete", layoutInitError: "layoutInitError" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 2, consts: [["directContentContainer", ""], ["glContainer", ""], [1, "tab-container"], [1, "direct-content-container"], [1, "gl-container"], [1, "context-menu", 3, "left", "top"], [1, "context-menu"], [1, "context-menu-item", 3, "click"], [1, "fa-solid", "fa-thumbtack"], [1, "context-menu-divider"], [1, "fa-solid", "fa-house-chimney"], [1, "fa-solid", "fa-xmark"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-angles-right"], [1, "check"], [1, "fa-solid", "fa-check"]], template: function TabContainerComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 2);
-            i0.ɵɵconditionalCreate(1, TabContainerComponent_Conditional_1_Template, 2, 0, "div", 3)(2, TabContainerComponent_Conditional_2_Template, 2, 0, "div", 4);
-            i0.ɵɵconditionalCreate(3, TabContainerComponent_Conditional_3_Template, 23, 10, "div", 5);
+        } }, outputs: { firstResourceLoadComplete: "firstResourceLoadComplete", layoutInitError: "layoutInitError" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 5, consts: [["directContentContainer", ""], ["glContainer", ""], ["recordsGlContainer", ""], [1, "tab-container"], [1, "main-region"], [1, "direct-content-container"], [1, "gl-container"], ["role", "menu", "aria-label", "Tab actions", 1, "context-menu", 3, "left", "top"], [1, "records-region"], [3, "Title", "Icon", "Color", "Count"], [1, "records-gl-container"], [3, "VisibleChange", "ActivateRequested", "CloseRequested", "Entries", "Visible"], [3, "SwitcherRequested", "Title", "Icon", "Color", "Count"], ["role", "menu", "aria-label", "Tab actions", 1, "context-menu", 3, "keydown"], ["type", "button", "role", "menuitem", 1, "context-menu-item", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-thumbtack"], [1, "context-menu-divider"], ["type", "button", "role", "menuitem", 1, "context-menu-item", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-house-chimney"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], ["aria-hidden", "true", 1, "fa-solid", "fa-layer-group"], ["aria-hidden", "true", 1, "fa-solid", "fa-angles-right"], [1, "check"], ["aria-hidden", "true", 1, "fa-solid", "fa-check"], ["type", "button", "role", "menuitem", 1, "context-menu-item"], ["aria-hidden", "true", 1, "fa-solid", "fa-arrow-up-right-from-square"], ["aria-hidden", "true", 1, "fa-solid", "fa-file-lines"]], template: function TabContainerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 3)(1, "div", 4);
+            i0.ɵɵconditionalCreate(2, TabContainerComponent_Conditional_2_Template, 2, 0, "div", 5)(3, TabContainerComponent_Conditional_3_Template, 2, 0, "div", 6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(4, TabContainerComponent_Conditional_4_Template, 5, 5);
+            i0.ɵɵconditionalCreate(5, TabContainerComponent_Conditional_5_Template, 24, 12, "div", 7);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.useSingleResourceMode ? 1 : 2);
+            i0.ɵɵclassProp("region-hidden", ctx.ShowRecordsRegion);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.useSingleResourceMode ? 2 : 3);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.contextMenuVisible ? 3 : -1);
-        } }, styles: [":host {\n  display: flex;\n  flex: 1;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.tab-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n}\n\n.gl-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background: var(--mj-bg-page);\n}\n\n/* Direct content container for single-resource mode */\n/* Renders components directly without Golden Layout overhead */\n.direct-content-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-page);\n  overflow: hidden;\n}\n\n.tab-content-container {\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  padding: 20px;\n}\n\n/* Context Menu */\n.context-menu {\n  position: fixed;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  min-width: 150px;\n  z-index: 10001;\n  overflow: hidden;\n}\n\n.context-menu .context-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n}\n\n.context-menu .context-menu-item i {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n.context-menu .context-menu-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.context-menu .context-menu-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n/* Context menu item variants */\n.context-menu-item.new-item i { color: var(--mj-brand-primary); }\n.context-menu-item.new-item { font-weight: 500; }\n.context-menu-item.disabled { color: var(--mj-text-disabled); cursor: default; }\n.context-menu-item.disabled:hover { background: transparent; }\n.context-menu-item.disabled i { color: var(--mj-text-disabled); }\n.context-menu-item .check { margin-left: auto; color: var(--mj-status-success); font-size: 12px; }\n\n/* Override Golden Layout styles */\n/* Global overrides */\n\n/* Ensure GL root container fills available space */\nmj-tab-container .lm_goldenlayout {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n/* Ensure the root layout item fills space */\nmj-tab-container .lm_root {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n/* Ensure proper box-sizing for all GL layout elements */\nmj-tab-container .lm_item,\nmj-tab-container .lm_content,\nmj-tab-container .lm_stack,\nmj-tab-container .lm_row,\nmj-tab-container .lm_column {\n  box-sizing: border-box !important;\n}\n\n/* Ensure layout items don't overflow */\nmj-tab-container .lm_item {\n  overflow: hidden !important;\n}\n\n/* Fix for .lm_items - the content container inside stacks */\n/* This is separate from .lm_item - it holds the actual tab content */\nmj-tab-container .lm_items {\n  width: 100% !important;\n  height: calc(100% - 38px) !important; /* Account for header height (38px) */\n  box-sizing: border-box !important;\n  position: relative !important;\n}\n\n/* When tabs are maximized, no header visible */\nmj-tab-container .lm_stack.lm_maximised > .lm_items {\n  height: 100% !important;\n}\n\n/* Target the anonymous ComponentItem div inside lm_items (has no class) */\n/* Created in golden-layout/src/ts/items/component-item.ts:51 without a class */\n/* NOTE: Do NOT set display here - GL uses display:none to hide inactive tabs */\nmj-tab-container .lm_items > div {\n  width: 100% !important;\n  height: 100% !important;\n  box-sizing: border-box !important;\n  flex-direction: column !important;\n}\n\n/* Only apply flex display to the active/visible tab content div */\nmj-tab-container .lm_items > div:not([style*=\"display: none\"]) {\n  display: flex !important;\n}\n\n/* Clearfix for float-based row layout - GL uses float:left for horizontal panes */\nmj-tab-container .lm_row::after {\n  content: \"\" !important;\n  display: table !important;\n  clear: both !important;\n}\n\n/* Force content children to respect parent bounds (GL sets pixel widths inline) */\nmj-tab-container .lm_content > * {\n  max-width: 100% !important;\n  width: 100% !important;\n}\n\nmj-tab-container .lm_content {\n  background: var(--mj-bg-page) !important;\n  display: flex !important;\n  flex-direction: column !important;\n  height: 100% !important;\n  width: 100% !important;\n}\n\nmj-tab-container .lm_item_container {\n  background: var(--mj-bg-page) !important;\n}\n\n/* Tab content wrapper - allow scrolling */\n.tab-content-wrapper {\n  overflow: auto !important;\n}\n\n/* Make tabs larger and easier to click */\nmj-tab-container .lm_header {\n  height: 38px !important;\n  padding-top: 2px !important;\n  padding-left: 4px !important;\n  background: var(--mj-bg-surface-sunken) !important;\n  border-bottom: 1px solid var(--mj-border-default) !important;\n  overflow: visible !important;\n  box-sizing: border-box !important;\n}\n\nmj-tab-container .lm_tabs {\n  height: 36px !important;\n}\n\n/* Hide Golden Layout window controls */\nmj-tab-container .lm_controls {\n  display: none !important;\n}\n\nmj-tab-container .lm_header .lm_tab {\n  padding: 0 16px !important;\n  font-size: 13px !important;\n  height: 35px !important;\n  line-height: 35px !important;\n  box-sizing: border-box !important;\n  cursor: pointer !important;\n  user-select: none !important;\n  background: transparent !important;\n  border: none !important;\n  border-bottom: 1px solid var(--mj-border-default) !important;\n  transition: all 0.15s ease !important;\n  position: relative !important;\n  z-index: 1 !important;\n  margin-right: 1px !important;\n}\n\n/* App color accent - left edge indicator */\nmj-tab-container .lm_header .lm_tab::before {\n  content: '' !important;\n  position: absolute !important;\n  left: 0 !important;\n  top: 4px !important;\n  bottom: 4px !important;\n  width: 3px !important;\n  border-radius: 0 2px 2px 0 !important;\n  background-color: var(--app-color, transparent) !important;\n  opacity: 0.6 !important;\n  transition: all 0.15s ease !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover {\n  background: var(--mj-bg-surface-hover) !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover::before {\n  opacity: 0.8 !important;\n}\n\nmj-tab-container .lm_header .lm_tab.lm_active {\n  background: var(--mj-bg-surface) !important;\n  height: 36px !important;\n  margin-bottom: -1px !important;\n  margin-right: 0 !important;\n  border: 1px solid var(--mj-border-default) !important;\n  border-bottom-color: var(--mj-bg-surface) !important;\n  border-radius: 4px 4px 0 0 !important;\n  z-index: 2 !important;\n}\n\n/* Enhanced app color accent for active tab */\nmj-tab-container .lm_header .lm_tab.lm_active::before {\n  opacity: 1 !important;\n  width: 3px !important;\n  top: 2px !important;\n  bottom: 2px !important;\n  box-shadow: 0 0 6px var(--app-color, transparent) !important;\n}\n\nmj-tab-container .lm_title {\n  cursor: pointer !important;\n  user-select: none !important;\n}\n\nmj-tab-container .lm_close_tab {\n  position: absolute !important;\n  right: 4px !important;\n  top: 50% !important;\n  transform: translateY(-50%) !important;\n  width: 16px !important;\n  height: 16px !important;\n  cursor: pointer !important;\n  opacity: 0 !important;\n  transition: all 0.15s ease !important;\n  flex-shrink: 0 !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  font-size: 10px !important;\n  color: var(--mj-text-secondary) !important;\n}\n\nmj-tab-container .lm_close_tab:hover {\n  opacity: 1 !important;\n  color: var(--mj-status-error) !important;\n}\n\n/* Show close button on hover (except pinned) */\nmj-tab-container .lm_header .lm_tab:hover:not(.pinned) .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\n/* Pinned tabs never show close button */\nmj-tab-container .lm_header .lm_tab.pinned .lm_close_tab {\n  display: none !important;\n}\n\n/* Hide close button on active tab by default */\nmj-tab-container .lm_active .lm_close_tab {\n  opacity: 0 !important;\n}\n\n/* Show close button when hovering active tab */\nmj-tab-container .lm_active:hover .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\n/* Adjust padding for close button */\nmj-tab-container .lm_header .lm_tab {\n  padding-right: 24px !important;\n}\n"], encapsulation: 2 });
+            i0.ɵɵconditional(ctx.RecordsStyleActive ? 4 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.contextMenuVisible ? 5 : -1);
+        } }, dependencies: [i2.RecordBarComponent, i3.RecordSwitcherSheetComponent], styles: [":host {\n  display: flex;\n  flex: 1;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.tab-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n}\n\n.gl-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background: var(--mj-bg-page);\n}\n\n/* Main region (nav pages) and the separate RECORDS region \u2014 exactly one is\n   visible at a time. CRITICAL: the hidden region keeps its FULL LAYOUT BOX\n   (visibility, not display:none). Golden Layout instances live in both;\n   display:none would feed GL 0-size resizes and let it initialize/restore\n   against a zero baseline \u2014 the root cause of clipped tab headers, stale\n   strips, and the collapsed-sliver layout. */\n.tab-container {\n  position: relative;\n}\n\n.main-region,\n.records-region {\n  position: absolute;\n  inset: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-page);\n}\n\n/* The records GL host fills the region below the origin bar. Must keep a\n   real layout box at all times (see the region comment above) \u2014 it's a flex\n   child of an always-sized absolute region, so it does. */\n.records-gl-container {\n  flex: 1;\n  min-height: 0;\n  position: relative;\n  background: var(--mj-bg-page);\n}\n\n/* Pane layout with an origin crumb as the FIRST element: the crumb keeps\n   its fixed 32px (component host); the content sibling flex-fills. The\n   height override neutralizes inline height:100% that cached wrapper\n   elements carry from earlier renders (CSS !important beats inline). */\nmj-tab-container .lm_items > div > mj-record-origin-crumb,\n.direct-content-container > mj-record-origin-crumb {\n  flex-shrink: 0;\n}\n\nmj-tab-container .lm_items > div > *:not(mj-record-origin-crumb),\n.direct-content-container > *:not(mj-record-origin-crumb) {\n  flex: 1 1 auto;\n  min-height: 0;\n  height: auto !important;\n}\n\n/* Defense against visibility punch-through: `visibility: visible` on a\n   DESCENDANT defeats an ancestor's visibility:hidden (unlike display:none).\n   Real case: explorer-app's global `.visible { visibility: visible\n   !important }` utility collides with components whose show-state class is\n   named `visible` (several bespoke detail panels did this), leaving their\n   overlays painted on top of the records region. The two-class specificity\n   here outranks the single-class utility even with both !important. */\n.region-hidden,\n.region-hidden * {\n  visibility: hidden !important;\n  pointer-events: none !important;\n  /* Region swaps must be INSTANT: `transition: all` rules on GL internals\n     (e.g. .lm_stack) would otherwise transition `visibility` \u2014 which\n     interpolates discretely, keeping the outgoing region painted on top for\n     the full transition duration (a ~200ms flash of the record form over\n     the destination page). */\n  transition: none !important;\n}\n\n/* Direct content container for single-resource mode */\n/* Renders components directly without Golden Layout overhead */\n.direct-content-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-page);\n  overflow: hidden;\n}\n\n.tab-content-container {\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  padding: 20px;\n}\n\n/* Context Menu */\n.context-menu {\n  position: fixed;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  min-width: 150px;\n  z-index: 10001;\n  overflow: hidden;\n}\n\n.context-menu .context-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n  /* Real <button role=\"menuitem\"> now \u2014 neutralize UA chrome */\n  width: 100%;\n  text-align: left;\n  background: transparent;\n  border: none;\n  font-family: inherit;\n}\n\n/* Keyboard roving highlights like hover; ring omitted on purpose \u2014 the\n   moving highlight IS the focus indicator inside a menu. */\n.context-menu .context-menu-item:focus-visible {\n  outline: none;\n  background: var(--mj-bg-surface-hover);\n}\n\n.context-menu .context-menu-item i {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n.context-menu .context-menu-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.context-menu .context-menu-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n/* Context menu item variants */\n.context-menu-item.new-item i { color: var(--mj-brand-primary); }\n.context-menu-item.new-item { font-weight: 500; }\n.context-menu-item.disabled { color: var(--mj-text-disabled); cursor: default; }\n.context-menu-item.disabled:hover { background: transparent; }\n.context-menu-item.disabled i { color: var(--mj-text-disabled); }\n.context-menu-item .check { margin-left: auto; color: var(--mj-status-success); font-size: 12px; }\n\n/* Override Golden Layout styles */\n/* Global overrides */\n\n/* Ensure GL root container fills available space */\nmj-tab-container .lm_goldenlayout {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n/* Ensure the root layout item fills space */\nmj-tab-container .lm_root {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n/* Ensure proper box-sizing for all GL layout elements */\nmj-tab-container .lm_item,\nmj-tab-container .lm_content,\nmj-tab-container .lm_stack,\nmj-tab-container .lm_row,\nmj-tab-container .lm_column {\n  box-sizing: border-box !important;\n}\n\n/* Ensure layout items don't overflow */\nmj-tab-container .lm_item {\n  overflow: hidden !important;\n}\n\n/* SPLIT panes get a subtle frame so side-by-side content doesn't bleed\n   together (single-pane layouts stay frameless). \"Adjacent to a splitter\"\n   is exactly and only the split case \u2014 any orientation, any nesting. */\nmj-tab-container .lm_stack:has(+ .lm_splitter),\nmj-tab-container .lm_splitter + .lm_stack {\n  border: 1px solid var(--mj-border-default) !important;\n}\n\n/* Fix for .lm_items - the content container inside stacks */\n/* This is separate from .lm_item - it holds the actual tab content */\nmj-tab-container .lm_items {\n  width: 100% !important;\n  height: calc(100% - 38px) !important; /* Account for header height (38px) */\n  box-sizing: border-box !important;\n  position: relative !important;\n}\n\n/* When tabs are maximized, no header visible */\nmj-tab-container .lm_stack.lm_maximised > .lm_items {\n  height: 100% !important;\n}\n\n/* Target the anonymous ComponentItem div inside lm_items (has no class) */\n/* Created in golden-layout/src/ts/items/component-item.ts:51 without a class */\n/* NOTE: Do NOT set display here - GL uses display:none to hide inactive tabs */\nmj-tab-container .lm_items > div {\n  width: 100% !important;\n  height: 100% !important;\n  box-sizing: border-box !important;\n  flex-direction: column !important;\n}\n\n/* Only apply flex display to the active/visible tab content div */\nmj-tab-container .lm_items > div:not([style*=\"display: none\"]) {\n  display: flex !important;\n}\n\n/* Clearfix for float-based row layout - GL uses float:left for horizontal panes */\nmj-tab-container .lm_row::after {\n  content: \"\" !important;\n  display: table !important;\n  clear: both !important;\n}\n\n/* Force content children to respect parent bounds (GL sets pixel widths inline) */\nmj-tab-container .lm_content > * {\n  max-width: 100% !important;\n  width: 100% !important;\n}\n\nmj-tab-container .lm_content {\n  background: var(--mj-bg-page) !important;\n  display: flex !important;\n  flex-direction: column !important;\n  height: 100% !important;\n  width: 100% !important;\n}\n\nmj-tab-container .lm_item_container {\n  background: var(--mj-bg-page) !important;\n}\n\n/* Tab content wrapper - allow scrolling */\n.tab-content-wrapper {\n  overflow: auto !important;\n}\n\n/* Make tabs larger and easier to click */\nmj-tab-container .lm_header {\n  height: 38px !important;\n  padding-top: 2px !important;\n  padding-left: 4px !important;\n  background: var(--mj-bg-surface-sunken) !important;\n  border-bottom: 1px solid var(--mj-border-default) !important;\n  overflow: visible !important;\n  box-sizing: border-box !important;\n}\n\n/* SCROLLING TAB STRIP (browser-tab pattern, Matt's call over GL's overflow\n   dropdown): tabs keep natural width and the strip scrolls horizontally.\n   Works with settingsConfig()'s effectively-infinite tabOverlapAllowance \u2014\n   GL then never re-homes tabs to its dropdown, only writes inline zIndex +\n   negative marginLeft, both neutralized here. Scrollbar hidden per the\n   browser-tab convention; wheel input is translated to horizontal scroll by\n   GoldenLayoutManager.onStripWheel, and activation scrolls the tab into view. */\nmj-tab-container .lm_tabs {\n  height: 36px !important;\n  left: 0;\n  right: 0;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n}\n\nmj-tab-container .lm_tabs::-webkit-scrollbar {\n  display: none;\n}\n\n/* Strip nudge arrows \u2014 the VISIBLE overflow affordance (created by\n   GoldenLayoutManager.updateStripNudges, one pair per header, [hidden]\n   unless that direction has more tabs). The gradient doubles as the\n   \"content continues\" edge fade. */\nmj-tab-container .mj-strip-nudge {\n  position: absolute;\n  top: 0;\n  height: 36px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  padding: 0;\n  margin: 0;\n  z-index: 3; /* above tabs (z 1/2) within the header context */\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\nmj-tab-container .mj-strip-nudge[hidden] {\n  display: none;\n}\n\nmj-tab-container .mj-strip-nudge--left {\n  left: 0;\n  background: linear-gradient(to right, var(--mj-bg-surface-sunken) 55%, transparent);\n  justify-content: flex-start;\n  padding-left: 6px;\n}\n\nmj-tab-container .mj-strip-nudge--right {\n  right: 0;\n  background: linear-gradient(to left, var(--mj-bg-surface-sunken) 55%, transparent);\n  justify-content: flex-end;\n  padding-right: 6px;\n}\n\nmj-tab-container .mj-strip-nudge:hover {\n  color: var(--mj-text-primary);\n}\n\nmj-tab-container .mj-strip-nudge:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: -2px;\n}\n\n/* Hide Golden Layout WINDOW controls (popout/maximise/stack-close). The\n   scrolling strip replaces GL's lm_tabdropdown overflow menu entirely (it\n   never activates with the infinite overlap allowance). */\nmj-tab-container .lm_controls .lm_popout,\nmj-tab-container .lm_controls .lm_maximise,\nmj-tab-container .lm_controls .lm_close {\n  display: none !important;\n}\n\nmj-tab-container .lm_header .lm_tab {\n  /* Flex centering: the type-icon slot (and any future adornment) must sit\n     on the tab's vertical center \u2014 inline baseline alignment inside the\n     35px line-height text line pushed it ~15px low. */\n  /* FULL FLEX FLOW (Matt's refactor): [type icon] [title] [pin] [close] are\n     ordinary flex siblings \u2014 no absolute anchoring, no padding reservations,\n     no vertical transforms. gap owns horizontal rhythm; align-items owns\n     vertical centering for every child. */\n  display: flex !important;\n  align-items: center !important;\n  gap: 5px !important;\n  padding: 0 9px !important;\n  font-size: 13px !important;\n  height: 35px !important;\n  /* Scrolling strip: tabs are flex items of .lm_tabs \u2014 never let them\n     shrink to \"fit\" (that's what the strip's scroll is for), and zero out\n     the negative overlap margins GL writes inline when tabs overflow. */\n  flex: 0 0 auto !important;\n  margin-left: 0 !important;\n  line-height: 35px !important;\n  box-sizing: border-box !important;\n  cursor: pointer !important;\n  user-select: none !important;\n  background: transparent !important;\n  border: none !important;\n  border-bottom: 1px solid var(--mj-border-default) !important;\n  transition: all 0.15s ease !important;\n  position: relative !important;\n  z-index: 1 !important;\n  margin-right: 1px !important;\n}\n\n/* Pipe separators between INACTIVE tabs (browser-tab pattern): a short\n   centered divider on each tab's right edge establishes separation without\n   boxing every tab. Suppressed around the ACTIVE tab (its raised card has\n   real edges), around the hovered tab, and after the last tab. */\nmj-tab-container .lm_header .lm_tab::after {\n  content: '' !important;\n  position: absolute !important;\n  right: -1px !important;\n  top: 50% !important;\n  transform: translateY(-50%) !important;\n  width: 1px !important;\n  height: 16px !important;\n  background: var(--mj-border-strong) !important;\n}\n\nmj-tab-container .lm_header .lm_tab.lm_active::after,\nmj-tab-container .lm_header .lm_tab:has(+ .lm_tab.lm_active)::after,\nmj-tab-container .lm_header .lm_tab:hover::after,\nmj-tab-container .lm_header .lm_tab:has(+ .lm_tab:hover)::after,\nmj-tab-container .lm_header .lm_tab:last-child::after {\n  content: none !important;\n}\n\n/* Type-icon slot (Matt's tab design, 2026-07-29): every tab leads with its\n   TYPE icon tinted in the app color \u2014 entity icon for records, nav-item/app\n   icon for pages. The old 3px app-color left-edge bar is GONE; the icon\n   tint carries app identity now. Hovering the TAB swaps the icon to an\n   ellipsis: the slot is the visible \"this tab has actions\" affordance \u2014\n   clicking it opens the tab-actions menu (same menu as right-click). */\nmj-tab-container .lm_header .lm_tab .mj-tab-type-slot {\n  display: inline-flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  /* 24px = WCAG 2.2 AA minimum pointer target (SC 2.5.8); glyph stays 12px */\n  width: 24px !important;\n  height: 24px !important;\n  border-radius: 5px !important;\n  flex-shrink: 0 !important;\n  cursor: pointer !important;\n  /* The slot is a real <button> now \u2014 neutralize UA button chrome */\n  background: transparent !important;\n  border: none !important;\n  padding: 0 !important;\n  font: inherit !important;\n  color: inherit !important;\n}\n\n/* Keyboard parity with hover: focused slot shows the dots + house focus\n   ring (outline idiom \u2014 GL headers clip box-shadows). */\nmj-tab-container .lm_header .lm_tab .mj-tab-type-slot:focus-visible {\n  outline: 2px solid var(--mj-border-focus) !important;\n  outline-offset: -2px !important;\n}\nmj-tab-container .lm_header .lm_tab .mj-tab-type-slot:focus-visible .mj-tab-type-ico {\n  display: none !important;\n}\nmj-tab-container .lm_header .lm_tab .mj-tab-type-slot:focus-visible .mj-tab-dots {\n  display: inline-block !important;\n}\n/* GL's base stylesheet styles EVERY `i` inside a tab as its legacy 2x19px\n   absolutely-positioned corner decoration (.lm_header .lm_tab i) \u2014 which\n   turns our icon elements into slivers the glyph overflows. Restore normal\n   flow for the slot's icons. */\nmj-tab-container .lm_header .lm_tab .mj-tab-type-slot i {\n  position: static !important;\n  width: auto !important;\n  height: auto !important;\n}\n\nmj-tab-container .lm_header .lm_tab .mj-tab-type-ico {\n  color: var(--app-color, var(--mj-text-muted)) !important;\n  font-size: 12px !important;\n  line-height: 1 !important;\n}\nmj-tab-container .lm_header .lm_tab .mj-tab-dots {\n  display: none !important;\n  color: var(--mj-text-secondary) !important;\n  font-size: 12px !important;\n  line-height: 1 !important;\n}\nmj-tab-container .lm_header .lm_tab:hover .mj-tab-type-ico {\n  display: none !important;\n}\nmj-tab-container .lm_header .lm_tab:hover .mj-tab-dots {\n  display: inline-block !important;\n}\nmj-tab-container .lm_header .lm_tab .mj-tab-type-slot:hover {\n  background: var(--mj-bg-surface-hover) !important;\n}\nmj-tab-container .lm_header .lm_tab .mj-tab-type-slot:hover .mj-tab-dots {\n  color: var(--mj-text-primary) !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover {\n  background: var(--mj-bg-surface-hover) !important;\n}\n\n\nmj-tab-container .lm_header .lm_tab.lm_active {\n  background: var(--mj-bg-surface) !important;\n  height: 36px !important;\n  margin-bottom: -1px !important;\n  margin-right: 0 !important;\n  border: 1px solid var(--mj-border-default) !important;\n  border-bottom-color: var(--mj-bg-surface) !important;\n  border-radius: 4px 4px 0 0 !important;\n  z-index: 2 !important;\n}\n\n\nmj-tab-container .lm_title {\n  cursor: pointer !important;\n  user-select: none !important;\n  /* In-flow flex child: normalize the inherited 35px line-height so the\n     text box is glyph-height and centers identically to its siblings;\n     truncate instead of colliding when GL constrains tab width. */\n  line-height: normal !important;\n  flex: 0 1 auto !important;\n  min-width: 0 !important;\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n  white-space: nowrap !important;\n  /* Glyph-overhang room: italics (unpinned tabs) paint past the last\n     glyph's advance width, and overflow:hidden clips at the padding edge \u2014\n     without this the final letter loses its slant. */\n  padding-right: 3px !important;\n}\n\nmj-tab-container .lm_close_tab {\n  position: static !important;\n  order: 10 !important;\n  transform: none !important;\n  margin: 0 !important;\n  /* 24px WCAG target; glyph stays 10px */\n  width: 24px !important;\n  height: 24px !important;\n  border-radius: 5px !important;\n  cursor: pointer !important;\n  /* ALWAYS visible (Matt's call): quiet at rest, full on its own hover/focus.\n     Discoverability shouldn't depend on hovering. */\n  opacity: 0.55 !important;\n  transition: opacity 0.15s ease !important;\n  flex-shrink: 0 !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  font-size: 10px !important;\n  color: var(--mj-text-secondary) !important;\n}\n\nmj-tab-container .lm_close_tab:focus-visible {\n  outline: 2px solid var(--mj-border-focus) !important;\n  outline-offset: -2px !important;\n  opacity: 1 !important;\n}\n\nmj-tab-container .lm_close_tab:hover {\n  opacity: 1 !important;\n  color: var(--mj-status-error) !important;\n  /* background-COLOR, never the shorthand: GL's stock close was a\n     background-image PNG and the shorthand silently wiped it (now it's an\n     FA ::before glyph, but the discipline stands). */\n  background-color: var(--mj-bg-surface-hover) !important;\n}\n\n/* Pinned tabs never show close button (the pin control replaces it) */\nmj-tab-container .lm_header .lm_tab.pinned .lm_close_tab {\n  display: none !important;\n}\n\n\n"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabContainerComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-tab-container', encapsulation: ViewEncapsulation.None, template: "<div class=\"tab-container\">\n\n  <!-- Single-Resource Mode: Direct component rendering without Golden Layout -->\n  <!-- This avoids the 20px height issue when GL header is hidden -->\n  @if (useSingleResourceMode) {\n    <div #directContentContainer class=\"direct-content-container\"></div>\n  } @else {\n    <!-- Multi-Tab Mode: Golden Layout Container -->\n    <div #glContainer class=\"gl-container\"></div>\n  }\n\n  <!-- Context Menu (only relevant in multi-tab mode) -->\n  @if (contextMenuVisible) {\n    <div\n      class=\"context-menu\"\n      [style.left.px]=\"contextMenuX\"\n      [style.top.px]=\"contextMenuY\">\n      <div class=\"context-menu-item\" (click)=\"onContextPin()\">\n        <i class=\"fa-solid fa-thumbtack\"></i>\n        <span>{{ isContextTabPinned ? 'Unpin Tab' : 'Pin Tab' }}</span>\n      </div>\n      <div class=\"context-menu-divider\"></div>\n      <div class=\"context-menu-item\" [class.new-item]=\"!isContextTabPinnedToHome\" [class.disabled]=\"isContextTabPinnedToHome\" (click)=\"onContextPinToHome()\">\n        <i class=\"fa-solid fa-house-chimney\"></i>\n        @if (isContextTabPinnedToHome) {\n          <span>Pinned to Home</span>\n          <span class=\"check\"><i class=\"fa-solid fa-check\"></i></span>\n        } @else {\n          <span>Pin to Home</span>\n        }\n      </div>\n      <div class=\"context-menu-divider\"></div>\n      <div class=\"context-menu-item\" (click)=\"onContextClose()\">\n        <i class=\"fa-solid fa-xmark\"></i>\n        <span>Close Tab</span>\n      </div>\n      <div class=\"context-menu-item\" (click)=\"onContextCloseOthers()\">\n        <i class=\"fa-solid fa-layer-group\"></i>\n        <span>Close Others</span>\n      </div>\n      <div class=\"context-menu-item\" (click)=\"onContextCloseToRight()\">\n        <i class=\"fa-solid fa-angles-right\"></i>\n        <span>Close to Right</span>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host {\n  display: flex;\n  flex: 1;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.tab-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n}\n\n.gl-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background: var(--mj-bg-page);\n}\n\n/* Direct content container for single-resource mode */\n/* Renders components directly without Golden Layout overhead */\n.direct-content-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-page);\n  overflow: hidden;\n}\n\n.tab-content-container {\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  padding: 20px;\n}\n\n/* Context Menu */\n.context-menu {\n  position: fixed;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  min-width: 150px;\n  z-index: 10001;\n  overflow: hidden;\n}\n\n.context-menu .context-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n}\n\n.context-menu .context-menu-item i {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n.context-menu .context-menu-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.context-menu .context-menu-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n/* Context menu item variants */\n.context-menu-item.new-item i { color: var(--mj-brand-primary); }\n.context-menu-item.new-item { font-weight: 500; }\n.context-menu-item.disabled { color: var(--mj-text-disabled); cursor: default; }\n.context-menu-item.disabled:hover { background: transparent; }\n.context-menu-item.disabled i { color: var(--mj-text-disabled); }\n.context-menu-item .check { margin-left: auto; color: var(--mj-status-success); font-size: 12px; }\n\n/* Override Golden Layout styles */\n/* Global overrides */\n\n/* Ensure GL root container fills available space */\nmj-tab-container .lm_goldenlayout {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n/* Ensure the root layout item fills space */\nmj-tab-container .lm_root {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n/* Ensure proper box-sizing for all GL layout elements */\nmj-tab-container .lm_item,\nmj-tab-container .lm_content,\nmj-tab-container .lm_stack,\nmj-tab-container .lm_row,\nmj-tab-container .lm_column {\n  box-sizing: border-box !important;\n}\n\n/* Ensure layout items don't overflow */\nmj-tab-container .lm_item {\n  overflow: hidden !important;\n}\n\n/* Fix for .lm_items - the content container inside stacks */\n/* This is separate from .lm_item - it holds the actual tab content */\nmj-tab-container .lm_items {\n  width: 100% !important;\n  height: calc(100% - 38px) !important; /* Account for header height (38px) */\n  box-sizing: border-box !important;\n  position: relative !important;\n}\n\n/* When tabs are maximized, no header visible */\nmj-tab-container .lm_stack.lm_maximised > .lm_items {\n  height: 100% !important;\n}\n\n/* Target the anonymous ComponentItem div inside lm_items (has no class) */\n/* Created in golden-layout/src/ts/items/component-item.ts:51 without a class */\n/* NOTE: Do NOT set display here - GL uses display:none to hide inactive tabs */\nmj-tab-container .lm_items > div {\n  width: 100% !important;\n  height: 100% !important;\n  box-sizing: border-box !important;\n  flex-direction: column !important;\n}\n\n/* Only apply flex display to the active/visible tab content div */\nmj-tab-container .lm_items > div:not([style*=\"display: none\"]) {\n  display: flex !important;\n}\n\n/* Clearfix for float-based row layout - GL uses float:left for horizontal panes */\nmj-tab-container .lm_row::after {\n  content: \"\" !important;\n  display: table !important;\n  clear: both !important;\n}\n\n/* Force content children to respect parent bounds (GL sets pixel widths inline) */\nmj-tab-container .lm_content > * {\n  max-width: 100% !important;\n  width: 100% !important;\n}\n\nmj-tab-container .lm_content {\n  background: var(--mj-bg-page) !important;\n  display: flex !important;\n  flex-direction: column !important;\n  height: 100% !important;\n  width: 100% !important;\n}\n\nmj-tab-container .lm_item_container {\n  background: var(--mj-bg-page) !important;\n}\n\n/* Tab content wrapper - allow scrolling */\n.tab-content-wrapper {\n  overflow: auto !important;\n}\n\n/* Make tabs larger and easier to click */\nmj-tab-container .lm_header {\n  height: 38px !important;\n  padding-top: 2px !important;\n  padding-left: 4px !important;\n  background: var(--mj-bg-surface-sunken) !important;\n  border-bottom: 1px solid var(--mj-border-default) !important;\n  overflow: visible !important;\n  box-sizing: border-box !important;\n}\n\nmj-tab-container .lm_tabs {\n  height: 36px !important;\n}\n\n/* Hide Golden Layout window controls */\nmj-tab-container .lm_controls {\n  display: none !important;\n}\n\nmj-tab-container .lm_header .lm_tab {\n  padding: 0 16px !important;\n  font-size: 13px !important;\n  height: 35px !important;\n  line-height: 35px !important;\n  box-sizing: border-box !important;\n  cursor: pointer !important;\n  user-select: none !important;\n  background: transparent !important;\n  border: none !important;\n  border-bottom: 1px solid var(--mj-border-default) !important;\n  transition: all 0.15s ease !important;\n  position: relative !important;\n  z-index: 1 !important;\n  margin-right: 1px !important;\n}\n\n/* App color accent - left edge indicator */\nmj-tab-container .lm_header .lm_tab::before {\n  content: '' !important;\n  position: absolute !important;\n  left: 0 !important;\n  top: 4px !important;\n  bottom: 4px !important;\n  width: 3px !important;\n  border-radius: 0 2px 2px 0 !important;\n  background-color: var(--app-color, transparent) !important;\n  opacity: 0.6 !important;\n  transition: all 0.15s ease !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover {\n  background: var(--mj-bg-surface-hover) !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover::before {\n  opacity: 0.8 !important;\n}\n\nmj-tab-container .lm_header .lm_tab.lm_active {\n  background: var(--mj-bg-surface) !important;\n  height: 36px !important;\n  margin-bottom: -1px !important;\n  margin-right: 0 !important;\n  border: 1px solid var(--mj-border-default) !important;\n  border-bottom-color: var(--mj-bg-surface) !important;\n  border-radius: 4px 4px 0 0 !important;\n  z-index: 2 !important;\n}\n\n/* Enhanced app color accent for active tab */\nmj-tab-container .lm_header .lm_tab.lm_active::before {\n  opacity: 1 !important;\n  width: 3px !important;\n  top: 2px !important;\n  bottom: 2px !important;\n  box-shadow: 0 0 6px var(--app-color, transparent) !important;\n}\n\nmj-tab-container .lm_title {\n  cursor: pointer !important;\n  user-select: none !important;\n}\n\nmj-tab-container .lm_close_tab {\n  position: absolute !important;\n  right: 4px !important;\n  top: 50% !important;\n  transform: translateY(-50%) !important;\n  width: 16px !important;\n  height: 16px !important;\n  cursor: pointer !important;\n  opacity: 0 !important;\n  transition: all 0.15s ease !important;\n  flex-shrink: 0 !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  font-size: 10px !important;\n  color: var(--mj-text-secondary) !important;\n}\n\nmj-tab-container .lm_close_tab:hover {\n  opacity: 1 !important;\n  color: var(--mj-status-error) !important;\n}\n\n/* Show close button on hover (except pinned) */\nmj-tab-container .lm_header .lm_tab:hover:not(.pinned) .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\n/* Pinned tabs never show close button */\nmj-tab-container .lm_header .lm_tab.pinned .lm_close_tab {\n  display: none !important;\n}\n\n/* Hide close button on active tab by default */\nmj-tab-container .lm_active .lm_close_tab {\n  opacity: 0 !important;\n}\n\n/* Show close button when hovering active tab */\nmj-tab-container .lm_active:hover .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\n/* Adjust padding for close button */\nmj-tab-container .lm_header .lm_tab {\n  padding-right: 24px !important;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-tab-container', encapsulation: ViewEncapsulation.None, template: "<div class=\"tab-container\">\n\n  <!-- Main region: nav pages (single-resource or main Golden Layout).\n       Hidden (not destroyed) while the RECORDS region is showing, so nav\n       content keeps its state and reappears instantly. -->\n  <div class=\"main-region\" [class.region-hidden]=\"ShowRecordsRegion\">\n    <!-- Single-Resource Mode: Direct component rendering without Golden Layout -->\n    <!-- This avoids the 20px height issue when GL header is hidden -->\n    @if (useSingleResourceMode) {\n      <div #directContentContainer class=\"direct-content-container\"></div>\n    } @else {\n      <!-- Multi-Tab Mode: Golden Layout Container -->\n      <div #glContainer class=\"gl-container\"></div>\n    }\n  </div>\n\n  <!-- RECORDS region: a SEPARATE Golden Layout hosting only record tabs\n       (records-style record opens). Always in the DOM once created so the\n       layout survives visibility flips; shown only while the active tab is\n       a record. Native GL tab bar = record tabs, drag-to-split included. -->\n  @if (RecordsStyleActive) {\n    <!-- Origin crumbs are PANE-LEVEL now (first element inside each record\n         pane \u2014 see RecordOriginCrumbComponent); the region needs no bar. -->\n    <div class=\"records-region\" [class.region-hidden]=\"!ShowRecordsRegion\">\n      <!-- MOBILE: the GL tab strip is unusable at phone widths (one tab\n           fits, no overflow UI) \u2014 the record bar replaces it and opens the\n           record switcher sheet. The GL itself runs headerless (HideHeaders). -->\n      @if (IsMobileRecords) {\n        <mj-record-bar\n          [Title]=\"RecordBarTitle\"\n          [Icon]=\"RecordBarIcon\"\n          [Color]=\"RecordBarColor\"\n          [Count]=\"OpenRecordCount\"\n          (SwitcherRequested)=\"OpenRecordSwitcher()\">\n        </mj-record-bar>\n      }\n      <div #recordsGlContainer class=\"records-gl-container\"></div>\n    </div>\n\n    <!-- MOBILE record switcher: bottom sheet listing ALL open records\n         (region + docked). Fixed-position \u2014 DOM location here is\n         visual-neutral; living in tab-container keeps close routing on the\n         same path as the tab context menu. -->\n    <mj-record-switcher-sheet\n      [Entries]=\"SwitcherEntries\"\n      [Visible]=\"RecordSwitcherVisible\"\n      (VisibleChange)=\"OnSwitcherVisibleChange($event)\"\n      (ActivateRequested)=\"OnSwitcherActivate($event)\"\n      (CloseRequested)=\"OnSwitcherClose($event)\">\n    </mj-record-switcher-sheet>\n  }\n\n  <!-- Context Menu (only relevant in multi-tab mode). Real buttons with\n       menu semantics: arrow keys rove, Escape closes with focus return to\n       the invoking control (see onMenuKeydown / hideContextMenu). -->\n  @if (contextMenuVisible) {\n    <div\n      class=\"context-menu\"\n      role=\"menu\"\n      aria-label=\"Tab actions\"\n      (keydown)=\"onMenuKeydown($event)\"\n      [style.left.px]=\"contextMenuX\"\n      [style.top.px]=\"contextMenuY\">\n      <button type=\"button\" role=\"menuitem\" class=\"context-menu-item\" (click)=\"onContextPin()\">\n        <i class=\"fa-solid fa-thumbtack\" aria-hidden=\"true\"></i>\n        <span>{{ isContextTabPinned ? 'Unpin Tab' : 'Pin Tab' }}</span>\n      </button>\n      <div class=\"context-menu-divider\"></div>\n      <button type=\"button\" role=\"menuitem\" class=\"context-menu-item\" [class.new-item]=\"!isContextTabPinnedToHome\" [class.disabled]=\"isContextTabPinnedToHome\" [disabled]=\"isContextTabPinnedToHome\" (click)=\"onContextPinToHome()\">\n        <i class=\"fa-solid fa-house-chimney\" aria-hidden=\"true\"></i>\n        @if (isContextTabPinnedToHome) {\n          <span>Pinned to Home</span>\n          <span class=\"check\"><i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i></span>\n        } @else {\n          <span>Pin to Home</span>\n        }\n      </button>\n      @if (canContextMoveToWorkspace || canContextMoveToRecords) {\n        <div class=\"context-menu-divider\"></div>\n        @if (canContextMoveToWorkspace) {\n          <button type=\"button\" role=\"menuitem\" class=\"context-menu-item\" (click)=\"onContextMoveToWorkspace()\">\n            <i class=\"fa-solid fa-arrow-up-right-from-square\" aria-hidden=\"true\"></i>\n            <span>Move to Workspace</span>\n          </button>\n        }\n        @if (canContextMoveToRecords) {\n          <button type=\"button\" role=\"menuitem\" class=\"context-menu-item\" (click)=\"onContextMoveToRecords()\">\n            <i class=\"fa-solid fa-file-lines\" aria-hidden=\"true\"></i>\n            <span>Move to Records</span>\n          </button>\n        }\n      }\n      <div class=\"context-menu-divider\"></div>\n      <button type=\"button\" role=\"menuitem\" class=\"context-menu-item\" (click)=\"onContextClose()\">\n        <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n        <span>Close Tab</span>\n      </button>\n      <button type=\"button\" role=\"menuitem\" class=\"context-menu-item\" (click)=\"onContextCloseOthers()\">\n        <i class=\"fa-solid fa-layer-group\" aria-hidden=\"true\"></i>\n        <span>Close Others</span>\n      </button>\n      <button type=\"button\" role=\"menuitem\" class=\"context-menu-item\" (click)=\"onContextCloseToRight()\">\n        <i class=\"fa-solid fa-angles-right\" aria-hidden=\"true\"></i>\n        <span>Close to Right</span>\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host {\n  display: flex;\n  flex: 1;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.tab-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n}\n\n.gl-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background: var(--mj-bg-page);\n}\n\n/* Main region (nav pages) and the separate RECORDS region \u2014 exactly one is\n   visible at a time. CRITICAL: the hidden region keeps its FULL LAYOUT BOX\n   (visibility, not display:none). Golden Layout instances live in both;\n   display:none would feed GL 0-size resizes and let it initialize/restore\n   against a zero baseline \u2014 the root cause of clipped tab headers, stale\n   strips, and the collapsed-sliver layout. */\n.tab-container {\n  position: relative;\n}\n\n.main-region,\n.records-region {\n  position: absolute;\n  inset: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-page);\n}\n\n/* The records GL host fills the region below the origin bar. Must keep a\n   real layout box at all times (see the region comment above) \u2014 it's a flex\n   child of an always-sized absolute region, so it does. */\n.records-gl-container {\n  flex: 1;\n  min-height: 0;\n  position: relative;\n  background: var(--mj-bg-page);\n}\n\n/* Pane layout with an origin crumb as the FIRST element: the crumb keeps\n   its fixed 32px (component host); the content sibling flex-fills. The\n   height override neutralizes inline height:100% that cached wrapper\n   elements carry from earlier renders (CSS !important beats inline). */\nmj-tab-container .lm_items > div > mj-record-origin-crumb,\n.direct-content-container > mj-record-origin-crumb {\n  flex-shrink: 0;\n}\n\nmj-tab-container .lm_items > div > *:not(mj-record-origin-crumb),\n.direct-content-container > *:not(mj-record-origin-crumb) {\n  flex: 1 1 auto;\n  min-height: 0;\n  height: auto !important;\n}\n\n/* Defense against visibility punch-through: `visibility: visible` on a\n   DESCENDANT defeats an ancestor's visibility:hidden (unlike display:none).\n   Real case: explorer-app's global `.visible { visibility: visible\n   !important }` utility collides with components whose show-state class is\n   named `visible` (several bespoke detail panels did this), leaving their\n   overlays painted on top of the records region. The two-class specificity\n   here outranks the single-class utility even with both !important. */\n.region-hidden,\n.region-hidden * {\n  visibility: hidden !important;\n  pointer-events: none !important;\n  /* Region swaps must be INSTANT: `transition: all` rules on GL internals\n     (e.g. .lm_stack) would otherwise transition `visibility` \u2014 which\n     interpolates discretely, keeping the outgoing region painted on top for\n     the full transition duration (a ~200ms flash of the record form over\n     the destination page). */\n  transition: none !important;\n}\n\n/* Direct content container for single-resource mode */\n/* Renders components directly without Golden Layout overhead */\n.direct-content-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-page);\n  overflow: hidden;\n}\n\n.tab-content-container {\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  padding: 20px;\n}\n\n/* Context Menu */\n.context-menu {\n  position: fixed;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  min-width: 150px;\n  z-index: 10001;\n  overflow: hidden;\n}\n\n.context-menu .context-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n  /* Real <button role=\"menuitem\"> now \u2014 neutralize UA chrome */\n  width: 100%;\n  text-align: left;\n  background: transparent;\n  border: none;\n  font-family: inherit;\n}\n\n/* Keyboard roving highlights like hover; ring omitted on purpose \u2014 the\n   moving highlight IS the focus indicator inside a menu. */\n.context-menu .context-menu-item:focus-visible {\n  outline: none;\n  background: var(--mj-bg-surface-hover);\n}\n\n.context-menu .context-menu-item i {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n.context-menu .context-menu-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.context-menu .context-menu-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n/* Context menu item variants */\n.context-menu-item.new-item i { color: var(--mj-brand-primary); }\n.context-menu-item.new-item { font-weight: 500; }\n.context-menu-item.disabled { color: var(--mj-text-disabled); cursor: default; }\n.context-menu-item.disabled:hover { background: transparent; }\n.context-menu-item.disabled i { color: var(--mj-text-disabled); }\n.context-menu-item .check { margin-left: auto; color: var(--mj-status-success); font-size: 12px; }\n\n/* Override Golden Layout styles */\n/* Global overrides */\n\n/* Ensure GL root container fills available space */\nmj-tab-container .lm_goldenlayout {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n/* Ensure the root layout item fills space */\nmj-tab-container .lm_root {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n/* Ensure proper box-sizing for all GL layout elements */\nmj-tab-container .lm_item,\nmj-tab-container .lm_content,\nmj-tab-container .lm_stack,\nmj-tab-container .lm_row,\nmj-tab-container .lm_column {\n  box-sizing: border-box !important;\n}\n\n/* Ensure layout items don't overflow */\nmj-tab-container .lm_item {\n  overflow: hidden !important;\n}\n\n/* SPLIT panes get a subtle frame so side-by-side content doesn't bleed\n   together (single-pane layouts stay frameless). \"Adjacent to a splitter\"\n   is exactly and only the split case \u2014 any orientation, any nesting. */\nmj-tab-container .lm_stack:has(+ .lm_splitter),\nmj-tab-container .lm_splitter + .lm_stack {\n  border: 1px solid var(--mj-border-default) !important;\n}\n\n/* Fix for .lm_items - the content container inside stacks */\n/* This is separate from .lm_item - it holds the actual tab content */\nmj-tab-container .lm_items {\n  width: 100% !important;\n  height: calc(100% - 38px) !important; /* Account for header height (38px) */\n  box-sizing: border-box !important;\n  position: relative !important;\n}\n\n/* When tabs are maximized, no header visible */\nmj-tab-container .lm_stack.lm_maximised > .lm_items {\n  height: 100% !important;\n}\n\n/* Target the anonymous ComponentItem div inside lm_items (has no class) */\n/* Created in golden-layout/src/ts/items/component-item.ts:51 without a class */\n/* NOTE: Do NOT set display here - GL uses display:none to hide inactive tabs */\nmj-tab-container .lm_items > div {\n  width: 100% !important;\n  height: 100% !important;\n  box-sizing: border-box !important;\n  flex-direction: column !important;\n}\n\n/* Only apply flex display to the active/visible tab content div */\nmj-tab-container .lm_items > div:not([style*=\"display: none\"]) {\n  display: flex !important;\n}\n\n/* Clearfix for float-based row layout - GL uses float:left for horizontal panes */\nmj-tab-container .lm_row::after {\n  content: \"\" !important;\n  display: table !important;\n  clear: both !important;\n}\n\n/* Force content children to respect parent bounds (GL sets pixel widths inline) */\nmj-tab-container .lm_content > * {\n  max-width: 100% !important;\n  width: 100% !important;\n}\n\nmj-tab-container .lm_content {\n  background: var(--mj-bg-page) !important;\n  display: flex !important;\n  flex-direction: column !important;\n  height: 100% !important;\n  width: 100% !important;\n}\n\nmj-tab-container .lm_item_container {\n  background: var(--mj-bg-page) !important;\n}\n\n/* Tab content wrapper - allow scrolling */\n.tab-content-wrapper {\n  overflow: auto !important;\n}\n\n/* Make tabs larger and easier to click */\nmj-tab-container .lm_header {\n  height: 38px !important;\n  padding-top: 2px !important;\n  padding-left: 4px !important;\n  background: var(--mj-bg-surface-sunken) !important;\n  border-bottom: 1px solid var(--mj-border-default) !important;\n  overflow: visible !important;\n  box-sizing: border-box !important;\n}\n\n/* SCROLLING TAB STRIP (browser-tab pattern, Matt's call over GL's overflow\n   dropdown): tabs keep natural width and the strip scrolls horizontally.\n   Works with settingsConfig()'s effectively-infinite tabOverlapAllowance \u2014\n   GL then never re-homes tabs to its dropdown, only writes inline zIndex +\n   negative marginLeft, both neutralized here. Scrollbar hidden per the\n   browser-tab convention; wheel input is translated to horizontal scroll by\n   GoldenLayoutManager.onStripWheel, and activation scrolls the tab into view. */\nmj-tab-container .lm_tabs {\n  height: 36px !important;\n  left: 0;\n  right: 0;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n}\n\nmj-tab-container .lm_tabs::-webkit-scrollbar {\n  display: none;\n}\n\n/* Strip nudge arrows \u2014 the VISIBLE overflow affordance (created by\n   GoldenLayoutManager.updateStripNudges, one pair per header, [hidden]\n   unless that direction has more tabs). The gradient doubles as the\n   \"content continues\" edge fade. */\nmj-tab-container .mj-strip-nudge {\n  position: absolute;\n  top: 0;\n  height: 36px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  padding: 0;\n  margin: 0;\n  z-index: 3; /* above tabs (z 1/2) within the header context */\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\nmj-tab-container .mj-strip-nudge[hidden] {\n  display: none;\n}\n\nmj-tab-container .mj-strip-nudge--left {\n  left: 0;\n  background: linear-gradient(to right, var(--mj-bg-surface-sunken) 55%, transparent);\n  justify-content: flex-start;\n  padding-left: 6px;\n}\n\nmj-tab-container .mj-strip-nudge--right {\n  right: 0;\n  background: linear-gradient(to left, var(--mj-bg-surface-sunken) 55%, transparent);\n  justify-content: flex-end;\n  padding-right: 6px;\n}\n\nmj-tab-container .mj-strip-nudge:hover {\n  color: var(--mj-text-primary);\n}\n\nmj-tab-container .mj-strip-nudge:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: -2px;\n}\n\n/* Hide Golden Layout WINDOW controls (popout/maximise/stack-close). The\n   scrolling strip replaces GL's lm_tabdropdown overflow menu entirely (it\n   never activates with the infinite overlap allowance). */\nmj-tab-container .lm_controls .lm_popout,\nmj-tab-container .lm_controls .lm_maximise,\nmj-tab-container .lm_controls .lm_close {\n  display: none !important;\n}\n\nmj-tab-container .lm_header .lm_tab {\n  /* Flex centering: the type-icon slot (and any future adornment) must sit\n     on the tab's vertical center \u2014 inline baseline alignment inside the\n     35px line-height text line pushed it ~15px low. */\n  /* FULL FLEX FLOW (Matt's refactor): [type icon] [title] [pin] [close] are\n     ordinary flex siblings \u2014 no absolute anchoring, no padding reservations,\n     no vertical transforms. gap owns horizontal rhythm; align-items owns\n     vertical centering for every child. */\n  display: flex !important;\n  align-items: center !important;\n  gap: 5px !important;\n  padding: 0 9px !important;\n  font-size: 13px !important;\n  height: 35px !important;\n  /* Scrolling strip: tabs are flex items of .lm_tabs \u2014 never let them\n     shrink to \"fit\" (that's what the strip's scroll is for), and zero out\n     the negative overlap margins GL writes inline when tabs overflow. */\n  flex: 0 0 auto !important;\n  margin-left: 0 !important;\n  line-height: 35px !important;\n  box-sizing: border-box !important;\n  cursor: pointer !important;\n  user-select: none !important;\n  background: transparent !important;\n  border: none !important;\n  border-bottom: 1px solid var(--mj-border-default) !important;\n  transition: all 0.15s ease !important;\n  position: relative !important;\n  z-index: 1 !important;\n  margin-right: 1px !important;\n}\n\n/* Pipe separators between INACTIVE tabs (browser-tab pattern): a short\n   centered divider on each tab's right edge establishes separation without\n   boxing every tab. Suppressed around the ACTIVE tab (its raised card has\n   real edges), around the hovered tab, and after the last tab. */\nmj-tab-container .lm_header .lm_tab::after {\n  content: '' !important;\n  position: absolute !important;\n  right: -1px !important;\n  top: 50% !important;\n  transform: translateY(-50%) !important;\n  width: 1px !important;\n  height: 16px !important;\n  background: var(--mj-border-strong) !important;\n}\n\nmj-tab-container .lm_header .lm_tab.lm_active::after,\nmj-tab-container .lm_header .lm_tab:has(+ .lm_tab.lm_active)::after,\nmj-tab-container .lm_header .lm_tab:hover::after,\nmj-tab-container .lm_header .lm_tab:has(+ .lm_tab:hover)::after,\nmj-tab-container .lm_header .lm_tab:last-child::after {\n  content: none !important;\n}\n\n/* Type-icon slot (Matt's tab design, 2026-07-29): every tab leads with its\n   TYPE icon tinted in the app color \u2014 entity icon for records, nav-item/app\n   icon for pages. The old 3px app-color left-edge bar is GONE; the icon\n   tint carries app identity now. Hovering the TAB swaps the icon to an\n   ellipsis: the slot is the visible \"this tab has actions\" affordance \u2014\n   clicking it opens the tab-actions menu (same menu as right-click). */\nmj-tab-container .lm_header .lm_tab .mj-tab-type-slot {\n  display: inline-flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  /* 24px = WCAG 2.2 AA minimum pointer target (SC 2.5.8); glyph stays 12px */\n  width: 24px !important;\n  height: 24px !important;\n  border-radius: 5px !important;\n  flex-shrink: 0 !important;\n  cursor: pointer !important;\n  /* The slot is a real <button> now \u2014 neutralize UA button chrome */\n  background: transparent !important;\n  border: none !important;\n  padding: 0 !important;\n  font: inherit !important;\n  color: inherit !important;\n}\n\n/* Keyboard parity with hover: focused slot shows the dots + house focus\n   ring (outline idiom \u2014 GL headers clip box-shadows). */\nmj-tab-container .lm_header .lm_tab .mj-tab-type-slot:focus-visible {\n  outline: 2px solid var(--mj-border-focus) !important;\n  outline-offset: -2px !important;\n}\nmj-tab-container .lm_header .lm_tab .mj-tab-type-slot:focus-visible .mj-tab-type-ico {\n  display: none !important;\n}\nmj-tab-container .lm_header .lm_tab .mj-tab-type-slot:focus-visible .mj-tab-dots {\n  display: inline-block !important;\n}\n/* GL's base stylesheet styles EVERY `i` inside a tab as its legacy 2x19px\n   absolutely-positioned corner decoration (.lm_header .lm_tab i) \u2014 which\n   turns our icon elements into slivers the glyph overflows. Restore normal\n   flow for the slot's icons. */\nmj-tab-container .lm_header .lm_tab .mj-tab-type-slot i {\n  position: static !important;\n  width: auto !important;\n  height: auto !important;\n}\n\nmj-tab-container .lm_header .lm_tab .mj-tab-type-ico {\n  color: var(--app-color, var(--mj-text-muted)) !important;\n  font-size: 12px !important;\n  line-height: 1 !important;\n}\nmj-tab-container .lm_header .lm_tab .mj-tab-dots {\n  display: none !important;\n  color: var(--mj-text-secondary) !important;\n  font-size: 12px !important;\n  line-height: 1 !important;\n}\nmj-tab-container .lm_header .lm_tab:hover .mj-tab-type-ico {\n  display: none !important;\n}\nmj-tab-container .lm_header .lm_tab:hover .mj-tab-dots {\n  display: inline-block !important;\n}\nmj-tab-container .lm_header .lm_tab .mj-tab-type-slot:hover {\n  background: var(--mj-bg-surface-hover) !important;\n}\nmj-tab-container .lm_header .lm_tab .mj-tab-type-slot:hover .mj-tab-dots {\n  color: var(--mj-text-primary) !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover {\n  background: var(--mj-bg-surface-hover) !important;\n}\n\n\nmj-tab-container .lm_header .lm_tab.lm_active {\n  background: var(--mj-bg-surface) !important;\n  height: 36px !important;\n  margin-bottom: -1px !important;\n  margin-right: 0 !important;\n  border: 1px solid var(--mj-border-default) !important;\n  border-bottom-color: var(--mj-bg-surface) !important;\n  border-radius: 4px 4px 0 0 !important;\n  z-index: 2 !important;\n}\n\n\nmj-tab-container .lm_title {\n  cursor: pointer !important;\n  user-select: none !important;\n  /* In-flow flex child: normalize the inherited 35px line-height so the\n     text box is glyph-height and centers identically to its siblings;\n     truncate instead of colliding when GL constrains tab width. */\n  line-height: normal !important;\n  flex: 0 1 auto !important;\n  min-width: 0 !important;\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n  white-space: nowrap !important;\n  /* Glyph-overhang room: italics (unpinned tabs) paint past the last\n     glyph's advance width, and overflow:hidden clips at the padding edge \u2014\n     without this the final letter loses its slant. */\n  padding-right: 3px !important;\n}\n\nmj-tab-container .lm_close_tab {\n  position: static !important;\n  order: 10 !important;\n  transform: none !important;\n  margin: 0 !important;\n  /* 24px WCAG target; glyph stays 10px */\n  width: 24px !important;\n  height: 24px !important;\n  border-radius: 5px !important;\n  cursor: pointer !important;\n  /* ALWAYS visible (Matt's call): quiet at rest, full on its own hover/focus.\n     Discoverability shouldn't depend on hovering. */\n  opacity: 0.55 !important;\n  transition: opacity 0.15s ease !important;\n  flex-shrink: 0 !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  font-size: 10px !important;\n  color: var(--mj-text-secondary) !important;\n}\n\nmj-tab-container .lm_close_tab:focus-visible {\n  outline: 2px solid var(--mj-border-focus) !important;\n  outline-offset: -2px !important;\n  opacity: 1 !important;\n}\n\nmj-tab-container .lm_close_tab:hover {\n  opacity: 1 !important;\n  color: var(--mj-status-error) !important;\n  /* background-COLOR, never the shorthand: GL's stock close was a\n     background-image PNG and the shorthand silently wiped it (now it's an\n     FA ::before glyph, but the discipline stands). */\n  background-color: var(--mj-bg-surface-hover) !important;\n}\n\n/* Pinned tabs never show close button (the pin control replaces it) */\nmj-tab-container .lm_header .lm_tab.pinned .lm_close_tab {\n  display: none !important;\n}\n\n\n"] }]
     }], () => [{ type: i1.GoldenLayoutManager }, { type: i1.WorkspaceStateManager }, { type: i1.ApplicationManager }, { type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }, { type: i0.ChangeDetectorRef }], { glContainer: [{
             type: ViewChild,
             args: ['glContainer', { static: false }]
         }], directContentContainer: [{
             type: ViewChild,
             args: ['directContentContainer', { static: false }]
+        }], recordsGlContainer: [{
+            type: ViewChild,
+            args: ['recordsGlContainer', { static: false }]
         }], firstResourceLoadComplete: [{
             type: Output
         }], layoutInitError: [{
@@ -1640,5 +2600,5 @@ export class TabContainerComponent extends BaseAngularComponent {
             type: HostListener,
             args: ['window:resize']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TabContainerComponent, { className: "TabContainerComponent", filePath: "src/lib/shell/components/tabs/tab-container.component.ts", lineNumber: 55 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TabContainerComponent, { className: "TabContainerComponent", filePath: "src/lib/shell/components/tabs/tab-container.component.ts", lineNumber: 62 }); })();
 //# sourceMappingURL=tab-container.component.js.map