@memberjunction/ng-dashboards 5.26.0 → 5.27.0

package/dist/AI/components/analytics/analytics-filter-bar.component.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @fileoverview Reusable filter bar for AI Analytics dashboard sections.
+ *
+ * Provides time-range chips, model/agent/prompt/status dropdowns
+ * (using mj-dropdown), a compare toggle, and an optional export button.
+ * Each section shows/hides filters via boolean inputs.
+ */
+import { EventEmitter, OnInit } from '@angular/core';
+import { GlobalFilterState } from '../../interfaces/analytics-preferences.interface';
+import * as i0 from "@angular/core";
+interface FilterOption {
+    text: string;
+    value: string;
+    [key: string]: unknown;
+}
+export declare class AnalyticsFilterBarComponent implements OnInit {
+    TimeRange: string;
+    TimeRangeOptions: string[];
+    ShowModelFilter: boolean;
+    ShowAgentFilter: boolean;
+    ShowPromptFilter: boolean;
+    ShowStatusFilter: boolean;
+    ShowCompareToggle: boolean;
+    ShowExportButton: boolean;
+    Filters: GlobalFilterState;
+    TimeRangeChange: EventEmitter<string>;
+    FiltersChange: EventEmitter<GlobalFilterState>;
+    CompareToggled: EventEmitter<boolean>;
+    ExportClicked: EventEmitter<void>;
+    ModelOptions: FilterOption[];
+    AgentOptions: FilterOption[];
+    PromptOptions: FilterOption[];
+    StatusOptions: FilterOption[];
+    /** Default items shown when nothing is selected (the "All X" option) */
+    modelDefaultItem: FilterOption;
+    agentDefaultItem: FilterOption;
+    promptDefaultItem: FilterOption;
+    statusDefaultItem: FilterOption;
+    compareActive: boolean;
+    ngOnInit(): void;
+    OnTimeRangeSelect(range: string): void;
+    OnModelChange(event: unknown): void;
+    OnAgentChange(event: unknown): void;
+    OnPromptChange(event: unknown): void;
+    OnStatusChange(event: unknown): void;
+    ToggleCompare(): void;
+    private BuildOptions;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AnalyticsFilterBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AnalyticsFilterBarComponent, "app-analytics-filter-bar", never, { "TimeRange": { "alias": "TimeRange"; "required": false; }; "TimeRangeOptions": { "alias": "TimeRangeOptions"; "required": false; }; "ShowModelFilter": { "alias": "ShowModelFilter"; "required": false; }; "ShowAgentFilter": { "alias": "ShowAgentFilter"; "required": false; }; "ShowPromptFilter": { "alias": "ShowPromptFilter"; "required": false; }; "ShowStatusFilter": { "alias": "ShowStatusFilter"; "required": false; }; "ShowCompareToggle": { "alias": "ShowCompareToggle"; "required": false; }; "ShowExportButton": { "alias": "ShowExportButton"; "required": false; }; "Filters": { "alias": "Filters"; "required": false; }; }, { "TimeRangeChange": "TimeRangeChange"; "FiltersChange": "FiltersChange"; "CompareToggled": "CompareToggled"; "ExportClicked": "ExportClicked"; }, never, never, false, never>;
+}
+export {};
+//# sourceMappingURL=analytics-filter-bar.component.d.ts.map

package/dist/AI/components/analytics/analytics-filter-bar.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics-filter-bar.component.d.ts","sourceRoot":"","sources":["../../../../src/AI/components/analytics/analytics-filter-bar.component.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;;AAErF,UAAU,YAAY;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAED,qBAkNa,2BAA4B,YAAW,MAAM;IAC7C,SAAS,SAAS;IAClB,gBAAgB,EAAE,MAAM,EAAE,CAAoC;IAC9D,eAAe,UAAQ;IACvB,eAAe,UAAQ;IACvB,gBAAgB,UAAQ;IACxB,gBAAgB,UAAQ;IACxB,iBAAiB,UAAQ;IACzB,gBAAgB,UAAS;IACzB,OAAO,EAAE,iBAAiB,CAAyD;IAElF,eAAe,uBAA8B;IAC7C,aAAa,kCAAyC;IACtD,cAAc,wBAA+B;IAC7C,aAAa,qBAA4B;IAE5C,YAAY,EAAE,YAAY,EAAE,CAAM;IAClC,YAAY,EAAE,YAAY,EAAE,CAAM;IAClC,aAAa,EAAE,YAAY,EAAE,CAAM;IACnC,aAAa,EAAE,YAAY,EAAE,CAMlC;IAEF,wEAAwE;IACjE,gBAAgB,EAAE,YAAY,CAAqC;IACnE,gBAAgB,EAAE,YAAY,CAAqC;IACnE,iBAAiB,EAAE,YAAY,CAAsC;IACrE,iBAAiB,EAAE,YAAY,CAAuC;IAEtE,aAAa,UAAS;IAE7B,QAAQ,IAAI,IAAI;IAIT,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKtC,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAMnC,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAMnC,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAMpC,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAMpC,aAAa,IAAI,IAAI;IAK5B,OAAO,CAAC,YAAY;yCAzEX,2BAA2B;2CAA3B,2BAA2B;CAyFvC"}

