@memberjunction/ng-dashboards 2.86.0 → 2.87.0

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

@@ -4,426 +4,299 @@ 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, ChangeDetectionStrategy } from '@angular/core';
+import { Component } from '@angular/core';
 import { BaseDashboard } from '../generic/base-dashboard';
 import { RegisterClass } from '@memberjunction/global';
 import { RunView } from '@memberjunction/core';
-import { Subject, BehaviorSubject, combineLatest } from 'rxjs';
-import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 import { SharedService } from '@memberjunction/ng-shared';
 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-dialog";
+import * as i3 from "@progress/kendo-angular-layout";
 import * as i4 from "@progress/kendo-angular-buttons";
-import * as i5 from "@progress/kendo-angular-grid";
-import * as i6 from "./components/component-preview.component";
-import * as i7 from "./components/component-dependencies.component";
-import * as i8 from "./components/component-studio-settings.component";
+import * as i5 from "@memberjunction/ng-react";
 const _forTrack0 = ($index, $item) => $item.ID;
-function ComponentStudioDashboardComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2)(1, "div", 4)(2, "div", 5);
-    i0.ɵɵelement(3, "i", 6);
+function ComponentStudioDashboardComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 18);
+} }
+function ComponentStudioDashboardComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵelement(1, "i", 19);
+    i0.ɵɵtext(2, " Loading components... ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 7);
-    i0.ɵɵtext(5, "Loading Component Studio...");
-    i0.ɵɵelementEnd()()();
 } }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_ng_template_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 38);
+function ComponentStudioDashboardComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵtext(1, " No components found ");
+    i0.ɵɵelementEnd();
 } }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_For_16_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "label", 34)(1, "input", 35);
-    i0.ɵɵlistener("change", function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_For_16_Template_input_change_1_listener($event) { const type_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onTypeFilterChange(type_r5, $event.target.checked)); });
+function ComponentStudioDashboardComponent_Conditional_20_For_1_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 30);
+    i0.ɵɵtext(1, "Published");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(2, "span", 39);
-    i0.ɵɵtext(3);
+} }
+function ComponentStudioDashboardComponent_Conditional_20_For_1_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 31);
+    i0.ɵɵtext(1, "Draft");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const type_r5 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r1.selectedTypes$.value.has(type_r5));
-    i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", ctx_r1.getComponentTypeColor(type_r5));
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", type_r5, " ");
 } }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_For_22_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "label", 34)(1, "input", 35);
-    i0.ɵɵlistener("change", function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_For_22_Template_input_change_1_listener($event) { const status_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onStatusFilterChange(status_r7, $event.target.checked)); });
+function ComponentStudioDashboardComponent_Conditional_20_For_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 33);
+} }
+function ComponentStudioDashboardComponent_Conditional_20_For_1_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 34);
+} }
+function ComponentStudioDashboardComponent_Conditional_20_For_1_Conditional_17_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 36)(1, "label");
+    i0.ɵɵtext(2, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 40);
-    i0.ɵɵtext(3);
+    i0.ɵɵelementStart(3, "p");
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const status_r7 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r1.selectedStatuses$.value.has(status_r7));
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.getStatusBadgeClass(status_r7));
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(status_r7);
+    const component_r2 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(component_r2.Description);
 } }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 19)(1, "div", 27)(2, "h3");
-    i0.ɵɵtext(3, "Filters");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 28);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clearFilters()); });
-    i0.ɵɵtext(5, " Clear All ");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 29)(7, "label", 30);
-    i0.ɵɵtext(8, "Search");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "kendo-textbox", 31);
-    i0.ɵɵlistener("valueChange", function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_Template_kendo_textbox_valueChange_9_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSearchChange($event)); });
-    i0.ɵɵtemplate(10, ComponentStudioDashboardComponent_Conditional_3_Conditional_14_ng_template_10_Template, 1, 0, "ng-template", 32);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 29)(12, "label", 30);
-    i0.ɵɵtext(13, "Component Type");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 33);
-    i0.ɵɵrepeaterCreate(15, ComponentStudioDashboardComponent_Conditional_3_Conditional_14_For_16_Template, 4, 4, "label", 34, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 29)(18, "label", 30);
-    i0.ɵɵtext(19, "Status");
+function ComponentStudioDashboardComponent_Conditional_20_For_1_Conditional_17_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38)(1, "span", 39);
+    i0.ɵɵtext(2, "Updated:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 33);
-    i0.ɵɵrepeaterCreate(21, ComponentStudioDashboardComponent_Conditional_3_Conditional_14_For_22_Template, 4, 3, "label", 34, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(3, "span", 40);
+    i0.ɵɵtext(4);
+    i0.ɵɵpipe(5, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(23, "div", 29)(24, "label", 30);
-    i0.ɵɵtext(25, "Source");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "div", 33)(27, "label", 34)(28, "input", 35);
-    i0.ɵɵlistener("change", function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_Template_input_change_28_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSourceFilterChange("Local", $event.target.checked)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(29, "i", 36);
-    i0.ɵɵtext(30, " Local ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(31, "label", 34)(32, "input", 35);
-    i0.ɵɵlistener("change", function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_Template_input_change_32_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSourceFilterChange("Registry", $event.target.checked)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(33, "i", 37);
-    i0.ɵɵtext(34, " Registry ");
-    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const component_r2 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("fillMode", "flat")("size", "small");
-    i0.ɵɵadvance(5);
-    i0.ɵɵproperty("value", ctx_r1.searchQuery$.value)("clearButton", true);
-    i0.ɵɵadvance(6);
-    i0.ɵɵrepeater(ctx_r1.componentTypes);
-    i0.ɵɵadvance(6);
-    i0.ɵɵrepeater(ctx_r1.componentStatuses);
-    i0.ɵɵadvance(7);
-    i0.ɵɵproperty("checked", ctx_r1.selectedSources$.value.has("Local"));
-    i0.ɵɵadvance(4);
-    i0.ɵɵproperty("checked", ctx_r1.selectedSources$.value.has("Registry"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, component_r2.__mj_UpdatedAt, "short"));
 } }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_4_For_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 60);
+function ComponentStudioDashboardComponent_Conditional_20_For_1_Conditional_17_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 43);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_20_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.ɵɵtext(1, " Stop Component ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("icon", "fa-solid fa-stop")("themeColor", "error");
 } }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_4_For_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 61);
+function ComponentStudioDashboardComponent_Conditional_20_For_1_Conditional_17_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 43);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_20_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.ɵɵtext(1, " Run Component ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("icon", "fa-solid fa-play")("themeColor", "primary");
 } }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 46);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_4_For_2_Template_div_click_0_listener() { const component_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.selectComponent(component_r9)); });
-    i0.ɵɵelementStart(1, "div", 47)(2, "div", 48);
-    i0.ɵɵtext(3);
+function ComponentStudioDashboardComponent_Conditional_20_For_1_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_20_For_1_Conditional_17_Conditional_1_Template, 5, 1, "div", 36);
+    i0.ɵɵelementStart(2, "div", 36)(3, "label");
+    i0.ɵɵtext(4, "Component Info");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 49);
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 50)(7, "h4", 51);
-    i0.ɵɵtext(8);
+    i0.ɵɵelementStart(5, "div", 37)(6, "div", 38)(7, "span", 39);
+    i0.ɵɵtext(8, "Type:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 52);
+    i0.ɵɵelementStart(9, "span", 40);
     i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 38)(12, "span", 39);
+    i0.ɵɵtext(13, "Version:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "p", 53);
-    i0.ɵɵtext(12);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 54);
-    i0.ɵɵelement(14, "i", 55);
+    i0.ɵɵelementStart(14, "span", 40);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 56)(17, "div", 57);
-    i0.ɵɵelement(18, "i", 58);
-    i0.ɵɵtext(19);
+    i0.ɵɵelementStart(16, "div", 38)(17, "span", 39);
+    i0.ɵɵtext(18, "Status:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 59);
-    i0.ɵɵtemplate(21, ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_4_For_2_Conditional_21_Template, 1, 0, "i", 60)(22, ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_4_For_2_Conditional_22_Template, 1, 0, "i", 61);
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(19, "span", 40);
+    i0.ɵɵtext(20);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(21, ComponentStudioDashboardComponent_Conditional_20_For_1_Conditional_17_Conditional_21_Template, 6, 4, "div", 38);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "div", 41);
+    i0.ɵɵtemplate(23, ComponentStudioDashboardComponent_Conditional_20_For_1_Conditional_17_Conditional_23_Template, 2, 2, "button", 42)(24, ComponentStudioDashboardComponent_Conditional_20_For_1_Conditional_17_Conditional_24_Template, 2, 2, "button", 42);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const component_r9 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassProp("selected", ctx_r1.selectedComponentId === component_r9.ID);
-    i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("background-color", ctx_r1.getComponentTypeColor(component_r9.Type || "Other"));
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", component_r9.Type || "Other", " ");
+    const component_r2 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.getStatusBadgeClass(component_r9.Status || "Draft"));
+    i0.ɵɵconditional(component_r2.Description ? 1 : -1);
+    i0.ɵɵadvance(9);
+    i0.ɵɵtextInterpolate(component_r2.Type || "Unknown");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(component_r2.Version || "1.0.0");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(component_r2.Status || "Draft");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", component_r9.Status, " ");
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(component_r9.Name);
+    i0.ɵɵconditional(component_r2.__mj_UpdatedAt ? 21 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("v", component_r9.Version, "");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(component_r9.Description || "No description available");
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", component_r9.Namespace || "root", " ");
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", component_r9.DeveloperOrganization || component_r9.DeveloperName || "Unknown", " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(!component_r9.SourceRegistryID ? 21 : 22);
-} }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 43);
-    i0.ɵɵrepeaterCreate(1, ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_4_For_2_Template, 23, 13, "div", 45, _forTrack0);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.filteredComponents$.value);
+    i0.ɵɵconditional((ctx_r2.selectedComponent == null ? null : ctx_r2.selectedComponent.ID) === component_r2.ID && ctx_r2.isRunning ? 23 : 24);
 } }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 71);
