@memberjunction/ng-dashboards 5.22.0 → 5.23.0

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

@@ -11,40 +11,36 @@ import { RegisterClass } from '@memberjunction/global';
 import { Metadata } from '@memberjunction/core';
 import { UserInfoEngine } from '@memberjunction/core-entities';
 import { Subject, takeUntil } from 'rxjs';
-import { TextImportDialogComponent } from './components/text-import-dialog.component';
-import { ArtifactSelectionDialogComponent } from './components/artifact-selection-dialog.component';
-import { ArtifactLoadDialogComponent } from './components/artifact-load-dialog.component';
 import { ComponentStudioStateService } from './services/component-studio-state.service';
 import { ComponentVersionService } from './services/component-version.service';
 import { RunView } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 import * as i1 from "./services/component-studio-state.service";
 import * as i2 from "./services/component-version.service";
-import * as i3 from "@progress/kendo-angular-dialog";
-import * as i4 from "@memberjunction/ng-notifications";
+import * as i3 from "@memberjunction/ng-notifications";
 const _c0 = ["fileInput"];
 function ComponentStudioDashboardComponent_Conditional_5_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 37);
-    i0.ɵɵelement(1, "span", 39);
+    i0.ɵɵelementStart(0, "span", 38);
+    i0.ɵɵelement(1, "span", 40);
     i0.ɵɵtext(2, " Running ");
     i0.ɵɵelementEnd();
 } }
 function ComponentStudioDashboardComponent_Conditional_5_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 38);
+    i0.ɵɵelement(0, "span", 39);
 } }
 function ComponentStudioDashboardComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 33);
+    i0.ɵɵelementStart(0, "span", 34);
     i0.ɵɵelement(1, "i", 27);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 34);
-    i0.ɵɵelement(4, "i", 35);
+    i0.ɵɵelementStart(3, "span", 35);
+    i0.ɵɵelement(4, "i", 36);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 36);
+    i0.ɵɵelementStart(5, "span", 37);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, ComponentStudioDashboardComponent_Conditional_5_Conditional_7_Template, 3, 0, "span", 37);
-    i0.ɵɵconditionalCreate(8, ComponentStudioDashboardComponent_Conditional_5_Conditional_8_Template, 1, 0, "span", 38);
+    i0.ɵɵconditionalCreate(7, ComponentStudioDashboardComponent_Conditional_5_Conditional_7_Template, 3, 0, "span", 38);
+    i0.ɵɵconditionalCreate(8, ComponentStudioDashboardComponent_Conditional_5_Conditional_8_Template, 1, 0, "span", 39);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
@@ -58,15 +54,15 @@ function ComponentStudioDashboardComponent_Conditional_5_Template(rf, ctx) { if
 } }
 function ComponentStudioDashboardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 40);
+    i0.ɵɵelementStart(0, "button", 41);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.SaveVersion()); });
-    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵelement(1, "i", 42);
     i0.ɵɵtext(2, " Save ");
     i0.ɵɵelementEnd();
 } }
 function ComponentStudioDashboardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 42);
+    i0.ɵɵelementStart(0, "button", 43);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.RefreshComponent()); });
     i0.ɵɵelement(1, "i", 17);
     i0.ɵɵtext(2, " Refresh ");
@@ -74,31 +70,31 @@ function ComponentStudioDashboardComponent_Conditional_9_Template(rf, ctx) { if
 } }
 function ComponentStudioDashboardComponent_Conditional_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 47)(1, "button", 48);
+    i0.ɵɵelementStart(0, "div", 48)(1, "button", 49);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_10_Conditional_5_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ExportToArtifact()); });
-    i0.ɵɵelement(2, "i", 41);
+    i0.ɵɵelement(2, "i", 42);
     i0.ɵɵtext(3, " To Artifact ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 48);
+    i0.ɵɵelementStart(4, "button", 49);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_10_Conditional_5_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ExportToFile()); });
-    i0.ɵɵelement(5, "i", 49);
+    i0.ɵɵelement(5, "i", 50);
     i0.ɵɵtext(6, " To File ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 48);
+    i0.ɵɵelementStart(7, "button", 49);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_10_Conditional_5_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ExportToClipboard()); });
-    i0.ɵɵelement(8, "i", 50);
+    i0.ɵɵelement(8, "i", 51);
     i0.ɵɵtext(9, " To Clipboard ");
     i0.ɵɵelementEnd()();
 } }
 function ComponentStudioDashboardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 43)(1, "button", 44);
+    i0.ɵɵelementStart(0, "div", 44)(1, "button", 45);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_10_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleExportDropdown()); });
-    i0.ɵɵelement(2, "i", 45);
+    i0.ɵɵelement(2, "i", 46);
     i0.ɵɵtext(3, " Export ");
-    i0.ɵɵelement(4, "i", 46);
+    i0.ɵɵelement(4, "i", 47);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, ComponentStudioDashboardComponent_Conditional_10_Conditional_5_Template, 10, 0, "div", 47);
+    i0.ɵɵconditionalCreate(5, ComponentStudioDashboardComponent_Conditional_10_Conditional_5_Template, 10, 0, "div", 48);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -108,10 +104,10 @@ function ComponentStudioDashboardComponent_Conditional_10_Template(rf, ctx) { if
 } }
 function ComponentStudioDashboardComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 51)(1, "mj-component-browser", 52);
+    i0.ɵɵelementStart(0, "div", 52)(1, "mj-component-browser", 53);
     i0.ɵɵlistener("NewComponent", function ComponentStudioDashboardComponent_Conditional_21_Template_mj_component_browser_NewComponent_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnNewComponent()); })("ImportFromFile", function ComponentStudioDashboardComponent_Conditional_21_Template_mj_component_browser_ImportFromFile_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ImportFromFile()); })("ImportFromText", function ComponentStudioDashboardComponent_Conditional_21_Template_mj_component_browser_ImportFromText_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ImportFromText()); })("ImportFromArtifact", function ComponentStudioDashboardComponent_Conditional_21_Template_mj_component_browser_ImportFromArtifact_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ImportFromArtifact()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(2, "div", 53);
+    i0.ɵɵelementStart(2, "div", 54);
     i0.ɵɵlistener("mousedown", function ComponentStudioDashboardComponent_Conditional_21_Template_div_mousedown_2_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnLeftResizeStart($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -120,13 +116,13 @@ function ComponentStudioDashboardComponent_Conditional_21_Template(rf, ctx) { if
 } }
 function ComponentStudioDashboardComponent_Conditional_23_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵelementStart(0, "div", 66);
     i0.ɵɵlistener("mousedown", function ComponentStudioDashboardComponent_Conditional_23_Conditional_11_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCenterResizeStart($event)); });
-    i0.ɵɵelement(1, "div", 66);
+    i0.ɵɵelement(1, "div", 67);
     i0.ɵɵelementEnd();
 } }
 function ComponentStudioDashboardComponent_Conditional_23_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67);
+    i0.ɵɵelementStart(0, "div", 68);
     i0.ɵɵelement(1, "mj-editor-tabs");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -135,20 +131,20 @@ function ComponentStudioDashboardComponent_Conditional_23_Conditional_12_Templat
 } }
 function ComponentStudioDashboardComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 54)(1, "div", 55)(2, "div", 56);
-    i0.ɵɵelement(3, "i", 57);
+    i0.ɵɵelementStart(0, "div", 55)(1, "div", 56)(2, "div", 57);
+    i0.ɵɵelement(3, "i", 58);
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5, "Preview");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 58)(7, "button", 59);
+    i0.ɵɵelementStart(6, "div", 59)(7, "button", 60);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_23_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleEditorPanel()); });
-    i0.ɵɵelement(8, "i", 60);
+    i0.ɵɵelement(8, "i", 61);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "div", 61)(10, "mj-component-preview", 62);
+    i0.ɵɵelementStart(9, "div", 62)(10, "mj-component-preview", 63);
     i0.ɵɵlistener("AskAIToFix", function ComponentStudioDashboardComponent_Conditional_23_Template_mj_component_preview_AskAIToFix_10_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnAskAIToFix($event)); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(11, ComponentStudioDashboardComponent_Conditional_23_Conditional_11_Template, 2, 0, "div", 63);
-    i0.ɵɵconditionalCreate(12, ComponentStudioDashboardComponent_Conditional_23_Conditional_12_Template, 2, 2, "div", 64);
+    i0.ɵɵconditionalCreate(11, ComponentStudioDashboardComponent_Conditional_23_Conditional_11_Template, 2, 0, "div", 64);
+    i0.ɵɵconditionalCreate(12, ComponentStudioDashboardComponent_Conditional_23_Conditional_12_Template, 2, 2, "div", 65);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("flex", ctx_r1.IsEditorPanelCollapsed ? "1 1 100%" : ctx_r1.previewFlex);
@@ -162,8 +158,8 @@ function ComponentStudioDashboardComponent_Conditional_23_Template(rf, ctx) { if
 } }
 function ComponentStudioDashboardComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 21)(1, "div", 68)(2, "div", 69);
-    i0.ɵɵelement(3, "i", 70);
+    i0.ɵɵelementStart(0, "div", 21)(1, "div", 69)(2, "div", 70);
+    i0.ɵɵelement(3, "i", 71);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "h2");
     i0.ɵɵtext(5, "Ready to Build");
@@ -171,53 +167,48 @@ function ComponentStudioDashboardComponent_Conditional_24_Template(rf, ctx) { if
     i0.ɵɵelementStart(6, "p");
     i0.ɵɵtext(7, "Select a component from the browser or create a new one to get started");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 71)(9, "button", 72);
+    i0.ɵɵelementStart(8, "div", 72)(9, "button", 73);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_24_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnNewComponent()); });
-    i0.ɵɵelement(10, "span", 73);
+    i0.ɵɵelement(10, "span", 74);
     i0.ɵɵtext(11, " New Component ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "button", 72);
+    i0.ɵɵelementStart(12, "button", 75);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_24_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ImportFromFile()); });
-    i0.ɵɵelement(13, "span", 74);
+    i0.ɵɵelement(13, "span", 76);
     i0.ɵɵtext(14, " Import ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "div", 75)(16, "span", 76);
+    i0.ɵɵelementStart(15, "div", 77)(16, "span", 78);
     i0.ɵɵtext(17, "Quick start:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 77);
+    i0.ɵɵelementStart(18, "button", 79);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_24_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnQuickStart("dashboard")); });
-    i0.ɵɵelement(19, "i", 78);
+    i0.ɵɵelement(19, "i", 80);
     i0.ɵɵtext(20, " Dashboard ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "button", 77);
+    i0.ɵɵelementStart(21, "button", 79);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_24_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnQuickStart("report")); });
-    i0.ɵɵelement(22, "i", 79);
+    i0.ɵɵelement(22, "i", 81);
     i0.ɵɵtext(23, " Report ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "button", 77);
+    i0.ɵɵelementStart(24, "button", 79);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_24_Template_button_click_24_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnQuickStart("chart")); });
-    i0.ɵɵelement(25, "i", 80);
+    i0.ɵɵelement(25, "i", 82);
     i0.ɵɵtext(26, " Chart ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "button", 77);
+    i0.ɵɵelementStart(27, "button", 79);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_24_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnQuickStart("form")); });
-    i0.ɵɵelement(28, "i", 81);
+    i0.ɵɵelement(28, "i", 83);
     i0.ɵɵtext(29, " Form ");
     i0.ɵɵelementEnd()()()();
-} if (rf & 2) {
-    i0.ɵɵadvance(9);
-    i0.ɵɵproperty("themeColor", "primary");
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("themeColor", "base");
 } }
 function ComponentStudioDashboardComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 53);
