@memberjunction/ng-flow-editor 6.1.0-edge.1 → 6.1.0-edge.3

package/dist/lib/components/flow-editor.component.js

@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, HostListener } from '@angular/core';
 import { Subject } from 'rxjs';
 import { FFlowComponent, FCanvasComponent } from '@foblex/flow';
+import { FlowBeforeContextMenuEventArgs, FlowAfterContextMenuActionEventArgs, } from '../interfaces/flow-types';
 import { FlowStateService } from '../services/flow-state.service';
 import { FlowLayoutService } from '../services/flow-layout.service';
 import { UUIDsEqual, NormalizeUUID } from '@memberjunction/global';
@@ -15,208 +16,234 @@ import * as i7 from "./flow-palette.component";
 import * as i8 from "./flow-toolbar.component";
 import * as i9 from "./flow-status-bar.component";
 const _c0 = ["fZoomRef"];
-const _c1 = (a0, a1) => ({ x: a0, y: a1 });
+const _c1 = ["canvasArea"];
+const _c2 = (a0, a1) => ({ x: a0, y: a1 });
+const _forTrack0 = ($index, $item) => $item.ID;
 function FlowEditorComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2)(1, "mj-flow-toolbar", 17);
-    i0.ɵɵlistener("ZoomInClicked", function FlowEditorComponent_Conditional_1_Template_mj_flow_toolbar_ZoomInClicked_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ZoomIn()); })("ZoomOutClicked", function FlowEditorComponent_Conditional_1_Template_mj_flow_toolbar_ZoomOutClicked_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ZoomOut()); })("FitToScreenClicked", function FlowEditorComponent_Conditional_1_Template_mj_flow_toolbar_FitToScreenClicked_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ZoomToFit()); })("AutoLayoutClicked", function FlowEditorComponent_Conditional_1_Template_mj_flow_toolbar_AutoLayoutClicked_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.AutoArrange()); })("GridToggled", function FlowEditorComponent_Conditional_1_Template_mj_flow_toolbar_GridToggled_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onGridToggled($event)); })("MinimapToggled", function FlowEditorComponent_Conditional_1_Template_mj_flow_toolbar_MinimapToggled_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onMinimapToggled($event)); })("LegendToggled", function FlowEditorComponent_Conditional_1_Template_mj_flow_toolbar_LegendToggled_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onLegendToggled($event)); })("PanModeToggled", function FlowEditorComponent_Conditional_1_Template_mj_flow_toolbar_PanModeToggled_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onPanModeToggled($event)); });
+    i0.ɵɵelementStart(0, "div", 3)(1, "mj-flow-toolbar", 20);
+    i0.ɵɵlistener("ZoomInClicked", function FlowEditorComponent_Conditional_1_Template_mj_flow_toolbar_ZoomInClicked_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ZoomIn()); })("ZoomOutClicked", function FlowEditorComponent_Conditional_1_Template_mj_flow_toolbar_ZoomOutClicked_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ZoomOut()); })("FitToScreenClicked", function FlowEditorComponent_Conditional_1_Template_mj_flow_toolbar_FitToScreenClicked_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ZoomToFit()); })("AutoLayoutClicked", function FlowEditorComponent_Conditional_1_Template_mj_flow_toolbar_AutoLayoutClicked_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.AutoArrange()); })("GridToggled", function FlowEditorComponent_Conditional_1_Template_mj_flow_toolbar_GridToggled_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onGridToggled($event)); })("MinimapToggled", function FlowEditorComponent_Conditional_1_Template_mj_flow_toolbar_MinimapToggled_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onMinimapToggled($event)); })("LegendToggled", function FlowEditorComponent_Conditional_1_Template_mj_flow_toolbar_LegendToggled_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onLegendToggled($event)); })("PanModeToggled", function FlowEditorComponent_Conditional_1_Template_mj_flow_toolbar_PanModeToggled_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onPanModeToggled($event)); })("MinimizeClicked", function FlowEditorComponent_Conditional_1_Template_mj_flow_toolbar_MinimizeClicked_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SetToolbarVisibility("minimized")); })("HideClicked", function FlowEditorComponent_Conditional_1_Template_mj_flow_toolbar_HideClicked_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SetToolbarVisibility("hidden")); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("data-align", ctx_r2.ToolbarAlign);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ZoomLevel", ctx_r2.zoomLevel)("ShowGrid", ctx_r2.ShowGrid)("ShowMinimap", ctx_r2.ShowMinimap)("ShowLegend", ctx_r2.ShowLegend)("ReadOnly", ctx_r2.ReadOnly)("PanMode", ctx_r2.panMode);
 } }
+function FlowEditorComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 21);
+    i0.ɵɵlistener("click", function FlowEditorComponent_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SetToolbarVisibility("shown")); });
+    i0.ɵɵelement(1, "i", 22);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("data-align", ctx_r2.ToolbarAlign);
+} }
 function FlowEditorComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-flow-palette", 4);
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 23);
+    i0.ɵɵlistener("click", function FlowEditorComponent_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SetToolbarVisibility("shown")); });
+    i0.ɵɵelement(1, "i", 24);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("data-align", ctx_r2.ToolbarAlign);
+} }
+function FlowEditorComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-flow-palette", 25);
+    i0.ɵɵlistener("NodeTypeActivated", function FlowEditorComponent_Conditional_5_Template_mj_flow_palette_NodeTypeActivated_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onPaletteNodeTypeActivated($event)); });
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("NodeTypes", ctx_r2.NodeTypes);
 } }
-function FlowEditorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function FlowEditorComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "f-background");
-    i0.ɵɵelement(1, "f-circle-pattern", 18);
+    i0.ɵɵelement(1, "f-circle-pattern", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("color", "#94a3b8")("radius", 24);
 } }
-function FlowEditorComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "f-line-alignment", 7);
+function FlowEditorComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "f-line-alignment", 10);
 } if (rf & 2) {
     i0.ɵɵproperty("fAlignThreshold", 10);
 } }
-function FlowEditorComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "f-connection-for-create", 9);
+function FlowEditorComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "f-connection-for-create", 12);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 19);
-    i0.ɵɵelement(2, "path", 20);
+    i0.ɵɵelementStart(1, "svg", 27);
+    i0.ɵɵelement(2, "path", 28);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     i0.ɵɵproperty("fRadius", 8)("fOffset", 12);
     i0.ɵɵadvance();
     i0.ɵɵproperty("refX", 9)("refY", 5)("height", 10)("width", 10);
 } }
-function FlowEditorComponent_For_12_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 26);
+function FlowEditorComponent_For_15_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 34);
 } if (rf & 2) {
-    const conn_r5 = i0.ɵɵnextContext(2).$implicit;
-    i0.ɵɵstyleProp("color", conn_r5.LabelIconColor || "inherit");
-    i0.ɵɵproperty("ngClass", conn_r5.LabelIcon);
+    const conn_r8 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵstyleProp("color", conn_r8.LabelIconColor || "inherit");
+    i0.ɵɵproperty("ngClass", conn_r8.LabelIcon);
 } }
-function FlowEditorComponent_For_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24);
-    i0.ɵɵconditionalCreate(1, FlowEditorComponent_For_12_Conditional_3_Conditional_1_Template, 1, 3, "i", 25);
+function FlowEditorComponent_For_15_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵconditionalCreate(1, FlowEditorComponent_For_15_Conditional_3_Conditional_1_Template, 1, 3, "i", 33);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const conn_r5 = i0.ɵɵnextContext().$implicit;
+    const conn_r8 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("background-color", ctx_r2.ConnectionLabelBackground)("border-color", ctx_r2.ConnectionLabelBorderColor)("color", ctx_r2.ConnectionLabelTextColor);
-    i0.ɵɵproperty("position", 0.5)("title", conn_r5.LabelDetail || conn_r5.Label || "");
+    i0.ɵɵproperty("position", 0.5)("title", conn_r8.LabelDetail || conn_r8.Label || "");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(conn_r5.LabelIcon ? 1 : -1);
+    i0.ɵɵconditional(conn_r8.LabelIcon ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", conn_r5.Label, " ");
+    i0.ɵɵtextInterpolate1(" ", conn_r8.Label, " ");
 } }
-function FlowEditorComponent_For_12_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "f-connection", 21);
-    i0.ɵɵlistener("click", function FlowEditorComponent_For_12_Template_f_connection_click_0_listener($event) { const conn_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onConnectionClicked($event, conn_r5)); })("contextmenu", function FlowEditorComponent_For_12_Template_f_connection_contextmenu_0_listener($event) { const conn_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onConnectionContextMenu($event, conn_r5)); });
+function FlowEditorComponent_For_15_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "f-connection", 29);
+    i0.ɵɵlistener("click", function FlowEditorComponent_For_15_Template_f_connection_click_0_listener($event) { const conn_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onConnectionClicked($event, conn_r8)); })("contextmenu", function FlowEditorComponent_For_15_Template_f_connection_contextmenu_0_listener($event) { const conn_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onConnectionContextMenu($event, conn_r8)); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 19);
-    i0.ɵɵelement(2, "path", 22);
+    i0.ɵɵelementStart(1, "svg", 27);
+    i0.ɵɵelement(2, "path", 30);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, FlowEditorComponent_For_12_Conditional_3_Template, 3, 10, "div", 23);
+    i0.ɵɵconditionalCreate(3, FlowEditorComponent_For_15_Conditional_3_Template, 3, 10, "div", 31);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const conn_r5 = ctx.$implicit;
+    const conn_r8 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("--connection-color", conn_r5.Color || "#94a3b8");
-    i0.ɵɵclassProp("mj-flow-connection-colored", !!conn_r5.Color)("mj-flow-connection-dashed", conn_r5.Style === "dashed")("mj-flow-connection-dotted", conn_r5.Style === "dotted");
-    i0.ɵɵproperty("fConnectionId", conn_r5.ID)("fOutputId", conn_r5.SourcePortID)("fInputId", conn_r5.TargetPortID)("fRadius", 8)("fOffset", 12)("fSelectionDisabled", false)("fReassignDisabled", ctx_r2.ReadOnly);
+    i0.ɵɵstyleProp("--connection-color", conn_r8.Color || "#94a3b8")("--connection-width", conn_r8.StrokeWidth || 2, "px");
+    i0.ɵɵclassProp("mj-flow-connection-colored", !!conn_r8.Color)("mj-flow-connection-dashed", conn_r8.Style === "dashed")("mj-flow-connection-dotted", conn_r8.Style === "dotted")("mj-flow-connection-animated", !!conn_r8.Animated);
+    i0.ɵɵproperty("fConnectionId", conn_r8.ID)("fOutputId", conn_r8.SourcePortID)("fInputId", conn_r8.TargetPortID)("fRadius", 8)("fOffset", 12)("fSelectionDisabled", false)("fReassignDisabled", ctx_r2.ReadOnly);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("refX", 9)("refY", 5)("height", 10)("width", 10);
+    i0.ɵɵproperty("refX", 9)("refY", 5)("height", conn_r8.Animated ? 16 : 10)("width", conn_r8.Animated ? 16 : 10);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("fill", conn_r5.Color || "#94a3b8");
+    i0.ɵɵattribute("fill", conn_r8.Color || "#94a3b8");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(conn_r5.Label ? 3 : -1);
+    i0.ɵɵconditional(conn_r8.Label ? 3 : -1);
 } }
-function FlowEditorComponent_For_14_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-flow-node", 27);
-    i0.ɵɵlistener("contextmenu", function FlowEditorComponent_For_14_Template_mj_flow_node_contextmenu_0_listener($event) { const node_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onNodeContextMenu($event, node_r7)); });
+function FlowEditorComponent_For_17_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-flow-node", 35);
+    i0.ɵɵlistener("contextmenu", function FlowEditorComponent_For_17_Template_mj_flow_node_contextmenu_0_listener($event) { const node_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onNodeContextMenu($event, node_r10)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const node_r7 = ctx.$implicit;
+    const node_r10 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("fNodeId", node_r7.ID)("fNodePosition", i0.ɵɵpureFunction2(8, _c1, node_r7.Position.X, node_r7.Position.Y))("fNodeDraggingDisabled", ctx_r2.ReadOnly || ctx_r2.panMode || node_r7.Locked === true)("fNodeSelectionDisabled", ctx_r2.panMode)("fConnectOnNode", !ctx_r2.ReadOnly && !ctx_r2.panMode)("Node", node_r7)("TypeConfig", ctx_r2.GetTypeConfig(node_r7.Type))("ReadOnly", ctx_r2.ReadOnly);
+    i0.ɵɵproperty("fNodeId", node_r10.ID)("fNodePosition", i0.ɵɵpureFunction2(8, _c2, node_r10.Position.X, node_r10.Position.Y))("fNodeDraggingDisabled", ctx_r2.ReadOnly || ctx_r2.panMode || node_r10.Locked === true)("fNodeSelectionDisabled", ctx_r2.panMode)("fConnectOnNode", !ctx_r2.ReadOnly && !ctx_r2.panMode)("Node", node_r10)("TypeConfig", ctx_r2.GetTypeConfig(node_r10.Type))("ReadOnly", ctx_r2.ReadOnly);
 } }
-function FlowEditorComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+function FlowEditorComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "f-selection-area");
 } }
-function FlowEditorComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵelement(1, "f-minimap", 28);
+function FlowEditorComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelement(1, "f-minimap", 36);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("fMinSize", 1500);
 } }
-function FlowEditorComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13)(1, "div", 29);
+function FlowEditorComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16)(1, "div", 37);
     i0.ɵɵtext(2, "Legend");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 30)(4, "div", 31);
+    i0.ɵɵelementStart(3, "div", 38)(4, "div", 39);
     i0.ɵɵtext(5, "Connections");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 32);
+    i0.ɵɵelementStart(6, "div", 40);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(7, "svg", 33);
-    i0.ɵɵelement(8, "line", 34);
+    i0.ɵɵelementStart(7, "svg", 41);
+    i0.ɵɵelement(8, "line", 42);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(9, "span");
     i0.ɵɵtext(10, "Only exit path");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 32);
+    i0.ɵɵelementStart(11, "div", 40);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(12, "svg", 33);
-    i0.ɵɵelement(13, "line", 35);
+    i0.ɵɵelementStart(12, "svg", 41);
+    i0.ɵɵelement(13, "line", 43);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelement(14, "i", 36);
+    i0.ɵɵelement(14, "i", 44);
     i0.ɵɵelementStart(15, "span");
     i0.ɵɵtext(16, "Default (fallback)");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 32);
+    i0.ɵɵelementStart(17, "div", 40);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(18, "svg", 33);
-    i0.ɵɵelement(19, "line", 37);
+    i0.ɵɵelementStart(18, "svg", 41);
+    i0.ɵɵelement(19, "line", 45);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(20, "span");
     i0.ɵɵtext(21, "Conditional");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 32);
+    i0.ɵɵelementStart(22, "div", 40);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(23, "svg", 33);
-    i0.ɵɵelement(24, "line", 38);
+    i0.ɵɵelementStart(23, "svg", 41);
+    i0.ɵɵelement(24, "line", 46);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelement(25, "i", 39);
+    i0.ɵɵelement(25, "i", 47);
     i0.ɵɵelementStart(26, "span");
     i0.ɵɵtext(27, "Duplicate defaults");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(28, "div", 30)(29, "div", 31);
+    i0.ɵɵelementStart(28, "div", 38)(29, "div", 39);
     i0.ɵɵtext(30, "Step Types");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(31, "div", 32);
-    i0.ɵɵelement(32, "span", 40);
+    i0.ɵɵelementStart(31, "div", 40);
+    i0.ɵɵelement(32, "span", 48);
     i0.ɵɵelementStart(33, "span");
     i0.ɵɵtext(34, "Action");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(35, "div", 32);
