@memberjunction/ng-dashboards 5.35.0 → 5.36.0

package/dist/DevTools/event-monitor.component.js

@@ -10,24 +10,25 @@ import { RegisterClass, MJGlobal } from '@memberjunction/global';
 import { DevToolsPrefs } from './dev-tools-prefs';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
-import * as i2 from "@angular/common";
-function EventMonitorComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 39);
+import * as i2 from "@memberjunction/ng-ui-components";
+import * as i3 from "@angular/common";
+function EventMonitorComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 34);
     i0.ɵɵtext(1, " Resume ");
 } }
-function EventMonitorComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 40);
+function EventMonitorComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 35);
     i0.ɵɵtext(1, " Pause ");
 } }
-function EventMonitorComponent_Conditional_53_Template(rf, ctx) { if (rf & 1) {
+function EventMonitorComponent_Conditional_45_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 41);
-    i0.ɵɵlistener("click", function EventMonitorComponent_Conditional_53_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Filter = ""); });
-    i0.ɵɵelement(1, "i", 42);
+    i0.ɵɵelementStart(0, "button", 36);
+    i0.ɵɵlistener("click", function EventMonitorComponent_Conditional_45_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Filter = ""); });
+    i0.ɵɵelement(1, "i", 37);
     i0.ɵɵelementEnd();
 } }
-function EventMonitorComponent_For_61_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 27);
+function EventMonitorComponent_For_53_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 22);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -36,8 +37,8 @@ function EventMonitorComponent_For_61_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(t_r3);
 } }
-function EventMonitorComponent_For_69_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 27);
+function EventMonitorComponent_For_61_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 22);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -46,8 +47,8 @@ function EventMonitorComponent_For_69_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(c_r4);
 } }
-function EventMonitorComponent_Conditional_70_For_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 27);
+function EventMonitorComponent_Conditional_62_For_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 22);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -56,18 +57,18 @@ function EventMonitorComponent_Conditional_70_For_7_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(c_r6);
 } }
-function EventMonitorComponent_Conditional_70_Template(rf, ctx) { if (rf & 1) {
+function EventMonitorComponent_Conditional_62_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 23)(1, "label", 24);
+    i0.ɵɵelementStart(0, "div", 18)(1, "label", 19);
     i0.ɵɵtext(2, "Code");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "select", 25);
-    i0.ɵɵtwoWayListener("ngModelChange", function EventMonitorComponent_Conditional_70_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.CodeFilter, $event) || (ctx_r1.CodeFilter = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function EventMonitorComponent_Conditional_70_Template_select_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.PersistPrefs()); });
-    i0.ɵɵelementStart(4, "option", 26);
+    i0.ɵɵelementStart(3, "select", 20);
+    i0.ɵɵtwoWayListener("ngModelChange", function EventMonitorComponent_Conditional_62_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.CodeFilter, $event) || (ctx_r1.CodeFilter = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function EventMonitorComponent_Conditional_62_Template_select_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.PersistPrefs()); });
+    i0.ɵɵelementStart(4, "option", 21);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(6, EventMonitorComponent_Conditional_70_For_7_Template, 2, 2, "option", 27, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(6, EventMonitorComponent_Conditional_62_For_7_Template, 2, 2, "option", 22, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -78,53 +79,53 @@ function EventMonitorComponent_Conditional_70_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.KnownCodes);
 } }
-function EventMonitorComponent_Conditional_71_Template(rf, ctx) { if (rf & 1) {
+function EventMonitorComponent_Conditional_63_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 43);
-    i0.ɵɵlistener("click", function EventMonitorComponent_Conditional_71_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ClearFilters()); });
-    i0.ɵɵelement(1, "i", 42);
+    i0.ɵɵelementStart(0, "button", 38);
+    i0.ɵɵlistener("click", function EventMonitorComponent_Conditional_63_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ClearFilters()); });
+    i0.ɵɵelement(1, "i", 37);
     i0.ɵɵtext(2, " Clear filters ");
     i0.ɵɵelementEnd();
 } }
-function EventMonitorComponent_Conditional_76_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 44);
+function EventMonitorComponent_Conditional_68_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 39);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("fa-arrow-down", ctx_r1.SortDir === "desc")("fa-arrow-up", ctx_r1.SortDir === "asc");
 } }
-function EventMonitorComponent_Conditional_79_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 44);
+function EventMonitorComponent_Conditional_71_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 39);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("fa-arrow-down", ctx_r1.SortDir === "desc")("fa-arrow-up", ctx_r1.SortDir === "asc");
 } }
-function EventMonitorComponent_Conditional_82_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 44);
+function EventMonitorComponent_Conditional_74_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 39);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("fa-arrow-down", ctx_r1.SortDir === "desc")("fa-arrow-up", ctx_r1.SortDir === "asc");
 } }
-function EventMonitorComponent_Conditional_85_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 44);
+function EventMonitorComponent_Conditional_77_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 39);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("fa-arrow-down", ctx_r1.SortDir === "desc")("fa-arrow-up", ctx_r1.SortDir === "asc");
 } }
-function EventMonitorComponent_Conditional_89_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 45);
-    i0.ɵɵelementStart(1, "div", 46);
+function EventMonitorComponent_Conditional_81_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 40);
+    i0.ɵɵelementStart(1, "div", 41);
     i0.ɵɵtext(2, "Listening for events\u2026");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 47);
+    i0.ɵɵelementStart(3, "div", 42);
     i0.ɵɵtext(4, "Trigger an action \u2014 saves, navigation, AI events all show up here.");
     i0.ɵɵelementEnd();
 } }
-function EventMonitorComponent_Conditional_89_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 48);
-    i0.ɵɵelementStart(1, "div", 46);
+function EventMonitorComponent_Conditional_81_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 43);
+    i0.ɵɵelementStart(1, "div", 41);
     i0.ɵɵtext(2, "Capture is paused");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 47);
+    i0.ɵɵelementStart(3, "div", 42);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -132,12 +133,12 @@ function EventMonitorComponent_Conditional_89_Conditional_2_Template(rf, ctx) {
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1("", ctx_r1.Stats.captured, " events fired since you paused. Click Resume to start collecting again.");
 } }
-function EventMonitorComponent_Conditional_89_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 49);
-    i0.ɵɵelementStart(1, "div", 46);
+function EventMonitorComponent_Conditional_81_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 44);
+    i0.ɵɵelementStart(1, "div", 41);
     i0.ɵɵtext(2, "No events match your filter");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 47);
+    i0.ɵɵelementStart(3, "div", 42);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -145,17 +146,17 @@ function EventMonitorComponent_Conditional_89_Conditional_3_Template(rf, ctx) {
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1("", ctx_r1.Stats.kept, " events in buffer \u00B7 clear filters to see them.");
 } }
-function EventMonitorComponent_Conditional_89_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38);
-    i0.ɵɵconditionalCreate(1, EventMonitorComponent_Conditional_89_Conditional_1_Template, 5, 0)(2, EventMonitorComponent_Conditional_89_Conditional_2_Template, 5, 1)(3, EventMonitorComponent_Conditional_89_Conditional_3_Template, 5, 1);
+function EventMonitorComponent_Conditional_81_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵconditionalCreate(1, EventMonitorComponent_Conditional_81_Conditional_1_Template, 5, 0)(2, EventMonitorComponent_Conditional_81_Conditional_2_Template, 5, 1)(3, EventMonitorComponent_Conditional_81_Conditional_3_Template, 5, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.Stats.captured === 0 ? 1 : ctx_r1.Paused ? 2 : 3);
 } }
-function EventMonitorComponent_Conditional_90_For_1_Conditional_16_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "pre", 61)(1, "code");
+function EventMonitorComponent_Conditional_82_For_1_Conditional_16_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "pre", 56)(1, "code");
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "json");
     i0.ɵɵelementEnd()();
@@ -164,45 +165,45 @@ function EventMonitorComponent_Conditional_90_For_1_Conditional_16_Conditional_0
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 1, evt_r9.args));
 } }
-function EventMonitorComponent_Conditional_90_For_1_Conditional_16_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 62);
-    i0.ɵɵelement(1, "i", 63);
+function EventMonitorComponent_Conditional_82_For_1_Conditional_16_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 57);
+    i0.ɵɵelement(1, "i", 58);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "This event has no payload.");
     i0.ɵɵelementEnd()();
 } }
-function EventMonitorComponent_Conditional_90_For_1_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, EventMonitorComponent_Conditional_90_For_1_Conditional_16_Conditional_0_Template, 4, 3, "pre", 61)(1, EventMonitorComponent_Conditional_90_For_1_Conditional_16_Conditional_1_Template, 4, 0, "div", 62);
+function EventMonitorComponent_Conditional_82_For_1_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, EventMonitorComponent_Conditional_82_For_1_Conditional_16_Conditional_0_Template, 4, 3, "pre", 56)(1, EventMonitorComponent_Conditional_82_For_1_Conditional_16_Conditional_1_Template, 4, 0, "div", 57);
 } if (rf & 2) {
     const evt_r9 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵconditional(evt_r9.hasPayload ? 0 : 1);
 } }
-function EventMonitorComponent_Conditional_90_For_1_Template(rf, ctx) { if (rf & 1) {
+function EventMonitorComponent_Conditional_82_For_1_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 51)(1, "div", 52);
-    i0.ɵɵlistener("click", function EventMonitorComponent_Conditional_90_For_1_Template_div_click_1_listener() { const evt_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleRow(evt_r9)); });
-    i0.ɵɵelement(2, "i", 53);
-    i0.ɵɵelementStart(3, "span", 54);
+    i0.ɵɵelementStart(0, "div", 46)(1, "div", 47);
+    i0.ɵɵlistener("click", function EventMonitorComponent_Conditional_82_For_1_Template_div_click_1_listener() { const evt_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleRow(evt_r9)); });
+    i0.ɵɵelement(2, "i", 48);
+    i0.ɵɵelementStart(3, "span", 49);
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 55);
+    i0.ɵɵelementStart(6, "span", 50);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 56);
+    i0.ɵɵelementStart(8, "span", 51);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 57);
+    i0.ɵɵelementStart(10, "span", 52);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 58);
+    i0.ɵɵelementStart(12, "span", 53);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "button", 59);
-    i0.ɵɵlistener("click", function EventMonitorComponent_Conditional_90_For_1_Template_button_click_14_listener($event) { const evt_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r1.OnCopyRow(evt_r9)); });
-    i0.ɵɵelement(15, "i", 60);
+    i0.ɵɵelementStart(14, "button", 54);
+    i0.ɵɵlistener("click", function EventMonitorComponent_Conditional_82_For_1_Template_button_click_14_listener($event) { const evt_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r1.OnCopyRow(evt_r9)); });
+    i0.ɵɵelement(15, "i", 55);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(16, EventMonitorComponent_Conditional_90_For_1_Conditional_16_Template, 2, 1);
+    i0.ɵɵconditionalCreate(16, EventMonitorComponent_Conditional_82_For_1_Conditional_16_Template, 2, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const evt_r9 = ctx.$implicit;
@@ -228,8 +229,8 @@ function EventMonitorComponent_Conditional_90_For_1_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(evt_r9.expanded ? 16 : -1);
 } }
