@memberjunction/ng-dashboards 5.22.0 → 5.24.0

package/dist/ComponentStudio/components/browser/component-browser.component.js

@@ -2,29 +2,28 @@ import { Component, Output, EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "../../services/component-studio-state.service";
 import * as i2 from "@angular/common";
-import * as i3 from "@progress/kendo-angular-buttons";
-import * as i4 from "@progress/kendo-angular-inputs";
-import * as i5 from "@memberjunction/ng-shared-generic";
+import * as i3 from "@memberjunction/ng-shared-generic";
+import * as i4 from "@memberjunction/ng-ui-components";
 function ComponentBrowserComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 8)(1, "button", 21);
+    i0.ɵɵelementStart(0, "div", 9)(1, "button", 23);
     i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_11_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnImportFromArtifact()); });
-    i0.ɵɵelement(2, "i", 22);
+    i0.ɵɵelement(2, "i", 24);
     i0.ɵɵtext(3, " From Artifact ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 21);
+    i0.ɵɵelementStart(4, "button", 23);
     i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_11_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnImportFromFile()); });
-    i0.ɵɵelement(5, "i", 23);
+    i0.ɵɵelement(5, "i", 25);
     i0.ɵɵtext(6, " From File ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 21);
+    i0.ɵɵelementStart(7, "button", 23);
     i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_11_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnImportFromText()); });
-    i0.ɵɵelement(8, "i", 24);
+    i0.ɵɵelement(8, "i", 26);
     i0.ɵɵtext(9, " From Text ");
     i0.ɵɵelementEnd()();
 } }
 function ComponentBrowserComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 12);
+    i0.ɵɵelementStart(0, "span", 13);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -32,11 +31,8 @@ function ComponentBrowserComponent_Conditional_15_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.State.GetActiveFilterCount());
 } }
-function ComponentBrowserComponent_ng_template_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 25);
-} }
-function ComponentBrowserComponent_Conditional_21_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 34);
+function ComponentBrowserComponent_Conditional_22_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 35);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -44,14 +40,14 @@ function ComponentBrowserComponent_Conditional_21_Conditional_16_Template(rf, ct
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("(", ctx_r1.State.GetDeprecatedCount(), ")");
 } }
-function ComponentBrowserComponent_Conditional_21_Conditional_17_For_5_Template(rf, ctx) { if (rf & 1) {
+function ComponentBrowserComponent_Conditional_22_Conditional_17_For_5_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 39);
-    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_21_Conditional_17_For_5_Template_button_click_0_listener() { const category_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.State.ToggleCategory(category_r5.name)); });
-    i0.ɵɵelementStart(1, "span", 40);
+    i0.ɵɵelementStart(0, "button", 40);
+    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_22_Conditional_17_For_5_Template_button_click_0_listener() { const category_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.State.ToggleCategory(category_r5.name)); });
+    i0.ɵɵelementStart(1, "span", 41);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 41);
+    i0.ɵɵelementStart(3, "span", 42);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -64,37 +60,37 @@ function ComponentBrowserComponent_Conditional_21_Conditional_17_For_5_Template(
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(category_r5.count);
 } }
-function ComponentBrowserComponent_Conditional_21_Conditional_17_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 43);
+function ComponentBrowserComponent_Conditional_22_Conditional_17_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 44);
     i0.ɵɵtext(1, " Show less ");
 } }
-function ComponentBrowserComponent_Conditional_21_Conditional_17_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 44);
+function ComponentBrowserComponent_Conditional_22_Conditional_17_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 45);
     i0.ɵɵtext(1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Show ", ctx_r1.State.AvailableCategories.length - 5, " more ");
 } }
-function ComponentBrowserComponent_Conditional_21_Conditional_17_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function ComponentBrowserComponent_Conditional_22_Conditional_17_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 42);
-    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_21_Conditional_17_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.State.ToggleShowAllCategories()); });
-    i0.ɵɵconditionalCreate(1, ComponentBrowserComponent_Conditional_21_Conditional_17_Conditional_6_Conditional_1_Template, 2, 0)(2, ComponentBrowserComponent_Conditional_21_Conditional_17_Conditional_6_Conditional_2_Template, 2, 1);
+    i0.ɵɵelementStart(0, "button", 43);
+    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_22_Conditional_17_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.State.ToggleShowAllCategories()); });
+    i0.ɵɵconditionalCreate(1, ComponentBrowserComponent_Conditional_22_Conditional_17_Conditional_6_Conditional_1_Template, 2, 0)(2, ComponentBrowserComponent_Conditional_22_Conditional_17_Conditional_6_Conditional_2_Template, 2, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.State.ShowAllCategories ? 1 : 2);
 } }
-function ComponentBrowserComponent_Conditional_21_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27)(1, "label", 28);
+function ComponentBrowserComponent_Conditional_22_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28)(1, "label", 29);
     i0.ɵɵtext(2, "Categories");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 36);
-    i0.ɵɵrepeaterCreate(4, ComponentBrowserComponent_Conditional_21_Conditional_17_For_5_Template, 5, 6, "button", 37, i0.ɵɵcomponentInstance().TrackByCategoryName, true);
+    i0.ɵɵelementStart(3, "div", 37);
+    i0.ɵɵrepeaterCreate(4, ComponentBrowserComponent_Conditional_22_Conditional_17_For_5_Template, 5, 6, "button", 38, i0.ɵɵcomponentInstance().TrackByCategoryName, true);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, ComponentBrowserComponent_Conditional_21_Conditional_17_Conditional_6_Template, 3, 1, "button", 38);
+    i0.ɵɵconditionalCreate(6, ComponentBrowserComponent_Conditional_22_Conditional_17_Conditional_6_Template, 3, 1, "button", 39);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -103,36 +99,36 @@ function ComponentBrowserComponent_Conditional_21_Conditional_17_Template(rf, ct
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.State.AvailableCategories.length > 5 ? 6 : -1);
 } }
-function ComponentBrowserComponent_Conditional_21_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+function ComponentBrowserComponent_Conditional_22_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 35)(1, "button", 45);
-    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_21_Conditional_18_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.State.ClearAllFilters()); });
-    i0.ɵɵelement(2, "i", 46);
+    i0.ɵɵelementStart(0, "div", 36)(1, "button", 46);
+    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_22_Conditional_18_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.State.ClearAllFilters()); });
+    i0.ɵɵelement(2, "i", 47);
     i0.ɵɵtext(3, " Clear All Filters ");
     i0.ɵɵelementEnd()();
 } }
-function ComponentBrowserComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+function ComponentBrowserComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 17)(1, "div", 26)(2, "div", 27)(3, "label", 28);
+    i0.ɵɵelementStart(0, "div", 19)(1, "div", 27)(2, "div", 28)(3, "label", 29);
     i0.ɵɵtext(4, "Quick Filters");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 29)(6, "label", 30)(7, "input", 31);
-    i0.ɵɵlistener("change", function ComponentBrowserComponent_Conditional_21_Template_input_change_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.State.ToggleShowOnlyFavorites()); });
+    i0.ɵɵelementStart(5, "div", 30)(6, "label", 31)(7, "input", 32);
+    i0.ɵɵlistener("change", function ComponentBrowserComponent_Conditional_22_Template_input_change_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.State.ToggleShowOnlyFavorites()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(8, "i", 32);
+    i0.ɵɵelement(8, "i", 33);
     i0.ɵɵelementStart(9, "span");
     i0.ɵɵtext(10, "Favorites only");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "label", 30)(12, "input", 31);
-    i0.ɵɵlistener("change", function ComponentBrowserComponent_Conditional_21_Template_input_change_12_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.State.ToggleShowDeprecatedComponents()); });
+    i0.ɵɵelementStart(11, "label", 31)(12, "input", 32);
+    i0.ɵɵlistener("change", function ComponentBrowserComponent_Conditional_22_Template_input_change_12_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.State.ToggleShowDeprecatedComponents()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(13, "i", 33);
+    i0.ɵɵelement(13, "i", 34);
     i0.ɵɵelementStart(14, "span");
     i0.ɵɵtext(15, "Show deprecated ");
-    i0.ɵɵconditionalCreate(16, ComponentBrowserComponent_Conditional_21_Conditional_16_Template, 2, 1, "span", 34);
+    i0.ɵɵconditionalCreate(16, ComponentBrowserComponent_Conditional_22_Conditional_16_Template, 2, 1, "span", 35);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(17, ComponentBrowserComponent_Conditional_21_Conditional_17_Template, 7, 1, "div", 27);
-    i0.ɵɵconditionalCreate(18, ComponentBrowserComponent_Conditional_21_Conditional_18_Template, 4, 0, "div", 35);
+    i0.ɵɵconditionalCreate(17, ComponentBrowserComponent_Conditional_22_Conditional_17_Template, 7, 1, "div", 28);
+    i0.ɵɵconditionalCreate(18, ComponentBrowserComponent_Conditional_22_Conditional_18_Template, 4, 0, "div", 36);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -147,41 +143,41 @@ function ComponentBrowserComponent_Conditional_21_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.State.GetActiveFilterCount() > 0 ? 18 : -1);
 } }
-function ComponentBrowserComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵelement(1, "mj-loading", 47);
+function ComponentBrowserComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵelement(1, "mj-loading", 48);
     i0.ɵɵelementEnd();
 } }
-function ComponentBrowserComponent_Conditional_24_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 48);
-    i0.ɵɵelementStart(1, "p", 49);
+function ComponentBrowserComponent_Conditional_25_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 49);
+    i0.ɵɵelementStart(1, "p", 50);
     i0.ɵɵtext(2, "No components found");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 50);
+    i0.ɵɵelementStart(3, "p", 51);
     i0.ɵɵtext(4, "Create a new component or import one to get started.");
     i0.ɵɵelementEnd();
 } }
-function ComponentBrowserComponent_Conditional_24_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 51);
-    i0.ɵɵelementStart(1, "p", 49);
+function ComponentBrowserComponent_Conditional_25_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 52);
+    i0.ɵɵelementStart(1, "p", 50);
     i0.ɵɵtext(2, "No matching components");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 50);
+    i0.ɵɵelementStart(3, "p", 51);
     i0.ɵɵtext(4, "Try adjusting your search or filters.");
     i0.ɵɵelementEnd();
 } }
-function ComponentBrowserComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20);
-    i0.ɵɵconditionalCreate(1, ComponentBrowserComponent_Conditional_24_Conditional_1_Template, 5, 0)(2, ComponentBrowserComponent_Conditional_24_Conditional_2_Template, 5, 0);
+function ComponentBrowserComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵconditionalCreate(1, ComponentBrowserComponent_Conditional_25_Conditional_1_Template, 5, 0)(2, ComponentBrowserComponent_Conditional_25_Conditional_2_Template, 5, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.State.AllComponents.length === 0 ? 1 : 2);
 } }
