@nyaruka/temba-components 0.129.3 → 0.129.4

package/docs/ActionEditor-Migration.md

@@ -0,0 +1,118 @@
+# ActionEditor Form Data Abstraction Migration Guide
+
+## Overview
+
+The ActionEditor now supports form-level data transformations that provide a higher level of abstraction than the previous per-property approach. This allows for flexible mapping between action properties and form fields.
+
+## Key Changes
+
+### 1. Action-Level Transformations
+Instead of per-property `toFormValue`/`fromFormValue`, you can now define these at the action level:
+
+```typescript
+export const myAction: UIConfig = {
+  // Transform entire action to form data
+  toFormValue: (action: MyAction) => ({
+    // Form data can combine multiple action properties
+    contact_info: `${action.name} <${action.email}>`,
+    selected_options: action.options.map(opt => ({ name: opt, value: opt }))
+  }),
+  
+  // Transform form data back to action
+  fromFormValue: (formData: any): MyAction => {
+    // Parse the combined contact_info back to separate fields
+    const [name, email] = parseContactInfo(formData.contact_info);
+    return {
+      ...action,
+      name,
+      email,
+      options: formData.selected_options.map(opt => opt.value)
+    };
+  }
+}
+```
+
+### 2. Form Configuration (replaces properties)
+Use `form` instead of `properties`, with keys matching your form data structure:
+
+```typescript
+export const myAction: UIConfig = {
+  // OLD: properties keys matched action properties
+  properties: {
+    name: { /* config */ },
+    email: { /* config */ }
+  },
+
+  // NEW: form keys match form data structure
+  form: {
+    contact_info: { /* combines name + email */ },
+    selected_options: { /* transforms options array */ }
+  }
+}
+```
+
+## Migration Examples
+
+### Before (per-property transformations)
+```typescript
+export const send_msg: UIConfig = {
+  properties: {
+    quick_replies: {
+      toFormValue: (actionValue: string[]) => 
+        actionValue.map(text => ({ name: text, value: text })),
+      fromFormValue: (formValue: Array<{name: string, value: string}>) =>
+        formValue.map(item => item.value)
+    }
+  }
+}
+```
+
+### After (form-level transformations)
+```typescript
+export const send_msg_new: UIConfig = {
+  toFormValue: (action: SendMsg) => ({
+    text: action.text,
+    quick_replies: action.quick_replies.map(text => ({ name: text, value: text }))
+  }),
+  
+  fromFormValue: (formData: any): SendMsg => ({
+    ...formData,
+    type: 'send_msg',
+    quick_replies: formData.quick_replies.map(item => item.value || item.name)
+  }),
+  
+  form: {
+    text: { /* config */ },
+    quick_replies: { /* config */ }
+  }
+}
+```
+
+## Benefits
+
+1. **Flexible field mapping**: Form fields don't need to match action properties 1:1
+2. **Data consolidation**: Combine multiple action properties into single form fields
+3. **Cleaner separation**: Form structure is independent of action structure
+4. **Backward compatibility**: Existing configs continue to work unchanged
+
+## Backward Compatibility
+
+The ActionEditor automatically falls back to the old per-property approach when form-level transformations aren't provided:
+
+- Uses `properties` if `form` is not defined
+- Applies per-property `toFormValue`/`fromFormValue` if action-level ones aren't provided
+- Maintains 1:1 mapping when no transformations are specified
+
+## Testing
+
+Test both transformation directions:
+
+```typescript
+it('should transform action to form data', async () => {
+  // Set action and verify formData structure
+});
+
+it('should transform form data back to action on save', async () => {
+  // Modify formData and verify saved action structure
+});
+```

package/out-tsc/src/events.js.map

