@memberjunction/ng-explorer-core 5.49.0 → 5.50.0

package/dist/lib/shell/components/header/app-switcher.component.js

@@ -1,85 +1,433 @@
-import { Component, Input, Output, EventEmitter, HostListener, ViewChild } from '@angular/core';
-import { UUIDsEqual } from '@memberjunction/global';
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { BaseAngularComponent } from '@memberjunction/ng-base-types';
+import { UserAppConfigContentComponent } from '@memberjunction/ng-explorer-settings';
+import { UUIDsEqual, NormalizeUUID } from '@memberjunction/global';
+import { UserInfoEngine } from '@memberjunction/core-entities';
+import { Subject, takeUntil } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-base-application";
-import * as i2 from "@memberjunction/ng-ui-components";
-import * as i3 from "@memberjunction/ng-explorer-settings";
-const _c0 = ["appConfigDialog"];
-function AppSwitcherComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 3);
-} }
+import * as i2 from "@angular/common";
+import * as i3 from "@memberjunction/ng-ui-components";
+import * as i4 from "@memberjunction/ng-explorer-settings";
+const _c0 = ["filterInput"];
+const _c1 = ["trigger"];
+const _c2 = ["panel"];
+const _c3 = (a0, a1) => ({ $implicit: a0, idx: a1 });
+const _forTrack0 = ($index, $item) => $item.ID;
 function AppSwitcherComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 8);
+    i0.ɵɵelement(0, "i", 6);
+} }
+function AppSwitcherComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 11);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassMap((ctx_r1.activeApp == null ? null : ctx_r1.activeApp.Icon) || "fa-solid fa-cube");
-    i0.ɵɵstyleProp("color", ctx_r1.activeApp == null ? null : ctx_r1.activeApp.GetColor())("--active-color", ctx_r1.activeApp == null ? null : ctx_r1.activeApp.GetColor());
-} }
-function AppSwitcherComponent_Conditional_5_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 15);
+    i0.ɵɵstyleProp("color", ctx_r1.activeApp == null ? null : ctx_r1.activeApp.GetColor());
 } }
-function AppSwitcherComponent_Conditional_5_For_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i");
-} if (rf & 2) {
-    const app_r5 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassMap(app_r5.Icon || "fa-solid fa-cube");
+function AppSwitcherComponent_Conditional_8_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵelement(1, "i", 21);
+    i0.ɵɵelementStart(2, "span", 22);
+    i0.ɵɵtext(3, "You have unsaved changes.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 23);
+    i0.ɵɵlistener("click", function AppSwitcherComponent_Conditional_8_Conditional_2_Conditional_7_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ConfirmDiscard()); });
+    i0.ɵɵtext(5, "Discard");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 24);
+    i0.ɵɵlistener("click", function AppSwitcherComponent_Conditional_8_Conditional_2_Conditional_7_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.CancelDiscard()); });
+    i0.ɵɵtext(7, "Keep editing");
+    i0.ɵɵelementEnd()();
 } }
-function AppSwitcherComponent_Conditional_5_For_3_Template(rf, ctx) { if (rf & 1) {
+function AppSwitcherComponent_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵlistener("click", function AppSwitcherComponent_Conditional_5_For_3_Template_div_click_0_listener() { const app_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectApp(app_r5)); });
-    i0.ɵɵconditionalCreate(1, AppSwitcherComponent_Conditional_5_For_3_Conditional_1_Template, 1, 0, "i", 15);
-    i0.ɵɵconditionalCreate(2, AppSwitcherComponent_Conditional_5_For_3_Conditional_2_Template, 1, 2, "i", 16);
-    i0.ɵɵelementStart(3, "span");
-    i0.ɵɵtext(4);
+    i0.ɵɵelementStart(0, "div", 13)(1, "button", 14);
+    i0.ɵɵlistener("click", function AppSwitcherComponent_Conditional_8_Conditional_2_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.RequestExitConfigMode()); });
+    i0.ɵɵelement(2, "i", 15);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "h2", 16);
+    i0.ɵɵtext(4, "Configure apps");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 17);
+    i0.ɵɵlistener("click", function AppSwitcherComponent_Conditional_8_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.CloseLauncher()); });
+    i0.ɵɵelement(6, "i", 18);
     i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(7, AppSwitcherComponent_Conditional_8_Conditional_2_Conditional_7_Template, 8, 0, "div", 19);
+    i0.ɵɵelementStart(8, "mj-user-app-config-content", 20);
+    i0.ɵɵlistener("Saved", function AppSwitcherComponent_Conditional_8_Conditional_2_Template_mj_user_app_config_content_Saved_8_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ExitConfigMode()); })("Cancelled", function AppSwitcherComponent_Conditional_8_Conditional_2_Template_mj_user_app_config_content_Cancelled_8_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.RequestExitConfigMode()); });
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const app_r5 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("--item-color", app_r5.GetColor());
-    i0.ɵɵclassProp("active", ctx_r1.IsActiveApp(app_r5))("loading", ctx_r1.IsLoadingApp(app_r5));
-    i0.ɵɵproperty("mjClickable", app_r5.Name)("testId", "app-switcher-item-" + app_r5.Name);
-    i0.ɵɵattribute("aria-current", ctx_r1.IsActiveApp(app_r5) ? "true" : null);
+    i0.ɵɵadvance(7);
+    i0.ɵɵconditional(ctx_r1.PendingDiscard ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.IsLoadingApp(app_r5) ? 1 : -1);
+    i0.ɵɵproperty("Provider", ctx_r1.Provider);
+} }
+function AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 25)(1, "div", 32);
+    i0.ɵɵelement(2, "i", 33);
+    i0.ɵɵelementStart(3, "input", 34, 3);
+    i0.ɵɵlistener("input", function AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_0_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnFilterInput($event)); })("keydown", function AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_0_Template_input_keydown_3_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnFilterKeydown($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "button", 17);
+    i0.ɵɵlistener("click", function AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_0_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.CloseLauncher()); });
+    i0.ɵɵelement(6, "i", 18);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", ctx_r1.FilterText);
+} }
+function AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_2_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_2_For_2_ng_container_0_Template, 1, 0, "ng-container", 37);
+} if (rf & 2) {
+    const app_r8 = ctx.$implicit;
+    const ɵ$index_68_r9 = ctx.$index;
+    i0.ɵɵnextContext(4);
+    const appCard_r10 = i0.ɵɵreference(10);
+    i0.ɵɵproperty("ngTemplateOutlet", appCard_r10)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c3, app_r8, ɵ$index_68_r9));
+} }
+function AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 36);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.IsLoadingApp(app_r5) ? 2 : -1);
+    i0.ɵɵtextInterpolate1("No apps match \"", ctx_r1.FilterText, "\"");
+} }
+function AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵrepeaterCreate(1, AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_2_For_2_Template, 1, 5, "ng-container", null, _forTrack0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_2_Conditional_3_Template, 2, 1, "div", 36);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.VisibleApps);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(app_r5.Name);
+    i0.ɵɵconditional(ctx_r1.VisibleApps.length === 0 ? 3 : -1);
 } }
-function AppSwitcherComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 6)(1, "div", 9);
-    i0.ɵɵrepeaterCreate(2, AppSwitcherComponent_Conditional_5_For_3_Template, 5, 12, "div", 10, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "div", 11);
-    i0.ɵɵelementStart(5, "div", 12);
-    i0.ɵɵlistener("click", function AppSwitcherComponent_Conditional_5_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openConfigDialog()); });
-    i0.ɵɵelement(6, "i", 13);
-    i0.ɵɵelementStart(7, "span");
-    i0.ɵɵtext(8, "Configure...");
+function AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_3_Conditional_0_For_4_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_3_Conditional_0_For_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_3_Conditional_0_For_4_ng_container_0_Template, 1, 0, "ng-container", 37);
+} if (rf & 2) {
+    const app_r12 = ctx.$implicit;
+    const ɵ$index_84_r13 = ctx.$index;
+    i0.ɵɵnextContext(5);
+    const appCard_r10 = i0.ɵɵreference(10);
+    i0.ɵɵproperty("ngTemplateOutlet", appCard_r10)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c3, app_r12, ɵ$index_84_r13));
+} }
+function AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵtext(1, "Recent");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "div", 43);
+    i0.ɵɵrepeaterCreate(3, AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_3_Conditional_0_For_4_Template, 1, 5, "ng-container", null, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.RecentApps);
+} }
+function AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_3_For_8_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_3_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_3_For_8_ng_container_0_Template, 1, 0, "ng-container", 37);
+} if (rf & 2) {
+    const app_r14 = ctx.$implicit;
+    const ɵ$index_100_r15 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    const appCard_r10 = i0.ɵɵreference(10);
+    i0.ɵɵproperty("ngTemplateOutlet", appCard_r10)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c3, app_r14, ɵ$index_100_r15 + ctx_r1.RecentApps.length));
+} }
+function AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 36);
+    i0.ɵɵtext(1, " No applications are enabled for you yet \u2014 use Configure\u2026 below to add some. ");
+    i0.ɵɵelementEnd();
+} }
+function AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_3_Conditional_0_Template, 5, 0);
+    i0.ɵɵelementStart(1, "div", 38)(2, "span");
+    i0.ɵɵtext(3, "All apps");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 39);
+    i0.ɵɵlistener("click", function AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_3_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ToggleSortMode()); });
+    i0.ɵɵelement(5, "i", 40);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 41);
+    i0.ɵɵrepeaterCreate(7, AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_3_For_8_Template, 1, 5, "ng-container", null, _forTrack0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(9, AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_3_Conditional_9_Template, 2, 0, "div", 36);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional(ctx_r1.RecentApps.length > 0 ? 0 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("title", ctx_r1.SortMode === "alpha" ? "Sorted A\u2013Z \u2014 click for your custom order" : "Custom order \u2014 click for A\u2013Z");
+    i0.ɵɵattribute("aria-pressed", ctx_r1.SortMode === "alpha")("aria-label", ctx_r1.SortMode === "alpha" ? "Sorted alphabetically \u2014 switch to your custom order" : "Sorted by your custom order \u2014 switch to alphabetical");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.SortMode === "alpha" ? "fa-solid fa-arrow-down-a-z" : "fa-solid fa-bars-staggered");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.OtherApps);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.VisibleApps.length === 0 ? 9 : -1);
+} }
+function AppSwitcherComponent_Conditional_8_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_0_Template, 7, 1, "div", 25);
+    i0.ɵɵelementStart(1, "div", 26);
+    i0.ɵɵconditionalCreate(2, AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_2_Template, 4, 1)(3, AppSwitcherComponent_Conditional_8_Conditional_3_Conditional_3_Template, 10, 7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 27)(5, "span", 28)(6, "span")(7, "kbd");
+    i0.ɵɵtext(8, "\u2191");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "kbd");
+    i0.ɵɵtext(10, "\u2193");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(11, " navigate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "span")(13, "kbd");
+    i0.ɵɵtext(14, "\u21B5");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(15, " open");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "span")(17, "kbd");
+    i0.ɵɵtext(18, "esc");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(19, " close");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(20, "button", 29);
+    i0.ɵɵlistener("click", function AppSwitcherComponent_Conditional_8_Conditional_3_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.EnterConfigMode()); });
+    i0.ɵɵelement(21, "i", 30);
+    i0.ɵɵelementStart(22, "span");
+    i0.ɵɵtext(23, "Configure\u2026");
     i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(24, "span", 31);
