@memberjunction/ng-dashboards 5.34.1 → 5.36.0

package/dist/DevTools/layout-inspector.component.js

@@ -11,30 +11,8 @@ import { DevToolsPrefs } from './dev-tools-prefs';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-base-application";
 import * as i2 from "@angular/forms";
-import * as i3 from "@memberjunction/ng-code-editor";
-const _forTrack0 = ($index, $item) => $item.id;
-function LayoutInspectorComponent_For_22_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 23);
-    i0.ɵɵlistener("click", function LayoutInspectorComponent_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.ɵɵelementStart(5, "div", 27);
-    i0.ɵɵtext(6);
-    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(2);
-    i0.ɵɵtextInterpolate(section_r2.description);
-} }
+import * as i3 from "@memberjunction/ng-ui-components";
+import * as i4 from "@memberjunction/ng-code-editor";
 /**
  * Layout Inspector — read-only view of the current workspace + Golden Layout
  * configuration. Replaces the legacy "Log Layout (Debug)" user-menu item that
@@ -71,6 +49,21 @@ let LayoutInspectorComponent = class LayoutInspectorComponent extends BaseResour
     }
     async GetResourceDisplayName() { return 'Layout Inspector'; }
     async GetResourceIconClass() { return 'fa-solid fa-table-columns'; }
+    /** Sections rendered as horizontal tabs in the chrome's [toolbar] slot. */
+    get tabsConfig() {
+        return this.Sections.map(s => ({
+            key: s.id,
+            label: s.label,
+            icon: s.icon
+        }));
+    }
+    /** Adapter for `<mj-tab-nav>`'s string-typed `(TabChange)` output. */
+    onTabChange(key) {
+        const section = this.Sections.find(s => s.id === key);
+        if (section) {
+            this.OnSectionClick(section);
+        }
+    }
     OnSectionClick(section) {
         if (this.ActiveSection === section.id)
             return;
@@ -140,61 +133,50 @@ let LayoutInspectorComponent = class LayoutInspectorComponent extends BaseResour
         return value;
     }
     static ɵfac = function LayoutInspectorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LayoutInspectorComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.WorkspaceStateManager), i0.ɵɵdirectiveInject(i1.GoldenLayoutManager)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayoutInspectorComponent, selectors: [["mj-layout-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-table-columns"], [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 LayoutInspectorComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
-            i0.ɵɵelement(3, "i", 3);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayoutInspectorComponent, selectors: [["mj-layout-inspector"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 19, vars: 16, consts: [[1, "mj-inspector", "mj-inspector--solo"], ["Role", "region", "AriaLabel", "Layout inspector", "Title", "Layout Inspector", "Subtitle", "Workspace + Golden Layout configuration"], ["actions", ""], [3, "Clicked", "Loading"], ["mjButton", "", "size", "sm", 3, "click", "variant", "title"], ["aria-hidden", "true", 1, "fa-solid"], ["mjButton", "", "variant", "secondary", "size", "sm", "title", "Download as JSON", "aria-label", "Download as JSON", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-download"], ["toolbar", ""], [3, "TabChange", "Tabs", "ActiveKey"], [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"]], template: function LayoutInspectorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "mj-page-header-interior", 1)(2, "div", 2)(3, "mj-refresh-button", 3);
+            i0.ɵɵlistener("Clicked", function LayoutInspectorComponent_Template_mj_refresh_button_Clicked_3_listener() { return ctx.refresh(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "div")(5, "h3", 4);
-            i0.ɵɵtext(6, "Layout Inspector");
+            i0.ɵɵelementStart(4, "button", 4);
+            i0.ɵɵlistener("click", function LayoutInspectorComponent_Template_button_click_4_listener() { return ctx.OnCopy(); });
+            i0.ɵɵelement(5, "i", 5);
+            i0.ɵɵtext(6);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "div", 5);
-            i0.ɵɵtext(8, "Workspace + Golden Layout configuration");
+            i0.ɵɵelementStart(7, "button", 6);
+            i0.ɵɵlistener("click", function LayoutInspectorComponent_Template_button_click_7_listener() { return ctx.OnDownload(); });
+            i0.ɵɵelement(8, "i", 7);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelement(9, "span", 6);
-            i0.ɵɵelementStart(10, "div", 7)(11, "button", 8);
-            i0.ɵɵlistener("click", function LayoutInspectorComponent_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 LayoutInspectorComponent_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 LayoutInspectorComponent_Template_button_click_17_listener() { return ctx.OnDownload(); });
-            i0.ɵɵelement(18, "i", 13);
+            i0.ɵɵelementStart(9, "div", 8)(10, "mj-tab-nav", 9);
+            i0.ɵɵlistener("TabChange", function LayoutInspectorComponent_Template_mj_tab_nav_TabChange_10_listener($event) { return ctx.onTabChange($event); });
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(19, "div", 14)(20, "aside", 15);
-            i0.ɵɵrepeaterCreate(21, LayoutInspectorComponent_For_22_Template, 7, 6, "button", 16, _forTrack0);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(23, "div", 17)(24, "div", 18)(25, "h4", 19);
-            i0.ɵɵtext(26);
+            i0.ɵɵelementStart(11, "div", 10)(12, "div", 11)(13, "h4", 12);
+            i0.ɵɵtext(14);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(27, "span", 20);
-            i0.ɵɵtext(28);
+            i0.ɵɵelementStart(15, "span", 13);
+            i0.ɵɵtext(16);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(29, "div", 21)(30, "mj-code-editor", 22);
-            i0.ɵɵtwoWayListener("ngModelChange", function LayoutInspectorComponent_Template_mj_code_editor_ngModelChange_30_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.LayoutJson, $event) || (ctx.LayoutJson = $event); return $event; });
-            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementStart(17, "div", 14)(18, "mj-code-editor", 15);
+            i0.ɵɵtwoWayListener("ngModelChange", function LayoutInspectorComponent_Template_mj_code_editor_ngModelChange_18_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.LayoutJson, $event) || (ctx.LayoutJson = $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(3);
+            i0.ɵɵproperty("Loading", false);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("variant", ctx.CopyConfirmed ? "success" : "secondary")("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.ɵɵadvance(4);
+            i0.ɵɵproperty("Tabs", ctx.tabsConfig)("ActiveKey", ctx.ActiveSection);
+            i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate(ctx.SectionLabel);
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate1("Refreshed ", ctx.LastRefreshedLabel);
             i0.ɵɵadvance(2);
             i0.ɵɵtwoWayProperty("ngModel", ctx.LayoutJson);
             i0.ɵɵproperty("language", "json")("readonly", true)("lineWrapping", true);
-        } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.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}"] });
+        } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.MJButtonDirective, i3.MJPageHeaderInteriorComponent, i3.MJRefreshButtonComponent, i3.MJTabNavComponent, i4.CodeEditorComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.mj-inspector[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-page);\n    color: var(--mj-text-primary);\n    font-family: inherit;\n}\n\n\n\n.mj-inspector__content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\n}\n.mj-inspector__content-head[_ngcontent-%COMP%] {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--mj-bg-surface-card);\n}\n.mj-inspector__content-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-inspector__content-meta[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n.mj-inspector__editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n.mj-inspector__editor[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: block;\n}\n\n\n\n.mj-inspector__empty[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}"] });
 };
 LayoutInspectorComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'LayoutInspector')
