@memberjunction/ng-dashboards 5.32.0 → 5.33.0

package/dist/Admin/base-admin-container.component.js

@@ -0,0 +1,198 @@
+import { Directive, ChangeDetectorRef, ViewChild, ViewContainerRef, inject } from '@angular/core';
+import { BaseResourceComponent, BaseDashboard } from '@memberjunction/ng-shared';
+import { MJGlobal } from '@memberjunction/global';
+import { DashboardEngine } from '@memberjunction/core-entities';
+import * as i0 from "@angular/core";
+const _c0 = ["contentHost"];
+/**
+ * Shared base for all Admin app container resources. Subclasses declare:
+ *   - ContainerTitle / ContainerIcon / ContainerSubtitle
+ *   - Sections[]
+ *   - @RegisterClass(BaseResourceComponent, '...')
+ *
+ * The base handles: left-nav state, URL deep-linking via NavigationService,
+ * dynamic component instantiation for both resource and dashboard sections,
+ * teardown on switch.
+ */
+export class BaseAdminContainerComponent extends BaseResourceComponent {
+    contentHost;
+    ActiveSection = '';
+    LoadError = null;
+    IsLoading = false;
+    /**
+     * Cache of section.id → ComponentRef. Once a sub-section is rendered we
+     * keep its component alive across switches by detaching + reattaching the
+     * view (instead of destroying + recreating). This preserves state — Event
+     * Monitor's captured events, GraphQL Console's history, query inputs,
+     * scroll position, etc. — and avoids expensive re-init.
+     */
+    cache = new Map();
+    currentSectionId = null;
+    cdr = inject(ChangeDetectorRef);
+    async ngOnInit() {
+        super.ngOnInit();
+        const params = this.GetQueryParams();
+        const requested = params['section'];
+        const initial = this.findSection(requested)?.id ?? this.Sections[0]?.id ?? '';
+        const target = this.findSection(initial);
+        if (target) {
+            await this.selectSection(target, /*syncUrl*/ false);
+        }
+        if (!requested && this.ActiveSection) {
+            this.UpdateQueryParams({ section: this.ActiveSection });
+        }
+        this.NotifyLoadComplete();
+    }
+    ngOnDestroy() {
+        for (const ref of this.cache.values()) {
+            try {
+                ref.destroy();
+            }
+            catch { /* ignore */ }
+        }
+        this.cache.clear();
+        this.currentSectionId = null;
+        super.ngOnDestroy();
+    }
+    async GetResourceDisplayName() { return this.ContainerTitle; }
+    async GetResourceIconClass() { return this.ContainerIcon; }
+    /** Called by the framework on browser back/forward + deep-link entry. */
+    OnQueryParamsChanged(params, _source) {
+        const section = params['section'];
+        if (!section || section === this.ActiveSection)
+            return;
+        const target = this.findSection(section);
+        if (target) {
+            void this.selectSection(target, /*syncUrl*/ false);
+        }
+    }
+    async OnSectionClick(section) {
+        if (section.id === this.ActiveSection)
+            return;
+        await this.selectSection(section, /*syncUrl*/ true);
+    }
+    // ---------- protected ----------
+    async selectSection(section, syncUrl) {
+        this.ActiveSection = section.id;
+        this.IsLoading = true;
+        this.LoadError = null;
+        this.cdr.markForCheck();
+        if (syncUrl) {
+            this.UpdateQueryParams({ section: section.id });
+        }
+        try {
+            await this.renderSection(section);
+        }
+        catch (err) {
+            this.LoadError = err instanceof Error ? err.message : String(err);
+        }
+        finally {
+            this.IsLoading = false;
+            this.cdr.markForCheck();
+        }
+    }
+    async renderSection(section) {
+        // Detach (don't destroy) the currently visible sub-component so it
+        // stays alive in memory with its state intact.
+        this.detachCurrent();
+        // Reattach if cached
+        const cached = this.cache.get(section.id);
+        if (cached) {
+            this.contentHost.insert(cached.hostView);
+            this.currentSectionId = section.id;
+            return;
+        }
+        // Otherwise, create fresh
+        const ref = section.source.kind === 'resource'
+            ? await this.createResourceRef(section.source.driverClass)
+            : await this.createDashboardRef(section.source.dashboardName);
+        if (ref) {
+            this.applyHostSizing(ref);
+            this.cache.set(section.id, ref);
+            this.currentSectionId = section.id;
+        }
+    }
+    detachCurrent() {
+        if (!this.currentSectionId)
+            return;
+        const cur = this.cache.get(this.currentSectionId);
+        if (!cur)
+            return;
+        const idx = this.contentHost.indexOf(cur.hostView);
+        if (idx >= 0)
+            this.contentHost.detach(idx);
+    }
+    async createResourceRef(driverClass) {
+        const reg = await MJGlobal.Instance.ClassFactory.GetRegistrationAsync(BaseResourceComponent, driverClass);
+        if (!reg) {
+            this.LoadError = `Component "${driverClass}" is not registered. Make sure its module is imported.`;
+            return null;
+        }
+        const ref = this.contentHost.createComponent(reg.SubClass);
+        const instance = ref.instance;
+        if (this.Data)
+            instance.Data = this.Data;
+        return ref;
+    }
+    async createDashboardRef(dashboardName) {
+        await DashboardEngine.Instance.Config(false);
+        const dashboard = DashboardEngine.Instance.Dashboards.find(d => d.Name === dashboardName);
+        if (!dashboard) {
+            this.LoadError = `Dashboard "${dashboardName}" was not found in metadata.`;
+            return null;
+        }
+        if (dashboard.Type !== 'Code') {
+            this.LoadError = `Dashboard "${dashboardName}" has type "${dashboard.Type}" — only Code dashboards can be embedded here.`;
+            return null;
+        }
+        if (!dashboard.DriverClass) {
+            this.LoadError = `Dashboard "${dashboardName}" has no DriverClass set.`;
+            return null;
+        }
+        const reg = await MJGlobal.Instance.ClassFactory.GetRegistrationAsync(BaseDashboard, dashboard.DriverClass);
+        if (!reg) {
+            this.LoadError = `Driver class "${dashboard.DriverClass}" is not registered against BaseDashboard.`;
+            return null;
+        }
+        const ref = this.contentHost.createComponent(reg.SubClass);
+        const instance = ref.instance;
+        instance.Config = { dashboard, userState: undefined };
+        instance.Refresh();
+        return ref;
+    }
+    /**
+     * Force the rendered sub-component's host element to fill the container
+     * cell. Mirrors what `tab-container` does for top-level resources — many
+     * dashboards rely on inline `height: 100%` to bound their internal layout
+     * (so their own `overflow-y: auto` regions actually scroll).
+     */
+    applyHostSizing(ref) {
+        const hostEl = ref.hostView.rootNodes[0];
+        if (!hostEl || !(hostEl instanceof HTMLElement))
+            return;
+        hostEl.style.height = '100%';
+        hostEl.style.minHeight = '0';
+        hostEl.style.display = 'flex';
+        hostEl.style.flexDirection = 'column';
+        hostEl.style.flex = '1 1 auto';
+    }
+    findSection(id) {
+        if (!id)
+            return undefined;
+        return this.Sections.find(s => s.id === id);
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵBaseAdminContainerComponent_BaseFactory; return function BaseAdminContainerComponent_Factory(__ngFactoryType__) { return (ɵBaseAdminContainerComponent_BaseFactory || (ɵBaseAdminContainerComponent_BaseFactory = i0.ɵɵgetInheritedFactory(BaseAdminContainerComponent)))(__ngFactoryType__ || BaseAdminContainerComponent); }; })();
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BaseAdminContainerComponent, viewQuery: function BaseAdminContainerComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 7, ViewContainerRef);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentHost = _t.first);
+        } }, features: [i0.ɵɵInheritDefinitionFeature] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseAdminContainerComponent, [{
+        type: Directive
+    }], null, { contentHost: [{
+            type: ViewChild,
+            args: ['contentHost', { read: ViewContainerRef, static: true }]
+        }] }); })();
+//# sourceMappingURL=base-admin-container.component.js.map