+    i0.ɵɵelementStart(0, "div", 54);
     i0.ɵɵlistener("mousedown", function ComponentStudioDashboardComponent_Conditional_25_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnRightResizeStart($event)); });
     i0.ɵɵelementEnd();
 } }
 function ComponentStudioDashboardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 82);
+    i0.ɵɵelementStart(0, "div", 84);
     i0.ɵɵelement(1, "mj-ai-assistant-panel");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -226,7 +217,7 @@ function ComponentStudioDashboardComponent_Conditional_26_Template(rf, ctx) { if
 } }
 function ComponentStudioDashboardComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 26);
-    i0.ɵɵelement(1, "i", 83);
+    i0.ɵɵelement(1, "i", 85);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "date");
     i0.ɵɵelementEnd();
@@ -237,56 +228,56 @@ function ComponentStudioDashboardComponent_Conditional_33_Template(rf, ctx) { if
 } }
 function ComponentStudioDashboardComponent_Conditional_38_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 84);
+    i0.ɵɵelementStart(0, "div", 86);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_38_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ShowKeyboardShortcuts = false); });
-    i0.ɵɵelementStart(1, "div", 85);
+    i0.ɵɵelementStart(1, "div", 87);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_38_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r12); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 86)(3, "h3");
+    i0.ɵɵelementStart(2, "div", 88)(3, "h3");
     i0.ɵɵtext(4, "Keyboard Shortcuts");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 87);
+    i0.ɵɵelementStart(5, "button", 89);
     i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_38_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ShowKeyboardShortcuts = false); });
-    i0.ɵɵelement(6, "i", 88);
+    i0.ɵɵelement(6, "i", 90);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 89)(8, "div", 90)(9, "h4");
+    i0.ɵɵelementStart(7, "div", 91)(8, "div", 92)(9, "h4");
     i0.ɵɵtext(10, "General");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 91)(12, "span", 92)(13, "kbd");
+    i0.ɵɵelementStart(11, "div", 93)(12, "span", 94)(13, "kbd");
     i0.ɵɵtext(14, "Ctrl");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(15, " + ");
     i0.ɵɵelementStart(16, "kbd");
     i0.ɵɵtext(17, "S");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "span", 93);
+    i0.ɵɵelementStart(18, "span", 95);
     i0.ɵɵtext(19, "Save version");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "div", 91)(21, "span", 92)(22, "kbd");
+    i0.ɵɵelementStart(20, "div", 93)(21, "span", 94)(22, "kbd");
     i0.ɵɵtext(23, "Ctrl");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(24, " + ");
     i0.ɵɵelementStart(25, "kbd");
     i0.ɵɵtext(26, "N");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(27, "span", 93);
+    i0.ɵɵelementStart(27, "span", 95);
     i0.ɵɵtext(28, "New component");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(29, "div", 91)(30, "span", 92)(31, "kbd");
+    i0.ɵɵelementStart(29, "div", 93)(30, "span", 94)(31, "kbd");
     i0.ɵɵtext(32, "?");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(33, "span", 93);
+    i0.ɵɵelementStart(33, "span", 95);
     i0.ɵɵtext(34, "Toggle shortcuts");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(35, "div", 91)(36, "span", 92)(37, "kbd");
+    i0.ɵɵelementStart(35, "div", 93)(36, "span", 94)(37, "kbd");
     i0.ɵɵtext(38, "Esc");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(39, "span", 93);
+    i0.ɵɵelementStart(39, "span", 95);
     i0.ɵɵtext(40, "Close overlay");
     i0.ɵɵelementEnd()()()()()();
 } }
 function ComponentStudioDashboardComponent_Conditional_39_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-new-component-dialog", 94);
+    i0.ɵɵelementStart(0, "mj-new-component-dialog", 96);
     i0.ɵɵlistener("Close", function ComponentStudioDashboardComponent_Conditional_39_Template_mj_new_component_dialog_Close_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnNewComponentDialogClose($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -295,19 +286,46 @@ function ComponentStudioDashboardComponent_Conditional_39_Template(rf, ctx) { if
 } }
 function ComponentStudioDashboardComponent_Conditional_40_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-save-version-dialog", 95);
+    i0.ɵɵelementStart(0, "mj-save-version-dialog", 97);
     i0.ɵɵlistener("Save", function ComponentStudioDashboardComponent_Conditional_40_Template_mj_save_version_dialog_Save_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnSaveVersionConfirm($event)); })("Cancel", function ComponentStudioDashboardComponent_Conditional_40_Template_mj_save_version_dialog_Cancel_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ShowSaveVersionDialog = false); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("Visible", ctx_r1.ShowSaveVersionDialog)("CurrentVersion", ctx_r1.versionService.CurrentVersionNumber);
 } }
