@memberjunction/ng-dashboards 5.51.0 → 6.1.0-edge.1

package/dist/DevTools/grid-width-lab.component.d.ts

@@ -0,0 +1,78 @@
+import { OnInit, ChangeDetectorRef } from '@angular/core';
+import { BaseResourceComponent } from '@memberjunction/ng-shared';
+import { RunViewParams } from '@memberjunction/core';
+import { GridColumnConfig } from '@memberjunction/ng-entity-viewer';
+import * as i0 from "@angular/core";
+/**
+ * Grid Width Lab — a live fixture for `<mj-entity-data-grid>`'s width + column contract.
+ *
+ * This exists because that contract is public API with **no in-tree consumer**: `[FillWidth]`,
+ * `width: 'auto'` + `maxWidth`, and the host-`[Columns]` precedence rules are all exercised only by
+ * a downstream app, so a regression in any of them would ship silently. Every control below maps to
+ * a specific failure that has actually occurred, and each one is *silent* in production — a column
+ * that renders but never fetched, a declared width that stops applying after a filter click, a table
+ * that stops short of its card edge. Making them visible in one place is the whole point.
+ *
+ * The Fields readout is the important half. Most of what this contract gets wrong is invisible in
+ * the rendered grid — the query is where the damage shows — so the panel prints the exact array
+ * `computeFieldsList` hands to RunView for the current column set.
+ *
+ * 🚨 SAFETY BOUNDARY: deliberately UNWIRED from agent context and client tools, on the same
+ * reasoning as the GraphQL Console — this is a developer fixture, not a data surface, and its state
+ * (a hardcoded entity and some layout toggles) is meaningless to an agent. It reads one always-
+ * present metadata entity and mutates nothing.
+ */
+export declare class GridWidthLabComponent extends BaseResourceComponent implements OnInit {
+    private cdr;
+    /**
+     * `Entities` — the one entity guaranteed to be populated in every MJ instance, and it happens to
+     * carry exactly the field shapes this fixture needs: short codes, and a Description long enough
+     * that an uncapped auto-width column visibly misbehaves.
+     */
+    readonly EntityName = "Entities";
+    FillWidth: boolean;
+    ShowHiddenColumn: boolean;
+    FilterOn: boolean;
+    Params: RunViewParams | null;
+    Columns: GridColumnConfig[];
+    FieldsPreview: string[];
+    FieldsError: string | null;
+    constructor(cdr: ChangeDetectorRef);
+    GetResourceDisplayName(): Promise<string>;
+    GetResourceIconClass(): Promise<string>;
+    ngOnInit(): void;
+    /**
+     * The fixture's column set. Each entry is a probe:
+     *
+     *  - **`name`, deliberately lower-case** where the entity says `Name`. The grid resolves host
+     *    field names case-insensitively, so the column renders either way — but the fetch used to
+     *    add the host's spelling to a case-sensitive set already holding the canonical one, putting
+     *    the same field in the query twice. Watch the Fields readout, not the grid.
+     *  - **`Description` at `width: 'auto'` with a `maxWidth`.** 'auto' maps to AG Grid flex; the cap
+     *    is what stops "fill the row" becoming one enormous mostly-empty column. Both used to be
+     *    dropped on the floor despite being public `GridColumnConfig` API.
+     *  - **`BaseTable`, declared hidden.** Hidden is a display decision — the column stays in the
+     *    grid's model and can be switched back on, so its data has to be fetched. It used to be
+     *    excluded from the query, so re-showing it produced a column of empty cells.
+     */
+    private buildColumns;
+    /**
+     * Rebuild both inputs together. `Params` is re-assigned on every filter change in a real page,
+     * which is exactly what used to destroy a host's declared columns — so the filter toggle here
+     * deliberately hands the grid a NEW params object each time.
+     */
+    private rebuild;
+    /**
+     * Print what the grid will actually SELECT. Mirrors the grid's own call: every declared column
+     * regardless of visibility, resolved against entity metadata.
+     */
+    private refreshFieldsPreview;
+    /** True when any two entries differ only by case — the duplicate-column bug, made checkable. */
+    get HasCaseDuplicate(): boolean;
+    OnToggleFillWidth(): void;
+    OnToggleHiddenColumn(): void;
+    OnToggleFilter(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GridWidthLabComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GridWidthLabComponent, "mj-grid-width-lab", never, {}, {}, never, never, false, never>;
+}
+//# sourceMappingURL=grid-width-lab.component.d.ts.map

package/dist/DevTools/grid-width-lab.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-width-lab.component.d.ts","sourceRoot":"","sources":["../../src/DevTools/grid-width-lab.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAqB,MAAM,kCAAkC,CAAC;;AAEvF;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAOa,qBAAsB,SAAQ,qBAAsB,YAAW,MAAM;IAiBlE,OAAO,CAAC,GAAG;IAhBvB;;;;OAIG;IACH,SAAgB,UAAU,cAAc;IAEjC,SAAS,UAAQ;IACjB,gBAAgB,UAAS;IACzB,QAAQ,UAAS;IAEjB,MAAM,EAAE,aAAa,GAAG,IAAI,CAAQ;IACpC,OAAO,EAAE,gBAAgB,EAAE,CAAM;IACjC,aAAa,EAAE,MAAM,EAAE,CAAM;IAC7B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;gBAErB,GAAG,EAAE,iBAAiB;IAIpB,sBAAsB,IAAI,OAAO,CAAC,MAAM,CAAC;IACzC,oBAAoB,IAAI,OAAO,CAAC,MAAM,CAAC;IAEtD,QAAQ,IAAI,IAAI;IAKvB;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,YAAY;IASpB;;;;OAIG;IACH,OAAO,CAAC,OAAO;IAUf;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAgB5B,gGAAgG;IAChG,IAAW,gBAAgB,IAAI,OAAO,CAGrC;IAEM,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,cAAc,IAAI,IAAI;yCAvGpB,qBAAqB;2CAArB,qBAAqB;CA2GjC"}

package/dist/DevTools/grid-width-lab.component.js

@@ -0,0 +1,248 @@
+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 { computeFieldsList } from '@memberjunction/ng-entity-viewer';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-entity-viewer";
+import * as i2 from "@memberjunction/ng-ui-components";
+function GridWidthLabComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 14);
+    i0.ɵɵelement(1, "i", 21);
+    i0.ɵɵtext(2, " Same field requested twice under different casing ");
+    i0.ɵɵelementEnd();
+} }
+function GridWidthLabComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 15);
+    i0.ɵɵelement(1, "i", 22);
+    i0.ɵɵtext(2, " No case-duplicate fields ");
+    i0.ɵɵelementEnd();
+} }
+function GridWidthLabComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-alert", 16);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Message", ctx_r0.FieldsError);
+} }
+function GridWidthLabComponent_Conditional_23_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "code", 23);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const f_r2 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(f_r2);
+} }
+function GridWidthLabComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵrepeaterCreate(1, GridWidthLabComponent_Conditional_23_For_2_Template, 2, 1, "code", 23, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.FieldsPreview);
+} }
+/**
+ * Grid Width Lab — a live fixture for `<mj-entity-data-grid>`'s width + column contract.
+ *
+ * This exists because that contract is public API with **no in-tree consumer**: `[FillWidth]`,
+ * `width: 'auto'` + `maxWidth`, and the host-`[Columns]` precedence rules are all exercised only by
+ * a downstream app, so a regression in any of them would ship silently. Every control below maps to
+ * a specific failure that has actually occurred, and each one is *silent* in production — a column
+ * that renders but never fetched, a declared width that stops applying after a filter click, a table
+ * that stops short of its card edge. Making them visible in one place is the whole point.
+ *
+ * The Fields readout is the important half. Most of what this contract gets wrong is invisible in
+ * the rendered grid — the query is where the damage shows — so the panel prints the exact array
+ * `computeFieldsList` hands to RunView for the current column set.
+ *
+ * 🚨 SAFETY BOUNDARY: deliberately UNWIRED from agent context and client tools, on the same
+ * reasoning as the GraphQL Console — this is a developer fixture, not a data surface, and its state
+ * (a hardcoded entity and some layout toggles) is meaningless to an agent. It reads one always-
+ * present metadata entity and mutates nothing.
+ */
+let GridWidthLabComponent = class GridWidthLabComponent extends BaseResourceComponent {
+    cdr;
+    /**
+     * `Entities` — the one entity guaranteed to be populated in every MJ instance, and it happens to
+     * carry exactly the field shapes this fixture needs: short codes, and a Description long enough
+     * that an uncapped auto-width column visibly misbehaves.
+     */
+    EntityName = 'Entities';
+    FillWidth = true;
+    ShowHiddenColumn = false;
+    FilterOn = false;
+    Params = null;
+    Columns = [];
+    FieldsPreview = [];
+    FieldsError = null;
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+    }
+    async GetResourceDisplayName() { return 'Grid Width Lab'; }
+    async GetResourceIconClass() { return 'fa-solid fa-arrows-left-right-to-line'; }
+    ngOnInit() {
+        this.rebuild();
+        this.NotifyLoadComplete();
+    }
+    /**
+     * The fixture's column set. Each entry is a probe:
+     *
+     *  - **`name`, deliberately lower-case** where the entity says `Name`. The grid resolves host
+     *    field names case-insensitively, so the column renders either way — but the fetch used to
+     *    add the host's spelling to a case-sensitive set already holding the canonical one, putting
+     *    the same field in the query twice. Watch the Fields readout, not the grid.
+     *  - **`Description` at `width: 'auto'` with a `maxWidth`.** 'auto' maps to AG Grid flex; the cap
+     *    is what stops "fill the row" becoming one enormous mostly-empty column. Both used to be
+     *    dropped on the floor despite being public `GridColumnConfig` API.
+     *  - **`BaseTable`, declared hidden.** Hidden is a display decision — the column stays in the
+     *    grid's model and can be switched back on, so its data has to be fetched. It used to be
+     *    excluded from the query, so re-showing it produced a column of empty cells.
+     */
+    buildColumns() {
+        return [
+            { field: 'name', title: 'Name (declared lower-case)', width: 220 },
+            { field: 'SchemaName', title: 'Schema', width: 150 },
+            { field: 'Description', title: 'Description (auto + maxWidth)', width: 'auto', maxWidth: 520 },
+            { field: 'BaseTable', title: 'Base Table (starts hidden)', width: 200, visible: this.ShowHiddenColumn },
+        ];
+    }
+    /**
+     * Rebuild both inputs together. `Params` is re-assigned on every filter change in a real page,
+     * which is exactly what used to destroy a host's declared columns — so the filter toggle here
+     * deliberately hands the grid a NEW params object each time.
+     */
+    rebuild() {
+        this.Columns = this.buildColumns();
+        this.Params = {
+            EntityName: this.EntityName,
+            ExtraFilter: this.FilterOn ? "SchemaName = '__mj'" : '',
+        };
+        this.refreshFieldsPreview();
+        this.cdr.detectChanges();
+    }
+    /**
+     * Print what the grid will actually SELECT. Mirrors the grid's own call: every declared column
+     * regardless of visibility, resolved against entity metadata.
+     */
+    refreshFieldsPreview() {
+        this.FieldsError = null;
+        try {
+            const entity = this.ProviderToUse.EntityByName(this.EntityName);
+            if (!entity) {
+                this.FieldsError = `Entity "${this.EntityName}" not found in metadata.`;
+                this.FieldsPreview = [];
+                return;
+            }
+            this.FieldsPreview = computeFieldsList(entity, null, this.Columns.map(c => c.field));
+        }
+        catch (error) {
+            this.FieldsError = error instanceof Error ? error.message : String(error);
+            this.FieldsPreview = [];
+        }
+    }
+    /** True when any two entries differ only by case — the duplicate-column bug, made checkable. */
+    get HasCaseDuplicate() {
+        const lowered = this.FieldsPreview.map(f => f.toLowerCase());
+        return new Set(lowered).size !== lowered.length;
+    }
+    OnToggleFillWidth() {
+        this.FillWidth = !this.FillWidth;
+        this.cdr.detectChanges();
+    }
+    OnToggleHiddenColumn() {
+        this.ShowHiddenColumn = !this.ShowHiddenColumn;
+        this.rebuild();
+    }
+    OnToggleFilter() {
+        this.FilterOn = !this.FilterOn;
+        this.rebuild();
+    }
+    static ɵfac = function GridWidthLabComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || GridWidthLabComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GridWidthLabComponent, selectors: [["mj-grid-width-lab"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 40, vars: 14, consts: [[1, "mj-inspector", "mj-inspector--solo"], ["Role", "region", "AriaLabel", "Grid width lab", "Title", "Grid Width Lab", "Subtitle", "Live fixture for the entity-data-grid width + column contract"], ["actions", ""], ["mjButton", "", "size", "sm", "title", "Append the inert trailing filler column", 3, "click", "variant"], ["aria-hidden", "true", 1, "fa-solid", "fa-arrows-left-right-to-line"], [1, "mj-action-label"], ["mjButton", "", "size", "sm", "title", "Re-show the column declared visible:false", 3, "click", "variant"], ["aria-hidden", "true", 1, "fa-solid", "fa-eye"], ["mjButton", "", "size", "sm", "title", "Re-assign Params \u2014 the churn that used to wipe declared columns", 3, "click", "variant"], ["aria-hidden", "true", 1, "fa-solid", "fa-filter"], [1, "mj-inspector__content"], [1, "gwl-fields"], [1, "gwl-fields__head"], [1, "gwl-fields__title"], [1, "gwl-flag", "gwl-flag--bad"], [1, "gwl-flag", "gwl-flag--ok"], ["Variant", "error", 3, "Message"], [1, "gwl-fields__list"], [1, "gwl-note"], [1, "gwl-grid"], [3, "Params", "Columns", "FillWidth"], ["aria-hidden", "true", 1, "fa-solid", "fa-triangle-exclamation"], ["aria-hidden", "true", 1, "fa-solid", "fa-check"], [1, "gwl-field"]], template: function GridWidthLabComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "mj-page-header-interior", 1)(2, "div", 2)(3, "button", 3);
+            i0.ɵɵlistener("click", function GridWidthLabComponent_Template_button_click_3_listener() { return ctx.OnToggleFillWidth(); });
+            i0.ɵɵelement(4, "i", 4);
+            i0.ɵɵelementStart(5, "span", 5);
+            i0.ɵɵtext(6);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(7, "button", 6);
+            i0.ɵɵlistener("click", function GridWidthLabComponent_Template_button_click_7_listener() { return ctx.OnToggleHiddenColumn(); });
+            i0.ɵɵelement(8, "i", 7);
+            i0.ɵɵelementStart(9, "span", 5);
+            i0.ɵɵtext(10);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(11, "button", 8);
+            i0.ɵɵlistener("click", function GridWidthLabComponent_Template_button_click_11_listener() { return ctx.OnToggleFilter(); });
+            i0.ɵɵelement(12, "i", 9);
+            i0.ɵɵelementStart(13, "span", 5);
+            i0.ɵɵtext(14);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(15, "div", 10)(16, "div", 11)(17, "div", 12)(18, "h4", 13);
+            i0.ɵɵtext(19, "Fields sent to RunView");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(20, GridWidthLabComponent_Conditional_20_Template, 3, 0, "span", 14)(21, GridWidthLabComponent_Conditional_21_Template, 3, 0, "span", 15);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(22, GridWidthLabComponent_Conditional_22_Template, 1, 1, "mj-alert", 16)(23, GridWidthLabComponent_Conditional_23_Template, 3, 0, "div", 17);
+            i0.ɵɵelementStart(24, "p", 18);
+            i0.ɵɵtext(25, " The Name column is declared as ");
+            i0.ɵɵelementStart(26, "code");
+            i0.ɵɵtext(27, "name");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(28, " while the entity spells it ");
+            i0.ɵɵelementStart(29, "code");
+            i0.ɵɵtext(30, "Name");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(31, ". Both should resolve to one ");
+            i0.ɵɵelementStart(32, "code");
+            i0.ɵɵtext(33, "Name");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(34, " entry above. ");
+            i0.ɵɵelementStart(35, "code");
+            i0.ɵɵtext(36, "BaseTable");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(37, " should be present whether or not its column is currently shown \u2014 that is what lets it re-appear with data rather than empty cells. ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(38, "div", 19);
+            i0.ɵɵelement(39, "mj-entity-data-grid", 20);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("variant", ctx.FillWidth ? "primary" : "secondary");
+            i0.ɵɵattribute("aria-pressed", ctx.FillWidth);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1("FillWidth ", ctx.FillWidth ? "on" : "off");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("variant", ctx.ShowHiddenColumn ? "primary" : "secondary");
+            i0.ɵɵattribute("aria-pressed", ctx.ShowHiddenColumn);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1("", ctx.ShowHiddenColumn ? "Hide" : "Show", " hidden column");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("variant", ctx.FilterOn ? "primary" : "secondary");
+            i0.ɵɵattribute("aria-pressed", ctx.FilterOn);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1("Filter ", ctx.FilterOn ? "on" : "off");
+            i0.ɵɵadvance(6);
+            i0.ɵɵconditional(ctx.HasCaseDuplicate ? 20 : 21);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.FieldsError ? 22 : 23);
+            i0.ɵɵadvance(17);
+            i0.ɵɵproperty("Params", ctx.Params)("Columns", ctx.Columns)("FillWidth", ctx.FillWidth);
+        } }, dependencies: [i1.EntityDataGridComponent, i2.MJButtonDirective, i2.MJPageHeaderInteriorComponent, i2.MJAlertComponent], 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}", "\n\n\n\n.gwl-fields[_ngcontent-%COMP%] {\n  flex: none;\n  padding: 12px 14px;\n  margin-bottom: 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n}\n\n.gwl-fields__head[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  flex-wrap: wrap;\n  margin-bottom: 10px;\n}\n\n.gwl-fields__title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.gwl-flag[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 9px;\n  border-radius: 999px;\n  font-size: 12px;\n  font-weight: 600;\n}\n.gwl-flag--ok[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 14%, transparent);\n  color: var(--mj-status-success);\n}\n.gwl-flag--bad[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 14%, transparent);\n  color: var(--mj-status-error);\n}\n\n.gwl-fields__list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.gwl-field[_ngcontent-%COMP%] {\n  padding: 2px 8px;\n  border-radius: 4px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n}\n\n.gwl-note[_ngcontent-%COMP%] {\n  margin: 10px 0 0;\n  font-size: 12px;\n  line-height: 1.5;\n  color: var(--mj-text-muted);\n}\n.gwl-note[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n  padding: 1px 5px;\n  border-radius: 3px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n\n\n\n.gwl-grid[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 320px;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n.gwl-grid[_ngcontent-%COMP%]   mj-entity-data-grid[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n}"] });
+};
+GridWidthLabComponent = __decorate([
+    RegisterClass(BaseResourceComponent, 'GridWidthLabInspector')
+], GridWidthLabComponent);
+export { GridWidthLabComponent };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GridWidthLabComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-grid-width-lab', template: "<div class=\"mj-inspector mj-inspector--solo\">\n    <mj-page-header-interior\n        Role=\"region\"\n        AriaLabel=\"Grid width lab\"\n        Title=\"Grid Width Lab\"\n        Subtitle=\"Live fixture for the entity-data-grid width + column contract\">\n        <div actions>\n            <button mjButton\n                    [variant]=\"FillWidth ? 'primary' : 'secondary'\"\n                    size=\"sm\"\n                    (click)=\"OnToggleFillWidth()\"\n                    [attr.aria-pressed]=\"FillWidth\"\n                    title=\"Append the inert trailing filler column\">\n                <i class=\"fa-solid fa-arrows-left-right-to-line\" aria-hidden=\"true\"></i>\n                <span class=\"mj-action-label\">FillWidth {{ FillWidth ? 'on' : 'off' }}</span>\n            </button>\n            <button mjButton\n                    [variant]=\"ShowHiddenColumn ? 'primary' : 'secondary'\"\n                    size=\"sm\"\n                    (click)=\"OnToggleHiddenColumn()\"\n                    [attr.aria-pressed]=\"ShowHiddenColumn\"\n                    title=\"Re-show the column declared visible:false\">\n                <i class=\"fa-solid fa-eye\" aria-hidden=\"true\"></i>\n                <span class=\"mj-action-label\">{{ ShowHiddenColumn ? 'Hide' : 'Show' }} hidden column</span>\n            </button>\n            <button mjButton\n                    [variant]=\"FilterOn ? 'primary' : 'secondary'\"\n                    size=\"sm\"\n                    (click)=\"OnToggleFilter()\"\n                    [attr.aria-pressed]=\"FilterOn\"\n                    title=\"Re-assign Params \u2014 the churn that used to wipe declared columns\">\n                <i class=\"fa-solid fa-filter\" aria-hidden=\"true\"></i>\n                <span class=\"mj-action-label\">Filter {{ FilterOn ? 'on' : 'off' }}</span>\n            </button>\n        </div>\n    </mj-page-header-interior>\n\n    <div class=\"mj-inspector__content\">\n        <!-- What the grid will SELECT. Most of this contract's failures are invisible in the\n             rendered table and only show up in the query. -->\n        <div class=\"gwl-fields\">\n            <div class=\"gwl-fields__head\">\n                <h4 class=\"gwl-fields__title\">Fields sent to RunView</h4>\n                @if (HasCaseDuplicate) {\n                    <span class=\"gwl-flag gwl-flag--bad\">\n                        <i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\"></i>\n                        Same field requested twice under different casing\n                    </span>\n                } @else {\n                    <span class=\"gwl-flag gwl-flag--ok\">\n                        <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i>\n                        No case-duplicate fields\n                    </span>\n                }\n            </div>\n            @if (FieldsError) {\n                <mj-alert Variant=\"error\" [Message]=\"FieldsError\"></mj-alert>\n            } @else {\n                <div class=\"gwl-fields__list\">\n                    @for (f of FieldsPreview; track f) {\n                        <code class=\"gwl-field\">{{ f }}</code>\n                    }\n                </div>\n            }\n            <p class=\"gwl-note\">\n                The Name column is declared as <code>name</code> while the entity spells it\n                <code>Name</code>. Both should resolve to one <code>Name</code> entry above.\n                <code>BaseTable</code> should be present whether or not its column is currently shown \u2014\n                that is what lets it re-appear with data rather than empty cells.\n            </p>\n        </div>\n\n        <div class=\"gwl-grid\">\n            <mj-entity-data-grid\n                [Params]=\"Params\"\n                [Columns]=\"Columns\"\n                [FillWidth]=\"FillWidth\">\n            </mj-entity-data-grid>\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", "/* Grid Width Lab \u2014 fixture chrome only; the grid itself must be left to render exactly as it would\n   on a real page, since its edge-to-edge behaviour is the thing under test. */\n\n.gwl-fields {\n  flex: none;\n  padding: 12px 14px;\n  margin-bottom: 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n}\n\n.gwl-fields__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  flex-wrap: wrap;\n  margin-bottom: 10px;\n}\n\n.gwl-fields__title {\n  margin: 0;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.gwl-flag {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 9px;\n  border-radius: 999px;\n  font-size: 12px;\n  font-weight: 600;\n}\n.gwl-flag--ok {\n  background: color-mix(in srgb, var(--mj-status-success) 14%, transparent);\n  color: var(--mj-status-success);\n}\n.gwl-flag--bad {\n  background: color-mix(in srgb, var(--mj-status-error) 14%, transparent);\n  color: var(--mj-status-error);\n}\n\n.gwl-fields__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.gwl-field {\n  padding: 2px 8px;\n  border-radius: 4px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n}\n\n.gwl-note {\n  margin: 10px 0 0;\n  font-size: 12px;\n  line-height: 1.5;\n  color: var(--mj-text-muted);\n}\n.gwl-note code {\n  padding: 1px 5px;\n  border-radius: 3px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n/* The grid needs a bounded height to scroll internally, and must keep its own card edges so\n   FillWidth's \"reaches the container edge\" claim is actually observable. */\n.gwl-grid {\n  flex: 1;\n  min-height: 320px;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n.gwl-grid mj-entity-data-grid {\n  flex: 1;\n  min-height: 0;\n}\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GridWidthLabComponent, { className: "GridWidthLabComponent", filePath: "src/DevTools/grid-width-lab.component.ts", lineNumber: 33 }); })();
+//# sourceMappingURL=grid-width-lab.component.js.map

package/dist/DevTools/grid-width-lab.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-width-lab.component.js","sourceRoot":"","sources":["../../src/DevTools/grid-width-lab.component.ts","../../src/DevTools/grid-width-lab.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, OnInit, ChangeDetectorRef } from '@angular/core';\nimport { BaseResourceComponent } from '@memberjunction/ng-shared';\nimport { RegisterClass } from '@memberjunction/global';\nimport { RunViewParams } from '@memberjunction/core';\nimport { GridColumnConfig, computeFieldsList } from '@memberjunction/ng-entity-viewer';\n\n/**\n * Grid Width Lab — a live fixture for `<mj-entity-data-grid>`'s width + column contract.\n *\n * This exists because that contract is public API with **no in-tree consumer**: `[FillWidth]`,\n * `width: 'auto'` + `maxWidth`, and the host-`[Columns]` precedence rules are all exercised only by\n * a downstream app, so a regression in any of them would ship silently. Every control below maps to\n * a specific failure that has actually occurred, and each one is *silent* in production — a column\n * that renders but never fetched, a declared width that stops applying after a filter click, a table\n * that stops short of its card edge. Making them visible in one place is the whole point.\n *\n * The Fields readout is the important half. Most of what this contract gets wrong is invisible in\n * the rendered grid — the query is where the damage shows — so the panel prints the exact array\n * `computeFieldsList` hands to RunView for the current column set.\n *\n * 🚨 SAFETY BOUNDARY: deliberately UNWIRED from agent context and client tools, on the same\n * reasoning as the GraphQL Console — this is a developer fixture, not a data surface, and its state\n * (a hardcoded entity and some layout toggles) is meaningless to an agent. It reads one always-\n * present metadata entity and mutates nothing.\n */\n@RegisterClass(BaseResourceComponent, 'GridWidthLabInspector')\n@Component({\n    standalone: false,\n    selector: 'mj-grid-width-lab',\n    templateUrl: './grid-width-lab.component.html',\n    styleUrls: ['./inspector-shared.css', './grid-width-lab.component.css']\n})\nexport class GridWidthLabComponent extends BaseResourceComponent implements OnInit {\n    /**\n     * `Entities` — the one entity guaranteed to be populated in every MJ instance, and it happens to\n     * carry exactly the field shapes this fixture needs: short codes, and a Description long enough\n     * that an uncapped auto-width column visibly misbehaves.\n     */\n    public readonly EntityName = 'Entities';\n\n    public FillWidth = true;\n    public ShowHiddenColumn = false;\n    public FilterOn = false;\n\n    public Params: RunViewParams | null = null;\n    public Columns: GridColumnConfig[] = [];\n    public FieldsPreview: string[] = [];\n    public FieldsError: string | null = null;\n\n    constructor(private cdr: ChangeDetectorRef) {\n        super();\n    }\n\n    public override async GetResourceDisplayName(): Promise<string> { return 'Grid Width Lab'; }\n    public override async GetResourceIconClass(): Promise<string> { return 'fa-solid fa-arrows-left-right-to-line'; }\n\n    public ngOnInit(): void {\n        this.rebuild();\n        this.NotifyLoadComplete();\n    }\n\n    /**\n     * The fixture's column set. Each entry is a probe:\n     *\n     *  - **`name`, deliberately lower-case** where the entity says `Name`. The grid resolves host\n     *    field names case-insensitively, so the column renders either way — but the fetch used to\n     *    add the host's spelling to a case-sensitive set already holding the canonical one, putting\n     *    the same field in the query twice. Watch the Fields readout, not the grid.\n     *  - **`Description` at `width: 'auto'` with a `maxWidth`.** 'auto' maps to AG Grid flex; the cap\n     *    is what stops \"fill the row\" becoming one enormous mostly-empty column. Both used to be\n     *    dropped on the floor despite being public `GridColumnConfig` API.\n     *  - **`BaseTable`, declared hidden.** Hidden is a display decision — the column stays in the\n     *    grid's model and can be switched back on, so its data has to be fetched. It used to be\n     *    excluded from the query, so re-showing it produced a column of empty cells.\n     */\n    private buildColumns(): GridColumnConfig[] {\n        return [\n            { field: 'name', title: 'Name (declared lower-case)', width: 220 },\n            { field: 'SchemaName', title: 'Schema', width: 150 },\n            { field: 'Description', title: 'Description (auto + maxWidth)', width: 'auto', maxWidth: 520 },\n            { field: 'BaseTable', title: 'Base Table (starts hidden)', width: 200, visible: this.ShowHiddenColumn },\n        ];\n    }\n\n    /**\n     * Rebuild both inputs together. `Params` is re-assigned on every filter change in a real page,\n     * which is exactly what used to destroy a host's declared columns — so the filter toggle here\n     * deliberately hands the grid a NEW params object each time.\n     */\n    private rebuild(): void {\n        this.Columns = this.buildColumns();\n        this.Params = {\n            EntityName: this.EntityName,\n            ExtraFilter: this.FilterOn ? \"SchemaName = '__mj'\" : '',\n        };\n        this.refreshFieldsPreview();\n        this.cdr.detectChanges();\n    }\n\n    /**\n     * Print what the grid will actually SELECT. Mirrors the grid's own call: every declared column\n     * regardless of visibility, resolved against entity metadata.\n     */\n    private refreshFieldsPreview(): void {\n        this.FieldsError = null;\n        try {\n            const entity = this.ProviderToUse.EntityByName(this.EntityName);\n            if (!entity) {\n                this.FieldsError = `Entity \"${this.EntityName}\" not found in metadata.`;\n                this.FieldsPreview = [];\n                return;\n            }\n            this.FieldsPreview = computeFieldsList(entity, null, this.Columns.map(c => c.field));\n        } catch (error) {\n            this.FieldsError = error instanceof Error ? error.message : String(error);\n            this.FieldsPreview = [];\n        }\n    }\n\n    /** True when any two entries differ only by case — the duplicate-column bug, made checkable. */\n    public get HasCaseDuplicate(): boolean {\n        const lowered = this.FieldsPreview.map(f => f.toLowerCase());\n        return new Set(lowered).size !== lowered.length;\n    }\n\n    public OnToggleFillWidth(): void {\n        this.FillWidth = !this.FillWidth;\n        this.cdr.detectChanges();\n    }\n\n    public OnToggleHiddenColumn(): void {\n        this.ShowHiddenColumn = !this.ShowHiddenColumn;\n        this.rebuild();\n    }\n\n    public OnToggleFilter(): void {\n        this.FilterOn = !this.FilterOn;\n        this.rebuild();\n    }\n}\n","<div class=\"mj-inspector mj-inspector--solo\">\n    <mj-page-header-interior\n        Role=\"region\"\n        AriaLabel=\"Grid width lab\"\n        Title=\"Grid Width Lab\"\n        Subtitle=\"Live fixture for the entity-data-grid width + column contract\">\n        <div actions>\n            <button mjButton\n                    [variant]=\"FillWidth ? 'primary' : 'secondary'\"\n                    size=\"sm\"\n                    (click)=\"OnToggleFillWidth()\"\n                    [attr.aria-pressed]=\"FillWidth\"\n                    title=\"Append the inert trailing filler column\">\n                <i class=\"fa-solid fa-arrows-left-right-to-line\" aria-hidden=\"true\"></i>\n                <span class=\"mj-action-label\">FillWidth {{ FillWidth ? 'on' : 'off' }}</span>\n            </button>\n            <button mjButton\n                    [variant]=\"ShowHiddenColumn ? 'primary' : 'secondary'\"\n                    size=\"sm\"\n                    (click)=\"OnToggleHiddenColumn()\"\n                    [attr.aria-pressed]=\"ShowHiddenColumn\"\n                    title=\"Re-show the column declared visible:false\">\n                <i class=\"fa-solid fa-eye\" aria-hidden=\"true\"></i>\n                <span class=\"mj-action-label\">{{ ShowHiddenColumn ? 'Hide' : 'Show' }} hidden column</span>\n            </button>\n            <button mjButton\n                    [variant]=\"FilterOn ? 'primary' : 'secondary'\"\n                    size=\"sm\"\n                    (click)=\"OnToggleFilter()\"\n                    [attr.aria-pressed]=\"FilterOn\"\n                    title=\"Re-assign Params — the churn that used to wipe declared columns\">\n                <i class=\"fa-solid fa-filter\" aria-hidden=\"true\"></i>\n                <span class=\"mj-action-label\">Filter {{ FilterOn ? 'on' : 'off' }}</span>\n            </button>\n        </div>\n    </mj-page-header-interior>\n\n    <div class=\"mj-inspector__content\">\n        <!-- What the grid will SELECT. Most of this contract's failures are invisible in the\n             rendered table and only show up in the query. -->\n        <div class=\"gwl-fields\">\n            <div class=\"gwl-fields__head\">\n                <h4 class=\"gwl-fields__title\">Fields sent to RunView</h4>\n                @if (HasCaseDuplicate) {\n                    <span class=\"gwl-flag gwl-flag--bad\">\n                        <i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\"></i>\n                        Same field requested twice under different casing\n                    </span>\n                } @else {\n                    <span class=\"gwl-flag gwl-flag--ok\">\n                        <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i>\n                        No case-duplicate fields\n                    </span>\n                }\n            </div>\n            @if (FieldsError) {\n                <mj-alert Variant=\"error\" [Message]=\"FieldsError\"></mj-alert>\n            } @else {\n                <div class=\"gwl-fields__list\">\n                    @for (f of FieldsPreview; track f) {\n                        <code class=\"gwl-field\">{{ f }}</code>\n                    }\n                </div>\n            }\n            <p class=\"gwl-note\">\n                The Name column is declared as <code>name</code> while the entity spells it\n                <code>Name</code>. Both should resolve to one <code>Name</code> entry above.\n                <code>BaseTable</code> should be present whether or not its column is currently shown —\n                that is what lets it re-appear with data rather than empty cells.\n            </p>\n        </div>\n\n        <div class=\"gwl-grid\">\n            <mj-entity-data-grid\n                [Params]=\"Params\"\n                [Columns]=\"Columns\"\n                [FillWidth]=\"FillWidth\">\n            </mj-entity-data-grid>\n        </div>\n    </div>\n</div>\n"]}

package/dist/DevTools/index.d.ts

@@ -4,5 +4,7 @@ export * from './class-registry.component';
 export * from './lazy-module-status.component';
 export * from './settings-explorer.component';
 export * from './event-monitor.component';
+export * from './grid-width-lab.component';
+export * from './tab-strip-lab.component';
 export * from './graphql-console.component';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DevTools/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DevTools/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC"}

package/dist/DevTools/index.js

@@ -4,5 +4,7 @@ export * from './class-registry.component';
 export * from './lazy-module-status.component';
 export * from './settings-explorer.component';
 export * from './event-monitor.component';
+export * from './grid-width-lab.component';
+export * from './tab-strip-lab.component';
 export * from './graphql-console.component';
 //# sourceMappingURL=index.js.map

package/dist/DevTools/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/DevTools/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './app-state-inspector.component';\nexport * from './layout-inspector.component';\nexport * from './class-registry.component';\nexport * from './lazy-module-status.component';\nexport * from './settings-explorer.component';\nexport * from './event-monitor.component';\nexport * from './graphql-console.component';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/DevTools/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './app-state-inspector.component';\nexport * from './layout-inspector.component';\nexport * from './class-registry.component';\nexport * from './lazy-module-status.component';\nexport * from './settings-explorer.component';\nexport * from './event-monitor.component';\nexport * from './grid-width-lab.component';\nexport * from './tab-strip-lab.component';\nexport * from './graphql-console.component';\n"]}

package/dist/DevTools/tab-strip-lab.component.d.ts

@@ -0,0 +1,76 @@
+import { OnInit, ChangeDetectorRef } from '@angular/core';
+import { BaseResourceComponent } from '@memberjunction/ng-shared';
+import { MJWorkspaceTab, MJWorkspaceTabStore, MJTabReorder } from '@memberjunction/ng-ui-components';
+import { TabClosedEvent } from '@memberjunction/ng-tabstrip';
+import * as i0 from "@angular/core";
+/**
+ * Tab Strip Lab — MJ's two tab strips, rendered side by side over the SAME labels.
+ *
+ * They are two components on purpose: `mj-tabstrip` takes tabs as projected children and addresses
+ * them by position (it owns their bodies), while `mj-workspace-tab-strip` takes a data array and
+ * addresses it by stable id (it projects nothing). Those are genuinely different API contracts.
+ * What they must NEVER differ on is how a tab looks or how it responds to a keyboard — and that is
+ * exactly the kind of drift no unit test catches and nobody notices until two screens sit side by
+ * side. Hence this page: the same four labels through both, so any divergence is immediate.
+ *
+ * Both get their chrome from the one global `.mj-tabs*` stylesheet and their keyboard behaviour
+ * from the one `mjTabList` directive, so a difference visible here is a bug in that sharing.
+ *
+ * 🚨 SAFETY BOUNDARY: deliberately unwired from agent context and client tools, as a developer
+ * fixture rather than a data surface (the GraphQL Console precedent). It reads and writes nothing.
+ */
+export declare class TabStripLabComponent extends BaseResourceComponent implements OnInit {
+    private cdr;
+    /** One source of labels for both strips — the comparison is worthless if they differ. */
+    readonly Labels: string[];
+    /**
+     * The projected strip's tabs, as mutable state: `mj-tabstrip` owns no tab array, so CLOSING a
+     * tab means the host removing it from the list it renders — a close with no `(BeforeTabClosed)`
+     * handler waits forever on the strip's cancelable-close contract and silently does nothing.
+     */
+    ProjectedLabels: string[];
+    /** Drives the projected strip. */
+    ProjectedIndex: number;
+    /**
+     * Drives the data-driven strip. Uses the real store rather than a hand-rolled array so the
+     * fixture also exercises open/close/reorder/neighbour-activation as shipped.
+     */
+    readonly Store: MJWorkspaceTabStore<{
+        Note: string;
+    }>;
+    constructor(cdr: ChangeDetectorRef);
+    GetResourceDisplayName(): Promise<string>;
+    GetResourceIconClass(): Promise<string>;
+    /**
+     * Snapshot of `Store.Tabs`, reassigned by every handler. A getter delegating to the store
+     * returns a FRESH array per read, which both defeats the strip's OnPush change detection and
+     * trips dev-mode `ExpressionChanged` under default CD — the classic unstable-binding bug.
+     */
+    DraftTabs: MJWorkspaceTab<{
+        Note: string;
+    }>[];
+    ngOnInit(): void;
+    /**
+     * Seeded so every per-tab state the chrome can express is on screen at once — a plain tab, one
+     * with unsaved edits (dot), one rejected (warning tint + icon), one complete. Otherwise the
+     * states that only appear mid-workflow are the ones that quietly drift.
+     */
+    ResetDraftTabs(): void;
+    OnDraftSelected(id: string): void;
+    OnDraftClosed(id: string): void;
+    OnDraftReordered(move: MJTabReorder): void;
+    OnDraftNew(): void;
+    OnProjectedTabSelect(event: {
+        index: number;
+    }): void;
+    /**
+     * Complete the strip's close contract: `(TabClosed)` hands the host a `done` callback and the
+     * strip's `CloseTab` awaits it — the host removes the tab from ITS list (the strip owns no tab
+     * array) and signals done. Without a handler the promise never settles and the close button
+     * (and the Delete key) silently do nothing — the exact contract this page exists to demonstrate.
+     */
+    OnProjectedTabClosed(props: TabClosedEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabStripLabComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabStripLabComponent, "mj-tab-strip-lab", never, {}, {}, never, never, false, never>;
+}
+//# sourceMappingURL=tab-strip-lab.component.d.ts.map

package/dist/DevTools/tab-strip-lab.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-strip-lab.component.d.ts","sourceRoot":"","sources":["../../src/DevTools/tab-strip-lab.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AACrG,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;;AAE7D;;;;;;;;;;;;;;;GAeG;AACH,qBAOa,oBAAqB,SAAQ,qBAAsB,YAAW,MAAM;IAoBjE,OAAO,CAAC,GAAG;IAnBvB,yFAAyF;IACzF,SAAgB,MAAM,EAAE,MAAM,EAAE,CAA4F;IAE5H;;;;OAIG;IACI,eAAe,EAAE,MAAM,EAAE,CAAoB;IAEpD,kCAAkC;IAC3B,cAAc,SAAK;IAE1B;;;OAGG;IACH,SAAgB,KAAK;cAAmC,MAAM;OAAM;gBAEhD,GAAG,EAAE,iBAAiB;IAIpB,sBAAsB,IAAI,OAAO,CAAC,MAAM,CAAC;IACzC,oBAAoB,IAAI,OAAO,CAAC,MAAM,CAAC;IAE7D;;;;OAIG;IACI,SAAS,EAAE,cAAc,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAM;IAEnD,QAAQ,IAAI,IAAI;IAKvB;;;;OAIG;IACI,cAAc,IAAI,IAAI;IAiBtB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAMjC,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAM/B,gBAAgB,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI;IAM1C,UAAU,IAAI,IAAI;IAOlB,oBAAoB,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAK3D;;;;;OAKG;IACI,oBAAoB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;yCAjG/C,oBAAoB;2CAApB,oBAAoB;CAsGhC"}