@memberjunction/ng-dashboards 5.37.0 → 5.38.0

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

@@ -13,33 +13,36 @@ import { Subject, takeUntil } from 'rxjs';
 import { ComponentStudioStateService } from './services/component-studio-state.service';
 import { ComponentVersionService } from './services/component-version.service';
 import { RunView } from '@memberjunction/core';
+import { generateCanvasId, } from './services/form-canvas-model';
+import { generateCodeFromCanvas } from './services/canvas-to-code';
 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 "@memberjunction/ng-notifications";
+import * as i4 from "./services/entity-form-override.service";
 const _c0 = ["fileInput"];
 function ComponentStudioDashboardComponent_Conditional_5_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 38);
-    i0.ɵɵelement(1, "span", 40);
+    i0.ɵɵelementStart(0, "span", 37);
+    i0.ɵɵelement(1, "span", 39);
     i0.ɵɵtext(2, " Running ");
     i0.ɵɵelementEnd();
 } }
 function ComponentStudioDashboardComponent_Conditional_5_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 39);
+    i0.ɵɵelement(0, "span", 38);
 } }
 function ComponentStudioDashboardComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 34);
-    i0.ɵɵelement(1, "i", 27);
+    i0.ɵɵelementStart(0, "span", 33);
+    i0.ɵɵelement(1, "i", 25);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 35);
-    i0.ɵɵelement(4, "i", 36);
+    i0.ɵɵelementStart(3, "span", 34);
+    i0.ɵɵelement(4, "i", 35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 37);
+    i0.ɵɵelementStart(5, "span", 36);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    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);
+    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);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
@@ -53,15 +56,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", 41);
+    i0.ɵɵelementStart(0, "button", 40);
     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", 42);
+    i0.ɵɵelement(1, "i", 41);
     i0.ɵɵtext(2, " Save ");
     i0.ɵɵelementEnd();
 } }
 function ComponentStudioDashboardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 43);
+    i0.ɵɵelementStart(0, "button", 42);
     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 ");
@@ -69,31 +72,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", 48)(1, "button", 49);
+    i0.ɵɵelementStart(0, "div", 47)(1, "button", 48);
     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", 42);
+    i0.ɵɵelement(2, "i", 41);
     i0.ɵɵtext(3, " To Artifact ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 49);
+    i0.ɵɵelementStart(4, "button", 48);
     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", 50);
+    i0.ɵɵelement(5, "i", 49);
     i0.ɵɵtext(6, " To File ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 49);
+    i0.ɵɵelementStart(7, "button", 48);
     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", 51);
+    i0.ɵɵelement(8, "i", 50);
     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", 44)(1, "button", 45);
+    i0.ɵɵelementStart(0, "div", 43)(1, "button", 44);
     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", 46);
+    i0.ɵɵelement(2, "i", 45);
     i0.ɵɵtext(3, " Export ");
-    i0.ɵɵelement(4, "i", 47);
+    i0.ɵɵelement(4, "i", 46);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, ComponentStudioDashboardComponent_Conditional_10_Conditional_5_Template, 10, 0, "div", 48);
+    i0.ɵɵconditionalCreate(5, ComponentStudioDashboardComponent_Conditional_10_Conditional_5_Template, 10, 0, "div", 47);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -103,10 +106,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", 52)(1, "mj-component-browser", 53);
+    i0.ɵɵelementStart(0, "div", 51)(1, "mj-component-browser", 52);
     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", 54);
+    i0.ɵɵelementStart(2, "div", 53);
     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) {
@@ -115,13 +118,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", 66);
+    i0.ɵɵelementStart(0, "div", 65);
     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", 67);
+    i0.ɵɵelement(1, "div", 66);
     i0.ɵɵelementEnd();
 } }
 function ComponentStudioDashboardComponent_Conditional_23_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵelementStart(0, "div", 67);
     i0.ɵɵelement(1, "mj-editor-tabs");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -130,20 +133,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", 55)(1, "div", 56)(2, "div", 57);
-    i0.ɵɵelement(3, "i", 58);
+    i0.ɵɵelementStart(0, "div", 54)(1, "div", 55)(2, "div", 56);
+    i0.ɵɵelement(3, "i", 57);
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5, "Preview");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 59)(7, "button", 60);
+    i0.ɵɵelementStart(6, "div", 58)(7, "button", 59);
     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", 61);
+    i0.ɵɵelement(8, "i", 60);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "div", 62)(10, "mj-component-preview", 63);
+    i0.ɵɵelementStart(9, "div", 61)(10, "mj-component-preview", 62);
     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", 64);
-    i0.ɵɵconditionalCreate(12, ComponentStudioDashboardComponent_Conditional_23_Conditional_12_Template, 2, 2, "div", 65);
+    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);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("flex", ctx_r1.IsEditorPanelCollapsed ? "1 1 100%" : ctx_r1.previewFlex);
@@ -157,8 +160,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", 69)(2, "div", 70);
-    i0.ɵɵelement(3, "i", 71);
+    i0.ɵɵelementStart(0, "div", 21)(1, "div", 68)(2, "div", 69);
+    i0.ɵɵelement(3, "i", 70);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "h2");
     i0.ɵɵtext(5, "Ready to Build");
