@memberjunction/ng-core-entity-forms 6.2.0-edge.4 → 6.2.0-edge.6

package/dist/lib/shared/components/template-editor.component.js

@@ -1,6 +1,6 @@
 import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, inject } from '@angular/core';
 import { RunView } from '@memberjunction/core';
-import { MJEventType, MJGlobal } from '@memberjunction/global';
+import { EscapeSQLString, MJEventType, MJGlobal } from '@memberjunction/global';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
 import { IsDescendantElement } from '@memberjunction/ng-shared-generic';
 import { TemplateEngineBase } from '@memberjunction/templates-base-types';
@@ -14,195 +14,215 @@ import * as i1 from "@memberjunction/ng-notifications";
 import * as i2 from "@memberjunction/ng-ui-components";
 import * as i3 from "@angular/forms";
 import * as i4 from "@memberjunction/ng-code-editor";
+import * as i5 from "@memberjunction/ng-shared-generic";
 const _c0 = ["codeEditor"];
 const _forTrack0 = ($index, $item) => $item.ID || $index;
 const _forTrack1 = ($index, $item) => $item.category.name;
 const _forTrack2 = ($index, $item) => $item.name;
-function TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function TemplateEditorComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 2);
+} }
+function TemplateEditorComponent_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵelement(1, "i", 4);
+    i0.ɵɵelementStart(2, "h5");
+    i0.ɵɵtext(3, "Template contents could not be loaded");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Nothing is shown so nothing can be saved over contents that were not read.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 5);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_2_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.RefreshAndDiscardChanges()); });
+    i0.ɵɵelement(7, "i", 6);
+    i0.ɵɵtext(8, " Retry ");
+    i0.ɵɵelementEnd()();
+} }
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_0_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " \u2022 ");
-    i0.ɵɵelementStart(1, "span", 14);
+    i0.ɵɵelementStart(1, "span", 19);
     i0.ɵɵtext(2, "Inactive");
     i0.ɵɵelementEnd();
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 15);
-    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Conditional_7_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const ɵ$index_9_r2 = i0.ɵɵnextContext().$index; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.deleteTemplateContent(ɵ$index_9_r2); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "i", 16);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_0_For_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 20);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_0_For_3_Conditional_7_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const ɵ$index_29_r4 = i0.ɵɵnextContext().$index; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.deleteTemplateContent(ɵ$index_29_r4); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(1, "i", 21);
     i0.ɵɵelementEnd();
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 9);
-    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Template_div_click_0_listener() { const ɵ$index_9_r2 = i0.ɵɵrestoreView(_r1).$index; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectTemplateContent(ɵ$index_9_r2, false)); });
-    i0.ɵɵelementStart(1, "div", 10)(2, "div", 11);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_0_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_0_For_3_Template_div_click_0_listener() { const ɵ$index_29_r4 = i0.ɵɵrestoreView(_r3).$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.selectTemplateContent(ɵ$index_29_r4, false)); });
+    i0.ɵɵelementStart(1, "div", 15)(2, "div", 16);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 12);
+    i0.ɵɵelementStart(4, "div", 17);
     i0.ɵɵtext(5);
-    i0.ɵɵconditionalCreate(6, TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Conditional_6_Template, 3, 0);
+    i0.ɵɵconditionalCreate(6, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_0_For_3_Conditional_6_Template, 3, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(7, TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Conditional_7_Template, 2, 0, "button", 13);
+    i0.ɵɵconditionalCreate(7, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_0_For_3_Conditional_7_Template, 2, 0, "button", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const content_r5 = ctx.$implicit;
-    const ɵ$index_9_r2 = ctx.$index;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("active", ctx_r2.selectedContentIndex === ɵ$index_9_r2 && !ctx_r2.isAddingNewContent);
+    const content_r6 = ctx.$implicit;
+    const ɵ$index_29_r4 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("active", ctx_r1.selectedContentIndex === ɵ$index_29_r4 && !ctx_r1.isAddingNewContent);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", content_r5.Type || "Version " + (ɵ$index_9_r2 + 1), " ");
+    i0.ɵɵtextInterpolate1(" ", content_r6.TypeID ? ctx_r1.GetContentTypeDisplayText(content_r6.TypeID) : "Version " + (ɵ$index_29_r4 + 1), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" P:", content_r5.Priority, " ");
+    i0.ɵɵtextInterpolate1(" P:", content_r6.Priority, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!content_r5.IsActive ? 6 : -1);
+    i0.ɵɵconditional(!content_r6.IsActive ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.templateContents.length > 1 && ctx_r2.config.allowEdit ? 7 : -1);
+    i0.ɵɵconditional(ctx_r1.templateContents.length > 1 && ctx_r1.config.allowEdit ? 7 : -1);
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵelement(1, "i", 17);
-    i0.ɵɵelementStart(2, "span", 18);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵelement(1, "i", 22);
+    i0.ɵɵelementStart(2, "span", 23);
     i0.ɵɵtext(3, "New");
     i0.ɵɵelementEnd()();
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_1_Conditional_5_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.addNewTemplateContent()); });
-    i0.ɵɵelement(1, "i", 20);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_0_Conditional_5_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addNewTemplateContent()); });
+    i0.ɵɵelement(1, "i", 25);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "New");
     i0.ɵɵelementEnd()();
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2)(1, "div", 5);
-    i0.ɵɵrepeaterCreate(2, TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Template, 8, 6, "div", 6, _forTrack0);
-    i0.ɵɵconditionalCreate(4, TemplateEditorComponent_Conditional_0_Conditional_1_Conditional_4_Template, 4, 0, "div", 7);
-    i0.ɵɵconditionalCreate(5, TemplateEditorComponent_Conditional_0_Conditional_1_Conditional_5_Template, 4, 0, "div", 8);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7)(1, "div", 10);
+    i0.ɵɵrepeaterCreate(2, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_0_For_3_Template, 8, 6, "div", 11, _forTrack0);
+    i0.ɵɵconditionalCreate(4, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_0_Conditional_4_Template, 4, 0, "div", 12);
+    i0.ɵɵconditionalCreate(5, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_0_Conditional_5_Template, 4, 0, "div", 13);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r2.templateContents);
+    i0.ɵɵrepeater(ctx_r1.templateContents);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.isAddingNewContent ? 4 : -1);
+    i0.ɵɵconditional(ctx_r1.isAddingNewContent ? 4 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.config.allowEdit && !ctx_r2.isAddingNewContent ? 5 : -1);
+    i0.ɵɵconditional(ctx_r1.config.allowEdit && !ctx_r1.isAddingNewContent ? 5 : -1);
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-dropdown", 44);
-    i0.ɵɵtwoWayListener("ngModelChange", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_7_Template_mj_dropdown_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r2.currentTemplateContent.TypeID, $event) || (ctx_r2.currentTemplateContent.TypeID = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ValueChange", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_7_Template_mj_dropdown_ValueChange_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onContentTypeChange()); });
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dropdown", 49);
+    i0.ɵɵtwoWayListener("ngModelChange", function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_7_Template_mj_dropdown_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.currentTemplateContent.TypeID, $event) || (ctx_r1.currentTemplateContent.TypeID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ValueChange", function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_7_Template_mj_dropdown_ValueChange_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onContentTypeChange()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.currentTemplateContent.TypeID);
-    i0.ɵɵproperty("Data", ctx_r2.getContentTypeOptionsForContent())("ValuePrimitive", true);
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.currentTemplateContent.TypeID);
+    i0.ɵɵproperty("Data", ctx_r1.getContentTypeOptionsForContent())("ValuePrimitive", true);
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.getContentTypeDisplayText(ctx_r2.currentTemplateContent.TypeID), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getContentTypeDisplayText(ctx_r1.currentTemplateContent.TypeID), " ");
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-numeric-input", 45);
-    i0.ɵɵtwoWayListener("ngModelChange", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_13_Template_mj_numeric_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r2.currentTemplateContent.Priority, $event) || (ctx_r2.currentTemplateContent.Priority = $event); return i0.ɵɵresetView($event); });
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-numeric-input", 50);
+    i0.ɵɵtwoWayListener("ngModelChange", function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_13_Template_mj_numeric_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.currentTemplateContent.Priority, $event) || (ctx_r1.currentTemplateContent.Priority = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.currentTemplateContent.Priority);
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.currentTemplateContent.Priority);
     i0.ɵɵproperty("Min", 1)("Step", 1)("Format", "n0");
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.currentTemplateContent.Priority || "-", " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentTemplateContent.Priority || "-", " ");
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 33)(1, "input", 46);
-    i0.ɵɵtwoWayListener("ngModelChange", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_19_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r2.currentTemplateContent.IsActive, $event) || (ctx_r2.currentTemplateContent.IsActive = $event); return i0.ɵɵresetView($event); });
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 38)(1, "input", 51);
+    i0.ɵɵtwoWayListener("ngModelChange", function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_19_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.currentTemplateContent.IsActive, $event) || (ctx_r1.currentTemplateContent.IsActive = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "label", 47);
+    i0.ɵɵelementStart(2, "label", 52);
     i0.ɵɵtext(3, " Active ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.currentTemplateContent.IsActive);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.currentTemplateContent.IsActive);
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_20_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 48);
-    i0.ɵɵelement(1, "i", 50);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_20_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 53);
+    i0.ɵɵelement(1, "i", 55);
     i0.ɵɵtext(2, " Active ");
     i0.ɵɵelementEnd();
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_20_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 49);
-    i0.ɵɵelement(1, "i", 51);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_20_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 54);
+    i0.ɵɵelement(1, "i", 56);
     i0.ɵɵtext(2, " Inactive ");
     i0.ɵɵelementEnd();
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27);
-    i0.ɵɵconditionalCreate(1, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_20_Conditional_1_Template, 3, 0, "span", 48)(2, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_20_Conditional_2_Template, 3, 0, "span", 49);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵconditionalCreate(1, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_20_Conditional_1_Template, 3, 0, "span", 53)(2, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_20_Conditional_2_Template, 3, 0, "span", 54);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.currentTemplateContent.IsActive ? 1 : 2);
+    i0.ɵɵconditional(ctx_r1.currentTemplateContent.IsActive ? 1 : 2);
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " New ");
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.getContentTypeDisplayText(ctx_r2.currentTemplateContent.TypeID), " ");
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getContentTypeDisplayText(ctx_r1.currentTemplateContent.TypeID), " ");
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 40);
-    i0.ɵɵelement(1, "i", 52);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 45);
+    i0.ɵɵelement(1, "i", 57);
     i0.ɵɵtext(2, " Unsaved changes ");
     i0.ɵɵelementEnd();
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 54);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_31_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 59);
     i0.ɵɵtext(1, " Running... ");
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 55);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_31_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 60);
     i0.ɵɵtext(1, " Run ");
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 53);
-    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onRunTemplate()); });
-    i0.ɵɵconditionalCreate(1, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Conditional_1_Template, 2, 0)(2, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Conditional_2_Template, 2, 0);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 58);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_31_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onRunTemplate()); });
+    i0.ɵɵconditionalCreate(1, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_31_Conditional_1_Template, 2, 0)(2, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_31_Conditional_2_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("disabled", ctx_r2.isRunningTemplate);
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("disabled", ctx_r1.isRunningTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.isRunningTemplate ? 1 : 2);
+    i0.ɵɵconditional(ctx_r1.isRunningTemplate ? 1 : 2);
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 60)(1, "div", 62);
-    i0.ɵɵelement(2, "i", 63);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 65)(1, "div", 67);
+    i0.ɵɵelement(2, "i", 68);
     i0.ɵɵtext(3, " Template Syntax Quick Reference ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 64)(5, "div")(6, "div", 65)(7, "strong");
+    i0.ɵɵelementStart(4, "div", 69)(5, "div")(6, "div", 70)(7, "strong");
     i0.ɵɵtext(8, "Parameters:");
     i0.ɵɵelementEnd();
     i0.ɵɵelement(9, "br");
@@ -216,7 +236,7 @@ function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Cond
     i0.ɵɵelementStart(16, "code");
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(18, "div")(19, "div", 65)(20, "strong");
+    i0.ɵɵelementStart(18, "div")(19, "div", 70)(20, "strong");
     i0.ɵɵtext(21, "Conditionals:");
     i0.ɵɵelementEnd();
     i0.ɵɵelement(22, "br");
@@ -240,96 +260,96 @@ function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Cond
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate2("", "{% for item in items %}", " ... ", "{% endfor %}");
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_8_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 74);
-    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_8_Template_button_click_0_listener() { const categoryGroup_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.activePlaceholderCategory = categoryGroup_r14.category.name); });
-    i0.ɵɵelement(1, "i", 75);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Conditional_10_For_8_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 79);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Conditional_10_For_8_Template_button_click_0_listener() { const categoryGroup_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.activePlaceholderCategory = categoryGroup_r15.category.name); });
+    i0.ɵɵelement(1, "i", 80);
     i0.ɵɵtext(2);