package/dist/AI/components/analytics/analytics-filter-bar.component.js

@@ -0,0 +1,306 @@
+/**
+ * @fileoverview Reusable filter bar for AI Analytics dashboard sections.
+ *
+ * Provides time-range chips, model/agent/prompt/status dropdowns
+ * (using mj-dropdown), a compare toggle, and an optional export button.
+ * Each section shows/hides filters via boolean inputs.
+ */
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { AIEngineBase } from '@memberjunction/ai-engine-base';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-ui-components";
+function AnalyticsFilterBarComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dropdown", 12);
+    i0.ɵɵlistener("ValueChange", function AnalyticsFilterBarComponent_Conditional_5_Template_mj_dropdown_ValueChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnModelChange($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Data", ctx_r1.ModelOptions)("ValuePrimitive", true)("DefaultItem", ctx_r1.modelDefaultItem)("Filterable", ctx_r1.ModelOptions.length > 10);
+} }
+function AnalyticsFilterBarComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dropdown", 13);
+    i0.ɵɵlistener("ValueChange", function AnalyticsFilterBarComponent_Conditional_6_Template_mj_dropdown_ValueChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnAgentChange($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Data", ctx_r1.AgentOptions)("ValuePrimitive", true)("DefaultItem", ctx_r1.agentDefaultItem)("Filterable", ctx_r1.AgentOptions.length > 10);
+} }
+function AnalyticsFilterBarComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dropdown", 14);
+    i0.ɵɵlistener("ValueChange", function AnalyticsFilterBarComponent_Conditional_7_Template_mj_dropdown_ValueChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnPromptChange($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Data", ctx_r1.PromptOptions)("ValuePrimitive", true)("DefaultItem", ctx_r1.promptDefaultItem)("Filterable", ctx_r1.PromptOptions.length > 10);
+} }
+function AnalyticsFilterBarComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dropdown", 15);
+    i0.ɵɵlistener("ValueChange", function AnalyticsFilterBarComponent_Conditional_8_Template_mj_dropdown_ValueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnStatusChange($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Data", ctx_r1.StatusOptions)("ValuePrimitive", true)("DefaultItem", ctx_r1.statusDefaultItem);
+} }
+function AnalyticsFilterBarComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 16);
+    i0.ɵɵlistener("click", function AnalyticsFilterBarComponent_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleCompare()); });
+    i0.ɵɵelement(1, "i", 17);
+    i0.ɵɵtext(2, " Compare ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("active", ctx_r1.compareActive);
+} }
+function AnalyticsFilterBarComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 18);
+    i0.ɵɵlistener("click", function AnalyticsFilterBarComponent_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ExportClicked.emit()); });
+    i0.ɵɵelement(1, "i", 19);
+    i0.ɵɵtext(2, " Export ");
+    i0.ɵɵelementEnd();
+} }
+function AnalyticsFilterBarComponent_For_13_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 20);
+    i0.ɵɵlistener("click", function AnalyticsFilterBarComponent_For_13_Template_button_click_0_listener() { const option_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTimeRangeSelect(option_r9)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const option_r9 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("active", ctx_r1.TimeRange === option_r9);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", option_r9, " ");
+} }
+export class AnalyticsFilterBarComponent {
+    TimeRange = '24h';
+    TimeRangeOptions = ['1h', '6h', '24h', '7d', '30d'];
+    ShowModelFilter = true;
+    ShowAgentFilter = true;
+    ShowPromptFilter = true;
+    ShowStatusFilter = true;
+    ShowCompareToggle = true;
+    ShowExportButton = false;
+    Filters = { Models: [], Agents: [], Prompts: [], Statuses: [] };
+    TimeRangeChange = new EventEmitter();
+    FiltersChange = new EventEmitter();
+    CompareToggled = new EventEmitter();
+    ExportClicked = new EventEmitter();
+    ModelOptions = [];
+    AgentOptions = [];
+    PromptOptions = [];
+    StatusOptions = [
+        { text: 'Success', value: 'Success' },
+        { text: 'Error', value: 'Error' },
+        { text: 'Running', value: 'Running' },
+        { text: 'Pending', value: 'Pending' },
+        { text: 'Canceled', value: 'Canceled' }
+    ];
+    /** Default items shown when nothing is selected (the "All X" option) */
+    modelDefaultItem = { text: 'All Models', value: '' };
+    agentDefaultItem = { text: 'All Agents', value: '' };
+    promptDefaultItem = { text: 'All Prompts', value: '' };
+    statusDefaultItem = { text: 'All Statuses', value: '' };
+    compareActive = false;
+    ngOnInit() {
+        this.BuildOptions();
+    }
+    OnTimeRangeSelect(range) {
+        this.TimeRange = range;
+        this.TimeRangeChange.emit(range);
+    }
+    OnModelChange(event) {
+        const id = event ?? '';
+        this.Filters = { ...this.Filters, Models: id ? [id] : [] };
+        this.FiltersChange.emit(this.Filters);
+    }
+    OnAgentChange(event) {
+        const id = event ?? '';
+        this.Filters = { ...this.Filters, Agents: id ? [id] : [] };
+        this.FiltersChange.emit(this.Filters);
+    }
+    OnPromptChange(event) {
+        const id = event ?? '';
+        this.Filters = { ...this.Filters, Prompts: id ? [id] : [] };
+        this.FiltersChange.emit(this.Filters);
+    }
+    OnStatusChange(event) {
+        const status = event ?? '';
+        this.Filters = { ...this.Filters, Statuses: status ? [status] : [] };
+        this.FiltersChange.emit(this.Filters);
+    }
+    ToggleCompare() {
+        this.compareActive = !this.compareActive;
+        this.CompareToggled.emit(this.compareActive);
+    }
+    BuildOptions() {
+        const engine = AIEngineBase.Instance;
+        this.ModelOptions = engine.Models
+            .map(m => ({ text: m.Name ?? '', value: m.ID }))
+            .sort((a, b) => a.text.localeCompare(b.text));
+        this.AgentOptions = engine.Agents
+            .filter(a => a.Status === 'Active')
+            .map(a => ({ text: a.Name ?? '', value: a.ID }))
+            .sort((a, b) => a.text.localeCompare(b.text));
+        this.PromptOptions = engine.Prompts
+            .map(p => ({ text: p.Name ?? '', value: p.ID }))
+            .sort((a, b) => a.text.localeCompare(b.text));
+    }
+    static ɵfac = function AnalyticsFilterBarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AnalyticsFilterBarComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AnalyticsFilterBarComponent, selectors: [["app-analytics-filter-bar"]], inputs: { TimeRange: "TimeRange", TimeRangeOptions: "TimeRangeOptions", ShowModelFilter: "ShowModelFilter", ShowAgentFilter: "ShowAgentFilter", ShowPromptFilter: "ShowPromptFilter", ShowStatusFilter: "ShowStatusFilter", ShowCompareToggle: "ShowCompareToggle", ShowExportButton: "ShowExportButton", Filters: "Filters" }, outputs: { TimeRangeChange: "TimeRangeChange", FiltersChange: "FiltersChange", CompareToggled: "CompareToggled", ExportClicked: "ExportClicked" }, standalone: false, decls: 14, vars: 6, consts: [[1, "filter-bar"], [1, "filter-controls"], [1, "filter-label"], [1, "fa-solid", "fa-filter"], ["TextField", "text", "ValueField", "value", "Placeholder", "All Models", 3, "Data", "ValuePrimitive", "DefaultItem", "Filterable"], ["TextField", "text", "ValueField", "value", "Placeholder", "All Agents", 3, "Data", "ValuePrimitive", "DefaultItem", "Filterable"], ["TextField", "text", "ValueField", "value", "Placeholder", "All Prompts", 3, "Data", "ValuePrimitive", "DefaultItem", "Filterable"], ["TextField", "text", "ValueField", "value", "Placeholder", "All Statuses", 3, "Data", "ValuePrimitive", "DefaultItem"], [1, "compare-btn", 3, "active"], [1, "export-btn"], [1, "time-chips"], [1, "time-chip", 3, "active"], ["TextField", "text", "ValueField", "value", "Placeholder", "All Models", 3, "ValueChange", "Data", "ValuePrimitive", "DefaultItem", "Filterable"], ["TextField", "text", "ValueField", "value", "Placeholder", "All Agents", 3, "ValueChange", "Data", "ValuePrimitive", "DefaultItem", "Filterable"], ["TextField", "text", "ValueField", "value", "Placeholder", "All Prompts", 3, "ValueChange", "Data", "ValuePrimitive", "DefaultItem", "Filterable"], ["TextField", "text", "ValueField", "value", "Placeholder", "All Statuses", 3, "ValueChange", "Data", "ValuePrimitive", "DefaultItem"], [1, "compare-btn", 3, "click"], [1, "fa-solid", "fa-code-compare"], [1, "export-btn", 3, "click"], [1, "fa-solid", "fa-download"], [1, "time-chip", 3, "click"]], template: function AnalyticsFilterBarComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "span", 2);
+            i0.ɵɵelement(3, "i", 3);
+            i0.ɵɵtext(4, " Filters: ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(5, AnalyticsFilterBarComponent_Conditional_5_Template, 1, 4, "mj-dropdown", 4);
+            i0.ɵɵconditionalCreate(6, AnalyticsFilterBarComponent_Conditional_6_Template, 1, 4, "mj-dropdown", 5);
+            i0.ɵɵconditionalCreate(7, AnalyticsFilterBarComponent_Conditional_7_Template, 1, 4, "mj-dropdown", 6);
+            i0.ɵɵconditionalCreate(8, AnalyticsFilterBarComponent_Conditional_8_Template, 1, 3, "mj-dropdown", 7);
+            i0.ɵɵconditionalCreate(9, AnalyticsFilterBarComponent_Conditional_9_Template, 3, 2, "button", 8);
+            i0.ɵɵconditionalCreate(10, AnalyticsFilterBarComponent_Conditional_10_Template, 3, 0, "button", 9);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "div", 10);
+            i0.ɵɵrepeaterCreate(12, AnalyticsFilterBarComponent_For_13_Template, 2, 3, "button", 11, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(5);
+            i0.ɵɵconditional(ctx.ShowModelFilter ? 5 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowAgentFilter ? 6 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowPromptFilter ? 7 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowStatusFilter ? 8 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowCompareToggle ? 9 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowExportButton ? 10 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.TimeRangeOptions);
+        } }, dependencies: [i1.MJDropdownComponent], styles: [".filter-bar[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 10px;\n            padding: 12px 16px;\n            flex-wrap: wrap;\n        }\n\n        .filter-controls[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            flex-wrap: wrap;\n        }\n\n        .filter-label[_ngcontent-%COMP%] {\n            font-size: 13px;\n            font-weight: 600;\n            color: var(--mj-text-secondary);\n            white-space: nowrap;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n\n        .filter-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            font-size: 12px;\n            color: var(--mj-text-muted);\n        }\n\n        [_nghost-%COMP%]     mj-dropdown {\n            min-width: 160px;\n            max-width: 220px;\n        }\n\n        [_nghost-%COMP%]     mj-dropdown .mj-dropdown {\n            font-size: 13px;\n            border-radius: 6px;\n        }\n\n        .compare-btn[_ngcontent-%COMP%], \n   .export-btn[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 5px 12px;\n            border: 1px solid var(--mj-border-default);\n            border-radius: 6px;\n            background: var(--mj-bg-surface);\n            color: var(--mj-text-secondary);\n            font-size: 13px;\n            cursor: pointer;\n            white-space: nowrap;\n            transition: background 0.15s, color 0.15s, border-color 0.15s;\n        }\n\n        .compare-btn[_ngcontent-%COMP%]:hover, \n   .export-btn[_ngcontent-%COMP%]:hover {\n            background: var(--mj-bg-surface-hover);\n            color: var(--mj-text-primary);\n        }\n\n        .compare-btn.active[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n            border-color: var(--mj-brand-primary);\n        }\n\n        .time-chips[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 4px;\n            margin-left: auto;\n        }\n\n        .time-chip[_ngcontent-%COMP%] {\n            padding: 5px 12px;\n            border: 1px solid var(--mj-border-default);\n            border-radius: 16px;\n            background: var(--mj-bg-surface);\n            color: var(--mj-text-secondary);\n            font-size: 12px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: background 0.15s, color 0.15s, border-color 0.15s;\n            white-space: nowrap;\n        }\n\n        .time-chip[_ngcontent-%COMP%]:hover {\n            background: var(--mj-bg-surface-hover);\n            color: var(--mj-text-primary);\n        }\n\n        .time-chip.active[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n            border-color: var(--mj-brand-primary);\n            font-weight: 600;\n        }\n\n        @media (max-width: 768px) {\n            .filter-bar[_ngcontent-%COMP%] {\n                flex-direction: column;\n                align-items: stretch;\n            }\n\n            .time-chips[_ngcontent-%COMP%] {\n                margin-left: 0;\n                justify-content: flex-start;\n                flex-wrap: wrap;\n            }\n        }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AnalyticsFilterBarComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'app-analytics-filter-bar', template: `
+        <div class="filter-bar">
+            <div class="filter-controls">
+                <span class="filter-label">
+                    <i class="fa-solid fa-filter"></i>
+                    Filters:
+                </span>
+
+                @if (ShowModelFilter) {
+                    <mj-dropdown
+                        [Data]="ModelOptions"
+                        TextField="text"
+                        ValueField="value"
+                        [ValuePrimitive]="true"
+                        [DefaultItem]="modelDefaultItem"
+                        [Filterable]="ModelOptions.length > 10"
+                        Placeholder="All Models"
+                        (ValueChange)="OnModelChange($event)">
+                    </mj-dropdown>
+                }
+
+                @if (ShowAgentFilter) {
+                    <mj-dropdown
+                        [Data]="AgentOptions"
+                        TextField="text"
+                        ValueField="value"
+                        [ValuePrimitive]="true"
+                        [DefaultItem]="agentDefaultItem"
+                        [Filterable]="AgentOptions.length > 10"
+                        Placeholder="All Agents"
+                        (ValueChange)="OnAgentChange($event)">
+                    </mj-dropdown>
+                }
+
+                @if (ShowPromptFilter) {
+                    <mj-dropdown
+                        [Data]="PromptOptions"
+                        TextField="text"
+                        ValueField="value"
+                        [ValuePrimitive]="true"
+                        [DefaultItem]="promptDefaultItem"
+                        [Filterable]="PromptOptions.length > 10"
+                        Placeholder="All Prompts"
+                        (ValueChange)="OnPromptChange($event)">
+                    </mj-dropdown>
+                }
+
+                @if (ShowStatusFilter) {
+                    <mj-dropdown
+                        [Data]="StatusOptions"
+                        TextField="text"
+                        ValueField="value"
+                        [ValuePrimitive]="true"
+                        [DefaultItem]="statusDefaultItem"
+                        Placeholder="All Statuses"
+                        (ValueChange)="OnStatusChange($event)">
+                    </mj-dropdown>
+                }
+
+                @if (ShowCompareToggle) {
+                    <button
+                        class="compare-btn"
+                        [class.active]="compareActive"
+                        (click)="ToggleCompare()">
+                        <i class="fa-solid fa-code-compare"></i>
+                        Compare
+                    </button>
+                }
+
+                @if (ShowExportButton) {
+                    <button class="export-btn" (click)="ExportClicked.emit()">
+                        <i class="fa-solid fa-download"></i>
+                        Export
+                    </button>
+                }
+            </div>
+
+            <div class="time-chips">
+                @for (option of TimeRangeOptions; track option) {
+                    <button
+                        class="time-chip"
+                        [class.active]="TimeRange === option"
+                        (click)="OnTimeRangeSelect(option)">
+                        {{ option }}
+                    </button>
+                }
+            </div>
+        </div>
+    `, styles: ["\n        .filter-bar {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 10px;\n            padding: 12px 16px;\n            flex-wrap: wrap;\n        }\n\n        .filter-controls {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            flex-wrap: wrap;\n        }\n\n        .filter-label {\n            font-size: 13px;\n            font-weight: 600;\n            color: var(--mj-text-secondary);\n            white-space: nowrap;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n\n        .filter-label i {\n            font-size: 12px;\n            color: var(--mj-text-muted);\n        }\n\n        :host ::ng-deep mj-dropdown {\n            min-width: 160px;\n            max-width: 220px;\n        }\n\n        :host ::ng-deep mj-dropdown .mj-dropdown {\n            font-size: 13px;\n            border-radius: 6px;\n        }\n\n        .compare-btn,\n        .export-btn {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 5px 12px;\n            border: 1px solid var(--mj-border-default);\n            border-radius: 6px;\n            background: var(--mj-bg-surface);\n            color: var(--mj-text-secondary);\n            font-size: 13px;\n            cursor: pointer;\n            white-space: nowrap;\n            transition: background 0.15s, color 0.15s, border-color 0.15s;\n        }\n\n        .compare-btn:hover,\n        .export-btn:hover {\n            background: var(--mj-bg-surface-hover);\n            color: var(--mj-text-primary);\n        }\n\n        .compare-btn.active {\n            background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n            border-color: var(--mj-brand-primary);\n        }\n\n        .time-chips {\n            display: flex;\n            align-items: center;\n            gap: 4px;\n            margin-left: auto;\n        }\n\n        .time-chip {\n            padding: 5px 12px;\n            border: 1px solid var(--mj-border-default);\n            border-radius: 16px;\n            background: var(--mj-bg-surface);\n            color: var(--mj-text-secondary);\n            font-size: 12px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: background 0.15s, color 0.15s, border-color 0.15s;\n            white-space: nowrap;\n        }\n\n        .time-chip:hover {\n            background: var(--mj-bg-surface-hover);\n            color: var(--mj-text-primary);\n        }\n\n        .time-chip.active {\n            background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n            border-color: var(--mj-brand-primary);\n            font-weight: 600;\n        }\n\n        @media (max-width: 768px) {\n            .filter-bar {\n                flex-direction: column;\n                align-items: stretch;\n            }\n\n            .time-chips {\n                margin-left: 0;\n                justify-content: flex-start;\n                flex-wrap: wrap;\n            }\n        }\n    "] }]
+    }], null, { TimeRange: [{
+            type: Input
+        }], TimeRangeOptions: [{
+            type: Input
+        }], ShowModelFilter: [{
+            type: Input
+        }], ShowAgentFilter: [{
+            type: Input
+        }], ShowPromptFilter: [{
+            type: Input
+        }], ShowStatusFilter: [{
+            type: Input
+        }], ShowCompareToggle: [{
+            type: Input
+        }], ShowExportButton: [{
+            type: Input
+        }], Filters: [{
+            type: Input
+        }], TimeRangeChange: [{
+            type: Output
+        }], FiltersChange: [{
+            type: Output
+        }], CompareToggled: [{
+            type: Output
+        }], ExportClicked: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AnalyticsFilterBarComponent, { className: "AnalyticsFilterBarComponent", filePath: "src/AI/components/analytics/analytics-filter-bar.component.ts", lineNumber: 229 }); })();
+//# sourceMappingURL=analytics-filter-bar.component.js.map

package/dist/AI/components/analytics/analytics-filter-bar.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics-filter-bar.component.js","sourceRoot":"","sources":["../../../../src/AI/components/analytics/analytics-filter-bar.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview Reusable filter bar for AI Analytics dashboard sections.\n *\n * Provides time-range chips, model/agent/prompt/status dropdowns\n * (using mj-dropdown), a compare toggle, and an optional export button.\n * Each section shows/hides filters via boolean inputs.\n */\n\nimport { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';\nimport { AIEngineBase } from '@memberjunction/ai-engine-base';\nimport { GlobalFilterState } from '../../interfaces/analytics-preferences.interface';\n\ninterface FilterOption {\n    text: string;\n    value: string;\n    [key: string]: unknown;\n}\n\n@Component({\n    standalone: false,\n    selector: 'app-analytics-filter-bar',\n    template: `\n        <div class=\"filter-bar\">\n            <div class=\"filter-controls\">\n                <span class=\"filter-label\">\n                    <i class=\"fa-solid fa-filter\"></i>\n                    Filters:\n                </span>\n\n                @if (ShowModelFilter) {\n                    <mj-dropdown\n                        [Data]=\"ModelOptions\"\n                        TextField=\"text\"\n                        ValueField=\"value\"\n                        [ValuePrimitive]=\"true\"\n                        [DefaultItem]=\"modelDefaultItem\"\n                        [Filterable]=\"ModelOptions.length > 10\"\n                        Placeholder=\"All Models\"\n                        (ValueChange)=\"OnModelChange($event)\">\n                    </mj-dropdown>\n                }\n\n                @if (ShowAgentFilter) {\n                    <mj-dropdown\n                        [Data]=\"AgentOptions\"\n                        TextField=\"text\"\n                        ValueField=\"value\"\n                        [ValuePrimitive]=\"true\"\n                        [DefaultItem]=\"agentDefaultItem\"\n                        [Filterable]=\"AgentOptions.length > 10\"\n                        Placeholder=\"All Agents\"\n                        (ValueChange)=\"OnAgentChange($event)\">\n                    </mj-dropdown>\n                }\n\n                @if (ShowPromptFilter) {\n                    <mj-dropdown\n                        [Data]=\"PromptOptions\"\n                        TextField=\"text\"\n                        ValueField=\"value\"\n                        [ValuePrimitive]=\"true\"\n                        [DefaultItem]=\"promptDefaultItem\"\n                        [Filterable]=\"PromptOptions.length > 10\"\n                        Placeholder=\"All Prompts\"\n                        (ValueChange)=\"OnPromptChange($event)\">\n                    </mj-dropdown>\n                }\n\n                @if (ShowStatusFilter) {\n                    <mj-dropdown\n                        [Data]=\"StatusOptions\"\n                        TextField=\"text\"\n                        ValueField=\"value\"\n                        [ValuePrimitive]=\"true\"\n                        [DefaultItem]=\"statusDefaultItem\"\n                        Placeholder=\"All Statuses\"\n                        (ValueChange)=\"OnStatusChange($event)\">\n                    </mj-dropdown>\n                }\n\n                @if (ShowCompareToggle) {\n                    <button\n                        class=\"compare-btn\"\n                        [class.active]=\"compareActive\"\n                        (click)=\"ToggleCompare()\">\n                        <i class=\"fa-solid fa-code-compare\"></i>\n                        Compare\n                    </button>\n                }\n\n                @if (ShowExportButton) {\n                    <button class=\"export-btn\" (click)=\"ExportClicked.emit()\">\n                        <i class=\"fa-solid fa-download\"></i>\n                        Export\n                    </button>\n                }\n            </div>\n\n            <div class=\"time-chips\">\n                @for (option of TimeRangeOptions; track option) {\n                    <button\n                        class=\"time-chip\"\n                        [class.active]=\"TimeRange === option\"\n                        (click)=\"OnTimeRangeSelect(option)\">\n                        {{ option }}\n                    </button>\n                }\n            </div>\n        </div>\n    `,\n    styles: [`\n        .filter-bar {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 10px;\n            padding: 12px 16px;\n            flex-wrap: wrap;\n        }\n\n        .filter-controls {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            flex-wrap: wrap;\n        }\n\n        .filter-label {\n            font-size: 13px;\n            font-weight: 600;\n            color: var(--mj-text-secondary);\n            white-space: nowrap;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n\n        .filter-label i {\n            font-size: 12px;\n            color: var(--mj-text-muted);\n        }\n\n        :host ::ng-deep mj-dropdown {\n            min-width: 160px;\n            max-width: 220px;\n        }\n\n        :host ::ng-deep mj-dropdown .mj-dropdown {\n            font-size: 13px;\n            border-radius: 6px;\n        }\n\n        .compare-btn,\n        .export-btn {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 5px 12px;\n            border: 1px solid var(--mj-border-default);\n            border-radius: 6px;\n            background: var(--mj-bg-surface);\n            color: var(--mj-text-secondary);\n            font-size: 13px;\n            cursor: pointer;\n            white-space: nowrap;\n            transition: background 0.15s, color 0.15s, border-color 0.15s;\n        }\n\n        .compare-btn:hover,\n        .export-btn:hover {\n            background: var(--mj-bg-surface-hover);\n            color: var(--mj-text-primary);\n        }\n\n        .compare-btn.active {\n            background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n            border-color: var(--mj-brand-primary);\n        }\n\n        .time-chips {\n            display: flex;\n            align-items: center;\n            gap: 4px;\n            margin-left: auto;\n        }\n\n        .time-chip {\n            padding: 5px 12px;\n            border: 1px solid var(--mj-border-default);\n            border-radius: 16px;\n            background: var(--mj-bg-surface);\n            color: var(--mj-text-secondary);\n            font-size: 12px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: background 0.15s, color 0.15s, border-color 0.15s;\n            white-space: nowrap;\n        }\n\n        .time-chip:hover {\n            background: var(--mj-bg-surface-hover);\n            color: var(--mj-text-primary);\n        }\n\n        .time-chip.active {\n            background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n            border-color: var(--mj-brand-primary);\n            font-weight: 600;\n        }\n\n        @media (max-width: 768px) {\n            .filter-bar {\n                flex-direction: column;\n                align-items: stretch;\n            }\n\n            .time-chips {\n                margin-left: 0;\n                justify-content: flex-start;\n                flex-wrap: wrap;\n            }\n        }\n    `]\n})\nexport class AnalyticsFilterBarComponent implements OnInit {\n    @Input() TimeRange = '24h';\n    @Input() TimeRangeOptions: string[] = ['1h', '6h', '24h', '7d', '30d'];\n    @Input() ShowModelFilter = true;\n    @Input() ShowAgentFilter = true;\n    @Input() ShowPromptFilter = true;\n    @Input() ShowStatusFilter = true;\n    @Input() ShowCompareToggle = true;\n    @Input() ShowExportButton = false;\n    @Input() Filters: GlobalFilterState = { Models: [], Agents: [], Prompts: [], Statuses: [] };\n\n    @Output() TimeRangeChange = new EventEmitter<string>();\n    @Output() FiltersChange = new EventEmitter<GlobalFilterState>();\n    @Output() CompareToggled = new EventEmitter<boolean>();\n    @Output() ExportClicked = new EventEmitter<void>();\n\n    public ModelOptions: FilterOption[] = [];\n    public AgentOptions: FilterOption[] = [];\n    public PromptOptions: FilterOption[] = [];\n    public StatusOptions: FilterOption[] = [\n        { text: 'Success', value: 'Success' },\n        { text: 'Error', value: 'Error' },\n        { text: 'Running', value: 'Running' },\n        { text: 'Pending', value: 'Pending' },\n        { text: 'Canceled', value: 'Canceled' }\n    ];\n\n    /** Default items shown when nothing is selected (the \"All X\" option) */\n    public modelDefaultItem: FilterOption = { text: 'All Models', value: '' };\n    public agentDefaultItem: FilterOption = { text: 'All Agents', value: '' };\n    public promptDefaultItem: FilterOption = { text: 'All Prompts', value: '' };\n    public statusDefaultItem: FilterOption = { text: 'All Statuses', value: '' };\n\n    public compareActive = false;\n\n    ngOnInit(): void {\n        this.BuildOptions();\n    }\n\n    public OnTimeRangeSelect(range: string): void {\n        this.TimeRange = range;\n        this.TimeRangeChange.emit(range);\n    }\n\n    public OnModelChange(event: unknown): void {\n        const id = (event as string) ?? '';\n        this.Filters = { ...this.Filters, Models: id ? [id] : [] };\n        this.FiltersChange.emit(this.Filters);\n    }\n\n    public OnAgentChange(event: unknown): void {\n        const id = (event as string) ?? '';\n        this.Filters = { ...this.Filters, Agents: id ? [id] : [] };\n        this.FiltersChange.emit(this.Filters);\n    }\n\n    public OnPromptChange(event: unknown): void {\n        const id = (event as string) ?? '';\n        this.Filters = { ...this.Filters, Prompts: id ? [id] : [] };\n        this.FiltersChange.emit(this.Filters);\n    }\n\n    public OnStatusChange(event: unknown): void {\n        const status = (event as string) ?? '';\n        this.Filters = { ...this.Filters, Statuses: status ? [status] : [] };\n        this.FiltersChange.emit(this.Filters);\n    }\n\n    public ToggleCompare(): void {\n        this.compareActive = !this.compareActive;\n        this.CompareToggled.emit(this.compareActive);\n    }\n\n    private BuildOptions(): void {\n        const engine = AIEngineBase.Instance;\n\n        this.ModelOptions = engine.Models\n            .map(m => ({ text: m.Name ?? '', value: m.ID }))\n            .sort((a, b) => a.text.localeCompare(b.text));\n\n        this.AgentOptions = engine.Agents\n            .filter(a => a.Status === 'Active')\n            .map(a => ({ text: a.Name ?? '', value: a.ID }))\n            .sort((a, b) => a.text.localeCompare(b.text));\n\n        this.PromptOptions = engine.Prompts\n            .map(p => ({ text: p.Name ?? '', value: p.ID }))\n            .sort((a, b) => a.text.localeCompare(b.text));\n    }\n}\n"]}