-function ComponentBrowserComponent_Conditional_25_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 60);
-    i0.ɵɵelement(1, "i", 56);
+function ComponentBrowserComponent_Conditional_26_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 61);
+    i0.ɵɵelement(1, "i", 57);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -193,17 +189,17 @@ function ComponentBrowserComponent_Conditional_25_For_1_Conditional_8_Template(r
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.GetFileBadgeLabel(component_r9), " ");
 } }
-function ComponentBrowserComponent_Conditional_25_For_1_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 72);
-} }
-function ComponentBrowserComponent_Conditional_25_For_1_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function ComponentBrowserComponent_Conditional_26_For_1_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 73);
 } }
-function ComponentBrowserComponent_Conditional_25_For_1_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+function ComponentBrowserComponent_Conditional_26_For_1_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 74);
+} }
+function ComponentBrowserComponent_Conditional_26_For_1_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 71);
-    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_25_For_1_Conditional_18_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const component_r9 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnToggleFavorite(component_r9, $event)); });
-    i0.ɵɵconditionalCreate(1, ComponentBrowserComponent_Conditional_25_For_1_Conditional_18_Conditional_1_Template, 1, 0, "i", 72)(2, ComponentBrowserComponent_Conditional_25_For_1_Conditional_18_Conditional_2_Template, 1, 0, "i", 73);
+    i0.ɵɵelementStart(0, "button", 72);
+    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_26_For_1_Conditional_18_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const component_r9 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnToggleFavorite(component_r9, $event)); });
+    i0.ɵɵconditionalCreate(1, ComponentBrowserComponent_Conditional_26_For_1_Conditional_18_Conditional_1_Template, 1, 0, "i", 73)(2, ComponentBrowserComponent_Conditional_26_For_1_Conditional_18_Conditional_2_Template, 1, 0, "i", 74);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const component_r9 = i0.ɵɵnextContext().$implicit;
@@ -213,21 +209,21 @@ function ComponentBrowserComponent_Conditional_25_For_1_Conditional_18_Template(
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.State.IsFavorite(component_r9) ? 1 : 2);
 } }
-function ComponentBrowserComponent_Conditional_25_For_1_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+function ComponentBrowserComponent_Conditional_26_For_1_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 74);
-    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_25_For_1_Conditional_19_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r11); const component_r9 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRemoveFileComponent(component_r9, $event)); });
-    i0.ɵɵelement(1, "i", 46);
+    i0.ɵɵelementStart(0, "button", 75);
+    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_26_For_1_Conditional_19_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r11); const component_r9 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRemoveFileComponent(component_r9, $event)); });
+    i0.ɵɵelement(1, "i", 47);
     i0.ɵɵelementEnd();
 } }
-function ComponentBrowserComponent_Conditional_25_For_1_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 43);
-} }
-function ComponentBrowserComponent_Conditional_25_For_1_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+function ComponentBrowserComponent_Conditional_26_For_1_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 44);
 } }
-function ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75)(1, "p");
+function ComponentBrowserComponent_Conditional_26_For_1_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 45);
+} }
+function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 76)(1, "p");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -236,11 +232,11 @@ function ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Condition
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.State.GetComponentDescription(component_r9));
 } }
-function ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 77)(1, "span", 78);
+function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78)(1, "span", 79);
     i0.ɵɵtext(2, "Loaded");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 79);
+    i0.ɵɵelementStart(3, "span", 80);
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "date");
     i0.ɵɵelementEnd()();
@@ -250,11 +246,11 @@ function ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Condition
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r1.State.GetComponentLoadedAt(component_r9), "short"));
 } }
-function ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 77)(1, "span", 78);
+function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78)(1, "span", 79);
     i0.ɵɵtext(2, "Updated");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 79);
+    i0.ɵɵelementStart(3, "span", 80);
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "date");
     i0.ɵɵelementEnd()();
@@ -264,61 +260,55 @@ function ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Condition
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r1.State.GetComponentUpdatedAt(component_r9), "short"));
 } }
-function ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 3);
-    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_21_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnStopComponent($event)); });
-    i0.ɵɵelement(1, "i", 83);
+    i0.ɵɵelementStart(0, "button", 85);
+    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_21_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnStopComponent($event)); });
+    i0.ɵɵelement(1, "i", 86);
     i0.ɵɵtext(2, " Stop ");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("themeColor", "error");
 } }
-function ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 84);
-    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_22_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const component_r9 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnSwitchComponent(component_r9, $event)); });
-    i0.ɵɵelement(1, "i", 85);
+    i0.ɵɵelementStart(0, "button", 87);
+    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_22_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const component_r9 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnSwitchComponent(component_r9, $event)); });
+    i0.ɵɵelement(1, "i", 88);
     i0.ɵɵtext(2, " Switch To This ");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("themeColor", "base");
 } }
-function ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 3);
-    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_23_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r14); const component_r9 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRunComponent(component_r9, $event)); });
-    i0.ɵɵelement(1, "i", 86);
+    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_23_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r14); const component_r9 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRunComponent(component_r9, $event)); });
+    i0.ɵɵelement(1, "i", 89);
     i0.ɵɵtext(2, " Run ");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("themeColor", "primary");
 } }
-function ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 70);
-    i0.ɵɵconditionalCreate(1, ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_1_Template, 3, 1, "div", 75);
-    i0.ɵɵelementStart(2, "div", 76)(3, "div", 77)(4, "span", 78);
+function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 71);
+    i0.ɵɵconditionalCreate(1, ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_1_Template, 3, 1, "div", 76);
+    i0.ɵɵelementStart(2, "div", 77)(3, "div", 78)(4, "span", 79);
     i0.ɵɵtext(5, "Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 79);
+    i0.ɵɵelementStart(6, "span", 80);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 77)(9, "span", 78);
+    i0.ɵɵelementStart(8, "div", 78)(9, "span", 79);
     i0.ɵɵtext(10, "Version");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 79);
+    i0.ɵɵelementStart(11, "span", 80);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 77)(14, "span", 78);
+    i0.ɵɵelementStart(13, "div", 78)(14, "span", 79);
     i0.ɵɵtext(15, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "span", 79);
+    i0.ɵɵelementStart(16, "span", 80);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(18, ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_18_Template, 6, 4, "div", 77)(19, ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_19_Template, 6, 4, "div", 77);
+    i0.ɵɵconditionalCreate(18, ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_18_Template, 6, 4, "div", 78)(19, ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_19_Template, 6, 4, "div", 78);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 80);
-    i0.ɵɵconditionalCreate(21, ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_21_Template, 3, 1, "button", 81)(22, ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_22_Template, 3, 1, "button", 82)(23, ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_23_Template, 3, 1, "button", 81);
+    i0.ɵɵelementStart(20, "div", 81);
+    i0.ɵɵconditionalCreate(21, ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_21_Template, 3, 0, "button", 82)(22, ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_22_Template, 3, 0, "button", 83)(23, ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_23_Template, 3, 0, "button", 84);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const component_r9 = i0.ɵɵnextContext().$implicit;
@@ -336,35 +326,35 @@ function ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Template(
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r1.IsComponentRunning(component_r9) ? 21 : ctx_r1.IsAnotherComponentRunning(component_r9) ? 22 : 23);
 } }
-function ComponentBrowserComponent_Conditional_25_For_1_Template(rf, ctx) { if (rf & 1) {
+function ComponentBrowserComponent_Conditional_26_For_1_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 53)(1, "div", 54);
-    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_25_For_1_Template_div_click_1_listener() { const component_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleComponentExpansion(component_r9)); });
-    i0.ɵɵelementStart(2, "div", 55);
-    i0.ɵɵelement(3, "i", 56);
+    i0.ɵɵelementStart(0, "div", 54)(1, "div", 55);
+    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_26_For_1_Template_div_click_1_listener() { const component_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleComponentExpansion(component_r9)); });
+    i0.ɵɵelementStart(2, "div", 56);
+    i0.ɵɵelement(3, "i", 57);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 57)(5, "div", 58)(6, "span", 59);
+    i0.ɵɵelementStart(4, "div", 58)(5, "div", 59)(6, "span", 60);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, ComponentBrowserComponent_Conditional_25_For_1_Conditional_8_Template, 3, 3, "span", 60);
+    i0.ɵɵconditionalCreate(8, ComponentBrowserComponent_Conditional_26_For_1_Conditional_8_Template, 3, 3, "span", 61);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 61)(10, "span", 62);
+    i0.ɵɵelementStart(9, "div", 62)(10, "span", 63);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 63);
+    i0.ɵɵelementStart(12, "span", 64);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "span", 64);
-    i0.ɵɵelement(15, "i", 65);
+    i0.ɵɵelementStart(14, "span", 65);
+    i0.ɵɵelement(15, "i", 66);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(17, "div", 66);
-    i0.ɵɵconditionalCreate(18, ComponentBrowserComponent_Conditional_25_For_1_Conditional_18_Template, 3, 4, "button", 67);
-    i0.ɵɵconditionalCreate(19, ComponentBrowserComponent_Conditional_25_For_1_Conditional_19_Template, 2, 0, "button", 68);
-    i0.ɵɵelementStart(20, "div", 69);
-    i0.ɵɵconditionalCreate(21, ComponentBrowserComponent_Conditional_25_For_1_Conditional_21_Template, 1, 0, "i", 43)(22, ComponentBrowserComponent_Conditional_25_For_1_Conditional_22_Template, 1, 0, "i", 44);
+    i0.ɵɵelementStart(17, "div", 67);
+    i0.ɵɵconditionalCreate(18, ComponentBrowserComponent_Conditional_26_For_1_Conditional_18_Template, 3, 4, "button", 68);
+    i0.ɵɵconditionalCreate(19, ComponentBrowserComponent_Conditional_26_For_1_Conditional_19_Template, 2, 0, "button", 69);
+    i0.ɵɵelementStart(20, "div", 70);
+    i0.ɵɵconditionalCreate(21, ComponentBrowserComponent_Conditional_26_For_1_Conditional_21_Template, 1, 0, "i", 44)(22, ComponentBrowserComponent_Conditional_26_For_1_Conditional_22_Template, 1, 0, "i", 45);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(23, ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Template, 24, 6, "div", 70);
+    i0.ɵɵconditionalCreate(23, ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Template, 24, 6, "div", 71);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const component_r9 = ctx.$implicit;
@@ -398,8 +388,8 @@ function ComponentBrowserComponent_Conditional_25_For_1_Template(rf, ctx) { if (
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.IsExpanded(component_r9) ? 23 : -1);
 } }
