@nyaruka/temba-components 0.131.0 → 0.131.2

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

@@ -7,6 +7,9 @@ import { fromStore, zustand } from '../store/AppState';
 import { RapidElement } from '../RapidElement';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { CustomEventType } from '../interfaces';
+import { generateUUID } from '../utils';
+import { ACTION_CONFIG, NODE_CONFIG } from './config';
+import { ACTION_GROUP_METADATA } from './types';
 import { Plumber } from './Plumber';
 import { CanvasNode } from './CanvasNode';
 export function snapToGrid(value) {
@@ -24,6 +27,10 @@ export function findNodeForExit(definition, exitUuid) {
 }
 const SAVE_QUIET_TIME = 500;
 const DRAG_THRESHOLD = 5;
+// Offset for positioning dropped action node relative to mouse cursor
+// Keep small to make drop location close to cursor position
+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
     createRenderRoot() {
@@ -200,13 +207,22 @@ export class Editor extends RapidElement {
         this.editingNode = null;
         this.editingNodeUI = null;
         this.editingAction = null;
+        this.isCreatingNewNode = false;
+        this.pendingNodePosition = null;
+        // Canvas drop state for dragging actions to canvas
+        this.canvasDropPreview = null;
+        this.addActionToNodeUuid = null;
+        // Track target node for action drag
+        this.actionDragTargetNodeUuid = null;
+        // Track previous target node to clear placeholder when moving between nodes
+        this.previousActionDragTargetNodeUuid = null;
         this.canvasMouseDown = false;
         // Bound event handlers to maintain proper 'this' context
         this.boundMouseMove = this.handleMouseMove.bind(this);
         this.boundMouseUp = this.handleMouseUp.bind(this);
         this.boundGlobalMouseDown = this.handleGlobalMouseDown.bind(this);
         this.boundKeyDown = this.handleKeyDown.bind(this);
-        this.boundCanvasDoubleClick = this.handleCanvasDoubleClick.bind(this);
+        this.boundCanvasContextMenu = this.handleCanvasContextMenu.bind(this);
     }
     firstUpdated(changes) {
         super.firstUpdated(changes);
@@ -305,7 +321,7 @@ export class Editor extends RapidElement {
         document.removeEventListener('keydown', this.boundKeyDown);
         const canvas = this.querySelector('#canvas');
         if (canvas) {
-            canvas.removeEventListener('dblclick', this.boundCanvasDoubleClick);
+            canvas.removeEventListener('contextmenu', this.boundCanvasContextMenu);
         }
     }
     setupGlobalEventListeners() {
@@ -315,20 +331,40 @@ export class Editor extends RapidElement {
         document.addEventListener('keydown', this.boundKeyDown);
         const canvas = this.querySelector('#canvas');
         if (canvas) {
-            canvas.addEventListener('dblclick', this.boundCanvasDoubleClick);
+            canvas.addEventListener('contextmenu', this.boundCanvasContextMenu);
         }
         // Listen for action edit requests from flow nodes
         this.addEventListener(CustomEventType.ActionEditRequested, this.handleActionEditRequested.bind(this));
+        // Listen for add action requests from flow nodes
+        this.addEventListener(CustomEventType.AddActionRequested, this.handleAddActionRequested.bind(this));
         // Listen for node edit requests from flow nodes
         this.addEventListener(CustomEventType.NodeEditRequested, this.handleNodeEditRequested.bind(this));
+        // Listen for canvas menu selections
+        this.addEventListener(CustomEventType.Selection, (event) => {
+            const target = event.target;
+            if (target.tagName === 'TEMBA-CANVAS-MENU') {
+                this.handleCanvasMenuSelection(event);
+            }
+            else if (target.tagName === 'TEMBA-NODE-TYPE-SELECTOR') {
+                this.handleNodeTypeSelection(event);
+            }
+        });
+        // Listen for action drag events from nodes
+        this.addEventListener(CustomEventType.DragExternal, this.handleActionDragExternal.bind(this));
+        this.addEventListener(CustomEventType.DragInternal, this.handleActionDragInternal.bind(this));
+        this.addEventListener(CustomEventType.DragStop, (event) => {
+            if (event.detail.isExternal) {
+                this.handleActionDropExternal(event);
+            }
+        });
     }
     getPosition(uuid, type) {
-        var _a, _b, _c;
+        var _b, _c, _d;
         if (type === 'node') {
-            return (_a = this.definition._ui.nodes[uuid]) === null || _a === void 0 ? void 0 : _a.position;
+            return (_b = this.definition._ui.nodes[uuid]) === null || _b === void 0 ? void 0 : _b.position;
         }
         else {
-            return (_c = (_b = this.definition._ui.stickies) === null || _b === void 0 ? void 0 : _b[uuid]) === null || _c === void 0 ? void 0 : _c.position;
+            return (_d = (_c = this.definition._ui.stickies) === null || _c === void 0 ? void 0 : _c[uuid]) === null || _d === void 0 ? void 0 : _d.position;
         }
     }
     handleMouseDown(event) {
@@ -370,12 +406,12 @@ export class Editor extends RapidElement {
         event.stopPropagation();
     }
     handleGlobalMouseDown(event) {
-        var _a;
+        var _b;
         // ignore right clicks
         if (event.button !== 0)
             return;
         // Check if the click is within our canvas
-        const canvasRect = (_a = this.querySelector('#grid')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const canvasRect = (_b = this.querySelector('#grid')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
         if (!canvasRect)
             return;
         const isWithinCanvas = event.clientX >= canvasRect.left &&
@@ -395,14 +431,14 @@ export class Editor extends RapidElement {
         this.handleCanvasMouseDown(event);
     }
     handleCanvasMouseDown(event) {
-        var _a;
+        var _b;
         const target = event.target;
         if (target.id === 'canvas' || target.id === 'grid') {
             // Ignore clicks on exits
             // Start selection box
             this.canvasMouseDown = true;
             this.dragStartPos = { x: event.clientX, y: event.clientY };
-            const canvasRect = (_a = this.querySelector('#canvas')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const canvasRect = (_b = this.querySelector('#canvas')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
             if (canvasRect) {
                 // Clear current selection
                 this.selectedItems.clear();
@@ -466,16 +502,16 @@ export class Editor extends RapidElement {
     deleteSelectedItems() {
         const nodes = Array.from(this.selectedItems).filter((uuid) => this.definition.nodes.some((node) => node.uuid === uuid));
         this.deleteNodes(Array.from(nodes));
-        const stickies = Array.from(this.selectedItems).filter((uuid) => { var _a, _b; return (_b = (_a = this.definition._ui) === null || _a === void 0 ? void 0 : _a.stickies) === null || _b === void 0 ? void 0 : _b[uuid]; });
+        const stickies = Array.from(this.selectedItems).filter((uuid) => { var _b, _c; return (_c = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.stickies) === null || _c === void 0 ? void 0 : _c[uuid]; });
         getStore().getState().removeStickyNotes(stickies);
         // Clear selection
         this.selectedItems.clear();
     }
     updateSelectionBox(event) {
-        var _a;
+        var _b;
         if (!this.selectionBox || !this.canvasMouseDown)
             return;
-        const canvasRect = (_a = this.querySelector('#canvas')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const canvasRect = (_b = this.querySelector('#canvas')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
         if (!canvasRect)
             return;
         const relativeX = event.clientX - canvasRect.left;
@@ -489,7 +525,7 @@ export class Editor extends RapidElement {
         this.updateSelectedItemsFromBox();
     }
     updateSelectedItemsFromBox() {
-        var _a, _b, _c;
+        var _b, _c, _d;
         if (!this.selectionBox)
             return;
         const newSelection = new Set();
@@ -498,14 +534,14 @@ export class Editor extends RapidElement {
         const boxRight = Math.max(this.selectionBox.startX, this.selectionBox.endX);
         const boxBottom = Math.max(this.selectionBox.startY, this.selectionBox.endY);
         // Check nodes
-        (_a = this.definition) === null || _a === void 0 ? void 0 : _a.nodes.forEach((node) => {
-            var _a, _b, _c;
+        (_b = this.definition) === null || _b === void 0 ? void 0 : _b.nodes.forEach((node) => {
+            var _b, _c, _d;
             const nodeElement = this.querySelector(`[id="${node.uuid}"]`);
             if (nodeElement) {
-                const position = (_b = (_a = this.definition._ui) === null || _a === void 0 ? void 0 : _a.nodes[node.uuid]) === null || _b === void 0 ? void 0 : _b.position;
+                const position = (_c = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.nodes[node.uuid]) === null || _c === void 0 ? void 0 : _c.position;
                 if (position) {
                     const rect = nodeElement.getBoundingClientRect();
-                    const canvasRect = (_c = this.querySelector('#canvas')) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+                    const canvasRect = (_d = this.querySelector('#canvas')) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect();
                     if (canvasRect) {
                         const nodeLeft = position.left;
                         const nodeTop = position.top;
@@ -523,7 +559,7 @@ export class Editor extends RapidElement {
             }
         });
         // Check sticky notes
-        const stickies = ((_c = (_b = this.definition) === null || _b === void 0 ? void 0 : _b._ui) === null || _c === void 0 ? void 0 : _c.stickies) || {};
+        const stickies = ((_d = (_c = this.definition) === null || _c === void 0 ? void 0 : _c._ui) === null || _d === void 0 ? void 0 : _d.stickies) || {};
         Object.entries(stickies).forEach(([uuid, sticky]) => {
             if (sticky.position) {
                 const stickyElement = this.querySelector(`temba-sticky-note[uuid="${uuid}"]`);
@@ -561,6 +597,49 @@ export class Editor extends RapidElement {
       style="left: ${left}px; top: ${top}px; width: ${width}px; height: ${height}px;"
     ></div>`;
     }
+    renderCanvasDropPreview() {
+        var _b;
+        if (!this.canvasDropPreview)
+            return '';
+        const { action, position } = this.canvasDropPreview;
+        const actionConfig = ACTION_CONFIG[action.type];
+        if (!actionConfig)
+            return '';
+        return html `<div
+      class="canvas-drop-preview"
+      style="position: absolute; left: ${position.left}px; top: ${position.top}px; opacity: 0.6; pointer-events: none; z-index: 10000;"
+    >
+      <div
+        class="node execute-actions"
+        style="outline: 3px dashed var(--color-primary, #3b82f6); outline-offset: 2px; border-radius: var(--curvature);"
+      >
+        <div class="action sortable ${action.type}">
+          <div class="action-content">
+            <div
+              class="cn-title"
+              style="background: ${actionConfig.group
+            ? (_b = ACTION_GROUP_METADATA[actionConfig.group]) === null || _b === void 0 ? void 0 : _b.color
+            : '#aaaaaa'}"
+            >
+              <div class="title-spacer"></div>
+              <div class="name">${actionConfig.name}</div>
+              <div class="title-spacer"></div>
+            </div>
+            <div class="body">
+              ${actionConfig.render
+            ? actionConfig.render({ actions: [action] }, action)
+            : html `<pre>${action.type}</pre>`}
+            </div>
+          </div>
+        </div>
+        <div class="action-exits">
+          <div class="exit-wrapper">
+            <div class="exit"></div>
+          </div>
+        </div>
+      </div>
+    </div>`;
+    }
     handleMouseMove(event) {
         // Handle selection box drawing
         if (this.canvasMouseDown && !this.isMouseDown) {
@@ -693,7 +772,7 @@ export class Editor extends RapidElement {
         this.canvasMouseDown = false;
     }
     updateCanvasSize() {
-        var _a;
+        var _b;
         if (!this.definition)
             return;
         const store = getStore();
@@ -715,7 +794,7 @@ export class Editor extends RapidElement {
             }
         });
         // Check sticky note positions
-        const stickies = ((_a = this.definition._ui) === null || _a === void 0 ? void 0 : _a.stickies) || {};
+        const stickies = ((_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.stickies) || {};
         Object.entries(stickies).forEach(([uuid, sticky]) => {
             if (sticky.position) {
                 const stickyElement = this.querySelector(`temba-sticky-note[uuid="${uuid}"]`);
@@ -738,12 +817,15 @@ export class Editor extends RapidElement {
         // Update canvas size in store
         store.getState().expandCanvas(maxWidth, maxHeight);
     }
-    handleCanvasDoubleClick(event) {
-        // Check if we double-clicked on empty canvas space
+    handleCanvasContextMenu(event) {
+        // Check if we right-clicked on empty canvas space
         const target = event.target;
         if (target.id !== 'canvas') {
             return;
         }
+        // Prevent the default browser context menu
+        event.preventDefault();
+        event.stopPropagation();
         // Get canvas position
         const canvas = this.querySelector('#canvas');
         if (!canvas) {
@@ -755,14 +837,119 @@ export class Editor extends RapidElement {
         // Snap position to grid
         const snappedLeft = snapToGrid(relativeX);
         const snappedTop = snapToGrid(relativeY);
-        // Create new sticky note
+        // Show the canvas menu at the mouse position (use viewport coordinates)
+        const canvasMenu = this.querySelector('temba-canvas-menu');
+        if (canvasMenu) {
+            canvasMenu.show(event.clientX, event.clientY, {
+                x: snappedLeft,
+                y: snappedTop
+            });
+        }
+    }
+    handleCanvasMenuSelection(event) {
+        const selection = event.detail;
         const store = getStore();
-        store.getState().createStickyNote({
-            left: snappedLeft,
-            top: snappedTop
-        });
-        event.preventDefault();
-        event.stopPropagation();
+        if (selection.action === 'sticky') {
+            // Create new sticky note
+            store.getState().createStickyNote({
+                left: selection.position.x,
+                top: selection.position.y
+            });
+        }
+        else {
+            // Show node type selector
+            const selector = this.querySelector('temba-node-type-selector');
+            if (selector) {
+                selector.show(selection.action, selection.position);
+            }
+        }
+    }
+    handleNodeTypeSelection(event) {
+        const selection = event.detail;
+        // Check if we're adding an action to an existing node
+        if (this.addActionToNodeUuid) {
+            // Find the existing node
+            const node = this.definition.nodes.find((n) => n.uuid === this.addActionToNodeUuid);
+            const nodeUI = this.definition._ui.nodes[this.addActionToNodeUuid];
+            if (node && nodeUI) {
+                // Create a new action to add to the existing node
+                const actionUuid = generateUUID();
+                this.editingAction = {
+                    uuid: actionUuid,
+                    type: selection.nodeType
+                };
+                // Set the editing node to the existing node (not creating new)
+                this.editingNode = node;
+                this.editingNodeUI = nodeUI;
+                this.isCreatingNewNode = false;
+                // Clear the addActionToNodeUuid flag
+                this.addActionToNodeUuid = null;
+                return;
+            }
+            // If we couldn't find the node, clear the flag and continue with normal flow
+            this.addActionToNodeUuid = null;
+        }
+        // Create a temporary node structure for editing (not added to store yet)
+        const nodeUuid = generateUUID();
+        // Determine if this is an action type or a node type
+        // Actions need to be wrapped in an execute_actions node
+        const isActionType = selection.nodeType in ACTION_CONFIG;
+        const nodeType = isActionType ? 'execute_actions' : selection.nodeType;
+        // For nodes with routers, initialize an empty router to ensure fromFormData works correctly
+        const nodeConfig = NODE_CONFIG[nodeType];
+        const hasRouter = (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.form) &&
+            Object.keys(nodeConfig.form).some((key) => {
+                var _b;
+                return ['rules', 'categories', 'cases'].includes(key) ||
+                    ((_b = nodeConfig.form[key]) === null || _b === void 0 ? void 0 : _b.type) === 'array';
+            });
+        const tempNode = {
+            uuid: nodeUuid,
+            actions: [],
+            exits: hasRouter
+                ? [] // Router-based nodes will generate their own exits
+                : [
+                    {
+                        uuid: generateUUID(),
+                        destination_uuid: null
+                    }
+                ]
+        };
+        if (hasRouter) {
+            // This node uses a router - initialize it with empty structure
+            tempNode.router = {
+                type: 'switch',
+                categories: [],
+                cases: [],
+                operand: '@input.text',
+                default_category_uuid: undefined
+            };
+        }
+        const tempNodeUI = {
+            position: {
+                left: selection.position.x,
+                top: selection.position.y
+            },
+            type: nodeType,
+            config: {}
+        };
+        // Mark that we're creating a new node and store the position
+        this.isCreatingNewNode = true;
+        this.pendingNodePosition = {
+            left: selection.position.x,
+            top: selection.position.y
+        };
+        // Open the node editor with the temporary node
+        this.editingNode = tempNode;
+        this.editingNodeUI = tempNodeUI;
+        // If this is an action type, we also need to set up an editing action
+        if (isActionType) {
+            const actionUuid = generateUUID();
+            this.editingAction = {
+                uuid: actionUuid,
+                type: selection.nodeType
+            };
+        }
     }
     handleActionEditRequested(event) {
         // For action editing, we set the action and find the corresponding node
@@ -775,24 +962,80 @@ export class Editor extends RapidElement {
             this.editingNodeUI = this.definition._ui.nodes[nodeUuid];
         }
     }
+    handleAddActionRequested(event) {
+        // Get the node where we want to add the action
+        const nodeUuid = event.detail.nodeUuid;
+        const node = this.definition.nodes.find((n) => n.uuid === nodeUuid);
+        if (!node) {
+            return;
+        }
+        // Get the node's position to place the selector near it
+        const nodeUI = this.definition._ui.nodes[nodeUuid];
+        if (!nodeUI) {
+            return;
+        }
+        // Show the node type selector in action mode, excluding branching actions
+        const selector = this.querySelector('temba-node-type-selector');
+        if (selector) {
+            // Show the selector near the node, using a mode that excludes branching actions
+            selector.show('action-no-branching', {
+                x: nodeUI.position.left,
+                y: nodeUI.position.top
+            });
+            // Store the node UUID so we know which node to add the action to
+            this.addActionToNodeUuid = nodeUuid;
+        }
+    }
     handleNodeEditRequested(event) {
         this.editingNode = event.detail.node;
         this.editingNodeUI = event.detail.nodeUI;
     }
     handleActionSaved(updatedAction) {
-        var _a;
+        var _b, _c;
         if (this.editingNode && this.editingAction) {
-            // Update the specific action in the node
-            const updatedActions = this.editingNode.actions.map((action) => action.uuid === this.editingAction.uuid ? updatedAction : action);
+            let updatedActions;
+            // Check if this action already exists in the node
+            const existingActionIndex = this.editingNode.actions.findIndex((action) => action.uuid === this.editingAction.uuid);
+            if (existingActionIndex >= 0) {
+                // Update existing action
+                updatedActions = this.editingNode.actions.map((action) => action.uuid === this.editingAction.uuid ? updatedAction : action);
+            }
+            else {
+                // Add new action
+                updatedActions = [...this.editingNode.actions, updatedAction];
+            }
             const updatedNode = { ...this.editingNode, actions: updatedActions };
-            // Update the node in the store
-            (_a = getStore()) === null || _a === void 0 ? void 0 : _a.getState().updateNode(this.editingNode.uuid, updatedNode);
-            // Repaint jsplumb connections in case node size changed
-            if (this.plumber) {
-                // Use requestAnimationFrame to ensure DOM has been updated first
-                requestAnimationFrame(() => {
-                    this.plumber.repaintEverything();
-                });
+            // Check if we're creating a new node or updating an existing one
+            if (this.isCreatingNewNode) {
+                // This is a new node with a new action - add it to the store
+                const store = getStore();
+                const nodeUI = {
+                    position: this.pendingNodePosition || { left: 0, top: 0 },
+                    type: (_b = this.editingNodeUI) === null || _b === void 0 ? void 0 : _b.type,
+                    config: {}
+                };
+                // Add the node to the store
+                store.getState().addNode(updatedNode, nodeUI);
+                // Reset the creation flags
+                this.isCreatingNewNode = false;
+                this.pendingNodePosition = null;
+                // Repaint jsplumb connections
+                if (this.plumber) {
+                    requestAnimationFrame(() => {
+                        this.plumber.repaintEverything();
+                    });
+                }
+            }
+            else {
+                // Update existing node in the store
+                (_c = getStore()) === null || _c === void 0 ? void 0 : _c.getState().updateNode(this.editingNode.uuid, updatedNode);
+                // Repaint jsplumb connections in case node size changed
+                if (this.plumber) {
+                    // Use requestAnimationFrame to ensure DOM has been updated first
+                    requestAnimationFrame(() => {
+                        this.plumber.repaintEverything();
+                    });
+                }
             }
         }
         this.closeNodeEditor();
@@ -803,25 +1046,51 @@ export class Editor extends RapidElement {
         this.editingAction = null;
     }
     handleActionEditCanceled() {
+        // If we were creating a new node, just discard it
+        if (this.isCreatingNewNode) {
+            this.isCreatingNewNode = false;
+            this.pendingNodePosition = null;
+        }
         this.closeNodeEditor();
     }
-    handleNodeSaved(updatedNode) {
-        var _a;
+    handleNodeSaved(updatedNode, uiConfig) {
+        var _b, _c, _d;
         if (this.editingNode) {
-            // Clean up jsPlumb connections for removed exits before updating the node
-            if (this.plumber) {
-                const oldExits = this.editingNode.exits || [];
-                const newExits = updatedNode.exits || [];
-                // Find exits that were removed
-                const removedExits = oldExits.filter((oldExit) => !newExits.find((newExit) => newExit.uuid === oldExit.uuid));
-                // Remove jsPlumb connections for removed exits
-                removedExits.forEach((exit) => {
-                    this.plumber.removeExitConnection(exit.uuid);
-                });
+            if (this.isCreatingNewNode) {
+                // This is a new node - add it to the store for the first time
+                const store = getStore();
+                const nodeUI = {
+                    position: this.pendingNodePosition || { left: 0, top: 0 },
+                    type: (_b = this.editingNodeUI) === null || _b === void 0 ? void 0 : _b.type,
+                    config: uiConfig || {}
+                };
+                // Add the node to the store
+                store.getState().addNode(updatedNode, nodeUI);
+                // Reset the creation flags
+                this.isCreatingNewNode = false;
+                this.pendingNodePosition = null;
+            }
+            else {
+                // This is an existing node - update it
+                // Clean up jsPlumb connections for removed exits before updating the node
+                if (this.plumber) {
+                    const oldExits = this.editingNode.exits || [];
+                    const newExits = updatedNode.exits || [];
+                    // Find exits that were removed
+                    const removedExits = oldExits.filter((oldExit) => !newExits.find((newExit) => newExit.uuid === oldExit.uuid));
+                    // Remove jsPlumb connections for removed exits
+                    removedExits.forEach((exit) => {
+                        this.plumber.removeExitConnection(exit.uuid);
+                    });
+                }
+                this.plumber.revalidate([updatedNode.uuid]);
+                // Update the node in the store
+                (_c = getStore()) === null || _c === void 0 ? void 0 : _c.getState().updateNode(this.editingNode.uuid, updatedNode);
+                // Update the UI config if provided
+                if (uiConfig) {
+                    (_d = getStore()) === null || _d === void 0 ? void 0 : _d.getState().updateNodeUIConfig(updatedNode.uuid, uiConfig);
+                }
             }
-            this.plumber.revalidate([updatedNode.uuid]);
-            // Update the node in the store
-            (_a = getStore()) === null || _a === void 0 ? void 0 : _a.getState().updateNode(this.editingNode.uuid, updatedNode);
             // Repaint jsplumb connections in case node size changed
             if (this.plumber) {
                 // Use requestAnimationFrame to ensure DOM has been updated first
@@ -833,16 +1102,224 @@ export class Editor extends RapidElement {
         this.closeNodeEditor();
     }
     handleNodeEditCanceled() {
+        // If we were creating a new node, just discard it
+        if (this.isCreatingNewNode) {
+            this.isCreatingNewNode = false;
+            this.pendingNodePosition = null;
+        }
         this.closeNodeEditor();
     }
+    getNodeAtPosition(mouseX, mouseY) {
+        // Get all node elements
+        const nodeElements = this.querySelectorAll('temba-flow-node');
+        for (const nodeElement of Array.from(nodeElements)) {
+            const rect = nodeElement.getBoundingClientRect();
+            if (mouseX >= rect.left &&
+                mouseX <= rect.right &&
+                mouseY >= rect.top &&
+                mouseY <= rect.bottom) {
+                return nodeElement.getAttribute('data-node-uuid');
+            }
+        }
+        return null;
+    }
+    calculateCanvasDropPosition(mouseX, mouseY, applyGridSnapping = true) {
+        // calculate the position on the canvas
+        const canvas = this.querySelector('#canvas');
+        if (!canvas)
+            return { left: 0, top: 0 };
+        const canvasRect = canvas.getBoundingClientRect();
+        // calculate position relative to canvas
+        // canvasRect gives us the canvas position in the viewport, which already accounts for scroll
+        // so we just need mouseX/Y - canvasRect.left/top to get position within canvas
+        const left = mouseX - canvasRect.left - DROP_PREVIEW_OFFSET_X;
+        const top = mouseY - canvasRect.top - DROP_PREVIEW_OFFSET_Y;
+        // Apply grid snapping only if requested (for final drop position)
+        if (applyGridSnapping) {
+            return {
+                left: snapToGrid(left),
+                top: snapToGrid(top)
+            };
+        }
+        return { left, top };
+    }
+    handleActionDragExternal(event) {
+        const { action, nodeUuid, actionIndex, mouseX, mouseY, actionHeight = 60 } = event.detail;
+        // Check if mouse is over another execute_actions node
+        const targetNode = this.getNodeAtPosition(mouseX, mouseY);
+        if (targetNode && targetNode !== nodeUuid) {
+            const targetNodeUI = this.definition._ui.nodes[targetNode];
+            const targetNodeDef = this.definition.nodes.find((n) => n.uuid === targetNode);
+            // Only allow dropping on execute_actions nodes, and not the source node
+            if ((targetNodeUI === null || targetNodeUI === void 0 ? void 0 : targetNodeUI.type) === 'execute_actions' && targetNodeDef) {
+                // If we moved to a different target node, clear the previous one's placeholder
+                if (this.previousActionDragTargetNodeUuid &&
+                    this.previousActionDragTargetNodeUuid !== targetNode) {
+                    const previousElement = this.querySelector(`temba-flow-node[data-node-uuid="${this.previousActionDragTargetNodeUuid}"]`);
+                    if (previousElement) {
+                        previousElement.dispatchEvent(new CustomEvent('action-drag-leave', {
+                            detail: {},
+                            bubbles: false
+                        }));
+                    }
+                }
+                // Update target node for drop handling
+                this.actionDragTargetNodeUuid = targetNode;
+                this.previousActionDragTargetNodeUuid = targetNode;
+                // Hide canvas preview when over a valid target
+                this.canvasDropPreview = null;
+                // Tell source node to show ghost (we're over a valid target)
+                const sourceElement = this.querySelector(`temba-flow-node[data-node-uuid="${nodeUuid}"]`);
+                if (sourceElement) {
+                    sourceElement.dispatchEvent(new CustomEvent('action-show-ghost', {
+                        detail: {},
+                        bubbles: false
+                    }));
+                }
+                // Notify the target node about the drag
+                const targetElement = this.querySelector(`temba-flow-node[data-node-uuid="${targetNode}"]`);
+                if (targetElement) {
+                    targetElement.dispatchEvent(new CustomEvent('action-drag-over', {
+                        detail: {
+                            action,
+                            sourceNodeUuid: nodeUuid,
+                            actionIndex,
+                            mouseX,
+                            mouseY,
+                            actionHeight
+                        },
+                        bubbles: false
+                    }));
+                }
+                this.requestUpdate();
+                return;
+            }
+        }
+        // Not over a valid target node, clear any previous target's placeholder
+        if (this.previousActionDragTargetNodeUuid) {
+            const previousElement = this.querySelector(`temba-flow-node[data-node-uuid="${this.previousActionDragTargetNodeUuid}"]`);
+            if (previousElement) {
+                previousElement.dispatchEvent(new CustomEvent('action-drag-leave', {
+                    detail: {},
+                    bubbles: false
+                }));
+            }
+            this.previousActionDragTargetNodeUuid = null;
+        }
+        this.actionDragTargetNodeUuid = null;
+        // Tell source node to hide ghost (we're not over a valid target)
+        const sourceElement = this.querySelector(`temba-flow-node[data-node-uuid="${nodeUuid}"]`);
+        if (sourceElement) {
+            sourceElement.dispatchEvent(new CustomEvent('action-hide-ghost', {
+                detail: {},
+                bubbles: false
+            }));
+        }
+        // Don't snap to grid for preview - let it follow cursor smoothly
+        const position = this.calculateCanvasDropPosition(mouseX, mouseY, false);
+        this.canvasDropPreview = {
+            action,
+            nodeUuid,
+            actionIndex,
+            position,
+            actionHeight
+        };
+        // Force re-render to update preview position
+        this.requestUpdate();
+    }
+    handleActionDragInternal(_event) {
+        // Clear any previous target's placeholder when returning to internal drag
+        if (this.previousActionDragTargetNodeUuid) {
+            const previousElement = this.querySelector(`temba-flow-node[data-node-uuid="${this.previousActionDragTargetNodeUuid}"]`);
+            if (previousElement) {
+                previousElement.dispatchEvent(new CustomEvent('action-drag-leave', {
+                    detail: {},
+                    bubbles: false
+                }));
+            }
+            this.previousActionDragTargetNodeUuid = null;
+        }
+        this.canvasDropPreview = null;
+        this.actionDragTargetNodeUuid = null;
+    }
+    handleActionDropExternal(event) {
+        var _b, _c, _d;
+        const { action, nodeUuid, actionIndex, mouseX, mouseY } = event.detail;
+        // Check if we're dropping on an existing execute_actions node
+        const targetNodeUuid = this.actionDragTargetNodeUuid;
+        if (targetNodeUuid && targetNodeUuid !== nodeUuid) {
+            // Dropping on another node - notify the target node to handle the drop
+            const targetElement = this.querySelector(`temba-flow-node[data-node-uuid="${targetNodeUuid}"]`);
+            if (targetElement) {
+                targetElement.dispatchEvent(new CustomEvent('action-drop', {
+                    detail: {
+                        action,
+                        sourceNodeUuid: nodeUuid,
+                        actionIndex,
+                        mouseX,
+                        mouseY
+                    },
+                    bubbles: false
+                }));
+            }
+            // Clear state
+            this.canvasDropPreview = null;
+            this.actionDragTargetNodeUuid = null;
+            return;
+        }
+        // Not dropping on another node, create a new one on canvas
+        // Snap to grid for the final drop position
+        const position = this.calculateCanvasDropPosition(mouseX, mouseY, true);
+        // remove the action from the original node
+        const originalNode = this.definition.nodes.find((n) => n.uuid === nodeUuid);
+        if (!originalNode)
+            return;
+        const updatedActions = originalNode.actions.filter((_a, idx) => idx !== actionIndex);
+        // if no actions remain, delete the node
+        if (updatedActions.length === 0) {
+            (_b = getStore()) === null || _b === void 0 ? void 0 : _b.getState().removeNodes([nodeUuid]);
+        }
+        else {
+            // update the node
+            const updatedNode = { ...originalNode, actions: updatedActions };
+            (_c = getStore()) === null || _c === void 0 ? void 0 : _c.getState().updateNode(nodeUuid, updatedNode);
+        }
+        // create a new execute_actions node with the dropped action
+        const newNode = {
+            uuid: generateUUID(),
+            actions: [action],
+            exits: [
+                {
+                    uuid: generateUUID(),
+                    destination_uuid: null
+                }
+            ]
+        };
+        const newNodeUI = {
+            position,
+            type: 'execute_actions',
+            config: {}
+        };
+        // add the new node
+        (_d = getStore()) === null || _d === void 0 ? void 0 : _d.getState().addNode(newNode, newNodeUI);
+        // clear the preview
+        this.canvasDropPreview = null;
+        this.actionDragTargetNodeUuid = null;
+        // repaint connections
+        if (this.plumber) {
+            requestAnimationFrame(() => {
+                this.plumber.repaintEverything();
+            });
+        }
+    }
     render() {
-        var _a, _b;
+        var _b, _c;
         // we have to embed our own style since we are in light DOM
         const style = html `<style>
       ${unsafeCSS(Editor.styles.cssText)}
       ${unsafeCSS(CanvasNode.styles.cssText)}
     </style>`;
-        const stickies = ((_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a._ui) === null || _b === void 0 ? void 0 : _b.stickies) || {};
+        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}
       <div id="editor">
         <div
@@ -853,13 +1330,13 @@ export class Editor extends RapidElement {
           <div id="canvas">
             ${this.definition
             ? repeat(this.definition.nodes, (node) => node.uuid, (node) => {
-                var _a, _b, _c;
-                const position = ((_b = (_a = this.definition._ui) === null || _a === void 0 ? void 0 : _a.nodes[node.uuid]) === null || _b === void 0 ? void 0 : _b.position) || {
+                var _b, _c, _d;
+                const position = ((_c = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.nodes[node.uuid]) === null || _c === void 0 ? void 0 : _c.position) || {
                     left: 0,
                     top: 0
                 };
                 const dragging = this.isDragging &&
-                    ((_c = this.currentDragItem) === null || _c === void 0 ? void 0 : _c.uuid) === node.uuid;
+                    ((_d = this.currentDragItem) === null || _d === void 0 ? void 0 : _d.uuid) === node.uuid;
                 const selected = this.selectedItems.has(node.uuid);
                 return html `<temba-flow-node
                       class="draggable ${dragging ? 'dragging' : ''} ${selected
@@ -867,6 +1344,7 @@ export class Editor extends RapidElement {
                     : ''}"
                       @mousedown=${this.handleMouseDown.bind(this)}
                       uuid=${node.uuid}
+                      data-node-uuid=${node.uuid}
                       style="left:${position.left}px; top:${position.top}px"
                       .plumber=${this.plumber}
                       .node=${node}
@@ -878,9 +1356,9 @@ export class Editor extends RapidElement {
             })
             : html `<temba-loading></temba-loading>`}
             ${repeat(Object.entries(stickies), ([uuid]) => uuid, ([uuid, sticky]) => {
-            var _a;
+            var _b;
             const position = sticky.position || { left: 0, top: 0 };
-            const dragging = this.isDragging && ((_a = this.currentDragItem) === null || _a === void 0 ? void 0 : _a.uuid) === uuid;
+            const dragging = this.isDragging && ((_b = this.currentDragItem) === null || _b === void 0 ? void 0 : _b.uuid) === uuid;
             const selected = this.selectedItems.has(uuid);
             return html `<temba-sticky-note
                   class="draggable ${dragging ? 'dragging' : ''} ${selected
@@ -895,7 +1373,7 @@ export class Editor extends RapidElement {
                   .selected=${selected}
                 ></temba-sticky-note>`;
         })}
-            ${this.renderSelectionBox()}
+            ${this.renderSelectionBox()} ${this.renderCanvasDropPreview()}
           </div>
         </div>
       </div>
@@ -905,11 +1383,14 @@ export class Editor extends RapidElement {
             .node=${this.editingNode}
             .nodeUI=${this.editingNodeUI}
             .action=${this.editingAction}
-            @temba-node-saved=${(e) => this.handleNodeSaved(e.detail.node)}
+            @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}
           ></temba-node-editor>`
-            : ''} `;
+            : ''}
+
+      <temba-canvas-menu></temba-canvas-menu>
+      <temba-node-type-selector></temba-node-type-selector> `;
     }
 }
 __decorate([
@@ -963,4 +1444,19 @@ __decorate([
 __decorate([
     state()
 ], Editor.prototype, "editingAction", void 0);
+__decorate([
+    state()
+], Editor.prototype, "isCreatingNewNode", void 0);
+__decorate([
+    state()
+], Editor.prototype, "pendingNodePosition", void 0);
+__decorate([
+    state()
+], Editor.prototype, "canvasDropPreview", void 0);
+__decorate([
+    state()
+], Editor.prototype, "addActionToNodeUuid", void 0);
+__decorate([
+    state()
+], Editor.prototype, "actionDragTargetNodeUuid", void 0);
 //# sourceMappingURL=Editor.js.map