@memberjunction/ng-dashboards 2.94.0 → 2.96.0

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

@@ -9,9 +9,12 @@ import { BaseDashboard } from '../generic/base-dashboard';
 import { RegisterClass } from '@memberjunction/global';
 import { RunView, CompositeKey, Metadata } from '@memberjunction/core';
 import { Subject } from 'rxjs';
+import { MJReactComponent } from '@memberjunction/ng-react';
 import { SharedService } from '@memberjunction/ng-shared';
 import { ParseJSONRecursive } from '@memberjunction/global';
 import { TextImportDialogComponent } from './components/text-import-dialog.component';
+import { ArtifactSelectionDialogComponent } from './components/artifact-selection-dialog.component';
+import { MJNotificationService } from '@memberjunction/ng-notifications';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-dialog";
 import * as i2 from "@angular/common";
@@ -26,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", 35);
+    i0.ɵɵelement(0, "span", 36);
     i0.ɵɵtext(1, " Show Details ");
 } }
 function ComponentStudioDashboardComponent_Conditional_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 36);
+    i0.ɵɵelement(0, "span", 37);
     i0.ɵɵtext(1, " Hide Details ");
 } }
 function ComponentStudioDashboardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
@@ -47,80 +50,116 @@ 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", 37);
+    i0.ɵɵelementStart(0, "div", 12)(1, "button", 38);
     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", 38);
+    i0.ɵɵelement(2, "i", 39);
     i0.ɵɵtext(3, " Import from File ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 37);
+    i0.ɵɵelementStart(4, "button", 38);
     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", 39);
+    i0.ɵɵelement(5, "i", 40);
     i0.ɵɵtext(6, " Import from Text ");
     i0.ɵɵelementEnd()();
 } }
-function ComponentStudioDashboardComponent_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 40);
-    i0.ɵɵtext(1, " Favorites ");
+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.ɵɵ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.ɵɵtext(3, " Export to Artifact ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 38);
+    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.ɵɵtext(6, " Export to File ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 38);
+    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.ɵɵ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.ɵɵ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.ɵɵtext(3, " Export ");
+    i0.ɵɵelement(4, "span", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, ComponentStudioDashboardComponent_Conditional_17_Conditional_5_Template, 10, 0, "div", 12);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("open", ctx_r2.exportDropdownOpen);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("themeColor", "primary");
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r2.exportDropdownOpen ? 5 : -1);
 } }
 function ComponentStudioDashboardComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 41);
+    i0.ɵɵelement(0, "i", 45);
+    i0.ɵɵtext(1, " Favorites ");
+} }
+function ComponentStudioDashboardComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 46);
     i0.ɵɵtext(1, " All ");
 } }
-function ComponentStudioDashboardComponent_Conditional_36_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 45);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_36_For_2_Template_button_click_0_listener() { const category_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleCategory(category_r6.name)); });
-    i0.ɵɵelementStart(1, "span", 46);
+function ComponentStudioDashboardComponent_Conditional_37_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.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 47);
+    i0.ɵɵelementStart(3, "span", 52);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const category_r6 = ctx.$implicit;
+    const category_r8 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("--pill-color", category_r6.color);
-    i0.ɵɵclassProp("active", ctx_r2.isCategorySelected(category_r6.name));
+    i0.ɵɵstyleProp("--pill-color", category_r8.color);
+    i0.ɵɵclassProp("active", ctx_r2.isCategorySelected(category_r8.name));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(category_r6.name);
+    i0.ɵɵtextInterpolate(category_r8.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(category_r6.count);
+    i0.ɵɵtextInterpolate(category_r8.count);
 } }
-function ComponentStudioDashboardComponent_Conditional_36_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 49);
+function ComponentStudioDashboardComponent_Conditional_37_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 54);
     i0.ɵɵtext(1, " Less ");
 } }
-function ComponentStudioDashboardComponent_Conditional_36_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 50);
+function ComponentStudioDashboardComponent_Conditional_37_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 55);
     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_36_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 48);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_36_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleShowAllCategories()); });
-    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_36_Conditional_3_Conditional_1_Template, 2, 0)(2, ComponentStudioDashboardComponent_Conditional_36_Conditional_3_Conditional_2_Template, 2, 1);
+function ComponentStudioDashboardComponent_Conditional_37_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.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.showAllCategories ? 1 : 2);
 } }
-function ComponentStudioDashboardComponent_Conditional_36_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 51);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_36_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.clearCategoryFilters()); });
-    i0.ɵɵelement(1, "i", 52);
+function ComponentStudioDashboardComponent_Conditional_37_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.ɵɵtext(2, " Clear ");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵrepeaterCreate(1, ComponentStudioDashboardComponent_Conditional_36_For_2_Template, 5, 6, "button", 42, _forTrack0);
-    i0.ɵɵtemplate(3, ComponentStudioDashboardComponent_Conditional_36_Conditional_3_Template, 3, 1, "button", 43)(4, ComponentStudioDashboardComponent_Conditional_36_Conditional_4_Template, 3, 0, "button", 44);
+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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -131,284 +170,284 @@ function ComponentStudioDashboardComponent_Conditional_36_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.selectedCategories.size > 0 ? 4 : -1);
 } }
-function ComponentStudioDashboardComponent_ng_template_39_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 53);
+function ComponentStudioDashboardComponent_ng_template_40_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 58);
 } }
-function ComponentStudioDashboardComponent_Conditional_41_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 30);
-    i0.ɵɵelement(1, "i", 54);
+function ComponentStudioDashboardComponent_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵelement(1, "i", 59);
     i0.ɵɵtext(2, " Loading components... ");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_42_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 31);
-    i0.ɵɵelement(1, "i", 55);
+function ComponentStudioDashboardComponent_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵelement(1, "i", 60);
     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_43_For_1_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 40);