@@ -1 +1 @@
-{"version":3,"file":"events.js","sourceRoot":"","sources":["../../src/events.ts"],"names":[],"mappings":"","sourcesContent":["import { Msg, ObjectReference, User } from './interfaces';\n\nexport interface EventGroup {\n  type: string;\n  events: ContactEvent[];\n  open: boolean;\n}\n\nexport interface ContactEvent {\n  type: string;\n  created_on: string;\n  created_by?: User;\n}\n\nexport interface ChannelEvent extends ContactEvent {\n  channel_event_type: string;\n  duration: number;\n\n  event: {\n    type: string;\n    channel: { uuid: string; name: string };\n    duration?: number;\n    optin?: {\n      uuid: string;\n      name: string;\n    };\n  };\n}\n\nexport interface ContactLanguageChangedEvent extends ContactEvent {\n  language: string;\n  step_uuid: string;\n  session_uuid: string;\n}\n\nexport interface OptinRequestedEvent extends ContactEvent {\n  optin: {\n    uuid: string;\n    name: string;\n  };\n}\n\nexport interface MsgEvent extends ContactEvent {\n  msg: Msg;\n  status: string;\n  failed_reason?: string;\n  failed_reason_display?: string;\n  logs_url: string;\n  msg_type: string;\n  recipient_count?: number;\n  created_by?: User;\n  optin?: ObjectReference;\n}\n\nexport interface FlowEvent extends ContactEvent {\n  flow: ObjectReference;\n  status: string;\n}\n\nexport interface EmailSentEvent extends ContactEvent {\n  to: string[];\n  subject: string;\n  body: string;\n}\n\nexport interface URNsChangedEvent extends ContactEvent {\n  urns: string[];\n}\n\nexport interface TicketEvent extends ContactEvent {\n  note?: string;\n  assignee?: User;\n  ticket: {\n    uuid: string;\n    topic?: ObjectReference;\n    closed_on?: string;\n    opened_on?: string;\n  };\n  topic?: ObjectReference;\n  created_by?: User;\n}\n\nexport interface LabelsAddedEvent extends ContactEvent {\n  labels: ObjectReference[];\n}\n\nexport interface NameChangedEvent extends ContactEvent {\n  name: string;\n}\n\nexport interface UpdateFieldEvent extends ContactEvent {\n  field: { key: string; name: string };\n  value: { text: string };\n}\n\nexport interface ErrorMessageEvent extends ContactEvent {\n  text: string;\n}\n\nexport interface UpdateResultEvent extends ContactEvent {\n  name: string;\n  value: string;\n  category: string;\n  input: string;\n}\n\nexport interface ContactGroupsEvent extends ContactEvent {\n  groups_added: ObjectReference[];\n  groups_removed: ObjectReference[];\n}\n\nexport interface WebhookEvent extends ContactEvent {\n  status: string;\n  status_code: number;\n  elapsed_ms: number;\n  logs_url: string;\n  url: string;\n}\n\nexport interface AirtimeTransferredEvent extends ContactEvent {\n  sender: string;\n  recipient: string;\n  currency: string;\n  desired_amount: string;\n  actual_amount: string;\n  logs_url: string;\n}\n\nexport type CallStartedEvent = ContactEvent;\nexport interface CampaignFiredEvent extends ContactEvent {\n  campaign: { uuid: string; id: number; name: string };\n  campaign_event: {\n    id: number;\n    offset_display: string;\n    relative_to: { key: string; name: string };\n  };\n  fired_result: string;\n}\n\nexport interface ContactHistoryPage {\n  has_older: boolean;\n  recent_only: boolean;\n  next_before: number;\n  next_after: number;\n  start_date: Date;\n  events: ContactEvent[];\n}\n"]}
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../../src/events.ts"],"names":[],"mappings":"","sourcesContent":["import { Msg, ObjectReference, User } from './interfaces';\n\nexport interface EventGroup {\n  type: string;\n  events: ContactEvent[];\n  open: boolean;\n}\n\nexport interface ContactEvent {\n  uuid?: string;\n  type: string;\n  created_on: string;\n  created_by?: User;\n}\n\nexport interface ChannelEvent extends ContactEvent {\n  channel_event_type: string;\n  duration: number;\n\n  event: {\n    type: string;\n    channel: { uuid: string; name: string };\n    duration?: number;\n    optin?: {\n      uuid: string;\n      name: string;\n    };\n  };\n}\n\nexport interface ContactLanguageChangedEvent extends ContactEvent {\n  language: string;\n  step_uuid: string;\n  session_uuid: string;\n}\n\nexport interface OptinRequestedEvent extends ContactEvent {\n  optin: {\n    uuid: string;\n    name: string;\n  };\n}\n\nexport interface MsgEvent extends ContactEvent {\n  msg: Msg;\n  status: string;\n  failed_reason?: string;\n  failed_reason_display?: string;\n  logs_url: string;\n  recipient_count?: number;\n  created_by?: User;\n  optin?: ObjectReference;\n}\n\nexport interface FlowEvent extends ContactEvent {\n  flow: ObjectReference;\n  status: string;\n}\n\nexport interface URNsChangedEvent extends ContactEvent {\n  urns: string[];\n}\n\nexport interface TicketEvent extends ContactEvent {\n  note?: string;\n  assignee?: User;\n  ticket: {\n    uuid: string;\n    topic?: ObjectReference;\n    closed_on?: string;\n    opened_on?: string;\n  };\n  topic?: ObjectReference;\n  created_by?: User;\n}\n\nexport interface NameChangedEvent extends ContactEvent {\n  name: string;\n}\n\nexport interface UpdateFieldEvent extends ContactEvent {\n  field: { key: string; name: string };\n  value: { text: string };\n}\n\nexport interface ContactGroupsEvent extends ContactEvent {\n  groups_added: ObjectReference[];\n  groups_removed: ObjectReference[];\n}\n\nexport interface AirtimeTransferredEvent extends ContactEvent {\n  sender: string;\n  recipient: string;\n  currency: string;\n  desired_amount: string;\n  actual_amount: string;\n}\n\nexport type CallStartedEvent = ContactEvent;\n\nexport interface ContactHistoryPage {\n  has_older: boolean;\n  recent_only: boolean;\n  next_before: number;\n  next_after: number;\n  start_date: Date;\n  events: ContactEvent[];\n}\n"]}

