@memberjunction/ng-dashboards 2.88.0 → 2.90.0

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

@@ -4,230 +4,436 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component } from '@angular/core';
+import { Component, ViewChild, HostListener } from '@angular/core';
 import { BaseDashboard } from '../generic/base-dashboard';
 import { RegisterClass } from '@memberjunction/global';
-import { RunView } from '@memberjunction/core';
+import { RunView, CompositeKey, Metadata } from '@memberjunction/core';
 import { Subject } from 'rxjs';
 import { SharedService } from '@memberjunction/ng-shared';
+import { ParseJSONRecursive } from '@memberjunction/global';
+import { TextImportDialogComponent } from './components/text-import-dialog.component';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "@progress/kendo-angular-inputs";
-import * as i3 from "@progress/kendo-angular-layout";
-import * as i4 from "@progress/kendo-angular-buttons";
-import * as i5 from "@memberjunction/ng-react";
-const _forTrack0 = ($index, $item) => $item.ID;
-function ComponentStudioDashboardComponent_ng_template_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 20);
-} }
-function ComponentStudioDashboardComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵelement(1, "i", 21);
+import * as i1 from "@progress/kendo-angular-dialog";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@progress/kendo-angular-inputs";
+import * as i5 from "@progress/kendo-angular-layout";
+import * as i6 from "@memberjunction/ng-code-editor";
+import * as i7 from "@progress/kendo-angular-buttons";
+import * as i8 from "@memberjunction/ng-react";
+const _c0 = ["fileInput"];
+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.ɵɵtext(1, " Show Details ");
+} }
+function ComponentStudioDashboardComponent_Conditional_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 36);
+    i0.ɵɵtext(1, " Hide Details ");
+} }
+function ComponentStudioDashboardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 9);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleDetailsPane()); });
+    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_10_Conditional_1_Template, 2, 0)(2, ComponentStudioDashboardComponent_Conditional_10_Conditional_2_Template, 2, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("themeColor", "base");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.isDetailsPaneCollapsed ? 1 : 2);
+} }
+function ComponentStudioDashboardComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "button", 37);
+    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.ɵɵtext(3, " Import from File ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 37);
+    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.ɵɵ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_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 41);
+    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);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 47);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const category_r6 = 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.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(category_r6.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(category_r6.count);
+} }
+function ComponentStudioDashboardComponent_Conditional_36_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 49);
+    i0.ɵɵtext(1, " Less ");
+} }
+function ComponentStudioDashboardComponent_Conditional_36_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 50);
+    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);
+    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);
+    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);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.getVisibleCategories());
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.availableCategories.length > 5 ? 3 : -1);
+    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_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30);
+    i0.ɵɵelement(1, "i", 54);
     i0.ɵɵtext(2, " Loading components... ");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 16);
-    i0.ɵɵelement(1, "i", 22);
-    i0.ɵɵtext(2, " No components found without custom properties. ");
+function ComponentStudioDashboardComponent_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵelement(1, "i", 55);
+    i0.ɵɵtext(2, " No components found without required custom properties. ");
     i0.ɵɵelement(3, "br");
     i0.ɵɵelementStart(4, "small");
-    i0.ɵɵtext(5, "Only components that don't require custom props can be tested here.");
+    i0.ɵɵtext(5, "Components with optional custom props can be tested, but not those with required props.");
     i0.ɵɵelementEnd()();
 } }
-function ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 33);
+function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 40);
+} }
+function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 41);
+} }
+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);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const component_r10 = 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.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.isFavorite(component_r10) ? 1 : 2);
+} }
+function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 39);
+    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);
+    i0.ɵɵtext(1);
+} if (rf & 2) {
+    const component_r10 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getComponentFilename(component_r10), " ");
+} }
+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);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const component_r10 = 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.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.getComponentStatus(component_r10) === "Text" ? 1 : 2);
+} }
+function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_14_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 76);
+    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);
+    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);
+} if (rf & 2) {
+    const component_r10 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r2.getComponentStatus(component_r10) === "Text" ? 0 : 1);
+} }
+function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 68);
     i0.ɵɵtext(1, "Published");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 34);
+function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 69);
     i0.ɵɵtext(1, "Draft");
     i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 36);
+function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 49);
 } }
-function ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 37);
+function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 50);
 } }
-function ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_17_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 39)(1, "label");
+function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78)(1, "label");
     i0.ɵɵtext(2, "Description");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "p");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const component_r2 = i0.ɵɵnextContext(2).$implicit;
+    const component_r10 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(component_r2.Description);
+    i0.ɵɵtextInterpolate(ctx_r2.getComponentDescription(component_r10));
 } }
-function ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_17_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 41)(1, "span", 42);
+function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 80)(1, "span", 81);
+    i0.ɵɵtext(2, "Loaded:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 82);
+    i0.ɵɵtext(4);
+    i0.ɵɵpipe(5, "date");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const component_r10 = 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"));
+} }
+function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 80)(1, "span", 81);
     i0.ɵɵtext(2, "Updated:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 43);
+    i0.ɵɵelementStart(3, "span", 82);
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "date");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const component_r2 = i0.ɵɵnextContext(2).$implicit;
+    const component_r10 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, component_r2.__mj_UpdatedAt, "short"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r2.getComponentUpdatedAt(component_r10), "short"));
 } }
-function ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_17_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 47);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_17_Conditional_23_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.stopComponent(); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "span", 48);
+function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = 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.ɵɵtext(2, " Stop Component ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "error");
 } }
-function ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_17_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 49);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_17_Conditional_24_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const component_r2 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.runComponent(component_r2); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "span", 50);
+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);
     i0.ɵɵtext(2, " Switch to This Component ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "base");
 } }
-function ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_17_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 47);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_17_Conditional_25_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r6); const component_r2 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.runComponent(component_r2); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "span", 50);
+function ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Conditional_26_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_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.ɵɵtext(2, " Run Component ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("themeColor", "primary");
 } }
-function ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38);
-    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_17_Conditional_1_Template, 5, 1, "div", 39);
-    i0.ɵɵelementStart(2, "div", 39)(3, "label");
+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");
     i0.ɵɵtext(4, "Component Info");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 40)(6, "div", 41)(7, "span", 42);
+    i0.ɵɵelementStart(5, "div", 79)(6, "div", 80)(7, "span", 81);
     i0.ɵɵtext(8, "Type:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 43);
+    i0.ɵɵelementStart(9, "span", 82);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 41)(12, "span", 42);
+    i0.ɵɵelementStart(11, "div", 80)(12, "span", 81);
     i0.ɵɵtext(13, "Version:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "span", 43);
+    i0.ɵɵelementStart(14, "span", 82);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 41)(17, "span", 42);
+    i0.ɵɵelementStart(16, "div", 80)(17, "span", 81);
     i0.ɵɵtext(18, "Status:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "span", 43);
+    i0.ɵɵelementStart(19, "span", 82);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(21, ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_17_Conditional_21_Template, 6, 4, "div", 41);
+    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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 44);
-    i0.ɵɵtemplate(23, ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_17_Conditional_23_Template, 3, 1, "button", 45)(24, ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_17_Conditional_24_Template, 3, 1, "button", 46)(25, ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_17_Conditional_25_Template, 3, 1, "button", 45);
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const component_r2 = i0.ɵɵnextContext().$implicit;
+    const component_r10 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(component_r2.Description ? 1 : -1);
+    i0.ɵɵconditional(ctx_r2.getComponentDescription(component_r10) ? 1 : -1);
     i0.ɵɵadvance(9);