+    i0.ɵɵtext(25);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.ShowFilter ? 0 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.IsFiltering ? 2 : 3);
+    i0.ɵɵadvance(23);
+    i0.ɵɵtextInterpolate1("", ctx_r1.AnnouncedAppCount, " applications available");
+} }
+function AppSwitcherComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "dialog", 12, 2);
+    i0.ɵɵlistener("click", function AppSwitcherComponent_Conditional_8_Template_dialog_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDialogClick($event)); })("cancel", function AppSwitcherComponent_Conditional_8_Template_dialog_cancel_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDialogCancel($event)); })("keydown", function AppSwitcherComponent_Conditional_8_Template_dialog_keydown_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnPanelKeydown($event)); });
+    i0.ɵɵconditionalCreate(2, AppSwitcherComponent_Conditional_8_Conditional_2_Template, 9, 2)(3, AppSwitcherComponent_Conditional_8_Conditional_3_Template, 26, 3);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("--anchor-left", ctx_r1.AnchorLeft + "px")("--anchor-top", ctx_r1.AnchorTop + "px");
+    i0.ɵɵclassProp("launcher-panel--compact", ctx_r1.CompactMode && !ctx_r1.ConfigMode);
+    i0.ɵɵattribute("aria-label", ctx_r1.ConfigMode ? null : "Application launcher")("aria-labelledby", ctx_r1.ConfigMode ? "mj-launcher-config-title" : null);
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r1.apps);
+    i0.ɵɵconditional(ctx_r1.ConfigMode ? 2 : 3);
+} }
+function AppSwitcherComponent_ng_template_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 46);
+} }
+function AppSwitcherComponent_ng_template_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 40);
+} if (rf & 2) {
+    const app_r17 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap(app_r17.Icon || "fa-solid fa-cube");
+} }
+function AppSwitcherComponent_ng_template_9_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r18 = i0.ɵɵnextContext();
+    const app_r17 = ctx_r18.$implicit;
+    const idx_r18 = ctx_r18.idx;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("id", ctx_r1.OptionId(idx_r18) + "-desc");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(app_r17.Description);
 } }
+function AppSwitcherComponent_ng_template_9_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 44);
+    i0.ɵɵlistener("click", function AppSwitcherComponent_ng_template_9_Template_div_click_0_listener() { const app_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectApp(app_r17)); })("keydown", function AppSwitcherComponent_ng_template_9_Template_div_keydown_0_listener($event) { const idx_r18 = i0.ɵɵrestoreView(_r16).idx; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnCardKeydown(idx_r18, $event)); });
+    i0.ɵɵelementStart(1, "div", 45);
+    i0.ɵɵconditionalCreate(2, AppSwitcherComponent_ng_template_9_Conditional_2_Template, 1, 0, "i", 46)(3, AppSwitcherComponent_ng_template_9_Conditional_3_Template, 1, 2, "i", 47);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 48)(5, "div", 49)(6, "span", 50);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(8, AppSwitcherComponent_ng_template_9_Conditional_8_Template, 2, 2, "div", 51);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const app_r17 = ctx.$implicit;
+    const idx_r18 = ctx.idx;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("--app-color", app_r17.GetColor());
+    i0.ɵɵclassProp("active", ctx_r1.IsActiveApp(app_r17))("loading", ctx_r1.IsLoadingApp(app_r17));
+    i0.ɵɵproperty("id", ctx_r1.OptionId(idx_r18))("mjClickable", app_r17.Name)("testId", "app-switcher-item-" + app_r17.Name);
+    i0.ɵɵattribute("aria-current", ctx_r1.IsActiveApp(app_r17) ? "true" : null)("aria-describedby", app_r17.Description ? ctx_r1.OptionId(idx_r18) + "-desc" : null);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.IsLoadingApp(app_r17) ? 2 : 3);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(app_r17.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(app_r17.Description ? 8 : -1);
+} }
+/** UserInfoEngine setting key holding the recently-switched-to apps */
+const RECENT_APPS_KEY = 'mj.shell.recentApps.v1';
+/** UserInfoEngine setting key for the launcher's All-apps sort preference */
+const LAUNCHER_SORT_KEY = 'mj.shell.launcherSort.v1';
+/** How many recent entries to persist (display shows fewer) */
+const RECENT_STORE_MAX = 8;
+/** How many recent cards to display */
+const RECENT_DISPLAY_MAX = 3;
+/** 'auto' style: below this many apps the compact anchored panel is used */
+const COMPACT_AUTO_THRESHOLD = 8;
+/** Compact mode: the filter input appears only at or above this many apps */
+const COMPACT_FILTER_THRESHOLD = 10;
 /**
- * App switcher dropdown in the header.
- * Displays current app and allows switching between apps.
+ * App switcher in the header: the trigger shows the active app's identity
+ * glyph; activating it opens a centered launcher overlay — a filterable grid
+ * of app cards (identity glyph + name + Description summary), with the user's
+ * most recently used apps surfaced first.
+ *
+ * Rendering model: the panel is a native <dialog> opened with showModal(),
+ * so it lives in the browser's TOP LAYER — above every stacking context in
+ * the app (the shell header's z-index:500 context, chat FAB, toasts). The
+ * modal state also makes the rest of the document inert (focus cannot
+ * escape) and the browser restores focus to the trigger on close.
+ *
+ * Accessibility model: every app card is a real focusable control (via
+ * mjClickable), so Tab walks filter → close → cards → Configure, and
+ * Enter/Space activate the focused card. Arrow keys are the fast path:
+ * ArrowDown from the filter focuses the first card; arrows move between
+ * cards; ArrowUp from the first card returns to the filter. Escape layers:
+ * discard-bar → config view → filter → close. Exiting the config view with
+ * unsaved changes shows an inline discard bar (a body-appended confirm
+ * dialog would be inert/beneath the top layer).
  */