-function ComponentBrowserComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ComponentBrowserComponent_Conditional_25_For_1_Template, 24, 22, "div", 52, i0.ɵɵcomponentInstance().TrackByComponentId, true);
+function ComponentBrowserComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ComponentBrowserComponent_Conditional_26_For_1_Template, 24, 22, "div", 53, i0.ɵɵcomponentInstance().TrackByComponentId, true);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵrepeater(ctx_r1.State.FilteredComponents);
@@ -568,44 +558,41 @@ export class ComponentBrowserComponent {
         return category.name;
     }
     static ɵfac = function ComponentBrowserComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ComponentBrowserComponent)(i0.ɵɵdirectiveInject(i1.ComponentStudioStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentBrowserComponent, selectors: [["mj-component-browser"]], outputs: { NewComponent: "NewComponent", ImportFromFile: "ImportFromFile", ImportFromText: "ImportFromText", ImportFromArtifact: "ImportFromArtifact" }, standalone: false, decls: 26, vars: 15, consts: [[1, "component-browser"], [1, "browser-header"], [1, "header-top-row"], ["kendoButton", "", 3, "click", "themeColor"], [1, "fa-solid", "fa-plus"], [1, "import-dropdown"], [1, "fa-solid", "fa-file-import"], [1, "fa-solid", "fa-chevron-down", "dropdown-chevron"], [1, "dropdown-menu"], [1, "header-controls-row"], [1, "filter-toggle-btn", 3, "click", "title"], [1, "fa-solid", "fa-sliders"], [1, "filter-count-badge"], [1, "component-count"], [1, "search-box"], ["placeholder", "Search components...", 3, "valueChange", "value", "clearButton"], ["kendoTextBoxPrefixTemplate", ""], [1, "filter-panel"], [1, "component-list"], [1, "loading-state"], [1, "empty-state"], [1, "dropdown-item", 3, "click"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-file"], [1, "fa-solid", "fa-keyboard"], [1, "fa-solid", "fa-search", "search-icon"], [1, "filter-panel-content"], [1, "filter-section"], [1, "filter-section-label"], [1, "filter-options"], [1, "filter-checkbox"], ["type", "checkbox", 3, "change", "checked"], [1, "fa-solid", "fa-star", "filter-icon", "favorites-icon"], [1, "fa-solid", "fa-archive", "filter-icon", "deprecated-icon"], [1, "deprecated-count"], [1, "filter-panel-footer"], [1, "category-pills"], [1, "category-pill", 3, "active", "--pill-color"], [1, "show-more-btn"], [1, "category-pill", 3, "click"], [1, "pill-name"], [1, "pill-count"], [1, "show-more-btn", 3, "click"], [1, "fa-solid", "fa-chevron-up"], [1, "fa-solid", "fa-chevron-down"], [1, "clear-all-btn", 3, "click"], [1, "fa-solid", "fa-times"], ["text", "Loading components...", "size", "small"], [1, "fa-solid", "fa-puzzle-piece", "empty-icon"], [1, "empty-title"], [1, "empty-subtitle"], [1, "fa-solid", "fa-filter", "empty-icon"], [1, "component-card", 3, "expanded", "running", "file-loaded"], [1, "component-card"], [1, "card-header", 3, "click"], [1, "card-type-icon"], [1, "fa-solid", 3, "ngClass"], [1, "card-body"], [1, "card-title-row"], [1, "card-name"], [1, "file-badge", 3, "title"], [1, "card-meta-row"], [1, "version-badge"], [1, "status-badge", 3, "ngClass"], [1, "namespace-chip", 3, "title"], [1, "fa-solid", "fa-folder-tree"], [1, "card-end"], [1, "favorite-btn", 3, "is-favorite", "title"], ["title", "Remove imported component", 1, "remove-btn"], [1, "card-chevron"], [1, "card-details"], [1, "favorite-btn", 3, "click", "title"], [1, "fa-solid", "fa-star"], [1, "fa-regular", "fa-star"], ["title", "Remove imported component", 1, "remove-btn", 3, "click"], [1, "detail-description"], [1, "detail-info-grid"], [1, "info-item"], [1, "info-label"], [1, "info-value"], [1, "detail-actions"], ["kendoButton", "", 3, "themeColor"], ["kendoButton", "", "title", "Stop current component and run this one", 3, "themeColor"], [1, "fa-solid", "fa-stop"], ["kendoButton", "", "title", "Stop current component and run this one", 3, "click", "themeColor"], [1, "fa-solid", "fa-exchange-alt"], [1, "fa-solid", "fa-play"]], template: function ComponentBrowserComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentBrowserComponent, selectors: [["mj-component-browser"]], outputs: { NewComponent: "NewComponent", ImportFromFile: "ImportFromFile", ImportFromText: "ImportFromText", ImportFromArtifact: "ImportFromArtifact" }, standalone: false, decls: 27, vars: 12, consts: [[1, "component-browser"], [1, "browser-header"], [1, "header-top-row"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "import-dropdown"], ["mjButton", "", 3, "click"], [1, "fa-solid", "fa-file-import"], [1, "fa-solid", "fa-chevron-down", "dropdown-chevron"], [1, "dropdown-menu"], [1, "header-controls-row"], [1, "filter-toggle-btn", 3, "click", "title"], [1, "fa-solid", "fa-sliders"], [1, "filter-count-badge"], [1, "component-count"], [1, "search-box"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search components...", 1, "mj-input", 3, "input", "value"], [1, "filter-panel"], [1, "component-list"], [1, "loading-state"], [1, "empty-state"], [1, "dropdown-item", 3, "click"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-file"], [1, "fa-solid", "fa-keyboard"], [1, "filter-panel-content"], [1, "filter-section"], [1, "filter-section-label"], [1, "filter-options"], [1, "filter-checkbox"], ["type", "checkbox", 3, "change", "checked"], [1, "fa-solid", "fa-star", "filter-icon", "favorites-icon"], [1, "fa-solid", "fa-archive", "filter-icon", "deprecated-icon"], [1, "deprecated-count"], [1, "filter-panel-footer"], [1, "category-pills"], [1, "category-pill", 3, "active", "--pill-color"], [1, "show-more-btn"], [1, "category-pill", 3, "click"], [1, "pill-name"], [1, "pill-count"], [1, "show-more-btn", 3, "click"], [1, "fa-solid", "fa-chevron-up"], [1, "fa-solid", "fa-chevron-down"], [1, "clear-all-btn", 3, "click"], [1, "fa-solid", "fa-times"], ["text", "Loading components...", "size", "small"], [1, "fa-solid", "fa-puzzle-piece", "empty-icon"], [1, "empty-title"], [1, "empty-subtitle"], [1, "fa-solid", "fa-filter", "empty-icon"], [1, "component-card", 3, "expanded", "running", "file-loaded"], [1, "component-card"], [1, "card-header", 3, "click"], [1, "card-type-icon"], [1, "fa-solid", 3, "ngClass"], [1, "card-body"], [1, "card-title-row"], [1, "card-name"], [1, "file-badge", 3, "title"], [1, "card-meta-row"], [1, "version-badge"], [1, "status-badge", 3, "ngClass"], [1, "namespace-chip", 3, "title"], [1, "fa-solid", "fa-folder-tree"], [1, "card-end"], [1, "favorite-btn", 3, "is-favorite", "title"], ["title", "Remove imported component", 1, "remove-btn"], [1, "card-chevron"], [1, "card-details"], [1, "favorite-btn", 3, "click", "title"], [1, "fa-solid", "fa-star"], [1, "fa-regular", "fa-star"], ["title", "Remove imported component", 1, "remove-btn", 3, "click"], [1, "detail-description"], [1, "detail-info-grid"], [1, "info-item"], [1, "info-label"], [1, "info-value"], [1, "detail-actions"], ["mjButton", "", "variant", "danger"], ["mjButton", "", "title", "Stop current component and run this one"], ["mjButton", "", "variant", "primary"], ["mjButton", "", "variant", "danger", 3, "click"], [1, "fa-solid", "fa-stop"], ["mjButton", "", "title", "Stop current component and run this one", 3, "click"], [1, "fa-solid", "fa-exchange-alt"], [1, "fa-solid", "fa-play"]], template: function ComponentBrowserComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "button", 3);
             i0.ɵɵlistener("click", function ComponentBrowserComponent_Template_button_click_3_listener() { return ctx.OnNewComponent(); });
             i0.ɵɵelement(4, "i", 4);
             i0.ɵɵtext(5, " New Component ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "div", 5)(7, "button", 3);
+            i0.ɵɵelementStart(6, "div", 5)(7, "button", 6);
             i0.ɵɵlistener("click", function ComponentBrowserComponent_Template_button_click_7_listener() { return ctx.ToggleImportDropdown(); });
-            i0.ɵɵelement(8, "i", 6);
+            i0.ɵɵelement(8, "i", 7);
             i0.ɵɵtext(9, " Import ");
-            i0.ɵɵelement(10, "i", 7);
+            i0.ɵɵelement(10, "i", 8);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(11, ComponentBrowserComponent_Conditional_11_Template, 10, 0, "div", 8);
+            i0.ɵɵconditionalCreate(11, ComponentBrowserComponent_Conditional_11_Template, 10, 0, "div", 9);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(12, "div", 9)(13, "button", 10);
+            i0.ɵɵelementStart(12, "div", 10)(13, "button", 11);
             i0.ɵɵlistener("click", function ComponentBrowserComponent_Template_button_click_13_listener() { return ctx.State.ToggleFilterPanel(); });
-            i0.ɵɵelement(14, "i", 11);
-            i0.ɵɵconditionalCreate(15, ComponentBrowserComponent_Conditional_15_Template, 2, 1, "span", 12);
+            i0.ɵɵelement(14, "i", 12);
+            i0.ɵɵconditionalCreate(15, ComponentBrowserComponent_Conditional_15_Template, 2, 1, "span", 13);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(16, "span", 13);
+            i0.ɵɵelementStart(16, "span", 14);
             i0.ɵɵtext(17);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(18, "div", 14)(19, "kendo-textbox", 15);
-            i0.ɵɵlistener("valueChange", function ComponentBrowserComponent_Template_kendo_textbox_valueChange_19_listener($event) { return ctx.OnSearchChange($event); });
-            i0.ɵɵtemplate(20, ComponentBrowserComponent_ng_template_20_Template, 1, 0, "ng-template", 16);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(21, ComponentBrowserComponent_Conditional_21_Template, 19, 5, "div", 17);
-            i0.ɵɵelementStart(22, "div", 18);
-            i0.ɵɵconditionalCreate(23, ComponentBrowserComponent_Conditional_23_Template, 2, 0, "div", 19)(24, ComponentBrowserComponent_Conditional_24_Template, 3, 1, "div", 20)(25, ComponentBrowserComponent_Conditional_25_Template, 2, 0);
+            i0.ɵɵelementStart(18, "div", 15)(19, "div", 16);
+            i0.ɵɵelement(20, "i", 17);
+            i0.ɵɵelementStart(21, "input", 18);
+            i0.ɵɵlistener("input", function ComponentBrowserComponent_Template_input_input_21_listener($event) { return ctx.OnSearchChange($event.target.value); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵconditionalCreate(22, ComponentBrowserComponent_Conditional_22_Template, 19, 5, "div", 19);
+            i0.ɵɵelementStart(23, "div", 20);
+            i0.ɵɵconditionalCreate(24, ComponentBrowserComponent_Conditional_24_Template, 2, 0, "div", 21)(25, ComponentBrowserComponent_Conditional_25_Template, 3, 1, "div", 22)(26, ComponentBrowserComponent_Conditional_26_Template, 2, 0);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("themeColor", "primary");
-            i0.ɵɵadvance(3);
+            i0.ɵɵadvance(6);
             i0.ɵɵclassProp("open", ctx.ImportDropdownOpen);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("themeColor", "base");
-            i0.ɵɵadvance(4);
+            i0.ɵɵadvance(5);
             i0.ɵɵconditional(ctx.ImportDropdownOpen ? 11 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵclassProp("active", ctx.State.IsFilterPanelExpanded || ctx.State.GetActiveFilterCount() > 0);
@@ -614,17 +601,17 @@ export class ComponentBrowserComponent {
             i0.ɵɵconditional(ctx.State.GetActiveFilterCount() > 0 ? 15 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate2(" ", ctx.State.FilteredComponents.length, " of ", ctx.State.AllComponents.length, " ");
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("value", ctx.State.SearchQuery);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.State.IsFilterPanelExpanded ? 22 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("value", ctx.State.SearchQuery)("clearButton", true);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.State.IsFilterPanelExpanded ? 21 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.State.IsLoading ? 23 : ctx.State.FilteredComponents.length === 0 ? 24 : 25);
-        } }, dependencies: [i2.NgClass, i3.ButtonComponent, i4.TextBoxComponent, i4.TextBoxPrefixTemplateDirective, i5.LoadingComponent, i2.DatePipe], styles: ["\n\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n\n.component-browser[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n\n\n\n\n\n\n\n.browser-header[_ngcontent-%COMP%] {\n  padding: 12px 14px 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.browser-header[_ngcontent-%COMP%]   .header-top-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n\n.browser-header[_ngcontent-%COMP%]   .header-controls-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.browser-header[_ngcontent-%COMP%]   .component-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-left: auto;\n}\n\n\n\n\n\n\n\n\n.import-dropdown[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.import-dropdown[_ngcontent-%COMP%]   .dropdown-chevron[_ngcontent-%COMP%] {\n  margin-left: 4px;\n  font-size: 10px;\n}\n\n.import-dropdown[_ngcontent-%COMP%]   .dropdown-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  min-width: 180px;\n  margin-top: 4px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  box-shadow: var(--mj-shadow-md);\n  overflow: hidden;\n}\n\n.import-dropdown[_ngcontent-%COMP%]   .dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  padding: 8px 14px;\n  border: none;\n  background: none;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.15s;\n}\n\n.import-dropdown[_ngcontent-%COMP%]   .dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.import-dropdown[_ngcontent-%COMP%]   .dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n\n\n\n\n\n\n\n.filter-toggle-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 5px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.15s;\n  position: relative;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-text-secondary);\n  color: var(--mj-text-primary);\n}\n\n.filter-toggle-btn.active[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]   .filter-count-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 8px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n}\n\n\n\n\n\n\n\n\n.search-box[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  flex-shrink: 0;\n}\n\n.search-box[_ngcontent-%COMP%]   .search-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  margin-left: 6px;\n}\n\n\n\n\n\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.filter-panel[_ngcontent-%COMP%]   .filter-panel-content[_ngcontent-%COMP%] {\n  padding: 8px 14px 12px;\n}\n\n.filter-section[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.filter-section[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.filter-section[_ngcontent-%COMP%]   .filter-section-label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 6px;\n}\n\n.filter-options[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.filter-checkbox[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 6px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  transition: background 0.15s;\n}\n\n.filter-checkbox[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   .filter-icon[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   .favorites-icon[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   .deprecated-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   .deprecated-count[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n\n\n\n\n\n\n\n.category-pills[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.category-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 14px;\n  background: var(--mj-bg-surface);\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.category-pill[_ngcontent-%COMP%]   .pill-name[_ngcontent-%COMP%] {\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.category-pill[_ngcontent-%COMP%]   .pill-count[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  padding: 0 5px;\n  border-radius: 8px;\n  line-height: 16px;\n}\n\n.category-pill[_ngcontent-%COMP%]:hover {\n  border-color: var(--pill-color, var(--mj-brand-primary));\n  background: var(--mj-bg-surface);\n}\n\n.category-pill.active[_ngcontent-%COMP%] {\n  border-color: var(--pill-color, var(--mj-brand-primary));\n  background: var(--pill-color, var(--mj-brand-primary));\n  color: var(--mj-text-inverse);\n}\n\n.category-pill.active[_ngcontent-%COMP%]   .pill-count[_ngcontent-%COMP%] {\n  background: rgba(255, 255, 255, 0.25);\n  color: var(--mj-text-inverse);\n}\n\n.show-more-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-top: 6px;\n  padding: 2px 0;\n  border: none;\n  background: none;\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n.show-more-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary);\n  text-decoration: underline;\n}\n\n.filter-panel-footer[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.clear-all-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 10px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  font-size: 12px;\n  color: var(--mj-status-error);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.clear-all-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n\n\n\n\n\n\n\n.component-list[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 10px;\n}\n\n\n\n\n\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: var(--mj-border-default);\n  margin-bottom: 12px;\n}\n\n.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin: 0 0 4px;\n}\n\n.empty-state[_ngcontent-%COMP%]   .empty-subtitle[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n\n\n\n\n\n\n\n.component-card[_ngcontent-%COMP%] {\n  margin-bottom: 6px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  transition: all 0.15s;\n  overflow: hidden;\n}\n\n.component-card[_ngcontent-%COMP%]:hover {\n  box-shadow: var(--mj-shadow-sm);\n  border-color: var(--mj-border-default);\n}\n\n\n\n.component-card.running[_ngcontent-%COMP%] {\n  border-left: 3px solid var(--mj-status-success);\n}\n\n\n\n.component-card.file-loaded[_ngcontent-%COMP%] {\n  border-style: dashed;\n  border-color: var(--mj-text-muted);\n}\n\n.component-card.file-loaded[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-text-secondary);\n}\n\n\n\n.component-card.expanded[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.component-card.expanded.running[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  border-left: 3px solid var(--mj-status-success);\n}\n\n.component-card.expanded.file-loaded[_ngcontent-%COMP%] {\n  border-style: solid;\n  border-color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n\n\n.card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 10px 12px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface);\n}\n\n.card-type-icon[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  margin-top: 2px;\n}\n\n.card-body[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.card-title-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n  margin-bottom: 4px;\n}\n\n.card-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.file-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  padding: 1px 6px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 10px;\n  font-weight: 500;\n  white-space: nowrap;\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.card-meta-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.version-badge[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  padding: 1px 6px;\n  border-radius: 4px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 1px 7px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.status-badge.published[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.status-badge.draft[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.status-badge.deprecated[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.status-badge.file[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.status-badge.text[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.status-badge.artifact[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.namespace-chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  padding: 1px 7px;\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--mj-text-inverse);\n  max-width: 160px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.namespace-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 9px;\n  opacity: 0.8;\n}\n\n\n\n\n\n\n\n\n.card-end[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.favorite-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--mj-border-default);\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.favorite-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-warning);\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n}\n\n.favorite-btn.is-favorite[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.remove-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--mj-border-default);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.remove-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.card-chevron[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n}\n\n\n\n\n\n\n\n\n.card-details[_ngcontent-%COMP%] {\n  padding: 0 12px 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.detail-description[_ngcontent-%COMP%] {\n  padding: 8px 0;\n}\n\n.detail-description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n}\n\n.detail-info-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 6px 16px;\n  padding: 8px 0;\n}\n\n.detail-info-grid[_ngcontent-%COMP%]   .info-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n.detail-info-grid[_ngcontent-%COMP%]   .info-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n}\n\n.detail-info-grid[_ngcontent-%COMP%]   .info-value[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.detail-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}"] });
+            i0.ɵɵconditional(ctx.State.IsLoading ? 24 : ctx.State.FilteredComponents.length === 0 ? 25 : 26);
+        } }, dependencies: [i2.NgClass, i3.LoadingComponent, i4.MJButtonDirective, i2.DatePipe], styles: ["\n\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n\n.component-browser[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n\n\n\n\n\n\n\n.browser-header[_ngcontent-%COMP%] {\n  padding: 12px 14px 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.browser-header[_ngcontent-%COMP%]   .header-top-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n\n.browser-header[_ngcontent-%COMP%]   .header-controls-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.browser-header[_ngcontent-%COMP%]   .component-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-left: auto;\n}\n\n\n\n\n\n\n\n\n.import-dropdown[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.import-dropdown[_ngcontent-%COMP%]   .dropdown-chevron[_ngcontent-%COMP%] {\n  margin-left: 4px;\n  font-size: 10px;\n}\n\n.import-dropdown[_ngcontent-%COMP%]   .dropdown-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  min-width: 180px;\n  margin-top: 4px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  box-shadow: var(--mj-shadow-md);\n  overflow: hidden;\n}\n\n.import-dropdown[_ngcontent-%COMP%]   .dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  padding: 8px 14px;\n  border: none;\n  background: none;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.15s;\n}\n\n.import-dropdown[_ngcontent-%COMP%]   .dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.import-dropdown[_ngcontent-%COMP%]   .dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n\n\n\n\n\n\n\n.filter-toggle-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 5px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.15s;\n  position: relative;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-text-secondary);\n  color: var(--mj-text-primary);\n}\n\n.filter-toggle-btn.active[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]   .filter-count-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 8px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n}\n\n\n\n\n\n\n\n\n.search-box[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  flex-shrink: 0;\n}\n\n.search-box[_ngcontent-%COMP%]   .search-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  margin-left: 6px;\n}\n\n\n\n\n\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.filter-panel[_ngcontent-%COMP%]   .filter-panel-content[_ngcontent-%COMP%] {\n  padding: 8px 14px 12px;\n}\n\n.filter-section[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.filter-section[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.filter-section[_ngcontent-%COMP%]   .filter-section-label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 6px;\n}\n\n.filter-options[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.filter-checkbox[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 6px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  transition: background 0.15s;\n}\n\n.filter-checkbox[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   .filter-icon[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   .favorites-icon[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   .deprecated-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   .deprecated-count[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n\n\n\n\n\n\n\n.category-pills[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.category-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 14px;\n  background: var(--mj-bg-surface);\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.category-pill[_ngcontent-%COMP%]   .pill-name[_ngcontent-%COMP%] {\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.category-pill[_ngcontent-%COMP%]   .pill-count[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  padding: 0 5px;\n  border-radius: 8px;\n  line-height: 16px;\n}\n\n.category-pill[_ngcontent-%COMP%]:hover {\n  border-color: var(--pill-color, var(--mj-brand-primary));\n  background: var(--mj-bg-surface);\n}\n\n.category-pill.active[_ngcontent-%COMP%] {\n  border-color: var(--pill-color, var(--mj-brand-primary));\n  background: var(--pill-color, var(--mj-brand-primary));\n  color: var(--mj-text-inverse);\n}\n\n.category-pill.active[_ngcontent-%COMP%]   .pill-count[_ngcontent-%COMP%] {\n  background: rgba(255, 255, 255, 0.25);\n  color: var(--mj-text-inverse);\n}\n\n.show-more-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-top: 6px;\n  padding: 2px 0;\n  border: none;\n  background: none;\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n.show-more-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary);\n  text-decoration: underline;\n}\n\n.filter-panel-footer[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.clear-all-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 10px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  font-size: 12px;\n  color: var(--mj-status-error);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.clear-all-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n\n\n\n\n\n\n\n.component-list[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 10px;\n}\n\n\n\n\n\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: var(--mj-border-default);\n  margin-bottom: 12px;\n}\n\n.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin: 0 0 4px;\n}\n\n.empty-state[_ngcontent-%COMP%]   .empty-subtitle[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n\n\n\n\n\n\n\n.component-card[_ngcontent-%COMP%] {\n  margin-bottom: 6px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  transition: all 0.15s;\n  overflow: hidden;\n}\n\n.component-card[_ngcontent-%COMP%]:hover {\n  box-shadow: var(--mj-shadow-sm);\n  border-color: var(--mj-border-default);\n}\n\n\n\n.component-card.running[_ngcontent-%COMP%] {\n  border-left: 3px solid var(--mj-status-success);\n}\n\n\n\n.component-card.file-loaded[_ngcontent-%COMP%] {\n  border-style: dashed;\n  border-color: var(--mj-text-muted);\n}\n\n.component-card.file-loaded[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-text-secondary);\n}\n\n\n\n.component-card.expanded[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.component-card.expanded.running[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  border-left: 3px solid var(--mj-status-success);\n}\n\n.component-card.expanded.file-loaded[_ngcontent-%COMP%] {\n  border-style: solid;\n  border-color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n\n\n.card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 10px 12px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface);\n}\n\n.card-type-icon[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  margin-top: 2px;\n}\n\n.card-body[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.card-title-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n  margin-bottom: 4px;\n}\n\n.card-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.file-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  padding: 1px 6px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 10px;\n  font-weight: 500;\n  white-space: nowrap;\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.card-meta-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.version-badge[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  padding: 1px 6px;\n  border-radius: 4px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 1px 7px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.status-badge.published[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.status-badge.draft[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.status-badge.deprecated[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.status-badge.file[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.status-badge.text[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.status-badge.artifact[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.namespace-chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  padding: 1px 7px;\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--mj-text-inverse);\n  max-width: 160px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.namespace-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 9px;\n  opacity: 0.8;\n}\n\n\n\n\n\n\n\n\n.card-end[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.favorite-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--mj-border-default);\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.favorite-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-warning);\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n}\n\n.favorite-btn.is-favorite[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.remove-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--mj-border-default);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.remove-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.card-chevron[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n}\n\n\n\n\n\n\n\n\n.card-details[_ngcontent-%COMP%] {\n  padding: 0 12px 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.detail-description[_ngcontent-%COMP%] {\n  padding: 8px 0;\n}\n\n.detail-description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n}\n\n.detail-info-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 6px 16px;\n  padding: 8px 0;\n}\n\n.detail-info-grid[_ngcontent-%COMP%]   .info-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n.detail-info-grid[_ngcontent-%COMP%]   .info-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n}\n\n.detail-info-grid[_ngcontent-%COMP%]   .info-value[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.detail-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentBrowserComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-component-browser', template: "<div class=\"component-browser\">\n\n  <!-- Header -->\n  <div class=\"browser-header\">\n    <div class=\"header-top-row\">\n      <button kendoButton\n        [themeColor]=\"'primary'\"\n        (click)=\"OnNewComponent()\">\n        <i class=\"fa-solid fa-plus\"></i> New Component\n      </button>\n      <div class=\"import-dropdown\" [class.open]=\"ImportDropdownOpen\">\n        <button kendoButton\n          [themeColor]=\"'base'\"\n          (click)=\"ToggleImportDropdown()\">\n          <i class=\"fa-solid fa-file-import\"></i> Import\n          <i class=\"fa-solid fa-chevron-down dropdown-chevron\"></i>\n        </button>\n        @if (ImportDropdownOpen) {\n          <div class=\"dropdown-menu\">\n            <button class=\"dropdown-item\" (click)=\"OnImportFromArtifact()\">\n              <i class=\"fa-solid fa-database\"></i> From Artifact\n            </button>\n            <button class=\"dropdown-item\" (click)=\"OnImportFromFile()\">\n              <i class=\"fa-solid fa-file\"></i> From File\n            </button>\n            <button class=\"dropdown-item\" (click)=\"OnImportFromText()\">\n              <i class=\"fa-solid fa-keyboard\"></i> From Text\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"header-controls-row\">\n      <button\n        class=\"filter-toggle-btn\"\n        [class.active]=\"State.IsFilterPanelExpanded || State.GetActiveFilterCount() > 0\"\n        (click)=\"State.ToggleFilterPanel()\"\n        [title]=\"State.IsFilterPanelExpanded ? 'Hide filters' : 'Show filters'\">\n        <i class=\"fa-solid fa-sliders\"></i>\n        @if (State.GetActiveFilterCount() > 0) {\n          <span class=\"filter-count-badge\">{{ State.GetActiveFilterCount() }}</span>\n        }\n      </button>\n      <span class=\"component-count\">\n        {{ State.FilteredComponents.length }} of {{ State.AllComponents.length }}\n      </span>\n    </div>\n  </div>\n\n  <!-- Search -->\n  <div class=\"search-box\">\n    <kendo-textbox\n      [value]=\"State.SearchQuery\"\n      (valueChange)=\"OnSearchChange($event)\"\n      placeholder=\"Search components...\"\n      [clearButton]=\"true\">\n      <ng-template kendoTextBoxPrefixTemplate>\n        <i class=\"fa-solid fa-search search-icon\"></i>\n      </ng-template>\n    </kendo-textbox>\n  </div>\n\n  <!-- Collapsible Filter Panel -->\n  @if (State.IsFilterPanelExpanded) {\n    <div class=\"filter-panel\">\n      <div class=\"filter-panel-content\">\n\n        <!-- Quick Filters -->\n        <div class=\"filter-section\">\n          <label class=\"filter-section-label\">Quick Filters</label>\n          <div class=\"filter-options\">\n            <label class=\"filter-checkbox\">\n              <input type=\"checkbox\"\n                [checked]=\"State.ShowOnlyFavorites\"\n                (change)=\"State.ToggleShowOnlyFavorites()\">\n              <i class=\"fa-solid fa-star filter-icon favorites-icon\"></i>\n              <span>Favorites only</span>\n            </label>\n            <label class=\"filter-checkbox\">\n              <input type=\"checkbox\"\n                [checked]=\"State.ShowDeprecatedComponents\"\n                (change)=\"State.ToggleShowDeprecatedComponents()\">\n              <i class=\"fa-solid fa-archive filter-icon deprecated-icon\"></i>\n              <span>Show deprecated\n                @if (State.GetDeprecatedCount() > 0) {\n                  <span class=\"deprecated-count\">({{ State.GetDeprecatedCount() }})</span>\n                }\n              </span>\n            </label>\n          </div>\n        </div>\n\n        <!-- Category Pills -->\n        @if (State.AvailableCategories.length > 0) {\n          <div class=\"filter-section\">\n            <label class=\"filter-section-label\">Categories</label>\n            <div class=\"category-pills\">\n              @for (category of State.GetVisibleCategories(); track TrackByCategoryName($index, category)) {\n                <button\n                  class=\"category-pill\"\n                  [class.active]=\"State.IsCategorySelected(category.name)\"\n                  [style.--pill-color]=\"category.color\"\n                  (click)=\"State.ToggleCategory(category.name)\">\n                  <span class=\"pill-name\">{{ category.name }}</span>\n                  <span class=\"pill-count\">{{ category.count }}</span>\n                </button>\n              }\n            </div>\n            @if (State.AvailableCategories.length > 5) {\n              <button\n                class=\"show-more-btn\"\n                (click)=\"State.ToggleShowAllCategories()\">\n                @if (State.ShowAllCategories) {\n                  <i class=\"fa-solid fa-chevron-up\"></i> Show less\n                } @else {\n                  <i class=\"fa-solid fa-chevron-down\"></i> Show {{ State.AvailableCategories.length - 5 }} more\n                }\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Clear All -->\n        @if (State.GetActiveFilterCount() > 0) {\n          <div class=\"filter-panel-footer\">\n            <button class=\"clear-all-btn\" (click)=\"State.ClearAllFilters()\">\n              <i class=\"fa-solid fa-times\"></i> Clear All Filters\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Component Card List -->\n  <div class=\"component-list\">\n    @if (State.IsLoading) {\n      <div class=\"loading-state\">\n        <mj-loading text=\"Loading components...\" size=\"small\"></mj-loading>\n      </div>\n    } @else if (State.FilteredComponents.length === 0) {\n      <div class=\"empty-state\">\n        @if (State.AllComponents.length === 0) {\n          <i class=\"fa-solid fa-puzzle-piece empty-icon\"></i>\n          <p class=\"empty-title\">No components found</p>\n          <p class=\"empty-subtitle\">Create a new component or import one to get started.</p>\n        } @else {\n          <i class=\"fa-solid fa-filter empty-icon\"></i>\n          <p class=\"empty-title\">No matching components</p>\n          <p class=\"empty-subtitle\">Try adjusting your search or filters.</p>\n        }\n      </div>\n    } @else {\n      @for (component of State.FilteredComponents; track TrackByComponentId($index, component)) {\n        <div class=\"component-card\"\n          [class.expanded]=\"IsExpanded(component)\"\n          [class.running]=\"IsComponentRunning(component)\"\n          [class.file-loaded]=\"State.IsFileLoadedComponent(component)\">\n\n          <!-- Card Header (always visible) -->\n          <div class=\"card-header\" (click)=\"ToggleComponentExpansion(component)\">\n            <div class=\"card-type-icon\"\n              [style.color]=\"State.GetComponentTypeColor(State.GetComponentType(component))\">\n              <i class=\"fa-solid\"\n                [ngClass]=\"State.GetComponentTypeIcon(State.GetComponentType(component))\"></i>\n            </div>\n\n            <div class=\"card-body\">\n              <div class=\"card-title-row\">\n                <span class=\"card-name\">{{ State.GetComponentName(component) }}</span>\n                @if (State.IsFileLoadedComponent(component)) {\n                  <span class=\"file-badge\" [title]=\"GetFileBadgeTooltip(component)\">\n                    <i class=\"fa-solid\" [ngClass]=\"GetFileBadgeIcon(component)\"></i>\n                    {{ GetFileBadgeLabel(component) }}\n                  </span>\n                }\n              </div>\n              <div class=\"card-meta-row\">\n                <span class=\"version-badge\">v{{ State.GetComponentVersion(component) }}</span>\n                <span class=\"status-badge\" [ngClass]=\"GetStatusBadgeClass(component)\">\n                  {{ GetStatusLabel(component) }}\n                </span>\n                <span class=\"namespace-chip\"\n                  [style.background-color]=\"State.GetNamespaceColor(State.GetComponentNamespace(component))\"\n                  [title]=\"State.GetComponentNamespace(component) || 'Uncategorized'\">\n                  <i class=\"fa-solid fa-folder-tree\"></i>\n                  {{ State.FormatNamespace(State.GetComponentNamespace(component)) }}\n                </span>\n              </div>\n            </div>\n\n            <div class=\"card-end\">\n              @if (!State.IsFileLoadedComponent(component)) {\n                <button\n                  class=\"favorite-btn\"\n                  [class.is-favorite]=\"State.IsFavorite(component)\"\n                  (click)=\"OnToggleFavorite(component, $event)\"\n                  [title]=\"State.IsFavorite(component) ? 'Remove from favorites' : 'Add to favorites'\">\n                  @if (State.IsFavorite(component)) {\n                    <i class=\"fa-solid fa-star\"></i>\n                  } @else {\n                    <i class=\"fa-regular fa-star\"></i>\n                  }\n                </button>\n              }\n              @if (State.IsFileLoadedComponent(component)) {\n                <button\n                  class=\"remove-btn\"\n                  (click)=\"OnRemoveFileComponent($any(component), $event)\"\n                  title=\"Remove imported component\">\n                  <i class=\"fa-solid fa-times\"></i>\n                </button>\n              }\n              <div class=\"card-chevron\">\n                @if (IsExpanded(component)) {\n                  <i class=\"fa-solid fa-chevron-up\"></i>\n                } @else {\n                  <i class=\"fa-solid fa-chevron-down\"></i>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Card Details (expanded) -->\n          @if (IsExpanded(component)) {\n            <div class=\"card-details\">\n              @if (State.GetComponentDescription(component)) {\n                <div class=\"detail-description\">\n                  <p>{{ State.GetComponentDescription(component) }}</p>\n                </div>\n              }\n\n              <div class=\"detail-info-grid\">\n                <div class=\"info-item\">\n                  <span class=\"info-label\">Type</span>\n                  <span class=\"info-value\">{{ State.GetComponentType(component) || 'Unknown' }}</span>\n                </div>\n                <div class=\"info-item\">\n                  <span class=\"info-label\">Version</span>\n                  <span class=\"info-value\">{{ State.GetComponentVersion(component) }}</span>\n                </div>\n                <div class=\"info-item\">\n                  <span class=\"info-label\">Status</span>\n                  <span class=\"info-value\">{{ State.GetComponentStatus(component) || 'Draft' }}</span>\n                </div>\n                @if (State.IsFileLoadedComponent(component)) {\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Loaded</span>\n                    <span class=\"info-value\">{{ State.GetComponentLoadedAt(component) | date:'short' }}</span>\n                  </div>\n                } @else if (State.GetComponentUpdatedAt(component)) {\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Updated</span>\n                    <span class=\"info-value\">{{ State.GetComponentUpdatedAt(component) | date:'short' }}</span>\n                  </div>\n                }\n              </div>\n\n              <div class=\"detail-actions\">\n                @if (IsComponentRunning(component)) {\n                  <button kendoButton\n                    [themeColor]=\"'error'\"\n                    (click)=\"OnStopComponent($event)\">\n                    <i class=\"fa-solid fa-stop\"></i> Stop\n                  </button>\n                } @else if (IsAnotherComponentRunning(component)) {\n                  <button kendoButton\n                    [themeColor]=\"'base'\"\n                    title=\"Stop current component and run this one\"\n                    (click)=\"OnSwitchComponent(component, $event)\">\n                    <i class=\"fa-solid fa-exchange-alt\"></i> Switch To This\n                  </button>\n                } @else {\n                  <button kendoButton\n                    [themeColor]=\"'primary'\"\n                    (click)=\"OnRunComponent(component, $event)\">\n                    <i class=\"fa-solid fa-play\"></i> Run\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: ["/* ============================================================ */\n/* Component Browser - Left Panel                               */\n/* ============================================================ */\n\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n\n.component-browser {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n/* ============================================================ */\n/* Header                                                        */\n/* ============================================================ */\n\n.browser-header {\n  padding: 12px 14px 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.browser-header .header-top-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n\n.browser-header .header-controls-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.browser-header .component-count {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-left: auto;\n}\n\n/* ============================================================ */\n/* Import Dropdown                                               */\n/* ============================================================ */\n\n.import-dropdown {\n  position: relative;\n}\n\n.import-dropdown .dropdown-chevron {\n  margin-left: 4px;\n  font-size: 10px;\n}\n\n.import-dropdown .dropdown-menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  min-width: 180px;\n  margin-top: 4px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  box-shadow: var(--mj-shadow-md);\n  overflow: hidden;\n}\n\n.import-dropdown .dropdown-menu .dropdown-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  padding: 8px 14px;\n  border: none;\n  background: none;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.15s;\n}\n\n.import-dropdown .dropdown-menu .dropdown-item:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.import-dropdown .dropdown-menu .dropdown-item i {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n/* ============================================================ */\n/* Filter Toggle Button                                          */\n/* ============================================================ */\n\n.filter-toggle-btn {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 5px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.15s;\n  position: relative;\n}\n\n.filter-toggle-btn:hover {\n  border-color: var(--mj-text-secondary);\n  color: var(--mj-text-primary);\n}\n\n.filter-toggle-btn.active {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.filter-toggle-btn .filter-count-badge {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 8px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n}\n\n/* ============================================================ */\n/* Search Box                                                    */\n/* ============================================================ */\n\n.search-box {\n  padding: 8px 14px;\n  flex-shrink: 0;\n}\n\n.search-box .search-icon {\n  color: var(--mj-text-secondary);\n  margin-left: 6px;\n}\n\n/* ============================================================ */\n/* Filter Panel                                                  */\n/* ============================================================ */\n\n.filter-panel {\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.filter-panel .filter-panel-content {\n  padding: 8px 14px 12px;\n}\n\n.filter-section {\n  margin-bottom: 10px;\n}\n\n.filter-section:last-child {\n  margin-bottom: 0;\n}\n\n.filter-section .filter-section-label {\n  display: block;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 6px;\n}\n\n.filter-options {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.filter-checkbox {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 6px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  transition: background 0.15s;\n}\n\n.filter-checkbox:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.filter-checkbox input[type=\"checkbox\"] {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n.filter-checkbox .filter-icon {\n  font-size: 12px;\n}\n\n.filter-checkbox .favorites-icon {\n  color: var(--mj-status-warning);\n}\n\n.filter-checkbox .deprecated-icon {\n  color: var(--mj-text-muted);\n}\n\n.filter-checkbox .deprecated-count {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n/* ============================================================ */\n/* Category Pills                                                */\n/* ============================================================ */\n\n.category-pills {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.category-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 14px;\n  background: var(--mj-bg-surface);\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.category-pill .pill-name {\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.category-pill .pill-count {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  padding: 0 5px;\n  border-radius: 8px;\n  line-height: 16px;\n}\n\n.category-pill:hover {\n  border-color: var(--pill-color, var(--mj-brand-primary));\n  background: var(--mj-bg-surface);\n}\n\n.category-pill.active {\n  border-color: var(--pill-color, var(--mj-brand-primary));\n  background: var(--pill-color, var(--mj-brand-primary));\n  color: var(--mj-text-inverse);\n}\n\n.category-pill.active .pill-count {\n  background: rgba(255, 255, 255, 0.25);\n  color: var(--mj-text-inverse);\n}\n\n.show-more-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-top: 6px;\n  padding: 2px 0;\n  border: none;\n  background: none;\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n.show-more-btn:hover {\n  color: var(--mj-brand-primary);\n  text-decoration: underline;\n}\n\n.filter-panel-footer {\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.clear-all-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 10px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  font-size: 12px;\n  color: var(--mj-status-error);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.clear-all-btn:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n/* ============================================================ */\n/* Component List (scrollable)                                   */\n/* ============================================================ */\n\n.component-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 10px;\n}\n\n/* ============================================================ */\n/* Loading & Empty States                                        */\n/* ============================================================ */\n\n.loading-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n}\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n}\n\n.empty-state .empty-icon {\n  font-size: 32px;\n  color: var(--mj-border-default);\n  margin-bottom: 12px;\n}\n\n.empty-state .empty-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin: 0 0 4px;\n}\n\n.empty-state .empty-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n/* ============================================================ */\n/* Component Card                                                */\n/* ============================================================ */\n\n.component-card {\n  margin-bottom: 6px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  transition: all 0.15s;\n  overflow: hidden;\n}\n\n.component-card:hover {\n  box-shadow: var(--mj-shadow-sm);\n  border-color: var(--mj-border-default);\n}\n\n/* Running state: green left border */\n.component-card.running {\n  border-left: 3px solid var(--mj-status-success);\n}\n\n/* File-loaded state: dashed border */\n.component-card.file-loaded {\n  border-style: dashed;\n  border-color: var(--mj-text-muted);\n}\n\n.component-card.file-loaded:hover {\n  border-color: var(--mj-text-secondary);\n}\n\n/* Expanded state: blue border */\n.component-card.expanded {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.component-card.expanded.running {\n  border-color: var(--mj-brand-primary);\n  border-left: 3px solid var(--mj-status-success);\n}\n\n.component-card.expanded.file-loaded {\n  border-style: solid;\n  border-color: var(--mj-brand-primary);\n}\n\n/* ============================================================ */\n/* Card Header                                                   */\n/* ============================================================ */\n\n.card-header {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 10px 12px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.card-header:hover {\n  background: var(--mj-bg-surface);\n}\n\n.card-type-icon {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  margin-top: 2px;\n}\n\n.card-body {\n  flex: 1;\n  min-width: 0;\n}\n\n.card-title-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n  margin-bottom: 4px;\n}\n\n.card-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.file-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  padding: 1px 6px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 10px;\n  font-weight: 500;\n  white-space: nowrap;\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.card-meta-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.version-badge {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  padding: 1px 6px;\n  border-radius: 4px;\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 1px 7px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.status-badge.published {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.status-badge.draft {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.status-badge.deprecated {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.status-badge.file {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.status-badge.text {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.status-badge.artifact {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.namespace-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  padding: 1px 7px;\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--mj-text-inverse);\n  max-width: 160px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.namespace-chip i {\n  font-size: 9px;\n  opacity: 0.8;\n}\n\n/* ============================================================ */\n/* Card End (favorite, remove, chevron)                          */\n/* ============================================================ */\n\n.card-end {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.favorite-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--mj-border-default);\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.favorite-btn:hover {\n  color: var(--mj-status-warning);\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n}\n\n.favorite-btn.is-favorite {\n  color: var(--mj-status-warning);\n}\n\n.remove-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--mj-border-default);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.remove-btn:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.card-chevron {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n}\n\n/* ============================================================ */\n/* Card Details (expanded content)                               */\n/* ============================================================ */\n\n.card-details {\n  padding: 0 12px 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.detail-description {\n  padding: 8px 0;\n}\n\n.detail-description p {\n  margin: 0;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n}\n\n.detail-info-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 6px 16px;\n  padding: 8px 0;\n}\n\n.detail-info-grid .info-item {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n.detail-info-grid .info-label {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n}\n\n.detail-info-grid .info-value {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.detail-actions {\n  display: flex;\n  gap: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-component-browser', template: "<div class=\"component-browser\">\n\n  <!-- Header -->\n  <div class=\"browser-header\">\n    <div class=\"header-top-row\">\n      <button mjButton variant=\"primary\"\n        (click)=\"OnNewComponent()\">\n        <i class=\"fa-solid fa-plus\"></i> New Component\n      </button>\n      <div class=\"import-dropdown\" [class.open]=\"ImportDropdownOpen\">\n        <button mjButton\n          (click)=\"ToggleImportDropdown()\">\n          <i class=\"fa-solid fa-file-import\"></i> Import\n          <i class=\"fa-solid fa-chevron-down dropdown-chevron\"></i>\n        </button>\n        @if (ImportDropdownOpen) {\n          <div class=\"dropdown-menu\">\n            <button class=\"dropdown-item\" (click)=\"OnImportFromArtifact()\">\n              <i class=\"fa-solid fa-database\"></i> From Artifact\n            </button>\n            <button class=\"dropdown-item\" (click)=\"OnImportFromFile()\">\n              <i class=\"fa-solid fa-file\"></i> From File\n            </button>\n            <button class=\"dropdown-item\" (click)=\"OnImportFromText()\">\n              <i class=\"fa-solid fa-keyboard\"></i> From Text\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"header-controls-row\">\n      <button\n        class=\"filter-toggle-btn\"\n        [class.active]=\"State.IsFilterPanelExpanded || State.GetActiveFilterCount() > 0\"\n        (click)=\"State.ToggleFilterPanel()\"\n        [title]=\"State.IsFilterPanelExpanded ? 'Hide filters' : 'Show filters'\">\n        <i class=\"fa-solid fa-sliders\"></i>\n        @if (State.GetActiveFilterCount() > 0) {\n          <span class=\"filter-count-badge\">{{ State.GetActiveFilterCount() }}</span>\n        }\n      </button>\n      <span class=\"component-count\">\n        {{ State.FilteredComponents.length }} of {{ State.AllComponents.length }}\n      </span>\n    </div>\n  </div>\n\n  <!-- Search -->\n  <div class=\"search-box\">\n    <div class=\"search-input-wrapper\">\n      <i class=\"fa-solid fa-search search-icon\"></i>\n      <input\n        type=\"text\"\n        class=\"mj-input\"\n        [value]=\"State.SearchQuery\"\n        (input)=\"OnSearchChange($any($event.target).value)\"\n        placeholder=\"Search components...\">\n    </div>\n  </div>\n\n  <!-- Collapsible Filter Panel -->\n  @if (State.IsFilterPanelExpanded) {\n    <div class=\"filter-panel\">\n      <div class=\"filter-panel-content\">\n\n        <!-- Quick Filters -->\n        <div class=\"filter-section\">\n          <label class=\"filter-section-label\">Quick Filters</label>\n          <div class=\"filter-options\">\n            <label class=\"filter-checkbox\">\n              <input type=\"checkbox\"\n                [checked]=\"State.ShowOnlyFavorites\"\n                (change)=\"State.ToggleShowOnlyFavorites()\">\n              <i class=\"fa-solid fa-star filter-icon favorites-icon\"></i>\n              <span>Favorites only</span>\n            </label>\n            <label class=\"filter-checkbox\">\n              <input type=\"checkbox\"\n                [checked]=\"State.ShowDeprecatedComponents\"\n                (change)=\"State.ToggleShowDeprecatedComponents()\">\n              <i class=\"fa-solid fa-archive filter-icon deprecated-icon\"></i>\n              <span>Show deprecated\n                @if (State.GetDeprecatedCount() > 0) {\n                  <span class=\"deprecated-count\">({{ State.GetDeprecatedCount() }})</span>\n                }\n              </span>\n            </label>\n          </div>\n        </div>\n\n        <!-- Category Pills -->\n        @if (State.AvailableCategories.length > 0) {\n          <div class=\"filter-section\">\n            <label class=\"filter-section-label\">Categories</label>\n            <div class=\"category-pills\">\n              @for (category of State.GetVisibleCategories(); track TrackByCategoryName($index, category)) {\n                <button\n                  class=\"category-pill\"\n                  [class.active]=\"State.IsCategorySelected(category.name)\"\n                  [style.--pill-color]=\"category.color\"\n                  (click)=\"State.ToggleCategory(category.name)\">\n                  <span class=\"pill-name\">{{ category.name }}</span>\n                  <span class=\"pill-count\">{{ category.count }}</span>\n                </button>\n              }\n            </div>\n            @if (State.AvailableCategories.length > 5) {\n              <button\n                class=\"show-more-btn\"\n                (click)=\"State.ToggleShowAllCategories()\">\n                @if (State.ShowAllCategories) {\n                  <i class=\"fa-solid fa-chevron-up\"></i> Show less\n                } @else {\n                  <i class=\"fa-solid fa-chevron-down\"></i> Show {{ State.AvailableCategories.length - 5 }} more\n                }\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Clear All -->\n        @if (State.GetActiveFilterCount() > 0) {\n          <div class=\"filter-panel-footer\">\n            <button class=\"clear-all-btn\" (click)=\"State.ClearAllFilters()\">\n              <i class=\"fa-solid fa-times\"></i> Clear All Filters\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Component Card List -->\n  <div class=\"component-list\">\n    @if (State.IsLoading) {\n      <div class=\"loading-state\">\n        <mj-loading text=\"Loading components...\" size=\"small\"></mj-loading>\n      </div>\n    } @else if (State.FilteredComponents.length === 0) {\n      <div class=\"empty-state\">\n        @if (State.AllComponents.length === 0) {\n          <i class=\"fa-solid fa-puzzle-piece empty-icon\"></i>\n          <p class=\"empty-title\">No components found</p>\n          <p class=\"empty-subtitle\">Create a new component or import one to get started.</p>\n        } @else {\n          <i class=\"fa-solid fa-filter empty-icon\"></i>\n          <p class=\"empty-title\">No matching components</p>\n          <p class=\"empty-subtitle\">Try adjusting your search or filters.</p>\n        }\n      </div>\n    } @else {\n      @for (component of State.FilteredComponents; track TrackByComponentId($index, component)) {\n        <div class=\"component-card\"\n          [class.expanded]=\"IsExpanded(component)\"\n          [class.running]=\"IsComponentRunning(component)\"\n          [class.file-loaded]=\"State.IsFileLoadedComponent(component)\">\n\n          <!-- Card Header (always visible) -->\n          <div class=\"card-header\" (click)=\"ToggleComponentExpansion(component)\">\n            <div class=\"card-type-icon\"\n              [style.color]=\"State.GetComponentTypeColor(State.GetComponentType(component))\">\n              <i class=\"fa-solid\"\n                [ngClass]=\"State.GetComponentTypeIcon(State.GetComponentType(component))\"></i>\n            </div>\n\n            <div class=\"card-body\">\n              <div class=\"card-title-row\">\n                <span class=\"card-name\">{{ State.GetComponentName(component) }}</span>\n                @if (State.IsFileLoadedComponent(component)) {\n                  <span class=\"file-badge\" [title]=\"GetFileBadgeTooltip(component)\">\n                    <i class=\"fa-solid\" [ngClass]=\"GetFileBadgeIcon(component)\"></i>\n                    {{ GetFileBadgeLabel(component) }}\n                  </span>\n                }\n              </div>\n              <div class=\"card-meta-row\">\n                <span class=\"version-badge\">v{{ State.GetComponentVersion(component) }}</span>\n                <span class=\"status-badge\" [ngClass]=\"GetStatusBadgeClass(component)\">\n                  {{ GetStatusLabel(component) }}\n                </span>\n                <span class=\"namespace-chip\"\n                  [style.background-color]=\"State.GetNamespaceColor(State.GetComponentNamespace(component))\"\n                  [title]=\"State.GetComponentNamespace(component) || 'Uncategorized'\">\n                  <i class=\"fa-solid fa-folder-tree\"></i>\n                  {{ State.FormatNamespace(State.GetComponentNamespace(component)) }}\n                </span>\n              </div>\n            </div>\n\n            <div class=\"card-end\">\n              @if (!State.IsFileLoadedComponent(component)) {\n                <button\n                  class=\"favorite-btn\"\n                  [class.is-favorite]=\"State.IsFavorite(component)\"\n                  (click)=\"OnToggleFavorite(component, $event)\"\n                  [title]=\"State.IsFavorite(component) ? 'Remove from favorites' : 'Add to favorites'\">\n                  @if (State.IsFavorite(component)) {\n                    <i class=\"fa-solid fa-star\"></i>\n                  } @else {\n                    <i class=\"fa-regular fa-star\"></i>\n                  }\n                </button>\n              }\n              @if (State.IsFileLoadedComponent(component)) {\n                <button\n                  class=\"remove-btn\"\n                  (click)=\"OnRemoveFileComponent($any(component), $event)\"\n                  title=\"Remove imported component\">\n                  <i class=\"fa-solid fa-times\"></i>\n                </button>\n              }\n              <div class=\"card-chevron\">\n                @if (IsExpanded(component)) {\n                  <i class=\"fa-solid fa-chevron-up\"></i>\n                } @else {\n                  <i class=\"fa-solid fa-chevron-down\"></i>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Card Details (expanded) -->\n          @if (IsExpanded(component)) {\n            <div class=\"card-details\">\n              @if (State.GetComponentDescription(component)) {\n                <div class=\"detail-description\">\n                  <p>{{ State.GetComponentDescription(component) }}</p>\n                </div>\n              }\n\n              <div class=\"detail-info-grid\">\n                <div class=\"info-item\">\n                  <span class=\"info-label\">Type</span>\n                  <span class=\"info-value\">{{ State.GetComponentType(component) || 'Unknown' }}</span>\n                </div>\n                <div class=\"info-item\">\n                  <span class=\"info-label\">Version</span>\n                  <span class=\"info-value\">{{ State.GetComponentVersion(component) }}</span>\n                </div>\n                <div class=\"info-item\">\n                  <span class=\"info-label\">Status</span>\n                  <span class=\"info-value\">{{ State.GetComponentStatus(component) || 'Draft' }}</span>\n                </div>\n                @if (State.IsFileLoadedComponent(component)) {\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Loaded</span>\n                    <span class=\"info-value\">{{ State.GetComponentLoadedAt(component) | date:'short' }}</span>\n                  </div>\n                } @else if (State.GetComponentUpdatedAt(component)) {\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Updated</span>\n                    <span class=\"info-value\">{{ State.GetComponentUpdatedAt(component) | date:'short' }}</span>\n                  </div>\n                }\n              </div>\n\n              <div class=\"detail-actions\">\n                @if (IsComponentRunning(component)) {\n                  <button mjButton variant=\"danger\"\n                    (click)=\"OnStopComponent($event)\">\n                    <i class=\"fa-solid fa-stop\"></i> Stop\n                  </button>\n                } @else if (IsAnotherComponentRunning(component)) {\n                  <button mjButton\n                    title=\"Stop current component and run this one\"\n                    (click)=\"OnSwitchComponent(component, $event)\">\n                    <i class=\"fa-solid fa-exchange-alt\"></i> Switch To This\n                  </button>\n                } @else {\n                  <button mjButton variant=\"primary\"\n                    (click)=\"OnRunComponent(component, $event)\">\n                    <i class=\"fa-solid fa-play\"></i> Run\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: ["/* ============================================================ */\n/* Component Browser - Left Panel                               */\n/* ============================================================ */\n\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n\n.component-browser {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n/* ============================================================ */\n/* Header                                                        */\n/* ============================================================ */\n\n.browser-header {\n  padding: 12px 14px 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.browser-header .header-top-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n\n.browser-header .header-controls-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.browser-header .component-count {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-left: auto;\n}\n\n/* ============================================================ */\n/* Import Dropdown                                               */\n/* ============================================================ */\n\n.import-dropdown {\n  position: relative;\n}\n\n.import-dropdown .dropdown-chevron {\n  margin-left: 4px;\n  font-size: 10px;\n}\n\n.import-dropdown .dropdown-menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  min-width: 180px;\n  margin-top: 4px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  box-shadow: var(--mj-shadow-md);\n  overflow: hidden;\n}\n\n.import-dropdown .dropdown-menu .dropdown-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  padding: 8px 14px;\n  border: none;\n  background: none;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.15s;\n}\n\n.import-dropdown .dropdown-menu .dropdown-item:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.import-dropdown .dropdown-menu .dropdown-item i {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n/* ============================================================ */\n/* Filter Toggle Button                                          */\n/* ============================================================ */\n\n.filter-toggle-btn {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 5px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.15s;\n  position: relative;\n}\n\n.filter-toggle-btn:hover {\n  border-color: var(--mj-text-secondary);\n  color: var(--mj-text-primary);\n}\n\n.filter-toggle-btn.active {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.filter-toggle-btn .filter-count-badge {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 8px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n}\n\n/* ============================================================ */\n/* Search Box                                                    */\n/* ============================================================ */\n\n.search-box {\n  padding: 8px 14px;\n  flex-shrink: 0;\n}\n\n.search-box .search-icon {\n  color: var(--mj-text-secondary);\n  margin-left: 6px;\n}\n\n/* ============================================================ */\n/* Filter Panel                                                  */\n/* ============================================================ */\n\n.filter-panel {\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.filter-panel .filter-panel-content {\n  padding: 8px 14px 12px;\n}\n\n.filter-section {\n  margin-bottom: 10px;\n}\n\n.filter-section:last-child {\n  margin-bottom: 0;\n}\n\n.filter-section .filter-section-label {\n  display: block;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 6px;\n}\n\n.filter-options {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.filter-checkbox {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 6px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  transition: background 0.15s;\n}\n\n.filter-checkbox:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.filter-checkbox input[type=\"checkbox\"] {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n.filter-checkbox .filter-icon {\n  font-size: 12px;\n}\n\n.filter-checkbox .favorites-icon {\n  color: var(--mj-status-warning);\n}\n\n.filter-checkbox .deprecated-icon {\n  color: var(--mj-text-muted);\n}\n\n.filter-checkbox .deprecated-count {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n/* ============================================================ */\n/* Category Pills                                                */\n/* ============================================================ */\n\n.category-pills {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.category-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 14px;\n  background: var(--mj-bg-surface);\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.category-pill .pill-name {\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.category-pill .pill-count {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  padding: 0 5px;\n  border-radius: 8px;\n  line-height: 16px;\n}\n\n.category-pill:hover {\n  border-color: var(--pill-color, var(--mj-brand-primary));\n  background: var(--mj-bg-surface);\n}\n\n.category-pill.active {\n  border-color: var(--pill-color, var(--mj-brand-primary));\n  background: var(--pill-color, var(--mj-brand-primary));\n  color: var(--mj-text-inverse);\n}\n\n.category-pill.active .pill-count {\n  background: rgba(255, 255, 255, 0.25);\n  color: var(--mj-text-inverse);\n}\n\n.show-more-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-top: 6px;\n  padding: 2px 0;\n  border: none;\n  background: none;\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n.show-more-btn:hover {\n  color: var(--mj-brand-primary);\n  text-decoration: underline;\n}\n\n.filter-panel-footer {\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.clear-all-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 10px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  font-size: 12px;\n  color: var(--mj-status-error);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.clear-all-btn:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n/* ============================================================ */\n/* Component List (scrollable)                                   */\n/* ============================================================ */\n\n.component-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 10px;\n}\n\n/* ============================================================ */\n/* Loading & Empty States                                        */\n/* ============================================================ */\n\n.loading-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n}\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n}\n\n.empty-state .empty-icon {\n  font-size: 32px;\n  color: var(--mj-border-default);\n  margin-bottom: 12px;\n}\n\n.empty-state .empty-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin: 0 0 4px;\n}\n\n.empty-state .empty-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n/* ============================================================ */\n/* Component Card                                                */\n/* ============================================================ */\n\n.component-card {\n  margin-bottom: 6px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  transition: all 0.15s;\n  overflow: hidden;\n}\n\n.component-card:hover {\n  box-shadow: var(--mj-shadow-sm);\n  border-color: var(--mj-border-default);\n}\n\n/* Running state: green left border */\n.component-card.running {\n  border-left: 3px solid var(--mj-status-success);\n}\n\n/* File-loaded state: dashed border */\n.component-card.file-loaded {\n  border-style: dashed;\n  border-color: var(--mj-text-muted);\n}\n\n.component-card.file-loaded:hover {\n  border-color: var(--mj-text-secondary);\n}\n\n/* Expanded state: blue border */\n.component-card.expanded {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.component-card.expanded.running {\n  border-color: var(--mj-brand-primary);\n  border-left: 3px solid var(--mj-status-success);\n}\n\n.component-card.expanded.file-loaded {\n  border-style: solid;\n  border-color: var(--mj-brand-primary);\n}\n\n/* ============================================================ */\n/* Card Header                                                   */\n/* ============================================================ */\n\n.card-header {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 10px 12px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.card-header:hover {\n  background: var(--mj-bg-surface);\n}\n\n.card-type-icon {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  margin-top: 2px;\n}\n\n.card-body {\n  flex: 1;\n  min-width: 0;\n}\n\n.card-title-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n  margin-bottom: 4px;\n}\n\n.card-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.file-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  padding: 1px 6px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 10px;\n  font-weight: 500;\n  white-space: nowrap;\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.card-meta-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.version-badge {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  padding: 1px 6px;\n  border-radius: 4px;\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 1px 7px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.status-badge.published {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.status-badge.draft {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.status-badge.deprecated {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.status-badge.file {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.status-badge.text {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.status-badge.artifact {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.namespace-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  padding: 1px 7px;\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--mj-text-inverse);\n  max-width: 160px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.namespace-chip i {\n  font-size: 9px;\n  opacity: 0.8;\n}\n\n/* ============================================================ */\n/* Card End (favorite, remove, chevron)                          */\n/* ============================================================ */\n\n.card-end {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.favorite-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--mj-border-default);\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.favorite-btn:hover {\n  color: var(--mj-status-warning);\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n}\n\n.favorite-btn.is-favorite {\n  color: var(--mj-status-warning);\n}\n\n.remove-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--mj-border-default);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.remove-btn:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.card-chevron {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n}\n\n/* ============================================================ */\n/* Card Details (expanded content)                               */\n/* ============================================================ */\n\n.card-details {\n  padding: 0 12px 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.detail-description {\n  padding: 8px 0;\n}\n\n.detail-description p {\n  margin: 0;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n}\n\n.detail-info-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 6px 16px;\n  padding: 8px 0;\n}\n\n.detail-info-grid .info-item {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n.detail-info-grid .info-label {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n}\n\n.detail-info-grid .info-value {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.detail-actions {\n  display: flex;\n  gap: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n"] }]
     }], () => [{ type: i1.ComponentStudioStateService }, { type: i0.ChangeDetectorRef }], { NewComponent: [{
             type: Output
         }], ImportFromFile: [{