-function EventMonitorComponent_Conditional_90_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, EventMonitorComponent_Conditional_90_For_1_Template, 17, 17, "div", 50, i0.ɵɵcomponentInstance().TrackBySeq, true);
+function EventMonitorComponent_Conditional_82_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, EventMonitorComponent_Conditional_82_For_1_Template, 17, 17, "div", 45, i0.ɵɵcomponentInstance().TrackBySeq, true);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵrepeater(ctx_r1.FilteredEvents);
@@ -475,124 +476,113 @@ let EventMonitorComponent = class EventMonitorComponent extends BaseResourceComp
         return String(args);
     }
     static ɵfac = function EventMonitorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EventMonitorComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EventMonitorComponent, selectors: [["mj-event-monitor"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 91, vars: 36, consts: [[1, "mj-inspector", "mj-inspector--solo"], [1, "mj-inspector__header"], [1, "mj-inspector__header-icon"], [1, "fa-solid", "fa-bolt"], [1, "mj-inspector__header-title"], [1, "mj-inspector__header-sub"], [1, "mj-inspector__header-spacer"], [1, "mj-inspector__header-actions"], ["type", "button", 1, "mj-inspector__btn", 3, "click", "title"], ["type", "button", "title", "Clear all captured events", 1, "mj-inspector__btn", 3, "click"], [1, "fa-solid", "fa-broom"], [1, "em-stats"], [1, "em-stat"], [1, "em-pulse"], [1, "em-stat-value"], [1, "em-stat-label"], [1, "em-stat", "em-stat--right"], [1, "em-stat-value", "em-stat-value--small"], [1, "em-toolbar"], [1, "em-search-wrap"], [1, "fa-solid", "fa-search", "em-search-icon"], ["type", "search", "placeholder", "Filter by type, component, payload\u2026", 1, "em-search", 3, "ngModelChange", "ngModel"], ["title", "Clear", 1, "em-search-clear"], [1, "em-select-wrap"], [1, "em-select-label"], [1, "em-select", 3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], ["type", "button", "title", "Clear all filters", 1, "em-clear-filters"], [1, "em-list"], [1, "em-table-head"], ["type", "button", 1, "em-th", "em-th--time", 3, "click"], [1, "fa-solid", 3, "fa-arrow-down", "fa-arrow-up"], ["type", "button", 1, "em-th", "em-th--type", 3, "click"], ["type", "button", 1, "em-th", "em-th--code", 3, "click"], ["type", "button", 1, "em-th", "em-th--component", 3, "click"], [1, "em-th", "em-th--summary"], [1, "em-th", "em-th--actions"], [1, "em-empty"], [1, "fa-solid", "fa-play"], [1, "fa-solid", "fa-pause"], ["title", "Clear", 1, "em-search-clear", 3, "click"], [1, "fa-solid", "fa-xmark"], ["type", "button", "title", "Clear all filters", 1, "em-clear-filters", 3, "click"], [1, "fa-solid"], [1, "fa-solid", "fa-radio", "em-empty-icon"], [1, "em-empty-title"], [1, "em-empty-sub"], [1, "fa-solid", "fa-pause", "em-empty-icon"], [1, "fa-solid", "fa-filter", "em-empty-icon"], [1, "em-row", 3, "em-row--expanded"], [1, "em-row"], [1, "em-row-head", 3, "click"], [1, "em-row-chev", "fa-solid", "fa-chevron-right"], [1, "em-row-time"], [1, "em-row-type"], [1, "em-row-code"], [1, "em-row-component", 3, "title"], [1, "em-row-summary"], ["type", "button", "title", "Copy as JSON", 1, "em-row-copy", 3, "click"], [1, "fa-solid", "fa-clipboard"], [1, "em-row-payload"], [1, "em-row-no-payload"], [1, "fa-regular", "fa-circle"]], template: function EventMonitorComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
-            i0.ɵɵelement(3, "i", 3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "div")(5, "h3", 4);
-            i0.ɵɵtext(6, "Event Monitor");
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EventMonitorComponent, selectors: [["mj-event-monitor"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 83, vars: 32, consts: [[1, "mj-inspector", "mj-inspector--solo"], ["Role", "region", "AriaLabel", "Event monitor", "Title", "Event Monitor", "Subtitle", "Live tail of MJGlobal events with filter and pause"], ["actions", ""], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "click", "title"], ["mjButton", "", "variant", "secondary", "size", "sm", "title", "Clear all captured events", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-broom"], [1, "em-stats"], [1, "em-stat"], [1, "em-pulse"], [1, "em-stat-value"], [1, "em-stat-label"], [1, "em-stat", "em-stat--right"], [1, "em-stat-value", "em-stat-value--small"], [1, "em-toolbar"], [1, "em-search-wrap"], [1, "fa-solid", "fa-search", "em-search-icon"], ["type", "search", "placeholder", "Filter by type, component, payload\u2026", 1, "em-search", 3, "ngModelChange", "ngModel"], ["title", "Clear", 1, "em-search-clear"], [1, "em-select-wrap"], [1, "em-select-label"], [1, "em-select", 3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], ["type", "button", "title", "Clear all filters", 1, "em-clear-filters"], [1, "em-list"], [1, "em-table-head"], ["type", "button", 1, "em-th", "em-th--time", 3, "click"], [1, "fa-solid", 3, "fa-arrow-down", "fa-arrow-up"], ["type", "button", 1, "em-th", "em-th--type", 3, "click"], ["type", "button", 1, "em-th", "em-th--code", 3, "click"], ["type", "button", 1, "em-th", "em-th--component", 3, "click"], [1, "em-th", "em-th--summary"], [1, "em-th", "em-th--actions"], [1, "em-empty"], ["aria-hidden", "true", 1, "fa-solid", "fa-play"], ["aria-hidden", "true", 1, "fa-solid", "fa-pause"], ["title", "Clear", 1, "em-search-clear", 3, "click"], [1, "fa-solid", "fa-xmark"], ["type", "button", "title", "Clear all filters", 1, "em-clear-filters", 3, "click"], [1, "fa-solid"], [1, "fa-solid", "fa-radio", "em-empty-icon"], [1, "em-empty-title"], [1, "em-empty-sub"], [1, "fa-solid", "fa-pause", "em-empty-icon"], [1, "fa-solid", "fa-filter", "em-empty-icon"], [1, "em-row", 3, "em-row--expanded"], [1, "em-row"], [1, "em-row-head", 3, "click"], [1, "em-row-chev", "fa-solid", "fa-chevron-right"], [1, "em-row-time"], [1, "em-row-type"], [1, "em-row-code"], [1, "em-row-component", 3, "title"], [1, "em-row-summary"], ["type", "button", "title", "Copy as JSON", 1, "em-row-copy", 3, "click"], [1, "fa-solid", "fa-clipboard"], [1, "em-row-payload"], [1, "em-row-no-payload"], [1, "fa-regular", "fa-circle"]], template: function EventMonitorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "mj-page-header-interior", 1)(2, "div", 2)(3, "button", 3);
+            i0.ɵɵlistener("click", function EventMonitorComponent_Template_button_click_3_listener() { return ctx.TogglePause(); });
+            i0.ɵɵconditionalCreate(4, EventMonitorComponent_Conditional_4_Template, 2, 0)(5, EventMonitorComponent_Conditional_5_Template, 2, 0);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "div", 5);
-            i0.ɵɵtext(8, "Live tail of MJGlobal events with filter and pause");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelement(9, "span", 6);
-            i0.ɵɵelementStart(10, "div", 7)(11, "button", 8);
-            i0.ɵɵlistener("click", function EventMonitorComponent_Template_button_click_11_listener() { return ctx.TogglePause(); });
-            i0.ɵɵconditionalCreate(12, EventMonitorComponent_Conditional_12_Template, 2, 0)(13, EventMonitorComponent_Conditional_13_Template, 2, 0);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(14, "button", 9);
-            i0.ɵɵlistener("click", function EventMonitorComponent_Template_button_click_14_listener() { return ctx.Clear(); });
-            i0.ɵɵelement(15, "i", 10);
-            i0.ɵɵtext(16, " Clear ");
+            i0.ɵɵelementStart(6, "button", 4);
+            i0.ɵɵlistener("click", function EventMonitorComponent_Template_button_click_6_listener() { return ctx.Clear(); });
+            i0.ɵɵelement(7, "i", 5);
+            i0.ɵɵtext(8, " Clear ");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(17, "div", 11)(18, "div", 12);
-            i0.ɵɵelement(19, "i", 13);
-            i0.ɵɵelementStart(20, "div")(21, "div", 14);
-            i0.ɵɵtext(22);
+            i0.ɵɵelementStart(9, "div", 6)(10, "div", 7);
+            i0.ɵɵelement(11, "i", 8);
+            i0.ɵɵelementStart(12, "div")(13, "div", 9);
+            i0.ɵɵtext(14);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(23, "div", 15);
-            i0.ɵɵtext(24);
+            i0.ɵɵelementStart(15, "div", 10);
+            i0.ɵɵtext(16);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(25, "div", 12)(26, "div")(27, "div", 14);
-            i0.ɵɵtext(28);
+            i0.ɵɵelementStart(17, "div", 7)(18, "div")(19, "div", 9);
+            i0.ɵɵtext(20);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(29, "div", 15);
-            i0.ɵɵtext(30, "Total captured");
+            i0.ɵɵelementStart(21, "div", 10);
+            i0.ɵɵtext(22, "Total captured");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(31, "div", 12)(32, "div")(33, "div", 14);
-            i0.ɵɵtext(34);
+            i0.ɵɵelementStart(23, "div", 7)(24, "div")(25, "div", 9);
+            i0.ɵɵtext(26);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(35, "div", 15);
-            i0.ɵɵtext(36, "In buffer");
+            i0.ɵɵelementStart(27, "div", 10);
+            i0.ɵɵtext(28, "In buffer");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(37, "div", 12)(38, "div")(39, "div", 14);
-            i0.ɵɵtext(40);
+            i0.ɵɵelementStart(29, "div", 7)(30, "div")(31, "div", 9);
+            i0.ɵɵtext(32);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(41, "div", 15);
-            i0.ɵɵtext(42, "Last second");
+            i0.ɵɵelementStart(33, "div", 10);
+            i0.ɵɵtext(34, "Last second");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(43, "div", 16)(44, "div")(45, "div", 17);
-            i0.ɵɵtext(46);
+            i0.ɵɵelementStart(35, "div", 11)(36, "div")(37, "div", 12);
+            i0.ɵɵtext(38);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(47, "div", 15);
-            i0.ɵɵtext(48, "Watching for");
+            i0.ɵɵelementStart(39, "div", 10);
+            i0.ɵɵtext(40, "Watching for");
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(49, "div", 18)(50, "div", 19);
-            i0.ɵɵelement(51, "i", 20);
-            i0.ɵɵelementStart(52, "input", 21);
-            i0.ɵɵtwoWayListener("ngModelChange", function EventMonitorComponent_Template_input_ngModelChange_52_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.Filter, $event) || (ctx.Filter = $event); return $event; });
-            i0.ɵɵlistener("ngModelChange", function EventMonitorComponent_Template_input_ngModelChange_52_listener() { return ctx.PersistPrefs(); });
+            i0.ɵɵelementStart(41, "div", 13)(42, "div", 14);
+            i0.ɵɵelement(43, "i", 15);
+            i0.ɵɵelementStart(44, "input", 16);
+            i0.ɵɵtwoWayListener("ngModelChange", function EventMonitorComponent_Template_input_ngModelChange_44_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.Filter, $event) || (ctx.Filter = $event); return $event; });
+            i0.ɵɵlistener("ngModelChange", function EventMonitorComponent_Template_input_ngModelChange_44_listener() { return ctx.PersistPrefs(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(53, EventMonitorComponent_Conditional_53_Template, 2, 0, "button", 22);
+            i0.ɵɵconditionalCreate(45, EventMonitorComponent_Conditional_45_Template, 2, 0, "button", 17);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(54, "div", 23)(55, "label", 24);
-            i0.ɵɵtext(56, "Type");
+            i0.ɵɵelementStart(46, "div", 18)(47, "label", 19);
+            i0.ɵɵtext(48, "Type");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(57, "select", 25);
-            i0.ɵɵtwoWayListener("ngModelChange", function EventMonitorComponent_Template_select_ngModelChange_57_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.TypeFilter, $event) || (ctx.TypeFilter = $event); return $event; });
-            i0.ɵɵlistener("ngModelChange", function EventMonitorComponent_Template_select_ngModelChange_57_listener() { return ctx.PersistPrefs(); });
-            i0.ɵɵelementStart(58, "option", 26);
-            i0.ɵɵtext(59);
+            i0.ɵɵelementStart(49, "select", 20);
+            i0.ɵɵtwoWayListener("ngModelChange", function EventMonitorComponent_Template_select_ngModelChange_49_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.TypeFilter, $event) || (ctx.TypeFilter = $event); return $event; });
+            i0.ɵɵlistener("ngModelChange", function EventMonitorComponent_Template_select_ngModelChange_49_listener() { return ctx.PersistPrefs(); });
+            i0.ɵɵelementStart(50, "option", 21);
+            i0.ɵɵtext(51);
             i0.ɵɵelementEnd();