-    i0.ɵɵtextInterpolate(component_r2.Type || "Unknown");
+    i0.ɵɵtextInterpolate(ctx_r2.getComponentType(component_r10) || "Unknown");
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(component_r2.Version || "1.0.0");
+    i0.ɵɵtextInterpolate(ctx_r2.getComponentVersion(component_r10));
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(component_r2.Status || "Draft");
+    i0.ɵɵtextInterpolate(ctx_r2.getComponentStatus(component_r10) || "Draft");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(component_r2.__mj_UpdatedAt ? 21 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional((ctx_r2.selectedComponent == null ? null : ctx_r2.selectedComponent.ID) === component_r2.ID && ctx_r2.isRunning ? 23 : ctx_r2.isRunning && (ctx_r2.selectedComponent == null ? null : ctx_r2.selectedComponent.ID) !== component_r2.ID ? 24 : 25);
+    i0.ɵɵconditional(ctx_r2.isFileLoadedComponent(component_r10) ? 21 : !ctx_r2.isFileLoadedComponent(component_r10) && ctx_r2.getComponentUpdatedAt(component_r10) ? 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);
 } }
-function ComponentStudioDashboardComponent_Conditional_24_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 24)(1, "div", 25);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_24_For_1_Template_div_click_1_listener() { const component_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleComponentExpansion(component_r2)); });
-    i0.ɵɵelementStart(2, "div", 26);
-    i0.ɵɵelement(3, "i", 27);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 28)(5, "div", 29);
-    i0.ɵɵtext(6);
+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);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 30)(8, "span", 31);
-    i0.ɵɵtext(9);
+    i0.ɵɵtemplate(4, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_4_Template, 3, 4, "button", 61);
+    i0.ɵɵelementStart(5, "div", 62)(6, "div", 63);
+    i0.ɵɵtext(7);
+    i0.ɵɵtemplate(8, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_8_Template, 3, 2, "span", 64);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 32);
+    i0.ɵɵelementStart(9, "div", 65)(10, "span", 66);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(12, ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_12_Template, 2, 0, "span", 33)(13, ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_13_Template, 2, 0, "span", 34);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 35);
-    i0.ɵɵtemplate(15, ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_15_Template, 1, 0, "i", 36)(16, ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_16_Template, 1, 0, "i", 37);
+    i0.ɵɵelementStart(12, "span", 67);
+    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.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "div", 70)(18, "span", 71);
+    i0.ɵɵelement(19, "i", 72);
+    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.ɵɵelementEnd()();
-    i0.ɵɵtemplate(17, ComponentStudioDashboardComponent_Conditional_24_For_1_Conditional_17_Template, 26, 6, "div", 38);
+    i0.ɵɵtemplate(24, ComponentStudioDashboardComponent_Conditional_43_For_1_Conditional_24_Template, 27, 6, "div", 74);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const component_r2 = ctx.$implicit;
+    const component_r10 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("expanded", (ctx_r2.expandedComponent == null ? null : ctx_r2.expandedComponent.ID) === component_r2.ID)("running", (ctx_r2.selectedComponent == null ? null : ctx_r2.selectedComponent.ID) === component_r2.ID && ctx_r2.isRunning);
+    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.ɵɵadvance(2);
-    i0.ɵɵstyleProp("color", ctx_r2.getComponentTypeColor(component_r2.Type));
+    i0.ɵɵstyleProp("color", ctx_r2.getComponentTypeColor(ctx_r2.getComponentType(component_r10)));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.getComponentTypeIcon(component_r2.Type));
+    i0.ɵɵproperty("ngClass", ctx_r2.getComponentTypeIcon(ctx_r2.getComponentType(component_r10)));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r2.isFileLoadedComponent(component_r10) ? 4 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(component_r2.Name);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getComponentName(component_r10), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.isFileLoadedComponent(component_r10) ? 8 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(component_r2.Type || "Component");
+    i0.ɵɵtextInterpolate(ctx_r2.getComponentType(component_r10) || "Component");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("v", component_r2.Version || "1.0.0", "");
+    i0.ɵɵtextInterpolate1("v", ctx_r2.getComponentVersion(component_r10), "");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(component_r2.Status === "Published" ? 12 : 13);
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional((ctx_r2.expandedComponent == null ? null : ctx_r2.expandedComponent.ID) === component_r2.ID ? 15 : 16);
+    i0.ɵɵconditional(ctx_r2.isFileLoadedComponent(component_r10) ? 14 : ctx_r2.getComponentStatus(component_r10) === "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.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.formatNamespace(ctx_r2.getComponentNamespace(component_r10)), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.expandedComponent && ctx_r2.getComponentId(ctx_r2.expandedComponent) === ctx_r2.getComponentId(component_r10) ? 22 : 23);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional((ctx_r2.expandedComponent == null ? null : ctx_r2.expandedComponent.ID) === component_r2.ID ? 17 : -1);
+    i0.ɵɵconditional(ctx_r2.expandedComponent && ctx_r2.getComponentId(ctx_r2.expandedComponent) === ctx_r2.getComponentId(component_r10) ? 24 : -1);
 } }
-function ComponentStudioDashboardComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ComponentStudioDashboardComponent_Conditional_24_For_1_Template, 18, 13, "div", 23, _forTrack0);
+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);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵrepeater(ctx_r2.filteredComponents);
 } }
-function ComponentStudioDashboardComponent_Conditional_27_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "details", 60)(1, "summary");
+function ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "details", 103)(1, "summary");
     i0.ɵɵtext(2, "Technical Details (click to expand)");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "pre");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.formatTechnicalDetails(ctx_r2.currentError.technicalDetails));
 } }
-function ComponentStudioDashboardComponent_Conditional_27_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 51)(1, "div", 53)(2, "div", 54);
-    i0.ɵɵelement(3, "i", 55);
+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);
     i0.ɵɵelementStart(4, "h3");
     i0.ɵɵtext(5, "Component Error");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 56);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_27_Conditional_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.copyErrorToClipboard()); });