-    i0.ɵɵelement(36, "span", 41);
+    i0.ɵɵelementStart(35, "div", 40);
+    i0.ɵɵelement(36, "span", 49);
     i0.ɵɵelementStart(37, "span");
     i0.ɵɵtext(38, "Prompt");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(39, "div", 32);
-    i0.ɵɵelement(40, "span", 42);
+    i0.ɵɵelementStart(39, "div", 40);
+    i0.ɵɵelement(40, "span", 50);
     i0.ɵɵelementStart(41, "span");
     i0.ɵɵtext(42, "Sub-Agent");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(43, "div", 32);
-    i0.ɵɵelement(44, "span", 43);
+    i0.ɵɵelementStart(43, "div", 40);
+    i0.ɵɵelement(44, "span", 51);
     i0.ɵɵelementStart(45, "span");
     i0.ɵɵtext(46, "For Each");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(47, "div", 32);
-    i0.ɵɵelement(48, "span", 44);
+    i0.ɵɵelementStart(47, "div", 40);
+    i0.ɵɵelement(48, "span", 52);
     i0.ɵɵelementStart(49, "span");
     i0.ɵɵtext(50, "While");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(51, "div", 30)(52, "div", 31);
+    i0.ɵɵelementStart(51, "div", 38)(52, "div", 39);
     i0.ɵɵtext(53, "Borders");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(54, "div", 32);
-    i0.ɵɵelement(55, "span", 45);
+    i0.ɵɵelementStart(54, "div", 40);
+    i0.ɵɵelement(55, "span", 53);
     i0.ɵɵelementStart(56, "span");
     i0.ɵɵtext(57, "Start node");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(58, "div", 32);
-    i0.ɵɵelement(59, "span", 46)(60, "i", 47);
+    i0.ɵɵelementStart(58, "div", 40);
+    i0.ɵɵelement(59, "span", 54)(60, "i", 55);
     i0.ɵɵelementStart(61, "span");
     i0.ɵɵtext(62, "Missing config");
     i0.ɵɵelementEnd()()()();
 } }
-function FlowEditorComponent_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 49);
+function FlowEditorComponent_Conditional_21_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 57);
     i0.ɵɵtext(1, " Or use auto-layout after adding steps to arrange them automatically ");
     i0.ɵɵelementEnd();
 } }
-function FlowEditorComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14)(1, "mj-empty-state", 48);
-    i0.ɵɵconditionalCreate(2, FlowEditorComponent_Conditional_18_Conditional_2_Template, 2, 0, "p", 49);
+function FlowEditorComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17)(1, "mj-empty-state", 56);
+    i0.ɵɵconditionalCreate(2, FlowEditorComponent_Conditional_21_Conditional_2_Template, 2, 0, "p", 57);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -225,33 +252,66 @@ function FlowEditorComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r2.ReadOnly ? 2 : -1);
 } }
-function FlowEditorComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50);
-    i0.ɵɵlistener("click", function FlowEditorComponent_Conditional_19_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "button", 51);
-    i0.ɵɵlistener("click", function FlowEditorComponent_Conditional_19_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onContextMenuAction("edit")); });
-    i0.ɵɵelement(2, "i", 52);
-    i0.ɵɵelementStart(3, "span");
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelement(5, "div", 53);
-    i0.ɵɵelementStart(6, "button", 54);
-    i0.ɵɵlistener("click", function FlowEditorComponent_Conditional_19_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onContextMenuAction("remove")); });
-    i0.ɵɵelement(7, "i", 55);
-    i0.ɵɵelementStart(8, "span");
-    i0.ɵɵtext(9);
-    i0.ɵɵelementEnd()()();
+function FlowEditorComponent_Conditional_22_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 60);
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("ngClass", item_r13.Icon);
+} }
+function FlowEditorComponent_Conditional_22_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kbd", 61);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r13.Shortcut);
+} }
+function FlowEditorComponent_Conditional_22_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 62);
+} }
+function FlowEditorComponent_Conditional_22_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 59);
+    i0.ɵɵlistener("click", function FlowEditorComponent_Conditional_22_For_2_Template_button_click_0_listener() { const item_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onContextMenuAction(item_r13.ID)); });
+    i0.ɵɵconditionalCreate(1, FlowEditorComponent_Conditional_22_For_2_Conditional_1_Template, 1, 1, "i", 60);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, FlowEditorComponent_Conditional_22_For_2_Conditional_4_Template, 2, 1, "kbd", 61);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, FlowEditorComponent_Conditional_22_For_2_Conditional_5_Template, 1, 0, "div", 62);
+} if (rf & 2) {
+    const item_r13 = ctx.$implicit;
+    const $index_r14 = ctx.$index;
+    const ɵ$index_193_r15 = ctx.$index;
+    const ɵ$count_193_r16 = ctx.$count;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("mj-flow-context-menu-item--danger", item_r13.Danger);
+    i0.ɵɵproperty("disabled", item_r13.Disabled);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r13.Icon ? 1 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r13.Label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r13.Shortcut ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!(ɵ$index_193_r15 === ɵ$count_193_r16 - 1) && item_r13.Danger !== (ctx_r2.contextMenuItems[$index_r14 + 1] == null ? null : ctx_r2.contextMenuItems[$index_r14 + 1].Danger) ? 5 : -1);
+} }
+function FlowEditorComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 58);
+    i0.ɵɵlistener("click", function FlowEditorComponent_Conditional_22_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r11); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵrepeaterCreate(1, FlowEditorComponent_Conditional_22_For_2_Template, 6, 7, null, null, _forTrack0);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("left", ctx_r2.contextMenuX, "px")("top", ctx_r2.contextMenuY, "px");
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("Edit ", ctx_r2.contextMenuTargetType === "node" ? "Node" : "Connection");
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1("Remove ", ctx_r2.contextMenuTargetType === "node" ? "Node" : "Connection");
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.contextMenuItems);
 } }