+function ComponentStudioDashboardComponent_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dialog", 98);
+    i0.ɵɵlistener("Close", function ComponentStudioDashboardComponent_Conditional_41_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTextImportCancel()); });
+    i0.ɵɵelementStart(1, "app-text-import-dialog", 99);
+    i0.ɵɵlistener("importSpec", function ComponentStudioDashboardComponent_Conditional_41_Template_app_text_import_dialog_importSpec_1_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTextImportSpec($event)); })("cancelDialog", function ComponentStudioDashboardComponent_Conditional_41_Template_app_text_import_dialog_cancelDialog_1_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTextImportCancel()); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵproperty("Visible", true)("Width", 700)("MinWidth", 500);
+} }
+function ComponentStudioDashboardComponent_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "app-artifact-load-dialog", 96);
+    i0.ɵɵlistener("Close", function ComponentStudioDashboardComponent_Conditional_42_Template_app_artifact_load_dialog_Close_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnArtifactLoadClose($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Visible", ctx_r1.ShowArtifactLoadDialog);
+} }
+function ComponentStudioDashboardComponent_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "app-artifact-selection-dialog", 96);
+    i0.ɵɵlistener("Close", function ComponentStudioDashboardComponent_Conditional_43_Template_app_artifact_selection_dialog_Close_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnArtifactSelectionClose($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Visible", ctx_r1.ShowArtifactSelectionDialog);
+} }
 let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent extends BaseDashboard {
     static { ComponentStudioDashboardComponent_1 = this; }
     state;
     versionService;
     cdr;
-    dialogService;
     notificationService;
     static USER_PREFS_KEY = 'ComponentStudio.UserPreferences';
     // --- Panel widths ---
@@ -330,6 +348,9 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
     ShowNewComponentDialog = false;
     ShowKeyboardShortcuts = false;
     ShowSaveVersionDialog = false;
+    ShowTextImportDialog = false;
+    ShowArtifactLoadDialog = false;
+    ShowArtifactSelectionDialog = false;
     // --- Status bar ---
     LastSavedTime = null;
     // --- Preferences ---
@@ -337,12 +358,11 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
     fileInput;
     destroy$ = new Subject();
     metadata = new Metadata();
-    constructor(state, versionService, cdr, dialogService, notificationService) {
+    constructor(state, versionService, cdr, notificationService) {
         super();
         this.state = state;
         this.versionService = versionService;
         this.cdr = cdr;
-        this.dialogService = dialogService;
         this.notificationService = notificationService;
     }
     async GetResourceDisplayName(data) {
@@ -621,56 +641,46 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
         this.fileInput?.nativeElement.click();
     }
     ImportFromText() {
-        const dialogRef = this.dialogService.open({
-            content: TextImportDialogComponent,
-            width: 700,
-            height: 600,
-            minWidth: 500,
-            title: '',
-            actions: []
-        });
-        const instance = dialogRef.content.instance;
-        instance.importSpec.subscribe((spec) => {
-            this.handleSpecImport(spec, 'text-import.json', 'Text');
-            dialogRef.close();
-        });
-        instance.cancelDialog.subscribe(() => dialogRef.close());
+        this.ShowTextImportDialog = true;
+        this.cdr.detectChanges();
     }
-    async ImportFromArtifact() {
-        await new Promise(resolve => setTimeout(resolve, 100));
-        try {
-            const dialogRef = this.dialogService.open({
-                content: ArtifactLoadDialogComponent,
-                width: 1200,
-                height: 700
-            });
-            const result = await dialogRef.result.toPromise();
-            if (!result)
-                return;
-            const artifactComponent = {
-                id: this.state.GenerateId(),
-                name: result.spec.name,
-                description: result.spec.description,
-                specification: result.spec,
-                filename: `${result.artifactName} (v${result.versionNumber})`,
-                loadedAt: new Date(),
-                isFileLoaded: true,
-                type: result.spec.type || 'Component',
-                status: 'Artifact',
-                sourceArtifactID: result.artifactID,
-                sourceVersionID: result.versionID
-            };
-            this.state.AddFileLoadedComponent(artifactComponent);
-            this.state.ExpandedComponent = artifactComponent;
-            this.state.RunComponent(artifactComponent);
-            this.notificationService.CreateSimpleNotification(`Loaded "${result.spec.name}" from artifact`, 'success', 3000);
-        }
-        catch (error) {
-            if (error && error !== 'cancel') {
-                console.error('Error loading from artifact:', error);
-                this.notificationService.CreateSimpleNotification('Failed to load from artifact', 'error');
-            }
+    OnTextImportSpec(spec) {
+        this.ShowTextImportDialog = false;
+        this.handleSpecImport(spec, 'text-import.json', 'Text');
+        this.cdr.detectChanges();
+    }
+    OnTextImportCancel() {
+        this.ShowTextImportDialog = false;
+        this.cdr.detectChanges();
+    }
+    ImportFromArtifact() {
+        this.ShowArtifactLoadDialog = true;
+        this.cdr.detectChanges();
+    }
+    OnArtifactLoadClose(result) {
+        this.ShowArtifactLoadDialog = false;
+        if (!result) {
+            this.cdr.detectChanges();
+            return;
         }
+        const artifactComponent = {
+            id: this.state.GenerateId(),
+            name: result.spec.name,
+            description: result.spec.description,
+            specification: result.spec,
+            filename: `${result.artifactName} (v${result.versionNumber})`,
+            loadedAt: new Date(),
+            isFileLoaded: true,
+            type: result.spec.type || 'Component',
+            status: 'Artifact',
+            sourceArtifactID: result.artifactID,
+            sourceVersionID: result.versionID
+        };
+        this.state.AddFileLoadedComponent(artifactComponent);
+        this.state.ExpandedComponent = artifactComponent;
+        this.state.RunComponent(artifactComponent);
+        this.notificationService.CreateSimpleNotification(`Loaded "${result.spec.name}" from artifact`, 'success', 3000);
+        this.cdr.detectChanges();
     }
     async HandleFileSelect(event) {
         const input = event.target;
@@ -707,21 +717,24 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
         this.state.ExpandedComponent = component;
         this.state.RunComponent(component);
     }
-    async ExportToArtifact() {
+    ExportToArtifact() {
         this.exportDropdownOpen = false;
         const currentSpec = this.state.GetCurrentSpec();
         if (!currentSpec || !this.state.SelectedComponent)
             return;
-        await new Promise(resolve => setTimeout(resolve, 100));
+        this.ShowArtifactSelectionDialog = true;
+        this.cdr.detectChanges();
+    }
+    async OnArtifactSelectionClose(result) {
+        this.ShowArtifactSelectionDialog = false;
+        if (!result?.action) {
+            this.cdr.detectChanges();
+            return;
+        }
+        const currentSpec = this.state.GetCurrentSpec();
+        if (!currentSpec)
+            return;
         try {
-            const dialogRef = this.dialogService.open({
-                content: ArtifactSelectionDialogComponent,
-                width: 1200,
-                height: 900
-            });
-            const result = await dialogRef.result.toPromise();
-            if (!result?.action)
-                return;
             const artifact = result.artifact;
             let version;
             if (result.action === 'update-version' && result.versionToUpdate) {
@@ -762,6 +775,7 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
             console.error('Error saving to artifact:', error);
             this.notificationService.CreateSimpleNotification('Error saving to artifact', 'error');
         }
+        this.cdr.detectChanges();
     }
     ExportToFile() {
         this.exportDropdownOpen = false;
@@ -876,7 +890,7 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
         const hashArray = Array.from(new Uint8Array(hashBuffer));
         return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
     }
-    static ɵfac = function ComponentStudioDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ComponentStudioDashboardComponent)(i0.ɵɵdirectiveInject(i1.ComponentStudioStateService), i0.ɵɵdirectiveInject(i2.ComponentVersionService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i3.DialogService), i0.ɵɵdirectiveInject(i4.MJNotificationService)); };
+    static ɵfac = function ComponentStudioDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ComponentStudioDashboardComponent)(i0.ɵɵdirectiveInject(i1.ComponentStudioStateService), i0.ɵɵdirectiveInject(i2.ComponentVersionService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i3.MJNotificationService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentStudioDashboardComponent, selectors: [["mj-component-studio-dashboard"]], viewQuery: function ComponentStudioDashboardComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
         } if (rf & 2) {
@@ -884,7 +898,7 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
         } }, hostBindings: function ComponentStudioDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown", function ComponentStudioDashboardComponent_keydown_HostBindingHandler($event) { return ctx.OnKeyDown($event); }, i0.ɵɵresolveDocument)("click", function ComponentStudioDashboardComponent_click_HostBindingHandler($event) { return ctx.OnDocumentClick($event); }, i0.ɵɵresolveDocument);
-        } }, standalone: false, features: [i0.ɵɵProvidersFeature([ComponentStudioStateService, ComponentVersionService]), i0.ɵɵInheritDefinitionFeature], decls: 41, vars: 20, consts: [["fileInput", ""], ["kendoDialogContainer", "", 1, "component-studio"], [1, "studio-toolbar"], [1, "toolbar-context"], ["title", "Toggle browser panel", 1, "tb-btn", "icon-only", 3, "click"], [1, "fa-solid", "fa-bars"], [1, "toolbar-spacer"], [1, "toolbar-actions"], ["title", "Save version (Ctrl+S)", 1, "tb-btn", "primary"], ["title", "Refresh component", 1, "tb-btn"], [1, "header-dropdown", 3, "open"], [1, "toolbar-divider"], [1, "tb-btn", "icon-only", 3, "click", "title"], [1, "fa-solid", "fa-robot"], ["title", "Keyboard shortcuts (?)", 1, "tb-btn", "icon-only", 3, "click"], [1, "fa-solid", "fa-keyboard"], ["title", "Refresh data", 1, "tb-btn", "icon-only", 3, "click", "disabled"], [1, "fa-solid", "fa-arrows-rotate"], ["type", "file", "accept", ".json", 2, "display", "none", 3, "change"], [1, "studio-body"], [1, "panel", "panel-center"], [1, "empty-state"], [1, "resize-handle"], [1, "panel", "panel-right", 3, "width"], [1, "status-bar"], [1, "status-left"], [1, "status-item"], [1, "fa-solid", "fa-cube"], [1, "status-right"], [1, "status-item", "shortcut-hint"], [1, "shortcuts-overlay"], [3, "Visible"], [3, "Visible", "CurrentVersion"], [1, "breadcrumb-type"], [1, "breadcrumb-sep"], [1, "fa-solid", "fa-chevron-right"], [1, "component-label"], [1, "running-badge"], ["title", "Unsaved changes", 1, "unsaved-dot"], [1, "running-dot-small"], ["title", "Save version (Ctrl+S)", 1, "tb-btn", "primary", 3, "click"], [1, "fa-solid", "fa-save"], ["title", "Refresh component", 1, "tb-btn", 3, "click"], [1, "header-dropdown"], [1, "tb-btn", 3, "click"], [1, "fa-solid", "fa-file-export"], [1, "fa-solid", "fa-chevron-down", "dropdown-icon"], [1, "dropdown-menu"], [1, "dropdown-item", 3, "click"], [1, "fa-solid", "fa-file"], [1, "fa-solid", "fa-clipboard"], [1, "panel", "panel-left"], [3, "NewComponent", "ImportFromFile", "ImportFromText", "ImportFromArtifact"], [1, "resize-handle", 3, "mousedown"], [1, "workspace-preview"], [1, "preview-sub-header"], [1, "preview-sub-left"], [1, "fa-solid", "fa-eye"], [1, "preview-sub-right"], ["title", "Toggle editor panel", 1, "toggle-editors-btn", 3, "click"], [1, "fa-solid", "fa-columns"], [1, "preview-body"], [3, "AskAIToFix"], [1, "resize-handle", "center-divider"], [1, "workspace-editors", 3, "flex"], [1, "resize-handle", "center-divider", 3, "mousedown"], [1, "divider-grip"], [1, "workspace-editors"], [1, "empty-state-content"], [1, "empty-state-icon"], [1, "fa-solid", "fa-rocket"], [1, "empty-state-actions"], ["kendoButton", "", 3, "click", "themeColor"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-file-import"], [1, "quick-start-templates"], [1, "quick-start-label"], [1, "quick-start-btn", 3, "click"], [1, "fa-solid", "fa-chart-line"], [1, "fa-solid", "fa-file-alt"], [1, "fa-solid", "fa-chart-pie"], [1, "fa-solid", "fa-edit"], [1, "panel", "panel-right"], [1, "fa-solid", "fa-check-circle"], [1, "shortcuts-overlay", 3, "click"], [1, "shortcuts-panel", 3, "click"], [1, "shortcuts-header"], [1, "shortcuts-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "shortcuts-body"], [1, "shortcut-group"], [1, "shortcut-row"], [1, "shortcut-keys"], [1, "shortcut-desc"], [3, "Close", "Visible"], [3, "Save", "Cancel", "Visible", "CurrentVersion"]], template: function ComponentStudioDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, features: [i0.ɵɵProvidersFeature([ComponentStudioStateService, ComponentVersionService]), i0.ɵɵInheritDefinitionFeature], decls: 44, vars: 23, consts: [["fileInput", ""], [1, "component-studio"], [1, "studio-toolbar"], [1, "toolbar-context"], ["title", "Toggle browser panel", 1, "tb-btn", "icon-only", 3, "click"], [1, "fa-solid", "fa-bars"], [1, "toolbar-spacer"], [1, "toolbar-actions"], ["title", "Save version (Ctrl+S)", 1, "tb-btn", "primary"], ["title", "Refresh component", 1, "tb-btn"], [1, "header-dropdown", 3, "open"], [1, "toolbar-divider"], [1, "tb-btn", "icon-only", 3, "click", "title"], [1, "fa-solid", "fa-robot"], ["title", "Keyboard shortcuts (?)", 1, "tb-btn", "icon-only", 3, "click"], [1, "fa-solid", "fa-keyboard"], ["title", "Refresh data", 1, "tb-btn", "icon-only", 3, "click", "disabled"], [1, "fa-solid", "fa-arrows-rotate"], ["type", "file", "accept", ".json", 2, "display", "none", 3, "change"], [1, "studio-body"], [1, "panel", "panel-center"], [1, "empty-state"], [1, "resize-handle"], [1, "panel", "panel-right", 3, "width"], [1, "status-bar"], [1, "status-left"], [1, "status-item"], [1, "fa-solid", "fa-cube"], [1, "status-right"], [1, "status-item", "shortcut-hint"], [1, "shortcuts-overlay"], [3, "Visible"], [3, "Visible", "CurrentVersion"], ["Title", "Import Component from Text", 3, "Visible", "Width", "MinWidth"], [1, "breadcrumb-type"], [1, "breadcrumb-sep"], [1, "fa-solid", "fa-chevron-right"], [1, "component-label"], [1, "running-badge"], ["title", "Unsaved changes", 1, "unsaved-dot"], [1, "running-dot-small"], ["title", "Save version (Ctrl+S)", 1, "tb-btn", "primary", 3, "click"], [1, "fa-solid", "fa-save"], ["title", "Refresh component", 1, "tb-btn", 3, "click"], [1, "header-dropdown"], [1, "tb-btn", 3, "click"], [1, "fa-solid", "fa-file-export"], [1, "fa-solid", "fa-chevron-down", "dropdown-icon"], [1, "dropdown-menu"], [1, "dropdown-item", 3, "click"], [1, "fa-solid", "fa-file"], [1, "fa-solid", "fa-clipboard"], [1, "panel", "panel-left"], [3, "NewComponent", "ImportFromFile", "ImportFromText", "ImportFromArtifact"], [1, "resize-handle", 3, "mousedown"], [1, "workspace-preview"], [1, "preview-sub-header"], [1, "preview-sub-left"], [1, "fa-solid", "fa-eye"], [1, "preview-sub-right"], ["title", "Toggle editor panel", 1, "toggle-editors-btn", 3, "click"], [1, "fa-solid", "fa-columns"], [1, "preview-body"], [3, "AskAIToFix"], [1, "resize-handle", "center-divider"], [1, "workspace-editors", 3, "flex"], [1, "resize-handle", "center-divider", 3, "mousedown"], [1, "divider-grip"], [1, "workspace-editors"], [1, "empty-state-content"], [1, "empty-state-icon"], [1, "fa-solid", "fa-rocket"], [1, "empty-state-actions"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], ["mjButton", "", 3, "click"], [1, "fa-solid", "fa-file-import"], [1, "quick-start-templates"], [1, "quick-start-label"], [1, "quick-start-btn", 3, "click"], [1, "fa-solid", "fa-chart-line"], [1, "fa-solid", "fa-file-alt"], [1, "fa-solid", "fa-chart-pie"], [1, "fa-solid", "fa-edit"], [1, "panel", "panel-right"], [1, "fa-solid", "fa-check-circle"], [1, "shortcuts-overlay", 3, "click"], [1, "shortcuts-panel", 3, "click"], [1, "shortcuts-header"], [1, "shortcuts-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "shortcuts-body"], [1, "shortcut-group"], [1, "shortcut-row"], [1, "shortcut-keys"], [1, "shortcut-desc"], [3, "Close", "Visible"], [3, "Save", "Cancel", "Visible", "CurrentVersion"], ["Title", "Import Component from Text", 3, "Close", "Visible", "Width", "MinWidth"], [3, "importSpec", "cancelDialog"]], template: function ComponentStudioDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "button", 4);
             i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.ToggleLeftPanel()); });
@@ -916,7 +930,7 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
             i0.ɵɵelementStart(20, "div", 19);
             i0.ɵɵconditionalCreate(21, ComponentStudioDashboardComponent_Conditional_21_Template, 3, 2);
             i0.ɵɵelementStart(22, "div", 20);
-            i0.ɵɵconditionalCreate(23, ComponentStudioDashboardComponent_Conditional_23_Template, 13, 8)(24, ComponentStudioDashboardComponent_Conditional_24_Template, 30, 2, "div", 21);
+            i0.ɵɵconditionalCreate(23, ComponentStudioDashboardComponent_Conditional_23_Template, 13, 8)(24, ComponentStudioDashboardComponent_Conditional_24_Template, 30, 0, "div", 21);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(25, ComponentStudioDashboardComponent_Conditional_25_Template, 1, 0, "div", 22);
             i0.ɵɵconditionalCreate(26, ComponentStudioDashboardComponent_Conditional_26_Template, 2, 2, "div", 23);
