import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MJButtonDirective } from '@memberjunction/ng-ui-components';
import { UUIDsEqual } from '@memberjunction/global';
import { RECOMMENDATION_RANK } from '../engine/predictive-studio.engine';
import * as i0 from "@angular/core";
const _forTrack0 = ($index, $item) => $item.ID;
const _forTrack1 = ($index, $item) => $item.algo.ID;
const _forTrack2 = ($index, $item) => $item.k;
function PSCatalogComponent_For_13_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 13);
    i0.ɵɵlistener("click", function PSCatalogComponent_For_13_Template_button_click_0_listener() { const uc_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleUseCase(uc_r2.ID)); });
    i0.ɵɵelement(1, "i");
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const uc_r2 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵclassProp("on", ctx_r2.isSelected(uc_r2.ID));
    i0.ɵɵadvance();
    i0.ɵɵclassMap(ctx_r2.useCaseIcon(uc_r2));
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", uc_r2.Name, " ");
} }
function PSCatalogComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 14);
    i0.ɵɵlistener("click", function PSCatalogComponent_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearScenarios()); });
    i0.ɵɵelement(1, "i", 15);
    i0.ɵɵtext(2, " Clear");
    i0.ɵɵelementEnd();
} }
function PSCatalogComponent_Conditional_15_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div");
    i0.ɵɵtext(1, "For ");
    i0.ɵɵelementStart(2, "strong");
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd();
    i0.ɵɵtext(4, ", your top pick(s): ");
    i0.ɵɵelementStart(5, "strong");
    i0.ɵɵtext(6);
    i0.ɵɵelementEnd();
    i0.ɵɵtext(7, ". Stronger fits are pulled to the front.");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(ctx_r2.recommendation.scenarioLabel);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(ctx_r2.recommendation.primaries.join(" & "));
} }
function PSCatalogComponent_Conditional_15_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div");
    i0.ɵɵtext(1, "For ");
    i0.ɵɵelementStart(2, "strong");
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd();
    i0.ɵɵtext(4, ", no single primary stands out \u2014 review the strong fits at the top.");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(ctx_r2.recommendation.scenarioLabel);
} }
function PSCatalogComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 10);
    i0.ɵɵelement(1, "i", 16);
    i0.ɵɵconditionalCreate(2, PSCatalogComponent_Conditional_15_Conditional_2_Template, 8, 2, "div")(3, PSCatalogComponent_Conditional_15_Conditional_3_Template, 5, 1, "div");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r2.recommendation.primaries.length > 0 ? 2 : 3);
} }
function PSCatalogComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 11)(1, "div", 17);
    i0.ɵɵtext(2, "No algorithms in the catalog yet.");
    i0.ɵɵelementEnd()();
} }
function PSCatalogComponent_Conditional_17_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 20)(1, "span", 40);
    i0.ɵɵtext(2, "Primary");
    i0.ɵɵelementEnd()();
} }
function PSCatalogComponent_Conditional_17_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 5);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const card_r6 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(card_r6.algo.Description);
} }
function PSCatalogComponent_Conditional_17_For_2_For_16_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 29);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const pt_r7 = ctx.$implicit;
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(pt_r7);
} }
function PSCatalogComponent_Conditional_17_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 30);
    i0.ɵɵelement(1, "i", 41);
    i0.ɵɵtext(2, " Feature importance");
    i0.ɵɵelementEnd();
} }
function PSCatalogComponent_Conditional_17_For_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 31);
    i0.ɵɵelement(1, "i", 42);
    i0.ɵɵtext(2, " No importance");
    i0.ɵɵelementEnd();
} }
function PSCatalogComponent_Conditional_17_For_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 43);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const card_r6 = i0.ɵɵnextContext().$implicit;
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵclassMap("ps-lvl-" + card_r6.bestLevel);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ctx_r2.levelLabel(card_r6.bestLevel));
} }
function PSCatalogComponent_Conditional_17_For_2_Conditional_29_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "p", 44);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const card_r6 = i0.ɵɵnextContext(2).$implicit;
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(card_r6.algo.Description);
} }
function PSCatalogComponent_Conditional_17_For_2_Conditional_29_Conditional_12_For_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 54)(1, "span", 55);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "span", 56);
    i0.ɵɵtext(4);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const hp_r9 = ctx.$implicit;
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(hp_r9.k);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(hp_r9.v);
} }
function PSCatalogComponent_Conditional_17_For_2_Conditional_29_Conditional_12_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 52);
    i0.ɵɵtext(1, "Default hyperparameters");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(2, "div", 53);
    i0.ɵɵrepeaterCreate(3, PSCatalogComponent_Conditional_17_For_2_Conditional_29_Conditional_12_For_4_Template, 5, 2, "div", 54, _forTrack2);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const card_r6 = i0.ɵɵnextContext(2).$implicit;
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(3);
    i0.ɵɵrepeater(ctx_r2.hyperparams(card_r6.algo));
} }
function PSCatalogComponent_Conditional_17_For_2_Conditional_29_Conditional_13_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 49);
    i0.ɵɵtext(1, "Sensible defaults are applied at training time.");
    i0.ɵɵelementEnd();
} }
function PSCatalogComponent_Conditional_17_For_2_Conditional_29_Template(rf, ctx) { if (rf & 1) {
    const _r8 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 39);
    i0.ɵɵconditionalCreate(1, PSCatalogComponent_Conditional_17_For_2_Conditional_29_Conditional_1_Template, 2, 1, "p", 44);
    i0.ɵɵelementStart(2, "div", 45)(3, "span", 46);
    i0.ɵɵtext(4, "Problem types");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "span", 47);
    i0.ɵɵtext(6);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(7, "div", 45)(8, "span", 46);
    i0.ɵɵtext(9, "Driver class");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(10, "span", 48);
    i0.ɵɵtext(11);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(12, PSCatalogComponent_Conditional_17_For_2_Conditional_29_Conditional_12_Template, 5, 0)(13, PSCatalogComponent_Conditional_17_For_2_Conditional_29_Conditional_13_Template, 2, 0, "div", 49);
    i0.ɵɵelementStart(14, "div", 50)(15, "button", 51);
    i0.ɵɵlistener("click", function PSCatalogComponent_Conditional_17_For_2_Conditional_29_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r8); const card_r6 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.useAlgorithm(card_r6.algo)); });
    i0.ɵɵelement(16, "i", 38);
    i0.ɵɵtext(17, " Use this algorithm ");
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const card_r6 = i0.ɵɵnextContext().$implicit;
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵconditional(card_r6.algo.Description ? 1 : -1);
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(card_r6.problemTypes.join(", ") || "\u2014");
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(card_r6.algo.DriverClass);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.hyperparams(card_r6.algo).length > 0 ? 12 : 13);
} }
function PSCatalogComponent_Conditional_17_For_2_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 19);
    i0.ɵɵconditionalCreate(1, PSCatalogComponent_Conditional_17_For_2_Conditional_1_Template, 3, 0, "div", 20);
    i0.ɵɵelementStart(2, "div", 21)(3, "div", 22);
    i0.ɵɵelement(4, "i");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "div", 23)(6, "div", 24);
    i0.ɵɵtext(7);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(8, "div", 25);
    i0.ɵɵtext(9);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(10, "div", 26);
    i0.ɵɵconditionalCreate(11, PSCatalogComponent_Conditional_17_For_2_Conditional_11_Template, 2, 1, "div", 5);
    i0.ɵɵelementStart(12, "div", 27);
    i0.ɵɵtext(13, "Problem types");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(14, "div", 28);
    i0.ɵɵrepeaterCreate(15, PSCatalogComponent_Conditional_17_For_2_For_16_Template, 2, 1, "span", 29, i0.ɵɵrepeaterTrackByIdentity);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(17, "div", 28);
    i0.ɵɵconditionalCreate(18, PSCatalogComponent_Conditional_17_For_2_Conditional_18_Template, 3, 0, "span", 30)(19, PSCatalogComponent_Conditional_17_For_2_Conditional_19_Template, 3, 0, "span", 31);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(20, "div", 32);
    i0.ɵɵconditionalCreate(21, PSCatalogComponent_Conditional_17_For_2_Conditional_21_Template, 2, 3, "span", 33);
    i0.ɵɵelement(22, "span", 34);
    i0.ɵɵelementStart(23, "button", 35);
    i0.ɵɵlistener("click", function PSCatalogComponent_Conditional_17_For_2_Template_button_click_23_listener() { const card_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleDetail(card_r6.algo.ID)); });
    i0.ɵɵelement(24, "i", 36);
    i0.ɵɵtext(25, " Details ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(26, "button", 37);
    i0.ɵɵlistener("click", function PSCatalogComponent_Conditional_17_For_2_Template_button_click_26_listener() { const card_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.useAlgorithm(card_r6.algo)); });
    i0.ɵɵelement(27, "i", 38);
    i0.ɵɵtext(28, " Use ");
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(29, PSCatalogComponent_Conditional_17_For_2_Conditional_29_Template, 18, 4, "div", 39);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const card_r6 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵclassProp("hit", card_r6.bestLevel === "Primary")("dim", card_r6.bestLevel && ctx_r2.rank(card_r6.bestLevel) <= 1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(card_r6.bestLevel === "Primary" ? 1 : -1);
    i0.ɵɵadvance(3);
    i0.ɵɵclassMap(card_r6.icon);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(card_r6.algo.Name);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(card_r6.algo.DriverClass);
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(card_r6.algo.Description ? 11 : -1);
    i0.ɵɵadvance(4);
    i0.ɵɵrepeater(card_r6.problemTypes);
    i0.ɵɵadvance(3);
    i0.ɵɵconditional(card_r6.algo.SupportsFeatureImportance ? 18 : 19);
    i0.ɵɵadvance(3);
    i0.ɵɵconditional(card_r6.bestLevel ? 21 : -1);
    i0.ɵɵadvance(2);
    i0.ɵɵclassProp("on", ctx_r2.detailId === card_r6.algo.ID);
    i0.ɵɵadvance(6);
    i0.ɵɵconditional(ctx_r2.detailId === card_r6.algo.ID ? 29 : -1);
} }
function PSCatalogComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 12);
    i0.ɵɵrepeaterCreate(1, PSCatalogComponent_Conditional_17_For_2_Template, 30, 15, "div", 18, _forTrack1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵrepeater(ctx_r2.cards);
} }
const ALGO_ICONS = {
    xgboost: 'fa-solid fa-bolt',
    lightgbm: 'fa-solid fa-feather',
    logistic_regression: 'fa-solid fa-wave-square',
    random_forest: 'fa-solid fa-tree',
    ridge: 'fa-solid fa-ruler',
    linear_regression: 'fa-solid fa-ruler',
    mlp: 'fa-solid fa-network-wired',
};
const USE_CASE_ICONS = {
    binary: 'fa-solid fa-circle-half-stroke',
    regression: 'fa-solid fa-arrow-trend-up',
    interpret: 'fa-solid fa-magnifying-glass-chart',
    tuning: 'fa-solid fa-sliders',
    large: 'fa-solid fa-gauge-high',
    embedding: 'fa-solid fa-vector-square',
    small: 'fa-solid fa-compress',
};
/**
 * Algorithm Catalog panel (mockup algorithms-2): a card gallery of the fixed algorithm catalog plus
 * a "Guide me" scenario picker. Selecting use-case chips highlights and re-sorts the algorithm cards
 * by each algorithm's best RecommendationLevel across the chosen scenarios — driven entirely by the
 * cached MJ: ML Algorithm Use Case Rankings matrix.
 */
