@ogidor/dashboard 1.0.11 → 1.0.13

package/fesm2020/ogidor-dashboard.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, EventEmitter, TemplateRef, Component, ChangeDetectionStrategy, Input, Output, ViewChild, ContentChild, Injectable, Pipe, NgModule } from '@angular/core';
+import { Directive, EventEmitter, TemplateRef, Component, ChangeDetectionStrategy, Input, Output, ViewChild, ContentChild, Injectable, Pipe, HostListener, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -880,16 +880,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 const DEFAULT_THEME = {
     backgroundColor: '#000000',
     panelColor: '#1c1c1e',
+    panelBorderColor: 'rgba(255,255,255,0.05)',
     widgetCardColor: '#2c2c2e',
     foreColor: '#8e8e93',
     accentColor: '#0a84ff',
+    accentTintColor: 'rgba(10,132,255,0.15)',
+    accentTintStrongColor: 'rgba(10,132,255,0.25)',
     dangerColor: '#ff453a',
+    dangerTintColor: 'rgba(255,69,58,0.22)',
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
     tabsContainerColor: 'rgba(44,44,46,0.6)',
     tabActiveColor: '#3a3a3c',
     tabActiveTextColor: '#ffffff',
     tabHoverTextColor: '#e5e5ea',
+    tabHoverBgColor: 'rgba(255,255,255,0.05)',
     addWidgetButtonTextColor: '#ffffff',
+    overflowBtnBgColor: 'rgba(255,255,255,0.08)',
+    overflowBtnBorderColor: 'rgba(255,255,255,0.12)',
+    overlayBgColor: 'rgba(0,0,0,0.55)',
+    sheetBorderColor: 'rgba(255,255,255,0.08)',
+    scrollbarColor: 'rgba(255,255,255,0.15)',
     popoutTitleColor: '#ffffff',
     widgetTitleColor: '#ffffff',
     dragHandleColor: 'rgba(255,255,255,0.2)',
@@ -920,10 +930,19 @@ class DashboardComponent {
         this.resolvedTheme = { ...DEFAULT_THEME };
         this.wrapperStyles = {};
         this.pages = [];
+        this.visiblePages = [];
+        this.hiddenCount = 0;
         this.activePageId = '';
         this.isPoppedOut = false;
-        this.tabsOverflow = false;
+        this.tabSwitcherOpen = false;
         this.subs = new Subscription();
+        // Reserved space for the overflow "+N" button and the add "+" button (px)
+        this.OVERFLOW_BTN_W = 80;
+        this.ADD_BTN_W = 52;
+        this.GAP = 6;
+        this.PADDING = 12; // 6px each side
+        // Cache of measured tab widths (including gap) indexed by page position
+        this._tabWidthCache = [];
     }
     ngOnChanges(changes) {
         if (changes['theme'] || changes['initialLayout'])
@@ -944,11 +963,15 @@ class DashboardComponent {
             this.isPoppedOut = true;
         this.subs.add(this.stateService.pages$.subscribe(pages => {
             this.pages = pages;
+            this._tabWidthCache = []; // invalidate cache — page list changed
             if (this.isPoppedOut && hash) {
                 if (pages.find(p => p.id === hash))
                     this.stateService.setActivePage(hash);
             }
             this.updateActivePage();
+            this.recalcVisibleTabs();
+            // Second pass after Angular has rendered the updated tab elements
+            setTimeout(() => this.recalcVisibleTabs());
         }));
         this.subs.add(this.stateService.activePageId$.subscribe(id => {
             this.activePageId = id;
@@ -956,18 +979,16 @@ class DashboardComponent {
         }));
     }
     ngAfterViewInit() {
-        if (!this.tabsContainerRef)
+        if (!this.tabsTrackRef)
             return;
         this.zone.runOutsideAngular(() => {
             this.resizeObserver = new ResizeObserver(() => {
-                this.zone.run(() => this.checkOverflow());
+                this.zone.run(() => this.recalcVisibleTabs());
             });
-            this.resizeObserver.observe(this.tabsContainerRef.nativeElement);
-        });
-        // Also detect scroll so fade hides when scrolled to end
-        this.tabsContainerRef.nativeElement.addEventListener('scroll', () => {
-            this.zone.run(() => this.checkOverflow());
+            this.resizeObserver.observe(this.tabsTrackRef.nativeElement);
         });
+        // Initial measurement pass now that the DOM is ready
+        setTimeout(() => this.recalcVisibleTabs());
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
@@ -993,12 +1014,82 @@ class DashboardComponent {
         this.stateService.popOutPage(pageId);
     }
     serializeLayout() { return this.stateService.serializeLayout(); }
-    checkOverflow() {
-        const el = this.tabsContainerRef?.nativeElement;
-        if (!el)
+    openTabSwitcher() { this.tabSwitcherOpen = true; }
+    closeTabSwitcher() { this.tabSwitcherOpen = false; }
+    onEscapeKey() { this.closeTabSwitcher(); }
+    onSwitcherSelect(pageId) {
+        this.stateService.setActivePage(pageId);
+        this.closeTabSwitcher();
+    }
+    onSwitcherPopOut(event, pageId) {
+        event.stopPropagation();
+        this.stateService.popOutPage(pageId);
+        this.closeTabSwitcher();
+    }
+    onSwitcherRemove(event, pageId) {
+        event.stopPropagation();
+        if (confirm('Remove this workspace?')) {
+            this.stateService.removePage(pageId);
+            if (this.pages.length <= 1)
+                this.closeTabSwitcher();
+        }
+    }
+    onSwitcherAdd() {
+        const name = prompt('Workspace name:', `Workspace ${this.pages.length + 1}`);
+        if (name)
+            this.stateService.addPage(name);
+    }
+    recalcVisibleTabs() {
+        if (!this.tabsTrackRef || !this.pages.length) {
+            this.visiblePages = this.pages;
+            this.hiddenCount = 0;
+            this.cdr.markForCheck();
             return;
-        const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 4;
-        this.tabsOverflow = !atEnd && el.scrollWidth > el.clientWidth;
+        }
+        const track = this.tabsTrackRef.nativeElement;
+        const trackW = track.clientWidth;
+        // Space always consumed by the add "+" button + padding
+        const baseReserved = this.ADD_BTN_W + this.GAP + this.PADDING;
+        // Space needed for the overflow "+N" button when shown
+        const overflowSlot = this.OVERFLOW_BTN_W + this.GAP;
+        // Measure each real tab element currently in the DOM.
+        // The DOM always renders all visiblePages tabs, so we may not have all tabs
+        // measured yet — fall back to the previous measured cache or a generous estimate.
+        const tabEls = Array.from(track.querySelectorAll('.tab'));
+        // Build a width map by index (only covers currently visible tabs)
+        const measuredWidths = this.pages.map((_, i) => {
+            const el = tabEls[i];
+            return el ? el.getBoundingClientRect().width + this.GAP : this._tabWidthCache[i] ?? 150 + this.GAP;
+        });
+        // Update cache for next call
+        tabEls.forEach((el, i) => {
+            this._tabWidthCache[i] = el.getBoundingClientRect().width + this.GAP;
+        });
+        // How much space the tabs need in total (no overflow button)
+        const totalNeeded = measuredWidths.reduce((s, w) => s + w, 0) - this.GAP; // remove trailing gap
+        if (totalNeeded <= trackW - baseReserved) {
+            // Everything fits — show all
+            this.visiblePages = this.pages;
+            this.hiddenCount = 0;
+        }
+        else {
+            // Not everything fits — fill as many as possible while always leaving room for overflow btn
+            const budget = trackW - baseReserved - overflowSlot;
+            let used = 0;
+            let count = 0;
+            for (let i = 0; i < this.pages.length; i++) {
+                used += measuredWidths[i];
+                if (used - this.GAP <= budget) { // -GAP: last item has no trailing gap
+                    count++;
+                }
+                else {
+                    break;
+                }
+            }
+            count = Math.max(1, count);
+            this.visiblePages = this.pages.slice(0, count);
+            this.hiddenCount = this.pages.length - count;
+        }
         this.cdr.markForCheck();
     }
     applyTheme() {
@@ -1007,16 +1098,26 @@ class DashboardComponent {
         this.wrapperStyles = {
             '--dash-bg': t.backgroundColor,
             '--dash-panel-bg': t.panelColor,
+            '--dash-panel-border': t.panelBorderColor,
             '--dash-card-bg': t.widgetCardColor,
             '--dash-fore-color': t.foreColor,
             '--dash-accent-color': t.accentColor,
+            '--dash-accent-tint': t.accentTintColor,
+            '--dash-accent-tint-strong': t.accentTintStrongColor,
             '--dash-danger-color': t.dangerColor,
+            '--dash-danger-tint': t.dangerTintColor,
             '--dash-font-family': t.fontFamily,
             '--dash-tabs-container-color': t.tabsContainerColor,
             '--dash-tab-active-color': t.tabActiveColor,
             '--dash-tab-active-text': t.tabActiveTextColor,
             '--dash-tab-hover-text': t.tabHoverTextColor,
+            '--dash-tab-hover-bg': t.tabHoverBgColor,
             '--dash-add-widget-text': t.addWidgetButtonTextColor,
+            '--dash-overflow-btn-bg': t.overflowBtnBgColor,
+            '--dash-overflow-btn-border': t.overflowBtnBorderColor,
+            '--dash-overlay-bg': t.overlayBgColor,
+            '--dash-sheet-border': t.sheetBorderColor,
+            '--dash-scrollbar-color': t.scrollbarColor,
             '--dash-popout-title-color': t.popoutTitleColor,
             '--dash-widget-title-color': t.widgetTitleColor,
             '--dash-drag-handle-color': t.dragHandleColor,
@@ -1029,18 +1130,10 @@ class DashboardComponent {
     }
     updateActivePage() {
         this.activePage = this.pages.find(p => p.id === this.activePageId);
-        // scroll active tab into view
-        setTimeout(() => {
-            if (!this.tabsContainerRef)
-                return;
-            const active = this.tabsContainerRef.nativeElement.querySelector('.tab.active');
-            active?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
-            this.checkOverflow();
-        });
     }
 }
 DashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardComponent, deps: [{ token: DashboardStateService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DashboardComponent, selector: "app-dashboard", inputs: { initialLayout: "initialLayout", theme: "theme" }, outputs: { addWidgetRequested: "addWidgetRequested", editWidgetRequested: "editWidgetRequested" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: GridCellDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "tabsContainerRef", first: true, predicate: ["tabsContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DashboardComponent, selector: "app-dashboard", inputs: { initialLayout: "initialLayout", theme: "theme" }, outputs: { addWidgetRequested: "addWidgetRequested", editWidgetRequested: "editWidgetRequested" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" } }, queries: [{ propertyName: "cellTemplate", first: true, predicate: GridCellDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "tabsTrackRef", first: true, predicate: ["tabsTrack"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <!-- POPPED-OUT MODE -->
     <ng-container *ngIf="isPoppedOut; else normalMode">
       <div class="popout-wrapper" [ngStyle]="wrapperStyles">
@@ -1069,29 +1162,39 @@ DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
 
           <header class="dashboard-header">
 
-            <!-- Tabs pill — scrollable, fades when overflowing -->
-            <div class="tabs-scroll-track">
-              <div class="tabs-container" #tabsContainer>
-                <div
-                  *ngFor="let page of pages"
-                  class="tab"
-                  [class.active]="page.id === activePageId"
-                  (click)="onSelectPage(page.id)"
-                >
-                  <span class="tab-name">{{ page.name }}</span>
-                  <button class="tab-action tab-popout" (click)="onPopOut($event, page.id)" title="Open in new window">
-                    <i class="la la-external-link-alt"></i>
-                  </button>
-                  <button class="tab-action tab-close" *ngIf="pages.length > 1" (click)="onRemovePage($event, page.id)" title="Close">
-                    <i class="la la-times"></i>
-                  </button>
-                </div>
-                <button class="btn-add-page" (click)="onAddPage()" title="New workspace">
-                  <i class="la la-plus"></i>
+            <!-- Tab bar -->
+            <div class="tabs-track" #tabsTrack>
+              <!-- Visible tabs -->
+              <div
+                *ngFor="let page of visiblePages"
+                class="tab"
+                [class.active]="page.id === activePageId"
+                (click)="onSelectPage(page.id)"
+              >
+                <span class="tab-name">{{ page.name }}</span>
+                <button class="tab-action tab-popout" (click)="onPopOut($event, page.id)" title="Open in new window">
+                  <i class="la la-external-link-alt"></i>
+                </button>
+                <button class="tab-action tab-close" *ngIf="pages.length > 1" (click)="onRemovePage($event, page.id)" title="Close">
+                  <i class="la la-times"></i>
                 </button>
               </div>
-              <!-- fade hint shown when scrollable -->
-              <div class="tabs-fade-right" *ngIf="tabsOverflow"></div>
+
+              <!-- Overflow button — shown only when there are hidden tabs -->
+              <button
+                *ngIf="hiddenCount > 0"
+                class="btn-overflow"
+                (click)="openTabSwitcher()"
+                title="Show all workspaces"
+              >
+                <span>+{{ hiddenCount }}</span>
+                <i class="la la-th-large"></i>
+              </button>
+
+              <!-- Add page button -->
+              <button class="btn-add-page" (click)="onAddPage()" title="New workspace">
+                <i class="la la-plus"></i>
+              </button>
             </div>
 
             <button class="btn-add-widget" (click)="addWidgetRequested.emit()" title="Add widget">
@@ -1101,6 +1204,49 @@ DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
 
           </header>
 
+          <!-- ── Tab-switcher overlay (Chrome mobile style) ── -->
+          <div class="tab-switcher-overlay" *ngIf="tabSwitcherOpen" (click)="closeTabSwitcher()">
+            <div class="tab-switcher-sheet" (click)="$event.stopPropagation()">
+
+              <div class="tab-switcher-header">
+                <span class="tab-switcher-title">{{ pages.length }} Workspace{{ pages.length !== 1 ? 's' : '' }}</span>
+                <button class="tab-switcher-close-btn" (click)="closeTabSwitcher()" title="Close">
+                  <i class="la la-times"></i>
+                </button>
+              </div>
+
+              <div class="tab-switcher-grid">
+                <div
+                  *ngFor="let page of pages"
+                  class="tab-card"
+                  [class.active]="page.id === activePageId"
+                  (click)="onSwitcherSelect(page.id)"
+                >
+                  <div class="tab-card-icon">
+                    <i class="la la-th-large"></i>
+                  </div>
+                  <span class="tab-card-name">{{ page.name }}</span>
+                  <div class="tab-card-actions">
+                    <button class="tab-card-btn tab-card-popout" (click)="onSwitcherPopOut($event, page.id)" title="Open in new window">
+                      <i class="la la-external-link-alt"></i>
+                    </button>
+                    <button class="tab-card-btn tab-card-remove" *ngIf="pages.length > 1" (click)="onSwitcherRemove($event, page.id)" title="Close">
+                      <i class="la la-times"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <div class="tab-switcher-footer">
+                <button class="tab-switcher-add-btn" (click)="onSwitcherAdd()">
+                  <i class="la la-plus"></i>
+                  <span>New Workspace</span>
+                </button>
+              </div>
+
+            </div>
+          </div>
+
           <div class="grid-container">
             <app-grid [widgets]="activePage?.widgets || []" (itemChanged)="onItemChanged($event)">
               <ng-template gridCell let-widget="widget">
@@ -1119,7 +1265,7 @@ DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
         </main>
       </div>
     </ng-template>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;--dash-bg: #000000;--dash-panel-bg: #1c1c1e;--dash-card-bg: #2c2c2e;--dash-fore-color: #8e8e93;--dash-accent-color: #0a84ff;--dash-danger-color: #ff453a;--dash-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;--dash-tabs-container-color: rgba(44,44,46,.6);--dash-tab-active-color: #3a3a3c;--dash-tab-active-text: #ffffff;--dash-tab-hover-text: #e5e5ea;--dash-add-widget-text: #ffffff;--dash-popout-title-color: #ffffff;--dash-widget-title-color: #ffffff;--dash-drag-handle-color: rgba(255,255,255,.2);--dash-widget-border-color: rgba(255,255,255,.07);--dash-widget-btn-bg: rgba(255,255,255,.07);--dash-widget-btn-color: rgba(255,255,255,.5);--dash-placeholder-color: #0a84ff;--dash-resize-handle-color: rgba(255,255,255,.25)}.dashboard-wrapper{display:flex;flex:1;min-height:0;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;border-radius:40px;padding:20px;background:var(--dash-panel-bg);border:1px solid rgba(255,255,255,.05)}.popout-wrapper{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.popout-header{display:flex;align-items:center;margin-bottom:16px;padding:10px 18px;background:var(--dash-panel-bg);border-radius:20px;border:1px solid rgba(255,255,255,.06);flex-shrink:0}.popout-title{font-size:16px;font-weight:700;color:var(--dash-popout-title-color)}.popout-wrapper app-grid{flex:1;min-height:0;overflow:auto}.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;flex-shrink:0}.tabs-scroll-track{position:relative;flex:1;min-width:0}.tabs-container{display:flex;align-items:center;gap:8px;background:var(--dash-tabs-container-color);backdrop-filter:blur(10px);border-radius:25px;padding:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.tabs-container::-webkit-scrollbar{display:none}.tabs-fade-right{position:absolute;top:0;right:0;width:60px;height:100%;border-radius:0 25px 25px 0;pointer-events:none;background:linear-gradient(to right,transparent,var(--dash-panel-bg))}.tab{display:flex;align-items:center;gap:4px;padding:8px 14px 8px 18px;border-radius:20px;cursor:pointer;font-size:14px;font-weight:500;color:var(--dash-fore-color);white-space:nowrap;flex-shrink:0;transition:all .2s}.tab.active{background:var(--dash-tab-active-color);color:var(--dash-tab-active-text)}.tab:hover:not(.active){color:var(--dash-tab-hover-text);background:rgba(255,255,255,.05)}.tab-name{flex:1;white-space:nowrap}.tab-action{background:transparent;border:none;color:var(--dash-fore-color);padding:2px;font-size:11px;cursor:pointer;opacity:0;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.tab:hover .tab-action{opacity:1}.tab-popout:hover{color:var(--dash-accent-color);background:rgba(10,132,255,.18)}.tab-close:hover{color:var(--dash-danger-color);background:rgba(255,69,58,.2)}.btn-add-page{background:transparent;border:none;color:var(--dash-fore-color);padding:8px 16px;cursor:pointer;border-radius:20px;flex-shrink:0;transition:all .2s}.btn-add-page:hover{color:var(--dash-accent-color);background:rgba(10,132,255,.1)}.btn-add-widget{display:flex;align-items:center;gap:6px;background:var(--dash-accent-color);border:none;color:var(--dash-add-widget-text);font-size:14px;font-weight:600;padding:10px 20px;border-radius:22px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:opacity .2s,transform .15s}.btn-add-widget:hover{opacity:.9;transform:translateY(-1px)}.btn-add-widget:active{transform:translateY(0)}.main-content .grid-container{flex:1;overflow:auto;border-radius:24px;min-height:0}app-grid{background:transparent;display:block;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: WidgetRendererComponent, selector: "app-widget-renderer", inputs: ["widget", "theme"], outputs: ["editRequested", "removeRequested"] }, { kind: "component", type: CustomGridComponent, selector: "app-grid", inputs: ["widgets", "columns", "gap", "rowHeight", "minItemCols", "minItemRows"], outputs: ["itemChanged", "layoutChanged"] }, { kind: "directive", type: GridCellDirective, selector: "[gridCell]" }] });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;--dash-bg: #000000;--dash-panel-bg: #1c1c1e;--dash-panel-border: rgba(255,255,255,.05);--dash-card-bg: #2c2c2e;--dash-fore-color: #8e8e93;--dash-accent-color: #0a84ff;--dash-accent-tint: rgba(10,132,255,.15);--dash-accent-tint-strong: rgba(10,132,255,.25);--dash-danger-color: #ff453a;--dash-danger-tint: rgba(255,69,58,.22);--dash-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;--dash-tabs-container-color: rgba(44,44,46,.6);--dash-tab-active-color: #3a3a3c;--dash-tab-active-text: #ffffff;--dash-tab-hover-text: #e5e5ea;--dash-tab-hover-bg: rgba(255,255,255,.05);--dash-add-widget-text: #ffffff;--dash-overflow-btn-bg: rgba(255,255,255,.08);--dash-overflow-btn-border: rgba(255,255,255,.12);--dash-overlay-bg: rgba(0,0,0,.55);--dash-sheet-border: rgba(255,255,255,.08);--dash-scrollbar-color: rgba(255,255,255,.15);--dash-popout-title-color: #ffffff;--dash-widget-title-color: #ffffff;--dash-drag-handle-color: rgba(255,255,255,.2);--dash-widget-border-color: rgba(255,255,255,.07);--dash-widget-btn-bg: rgba(255,255,255,.07);--dash-widget-btn-color: rgba(255,255,255,.5);--dash-placeholder-color: #0a84ff;--dash-resize-handle-color: rgba(255,255,255,.25)}.dashboard-wrapper{display:flex;flex:1;min-height:0;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;border-radius:40px;padding:20px;background:var(--dash-panel-bg);border:1px solid var(--dash-panel-border);position:relative}.popout-wrapper{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.popout-header{display:flex;align-items:center;margin-bottom:16px;padding:10px 18px;background:var(--dash-panel-bg);border-radius:20px;border:1px solid var(--dash-panel-border);flex-shrink:0}.popout-title{font-size:16px;font-weight:700;color:var(--dash-popout-title-color)}.popout-wrapper app-grid{flex:1;min-height:0;overflow:auto}.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;flex-shrink:0}.tabs-track{display:flex;align-items:center;gap:6px;flex:1;min-width:0;background:var(--dash-tabs-container-color);backdrop-filter:blur(10px);border-radius:25px;padding:6px;overflow:hidden}.tab{display:flex;align-items:center;gap:4px;padding:8px 14px 8px 18px;border-radius:20px;cursor:pointer;font-size:14px;font-weight:500;color:var(--dash-fore-color);white-space:nowrap;flex-shrink:0;transition:background .2s,color .2s}.tab.active{background:var(--dash-tab-active-color);color:var(--dash-tab-active-text)}.tab:hover:not(.active){color:var(--dash-tab-hover-text);background:var(--dash-tab-hover-bg)}.tab-name{white-space:nowrap}.tab-action{background:transparent;border:none;color:var(--dash-fore-color);padding:2px;font-size:11px;cursor:pointer;opacity:0;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.tab:hover .tab-action{opacity:1}.tab-popout:hover{color:var(--dash-accent-color);background:var(--dash-accent-tint)}.tab-close:hover{color:var(--dash-danger-color);background:var(--dash-danger-tint)}.btn-overflow{display:inline-flex;align-items:center;gap:5px;background:var(--dash-overflow-btn-bg);border:1px solid var(--dash-overflow-btn-border);border-radius:20px;padding:7px 13px;cursor:pointer;font-size:13px;font-weight:600;color:var(--dash-tab-active-text);white-space:nowrap;flex-shrink:0;transition:background .2s,border-color .2s,color .2s}.btn-overflow:hover{background:var(--dash-accent-tint);border-color:var(--dash-accent-color);color:var(--dash-accent-color)}.btn-add-page{background:transparent;border:none;color:var(--dash-fore-color);padding:8px 14px;cursor:pointer;border-radius:20px;flex-shrink:0;transition:all .2s}.btn-add-page:hover{color:var(--dash-accent-color);background:var(--dash-accent-tint)}.tab-switcher-overlay{position:absolute;inset:0;z-index:1000;background:var(--dash-overlay-bg);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding-top:60px;animation:overlay-in .18s ease}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.tab-switcher-sheet{background:var(--dash-panel-bg);border:1px solid var(--dash-sheet-border);border-radius:24px;width:min(520px,calc(100% - 32px));max-height:calc(100% - 80px);display:flex;flex-direction:column;overflow:hidden;animation:sheet-in .22s cubic-bezier(.32,1.2,.5,1)}@keyframes sheet-in{0%{transform:translateY(-16px) scale(.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.tab-switcher-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--dash-sheet-border);flex-shrink:0}.tab-switcher-title{font-size:15px;font-weight:700;color:var(--dash-tab-active-text)}.tab-switcher-close-btn{background:var(--dash-widget-btn-bg);border:none;color:var(--dash-fore-color);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:background .15s,color .15s}.tab-switcher-close-btn:hover{background:var(--dash-danger-tint);color:var(--dash-danger-color)}.tab-switcher-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:16px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--dash-scrollbar-color) transparent}.tab-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px 12px;border-radius:16px;background:var(--dash-card-bg);border:1.5px solid transparent;cursor:pointer;transition:border-color .15s,background .15s,transform .12s;position:relative}.tab-card:hover{background:var(--dash-tab-hover-bg);transform:translateY(-2px)}.tab-card.active{border-color:var(--dash-accent-color);background:var(--dash-accent-tint)}.tab-card-icon{width:44px;height:44px;border-radius:12px;background:var(--dash-widget-btn-bg);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--dash-fore-color)}.tab-card.active .tab-card-icon{background:var(--dash-accent-tint-strong);color:var(--dash-accent-color)}.tab-card-name{font-size:13px;font-weight:500;color:var(--dash-tab-active-text);text-align:center;word-break:break-word;line-height:1.3}.tab-card-actions{display:flex;gap:4px;opacity:0;transition:opacity .15s}.tab-card:hover .tab-card-actions{opacity:1}.tab-card-btn{background:var(--dash-widget-btn-bg);border:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--dash-fore-color);transition:background .15s,color .15s}.tab-card-popout:hover{background:var(--dash-accent-tint-strong);color:var(--dash-accent-color)}.tab-card-remove:hover{background:var(--dash-danger-tint);color:var(--dash-danger-color)}.tab-switcher-footer{padding:12px 16px 16px;border-top:1px solid var(--dash-sheet-border);flex-shrink:0}.tab-switcher-add-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 20px;border-radius:16px;background:var(--dash-accent-tint);border:1.5px dashed var(--dash-accent-tint-strong);color:var(--dash-accent-color);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}.tab-switcher-add-btn:hover{background:var(--dash-accent-tint-strong);border-color:var(--dash-accent-color)}.btn-add-widget{display:flex;align-items:center;gap:6px;background:var(--dash-accent-color);border:none;color:var(--dash-add-widget-text);font-size:14px;font-weight:600;padding:10px 20px;border-radius:22px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:opacity .2s,transform .15s}.btn-add-widget:hover{opacity:.9;transform:translateY(-1px)}.btn-add-widget:active{transform:translateY(0)}.main-content .grid-container{flex:1;overflow:auto;border-radius:24px;min-height:0}app-grid{background:transparent;display:block;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: WidgetRendererComponent, selector: "app-widget-renderer", inputs: ["widget", "theme"], outputs: ["editRequested", "removeRequested"] }, { kind: "component", type: CustomGridComponent, selector: "app-grid", inputs: ["widgets", "columns", "gap", "rowHeight", "minItemCols", "minItemRows"], outputs: ["itemChanged", "layoutChanged"] }, { kind: "directive", type: GridCellDirective, selector: "[gridCell]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-dashboard', template: `
@@ -1151,29 +1297,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
           <header class="dashboard-header">
 
-            <!-- Tabs pill — scrollable, fades when overflowing -->
-            <div class="tabs-scroll-track">
-              <div class="tabs-container" #tabsContainer>
-                <div
-                  *ngFor="let page of pages"
-                  class="tab"
-                  [class.active]="page.id === activePageId"
-                  (click)="onSelectPage(page.id)"
-                >
-                  <span class="tab-name">{{ page.name }}</span>
-                  <button class="tab-action tab-popout" (click)="onPopOut($event, page.id)" title="Open in new window">
-                    <i class="la la-external-link-alt"></i>
-                  </button>
-                  <button class="tab-action tab-close" *ngIf="pages.length > 1" (click)="onRemovePage($event, page.id)" title="Close">
-                    <i class="la la-times"></i>
-                  </button>
-                </div>
-                <button class="btn-add-page" (click)="onAddPage()" title="New workspace">
-                  <i class="la la-plus"></i>
+            <!-- Tab bar -->
+            <div class="tabs-track" #tabsTrack>
+              <!-- Visible tabs -->
+              <div
+                *ngFor="let page of visiblePages"
+                class="tab"
+                [class.active]="page.id === activePageId"
+                (click)="onSelectPage(page.id)"
+              >
+                <span class="tab-name">{{ page.name }}</span>
+                <button class="tab-action tab-popout" (click)="onPopOut($event, page.id)" title="Open in new window">
+                  <i class="la la-external-link-alt"></i>
+                </button>
+                <button class="tab-action tab-close" *ngIf="pages.length > 1" (click)="onRemovePage($event, page.id)" title="Close">
+                  <i class="la la-times"></i>
                 </button>
               </div>
-              <!-- fade hint shown when scrollable -->
-              <div class="tabs-fade-right" *ngIf="tabsOverflow"></div>
+
+              <!-- Overflow button — shown only when there are hidden tabs -->
+              <button
+                *ngIf="hiddenCount > 0"
+                class="btn-overflow"
+                (click)="openTabSwitcher()"
+                title="Show all workspaces"
+              >
+                <span>+{{ hiddenCount }}</span>
+                <i class="la la-th-large"></i>
+              </button>
+
+              <!-- Add page button -->
+              <button class="btn-add-page" (click)="onAddPage()" title="New workspace">
+                <i class="la la-plus"></i>
+              </button>
             </div>
 
             <button class="btn-add-widget" (click)="addWidgetRequested.emit()" title="Add widget">
@@ -1183,6 +1339,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
           </header>
 
+          <!-- ── Tab-switcher overlay (Chrome mobile style) ── -->
+          <div class="tab-switcher-overlay" *ngIf="tabSwitcherOpen" (click)="closeTabSwitcher()">
+            <div class="tab-switcher-sheet" (click)="$event.stopPropagation()">
+
+              <div class="tab-switcher-header">
+                <span class="tab-switcher-title">{{ pages.length }} Workspace{{ pages.length !== 1 ? 's' : '' }}</span>
+                <button class="tab-switcher-close-btn" (click)="closeTabSwitcher()" title="Close">
+                  <i class="la la-times"></i>
+                </button>
+              </div>
+
+              <div class="tab-switcher-grid">
+                <div
+                  *ngFor="let page of pages"
+                  class="tab-card"
+                  [class.active]="page.id === activePageId"
+                  (click)="onSwitcherSelect(page.id)"
+                >
+                  <div class="tab-card-icon">
+                    <i class="la la-th-large"></i>
+                  </div>
+                  <span class="tab-card-name">{{ page.name }}</span>
+                  <div class="tab-card-actions">
+                    <button class="tab-card-btn tab-card-popout" (click)="onSwitcherPopOut($event, page.id)" title="Open in new window">
+                      <i class="la la-external-link-alt"></i>
+                    </button>
+                    <button class="tab-card-btn tab-card-remove" *ngIf="pages.length > 1" (click)="onSwitcherRemove($event, page.id)" title="Close">
+                      <i class="la la-times"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <div class="tab-switcher-footer">
+                <button class="tab-switcher-add-btn" (click)="onSwitcherAdd()">
+                  <i class="la la-plus"></i>
+                  <span>New Workspace</span>
+                </button>
+              </div>
+
+            </div>
+          </div>
+
           <div class="grid-container">
             <app-grid [widgets]="activePage?.widgets || []" (itemChanged)="onItemChanged($event)">
               <ng-template gridCell let-widget="widget">
@@ -1201,7 +1400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </main>
       </div>
     </ng-template>
-  `, styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;--dash-bg: #000000;--dash-panel-bg: #1c1c1e;--dash-card-bg: #2c2c2e;--dash-fore-color: #8e8e93;--dash-accent-color: #0a84ff;--dash-danger-color: #ff453a;--dash-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;--dash-tabs-container-color: rgba(44,44,46,.6);--dash-tab-active-color: #3a3a3c;--dash-tab-active-text: #ffffff;--dash-tab-hover-text: #e5e5ea;--dash-add-widget-text: #ffffff;--dash-popout-title-color: #ffffff;--dash-widget-title-color: #ffffff;--dash-drag-handle-color: rgba(255,255,255,.2);--dash-widget-border-color: rgba(255,255,255,.07);--dash-widget-btn-bg: rgba(255,255,255,.07);--dash-widget-btn-color: rgba(255,255,255,.5);--dash-placeholder-color: #0a84ff;--dash-resize-handle-color: rgba(255,255,255,.25)}.dashboard-wrapper{display:flex;flex:1;min-height:0;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;border-radius:40px;padding:20px;background:var(--dash-panel-bg);border:1px solid rgba(255,255,255,.05)}.popout-wrapper{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.popout-header{display:flex;align-items:center;margin-bottom:16px;padding:10px 18px;background:var(--dash-panel-bg);border-radius:20px;border:1px solid rgba(255,255,255,.06);flex-shrink:0}.popout-title{font-size:16px;font-weight:700;color:var(--dash-popout-title-color)}.popout-wrapper app-grid{flex:1;min-height:0;overflow:auto}.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;flex-shrink:0}.tabs-scroll-track{position:relative;flex:1;min-width:0}.tabs-container{display:flex;align-items:center;gap:8px;background:var(--dash-tabs-container-color);backdrop-filter:blur(10px);border-radius:25px;padding:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.tabs-container::-webkit-scrollbar{display:none}.tabs-fade-right{position:absolute;top:0;right:0;width:60px;height:100%;border-radius:0 25px 25px 0;pointer-events:none;background:linear-gradient(to right,transparent,var(--dash-panel-bg))}.tab{display:flex;align-items:center;gap:4px;padding:8px 14px 8px 18px;border-radius:20px;cursor:pointer;font-size:14px;font-weight:500;color:var(--dash-fore-color);white-space:nowrap;flex-shrink:0;transition:all .2s}.tab.active{background:var(--dash-tab-active-color);color:var(--dash-tab-active-text)}.tab:hover:not(.active){color:var(--dash-tab-hover-text);background:rgba(255,255,255,.05)}.tab-name{flex:1;white-space:nowrap}.tab-action{background:transparent;border:none;color:var(--dash-fore-color);padding:2px;font-size:11px;cursor:pointer;opacity:0;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.tab:hover .tab-action{opacity:1}.tab-popout:hover{color:var(--dash-accent-color);background:rgba(10,132,255,.18)}.tab-close:hover{color:var(--dash-danger-color);background:rgba(255,69,58,.2)}.btn-add-page{background:transparent;border:none;color:var(--dash-fore-color);padding:8px 16px;cursor:pointer;border-radius:20px;flex-shrink:0;transition:all .2s}.btn-add-page:hover{color:var(--dash-accent-color);background:rgba(10,132,255,.1)}.btn-add-widget{display:flex;align-items:center;gap:6px;background:var(--dash-accent-color);border:none;color:var(--dash-add-widget-text);font-size:14px;font-weight:600;padding:10px 20px;border-radius:22px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:opacity .2s,transform .15s}.btn-add-widget:hover{opacity:.9;transform:translateY(-1px)}.btn-add-widget:active{transform:translateY(0)}.main-content .grid-container{flex:1;overflow:auto;border-radius:24px;min-height:0}app-grid{background:transparent;display:block;height:100%;width:100%}\n"] }]
+  `, styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;--dash-bg: #000000;--dash-panel-bg: #1c1c1e;--dash-panel-border: rgba(255,255,255,.05);--dash-card-bg: #2c2c2e;--dash-fore-color: #8e8e93;--dash-accent-color: #0a84ff;--dash-accent-tint: rgba(10,132,255,.15);--dash-accent-tint-strong: rgba(10,132,255,.25);--dash-danger-color: #ff453a;--dash-danger-tint: rgba(255,69,58,.22);--dash-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;--dash-tabs-container-color: rgba(44,44,46,.6);--dash-tab-active-color: #3a3a3c;--dash-tab-active-text: #ffffff;--dash-tab-hover-text: #e5e5ea;--dash-tab-hover-bg: rgba(255,255,255,.05);--dash-add-widget-text: #ffffff;--dash-overflow-btn-bg: rgba(255,255,255,.08);--dash-overflow-btn-border: rgba(255,255,255,.12);--dash-overlay-bg: rgba(0,0,0,.55);--dash-sheet-border: rgba(255,255,255,.08);--dash-scrollbar-color: rgba(255,255,255,.15);--dash-popout-title-color: #ffffff;--dash-widget-title-color: #ffffff;--dash-drag-handle-color: rgba(255,255,255,.2);--dash-widget-border-color: rgba(255,255,255,.07);--dash-widget-btn-bg: rgba(255,255,255,.07);--dash-widget-btn-color: rgba(255,255,255,.5);--dash-placeholder-color: #0a84ff;--dash-resize-handle-color: rgba(255,255,255,.25)}.dashboard-wrapper{display:flex;flex:1;min-height:0;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;border-radius:40px;padding:20px;background:var(--dash-panel-bg);border:1px solid var(--dash-panel-border);position:relative}.popout-wrapper{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.popout-header{display:flex;align-items:center;margin-bottom:16px;padding:10px 18px;background:var(--dash-panel-bg);border-radius:20px;border:1px solid var(--dash-panel-border);flex-shrink:0}.popout-title{font-size:16px;font-weight:700;color:var(--dash-popout-title-color)}.popout-wrapper app-grid{flex:1;min-height:0;overflow:auto}.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;flex-shrink:0}.tabs-track{display:flex;align-items:center;gap:6px;flex:1;min-width:0;background:var(--dash-tabs-container-color);backdrop-filter:blur(10px);border-radius:25px;padding:6px;overflow:hidden}.tab{display:flex;align-items:center;gap:4px;padding:8px 14px 8px 18px;border-radius:20px;cursor:pointer;font-size:14px;font-weight:500;color:var(--dash-fore-color);white-space:nowrap;flex-shrink:0;transition:background .2s,color .2s}.tab.active{background:var(--dash-tab-active-color);color:var(--dash-tab-active-text)}.tab:hover:not(.active){color:var(--dash-tab-hover-text);background:var(--dash-tab-hover-bg)}.tab-name{white-space:nowrap}.tab-action{background:transparent;border:none;color:var(--dash-fore-color);padding:2px;font-size:11px;cursor:pointer;opacity:0;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.tab:hover .tab-action{opacity:1}.tab-popout:hover{color:var(--dash-accent-color);background:var(--dash-accent-tint)}.tab-close:hover{color:var(--dash-danger-color);background:var(--dash-danger-tint)}.btn-overflow{display:inline-flex;align-items:center;gap:5px;background:var(--dash-overflow-btn-bg);border:1px solid var(--dash-overflow-btn-border);border-radius:20px;padding:7px 13px;cursor:pointer;font-size:13px;font-weight:600;color:var(--dash-tab-active-text);white-space:nowrap;flex-shrink:0;transition:background .2s,border-color .2s,color .2s}.btn-overflow:hover{background:var(--dash-accent-tint);border-color:var(--dash-accent-color);color:var(--dash-accent-color)}.btn-add-page{background:transparent;border:none;color:var(--dash-fore-color);padding:8px 14px;cursor:pointer;border-radius:20px;flex-shrink:0;transition:all .2s}.btn-add-page:hover{color:var(--dash-accent-color);background:var(--dash-accent-tint)}.tab-switcher-overlay{position:absolute;inset:0;z-index:1000;background:var(--dash-overlay-bg);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding-top:60px;animation:overlay-in .18s ease}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.tab-switcher-sheet{background:var(--dash-panel-bg);border:1px solid var(--dash-sheet-border);border-radius:24px;width:min(520px,calc(100% - 32px));max-height:calc(100% - 80px);display:flex;flex-direction:column;overflow:hidden;animation:sheet-in .22s cubic-bezier(.32,1.2,.5,1)}@keyframes sheet-in{0%{transform:translateY(-16px) scale(.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.tab-switcher-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--dash-sheet-border);flex-shrink:0}.tab-switcher-title{font-size:15px;font-weight:700;color:var(--dash-tab-active-text)}.tab-switcher-close-btn{background:var(--dash-widget-btn-bg);border:none;color:var(--dash-fore-color);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:background .15s,color .15s}.tab-switcher-close-btn:hover{background:var(--dash-danger-tint);color:var(--dash-danger-color)}.tab-switcher-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:16px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--dash-scrollbar-color) transparent}.tab-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px 12px;border-radius:16px;background:var(--dash-card-bg);border:1.5px solid transparent;cursor:pointer;transition:border-color .15s,background .15s,transform .12s;position:relative}.tab-card:hover{background:var(--dash-tab-hover-bg);transform:translateY(-2px)}.tab-card.active{border-color:var(--dash-accent-color);background:var(--dash-accent-tint)}.tab-card-icon{width:44px;height:44px;border-radius:12px;background:var(--dash-widget-btn-bg);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--dash-fore-color)}.tab-card.active .tab-card-icon{background:var(--dash-accent-tint-strong);color:var(--dash-accent-color)}.tab-card-name{font-size:13px;font-weight:500;color:var(--dash-tab-active-text);text-align:center;word-break:break-word;line-height:1.3}.tab-card-actions{display:flex;gap:4px;opacity:0;transition:opacity .15s}.tab-card:hover .tab-card-actions{opacity:1}.tab-card-btn{background:var(--dash-widget-btn-bg);border:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--dash-fore-color);transition:background .15s,color .15s}.tab-card-popout:hover{background:var(--dash-accent-tint-strong);color:var(--dash-accent-color)}.tab-card-remove:hover{background:var(--dash-danger-tint);color:var(--dash-danger-color)}.tab-switcher-footer{padding:12px 16px 16px;border-top:1px solid var(--dash-sheet-border);flex-shrink:0}.tab-switcher-add-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 20px;border-radius:16px;background:var(--dash-accent-tint);border:1.5px dashed var(--dash-accent-tint-strong);color:var(--dash-accent-color);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}.tab-switcher-add-btn:hover{background:var(--dash-accent-tint-strong);border-color:var(--dash-accent-color)}.btn-add-widget{display:flex;align-items:center;gap:6px;background:var(--dash-accent-color);border:none;color:var(--dash-add-widget-text);font-size:14px;font-weight:600;padding:10px 20px;border-radius:22px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:opacity .2s,transform .15s}.btn-add-widget:hover{opacity:.9;transform:translateY(-1px)}.btn-add-widget:active{transform:translateY(0)}.main-content .grid-container{flex:1;overflow:auto;border-radius:24px;min-height:0}app-grid{background:transparent;display:block;height:100%;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: DashboardStateService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { initialLayout: [{
                 type: Input
             }], theme: [{
@@ -1213,9 +1412,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], cellTemplate: [{
                 type: ContentChild,
                 args: [GridCellDirective, { read: TemplateRef }]
-            }], tabsContainerRef: [{
+            }], tabsTrackRef: [{
                 type: ViewChild,
-                args: ['tabsContainer']
+                args: ['tabsTrack']
+            }], onEscapeKey: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
             }] } });
 
 class DashboardModule {