@nyaruka/temba-components 0.138.6 → 0.140.0

package/out-tsc/src/flow/Editor.js

@@ -8,15 +8,11 @@ import { RapidElement } from '../RapidElement';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { CustomEventType } from '../interfaces';
 import { generateUUID, postJSON, fetchResults, getClasses } from '../utils';
+import { formatIssueMessage, getNodeBounds, calculateReflowPositions, snapToGrid } from './utils';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
 import { ACTION_GROUP_METADATA } from './types';
-import { Plumber } from './Plumber';
+import { Plumber, calculateFlowchartPath, ARROW_LENGTH, ARROW_HALF_WIDTH, CURSOR_GAP } from './Plumber';
 import { CanvasNode } from './CanvasNode';
-import { getNodeBounds, calculateReflowPositions, nodesOverlap } from './utils';
-export function snapToGrid(value) {
-    const snapped = Math.round(value / 20) * 20;
-    return Math.max(snapped, 0);
-}
 export function findNodeForExit(definition, exitUuid) {
     for (const node of definition.nodes) {
         const exit = node.exits.find((e) => e.uuid === exitUuid);
@@ -34,7 +30,7 @@ const AUTO_TRANSLATE_MODELS_ENDPOINT = '/api/internal/llms.json';
 const DROP_PREVIEW_OFFSET_X = 20;
 const DROP_PREVIEW_OFFSET_Y = 20;
 export class Editor extends RapidElement {
-    // unfortunately, jsplumb requires that we be in light DOM
+    // connection SVGs are appended directly to the canvas, so we need light DOM
     createRenderRoot() {
         return this;
     }
@@ -78,6 +74,10 @@ export class Editor extends RapidElement {
         -webkit-font-smoothing: antialiased;
       }
 
+      temba-floating-tab {
+        --floating-tab-right: 15px;
+      }
+
       #grid {
         position: relative;
         background-color: #f9f9f9;
@@ -128,100 +128,56 @@ export class Editor extends RapidElement {
       }
 
       #grid.viewing-revision temba-flow-node,
-      #grid.viewing-revision svg.jtk-connector,
-      #grid.viewing-revision .activity-overlay {
+      #grid.viewing-revision svg.plumb-connector {
         opacity: 0.5;
       }
 
-      body .jtk-endpoint {
-        width: initial;
-        height: initial;
-      }
-
-      .jtk-endpoint {
-        z-index: 600;
-        opacity: 0;
-      }
-
-      .plumb-source {
-        z-index: 600;
-        cursor: pointer;
-        opacity: 0;
-      }
-
-      .plumb-source.connected {
-        border-radius: 50%;
-        pointer-events: none;
+      svg.plumb-connector {
+        z-index: 10;
       }
 
-      .plumb-source circle {
-        fill: purple;
+      svg.plumb-connector path {
+        stroke: var(--color-connectors);
+        stroke-width: 3px;
       }
 
-      .plumb-target {
-        z-index: 600;
-        opacity: 0;
-        cursor: pointer;
-        fill: transparent;
+      svg.plumb-connector .plumb-arrow {
+        fill: var(--color-connectors);
+        stroke: none;
       }
 
-      body svg.jtk-connector.plumb-connector path {
-        stroke: var(--color-connectors) !important;
-        stroke-width: 3px;
+      svg.plumb-connector.hover path {
+        stroke: var(--color-success);
       }
 
-      body .plumb-connector {
-        z-index: 10 !important;
+      svg.plumb-connector.hover .plumb-arrow {
+        fill: var(--color-success);
       }
 
-      body .plumb-connector .plumb-arrow {
-        fill: var(--color-connectors);
+      #canvas.read-only-connections svg.plumb-connector.hover path {
         stroke: var(--color-connectors);
-        stroke-width: 0px !important;
-        margin-top: 6px;
-        z-index: 10;
       }
 
-      body svg.jtk-connector.jtk-hover path {
-        stroke: var(--color-success) !important;
-        stroke-width: 3px;
-      }
-
-      body #canvas.read-only-connections svg.jtk-connector.jtk-hover path {
-        stroke: var(--color-connectors) !important;
+      #canvas.read-only-connections svg.plumb-connector.hover .plumb-arrow {
+        fill: var(--color-connectors);
       }
 
-      body .plumb-connector.jtk-hover .plumb-arrow {
-        fill: var(--color-success) !important;
-        stroke-width: 0px;
-        z-index: 10;
+      #canvas.read-only-connections svg.plumb-connector,
+      #canvas.read-only-connections svg.plumb-connector * {
+        pointer-events: none !important;
+        cursor: default !important;
       }
 
-      body
-        #canvas.read-only-connections
-        .plumb-connector.jtk-hover
-        .plumb-arrow {
-        fill: var(--color-connectors) !important;
-        ponter-events: none;
+      svg.plumb-connector.removing path {
+        stroke: var(--color-error);
       }
 
-      body #canvas.read-only-connections svg {
-        pointer-events: none;
+      svg.plumb-connector.removing .plumb-arrow {
+        fill: var(--color-error);
       }
 
-      /* Activity overlays on connections */
-      .jtk-overlay.activity-overlay {
-        background: #f3f3f3;
-        border: 1px solid #d9d9d9;
-        color: #333;
-        border-radius: 4px;
-        padding: 2px 4px;
-        font-size: 10px;
-        font-weight: 600;
-        line-height: 0.9;
-        cursor: pointer;
-        z-index: 500;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      svg.plumb-connector.dragging {
+        z-index: 99999;
       }
 
       /* Active contact count on nodes */
@@ -243,6 +199,30 @@ export class Editor extends RapidElement {
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
       }
 
+      /* Activity overlay badges on connection exit stubs */
+      .activity-overlay {
+        position: absolute;
+        background: #f3f3f3;
+        border: 1px solid #d9d9d9;
+        color: #333;
+        border-radius: 4px;
+        padding: 2px 4px;
+        font-size: 10px;
+        font-weight: 600;
+        line-height: 0.9;
+        cursor: pointer;
+        z-index: 10;
+        pointer-events: auto;
+        white-space: nowrap;
+        user-select: none;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      }
+
+      #grid.viewing-revision .activity-overlay {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
       /* Recent contacts popup */
       @keyframes popupBounceIn {
         0% {
@@ -312,7 +292,6 @@ export class Editor extends RapidElement {
 
       .recent-contacts-popup .contact-name:hover {
         text-decoration: underline;
-        color: var(--color-link-primary, #1d4ed8);
       }
 
       .recent-contacts-popup .contact-operand {
@@ -328,17 +307,6 @@ export class Editor extends RapidElement {
         color: #999;
       }
 
-      /* Connection dragging feedback */
-      body svg.jtk-connector.jtk-dragging {
-        z-index: 99999 !important;
-      }
-
-      .katavorio-drag-no-select svg.jtk-connector path,
-      .katavorio-drag-no-select svg.jtk-endpoint path {
-        pointer-events: none !important;
-        border: 1px solid purple;
-      }
-
       /* Connection target feedback */
       temba-flow-node.connection-target-valid {
         outline: 3px solid var(--color-success, #22c55e) !important;
@@ -368,10 +336,6 @@ export class Editor extends RapidElement {
         border-radius: var(--curvature);
       }
 
-      .jtk-floating-endpoint {
-        pointer-events: none;
-      }
-
       .localization-window-content {
         display: flex;
         flex-direction: column;
@@ -562,6 +526,26 @@ export class Editor extends RapidElement {
         color: #9ca3af;
         white-space: nowrap;
       }
+
+      .issue-list-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 13px;
+        color: #333;
+      }
+
+      .issue-list-item:hover {
+        background: #fff5f5;
+      }
+
+      .issue-list-item temba-icon {
+        color: tomato;
+        flex-shrink: 0;
+      }
     `;
     }
     constructor() {
@@ -587,6 +571,10 @@ export class Editor extends RapidElement {
         this.dragFromNodeId = null;
         this.originalConnectionTargetId = null;
         this.isValidTarget = true;
+        // Canvas-relative source exit position (set at drag start)
+        this.connectionSourceX = null;
+        this.connectionSourceY = null;
+        this.issuesWindowHidden = true;
         this.localizationWindowHidden = true;
         this.translationFilters = {
             categories: false
@@ -606,6 +594,7 @@ export class Editor extends RapidElement {
         this.editingNode = null;
         this.editingNodeUI = null;
         this.editingAction = null;
+        this.dialogOrigin = null;
         this.isCreatingNewNode = false;
         this.pendingNodePosition = null;
         // Canvas drop state for dragging actions to canvas
@@ -635,15 +624,13 @@ export class Editor extends RapidElement {
             getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
         }
         this.plumber.on('connection:drag', (connection) => {
-            // console.log('connection:drag', connection);
-            this.dragFromNodeId =
-                connection.data.nodeId ||
-                    document.getElementById(connection.sourceId).closest('.node').id;
+            this.dragFromNodeId = connection.data.nodeId;
             this.sourceId = connection.sourceId;
+            this.connectionSourceX = connection.sourceX;
+            this.connectionSourceY = connection.sourceY;
             this.originalConnectionTargetId = connection.target.id;
         });
         this.plumber.on('connection:abort', (info) => {
-            // console.log('Connection aborted', info);
             this.makeConnection(info);
         });
         this.plumber.on('connection:detach', (info) => {
@@ -672,6 +659,7 @@ export class Editor extends RapidElement {
                 left: snapToGrid(this.connectionPlaceholder.position.left),
                 top: snapToGrid(this.connectionPlaceholder.position.top)
             };
+            const isDragUp = !!this.connectionPlaceholder.dragUp;
             // Update the placeholder to the snapped position
             this.connectionPlaceholder.position = snappedPosition;
             // Store the pending connection info
@@ -680,12 +668,14 @@ export class Editor extends RapidElement {
                 exitId: this.sourceId,
                 position: snappedPosition
             };
-            // Show the context menu just below the placeholder
+            // Show the context menu near the placeholder
             const canvas = this.querySelector('#canvas');
             if (canvas) {
                 const canvasRect = canvas.getBoundingClientRect();
-                const menuX = canvasRect.left + snappedPosition.left - 40; // center horizontally
-                const menuY = canvasRect.top + snappedPosition.top + 80; // just below placeholder
+                const menuX = canvasRect.left + snappedPosition.left - 40;
+                const menuY = isDragUp
+                    ? canvasRect.top + snappedPosition.top + 74 // just below placeholder bottom
+                    : canvasRect.top + snappedPosition.top + 80; // just below placeholder
                 const canvasMenu = this.querySelector('temba-canvas-menu');
                 if (canvasMenu) {
                     canvasMenu.show(menuX, menuY, {
@@ -706,6 +696,8 @@ export class Editor extends RapidElement {
         // Clear connection state (but keep sourceId/dragFromNodeId if we have a pending connection)
         if (!this.pendingCanvasConnection) {
             this.sourceId = null;
+            this.connectionSourceX = null;
+            this.connectionSourceY = null;
             this.dragFromNodeId = null;
         }
         this.targetId = null;
@@ -862,7 +854,7 @@ export class Editor extends RapidElement {
                 clearTimeout(this.activityTimer);
             }
             this.activityTimer = window.setTimeout(() => {
-                // this.fetchActivityData();
+                this.fetchActivityData();
             }, this.activityInterval);
         });
     }
@@ -949,6 +941,7 @@ export class Editor extends RapidElement {
             return;
         if (this.isReadOnly())
             return;
+        this.blurActiveContentEditable();
         const element = event.currentTarget;
         // Only start dragging if clicking on the element itself, not on exits or other interactive elements
         const target = event.target;
@@ -1008,10 +1001,22 @@ export class Editor extends RapidElement {
         // We clicked on empty canvas space, start selection
         this.handleCanvasMouseDown(event);
     }
+    blurActiveContentEditable() {
+        var _b;
+        let active = document.activeElement;
+        while ((_b = active === null || active === void 0 ? void 0 : active.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement) {
+            active = active.shadowRoot.activeElement;
+        }
+        if (active instanceof HTMLElement &&
+            active.getAttribute('contenteditable') === 'true') {
+            active.blur();
+        }
+    }
     handleCanvasMouseDown(event) {
         var _b;
         if (this.isReadOnly())
             return;
+        this.blurActiveContentEditable();
         const target = event.target;
         if (target.id === 'canvas' || target.id === 'grid') {
             // Ignore clicks on exits
@@ -1219,72 +1224,52 @@ export class Editor extends RapidElement {
     renderConnectionPlaceholder() {
         if (!this.connectionPlaceholder || !this.connectionPlaceholder.visible)
             return '';
-        const { position } = this.connectionPlaceholder;
+        const { position, dragUp } = this.connectionPlaceholder;
         // Render connection line when we have a pending connection (after drop)
         let svgPath = null;
-        if (this.sourceId && this.dragFromNodeId && this.pendingCanvasConnection) {
-            const sourceElement = document.getElementById(this.sourceId);
-            if (sourceElement) {
-                const sourceRect = sourceElement.getBoundingClientRect();
-                const canvas = this.querySelector('#canvas');
-                const canvasRect = canvas.getBoundingClientRect();
-                // Source point (bottom center of exit)
-                const sourceX = sourceRect.left + sourceRect.width / 2 - canvasRect.left;
-                const sourceY = sourceRect.bottom - canvasRect.top;
-                // Target point (top center of placeholder)
-                const targetX = position.left + 100; // 100 is half the placeholder width (200px)
-                const targetY = position.top;
-                // Use jsPlumb FlowchartConnector parameters: stub [20, 10], cornerRadius 5
-                const stubStart = 20;
-                const stubEnd = 10;
-                const cornerRadius = 5;
-                // Calculate flowchart path with corners
-                const verticalStart = sourceY + stubStart;
-                const verticalEnd = targetY - stubEnd;
-                const midY = (verticalStart + verticalEnd) / 2;
-                // Build path with rounded corners (flowchart style)
-                let pathData = `M ${sourceX} ${sourceY} L ${sourceX} ${verticalStart}`;
-                if (sourceX !== targetX) {
-                    // Horizontal segment needed
-                    if (Math.abs(verticalEnd - verticalStart) > cornerRadius * 2) {
-                        // Enough space for corners
-                        pathData += ` L ${sourceX} ${midY - cornerRadius}`;
-                        pathData += ` Q ${sourceX} ${midY}, ${sourceX + (targetX > sourceX ? cornerRadius : -cornerRadius)} ${midY}`;
-                        pathData += ` L ${targetX - (targetX > sourceX ? cornerRadius : -cornerRadius)} ${midY}`;
-                        pathData += ` Q ${targetX} ${midY}, ${targetX} ${midY + cornerRadius}`;
-                        pathData += ` L ${targetX} ${verticalEnd}`;
-                    }
-                    else {
-                        // Direct horizontal transition
-                        pathData += ` L ${targetX} ${verticalStart}`;
-                        pathData += ` L ${targetX} ${verticalEnd}`;
-                    }
-                }
-                else {
-                    // Straight vertical line
-                    pathData += ` L ${targetX} ${verticalEnd}`;
-                }
-                pathData += ` L ${targetX} ${targetY}`;
-                svgPath = html `
-          <svg
-            style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;"
-          >
-            <path
-              d="${pathData}"
-              fill="none"
-              stroke="var(--color-connectors, #ccc)"
-              stroke-width="3"
-              class="plumb-connector"
-            />
-            <polygon
-              points="${targetX},${targetY} ${targetX - 6.5},${targetY -
-                    13} ${targetX + 6.5},${targetY - 13}"
-              fill="var(--color-connectors, #ccc)"
-              class="plumb-arrow"
-            />
-          </svg>
-        `;
+        if (this.sourceId &&
+            this.dragFromNodeId &&
+            this.pendingCanvasConnection &&
+            this.connectionSourceX != null &&
+            this.connectionSourceY != null) {
+            const sourceX = this.connectionSourceX;
+            const sourceY = this.connectionSourceY;
+            const targetX = position.left + 100;
+            // When dragging up, connect to the placeholder bottom; otherwise to the top
+            const targetY = dragUp ? position.top + 64 : position.top;
+            const routeFace = dragUp
+                ? targetX < sourceX
+                    ? 'left'
+                    : 'right'
+                : 'top';
+            const pathData = calculateFlowchartPath(sourceX, sourceY, targetX, targetY, 20, dragUp ? 0 : 10, 5, routeFace);
+            const aw = ARROW_HALF_WIDTH;
+            const al = ARROW_LENGTH;
+            let arrowPoints;
+            if (dragUp) {
+                // Arrow tip pointing up, base at placeholder bottom
+                arrowPoints = `${targetX},${targetY - al} ${targetX - aw},${targetY} ${targetX + aw},${targetY}`;
+            }
+            else {
+                // Arrow pointing down into top of placeholder
+                arrowPoints = `${targetX},${targetY} ${targetX - aw},${targetY - al} ${targetX + aw},${targetY - al}`;
             }
+            svgPath = html `
+        <svg
+          style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;"
+        >
+          <path
+            d="${pathData}"
+            fill="none"
+            stroke="var(--color-connectors, #ccc)"
+            stroke-width="3"
+          />
+          <polygon
+            points="${arrowPoints}"
+            fill="var(--color-connectors, #ccc)"
+          />
+        </svg>
+      `;
         }
         return html `${svgPath}
       <div
@@ -1306,17 +1291,13 @@ export class Editor extends RapidElement {
     }
     /**
      * Checks for node collisions and reflows nodes as needed.
-     * Nodes are only moved downward to resolve collisions.
-     *
-     * @param movedNodeUuids - UUIDs of nodes that were just moved/dropped
-     * @param droppedNodeUuid - UUID of the specific node that was dropped (if applicable)
-     * @param dropTargetBounds - Bounds of the node that was dropped onto (if applicable)
+     * Sacred nodes (just moved/dropped) keep their positions while
+     * other nodes are moved in the least-disruptive direction.
      */
-    checkCollisionsAndReflow(movedNodeUuids, droppedNodeUuid = null, dropTargetBounds = null) {
+    checkCollisionsAndReflow(sacredNodeUuids) {
         var _b;
         if (!this.definition)
             return;
-        // Get all node bounds (only for actual nodes, not stickies)
         const allBounds = [];
         for (const node of this.definition.nodes) {
             const nodeUI = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.nodes[node.uuid];
@@ -1327,35 +1308,13 @@ export class Editor extends RapidElement {
                 allBounds.push(bounds);
             }
         }
-        // Check if we need to determine midpoint priority for a dropped node
-        let targetHasPriority = false;
-        if (droppedNodeUuid && dropTargetBounds) {
-            const droppedBounds = allBounds.find((b) => b.uuid === droppedNodeUuid);
-            if (droppedBounds) {
-                // Check if the bottom of the dropped node is below the midpoint of the target
-                // If bottom is above midpoint, dropped node gets preference (targetHasPriority = false)
-                // If bottom is below midpoint, target gets preference (targetHasPriority = true)
-                const droppedBottom = droppedBounds.bottom;
-                const targetMidpoint = dropTargetBounds.top + dropTargetBounds.height / 2;
-                targetHasPriority = droppedBottom > targetMidpoint;
-            }
-        }
-        // Calculate reflow positions for each moved node
-        const allReflowPositions = {};
-        for (const movedUuid of movedNodeUuids) {
-            const movedBounds = allBounds.find((b) => b.uuid === movedUuid);
-            if (!movedBounds)
-                continue;
-            // Calculate reflow for this moved node
-            const reflowPositions = calculateReflowPositions(movedUuid, movedBounds, allBounds, droppedNodeUuid === movedUuid ? targetHasPriority : false);
-            // Merge into all reflow positions
+        const reflowPositions = calculateReflowPositions(sacredNodeUuids, allBounds);
+        if (reflowPositions.size > 0) {
+            const positions = {};
             for (const [uuid, position] of reflowPositions.entries()) {
-                allReflowPositions[uuid] = position;
+                positions[uuid] = position;
             }
-        }
-        // If there are positions to update, apply them
-        if (Object.keys(allReflowPositions).length > 0) {
-            getStore().getState().updateCanvasPositions(allReflowPositions);
+            getStore().getState().updateCanvasPositions(positions);
         }
     }
     handleMouseMove(event) {
@@ -1390,21 +1349,37 @@ export class Editor extends RapidElement {
                 this.targetId = null;
                 this.isValidTarget = true;
                 // Show connection placeholder when over empty canvas
-                // Calculate position: horizontally centered at mouse, vertically just below mouse
                 const canvas = this.querySelector('#canvas');
                 if (canvas) {
                     const canvasRect = canvas.getBoundingClientRect();
                     const relativeX = event.clientX - canvasRect.left;
                     const relativeY = event.clientY - canvasRect.top;
-                    // offset the placeholder so it's centered horizontally and just below the mouse
-                    const placeholderWidth = 200; // approximate node width
-                    const placeholderOffset = 20; // distance below mouse cursor
+                    const placeholderWidth = 200;
+                    const placeholderHeight = 64;
+                    const arrowLength = ARROW_LENGTH;
+                    const cursorGap = CURSOR_GAP;
+                    // Determine if cursor is above the source exit using stored sourceY
+                    const dragUp = this.connectionSourceY != null
+                        ? relativeY < this.connectionSourceY
+                        : false;
+                    let top;
+                    if (dragUp) {
+                        // Arrow points up: tip at cy + cursorGap.
+                        // Placeholder bottom should sit just above the arrow tip.
+                        top = relativeY + cursorGap - placeholderHeight;
+                    }
+                    else {
+                        // Arrow points down: tip at cy - cursorGap + arrowLength.
+                        // Placeholder top sits just below the arrow tip.
+                        top = relativeY - cursorGap + arrowLength;
+                    }
                     this.connectionPlaceholder = {
                         position: {
                             left: relativeX - placeholderWidth / 2,
-                            top: relativeY + placeholderOffset
+                            top
                         },
-                        visible: true
+                        visible: true,
+                        dragUp
                     };
                 }
             }
@@ -1505,34 +1480,7 @@ export class Editor extends RapidElement {
                 if (nodeUuids.length > 0) {
                     // Allow DOM to update before checking collisions
                     setTimeout(() => {
-                        var _b, _c;
-                        // If only one node was moved, detect which node it might have been dropped onto
-                        let droppedNodeUuid = null;
-                        let dropTargetBounds = null;
-                        if (nodeUuids.length === 1) {
-                            droppedNodeUuid = nodeUuids[0];
-                            const droppedNodeUI = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.nodes[droppedNodeUuid];
-                            if (droppedNodeUI === null || droppedNodeUI === void 0 ? void 0 : droppedNodeUI.position) {
-                                const droppedBounds = getNodeBounds(droppedNodeUuid, droppedNodeUI.position);
-                                if (droppedBounds) {
-                                    // Find which node (if any) the dropped node overlaps with
-                                    for (const node of this.definition.nodes) {
-                                        if (node.uuid === droppedNodeUuid)
-                                            continue;
-                                        const nodeUI = (_c = this.definition._ui) === null || _c === void 0 ? void 0 : _c.nodes[node.uuid];
-                                        if (!(nodeUI === null || nodeUI === void 0 ? void 0 : nodeUI.position))
-                                            continue;
-                                        const targetBounds = getNodeBounds(node.uuid, nodeUI.position);
-                                        if (targetBounds &&
-                                            nodesOverlap(droppedBounds, targetBounds)) {
-                                            dropTargetBounds = targetBounds;
-                                            break; // Use the first overlapping node
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                        this.checkCollisionsAndReflow(nodeUuids, droppedNodeUuid, dropTargetBounds);
+                        this.checkCollisionsAndReflow(nodeUuids);
                     }, 0);
                 }
                 else {
@@ -1642,6 +1590,8 @@ export class Editor extends RapidElement {
             this.pendingCanvasConnection = null;
             this.connectionPlaceholder = null;
             this.sourceId = null;
+            this.connectionSourceX = null;
+            this.connectionSourceY = null;
             this.dragFromNodeId = null;
         }
         else {
@@ -1669,6 +1619,8 @@ export class Editor extends RapidElement {
             this.pendingCanvasConnection = null;
             this.connectionPlaceholder = null;
             this.sourceId = null;
+            this.connectionSourceX = null;
+            this.connectionSourceY = null;
             this.dragFromNodeId = null;
             this.originalConnectionTargetId = null;
         }
@@ -1779,6 +1731,10 @@ export class Editor extends RapidElement {
     handleActionEditRequested(event) {
         // For action editing, we set the action and find the corresponding node
         this.editingAction = event.detail.action;
+        this.dialogOrigin =
+            event.detail.originX != null
+                ? { x: event.detail.originX, y: event.detail.originY }
+                : null;
         // Find the node that contains this action
         const nodeUuid = event.detail.nodeUuid;
         const node = this.definition.nodes.find((n) => n.uuid === nodeUuid);
@@ -1814,6 +1770,10 @@ export class Editor extends RapidElement {
     handleNodeEditRequested(event) {
         this.editingNode = event.detail.node;
         this.editingNodeUI = event.detail.nodeUI;
+        this.dialogOrigin =
+            event.detail.originX != null
+                ? { x: event.detail.originX, y: event.detail.originY }
+                : null;
     }
     handleNodeDeleted(event) {
         const nodeUuid = event.detail.uuid;
@@ -1856,6 +1816,8 @@ export class Editor extends RapidElement {
                     this.pendingCanvasConnection = null;
                     this.connectionPlaceholder = null;
                     this.sourceId = null;
+                    this.connectionSourceX = null;
+                    this.connectionSourceY = null;
                     this.dragFromNodeId = null;
                 }
                 // Reset the creation flags
@@ -1882,6 +1844,7 @@ export class Editor extends RapidElement {
         this.editingNode = null;
         this.editingNodeUI = null;
         this.editingAction = null;
+        this.dialogOrigin = null;
     }
     handleActionEditCanceled() {
         // If we were creating a new node, just discard it
@@ -1910,6 +1873,8 @@ export class Editor extends RapidElement {
                     this.pendingCanvasConnection = null;
                     this.connectionPlaceholder = null;
                     this.sourceId = null;
+                    this.connectionSourceX = null;
+                    this.connectionSourceY = null;
                     this.dragFromNodeId = null;
                 }
                 // Reset the creation flags
@@ -2336,6 +2301,7 @@ export class Editor extends RapidElement {
         }
         this.localizationWindowHidden = false;
         this.revisionsWindowHidden = true;
+        this.issuesWindowHidden = true;
         const alreadySelected = languages.some((lang) => lang.code === this.languageCode);
         if (!alreadySelected) {
             this.handleLanguageChange(languages[0].code);
@@ -2543,11 +2509,42 @@ export class Editor extends RapidElement {
         }
         this.autoTranslating = false;
     }
+    handleIssuesTabClick() {
+        this.issuesWindowHidden = false;
+        this.revisionsWindowHidden = true;
+        this.localizationWindowHidden = true;
+    }
+    handleIssuesWindowClosed() {
+        this.issuesWindowHidden = true;
+    }
+    handleIssueItemClick(issue) {
+        var _b;
+        const issuesWindow = document.getElementById('issues-window');
+        issuesWindow === null || issuesWindow === void 0 ? void 0 : issuesWindow.handleClose();
+        this.issuesWindowHidden = true;
+        this.focusNode(issue.node_uuid);
+        const node = this.definition.nodes.find((n) => n.uuid === issue.node_uuid);
+        if (!node)
+            return;
+        if (issue.action_uuid) {
+            const action = (_b = node.actions) === null || _b === void 0 ? void 0 : _b.find((a) => a.uuid === issue.action_uuid);
+            if (action) {
+                this.editingAction = action;
+                this.editingNode = node;
+                this.editingNodeUI = this.definition._ui.nodes[issue.node_uuid];
+            }
+        }
+        else {
+            this.editingNode = node;
+            this.editingNodeUI = this.definition._ui.nodes[issue.node_uuid];
+        }
+    }
     handleRevisionsTabClick() {
         if (this.revisionsWindowHidden) {
             this.fetchRevisions();
             this.revisionsWindowHidden = false;
-            this.localizationWindowHidden = true; // Close other window
+            this.issuesWindowHidden = true;
+            this.localizationWindowHidden = true;
         }
     }
     handleRevisionsWindowClosed() {
@@ -2648,6 +2645,51 @@ export class Editor extends RapidElement {
         // Fetch the latest version of the flow to ensure the store is up to date
         getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
     }
+    renderIssuesTab() {
+        var _b;
+        if (!((_b = this.flowIssues) === null || _b === void 0 ? void 0 : _b.length))
+            return '';
+        return html `
+      <temba-floating-tab
+        id="issues-tab"
+        icon="alert_warning"
+        label="Flow Issues"
+        color="tomato"
+        order="1"
+        .hidden=${!this.issuesWindowHidden}
+        @temba-button-clicked=${this.handleIssuesTabClick}
+      ></temba-floating-tab>
+    `;
+    }
+    renderIssuesWindow() {
+        var _b;
+        if (!((_b = this.flowIssues) === null || _b === void 0 ? void 0 : _b.length))
+            return '';
+        return html `
+      <temba-floating-window
+        id="issues-window"
+        header="Flow Issues"
+        .width=${360}
+        .maxHeight=${600}
+        .top=${75}
+        color="tomato"
+        .hidden=${this.issuesWindowHidden}
+        @temba-dialog-hidden=${this.handleIssuesWindowClosed}
+      >
+        <div style="display:flex; flex-direction:column; gap:2px;">
+          ${this.flowIssues.map((issue) => html `
+              <div
+                class="issue-list-item"
+                @click=${() => this.handleIssueItemClick(issue)}
+              >
+                <temba-icon name="alert_warning" size="1.2"></temba-icon>
+                <span>${formatIssueMessage(issue)}</span>
+              </div>
+            `)}
+        </div>
+      </temba-floating-window>
+    `;
+    }
     renderRevisionsTab() {
         return html `
       <temba-floating-tab
@@ -2655,7 +2697,7 @@ export class Editor extends RapidElement {
         icon="revisions"
         label="Revisions"
         color="rgb(142, 94, 167)"
-        top="105"
+        order="2"
         .hidden=${!this.revisionsWindowHidden && this.localizationWindowHidden}
         @temba-button-clicked=${this.handleRevisionsTabClick}
       ></temba-floating-tab>
@@ -2926,7 +2968,7 @@ export class Editor extends RapidElement {
         icon="language"
         label="Translate Flow"
         color="#6b7280"
-        top="180"
+        order="3"
         .hidden=${!this.localizationWindowHidden}
         @temba-button-clicked=${this.handleLocalizationTabClick}
       ></temba-floating-tab>
@@ -2973,8 +3015,9 @@ export class Editor extends RapidElement {
       ${unsafeCSS(CanvasNode.styles.cssText)}
     </style>`;
         const stickies = ((_c = (_b = this.definition) === null || _b === void 0 ? void 0 : _b._ui) === null || _c === void 0 ? void 0 : _c.stickies) || {};
-        return html `${style} ${this.renderRevisionsWindow()}
-      ${this.renderLocalizationWindow()} ${this.renderAutoTranslateDialog()}
+        return html `${style} ${this.renderIssuesWindow()}
+      ${this.renderRevisionsWindow()} ${this.renderLocalizationWindow()}
+      ${this.renderAutoTranslateDialog()}
       <div id="editor">
         <div
           id="grid"
@@ -3047,6 +3090,7 @@ export class Editor extends RapidElement {
             .node=${this.editingNode}
             .nodeUI=${this.editingNodeUI}
             .action=${this.editingAction}
+            .dialogOrigin=${this.dialogOrigin}
             @temba-node-saved=${(e) => this.handleNodeSaved(e.detail.node, e.detail.uiConfig)}
             @temba-action-saved=${(e) => this.handleActionSaved(e.detail.action)}
             @temba-node-edit-cancelled=${this.handleNodeEditCanceled}
@@ -3060,7 +3104,8 @@ export class Editor extends RapidElement {
             .features=${this.features}
           ></temba-node-type-selector>`
             : ''}
-      ${this.renderRevisionsTab()} ${this.renderLocalizationTab()} `;
+      ${this.renderIssuesTab()} ${this.renderRevisionsTab()}
+      ${this.renderLocalizationTab()} `;
     }
 }
 __decorate([
@@ -3099,6 +3144,9 @@ __decorate([
 __decorate([
     fromStore(zustand, (state) => state.getCurrentActivity())
 ], Editor.prototype, "activityData", void 0);
+__decorate([
+    fromStore(zustand, (state) => { var _b; return ((_b = state.flowInfo) === null || _b === void 0 ? void 0 : _b.issues) || []; })
+], Editor.prototype, "flowIssues", void 0);
 __decorate([
     state()
 ], Editor.prototype, "isDragging", void 0);
@@ -3129,6 +3177,9 @@ __decorate([
 __decorate([
     state()
 ], Editor.prototype, "isValidTarget", void 0);
+__decorate([
+    state()
+], Editor.prototype, "issuesWindowHidden", void 0);
 __decorate([
     state()
 ], Editor.prototype, "localizationWindowHidden", void 0);