@@ -166,57 +169,70 @@ 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", 72)(9, "button", 73);
+    i0.ɵɵelementStart(8, "div", 71)(9, "button", 72);
     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", 74);
+    i0.ɵɵelement(10, "span", 73);
     i0.ɵɵtext(11, " New Component ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "button", 75);
+    i0.ɵɵelementStart(12, "button", 74);
     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", 76);
+    i0.ɵɵelement(13, "span", 75);
     i0.ɵɵtext(14, " Import ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "div", 77)(16, "span", 78);
+    i0.ɵɵelementStart(15, "div", 76)(16, "span", 77);
     i0.ɵɵtext(17, "Quick start:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 79);
+    i0.ɵɵelementStart(18, "button", 78);
     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", 80);
+    i0.ɵɵelement(19, "i", 79);
     i0.ɵɵtext(20, " Dashboard ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "button", 79);
+    i0.ɵɵelementStart(21, "button", 78);
     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", 81);
+    i0.ɵɵelement(22, "i", 80);
     i0.ɵɵtext(23, " Report ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "button", 79);
+    i0.ɵɵelementStart(24, "button", 78);
     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", 82);
+    i0.ɵɵelement(25, "i", 81);
     i0.ɵɵtext(26, " Chart ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "button", 79);
+    i0.ɵɵelementStart(27, "button", 78);
     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", 83);
+    i0.ɵɵelement(28, "i", 82);
     i0.ɵɵtext(29, " Form ");
     i0.ɵɵelementEnd()()()();
 } }
+function ComponentStudioDashboardComponent_Conditional_25_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-form-builder-right-panel", 85);
+    i0.ɵɵlistener("ElementChanged", function ComponentStudioDashboardComponent_Conditional_25_Conditional_2_Template_mj_form_builder_right_panel_ElementChanged_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnFormBuilderElementChanged($event)); })("SectionChanged", function ComponentStudioDashboardComponent_Conditional_25_Conditional_2_Template_mj_form_builder_right_panel_SectionChanged_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnFormBuilderSectionChanged($event)); })("ElementDeleted", function ComponentStudioDashboardComponent_Conditional_25_Conditional_2_Template_mj_form_builder_right_panel_ElementDeleted_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnFormBuilderElementDeleted($event)); })("SectionDeleted", function ComponentStudioDashboardComponent_Conditional_25_Conditional_2_Template_mj_form_builder_right_panel_SectionDeleted_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnFormBuilderSectionDeleted($event)); })("FieldAdded", function ComponentStudioDashboardComponent_Conditional_25_Conditional_2_Template_mj_form_builder_right_panel_FieldAdded_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnFormBuilderFieldAdded($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Schema", ctx_r1.state.FormSchema)("Canvas", ctx_r1.state.FormCanvas)("SelectedElementId", ctx_r1.state.FormSelectedElementId)("SelectedSectionId", ctx_r1.state.FormSelectedSectionId);
+} }
+function ComponentStudioDashboardComponent_Conditional_25_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-ai-assistant-panel");
+} }
 function ComponentStudioDashboardComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 54);
+    i0.ɵɵelementStart(0, "div", 53);
     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", 84);
-    i0.ɵɵelement(1, "mj-ai-assistant-panel");
+    i0.ɵɵelementStart(1, "div", 83);
+    i0.ɵɵconditionalCreate(2, ComponentStudioDashboardComponent_Conditional_25_Conditional_2_Template, 1, 4, "mj-form-builder-right-panel", 84)(3, ComponentStudioDashboardComponent_Conditional_25_Conditional_3_Template, 1, 0, "mj-ai-assistant-panel");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
     i0.ɵɵstyleProp("width", ctx_r1.rightPanelWidth, "px");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.IsFormRoleComponent ? 2 : 3);
 } }
-function ComponentStudioDashboardComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 26);
-    i0.ɵɵelement(1, "i", 85);
+function ComponentStudioDashboardComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 24);
+    i0.ɵɵelement(1, "i", 86);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "date");
     i0.ɵɵelementEnd();
@@ -225,96 +241,96 @@ function ComponentStudioDashboardComponent_Conditional_33_Template(rf, ctx) { if
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" Saved ", i0.ɵɵpipeBind2(3, 1, ctx_r1.LastSavedTime, "shortTime"), " ");
 } }
-function ComponentStudioDashboardComponent_Conditional_38_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    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", 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", 88)(3, "h3");
+function ComponentStudioDashboardComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 87);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_37_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ShowKeyboardShortcuts = false); });
+    i0.ɵɵelementStart(1, "div", 88);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_37_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r13); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 89)(3, "h3");
     i0.ɵɵtext(4, "Keyboard Shortcuts");
     i0.ɵɵelementEnd();
