@nyaruka/temba-components 0.131.1 → 0.131.3

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

@@ -2,11 +2,13 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
+import { ACTION_GROUP_METADATA, SPLIT_GROUP_METADATA } from './types';
 import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
 import { getStore } from '../store/Store';
 import { CustomEventType } from '../interfaces';
+import { fromStore, zustand } from '../store/AppState';
 const DRAG_THRESHOLD = 5;
 export class CanvasNode extends RapidElement {
     createRenderRoot() {
@@ -113,6 +115,20 @@ export class CanvasNode extends RapidElement {
 
       .node.execute-actions temba-sortable-list .action:last-child .body {
         padding-bottom: 1.5em;
+      }
+
+      /* Localization indicators */
+      .action.localizable:not(.has-localization) .action-content {
+        background: #fff8dc !important; /* Light yellow background for localizable but not yet localized */
+      }
+
+      .non-localizable {
+        opacity: 0.25;
+        pointer-events: none;
+      }
+
+      .action.non-localizable .action-content {
+        cursor: not-allowed;
       }      
 
       .action .drag-handle {
@@ -126,7 +142,7 @@ export class CanvasNode extends RapidElement {
         pointer-events: auto; /* Ensure drag handle can receive events */
       }
       .title-spacer {
-        width: 2em;
+        width: 1.8em;
         
       }
 
@@ -181,6 +197,10 @@ export class CanvasNode extends RapidElement {
         margin: 0.2em;
       }
 
+      .router-section {
+        /* Container for router and categories */
+      }
+
       .categories {
         display: flex;
         flex-direction: row;
@@ -197,6 +217,11 @@ export class CanvasNode extends RapidElement {
         flex-direction: column;
       }
 
+      /* Localizable category - yellow background */
+      .category.localizable {
+        background-color: #fff8dc;
+      }
+
       .action-exits {
         padding-bottom: 0.7em;
         margin-top: -0.7em;
@@ -305,6 +330,36 @@ export class CanvasNode extends RapidElement {
         border-top-left-radius: var(--curvature);
         border-top-right-radius: var(--curvature);
       }
+
+      /* Add action button */
+      .add-action-button {
+        position: absolute;
+        bottom: 0.5em;
+        right: 0.5em;
+        width: 1.5em;
+        height: 1.5em;
+        border-radius: 50%;
+        background: var(--color-primary, #3b82f6);
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        opacity: 0;
+        transition: opacity 200ms ease-in-out;
+        z-index: 10;
+        pointer-events: auto;
+        font-size: 0.9em;
+      }
+
+      .node.execute-actions:hover .add-action-button {
+        opacity: 0.8;
+      }
+
+      .add-action-button:hover {
+        opacity: 1 !important;
+        transform: scale(1.1);
+      }
   }`;
     }
     constructor() {
@@ -323,10 +378,34 @@ export class CanvasNode extends RapidElement {
         // Track node click state to distinguish from drag
         this.nodeClickStartPos = null;
         this.pendingNodeClick = null;
+        // Track the height of the action being dragged (captured at drag start)
+        this.draggedActionHeight = 0;
+        // Track external action drag (action being dragged from another node)
+        this.externalDragInfo = null;
         this.handleActionOrderChanged = this.handleActionOrderChanged.bind(this);
+        this.handleActionDragStart = this.handleActionDragStart.bind(this);
+        this.handleActionDragExternal = this.handleActionDragExternal.bind(this);
+        this.handleActionDragInternal = this.handleActionDragInternal.bind(this);
+        this.handleActionDragStop = this.handleActionDragStop.bind(this);
+        this.handleExternalActionDragOver =
+            this.handleExternalActionDragOver.bind(this);
+        this.handleExternalActionDrop = this.handleExternalActionDrop.bind(this);
+        this.handleExternalActionDragLeave =
+            this.handleExternalActionDragLeave.bind(this);
+        this.handleActionShowGhost = this.handleActionShowGhost.bind(this);
+        this.handleActionHideGhost = this.handleActionHideGhost.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Listen for external action drag events from Editor
+        this.addEventListener('action-drag-over', this.handleExternalActionDragOver);
+        this.addEventListener('action-drop', this.handleExternalActionDrop);
+        this.addEventListener('action-drag-leave', this.handleExternalActionDragLeave);
+        this.addEventListener('action-show-ghost', this.handleActionShowGhost);
+        this.addEventListener('action-hide-ghost', this.handleActionHideGhost);
     }
     updated(changes) {
-        var _a;
+        var _b;
         super.updated(changes);
         if (changes.has('node')) {
             // Only proceed if plumber is available (for tests that don't set it up)
@@ -348,13 +427,19 @@ export class CanvasNode extends RapidElement {
             const ele = this.parentElement;
             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);
+                (_b = getStore()) === null || _b === void 0 ? void 0 : _b.getState().expandCanvas(this.ui.position.left + rect.width, this.ui.position.top + rect.height);
             }
         }
     }
     disconnectedCallback() {
         // Remove the event listener when the component is removed
         super.disconnectedCallback();
+        // Remove external drag event listeners
+        this.removeEventListener('action-drag-over', this.handleExternalActionDragOver);
+        this.removeEventListener('action-drop', this.handleExternalActionDrop);
+        this.removeEventListener('action-drag-leave', this.handleExternalActionDragLeave);
+        this.removeEventListener('action-show-ghost', this.handleActionShowGhost);
+        this.removeEventListener('action-hide-ghost', this.handleActionHideGhost);
         // Clear any pending exit removal timeouts
         this.exitRemovalTimeouts.forEach((timeoutId) => {
             clearTimeout(timeoutId);
@@ -401,7 +486,7 @@ export class CanvasNode extends RapidElement {
         this.exitRemovalTimeouts.set(exitId, timeoutId);
     }
     disconnectExit(exit) {
-        var _a;
+        var _b;
         const exitId = exit.uuid;
         // Clear the UI state
         this.exitRemovingState.delete(exitId);
@@ -420,7 +505,7 @@ export class CanvasNode extends RapidElement {
         const updatedExits = this.node.exits.map((e) => e.uuid === exitId ? updatedExit : e);
         // Update the node
         const updatedNode = { ...this.node, exits: updatedExits };
-        (_a = getStore()) === null || _a === void 0 ? void 0 : _a.getState().updateNode(this.node.uuid, updatedNode);
+        (_b = getStore()) === null || _b === void 0 ? void 0 : _b.getState().updateNode(this.node.uuid, updatedNode);
         // Request update to reflect changes
         this.requestUpdate();
     }
@@ -450,7 +535,7 @@ export class CanvasNode extends RapidElement {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     removeAction(action, _index) {
-        var _a;
+        var _b;
         const actionId = action.uuid;
         // Clear the UI state
         this.actionRemovingState.delete(actionId);
@@ -470,7 +555,7 @@ export class CanvasNode extends RapidElement {
         else {
             // Update the node with remaining actions
             const updatedNode = { ...this.node, actions: updatedActions };
-            (_a = getStore()) === null || _a === void 0 ? void 0 : _a.getState().updateNode(this.node.uuid, updatedNode);
+            (_b = getStore()) === null || _b === void 0 ? void 0 : _b.getState().updateNode(this.node.uuid, updatedNode);
             // Request update to reflect changes
             this.requestUpdate();
         }
@@ -514,7 +599,7 @@ export class CanvasNode extends RapidElement {
         });
     }
     handleActionOrderChanged(event) {
-        var _a;
+        var _b;
         const [fromIdx, toIdx] = event.detail.swap;
         // swap our actions
         const newActions = [...this.node.actions];
@@ -524,7 +609,73 @@ export class CanvasNode extends RapidElement {
         // since the editor will update us from it's definition subscription
         // but it makes testing a lot easier
         this.node = { ...this.node, actions: newActions };
-        (_a = getStore()) === null || _a === void 0 ? void 0 : _a.getState().updateNode(this.node.uuid, { ...this.node, actions: newActions });
+        (_b = getStore()) === null || _b === void 0 ? void 0 : _b.getState().updateNode(this.node.uuid, { ...this.node, actions: newActions });
+    }
+    handleActionDragStart(event) {
+        // Capture the height of the action being dragged
+        const actionId = event.detail.id;
+        const actionElement = this.querySelector(`#${actionId}`);
+        if (actionElement) {
+            const rect = actionElement.getBoundingClientRect();
+            this.draggedActionHeight = rect.height;
+        }
+        else {
+            // Fallback to a reasonable default
+            this.draggedActionHeight = 60;
+        }
+    }
+    handleActionDragExternal(event) {
+        // stop propagation of the original event from SortableList
+        event.stopPropagation();
+        // get the action being dragged
+        const actionId = event.detail.id;
+        const splitId = actionId.split('-');
+        if (splitId.length < 2 || isNaN(parseInt(splitId[1], 10))) {
+            // invalid format, do not proceed
+            return;
+        }
+        const actionIndex = parseInt(splitId[1], 10);
+        const action = this.node.actions[actionIndex];
+        // fire event to editor to show canvas drop preview, including the captured height
+        this.fireCustomEvent(CustomEventType.DragExternal, {
+            action,
+            nodeUuid: this.node.uuid,
+            actionIndex,
+            mouseX: event.detail.mouseX,
+            mouseY: event.detail.mouseY,
+            actionHeight: this.draggedActionHeight
+        });
+    }
+    handleActionDragInternal(_event) {
+        // stop propagation of the original event from SortableList
+        _event.stopPropagation();
+        // fire event to editor to hide canvas drop preview
+        this.fireCustomEvent(CustomEventType.DragInternal, {});
+    }
+    handleActionDragStop(event) {
+        const isExternal = event.detail.isExternal;
+        if (isExternal) {
+            // stop propagation of the original event from SortableList
+            event.stopPropagation();
+            // get the action being dragged
+            const actionId = event.detail.id;
+            const split = actionId.split('-');
+            if (split.length < 2 || isNaN(Number(split[1]))) {
+                // invalid actionId format, do not proceed
+                return;
+            }
+            const actionIndex = parseInt(split[1], 10);
+            const action = this.node.actions[actionIndex];
+            // fire event to editor to create new node
+            this.fireCustomEvent(CustomEventType.DragStop, {
+                action,
+                nodeUuid: this.node.uuid,
+                actionIndex,
+                isExternal: true,
+                mouseX: event.detail.mouseX,
+                mouseY: event.detail.mouseY
+            });
+        }
     }
     handleActionMouseDown(event, action) {
         // Don't handle clicks on the remove button, drag handle, or when action is in removing state
@@ -690,57 +841,263 @@ export class CanvasNode extends RapidElement {
         this.nodeClickStartPos = null;
         this.pendingNodeClick = null;
     }
+    handleAddActionClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        // Fire event to request adding a new action to this node
+        this.fireCustomEvent(CustomEventType.AddActionRequested, {
+            nodeUuid: this.node.uuid
+        });
+    }
+    calculateDropIndex(mouseY) {
+        var _b, _c;
+        // Get the sortable list element
+        const sortableList = this.querySelector('temba-sortable-list');
+        if (!sortableList || !this.node.actions)
+            return (_c = (_b = this.node.actions) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+        // Get all action elements
+        const actionElements = Array.from(sortableList.querySelectorAll('.action.sortable'));
+        if (actionElements.length === 0) {
+            return 0;
+        }
+        // Find where to insert based on mouse Y position
+        for (let i = 0; i < actionElements.length; i++) {
+            const actionElement = actionElements[i];
+            const rect = actionElement.getBoundingClientRect();
+            const centerY = rect.top + rect.height / 2;
+            if (mouseY < centerY) {
+                return i;
+            }
+        }
+        // If past all elements, insert at the end
+        return actionElements.length;
+    }
+    handleExternalActionDragOver(event) {
+        // Only handle if this is an execute_actions node
+        if (this.ui.type !== 'execute_actions')
+            return;
+        const { action, sourceNodeUuid, actionIndex, mouseY, actionHeight } = event.detail;
+        // Don't accept drops from the same node
+        if (sourceNodeUuid === this.node.uuid)
+            return;
+        // Calculate where to drop
+        const dropIndex = this.calculateDropIndex(mouseY);
+        // Store the drag info
+        this.externalDragInfo = {
+            action,
+            sourceNodeUuid,
+            actionIndex,
+            dropIndex,
+            actionHeight: actionHeight || 60 // fallback to 60px if not provided
+        };
+        // Request update to show placeholder
+        this.requestUpdate();
+    }
+    handleExternalActionDragLeave(_event) {
+        // Clear external drag state when drag leaves this node
+        this.externalDragInfo = null;
+        this.requestUpdate();
+    }
+    handleActionShowGhost(_event) {
+        // Show the ghost element in the sortable list
+        const sortableList = this.querySelector('temba-sortable-list');
+        if (sortableList) {
+            const ghostElement = document.querySelector('.ghost');
+            if (ghostElement) {
+                ghostElement.style.display = 'block';
+            }
+        }
+    }
+    handleActionHideGhost(_event) {
+        // Hide the ghost element in the sortable list
+        const sortableList = this.querySelector('temba-sortable-list');
+        if (sortableList) {
+            const ghostElement = document.querySelector('.ghost');
+            if (ghostElement) {
+                ghostElement.style.display = 'none';
+            }
+        }
+    }
+    handleExternalActionDrop(event) {
+        var _b, _c, _d, _e, _f, _g;
+        // Only handle if this is an execute_actions node
+        if (this.ui.type !== 'execute_actions')
+            return;
+        const { action, sourceNodeUuid, actionIndex } = event.detail;
+        // Don't accept drops from the same node
+        if (sourceNodeUuid === this.node.uuid)
+            return;
+        // Get the drop index from our tracking state
+        const dropIndex = (_e = (_c = (_b = this.externalDragInfo) === null || _b === void 0 ? void 0 : _b.dropIndex) !== null && _c !== void 0 ? _c : (_d = this.node.actions) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0;
+        // Clear external drag state
+        this.externalDragInfo = null;
+        // Remove the action from the source node
+        const store = getStore();
+        if (!store)
+            return;
+        const flowDefinition = store.getState().flowDefinition;
+        if (!flowDefinition)
+            return;
+        const sourceNode = flowDefinition.nodes.find((n) => n.uuid === sourceNodeUuid);
+        if (sourceNode) {
+            const updatedSourceActions = sourceNode.actions.filter((_a, idx) => idx !== actionIndex);
+            // If source node has no actions left, remove it
+            if (updatedSourceActions.length === 0) {
+                this.fireCustomEvent(CustomEventType.NodeDeleted, {
+                    uuid: sourceNodeUuid
+                });
+            }
+            else {
+                // Update source node
+                const updatedSourceNode = {
+                    ...sourceNode,
+                    actions: updatedSourceActions
+                };
+                (_f = getStore()) === null || _f === void 0 ? void 0 : _f.getState().updateNode(sourceNodeUuid, updatedSourceNode);
+            }
+        }
+        // Add the action to this node at the calculated position
+        const newActions = [...this.node.actions];
+        newActions.splice(dropIndex, 0, action);
+        const updatedNode = { ...this.node, actions: newActions };
+        (_g = getStore()) === null || _g === void 0 ? void 0 : _g.getState().updateNode(this.node.uuid, updatedNode);
+        // Request update
+        this.requestUpdate();
+    }
     renderTitle(config, action, index, isRemoving = false) {
-        var _a, _b;
-        return html `<div class="cn-title" style="background:${config.color}">
-      ${((_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.length) > 1
+        var _b, _c, _d;
+        const color = config.group
+            ? (_b = ACTION_GROUP_METADATA[config.group]) === null || _b === void 0 ? void 0 : _b.color
+            : '#aaaaaa';
+        return html `<div class="cn-title" style="background:${color}">
+      ${!this.isTranslating && ((_d = (_c = this.node) === null || _c === void 0 ? void 0 : _c.actions) === null || _d === void 0 ? void 0 : _d.length) > 1
             ? html `<temba-icon class="drag-handle" name="sort"></temba-icon>`
-            : null}
+            : html `<div class="title-spacer"></div>`}
 
       <div class="name">${isRemoving ? 'Remove?' : config.name}</div>
-      <div
-        class="remove-button"
-        @click=${(e) => this.handleActionRemoveClick(e, action, index)}
-        title="Remove action"
-      >
-        ✕
-      </div>
+      ${!this.isTranslating
+            ? html `<div
+            class="remove-button"
+            @click=${(e) => this.handleActionRemoveClick(e, action, index)}
+            title="Remove action"
+          >
+            ✕
+          </div>`
+            : html `<div class="title-spacer"></div>`}
     </div>`;
     }
-    renderNodeTitle(config, isRemoving = false) {
+    renderNodeTitle(config, node, ui, isRemoving = false) {
+        var _b, _c;
+        // Get color from the appropriate metadata (either ACTION or SPLIT)
+        const color = config.group
+            ? ((_b = ACTION_GROUP_METADATA[config.group]) === null || _b === void 0 ? void 0 : _b.color) ||
+                ((_c = SPLIT_GROUP_METADATA[config.group]) === null || _c === void 0 ? void 0 : _c.color)
+            : '#aaaaaa';
         return html `<div
       class="cn-title ${isRemoving ? 'removing' : ''}"
-      style="background:${config.color}"
+      style="background:${color}"
     >
       <div class="title-spacer"></div>
-      <div class="name">${isRemoving ? 'Remove?' : config.name}</div>
-      <div
-        class="remove-button"
-        @click=${(e) => this.handleNodeRemoveClick(e)}
-        title="Remove node"
-      >
-        ✕
+      <div class="name">
+        ${isRemoving
+            ? 'Remove?'
+            : config.renderTitle
+                ? config.renderTitle(node, ui)
+                : html `${config.name}`}
       </div>
+      ${!this.isTranslating
+            ? html `<div
+            class="remove-button"
+            @click=${(e) => this.handleNodeRemoveClick(e)}
+            title="Remove node"
+          >
+            ✕
+          </div>`
+            : html `<div class="title-spacer"></div>`}
     </div>`;
     }
+    renderDropPlaceholder() {
+        var _b;
+        const height = ((_b = this.externalDragInfo) === null || _b === void 0 ? void 0 : _b.actionHeight) || 60;
+        return html `<div
+      class="action sortable drop-placeholder"
+      style="height: ${height}px; background: #f3f4f6; border: 2px dashed #d1d5db; border-radius: var(--curvature);"
+    ></div>`;
+    }
+    /**
+     * Get the localized version of an action if translating, otherwise return the original action.
+     * Falls back to base language values if no localization exists for a field.
+     */
+    getLocalizedAction(action) {
+        var _b, _c, _d;
+        // If not translating or no flow definition, return original action
+        if (!this.isTranslating ||
+            !this.flowDefinition ||
+            !this.languageCode ||
+            this.languageCode === this.flowDefinition.language) {
+            return action;
+        }
+        // Check if there's localization for this action
+        const localization = (_d = (_c = (_b = this.flowDefinition) === null || _b === void 0 ? void 0 : _b.localization) === null || _c === void 0 ? void 0 : _c[this.languageCode]) === null || _d === void 0 ? void 0 : _d[action.uuid];
+        if (!localization) {
+            // No localization available, return original action
+            return action;
+        }
+        // Create a new action with localized values, falling back to base language
+        const localizedAction = { ...action };
+        // Apply localized values for each field
+        Object.keys(localization).forEach((field) => {
+            const localizedValue = localization[field];
+            if (Array.isArray(localizedValue)) {
+                // Localized values are stored as arrays
+                if (localizedValue.length > 0) {
+                    // For single-value fields like 'text', take the first element
+                    // For array fields like 'quick_replies', use the whole array
+                    if (Array.isArray(action[field])) {
+                        localizedAction[field] = localizedValue;
+                    }
+                    else {
+                        localizedAction[field] = localizedValue[0];
+                    }
+                }
+            }
+        });
+        return localizedAction;
+    }
     renderAction(node, action, index) {
+        var _b, _c, _d;
         const config = ACTION_CONFIG[action.type];
         const isRemoving = this.actionRemovingState.has(action.uuid);
+        const isLocalizable = (config === null || config === void 0 ? void 0 : config.localizable) && config.localizable.length > 0;
+        const isDisabled = this.isTranslating && !isLocalizable;
+        // Check if this action has localization data
+        const hasLocalization = this.isTranslating &&
+            ((_d = (_c = (_b = this.flowDefinition) === null || _b === void 0 ? void 0 : _b.localization) === null || _c === void 0 ? void 0 : _c[this.languageCode]) === null || _d === void 0 ? void 0 : _d[action.uuid]);
+        // Get the localized action if translating
+        const displayAction = this.getLocalizedAction(action);
         if (config) {
-            return html `<div
-        class="action sortable ${action.type} ${isRemoving ? 'removing' : ''}"
-        id="action-${index}"
-      >
+            const classes = [
+                'action',
+                'sortable',
+                action.type,
+                isRemoving ? 'removing' : '',
+                isLocalizable && this.isTranslating ? 'localizable' : '',
+                hasLocalization ? 'has-localization' : '',
+                isDisabled ? 'non-localizable' : ''
+            ]
+                .filter(Boolean)
+                .join(' ');
+            return html `<div class="${classes}" id="action-${index}">
         <div
           class="action-content"
-          @mousedown=${(e) => this.handleActionMouseDown(e, action)}
-          @mouseup=${(e) => this.handleActionMouseUp(e, action)}
-          style="cursor: pointer; background: #fff"
+          @mousedown=${(e) => !isDisabled && this.handleActionMouseDown(e, action)}
+          @mouseup=${(e) => !isDisabled && this.handleActionMouseUp(e, action)}
+          style="cursor: ${isDisabled ? 'not-allowed' : 'pointer'}"
         >
           ${this.renderTitle(config, action, index, isRemoving)}
           <div class="body">
             ${config.render
-                ? config.render(node, action)
+                ? config.render(node, displayAction)
                 : html `<pre>${action.type}</pre>`}
           </div>
         </div>
@@ -760,6 +1117,25 @@ export class CanvasNode extends RapidElement {
       ${action.type}
     </div>`;
     }
+    renderActionsWithPlaceholder() {
+        if (!this.externalDragInfo) {
+            // No external drag, render normally
+            return this.node.actions.map((action, index) => this.renderAction(this.node, action, index));
+        }
+        // Insert placeholder at the drop index
+        const result = [];
+        for (let i = 0; i < this.node.actions.length; i++) {
+            if (i === this.externalDragInfo.dropIndex) {
+                result.push(this.renderDropPlaceholder());
+            }
+            result.push(this.renderAction(this.node, this.node.actions[i], i));
+        }
+        // If dropping at the end, add placeholder after all actions
+        if (this.externalDragInfo.dropIndex >= this.node.actions.length) {
+            result.push(this.renderDropPlaceholder());
+        }
+        return result;
+    }
     renderRouter(router, ui) {
         const nodeConfig = NODE_CONFIG[ui.type];
         if (nodeConfig) {
@@ -779,19 +1155,48 @@ export class CanvasNode extends RapidElement {
         }
     }
     renderCategories(node) {
+        var _b;
         if (!node.router || !node.router.categories) {
             return null;
         }
+        // Check if this node type supports category localization
+        const nodeConfig = NODE_CONFIG[(_b = this.ui) === null || _b === void 0 ? void 0 : _b.type];
+        const supportsLocalization = (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.localizable) === 'categories';
         return html `<div class="categories">
       ${repeat(node.router.categories, (category) => category.uuid, (category) => {
+            var _b, _c;
             const exit = node.exits.find((exit) => exit.uuid == category.exit_uuid);
+            // Get localized category name if translating
+            let displayName = category.name;
+            let isLocalized = false;
+            if (this.isTranslating &&
+                this.languageCode !== 'eng' &&
+                supportsLocalization) {
+                const localization = (_c = (_b = this.flowDefinition) === null || _b === void 0 ? void 0 : _b.localization) === null || _c === void 0 ? void 0 : _c[this.languageCode];
+                if (localization && localization[category.uuid]) {
+                    const categoryLocalization = localization[category.uuid];
+                    if (categoryLocalization.name && categoryLocalization.name[0]) {
+                        displayName = categoryLocalization.name[0];
+                        isLocalized = true;
+                    }
+                }
+            }
+            // Category is localizable if: translating, supports localization, categories enabled, and not base language
+            const isLocalizable = this.isTranslating &&
+                this.languageCode !== 'eng' &&
+                supportsLocalization &&
+                this.includeCategoriesInTranslation &&
+                !isLocalized;
             return html `<div
-            class="category"
+            class=${getClasses({
+                category: true,
+                localizable: isLocalizable
+            })}
             @mousedown=${(e) => this.handleNodeMouseDown(e)}
             @mouseup=${(e) => this.handleNodeMouseUp(e)}
             style="cursor: pointer;"
           >
-            <div class="cn-title">${category.name}</div>
+            <div class="cn-title">${displayName}</div>
             ${this.renderExit(exit)}
           </div>`;
         })}
@@ -815,12 +1220,19 @@ export class CanvasNode extends RapidElement {
             return html `<div class="node">Loading...</div>`;
         }
         const nodeConfig = NODE_CONFIG[this.ui.type];
+        // Check if this node should be disabled (grayed out)
+        const supportsLocalization = (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.localizable) === 'categories';
+        const isNodeDisabled = this.isTranslating &&
+            supportsLocalization &&
+            !this.includeCategoriesInTranslation;
         return html `
       <div
         id="${this.node.uuid}"
-        class="node ${this.ui.type === 'execute_actions'
-            ? 'execute-actions'
-            : ''}"
+        class=${getClasses({
+            node: true,
+            'execute-actions': this.ui.type === 'execute_actions',
+            'non-localizable': isNodeDisabled
+        })}
         style="left:${this.ui.position.left}px;top:${this.ui.position.top}px"
       >
         ${nodeConfig && nodeConfig.type !== 'execute_actions'
@@ -830,26 +1242,44 @@ export class CanvasNode extends RapidElement {
                 @mouseup=${(e) => this.handleNodeMouseUp(e)}
                 style="cursor: pointer;"
               >
-                ${this.renderNodeTitle(nodeConfig, this.actionRemovingState.has(this.node.uuid))}
-                ${nodeConfig.render ? nodeConfig.render(this.node) : null}
+                ${this.renderNodeTitle(nodeConfig, this.node, this.ui, this.actionRemovingState.has(this.node.uuid))}
+                ${nodeConfig.render
+                ? nodeConfig.render(this.node, this.ui)
+                : null}
               </div>
             </div>`
             : this.node.actions.length > 0
                 ? this.ui.type === 'execute_actions'
                     ? html `<temba-sortable-list
                 dragHandle="drag-handle"
+                externalDrag
                 @temba-order-changed="${this.handleActionOrderChanged}"
+                @temba-drag-start="${this.handleActionDragStart}"
+                @temba-drag-external="${this.handleActionDragExternal}"
+                @temba-drag-internal="${this.handleActionDragInternal}"
+                @temba-drag-stop="${this.handleActionDragStop}"
               >
-                ${this.node.actions.map((action, index) => this.renderAction(this.node, action, index))}
+                ${this.renderActionsWithPlaceholder()}
               </temba-sortable-list>`
                     : html `${this.node.actions.map((action, index) => this.renderAction(this.node, action, index))}`
                 : ''}
         ${this.node.router
-            ? html ` ${this.renderRouter(this.node.router, this.ui)}
-            ${this.renderCategories(this.node)}`
+            ? html `<div class="router-section">
+              ${this.renderRouter(this.node.router, this.ui)}
+              ${this.renderCategories(this.node)}
+            </div>`
             : html `<div class="action-exits">
               ${repeat(this.node.exits, (exit) => exit.uuid, (exit) => this.renderExit(exit))}
             </div>`}
+        ${this.ui.type === 'execute_actions' && !this.isTranslating
+            ? html `<div
+              class="add-action-button"
+              @click=${(e) => this.handleAddActionClick(e)}
+              title="Add action"
+            >
+              <temba-icon name="add"></temba-icon>
+            </div>`
+            : ''}
       </div>
     `;
     }
@@ -863,4 +1293,16 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], CanvasNode.prototype, "ui", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.isTranslating)
+], CanvasNode.prototype, "isTranslating", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.languageCode)
+], CanvasNode.prototype, "languageCode", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.flowDefinition)
+], CanvasNode.prototype, "flowDefinition", void 0);
+__decorate([
+    fromStore(zustand, (state) => { var _b, _c, _d; return ((_d = (_c = (_b = state.flowDefinition) === null || _b === void 0 ? void 0 : _b._ui) === null || _c === void 0 ? void 0 : _c.translation_filters) === null || _d === void 0 ? void 0 : _d.categories) || false; })
+], CanvasNode.prototype, "includeCategoriesInTranslation", void 0);
 //# sourceMappingURL=CanvasNode.js.map