@memberjunction/ng-dashboards 2.100.3 → 2.101.0

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

@@ -29,11 +29,11 @@ const _forTrack0 = ($index, $item) => $item.name;
 function _forTrack1($index, $item) { return this.getComponentId($item); }
 const _forTrack2 = ($index, $item) => $item.title;
 function ComponentStudioDashboardComponent_Conditional_10_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 36);
+    i0.ɵɵelement(0, "span", 37);
     i0.ɵɵtext(1, " Show Details ");
 } }
 function ComponentStudioDashboardComponent_Conditional_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 37);
+    i0.ɵɵelement(0, "span", 38);
     i0.ɵɵtext(1, " Hide Details ");
 } }
 function ComponentStudioDashboardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
@@ -50,40 +50,40 @@ 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", 38);
+    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.ɵɵelement(2, "i", 39);
+    i0.ɵɵelement(2, "i", 40);
     i0.ɵɵtext(3, " Import from File ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 38);
+    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.ɵɵelement(5, "i", 40);
+    i0.ɵɵelement(5, "i", 41);
     i0.ɵɵtext(6, " 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", 38);
+    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", 43);
+    i0.ɵɵelement(2, "i", 44);
     i0.ɵɵtext(3, " Export to Artifact ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 38);
+    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", 39);
+    i0.ɵɵelement(5, "i", 40);
     i0.ɵɵtext(6, " Export to File ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 38);
+    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", 44);
+    i0.ɵɵelement(8, "i", 45);
     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", 41)(1, "button", 9);
+    i0.ɵɵelementStart(0, "div", 42)(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", 42);
+    i0.ɵɵelement(2, "span", 43);
     i0.ɵɵtext(3, " Export ");
     i0.ɵɵelement(4, "span", 11);
     i0.ɵɵelementEnd();
@@ -98,21 +98,29 @@ function ComponentStudioDashboardComponent_Conditional_17_Template(rf, ctx) { if
     i0.ɵɵconditional(ctx_r2.exportDropdownOpen ? 5 : -1);
 } }
 function ComponentStudioDashboardComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 45);
+    i0.ɵɵelement(0, "i", 46);
     i0.ɵɵtext(1, " Favorites ");
 } }
 function ComponentStudioDashboardComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 46);
+    i0.ɵɵelement(0, "i", 47);
     i0.ɵɵtext(1, " All ");
 } }
-function ComponentStudioDashboardComponent_Conditional_37_For_2_Template(rf, ctx) { if (rf & 1) {
+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_40_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 50);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_37_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", 51);
+    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);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 52);
+    i0.ɵɵelementStart(3, "span", 55);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -125,41 +133,41 @@ function ComponentStudioDashboardComponent_Conditional_37_For_2_Template(rf, ctx
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(category_r8.count);
 } }
-function ComponentStudioDashboardComponent_Conditional_37_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 54);
+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_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 55);
+function ComponentStudioDashboardComponent_Conditional_40_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 58);
     i0.ɵɵtext(1);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" +", ctx_r2.availableCategories.length - 5, " more ");
 } }
-function ComponentStudioDashboardComponent_Conditional_37_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_40_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 53);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_37_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_37_Conditional_3_Conditional_1_Template, 2, 0)(2, ComponentStudioDashboardComponent_Conditional_37_Conditional_3_Conditional_2_Template, 2, 1);
+    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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.showAllCategories ? 1 : 2);
 } }
-function ComponentStudioDashboardComponent_Conditional_37_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_40_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 56);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_37_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", 57);
+    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 ");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵrepeaterCreate(1, ComponentStudioDashboardComponent_Conditional_37_For_2_Template, 5, 6, "button", 47, _forTrack0);
-    i0.ɵɵtemplate(3, ComponentStudioDashboardComponent_Conditional_37_Conditional_3_Template, 3, 1, "button", 48)(4, ComponentStudioDashboardComponent_Conditional_37_Conditional_4_Template, 3, 0, "button", 49);
+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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -170,35 +178,35 @@ function ComponentStudioDashboardComponent_Conditional_37_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.selectedCategories.size > 0 ? 4 : -1);
 } }