-function FlowEditorComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-flow-status-bar", 16);
+function FlowEditorComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-flow-status-bar", 19);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("NodeCount", ctx_r2.Nodes.length)("ConnectionCount", ctx_r2.Connections.length)("SelectedCount", ctx_r2.selectedCount)("ZoomLevel", ctx_r2.zoomLevel);
@@ -284,21 +344,31 @@ export class FlowEditorComponent {
     ShowPalette = true;
     ShowGrid = true;
     ShowStatusBar = true;
+    /**
+     * Legacy on/off. `false` forces the toolbar fully off (no recover tab). Prefer
+     * `ToolbarVisibility` when the host wants shown / minimized / hidden with a way back.
+     */
     ShowToolbar = true;
+    /** Full bar, a restore chip, or a recover tab. Ignored when `ShowToolbar` is false. */
+    ToolbarVisibility = 'shown';
+    /** Left / center / right along the top of the canvas. */
+    ToolbarAlign = 'center';
     ShowLegend = true;
     GridSize = 20;
     AutoLayoutDirection = 'vertical';
     /** Background color for connection labels */
-    ConnectionLabelBackground = '#fffef5';
+    // Design tokens, not literals — the canvas renders on both themes, and a near-white pill on a
+    // dark canvas made the least important element the most visually dominant thing on screen.
+    ConnectionLabelBackground = 'var(--mj-bg-surface)';
     /** Border color for connection labels */
-    ConnectionLabelBorderColor = '#cbd5e1';
+    ConnectionLabelBorderColor = 'var(--mj-border-default)';
     /** Text color for connection labels */
-    ConnectionLabelTextColor = '#334155';
+    ConnectionLabelTextColor = 'var(--mj-text-secondary)';
     /** Title for the canvas empty-state overlay — depends on read-only mode. */
     get EmptyStateTitle() {
         return this.ReadOnly
             ? 'No steps defined for this flow'
-            : 'Drag steps from the palette to start building your flow';
+            : 'Click a step in the palette — or drag one onto the canvas — to start building your flow';
     }
     // ── Outputs ─────────────────────────────────────────────────
     NodeSelected = new EventEmitter();
@@ -315,17 +385,40 @@ export class FlowEditorComponent {
     ConnectionsChanged = new EventEmitter();
     NodeEditRequested = new EventEmitter();
     ConnectionEditRequested = new EventEmitter();
+    /** Host may replace `Items` or `Cancel` the menu. Debug attaches here — the canvas stays blind. */
+    BeforeContextMenu = new EventEmitter();
+    AfterContextMenuAction = new EventEmitter();
     GridToggled = new EventEmitter();
     MinimapToggled = new EventEmitter();
     LegendToggled = new EventEmitter();
+    /** The person changed shown / minimized / hidden from the canvas chrome. */
+    ToolbarVisibilityChanged = new EventEmitter();
+    /** What the template actually paints — `ShowToolbar === false` is a hard hide. */
+    get EffectiveToolbarVisibility() {
+        return this.ShowToolbar ? this.ToolbarVisibility : 'hidden';
+    }
+    SetToolbarVisibility(next) {
+        if (!this.ShowToolbar)
+            return;
+        if (this.ToolbarVisibility === next)
+            return;
+        this.ToolbarVisibility = next;
+        this.ToolbarVisibilityChanged.emit(next);
+    }
     // ── View Children ───────────────────────────────────────────
     fFlow;
     fCanvas;
     fZoom;
+    canvasArea;
     // ── Internal State ──────────────────────────────────────────
     zoomLevel = 100;
     canvasPosition = { x: 0, y: 0 };
     canvasScale = 1;
+    /** After the first auto-fit, later fLoaded events must not snap the viewport back. */
+    hasAutoFitted = false;
+    /** True once the person zooms or pans — remounts restore this viewport instead of fitting. */
+    viewportOwnedByUser = false;
+    applyingProgrammaticViewport = false;
     selectedNodeIDs = [];
     selectedConnectionIDs = [];
     panMode = false;
@@ -340,9 +433,15 @@ export class FlowEditorComponent {
     contextMenuTargetType = 'node';
     contextMenuNode = null;
     contextMenuConnection = null;
+    contextMenuItems = [];
     destroy$ = new Subject();
     initialized = false;
     lastConnectionClickTime = 0;
+    /** How many click-placed nodes are cascaded before the offset wraps back to the viewport centre. */
+    static CLICK_CASCADE_STEPS = 6;
+    /** Pixels (canvas units) each cascaded click-placed node is offset by. */
+    static CLICK_CASCADE_OFFSET = 40;
+    clickPlacementIndex = 0;
     constructor(cdr, stateService, layoutService) {
         this.cdr = cdr;
         this.stateService = stateService;
@@ -359,10 +458,14 @@ export class FlowEditorComponent {
     // ── Public Methods ──────────────────────────────────────────
     /** Fit all nodes within the viewport */
     ZoomToFit() {
+        this.applyingProgrammaticViewport = true;
         this.fCanvas?.fitToScreen({ x: 150, y: 150 }, true);
+        this.hasAutoFitted = true;
+        queueMicrotask(() => { this.applyingProgrammaticViewport = false; });
     }
     /** Zoom in one step */
     ZoomIn() {
+        this.viewportOwnedByUser = true;
         if (this.fZoom) {
             this.fZoom.zoomIn();
         }
@@ -374,6 +477,7 @@ export class FlowEditorComponent {
     }
     /** Zoom out one step */
     ZoomOut() {
+        this.viewportOwnedByUser = true;
         if (this.fZoom) {
             this.fZoom.zoomOut();
         }
@@ -512,15 +616,29 @@ export class FlowEditorComponent {
     // ── Foblex Event Handlers ──────────────────────────────────
     /** Called when Foblex flow finishes loading */
     onFlowLoaded() {
-        if (this.Nodes.length > 0) {
-            setTimeout(() => this.ZoomToFit(), 200);
+        if (this.Nodes.length === 0)
+            return;
+        if (this.viewportOwnedByUser || this.hasAutoFitted) {
+            this.restoreViewport();
+            return;
         }
+        this.hasAutoFitted = true;
+        setTimeout(() => this.ZoomToFit(), 200);
     }
     /** Canvas zoom/pan changed */
     onCanvasChange(event) {
         this.canvasPosition = event.position;
         this.canvasScale = event.scale;
         this.updateZoomLevel(event.scale);
+        if (!this.applyingProgrammaticViewport)
+            this.viewportOwnedByUser = true;
+    }
+    restoreViewport() {
+        if (!this.fCanvas)
+            return;
+        this.applyingProgrammaticViewport = true;
+        this.fCanvas.setScale(this.canvasScale);
+        queueMicrotask(() => { this.applyingProgrammaticViewport = false; });
     }
     /** User drew a new connection */
     onCreateConnection(event) {
@@ -607,11 +725,7 @@ export class FlowEditorComponent {
     }
     /** External item dropped from palette */
     onCreateNode(event) {
-        if (this.ReadOnly)
-            return;
-        this.pushUndoState();
-        const nodeType = event.data;
-        const config = this.NodeTypes.find(nt => nt.Type === nodeType);
+        const config = this.NodeTypes.find(nt => nt.Type === event.data);
         if (!config)
             return;
         // event.rect is already normalized to canvas coordinates by Foblex's
@@ -619,13 +733,45 @@ export class FlowEditorComponent {
         // Do NOT pass it through getPositionInFlow() again — that double-normalizes
         // and places the node far from the actual drop point.
         // Use the center of the preview rect (≈ cursor position at drop time).
-        const dropPosition = {
+        this.addNodeFromPalette(config, {
             X: event.rect.x + event.rect.width / 2,
             Y: event.rect.y + event.rect.height / 2
-        };
+        });
+    }
+    /**
+     * A palette entry was clicked (or activated from the keyboard) rather than dragged.
+     *
+     * Deliberately routed into the SAME `addNodeFromPalette` the drop path uses. A separate
+     * click-only creation path would be a second way for a node to come into existence, and the two
+     * would drift — which is exactly the failure this fixes, one level up.
+     */
+    onPaletteNodeTypeActivated(config) {
+        this.addNodeFromPalette(config, this.nextClickDropPosition());
+    }
+    /** The one place a palette-originated node is created and announced. */
+    addNodeFromPalette(config, dropPosition) {
+        if (this.ReadOnly)
+            return;
+        this.pushUndoState();
         const newNode = this.createDefaultNode(config, dropPosition);
         this.NodeAdded.emit({ Node: newNode, DropPosition: dropPosition });
     }
+    /**
+     * Where a clicked step lands: the middle of what the author is currently looking at, cascaded so
+     * consecutive clicks don't bury each other under one box.
+     *
+     * A click carries no coordinates, so *some* position has to be invented. The viewport centre is
+     * the only choice that is guaranteed on screen at any zoom or pan — placing at the canvas origin
+     * would drop steps off-screen the moment the author has scrolled anywhere.
+     */
+    nextClickDropPosition() {
+        const rect = this.canvasArea?.nativeElement.getBoundingClientRect();
+        const scale = this.canvasScale || 1;
+        const centerX = ((rect?.width ?? 800) / 2 - this.canvasPosition.x) / scale;
+        const centerY = ((rect?.height ?? 600) / 2 - this.canvasPosition.y) / scale;
+        const step = (this.clickPlacementIndex++ % FlowEditorComponent.CLICK_CASCADE_STEPS) * FlowEditorComponent.CLICK_CASCADE_OFFSET;
+        return { X: Math.round(centerX + step), Y: Math.round(centerY + step) };
+    }
     /** Selection changed in Foblex */
     onSelectionChange(event) {
         const timeSinceClick = Date.now() - this.lastConnectionClickTime;
@@ -700,11 +846,9 @@ export class FlowEditorComponent {
     }
     // ── Context Menu ───────────────────────────────────────────
     onNodeContextMenu(event, node) {
-        if (this.ReadOnly)
-            return;
         event.preventDefault();
         event.stopPropagation();
-        this.showContextMenu(event, 'node', node, null);
+        this.openContextMenu(event, 'node', node, null);
     }
     /** Direct click on a connection — ensures ConnectionSelected fires reliably */
     onConnectionClicked(event, conn) {
@@ -718,41 +862,53 @@ export class FlowEditorComponent {
         this.cdr.detectChanges();
     }
     onConnectionContextMenu(event, conn) {
-        if (this.ReadOnly)
-            return;
         event.preventDefault();
         event.stopPropagation();
-        this.showContextMenu(event, 'connection', null, conn);
+        this.openContextMenu(event, 'connection', null, conn);
     }
     onContextMenuAction(action) {
+        // Capture the target BEFORE closing: hideContextMenu() nulls contextMenuNode and
+        // contextMenuConnection, so reading them afterwards found nothing and every branch below fell
+        // through — the menu closed and neither Remove nor Edit did anything, for nodes or connections.
+        const targetType = this.contextMenuTargetType;
+        const node = this.contextMenuNode;
+        const connection = this.contextMenuConnection;
         this.hideContextMenu();
-        if (action === 'edit') {
-            if (this.contextMenuTargetType === 'node' && this.contextMenuNode) {
-                this.NodeEditRequested.emit(this.contextMenuNode);
+        if (!this.ReadOnly && action === 'edit') {
+            if (targetType === 'node' && node) {
+                this.NodeEditRequested.emit(node);
             }
-            else if (this.contextMenuTargetType === 'connection' && this.contextMenuConnection) {
-                this.ConnectionEditRequested.emit(this.contextMenuConnection);
+            else if (targetType === 'connection' && connection) {
+                this.ConnectionEditRequested.emit(connection);
             }
         }
-        else if (action === 'remove') {
-            this.pushUndoState();
-            if (this.contextMenuTargetType === 'node' && this.contextMenuNode) {
-                this.removeNodeById(this.contextMenuNode.ID);
+        else if (!this.ReadOnly && action === 'remove') {
+            if (targetType === 'node' && node) {
+                this.pushUndoState();
+                this.removeNodeById(node.ID);
             }
-            else if (this.contextMenuTargetType === 'connection' && this.contextMenuConnection) {
-                this.removeConnectionById(this.contextMenuConnection.ID);
+            else if (targetType === 'connection' && connection) {
+                this.pushUndoState();
+                this.removeConnectionById(connection.ID);
             }
         }
+        this.AfterContextMenuAction.emit(new FlowAfterContextMenuActionEventArgs(action, targetType, node, connection));
     }
     onDocumentClick() {
         if (this.contextMenuVisible) {
             this.hideContextMenu();
         }
     }
-    showContextMenu(event, targetType, node, connection) {
+    openContextMenu(event, targetType, node, connection) {
+        const defaults = this.ReadOnly ? [] : defaultContextMenuItems(targetType);
+        const before = new FlowBeforeContextMenuEventArgs(targetType, node, connection, event, defaults);
+        this.BeforeContextMenu.emit(before);
+        if (before.Cancel || before.Items.length === 0)
+            return;
         this.contextMenuTargetType = targetType;
         this.contextMenuNode = node;
         this.contextMenuConnection = connection;
+        this.contextMenuItems = before.Items;
         this.contextMenuX = event.clientX;
         this.contextMenuY = event.clientY;
         this.contextMenuVisible = true;
@@ -927,78 +1083,79 @@ export class FlowEditorComponent {
     }
     static ɵfac = function FlowEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FlowEditorComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.FlowStateService), i0.ɵɵdirectiveInject(i2.FlowLayoutService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FlowEditorComponent, selectors: [["mj-flow-editor"]], viewQuery: function FlowEditorComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(FFlowComponent, 5)(FCanvasComponent, 5)(_c0, 5);
+            i0.ɵɵviewQuery(FFlowComponent, 5)(FCanvasComponent, 5)(_c0, 5)(_c1, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fFlow = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fCanvas = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fZoom = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.canvasArea = _t.first);
         } }, hostBindings: function FlowEditorComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("click", function FlowEditorComponent_click_HostBindingHandler() { return ctx.onDocumentClick(); }, i0.ɵɵresolveDocument)("keydown", function FlowEditorComponent_keydown_HostBindingHandler($event) { return ctx.onKeyDown($event); });
-        } }, inputs: { Nodes: "Nodes", Connections: "Connections", NodeTypes: "NodeTypes", ReadOnly: "ReadOnly", ShowMinimap: "ShowMinimap", ShowPalette: "ShowPalette", ShowGrid: "ShowGrid", ShowStatusBar: "ShowStatusBar", ShowToolbar: "ShowToolbar", ShowLegend: "ShowLegend", GridSize: "GridSize", AutoLayoutDirection: "AutoLayoutDirection", ConnectionLabelBackground: "ConnectionLabelBackground", ConnectionLabelBorderColor: "ConnectionLabelBorderColor", ConnectionLabelTextColor: "ConnectionLabelTextColor" }, outputs: { NodeSelected: "NodeSelected", NodeAdded: "NodeAdded", NodeRemoved: "NodeRemoved", NodeMoved: "NodeMoved", ConnectionCreated: "ConnectionCreated", ConnectionRemoved: "ConnectionRemoved", ConnectionReassigned: "ConnectionReassigned", ConnectionSelected: "ConnectionSelected", SelectionChanged: "SelectionChanged", CanvasClicked: "CanvasClicked", NodesChanged: "NodesChanged", ConnectionsChanged: "ConnectionsChanged", NodeEditRequested: "NodeEditRequested", ConnectionEditRequested: "ConnectionEditRequested", GridToggled: "GridToggled", MinimapToggled: "MinimapToggled", LegendToggled: "LegendToggled" }, standalone: false, features: [i0.ɵɵProvidersFeature([FlowStateService, FlowLayoutService])], decls: 21, vars: 25, consts: [["fZoomRef", "fComponent"], ["tabindex", "0", 1, "mj-flow-editor"], [1, "mj-flow-editor-toolbar-area"], [1, "mj-flow-editor-canvas-area"], [3, "NodeTypes"], [1, "mj-flow-editor-canvas"], ["fDraggable", "", 3, "fLoaded", "fCreateConnection", "fReassignConnection", "fCreateNode", "fSelectionChange", "fMoveNodes", "fDraggableDisabled", "fCanvasMoveTrigger", "vCellSize", "hCellSize", "fCellSizeWhileDragging"], [3, "fAlignThreshold"], ["fZoom", "", 3, "fCanvasChange", "fZoomMinimum", "fZoomMaximum", "fZoomStep", "position", "scale"], ["fType", "bezier", 3, "fRadius", "fOffset"], ["fType", "bezier", "fBehavior", "fixed", 3, "fConnectionId", "fOutputId", "fInputId", "fRadius", "fOffset", "fSelectionDisabled", "fReassignDisabled", "--connection-color", "mj-flow-connection-colored", "mj-flow-connection-dashed", "mj-flow-connection-dotted"], ["fNode", "", "fDragHandle", "", 3, "fNodeId", "fNodePosition", "fNodeDraggingDisabled", "fNodeSelectionDisabled", "fConnectOnNode", "Node", "TypeConfig", "ReadOnly"], ["fDragBlocker", "", 1, "mj-flow-editor-minimap"], [1, "mj-flow-editor-legend"], [1, "mj-flow-editor-empty"], [1, "mj-flow-context-menu", 3, "left", "top"], [3, "NodeCount", "ConnectionCount", "SelectedCount", "ZoomLevel"], [3, "ZoomInClicked", "ZoomOutClicked", "FitToScreenClicked", "AutoLayoutClicked", "GridToggled", "MinimapToggled", "LegendToggled", "PanModeToggled", "ZoomLevel", "ShowGrid", "ShowMinimap", "ShowLegend", "ReadOnly", "PanMode"], [3, "color", "radius"], ["viewBox", "0 0 10 10", "fMarker", "", "type", "end", "orient", "auto", 3, "refX", "refY", "height", "width"], ["d", "M0 0L10 5L0 10Z", "fill", "#94a3b8"], ["fType", "bezier", "fBehavior", "fixed", 3, "click", "contextmenu", "fConnectionId", "fOutputId", "fInputId", "fRadius", "fOffset", "fSelectionDisabled", "fReassignDisabled"], ["d", "M0 0L10 5L0 10Z"], ["fConnectionContent", "", 1, "mj-flow-connection-label", 3, "position", "backgroundColor", "borderColor", "color", "title"], ["fConnectionContent", "", 1, "mj-flow-connection-label", 3, "position", "title"], [1, "fa-solid", "mj-flow-connection-label-icon", 3, "ngClass", "color"], [1, "fa-solid", "mj-flow-connection-label-icon", 3, "ngClass"], ["fNode", "", "fDragHandle", "", 3, "contextmenu", "fNodeId", "fNodePosition", "fNodeDraggingDisabled", "fNodeSelectionDisabled", "fConnectOnNode", "Node", "TypeConfig", "ReadOnly"], [3, "fMinSize"], [1, "mj-flow-editor-legend-title"], [1, "mj-flow-editor-legend-section"], [1, "mj-flow-editor-legend-heading"], [1, "mj-flow-editor-legend-item"], ["width", "28", "height", "10", 1, "mj-flow-editor-legend-line-svg"], ["x1", "0", "y1", "5", "x2", "28", "y2", "5", "stroke", "#64748b", "stroke-width", "2"], ["x1", "0", "y1", "5", "x2", "28", "y2", "5", "stroke", "#16a34a", "stroke-width", "2"], [1, "fa-solid", "fa-circle-check", 2, "color", "#16a34a", "font-size", "10px"], ["x1", "0", "y1", "5", "x2", "28", "y2", "5", "stroke", "#f59e0b", "stroke-width", "2", "stroke-dasharray", "5 3"], ["x1", "0", "y1", "5", "x2", "28", "y2", "5", "stroke", "#ef4444", "stroke-width", "2"], [1, "fa-solid", "fa-triangle-exclamation", 2, "color", "#ef4444", "font-size", "10px"], [1, "mj-flow-editor-legend-swatch", 2, "background", "#3B82F6"], [1, "mj-flow-editor-legend-swatch", 2, "background", "#8B5CF6"], [1, "mj-flow-editor-legend-swatch", 2, "background", "#10B981"], [1, "mj-flow-editor-legend-swatch", 2, "background", "#F59E0B"], [1, "mj-flow-editor-legend-swatch", 2, "background", "#F97316"], [1, "mj-flow-editor-legend-box", 2, "border-color", "#16a34a", "background", "#f0fdf4"], [1, "mj-flow-editor-legend-box", 2, "border-color", "#ef4444", "background", "#fef2f2"], [1, "fa-solid", "fa-triangle-exclamation", 2, "color", "#ea580c", "font-size", "10px"], ["Icon", "fa-solid fa-diagram-project", 3, "Title"], [1, "mj-flow-editor-empty-subtitle"], [1, "mj-flow-context-menu", 3, "click"], [1, "mj-flow-context-menu-item", 3, "click"], [1, "fa-solid", "fa-pen-to-square"], [1, "mj-flow-context-menu-divider"], [1, "mj-flow-context-menu-item", "mj-flow-context-menu-item--danger", 3, "click"], [1, "fa-solid", "fa-trash-can"]], template: function FlowEditorComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { Nodes: "Nodes", Connections: "Connections", NodeTypes: "NodeTypes", ReadOnly: "ReadOnly", ShowMinimap: "ShowMinimap", ShowPalette: "ShowPalette", ShowGrid: "ShowGrid", ShowStatusBar: "ShowStatusBar", ShowToolbar: "ShowToolbar", ToolbarVisibility: "ToolbarVisibility", ToolbarAlign: "ToolbarAlign", ShowLegend: "ShowLegend", GridSize: "GridSize", AutoLayoutDirection: "AutoLayoutDirection", ConnectionLabelBackground: "ConnectionLabelBackground", ConnectionLabelBorderColor: "ConnectionLabelBorderColor", ConnectionLabelTextColor: "ConnectionLabelTextColor" }, outputs: { NodeSelected: "NodeSelected", NodeAdded: "NodeAdded", NodeRemoved: "NodeRemoved", NodeMoved: "NodeMoved", ConnectionCreated: "ConnectionCreated", ConnectionRemoved: "ConnectionRemoved", ConnectionReassigned: "ConnectionReassigned", ConnectionSelected: "ConnectionSelected", SelectionChanged: "SelectionChanged", CanvasClicked: "CanvasClicked", NodesChanged: "NodesChanged", ConnectionsChanged: "ConnectionsChanged", NodeEditRequested: "NodeEditRequested", ConnectionEditRequested: "ConnectionEditRequested", BeforeContextMenu: "BeforeContextMenu", AfterContextMenuAction: "AfterContextMenuAction", GridToggled: "GridToggled", MinimapToggled: "MinimapToggled", LegendToggled: "LegendToggled", ToolbarVisibilityChanged: "ToolbarVisibilityChanged" }, standalone: false, features: [i0.ɵɵProvidersFeature([FlowStateService, FlowLayoutService])], decls: 24, vars: 25, consts: [["canvasArea", ""], ["fZoomRef", "fComponent"], ["tabindex", "0", 1, "mj-flow-editor"], [1, "mj-flow-editor-toolbar-area"], ["type", "button", "title", "Show canvas tools", "aria-label", "Show canvas tools", 1, "mj-flow-editor-toolbar-chip"], ["type", "button", "title", "Show canvas tools", "aria-label", "Show canvas tools", 1, "mj-flow-editor-toolbar-tab"], [1, "mj-flow-editor-canvas-area"], [3, "NodeTypes"], [1, "mj-flow-editor-canvas"], ["fDraggable", "", 3, "fLoaded", "fCreateConnection", "fReassignConnection", "fCreateNode", "fSelectionChange", "fMoveNodes", "fDraggableDisabled", "fCanvasMoveTrigger", "vCellSize", "hCellSize", "fCellSizeWhileDragging"], [3, "fAlignThreshold"], ["fZoom", "", 3, "fCanvasChange", "fZoomMinimum", "fZoomMaximum", "fZoomStep", "position", "scale"], ["fType", "bezier", 3, "fRadius", "fOffset"], ["fType", "bezier", "fBehavior", "fixed", 3, "fConnectionId", "fOutputId", "fInputId", "fRadius", "fOffset", "fSelectionDisabled", "fReassignDisabled", "--connection-color", "--connection-width", "mj-flow-connection-colored", "mj-flow-connection-dashed", "mj-flow-connection-dotted", "mj-flow-connection-animated"], ["fNode", "", "fDragHandle", "", 3, "fNodeId", "fNodePosition", "fNodeDraggingDisabled", "fNodeSelectionDisabled", "fConnectOnNode", "Node", "TypeConfig", "ReadOnly"], ["fDragBlocker", "", 1, "mj-flow-editor-minimap"], [1, "mj-flow-editor-legend"], [1, "mj-flow-editor-empty"], [1, "mj-flow-context-menu", 3, "left", "top"], [3, "NodeCount", "ConnectionCount", "SelectedCount", "ZoomLevel"], [3, "ZoomInClicked", "ZoomOutClicked", "FitToScreenClicked", "AutoLayoutClicked", "GridToggled", "MinimapToggled", "LegendToggled", "PanModeToggled", "MinimizeClicked", "HideClicked", "ZoomLevel", "ShowGrid", "ShowMinimap", "ShowLegend", "ReadOnly", "PanMode"], ["type", "button", "title", "Show canvas tools", "aria-label", "Show canvas tools", 1, "mj-flow-editor-toolbar-chip", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-wrench"], ["type", "button", "title", "Show canvas tools", "aria-label", "Show canvas tools", 1, "mj-flow-editor-toolbar-tab", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-ellipsis"], [3, "NodeTypeActivated", "NodeTypes"], [3, "color", "radius"], ["viewBox", "0 0 10 10", "fMarker", "", "type", "end", "orient", "auto", 3, "refX", "refY", "height", "width"], ["d", "M0 0L10 5L0 10Z", "fill", "#94a3b8"], ["fType", "bezier", "fBehavior", "fixed", 3, "click", "contextmenu", "fConnectionId", "fOutputId", "fInputId", "fRadius", "fOffset", "fSelectionDisabled", "fReassignDisabled"], ["d", "M0 0L10 5L0 10Z"], ["fConnectionContent", "", 1, "mj-flow-connection-label", 3, "position", "backgroundColor", "borderColor", "color", "title"], ["fConnectionContent", "", 1, "mj-flow-connection-label", 3, "position", "title"], [1, "fa-solid", "mj-flow-connection-label-icon", 3, "ngClass", "color"], [1, "fa-solid", "mj-flow-connection-label-icon", 3, "ngClass"], ["fNode", "", "fDragHandle", "", 3, "contextmenu", "fNodeId", "fNodePosition", "fNodeDraggingDisabled", "fNodeSelectionDisabled", "fConnectOnNode", "Node", "TypeConfig", "ReadOnly"], [3, "fMinSize"], [1, "mj-flow-editor-legend-title"], [1, "mj-flow-editor-legend-section"], [1, "mj-flow-editor-legend-heading"], [1, "mj-flow-editor-legend-item"], ["width", "28", "height", "10", 1, "mj-flow-editor-legend-line-svg"], ["x1", "0", "y1", "5", "x2", "28", "y2", "5", "stroke", "#64748b", "stroke-width", "2"], ["x1", "0", "y1", "5", "x2", "28", "y2", "5", "stroke", "#16a34a", "stroke-width", "2"], [1, "fa-solid", "fa-circle-check", 2, "color", "#16a34a", "font-size", "10px"], ["x1", "0", "y1", "5", "x2", "28", "y2", "5", "stroke", "#f59e0b", "stroke-width", "2", "stroke-dasharray", "5 3"], ["x1", "0", "y1", "5", "x2", "28", "y2", "5", "stroke", "#ef4444", "stroke-width", "2"], [1, "fa-solid", "fa-triangle-exclamation", 2, "color", "#ef4444", "font-size", "10px"], [1, "mj-flow-editor-legend-swatch", 2, "background", "#3B82F6"], [1, "mj-flow-editor-legend-swatch", 2, "background", "#8B5CF6"], [1, "mj-flow-editor-legend-swatch", 2, "background", "#10B981"], [1, "mj-flow-editor-legend-swatch", 2, "background", "#F59E0B"], [1, "mj-flow-editor-legend-swatch", 2, "background", "#F97316"], [1, "mj-flow-editor-legend-box", 2, "border-color", "#16a34a", "background", "#f0fdf4"], [1, "mj-flow-editor-legend-box", 2, "border-color", "#ef4444", "background", "#fef2f2"], [1, "fa-solid", "fa-triangle-exclamation", 2, "color", "#ea580c", "font-size", "10px"], ["Icon", "fa-solid fa-diagram-project", 3, "Title"], [1, "mj-flow-editor-empty-subtitle"], [1, "mj-flow-context-menu", 3, "click"], ["type", "button", 1, "mj-flow-context-menu-item", 3, "click", "disabled"], [1, "fa-solid", 3, "ngClass"], [1, "mj-flow-context-menu-shortcut"], [1, "mj-flow-context-menu-divider"]], template: function FlowEditorComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵconditionalCreate(1, FlowEditorComponent_Conditional_1_Template, 2, 6, "div", 2);
-            i0.ɵɵelementStart(2, "div", 3);
-            i0.ɵɵconditionalCreate(3, FlowEditorComponent_Conditional_3_Template, 1, 1, "mj-flow-palette", 4);
-            i0.ɵɵelementStart(4, "div", 5)(5, "f-flow", 6);
-            i0.ɵɵlistener("fLoaded", function FlowEditorComponent_Template_f_flow_fLoaded_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onFlowLoaded()); })("fCreateConnection", function FlowEditorComponent_Template_f_flow_fCreateConnection_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCreateConnection($event)); })("fReassignConnection", function FlowEditorComponent_Template_f_flow_fReassignConnection_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onReassignConnection($event)); })("fCreateNode", function FlowEditorComponent_Template_f_flow_fCreateNode_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCreateNode($event)); })("fSelectionChange", function FlowEditorComponent_Template_f_flow_fSelectionChange_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSelectionChange($event)); })("fMoveNodes", function FlowEditorComponent_Template_f_flow_fMoveNodes_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onNodesMoved($event)); });
-            i0.ɵɵconditionalCreate(6, FlowEditorComponent_Conditional_6_Template, 2, 2, "f-background");
-            i0.ɵɵconditionalCreate(7, FlowEditorComponent_Conditional_7_Template, 1, 1, "f-line-alignment", 7);
-            i0.ɵɵelementStart(8, "f-canvas", 8, 0);
-            i0.ɵɵlistener("fCanvasChange", function FlowEditorComponent_Template_f_canvas_fCanvasChange_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCanvasChange($event)); });
-            i0.ɵɵconditionalCreate(10, FlowEditorComponent_Conditional_10_Template, 3, 6, "f-connection-for-create", 9);
-            i0.ɵɵrepeaterCreate(11, FlowEditorComponent_For_12_Template, 4, 21, "f-connection", 10, ctx.trackConnectionById, true);
-            i0.ɵɵrepeaterCreate(13, FlowEditorComponent_For_14_Template, 1, 11, "mj-flow-node", 11, ctx.trackNodeById, true);
+            i0.ɵɵelementStart(0, "div", 2);
+            i0.ɵɵconditionalCreate(1, FlowEditorComponent_Conditional_1_Template, 2, 7, "div", 3)(2, FlowEditorComponent_Conditional_2_Template, 2, 1, "button", 4)(3, FlowEditorComponent_Conditional_3_Template, 2, 1, "button", 5);
+            i0.ɵɵelementStart(4, "div", 6);
+            i0.ɵɵconditionalCreate(5, FlowEditorComponent_Conditional_5_Template, 1, 1, "mj-flow-palette", 7);
+            i0.ɵɵelementStart(6, "div", 8, 0)(8, "f-flow", 9);
+            i0.ɵɵlistener("fLoaded", function FlowEditorComponent_Template_f_flow_fLoaded_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onFlowLoaded()); })("fCreateConnection", function FlowEditorComponent_Template_f_flow_fCreateConnection_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCreateConnection($event)); })("fReassignConnection", function FlowEditorComponent_Template_f_flow_fReassignConnection_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onReassignConnection($event)); })("fCreateNode", function FlowEditorComponent_Template_f_flow_fCreateNode_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCreateNode($event)); })("fSelectionChange", function FlowEditorComponent_Template_f_flow_fSelectionChange_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSelectionChange($event)); })("fMoveNodes", function FlowEditorComponent_Template_f_flow_fMoveNodes_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onNodesMoved($event)); });
+            i0.ɵɵconditionalCreate(9, FlowEditorComponent_Conditional_9_Template, 2, 2, "f-background");
+            i0.ɵɵconditionalCreate(10, FlowEditorComponent_Conditional_10_Template, 1, 1, "f-line-alignment", 10);
+            i0.ɵɵelementStart(11, "f-canvas", 11, 1);
+            i0.ɵɵlistener("fCanvasChange", function FlowEditorComponent_Template_f_canvas_fCanvasChange_11_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCanvasChange($event)); });
+            i0.ɵɵconditionalCreate(13, FlowEditorComponent_Conditional_13_Template, 3, 6, "f-connection-for-create", 12);
+            i0.ɵɵrepeaterCreate(14, FlowEditorComponent_For_15_Template, 4, 25, "f-connection", 13, ctx.trackConnectionById, true);
+            i0.ɵɵrepeaterCreate(16, FlowEditorComponent_For_17_Template, 1, 11, "mj-flow-node", 14, ctx.trackNodeById, true);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(15, FlowEditorComponent_Conditional_15_Template, 1, 0, "f-selection-area");
-            i0.ɵɵconditionalCreate(16, FlowEditorComponent_Conditional_16_Template, 2, 1, "div", 12);
+            i0.ɵɵconditionalCreate(18, FlowEditorComponent_Conditional_18_Template, 1, 0, "f-selection-area");
+            i0.ɵɵconditionalCreate(19, FlowEditorComponent_Conditional_19_Template, 2, 1, "div", 15);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(17, FlowEditorComponent_Conditional_17_Template, 63, 0, "div", 13);
-            i0.ɵɵconditionalCreate(18, FlowEditorComponent_Conditional_18_Template, 3, 2, "div", 14);
+            i0.ɵɵconditionalCreate(20, FlowEditorComponent_Conditional_20_Template, 63, 0, "div", 16);
+            i0.ɵɵconditionalCreate(21, FlowEditorComponent_Conditional_21_Template, 3, 2, "div", 17);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(19, FlowEditorComponent_Conditional_19_Template, 10, 6, "div", 15);
-            i0.ɵɵconditionalCreate(20, FlowEditorComponent_Conditional_20_Template, 1, 4, "mj-flow-status-bar", 16);
+            i0.ɵɵconditionalCreate(22, FlowEditorComponent_Conditional_22_Template, 3, 4, "div", 18);
+            i0.ɵɵconditionalCreate(23, FlowEditorComponent_Conditional_23_Template, 1, 4, "mj-flow-status-bar", 19);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassProp("mj-flow-editor--readonly", ctx.ReadOnly);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowToolbar ? 1 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.ShowPalette && !ctx.ReadOnly ? 3 : -1);
+            i0.ɵɵconditional(ctx.ShowToolbar && ctx.EffectiveToolbarVisibility === "shown" ? 1 : ctx.ShowToolbar && ctx.EffectiveToolbarVisibility === "minimized" ? 2 : ctx.ShowToolbar && ctx.EffectiveToolbarVisibility === "hidden" ? 3 : -1);
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.ShowPalette && !ctx.ReadOnly ? 5 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("mj-flow-editor-canvas--pan-mode", ctx.panMode);
-            i0.ɵɵadvance();
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("fDraggableDisabled", false)("fCanvasMoveTrigger", ctx.canvasMoveTriggerFn)("vCellSize", ctx.GridSize)("hCellSize", ctx.GridSize)("fCellSizeWhileDragging", ctx.ShowGrid);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowGrid ? 6 : -1);
+            i0.ɵɵconditional(ctx.ShowGrid ? 9 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.ReadOnly ? 7 : -1);
+            i0.ɵɵconditional(!ctx.ReadOnly ? 10 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("fZoomMinimum", 0.15)("fZoomMaximum", 3)("fZoomStep", 0.1)("position", ctx.canvasPosition)("scale", ctx.canvasScale);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(!ctx.ReadOnly ? 10 : -1);
+            i0.ɵɵconditional(!ctx.ReadOnly ? 13 : -1);
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.Connections);
             i0.ɵɵadvance(2);
             i0.ɵɵrepeater(ctx.Nodes);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(!ctx.ReadOnly ? 15 : -1);