-export class AppSwitcherComponent {
+export class AppSwitcherComponent extends BaseAngularComponent {
     appManager;
+    cdr;
+    destroy$ = new Subject();
     activeApp = null;
     isViewingSystemTab = false;
     /** ID of the app currently being loaded (shows loading indicator) */
     loadingAppId = null;
+    /** Presentation style (from Shell.AppSwitcher.Style instance config) */
+    SwitcherStyle = 'auto';
     appSelected = new EventEmitter();
-    appConfigDialog;
+    filterInputRef;
+    triggerRef;
+    panelRef;
+    configContent;
     showDropdown = false;
-    showConfigDialog = false;
-    constructor(appManager) {
+    /** When true, the launcher body shows the app-configuration view instead of the card grid */
+    ConfigMode = false;
+    /** Pending action awaiting the inline unsaved-changes discard bar ('exit' = back to grid, 'close' = close launcher) */
+    PendingDiscard = null;
+    /** True when the panel renders as the compact anchored dropdown (few apps) */
+    CompactMode = false;
+    /** All-apps sort: the user's configured order ('custom') or A–Z ('alpha').
+     *  Per-user preference, persisted via UserInfoEngine. */
+    SortMode = 'custom';
+    /** Anchor position for the compact panel (px, from the trigger's rect) */
+    AnchorLeft = 0;
+    AnchorTop = 0;
+    /** Live filter text — matches app names AND Description summaries */
+    FilterText = '';
+    recentEntries = [];
+    constructor(appManager, cdr) {
+        super();
         this.appManager = appManager;
+        this.cdr = cdr;
+    }
+    /**
+     * UserInfoEngine scoped to this component's provider (multi-provider rule:
+     * never reach for the global singleton in per-provider code paths). For the
+     * default single-provider shell this resolves to the already-loaded engine
+     * registered under the default connection. When no provider is available at
+     * all (test environments), fall back to the global singleton rather than
+     * letting GetProviderInstance construct a fresh unloaded engine.
+     */
+    get userInfoEngine() {
+        const provider = this.ProviderToUse;
+        return provider
+            ? UserInfoEngine.GetProviderInstance(provider, UserInfoEngine)
+            : UserInfoEngine.Instance;
+    }
+    ngOnInit() {
+        // The launcher's presentation (compact vs full, filter visibility) is
+        // resolved from the app COUNT — which can change while the panel is open
+        // (the user saves config changes that cross the auto threshold). React to
+        // the same stream the app list uses so the presentation can't go stale.
+        // Optional-chained: lightweight test stubs may not provide the observable.
+        this.appManager.Applications?.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            if (this.showDropdown) {
+                this.RefreshPresentation();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /**
+     * Re-resolve the presentation for the CURRENT app count. No-op while the
+     * config view is open (the panel is promoted to full size there anyway);
+     * called when the app stream emits and when the config view exits.
+     */
+    RefreshPresentation() {
+        if (this.ConfigMode) {
+            return;
+        }
+        const wasCompact = this.CompactMode;
+        this.CompactMode = this.resolveCompactMode();
+        if (this.CompactMode && !wasCompact) {
+            this.computeCompactAnchor();
+        }
+        // Mode flips can add/remove the filter input — if the focused element got
+        // torn out of the DOM, focus would drop into the inert background. Re-home
+        // it after the view settles.
+        // Zoneless: an RxJS-driven mutation needs an explicit CD kick (same
+        // pattern as AppNavComponent's workspace subscription).
+        this.cdr.markForCheck();
+        try {
+            this.cdr.detectChanges();
+        }
+        catch {
+            // Re-entrant CD — harmless.
+        }
+        if (wasCompact !== this.CompactMode) {
+            requestAnimationFrame(() => {
+                const panel = this.panelRef?.nativeElement;
+                if (panel && !panel.contains(document.activeElement)) {
+                    if (this.ShowFilter) {
+                        this.filterInputRef?.nativeElement?.focus();
+                    }
+                    else {
+                        panel.querySelector('.app-card')?.focus();
+                    }
+                }
+            });
+        }
+    }
+    /** Template handler for the filter input's input event */
+    OnFilterInput(event) {
+        this.FilterText = event.target.value;
+        this.OnFilterChange();
     }
     /**
      * Check if the app switcher should show loading state
@@ -88,24 +436,331 @@ export class AppSwitcherComponent {
         return this.loadingAppId !== null;
     }
     /**
-     * Get applications that should appear in the app switcher dropdown
+     * Visible trigger label: the current app's name, or "Apps" when there's no
+     * app context (system tabs, nothing active yet).
+     */
+    get TriggerLabel() {
+        return this.activeApp && !this.isViewingSystemTab ? this.activeApp.Name : 'Apps';
+    }
+    /** Accessible name for the trigger — names the control AND the current app */
+    get TriggerAriaLabel() {
+        return this.activeApp && !this.isViewingSystemTab
+            ? `Switch application — current: ${this.activeApp.Name}`
+            : 'Switch application';
+    }
+    /**
+     * Get applications that should appear in the app switcher
      * (NavigationStyle = 'App Switcher' or 'Both')
      */
     get apps() {
         return this.appManager.GetAppSwitcherApps();
     }
-    /**
-     * Toggle dropdown visibility
-     */
-    toggleDropdown() {
-        this.showDropdown = !this.showDropdown;
+    /** Recently-used apps (persisted per user), newest first, capped for display.
+     *  Compact mode skips the Recent section — with a handful of apps it's noise. */
+    get RecentApps() {
+        if (this.CompactMode) {
+            return [];
+        }
+        const byId = new Map(this.apps.map(a => [NormalizeUUID(a.ID), a]));
+        const result = [];
+        for (const entry of this.recentEntries) {
+            const app = byId.get(NormalizeUUID(entry.id));
+            if (app) {
+                result.push(app);
+                if (result.length >= RECENT_DISPLAY_MAX) {
+                    break;
+                }
+            }
+        }
+        return this.applyFilter(result);
+    }
+    /** All switcher apps in the user's chosen sort (custom Sequence order or A–Z) */
+    get sortedApps() {
+        return this.SortMode === 'alpha'
+            ? [...this.apps].sort((a, b) => a.Name.localeCompare(b.Name))
+            : this.apps;
+    }
+    /** The complete "All apps" section, in the user's chosen sort. Apps shown in
+     *  Recent appear here TOO — being recently used must not make an app vanish
+     *  from its expected place in the full list. */
+    get OtherApps() {
+        return this.applyFilter(this.sortedApps);
+    }
+    /** Flat visible list in RENDERED card order — the keyboard-navigation index
+     *  space. Filtering collapses the sections into one deduplicated list;
+     *  otherwise it's Recent followed by the full All-apps list (a recent app
+     *  intentionally appears twice, matching the two cards on screen). */
+    get VisibleApps() {
+        if (this.IsFiltering) {
+            return this.applyFilter(this.sortedApps);
+        }
+        return [...this.RecentApps, ...this.OtherApps];
+    }
+    /** Distinct app count for the screen-reader status (VisibleApps can contain
+     *  the same app twice when it's in both Recent and All apps) */
+    get AnnouncedAppCount() {
+        return this.IsFiltering ? this.VisibleApps.length : this.applyFilter(this.apps).length;
+    }
+    /** True when a filter is active (sections collapse into one result list) */
+    get IsFiltering() {
+        return this.FilterText.trim().length > 0;
+    }
+    /** Compact mode hides the filter under a handful of apps — it's noise there */
+    get ShowFilter() {
+        return !this.CompactMode || this.apps.length >= COMPACT_FILTER_THRESHOLD;
+    }
+    applyFilter(apps) {
+        const q = this.FilterText.trim().toLowerCase();
+        if (!q) {
+            return apps;
+        }
+        return apps.filter(a => a.Name.toLowerCase().includes(q) || (a.Description || '').toLowerCase().includes(q));
+    }
+    /** Stable DOM id for a card (arrow-key focus target) */
+    OptionId(index) {
+        return `mj-launcher-opt-${index}`;
+    }
+    /** Trigger handler: open the launcher panel, or close it if already open */
+    ToggleLauncher() {
+        if (this.showDropdown) {
+            this.closeLauncher();
+        }
+        else {
+            this.openLauncher();
+        }
+    }
+    /** Flip the All-apps sort and persist it (fail-silent, like recents) */
+    ToggleSortMode() {
+        this.SortMode = this.SortMode === 'alpha' ? 'custom' : 'alpha';
+        try {
+            this.userInfoEngine.SetSettingDebounced(LAUNCHER_SORT_KEY, this.SortMode);
+        }
+        catch {
+            // Preference persistence must never break the launcher
+        }
+    }
+    loadSortMode() {
+        try {
+            this.SortMode = this.userInfoEngine.GetSetting(LAUNCHER_SORT_KEY) === 'alpha' ? 'alpha' : 'custom';
+        }
+        catch {
+            this.SortMode = 'custom';
+        }
+    }
+    openLauncher() {
+        this.loadRecents();
+        this.loadSortMode();
+        this.FilterText = '';
+        this.ConfigMode = false;
+        this.PendingDiscard = null;
+        this.CompactMode = this.resolveCompactMode();
+        if (this.CompactMode) {
+            this.computeCompactAnchor();
+        }
+        this.showDropdown = true;
+        // The dialog element renders under @if next frame: put it in the top
+        // layer via showModal() (jsdom fallback: plain open attribute), then
+        // focus the filter (or the first card when compact mode hides it).
+        requestAnimationFrame(() => {
+            const dialog = this.panelRef?.nativeElement;
+            if (dialog && !dialog.open) {
+                if (typeof dialog.showModal === 'function') {
+                    dialog.showModal();
+                }
+                else {
+                    dialog.setAttribute('open', '');
+                }
+            }
+            if (this.ShowFilter) {
+                this.filterInputRef?.nativeElement?.focus();
+            }
+            else {
+                dialog?.querySelector('.app-card')?.focus();
+            }
+        });
+    }
+    /** Resolve the presentation for this open (auto = compact under the threshold) */
+    resolveCompactMode() {
+        if (this.SwitcherStyle === 'compact') {
+            return true;
+        }
+        if (this.SwitcherStyle === 'launcher') {
+            return false;
+        }
+        return this.apps.length < COMPACT_AUTO_THRESHOLD;
+    }
+    /** Anchor the compact panel under the trigger, clamped to the viewport */
+    computeCompactAnchor() {
+        const rect = this.triggerRef?.nativeElement?.getBoundingClientRect();
+        if (!rect) {
+            return;
+        }
+        const panelWidth = 320; // Keep in sync with .launcher-panel--compact width
+        const margin = 8;
+        this.AnchorLeft = Math.max(margin, Math.min(rect.left, window.innerWidth - panelWidth - margin));
+        this.AnchorTop = rect.bottom + margin;
+    }
+    closeLauncher(restoreFocus = true) {
+        const dialog = this.panelRef?.nativeElement;
+        if (dialog?.open && typeof dialog.close === 'function') {
+            dialog.close(); // Browser restores focus to the trigger automatically
+        }
+        this.showDropdown = false;
+        this.FilterText = '';
+        this.ConfigMode = false;
+        this.PendingDiscard = null;
+        if (restoreFocus) {
+            requestAnimationFrame(() => {
+                this.triggerRef?.nativeElement?.focus();
+            });
+        }
+    }
+    /** Guarded close for template paths (backdrop / close button): unsaved
+     *  config changes surface the inline discard bar instead of closing. */
+    CloseLauncher() {
+        if (this.ConfigMode && this.configContent?.HasChanges()) {
+            this.PendingDiscard = 'close';
+            return;
+        }
+        this.closeLauncher();
+    }
+    /** Backdrop clicks arrive as clicks on the <dialog> element itself */
+    OnDialogClick(event) {
+        if (event.target === this.panelRef?.nativeElement) {
+            this.CloseLauncher();
+        }
+    }
+    /** Native cancel (Esc while the browser owns the dialog) — route through
+     *  our layered Escape handling instead of closing unconditionally. */
+    OnDialogCancel(event) {
+        event.preventDefault();
+        this.handleEscape();
+    }
+    /** Inline discard bar: confirm — perform the pending action, dropping changes */
+    ConfirmDiscard() {
+        const action = this.PendingDiscard;
+        this.PendingDiscard = null;
+        if (action === 'close') {
+            this.closeLauncher();
+        }
+        else if (action === 'exit') {
+            this.ExitConfigMode();
+        }
+    }
+    /** Inline discard bar: keep editing */
+    CancelDiscard() {
+        this.PendingDiscard = null;
+    }
+    OnFilterChange() {
+        // Filtering re-renders the card set; nothing else to sync — focus stays
+        // in the input and Tab/arrows reach the new result set naturally.
+    }
+    /** Keyboard model on the filter input */
+    OnFilterKeydown(event) {
+        const visible = this.VisibleApps;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusCard(0);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                // While filtering, Enter opens the top result (omnibar semantics —
+                // the footer advertises "↵ open"); unfiltered it needs an unambiguous
+                // single app.
+                if (this.IsFiltering && visible.length > 0) {
+                    this.selectApp(visible[0]);
+                }
+                else if (visible.length === 1) {
+                    this.selectApp(visible[0]);
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                // Stop the bubble: the panel's own Escape handler would otherwise
+                // re-evaluate AFTER we've mutated state and double-handle the key.
+                event.stopPropagation();
+                this.handleEscape();
+                break;
+        }
+    }
+    /** Arrow-key navigation between focused cards */
+    OnCardKeydown(index, event) {
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowRight':
+                event.preventDefault();
+                this.focusCard(index + 1);
+                break;
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (index === 0) {
+                    this.filterInputRef?.nativeElement?.focus();
+                }
+                else {
+                    this.focusCard(index - 1);
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusCard(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusCard(this.VisibleApps.length - 1);
+                break;
+        }
+    }
+    /** Move DOM focus to the card at the given VisibleApps index (clamped) */
+    focusCard(index) {
+        const count = this.VisibleApps.length;
+        if (count === 0) {
+            return;
+        }
+        const clamped = Math.min(count - 1, Math.max(0, index));
+        const el = document.getElementById(this.OptionId(clamped));
+        if (el) {
+            el.focus();
+            // jsdom (unit tests) doesn't implement scrollIntoView — guard it.
+            if (typeof el.scrollIntoView === 'function') {
+                el.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }
+    /** Keep Tab cycling within the launcher's real focusables (filter, close, Configure) */
+    /** Escape layering: discard bar → config view (guarded) → filter → close.
+     *  Tab is NOT manually trapped — showModal() makes the background inert,
+     *  which is a real trap (no leak when focus sits on a non-focusable). */
+    OnPanelKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.handleEscape();
+        }
+    }
+    handleEscape() {
+        if (this.PendingDiscard) {
+            this.CancelDiscard();
+        }
+        else if (this.ConfigMode) {
+            this.RequestExitConfigMode();
+        }
+        else if (this.IsFiltering) {
+            this.FilterText = '';
+            this.filterInputRef?.nativeElement?.focus();
+        }
+        else {
+            this.closeLauncher();
+        }
     }
     /**
-     * Select an application
-     * When viewing a system tab, always emit to allow returning to the app
+     * Select an application.
+     * When viewing a system tab, always emit to allow returning to the app.
      */
     selectApp(app) {
-        this.showDropdown = false;
+        this.recordRecent(app);
+        this.closeLauncher(false); // Focus moves into the app, not back to the trigger
         if (!UUIDsEqual(app.ID, this.activeApp?.ID) || this.isViewingSystemTab) {
             this.appSelected.emit(app.ID);
         }
@@ -118,92 +773,143 @@ export class AppSwitcherComponent {
     IsLoadingApp(app) {
         return UUIDsEqual(app.ID, this.loadingAppId);
     }
-    /**
-     * Close dropdown when clicking outside
-     */
-    onClickOutside(event) {
-        const target = event.target;
-        if (!target.closest('.app-switcher-container') && this.showDropdown) {
-            this.showDropdown = false;
+    // ---- Recents persistence (MJ: User Settings via UserInfoEngine) ----
+    loadRecents() {
+        try {
+            const raw = this.userInfoEngine.GetSetting(RECENT_APPS_KEY);
+            const parsed = raw ? JSON.parse(raw) : [];
+            this.recentEntries = Array.isArray(parsed)
+                ? parsed.filter((e) => e && typeof e.id === 'string' && typeof e.ts === 'number')
+                : [];
+        }
+        catch {
+            this.recentEntries = [];
+        }
+    }
+    recordRecent(app) {
+        const id = NormalizeUUID(app.ID);
+        this.recentEntries = [
+            { id, ts: Date.now() },
+            ...this.recentEntries.filter(e => NormalizeUUID(e.id) !== id)
+        ].slice(0, RECENT_STORE_MAX);
+        try {
+            this.userInfoEngine.SetSettingDebounced(RECENT_APPS_KEY, JSON.stringify(this.recentEntries));
+        }
+        catch {
+            // Settings persistence must never block app switching (e.g. engine not
+            // configured in tests or permission-constrained sessions).
         }
     }
     /**
-     * Open the app configuration dialog
+     * Swap the launcher body to the app-configuration view (in-panel, seamless —
+     * no separate dialog). The embedded mj-user-app-config-content loads on
+     * creation.
      */
-    openConfigDialog() {
-        this.showDropdown = false;
-        this.showConfigDialog = true;
-        // Use setTimeout to ensure ViewChild is available
-        setTimeout(() => {
-            if (this.appConfigDialog) {
-                this.appConfigDialog.Open();
-            }
-        }, 0);
+    EnterConfigMode() {
+        this.ConfigMode = true;
+        this.FilterText = '';
+        this.PendingDiscard = null;
+        // Move focus into the config view (the back button is its first focusable)
+        requestAnimationFrame(() => {
+            this.panelRef?.nativeElement
+                ?.querySelector('.launcher-back')?.focus();
+        });
+    }
+    /** Guarded exit from the config view: unsaved changes surface the inline
+     *  discard bar instead of silently dropping the user's edits. */
+    RequestExitConfigMode() {
+        if (this.configContent?.HasChanges()) {
+            this.PendingDiscard = 'exit';
+            return;
+        }
+        this.ExitConfigMode();
     }
     /**
-     * Handle when config is saved — close the dialog.
-     * The app list refreshes reactively: each UserApplication save fires a BaseEntity
-     * event, UserInfoEngine's debounced refresh (short DebounceTime on the
-     * 'MJ: User Applications' config) emits DataChange$, and
-     * ApplicationManager.syncFromEngine() pushes the new list to applications$,
-     * which the `apps` getter reads. No explicit reload needed here.
+     * Return from the configuration view to the app grid.
+     * The app list refreshes reactively after a save: each UserApplication save
+     * fires a BaseEntity event, UserInfoEngine's debounced refresh emits
+     * DataChange$, and ApplicationManager.syncFromEngine() pushes the new list
+     * to applications$, which the `apps` getter reads. No explicit reload needed.
      */
-    onConfigSaved() {
-        this.showConfigDialog = false;
+    ExitConfigMode() {
+        this.ConfigMode = false;
+        // The config session may have changed the app count across the compact
+        // threshold — re-resolve the presentation for the view we're returning to.
+        // (The Applications stream also triggers this when the post-save engine
+        // refresh lands, whichever comes last wins with the freshest count.)
+        this.RefreshPresentation();
+        requestAnimationFrame(() => {
+            if (this.ShowFilter) {
+                this.filterInputRef?.nativeElement?.focus();
+            }
+            else {
+                this.panelRef?.nativeElement?.querySelector('.app-card')?.focus();
+            }
+        });
     }
-    static ɵfac = function AppSwitcherComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AppSwitcherComponent)(i0.ɵɵdirectiveInject(i1.ApplicationManager)); };
+    static ɵfac = function AppSwitcherComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AppSwitcherComponent)(i0.ɵɵdirectiveInject(i1.ApplicationManager), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AppSwitcherComponent, selectors: [["mj-app-switcher"]], viewQuery: function AppSwitcherComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 5);
+            i0.ɵɵviewQuery(_c0, 5)(_c1, 5)(_c2, 5)(UserAppConfigContentComponent, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.appConfigDialog = _t.first);
-        } }, hostBindings: function AppSwitcherComponent_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("click", function AppSwitcherComponent_click_HostBindingHandler($event) { return ctx.onClickOutside($event); }, i0.ɵɵresolveDocument);
-        } }, inputs: { activeApp: "activeApp", isViewingSystemTab: "isViewingSystemTab", loadingAppId: "loadingAppId" }, outputs: { appSelected: "appSelected" }, standalone: false, decls: 8, vars: 8, consts: [["appConfigDialog", ""], [1, "app-switcher-container"], ["mjClickable", "Switch application", "testId", "app-switcher-trigger", 1, "app-switcher-button", 3, "click"], [1, "app-icon", "loading-spinner", "fa-solid", "fa-spinner", "fa-spin"], [1, "app-icon", 3, "class", "color", "--active-color"], [1, "dropdown-arrow", "fa-solid", "fa-chevron-down"], [1, "app-switcher-dropdown"], [3, "ShowDialogChange", "ConfigSaved", "ShowDialog"], [1, "app-icon"], [1, "app-switcher-list"], [1, "app-switcher-item", 3, "mjClickable", "testId", "active", "loading", "--item-color"], [1, "app-switcher-divider"], ["mjClickable", "Configure applications", "testId", "app-switcher-configure", 1, "app-switcher-item", "configure-item", 3, "click"], [1, "fa-solid", "fa-gear"], [1, "app-switcher-item", 3, "click", "mjClickable", "testId"], [1, "fa-solid", "fa-spinner", "fa-spin"], [3, "class"]], template: function AppSwitcherComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterInputRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.triggerRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.panelRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.configContent = _t.first);
+        } }, inputs: { activeApp: "activeApp", isViewingSystemTab: "isViewingSystemTab", loadingAppId: "loadingAppId", SwitcherStyle: "SwitcherStyle" }, outputs: { appSelected: "appSelected" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 9, consts: [["trigger", ""], ["appCard", ""], ["panel", ""], ["filterInput", ""], [1, "app-switcher-container"], ["testId", "app-switcher-trigger", 1, "app-switcher-button", 3, "click", "mjClickable"], ["aria-hidden", "true", 1, "app-icon", "loading-spinner", "fa-solid", "fa-spinner", "fa-spin"], ["aria-hidden", "true", 1, "app-icon", 3, "class", "color"], [1, "app-label"], ["aria-hidden", "true", 1, "dropdown-arrow", "fa-solid", "fa-chevron-down"], ["role", "dialog", "aria-modal", "true", 1, "launcher-panel", 3, "launcher-panel--compact", "--anchor-left", "--anchor-top"], ["aria-hidden", "true", 1, "app-icon"], ["role", "dialog", "aria-modal", "true", 1, "launcher-panel", 3, "click", "cancel", "keydown"], [1, "launcher-head", "launcher-head--config"], ["type", "button", "aria-label", "Back to apps", 1, "launcher-back", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-arrow-left"], ["id", "mj-launcher-config-title", 1, "launcher-title"], ["type", "button", "aria-label", "Close application launcher", 1, "launcher-close", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], ["role", "alert", 1, "launcher-discard-bar"], [1, "launcher-config-body", 3, "Saved", "Cancelled", "Provider"], ["aria-hidden", "true", 1, "fa-solid", "fa-triangle-exclamation"], [1, "discard-msg"], ["mjButton", "", "variant", "danger", "size", "sm", 3, "click"], ["mjButton", "", "size", "sm", 3, "click"], [1, "launcher-head"], [1, "launcher-scroll"], [1, "launcher-foot"], ["aria-hidden", "true", 1, "launcher-kbd-hints"], ["type", "button", "testId", "app-switcher-configure", 1, "launcher-configure", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-gear"], ["role", "status", 1, "sr-only"], [1, "launcher-filter"], ["aria-hidden", "true", 1, "fa-solid", "fa-magnifying-glass"], ["type", "text", "placeholder", "Find an app\u2026", "aria-label", "Find an app", "autocomplete", "off", "spellcheck", "false", 3, "input", "keydown", "value"], [1, "launcher-grid"], [1, "launcher-empty"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "launcher-sect", "launcher-sect--row"], ["type", "button", 1, "launcher-sort-toggle", 3, "click", "title"], ["aria-hidden", "true"], ["role", "group", "aria-label", "All applications", 1, "launcher-grid"], [1, "launcher-sect"], ["role", "group", "aria-label", "Recent applications", 1, "launcher-grid"], ["role", "link", 1, "app-card", 3, "click", "keydown", "id", "mjClickable", "testId"], [1, "app-card-glyph"], ["aria-hidden", "true", 1, "fa-solid", "fa-spinner", "fa-spin"], ["aria-hidden", "true", 3, "class"], [1, "app-card-text"], [1, "app-card-name"], [1, "app-card-name-label"], [1, "app-card-desc", 3, "id"]], template: function AppSwitcherComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
-            i0.ɵɵlistener("click", function AppSwitcherComponent_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleDropdown()); });
-            i0.ɵɵconditionalCreate(2, AppSwitcherComponent_Conditional_2_Template, 1, 0, "i", 3);
-            i0.ɵɵconditionalCreate(3, AppSwitcherComponent_Conditional_3_Template, 1, 6, "i", 4);
-            i0.ɵɵelement(4, "i", 5);
+            i0.ɵɵelementStart(0, "div", 4)(1, "div", 5, 0);
+            i0.ɵɵlistener("click", function AppSwitcherComponent_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.ToggleLauncher()); });
+            i0.ɵɵconditionalCreate(3, AppSwitcherComponent_Conditional_3_Template, 1, 0, "i", 6);
+            i0.ɵɵconditionalCreate(4, AppSwitcherComponent_Conditional_4_Template, 1, 4, "i", 7);
+            i0.ɵɵelementStart(5, "span", 8);
+            i0.ɵɵtext(6);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(5, AppSwitcherComponent_Conditional_5_Template, 9, 0, "div", 6);
+            i0.ɵɵelement(7, "i", 9);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "mj-user-app-config", 7, 0);
-            i0.ɵɵtwoWayListener("ShowDialogChange", function AppSwitcherComponent_Template_mj_user_app_config_ShowDialogChange_6_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.showConfigDialog, $event) || (ctx.showConfigDialog = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("ConfigSaved", function AppSwitcherComponent_Template_mj_user_app_config_ConfigSaved_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onConfigSaved()); });
+            i0.ɵɵconditionalCreate(8, AppSwitcherComponent_Conditional_8_Template, 4, 9, "dialog", 10);
             i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(9, AppSwitcherComponent_ng_template_9_Template, 9, 14, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
             i0.ɵɵclassProp("loading", ctx.isLoading);
             i0.ɵɵadvance();
-            i0.ɵɵattribute("aria-haspopup", true)("aria-expanded", ctx.showDropdown);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isLoading ? 2 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading ? 3 : -1);
+            i0.ɵɵproperty("mjClickable", ctx.TriggerAriaLabel);
+            i0.ɵɵattribute("aria-haspopup", "dialog")("aria-expanded", ctx.showDropdown);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.showDropdown ? 5 : -1);
+            i0.ɵɵconditional(ctx.isLoading ? 3 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵtwoWayProperty("ShowDialog", ctx.showConfigDialog);
-        } }, dependencies: [i2.MJClickableDirective, i3.UserAppConfigComponent], styles: [".app-switcher-container[_ngcontent-%COMP%] {\n  position: relative;\n  margin-left: -2px; \n\n}\n\n.app-switcher-button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 10px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s;\n  user-select: none;\n  position: relative;\n}\n.app-switcher-button[_ngcontent-%COMP%]   .app-icon[_ngcontent-%COMP%] {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  position: relative;\n}\n\n\n.app-switcher-button[_ngcontent-%COMP%]   .app-icon[_ngcontent-%COMP%]::after {\n  content: \"\";\n  position: absolute;\n  bottom: -6px;\n  left: 2px;\n  right: 2px;\n  height: 3px;\n  border-radius: 2px;\n  background-color: var(--active-color, var(--mj-text-muted));\n}\n.app-switcher-button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-button[_ngcontent-%COMP%]   .dropdown-arrow[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n}\n\n.app-switcher-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 8px);\n  left: 0;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 220px;\n  width: max-content;\n  overflow: hidden;\n  z-index: 10000;\n  max-height: calc(100vh - 80px - var(--mj-connectivity-banner-height, 0px));\n  display: flex;\n  flex-direction: column;\n}\n.app-switcher-list[_ngcontent-%COMP%] {\n  overflow-y: auto;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  transition: all 0.15s;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  position: relative;\n  white-space: nowrap;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]::before {\n  content: \"\";\n  position: absolute;\n  left: 4px;\n  top: 8px;\n  bottom: 8px;\n  width: 3px;\n  border-radius: 2px;\n  background-color: var(--item-color, var(--mj-text-muted));\n  opacity: 0.8;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: var(--item-color, var(--mj-text-muted));\n  width: 20px;\n  text-align: center;\n  opacity: 1;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]:hover::before {\n  opacity: 1;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--item-color, var(--mj-brand-primary)) 10%, var(--mj-bg-surface-elevated));\n  color: var(--item-color, var(--mj-brand-primary));\n  font-weight: 600;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.active[_ngcontent-%COMP%]::before {\n  width: 4px;\n  left: 3px;\n  opacity: 1;\n}\n\n\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]::before {\n  display: none;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-divider[_ngcontent-%COMP%] {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 12px;\n}\n\n\n\n.app-switcher-button[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n.app-switcher-button[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%]::after {\n  \n\n  display: none;\n}\n\n\n\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.loading[_ngcontent-%COMP%] {\n  pointer-events: none;\n  opacity: 0.7;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--item-color, var(--mj-text-muted));\n}\n\n\n\n@media (max-width: 600px) {\n  .app-switcher-dropdown[_ngcontent-%COMP%] {\n    position: fixed;\n    top: calc(60px + var(--mj-connectivity-banner-height, 0px));\n    left: 0;\n    right: 0;\n    width: 100%;\n    min-width: unset;\n    height: calc(100vh - 60px - var(--mj-connectivity-banner-height, 0px));\n    overflow-y: auto;\n    border-radius: 0;\n    border-top: none;\n    padding: 0.25rem 0;\n  }\n\n  .app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%] {\n    padding: 14px 20px;\n    gap: 14px;\n    min-height: 48px;\n    font-size: 0.9375rem;\n  }\n\n  .app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    width: 24px;\n  }\n\n  .app-switcher-list[_ngcontent-%COMP%] {\n    overflow-y: visible;\n    flex: none;\n  }\n}"] });
+            i0.ɵɵconditional(!ctx.isLoading ? 4 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.TriggerLabel);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.showDropdown ? 8 : -1);
+        } }, dependencies: [i2.NgTemplateOutlet, i3.MJClickableDirective, i3.MJButtonDirective, i4.UserAppConfigContentComponent], styles: [".app-switcher-container[_ngcontent-%COMP%] {\n  position: relative;\n  margin-left: calc(-1 * var(--mj-space-0-5)); \n\n}\n\n\n\n.app-switcher-button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1-5);\n  padding: var(--mj-space-2) var(--mj-space-2-5);\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: background var(--mj-transition-fast);\n  user-select: none;\n  position: relative;\n}\n.app-switcher-button[_ngcontent-%COMP%]   .app-icon[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xl);\n  width: 24px;\n  text-align: center;\n  position: relative;\n}\n.app-switcher-button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-button[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: 2px;\n}\n\n\n\n.app-switcher-button[_ngcontent-%COMP%]   .app-label[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  max-width: 160px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.app-switcher-button[_ngcontent-%COMP%]   .dropdown-arrow[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  transition: color var(--mj-transition-fast);\n}\n\n\n\n.app-switcher-button[_ngcontent-%COMP%]:hover   .dropdown-arrow[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n.app-switcher-button[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n\n.launcher-panel[_ngcontent-%COMP%] {\n  \n\n  padding: 0;\n  margin: 0;\n  inset: unset;\n  max-width: none;\n  position: fixed;\n  top: calc(60px + var(--mj-connectivity-banner-height, 0px) + var(--mj-space-6));\n  left: 50%;\n  transform: translateX(-50%);\n  width: min(880px, calc(100vw - var(--mj-space-12)));\n  max-height: calc(100vh - 60px - var(--mj-connectivity-banner-height, 0px) - var(--mj-space-12));\n  background: var(--mj-bg-surface-elevated);\n  color: inherit;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-xl);\n  flex-direction: column;\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_launcher-pop .13s ease-out;\n}\n.launcher-panel[open][_ngcontent-%COMP%] {\n  display: flex;\n}\n.launcher-panel[_ngcontent-%COMP%]::backdrop {\n  background: var(--mj-bg-overlay);\n  animation: _ngcontent-%COMP%_launcher-fade-in var(--mj-transition-fast);\n}\n\n\n\n\n\n\n\n@media (min-width: 769px) {\n  .launcher-panel--compact[_ngcontent-%COMP%] {\n    left: var(--anchor-left);\n    top: var(--anchor-top);\n    transform: none;\n    width: 320px;\n    max-height: calc(100vh - var(--anchor-top) - var(--mj-space-6));\n    box-shadow: var(--mj-shadow-lg);\n    \n\n    animation: _ngcontent-%COMP%_launcher-fade-in var(--mj-transition-fast);\n  }\n  .launcher-panel--compact[_ngcontent-%COMP%]::backdrop {\n    background: transparent;\n    animation: none;\n  }\n  .launcher-panel--compact[_ngcontent-%COMP%]   .launcher-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: var(--mj-space-1);\n  }\n  .launcher-panel--compact[_ngcontent-%COMP%]   .launcher-scroll[_ngcontent-%COMP%] {\n    padding: var(--mj-space-2);\n  }\n  .launcher-panel--compact[_ngcontent-%COMP%]   .launcher-sect[_ngcontent-%COMP%] {\n    display: none; \n\n  }\n  \n\n\n  .launcher-panel--compact[_ngcontent-%COMP%]   .app-card[_ngcontent-%COMP%] {\n    padding: var(--mj-space-2) var(--mj-space-2-5);\n    align-items: center;\n    background: transparent;\n    border-color: transparent;\n  }\n  .launcher-panel--compact[_ngcontent-%COMP%]   .app-card[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: transparent;\n    transform: none;\n  }\n  .launcher-panel--compact[_ngcontent-%COMP%]   .app-card.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    border-color: transparent;\n  }\n  .launcher-panel--compact[_ngcontent-%COMP%]   .app-card[_ngcontent-%COMP%]:hover {\n    transform: none;\n  }\n  .launcher-panel--compact[_ngcontent-%COMP%]   .app-card-glyph[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    font-size: var(--mj-text-base);\n  }\n  .launcher-panel--compact[_ngcontent-%COMP%]   .app-card-desc[_ngcontent-%COMP%] {\n    display: none;\n  }\n  .launcher-panel--compact[_ngcontent-%COMP%]   .launcher-kbd-hints[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n@keyframes _ngcontent-%COMP%_launcher-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_launcher-pop {\n  from { opacity: 0; transform: translateX(-50%) scale(.985) translateY(-4px); }\n  to { opacity: 1; transform: translateX(-50%) scale(1); }\n}\n\n\n\n.launcher-head[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-4) var(--mj-space-4) var(--mj-space-2);\n  flex-shrink: 0;\n}\n.launcher-filter[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2-5);\n  flex: 1;\n  height: 46px;\n  padding: 0 var(--mj-space-3-5);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  transition: border-color var(--mj-transition-fast);\n}\n.launcher-filter[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--mj-border-focus);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.launcher-filter[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  flex-shrink: 0;\n}\n.launcher-filter[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  border: none;\n  outline: none;\n  background: transparent;\n  width: 100%;\n  font-family: inherit;\n  font-size: var(--mj-text-base);\n  color: var(--mj-text-primary);\n}\n.launcher-filter[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n}\n.launcher-close[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  flex-shrink: 0;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-base);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background var(--mj-transition-fast);\n}\n.launcher-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.launcher-close[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: 2px;\n}\n\n\n\n.launcher-head--config[_ngcontent-%COMP%] {\n  align-items: center;\n  gap: var(--mj-space-2-5);\n  padding-bottom: var(--mj-space-2);\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n.launcher-back[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  flex-shrink: 0;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-base);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background var(--mj-transition-fast);\n}\n.launcher-back[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.launcher-back[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: 2px;\n}\n.launcher-title[_ngcontent-%COMP%] {\n  flex: 1;\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n.launcher-config-body[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n\n\n\n.launcher-discard-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2-5);\n  margin: var(--mj-space-2) var(--mj-space-4) 0;\n  padding: var(--mj-space-2) var(--mj-space-3);\n  background: var(--mj-status-warning-bg);\n  border: 1px solid var(--mj-status-warning-border);\n  border-radius: var(--mj-radius-md);\n  flex-shrink: 0;\n}\n.launcher-discard-bar[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n.launcher-discard-bar[_ngcontent-%COMP%]   .discard-msg[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-status-warning-text);\n}\n\n\n\n.launcher-scroll[_ngcontent-%COMP%] {\n  overflow-y: auto;\n  padding: 0 var(--mj-space-4) var(--mj-space-4);\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n\n.launcher-sect[_ngcontent-%COMP%] {\n  font-size: 10.5px;\n  font-weight: var(--mj-font-bold);\n  letter-spacing: .6px;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n  padding: var(--mj-space-3) var(--mj-space-1-5) var(--mj-space-1-5);\n}\n.launcher-sect--row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-right: var(--mj-space-1);\n}\n\n\n.launcher-sort-toggle[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: var(--mj-radius-sm);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background var(--mj-transition-fast), color var(--mj-transition-fast);\n}\n.launcher-sort-toggle[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.launcher-sort-toggle[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: 2px;\n}\n.launcher-sort-toggle[aria-pressed=\"true\"][_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n.launcher-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--mj-space-2-5);\n}\n.launcher-empty[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  text-align: center;\n  padding: var(--mj-space-6) var(--mj-space-2);\n}\n\n\n\n.app-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--mj-space-3);\n  \n\n\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  padding: var(--mj-space-3) var(--mj-space-3-5);\n  cursor: pointer;\n  min-width: 0;\n  transition: border-color var(--mj-transition-fast), background var(--mj-transition-fast), transform var(--mj-transition-fast);\n}\n.app-card[_ngcontent-%COMP%]:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, var(--mj-border-default));\n  background: var(--mj-bg-surface-hover);\n  transform: translateY(-1px);\n}\n.app-card[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: -1px;\n}\n.app-card.active[_ngcontent-%COMP%] {\n  \n\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, transparent);\n}\n.app-card.loading[_ngcontent-%COMP%] {\n  pointer-events: none;\n  opacity: 0.7;\n}\n.app-card-glyph[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--mj-radius-md);\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--mj-text-lg);\n  color: var(--app-color, var(--mj-text-muted));\n  background: color-mix(in srgb, var(--app-color, var(--mj-text-muted)) 14%, var(--mj-bg-surface-card));\n}\n.app-card-text[_ngcontent-%COMP%] {\n  min-width: 0;\n  flex: 1;\n}\n.app-card-name[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: baseline;\n  gap: var(--mj-space-2);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-bold);\n  color: var(--mj-text-primary);\n}\n.app-card-name-label[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.app-card.active[_ngcontent-%COMP%]   .app-card-name[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.app-card-desc[_ngcontent-%COMP%] {\n  margin-top: var(--mj-space-0-5);\n  font-size: var(--mj-text-xs);\n  line-height: var(--mj-leading-snug);\n  color: var(--mj-text-muted);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n\n\n\n\n.launcher-foot[_ngcontent-%COMP%] {\n  border-top: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface-card);\n  padding: var(--mj-space-2-5) var(--mj-space-4);\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n\n\n.launcher-configure[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin-left: auto;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-family: inherit;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  padding: var(--mj-space-1-5) var(--mj-space-2);\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: background var(--mj-transition-fast), color var(--mj-transition-fast);\n}\n.launcher-configure[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.launcher-configure[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: 2px;\n}\n.launcher-kbd-hints[_ngcontent-%COMP%] {\n  display: flex;\n  gap: var(--mj-space-4);\n  font-size: 11.5px;\n  color: var(--mj-text-muted);\n}\n\n\n\n.launcher-kbd-hints[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n  font-family: inherit;\n  font-size: 10.5px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-bottom-width: 2px;\n  border-radius: 5px;\n  padding: 1.5px var(--mj-space-1-5);\n}\n\n\n\n.sr-only[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n\n\n@media (max-width: 900px) {\n  .launcher-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n\n\n\n@media (max-width: 768px) {\n  \n\n\n  .launcher-panel[_ngcontent-%COMP%] {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    transform: none;\n    width: 100%;\n    max-height: none;\n    height: 100dvh;\n    border-radius: 0;\n    border: none;\n    animation: none;\n  }\n  .launcher-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  .app-card[_ngcontent-%COMP%] {\n    min-height: 48px;\n    align-items: center;\n  }\n  .launcher-close[_ngcontent-%COMP%] {\n    width: 46px;\n    height: 46px;\n  }\n  .launcher-kbd-hints[_ngcontent-%COMP%] {\n    display: none; \n\n  }\n  .app-switcher-button[_ngcontent-%COMP%]   .app-label[_ngcontent-%COMP%] {\n    display: none; \n\n  }\n}\n\n\n\n@media (prefers-reduced-motion: reduce) {\n  .launcher-panel[_ngcontent-%COMP%], \n   .launcher-panel[_ngcontent-%COMP%]::backdrop {\n    animation: none;\n  }\n  .app-card[_ngcontent-%COMP%], \n   .app-card[_ngcontent-%COMP%]:hover {\n    transition: none;\n    transform: none;\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AppSwitcherComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-app-switcher', template: "<div class=\"app-switcher-container\" [class.loading]=\"isLoading\">\n  <div class=\"app-switcher-button\"\n    mjClickable=\"Switch application\"\n    testId=\"app-switcher-trigger\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-expanded]=\"showDropdown\"\n    (click)=\"toggleDropdown()\">\n    <!-- Show spinner when loading, otherwise show app icon -->\n    @if (isLoading) {\n      <i class=\"app-icon loading-spinner fa-solid fa-spinner fa-spin\"></i>\n    }\n    @if (!isLoading) {\n      <i class=\"app-icon\" [class]=\"activeApp?.Icon || 'fa-solid fa-cube'\"\n        [style.color]=\"activeApp?.GetColor()\"\n      [style.--active-color]=\"activeApp?.GetColor()\"></i>\n    }\n    <i class=\"dropdown-arrow fa-solid fa-chevron-down\"></i>\n  </div>\n\n  @if (showDropdown) {\n    <div class=\"app-switcher-dropdown\">\n      <div class=\"app-switcher-list\">\n        @for (app of apps; track app) {\n          <div\n            class=\"app-switcher-item\"\n            [mjClickable]=\"app.Name\"\n            [testId]=\"'app-switcher-item-' + app.Name\"\n            [attr.aria-current]=\"IsActiveApp(app) ? 'true' : null\"\n            [class.active]=\"IsActiveApp(app)\"\n            [class.loading]=\"IsLoadingApp(app)\"\n            [style.--item-color]=\"app.GetColor()\"\n            (click)=\"selectApp(app)\">\n            @if (IsLoadingApp(app)) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            @if (!IsLoadingApp(app)) {\n              <i [class]=\"app.Icon || 'fa-solid fa-cube'\"></i>\n            }\n            <span>{{ app.Name }}</span>\n          </div>\n        }\n      </div>\n      <!-- Divider + Configure pinned at bottom -->\n      <div class=\"app-switcher-divider\"></div>\n      <div class=\"app-switcher-item configure-item\" mjClickable=\"Configure applications\" testId=\"app-switcher-configure\" (click)=\"openConfigDialog()\">\n        <i class=\"fa-solid fa-gear\"></i>\n        <span>Configure...</span>\n      </div>\n    </div>\n  }\n</div>\n\n<!-- App Configuration Dialog -->\n<mj-user-app-config\n  #appConfigDialog\n  [(ShowDialog)]=\"showConfigDialog\"\n  (ConfigSaved)=\"onConfigSaved()\">\n</mj-user-app-config>\n", styles: [".app-switcher-container {\n  position: relative;\n  margin-left: -2px; /* Fine-tune alignment when no nav-bar icons to the left */\n}\n\n.app-switcher-button {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 10px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s;\n  user-select: none;\n  position: relative;\n}\n.app-switcher-button .app-icon {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  position: relative;\n}\n/* Color underline under the icon only, not the caret */\n.app-switcher-button .app-icon::after {\n  content: \"\";\n  position: absolute;\n  bottom: -6px;\n  left: 2px;\n  right: 2px;\n  height: 3px;\n  border-radius: 2px;\n  background-color: var(--active-color, var(--mj-text-muted));\n}\n.app-switcher-button:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-button .dropdown-arrow {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n}\n\n.app-switcher-dropdown {\n  position: absolute;\n  top: calc(100% + 8px);\n  left: 0;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 220px;\n  width: max-content;\n  overflow: hidden;\n  z-index: 10000;\n  max-height: calc(100vh - 80px - var(--mj-connectivity-banner-height, 0px));\n  display: flex;\n  flex-direction: column;\n}\n.app-switcher-list {\n  overflow-y: auto;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n.app-switcher-dropdown .app-switcher-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  transition: all 0.15s;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  position: relative;\n  white-space: nowrap;\n}\n.app-switcher-dropdown .app-switcher-item::before {\n  content: \"\";\n  position: absolute;\n  left: 4px;\n  top: 8px;\n  bottom: 8px;\n  width: 3px;\n  border-radius: 2px;\n  background-color: var(--item-color, var(--mj-text-muted));\n  opacity: 0.8;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown .app-switcher-item i {\n  font-size: 18px;\n  color: var(--item-color, var(--mj-text-muted));\n  width: 20px;\n  text-align: center;\n  opacity: 1;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown .app-switcher-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-dropdown .app-switcher-item:hover::before {\n  opacity: 1;\n}\n.app-switcher-dropdown .app-switcher-item.active {\n  background: color-mix(in srgb, var(--item-color, var(--mj-brand-primary)) 10%, var(--mj-bg-surface-elevated));\n  color: var(--item-color, var(--mj-brand-primary));\n  font-weight: 600;\n}\n.app-switcher-dropdown .app-switcher-item.active::before {\n  width: 4px;\n  left: 3px;\n  opacity: 1;\n}\n/* Configure option - no color line, neutral gray styling */\n.app-switcher-dropdown .app-switcher-item.configure-item {\n  color: var(--mj-text-secondary);\n}\n.app-switcher-dropdown .app-switcher-item.configure-item::before {\n  display: none;\n}\n.app-switcher-dropdown .app-switcher-item.configure-item i {\n  color: var(--mj-text-muted);\n}\n.app-switcher-dropdown .app-switcher-item.configure-item:hover {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown .app-switcher-item.configure-item:hover i {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown .app-switcher-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 12px;\n}\n\n/* Loading state for app switcher button */\n.app-switcher-button .loading-spinner {\n  color: var(--mj-text-muted);\n}\n.app-switcher-button .loading-spinner::after {\n  /* Hide the underline when showing spinner */\n  display: none;\n}\n\n/* Loading state for dropdown items */\n.app-switcher-dropdown .app-switcher-item.loading {\n  pointer-events: none;\n  opacity: 0.7;\n}\n.app-switcher-dropdown .app-switcher-item.loading i {\n  color: var(--item-color, var(--mj-text-muted));\n}\n\n/* Mobile: full-width dropdown with scroll */\n@media (max-width: 600px) {\n  .app-switcher-dropdown {\n    position: fixed;\n    top: calc(60px + var(--mj-connectivity-banner-height, 0px));\n    left: 0;\n    right: 0;\n    width: 100%;\n    min-width: unset;\n    height: calc(100vh - 60px - var(--mj-connectivity-banner-height, 0px));\n    overflow-y: auto;\n    border-radius: 0;\n    border-top: none;\n    padding: 0.25rem 0;\n  }\n\n  .app-switcher-dropdown .app-switcher-item {\n    padding: 14px 20px;\n    gap: 14px;\n    min-height: 48px;\n    font-size: 0.9375rem;\n  }\n\n  .app-switcher-dropdown .app-switcher-item i {\n    font-size: 20px;\n    width: 24px;\n  }\n\n  .app-switcher-list {\n    overflow-y: visible;\n    flex: none;\n  }\n}\n"] }]
-    }], () => [{ type: i1.ApplicationManager }], { activeApp: [{
+        args: [{ standalone: false, selector: 'mj-app-switcher', template: "<div class=\"app-switcher-container\" [class.loading]=\"isLoading\">\n  <div class=\"app-switcher-button\"\n    #trigger\n    [mjClickable]=\"TriggerAriaLabel\"\n    testId=\"app-switcher-trigger\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"showDropdown\"\n    (click)=\"ToggleLauncher()\">\n    <!-- Show spinner when loading, otherwise show app icon -->\n    @if (isLoading) {\n      <i class=\"app-icon loading-spinner fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n    }\n    @if (!isLoading) {\n      <i class=\"app-icon\" [class]=\"activeApp?.Icon || 'fa-solid fa-cube'\"\n        [style.color]=\"activeApp?.GetColor()\" aria-hidden=\"true\"></i>\n    }\n    <!-- Current app name; hidden at the mobile breakpoint (icon-only trigger) -->\n    <span class=\"app-label\">{{ TriggerLabel }}</span>\n    <i class=\"dropdown-arrow fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n  </div>\n\n  @if (showDropdown) {\n    <!-- Native <dialog> + showModal(): lives in the browser TOP LAYER (above\n         every app stacking context \u2014 chat FAB, toasts), background is inert\n         (real focus trap), and focus restores to the trigger on close. The\n         backdrop is ::backdrop; clicks on it arrive as clicks on the dialog\n         element itself (OnDialogClick). -->\n    <dialog class=\"launcher-panel\"\n      #panel\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [class.launcher-panel--compact]=\"CompactMode && !ConfigMode\"\n      [style.--anchor-left]=\"AnchorLeft + 'px'\"\n      [style.--anchor-top]=\"AnchorTop + 'px'\"\n      [attr.aria-label]=\"ConfigMode ? null : 'Application launcher'\"\n      [attr.aria-labelledby]=\"ConfigMode ? 'mj-launcher-config-title' : null\"\n      (click)=\"OnDialogClick($event)\"\n      (cancel)=\"OnDialogCancel($event)\"\n      (keydown)=\"OnPanelKeydown($event)\">\n\n      @if (ConfigMode) {\n        <!-- Configuration view: same panel, body swapped -->\n        <div class=\"launcher-head launcher-head--config\">\n          <button class=\"launcher-back\" type=\"button\" aria-label=\"Back to apps\" (click)=\"RequestExitConfigMode()\">\n            <i class=\"fa-solid fa-arrow-left\" aria-hidden=\"true\"></i>\n          </button>\n          <h2 class=\"launcher-title\" id=\"mj-launcher-config-title\">Configure apps</h2>\n          <button class=\"launcher-close\" type=\"button\" aria-label=\"Close application launcher\" (click)=\"CloseLauncher()\">\n            <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n        @if (PendingDiscard) {\n          <div class=\"launcher-discard-bar\" role=\"alert\">\n            <i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\"></i>\n            <span class=\"discard-msg\">You have unsaved changes.</span>\n            <button mjButton variant=\"danger\" size=\"sm\" (click)=\"ConfirmDiscard()\">Discard</button>\n            <button mjButton size=\"sm\" (click)=\"CancelDiscard()\">Keep editing</button>\n          </div>\n        }\n        <mj-user-app-config-content\n          class=\"launcher-config-body\"\n          [Provider]=\"Provider\"\n          (Saved)=\"ExitConfigMode()\"\n          (Cancelled)=\"RequestExitConfigMode()\">\n        </mj-user-app-config-content>\n      } @else {\n      @if (ShowFilter) {\n      <div class=\"launcher-head\">\n        <div class=\"launcher-filter\">\n          <i class=\"fa-solid fa-magnifying-glass\" aria-hidden=\"true\"></i>\n          <input\n            #filterInput\n            type=\"text\"\n            placeholder=\"Find an app\u2026\"\n            aria-label=\"Find an app\"\n            [value]=\"FilterText\"\n            (input)=\"OnFilterInput($event)\"\n            (keydown)=\"OnFilterKeydown($event)\"\n            autocomplete=\"off\"\n            spellcheck=\"false\" />\n        </div>\n        <button class=\"launcher-close\" type=\"button\" aria-label=\"Close application launcher\" (click)=\"CloseLauncher()\">\n          <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n      }\n\n      <div class=\"launcher-scroll\">\n        @if (IsFiltering) {\n          <div class=\"launcher-grid\">\n            @for (app of VisibleApps; track app.ID; let i = $index) {\n              <ng-container *ngTemplateOutlet=\"appCard; context: { $implicit: app, idx: i }\"></ng-container>\n            }\n          </div>\n          @if (VisibleApps.length === 0) {\n            <div class=\"launcher-empty\">No apps match \"{{ FilterText }}\"</div>\n          }\n        } @else {\n          @if (RecentApps.length > 0) {\n            <div class=\"launcher-sect\">Recent</div>\n            <div class=\"launcher-grid\" role=\"group\" aria-label=\"Recent applications\">\n              @for (app of RecentApps; track app.ID; let i = $index) {\n                <ng-container *ngTemplateOutlet=\"appCard; context: { $implicit: app, idx: i }\"></ng-container>\n              }\n            </div>\n          }\n          <div class=\"launcher-sect launcher-sect--row\">\n            <span>All apps</span>\n            <button class=\"launcher-sort-toggle\" type=\"button\"\n              [attr.aria-pressed]=\"SortMode === 'alpha'\"\n              [attr.aria-label]=\"SortMode === 'alpha' ? 'Sorted alphabetically \u2014 switch to your custom order' : 'Sorted by your custom order \u2014 switch to alphabetical'\"\n              [title]=\"SortMode === 'alpha' ? 'Sorted A\u2013Z \u2014 click for your custom order' : 'Custom order \u2014 click for A\u2013Z'\"\n              (click)=\"ToggleSortMode()\">\n              <i [class]=\"SortMode === 'alpha' ? 'fa-solid fa-arrow-down-a-z' : 'fa-solid fa-bars-staggered'\" aria-hidden=\"true\"></i>\n            </button>\n          </div>\n          <div class=\"launcher-grid\" role=\"group\" aria-label=\"All applications\">\n            @for (app of OtherApps; track app.ID; let i = $index) {\n              <ng-container *ngTemplateOutlet=\"appCard; context: { $implicit: app, idx: i + RecentApps.length }\"></ng-container>\n            }\n          </div>\n          @if (VisibleApps.length === 0) {\n            <div class=\"launcher-empty\">\n              No applications are enabled for you yet \u2014 use Configure\u2026 below to add some.\n            </div>\n          }\n        }\n      </div>\n\n      <div class=\"launcher-foot\">\n        <span class=\"launcher-kbd-hints\" aria-hidden=\"true\">\n          <span><kbd>\u2191</kbd><kbd>\u2193</kbd> navigate</span>\n          <span><kbd>\u21B5</kbd> open</span>\n          <span><kbd>esc</kbd> close</span>\n        </span>\n        <button class=\"launcher-configure\" type=\"button\" testId=\"app-switcher-configure\" (click)=\"EnterConfigMode()\">\n          <i class=\"fa-solid fa-gear\" aria-hidden=\"true\"></i>\n          <span>Configure\u2026</span>\n        </button>\n      </div>\n\n      <span class=\"sr-only\" role=\"status\">{{ AnnouncedAppCount }} applications available</span>\n      }\n    </dialog>\n  }\n</div>\n\n<!-- Shared app-card template: each card is a real focusable control (mjClickable\n     adds role, tabindex 0, aria-label, and Enter/Space activation), so Tab walks\n     the cards and arrow keys are the fast path. -->\n<ng-template #appCard let-app let-idx=\"idx\">\n  <div class=\"app-card\"\n    [id]=\"OptionId(idx)\"\n    [mjClickable]=\"app.Name\"\n    role=\"link\"\n    [testId]=\"'app-switcher-item-' + app.Name\"\n    [attr.aria-current]=\"IsActiveApp(app) ? 'true' : null\"\n    [attr.aria-describedby]=\"app.Description ? OptionId(idx) + '-desc' : null\"\n    [class.active]=\"IsActiveApp(app)\"\n    [class.loading]=\"IsLoadingApp(app)\"\n    [style.--app-color]=\"app.GetColor()\"\n    (click)=\"selectApp(app)\"\n    (keydown)=\"OnCardKeydown(idx, $event)\">\n    <div class=\"app-card-glyph\">\n      @if (IsLoadingApp(app)) {\n        <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n      } @else {\n        <i [class]=\"app.Icon || 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n      }\n    </div>\n    <div class=\"app-card-text\">\n      <div class=\"app-card-name\">\n        <span class=\"app-card-name-label\">{{ app.Name }}</span>\n      </div>\n      @if (app.Description) {\n        <div class=\"app-card-desc\" [id]=\"OptionId(idx) + '-desc'\">{{ app.Description }}</div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n", styles: [".app-switcher-container {\n  position: relative;\n  margin-left: calc(-1 * var(--mj-space-0-5)); /* Fine-tune alignment when no nav-bar icons to the left */\n}\n\n/* ---- Trigger button (header) ---- */\n.app-switcher-button {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1-5);\n  padding: var(--mj-space-2) var(--mj-space-2-5);\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: background var(--mj-transition-fast);\n  user-select: none;\n  position: relative;\n}\n.app-switcher-button .app-icon {\n  font-size: var(--mj-text-xl);\n  width: 24px;\n  text-align: center;\n  position: relative;\n}\n.app-switcher-button:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-button:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: 2px;\n}\n/* Current-app name in the trigger. Capped at 160px: no current catalog name\n   truncates at this width \u2014 the ellipsis only guards future/client apps. */\n.app-switcher-button .app-label {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  max-width: 160px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.app-switcher-button .dropdown-arrow {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  transition: color var(--mj-transition-fast);\n}\n/* text-disabled sat nearly on top of --mj-bg-surface-hover in dark mode \u2014\n   the chevron vanished on hover. Muted at rest, secondary on hover. */\n.app-switcher-button:hover .dropdown-arrow {\n  color: var(--mj-text-secondary);\n}\n.app-switcher-button .loading-spinner {\n  color: var(--mj-text-muted);\n}\n\n/* ---- Launcher overlay ----\n   The panel is a native <dialog> opened with showModal(): it renders in the\n   browser TOP LAYER (above every app stacking context, incl. the header's\n   z-index:500 context, the chat FAB, and toasts), the page behind it is\n   inert, and the whole-screen scrim is the dialog's ::backdrop. */\n.launcher-panel {\n  /* Reset dialog UA defaults, then apply the command-surface spec */\n  padding: 0;\n  margin: 0;\n  inset: unset;\n  max-width: none;\n  position: fixed;\n  top: calc(60px + var(--mj-connectivity-banner-height, 0px) + var(--mj-space-6));\n  left: 50%;\n  transform: translateX(-50%);\n  width: min(880px, calc(100vw - var(--mj-space-12)));\n  max-height: calc(100vh - 60px - var(--mj-connectivity-banner-height, 0px) - var(--mj-space-12));\n  background: var(--mj-bg-surface-elevated);\n  color: inherit;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-xl);\n  flex-direction: column;\n  overflow: hidden;\n  animation: launcher-pop .13s ease-out;\n}\n.launcher-panel[open] {\n  display: flex;\n}\n.launcher-panel::backdrop {\n  background: var(--mj-bg-overlay);\n  animation: launcher-fade-in var(--mj-transition-fast);\n}\n\n/* ---- Compact mode (few apps / Shell.AppSwitcher.Style) ----\n   Anchored under the trigger like a dropdown: no dim, single-column rows,\n   no recents/filter. Entering the Configure view drops this class, promoting\n   the panel back to the centered command surface (the config layout needs\n   the width). Desktop-only \u2014 the mobile sheet below overrides regardless. */\n@media (min-width: 769px) {\n  .launcher-panel--compact {\n    left: var(--anchor-left);\n    top: var(--anchor-top);\n    transform: none;\n    width: 320px;\n    max-height: calc(100vh - var(--anchor-top) - var(--mj-space-6));\n    box-shadow: var(--mj-shadow-lg);\n    /* The pop animation animates translateX(-50%), which compact doesn't use */\n    animation: launcher-fade-in var(--mj-transition-fast);\n  }\n  .launcher-panel--compact::backdrop {\n    background: transparent;\n    animation: none;\n  }\n  .launcher-panel--compact .launcher-grid {\n    grid-template-columns: 1fr;\n    gap: var(--mj-space-1);\n  }\n  .launcher-panel--compact .launcher-scroll {\n    padding: var(--mj-space-2);\n  }\n  .launcher-panel--compact .launcher-sect {\n    display: none; /* Single flat list \u2014 \"All apps\" header is noise here */\n  }\n  /* Compact rows are flat menu rows (not card blocks) with an explicit\n     hover fill; active keeps the shared brand tint. */\n  .launcher-panel--compact .app-card {\n    padding: var(--mj-space-2) var(--mj-space-2-5);\n    align-items: center;\n    background: transparent;\n    border-color: transparent;\n  }\n  .launcher-panel--compact .app-card:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: transparent;\n    transform: none;\n  }\n  .launcher-panel--compact .app-card.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    border-color: transparent;\n  }\n  .launcher-panel--compact .app-card:hover {\n    transform: none;\n  }\n  .launcher-panel--compact .app-card-glyph {\n    width: 32px;\n    height: 32px;\n    font-size: var(--mj-text-base);\n  }\n  .launcher-panel--compact .app-card-desc {\n    display: none;\n  }\n  .launcher-panel--compact .launcher-kbd-hints {\n    display: none;\n  }\n}\n\n@keyframes launcher-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n/* Desktop pop matches the omnibar's ob-pop exactly. The from-state keeps the\n   layout translateX(-50%); on the mobile sheet (base transform: none) this\n   animation is disabled rather than redefined \u2014 redefining keyframes inside\n   the media query is what caused the jump-in bug. */\n@keyframes launcher-pop {\n  from { opacity: 0; transform: translateX(-50%) scale(.985) translateY(-4px); }\n  to { opacity: 1; transform: translateX(-50%) scale(1); }\n}\n\n/* ---- Head: filter + close ---- */\n.launcher-head {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-4) var(--mj-space-4) var(--mj-space-2);\n  flex-shrink: 0;\n}\n.launcher-filter {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2-5);\n  flex: 1;\n  height: 46px;\n  padding: 0 var(--mj-space-3-5);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  transition: border-color var(--mj-transition-fast);\n}\n.launcher-filter:focus-within {\n  border-color: var(--mj-border-focus);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.launcher-filter i {\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  flex-shrink: 0;\n}\n.launcher-filter input {\n  border: none;\n  outline: none;\n  background: transparent;\n  width: 100%;\n  font-family: inherit;\n  font-size: var(--mj-text-base);\n  color: var(--mj-text-primary);\n}\n.launcher-filter input::placeholder {\n  color: var(--mj-text-muted);\n}\n.launcher-close {\n  width: 40px;\n  height: 40px;\n  flex-shrink: 0;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-base);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background var(--mj-transition-fast);\n}\n.launcher-close:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.launcher-close:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: 2px;\n}\n\n/* ---- In-panel configuration view (view swap) ---- */\n.launcher-head--config {\n  align-items: center;\n  gap: var(--mj-space-2-5);\n  padding-bottom: var(--mj-space-2);\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n.launcher-back {\n  width: 40px;\n  height: 40px;\n  flex-shrink: 0;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-base);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background var(--mj-transition-fast);\n}\n.launcher-back:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.launcher-back:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: 2px;\n}\n.launcher-title {\n  flex: 1;\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n.launcher-config-body {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n/* Inline unsaved-changes bar: lives inside the panel because a body-appended\n   confirm dialog would sit beneath (and inert to) the top layer. */\n.launcher-discard-bar {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2-5);\n  margin: var(--mj-space-2) var(--mj-space-4) 0;\n  padding: var(--mj-space-2) var(--mj-space-3);\n  background: var(--mj-status-warning-bg);\n  border: 1px solid var(--mj-status-warning-border);\n  border-radius: var(--mj-radius-md);\n  flex-shrink: 0;\n}\n.launcher-discard-bar i {\n  color: var(--mj-status-warning);\n}\n.launcher-discard-bar .discard-msg {\n  flex: 1;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-status-warning-text);\n}\n\n/* ---- Scrollable card area ---- */\n.launcher-scroll {\n  overflow-y: auto;\n  padding: 0 var(--mj-space-4) var(--mj-space-4);\n  flex: 1 1 auto;\n  min-height: 0;\n}\n/* Typography matches the omnibar's .ob-group-label */\n.launcher-sect {\n  font-size: 10.5px;\n  font-weight: var(--mj-font-bold);\n  letter-spacing: .6px;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n  padding: var(--mj-space-3) var(--mj-space-1-5) var(--mj-space-1-5);\n}\n.launcher-sect--row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-right: var(--mj-space-1);\n}\n/* All-apps sort toggle: quiet icon button, brand-tinted when non-default */\n.launcher-sort-toggle {\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: var(--mj-radius-sm);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background var(--mj-transition-fast), color var(--mj-transition-fast);\n}\n.launcher-sort-toggle:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.launcher-sort-toggle:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: 2px;\n}\n.launcher-sort-toggle[aria-pressed=\"true\"] {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n.launcher-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--mj-space-2-5);\n}\n.launcher-empty {\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  text-align: center;\n  padding: var(--mj-space-6) var(--mj-space-2);\n}\n\n/* ---- App cards ---- */\n.app-card {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--mj-space-3);\n  /* surface-card, NOT surface: on the elevated panel, plain surface is the\n     same white in light mode and the cards visually vanish */\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  padding: var(--mj-space-3) var(--mj-space-3-5);\n  cursor: pointer;\n  min-width: 0;\n  transition: border-color var(--mj-transition-fast), background var(--mj-transition-fast), transform var(--mj-transition-fast);\n}\n.app-card:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, var(--mj-border-default));\n  background: var(--mj-bg-surface-hover);\n  transform: translateY(-1px);\n}\n.app-card:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: -1px;\n}\n.app-card.active {\n  /* Shared active-tint recipe */\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, transparent);\n}\n.app-card.loading {\n  pointer-events: none;\n  opacity: 0.7;\n}\n.app-card-glyph {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--mj-radius-md);\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--mj-text-lg);\n  color: var(--app-color, var(--mj-text-muted));\n  background: color-mix(in srgb, var(--app-color, var(--mj-text-muted)) 14%, var(--mj-bg-surface-card));\n}\n.app-card-text {\n  min-width: 0;\n  flex: 1;\n}\n.app-card-name {\n  display: flex;\n  align-items: baseline;\n  gap: var(--mj-space-2);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-bold);\n  color: var(--mj-text-primary);\n}\n.app-card-name-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.app-card.active .app-card-name {\n  color: var(--mj-brand-primary);\n}\n.app-card-desc {\n  margin-top: var(--mj-space-0-5);\n  font-size: var(--mj-text-xs);\n  line-height: var(--mj-leading-snug);\n  color: var(--mj-text-muted);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* ---- Footer ---- */\n/* Footer tone matches the omnibar's .ob-foot */\n.launcher-foot {\n  border-top: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface-card);\n  padding: var(--mj-space-2-5) var(--mj-space-4);\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n/* Footer options button \u2014 shared spec with the omnibar's Settings button:\n   quiet labeled gear, right-aligned. */\n.launcher-configure {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin-left: auto;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-family: inherit;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  padding: var(--mj-space-1-5) var(--mj-space-2);\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: background var(--mj-transition-fast), color var(--mj-transition-fast);\n}\n.launcher-configure:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.launcher-configure:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: 2px;\n}\n.launcher-kbd-hints {\n  display: flex;\n  gap: var(--mj-space-4);\n  font-size: 11.5px;\n  color: var(--mj-text-muted);\n}\n/* kbd chips: the canonical ob-kbd chrome (10.5px / 5px radius / bottom-heavy\n   border) \u2014 same spec the omnibar and the header search button use. */\n.launcher-kbd-hints kbd {\n  font-family: inherit;\n  font-size: 10.5px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-bottom-width: 2px;\n  border-radius: 5px;\n  padding: 1.5px var(--mj-space-1-5);\n}\n\n/* ---- Screen-reader-only live region ---- */\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* ---- Responsive ---- */\n@media (max-width: 900px) {\n  .launcher-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n/* Mobile: full sheet below the header, single-column cards, 48px+ targets.\n   Breakpoint matches the shell's 768px mobile breakpoint. */\n@media (max-width: 768px) {\n  /* Full-screen sheet, matching the omnibar's mobile treatment. The pop\n     animation is disabled (its from-state translateX no longer applies). */\n  .launcher-panel {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    transform: none;\n    width: 100%;\n    max-height: none;\n    height: 100dvh;\n    border-radius: 0;\n    border: none;\n    animation: none;\n  }\n  .launcher-grid {\n    grid-template-columns: 1fr;\n  }\n  .app-card {\n    min-height: 48px;\n    align-items: center;\n  }\n  .launcher-close {\n    width: 46px;\n    height: 46px;\n  }\n  .launcher-kbd-hints {\n    display: none; /* No hardware-keyboard hints on touch */\n  }\n  .app-switcher-button .app-label {\n    display: none; /* Icon-only trigger \u2014 the 390px header has no room for a name */\n  }\n}\n\n/* ---- Reduced motion ---- */\n@media (prefers-reduced-motion: reduce) {\n  .launcher-panel,\n  .launcher-panel::backdrop {\n    animation: none;\n  }\n  .app-card,\n  .app-card:hover {\n    transition: none;\n    transform: none;\n  }\n}\n"] }]
+    }], () => [{ type: i1.ApplicationManager }, { type: i0.ChangeDetectorRef }], { activeApp: [{
             type: Input
         }], isViewingSystemTab: [{
             type: Input
         }], loadingAppId: [{
             type: Input
+        }], SwitcherStyle: [{
+            type: Input
         }], appSelected: [{
             type: Output
-        }], appConfigDialog: [{
+        }], filterInputRef: [{
+            type: ViewChild,
+            args: ['filterInput']
+        }], triggerRef: [{
+            type: ViewChild,
+            args: ['trigger']
+        }], panelRef: [{
+            type: ViewChild,
+            args: ['panel']
+        }], configContent: [{
             type: ViewChild,
-            args: ['appConfigDialog']
-        }], onClickOutside: [{
-            type: HostListener,
-            args: ['document:click', ['$event']]
+            args: [UserAppConfigContentComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AppSwitcherComponent, { className: "AppSwitcherComponent", filePath: "src/lib/shell/components/header/app-switcher.component.ts", lineNumber: 16 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AppSwitcherComponent, { className: "AppSwitcherComponent", filePath: "src/lib/shell/components/header/app-switcher.component.ts", lineNumber: 63 }); })();
 //# sourceMappingURL=app-switcher.component.js.map