-function ComponentStudioDashboardComponent_ng_template_40_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 58);
+function ComponentStudioDashboardComponent_ng_template_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 61);
 } }
-function ComponentStudioDashboardComponent_Conditional_42_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 31);
-    i0.ɵɵelement(1, "i", 59);
+function ComponentStudioDashboardComponent_Conditional_45_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵelement(1, "i", 62);
     i0.ɵɵtext(2, " Loading components... ");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_43_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32);
-    i0.ɵɵelement(1, "i", 60);
+function ComponentStudioDashboardComponent_Conditional_46_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵelement(1, "i", 63);
     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_44_For_1_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 45);
-} }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 46);
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 47);
+} }
+function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 80);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_44_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_44_For_1_Conditional_4_Conditional_1_Template, 1, 0, "i", 45)(2, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_4_Conditional_2_Template, 1, 0, "i", 46);
+    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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const component_r12 = i0.ɵɵnextContext().$implicit;
@@ -208,12 +216,12 @@ function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_4_Te
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.isFavorite(component_r12) ? 1 : 2);
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 40);
+function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 41);
     i0.ɵɵtext(1, " Text Import ");
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 39);
+function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 40);
     i0.ɵɵtext(1);
 } if (rf & 2) {
     const component_r12 = i0.ɵɵnextContext(2).$implicit;
@@ -221,9 +229,9 @@ function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_8_Co
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.getComponentFilename(component_r12), " ");
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 69);
-    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_8_Conditional_1_Template, 2, 0)(2, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_8_Conditional_2_Template, 2, 1);
+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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const component_r12 = i0.ɵɵnextContext().$implicit;
@@ -232,41 +240,46 @@ function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_8_Te
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.getComponentStatus(component_r12) === "Text" ? 1 : 2);
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_14_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 81);
+function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_14_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 85);
     i0.ɵɵtext(1, "Text");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 82);
+function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 86);
     i0.ɵɵtext(1, "File");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_14_Conditional_0_Template, 2, 0, "span", 81)(1, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_14_Conditional_1_Template, 2, 0, "span", 82);
+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);
 } if (rf & 2) {
     const component_r12 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r2.getComponentStatus(component_r12) === "Text" ? 0 : 1);
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 73);
+function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 76);
+    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);
     i0.ɵɵtext(1, "Published");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 74);
+function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 78);
     i0.ɵɵtext(1, "Draft");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 54);
+function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 57);
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 55);
+function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 58);
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 83)(1, "label");
+function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 87)(1, "label");
     i0.ɵɵtext(2, "Description");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "p");
@@ -278,11 +291,11 @@ function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_C
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.getComponentDescription(component_r12));
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 85)(1, "span", 86);
+function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 89)(1, "span", 90);
     i0.ɵɵtext(2, "Loaded:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 87);
+    i0.ɵɵelementStart(3, "span", 91);
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "date");
     i0.ɵɵelementEnd()();
@@ -292,11 +305,11 @@ function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_C
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r2.getComponentLoadedAt(component_r12), "short"));
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 85)(1, "span", 86);
+function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 89)(1, "span", 90);
     i0.ɵɵtext(2, "Updated:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 87);
+    i0.ɵɵelementStart(3, "span", 91);
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "date");
     i0.ɵɵelementEnd()();
@@ -306,64 +319,64 @@ function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_C
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r2.getComponentUpdatedAt(component_r12), "short"));
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_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", 90);
+    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.ɵɵtext(2, " Stop Component ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "error");
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 91);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_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", 92);
+    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);
     i0.ɵɵtext(2, " Switch to This Component ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "base");
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_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", 92);
+    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.ɵɵtext(2, " Run Component ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "primary");
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 79);
-    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Conditional_1_Template, 5, 1, "div", 83);
-    i0.ɵɵelementStart(2, "div", 83)(3, "label");
+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");
     i0.ɵɵtext(4, "Component Info");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 84)(6, "div", 85)(7, "span", 86);