package/dist/AI/components/analytics/cost-budget/cost-budget.component.d.ts

@@ -0,0 +1,81 @@
+/**
+ * @fileoverview Cost & Budget Analytics -- Option B.
+ *
+ * Displays cost KPIs with period deltas, a daily cost bar chart with anomaly detection,
+ * a cost breakdown treemap, and a detailed cost-by-model table with CSV export.
+ */
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { GlobalFilterState } from '../../../interfaces/analytics-preferences.interface';
+import * as i0 from "@angular/core";
+interface CostKpi {
+    Label: string;
+    Value: string;
+    Delta: number | null;
+    DeltaDirection: 'up' | 'down' | 'stable';
+    Highlighted: boolean;
+    Icon: string;
+}
+interface DailyBar {
+    Date: string;
+    Label: string;
+    Cost: number;
+    HeightPercent: number;
+    IsAnomaly: boolean;
+}
+interface TreemapCell {
+    Label: string;
+    Cost: number;
+    Percent: number;
+    Color: string;
+    GridArea: string;
+}
+interface CostByModelRow {
+    Model: string;
+    Vendor: string;
+    Runs: number;
+    InputTokens: number;
+    OutputTokens: number;
+    InputCost: number;
+    OutputCost: number;
+    TotalCost: number;
+    PercentOfTotal: number;
+}
+export declare class AnalyticsCostBudgetComponent implements OnInit, OnDestroy {
+    TimeRange: string;
+    Filters: GlobalFilterState;
+    TimeRangeChange: EventEmitter<string>;
+    FiltersChange: EventEmitter<GlobalFilterState>;
+    private cdr;
+    private destroy$;
+    IsLoading: boolean;
+    TimeRangeOptionsList: string[];
+    CostKpis: CostKpi[];
+    DailyBars: DailyBar[];
+    AvgLinePercent: number;
+    TreemapCells: TreemapCell[];
+    CostByModelRows: CostByModelRow[];
+    private allRuns;
+    private previousPeriodRuns;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    OnTimeRangeChange(range: string): void;
+    OnFiltersChange(filters: GlobalFilterState): void;
+    FormatCurrency(value: number, decimals?: number): string;
+    ExportCSV(): void;
+    private LoadData;
+    private computeKpis;
+    private computeDailyBars;
+    private computeTreemap;
+    private computeCostByModel;
+    private sumCostInRange;
+    private getDateBounds;
+    private buildModelFilter;
+    private combineDateAndModelFilter;
+    private formatBarLabel;
+    private downloadCSV;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AnalyticsCostBudgetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AnalyticsCostBudgetComponent, "app-analytics-cost-budget", never, { "TimeRange": { "alias": "TimeRange"; "required": false; }; "Filters": { "alias": "Filters"; "required": false; }; }, { "TimeRangeChange": "TimeRangeChange"; "FiltersChange": "FiltersChange"; }, never, never, false, never>;
+}
+export declare function LoadAnalyticsCostBudget(): void;
+export {};
+//# sourceMappingURL=cost-budget.component.d.ts.map