-            i0.ɵɵrepeaterCreate(60, EventMonitorComponent_For_61_Template, 2, 2, "option", 27, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵrepeaterCreate(52, EventMonitorComponent_For_53_Template, 2, 2, "option", 22, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(62, "div", 23)(63, "label", 24);
-            i0.ɵɵtext(64, "Component");
+            i0.ɵɵelementStart(54, "div", 18)(55, "label", 19);
+            i0.ɵɵtext(56, "Component");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(65, "select", 25);
-            i0.ɵɵtwoWayListener("ngModelChange", function EventMonitorComponent_Template_select_ngModelChange_65_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.ComponentFilter, $event) || (ctx.ComponentFilter = $event); return $event; });
-            i0.ɵɵlistener("ngModelChange", function EventMonitorComponent_Template_select_ngModelChange_65_listener() { return ctx.PersistPrefs(); });
-            i0.ɵɵelementStart(66, "option", 26);
-            i0.ɵɵtext(67);
+            i0.ɵɵelementStart(57, "select", 20);
+            i0.ɵɵtwoWayListener("ngModelChange", function EventMonitorComponent_Template_select_ngModelChange_57_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.ComponentFilter, $event) || (ctx.ComponentFilter = $event); return $event; });
+            i0.ɵɵlistener("ngModelChange", function EventMonitorComponent_Template_select_ngModelChange_57_listener() { return ctx.PersistPrefs(); });
+            i0.ɵɵelementStart(58, "option", 21);
+            i0.ɵɵtext(59);
             i0.ɵɵelementEnd();
-            i0.ɵɵrepeaterCreate(68, EventMonitorComponent_For_69_Template, 2, 2, "option", 27, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵrepeaterCreate(60, EventMonitorComponent_For_61_Template, 2, 2, "option", 22, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(70, EventMonitorComponent_Conditional_70_Template, 8, 2, "div", 23);
-            i0.ɵɵconditionalCreate(71, EventMonitorComponent_Conditional_71_Template, 3, 0, "button", 28);
+            i0.ɵɵconditionalCreate(62, EventMonitorComponent_Conditional_62_Template, 8, 2, "div", 18);
+            i0.ɵɵconditionalCreate(63, EventMonitorComponent_Conditional_63_Template, 3, 0, "button", 23);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(72, "div", 29)(73, "div", 30)(74, "button", 31);
-            i0.ɵɵlistener("click", function EventMonitorComponent_Template_button_click_74_listener() { return ctx.OnSortClick("time"); });
-            i0.ɵɵtext(75, " Time ");
-            i0.ɵɵconditionalCreate(76, EventMonitorComponent_Conditional_76_Template, 1, 4, "i", 32);
+            i0.ɵɵelementStart(64, "div", 24)(65, "div", 25)(66, "button", 26);
+            i0.ɵɵlistener("click", function EventMonitorComponent_Template_button_click_66_listener() { return ctx.OnSortClick("time"); });
+            i0.ɵɵtext(67, " Time ");
+            i0.ɵɵconditionalCreate(68, EventMonitorComponent_Conditional_68_Template, 1, 4, "i", 27);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(77, "button", 33);
-            i0.ɵɵlistener("click", function EventMonitorComponent_Template_button_click_77_listener() { return ctx.OnSortClick("type"); });
-            i0.ɵɵtext(78, " Type ");
-            i0.ɵɵconditionalCreate(79, EventMonitorComponent_Conditional_79_Template, 1, 4, "i", 32);
+            i0.ɵɵelementStart(69, "button", 28);
+            i0.ɵɵlistener("click", function EventMonitorComponent_Template_button_click_69_listener() { return ctx.OnSortClick("type"); });
+            i0.ɵɵtext(70, " Type ");
+            i0.ɵɵconditionalCreate(71, EventMonitorComponent_Conditional_71_Template, 1, 4, "i", 27);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(80, "button", 34);
-            i0.ɵɵlistener("click", function EventMonitorComponent_Template_button_click_80_listener() { return ctx.OnSortClick("eventCode"); });
-            i0.ɵɵtext(81, " Code ");
-            i0.ɵɵconditionalCreate(82, EventMonitorComponent_Conditional_82_Template, 1, 4, "i", 32);
+            i0.ɵɵelementStart(72, "button", 29);
+            i0.ɵɵlistener("click", function EventMonitorComponent_Template_button_click_72_listener() { return ctx.OnSortClick("eventCode"); });
+            i0.ɵɵtext(73, " Code ");
+            i0.ɵɵconditionalCreate(74, EventMonitorComponent_Conditional_74_Template, 1, 4, "i", 27);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(83, "button", 35);
-            i0.ɵɵlistener("click", function EventMonitorComponent_Template_button_click_83_listener() { return ctx.OnSortClick("component"); });
-            i0.ɵɵtext(84, " Component ");
-            i0.ɵɵconditionalCreate(85, EventMonitorComponent_Conditional_85_Template, 1, 4, "i", 32);
+            i0.ɵɵelementStart(75, "button", 30);
+            i0.ɵɵlistener("click", function EventMonitorComponent_Template_button_click_75_listener() { return ctx.OnSortClick("component"); });
+            i0.ɵɵtext(76, " Component ");
+            i0.ɵɵconditionalCreate(77, EventMonitorComponent_Conditional_77_Template, 1, 4, "i", 27);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(86, "span", 36);
-            i0.ɵɵtext(87, "Summary");
+            i0.ɵɵelementStart(78, "span", 31);
+            i0.ɵɵtext(79, "Summary");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(88, "span", 37);
+            i0.ɵɵelement(80, "span", 32);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(89, EventMonitorComponent_Conditional_89_Template, 4, 1, "div", 38)(90, EventMonitorComponent_Conditional_90_Template, 2, 0);
+            i0.ɵɵconditionalCreate(81, EventMonitorComponent_Conditional_81_Template, 4, 1, "div", 33)(82, EventMonitorComponent_Conditional_82_Template, 2, 0);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵadvance(11);
-            i0.ɵɵclassProp("mj-inspector__btn--success", !ctx.Paused)("em-paused", ctx.Paused);
+            i0.ɵɵadvance(3);
             i0.ɵɵproperty("title", ctx.Paused ? "Resume capture" : "Pause capture");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.Paused ? 12 : 13);
+            i0.ɵɵconditional(ctx.Paused ? 4 : 5);
             i0.ɵɵadvance(7);
             i0.ɵɵclassProp("em-pulse--paused", ctx.Paused);
             i0.ɵɵadvance(3);
@@ -610,7 +600,7 @@ let EventMonitorComponent = class EventMonitorComponent extends BaseResourceComp
             i0.ɵɵadvance(6);
             i0.ɵɵtwoWayProperty("ngModel", ctx.Filter);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.Filter ? 53 : -1);
+            i0.ɵɵconditional(ctx.Filter ? 45 : -1);
             i0.ɵɵadvance(4);
             i0.ɵɵtwoWayProperty("ngModel", ctx.TypeFilter);
             i0.ɵɵadvance(2);