-    i0.ɵɵelementStart(3, "span", 76);
+    i0.ɵɵelementStart(3, "span", 81);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const categoryGroup_r14 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(5);
-    i0.ɵɵclassProp("active", ctx_r2.activePlaceholderCategory === categoryGroup_r14.category.name);
+    const categoryGroup_r15 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(6);
+    i0.ɵɵclassProp("active", ctx_r1.activePlaceholderCategory === categoryGroup_r15.category.name);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap("fa-solid " + categoryGroup_r14.category.icon);
+    i0.ɵɵclassMap("fa-solid " + categoryGroup_r15.category.icon);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", categoryGroup_r14.category.name, " ");
+    i0.ɵɵtextInterpolate1(" ", categoryGroup_r15.category.name, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", categoryGroup_r14.placeholders.length, " ");
+    i0.ɵɵtextInterpolate1(" ", categoryGroup_r15.placeholders.length, " ");
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 85);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 90);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const placeholder_r16 = i0.ɵɵnextContext().$implicit;
+    const placeholder_r17 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(placeholder_r16.description);
+    i0.ɵɵtextInterpolate(placeholder_r17.description);
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 79)(1, "div", 80)(2, "div")(3, "div", 81)(4, "code", 82);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 84)(1, "div", 85)(2, "div")(3, "div", 86)(4, "code", 87);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 83);
-    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Template_button_click_6_listener() { const placeholder_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r2 = i0.ɵɵnextContext(7); return i0.ɵɵresetView(ctx_r2.copyPlaceholder(placeholder_r16.name)); });
-    i0.ɵɵelement(7, "i", 84);
+    i0.ɵɵelementStart(6, "button", 88);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Template_button_click_6_listener() { const placeholder_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r1 = i0.ɵɵnextContext(8); return i0.ɵɵresetView(ctx_r1.copyPlaceholder(placeholder_r17.name)); });
+    i0.ɵɵelement(7, "i", 89);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(8, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Conditional_8_Template, 2, 1, "div", 85);
+    i0.ɵɵconditionalCreate(8, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Conditional_8_Template, 2, 1, "div", 90);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const placeholder_r16 = ctx.$implicit;
+    const placeholder_r17 = ctx.$implicit;
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate3("", "{{", " ", placeholder_r16.name, " ", "}}");
+    i0.ɵɵtextInterpolate3("", "{{", " ", placeholder_r17.name, " ", "}}");
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(placeholder_r16.description ? 8 : -1);
+    i0.ɵɵconditional(placeholder_r17.description ? 8 : -1);
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 77);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Conditional_10_For_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 82);
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementStart(2, "h5");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 78);
-    i0.ɵɵrepeaterCreate(5, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Template, 9, 4, "div", 79, _forTrack2);
+    i0.ɵɵelementStart(4, "div", 83);
+    i0.ɵɵrepeaterCreate(5, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Template, 9, 4, "div", 84, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const categoryGroup_r17 = i0.ɵɵnextContext().$implicit;
+    const categoryGroup_r18 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵclassMap("fa-solid " + categoryGroup_r17.category.icon);
-    i0.ɵɵstyleProp("color", categoryGroup_r17.category.color);
+    i0.ɵɵclassMap("fa-solid " + categoryGroup_r18.category.icon);
+    i0.ɵɵstyleProp("color", categoryGroup_r18.category.color);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(categoryGroup_r17.category.name);
+    i0.ɵɵtextInterpolate(categoryGroup_r18.category.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(categoryGroup_r17.placeholders);
+    i0.ɵɵrepeater(categoryGroup_r18.placeholders);
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_Template, 7, 5);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Conditional_10_For_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Conditional_10_For_11_Conditional_0_Template, 7, 5);
 } if (rf & 2) {
-    const categoryGroup_r17 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(5);
-    i0.ɵɵconditional(ctx_r2.activePlaceholderCategory === categoryGroup_r17.category.name ? 0 : -1);
+    const categoryGroup_r18 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(6);
+    i0.ɵɵconditional(ctx_r1.activePlaceholderCategory === categoryGroup_r18.category.name ? 0 : -1);
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 61)(1, "div", 62);
-    i0.ɵɵelement(2, "i", 58);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 66)(1, "div", 67);
+    i0.ɵɵelement(2, "i", 63);
     i0.ɵɵtext(3, " System Placeholders Reference ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 66);
-    i0.ɵɵtext(5, " System placeholders are automatically available in all AI prompt templates. Simply use them in your template text and they will be replaced with their current values at execution time. ");
+    i0.ɵɵelementStart(4, "p", 71);
+    i0.ɵɵtext(5, " System placeholders are automatically available in all AI prompt templates. Simply use them in your template text and they will be replaced with their current values at execution time. Scoped prompt parts can use the Date & Time, User Context and Environment placeholders, written alone with no filter. A part is not a template: everything else in it is sent as written. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 67);
-    i0.ɵɵrepeaterCreate(7, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_8_Template, 5, 6, "button", 68, _forTrack1);
+    i0.ɵɵelementStart(6, "div", 72);
+    i0.ɵɵrepeaterCreate(7, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Conditional_10_For_8_Template, 5, 6, "button", 73, _forTrack1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 69);
-    i0.ɵɵrepeaterCreate(10, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Template, 1, 1, null, null, _forTrack1);
+    i0.ɵɵelementStart(9, "div", 74);
+    i0.ɵɵrepeaterCreate(10, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Conditional_10_For_11_Template, 1, 1, null, null, _forTrack1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "div", 70)(13, "div", 71);
-    i0.ɵɵelement(14, "i", 72);
-    i0.ɵɵelementStart(15, "div", 73)(16, "strong");
+    i0.ɵɵelementStart(12, "div", 75)(13, "div", 76);
+    i0.ɵɵelement(14, "i", 77);
+    i0.ɵɵelementStart(15, "div", 78)(16, "strong");
     i0.ɵɵtext(17, "Usage Example:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(18, " To use a system placeholder in your template, simply include it in double curly braces. For example: ");
@@ -337,132 +357,138 @@ function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Cond
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(7);
-    i0.ɵɵrepeater(ctx_r2.placeholderCategories);
+    i0.ɵɵrepeater(ctx_r1.placeholderCategories);
     i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r2.placeholderCategories);
+    i0.ɵɵrepeater(ctx_r1.placeholderCategories);
     i0.ɵɵadvance(10);
     i0.ɵɵtextInterpolate4("\"Today is ", "{{", " _CURRENT_DATE ", "}}", " and the current user is ", "{{", " _USER_NAME ", "}}", "\"");
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 43)(1, "div", 56)(2, "button", 57);
-    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.activeHelpTab = "syntax"); });
-    i0.ɵɵelement(3, "i", 37);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 48)(1, "div", 61)(2, "button", 62);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.activeHelpTab = "syntax"); });
+    i0.ɵɵelement(3, "i", 42);
     i0.ɵɵtext(4, " Template Syntax ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 57);
-    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.activeHelpTab = "placeholders"); });
-    i0.ɵɵelement(6, "i", 58);
+    i0.ɵɵelementStart(5, "button", 62);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.activeHelpTab = "placeholders"); });
+    i0.ɵɵelement(6, "i", 63);
     i0.ɵɵtext(7, " System Placeholders ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 59);
-    i0.ɵɵconditionalCreate(9, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_9_Template, 31, 7, "div", 60);
-    i0.ɵɵconditionalCreate(10, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_Template, 21, 4, "div", 61);
+    i0.ɵɵelementStart(8, "div", 64);
+    i0.ɵɵconditionalCreate(9, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Conditional_9_Template, 31, 7, "div", 65);
+    i0.ɵɵconditionalCreate(10, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Conditional_10_Template, 21, 4, "div", 66);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("active", ctx_r2.activeHelpTab === "syntax");
+    i0.ɵɵclassProp("active", ctx_r1.activeHelpTab === "syntax");
     i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("active", ctx_r2.activeHelpTab === "placeholders");
+    i0.ɵɵclassProp("active", ctx_r1.activeHelpTab === "placeholders");
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r2.activeHelpTab === "syntax" ? 9 : -1);
+    i0.ɵɵconditional(ctx_r1.activeHelpTab === "syntax" ? 9 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.activeHelpTab === "placeholders" ? 10 : -1);
+    i0.ɵɵconditional(ctx_r1.activeHelpTab === "placeholders" ? 10 : -1);
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 3)(1, "div", 21)(2, "div", 22)(3, "div", 23)(4, "label", 24);
-    i0.ɵɵelement(5, "i", 25);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8)(1, "div", 26)(2, "div", 27)(3, "div", 28)(4, "label", 29);
+    i0.ɵɵelement(5, "i", 30);
     i0.ɵɵtext(6, " Content Type ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_7_Template, 1, 3, "mj-dropdown", 26)(8, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_8_Template, 2, 1, "div", 27);
+    i0.ɵɵconditionalCreate(7, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_7_Template, 1, 3, "mj-dropdown", 31)(8, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_8_Template, 2, 1, "div", 32);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 23)(10, "label", 28);
-    i0.ɵɵelement(11, "i", 29);
+    i0.ɵɵelementStart(9, "div", 28)(10, "label", 33);
+    i0.ɵɵelement(11, "i", 34);
     i0.ɵɵtext(12, " Priority ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(13, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_13_Template, 1, 4, "mj-numeric-input", 30)(14, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_14_Template, 2, 1, "div", 27);
+    i0.ɵɵconditionalCreate(13, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_13_Template, 1, 4, "mj-numeric-input", 35)(14, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_14_Template, 2, 1, "div", 32);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 23)(16, "label", 31);
-    i0.ɵɵelement(17, "i", 32);
+    i0.ɵɵelementStart(15, "div", 28)(16, "label", 36);
+    i0.ɵɵelement(17, "i", 37);
     i0.ɵɵtext(18, " Status ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(19, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_19_Template, 4, 1, "div", 33)(20, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_20_Template, 3, 1, "div", 27);
+    i0.ɵɵconditionalCreate(19, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_19_Template, 4, 1, "div", 38)(20, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_20_Template, 3, 1, "div", 32);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(21, "div", 34)(22, "div", 35)(23, "label", 36);
-    i0.ɵɵelement(24, "i", 37);
+    i0.ɵɵelementStart(21, "div", 39)(22, "div", 40)(23, "label", 41);
+    i0.ɵɵelement(24, "i", 42);
     i0.ɵɵtext(25, " Template Content ");
-    i0.ɵɵelementStart(26, "span", 38);
-    i0.ɵɵconditionalCreate(27, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_27_Template, 1, 0)(28, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_28_Template, 1, 1);
+    i0.ɵɵelementStart(26, "span", 43);
+    i0.ɵɵconditionalCreate(27, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_27_Template, 1, 0)(28, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_28_Template, 1, 1);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(29, "div", 39);
-    i0.ɵɵconditionalCreate(30, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_30_Template, 3, 0, "span", 40);
-    i0.ɵɵconditionalCreate(31, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Template, 3, 2, "button", 41);
+    i0.ɵɵelementStart(29, "div", 44);
+    i0.ɵɵconditionalCreate(30, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_30_Template, 3, 0, "span", 45);
+    i0.ɵɵconditionalCreate(31, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_31_Template, 3, 2, "button", 46);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(32, "mj-code-editor", 42, 0);
-    i0.ɵɵlistener("change", function TemplateEditorComponent_Conditional_0_Conditional_2_Template_mj_code_editor_change_32_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onTemplateTextChange($event)); });
+    i0.ɵɵelementStart(32, "mj-code-editor", 47, 0);
+    i0.ɵɵlistener("change", function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Template_mj_code_editor_change_32_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onTemplateTextChange($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(34, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Template, 11, 6, "div", 43);
+    i0.ɵɵconditionalCreate(34, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_34_Template, 11, 6, "div", 48);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(7);
-    i0.ɵɵconditional(ctx_r2.config.allowEdit ? 7 : 8);
+    i0.ɵɵconditional(ctx_r1.config.allowEdit ? 7 : 8);
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r2.config.allowEdit ? 13 : 14);
+    i0.ɵɵconditional(ctx_r1.config.allowEdit ? 13 : 14);
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r2.config.allowEdit ? 19 : 20);
+    i0.ɵɵconditional(ctx_r1.config.allowEdit ? 19 : 20);
     i0.ɵɵadvance(7);
-    i0.ɵɵclassProp("new", !ctx_r2.currentTemplateContent.ID)("existing", !!ctx_r2.currentTemplateContent.ID);
+    i0.ɵɵclassProp("new", !ctx_r1.currentTemplateContent.ID)("existing", !!ctx_r1.currentTemplateContent.ID);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.currentTemplateContent.ID ? 27 : 28);
+    i0.ɵɵconditional(!ctx_r1.currentTemplateContent.ID ? 27 : 28);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(!ctx_r2.isAddingNewContent && ctx_r2.hasUnsavedChanges ? 30 : -1);
+    i0.ɵɵconditional(!ctx_r1.isAddingNewContent && ctx_r1.hasUnsavedChanges ? 30 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.template.IsSaved && ctx_r2.currentTemplateContent && ctx_r2.config.showRunButton ? 31 : -1);
+    i0.ɵɵconditional(ctx_r1.template.IsSaved && ctx_r1.currentTemplateContent && ctx_r1.config.showRunButton ? 31 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("readonly", !ctx_r2.config.allowEdit)("language", ctx_r2.getEditorLanguage())("languages", ctx_r2.supportedLanguages);
+    i0.ɵɵproperty("readonly", !ctx_r1.config.allowEdit)("language", ctx_r1.getEditorLanguage())("languages", ctx_r1.supportedLanguages);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(!ctx_r2.config.compactMode ? 34 : -1);
+    i0.ɵɵconditional(!ctx_r1.config.compactMode ? 34 : -1);
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 88);
-    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.addNewTemplateContent()); });
-    i0.ɵɵelement(1, "i", 20);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 93);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_2_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addNewTemplateContent()); });
+    i0.ɵɵelement(1, "i", 25);
     i0.ɵɵtext(2, " Create First Content Version ");
     i0.ɵɵelementEnd();
 } }
-function TemplateEditorComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵelement(1, "i", 86);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵelement(1, "i", 91);
     i0.ɵɵelementStart(2, "h5");
     i0.ɵɵtext(3, "No Template Content");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5, "Create your first template content version to get started.");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_6_Template, 3, 0, "button", 87);