+    i0.ɵɵelementStart(5, "div", 88)(6, "div", 89)(7, "span", 90);
     i0.ɵɵtext(8, "Type:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 87);
+    i0.ɵɵelementStart(9, "span", 91);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 85)(12, "span", 86);
+    i0.ɵɵelementStart(11, "div", 89)(12, "span", 90);
     i0.ɵɵtext(13, "Version:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "span", 87);
+    i0.ɵɵelementStart(14, "span", 91);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 85)(17, "span", 86);
+    i0.ɵɵelementStart(16, "div", 89)(17, "span", 90);
     i0.ɵɵtext(18, "Status:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "span", 87);
+    i0.ɵɵelementStart(19, "span", 91);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(21, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Conditional_21_Template, 6, 4, "div", 85)(22, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Conditional_22_Template, 6, 4, "div", 85);
+    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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(23, "div", 88);
-    i0.ɵɵtemplate(24, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Conditional_24_Template, 3, 1, "button", 7)(25, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Conditional_25_Template, 3, 1, "button", 89)(26, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Conditional_26_Template, 3, 1, "button", 7);
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
     const component_r12 = i0.ɵɵnextContext().$implicit;
@@ -381,34 +394,34 @@ function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_T
     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);
 } }
-function ComponentStudioDashboardComponent_Conditional_44_For_1_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_47_For_1_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 62)(1, "div", 63);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_44_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", 64);
-    i0.ɵɵelement(3, "i", 65);
+    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);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_4_Template, 3, 4, "button", 66);
-    i0.ɵɵelementStart(5, "div", 67)(6, "div", 68);
+    i0.ɵɵtemplate(4, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_4_Template, 3, 4, "button", 69);
+    i0.ɵɵelementStart(5, "div", 70)(6, "div", 71);
     i0.ɵɵtext(7);
-    i0.ɵɵtemplate(8, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_8_Template, 3, 2, "span", 69);
+    i0.ɵɵtemplate(8, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_8_Template, 3, 2, "span", 72);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 70)(10, "span", 71);
+    i0.ɵɵelementStart(9, "div", 73)(10, "span", 74);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 72);
+    i0.ɵɵelementStart(12, "span", 75);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(14, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_14_Template, 2, 1)(15, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_15_Template, 2, 0, "span", 73)(16, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_16_Template, 2, 0, "span", 74);
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 75)(18, "span", 76);
-    i0.ɵɵelement(19, "i", 77);
-    i0.ɵɵtext(20);
+    i0.ɵɵelementStart(18, "div", 79)(19, "span", 80);
+    i0.ɵɵelement(20, "i", 81);
+    i0.ɵɵtext(21);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(21, "div", 78);
-    i0.ɵɵtemplate(22, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_22_Template, 1, 0, "i", 54)(23, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_23_Template, 1, 0, "i", 55);
+    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.ɵɵelementEnd()();
-    i0.ɵɵtemplate(24, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Template, 27, 6, "div", 79);
+    i0.ɵɵtemplate(25, ComponentStudioDashboardComponent_Conditional_47_For_1_Conditional_25_Template, 27, 6, "div", 83);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const component_r12 = ctx.$implicit;
@@ -429,25 +442,25 @@ function ComponentStudioDashboardComponent_Conditional_44_For_1_Template(rf, ctx
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("v", ctx_r2.getComponentVersion(component_r12), "");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.isFileLoadedComponent(component_r12) ? 14 : ctx_r2.getComponentStatus(component_r12) === "Published" ? 15 : 16);
-    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r2.isFileLoadedComponent(component_r12) ? 14 : ctx_r2.getComponentStatus(component_r12) === "Deprecated" ? 15 : ctx_r2.getComponentStatus(component_r12) === "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.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.formatNamespace(ctx_r2.getComponentNamespace(component_r12)), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.expandedComponent && ctx_r2.getComponentId(ctx_r2.expandedComponent) === ctx_r2.getComponentId(component_r12) ? 22 : 23);
+    i0.ɵɵconditional(ctx_r2.expandedComponent && ctx_r2.getComponentId(ctx_r2.expandedComponent) === ctx_r2.getComponentId(component_r12) ? 23 : 24);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.expandedComponent && ctx_r2.getComponentId(ctx_r2.expandedComponent) === ctx_r2.getComponentId(component_r12) ? 24 : -1);
+    i0.ɵɵconditional(ctx_r2.expandedComponent && ctx_r2.getComponentId(ctx_r2.expandedComponent) === ctx_r2.getComponentId(component_r12) ? 25 : -1);
 } }
