@memberjunction/ng-dashboards 2.108.0 → 2.109.0

package/dist/ComponentStudio/component-studio-dashboard.component.js

@@ -14,16 +14,17 @@ import { SharedService } from '@memberjunction/ng-shared';
 import { ParseJSONRecursive } from '@memberjunction/global';
 import { TextImportDialogComponent } from './components/text-import-dialog.component';
 import { ArtifactSelectionDialogComponent } from './components/artifact-selection-dialog.component';
-import { MJNotificationService } from '@memberjunction/ng-notifications';
+import { ArtifactLoadDialogComponent } from './components/artifact-load-dialog.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-dialog";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/forms";
-import * as i4 from "@progress/kendo-angular-inputs";
-import * as i5 from "@progress/kendo-angular-layout";
-import * as i6 from "@memberjunction/ng-code-editor";
-import * as i7 from "@progress/kendo-angular-buttons";
-import * as i8 from "@memberjunction/ng-react";
+import * as i2 from "@memberjunction/ng-notifications";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/forms";
+import * as i5 from "@progress/kendo-angular-inputs";
+import * as i6 from "@progress/kendo-angular-layout";
+import * as i7 from "@memberjunction/ng-code-editor";
+import * as i8 from "@progress/kendo-angular-buttons";
+import * as i9 from "@memberjunction/ng-react";
 const _c0 = ["fileInput"];
 const _forTrack0 = ($index, $item) => $item.name;
 function _forTrack1($index, $item) { return this.getComponentId($item); }
@@ -51,39 +52,44 @@ function ComponentStudioDashboardComponent_Conditional_10_Template(rf, ctx) { if
 function ComponentStudioDashboardComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 12)(1, "button", 39);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_16_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.importFromFile()); });
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_16_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.importFromArtifact()); });
     i0.ɵɵelement(2, "i", 40);
-    i0.ɵɵtext(3, " Import from File ");
+    i0.ɵɵtext(3, " Import from Artifact ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "button", 39);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_16_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.importFromText()); });
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_16_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.importFromFile()); });
     i0.ɵɵelement(5, "i", 41);
-    i0.ɵɵtext(6, " Import from Text ");
+    i0.ɵɵtext(6, " Import from File ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 39);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_16_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.importFromText()); });
+    i0.ɵɵelement(8, "i", 42);
+    i0.ɵɵtext(9, " Import from Text ");
     i0.ɵɵelementEnd()();
 } }
 function ComponentStudioDashboardComponent_Conditional_17_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 12)(1, "button", 39);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_17_Conditional_5_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.exportToArtifact()); });
-    i0.ɵɵelement(2, "i", 44);
+    i0.ɵɵelement(2, "i", 45);
     i0.ɵɵtext(3, " Export to Artifact ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "button", 39);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_17_Conditional_5_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.exportToFile()); });
-    i0.ɵɵelement(5, "i", 40);
+    i0.ɵɵelement(5, "i", 41);
     i0.ɵɵtext(6, " Export to File ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(7, "button", 39);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_17_Conditional_5_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.exportToClipboard()); });
-    i0.ɵɵelement(8, "i", 45);
+    i0.ɵɵelement(8, "i", 46);
     i0.ɵɵtext(9, " Export to Clipboard ");
     i0.ɵɵelementEnd()();
 } }
 function ComponentStudioDashboardComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 42)(1, "button", 9);
+    i0.ɵɵelementStart(0, "div", 43)(1, "button", 9);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_17_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleExportDropdown()); });
-    i0.ɵɵelement(2, "span", 43);
+    i0.ɵɵelement(2, "span", 44);
     i0.ɵɵtext(3, " Export ");
     i0.ɵɵelement(4, "span", 11);
     i0.ɵɵelementEnd();
@@ -97,370 +103,418 @@ function ComponentStudioDashboardComponent_Conditional_17_Template(rf, ctx) { if
     i0.ɵɵadvance(4);
     i0.ɵɵconditional(ctx_r2.exportDropdownOpen ? 5 : -1);
 } }
-function ComponentStudioDashboardComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 46);
-    i0.ɵɵtext(1, " Favorites ");
+function ComponentStudioDashboardComponent_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 25);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.GetActiveFilterCount());
 } }
-function ComponentStudioDashboardComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_ng_template_36_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 47);
-    i0.ɵɵtext(1, " All ");
-} }
-function ComponentStudioDashboardComponent_Conditional_35_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 48);
-    i0.ɵɵtext(1, " Show Deprecated ");
 } }
-function ComponentStudioDashboardComponent_Conditional_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 49);
-    i0.ɵɵtext(1, " Hide Deprecated ");
+function ComponentStudioDashboardComponent_Conditional_37_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 57);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("(", ctx_r2.getDeprecatedCount(), " hidden)");
 } }
-function ComponentStudioDashboardComponent_Conditional_40_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 53);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_40_For_2_Template_button_click_0_listener() { const category_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleCategory(category_r8.name)); });
-    i0.ɵɵelementStart(1, "span", 54);
+function ComponentStudioDashboardComponent_Conditional_37_Conditional_21_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 62);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_37_Conditional_21_For_5_Template_button_click_0_listener() { const category_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.toggleCategory(category_r9.name)); });
+    i0.ɵɵelementStart(1, "span", 63);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 55);
+    i0.ɵɵelementStart(3, "span", 64);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const category_r8 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("--pill-color", category_r8.color);
-    i0.ɵɵclassProp("active", ctx_r2.isCategorySelected(category_r8.name));
+    const category_r9 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵstyleProp("--pill-color", category_r9.color);
+    i0.ɵɵclassProp("active", ctx_r2.isCategorySelected(category_r9.name));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(category_r8.name);
+    i0.ɵɵtextInterpolate(category_r9.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(category_r8.count);
+    i0.ɵɵtextInterpolate(category_r9.count);
 } }
-function ComponentStudioDashboardComponent_Conditional_40_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 57);
-    i0.ɵɵtext(1, " Less ");
+function ComponentStudioDashboardComponent_Conditional_37_Conditional_21_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 66);
+    i0.ɵɵtext(1, " Show less ");
 } }
-function ComponentStudioDashboardComponent_Conditional_40_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 58);
+function ComponentStudioDashboardComponent_Conditional_37_Conditional_21_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 49);
     i0.ɵɵtext(1);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" +", ctx_r2.availableCategories.length - 5, " more ");
+    i0.ɵɵtextInterpolate1(" Show ", ctx_r2.availableCategories.length - 5, " more ");
 } }
-function ComponentStudioDashboardComponent_Conditional_40_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 56);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_40_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleShowAllCategories()); });
-    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_40_Conditional_3_Conditional_1_Template, 2, 0)(2, ComponentStudioDashboardComponent_Conditional_40_Conditional_3_Conditional_2_Template, 2, 1);
+function ComponentStudioDashboardComponent_Conditional_37_Conditional_21_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 65);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_37_Conditional_21_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.toggleShowAllCategories()); });
+    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_37_Conditional_21_Conditional_6_Conditional_1_Template, 2, 0)(2, ComponentStudioDashboardComponent_Conditional_37_Conditional_21_Conditional_6_Conditional_2_Template, 2, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.showAllCategories ? 1 : 2);
 } }
-function ComponentStudioDashboardComponent_Conditional_40_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 59);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_40_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.clearCategoryFilters()); });
-    i0.ɵɵelement(1, "i", 60);
-    i0.ɵɵtext(2, " Clear ");
+function ComponentStudioDashboardComponent_Conditional_37_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52)(1, "label", 53);
+    i0.ɵɵtext(2, "Categories");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 59);
+    i0.ɵɵrepeaterCreate(4, ComponentStudioDashboardComponent_Conditional_37_Conditional_21_For_5_Template, 5, 6, "button", 60, _forTrack0);
     i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, ComponentStudioDashboardComponent_Conditional_37_Conditional_21_Conditional_6_Template, 3, 1, "button", 61);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r2.getVisibleCategories());
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.availableCategories.length > 5 ? 6 : -1);
 } }
-function ComponentStudioDashboardComponent_Conditional_40_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27);
-    i0.ɵɵrepeaterCreate(1, ComponentStudioDashboardComponent_Conditional_40_For_2_Template, 5, 6, "button", 50, _forTrack0);
-    i0.ɵɵtemplate(3, ComponentStudioDashboardComponent_Conditional_40_Conditional_3_Template, 3, 1, "button", 51)(4, ComponentStudioDashboardComponent_Conditional_40_Conditional_4_Template, 3, 0, "button", 52);
+function ComponentStudioDashboardComponent_Conditional_37_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 58)(1, "button", 67);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_37_Conditional_22_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.ClearAllFilters()); });
+    i0.ɵɵelement(2, "i", 68);
+    i0.ɵɵtext(3, " Clear All Filters ");
+    i0.ɵɵelementEnd()();
+} }
+function ComponentStudioDashboardComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 30)(1, "div", 48);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_37_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleFilterPanel()); });
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵelement(3, "i", 49);
+    i0.ɵɵtext(4, " Filters");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 50);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 51)(8, "div", 52)(9, "label", 53);
+    i0.ɵɵtext(10, "Quick Filters");
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 54)(12, "label", 55)(13, "input", 56);
+    i0.ɵɵlistener("change", function ComponentStudioDashboardComponent_Conditional_37_Template_input_change_13_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleShowOnlyFavorites()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "span");
+    i0.ɵɵtext(15, "Show favorites only");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "label", 55)(17, "input", 56);
+    i0.ɵɵlistener("change", function ComponentStudioDashboardComponent_Conditional_37_Template_input_change_17_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleShowDeprecatedComponents()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "span");
+    i0.ɵɵtext(19, "Hide deprecated ");
+    i0.ɵɵtemplate(20, ComponentStudioDashboardComponent_Conditional_37_Conditional_20_Template, 2, 1, "span", 57);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵtemplate(21, ComponentStudioDashboardComponent_Conditional_37_Conditional_21_Template, 7, 1, "div", 52)(22, ComponentStudioDashboardComponent_Conditional_37_Conditional_22_Template, 4, 0, "div", 58);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate2("", ctx_r2.filteredComponents.length, " of ", ctx_r2.allComponents.length, "");
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("checked", ctx_r2.showOnlyFavorites);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("checked", !ctx_r2.showDeprecatedComponents);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r2.getDeprecatedCount() > 0 ? 20 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.getVisibleCategories());
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.availableCategories.length > 5 ? 3 : -1);
+    i0.ɵɵconditional(ctx_r2.availableCategories.length > 0 ? 21 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.selectedCategories.size > 0 ? 4 : -1);
+    i0.ɵɵconditional(ctx_r2.GetActiveFilterCount() > 0 ? 22 : -1);
 } }
-function ComponentStudioDashboardComponent_ng_template_43_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 61);
-} }
-function ComponentStudioDashboardComponent_Conditional_45_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_39_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 32);
-    i0.ɵɵelement(1, "i", 62);
+    i0.ɵɵelement(1, "i", 69);
     i0.ɵɵtext(2, " Loading components... ");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_46_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_40_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 33);
-    i0.ɵɵelement(1, "i", 63);
+    i0.ɵɵelement(1, "i", 70);
     i0.ɵɵtext(2, " No components found without required custom properties. ");
     i0.ɵɵelement(3, "br");
     i0.ɵɵelementStart(4, "small");
     i0.ɵɵtext(5, "Components with optional custom props can be tested, but not those with required props.");
     i0.ɵɵelementEnd()();
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 46);
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 92);
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 47);
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 93);
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 84);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_4_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const component_r12 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleFavorite(component_r12, $event)); });
-    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_4_Conditional_1_Template, 1, 0, "i", 46)(2, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_4_Conditional_2_Template, 1, 0, "i", 47);
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 91);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_4_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r14); const component_r13 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleFavorite(component_r13, $event)); });
+    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_4_Conditional_1_Template, 1, 0, "i", 92)(2, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_4_Conditional_2_Template, 1, 0, "i", 93);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const component_r12 = i0.ɵɵnextContext().$implicit;
+    const component_r13 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("is-favorite", ctx_r2.isFavorite(component_r12));
-    i0.ɵɵproperty("title", ctx_r2.isFavorite(component_r12) ? "Remove from favorites" : "Add to favorites");
+    i0.ɵɵclassProp("is-favorite", ctx_r2.isFavorite(component_r13));
+    i0.ɵɵproperty("title", ctx_r2.isFavorite(component_r13) ? "Remove from favorites" : "Add to favorites");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.isFavorite(component_r12) ? 1 : 2);
+    i0.ɵɵconditional(ctx_r2.isFavorite(component_r13) ? 1 : 2);
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 41);
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 42);
     i0.ɵɵtext(1, " Text Import ");
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 40);
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 41);
     i0.ɵɵtext(1);
 } if (rf & 2) {
-    const component_r12 = i0.ɵɵnextContext(2).$implicit;
+    const component_r13 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.getComponentFilename(component_r12), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getComponentFilename(component_r13), " ");
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 72);
-    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_8_Conditional_1_Template, 2, 0)(2, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_8_Conditional_2_Template, 2, 1);
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 79);
+    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_8_Conditional_1_Template, 2, 0)(2, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_8_Conditional_2_Template, 2, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const component_r12 = i0.ɵɵnextContext().$implicit;
+    const component_r13 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("title", ctx_r2.getComponentStatus(component_r12) === "Text" ? "Imported from text input" : "Loaded from " + ctx_r2.getComponentFilename(component_r12));
+    i0.ɵɵproperty("title", ctx_r2.getComponentStatus(component_r13) === "Text" ? "Imported from text input" : "Loaded from " + ctx_r2.getComponentFilename(component_r13));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.getComponentStatus(component_r12) === "Text" ? 1 : 2);
+    i0.ɵɵconditional(ctx_r2.getComponentStatus(component_r13) === "Text" ? 1 : 2);
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_14_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 85);
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_14_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 94);
     i0.ɵɵtext(1, "Text");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 86);
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 95);
     i0.ɵɵtext(1, "File");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_14_Conditional_0_Template, 2, 0, "span", 85)(1, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_14_Conditional_1_Template, 2, 0, "span", 86);
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_14_Conditional_0_Template, 2, 0, "span", 94)(1, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_14_Conditional_1_Template, 2, 0, "span", 95);
 } if (rf & 2) {
-    const component_r12 = i0.ɵɵnextContext().$implicit;
+    const component_r13 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r2.getComponentStatus(component_r12) === "Text" ? 0 : 1);
+    i0.ɵɵconditional(ctx_r2.getComponentStatus(component_r13) === "Text" ? 0 : 1);
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 76);
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 83);
     i0.ɵɵtext(1, "Deprecated");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 77);
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 84);
     i0.ɵɵtext(1, "Published");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 78);
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 85);
     i0.ɵɵtext(1, "Draft");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 57);
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 66);
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 58);
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 49);
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 87)(1, "label");
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_25_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 96)(1, "label");
     i0.ɵɵtext(2, "Description");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "p");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const component_r12 = i0.ɵɵnextContext(2).$implicit;
+    const component_r13 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r2.getComponentDescription(component_r12));
+    i0.ɵɵtextInterpolate(ctx_r2.getComponentDescription(component_r13));
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 89)(1, "span", 90);
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_25_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 98)(1, "span", 99);
     i0.ɵɵtext(2, "Loaded:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 91);
+    i0.ɵɵelementStart(3, "span", 100);
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "date");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const component_r12 = i0.ɵɵnextContext(2).$implicit;
+    const component_r13 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r2.getComponentLoadedAt(component_r12), "short"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r2.getComponentLoadedAt(component_r13), "short"));
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 89)(1, "span", 90);
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_25_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 98)(1, "span", 99);
     i0.ɵɵtext(2, "Updated:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 91);
+    i0.ɵɵelementStart(3, "span", 100);
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "date");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const component_r12 = i0.ɵɵnextContext(2).$implicit;
+    const component_r13 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r2.getComponentUpdatedAt(component_r12), "short"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r2.getComponentUpdatedAt(component_r13), "short"));
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_25_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_24_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.stopComponent(); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "span", 94);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_25_Conditional_24_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.stopComponent(); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(1, "span", 103);
     i0.ɵɵtext(2, " Stop Component ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "error");
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 95);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_25_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r15); const component_r12 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.runComponent(component_r12); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "span", 96);
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_25_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 104);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_25_Conditional_25_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r16); const component_r13 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.runComponent(component_r13); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(1, "span", 105);
     i0.ɵɵtext(2, " Switch to This Component ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "base");
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_25_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_26_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r16); const component_r12 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.runComponent(component_r12); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "span", 96);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_25_Conditional_26_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r17); const component_r13 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.runComponent(component_r13); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(1, "span", 105);
     i0.ɵɵtext(2, " Run Component ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "primary");
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 83);
-    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_1_Template, 5, 1, "div", 87);
-    i0.ɵɵelementStart(2, "div", 87)(3, "label");
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 90);
+    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_25_Conditional_1_Template, 5, 1, "div", 96);
+    i0.ɵɵelementStart(2, "div", 96)(3, "label");
     i0.ɵɵtext(4, "Component Info");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 88)(6, "div", 89)(7, "span", 90);
+    i0.ɵɵelementStart(5, "div", 97)(6, "div", 98)(7, "span", 99);
     i0.ɵɵtext(8, "Type:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 91);
+    i0.ɵɵelementStart(9, "span", 100);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 89)(12, "span", 90);
+    i0.ɵɵelementStart(11, "div", 98)(12, "span", 99);
     i0.ɵɵtext(13, "Version:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "span", 91);
+    i0.ɵɵelementStart(14, "span", 100);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 89)(17, "span", 90);
+    i0.ɵɵelementStart(16, "div", 98)(17, "span", 99);
     i0.ɵɵtext(18, "Status:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "span", 91);
+    i0.ɵɵelementStart(19, "span", 100);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(21, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_21_Template, 6, 4, "div", 89)(22, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_22_Template, 6, 4, "div", 89);
+    i0.ɵɵtemplate(21, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_25_Conditional_21_Template, 6, 4, "div", 98)(22, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_25_Conditional_22_Template, 6, 4, "div", 98);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(23, "div", 92);
-    i0.ɵɵtemplate(24, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_24_Template, 3, 1, "button", 7)(25, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_25_Template, 3, 1, "button", 93)(26, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_26_Template, 3, 1, "button", 7);
+    i0.ɵɵelementStart(23, "div", 101);
+    i0.ɵɵtemplate(24, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_25_Conditional_24_Template, 3, 1, "button", 7)(25, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_25_Conditional_25_Template, 3, 1, "button", 102)(26, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_25_Conditional_26_Template, 3, 1, "button", 7);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const component_r12 = i0.ɵɵnextContext().$implicit;
+    const component_r13 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.getComponentDescription(component_r12) ? 1 : -1);
+    i0.ɵɵconditional(ctx_r2.getComponentDescription(component_r13) ? 1 : -1);
     i0.ɵɵadvance(9);
-    i0.ɵɵtextInterpolate(ctx_r2.getComponentType(component_r12) || "Unknown");
+    i0.ɵɵtextInterpolate(ctx_r2.getComponentType(component_r13) || "Unknown");
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r2.getComponentVersion(component_r12));
+    i0.ɵɵtextInterpolate(ctx_r2.getComponentVersion(component_r13));
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r2.getComponentStatus(component_r12) || "Draft");
+    i0.ɵɵtextInterpolate(ctx_r2.getComponentStatus(component_r13) || "Draft");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.isFileLoadedComponent(component_r12) ? 21 : !ctx_r2.isFileLoadedComponent(component_r12) && ctx_r2.getComponentUpdatedAt(component_r12) ? 22 : -1);
+    i0.ɵɵconditional(ctx_r2.isFileLoadedComponent(component_r13) ? 21 : !ctx_r2.isFileLoadedComponent(component_r13) && ctx_r2.getComponentUpdatedAt(component_r13) ? 22 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r2.selectedComponent && ctx_r2.getComponentId(ctx_r2.selectedComponent) === ctx_r2.getComponentId(component_r12) && ctx_r2.isRunning ? 24 : ctx_r2.isRunning && ctx_r2.selectedComponent && ctx_r2.getComponentId(ctx_r2.selectedComponent) !== ctx_r2.getComponentId(component_r12) ? 25 : 26);
+    i0.ɵɵconditional(ctx_r2.selectedComponent && ctx_r2.getComponentId(ctx_r2.selectedComponent) === ctx_r2.getComponentId(component_r13) && ctx_r2.isRunning ? 24 : ctx_r2.isRunning && ctx_r2.selectedComponent && ctx_r2.getComponentId(ctx_r2.selectedComponent) !== ctx_r2.getComponentId(component_r13) ? 25 : 26);
 } }
-function ComponentStudioDashboardComponent_Conditional_47_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 65)(1, "div", 66);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_47_For_1_Template_div_click_1_listener() { const component_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleComponentExpansion(component_r12)); });
-    i0.ɵɵelementStart(2, "div", 67);
-    i0.ɵɵelement(3, "i", 68);
+function ComponentStudioDashboardComponent_Conditional_41_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 72)(1, "div", 73);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_41_For_1_Template_div_click_1_listener() { const component_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleComponentExpansion(component_r13)); });
+    i0.ɵɵelementStart(2, "div", 74);
+    i0.ɵɵelement(3, "i", 75);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_4_Template, 3, 4, "button", 69);
-    i0.ɵɵelementStart(5, "div", 70)(6, "div", 71);
+    i0.ɵɵtemplate(4, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_4_Template, 3, 4, "button", 76);
+    i0.ɵɵelementStart(5, "div", 77)(6, "div", 78);
     i0.ɵɵtext(7);
-    i0.ɵɵtemplate(8, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_8_Template, 3, 2, "span", 72);
+    i0.ɵɵtemplate(8, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_8_Template, 3, 2, "span", 79);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 73)(10, "span", 74);
+    i0.ɵɵelementStart(9, "div", 80)(10, "span", 81);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 75);
+    i0.ɵɵelementStart(12, "span", 82);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(14, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_14_Template, 2, 1)(15, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_15_Template, 2, 0, "span", 76)(16, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_16_Template, 2, 0, "span", 77)(17, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_17_Template, 2, 0, "span", 78);
+    i0.ɵɵtemplate(14, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_14_Template, 2, 1)(15, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_15_Template, 2, 0, "span", 83)(16, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_16_Template, 2, 0, "span", 84)(17, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_17_Template, 2, 0, "span", 85);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 79)(19, "span", 80);
-    i0.ɵɵelement(20, "i", 81);
+    i0.ɵɵelementStart(18, "div", 86)(19, "span", 87);
+    i0.ɵɵelement(20, "i", 88);
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(22, "div", 82);
-    i0.ɵɵtemplate(23, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_23_Template, 1, 0, "i", 57)(24, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_24_Template, 1, 0, "i", 58);
+    i0.ɵɵelementStart(22, "div", 89);
+    i0.ɵɵtemplate(23, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_23_Template, 1, 0, "i", 66)(24, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_24_Template, 1, 0, "i", 49);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(25, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Template, 27, 6, "div", 83);
+    i0.ɵɵtemplate(25, ComponentStudioDashboardComponent_Conditional_41_For_1_Conditional_25_Template, 27, 6, "div", 90);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const component_r12 = ctx.$implicit;
+    const component_r13 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("expanded", ctx_r2.expandedComponent && ctx_r2.getComponentId(ctx_r2.expandedComponent) === ctx_r2.getComponentId(component_r12))("running", ctx_r2.selectedComponent && ctx_r2.getComponentId(ctx_r2.selectedComponent) === ctx_r2.getComponentId(component_r12) && ctx_r2.isRunning)("file-loaded", ctx_r2.isFileLoadedComponent(component_r12));
+    i0.ɵɵclassProp("expanded", ctx_r2.expandedComponent && ctx_r2.getComponentId(ctx_r2.expandedComponent) === ctx_r2.getComponentId(component_r13))("running", ctx_r2.selectedComponent && ctx_r2.getComponentId(ctx_r2.selectedComponent) === ctx_r2.getComponentId(component_r13) && ctx_r2.isRunning)("file-loaded", ctx_r2.isFileLoadedComponent(component_r13));
     i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("color", ctx_r2.getComponentTypeColor(ctx_r2.getComponentType(component_r12)));