+function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 45);
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 41);
+function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 46);
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 75);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_4_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r11); const component_r10 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleFavorite(component_r10, $event)); });
-    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_4_Conditional_1_Template, 1, 0, "i", 40)(2, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_4_Conditional_2_Template, 1, 0, "i", 41);
+function ComponentStudioDashboardComponent_Conditional_44_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.ɵɵelementEnd();
 } if (rf & 2) {
-    const component_r10 = i0.ɵɵnextContext().$implicit;
+    const component_r12 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("is-favorite", ctx_r2.isFavorite(component_r10));
-    i0.ɵɵproperty("title", ctx_r2.isFavorite(component_r10) ? "Remove from favorites" : "Add to favorites");
+    i0.ɵɵclassProp("is-favorite", ctx_r2.isFavorite(component_r12));
+    i0.ɵɵproperty("title", ctx_r2.isFavorite(component_r12) ? "Remove from favorites" : "Add to favorites");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.isFavorite(component_r10) ? 1 : 2);
+    i0.ɵɵconditional(ctx_r2.isFavorite(component_r12) ? 1 : 2);
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 39);
+function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 40);
     i0.ɵɵtext(1, " Text Import ");
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 38);
+function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 39);
     i0.ɵɵtext(1);
 } if (rf & 2) {
-    const component_r10 = i0.ɵɵnextContext(2).$implicit;
+    const component_r12 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.getComponentFilename(component_r10), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getComponentFilename(component_r12), " ");
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 64);
-    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_8_Conditional_1_Template, 2, 0)(2, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_8_Conditional_2_Template, 2, 1);
+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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const component_r10 = i0.ɵɵnextContext().$implicit;
+    const component_r12 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("title", ctx_r2.getComponentStatus(component_r10) === "Text" ? "Imported from text input" : "Loaded from " + ctx_r2.getComponentFilename(component_r10));
+    i0.ɵɵproperty("title", ctx_r2.getComponentStatus(component_r12) === "Text" ? "Imported from text input" : "Loaded from " + ctx_r2.getComponentFilename(component_r12));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.getComponentStatus(component_r10) === "Text" ? 1 : 2);
+    i0.ɵɵconditional(ctx_r2.getComponentStatus(component_r12) === "Text" ? 1 : 2);
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_14_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 76);
+function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_14_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 81);
     i0.ɵɵtext(1, "Text");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 77);
+function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 82);
     i0.ɵɵtext(1, "File");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_14_Conditional_0_Template, 2, 0, "span", 76)(1, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_14_Conditional_1_Template, 2, 0, "span", 77);
+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);
 } if (rf & 2) {
-    const component_r10 = i0.ɵɵnextContext().$implicit;
+    const component_r12 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r2.getComponentStatus(component_r10) === "Text" ? 0 : 1);
+    i0.ɵɵconditional(ctx_r2.getComponentStatus(component_r12) === "Text" ? 0 : 1);
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 68);
+function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 73);
     i0.ɵɵtext(1, "Published");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 69);
+function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 74);
     i0.ɵɵtext(1, "Draft");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 49);
+function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 54);
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 50);
+function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 55);
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 78)(1, "label");
+function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 83)(1, "label");
     i0.ɵɵtext(2, "Description");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "p");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const component_r10 = i0.ɵɵnextContext(2).$implicit;
+    const component_r12 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r2.getComponentDescription(component_r10));
+    i0.ɵɵtextInterpolate(ctx_r2.getComponentDescription(component_r12));
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 80)(1, "span", 81);
+function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 85)(1, "span", 86);
     i0.ɵɵtext(2, "Loaded:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 82);
+    i0.ɵɵelementStart(3, "span", 87);
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "date");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const component_r10 = i0.ɵɵnextContext(2).$implicit;
+    const component_r12 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r2.getComponentLoadedAt(component_r10), "short"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r2.getComponentLoadedAt(component_r12), "short"));
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 80)(1, "span", 81);
+function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 85)(1, "span", 86);
     i0.ɵɵtext(2, "Updated:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 82);
+    i0.ɵɵelementStart(3, "span", 87);
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "date");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const component_r10 = i0.ɵɵnextContext(2).$implicit;
+    const component_r12 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r2.getComponentUpdatedAt(component_r10), "short"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r2.getComponentUpdatedAt(component_r12), "short"));
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
+function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_24_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.stopComponent(); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "span", 85);
+    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.ɵɵtext(2, " Stop Component ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "error");
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 86);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_25_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const component_r10 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.runComponent(component_r10); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "span", 87);
+function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_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.ɵɵtext(2, " Switch to This Component ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "base");
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
+function ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_26_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r14); const component_r10 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.runComponent(component_r10); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "span", 87);
+    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.ɵɵtext(2, " Run Component ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "primary");
 } }
-function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 74);
-    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_1_Template, 5, 1, "div", 78);
-    i0.ɵɵelementStart(2, "div", 78)(3, "label");
+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");
     i0.ɵɵtext(4, "Component Info");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 79)(6, "div", 80)(7, "span", 81);
+    i0.ɵɵelementStart(5, "div", 84)(6, "div", 85)(7, "span", 86);
     i0.ɵɵtext(8, "Type:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 82);
+    i0.ɵɵelementStart(9, "span", 87);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 80)(12, "span", 81);
+    i0.ɵɵelementStart(11, "div", 85)(12, "span", 86);
     i0.ɵɵtext(13, "Version:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "span", 82);
+    i0.ɵɵelementStart(14, "span", 87);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 80)(17, "span", 81);
+    i0.ɵɵelementStart(16, "div", 85)(17, "span", 86);
     i0.ɵɵtext(18, "Status:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "span", 82);
+    i0.ɵɵelementStart(19, "span", 87);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(21, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_21_Template, 6, 4, "div", 80)(22, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_22_Template, 6, 4, "div", 80);
+    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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(23, "div", 83);
-    i0.ɵɵtemplate(24, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_24_Template, 3, 1, "button", 7)(25, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_25_Template, 3, 1, "button", 84)(26, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_26_Template, 3, 1, "button", 7);
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const component_r10 = i0.ɵɵnextContext().$implicit;
+    const component_r12 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.getComponentDescription(component_r10) ? 1 : -1);
+    i0.ɵɵconditional(ctx_r2.getComponentDescription(component_r12) ? 1 : -1);
     i0.ɵɵadvance(9);