package/dist/Admin/base-admin-container.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-admin-container.component.js","sourceRoot":"","sources":["../../src/Admin/base-admin-container.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    Directive,\n    OnInit,\n    OnDestroy,\n    ChangeDetectorRef,\n    ViewChild,\n    ViewContainerRef,\n    ComponentRef,\n    Type,\n    inject\n} from '@angular/core';\nimport { BaseResourceComponent, BaseDashboard } from '@memberjunction/ng-shared';\nimport { MJGlobal } from '@memberjunction/global';\nimport { DashboardEngine } from '@memberjunction/core-entities';\n\n/** A single sub-section inside an admin container's left-nav. */\nexport interface AdminSection {\n    /** Stable identifier — used in the URL `?section=` deep-link. */\n    id: string;\n    label: string;\n    icon: string;\n    description: string;\n    source: AdminSectionSource;\n}\n\n/**\n * How to resolve and instantiate the component for this sub-section.\n *\n * - `resource`: looks up `@RegisterClass(BaseResourceComponent, driverClass)` and renders it directly.\n * - `dashboard`: looks up the MJ Dashboard record by name, then renders its `DriverClass` via the\n *   BaseDashboard registry with a synthetic `{ dashboard }` config (mirrors the shell's flow for\n *   `ResourceType: \"Dashboards\"` nav items).\n */\nexport type AdminSectionSource =\n    | { kind: 'resource'; driverClass: string }\n    | { kind: 'dashboard'; dashboardName: string };\n\n/**\n * Shared base for all Admin app container resources. Subclasses declare:\n *   - ContainerTitle / ContainerIcon / ContainerSubtitle\n *   - Sections[]\n *   - @RegisterClass(BaseResourceComponent, '...')\n *\n * The base handles: left-nav state, URL deep-linking via NavigationService,\n * dynamic component instantiation for both resource and dashboard sections,\n * teardown on switch.\n */\n@Directive()\nexport abstract class BaseAdminContainerComponent extends BaseResourceComponent implements OnInit, OnDestroy {\n    public abstract readonly ContainerTitle: string;\n    public abstract readonly ContainerIcon: string;\n    public abstract readonly ContainerSubtitle: string;\n    public abstract readonly Sections: AdminSection[];\n\n    @ViewChild('contentHost', { read: ViewContainerRef, static: true })\n    protected contentHost!: ViewContainerRef;\n\n    public ActiveSection = '';\n    public LoadError: string | null = null;\n    public IsLoading = false;\n\n    /**\n     * Cache of section.id → ComponentRef. Once a sub-section is rendered we\n     * keep its component alive across switches by detaching + reattaching the\n     * view (instead of destroying + recreating). This preserves state — Event\n     * Monitor's captured events, GraphQL Console's history, query inputs,\n     * scroll position, etc. — and avoids expensive re-init.\n     */\n    protected cache = new Map<string, ComponentRef<unknown>>();\n    protected currentSectionId: string | null = null;\n\n    protected readonly cdr = inject(ChangeDetectorRef);\n\n    public override async ngOnInit(): Promise<void> {\n        super.ngOnInit();\n\n        const params = this.GetQueryParams();\n        const requested = params['section'];\n        const initial = this.findSection(requested)?.id ?? this.Sections[0]?.id ?? '';\n        const target = this.findSection(initial);\n        if (target) {\n            await this.selectSection(target, /*syncUrl*/ false);\n        }\n\n        if (!requested && this.ActiveSection) {\n            this.UpdateQueryParams({ section: this.ActiveSection });\n        }\n\n        this.NotifyLoadComplete();\n    }\n\n    public override ngOnDestroy(): void {\n        for (const ref of this.cache.values()) {\n            try { ref.destroy(); } catch { /* ignore */ }\n        }\n        this.cache.clear();\n        this.currentSectionId = null;\n        super.ngOnDestroy();\n    }\n\n    public override async GetResourceDisplayName(): Promise<string> { return this.ContainerTitle; }\n    public override async GetResourceIconClass(): Promise<string> { return this.ContainerIcon; }\n\n    /** Called by the framework on browser back/forward + deep-link entry. */\n    protected override OnQueryParamsChanged(params: Record<string, string>, _source: 'popstate' | 'deeplink'): void {\n        const section = params['section'];\n        if (!section || section === this.ActiveSection) return;\n        const target = this.findSection(section);\n        if (target) {\n            void this.selectSection(target, /*syncUrl*/ false);\n        }\n    }\n\n    public async OnSectionClick(section: AdminSection): Promise<void> {\n        if (section.id === this.ActiveSection) return;\n        await this.selectSection(section, /*syncUrl*/ true);\n    }\n\n    // ---------- protected ----------\n\n    private async selectSection(section: AdminSection, syncUrl: boolean): Promise<void> {\n        this.ActiveSection = section.id;\n        this.IsLoading = true;\n        this.LoadError = null;\n        this.cdr.markForCheck();\n\n        if (syncUrl) {\n            this.UpdateQueryParams({ section: section.id });\n        }\n\n        try {\n            await this.renderSection(section);\n        } catch (err) {\n            this.LoadError = err instanceof Error ? err.message : String(err);\n        } finally {\n            this.IsLoading = false;\n            this.cdr.markForCheck();\n        }\n    }\n\n    private async renderSection(section: AdminSection): Promise<void> {\n        // Detach (don't destroy) the currently visible sub-component so it\n        // stays alive in memory with its state intact.\n        this.detachCurrent();\n\n        // Reattach if cached\n        const cached = this.cache.get(section.id);\n        if (cached) {\n            this.contentHost.insert(cached.hostView);\n            this.currentSectionId = section.id;\n            return;\n        }\n\n        // Otherwise, create fresh\n        const ref = section.source.kind === 'resource'\n            ? await this.createResourceRef(section.source.driverClass)\n            : await this.createDashboardRef(section.source.dashboardName);\n\n        if (ref) {\n            this.applyHostSizing(ref);\n            this.cache.set(section.id, ref);\n            this.currentSectionId = section.id;\n        }\n    }\n\n    private detachCurrent(): void {\n        if (!this.currentSectionId) return;\n        const cur = this.cache.get(this.currentSectionId);\n        if (!cur) return;\n        const idx = this.contentHost.indexOf(cur.hostView);\n        if (idx >= 0) this.contentHost.detach(idx);\n    }\n\n    private async createResourceRef(driverClass: string): Promise<ComponentRef<unknown> | null> {\n        const reg = await MJGlobal.Instance.ClassFactory.GetRegistrationAsync(BaseResourceComponent, driverClass);\n        if (!reg) {\n            this.LoadError = `Component \"${driverClass}\" is not registered. Make sure its module is imported.`;\n            return null;\n        }\n        const ref = this.contentHost.createComponent(reg.SubClass as Type<BaseResourceComponent>);\n        const instance = ref.instance as BaseResourceComponent;\n        if (this.Data) instance.Data = this.Data;\n        return ref;\n    }\n\n    private async createDashboardRef(dashboardName: string): Promise<ComponentRef<unknown> | null> {\n        await DashboardEngine.Instance.Config(false);\n        const dashboard = DashboardEngine.Instance.Dashboards.find(d => d.Name === dashboardName);\n        if (!dashboard) {\n            this.LoadError = `Dashboard \"${dashboardName}\" was not found in metadata.`;\n            return null;\n        }\n        if (dashboard.Type !== 'Code') {\n            this.LoadError = `Dashboard \"${dashboardName}\" has type \"${dashboard.Type}\" — only Code dashboards can be embedded here.`;\n            return null;\n        }\n        if (!dashboard.DriverClass) {\n            this.LoadError = `Dashboard \"${dashboardName}\" has no DriverClass set.`;\n            return null;\n        }\n        const reg = await MJGlobal.Instance.ClassFactory.GetRegistrationAsync(BaseDashboard, dashboard.DriverClass);\n        if (!reg) {\n            this.LoadError = `Driver class \"${dashboard.DriverClass}\" is not registered against BaseDashboard.`;\n            return null;\n        }\n        const ref = this.contentHost.createComponent(reg.SubClass as Type<BaseDashboard>);\n        const instance = ref.instance as BaseDashboard;\n        instance.Config = { dashboard, userState: undefined };\n        instance.Refresh();\n        return ref;\n    }\n\n    /**\n     * Force the rendered sub-component's host element to fill the container\n     * cell. Mirrors what `tab-container` does for top-level resources — many\n     * dashboards rely on inline `height: 100%` to bound their internal layout\n     * (so their own `overflow-y: auto` regions actually scroll).\n     */\n    private applyHostSizing(ref: ComponentRef<unknown>): void {\n        const hostEl = (ref.hostView as unknown as { rootNodes: HTMLElement[] }).rootNodes[0];\n        if (!hostEl || !(hostEl instanceof HTMLElement)) return;\n        hostEl.style.height = '100%';\n        hostEl.style.minHeight = '0';\n        hostEl.style.display = 'flex';\n        hostEl.style.flexDirection = 'column';\n        hostEl.style.flex = '1 1 auto';\n    }\n\n    private findSection(id: string | undefined | null): AdminSection | undefined {\n        if (!id) return undefined;\n        return this.Sections.find(s => s.id === id);\n    }\n}\n"]}

package/dist/Admin/index.d.ts

@@ -0,0 +1,6 @@
+export * from './base-admin-container.component';
+export * from './admin-dev-tools-resource.component';
+export * from './admin-identity-access.component';
+export * from './admin-data-schema.component';
+export * from './admin-monitoring.component';
+//# sourceMappingURL=index.d.ts.map

package/dist/Admin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Admin/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC"}

package/dist/Admin/index.js

@@ -0,0 +1,6 @@
+export * from './base-admin-container.component';
+export * from './admin-dev-tools-resource.component';
+export * from './admin-identity-access.component';
+export * from './admin-data-schema.component';
+export * from './admin-monitoring.component';
+//# sourceMappingURL=index.js.map

package/dist/Admin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Admin/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC","sourcesContent":["export * from './base-admin-container.component';\nexport * from './admin-dev-tools-resource.component';\nexport * from './admin-identity-access.component';\nexport * from './admin-data-schema.component';\nexport * from './admin-monitoring.component';\n"]}

package/dist/DevTools/app-state-inspector.component.d.ts

@@ -0,0 +1,53 @@
+import { OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { BaseResourceComponent } from '@memberjunction/ng-shared';
+import { WorkspaceStateManager } from '@memberjunction/ng-base-application';
+import { DeveloperModeService } from '@memberjunction/ng-shared';
+import * as i0 from "@angular/core";
+interface InspectorSection {
+    id: string;
+    label: string;
+    icon: string;
+    enabled: boolean;
+    description?: string;
+}
+/**
+ * App State Inspector — read-only structured view of the Explorer's runtime
+ * state. Replaces the legacy "Inspect App State" user-menu item which only
+ * dumped to console. Lives in the Admin app's dev tools area.
+ */
+export declare class AppStateInspectorComponent extends BaseResourceComponent implements OnInit, OnDestroy {
+    private cdr;
+    private workspace;
+    private devMode;
+    Sections: InspectorSection[];
+    ActiveSection: string;
+    StateJson: string;
+    SearchQuery: string;
+    CopyConfirmed: boolean;
+    LastRefreshed: Date;
+    constructor(cdr: ChangeDetectorRef, workspace: WorkspaceStateManager, devMode: DeveloperModeService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    GetResourceDisplayName(): Promise<string>;
+    GetResourceIconClass(): Promise<string>;
+    OnSectionClick(section: InspectorSection): void;
+    refresh(): void;
+    OnCopy(): Promise<void>;
+    OnDownload(): void;
+    get LastRefreshedLabel(): string;
+    get SectionLabel(): string;
+    private computeSectionData;
+    private userData;
+    private providerData;
+    private workspaceData;
+    private appData;
+    private devData;
+    private browserData;
+    private jsonReplacer;
+    private readMemory;
+    private timestampSlug;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppStateInspectorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppStateInspectorComponent, "mj-app-state-inspector", never, {}, {}, never, never, false, never>;
+}
+export {};
+//# sourceMappingURL=app-state-inspector.component.d.ts.map

package/dist/DevTools/app-state-inspector.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-state-inspector.component.d.ts","sourceRoot":"","sources":["../../src/DevTools/app-state-inspector.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAIlE,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;;AAEjE,UAAU,gBAAgB;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,qBAOa,0BAA2B,SAAQ,qBAAsB,YAAW,MAAM,EAAE,SAAS;IAkB1F,OAAO,CAAC,GAAG;IACX,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,OAAO;IAlBZ,QAAQ,EAAE,gBAAgB,EAAE,CAOjC;IAEK,aAAa,SAAU;IACvB,SAAS,SAAQ;IACjB,WAAW,SAAM;IACjB,aAAa,UAAS;IACtB,aAAa,OAAc;gBAGtB,GAAG,EAAE,iBAAiB,EACtB,SAAS,EAAE,qBAAqB,EAChC,OAAO,EAAE,oBAAoB;IAKlC,QAAQ,IAAI,IAAI;IASP,WAAW,IAAI,IAAI;IAKb,sBAAsB,IAAI,OAAO,CAAC,MAAM,CAAC;IACzC,oBAAoB,IAAI,OAAO,CAAC,MAAM,CAAC;IAEtD,cAAc,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAO/C,OAAO,IAAI,IAAI;IAMT,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAc7B,UAAU,IAAI,IAAI;IAUzB,IAAW,kBAAkB,IAAI,MAAM,CAEtC;IAED,IAAW,YAAY,IAAI,MAAM,CAEhC;IAID,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,QAAQ;IAiBhB,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,aAAa;yCA9LZ,0BAA0B;2CAA1B,0BAA0B;CAoMtC"}

package/dist/DevTools/app-state-inspector.component.js

@@ -0,0 +1,301 @@
+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 } from '@memberjunction/global';
+import { DevToolsPrefs } from './dev-tools-prefs';
+import { GraphQLDataProvider } from '@memberjunction/graphql-dataprovider';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-base-application";
+import * as i2 from "@memberjunction/ng-shared";
+import * as i3 from "@angular/forms";
+import * as i4 from "@memberjunction/ng-code-editor";
+const _forTrack0 = ($index, $item) => $item.id;
+function AppStateInspectorComponent_For_22_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const section_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(section_r2.description);
+} }
+function AppStateInspectorComponent_For_22_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 23);
+    i0.ɵɵlistener("click", function AppStateInspectorComponent_For_22_Template_button_click_0_listener() { const section_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnSectionClick(section_r2)); });
+    i0.ɵɵelement(1, "i", 24);
+    i0.ɵɵelementStart(2, "div", 25)(3, "div", 26);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, AppStateInspectorComponent_For_22_Conditional_5_Template, 2, 1, "div", 27);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const section_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("mj-inspector__nav-item--active", ctx_r2.ActiveSection === section_r2.id);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(section_r2.icon);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(section_r2.label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(section_r2.description ? 5 : -1);
+} }
+/**
+ * App State Inspector — read-only structured view of the Explorer's runtime
+ * state. Replaces the legacy "Inspect App State" user-menu item which only
+ * dumped to console. Lives in the Admin app's dev tools area.
+ */
+let AppStateInspectorComponent = class AppStateInspectorComponent extends BaseResourceComponent {
+    cdr;
+    workspace;
+    devMode;
+    Sections = [
+        { id: 'user', label: 'Current User', icon: 'fa-solid fa-user', enabled: true, description: 'Identity, roles, email' },
+        { id: 'provider', label: 'Provider', icon: 'fa-solid fa-plug', enabled: true, description: 'API URL, entities loaded' },
+        { id: 'workspace', label: 'Workspace', icon: 'fa-solid fa-table-columns', enabled: true, description: 'Tabs, layout, active state' },
+        { id: 'app', label: 'Active Application', icon: 'fa-solid fa-th-large', enabled: true, description: 'Current app + nav items' },
+        { id: 'dev', label: 'Developer Mode', icon: 'fa-solid fa-code', enabled: true, description: 'Dev mode flag, eligibility' },
+        { id: 'browser', label: 'Browser & Session', icon: 'fa-solid fa-window-maximize', enabled: true, description: 'User agent, viewport, URL' }
+    ];
+    ActiveSection = 'user';
+    StateJson = '{}';
+    SearchQuery = '';
+    CopyConfirmed = false;
+    LastRefreshed = new Date();
+    constructor(cdr, workspace, devMode) {
+        super();
+        this.cdr = cdr;
+        this.workspace = workspace;
+        this.devMode = devMode;
+    }
+    ngOnInit() {
+        const p = DevToolsPrefs.Get('appStateInspector');
+        if (p?.activeSection && this.Sections.some(s => s.id === p.activeSection)) {
+            this.ActiveSection = p.activeSection;
+        }
+        this.refresh();
+        this.NotifyLoadComplete();
+    }
+    ngOnDestroy() {
+        DevToolsPrefs.Save('appStateInspector', { activeSection: this.ActiveSection });
+        super.ngOnDestroy();
+    }
+    async GetResourceDisplayName() { return 'App State Inspector'; }
+    async GetResourceIconClass() { return 'fa-solid fa-magnifying-glass-chart'; }
+    OnSectionClick(section) {
+        if (this.ActiveSection === section.id)
+            return;
+        this.ActiveSection = section.id;
+        DevToolsPrefs.Save('appStateInspector', { activeSection: this.ActiveSection });
+        this.refresh();
+    }
+    refresh() {
+        this.StateJson = JSON.stringify(this.computeSectionData(this.ActiveSection), this.jsonReplacer, 2);
+        this.LastRefreshed = new Date();
+        this.cdr.markForCheck();
+    }
+    async OnCopy() {
+        try {
+            await navigator.clipboard.writeText(this.StateJson);
+            this.CopyConfirmed = true;
+            this.cdr.markForCheck();
+            setTimeout(() => {
+                this.CopyConfirmed = false;
+                this.cdr.markForCheck();
+            }, 1800);
+        }
+        catch {
+            // clipboard unavailable
+        }
+    }
+    OnDownload() {
+        const blob = new Blob([this.StateJson], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `mj-app-state-${this.ActiveSection}-${this.timestampSlug()}.json`;
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+    get LastRefreshedLabel() {
+        return this.LastRefreshed.toLocaleTimeString();
+    }
+    get SectionLabel() {
+        return this.Sections.find(s => s.id === this.ActiveSection)?.label ?? '';
+    }
+    // ---------- private ----------
+    computeSectionData(section) {
+        switch (section) {
+            case 'user': return this.userData();
+            case 'provider': return this.providerData();
+            case 'workspace': return this.workspaceData();
+            case 'app': return this.appData();
+            case 'dev': return this.devData();
+            case 'browser': return this.browserData();
+            default: return {};
+        }
+    }
+    userData() {
+        const user = this.ProviderToUse?.CurrentUser;
+        if (!user)
+            return { error: 'No current user' };
+        return {
+            ID: user.ID,
+            Name: user.Name,
+            FirstName: user.FirstName,
+            LastName: user.LastName,
+            Email: user.Email,
+            Type: user.Type,
+            IsActive: user.IsActive,
+            LinkedRecordType: user.LinkedRecordType,
+            CreatedAt: user.__mj_CreatedAt,
+            Roles: (user.UserRoles ?? []).map(r => ({ Role: r.Role, RoleID: r.RoleID }))
+        };
+    }
+    providerData() {
+        const provider = this.ProviderToUse;
+        if (!provider)
+            return { error: 'No provider' };
+        const data = {
+            type: provider.constructor.name,
+            EntitiesCount: provider.Entities?.length ?? 0,
+            ApplicationsCount: provider.Applications?.length ?? 0,
+            QueriesCount: provider.Queries?.length ?? 0,
+            RolesCount: provider.Roles?.length ?? 0
+        };
+        if (provider instanceof GraphQLDataProvider) {
+            data.URL = provider.ConfigData?.URL;
+            data.WSURL = provider.ConfigData?.WSURL;
+        }
+        return data;
+    }
+    workspaceData() {
+        const config = this.workspace.GetConfiguration();
+        return config;
+    }
+    appData() {
+        const config = this.workspace.GetConfiguration();
+        if (!config)
+            return { error: 'No workspace configuration' };
+        const activeTab = config.tabs?.find(t => t.id === config.activeTabId);
+        return {
+            ActiveTabId: config.activeTabId,
+            ActiveTab: activeTab,
+            TabCount: config.tabs?.length ?? 0
+        };
+    }
+    devData() {
+        return {
+            IsEnabled: this.devMode.IsEnabled,
+            IsDeveloper: this.devMode.IsDeveloper,
+            EligibleRoles: ['Developer', 'Admin', 'System Administrator', 'Integration']
+        };
+    }
+    browserData() {
+        return {
+            UserAgent: navigator.userAgent,
+            Language: navigator.language,
+            Languages: navigator.languages,
+            Platform: navigator.platform,
+            Online: navigator.onLine,
+            Viewport: { width: window.innerWidth, height: window.innerHeight, devicePixelRatio: window.devicePixelRatio },
+            URL: window.location.href,
+            Origin: window.location.origin,
+            Path: window.location.pathname + window.location.search,
+            Memory: this.readMemory()
+        };
+    }
+    jsonReplacer(_key, value) {
+        if (value instanceof Date)
+            return value.toISOString();
+        if (value instanceof Map)
+            return Object.fromEntries(value.entries());
+        if (value instanceof Set)
+            return Array.from(value);
+        if (typeof value === 'function')
+            return `[Function ${value.name || 'anonymous'}]`;
+        return value;
+    }
+    readMemory() {
+        const memory = performance.memory;
+        if (!memory)
+            return undefined;
+        return { usedJSHeapSize: memory.usedJSHeapSize, totalJSHeapSize: memory.totalJSHeapSize };
+    }
+    timestampSlug() {
+        const d = new Date();
+        const pad = (n) => n.toString().padStart(2, '0');
+        return `${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}-${pad(d.getHours())}${pad(d.getMinutes())}${pad(d.getSeconds())}`;
+    }
+    static ɵfac = function AppStateInspectorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AppStateInspectorComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.WorkspaceStateManager), i0.ɵɵdirectiveInject(i2.DeveloperModeService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AppStateInspectorComponent, selectors: [["mj-app-state-inspector"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 31, vars: 14, consts: [[1, "mj-inspector"], [1, "mj-inspector__header"], [1, "mj-inspector__header-icon"], [1, "fa-solid", "fa-magnifying-glass-chart"], [1, "mj-inspector__header-title"], [1, "mj-inspector__header-sub"], [1, "mj-inspector__header-spacer"], [1, "mj-inspector__header-actions"], ["type", "button", "title", "Refresh", 1, "mj-inspector__btn", 3, "click"], [1, "fa-solid", "fa-rotate"], ["type", "button", 1, "mj-inspector__btn", 3, "click", "title"], [1, "fa-solid"], ["type", "button", "title", "Download as JSON", 1, "mj-inspector__btn", 3, "click"], [1, "fa-solid", "fa-download"], [1, "mj-inspector__body"], [1, "mj-inspector__sidebar"], ["type", "button", 1, "mj-inspector__nav-item", 3, "mj-inspector__nav-item--active"], [1, "mj-inspector__content"], [1, "mj-inspector__content-head"], [1, "mj-inspector__content-title"], [1, "mj-inspector__content-meta"], [1, "mj-inspector__editor"], [3, "ngModelChange", "ngModel", "language", "readonly", "lineWrapping"], ["type", "button", 1, "mj-inspector__nav-item", 3, "click"], [1, "mj-inspector__nav-icon"], [1, "mj-inspector__nav-text"], [1, "mj-inspector__nav-label"], [1, "mj-inspector__nav-desc"]], template: function AppStateInspectorComponent_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, "App State Inspector");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(7, "div", 5);
+            i0.ɵɵtext(8, "Read-only snapshot of Explorer runtime state");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(9, "span", 6);
+            i0.ɵɵelementStart(10, "div", 7)(11, "button", 8);
+            i0.ɵɵlistener("click", function AppStateInspectorComponent_Template_button_click_11_listener() { return ctx.refresh(); });
+            i0.ɵɵelement(12, "i", 9);
+            i0.ɵɵtext(13, " Refresh ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(14, "button", 10);
+            i0.ɵɵlistener("click", function AppStateInspectorComponent_Template_button_click_14_listener() { return ctx.OnCopy(); });
+            i0.ɵɵelement(15, "i", 11);
+            i0.ɵɵtext(16);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(17, "button", 12);
+            i0.ɵɵlistener("click", function AppStateInspectorComponent_Template_button_click_17_listener() { return ctx.OnDownload(); });
+            i0.ɵɵelement(18, "i", 13);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(19, "div", 14)(20, "aside", 15);
+            i0.ɵɵrepeaterCreate(21, AppStateInspectorComponent_For_22_Template, 6, 6, "button", 16, _forTrack0);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(23, "div", 17)(24, "div", 18)(25, "h4", 19);
+            i0.ɵɵtext(26);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(27, "span", 20);
+            i0.ɵɵtext(28);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(29, "div", 21)(30, "mj-code-editor", 22);
+            i0.ɵɵtwoWayListener("ngModelChange", function AppStateInspectorComponent_Template_mj_code_editor_ngModelChange_30_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.StateJson, $event) || (ctx.StateJson = $event); return $event; });
+            i0.ɵɵelementEnd()()()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(14);
+            i0.ɵɵclassProp("mj-inspector__btn--success", ctx.CopyConfirmed);
+            i0.ɵɵproperty("title", ctx.CopyConfirmed ? "Copied" : "Copy JSON");
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("fa-clipboard", !ctx.CopyConfirmed)("fa-check", ctx.CopyConfirmed);
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.CopyConfirmed ? "Copied" : "Copy", " ");
+            i0.ɵɵadvance(5);
+            i0.ɵɵrepeater(ctx.Sections);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate(ctx.SectionLabel);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1("Refreshed ", ctx.LastRefreshedLabel);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.StateJson);
+            i0.ɵɵproperty("language", "json")("readonly", true)("lineWrapping", true);
+        } }, dependencies: [i3.NgControlStatus, i3.NgModel, i4.CodeEditorComponent], 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}"] });
+};
+AppStateInspectorComponent = __decorate([
+    RegisterClass(BaseResourceComponent, 'AppStateInspector')
+], AppStateInspectorComponent);
+export { AppStateInspectorComponent };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AppStateInspectorComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-app-state-inspector', template: "<div class=\"mj-inspector\">\n    <div class=\"mj-inspector__header\">\n        <div class=\"mj-inspector__header-icon\"><i class=\"fa-solid fa-magnifying-glass-chart\"></i></div>\n        <div>\n            <h3 class=\"mj-inspector__header-title\">App State Inspector</h3>\n            <div class=\"mj-inspector__header-sub\">Read-only snapshot of Explorer runtime state</div>\n        </div>\n        <span class=\"mj-inspector__header-spacer\"></span>\n        <div class=\"mj-inspector__header-actions\">\n            <button class=\"mj-inspector__btn\" type=\"button\" (click)=\"refresh()\" title=\"Refresh\">\n                <i class=\"fa-solid fa-rotate\"></i> Refresh\n            </button>\n            <button class=\"mj-inspector__btn\"\n                    [class.mj-inspector__btn--success]=\"CopyConfirmed\"\n                    type=\"button\" (click)=\"OnCopy()\"\n                    [title]=\"CopyConfirmed ? 'Copied' : 'Copy JSON'\">\n                <i class=\"fa-solid\" [class.fa-clipboard]=\"!CopyConfirmed\" [class.fa-check]=\"CopyConfirmed\"></i>\n                {{ CopyConfirmed ? 'Copied' : 'Copy' }}\n            </button>\n            <button class=\"mj-inspector__btn\" type=\"button\" (click)=\"OnDownload()\" title=\"Download as JSON\">\n                <i class=\"fa-solid fa-download\"></i>\n            </button>\n        </div>\n    </div>\n\n    <div class=\"mj-inspector__body\">\n        <aside class=\"mj-inspector__sidebar\">\n            @for (section of Sections; track section.id) {\n                <button type=\"button\"\n                        class=\"mj-inspector__nav-item\"\n                        [class.mj-inspector__nav-item--active]=\"ActiveSection === section.id\"\n                        (click)=\"OnSectionClick(section)\">\n                    <i class=\"mj-inspector__nav-icon\" [class]=\"section.icon\"></i>\n                    <div class=\"mj-inspector__nav-text\">\n                        <div class=\"mj-inspector__nav-label\">{{ section.label }}</div>\n                        @if (section.description) {\n                            <div class=\"mj-inspector__nav-desc\">{{ section.description }}</div>\n                        }\n                    </div>\n                </button>\n            }\n        </aside>\n\n        <div class=\"mj-inspector__content\">\n            <div class=\"mj-inspector__content-head\">\n                <h4 class=\"mj-inspector__content-title\">{{ SectionLabel }}</h4>\n                <span class=\"mj-inspector__content-meta\">Refreshed {{ LastRefreshedLabel }}</span>\n            </div>\n            <div class=\"mj-inspector__editor\">\n                <mj-code-editor\n                    [(ngModel)]=\"StateJson\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    [lineWrapping]=\"true\">\n                </mj-code-editor>\n            </div>\n        </div>\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"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.WorkspaceStateManager }, { type: i2.DeveloperModeService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AppStateInspectorComponent, { className: "AppStateInspectorComponent", filePath: "src/DevTools/app-state-inspector.component.ts", lineNumber: 29 }); })();
+//# sourceMappingURL=app-state-inspector.component.js.map