@memberjunction/ng-dashboards 5.31.0 → 5.33.0

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

@@ -0,0 +1,659 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component } from '@angular/core';
+import { BaseResourceComponent } from '@memberjunction/ng-shared';
+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);
+    i0.ɵɵtext(1, " Resume ");
+} }
+function EventMonitorComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 40);
+    i0.ɵɵtext(1, " Pause ");
+} }
+function EventMonitorComponent_Conditional_53_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.ɵɵelementEnd();
+} }
+function EventMonitorComponent_For_61_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 27);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const t_r3 = ctx.$implicit;
+    i0.ɵɵproperty("value", t_r3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(t_r3);
+} }
+function EventMonitorComponent_For_69_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 27);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const c_r4 = ctx.$implicit;
+    i0.ɵɵproperty("value", c_r4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(c_r4);
+} }
+function EventMonitorComponent_Conditional_70_For_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 27);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const c_r6 = ctx.$implicit;
+    i0.ɵɵproperty("value", c_r6);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(c_r6);
+} }
+function EventMonitorComponent_Conditional_70_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 23)(1, "label", 24);
+    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.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(6, EventMonitorComponent_Conditional_70_For_7_Template, 2, 2, "option", 27, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.CodeFilter);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("All codes (", ctx_r1.KnownCodes.length, ")");
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.KnownCodes);
+} }
+function EventMonitorComponent_Conditional_71_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.ɵɵtext(2, " Clear filters ");
+    i0.ɵɵelementEnd();
+} }
+function EventMonitorComponent_Conditional_76_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 44);
+} 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);
+} 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);
+} 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);
+} 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);
+    i0.ɵɵtext(2, "Listening for events\u2026");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 47);
+    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);
+    i0.ɵɵtext(2, "Capture is paused");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 47);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    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);
+    i0.ɵɵtext(2, "No events match your filter");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 47);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    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);
+    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");
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "json");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const evt_r9 = i0.ɵɵnextContext(2).$implicit;
+    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);
+    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);
+} 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) {
+    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.ɵɵtext(4);
+    i0.ɵɵpipe(5, "date");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 55);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "span", 56);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "span", 57);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "span", 58);
+    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.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(16, EventMonitorComponent_Conditional_90_For_1_Conditional_16_Template, 2, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const evt_r9 = ctx.$implicit;
+    i0.ɵɵclassProp("em-row--expanded", evt_r9.expanded);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("em-row-chev--down", evt_r9.expanded);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 14, evt_r9.timestamp, "HH:mm:ss.SSS"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵattribute("data-type", evt_r9.type);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(evt_r9.type);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(evt_r9.eventCode || "\u2014");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", evt_r9.componentName);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(evt_r9.componentName);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("em-row-summary--empty", !evt_r9.hasPayload);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(evt_r9.summary);
+    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);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵrepeater(ctx_r1.FilteredEvents);
+} }
+/**
+ * Event Monitor — live tail of `MJGlobal.Instance.GetEventListener()`.
+ * Captures events into a ring buffer (configurable cap) with filtering,
+ * pause/resume, click-to-expand-payload, copy.
+ */
+let EventMonitorComponent = class EventMonitorComponent extends BaseResourceComponent {
+    cdr;
+    MaxEvents = 500;
+    Events = [];
+    Paused = false;
+    AutoScroll = true;
+    Filter = '';
+    TypeFilter = ''; // '' = all
+    ComponentFilter = ''; // '' = all
+    CodeFilter = ''; // '' = all
+    KnownTypes = [];
+    KnownComponents = [];
+    KnownCodes = [];
+    Stats = { captured: 0, perSecond: 0, kept: 0 };
+    StartedAt = new Date();
+    SortField = 'time';
+    SortDir = 'desc';
+    sub;
+    seq = 0;
+    rateBucket = []; // event timestamps within last 1s
+    rateTimer;
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.loadPrefs();
+        this.subscribe();
+        this.rateTimer = setInterval(() => this.tickRate(), 500);
+        this.NotifyLoadComplete();
+    }
+    ngOnDestroy() {
+        this.savePrefs();
+        this.sub?.unsubscribe();
+        if (this.rateTimer)
+            clearInterval(this.rateTimer);
+    }
+    loadPrefs() {
+        const p = DevToolsPrefs.Get('eventMonitor');
+        if (!p)
+            return;
+        this.Filter = p.filter ?? '';
+        this.TypeFilter = p.typeFilter ?? '';
+        this.ComponentFilter = p.componentFilter ?? '';
+        this.CodeFilter = p.codeFilter ?? '';
+        this.SortField = p.sortField ?? 'time';
+        this.SortDir = p.sortDir ?? 'desc';
+    }
+    savePrefs() {
+        DevToolsPrefs.Save('eventMonitor', {
+            filter: this.Filter,
+            typeFilter: this.TypeFilter,
+            componentFilter: this.ComponentFilter,
+            codeFilter: this.CodeFilter,
+            sortField: this.SortField,
+            sortDir: this.SortDir
+        });
+    }
+    async GetResourceDisplayName() { return 'Event Monitor'; }
+    async GetResourceIconClass() { return 'fa-solid fa-bolt'; }
+    TogglePause() {
+        this.Paused = !this.Paused;
+        this.cdr.markForCheck();
+    }
+    ToggleAutoScroll() {
+        this.AutoScroll = !this.AutoScroll;
+    }
+    Clear() {
+        this.Events = [];
+        this.seq = 0;
+        this.Stats.kept = 0;
+        this.cdr.markForCheck();
+    }
+    ToggleRow(row) {
+        row.expanded = !row.expanded;
+    }
+    OnTypeFilterClick(type) {
+        this.TypeFilter = this.TypeFilter === type ? '' : type;
+    }
+    OnSortClick(field) {
+        if (this.SortField === field) {
+            this.SortDir = this.SortDir === 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            this.SortField = field;
+            this.SortDir = field === 'time' ? 'desc' : 'asc';
+        }
+        this.savePrefs();
+    }
+    /** Public so the template can call on every ngModelChange (filters, selects). */
+    PersistPrefs() {
+        this.savePrefs();
+    }
+    async OnCopyRow(row) {
+        const payload = {
+            timestamp: row.timestamp.toISOString(),
+            type: row.type,
+            eventCode: row.eventCode,
+            component: row.componentName,
+            args: row.args
+        };
+        try {
+            await navigator.clipboard.writeText(JSON.stringify(payload, null, 2));
+        }
+        catch { /* clipboard unavailable */ }
+    }
+    get FilteredEvents() {
+        let list = this.Events;
+        if (this.TypeFilter)
+            list = list.filter(e => e.type === this.TypeFilter);
+        if (this.ComponentFilter)
+            list = list.filter(e => e.componentName === this.ComponentFilter);
+        if (this.CodeFilter)
+            list = list.filter(e => (e.eventCode ?? '') === this.CodeFilter);
+        const q = this.Filter.trim().toLowerCase();
+        if (q) {
+            list = list.filter(e => e.type.toLowerCase().includes(q) ||
+                e.componentName.toLowerCase().includes(q) ||
+                e.summary.toLowerCase().includes(q) ||
+                (e.eventCode && e.eventCode.toLowerCase().includes(q)));
+        }
+        // Sort (always returns a new array — preserves the natural seq order otherwise)
+        const dir = this.SortDir === 'asc' ? 1 : -1;
+        const sorted = [...list].sort((a, b) => {
+            switch (this.SortField) {
+                case 'time': return (a.seq - b.seq) * dir;
+                case 'type': return a.type.localeCompare(b.type) * dir;
+                case 'eventCode': return (a.eventCode ?? '').localeCompare(b.eventCode ?? '') * dir;
+                case 'component': return a.componentName.localeCompare(b.componentName) * dir;
+                default: return 0;
+            }
+        });
+        return sorted;
+    }
+    ClearFilters() {
+        this.Filter = '';
+        this.TypeFilter = '';
+        this.ComponentFilter = '';
+        this.CodeFilter = '';
+        this.savePrefs();
+    }
+    get HasActiveFilters() {
+        return !!(this.Filter || this.TypeFilter || this.ComponentFilter || this.CodeFilter);
+    }
+    get UptimeLabel() {
+        const ms = Date.now() - this.StartedAt.getTime();
+        const s = Math.floor(ms / 1000);
+        const m = Math.floor(s / 60);
+        const remainder = s % 60;
+        return m > 0 ? `${m}m ${remainder}s` : `${s}s`;
+    }
+    TrackBySeq = (_i, e) => e.seq;
+    // ---------- private ----------
+    subscribe() {
+        try {
+            // withReplay = true so we get historical events that were emitted
+            // before this component mounted (within MJGlobal's replay buffer).
+            this.sub = MJGlobal.Instance.GetEventListener(true).subscribe((evt) => {
+                this.handleEvent(evt);
+            });
+        }
+        catch {
+            // Listener unavailable; silent (rare)
+        }
+    }
+    handleEvent(evt) {
+        this.Stats.captured++;
+        this.rateBucket.push(Date.now());
+        if (this.Paused)
+            return;
+        const type = String(evt.event ?? 'Unknown');
+        if (!this.KnownTypes.includes(type)) {
+            this.KnownTypes = [...this.KnownTypes, type].sort();
+        }
+        const componentName = evt.component?.constructor?.name ?? '(no component)';
+        if (!this.KnownComponents.includes(componentName)) {
+            this.KnownComponents = [...this.KnownComponents, componentName].sort();
+        }
+        const code = evt.eventCode;
+        if (code && !this.KnownCodes.includes(code)) {
+            this.KnownCodes = [...this.KnownCodes, code].sort();
+        }
+        const hasPayload = this.computeHasPayload(evt.args);
+        const row = {
+            seq: ++this.seq,
+            timestamp: new Date(),
+            type,
+            eventCode: code,
+            componentName,
+            summary: hasPayload ? this.summarizeArgs(evt.args) : '—',
+            args: evt.args,
+            expanded: false,
+            hasPayload
+        };
+        this.Events = [row, ...this.Events];
+        if (this.Events.length > this.MaxEvents) {
+            this.Events = this.Events.slice(0, this.MaxEvents);
+        }
+        this.Stats.kept = this.Events.length;
+        this.cdr.markForCheck();
+    }
+    computeHasPayload(args) {
+        if (args === null || args === undefined)
+            return false;
+        if (typeof args === 'string')
+            return args.length > 0;
+        if (Array.isArray(args))
+            return args.length > 0;
+        if (typeof args === 'object')
+            return Object.keys(args).length > 0;
+        return true; // numbers, booleans count as payload
+    }
+    tickRate() {
+        const cutoff = Date.now() - 1000;
+        this.rateBucket = this.rateBucket.filter(t => t >= cutoff);
+        this.Stats.perSecond = this.rateBucket.length;
+        this.cdr.markForCheck();
+    }
+    summarizeArgs(args) {
+        if (args === null || args === undefined)
+            return '—';
+        if (typeof args === 'string')
+            return args.length > 80 ? args.slice(0, 77) + '…' : args;
+        if (typeof args === 'number' || typeof args === 'boolean')
+            return String(args);
+        if (Array.isArray(args))
+            return `[ ${args.length} item${args.length === 1 ? '' : 's'} ]`;
+        if (typeof args === 'object') {
+            const keys = Object.keys(args);
+            if (keys.length === 0)
+                return '{ }';
+            return `{ ${keys.slice(0, 3).join(', ')}${keys.length > 3 ? ', …' : ''} }`;
+        }
+        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");
+            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.ɵɵ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.ɵɵelementEnd();
+            i0.ɵɵelementStart(23, "div", 15);
+            i0.ɵɵtext(24);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(25, "div", 12)(26, "div")(27, "div", 14);
+            i0.ɵɵtext(28);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(29, "div", 15);
+            i0.ɵɵtext(30, "Total captured");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(31, "div", 12)(32, "div")(33, "div", 14);
+            i0.ɵɵtext(34);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(35, "div", 15);
+            i0.ɵɵtext(36, "In buffer");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(37, "div", 12)(38, "div")(39, "div", 14);
+            i0.ɵɵtext(40);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(41, "div", 15);
+            i0.ɵɵtext(42, "Last second");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(43, "div", 16)(44, "div")(45, "div", 17);
+            i0.ɵɵtext(46);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(47, "div", 15);
+            i0.ɵɵtext(48, "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.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(53, EventMonitorComponent_Conditional_53_Template, 2, 0, "button", 22);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(54, "div", 23)(55, "label", 24);
+            i0.ɵɵtext(56, "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.ɵɵelementEnd();
+            i0.ɵɵrepeaterCreate(60, EventMonitorComponent_For_61_Template, 2, 2, "option", 27, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(62, "div", 23)(63, "label", 24);
+            i0.ɵɵtext(64, "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.ɵɵelementEnd();
+            i0.ɵɵrepeaterCreate(68, EventMonitorComponent_For_69_Template, 2, 2, "option", 27, 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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵelementEnd();
+            i0.ɵɵelementStart(86, "span", 36);
+            i0.ɵɵtext(87, "Summary");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(88, "span", 37);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(89, EventMonitorComponent_Conditional_89_Template, 4, 1, "div", 38)(90, EventMonitorComponent_Conditional_90_Template, 2, 0);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(11);
+            i0.ɵɵclassProp("mj-inspector__btn--success", !ctx.Paused)("em-paused", ctx.Paused);
+            i0.ɵɵproperty("title", ctx.Paused ? "Resume capture" : "Pause capture");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Paused ? 12 : 13);
+            i0.ɵɵadvance(7);
+            i0.ɵɵclassProp("em-pulse--paused", ctx.Paused);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.Paused ? "PAUSED" : "LIVE");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.Paused ? "Capture suspended" : "Capturing events");
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(ctx.Stats.captured);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate2("", ctx.Stats.kept, " / ", ctx.MaxEvents);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate1("", ctx.Stats.perSecond, "/s");
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(ctx.UptimeLabel);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.Filter);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Filter ? 53 : -1);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.TypeFilter);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1("All types (", ctx.KnownTypes.length, ")");
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.KnownTypes);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.ComponentFilter);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1("All components (", ctx.KnownComponents.length, ")");
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.KnownComponents);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.KnownCodes.length > 0 ? 70 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.HasActiveFilters ? 71 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("em-th--sorted", ctx.SortField === "time");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.SortField === "time" ? 76 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("em-th--sorted", ctx.SortField === "type");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.SortField === "type" ? 79 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("em-th--sorted", ctx.SortField === "eventCode");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.SortField === "eventCode" ? 82 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("em-th--sorted", ctx.SortField === "component");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.SortField === "component" ? 85 : -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}"] });
+};
+EventMonitorComponent = __decorate([
+    RegisterClass(BaseResourceComponent, 'EventMonitorInspector')
+], EventMonitorComponent);
+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"] }]
+    }], () => [{ 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