-    i0.ɵɵtextInterpolate(ctx_r2.getComponentType(component_r10) || "Unknown");
+    i0.ɵɵtextInterpolate(ctx_r2.getComponentType(component_r12) || "Unknown");
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r2.getComponentVersion(component_r10));
+    i0.ɵɵtextInterpolate(ctx_r2.getComponentVersion(component_r12));
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r2.getComponentStatus(component_r10) || "Draft");
+    i0.ɵɵtextInterpolate(ctx_r2.getComponentStatus(component_r12) || "Draft");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.isFileLoadedComponent(component_r10) ? 21 : !ctx_r2.isFileLoadedComponent(component_r10) && ctx_r2.getComponentUpdatedAt(component_r10) ? 22 : -1);
+    i0.ɵɵconditional(ctx_r2.isFileLoadedComponent(component_r12) ? 21 : !ctx_r2.isFileLoadedComponent(component_r12) && ctx_r2.getComponentUpdatedAt(component_r12) ? 22 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r2.selectedComponent && ctx_r2.getComponentId(ctx_r2.selectedComponent) === ctx_r2.getComponentId(component_r10) && ctx_r2.isRunning ? 24 : ctx_r2.isRunning && ctx_r2.selectedComponent && ctx_r2.getComponentId(ctx_r2.selectedComponent) !== ctx_r2.getComponentId(component_r10) ? 25 : 26);
+    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_43_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 57)(1, "div", 58);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_43_For_1_Template_div_click_1_listener() { const component_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleComponentExpansion(component_r10)); });
-    i0.ɵɵelementStart(2, "div", 59);
-    i0.ɵɵelement(3, "i", 60);
+function ComponentStudioDashboardComponent_Conditional_44_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.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_4_Template, 3, 4, "button", 61);
-    i0.ɵɵelementStart(5, "div", 62)(6, "div", 63);
+    i0.ɵɵtemplate(4, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_4_Template, 3, 4, "button", 66);
+    i0.ɵɵelementStart(5, "div", 67)(6, "div", 68);
     i0.ɵɵtext(7);
-    i0.ɵɵtemplate(8, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_8_Template, 3, 2, "span", 64);
+    i0.ɵɵtemplate(8, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_8_Template, 3, 2, "span", 69);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 65)(10, "span", 66);
+    i0.ɵɵelementStart(9, "div", 70)(10, "span", 71);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 67);
+    i0.ɵɵelementStart(12, "span", 72);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(14, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_14_Template, 2, 1)(15, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_15_Template, 2, 0, "span", 68)(16, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_16_Template, 2, 0, "span", 69);
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 70)(18, "span", 71);
-    i0.ɵɵelement(19, "i", 72);
+    i0.ɵɵelementStart(17, "div", 75)(18, "span", 76);
+    i0.ɵɵelement(19, "i", 77);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(21, "div", 73);
-    i0.ɵɵtemplate(22, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_22_Template, 1, 0, "i", 49)(23, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_23_Template, 1, 0, "i", 50);
+    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.ɵɵelementEnd()();
-    i0.ɵɵtemplate(24, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Template, 27, 6, "div", 74);
+    i0.ɵɵtemplate(24, ComponentStudioDashboardComponent_Conditional_44_For_1_Conditional_24_Template, 27, 6, "div", 79);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const component_r10 = ctx.$implicit;
+    const component_r12 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("expanded", ctx_r2.expandedComponent && ctx_r2.getComponentId(ctx_r2.expandedComponent) === ctx_r2.getComponentId(component_r10))("running", ctx_r2.selectedComponent && ctx_r2.getComponentId(ctx_r2.selectedComponent) === ctx_r2.getComponentId(component_r10) && ctx_r2.isRunning)("file-loaded", ctx_r2.isFileLoadedComponent(component_r10));
+    i0.ɵɵclassProp("expanded", ctx_r2.expandedComponent && ctx_r2.getComponentId(ctx_r2.expandedComponent) === ctx_r2.getComponentId(component_r12))("running", ctx_r2.selectedComponent && ctx_r2.getComponentId(ctx_r2.selectedComponent) === ctx_r2.getComponentId(component_r12) && ctx_r2.isRunning)("file-loaded", ctx_r2.isFileLoadedComponent(component_r12));
     i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("color", ctx_r2.getComponentTypeColor(ctx_r2.getComponentType(component_r10)));
+    i0.ɵɵstyleProp("color", ctx_r2.getComponentTypeColor(ctx_r2.getComponentType(component_r12)));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.getComponentTypeIcon(ctx_r2.getComponentType(component_r10)));
+    i0.ɵɵproperty("ngClass", ctx_r2.getComponentTypeIcon(ctx_r2.getComponentType(component_r12)));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.isFileLoadedComponent(component_r10) ? 4 : -1);
+    i0.ɵɵconditional(!ctx_r2.isFileLoadedComponent(component_r12) ? 4 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.getComponentName(component_r10), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getComponentName(component_r12), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.isFileLoadedComponent(component_r10) ? 8 : -1);
+    i0.ɵɵconditional(ctx_r2.isFileLoadedComponent(component_r12) ? 8 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r2.getComponentType(component_r10) || "Component");
+    i0.ɵɵtextInterpolate(ctx_r2.getComponentType(component_r12) || "Component");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("v", ctx_r2.getComponentVersion(component_r10), "");
+    i0.ɵɵtextInterpolate1("v", ctx_r2.getComponentVersion(component_r12), "");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.isFileLoadedComponent(component_r10) ? 14 : ctx_r2.getComponentStatus(component_r10) === "Published" ? 15 : 16);
+    i0.ɵɵconditional(ctx_r2.isFileLoadedComponent(component_r12) ? 14 : ctx_r2.getComponentStatus(component_r12) === "Published" ? 15 : 16);
     i0.ɵɵadvance(4);