-    i0.ɵɵelement(1, "span", 72);
-    i0.ɵɵtext(2);
+function ComponentStudioDashboardComponent_Conditional_20_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 21)(1, "div", 22);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_20_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", 23);
+    i0.ɵɵelement(3, "i", 24);
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const dataItem_r11 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", ctx_r1.getComponentTypeColor(dataItem_r11.Type || "Other"));
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", dataItem_r11.Name, " ");
-} }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_5_ng_template_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 40);
-    i0.ɵɵtext(1);
+    i0.ɵɵelementStart(4, "div", 25)(5, "div", 26);
+    i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const dataItem_r12 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("ngClass", ctx_r1.getStatusBadgeClass(dataItem_r12.Status || "Draft"));
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", dataItem_r12.Status, " ");
-} }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-grid", 62);
-    i0.ɵɵlistener("selectionChange", function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_5_Template_kendo_grid_selectionChange_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectComponent($event.selectedRows && $event.selectedRows[0] ? $event.selectedRows[0].dataItem : null)); });
-    i0.ɵɵelementStart(1, "kendo-grid-column", 63);
-    i0.ɵɵtemplate(2, ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_5_ng_template_2_Template, 3, 3, "ng-template", 64);
+    i0.ɵɵelementStart(7, "div", 27)(8, "span", 28);
+    i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "kendo-grid-column", 65)(4, "kendo-grid-column", 66);
-    i0.ɵɵelementStart(5, "kendo-grid-column", 67);
-    i0.ɵɵtemplate(6, ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_5_ng_template_6_Template, 2, 2, "ng-template", 64);
+    i0.ɵɵelementStart(10, "span", 29);
+    i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(7, "kendo-grid-column", 68)(8, "kendo-grid-column", 69)(9, "kendo-grid-column", 70);
+    i0.ɵɵtemplate(12, ComponentStudioDashboardComponent_Conditional_20_For_1_Conditional_12_Template, 2, 0, "span", 30)(13, ComponentStudioDashboardComponent_Conditional_20_For_1_Conditional_13_Template, 2, 0, "span", 31);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "div", 32);
+    i0.ɵɵtemplate(15, ComponentStudioDashboardComponent_Conditional_20_For_1_Conditional_15_Template, 1, 0, "i", 33)(16, ComponentStudioDashboardComponent_Conditional_20_For_1_Conditional_16_Template, 1, 0, "i", 34);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(17, ComponentStudioDashboardComponent_Conditional_20_For_1_Conditional_17_Template, 25, 6, "div", 35);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("data", ctx_r1.filteredComponents$.value)("pageSize", 20)("pageable", true)("sortable", true)("filterable", false)("resizable", true)("selectable", true);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("width", 250);
+    const component_r2 = 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.ɵɵadvance(2);
-    i0.ɵɵproperty("width", 80);
+    i0.ɵɵstyleProp("color", ctx_r2.getComponentTypeColor(component_r2.Type));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("width", 100);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("width", 100);
+    i0.ɵɵproperty("ngClass", ctx_r2.getComponentTypeIcon(component_r2.Type));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(component_r2.Name);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(component_r2.Type || "Component");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("width", 200);
+    i0.ɵɵtextInterpolate1("v", component_r2.Version || "1.0.0", "");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("width", 150);
-} }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21)(1, "div", 41)(2, "span", 42);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(4, ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_4_Template, 3, 0, "div", 43)(5, ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_5_Template, 10, 13, "kendo-grid", 44);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(component_r2.Status === "Published" ? 12 : 13);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.filteredComponents$.value.length, " components found ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.viewMode === "grid" ? 4 : 5);
+    i0.ɵɵconditional((ctx_r2.expandedComponent == null ? null : ctx_r2.expandedComponent.ID) === component_r2.ID ? 15 : 16);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((ctx_r2.expandedComponent == null ? null : ctx_r2.expandedComponent.ID) === component_r2.ID ? 17 : -1);
 } }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_17_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-component-preview", 75);
-    i0.ɵɵlistener("openEntityRecord", function ComponentStudioDashboardComponent_Conditional_3_Conditional_17_Conditional_1_Template_mj_component_preview_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); });
-    i0.ɵɵelementEnd();
+function ComponentStudioDashboardComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ComponentStudioDashboardComponent_Conditional_20_For_1_Template, 18, 13, "div", 20, _forTrack0);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("component", ctx_r1.selectedComponent)("componentSpec", ctx_r1.componentSpec);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵrepeater(ctx_r2.filteredComponents);
 } }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_17_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 74);
-    i0.ɵɵelement(1, "i", 76);
-    i0.ɵɵelementStart(2, "h3");
-    i0.ɵɵtext(3, "No Component Selected");
+function ComponentStudioDashboardComponent_Conditional_23_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "details", 53)(1, "summary");
+    i0.ɵɵtext(2, "Technical Details (click to expand)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p");
-    i0.ɵɵtext(5, "Select a component from the Browse tab to preview it");
+    i0.ɵɵelementStart(3, "pre");
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-} }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22);
-    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_3_Conditional_17_Conditional_1_Template, 1, 2, "mj-component-preview", 73)(2, ComponentStudioDashboardComponent_Conditional_3_Conditional_17_Conditional_2_Template, 6, 0, "div", 74);
-    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.selectedComponent ? 1 : 2);
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r2.formatTechnicalDetails(ctx_r2.currentError.technicalDetails));
 } }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-component-dependencies", 78);
-    i0.ɵɵlistener("openEntityRecord", function ComponentStudioDashboardComponent_Conditional_3_Conditional_18_Conditional_1_Template_mj_component_dependencies_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); });
+function ComponentStudioDashboardComponent_Conditional_23_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 44)(1, "div", 46)(2, "div", 47);
+    i0.ɵɵelement(3, "i", 48);
+    i0.ɵɵelementStart(4, "h3");
+    i0.ɵɵtext(5, "Component Error");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 49);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_23_Conditional_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.copyErrorToClipboard()); });
+    i0.ɵɵelement(7, "i", 50);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "p", 51);
+    i0.ɵɵtext(9, " The component could not be rendered due to the following error: ");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("component", ctx_r1.selectedComponent);
-} }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 74);
-    i0.ɵɵelement(1, "i", 79);
-    i0.ɵɵelementStart(2, "h3");
-    i0.ɵɵtext(3, "No Component Selected");
+    i0.ɵɵelementStart(10, "div", 52)(11, "strong");
+    i0.ɵɵtext(12, "Error Type:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p");
-    i0.ɵɵtext(5, "Select a component to view its dependencies");
-    i0.ɵɵelementEnd()();
-} }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23);
-    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_3_Conditional_18_Conditional_1_Template, 1, 1, "mj-component-dependencies", 77)(2, ComponentStudioDashboardComponent_Conditional_3_Conditional_18_Conditional_2_Template, 6, 0, "div", 74);
+    i0.ɵɵtext(13);
+    i0.ɵɵelement(14, "br");
+    i0.ɵɵelementStart(15, "strong");
+    i0.ɵɵtext(16, "Message:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(17);
+    i0.ɵɵtemplate(18, ComponentStudioDashboardComponent_Conditional_23_Conditional_0_Conditional_18_Template, 5, 1, "details", 53);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "div", 54)(20, "strong");
+    i0.ɵɵtext(21, "What to do:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "ol")(23, "li");
+    i0.ɵɵtext(24, "Check that the component code is valid JavaScript/React");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "li");
+    i0.ɵɵtext(26, "Ensure all required dependencies are available");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(27, "li");
+    i0.ɵɵtext(28, "Review the technical details for specific error information");
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(29, "li");
+    i0.ɵɵtext(30, "Contact your system administrator if the issue persists");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(31, "div", 55)(32, "button", 56);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_23_Conditional_0_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.retryComponent()); });
+    i0.ɵɵtext(33, " Retry ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(34, "button", 43);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_23_Conditional_0_Template_button_click_34_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.stopComponent()); });
+    i0.ɵɵtext(35, " Stop ");
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(13);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.currentError.type, "");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.currentError.message, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.selectedComponent ? 1 : 2);
+    i0.ɵɵconditional(ctx_r2.currentError.technicalDetails ? 18 : -1);
+    i0.ɵɵadvance(14);
+    i0.ɵɵproperty("icon", "fa-solid fa-rotate");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("icon", "fa-solid fa-stop")("themeColor", "error");
 } }
-function ComponentStudioDashboardComponent_Conditional_3_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 24)(1, "mj-component-studio-settings", 80);
-    i0.ɵɵlistener("openEntityRecord", function ComponentStudioDashboardComponent_Conditional_3_Conditional_19_Template_mj_component_studio_settings_openEntityRecord_1_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); });
-    i0.ɵɵelementEnd()();
+function ComponentStudioDashboardComponent_Conditional_23_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-react-component", 57);
+    i0.ɵɵlistener("componentEvent", function ComponentStudioDashboardComponent_Conditional_23_Conditional_1_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onComponentEvent($event)); })("openEntityRecord", function ComponentStudioDashboardComponent_Conditional_23_Conditional_1_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onOpenEntityRecord($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("component", ctx_r2.componentSpec);
 } }
