@nyaruka/temba-components 0.131.1 → 0.131.3

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

@@ -7,6 +7,9 @@ import { fromStore, zustand } from '../store/AppState';
 import { RapidElement } from '../RapidElement';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { CustomEventType } from '../interfaces';
+import { generateUUID, postJSON } from '../utils';
+import { ACTION_CONFIG, NODE_CONFIG } from './config';
+import { ACTION_GROUP_METADATA } from './types';
 import { Plumber } from './Plumber';
 import { CanvasNode } from './CanvasNode';
 export function snapToGrid(value) {
@@ -24,6 +27,11 @@ export function findNodeForExit(definition, exitUuid) {
 }
 const SAVE_QUIET_TIME = 500;
 const DRAG_THRESHOLD = 5;
+const AUTO_TRANSLATE_MODELS_ENDPOINT = '/api/internal/llms.json';
+// 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() {
@@ -33,6 +41,18 @@ export class Editor extends RapidElement {
     get dragging() {
         return this.isDragging;
     }
+    getAvailableLanguages() {
+        var _b, _c;
+        // Use languages from flow definition if available, otherwise use defaults
+        if (((_c = (_b = this.definition) === null || _b === void 0 ? void 0 : _b._ui) === null || _c === void 0 ? void 0 : _c.languages) &&
+            this.definition._ui.languages.length > 0) {
+            return this.definition._ui.languages.map((lang) => ({
+                code: typeof lang === 'string' ? lang : lang.iso || lang.code,
+                name: typeof lang === 'string' ? lang : lang.name
+            }));
+        }
+        return this.DEFAULT_LANGUAGES;
+    }
     static get styles() {
         return css `
       #editor {
@@ -176,12 +196,193 @@ export class Editor extends RapidElement {
       .jtk-floating-endpoint {
         pointer-events: none;
       }
+
+      .localization-window-content {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        height: 100%;
+      }
+
+      .localization-header {
+        font-size: 13px;
+        color: #4b5563;
+        line-height: 1.4;
+      }
+
+      .localization-language-select {
+        --color-widget-border: #d1d5db;
+        --color-widget-background: #fff;
+      }
+
+      .localization-language-row {
+        display: flex;
+        align-items: flex-end;
+        gap: 12px;
+      }
+
+      .localization-language-row temba-select {
+        flex: 1;
+      }
+
+      .localization-progress {
+        margin-top: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .localization-progress-bar-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .localization-progress-trigger {
+        flex: 1;
+        border-radius: 6px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+      }
+
+      .localization-progress-trigger:focus-visible {
+        outline: 2px solid #94a3b8;
+        outline-offset: 2px;
+      }
+
+      .localization-progress-trigger temba-progress {
+        flex: 1;
+      }
+
+      .localization-progress h5 {
+        margin: 0;
+        font-size: 13px;
+        font-weight: 600;
+        color: #374151;
+      }
+
+      .localization-progress-summary {
+        font-size: 12px;
+        color: #6b7280;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        min-height: 20px;
+      }
+
+      .translation-settings-toggle {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        background: transparent;
+        border: none;
+        color: #6b7280;
+        font-size: 12px;
+        font-weight: 600;
+        cursor: pointer;
+        padding: 4px;
+        border-radius: 4px;
+      }
+
+      .translation-settings-label {
+        font-size: 12px;
+        color: #6b7280;
+      }
+
+      .translation-settings-toggle:focus-visible {
+        outline: 2px solid #94a3b8;
+        outline-offset: 2px;
+      }
+
+      .translation-settings-arrow {
+        width: 8px;
+        height: 8px;
+        border-right: 2px solid currentColor;
+        border-bottom: 2px solid currentColor;
+        transform: rotate(-45deg);
+        transition: transform 0.2s ease;
+        margin-left: 2px;
+      }
+
+      .translation-settings-arrow.expanded {
+        transform: rotate(45deg);
+      }
+
+      .translation-settings {
+      }
+
+      .translation-settings-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .translation-settings-row temba-checkbox {
+        width: 100%;
+      }
+
+      .auto-translate-button {
+        background: var(--color-primary-dark);
+        border: none;
+        color: #fff;
+        padding: 10px 12px;
+        border-radius: var(--curvature);
+        font-size: 12px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+      }
+
+      .auto-translate-button[disabled] {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .auto-translate-error {
+        font-size: 12px;
+        color: #b91c1c;
+      }
+
+      .auto-translate-dialog-content {
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        font-size: 14px;
+        color: #374151;
+      }
+
+      .auto-translate-dialog-content p {
+        margin: 0;
+      }
+
+      .auto-translate-loading {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 13px;
+        color: #6b7280;
+      }
+
+      .auto-translate-empty {
+        font-size: 13px;
+        color: #6b7280;
+      }
+
+      .localization-empty {
+        font-size: 13px;
+        color: #9ca3af;
+        white-space: nowrap;
+      }
     `;
     }
     constructor() {
         super();
         // timer for debounced saving
         this.saveTimer = null;
+        this.flowType = 'message';
+        this.features = [];
         // Drag state
         this.isDragging = false;
         this.isMouseDown = false;
@@ -196,17 +397,42 @@ export class Editor extends RapidElement {
         this.sourceId = null;
         this.dragFromNodeId = null;
         this.isValidTarget = true;
+        this.localizationWindowHidden = true;
+        this.translationFilters = {
+            categories: false
+        };
+        this.translationSettingsExpanded = false;
+        this.autoTranslateDialogOpen = false;
+        this.autoTranslating = false;
+        this.autoTranslateModel = null;
+        this.autoTranslateError = null;
+        this.translationCache = new Map();
         // NodeEditor state - handles both node and action editing
         this.editingNode = null;
         this.editingNodeUI = null;
         this.editingAction = null;
+        this.isCreatingNewNode = false;
+        this.pendingNodePosition = null;
+        // Canvas drop state for dragging actions to canvas
+        this.canvasDropPreview = null;
+        this.addActionToNodeUuid = null;
+        // Track target node for action drag
+        this.actionDragTargetNodeUuid = null;
+        // Track previous target node to clear placeholder when moving between nodes
+        this.previousActionDragTargetNodeUuid = null;
         this.canvasMouseDown = false;
+        // Default languages if not specified in flow definition
+        this.DEFAULT_LANGUAGES = [
+            { code: 'eng', name: 'English' },
+            { code: 'fra', name: 'French' },
+            { code: 'esp', name: 'Spanish' }
+        ];
         // Bound event handlers to maintain proper 'this' context
         this.boundMouseMove = this.handleMouseMove.bind(this);
         this.boundMouseUp = this.handleMouseUp.bind(this);
         this.boundGlobalMouseDown = this.handleGlobalMouseDown.bind(this);
         this.boundKeyDown = this.handleKeyDown.bind(this);
-        this.boundCanvasDoubleClick = this.handleCanvasDoubleClick.bind(this);
+        this.boundCanvasContextMenu = this.handleCanvasContextMenu.bind(this);
     }
     firstUpdated(changes) {
         super.firstUpdated(changes);
@@ -248,18 +474,54 @@ export class Editor extends RapidElement {
         this.isValidTarget = true;
     }
     updated(changes) {
+        var _b, _c, _d;
         super.updated(changes);
         if (changes.has('canvasSize')) {
             // console.log('Setting canvas size', this.canvasSize);
         }
         if (changes.has('definition')) {
             this.updateCanvasSize();
+            // Set flowType from the loaded definition
+            if ((_b = this.definition) === null || _b === void 0 ? void 0 : _b.type) {
+                this.flowType = this.getFlowTypeFromDefinition(this.definition.type);
+            }
+            const filters = ((_d = (_c = this.definition) === null || _c === void 0 ? void 0 : _c._ui) === null || _d === void 0 ? void 0 : _d.translation_filters) || {
+                categories: false
+            };
+            const normalizedFilters = {
+                categories: !!filters.categories
+            };
+            if (this.translationFilters.categories !== normalizedFilters.categories) {
+                this.translationFilters = normalizedFilters;
+            }
+            this.translationCache.clear();
         }
         if (changes.has('dirtyDate')) {
             if (this.dirtyDate) {
                 this.debouncedSave();
             }
         }
+        if (changes.has('languageCode')) {
+            this.translationCache.clear();
+        }
+    }
+    /**
+     * Map FlowDefinition type to Editor flowType
+     * FlowDefinition uses: 'messaging', 'messaging_background', 'messaging_offline', 'voice'
+     * Editor uses: 'message', 'voice', 'background'
+     */
+    getFlowTypeFromDefinition(definitionType) {
+        if (definitionType === 'voice') {
+            return 'voice';
+        }
+        else if (definitionType === 'messaging_background' ||
+            definitionType === 'messaging_offline') {
+            return 'background';
+        }
+        else {
+            // 'messaging' or any other messaging type defaults to 'message'
+            return 'message';
+        }
     }
     debouncedSave() {
         // Clear any existing timer
@@ -293,6 +555,15 @@ export class Editor extends RapidElement {
         });
         getStore().getState().setDirtyDate(null);
     }
+    handleLanguageChange(languageCode) {
+        zustand.getState().setLanguageCode(languageCode);
+        // Repaint connections after language change since node sizes can change
+        if (this.plumber) {
+            requestAnimationFrame(() => {
+                this.plumber.repaintEverything();
+            });
+        }
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         if (this.saveTimer !== null) {
@@ -305,7 +576,7 @@ export class Editor extends RapidElement {
         document.removeEventListener('keydown', this.boundKeyDown);
         const canvas = this.querySelector('#canvas');
         if (canvas) {
-            canvas.removeEventListener('dblclick', this.boundCanvasDoubleClick);
+            canvas.removeEventListener('contextmenu', this.boundCanvasContextMenu);
         }
     }
     setupGlobalEventListeners() {
@@ -315,20 +586,40 @@ export class Editor extends RapidElement {
         document.addEventListener('keydown', this.boundKeyDown);
         const canvas = this.querySelector('#canvas');
         if (canvas) {
-            canvas.addEventListener('dblclick', this.boundCanvasDoubleClick);
+            canvas.addEventListener('contextmenu', this.boundCanvasContextMenu);
         }
         // Listen for action edit requests from flow nodes
         this.addEventListener(CustomEventType.ActionEditRequested, this.handleActionEditRequested.bind(this));
+        // Listen for add action requests from flow nodes
+        this.addEventListener(CustomEventType.AddActionRequested, this.handleAddActionRequested.bind(this));
         // Listen for node edit requests from flow nodes
         this.addEventListener(CustomEventType.NodeEditRequested, this.handleNodeEditRequested.bind(this));
+        // Listen for canvas menu selections
+        this.addEventListener(CustomEventType.Selection, (event) => {
+            const target = event.target;
+            if (target.tagName === 'TEMBA-CANVAS-MENU') {
+                this.handleCanvasMenuSelection(event);
+            }
+            else if (target.tagName === 'TEMBA-NODE-TYPE-SELECTOR') {
+                this.handleNodeTypeSelection(event);
+            }
+        });
+        // Listen for action drag events from nodes
+        this.addEventListener(CustomEventType.DragExternal, this.handleActionDragExternal.bind(this));
+        this.addEventListener(CustomEventType.DragInternal, this.handleActionDragInternal.bind(this));
+        this.addEventListener(CustomEventType.DragStop, (event) => {
+            if (event.detail.isExternal) {
+                this.handleActionDropExternal(event);
+            }
+        });
     }
     getPosition(uuid, type) {
-        var _a, _b, _c;
+        var _b, _c, _d;
         if (type === 'node') {
-            return (_a = this.definition._ui.nodes[uuid]) === null || _a === void 0 ? void 0 : _a.position;
+            return (_b = this.definition._ui.nodes[uuid]) === null || _b === void 0 ? void 0 : _b.position;
         }
         else {
-            return (_c = (_b = this.definition._ui.stickies) === null || _b === void 0 ? void 0 : _b[uuid]) === null || _c === void 0 ? void 0 : _c.position;
+            return (_d = (_c = this.definition._ui.stickies) === null || _c === void 0 ? void 0 : _c[uuid]) === null || _d === void 0 ? void 0 : _d.position;
         }
     }
     handleMouseDown(event) {
@@ -370,12 +661,12 @@ export class Editor extends RapidElement {
         event.stopPropagation();
     }
     handleGlobalMouseDown(event) {
-        var _a;
+        var _b;
         // ignore right clicks
         if (event.button !== 0)
             return;
         // Check if the click is within our canvas
-        const canvasRect = (_a = this.querySelector('#grid')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const canvasRect = (_b = this.querySelector('#grid')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
         if (!canvasRect)
             return;
         const isWithinCanvas = event.clientX >= canvasRect.left &&
@@ -395,14 +686,14 @@ export class Editor extends RapidElement {
         this.handleCanvasMouseDown(event);
     }
     handleCanvasMouseDown(event) {
-        var _a;
+        var _b;
         const target = event.target;
         if (target.id === 'canvas' || target.id === 'grid') {
             // Ignore clicks on exits
             // Start selection box
             this.canvasMouseDown = true;
             this.dragStartPos = { x: event.clientX, y: event.clientY };
-            const canvasRect = (_a = this.querySelector('#canvas')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const canvasRect = (_b = this.querySelector('#canvas')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
             if (canvasRect) {
                 // Clear current selection
                 this.selectedItems.clear();
@@ -466,16 +757,16 @@ export class Editor extends RapidElement {
     deleteSelectedItems() {
         const nodes = Array.from(this.selectedItems).filter((uuid) => this.definition.nodes.some((node) => node.uuid === uuid));
         this.deleteNodes(Array.from(nodes));
-        const stickies = Array.from(this.selectedItems).filter((uuid) => { var _a, _b; return (_b = (_a = this.definition._ui) === null || _a === void 0 ? void 0 : _a.stickies) === null || _b === void 0 ? void 0 : _b[uuid]; });
+        const stickies = Array.from(this.selectedItems).filter((uuid) => { var _b, _c; return (_c = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.stickies) === null || _c === void 0 ? void 0 : _c[uuid]; });
         getStore().getState().removeStickyNotes(stickies);
         // Clear selection
         this.selectedItems.clear();
     }
     updateSelectionBox(event) {
-        var _a;
+        var _b;
         if (!this.selectionBox || !this.canvasMouseDown)
             return;
-        const canvasRect = (_a = this.querySelector('#canvas')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const canvasRect = (_b = this.querySelector('#canvas')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
         if (!canvasRect)
             return;
         const relativeX = event.clientX - canvasRect.left;
@@ -489,7 +780,7 @@ export class Editor extends RapidElement {
         this.updateSelectedItemsFromBox();
     }
     updateSelectedItemsFromBox() {
-        var _a, _b, _c;
+        var _b, _c, _d;
         if (!this.selectionBox)
             return;
         const newSelection = new Set();
@@ -498,14 +789,14 @@ export class Editor extends RapidElement {
         const boxRight = Math.max(this.selectionBox.startX, this.selectionBox.endX);
         const boxBottom = Math.max(this.selectionBox.startY, this.selectionBox.endY);
         // Check nodes
-        (_a = this.definition) === null || _a === void 0 ? void 0 : _a.nodes.forEach((node) => {
-            var _a, _b, _c;
+        (_b = this.definition) === null || _b === void 0 ? void 0 : _b.nodes.forEach((node) => {
+            var _b, _c, _d;
             const nodeElement = this.querySelector(`[id="${node.uuid}"]`);
             if (nodeElement) {
-                const position = (_b = (_a = this.definition._ui) === null || _a === void 0 ? void 0 : _a.nodes[node.uuid]) === null || _b === void 0 ? void 0 : _b.position;
+                const position = (_c = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.nodes[node.uuid]) === null || _c === void 0 ? void 0 : _c.position;
                 if (position) {
                     const rect = nodeElement.getBoundingClientRect();
-                    const canvasRect = (_c = this.querySelector('#canvas')) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+                    const canvasRect = (_d = this.querySelector('#canvas')) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect();
                     if (canvasRect) {
                         const nodeLeft = position.left;
                         const nodeTop = position.top;
@@ -523,7 +814,7 @@ export class Editor extends RapidElement {
             }
         });
         // Check sticky notes
-        const stickies = ((_c = (_b = this.definition) === null || _b === void 0 ? void 0 : _b._ui) === null || _c === void 0 ? void 0 : _c.stickies) || {};
+        const stickies = ((_d = (_c = this.definition) === null || _c === void 0 ? void 0 : _c._ui) === null || _d === void 0 ? void 0 : _d.stickies) || {};
         Object.entries(stickies).forEach(([uuid, sticky]) => {
             if (sticky.position) {
                 const stickyElement = this.querySelector(`temba-sticky-note[uuid="${uuid}"]`);
@@ -561,6 +852,49 @@ export class Editor extends RapidElement {
       style="left: ${left}px; top: ${top}px; width: ${width}px; height: ${height}px;"
     ></div>`;
     }
+    renderCanvasDropPreview() {
+        var _b;
+        if (!this.canvasDropPreview)
+            return '';
+        const { action, position } = this.canvasDropPreview;
+        const actionConfig = ACTION_CONFIG[action.type];
+        if (!actionConfig)
+            return '';
+        return html `<div
+      class="canvas-drop-preview"
+      style="position: absolute; left: ${position.left}px; top: ${position.top}px; opacity: 0.6; pointer-events: none; z-index: 10000;"
+    >
+      <div
+        class="node execute-actions"
+        style="outline: 3px dashed var(--color-primary, #3b82f6); outline-offset: 2px; border-radius: var(--curvature);"
+      >
+        <div class="action sortable ${action.type}">
+          <div class="action-content">
+            <div
+              class="cn-title"
+              style="background: ${actionConfig.group
+            ? (_b = ACTION_GROUP_METADATA[actionConfig.group]) === null || _b === void 0 ? void 0 : _b.color
+            : '#aaaaaa'}"
+            >
+              <div class="title-spacer"></div>
+              <div class="name">${actionConfig.name}</div>
+              <div class="title-spacer"></div>
+            </div>
+            <div class="body">
+              ${actionConfig.render
+            ? actionConfig.render({ actions: [action] }, action)
+            : html `<pre>${action.type}</pre>`}
+            </div>
+          </div>
+        </div>
+        <div class="action-exits">
+          <div class="exit-wrapper">
+            <div class="exit"></div>
+          </div>
+        </div>
+      </div>
+    </div>`;
+    }
     handleMouseMove(event) {
         // Handle selection box drawing
         if (this.canvasMouseDown && !this.isMouseDown) {
@@ -693,7 +1027,7 @@ export class Editor extends RapidElement {
         this.canvasMouseDown = false;
     }
     updateCanvasSize() {
-        var _a;
+        var _b;
         if (!this.definition)
             return;
         const store = getStore();
@@ -715,7 +1049,7 @@ export class Editor extends RapidElement {
             }
         });
         // Check sticky note positions
-        const stickies = ((_a = this.definition._ui) === null || _a === void 0 ? void 0 : _a.stickies) || {};
+        const stickies = ((_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.stickies) || {};
         Object.entries(stickies).forEach(([uuid, sticky]) => {
             if (sticky.position) {
                 const stickyElement = this.querySelector(`temba-sticky-note[uuid="${uuid}"]`);
@@ -738,12 +1072,15 @@ export class Editor extends RapidElement {
         // Update canvas size in store
         store.getState().expandCanvas(maxWidth, maxHeight);
     }
-    handleCanvasDoubleClick(event) {
-        // Check if we double-clicked on empty canvas space
+    handleCanvasContextMenu(event) {
+        // Check if we right-clicked on empty canvas space
         const target = event.target;
         if (target.id !== 'canvas') {
             return;
         }
+        // Prevent the default browser context menu
+        event.preventDefault();
+        event.stopPropagation();
         // Get canvas position
         const canvas = this.querySelector('#canvas');
         if (!canvas) {
@@ -755,14 +1092,119 @@ export class Editor extends RapidElement {
         // Snap position to grid
         const snappedLeft = snapToGrid(relativeX);
         const snappedTop = snapToGrid(relativeY);
-        // Create new sticky note
+        // Show the canvas menu at the mouse position (use viewport coordinates)
+        const canvasMenu = this.querySelector('temba-canvas-menu');
+        if (canvasMenu) {
+            canvasMenu.show(event.clientX, event.clientY, {
+                x: snappedLeft,
+                y: snappedTop
+            });
+        }
+    }
+    handleCanvasMenuSelection(event) {
+        const selection = event.detail;
         const store = getStore();
-        store.getState().createStickyNote({
-            left: snappedLeft,
-            top: snappedTop
-        });
-        event.preventDefault();
-        event.stopPropagation();
+        if (selection.action === 'sticky') {
+            // Create new sticky note
+            store.getState().createStickyNote({
+                left: selection.position.x,
+                top: selection.position.y
+            });
+        }
+        else {
+            // Show node type selector
+            const selector = this.querySelector('temba-node-type-selector');
+            if (selector) {
+                selector.show(selection.action, selection.position);
+            }
+        }
+    }
+    handleNodeTypeSelection(event) {
+        const selection = event.detail;
+        // Check if we're adding an action to an existing node
+        if (this.addActionToNodeUuid) {
+            // Find the existing node
+            const node = this.definition.nodes.find((n) => n.uuid === this.addActionToNodeUuid);
+            const nodeUI = this.definition._ui.nodes[this.addActionToNodeUuid];
+            if (node && nodeUI) {
+                // Create a new action to add to the existing node
+                const actionUuid = generateUUID();
+                this.editingAction = {
+                    uuid: actionUuid,
+                    type: selection.nodeType
+                };
+                // Set the editing node to the existing node (not creating new)
+                this.editingNode = node;
+                this.editingNodeUI = nodeUI;
+                this.isCreatingNewNode = false;
+                // Clear the addActionToNodeUuid flag
+                this.addActionToNodeUuid = null;
+                return;
+            }
+            // If we couldn't find the node, clear the flag and continue with normal flow
+            this.addActionToNodeUuid = null;
+        }
+        // Create a temporary node structure for editing (not added to store yet)
+        const nodeUuid = generateUUID();
+        // Determine if this is an action type or a node type
+        // Actions need to be wrapped in an execute_actions node
+        const isActionType = selection.nodeType in ACTION_CONFIG;
+        const nodeType = isActionType ? 'execute_actions' : selection.nodeType;
+        // For nodes with routers, initialize an empty router to ensure fromFormData works correctly
+        const nodeConfig = NODE_CONFIG[nodeType];
+        const hasRouter = (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.form) &&
+            Object.keys(nodeConfig.form).some((key) => {
+                var _b;
+                return ['rules', 'categories', 'cases'].includes(key) ||
+                    ((_b = nodeConfig.form[key]) === null || _b === void 0 ? void 0 : _b.type) === 'array';
+            });
+        const tempNode = {
+            uuid: nodeUuid,
+            actions: [],
+            exits: hasRouter
+                ? [] // Router-based nodes will generate their own exits
+                : [
+                    {
+                        uuid: generateUUID(),
+                        destination_uuid: null
+                    }
+                ]
+        };
+        if (hasRouter) {
+            // This node uses a router - initialize it with empty structure
+            tempNode.router = {
+                type: 'switch',
+                categories: [],
+                cases: [],
+                operand: '@input.text',
+                default_category_uuid: undefined
+            };
+        }
+        const tempNodeUI = {
+            position: {
+                left: selection.position.x,
+                top: selection.position.y
+            },
+            type: nodeType,
+            config: {}
+        };
+        // Mark that we're creating a new node and store the position
+        this.isCreatingNewNode = true;
+        this.pendingNodePosition = {
+            left: selection.position.x,
+            top: selection.position.y
+        };
+        // Open the node editor with the temporary node
+        this.editingNode = tempNode;
+        this.editingNodeUI = tempNodeUI;
+        // If this is an action type, we also need to set up an editing action
+        if (isActionType) {
+            const actionUuid = generateUUID();
+            this.editingAction = {
+                uuid: actionUuid,
+                type: selection.nodeType
+            };
+        }
     }
     handleActionEditRequested(event) {
         // For action editing, we set the action and find the corresponding node
@@ -775,24 +1217,80 @@ export class Editor extends RapidElement {
             this.editingNodeUI = this.definition._ui.nodes[nodeUuid];
         }
     }
+    handleAddActionRequested(event) {
+        // Get the node where we want to add the action
+        const nodeUuid = event.detail.nodeUuid;
+        const node = this.definition.nodes.find((n) => n.uuid === nodeUuid);
+        if (!node) {
+            return;
+        }
+        // Get the node's position to place the selector near it
+        const nodeUI = this.definition._ui.nodes[nodeUuid];
+        if (!nodeUI) {
+            return;
+        }
+        // Show the node type selector in action mode, excluding branching actions
+        const selector = this.querySelector('temba-node-type-selector');
+        if (selector) {
+            // Show the selector near the node, using a mode that excludes branching actions
+            selector.show('action-no-branching', {
+                x: nodeUI.position.left,
+                y: nodeUI.position.top
+            });
+            // Store the node UUID so we know which node to add the action to
+            this.addActionToNodeUuid = nodeUuid;
+        }
+    }
     handleNodeEditRequested(event) {
         this.editingNode = event.detail.node;
         this.editingNodeUI = event.detail.nodeUI;
     }
     handleActionSaved(updatedAction) {
-        var _a;
+        var _b, _c;
         if (this.editingNode && this.editingAction) {
-            // Update the specific action in the node
-            const updatedActions = this.editingNode.actions.map((action) => action.uuid === this.editingAction.uuid ? updatedAction : action);
+            let updatedActions;
+            // Check if this action already exists in the node
+            const existingActionIndex = this.editingNode.actions.findIndex((action) => action.uuid === this.editingAction.uuid);
+            if (existingActionIndex >= 0) {
+                // Update existing action
+                updatedActions = this.editingNode.actions.map((action) => action.uuid === this.editingAction.uuid ? updatedAction : action);
+            }
+            else {
+                // Add new action
+                updatedActions = [...this.editingNode.actions, updatedAction];
+            }
             const updatedNode = { ...this.editingNode, actions: updatedActions };
-            // Update the node in the store
-            (_a = getStore()) === null || _a === void 0 ? void 0 : _a.getState().updateNode(this.editingNode.uuid, updatedNode);
-            // Repaint jsplumb connections in case node size changed
-            if (this.plumber) {
-                // Use requestAnimationFrame to ensure DOM has been updated first
-                requestAnimationFrame(() => {
-                    this.plumber.repaintEverything();
-                });
+            // Check if we're creating a new node or updating an existing one
+            if (this.isCreatingNewNode) {
+                // This is a new node with a new action - add it to the store
+                const store = getStore();
+                const nodeUI = {
+                    position: this.pendingNodePosition || { left: 0, top: 0 },
+                    type: (_b = this.editingNodeUI) === null || _b === void 0 ? void 0 : _b.type,
+                    config: {}
+                };
+                // Add the node to the store
+                store.getState().addNode(updatedNode, nodeUI);
+                // Reset the creation flags
+                this.isCreatingNewNode = false;
+                this.pendingNodePosition = null;
+                // Repaint jsplumb connections
+                if (this.plumber) {
+                    requestAnimationFrame(() => {
+                        this.plumber.repaintEverything();
+                    });
+                }
+            }
+            else {
+                // Update existing node in the store
+                (_c = getStore()) === null || _c === void 0 ? void 0 : _c.getState().updateNode(this.editingNode.uuid, updatedNode);
+                // Repaint jsplumb connections in case node size changed
+                if (this.plumber) {
+                    // Use requestAnimationFrame to ensure DOM has been updated first
+                    requestAnimationFrame(() => {
+                        this.plumber.repaintEverything();
+                    });
+                }
             }
         }
         this.closeNodeEditor();
@@ -803,25 +1301,51 @@ export class Editor extends RapidElement {
         this.editingAction = null;
     }
     handleActionEditCanceled() {
+        // If we were creating a new node, just discard it
+        if (this.isCreatingNewNode) {
+            this.isCreatingNewNode = false;
+            this.pendingNodePosition = null;
+        }
         this.closeNodeEditor();
     }
-    handleNodeSaved(updatedNode) {
-        var _a;
+    handleNodeSaved(updatedNode, uiConfig) {
+        var _b, _c, _d;
         if (this.editingNode) {
-            // Clean up jsPlumb connections for removed exits before updating the node
-            if (this.plumber) {
-                const oldExits = this.editingNode.exits || [];
-                const newExits = updatedNode.exits || [];
-                // Find exits that were removed
-                const removedExits = oldExits.filter((oldExit) => !newExits.find((newExit) => newExit.uuid === oldExit.uuid));
-                // Remove jsPlumb connections for removed exits
-                removedExits.forEach((exit) => {
-                    this.plumber.removeExitConnection(exit.uuid);
-                });
+            if (this.isCreatingNewNode) {
+                // This is a new node - add it to the store for the first time
+                const store = getStore();
+                const nodeUI = {
+                    position: this.pendingNodePosition || { left: 0, top: 0 },
+                    type: (_b = this.editingNodeUI) === null || _b === void 0 ? void 0 : _b.type,
+                    config: uiConfig || {}
+                };
+                // Add the node to the store
+                store.getState().addNode(updatedNode, nodeUI);
+                // Reset the creation flags
+                this.isCreatingNewNode = false;
+                this.pendingNodePosition = null;
+            }
+            else {
+                // This is an existing node - update it
+                // Clean up jsPlumb connections for removed exits before updating the node
+                if (this.plumber) {
+                    const oldExits = this.editingNode.exits || [];
+                    const newExits = updatedNode.exits || [];
+                    // Find exits that were removed
+                    const removedExits = oldExits.filter((oldExit) => !newExits.find((newExit) => newExit.uuid === oldExit.uuid));
+                    // Remove jsPlumb connections for removed exits
+                    removedExits.forEach((exit) => {
+                        this.plumber.removeExitConnection(exit.uuid);
+                    });
+                }
+                this.plumber.revalidate([updatedNode.uuid]);
+                // Update the node in the store
+                (_c = getStore()) === null || _c === void 0 ? void 0 : _c.getState().updateNode(this.editingNode.uuid, updatedNode);
+                // Update the UI config if provided
+                if (uiConfig) {
+                    (_d = getStore()) === null || _d === void 0 ? void 0 : _d.getState().updateNodeUIConfig(updatedNode.uuid, uiConfig);
+                }
             }
-            this.plumber.revalidate([updatedNode.uuid]);
-            // Update the node in the store
-            (_a = getStore()) === null || _a === void 0 ? void 0 : _a.getState().updateNode(this.editingNode.uuid, updatedNode);
             // Repaint jsplumb connections in case node size changed
             if (this.plumber) {
                 // Use requestAnimationFrame to ensure DOM has been updated first
@@ -833,17 +1357,787 @@ export class Editor extends RapidElement {
         this.closeNodeEditor();
     }
     handleNodeEditCanceled() {
+        // If we were creating a new node, just discard it
+        if (this.isCreatingNewNode) {
+            this.isCreatingNewNode = false;
+            this.pendingNodePosition = null;
+        }
         this.closeNodeEditor();
     }
+    getNodeAtPosition(mouseX, mouseY) {
+        // Get all node elements
+        const nodeElements = this.querySelectorAll('temba-flow-node');
+        for (const nodeElement of Array.from(nodeElements)) {
+            const rect = nodeElement.getBoundingClientRect();
+            if (mouseX >= rect.left &&
+                mouseX <= rect.right &&
+                mouseY >= rect.top &&
+                mouseY <= rect.bottom) {
+                return nodeElement.getAttribute('data-node-uuid');
+            }
+        }
+        return null;
+    }
+    calculateCanvasDropPosition(mouseX, mouseY, applyGridSnapping = true) {
+        // calculate the position on the canvas
+        const canvas = this.querySelector('#canvas');
+        if (!canvas)
+            return { left: 0, top: 0 };
+        const canvasRect = canvas.getBoundingClientRect();
+        // calculate position relative to canvas
+        // canvasRect gives us the canvas position in the viewport, which already accounts for scroll
+        // so we just need mouseX/Y - canvasRect.left/top to get position within canvas
+        const left = mouseX - canvasRect.left - DROP_PREVIEW_OFFSET_X;
+        const top = mouseY - canvasRect.top - DROP_PREVIEW_OFFSET_Y;
+        // Apply grid snapping only if requested (for final drop position)
+        if (applyGridSnapping) {
+            return {
+                left: snapToGrid(left),
+                top: snapToGrid(top)
+            };
+        }
+        return { left, top };
+    }
+    handleActionDragExternal(event) {
+        const { action, nodeUuid, actionIndex, mouseX, mouseY, actionHeight = 60 } = event.detail;
+        // Check if mouse is over another execute_actions node
+        const targetNode = this.getNodeAtPosition(mouseX, mouseY);
+        if (targetNode && targetNode !== nodeUuid) {
+            const targetNodeUI = this.definition._ui.nodes[targetNode];
+            const targetNodeDef = this.definition.nodes.find((n) => n.uuid === targetNode);
+            // Only allow dropping on execute_actions nodes, and not the source node
+            if ((targetNodeUI === null || targetNodeUI === void 0 ? void 0 : targetNodeUI.type) === 'execute_actions' && targetNodeDef) {
+                // If we moved to a different target node, clear the previous one's placeholder
+                if (this.previousActionDragTargetNodeUuid &&
+                    this.previousActionDragTargetNodeUuid !== targetNode) {
+                    const previousElement = this.querySelector(`temba-flow-node[data-node-uuid="${this.previousActionDragTargetNodeUuid}"]`);
+                    if (previousElement) {
+                        previousElement.dispatchEvent(new CustomEvent('action-drag-leave', {
+                            detail: {},
+                            bubbles: false
+                        }));
+                    }
+                }
+                // Update target node for drop handling
+                this.actionDragTargetNodeUuid = targetNode;
+                this.previousActionDragTargetNodeUuid = targetNode;
+                // Hide canvas preview when over a valid target
+                this.canvasDropPreview = null;
+                // Tell source node to show ghost (we're over a valid target)
+                const sourceElement = this.querySelector(`temba-flow-node[data-node-uuid="${nodeUuid}"]`);
+                if (sourceElement) {
+                    sourceElement.dispatchEvent(new CustomEvent('action-show-ghost', {
+                        detail: {},
+                        bubbles: false
+                    }));
+                }
+                // Notify the target node about the drag
+                const targetElement = this.querySelector(`temba-flow-node[data-node-uuid="${targetNode}"]`);
+                if (targetElement) {
+                    targetElement.dispatchEvent(new CustomEvent('action-drag-over', {
+                        detail: {
+                            action,
+                            sourceNodeUuid: nodeUuid,
+                            actionIndex,
+                            mouseX,
+                            mouseY,
+                            actionHeight
+                        },
+                        bubbles: false
+                    }));
+                }
+                this.requestUpdate();
+                return;
+            }
+        }
+        // Not over a valid target node, clear any previous target's placeholder
+        if (this.previousActionDragTargetNodeUuid) {
+            const previousElement = this.querySelector(`temba-flow-node[data-node-uuid="${this.previousActionDragTargetNodeUuid}"]`);
+            if (previousElement) {
+                previousElement.dispatchEvent(new CustomEvent('action-drag-leave', {
+                    detail: {},
+                    bubbles: false
+                }));
+            }
+            this.previousActionDragTargetNodeUuid = null;
+        }
+        this.actionDragTargetNodeUuid = null;
+        // Tell source node to hide ghost (we're not over a valid target)
+        const sourceElement = this.querySelector(`temba-flow-node[data-node-uuid="${nodeUuid}"]`);
+        if (sourceElement) {
+            sourceElement.dispatchEvent(new CustomEvent('action-hide-ghost', {
+                detail: {},
+                bubbles: false
+            }));
+        }
+        // Don't snap to grid for preview - let it follow cursor smoothly
+        const position = this.calculateCanvasDropPosition(mouseX, mouseY, false);
+        this.canvasDropPreview = {
+            action,
+            nodeUuid,
+            actionIndex,
+            position,
+            actionHeight
+        };
+        // Force re-render to update preview position
+        this.requestUpdate();
+    }
+    handleActionDragInternal(_event) {
+        // Clear any previous target's placeholder when returning to internal drag
+        if (this.previousActionDragTargetNodeUuid) {
+            const previousElement = this.querySelector(`temba-flow-node[data-node-uuid="${this.previousActionDragTargetNodeUuid}"]`);
+            if (previousElement) {
+                previousElement.dispatchEvent(new CustomEvent('action-drag-leave', {
+                    detail: {},
+                    bubbles: false
+                }));
+            }
+            this.previousActionDragTargetNodeUuid = null;
+        }
+        this.canvasDropPreview = null;
+        this.actionDragTargetNodeUuid = null;
+    }
+    handleActionDropExternal(event) {
+        var _b, _c, _d;
+        const { action, nodeUuid, actionIndex, mouseX, mouseY } = event.detail;
+        // Check if we're dropping on an existing execute_actions node
+        const targetNodeUuid = this.actionDragTargetNodeUuid;
+        if (targetNodeUuid && targetNodeUuid !== nodeUuid) {
+            // Dropping on another node - notify the target node to handle the drop
+            const targetElement = this.querySelector(`temba-flow-node[data-node-uuid="${targetNodeUuid}"]`);
+            if (targetElement) {
+                targetElement.dispatchEvent(new CustomEvent('action-drop', {
+                    detail: {
+                        action,
+                        sourceNodeUuid: nodeUuid,
+                        actionIndex,
+                        mouseX,
+                        mouseY
+                    },
+                    bubbles: false
+                }));
+            }
+            // Clear state
+            this.canvasDropPreview = null;
+            this.actionDragTargetNodeUuid = null;
+            return;
+        }
+        // Not dropping on another node, create a new one on canvas
+        // Snap to grid for the final drop position
+        const position = this.calculateCanvasDropPosition(mouseX, mouseY, true);
+        // remove the action from the original node
+        const originalNode = this.definition.nodes.find((n) => n.uuid === nodeUuid);
+        if (!originalNode)
+            return;
+        const updatedActions = originalNode.actions.filter((_a, idx) => idx !== actionIndex);
+        // if no actions remain, delete the node
+        if (updatedActions.length === 0) {
+            (_b = getStore()) === null || _b === void 0 ? void 0 : _b.getState().removeNodes([nodeUuid]);
+        }
+        else {
+            // update the node
+            const updatedNode = { ...originalNode, actions: updatedActions };
+            (_c = getStore()) === null || _c === void 0 ? void 0 : _c.getState().updateNode(nodeUuid, updatedNode);
+        }
+        // create a new execute_actions node with the dropped action
+        const newNode = {
+            uuid: generateUUID(),
+            actions: [action],
+            exits: [
+                {
+                    uuid: generateUUID(),
+                    destination_uuid: null
+                }
+            ]
+        };
+        const newNodeUI = {
+            position,
+            type: 'execute_actions',
+            config: {}
+        };
+        // add the new node
+        (_d = getStore()) === null || _d === void 0 ? void 0 : _d.getState().addNode(newNode, newNodeUI);
+        // clear the preview
+        this.canvasDropPreview = null;
+        this.actionDragTargetNodeUuid = null;
+        // repaint connections
+        if (this.plumber) {
+            requestAnimationFrame(() => {
+                this.plumber.repaintEverything();
+            });
+        }
+    }
+    getLocalizationLanguages() {
+        if (!this.definition) {
+            return [];
+        }
+        const baseLanguage = this.definition.language;
+        return this.getAvailableLanguages().filter((lang) => lang.code !== baseLanguage);
+    }
+    getLocalizationProgress(languageCode) {
+        if (!this.definition ||
+            !languageCode ||
+            languageCode === this.definition.language) {
+            return { total: 0, localized: 0 };
+        }
+        const bundles = this.buildTranslationBundles(this.translationFilters.categories, languageCode);
+        return this.getTranslationCounts(bundles);
+    }
+    getLanguageLocalization(languageCode) {
+        var _b;
+        if (!((_b = this.definition) === null || _b === void 0 ? void 0 : _b.localization)) {
+            return {};
+        }
+        return this.definition.localization[languageCode] || {};
+    }
+    buildTranslationBundles(includeCategories, languageCode = this.languageCode) {
+        if (!this.definition ||
+            !languageCode ||
+            languageCode === this.definition.language) {
+            return [];
+        }
+        const languageLocalization = this.getLanguageLocalization(languageCode);
+        const bundles = [];
+        this.definition.nodes.forEach((node) => {
+            var _b, _c, _d, _e;
+            node.actions.forEach((action) => {
+                const config = ACTION_CONFIG[action.type];
+                if (!(config === null || config === void 0 ? void 0 : config.localizable) || config.localizable.length === 0) {
+                    return;
+                }
+                // For send_msg actions, only count 'text' for progress tracking
+                // (quick_replies and attachments are still localizable but don't count toward progress)
+                const localizableKeys = action.type === 'send_msg'
+                    ? config.localizable.filter((key) => key === 'text')
+                    : config.localizable;
+                const translations = this.findTranslations('property', action.uuid, localizableKeys, action, languageLocalization);
+                if (translations.length > 0) {
+                    bundles.push({
+                        nodeUuid: node.uuid,
+                        actionUuid: action.uuid,
+                        translations
+                    });
+                }
+            });
+            if (!includeCategories) {
+                return;
+            }
+            const nodeUI = (_c = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c[node.uuid];
+            const nodeType = nodeUI === null || nodeUI === void 0 ? void 0 : nodeUI.type;
+            if (!nodeType) {
+                return;
+            }
+            const nodeConfig = NODE_CONFIG[nodeType];
+            if ((nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.localizable) === 'categories' &&
+                ((_e = (_d = node.router) === null || _d === void 0 ? void 0 : _d.categories) === null || _e === void 0 ? void 0 : _e.length)) {
+                const categoryTranslations = node.router.categories.flatMap((category) => this.findTranslations('category', category.uuid, ['name'], category, languageLocalization));
+                if (categoryTranslations.length > 0) {
+                    bundles.push({
+                        nodeUuid: node.uuid,
+                        translations: categoryTranslations
+                    });
+                }
+            }
+        });
+        return bundles;
+    }
+    findTranslations(type, uuid, localizeableKeys, source, localization) {
+        const translations = [];
+        localizeableKeys.forEach((attribute) => {
+            if (attribute === 'quick_replies') {
+                return;
+            }
+            const pathSegments = attribute.split('.');
+            let from = source;
+            let to = [];
+            while (pathSegments.length > 0 && from) {
+                if (from.uuid) {
+                    to = localization[from.uuid];
+                }
+                const path = pathSegments.shift();
+                if (!path) {
+                    break;
+                }
+                if (to) {
+                    to = to[path];
+                }
+                from = from[path];
+            }
+            if (!from) {
+                return;
+            }
+            const fromValue = this.formatTranslationValue(from);
+            if (!fromValue) {
+                return;
+            }
+            const toValue = to ? this.formatTranslationValue(to) : null;
+            translations.push({
+                uuid,
+                type,
+                attribute,
+                from: fromValue,
+                to: toValue
+            });
+        });
+        return translations;
+    }
+    formatTranslationValue(value) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        if (Array.isArray(value)) {
+            const normalized = value
+                .map((entry) => this.formatTranslationValue(entry))
+                .filter((entry) => !!entry);
+            return normalized.length > 0 ? normalized.join(', ') : null;
+        }
+        if (typeof value === 'object') {
+            if ('name' in value && value.name) {
+                return String(value.name);
+            }
+            if ('arguments' in value && Array.isArray(value.arguments)) {
+                return value.arguments.join(' ');
+            }
+            return null;
+        }
+        if (typeof value === 'number') {
+            return value.toString();
+        }
+        if (typeof value === 'string') {
+            const trimmed = value.trim();
+            return trimmed.length > 0 ? trimmed : null;
+        }
+        return null;
+    }
+    getTranslationCounts(bundles) {
+        return bundles.reduce((counts, bundle) => {
+            bundle.translations.forEach((translation) => {
+                counts.total += 1;
+                if (translation.to && translation.to.trim().length > 0) {
+                    counts.localized += 1;
+                }
+            });
+            return counts;
+        }, { total: 0, localized: 0 });
+    }
+    handleLocalizationTabClick() {
+        const languages = this.getLocalizationLanguages();
+        if (!languages.length) {
+            return;
+        }
+        this.localizationWindowHidden = false;
+        const alreadySelected = languages.some((lang) => lang.code === this.languageCode);
+        if (!alreadySelected) {
+            this.handleLanguageChange(languages[0].code);
+        }
+    }
+    handleLocalizationLanguageSelect(languageCode) {
+        if (languageCode === this.languageCode) {
+            return;
+        }
+        this.handleLanguageChange(languageCode);
+    }
+    handleLocalizationLanguageSelectChange(event) {
+        var _b, _c;
+        const select = event.target;
+        const nextValue = (_c = (_b = select === null || select === void 0 ? void 0 : select.values) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.value;
+        if (nextValue) {
+            this.handleLocalizationLanguageSelect(nextValue);
+        }
+    }
+    handleLocalizationWindowClosed() {
+        var _b;
+        this.localizationWindowHidden = true;
+        const baseLanguage = (_b = this.definition) === null || _b === void 0 ? void 0 : _b.language;
+        if (baseLanguage && this.languageCode !== baseLanguage) {
+            this.handleLanguageChange(baseLanguage);
+        }
+    }
+    toggleTranslationSettings() {
+        this.translationSettingsExpanded = !this.translationSettingsExpanded;
+    }
+    handleLocalizationProgressToggleClick(event) {
+        const target = event.target;
+        if (target.closest('.translation-settings-toggle')) {
+            return;
+        }
+        this.toggleTranslationSettings();
+    }
+    handleLocalizationProgressToggleKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.toggleTranslationSettings();
+        }
+    }
+    handleIncludeCategoriesChange(event) {
+        var _b, _c;
+        const checkbox = event.target;
+        const categories = (_b = checkbox === null || checkbox === void 0 ? void 0 : checkbox.checked) !== null && _b !== void 0 ? _b : false;
+        this.translationFilters = { categories };
+        (_c = getStore()) === null || _c === void 0 ? void 0 : _c.getState().setTranslationFilters({ categories });
+        this.requestUpdate();
+    }
+    async handleAutoTranslateClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.autoTranslating) {
+            this.autoTranslating = false;
+            return;
+        }
+        this.autoTranslateDialogOpen = true;
+    }
+    handleAutoTranslateDialogButton(event) {
+        var _b;
+        const button = (_b = event.detail) === null || _b === void 0 ? void 0 : _b.button;
+        if (!button) {
+            return;
+        }
+        if (button.name === 'Translate') {
+            if (!this.autoTranslateModel) {
+                return;
+            }
+            this.autoTranslateDialogOpen = false;
+            this.autoTranslateError = null;
+            this.autoTranslating = true;
+            this.runAutoTranslation().catch((error) => {
+                console.error('Auto translation failed', error);
+                this.autoTranslateError = 'Auto translation failed. Please try again.';
+                this.autoTranslating = false;
+            });
+        }
+        else if (button.name === 'Cancel' || button.name === 'Close') {
+            this.autoTranslateDialogOpen = false;
+        }
+    }
+    handleAutoTranslateModelChange(event) {
+        var _b;
+        const select = event.target;
+        const nextModel = ((_b = select === null || select === void 0 ? void 0 : select.values) === null || _b === void 0 ? void 0 : _b[0]) || null;
+        this.autoTranslateModel = nextModel;
+    }
+    shouldTranslateValue(text) {
+        if (!text) {
+            return false;
+        }
+        const trimmed = text.trim();
+        if (trimmed.length <= 1) {
+            return false;
+        }
+        if (/^\d+$/.test(trimmed)) {
+            return false;
+        }
+        return true;
+    }
+    async requestAutoTranslation(text) {
+        var _b, _c;
+        if (!this.autoTranslateModel || !this.definition) {
+            return null;
+        }
+        const payload = {
+            text,
+            lang: {
+                from: this.definition.language,
+                to: this.languageCode
+            }
+        };
+        const response = await postJSON(`/llm/translate/${this.autoTranslateModel.uuid}/`, payload);
+        if ((response === null || response === void 0 ? void 0 : response.status) === 200) {
+            const result = ((_b = response.json) === null || _b === void 0 ? void 0 : _b.result) || ((_c = response.json) === null || _c === void 0 ? void 0 : _c.text);
+            return result ? String(result) : null;
+        }
+        throw new Error('Auto translation request failed');
+    }
+    applyLocalizationUpdates(updates, autoTranslated = false) {
+        if (!updates.length || !this.definition) {
+            return;
+        }
+        const store = getStore();
+        if (!store) {
+            return;
+        }
+        updates.forEach(({ uuid, translations }) => {
+            var _b, _c;
+            const normalized = Object.entries(translations).reduce((acc, [key, value]) => {
+                if (!value) {
+                    return acc;
+                }
+                acc[key] = Array.isArray(value) ? value : [value];
+                return acc;
+            }, {});
+            const existing = ((_c = (_b = this.definition.localization) === null || _b === void 0 ? void 0 : _b[this.languageCode]) === null || _c === void 0 ? void 0 : _c[uuid]) || {};
+            const merged = { ...existing, ...normalized };
+            store.getState().updateLocalization(this.languageCode, uuid, merged);
+            if (autoTranslated) {
+                zustand
+                    .getState()
+                    .markAutoTranslated(this.languageCode, uuid, Object.keys(translations));
+            }
+        });
+    }
+    async runAutoTranslation() {
+        if (!this.definition ||
+            this.languageCode === this.definition.language ||
+            !this.autoTranslateModel) {
+            this.autoTranslating = false;
+            return;
+        }
+        const bundles = this.buildTranslationBundles(this.translationFilters.categories);
+        for (const bundle of bundles) {
+            if (!this.autoTranslating) {
+                break;
+            }
+            const untranslated = bundle.translations.filter((translation) => !translation.to || translation.to.trim().length === 0);
+            if (untranslated.length === 0) {
+                continue;
+            }
+            const updates = [];
+            for (const translation of untranslated) {
+                if (!this.autoTranslating) {
+                    break;
+                }
+                if (!this.shouldTranslateValue(translation.from)) {
+                    continue;
+                }
+                const cached = this.translationCache.get(translation.from);
+                if (cached) {
+                    updates.push({
+                        uuid: translation.uuid,
+                        translations: { [translation.attribute]: cached }
+                    });
+                    continue;
+                }
+                try {
+                    const result = await this.requestAutoTranslation(translation.from);
+                    if (result) {
+                        this.translationCache.set(translation.from, result);
+                        updates.push({
+                            uuid: translation.uuid,
+                            translations: { [translation.attribute]: result }
+                        });
+                    }
+                }
+                catch (error) {
+                    console.error('Auto translation request failed', error);
+                    this.autoTranslateError =
+                        'Auto translation failed. Please try again.';
+                    this.autoTranslating = false;
+                    break;
+                }
+            }
+            if (updates.length > 0) {
+                this.applyLocalizationUpdates(updates, true);
+            }
+            if (!this.autoTranslating) {
+                break;
+            }
+        }
+        this.autoTranslating = false;
+    }
+    renderLocalizationWindow() {
+        var _b, _c, _d;
+        const languages = this.getLocalizationLanguages();
+        if (!languages.length) {
+            return html ``;
+        }
+        const baseLanguage = (_b = this.definition) === null || _b === void 0 ? void 0 : _b.language;
+        const availableLanguages = this.getAvailableLanguages();
+        const baseName = ((_c = availableLanguages.find((lang) => lang.code === baseLanguage)) === null || _c === void 0 ? void 0 : _c.name) ||
+            'Base Language';
+        const activeLanguageCode = languages.some((lang) => lang.code === this.languageCode)
+            ? this.languageCode
+            : (_d = languages[0]) === null || _d === void 0 ? void 0 : _d.code;
+        const activeLanguage = activeLanguageCode
+            ? languages.find((lang) => lang.code === activeLanguageCode)
+            : null;
+        const progress = this.getLocalizationProgress(activeLanguageCode || '');
+        const includeCategories = this.translationFilters.categories;
+        const settingsPanelId = 'translation-settings-panel';
+        const remainingTranslations = Math.max(progress.total - progress.localized, 0);
+        const hasTranslations = progress.total > 0;
+        const hasPendingTranslations = remainingTranslations > 0;
+        const autoTranslateButtonLabel = this.autoTranslating
+            ? 'Stop Auto Translate'
+            : 'Auto Translate';
+        const autoTranslateButtonDisabled = !this.autoTranslating && !hasTranslations;
+        return html `
+      <temba-floating-window
+        id="localization-window"
+        header="Translations"
+        .width=${360}
+        .maxHeight=${600}
+        .top=${20}
+        color="#6b7280"
+        .hidden=${this.localizationWindowHidden}
+        @temba-dialog-hidden=${this.handleLocalizationWindowClosed}
+      >
+        <div class="localization-window-content">
+          <div class="localization-header">
+            Translate from <strong>${baseName}</strong> to the languages below.
+            Closing this window returns you to editing in ${baseName}.
+          </div>
+          <div class="localization-language-row">
+            <temba-select
+              flavor="small"
+              class="localization-language-select"
+              .values=${activeLanguage
+            ? [{ name: activeLanguage.name, value: activeLanguage.code }]
+            : []}
+              @change=${this.handleLocalizationLanguageSelectChange}
+            >
+              ${languages.map((lang) => html `<temba-option
+                  value="${lang.code}"
+                  name="${lang.name}"
+                ></temba-option>`)}
+            </temba-select>
+            <button
+              class="auto-translate-button"
+              type="button"
+              ?disabled=${autoTranslateButtonDisabled}
+              @click=${this.handleAutoTranslateClick}
+            >
+              ${autoTranslateButtonLabel}
+            </button>
+          </div>
+          <div class="localization-progress">
+            <div class="localization-progress-summary">
+              ${this.autoTranslating
+            ? html `<temba-loading units="3" size="8"></temba-loading>
+                    <span>Auto translating remaining text…</span>`
+            : !hasTranslations
+                ? html `<span>
+                    Add content or enable more options to start translating.
+                  </span>`
+                : hasPendingTranslations
+                    ? html `<span>
+                    ${progress.localized} of ${progress.total} items translated
+                  </span>`
+                    : html `<span>All items are translated.</span>`}
+            </div>
+            ${this.autoTranslateError
+            ? html `<div class="auto-translate-error">
+                  ${this.autoTranslateError}
+                </div>`
+            : ''}
+            <div class="localization-progress-bar-row">
+              <div
+                class="localization-progress-trigger"
+                role="button"
+                tabindex="0"
+                aria-expanded="${this.translationSettingsExpanded}"
+                aria-controls="${settingsPanelId}"
+                @click=${this.handleLocalizationProgressToggleClick}
+                @keydown=${this.handleLocalizationProgressToggleKeydown}
+              >
+                <temba-progress
+                  .current=${progress.localized}
+                  .total=${Math.max(progress.total, 1)}
+                  .animated=${false}
+                ></temba-progress>
+              </div>
+              <button
+                class="translation-settings-toggle"
+                type="button"
+                @click=${this.toggleTranslationSettings}
+                aria-expanded="${this.translationSettingsExpanded}"
+                aria-controls="${settingsPanelId}"
+              >
+                <span
+                  class="translation-settings-arrow ${this
+            .translationSettingsExpanded
+            ? 'expanded'
+            : ''}"
+                ></span>
+              </button>
+            </div>
+            ${this.translationSettingsExpanded
+            ? html `<div id="${settingsPanelId}" class="translation-settings">
+                  <div class="translation-settings-row">
+                    <temba-checkbox
+                      name="include-categories"
+                      label="Include categories"
+                      ?checked=${includeCategories}
+                      style="--checkbox-padding:5px; border-radius:var(--curvature);"
+                      @change=${this.handleIncludeCategoriesChange}
+                    ></temba-checkbox>
+                  </div>
+                </div>`
+            : ''}
+          </div>
+        </div>
+      </temba-floating-window>
+    `;
+    }
+    renderAutoTranslateDialog() {
+        if (!this.autoTranslateDialogOpen) {
+            return html ``;
+        }
+        const selectedModel = this.autoTranslateModel
+            ? [this.autoTranslateModel]
+            : [];
+        const disableTranslate = !this.autoTranslateModel;
+        return html `
+      <temba-dialog
+        header="Auto translate"
+        .open=${this.autoTranslateDialogOpen}
+        primaryButtonName="Translate"
+        cancelButtonName="Cancel"
+        size="small"
+        .disabled=${disableTranslate}
+        @temba-button-clicked=${this.handleAutoTranslateDialogButton}
+      >
+        <div class="auto-translate-dialog-content">
+          <p>
+            We'll send any untranslated text to the selected AI model and save
+            the responses automatically.
+          </p>
+          <div class="auto-translate-models">
+            <temba-select
+              class="auto-translate-model-select"
+              endpoint="${AUTO_TRANSLATE_MODELS_ENDPOINT}"
+              .valueKey=${'uuid'}
+              .values=${selectedModel}
+              ?searchable=${true}
+              ?clearable=${true}
+              placeholder="Select an AI model"
+              @change=${this.handleAutoTranslateModelChange}
+            ></temba-select>
+          </div>
+          <p>Only text without translations will be sent.</p>
+          ${this.autoTranslateError
+            ? html `<div class="auto-translate-error">
+                ${this.autoTranslateError}
+              </div>`
+            : ''}
+        </div>
+      </temba-dialog>
+    `;
+    }
+    renderLocalizationTab() {
+        const languages = this.getLocalizationLanguages();
+        if (!languages.length) {
+            return html ``;
+        }
+        return html `
+      <temba-floating-tab
+        id="localization-tab"
+        icon="language"
+        label="Translate Flow"
+        color="#6b7280"
+        .hidden=${!this.localizationWindowHidden}
+        @temba-button-clicked=${this.handleLocalizationTabClick}
+      ></temba-floating-tab>
+    `;
+    }
     render() {
-        var _a, _b;
+        var _b, _c;
         // we have to embed our own style since we are in light DOM
         const style = html `<style>
       ${unsafeCSS(Editor.styles.cssText)}
       ${unsafeCSS(CanvasNode.styles.cssText)}
     </style>`;
-        const stickies = ((_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a._ui) === null || _b === void 0 ? void 0 : _b.stickies) || {};
-        return html `${style}
+        const stickies = ((_c = (_b = this.definition) === null || _b === void 0 ? void 0 : _b._ui) === null || _c === void 0 ? void 0 : _c.stickies) || {};
+        return html `${style} ${this.renderLocalizationWindow()}
+      ${this.renderAutoTranslateDialog()}
       <div id="editor">
         <div
           id="grid"
@@ -853,13 +2147,13 @@ export class Editor extends RapidElement {
           <div id="canvas">
             ${this.definition
             ? repeat(this.definition.nodes, (node) => node.uuid, (node) => {
-                var _a, _b, _c;
-                const position = ((_b = (_a = this.definition._ui) === null || _a === void 0 ? void 0 : _a.nodes[node.uuid]) === null || _b === void 0 ? void 0 : _b.position) || {
+                var _b, _c, _d;
+                const position = ((_c = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.nodes[node.uuid]) === null || _c === void 0 ? void 0 : _c.position) || {
                     left: 0,
                     top: 0
                 };
                 const dragging = this.isDragging &&
-                    ((_c = this.currentDragItem) === null || _c === void 0 ? void 0 : _c.uuid) === node.uuid;
+                    ((_d = this.currentDragItem) === null || _d === void 0 ? void 0 : _d.uuid) === node.uuid;
                 const selected = this.selectedItems.has(node.uuid);
                 return html `<temba-flow-node
                       class="draggable ${dragging ? 'dragging' : ''} ${selected
@@ -867,6 +2161,7 @@ export class Editor extends RapidElement {
                     : ''}"
                       @mousedown=${this.handleMouseDown.bind(this)}
                       uuid=${node.uuid}
+                      data-node-uuid=${node.uuid}
                       style="left:${position.left}px; top:${position.top}px"
                       .plumber=${this.plumber}
                       .node=${node}
@@ -878,9 +2173,9 @@ export class Editor extends RapidElement {
             })
             : html `<temba-loading></temba-loading>`}
             ${repeat(Object.entries(stickies), ([uuid]) => uuid, ([uuid, sticky]) => {
-            var _a;
+            var _b;
             const position = sticky.position || { left: 0, top: 0 };
-            const dragging = this.isDragging && ((_a = this.currentDragItem) === null || _a === void 0 ? void 0 : _a.uuid) === uuid;
+            const dragging = this.isDragging && ((_b = this.currentDragItem) === null || _b === void 0 ? void 0 : _b.uuid) === uuid;
             const selected = this.selectedItems.has(uuid);
             return html `<temba-sticky-note
                   class="draggable ${dragging ? 'dragging' : ''} ${selected
@@ -895,7 +2190,7 @@ export class Editor extends RapidElement {
                   .selected=${selected}
                 ></temba-sticky-note>`;
         })}
-            ${this.renderSelectionBox()}
+            ${this.renderSelectionBox()} ${this.renderCanvasDropPreview()}
           </div>
         </div>
       </div>
@@ -905,11 +2200,18 @@ export class Editor extends RapidElement {
             .node=${this.editingNode}
             .nodeUI=${this.editingNodeUI}
             .action=${this.editingAction}
-            @temba-node-saved=${(e) => this.handleNodeSaved(e.detail.node)}
+            @temba-node-saved=${(e) => this.handleNodeSaved(e.detail.node, e.detail.uiConfig)}
             @temba-action-saved=${(e) => this.handleActionSaved(e.detail.action)}
             @temba-node-edit-cancelled=${this.handleNodeEditCanceled}
           ></temba-node-editor>`
-            : ''} `;
+            : ''}
+
+      <temba-canvas-menu></temba-canvas-menu>
+      <temba-node-type-selector
+        .flowType=${this.flowType}
+        .features=${this.features}
+      ></temba-node-type-selector>
+      ${this.renderLocalizationTab()} `;
     }
 }
 __decorate([
@@ -918,6 +2220,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Editor.prototype, "version", void 0);
+__decorate([
+    property({ type: String })
+], Editor.prototype, "flowType", void 0);
+__decorate([
+    property({ type: Array })
+], Editor.prototype, "features", void 0);
 __decorate([
     fromStore(zustand, (state) => state.flowDefinition)
 ], Editor.prototype, "definition", void 0);
@@ -927,6 +2235,12 @@ __decorate([
 __decorate([
     fromStore(zustand, (state) => state.dirtyDate)
 ], Editor.prototype, "dirtyDate", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.languageCode)
+], Editor.prototype, "languageCode", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.isTranslating)
+], Editor.prototype, "isTranslating", void 0);
 __decorate([
     state()
 ], Editor.prototype, "isDragging", void 0);
@@ -954,6 +2268,27 @@ __decorate([
 __decorate([
     state()
 ], Editor.prototype, "isValidTarget", void 0);
+__decorate([
+    state()
+], Editor.prototype, "localizationWindowHidden", void 0);
+__decorate([
+    state()
+], Editor.prototype, "translationFilters", void 0);
+__decorate([
+    state()
+], Editor.prototype, "translationSettingsExpanded", void 0);
+__decorate([
+    state()
+], Editor.prototype, "autoTranslateDialogOpen", void 0);
+__decorate([
+    state()
+], Editor.prototype, "autoTranslating", void 0);
+__decorate([
+    state()
+], Editor.prototype, "autoTranslateModel", void 0);
+__decorate([
+    state()
+], Editor.prototype, "autoTranslateError", void 0);
 __decorate([
     state()
 ], Editor.prototype, "editingNode", void 0);
@@ -963,4 +2298,19 @@ __decorate([
 __decorate([
     state()
 ], Editor.prototype, "editingAction", void 0);
+__decorate([
+    state()
+], Editor.prototype, "isCreatingNewNode", void 0);
+__decorate([
+    state()
+], Editor.prototype, "pendingNodePosition", void 0);
+__decorate([
+    state()
+], Editor.prototype, "canvasDropPreview", void 0);
+__decorate([
+    state()
+], Editor.prototype, "addActionToNodeUuid", void 0);
+__decorate([
+    state()
+], Editor.prototype, "actionDragTargetNodeUuid", void 0);
 //# sourceMappingURL=Editor.js.map