-    i0.ɵɵstyleProp("background-color", ctx_r2.getNamespaceColor(ctx_r2.getComponentNamespace(component_r10)));
-    i0.ɵɵproperty("title", ctx_r2.getComponentNamespace(component_r10) || "Uncategorized");
+    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_r10)), " ");
+    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_r10) ? 22 : 23);
+    i0.ɵɵconditional(ctx_r2.expandedComponent && ctx_r2.getComponentId(ctx_r2.expandedComponent) === ctx_r2.getComponentId(component_r12) ? 22 : 23);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.expandedComponent && ctx_r2.getComponentId(ctx_r2.expandedComponent) === ctx_r2.getComponentId(component_r10) ? 24 : -1);
+    i0.ɵɵconditional(ctx_r2.expandedComponent && ctx_r2.getComponentId(ctx_r2.expandedComponent) === ctx_r2.getComponentId(component_r12) ? 24 : -1);
 } }
-function ComponentStudioDashboardComponent_Conditional_43_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ComponentStudioDashboardComponent_Conditional_43_For_1_Template, 25, 21, "div", 56, _forTrack1, true);
+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);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵrepeater(ctx_r2.filteredComponents);
 } }
-function ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "details", 103)(1, "summary");
+function ComponentStudioDashboardComponent_Conditional_47_Conditional_3_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "details", 108)(1, "summary");
     i0.ɵɵtext(2, "Technical Details (click to expand)");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "pre");
@@ -419,21 +458,21 @@ function ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Conditio
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.formatTechnicalDetails(ctx_r2.currentError.technicalDetails));
 } }
-function ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 94)(1, "div", 96)(2, "div", 97);
-    i0.ɵɵelement(3, "i", 98);
+function ComponentStudioDashboardComponent_Conditional_47_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(4, "h3");
     i0.ɵɵtext(5, "Component Error");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 99);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Conditional_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.copyErrorToClipboard()); });
-    i0.ɵɵelement(7, "i", 100);
+    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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "p", 101);
+    i0.ɵɵelementStart(8, "p", 106);
     i0.ɵɵtext(9, " The component could not be rendered due to the following error: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 102)(11, "strong");
+    i0.ɵɵelementStart(10, "div", 107)(11, "strong");
     i0.ɵɵtext(12, "Error Type:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(13);
@@ -442,9 +481,9 @@ function ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Conditio
     i0.ɵɵtext(16, "Message:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(17);
-    i0.ɵɵtemplate(18, ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Conditional_0_Conditional_18_Template, 5, 1, "details", 103);
+    i0.ɵɵtemplate(18, ComponentStudioDashboardComponent_Conditional_47_Conditional_3_Conditional_0_Conditional_18_Template, 5, 1, "details", 108);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 104)(20, "strong");
+    i0.ɵɵelementStart(19, "div", 109)(20, "strong");
     i0.ɵɵtext(21, "What to do:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(22, "ol")(23, "li");
@@ -459,14 +498,14 @@ function ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Conditio
     i0.ɵɵelementStart(29, "li");
     i0.ɵɵtext(30, "Contact your system administrator if the issue persists");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(31, "div", 105)(32, "button", 106);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Conditional_0_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.retryComponent()); });
-    i0.ɵɵelement(33, "span", 107);
+    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.ɵɵtext(34, " Retry ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(35, "button", 9);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Conditional_0_Template_button_click_35_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.stopComponent()); });
-    i0.ɵɵelement(36, "span", 85);
+    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.ɵɵtext(37, " Stop ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -480,34 +519,34 @@ function ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Conditio
     i0.ɵɵadvance(17);
     i0.ɵɵproperty("themeColor", "error");
 } }
-function ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-react-component", 108);
-    i0.ɵɵlistener("componentEvent", function ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Conditional_1_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onComponentEvent($event)); })("openEntityRecord", function ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Conditional_1_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onOpenEntityRecord($event)); });
+function ComponentStudioDashboardComponent_Conditional_47_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.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("component", ctx_r2.componentSpec);
 } }
-function ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Conditional_0_Template, 38, 4, "div", 94)(1, ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Conditional_1_Template, 1, 1, "mj-react-component", 95);
+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);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r2.currentError ? 0 : 1);
 } }
-function ComponentStudioDashboardComponent_Conditional_46_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 90);
-    i0.ɵɵelement(1, "i", 109);
+function ComponentStudioDashboardComponent_Conditional_47_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 95);
+    i0.ɵɵelement(1, "i", 114);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 110);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_46_Conditional_4_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.runComponent(ctx_r2.selectedComponent)); });
-    i0.ɵɵelement(7, "span", 87);
+    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.ɵɵtext(8, " Run Component ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -519,43 +558,43 @@ function ComponentStudioDashboardComponent_Conditional_46_Conditional_4_Template
     i0.ɵɵadvance();
     i0.ɵɵproperty("themeColor", "primary")("size", "large");
 } }
-function ComponentStudioDashboardComponent_Conditional_46_ng_template_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
+function ComponentStudioDashboardComponent_Conditional_47_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_46_ng_template_9_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.applySpecChanges()); });
-    i0.ɵɵelement(1, "span", 117);
+    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.ɵɵtext(2, " Apply Changes ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 106);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_46_ng_template_9_Conditional_6_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.initializeEditors()); });
-    i0.ɵɵelement(4, "span", 52);
+    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.ɵɵtext(5, " Cancel ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "primary");
 } }
-function ComponentStudioDashboardComponent_Conditional_46_ng_template_9_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
+function ComponentStudioDashboardComponent_Conditional_47_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_46_ng_template_9_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.refreshComponent()); });
-    i0.ɵɵelement(1, "span", 14);
+    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.ɵɵelement(1, "span", 15);
     i0.ɵɵtext(2, " Refresh Component ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "info");
 } }