@@ -624,28 +614,28 @@ let EventMonitorComponent = class EventMonitorComponent extends BaseResourceComp
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.KnownComponents);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.KnownCodes.length > 0 ? 70 : -1);
+            i0.ɵɵconditional(ctx.KnownCodes.length > 0 ? 62 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.HasActiveFilters ? 71 : -1);
+            i0.ɵɵconditional(ctx.HasActiveFilters ? 63 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵclassProp("em-th--sorted", ctx.SortField === "time");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.SortField === "time" ? 76 : -1);
+            i0.ɵɵconditional(ctx.SortField === "time" ? 68 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("em-th--sorted", ctx.SortField === "type");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.SortField === "type" ? 79 : -1);
+            i0.ɵɵconditional(ctx.SortField === "type" ? 71 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("em-th--sorted", ctx.SortField === "eventCode");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.SortField === "eventCode" ? 82 : -1);
+            i0.ɵɵconditional(ctx.SortField === "eventCode" ? 74 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("em-th--sorted", ctx.SortField === "component");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.SortField === "component" ? 85 : -1);
+            i0.ɵɵconditional(ctx.SortField === "component" ? 77 : -1);
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.FilteredEvents.length === 0 ? 89 : 90);
-        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.JsonPipe, i2.DatePipe], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n\n.mj-inspector[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-page);\n    color: var(--mj-text-primary);\n    font-family: inherit;\n}\n\n\n\n.mj-inspector__header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    flex-shrink: 0;\n}\n.mj-inspector__header-icon[_ngcontent-%COMP%] {\n    width: 36px; height: 36px;\n    border-radius: 9px;\n    background: linear-gradient(135deg, #264FAF 0%, #0076b6 100%);\n    color: white;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 15px;\n    flex-shrink: 0;\n}\n.mj-inspector__header-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    letter-spacing: -0.2px;\n}\n.mj-inspector__header-sub[_ngcontent-%COMP%] {\n    font-size: 11.5px;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n.mj-inspector__header-spacer[_ngcontent-%COMP%] { flex: 1; }\n.mj-inspector__header-actions[_ngcontent-%COMP%] {\n    display: flex; gap: 6px;\n}\n.mj-inspector__btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 7px 12px;\n    border-radius: 7px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    font-family: inherit;\n    transition: all 0.15s;\n}\n.mj-inspector__btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n.mj-inspector__btn--success[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    border-color: color-mix(in srgb, var(--mj-status-success) 30%, var(--mj-border-default));\n}\n\n\n\n.mj-inspector__body[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    min-height: 0;\n}\n.mj-inspector__sidebar[_ngcontent-%COMP%] {\n    width: 220px;\n    border-right: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    overflow-y: auto;\n    flex-shrink: 0;\n    padding: 8px;\n}\n.mj-inspector__nav-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    padding: 10px 12px;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.12s;\n    margin-bottom: 2px;\n    font-family: inherit;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    text-align: left;\n    width: 100%;\n}\n.mj-inspector__nav-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n.mj-inspector__nav-item--active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n}\n.mj-inspector__nav-item--active[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n}\n.mj-inspector__nav-icon[_ngcontent-%COMP%] {\n    width: 18px;\n    text-align: center;\n    font-size: 13px;\n    margin-top: 1px;\n    flex-shrink: 0;\n    color: inherit;\n}\n.mj-inspector__nav-text[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n.mj-inspector__nav-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.2;\n}\n.mj-inspector__nav-desc[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    margin-top: 3px;\n    line-height: 1.3;\n}\n.mj-inspector__nav-item--active[_ngcontent-%COMP%]   .mj-inspector__nav-desc[_ngcontent-%COMP%] {\n    color: color-mix(in srgb, var(--mj-brand-primary) 70%, var(--mj-text-muted));\n}\n\n\n\n.mj-inspector__content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\n}\n.mj-inspector__content-head[_ngcontent-%COMP%] {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--mj-bg-surface-card);\n}\n.mj-inspector__content-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-inspector__content-meta[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n.mj-inspector__editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n.mj-inspector__editor[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: block;\n}\n\n\n\n.mj-inspector__empty[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n@media (max-width: 700px) {\n    .mj-inspector__body[_ngcontent-%COMP%] { flex-direction: column; }\n    .mj-inspector__sidebar[_ngcontent-%COMP%] {\n        width: 100%;\n        height: auto;\n        max-height: 200px;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n        display: flex;\n        flex-wrap: wrap;\n        gap: 4px;\n    }\n    .mj-inspector__nav-item[_ngcontent-%COMP%] { flex: 1 1 calc(50% - 8px); margin-bottom: 0; }\n    .mj-inspector__nav-desc[_ngcontent-%COMP%] { display: none; }\n    .mj-inspector__header[_ngcontent-%COMP%] { padding: 12px 14px; gap: 10px; }\n}", ".mj-inspector--solo[_ngcontent-%COMP%] { background: var(--mj-bg-page); }\n.em-paused[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning) !important;\n    border-color: color-mix(in srgb, var(--mj-status-warning) 30%, var(--mj-border-default)) !important;\n}\n\n\n\n.em-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n    align-items: center;\n}\n.em-stat[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 8px 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    min-width: 130px;\n}\n.em-stat--right[_ngcontent-%COMP%] { margin-left: auto; }\n.em-stat-value[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    letter-spacing: -0.3px;\n    line-height: 1;\n}\n.em-stat-value--small[_ngcontent-%COMP%] { font-size: 13px; }\n.em-stat-label[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-spacing: 0.5px;\n    margin-top: 4px;\n}\n\n\n\n.em-pulse[_ngcontent-%COMP%] {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: var(--mj-status-success);\n    box-shadow: 0 0 0 0 var(--mj-status-success);\n    animation: _ngcontent-%COMP%_em-pulse-anim 1.6s ease-out infinite;\n}\n.em-pulse--paused[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n    box-shadow: none;\n    animation: none;\n}\n@keyframes _ngcontent-%COMP%_em-pulse-anim {\n    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 70%, transparent); }\n    70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--mj-status-success) 0%, transparent); }\n    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 0%, transparent); }\n}\n@media (prefers-reduced-motion: reduce) { .em-pulse[_ngcontent-%COMP%] { animation: none; } }\n\n\n\n.em-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-end;\n    gap: 10px;\n    padding: 10px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n    flex-wrap: wrap;\n}\n.em-search-wrap[_ngcontent-%COMP%] {\n    position: relative;\n    width: 280px;\n    flex-shrink: 0;\n}\n.em-select-wrap[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 3px;\n    min-width: 0;\n}\n.em-select-label[_ngcontent-%COMP%] {\n    font-size: 9.5px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n.em-select[_ngcontent-%COMP%] {\n    padding: 6px 10px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 7px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 12px;\n    font-family: inherit;\n    cursor: pointer;\n    min-width: 160px;\n    max-width: 240px;\n}\n.em-select[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.em-clear-filters[_ngcontent-%COMP%] {\n    align-self: flex-end;\n    padding: 6px 12px;\n    background: transparent;\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, var(--mj-border-default));\n    color: color-mix(in srgb, var(--mj-status-warning) 70%, var(--mj-text-primary));\n    border-radius: 7px;\n    font-size: 11.5px;\n    font-weight: 500;\n    cursor: pointer;\n    font-family: inherit;\n    margin-left: auto;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n.em-clear-filters[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, transparent);\n}\n.em-search-icon[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    pointer-events: none;\n}\n.em-search[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 7px 32px 7px 32px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 12.5px;\n    font-family: inherit;\n}\n.em-search[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.em-search-clear[_ngcontent-%COMP%] {\n    position: absolute;\n    right: 8px; top: 50%;\n    transform: translateY(-50%);\n    background: transparent;\n    border: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    width: 22px; height: 22px;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 11px;\n}\n.em-search-clear[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n\n\n.em-table-head[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 110px 160px 140px 200px 1fr 32px;\n    gap: 12px;\n    padding: 8px 20px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    align-items: center;\n}\n.em-th[_ngcontent-%COMP%] {\n    font-size: 10px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    font-family: inherit;\n    text-align: left;\n    padding: 4px 0;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    transition: color 0.12s;\n}\n.em-th[_ngcontent-%COMP%]:hover { color: var(--mj-text-primary); }\n.em-th--sorted[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n.em-th--sorted[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 9px; }\n.em-th--summary[_ngcontent-%COMP%], \n.em-th--actions[_ngcontent-%COMP%] {\n    cursor: default;\n}\n.em-th--summary[_ngcontent-%COMP%]:hover, \n.em-th--actions[_ngcontent-%COMP%]:hover { color: var(--mj-text-muted); }\n\n\n\n.em-list[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    background: var(--mj-bg-page);\n}\n.em-row[_ngcontent-%COMP%] {\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n    transition: background 0.1s;\n    animation: _ngcontent-%COMP%_em-row-in 0.25s ease-out;\n}\n@keyframes _ngcontent-%COMP%_em-row-in {\n    from { opacity: 0; transform: translateY(-3px); }\n    to   { opacity: 1; transform: translateY(0); }\n}\n@media (prefers-reduced-motion: reduce) { .em-row[_ngcontent-%COMP%] { animation: none; } }\n.em-row[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.em-row--expanded[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface)); }\n.em-row--expanded[_ngcontent-%COMP%]:hover { background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface)); }\n\n.em-row-head[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 12px 96px 160px 140px 200px 1fr 32px;\n    gap: 12px;\n    padding: 8px 20px;\n    cursor: pointer;\n    font-size: 12.5px;\n    align-items: center;\n}\n.em-row-chev[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n    width: 12px;\n    flex-shrink: 0;\n    transition: transform 0.15s;\n    justify-self: start;\n}\n.em-row-chev--down[_ngcontent-%COMP%] { transform: rotate(90deg); }\n.em-row-time[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.em-row-type[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-weight: 700;\n    font-size: 11px;\n    padding: 2px 8px;\n    border-radius: 4px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    justify-self: start;\n}\n.em-row-type[data-type=\"LoggedIn\"][_ngcontent-%COMP%]                       { background: color-mix(in srgb, var(--mj-status-success) 14%, transparent); color: color-mix(in srgb, var(--mj-status-success) 70%, var(--mj-text-primary)); }\n.em-row-type[data-type=\"LoggedOut\"][_ngcontent-%COMP%], \n.em-row-type[data-type=\"LoginFailed\"][_ngcontent-%COMP%], \n.em-row-type[data-type=\"LogoutFailed\"][_ngcontent-%COMP%]                   { background: color-mix(in srgb, var(--mj-status-error) 14%, transparent); color: color-mix(in srgb, var(--mj-status-error) 70%, var(--mj-text-primary)); }\n.em-row-type[data-type=\"DisplaySimpleNotificationRequest\"][_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 14%, transparent); color: color-mix(in srgb, var(--mj-status-warning) 70%, var(--mj-text-primary)); }\n.em-row-type[data-type=\"ManualResizeRequest\"][_ngcontent-%COMP%]            { background: color-mix(in srgb, #7c3aed 12%, transparent); color: #5b21b6; }\n\n.em-row-code[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.em-row-component[_ngcontent-%COMP%] {\n    font-size: 11.5px;\n    color: var(--mj-text-secondary);\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.em-row-summary[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11.5px;\n    color: var(--mj-text-muted);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n}\n.em-row-summary--empty[_ngcontent-%COMP%] { font-style: italic; opacity: 0.6; }\n\n.em-row-no-payload[_ngcontent-%COMP%] {\n    margin: 0 20px 12px 50px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px dashed var(--mj-border-default);\n    border-radius: 8px;\n    padding: 14px 18px;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n.em-row-no-payload[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 14px; }\n.em-row-copy[_ngcontent-%COMP%] {\n    background: transparent;\n    border: 1px solid transparent;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    padding: 4px 8px;\n    border-radius: 5px;\n    font-size: 11px;\n    opacity: 0;\n    transition: all 0.12s;\n}\n.em-row[_ngcontent-%COMP%]:hover   .em-row-copy[_ngcontent-%COMP%] { opacity: 1; }\n.em-row-copy[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-default);\n    color: var(--mj-text-primary);\n}\n\n.em-row-payload[_ngcontent-%COMP%] {\n    margin: 0 20px 12px 50px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 8px;\n    padding: 12px 14px;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11.5px;\n    color: var(--mj-text-primary);\n    overflow: auto;\n    max-height: 280px;\n}\n.em-row-payload[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] { white-space: pre-wrap; word-break: break-word; }\n\n\n\n.em-empty[_ngcontent-%COMP%] {\n    padding: 80px 40px;\n    text-align: center;\n    color: var(--mj-text-muted);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n}\n.em-empty-icon[_ngcontent-%COMP%] {\n    font-size: 36px;\n    opacity: 0.4;\n    color: var(--mj-brand-primary);\n}\n.em-empty-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.em-empty-sub[_ngcontent-%COMP%] {\n    font-size: 12.5px;\n    max-width: 380px;\n    line-height: 1.5;\n}\n\n@media (max-width: 800px) {\n    .em-stats[_ngcontent-%COMP%] { flex-wrap: wrap; }\n    .em-stat--right[_ngcontent-%COMP%] { margin-left: 0; }\n    .em-row-component[_ngcontent-%COMP%] { display: none; }\n    .em-row-time[_ngcontent-%COMP%] { min-width: 70px; }\n    .em-row-payload[_ngcontent-%COMP%] { margin-left: 20px; }\n}"] });
+            i0.ɵɵconditional(ctx.FilteredEvents.length === 0 ? 81 : 82);
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJButtonDirective, i2.MJPageHeaderInteriorComponent, i3.JsonPipe, i3.DatePipe], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.mj-inspector[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-page);\n    color: var(--mj-text-primary);\n    font-family: inherit;\n}\n\n\n\n.mj-inspector__content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\n}\n.mj-inspector__content-head[_ngcontent-%COMP%] {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--mj-bg-surface-card);\n}\n.mj-inspector__content-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-inspector__content-meta[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n.mj-inspector__editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n.mj-inspector__editor[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: block;\n}\n\n\n\n.mj-inspector__empty[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}", ".mj-inspector--solo[_ngcontent-%COMP%] { background: var(--mj-bg-page); }\n\n\n\n.em-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n    align-items: center;\n}\n.em-stat[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 8px 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    min-width: 130px;\n}\n.em-stat--right[_ngcontent-%COMP%] { margin-left: auto; }\n.em-stat-value[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    letter-spacing: -0.3px;\n    line-height: 1;\n}\n.em-stat-value--small[_ngcontent-%COMP%] { font-size: 13px; }\n.em-stat-label[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-spacing: 0.5px;\n    margin-top: 4px;\n}\n\n\n\n.em-pulse[_ngcontent-%COMP%] {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: var(--mj-status-success);\n    box-shadow: 0 0 0 0 var(--mj-status-success);\n    animation: _ngcontent-%COMP%_em-pulse-anim 1.6s ease-out infinite;\n}\n.em-pulse--paused[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n    box-shadow: none;\n    animation: none;\n}\n@keyframes _ngcontent-%COMP%_em-pulse-anim {\n    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 70%, transparent); }\n    70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--mj-status-success) 0%, transparent); }\n    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 0%, transparent); }\n}\n@media (prefers-reduced-motion: reduce) { .em-pulse[_ngcontent-%COMP%] { animation: none; } }\n\n\n\n.em-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-end;\n    gap: 10px;\n    padding: 10px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n    flex-wrap: wrap;\n}\n.em-search-wrap[_ngcontent-%COMP%] {\n    position: relative;\n    width: 280px;\n    flex-shrink: 0;\n}\n.em-select-wrap[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 3px;\n    min-width: 0;\n}\n.em-select-label[_ngcontent-%COMP%] {\n    font-size: 9.5px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n.em-select[_ngcontent-%COMP%] {\n    padding: 6px 10px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 7px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 12px;\n    font-family: inherit;\n    cursor: pointer;\n    min-width: 160px;\n    max-width: 240px;\n}\n.em-select[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.em-clear-filters[_ngcontent-%COMP%] {\n    align-self: flex-end;\n    padding: 6px 12px;\n    background: transparent;\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, var(--mj-border-default));\n    color: color-mix(in srgb, var(--mj-status-warning) 70%, var(--mj-text-primary));\n    border-radius: 7px;\n    font-size: 11.5px;\n    font-weight: 500;\n    cursor: pointer;\n    font-family: inherit;\n    margin-left: auto;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n.em-clear-filters[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, transparent);\n}\n.em-search-icon[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    pointer-events: none;\n}\n.em-search[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 7px 32px 7px 32px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 12.5px;\n    font-family: inherit;\n}\n.em-search[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.em-search-clear[_ngcontent-%COMP%] {\n    position: absolute;\n    right: 8px; top: 50%;\n    transform: translateY(-50%);\n    background: transparent;\n    border: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    width: 22px; height: 22px;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 11px;\n}\n.em-search-clear[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n\n\n.em-table-head[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 110px 160px 140px 200px 1fr 32px;\n    gap: 12px;\n    padding: 8px 20px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    align-items: center;\n}\n.em-th[_ngcontent-%COMP%] {\n    font-size: 10px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    font-family: inherit;\n    text-align: left;\n    padding: 4px 0;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    transition: color 0.12s;\n}\n.em-th[_ngcontent-%COMP%]:hover { color: var(--mj-text-primary); }\n.em-th--sorted[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n.em-th--sorted[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 9px; }\n.em-th--summary[_ngcontent-%COMP%], \n.em-th--actions[_ngcontent-%COMP%] {\n    cursor: default;\n}\n.em-th--summary[_ngcontent-%COMP%]:hover, \n.em-th--actions[_ngcontent-%COMP%]:hover { color: var(--mj-text-muted); }\n\n\n\n.em-list[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    background: var(--mj-bg-page);\n}\n.em-row[_ngcontent-%COMP%] {\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n    transition: background 0.1s;\n    animation: _ngcontent-%COMP%_em-row-in 0.25s ease-out;\n}\n@keyframes _ngcontent-%COMP%_em-row-in {\n    from { opacity: 0; transform: translateY(-3px); }\n    to   { opacity: 1; transform: translateY(0); }\n}\n@media (prefers-reduced-motion: reduce) { .em-row[_ngcontent-%COMP%] { animation: none; } }\n.em-row[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.em-row--expanded[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface)); }\n.em-row--expanded[_ngcontent-%COMP%]:hover { background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface)); }\n\n.em-row-head[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 12px 96px 160px 140px 200px 1fr 32px;\n    gap: 12px;\n    padding: 8px 20px;\n    cursor: pointer;\n    font-size: 12.5px;\n    align-items: center;\n}\n.em-row-chev[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n    width: 12px;\n    flex-shrink: 0;\n    transition: transform 0.15s;\n    justify-self: start;\n}\n.em-row-chev--down[_ngcontent-%COMP%] { transform: rotate(90deg); }\n.em-row-time[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.em-row-type[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-weight: 700;\n    font-size: 11px;\n    padding: 2px 8px;\n    border-radius: 4px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    justify-self: start;\n}\n.em-row-type[data-type=\"LoggedIn\"][_ngcontent-%COMP%]                       { background: color-mix(in srgb, var(--mj-status-success) 14%, transparent); color: color-mix(in srgb, var(--mj-status-success) 70%, var(--mj-text-primary)); }\n.em-row-type[data-type=\"LoggedOut\"][_ngcontent-%COMP%], \n.em-row-type[data-type=\"LoginFailed\"][_ngcontent-%COMP%], \n.em-row-type[data-type=\"LogoutFailed\"][_ngcontent-%COMP%]                   { background: color-mix(in srgb, var(--mj-status-error) 14%, transparent); color: color-mix(in srgb, var(--mj-status-error) 70%, var(--mj-text-primary)); }\n.em-row-type[data-type=\"DisplaySimpleNotificationRequest\"][_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 14%, transparent); color: color-mix(in srgb, var(--mj-status-warning) 70%, var(--mj-text-primary)); }\n.em-row-type[data-type=\"ManualResizeRequest\"][_ngcontent-%COMP%]            { background: color-mix(in srgb, #7c3aed 12%, transparent); color: #5b21b6; }\n\n.em-row-code[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.em-row-component[_ngcontent-%COMP%] {\n    font-size: 11.5px;\n    color: var(--mj-text-secondary);\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.em-row-summary[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11.5px;\n    color: var(--mj-text-muted);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n}\n.em-row-summary--empty[_ngcontent-%COMP%] { font-style: italic; opacity: 0.6; }\n\n.em-row-no-payload[_ngcontent-%COMP%] {\n    margin: 0 20px 12px 50px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px dashed var(--mj-border-default);\n    border-radius: 8px;\n    padding: 14px 18px;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n.em-row-no-payload[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 14px; }\n.em-row-copy[_ngcontent-%COMP%] {\n    background: transparent;\n    border: 1px solid transparent;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    padding: 4px 8px;\n    border-radius: 5px;\n    font-size: 11px;\n    opacity: 0;\n    transition: all 0.12s;\n}\n.em-row[_ngcontent-%COMP%]:hover   .em-row-copy[_ngcontent-%COMP%] { opacity: 1; }\n.em-row-copy[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-default);\n    color: var(--mj-text-primary);\n}\n\n.em-row-payload[_ngcontent-%COMP%] {\n    margin: 0 20px 12px 50px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 8px;\n    padding: 12px 14px;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11.5px;\n    color: var(--mj-text-primary);\n    overflow: auto;\n    max-height: 280px;\n}\n.em-row-payload[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] { white-space: pre-wrap; word-break: break-word; }\n\n\n\n.em-empty[_ngcontent-%COMP%] {\n    padding: 80px 40px;\n    text-align: center;\n    color: var(--mj-text-muted);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n}\n.em-empty-icon[_ngcontent-%COMP%] {\n    font-size: 36px;\n    opacity: 0.4;\n    color: var(--mj-brand-primary);\n}\n.em-empty-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.em-empty-sub[_ngcontent-%COMP%] {\n    font-size: 12.5px;\n    max-width: 380px;\n    line-height: 1.5;\n}\n\n@media (max-width: 800px) {\n    .em-stats[_ngcontent-%COMP%] { flex-wrap: wrap; }\n    .em-stat--right[_ngcontent-%COMP%] { margin-left: 0; }\n    .em-row-component[_ngcontent-%COMP%] { display: none; }\n    .em-row-time[_ngcontent-%COMP%] { min-width: 70px; }\n    .em-row-payload[_ngcontent-%COMP%] { margin-left: 20px; }\n}"] });
 };
 EventMonitorComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'EventMonitorInspector')