-function ComponentStudioDashboardComponent_Conditional_3_For_22_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 81);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_3_For_22_Template_div_click_0_listener() { const $index_r17 = i0.ɵɵrestoreView(_r16).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onTabChange(ctx_r1.navigationItems[$index_r17])); });
-    i0.ɵɵelement(1, "i");
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
+function ComponentStudioDashboardComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ComponentStudioDashboardComponent_Conditional_23_Conditional_0_Template, 36, 6, "div", 44)(1, ComponentStudioDashboardComponent_Conditional_23_Conditional_1_Template, 1, 1, "mj-react-component", 45);
 } if (rf & 2) {
-    const navItem_r18 = ctx.$implicit;
-    i0.ɵɵclassProp("active", navItem_r18.selected);
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(navItem_r18.icon);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(navItem_r18.text);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r2.currentError ? 0 : 1);
 } }
-function ComponentStudioDashboardComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 3)(1, "div", 8)(2, "div", 9)(3, "h1", 10);
-    i0.ɵɵelement(4, "i", 11);
-    i0.ɵɵtext(5, " Component Studio ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 12);
-    i0.ɵɵtext(7, " Discover, preview, and test reusable components ");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 13)(9, "div", 14)(10, "button", 15);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_3_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleViewMode()); });
+function ComponentStudioDashboardComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵelement(1, "i", 58);
+    i0.ɵɵelementStart(2, "h2");
+    i0.ɵɵtext(3, "Ready to Test Components");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "button", 16);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_3_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFilterPanel()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "button", 17);
-    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_3_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refreshData()); });
-    i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(13, "div", 18);
-    i0.ɵɵtemplate(14, ComponentStudioDashboardComponent_Conditional_3_Conditional_14_Template, 35, 6, "div", 19);
-    i0.ɵɵelementStart(15, "div", 20);
-    i0.ɵɵtemplate(16, ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Template, 6, 2, "div", 21)(17, ComponentStudioDashboardComponent_Conditional_3_Conditional_17_Template, 3, 1, "div", 22)(18, ComponentStudioDashboardComponent_Conditional_3_Conditional_18_Template, 3, 1, "div", 23)(19, ComponentStudioDashboardComponent_Conditional_3_Conditional_19_Template, 2, 0, "div", 24);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "div", 25);
-    i0.ɵɵrepeaterCreate(21, ComponentStudioDashboardComponent_Conditional_3_For_22_Template, 4, 5, "div", 26, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Select a component from the list and click \"Run Component\" to see it in action");
     i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(10);