-function ComponentStudioDashboardComponent_Conditional_44_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ComponentStudioDashboardComponent_Conditional_44_For_1_Template, 25, 21, "div", 61, _forTrack1, true);
+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);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵrepeater(ctx_r2.filteredComponents);
 } }
-function ComponentStudioDashboardComponent_Conditional_47_Conditional_3_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "details", 108)(1, "summary");
+function ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "details", 111)(1, "summary");
     i0.ɵɵtext(2, "Technical Details (click to expand)");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "pre");
@@ -458,21 +471,21 @@ function ComponentStudioDashboardComponent_Conditional_47_Conditional_3_Conditio
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.formatTechnicalDetails(ctx_r2.currentError.technicalDetails));
 } }
-function ComponentStudioDashboardComponent_Conditional_47_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 99)(1, "div", 101)(2, "div", 102);
-    i0.ɵɵelement(3, "i", 103);
+    i0.ɵɵelementStart(0, "div", 103)(1, "div", 105)(2, "div", 106);
+    i0.ɵɵelement(3, "i", 48);
     i0.ɵɵelementStart(4, "h3");
     i0.ɵɵtext(5, "Component Error");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 104);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_47_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", 105);
+    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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "p", 106);
+    i0.ɵɵelementStart(8, "p", 109);
     i0.ɵɵtext(9, " The component could not be rendered due to the following error: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 107)(11, "strong");
+    i0.ɵɵelementStart(10, "div", 110)(11, "strong");
     i0.ɵɵtext(12, "Error Type:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(13);
@@ -481,9 +494,9 @@ function ComponentStudioDashboardComponent_Conditional_47_Conditional_3_Conditio
     i0.ɵɵtext(16, "Message:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(17);
-    i0.ɵɵtemplate(18, ComponentStudioDashboardComponent_Conditional_47_Conditional_3_Conditional_0_Conditional_18_Template, 5, 1, "details", 108);
+    i0.ɵɵtemplate(18, ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditional_0_Conditional_18_Template, 5, 1, "details", 111);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 109)(20, "strong");
+    i0.ɵɵelementStart(19, "div", 112)(20, "strong");
     i0.ɵɵtext(21, "What to do:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(22, "ol")(23, "li");
@@ -498,14 +511,14 @@ function ComponentStudioDashboardComponent_Conditional_47_Conditional_3_Conditio
     i0.ɵɵelementStart(29, "li");
     i0.ɵɵtext(30, "Contact your system administrator if the issue persists");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(31, "div", 110)(32, "button", 111);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_47_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", 112);
+    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.ɵɵtext(34, " Retry ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(35, "button", 9);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_47_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", 90);
+    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.ɵɵtext(37, " Stop ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -519,34 +532,34 @@ function ComponentStudioDashboardComponent_Conditional_47_Conditional_3_Conditio
     i0.ɵɵadvance(17);
     i0.ɵɵproperty("themeColor", "error");
 } }
-function ComponentStudioDashboardComponent_Conditional_47_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_50_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-react-component", 113);
-    i0.ɵɵlistener("componentEvent", function ComponentStudioDashboardComponent_Conditional_47_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_47_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)); });
+    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)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("component", ctx_r2.componentSpec);
 } }
-function ComponentStudioDashboardComponent_Conditional_47_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ComponentStudioDashboardComponent_Conditional_47_Conditional_3_Conditional_0_Template, 38, 4, "div", 99)(1, ComponentStudioDashboardComponent_Conditional_47_Conditional_3_Conditional_1_Template, 1, 1, "mj-react-component", 100);
+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);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r2.currentError ? 0 : 1);
 } }