@@ -653,7 +643,7 @@ EventMonitorComponent = __decorate([
 export { EventMonitorComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EventMonitorComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-event-monitor', template: "<div class=\"mj-inspector mj-inspector--solo\">\n    <div class=\"mj-inspector__header\">\n        <div class=\"mj-inspector__header-icon\"><i class=\"fa-solid fa-bolt\"></i></div>\n        <div>\n            <h3 class=\"mj-inspector__header-title\">Event Monitor</h3>\n            <div class=\"mj-inspector__header-sub\">Live tail of MJGlobal events with filter and pause</div>\n        </div>\n        <span class=\"mj-inspector__header-spacer\"></span>\n        <div class=\"mj-inspector__header-actions\">\n            <button class=\"mj-inspector__btn\"\n                    [class.mj-inspector__btn--success]=\"!Paused\"\n                    [class.em-paused]=\"Paused\"\n                    type=\"button\" (click)=\"TogglePause()\"\n                    [title]=\"Paused ? 'Resume capture' : 'Pause capture'\">\n                @if (Paused) {\n                    <i class=\"fa-solid fa-play\"></i> Resume\n                } @else {\n                    <i class=\"fa-solid fa-pause\"></i> Pause\n                }\n            </button>\n            <button class=\"mj-inspector__btn\" type=\"button\" (click)=\"Clear()\" title=\"Clear all captured events\">\n                <i class=\"fa-solid fa-broom\"></i> Clear\n            </button>\n        </div>\n    </div>\n\n    <div class=\"em-stats\">\n        <div class=\"em-stat\">\n            <i class=\"em-pulse\" [class.em-pulse--paused]=\"Paused\"></i>\n            <div>\n                <div class=\"em-stat-value\">{{ Paused ? 'PAUSED' : 'LIVE' }}</div>\n                <div class=\"em-stat-label\">{{ Paused ? 'Capture suspended' : 'Capturing events' }}</div>\n            </div>\n        </div>\n        <div class=\"em-stat\">\n            <div>\n                <div class=\"em-stat-value\">{{ Stats.captured }}</div>\n                <div class=\"em-stat-label\">Total captured</div>\n            </div>\n        </div>\n        <div class=\"em-stat\">\n            <div>\n                <div class=\"em-stat-value\">{{ Stats.kept }} / {{ MaxEvents }}</div>\n                <div class=\"em-stat-label\">In buffer</div>\n            </div>\n        </div>\n        <div class=\"em-stat\">\n            <div>\n                <div class=\"em-stat-value\">{{ Stats.perSecond }}/s</div>\n                <div class=\"em-stat-label\">Last second</div>\n            </div>\n        </div>\n        <div class=\"em-stat em-stat--right\">\n            <div>\n                <div class=\"em-stat-value em-stat-value--small\">{{ UptimeLabel }}</div>\n                <div class=\"em-stat-label\">Watching for</div>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"em-toolbar\">\n        <div class=\"em-search-wrap\">\n            <i class=\"fa-solid fa-search em-search-icon\"></i>\n            <input type=\"search\"\n                   class=\"em-search\"\n                   placeholder=\"Filter by type, component, payload\u2026\"\n                   [(ngModel)]=\"Filter\"\n                   (ngModelChange)=\"PersistPrefs()\" />\n            @if (Filter) {\n                <button class=\"em-search-clear\" (click)=\"Filter = ''\" title=\"Clear\">\n                    <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n            }\n        </div>\n\n        <div class=\"em-select-wrap\">\n            <label class=\"em-select-label\">Type</label>\n            <select class=\"em-select\" [(ngModel)]=\"TypeFilter\" (ngModelChange)=\"PersistPrefs()\">\n                <option value=\"\">All types ({{ KnownTypes.length }})</option>\n                @for (t of KnownTypes; track t) {\n                    <option [value]=\"t\">{{ t }}</option>\n                }\n            </select>\n        </div>\n\n        <div class=\"em-select-wrap\">\n            <label class=\"em-select-label\">Component</label>\n            <select class=\"em-select\" [(ngModel)]=\"ComponentFilter\" (ngModelChange)=\"PersistPrefs()\">\n                <option value=\"\">All components ({{ KnownComponents.length }})</option>\n                @for (c of KnownComponents; track c) {\n                    <option [value]=\"c\">{{ c }}</option>\n                }\n            </select>\n        </div>\n\n        @if (KnownCodes.length > 0) {\n            <div class=\"em-select-wrap\">\n                <label class=\"em-select-label\">Code</label>\n                <select class=\"em-select\" [(ngModel)]=\"CodeFilter\" (ngModelChange)=\"PersistPrefs()\">\n                    <option value=\"\">All codes ({{ KnownCodes.length }})</option>\n                    @for (c of KnownCodes; track c) {\n                        <option [value]=\"c\">{{ c }}</option>\n                    }\n                </select>\n            </div>\n        }\n\n        @if (HasActiveFilters) {\n            <button class=\"em-clear-filters\" type=\"button\" (click)=\"ClearFilters()\" title=\"Clear all filters\">\n                <i class=\"fa-solid fa-xmark\"></i> Clear filters\n            </button>\n        }\n    </div>\n\n    <div class=\"em-list\">\n        <div class=\"em-table-head\">\n            <button type=\"button\"\n                    class=\"em-th em-th--time\"\n                    [class.em-th--sorted]=\"SortField === 'time'\"\n                    (click)=\"OnSortClick('time')\">\n                Time\n                @if (SortField === 'time') {\n                    <i class=\"fa-solid\" [class.fa-arrow-down]=\"SortDir === 'desc'\" [class.fa-arrow-up]=\"SortDir === 'asc'\"></i>\n                }\n            </button>\n            <button type=\"button\"\n                    class=\"em-th em-th--type\"\n                    [class.em-th--sorted]=\"SortField === 'type'\"\n                    (click)=\"OnSortClick('type')\">\n                Type\n                @if (SortField === 'type') {\n                    <i class=\"fa-solid\" [class.fa-arrow-down]=\"SortDir === 'desc'\" [class.fa-arrow-up]=\"SortDir === 'asc'\"></i>\n                }\n            </button>\n            <button type=\"button\"\n                    class=\"em-th em-th--code\"\n                    [class.em-th--sorted]=\"SortField === 'eventCode'\"\n                    (click)=\"OnSortClick('eventCode')\">\n                Code\n                @if (SortField === 'eventCode') {\n                    <i class=\"fa-solid\" [class.fa-arrow-down]=\"SortDir === 'desc'\" [class.fa-arrow-up]=\"SortDir === 'asc'\"></i>\n                }\n            </button>\n            <button type=\"button\"\n                    class=\"em-th em-th--component\"\n                    [class.em-th--sorted]=\"SortField === 'component'\"\n                    (click)=\"OnSortClick('component')\">\n                Component\n                @if (SortField === 'component') {\n                    <i class=\"fa-solid\" [class.fa-arrow-down]=\"SortDir === 'desc'\" [class.fa-arrow-up]=\"SortDir === 'asc'\"></i>\n                }\n            </button>\n            <span class=\"em-th em-th--summary\">Summary</span>\n            <span class=\"em-th em-th--actions\"></span>\n        </div>\n\n        @if (FilteredEvents.length === 0) {\n            <div class=\"em-empty\">\n                @if (Stats.captured === 0) {\n                    <i class=\"fa-solid fa-radio em-empty-icon\"></i>\n                    <div class=\"em-empty-title\">Listening for events\u2026</div>\n                    <div class=\"em-empty-sub\">Trigger an action \u2014 saves, navigation, AI events all show up here.</div>\n                } @else if (Paused) {\n                    <i class=\"fa-solid fa-pause em-empty-icon\"></i>\n                    <div class=\"em-empty-title\">Capture is paused</div>\n                    <div class=\"em-empty-sub\">{{ Stats.captured }} events fired since you paused. Click Resume to start collecting again.</div>\n                } @else {\n                    <i class=\"fa-solid fa-filter em-empty-icon\"></i>\n                    <div class=\"em-empty-title\">No events match your filter</div>\n                    <div class=\"em-empty-sub\">{{ Stats.kept }} events in buffer \u00B7 clear filters to see them.</div>\n                }\n            </div>\n        } @else {\n            @for (evt of FilteredEvents; track TrackBySeq($index, evt)) {\n                <div class=\"em-row\" [class.em-row--expanded]=\"evt.expanded\">\n                    <div class=\"em-row-head\" (click)=\"ToggleRow(evt)\">\n                        <i class=\"em-row-chev fa-solid fa-chevron-right\"\n                           [class.em-row-chev--down]=\"evt.expanded\"></i>\n                        <span class=\"em-row-time\">{{ evt.timestamp | date:'HH:mm:ss.SSS' }}</span>\n                        <span class=\"em-row-type\" [attr.data-type]=\"evt.type\">{{ evt.type }}</span>\n                        <span class=\"em-row-code\">{{ evt.eventCode || '\u2014' }}</span>\n                        <span class=\"em-row-component\" [title]=\"evt.componentName\">{{ evt.componentName }}</span>\n                        <span class=\"em-row-summary\" [class.em-row-summary--empty]=\"!evt.hasPayload\">{{ evt.summary }}</span>\n                        <button class=\"em-row-copy\"\n                                type=\"button\"\n                                (click)=\"$event.stopPropagation(); OnCopyRow(evt)\"\n                                title=\"Copy as JSON\">\n                            <i class=\"fa-solid fa-clipboard\"></i>\n                        </button>\n                    </div>\n                    @if (evt.expanded) {\n                        @if (evt.hasPayload) {\n                            <pre class=\"em-row-payload\"><code>{{ evt.args | json }}</code></pre>\n                        } @else {\n                            <div class=\"em-row-no-payload\">\n                                <i class=\"fa-regular fa-circle\"></i>\n                                <span>This event has no payload.</span>\n                            </div>\n                        }\n                    }\n                </div>\n            }\n        }\n    </div>\n</div>\n", styles: [":host { display: block; height: 100%; }\n\n.mj-inspector {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-page);\n    color: var(--mj-text-primary);\n    font-family: inherit;\n}\n\n/* Header */\n.mj-inspector__header {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    flex-shrink: 0;\n}\n.mj-inspector__header-icon {\n    width: 36px; height: 36px;\n    border-radius: 9px;\n    background: linear-gradient(135deg, #264FAF 0%, #0076b6 100%);\n    color: white;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 15px;\n    flex-shrink: 0;\n}\n.mj-inspector__header-title {\n    margin: 0;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    letter-spacing: -0.2px;\n}\n.mj-inspector__header-sub {\n    font-size: 11.5px;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n.mj-inspector__header-spacer { flex: 1; }\n.mj-inspector__header-actions {\n    display: flex; gap: 6px;\n}\n.mj-inspector__btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 7px 12px;\n    border-radius: 7px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    font-family: inherit;\n    transition: all 0.15s;\n}\n.mj-inspector__btn:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n.mj-inspector__btn--success {\n    color: var(--mj-status-success);\n    border-color: color-mix(in srgb, var(--mj-status-success) 30%, var(--mj-border-default));\n}\n\n/* Layout: sidebar + content */\n.mj-inspector__body {\n    display: flex;\n    flex: 1;\n    min-height: 0;\n}\n.mj-inspector__sidebar {\n    width: 220px;\n    border-right: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    overflow-y: auto;\n    flex-shrink: 0;\n    padding: 8px;\n}\n.mj-inspector__nav-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    padding: 10px 12px;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.12s;\n    margin-bottom: 2px;\n    font-family: inherit;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    text-align: left;\n    width: 100%;\n}\n.mj-inspector__nav-item:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n.mj-inspector__nav-item--active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n}\n.mj-inspector__nav-item--active:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n}\n.mj-inspector__nav-icon {\n    width: 18px;\n    text-align: center;\n    font-size: 13px;\n    margin-top: 1px;\n    flex-shrink: 0;\n    color: inherit;\n}\n.mj-inspector__nav-text { flex: 1; min-width: 0; }\n.mj-inspector__nav-label {\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.2;\n}\n.mj-inspector__nav-desc {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    margin-top: 3px;\n    line-height: 1.3;\n}\n.mj-inspector__nav-item--active .mj-inspector__nav-desc {\n    color: color-mix(in srgb, var(--mj-brand-primary) 70%, var(--mj-text-muted));\n}\n\n/* Content area */\n.mj-inspector__content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\n}\n.mj-inspector__content-head {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--mj-bg-surface-card);\n}\n.mj-inspector__content-title {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-inspector__content-meta {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n.mj-inspector__editor {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n.mj-inspector__editor mj-code-editor {\n    flex: 1;\n    min-height: 0;\n    display: block;\n}\n\n/* Empty state */\n.mj-inspector__empty {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n@media (max-width: 700px) {\n    .mj-inspector__body { flex-direction: column; }\n    .mj-inspector__sidebar {\n        width: 100%;\n        height: auto;\n        max-height: 200px;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n        display: flex;\n        flex-wrap: wrap;\n        gap: 4px;\n    }\n    .mj-inspector__nav-item { flex: 1 1 calc(50% - 8px); margin-bottom: 0; }\n    .mj-inspector__nav-desc { display: none; }\n    .mj-inspector__header { padding: 12px 14px; gap: 10px; }\n}\n", ".mj-inspector--solo { background: var(--mj-bg-page); }\n.em-paused {\n    color: var(--mj-status-warning) !important;\n    border-color: color-mix(in srgb, var(--mj-status-warning) 30%, var(--mj-border-default)) !important;\n}\n\n/* Stats row */\n.em-stats {\n    display: flex;\n    gap: 16px;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n    align-items: center;\n}\n.em-stat {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 8px 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    min-width: 130px;\n}\n.em-stat--right { margin-left: auto; }\n.em-stat-value {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    letter-spacing: -0.3px;\n    line-height: 1;\n}\n.em-stat-value--small { font-size: 13px; }\n.em-stat-label {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-spacing: 0.5px;\n    margin-top: 4px;\n}\n\n/* Live pulse */\n.em-pulse {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: var(--mj-status-success);\n    box-shadow: 0 0 0 0 var(--mj-status-success);\n    animation: em-pulse-anim 1.6s ease-out infinite;\n}\n.em-pulse--paused {\n    background: var(--mj-status-warning);\n    box-shadow: none;\n    animation: none;\n}\n@keyframes em-pulse-anim {\n    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 70%, transparent); }\n    70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--mj-status-success) 0%, transparent); }\n    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 0%, transparent); }\n}\n@media (prefers-reduced-motion: reduce) { .em-pulse { animation: none; } }\n\n/* Toolbar */\n.em-toolbar {\n    display: flex;\n    align-items: flex-end;\n    gap: 10px;\n    padding: 10px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n    flex-wrap: wrap;\n}\n.em-search-wrap {\n    position: relative;\n    width: 280px;\n    flex-shrink: 0;\n}\n.em-select-wrap {\n    display: flex;\n    flex-direction: column;\n    gap: 3px;\n    min-width: 0;\n}\n.em-select-label {\n    font-size: 9.5px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n.em-select {\n    padding: 6px 10px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 7px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 12px;\n    font-family: inherit;\n    cursor: pointer;\n    min-width: 160px;\n    max-width: 240px;\n}\n.em-select:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.em-clear-filters {\n    align-self: flex-end;\n    padding: 6px 12px;\n    background: transparent;\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, var(--mj-border-default));\n    color: color-mix(in srgb, var(--mj-status-warning) 70%, var(--mj-text-primary));\n    border-radius: 7px;\n    font-size: 11.5px;\n    font-weight: 500;\n    cursor: pointer;\n    font-family: inherit;\n    margin-left: auto;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n.em-clear-filters:hover {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, transparent);\n}\n.em-search-icon {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    pointer-events: none;\n}\n.em-search {\n    width: 100%;\n    padding: 7px 32px 7px 32px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 12.5px;\n    font-family: inherit;\n}\n.em-search:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.em-search-clear {\n    position: absolute;\n    right: 8px; top: 50%;\n    transform: translateY(-50%);\n    background: transparent;\n    border: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    width: 22px; height: 22px;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 11px;\n}\n.em-search-clear:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n/* Table head with sortable columns */\n.em-table-head {\n    display: grid;\n    grid-template-columns: 110px 160px 140px 200px 1fr 32px;\n    gap: 12px;\n    padding: 8px 20px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    align-items: center;\n}\n.em-th {\n    font-size: 10px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    font-family: inherit;\n    text-align: left;\n    padding: 4px 0;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    transition: color 0.12s;\n}\n.em-th:hover { color: var(--mj-text-primary); }\n.em-th--sorted {\n    color: var(--mj-brand-primary);\n}\n.em-th--sorted i { font-size: 9px; }\n.em-th--summary,\n.em-th--actions {\n    cursor: default;\n}\n.em-th--summary:hover,\n.em-th--actions:hover { color: var(--mj-text-muted); }\n\n/* List */\n.em-list {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    background: var(--mj-bg-page);\n}\n.em-row {\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n    transition: background 0.1s;\n    animation: em-row-in 0.25s ease-out;\n}\n@keyframes em-row-in {\n    from { opacity: 0; transform: translateY(-3px); }\n    to   { opacity: 1; transform: translateY(0); }\n}\n@media (prefers-reduced-motion: reduce) { .em-row { animation: none; } }\n.em-row:hover { background: var(--mj-bg-surface-hover); }\n.em-row--expanded { background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface)); }\n.em-row--expanded:hover { background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface)); }\n\n.em-row-head {\n    display: grid;\n    grid-template-columns: 12px 96px 160px 140px 200px 1fr 32px;\n    gap: 12px;\n    padding: 8px 20px;\n    cursor: pointer;\n    font-size: 12.5px;\n    align-items: center;\n}\n.em-row-chev {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n    width: 12px;\n    flex-shrink: 0;\n    transition: transform 0.15s;\n    justify-self: start;\n}\n.em-row-chev--down { transform: rotate(90deg); }\n.em-row-time {\n    color: var(--mj-text-muted);\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.em-row-type {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-weight: 700;\n    font-size: 11px;\n    padding: 2px 8px;\n    border-radius: 4px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    justify-self: start;\n}\n.em-row-type[data-type=\"LoggedIn\"]                       { background: color-mix(in srgb, var(--mj-status-success) 14%, transparent); color: color-mix(in srgb, var(--mj-status-success) 70%, var(--mj-text-primary)); }\n.em-row-type[data-type=\"LoggedOut\"],\n.em-row-type[data-type=\"LoginFailed\"],\n.em-row-type[data-type=\"LogoutFailed\"]                   { background: color-mix(in srgb, var(--mj-status-error) 14%, transparent); color: color-mix(in srgb, var(--mj-status-error) 70%, var(--mj-text-primary)); }\n.em-row-type[data-type=\"DisplaySimpleNotificationRequest\"] { background: color-mix(in srgb, var(--mj-status-warning) 14%, transparent); color: color-mix(in srgb, var(--mj-status-warning) 70%, var(--mj-text-primary)); }\n.em-row-type[data-type=\"ManualResizeRequest\"]            { background: color-mix(in srgb, #7c3aed 12%, transparent); color: #5b21b6; }\n\n.em-row-code {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.em-row-component {\n    font-size: 11.5px;\n    color: var(--mj-text-secondary);\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.em-row-summary {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11.5px;\n    color: var(--mj-text-muted);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n}\n.em-row-summary--empty { font-style: italic; opacity: 0.6; }\n\n.em-row-no-payload {\n    margin: 0 20px 12px 50px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px dashed var(--mj-border-default);\n    border-radius: 8px;\n    padding: 14px 18px;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n.em-row-no-payload i { font-size: 14px; }\n.em-row-copy {\n    background: transparent;\n    border: 1px solid transparent;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    padding: 4px 8px;\n    border-radius: 5px;\n    font-size: 11px;\n    opacity: 0;\n    transition: all 0.12s;\n}\n.em-row:hover .em-row-copy { opacity: 1; }\n.em-row-copy:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-default);\n    color: var(--mj-text-primary);\n}\n\n.em-row-payload {\n    margin: 0 20px 12px 50px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 8px;\n    padding: 12px 14px;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11.5px;\n    color: var(--mj-text-primary);\n    overflow: auto;\n    max-height: 280px;\n}\n.em-row-payload code { white-space: pre-wrap; word-break: break-word; }\n\n/* Empty state */\n.em-empty {\n    padding: 80px 40px;\n    text-align: center;\n    color: var(--mj-text-muted);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n}\n.em-empty-icon {\n    font-size: 36px;\n    opacity: 0.4;\n    color: var(--mj-brand-primary);\n}\n.em-empty-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.em-empty-sub {\n    font-size: 12.5px;\n    max-width: 380px;\n    line-height: 1.5;\n}\n\n@media (max-width: 800px) {\n    .em-stats { flex-wrap: wrap; }\n    .em-stat--right { margin-left: 0; }\n    .em-row-component { display: none; }\n    .em-row-time { min-width: 70px; }\n    .em-row-payload { margin-left: 20px; }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-event-monitor', template: "<div class=\"mj-inspector mj-inspector--solo\">\n    <mj-page-header-interior\n        Role=\"region\"\n        AriaLabel=\"Event monitor\"\n        Title=\"Event Monitor\"\n        Subtitle=\"Live tail of MJGlobal events with filter and pause\">\n        <div actions>\n            <button mjButton\n                    variant=\"secondary\"\n                    size=\"sm\"\n                    (click)=\"TogglePause()\"\n                    [title]=\"Paused ? 'Resume capture' : 'Pause capture'\">\n                @if (Paused) {\n                    <i class=\"fa-solid fa-play\" aria-hidden=\"true\"></i> Resume\n                } @else {\n                    <i class=\"fa-solid fa-pause\" aria-hidden=\"true\"></i> Pause\n                }\n            </button>\n            <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"Clear()\" title=\"Clear all captured events\">\n                <i class=\"fa-solid fa-broom\" aria-hidden=\"true\"></i> Clear\n            </button>\n        </div>\n    </mj-page-header-interior>\n\n    <div class=\"em-stats\">\n        <div class=\"em-stat\">\n            <i class=\"em-pulse\" [class.em-pulse--paused]=\"Paused\"></i>\n            <div>\n                <div class=\"em-stat-value\">{{ Paused ? 'PAUSED' : 'LIVE' }}</div>\n                <div class=\"em-stat-label\">{{ Paused ? 'Capture suspended' : 'Capturing events' }}</div>\n            </div>\n        </div>\n        <div class=\"em-stat\">\n            <div>\n                <div class=\"em-stat-value\">{{ Stats.captured }}</div>\n                <div class=\"em-stat-label\">Total captured</div>\n            </div>\n        </div>\n        <div class=\"em-stat\">\n            <div>\n                <div class=\"em-stat-value\">{{ Stats.kept }} / {{ MaxEvents }}</div>\n                <div class=\"em-stat-label\">In buffer</div>\n            </div>\n        </div>\n        <div class=\"em-stat\">\n            <div>\n                <div class=\"em-stat-value\">{{ Stats.perSecond }}/s</div>\n                <div class=\"em-stat-label\">Last second</div>\n            </div>\n        </div>\n        <div class=\"em-stat em-stat--right\">\n            <div>\n                <div class=\"em-stat-value em-stat-value--small\">{{ UptimeLabel }}</div>\n                <div class=\"em-stat-label\">Watching for</div>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"em-toolbar\">\n        <div class=\"em-search-wrap\">\n            <i class=\"fa-solid fa-search em-search-icon\"></i>\n            <input type=\"search\"\n                   class=\"em-search\"\n                   placeholder=\"Filter by type, component, payload\u2026\"\n                   [(ngModel)]=\"Filter\"\n                   (ngModelChange)=\"PersistPrefs()\" />\n            @if (Filter) {\n                <button class=\"em-search-clear\" (click)=\"Filter = ''\" title=\"Clear\">\n                    <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n            }\n        </div>\n\n        <div class=\"em-select-wrap\">\n            <label class=\"em-select-label\">Type</label>\n            <select class=\"em-select\" [(ngModel)]=\"TypeFilter\" (ngModelChange)=\"PersistPrefs()\">\n                <option value=\"\">All types ({{ KnownTypes.length }})</option>\n                @for (t of KnownTypes; track t) {\n                    <option [value]=\"t\">{{ t }}</option>\n                }\n            </select>\n        </div>\n\n        <div class=\"em-select-wrap\">\n            <label class=\"em-select-label\">Component</label>\n            <select class=\"em-select\" [(ngModel)]=\"ComponentFilter\" (ngModelChange)=\"PersistPrefs()\">\n                <option value=\"\">All components ({{ KnownComponents.length }})</option>\n                @for (c of KnownComponents; track c) {\n                    <option [value]=\"c\">{{ c }}</option>\n                }\n            </select>\n        </div>\n\n        @if (KnownCodes.length > 0) {\n            <div class=\"em-select-wrap\">\n                <label class=\"em-select-label\">Code</label>\n                <select class=\"em-select\" [(ngModel)]=\"CodeFilter\" (ngModelChange)=\"PersistPrefs()\">\n                    <option value=\"\">All codes ({{ KnownCodes.length }})</option>\n                    @for (c of KnownCodes; track c) {\n                        <option [value]=\"c\">{{ c }}</option>\n                    }\n                </select>\n            </div>\n        }\n\n        @if (HasActiveFilters) {\n            <button class=\"em-clear-filters\" type=\"button\" (click)=\"ClearFilters()\" title=\"Clear all filters\">\n                <i class=\"fa-solid fa-xmark\"></i> Clear filters\n            </button>\n        }\n    </div>\n\n    <div class=\"em-list\">\n        <div class=\"em-table-head\">\n            <button type=\"button\"\n                    class=\"em-th em-th--time\"\n                    [class.em-th--sorted]=\"SortField === 'time'\"\n                    (click)=\"OnSortClick('time')\">\n                Time\n                @if (SortField === 'time') {\n                    <i class=\"fa-solid\" [class.fa-arrow-down]=\"SortDir === 'desc'\" [class.fa-arrow-up]=\"SortDir === 'asc'\"></i>\n                }\n            </button>\n            <button type=\"button\"\n                    class=\"em-th em-th--type\"\n                    [class.em-th--sorted]=\"SortField === 'type'\"\n                    (click)=\"OnSortClick('type')\">\n                Type\n                @if (SortField === 'type') {\n                    <i class=\"fa-solid\" [class.fa-arrow-down]=\"SortDir === 'desc'\" [class.fa-arrow-up]=\"SortDir === 'asc'\"></i>\n                }\n            </button>\n            <button type=\"button\"\n                    class=\"em-th em-th--code\"\n                    [class.em-th--sorted]=\"SortField === 'eventCode'\"\n                    (click)=\"OnSortClick('eventCode')\">\n                Code\n                @if (SortField === 'eventCode') {\n                    <i class=\"fa-solid\" [class.fa-arrow-down]=\"SortDir === 'desc'\" [class.fa-arrow-up]=\"SortDir === 'asc'\"></i>\n                }\n            </button>\n            <button type=\"button\"\n                    class=\"em-th em-th--component\"\n                    [class.em-th--sorted]=\"SortField === 'component'\"\n                    (click)=\"OnSortClick('component')\">\n                Component\n                @if (SortField === 'component') {\n                    <i class=\"fa-solid\" [class.fa-arrow-down]=\"SortDir === 'desc'\" [class.fa-arrow-up]=\"SortDir === 'asc'\"></i>\n                }\n            </button>\n            <span class=\"em-th em-th--summary\">Summary</span>\n            <span class=\"em-th em-th--actions\"></span>\n        </div>\n\n        @if (FilteredEvents.length === 0) {\n            <div class=\"em-empty\">\n                @if (Stats.captured === 0) {\n                    <i class=\"fa-solid fa-radio em-empty-icon\"></i>\n                    <div class=\"em-empty-title\">Listening for events\u2026</div>\n                    <div class=\"em-empty-sub\">Trigger an action \u2014 saves, navigation, AI events all show up here.</div>\n                } @else if (Paused) {\n                    <i class=\"fa-solid fa-pause em-empty-icon\"></i>\n                    <div class=\"em-empty-title\">Capture is paused</div>\n                    <div class=\"em-empty-sub\">{{ Stats.captured }} events fired since you paused. Click Resume to start collecting again.</div>\n                } @else {\n                    <i class=\"fa-solid fa-filter em-empty-icon\"></i>\n                    <div class=\"em-empty-title\">No events match your filter</div>\n                    <div class=\"em-empty-sub\">{{ Stats.kept }} events in buffer \u00B7 clear filters to see them.</div>\n                }\n            </div>\n        } @else {\n            @for (evt of FilteredEvents; track TrackBySeq($index, evt)) {\n                <div class=\"em-row\" [class.em-row--expanded]=\"evt.expanded\">\n                    <div class=\"em-row-head\" (click)=\"ToggleRow(evt)\">\n                        <i class=\"em-row-chev fa-solid fa-chevron-right\"\n                           [class.em-row-chev--down]=\"evt.expanded\"></i>\n                        <span class=\"em-row-time\">{{ evt.timestamp | date:'HH:mm:ss.SSS' }}</span>\n                        <span class=\"em-row-type\" [attr.data-type]=\"evt.type\">{{ evt.type }}</span>\n                        <span class=\"em-row-code\">{{ evt.eventCode || '\u2014' }}</span>\n                        <span class=\"em-row-component\" [title]=\"evt.componentName\">{{ evt.componentName }}</span>\n                        <span class=\"em-row-summary\" [class.em-row-summary--empty]=\"!evt.hasPayload\">{{ evt.summary }}</span>\n                        <button class=\"em-row-copy\"\n                                type=\"button\"\n                                (click)=\"$event.stopPropagation(); OnCopyRow(evt)\"\n                                title=\"Copy as JSON\">\n                            <i class=\"fa-solid fa-clipboard\"></i>\n                        </button>\n                    </div>\n                    @if (evt.expanded) {\n                        @if (evt.hasPayload) {\n                            <pre class=\"em-row-payload\"><code>{{ evt.args | json }}</code></pre>\n                        } @else {\n                            <div class=\"em-row-no-payload\">\n                                <i class=\"fa-regular fa-circle\"></i>\n                                <span>This event has no payload.</span>\n                            </div>\n                        }\n                    }\n                </div>\n            }\n        }\n    </div>\n</div>\n", styles: [":host { display: block; height: 100%; }\n\n/*\n  Inspector shell \u2014 each Dev Tools sub-page wraps its body in .mj-inspector. The\n  chrome (title icon, title, subtitle, action buttons) was previously rendered\n  via .mj-inspector__header*, but that's been replaced by <mj-page-header-interior>\n  in every inspector template. Action buttons now use the mjButton directive\n  (variant=\"secondary\" / \"success\") so they inherit global button styling. App\n  State + Layout inspectors used to carry an inner left rail (.mj-inspector__body\n  + __sidebar + __nav-item) for L2 sections; that rail was retired 2026-05-19 in\n  favor of <mj-tab-nav> projected into the chrome's [toolbar] slot, matching\n  SystemDiagnostics and the API Keys tab strip. All inspectors are now \"solo\"\n  mode (no sidebar).\n*/\n.mj-inspector {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-page);\n    color: var(--mj-text-primary);\n    font-family: inherit;\n}\n\n/* Content area */\n.mj-inspector__content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\n}\n.mj-inspector__content-head {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--mj-bg-surface-card);\n}\n.mj-inspector__content-title {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-inspector__content-meta {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n.mj-inspector__editor {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n.mj-inspector__editor mj-code-editor {\n    flex: 1;\n    min-height: 0;\n    display: block;\n}\n\n/* Empty state */\n.mj-inspector__empty {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n", ".mj-inspector--solo { background: var(--mj-bg-page); }\n\n/* Stats row */\n.em-stats {\n    display: flex;\n    gap: 16px;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n    align-items: center;\n}\n.em-stat {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 8px 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    min-width: 130px;\n}\n.em-stat--right { margin-left: auto; }\n.em-stat-value {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    letter-spacing: -0.3px;\n    line-height: 1;\n}\n.em-stat-value--small { font-size: 13px; }\n.em-stat-label {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-spacing: 0.5px;\n    margin-top: 4px;\n}\n\n/* Live pulse */\n.em-pulse {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: var(--mj-status-success);\n    box-shadow: 0 0 0 0 var(--mj-status-success);\n    animation: em-pulse-anim 1.6s ease-out infinite;\n}\n.em-pulse--paused {\n    background: var(--mj-status-warning);\n    box-shadow: none;\n    animation: none;\n}\n@keyframes em-pulse-anim {\n    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 70%, transparent); }\n    70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--mj-status-success) 0%, transparent); }\n    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 0%, transparent); }\n}\n@media (prefers-reduced-motion: reduce) { .em-pulse { animation: none; } }\n\n/* Toolbar */\n.em-toolbar {\n    display: flex;\n    align-items: flex-end;\n    gap: 10px;\n    padding: 10px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n    flex-wrap: wrap;\n}\n.em-search-wrap {\n    position: relative;\n    width: 280px;\n    flex-shrink: 0;\n}\n.em-select-wrap {\n    display: flex;\n    flex-direction: column;\n    gap: 3px;\n    min-width: 0;\n}\n.em-select-label {\n    font-size: 9.5px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n.em-select {\n    padding: 6px 10px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 7px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 12px;\n    font-family: inherit;\n    cursor: pointer;\n    min-width: 160px;\n    max-width: 240px;\n}\n.em-select:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.em-clear-filters {\n    align-self: flex-end;\n    padding: 6px 12px;\n    background: transparent;\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, var(--mj-border-default));\n    color: color-mix(in srgb, var(--mj-status-warning) 70%, var(--mj-text-primary));\n    border-radius: 7px;\n    font-size: 11.5px;\n    font-weight: 500;\n    cursor: pointer;\n    font-family: inherit;\n    margin-left: auto;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n.em-clear-filters:hover {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, transparent);\n}\n.em-search-icon {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    pointer-events: none;\n}\n.em-search {\n    width: 100%;\n    padding: 7px 32px 7px 32px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 12.5px;\n    font-family: inherit;\n}\n.em-search:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.em-search-clear {\n    position: absolute;\n    right: 8px; top: 50%;\n    transform: translateY(-50%);\n    background: transparent;\n    border: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    width: 22px; height: 22px;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 11px;\n}\n.em-search-clear:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n/* Table head with sortable columns */\n.em-table-head {\n    display: grid;\n    grid-template-columns: 110px 160px 140px 200px 1fr 32px;\n    gap: 12px;\n    padding: 8px 20px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    align-items: center;\n}\n.em-th {\n    font-size: 10px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    font-family: inherit;\n    text-align: left;\n    padding: 4px 0;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    transition: color 0.12s;\n}\n.em-th:hover { color: var(--mj-text-primary); }\n.em-th--sorted {\n    color: var(--mj-brand-primary);\n}\n.em-th--sorted i { font-size: 9px; }\n.em-th--summary,\n.em-th--actions {\n    cursor: default;\n}\n.em-th--summary:hover,\n.em-th--actions:hover { color: var(--mj-text-muted); }\n\n/* List */\n.em-list {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    background: var(--mj-bg-page);\n}\n.em-row {\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n    transition: background 0.1s;\n    animation: em-row-in 0.25s ease-out;\n}\n@keyframes em-row-in {\n    from { opacity: 0; transform: translateY(-3px); }\n    to   { opacity: 1; transform: translateY(0); }\n}\n@media (prefers-reduced-motion: reduce) { .em-row { animation: none; } }\n.em-row:hover { background: var(--mj-bg-surface-hover); }\n.em-row--expanded { background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface)); }\n.em-row--expanded:hover { background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface)); }\n\n.em-row-head {\n    display: grid;\n    grid-template-columns: 12px 96px 160px 140px 200px 1fr 32px;\n    gap: 12px;\n    padding: 8px 20px;\n    cursor: pointer;\n    font-size: 12.5px;\n    align-items: center;\n}\n.em-row-chev {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n    width: 12px;\n    flex-shrink: 0;\n    transition: transform 0.15s;\n    justify-self: start;\n}\n.em-row-chev--down { transform: rotate(90deg); }\n.em-row-time {\n    color: var(--mj-text-muted);\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.em-row-type {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-weight: 700;\n    font-size: 11px;\n    padding: 2px 8px;\n    border-radius: 4px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    justify-self: start;\n}\n.em-row-type[data-type=\"LoggedIn\"]                       { background: color-mix(in srgb, var(--mj-status-success) 14%, transparent); color: color-mix(in srgb, var(--mj-status-success) 70%, var(--mj-text-primary)); }\n.em-row-type[data-type=\"LoggedOut\"],\n.em-row-type[data-type=\"LoginFailed\"],\n.em-row-type[data-type=\"LogoutFailed\"]                   { background: color-mix(in srgb, var(--mj-status-error) 14%, transparent); color: color-mix(in srgb, var(--mj-status-error) 70%, var(--mj-text-primary)); }\n.em-row-type[data-type=\"DisplaySimpleNotificationRequest\"] { background: color-mix(in srgb, var(--mj-status-warning) 14%, transparent); color: color-mix(in srgb, var(--mj-status-warning) 70%, var(--mj-text-primary)); }\n.em-row-type[data-type=\"ManualResizeRequest\"]            { background: color-mix(in srgb, #7c3aed 12%, transparent); color: #5b21b6; }\n\n.em-row-code {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.em-row-component {\n    font-size: 11.5px;\n    color: var(--mj-text-secondary);\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.em-row-summary {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11.5px;\n    color: var(--mj-text-muted);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n}\n.em-row-summary--empty { font-style: italic; opacity: 0.6; }\n\n.em-row-no-payload {\n    margin: 0 20px 12px 50px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px dashed var(--mj-border-default);\n    border-radius: 8px;\n    padding: 14px 18px;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n.em-row-no-payload i { font-size: 14px; }\n.em-row-copy {\n    background: transparent;\n    border: 1px solid transparent;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    padding: 4px 8px;\n    border-radius: 5px;\n    font-size: 11px;\n    opacity: 0;\n    transition: all 0.12s;\n}\n.em-row:hover .em-row-copy { opacity: 1; }\n.em-row-copy:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-default);\n    color: var(--mj-text-primary);\n}\n\n.em-row-payload {\n    margin: 0 20px 12px 50px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 8px;\n    padding: 12px 14px;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11.5px;\n    color: var(--mj-text-primary);\n    overflow: auto;\n    max-height: 280px;\n}\n.em-row-payload code { white-space: pre-wrap; word-break: break-word; }\n\n/* Empty state */\n.em-empty {\n    padding: 80px 40px;\n    text-align: center;\n    color: var(--mj-text-muted);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n}\n.em-empty-icon {\n    font-size: 36px;\n    opacity: 0.4;\n    color: var(--mj-brand-primary);\n}\n.em-empty-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.em-empty-sub {\n    font-size: 12.5px;\n    max-width: 380px;\n    line-height: 1.5;\n}\n\n@media (max-width: 800px) {\n    .em-stats { flex-wrap: wrap; }\n    .em-stat--right { margin-left: 0; }\n    .em-row-component { display: none; }\n    .em-row-time { min-width: 70px; }\n    .em-row-payload { margin-left: 20px; }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EventMonitorComponent, { className: "EventMonitorComponent", filePath: "src/DevTools/event-monitor.component.ts", lineNumber: 44 }); })();
 //# sourceMappingURL=event-monitor.component.js.map