+    i0.ɵɵstyleProp("color", ctx_r2.getComponentTypeColor(ctx_r2.getComponentType(component_r13)));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.getComponentTypeIcon(ctx_r2.getComponentType(component_r12)));
+    i0.ɵɵproperty("ngClass", ctx_r2.getComponentTypeIcon(ctx_r2.getComponentType(component_r13)));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.isFileLoadedComponent(component_r12) ? 4 : -1);
+    i0.ɵɵconditional(!ctx_r2.isFileLoadedComponent(component_r13) ? 4 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.getComponentName(component_r12), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getComponentName(component_r13), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.isFileLoadedComponent(component_r12) ? 8 : -1);
+    i0.ɵɵconditional(ctx_r2.isFileLoadedComponent(component_r13) ? 8 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r2.getComponentType(component_r12) || "Component");
+    i0.ɵɵtextInterpolate(ctx_r2.getComponentType(component_r13) || "Component");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("v", ctx_r2.getComponentVersion(component_r12), "");
+    i0.ɵɵtextInterpolate1("v", ctx_r2.getComponentVersion(component_r13), "");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.isFileLoadedComponent(component_r12) ? 14 : ctx_r2.getComponentStatus(component_r12) === "Deprecated" ? 15 : ctx_r2.getComponentStatus(component_r12) === "Published" ? 16 : 17);
+    i0.ɵɵconditional(ctx_r2.isFileLoadedComponent(component_r13) ? 14 : ctx_r2.getComponentStatus(component_r13) === "Deprecated" ? 15 : ctx_r2.getComponentStatus(component_r13) === "Published" ? 16 : 17);
     i0.ɵɵadvance(5);
-    i0.ɵɵstyleProp("background-color", ctx_r2.getNamespaceColor(ctx_r2.getComponentNamespace(component_r12)));
-    i0.ɵɵproperty("title", ctx_r2.getComponentNamespace(component_r12) || "Uncategorized");
+    i0.ɵɵstyleProp("background-color", ctx_r2.getNamespaceColor(ctx_r2.getComponentNamespace(component_r13)));
+    i0.ɵɵproperty("title", ctx_r2.getComponentNamespace(component_r13) || "Uncategorized");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.formatNamespace(ctx_r2.getComponentNamespace(component_r12)), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.formatNamespace(ctx_r2.getComponentNamespace(component_r13)), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.expandedComponent && ctx_r2.getComponentId(ctx_r2.expandedComponent) === ctx_r2.getComponentId(component_r12) ? 23 : 24);
+    i0.ɵɵconditional(ctx_r2.expandedComponent && ctx_r2.getComponentId(ctx_r2.expandedComponent) === ctx_r2.getComponentId(component_r13) ? 23 : 24);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.expandedComponent && ctx_r2.getComponentId(ctx_r2.expandedComponent) === ctx_r2.getComponentId(component_r12) ? 25 : -1);
+    i0.ɵɵconditional(ctx_r2.expandedComponent && ctx_r2.getComponentId(ctx_r2.expandedComponent) === ctx_r2.getComponentId(component_r13) ? 25 : -1);
 } }
-function ComponentStudioDashboardComponent_Conditional_47_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ComponentStudioDashboardComponent_Conditional_47_For_1_Template, 26, 21, "div", 64, _forTrack1, true);
+function ComponentStudioDashboardComponent_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ComponentStudioDashboardComponent_Conditional_41_For_1_Template, 26, 21, "div", 71, _forTrack1, true);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵrepeater(ctx_r2.filteredComponents);
 } }
-function ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "details", 111)(1, "summary");
+function ComponentStudioDashboardComponent_Conditional_44_Conditional_3_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "details", 121)(1, "summary");
     i0.ɵɵtext(2, "Technical Details (click to expand)");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "pre");
@@ -471,21 +525,21 @@ function ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditio
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.formatTechnicalDetails(ctx_r2.currentError.technicalDetails));
 } }
-function ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 103)(1, "div", 105)(2, "div", 106);
-    i0.ɵɵelement(3, "i", 48);
+function ComponentStudioDashboardComponent_Conditional_44_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 112)(1, "div", 114)(2, "div", 115);
+    i0.ɵɵelement(3, "i", 116);
     i0.ɵɵelementStart(4, "h3");
     i0.ɵɵtext(5, "Component Error");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 107);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditional_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.copyErrorToClipboard()); });
-    i0.ɵɵelement(7, "i", 108);
+    i0.ɵɵelementStart(6, "button", 117);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_44_Conditional_3_Conditional_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.copyErrorToClipboard()); });
+    i0.ɵɵelement(7, "i", 118);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "p", 109);
+    i0.ɵɵelementStart(8, "p", 119);
     i0.ɵɵtext(9, " The component could not be rendered due to the following error: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 110)(11, "strong");
+    i0.ɵɵelementStart(10, "div", 120)(11, "strong");
     i0.ɵɵtext(12, "Error Type:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(13);
@@ -494,9 +548,9 @@ function ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditio
     i0.ɵɵtext(16, "Message:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(17);
-    i0.ɵɵtemplate(18, ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditional_0_Conditional_18_Template, 5, 1, "details", 111);
+    i0.ɵɵtemplate(18, ComponentStudioDashboardComponent_Conditional_44_Conditional_3_Conditional_0_Conditional_18_Template, 5, 1, "details", 121);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 112)(20, "strong");
+    i0.ɵɵelementStart(19, "div", 122)(20, "strong");
     i0.ɵɵtext(21, "What to do:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(22, "ol")(23, "li");
@@ -511,14 +565,14 @@ function ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditio
     i0.ɵɵelementStart(29, "li");
     i0.ɵɵtext(30, "Contact your system administrator if the issue persists");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(31, "div", 113)(32, "button", 114);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditional_0_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.retryComponent()); });
-    i0.ɵɵelement(33, "span", 115);
+    i0.ɵɵelementStart(31, "div", 123)(32, "button", 124);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_44_Conditional_3_Conditional_0_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.retryComponent()); });
+    i0.ɵɵelement(33, "span", 125);
     i0.ɵɵtext(34, " Retry ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(35, "button", 9);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditional_0_Template_button_click_35_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.stopComponent()); });
-    i0.ɵɵelement(36, "span", 94);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_44_Conditional_3_Conditional_0_Template_button_click_35_listener() { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.stopComponent()); });
+    i0.ɵɵelement(36, "span", 103);
     i0.ɵɵtext(37, " Stop ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -532,34 +586,34 @@ function ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditio
     i0.ɵɵadvance(17);
     i0.ɵɵproperty("themeColor", "error");
 } }
-function ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-react-component", 116);
-    i0.ɵɵlistener("componentEvent", function ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditional_1_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onComponentEvent($event)); })("openEntityRecord", function ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditional_1_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onOpenEntityRecord($event)); });
+function ComponentStudioDashboardComponent_Conditional_44_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-react-component", 126);
+    i0.ɵɵlistener("componentEvent", function ComponentStudioDashboardComponent_Conditional_44_Conditional_3_Conditional_1_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onComponentEvent($event)); })("openEntityRecord", function ComponentStudioDashboardComponent_Conditional_44_Conditional_3_Conditional_1_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onOpenEntityRecord($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("component", ctx_r2.componentSpec);
 } }
-function ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditional_0_Template, 38, 4, "div", 103)(1, ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditional_1_Template, 1, 1, "mj-react-component", 104);
+function ComponentStudioDashboardComponent_Conditional_44_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ComponentStudioDashboardComponent_Conditional_44_Conditional_3_Conditional_0_Template, 38, 4, "div", 112)(1, ComponentStudioDashboardComponent_Conditional_44_Conditional_3_Conditional_1_Template, 1, 1, "mj-react-component", 113);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r2.currentError ? 0 : 1);
 } }
-function ComponentStudioDashboardComponent_Conditional_50_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 99);
-    i0.ɵɵelement(1, "i", 117);
+function ComponentStudioDashboardComponent_Conditional_44_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 108);
+    i0.ɵɵelement(1, "i", 127);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 118);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_50_Conditional_4_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.runComponent(ctx_r2.selectedComponent)); });
-    i0.ɵɵelement(7, "span", 96);
+    i0.ɵɵelementStart(6, "button", 128);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_44_Conditional_4_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.runComponent(ctx_r2.selectedComponent)); });
+    i0.ɵɵelement(7, "span", 105);
     i0.ɵɵtext(8, " Run Component ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -571,43 +625,43 @@ function ComponentStudioDashboardComponent_Conditional_50_Conditional_4_Template
     i0.ɵɵadvance();
     i0.ɵɵproperty("themeColor", "primary")("size", "large");
 } }
-function ComponentStudioDashboardComponent_Conditional_50_ng_template_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
+function ComponentStudioDashboardComponent_Conditional_44_ng_template_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_50_ng_template_9_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.applySpecChanges()); });
-    i0.ɵɵelement(1, "span", 125);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_44_ng_template_9_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.applySpecChanges()); });
+    i0.ɵɵelement(1, "span", 135);
     i0.ɵɵtext(2, " Apply Changes ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 114);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_50_ng_template_9_Conditional_6_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r22); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.initializeEditors()); });
-    i0.ɵɵelement(4, "span", 60);
+    i0.ɵɵelementStart(3, "button", 124);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_44_ng_template_9_Conditional_6_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r23); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.initializeEditors()); });
+    i0.ɵɵelement(4, "span", 68);
     i0.ɵɵtext(5, " Cancel ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "primary");
 } }
-function ComponentStudioDashboardComponent_Conditional_50_ng_template_9_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
+function ComponentStudioDashboardComponent_Conditional_44_ng_template_9_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_50_ng_template_9_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.refreshComponent()); });
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_44_ng_template_9_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.refreshComponent()); });
     i0.ɵɵelement(1, "span", 15);
     i0.ɵɵtext(2, " Refresh Component ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "info");
 } }
-function ComponentStudioDashboardComponent_Conditional_50_ng_template_9_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 119)(1, "div", 120)(2, "h4");
-    i0.ɵɵelement(3, "i", 121);
+function ComponentStudioDashboardComponent_Conditional_44_ng_template_9_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 129)(1, "div", 130)(2, "h4");
+    i0.ɵɵelement(3, "i", 131);
     i0.ɵɵtext(4, " Component Specification (JSON)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 122);
-    i0.ɵɵtemplate(6, ComponentStudioDashboardComponent_Conditional_50_ng_template_9_Conditional_6_Template, 6, 1)(7, ComponentStudioDashboardComponent_Conditional_50_ng_template_9_Conditional_7_Template, 3, 1, "button", 7);
+    i0.ɵɵelementStart(5, "div", 132);
+    i0.ɵɵtemplate(6, ComponentStudioDashboardComponent_Conditional_44_ng_template_9_Conditional_6_Template, 6, 1)(7, ComponentStudioDashboardComponent_Conditional_44_ng_template_9_Conditional_7_Template, 3, 1, "button", 7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 123)(9, "mj-code-editor", 124);
-    i0.ɵɵtwoWayListener("ngModelChange", function ComponentStudioDashboardComponent_Conditional_50_ng_template_9_Template_mj_code_editor_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.editableSpec, $event) || (ctx_r2.editableSpec = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function ComponentStudioDashboardComponent_Conditional_50_ng_template_9_Template_mj_code_editor_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onSpecChange($event)); });
+    i0.ɵɵelementStart(8, "div", 133)(9, "mj-code-editor", 134);
+    i0.ɵɵtwoWayListener("ngModelChange", function ComponentStudioDashboardComponent_Conditional_44_ng_template_9_Template_mj_code_editor_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.editableSpec, $event) || (ctx_r2.editableSpec = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function ComponentStudioDashboardComponent_Conditional_44_ng_template_9_Template_mj_code_editor_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onSpecChange($event)); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -619,58 +673,58 @@ function ComponentStudioDashboardComponent_Conditional_50_ng_template_9_Template
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.editableSpec);
     i0.ɵɵproperty("language", "json")("readonly", false);
 } }
-function ComponentStudioDashboardComponent_Conditional_50_ng_template_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
+function ComponentStudioDashboardComponent_Conditional_44_ng_template_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_50_ng_template_11_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.applyCodeChanges()); });
-    i0.ɵɵelement(1, "span", 125);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_44_ng_template_11_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.applyCodeChanges()); });
+    i0.ɵɵelement(1, "span", 135);
     i0.ɵɵtext(2, " Apply Changes ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 114);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_50_ng_template_11_Conditional_6_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.initializeEditors()); });
-    i0.ɵɵelement(4, "span", 60);
+    i0.ɵɵelementStart(3, "button", 124);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_44_ng_template_11_Conditional_6_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.initializeEditors()); });
+    i0.ɵɵelement(4, "span", 68);
     i0.ɵɵtext(5, " Cancel ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "primary");
 } }
-function ComponentStudioDashboardComponent_Conditional_50_ng_template_11_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
+function ComponentStudioDashboardComponent_Conditional_44_ng_template_11_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_50_ng_template_11_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.refreshComponent()); });
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_44_ng_template_11_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.refreshComponent()); });
     i0.ɵɵelement(1, "span", 15);
     i0.ɵɵtext(2, " Refresh Component ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "info");
 } }
-function ComponentStudioDashboardComponent_Conditional_50_ng_template_11_For_11_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-code-editor", 131);
-    i0.ɵɵlistener("ngModelChange", function ComponentStudioDashboardComponent_Conditional_50_ng_template_11_For_11_ng_template_1_Template_mj_code_editor_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r26); const ɵ$index_525_r27 = i0.ɵɵnextContext().$index; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onCodeSectionChange($event, ɵ$index_525_r27)); });
+function ComponentStudioDashboardComponent_Conditional_44_ng_template_11_For_11_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-code-editor", 141);
+    i0.ɵɵlistener("ngModelChange", function ComponentStudioDashboardComponent_Conditional_44_ng_template_11_For_11_ng_template_1_Template_mj_code_editor_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r27); const ɵ$index_560_r28 = i0.ɵɵnextContext().$index; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onCodeSectionChange($event, ɵ$index_560_r28)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const section_r28 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("ngModel", section_r28.code)("language", "javascript")("readonly", false);
+    const section_r29 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("ngModel", section_r29.code)("language", "javascript")("readonly", false);
 } }
-function ComponentStudioDashboardComponent_Conditional_50_ng_template_11_For_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-panelbar-item", 129);
-    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_50_ng_template_11_For_11_ng_template_1_Template, 1, 3, "ng-template", 130);
+function ComponentStudioDashboardComponent_Conditional_44_ng_template_11_For_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-panelbar-item", 139);
+    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_44_ng_template_11_For_11_ng_template_1_Template, 1, 3, "ng-template", 140);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const section_r28 = ctx.$implicit;
-    i0.ɵɵproperty("title", section_r28.title)("expanded", section_r28.expanded);
+    const section_r29 = ctx.$implicit;
+    i0.ɵɵproperty("title", section_r29.title)("expanded", section_r29.expanded);
 } }
-function ComponentStudioDashboardComponent_Conditional_50_ng_template_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 126)(1, "div", 120)(2, "h4");
-    i0.ɵɵelement(3, "i", 127);
+function ComponentStudioDashboardComponent_Conditional_44_ng_template_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 136)(1, "div", 130)(2, "h4");
+    i0.ɵɵelement(3, "i", 137);
     i0.ɵɵtext(4, " Component Code (JavaScript/React)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 122);
-    i0.ɵɵtemplate(6, ComponentStudioDashboardComponent_Conditional_50_ng_template_11_Conditional_6_Template, 6, 1)(7, ComponentStudioDashboardComponent_Conditional_50_ng_template_11_Conditional_7_Template, 3, 1, "button", 7);
+    i0.ɵɵelementStart(5, "div", 132);
+    i0.ɵɵtemplate(6, ComponentStudioDashboardComponent_Conditional_44_ng_template_11_Conditional_6_Template, 6, 1)(7, ComponentStudioDashboardComponent_Conditional_44_ng_template_11_Conditional_7_Template, 3, 1, "button", 7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 123)(9, "kendo-panelbar", 128);
-    i0.ɵɵrepeaterCreate(10, ComponentStudioDashboardComponent_Conditional_50_ng_template_11_For_11_Template, 2, 2, "kendo-panelbar-item", 129, _forTrack2);
+    i0.ɵɵelementStart(8, "div", 133)(9, "kendo-panelbar", 138);
+    i0.ɵɵrepeaterCreate(10, ComponentStudioDashboardComponent_Conditional_44_ng_template_11_For_11_Template, 2, 2, "kendo-panelbar-item", 139, _forTrack2);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -681,21 +735,21 @@ function ComponentStudioDashboardComponent_Conditional_50_ng_template_11_Templat
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r2.getComponentCodeSections());
 } }
-function ComponentStudioDashboardComponent_Conditional_50_Conditional_12_Template(rf, ctx) { }
-function ComponentStudioDashboardComponent_Conditional_50_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-splitter", 17)(1, "kendo-splitter-pane", 97)(2, "div", 98);
-    i0.ɵɵtemplate(3, ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Template, 2, 1)(4, ComponentStudioDashboardComponent_Conditional_50_Conditional_4_Template, 9, 4, "div", 99);
+function ComponentStudioDashboardComponent_Conditional_44_Conditional_12_Template(rf, ctx) { }
+function ComponentStudioDashboardComponent_Conditional_44_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-splitter", 17)(1, "kendo-splitter-pane", 106)(2, "div", 107);
+    i0.ɵɵtemplate(3, ComponentStudioDashboardComponent_Conditional_44_Conditional_3_Template, 2, 1)(4, ComponentStudioDashboardComponent_Conditional_44_Conditional_4_Template, 9, 4, "div", 108);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "kendo-splitter-pane", 97)(6, "div")(7, "kendo-tabstrip", 100);
-    i0.ɵɵlistener("tabSelect", function ComponentStudioDashboardComponent_Conditional_50_Template_kendo_tabstrip_tabSelect_7_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onTabSelect($event)); });
-    i0.ɵɵelementStart(8, "kendo-tabstrip-tab", 101);
-    i0.ɵɵtemplate(9, ComponentStudioDashboardComponent_Conditional_50_ng_template_9_Template, 10, 5, "ng-template", 102);
+    i0.ɵɵelementStart(5, "kendo-splitter-pane", 106)(6, "div")(7, "kendo-tabstrip", 109);
+    i0.ɵɵlistener("tabSelect", function ComponentStudioDashboardComponent_Conditional_44_Template_kendo_tabstrip_tabSelect_7_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onTabSelect($event)); });
+    i0.ɵɵelementStart(8, "kendo-tabstrip-tab", 110);
+    i0.ɵɵtemplate(9, ComponentStudioDashboardComponent_Conditional_44_ng_template_9_Template, 10, 5, "ng-template", 111);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "kendo-tabstrip-tab", 101);
-    i0.ɵɵtemplate(11, ComponentStudioDashboardComponent_Conditional_50_ng_template_11_Template, 12, 2, "ng-template", 102);
+    i0.ɵɵelementStart(10, "kendo-tabstrip-tab", 110);
+    i0.ɵɵtemplate(11, ComponentStudioDashboardComponent_Conditional_44_ng_template_11_Template, 12, 2, "ng-template", 111);
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵtemplate(12, ComponentStudioDashboardComponent_Conditional_50_Conditional_12_Template, 0, 0);
+    i0.ɵɵtemplate(12, ComponentStudioDashboardComponent_Conditional_44_Conditional_12_Template, 0, 0);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
@@ -711,9 +765,9 @@ function ComponentStudioDashboardComponent_Conditional_50_Template(rf, ctx) { if
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(!ctx_r2.isDetailsPaneCollapsed ? 12 : -1);
 } }
-function ComponentStudioDashboardComponent_Conditional_51_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_45_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 36);
-    i0.ɵɵelement(1, "i", 132);
+    i0.ɵɵelement(1, "i", 142);
     i0.ɵɵelementStart(2, "h2");
     i0.ɵɵtext(3, "Ready to Test Components");
     i0.ɵɵelementEnd();
@@ -725,6 +779,7 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
     cdr;
     dialogService;
     viewContainerRef;
+    notificationService;
     // Component data
     components = [];
     fileLoadedComponents = []; // Components loaded from files
@@ -733,7 +788,7 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
     selectedComponent = null;
     expandedComponent = null; // Track which card is expanded
     componentSpec = null;
-    isLoading = false;
+    isLoading = true; // Start as true to show loading state initially
     searchQuery = '';
     isRunning = false; // Track if component is currently running
     // View and filtering
@@ -763,14 +818,17 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
     // Dropdown states
     importDropdownOpen = false;
     exportDropdownOpen = false;
+    // Filter panel state
+    isFilterPanelExpanded = false;
     // Text import dialog reference
     textImportDialog;
     destroy$ = new Subject();