-function ComponentStudioDashboardComponent_Conditional_47_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_50_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 95);
-    i0.ɵɵelement(1, "i", 114);
+    i0.ɵɵelementStart(0, "div", 99);
+    i0.ɵɵelement(1, "i", 117);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 115);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_47_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", 92);
+    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.ɵɵtext(8, " Run Component ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -558,43 +571,43 @@ function ComponentStudioDashboardComponent_Conditional_47_Conditional_4_Template
     i0.ɵɵadvance();
     i0.ɵɵproperty("themeColor", "primary")("size", "large");
 } }
-function ComponentStudioDashboardComponent_Conditional_47_ng_template_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_50_ng_template_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r22 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_47_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", 122);
+    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.ɵɵtext(2, " Apply Changes ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 111);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_47_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", 57);
+    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.ɵɵtext(5, " Cancel ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "primary");
 } }
-function ComponentStudioDashboardComponent_Conditional_47_ng_template_9_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_50_ng_template_9_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r23 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_47_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_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.ɵɵelement(1, "span", 15);
     i0.ɵɵtext(2, " Refresh Component ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "info");
 } }
-function ComponentStudioDashboardComponent_Conditional_47_ng_template_9_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_50_ng_template_9_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 116)(1, "div", 117)(2, "h4");
-    i0.ɵɵelement(3, "i", 118);
+    i0.ɵɵelementStart(0, "div", 119)(1, "div", 120)(2, "h4");
+    i0.ɵɵelement(3, "i", 121);
     i0.ɵɵtext(4, " Component Specification (JSON)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 119);
-    i0.ɵɵtemplate(6, ComponentStudioDashboardComponent_Conditional_47_ng_template_9_Conditional_6_Template, 6, 1)(7, ComponentStudioDashboardComponent_Conditional_47_ng_template_9_Conditional_7_Template, 3, 1, "button", 7);
+    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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 120)(9, "mj-code-editor", 121);
-    i0.ɵɵtwoWayListener("ngModelChange", function ComponentStudioDashboardComponent_Conditional_47_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_47_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", 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.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -606,58 +619,58 @@ function ComponentStudioDashboardComponent_Conditional_47_ng_template_9_Template
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.editableSpec);
     i0.ɵɵproperty("language", "json")("readonly", false);
 } }
-function ComponentStudioDashboardComponent_Conditional_47_ng_template_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_50_ng_template_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_47_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", 122);
+    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.ɵɵtext(2, " Apply Changes ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 111);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_47_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", 57);
+    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.ɵɵtext(5, " Cancel ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "primary");
 } }
-function ComponentStudioDashboardComponent_Conditional_47_ng_template_11_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function ComponentStudioDashboardComponent_Conditional_50_ng_template_11_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r25 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_47_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_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.ɵɵelement(1, "span", 15);
     i0.ɵɵtext(2, " Refresh Component ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "info");
 } }
-function ComponentStudioDashboardComponent_Conditional_47_ng_template_11_For_11_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+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", 128);
-    i0.ɵɵlistener("ngModelChange", function ComponentStudioDashboardComponent_Conditional_47_ng_template_11_For_11_ng_template_1_Template_mj_code_editor_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r26); const ɵ$index_511_r27 = i0.ɵɵnextContext().$index; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onCodeSectionChange($event, ɵ$index_511_r27)); });
+    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)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const section_r28 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("ngModel", section_r28.code)("language", "javascript")("readonly", false);
 } }
-function ComponentStudioDashboardComponent_Conditional_47_ng_template_11_For_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-panelbar-item", 126);
-    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_47_ng_template_11_For_11_ng_template_1_Template, 1, 3, "ng-template", 127);
+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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const section_r28 = ctx.$implicit;
     i0.ɵɵproperty("title", section_r28.title)("expanded", section_r28.expanded);
 } }