-function ComponentStudioDashboardComponent_Conditional_46_ng_template_9_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 111)(1, "div", 112)(2, "h4");
-    i0.ɵɵelement(3, "i", 113);
+function ComponentStudioDashboardComponent_Conditional_47_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.ɵɵtext(4, " Component Specification (JSON)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 114);
-    i0.ɵɵtemplate(6, ComponentStudioDashboardComponent_Conditional_46_ng_template_9_Conditional_6_Template, 6, 1)(7, ComponentStudioDashboardComponent_Conditional_46_ng_template_9_Conditional_7_Template, 3, 1, "button", 7);
+    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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 115)(9, "mj-code-editor", 116);
-    i0.ɵɵtwoWayListener("ngModelChange", function ComponentStudioDashboardComponent_Conditional_46_ng_template_9_Template_mj_code_editor_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r19); 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_46_ng_template_9_Template_mj_code_editor_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onSpecChange($event)); });
+    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.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -567,58 +606,58 @@ function ComponentStudioDashboardComponent_Conditional_46_ng_template_9_Template
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.editableSpec);
     i0.ɵɵproperty("language", "json")("readonly", false);
 } }
-function ComponentStudioDashboardComponent_Conditional_46_ng_template_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
+function ComponentStudioDashboardComponent_Conditional_47_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_46_ng_template_11_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.applyCodeChanges()); });
-    i0.ɵɵelement(1, "span", 117);
+    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.ɵɵtext(2, " Apply Changes ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 106);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_46_ng_template_11_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", 52);
+    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.ɵɵtext(5, " Cancel ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "primary");
 } }
-function ComponentStudioDashboardComponent_Conditional_46_ng_template_11_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
+function ComponentStudioDashboardComponent_Conditional_47_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_46_ng_template_11_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", 14);
+    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.ɵɵelement(1, "span", 15);
     i0.ɵɵtext(2, " Refresh Component ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "info");
 } }
-function ComponentStudioDashboardComponent_Conditional_46_ng_template_11_For_11_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-code-editor", 123);
-    i0.ɵɵlistener("ngModelChange", function ComponentStudioDashboardComponent_Conditional_46_ng_template_11_For_11_ng_template_1_Template_mj_code_editor_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r24); const ɵ$index_483_r25 = i0.ɵɵnextContext().$index; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onCodeSectionChange($event, ɵ$index_483_r25)); });
+function ComponentStudioDashboardComponent_Conditional_47_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.ɵɵelementEnd();
 } if (rf & 2) {
-    const section_r26 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("ngModel", section_r26.code)("language", "javascript")("readonly", false);
+    const section_r28 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("ngModel", section_r28.code)("language", "javascript")("readonly", false);
 } }
-function ComponentStudioDashboardComponent_Conditional_46_ng_template_11_For_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-panelbar-item", 121);
-    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_46_ng_template_11_For_11_ng_template_1_Template, 1, 3, "ng-template", 122);
+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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const section_r26 = ctx.$implicit;
-    i0.ɵɵproperty("title", section_r26.title)("expanded", section_r26.expanded);
+    const section_r28 = ctx.$implicit;
+    i0.ɵɵproperty("title", section_r28.title)("expanded", section_r28.expanded);
 } }
-function ComponentStudioDashboardComponent_Conditional_46_ng_template_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 118)(1, "div", 112)(2, "h4");
-    i0.ɵɵelement(3, "i", 119);
+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);
     i0.ɵɵtext(4, " Component Code (JavaScript/React)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 114);
-    i0.ɵɵtemplate(6, ComponentStudioDashboardComponent_Conditional_46_ng_template_11_Conditional_6_Template, 6, 1)(7, ComponentStudioDashboardComponent_Conditional_46_ng_template_11_Conditional_7_Template, 3, 1, "button", 7);
+    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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 115)(9, "kendo-panelbar", 120);
-    i0.ɵɵrepeaterCreate(10, ComponentStudioDashboardComponent_Conditional_46_ng_template_11_For_11_Template, 2, 2, "kendo-panelbar-item", 121, _forTrack2);
+    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.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -629,21 +668,21 @@ function ComponentStudioDashboardComponent_Conditional_46_ng_template_11_Templat
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r2.getComponentCodeSections());
 } }
-function ComponentStudioDashboardComponent_Conditional_46_Conditional_12_Template(rf, ctx) { }
-function ComponentStudioDashboardComponent_Conditional_46_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-splitter", 16)(1, "kendo-splitter-pane", 88)(2, "div", 89);
-    i0.ɵɵtemplate(3, ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Template, 2, 1)(4, ComponentStudioDashboardComponent_Conditional_46_Conditional_4_Template, 9, 4, "div", 90);
+function ComponentStudioDashboardComponent_Conditional_47_Conditional_12_Template(rf, ctx) { }
+function ComponentStudioDashboardComponent_Conditional_47_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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "kendo-splitter-pane", 88)(6, "div")(7, "kendo-tabstrip", 91);
-    i0.ɵɵlistener("tabSelect", function ComponentStudioDashboardComponent_Conditional_46_Template_kendo_tabstrip_tabSelect_7_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onTabSelect($event)); });
-    i0.ɵɵelementStart(8, "kendo-tabstrip-tab", 92);
-    i0.ɵɵtemplate(9, ComponentStudioDashboardComponent_Conditional_46_ng_template_9_Template, 10, 5, "ng-template", 93);
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "kendo-tabstrip-tab", 92);
-    i0.ɵɵtemplate(11, ComponentStudioDashboardComponent_Conditional_46_ng_template_11_Template, 12, 2, "ng-template", 93);
+    i0.ɵɵelementStart(10, "kendo-tabstrip-tab", 97);
+    i0.ɵɵtemplate(11, ComponentStudioDashboardComponent_Conditional_47_ng_template_11_Template, 12, 2, "ng-template", 98);
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵtemplate(12, ComponentStudioDashboardComponent_Conditional_46_Conditional_12_Template, 0, 0);
+    i0.ɵɵtemplate(12, ComponentStudioDashboardComponent_Conditional_47_Conditional_12_Template, 0, 0);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
@@ -659,9 +698,9 @@ function ComponentStudioDashboardComponent_Conditional_46_Template(rf, ctx) { if
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(!ctx_r2.isDetailsPaneCollapsed ? 12 : -1);
 } }
