@memberjunction/ng-explorer-core 5.21.0 → 5.23.0

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

@@ -1,10 +1,10 @@
 import { Component, ViewChild, createComponent, ViewEncapsulation, HostListener, Output, EventEmitter, inject } from '@angular/core';
 import { MJGlobal } from '@memberjunction/global';
-import { BaseResourceComponent } from '@memberjunction/ng-shared';
+import { BaseResourceComponent, HomeAppPinService } from '@memberjunction/ng-shared';
 import { ResourceData, ResourcePermissionEngine } from '@memberjunction/core-entities';
+import { MJNotificationService } from '@memberjunction/ng-notifications';
 import { LogError, Metadata } from '@memberjunction/core';
 import { ComponentCacheManager } from './component-cache-manager';
-import { LazyModuleRegistry } from '../../../services/lazy-module-registry';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-base-application";
 const _c0 = ["glContainer"];
@@ -15,6 +15,19 @@ function TabContainerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
 function TabContainerComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 4, 1);
 } }
+function TabContainerComponent_Conditional_3_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.ɵɵelementEnd();
+} }
+function TabContainerComponent_Conditional_3_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);
@@ -25,28 +38,38 @@ function TabContainerComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     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.onContextClose()); });
+    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.ɵɵelementStart(8, "span");
-    i0.ɵɵtext(9, "Close Tab");
+    i0.ɵɵconditionalCreate(8, TabContainerComponent_Conditional_3_Conditional_8_Template, 4, 0)(9, TabContainerComponent_Conditional_3_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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 7);
-    i0.ɵɵlistener("click", function TabContainerComponent_Conditional_3_Template_div_click_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onContextCloseOthers()); });
-    i0.ɵɵelement(11, "i", 11);
-    i0.ɵɵelementStart(12, "span");
-    i0.ɵɵtext(13, "Close Others");
+    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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 7);
-    i0.ɵɵlistener("click", function TabContainerComponent_Conditional_3_Template_div_click_14_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onContextCloseToRight()); });
-    i0.ɵɵelement(15, "i", 12);
-    i0.ɵɵelementStart(16, "span");
-    i0.ɵɵtext(17, "Close to Right");
+    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.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("left", ctx_r1.contextMenuX, "px")("top", ctx_r1.contextMenuY, "px");
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.isContextTabPinned ? "Unpin Tab" : "Pin Tab");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("new-item", !ctx_r1.isContextTabPinnedToHome)("disabled", ctx_r1.isContextTabPinnedToHome);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.isContextTabPinnedToHome ? 8 : 9);
 } }
 /**
  * Container for Golden Layout tabs with app-colored styling.
@@ -78,7 +101,7 @@ export class TabContainerComponent {
      * The shell can use this to show an error dialog and redirect.
      */
     layoutInitError = new EventEmitter();
-    lazyRegistry = inject(LazyModuleRegistry);
+    pinService = inject(HomeAppPinService);
     subscriptions = [];
     layoutInitRetryCount = 0;
     MAX_LAYOUT_INIT_RETRIES = 5;