-function ComponentStudioDashboardComponent_Conditional_47_ng_template_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 123)(1, "div", 117)(2, "h4");
-    i0.ɵɵelement(3, "i", 124);
+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);
     i0.ɵɵtext(4, " Component Code (JavaScript/React)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 119);
-    i0.ɵɵtemplate(6, ComponentStudioDashboardComponent_Conditional_47_ng_template_11_Conditional_6_Template, 6, 1)(7, ComponentStudioDashboardComponent_Conditional_47_ng_template_11_Conditional_7_Template, 3, 1, "button", 7);
+    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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 120)(9, "kendo-panelbar", 125);
-    i0.ɵɵrepeaterCreate(10, ComponentStudioDashboardComponent_Conditional_47_ng_template_11_For_11_Template, 2, 2, "kendo-panelbar-item", 126, _forTrack2);
+    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.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -668,21 +681,21 @@ function ComponentStudioDashboardComponent_Conditional_47_ng_template_11_Templat
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r2.getComponentCodeSections());
 } }
-function ComponentStudioDashboardComponent_Conditional_47_Conditional_12_Template(rf, ctx) { }
-function ComponentStudioDashboardComponent_Conditional_47_Template(rf, ctx) { if (rf & 1) {
+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", 93)(2, "div", 94);
-    i0.ɵɵtemplate(3, ComponentStudioDashboardComponent_Conditional_47_Conditional_3_Template, 2, 1)(4, ComponentStudioDashboardComponent_Conditional_47_Conditional_4_Template, 9, 4, "div", 95);
+    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);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "kendo-splitter-pane", 93)(6, "div")(7, "kendo-tabstrip", 96);
-    i0.ɵɵlistener("tabSelect", function ComponentStudioDashboardComponent_Conditional_47_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", 97);
-    i0.ɵɵtemplate(9, ComponentStudioDashboardComponent_Conditional_47_ng_template_9_Template, 10, 5, "ng-template", 98);
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "kendo-tabstrip-tab", 97);
-    i0.ɵɵtemplate(11, ComponentStudioDashboardComponent_Conditional_47_ng_template_11_Template, 12, 2, "ng-template", 98);
+    i0.ɵɵelementStart(10, "kendo-tabstrip-tab", 101);
+    i0.ɵɵtemplate(11, ComponentStudioDashboardComponent_Conditional_50_ng_template_11_Template, 12, 2, "ng-template", 102);
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵtemplate(12, ComponentStudioDashboardComponent_Conditional_47_Conditional_12_Template, 0, 0);
+    i0.ɵɵtemplate(12, ComponentStudioDashboardComponent_Conditional_50_Conditional_12_Template, 0, 0);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
@@ -698,9 +711,9 @@ function ComponentStudioDashboardComponent_Conditional_47_Template(rf, ctx) { if
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(!ctx_r2.isDetailsPaneCollapsed ? 12 : -1);
 } }
-function ComponentStudioDashboardComponent_Conditional_48_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35);
-    i0.ɵɵelement(1, "i", 129);
+function ComponentStudioDashboardComponent_Conditional_51_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 36);
+    i0.ɵɵelement(1, "i", 132);
     i0.ɵɵelementStart(2, "h2");
     i0.ɵɵtext(3, "Ready to Test Components");
     i0.ɵɵelementEnd();
@@ -730,6 +743,7 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
     // Favorites
     favoriteComponents = new Set(); // Set of component IDs
     showOnlyFavorites = false; // Filter to show only favorites
+    showDeprecatedComponents = false; // Filter to show/hide deprecated components
     metadata = new Metadata();
     // Error handling
     currentError = null;
@@ -868,6 +882,13 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
         this.showOnlyFavorites = !this.showOnlyFavorites;
         this.combineAndFilterComponents();
     }