-    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", 90);
+    i0.ɵɵelementStart(5, "button", 90);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_37_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ShowKeyboardShortcuts = false); });
+    i0.ɵɵelement(6, "i", 91);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 91)(8, "div", 92)(9, "h4");
+    i0.ɵɵelementStart(7, "div", 92)(8, "div", 93)(9, "h4");
     i0.ɵɵtext(10, "General");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 93)(12, "span", 94)(13, "kbd");
+    i0.ɵɵelementStart(11, "div", 94)(12, "span", 95)(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", 95);
+    i0.ɵɵelementStart(18, "span", 96);
     i0.ɵɵtext(19, "Save version");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "div", 93)(21, "span", 94)(22, "kbd");
+    i0.ɵɵelementStart(20, "div", 94)(21, "span", 95)(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", 95);
+    i0.ɵɵelementStart(27, "span", 96);
     i0.ɵɵtext(28, "New component");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(29, "div", 93)(30, "span", 94)(31, "kbd");
+    i0.ɵɵelementStart(29, "div", 94)(30, "span", 95)(31, "kbd");
     i0.ɵɵtext(32, "?");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(33, "span", 95);
+    i0.ɵɵelementStart(33, "span", 96);
     i0.ɵɵtext(34, "Toggle shortcuts");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(35, "div", 93)(36, "span", 94)(37, "kbd");
+    i0.ɵɵelementStart(35, "div", 94)(36, "span", 95)(37, "kbd");
     i0.ɵɵtext(38, "Esc");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(39, "span", 95);
+    i0.ɵɵelementStart(39, "span", 96);
     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", 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)); });
+function ComponentStudioDashboardComponent_Conditional_38_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-new-component-dialog", 97);
+    i0.ɵɵlistener("Close", function ComponentStudioDashboardComponent_Conditional_38_Template_mj_new_component_dialog_Close_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnNewComponentDialogClose($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("Visible", ctx_r1.ShowNewComponentDialog);
 } }
-function ComponentStudioDashboardComponent_Conditional_40_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    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); });
+function ComponentStudioDashboardComponent_Conditional_39_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-save-version-dialog", 98);
+    i0.ɵɵlistener("Save", function ComponentStudioDashboardComponent_Conditional_39_Template_mj_save_version_dialog_Save_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnSaveVersionConfirm($event)); })("Cancel", function ComponentStudioDashboardComponent_Conditional_39_Template_mj_save_version_dialog_Cancel_0_listener() { i0.ɵɵrestoreView(_r15); 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()); });
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dialog", 99);
+    i0.ɵɵlistener("Close", function ComponentStudioDashboardComponent_Conditional_41_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTextImportCancel()); });
+    i0.ɵɵelementStart(1, "app-text-import-dialog", 100);
+    i0.ɵɵlistener("importSpec", function ComponentStudioDashboardComponent_Conditional_41_Template_app_text_import_dialog_importSpec_1_listener($event) { i0.ɵɵrestoreView(_r16); 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(_r16); 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)); });
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "app-artifact-load-dialog", 97);
+    i0.ɵɵlistener("Close", function ComponentStudioDashboardComponent_Conditional_42_Template_app_artifact_load_dialog_Close_0_listener($event) { i0.ɵɵrestoreView(_r17); 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)); });
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "app-artifact-selection-dialog", 97);
+    i0.ɵɵlistener("Close", function ComponentStudioDashboardComponent_Conditional_43_Template_app_artifact_selection_dialog_Close_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnArtifactSelectionClose($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -326,6 +342,7 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
     versionService;
     cdr;
     notificationService;
+    entityFormOverrideService;
     static USER_PREFS_KEY = 'ComponentStudio.UserPreferences';
     // --- Panel widths ---
     leftPanelWidth = 340;
@@ -350,6 +367,14 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
     ShowTextImportDialog = false;
     ShowArtifactLoadDialog = false;
     ShowArtifactSelectionDialog = false;
+    /** Toggled after a form-role Component is saved (see OnSaveVersionConfirm). */
+    ShowFormOverrideDialog = false;
+    /** ComponentID of the just-saved Component, set when ShowFormOverrideDialog flips on. */
+    PendingOverrideComponentID = null;
+    /** Entity name to seed the override dialog from (mirrors state.FormTargetEntityName). */
+    PendingOverrideEntityName = '';
+    /** Component name to seed the override Name field. */
+    PendingOverrideComponentName = '';
     // --- Status bar ---
     LastSavedTime = null;
     // --- Preferences ---
@@ -357,12 +382,13 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
     fileInput;
     destroy$ = new Subject();
     get metadata() { return this.ProviderToUse; }
-    constructor(state, versionService, cdr, notificationService) {
+    constructor(state, versionService, cdr, notificationService, entityFormOverrideService) {
         super();
         this.state = state;
         this.versionService = versionService;
         this.cdr = cdr;
         this.notificationService = notificationService;
+        this.entityFormOverrideService = entityFormOverrideService;
     }
     async GetResourceDisplayName(data) {
         return 'Component Studio';
@@ -373,6 +399,10 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
         this.state.StateChanged.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.cdr.detectChanges();
         });
+        // Form Builder tab "Open in Chat" — relay to NavigationService.
+        this.state.OpenInChatRequested.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.OnOpenFormInChat();
+        });
         this.loadUserPreferences();
         await this.state.LoadComponents();
         this.NotifyLoadComplete();