export class PSCatalogComponent {
    engine;
    /** Emitted with a starter prompt to open + seed the Model Development Agent chat. */
    askAgent = new EventEmitter();
    selectedUseCaseIds = [];
    cards = [];
    /** The algorithm whose inline detail panel is expanded (null = none). */
    detailId = null;
    ngOnInit() {
        this.rebuildCards();
    }
    get useCases() {
        return this.engine?.UseCases ?? [];
    }
    useCaseIcon(uc) {
        const name = (uc.Name || '').toLowerCase();
        if (name.includes('binary'))
            return USE_CASE_ICONS['binary'];
        if (name.includes('regression'))
            return USE_CASE_ICONS['regression'];
        if (name.includes('interpret'))
            return USE_CASE_ICONS['interpret'];
        if (name.includes('tuning') || name.includes('minimal'))
            return USE_CASE_ICONS['tuning'];
        if (name.includes('large') || name.includes('wide') || name.includes('speed'))
            return USE_CASE_ICONS['large'];
        if (name.includes('embedding') || name.includes('llm'))
            return USE_CASE_ICONS['embedding'];
        if (name.includes('small'))
            return USE_CASE_ICONS['small'];
        return 'fa-solid fa-circle-dot';
    }
    isSelected(id) {
        return this.selectedUseCaseIds.some((s) => UUIDsEqual(s, id));
    }
    toggleUseCase(id) {
        if (this.isSelected(id)) {
            this.selectedUseCaseIds = this.selectedUseCaseIds.filter((s) => !UUIDsEqual(s, id));
        }
        else {
            this.selectedUseCaseIds = [...this.selectedUseCaseIds, id];
        }
        this.rebuildCards();
    }
    clearScenarios() {
        this.selectedUseCaseIds = [];
        this.rebuildCards();
    }
    // ---- algorithm card actions ----
    /** Toggle the inline detail panel for an algorithm card. */
    toggleDetail(id) {
        this.detailId = this.detailId === id ? null : id;
    }
    /** Seed the Model Development Agent to build a model with the chosen algorithm. */
    useAlgorithm(algo) {
        this.askAgent.emit(`Help me build a predictive model using the ${algo.Name} algorithm. ` +
            `Walk me through choosing the entity, the outcome to predict, and the features to assemble.`);
    }
    /** Parse an algorithm's `DefaultHyperparameters` JSON into a small key/value list (≤8 rows). */
    hyperparams(algo) {
        const raw = algo.DefaultHyperparameters;
        if (!raw) {
            return [];
        }
        try {
            const parsed = JSON.parse(raw);
            if (!parsed || typeof parsed !== 'object') {
                return [];
            }
            return Object.entries(parsed)
                .map(([k, v]) => ({ k, v: String(v) }))
                .slice(0, 8);
        }
        catch {
            return [];
        }
    }
    rank(level) {
        return RECOMMENDATION_RANK[level];
    }
    levelLabel(level) {
        switch (level) {
            case 'Primary': return 'Primary fit';
            case 'Strong': return 'Strong fit';
            case 'Viable': return 'Viable';
            case 'Weak': return 'Weak fit';
            case 'NotRecommended': return 'N/A';
        }
    }
    /**
     * Structured recommendation data for the "Guide me" banner — rendered with plain template
     * interpolation + `<strong>` markup (no `[innerHTML]`). `scenarioLabel` is the human-readable
     * scenario name(s); `primaries` is the list of Primary-fit algorithm names.
     */
    get recommendation() {
        const levels = this.engine.BestLevelsForScenarios(this.selectedUseCaseIds);
        const primaries = this.engine.Algorithms.filter((a) => levels.get(a.ID) === 'Primary').map((a) => a.Name);
        const scenarioLabel = this.selectedUseCaseIds.length === 1
            ? this.useCases.find((u) => UUIDsEqual(u.ID, this.selectedUseCaseIds[0]))?.Name ?? 'your scenario'
            : `${this.selectedUseCaseIds.length} scenarios`;
        return { scenarioLabel, primaries };
    }
    rebuildCards() {
        const levels = this.engine.BestLevelsForScenarios(this.selectedUseCaseIds);
        const cards = this.engine.Algorithms.map((algo) => ({
            algo,
            icon: ALGO_ICONS[algo.DriverClass] ?? 'fa-solid fa-shapes',
            problemTypes: (algo.ProblemTypes || '').split(',').map((p) => p.trim()).filter((p) => p.length > 0),
            bestLevel: levels.get(algo.ID) ?? null,
        }));
        if (this.selectedUseCaseIds.length > 0) {
            cards.sort((a, b) => {
                const ra = a.bestLevel ? RECOMMENDATION_RANK[a.bestLevel] : -1;
                const rb = b.bestLevel ? RECOMMENDATION_RANK[b.bestLevel] : -1;
                return rb - ra;
            });
        }
        this.cards = cards;
    }
    static ɵfac = function PSCatalogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PSCatalogComponent)(); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PSCatalogComponent, selectors: [["ps-catalog"]], inputs: { engine: "engine" }, outputs: { askAgent: "askAgent" }, decls: 18, vars: 3, consts: [["data-testid", "ps-catalog-panel", 1, "ps-panel", "ps-catalog"], [1, "ps-card", "guide-card"], [1, "ps-card-body"], [1, "guide-head"], [1, "fa-solid", "fa-compass", 2, "color", "var(--mj-brand-primary)"], [1, "ps-muted", "ps-small"], [1, "chips-row"], ["data-testid", "ps-catalog-scenarios", 1, "chips"], ["data-testid", "ps-catalog-scenario-chip", 1, "chip", 3, "on"], [1, "clearx"], ["data-testid", "ps-catalog-reco-banner", 1, "ps-callout", "info", "reco-banner"], [1, "ps-card"], ["data-testid", "ps-catalog-gallery", 1, "gallery"], ["data-testid", "ps-catalog-scenario-chip", 1, "chip", 3, "click"], [1, "clearx", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "fa-solid", "fa-wand-magic-sparkles"], [1, "ps-card-body", "ps-muted"], ["data-testid", "ps-catalog-card", 1, "acard", 3, "hit", "dim"], ["data-testid", "ps-catalog-card", 1, "acard"], [1, "ribbon"], [1, "ah"], [1, "ic"], [1, "title"], [1, "nm"], [1, "ps-mono", "key"], [1, "ab"], [1, "kv-title"], [1, "meta-row"], [1, "ps-tag"], [1, "ps-badge", "green"], [1, "ps-badge", "red"], [1, "af"], [1, "ps-lvl", 3, "class"], [1, "ps-spacer"], ["mjButton", "", "variant", "secondary", "size", "sm", "data-testid", "ps-catalog-details", 3, "click"], [1, "fa-solid", "fa-circle-info"], ["mjButton", "", "variant", "primary", "size", "sm", "data-testid", "ps-catalog-use", 3, "click"], [1, "fa-solid", "fa-diagram-project"], ["data-testid", "ps-catalog-detail", 1, "adetail"], [1, "ps-lvl", "ps-lvl-Primary"], [1, "fa-solid", "fa-chart-column"], [1, "fa-solid", "fa-ban"], [1, "ps-lvl"], [1, "ps-small", "adetail-desc"], [1, "dkv"], [1, "dk"], [1, "dv"], [1, "dv", "ps-mono"], [1, "ps-small", "ps-muted", 2, "margin-top", "6px"], [1, "adetail-foot"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], [1, "dk", 2, "margin-top", "8px"], [1, "hp-list"], [1, "hp"], [1, "ps-mono"], [1, "ps-mono", "ps-muted"]], template: function PSCatalogComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
            i0.ɵɵelement(4, "i", 4);
            i0.ɵɵelementStart(5, "div")(6, "h3");
            i0.ɵɵtext(7, "Guide me \u2014 what does your problem look like?");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(8, "div", 5);
            i0.ɵɵtext(9, " Tap the scenarios that describe your data and goals. We'll highlight the algorithms that fit and pull the best matches to the front. Pick one or several. ");
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(10, "div", 6)(11, "div", 7);
            i0.ɵɵrepeaterCreate(12, PSCatalogComponent_For_13_Template, 3, 5, "button", 8, _forTrack0);
            i0.ɵɵelementEnd();
            i0.ɵɵconditionalCreate(14, PSCatalogComponent_Conditional_14_Template, 3, 0, "button", 9);
            i0.ɵɵelementEnd();
            i0.ɵɵconditionalCreate(15, PSCatalogComponent_Conditional_15_Template, 4, 1, "div", 10);
            i0.ɵɵelementEnd()();
            i0.ɵɵconditionalCreate(16, PSCatalogComponent_Conditional_16_Template, 3, 0, "div", 11)(17, PSCatalogComponent_Conditional_17_Template, 3, 0, "div", 12);
            i0.ɵɵelementEnd();
        } if (rf & 2) {
            i0.ɵɵadvance(12);
            i0.ɵɵrepeater(ctx.useCases);
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(ctx.selectedUseCaseIds.length > 0 ? 14 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.selectedUseCaseIds.length > 0 ? 15 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.cards.length === 0 ? 16 : 17);
        } }, dependencies: [CommonModule, MJButtonDirective], styles: ["/* ============================================================================\n   Predictive Studio \u2014 shared panel styles (design-token compliant)\n   Maps the mockup design system onto MemberJunction semantic --mj-* tokens.\n   Loaded by every PS panel component (styleUrls) under ViewEncapsulation.None,\n   so the class names are global within the PS dashboard subtree.\n   No hardcoded colors except the intentional categorical node/algorithm palette\n   (declared once as --ps-* custom props below) which must stay distinct across\n   light/dark to remain readable as diagram accents.\n   ============================================================================ */\n\n/* Categorical accents for DAG node types + algorithm chips. These are\n   data-visualization colors that must remain distinct regardless of theme\n   (allowed exception #3 in the design-token rules). */\n.ps-panel {\n  --ps-node-source: #6b7280;\n  --ps-node-feature: #2050c8;\n  --ps-node-embedding: #7b3ff0;\n  --ps-node-target: #1f9d57;\n  --ps-node-algorithm: #d98213;\n  /* budget-gauge categorical accents (reuse the node palette so light/dark stay distinct) */\n  --ps-gauge-cost: var(--ps-node-algorithm);\n  --ps-gauge-iterations: var(--ps-node-feature);\n}\n\n.ps-panel {\n  display: block;\n  height: 100%;\n}\n\n/* ---- generic layout helpers ---- */\n.ps-row { display: flex; gap: 16px; }\n.ps-col { display: flex; flex-direction: column; gap: 16px; }\n.ps-wrap { flex-wrap: wrap; }\n.ps-spacer { flex: 1; }\n.ps-muted { color: var(--mj-text-muted); }\n.ps-small { font-size: 12.5px; }\n.ps-mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; }\n.ps-section-title {\n  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;\n  color: var(--mj-text-muted); margin: 4px 0 2px; font-weight: 700;\n}\n\n/* ---- cards ---- */\n.ps-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  box-shadow: var(--mj-shadow-sm);\n  overflow: hidden;\n}\n.ps-card-head {\n  display: flex; align-items: center; gap: 10px;\n  padding: 14px 16px; border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-card-head h3 { font-size: 14.5px; margin: 0; font-weight: 650; color: var(--mj-text-primary); }\n.ps-card-body { padding: 16px; }\n\n/* ---- KPI tiles ---- */\n.ps-kpi {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: 10px; padding: 16px 18px; box-shadow: var(--mj-shadow-sm);\n}\n.ps-kpi .label { font-size: 12px; color: var(--mj-text-muted); font-weight: 600; }\n.ps-kpi .val { font-size: 26px; font-weight: 720; letter-spacing: -.02em; margin-top: 2px; color: var(--mj-text-primary); }\n\n/* ---- badges ---- */\n.ps-badge {\n  display: inline-flex; align-items: center; gap: 5px;\n  padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; line-height: 1.7;\n}\n.ps-badge.gray { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n.ps-badge.blue { background: var(--mj-status-info-bg); color: var(--mj-status-info-text); }\n.ps-badge.green { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n.ps-badge.amber { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-badge.red { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }\n\n/* recommendation-level chips (the ranking matrix payoff) */\n.ps-lvl {\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: 92px; padding: 4px 10px; border-radius: 7px;\n  font-weight: 650; font-size: 11.5px; color: var(--mj-text-inverse);\n}\n.ps-lvl-Primary { background: var(--mj-status-success); }\n.ps-lvl-Strong { background: var(--mj-status-info); }\n.ps-lvl-Viable { background: var(--mj-status-warning); }\n.ps-lvl-Weak { background: var(--mj-text-disabled); }\n.ps-lvl-NotRecommended { background: var(--mj-bg-surface-sunken); color: var(--mj-text-muted); }\n\n/* ---- tags ---- */\n.ps-tag {\n  display: inline-block; padding: 2px 8px; border-radius: 6px;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary);\n  font-size: 11.5px; font-weight: 600;\n}\n.ps-tag.muted { opacity: .6; }\n.ps-divider { height: 1px; background: var(--mj-border-subtle); margin: 8px 0; }\n\n/* ---- tables ---- */\n.ps-table { width: 100%; border-collapse: collapse; font-size: 13px; }\n.ps-table th {\n  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; padding: 9px 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.ps-table td { padding: 11px 12px; border-bottom: 1px solid var(--mj-border-subtle); color: var(--mj-text-primary); }\n.ps-table tr:hover td { background: var(--mj-bg-surface-hover); }\n.ps-table .num { text-align: right; font-variant-numeric: tabular-nums; }\n\n.ps-rank {\n  width: 22px; height: 22px; border-radius: 6px; background: var(--mj-bg-surface-sunken);\n  display: inline-grid; place-items: center; font-weight: 700; font-size: 11.5px; color: var(--mj-text-secondary);\n}\n.ps-rank.gold { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n\n/* ---- progress bars ---- */\n.ps-bar { height: 8px; border-radius: 999px; background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--mj-brand-primary); }\n.ps-bar.warn > span { background: var(--mj-status-warning); }\n.ps-bar.run > span { background: var(--mj-brand-primary); }\n\n.ps-fbar { display: grid; grid-template-columns: 150px 1fr 48px; align-items: center; gap: 10px; padding: 5px 0; }\n.ps-fbar .track { height: 14px; border-radius: 5px; background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-fbar .track > span { display: block; height: 100%; background: var(--mj-brand-primary); }\n.ps-fbar .track > span.warn { background: var(--mj-status-warning); }\n.ps-fbar .name { color: var(--mj-text-secondary); }\n\n/* gauge */\n.ps-gauge {\n  position: relative; width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;\n  background: conic-gradient(var(--ps-gauge-color, var(--mj-brand-primary)) calc(var(--ps-p, 40) * 1%), var(--mj-bg-surface-sunken) 0);\n  display: grid; place-items: center;\n}\n.ps-gauge::after { content: ''; position: absolute; inset: 9px; background: var(--mj-bg-surface); border-radius: 50%; }\n.ps-gauge .g-val { position: relative; font-weight: 720; font-size: 14px; color: var(--mj-text-primary); }\n\n/* warning / info callouts */\n.ps-callout { display: flex; gap: 11px; padding: 12px 14px; border-radius: 10px; border: 1px solid; }\n.ps-callout.warn { background: var(--mj-status-warning-bg); border-color: var(--mj-status-warning-border); color: var(--mj-status-warning-text); }\n.ps-callout.info { background: var(--mj-status-info-bg); border-color: var(--mj-status-info-border); color: var(--mj-status-info-text); }\n.ps-callout.success { background: var(--mj-status-success-bg); border-color: var(--mj-status-success-border); color: var(--mj-status-success-text); }\n.ps-callout i { font-size: 16px; margin-top: 1px; }\n\n/* lifecycle stepper */\n.ps-stepper { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.ps-step { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mj-text-muted); }\n.ps-step .pip {\n  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mj-border-strong);\n  display: grid; place-items: center; font-size: 11px;\n}\n.ps-step.done { color: var(--mj-status-success-text); }\n.ps-step.done .pip { background: var(--mj-status-success); border-color: var(--mj-status-success); color: var(--mj-text-inverse); }\n.ps-step.curr { color: var(--mj-brand-primary); }\n.ps-step.curr .pip { border-color: var(--mj-brand-primary); color: var(--mj-brand-primary); }\n.ps-step .ln { width: 26px; height: 2px; background: var(--mj-border-strong); }\n\n/* ---- DAG flow canvas ---- */\n.ps-flow {\n  position: relative;\n  background:\n    linear-gradient(var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    linear-gradient(90deg, var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default); border-radius: 10px;\n  min-height: 620px; overflow: hidden;\n}\n.ps-node {\n  position: absolute; width: 190px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong); border-left-width: 3px; border-radius: 10px;\n  box-shadow: var(--mj-shadow-sm); cursor: pointer;\n}\n.ps-node .nh {\n  display: flex; align-items: center; gap: 8px; padding: 9px 11px;\n  border-bottom: 1px solid var(--mj-border-subtle); font-weight: 650; font-size: 12.5px; color: var(--mj-text-primary);\n}\n.ps-node .nh i.tile {\n  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 12px; flex: 0 0 auto;\n}\n.ps-node .nh .ps-tag { margin-left: auto; }\n.ps-node .nb { padding: 9px 11px; font-size: 12px; color: var(--mj-text-secondary); }\n.ps-node .nb-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }\n.ps-node .nb-row .k { color: var(--mj-text-muted); }\n.ps-node.src { border-left-color: var(--ps-node-source); }\n.ps-node.src .nh i.tile { background: var(--ps-node-source); }\n.ps-node.feat { border-left-color: var(--ps-node-feature); }\n.ps-node.feat .nh i.tile { background: var(--ps-node-feature); }\n.ps-node.emb { border-left-color: var(--ps-node-embedding); }\n.ps-node.emb .nh i.tile { background: var(--ps-node-embedding); }\n.ps-node.target { border-left-color: var(--ps-node-target); }\n.ps-node.target .nh i.tile { background: var(--ps-node-target); }\n.ps-node.algo { border-left-color: var(--ps-node-algorithm); }\n.ps-node.algo .nh i.tile { background: var(--ps-node-algorithm); }\n.ps-node.output { border-left-color: var(--mj-status-success); }\n.ps-node.output .nh i.tile { background: var(--mj-status-success); }\n.ps-node.selected {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n.ps-node .port {\n  position: absolute; width: 11px; height: 11px; border-radius: 50%;\n  background: var(--mj-bg-surface); border: 2px solid var(--mj-brand-primary);\n  top: 50%; transform: translateY(-50%);\n}\n.ps-node .port.in { left: -6px; }\n.ps-node .port.out { right: -6px; }\nsvg.ps-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }\nsvg.ps-edges path { stroke: color-mix(in srgb, var(--mj-brand-primary) 45%, transparent); stroke-width: 2; fill: none; }\n\n/* palette chips */\n.ps-pchip {\n  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px;\n  border: 1px dashed var(--mj-border-strong); background: var(--mj-bg-surface);\n  font-size: 12.5px; font-weight: 600; color: var(--mj-text-secondary); cursor: grab;\n}\n.ps-pchip i { font-size: 12px; color: var(--mj-text-inverse); width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; }\n.ps-pchip.s i { background: var(--ps-node-source); }\n.ps-pchip.f i { background: var(--ps-node-feature); }\n.ps-pchip.e i { background: var(--ps-node-embedding); }\n.ps-pchip.t i { background: var(--ps-node-target); }\n.ps-pchip.a i { background: var(--ps-node-algorithm); }\n\n/* segmented control */\n.ps-seg { display: inline-flex; border: 1px solid var(--mj-border-default); border-radius: 8px; overflow: hidden; }\n.ps-seg button {\n  border: none; background: var(--mj-bg-surface); color: var(--mj-text-secondary);\n  padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;\n  border-right: 1px solid var(--mj-border-default);\n}\n.ps-seg button:last-child { border-right: none; }\n.ps-seg button.on { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n\n/* field control */\n.ps-field { margin-bottom: 14px; }\n.ps-field > label {\n  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; margin-bottom: 6px;\n}\n.ps-input {\n  width: 100%; padding: 8px 10px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 13px; background: var(--mj-bg-surface); color: var(--mj-text-primary);\n  box-sizing: border-box;\n}\n.ps-input:focus { outline: none; border-color: var(--mj-brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); }\n\n/* loading container */\n.ps-loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; }\n\n/* ---- empty / prompt states ---- */\n.ps-empty {\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\n  text-align: center; gap: 10px; padding: 56px 24px; color: var(--mj-text-muted);\n}\n.ps-empty .ps-empty-ico {\n  width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-disabled); font-size: 24px;\n}\n.ps-empty h3 { margin: 4px 0 0; font-size: 16px; font-weight: 650; color: var(--mj-text-secondary); }\n.ps-empty p { margin: 0; max-width: 420px; font-size: 13px; line-height: 1.5; }\n\n/* ---- confirm modal ---- */\n.ps-modal-backdrop {\n  position: fixed; inset: 0; z-index: 1000;\n  background: var(--mj-bg-overlay);\n  display: flex; align-items: center; justify-content: center; padding: 24px;\n}\n.ps-modal {\n  width: 100%; max-width: 480px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default); border-radius: 14px;\n  box-shadow: var(--mj-shadow-lg, var(--mj-shadow-sm)); overflow: hidden;\n}\n.ps-modal-head {\n  display: flex; align-items: center; gap: 12px; padding: 18px 20px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-modal-head .ico {\n  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;\n  font-size: 16px; flex: 0 0 auto;\n  background: var(--mj-status-info-bg); color: var(--mj-status-info-text);\n}\n.ps-modal-head.warn .ico { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-modal-head.danger .ico { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-modal-head h3 { margin: 0; font-size: 15.5px; font-weight: 650; color: var(--mj-text-primary); }\n.ps-modal-body { padding: 18px 20px; font-size: 13.5px; line-height: 1.55; color: var(--mj-text-secondary); }\n.ps-modal-body .ps-field { margin-top: 14px; margin-bottom: 0; }\n.ps-modal-foot {\n  display: flex; align-items: center; gap: 10px; padding: 14px 20px;\n  border-top: 1px solid var(--mj-border-subtle); background: var(--mj-bg-surface-card);\n}\n.ps-modal-foot .ps-spacer { flex: 1; }\n", ".ps-catalog { display: flex; flex-direction: column; gap: 16px; }\n\n.ps-catalog .guide-card .guide-head { display: flex; gap: 12px; align-items: flex-start; }\n.ps-catalog .guide-head i { font-size: 18px; margin-top: 2px; }\n.ps-catalog .guide-head h3 { font-size: 14.5px; color: var(--mj-text-primary); margin-bottom: 4px; }\n.ps-catalog .guide-head .ps-muted { max-width: 560px; }\n\n.ps-catalog .chips-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }\n.ps-catalog .chips { display: flex; gap: 8px; flex-wrap: wrap; }\n.ps-catalog .chip {\n  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;\n  border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s;\n}\n.ps-catalog .chip:hover { background: var(--mj-bg-surface-hover); }\n.ps-catalog .chip.on { background: var(--mj-brand-primary); border-color: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n.ps-catalog .chip i { font-size: 12px; }\n.ps-catalog .clearx {\n  display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none;\n  color: var(--mj-text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer;\n}\n.ps-catalog .clearx:hover { color: var(--mj-status-error-text); }\n.ps-catalog .reco-banner { margin-top: 14px; }\n\n/* gallery */\n.ps-catalog .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }\n.ps-catalog .acard {\n  position: relative; display: flex; flex-direction: column;\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: 10px; box-shadow: var(--mj-shadow-sm); overflow: hidden; transition: opacity .15s, box-shadow .15s, border-color .15s;\n}\n.ps-catalog .acard.hit { border-color: var(--mj-brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 14%, transparent); }\n.ps-catalog .acard.dim { opacity: .46; }\n.ps-catalog .ribbon { position: absolute; top: 12px; right: 12px; z-index: 1; }\n\n.ps-catalog .ah { display: flex; align-items: center; gap: 12px; padding: 16px 16px 0; }\n.ps-catalog .ah .ic {\n  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; flex: 0 0 auto;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface)); color: var(--mj-brand-primary);\n}\n.ps-catalog .ah .nm { font-size: 15.5px; font-weight: 650; color: var(--mj-text-primary); }\n.ps-catalog .ah .key { color: var(--mj-text-muted); }\n\n.ps-catalog .ab { padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; flex: 1; }\n.ps-catalog .kv-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--mj-text-muted); font-weight: 700; }\n.ps-catalog .meta-row { display: flex; flex-wrap: wrap; gap: 6px; }\n\n.ps-catalog .af {\n  display: flex; align-items: center; gap: 8px; padding: 12px 16px;\n  border-top: 1px solid var(--mj-border-subtle); background: var(--mj-bg-surface-card);\n}\n\n/* Inline algorithm detail panel (toggled by the Details button) */\n.ps-catalog .adetail {\n  padding: 14px 16px; border-top: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface-sunken); display: flex; flex-direction: column; gap: 8px;\n}\n.ps-catalog .adetail-desc { margin: 0; line-height: 1.45; color: var(--mj-text-secondary); }\n.ps-catalog .dkv { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }\n.ps-catalog .dk { color: var(--mj-text-muted); font-weight: 650; }\n.ps-catalog .dv { color: var(--mj-text-primary); text-align: right; }\n.ps-catalog .hp-list { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }\n.ps-catalog .hp { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }\n.ps-catalog .adetail-foot { display: flex; justify-content: flex-start; margin-top: 6px; }\n"], encapsulation: 2 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PSCatalogComponent, [{
        type: Component,
        args: [{ standalone: true, selector: 'ps-catalog', imports: [CommonModule, MJButtonDirective], encapsulation: ViewEncapsulation.None, template: `
    <div class="ps-panel ps-catalog" data-testid="ps-catalog-panel">
      <!-- Guide me scenario picker -->
      <div class="ps-card guide-card">
        <div class="ps-card-body">
          <div class="guide-head">
            <i class="fa-solid fa-compass" style="color: var(--mj-brand-primary)"></i>
            <div>
              <h3>Guide me — what does your problem look like?</h3>
              <div class="ps-muted ps-small">
                Tap the scenarios that describe your data and goals. We'll highlight the algorithms that fit
                and pull the best matches to the front. Pick one or several.
              </div>
            </div>
          </div>
          <div class="chips-row">
            <div class="chips" data-testid="ps-catalog-scenarios">
              @for (uc of useCases; track uc.ID) {
                <button class="chip" [class.on]="isSelected(uc.ID)" data-testid="ps-catalog-scenario-chip" (click)="toggleUseCase(uc.ID)">
                  <i [class]="useCaseIcon(uc)"></i> {{ uc.Name }}
                </button>
              }
            </div>
            @if (selectedUseCaseIds.length > 0) {
              <button class="clearx" (click)="clearScenarios()"><i class="fa-solid fa-xmark"></i> Clear</button>
            }
          </div>
          @if (selectedUseCaseIds.length > 0) {
            <div class="ps-callout info reco-banner" data-testid="ps-catalog-reco-banner">
              <i class="fa-solid fa-wand-magic-sparkles"></i>
              @if (recommendation.primaries.length > 0) {
                <div>For <strong>{{ recommendation.scenarioLabel }}</strong>, your top pick(s):
                  <strong>{{ recommendation.primaries.join(' & ') }}</strong>. Stronger fits are pulled to the front.</div>
              } @else {
                <div>For <strong>{{ recommendation.scenarioLabel }}</strong>, no single primary stands out —
                  review the strong fits at the top.</div>
              }
            </div>
          }
        </div>
      </div>

      <!-- Card gallery -->
      @if (cards.length === 0) {
        <div class="ps-card"><div class="ps-card-body ps-muted">No algorithms in the catalog yet.</div></div>
      } @else {
        <div class="gallery" data-testid="ps-catalog-gallery">
          @for (card of cards; track card.algo.ID) {
            <div class="acard" data-testid="ps-catalog-card"
              [class.hit]="card.bestLevel === 'Primary'"
              [class.dim]="card.bestLevel && rank(card.bestLevel) <= 1">
              @if (card.bestLevel === 'Primary') {
                <div class="ribbon"><span class="ps-lvl ps-lvl-Primary">Primary</span></div>
              }
              <div class="ah">
                <div class="ic"><i [class]="card.icon"></i></div>
                <div class="title">
                  <div class="nm">{{ card.algo.Name }}</div>
                  <div class="ps-mono key">{{ card.algo.DriverClass }}</div>
                </div>
              </div>
              <div class="ab">
                @if (card.algo.Description) {
                  <div class="ps-muted ps-small">{{ card.algo.Description }}</div>
                }
                <div class="kv-title">Problem types</div>
                <div class="meta-row">
                  @for (pt of card.problemTypes; track pt) {
                    <span class="ps-tag">{{ pt }}</span>
                  }
                </div>
                <div class="meta-row">
                  @if (card.algo.SupportsFeatureImportance) {
                    <span class="ps-badge green"><i class="fa-solid fa-chart-column"></i> Feature importance</span>
                  } @else {
                    <span class="ps-badge red"><i class="fa-solid fa-ban"></i> No importance</span>
                  }
                </div>
              </div>
              <div class="af">
                @if (card.bestLevel) {
                  <span class="ps-lvl" [class]="'ps-lvl-' + card.bestLevel">{{ levelLabel(card.bestLevel) }}</span>
                }
                <span class="ps-spacer"></span>
                <button mjButton variant="secondary" size="sm" data-testid="ps-catalog-details"
                  [class.on]="detailId === card.algo.ID" (click)="toggleDetail(card.algo.ID)">
                  <i class="fa-solid fa-circle-info"></i> Details
                </button>
                <button mjButton variant="primary" size="sm" data-testid="ps-catalog-use"
                  (click)="useAlgorithm(card.algo)">
                  <i class="fa-solid fa-diagram-project"></i> Use
                </button>
              </div>
              @if (detailId === card.algo.ID) {
                <div class="adetail" data-testid="ps-catalog-detail">
                  @if (card.algo.Description) {
                    <p class="ps-small adetail-desc">{{ card.algo.Description }}</p>
                  }
                  <div class="dkv"><span class="dk">Problem types</span><span class="dv">{{ card.problemTypes.join(', ') || '—' }}</span></div>
                  <div class="dkv"><span class="dk">Driver class</span><span class="dv ps-mono">{{ card.algo.DriverClass }}</span></div>
                  @if (hyperparams(card.algo).length > 0) {
                    <div class="dk" style="margin-top:8px">Default hyperparameters</div>
                    <div class="hp-list">
                      @for (hp of hyperparams(card.algo); track hp.k) {
                        <div class="hp"><span class="ps-mono">{{ hp.k }}</span><span class="ps-mono ps-muted">{{ hp.v }}</span></div>
                      }
                    </div>
                  } @else {
                    <div class="ps-small ps-muted" style="margin-top:6px">Sensible defaults are applied at training time.</div>
                  }
                  <div class="adetail-foot">
                    <button mjButton variant="primary" size="sm" (click)="useAlgorithm(card.algo)">
                      <i class="fa-solid fa-diagram-project"></i> Use this algorithm
                    </button>
                  </div>
                </div>
              }
            </div>
          }
        </div>
      }
    </div>
  `, styles: ["/* ============================================================================\n   Predictive Studio \u2014 shared panel styles (design-token compliant)\n   Maps the mockup design system onto MemberJunction semantic --mj-* tokens.\n   Loaded by every PS panel component (styleUrls) under ViewEncapsulation.None,\n   so the class names are global within the PS dashboard subtree.\n   No hardcoded colors except the intentional categorical node/algorithm palette\n   (declared once as --ps-* custom props below) which must stay distinct across\n   light/dark to remain readable as diagram accents.\n   ============================================================================ */\n\n/* Categorical accents for DAG node types + algorithm chips. These are\n   data-visualization colors that must remain distinct regardless of theme\n   (allowed exception #3 in the design-token rules). */\n.ps-panel {\n  --ps-node-source: #6b7280;\n  --ps-node-feature: #2050c8;\n  --ps-node-embedding: #7b3ff0;\n  --ps-node-target: #1f9d57;\n  --ps-node-algorithm: #d98213;\n  /* budget-gauge categorical accents (reuse the node palette so light/dark stay distinct) */\n  --ps-gauge-cost: var(--ps-node-algorithm);\n  --ps-gauge-iterations: var(--ps-node-feature);\n}\n\n.ps-panel {\n  display: block;\n  height: 100%;\n}\n\n/* ---- generic layout helpers ---- */\n.ps-row { display: flex; gap: 16px; }\n.ps-col { display: flex; flex-direction: column; gap: 16px; }\n.ps-wrap { flex-wrap: wrap; }\n.ps-spacer { flex: 1; }\n.ps-muted { color: var(--mj-text-muted); }\n.ps-small { font-size: 12.5px; }\n.ps-mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; }\n.ps-section-title {\n  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;\n  color: var(--mj-text-muted); margin: 4px 0 2px; font-weight: 700;\n}\n\n/* ---- cards ---- */\n.ps-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  box-shadow: var(--mj-shadow-sm);\n  overflow: hidden;\n}\n.ps-card-head {\n  display: flex; align-items: center; gap: 10px;\n  padding: 14px 16px; border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-card-head h3 { font-size: 14.5px; margin: 0; font-weight: 650; color: var(--mj-text-primary); }\n.ps-card-body { padding: 16px; }\n\n/* ---- KPI tiles ---- */\n.ps-kpi {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: 10px; padding: 16px 18px; box-shadow: var(--mj-shadow-sm);\n}\n.ps-kpi .label { font-size: 12px; color: var(--mj-text-muted); font-weight: 600; }\n.ps-kpi .val { font-size: 26px; font-weight: 720; letter-spacing: -.02em; margin-top: 2px; color: var(--mj-text-primary); }\n\n/* ---- badges ---- */\n.ps-badge {\n  display: inline-flex; align-items: center; gap: 5px;\n  padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; line-height: 1.7;\n}\n.ps-badge.gray { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n.ps-badge.blue { background: var(--mj-status-info-bg); color: var(--mj-status-info-text); }\n.ps-badge.green { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n.ps-badge.amber { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-badge.red { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }\n\n/* recommendation-level chips (the ranking matrix payoff) */\n.ps-lvl {\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: 92px; padding: 4px 10px; border-radius: 7px;\n  font-weight: 650; font-size: 11.5px; color: var(--mj-text-inverse);\n}\n.ps-lvl-Primary { background: var(--mj-status-success); }\n.ps-lvl-Strong { background: var(--mj-status-info); }\n.ps-lvl-Viable { background: var(--mj-status-warning); }\n.ps-lvl-Weak { background: var(--mj-text-disabled); }\n.ps-lvl-NotRecommended { background: var(--mj-bg-surface-sunken); color: var(--mj-text-muted); }\n\n/* ---- tags ---- */\n.ps-tag {\n  display: inline-block; padding: 2px 8px; border-radius: 6px;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary);\n  font-size: 11.5px; font-weight: 600;\n}\n.ps-tag.muted { opacity: .6; }\n.ps-divider { height: 1px; background: var(--mj-border-subtle); margin: 8px 0; }\n\n/* ---- tables ---- */\n.ps-table { width: 100%; border-collapse: collapse; font-size: 13px; }\n.ps-table th {\n  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; padding: 9px 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.ps-table td { padding: 11px 12px; border-bottom: 1px solid var(--mj-border-subtle); color: var(--mj-text-primary); }\n.ps-table tr:hover td { background: var(--mj-bg-surface-hover); }\n.ps-table .num { text-align: right; font-variant-numeric: tabular-nums; }\n\n.ps-rank {\n  width: 22px; height: 22px; border-radius: 6px; background: var(--mj-bg-surface-sunken);\n  display: inline-grid; place-items: center; font-weight: 700; font-size: 11.5px; color: var(--mj-text-secondary);\n}\n.ps-rank.gold { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n\n/* ---- progress bars ---- */\n.ps-bar { height: 8px; border-radius: 999px; background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--mj-brand-primary); }\n.ps-bar.warn > span { background: var(--mj-status-warning); }\n.ps-bar.run > span { background: var(--mj-brand-primary); }\n\n.ps-fbar { display: grid; grid-template-columns: 150px 1fr 48px; align-items: center; gap: 10px; padding: 5px 0; }\n.ps-fbar .track { height: 14px; border-radius: 5px; background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-fbar .track > span { display: block; height: 100%; background: var(--mj-brand-primary); }\n.ps-fbar .track > span.warn { background: var(--mj-status-warning); }\n.ps-fbar .name { color: var(--mj-text-secondary); }\n\n/* gauge */\n.ps-gauge {\n  position: relative; width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;\n  background: conic-gradient(var(--ps-gauge-color, var(--mj-brand-primary)) calc(var(--ps-p, 40) * 1%), var(--mj-bg-surface-sunken) 0);\n  display: grid; place-items: center;\n}\n.ps-gauge::after { content: ''; position: absolute; inset: 9px; background: var(--mj-bg-surface); border-radius: 50%; }\n.ps-gauge .g-val { position: relative; font-weight: 720; font-size: 14px; color: var(--mj-text-primary); }\n\n/* warning / info callouts */\n.ps-callout { display: flex; gap: 11px; padding: 12px 14px; border-radius: 10px; border: 1px solid; }\n.ps-callout.warn { background: var(--mj-status-warning-bg); border-color: var(--mj-status-warning-border); color: var(--mj-status-warning-text); }\n.ps-callout.info { background: var(--mj-status-info-bg); border-color: var(--mj-status-info-border); color: var(--mj-status-info-text); }\n.ps-callout.success { background: var(--mj-status-success-bg); border-color: var(--mj-status-success-border); color: var(--mj-status-success-text); }\n.ps-callout i { font-size: 16px; margin-top: 1px; }\n\n/* lifecycle stepper */\n.ps-stepper { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.ps-step { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mj-text-muted); }\n.ps-step .pip {\n  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mj-border-strong);\n  display: grid; place-items: center; font-size: 11px;\n}\n.ps-step.done { color: var(--mj-status-success-text); }\n.ps-step.done .pip { background: var(--mj-status-success); border-color: var(--mj-status-success); color: var(--mj-text-inverse); }\n.ps-step.curr { color: var(--mj-brand-primary); }\n.ps-step.curr .pip { border-color: var(--mj-brand-primary); color: var(--mj-brand-primary); }\n.ps-step .ln { width: 26px; height: 2px; background: var(--mj-border-strong); }\n\n/* ---- DAG flow canvas ---- */\n.ps-flow {\n  position: relative;\n  background:\n    linear-gradient(var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    linear-gradient(90deg, var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default); border-radius: 10px;\n  min-height: 620px; overflow: hidden;\n}\n.ps-node {\n  position: absolute; width: 190px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong); border-left-width: 3px; border-radius: 10px;\n  box-shadow: var(--mj-shadow-sm); cursor: pointer;\n}\n.ps-node .nh {\n  display: flex; align-items: center; gap: 8px; padding: 9px 11px;\n  border-bottom: 1px solid var(--mj-border-subtle); font-weight: 650; font-size: 12.5px; color: var(--mj-text-primary);\n}\n.ps-node .nh i.tile {\n  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 12px; flex: 0 0 auto;\n}\n.ps-node .nh .ps-tag { margin-left: auto; }\n.ps-node .nb { padding: 9px 11px; font-size: 12px; color: var(--mj-text-secondary); }\n.ps-node .nb-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }\n.ps-node .nb-row .k { color: var(--mj-text-muted); }\n.ps-node.src { border-left-color: var(--ps-node-source); }\n.ps-node.src .nh i.tile { background: var(--ps-node-source); }\n.ps-node.feat { border-left-color: var(--ps-node-feature); }\n.ps-node.feat .nh i.tile { background: var(--ps-node-feature); }\n.ps-node.emb { border-left-color: var(--ps-node-embedding); }\n.ps-node.emb .nh i.tile { background: var(--ps-node-embedding); }\n.ps-node.target { border-left-color: var(--ps-node-target); }\n.ps-node.target .nh i.tile { background: var(--ps-node-target); }\n.ps-node.algo { border-left-color: var(--ps-node-algorithm); }\n.ps-node.algo .nh i.tile { background: var(--ps-node-algorithm); }\n.ps-node.output { border-left-color: var(--mj-status-success); }\n.ps-node.output .nh i.tile { background: var(--mj-status-success); }\n.ps-node.selected {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n.ps-node .port {\n  position: absolute; width: 11px; height: 11px; border-radius: 50%;\n  background: var(--mj-bg-surface); border: 2px solid var(--mj-brand-primary);\n  top: 50%; transform: translateY(-50%);\n}\n.ps-node .port.in { left: -6px; }\n.ps-node .port.out { right: -6px; }\nsvg.ps-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }\nsvg.ps-edges path { stroke: color-mix(in srgb, var(--mj-brand-primary) 45%, transparent); stroke-width: 2; fill: none; }\n\n/* palette chips */\n.ps-pchip {\n  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px;\n  border: 1px dashed var(--mj-border-strong); background: var(--mj-bg-surface);\n  font-size: 12.5px; font-weight: 600; color: var(--mj-text-secondary); cursor: grab;\n}\n.ps-pchip i { font-size: 12px; color: var(--mj-text-inverse); width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; }\n.ps-pchip.s i { background: var(--ps-node-source); }\n.ps-pchip.f i { background: var(--ps-node-feature); }\n.ps-pchip.e i { background: var(--ps-node-embedding); }\n.ps-pchip.t i { background: var(--ps-node-target); }\n.ps-pchip.a i { background: var(--ps-node-algorithm); }\n\n/* segmented control */\n.ps-seg { display: inline-flex; border: 1px solid var(--mj-border-default); border-radius: 8px; overflow: hidden; }\n.ps-seg button {\n  border: none; background: var(--mj-bg-surface); color: var(--mj-text-secondary);\n  padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;\n  border-right: 1px solid var(--mj-border-default);\n}\n.ps-seg button:last-child { border-right: none; }\n.ps-seg button.on { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n\n/* field control */\n.ps-field { margin-bottom: 14px; }\n.ps-field > label {\n  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; margin-bottom: 6px;\n}\n.ps-input {\n  width: 100%; padding: 8px 10px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 13px; background: var(--mj-bg-surface); color: var(--mj-text-primary);\n  box-sizing: border-box;\n}\n.ps-input:focus { outline: none; border-color: var(--mj-brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); }\n\n/* loading container */\n.ps-loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; }\n\n/* ---- empty / prompt states ---- */\n.ps-empty {\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\n  text-align: center; gap: 10px; padding: 56px 24px; color: var(--mj-text-muted);\n}\n.ps-empty .ps-empty-ico {\n  width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-disabled); font-size: 24px;\n}\n.ps-empty h3 { margin: 4px 0 0; font-size: 16px; font-weight: 650; color: var(--mj-text-secondary); }\n.ps-empty p { margin: 0; max-width: 420px; font-size: 13px; line-height: 1.5; }\n\n/* ---- confirm modal ---- */\n.ps-modal-backdrop {\n  position: fixed; inset: 0; z-index: 1000;\n  background: var(--mj-bg-overlay);\n  display: flex; align-items: center; justify-content: center; padding: 24px;\n}\n.ps-modal {\n  width: 100%; max-width: 480px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default); border-radius: 14px;\n  box-shadow: var(--mj-shadow-lg, var(--mj-shadow-sm)); overflow: hidden;\n}\n.ps-modal-head {\n  display: flex; align-items: center; gap: 12px; padding: 18px 20px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-modal-head .ico {\n  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;\n  font-size: 16px; flex: 0 0 auto;\n  background: var(--mj-status-info-bg); color: var(--mj-status-info-text);\n}\n.ps-modal-head.warn .ico { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-modal-head.danger .ico { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-modal-head h3 { margin: 0; font-size: 15.5px; font-weight: 650; color: var(--mj-text-primary); }\n.ps-modal-body { padding: 18px 20px; font-size: 13.5px; line-height: 1.55; color: var(--mj-text-secondary); }\n.ps-modal-body .ps-field { margin-top: 14px; margin-bottom: 0; }\n.ps-modal-foot {\n  display: flex; align-items: center; gap: 10px; padding: 14px 20px;\n  border-top: 1px solid var(--mj-border-subtle); background: var(--mj-bg-surface-card);\n}\n.ps-modal-foot .ps-spacer { flex: 1; }\n", ".ps-catalog { display: flex; flex-direction: column; gap: 16px; }\n\n.ps-catalog .guide-card .guide-head { display: flex; gap: 12px; align-items: flex-start; }\n.ps-catalog .guide-head i { font-size: 18px; margin-top: 2px; }\n.ps-catalog .guide-head h3 { font-size: 14.5px; color: var(--mj-text-primary); margin-bottom: 4px; }\n.ps-catalog .guide-head .ps-muted { max-width: 560px; }\n\n.ps-catalog .chips-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }\n.ps-catalog .chips { display: flex; gap: 8px; flex-wrap: wrap; }\n.ps-catalog .chip {\n  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;\n  border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s;\n}\n.ps-catalog .chip:hover { background: var(--mj-bg-surface-hover); }\n.ps-catalog .chip.on { background: var(--mj-brand-primary); border-color: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n.ps-catalog .chip i { font-size: 12px; }\n.ps-catalog .clearx {\n  display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none;\n  color: var(--mj-text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer;\n}\n.ps-catalog .clearx:hover { color: var(--mj-status-error-text); }\n.ps-catalog .reco-banner { margin-top: 14px; }\n\n/* gallery */\n.ps-catalog .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }\n.ps-catalog .acard {\n  position: relative; display: flex; flex-direction: column;\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: 10px; box-shadow: var(--mj-shadow-sm); overflow: hidden; transition: opacity .15s, box-shadow .15s, border-color .15s;\n}\n.ps-catalog .acard.hit { border-color: var(--mj-brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 14%, transparent); }\n.ps-catalog .acard.dim { opacity: .46; }\n.ps-catalog .ribbon { position: absolute; top: 12px; right: 12px; z-index: 1; }\n\n.ps-catalog .ah { display: flex; align-items: center; gap: 12px; padding: 16px 16px 0; }\n.ps-catalog .ah .ic {\n  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; flex: 0 0 auto;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface)); color: var(--mj-brand-primary);\n}\n.ps-catalog .ah .nm { font-size: 15.5px; font-weight: 650; color: var(--mj-text-primary); }\n.ps-catalog .ah .key { color: var(--mj-text-muted); }\n\n.ps-catalog .ab { padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; flex: 1; }\n.ps-catalog .kv-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--mj-text-muted); font-weight: 700; }\n.ps-catalog .meta-row { display: flex; flex-wrap: wrap; gap: 6px; }\n\n.ps-catalog .af {\n  display: flex; align-items: center; gap: 8px; padding: 12px 16px;\n  border-top: 1px solid var(--mj-border-subtle); background: var(--mj-bg-surface-card);\n}\n\n/* Inline algorithm detail panel (toggled by the Details button) */\n.ps-catalog .adetail {\n  padding: 14px 16px; border-top: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface-sunken); display: flex; flex-direction: column; gap: 8px;\n}\n.ps-catalog .adetail-desc { margin: 0; line-height: 1.45; color: var(--mj-text-secondary); }\n.ps-catalog .dkv { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }\n.ps-catalog .dk { color: var(--mj-text-muted); font-weight: 650; }\n.ps-catalog .dv { color: var(--mj-text-primary); text-align: right; }\n.ps-catalog .hp-list { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }\n.ps-catalog .hp { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }\n.ps-catalog .adetail-foot { display: flex; justify-content: flex-start; margin-top: 6px; }\n"] }]
    }], null, { engine: [{
            type: Input
        }], askAgent: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PSCatalogComponent, { className: "PSCatalogComponent", filePath: "src/PredictiveStudio/components/ps-catalog.component.ts", lineNumber: 171 }); })();
//# sourceMappingURL=ps-catalog.component.js.map