@nyaruka/temba-components 0.131.1 → 0.131.2

package/src/flow/Editor.ts

@@ -13,11 +13,16 @@ import { AppState, 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';
 import { Dialog } from '../layout/Dialog';
 import { Connection } from '@jsplumb/browser-ui';
+import { CanvasMenu, CanvasMenuSelection } from './CanvasMenu';
+import { NodeTypeSelector, NodeTypeSelection } from './NodeTypeSelector';
 
 export function snapToGrid(value: number): number {
   const snapped = Math.round(value / 20) * 20;
@@ -55,6 +60,11 @@ export interface SelectionBox {
 
 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() {
@@ -129,6 +139,31 @@ export class Editor extends RapidElement {
   @state()
   private editingAction: Action | null = null;
 
+  @state()
+  private isCreatingNewNode = false;
+
+  @state()
+  private pendingNodePosition: FlowPosition | null = null;
+
+  // Canvas drop state for dragging actions to canvas
+  @state()
+  private canvasDropPreview: {
+    action: Action;
+    nodeUuid: string;
+    actionIndex: number;
+    position: FlowPosition;
+    actionHeight: number;
+  } | null = null;
+  @state()
+  private addActionToNodeUuid: string | null = null;
+
+  // Track target node for action drag
+  @state()
+  private actionDragTargetNodeUuid: string | null = null;
+
+  // Track previous target node to clear placeholder when moving between nodes
+  private previousActionDragTargetNodeUuid: string | null = null;
+
   private canvasMouseDown = false;
 
   // Bound event handlers to maintain proper 'this' context
@@ -136,7 +171,7 @@ export class Editor extends RapidElement {
   private boundMouseUp = this.handleMouseUp.bind(this);
   private boundGlobalMouseDown = this.handleGlobalMouseDown.bind(this);
   private boundKeyDown = this.handleKeyDown.bind(this);
-  private boundCanvasDoubleClick = this.handleCanvasDoubleClick.bind(this);
+  private boundCanvasContextMenu = this.handleCanvasContextMenu.bind(this);
 
   static get styles() {
     return css`
@@ -412,7 +447,7 @@ export class Editor extends RapidElement {
 
     const canvas = this.querySelector('#canvas');
     if (canvas) {
-      canvas.removeEventListener('dblclick', this.boundCanvasDoubleClick);
+      canvas.removeEventListener('contextmenu', this.boundCanvasContextMenu);
     }
   }
 
@@ -424,7 +459,7 @@ export class Editor extends RapidElement {
 
     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
@@ -433,11 +468,44 @@ export class Editor extends RapidElement {
       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: CustomEvent) => {
+      const target = event.target as HTMLElement;
+      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: CustomEvent) => {
+      if (event.detail.isExternal) {
+        this.handleActionDropExternal(event);
+      }
+    });
   }
 
   private getPosition(uuid: string, type: 'node' | 'sticky'): FlowPosition {
@@ -730,6 +798,50 @@ export class Editor extends RapidElement {
     ></div>`;
   }
 
+  private renderCanvasDropPreview(): TemplateResult | string {
+    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
+                ? ACTION_GROUP_METADATA[actionConfig.group]?.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] } as any, 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>`;
+  }
+
   private handleMouseMove(event: MouseEvent): void {
     // Handle selection box drawing
     if (this.canvasMouseDown && !this.isMouseDown) {
@@ -943,13 +1055,17 @@ export class Editor extends RapidElement {
     store.getState().expandCanvas(maxWidth, maxHeight);
   }
 
-  private handleCanvasDoubleClick(event: MouseEvent): void {
-    // Check if we double-clicked on empty canvas space
+  private handleCanvasContextMenu(event: MouseEvent): void {
+    // Check if we right-clicked on empty canvas space
     const target = event.target as HTMLElement;
     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) {
@@ -964,15 +1080,141 @@ export class Editor extends RapidElement {
     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') as CanvasMenu;
+    if (canvasMenu) {
+      canvasMenu.show(event.clientX, event.clientY, {
+        x: snappedLeft,
+        y: snappedTop
+      });
+    }
+  }
+
+  private handleCanvasMenuSelection(event: CustomEvent): void {
+    const selection = event.detail as CanvasMenuSelection;
     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'
+      ) as NodeTypeSelector;
+      if (selector) {
+        selector.show(selection.action, selection.position);
+      }
+    }
+  }
+
+  private handleNodeTypeSelection(event: CustomEvent): void {
+    const selection = event.detail as NodeTypeSelection;
+
+    // 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 as any
+        } as Action;
+
+        // 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?.form &&
+      Object.keys(nodeConfig.form).some(
+        (key) =>
+          ['rules', 'categories', 'cases'].includes(key) ||
+          nodeConfig.form[key]?.type === 'array'
+      );
+
+    const tempNode: Node = {
+      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: NodeUI = {
+      position: {
+        left: selection.position.x,
+        top: selection.position.y
+      },
+      type: nodeType as any,
+      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 as any
+      } as Action;
+    }
   }
 
   private handleActionEditRequested(event: CustomEvent): void {
@@ -988,6 +1230,38 @@ export class Editor extends RapidElement {
       this.editingNodeUI = this.definition._ui.nodes[nodeUuid];
     }
   }
+
+  private handleAddActionRequested(event: CustomEvent): void {
+    // 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'
+    ) as NodeTypeSelector;
+    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;
+    }
+  }
+
   private handleNodeEditRequested(event: CustomEvent): void {
     this.editingNode = event.detail.node;
     this.editingNodeUI = event.detail.nodeUI;
@@ -995,21 +1269,60 @@ export class Editor extends RapidElement {
 
   private handleActionSaved(updatedAction: Action): void {
     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: Action[];
+
+      // 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
-      getStore()?.getState().updateNode(this.editingNode.uuid, updatedNode);
+      // 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();
 
-      // Repaint jsplumb connections in case node size changed
-      if (this.plumber) {
-        // Use requestAnimationFrame to ensure DOM has been updated first
-        requestAnimationFrame(() => {
-          this.plumber.repaintEverything();
-        });
+        const nodeUI: NodeUI = {
+          position: this.pendingNodePosition || { left: 0, top: 0 },
+          type: this.editingNodeUI?.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
+        getStore()?.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();
@@ -1022,32 +1335,64 @@ export class Editor extends RapidElement {
   }
 
   private handleActionEditCanceled(): void {
+    // If we were creating a new node, just discard it
+    if (this.isCreatingNewNode) {
+      this.isCreatingNewNode = false;
+      this.pendingNodePosition = null;
+    }
     this.closeNodeEditor();
   }
 
-  private handleNodeSaved(updatedNode: Node): void {
+  private handleNodeSaved(
+    updatedNode: Node,
+    uiConfig?: Record<string, any>
+  ): void {
     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 || [];
+      if (this.isCreatingNewNode) {
+        // This is a new node - add it to the store for the first time
+        const store = getStore();
+
+        const nodeUI: NodeUI = {
+          position: this.pendingNodePosition || { left: 0, top: 0 },
+          type: this.editingNodeUI?.type,
+          config: uiConfig || {}
+        };
 
-        // Find exits that were removed
-        const removedExits = oldExits.filter(
-          (oldExit) =>
-            !newExits.find((newExit) => newExit.uuid === oldExit.uuid)
-        );
+        // Add the node to the store
+        store.getState().addNode(updatedNode, nodeUI);
 
-        // Remove jsPlumb connections for removed exits
-        removedExits.forEach((exit) => {
-          this.plumber.removeExitConnection(exit.uuid);
-        });
-      }
+        // 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]);
+        this.plumber.revalidate([updatedNode.uuid]);
 
-      // Update the node in the store
-      getStore()?.getState().updateNode(this.editingNode.uuid, updatedNode);
+        // Update the node in the store
+        getStore()?.getState().updateNode(this.editingNode.uuid, updatedNode);
+
+        // Update the UI config if provided
+        if (uiConfig) {
+          getStore()?.getState().updateNodeUIConfig(updatedNode.uuid, uiConfig);
+        }
+      }
 
       // Repaint jsplumb connections in case node size changed
       if (this.plumber) {
@@ -1061,9 +1406,299 @@ export class Editor extends RapidElement {
   }
 
   private handleNodeEditCanceled(): void {
+    // If we were creating a new node, just discard it
+    if (this.isCreatingNewNode) {
+      this.isCreatingNewNode = false;
+      this.pendingNodePosition = null;
+    }
     this.closeNodeEditor();
   }
 
+  private getNodeAtPosition(mouseX: number, mouseY: number): string | null {
+    // 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;
+  }
+
+  private calculateCanvasDropPosition(
+    mouseX: number,
+    mouseY: number,
+    applyGridSnapping: boolean = true
+  ): FlowPosition {
+    // 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 };
+  }
+
+  private handleActionDragExternal(event: CustomEvent): void {
+    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?.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();
+  }
+
+  private handleActionDragInternal(_event: CustomEvent): void {
+    // 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;
+  }
+
+  private handleActionDropExternal(event: CustomEvent): void {
+    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) {
+      getStore()?.getState().removeNodes([nodeUuid]);
+    } else {
+      // update the node
+      const updatedNode = { ...originalNode, actions: updatedActions };
+      getStore()?.getState().updateNode(nodeUuid, updatedNode);
+    }
+
+    // create a new execute_actions node with the dropped action
+    const newNode: Node = {
+      uuid: generateUUID(),
+      actions: [action],
+      exits: [
+        {
+          uuid: generateUUID(),
+          destination_uuid: null
+        }
+      ]
+    };
+
+    const newNodeUI: NodeUI = {
+      position,
+      type: 'execute_actions',
+      config: {}
+    };
+
+    // add the new node
+    getStore()?.getState().addNode(newNode, newNodeUI);
+
+    // clear the preview
+    this.canvasDropPreview = null;
+    this.actionDragTargetNodeUuid = null;
+
+    // repaint connections
+    if (this.plumber) {
+      requestAnimationFrame(() => {
+        this.plumber.repaintEverything();
+      });
+    }
+  }
+
   public render(): TemplateResult {
     // we have to embed our own style since we are in light DOM
     const style = html`<style>
@@ -1104,6 +1739,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}
@@ -1137,7 +1773,7 @@ export class Editor extends RapidElement {
                 ></temba-sticky-note>`;
               }
             )}
-            ${this.renderSelectionBox()}
+            ${this.renderSelectionBox()} ${this.renderCanvasDropPreview()}
           </div>
         </div>
       </div>
@@ -1148,11 +1784,14 @@ export class Editor extends RapidElement {
             .nodeUI=${this.editingNodeUI}
             .action=${this.editingAction}
             @temba-node-saved=${(e: CustomEvent) =>
-              this.handleNodeSaved(e.detail.node)}
+              this.handleNodeSaved(e.detail.node, e.detail.uiConfig)}
             @temba-action-saved=${(e: CustomEvent) =>
               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> `;
   }
 }