@@ -505,6 +535,16 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
     }
     async OnSaveVersionConfirm(result) {
         this.ShowSaveVersionDialog = false;
+        // If the Form Builder tab is the active surface and the canvas has
+        // content, serialize it to JSX BEFORE the version save so the canvas
+        // edits actually persist. If the user is in the Code tab instead, the
+        // EditableCode they hand-edited is already the source of truth.
+        if (this.IsFormRoleComponent && this.state.ActiveTab === 5 && this.state.FormCanvas && this.state.FormSchema) {
+            const canvas = this.state.FormCanvas;
+            const schema = this.state.FormSchema;
+            const name = canvas.title?.trim() || schema.displayName;
+            this.state.EditableCode = generateCodeFromCanvas(canvas, schema, name);
+        }
         let success;
         if (result.Mode === 'update') {
             success = await this.versionService.UpdateCurrentVersion(result.Comment || undefined);
@@ -516,12 +556,62 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
             this.LastSavedTime = new Date();
             this.notificationService.CreateSimpleNotification(`Saved as v${this.versionService.CurrentVersionNumber}`, 'success', 3000);
             this.state.HasUnsavedChanges = false;
+            // For form-role Components, prompt the user to create an
+            // EntityFormOverride so the saved Component actually activates for
+            // someone. Skip silently if the post-save state didn't yield a
+            // ComponentID (loading state, network blip).
+            if (this.IsFormRoleComponent && this.state.FormTargetEntityName) {
+                const spec = this.state.GetCurrentSpec?.();
+                const componentID = spec?.id ?? null;
+                if (componentID) {
+                    this.PendingOverrideComponentID = componentID;
+                    this.PendingOverrideEntityName = this.state.FormTargetEntityName;
+                    this.PendingOverrideComponentName = spec?.name ?? '';
+                    this.ShowFormOverrideDialog = true;
+                }
+            }
         }
         else {
             this.notificationService.CreateSimpleNotification('Failed to save version', 'error');
         }
         this.cdr.detectChanges();
     }
+    /**
+     * Handle the post-save override dialog. Persists an EntityFormOverride
+     * row via {@link EntityFormOverrideService}. Currently surfaces an error
+     * because the underlying write is blocked on the generated
+     * `EntityFormOverrideEntity` class (Task 15) — the UI is wired so the
+     * unblock is one swap of the service stub.
+     */
+    async OnFormOverrideDialogConfirm(result) {
+        this.ShowFormOverrideDialog = false;
+        if (!this.PendingOverrideComponentID) {
+            this.cdr.detectChanges();
+            return;
+        }
+        const overrideService = this.entityFormOverrideService;
+        const provider = this.ProviderToUse;
+        const user = provider?.CurrentUser;
+        if (!user) {
+            this.notificationService.CreateSimpleNotification('No current user — cannot create override.', 'error');
+            this.cdr.detectChanges();
+            return;
+        }
+        const writeResult = await overrideService.CreateOverride(this.PendingOverrideComponentID, result, user, provider);
+        if (writeResult.Success) {
+            this.notificationService.CreateSimpleNotification(`Override "${result.Name}" created. Next time you open a ${result.EntityName} record you'll see this form.`, 'success', 4000);
+        }
+        else {
+            this.notificationService.CreateSimpleNotification(writeResult.Error || 'Failed to create override.', 'warning', 6000);
+        }
+        this.PendingOverrideComponentID = null;
+        this.cdr.detectChanges();
+    }
+    OnFormOverrideDialogDismiss() {
+        this.ShowFormOverrideDialog = false;
+        this.PendingOverrideComponentID = null;
+        this.cdr.detectChanges();
+    }
     // ============================================================
     // REFRESH COMPONENT
     // ============================================================
@@ -562,6 +652,180 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
         this.ShowNewComponentDialog = true;
         this.cdr.detectChanges();
     }