@@ -202,7 +184,7 @@ LayoutInspectorComponent = __decorate([
 export { LayoutInspectorComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayoutInspectorComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-layout-inspector', template: "<div class=\"mj-inspector\">\n    <div class=\"mj-inspector__header\">\n        <div class=\"mj-inspector__header-icon\"><i class=\"fa-solid fa-table-columns\"></i></div>\n        <div>\n            <h3 class=\"mj-inspector__header-title\">Layout Inspector</h3>\n            <div class=\"mj-inspector__header-sub\">Workspace + Golden Layout configuration</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                        <div class=\"mj-inspector__nav-desc\">{{ section.description }}</div>\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)]=\"LayoutJson\"\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"] }]
+        args: [{ standalone: false, selector: 'mj-layout-inspector', template: "<div class=\"mj-inspector mj-inspector--solo\">\n    <mj-page-header-interior\n        Role=\"region\"\n        AriaLabel=\"Layout inspector\"\n        Title=\"Layout Inspector\"\n        Subtitle=\"Workspace + Golden Layout configuration\">\n        <div actions>\n            <mj-refresh-button [Loading]=\"false\" (Clicked)=\"refresh()\"></mj-refresh-button>\n            <button mjButton\n                    [variant]=\"CopyConfirmed ? 'success' : 'secondary'\"\n                    size=\"sm\"\n                    (click)=\"OnCopy()\"\n                    [title]=\"CopyConfirmed ? 'Copied' : 'Copy JSON'\">\n                <i class=\"fa-solid\" [class.fa-clipboard]=\"!CopyConfirmed\" [class.fa-check]=\"CopyConfirmed\" aria-hidden=\"true\"></i>\n                {{ CopyConfirmed ? 'Copied' : 'Copy' }}\n            </button>\n            <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"OnDownload()\" title=\"Download as JSON\" aria-label=\"Download as JSON\">\n                <i class=\"fa-solid fa-download\" aria-hidden=\"true\"></i>\n            </button>\n        </div>\n        <div toolbar>\n            <mj-tab-nav\n                [Tabs]=\"tabsConfig\"\n                [ActiveKey]=\"ActiveSection\"\n                (TabChange)=\"onTabChange($event)\">\n            </mj-tab-nav>\n        </div>\n    </mj-page-header-interior>\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)]=\"LayoutJson\"\n                [language]=\"'json'\"\n                [readonly]=\"true\"\n                [lineWrapping]=\"true\">\n            </mj-code-editor>\n        </div>\n    </div>\n</div>\n", styles: [":host { display: block; height: 100%; }\n\n/*\n  Inspector shell \u2014 each Dev Tools sub-page wraps its body in .mj-inspector. The\n  chrome (title icon, title, subtitle, action buttons) was previously rendered\n  via .mj-inspector__header*, but that's been replaced by <mj-page-header-interior>\n  in every inspector template. Action buttons now use the mjButton directive\n  (variant=\"secondary\" / \"success\") so they inherit global button styling. App\n  State + Layout inspectors used to carry an inner left rail (.mj-inspector__body\n  + __sidebar + __nav-item) for L2 sections; that rail was retired 2026-05-19 in\n  favor of <mj-tab-nav> projected into the chrome's [toolbar] slot, matching\n  SystemDiagnostics and the API Keys tab strip. All inspectors are now \"solo\"\n  mode (no sidebar).\n*/\n.mj-inspector {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-page);\n    color: var(--mj-text-primary);\n    font-family: inherit;\n}\n\n/* Content area */\n.mj-inspector__content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\n}\n.mj-inspector__content-head {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--mj-bg-surface-card);\n}\n.mj-inspector__content-title {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-inspector__content-meta {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n.mj-inspector__editor {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n.mj-inspector__editor mj-code-editor {\n    flex: 1;\n    min-height: 0;\n    display: block;\n}\n\n/* Empty state */\n.mj-inspector__empty {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.WorkspaceStateManager }, { type: i1.GoldenLayoutManager }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LayoutInspectorComponent, { className: "LayoutInspectorComponent", filePath: "src/DevTools/layout-inspector.component.ts", lineNumber: 26 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LayoutInspectorComponent, { className: "LayoutInspectorComponent", filePath: "src/DevTools/layout-inspector.component.ts", lineNumber: 27 }); })();
 //# sourceMappingURL=layout-inspector.component.js.map

package/dist/DevTools/layout-inspector.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout-inspector.component.js","sourceRoot":"","sources":["../../src/DevTools/layout-inspector.component.ts","../../src/DevTools/layout-inspector.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';\nimport { BaseResourceComponent } from '@memberjunction/ng-shared';\nimport { RegisterClass } from '@memberjunction/global';\nimport { WorkspaceStateManager, GoldenLayoutManager } from '@memberjunction/ng-base-application';\nimport { DevToolsPrefs } from './dev-tools-prefs';\n\ninterface LayoutSection {\n    id: 'workspace' | 'golden';\n    label: string;\n    icon: string;\n    description: string;\n}\n\n/**\n * Layout Inspector — read-only view of the current workspace + Golden Layout\n * configuration. Replaces the legacy \"Log Layout (Debug)\" user-menu item that\n * only printed to console.\n */\n@RegisterClass(BaseResourceComponent, 'LayoutInspector')\n@Component({\n    standalone: false,\n    selector: 'mj-layout-inspector',\n    templateUrl: './layout-inspector.component.html',\n    styleUrls: ['./inspector-shared.css']\n})\nexport class LayoutInspectorComponent extends BaseResourceComponent implements OnInit, OnDestroy {\n\n    public Sections: LayoutSection[] = [\n        { id: 'workspace', label: 'Workspace State',  icon: 'fa-solid fa-table-columns',  description: 'Tabs, active tab, app state' },\n        { id: 'golden',    label: 'Golden Layout',    icon: 'fa-solid fa-window-restore', description: 'Active layout JSON config' }\n    ];\n\n    public ActiveSection: 'workspace' | 'golden' = 'workspace';\n    public LayoutJson = '{}';\n    public CopyConfirmed = false;\n    public LastRefreshed = new Date();\n\n    constructor(\n        private cdr: ChangeDetectorRef,\n        private workspace: WorkspaceStateManager,\n        private layout: GoldenLayoutManager\n    ) {\n        super();\n    }\n\n    public ngOnInit(): void {\n        const p = DevToolsPrefs.Get<{ activeSection?: 'workspace' | 'golden' }>('layoutInspector');\n        if (p?.activeSection) this.ActiveSection = p.activeSection;\n        this.refresh();\n        this.NotifyLoadComplete();\n    }\n\n    public override ngOnDestroy(): void {\n        DevToolsPrefs.Save('layoutInspector', { activeSection: this.ActiveSection });\n        super.ngOnDestroy();\n    }\n\n    public override async GetResourceDisplayName(): Promise<string> { return 'Layout Inspector'; }\n    public override async GetResourceIconClass(): Promise<string> { return 'fa-solid fa-table-columns'; }\n\n    public OnSectionClick(section: LayoutSection): void {\n        if (this.ActiveSection === section.id) return;\n        this.ActiveSection = section.id;\n        DevToolsPrefs.Save('layoutInspector', { activeSection: this.ActiveSection });\n        this.refresh();\n    }\n\n    public refresh(): void {\n        this.LayoutJson = JSON.stringify(this.computeData(), this.jsonReplacer, 2);\n        this.LastRefreshed = new Date();\n        this.cdr.markForCheck();\n    }\n\n    public async OnCopy(): Promise<void> {\n        try {\n            await navigator.clipboard.writeText(this.LayoutJson);\n            this.CopyConfirmed = true;\n            this.cdr.markForCheck();\n            setTimeout(() => {\n                this.CopyConfirmed = false;\n                this.cdr.markForCheck();\n            }, 1800);\n        } catch {\n            // clipboard unavailable\n        }\n    }\n\n    public OnDownload(): void {\n        const blob = new Blob([this.LayoutJson], { type: 'application/json' });\n        const url = URL.createObjectURL(blob);\n        const a = document.createElement('a');\n        a.href = url;\n        const stamp = new Date().toISOString().replace(/[:.]/g, '-');\n        a.download = `mj-layout-${this.ActiveSection}-${stamp}.json`;\n        a.click();\n        URL.revokeObjectURL(url);\n    }\n\n    public get LastRefreshedLabel(): string {\n        return this.LastRefreshed.toLocaleTimeString();\n    }\n\n    public get SectionLabel(): string {\n        return this.Sections.find(s => s.id === this.ActiveSection)?.label ?? '';\n    }\n\n    // ---------- private ----------\n\n    private computeData(): unknown {\n        if (this.ActiveSection === 'workspace') {\n            return this.workspace.GetConfiguration();\n        }\n        // Golden Layout: GoldenLayoutManager exposes its raw config when active\n        const layoutAny = this.layout as unknown as { GetCurrentLayoutConfig?: () => unknown; CurrentConfig?: unknown };\n        if (typeof layoutAny.GetCurrentLayoutConfig === 'function') {\n            return layoutAny.GetCurrentLayoutConfig();\n        }\n        if (layoutAny.CurrentConfig !== undefined) {\n            return layoutAny.CurrentConfig;\n        }\n        return { note: 'Golden Layout config is not currently exposed by GoldenLayoutManager.' };\n    }\n\n    private jsonReplacer(_key: string, value: unknown): unknown {\n        if (value instanceof Date) return value.toISOString();\n        if (value instanceof Map) return Object.fromEntries(value.entries());\n        if (value instanceof Set) return Array.from(value);\n        if (typeof value === 'function') return `[Function ${(value as { name: string }).name || 'anonymous'}]`;\n        return value;\n    }\n}\n","<div class=\"mj-inspector\">\n    <div class=\"mj-inspector__header\">\n        <div class=\"mj-inspector__header-icon\"><i class=\"fa-solid fa-table-columns\"></i></div>\n        <div>\n            <h3 class=\"mj-inspector__header-title\">Layout Inspector</h3>\n            <div class=\"mj-inspector__header-sub\">Workspace + Golden Layout configuration</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                        <div class=\"mj-inspector__nav-desc\">{{ section.description }}</div>\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)]=\"LayoutJson\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    [lineWrapping]=\"true\">\n                </mj-code-editor>\n            </div>\n        </div>\n    </div>\n</div>\n"]}
+{"version":3,"file":"layout-inspector.component.js","sourceRoot":"","sources":["../../src/DevTools/layout-inspector.component.ts","../../src/DevTools/layout-inspector.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';\nimport { BaseResourceComponent } from '@memberjunction/ng-shared';\nimport { RegisterClass } from '@memberjunction/global';\nimport { TabConfig } from '@memberjunction/ng-ui-components';\nimport { WorkspaceStateManager, GoldenLayoutManager } from '@memberjunction/ng-base-application';\nimport { DevToolsPrefs } from './dev-tools-prefs';\n\ninterface LayoutSection {\n    id: 'workspace' | 'golden';\n    label: string;\n    icon: string;\n    description: string;\n}\n\n/**\n * Layout Inspector — read-only view of the current workspace + Golden Layout\n * configuration. Replaces the legacy \"Log Layout (Debug)\" user-menu item that\n * only printed to console.\n */\n@RegisterClass(BaseResourceComponent, 'LayoutInspector')\n@Component({\n    standalone: false,\n    selector: 'mj-layout-inspector',\n    templateUrl: './layout-inspector.component.html',\n    styleUrls: ['./inspector-shared.css']\n})\nexport class LayoutInspectorComponent extends BaseResourceComponent implements OnInit, OnDestroy {\n\n    public Sections: LayoutSection[] = [\n        { id: 'workspace', label: 'Workspace State',  icon: 'fa-solid fa-table-columns',  description: 'Tabs, active tab, app state' },\n        { id: 'golden',    label: 'Golden Layout',    icon: 'fa-solid fa-window-restore', description: 'Active layout JSON config' }\n    ];\n\n    public ActiveSection: 'workspace' | 'golden' = 'workspace';\n    public LayoutJson = '{}';\n    public CopyConfirmed = false;\n    public LastRefreshed = new Date();\n\n    constructor(\n        private cdr: ChangeDetectorRef,\n        private workspace: WorkspaceStateManager,\n        private layout: GoldenLayoutManager\n    ) {\n        super();\n    }\n\n    public ngOnInit(): void {\n        const p = DevToolsPrefs.Get<{ activeSection?: 'workspace' | 'golden' }>('layoutInspector');\n        if (p?.activeSection) this.ActiveSection = p.activeSection;\n        this.refresh();\n        this.NotifyLoadComplete();\n    }\n\n    public override ngOnDestroy(): void {\n        DevToolsPrefs.Save('layoutInspector', { activeSection: this.ActiveSection });\n        super.ngOnDestroy();\n    }\n\n    public override async GetResourceDisplayName(): Promise<string> { return 'Layout Inspector'; }\n    public override async GetResourceIconClass(): Promise<string> { return 'fa-solid fa-table-columns'; }\n\n    /** Sections rendered as horizontal tabs in the chrome's [toolbar] slot. */\n    public get tabsConfig(): TabConfig[] {\n        return this.Sections.map(s => ({\n            key: s.id,\n            label: s.label,\n            icon: s.icon\n        }));\n    }\n\n    /** Adapter for `<mj-tab-nav>`'s string-typed `(TabChange)` output. */\n    public onTabChange(key: string): void {\n        const section = this.Sections.find(s => s.id === key);\n        if (section) {\n            this.OnSectionClick(section);\n        }\n    }\n\n    public OnSectionClick(section: LayoutSection): void {\n        if (this.ActiveSection === section.id) return;\n        this.ActiveSection = section.id;\n        DevToolsPrefs.Save('layoutInspector', { activeSection: this.ActiveSection });\n        this.refresh();\n    }\n\n    public refresh(): void {\n        this.LayoutJson = JSON.stringify(this.computeData(), this.jsonReplacer, 2);\n        this.LastRefreshed = new Date();\n        this.cdr.markForCheck();\n    }\n\n    public async OnCopy(): Promise<void> {\n        try {\n            await navigator.clipboard.writeText(this.LayoutJson);\n            this.CopyConfirmed = true;\n            this.cdr.markForCheck();\n            setTimeout(() => {\n                this.CopyConfirmed = false;\n                this.cdr.markForCheck();\n            }, 1800);\n        } catch {\n            // clipboard unavailable\n        }\n    }\n\n    public OnDownload(): void {\n        const blob = new Blob([this.LayoutJson], { type: 'application/json' });\n        const url = URL.createObjectURL(blob);\n        const a = document.createElement('a');\n        a.href = url;\n        const stamp = new Date().toISOString().replace(/[:.]/g, '-');\n        a.download = `mj-layout-${this.ActiveSection}-${stamp}.json`;\n        a.click();\n        URL.revokeObjectURL(url);\n    }\n\n    public get LastRefreshedLabel(): string {\n        return this.LastRefreshed.toLocaleTimeString();\n    }\n\n    public get SectionLabel(): string {\n        return this.Sections.find(s => s.id === this.ActiveSection)?.label ?? '';\n    }\n\n    // ---------- private ----------\n\n    private computeData(): unknown {\n        if (this.ActiveSection === 'workspace') {\n            return this.workspace.GetConfiguration();\n        }\n        // Golden Layout: GoldenLayoutManager exposes its raw config when active\n        const layoutAny = this.layout as unknown as { GetCurrentLayoutConfig?: () => unknown; CurrentConfig?: unknown };\n        if (typeof layoutAny.GetCurrentLayoutConfig === 'function') {\n            return layoutAny.GetCurrentLayoutConfig();\n        }\n        if (layoutAny.CurrentConfig !== undefined) {\n            return layoutAny.CurrentConfig;\n        }\n        return { note: 'Golden Layout config is not currently exposed by GoldenLayoutManager.' };\n    }\n\n    private jsonReplacer(_key: string, value: unknown): unknown {\n        if (value instanceof Date) return value.toISOString();\n        if (value instanceof Map) return Object.fromEntries(value.entries());\n        if (value instanceof Set) return Array.from(value);\n        if (typeof value === 'function') return `[Function ${(value as { name: string }).name || 'anonymous'}]`;\n        return value;\n    }\n}\n","<div class=\"mj-inspector mj-inspector--solo\">\n    <mj-page-header-interior\n        Role=\"region\"\n        AriaLabel=\"Layout inspector\"\n        Title=\"Layout Inspector\"\n        Subtitle=\"Workspace + Golden Layout configuration\">\n        <div actions>\n            <mj-refresh-button [Loading]=\"false\" (Clicked)=\"refresh()\"></mj-refresh-button>\n            <button mjButton\n                    [variant]=\"CopyConfirmed ? 'success' : 'secondary'\"\n                    size=\"sm\"\n                    (click)=\"OnCopy()\"\n                    [title]=\"CopyConfirmed ? 'Copied' : 'Copy JSON'\">\n                <i class=\"fa-solid\" [class.fa-clipboard]=\"!CopyConfirmed\" [class.fa-check]=\"CopyConfirmed\" aria-hidden=\"true\"></i>\n                {{ CopyConfirmed ? 'Copied' : 'Copy' }}\n            </button>\n            <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"OnDownload()\" title=\"Download as JSON\" aria-label=\"Download as JSON\">\n                <i class=\"fa-solid fa-download\" aria-hidden=\"true\"></i>\n            </button>\n        </div>\n        <div toolbar>\n            <mj-tab-nav\n                [Tabs]=\"tabsConfig\"\n                [ActiveKey]=\"ActiveSection\"\n                (TabChange)=\"onTabChange($event)\">\n            </mj-tab-nav>\n        </div>\n    </mj-page-header-interior>\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)]=\"LayoutJson\"\n                [language]=\"'json'\"\n                [readonly]=\"true\"\n                [lineWrapping]=\"true\">\n            </mj-code-editor>\n        </div>\n    </div>\n</div>\n"]}