+    i0.ɵɵconditionalCreate(6, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_2_Conditional_6_Template, 3, 0, "button", 92);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r2.config.allowEdit ? 6 : -1);
+    i0.ɵɵconditional(ctx_r1.config.allowEdit ? 6 : -1);
+} }
+function TemplateEditorComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_0_Template, 6, 2, "div", 7);
+    i0.ɵɵconditionalCreate(1, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_1_Template, 35, 14, "div", 8)(2, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_2_Template, 7, 1, "div", 9);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.templateContents.length > 0 ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.currentTemplateContent ? 1 : 2);
 } }
 function TemplateEditorComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵconditionalCreate(1, TemplateEditorComponent_Conditional_0_Conditional_1_Template, 6, 2, "div", 2);
-    i0.ɵɵconditionalCreate(2, TemplateEditorComponent_Conditional_0_Conditional_2_Template, 35, 14, "div", 3)(3, TemplateEditorComponent_Conditional_0_Conditional_3_Template, 7, 1, "div", 4);
+    i0.ɵɵconditionalCreate(1, TemplateEditorComponent_Conditional_0_Conditional_1_Template, 1, 0, "mj-loading", 2)(2, TemplateEditorComponent_Conditional_0_Conditional_2_Template, 9, 0, "div", 3)(3, TemplateEditorComponent_Conditional_0_Conditional_3_Template, 3, 2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.templateContents.length > 0 ? 1 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.currentTemplateContent ? 2 : 3);
+    i0.ɵɵconditional(ctx_r1.ContentsLoadState === "loading" ? 1 : ctx_r1.ContentsLoadState === "failed" ? 2 : 3);
 } }
 export class TemplateEditorComponent extends BaseAngularComponent {
     /** @deprecated Use {@link Template}. */
@@ -614,13 +640,29 @@ export class TemplateEditorComponent extends BaseAngularComponent {
         this.isUpdatingEditorValue = false;
         this.destroy$ = new Subject();
         this.activeTimeouts = [];
+        /**
+         * Incremented by every LoadTemplateContents() call. A load only applies its rows if it is still
+         * the latest one when its awaits resolve, so an older, slower load can never replace the array
+         * the user is editing (MJ#4754: the edited rows and the saved rows diverged that way).
+         */
+        this.loadGeneration = 0;
+        /** The Template the most recent load was started for; lets ngOnInit skip a duplicate load. */
+        this.loadStartedFor = null;
+        /**
+         * Where the bound Template's contents are. `TemplateContents` is only the user's real data in
+         * 'loaded': while 'loading' it is a placeholder the landing load replaces, and after 'failed' it
+         * is empty because the read failed, not because the template has no content. The template and
+         * every writer of `TemplateContents` key on this rather than on the array's length.
+         */
+        this.ContentsLoadState = 'idle';
         this.elementRef = inject(ElementRef);
     }
     async ngOnInit() {
         this.LoadContentTypes();
         this.organizePlaceholdersByCategory();
         this.listenForHostFormEvents();
-        if (this.Template) {
+        // ngOnChanges runs first and has usually started the load for this Template already.
+        if (this.Template && this.loadStartedFor !== this.Template) {
             await this.LoadTemplateContents();
         }
     }
@@ -647,13 +689,16 @@ export class TemplateEditorComponent extends BaseAngularComponent {
         });
     }
     async ngOnChanges(changes) {
-        if (changes['template']) {
+        // Hosts bind either the Template input or its deprecated `template` alias; Angular reports
+        // the change under whichever name was bound.
+        if (changes['Template'] || changes['template']) {
             // Template input has changed, reload contents
             if (this.Template) {
                 await this.LoadTemplateContents();
             }
             else {
                 // Template cleared, reset state
+                this.ContentsLoadState = 'idle';
                 this.TemplateContents = [];
                 this.SelectedContentIndex = 0;
                 this.IsAddingNewContent = false;
@@ -717,43 +762,84 @@ export class TemplateEditorComponent extends BaseAngularComponent {
         // Initial sync when view is ready
         this.syncEditorValue();
     }
+    /**
+     * (Re)loads the contents of the bound Template and emits them through {@link ContentChange}.
+     * This editor owns those rows: a host form folds them into its own save through
+     * {@link GetPendingChanges} (or calls {@link SaveTemplateContents}) rather than loading and saving
+     * a copy of its own. If several loads overlap, only the latest one applies.
+     */
     async LoadTemplateContents() {
-        if (this.Template) {
-            // Reset state first
-            this.TemplateContents = [];
-            this.SelectedContentIndex = 0;
-            this.IsAddingNewContent = false;
-            this.NewTemplateContent = null;
-            this.HasUnsavedChanges = false;
-            if (this.Template.IsSaved && this.Template.ID) {
-                // Load existing template contents for saved templates
-                try {
-                    const rv = RunView.FromMetadataProvider(this.ProviderToUse);
-                    const results = await rv.RunView({
-                        EntityName: 'MJ: Template Contents',
-                        ExtraFilter: `TemplateID='${this.Template.ID}'`,
-                        OrderBy: 'Priority ASC, __mj_CreatedAt ASC',
-                        ResultType: 'entity_object'
-                    });
-                    this.TemplateContents = results.Results;
-                }
-                catch (error) {
-                    console.error('Error loading template contents:', error);
-                }
-            }
-            // If we have contents but no selection, select the first one
-            if (this.TemplateContents.length > 0) {
-                this.SelectedContentIndex = 0;
+        const template = this.Template;
+        if (!template) {
+            return;
+        }
+        const generation = ++this.loadGeneration;
+        this.loadStartedFor = template;
+        this.ContentsLoadState = 'loading';
+        this.TemplateContents = [];
+        this.SelectedContentIndex = 0;
+        this.IsAddingNewContent = false;
+        this.NewTemplateContent = null;
+        this.HasUnsavedChanges = false;
+        const loaded = await this.fetchTemplateContents(template);
+        if (generation !== this.loadGeneration) {
+            return; // superseded by a newer load: its outcome, failure included, is not the user's
+        }
+        if ('failure' in loaded) {
+            // No default row and no empty state over a failed read: either would invite the user to
+            // create a row over contents we simply could not see. The template shows a retry instead.
+            this.reportLoadFailure(template, loaded.failure);
+            this.ContentsLoadState = 'failed';
+            // Hosts mirror the rows from ContentChange; tell them the rows they hold are gone.
+            this.ContentChange.emit(this.TemplateContents);
+            return;
+        }
+        // A saved template with no rows (or a new template) gets one default row, so the
+        // single-content case needs no "add" click.
+        let contents = loaded.rows;
+        if (contents.length === 0) {
+            const defaultContent = await this.buildDefaultTemplateContent(template);
+            if (generation !== this.loadGeneration) {
+                return;
             }
-            // If no template contents exist (either new template or saved template with no content), 
-            // create a default one for single-content optimization
-            if (this.TemplateContents.length === 0) {
-                await this.CreateDefaultTemplateContent();
+            contents = [defaultContent];
+        }
+        this.TemplateContents = contents;
+        this.ContentsLoadState = 'loaded';
+        this.syncEditorValue();
+        this.ContentChange.emit(this.TemplateContents);
+    }
+    reportLoadFailure(template, failure) {
+        console.error(`Failed to load template contents for template ${template.ID}: ${failure}`);
+        this.notificationService.CreateSimpleNotification(`Failed to load template contents: ${failure}`, 'error', 5000);
+    }
+    /**
+     * Reads the saved contents of a template: no rows for a template that is not saved yet, and the
+     * failure message when the read fails. It does not report the failure: only the caller knows
+     * whether this read is still the one the screen is waiting for.
+     */
+    async fetchTemplateContents(template) {
+        if (!template.IsSaved || !template.ID) {
+            return { rows: [] };
+        }
+        let failure;
+        try {
+            const rv = RunView.FromMetadataProvider(this.ProviderToUse);
+            const result = await rv.RunView({
+                EntityName: 'MJ: Template Contents',
+                ExtraFilter: `TemplateID='${EscapeSQLString(template.ID)}'`,
+                OrderBy: 'Priority ASC, __mj_CreatedAt ASC',
+                ResultType: 'entity_object'
+            });
+            if (result.Success) {
+                return { rows: result.Results };
             }
-            // Sync editor value after loading content
-            this.syncEditorValue();
-            this.ContentChange.emit(this.TemplateContents);
+            failure = result.ErrorMessage || 'unknown error';
+        }
+        catch (error) {
+            failure = error instanceof Error ? error.message : String(error);
         }
+        return { failure };
     }
     /** @deprecated Use {@link LoadTemplateContents}. */
     async loadTemplateContents() {
@@ -771,19 +857,26 @@ export class TemplateEditorComponent extends BaseAngularComponent {
         return this.RefreshAndDiscardChanges();
     }
     async CreateDefaultTemplateContent() {
+        if (!this.Template) {
+            throw new Error('TemplateEditorComponent.CreateDefaultTemplateContent: no Template is bound');
+        }
+        this.TemplateContents = [await this.buildDefaultTemplateContent(this.Template)];
+        this.SelectedContentIndex = 0;
+        // Sync editor value after creating default content
+        this.syncEditorValue();
+    }
+    /** Builds (does not save) the single content row a template starts with. */
+    async buildDefaultTemplateContent(template) {
         const defaultContent = await this._metadata.GetEntityObject('MJ: Template Contents');
-        defaultContent.TemplateID = this.Template.ID;
+        defaultContent.TemplateID = template.ID;
         defaultContent.Priority = 1;
         defaultContent.IsActive = true;
         // Set default to first real content type (skip "Select Type..." if it exists)
-        const validContentTypes = this.ContentTypeOptions.filter(option => option.value !== '');
+        const validContentTypes = this.GetContentTypeOptionsForContent();
         if (validContentTypes.length > 0) {
             defaultContent.TypeID = validContentTypes[0].value;
         }
-        this.TemplateContents = [defaultContent];
-        this.SelectedContentIndex = 0;
-        // Sync editor value after creating default content
-        this.syncEditorValue();
+        return defaultContent;
     }
     /** @deprecated Use {@link CreateDefaultTemplateContent}. */
     async createDefaultTemplateContent() {
@@ -836,9 +929,16 @@ export class TemplateEditorComponent extends BaseAngularComponent {
         return this.LoadContentTypes();
     }
     async AddNewTemplateContent() {
-        if (!this.config.allowEdit)
+        // While a load is in flight (or after it failed) TemplateContents is a placeholder: a row
+        // pushed onto it would vanish when the load lands. Re-checked after the await below.
+        if (!this.config.allowEdit || this.ContentsLoadState !== 'loaded')
             return;
-        this.NewTemplateContent = await this._metadata.GetEntityObject('MJ: Template Contents');
+        const generation = this.loadGeneration;
+        const newContent = await this._metadata.GetEntityObject('MJ: Template Contents');
+        if (this.ContentsLoadState !== 'loaded' || generation !== this.loadGeneration) {
+            return;
+        }
+        this.NewTemplateContent = newContent;
         this.NewTemplateContent.TemplateID = this.Template.ID;
         this.NewTemplateContent.Priority = this.TemplateContents.length + 1;
         this.NewTemplateContent.IsActive = true;
@@ -995,26 +1095,27 @@ export class TemplateEditorComponent extends BaseAngularComponent {
             }, 0);
         });
     }
+    /**
+     * Persists the new and changed content rows — the same instances the user edited here — in one
+     * transaction. Every failure is logged and shown to the user; the caller gets `false`.
+     */
     async SaveTemplateContents() {
         if (!this.config.allowEdit)
             return false;
+        const template = this.Template;
+        if (!template) {
+            console.error('TemplateEditorComponent.SaveTemplateContents: no Template is bound, nothing to save the contents against');
+            return false;
+        }
         try {
-            // Ensure FK is set on all contents, then persist the dirty/new ones atomically
+            // Ensure FK is set on all contents (a new template only has its ID once it is saved),
+            // then persist the dirty/new ones atomically
             for (const content of this.TemplateContents) {
-                content.TemplateID = this.Template.ID;
+                content.TemplateID = template.ID;
             }
             const toSave = this.TemplateContents.filter(c => c.Dirty || !c.ID);
-            if (toSave.length > 0) {
-                const tg = await this._metadata.CreateTransactionGroup();
-                for (const content of toSave) {
-                    content.TransactionGroup = tg;
-                    await content.Save();
-                }
-                const success = await tg.Submit();
-                if (!success) {
-                    console.error('Failed to save template contents transaction');
-                    return false;
-                }
+            if (toSave.length > 0 && !(await this.submitTemplateContents(template, toSave))) {
+                return false;
             }
             this.IsAddingNewContent = false;
             this.NewTemplateContent = null;
@@ -1023,10 +1124,48 @@ export class TemplateEditorComponent extends BaseAngularComponent {
             return true;
         }
         catch (error) {
-            console.error('Error saving template contents:', error);
+            this.reportSaveFailure(template, error instanceof Error ? error.message : String(error));
             return false;
         }
     }
+    async submitTemplateContents(template, toSave) {
+        const tg = await this._metadata.CreateTransactionGroup();
+        try {
+            for (const content of toSave) {
+                content.TransactionGroup = tg;
+                // Inside a transaction group Save() only queues the row; false here means it was
+                // refused before queueing (e.g. validation).
+                if (!(await content.Save())) {
+                    this.reportSaveFailure(template, this.describeContentFailure(content));
+                    return false;
+                }
+            }
+            if (await tg.Submit()) {
+                return true;
+            }
+            const failed = toSave.filter(c => c.LatestResult && !c.LatestResult.Success);
+            this.reportSaveFailure(template, failed.length > 0
+                ? failed.map(c => this.describeContentFailure(c)).join('; ')
+                : 'the transaction was rejected');
+            return false;
+        }
+        finally {
+            // A row that keeps this group would send its next Delete() into a completed group, which
+            // reports success without sending anything (the version would come back on reload).
+            for (const content of toSave) {
+                if (content.TransactionGroup === tg) {
+                    content.TransactionGroup = null;
+                }
+            }
+        }
+    }
+    describeContentFailure(content) {
+        return `content ${content.ID || '(new)'}: ${content.LatestResult?.CompleteMessage || 'unknown error'}`;
+    }
+    reportSaveFailure(template, detail) {
+        console.error(`Failed to save template contents for template ${template.ID}: ${detail}`);
+        this.notificationService.CreateSimpleNotification(`Failed to save template contents: ${detail}`, 'error', 5000);
+    }
     /**
      * The content rows a HOST FORM should persist inside its own save: every content that is new or
      * dirty, each stamped with the template's ID. Forms that embed this editor (Templates, AI Prompts)
@@ -1148,15 +1287,15 @@ export class TemplateEditorComponent extends BaseAngularComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.CodeEditor = _t.first);
-        } }, inputs: { Template: "Template", template: "template", config: "config" }, outputs: { ContentChange: "ContentChange", contentChange: "contentChange", RunTemplate: "RunTemplate", runTemplate: "runTemplate" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["codeEditor", ""], [1, "template-editor", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "content-versions-tabs"], [1, "content-editor-container"], [1, "no-content-state"], [1, "content-tabs"], [1, "content-version-tab", 3, "active"], [1, "content-version-tab", "adding-new"], ["title", "Add new template content", 1, "content-version-tab", "add-new"], [1, "content-version-tab", 3, "click"], [2, "flex", "1"], [1, "tab-label"], [1, "tab-meta"], ["type", "button", "title", "Delete this content version", 1, "delete-btn"], [1, "inactive-label"], ["type", "button", "title", "Delete this content version", 1, "delete-btn", 3, "click"], [1, "fa-solid", "fa-trash", "fa-xs"], [1, "fa-solid", "fa-plus", "text-success"], [1, "new-label"], ["title", "Add new template content", 1, "content-version-tab", "add-new", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "content-metadata-bar"], [1, "metadata-grid"], [1, "form-group"], ["for", "contentType", 1, "form-label"], [1, "fa-solid", "fa-tag"], ["name", "contentType", "TextField", "text", "ValueField", "value", 3, "ngModel", "Data", "ValuePrimitive"], [1, "form-control-plaintext"], ["for", "priority", 1, "form-label"], [1, "fa-solid", "fa-sort-numeric-up"], ["name", "priority", 3, "ngModel", "Min", "Step", "Format"], [1, "form-label"], [1, "fa-solid", "fa-toggle-on"], [1, "form-check"], [1, "content-text-editor"], [1, "editor-header"], ["for", "templateContent", 1, "editor-label"], [1, "fa-solid", "fa-code"], [1, "content-type-badge"], [1, "editor-actions"], [1, "unsaved-indicator"], ["type", "button", "title", "Test run this template", 1, "run-btn", 3, "disabled"], [1, "code-editor-wrapper", 3, "change", "readonly", "language", "languages"], [1, "template-help-section"], ["name", "contentType", "TextField", "text", "ValueField", "value", 3, "ngModelChange", "ValueChange", "ngModel", "Data", "ValuePrimitive"], ["name", "priority", 3, "ngModelChange", "ngModel", "Min", "Step", "Format"], ["type", "checkbox", "id", "isActive", "name", "isActive", 1, "form-check-input", 3, "ngModelChange", "ngModel"], ["for", "isActive", 1, "form-check-label"], [1, "badge-success"], [1, "badge-secondary"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-pause-circle"], [1, "fa-solid", "fa-circle"], ["type", "button", "title", "Test run this template", 1, "run-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-play"], [1, "help-tabs"], ["type", "button", 1, "help-tab", 3, "click"], [1, "fa-solid", "fa-at"], [1, "help-content"], [1, "syntax-help"], [1, "placeholders-help"], [1, "section-title"], [1, "fa-solid", "fa-lightbulb"], [1, "syntax-grid"], [1, "syntax-item"], [1, "placeholders-description"], [1, "category-tabs"], ["type", "button", 1, "category-tab", 3, "active"], [1, "placeholder-content"], [1, "usage-example"], [1, "usage-example-inner"], [1, "fa-solid", "fa-info-circle"], [1, "usage-example-text"], ["type", "button", 1, "category-tab", 3, "click"], [2, "font-size", "0.9em"], [1, "tab-badge"], [1, "category-header"], [1, "placeholder-grid"], [1, "placeholder-item"], [1, "placeholder-item-inner"], [1, "placeholder-name-row"], [1, "placeholder-code"], ["type", "button", "title", "Copy placeholder to clipboard", 1, "copy-btn", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "placeholder-description"], [1, "fa-solid", "fa-file-plus"], ["type", "button", 1, "btn", "btn-primary"], ["type", "button", 1, "btn", "btn-primary", 3, "click"]], template: function TemplateEditorComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, TemplateEditorComponent_Conditional_0_Template, 4, 2, "div", 1);
+        } }, inputs: { Template: "Template", template: "template", config: "config" }, outputs: { ContentChange: "ContentChange", contentChange: "contentChange", RunTemplate: "RunTemplate", runTemplate: "runTemplate" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["codeEditor", ""], [1, "template-editor", 2, "height", "100%", "display", "flex", "flex-direction", "column"], ["text", "Loading template contents...", "size", "medium"], [1, "contents-load-failed"], [1, "fa-solid", "fa-triangle-exclamation"], ["type", "button", "mjButton", "", "variant", "secondary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-rotate-right"], [1, "content-versions-tabs"], [1, "content-editor-container"], [1, "no-content-state"], [1, "content-tabs"], [1, "content-version-tab", 3, "active"], [1, "content-version-tab", "adding-new"], ["title", "Add new template content", 1, "content-version-tab", "add-new"], [1, "content-version-tab", 3, "click"], [2, "flex", "1"], [1, "tab-label"], [1, "tab-meta"], ["type", "button", "title", "Delete this content version", 1, "delete-btn"], [1, "inactive-label"], ["type", "button", "title", "Delete this content version", 1, "delete-btn", 3, "click"], [1, "fa-solid", "fa-trash", "fa-xs"], [1, "fa-solid", "fa-plus", "text-success"], [1, "new-label"], ["title", "Add new template content", 1, "content-version-tab", "add-new", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "content-metadata-bar"], [1, "metadata-grid"], [1, "form-group"], ["for", "contentType", 1, "form-label"], [1, "fa-solid", "fa-tag"], ["name", "contentType", "TextField", "text", "ValueField", "value", 3, "ngModel", "Data", "ValuePrimitive"], [1, "form-control-plaintext"], ["for", "priority", 1, "form-label"], [1, "fa-solid", "fa-sort-numeric-up"], ["name", "priority", 3, "ngModel", "Min", "Step", "Format"], [1, "form-label"], [1, "fa-solid", "fa-toggle-on"], [1, "form-check"], [1, "content-text-editor"], [1, "editor-header"], ["for", "templateContent", 1, "editor-label"], [1, "fa-solid", "fa-code"], [1, "content-type-badge"], [1, "editor-actions"], [1, "unsaved-indicator"], ["type", "button", "title", "Test run this template", 1, "run-btn", 3, "disabled"], [1, "code-editor-wrapper", 3, "change", "readonly", "language", "languages"], [1, "template-help-section"], ["name", "contentType", "TextField", "text", "ValueField", "value", 3, "ngModelChange", "ValueChange", "ngModel", "Data", "ValuePrimitive"], ["name", "priority", 3, "ngModelChange", "ngModel", "Min", "Step", "Format"], ["type", "checkbox", "id", "isActive", "name", "isActive", 1, "form-check-input", 3, "ngModelChange", "ngModel"], ["for", "isActive", 1, "form-check-label"], [1, "badge-success"], [1, "badge-secondary"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-pause-circle"], [1, "fa-solid", "fa-circle"], ["type", "button", "title", "Test run this template", 1, "run-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-play"], [1, "help-tabs"], ["type", "button", 1, "help-tab", 3, "click"], [1, "fa-solid", "fa-at"], [1, "help-content"], [1, "syntax-help"], [1, "placeholders-help"], [1, "section-title"], [1, "fa-solid", "fa-lightbulb"], [1, "syntax-grid"], [1, "syntax-item"], [1, "placeholders-description"], [1, "category-tabs"], ["type", "button", 1, "category-tab", 3, "active"], [1, "placeholder-content"], [1, "usage-example"], [1, "usage-example-inner"], [1, "fa-solid", "fa-info-circle"], [1, "usage-example-text"], ["type", "button", 1, "category-tab", 3, "click"], [2, "font-size", "0.9em"], [1, "tab-badge"], [1, "category-header"], [1, "placeholder-grid"], [1, "placeholder-item"], [1, "placeholder-item-inner"], [1, "placeholder-name-row"], [1, "placeholder-code"], ["type", "button", "title", "Copy placeholder to clipboard", 1, "copy-btn", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "placeholder-description"], [1, "fa-solid", "fa-file-plus"], ["type", "button", 1, "btn", "btn-primary"], ["type", "button", 1, "btn", "btn-primary", 3, "click"]], template: function TemplateEditorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, TemplateEditorComponent_Conditional_0_Template, 4, 1, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.template ? 0 : -1);
-        } }, dependencies: [i3.CheckboxControlValueAccessor, i3.NgControlStatus, i3.NgModel, i2.MJDropdownComponent, i2.MJNumericInputComponent, i4.CodeEditorComponent], styles: [".template-editor[_ngcontent-%COMP%] {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n.section-header[_ngcontent-%COMP%]   h6[_ngcontent-%COMP%] {\n    font-size: 0.9em;\n}\n\n.param-row[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n}\n\n.content-item[_ngcontent-%COMP%] {\n    transition: box-shadow 0.2s ease;\n}\n\n.content-item[_ngcontent-%COMP%]:hover {\n    box-shadow: 0 2px 4px var(--mj-shadow-sm);\n}\n\n.loading-state[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n}\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-block;\n    font-size: 0.7em;\n    line-height: 1;\n}\n\n\n.template-editor[_ngcontent-%COMP%]   .mj-input[_ngcontent-%COMP%], \n.template-editor[_ngcontent-%COMP%]   .mj-textarea[_ngcontent-%COMP%], \n.template-editor[_ngcontent-%COMP%]   mj-dropdown[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.template-editor[_ngcontent-%COMP%]   [mjButton][_ngcontent-%COMP%] {\n    min-width: auto;\n}\n\n\n.content-versions-tabs[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n    border-bottom: 2px solid var(--mj-border-default);\n    padding-bottom: 8px;\n}\n\n.content-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.content-version-tab[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 6px;\n    cursor: pointer;\n    background: var(--mj-bg-surface);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.content-version-tab.active[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.content-version-tab[_ngcontent-%COMP%]   .tab-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 0.85em;\n    color: var(--mj-text-secondary);\n}\n\n.content-version-tab[_ngcontent-%COMP%]   .tab-meta[_ngcontent-%COMP%] {\n    font-size: 0.7em;\n    color: var(--mj-text-muted);\n}\n\n.content-version-tab[_ngcontent-%COMP%]   .tab-meta[_ngcontent-%COMP%]   .inactive-label[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.content-version-tab[_ngcontent-%COMP%]   .delete-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    color: var(--mj-status-error);\n    padding: 4px;\n    border-radius: 3px;\n    transition: all 0.2s;\n    cursor: pointer;\n}\n\n.content-version-tab[_ngcontent-%COMP%]   .delete-btn[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n}\n\n\n.content-version-tab.adding-new[_ngcontent-%COMP%] {\n    border-color: var(--mj-status-success);\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.content-version-tab.adding-new[_ngcontent-%COMP%]   .new-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-status-success);\n    font-size: 0.85em;\n}\n\n\n.content-version-tab.add-new[_ngcontent-%COMP%] {\n    border: 1px dashed var(--mj-status-success);\n    background: var(--mj-bg-surface-card);\n}\n\n.content-version-tab.add-new[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 8%, var(--mj-bg-surface));\n    border-style: solid;\n}\n\n.content-version-tab.add-new[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    font-size: 0.75em;\n}\n\n.content-version-tab.add-new[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--mj-status-success);\n    font-size: 0.85em;\n}\n\n\n.content-editor-container[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n\n.content-metadata-bar[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    padding: 16px 20px;\n}\n\n.metadata-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 2fr 1fr 1fr auto;\n    gap: 20px;\n    align-items: end;\n}\n\n.form-group[_ngcontent-%COMP%] {\n    margin: 0;\n}\n\n.form-label[_ngcontent-%COMP%] {\n    margin-bottom: 4px;\n    font-size: 0.9em;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.form-control-plaintext[_ngcontent-%COMP%] {\n    font-size: 0.9em;\n    padding: 4px 0;\n}\n\n.form-check[_ngcontent-%COMP%] {\n    margin-top: 8px;\n}\n\n.form-check-label[_ngcontent-%COMP%] {\n    font-size: 0.9em;\n}\n\n.badge-success[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 3px 8px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    font-weight: 600;\n}\n\n.badge-secondary[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n    color: var(--mj-text-muted);\n    border: 1px solid color-mix(in srgb, var(--mj-text-muted) 30%, transparent);\n    padding: 3px 8px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    font-weight: 600;\n}\n\n\n.content-text-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n}\n\n.editor-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 12px;\n}\n\n.editor-label[_ngcontent-%COMP%] {\n    margin: 0;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.content-type-badge[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 0.75em;\n    color: var(--mj-text-inverse);\n}\n\n.content-type-badge.new[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n}\n\n.content-type-badge.existing[_ngcontent-%COMP%] {\n    background: var(--mj-text-muted);\n}\n\n.editor-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.unsaved-indicator[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 0.85em;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.unsaved-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.5em;\n}\n\n.run-btn[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 6px 12px;\n    border-radius: 4px;\n    font-size: 0.85em;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    cursor: pointer;\n}\n\n.run-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n\n.code-editor-wrapper[_ngcontent-%COMP%] {\n    flex: 1;\n    height: 350px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 4px;\n}\n\n\n.template-help-section[_ngcontent-%COMP%] {\n    margin-top: 16px;\n}\n\n.help-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    border-bottom: 2px solid var(--mj-border-default);\n    margin-bottom: 0;\n}\n\n.help-tab[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    border: none;\n    background: none;\n    cursor: pointer;\n    font-size: 0.9em;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    border-bottom: 3px solid transparent;\n    transition: all 0.2s;\n}\n\n.help-tab.active[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    border-bottom-color: var(--mj-status-success);\n}\n\n\n.help-content[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-top: none;\n    border-radius: 0 0 4px 4px;\n}\n\n\n.syntax-help[_ngcontent-%COMP%] {\n    font-size: 0.85em;\n}\n\n.syntax-help[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%] {\n    font-weight: 600;\n    margin-bottom: 12px;\n    color: var(--mj-status-success);\n}\n\n.syntax-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n}\n\n.syntax-item[_ngcontent-%COMP%] {\n    margin-bottom: 8px;\n}\n\n.syntax-help[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    padding: 4px 6px;\n    border-radius: 3px;\n    display: inline-block;\n    margin-top: 4px;\n    color: var(--mj-text-primary);\n}\n\n\n.placeholders-help[_ngcontent-%COMP%] {\n    font-size: 0.85em;\n}\n\n.placeholders-help[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%] {\n    font-weight: 600;\n    margin-bottom: 12px;\n    color: var(--mj-status-success);\n}\n\n.placeholders-description[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n}\n\n\n.category-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n}\n\n.category-tab[_ngcontent-%COMP%] {\n    padding: 6px 14px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    border-radius: 20px;\n    cursor: pointer;\n    font-size: 0.85em;\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    color: var(--mj-text-muted);\n}\n\n.category-tab.active[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.category-tab[_ngcontent-%COMP%]   .tab-badge[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n    color: inherit;\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    margin-left: 4px;\n}\n\n\n.placeholder-content[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.category-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 16px;\n}\n\n.category-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 1.2em;\n}\n\n.category-header[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n}\n\n.placeholder-grid[_ngcontent-%COMP%] {\n    display: grid;\n    gap: 10px;\n}\n\n\n.placeholder-item[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    position: relative;\n    transition: all 0.2s;\n    max-width: 800px;\n}\n\n.placeholder-item[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.placeholder-item[_ngcontent-%COMP%]:hover   .copy-btn[_ngcontent-%COMP%] {\n    opacity: 1 !important;\n}\n\n.placeholder-item-inner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.placeholder-name-row[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.placeholder-code[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    font-weight: 600;\n    font-size: 0.95em;\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n    opacity: 0;\n    transition: opacity 0.2s;\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    cursor: pointer;\n    color: var(--mj-brand-primary);\n    border-radius: 4px;\n    display: inline-flex;\n    align-items: center;\n}\n\n.copy-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.copy-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.85em;\n}\n\n.placeholder-description[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    margin-top: 4px;\n    line-height: 1.4;\n}\n\n\n.usage-example[_ngcontent-%COMP%] {\n    margin-top: 20px;\n    padding: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-radius: 6px;\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.usage-example-inner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.usage-example[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.usage-example-text[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 0.85em;\n    color: var(--mj-brand-primary);\n    line-height: 1.5;\n}\n\n.usage-example[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    padding: 2px 4px;\n    border-radius: 3px;\n}\n\n\n.no-content-state[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\n    border-radius: 8px;\n    padding: 40px;\n    text-align: center;\n}\n\n.no-content-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 16px;\n    color: var(--mj-text-muted);\n    opacity: 0.6;\n}\n\n.no-content-state[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.no-content-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    margin-bottom: 20px;\n}"] }); }
+        } }, dependencies: [i3.CheckboxControlValueAccessor, i3.NgControlStatus, i3.NgModel, i2.MJButtonDirective, i2.MJDropdownComponent, i2.MJNumericInputComponent, i4.CodeEditorComponent, i5.LoadingComponent], styles: [".template-editor[_ngcontent-%COMP%] {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n.section-header[_ngcontent-%COMP%]   h6[_ngcontent-%COMP%] {\n    font-size: 0.9em;\n}\n\n.param-row[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n}\n\n.content-item[_ngcontent-%COMP%] {\n    transition: box-shadow 0.2s ease;\n}\n\n.content-item[_ngcontent-%COMP%]:hover {\n    box-shadow: 0 2px 4px var(--mj-shadow-sm);\n}\n\n.loading-state[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n}\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-block;\n    font-size: 0.7em;\n    line-height: 1;\n}\n\n\n.template-editor[_ngcontent-%COMP%]   .mj-input[_ngcontent-%COMP%], \n.template-editor[_ngcontent-%COMP%]   .mj-textarea[_ngcontent-%COMP%], \n.template-editor[_ngcontent-%COMP%]   mj-dropdown[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.template-editor[_ngcontent-%COMP%]   [mjButton][_ngcontent-%COMP%] {\n    min-width: auto;\n}\n\n\n.content-versions-tabs[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n    border-bottom: 2px solid var(--mj-border-default);\n    padding-bottom: 8px;\n}\n\n.content-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.content-version-tab[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 6px;\n    cursor: pointer;\n    background: var(--mj-bg-surface);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.content-version-tab.active[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.content-version-tab[_ngcontent-%COMP%]   .tab-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 0.85em;\n    color: var(--mj-text-secondary);\n}\n\n.content-version-tab[_ngcontent-%COMP%]   .tab-meta[_ngcontent-%COMP%] {\n    font-size: 0.7em;\n    color: var(--mj-text-muted);\n}\n\n.content-version-tab[_ngcontent-%COMP%]   .tab-meta[_ngcontent-%COMP%]   .inactive-label[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.content-version-tab[_ngcontent-%COMP%]   .delete-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    color: var(--mj-status-error);\n    padding: 4px;\n    border-radius: 3px;\n    transition: all 0.2s;\n    cursor: pointer;\n}\n\n.content-version-tab[_ngcontent-%COMP%]   .delete-btn[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n}\n\n\n.content-version-tab.adding-new[_ngcontent-%COMP%] {\n    border-color: var(--mj-status-success);\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.content-version-tab.adding-new[_ngcontent-%COMP%]   .new-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-status-success);\n    font-size: 0.85em;\n}\n\n\n.content-version-tab.add-new[_ngcontent-%COMP%] {\n    border: 1px dashed var(--mj-status-success);\n    background: var(--mj-bg-surface-card);\n}\n\n.content-version-tab.add-new[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 8%, var(--mj-bg-surface));\n    border-style: solid;\n}\n\n.content-version-tab.add-new[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    font-size: 0.75em;\n}\n\n.content-version-tab.add-new[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--mj-status-success);\n    font-size: 0.85em;\n}\n\n\n.content-editor-container[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n\n.content-metadata-bar[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    padding: 16px 20px;\n}\n\n.metadata-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 2fr 1fr 1fr auto;\n    gap: 20px;\n    align-items: end;\n}\n\n.form-group[_ngcontent-%COMP%] {\n    margin: 0;\n}\n\n.form-label[_ngcontent-%COMP%] {\n    margin-bottom: 4px;\n    font-size: 0.9em;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.form-control-plaintext[_ngcontent-%COMP%] {\n    font-size: 0.9em;\n    padding: 4px 0;\n}\n\n.form-check[_ngcontent-%COMP%] {\n    margin-top: 8px;\n}\n\n.form-check-label[_ngcontent-%COMP%] {\n    font-size: 0.9em;\n}\n\n.badge-success[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 3px 8px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    font-weight: 600;\n}\n\n.badge-secondary[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n    color: var(--mj-text-muted);\n    border: 1px solid color-mix(in srgb, var(--mj-text-muted) 30%, transparent);\n    padding: 3px 8px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    font-weight: 600;\n}\n\n\n.content-text-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n}\n\n.editor-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 12px;\n}\n\n.editor-label[_ngcontent-%COMP%] {\n    margin: 0;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.content-type-badge[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 0.75em;\n    color: var(--mj-text-inverse);\n}\n\n.content-type-badge.new[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n}\n\n.content-type-badge.existing[_ngcontent-%COMP%] {\n    background: var(--mj-text-muted);\n}\n\n.editor-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.unsaved-indicator[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 0.85em;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.unsaved-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.5em;\n}\n\n.run-btn[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 6px 12px;\n    border-radius: 4px;\n    font-size: 0.85em;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    cursor: pointer;\n}\n\n.run-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n\n.code-editor-wrapper[_ngcontent-%COMP%] {\n    flex: 1;\n    height: 350px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 4px;\n}\n\n\n.template-help-section[_ngcontent-%COMP%] {\n    margin-top: 16px;\n}\n\n.help-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    border-bottom: 2px solid var(--mj-border-default);\n    margin-bottom: 0;\n}\n\n.help-tab[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    border: none;\n    background: none;\n    cursor: pointer;\n    font-size: 0.9em;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    border-bottom: 3px solid transparent;\n    transition: all 0.2s;\n}\n\n.help-tab.active[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    border-bottom-color: var(--mj-status-success);\n}\n\n\n.help-content[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-top: none;\n    border-radius: 0 0 4px 4px;\n}\n\n\n.syntax-help[_ngcontent-%COMP%] {\n    font-size: 0.85em;\n}\n\n.syntax-help[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%] {\n    font-weight: 600;\n    margin-bottom: 12px;\n    color: var(--mj-status-success);\n}\n\n.syntax-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n}\n\n.syntax-item[_ngcontent-%COMP%] {\n    margin-bottom: 8px;\n}\n\n.syntax-help[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    padding: 4px 6px;\n    border-radius: 3px;\n    display: inline-block;\n    margin-top: 4px;\n    color: var(--mj-text-primary);\n}\n\n\n.placeholders-help[_ngcontent-%COMP%] {\n    font-size: 0.85em;\n}\n\n.placeholders-help[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%] {\n    font-weight: 600;\n    margin-bottom: 12px;\n    color: var(--mj-status-success);\n}\n\n.placeholders-description[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n}\n\n\n.category-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n}\n\n.category-tab[_ngcontent-%COMP%] {\n    padding: 6px 14px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    border-radius: 20px;\n    cursor: pointer;\n    font-size: 0.85em;\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    color: var(--mj-text-muted);\n}\n\n.category-tab.active[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.category-tab[_ngcontent-%COMP%]   .tab-badge[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n    color: inherit;\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    margin-left: 4px;\n}\n\n\n.placeholder-content[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.category-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 16px;\n}\n\n.category-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 1.2em;\n}\n\n.category-header[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n}\n\n.placeholder-grid[_ngcontent-%COMP%] {\n    display: grid;\n    gap: 10px;\n}\n\n\n.placeholder-item[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    position: relative;\n    transition: all 0.2s;\n    max-width: 800px;\n}\n\n.placeholder-item[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.placeholder-item[_ngcontent-%COMP%]:hover   .copy-btn[_ngcontent-%COMP%] {\n    opacity: 1 !important;\n}\n\n.placeholder-item-inner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.placeholder-name-row[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.placeholder-code[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    font-weight: 600;\n    font-size: 0.95em;\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n    opacity: 0;\n    transition: opacity 0.2s;\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    cursor: pointer;\n    color: var(--mj-brand-primary);\n    border-radius: 4px;\n    display: inline-flex;\n    align-items: center;\n}\n\n.copy-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.copy-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.85em;\n}\n\n.placeholder-description[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    margin-top: 4px;\n    line-height: 1.4;\n}\n\n\n.usage-example[_ngcontent-%COMP%] {\n    margin-top: 20px;\n    padding: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-radius: 6px;\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.usage-example-inner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.usage-example[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.usage-example-text[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 0.85em;\n    color: var(--mj-brand-primary);\n    line-height: 1.5;\n}\n\n.usage-example[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    padding: 2px 4px;\n    border-radius: 3px;\n}\n\n\n.no-content-state[_ngcontent-%COMP%], \n.contents-load-failed[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\n    border-radius: 8px;\n    padding: 40px;\n    text-align: center;\n}\n\n.no-content-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.contents-load-failed[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 16px;\n    color: var(--mj-text-muted);\n    opacity: 0.6;\n}\n\n.no-content-state[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%], \n.contents-load-failed[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.no-content-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], \n.contents-load-failed[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    margin-bottom: 20px;\n}\n\n.contents-load-failed[_ngcontent-%COMP%] {\n    border-color: var(--mj-status-error);\n}\n\n\n.contents-load-failed[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    opacity: 1;\n}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TemplateEditorComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-template-editor', template: "@if (template) {\n  <div class=\"template-editor\" style=\"height: 100%; display: flex; flex-direction: column;\">\n    <!-- Content Versions List/Tabs -->\n    @if (templateContents.length > 0) {\n      <div class=\"content-versions-tabs\">\n        <div class=\"content-tabs\">\n          @for (content of templateContents; track content.ID || $index; let i = $index) {\n            <div class=\"content-version-tab\"\n              [class.active]=\"selectedContentIndex === i && !isAddingNewContent\"\n              (click)=\"selectTemplateContent(i, false)\">\n              <div style=\"flex: 1;\">\n                <div class=\"tab-label\">\n                  {{ content.Type || 'Version ' + (i + 1) }}\n                </div>\n                <div class=\"tab-meta\">\n                  P:{{ content.Priority }}\n                  @if (!content.IsActive) {\n                    \u2022 <span class=\"inactive-label\">Inactive</span>\n                  }\n                </div>\n              </div>\n              @if (templateContents.length > 1 && config.allowEdit) {\n                <button type=\"button\"\n                  (click)=\"deleteTemplateContent(i); $event.stopPropagation()\"\n                  class=\"delete-btn\"\n                  title=\"Delete this content version\">\n                  <i class=\"fa-solid fa-trash fa-xs\"></i>\n                </button>\n              }\n            </div>\n          }\n          @if (isAddingNewContent) {\n            <div class=\"content-version-tab adding-new\">\n              <i class=\"fa-solid fa-plus text-success\"></i>\n              <span class=\"new-label\">New</span>\n            </div>\n          }\n          <!-- Add New Content (Edit Mode Only) -->\n          @if (config.allowEdit && !isAddingNewContent) {\n            <div class=\"content-version-tab add-new\"\n              (click)=\"addNewTemplateContent()\"\n              title=\"Add new template content\">\n              <i class=\"fa-solid fa-plus\"></i>\n              <span>New</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n    <!-- Content Editor -->\n    @if (currentTemplateContent) {\n      <div class=\"content-editor-container\">\n        <!-- Content Metadata Bar -->\n        <div class=\"content-metadata-bar\">\n          <div class=\"metadata-grid\">\n            <div class=\"form-group\">\n              <label for=\"contentType\" class=\"form-label\">\n                <i class=\"fa-solid fa-tag\"></i> Content Type\n              </label>\n              @if (config.allowEdit) {\n                <mj-dropdown [(ngModel)]=\"currentTemplateContent.TypeID\"\n                  name=\"contentType\"\n                  [Data]=\"getContentTypeOptionsForContent()\"\n                  TextField=\"text\"\n                  ValueField=\"value\"\n                  [ValuePrimitive]=\"true\"\n                  (ValueChange)=\"onContentTypeChange()\">\n                </mj-dropdown>\n              } @else {\n                <div class=\"form-control-plaintext\">\n                  {{ getContentTypeDisplayText(currentTemplateContent.TypeID) }}\n                </div>\n              }\n            </div>\n            <div class=\"form-group\">\n              <label for=\"priority\" class=\"form-label\">\n                <i class=\"fa-solid fa-sort-numeric-up\"></i> Priority\n              </label>\n              @if (config.allowEdit) {\n                <mj-numeric-input [(ngModel)]=\"currentTemplateContent.Priority\"\n                  name=\"priority\"\n                  [Min]=\"1\"\n                  [Step]=\"1\"\n                  [Format]=\"'n0'\">\n                </mj-numeric-input>\n              } @else {\n                <div class=\"form-control-plaintext\">\n                  {{ currentTemplateContent.Priority || '-' }}\n                </div>\n              }\n            </div>\n            <div class=\"form-group\">\n              <label class=\"form-label\">\n                <i class=\"fa-solid fa-toggle-on\"></i> Status\n              </label>\n              @if (config.allowEdit) {\n                <div class=\"form-check\">\n                  <input type=\"checkbox\"\n                    id=\"isActive\"\n                    class=\"form-check-input\"\n                    [(ngModel)]=\"currentTemplateContent.IsActive\"\n                    name=\"isActive\">\n                  <label class=\"form-check-label\" for=\"isActive\">\n                    Active\n                  </label>\n                </div>\n              } @else {\n                <div class=\"form-control-plaintext\">\n                  @if (currentTemplateContent.IsActive) {\n                    <span class=\"badge-success\">\n                      <i class=\"fa-solid fa-check-circle\"></i> Active\n                    </span>\n                  } @else {\n                    <span class=\"badge-secondary\">\n                      <i class=\"fa-solid fa-pause-circle\"></i> Inactive\n                    </span>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <!-- Content Text Editor -->\n        <div class=\"content-text-editor\">\n          <div class=\"editor-header\">\n            <label for=\"templateContent\" class=\"editor-label\">\n              <i class=\"fa-solid fa-code\"></i> Template Content\n              <span class=\"content-type-badge\"\n                [class.new]=\"!currentTemplateContent.ID\"\n                [class.existing]=\"!!currentTemplateContent.ID\">\n                @if (!currentTemplateContent.ID) {\n                  New\n                } @else {\n                  {{ getContentTypeDisplayText(currentTemplateContent.TypeID) }}\n                }\n              </span>\n            </label>\n            <div class=\"editor-actions\">\n              @if (!isAddingNewContent && hasUnsavedChanges) {\n                <span class=\"unsaved-indicator\">\n                  <i class=\"fa-solid fa-circle\"></i>\n                  Unsaved changes\n                </span>\n              }\n              @if (template.IsSaved && currentTemplateContent && config.showRunButton) {\n                <button type=\"button\"\n                  class=\"run-btn\"\n                  [disabled]=\"isRunningTemplate\"\n                  (click)=\"onRunTemplate()\"\n                  title=\"Test run this template\">\n                  @if (isRunningTemplate) {\n                    <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                    Running...\n                  } @else {\n                    <i class=\"fa-solid fa-play\"></i>\n                    Run\n                  }\n                </button>\n              }\n            </div>\n          </div>\n          <mj-code-editor\n            #codeEditor\n            (change)=\"onTemplateTextChange($event)\"\n            [readonly]=\"!config.allowEdit\"\n            [language]=\"getEditorLanguage()\"\n            [languages]=\"supportedLanguages\"\n            class=\"code-editor-wrapper\">\n          </mj-code-editor>\n          <!-- Template Help Section with Tabs -->\n          @if (!config.compactMode) {\n            <div class=\"template-help-section\">\n              <!-- Tab Navigation -->\n              <div class=\"help-tabs\">\n                <button type=\"button\"\n                  class=\"help-tab\"\n                  [class.active]=\"activeHelpTab === 'syntax'\"\n                  (click)=\"activeHelpTab = 'syntax'\">\n                  <i class=\"fa-solid fa-code\"></i> Template Syntax\n                </button>\n                <button type=\"button\"\n                  class=\"help-tab\"\n                  [class.active]=\"activeHelpTab === 'placeholders'\"\n                  (click)=\"activeHelpTab = 'placeholders'\">\n                  <i class=\"fa-solid fa-at\"></i> System Placeholders\n                </button>\n              </div>\n              <!-- Tab Content -->\n              <div class=\"help-content\">\n                <!-- Template Syntax Tab -->\n                @if (activeHelpTab === 'syntax') {\n                  <div class=\"syntax-help\">\n                    <div class=\"section-title\">\n                      <i class=\"fa-solid fa-lightbulb\"></i> Template Syntax Quick Reference\n                    </div>\n                    <div class=\"syntax-grid\">\n                      <div>\n                        <div class=\"syntax-item\">\n                          <strong>Parameters:</strong><br>\n                          <code>{{'{{'}} paramName {{'}}'}}</code>\n                        </div>\n                        <div>\n                          <strong>Template Includes:</strong><br>\n                          <code>{{'{% template \"TemplateName\" %}'}}</code>\n                        </div>\n                      </div>\n                      <div>\n                        <div class=\"syntax-item\">\n                          <strong>Conditionals:</strong><br>\n                          <code>{{'{% if condition %}'}} ... {{'{% endif %}'}}</code>\n                        </div>\n                        <div>\n                          <strong>Loops:</strong><br>\n                          <code>{{'{% for item in items %}'}} ... {{'{% endfor %}'}}</code>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                }\n                <!-- System Placeholders Tab -->\n                @if (activeHelpTab === 'placeholders') {\n                  <div class=\"placeholders-help\">\n                    <div class=\"section-title\">\n                      <i class=\"fa-solid fa-at\"></i> System Placeholders Reference\n                    </div>\n                    <p class=\"placeholders-description\">\n                      System placeholders are automatically available in all AI prompt templates. Simply use them in your template text and they will be replaced with their current values at execution time.\n                    </p>\n                    <!-- Category Sub-tabs -->\n                    <div class=\"category-tabs\">\n                      @for (categoryGroup of placeholderCategories; track categoryGroup.category.name) {\n                        <button type=\"button\"\n                          class=\"category-tab\"\n                          [class.active]=\"activePlaceholderCategory === categoryGroup.category.name\"\n                          (click)=\"activePlaceholderCategory = categoryGroup.category.name\">\n                          <i [class]=\"'fa-solid ' + categoryGroup.category.icon\" style=\"font-size: 0.9em;\"></i>\n                          {{ categoryGroup.category.name }}\n                          <span class=\"tab-badge\">\n                            {{ categoryGroup.placeholders.length }}\n                          </span>\n                        </button>\n                      }\n                    </div>\n                    <!-- Active Category Content -->\n                    <div class=\"placeholder-content\">\n                      @for (categoryGroup of placeholderCategories; track categoryGroup.category.name) {\n                        @if (activePlaceholderCategory === categoryGroup.category.name) {\n                          <div class=\"category-header\">\n                            <i [class]=\"'fa-solid ' + categoryGroup.category.icon\"\n                              [style.color]=\"categoryGroup.category.color\"></i>\n                            <h5>{{ categoryGroup.category.name }}</h5>\n                          </div>\n                          <div class=\"placeholder-grid\">\n                            @for (placeholder of categoryGroup.placeholders; track placeholder.name) {\n                              <div class=\"placeholder-item\">\n                                <div class=\"placeholder-item-inner\">\n                                  <div>\n                                    <div class=\"placeholder-name-row\">\n                                      <code class=\"placeholder-code\">{{'{{'}} {{ placeholder.name }} {{'}}'}}</code>\n                                      <button type=\"button\"\n                                        class=\"copy-btn\"\n                                        (click)=\"copyPlaceholder(placeholder.name)\"\n                                        title=\"Copy placeholder to clipboard\">\n                                        <i class=\"fa-solid fa-copy\"></i>\n                                      </button>\n                                    </div>\n                                    @if (placeholder.description) {\n                                      <div class=\"placeholder-description\">{{ placeholder.description }}</div>\n                                    }\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        }\n                      }\n                    </div>\n                    <!-- Usage Example -->\n                    <div class=\"usage-example\">\n                      <div class=\"usage-example-inner\">\n                        <i class=\"fa-solid fa-info-circle\"></i>\n                        <div class=\"usage-example-text\">\n                          <strong>Usage Example:</strong> To use a system placeholder in your template, simply include it in double curly braces.\n                          For example: <code>\"Today is {{'{{'}} _CURRENT_DATE {{'}}'}} and the current user is {{'{{'}} _USER_NAME {{'}}'}}\"</code>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    } @else {\n      <!-- No Content State -->\n      <div class=\"no-content-state\">\n        <i class=\"fa-solid fa-file-plus\"></i>\n        <h5>No Template Content</h5>\n        <p>Create your first template content version to get started.</p>\n        @if (config.allowEdit) {\n          <button type=\"button\"\n            (click)=\"addNewTemplateContent()\"\n            class=\"btn btn-primary\">\n            <i class=\"fa-solid fa-plus\"></i> Create First Content Version\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [".template-editor {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n.section-header h6 {\n    font-size: 0.9em;\n}\n\n.param-row:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n}\n\n.content-item {\n    transition: box-shadow 0.2s ease;\n}\n\n.content-item:hover {\n    box-shadow: 0 2px 4px var(--mj-shadow-sm);\n}\n\n.loading-state {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n}\n\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n}\n\n.badge {\n    display: inline-block;\n    font-size: 0.7em;\n    line-height: 1;\n}\n\n/* Form control sizing */\n.template-editor .mj-input,\n.template-editor .mj-textarea,\n.template-editor mj-dropdown {\n    width: 100%;\n}\n\n.template-editor [mjButton] {\n    min-width: auto;\n}\n\n/* Content version tabs */\n.content-versions-tabs {\n    margin-bottom: 16px;\n    border-bottom: 2px solid var(--mj-border-default);\n    padding-bottom: 8px;\n}\n\n.content-tabs {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.content-version-tab {\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 6px;\n    cursor: pointer;\n    background: var(--mj-bg-surface);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.content-version-tab.active {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.content-version-tab .tab-label {\n    font-weight: 600;\n    font-size: 0.85em;\n    color: var(--mj-text-secondary);\n}\n\n.content-version-tab .tab-meta {\n    font-size: 0.7em;\n    color: var(--mj-text-muted);\n}\n\n.content-version-tab .tab-meta .inactive-label {\n    color: var(--mj-status-error);\n}\n\n.content-version-tab .delete-btn {\n    background: none;\n    border: none;\n    color: var(--mj-status-error);\n    padding: 4px;\n    border-radius: 3px;\n    transition: all 0.2s;\n    cursor: pointer;\n}\n\n.content-version-tab .delete-btn:hover {\n    background-color: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n}\n\n/* New content tab (adding state) */\n.content-version-tab.adding-new {\n    border-color: var(--mj-status-success);\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.content-version-tab.adding-new .new-label {\n    font-weight: 600;\n    color: var(--mj-status-success);\n    font-size: 0.85em;\n}\n\n/* Add new content button */\n.content-version-tab.add-new {\n    border: 1px dashed var(--mj-status-success);\n    background: var(--mj-bg-surface-card);\n}\n\n.content-version-tab.add-new:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 8%, var(--mj-bg-surface));\n    border-style: solid;\n}\n\n.content-version-tab.add-new i {\n    color: var(--mj-status-success);\n    font-size: 0.75em;\n}\n\n.content-version-tab.add-new span {\n    font-weight: 500;\n    color: var(--mj-status-success);\n    font-size: 0.85em;\n}\n\n/* Content editor container */\n.content-editor-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n/* Content metadata bar */\n.content-metadata-bar {\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    padding: 16px 20px;\n}\n\n.metadata-grid {\n    display: grid;\n    grid-template-columns: 2fr 1fr 1fr auto;\n    gap: 20px;\n    align-items: end;\n}\n\n.form-group {\n    margin: 0;\n}\n\n.form-label {\n    margin-bottom: 4px;\n    font-size: 0.9em;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.form-control-plaintext {\n    font-size: 0.9em;\n    padding: 4px 0;\n}\n\n.form-check {\n    margin-top: 8px;\n}\n\n.form-check-label {\n    font-size: 0.9em;\n}\n\n.badge-success {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 3px 8px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    font-weight: 600;\n}\n\n.badge-secondary {\n    background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n    color: var(--mj-text-muted);\n    border: 1px solid color-mix(in srgb, var(--mj-text-muted) 30%, transparent);\n    padding: 3px 8px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    font-weight: 600;\n}\n\n/* Content text editor area */\n.content-text-editor {\n    flex: 1;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n}\n\n.editor-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 12px;\n}\n\n.editor-label {\n    margin: 0;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.content-type-badge {\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 0.75em;\n    color: var(--mj-text-inverse);\n}\n\n.content-type-badge.new {\n    background: var(--mj-status-success);\n}\n\n.content-type-badge.existing {\n    background: var(--mj-text-muted);\n}\n\n.editor-actions {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.unsaved-indicator {\n    color: var(--mj-status-warning);\n    font-size: 0.85em;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.unsaved-indicator i {\n    font-size: 0.5em;\n}\n\n.run-btn {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 6px 12px;\n    border-radius: 4px;\n    font-size: 0.85em;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    cursor: pointer;\n}\n\n.run-btn:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n/* Code editor border */\n.code-editor-wrapper {\n    flex: 1;\n    height: 350px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 4px;\n}\n\n/* Help section tabs */\n.template-help-section {\n    margin-top: 16px;\n}\n\n.help-tabs {\n    display: flex;\n    border-bottom: 2px solid var(--mj-border-default);\n    margin-bottom: 0;\n}\n\n.help-tab {\n    padding: 8px 16px;\n    border: none;\n    background: none;\n    cursor: pointer;\n    font-size: 0.9em;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    border-bottom: 3px solid transparent;\n    transition: all 0.2s;\n}\n\n.help-tab.active {\n    color: var(--mj-status-success);\n    border-bottom-color: var(--mj-status-success);\n}\n\n/* Help content area */\n.help-content {\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-top: none;\n    border-radius: 0 0 4px 4px;\n}\n\n/* Syntax help */\n.syntax-help {\n    font-size: 0.85em;\n}\n\n.syntax-help .section-title {\n    font-weight: 600;\n    margin-bottom: 12px;\n    color: var(--mj-status-success);\n}\n\n.syntax-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n}\n\n.syntax-item {\n    margin-bottom: 8px;\n}\n\n.syntax-help code {\n    background: var(--mj-bg-surface);\n    padding: 4px 6px;\n    border-radius: 3px;\n    display: inline-block;\n    margin-top: 4px;\n    color: var(--mj-text-primary);\n}\n\n/* Placeholders help */\n.placeholders-help {\n    font-size: 0.85em;\n}\n\n.placeholders-help .section-title {\n    font-weight: 600;\n    margin-bottom: 12px;\n    color: var(--mj-status-success);\n}\n\n.placeholders-description {\n    margin-bottom: 16px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n}\n\n/* Category tabs */\n.category-tabs {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n}\n\n.category-tab {\n    padding: 6px 14px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    border-radius: 20px;\n    cursor: pointer;\n    font-size: 0.85em;\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    color: var(--mj-text-muted);\n}\n\n.category-tab.active {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.category-tab .tab-badge {\n    background: color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n    color: inherit;\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    margin-left: 4px;\n}\n\n/* Placeholder content area */\n.placeholder-content {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.category-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 16px;\n}\n\n.category-header i {\n    font-size: 1.2em;\n}\n\n.category-header h5 {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n}\n\n.placeholder-grid {\n    display: grid;\n    gap: 10px;\n}\n\n/* Placeholder item */\n.placeholder-item {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    position: relative;\n    transition: all 0.2s;\n    max-width: 800px;\n}\n\n.placeholder-item:hover {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.placeholder-item:hover .copy-btn {\n    opacity: 1 !important;\n}\n\n.placeholder-item-inner {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.placeholder-name-row {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.placeholder-code {\n    color: var(--mj-status-error);\n    font-weight: 600;\n    font-size: 0.95em;\n}\n\n.copy-btn {\n    opacity: 0;\n    transition: opacity 0.2s;\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    cursor: pointer;\n    color: var(--mj-brand-primary);\n    border-radius: 4px;\n    display: inline-flex;\n    align-items: center;\n}\n\n.copy-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.copy-btn i {\n    font-size: 0.85em;\n}\n\n.placeholder-description {\n    color: var(--mj-text-muted);\n    margin-top: 4px;\n    line-height: 1.4;\n}\n\n/* Usage example box */\n.usage-example {\n    margin-top: 20px;\n    padding: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-radius: 6px;\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.usage-example-inner {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.usage-example i {\n    color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.usage-example-text {\n    flex: 1;\n    font-size: 0.85em;\n    color: var(--mj-brand-primary);\n    line-height: 1.5;\n}\n\n.usage-example code {\n    background: var(--mj-bg-surface);\n    padding: 2px 4px;\n    border-radius: 3px;\n}\n\n/* No content state */\n.no-content-state {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\n    border-radius: 8px;\n    padding: 40px;\n    text-align: center;\n}\n\n.no-content-state i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    color: var(--mj-text-muted);\n    opacity: 0.6;\n}\n\n.no-content-state h5 {\n    color: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.no-content-state p {\n    color: var(--mj-text-muted);\n    margin-bottom: 20px;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-template-editor', template: "@if (template) {\n  <div class=\"template-editor\" style=\"height: 100%; display: flex; flex-direction: column;\">\n    @if (ContentsLoadState === 'loading') {\n      <mj-loading text=\"Loading template contents...\" size=\"medium\"></mj-loading>\n    } @else if (ContentsLoadState === 'failed') {\n      <!-- The read failed: the template's contents are unknown, so neither \"no content\" nor \"create\" -->\n      <div class=\"contents-load-failed\">\n        <i class=\"fa-solid fa-triangle-exclamation\"></i>\n        <h5>Template contents could not be loaded</h5>\n        <p>Nothing is shown so nothing can be saved over contents that were not read.</p>\n        <button type=\"button\" mjButton variant=\"secondary\" size=\"sm\" (click)=\"RefreshAndDiscardChanges()\">\n          <i class=\"fa-solid fa-rotate-right\"></i> Retry\n        </button>\n      </div>\n    } @else {\n    <!-- Content Versions List/Tabs -->\n    @if (templateContents.length > 0) {\n      <div class=\"content-versions-tabs\">\n        <div class=\"content-tabs\">\n          @for (content of templateContents; track content.ID || $index; let i = $index) {\n            <div class=\"content-version-tab\"\n              [class.active]=\"selectedContentIndex === i && !isAddingNewContent\"\n              (click)=\"selectTemplateContent(i, false)\">\n              <div style=\"flex: 1;\">\n                <div class=\"tab-label\">\n                  <!-- From TypeID (what the Content Type dropdown edits); the view-joined Type field is only refreshed on reload -->\n                  {{ content.TypeID ? GetContentTypeDisplayText(content.TypeID) : 'Version ' + (i + 1) }}\n                </div>\n                <div class=\"tab-meta\">\n                  P:{{ content.Priority }}\n                  @if (!content.IsActive) {\n                    \u2022 <span class=\"inactive-label\">Inactive</span>\n                  }\n                </div>\n              </div>\n              @if (templateContents.length > 1 && config.allowEdit) {\n                <button type=\"button\"\n                  (click)=\"deleteTemplateContent(i); $event.stopPropagation()\"\n                  class=\"delete-btn\"\n                  title=\"Delete this content version\">\n                  <i class=\"fa-solid fa-trash fa-xs\"></i>\n                </button>\n              }\n            </div>\n          }\n          @if (isAddingNewContent) {\n            <div class=\"content-version-tab adding-new\">\n              <i class=\"fa-solid fa-plus text-success\"></i>\n              <span class=\"new-label\">New</span>\n            </div>\n          }\n          <!-- Add New Content (Edit Mode Only) -->\n          @if (config.allowEdit && !isAddingNewContent) {\n            <div class=\"content-version-tab add-new\"\n              (click)=\"addNewTemplateContent()\"\n              title=\"Add new template content\">\n              <i class=\"fa-solid fa-plus\"></i>\n              <span>New</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n    <!-- Content Editor -->\n    @if (currentTemplateContent) {\n      <div class=\"content-editor-container\">\n        <!-- Content Metadata Bar -->\n        <div class=\"content-metadata-bar\">\n          <div class=\"metadata-grid\">\n            <div class=\"form-group\">\n              <label for=\"contentType\" class=\"form-label\">\n                <i class=\"fa-solid fa-tag\"></i> Content Type\n              </label>\n              @if (config.allowEdit) {\n                <mj-dropdown [(ngModel)]=\"currentTemplateContent.TypeID\"\n                  name=\"contentType\"\n                  [Data]=\"getContentTypeOptionsForContent()\"\n                  TextField=\"text\"\n                  ValueField=\"value\"\n                  [ValuePrimitive]=\"true\"\n                  (ValueChange)=\"onContentTypeChange()\">\n                </mj-dropdown>\n              } @else {\n                <div class=\"form-control-plaintext\">\n                  {{ getContentTypeDisplayText(currentTemplateContent.TypeID) }}\n                </div>\n              }\n            </div>\n            <div class=\"form-group\">\n              <label for=\"priority\" class=\"form-label\">\n                <i class=\"fa-solid fa-sort-numeric-up\"></i> Priority\n              </label>\n              @if (config.allowEdit) {\n                <mj-numeric-input [(ngModel)]=\"currentTemplateContent.Priority\"\n                  name=\"priority\"\n                  [Min]=\"1\"\n                  [Step]=\"1\"\n                  [Format]=\"'n0'\">\n                </mj-numeric-input>\n              } @else {\n                <div class=\"form-control-plaintext\">\n                  {{ currentTemplateContent.Priority || '-' }}\n                </div>\n              }\n            </div>\n            <div class=\"form-group\">\n              <label class=\"form-label\">\n                <i class=\"fa-solid fa-toggle-on\"></i> Status\n              </label>\n              @if (config.allowEdit) {\n                <div class=\"form-check\">\n                  <input type=\"checkbox\"\n                    id=\"isActive\"\n                    class=\"form-check-input\"\n                    [(ngModel)]=\"currentTemplateContent.IsActive\"\n                    name=\"isActive\">\n                  <label class=\"form-check-label\" for=\"isActive\">\n                    Active\n                  </label>\n                </div>\n              } @else {\n                <div class=\"form-control-plaintext\">\n                  @if (currentTemplateContent.IsActive) {\n                    <span class=\"badge-success\">\n                      <i class=\"fa-solid fa-check-circle\"></i> Active\n                    </span>\n                  } @else {\n                    <span class=\"badge-secondary\">\n                      <i class=\"fa-solid fa-pause-circle\"></i> Inactive\n                    </span>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <!-- Content Text Editor -->\n        <div class=\"content-text-editor\">\n          <div class=\"editor-header\">\n            <label for=\"templateContent\" class=\"editor-label\">\n              <i class=\"fa-solid fa-code\"></i> Template Content\n              <span class=\"content-type-badge\"\n                [class.new]=\"!currentTemplateContent.ID\"\n                [class.existing]=\"!!currentTemplateContent.ID\">\n                @if (!currentTemplateContent.ID) {\n                  New\n                } @else {\n                  {{ getContentTypeDisplayText(currentTemplateContent.TypeID) }}\n                }\n              </span>\n            </label>\n            <div class=\"editor-actions\">\n              @if (!isAddingNewContent && hasUnsavedChanges) {\n                <span class=\"unsaved-indicator\">\n                  <i class=\"fa-solid fa-circle\"></i>\n                  Unsaved changes\n                </span>\n              }\n              @if (template.IsSaved && currentTemplateContent && config.showRunButton) {\n                <button type=\"button\"\n                  class=\"run-btn\"\n                  [disabled]=\"isRunningTemplate\"\n                  (click)=\"onRunTemplate()\"\n                  title=\"Test run this template\">\n                  @if (isRunningTemplate) {\n                    <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                    Running...\n                  } @else {\n                    <i class=\"fa-solid fa-play\"></i>\n                    Run\n                  }\n                </button>\n              }\n            </div>\n          </div>\n          <mj-code-editor\n            #codeEditor\n            (change)=\"onTemplateTextChange($event)\"\n            [readonly]=\"!config.allowEdit\"\n            [language]=\"getEditorLanguage()\"\n            [languages]=\"supportedLanguages\"\n            class=\"code-editor-wrapper\">\n          </mj-code-editor>\n          <!-- Template Help Section with Tabs -->\n          @if (!config.compactMode) {\n            <div class=\"template-help-section\">\n              <!-- Tab Navigation -->\n              <div class=\"help-tabs\">\n                <button type=\"button\"\n                  class=\"help-tab\"\n                  [class.active]=\"activeHelpTab === 'syntax'\"\n                  (click)=\"activeHelpTab = 'syntax'\">\n                  <i class=\"fa-solid fa-code\"></i> Template Syntax\n                </button>\n                <button type=\"button\"\n                  class=\"help-tab\"\n                  [class.active]=\"activeHelpTab === 'placeholders'\"\n                  (click)=\"activeHelpTab = 'placeholders'\">\n                  <i class=\"fa-solid fa-at\"></i> System Placeholders\n                </button>\n              </div>\n              <!-- Tab Content -->\n              <div class=\"help-content\">\n                <!-- Template Syntax Tab -->\n                @if (activeHelpTab === 'syntax') {\n                  <div class=\"syntax-help\">\n                    <div class=\"section-title\">\n                      <i class=\"fa-solid fa-lightbulb\"></i> Template Syntax Quick Reference\n                    </div>\n                    <div class=\"syntax-grid\">\n                      <div>\n                        <div class=\"syntax-item\">\n                          <strong>Parameters:</strong><br>\n                          <code>{{'{{'}} paramName {{'}}'}}</code>\n                        </div>\n                        <div>\n                          <strong>Template Includes:</strong><br>\n                          <code>{{'{% template \"TemplateName\" %}'}}</code>\n                        </div>\n                      </div>\n                      <div>\n                        <div class=\"syntax-item\">\n                          <strong>Conditionals:</strong><br>\n                          <code>{{'{% if condition %}'}} ... {{'{% endif %}'}}</code>\n                        </div>\n                        <div>\n                          <strong>Loops:</strong><br>\n                          <code>{{'{% for item in items %}'}} ... {{'{% endfor %}'}}</code>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                }\n                <!-- System Placeholders Tab -->\n                @if (activeHelpTab === 'placeholders') {\n                  <div class=\"placeholders-help\">\n                    <div class=\"section-title\">\n                      <i class=\"fa-solid fa-at\"></i> System Placeholders Reference\n                    </div>\n                    <p class=\"placeholders-description\">\n                      System placeholders are automatically available in all AI prompt templates. Simply use them in your template text and they will be replaced with their current values at execution time.\n                      Scoped prompt parts can use the Date &amp; Time, User Context and Environment placeholders, written alone with no filter. A part is not a template: everything else in it is sent as written.\n                    </p>\n                    <!-- Category Sub-tabs -->\n                    <div class=\"category-tabs\">\n                      @for (categoryGroup of placeholderCategories; track categoryGroup.category.name) {\n                        <button type=\"button\"\n                          class=\"category-tab\"\n                          [class.active]=\"activePlaceholderCategory === categoryGroup.category.name\"\n                          (click)=\"activePlaceholderCategory = categoryGroup.category.name\">\n                          <i [class]=\"'fa-solid ' + categoryGroup.category.icon\" style=\"font-size: 0.9em;\"></i>\n                          {{ categoryGroup.category.name }}\n                          <span class=\"tab-badge\">\n                            {{ categoryGroup.placeholders.length }}\n                          </span>\n                        </button>\n                      }\n                    </div>\n                    <!-- Active Category Content -->\n                    <div class=\"placeholder-content\">\n                      @for (categoryGroup of placeholderCategories; track categoryGroup.category.name) {\n                        @if (activePlaceholderCategory === categoryGroup.category.name) {\n                          <div class=\"category-header\">\n                            <i [class]=\"'fa-solid ' + categoryGroup.category.icon\"\n                              [style.color]=\"categoryGroup.category.color\"></i>\n                            <h5>{{ categoryGroup.category.name }}</h5>\n                          </div>\n                          <div class=\"placeholder-grid\">\n                            @for (placeholder of categoryGroup.placeholders; track placeholder.name) {\n                              <div class=\"placeholder-item\">\n                                <div class=\"placeholder-item-inner\">\n                                  <div>\n                                    <div class=\"placeholder-name-row\">\n                                      <code class=\"placeholder-code\">{{'{{'}} {{ placeholder.name }} {{'}}'}}</code>\n                                      <button type=\"button\"\n                                        class=\"copy-btn\"\n                                        (click)=\"copyPlaceholder(placeholder.name)\"\n                                        title=\"Copy placeholder to clipboard\">\n                                        <i class=\"fa-solid fa-copy\"></i>\n                                      </button>\n                                    </div>\n                                    @if (placeholder.description) {\n                                      <div class=\"placeholder-description\">{{ placeholder.description }}</div>\n                                    }\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        }\n                      }\n                    </div>\n                    <!-- Usage Example -->\n                    <div class=\"usage-example\">\n                      <div class=\"usage-example-inner\">\n                        <i class=\"fa-solid fa-info-circle\"></i>\n                        <div class=\"usage-example-text\">\n                          <strong>Usage Example:</strong> To use a system placeholder in your template, simply include it in double curly braces.\n                          For example: <code>\"Today is {{'{{'}} _CURRENT_DATE {{'}}'}} and the current user is {{'{{'}} _USER_NAME {{'}}'}}\"</code>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    } @else {\n      <!-- No Content State -->\n      <div class=\"no-content-state\">\n        <i class=\"fa-solid fa-file-plus\"></i>\n        <h5>No Template Content</h5>\n        <p>Create your first template content version to get started.</p>\n        @if (config.allowEdit) {\n          <button type=\"button\"\n            (click)=\"addNewTemplateContent()\"\n            class=\"btn btn-primary\">\n            <i class=\"fa-solid fa-plus\"></i> Create First Content Version\n          </button>\n        }\n      </div>\n    }\n    }\n  </div>\n}\n", styles: [".template-editor {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n.section-header h6 {\n    font-size: 0.9em;\n}\n\n.param-row:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n}\n\n.content-item {\n    transition: box-shadow 0.2s ease;\n}\n\n.content-item:hover {\n    box-shadow: 0 2px 4px var(--mj-shadow-sm);\n}\n\n.loading-state {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n}\n\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n}\n\n.badge {\n    display: inline-block;\n    font-size: 0.7em;\n    line-height: 1;\n}\n\n/* Form control sizing */\n.template-editor .mj-input,\n.template-editor .mj-textarea,\n.template-editor mj-dropdown {\n    width: 100%;\n}\n\n.template-editor [mjButton] {\n    min-width: auto;\n}\n\n/* Content version tabs */\n.content-versions-tabs {\n    margin-bottom: 16px;\n    border-bottom: 2px solid var(--mj-border-default);\n    padding-bottom: 8px;\n}\n\n.content-tabs {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.content-version-tab {\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 6px;\n    cursor: pointer;\n    background: var(--mj-bg-surface);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.content-version-tab.active {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.content-version-tab .tab-label {\n    font-weight: 600;\n    font-size: 0.85em;\n    color: var(--mj-text-secondary);\n}\n\n.content-version-tab .tab-meta {\n    font-size: 0.7em;\n    color: var(--mj-text-muted);\n}\n\n.content-version-tab .tab-meta .inactive-label {\n    color: var(--mj-status-error);\n}\n\n.content-version-tab .delete-btn {\n    background: none;\n    border: none;\n    color: var(--mj-status-error);\n    padding: 4px;\n    border-radius: 3px;\n    transition: all 0.2s;\n    cursor: pointer;\n}\n\n.content-version-tab .delete-btn:hover {\n    background-color: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n}\n\n/* New content tab (adding state) */\n.content-version-tab.adding-new {\n    border-color: var(--mj-status-success);\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.content-version-tab.adding-new .new-label {\n    font-weight: 600;\n    color: var(--mj-status-success);\n    font-size: 0.85em;\n}\n\n/* Add new content button */\n.content-version-tab.add-new {\n    border: 1px dashed var(--mj-status-success);\n    background: var(--mj-bg-surface-card);\n}\n\n.content-version-tab.add-new:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 8%, var(--mj-bg-surface));\n    border-style: solid;\n}\n\n.content-version-tab.add-new i {\n    color: var(--mj-status-success);\n    font-size: 0.75em;\n}\n\n.content-version-tab.add-new span {\n    font-weight: 500;\n    color: var(--mj-status-success);\n    font-size: 0.85em;\n}\n\n/* Content editor container */\n.content-editor-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n/* Content metadata bar */\n.content-metadata-bar {\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    padding: 16px 20px;\n}\n\n.metadata-grid {\n    display: grid;\n    grid-template-columns: 2fr 1fr 1fr auto;\n    gap: 20px;\n    align-items: end;\n}\n\n.form-group {\n    margin: 0;\n}\n\n.form-label {\n    margin-bottom: 4px;\n    font-size: 0.9em;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.form-control-plaintext {\n    font-size: 0.9em;\n    padding: 4px 0;\n}\n\n.form-check {\n    margin-top: 8px;\n}\n\n.form-check-label {\n    font-size: 0.9em;\n}\n\n.badge-success {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 3px 8px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    font-weight: 600;\n}\n\n.badge-secondary {\n    background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n    color: var(--mj-text-muted);\n    border: 1px solid color-mix(in srgb, var(--mj-text-muted) 30%, transparent);\n    padding: 3px 8px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    font-weight: 600;\n}\n\n/* Content text editor area */\n.content-text-editor {\n    flex: 1;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n}\n\n.editor-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 12px;\n}\n\n.editor-label {\n    margin: 0;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.content-type-badge {\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 0.75em;\n    color: var(--mj-text-inverse);\n}\n\n.content-type-badge.new {\n    background: var(--mj-status-success);\n}\n\n.content-type-badge.existing {\n    background: var(--mj-text-muted);\n}\n\n.editor-actions {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.unsaved-indicator {\n    color: var(--mj-status-warning);\n    font-size: 0.85em;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.unsaved-indicator i {\n    font-size: 0.5em;\n}\n\n.run-btn {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 6px 12px;\n    border-radius: 4px;\n    font-size: 0.85em;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    cursor: pointer;\n}\n\n.run-btn:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n/* Code editor border */\n.code-editor-wrapper {\n    flex: 1;\n    height: 350px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 4px;\n}\n\n/* Help section tabs */\n.template-help-section {\n    margin-top: 16px;\n}\n\n.help-tabs {\n    display: flex;\n    border-bottom: 2px solid var(--mj-border-default);\n    margin-bottom: 0;\n}\n\n.help-tab {\n    padding: 8px 16px;\n    border: none;\n    background: none;\n    cursor: pointer;\n    font-size: 0.9em;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    border-bottom: 3px solid transparent;\n    transition: all 0.2s;\n}\n\n.help-tab.active {\n    color: var(--mj-status-success);\n    border-bottom-color: var(--mj-status-success);\n}\n\n/* Help content area */\n.help-content {\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-top: none;\n    border-radius: 0 0 4px 4px;\n}\n\n/* Syntax help */\n.syntax-help {\n    font-size: 0.85em;\n}\n\n.syntax-help .section-title {\n    font-weight: 600;\n    margin-bottom: 12px;\n    color: var(--mj-status-success);\n}\n\n.syntax-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n}\n\n.syntax-item {\n    margin-bottom: 8px;\n}\n\n.syntax-help code {\n    background: var(--mj-bg-surface);\n    padding: 4px 6px;\n    border-radius: 3px;\n    display: inline-block;\n    margin-top: 4px;\n    color: var(--mj-text-primary);\n}\n\n/* Placeholders help */\n.placeholders-help {\n    font-size: 0.85em;\n}\n\n.placeholders-help .section-title {\n    font-weight: 600;\n    margin-bottom: 12px;\n    color: var(--mj-status-success);\n}\n\n.placeholders-description {\n    margin-bottom: 16px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n}\n\n/* Category tabs */\n.category-tabs {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n}\n\n.category-tab {\n    padding: 6px 14px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    border-radius: 20px;\n    cursor: pointer;\n    font-size: 0.85em;\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    color: var(--mj-text-muted);\n}\n\n.category-tab.active {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.category-tab .tab-badge {\n    background: color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n    color: inherit;\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    margin-left: 4px;\n}\n\n/* Placeholder content area */\n.placeholder-content {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.category-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 16px;\n}\n\n.category-header i {\n    font-size: 1.2em;\n}\n\n.category-header h5 {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n}\n\n.placeholder-grid {\n    display: grid;\n    gap: 10px;\n}\n\n/* Placeholder item */\n.placeholder-item {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    position: relative;\n    transition: all 0.2s;\n    max-width: 800px;\n}\n\n.placeholder-item:hover {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.placeholder-item:hover .copy-btn {\n    opacity: 1 !important;\n}\n\n.placeholder-item-inner {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.placeholder-name-row {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.placeholder-code {\n    color: var(--mj-status-error);\n    font-weight: 600;\n    font-size: 0.95em;\n}\n\n.copy-btn {\n    opacity: 0;\n    transition: opacity 0.2s;\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    cursor: pointer;\n    color: var(--mj-brand-primary);\n    border-radius: 4px;\n    display: inline-flex;\n    align-items: center;\n}\n\n.copy-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.copy-btn i {\n    font-size: 0.85em;\n}\n\n.placeholder-description {\n    color: var(--mj-text-muted);\n    margin-top: 4px;\n    line-height: 1.4;\n}\n\n/* Usage example box */\n.usage-example {\n    margin-top: 20px;\n    padding: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-radius: 6px;\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.usage-example-inner {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.usage-example i {\n    color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.usage-example-text {\n    flex: 1;\n    font-size: 0.85em;\n    color: var(--mj-brand-primary);\n    line-height: 1.5;\n}\n\n.usage-example code {\n    background: var(--mj-bg-surface);\n    padding: 2px 4px;\n    border-radius: 3px;\n}\n\n/* No content state, and the failed-read state that must not look like it */\n.no-content-state,\n.contents-load-failed {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\n    border-radius: 8px;\n    padding: 40px;\n    text-align: center;\n}\n\n.no-content-state i,\n.contents-load-failed > i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    color: var(--mj-text-muted);\n    opacity: 0.6;\n}\n\n.no-content-state h5,\n.contents-load-failed h5 {\n    color: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.no-content-state p,\n.contents-load-failed p {\n    color: var(--mj-text-muted);\n    margin-bottom: 20px;\n}\n\n.contents-load-failed {\n    border-color: var(--mj-status-error);\n}\n\n/* Only the panel's own icon: the Retry button's icon keeps the button's size and colour */\n.contents-load-failed > i {\n    color: var(--mj-status-error);\n    opacity: 1;\n}\n"] }]
     }], () => [{ type: i1.MJNotificationService }, { type: i2.MJConfirmService }], { Template: [{
             type: Input
         }], template: [{