+    /**
+     * True iff the currently-loaded Component declares itself as a form-role
+     * component. Controls whether the right rail renders the field-binding
+     * inspector or the default AI assistant panel.
+     */
+    get IsFormRoleComponent() {
+        const spec = this.state.GetCurrentSpec?.();
+        return spec?.componentRole === 'form' || spec?.type === 'form';
+    }
+    /**
+     * Forwards a snippet emitted by the field-binding inspector to the code
+     * editor. Inserts at the end of the current code with a leading blank
+     * line so it lands inside the function body but doesn't clobber the
+     * cursor's current position. (Cursor-aware insertion is a follow-up —
+     * it requires plumbing EditorView refs from this component through
+     * EditorTabs → CodeEditorPanel → mj-code-editor.)
+     */
+    OnFieldSnippetRequested(snippet) {
+        if (!snippet)
+            return;
+        const existing = this.state.EditableCode ?? '';
+        const separator = existing.endsWith('\n') ? '\n' : '\n\n';
+        this.state.EditableCode = existing + separator + snippet + '\n';
+        this.cdr.detectChanges();
+    }
+    // ============================================================
+    // FORM BUILDER — right-panel event handlers
+    // (Mirrors what the Form Builder tab does internally, but routed
+    // through here so the right panel works regardless of which editor
+    // tab is currently active.)
+    // ============================================================
+    OnFormBuilderElementChanged(next) {
+        const canvas = this.state.FormCanvas;
+        if (!canvas)
+            return;
+        const updated = {
+            ...canvas,
+            sections: canvas.sections.map(s => ({
+                ...s,
+                elements: s.elements.map(e => e.id === next.id ? next : e),
+            })),
+        };
+        this.applyCanvasUpdate(updated);
+    }
+    OnFormBuilderSectionChanged(next) {
+        const canvas = this.state.FormCanvas;
+        if (!canvas)
+            return;
+        const updated = {
+            ...canvas,
+            sections: canvas.sections.map(s => s.id === next.id ? next : s),
+        };
+        this.applyCanvasUpdate(updated);
+    }
+    OnFormBuilderElementDeleted(elementId) {
+        const canvas = this.state.FormCanvas;
+        if (!canvas)
+            return;
+        const updated = {
+            ...canvas,
+            sections: canvas.sections.map(s => ({
+                ...s,
+                elements: s.elements.filter(e => e.id !== elementId),
+            })),
+        };
+        this.state.FormSelectedElementId = null;
+        this.applyCanvasUpdate(updated);
+    }
+    OnFormBuilderSectionDeleted(sectionId) {
+        const canvas = this.state.FormCanvas;
+        if (!canvas)
+            return;
+        const updated = {
+            ...canvas,
+            sections: canvas.sections.filter(s => s.id !== sectionId),
+        };
+        this.state.FormSelectedSectionId = null;
+        this.applyCanvasUpdate(updated);
+    }
+    OnFormBuilderFieldAdded(payload) {
+        const canvas = this.state.FormCanvas;
+        if (!canvas)
+            return;
+        const targetId = this.state.FormSelectedSectionId
+            ?? canvas.sections.find(s => s.elements.some(e => e.id === this.state.FormSelectedElementId))?.id
+            ?? canvas.sections[0]?.id;
+        if (!targetId)
+            return;
+        const updated = {
+            ...canvas,
+            sections: canvas.sections.map(s => s.id === targetId
+                ? { ...s, elements: [...s.elements, {
+                            id: generateCanvasId('field'),
+                            type: 'field',
+                            fieldName: payload.fieldName,
+                            span: 1,
+                        }] }
+                : s),
+        };
+        this.applyCanvasUpdate(updated);
+    }
+    /**
+     * Persist the canvas mutation, mirror it into code, mark the dashboard
+     * dirty. Centralised so right-panel events and tab events share the same
+     * pipeline.
+     */
+    applyCanvasUpdate(next) {
+        this.state.FormCanvas = next;
+        this.state.HasUnsavedChanges = true;
+        this.regenerateFormCodeFromCanvas();
+        this.cdr.detectChanges();
+    }
+    /**
+     * Serialise the canvas → JSX into state.EditableCode. Quietly no-ops if
+     * we don't have both a canvas and a schema (the FormSelected* events
+     * shouldn't fire in that case anyway).
+     */
+    regenerateFormCodeFromCanvas() {
+        const canvas = this.state.FormCanvas;
+        const schema = this.state.FormSchema;
+        if (!canvas || !schema)
+            return;
+        const name = canvas.title?.trim() || schema.displayName;
+        this.state.EditableCode = generateCodeFromCanvas(canvas, schema, name);
+    }
+    /**
+     * Bridge the Form Builder tab's "Open in Chat" button to NavigationService.
+     * Publishes the active canvas as agent context and registers an UpdateForm
+     * tool so Sage can mutate the canvas live. Falls back to clipboard if the
+     * navigation service isn't available (e.g. embedded host).
+     */
+    async OnOpenFormInChat() {
+        const canvas = this.state.FormCanvas;
+        if (!canvas) {
+            this.notificationService.CreateSimpleNotification('No active form to send to chat.', 'warning');
+            return;
+        }
+        try {
+            this.navigationService?.SetAgentContext(this, {
+                activeForm: {
+                    entityName: canvas.entityName,
+                    title: canvas.title,
+                    sections: canvas.sections,
+                },
+            });
+            this.navigationService?.SetAgentClientTools(this, [{
+                    Name: 'UpdateForm',
+                    Description: 'Replace the canvas model of the active form. Accepts a FormCanvasModel JSON object.',
+                    ParameterSchema: {
+                        type: 'object',
+                        properties: { canvas: { type: 'object', description: 'A FormCanvasModel matching the Form Builder shape.' } },
+                        required: ['canvas'],
+                    },
+                    Handler: async (params) => {
+                        const next = params['canvas'] ?? null;
+                        if (next && Array.isArray(next.sections)) {
+                            this.applyCanvasUpdate(next);
+                            return { Success: true };
+                        }
+                        return { Success: false, Error: 'Missing or malformed canvas payload.' };
+                    },
+                }]);
+            this.notificationService.CreateSimpleNotification('Form context sent to chat. Open the chat panel to continue.', 'info', 4000);
+        }
+        catch {
+            try {
+                await navigator.clipboard.writeText(JSON.stringify(canvas, null, 2));
+                this.notificationService.CreateSimpleNotification('Canvas JSON copied to clipboard. Paste it into chat.', 'info', 4000);
+            }
+            catch {
+                this.notificationService.CreateSimpleNotification('Could not hand off to chat.', 'warning');
+            }
+        }
+    }
     OnNewComponentDialogClose(result) {
         this.ShowNewComponentDialog = false;
         if (!result) {
@@ -587,17 +851,26 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
         });
     }
     createComponentFromResult(result) {
+        const isForm = result.type === 'form';
         const newSpec = {
             name: result.name,
             title: result.title,
             description: result.description,
             type: result.type,
+            // Form-role components opt in to the FormHostProps contract so the
+            // resolver mounts them via InteractiveFormComponent at runtime and
+            // the linter enforces form-specific shape checks.
+            componentRole: isForm ? 'form' : undefined,
             location: 'embedded',
             exampleUsage: '',
             code: this.getTemplateCode(result.name, result.type),
-            functionalRequirements: '',
+            functionalRequirements: isForm
+                ? 'Renders a single entity record using FormHostProps. Supports view / edit / create modes. Emits BeforeSave with the dirty-field diff and BeforeDelete; the Angular wrapper owns BaseEntity persistence.'
+                : '',
             dataRequirements: { mode: 'views', entities: [], queries: [], description: '' },
-            technicalDesign: ''
+            technicalDesign: isForm
+                ? 'Form-role component. Local React state holds a draft diff that overlays FormHostProps.record. Save dispatches NotifyEvent(\'BeforeSave\', { dirtyFields }) — the host applies the diff to the BaseEntity. Mode flips are requested via EditModeChangeRequested, never set locally.'
+                : ''
         };
         const fileComponent = {
             id: this.state.GenerateId(),
@@ -615,6 +888,9 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
         this.state.RunComponent(fileComponent);
     }
     getTemplateCode(name, type) {
+        if (type === 'form') {
+            return this.getFormTemplateCode(name);
+        }
         return `function Component({ utilities, settings }) {
   const React = utilities.React;
   const { useState } = React;
@@ -627,6 +903,113 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
   );
 }`;
     }
+    /**
+     * JSX skeleton for form-role components. Pre-wires destructured
+     * FormHostProps, local `draft` state for the dirty-field diff, and the
+     * three canonical lifecycle events (BeforeSave, BeforeDelete,
+     * EditModeChangeRequested). Authors fill in the field rendering; the
+     * persistence path is already correct.
+     */
+    getFormTemplateCode(name) {
+        const componentName = this.toIdentifier(name) || 'Form';
+        return `function ${componentName}({
+  // FormHostProps (from the Angular wrapper)
+  entityName,
+  primaryKey,
+  record,
+  entityMetadata,
+  mode,
+  canEdit,
+  canDelete,
+  canCreate,
+  // Standard interactive-component props
+  utilities,
+  styles,
+  components,
+  callbacks,
+  savedUserSettings,
+  onSaveUserSettings,
+}) {
+  const [draft, setDraft] = React.useState({});
+
+  // Track latest draft in a ref so the methods we register below always
+  // see the current value without re-registering on every keystroke.
+  const draftRef = React.useRef({});
+  React.useEffect(() => { draftRef.current = draft; }, [draft]);
+
+  const isCreate = mode === "create";
+  const isEdit = mode === "edit";
+  const isView = mode === "view";
+  const editing = isEdit || isCreate;
+
+  // Reset the draft diff whenever a new record loads or we return to view.
+  React.useEffect(() => {
+    setDraft({});
+  }, [primaryKey && JSON.stringify(primaryKey), isView]);
+
+  // Register the host-callable methods exactly once. The wrapper invokes
+  // these when the toolbar (above this component) fires Save / Cancel.
+  React.useEffect(() => {
+    callbacks?.RegisterMethod?.("RequestSave", () => {
+      callbacks?.NotifyEvent?.("BeforeSave", {
+        dirtyFields: { ...draftRef.current },
+        cancel: false,
+        timestamp: new Date(),
+      });
+    });
+    callbacks?.RegisterMethod?.("RequestCancel", () => {
+      setDraft({});
+    });
+  }, []);
+
+  const value = (f) => (f in draft ? draft[f] : record?.[f] ?? "");
+
+  const setField = (f, v) => {
+    setDraft((d) => ({ ...d, [f]: v }));
+    callbacks?.NotifyEvent?.("FieldChanged", {
+      fieldName: f,
+      oldValue: record?.[f],
+      newValue: v,
+      timestamp: new Date(),
+    });
+  };
+
+  if (!record && !isCreate) {
+    return <div style={{ padding: 24 }}>No record loaded.</div>;
+  }
+
+  return (
+    <div style={{
+      padding: 24,
+      background: "var(--mj-bg-surface, #fff)",
+      color: "var(--mj-text-primary, #1f2937)",
+      borderRadius: 8,
+      border: "1px solid var(--mj-border-default, #e0e0e0)",
+    }}>
+      <h2 style={{ margin: 0, marginBottom: 16 }}>
+        {isCreate ? "New " + (entityMetadata?.displayName || entityName) : value(entityMetadata?.nameField || "Name") || "(unnamed)"}
+      </h2>
+
+      {/* TODO: render each entityMetadata.fields entry as an input.
+          Use value(fieldName) to read, setField(fieldName, newValue) to write.
+          See the form-builder template at metadata/prompts/templates/sage/form-builder.template.md
+          for full guidance, or open this component in chat to have the
+          Form Builder agent extend it.
+
+          DO NOT render Save / Cancel / Edit / Delete buttons here — the
+          host toolbar above this component provides all four. Save is
+          wired via the RequestSave method registered above. */}
+    </div>
+  );
+}`;
+    }
+    /** Sanitises a human-readable component name into a JS identifier. */
+    toIdentifier(name) {
+        const cleaned = name.replace(/[^A-Za-z0-9]/g, '');
+        if (!cleaned)
+            return '';
+        return cleaned.charAt(0).toUpperCase() + cleaned.slice(1);
+    }
     // ============================================================
     // IMPORT / EXPORT
     // ============================================================
@@ -892,7 +1275,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.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), i0.ɵɵdirectiveInject(i4.EntityFormOverrideService)); };
     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) {
@@ -900,7 +1283,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: 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) {
+        } }, standalone: false, features: [i0.ɵɵProvidersFeature([ComponentStudioStateService, ComponentVersionService]), i0.ɵɵInheritDefinitionFeature], decls: 44, vars: 25, 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, "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"], [3, "confirmed", "dismissed", "Visible", "ComponentName", "EntityName"], ["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"], [3, "Schema", "Canvas", "SelectedElementId", "SelectedSectionId"], [3, "ElementChanged", "SectionChanged", "ElementDeleted", "SectionDeleted", "FieldAdded", "Schema", "Canvas", "SelectedElementId", "SelectedSectionId"], [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()); });
@@ -934,26 +1317,28 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
             i0.ɵɵelementStart(22, "div", 20);
             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);