-function ComponentStudioDashboardComponent_Conditional_47_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 34);
-    i0.ɵɵelement(1, "i", 124);
+function ComponentStudioDashboardComponent_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵelement(1, "i", 129);
     i0.ɵɵelementStart(2, "h2");
     i0.ɵɵtext(3, "Ready to Test Components");
     i0.ɵɵelementEnd();
@@ -707,8 +746,9 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
     lastEditSource = null;
     // File input element reference
     fileInput;
-    // Import dropdown state
+    // Dropdown states
     importDropdownOpen = false;
+    exportDropdownOpen = false;
     // Text import dialog reference
     textImportDialog;
     destroy$ = new Subject();
@@ -1059,13 +1099,18 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
         }
     }
     startComponent(component) {
+        // Clear registries BEFORE starting new component for fresh load
+        if (!this.isRunning) {
+            // Only clear if not already running (switching components handles this in stopComponent)
+            MJReactComponent.forceClearRegistries();
+        }
         this.selectedComponent = component;
         this.componentSpec = this.getComponentSpec(component);
         this.isRunning = true;
         this.currentError = null; // Clear any previous errors
         this.isDetailsPaneCollapsed = true; // Start with details collapsed
         this.initializeEditors(); // Initialize spec and code editors
-        console.log('Running component:', this.getComponentName(component));
+        console.log('Running component (fresh):', this.getComponentName(component));
         try {
             this.cdr.detectChanges();
         }
@@ -1078,6 +1123,9 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
         this.selectedComponent = null;
         this.componentSpec = null;
         this.currentError = null;
+        // CLEAR ALL REGISTRIES for fresh component loads
+        MJReactComponent.forceClearRegistries();
+        console.log('Component Studio: Cleared all registries for fresh component testing');
         try {
             this.cdr.detectChanges();
         }
@@ -1156,17 +1204,34 @@ ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify
     // Import handling methods
     toggleImportDropdown() {
         this.importDropdownOpen = !this.importDropdownOpen;
+        // Close export dropdown if open
+        if (this.importDropdownOpen) {
+            this.exportDropdownOpen = false;
+        }
+    }
+    toggleExportDropdown() {
+        this.exportDropdownOpen = !this.exportDropdownOpen;
+        // Close import dropdown if open
+        if (this.exportDropdownOpen) {
+            this.importDropdownOpen = false;
+        }
     }
     closeImportDropdown() {
         this.importDropdownOpen = false;
     }
     onDocumentClick(event) {
-        // Close dropdown if clicking outside
+        // Close dropdowns if clicking outside
         const target = event.target;
-        const dropdown = target.closest('.import-dropdown');
-        if (!dropdown && this.importDropdownOpen) {
+        // Check import dropdown
+        const importDropdown = target.closest('.import-dropdown');
+        if (!importDropdown && this.importDropdownOpen) {
             this.importDropdownOpen = false;
         }
+        // Check export dropdown
+        const exportDropdown = target.closest('.export-dropdown');
+        if (!exportDropdown && this.exportDropdownOpen) {
+            this.exportDropdownOpen = false;
+        }
     }
     importFromFile() {
         this.closeImportDropdown();
@@ -1380,6 +1445,9 @@ ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify
                 this.editableCode = parsed.code || '// No code available';
                 // Rebuild code sections from updated spec
                 this.buildCodeSections();
+                // Clear registries to ensure fresh component load
+                MJReactComponent.forceClearRegistries();
+                console.log('Cleared registries after applying spec changes');
                 // If component is running, update it without full refresh
                 if (this.isRunning) {
                     this.updateRunningComponent();
@@ -1432,6 +1500,9 @@ ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify
                 }
                 // Update the runtime spec
                 this.componentSpec = spec;
+                // Clear registries to ensure fresh component load
+                MJReactComponent.forceClearRegistries();
+                console.log('Cleared registries after applying code changes');
                 // If component is running, update it without full refresh
                 if (this.isRunning) {
                     this.updateRunningComponent();
@@ -1537,6 +1608,203 @@ ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify
         // Both tabs now need initialization since there's no separate Run tab
         this.initializeEditors();
     }
+    /**
+     * Export the current component to an artifact
+     */
+    async exportToArtifact() {
+        console.log('exportToArtifact called');
+        if (!this.selectedComponent || !this.componentSpec) {
+            console.error('No component selected or spec available');
+            return;
+        }
+        console.log('Component and spec available, proceeding...');
+        // Close the dropdown
+        this.exportDropdownOpen = false;
+        // Small delay to ensure dropdown is closed before opening dialog
+        await new Promise(resolve => setTimeout(resolve, 100));
+        // Get the current spec - use edited version if available
+        let currentSpec;
+        // Check if user has made edits
+        if (this.isEditingSpec || this.isEditingCode) {
+            // Parse the edited spec to get the latest version
+            try {
+                currentSpec = JSON.parse(this.editableSpec);
+            }
+            catch (parseError) {
+                console.error('Invalid JSON in spec editor, using original spec');
+                currentSpec = this.componentSpec;
+            }
+        }
+        else {
+            currentSpec = this.componentSpec;
+        }
+        // Open the artifact selection dialog
+        console.log('Opening artifact selection dialog...');
+        let result;
+        try {
+            const dialogRef = this.dialogService.open({
+                content: ArtifactSelectionDialogComponent,
+                width: 1200, // Increased from 1000px by 200px
+                height: 900, // Keep same height
+                appendTo: this.viewContainerRef
+            });
+            console.log('Dialog opened, waiting for result...');
+            result = await dialogRef.result.toPromise();
+            console.log('Dialog result:', result);
+        }
+        catch (error) {
+            console.error('Error opening dialog:', error);
+            return;
+        }
+        if (!result || !result.action) {
+            console.log('User cancelled dialog');
+            // User cancelled
+            return;
+        }
+        try {
+            const artifact = result.artifact;
+            let version;
+            let lastVersion;
+            if (result.action === 'update-version' && result.versionToUpdate) {
+                // Load and update existing version
+                lastVersion = result.versionToUpdate; // set to the same version as we'll grab its Configuration to parse lower down in the code
+                version = result.versionToUpdate;
+            }
+            else {
+                // Create new version
+                version = await this.metadata.GetEntityObject('MJ: Conversation Artifact Versions');
+                version.ConversationArtifactID = artifact.ID;
+                // Get next version number
+                const rv = new RunView();
+                const versionsResult = await rv.RunView({
+                    EntityName: 'MJ: Conversation Artifact Versions',
+                    ExtraFilter: `ConversationArtifactID = '${artifact.ID}'`,
+                    OrderBy: 'Version DESC',
+                    MaxRows: 1,
+                    ResultType: 'entity_object'
+                });
+                if (versionsResult.Success && versionsResult.Results && versionsResult.Results.length > 0) {
+                    lastVersion = versionsResult.Results[0];
+                    version.Version = versionsResult.Results[0].Version + 1;
+                }
+                else {
+                    throw new Error('No previous version found');
+                }
+            }
+            // Store the complete spec in Configuration field
+            const fullResponse = JSON.parse(lastVersion.Configuration);
+            fullResponse.componentOptions = [
+                {
+                    AIRank: 1,
+                    AIRankExplanation: "",
+                    UserRankExplanation: "",
+                    name: currentSpec.name,
+                    option: currentSpec,
+                    UserRank: 1
+                }
+            ];
+            version.Configuration = JSON.stringify(fullResponse, null, 2);
+            // Add version comments
+            const timestamp = new Date().toISOString();
+            const actionText = result.action === 'update-version' ? 'Updated' : 'Created';
+            version.Comments = `${actionText} from Component Studio at ${timestamp}`;
+            const versionSaveResult = await version.Save();
+            if (versionSaveResult) {
+                const componentName = this.getComponentName(this.selectedComponent);
+                console.log(`✅ Saved ${componentName} as artifact version ${version.Version}`);
+                MJNotificationService.Instance.CreateSimpleNotification(`${componentName} has been saved as artifact version ${version.Version}.`, 'success', 3500);
+            }
+            else {
+                console.error('Failed to save artifact version:', version.LatestResult?.Message);
+                MJNotificationService.Instance.CreateSimpleNotification('Failed to save artifact version. Check console for details.', 'error', 5000);
+            }
+        }
+        catch (error) {
+            console.error('Error saving to artifact:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Error saving component to artifact. Check console for details.', 'error', 5000);
+        }
+    }
+    /**
+     * Export the current component to a file
+     */
+    exportToFile() {
+        if (!this.selectedComponent || !this.componentSpec) {
+            console.error('No component selected or spec available');
+            return;
+        }
+        // Close the dropdown
+        this.exportDropdownOpen = false;
+        // Get the current spec - use edited version if available
+        let currentSpec;
+        if (this.isEditingSpec || this.isEditingCode) {
+            try {
+                currentSpec = JSON.parse(this.editableSpec);
+            }
+            catch (parseError) {
+                console.error('Invalid JSON in spec editor, using original spec');
+                currentSpec = this.componentSpec;
+            }
+        }
+        else {
+            currentSpec = this.componentSpec;
+        }
+        // Create filename from component name - replace spaces and special chars with dashes
+        const componentName = this.getComponentName(this.selectedComponent);
+        const filename = componentName.replace(/\s+/g, '-').replace(/[^a-z0-9\-]/gi, '-').toLowerCase() + '.json';
+        // Create a blob with the JSON content
+        const jsonContent = JSON.stringify(currentSpec, null, 2);
+        const blob = new Blob([jsonContent], { type: 'application/json' });
+        // Create download link
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = filename;
+        // Trigger download
+        document.body.appendChild(link);
+        link.click();
+        // Cleanup
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+        console.log(`✅ Exported ${componentName} to ${filename}`);
+    }
+    /**
+     * Export the current component to clipboard
+     */
+    async exportToClipboard() {
+        if (!this.selectedComponent || !this.componentSpec) {
+            console.error('No component selected or spec available');
+            return;
+        }
+        // Close the dropdown
+        this.exportDropdownOpen = false;
+        // Get the current spec - use edited version if available
+        let currentSpec;
+        if (this.isEditingSpec || this.isEditingCode) {
+            try {
+                currentSpec = JSON.parse(this.editableSpec);
+            }
+            catch (parseError) {
+                console.error('Invalid JSON in spec editor, using original spec');
+                currentSpec = this.componentSpec;
+            }
+        }
+        else {
+            currentSpec = this.componentSpec;
+        }
+        // Copy to clipboard
+        const jsonContent = JSON.stringify(currentSpec, null, 2);
+        try {
+            await navigator.clipboard.writeText(jsonContent);
+            const componentName = this.getComponentName(this.selectedComponent);
+            console.log(`✅ Copied ${componentName} spec to clipboard`);
+            // Show success message (you could add a toast/notification here)
+            alert('Component specification copied to clipboard!');
+        }
+        catch (error) {
+            console.error('Failed to copy to clipboard:', error);
+            alert('Failed to copy to clipboard. Please try again.');
+        }
+    }
     static ɵfac = function ComponentStudioDashboardComponent_Factory(t) { return new (t || ComponentStudioDashboardComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.DialogService), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentStudioDashboardComponent, selectors: [["mj-component-studio-dashboard"]], viewQuery: function ComponentStudioDashboardComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
@@ -1545,7 +1813,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: 48, vars: 20, 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"], ["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, "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: 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) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "div")(4, "h1");
             i0.ɵɵelement(5, "i", 4);
@@ -1564,36 +1832,37 @@ ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(16, ComponentStudioDashboardComponent_Conditional_16_Template, 7, 0, "div", 12);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(17, "button", 13);
-            i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.refreshData()); });
-            i0.ɵɵelement(18, "span", 14);
-            i0.ɵɵtext(19, " Refresh ");
+            i0.ɵɵtemplate(17, ComponentStudioDashboardComponent_Conditional_17_Template, 6, 4, "div", 13);
+            i0.ɵɵelementStart(18, "button", 14);
+            i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.refreshData()); });
+            i0.ɵɵelement(19, "span", 15);
+            i0.ɵɵtext(20, " Refresh ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(20, "input", 15, 0);
-            i0.ɵɵlistener("change", function ComponentStudioDashboardComponent_Template_input_change_20_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleFileSelect($event)); });
+            i0.ɵɵelementStart(21, "input", 16, 0);
+            i0.ɵɵlistener("change", function ComponentStudioDashboardComponent_Template_input_change_21_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleFileSelect($event)); });
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(22, "kendo-splitter", 16)(23, "kendo-splitter-pane", 17)(24, "div", 18)(25, "div", 19)(26, "div", 20)(27, "h3");
-            i0.ɵɵtext(28, "Components");
+            i0.ɵɵelementStart(23, "kendo-splitter", 17)(24, "kendo-splitter-pane", 18)(25, "div", 19)(26, "div", 20)(27, "div", 21)(28, "h3");
+            i0.ɵɵtext(29, "Components");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(29, "div", 21)(30, "button", 22);
-            i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleShowOnlyFavorites()); });
-            i0.ɵɵtemplate(31, ComponentStudioDashboardComponent_Conditional_31_Template, 2, 0)(32, ComponentStudioDashboardComponent_Conditional_32_Template, 2, 0);
+            i0.ɵɵelementStart(30, "div", 22)(31, "button", 23);
+            i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Template_button_click_31_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleShowOnlyFavorites()); });
+            i0.ɵɵtemplate(32, ComponentStudioDashboardComponent_Conditional_32_Template, 2, 0)(33, ComponentStudioDashboardComponent_Conditional_33_Template, 2, 0);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(33, "span", 23);
-            i0.ɵɵtext(34);
+            i0.ɵɵelementStart(34, "span", 24);
+            i0.ɵɵtext(35);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(35, "div", 24);
-            i0.ɵɵtemplate(36, ComponentStudioDashboardComponent_Conditional_36_Template, 5, 2, "div", 25);
+            i0.ɵɵelementStart(36, "div", 25);
+            i0.ɵɵtemplate(37, ComponentStudioDashboardComponent_Conditional_37_Template, 5, 2, "div", 26);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(37, "div", 26)(38, "kendo-textbox", 27);
-            i0.ɵɵlistener("valueChange", function ComponentStudioDashboardComponent_Template_kendo_textbox_valueChange_38_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSearchChange($event)); });
-            i0.ɵɵtemplate(39, ComponentStudioDashboardComponent_ng_template_39_Template, 1, 0, "ng-template", 28);
+            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.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(40, "div", 29);
-            i0.ɵɵtemplate(41, ComponentStudioDashboardComponent_Conditional_41_Template, 3, 0, "div", 30)(42, ComponentStudioDashboardComponent_Conditional_42_Template, 6, 0, "div", 31)(43, ComponentStudioDashboardComponent_Conditional_43_Template, 2, 0);
+            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.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(44, "kendo-splitter-pane", 32)(45, "div", 33);
-            i0.ɵɵtemplate(46, ComponentStudioDashboardComponent_Conditional_46_Template, 13, 8)(47, ComponentStudioDashboardComponent_Conditional_47_Template, 6, 0, "div", 34);
+            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.ɵɵelementEnd()()()();
         } if (rf & 2) {
             i0.ɵɵadvance(10);
@@ -1605,26 +1874,28 @@ ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify
             i0.ɵɵadvance(4);
             i0.ɵɵconditional(ctx.importDropdownOpen ? 16 : -1);
             i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.selectedComponent && ctx.isRunning ? 17 : -1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("disabled", ctx.isLoading);
             i0.ɵɵadvance(6);
             i0.ɵɵproperty("min", "350px")("max", "650px")("size", "400px");
             i0.ɵɵadvance(7);
             i0.ɵɵclassProp("active", ctx.showOnlyFavorites);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showOnlyFavorites ? 31 : 32);