package/dist/AI/components/analytics/cost-budget/cost-budget.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cost-budget.component.d.ts","sourceRoot":"","sources":["../../../../../src/AI/components/analytics/cost-budget/cost-budget.component.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACuB,YAAY,EACtC,MAAM,EAAE,SAAS,EACpB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAC;;AAmBxF,UAAU,OAAO;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,cAAc,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;IACzC,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,QAAQ;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,WAAW;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,cAAc;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;CAC1B;AAkBD,qBAogBa,4BAA6B,YAAW,MAAM,EAAE,SAAS;IACzD,SAAS,SAAQ;IACjB,OAAO,EAAE,iBAAiB,CAAyD;IAElF,eAAe,uBAA8B;IAC7C,aAAa,kCAAyC;IAEhE,OAAO,CAAC,GAAG,CAA6B;IACxC,OAAO,CAAC,QAAQ,CAAuB;IAEhC,SAAS,UAAS;IAClB,oBAAoB,WAAsB;IAE1C,QAAQ,EAAE,OAAO,EAAE,CAAM;IACzB,SAAS,EAAE,QAAQ,EAAE,CAAM;IAC3B,cAAc,SAAK;IACnB,YAAY,EAAE,WAAW,EAAE,CAAM;IACjC,eAAe,EAAE,cAAc,EAAE,CAAM;IAE9C,OAAO,CAAC,OAAO,CAAyB;IACxC,OAAO,CAAC,kBAAkB,CAAyB;IAEnD,QAAQ,IAAI,IAAI;IAIhB,WAAW,IAAI,IAAI;IAOZ,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAMtC,eAAe,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI;IAMjD,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,SAAI,GAAG,MAAM;IAMnD,SAAS,IAAI,IAAI;YAWV,QAAQ;IA8CtB,OAAO,CAAC,WAAW;IAuDnB,OAAO,CAAC,gBAAgB;IA+BxB,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,kBAAkB;IAuC1B,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,yBAAyB;IASjC,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,WAAW;yCAxSV,4BAA4B;2CAA5B,4BAA4B;CAiTxC;AAED,wBAAgB,uBAAuB,SAAoC"}