+            i0.ɵɵconditionalCreate(25, ComponentStudioDashboardComponent_Conditional_25_Template, 4, 3);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(27, "div", 24)(28, "div", 25)(29, "span", 26);
-            i0.ɵɵelement(30, "i", 27);
-            i0.ɵɵtext(31);
+            i0.ɵɵelementStart(26, "div", 22)(27, "div", 23)(28, "span", 24);
+            i0.ɵɵelement(29, "i", 25);
+            i0.ɵɵtext(30);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(32, "div", 28);
-            i0.ɵɵconditionalCreate(33, ComponentStudioDashboardComponent_Conditional_33_Template, 4, 4, "span", 26);
-            i0.ɵɵelementStart(34, "span", 29)(35, "kbd");
-            i0.ɵɵtext(36, "?");
+            i0.ɵɵelementStart(31, "div", 26);
+            i0.ɵɵconditionalCreate(32, ComponentStudioDashboardComponent_Conditional_32_Template, 4, 4, "span", 24);
+            i0.ɵɵelementStart(33, "span", 27)(34, "kbd");
+            i0.ɵɵtext(35, "?");
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(37, " Shortcuts ");
+            i0.ɵɵtext(36, " Shortcuts ");
             i0.ɵɵelementEnd()()();
-            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.ɵɵconditionalCreate(37, ComponentStudioDashboardComponent_Conditional_37_Template, 41, 0, "div", 28);
+            i0.ɵɵconditionalCreate(38, ComponentStudioDashboardComponent_Conditional_38_Template, 1, 1, "mj-new-component-dialog", 29);
+            i0.ɵɵconditionalCreate(39, ComponentStudioDashboardComponent_Conditional_39_Template, 1, 2, "mj-save-version-dialog", 30);
+            i0.ɵɵelementStart(40, "mj-form-override-dialog", 31);
+            i0.ɵɵlistener("confirmed", function ComponentStudioDashboardComponent_Template_mj_form_override_dialog_confirmed_40_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnFormOverrideDialogConfirm($event)); })("dismissed", function ComponentStudioDashboardComponent_Template_mj_form_override_dialog_dismissed_40_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnFormOverrideDialogDismiss()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(41, ComponentStudioDashboardComponent_Conditional_41_Template, 2, 3, "mj-dialog", 32);
+            i0.ɵɵconditionalCreate(42, ComponentStudioDashboardComponent_Conditional_42_Template, 1, 1, "app-artifact-load-dialog", 29);
+            i0.ɵɵconditionalCreate(43, ComponentStudioDashboardComponent_Conditional_43_Template, 1, 1, "app-artifact-selection-dialog", 29);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassProp("resizing", ctx.IsResizing);
@@ -975,19 +1360,19 @@ let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.state.SelectedComponent ? 23 : 24);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(!ctx.state.IsAIPanelCollapsed ? 25 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.state.IsAIPanelCollapsed ? 26 : -1);
+            i0.ɵɵconditional(!ctx.state.IsAIPanelCollapsed && ctx.state.SelectedComponent ? 25 : -1);
             i0.ɵɵadvance(5);
             i0.ɵɵtextInterpolate2(" ", ctx.state.FilteredComponents.length, " component", ctx.state.FilteredComponents.length !== 1 ? "s" : "", " ");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.LastSavedTime ? 33 : -1);