-    i0.ɵɵelement(7, "i", 57);
+    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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "p", 58);
+    i0.ɵɵelementStart(8, "p", 101);
     i0.ɵɵtext(9, " The component could not be rendered due to the following error: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 59)(11, "strong");
+    i0.ɵɵelementStart(10, "div", 102)(11, "strong");
     i0.ɵɵtext(12, "Error Type:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(13);
@@ -236,9 +442,9 @@ function ComponentStudioDashboardComponent_Conditional_27_Conditional_0_Template
     i0.ɵɵtext(16, "Message:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(17);
-    i0.ɵɵtemplate(18, ComponentStudioDashboardComponent_Conditional_27_Conditional_0_Conditional_18_Template, 5, 1, "details", 60);
+    i0.ɵɵtemplate(18, ComponentStudioDashboardComponent_Conditional_46_Conditional_3_Conditional_0_Conditional_18_Template, 5, 1, "details", 103);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 61)(20, "strong");
+    i0.ɵɵelementStart(19, "div", 104)(20, "strong");
     i0.ɵɵtext(21, "What to do:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(22, "ol")(23, "li");
@@ -253,18 +459,18 @@ function ComponentStudioDashboardComponent_Conditional_27_Conditional_0_Template
     i0.ɵɵelementStart(29, "li");
     i0.ɵɵtext(30, "Contact your system administrator if the issue persists");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(31, "div", 62)(32, "button", 63);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_27_Conditional_0_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.retryComponent()); });
-    i0.ɵɵelement(33, "span", 64);
+    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.ɵɵtext(34, " Retry ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(35, "button", 47);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_27_Conditional_0_Template_button_click_35_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.stopComponent()); });
-    i0.ɵɵelement(36, "span", 48);
+    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.ɵɵtext(37, " Stop ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(13);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.currentError.type, "");
     i0.ɵɵadvance(4);
@@ -274,35 +480,203 @@ function ComponentStudioDashboardComponent_Conditional_27_Conditional_0_Template
     i0.ɵɵadvance(17);
     i0.ɵɵproperty("themeColor", "error");
 } }
-function ComponentStudioDashboardComponent_Conditional_27_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-react-component", 65);
-    i0.ɵɵlistener("componentEvent", function ComponentStudioDashboardComponent_Conditional_27_Conditional_1_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onComponentEvent($event)); })("openEntityRecord", function ComponentStudioDashboardComponent_Conditional_27_Conditional_1_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onOpenEntityRecord($event)); });
+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)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("component", ctx_r2.componentSpec);
 } }
-function ComponentStudioDashboardComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ComponentStudioDashboardComponent_Conditional_27_Conditional_0_Template, 38, 4, "div", 51)(1, ComponentStudioDashboardComponent_Conditional_27_Conditional_1_Template, 1, 1, "mj-react-component", 52);
+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);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r2.currentError ? 0 : 1);
 } }
-function ComponentStudioDashboardComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵelement(1, "i", 66);
+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);
+    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.ɵɵtext(8, " Run Component ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("Component: ", ctx_r2.getComponentName(ctx_r2.selectedComponent), "");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.getComponentDescription(ctx_r2.selectedComponent) || "No description available");
+    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();
+    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.ɵɵ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.ɵɵ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();
+    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.ɵɵ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);
+    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.ɵɵ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.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r2.isEditingSpec ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.isRunning ? 7 : -1);
+    i0.ɵɵadvance(2);
+    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();
+    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.ɵɵ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.ɵɵ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();
+    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.ɵɵ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)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const section_r26 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("ngModel", section_r26.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);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const section_r26 = ctx.$implicit;
+    i0.ɵɵproperty("title", section_r26.title)("expanded", section_r26.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);
+    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.ɵɵ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.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r2.isEditingCode ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.isRunning ? 7 : -1);
+    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);
+    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.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "kendo-tabstrip-tab", 92);
+    i0.ɵɵtemplate(11, ComponentStudioDashboardComponent_Conditional_46_ng_template_11_Template, 12, 2, "ng-template", 93);
+    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵtemplate(12, ComponentStudioDashboardComponent_Conditional_46_Conditional_12_Template, 0, 0);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("size", ctx_r2.isDetailsPaneCollapsed ? "100%" : "50%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.isRunning && ctx_r2.componentSpec ? 3 : 4);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("size", ctx_r2.isDetailsPaneCollapsed ? "0px" : "50%");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("title", "Spec")("selected", ctx_r2.activeTab === 0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("title", "Code")("selected", ctx_r2.activeTab === 1);
+    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);
     i0.ɵɵelementStart(2, "h2");
     i0.ɵɵtext(3, "Ready to Test Components");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