-    constructor(cdr, dialogService, viewContainerRef) {
+    constructor(cdr, dialogService, viewContainerRef, notificationService) {
         super();
         this.cdr = cdr;
         this.dialogService = dialogService;
         this.viewContainerRef = viewContainerRef;
+        this.notificationService = notificationService;
     }
     ngAfterViewInit() {
         this.initDashboard();
@@ -889,6 +947,39 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
         this.showDeprecatedComponents = !this.showDeprecatedComponents;
         this.combineAndFilterComponents();
     }
+    /**
+     * Get count of deprecated components
+     */
+    getDeprecatedCount() {
+        return this.allComponents.filter(c => this.getComponentStatus(c) === 'Deprecated').length;
+    }
+    /**
+     * Toggle filter panel expanded/collapsed
+     */
+    ToggleFilterPanel() {
+        this.isFilterPanelExpanded = !this.isFilterPanelExpanded;
+    }
+    /**
+     * Get count of active filters
+     */
+    GetActiveFilterCount() {
+        let count = 0;
+        if (this.showOnlyFavorites)
+            count++;
+        if (this.showDeprecatedComponents)
+            count++;
+        count += this.selectedCategories.size;
+        return count;
+    }
+    /**
+     * Clear all filters
+     */
+    ClearAllFilters() {
+        this.clearCategoryFilters();
+        this.showOnlyFavorites = false;
+        this.showDeprecatedComponents = false;
+        this.combineAndFilterComponents();
+    }
     onSearchChange(query) {
         this.searchQuery = query;
         this.combineAndFilterComponents();
@@ -1269,6 +1360,55 @@ ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify
         this.closeImportDropdown();
         this.openTextImportDialog();
     }
+    async importFromArtifact() {
+        this.closeImportDropdown();
+        // Small delay to ensure dropdown is closed before opening dialog
+        await new Promise(resolve => setTimeout(resolve, 100));
+        try {
+            const dialogRef = this.dialogService.open({
+                content: ArtifactLoadDialogComponent,
+                width: 1200,
+                height: 700,
+                appendTo: this.viewContainerRef
+            });
+            const result = await dialogRef.result.toPromise();
+            if (!result) {
+                // User cancelled
+                return;
+            }
+            // Create file-loaded component from artifact
+            const artifactComponent = {
+                id: this.generateId(),
+                name: result.spec.name,
+                description: result.spec.description,
+                specification: result.spec,
+                filename: `${result.artifactName} (v${result.versionNumber})`,
+                loadedAt: new Date(),
+                isFileLoaded: true,
+                type: result.spec.type || 'Component',
+                status: 'Artifact'
+            };
+            // Store source reference for potential re-save
+            artifactComponent.sourceArtifactID = result.artifactID;
+            artifactComponent.sourceVersionID = result.versionID;
+            // Add to list
+            this.fileLoadedComponents.push(artifactComponent);
+            this.combineAndFilterComponents();
+            // Auto-select and run
+            this.expandedComponent = artifactComponent;
+            this.runComponent(artifactComponent);
+            console.log(`✅ Loaded component "${result.spec.name}" from artifact version ${result.versionNumber}`);
+            this.notificationService.CreateSimpleNotification(`Loaded component "${result.spec.name}" from artifact`, 'success', 3000);
+        }
+        catch (error) {
+            // Only show error if it's actually an error (not a cancel)
+            console.error('Error loading from artifact:', error);
+            // Check if this is a real error or just a dialog dismissal
+            if (error && error !== 'cancel' && error !== undefined) {
+                this.notificationService.CreateSimpleNotification('Failed to load component from artifact', 'error');
+            }
+        }
+    }
     openTextImportDialog() {
         this.textImportDialog = this.dialogService.open({
             content: TextImportDialogComponent,
@@ -1692,46 +1832,39 @@ ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify
         try {
             const artifact = result.artifact;
             let version;
-            let lastVersion;
             if (result.action === 'update-version' && result.versionToUpdate) {
-                // Load and update existing version
-                lastVersion = result.versionToUpdate; // set to the same version as we'll grab its Configuration to parse lower down in the code
+                // Update existing version
                 version = result.versionToUpdate;
             }
             else {
                 // Create new version
-                version = await this.metadata.GetEntityObject('MJ: Conversation Artifact Versions');
-                version.ConversationArtifactID = artifact.ID;
+                version = await this.metadata.GetEntityObject('MJ: Artifact Versions');
+                version.ArtifactID = artifact.ID;
+                version.UserID = this.metadata.CurrentUser.ID; // Required field
                 // Get next version number
                 const rv = new RunView();
                 const versionsResult = await rv.RunView({
-                    EntityName: 'MJ: Conversation Artifact Versions',
-                    ExtraFilter: `ConversationArtifactID = '${artifact.ID}'`,
-                    OrderBy: 'Version DESC',
+                    EntityName: 'MJ: Artifact Versions',
+                    ExtraFilter: `ArtifactID = '${artifact.ID}'`,
+                    OrderBy: 'VersionNumber DESC',
                     MaxRows: 1,
                     ResultType: 'entity_object'
                 });
                 if (versionsResult.Success && versionsResult.Results && versionsResult.Results.length > 0) {
-                    lastVersion = versionsResult.Results[0];
-                    version.Version = versionsResult.Results[0].Version + 1;
+                    version.VersionNumber = versionsResult.Results[0].VersionNumber + 1;
                 }
                 else {
-                    throw new Error('No previous version found');
+                    // This is the first version
+                    version.VersionNumber = 1;
                 }
             }
-            // Store the complete spec in Configuration field
-            const fullResponse = JSON.parse(lastVersion.Configuration);
-            fullResponse.componentOptions = [
-                {
-                    AIRank: 1,
-                    AIRankExplanation: "",
-                    UserRankExplanation: "",
-                    name: currentSpec.name,
-                    option: currentSpec,
-                    UserRank: 1
-                }
-            ];
-            version.Configuration = JSON.stringify(fullResponse, null, 2);
+            // Store the component spec in Content field
+            version.Content = JSON.stringify(currentSpec, null, 2);
+            // Generate SHA-256 hash for content
+            version.ContentHash = await this.generateSHA256Hash(version.Content);
+            // Set metadata
+            version.Name = currentSpec.name;
+            version.Description = currentSpec.description || null;
             // Add version comments
             const timestamp = new Date().toISOString();
             const actionText = result.action === 'update-version' ? 'Updated' : 'Created';
@@ -1739,19 +1872,29 @@ ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify
             const versionSaveResult = await version.Save();
             if (versionSaveResult) {
                 const componentName = this.getComponentName(this.selectedComponent);
-                console.log(`✅ Saved ${componentName} as artifact version ${version.Version}`);
-                MJNotificationService.Instance.CreateSimpleNotification(`${componentName} has been saved as artifact version ${version.Version}.`, 'success', 3500);
+                console.log(`✅ Saved ${componentName} as artifact version ${version.VersionNumber}`);
+                this.notificationService.CreateSimpleNotification(`Component saved as artifact version ${version.VersionNumber}`, 'success', 3000);
             }
             else {
-                console.error('Failed to save artifact version:', version.LatestResult?.Message);
-                MJNotificationService.Instance.CreateSimpleNotification('Failed to save artifact version. Check console for details.', 'error', 5000);
+                console.error('Failed to save artifact version - Full LatestResult:', version.LatestResult);
+                this.notificationService.CreateSimpleNotification('Failed to save artifact version', 'error');
             }
         }
         catch (error) {
             console.error('Error saving to artifact:', error);
-            MJNotificationService.Instance.CreateSimpleNotification('Error saving component to artifact. Check console for details.', 'error', 5000);
+            this.notificationService.CreateSimpleNotification('Error saving component to artifact', 'error');
         }
     }
+    /**
+     * Generate SHA-256 hash for content
+     */
+    async generateSHA256Hash(content) {
+        const encoder = new TextEncoder();
+        const data = encoder.encode(content);
+        const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+        const hashArray = Array.from(new Uint8Array(hashBuffer));
+        return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+    }
     /**
      * Export the current component to a file
      */
@@ -1833,7 +1976,7 @@ ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify
             alert('Failed to copy to clipboard. Please try again.');
         }
     }
-    static ɵfac = function ComponentStudioDashboardComponent_Factory(t) { return new (t || ComponentStudioDashboardComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.DialogService), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
+    static ɵfac = function ComponentStudioDashboardComponent_Factory(t) { return new (t || ComponentStudioDashboardComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.DialogService), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2.MJNotificationService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentStudioDashboardComponent, selectors: [["mj-component-studio-dashboard"]], viewQuery: function ComponentStudioDashboardComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
         } if (rf & 2) {
@@ -1841,7 +1984,7 @@ ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
         } }, hostBindings: function ComponentStudioDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_click_HostBindingHandler($event) { return ctx.onDocumentClick($event); }, false, i0.ɵɵresolveDocument);
-        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 52, vars: 24, consts: [["fileInput", ""], [1, "component-studio"], [1, "dashboard-header"], [1, "header-content"], [1, "fa-solid", "fa-puzzle-piece"], [1, "header-subtitle"], [1, "header-buttons"], ["kendoButton", "", 3, "themeColor"], [1, "import-dropdown"], ["kendoButton", "", 3, "click", "themeColor"], [1, "fa-solid", "fa-file-import"], [1, "fa-solid", "fa-chevron-down", 2, "margin-left", "5px", "font-size", "10px"], [1, "dropdown-menu"], [1, "export-dropdown", 3, "open"], ["kendoButton", "", 3, "click", "disabled"], [1, "fa-solid", "fa-sync"], ["type", "file", "accept", ".json", 2, "display", "none", 3, "change"], ["orientation", "horizontal"], [3, "min", "max", "size"], [1, "components-panel"], [1, "panel-header"], [1, "panel-header-top"], [1, "header-actions"], ["title", "Show only favorites", 1, "favorites-toggle", 3, "click"], ["title", "Toggle deprecated components", 1, "deprecated-toggle", 3, "click"], [1, "component-count"], [1, "category-filters"], [1, "filter-pills"], [1, "search-box"], ["placeholder", "Search components...", 3, "valueChange", "value", "clearButton"], ["kendoTextBoxPrefixTemplate", ""], [1, "components-list"], [1, "loading-message"], [1, "empty-message"], [3, "min"], [1, "component-display"], [1, "empty-state"], [1, "fa-solid", "fa-eye"], [1, "fa-solid", "fa-eye-slash"], [1, "dropdown-item", 3, "click"], [1, "fa-solid", "fa-file"], [1, "fa-solid", "fa-keyboard"], [1, "export-dropdown"], [1, "fa-solid", "fa-file-export"], [1, "fa-solid", "fa-save"], [1, "fa-solid", "fa-clipboard"], [1, "fa-solid", "fa-star"], [1, "fa-regular", "fa-star"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "fa-regular", "fa-exclamation-triangle"], [1, "category-pill", 3, "active", "--pill-color"], [1, "more-button"], [1, "clear-filters-button"], [1, "category-pill", 3, "click"], [1, "pill-name"], [1, "pill-count"], [1, "more-button", 3, "click"], [1, "fa-solid", "fa-chevron-up"], [1, "fa-solid", "fa-chevron-down"], [1, "clear-filters-button", 3, "click"], [1, "fa-solid", "fa-times"], [1, "fa-solid", "fa-search"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-info-circle"], [1, "component-card", 3, "expanded", "running", "file-loaded"], [1, "component-card"], [1, "card-header", 3, "click"], [1, "card-icon"], [1, "fa-solid", 3, "ngClass"], [1, "favorite-btn", 3, "is-favorite", "title"], [1, "card-info"], [1, "card-name"], [1, "file-badge", 3, "title"], [1, "card-meta"], [1, "card-type"], [1, "card-version"], [1, "status-badge", "deprecated"], [1, "status-badge", "published"], [1, "status-badge", "draft"], [1, "card-namespace"], [1, "namespace-chip", 3, "title"], [1, "fa-solid", "fa-folder-tree"], [1, "card-chevron"], [1, "card-details"], [1, "favorite-btn", 3, "click", "title"], [1, "status-badge", "text"], [1, "status-badge", "file"], [1, "detail-section"], [1, "info-grid"], [1, "info-item"], [1, "info-label"], [1, "info-value"], [1, "card-actions"], ["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-play"], [3, "size"], [1, "component-runtime"], [1, "run-empty-state"], [1, "editor-tabs", 3, "tabSelect"], [3, "title", "selected"], ["kendoTabContent", ""], [1, "error-display"], [3, "component"], [1, "error-container"], [1, "error-header"], ["title", "Copy error details", 1, "copy-button", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "error-intro"], [1, "error-details"], [1, "technical-details"], [1, "error-help"], [1, "error-actions"], ["kendoButton", "", 3, "click"], [1, "fa-solid", "fa-rotate"], [3, "componentEvent", "openEntityRecord", "component"], [1, "fa-solid", "fa-play-circle", "fa-3x"], ["kendoButton", "", 3, "click", "themeColor", "size"], [1, "tab-content", "spec-tab"], [1, "editor-header"], [1, "fa-solid", "fa-code"], [1, "editor-actions"], [1, "editor-wrapper"], [2, "height", "100%", "width", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"], [1, "fa-solid", "fa-check"], [1, "tab-content", "code-tab"], [1, "fa-solid", "fa-file-code"], [1, "code-sections"], [3, "title", "expanded"], ["kendoPanelBarContent", ""], [2, "height", "400px", "width", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"], [1, "fa-solid", "fa-rocket", "fa-3x"]], template: function ComponentStudioDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 46, vars: 22, consts: [["fileInput", ""], [1, "component-studio"], [1, "dashboard-header"], [1, "header-content"], [1, "fa-solid", "fa-puzzle-piece"], [1, "header-subtitle"], [1, "header-buttons"], ["kendoButton", "", 3, "themeColor"], [1, "import-dropdown"], ["kendoButton", "", 3, "click", "themeColor"], [1, "fa-solid", "fa-file-import"], [1, "fa-solid", "fa-chevron-down", 2, "margin-left", "5px", "font-size", "10px"], [1, "dropdown-menu"], [1, "export-dropdown", 3, "open"], ["kendoButton", "", 3, "click", "disabled"], [1, "fa-solid", "fa-sync"], ["type", "file", "accept", ".json", 2, "display", "none", 3, "change"], ["orientation", "horizontal"], [3, "min", "max", "size"], [1, "components-panel"], [1, "panel-header"], [1, "panel-header-top"], [1, "header-actions"], [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, "components-list"], [1, "loading-message"], [1, "empty-message"], [3, "min"], [1, "component-display"], [1, "empty-state"], [1, "fa-solid", "fa-eye"], [1, "fa-solid", "fa-eye-slash"], [1, "dropdown-item", 3, "click"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-file"], [1, "fa-solid", "fa-keyboard"], [1, "export-dropdown"], [1, "fa-solid", "fa-file-export"], [1, "fa-solid", "fa-save"], [1, "fa-solid", "fa-clipboard"], [1, "fa-solid", "fa-search"], [1, "filter-panel-header", 3, "click"], [1, "fa-solid", "fa-chevron-down"], [1, "filter-count-text"], [1, "filter-panel-content"], [1, "filter-section"], [1, "filter-section-label"], [1, "filter-options"], [1, "filter-checkbox"], ["type", "checkbox", 3, "change", "checked"], [1, "deprecated-count"], [1, "filter-panel-footer"], [1, "category-pills-grid"], [1, "category-pill-compact", 3, "active", "--pill-color"], [1, "show-more-categories-btn"], [1, "category-pill-compact", 3, "click"], [1, "pill-name"], [1, "pill-count"], [1, "show-more-categories-btn", 3, "click"], [1, "fa-solid", "fa-chevron-up"], [1, "clear-all-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-info-circle"], [1, "component-card", 3, "expanded", "running", "file-loaded"], [1, "component-card"], [1, "card-header", 3, "click"], [1, "card-icon"], [1, "fa-solid", 3, "ngClass"], [1, "favorite-btn", 3, "is-favorite", "title"], [1, "card-info"], [1, "card-name"], [1, "file-badge", 3, "title"], [1, "card-meta"], [1, "card-type"], [1, "card-version"], [1, "status-badge", "deprecated"], [1, "status-badge", "published"], [1, "status-badge", "draft"], [1, "card-namespace"], [1, "namespace-chip", 3, "title"], [1, "fa-solid", "fa-folder-tree"], [1, "card-chevron"], [1, "card-details"], [1, "favorite-btn", 3, "click", "title"], [1, "fa-solid", "fa-star"], [1, "fa-regular", "fa-star"], [1, "status-badge", "text"], [1, "status-badge", "file"], [1, "detail-section"], [1, "info-grid"], [1, "info-item"], [1, "info-label"], [1, "info-value"], [1, "card-actions"], ["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-play"], [3, "size"], [1, "component-runtime"], [1, "run-empty-state"], [1, "editor-tabs", 3, "tabSelect"], [3, "title", "selected"], ["kendoTabContent", ""], [1, "error-display"], [3, "component"], [1, "error-container"], [1, "error-header"], [1, "fa-solid", "fa-exclamation-triangle"], ["title", "Copy error details", 1, "copy-button", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "error-intro"], [1, "error-details"], [1, "technical-details"], [1, "error-help"], [1, "error-actions"], ["kendoButton", "", 3, "click"], [1, "fa-solid", "fa-rotate"], [3, "componentEvent", "openEntityRecord", "component"], [1, "fa-solid", "fa-play-circle", "fa-3x"], ["kendoButton", "", 3, "click", "themeColor", "size"], [1, "tab-content", "spec-tab"], [1, "editor-header"], [1, "fa-solid", "fa-code"], [1, "editor-actions"], [1, "editor-wrapper"], [2, "height", "100%", "width", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"], [1, "fa-solid", "fa-check"], [1, "tab-content", "code-tab"], [1, "fa-solid", "fa-file-code"], [1, "code-sections"], [3, "title", "expanded"], ["kendoPanelBarContent", ""], [2, "height", "400px", "width", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"], [1, "fa-solid", "fa-rocket", "fa-3x"]], template: function ComponentStudioDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "div")(4, "h1");
             i0.ɵɵelement(5, "i", 4);
@@ -1858,7 +2001,7 @@ ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify
             i0.ɵɵtext(14, " Import ");
             i0.ɵɵelement(15, "span", 11);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(16, ComponentStudioDashboardComponent_Conditional_16_Template, 7, 0, "div", 12);
+            i0.ɵɵtemplate(16, ComponentStudioDashboardComponent_Conditional_16_Template, 10, 0, "div", 12);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(17, ComponentStudioDashboardComponent_Conditional_17_Template, 6, 4, "div", 13);
             i0.ɵɵelementStart(18, "button", 14);
@@ -1869,32 +2012,25 @@ ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify
             i0.ɵɵelementStart(21, "input", 16, 0);
             i0.ɵɵlistener("change", function ComponentStudioDashboardComponent_Template_input_change_21_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleFileSelect($event)); });
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(23, "kendo-splitter", 17)(24, "kendo-splitter-pane", 18)(25, "div", 19)(26, "div", 20)(27, "div", 21)(28, "h3");
-            i0.ɵɵtext(29, "Components");
+            i0.ɵɵelementStart(23, "kendo-splitter", 17)(24, "kendo-splitter-pane", 18)(25, "div", 19)(26, "div", 20)(27, "div", 21)(28, "div", 22)(29, "button", 23);
+            i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.ToggleFilterPanel()); });
+            i0.ɵɵelement(30, "i", 24);
+            i0.ɵɵtemplate(31, ComponentStudioDashboardComponent_Conditional_31_Template, 2, 1, "span", 25);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(30, "div", 22)(31, "button", 23);
-            i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Template_button_click_31_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleShowOnlyFavorites()); });
-            i0.ɵɵtemplate(32, ComponentStudioDashboardComponent_Conditional_32_Template, 2, 0)(33, ComponentStudioDashboardComponent_Conditional_33_Template, 2, 0);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(34, "button", 24);
-            i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Template_button_click_34_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleShowDeprecatedComponents()); });
-            i0.ɵɵtemplate(35, ComponentStudioDashboardComponent_Conditional_35_Template, 2, 0)(36, ComponentStudioDashboardComponent_Conditional_36_Template, 2, 0);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(37, "span", 25);
-            i0.ɵɵtext(38);
+            i0.ɵɵelementStart(32, "span", 26);
+            i0.ɵɵtext(33);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(39, "div", 26);
-            i0.ɵɵtemplate(40, ComponentStudioDashboardComponent_Conditional_40_Template, 5, 2, "div", 27);
+            i0.ɵɵelementStart(34, "div", 27)(35, "kendo-textbox", 28);
+            i0.ɵɵlistener("valueChange", function ComponentStudioDashboardComponent_Template_kendo_textbox_valueChange_35_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSearchChange($event)); });
+            i0.ɵɵtemplate(36, ComponentStudioDashboardComponent_ng_template_36_Template, 1, 0, "ng-template", 29);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(37, ComponentStudioDashboardComponent_Conditional_37_Template, 23, 7, "div", 30);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(41, "div", 28)(42, "kendo-textbox", 29);
-            i0.ɵɵlistener("valueChange", function ComponentStudioDashboardComponent_Template_kendo_textbox_valueChange_42_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSearchChange($event)); });
-            i0.ɵɵtemplate(43, ComponentStudioDashboardComponent_ng_template_43_Template, 1, 0, "ng-template", 30);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(44, "div", 31);
-            i0.ɵɵtemplate(45, ComponentStudioDashboardComponent_Conditional_45_Template, 3, 0, "div", 32)(46, ComponentStudioDashboardComponent_Conditional_46_Template, 6, 0, "div", 33)(47, ComponentStudioDashboardComponent_Conditional_47_Template, 2, 0);
+            i0.ɵɵelementStart(38, "div", 31);
+            i0.ɵɵtemplate(39, ComponentStudioDashboardComponent_Conditional_39_Template, 3, 0, "div", 32)(40, ComponentStudioDashboardComponent_Conditional_40_Template, 6, 0, "div", 33)(41, ComponentStudioDashboardComponent_Conditional_41_Template, 2, 0);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(48, "kendo-splitter-pane", 34)(49, "div", 35);
-            i0.ɵɵtemplate(50, ComponentStudioDashboardComponent_Conditional_50_Template, 13, 8)(51, ComponentStudioDashboardComponent_Conditional_51_Template, 6, 0, "div", 36);
+            i0.ɵɵelementStart(42, "kendo-splitter-pane", 34)(43, "div", 35);
+            i0.ɵɵtemplate(44, ComponentStudioDashboardComponent_Conditional_44_Template, 13, 8)(45, ComponentStudioDashboardComponent_Conditional_45_Template, 6, 0, "div", 36);
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
             i0.ɵɵadvance(10);
@@ -1911,27 +2047,24 @@ ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify
             i0.ɵɵproperty("disabled", ctx.isLoading);
             i0.ɵɵadvance(6);
             i0.ɵɵproperty("min", "350px")("max", "650px")("size", "400px");
-            i0.ɵɵadvance(7);
-            i0.ɵɵclassProp("active", ctx.showOnlyFavorites);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showOnlyFavorites ? 32 : 33);
+            i0.ɵɵadvance(5);
+            i0.ɵɵclassProp("active", ctx.isFilterPanelExpanded || ctx.GetActiveFilterCount() > 0);
+            i0.ɵɵproperty("title", ctx.isFilterPanelExpanded ? "Hide filters" : "Show filters");
             i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("active", ctx.showDeprecatedComponents);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showDeprecatedComponents ? 35 : 36);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate2("", ctx.filteredComponents.length, " of ", ctx.allComponents.length, "");