+    /**
+     * Toggle showing deprecated components
+     */
+    toggleShowDeprecatedComponents() {
+        this.showDeprecatedComponents = !this.showDeprecatedComponents;
+        this.combineAndFilterComponents();
+    }
     onSearchChange(query) {
         this.searchQuery = query;
         this.combineAndFilterComponents();
@@ -882,7 +903,14 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
         this.buildCategories();
         // Apply filters
         let filtered = [...this.allComponents];
-        // Apply favorites filter first if enabled
+        // Filter out deprecated components unless explicitly shown
+        if (!this.showDeprecatedComponents) {
+            filtered = filtered.filter(c => {
+                const status = this.getComponentStatus(c);
+                return status !== 'Deprecated';
+            });
+        }
+        // Apply favorites filter if enabled
         if (this.showOnlyFavorites) {
             filtered = filtered.filter(c => this.isFavorite(c));
         }
@@ -1813,7 +1841,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: 49, vars: 21, 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"], [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, "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", "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"], [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) {
+        } }, 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) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "div")(4, "h1");
             i0.ɵɵelement(5, "i", 4);
@@ -1848,21 +1876,25 @@ ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify
             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, "span", 24);
-            i0.ɵɵtext(35);
+            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.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(36, "div", 25);
-            i0.ɵɵtemplate(37, ComponentStudioDashboardComponent_Conditional_37_Template, 5, 2, "div", 26);
+            i0.ɵɵelementStart(39, "div", 26);
+            i0.ɵɵtemplate(40, ComponentStudioDashboardComponent_Conditional_40_Template, 5, 2, "div", 27);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(38, "div", 27)(39, "kendo-textbox", 28);
-            i0.ɵɵlistener("valueChange", function ComponentStudioDashboardComponent_Template_kendo_textbox_valueChange_39_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSearchChange($event)); });
-            i0.ɵɵtemplate(40, ComponentStudioDashboardComponent_ng_template_40_Template, 1, 0, "ng-template", 29);
+            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(41, "div", 30);
-            i0.ɵɵtemplate(42, ComponentStudioDashboardComponent_Conditional_42_Template, 3, 0, "div", 31)(43, ComponentStudioDashboardComponent_Conditional_43_Template, 6, 0, "div", 32)(44, ComponentStudioDashboardComponent_Conditional_44_Template, 2, 0);
+            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.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(45, "kendo-splitter-pane", 33)(46, "div", 34);
-            i0.ɵɵtemplate(47, ComponentStudioDashboardComponent_Conditional_47_Template, 13, 8)(48, ComponentStudioDashboardComponent_Conditional_48_Template, 6, 0, "div", 35);
+            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.ɵɵelementEnd()()()();
         } if (rf & 2) {
             i0.ɵɵadvance(10);
@@ -1883,19 +1915,23 @@ ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify
             i0.ɵɵclassProp("active", ctx.showOnlyFavorites);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showOnlyFavorites ? 32 : 33);
+            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.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.availableCategories.length > 0 ? 37 : -1);
+            i0.ɵɵconditional(ctx.availableCategories.length > 0 ? 40 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("value", ctx.searchQuery)("clearButton", true);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.isLoading ? 42 : ctx.filteredComponents.length === 0 ? 43 : 44);
+            i0.ɵɵconditional(ctx.isLoading ? 45 : ctx.filteredComponents.length === 0 ? 46 : 47);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("min", "400px");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.selectedComponent ? 47 : 48);
-        } }, 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            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            &.active {\n              background: #fff3cd;\n              border-color: #ffc107;\n              color: #856404;\n              \n              i {\n                color: #ffc107;\n              }\n            }\n            \n            i {\n              font-size: 14px;\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                &.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 ? 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}"] });
 };
 ComponentStudioDashboardComponent = __decorate([
     RegisterClass(BaseDashboard, 'ComponentStudioDashboard')
@@ -1903,7 +1939,7 @@ 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              <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) === '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            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            &.active {\n              background: #fff3cd;\n              border-color: #ffc107;\n              color: #856404;\n              \n              i {\n                color: #ffc107;\n              }\n            }\n            \n            i {\n              font-size: 14px;\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                &.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}"] }]
+        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: [{
             type: ViewChild,
             args: ['fileInput', { static: false }]