-    i0.ɵɵtext(5, "Select a component from the list and click \"Run Component\" to see it in action");
+    i0.ɵɵtext(5, "Select a component from the list to view its details and run it");
     i0.ɵɵelementEnd()();
 } }
 let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent extends BaseDashboard {
     cdr;
+    dialogService;
+    viewContainerRef;
     // Component data
     components = [];
+    fileLoadedComponents = []; // Components loaded from files
+    allComponents = []; // Combined list
     filteredComponents = [];
     selectedComponent = null;
     expandedComponent = null; // Track which card is expanded
@@ -310,12 +684,39 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
     isLoading = false;
     searchQuery = '';
     isRunning = false; // Track if component is currently running
+    // View and filtering
+    selectedCategories = new Set();
+    availableCategories = [];
+    showAllCategories = false; // Show only top categories by default
+    // Favorites
+    favoriteComponents = new Set(); // Set of component IDs
+    showOnlyFavorites = false; // Filter to show only favorites
+    metadata = new Metadata();
     // Error handling
     currentError = null;
+    // Tab management
+    activeTab = 0; // 0 = Spec, 1 = Code
+    // Splitter state
+    isDetailsPaneCollapsed = true; // Start with details collapsed
+    // Editor content
+    editableSpec = ''; // JSON string for spec editor
+    editableCode = ''; // JavaScript code for code editor
+    codeSections = [];
+    isEditingSpec = false;
+    isEditingCode = false;
+    lastEditSource = null;
+    // File input element reference
+    fileInput;
+    // Import dropdown state
+    importDropdownOpen = false;
+    // Text import dialog reference
+    textImportDialog;
     destroy$ = new Subject();
-    constructor(cdr) {
+    constructor(cdr, dialogService, viewContainerRef) {
         super();
         this.cdr = cdr;
+        this.dialogService = dialogService;
+        this.viewContainerRef = viewContainerRef;
     }
     ngAfterViewInit() {
         this.initDashboard();
@@ -334,14 +735,16 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
             const rv = new RunView();
             const result = await rv.RunView({
                 EntityName: 'MJ: Components',
-                ExtraFilter: 'HasCustomProps = 0', // Only load components without custom props
+                ExtraFilter: 'HasRequiredCustomProps = 0', // Only load components without required custom props
                 OrderBy: 'Name',
                 MaxRows: 1000,
                 ResultType: 'entity_object'
             });
             if (result.Success) {
                 this.components = result.Results || [];
-                this.filterComponents();
+                // Load favorites for all components
+                await this.loadFavorites();
+                this.combineAndFilterComponents();
             }
             else {
                 console.error('Failed to load components:', result.ErrorMessage);
@@ -354,25 +757,288 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
             this.isLoading = false;
         }
     }
+    /**
+     * Load favorite status for all components
+     */
+    async loadFavorites() {
+        const md = new Metadata();
+        const currentUserId = md.CurrentUser?.ID;
+        if (!currentUserId)
+            return;
+        this.favoriteComponents.clear();
+        // Check favorite status for each component
+        for (const component of this.components) {
+            try {
+                const isFavorite = await this.metadata.GetRecordFavoriteStatus(currentUserId, 'MJ: Components', CompositeKey.FromID(component.ID));
+                if (isFavorite) {
+                    this.favoriteComponents.add(component.ID);
+                }
+            }
+            catch (error) {
+                console.error(`Error loading favorite status for component ${component.ID}:`, error);
+            }
+        }
+    }
+    /**
+     * Toggle favorite status for a component
+     */
+    async toggleFavorite(component, event) {
+        if (event) {
+            event.stopPropagation(); // Prevent card expansion
+        }
+        const md = new Metadata();
+        const currentUserId = md.CurrentUser?.ID;
+        if (!currentUserId)
+            return;
+        // File-loaded components can't be favorited
+        if (this.isFileLoadedComponent(component)) {
+            return;
+        }
+        const componentId = this.getComponentId(component);
+        const isFavorite = this.favoriteComponents.has(componentId);
+        try {
+            await this.metadata.SetRecordFavoriteStatus(currentUserId, 'MJ: Components', CompositeKey.FromID(componentId), !isFavorite);
+            // Update local state
+            if (isFavorite) {
+                this.favoriteComponents.delete(componentId);
+            }
+            else {
+                this.favoriteComponents.add(componentId);
+            }
+            // Trigger change detection
+            this.cdr.detectChanges();
+        }
+        catch (error) {
+            console.error('Error toggling favorite status:', error);
+        }
+    }
+    /**
+     * Check if component is favorited
+     */
+    isFavorite(component) {
+        if (this.isFileLoadedComponent(component)) {
+            return false;
+        }
+        return this.favoriteComponents.has(this.getComponentId(component));
+    }
+    /**
+     * Toggle showing only favorites
+     */
+    toggleShowOnlyFavorites() {
+        this.showOnlyFavorites = !this.showOnlyFavorites;
+        this.combineAndFilterComponents();
+    }
     onSearchChange(query) {
         this.searchQuery = query;
-        this.filterComponents();
+        this.combineAndFilterComponents();
     }
-    filterComponents() {
-        // Note: this.components already filtered to HasCustomProps = 0 in loadData
-        if (!this.searchQuery) {
-            this.filteredComponents = [...this.components];
+    combineAndFilterComponents() {
+        // Combine database components with file-loaded components
+        this.allComponents = [
+            ...this.fileLoadedComponents,
+            ...this.components
+        ];
+        // Build available categories from all components
+        this.buildCategories();
+        // Apply filters
+        let filtered = [...this.allComponents];
+        // Apply favorites filter first if enabled
+        if (this.showOnlyFavorites) {
+            filtered = filtered.filter(c => this.isFavorite(c));
         }
-        else {
+        // Apply category filter
+        if (this.selectedCategories.size > 0) {
+            filtered = filtered.filter(c => {
+                const namespace = this.getComponentNamespace(c) || 'Uncategorized';
+                const category = this.extractCategoryFromNamespace(namespace);
+                return this.selectedCategories.has(category);
+            });
+        }
+        // Apply search filter
+        if (this.searchQuery) {
             const query = this.searchQuery.toLowerCase();
-            this.filteredComponents = this.components.filter(c => c.Name?.toLowerCase().includes(query) ||
-                c.Description?.toLowerCase().includes(query) ||
-                c.Type?.toLowerCase().includes(query));
+            filtered = filtered.filter(c => {
+                const name = this.getComponentName(c)?.toLowerCase() || '';
+                const description = this.getComponentDescription(c)?.toLowerCase() || '';
+                const type = this.getComponentType(c)?.toLowerCase() || '';
+                const namespace = this.getComponentNamespace(c)?.toLowerCase() || '';
+                return name.includes(query) || description.includes(query) || type.includes(query) || namespace.includes(query);
+            });
+        }
+        this.filteredComponents = filtered;
+    }
+    /**
+     * Build categories from components
+     */
+    buildCategories() {
+        const categoryMap = new Map();
+        const allNamespaces = new Set();
+        // Count components per top-level category and track all namespaces
+        for (const component of this.allComponents) {
+            const namespace = this.getComponentNamespace(component) || 'Uncategorized';
+            const category = this.extractCategoryFromNamespace(namespace);
+            categoryMap.set(category, (categoryMap.get(category) || 0) + 1);
+            // Track full namespace paths for better display
+            if (namespace && namespace !== 'Uncategorized') {
+                allNamespaces.add(namespace);
+            }
+        }
+        // Convert to array and sort by count
+        this.availableCategories = Array.from(categoryMap.entries())
+            .map(([name, count]) => ({
+            name,
+            count,
+            color: this.getCategoryColor(name)
+        }))
+            .sort((a, b) => b.count - a.count);
+    }
+    /**
+     * Extract main category from namespace
+     */
+    extractCategoryFromNamespace(namespace) {
+        if (!namespace || namespace === 'Uncategorized')
+            return 'Uncategorized';
+        // Get the first part of the namespace path
+        const parts = namespace.split('/').filter(p => p.length > 0);
+        return parts[0] || 'Uncategorized';
+    }
+    /**
+     * Get color for category
+     */
+    getCategoryColor(category) {
+        const colors = [
+            '#3B82F6', // blue
+            '#8B5CF6', // purple
+            '#10B981', // green
+            '#F97316', // orange
+            '#06B6D4', // cyan
+            '#EC4899', // pink
+            '#6366F1', // indigo
+            '#14B8A6', // teal
+            '#EAB308', // yellow
+            '#EF4444', // red
+        ];
+        // Use hash of category name to get consistent color
+        let hash = 0;
+        for (let i = 0; i < category.length; i++) {
+            hash = category.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        return colors[Math.abs(hash) % colors.length];
+    }
+    /**
+     * Get color for a full namespace path
+     */
+    getNamespaceColor(namespace) {
+        if (!namespace || namespace === 'Uncategorized') {
+            return '#6C757D'; // Gray for uncategorized
+        }
+        // Extract the main category (first part) for consistent coloring
+        const category = this.extractCategoryFromNamespace(namespace);
+        return this.getCategoryColor(category);
+    }
+    /**
+     * Format namespace for display (handle long paths)
+     */
+    formatNamespace(namespace) {
+        if (!namespace || namespace === 'Uncategorized') {
+            return 'Uncategorized';
+        }
+        const parts = namespace.split('/').filter(p => p.length > 0);
+        // If it's really long, show abbreviated version
+        if (parts.length > 3) {
+            return `${parts[0]} / ... / ${parts[parts.length - 1]}`;
         }
+        // Otherwise show full path with spacing
+        return parts.join(' / ');
+    }
+    /**
+     * Toggle category filter
+     */
+    toggleCategory(category) {
+        if (this.selectedCategories.has(category)) {
+            this.selectedCategories.delete(category);
+        }
+        else {
+            this.selectedCategories.add(category);
+        }
+        this.combineAndFilterComponents();
+    }
+    /**
+     * Clear all category filters
+     */
+    clearCategoryFilters() {
+        this.selectedCategories.clear();
+        this.combineAndFilterComponents();
+    }
+    /**
+     * Check if category is selected
+     */
+    isCategorySelected(category) {
+        return this.selectedCategories.has(category);
+    }
+    /**
+     * Get visible categories (top 5 or all)
+     */
+    getVisibleCategories() {
+        return this.showAllCategories ? this.availableCategories : this.availableCategories.slice(0, 5);
+    }
+    /**
+     * Toggle showing all categories
+     */
+    toggleShowAllCategories() {
+        this.showAllCategories = !this.showAllCategories;
+    }
+    /**
+     * Get component namespace
+     */
+    getComponentNamespace(component) {
+        if (component.isFileLoaded) {
+            // File-loaded components might not have namespace
+            return component.specification.namespace;
+        }
+        else {
+            return component.Namespace || undefined;
+        }
+    }
+    // Helper methods to get properties from union type
+    getComponentName(component) {
+        return component.isFileLoaded ? component.name : component.Name;
+    }
+    getComponentDescription(component) {
+        return component.isFileLoaded ? component.description : (component.Description || undefined);
+    }
+    getComponentType(component) {
+        return component.isFileLoaded ? component.type : (component.Type || undefined);
+    }
+    getComponentStatus(component) {
+        return component.isFileLoaded ? component.status : (component.Status || undefined);
+    }
+    getComponentVersion(component) {
+        return component.isFileLoaded ? '1.0.0' : (component.Version || '1.0.0');
+    }
+    getComponentSpec(component) {
+        return component.isFileLoaded ? component.specification : JSON.parse(component.Specification);
+    }
+    getComponentId(component) {
+        return component.isFileLoaded ? component.id : component.ID;
+    }
+    isFileLoadedComponent(component) {
+        return component.isFileLoaded === true;
+    }
+    getComponentFilename(component) {
+        return component.isFileLoaded ? component.filename : undefined;
+    }
+    getComponentLoadedAt(component) {
+        return component.isFileLoaded ? component.loadedAt : undefined;
+    }
+    getComponentUpdatedAt(component) {
+        return !component.isFileLoaded && component.__mj_UpdatedAt ? component.__mj_UpdatedAt : undefined;
     }
     toggleComponentExpansion(component) {
         // Toggle expansion - if clicking the same component, collapse it
-        if (this.expandedComponent?.ID === component.ID) {
+        const componentId = this.getComponentId(component);
+        const expandedId = this.expandedComponent ? this.getComponentId(this.expandedComponent) : null;
+        if (expandedId === componentId) {
             this.expandedComponent = null;
         }
         else {
@@ -382,7 +1048,9 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
     }
     runComponent(component) {
         // If another component is running, stop it first then start the new one
-        if (this.isRunning && this.selectedComponent?.ID !== component.ID) {
+        const componentId = this.getComponentId(component);
+        const selectedId = this.selectedComponent ? this.getComponentId(this.selectedComponent) : null;
+        if (this.isRunning && selectedId !== componentId) {
             this.stopComponent();
             this.startComponent(component);
         }
@@ -392,10 +1060,12 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
     }
     startComponent(component) {
         this.selectedComponent = component;
-        this.componentSpec = JSON.parse(component.Specification);
+        this.componentSpec = this.getComponentSpec(component);
         this.isRunning = true;
         this.currentError = null; // Clear any previous errors
-        console.log('Running component:', component.Name);
+        this.isDetailsPaneCollapsed = true; // Start with details collapsed
+        this.initializeEditors(); // Initialize spec and code editors
+        console.log('Running component:', this.getComponentName(component));
         try {
             this.cdr.detectChanges();
         }
@@ -458,7 +1128,7 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
         const errorText = `
 Component Error Report
 ${'='.repeat(50)}
-Component: ${this.selectedComponent?.Name}
+Component: ${this.selectedComponent ? this.getComponentName(this.selectedComponent) : 'Unknown'}
 Error Type: ${this.currentError.type}
 Message: ${this.currentError.message}
 ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify(this.currentError.technicalDetails, null, 2) : ''}
@@ -483,6 +1153,143 @@ ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify
     async refreshData() {
         await this.loadData();
     }
+    // Import handling methods
+    toggleImportDropdown() {
+        this.importDropdownOpen = !this.importDropdownOpen;
+    }
+    closeImportDropdown() {
+        this.importDropdownOpen = false;
+    }
+    onDocumentClick(event) {
+        // Close dropdown if clicking outside
+        const target = event.target;
+        const dropdown = target.closest('.import-dropdown');
+        if (!dropdown && this.importDropdownOpen) {
+            this.importDropdownOpen = false;
+        }
+    }
+    importFromFile() {
+        this.closeImportDropdown();
+        this.fileInput?.nativeElement.click();
+    }
+    importFromText() {
+        this.closeImportDropdown();
+        this.openTextImportDialog();
+    }
+    openTextImportDialog() {
+        this.textImportDialog = this.dialogService.open({
+            content: TextImportDialogComponent,
+            width: 700,
+            height: 600,
+            minWidth: 500,
+            title: '', // Title is in the component
+            actions: [], // Actions are in the component
+            appendTo: this.viewContainerRef
+        });
+        // Handle the import event from the dialog component
+        const dialogComponentRef = this.textImportDialog.content.instance;
+        // Subscribe to import event
+        dialogComponentRef.importSpec.subscribe((spec) => {
+            this.handleTextImport(spec);
+            this.textImportDialog?.close();
+        });
+        // Subscribe to cancel event
+        dialogComponentRef.cancelDialog.subscribe(() => {
+            this.textImportDialog?.close();
+        });
+    }
+    async handleTextImport(spec) {
+        // Create a file-loaded component (reusing the same structure)
+        const textComponent = {
+            id: this.generateId(),
+            name: spec.name,
+            description: spec.description,
+            specification: spec,
+            filename: 'text-import.json',
+            loadedAt: new Date(),
+            isFileLoaded: true,
+            type: spec.type || 'Component',
+            status: 'Text'
+        };
+        // Add to the list and refresh
+        this.fileLoadedComponents.push(textComponent);
+        this.combineAndFilterComponents();
+        console.log(`Loaded component "${spec.name}" from text input`);
+        // Automatically select and run the newly loaded component
+        this.expandedComponent = textComponent;
+        this.runComponent(textComponent);
+    }
+    async handleFileSelect(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        if (!file)
+            return;
+        // Only accept JSON files
+        if (!file.name.endsWith('.json')) {
+            console.error('Please select a JSON file');
+            // Could add a toast notification here
+            return;
+        }
+        try {
+            const fileContent = await this.readFile(file);
+            const spec = JSON.parse(fileContent);
+            // Validate the spec has required fields
+            if (!spec.name || !spec.code) {
+                console.error('Invalid component specification: missing required fields (name, code)');
+                return;
+            }
+            // Create a file-loaded component
+            const fileComponent = {
+                id: this.generateId(),
+                name: spec.name,
+                description: spec.description,
+                specification: spec,
+                filename: file.name,
+                loadedAt: new Date(),
+                isFileLoaded: true,
+                type: spec.type || 'Component',
+                status: 'File'
+            };
+            // Add to the list and refresh
+            this.fileLoadedComponents.push(fileComponent);
+            this.combineAndFilterComponents();
+            console.log(`Loaded component "${spec.name}" from ${file.name}`);
+            // Automatically select and run the newly loaded component
+            this.expandedComponent = fileComponent;
+            this.runComponent(fileComponent);
+            // Clear the input for future uploads
+            input.value = '';
+        }
+        catch (error) {
+            console.error('Error loading component file:', error);
+        }
+    }
+    readFile(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (e) => resolve(e.target?.result);
+            reader.onerror = reject;
+            reader.readAsText(file);
+        });
+    }
+    generateId() {
+        return 'file-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+    }
+    removeFileComponent(component) {
+        const index = this.fileLoadedComponents.indexOf(component);
+        if (index > -1) {
+            this.fileLoadedComponents.splice(index, 1);
+            // If this was the selected component, clear it
+            if (this.selectedComponent === component) {
+                this.stopComponent();
+            }
+            // If this was the expanded component, clear it
+            if (this.expandedComponent === component) {
+                this.expandedComponent = null;
+            }
+            this.combineAndFilterComponents();
+        }
+    }
     getComponentTypeIcon(type) {
         const icons = {
             'Report': 'fa-file-alt',
@@ -511,47 +1318,313 @@ ${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify
         };
         return colors[type || ''] || '#9CA3AF';
     }
-    static ɵfac = function ComponentStudioDashboardComponent_Factory(t) { return new (t || ComponentStudioDashboardComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentStudioDashboardComponent, selectors: [["mj-component-studio-dashboard"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 29, vars: 9, consts: [[1, "component-studio"], [1, "dashboard-header"], [1, "header-content"], [1, "fa-solid", "fa-puzzle-piece"], [1, "header-subtitle"], ["kendoButton", "", 3, "click", "disabled"], [1, "fa-solid", "fa-sync"], ["orientation", "horizontal", 2, "flex", "1", "height", "auto"], [3, "min", "max", "size"], [1, "components-panel"], [1, "panel-header"], [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-search"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-info-circle"], [1, "component-card", 3, "expanded", "running"], [1, "component-card"], [1, "card-header", 3, "click"], [1, "card-icon"], [1, "fa-solid", 3, "ngClass"], [1, "card-info"], [1, "card-name"], [1, "card-meta"], [1, "card-type"], [1, "card-version"], [1, "status-badge", "published"], [1, "status-badge", "draft"], [1, "card-chevron"], [1, "fa-solid", "fa-chevron-up"], [1, "fa-solid", "fa-chevron-down"], [1, "card-details"], [1, "detail-section"], [1, "info-grid"], [1, "info-item"], [1, "info-label"], [1, "info-value"], [1, "card-actions"], ["kendoButton", "", 3, "themeColor"], ["kendoButton", "", "title", "Stop current component and run this one", 3, "themeColor"], ["kendoButton", "", 3, "click", "themeColor"], [1, "fa-solid", "fa-stop"], ["kendoButton", "", "title", "Stop current component and run this one", 3, "click", "themeColor"], [1, "fa-solid", "fa-play"], [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-rocket", "fa-3x"]], template: function ComponentStudioDashboardComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div")(4, "h1");
-            i0.ɵɵelement(5, "i", 3);
+    /**
+     * Initialize the spec and code editors when a component is selected
+     */
+    initializeEditors() {
+        if (this.selectedComponent) {
+            const spec = this.getComponentSpec(this.selectedComponent);
+            // Deep parse the spec for better readability
+            const parseOptions = {
+                extractInlineJson: true,
+                maxDepth: 100,
+                debug: false
+            };
+            const parsed = ParseJSONRecursive(spec, parseOptions);
+            this.editableSpec = JSON.stringify(parsed, null, 2);
+            // Extract code from spec
+            this.editableCode = spec.code || '// No code available';
+            // Build code sections array
+            this.buildCodeSections();
+            // Reset editing flags
+            this.isEditingSpec = false;
+            this.isEditingCode = false;
+            this.lastEditSource = null;
+        }
+    }
+    /**
+     * Handle spec editor changes
+     */
+    onSpecChange(newSpec) {
+        this.editableSpec = newSpec;
+        this.isEditingSpec = true;
+        this.lastEditSource = 'spec';
+    }
+    /**
+     * Handle code editor changes
+     */
+    onCodeChange(newCode) {
+        this.editableCode = newCode;
+        this.isEditingCode = true;
+        this.lastEditSource = 'code';
+    }
+    /**
+     * Apply spec changes and update the code tab
+     */
+    applySpecChanges() {
+        try {
+            const parsed = JSON.parse(this.editableSpec);
+            // Update the component spec
+            if (this.selectedComponent) {
+                if (this.isFileLoadedComponent(this.selectedComponent)) {
+                    // Update file-loaded component
+                    this.selectedComponent.specification = parsed;
+                }
+                else {
+                    // Update database component's Specification field in memory only
+                    this.selectedComponent.Specification = JSON.stringify(parsed);
+                }
+                // Update the runtime spec
+                this.componentSpec = parsed;
+                // Update the code editor with new code from spec
+                this.editableCode = parsed.code || '// No code available';
+                // Rebuild code sections from updated spec
+                this.buildCodeSections();
+                // If component is running, update it without full refresh
+                if (this.isRunning) {
+                    this.updateRunningComponent();
+                }
+                this.isEditingSpec = false;
+            }
+        }
+        catch (error) {
+            console.error('Invalid JSON in spec editor:', error);
+            // Could show a toast notification here
+        }
+    }
+    /**
+     * Apply code changes and update the spec
+     */
+    applyCodeChanges() {
+        if (this.selectedComponent) {
+            try {
+                // Parse the current spec
+                const spec = JSON.parse(this.editableSpec);
+                // Update main code and dependencies from code sections
+                if (this.codeSections.length > 0) {
+                    // First section is always the main component
+                    spec.code = this.codeSections[0].code;
+                    // Update dependencies if any
+                    if (this.codeSections.length > 1 && spec.dependencies) {
+                        for (let i = 1; i < this.codeSections.length; i++) {
+                            const section = this.codeSections[i];
+                            if (section.index !== undefined && spec.dependencies[section.index]) {
+                                spec.dependencies[section.index].code = section.code;
+                            }
+                        }
+                    }
+                }
+                // Update the spec editor
+                const parseOptions = {
+                    extractInlineJson: true,
+                    maxDepth: 100,
+                    debug: false
+                };
+                const parsed = ParseJSONRecursive(spec, parseOptions);
+                this.editableSpec = JSON.stringify(parsed, null, 2);
+                // Update the component entity in memory
+                if (this.isFileLoadedComponent(this.selectedComponent)) {
+                    this.selectedComponent.specification = spec;
+                }
+                else {
+                    // Update database component's Specification field in memory only
+                    this.selectedComponent.Specification = JSON.stringify(spec);
+                }
+                // Update the runtime spec
+                this.componentSpec = spec;
+                // If component is running, update it without full refresh
+                if (this.isRunning) {
+                    this.updateRunningComponent();
+                }
+                this.isEditingCode = false;
+            }
+            catch (error) {
+                console.error('Error applying code changes:', error);
+            }
+        }
+    }
+    /**
+     * Refresh the running component with new spec/code (in-place update)
+     */
+    refreshComponent() {
+        if (this.selectedComponent && this.isRunning) {
+            // Use the same in-place update logic as Apply Changes
+            this.updateRunningComponent();
+        }
+    }
+    /**
+     * Update the running component without full refresh
+     */
+    updateRunningComponent() {
+        if (this.selectedComponent && this.isRunning) {
+            // Get the updated spec
+            const spec = this.getComponentSpec(this.selectedComponent);
+            // Temporarily set to null to force React to re-render
+            this.componentSpec = null;
+            this.cdr.detectChanges();
+            // Then set the new spec
+            setTimeout(() => {
+                this.componentSpec = spec;
+                try {
+                    this.cdr.detectChanges();
+                }
+                catch (error) {
+                    console.error('Error with cdr.detectChanges():', error);
+                }
+            }, 10);
+        }
+    }
+    /**
+     * Build code sections array from spec
+     */
+    buildCodeSections() {
+        if (!this.selectedComponent) {
+            this.codeSections = [];
+            return;
+        }
+        const spec = this.getComponentSpec(this.selectedComponent);
+        const sections = [];
+        // Main component code
+        sections.push({
+            title: spec.name || 'Main Component',
+            code: spec.code || '// No code available',
+            expanded: true,
+            isDependency: false
+        });
+        // Add dependent components if any
+        if (spec.dependencies && Array.isArray(spec.dependencies)) {
+            spec.dependencies.forEach((dep, index) => {
+                sections.push({
+                    title: dep.name || `Dependency ${index + 1}`,
+                    code: dep.code || '// No code available',
+                    expanded: false,
+                    isDependency: true,
+                    index: index
+                });
+            });
+        }
+        this.codeSections = sections;
+    }
+    /**
+     * Get component code sections for panel bar
+     */
+    getComponentCodeSections() {
+        return this.codeSections;
+    }
+    /**
+     * Handle code section changes
+     */
+    onCodeSectionChange(newCode, sectionIndex) {
+        if (this.codeSections[sectionIndex]) {
+            this.codeSections[sectionIndex].code = newCode;
+            this.isEditingCode = true;
+            this.lastEditSource = 'code';
+        }
+    }
+    /**
+     * Toggle the details pane (spec/code editors)
+     */
+    toggleDetailsPane() {
+        this.isDetailsPaneCollapsed = !this.isDetailsPaneCollapsed;
+        this.cdr.detectChanges();
+    }
+    /**
+     * Handle tab selection
+     */
+    onTabSelect(event) {
+        this.activeTab = event.index;
+        // Initialize editors when switching to spec or code tabs
+        // Both tabs now need initialization since there's no separate Run tab
+        this.initializeEditors();
+    }
+    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);
+        } if (rf & 2) {
+            let _t;
+            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) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "div")(4, "h1");
+            i0.ɵɵelement(5, "i", 4);
             i0.ɵɵtext(6, " Component Studio");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "p", 4);
-            i0.ɵɵtext(8, "Testing components without custom properties");
+            i0.ɵɵelementStart(7, "p", 5);
+            i0.ɵɵtext(8, "Testing components without required custom properties");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(9, "button", 5);
-            i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Template_button_click_9_listener() { return ctx.refreshData(); });
-            i0.ɵɵelement(10, "span", 6);
-            i0.ɵɵtext(11, " Refresh ");
+            i0.ɵɵelementStart(9, "div", 6);
+            i0.ɵɵtemplate(10, ComponentStudioDashboardComponent_Conditional_10_Template, 3, 2, "button", 7);
+            i0.ɵɵelementStart(11, "div", 8)(12, "button", 9);
+            i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleImportDropdown()); });
+            i0.ɵɵelement(13, "span", 10);
+            i0.ɵɵtext(14, " Import ");
+            i0.ɵɵelement(15, "span", 11);
+            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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵelementEnd();
+            i0.ɵɵelementStart(33, "span", 23);
+            i0.ɵɵtext(34);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(12, "kendo-splitter", 7)(13, "kendo-splitter-pane", 8)(14, "div", 9)(15, "div", 10)(16, "h3");
-            i0.ɵɵtext(17, "Components");
+            i0.ɵɵelementStart(35, "div", 24);
+            i0.ɵɵtemplate(36, ComponentStudioDashboardComponent_Conditional_36_Template, 5, 2, "div", 25);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "div", 11)(19, "kendo-textbox", 12);
-            i0.ɵɵlistener("valueChange", function ComponentStudioDashboardComponent_Template_kendo_textbox_valueChange_19_listener($event) { return ctx.onSearchChange($event); });
-            i0.ɵɵtemplate(20, ComponentStudioDashboardComponent_ng_template_20_Template, 1, 0, "ng-template", 13);
+            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.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(21, "div", 14);
-            i0.ɵɵtemplate(22, ComponentStudioDashboardComponent_Conditional_22_Template, 3, 0, "div", 15)(23, ComponentStudioDashboardComponent_Conditional_23_Template, 6, 0, "div", 16)(24, ComponentStudioDashboardComponent_Conditional_24_Template, 2, 0);
+            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.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(25, "kendo-splitter-pane", 17)(26, "div", 18);
-            i0.ɵɵtemplate(27, ComponentStudioDashboardComponent_Conditional_27_Template, 2, 1)(28, ComponentStudioDashboardComponent_Conditional_28_Template, 6, 0, "div", 19);
+            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.ɵɵelementEnd()()()();
         } if (rf & 2) {
-            i0.ɵɵadvance(9);
-            i0.ɵɵproperty("disabled", ctx.isLoading);
+            i0.ɵɵadvance(10);
+            i0.ɵɵconditional(ctx.selectedComponent && ctx.isRunning ? 10 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("open", ctx.importDropdownOpen);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("themeColor", "info");
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("min", "350px")("max", "600px")("size", "400px");
+            i0.ɵɵconditional(ctx.importDropdownOpen ? 16 : -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.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate2("", ctx.filteredComponents.length, " of ", ctx.allComponents.length, "");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.availableCategories.length > 0 ? 36 : -1);
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("value", ctx.searchQuery)("clearButton", true);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.isLoading ? 22 : ctx.filteredComponents.length === 0 ? 23 : 24);
+            i0.ɵɵconditional(ctx.isLoading ? 41 : ctx.filteredComponents.length === 0 ? 42 : 43);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("min", "400px");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isRunning && ctx.selectedComponent && ctx.componentSpec ? 27 : 28);
-        } }, dependencies: [i1.NgClass, i2.TextBoxComponent, i2.TextBoxPrefixTemplateDirective, i3.SplitterComponent, i3.SplitterPaneComponent, i4.ButtonComponent, i5.MJReactComponent, i1.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: 100%;\n  background: #f8f9fa;\n  overflow: hidden;\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      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  }\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      h3 {\n        margin: 0 0 16px 0;\n        font-size: 18px;\n        font-weight: 600;\n        color: #212529;\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      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        .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          .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            }\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            }\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: _ngcontent-%COMP%_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    \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    }\n  }\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}"] });
+            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}"] });
 };
 ComponentStudioDashboardComponent = __decorate([
     RegisterClass(BaseDashboard, 'ComponentStudioDashboard')
@@ -559,9 +1632,15 @@ ComponentStudioDashboardComponent = __decorate([
 export { ComponentStudioDashboardComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentStudioDashboardComponent, [{
         type: Component,
-        args: [{ selector: 'mj-component-studio-dashboard', template: "<div class=\"component-studio\">\n  <!-- Header -->\n  <div class=\"dashboard-header\">\n    <div class=\"header-content\">\n      <div>\n        <h1><i class=\"fa-solid fa-puzzle-piece\"></i> Component Studio</h1>\n        <p class=\"header-subtitle\">Testing components without custom properties</p>\n      </div>\n      <button kendoButton (click)=\"refreshData()\" [disabled]=\"isLoading\">\n        <span class=\"fa-solid fa-sync\"></span> Refresh\n      </button>\n    </div>\n  </div>\n\n  <!-- Main Content with Splitter -->\n  <kendo-splitter orientation=\"horizontal\" style=\"flex: 1; height: auto;\">\n    <!-- Left Panel - Component List -->\n    <kendo-splitter-pane [min]=\"'350px'\" [max]=\"'600px'\" [size]=\"'400px'\">\n      <div class=\"components-panel\">\n        <div class=\"panel-header\">\n          <h3>Components</h3>\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 custom properties.\n              <br>\n              <small>Only components that don't require custom props can be tested here.</small>\n            </div>\n          } @else {\n            @for (component of filteredComponents; track component.ID) {\n              <div class=\"component-card\" \n                [class.expanded]=\"expandedComponent?.ID === component.ID\"\n                [class.running]=\"selectedComponent?.ID === component.ID && isRunning\">\n                \n                <!-- Card Header - Always visible -->\n                <div class=\"card-header\" (click)=\"toggleComponentExpansion(component)\">\n                  <div class=\"card-icon\" [style.color]=\"getComponentTypeColor(component.Type)\">\n                    <i class=\"fa-solid\" [ngClass]=\"getComponentTypeIcon(component.Type)\"></i>\n                  </div>\n                  <div class=\"card-info\">\n                    <div class=\"card-name\">{{ component.Name }}</div>\n                    <div class=\"card-meta\">\n                      <span class=\"card-type\">{{ component.Type || 'Component' }}</span>\n                      <span class=\"card-version\">v{{ component.Version || '1.0.0' }}</span>\n                      @if (component.Status === 'Published') {\n                        <span class=\"status-badge published\">Published</span>\n                      } @else {\n                        <span class=\"status-badge draft\">Draft</span>\n                      }\n                    </div>\n                  </div>\n                  <div class=\"card-chevron\">\n                    @if (expandedComponent?.ID === component.ID) {\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?.ID === component.ID) {\n                  <div class=\"card-details\">\n                    @if (component.Description) {\n                      <div class=\"detail-section\">\n                        <label>Description</label>\n                        <p>{{ component.Description }}</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\">{{ component.Type || 'Unknown' }}</span>\n                        </div>\n                        <div class=\"info-item\">\n                          <span class=\"info-label\">Version:</span>\n                          <span class=\"info-value\">{{ component.Version || '1.0.0' }}</span>\n                        </div>\n                        <div class=\"info-item\">\n                          <span class=\"info-label\">Status:</span>\n                          <span class=\"info-value\">{{ component.Status || 'Draft' }}</span>\n                        </div>\n                        @if (component.__mj_UpdatedAt) {\n                          <div class=\"info-item\">\n                            <span class=\"info-label\">Updated:</span>\n                            <span class=\"info-value\">{{ component.__mj_UpdatedAt | date:'short' }}</span>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                    \n                    <div class=\"card-actions\">\n                      @if (selectedComponent?.ID === component.ID && 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?.ID !== component.ID) {\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 -->\n    <kendo-splitter-pane [min]=\"'400px'\">\n      <div class=\"component-display\">\n        @if (isRunning && selectedComponent && 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          <!-- Empty State -->\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 and click \"Run Component\" to see it in action</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: 100%;\n  background: #f8f9fa;\n  overflow: hidden;\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      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  }\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      h3 {\n        margin: 0 0 16px 0;\n        font-size: 18px;\n        font-weight: 600;\n        color: #212529;\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      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        .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          .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            }\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            }\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    \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    }\n  }\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}"] }]
-    }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentStudioDashboardComponent, { className: "ComponentStudioDashboardComponent", filePath: "src/ComponentStudio/component-studio-dashboard.component.ts", lineNumber: 18 }); })();
+        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}"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.DialogService }, { type: i0.ViewContainerRef }], { fileInput: [{
+            type: ViewChild,
+            args: ['fileInput', { static: false }]
+        }], onDocumentClick: [{
+            type: HostListener,
+            args: ['document:click', ['$event']]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentStudioDashboardComponent, { className: "ComponentStudioDashboardComponent", filePath: "src/ComponentStudio/component-studio-dashboard.component.ts", lineNumber: 45 }); })();
 /**
  * Function to prevent tree shaking of the ComponentStudioDashboardComponent.
  */