+            i0.ɵɵconditional(ctx.GetActiveFilterCount() > 0 ? 31 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.availableCategories.length > 0 ? 40 : -1);
+            i0.ɵɵtextInterpolate2("", ctx.filteredComponents.length, " of ", ctx.allComponents.length, "");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("value", ctx.searchQuery)("clearButton", true);
-            i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.isLoading ? 45 : ctx.filteredComponents.length === 0 ? 46 : 47);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isFilterPanelExpanded ? 37 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isLoading ? 39 : ctx.filteredComponents.length === 0 ? 40 : 41);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("min", "400px");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.selectedComponent ? 50 : 51);
-        } }, dependencies: [i2.NgClass, i3.NgControlStatus, i3.NgModel, i4.TextBoxComponent, i4.TextBoxPrefixTemplateDirective, i5.PanelBarComponent, i5.PanelBarItemComponent, i5.PanelBarContentDirective, i5.SplitterComponent, i5.SplitterPaneComponent, i5.TabStripComponent, i5.TabStripTabComponent, i5.TabContentDirective, i6.CodeEditorComponent, i7.ButtonComponent, i8.MJReactComponent, i2.DatePipe], styles: ["[_nghost-%COMP%] {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.component-studio[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  background: #f8f9fa;\n  overflow: hidden;\n  position: relative;\n\n  .dashboard-header {\n    background: white;\n    border-bottom: 1px solid #dee2e6;\n    padding: 16px 24px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n    \n    .header-content {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      \n      .header-buttons {\n        display: flex;\n        gap: 8px;\n        \n        .import-dropdown, .export-dropdown {\n          position: relative;\n          \n          .dropdown-menu {\n            position: absolute;\n            top: calc(100% + 4px);\n            left: 0;\n            background: white;\n            border: 1px solid #dee2e6;\n            border-radius: 4px;\n            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n            z-index: 1000;\n            min-width: 180px;\n            \n            .dropdown-item {\n              display: flex;\n              align-items: center;\n              gap: 10px;\n              width: 100%;\n              padding: 10px 16px;\n              border: none;\n              background: none;\n              text-align: left;\n              cursor: pointer;\n              font-size: 14px;\n              color: #212529;\n              transition: background-color 0.2s;\n              \n              &:hover {\n                background-color: #f8f9fa;\n              }\n              \n              &:not(:last-child) {\n                border-bottom: 1px solid #e9ecef;\n              }\n              \n              i {\n                width: 16px;\n                text-align: center;\n                color: #6366f1;\n              }\n            }\n          }\n        }\n      }\n      \n      h1 {\n        margin: 0;\n        font-size: 24px;\n        font-weight: 600;\n        color: #212529;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        \n        i {\n          color: #6366f1;\n        }\n      }\n      \n      .header-subtitle {\n        margin: 4px 0 0 0;\n        font-size: 13px;\n        color: #6c757d;\n        font-weight: normal;\n      }\n    }\n  }\n\n  kendo-splitter {\n    flex: 1;\n    background: white;\n    display: flex;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    \n    ::ng-deep .k-pane {\n      overflow: hidden;\n      height: 100%;\n    }\n  }\n\n  .components-panel {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #f8f9fa;\n    \n    .panel-header {\n      padding: 20px;\n      background: white;\n      border-bottom: 1px solid #dee2e6;\n      \n      .panel-header-top {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 16px;\n        \n        h3 {\n          margin: 0;\n          font-size: 18px;\n          font-weight: 600;\n          color: #212529;\n        }\n        \n        .header-actions {\n          display: flex;\n          align-items: center;\n          gap: 12px;\n          \n          .favorites-toggle,\n          .deprecated-toggle {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 6px 12px;\n            border: 1px solid #dee2e6;\n            background: white;\n            border-radius: 20px;\n            font-size: 13px;\n            font-weight: 500;\n            color: #6c757d;\n            cursor: pointer;\n            transition: all 0.2s ease;\n\n            &:hover {\n              background: #f8f9fa;\n              border-color: #adb5bd;\n            }\n\n            i {\n              font-size: 14px;\n            }\n          }\n\n          .favorites-toggle.active {\n            background: #fff3cd;\n            border-color: #ffc107;\n            color: #856404;\n\n            i {\n              color: #ffc107;\n            }\n          }\n\n          .deprecated-toggle.active {\n            background: #ffe4e1;\n            border-color: #ff6b6b;\n            color: #c92a2a;\n\n            i {\n              color: #ff6b6b;\n            }\n          }\n          \n          .component-count {\n            font-size: 13px;\n            color: #6c757d;\n            background: #f8f9fa;\n            padding: 4px 10px;\n            border-radius: 12px;\n            font-weight: 500;\n          }\n        }\n      }\n      \n      .category-filters {\n        margin-bottom: 16px;\n        \n        .filter-pills {\n          display: flex;\n          flex-wrap: wrap;\n          gap: 8px;\n          \n          .category-pill {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 6px 12px;\n            border: 2px solid #e9ecef;\n            background: white;\n            border-radius: 20px;\n            font-size: 13px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            position: relative;\n            overflow: hidden;\n            \n            &:hover {\n              transform: translateY(-1px);\n              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n            }\n            \n            &.active {\n              border-color: var(--pill-color);\n              background: var(--pill-color);\n              color: white;\n              \n              .pill-count {\n                background: rgba(255, 255, 255, 0.3);\n                color: white;\n              }\n            }\n            \n            .pill-name {\n              font-weight: 500;\n            }\n            \n            .pill-count {\n              background: #f1f3f5;\n              padding: 2px 6px;\n              border-radius: 10px;\n              font-size: 11px;\n              font-weight: 600;\n              min-width: 20px;\n              text-align: center;\n            }\n          }\n          \n          .more-button,\n          .clear-filters-button {\n            padding: 6px 12px;\n            border: 1px solid #dee2e6;\n            background: white;\n            border-radius: 20px;\n            font-size: 13px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            color: #6c757d;\n            \n            &:hover {\n              background: #f8f9fa;\n              border-color: #adb5bd;\n            }\n            \n            i {\n              font-size: 11px;\n              margin-right: 4px;\n            }\n          }\n          \n          .clear-filters-button {\n            background: #fee2e2;\n            border-color: #fca5a5;\n            color: #dc2626;\n            \n            &:hover {\n              background: #fca5a5;\n              color: white;\n            }\n          }\n        }\n      }\n      \n      .search-box {\n        kendo-textbox {\n          width: 100%;\n        }\n      }\n    }\n    \n    .components-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 16px;\n      \n      .loading-message,\n      .empty-message {\n        padding: 48px 24px;\n        text-align: center;\n        color: #6c757d;\n        font-size: 14px;\n        \n        i {\n          margin-right: 8px;\n        }\n      }\n      \n      .component-card {\n        background: white;\n        border: 1px solid #dee2e6;\n        border-radius: 8px;\n        margin-bottom: 12px;\n        transition: all 0.2s ease;\n        \n        &:hover {\n          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n        }\n        \n        &.expanded {\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n          border-color: #6366f1;\n        }\n        \n        &.running {\n          border-color: #10b981;\n          box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n          background: linear-gradient(to right, rgba(16, 185, 129, 0.03) 0%, white 100%);\n          \n          .card-header {\n            &::before {\n              content: '';\n              position: absolute;\n              left: 0;\n              top: 0;\n              bottom: 0;\n              width: 4px;\n              background: #10b981;\n            }\n          }\n        }\n        \n        &.file-loaded {\n          background: linear-gradient(135deg, #f0f8ff 0%, white 100%);\n          border-style: dashed;\n          border-color: #3b82f6;\n          \n          &:hover {\n            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);\n          }\n          \n          &.expanded {\n            border-style: solid;\n            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);\n          }\n        }\n        \n        .card-header {\n          display: flex;\n          align-items: center;\n          padding: 16px;\n          cursor: pointer;\n          user-select: none;\n          position: relative;\n          \n          &:hover {\n            background: #f8f9fa;\n          }\n          \n          .card-icon {\n            font-size: 24px;\n            margin-right: 16px;\n            width: 32px;\n            text-align: center;\n            flex-shrink: 0;\n          }\n          \n          .favorite-btn {\n            position: absolute;\n            top: 12px;\n            right: 48px; // Leave room for chevron\n            background: white;\n            border: 1px solid #dee2e6;\n            border-radius: 50%;\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            color: #6c757d;\n            \n            &:hover {\n              background: #f8f9fa;\n              transform: scale(1.1);\n            }\n            \n            &.is-favorite {\n              color: #ffc107;\n              border-color: #ffc107;\n              background: #fff3cd;\n              \n              &:hover {\n                background: #ffe69c;\n              }\n            }\n            \n            i {\n              font-size: 14px;\n            }\n          }\n          \n          .card-info {\n            flex: 1;\n            min-width: 0;\n            \n            .card-name {\n              font-size: 15px;\n              font-weight: 600;\n              color: #212529;\n              margin-bottom: 4px;\n              white-space: nowrap;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              display: flex;\n              align-items: center;\n              gap: 8px;\n              \n              .file-badge {\n                display: inline-flex;\n                align-items: center;\n                gap: 4px;\n                padding: 2px 6px;\n                background: #e0f2fe;\n                color: #0369a1;\n                border-radius: 4px;\n                font-size: 11px;\n                font-weight: 500;\n                flex-shrink: 0;\n                \n                i {\n                  font-size: 10px;\n                }\n              }\n            }\n            \n            .card-meta {\n              display: flex;\n              align-items: center;\n              gap: 8px;\n              font-size: 12px;\n              color: #6c757d;\n              \n              .card-type {\n                font-weight: 500;\n              }\n              \n              .card-version {\n                color: #868e96;\n              }\n              \n              .status-badge {\n                padding: 2px 6px;\n                border-radius: 10px;\n                font-size: 10px;\n                font-weight: 600;\n                text-transform: uppercase;\n                letter-spacing: 0.3px;\n                \n                &.published {\n                  background: #d1fae5;\n                  color: #065f46;\n                }\n                \n                &.draft {\n                  background: #fef3c7;\n                  color: #92400e;\n                }\n\n                &.deprecated {\n                  background: #ffe4e1;\n                  color: #c92a2a;\n                  border: 1px solid #ff6b6b;\n                }\n\n                &.file {\n                  background: #e0f2fe;\n                  color: #0369a1;\n                }\n                \n                &.text {\n                  background: #f3e8ff;\n                  color: #6b21a8;\n                }\n              }\n            }\n            \n            .card-namespace {\n              margin-top: 8px;\n              \n              .namespace-chip {\n                display: inline-flex;\n                align-items: center;\n                gap: 6px;\n                padding: 4px 10px;\n                border-radius: 16px;\n                font-size: 12px;\n                font-weight: 500;\n                color: white;\n                \n                i {\n                  font-size: 11px;\n                  opacity: 0.9;\n                }\n              }\n            }\n          }\n          \n          .card-chevron {\n            color: #6c757d;\n            font-size: 12px;\n            margin-left: 12px;\n            transition: transform 0.2s ease;\n          }\n        }\n        \n        .card-details {\n          padding: 0 16px 16px 16px;\n          border-top: 1px solid #e9ecef;\n          animation: slideDown 0.2s ease;\n          \n          .detail-section {\n            margin-top: 16px;\n            \n            label {\n              display: block;\n              font-size: 11px;\n              font-weight: 600;\n              color: #6c757d;\n              text-transform: uppercase;\n              letter-spacing: 0.5px;\n              margin-bottom: 8px;\n            }\n            \n            p {\n              margin: 0;\n              font-size: 13px;\n              color: #495057;\n              line-height: 1.5;\n            }\n            \n            .info-grid {\n              display: grid;\n              grid-template-columns: 1fr 1fr;\n              gap: 8px;\n              \n              .info-item {\n                display: flex;\n                align-items: baseline;\n                gap: 6px;\n                font-size: 13px;\n                \n                .info-label {\n                  font-weight: 500;\n                  color: #6c757d;\n                  min-width: 50px;\n                }\n                \n                .info-value {\n                  color: #212529;\n                }\n              }\n            }\n          }\n          \n          .card-actions {\n            margin-top: 16px;\n            display: flex;\n            gap: 8px;\n            \n            button {\n              flex: 1;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  .component-display {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: white;\n    position: relative;\n    overflow: hidden;\n    \n    .empty-state {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      color: #868e96;\n      padding: 48px;\n      text-align: center;\n      \n      i {\n        color: #dee2e6;\n        margin-bottom: 24px;\n      }\n      \n      h2 {\n        margin: 0 0 12px 0;\n        font-size: 24px;\n        font-weight: 600;\n        color: #495057;\n      }\n      \n      p {\n        margin: 0;\n        font-size: 14px;\n        max-width: 400px;\n      }\n    }\n    \n    .error-display {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 24px;\n      background: #f8f9fa;\n      \n      .error-container {\n        width: 100%;\n        max-width: 600px;\n        background: white;\n        border: 2px solid #dc3545;\n        border-radius: 8px;\n        padding: 24px;\n        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15);\n        \n        .error-header {\n          display: flex;\n          align-items: center;\n          gap: 12px;\n          margin-bottom: 20px;\n          color: #dc3545;\n          position: relative;\n          \n          i {\n            font-size: 24px;\n          }\n          \n          h3 {\n            margin: 0;\n            font-size: 20px;\n            flex: 1;\n          }\n          \n          .copy-button {\n            background: white;\n            border: 1px solid #dee2e6;\n            border-radius: 4px;\n            padding: 6px 10px;\n            cursor: pointer;\n            color: #6c757d;\n            transition: all 0.2s;\n            \n            &:hover {\n              background: #e9ecef;\n              color: #495057;\n            }\n            \n            i {\n              font-size: 14px;\n            }\n          }\n        }\n        \n        .error-intro {\n          color: #495057;\n          margin-bottom: 20px;\n          font-size: 14px;\n        }\n        \n        .error-details {\n          background: #f8f9fa;\n          border: 1px solid #dee2e6;\n          border-radius: 4px;\n          padding: 16px;\n          margin-bottom: 20px;\n          font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n          font-size: 13px;\n          \n          .technical-details {\n            margin-top: 12px;\n            \n            summary {\n              cursor: pointer;\n              color: #0066cc;\n              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n              \n              &:hover {\n                text-decoration: underline;\n              }\n            }\n            \n            pre {\n              margin-top: 8px;\n              white-space: pre-wrap;\n              word-break: break-word;\n              font-size: 11px;\n              color: #495057;\n              max-height: 200px;\n              overflow-y: auto;\n            }\n          }\n        }\n        \n        .error-help {\n          background: #e7f3ff;\n          border: 1px solid #b3d9ff;\n          border-radius: 4px;\n          padding: 16px;\n          margin-bottom: 20px;\n          font-size: 13px;\n          \n          strong {\n            display: block;\n            margin-bottom: 8px;\n            font-size: 14px;\n            color: #0066cc;\n          }\n          \n          ol {\n            margin: 0;\n            padding-left: 20px;\n            \n            li {\n              margin-bottom: 4px;\n              color: #495057;\n            }\n          }\n        }\n        \n        .error-actions {\n          display: flex;\n          gap: 12px;\n          \n          button {\n            min-width: 100px;\n          }\n        }\n      }\n    }\n    \n    mj-react-component {\n      flex: 1;\n      width: 100%;\n      height: 100%;\n      display: block;\n      overflow-y: auto;\n      overflow-x: hidden;\n    }\n    \n    // Component and editor splitter\n    .component-editor-splitter {\n      height: 100%;\n      overflow: hidden;\n      \n      ::ng-deep .k-splitter-bar {\n        background: #6366f1;  // Same blue as Import button\n        width: 6px;  // Make it slightly wider for visibility\n        \n        &:hover {\n          background: #4f52d9;  // Darker blue on hover\n        }\n        \n        .k-resize-handle {\n          background-color: rgba(255, 255, 255, 0.3);\n        }\n      }\n      \n      ::ng-deep .k-pane {\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n      }\n    }\n    \n    // Component runtime area\n    .component-runtime {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: white;\n      position: relative;\n      overflow-y: auto;\n      overflow-x: hidden;\n      \n      .run-empty-state {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        padding: 48px;\n        text-align: center;\n        \n        i {\n          color: #10b981;\n          margin-bottom: 24px;\n        }\n        \n        h3 {\n          margin: 0 0 12px 0;\n          font-size: 20px;\n          font-weight: 600;\n          color: #212529;\n        }\n        \n        p {\n          margin: 0 0 24px 0;\n          font-size: 14px;\n          color: #6c757d;\n          max-width: 400px;\n        }\n      }\n    }\n    \n    // Editor tabs on the right\n    .editor-tabs {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      \n      ::ng-deep .k-tabstrip-items-wrapper {\n        background: #f8f9fa;\n        border-bottom: 2px solid #dee2e6;\n        flex-shrink: 0;\n      }\n      \n      ::ng-deep .k-tabstrip-content {\n        flex: 1;\n        padding: 0;\n        overflow: hidden;\n        min-height: 0;\n        display: flex;\n        flex-direction: column;\n      }\n      \n      ::ng-deep .k-item.k-tabstrip-item {\n        font-weight: 500;\n        \n        &.k-active {\n          background: white;\n          border-bottom-color: white;\n        }\n      }\n    }\n    \n    .tab-content {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      \n      &.spec-tab, &.code-tab {\n        height: 100%;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        \n        .editor-header {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          padding: 12px 16px;\n          background: #f8f9fa;\n          border-bottom: 1px solid #dee2e6;\n          flex-shrink: 0;\n          min-width: 0;  // Fix width issue\n          \n          h4 {\n            margin: 0;\n            font-size: 14px;\n            font-weight: 600;\n            color: #495057;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            flex-shrink: 1;  // Allow title to shrink\n            min-width: 0;  // Prevent overflow\n            \n            i {\n              color: #6366f1;\n              flex-shrink: 0;  // Keep icon from shrinking\n            }\n          }\n          \n          .editor-actions {\n            display: flex;\n            gap: 8px;\n            flex-shrink: 0;  // Prevent buttons from shrinking\n            \n            button {\n              min-width: auto;\n              padding: 4px 12px;\n              font-size: 13px;\n              white-space: nowrap;  // Prevent button text wrapping\n            }\n          }\n        }\n        \n        .editor-wrapper {\n          flex: 1;\n          overflow-y: auto;\n          overflow-x: hidden;\n          min-height: 0;\n          position: relative;\n        }\n        \n        ::ng-deep .monaco-editor {\n          border: 1px solid #dee2e6;\n        }\n      }\n      \n      .code-sections {\n        height: 100%;\n        \n        ::ng-deep .k-panelbar-item-header {\n          background: #f8f9fa;\n          font-weight: 500;\n          font-size: 14px;\n        }\n        \n        ::ng-deep .k-panelbar-content {\n          padding: 0;\n        }\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Removed[_ngcontent-%COMP%]   tree[_ngcontent-%COMP%]   view[_ngcontent-%COMP%]   styles[_ngcontent-%COMP%]   -[_ngcontent-%COMP%]   using[_ngcontent-%COMP%]   modern[_ngcontent-%COMP%]   category[_ngcontent-%COMP%]   filters[_ngcontent-%COMP%]   instead\n\n@keyframes[_ngcontent-%COMP%]   slideDown[_ngcontent-%COMP%] {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}"] });
+            i0.ɵɵconditional(ctx.selectedComponent ? 44 : 45);
+        } }, dependencies: [i3.NgClass, i4.NgControlStatus, i4.NgModel, i5.TextBoxComponent, i5.TextBoxPrefixTemplateDirective, i6.PanelBarComponent, i6.PanelBarItemComponent, i6.PanelBarContentDirective, i6.SplitterComponent, i6.SplitterPaneComponent, i6.TabStripComponent, i6.TabStripTabComponent, i6.TabContentDirective, i7.CodeEditorComponent, i8.ButtonComponent, i9.MJReactComponent, i3.DatePipe], styles: ["[_nghost-%COMP%] {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.component-studio[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  background: #f8f9fa;\n  overflow: hidden;\n  position: relative;\n\n  .dashboard-header {\n    background: white;\n    border-bottom: 1px solid #dee2e6;\n    padding: 16px 24px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n    \n    .header-content {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      \n      .header-buttons {\n        display: flex;\n        gap: 8px;\n        \n        .import-dropdown, .export-dropdown {\n          position: relative;\n          \n          .dropdown-menu {\n            position: absolute;\n            top: calc(100% + 4px);\n            left: 0;\n            background: white;\n            border: 1px solid #dee2e6;\n            border-radius: 4px;\n            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n            z-index: 1000;\n            min-width: 180px;\n            \n            .dropdown-item {\n              display: flex;\n              align-items: center;\n              gap: 10px;\n              width: 100%;\n              padding: 10px 16px;\n              border: none;\n              background: none;\n              text-align: left;\n              cursor: pointer;\n              font-size: 14px;\n              color: #212529;\n              transition: background-color 0.2s;\n              \n              &:hover {\n                background-color: #f8f9fa;\n              }\n              \n              &:not(:last-child) {\n                border-bottom: 1px solid #e9ecef;\n              }\n              \n              i {\n                width: 16px;\n                text-align: center;\n                color: #6366f1;\n              }\n            }\n          }\n        }\n      }\n      \n      h1 {\n        margin: 0;\n        font-size: 24px;\n        font-weight: 600;\n        color: #212529;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        \n        i {\n          color: #6366f1;\n        }\n      }\n      \n      .header-subtitle {\n        margin: 4px 0 0 0;\n        font-size: 13px;\n        color: #6c757d;\n        font-weight: normal;\n      }\n    }\n  }\n\n  kendo-splitter {\n    flex: 1;\n    background: white;\n    display: flex;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    \n    ::ng-deep .k-pane {\n      overflow: hidden;\n      height: 100%;\n    }\n  }\n\n  .components-panel {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #f8f9fa;\n    \n    .panel-header {\n      padding: 20px;\n      background: white;\n      border-bottom: 1px solid #dee2e6;\n      \n      .panel-header-top {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 12px;\n\n        .header-actions {\n          display: flex;\n          align-items: center;\n          gap: 10px;\n          width: 100%;\n          \n          .favorites-toggle,\n          .deprecated-toggle {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 6px 12px;\n            border: 1px solid #dee2e6;\n            background: white;\n            border-radius: 20px;\n            font-size: 13px;\n            font-weight: 500;\n            color: #6c757d;\n            cursor: pointer;\n            transition: all 0.2s ease;\n\n            &:hover {\n              background: #f8f9fa;\n              border-color: #adb5bd;\n            }\n\n            i {\n              font-size: 14px;\n            }\n          }\n\n          .favorites-toggle.active {\n            background: #fff3cd;\n            border-color: #ffc107;\n            color: #856404;\n\n            i {\n              color: #ffc107;\n            }\n          }\n\n          .deprecated-toggle.active {\n            background: #ffe4e1;\n            border-color: #ff6b6b;\n            color: #c92a2a;\n\n            i {\n              color: #ff6b6b;\n            }\n          }\n\n          .count-badge {\n            margin-left: 4px;\n            background: #f59e0b;\n            color: white;\n            padding: 2px 6px;\n            border-radius: 10px;\n            font-size: 11px;\n            font-weight: 600;\n            line-height: 1;\n          }\n\n          .deprecated-toggle.active .count-badge {\n            background: #ff6b6b;\n          }\n\n          .component-count {\n            font-size: 13px;\n            color: #6c757d;\n            background: #f8f9fa;\n            padding: 4px 10px;\n            border-radius: 12px;\n            font-weight: 500;\n          }\n        }\n      }\n      \n      .category-filters {\n        margin-bottom: 16px;\n        \n        .filter-pills {\n          display: flex;\n          flex-wrap: wrap;\n          gap: 8px;\n          \n          .category-pill {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 6px 12px;\n            border: 2px solid #e9ecef;\n            background: white;\n            border-radius: 20px;\n            font-size: 13px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            position: relative;\n            overflow: hidden;\n            \n            &:hover {\n              transform: translateY(-1px);\n              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n            }\n            \n            &.active {\n              border-color: var(--pill-color);\n              background: var(--pill-color);\n              color: white;\n              \n              .pill-count {\n                background: rgba(255, 255, 255, 0.3);\n                color: white;\n              }\n            }\n            \n            .pill-name {\n              font-weight: 500;\n            }\n            \n            .pill-count {\n              background: #f1f3f5;\n              padding: 2px 6px;\n              border-radius: 10px;\n              font-size: 11px;\n              font-weight: 600;\n              min-width: 20px;\n              text-align: center;\n            }\n          }\n          \n          .more-button,\n          .clear-filters-button {\n            padding: 6px 12px;\n            border: 1px solid #dee2e6;\n            background: white;\n            border-radius: 20px;\n            font-size: 13px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            color: #6c757d;\n            \n            &:hover {\n              background: #f8f9fa;\n              border-color: #adb5bd;\n            }\n            \n            i {\n              font-size: 11px;\n              margin-right: 4px;\n            }\n          }\n          \n          .clear-filters-button {\n            background: #fee2e2;\n            border-color: #fca5a5;\n            color: #dc2626;\n            \n            &:hover {\n              background: #fca5a5;\n              color: white;\n            }\n          }\n        }\n      }\n      \n      .search-box {\n        margin-bottom: 12px;\n\n        kendo-textbox {\n          width: 100%;\n        }\n\n        // Reduce search input font size\n        ::ng-deep .k-input-inner {\n          font-size: 13px;\n        }\n      }\n\n      // New filter toggle button\n      .filter-toggle-btn {\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 6px 10px;\n        border: 1px solid #ced4da;\n        background: white;\n        border-radius: 4px;\n        font-size: 13px;\n        color: #495057;\n        cursor: pointer;\n        transition: all 0.2s ease;\n\n        &:hover {\n          background: #e9ecef;\n          border-color: #adb5bd;\n        }\n\n        &.active {\n          background: #e7f3ff;\n          border-color: #1e40af;\n          color: #1e40af;\n        }\n\n        i {\n          font-size: 13px;\n        }\n\n        .filter-count-badge {\n          position: absolute;\n          top: -6px;\n          right: -6px;\n          background: #1e40af;\n          color: white;\n          padding: 2px 6px;\n          border-radius: 10px;\n          font-size: 10px;\n          font-weight: 600;\n          line-height: 1;\n          min-width: 18px;\n          text-align: center;\n        }\n      }\n\n      // Collapsible filter panel\n      .filter-panel {\n        background: #f8f9fa;\n        border: 1px solid #dee2e6;\n        border-radius: 8px;\n        margin-bottom: 12px;\n        overflow: hidden;\n        animation: slideDown 0.2s ease;\n      }\n\n      @keyframes slideDown {\n        from {\n          opacity: 0;\n          transform: translateY(-10px);\n        }\n        to {\n          opacity: 1;\n          transform: translateY(0);\n        }\n      }\n\n      .filter-panel-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 8px 12px;\n        background: #e9ecef;\n        cursor: pointer;\n        font-weight: 600;\n        font-size: 12px;\n        color: #495057;\n        user-select: none;\n\n        &:hover {\n          background: #dee2e6;\n        }\n\n        i {\n          margin-right: 4px;\n          font-size: 10px;\n        }\n\n        .filter-count-text {\n          font-size: 11px;\n          font-weight: 500;\n          color: #6c757d;\n        }\n      }\n\n      .filter-panel-content {\n        padding: 14px;\n      }\n\n      .filter-section {\n        margin-bottom: 16px;\n\n        &:last-child {\n          margin-bottom: 0;\n        }\n\n        .filter-section-label {\n          display: block;\n          font-size: 12px;\n          font-weight: 600;\n          color: #495057;\n          margin-bottom: 8px;\n          text-transform: uppercase;\n          letter-spacing: 0.5px;\n        }\n\n        .filter-options {\n          display: flex;\n          flex-direction: column;\n          gap: 8px;\n        }\n\n        .filter-checkbox {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          cursor: pointer;\n          font-size: 13px;\n          color: #212529;\n          padding: 6px 0;\n\n          input[type=\"checkbox\"] {\n            width: 16px;\n            height: 16px;\n            cursor: pointer;\n          }\n\n          span {\n            user-select: none;\n          }\n\n          .deprecated-count {\n            color: #6c757d;\n            font-size: 12px;\n            margin-left: 4px;\n          }\n        }\n\n        .category-pills-grid {\n          display: flex;\n          flex-wrap: wrap;\n          gap: 6px;\n        }\n\n        .category-pill-compact {\n          display: inline-flex;\n          align-items: center;\n          gap: 4px;\n          padding: 5px 10px;\n          border: 2px solid #e9ecef;\n          background: white;\n          border-radius: 16px;\n          font-size: 12px;\n          font-weight: 500;\n          color: #495057;\n          cursor: pointer;\n          transition: all 0.15s ease;\n\n          &:hover {\n            border-color: #adb5bd;\n            transform: translateY(-1px);\n          }\n\n          &.active {\n            border-color: var(--pill-color, #6366f1);\n            background: var(--pill-color, #6366f1);\n            color: white;\n          }\n\n          .pill-name {\n            font-weight: 500;\n          }\n\n          .pill-count {\n            font-size: 11px;\n            opacity: 0.8;\n          }\n        }\n\n        .show-more-categories-btn {\n          padding: 5px 10px;\n          border: 1px dashed #dee2e6;\n          background: white;\n          border-radius: 16px;\n          font-size: 12px;\n          color: #6c757d;\n          cursor: pointer;\n          transition: all 0.15s ease;\n\n          &:hover {\n            background: #f8f9fa;\n            border-color: #adb5bd;\n          }\n\n          i {\n            margin-right: 4px;\n            font-size: 10px;\n          }\n        }\n      }\n\n      .filter-panel-footer {\n        margin-top: 12px;\n        padding-top: 12px;\n        border-top: 1px solid #dee2e6;\n\n        .clear-all-btn {\n          width: 100%;\n          padding: 8px;\n          border: 1px solid #dc3545;\n          background: white;\n          border-radius: 6px;\n          font-size: 13px;\n          font-weight: 500;\n          color: #dc3545;\n          cursor: pointer;\n          transition: all 0.15s ease;\n\n          &:hover {\n            background: #dc3545;\n            color: white;\n          }\n\n          i {\n            margin-right: 6px;\n          }\n        }\n      }\n    }\n\n    .components-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 16px;\n      \n      .loading-message,\n      .empty-message {\n        padding: 48px 24px;\n        text-align: center;\n        color: #6c757d;\n        font-size: 14px;\n        \n        i {\n          margin-right: 8px;\n        }\n      }\n      \n      .component-card {\n        background: white;\n        border: 1px solid #dee2e6;\n        border-radius: 8px;\n        margin-bottom: 12px;\n        transition: all 0.2s ease;\n        \n        &:hover {\n          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n        }\n        \n        &.expanded {\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n          border-color: #6366f1;\n        }\n        \n        &.running {\n          border-color: #10b981;\n          box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n          background: linear-gradient(to right, rgba(16, 185, 129, 0.03) 0%, white 100%);\n          \n          .card-header {\n            &::before {\n              content: '';\n              position: absolute;\n              left: 0;\n              top: 0;\n              bottom: 0;\n              width: 4px;\n              background: #10b981;\n            }\n          }\n        }\n        \n        &.file-loaded {\n          background: linear-gradient(135deg, #f0f8ff 0%, white 100%);\n          border-style: dashed;\n          border-color: #3b82f6;\n          \n          &:hover {\n            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);\n          }\n          \n          &.expanded {\n            border-style: solid;\n            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);\n          }\n        }\n        \n        .card-header {\n          display: flex;\n          align-items: center;\n          padding: 16px;\n          cursor: pointer;\n          user-select: none;\n          position: relative;\n          \n          &:hover {\n            background: #f8f9fa;\n          }\n          \n          .card-icon {\n            font-size: 24px;\n            margin-right: 16px;\n            width: 32px;\n            text-align: center;\n            flex-shrink: 0;\n          }\n          \n          .favorite-btn {\n            position: absolute;\n            top: 12px;\n            right: 48px; // Leave room for chevron\n            background: white;\n            border: 1px solid #dee2e6;\n            border-radius: 50%;\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            color: #6c757d;\n            \n            &:hover {\n              background: #f8f9fa;\n              transform: scale(1.1);\n            }\n            \n            &.is-favorite {\n              color: #ffc107;\n              border-color: #ffc107;\n              background: #fff3cd;\n              \n              &:hover {\n                background: #ffe69c;\n              }\n            }\n            \n            i {\n              font-size: 14px;\n            }\n          }\n          \n          .card-info {\n            flex: 1;\n            min-width: 0;\n            \n            .card-name {\n              font-size: 15px;\n              font-weight: 600;\n              color: #212529;\n              margin-bottom: 4px;\n              white-space: nowrap;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              display: flex;\n              align-items: center;\n              gap: 8px;\n              \n              .file-badge {\n                display: inline-flex;\n                align-items: center;\n                gap: 4px;\n                padding: 2px 6px;\n                background: #e0f2fe;\n                color: #0369a1;\n                border-radius: 4px;\n                font-size: 11px;\n                font-weight: 500;\n                flex-shrink: 0;\n                \n                i {\n                  font-size: 10px;\n                }\n              }\n            }\n            \n            .card-meta {\n              display: flex;\n              align-items: center;\n              gap: 8px;\n              font-size: 12px;\n              color: #6c757d;\n              \n              .card-type {\n                font-weight: 500;\n              }\n              \n              .card-version {\n                color: #868e96;\n              }\n              \n              .status-badge {\n                padding: 2px 6px;\n                border-radius: 10px;\n                font-size: 10px;\n                font-weight: 600;\n                text-transform: uppercase;\n                letter-spacing: 0.3px;\n                \n                &.published {\n                  background: #d1fae5;\n                  color: #065f46;\n                }\n                \n                &.draft {\n                  background: #fef3c7;\n                  color: #92400e;\n                }\n\n                &.deprecated {\n                  background: #ffe4e1;\n                  color: #c92a2a;\n                  border: 1px solid #ff6b6b;\n                }\n\n                &.file {\n                  background: #e0f2fe;\n                  color: #0369a1;\n                }\n                \n                &.text {\n                  background: #f3e8ff;\n                  color: #6b21a8;\n                }\n              }\n            }\n            \n            .card-namespace {\n              margin-top: 8px;\n              \n              .namespace-chip {\n                display: inline-flex;\n                align-items: center;\n                gap: 6px;\n                padding: 4px 10px;\n                border-radius: 16px;\n                font-size: 12px;\n                font-weight: 500;\n                color: white;\n                \n                i {\n                  font-size: 11px;\n                  opacity: 0.9;\n                }\n              }\n            }\n          }\n          \n          .card-chevron {\n            color: #6c757d;\n            font-size: 12px;\n            margin-left: 12px;\n            transition: transform 0.2s ease;\n          }\n        }\n        \n        .card-details {\n          padding: 0 16px 16px 16px;\n          border-top: 1px solid #e9ecef;\n          animation: slideDown 0.2s ease;\n          \n          .detail-section {\n            margin-top: 16px;\n            \n            label {\n              display: block;\n              font-size: 11px;\n              font-weight: 600;\n              color: #6c757d;\n              text-transform: uppercase;\n              letter-spacing: 0.5px;\n              margin-bottom: 8px;\n            }\n            \n            p {\n              margin: 0;\n              font-size: 13px;\n              color: #495057;\n              line-height: 1.5;\n            }\n            \n            .info-grid {\n              display: grid;\n              grid-template-columns: 1fr 1fr;\n              gap: 8px;\n              \n              .info-item {\n                display: flex;\n                align-items: baseline;\n                gap: 6px;\n                font-size: 13px;\n                \n                .info-label {\n                  font-weight: 500;\n                  color: #6c757d;\n                  min-width: 50px;\n                }\n                \n                .info-value {\n                  color: #212529;\n                }\n              }\n            }\n          }\n          \n          .card-actions {\n            margin-top: 16px;\n            display: flex;\n            gap: 8px;\n            \n            button {\n              flex: 1;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  .component-display {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: white;\n    position: relative;\n    overflow: hidden;\n    \n    .empty-state {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      color: #868e96;\n      padding: 48px;\n      text-align: center;\n      \n      i {\n        color: #dee2e6;\n        margin-bottom: 24px;\n      }\n      \n      h2 {\n        margin: 0 0 12px 0;\n        font-size: 24px;\n        font-weight: 600;\n        color: #495057;\n      }\n      \n      p {\n        margin: 0;\n        font-size: 14px;\n        max-width: 400px;\n      }\n    }\n    \n    .error-display {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 24px;\n      background: #f8f9fa;\n      \n      .error-container {\n        width: 100%;\n        max-width: 600px;\n        background: white;\n        border: 2px solid #dc3545;\n        border-radius: 8px;\n        padding: 24px;\n        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15);\n        \n        .error-header {\n          display: flex;\n          align-items: center;\n          gap: 12px;\n          margin-bottom: 20px;\n          color: #dc3545;\n          position: relative;\n          \n          i {\n            font-size: 24px;\n          }\n          \n          h3 {\n            margin: 0;\n            font-size: 20px;\n            flex: 1;\n          }\n          \n          .copy-button {\n            background: white;\n            border: 1px solid #dee2e6;\n            border-radius: 4px;\n            padding: 6px 10px;\n            cursor: pointer;\n            color: #6c757d;\n            transition: all 0.2s;\n            \n            &:hover {\n              background: #e9ecef;\n              color: #495057;\n            }\n            \n            i {\n              font-size: 14px;\n            }\n          }\n        }\n        \n        .error-intro {\n          color: #495057;\n          margin-bottom: 20px;\n          font-size: 14px;\n        }\n        \n        .error-details {\n          background: #f8f9fa;\n          border: 1px solid #dee2e6;\n          border-radius: 4px;\n          padding: 16px;\n          margin-bottom: 20px;\n          font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n          font-size: 13px;\n          \n          .technical-details {\n            margin-top: 12px;\n            \n            summary {\n              cursor: pointer;\n              color: #0066cc;\n              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n              \n              &:hover {\n                text-decoration: underline;\n              }\n            }\n            \n            pre {\n              margin-top: 8px;\n              white-space: pre-wrap;\n              word-break: break-word;\n              font-size: 11px;\n              color: #495057;\n              max-height: 200px;\n              overflow-y: auto;\n            }\n          }\n        }\n        \n        .error-help {\n          background: #e7f3ff;\n          border: 1px solid #b3d9ff;\n          border-radius: 4px;\n          padding: 16px;\n          margin-bottom: 20px;\n          font-size: 13px;\n          \n          strong {\n            display: block;\n            margin-bottom: 8px;\n            font-size: 14px;\n            color: #0066cc;\n          }\n          \n          ol {\n            margin: 0;\n            padding-left: 20px;\n            \n            li {\n              margin-bottom: 4px;\n              color: #495057;\n            }\n          }\n        }\n        \n        .error-actions {\n          display: flex;\n          gap: 12px;\n          \n          button {\n            min-width: 100px;\n          }\n        }\n      }\n    }\n    \n    mj-react-component {\n      flex: 1;\n      width: 100%;\n      height: 100%;\n      display: block;\n      overflow-y: auto;\n      overflow-x: hidden;\n    }\n    \n    // Component and editor splitter\n    .component-editor-splitter {\n      height: 100%;\n      overflow: hidden;\n      \n      ::ng-deep .k-splitter-bar {\n        background: #6366f1;  // Same blue as Import button\n        width: 6px;  // Make it slightly wider for visibility\n        \n        &:hover {\n          background: #4f52d9;  // Darker blue on hover\n        }\n        \n        .k-resize-handle {\n          background-color: rgba(255, 255, 255, 0.3);\n        }\n      }\n      \n      ::ng-deep .k-pane {\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n      }\n    }\n    \n    // Component runtime area\n    .component-runtime {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: white;\n      position: relative;\n      overflow-y: auto;\n      overflow-x: hidden;\n      \n      .run-empty-state {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        padding: 48px;\n        text-align: center;\n        \n        i {\n          color: #10b981;\n          margin-bottom: 24px;\n        }\n        \n        h3 {\n          margin: 0 0 12px 0;\n          font-size: 20px;\n          font-weight: 600;\n          color: #212529;\n        }\n        \n        p {\n          margin: 0 0 24px 0;\n          font-size: 14px;\n          color: #6c757d;\n          max-width: 400px;\n        }\n      }\n    }\n    \n    // Editor tabs on the right\n    .editor-tabs {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      \n      ::ng-deep .k-tabstrip-items-wrapper {\n        background: #f8f9fa;\n        border-bottom: 2px solid #dee2e6;\n        flex-shrink: 0;\n      }\n      \n      ::ng-deep .k-tabstrip-content {\n        flex: 1;\n        padding: 0;\n        overflow: hidden;\n        min-height: 0;\n        display: flex;\n        flex-direction: column;\n      }\n      \n      ::ng-deep .k-item.k-tabstrip-item {\n        font-weight: 500;\n        \n        &.k-active {\n          background: white;\n          border-bottom-color: white;\n        }\n      }\n    }\n    \n    .tab-content {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      \n      &.spec-tab, &.code-tab {\n        height: 100%;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        \n        .editor-header {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          padding: 12px 16px;\n          background: #f8f9fa;\n          border-bottom: 1px solid #dee2e6;\n          flex-shrink: 0;\n          min-width: 0;  // Fix width issue\n          \n          h4 {\n            margin: 0;\n            font-size: 14px;\n            font-weight: 600;\n            color: #495057;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            flex-shrink: 1;  // Allow title to shrink\n            min-width: 0;  // Prevent overflow\n            \n            i {\n              color: #6366f1;\n              flex-shrink: 0;  // Keep icon from shrinking\n            }\n          }\n          \n          .editor-actions {\n            display: flex;\n            gap: 8px;\n            flex-shrink: 0;  // Prevent buttons from shrinking\n            \n            button {\n              min-width: auto;\n              padding: 4px 12px;\n              font-size: 13px;\n              white-space: nowrap;  // Prevent button text wrapping\n            }\n          }\n        }\n        \n        .editor-wrapper {\n          flex: 1;\n          overflow-y: auto;\n          overflow-x: hidden;\n          min-height: 0;\n          position: relative;\n        }\n        \n        ::ng-deep .monaco-editor {\n          border: 1px solid #dee2e6;\n        }\n      }\n      \n      .code-sections {\n        height: 100%;\n        \n        ::ng-deep .k-panelbar-item-header {\n          background: #f8f9fa;\n          font-weight: 500;\n          font-size: 14px;\n        }\n        \n        ::ng-deep .k-panelbar-content {\n          padding: 0;\n        }\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Removed[_ngcontent-%COMP%]   tree[_ngcontent-%COMP%]   view[_ngcontent-%COMP%]   styles[_ngcontent-%COMP%]   -[_ngcontent-%COMP%]   using[_ngcontent-%COMP%]   modern[_ngcontent-%COMP%]   category[_ngcontent-%COMP%]   filters[_ngcontent-%COMP%]   instead\n\n@keyframes[_ngcontent-%COMP%]   slideDown[_ngcontent-%COMP%] {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}"] });
 };
 ComponentStudioDashboardComponent = __decorate([
     RegisterClass(BaseDashboard, 'ComponentStudioDashboard')
@@ -1939,15 +2072,15 @@ ComponentStudioDashboardComponent = __decorate([
 export { ComponentStudioDashboardComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentStudioDashboardComponent, [{
         type: Component,
-        args: [{ selector: 'mj-component-studio-dashboard', template: "<div class=\"component-studio\">\n  <!-- Header -->\n  <div class=\"dashboard-header\">\n    <div class=\"header-content\">\n      <div>\n        <h1><i class=\"fa-solid fa-puzzle-piece\"></i> Component Studio</h1>\n        <p class=\"header-subtitle\">Testing components without required custom properties</p>\n      </div>\n      <div class=\"header-buttons\">\n        @if (selectedComponent && isRunning) {\n          <button kendoButton (click)=\"toggleDetailsPane()\" [themeColor]=\"'base'\">\n            @if (isDetailsPaneCollapsed) {\n              <span class=\"fa-solid fa-eye\"></span> Show Details\n            } @else {\n              <span class=\"fa-solid fa-eye-slash\"></span> Hide Details\n            }\n          </button>\n        }\n        <div class=\"import-dropdown\" [class.open]=\"importDropdownOpen\">\n          <button kendoButton (click)=\"toggleImportDropdown()\" [themeColor]=\"'info'\">\n            <span class=\"fa-solid fa-file-import\"></span> Import\n            <span class=\"fa-solid fa-chevron-down\" style=\"margin-left: 5px; font-size: 10px;\"></span>\n          </button>\n          @if (importDropdownOpen) {\n            <div class=\"dropdown-menu\">\n              <button class=\"dropdown-item\" (click)=\"importFromFile()\">\n                <i class=\"fa-solid fa-file\"></i> Import from File\n              </button>\n              <button class=\"dropdown-item\" (click)=\"importFromText()\">\n                <i class=\"fa-solid fa-keyboard\"></i> Import from Text\n              </button>\n            </div>\n          }\n        </div>\n        @if (selectedComponent && isRunning) {\n          <div class=\"export-dropdown\" [class.open]=\"exportDropdownOpen\">\n            <button kendoButton (click)=\"toggleExportDropdown()\" [themeColor]=\"'primary'\">\n              <span class=\"fa-solid fa-file-export\"></span> Export\n              <span class=\"fa-solid fa-chevron-down\" style=\"margin-left: 5px; font-size: 10px;\"></span>\n            </button>\n            @if (exportDropdownOpen) {\n              <div class=\"dropdown-menu\">\n                <button class=\"dropdown-item\" (click)=\"exportToArtifact()\">\n                  <i class=\"fa-solid fa-save\"></i> Export to Artifact\n                </button>\n                <button class=\"dropdown-item\" (click)=\"exportToFile()\">\n                  <i class=\"fa-solid fa-file\"></i> Export to File\n                </button>\n                <button class=\"dropdown-item\" (click)=\"exportToClipboard()\">\n                  <i class=\"fa-solid fa-clipboard\"></i> Export to Clipboard\n                </button>\n              </div>\n            }\n          </div>\n        }\n        <button kendoButton (click)=\"refreshData()\" [disabled]=\"isLoading\">\n          <span class=\"fa-solid fa-sync\"></span> Refresh\n        </button>\n      </div>\n      <!-- Hidden file input -->\n      <input #fileInput type=\"file\" accept=\".json\" (change)=\"handleFileSelect($event)\" style=\"display: none;\" />\n    </div>\n  </div>\n\n  <!-- Main Content with Splitter -->\n  <kendo-splitter orientation=\"horizontal\">\n    <!-- Left Panel - Component List -->\n    <kendo-splitter-pane [min]=\"'350px'\" [max]=\"'650px'\" [size]=\"'400px'\">\n      <div class=\"components-panel\">\n        <div class=\"panel-header\">\n          <div class=\"panel-header-top\">\n            <h3>Components</h3>\n            <div class=\"header-actions\">\n              <button\n                class=\"favorites-toggle\"\n                [class.active]=\"showOnlyFavorites\"\n                (click)=\"toggleShowOnlyFavorites()\"\n                title=\"Show only favorites\">\n                @if (showOnlyFavorites) {\n                  <i class=\"fa-solid fa-star\"></i> Favorites\n                } @else {\n                  <i class=\"fa-regular fa-star\"></i> All\n                }\n              </button>\n              <button\n                class=\"deprecated-toggle\"\n                [class.active]=\"showDeprecatedComponents\"\n                (click)=\"toggleShowDeprecatedComponents()\"\n                title=\"Toggle deprecated components\">\n                @if (showDeprecatedComponents) {\n                  <i class=\"fa-solid fa-exclamation-triangle\"></i> Show Deprecated\n                } @else {\n                  <i class=\"fa-regular fa-exclamation-triangle\"></i> Hide Deprecated\n                }\n              </button>\n              <span class=\"component-count\">{{ filteredComponents.length }} of {{ allComponents.length }}</span>\n            </div>\n          </div>\n          \n          <!-- Modern Category Filter Pills -->\n          <div class=\"category-filters\">\n            @if (availableCategories.length > 0) {\n              <div class=\"filter-pills\">\n                @for (category of getVisibleCategories(); track category.name) {\n                  <button \n                    class=\"category-pill\"\n                    [class.active]=\"isCategorySelected(category.name)\"\n                    [style.--pill-color]=\"category.color\"\n                    (click)=\"toggleCategory(category.name)\">\n                    <span class=\"pill-name\">{{ category.name }}</span>\n                    <span class=\"pill-count\">{{ category.count }}</span>\n                  </button>\n                }\n                @if (availableCategories.length > 5) {\n                  <button \n                    class=\"more-button\"\n                    (click)=\"toggleShowAllCategories()\">\n                    @if (showAllCategories) {\n                      <i class=\"fa-solid fa-chevron-up\"></i> Less\n                    } @else {\n                      <i class=\"fa-solid fa-chevron-down\"></i> +{{ availableCategories.length - 5 }} more\n                    }\n                  </button>\n                }\n                @if (selectedCategories.size > 0) {\n                  <button \n                    class=\"clear-filters-button\"\n                    (click)=\"clearCategoryFilters()\">\n                    <i class=\"fa-solid fa-times\"></i> Clear\n                  </button>\n                }\n              </div>\n            }\n          </div>\n          \n          <div class=\"search-box\">\n            <kendo-textbox \n              [value]=\"searchQuery\"\n              (valueChange)=\"onSearchChange($event)\"\n              placeholder=\"Search components...\"\n              [clearButton]=\"true\">\n              <ng-template kendoTextBoxPrefixTemplate>\n                <i class=\"fa-solid fa-search\"></i>\n              </ng-template>\n            </kendo-textbox>\n          </div>\n        </div>\n        \n        <div class=\"components-list\">\n          @if (isLoading) {\n            <div class=\"loading-message\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading components...\n            </div>\n          } @else if (filteredComponents.length === 0) {\n            <div class=\"empty-message\">\n              <i class=\"fa-solid fa-info-circle\"></i> No components found without required custom properties.\n              <br>\n              <small>Components with optional custom props can be tested, but not those with required props.</small>\n            </div>\n          } @else {\n            <!-- Component Cards -->\n            @for (component of filteredComponents; track getComponentId(component)) {\n              <div class=\"component-card\" \n                [class.expanded]=\"expandedComponent && getComponentId(expandedComponent) === getComponentId(component)\"\n                [class.running]=\"selectedComponent && getComponentId(selectedComponent) === getComponentId(component) && isRunning\"\n                [class.file-loaded]=\"isFileLoadedComponent(component)\">\n                \n                <!-- Card Header - Always visible -->\n                <div class=\"card-header\" (click)=\"toggleComponentExpansion(component)\">\n                  <div class=\"card-icon\" [style.color]=\"getComponentTypeColor(getComponentType(component))\">\n                    <i class=\"fa-solid\" [ngClass]=\"getComponentTypeIcon(getComponentType(component))\"></i>\n                  </div>\n                  @if (!isFileLoadedComponent(component)) {\n                    <button \n                      class=\"favorite-btn\"\n                      [class.is-favorite]=\"isFavorite(component)\"\n                      (click)=\"toggleFavorite(component, $event)\"\n                      [title]=\"isFavorite(component) ? 'Remove from favorites' : 'Add to favorites'\">\n                      @if (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                  <div class=\"card-info\">\n                    <div class=\"card-name\">\n                      {{ getComponentName(component) }}\n                      @if (isFileLoadedComponent(component)) {\n                        <span class=\"file-badge\" [title]=\"getComponentStatus(component) === 'Text' ? 'Imported from text input' : 'Loaded from ' + getComponentFilename(component)\">\n                          @if (getComponentStatus(component) === 'Text') {\n                            <i class=\"fa-solid fa-keyboard\"></i> Text Import\n                          } @else {\n                            <i class=\"fa-solid fa-file\"></i> {{ getComponentFilename(component) }}\n                          }\n                        </span>\n                      }\n                    </div>\n                    <div class=\"card-meta\">\n                      <span class=\"card-type\">{{ getComponentType(component) || 'Component' }}</span>\n                      <span class=\"card-version\">v{{ getComponentVersion(component) }}</span>\n                      @if (isFileLoadedComponent(component)) {\n                        @if (getComponentStatus(component) === 'Text') {\n                          <span class=\"status-badge text\">Text</span>\n                        } @else {\n                          <span class=\"status-badge file\">File</span>\n                        }\n                      } @else if (getComponentStatus(component) === 'Deprecated') {\n                        <span class=\"status-badge deprecated\">Deprecated</span>\n                      } @else if (getComponentStatus(component) === 'Published') {\n                        <span class=\"status-badge published\">Published</span>\n                      } @else {\n                        <span class=\"status-badge draft\">Draft</span>\n                      }\n                    </div>\n                    <!-- Namespace chip with color coding -->\n                    <div class=\"card-namespace\">\n                      <span class=\"namespace-chip\" \n                        [style.background-color]=\"getNamespaceColor(getComponentNamespace(component))\"\n                        [title]=\"getComponentNamespace(component) || 'Uncategorized'\">\n                        <i class=\"fa-solid fa-folder-tree\"></i>\n                        {{ formatNamespace(getComponentNamespace(component)) }}\n                      </span>\n                    </div>\n                  </div>\n                  <div class=\"card-chevron\">\n                    @if (expandedComponent && getComponentId(expandedComponent) === getComponentId(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                \n                <!-- Card Details - Only visible when expanded -->\n                @if (expandedComponent && getComponentId(expandedComponent) === getComponentId(component)) {\n                  <div class=\"card-details\">\n                    @if (getComponentDescription(component)) {\n                      <div class=\"detail-section\">\n                        <label>Description</label>\n                        <p>{{ getComponentDescription(component) }}</p>\n                      </div>\n                    }\n                    \n                    <div class=\"detail-section\">\n                      <label>Component Info</label>\n                      <div class=\"info-grid\">\n                        <div class=\"info-item\">\n                          <span class=\"info-label\">Type:</span>\n                          <span class=\"info-value\">{{ getComponentType(component) || 'Unknown' }}</span>\n                        </div>\n                        <div class=\"info-item\">\n                          <span class=\"info-label\">Version:</span>\n                          <span class=\"info-value\">{{ getComponentVersion(component) }}</span>\n                        </div>\n                        <div class=\"info-item\">\n                          <span class=\"info-label\">Status:</span>\n                          <span class=\"info-value\">{{ getComponentStatus(component) || 'Draft' }}</span>\n                        </div>\n                        @if (isFileLoadedComponent(component)) {\n                          <div class=\"info-item\">\n                            <span class=\"info-label\">Loaded:</span>\n                            <span class=\"info-value\">{{ getComponentLoadedAt(component) | date:'short' }}</span>\n                          </div>\n                        } @else if (!isFileLoadedComponent(component) && getComponentUpdatedAt(component)) {\n                          <div class=\"info-item\">\n                            <span class=\"info-label\">Updated:</span>\n                            <span class=\"info-value\">{{ getComponentUpdatedAt(component) | date:'short' }}</span>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                    \n                    <div class=\"card-actions\">\n                      @if (selectedComponent && getComponentId(selectedComponent) === getComponentId(component) && isRunning) {\n                        <button kendoButton \n                          [themeColor]=\"'error'\"\n                          (click)=\"stopComponent(); $event.stopPropagation()\">\n                          <span class=\"fa-solid fa-stop\"></span> Stop Component\n                        </button>\n                      } @else if (isRunning && selectedComponent && getComponentId(selectedComponent) !== getComponentId(component)) {\n                        <button kendoButton \n                          [themeColor]=\"'base'\"\n                          title=\"Stop current component and run this one\"\n                          (click)=\"runComponent(component); $event.stopPropagation()\">\n                          <span class=\"fa-solid fa-play\"></span> Switch to This Component\n                        </button>\n                      } @else {\n                        <button kendoButton \n                          [themeColor]=\"'primary'\"\n                          (click)=\"runComponent(component); $event.stopPropagation()\">\n                          <span class=\"fa-solid fa-play\"></span> Run Component\n                        </button>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      </div>\n    </kendo-splitter-pane>\n\n    <!-- Right Panel - Component Display with Editor Splitter -->\n    <kendo-splitter-pane [min]=\"'400px'\">\n      <div class=\"component-display\">\n        @if (selectedComponent) {\n          <kendo-splitter orientation=\"horizontal\">\n            <kendo-splitter-pane [size]=\"isDetailsPaneCollapsed ? '100%' : '50%'\">\n              <div class=\"component-runtime\">\n                @if (isRunning && componentSpec) {\n                    @if (currentError) {\n                      <!-- Error Display -->\n                      <div class=\"error-display\">\n                        <div class=\"error-container\">\n                          <div class=\"error-header\">\n                            <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                            <h3>Component Error</h3>\n                            <button class=\"copy-button\" (click)=\"copyErrorToClipboard()\" title=\"Copy error details\">\n                              <i class=\"fa-solid fa-copy\"></i>\n                            </button>\n                          </div>\n                          \n                          <p class=\"error-intro\">\n                            The component could not be rendered due to the following error:\n                          </p>\n                          \n                          <div class=\"error-details\">\n                            <strong>Error Type:</strong> {{ currentError.type }}<br>\n                            <strong>Message:</strong> {{ currentError.message }}\n                            @if (currentError.technicalDetails) {\n                              <details class=\"technical-details\">\n                                <summary>Technical Details (click to expand)</summary>\n                                <pre>{{ formatTechnicalDetails(currentError.technicalDetails) }}</pre>\n                              </details>\n                            }\n                          </div>\n                          \n                          <div class=\"error-help\">\n                            <strong>What to do:</strong>\n                            <ol>\n                              <li>Check that the component code is valid JavaScript/React</li>\n                              <li>Ensure all required dependencies are available</li>\n                              <li>Review the technical details for specific error information</li>\n                              <li>Contact your system administrator if the issue persists</li>\n                            </ol>\n                          </div>\n                          \n                          <div class=\"error-actions\">\n                            <button kendoButton (click)=\"retryComponent()\">\n                              <span class=\"fa-solid fa-rotate\"></span> Retry\n                            </button>\n                            <button kendoButton (click)=\"stopComponent()\" [themeColor]=\"'error'\">\n                              <span class=\"fa-solid fa-stop\"></span> Stop\n                            </button>\n                          </div>\n                        </div>\n                      </div>\n                    } @else {\n                      <!-- React Component -->\n                      <mj-react-component \n                        [component]=\"componentSpec\"\n                        (componentEvent)=\"onComponentEvent($event)\"\n                        (openEntityRecord)=\"onOpenEntityRecord($event)\">\n                      </mj-react-component>\n                    }\n                } @else {\n                  <!-- Component Not Running State -->\n                  <div class=\"run-empty-state\">\n                    <i class=\"fa-solid fa-play-circle fa-3x\"></i>\n                    <h3>Component: {{ getComponentName(selectedComponent) }}</h3>\n                    <p>{{ getComponentDescription(selectedComponent) || 'No description available' }}</p>\n                    <button kendoButton [themeColor]=\"'primary'\" [size]=\"'large'\" (click)=\"runComponent(selectedComponent)\">\n                      <span class=\"fa-solid fa-play\"></span> Run Component\n                    </button>\n                  </div>\n                }\n              </div>\n\n            </kendo-splitter-pane>\n            <kendo-splitter-pane [size]=\"isDetailsPaneCollapsed ? '0px' : '50%'\">\n              <div>\n                <kendo-tabstrip (tabSelect)=\"onTabSelect($event)\" class=\"editor-tabs\">\n                  <!-- Spec Tab -->\n                  <kendo-tabstrip-tab [title]=\"'Spec'\" [selected]=\"activeTab === 0\">\n                    <ng-template kendoTabContent>\n                      <div class=\"tab-content spec-tab\">\n                        <div class=\"editor-header\">\n                          <h4><i class=\"fa-solid fa-code\"></i> Component Specification (JSON)</h4>\n                          <div class=\"editor-actions\">\n                            @if (isEditingSpec) {\n                              <button kendoButton [themeColor]=\"'primary'\" (click)=\"applySpecChanges()\">\n                                <span class=\"fa-solid fa-check\"></span> Apply Changes\n                              </button>\n                              <button kendoButton (click)=\"initializeEditors()\">\n                                <span class=\"fa-solid fa-times\"></span> Cancel\n                              </button>\n                            }\n                            @if (isRunning) {\n                              <button kendoButton (click)=\"refreshComponent()\" [themeColor]=\"'info'\">\n                                <span class=\"fa-solid fa-sync\"></span> Refresh Component\n                              </button>\n                            }\n                          </div>\n                        </div>\n                        <div class=\"editor-wrapper\">\n                          <mj-code-editor\n                            [(ngModel)]=\"editableSpec\"\n                            (ngModelChange)=\"onSpecChange($event)\"\n                            [language]=\"'json'\"\n                            [readonly]=\"false\"\n                            style=\"height: 100%; width: 100%;\">\n                          </mj-code-editor>\n                        </div>\n                      </div>\n                    </ng-template>\n                  </kendo-tabstrip-tab>\n                \n                  <!-- Code Tab -->\n                  <kendo-tabstrip-tab [title]=\"'Code'\" [selected]=\"activeTab === 1\">\n                    <ng-template kendoTabContent>\n                      <div class=\"tab-content code-tab\">\n                        <div class=\"editor-header\">\n                          <h4><i class=\"fa-solid fa-file-code\"></i> Component Code (JavaScript/React)</h4>\n                          <div class=\"editor-actions\">\n                            @if (isEditingCode) {\n                              <button kendoButton [themeColor]=\"'primary'\" (click)=\"applyCodeChanges()\">\n                                <span class=\"fa-solid fa-check\"></span> Apply Changes\n                              </button>\n                              <button kendoButton (click)=\"initializeEditors()\">\n                                <span class=\"fa-solid fa-times\"></span> Cancel\n                              </button>\n                            }\n                            @if (isRunning) {\n                              <button kendoButton (click)=\"refreshComponent()\" [themeColor]=\"'info'\">\n                                <span class=\"fa-solid fa-sync\"></span> Refresh Component\n                              </button>\n                            }\n                          </div>\n                        </div>\n                        \n                        <!-- Always use panel bar for consistency and to show all components -->\n                        <div class=\"editor-wrapper\">\n                          <kendo-panelbar class=\"code-sections\">\n                            @for (section of getComponentCodeSections(); track section.title; let i = $index) {\n                              <kendo-panelbar-item [title]=\"section.title\" [expanded]=\"section.expanded\">\n                                <ng-template kendoPanelBarContent>\n                                  <mj-code-editor\n                                    [ngModel]=\"section.code\"\n                                    (ngModelChange)=\"onCodeSectionChange($event, i)\"\n                                    [language]=\"'javascript'\"\n                                    [readonly]=\"false\"\n                                    style=\"height: 400px; width: 100%;\">\n                                  </mj-code-editor>\n                                </ng-template>\n                              </kendo-panelbar-item>\n                            }\n                          </kendo-panelbar>\n                        </div>\n                      </div>\n                    </ng-template>\n                  </kendo-tabstrip-tab>\n                </kendo-tabstrip>\n              </div>\n            </kendo-splitter-pane>\n          </kendo-splitter>\n\n          @if (!isDetailsPaneCollapsed) {\n           \n          }\n        } @else {\n          <!-- Empty State when no component selected -->\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-rocket fa-3x\"></i>\n            <h2>Ready to Test Components</h2>\n            <p>Select a component from the list to view its details and run it</p>\n          </div>\n        }\n      </div>\n    </kendo-splitter-pane>\n  </kendo-splitter>\n</div>", styles: [":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.component-studio {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  background: #f8f9fa;\n  overflow: hidden;\n  position: relative;\n\n  .dashboard-header {\n    background: white;\n    border-bottom: 1px solid #dee2e6;\n    padding: 16px 24px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n    \n    .header-content {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      \n      .header-buttons {\n        display: flex;\n        gap: 8px;\n        \n        .import-dropdown, .export-dropdown {\n          position: relative;\n          \n          .dropdown-menu {\n            position: absolute;\n            top: calc(100% + 4px);\n            left: 0;\n            background: white;\n            border: 1px solid #dee2e6;\n            border-radius: 4px;\n            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n            z-index: 1000;\n            min-width: 180px;\n            \n            .dropdown-item {\n              display: flex;\n              align-items: center;\n              gap: 10px;\n              width: 100%;\n              padding: 10px 16px;\n              border: none;\n              background: none;\n              text-align: left;\n              cursor: pointer;\n              font-size: 14px;\n              color: #212529;\n              transition: background-color 0.2s;\n              \n              &:hover {\n                background-color: #f8f9fa;\n              }\n              \n              &:not(:last-child) {\n                border-bottom: 1px solid #e9ecef;\n              }\n              \n              i {\n                width: 16px;\n                text-align: center;\n                color: #6366f1;\n              }\n            }\n          }\n        }\n      }\n      \n      h1 {\n        margin: 0;\n        font-size: 24px;\n        font-weight: 600;\n        color: #212529;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        \n        i {\n          color: #6366f1;\n        }\n      }\n      \n      .header-subtitle {\n        margin: 4px 0 0 0;\n        font-size: 13px;\n        color: #6c757d;\n        font-weight: normal;\n      }\n    }\n  }\n\n  kendo-splitter {\n    flex: 1;\n    background: white;\n    display: flex;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    \n    ::ng-deep .k-pane {\n      overflow: hidden;\n      height: 100%;\n    }\n  }\n\n  .components-panel {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #f8f9fa;\n    \n    .panel-header {\n      padding: 20px;\n      background: white;\n      border-bottom: 1px solid #dee2e6;\n      \n      .panel-header-top {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 16px;\n        \n        h3 {\n          margin: 0;\n          font-size: 18px;\n          font-weight: 600;\n          color: #212529;\n        }\n        \n        .header-actions {\n          display: flex;\n          align-items: center;\n          gap: 12px;\n          \n          .favorites-toggle,\n          .deprecated-toggle {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 6px 12px;\n            border: 1px solid #dee2e6;\n            background: white;\n            border-radius: 20px;\n            font-size: 13px;\n            font-weight: 500;\n            color: #6c757d;\n            cursor: pointer;\n            transition: all 0.2s ease;\n\n            &:hover {\n              background: #f8f9fa;\n              border-color: #adb5bd;\n            }\n\n            i {\n              font-size: 14px;\n            }\n          }\n\n          .favorites-toggle.active {\n            background: #fff3cd;\n            border-color: #ffc107;\n            color: #856404;\n\n            i {\n              color: #ffc107;\n            }\n          }\n\n          .deprecated-toggle.active {\n            background: #ffe4e1;\n            border-color: #ff6b6b;\n            color: #c92a2a;\n\n            i {\n              color: #ff6b6b;\n            }\n          }\n          \n          .component-count {\n            font-size: 13px;\n            color: #6c757d;\n            background: #f8f9fa;\n            padding: 4px 10px;\n            border-radius: 12px;\n            font-weight: 500;\n          }\n        }\n      }\n      \n      .category-filters {\n        margin-bottom: 16px;\n        \n        .filter-pills {\n          display: flex;\n          flex-wrap: wrap;\n          gap: 8px;\n          \n          .category-pill {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 6px 12px;\n            border: 2px solid #e9ecef;\n            background: white;\n            border-radius: 20px;\n            font-size: 13px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            position: relative;\n            overflow: hidden;\n            \n            &:hover {\n              transform: translateY(-1px);\n              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n            }\n            \n            &.active {\n              border-color: var(--pill-color);\n              background: var(--pill-color);\n              color: white;\n              \n              .pill-count {\n                background: rgba(255, 255, 255, 0.3);\n                color: white;\n              }\n            }\n            \n            .pill-name {\n              font-weight: 500;\n            }\n            \n            .pill-count {\n              background: #f1f3f5;\n              padding: 2px 6px;\n              border-radius: 10px;\n              font-size: 11px;\n              font-weight: 600;\n              min-width: 20px;\n              text-align: center;\n            }\n          }\n          \n          .more-button,\n          .clear-filters-button {\n            padding: 6px 12px;\n            border: 1px solid #dee2e6;\n            background: white;\n            border-radius: 20px;\n            font-size: 13px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            color: #6c757d;\n            \n            &:hover {\n              background: #f8f9fa;\n              border-color: #adb5bd;\n            }\n            \n            i {\n              font-size: 11px;\n              margin-right: 4px;\n            }\n          }\n          \n          .clear-filters-button {\n            background: #fee2e2;\n            border-color: #fca5a5;\n            color: #dc2626;\n            \n            &:hover {\n              background: #fca5a5;\n              color: white;\n            }\n          }\n        }\n      }\n      \n      .search-box {\n        kendo-textbox {\n          width: 100%;\n        }\n      }\n    }\n    \n    .components-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 16px;\n      \n      .loading-message,\n      .empty-message {\n        padding: 48px 24px;\n        text-align: center;\n        color: #6c757d;\n        font-size: 14px;\n        \n        i {\n          margin-right: 8px;\n        }\n      }\n      \n      .component-card {\n        background: white;\n        border: 1px solid #dee2e6;\n        border-radius: 8px;\n        margin-bottom: 12px;\n        transition: all 0.2s ease;\n        \n        &:hover {\n          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n        }\n        \n        &.expanded {\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n          border-color: #6366f1;\n        }\n        \n        &.running {\n          border-color: #10b981;\n          box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n          background: linear-gradient(to right, rgba(16, 185, 129, 0.03) 0%, white 100%);\n          \n          .card-header {\n            &::before {\n              content: '';\n              position: absolute;\n              left: 0;\n              top: 0;\n              bottom: 0;\n              width: 4px;\n              background: #10b981;\n            }\n          }\n        }\n        \n        &.file-loaded {\n          background: linear-gradient(135deg, #f0f8ff 0%, white 100%);\n          border-style: dashed;\n          border-color: #3b82f6;\n          \n          &:hover {\n            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);\n          }\n          \n          &.expanded {\n            border-style: solid;\n            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);\n          }\n        }\n        \n        .card-header {\n          display: flex;\n          align-items: center;\n          padding: 16px;\n          cursor: pointer;\n          user-select: none;\n          position: relative;\n          \n          &:hover {\n            background: #f8f9fa;\n          }\n          \n          .card-icon {\n            font-size: 24px;\n            margin-right: 16px;\n            width: 32px;\n            text-align: center;\n            flex-shrink: 0;\n          }\n          \n          .favorite-btn {\n            position: absolute;\n            top: 12px;\n            right: 48px; // Leave room for chevron\n            background: white;\n            border: 1px solid #dee2e6;\n            border-radius: 50%;\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            color: #6c757d;\n            \n            &:hover {\n              background: #f8f9fa;\n              transform: scale(1.1);\n            }\n            \n            &.is-favorite {\n              color: #ffc107;\n              border-color: #ffc107;\n              background: #fff3cd;\n              \n              &:hover {\n                background: #ffe69c;\n              }\n            }\n            \n            i {\n              font-size: 14px;\n            }\n          }\n          \n          .card-info {\n            flex: 1;\n            min-width: 0;\n            \n            .card-name {\n              font-size: 15px;\n              font-weight: 600;\n              color: #212529;\n              margin-bottom: 4px;\n              white-space: nowrap;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              display: flex;\n              align-items: center;\n              gap: 8px;\n              \n              .file-badge {\n                display: inline-flex;\n                align-items: center;\n                gap: 4px;\n                padding: 2px 6px;\n                background: #e0f2fe;\n                color: #0369a1;\n                border-radius: 4px;\n                font-size: 11px;\n                font-weight: 500;\n                flex-shrink: 0;\n                \n                i {\n                  font-size: 10px;\n                }\n              }\n            }\n            \n            .card-meta {\n              display: flex;\n              align-items: center;\n              gap: 8px;\n              font-size: 12px;\n              color: #6c757d;\n              \n              .card-type {\n                font-weight: 500;\n              }\n              \n              .card-version {\n                color: #868e96;\n              }\n              \n              .status-badge {\n                padding: 2px 6px;\n                border-radius: 10px;\n                font-size: 10px;\n                font-weight: 600;\n                text-transform: uppercase;\n                letter-spacing: 0.3px;\n                \n                &.published {\n                  background: #d1fae5;\n                  color: #065f46;\n                }\n                \n                &.draft {\n                  background: #fef3c7;\n                  color: #92400e;\n                }\n\n                &.deprecated {\n                  background: #ffe4e1;\n                  color: #c92a2a;\n                  border: 1px solid #ff6b6b;\n                }\n\n                &.file {\n                  background: #e0f2fe;\n                  color: #0369a1;\n                }\n                \n                &.text {\n                  background: #f3e8ff;\n                  color: #6b21a8;\n                }\n              }\n            }\n            \n            .card-namespace {\n              margin-top: 8px;\n              \n              .namespace-chip {\n                display: inline-flex;\n                align-items: center;\n                gap: 6px;\n                padding: 4px 10px;\n                border-radius: 16px;\n                font-size: 12px;\n                font-weight: 500;\n                color: white;\n                \n                i {\n                  font-size: 11px;\n                  opacity: 0.9;\n                }\n              }\n            }\n          }\n          \n          .card-chevron {\n            color: #6c757d;\n            font-size: 12px;\n            margin-left: 12px;\n            transition: transform 0.2s ease;\n          }\n        }\n        \n        .card-details {\n          padding: 0 16px 16px 16px;\n          border-top: 1px solid #e9ecef;\n          animation: slideDown 0.2s ease;\n          \n          .detail-section {\n            margin-top: 16px;\n            \n            label {\n              display: block;\n              font-size: 11px;\n              font-weight: 600;\n              color: #6c757d;\n              text-transform: uppercase;\n              letter-spacing: 0.5px;\n              margin-bottom: 8px;\n            }\n            \n            p {\n              margin: 0;\n              font-size: 13px;\n              color: #495057;\n              line-height: 1.5;\n            }\n            \n            .info-grid {\n              display: grid;\n              grid-template-columns: 1fr 1fr;\n              gap: 8px;\n              \n              .info-item {\n                display: flex;\n                align-items: baseline;\n                gap: 6px;\n                font-size: 13px;\n                \n                .info-label {\n                  font-weight: 500;\n                  color: #6c757d;\n                  min-width: 50px;\n                }\n                \n                .info-value {\n                  color: #212529;\n                }\n              }\n            }\n          }\n          \n          .card-actions {\n            margin-top: 16px;\n            display: flex;\n            gap: 8px;\n            \n            button {\n              flex: 1;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  .component-display {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: white;\n    position: relative;\n    overflow: hidden;\n    \n    .empty-state {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      color: #868e96;\n      padding: 48px;\n      text-align: center;\n      \n      i {\n        color: #dee2e6;\n        margin-bottom: 24px;\n      }\n      \n      h2 {\n        margin: 0 0 12px 0;\n        font-size: 24px;\n        font-weight: 600;\n        color: #495057;\n      }\n      \n      p {\n        margin: 0;\n        font-size: 14px;\n        max-width: 400px;\n      }\n    }\n    \n    .error-display {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 24px;\n      background: #f8f9fa;\n      \n      .error-container {\n        width: 100%;\n        max-width: 600px;\n        background: white;\n        border: 2px solid #dc3545;\n        border-radius: 8px;\n        padding: 24px;\n        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15);\n        \n        .error-header {\n          display: flex;\n          align-items: center;\n          gap: 12px;\n          margin-bottom: 20px;\n          color: #dc3545;\n          position: relative;\n          \n          i {\n            font-size: 24px;\n          }\n          \n          h3 {\n            margin: 0;\n            font-size: 20px;\n            flex: 1;\n          }\n          \n          .copy-button {\n            background: white;\n            border: 1px solid #dee2e6;\n            border-radius: 4px;\n            padding: 6px 10px;\n            cursor: pointer;\n            color: #6c757d;\n            transition: all 0.2s;\n            \n            &:hover {\n              background: #e9ecef;\n              color: #495057;\n            }\n            \n            i {\n              font-size: 14px;\n            }\n          }\n        }\n        \n        .error-intro {\n          color: #495057;\n          margin-bottom: 20px;\n          font-size: 14px;\n        }\n        \n        .error-details {\n          background: #f8f9fa;\n          border: 1px solid #dee2e6;\n          border-radius: 4px;\n          padding: 16px;\n          margin-bottom: 20px;\n          font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n          font-size: 13px;\n          \n          .technical-details {\n            margin-top: 12px;\n            \n            summary {\n              cursor: pointer;\n              color: #0066cc;\n              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n              \n              &:hover {\n                text-decoration: underline;\n              }\n            }\n            \n            pre {\n              margin-top: 8px;\n              white-space: pre-wrap;\n              word-break: break-word;\n              font-size: 11px;\n              color: #495057;\n              max-height: 200px;\n              overflow-y: auto;\n            }\n          }\n        }\n        \n        .error-help {\n          background: #e7f3ff;\n          border: 1px solid #b3d9ff;\n          border-radius: 4px;\n          padding: 16px;\n          margin-bottom: 20px;\n          font-size: 13px;\n          \n          strong {\n            display: block;\n            margin-bottom: 8px;\n            font-size: 14px;\n            color: #0066cc;\n          }\n          \n          ol {\n            margin: 0;\n            padding-left: 20px;\n            \n            li {\n              margin-bottom: 4px;\n              color: #495057;\n            }\n          }\n        }\n        \n        .error-actions {\n          display: flex;\n          gap: 12px;\n          \n          button {\n            min-width: 100px;\n          }\n        }\n      }\n    }\n    \n    mj-react-component {\n      flex: 1;\n      width: 100%;\n      height: 100%;\n      display: block;\n      overflow-y: auto;\n      overflow-x: hidden;\n    }\n    \n    // Component and editor splitter\n    .component-editor-splitter {\n      height: 100%;\n      overflow: hidden;\n      \n      ::ng-deep .k-splitter-bar {\n        background: #6366f1;  // Same blue as Import button\n        width: 6px;  // Make it slightly wider for visibility\n        \n        &:hover {\n          background: #4f52d9;  // Darker blue on hover\n        }\n        \n        .k-resize-handle {\n          background-color: rgba(255, 255, 255, 0.3);\n        }\n      }\n      \n      ::ng-deep .k-pane {\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n      }\n    }\n    \n    // Component runtime area\n    .component-runtime {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: white;\n      position: relative;\n      overflow-y: auto;\n      overflow-x: hidden;\n      \n      .run-empty-state {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        padding: 48px;\n        text-align: center;\n        \n        i {\n          color: #10b981;\n          margin-bottom: 24px;\n        }\n        \n        h3 {\n          margin: 0 0 12px 0;\n          font-size: 20px;\n          font-weight: 600;\n          color: #212529;\n        }\n        \n        p {\n          margin: 0 0 24px 0;\n          font-size: 14px;\n          color: #6c757d;\n          max-width: 400px;\n        }\n      }\n    }\n    \n    // Editor tabs on the right\n    .editor-tabs {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      \n      ::ng-deep .k-tabstrip-items-wrapper {\n        background: #f8f9fa;\n        border-bottom: 2px solid #dee2e6;\n        flex-shrink: 0;\n      }\n      \n      ::ng-deep .k-tabstrip-content {\n        flex: 1;\n        padding: 0;\n        overflow: hidden;\n        min-height: 0;\n        display: flex;\n        flex-direction: column;\n      }\n      \n      ::ng-deep .k-item.k-tabstrip-item {\n        font-weight: 500;\n        \n        &.k-active {\n          background: white;\n          border-bottom-color: white;\n        }\n      }\n    }\n    \n    .tab-content {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      \n      &.spec-tab, &.code-tab {\n        height: 100%;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        \n        .editor-header {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          padding: 12px 16px;\n          background: #f8f9fa;\n          border-bottom: 1px solid #dee2e6;\n          flex-shrink: 0;\n          min-width: 0;  // Fix width issue\n          \n          h4 {\n            margin: 0;\n            font-size: 14px;\n            font-weight: 600;\n            color: #495057;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            flex-shrink: 1;  // Allow title to shrink\n            min-width: 0;  // Prevent overflow\n            \n            i {\n              color: #6366f1;\n              flex-shrink: 0;  // Keep icon from shrinking\n            }\n          }\n          \n          .editor-actions {\n            display: flex;\n            gap: 8px;\n            flex-shrink: 0;  // Prevent buttons from shrinking\n            \n            button {\n              min-width: auto;\n              padding: 4px 12px;\n              font-size: 13px;\n              white-space: nowrap;  // Prevent button text wrapping\n            }\n          }\n        }\n        \n        .editor-wrapper {\n          flex: 1;\n          overflow-y: auto;\n          overflow-x: hidden;\n          min-height: 0;\n          position: relative;\n        }\n        \n        ::ng-deep .monaco-editor {\n          border: 1px solid #dee2e6;\n        }\n      }\n      \n      .code-sections {\n        height: 100%;\n        \n        ::ng-deep .k-panelbar-item-header {\n          background: #f8f9fa;\n          font-weight: 500;\n          font-size: 14px;\n        }\n        \n        ::ng-deep .k-panelbar-content {\n          padding: 0;\n        }\n      }\n    }\n  }\n}\n\n// Removed tree view styles - using modern category filters instead\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}"] }]
-    }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.DialogService }, { type: i0.ViewContainerRef }], { fileInput: [{
+        args: [{ selector: 'mj-component-studio-dashboard', template: "<div class=\"component-studio\">\n  <!-- Header -->\n  <div class=\"dashboard-header\">\n    <div class=\"header-content\">\n      <div>\n        <h1><i class=\"fa-solid fa-puzzle-piece\"></i> Component Studio</h1>\n        <p class=\"header-subtitle\">Testing components without required custom properties</p>\n      </div>\n      <div class=\"header-buttons\">\n        @if (selectedComponent && isRunning) {\n          <button kendoButton (click)=\"toggleDetailsPane()\" [themeColor]=\"'base'\">\n            @if (isDetailsPaneCollapsed) {\n              <span class=\"fa-solid fa-eye\"></span> Show Details\n            } @else {\n              <span class=\"fa-solid fa-eye-slash\"></span> Hide Details\n            }\n          </button>\n        }\n        <div class=\"import-dropdown\" [class.open]=\"importDropdownOpen\">\n          <button kendoButton (click)=\"toggleImportDropdown()\" [themeColor]=\"'info'\">\n            <span class=\"fa-solid fa-file-import\"></span> Import\n            <span class=\"fa-solid fa-chevron-down\" style=\"margin-left: 5px; font-size: 10px;\"></span>\n          </button>\n          @if (importDropdownOpen) {\n            <div class=\"dropdown-menu\">\n              <button class=\"dropdown-item\" (click)=\"importFromArtifact()\">\n                <i class=\"fa-solid fa-database\"></i> Import from Artifact\n              </button>\n              <button class=\"dropdown-item\" (click)=\"importFromFile()\">\n                <i class=\"fa-solid fa-file\"></i> Import from File\n              </button>\n              <button class=\"dropdown-item\" (click)=\"importFromText()\">\n                <i class=\"fa-solid fa-keyboard\"></i> Import from Text\n              </button>\n            </div>\n          }\n        </div>\n        @if (selectedComponent && isRunning) {\n          <div class=\"export-dropdown\" [class.open]=\"exportDropdownOpen\">\n            <button kendoButton (click)=\"toggleExportDropdown()\" [themeColor]=\"'primary'\">\n              <span class=\"fa-solid fa-file-export\"></span> Export\n              <span class=\"fa-solid fa-chevron-down\" style=\"margin-left: 5px; font-size: 10px;\"></span>\n            </button>\n            @if (exportDropdownOpen) {\n              <div class=\"dropdown-menu\">\n                <button class=\"dropdown-item\" (click)=\"exportToArtifact()\">\n                  <i class=\"fa-solid fa-save\"></i> Export to Artifact\n                </button>\n                <button class=\"dropdown-item\" (click)=\"exportToFile()\">\n                  <i class=\"fa-solid fa-file\"></i> Export to File\n                </button>\n                <button class=\"dropdown-item\" (click)=\"exportToClipboard()\">\n                  <i class=\"fa-solid fa-clipboard\"></i> Export to Clipboard\n                </button>\n              </div>\n            }\n          </div>\n        }\n        <button kendoButton (click)=\"refreshData()\" [disabled]=\"isLoading\">\n          <span class=\"fa-solid fa-sync\"></span> Refresh\n        </button>\n      </div>\n      <!-- Hidden file input -->\n      <input #fileInput type=\"file\" accept=\".json\" (change)=\"handleFileSelect($event)\" style=\"display: none;\" />\n    </div>\n  </div>\n\n  <!-- Main Content with Splitter -->\n  <kendo-splitter orientation=\"horizontal\">\n    <!-- Left Panel - Component List -->\n    <kendo-splitter-pane [min]=\"'350px'\" [max]=\"'650px'\" [size]=\"'400px'\">\n      <div class=\"components-panel\">\n        <div class=\"panel-header\">\n          <!-- Clean Header with Filter Button -->\n          <div class=\"panel-header-top\">\n            <div class=\"header-actions\">\n              <button\n                class=\"filter-toggle-btn\"\n                [class.active]=\"isFilterPanelExpanded || GetActiveFilterCount() > 0\"\n                (click)=\"ToggleFilterPanel()\"\n                [title]=\"isFilterPanelExpanded ? 'Hide filters' : 'Show filters'\">\n                <i class=\"fa-solid fa-sliders\"></i>\n                @if (GetActiveFilterCount() > 0) {\n                  <span class=\"filter-count-badge\">{{ GetActiveFilterCount() }}</span>\n                }\n              </button>\n              <span class=\"component-count\">{{ filteredComponents.length }} of {{ allComponents.length }}</span>\n            </div>\n          </div>\n\n          <!-- Search (Always Visible) -->\n          <div class=\"search-box\">\n            <kendo-textbox\n              [value]=\"searchQuery\"\n              (valueChange)=\"onSearchChange($event)\"\n              placeholder=\"Search components...\"\n              [clearButton]=\"true\">\n              <ng-template kendoTextBoxPrefixTemplate>\n                <i class=\"fa-solid fa-search\"></i>\n              </ng-template>\n            </kendo-textbox>\n          </div>\n\n          <!-- Collapsible Filter Panel -->\n          @if (isFilterPanelExpanded) {\n            <div class=\"filter-panel\">\n              <div class=\"filter-panel-header\" (click)=\"ToggleFilterPanel()\">\n                <span><i class=\"fa-solid fa-chevron-down\"></i> Filters</span>\n                <span class=\"filter-count-text\">{{ filteredComponents.length }} of {{ allComponents.length }}</span>\n              </div>\n\n              <div class=\"filter-panel-content\">\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]=\"showOnlyFavorites\"\n                             (change)=\"toggleShowOnlyFavorites()\">\n                      <span>Show favorites only</span>\n                    </label>\n                    <label class=\"filter-checkbox\">\n                      <input type=\"checkbox\"\n                             [checked]=\"!showDeprecatedComponents\"\n                             (change)=\"toggleShowDeprecatedComponents()\">\n                      <span>Hide deprecated\n                        @if (getDeprecatedCount() > 0) {\n                          <span class=\"deprecated-count\">({{ getDeprecatedCount() }} hidden)</span>\n                        }\n                      </span>\n                    </label>\n                  </div>\n                </div>\n\n                <!-- Category Filters -->\n                @if (availableCategories.length > 0) {\n                  <div class=\"filter-section\">\n                    <label class=\"filter-section-label\">Categories</label>\n                    <div class=\"category-pills-grid\">\n                      @for (category of getVisibleCategories(); track category.name) {\n                        <button\n                          class=\"category-pill-compact\"\n                          [class.active]=\"isCategorySelected(category.name)\"\n                          [style.--pill-color]=\"category.color\"\n                          (click)=\"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 (availableCategories.length > 5) {\n                      <button\n                        class=\"show-more-categories-btn\"\n                        (click)=\"toggleShowAllCategories()\">\n                        @if (showAllCategories) {\n                          <i class=\"fa-solid fa-chevron-up\"></i> Show less\n                        } @else {\n                          <i class=\"fa-solid fa-chevron-down\"></i> Show {{ availableCategories.length - 5 }} more\n                        }\n                      </button>\n                    }\n                  </div>\n                }\n\n                <!-- Clear All Button -->\n                @if (GetActiveFilterCount() > 0) {\n                  <div class=\"filter-panel-footer\">\n                    <button class=\"clear-all-btn\" (click)=\"ClearAllFilters()\">\n                      <i class=\"fa-solid fa-times\"></i> Clear All Filters\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n        \n        <div class=\"components-list\">\n          @if (isLoading) {\n            <div class=\"loading-message\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading components...\n            </div>\n          } @else if (filteredComponents.length === 0) {\n            <div class=\"empty-message\">\n              <i class=\"fa-solid fa-info-circle\"></i> No components found without required custom properties.\n              <br>\n              <small>Components with optional custom props can be tested, but not those with required props.</small>\n            </div>\n          } @else {\n            <!-- Component Cards -->\n            @for (component of filteredComponents; track getComponentId(component)) {\n              <div class=\"component-card\" \n                [class.expanded]=\"expandedComponent && getComponentId(expandedComponent) === getComponentId(component)\"\n                [class.running]=\"selectedComponent && getComponentId(selectedComponent) === getComponentId(component) && isRunning\"\n                [class.file-loaded]=\"isFileLoadedComponent(component)\">\n                \n                <!-- Card Header - Always visible -->\n                <div class=\"card-header\" (click)=\"toggleComponentExpansion(component)\">\n                  <div class=\"card-icon\" [style.color]=\"getComponentTypeColor(getComponentType(component))\">\n                    <i class=\"fa-solid\" [ngClass]=\"getComponentTypeIcon(getComponentType(component))\"></i>\n                  </div>\n                  @if (!isFileLoadedComponent(component)) {\n                    <button \n                      class=\"favorite-btn\"\n                      [class.is-favorite]=\"isFavorite(component)\"\n                      (click)=\"toggleFavorite(component, $event)\"\n                      [title]=\"isFavorite(component) ? 'Remove from favorites' : 'Add to favorites'\">\n                      @if (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                  <div class=\"card-info\">\n                    <div class=\"card-name\">\n                      {{ getComponentName(component) }}\n                      @if (isFileLoadedComponent(component)) {\n                        <span class=\"file-badge\" [title]=\"getComponentStatus(component) === 'Text' ? 'Imported from text input' : 'Loaded from ' + getComponentFilename(component)\">\n                          @if (getComponentStatus(component) === 'Text') {\n                            <i class=\"fa-solid fa-keyboard\"></i> Text Import\n                          } @else {\n                            <i class=\"fa-solid fa-file\"></i> {{ getComponentFilename(component) }}\n                          }\n                        </span>\n                      }\n                    </div>\n                    <div class=\"card-meta\">\n                      <span class=\"card-type\">{{ getComponentType(component) || 'Component' }}</span>\n                      <span class=\"card-version\">v{{ getComponentVersion(component) }}</span>\n                      @if (isFileLoadedComponent(component)) {\n                        @if (getComponentStatus(component) === 'Text') {\n                          <span class=\"status-badge text\">Text</span>\n                        } @else {\n                          <span class=\"status-badge file\">File</span>\n                        }\n                      } @else if (getComponentStatus(component) === 'Deprecated') {\n                        <span class=\"status-badge deprecated\">Deprecated</span>\n                      } @else if (getComponentStatus(component) === 'Published') {\n                        <span class=\"status-badge published\">Published</span>\n                      } @else {\n                        <span class=\"status-badge draft\">Draft</span>\n                      }\n                    </div>\n                    <!-- Namespace chip with color coding -->\n                    <div class=\"card-namespace\">\n                      <span class=\"namespace-chip\" \n                        [style.background-color]=\"getNamespaceColor(getComponentNamespace(component))\"\n                        [title]=\"getComponentNamespace(component) || 'Uncategorized'\">\n                        <i class=\"fa-solid fa-folder-tree\"></i>\n                        {{ formatNamespace(getComponentNamespace(component)) }}\n                      </span>\n                    </div>\n                  </div>\n                  <div class=\"card-chevron\">\n                    @if (expandedComponent && getComponentId(expandedComponent) === getComponentId(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                \n                <!-- Card Details - Only visible when expanded -->\n                @if (expandedComponent && getComponentId(expandedComponent) === getComponentId(component)) {\n                  <div class=\"card-details\">\n                    @if (getComponentDescription(component)) {\n                      <div class=\"detail-section\">\n                        <label>Description</label>\n                        <p>{{ getComponentDescription(component) }}</p>\n                      </div>\n                    }\n                    \n                    <div class=\"detail-section\">\n                      <label>Component Info</label>\n                      <div class=\"info-grid\">\n                        <div class=\"info-item\">\n                          <span class=\"info-label\">Type:</span>\n                          <span class=\"info-value\">{{ getComponentType(component) || 'Unknown' }}</span>\n                        </div>\n                        <div class=\"info-item\">\n                          <span class=\"info-label\">Version:</span>\n                          <span class=\"info-value\">{{ getComponentVersion(component) }}</span>\n                        </div>\n                        <div class=\"info-item\">\n                          <span class=\"info-label\">Status:</span>\n                          <span class=\"info-value\">{{ getComponentStatus(component) || 'Draft' }}</span>\n                        </div>\n                        @if (isFileLoadedComponent(component)) {\n                          <div class=\"info-item\">\n                            <span class=\"info-label\">Loaded:</span>\n                            <span class=\"info-value\">{{ getComponentLoadedAt(component) | date:'short' }}</span>\n                          </div>\n                        } @else if (!isFileLoadedComponent(component) && getComponentUpdatedAt(component)) {\n                          <div class=\"info-item\">\n                            <span class=\"info-label\">Updated:</span>\n                            <span class=\"info-value\">{{ getComponentUpdatedAt(component) | date:'short' }}</span>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                    \n                    <div class=\"card-actions\">\n                      @if (selectedComponent && getComponentId(selectedComponent) === getComponentId(component) && isRunning) {\n                        <button kendoButton \n                          [themeColor]=\"'error'\"\n                          (click)=\"stopComponent(); $event.stopPropagation()\">\n                          <span class=\"fa-solid fa-stop\"></span> Stop Component\n                        </button>\n                      } @else if (isRunning && selectedComponent && getComponentId(selectedComponent) !== getComponentId(component)) {\n                        <button kendoButton \n                          [themeColor]=\"'base'\"\n                          title=\"Stop current component and run this one\"\n                          (click)=\"runComponent(component); $event.stopPropagation()\">\n                          <span class=\"fa-solid fa-play\"></span> Switch to This Component\n                        </button>\n                      } @else {\n                        <button kendoButton \n                          [themeColor]=\"'primary'\"\n                          (click)=\"runComponent(component); $event.stopPropagation()\">\n                          <span class=\"fa-solid fa-play\"></span> Run Component\n                        </button>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      </div>\n    </kendo-splitter-pane>\n\n    <!-- Right Panel - Component Display with Editor Splitter -->\n    <kendo-splitter-pane [min]=\"'400px'\">\n      <div class=\"component-display\">\n        @if (selectedComponent) {\n          <kendo-splitter orientation=\"horizontal\">\n            <kendo-splitter-pane [size]=\"isDetailsPaneCollapsed ? '100%' : '50%'\">\n              <div class=\"component-runtime\">\n                @if (isRunning && componentSpec) {\n                    @if (currentError) {\n                      <!-- Error Display -->\n                      <div class=\"error-display\">\n                        <div class=\"error-container\">\n                          <div class=\"error-header\">\n                            <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                            <h3>Component Error</h3>\n                            <button class=\"copy-button\" (click)=\"copyErrorToClipboard()\" title=\"Copy error details\">\n                              <i class=\"fa-solid fa-copy\"></i>\n                            </button>\n                          </div>\n                          \n                          <p class=\"error-intro\">\n                            The component could not be rendered due to the following error:\n                          </p>\n                          \n                          <div class=\"error-details\">\n                            <strong>Error Type:</strong> {{ currentError.type }}<br>\n                            <strong>Message:</strong> {{ currentError.message }}\n                            @if (currentError.technicalDetails) {\n                              <details class=\"technical-details\">\n                                <summary>Technical Details (click to expand)</summary>\n                                <pre>{{ formatTechnicalDetails(currentError.technicalDetails) }}</pre>\n                              </details>\n                            }\n                          </div>\n                          \n                          <div class=\"error-help\">\n                            <strong>What to do:</strong>\n                            <ol>\n                              <li>Check that the component code is valid JavaScript/React</li>\n                              <li>Ensure all required dependencies are available</li>\n                              <li>Review the technical details for specific error information</li>\n                              <li>Contact your system administrator if the issue persists</li>\n                            </ol>\n                          </div>\n                          \n                          <div class=\"error-actions\">\n                            <button kendoButton (click)=\"retryComponent()\">\n                              <span class=\"fa-solid fa-rotate\"></span> Retry\n                            </button>\n                            <button kendoButton (click)=\"stopComponent()\" [themeColor]=\"'error'\">\n                              <span class=\"fa-solid fa-stop\"></span> Stop\n                            </button>\n                          </div>\n                        </div>\n                      </div>\n                    } @else {\n                      <!-- React Component -->\n                      <mj-react-component \n                        [component]=\"componentSpec\"\n                        (componentEvent)=\"onComponentEvent($event)\"\n                        (openEntityRecord)=\"onOpenEntityRecord($event)\">\n                      </mj-react-component>\n                    }\n                } @else {\n                  <!-- Component Not Running State -->\n                  <div class=\"run-empty-state\">\n                    <i class=\"fa-solid fa-play-circle fa-3x\"></i>\n                    <h3>Component: {{ getComponentName(selectedComponent) }}</h3>\n                    <p>{{ getComponentDescription(selectedComponent) || 'No description available' }}</p>\n                    <button kendoButton [themeColor]=\"'primary'\" [size]=\"'large'\" (click)=\"runComponent(selectedComponent)\">\n                      <span class=\"fa-solid fa-play\"></span> Run Component\n                    </button>\n                  </div>\n                }\n              </div>\n\n            </kendo-splitter-pane>\n            <kendo-splitter-pane [size]=\"isDetailsPaneCollapsed ? '0px' : '50%'\">\n              <div>\n                <kendo-tabstrip (tabSelect)=\"onTabSelect($event)\" class=\"editor-tabs\">\n                  <!-- Spec Tab -->\n                  <kendo-tabstrip-tab [title]=\"'Spec'\" [selected]=\"activeTab === 0\">\n                    <ng-template kendoTabContent>\n                      <div class=\"tab-content spec-tab\">\n                        <div class=\"editor-header\">\n                          <h4><i class=\"fa-solid fa-code\"></i> Component Specification (JSON)</h4>\n                          <div class=\"editor-actions\">\n                            @if (isEditingSpec) {\n                              <button kendoButton [themeColor]=\"'primary'\" (click)=\"applySpecChanges()\">\n                                <span class=\"fa-solid fa-check\"></span> Apply Changes\n                              </button>\n                              <button kendoButton (click)=\"initializeEditors()\">\n                                <span class=\"fa-solid fa-times\"></span> Cancel\n                              </button>\n                            }\n                            @if (isRunning) {\n                              <button kendoButton (click)=\"refreshComponent()\" [themeColor]=\"'info'\">\n                                <span class=\"fa-solid fa-sync\"></span> Refresh Component\n                              </button>\n                            }\n                          </div>\n                        </div>\n                        <div class=\"editor-wrapper\">\n                          <mj-code-editor\n                            [(ngModel)]=\"editableSpec\"\n                            (ngModelChange)=\"onSpecChange($event)\"\n                            [language]=\"'json'\"\n                            [readonly]=\"false\"\n                            style=\"height: 100%; width: 100%;\">\n                          </mj-code-editor>\n                        </div>\n                      </div>\n                    </ng-template>\n                  </kendo-tabstrip-tab>\n                \n                  <!-- Code Tab -->\n                  <kendo-tabstrip-tab [title]=\"'Code'\" [selected]=\"activeTab === 1\">\n                    <ng-template kendoTabContent>\n                      <div class=\"tab-content code-tab\">\n                        <div class=\"editor-header\">\n                          <h4><i class=\"fa-solid fa-file-code\"></i> Component Code (JavaScript/React)</h4>\n                          <div class=\"editor-actions\">\n                            @if (isEditingCode) {\n                              <button kendoButton [themeColor]=\"'primary'\" (click)=\"applyCodeChanges()\">\n                                <span class=\"fa-solid fa-check\"></span> Apply Changes\n                              </button>\n                              <button kendoButton (click)=\"initializeEditors()\">\n                                <span class=\"fa-solid fa-times\"></span> Cancel\n                              </button>\n                            }\n                            @if (isRunning) {\n                              <button kendoButton (click)=\"refreshComponent()\" [themeColor]=\"'info'\">\n                                <span class=\"fa-solid fa-sync\"></span> Refresh Component\n                              </button>\n                            }\n                          </div>\n                        </div>\n                        \n                        <!-- Always use panel bar for consistency and to show all components -->\n                        <div class=\"editor-wrapper\">\n                          <kendo-panelbar class=\"code-sections\">\n                            @for (section of getComponentCodeSections(); track section.title; let i = $index) {\n                              <kendo-panelbar-item [title]=\"section.title\" [expanded]=\"section.expanded\">\n                                <ng-template kendoPanelBarContent>\n                                  <mj-code-editor\n                                    [ngModel]=\"section.code\"\n                                    (ngModelChange)=\"onCodeSectionChange($event, i)\"\n                                    [language]=\"'javascript'\"\n                                    [readonly]=\"false\"\n                                    style=\"height: 400px; width: 100%;\">\n                                  </mj-code-editor>\n                                </ng-template>\n                              </kendo-panelbar-item>\n                            }\n                          </kendo-panelbar>\n                        </div>\n                      </div>\n                    </ng-template>\n                  </kendo-tabstrip-tab>\n                </kendo-tabstrip>\n              </div>\n            </kendo-splitter-pane>\n          </kendo-splitter>\n\n          @if (!isDetailsPaneCollapsed) {\n           \n          }\n        } @else {\n          <!-- Empty State when no component selected -->\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-rocket fa-3x\"></i>\n            <h2>Ready to Test Components</h2>\n            <p>Select a component from the list to view its details and run it</p>\n          </div>\n        }\n      </div>\n    </kendo-splitter-pane>\n  </kendo-splitter>\n</div>", styles: [":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.component-studio {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  background: #f8f9fa;\n  overflow: hidden;\n  position: relative;\n\n  .dashboard-header {\n    background: white;\n    border-bottom: 1px solid #dee2e6;\n    padding: 16px 24px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n    \n    .header-content {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      \n      .header-buttons {\n        display: flex;\n        gap: 8px;\n        \n        .import-dropdown, .export-dropdown {\n          position: relative;\n          \n          .dropdown-menu {\n            position: absolute;\n            top: calc(100% + 4px);\n            left: 0;\n            background: white;\n            border: 1px solid #dee2e6;\n            border-radius: 4px;\n            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n            z-index: 1000;\n            min-width: 180px;\n            \n            .dropdown-item {\n              display: flex;\n              align-items: center;\n              gap: 10px;\n              width: 100%;\n              padding: 10px 16px;\n              border: none;\n              background: none;\n              text-align: left;\n              cursor: pointer;\n              font-size: 14px;\n              color: #212529;\n              transition: background-color 0.2s;\n              \n              &:hover {\n                background-color: #f8f9fa;\n              }\n              \n              &:not(:last-child) {\n                border-bottom: 1px solid #e9ecef;\n              }\n              \n              i {\n                width: 16px;\n                text-align: center;\n                color: #6366f1;\n              }\n            }\n          }\n        }\n      }\n      \n      h1 {\n        margin: 0;\n        font-size: 24px;\n        font-weight: 600;\n        color: #212529;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        \n        i {\n          color: #6366f1;\n        }\n      }\n      \n      .header-subtitle {\n        margin: 4px 0 0 0;\n        font-size: 13px;\n        color: #6c757d;\n        font-weight: normal;\n      }\n    }\n  }\n\n  kendo-splitter {\n    flex: 1;\n    background: white;\n    display: flex;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    \n    ::ng-deep .k-pane {\n      overflow: hidden;\n      height: 100%;\n    }\n  }\n\n  .components-panel {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #f8f9fa;\n    \n    .panel-header {\n      padding: 20px;\n      background: white;\n      border-bottom: 1px solid #dee2e6;\n      \n      .panel-header-top {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 12px;\n\n        .header-actions {\n          display: flex;\n          align-items: center;\n          gap: 10px;\n          width: 100%;\n          \n          .favorites-toggle,\n          .deprecated-toggle {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 6px 12px;\n            border: 1px solid #dee2e6;\n            background: white;\n            border-radius: 20px;\n            font-size: 13px;\n            font-weight: 500;\n            color: #6c757d;\n            cursor: pointer;\n            transition: all 0.2s ease;\n\n            &:hover {\n              background: #f8f9fa;\n              border-color: #adb5bd;\n            }\n\n            i {\n              font-size: 14px;\n            }\n          }\n\n          .favorites-toggle.active {\n            background: #fff3cd;\n            border-color: #ffc107;\n            color: #856404;\n\n            i {\n              color: #ffc107;\n            }\n          }\n\n          .deprecated-toggle.active {\n            background: #ffe4e1;\n            border-color: #ff6b6b;\n            color: #c92a2a;\n\n            i {\n              color: #ff6b6b;\n            }\n          }\n\n          .count-badge {\n            margin-left: 4px;\n            background: #f59e0b;\n            color: white;\n            padding: 2px 6px;\n            border-radius: 10px;\n            font-size: 11px;\n            font-weight: 600;\n            line-height: 1;\n          }\n\n          .deprecated-toggle.active .count-badge {\n            background: #ff6b6b;\n          }\n\n          .component-count {\n            font-size: 13px;\n            color: #6c757d;\n            background: #f8f9fa;\n            padding: 4px 10px;\n            border-radius: 12px;\n            font-weight: 500;\n          }\n        }\n      }\n      \n      .category-filters {\n        margin-bottom: 16px;\n        \n        .filter-pills {\n          display: flex;\n          flex-wrap: wrap;\n          gap: 8px;\n          \n          .category-pill {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 6px 12px;\n            border: 2px solid #e9ecef;\n            background: white;\n            border-radius: 20px;\n            font-size: 13px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            position: relative;\n            overflow: hidden;\n            \n            &:hover {\n              transform: translateY(-1px);\n              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n            }\n            \n            &.active {\n              border-color: var(--pill-color);\n              background: var(--pill-color);\n              color: white;\n              \n              .pill-count {\n                background: rgba(255, 255, 255, 0.3);\n                color: white;\n              }\n            }\n            \n            .pill-name {\n              font-weight: 500;\n            }\n            \n            .pill-count {\n              background: #f1f3f5;\n              padding: 2px 6px;\n              border-radius: 10px;\n              font-size: 11px;\n              font-weight: 600;\n              min-width: 20px;\n              text-align: center;\n            }\n          }\n          \n          .more-button,\n          .clear-filters-button {\n            padding: 6px 12px;\n            border: 1px solid #dee2e6;\n            background: white;\n            border-radius: 20px;\n            font-size: 13px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            color: #6c757d;\n            \n            &:hover {\n              background: #f8f9fa;\n              border-color: #adb5bd;\n            }\n            \n            i {\n              font-size: 11px;\n              margin-right: 4px;\n            }\n          }\n          \n          .clear-filters-button {\n            background: #fee2e2;\n            border-color: #fca5a5;\n            color: #dc2626;\n            \n            &:hover {\n              background: #fca5a5;\n              color: white;\n            }\n          }\n        }\n      }\n      \n      .search-box {\n        margin-bottom: 12px;\n\n        kendo-textbox {\n          width: 100%;\n        }\n\n        // Reduce search input font size\n        ::ng-deep .k-input-inner {\n          font-size: 13px;\n        }\n      }\n\n      // New filter toggle button\n      .filter-toggle-btn {\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 6px 10px;\n        border: 1px solid #ced4da;\n        background: white;\n        border-radius: 4px;\n        font-size: 13px;\n        color: #495057;\n        cursor: pointer;\n        transition: all 0.2s ease;\n\n        &:hover {\n          background: #e9ecef;\n          border-color: #adb5bd;\n        }\n\n        &.active {\n          background: #e7f3ff;\n          border-color: #1e40af;\n          color: #1e40af;\n        }\n\n        i {\n          font-size: 13px;\n        }\n\n        .filter-count-badge {\n          position: absolute;\n          top: -6px;\n          right: -6px;\n          background: #1e40af;\n          color: white;\n          padding: 2px 6px;\n          border-radius: 10px;\n          font-size: 10px;\n          font-weight: 600;\n          line-height: 1;\n          min-width: 18px;\n          text-align: center;\n        }\n      }\n\n      // Collapsible filter panel\n      .filter-panel {\n        background: #f8f9fa;\n        border: 1px solid #dee2e6;\n        border-radius: 8px;\n        margin-bottom: 12px;\n        overflow: hidden;\n        animation: slideDown 0.2s ease;\n      }\n\n      @keyframes slideDown {\n        from {\n          opacity: 0;\n          transform: translateY(-10px);\n        }\n        to {\n          opacity: 1;\n          transform: translateY(0);\n        }\n      }\n\n      .filter-panel-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 8px 12px;\n        background: #e9ecef;\n        cursor: pointer;\n        font-weight: 600;\n        font-size: 12px;\n        color: #495057;\n        user-select: none;\n\n        &:hover {\n          background: #dee2e6;\n        }\n\n        i {\n          margin-right: 4px;\n          font-size: 10px;\n        }\n\n        .filter-count-text {\n          font-size: 11px;\n          font-weight: 500;\n          color: #6c757d;\n        }\n      }\n\n      .filter-panel-content {\n        padding: 14px;\n      }\n\n      .filter-section {\n        margin-bottom: 16px;\n\n        &:last-child {\n          margin-bottom: 0;\n        }\n\n        .filter-section-label {\n          display: block;\n          font-size: 12px;\n          font-weight: 600;\n          color: #495057;\n          margin-bottom: 8px;\n          text-transform: uppercase;\n          letter-spacing: 0.5px;\n        }\n\n        .filter-options {\n          display: flex;\n          flex-direction: column;\n          gap: 8px;\n        }\n\n        .filter-checkbox {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          cursor: pointer;\n          font-size: 13px;\n          color: #212529;\n          padding: 6px 0;\n\n          input[type=\"checkbox\"] {\n            width: 16px;\n            height: 16px;\n            cursor: pointer;\n          }\n\n          span {\n            user-select: none;\n          }\n\n          .deprecated-count {\n            color: #6c757d;\n            font-size: 12px;\n            margin-left: 4px;\n          }\n        }\n\n        .category-pills-grid {\n          display: flex;\n          flex-wrap: wrap;\n          gap: 6px;\n        }\n\n        .category-pill-compact {\n          display: inline-flex;\n          align-items: center;\n          gap: 4px;\n          padding: 5px 10px;\n          border: 2px solid #e9ecef;\n          background: white;\n          border-radius: 16px;\n          font-size: 12px;\n          font-weight: 500;\n          color: #495057;\n          cursor: pointer;\n          transition: all 0.15s ease;\n\n          &:hover {\n            border-color: #adb5bd;\n            transform: translateY(-1px);\n          }\n\n          &.active {\n            border-color: var(--pill-color, #6366f1);\n            background: var(--pill-color, #6366f1);\n            color: white;\n          }\n\n          .pill-name {\n            font-weight: 500;\n          }\n\n          .pill-count {\n            font-size: 11px;\n            opacity: 0.8;\n          }\n        }\n\n        .show-more-categories-btn {\n          padding: 5px 10px;\n          border: 1px dashed #dee2e6;\n          background: white;\n          border-radius: 16px;\n          font-size: 12px;\n          color: #6c757d;\n          cursor: pointer;\n          transition: all 0.15s ease;\n\n          &:hover {\n            background: #f8f9fa;\n            border-color: #adb5bd;\n          }\n\n          i {\n            margin-right: 4px;\n            font-size: 10px;\n          }\n        }\n      }\n\n      .filter-panel-footer {\n        margin-top: 12px;\n        padding-top: 12px;\n        border-top: 1px solid #dee2e6;\n\n        .clear-all-btn {\n          width: 100%;\n          padding: 8px;\n          border: 1px solid #dc3545;\n          background: white;\n          border-radius: 6px;\n          font-size: 13px;\n          font-weight: 500;\n          color: #dc3545;\n          cursor: pointer;\n          transition: all 0.15s ease;\n\n          &:hover {\n            background: #dc3545;\n            color: white;\n          }\n\n          i {\n            margin-right: 6px;\n          }\n        }\n      }\n    }\n\n    .components-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 16px;\n      \n      .loading-message,\n      .empty-message {\n        padding: 48px 24px;\n        text-align: center;\n        color: #6c757d;\n        font-size: 14px;\n        \n        i {\n          margin-right: 8px;\n        }\n      }\n      \n      .component-card {\n        background: white;\n        border: 1px solid #dee2e6;\n        border-radius: 8px;\n        margin-bottom: 12px;\n        transition: all 0.2s ease;\n        \n        &:hover {\n          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n        }\n        \n        &.expanded {\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n          border-color: #6366f1;\n        }\n        \n        &.running {\n          border-color: #10b981;\n          box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n          background: linear-gradient(to right, rgba(16, 185, 129, 0.03) 0%, white 100%);\n          \n          .card-header {\n            &::before {\n              content: '';\n              position: absolute;\n              left: 0;\n              top: 0;\n              bottom: 0;\n              width: 4px;\n              background: #10b981;\n            }\n          }\n        }\n        \n        &.file-loaded {\n          background: linear-gradient(135deg, #f0f8ff 0%, white 100%);\n          border-style: dashed;\n          border-color: #3b82f6;\n          \n          &:hover {\n            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);\n          }\n          \n          &.expanded {\n            border-style: solid;\n            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);\n          }\n        }\n        \n        .card-header {\n          display: flex;\n          align-items: center;\n          padding: 16px;\n          cursor: pointer;\n          user-select: none;\n          position: relative;\n          \n          &:hover {\n            background: #f8f9fa;\n          }\n          \n          .card-icon {\n            font-size: 24px;\n            margin-right: 16px;\n            width: 32px;\n            text-align: center;\n            flex-shrink: 0;\n          }\n          \n          .favorite-btn {\n            position: absolute;\n            top: 12px;\n            right: 48px; // Leave room for chevron\n            background: white;\n            border: 1px solid #dee2e6;\n            border-radius: 50%;\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            color: #6c757d;\n            \n            &:hover {\n              background: #f8f9fa;\n              transform: scale(1.1);\n            }\n            \n            &.is-favorite {\n              color: #ffc107;\n              border-color: #ffc107;\n              background: #fff3cd;\n              \n              &:hover {\n                background: #ffe69c;\n              }\n            }\n            \n            i {\n              font-size: 14px;\n            }\n          }\n          \n          .card-info {\n            flex: 1;\n            min-width: 0;\n            \n            .card-name {\n              font-size: 15px;\n              font-weight: 600;\n              color: #212529;\n              margin-bottom: 4px;\n              white-space: nowrap;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              display: flex;\n              align-items: center;\n              gap: 8px;\n              \n              .file-badge {\n                display: inline-flex;\n                align-items: center;\n                gap: 4px;\n                padding: 2px 6px;\n                background: #e0f2fe;\n                color: #0369a1;\n                border-radius: 4px;\n                font-size: 11px;\n                font-weight: 500;\n                flex-shrink: 0;\n                \n                i {\n                  font-size: 10px;\n                }\n              }\n            }\n            \n            .card-meta {\n              display: flex;\n              align-items: center;\n              gap: 8px;\n              font-size: 12px;\n              color: #6c757d;\n              \n              .card-type {\n                font-weight: 500;\n              }\n              \n              .card-version {\n                color: #868e96;\n              }\n              \n              .status-badge {\n                padding: 2px 6px;\n                border-radius: 10px;\n                font-size: 10px;\n                font-weight: 600;\n                text-transform: uppercase;\n                letter-spacing: 0.3px;\n                \n                &.published {\n                  background: #d1fae5;\n                  color: #065f46;\n                }\n                \n                &.draft {\n                  background: #fef3c7;\n                  color: #92400e;\n                }\n\n                &.deprecated {\n                  background: #ffe4e1;\n                  color: #c92a2a;\n                  border: 1px solid #ff6b6b;\n                }\n\n                &.file {\n                  background: #e0f2fe;\n                  color: #0369a1;\n                }\n                \n                &.text {\n                  background: #f3e8ff;\n                  color: #6b21a8;\n                }\n              }\n            }\n            \n            .card-namespace {\n              margin-top: 8px;\n              \n              .namespace-chip {\n                display: inline-flex;\n                align-items: center;\n                gap: 6px;\n                padding: 4px 10px;\n                border-radius: 16px;\n                font-size: 12px;\n                font-weight: 500;\n                color: white;\n                \n                i {\n                  font-size: 11px;\n                  opacity: 0.9;\n                }\n              }\n            }\n          }\n          \n          .card-chevron {\n            color: #6c757d;\n            font-size: 12px;\n            margin-left: 12px;\n            transition: transform 0.2s ease;\n          }\n        }\n        \n        .card-details {\n          padding: 0 16px 16px 16px;\n          border-top: 1px solid #e9ecef;\n          animation: slideDown 0.2s ease;\n          \n          .detail-section {\n            margin-top: 16px;\n            \n            label {\n              display: block;\n              font-size: 11px;\n              font-weight: 600;\n              color: #6c757d;\n              text-transform: uppercase;\n              letter-spacing: 0.5px;\n              margin-bottom: 8px;\n            }\n            \n            p {\n              margin: 0;\n              font-size: 13px;\n              color: #495057;\n              line-height: 1.5;\n            }\n            \n            .info-grid {\n              display: grid;\n              grid-template-columns: 1fr 1fr;\n              gap: 8px;\n              \n              .info-item {\n                display: flex;\n                align-items: baseline;\n                gap: 6px;\n                font-size: 13px;\n                \n                .info-label {\n                  font-weight: 500;\n                  color: #6c757d;\n                  min-width: 50px;\n                }\n                \n                .info-value {\n                  color: #212529;\n                }\n              }\n            }\n          }\n          \n          .card-actions {\n            margin-top: 16px;\n            display: flex;\n            gap: 8px;\n            \n            button {\n              flex: 1;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  .component-display {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: white;\n    position: relative;\n    overflow: hidden;\n    \n    .empty-state {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      color: #868e96;\n      padding: 48px;\n      text-align: center;\n      \n      i {\n        color: #dee2e6;\n        margin-bottom: 24px;\n      }\n      \n      h2 {\n        margin: 0 0 12px 0;\n        font-size: 24px;\n        font-weight: 600;\n        color: #495057;\n      }\n      \n      p {\n        margin: 0;\n        font-size: 14px;\n        max-width: 400px;\n      }\n    }\n    \n    .error-display {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 24px;\n      background: #f8f9fa;\n      \n      .error-container {\n        width: 100%;\n        max-width: 600px;\n        background: white;\n        border: 2px solid #dc3545;\n        border-radius: 8px;\n        padding: 24px;\n        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15);\n        \n        .error-header {\n          display: flex;\n          align-items: center;\n          gap: 12px;\n          margin-bottom: 20px;\n          color: #dc3545;\n          position: relative;\n          \n          i {\n            font-size: 24px;\n          }\n          \n          h3 {\n            margin: 0;\n            font-size: 20px;\n            flex: 1;\n          }\n          \n          .copy-button {\n            background: white;\n            border: 1px solid #dee2e6;\n            border-radius: 4px;\n            padding: 6px 10px;\n            cursor: pointer;\n            color: #6c757d;\n            transition: all 0.2s;\n            \n            &:hover {\n              background: #e9ecef;\n              color: #495057;\n            }\n            \n            i {\n              font-size: 14px;\n            }\n          }\n        }\n        \n        .error-intro {\n          color: #495057;\n          margin-bottom: 20px;\n          font-size: 14px;\n        }\n        \n        .error-details {\n          background: #f8f9fa;\n          border: 1px solid #dee2e6;\n          border-radius: 4px;\n          padding: 16px;\n          margin-bottom: 20px;\n          font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n          font-size: 13px;\n          \n          .technical-details {\n            margin-top: 12px;\n            \n            summary {\n              cursor: pointer;\n              color: #0066cc;\n              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n              \n              &:hover {\n                text-decoration: underline;\n              }\n            }\n            \n            pre {\n              margin-top: 8px;\n              white-space: pre-wrap;\n              word-break: break-word;\n              font-size: 11px;\n              color: #495057;\n              max-height: 200px;\n              overflow-y: auto;\n            }\n          }\n        }\n        \n        .error-help {\n          background: #e7f3ff;\n          border: 1px solid #b3d9ff;\n          border-radius: 4px;\n          padding: 16px;\n          margin-bottom: 20px;\n          font-size: 13px;\n          \n          strong {\n            display: block;\n            margin-bottom: 8px;\n            font-size: 14px;\n            color: #0066cc;\n          }\n          \n          ol {\n            margin: 0;\n            padding-left: 20px;\n            \n            li {\n              margin-bottom: 4px;\n              color: #495057;\n            }\n          }\n        }\n        \n        .error-actions {\n          display: flex;\n          gap: 12px;\n          \n          button {\n            min-width: 100px;\n          }\n        }\n      }\n    }\n    \n    mj-react-component {\n      flex: 1;\n      width: 100%;\n      height: 100%;\n      display: block;\n      overflow-y: auto;\n      overflow-x: hidden;\n    }\n    \n    // Component and editor splitter\n    .component-editor-splitter {\n      height: 100%;\n      overflow: hidden;\n      \n      ::ng-deep .k-splitter-bar {\n        background: #6366f1;  // Same blue as Import button\n        width: 6px;  // Make it slightly wider for visibility\n        \n        &:hover {\n          background: #4f52d9;  // Darker blue on hover\n        }\n        \n        .k-resize-handle {\n          background-color: rgba(255, 255, 255, 0.3);\n        }\n      }\n      \n      ::ng-deep .k-pane {\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n      }\n    }\n    \n    // Component runtime area\n    .component-runtime {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: white;\n      position: relative;\n      overflow-y: auto;\n      overflow-x: hidden;\n      \n      .run-empty-state {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        padding: 48px;\n        text-align: center;\n        \n        i {\n          color: #10b981;\n          margin-bottom: 24px;\n        }\n        \n        h3 {\n          margin: 0 0 12px 0;\n          font-size: 20px;\n          font-weight: 600;\n          color: #212529;\n        }\n        \n        p {\n          margin: 0 0 24px 0;\n          font-size: 14px;\n          color: #6c757d;\n          max-width: 400px;\n        }\n      }\n    }\n    \n    // Editor tabs on the right\n    .editor-tabs {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      \n      ::ng-deep .k-tabstrip-items-wrapper {\n        background: #f8f9fa;\n        border-bottom: 2px solid #dee2e6;\n        flex-shrink: 0;\n      }\n      \n      ::ng-deep .k-tabstrip-content {\n        flex: 1;\n        padding: 0;\n        overflow: hidden;\n        min-height: 0;\n        display: flex;\n        flex-direction: column;\n      }\n      \n      ::ng-deep .k-item.k-tabstrip-item {\n        font-weight: 500;\n        \n        &.k-active {\n          background: white;\n          border-bottom-color: white;\n        }\n      }\n    }\n    \n    .tab-content {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      \n      &.spec-tab, &.code-tab {\n        height: 100%;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        \n        .editor-header {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          padding: 12px 16px;\n          background: #f8f9fa;\n          border-bottom: 1px solid #dee2e6;\n          flex-shrink: 0;\n          min-width: 0;  // Fix width issue\n          \n          h4 {\n            margin: 0;\n            font-size: 14px;\n            font-weight: 600;\n            color: #495057;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            flex-shrink: 1;  // Allow title to shrink\n            min-width: 0;  // Prevent overflow\n            \n            i {\n              color: #6366f1;\n              flex-shrink: 0;  // Keep icon from shrinking\n            }\n          }\n          \n          .editor-actions {\n            display: flex;\n            gap: 8px;\n            flex-shrink: 0;  // Prevent buttons from shrinking\n            \n            button {\n              min-width: auto;\n              padding: 4px 12px;\n              font-size: 13px;\n              white-space: nowrap;  // Prevent button text wrapping\n            }\n          }\n        }\n        \n        .editor-wrapper {\n          flex: 1;\n          overflow-y: auto;\n          overflow-x: hidden;\n          min-height: 0;\n          position: relative;\n        }\n        \n        ::ng-deep .monaco-editor {\n          border: 1px solid #dee2e6;\n        }\n      }\n      \n      .code-sections {\n        height: 100%;\n        \n        ::ng-deep .k-panelbar-item-header {\n          background: #f8f9fa;\n          font-weight: 500;\n          font-size: 14px;\n        }\n        \n        ::ng-deep .k-panelbar-content {\n          padding: 0;\n        }\n      }\n    }\n  }\n}\n\n// Removed tree view styles - using modern category filters instead\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.DialogService }, { type: i0.ViewContainerRef }, { type: i2.MJNotificationService }], { fileInput: [{
             type: ViewChild,
             args: ['fileInput', { static: false }]
         }], onDocumentClick: [{
             type: HostListener,
             args: ['document:click', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentStudioDashboardComponent, { className: "ComponentStudioDashboardComponent", filePath: "src/ComponentStudio/component-studio-dashboard.component.ts", lineNumber: 52 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentStudioDashboardComponent, { className: "ComponentStudioDashboardComponent", filePath: "src/ComponentStudio/component-studio-dashboard.component.ts", lineNumber: 53 }); })();
 /**
  * Function to prevent tree shaking of the ComponentStudioDashboardComponent.
  */