+            i0.ɵɵconditional(ctx.LastSavedTime ? 32 : -1);
             i0.ɵɵadvance(5);
-            i0.ɵɵconditional(ctx.ShowKeyboardShortcuts ? 38 : -1);
+            i0.ɵɵconditional(ctx.ShowKeyboardShortcuts ? 37 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowNewComponentDialog ? 38 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowNewComponentDialog ? 39 : -1);
+            i0.ɵɵconditional(ctx.ShowSaveVersionDialog ? 39 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowSaveVersionDialog ? 40 : -1);
+            i0.ɵɵproperty("Visible", ctx.ShowFormOverrideDialog)("ComponentName", ctx.PendingOverrideComponentName)("EntityName", ctx.PendingOverrideEntityName);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.ShowTextImportDialog ? 41 : -1);
             i0.ɵɵadvance();
@@ -1002,8 +1387,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\">\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: [{
+        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    <!-- Right panel \u2014 only renders when the user has actively selected a\n         component (form palette OR AI assistant). Showing an empty chat\n         against no component is more noise than help, so we collapse the\n         whole pane in that case. The collapse-button state is still\n         honored: user can also explicitly hide. -->\n    @if (!state.IsAIPanelCollapsed && state.SelectedComponent) {\n      <!-- Resize Handle: Center <-> Right -->\n      <div class=\"resize-handle\" (mousedown)=\"OnRightResizeStart($event)\"></div>\n      <div class=\"panel panel-right\" [style.width.px]=\"rightPanelWidth\">\n        @if (IsFormRoleComponent) {\n          <mj-form-builder-right-panel\n              [Schema]=\"state.FormSchema\"\n              [Canvas]=\"state.FormCanvas\"\n              [SelectedElementId]=\"state.FormSelectedElementId\"\n              [SelectedSectionId]=\"state.FormSelectedSectionId\"\n              (ElementChanged)=\"OnFormBuilderElementChanged($event)\"\n              (SectionChanged)=\"OnFormBuilderSectionChanged($event)\"\n              (ElementDeleted)=\"OnFormBuilderElementDeleted($event)\"\n              (SectionDeleted)=\"OnFormBuilderSectionDeleted($event)\"\n              (FieldAdded)=\"OnFormBuilderFieldAdded($event)\">\n          </mj-form-builder-right-panel>\n        } @else {\n          <mj-ai-assistant-panel></mj-ai-assistant-panel>\n        }\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  <!-- Post-save Override dialog for form-role Components. Fires after a\n       successful version save when the spec declares componentRole='form'\n       and the user has picked a target entity in the Field Binding inspector. -->\n  <mj-form-override-dialog\n    [Visible]=\"ShowFormOverrideDialog\"\n    [ComponentName]=\"PendingOverrideComponentName\"\n    [EntityName]=\"PendingOverrideEntityName\"\n    (confirmed)=\"OnFormOverrideDialogConfirm($event)\"\n    (dismissed)=\"OnFormOverrideDialogDismiss()\">\n  </mj-form-override-dialog>\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 }, { type: i4.EntityFormOverrideService }], { fileInput: [{
             type: ViewChild,
             args: ['fileInput', { static: false }]
         }], OnKeyDown: [{
@@ -1013,5 +1398,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: 52 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentStudioDashboardComponent, { className: "ComponentStudioDashboardComponent", filePath: "src/ComponentStudio/component-studio-dashboard.component.ts", lineNumber: 61 }); })();
 //# sourceMappingURL=component-studio-dashboard.component.js.map