@@ -935,6 +949,9 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
             i0.ɵɵconditionalCreate(38, ComponentStudioDashboardComponent_Conditional_38_Template, 41, 0, "div", 30);
             i0.ɵɵconditionalCreate(39, ComponentStudioDashboardComponent_Conditional_39_Template, 1, 1, "mj-new-component-dialog", 31);
             i0.ɵɵconditionalCreate(40, ComponentStudioDashboardComponent_Conditional_40_Template, 1, 2, "mj-save-version-dialog", 32);
+            i0.ɵɵconditionalCreate(41, ComponentStudioDashboardComponent_Conditional_41_Template, 2, 3, "mj-dialog", 33);
+            i0.ɵɵconditionalCreate(42, ComponentStudioDashboardComponent_Conditional_42_Template, 1, 1, "app-artifact-load-dialog", 31);
+            i0.ɵɵconditionalCreate(43, ComponentStudioDashboardComponent_Conditional_43_Template, 1, 1, "app-artifact-selection-dialog", 31);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassProp("resizing", ctx.IsResizing);
@@ -969,6 +986,12 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
             i0.ɵɵconditional(ctx.ShowNewComponentDialog ? 39 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.ShowSaveVersionDialog ? 40 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowTextImportDialog ? 41 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowArtifactLoadDialog ? 42 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowArtifactSelectionDialog ? 43 : -1);
         } }, 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: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n\n\n\n\n\n.component-studio[_ngcontent-%COMP%]   .studio-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  z-index: 10;\n  min-height: 42px;\n  gap: 8px;\n}\n\n\n\n.component-studio[_ngcontent-%COMP%]   .toolbar-context[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  flex-shrink: 1;\n  overflow: hidden;\n}\n\n.component-studio[_ngcontent-%COMP%]   .toolbar-spacer[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n\n\n.component-studio[_ngcontent-%COMP%]   .toolbar-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n}\n\n\n\n.component-studio[_ngcontent-%COMP%]   .tb-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n  line-height: 1;\n}\n\n.component-studio[_ngcontent-%COMP%]   .tb-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-default);\n}\n\n.component-studio[_ngcontent-%COMP%]   .tb-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.component-studio[_ngcontent-%COMP%]   .tb-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.component-studio[_ngcontent-%COMP%]   .tb-btn.icon-only[_ngcontent-%COMP%] {\n  padding: 5px 7px;\n}\n\n.component-studio[_ngcontent-%COMP%]   .tb-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.component-studio[_ngcontent-%COMP%]   .tb-btn.primary[_ngcontent-%COMP%]:hover {\n  opacity: 0.9;\n}\n\n.component-studio[_ngcontent-%COMP%]   .tb-btn.active-toggle[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n\n\n.component-studio[_ngcontent-%COMP%]   .breadcrumb-type[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n}\n\n.component-studio[_ngcontent-%COMP%]   .breadcrumb-type[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.component-studio[_ngcontent-%COMP%]   .breadcrumb-sep[_ngcontent-%COMP%] {\n  font-size: 9px;\n  color: var(--mj-border-default);\n}\n\n.component-studio[_ngcontent-%COMP%]   .component-label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 240px;\n}\n\n.component-studio[_ngcontent-%COMP%]   .running-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 10px;\n  white-space: nowrap;\n}\n\n.component-studio[_ngcontent-%COMP%]   .running-dot-small[_ngcontent-%COMP%] {\n  display: inline-block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--mj-status-success);\n  animation: _ngcontent-%COMP%_pulse 1.5s ease-in-out infinite;\n}\n\n.component-studio[_ngcontent-%COMP%]   .unsaved-dot[_ngcontent-%COMP%] {\n  display: inline-block;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--mj-status-warning);\n  animation: _ngcontent-%COMP%_pulse 2s infinite;\n  flex-shrink: 0;\n}\n\n.component-studio[_ngcontent-%COMP%]   .toolbar-divider[_ngcontent-%COMP%] {\n  width: 1px;\n  height: 18px;\n  background: var(--mj-border-default);\n  margin: 0 2px;\n  flex-shrink: 0;\n}\n\n.component-studio[_ngcontent-%COMP%]   .dropdown-icon[_ngcontent-%COMP%] {\n  font-size: 9px;\n  opacity: 0.6;\n}\n\n\n\n.component-studio[_ngcontent-%COMP%]   .header-dropdown[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.component-studio[_ngcontent-%COMP%]   .header-dropdown[_ngcontent-%COMP%]   .dropdown-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  z-index: 100;\n  min-width: 180px;\n  overflow: hidden;\n}\n\n.component-studio[_ngcontent-%COMP%]   .header-dropdown[_ngcontent-%COMP%]   .dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 10px 16px;\n  border: none;\n  background: none;\n  text-align: left;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s ease;\n}\n\n.component-studio[_ngcontent-%COMP%]   .header-dropdown[_ngcontent-%COMP%]   .dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.component-studio[_ngcontent-%COMP%]   .header-dropdown[_ngcontent-%COMP%]   .dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%]:not(:last-child) {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.component-studio[_ngcontent-%COMP%]   .header-dropdown[_ngcontent-%COMP%]   .dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-brand-primary);\n  font-size: 13px;\n}\n\n\n\n\n\n\n.component-studio[_ngcontent-%COMP%]   .studio-body[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n\n.component-studio[_ngcontent-%COMP%]   .panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.component-studio[_ngcontent-%COMP%]   .panel-left[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  border-right: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.component-studio[_ngcontent-%COMP%]   .panel-center[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  min-width: 400px;\n}\n\n\n\n.component-studio[_ngcontent-%COMP%]   .panel-center[_ngcontent-%COMP%]   .workspace-preview[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.component-studio[_ngcontent-%COMP%]   .panel-center[_ngcontent-%COMP%]   .workspace-preview.full-width[_ngcontent-%COMP%] {\n  border-right: none;\n}\n\n\n\n.component-studio[_ngcontent-%COMP%]   .preview-sub-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 10px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  min-height: 32px;\n}\n\n.component-studio[_ngcontent-%COMP%]   .preview-sub-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.component-studio[_ngcontent-%COMP%]   .preview-sub-left[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.component-studio[_ngcontent-%COMP%]   .preview-sub-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.component-studio[_ngcontent-%COMP%]   .toggle-editors-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 12px;\n  transition: all 0.15s ease;\n}\n\n.component-studio[_ngcontent-%COMP%]   .toggle-editors-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.component-studio[_ngcontent-%COMP%]   .toggle-editors-btn.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.component-studio[_ngcontent-%COMP%]   .preview-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n\n\n.component-studio[_ngcontent-%COMP%]   .panel-center[_ngcontent-%COMP%]   .workspace-editors[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n\n\n.component-studio[_ngcontent-%COMP%]   .panel-right[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n\n\n\n\n\n.component-studio[_ngcontent-%COMP%]   .resize-handle[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  width: 5px;\n  cursor: col-resize;\n  background: transparent;\n  position: relative;\n  z-index: 5;\n  transition: background 0.15s ease;\n}\n\n.component-studio[_ngcontent-%COMP%]   .resize-handle[_ngcontent-%COMP%]:hover, \n.component-studio[_ngcontent-%COMP%]   .resize-handle[_ngcontent-%COMP%]:active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n\n\n.component-studio[_ngcontent-%COMP%]   .resize-handle.center-divider[_ngcontent-%COMP%] {\n  width: 7px;\n  background: var(--mj-border-default);\n}\n\n.component-studio[_ngcontent-%COMP%]   .resize-handle.center-divider[_ngcontent-%COMP%]:hover, \n.component-studio[_ngcontent-%COMP%]   .resize-handle.center-divider[_ngcontent-%COMP%]:active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.component-studio[_ngcontent-%COMP%]   .resize-handle[_ngcontent-%COMP%]   .divider-grip[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 3px;\n  height: 32px;\n  border-radius: 2px;\n  background: var(--mj-text-secondary);\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.component-studio[_ngcontent-%COMP%]   .resize-handle[_ngcontent-%COMP%]:hover   .divider-grip[_ngcontent-%COMP%] {\n  opacity: 0.5;\n}\n\n\n\n.component-studio[_ngcontent-%COMP%]:not(.resizing)   .panel[_ngcontent-%COMP%] {\n  transition: width 0.15s ease, flex 0.15s ease;\n}\n\n.component-studio[_ngcontent-%COMP%]:not(.resizing)   .workspace-preview[_ngcontent-%COMP%], \n.component-studio[_ngcontent-%COMP%]:not(.resizing)   .workspace-editors[_ngcontent-%COMP%] {\n  transition: flex 0.15s ease;\n}\n\n\n\n\n\n\n.component-studio[_ngcontent-%COMP%]   .status-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 2px 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-top: 1px solid var(--mj-border-default);\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n  min-height: 24px;\n}\n\n.component-studio[_ngcontent-%COMP%]   .status-bar[_ngcontent-%COMP%]   .status-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.component-studio[_ngcontent-%COMP%]   .status-bar[_ngcontent-%COMP%]   .status-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.component-studio[_ngcontent-%COMP%]   .status-bar[_ngcontent-%COMP%]   .status-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.component-studio[_ngcontent-%COMP%]   .status-bar[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 0 4px;\n  font-size: 10px;\n  font-family: inherit;\n  line-height: 16px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 3px;\n}\n\n.component-studio[_ngcontent-%COMP%]   .status-bar[_ngcontent-%COMP%]   .shortcut-hint[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  opacity: 0.8;\n}\n\n\n\n\n\n\n.component-studio[_ngcontent-%COMP%]   .shortcuts-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.component-studio[_ngcontent-%COMP%]   .shortcuts-overlay[_ngcontent-%COMP%]   .shortcuts-panel[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  box-shadow: var(--mj-shadow-lg);\n  width: 520px;\n  max-height: 80vh;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.component-studio[_ngcontent-%COMP%]   .shortcuts-overlay[_ngcontent-%COMP%]   .shortcuts-panel[_ngcontent-%COMP%]   .shortcuts-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.component-studio[_ngcontent-%COMP%]   .shortcuts-overlay[_ngcontent-%COMP%]   .shortcuts-panel[_ngcontent-%COMP%]   .shortcuts-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.component-studio[_ngcontent-%COMP%]   .shortcuts-overlay[_ngcontent-%COMP%]   .shortcuts-panel[_ngcontent-%COMP%]   .shortcuts-header[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n  padding: 4px;\n  border-radius: 4px;\n  transition: background 0.15s ease;\n}\n\n.component-studio[_ngcontent-%COMP%]   .shortcuts-overlay[_ngcontent-%COMP%]   .shortcuts-panel[_ngcontent-%COMP%]   .shortcuts-header[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.component-studio[_ngcontent-%COMP%]   .shortcuts-overlay[_ngcontent-%COMP%]   .shortcuts-panel[_ngcontent-%COMP%]   .shortcuts-body[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  overflow-y: auto;\n}\n\n.component-studio[_ngcontent-%COMP%]   .shortcuts-overlay[_ngcontent-%COMP%]   .shortcuts-panel[_ngcontent-%COMP%]   .shortcuts-body[_ngcontent-%COMP%]   .shortcut-group[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 8px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.component-studio[_ngcontent-%COMP%]   .shortcuts-overlay[_ngcontent-%COMP%]   .shortcuts-panel[_ngcontent-%COMP%]   .shortcuts-body[_ngcontent-%COMP%]   .shortcut-group[_ngcontent-%COMP%]    + .shortcut-group[_ngcontent-%COMP%] {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.component-studio[_ngcontent-%COMP%]   .shortcuts-overlay[_ngcontent-%COMP%]   .shortcuts-panel[_ngcontent-%COMP%]   .shortcuts-body[_ngcontent-%COMP%]   .shortcut-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 0;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.component-studio[_ngcontent-%COMP%]   .shortcuts-overlay[_ngcontent-%COMP%]   .shortcuts-panel[_ngcontent-%COMP%]   .shortcuts-body[_ngcontent-%COMP%]   .shortcut-row[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 8px;\n  font-size: 12px;\n  font-family: inherit;\n  line-height: 20px;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  box-shadow: 0 1px 0 var(--mj-border-default);\n  min-width: 24px;\n  text-align: center;\n}\n\n\n\n\n\n\n.component-studio[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.component-studio[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   .empty-state-content[_ngcontent-%COMP%] {\n  text-align: center;\n  max-width: 400px;\n}\n\n.component-studio[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   .empty-state-content[_ngcontent-%COMP%]   .empty-state-icon[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 72px;\n  height: 72px;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  margin-bottom: 16px;\n}\n\n.component-studio[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   .empty-state-content[_ngcontent-%COMP%]   .empty-state-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 28px;\n  color: var(--mj-brand-primary);\n}\n\n.component-studio[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   .empty-state-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-border-default);\n  margin-bottom: 16px;\n}\n\n.component-studio[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   .empty-state-content[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin: 0 0 8px;\n  font-size: 22px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.component-studio[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   .empty-state-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 24px;\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n.component-studio[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   .empty-state-content[_ngcontent-%COMP%]   .empty-state-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  justify-content: center;\n}\n\n.component-studio[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   .empty-state-content[_ngcontent-%COMP%]   .quick-start-templates[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  flex-wrap: wrap;\n  margin-top: 16px;\n}\n\n.component-studio[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   .empty-state-content[_ngcontent-%COMP%]   .quick-start-templates[_ngcontent-%COMP%]   .quick-start-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-right: 4px;\n}\n\n.component-studio[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   .empty-state-content[_ngcontent-%COMP%]   .quick-start-templates[_ngcontent-%COMP%]   .quick-start-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 12px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.component-studio[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   .empty-state-content[_ngcontent-%COMP%]   .quick-start-templates[_ngcontent-%COMP%]   .quick-start-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-default);\n}\n\n.component-studio[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   .empty-state-content[_ngcontent-%COMP%]   .quick-start-templates[_ngcontent-%COMP%]   .quick-start-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n  margin-bottom: 0;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.4; }\n}"] });
 };
 ComponentStudioDashboardComponent = ComponentStudioDashboardComponent_1 = __decorate([
@@ -977,8 +1000,8 @@ ComponentStudioDashboardComponent = ComponentStudioDashboardComponent_1 = __deco
 export { ComponentStudioDashboardComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentStudioDashboardComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-component-studio-dashboard', providers: [ComponentStudioStateService, ComponentVersionService], template: "<div class=\"component-studio\" [class.resizing]=\"IsResizing\" kendoDialogContainer>\n\n  <!-- ============================================================\n       TOOLBAR \u2014 Unified bar with integrated breadcrumb\n       Left: hamburger + breadcrumb context\n       Right: Save | Export | divider | AI | Keyboard | Refresh\n       ============================================================ -->\n  <div class=\"studio-toolbar\">\n    <div class=\"toolbar-context\">\n      <!-- Toggle left panel -->\n      <button class=\"tb-btn icon-only\" title=\"Toggle browser panel\" (click)=\"ToggleLeftPanel()\">\n        <i class=\"fa-solid fa-bars\"></i>\n      </button>\n\n      @if (state.SelectedComponent) {\n        <span class=\"breadcrumb-type\">\n          <i class=\"fa-solid fa-cube\"></i>\n          {{ state.GetComponentType(state.SelectedComponent) || 'Component' }}\n        </span>\n        <span class=\"breadcrumb-sep\"><i class=\"fa-solid fa-chevron-right\"></i></span>\n        <span class=\"component-label\">{{ state.GetComponentName(state.SelectedComponent) }}</span>\n\n        @if (state.IsRunning) {\n          <span class=\"running-badge\">\n            <span class=\"running-dot-small\"></span>\n            Running\n          </span>\n        }\n        @if (state.HasUnsavedChanges) {\n          <span class=\"unsaved-dot\" title=\"Unsaved changes\"></span>\n        }\n      }\n    </div>\n\n    <div class=\"toolbar-spacer\"></div>\n\n    <div class=\"toolbar-actions\">\n      <!-- Save Version -->\n      @if (state.SelectedComponent) {\n        <button class=\"tb-btn primary\" (click)=\"SaveVersion()\" title=\"Save version (Ctrl+S)\">\n          <i class=\"fa-solid fa-save\"></i> Save\n        </button>\n      }\n\n      <!-- Refresh Component -->\n      @if (state.SelectedComponent && state.IsRunning) {\n        <button class=\"tb-btn\" (click)=\"RefreshComponent()\" title=\"Refresh component\">\n          <i class=\"fa-solid fa-arrows-rotate\"></i> Refresh\n        </button>\n      }\n\n      <!-- Export -->\n      @if (state.SelectedComponent && state.IsRunning) {\n        <div class=\"header-dropdown\" [class.open]=\"exportDropdownOpen\">\n          <button class=\"tb-btn\" (click)=\"ToggleExportDropdown()\">\n            <i class=\"fa-solid fa-file-export\"></i> Export\n            <i class=\"fa-solid fa-chevron-down dropdown-icon\"></i>\n          </button>\n          @if (exportDropdownOpen) {\n            <div class=\"dropdown-menu\">\n              <button class=\"dropdown-item\" (click)=\"ExportToArtifact()\">\n                <i class=\"fa-solid fa-save\"></i> To Artifact\n              </button>\n              <button class=\"dropdown-item\" (click)=\"ExportToFile()\">\n                <i class=\"fa-solid fa-file\"></i> To File\n              </button>\n              <button class=\"dropdown-item\" (click)=\"ExportToClipboard()\">\n                <i class=\"fa-solid fa-clipboard\"></i> To Clipboard\n              </button>\n            </div>\n          }\n        </div>\n      }\n\n      <span class=\"toolbar-divider\"></span>\n\n      <!-- AI Panel Toggle -->\n      <button class=\"tb-btn icon-only\" [class.active-toggle]=\"!state.IsAIPanelCollapsed\"\n              (click)=\"ToggleAIPanel()\"\n              [title]=\"state.IsAIPanelCollapsed ? 'Show AI Assistant' : 'Hide AI Assistant'\">\n        <i class=\"fa-solid fa-robot\"></i>\n      </button>\n\n      <!-- Keyboard Shortcuts -->\n      <button class=\"tb-btn icon-only\" (click)=\"ShowKeyboardShortcuts = !ShowKeyboardShortcuts\"\n              title=\"Keyboard shortcuts (?)\">\n        <i class=\"fa-solid fa-keyboard\"></i>\n      </button>\n\n      <!-- Refresh -->\n      <button class=\"tb-btn icon-only\" (click)=\"RefreshData()\" [disabled]=\"state.IsLoading\" title=\"Refresh data\">\n        <i class=\"fa-solid fa-arrows-rotate\"></i>\n      </button>\n    </div>\n\n    <!-- Hidden file input -->\n    <input #fileInput type=\"file\" accept=\".json\" (change)=\"HandleFileSelect($event)\" style=\"display: none;\" />\n  </div>\n\n  <!-- ============================================================\n       THREE-PANEL BODY\n       ============================================================ -->\n  <div class=\"studio-body\">\n\n    <!-- Left Panel: Component Browser (collapsible) -->\n    @if (!IsLeftPanelCollapsed) {\n      <div class=\"panel panel-left\" [style.width.px]=\"leftPanelWidth\">\n        <mj-component-browser\n          (NewComponent)=\"OnNewComponent()\"\n          (ImportFromFile)=\"ImportFromFile()\"\n          (ImportFromText)=\"ImportFromText()\"\n          (ImportFromArtifact)=\"ImportFromArtifact()\">\n        </mj-component-browser>\n      </div>\n\n      <!-- Resize Handle: Left <-> Center -->\n      <div class=\"resize-handle\" (mousedown)=\"OnLeftResizeStart($event)\"></div>\n    }\n\n    <!-- Center Panel: Workspace (side-by-side: Preview LEFT, Editor RIGHT) -->\n    <div class=\"panel panel-center\">\n      @if (state.SelectedComponent) {\n        <!-- Preview (left side) -->\n        <div class=\"workspace-preview\" [class.full-width]=\"IsEditorPanelCollapsed\" [style.flex]=\"IsEditorPanelCollapsed ? '1 1 100%' : previewFlex\">\n          <div class=\"preview-sub-header\">\n            <div class=\"preview-sub-left\">\n              <i class=\"fa-solid fa-eye\"></i>\n              <span>Preview</span>\n            </div>\n            <div class=\"preview-sub-right\">\n              <!-- Toggle editor panel -->\n              <button class=\"toggle-editors-btn\" [class.active]=\"!IsEditorPanelCollapsed\"\n                      (click)=\"ToggleEditorPanel()\" title=\"Toggle editor panel\">\n                <i class=\"fa-solid fa-columns\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"preview-body\">\n            <mj-component-preview\n              (AskAIToFix)=\"OnAskAIToFix($event)\">\n            </mj-component-preview>\n          </div>\n        </div>\n\n        <!-- Resize Handle: Preview <-> Editor (obvious center divider) -->\n        @if (!IsEditorPanelCollapsed) {\n          <div class=\"resize-handle center-divider\" (mousedown)=\"OnCenterResizeStart($event)\">\n            <div class=\"divider-grip\"></div>\n          </div>\n        }\n\n        <!-- Editor Tabs (right side, collapsible) -->\n        @if (!IsEditorPanelCollapsed) {\n          <div class=\"workspace-editors\" [style.flex]=\"editorFlex\">\n            <mj-editor-tabs></mj-editor-tabs>\n          </div>\n        }\n      } @else {\n        <!-- Enhanced Empty State -->\n        <div class=\"empty-state\">\n          <div class=\"empty-state-content\">\n            <div class=\"empty-state-icon\">\n              <i class=\"fa-solid fa-rocket\"></i>\n            </div>\n            <h2>Ready to Build</h2>\n            <p>Select a component from the browser or create a new one to get started</p>\n            <div class=\"empty-state-actions\">\n              <button kendoButton [themeColor]=\"'primary'\" (click)=\"OnNewComponent()\">\n                <span class=\"fa-solid fa-plus\"></span> New Component\n              </button>\n              <button kendoButton [themeColor]=\"'base'\" (click)=\"ImportFromFile()\">\n                <span class=\"fa-solid fa-file-import\"></span> Import\n              </button>\n            </div>\n            <div class=\"quick-start-templates\">\n              <span class=\"quick-start-label\">Quick start:</span>\n              <button class=\"quick-start-btn\" (click)=\"OnQuickStart('dashboard')\">\n                <i class=\"fa-solid fa-chart-line\"></i> Dashboard\n              </button>\n              <button class=\"quick-start-btn\" (click)=\"OnQuickStart('report')\">\n                <i class=\"fa-solid fa-file-alt\"></i> Report\n              </button>\n              <button class=\"quick-start-btn\" (click)=\"OnQuickStart('chart')\">\n                <i class=\"fa-solid fa-chart-pie\"></i> Chart\n              </button>\n              <button class=\"quick-start-btn\" (click)=\"OnQuickStart('form')\">\n                <i class=\"fa-solid fa-edit\"></i> Form\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Resize Handle: Center <-> Right -->\n    @if (!state.IsAIPanelCollapsed) {\n      <div class=\"resize-handle\" (mousedown)=\"OnRightResizeStart($event)\"></div>\n    }\n\n    <!-- Right Panel: AI Assistant -->\n    @if (!state.IsAIPanelCollapsed) {\n      <div class=\"panel panel-right\" [style.width.px]=\"rightPanelWidth\">\n        <mj-ai-assistant-panel></mj-ai-assistant-panel>\n      </div>\n    }\n  </div>\n\n  <!-- ============================================================\n       STATUS BAR\n       ============================================================ -->\n  <div class=\"status-bar\">\n    <div class=\"status-left\">\n      <span class=\"status-item\">\n        <i class=\"fa-solid fa-cube\"></i>\n        {{ state.FilteredComponents.length }} component{{ state.FilteredComponents.length !== 1 ? 's' : '' }}\n      </span>\n    </div>\n    <div class=\"status-right\">\n      @if (LastSavedTime) {\n        <span class=\"status-item\">\n          <i class=\"fa-solid fa-check-circle\"></i>\n          Saved {{ LastSavedTime | date:'shortTime' }}\n        </span>\n      }\n      <span class=\"status-item shortcut-hint\">\n        <kbd>?</kbd> Shortcuts\n      </span>\n    </div>\n  </div>\n\n  <!-- ============================================================\n       KEYBOARD SHORTCUTS OVERLAY\n       ============================================================ -->\n  @if (ShowKeyboardShortcuts) {\n    <div class=\"shortcuts-overlay\" (click)=\"ShowKeyboardShortcuts = false\">\n      <div class=\"shortcuts-panel\" (click)=\"$event.stopPropagation()\">\n        <div class=\"shortcuts-header\">\n          <h3>Keyboard Shortcuts</h3>\n          <button class=\"shortcuts-close\" (click)=\"ShowKeyboardShortcuts = false\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        <div class=\"shortcuts-body\">\n          <div class=\"shortcut-group\">\n            <h4>General</h4>\n            <div class=\"shortcut-row\">\n              <span class=\"shortcut-keys\"><kbd>Ctrl</kbd> + <kbd>S</kbd></span>\n              <span class=\"shortcut-desc\">Save version</span>\n            </div>\n            <div class=\"shortcut-row\">\n              <span class=\"shortcut-keys\"><kbd>Ctrl</kbd> + <kbd>N</kbd></span>\n              <span class=\"shortcut-desc\">New component</span>\n            </div>\n            <div class=\"shortcut-row\">\n              <span class=\"shortcut-keys\"><kbd>?</kbd></span>\n              <span class=\"shortcut-desc\">Toggle shortcuts</span>\n            </div>\n            <div class=\"shortcut-row\">\n              <span class=\"shortcut-keys\"><kbd>Esc</kbd></span>\n              <span class=\"shortcut-desc\">Close overlay</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- ============================================================\n       NEW COMPONENT DIALOG\n       ============================================================ -->\n  @if (ShowNewComponentDialog) {\n    <mj-new-component-dialog\n      [Visible]=\"ShowNewComponentDialog\"\n      (Close)=\"OnNewComponentDialogClose($event)\">\n    </mj-new-component-dialog>\n  }\n\n  @if (ShowSaveVersionDialog) {\n    <mj-save-version-dialog\n      [Visible]=\"ShowSaveVersionDialog\"\n      [CurrentVersion]=\"versionService.CurrentVersionNumber\"\n      (Save)=\"OnSaveVersionConfirm($event)\"\n      (Cancel)=\"ShowSaveVersionDialog = false\">\n    </mj-save-version-dialog>\n  }\n</div>\n", 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: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n/* ============================================================\n   TOOLBAR \u2014 unified bar with integrated breadcrumb\n   ============================================================ */\n\n.component-studio .studio-toolbar {\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  z-index: 10;\n  min-height: 42px;\n  gap: 8px;\n}\n\n/* Left: hamburger + breadcrumb context */\n.component-studio .toolbar-context {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  flex-shrink: 1;\n  overflow: hidden;\n}\n\n.component-studio .toolbar-spacer {\n  flex: 1;\n}\n\n/* Right: action buttons */\n.component-studio .toolbar-actions {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n}\n\n/* ---- Toolbar buttons ---- */\n.component-studio .tb-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n  line-height: 1;\n}\n\n.component-studio .tb-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-default);\n}\n\n.component-studio .tb-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.component-studio .tb-btn i {\n  font-size: 12px;\n}\n\n.component-studio .tb-btn.icon-only {\n  padding: 5px 7px;\n}\n\n.component-studio .tb-btn.primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.component-studio .tb-btn.primary:hover {\n  opacity: 0.9;\n}\n\n.component-studio .tb-btn.active-toggle {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n/* ---- Breadcrumb elements inside toolbar ---- */\n.component-studio .breadcrumb-type {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n}\n\n.component-studio .breadcrumb-type i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.component-studio .breadcrumb-sep {\n  font-size: 9px;\n  color: var(--mj-border-default);\n}\n\n.component-studio .component-label {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 240px;\n}\n\n.component-studio .running-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 10px;\n  white-space: nowrap;\n}\n\n.component-studio .running-dot-small {\n  display: inline-block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--mj-status-success);\n  animation: pulse 1.5s ease-in-out infinite;\n}\n\n.component-studio .unsaved-dot {\n  display: inline-block;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--mj-status-warning);\n  animation: pulse 2s infinite;\n  flex-shrink: 0;\n}\n\n.component-studio .toolbar-divider {\n  width: 1px;\n  height: 18px;\n  background: var(--mj-border-default);\n  margin: 0 2px;\n  flex-shrink: 0;\n}\n\n.component-studio .dropdown-icon {\n  font-size: 9px;\n  opacity: 0.6;\n}\n\n/* ---- Dropdown menus ---- */\n.component-studio .header-dropdown {\n  position: relative;\n}\n\n.component-studio .header-dropdown .dropdown-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  z-index: 100;\n  min-width: 180px;\n  overflow: hidden;\n}\n\n.component-studio .header-dropdown .dropdown-menu .dropdown-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 10px 16px;\n  border: none;\n  background: none;\n  text-align: left;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s ease;\n}\n\n.component-studio .header-dropdown .dropdown-menu .dropdown-item:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.component-studio .header-dropdown .dropdown-menu .dropdown-item:not(:last-child) {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.component-studio .header-dropdown .dropdown-menu .dropdown-item i {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-brand-primary);\n  font-size: 13px;\n}\n\n/* ============================================================\n   THREE-PANEL BODY\n   ============================================================ */\n\n.component-studio .studio-body {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n\n.component-studio .panel {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.component-studio .panel-left {\n  flex-shrink: 0;\n  border-right: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.component-studio .panel-center {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  min-width: 400px;\n}\n\n/* Preview pane (left side of center) */\n.component-studio .panel-center .workspace-preview {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.component-studio .panel-center .workspace-preview.full-width {\n  border-right: none;\n}\n\n/* Preview sub-header */\n.component-studio .preview-sub-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 10px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  min-height: 32px;\n}\n\n.component-studio .preview-sub-left {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.component-studio .preview-sub-left i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.component-studio .preview-sub-right {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.component-studio .toggle-editors-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 12px;\n  transition: all 0.15s ease;\n}\n\n.component-studio .toggle-editors-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.component-studio .toggle-editors-btn.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.component-studio .preview-body {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Editor pane (right side of center) */\n.component-studio .panel-center .workspace-editors {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* Right panel: AI Assistant */\n.component-studio .panel-right {\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n/* ============================================================\n   RESIZE HANDLES\n   ============================================================ */\n\n.component-studio .resize-handle {\n  flex-shrink: 0;\n  width: 5px;\n  cursor: col-resize;\n  background: transparent;\n  position: relative;\n  z-index: 5;\n  transition: background 0.15s ease;\n}\n\n.component-studio .resize-handle:hover,\n.component-studio .resize-handle:active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n/* Center divider \u2014 more obvious separator between preview and editors */\n.component-studio .resize-handle.center-divider {\n  width: 7px;\n  background: var(--mj-border-default);\n}\n\n.component-studio .resize-handle.center-divider:hover,\n.component-studio .resize-handle.center-divider:active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.component-studio .resize-handle .divider-grip {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 3px;\n  height: 32px;\n  border-radius: 2px;\n  background: var(--mj-text-secondary);\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.component-studio .resize-handle:hover .divider-grip {\n  opacity: 0.5;\n}\n\n/* SMOOTH RESIZE TRANSITIONS */\n.component-studio:not(.resizing) .panel {\n  transition: width 0.15s ease, flex 0.15s ease;\n}\n\n.component-studio:not(.resizing) .workspace-preview,\n.component-studio:not(.resizing) .workspace-editors {\n  transition: flex 0.15s ease;\n}\n\n/* ============================================================\n   STATUS BAR\n   ============================================================ */\n\n.component-studio .status-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 2px 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-top: 1px solid var(--mj-border-default);\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n  min-height: 24px;\n}\n\n.component-studio .status-bar .status-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.component-studio .status-bar .status-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.component-studio .status-bar .status-item {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.component-studio .status-bar kbd {\n  display: inline-block;\n  padding: 0 4px;\n  font-size: 10px;\n  font-family: inherit;\n  line-height: 16px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 3px;\n}\n\n.component-studio .status-bar .shortcut-hint {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  opacity: 0.8;\n}\n\n/* ============================================================\n   KEYBOARD SHORTCUTS OVERLAY\n   ============================================================ */\n\n.component-studio .shortcuts-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  box-shadow: var(--mj-shadow-lg);\n  width: 520px;\n  max-height: 80vh;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel .shortcuts-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel .shortcuts-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel .shortcuts-header button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n  padding: 4px;\n  border-radius: 4px;\n  transition: background 0.15s ease;\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel .shortcuts-header button:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel .shortcuts-body {\n  padding: 16px 20px;\n  overflow-y: auto;\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel .shortcuts-body .shortcut-group h4 {\n  margin: 0 0 8px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel .shortcuts-body .shortcut-group + .shortcut-group {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel .shortcuts-body .shortcut-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 0;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel .shortcuts-body .shortcut-row kbd {\n  display: inline-block;\n  padding: 2px 8px;\n  font-size: 12px;\n  font-family: inherit;\n  line-height: 20px;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  box-shadow: 0 1px 0 var(--mj-border-default);\n  min-width: 24px;\n  text-align: center;\n}\n\n/* ============================================================\n   EMPTY STATE\n   ============================================================ */\n\n.component-studio .empty-state {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.component-studio .empty-state .empty-state-content {\n  text-align: center;\n  max-width: 400px;\n}\n\n.component-studio .empty-state .empty-state-content .empty-state-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 72px;\n  height: 72px;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  margin-bottom: 16px;\n}\n\n.component-studio .empty-state .empty-state-content .empty-state-icon i {\n  font-size: 28px;\n  color: var(--mj-brand-primary);\n}\n\n.component-studio .empty-state .empty-state-content i {\n  color: var(--mj-border-default);\n  margin-bottom: 16px;\n}\n\n.component-studio .empty-state .empty-state-content h2 {\n  margin: 0 0 8px;\n  font-size: 22px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.component-studio .empty-state .empty-state-content p {\n  margin: 0 0 24px;\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n.component-studio .empty-state .empty-state-content .empty-state-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: center;\n}\n\n.component-studio .empty-state .empty-state-content .quick-start-templates {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  flex-wrap: wrap;\n  margin-top: 16px;\n}\n\n.component-studio .empty-state .empty-state-content .quick-start-templates .quick-start-label {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-right: 4px;\n}\n\n.component-studio .empty-state .empty-state-content .quick-start-templates .quick-start-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 12px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.component-studio .empty-state .empty-state-content .quick-start-templates .quick-start-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-default);\n}\n\n.component-studio .empty-state .empty-state-content .quick-start-templates .quick-start-btn i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n  margin-bottom: 0;\n}\n\n@keyframes pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.4; }\n}\n"] }]
-    }], () => [{ type: i1.ComponentStudioStateService }, { type: i2.ComponentVersionService }, { type: i0.ChangeDetectorRef }, { type: i3.DialogService }, { type: i4.MJNotificationService }], { fileInput: [{
+        args: [{ standalone: false, selector: 'mj-component-studio-dashboard', providers: [ComponentStudioStateService, ComponentVersionService], template: "<div class=\"component-studio\" [class.resizing]=\"IsResizing\">\n\n  <!-- ============================================================\n       TOOLBAR \u2014 Unified bar with integrated breadcrumb\n       Left: hamburger + breadcrumb context\n       Right: Save | Export | divider | AI | Keyboard | Refresh\n       ============================================================ -->\n  <div class=\"studio-toolbar\">\n    <div class=\"toolbar-context\">\n      <!-- Toggle left panel -->\n      <button class=\"tb-btn icon-only\" title=\"Toggle browser panel\" (click)=\"ToggleLeftPanel()\">\n        <i class=\"fa-solid fa-bars\"></i>\n      </button>\n\n      @if (state.SelectedComponent) {\n        <span class=\"breadcrumb-type\">\n          <i class=\"fa-solid fa-cube\"></i>\n          {{ state.GetComponentType(state.SelectedComponent) || 'Component' }}\n        </span>\n        <span class=\"breadcrumb-sep\"><i class=\"fa-solid fa-chevron-right\"></i></span>\n        <span class=\"component-label\">{{ state.GetComponentName(state.SelectedComponent) }}</span>\n\n        @if (state.IsRunning) {\n          <span class=\"running-badge\">\n            <span class=\"running-dot-small\"></span>\n            Running\n          </span>\n        }\n        @if (state.HasUnsavedChanges) {\n          <span class=\"unsaved-dot\" title=\"Unsaved changes\"></span>\n        }\n      }\n    </div>\n\n    <div class=\"toolbar-spacer\"></div>\n\n    <div class=\"toolbar-actions\">\n      <!-- Save Version -->\n      @if (state.SelectedComponent) {\n        <button class=\"tb-btn primary\" (click)=\"SaveVersion()\" title=\"Save version (Ctrl+S)\">\n          <i class=\"fa-solid fa-save\"></i> Save\n        </button>\n      }\n\n      <!-- Refresh Component -->\n      @if (state.SelectedComponent && state.IsRunning) {\n        <button class=\"tb-btn\" (click)=\"RefreshComponent()\" title=\"Refresh component\">\n          <i class=\"fa-solid fa-arrows-rotate\"></i> Refresh\n        </button>\n      }\n\n      <!-- Export -->\n      @if (state.SelectedComponent && state.IsRunning) {\n        <div class=\"header-dropdown\" [class.open]=\"exportDropdownOpen\">\n          <button class=\"tb-btn\" (click)=\"ToggleExportDropdown()\">\n            <i class=\"fa-solid fa-file-export\"></i> Export\n            <i class=\"fa-solid fa-chevron-down dropdown-icon\"></i>\n          </button>\n          @if (exportDropdownOpen) {\n            <div class=\"dropdown-menu\">\n              <button class=\"dropdown-item\" (click)=\"ExportToArtifact()\">\n                <i class=\"fa-solid fa-save\"></i> To Artifact\n              </button>\n              <button class=\"dropdown-item\" (click)=\"ExportToFile()\">\n                <i class=\"fa-solid fa-file\"></i> To File\n              </button>\n              <button class=\"dropdown-item\" (click)=\"ExportToClipboard()\">\n                <i class=\"fa-solid fa-clipboard\"></i> To Clipboard\n              </button>\n            </div>\n          }\n        </div>\n      }\n\n      <span class=\"toolbar-divider\"></span>\n\n      <!-- AI Panel Toggle -->\n      <button class=\"tb-btn icon-only\" [class.active-toggle]=\"!state.IsAIPanelCollapsed\"\n              (click)=\"ToggleAIPanel()\"\n              [title]=\"state.IsAIPanelCollapsed ? 'Show AI Assistant' : 'Hide AI Assistant'\">\n        <i class=\"fa-solid fa-robot\"></i>\n      </button>\n\n      <!-- Keyboard Shortcuts -->\n      <button class=\"tb-btn icon-only\" (click)=\"ShowKeyboardShortcuts = !ShowKeyboardShortcuts\"\n              title=\"Keyboard shortcuts (?)\">\n        <i class=\"fa-solid fa-keyboard\"></i>\n      </button>\n\n      <!-- Refresh -->\n      <button class=\"tb-btn icon-only\" (click)=\"RefreshData()\" [disabled]=\"state.IsLoading\" title=\"Refresh data\">\n        <i class=\"fa-solid fa-arrows-rotate\"></i>\n      </button>\n    </div>\n\n    <!-- Hidden file input -->\n    <input #fileInput type=\"file\" accept=\".json\" (change)=\"HandleFileSelect($event)\" style=\"display: none;\" />\n  </div>\n\n  <!-- ============================================================\n       THREE-PANEL BODY\n       ============================================================ -->\n  <div class=\"studio-body\">\n\n    <!-- Left Panel: Component Browser (collapsible) -->\n    @if (!IsLeftPanelCollapsed) {\n      <div class=\"panel panel-left\" [style.width.px]=\"leftPanelWidth\">\n        <mj-component-browser\n          (NewComponent)=\"OnNewComponent()\"\n          (ImportFromFile)=\"ImportFromFile()\"\n          (ImportFromText)=\"ImportFromText()\"\n          (ImportFromArtifact)=\"ImportFromArtifact()\">\n        </mj-component-browser>\n      </div>\n\n      <!-- Resize Handle: Left <-> Center -->\n      <div class=\"resize-handle\" (mousedown)=\"OnLeftResizeStart($event)\"></div>\n    }\n\n    <!-- Center Panel: Workspace (side-by-side: Preview LEFT, Editor RIGHT) -->\n    <div class=\"panel panel-center\">\n      @if (state.SelectedComponent) {\n        <!-- Preview (left side) -->\n        <div class=\"workspace-preview\" [class.full-width]=\"IsEditorPanelCollapsed\" [style.flex]=\"IsEditorPanelCollapsed ? '1 1 100%' : previewFlex\">\n          <div class=\"preview-sub-header\">\n            <div class=\"preview-sub-left\">\n              <i class=\"fa-solid fa-eye\"></i>\n              <span>Preview</span>\n            </div>\n            <div class=\"preview-sub-right\">\n              <!-- Toggle editor panel -->\n              <button class=\"toggle-editors-btn\" [class.active]=\"!IsEditorPanelCollapsed\"\n                      (click)=\"ToggleEditorPanel()\" title=\"Toggle editor panel\">\n                <i class=\"fa-solid fa-columns\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"preview-body\">\n            <mj-component-preview\n              (AskAIToFix)=\"OnAskAIToFix($event)\">\n            </mj-component-preview>\n          </div>\n        </div>\n\n        <!-- Resize Handle: Preview <-> Editor (obvious center divider) -->\n        @if (!IsEditorPanelCollapsed) {\n          <div class=\"resize-handle center-divider\" (mousedown)=\"OnCenterResizeStart($event)\">\n            <div class=\"divider-grip\"></div>\n          </div>\n        }\n\n        <!-- Editor Tabs (right side, collapsible) -->\n        @if (!IsEditorPanelCollapsed) {\n          <div class=\"workspace-editors\" [style.flex]=\"editorFlex\">\n            <mj-editor-tabs></mj-editor-tabs>\n          </div>\n        }\n      } @else {\n        <!-- Enhanced Empty State -->\n        <div class=\"empty-state\">\n          <div class=\"empty-state-content\">\n            <div class=\"empty-state-icon\">\n              <i class=\"fa-solid fa-rocket\"></i>\n            </div>\n            <h2>Ready to Build</h2>\n            <p>Select a component from the browser or create a new one to get started</p>\n            <div class=\"empty-state-actions\">\n              <button mjButton variant=\"primary\" (click)=\"OnNewComponent()\">\n                <span class=\"fa-solid fa-plus\"></span> New Component\n              </button>\n              <button mjButton (click)=\"ImportFromFile()\">\n                <span class=\"fa-solid fa-file-import\"></span> Import\n              </button>\n            </div>\n            <div class=\"quick-start-templates\">\n              <span class=\"quick-start-label\">Quick start:</span>\n              <button class=\"quick-start-btn\" (click)=\"OnQuickStart('dashboard')\">\n                <i class=\"fa-solid fa-chart-line\"></i> Dashboard\n              </button>\n              <button class=\"quick-start-btn\" (click)=\"OnQuickStart('report')\">\n                <i class=\"fa-solid fa-file-alt\"></i> Report\n              </button>\n              <button class=\"quick-start-btn\" (click)=\"OnQuickStart('chart')\">\n                <i class=\"fa-solid fa-chart-pie\"></i> Chart\n              </button>\n              <button class=\"quick-start-btn\" (click)=\"OnQuickStart('form')\">\n                <i class=\"fa-solid fa-edit\"></i> Form\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Resize Handle: Center <-> Right -->\n    @if (!state.IsAIPanelCollapsed) {\n      <div class=\"resize-handle\" (mousedown)=\"OnRightResizeStart($event)\"></div>\n    }\n\n    <!-- Right Panel: AI Assistant -->\n    @if (!state.IsAIPanelCollapsed) {\n      <div class=\"panel panel-right\" [style.width.px]=\"rightPanelWidth\">\n        <mj-ai-assistant-panel></mj-ai-assistant-panel>\n      </div>\n    }\n  </div>\n\n  <!-- ============================================================\n       STATUS BAR\n       ============================================================ -->\n  <div class=\"status-bar\">\n    <div class=\"status-left\">\n      <span class=\"status-item\">\n        <i class=\"fa-solid fa-cube\"></i>\n        {{ state.FilteredComponents.length }} component{{ state.FilteredComponents.length !== 1 ? 's' : '' }}\n      </span>\n    </div>\n    <div class=\"status-right\">\n      @if (LastSavedTime) {\n        <span class=\"status-item\">\n          <i class=\"fa-solid fa-check-circle\"></i>\n          Saved {{ LastSavedTime | date:'shortTime' }}\n        </span>\n      }\n      <span class=\"status-item shortcut-hint\">\n        <kbd>?</kbd> Shortcuts\n      </span>\n    </div>\n  </div>\n\n  <!-- ============================================================\n       KEYBOARD SHORTCUTS OVERLAY\n       ============================================================ -->\n  @if (ShowKeyboardShortcuts) {\n    <div class=\"shortcuts-overlay\" (click)=\"ShowKeyboardShortcuts = false\">\n      <div class=\"shortcuts-panel\" (click)=\"$event.stopPropagation()\">\n        <div class=\"shortcuts-header\">\n          <h3>Keyboard Shortcuts</h3>\n          <button class=\"shortcuts-close\" (click)=\"ShowKeyboardShortcuts = false\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        <div class=\"shortcuts-body\">\n          <div class=\"shortcut-group\">\n            <h4>General</h4>\n            <div class=\"shortcut-row\">\n              <span class=\"shortcut-keys\"><kbd>Ctrl</kbd> + <kbd>S</kbd></span>\n              <span class=\"shortcut-desc\">Save version</span>\n            </div>\n            <div class=\"shortcut-row\">\n              <span class=\"shortcut-keys\"><kbd>Ctrl</kbd> + <kbd>N</kbd></span>\n              <span class=\"shortcut-desc\">New component</span>\n            </div>\n            <div class=\"shortcut-row\">\n              <span class=\"shortcut-keys\"><kbd>?</kbd></span>\n              <span class=\"shortcut-desc\">Toggle shortcuts</span>\n            </div>\n            <div class=\"shortcut-row\">\n              <span class=\"shortcut-keys\"><kbd>Esc</kbd></span>\n              <span class=\"shortcut-desc\">Close overlay</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- ============================================================\n       NEW COMPONENT DIALOG\n       ============================================================ -->\n  @if (ShowNewComponentDialog) {\n    <mj-new-component-dialog\n      [Visible]=\"ShowNewComponentDialog\"\n      (Close)=\"OnNewComponentDialogClose($event)\">\n    </mj-new-component-dialog>\n  }\n\n  @if (ShowSaveVersionDialog) {\n    <mj-save-version-dialog\n      [Visible]=\"ShowSaveVersionDialog\"\n      [CurrentVersion]=\"versionService.CurrentVersionNumber\"\n      (Save)=\"OnSaveVersionConfirm($event)\"\n      (Cancel)=\"ShowSaveVersionDialog = false\">\n    </mj-save-version-dialog>\n  }\n\n  <!-- Text Import Dialog -->\n  @if (ShowTextImportDialog) {\n    <mj-dialog [Visible]=\"true\" Title=\"Import Component from Text\" (Close)=\"OnTextImportCancel()\" [Width]=\"700\" [MinWidth]=\"500\">\n      <app-text-import-dialog\n        (importSpec)=\"OnTextImportSpec($event)\"\n        (cancelDialog)=\"OnTextImportCancel()\">\n      </app-text-import-dialog>\n    </mj-dialog>\n  }\n\n  <!-- Artifact Load Dialog -->\n  @if (ShowArtifactLoadDialog) {\n    <app-artifact-load-dialog\n      [Visible]=\"ShowArtifactLoadDialog\"\n      (Close)=\"OnArtifactLoadClose($event)\">\n    </app-artifact-load-dialog>\n  }\n\n  <!-- Artifact Selection Dialog -->\n  @if (ShowArtifactSelectionDialog) {\n    <app-artifact-selection-dialog\n      [Visible]=\"ShowArtifactSelectionDialog\"\n      (Close)=\"OnArtifactSelectionClose($event)\">\n    </app-artifact-selection-dialog>\n  }\n</div>\n", 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: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n/* ============================================================\n   TOOLBAR \u2014 unified bar with integrated breadcrumb\n   ============================================================ */\n\n.component-studio .studio-toolbar {\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  z-index: 10;\n  min-height: 42px;\n  gap: 8px;\n}\n\n/* Left: hamburger + breadcrumb context */\n.component-studio .toolbar-context {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  flex-shrink: 1;\n  overflow: hidden;\n}\n\n.component-studio .toolbar-spacer {\n  flex: 1;\n}\n\n/* Right: action buttons */\n.component-studio .toolbar-actions {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n}\n\n/* ---- Toolbar buttons ---- */\n.component-studio .tb-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n  line-height: 1;\n}\n\n.component-studio .tb-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-default);\n}\n\n.component-studio .tb-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.component-studio .tb-btn i {\n  font-size: 12px;\n}\n\n.component-studio .tb-btn.icon-only {\n  padding: 5px 7px;\n}\n\n.component-studio .tb-btn.primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.component-studio .tb-btn.primary:hover {\n  opacity: 0.9;\n}\n\n.component-studio .tb-btn.active-toggle {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n/* ---- Breadcrumb elements inside toolbar ---- */\n.component-studio .breadcrumb-type {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n}\n\n.component-studio .breadcrumb-type i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.component-studio .breadcrumb-sep {\n  font-size: 9px;\n  color: var(--mj-border-default);\n}\n\n.component-studio .component-label {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 240px;\n}\n\n.component-studio .running-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 10px;\n  white-space: nowrap;\n}\n\n.component-studio .running-dot-small {\n  display: inline-block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--mj-status-success);\n  animation: pulse 1.5s ease-in-out infinite;\n}\n\n.component-studio .unsaved-dot {\n  display: inline-block;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--mj-status-warning);\n  animation: pulse 2s infinite;\n  flex-shrink: 0;\n}\n\n.component-studio .toolbar-divider {\n  width: 1px;\n  height: 18px;\n  background: var(--mj-border-default);\n  margin: 0 2px;\n  flex-shrink: 0;\n}\n\n.component-studio .dropdown-icon {\n  font-size: 9px;\n  opacity: 0.6;\n}\n\n/* ---- Dropdown menus ---- */\n.component-studio .header-dropdown {\n  position: relative;\n}\n\n.component-studio .header-dropdown .dropdown-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  z-index: 100;\n  min-width: 180px;\n  overflow: hidden;\n}\n\n.component-studio .header-dropdown .dropdown-menu .dropdown-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 10px 16px;\n  border: none;\n  background: none;\n  text-align: left;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s ease;\n}\n\n.component-studio .header-dropdown .dropdown-menu .dropdown-item:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.component-studio .header-dropdown .dropdown-menu .dropdown-item:not(:last-child) {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.component-studio .header-dropdown .dropdown-menu .dropdown-item i {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-brand-primary);\n  font-size: 13px;\n}\n\n/* ============================================================\n   THREE-PANEL BODY\n   ============================================================ */\n\n.component-studio .studio-body {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n\n.component-studio .panel {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.component-studio .panel-left {\n  flex-shrink: 0;\n  border-right: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.component-studio .panel-center {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  min-width: 400px;\n}\n\n/* Preview pane (left side of center) */\n.component-studio .panel-center .workspace-preview {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.component-studio .panel-center .workspace-preview.full-width {\n  border-right: none;\n}\n\n/* Preview sub-header */\n.component-studio .preview-sub-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 10px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  min-height: 32px;\n}\n\n.component-studio .preview-sub-left {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.component-studio .preview-sub-left i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.component-studio .preview-sub-right {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.component-studio .toggle-editors-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 12px;\n  transition: all 0.15s ease;\n}\n\n.component-studio .toggle-editors-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.component-studio .toggle-editors-btn.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.component-studio .preview-body {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Editor pane (right side of center) */\n.component-studio .panel-center .workspace-editors {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* Right panel: AI Assistant */\n.component-studio .panel-right {\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n/* ============================================================\n   RESIZE HANDLES\n   ============================================================ */\n\n.component-studio .resize-handle {\n  flex-shrink: 0;\n  width: 5px;\n  cursor: col-resize;\n  background: transparent;\n  position: relative;\n  z-index: 5;\n  transition: background 0.15s ease;\n}\n\n.component-studio .resize-handle:hover,\n.component-studio .resize-handle:active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n/* Center divider \u2014 more obvious separator between preview and editors */\n.component-studio .resize-handle.center-divider {\n  width: 7px;\n  background: var(--mj-border-default);\n}\n\n.component-studio .resize-handle.center-divider:hover,\n.component-studio .resize-handle.center-divider:active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.component-studio .resize-handle .divider-grip {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 3px;\n  height: 32px;\n  border-radius: 2px;\n  background: var(--mj-text-secondary);\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.component-studio .resize-handle:hover .divider-grip {\n  opacity: 0.5;\n}\n\n/* SMOOTH RESIZE TRANSITIONS */\n.component-studio:not(.resizing) .panel {\n  transition: width 0.15s ease, flex 0.15s ease;\n}\n\n.component-studio:not(.resizing) .workspace-preview,\n.component-studio:not(.resizing) .workspace-editors {\n  transition: flex 0.15s ease;\n}\n\n/* ============================================================\n   STATUS BAR\n   ============================================================ */\n\n.component-studio .status-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 2px 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-top: 1px solid var(--mj-border-default);\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n  min-height: 24px;\n}\n\n.component-studio .status-bar .status-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.component-studio .status-bar .status-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.component-studio .status-bar .status-item {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.component-studio .status-bar kbd {\n  display: inline-block;\n  padding: 0 4px;\n  font-size: 10px;\n  font-family: inherit;\n  line-height: 16px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 3px;\n}\n\n.component-studio .status-bar .shortcut-hint {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  opacity: 0.8;\n}\n\n/* ============================================================\n   KEYBOARD SHORTCUTS OVERLAY\n   ============================================================ */\n\n.component-studio .shortcuts-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  box-shadow: var(--mj-shadow-lg);\n  width: 520px;\n  max-height: 80vh;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel .shortcuts-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel .shortcuts-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel .shortcuts-header button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n  padding: 4px;\n  border-radius: 4px;\n  transition: background 0.15s ease;\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel .shortcuts-header button:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel .shortcuts-body {\n  padding: 16px 20px;\n  overflow-y: auto;\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel .shortcuts-body .shortcut-group h4 {\n  margin: 0 0 8px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel .shortcuts-body .shortcut-group + .shortcut-group {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel .shortcuts-body .shortcut-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 0;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.component-studio .shortcuts-overlay .shortcuts-panel .shortcuts-body .shortcut-row kbd {\n  display: inline-block;\n  padding: 2px 8px;\n  font-size: 12px;\n  font-family: inherit;\n  line-height: 20px;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  box-shadow: 0 1px 0 var(--mj-border-default);\n  min-width: 24px;\n  text-align: center;\n}\n\n/* ============================================================\n   EMPTY STATE\n   ============================================================ */\n\n.component-studio .empty-state {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.component-studio .empty-state .empty-state-content {\n  text-align: center;\n  max-width: 400px;\n}\n\n.component-studio .empty-state .empty-state-content .empty-state-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 72px;\n  height: 72px;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  margin-bottom: 16px;\n}\n\n.component-studio .empty-state .empty-state-content .empty-state-icon i {\n  font-size: 28px;\n  color: var(--mj-brand-primary);\n}\n\n.component-studio .empty-state .empty-state-content i {\n  color: var(--mj-border-default);\n  margin-bottom: 16px;\n}\n\n.component-studio .empty-state .empty-state-content h2 {\n  margin: 0 0 8px;\n  font-size: 22px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.component-studio .empty-state .empty-state-content p {\n  margin: 0 0 24px;\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n.component-studio .empty-state .empty-state-content .empty-state-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: center;\n}\n\n.component-studio .empty-state .empty-state-content .quick-start-templates {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  flex-wrap: wrap;\n  margin-top: 16px;\n}\n\n.component-studio .empty-state .empty-state-content .quick-start-templates .quick-start-label {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-right: 4px;\n}\n\n.component-studio .empty-state .empty-state-content .quick-start-templates .quick-start-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 12px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.component-studio .empty-state .empty-state-content .quick-start-templates .quick-start-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-default);\n}\n\n.component-studio .empty-state .empty-state-content .quick-start-templates .quick-start-btn i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n  margin-bottom: 0;\n}\n\n@keyframes pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.4; }\n}\n"] }]
+    }], () => [{ type: i1.ComponentStudioStateService }, { type: i2.ComponentVersionService }, { type: i0.ChangeDetectorRef }, { type: i3.MJNotificationService }], { fileInput: [{
             type: ViewChild,
             args: ['fileInput', { static: false }]
         }], OnKeyDown: [{
@@ -988,5 +1011,5 @@ export { ComponentStudioDashboardComponent };
             type: HostListener,
             args: ['document:click', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentStudioDashboardComponent, { className: "ComponentStudioDashboardComponent", filePath: "src/ComponentStudio/component-studio-dashboard.component.ts", lineNumber: 54 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentStudioDashboardComponent, { className: "ComponentStudioDashboardComponent", filePath: "src/ComponentStudio/component-studio-dashboard.component.ts", lineNumber: 52 }); })();
 //# sourceMappingURL=component-studio-dashboard.component.js.map