+            i0.ɵɵconditional(!ctx.ReadOnly ? 18 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowMinimap ? 16 : -1);
+            i0.ɵɵconditional(ctx.ShowMinimap ? 19 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowLegend && ctx.Nodes.length > 0 ? 17 : -1);
+            i0.ɵɵconditional(ctx.ShowLegend && ctx.Nodes.length > 0 ? 20 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.Nodes.length === 0 ? 18 : -1);
+            i0.ɵɵconditional(ctx.Nodes.length === 0 ? 21 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.contextMenuVisible ? 19 : -1);
+            i0.ɵɵconditional(ctx.contextMenuVisible ? 22 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowStatusBar ? 20 : -1);
-        } }, dependencies: [i3.NgClass, i4.FFlowComponent, i4.FCanvasComponent, i4.FBackgroundComponent, i4.FCirclePatternComponent, i4.FZoomDirective, i4.FConnectionContent, i4.FConnectionMarker, i4.FConnectionComponent, i4.FConnectionForCreateComponent, i4.FLineAlignmentComponent, i4.FMinimapComponent, i4.FNodeDirective, i4.FDragHandleDirective, i4.FSelectionAreaComponent, i4.FDragBlockerDirective, i4.FDraggableDirective, i5.MJEmptyStateComponent, i6.FlowNodeComponent, i7.FlowPaletteComponent, i8.FlowToolbarComponent, i9.FlowStatusBarComponent], styles: ["/* ============================================================\n   Flow Editor \u2014 Main container styles\n   ============================================================ */\n\n.mj-flow-editor {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 400px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  outline: none;\n  position: relative;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n}\n\n.mj-flow-editor--readonly .mj-flow-node-port {\n  cursor: default;\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Toolbar Area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-toolbar-area {\n  position: absolute;\n  top: 10px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 20;\n}\n\n/* \u2500\u2500 Canvas Area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-canvas-area {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n}\n\n.mj-flow-editor-canvas {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.mj-flow-editor-canvas f-flow {\n  width: 100%;\n  height: 100%;\n}\n\n/* Pan mode \u2014 grab cursor, nodes pass through pointer events to canvas */\n.mj-flow-editor-canvas--pan-mode {\n  cursor: grab;\n}\n\n.mj-flow-editor-canvas--pan-mode:active {\n  cursor: grabbing;\n}\n\n.mj-flow-editor-canvas--pan-mode mj-flow-node {\n  pointer-events: none;\n  cursor: grab;\n}\n\n.mj-flow-editor-canvas--pan-mode f-connection {\n  pointer-events: none;\n}\n\n.mj-flow-editor-canvas--pan-mode .mj-flow-connection-label {\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Minimap \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-minimap {\n  position: absolute;\n  bottom: 12px;\n  right: 12px;\n  width: 160px;\n  height: 120px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-sm);\n  overflow: hidden;\n  z-index: 15;\n}\n\n.mj-flow-editor-minimap f-minimap {\n  width: 100%;\n  height: 100%;\n}\n\n/* Foblex minimap SVG node rectangles (no default styles provided by Foblex) */\n.mj-flow-editor-minimap .f-minimap-node {\n  fill: var(--mj-border-strong);\n  stroke: var(--mj-text-disabled);\n  stroke-width: 1;\n  rx: 3;\n  ry: 3;\n}\n\n.mj-flow-editor-minimap .f-minimap-node.f-selected {\n  fill: color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-bg-surface));\n  stroke: var(--mj-brand-primary);\n  stroke-width: 1.5;\n}\n\n.mj-flow-editor-minimap .f-minimap-group {\n  fill: var(--mj-border-default);\n  stroke: var(--mj-text-disabled);\n  stroke-width: 0.5;\n  rx: 2;\n  ry: 2;\n}\n\n/* Viewport indicator rectangle */\n.mj-flow-editor-minimap .f-minimap-view {\n  fill: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  stroke: var(--mj-brand-primary);\n  stroke-width: 1.5;\n}\n\n/* \u2500\u2500 Empty State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-empty {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  z-index: 5;\n}\n\n.mj-flow-editor-empty-subtitle {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-disabled);\n  margin: 0;\n}\n\n/* \u2500\u2500 Connection Labels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-connection-label {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: 5px;\n  background: var(--mj-bg-surface);\n  border: 1.5px solid var(--mj-border-strong);\n  border-radius: 5px;\n  padding: 4px 10px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n  box-shadow: var(--mj-shadow-sm);\n  pointer-events: none;\n  line-height: 1.4;\n  text-align: center;\n}\n\n.mj-flow-connection-label-icon {\n  font-size: 10px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n/* \u2500\u2500 Foblex Overrides \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Canvas \u2014 transparent so the grid pattern shows through */\nf-canvas {\n  background: transparent;\n}\n\n/* Selection area */\nf-selection-area {\n  --f-selection-area-background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  --f-selection-area-border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n/* Line alignment guides */\nf-line-alignment {\n  --f-line-alignment-color: var(--mj-brand-primary);\n}\n\n/* Connection paths \u2014 default stroke color prevents invisible connections */\n.f-connection path {\n  stroke: var(--mj-text-disabled);\n  stroke-width: 2;\n  fill: none;\n  transition: stroke 0.15s ease, stroke-width 0.15s ease;\n}\n\n.f-connection:hover path {\n  stroke-width: 3;\n}\n\n.f-connection.f-selected path {\n  stroke: var(--mj-brand-primary);\n  stroke-width: 3;\n}\n\n/* Colored connections use the --connection-color custom property,\n   defaulting to neutral when no color is specified by the consumer */\n.mj-flow-connection-colored path {\n  stroke: var(--connection-color, var(--mj-text-disabled));\n}\n\n.mj-flow-connection-colored.f-selected path {\n  stroke: var(--connection-color, var(--mj-brand-primary));\n  stroke-width: 3;\n  filter: brightness(0.85);\n}\n\n/* Dashed connection style */\n.mj-flow-connection-dashed path {\n  stroke-dasharray: 8 4;\n}\n\n/* Dotted connection style */\n.mj-flow-connection-dotted path {\n  stroke-dasharray: 3 3;\n}\n\n/* Connection for create (dragging) */\n.f-connection-for-create path {\n  stroke: var(--mj-text-disabled);\n  stroke-dasharray: 6 3;\n  stroke-width: 2;\n}\n\n/* \u2500\u2500 Legend \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-legend {\n  position: absolute;\n  bottom: 12px;\n  left: 12px;\n  background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n  backdrop-filter: blur(6px);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 10px 14px;\n  box-shadow: var(--mj-shadow-sm);\n  z-index: 15;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  max-width: 200px;\n}\n\n.mj-flow-editor-legend-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.mj-flow-editor-legend-section {\n  margin-bottom: 8px;\n}\n\n.mj-flow-editor-legend-section:last-child {\n  margin-bottom: 0;\n}\n\n.mj-flow-editor-legend-heading {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 4px;\n}\n\n.mj-flow-editor-legend-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 0;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n}\n\n.mj-flow-editor-legend-svg,\n.mj-flow-editor-legend-line-svg {\n  flex-shrink: 0;\n}\n\n.mj-flow-editor-legend-swatch {\n  display: inline-block;\n  width: 10px;\n  height: 10px;\n  border-radius: var(--mj-radius-sm);\n  flex-shrink: 0;\n}\n\n.mj-flow-editor-legend-box {\n  display: inline-block;\n  width: 14px;\n  height: 10px;\n  border: 2px solid;\n  border-radius: var(--mj-radius-sm);\n  flex-shrink: 0;\n}\n\n/* \u2500\u2500 Context Menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-context-menu {\n  position: fixed;\n  min-width: 180px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  padding: 4px;\n  z-index: 9999;\n  animation: mj-ctx-fade-in 0.1s ease-out;\n}\n\n@keyframes mj-ctx-fade-in {\n  from { opacity: 0; transform: scale(0.95); }\n  to { opacity: 1; transform: scale(1); }\n}\n\n.mj-flow-context-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 8px 12px;\n  border: none;\n  background: none;\n  font-size: var(--mj-text-sm);\n  font-weight: 450;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: 5px;\n  text-align: left;\n  transition: background-color 0.1s ease;\n}\n\n.mj-flow-context-menu-item:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.mj-flow-context-menu-item i {\n  width: 16px;\n  text-align: center;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.mj-flow-context-menu-item--danger {\n  color: var(--mj-status-error);\n}\n\n.mj-flow-context-menu-item--danger:hover {\n  background-color: var(--mj-status-error-subtle);\n}\n\n.mj-flow-context-menu-item--danger i {\n  color: var(--mj-status-error);\n}\n\n.mj-flow-context-menu-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 8px;\n}\n\n/* \u2500\u2500 Focus Indicators (Accessibility) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-toolbar-btn:focus-visible,\n.mj-agent-editor-btn:focus-visible,\n.mj-agent-editor-view-btn:focus-visible,\n.mj-agent-props-close:focus-visible,\n.mj-agent-props-delete-btn:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n.mj-flow-palette-item:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 1px;\n  border-radius: var(--mj-radius-md);\n}\n"], encapsulation: 2 });
+            i0.ɵɵconditional(ctx.ShowStatusBar ? 23 : -1);
+        } }, dependencies: [i3.NgClass, i4.FFlowComponent, i4.FCanvasComponent, i4.FBackgroundComponent, i4.FCirclePatternComponent, i4.FZoomDirective, i4.FConnectionContent, i4.FConnectionMarker, i4.FConnectionComponent, i4.FConnectionForCreateComponent, i4.FLineAlignmentComponent, i4.FMinimapComponent, i4.FNodeDirective, i4.FDragHandleDirective, i4.FSelectionAreaComponent, i4.FDragBlockerDirective, i4.FDraggableDirective, i5.MJEmptyStateComponent, i6.FlowNodeComponent, i7.FlowPaletteComponent, i8.FlowToolbarComponent, i9.FlowStatusBarComponent], styles: ["/* ============================================================\n   Flow Editor \u2014 Main container styles\n   ============================================================ */\n\n/* The HOST is a custom element, which is `display: inline` with auto height until told otherwise.\n   Without this, `.mj-flow-editor { height: 100% }` below resolved against an auto-height parent \u2014\n   which means auto \u2014 so the canvas fell back to its `min-height` floor and sat at 400px no matter\n   how much room its pane actually had.\n\n   `height: 100%` here is safe for hosts that DON'T give it a box: it resolves to auto in that case,\n   and the floor takes over exactly as before. */\n:host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.mj-flow-editor {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 400px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  outline: none;\n  position: relative;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n}\n\n.mj-flow-editor--readonly .mj-flow-node-port {\n  cursor: default;\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Toolbar Area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-toolbar-area,\n.mj-flow-editor-toolbar-chip,\n.mj-flow-editor-toolbar-tab {\n  position: absolute;\n  top: 10px;\n  z-index: 20;\n}\n.mj-flow-editor-toolbar-area[data-align=\"center\"],\n.mj-flow-editor-toolbar-chip[data-align=\"center\"],\n.mj-flow-editor-toolbar-tab[data-align=\"center\"] {\n  left: 50%;\n  transform: translateX(-50%);\n}\n.mj-flow-editor-toolbar-area[data-align=\"left\"],\n.mj-flow-editor-toolbar-chip[data-align=\"left\"],\n.mj-flow-editor-toolbar-tab[data-align=\"left\"] {\n  left: 10px;\n}\n.mj-flow-editor-toolbar-area[data-align=\"right\"],\n.mj-flow-editor-toolbar-chip[data-align=\"right\"],\n.mj-flow-editor-toolbar-tab[data-align=\"right\"] {\n  right: 10px;\n}\n\n.mj-flow-editor-toolbar-chip,\n.mj-flow-editor-toolbar-tab {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-elevated);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n.mj-flow-editor-toolbar-chip:hover,\n.mj-flow-editor-toolbar-tab:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n.mj-flow-editor-toolbar-chip {\n  width: 32px;\n  height: 32px;\n  border-radius: var(--mj-radius-md);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n}\n.mj-flow-editor-toolbar-tab {\n  width: 22px;\n  height: 18px;\n  padding: 0;\n  border-radius: var(--mj-radius-sm);\n  opacity: 0.55;\n}\n.mj-flow-editor-toolbar-tab:hover { opacity: 1; }\n\n/* \u2500\u2500 Canvas Area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-canvas-area {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n}\n\n.mj-flow-editor-canvas {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.mj-flow-editor-canvas f-flow {\n  width: 100%;\n  height: 100%;\n}\n\n/* Pan mode \u2014 grab cursor, nodes pass through pointer events to canvas */\n.mj-flow-editor-canvas--pan-mode {\n  cursor: grab;\n}\n\n.mj-flow-editor-canvas--pan-mode:active {\n  cursor: grabbing;\n}\n\n.mj-flow-editor-canvas--pan-mode mj-flow-node {\n  pointer-events: none;\n  cursor: grab;\n}\n\n.mj-flow-editor-canvas--pan-mode f-connection {\n  pointer-events: none;\n}\n\n.mj-flow-editor-canvas--pan-mode .mj-flow-connection-label {\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Minimap \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-minimap {\n  position: absolute;\n  bottom: 12px;\n  right: 12px;\n  width: 160px;\n  height: 120px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-sm);\n  overflow: hidden;\n  z-index: 15;\n}\n\n.mj-flow-editor-minimap f-minimap {\n  width: 100%;\n  height: 100%;\n}\n\n/* Foblex minimap SVG node rectangles (no default styles provided by Foblex) */\n.mj-flow-editor-minimap .f-minimap-node {\n  fill: var(--mj-border-strong);\n  stroke: var(--mj-text-disabled);\n  stroke-width: 1;\n  rx: 3;\n  ry: 3;\n}\n\n.mj-flow-editor-minimap .f-minimap-node.f-selected {\n  fill: color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-bg-surface));\n  stroke: var(--mj-brand-primary);\n  stroke-width: 1.5;\n}\n\n.mj-flow-editor-minimap .f-minimap-group {\n  fill: var(--mj-border-default);\n  stroke: var(--mj-text-disabled);\n  stroke-width: 0.5;\n  rx: 2;\n  ry: 2;\n}\n\n/* Viewport indicator rectangle */\n.mj-flow-editor-minimap .f-minimap-view {\n  fill: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  stroke: var(--mj-brand-primary);\n  stroke-width: 1.5;\n}\n\n/* \u2500\u2500 Empty State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-empty {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  z-index: 5;\n}\n\n.mj-flow-editor-empty-subtitle {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-disabled);\n  margin: 0;\n}\n\n/* \u2500\u2500 Connection Labels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-connection-label {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: 5px;\n  background: var(--mj-bg-surface);\n  border: 1.5px solid var(--mj-border-strong);\n  border-radius: 5px;\n  padding: 4px 10px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n  box-shadow: var(--mj-shadow-sm);\n  pointer-events: none;\n  line-height: 1.4;\n  text-align: center;\n}\n\n.mj-flow-connection-label-icon {\n  font-size: 10px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n/* \u2500\u2500 Foblex Overrides \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Canvas \u2014 transparent so the grid pattern shows through */\nf-canvas {\n  background: transparent;\n}\n\n/* Selection area */\nf-selection-area {\n  --f-selection-area-background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  --f-selection-area-border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n/* Line alignment guides */\nf-line-alignment {\n  --f-line-alignment-color: var(--mj-brand-primary);\n}\n\n/* Connection paths \u2014 default stroke color prevents invisible connections */\n.f-connection path {\n  stroke: var(--mj-text-disabled);\n  stroke-width: var(--connection-width, 2px);\n  fill: none;\n  transition: stroke 0.15s ease, stroke-width 0.15s ease;\n}\n\n.f-connection:hover path {\n  stroke-width: calc(var(--connection-width, 2px) + 1px);\n}\n\n.f-connection.f-selected path {\n  stroke: var(--mj-brand-primary);\n  stroke-width: max(3px, var(--connection-width, 2px));\n}\n\n/* Colored connections use the --connection-color custom property,\n   defaulting to neutral when no color is specified by the consumer */\n.mj-flow-connection-colored path {\n  stroke: var(--connection-color, var(--mj-text-disabled));\n}\n\n.mj-flow-connection-colored.f-selected path {\n  stroke: var(--connection-color, var(--mj-brand-primary));\n  stroke-width: max(3px, var(--connection-width, 2px));\n  filter: brightness(0.85);\n}\n\n/* Dashed connection style */\n.mj-flow-connection-dashed path {\n  stroke-dasharray: 8 4;\n}\n\n/* Dotted connection style */\n.mj-flow-connection-dotted path {\n  stroke-dasharray: 3 3;\n}\n\n.mj-flow-connection-animated path {\n  stroke-dasharray: 14 10;\n  stroke-linecap: round;\n  stroke-width: var(--connection-width, 4.5px);\n  animation: mj-flow-dash 0.5s linear infinite;\n  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--connection-color, var(--mj-brand-primary)) 70%, transparent));\n}\n@keyframes mj-flow-dash {\n  to { stroke-dashoffset: -24; }\n}\n\n/* Connection for create (dragging) */\n.f-connection-for-create path {\n  stroke: var(--mj-text-disabled);\n  stroke-dasharray: 6 3;\n  stroke-width: 2;\n}\n\n/* \u2500\u2500 Legend \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-legend {\n  position: absolute;\n  bottom: 12px;\n  left: 12px;\n  background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n  backdrop-filter: blur(6px);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 10px 14px;\n  box-shadow: var(--mj-shadow-sm);\n  z-index: 15;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  max-width: 200px;\n}\n\n.mj-flow-editor-legend-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.mj-flow-editor-legend-section {\n  margin-bottom: 8px;\n}\n\n.mj-flow-editor-legend-section:last-child {\n  margin-bottom: 0;\n}\n\n.mj-flow-editor-legend-heading {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 4px;\n}\n\n.mj-flow-editor-legend-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 0;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n}\n\n.mj-flow-editor-legend-svg,\n.mj-flow-editor-legend-line-svg {\n  flex-shrink: 0;\n}\n\n.mj-flow-editor-legend-swatch {\n  display: inline-block;\n  width: 10px;\n  height: 10px;\n  border-radius: var(--mj-radius-sm);\n  flex-shrink: 0;\n}\n\n.mj-flow-editor-legend-box {\n  display: inline-block;\n  width: 14px;\n  height: 10px;\n  border: 2px solid;\n  border-radius: var(--mj-radius-sm);\n  flex-shrink: 0;\n}\n\n/* \u2500\u2500 Context Menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-context-menu {\n  position: fixed;\n  min-width: 180px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  padding: 4px;\n  z-index: 9999;\n  animation: mj-ctx-fade-in 0.1s ease-out;\n}\n\n@keyframes mj-ctx-fade-in {\n  from { opacity: 0; transform: scale(0.95); }\n  to { opacity: 1; transform: scale(1); }\n}\n\n.mj-flow-context-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 8px 12px;\n  border: none;\n  background: none;\n  font-size: var(--mj-text-sm);\n  font-weight: 450;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: 5px;\n  text-align: left;\n  transition: background-color 0.1s ease;\n}\n\n.mj-flow-context-menu-item:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.mj-flow-context-menu-item i {\n  width: 16px;\n  text-align: center;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.mj-flow-context-menu-shortcut {\n  margin-left: auto;\n  padding: 0 4px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 3px;\n  font-size: 10px;\n  font-family: inherit;\n  color: var(--mj-text-muted);\n}\n\n.mj-flow-context-menu-item--danger {\n  color: var(--mj-status-error);\n}\n\n.mj-flow-context-menu-item--danger:hover {\n  background-color: var(--mj-status-error-subtle);\n}\n\n.mj-flow-context-menu-item--danger i {\n  color: var(--mj-status-error);\n}\n\n.mj-flow-context-menu-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 8px;\n}\n\n/* \u2500\u2500 Focus Indicators (Accessibility) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-toolbar-btn:focus-visible,\n.mj-agent-editor-btn:focus-visible,\n.mj-agent-editor-view-btn:focus-visible,\n.mj-agent-props-close:focus-visible,\n.mj-agent-props-delete-btn:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n.mj-flow-palette-item:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 1px;\n  border-radius: var(--mj-radius-md);\n}\n"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FlowEditorComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-flow-editor', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, providers: [FlowStateService, FlowLayoutService], template: "<div class=\"mj-flow-editor\" [class.mj-flow-editor--readonly]=\"ReadOnly\" tabindex=\"0\">\n\n  <!-- Canvas Toolbar -->\n  @if (ShowToolbar) {\n    <div class=\"mj-flow-editor-toolbar-area\">\n      <mj-flow-toolbar\n        [ZoomLevel]=\"zoomLevel\"\n        [ShowGrid]=\"ShowGrid\"\n        [ShowMinimap]=\"ShowMinimap\"\n        [ShowLegend]=\"ShowLegend\"\n        [ReadOnly]=\"ReadOnly\"\n        [PanMode]=\"panMode\"\n        (ZoomInClicked)=\"ZoomIn()\"\n        (ZoomOutClicked)=\"ZoomOut()\"\n        (FitToScreenClicked)=\"ZoomToFit()\"\n        (AutoLayoutClicked)=\"AutoArrange()\"\n        (GridToggled)=\"onGridToggled($event)\"\n        (MinimapToggled)=\"onMinimapToggled($event)\"\n        (LegendToggled)=\"onLegendToggled($event)\"\n        (PanModeToggled)=\"onPanModeToggled($event)\">\n      </mj-flow-toolbar>\n    </div>\n  }\n\n  <!-- Main Canvas Area -->\n  <div class=\"mj-flow-editor-canvas-area\">\n\n    <!-- Palette Sidebar -->\n    @if (ShowPalette && !ReadOnly) {\n      <mj-flow-palette\n        [NodeTypes]=\"NodeTypes\">\n      </mj-flow-palette>\n    }\n\n    <!-- Foblex Canvas -->\n    <div class=\"mj-flow-editor-canvas\"\n      [class.mj-flow-editor-canvas--pan-mode]=\"panMode\">\n      <f-flow fDraggable\n        [fDraggableDisabled]=\"false\"\n        [fCanvasMoveTrigger]=\"canvasMoveTriggerFn\"\n        [vCellSize]=\"GridSize\"\n        [hCellSize]=\"GridSize\"\n        [fCellSizeWhileDragging]=\"ShowGrid\"\n        (fLoaded)=\"onFlowLoaded()\"\n        (fCreateConnection)=\"onCreateConnection($event)\"\n        (fReassignConnection)=\"onReassignConnection($event)\"\n        (fCreateNode)=\"onCreateNode($event)\"\n        (fSelectionChange)=\"onSelectionChange($event)\"\n        (fMoveNodes)=\"onNodesMoved($event)\">\n\n        <!-- Background grid \u2014 MUST be direct child of f-flow (Foblex content projection requires it) -->\n        @if (ShowGrid) {\n          <f-background>\n            <f-circle-pattern [color]=\"'#94a3b8'\" [radius]=\"24\"></f-circle-pattern>\n          </f-background>\n        }\n\n        <!-- Alignment snap lines \u2014 direct child of f-flow -->\n        @if (!ReadOnly) {\n          <f-line-alignment [fAlignThreshold]=\"10\"></f-line-alignment>\n        }\n\n        <f-canvas fZoom #fZoomRef=\"fComponent\"\n          [fZoomMinimum]=\"0.15\"\n          [fZoomMaximum]=\"3\"\n          [fZoomStep]=\"0.1\"\n          [position]=\"canvasPosition\"\n          [scale]=\"canvasScale\"\n          (fCanvasChange)=\"onCanvasChange($event)\">\n\n          <!-- Interactive connection drawing -->\n          @if (!ReadOnly) {\n            <f-connection-for-create\n              fType=\"bezier\"\n              [fRadius]=\"8\"\n              [fOffset]=\"12\">\n              <svg viewBox=\"0 0 10 10\" fMarker type=\"end\"\n                orient=\"auto\" [refX]=\"9\" [refY]=\"5\" [height]=\"10\" [width]=\"10\">\n                <path d=\"M0 0L10 5L0 10Z\" fill=\"#94a3b8\"/>\n              </svg>\n            </f-connection-for-create>\n          }\n\n          <!-- Connections -->\n          @for (conn of Connections; track trackConnectionById($index, conn)) {\n            <f-connection\n              [fConnectionId]=\"conn.ID\"\n              [fOutputId]=\"conn.SourcePortID\"\n              [fInputId]=\"conn.TargetPortID\"\n              fType=\"bezier\"\n              fBehavior=\"fixed\"\n              [fRadius]=\"8\"\n              [fOffset]=\"12\"\n              [fSelectionDisabled]=\"false\"\n              [fReassignDisabled]=\"ReadOnly\"\n              [style.--connection-color]=\"conn.Color || '#94a3b8'\"\n              [class.mj-flow-connection-colored]=\"!!conn.Color\"\n              [class.mj-flow-connection-dashed]=\"conn.Style === 'dashed'\"\n              [class.mj-flow-connection-dotted]=\"conn.Style === 'dotted'\"\n              (click)=\"onConnectionClicked($event, conn)\"\n              (contextmenu)=\"onConnectionContextMenu($event, conn)\">\n              <!-- Arrow marker -->\n              <svg viewBox=\"0 0 10 10\" fMarker type=\"end\"\n                orient=\"auto\" [refX]=\"9\" [refY]=\"5\" [height]=\"10\" [width]=\"10\">\n                <path d=\"M0 0L10 5L0 10Z\" [attr.fill]=\"conn.Color || '#94a3b8'\"/>\n              </svg>\n              <!-- Connection label -->\n              @if (conn.Label) {\n                <div fConnectionContent [position]=\"0.5\"\n                  class=\"mj-flow-connection-label\"\n                  [style.backgroundColor]=\"ConnectionLabelBackground\"\n                  [style.borderColor]=\"ConnectionLabelBorderColor\"\n                  [style.color]=\"ConnectionLabelTextColor\"\n                  [title]=\"conn.LabelDetail || conn.Label || ''\">\n                  @if (conn.LabelIcon) {\n                    <i\n                      class=\"fa-solid mj-flow-connection-label-icon\"\n                      [ngClass]=\"conn.LabelIcon\"\n                    [style.color]=\"conn.LabelIconColor || 'inherit'\"></i>\n                  }\n                  {{ conn.Label }}\n                </div>\n              }\n            </f-connection>\n          }\n\n          <!-- Nodes -->\n          @for (node of Nodes; track trackNodeById($index, node)) {\n            <mj-flow-node\n              fNode\n              fDragHandle\n              [fNodeId]=\"node.ID\"\n              [fNodePosition]=\"{ x: node.Position.X, y: node.Position.Y }\"\n              [fNodeDraggingDisabled]=\"ReadOnly || panMode || node.Locked === true\"\n              [fNodeSelectionDisabled]=\"panMode\"\n              [fConnectOnNode]=\"!ReadOnly && !panMode\"\n              [Node]=\"node\"\n              [TypeConfig]=\"GetTypeConfig(node.Type)\"\n              [ReadOnly]=\"ReadOnly\"\n              (contextmenu)=\"onNodeContextMenu($event, node)\">\n            </mj-flow-node>\n          }\n\n        </f-canvas>\n\n        <!-- Rubber-band selection \u2014 direct child of f-flow -->\n        @if (!ReadOnly) {\n          <f-selection-area></f-selection-area>\n        }\n\n        <!-- Minimap -->\n        @if (ShowMinimap) {\n          <div class=\"mj-flow-editor-minimap\" fDragBlocker>\n            <f-minimap [fMinSize]=\"1500\"></f-minimap>\n          </div>\n        }\n      </f-flow>\n\n      <!-- Legend -->\n      @if (ShowLegend && Nodes.length > 0) {\n        <div class=\"mj-flow-editor-legend\">\n          <div class=\"mj-flow-editor-legend-title\">Legend</div>\n          <div class=\"mj-flow-editor-legend-section\">\n            <div class=\"mj-flow-editor-legend-heading\">Connections</div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <svg class=\"mj-flow-editor-legend-line-svg\" width=\"28\" height=\"10\"><line x1=\"0\" y1=\"5\" x2=\"28\" y2=\"5\" stroke=\"#64748b\" stroke-width=\"2\"/></svg>\n              <span>Only exit path</span>\n            </div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <svg class=\"mj-flow-editor-legend-line-svg\" width=\"28\" height=\"10\"><line x1=\"0\" y1=\"5\" x2=\"28\" y2=\"5\" stroke=\"#16a34a\" stroke-width=\"2\"/></svg>\n              <i class=\"fa-solid fa-circle-check\" style=\"color:#16a34a;font-size:10px;\"></i>\n              <span>Default (fallback)</span>\n            </div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <svg class=\"mj-flow-editor-legend-line-svg\" width=\"28\" height=\"10\"><line x1=\"0\" y1=\"5\" x2=\"28\" y2=\"5\" stroke=\"#f59e0b\" stroke-width=\"2\" stroke-dasharray=\"5 3\"/></svg>\n              <span>Conditional</span>\n            </div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <svg class=\"mj-flow-editor-legend-line-svg\" width=\"28\" height=\"10\"><line x1=\"0\" y1=\"5\" x2=\"28\" y2=\"5\" stroke=\"#ef4444\" stroke-width=\"2\"/></svg>\n              <i class=\"fa-solid fa-triangle-exclamation\" style=\"color:#ef4444;font-size:10px;\"></i>\n              <span>Duplicate defaults</span>\n            </div>\n          </div>\n          <div class=\"mj-flow-editor-legend-section\">\n            <div class=\"mj-flow-editor-legend-heading\">Step Types</div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <span class=\"mj-flow-editor-legend-swatch\" style=\"background:#3B82F6\"></span>\n              <span>Action</span>\n            </div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <span class=\"mj-flow-editor-legend-swatch\" style=\"background:#8B5CF6\"></span>\n              <span>Prompt</span>\n            </div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <span class=\"mj-flow-editor-legend-swatch\" style=\"background:#10B981\"></span>\n              <span>Sub-Agent</span>\n            </div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <span class=\"mj-flow-editor-legend-swatch\" style=\"background:#F59E0B\"></span>\n              <span>For Each</span>\n            </div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <span class=\"mj-flow-editor-legend-swatch\" style=\"background:#F97316\"></span>\n              <span>While</span>\n            </div>\n          </div>\n          <div class=\"mj-flow-editor-legend-section\">\n            <div class=\"mj-flow-editor-legend-heading\">Borders</div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <span class=\"mj-flow-editor-legend-box\" style=\"border-color:#16a34a;background:#f0fdf4;\"></span>\n              <span>Start node</span>\n            </div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <span class=\"mj-flow-editor-legend-box\" style=\"border-color:#ef4444;background:#fef2f2;\"></span>\n              <i class=\"fa-solid fa-triangle-exclamation\" style=\"color:#ea580c;font-size:10px;\"></i>\n              <span>Missing config</span>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Empty state overlay -->\n      @if (Nodes.length === 0) {\n        <div class=\"mj-flow-editor-empty\">\n          <mj-empty-state\n            Icon=\"fa-solid fa-diagram-project\"\n            [Title]=\"EmptyStateTitle\">\n            @if (!ReadOnly) {\n              <p class=\"mj-flow-editor-empty-subtitle\">\n                Or use auto-layout after adding steps to arrange them automatically\n              </p>\n            }\n          </mj-empty-state>\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Context Menu -->\n  @if (contextMenuVisible) {\n    <div\n      class=\"mj-flow-context-menu\"\n      [style.left.px]=\"contextMenuX\"\n      [style.top.px]=\"contextMenuY\"\n      (click)=\"$event.stopPropagation()\">\n      <button class=\"mj-flow-context-menu-item\" (click)=\"onContextMenuAction('edit')\">\n        <i class=\"fa-solid fa-pen-to-square\"></i>\n        <span>Edit {{ contextMenuTargetType === 'node' ? 'Node' : 'Connection' }}</span>\n      </button>\n      <div class=\"mj-flow-context-menu-divider\"></div>\n      <button class=\"mj-flow-context-menu-item mj-flow-context-menu-item--danger\" (click)=\"onContextMenuAction('remove')\">\n        <i class=\"fa-solid fa-trash-can\"></i>\n        <span>Remove {{ contextMenuTargetType === 'node' ? 'Node' : 'Connection' }}</span>\n      </button>\n    </div>\n  }\n\n  <!-- Status Bar -->\n  @if (ShowStatusBar) {\n    <mj-flow-status-bar\n      [NodeCount]=\"Nodes.length\"\n      [ConnectionCount]=\"Connections.length\"\n      [SelectedCount]=\"selectedCount\"\n      [ZoomLevel]=\"zoomLevel\">\n    </mj-flow-status-bar>\n  }\n</div>\n", styles: ["/* ============================================================\n   Flow Editor \u2014 Main container styles\n   ============================================================ */\n\n.mj-flow-editor {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 400px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  outline: none;\n  position: relative;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n}\n\n.mj-flow-editor--readonly .mj-flow-node-port {\n  cursor: default;\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Toolbar Area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-toolbar-area {\n  position: absolute;\n  top: 10px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 20;\n}\n\n/* \u2500\u2500 Canvas Area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-canvas-area {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n}\n\n.mj-flow-editor-canvas {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.mj-flow-editor-canvas f-flow {\n  width: 100%;\n  height: 100%;\n}\n\n/* Pan mode \u2014 grab cursor, nodes pass through pointer events to canvas */\n.mj-flow-editor-canvas--pan-mode {\n  cursor: grab;\n}\n\n.mj-flow-editor-canvas--pan-mode:active {\n  cursor: grabbing;\n}\n\n.mj-flow-editor-canvas--pan-mode mj-flow-node {\n  pointer-events: none;\n  cursor: grab;\n}\n\n.mj-flow-editor-canvas--pan-mode f-connection {\n  pointer-events: none;\n}\n\n.mj-flow-editor-canvas--pan-mode .mj-flow-connection-label {\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Minimap \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-minimap {\n  position: absolute;\n  bottom: 12px;\n  right: 12px;\n  width: 160px;\n  height: 120px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-sm);\n  overflow: hidden;\n  z-index: 15;\n}\n\n.mj-flow-editor-minimap f-minimap {\n  width: 100%;\n  height: 100%;\n}\n\n/* Foblex minimap SVG node rectangles (no default styles provided by Foblex) */\n.mj-flow-editor-minimap .f-minimap-node {\n  fill: var(--mj-border-strong);\n  stroke: var(--mj-text-disabled);\n  stroke-width: 1;\n  rx: 3;\n  ry: 3;\n}\n\n.mj-flow-editor-minimap .f-minimap-node.f-selected {\n  fill: color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-bg-surface));\n  stroke: var(--mj-brand-primary);\n  stroke-width: 1.5;\n}\n\n.mj-flow-editor-minimap .f-minimap-group {\n  fill: var(--mj-border-default);\n  stroke: var(--mj-text-disabled);\n  stroke-width: 0.5;\n  rx: 2;\n  ry: 2;\n}\n\n/* Viewport indicator rectangle */\n.mj-flow-editor-minimap .f-minimap-view {\n  fill: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  stroke: var(--mj-brand-primary);\n  stroke-width: 1.5;\n}\n\n/* \u2500\u2500 Empty State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-empty {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  z-index: 5;\n}\n\n.mj-flow-editor-empty-subtitle {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-disabled);\n  margin: 0;\n}\n\n/* \u2500\u2500 Connection Labels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-connection-label {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: 5px;\n  background: var(--mj-bg-surface);\n  border: 1.5px solid var(--mj-border-strong);\n  border-radius: 5px;\n  padding: 4px 10px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n  box-shadow: var(--mj-shadow-sm);\n  pointer-events: none;\n  line-height: 1.4;\n  text-align: center;\n}\n\n.mj-flow-connection-label-icon {\n  font-size: 10px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n/* \u2500\u2500 Foblex Overrides \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Canvas \u2014 transparent so the grid pattern shows through */\nf-canvas {\n  background: transparent;\n}\n\n/* Selection area */\nf-selection-area {\n  --f-selection-area-background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  --f-selection-area-border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n/* Line alignment guides */\nf-line-alignment {\n  --f-line-alignment-color: var(--mj-brand-primary);\n}\n\n/* Connection paths \u2014 default stroke color prevents invisible connections */\n.f-connection path {\n  stroke: var(--mj-text-disabled);\n  stroke-width: 2;\n  fill: none;\n  transition: stroke 0.15s ease, stroke-width 0.15s ease;\n}\n\n.f-connection:hover path {\n  stroke-width: 3;\n}\n\n.f-connection.f-selected path {\n  stroke: var(--mj-brand-primary);\n  stroke-width: 3;\n}\n\n/* Colored connections use the --connection-color custom property,\n   defaulting to neutral when no color is specified by the consumer */\n.mj-flow-connection-colored path {\n  stroke: var(--connection-color, var(--mj-text-disabled));\n}\n\n.mj-flow-connection-colored.f-selected path {\n  stroke: var(--connection-color, var(--mj-brand-primary));\n  stroke-width: 3;\n  filter: brightness(0.85);\n}\n\n/* Dashed connection style */\n.mj-flow-connection-dashed path {\n  stroke-dasharray: 8 4;\n}\n\n/* Dotted connection style */\n.mj-flow-connection-dotted path {\n  stroke-dasharray: 3 3;\n}\n\n/* Connection for create (dragging) */\n.f-connection-for-create path {\n  stroke: var(--mj-text-disabled);\n  stroke-dasharray: 6 3;\n  stroke-width: 2;\n}\n\n/* \u2500\u2500 Legend \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-legend {\n  position: absolute;\n  bottom: 12px;\n  left: 12px;\n  background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n  backdrop-filter: blur(6px);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 10px 14px;\n  box-shadow: var(--mj-shadow-sm);\n  z-index: 15;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  max-width: 200px;\n}\n\n.mj-flow-editor-legend-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.mj-flow-editor-legend-section {\n  margin-bottom: 8px;\n}\n\n.mj-flow-editor-legend-section:last-child {\n  margin-bottom: 0;\n}\n\n.mj-flow-editor-legend-heading {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 4px;\n}\n\n.mj-flow-editor-legend-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 0;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n}\n\n.mj-flow-editor-legend-svg,\n.mj-flow-editor-legend-line-svg {\n  flex-shrink: 0;\n}\n\n.mj-flow-editor-legend-swatch {\n  display: inline-block;\n  width: 10px;\n  height: 10px;\n  border-radius: var(--mj-radius-sm);\n  flex-shrink: 0;\n}\n\n.mj-flow-editor-legend-box {\n  display: inline-block;\n  width: 14px;\n  height: 10px;\n  border: 2px solid;\n  border-radius: var(--mj-radius-sm);\n  flex-shrink: 0;\n}\n\n/* \u2500\u2500 Context Menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-context-menu {\n  position: fixed;\n  min-width: 180px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  padding: 4px;\n  z-index: 9999;\n  animation: mj-ctx-fade-in 0.1s ease-out;\n}\n\n@keyframes mj-ctx-fade-in {\n  from { opacity: 0; transform: scale(0.95); }\n  to { opacity: 1; transform: scale(1); }\n}\n\n.mj-flow-context-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 8px 12px;\n  border: none;\n  background: none;\n  font-size: var(--mj-text-sm);\n  font-weight: 450;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: 5px;\n  text-align: left;\n  transition: background-color 0.1s ease;\n}\n\n.mj-flow-context-menu-item:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.mj-flow-context-menu-item i {\n  width: 16px;\n  text-align: center;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.mj-flow-context-menu-item--danger {\n  color: var(--mj-status-error);\n}\n\n.mj-flow-context-menu-item--danger:hover {\n  background-color: var(--mj-status-error-subtle);\n}\n\n.mj-flow-context-menu-item--danger i {\n  color: var(--mj-status-error);\n}\n\n.mj-flow-context-menu-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 8px;\n}\n\n/* \u2500\u2500 Focus Indicators (Accessibility) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-toolbar-btn:focus-visible,\n.mj-agent-editor-btn:focus-visible,\n.mj-agent-editor-view-btn:focus-visible,\n.mj-agent-props-close:focus-visible,\n.mj-agent-props-delete-btn:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n.mj-flow-palette-item:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 1px;\n  border-radius: var(--mj-radius-md);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-flow-editor', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, providers: [FlowStateService, FlowLayoutService], template: "<div class=\"mj-flow-editor\" [class.mj-flow-editor--readonly]=\"ReadOnly\" tabindex=\"0\">\n\n  <!-- Canvas Toolbar \u2014 shown / minimized / hidden (recover tab). Align is left/center/right. -->\n  @if (ShowToolbar && EffectiveToolbarVisibility === 'shown') {\n    <div class=\"mj-flow-editor-toolbar-area\" [attr.data-align]=\"ToolbarAlign\">\n      <mj-flow-toolbar\n        [ZoomLevel]=\"zoomLevel\"\n        [ShowGrid]=\"ShowGrid\"\n        [ShowMinimap]=\"ShowMinimap\"\n        [ShowLegend]=\"ShowLegend\"\n        [ReadOnly]=\"ReadOnly\"\n        [PanMode]=\"panMode\"\n        (ZoomInClicked)=\"ZoomIn()\"\n        (ZoomOutClicked)=\"ZoomOut()\"\n        (FitToScreenClicked)=\"ZoomToFit()\"\n        (AutoLayoutClicked)=\"AutoArrange()\"\n        (GridToggled)=\"onGridToggled($event)\"\n        (MinimapToggled)=\"onMinimapToggled($event)\"\n        (LegendToggled)=\"onLegendToggled($event)\"\n        (PanModeToggled)=\"onPanModeToggled($event)\"\n        (MinimizeClicked)=\"SetToolbarVisibility('minimized')\"\n        (HideClicked)=\"SetToolbarVisibility('hidden')\">\n      </mj-flow-toolbar>\n    </div>\n  } @else if (ShowToolbar && EffectiveToolbarVisibility === 'minimized') {\n    <button type=\"button\" class=\"mj-flow-editor-toolbar-chip\" [attr.data-align]=\"ToolbarAlign\"\n            (click)=\"SetToolbarVisibility('shown')\"\n            title=\"Show canvas tools\" aria-label=\"Show canvas tools\">\n      <i class=\"fa-solid fa-wrench\" aria-hidden=\"true\"></i>\n    </button>\n  } @else if (ShowToolbar && EffectiveToolbarVisibility === 'hidden') {\n    <button type=\"button\" class=\"mj-flow-editor-toolbar-tab\" [attr.data-align]=\"ToolbarAlign\"\n            (click)=\"SetToolbarVisibility('shown')\"\n            title=\"Show canvas tools\" aria-label=\"Show canvas tools\">\n      <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n    </button>\n  }\n\n  <!-- Main Canvas Area -->\n  <div class=\"mj-flow-editor-canvas-area\">\n\n    <!-- Palette Sidebar -->\n    @if (ShowPalette && !ReadOnly) {\n      <mj-flow-palette\n        [NodeTypes]=\"NodeTypes\"\n        (NodeTypeActivated)=\"onPaletteNodeTypeActivated($event)\">\n      </mj-flow-palette>\n    }\n\n    <!-- Foblex Canvas -->\n    <div class=\"mj-flow-editor-canvas\" #canvasArea\n      [class.mj-flow-editor-canvas--pan-mode]=\"panMode\">\n      <f-flow fDraggable\n        [fDraggableDisabled]=\"false\"\n        [fCanvasMoveTrigger]=\"canvasMoveTriggerFn\"\n        [vCellSize]=\"GridSize\"\n        [hCellSize]=\"GridSize\"\n        [fCellSizeWhileDragging]=\"ShowGrid\"\n        (fLoaded)=\"onFlowLoaded()\"\n        (fCreateConnection)=\"onCreateConnection($event)\"\n        (fReassignConnection)=\"onReassignConnection($event)\"\n        (fCreateNode)=\"onCreateNode($event)\"\n        (fSelectionChange)=\"onSelectionChange($event)\"\n        (fMoveNodes)=\"onNodesMoved($event)\">\n\n        <!-- Background grid \u2014 MUST be direct child of f-flow (Foblex content projection requires it) -->\n        @if (ShowGrid) {\n          <f-background>\n            <f-circle-pattern [color]=\"'#94a3b8'\" [radius]=\"24\"></f-circle-pattern>\n          </f-background>\n        }\n\n        <!-- Alignment snap lines \u2014 direct child of f-flow -->\n        @if (!ReadOnly) {\n          <f-line-alignment [fAlignThreshold]=\"10\"></f-line-alignment>\n        }\n\n        <f-canvas fZoom #fZoomRef=\"fComponent\"\n          [fZoomMinimum]=\"0.15\"\n          [fZoomMaximum]=\"3\"\n          [fZoomStep]=\"0.1\"\n          [position]=\"canvasPosition\"\n          [scale]=\"canvasScale\"\n          (fCanvasChange)=\"onCanvasChange($event)\">\n\n          <!-- Interactive connection drawing -->\n          @if (!ReadOnly) {\n            <f-connection-for-create\n              fType=\"bezier\"\n              [fRadius]=\"8\"\n              [fOffset]=\"12\">\n              <svg viewBox=\"0 0 10 10\" fMarker type=\"end\"\n                orient=\"auto\" [refX]=\"9\" [refY]=\"5\" [height]=\"10\" [width]=\"10\">\n                <path d=\"M0 0L10 5L0 10Z\" fill=\"#94a3b8\"/>\n              </svg>\n            </f-connection-for-create>\n          }\n\n          <!-- Connections -->\n          @for (conn of Connections; track trackConnectionById($index, conn)) {\n            <f-connection\n              [fConnectionId]=\"conn.ID\"\n              [fOutputId]=\"conn.SourcePortID\"\n              [fInputId]=\"conn.TargetPortID\"\n              fType=\"bezier\"\n              fBehavior=\"fixed\"\n              [fRadius]=\"8\"\n              [fOffset]=\"12\"\n              [fSelectionDisabled]=\"false\"\n              [fReassignDisabled]=\"ReadOnly\"\n              [style.--connection-color]=\"conn.Color || '#94a3b8'\"\n              [style.--connection-width.px]=\"conn.StrokeWidth || 2\"\n              [class.mj-flow-connection-colored]=\"!!conn.Color\"\n              [class.mj-flow-connection-dashed]=\"conn.Style === 'dashed'\"\n              [class.mj-flow-connection-dotted]=\"conn.Style === 'dotted'\"\n              [class.mj-flow-connection-animated]=\"!!conn.Animated\"\n              (click)=\"onConnectionClicked($event, conn)\"\n              (contextmenu)=\"onConnectionContextMenu($event, conn)\">\n              <!-- Arrow marker -->\n              <svg viewBox=\"0 0 10 10\" fMarker type=\"end\"\n                orient=\"auto\" [refX]=\"9\" [refY]=\"5\"\n                [height]=\"conn.Animated ? 16 : 10\"\n                [width]=\"conn.Animated ? 16 : 10\">\n                <path d=\"M0 0L10 5L0 10Z\" [attr.fill]=\"conn.Color || '#94a3b8'\"/>\n              </svg>\n              <!-- Connection label -->\n              @if (conn.Label) {\n                <div fConnectionContent [position]=\"0.5\"\n                  class=\"mj-flow-connection-label\"\n                  [style.backgroundColor]=\"ConnectionLabelBackground\"\n                  [style.borderColor]=\"ConnectionLabelBorderColor\"\n                  [style.color]=\"ConnectionLabelTextColor\"\n                  [title]=\"conn.LabelDetail || conn.Label || ''\">\n                  @if (conn.LabelIcon) {\n                    <i\n                      class=\"fa-solid mj-flow-connection-label-icon\"\n                      [ngClass]=\"conn.LabelIcon\"\n                    [style.color]=\"conn.LabelIconColor || 'inherit'\"></i>\n                  }\n                  {{ conn.Label }}\n                </div>\n              }\n            </f-connection>\n          }\n\n          <!-- Nodes -->\n          @for (node of Nodes; track trackNodeById($index, node)) {\n            <mj-flow-node\n              fNode\n              fDragHandle\n              [fNodeId]=\"node.ID\"\n              [fNodePosition]=\"{ x: node.Position.X, y: node.Position.Y }\"\n              [fNodeDraggingDisabled]=\"ReadOnly || panMode || node.Locked === true\"\n              [fNodeSelectionDisabled]=\"panMode\"\n              [fConnectOnNode]=\"!ReadOnly && !panMode\"\n              [Node]=\"node\"\n              [TypeConfig]=\"GetTypeConfig(node.Type)\"\n              [ReadOnly]=\"ReadOnly\"\n              (contextmenu)=\"onNodeContextMenu($event, node)\">\n            </mj-flow-node>\n          }\n\n        </f-canvas>\n\n        <!-- Rubber-band selection \u2014 direct child of f-flow -->\n        @if (!ReadOnly) {\n          <f-selection-area></f-selection-area>\n        }\n\n        <!-- Minimap -->\n        @if (ShowMinimap) {\n          <div class=\"mj-flow-editor-minimap\" fDragBlocker>\n            <f-minimap [fMinSize]=\"1500\"></f-minimap>\n          </div>\n        }\n      </f-flow>\n\n      <!-- Legend -->\n      @if (ShowLegend && Nodes.length > 0) {\n        <div class=\"mj-flow-editor-legend\">\n          <div class=\"mj-flow-editor-legend-title\">Legend</div>\n          <div class=\"mj-flow-editor-legend-section\">\n            <div class=\"mj-flow-editor-legend-heading\">Connections</div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <svg class=\"mj-flow-editor-legend-line-svg\" width=\"28\" height=\"10\"><line x1=\"0\" y1=\"5\" x2=\"28\" y2=\"5\" stroke=\"#64748b\" stroke-width=\"2\"/></svg>\n              <span>Only exit path</span>\n            </div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <svg class=\"mj-flow-editor-legend-line-svg\" width=\"28\" height=\"10\"><line x1=\"0\" y1=\"5\" x2=\"28\" y2=\"5\" stroke=\"#16a34a\" stroke-width=\"2\"/></svg>\n              <i class=\"fa-solid fa-circle-check\" style=\"color:#16a34a;font-size:10px;\"></i>\n              <span>Default (fallback)</span>\n            </div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <svg class=\"mj-flow-editor-legend-line-svg\" width=\"28\" height=\"10\"><line x1=\"0\" y1=\"5\" x2=\"28\" y2=\"5\" stroke=\"#f59e0b\" stroke-width=\"2\" stroke-dasharray=\"5 3\"/></svg>\n              <span>Conditional</span>\n            </div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <svg class=\"mj-flow-editor-legend-line-svg\" width=\"28\" height=\"10\"><line x1=\"0\" y1=\"5\" x2=\"28\" y2=\"5\" stroke=\"#ef4444\" stroke-width=\"2\"/></svg>\n              <i class=\"fa-solid fa-triangle-exclamation\" style=\"color:#ef4444;font-size:10px;\"></i>\n              <span>Duplicate defaults</span>\n            </div>\n          </div>\n          <div class=\"mj-flow-editor-legend-section\">\n            <div class=\"mj-flow-editor-legend-heading\">Step Types</div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <span class=\"mj-flow-editor-legend-swatch\" style=\"background:#3B82F6\"></span>\n              <span>Action</span>\n            </div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <span class=\"mj-flow-editor-legend-swatch\" style=\"background:#8B5CF6\"></span>\n              <span>Prompt</span>\n            </div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <span class=\"mj-flow-editor-legend-swatch\" style=\"background:#10B981\"></span>\n              <span>Sub-Agent</span>\n            </div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <span class=\"mj-flow-editor-legend-swatch\" style=\"background:#F59E0B\"></span>\n              <span>For Each</span>\n            </div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <span class=\"mj-flow-editor-legend-swatch\" style=\"background:#F97316\"></span>\n              <span>While</span>\n            </div>\n          </div>\n          <div class=\"mj-flow-editor-legend-section\">\n            <div class=\"mj-flow-editor-legend-heading\">Borders</div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <span class=\"mj-flow-editor-legend-box\" style=\"border-color:#16a34a;background:#f0fdf4;\"></span>\n              <span>Start node</span>\n            </div>\n            <div class=\"mj-flow-editor-legend-item\">\n              <span class=\"mj-flow-editor-legend-box\" style=\"border-color:#ef4444;background:#fef2f2;\"></span>\n              <i class=\"fa-solid fa-triangle-exclamation\" style=\"color:#ea580c;font-size:10px;\"></i>\n              <span>Missing config</span>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Empty state overlay -->\n      @if (Nodes.length === 0) {\n        <div class=\"mj-flow-editor-empty\">\n          <mj-empty-state\n            Icon=\"fa-solid fa-diagram-project\"\n            [Title]=\"EmptyStateTitle\">\n            @if (!ReadOnly) {\n              <p class=\"mj-flow-editor-empty-subtitle\">\n                Or use auto-layout after adding steps to arrange them automatically\n              </p>\n            }\n          </mj-empty-state>\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Context Menu -->\n  @if (contextMenuVisible) {\n    <div\n      class=\"mj-flow-context-menu\"\n      [style.left.px]=\"contextMenuX\"\n      [style.top.px]=\"contextMenuY\"\n      (click)=\"$event.stopPropagation()\">\n      @for (item of contextMenuItems; track item.ID; let last = $last) {\n        <button type=\"button\" class=\"mj-flow-context-menu-item\"\n                [class.mj-flow-context-menu-item--danger]=\"item.Danger\"\n                [disabled]=\"item.Disabled\"\n                (click)=\"onContextMenuAction(item.ID)\">\n          @if (item.Icon) {\n            <i class=\"fa-solid\" [ngClass]=\"item.Icon\"></i>\n          }\n          <span>{{ item.Label }}</span>\n          @if (item.Shortcut) {\n            <kbd class=\"mj-flow-context-menu-shortcut\">{{ item.Shortcut }}</kbd>\n          }\n        </button>\n        @if (!last && item.Danger !== contextMenuItems[$index + 1]?.Danger) {\n          <div class=\"mj-flow-context-menu-divider\"></div>\n        }\n      }\n    </div>\n  }\n\n  <!-- Status Bar -->\n  @if (ShowStatusBar) {\n    <mj-flow-status-bar\n      [NodeCount]=\"Nodes.length\"\n      [ConnectionCount]=\"Connections.length\"\n      [SelectedCount]=\"selectedCount\"\n      [ZoomLevel]=\"zoomLevel\">\n    </mj-flow-status-bar>\n  }\n</div>\n", styles: ["/* ============================================================\n   Flow Editor \u2014 Main container styles\n   ============================================================ */\n\n/* The HOST is a custom element, which is `display: inline` with auto height until told otherwise.\n   Without this, `.mj-flow-editor { height: 100% }` below resolved against an auto-height parent \u2014\n   which means auto \u2014 so the canvas fell back to its `min-height` floor and sat at 400px no matter\n   how much room its pane actually had.\n\n   `height: 100%` here is safe for hosts that DON'T give it a box: it resolves to auto in that case,\n   and the floor takes over exactly as before. */\n:host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.mj-flow-editor {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 400px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  outline: none;\n  position: relative;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n}\n\n.mj-flow-editor--readonly .mj-flow-node-port {\n  cursor: default;\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Toolbar Area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-toolbar-area,\n.mj-flow-editor-toolbar-chip,\n.mj-flow-editor-toolbar-tab {\n  position: absolute;\n  top: 10px;\n  z-index: 20;\n}\n.mj-flow-editor-toolbar-area[data-align=\"center\"],\n.mj-flow-editor-toolbar-chip[data-align=\"center\"],\n.mj-flow-editor-toolbar-tab[data-align=\"center\"] {\n  left: 50%;\n  transform: translateX(-50%);\n}\n.mj-flow-editor-toolbar-area[data-align=\"left\"],\n.mj-flow-editor-toolbar-chip[data-align=\"left\"],\n.mj-flow-editor-toolbar-tab[data-align=\"left\"] {\n  left: 10px;\n}\n.mj-flow-editor-toolbar-area[data-align=\"right\"],\n.mj-flow-editor-toolbar-chip[data-align=\"right\"],\n.mj-flow-editor-toolbar-tab[data-align=\"right\"] {\n  right: 10px;\n}\n\n.mj-flow-editor-toolbar-chip,\n.mj-flow-editor-toolbar-tab {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-elevated);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n.mj-flow-editor-toolbar-chip:hover,\n.mj-flow-editor-toolbar-tab:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n.mj-flow-editor-toolbar-chip {\n  width: 32px;\n  height: 32px;\n  border-radius: var(--mj-radius-md);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n}\n.mj-flow-editor-toolbar-tab {\n  width: 22px;\n  height: 18px;\n  padding: 0;\n  border-radius: var(--mj-radius-sm);\n  opacity: 0.55;\n}\n.mj-flow-editor-toolbar-tab:hover { opacity: 1; }\n\n/* \u2500\u2500 Canvas Area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-canvas-area {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n}\n\n.mj-flow-editor-canvas {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.mj-flow-editor-canvas f-flow {\n  width: 100%;\n  height: 100%;\n}\n\n/* Pan mode \u2014 grab cursor, nodes pass through pointer events to canvas */\n.mj-flow-editor-canvas--pan-mode {\n  cursor: grab;\n}\n\n.mj-flow-editor-canvas--pan-mode:active {\n  cursor: grabbing;\n}\n\n.mj-flow-editor-canvas--pan-mode mj-flow-node {\n  pointer-events: none;\n  cursor: grab;\n}\n\n.mj-flow-editor-canvas--pan-mode f-connection {\n  pointer-events: none;\n}\n\n.mj-flow-editor-canvas--pan-mode .mj-flow-connection-label {\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Minimap \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-minimap {\n  position: absolute;\n  bottom: 12px;\n  right: 12px;\n  width: 160px;\n  height: 120px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-sm);\n  overflow: hidden;\n  z-index: 15;\n}\n\n.mj-flow-editor-minimap f-minimap {\n  width: 100%;\n  height: 100%;\n}\n\n/* Foblex minimap SVG node rectangles (no default styles provided by Foblex) */\n.mj-flow-editor-minimap .f-minimap-node {\n  fill: var(--mj-border-strong);\n  stroke: var(--mj-text-disabled);\n  stroke-width: 1;\n  rx: 3;\n  ry: 3;\n}\n\n.mj-flow-editor-minimap .f-minimap-node.f-selected {\n  fill: color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-bg-surface));\n  stroke: var(--mj-brand-primary);\n  stroke-width: 1.5;\n}\n\n.mj-flow-editor-minimap .f-minimap-group {\n  fill: var(--mj-border-default);\n  stroke: var(--mj-text-disabled);\n  stroke-width: 0.5;\n  rx: 2;\n  ry: 2;\n}\n\n/* Viewport indicator rectangle */\n.mj-flow-editor-minimap .f-minimap-view {\n  fill: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  stroke: var(--mj-brand-primary);\n  stroke-width: 1.5;\n}\n\n/* \u2500\u2500 Empty State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-empty {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  z-index: 5;\n}\n\n.mj-flow-editor-empty-subtitle {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-disabled);\n  margin: 0;\n}\n\n/* \u2500\u2500 Connection Labels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-connection-label {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: 5px;\n  background: var(--mj-bg-surface);\n  border: 1.5px solid var(--mj-border-strong);\n  border-radius: 5px;\n  padding: 4px 10px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n  box-shadow: var(--mj-shadow-sm);\n  pointer-events: none;\n  line-height: 1.4;\n  text-align: center;\n}\n\n.mj-flow-connection-label-icon {\n  font-size: 10px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n/* \u2500\u2500 Foblex Overrides \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Canvas \u2014 transparent so the grid pattern shows through */\nf-canvas {\n  background: transparent;\n}\n\n/* Selection area */\nf-selection-area {\n  --f-selection-area-background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  --f-selection-area-border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n/* Line alignment guides */\nf-line-alignment {\n  --f-line-alignment-color: var(--mj-brand-primary);\n}\n\n/* Connection paths \u2014 default stroke color prevents invisible connections */\n.f-connection path {\n  stroke: var(--mj-text-disabled);\n  stroke-width: var(--connection-width, 2px);\n  fill: none;\n  transition: stroke 0.15s ease, stroke-width 0.15s ease;\n}\n\n.f-connection:hover path {\n  stroke-width: calc(var(--connection-width, 2px) + 1px);\n}\n\n.f-connection.f-selected path {\n  stroke: var(--mj-brand-primary);\n  stroke-width: max(3px, var(--connection-width, 2px));\n}\n\n/* Colored connections use the --connection-color custom property,\n   defaulting to neutral when no color is specified by the consumer */\n.mj-flow-connection-colored path {\n  stroke: var(--connection-color, var(--mj-text-disabled));\n}\n\n.mj-flow-connection-colored.f-selected path {\n  stroke: var(--connection-color, var(--mj-brand-primary));\n  stroke-width: max(3px, var(--connection-width, 2px));\n  filter: brightness(0.85);\n}\n\n/* Dashed connection style */\n.mj-flow-connection-dashed path {\n  stroke-dasharray: 8 4;\n}\n\n/* Dotted connection style */\n.mj-flow-connection-dotted path {\n  stroke-dasharray: 3 3;\n}\n\n.mj-flow-connection-animated path {\n  stroke-dasharray: 14 10;\n  stroke-linecap: round;\n  stroke-width: var(--connection-width, 4.5px);\n  animation: mj-flow-dash 0.5s linear infinite;\n  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--connection-color, var(--mj-brand-primary)) 70%, transparent));\n}\n@keyframes mj-flow-dash {\n  to { stroke-dashoffset: -24; }\n}\n\n/* Connection for create (dragging) */\n.f-connection-for-create path {\n  stroke: var(--mj-text-disabled);\n  stroke-dasharray: 6 3;\n  stroke-width: 2;\n}\n\n/* \u2500\u2500 Legend \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-editor-legend {\n  position: absolute;\n  bottom: 12px;\n  left: 12px;\n  background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n  backdrop-filter: blur(6px);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 10px 14px;\n  box-shadow: var(--mj-shadow-sm);\n  z-index: 15;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  max-width: 200px;\n}\n\n.mj-flow-editor-legend-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.mj-flow-editor-legend-section {\n  margin-bottom: 8px;\n}\n\n.mj-flow-editor-legend-section:last-child {\n  margin-bottom: 0;\n}\n\n.mj-flow-editor-legend-heading {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 4px;\n}\n\n.mj-flow-editor-legend-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 0;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n}\n\n.mj-flow-editor-legend-svg,\n.mj-flow-editor-legend-line-svg {\n  flex-shrink: 0;\n}\n\n.mj-flow-editor-legend-swatch {\n  display: inline-block;\n  width: 10px;\n  height: 10px;\n  border-radius: var(--mj-radius-sm);\n  flex-shrink: 0;\n}\n\n.mj-flow-editor-legend-box {\n  display: inline-block;\n  width: 14px;\n  height: 10px;\n  border: 2px solid;\n  border-radius: var(--mj-radius-sm);\n  flex-shrink: 0;\n}\n\n/* \u2500\u2500 Context Menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-context-menu {\n  position: fixed;\n  min-width: 180px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  padding: 4px;\n  z-index: 9999;\n  animation: mj-ctx-fade-in 0.1s ease-out;\n}\n\n@keyframes mj-ctx-fade-in {\n  from { opacity: 0; transform: scale(0.95); }\n  to { opacity: 1; transform: scale(1); }\n}\n\n.mj-flow-context-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 8px 12px;\n  border: none;\n  background: none;\n  font-size: var(--mj-text-sm);\n  font-weight: 450;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: 5px;\n  text-align: left;\n  transition: background-color 0.1s ease;\n}\n\n.mj-flow-context-menu-item:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.mj-flow-context-menu-item i {\n  width: 16px;\n  text-align: center;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.mj-flow-context-menu-shortcut {\n  margin-left: auto;\n  padding: 0 4px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 3px;\n  font-size: 10px;\n  font-family: inherit;\n  color: var(--mj-text-muted);\n}\n\n.mj-flow-context-menu-item--danger {\n  color: var(--mj-status-error);\n}\n\n.mj-flow-context-menu-item--danger:hover {\n  background-color: var(--mj-status-error-subtle);\n}\n\n.mj-flow-context-menu-item--danger i {\n  color: var(--mj-status-error);\n}\n\n.mj-flow-context-menu-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 8px;\n}\n\n/* \u2500\u2500 Focus Indicators (Accessibility) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-flow-toolbar-btn:focus-visible,\n.mj-agent-editor-btn:focus-visible,\n.mj-agent-editor-view-btn:focus-visible,\n.mj-agent-props-close:focus-visible,\n.mj-agent-props-delete-btn:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n.mj-flow-palette-item:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 1px;\n  border-radius: var(--mj-radius-md);\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.FlowStateService }, { type: i2.FlowLayoutService }], { Nodes: [{
             type: Input
         }], Connections: [{
@@ -1017,6 +1174,10 @@ export class FlowEditorComponent {
             type: Input
         }], ShowToolbar: [{
             type: Input
+        }], ToolbarVisibility: [{
+            type: Input
+        }], ToolbarAlign: [{
+            type: Input
         }], ShowLegend: [{
             type: Input
         }], GridSize: [{
@@ -1057,12 +1218,18 @@ export class FlowEditorComponent {
             type: Output
         }], ConnectionEditRequested: [{
             type: Output
+        }], BeforeContextMenu: [{
+            type: Output
+        }], AfterContextMenuAction: [{
+            type: Output
         }], GridToggled: [{
             type: Output
         }], MinimapToggled: [{
             type: Output
         }], LegendToggled: [{
             type: Output
+        }], ToolbarVisibilityChanged: [{
+            type: Output
         }], fFlow: [{
             type: ViewChild,
             args: [FFlowComponent]
@@ -1072,6 +1239,9 @@ export class FlowEditorComponent {
         }], fZoom: [{
             type: ViewChild,
             args: ['fZoomRef']
+        }], canvasArea: [{
+            type: ViewChild,
+            args: ['canvasArea']
         }], onDocumentClick: [{
             type: HostListener,
             args: ['document:click']
@@ -1079,5 +1249,12 @@ export class FlowEditorComponent {
             type: HostListener,
             args: ['keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowEditorComponent, { className: "FlowEditorComponent", filePath: "src/lib/components/flow-editor.component.ts", lineNumber: 44 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowEditorComponent, { className: "FlowEditorComponent", filePath: "src/lib/components/flow-editor.component.ts", lineNumber: 46 }); })();
+function defaultContextMenuItems(target) {
+    const noun = target === 'node' ? 'Node' : 'Connection';
+    return [
+        { ID: 'edit', Label: `Edit ${noun}`, Icon: 'fa-pen-to-square' },
+        { ID: 'remove', Label: `Remove ${noun}`, Icon: 'fa-trash-can', Danger: true },
+    ];
+}
 //# sourceMappingURL=flow-editor.component.js.map