@memberjunction/ng-flow-editor 0.0.1 → 4.1.0

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

@@ -0,0 +1,1090 @@
+import { Component, Input, Output, EventEmitter, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, HostListener } from '@angular/core';
+import { Subject } from 'rxjs';
+import { FFlowComponent, FCanvasComponent } from '@foblex/flow';
+import { FlowStateService } from '../services/flow-state.service';
+import { FlowLayoutService } from '../services/flow-layout.service';
+import * as i0 from "@angular/core";
+import * as i1 from "../services/flow-state.service";
+import * as i2 from "../services/flow-layout.service";
+import * as i3 from "@angular/common";
+import * as i4 from "@foblex/flow";
+import * as i5 from "./flow-node.component";
+import * as i6 from "./flow-palette.component";
+import * as i7 from "./flow-toolbar.component";
+import * as i8 from "./flow-status-bar.component";
+const _c0 = ["fZoomRef"];
+const _c1 = (a0, a1) => ({ x: a0, y: a1 });
+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.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    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_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-flow-palette", 4);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("NodeTypes", ctx_r2.NodeTypes);
+} }
+function FlowEditorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "f-background");
+    i0.ɵɵelement(1, "f-circle-pattern", 18);
+    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);
+} 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);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(1, "svg", 19);
+    i0.ɵɵelement(2, "path", 20);
+    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);
+} if (rf & 2) {
+    const conn_r5 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵstyleProp("color", conn_r5.LabelIconColor || "inherit");
+    i0.ɵɵproperty("ngClass", conn_r5.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);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const conn_r5 = 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.ɵɵadvance();
+    i0.ɵɵconditional(conn_r5.LabelIcon ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", conn_r5.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)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(1, "svg", 19);
+    i0.ɵɵelement(2, "path", 22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, FlowEditorComponent_For_12_Conditional_3_Template, 3, 10, "div", 23);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const conn_r5 = 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.ɵɵadvance();
+    i0.ɵɵproperty("refX", 9)("refY", 5)("height", 10)("width", 10);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("fill", conn_r5.Color || "#94a3b8");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(conn_r5.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)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const node_r7 = 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);
+} }
+function FlowEditorComponent_Conditional_15_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);
+    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);
+    i0.ɵɵtext(2, "Legend");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 30)(4, "div", 31);
+    i0.ɵɵtext(5, "Connections");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 32);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(7, "svg", 33);
+    i0.ɵɵelement(8, "line", 34);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(9, "span");
+    i0.ɵɵtext(10, "Only exit path");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 32);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(12, "svg", 33);
+    i0.ɵɵelement(13, "line", 35);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelement(14, "i", 36);
+    i0.ɵɵelementStart(15, "span");
+    i0.ɵɵtext(16, "Default (fallback)");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(17, "div", 32);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(18, "svg", 33);
+    i0.ɵɵelement(19, "line", 37);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(20, "span");
+    i0.ɵɵtext(21, "Conditional");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "div", 32);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(23, "svg", 33);
+    i0.ɵɵelement(24, "line", 38);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelement(25, "i", 39);
+    i0.ɵɵelementStart(26, "span");
+    i0.ɵɵtext(27, "Duplicate defaults");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(28, "div", 30)(29, "div", 31);
+    i0.ɵɵtext(30, "Step Types");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(31, "div", 32);
+    i0.ɵɵelement(32, "span", 40);
+    i0.ɵɵelementStart(33, "span");
+    i0.ɵɵtext(34, "Action");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(35, "div", 32);
+    i0.ɵɵelement(36, "span", 41);
+    i0.ɵɵelementStart(37, "span");
+    i0.ɵɵtext(38, "Prompt");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(39, "div", 32);
+    i0.ɵɵelement(40, "span", 42);
+    i0.ɵɵelementStart(41, "span");
+    i0.ɵɵtext(42, "Sub-Agent");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(43, "div", 32);
+    i0.ɵɵelement(44, "span", 43);
+    i0.ɵɵelementStart(45, "span");
+    i0.ɵɵtext(46, "For Each");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(47, "div", 32);
+    i0.ɵɵelement(48, "span", 44);
+    i0.ɵɵelementStart(49, "span");
+    i0.ɵɵtext(50, "While");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(51, "div", 30)(52, "div", 31);
+    i0.ɵɵtext(53, "Borders");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(54, "div", 32);
+    i0.ɵɵelement(55, "span", 45);
+    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(61, "span");
+    i0.ɵɵtext(62, "Missing config");
+    i0.ɵɵelementEnd()()()();
+} }
+function FlowEditorComponent_Conditional_18_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 50);
+    i0.ɵɵtext(1, "Drag steps from the palette to start building your flow");
+    i0.ɵɵelementEnd();
+} }
+function FlowEditorComponent_Conditional_18_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 50);
+    i0.ɵɵtext(1, "No steps defined for this flow");
+    i0.ɵɵelementEnd();
+} }
+function FlowEditorComponent_Conditional_18_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 51);
+    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, "div", 48);
+    i0.ɵɵelement(2, "i", 49);
+    i0.ɵɵconditionalCreate(3, FlowEditorComponent_Conditional_18_Conditional_3_Template, 2, 0, "p", 50);
+    i0.ɵɵconditionalCreate(4, FlowEditorComponent_Conditional_18_Conditional_4_Template, 2, 0, "p", 50);
+    i0.ɵɵconditionalCreate(5, FlowEditorComponent_Conditional_18_Conditional_5_Template, 2, 0, "p", 51);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(!ctx_r2.ReadOnly ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.ReadOnly ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r2.ReadOnly ? 5 : -1);
+} }
+function FlowEditorComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 52);
+    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", 53);
+    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", 54);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(5, "div", 55);
+    i0.ɵɵelementStart(6, "button", 56);
+    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", 57);
+    i0.ɵɵelementStart(8, "span");
+    i0.ɵɵtext(9);
+    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");
+} }
+function FlowEditorComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-flow-status-bar", 16);
+} 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);
+} }
+/**
+ * Generic, entity-agnostic visual flow editor component.
+ * Wraps Foblex Flow to provide a clean MJ-style API.
+ *
+ * Usage:
+ * ```html
+ * <mj-flow-editor
+ *   [Nodes]="myNodes"
+ *   [Connections]="myConnections"
+ *   [NodeTypes]="myNodeTypes"
+ *   (NodeSelected)="onNodeSelected($event)"
+ *   (ConnectionCreated)="onConnectionCreated($event)">
+ * </mj-flow-editor>
+ * ```
+ */
+export class FlowEditorComponent {
+    cdr;
+    stateService;
+    layoutService;
+    // ── Inputs ──────────────────────────────────────────────────
+    Nodes = [];
+    Connections = [];
+    NodeTypes = [];
+    ReadOnly = false;
+    ShowMinimap = true;
+    ShowPalette = true;
+    ShowGrid = true;
+    ShowStatusBar = true;
+    ShowToolbar = true;
+    ShowLegend = true;
+    GridSize = 20;
+    AutoLayoutDirection = 'vertical';
+    /** Background color for connection labels */
+    ConnectionLabelBackground = '#fffef5';
+    /** Border color for connection labels */
+    ConnectionLabelBorderColor = '#cbd5e1';
+    /** Text color for connection labels */
+    ConnectionLabelTextColor = '#334155';
+    // ── Outputs ─────────────────────────────────────────────────
+    NodeSelected = new EventEmitter();
+    NodeAdded = new EventEmitter();
+    NodeRemoved = new EventEmitter();
+    NodeMoved = new EventEmitter();
+    ConnectionCreated = new EventEmitter();
+    ConnectionRemoved = new EventEmitter();
+    ConnectionReassigned = new EventEmitter();
+    ConnectionSelected = new EventEmitter();
+    SelectionChanged = new EventEmitter();
+    CanvasClicked = new EventEmitter();
+    NodesChanged = new EventEmitter();
+    ConnectionsChanged = new EventEmitter();
+    NodeEditRequested = new EventEmitter();
+    ConnectionEditRequested = new EventEmitter();
+    GridToggled = new EventEmitter();
+    MinimapToggled = new EventEmitter();
+    LegendToggled = new EventEmitter();
+    // ── View Children ───────────────────────────────────────────
+    fFlow;
+    fCanvas;
+    fZoom;
+    // ── Internal State ──────────────────────────────────────────
+    zoomLevel = 100;
+    canvasPosition = { x: 0, y: 0 };
+    canvasScale = 1;
+    selectedNodeIDs = [];
+    selectedConnectionIDs = [];
+    panMode = false;
+    /** Trigger function for canvas panning — only allows panning in pan mode */
+    canvasMoveTriggerFn = (_event) => {
+        return this.panMode;
+    };
+    /* Context menu state */
+    contextMenuVisible = false;
+    contextMenuX = 0;
+    contextMenuY = 0;
+    contextMenuTargetType = 'node';
+    contextMenuNode = null;
+    contextMenuConnection = null;
+    destroy$ = new Subject();
+    initialized = false;
+    lastConnectionClickTime = 0;
+    constructor(cdr, stateService, layoutService) {
+        this.cdr = cdr;
+        this.stateService = stateService;
+        this.layoutService = layoutService;
+    }
+    // ── Lifecycle ───────────────────────────────────────────────
+    ngOnInit() {
+        this.initialized = true;
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    // ── Public Methods ──────────────────────────────────────────
+    /** Fit all nodes within the viewport */
+    ZoomToFit() {
+        this.fCanvas?.fitToScreen({ x: 150, y: 150 }, true);
+    }
+    /** Zoom in one step */
+    ZoomIn() {
+        if (this.fZoom) {
+            this.fZoom.zoomIn();
+        }
+        else {
+            const newScale = Math.min(this.canvasScale + 0.15, 3);
+            this.fCanvas?.setScale(newScale);
+            this.updateZoomLevel(newScale);
+        }
+    }
+    /** Zoom out one step */
+    ZoomOut() {
+        if (this.fZoom) {
+            this.fZoom.zoomOut();
+        }
+        else {
+            const newScale = Math.max(this.canvasScale - 0.15, 0.1);
+            this.fCanvas?.setScale(newScale);
+            this.updateZoomLevel(newScale);
+        }
+    }
+    /** Run auto-layout using dagre */
+    AutoArrange(direction) {
+        const dir = direction ?? this.AutoLayoutDirection;
+        this.pushUndoState();
+        const result = this.layoutService.CalculateLayout(this.Nodes, this.Connections, dir);
+        for (const node of this.Nodes) {
+            const newPos = result.Positions.get(node.ID);
+            if (newPos) {
+                node.Position = { ...newPos };
+            }
+        }
+        this.NodesChanged.emit(this.Nodes);
+        this.cdr.detectChanges();
+        // Fit to screen after layout
+        setTimeout(() => this.ZoomToFit(), 100);
+    }
+    /** Center the canvas on a specific node */
+    CenterOnNode(nodeId) {
+        this.fCanvas?.centerGroupOrNode(nodeId, true);
+    }
+    /** Programmatically select a node */
+    SelectNode(nodeId) {
+        this.fFlow?.select([nodeId], []);
+        const node = this.Nodes.find(n => n.ID === nodeId) ?? null;
+        this.NodeSelected.emit(node);
+    }
+    /** Clear all selection */
+    ClearSelection() {
+        this.fFlow?.clearSelection();
+        this.selectedNodeIDs = [];
+        this.selectedConnectionIDs = [];
+        this.NodeSelected.emit(null);
+        this.ConnectionSelected.emit(null);
+    }
+    /** Update a node's visual status */
+    SetNodeStatus(nodeId, status, message) {
+        const node = this.Nodes.find(n => n.ID === nodeId);
+        if (node) {
+            node.Status = status;
+            node.StatusMessage = message;
+            this.cdr.detectChanges();
+        }
+    }
+    /** Update a node's visual properties and push a new object reference so
+     *  OnPush child components (FlowNodeComponent) detect the change. */
+    UpdateNode(nodeId, changes) {
+        const idx = this.Nodes.findIndex(n => n.ID === nodeId);
+        if (idx === -1)
+            return;
+        // Create a new object reference so the OnPush FlowNodeComponent picks up the change
+        this.Nodes[idx] = { ...this.Nodes[idx], ...changes };
+        this.cdr.detectChanges();
+    }
+    /** Update a connection's visual properties in-place (label, color, style, etc.) */
+    UpdateConnection(connId, changes) {
+        const conn = this.Connections.find(c => c.ID === connId);
+        if (!conn)
+            return;
+        Object.assign(conn, changes);
+        this.cdr.detectChanges();
+    }
+    /** Highlight a sequence of nodes (e.g., execution path) */
+    HighlightPath(nodeIds) {
+        for (const node of this.Nodes) {
+            if (nodeIds.includes(node.ID)) {
+                node.Status = 'running';
+            }
+        }
+        // Highlight connections along the path
+        for (const conn of this.Connections) {
+            const srcIdx = nodeIds.indexOf(conn.SourceNodeID);
+            const tgtIdx = nodeIds.indexOf(conn.TargetNodeID);
+            if (srcIdx >= 0 && tgtIdx >= 0 && tgtIdx === srcIdx + 1) {
+                conn.Animated = true;
+            }
+        }
+        this.cdr.detectChanges();
+    }
+    /** Clear all node status highlights */
+    ClearHighlights() {
+        for (const node of this.Nodes) {
+            node.Status = 'default';
+            node.StatusMessage = undefined;
+        }
+        for (const conn of this.Connections) {
+            conn.Animated = false;
+        }
+        this.cdr.detectChanges();
+    }
+    /** Undo the last operation */
+    Undo() {
+        const snapshot = this.stateService.Undo(this.Nodes, this.Connections);
+        if (snapshot) {
+            this.Nodes = snapshot.Nodes;
+            this.Connections = snapshot.Connections;
+            this.NodesChanged.emit(this.Nodes);
+            this.ConnectionsChanged.emit(this.Connections);
+            this.cdr.detectChanges();
+        }
+    }
+    /** Redo the last undone operation */
+    Redo() {
+        const snapshot = this.stateService.Redo(this.Nodes, this.Connections);
+        if (snapshot) {
+            this.Nodes = snapshot.Nodes;
+            this.Connections = snapshot.Connections;
+            this.NodesChanged.emit(this.Nodes);
+            this.ConnectionsChanged.emit(this.Connections);
+            this.cdr.detectChanges();
+        }
+    }
+    get CanUndo() {
+        return this.stateService.CanUndo;
+    }
+    get CanRedo() {
+        return this.stateService.CanRedo;
+    }
+    /** Delete the currently selected nodes and connections */
+    DeleteSelected() {
+        if (this.ReadOnly || (this.selectedNodeIDs.length === 0 && this.selectedConnectionIDs.length === 0)) {
+            return;
+        }
+        this.pushUndoState();
+        this.removeSelectedItems();
+        this.ClearSelection();
+    }
+    // ── Foblex Event Handlers ──────────────────────────────────
+    /** Called when Foblex flow finishes loading */
+    onFlowLoaded() {
+        if (this.Nodes.length > 0) {
+            setTimeout(() => this.ZoomToFit(), 200);
+        }
+    }
+    /** Canvas zoom/pan changed */
+    onCanvasChange(event) {
+        this.canvasPosition = event.position;
+        this.canvasScale = event.scale;
+        this.updateZoomLevel(event.scale);
+    }
+    /** User drew a new connection */
+    onCreateConnection(event) {
+        if (!event.fInputId || this.ReadOnly)
+            return;
+        this.pushUndoState();
+        // Derive node IDs from port IDs (ports are named nodeID-input / nodeID-output)
+        const sourceNodeID = this.findNodeByPortId(event.fOutputId);
+        const targetNodeID = this.findNodeByPortId(event.fInputId);
+        if (!sourceNodeID || !targetNodeID)
+            return;
+        // Resolve actual port IDs — when fConnectOnNode is enabled, Foblex may
+        // send the node ID itself instead of a port ID. Map to the correct port.
+        const sourcePortID = this.resolvePortId(event.fOutputId, sourceNodeID, 'output');
+        const targetPortID = this.resolvePortId(event.fInputId, targetNodeID, 'input');
+        // Prevent duplicate connections
+        const exists = this.Connections.some(c => c.SourcePortID === sourcePortID && c.TargetPortID === targetPortID);
+        if (exists)
+            return;
+        this.ConnectionCreated.emit({
+            SourceNodeID: sourceNodeID,
+            SourcePortID: sourcePortID,
+            TargetNodeID: targetNodeID,
+            TargetPortID: targetPortID
+        });
+    }
+    /** User reassigned (dragged) an existing connection endpoint to a new node */
+    onReassignConnection(event) {
+        if (this.ReadOnly)
+            return;
+        const conn = this.Connections.find(c => c.ID === event.connectionId);
+        if (!conn)
+            return;
+        // If dropped on empty space (no new target/source), discard the reassignment
+        if (event.isTargetReassign && !event.newTargetId)
+            return;
+        if (event.isSourceReassign && !event.newSourceId)
+            return;
+        this.pushUndoState();
+        const oldSourceNodeID = conn.SourceNodeID;
+        const oldSourcePortID = conn.SourcePortID;
+        const oldTargetNodeID = conn.TargetNodeID;
+        const oldTargetPortID = conn.TargetPortID;
+        // Resolve new endpoints
+        let newSourceNodeID = oldSourceNodeID;
+        let newSourcePortID = oldSourcePortID;
+        let newTargetNodeID = oldTargetNodeID;
+        let newTargetPortID = oldTargetPortID;
+        if (event.isSourceReassign && event.newSourceId) {
+            newSourceNodeID = this.findNodeByPortId(event.newSourceId) ?? oldSourceNodeID;
+            newSourcePortID = this.resolvePortId(event.newSourceId, newSourceNodeID, 'output');
+        }
+        if (event.isTargetReassign && event.newTargetId) {
+            newTargetNodeID = this.findNodeByPortId(event.newTargetId) ?? oldTargetNodeID;
+            newTargetPortID = this.resolvePortId(event.newTargetId, newTargetNodeID, 'input');
+        }
+        // Prevent self-connections
+        if (newSourceNodeID === newTargetNodeID)
+            return;
+        // Prevent duplicates
+        const duplicate = this.Connections.some(c => c.ID !== conn.ID &&
+            c.SourcePortID === newSourcePortID &&
+            c.TargetPortID === newTargetPortID);
+        if (duplicate)
+            return;
+        // Update the connection in-place
+        conn.SourceNodeID = newSourceNodeID;
+        conn.SourcePortID = newSourcePortID;
+        conn.TargetNodeID = newTargetNodeID;
+        conn.TargetPortID = newTargetPortID;
+        this.ConnectionReassigned.emit({
+            ConnectionID: conn.ID,
+            OldSourceNodeID: oldSourceNodeID,
+            OldSourcePortID: oldSourcePortID,
+            OldTargetNodeID: oldTargetNodeID,
+            OldTargetPortID: oldTargetPortID,
+            NewSourceNodeID: newSourceNodeID,
+            NewSourcePortID: newSourcePortID,
+            NewTargetNodeID: newTargetNodeID,
+            NewTargetPortID: newTargetPortID
+        });
+        this.ConnectionsChanged.emit(this.Connections);
+        this.cdr.detectChanges();
+    }
+    /** 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);
+        if (!config)
+            return;
+        // event.rect is already normalized to canvas coordinates by Foblex's
+        // GetNormalizedElementRectExecution (via RoundedRect.fromCenter).
+        // 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 = {
+            X: event.rect.x + event.rect.width / 2,
+            Y: event.rect.y + event.rect.height / 2
+        };
+        const newNode = this.createDefaultNode(config, dropPosition);
+        this.NodeAdded.emit({ Node: newNode, DropPosition: dropPosition });
+    }
+    /** Selection changed in Foblex */
+    onSelectionChange(event) {
+        const timeSinceClick = Date.now() - this.lastConnectionClickTime;
+        // If a direct connection click just fired, skip this Foblex callback
+        // to avoid double-processing / overwriting the direct click result.
+        if (timeSinceClick < 200) {
+            return;
+        }
+        this.selectedNodeIDs = event.fNodeIds ?? [];
+        this.selectedConnectionIDs = event.fConnectionIds ?? [];
+        this.SelectionChanged.emit({
+            SelectedNodeIDs: this.selectedNodeIDs,
+            SelectedConnectionIDs: this.selectedConnectionIDs
+        });
+        // Emit specific node/connection selection events.
+        // IMPORTANT: When selecting a connection, emit NodeSelected(null) FIRST so
+        // that consumers clear their node state before the connection event opens
+        // the connection properties panel.
+        if (this.selectedNodeIDs.length === 1) {
+            const node = this.Nodes.find(n => n.ID === this.selectedNodeIDs[0]);
+            this.ConnectionSelected.emit(null);
+            this.NodeSelected.emit(node ?? null);
+        }
+        else if (this.selectedConnectionIDs.length === 1) {
+            const conn = this.Connections.find(c => c.ID === this.selectedConnectionIDs[0]);
+            this.NodeSelected.emit(null);
+            this.ConnectionSelected.emit(conn ?? null);
+        }
+        else if (this.selectedNodeIDs.length === 0 && this.selectedConnectionIDs.length === 0) {
+            this.NodeSelected.emit(null);
+            this.ConnectionSelected.emit(null);
+        }
+    }
+    /** Nodes moved on canvas */
+    onNodesMoved(event) {
+        if (this.ReadOnly || !event.fNodes || event.fNodes.length === 0)
+            return;
+        this.pushUndoState();
+        for (const moved of event.fNodes) {
+            const node = this.Nodes.find(n => n.ID === moved.id);
+            if (node) {
+                const oldPosition = { ...node.Position };
+                node.Position = { X: moved.position.x, Y: moved.position.y };
+                this.NodeMoved.emit({
+                    NodeID: node.ID,
+                    OldPosition: oldPosition,
+                    NewPosition: node.Position
+                });
+            }
+        }
+        this.NodesChanged.emit(this.Nodes);
+    }
+    // ── Toolbar Event Handlers ─────────────────────────────────
+    onGridToggled(show) {
+        this.ShowGrid = show;
+        this.GridToggled.emit(show);
+        this.cdr.detectChanges();
+    }
+    onMinimapToggled(show) {
+        this.ShowMinimap = show;
+        this.MinimapToggled.emit(show);
+        this.cdr.detectChanges();
+    }
+    onLegendToggled(show) {
+        this.ShowLegend = show;
+        this.LegendToggled.emit(show);
+        this.cdr.detectChanges();
+    }
+    onPanModeToggled(enabled) {
+        this.panMode = enabled;
+        this.cdr.detectChanges();
+    }
+    // ── Context Menu ───────────────────────────────────────────
+    onNodeContextMenu(event, node) {
+        if (this.ReadOnly)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.showContextMenu(event, 'node', node, null);
+    }
+    /** Direct click on a connection — ensures ConnectionSelected fires reliably */
+    onConnectionClicked(event, conn) {
+        // Do NOT stopPropagation — let Foblex handle its own visual selection.
+        // Record the time so onSelectionChange can skip double-processing.
+        this.lastConnectionClickTime = Date.now();
+        this.selectedConnectionIDs = [conn.ID];
+        this.selectedNodeIDs = [];
+        this.NodeSelected.emit(null);
+        this.ConnectionSelected.emit(conn);
+        this.cdr.detectChanges();
+    }
+    onConnectionContextMenu(event, conn) {
+        if (this.ReadOnly)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.showContextMenu(event, 'connection', null, conn);
+    }
+    onContextMenuAction(action) {
+        this.hideContextMenu();
+        if (action === 'edit') {
+            if (this.contextMenuTargetType === 'node' && this.contextMenuNode) {
+                this.NodeEditRequested.emit(this.contextMenuNode);
+            }
+            else if (this.contextMenuTargetType === 'connection' && this.contextMenuConnection) {
+                this.ConnectionEditRequested.emit(this.contextMenuConnection);
+            }
+        }
+        else if (action === 'remove') {
+            this.pushUndoState();
+            if (this.contextMenuTargetType === 'node' && this.contextMenuNode) {
+                this.removeNodeById(this.contextMenuNode.ID);
+            }
+            else if (this.contextMenuTargetType === 'connection' && this.contextMenuConnection) {
+                this.removeConnectionById(this.contextMenuConnection.ID);
+            }
+        }
+    }
+    onDocumentClick() {
+        if (this.contextMenuVisible) {
+            this.hideContextMenu();
+        }
+    }
+    showContextMenu(event, targetType, node, connection) {
+        this.contextMenuTargetType = targetType;
+        this.contextMenuNode = node;
+        this.contextMenuConnection = connection;
+        this.contextMenuX = event.clientX;
+        this.contextMenuY = event.clientY;
+        this.contextMenuVisible = true;
+        this.cdr.detectChanges();
+    }
+    hideContextMenu() {
+        this.contextMenuVisible = false;
+        this.contextMenuNode = null;
+        this.contextMenuConnection = null;
+        this.cdr.detectChanges();
+    }
+    removeNodeById(nodeId) {
+        const node = this.Nodes.find(n => n.ID === nodeId);
+        if (!node)
+            return;
+        this.Nodes = this.Nodes.filter(n => n.ID !== nodeId);
+        /* Remove connections attached to this node */
+        const orphaned = this.Connections.filter(c => c.SourceNodeID === nodeId || c.TargetNodeID === nodeId);
+        this.Connections = this.Connections.filter(c => c.SourceNodeID !== nodeId && c.TargetNodeID !== nodeId);
+        for (const conn of orphaned) {
+            this.ConnectionRemoved.emit(conn);
+        }
+        this.NodeRemoved.emit(node);
+        this.NodesChanged.emit(this.Nodes);
+        this.ConnectionsChanged.emit(this.Connections);
+        this.cdr.detectChanges();
+    }
+    removeConnectionById(connId) {
+        const conn = this.Connections.find(c => c.ID === connId);
+        if (!conn)
+            return;
+        this.Connections = this.Connections.filter(c => c.ID !== connId);
+        this.ConnectionRemoved.emit(conn);
+        this.ConnectionsChanged.emit(this.Connections);
+        this.cdr.detectChanges();
+    }
+    // ── Keyboard Shortcuts ─────────────────────────────────────
+    onKeyDown(event) {
+        if (this.ReadOnly)
+            return;
+        const isCtrlOrMeta = event.ctrlKey || event.metaKey;
+        if (event.key === 'Delete' || event.key === 'Backspace') {
+            // Don't delete if user is typing in an input
+            const target = event.target;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT') {
+                return;
+            }
+            event.preventDefault();
+            this.DeleteSelected();
+        }
+        else if (isCtrlOrMeta && event.key === 'z' && !event.shiftKey) {
+            event.preventDefault();
+            this.Undo();
+        }
+        else if (isCtrlOrMeta && (event.key === 'y' || (event.key === 'z' && event.shiftKey))) {
+            event.preventDefault();
+            this.Redo();
+        }
+        else if (isCtrlOrMeta && event.key === 'a') {
+            event.preventDefault();
+            this.fFlow?.selectAll();
+        }
+    }
+    // ── TrackBy Functions ───────────────────────────────────────
+    trackNodeById(_index, node) {
+        return node.ID;
+    }
+    trackConnectionById(_index, conn) {
+        return conn.ID;
+    }
+    // ── Helper Methods ─────────────────────────────────────────
+    GetTypeConfig(type) {
+        return this.NodeTypes.find(nt => nt.Type === type) ?? null;
+    }
+    /** Get the connectable side string for Foblex based on port side */
+    GetConnectableSide(side) {
+        switch (side) {
+            case 'left': return 'left';
+            case 'right': return 'right';
+            case 'top': return 'top';
+            case 'bottom': return 'bottom';
+            default: return 'auto';
+        }
+    }
+    get selectedCount() {
+        return this.selectedNodeIDs.length + this.selectedConnectionIDs.length;
+    }
+    pushUndoState() {
+        this.stateService.PushState(this.Nodes, this.Connections);
+    }
+    updateZoomLevel(scale) {
+        this.zoomLevel = Math.round(scale * 100);
+        this.cdr.detectChanges();
+    }
+    findNodeByPortId(portId) {
+        for (const node of this.Nodes) {
+            for (const port of node.Ports) {
+                if (port.ID === portId) {
+                    return node.ID;
+                }
+            }
+        }
+        // When fConnectOnNode is enabled, Foblex may send the node ID itself
+        // instead of a port ID. Check for a direct node ID match as fallback.
+        const directMatch = this.Nodes.find(n => n.ID === portId);
+        if (directMatch) {
+            return directMatch.ID;
+        }
+        return null;
+    }
+    /**
+     * When fConnectOnNode is enabled, Foblex may send a node ID instead of a port ID.
+     * This resolves the raw ID to the correct port ID for the given direction.
+     */
+    resolvePortId(rawId, nodeId, direction) {
+        const node = this.Nodes.find(n => n.ID === nodeId);
+        if (!node)
+            return rawId;
+        // If the rawId already matches a port on this node, use it as-is
+        const exactPort = node.Ports.find(p => p.ID === rawId);
+        if (exactPort)
+            return rawId;
+        // Otherwise, find the first port matching the expected direction
+        const dirPort = node.Ports.find(p => p.Direction === direction);
+        return dirPort ? dirPort.ID : rawId;
+    }
+    createDefaultNode(config, position) {
+        const id = this.generateId();
+        const defaultPorts = config.DefaultPorts ?? [
+            { ID: `${id}-input`, Direction: 'input', Side: 'top', Multiple: true },
+            { ID: `${id}-output`, Direction: 'output', Side: 'bottom', Multiple: true }
+        ];
+        return {
+            ID: id,
+            Type: config.Type,
+            Label: config.Label,
+            Icon: config.Icon,
+            Status: 'default',
+            Position: position,
+            Ports: defaultPorts.map(p => ({
+                ...p,
+                ID: p.ID.startsWith(id) ? p.ID : `${id}-${p.ID}`
+            }))
+        };
+    }
+    removeSelectedItems() {
+        // Remove selected connections
+        const removedConnections = this.Connections.filter(c => this.selectedConnectionIDs.includes(c.ID));
+        this.Connections = this.Connections.filter(c => !this.selectedConnectionIDs.includes(c.ID));
+        for (const conn of removedConnections) {
+            this.ConnectionRemoved.emit(conn);
+        }
+        // Remove selected nodes and their connections
+        const removedNodes = this.Nodes.filter(n => this.selectedNodeIDs.includes(n.ID));
+        this.Nodes = this.Nodes.filter(n => !this.selectedNodeIDs.includes(n.ID));
+        // Also remove connections attached to deleted nodes
+        const deletedNodeIDs = new Set(this.selectedNodeIDs);
+        const orphanedConnections = this.Connections.filter(c => deletedNodeIDs.has(c.SourceNodeID) || deletedNodeIDs.has(c.TargetNodeID));
+        this.Connections = this.Connections.filter(c => !deletedNodeIDs.has(c.SourceNodeID) && !deletedNodeIDs.has(c.TargetNodeID));
+        for (const conn of orphanedConnections) {
+            this.ConnectionRemoved.emit(conn);
+        }
+        for (const node of removedNodes) {
+            this.NodeRemoved.emit(node);
+        }
+        this.NodesChanged.emit(this.Nodes);
+        this.ConnectionsChanged.emit(this.Connections);
+        this.cdr.detectChanges();
+    }
+    generateId() {
+        return 'flow-' + Math.random().toString(36).substring(2, 11);
+    }
+    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);
+        } 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);
+        } }, 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"], [1, "mj-flow-editor-empty-content"], [1, "fa-solid", "fa-diagram-project", "mj-flow-editor-empty-icon"], [1, "mj-flow-editor-empty-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) {
+            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.ɵɵ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.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(17, FlowEditorComponent_Conditional_17_Template, 63, 0, "div", 13);
+            i0.ɵɵconditionalCreate(18, FlowEditorComponent_Conditional_18_Template, 6, 3, "div", 14);
+            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.ɵɵ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.ɵɵadvance();
+            i0.ɵɵclassProp("mj-flow-editor-canvas--pan-mode", ctx.panMode);
+            i0.ɵɵadvance();
+            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.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.ReadOnly ? 7 : -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.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.Connections);
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.Nodes);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(!ctx.ReadOnly ? 15 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowMinimap ? 16 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowLegend && ctx.Nodes.length > 0 ? 17 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Nodes.length === 0 ? 18 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.contextMenuVisible ? 19 : -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.FlowNodeComponent, i6.FlowPaletteComponent, i7.FlowToolbarComponent, i8.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: #ffffff;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\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: #ffffff;\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: #ffffff;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\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: #cbd5e1;\n  stroke: #94a3b8;\n  stroke-width: 1;\n  rx: 3;\n  ry: 3;\n}\n\n.mj-flow-editor-minimap .f-minimap-node.f-selected {\n  fill: #93c5fd;\n  stroke: #3b82f6;\n  stroke-width: 1.5;\n}\n\n.mj-flow-editor-minimap .f-minimap-group {\n  fill: #e2e8f0;\n  stroke: #94a3b8;\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: rgba(59, 130, 246, 0.08);\n  stroke: #3b82f6;\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-content {\n  text-align: center;\n  padding: 40px;\n}\n\n.mj-flow-editor-empty-icon {\n  font-size: 48px;\n  color: #cbd5e1;\n  margin-bottom: 16px;\n}\n\n.mj-flow-editor-empty-title {\n  font-size: 15px;\n  font-weight: 500;\n  color: #64748b;\n  margin: 0 0 8px;\n}\n\n.mj-flow-editor-empty-subtitle {\n  font-size: 13px;\n  color: #94a3b8;\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: #fffef5;\n  border: 1.5px solid #cbd5e1;\n  border-radius: 5px;\n  padding: 4px 10px;\n  font-size: 11px;\n  font-weight: 500;\n  color: #334155;\n  white-space: nowrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\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: rgba(59, 130, 246, 0.08);\n  --f-selection-area-border: 1px solid rgba(59, 130, 246, 0.3);\n}\n\n/* Line alignment guides */\nf-line-alignment {\n  --f-line-alignment-color: #3b82f6;\n}\n\n/* Connection paths \u2014 default stroke color prevents invisible connections */\n.f-connection path {\n  stroke: #94a3b8;\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: #3b82f6;\n  stroke-width: 3;\n}\n\n/* Colored connections use the --connection-color custom property */\n.mj-flow-connection-colored path {\n  stroke: var(--connection-color, #94a3b8);\n}\n\n.mj-flow-connection-colored.f-selected path {\n  stroke: var(--connection-color, #3b82f6);\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: #94a3b8;\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: rgba(255, 255, 255, 0.92);\n  backdrop-filter: blur(6px);\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  padding: 10px 14px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n  z-index: 15;\n  font-size: 11px;\n  color: #475569;\n  max-width: 200px;\n}\n\n.mj-flow-editor-legend-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: #1e293b;\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: #94a3b8;\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: #475569;\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: 2px;\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: 3px;\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: #ffffff;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);\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: 13px;\n  font-weight: 450;\n  color: #334155;\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: #f1f5f9;\n}\n\n.mj-flow-context-menu-item i {\n  width: 16px;\n  text-align: center;\n  font-size: 12px;\n  color: #64748b;\n}\n\n.mj-flow-context-menu-item--danger {\n  color: #dc2626;\n}\n\n.mj-flow-context-menu-item--danger:hover {\n  background-color: #fef2f2;\n}\n\n.mj-flow-context-menu-item--danger i {\n  color: #dc2626;\n}\n\n.mj-flow-context-menu-divider {\n  height: 1px;\n  background: #e2e8f0;\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 #3b82f6;\n  outline-offset: 2px;\n}\n\n.mj-flow-palette-item:focus-visible {\n  outline: 2px solid #3b82f6;\n  outline-offset: 1px;\n  border-radius: 6px;\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          <div class=\"mj-flow-editor-empty-content\">\n            <i class=\"fa-solid fa-diagram-project mj-flow-editor-empty-icon\"></i>\n            @if (!ReadOnly) {\n              <p class=\"mj-flow-editor-empty-title\">Drag steps from the palette to start building your flow</p>\n            }\n            @if (ReadOnly) {\n              <p class=\"mj-flow-editor-empty-title\">No steps defined for this flow</p>\n            }\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          </div>\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: #ffffff;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\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: #ffffff;\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: #ffffff;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\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: #cbd5e1;\n  stroke: #94a3b8;\n  stroke-width: 1;\n  rx: 3;\n  ry: 3;\n}\n\n.mj-flow-editor-minimap .f-minimap-node.f-selected {\n  fill: #93c5fd;\n  stroke: #3b82f6;\n  stroke-width: 1.5;\n}\n\n.mj-flow-editor-minimap .f-minimap-group {\n  fill: #e2e8f0;\n  stroke: #94a3b8;\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: rgba(59, 130, 246, 0.08);\n  stroke: #3b82f6;\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-content {\n  text-align: center;\n  padding: 40px;\n}\n\n.mj-flow-editor-empty-icon {\n  font-size: 48px;\n  color: #cbd5e1;\n  margin-bottom: 16px;\n}\n\n.mj-flow-editor-empty-title {\n  font-size: 15px;\n  font-weight: 500;\n  color: #64748b;\n  margin: 0 0 8px;\n}\n\n.mj-flow-editor-empty-subtitle {\n  font-size: 13px;\n  color: #94a3b8;\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: #fffef5;\n  border: 1.5px solid #cbd5e1;\n  border-radius: 5px;\n  padding: 4px 10px;\n  font-size: 11px;\n  font-weight: 500;\n  color: #334155;\n  white-space: nowrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\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: rgba(59, 130, 246, 0.08);\n  --f-selection-area-border: 1px solid rgba(59, 130, 246, 0.3);\n}\n\n/* Line alignment guides */\nf-line-alignment {\n  --f-line-alignment-color: #3b82f6;\n}\n\n/* Connection paths \u2014 default stroke color prevents invisible connections */\n.f-connection path {\n  stroke: #94a3b8;\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: #3b82f6;\n  stroke-width: 3;\n}\n\n/* Colored connections use the --connection-color custom property */\n.mj-flow-connection-colored path {\n  stroke: var(--connection-color, #94a3b8);\n}\n\n.mj-flow-connection-colored.f-selected path {\n  stroke: var(--connection-color, #3b82f6);\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: #94a3b8;\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: rgba(255, 255, 255, 0.92);\n  backdrop-filter: blur(6px);\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  padding: 10px 14px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n  z-index: 15;\n  font-size: 11px;\n  color: #475569;\n  max-width: 200px;\n}\n\n.mj-flow-editor-legend-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: #1e293b;\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: #94a3b8;\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: #475569;\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: 2px;\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: 3px;\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: #ffffff;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);\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: 13px;\n  font-weight: 450;\n  color: #334155;\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: #f1f5f9;\n}\n\n.mj-flow-context-menu-item i {\n  width: 16px;\n  text-align: center;\n  font-size: 12px;\n  color: #64748b;\n}\n\n.mj-flow-context-menu-item--danger {\n  color: #dc2626;\n}\n\n.mj-flow-context-menu-item--danger:hover {\n  background-color: #fef2f2;\n}\n\n.mj-flow-context-menu-item--danger i {\n  color: #dc2626;\n}\n\n.mj-flow-context-menu-divider {\n  height: 1px;\n  background: #e2e8f0;\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 #3b82f6;\n  outline-offset: 2px;\n}\n\n.mj-flow-palette-item:focus-visible {\n  outline: 2px solid #3b82f6;\n  outline-offset: 1px;\n  border-radius: 6px;\n}\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.FlowStateService }, { type: i2.FlowLayoutService }], { Nodes: [{
+            type: Input
+        }], Connections: [{
+            type: Input
+        }], NodeTypes: [{
+            type: Input
+        }], ReadOnly: [{
+            type: Input
+        }], ShowMinimap: [{
+            type: Input
+        }], ShowPalette: [{
+            type: Input
+        }], ShowGrid: [{
+            type: Input
+        }], ShowStatusBar: [{
+            type: Input
+        }], ShowToolbar: [{
+            type: Input
+        }], ShowLegend: [{
+            type: Input
+        }], GridSize: [{
+            type: Input
+        }], AutoLayoutDirection: [{
+            type: Input
+        }], ConnectionLabelBackground: [{
+            type: Input
+        }], ConnectionLabelBorderColor: [{
+            type: Input
+        }], ConnectionLabelTextColor: [{
+            type: Input
+        }], NodeSelected: [{
+            type: Output
+        }], NodeAdded: [{
+            type: Output
+        }], NodeRemoved: [{
+            type: Output
+        }], NodeMoved: [{
+            type: Output
+        }], ConnectionCreated: [{
+            type: Output
+        }], ConnectionRemoved: [{
+            type: Output
+        }], ConnectionReassigned: [{
+            type: Output
+        }], ConnectionSelected: [{
+            type: Output
+        }], SelectionChanged: [{
+            type: Output
+        }], CanvasClicked: [{
+            type: Output
+        }], NodesChanged: [{
+            type: Output
+        }], ConnectionsChanged: [{
+            type: Output
+        }], NodeEditRequested: [{
+            type: Output
+        }], ConnectionEditRequested: [{
+            type: Output
+        }], GridToggled: [{
+            type: Output
+        }], MinimapToggled: [{
+            type: Output
+        }], LegendToggled: [{
+            type: Output
+        }], fFlow: [{
+            type: ViewChild,
+            args: [FFlowComponent]
+        }], fCanvas: [{
+            type: ViewChild,
+            args: [FCanvasComponent]
+        }], fZoom: [{
+            type: ViewChild,
+            args: ['fZoomRef']
+        }], onDocumentClick: [{
+            type: HostListener,
+            args: ['document:click']
+        }], onKeyDown: [{
+            type: HostListener,
+            args: ['keydown', ['$event']]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowEditorComponent, { className: "FlowEditorComponent", filePath: "src/lib/components/flow-editor.component.ts", lineNumber: 43 }); })();
+//# sourceMappingURL=flow-editor.component.js.map