@@ -86,12 +109,18 @@ export class TabContainerComponent {
     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();
+    // 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.
+    tabsCurrentlyLoading = new Set();
     // NEW: Smart component cache for preserving state across tab switches
     cacheManager;
     // Single-resource mode: render component directly without Golden Layout
     // This avoids the 20px height issue when GL header is hidden
     useSingleResourceMode = false;
     singleResourceComponentRef = null;
+    /** Cache identity of the current single-resource component for detachment */
+    singleResourceCacheIdentity = null;
     previousTabBarVisible = null;
     currentSingleResourceSignature = null; // Track loaded content signature to avoid unnecessary reloads
     isCreatingInitialTabs = false; // Flag to prevent syncTabsWithConfiguration during initial tab creation
@@ -139,8 +168,17 @@ export class TabContainerComponent {
                     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) {
@@ -304,7 +342,9 @@ export class TabContainerComponent {
         const shouldUseSingleResourceMode = !tabBarVisible;
         if (shouldUseSingleResourceMode !== this.useSingleResourceMode) {
             this.useSingleResourceMode = shouldUseSingleResourceMode;
-            this.cdr.detectChanges();
+            // Defer detectChanges to next microtask to avoid ExpressionChangedAfterItHasBeenCheckedError
+            // when this handler fires during an already-running change detection cycle.
+            Promise.resolve().then(() => this.cdr.detectChanges());
             if (this.useSingleResourceMode) {
                 // Transitioning to single-resource mode
                 // **CRITICAL FIX**: Wait for the template to render directContentContainer
@@ -403,23 +443,30 @@ export class TabContainerComponent {
         if (cached) {
             // Clean up previous single-resource component (if different)
             this.cleanupSingleResourceComponent();
-            // Detach from tab tracking (it was attached to a tab in Golden Layout)
-            this.cacheManager.markAsDetached(activeTab.id);
+            // Mark cached component as attached to this tab (it was detached / available for reuse).
+            // 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);
             // Reattach the cached wrapper element to single-resource container
             cached.wrapperElement.style.height = "100%"; // Ensure full height
             container.appendChild(cached.wrapperElement);
-            // Store reference for cleanup
+            // Store reference and identity for cleanup/detachment
             this.singleResourceComponentRef = cached.componentRef;
-            return;
-        }
-        // Get the component registration (with lazy loading fallback)
-        let resourceReg = MJGlobal.Instance.ClassFactory.GetRegistration(BaseResourceComponent, driverClass);
-        if (!resourceReg) {
-            const loaded = await this.lazyRegistry.Load(driverClass);
-            if (loaded) {
-                resourceReg = MJGlobal.Instance.ClassFactory.GetRegistration(BaseResourceComponent, driverClass);
+            this.singleResourceCacheIdentity = { driverClass, recordId: resourceData.ResourceRecordID || '', appId: activeTab.applicationId, tabId: activeTab.id };
+            // Restore saved queryParams to the tab config so the URL reflects
+            // the component's preserved state (e.g., selected conversation, collection drill-down).
+            if (cached.savedQueryParams) {
+                this.workspaceManager.UpdateTabConfiguration(activeTab.id, {
+                    queryParams: cached.savedQueryParams
+                });
+                // Do NOT clear savedQueryParams here — the else branch (unchanged-signature saves)
+                // will keep it current while the component is active. Clearing it would cause the
+                // queryParams to be lost on the next detach/reattach cycle.
             }
+            return;
         }
+        // Get the component registration (with lazy loading fallback via ClassFactory)
+        const resourceReg = await MJGlobal.Instance.ClassFactory.GetRegistrationAsync(BaseResourceComponent, driverClass);
         if (!resourceReg) {
             LogError(`Unable to find resource registration for driver class: ${driverClass}`);
             return;
@@ -439,6 +486,18 @@ export class TabContainerComponent {
         instance.LoadCompleteEvent = () => {
             this.emitFirstLoadCompleteOnce();
         };
+        // Wire up display name change for single-resource mode.
+        // 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.
+        instance.DisplayNameChangedEvent = (newName) => {
+            if (this.singleResourceComponentRef?.instance === instance) {
+                const tabId = this.workspaceManager.GetActiveTabId();
+                if (tabId) {
+                    this.workspaceManager.UpdateTabTitle(tabId, newName);
+                }
+            }
+        };
         // Get the native element and append to container
         const nativeElement = componentRef.hostView.rootNodes[0];
         container.appendChild(nativeElement);
@@ -446,22 +505,76 @@ export class TabContainerComponent {
         if (container.children?.length > 0) {
             container.children[0].style.height = "100%";
         }
-        // Store reference for cleanup
+        // 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;
+        this.cacheManager.cacheComponent(componentRef, wrapperElement, resourceData, activeTab.id);
+        // Store reference and identity for cleanup/detachment
         this.singleResourceComponentRef = componentRef;
+        this.singleResourceCacheIdentity = { driverClass, recordId: resourceData.ResourceRecordID || '', appId: activeTab.applicationId, tabId: activeTab.id };
     }
     /**
      * Clean up single-resource mode component
      */
+    /**
+     * Detaches the current single-resource component from the DOM and marks it as
+     * available for reuse in the component cache.
+     *
+     * ╔══════════════════════════════════════════════════════════════════════════╗
+     * ║  ⚠️  DO NOT DESTROY THE COMPONENT HERE — INTENTIONAL DESIGN CHOICE  ⚠️  ║
+     * ║                                                                        ║
+     * ║  The component is DETACHED from the DOM, NOT destroyed. It stays alive ║
+     * ║  in the ComponentCacheManager with its full Angular state preserved     ║
+     * ║  (properties, subscriptions, loaded data, scroll position, etc).       ║
+     * ║                                                                        ║
+     * ║  When the user returns to this tab, the cached component is reattached ║
+     * ║  instantly — no data reload, no API calls, no flash of empty content.  ║
+     * ║                                                                        ║
+     * ║  Destroying components here "for memory optimization" is a net         ║
+     * ║  NEGATIVE: the reload on return is far more expensive (DB queries,     ║
+     * ║  API calls, re-rendering) than keeping the component in memory.        ║
+     * ║  The LRU eviction in ComponentCacheManager handles memory limits —     ║
+     * ║  when MaxDetachedComponents is exceeded, the LEAST recently used       ║
+     * ║  components are evicted automatically.                                 ║
+     * ║                                                                        ║
+     * ║  If you think memory is a problem, adjust MaxDetachedComponents        ║
+     * ║  instead of destroying components here.                                ║
+     * ╚══════════════════════════════════════════════════════════════════════════╝
+     */
+    /**
+     * Save the currently displayed component's queryParams to its cache entry.
+     * Called on every config change so the cache entry always has the latest queryParams,
+     * even after the tab config is overwritten by a new nav item.
+     */
+    saveCurrentComponentQueryParams() {
+        if (!this.singleResourceCacheIdentity)
+            return;
+        const { tabId } = this.singleResourceCacheIdentity;
+        const tab = this.workspaceManager.GetTab(tabId);
+        const qp = tab?.configuration?.['queryParams'];
+        const cached = this.cacheManager.getComponentByTabId(tabId);
+        if (cached) {
+            cached.savedQueryParams = (qp && Object.keys(qp).length > 0) ? { ...qp } : undefined;
+        }
+    }
     cleanupSingleResourceComponent() {
         if (this.singleResourceComponentRef) {
-            this.appRef.detachView(this.singleResourceComponentRef.hostView);
-            this.singleResourceComponentRef.destroy();
+            if (this.singleResourceCacheIdentity) {
+                const { driverClass, recordId, appId } = this.singleResourceCacheIdentity;
+                // Mark as DETACHED by resource identity — the ONE consistent key used everywhere.
+                this.cacheManager.markAsDetached(driverClass, recordId, appId);
+            }
             this.singleResourceComponentRef = null;
+            this.singleResourceCacheIdentity = null;
         }
-        // Clear the container
+        // Remove children from the container. This detaches the wrapper DOM element
+        // without destroying the Angular component — it lives on in the cache.
+        // Using removeChild (not innerHTML='') to avoid aggressive DOM cleanup.
         const container = this.directContentContainer?.nativeElement;
         if (container) {
-            container.innerHTML = '';
+            while (container.firstChild) {
+                container.removeChild(container.firstChild);
+            }
         }
     }
     /**
@@ -517,6 +630,13 @@ export class TabContainerComponent {
      * Uses component cache to reuse components for same resources
      */
     async loadTabContent(tabId, container) {
+        // Per-tab guard: prevent concurrent loads of the same tab content.
+        // This can happen when a tab's content changes while active — both the workspace
+        // config subscription reload path and onTabShown can race to call this method.
+        if (this.tabsCurrentlyLoading.has(tabId)) {
+            return;
+        }
+        this.tabsCurrentlyLoading.add(tabId);
         try {
             const tab = this.workspaceManager.GetTab(tabId);
             if (!tab) {
@@ -555,14 +675,8 @@ export class TabContainerComponent {
                 }
                 return;
             }
-            // Get the component registration using the driver class (with lazy loading fallback)
-            let resourceReg = MJGlobal.Instance.ClassFactory.GetRegistration(BaseResourceComponent, driverClass);
-            if (!resourceReg) {
-                const loaded = await this.lazyRegistry.Load(driverClass);
-                if (loaded) {
-                    resourceReg = MJGlobal.Instance.ClassFactory.GetRegistration(BaseResourceComponent, driverClass);
-                }
-            }
+            // Get the component registration using the driver class (with lazy loading fallback via ClassFactory)
+            const resourceReg = await MJGlobal.Instance.ClassFactory.GetRegistrationAsync(BaseResourceComponent, driverClass);
             if (!resourceReg) {
                 LogError(`Unable to find resource registration for driver class: ${driverClass}`);
                 return;
@@ -588,6 +702,11 @@ export class TabContainerComponent {
                     // TODO: Implement UpdateTabTitle in WorkspaceStateManager
                 }
             };
+            // Wire up display name change notifications
+            instance.DisplayNameChangedEvent = (newName) => {
+                this.layoutManager.UpdateTabStyle(tabId, { title: newName });
+                this.workspaceManager.UpdateTabTitle(tabId, newName);
+            };
             // Create a container div for the component
             const componentElement = document.createElement('div');
             componentElement.className = 'tab-content-wrapper';
@@ -605,6 +724,9 @@ export class TabContainerComponent {
         catch (e) {
             LogError(e);
         }
+        finally {
+            this.tabsCurrentlyLoading.delete(tabId);
+        }
     }
     /**
      * Update tab display name in background without loading full component
@@ -624,13 +746,7 @@ export class TabContainerComponent {
             }
             // Get the resource registration to access GetResourceDisplayName without loading full component
             const driverClass = resourceData.Configuration?.resourceTypeDriverClass || resourceData.ResourceType;
-            let resourceReg = MJGlobal.Instance.ClassFactory.GetRegistration(BaseResourceComponent, driverClass);
-            if (!resourceReg) {
-                const loaded = await this.lazyRegistry.Load(driverClass);
-                if (loaded) {
-                    resourceReg = MJGlobal.Instance.ClassFactory.GetRegistration(BaseResourceComponent, driverClass);
-                }
-            }
+            const resourceReg = await MJGlobal.Instance.ClassFactory.GetRegistrationAsync(BaseResourceComponent, driverClass);
             if (!resourceReg) {
                 return;
             }
@@ -809,7 +925,7 @@ export class TabContainerComponent {
      */
     cleanupTabComponent(tabId) {
         // First, try to detach from cache (preserves component for reuse)
-        const cachedInfo = this.cacheManager.markAsDetached(tabId);
+        const cachedInfo = this.cacheManager.findAndDetachByTabId(tabId);
         if (cachedInfo) {
             // Remove from legacy componentRefs but keep in cache
             this.componentRefs.delete(tabId);
@@ -973,6 +1089,135 @@ export class TabContainerComponent {
         }
         this.hideContextMenu();
     }
+    /**
+     * Check if context menu tab is pinned to Home dashboard
+     */
+    get isContextTabPinnedToHome() {
+        if (!this.contextMenuTabId)
+            return false;
+        const tab = this.workspaceManager.GetTab(this.contextMenuTabId);
+        if (!tab)
+            return false;
+        const resourceType = this.resolveResourceType(tab);
+        return this.pinService.IsPinned(resourceType, tab.configuration);
+    }
+    /**
+     * Pin current context menu tab to Home dashboard
+     */
+    async onContextPinToHome() {
+        if (this.isContextTabPinnedToHome) {
+            this.hideContextMenu();
+            return;
+        }
+        if (!this.contextMenuTabId) {
+            this.hideContextMenu();
+            return;
+        }
+        const tab = this.workspaceManager.GetTab(this.contextMenuTabId);
+        if (!tab) {
+            this.hideContextMenu();
+            return;
+        }
+        const resourceType = this.resolveResourceType(tab);
+        const activeApp = this.appManager.GetActiveApp();
+        // Resolve nav item icon for Custom pins
+        let pinIcon;
+        if (resourceType === 'Custom' && activeApp) {
+            const navItemName = tab.configuration?.['navItemName'];
+            if (navItemName) {
+                const navItems = await activeApp.GetNavItems();
+                const navItem = navItems.find(ni => ni.Label === navItemName);
+                pinIcon = navItem?.Icon || undefined;
+            }
+        }
+        const added = this.pinService.AddPin({
+            DisplayName: tab.title || 'Untitled',
+            ResourceType: resourceType,
+            ApplicationID: tab.applicationId || activeApp?.ID,
+            ApplicationName: activeApp?.Name,
+            Icon: pinIcon,
+            Color: activeApp?.GetColor() || undefined,
+            Configuration: tab.configuration,
+        });
+        if (added) {
+            MJNotificationService.Instance.CreateSimpleNotification(`Pinned "${tab.title}" to Home`, 'success', 2000);
+            this.captureContextTabThumbnail(tab);
+        }
+        else {
+            MJNotificationService.Instance.CreateSimpleNotification(`"${tab.title}" is already pinned to Home`, 'info', 3000);
+        }
+        this.hideContextMenu();
+    }
+    /**
+     * Resolve a WorkspaceTab's resource type string for pin matching
+     */
+    resolveResourceType(tab) {
+        const config = tab.configuration;
+        const rt = config.resourceType || '';
+        if (rt === 'Dashboards' || config['dashboardId'])
+            return 'Dashboards';
+        if (rt === 'User Views' || rt === 'MJ: User Views' || config['viewId'])
+            return 'User Views';
+        if (rt === 'Queries' || config['queryId'])
+            return 'Queries';
+        if (rt === 'Reports' || config['reportId'])
+            return 'Reports';
+        if (rt === 'Records' || (config['entity'] && config['recordId']))
+            return 'Records';
+        if (rt === 'Custom' || config['navItemName'])
+            return 'Custom';
+        return rt || 'Custom';
+    }
+    /**
+     * Capture thumbnail for a just-pinned tab (async, non-blocking)
+     */
+    async captureContextTabThumbnail(tab) {
+        try {
+            // Find the active content element — differs by mode
+            let contentEl = null;
+            if (this.useSingleResourceMode) {
+                contentEl = this.directContentContainer?.nativeElement ?? null;
+            }
+            else {
+                // In Golden Layout mode, find the active tab's content pane
+                contentEl = this.glContainer?.nativeElement?.querySelector('.lm_item_container .lm_content');
+            }
+            if (!contentEl)
+                return;
+            const thumbnail = await this.pinService.CaptureThumbnail(contentEl);
+            if (thumbnail) {
+                const resourceType = this.resolveResourceType(tab);
+                const pin = this.pinService.FindPin(resourceType, tab.configuration);
+                if (pin) {
+                    this.pinService.UpdatePin(pin.Id, { Thumbnail: thumbnail });
+                }
+            }
+        }
+        catch {
+            // Thumbnail capture is best-effort
+        }
+    }
+    /**
+     * Public method for external callers (e.g. shell) to capture a thumbnail
+     * of the currently visible content, regardless of mode.
+     */
+    async CaptureActiveThumbnail() {
+        try {
+            let contentEl = null;
+            if (this.useSingleResourceMode) {
+                contentEl = this.directContentContainer?.nativeElement ?? null;
+            }
+            else {
+                contentEl = this.glContainer?.nativeElement?.querySelector('.lm_item_container .lm_content');
+            }
+            if (!contentEl)
+                return undefined;
+            return await this.pinService.CaptureThumbnail(contentEl);
+        }
+        catch {
+            return undefined;
+        }
+    }
     /**
      * While the naming implies this is only invoked once, components we DO NOT CONTROL might have race
      * conditions that result in unpredictable behavior. To avoid those causing loading screen overaly to show
@@ -990,21 +1235,21 @@ export class TabContainerComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.directContentContainer = _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, 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-xmark"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-angles-right"]], template: function TabContainerComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, outputs: { firstResourceLoadComplete: "firstResourceLoadComplete", layoutInitError: "layoutInitError" }, standalone: false, 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, 18, 5, "div", 5);
+            i0.ɵɵconditionalCreate(3, TabContainerComponent_Conditional_3_Template, 23, 10, "div", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.useSingleResourceMode ? 1 : 2);
             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/* 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 });
+        } }, 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 });
 }
 (() => { (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\" (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/* 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  <!-- 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"] }]
     }], () => [{ 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 }]