package/out-tsc/src/flow/{EditorNode.js → CanvasNode.js}

@@ -1,12 +1,14 @@
 import { __decorate } from "tslib";
 import { css, html } from 'lit';
-import { EDITOR_CONFIG } from './config';
+import { repeat } from 'lit/directives/repeat.js';
+import { ACTION_CONFIG, NODE_CONFIG } from './config';
 import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
 import { getStore } from '../store/Store';
 import { CustomEventType } from '../interfaces';
-export class EditorNode extends RapidElement {
+const DRAG_THRESHOLD = 5;
+export class CanvasNode extends RapidElement {
     createRenderRoot() {
         return this;
     }
@@ -25,6 +27,11 @@ export class EditorNode extends RapidElement {
 
       }
 
+      /* Cap width for execute_actions nodes */
+      .node.execute-actions {
+        max-width: 200px;
+      }
+
       .node:hover {
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
       }
@@ -36,8 +43,8 @@ export class EditorNode extends RapidElement {
       }
 
       .action {
-        max-width: 200px;
         position: relative;
+        font-size: 13px;
       }
 
       .action .remove-button {
@@ -59,18 +66,40 @@ export class EditorNode extends RapidElement {
         z-index: 10;
       }
 
-      .action:hover .remove-button {
+      .action:hover .remove-button,
+      .router:hover .remove-button {
         display: flex;
       }
 
-      .action.removing .title {
+      .action.removing .title,
+      .router .title.removing {
         background-color: var(--color-error, #dc3545) !important;
       }
 
-      .action.removing .title .name {
+      .action.removing .title .name,
+      .router .title.removing .name {
         color: white;
       }
 
+      .router .remove-button {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: var(--color-error, #dc3545);
+        color: white;
+        border: none;
+        cursor: pointer;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        line-height: 1;
+        z-index: 10;
+      }
+
       .action.sortable {
         display: flex;
         align-items: stretch;
@@ -80,10 +109,17 @@ export class EditorNode extends RapidElement {
         flex-grow: 1;
         display: flex;
         flex-direction: column;
+        min-width: 0; /* Allow flex item to shrink below its content size */
+        overflow: hidden;
       }
 
       .action .body {
-        padding: 1em;
+        padding: 0.75em;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        hyphens: auto;
+        white-space: normal;
+        overflow: hidden;
       }
 
       .action .drag-handle {
@@ -159,6 +195,10 @@ export class EditorNode extends RapidElement {
       .category .title {
         font-weight: normal;
         font-size: 1em;
+        max-width: 150px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .router .body {
@@ -267,26 +307,39 @@ export class EditorNode extends RapidElement {
         this.actionRemovalTimeouts = new Map();
         // Set of action UUIDs that are in the removing state
         this.actionRemovingState = new Set();
+        // Track action click state to distinguish from drag
+        this.actionClickStartPos = null;
+        this.pendingActionClick = null;
+        // Track node click state to distinguish from drag
+        this.nodeClickStartPos = null;
+        this.pendingNodeClick = null;
         this.handleActionOrderChanged = this.handleActionOrderChanged.bind(this);
     }
     updated(changes) {
         var _a;
         super.updated(changes);
         if (changes.has('node')) {
-            // make our initial connections
-            if (changes.get('node') === undefined) {
+            // Only proceed if plumber is available (for tests that don't set it up)
+            if (this.plumber) {
+                this.plumber.removeNodeConnections(this.node.uuid);
+                // make our initial connections
                 for (const exit of this.node.exits) {
                     if (!exit.destination_uuid) {
+                        // if we have no destination, then we are a source
+                        // so make our source endpoint
                         this.plumber.makeSource(exit.uuid);
                     }
                     else {
                         this.plumber.connectIds(this.node.uuid, exit.uuid, exit.destination_uuid);
                     }
                 }
+                this.plumber.revalidate([this.node.uuid]);
             }
             const ele = this.parentElement;
-            const rect = ele.getBoundingClientRect();
-            (_a = getStore()) === null || _a === void 0 ? void 0 : _a.getState().expandCanvas(this.ui.position.left + rect.width, this.ui.position.top + rect.height);
+            if (ele) {
+                const rect = ele.getBoundingClientRect();
+                (_a = getStore()) === null || _a === void 0 ? void 0 : _a.getState().expandCanvas(this.ui.position.left + rect.width, this.ui.position.top + rect.height);
+            }
         }
     }
     disconnectedCallback() {
@@ -412,6 +465,44 @@ export class EditorNode extends RapidElement {
             this.requestUpdate();
         }
     }
+    handleNodeRemoveClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const nodeId = this.node.uuid;
+        // If the node is already in removing state, perform the removal
+        if (this.actionRemovingState.has(nodeId)) {
+            this.removeNode();
+            return;
+        }
+        // Start removal UI state
+        this.actionRemovingState.add(nodeId);
+        this.requestUpdate();
+        // Clear any existing timeout for this node
+        if (this.actionRemovalTimeouts.has(nodeId)) {
+            clearTimeout(this.actionRemovalTimeouts.get(nodeId));
+        }
+        // Set timeout to reset UI if user doesn't click
+        const timeoutId = window.setTimeout(() => {
+            this.actionRemovingState.delete(nodeId);
+            this.actionRemovalTimeouts.delete(nodeId);
+            this.requestUpdate();
+        }, 1000); // 1 second as per requirements
+        this.actionRemovalTimeouts.set(nodeId, timeoutId);
+    }
+    removeNode() {
+        const nodeId = this.node.uuid;
+        // Clear the UI state
+        this.actionRemovingState.delete(nodeId);
+        // Clear any timeout
+        if (this.actionRemovalTimeouts.has(nodeId)) {
+            clearTimeout(this.actionRemovalTimeouts.get(nodeId));
+            this.actionRemovalTimeouts.delete(nodeId);
+        }
+        // Fire the node deleted event
+        this.fireCustomEvent(CustomEventType.NodeDeleted, {
+            uuid: this.node.uuid
+        });
+    }
     handleActionOrderChanged(event) {
         var _a;
         const [fromIdx, toIdx] = event.detail.swap;
@@ -425,6 +516,162 @@ export class EditorNode extends RapidElement {
         this.node = { ...this.node, actions: newActions };
         (_a = getStore()) === null || _a === void 0 ? void 0 : _a.getState().updateNode(this.node.uuid, { ...this.node, actions: newActions });
     }
+    handleActionMouseDown(event, action) {
+        // Don't handle clicks on the remove button or when action is in removing state
+        const target = event.target;
+        if (target.closest('.remove-button') ||
+            this.actionRemovingState.has(action.uuid)) {
+            return;
+        }
+        // Store the starting position and action for later comparison
+        // Don't prevent default - let the Editor's drag system work normally
+        this.actionClickStartPos = { x: event.clientX, y: event.clientY };
+        this.pendingActionClick = { action, event };
+    }
+    handleActionMouseUp(event, action) {
+        // Don't handle if we don't have a pending click or if it's not the same action
+        if (!this.pendingActionClick ||
+            this.pendingActionClick.action.uuid !== action.uuid) {
+            this.actionClickStartPos = null;
+            this.pendingActionClick = null;
+            return;
+        }
+        // Don't handle clicks on the remove button or when action is in removing state
+        const target = event.target;
+        if (target.closest('.remove-button') ||
+            this.actionRemovingState.has(action.uuid)) {
+            this.actionClickStartPos = null;
+            this.pendingActionClick = null;
+            return;
+        }
+        // Check if the mouse moved beyond the drag threshold
+        if (this.actionClickStartPos) {
+            const deltaX = event.clientX - this.actionClickStartPos.x;
+            const deltaY = event.clientY - this.actionClickStartPos.y;
+            const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+            // Check if the Editor is currently in dragging mode
+            const editor = this.closest('temba-flow-editor');
+            const editorWasDragging = editor === null || editor === void 0 ? void 0 : editor.dragging;
+            // Only fire the action edit event if we haven't dragged beyond the threshold
+            // AND either there's no Editor parent (test case) or the Editor didn't drag the node
+            if (distance <= DRAG_THRESHOLD && (!editor || !editorWasDragging)) {
+                // Fire event to request action editing
+                this.fireCustomEvent(CustomEventType.ActionEditRequested, {
+                    action,
+                    nodeUuid: this.node.uuid
+                });
+            }
+        }
+        // Clean up
+        this.actionClickStartPos = null;
+        this.pendingActionClick = null;
+    }
+    handleActionClick(event, action) {
+        // This method is kept for backward compatibility but should not be used
+        // The new mousedown/mouseup approach handles click vs drag properly
+        event.preventDefault();
+        event.stopPropagation();
+        // Don't handle clicks on the remove button or when action is in removing state
+        const target = event.target;
+        if (target.closest('.remove-button') ||
+            this.actionRemovingState.has(action.uuid)) {
+            return;
+        }
+        // Fire event to request action editing
+        this.fireCustomEvent(CustomEventType.ActionEditRequested, {
+            action,
+            nodeUuid: this.node.uuid
+        });
+    }
+    handleNodeEditClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        // Don't handle clicks on the remove button or when node is in removing state
+        const target = event.target;
+        if (target.closest('.remove-button') ||
+            this.actionRemovingState.has(this.node.uuid)) {
+            return;
+        }
+        // Fire node edit requested event if the node has a router
+        if (this.node.router) {
+            // If router node has exactly one action, open the action editor directly
+            if (this.node.actions && this.node.actions.length === 1) {
+                this.fireCustomEvent(CustomEventType.ActionEditRequested, {
+                    action: this.node.actions[0],
+                    nodeUuid: this.node.uuid
+                });
+            }
+            else {
+                // Otherwise open the node editor as before
+                this.fireCustomEvent(CustomEventType.NodeEditRequested, {
+                    node: this.node,
+                    nodeUI: this.ui
+                });
+            }
+        }
+    }
+    handleNodeMouseDown(event) {
+        // Don't handle clicks on the remove button or when node is in removing state
+        const target = event.target;
+        if (target.closest('.remove-button') ||
+            this.actionRemovingState.has(this.node.uuid)) {
+            return;
+        }
+        // Store the starting position for later comparison
+        // Don't prevent default - let the Editor's drag system work normally
+        this.nodeClickStartPos = { x: event.clientX, y: event.clientY };
+        this.pendingNodeClick = { event };
+    }
+    handleNodeMouseUp(event) {
+        // Don't handle if we don't have a pending click
+        if (!this.pendingNodeClick) {
+            this.nodeClickStartPos = null;
+            this.pendingNodeClick = null;
+            return;
+        }
+        // Don't handle clicks on the remove button or when node is in removing state
+        const target = event.target;
+        if (target.closest('.remove-button') ||
+            this.actionRemovingState.has(this.node.uuid)) {
+            this.nodeClickStartPos = null;
+            this.pendingNodeClick = null;
+            return;
+        }
+        // Check if the mouse moved beyond the drag threshold
+        if (this.nodeClickStartPos) {
+            const deltaX = event.clientX - this.nodeClickStartPos.x;
+            const deltaY = event.clientY - this.nodeClickStartPos.y;
+            const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+            // Check if the Editor is currently in dragging mode
+            const editor = this.closest('temba-flow-editor');
+            const editorWasDragging = editor === null || editor === void 0 ? void 0 : editor.dragging;
+            // Only fire the node edit event if we haven't dragged beyond the threshold
+            // AND either there's no Editor parent (test case) or the Editor didn't drag the node
+            if (distance <= 5 && (!editor || !editorWasDragging)) {
+                // Using literal 5 instead of DRAG_THRESHOLD since it's not imported
+                // Fire event to request node editing if the node has a router
+                if (this.node.router) {
+                    // If router node has exactly one action, open the action editor directly
+                    if (this.node.actions && this.node.actions.length === 1) {
+                        this.fireCustomEvent(CustomEventType.ActionEditRequested, {
+                            action: this.node.actions[0],
+                            nodeUuid: this.node.uuid
+                        });
+                    }
+                    else {
+                        // Otherwise open the node editor as before
+                        this.fireCustomEvent(CustomEventType.NodeEditRequested, {
+                            node: this.node,
+                            nodeUI: this.ui
+                        });
+                    }
+                }
+            }
+        }
+        // Clean up
+        this.nodeClickStartPos = null;
+        this.pendingNodeClick = null;
+    }
     renderTitle(config, isRemoving = false) {
         var _a, _b;
         return html `<div class="title" style="background:${config.color}">
@@ -435,8 +682,16 @@ export class EditorNode extends RapidElement {
       <div class="name">${isRemoving ? 'Remove?' : config.name}</div>
     </div>`;
     }
+    renderNodeTitle(config, isRemoving = false) {
+        return html `<div
+      class="title ${isRemoving ? 'removing' : ''}"
+      style="background:${config.color}"
+    >
+      <div class="name">${isRemoving ? 'Remove?' : config.name}</div>
+    </div>`;
+    }
     renderAction(node, action, index) {
-        const config = EDITOR_CONFIG[action.type];
+        const config = ACTION_CONFIG[action.type];
         const isRemoving = this.actionRemovingState.has(action.uuid);
         if (config) {
             return html `<div
@@ -450,7 +705,12 @@ export class EditorNode extends RapidElement {
         >
           ✕
         </button>
-        <div class="action-content">
+        <div
+          class="action-content"
+          @mousedown=${(e) => this.handleActionMouseDown(e, action)}
+          @mouseup=${(e) => this.handleActionMouseUp(e, action)}
+          style="cursor: pointer;"
+        >
           ${this.renderTitle(config, isRemoving)}
           <div class="body">
             ${config.render
@@ -475,12 +735,37 @@ export class EditorNode extends RapidElement {
     </div>`;
     }
     renderRouter(router, ui) {
-        const config = EDITOR_CONFIG[ui.type];
-        if (config) {
-            return html `<div class="router">
-        ${this.renderTitle(config, false)}
+        const nodeConfig = NODE_CONFIG[ui.type];
+        if (nodeConfig) {
+            // For tests that call renderRouter directly without setting this.node
+            const hasActions = this.node ? this.node.actions.length > 0 : false;
+            const isRemoving = this.node &&
+                this.node.actions.length === 0 &&
+                this.actionRemovingState.has(this.node.uuid);
+            return html `<div class="router" style="position: relative;">
+        ${!hasActions
+                ? html ` <button
+                class="remove-button"
+                @click=${(e) => this.handleNodeRemoveClick(e)}
+                title="Remove node"
+              >
+                ✕
+              </button>
+              <div
+                @mousedown=${(e) => this.handleNodeMouseDown(e)}
+                @mouseup=${(e) => this.handleNodeMouseUp(e)}
+                style="cursor: pointer;"
+              >
+                ${this.renderNodeTitle(nodeConfig, isRemoving)}
+              </div>`
+                : ''}
         ${router.result_name
-                ? html `<div class="body">
+                ? html `<div
+              class="body"
+              @mousedown=${(e) => this.handleNodeMouseDown(e)}
+              @mouseup=${(e) => this.handleNodeMouseUp(e)}
+              style="cursor: pointer;"
+            >
               Save as
               <div class="result-name">${router.result_name}</div>
             </div>`
@@ -492,14 +777,20 @@ export class EditorNode extends RapidElement {
         if (!node.router || !node.router.categories) {
             return null;
         }
-        const categories = node.router.categories.map((category) => {
+        return html `<div class="categories">
+      ${repeat(node.router.categories, (category) => category.uuid, (category) => {
             const exit = node.exits.find((exit) => exit.uuid == category.exit_uuid);
-            return html `<div class="category">
-        <div class="title">${category.name}</div>
-        ${this.renderExit(exit)}
-      </div>`;
-        });
-        return html `<div class="categories">${categories}</div>`;
+            return html `<div
+            class="category"
+            @mousedown=${(e) => this.handleNodeMouseDown(e)}
+            @mouseup=${(e) => this.handleNodeMouseUp(e)}
+            style="cursor: pointer;"
+          >
+            <div class="title">${category.name}</div>
+            ${this.renderExit(exit)}
+          </div>`;
+        })}
+    </div>`;
     }
     renderExit(exit) {
         return html `<div class="exit-wrapper">
@@ -518,29 +809,41 @@ export class EditorNode extends RapidElement {
         if (!this.node || !this.ui) {
             return html `<div class="node">Loading...</div>`;
         }
+        const nodeConfig = NODE_CONFIG[this.ui.type];
         return html `
       <div
         id="${this.node.uuid}"
-        class="node"
+        class="node ${this.ui.type === 'execute_actions'
+            ? 'execute-actions'
+            : ''}"
         style="left:${this.ui.position.left}px;top:${this.ui.position.top}px"
       >
         ${this.node.actions.length > 0
-            ? html `<temba-sortable-list
-              dragHandle="drag-handle"
-              @temba-order-changed="${this.handleActionOrderChanged}"
-            >
-              ${this.node.actions.map((actionSpec, index) => {
-                return this.renderAction(this.node, actionSpec, index);
-            })}
-            </temba-sortable-list>`
-            : ''}
+            ? this.ui.type === 'execute_actions'
+                ? html `<temba-sortable-list
+                dragHandle="drag-handle"
+                @temba-order-changed="${this.handleActionOrderChanged}"
+              >
+                ${repeat(this.node.actions, (action) => action.uuid, (action, index) => this.renderAction(this.node, action, index))}
+              </temba-sortable-list>`
+                : html `${repeat(this.node.actions, (action) => action.uuid, (action, index) => this.renderAction(this.node, action, index))}`
+            : !this.node.router && nodeConfig && nodeConfig.name
+                ? html `<div class="router" style="position: relative;">
+              <button
+                class="remove-button"
+                @click=${(e) => this.handleNodeRemoveClick(e)}
+                title="Remove node"
+              >
+                ✕
+              </button>
+              ${this.renderNodeTitle(nodeConfig, this.actionRemovingState.has(this.node.uuid))}
+            </div>`
+                : ''}
         ${this.node.router
             ? html ` ${this.renderRouter(this.node.router, this.ui)}
             ${this.renderCategories(this.node)}`
             : html `<div class="action-exits">
-              ${this.node.exits.map((exit) => {
-                return this.renderExit(exit);
-            })}
+              ${repeat(this.node.exits, (exit) => exit.uuid, (exit) => this.renderExit(exit))}
             </div>`}
       </div>
     `;
@@ -548,11 +851,11 @@ export class EditorNode extends RapidElement {
 }
 __decorate([
     property({ type: Object })
-], EditorNode.prototype, "plumber", void 0);
+], CanvasNode.prototype, "plumber", void 0);
 __decorate([
     property({ type: Object })
-], EditorNode.prototype, "node", void 0);
+], CanvasNode.prototype, "node", void 0);
 __decorate([
     property({ type: Object })
-], EditorNode.prototype, "ui", void 0);
-//# sourceMappingURL=EditorNode.js.map
+], CanvasNode.prototype, "ui", void 0);
+//# sourceMappingURL=CanvasNode.js.map