-    i0.ɵɵproperty("icon", ctx_r1.viewMode === "grid" ? "fa-solid fa-list" : "fa-solid fa-th")("fillMode", "flat");
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", ctx_r1.showFilterPanel ? "fa-solid fa-filter-circle-xmark" : "fa-solid fa-filter")("fillMode", "flat");
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", "fa-solid fa-sync")("fillMode", "flat");
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.showFilterPanel && ctx_r1.activeTab === "browse" ? 14 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.activeTab === "browse" ? 16 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.activeTab === "preview" ? 17 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.activeTab === "dependencies" ? 18 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.activeTab === "settings" ? 19 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r1.navigationConfig);
 } }
 let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent extends BaseDashboard {
     cdr;
-    // State management
-    isLoading = false;
-    activeTab = 'browse'; // Default tab
-    viewMode = 'grid';
-    selectedComponentId = null;
-    showFilterPanel = true;
-    showPreviewPanel = false;
-    // Data
-    components$ = new BehaviorSubject([]);
-    filteredComponents$ = new BehaviorSubject([]);
-    registries$ = new BehaviorSubject([]);
-    libraries$ = new BehaviorSubject([]);
-    // Filters
-    searchQuery$ = new BehaviorSubject('');
-    selectedTypes$ = new BehaviorSubject(new Set());
-    selectedStatuses$ = new BehaviorSubject(new Set(['Published'])); // Default to published
-    selectedSources$ = new BehaviorSubject(new Set());
-    selectedNamespaces$ = new BehaviorSubject(new Set());
-    // Component types for filtering
-    componentTypes = ['Report', 'Dashboard', 'Form', 'Table', 'Chart', 'Navigation', 'Search', 'Widget', 'Utility', 'Other'];
-    componentStatuses = ['Draft', 'Published', 'Deprecated'];
-    // Preview
+    // Component data
+    components = [];
+    filteredComponents = [];
     selectedComponent = null;
+    expandedComponent = null; // Track which card is expanded
     componentSpec = null;
-    previewError = null;
-    // Navigation items for bottom navigation
-    navigationItems = ['browse', 'preview', 'dependencies', 'settings'];
-    navigationConfig = [
-        { text: 'Browse', icon: 'fa-solid fa-th', selected: true },
-        { text: 'Preview', icon: 'fa-solid fa-eye', selected: false },
-        { text: 'Dependencies', icon: 'fa-solid fa-sitemap', selected: false },
-        { text: 'Settings', icon: 'fa-solid fa-cog', selected: false }
-    ];
+    isLoading = false;
+    searchQuery = '';
+    isRunning = false; // Track if component is currently running
+    // Error handling
+    currentError = null;
     destroy$ = new Subject();
-    stateChangeSubject = new Subject();
     constructor(cdr) {
         super();
         this.cdr = cdr;
@@ -431,305 +304,213 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
     ngAfterViewInit() {
         this.initDashboard();
         this.loadData();
-        this.emitStateChange();
-        this.updateNavigationSelection();
-        // Force change detection
-        this.cdr.detectChanges();
-    }
-    initDashboard() {
-        // Initialize dashboard - called once when dashboard is created
-        this.setupStateManagement();
-        this.setupFilterSubscriptions();
     }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
-        this.stateChangeSubject.complete();
+    }
+    initDashboard() {
+        // Initialize dashboard
     }
     async loadData() {
         this.isLoading = true;
-        this.cdr.markForCheck();
         try {
             const rv = new RunView();
-            // Load all data in parallel using RunViews
-            const [componentsResult, registriesResult, librariesResult] = await rv.RunViews([
-                {
-                    EntityName: 'Components',
-                    ExtraFilter: '',
-                    OrderBy: 'Name',
-                    MaxRows: 1000,
-                    ResultType: 'entity_object'
-                },
-                {
-                    EntityName: 'Component Registries',
-                    ExtraFilter: '',
-                    OrderBy: 'Name',
-                    MaxRows: 100,
-                    ResultType: 'entity_object'
-                },
-                {
-                    EntityName: 'Component Libraries',
-                    ExtraFilter: '',
-                    OrderBy: 'Name',
-                    MaxRows: 500,
-                    ResultType: 'entity_object'
-                }
-            ]);
-            if (componentsResult.Success) {
-                const components = componentsResult.Results;
-                // Load dependencies for each component if needed
-                // For now, just set the basic data
-                this.components$.next(components);
-                this.applyFilters();
-            }
-            if (registriesResult.Success) {
-                this.registries$.next(registriesResult.Results);
+            const result = await rv.RunView({
+                EntityName: 'MJ: Components',
+                ExtraFilter: '',
+                OrderBy: 'Name',
+                MaxRows: 1000,
+                ResultType: 'entity_object'
+            });
+            if (result.Success) {
+                this.components = result.Results || [];
+                this.filterComponents();
             }
-            if (librariesResult.Success) {
-                this.libraries$.next(librariesResult.Results);
+            else {
+                console.error('Failed to load components:', result.ErrorMessage);
             }
         }
         catch (error) {
-            console.error('Failed to load component data:', error);
+            console.error('Error loading components:', error);
         }
         finally {
             this.isLoading = false;
-            this.cdr.markForCheck();
         }
     }
-    setupFilterSubscriptions() {
-        // Combine all filter observables and apply filters when any change
-        combineLatest([
-            this.searchQuery$.pipe(debounceTime(300), distinctUntilChanged()),
-            this.selectedTypes$,
-            this.selectedStatuses$,
-            this.selectedSources$,
-            this.selectedNamespaces$,
-            this.components$
-        ])
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(([search, types, statuses, sources, namespaces, components]) => {
-            this.applyFiltersWithCriteria(search, types, statuses, sources, namespaces, components);
-        });
-    }
-    applyFilters() {
-        const search = this.searchQuery$.value;
-        const types = this.selectedTypes$.value;
-        const statuses = this.selectedStatuses$.value;
-        const sources = this.selectedSources$.value;
-        const namespaces = this.selectedNamespaces$.value;
-        const components = this.components$.value;
-        this.applyFiltersWithCriteria(search, types, statuses, sources, namespaces, components);
+    onSearchChange(query) {
+        this.searchQuery = query;
+        this.filterComponents();
     }
-    applyFiltersWithCriteria(search, types, statuses, sources, namespaces, components) {
-        let filtered = [...components];
-        // Search filter
-        if (search) {
-            const query = search.toLowerCase();
-            filtered = filtered.filter(c => c.Name?.toLowerCase().includes(query) ||
-                c.Description?.toLowerCase().includes(query) ||
-                c.Namespace?.toLowerCase().includes(query) ||
-                c.DeveloperName?.toLowerCase().includes(query) ||
-                c.DeveloperOrganization?.toLowerCase().includes(query));
+    filterComponents() {
+        if (!this.searchQuery) {
+            this.filteredComponents = [...this.components];
         }
-        // Type filter
-        if (types.size > 0) {
-            filtered = filtered.filter(c => c.Type && types.has(c.Type));
+        else {
+            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));
         }
-        // Status filter
-        if (statuses.size > 0) {
-            filtered = filtered.filter(c => c.Status && statuses.has(c.Status));
+    }
+    toggleComponentExpansion(component) {
+        // Toggle expansion - if clicking the same component, collapse it
+        if (this.expandedComponent?.ID === component.ID) {
+            this.expandedComponent = null;
         }
-        // Source filter (Local vs Registry)
-        if (sources.size > 0) {
-            filtered = filtered.filter(c => {
-                const isLocal = !c.SourceRegistryID;
-                return (sources.has('Local') && isLocal) || (sources.has('Registry') && !isLocal);
-            });
+        else {
+            this.expandedComponent = component;
         }
-        // Namespace filter
-        if (namespaces.size > 0) {
-            filtered = filtered.filter(c => {
-                if (!c.Namespace)
-                    return false;
-                // Check if namespace starts with any selected namespace
-                return Array.from(namespaces).some(ns => c.Namespace?.startsWith(ns));
-            });
+        this.cdr.detectChanges();
+    }
+    runComponent(component) {
+        this.selectedComponent = component;
+        this.componentSpec = JSON.parse(component.Specification);
+        this.isRunning = true;
+        this.currentError = null; // Clear any previous errors
+        console.log('Running component:', component.Name);
+        this.cdr.detectChanges();
+    }
+    stopComponent() {
+        this.isRunning = false;
+        this.selectedComponent = null;
+        this.componentSpec = null;
+        this.currentError = null;
+        this.cdr.detectChanges();
+    }
+    /**
+     * Handle component events from React components
+     */
+    onComponentEvent(event) {
+        if (event.type === 'error') {
+            this.currentError = {
+                type: event.payload?.source || 'Component Error',
+                message: event.payload?.error || 'An error occurred while rendering the component',
+                technicalDetails: event.payload?.errorInfo || event.payload
+            };
+            this.cdr.detectChanges();
         }
-        this.filteredComponents$.next(filtered);
-        this.cdr.markForCheck();
     }
-    onTabChange(tabId) {
-        this.activeTab = tabId;
-        this.updateNavigationSelection();
-        // Trigger resize for rendering issues
-        setTimeout(() => {
-            SharedService.Instance.InvokeManualResize();
-        }, 100);
-        this.emitStateChange();
-        this.cdr.markForCheck();
+    /**
+     * Handle open entity record event from React components
+     */
+    onOpenEntityRecord(event) {
+        // Use SharedService to open the entity record in a new window/tab
+        SharedService.Instance.OpenEntityRecord(event.entityName, event.key);
     }
-    onNavigationChange(event) {
-        const index = event.index;
-        if (index >= 0 && index < this.navigationItems.length) {
-            this.activeTab = this.navigationItems[index];
-            this.updateNavigationSelection();
-            this.emitStateChange();
+    /**
+     * Retry running the current component
+     */
+    retryComponent() {
+        if (this.selectedComponent) {
+            this.currentError = null;
+            this.isRunning = false;
+            this.cdr.detectChanges();
+            // Small delay to reset the component
             setTimeout(() => {
-                SharedService.Instance.InvokeManualResize();
+                this.runComponent(this.selectedComponent);
             }, 100);
-            this.cdr.markForCheck();
         }
     }
-    updateNavigationSelection() {
-        this.navigationConfig.forEach((item, index) => {
-            item.selected = this.navigationItems[index] === this.activeTab;
-        });
-    }
-    toggleViewMode() {
-        this.viewMode = this.viewMode === 'grid' ? 'list' : 'grid';
-        this.emitStateChange();
-        this.cdr.markForCheck();
-    }
-    toggleFilterPanel() {
-        this.showFilterPanel = !this.showFilterPanel;
-        this.cdr.markForCheck();
-    }
-    async selectComponent(component) {
-        if (!component)
+    /**
+     * Copy error details to clipboard
+     */
+    async copyErrorToClipboard() {
+        if (!this.currentError)
             return;
-        this.selectedComponent = component;
-        this.selectedComponentId = component.ID;
-        // Load component details if in preview mode
-        if (this.activeTab === 'preview') {
-            await this.loadComponentDetails(component);
-        }
-        this.emitStateChange();
-        this.cdr.markForCheck();
-    }
-    async loadComponentDetails(component) {
+        const errorText = `
+Component Error Report
+${'='.repeat(50)}
+Component: ${this.selectedComponent?.Name}
+Error Type: ${this.currentError.type}
+Message: ${this.currentError.message}
+${this.currentError.technicalDetails ? '\nTechnical Details:\n' + JSON.stringify(this.currentError.technicalDetails, null, 2) : ''}
+`;
         try {
-            // TODO: Load component spec from storage
-            // For now, we'll need to implement storage of ComponentSpec
-            this.componentSpec = null;
-            this.previewError = null;
+            await navigator.clipboard.writeText(errorText);
+            console.log('Error details copied to clipboard');
         }
-        catch (error) {
-            this.previewError = 'Failed to load component details';
-            console.error('Error loading component details:', error);
+        catch (err) {
+            console.error('Failed to copy to clipboard:', err);
         }
     }
-    onSearchChange(query) {
-        this.searchQuery$.next(query);
-    }
-    onTypeFilterChange(type, checked) {
-        const types = new Set(this.selectedTypes$.value);
-        if (checked) {
-            types.add(type);
+    /**
+     * Format technical details for display
+     */
+    formatTechnicalDetails(details) {
+        if (typeof details === 'string') {
+            return details;
         }
-        else {
-            types.delete(type);
-        }
-        this.selectedTypes$.next(types);
-    }
-    onStatusFilterChange(status, checked) {
-        const statuses = new Set(this.selectedStatuses$.value);
-        if (checked) {
-            statuses.add(status);
-        }
-        else {
-            statuses.delete(status);
-        }
-        this.selectedStatuses$.next(statuses);
-    }
-    onSourceFilterChange(source, checked) {
-        const sources = new Set(this.selectedSources$.value);
-        if (checked) {
-            sources.add(source);
-        }
-        else {
-            sources.delete(source);
-        }
-        this.selectedSources$.next(sources);
-    }
-    clearFilters() {
-        this.searchQuery$.next('');
-        this.selectedTypes$.next(new Set());
-        this.selectedStatuses$.next(new Set(['Published']));
-        this.selectedSources$.next(new Set());
-        this.selectedNamespaces$.next(new Set());
-    }
-    onOpenEntityRecord(event) {
-        this.OpenEntityRecord.emit({
-            EntityName: event.entityName,
-            RecordPKey: event.key
-        });
+        return JSON.stringify(details, null, 2);
     }
     async refreshData() {
         await this.loadData();
     }
-    setupStateManagement() {
-        this.stateChangeSubject.pipe(debounceTime(50), takeUntil(this.destroy$)).subscribe(state => {
-            this.UserStateChanged.emit(state);
-        });
-    }
-    emitStateChange() {
-        const state = {
-            activeTab: this.activeTab,
-            selectedComponentId: this.selectedComponentId,
-            filterState: {
-                types: Array.from(this.selectedTypes$.value),
-                statuses: Array.from(this.selectedStatuses$.value),
-                sources: Array.from(this.selectedSources$.value),
-                namespaces: Array.from(this.selectedNamespaces$.value)
-            },
-            searchQuery: this.searchQuery$.value,
-            viewMode: this.viewMode,
-            previewState: {
-                componentId: this.selectedComponentId,
-                isLoading: false,
-                error: this.previewError,
-                testData: null
-            }
+    getComponentTypeIcon(type) {
+        const icons = {
+            'Report': 'fa-file-alt',
+            'Dashboard': 'fa-tachometer-alt',
+            'Form': 'fa-edit',
+            'Chart': 'fa-chart-bar',
+            'Table': 'fa-table',
+            'Widget': 'fa-cube',
+            'Navigation': 'fa-compass',
+            'Search': 'fa-search',
+            'Utility': 'fa-cog'
         };
-        this.stateChangeSubject.next(state);
+        return icons[type || ''] || 'fa-puzzle-piece';
     }
-    // Helper methods for template
     getComponentTypeColor(type) {
         const colors = {
-            'Report': '#3B82F6', // Blue
-            'Dashboard': '#8B5CF6', // Purple
-            'Form': '#10B981', // Green
-            'Chart': '#F97316', // Orange
-            'Table': '#06B6D4', // Cyan
-            'Widget': '#EC4899', // Pink
-            'Navigation': '#6366F1', // Indigo
-            'Search': '#14B8A6', // Teal
-            'Utility': '#64748B', // Slate
-            'Other': '#9CA3AF' // Gray
+            'Report': '#3B82F6',
+            'Dashboard': '#8B5CF6',
+            'Form': '#10B981',
+            'Chart': '#F97316',
+            'Table': '#06B6D4',
+            'Widget': '#EC4899',
+            'Navigation': '#6366F1',
+            'Search': '#14B8A6',
+            'Utility': '#64748B'
         };
-        return colors[type] || colors['Other'];
-    }
-    getStatusBadgeClass(status) {
-        const classes = {
-            'Draft': 'badge-draft',
-            'Published': 'badge-published',
-            'Deprecated': 'badge-deprecated'
-        };
-        return classes[status] || 'badge-default';
+        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: 4, vars: 2, consts: [[1, "component-studio-dashboard"], ["kendoDialogContainer", ""], [1, "loading-container"], [1, "dashboard-wrapper"], [1, "loading-content"], [1, "loading-spinner"], [1, "fa-solid", "fa-spinner", "fa-spin", "fa-3x"], [1, "loading-text"], [1, "dashboard-header"], [1, "header-left"], [1, "dashboard-title"], [1, "fa-solid", "fa-puzzle-piece"], [1, "dashboard-subtitle"], [1, "header-right"], [1, "header-actions"], ["kendoButton", "", "title", "Toggle view mode", 3, "click", "icon", "fillMode"], ["kendoButton", "", "title", "Toggle filters", 3, "click", "icon", "fillMode"], ["kendoButton", "", "title", "Refresh", 3, "click", "icon", "fillMode"], [1, "dashboard-content"], [1, "filter-panel"], [1, "content-area"], [1, "browse-content"], [1, "preview-content"], [1, "dependencies-content"], [1, "settings-content"], [1, "dashboard-navigation"], [1, "nav-item", 3, "active"], [1, "filter-header"], ["kendoButton", "", 3, "click", "fillMode", "size"], [1, "filter-section"], [1, "filter-label"], ["placeholder", "Search components...", 3, "valueChange", "value", "clearButton"], ["kendoTextBoxPrefixTemplate", ""], [1, "filter-options"], [1, "checkbox-label"], ["type", "checkbox", 3, "change", "checked"], [1, "fa-solid", "fa-house"], [1, "fa-solid", "fa-cloud"], [1, "fa-solid", "fa-search"], [1, "type-indicator"], [1, "status-badge", 3, "ngClass"], [1, "results-summary"], [1, "result-count"], [1, "component-grid"], [3, "data", "pageSize", "pageable", "sortable", "filterable", "resizable", "selectable"], [1, "component-card", 3, "selected"], [1, "component-card", 3, "click"], [1, "card-header"], [1, "card-type"], [1, "card-status", 3, "ngClass"], [1, "card-body"], [1, "card-title"], [1, "card-version"], [1, "card-description"], [1, "card-namespace"], [1, "fa-solid", "fa-folder-tree"], [1, "card-footer"], [1, "card-developer"], [1, "fa-solid", "fa-user"], [1, "card-source"], ["title", "Local", 1, "fa-solid", "fa-house"], ["title", "Registry", 1, "fa-solid", "fa-cloud"], [3, "selectionChange", "data", "pageSize", "pageable", "sortable", "filterable", "resizable", "selectable"], ["field", "Name", "title", "Component", 3, "width"], ["kendoGridCellTemplate", ""], ["field", "Version", "title", "Version", 3, "width"], ["field", "Type", "title", "Type", 3, "width"], ["field", "Status", "title", "Status", 3, "width"], ["field", "Namespace", "title", "Namespace", 3, "width"], ["field", "DeveloperOrganization", "title", "Developer", 3, "width"], ["field", "Description", "title", "Description"], [1, "component-name"], [1, "type-dot"], [3, "component", "componentSpec"], [1, "empty-state"], [3, "openEntityRecord", "component", "componentSpec"], [1, "fa-solid", "fa-eye", "fa-4x"], [3, "component"], [3, "openEntityRecord", "component"], [1, "fa-solid", "fa-sitemap", "fa-4x"], [3, "openEntityRecord"], [1, "nav-item", 3, "click"]], template: function ComponentStudioDashboardComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵelement(1, "div", 1);
-            i0.ɵɵtemplate(2, ComponentStudioDashboardComponent_Conditional_2_Template, 6, 0, "div", 2)(3, ComponentStudioDashboardComponent_Conditional_3_Template, 23, 11, "div", 3);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentStudioDashboardComponent, selectors: [["mj-component-studio-dashboard"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 25, vars: 10, consts: [[1, "component-studio"], [1, "dashboard-header"], [1, "header-content"], [1, "fa-solid", "fa-puzzle-piece"], ["kendoButton", "", 3, "click", "icon", "disabled"], ["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, "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, "icon", "themeColor"], ["kendoButton", "", 3, "click", "icon", "themeColor"], [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", "icon"], [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, "h1");
+            i0.ɵɵelement(4, "i", 3);
+            i0.ɵɵtext(5, " Component Studio");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "button", 4);
+            i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Template_button_click_6_listener() { return ctx.refreshData(); });
+            i0.ɵɵtext(7, " Refresh ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(8, "kendo-splitter", 5)(9, "kendo-splitter-pane", 6)(10, "div", 7)(11, "div", 8)(12, "h3");
+            i0.ɵɵtext(13, "Components");
             i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(14, "div", 9)(15, "kendo-textbox", 10);
+            i0.ɵɵlistener("valueChange", function ComponentStudioDashboardComponent_Template_kendo_textbox_valueChange_15_listener($event) { return ctx.onSearchChange($event); });
+            i0.ɵɵtemplate(16, ComponentStudioDashboardComponent_ng_template_16_Template, 1, 0, "ng-template", 11);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(17, "div", 12);
+            i0.ɵɵtemplate(18, ComponentStudioDashboardComponent_Conditional_18_Template, 3, 0, "div", 13)(19, ComponentStudioDashboardComponent_Conditional_19_Template, 2, 0, "div", 14)(20, ComponentStudioDashboardComponent_Conditional_20_Template, 2, 0);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(21, "kendo-splitter-pane", 15)(22, "div", 16);
+            i0.ɵɵtemplate(23, ComponentStudioDashboardComponent_Conditional_23_Template, 2, 1)(24, ComponentStudioDashboardComponent_Conditional_24_Template, 6, 0, "div", 17);
+            i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
+            i0.ɵɵadvance(6);
+            i0.ɵɵproperty("icon", "fa-solid fa-sync")("disabled", ctx.isLoading);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("min", "350px")("max", "600px")("size", "400px");
+            i0.ɵɵadvance(6);
+            i0.ɵɵproperty("value", ctx.searchQuery)("clearButton", true);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.isLoading ? 18 : ctx.filteredComponents.length === 0 ? 19 : 20);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("min", "400px");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isLoading ? 2 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading ? 3 : -1);
-        } }, dependencies: [i1.NgClass, i2.TextBoxComponent, i2.TextBoxPrefixTemplateDirective, i3.DialogContainerDirective, i4.ButtonComponent, i5.GridComponent, i5.ColumnComponent, i5.CellTemplateDirective, i6.ComponentPreviewComponent, i7.ComponentDependenciesComponent, i8.ComponentStudioSettingsComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n.component-studio-dashboard[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  position: relative;\n  overflow: hidden;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.03);\n    backdrop-filter: blur(10px);\n    z-index: 0;\n  }\n\n  .loading-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    position: relative;\n    z-index: 1;\n    \n    .loading-content {\n      text-align: center;\n      color: white;\n      \n      .loading-spinner {\n        margin-bottom: 20px;\n        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n      }\n      \n      .loading-text {\n        font-size: 18px;\n        font-weight: 500;\n        opacity: 0.9;\n      }\n    }\n  }\n\n  .dashboard-wrapper {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    position: relative;\n    z-index: 1;\n  }\n\n  // Header\n  .dashboard-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px 30px;\n    background: rgba(255, 255, 255, 0.1);\n    backdrop-filter: blur(20px);\n    border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n    position: relative;\n    z-index: 2;\n    \n    .header-left {\n      .dashboard-title {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        font-size: 28px;\n        font-weight: 700;\n        color: white;\n        margin: 0;\n        \n        i {\n          font-size: 32px;\n        }\n      }\n      \n      .dashboard-subtitle {\n        color: rgba(255, 255, 255, 0.8);\n        font-size: 14px;\n        margin-top: 4px;\n        margin-left: 44px;\n      }\n    }\n    \n    .header-right {\n      .header-actions {\n        display: flex;\n        gap: 8px;\n        \n        button {\n          background: rgba(255, 255, 255, 0.2);\n          border: 1px solid rgba(255, 255, 255, 0.3);\n          color: white;\n          \n          &:hover {\n            background: rgba(255, 255, 255, 0.3);\n          }\n        }\n      }\n    }\n  }\n\n  // Main Content\n  .dashboard-content {\n    flex: 1;\n    display: flex;\n    overflow: hidden;\n    background: rgba(255, 255, 255, 0.95);\n    margin: 20px;\n    border-radius: 12px;\n    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n    position: relative;\n    z-index: 1;\n  }\n\n  // Filter Panel\n  .filter-panel {\n    width: 280px;\n    background: white;\n    border-right: 1px solid #e5e7eb;\n    padding: 20px;\n    overflow-y: auto;\n    \n    .filter-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      \n      h3 {\n        font-size: 16px;\n        font-weight: 600;\n        color: #1f2937;\n        margin: 0;\n      }\n      \n      button {\n        padding: 4px 8px;\n        font-size: 12px;\n      }\n    }\n    \n    .filter-section {\n      margin-bottom: 24px;\n      \n      .filter-label {\n        display: block;\n        font-size: 13px;\n        font-weight: 600;\n        color: #6b7280;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        margin-bottom: 8px;\n      }\n      \n      kendo-textbox {\n        width: 100%;\n      }\n      \n      .filter-options {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n        \n        .checkbox-label {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          cursor: pointer;\n          font-size: 14px;\n          color: #374151;\n          \n          &:hover {\n            color: #111827;\n          }\n          \n          input[type=\"checkbox\"] {\n            cursor: pointer;\n          }\n          \n          .type-indicator {\n            width: 12px;\n            height: 12px;\n            border-radius: 3px;\n            flex-shrink: 0;\n          }\n          \n          .status-badge {\n            padding: 2px 8px;\n            border-radius: 12px;\n            font-size: 11px;\n            font-weight: 600;\n            \n            &.badge-draft {\n              background: #fef3c7;\n              color: #92400e;\n            }\n            \n            &.badge-published {\n              background: #d1fae5;\n              color: #065f46;\n            }\n            \n            &.badge-deprecated {\n              background: #fee2e2;\n              color: #991b1b;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  // Content Area\n  .content-area {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    \n    .browse-content {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      padding: 20px;\n      \n      .results-summary {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 20px;\n        \n        .result-count {\n          font-size: 14px;\n          color: #6b7280;\n        }\n      }\n      \n      // Component Grid\n      .component-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n        gap: 20px;\n        overflow-y: auto;\n        padding: 4px;\n        \n        .component-card {\n          background: white;\n          border: 2px solid #e5e7eb;\n          border-radius: 12px;\n          padding: 16px;\n          cursor: pointer;\n          transition: all 0.2s ease;\n          position: relative;\n          overflow: hidden;\n          height: fit-content;\n          \n          &:hover {\n            border-color: #9ca3af;\n            transform: translateY(-2px);\n            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n          }\n          \n          &.selected {\n            border-color: #6366f1;\n            background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);\n          }\n          \n          .card-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 12px;\n            \n            .card-type {\n              padding: 4px 10px;\n              border-radius: 6px;\n              color: white;\n              font-size: 11px;\n              font-weight: 600;\n              text-transform: uppercase;\n              letter-spacing: 0.05em;\n            }\n            \n            .card-status {\n              padding: 3px 8px;\n              border-radius: 12px;\n              font-size: 11px;\n              font-weight: 600;\n              \n              &.badge-draft {\n                background: #fef3c7;\n                color: #92400e;\n              }\n              \n              &.badge-published {\n                background: #d1fae5;\n                color: #065f46;\n              }\n              \n              &.badge-deprecated {\n                background: #fee2e2;\n                color: #991b1b;\n              }\n            }\n          }\n          \n          .card-body {\n            margin-bottom: 12px;\n            \n            .card-title {\n              font-size: 16px;\n              font-weight: 600;\n              color: #111827;\n              margin: 0 0 4px 0;\n            }\n            \n            .card-version {\n              font-size: 12px;\n              color: #6b7280;\n              margin-bottom: 8px;\n            }\n            \n            .card-description {\n              font-size: 13px;\n              color: #6b7280;\n              line-height: 1.5;\n              margin: 8px 0;\n              display: -webkit-box;\n              -webkit-line-clamp: 2;\n              -webkit-box-orient: vertical;\n              overflow: hidden;\n            }\n            \n            .card-namespace {\n              font-size: 12px;\n              color: #9ca3af;\n              display: flex;\n              align-items: center;\n              gap: 6px;\n              \n              i {\n                font-size: 11px;\n              }\n            }\n          }\n          \n          .card-footer {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding-top: 12px;\n            border-top: 1px solid #f3f4f6;\n            \n            .card-developer {\n              font-size: 12px;\n              color: #6b7280;\n              display: flex;\n              align-items: center;\n              gap: 6px;\n              \n              i {\n                font-size: 11px;\n              }\n            }\n            \n            .card-source {\n              font-size: 14px;\n              color: #9ca3af;\n            }\n          }\n        }\n      }\n      \n      // List View (Kendo Grid styling)\n      kendo-grid {\n        height: 100%;\n        \n        .component-name {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          \n          .type-dot {\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n          }\n        }\n        \n        .status-badge {\n          padding: 2px 8px;\n          border-radius: 12px;\n          font-size: 11px;\n          font-weight: 600;\n          display: inline-block;\n          \n          &.badge-draft {\n            background: #fef3c7;\n            color: #92400e;\n          }\n          \n          &.badge-published {\n            background: #d1fae5;\n            color: #065f46;\n          }\n          \n          &.badge-deprecated {\n            background: #fee2e2;\n            color: #991b1b;\n          }\n        }\n      }\n    }\n    \n    .preview-content,\n    .dependencies-content,\n    .settings-content {\n      height: 100%;\n      padding: 20px;\n      overflow-y: auto;\n    }\n    \n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      color: #9ca3af;\n      \n      i {\n        margin-bottom: 20px;\n        opacity: 0.5;\n      }\n      \n      h3 {\n        font-size: 20px;\n        font-weight: 600;\n        color: #6b7280;\n        margin: 0 0 8px 0;\n      }\n      \n      p {\n        font-size: 14px;\n        color: #9ca3af;\n        margin: 0;\n      }\n    }\n  }\n\n  // Bottom Navigation\n  .dashboard-navigation {\n    display: flex;\n    justify-content: center;\n    gap: 4px;\n    padding: 12px 20px;\n    background: rgba(255, 255, 255, 0.1);\n    backdrop-filter: blur(20px);\n    border-top: 1px solid rgba(255, 255, 255, 0.2);\n    position: relative;\n    z-index: 2;\n    \n    .nav-item {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 4px;\n      padding: 8px 24px;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      color: rgba(255, 255, 255, 0.7);\n      \n      i {\n        font-size: 20px;\n      }\n      \n      span {\n        font-size: 12px;\n        font-weight: 500;\n      }\n      \n      &:hover {\n        background: rgba(255, 255, 255, 0.15);\n        color: white;\n      }\n      \n      &.active {\n        background: rgba(255, 255, 255, 0.25);\n        color: white;\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Animations\n@keyframes[_ngcontent-%COMP%]   pulse[_ngcontent-%COMP%] {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}"], changeDetection: 0 });
+            i0.ɵɵconditional(ctx.isRunning && ctx.selectedComponent && ctx.componentSpec ? 23 : 24);
+        } }, 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  }\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        }\n        \n        .card-header {\n          display: flex;\n          align-items: center;\n          padding: 16px;\n          cursor: pointer;\n          user-select: none;\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}"] });
 };
 ComponentStudioDashboardComponent = __decorate([
     RegisterClass(BaseDashboard, 'ComponentStudioDashboard')
@@ -737,15 +518,13 @@ ComponentStudioDashboardComponent = __decorate([
 export { ComponentStudioDashboardComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentStudioDashboardComponent, [{
         type: Component,
-        args: [{ selector: 'mj-component-studio-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"component-studio-dashboard\">\n  <!-- Dialog container for Kendo dialogs -->\n  <div kendoDialogContainer></div>\n  \n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <div class=\"loading-content\">\n        <div class=\"loading-spinner\">\n          <i class=\"fa-solid fa-spinner fa-spin fa-3x\"></i>\n        </div>\n        <div class=\"loading-text\">Loading Component Studio...</div>\n      </div>\n    </div>\n  }\n  \n  @if (!isLoading) {\n    <div class=\"dashboard-wrapper\">\n      <!-- Header -->\n      <div class=\"dashboard-header\">\n        <div class=\"header-left\">\n          <h1 class=\"dashboard-title\">\n            <i class=\"fa-solid fa-puzzle-piece\"></i>\n            Component Studio\n          </h1>\n          <div class=\"dashboard-subtitle\">\n            Discover, preview, and test reusable components\n          </div>\n        </div>\n        <div class=\"header-right\">\n          <div class=\"header-actions\">\n            <button kendoButton \n              [icon]=\"viewMode === 'grid' ? 'fa-solid fa-list' : 'fa-solid fa-th'\"\n              [fillMode]=\"'flat'\"\n              (click)=\"toggleViewMode()\"\n              title=\"Toggle view mode\">\n            </button>\n            <button kendoButton \n              [icon]=\"showFilterPanel ? 'fa-solid fa-filter-circle-xmark' : 'fa-solid fa-filter'\"\n              [fillMode]=\"'flat'\"\n              (click)=\"toggleFilterPanel()\"\n              title=\"Toggle filters\">\n            </button>\n            <button kendoButton \n              [icon]=\"'fa-solid fa-sync'\"\n              [fillMode]=\"'flat'\"\n              (click)=\"refreshData()\"\n              title=\"Refresh\">\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- Main Content Area -->\n      <div class=\"dashboard-content\">\n        <!-- Left Filter Panel -->\n        @if (showFilterPanel && activeTab === 'browse') {\n          <div class=\"filter-panel\">\n            <div class=\"filter-header\">\n              <h3>Filters</h3>\n              <button kendoButton \n                [fillMode]=\"'flat'\"\n                [size]=\"'small'\"\n                (click)=\"clearFilters()\">\n                Clear All\n              </button>\n            </div>\n            \n            <!-- Search -->\n            <div class=\"filter-section\">\n              <label class=\"filter-label\">Search</label>\n              <kendo-textbox \n                [value]=\"searchQuery$.value\"\n                (valueChange)=\"onSearchChange($event)\"\n                placeholder=\"Search components...\"\n                [clearButton]=\"true\">\n                <ng-template kendoTextBoxPrefixTemplate>\n                  <i class=\"fa-solid fa-search\"></i>\n                </ng-template>\n              </kendo-textbox>\n            </div>\n\n            <!-- Type Filter -->\n            <div class=\"filter-section\">\n              <label class=\"filter-label\">Component Type</label>\n              <div class=\"filter-options\">\n                @for (type of componentTypes; track type) {\n                  <label class=\"checkbox-label\">\n                    <input type=\"checkbox\" \n                      [checked]=\"selectedTypes$.value.has(type)\"\n                      (change)=\"onTypeFilterChange(type, $any($event.target).checked)\">\n                    <span class=\"type-indicator\" [style.background-color]=\"getComponentTypeColor(type)\"></span>\n                    {{ type }}\n                  </label>\n                }\n              </div>\n            </div>\n\n            <!-- Status Filter -->\n            <div class=\"filter-section\">\n              <label class=\"filter-label\">Status</label>\n              <div class=\"filter-options\">\n                @for (status of componentStatuses; track status) {\n                  <label class=\"checkbox-label\">\n                    <input type=\"checkbox\" \n                      [checked]=\"selectedStatuses$.value.has(status)\"\n                      (change)=\"onStatusFilterChange(status, $any($event.target).checked)\">\n                    <span class=\"status-badge\" [ngClass]=\"getStatusBadgeClass(status)\">{{ status }}</span>\n                  </label>\n                }\n              </div>\n            </div>\n\n            <!-- Source Filter -->\n            <div class=\"filter-section\">\n              <label class=\"filter-label\">Source</label>\n              <div class=\"filter-options\">\n                <label class=\"checkbox-label\">\n                  <input type=\"checkbox\" \n                    [checked]=\"selectedSources$.value.has('Local')\"\n                    (change)=\"onSourceFilterChange('Local', $any($event.target).checked)\">\n                  <i class=\"fa-solid fa-house\"></i> Local\n                </label>\n                <label class=\"checkbox-label\">\n                  <input type=\"checkbox\" \n                    [checked]=\"selectedSources$.value.has('Registry')\"\n                    (change)=\"onSourceFilterChange('Registry', $any($event.target).checked)\">\n                  <i class=\"fa-solid fa-cloud\"></i> Registry\n                </label>\n              </div>\n            </div>\n          </div>\n        }\n\n        <!-- Center Content Area -->\n        <div class=\"content-area\">\n          <!-- Tab Content -->\n          @if (activeTab === 'browse') {\n            <div class=\"browse-content\">\n              <!-- Results Summary -->\n              <div class=\"results-summary\">\n                <span class=\"result-count\">\n                  {{ filteredComponents$.value.length }} components found\n                </span>\n              </div>\n\n              <!-- Component Grid/List -->\n              @if (viewMode === 'grid') {\n                <div class=\"component-grid\">\n                  @for (component of filteredComponents$.value; track component.ID) {\n                    <div class=\"component-card\" \n                      [class.selected]=\"selectedComponentId === component.ID\"\n                      (click)=\"selectComponent(component)\">\n                      <div class=\"card-header\">\n                        <div class=\"card-type\" [style.background-color]=\"getComponentTypeColor(component.Type || 'Other')\">\n                          {{ component.Type || 'Other' }}\n                        </div>\n                        <div class=\"card-status\" [ngClass]=\"getStatusBadgeClass(component.Status || 'Draft')\">\n                          {{ component.Status }}\n                        </div>\n                      </div>\n                      <div class=\"card-body\">\n                        <h4 class=\"card-title\">{{ component.Name }}</h4>\n                        <div class=\"card-version\">v{{ component.Version }}</div>\n                        <p class=\"card-description\">{{ component.Description || 'No description available' }}</p>\n                        <div class=\"card-namespace\">\n                          <i class=\"fa-solid fa-folder-tree\"></i>\n                          {{ component.Namespace || 'root' }}\n                        </div>\n                      </div>\n                      <div class=\"card-footer\">\n                        <div class=\"card-developer\">\n                          <i class=\"fa-solid fa-user\"></i>\n                          {{ component.DeveloperOrganization || component.DeveloperName || 'Unknown' }}\n                        </div>\n                        <div class=\"card-source\">\n                          @if (!component.SourceRegistryID) {\n                            <i class=\"fa-solid fa-house\" title=\"Local\"></i>\n                          } @else {\n                            <i class=\"fa-solid fa-cloud\" title=\"Registry\"></i>\n                          }\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </div>\n              } @else {\n                <!-- List View -->\n                <kendo-grid \n                  [data]=\"filteredComponents$.value\"\n                  [pageSize]=\"20\"\n                  [pageable]=\"true\"\n                  [sortable]=\"true\"\n                  [filterable]=\"false\"\n                  [resizable]=\"true\"\n                  [selectable]=\"true\"\n                  (selectionChange)=\"selectComponent($event.selectedRows && $event.selectedRows[0] ? $event.selectedRows[0].dataItem : null)\">\n                  <kendo-grid-column field=\"Name\" title=\"Component\" [width]=\"250\">\n                    <ng-template kendoGridCellTemplate let-dataItem>\n                      <div class=\"component-name\">\n                        <span class=\"type-dot\" [style.background-color]=\"getComponentTypeColor(dataItem.Type || 'Other')\"></span>\n                        {{ dataItem.Name }}\n                      </div>\n                    </ng-template>\n                  </kendo-grid-column>\n                  <kendo-grid-column field=\"Version\" title=\"Version\" [width]=\"80\"></kendo-grid-column>\n                  <kendo-grid-column field=\"Type\" title=\"Type\" [width]=\"100\"></kendo-grid-column>\n                  <kendo-grid-column field=\"Status\" title=\"Status\" [width]=\"100\">\n                    <ng-template kendoGridCellTemplate let-dataItem>\n                      <span class=\"status-badge\" [ngClass]=\"getStatusBadgeClass(dataItem.Status || 'Draft')\">\n                        {{ dataItem.Status }}\n                      </span>\n                    </ng-template>\n                  </kendo-grid-column>\n                  <kendo-grid-column field=\"Namespace\" title=\"Namespace\" [width]=\"200\"></kendo-grid-column>\n                  <kendo-grid-column field=\"DeveloperOrganization\" title=\"Developer\" [width]=\"150\"></kendo-grid-column>\n                  <kendo-grid-column field=\"Description\" title=\"Description\"></kendo-grid-column>\n                </kendo-grid>\n              }\n            </div>\n          }\n\n          @if (activeTab === 'preview') {\n            <div class=\"preview-content\">\n              @if (selectedComponent) {\n                <mj-component-preview \n                  [component]=\"selectedComponent\"\n                  [componentSpec]=\"componentSpec\"\n                  (openEntityRecord)=\"onOpenEntityRecord($event)\">\n                </mj-component-preview>\n              } @else {\n                <div class=\"empty-state\">\n                  <i class=\"fa-solid fa-eye fa-4x\"></i>\n                  <h3>No Component Selected</h3>\n                  <p>Select a component from the Browse tab to preview it</p>\n                </div>\n              }\n            </div>\n          }\n\n          @if (activeTab === 'dependencies') {\n            <div class=\"dependencies-content\">\n              @if (selectedComponent) {\n                <mj-component-dependencies\n                  [component]=\"selectedComponent\"\n                  (openEntityRecord)=\"onOpenEntityRecord($event)\">\n                </mj-component-dependencies>\n              } @else {\n                <div class=\"empty-state\">\n                  <i class=\"fa-solid fa-sitemap fa-4x\"></i>\n                  <h3>No Component Selected</h3>\n                  <p>Select a component to view its dependencies</p>\n                </div>\n              }\n            </div>\n          }\n\n          @if (activeTab === 'settings') {\n            <div class=\"settings-content\">\n              <mj-component-studio-settings\n                (openEntityRecord)=\"onOpenEntityRecord($event)\">\n              </mj-component-studio-settings>\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Bottom Navigation -->\n      <div class=\"dashboard-navigation\">\n        @for (navItem of navigationConfig; track $index) {\n          <div \n            class=\"nav-item\"\n            [class.active]=\"navItem.selected\"\n            (click)=\"onTabChange(navigationItems[$index])\">\n            <i [class]=\"navItem.icon\"></i>\n            <span>{{ navItem.text }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>", styles: [":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n.component-studio-dashboard {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  position: relative;\n  overflow: hidden;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.03);\n    backdrop-filter: blur(10px);\n    z-index: 0;\n  }\n\n  .loading-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    position: relative;\n    z-index: 1;\n    \n    .loading-content {\n      text-align: center;\n      color: white;\n      \n      .loading-spinner {\n        margin-bottom: 20px;\n        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n      }\n      \n      .loading-text {\n        font-size: 18px;\n        font-weight: 500;\n        opacity: 0.9;\n      }\n    }\n  }\n\n  .dashboard-wrapper {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    position: relative;\n    z-index: 1;\n  }\n\n  // Header\n  .dashboard-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px 30px;\n    background: rgba(255, 255, 255, 0.1);\n    backdrop-filter: blur(20px);\n    border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n    position: relative;\n    z-index: 2;\n    \n    .header-left {\n      .dashboard-title {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        font-size: 28px;\n        font-weight: 700;\n        color: white;\n        margin: 0;\n        \n        i {\n          font-size: 32px;\n        }\n      }\n      \n      .dashboard-subtitle {\n        color: rgba(255, 255, 255, 0.8);\n        font-size: 14px;\n        margin-top: 4px;\n        margin-left: 44px;\n      }\n    }\n    \n    .header-right {\n      .header-actions {\n        display: flex;\n        gap: 8px;\n        \n        button {\n          background: rgba(255, 255, 255, 0.2);\n          border: 1px solid rgba(255, 255, 255, 0.3);\n          color: white;\n          \n          &:hover {\n            background: rgba(255, 255, 255, 0.3);\n          }\n        }\n      }\n    }\n  }\n\n  // Main Content\n  .dashboard-content {\n    flex: 1;\n    display: flex;\n    overflow: hidden;\n    background: rgba(255, 255, 255, 0.95);\n    margin: 20px;\n    border-radius: 12px;\n    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n    position: relative;\n    z-index: 1;\n  }\n\n  // Filter Panel\n  .filter-panel {\n    width: 280px;\n    background: white;\n    border-right: 1px solid #e5e7eb;\n    padding: 20px;\n    overflow-y: auto;\n    \n    .filter-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      \n      h3 {\n        font-size: 16px;\n        font-weight: 600;\n        color: #1f2937;\n        margin: 0;\n      }\n      \n      button {\n        padding: 4px 8px;\n        font-size: 12px;\n      }\n    }\n    \n    .filter-section {\n      margin-bottom: 24px;\n      \n      .filter-label {\n        display: block;\n        font-size: 13px;\n        font-weight: 600;\n        color: #6b7280;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        margin-bottom: 8px;\n      }\n      \n      kendo-textbox {\n        width: 100%;\n      }\n      \n      .filter-options {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n        \n        .checkbox-label {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          cursor: pointer;\n          font-size: 14px;\n          color: #374151;\n          \n          &:hover {\n            color: #111827;\n          }\n          \n          input[type=\"checkbox\"] {\n            cursor: pointer;\n          }\n          \n          .type-indicator {\n            width: 12px;\n            height: 12px;\n            border-radius: 3px;\n            flex-shrink: 0;\n          }\n          \n          .status-badge {\n            padding: 2px 8px;\n            border-radius: 12px;\n            font-size: 11px;\n            font-weight: 600;\n            \n            &.badge-draft {\n              background: #fef3c7;\n              color: #92400e;\n            }\n            \n            &.badge-published {\n              background: #d1fae5;\n              color: #065f46;\n            }\n            \n            &.badge-deprecated {\n              background: #fee2e2;\n              color: #991b1b;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  // Content Area\n  .content-area {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    \n    .browse-content {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      padding: 20px;\n      \n      .results-summary {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 20px;\n        \n        .result-count {\n          font-size: 14px;\n          color: #6b7280;\n        }\n      }\n      \n      // Component Grid\n      .component-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n        gap: 20px;\n        overflow-y: auto;\n        padding: 4px;\n        \n        .component-card {\n          background: white;\n          border: 2px solid #e5e7eb;\n          border-radius: 12px;\n          padding: 16px;\n          cursor: pointer;\n          transition: all 0.2s ease;\n          position: relative;\n          overflow: hidden;\n          height: fit-content;\n          \n          &:hover {\n            border-color: #9ca3af;\n            transform: translateY(-2px);\n            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n          }\n          \n          &.selected {\n            border-color: #6366f1;\n            background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);\n          }\n          \n          .card-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 12px;\n            \n            .card-type {\n              padding: 4px 10px;\n              border-radius: 6px;\n              color: white;\n              font-size: 11px;\n              font-weight: 600;\n              text-transform: uppercase;\n              letter-spacing: 0.05em;\n            }\n            \n            .card-status {\n              padding: 3px 8px;\n              border-radius: 12px;\n              font-size: 11px;\n              font-weight: 600;\n              \n              &.badge-draft {\n                background: #fef3c7;\n                color: #92400e;\n              }\n              \n              &.badge-published {\n                background: #d1fae5;\n                color: #065f46;\n              }\n              \n              &.badge-deprecated {\n                background: #fee2e2;\n                color: #991b1b;\n              }\n            }\n          }\n          \n          .card-body {\n            margin-bottom: 12px;\n            \n            .card-title {\n              font-size: 16px;\n              font-weight: 600;\n              color: #111827;\n              margin: 0 0 4px 0;\n            }\n            \n            .card-version {\n              font-size: 12px;\n              color: #6b7280;\n              margin-bottom: 8px;\n            }\n            \n            .card-description {\n              font-size: 13px;\n              color: #6b7280;\n              line-height: 1.5;\n              margin: 8px 0;\n              display: -webkit-box;\n              -webkit-line-clamp: 2;\n              -webkit-box-orient: vertical;\n              overflow: hidden;\n            }\n            \n            .card-namespace {\n              font-size: 12px;\n              color: #9ca3af;\n              display: flex;\n              align-items: center;\n              gap: 6px;\n              \n              i {\n                font-size: 11px;\n              }\n            }\n          }\n          \n          .card-footer {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding-top: 12px;\n            border-top: 1px solid #f3f4f6;\n            \n            .card-developer {\n              font-size: 12px;\n              color: #6b7280;\n              display: flex;\n              align-items: center;\n              gap: 6px;\n              \n              i {\n                font-size: 11px;\n              }\n            }\n            \n            .card-source {\n              font-size: 14px;\n              color: #9ca3af;\n            }\n          }\n        }\n      }\n      \n      // List View (Kendo Grid styling)\n      kendo-grid {\n        height: 100%;\n        \n        .component-name {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          \n          .type-dot {\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n          }\n        }\n        \n        .status-badge {\n          padding: 2px 8px;\n          border-radius: 12px;\n          font-size: 11px;\n          font-weight: 600;\n          display: inline-block;\n          \n          &.badge-draft {\n            background: #fef3c7;\n            color: #92400e;\n          }\n          \n          &.badge-published {\n            background: #d1fae5;\n            color: #065f46;\n          }\n          \n          &.badge-deprecated {\n            background: #fee2e2;\n            color: #991b1b;\n          }\n        }\n      }\n    }\n    \n    .preview-content,\n    .dependencies-content,\n    .settings-content {\n      height: 100%;\n      padding: 20px;\n      overflow-y: auto;\n    }\n    \n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      color: #9ca3af;\n      \n      i {\n        margin-bottom: 20px;\n        opacity: 0.5;\n      }\n      \n      h3 {\n        font-size: 20px;\n        font-weight: 600;\n        color: #6b7280;\n        margin: 0 0 8px 0;\n      }\n      \n      p {\n        font-size: 14px;\n        color: #9ca3af;\n        margin: 0;\n      }\n    }\n  }\n\n  // Bottom Navigation\n  .dashboard-navigation {\n    display: flex;\n    justify-content: center;\n    gap: 4px;\n    padding: 12px 20px;\n    background: rgba(255, 255, 255, 0.1);\n    backdrop-filter: blur(20px);\n    border-top: 1px solid rgba(255, 255, 255, 0.2);\n    position: relative;\n    z-index: 2;\n    \n    .nav-item {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 4px;\n      padding: 8px 24px;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      color: rgba(255, 255, 255, 0.7);\n      \n      i {\n        font-size: 20px;\n      }\n      \n      span {\n        font-size: 12px;\n        font-weight: 500;\n      }\n      \n      &:hover {\n        background: rgba(255, 255, 255, 0.15);\n        color: white;\n      }\n      \n      &.active {\n        background: rgba(255, 255, 255, 0.25);\n        color: white;\n      }\n    }\n  }\n}\n\n// Animations\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}"] }]
+        args: [{ selector: 'mj-component-studio-dashboard', template: "<div class=\"component-studio\">\n  <!-- Header -->\n  <div class=\"dashboard-header\">\n    <div class=\"header-content\">\n      <h1><i class=\"fa-solid fa-puzzle-piece\"></i> Component Studio</h1>\n      <button kendoButton [icon]=\"'fa-solid fa-sync'\" (click)=\"refreshData()\" [disabled]=\"isLoading\">\n        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              No components found\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                          [icon]=\"'fa-solid fa-stop'\" \n                          [themeColor]=\"'error'\"\n                          (click)=\"stopComponent(); $event.stopPropagation()\">\n                          Stop Component\n                        </button>\n                      } @else {\n                        <button kendoButton \n                          [icon]=\"'fa-solid fa-play'\" \n                          [themeColor]=\"'primary'\"\n                          (click)=\"runComponent(component); $event.stopPropagation()\">\n                          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()\" [icon]=\"'fa-solid fa-rotate'\">\n                    Retry\n                  </button>\n                  <button kendoButton (click)=\"stopComponent()\" [icon]=\"'fa-solid fa-stop'\" [themeColor]=\"'error'\">\n                    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  }\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        }\n        \n        .card-header {\n          display: flex;\n          align-items: center;\n          padding: 16px;\n          cursor: pointer;\n          user-select: none;\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: 53 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentStudioDashboardComponent, { className: "ComponentStudioDashboardComponent", filePath: "src/ComponentStudio/component-studio-dashboard.component.ts", lineNumber: 18 }); })();
 /**
  * Function to prevent tree shaking of the ComponentStudioDashboardComponent.
- * This is called in public-api.ts to ensure the component is included in the build.
  */
 export function LoadComponentStudioDashboard() {
-    // This function doesn't need to do anything, it just needs to exist
-    // to create a reference to the component that prevents tree shaking
+    // This function doesn't need to do anything
 }
 //# sourceMappingURL=component-studio-dashboard.component.js.map