+            i0.ɵɵconditional(ctx.showOnlyFavorites ? 32 : 33);
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate2("", ctx.filteredComponents.length, " of ", ctx.allComponents.length, "");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.availableCategories.length > 0 ? 36 : -1);
+            i0.ɵɵconditional(ctx.availableCategories.length > 0 ? 37 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("value", ctx.searchQuery)("clearButton", true);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.isLoading ? 41 : ctx.filteredComponents.length === 0 ? 42 : 43);
+            i0.ɵɵconditional(ctx.isLoading ? 42 : ctx.filteredComponents.length === 0 ? 43 : 44);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("min", "400px");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.selectedComponent ? 46 : 47);
-        } }, 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 {\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 ? 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}"] });
 };
 ComponentStudioDashboardComponent = __decorate([
     RegisterClass(BaseDashboard, 'ComponentStudioDashboard')
@@ -1632,7 +1903,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        <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 {\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              <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}"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.DialogService }, { type: i0.ViewContainerRef }], { fileInput: [{
             type: ViewChild,
             args: ['fileInput', { static: false }]
@@ -1640,7 +1911,7 @@ export { ComponentStudioDashboardComponent };
             type: HostListener,
             args: ['document:click', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentStudioDashboardComponent, { className: "ComponentStudioDashboardComponent", filePath: "src/ComponentStudio/component-studio-dashboard.component.ts", lineNumber: 45 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentStudioDashboardComponent, { className: "ComponentStudioDashboardComponent", filePath: "src/ComponentStudio/component-studio-dashboard.component.ts", lineNumber: 52 }); })();
 /**
  * Function to prevent tree shaking of the ComponentStudioDashboardComponent.
  */