@nyaruka/temba-components 0.156.3 → 0.156.5

package/src/flow/Editor.ts

@@ -31,6 +31,7 @@ import {
 import { TEMBA_COMPONENTS_VERSION } from '../version';
 import {
   formatIssueMessage,
+  getLanguageDisplayName,
   getNodeBounds,
   calculateReflowPositions,
   isRightClick,
@@ -70,8 +71,8 @@ import { Dialog } from '../layout/Dialog';
 import { CanvasMenu, CanvasMenuSelection } from './CanvasMenu';
 import { NodeTypeSelector, NodeTypeSelection } from './NodeTypeSelector';
 import { FloatingWindow } from '../layout/FloatingWindow';
-import { Icon } from '../Icons';
 import { FlowSearch, SearchResult } from './FlowSearch';
+import { PRIMARY_LANGUAGE_OPTION_VALUE } from './EditorToolbar';
 
 export function findNodeForExit(
   definition: FlowDefinition,
@@ -103,8 +104,9 @@ export interface SelectionBox {
 }
 
 const DRAG_THRESHOLD = 5;
-const AUTO_SCROLL_EDGE_ZONE = 100;
+const AUTO_SCROLL_EDGE_ZONE = 150;
 const AUTO_SCROLL_MAX_SPEED = 15;
+const AUTO_SCROLL_BEYOND_MULTIPLIER = 5;
 
 type TranslationType = 'property' | 'category';
 
@@ -134,7 +136,15 @@ interface LocalizationUpdate {
 }
 
 const AUTO_TRANSLATE_MODELS_ENDPOINT = '/api/internal/llms.json';
-const PRIMARY_LANGUAGE_OPTION_VALUE = '__primary_language__';
+export type ToolbarAction =
+  | { action: 'view-change'; view: 'flow' | 'table' }
+  | { action: 'zoom-in' }
+  | { action: 'zoom-out' }
+  | { action: 'zoom-to-fit' }
+  | { action: 'zoom-to-full' }
+  | { action: 'revisions' }
+  | { action: 'search' }
+  | { action: 'language-change'; isPrimary?: boolean; languageCode?: string };
 const EMPTY_FLOW_ISSUES: FlowIssue[] = [];
 
 // How long the pending-changes auto-save countdown runs (in ms).
@@ -268,6 +278,13 @@ export class Editor extends RapidElement {
   private currentDragIsCopy = false;
   private dragStartPos = { x: 0, y: 0 };
 
+  // Mid-drag shift toggle: remember originals so we can switch between move/copy
+  private originalDragItem: DraggableItem | null = null;
+  private originalSelectedItems: Set<string> | null = null;
+
+  // Drag hint tooltip
+  private dragHintTimer: ReturnType<typeof setTimeout> | null = null;
+
   // Public getter for drag state
   public get dragging(): boolean {
     return this.isDragging;
@@ -458,9 +475,6 @@ export class Editor extends RapidElement {
   @property({ type: Boolean, reflect: true, attribute: 'message-view' })
   showMessageTable = false;
 
-  @state()
-  private showLanguageOptions = false;
-
   @state()
   private isCreatingNewNode = false;
 
@@ -486,6 +500,19 @@ export class Editor extends RapidElement {
   // Track previous target node to clear placeholder when moving between nodes
   private previousActionDragTargetNodeUuid: string | null = null;
 
+  // Track action external drag state for shift-copy support
+  private isActionExternalDrag = false;
+  private actionDragIsCopy = false;
+  private actionDragLastDetail: {
+    action: Action;
+    nodeUuid: string;
+    actionIndex: number;
+    mouseX: number;
+    mouseY: number;
+    actionHeight: number;
+    isLastAction: boolean;
+  } | null = null;
+
   // Connection placeholder state for dropping connections on empty canvas
   @state()
   private connectionPlaceholder: {
@@ -506,16 +533,8 @@ export class Editor extends RapidElement {
   private getAvailableLanguages(): Array<{ code: string; name: string }> {
     // Use languages from workspace if available
     if (this.workspace?.languages && this.workspace.languages.length > 0) {
-      const languageNames = new Intl.DisplayNames(['en'], { type: 'language' });
       return this.workspace.languages
-        .map((code) => {
-          try {
-            const name = languageNames.of(code);
-            return name ? { code, name } : { code, name: code };
-          } catch {
-            return { code, name: code };
-          }
-        })
+        .map((code) => ({ code, name: getLanguageDisplayName(code) }))
         .filter((lang) => lang.code && lang.name);
     }
 
@@ -539,6 +558,8 @@ export class Editor extends RapidElement {
   private boundMouseUp = this.handleMouseUp.bind(this);
   private boundGlobalMouseDown = this.handleGlobalMouseDown.bind(this);
   private boundKeyDown = this.handleKeyDown.bind(this);
+  private boundKeyUp = this.handleKeyUp.bind(this);
+  private boundWindowBlur = this.handleWindowBlur.bind(this);
   private boundCanvasContextMenu = this.handleCanvasContextMenu.bind(this);
   private boundWheel = this.handleWheel.bind(this);
   private boundTouchMove = this.handleTouchMove.bind(this);
@@ -557,198 +578,6 @@ export class Editor extends RapidElement {
         min-height: 0;
       }
 
-      .editor-toolbar {
-        --toolbar-control-height: 28px;
-        --toolbar-translation-control-height: 28px;
-        display: flex;
-        align-items: center;
-        padding: 6px 12px;
-        background: #fff;
-        border-bottom: 1px solid #e8e8e8;
-        flex-shrink: 0;
-        gap: 8px;
-      }
-
-      .toolbar-left {
-        display: flex;
-        align-items: center;
-        gap: 2px;
-      }
-
-      .toolbar-right {
-        display: flex;
-        align-items: center;
-        gap: 2px;
-        margin-left: auto;
-      }
-
-      .toolbar-btn {
-        width: var(--toolbar-control-height);
-        height: var(--toolbar-control-height);
-        border: none;
-        background: transparent;
-        border-radius: var(--curvature);
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0;
-        color: #888;
-        font-size: 16px;
-        line-height: 1;
-        outline: none;
-      }
-
-      .toolbar-btn:focus {
-        outline: none;
-      }
-
-      .toolbar-btn:focus-visible {
-        outline: 2px solid #0064c8;
-        outline-offset: 2px;
-      }
-
-      .toolbar-btn:hover {
-        background: rgba(0, 0, 0, 0.06);
-        color: #555;
-      }
-
-      .toolbar-btn:disabled {
-        opacity: 0.3;
-        cursor: default;
-        background: transparent;
-      }
-
-      .toolbar-btn.active {
-        background: rgba(0, 100, 200, 0.1);
-        color: #0064c8;
-      }
-
-      .toolbar-btn.active:hover {
-        background: rgba(0, 100, 200, 0.15);
-      }
-
-      .toolbar-tip {
-        display: flex;
-        align-items: center;
-      }
-
-      .toolbar-divider {
-        width: 1px;
-        height: 16px;
-        background: #e0e0e0;
-        margin: 0 4px;
-      }
-
-      .toolbar-group {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        height: var(--toolbar-control-height);
-        box-sizing: border-box;
-        padding: 0 3px;
-        border: 1px solid #d7dce2;
-        border-radius: calc(var(--curvature) + 2px);
-        background: #f7f9fb;
-      }
-
-      .toolbar-group-divider {
-        width: 1px;
-        height: 18px;
-        background: #d7dce2;
-        margin: 0 2px;
-      }
-
-      .toolbar-language {
-        position: relative;
-        display: flex;
-        align-items: center;
-      }
-
-      .toolbar-language-group {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        margin-left: 2px;
-      }
-
-      .toolbar-zoom-group {
-        gap: 2px;
-      }
-
-      .language-pill {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        background: #e9eef4;
-        color: #0064c8;
-        height: var(--toolbar-translation-control-height);
-        padding: 0 8px;
-        border-radius: var(--curvature);
-        box-sizing: border-box;
-        font-size: 13px;
-        font-weight: 400;
-        white-space: nowrap;
-        cursor: pointer;
-        --icon-color: #0064c8;
-        --icon-size: 16px;
-        border: none;
-        outline: none;
-      }
-
-      .language-pill:hover {
-        filter: brightness(1.04);
-      }
-
-      .language-pill.primary {
-        background: #fff;
-        border: 1px solid #d7dce2;
-      }
-
-      .language-pill.complete {
-        background: #d4f5e0;
-        color: #1a7f37;
-        --icon-color: #1a7f37;
-      }
-
-      .language-pill-caret {
-        margin-left: 1px;
-        --icon-color: currentColor;
-        --icon-size: 12px;
-      }
-
-      .language-percent {
-        display: inline-block;
-        font-size: 12px;
-        font-weight: 700;
-        line-height: 1;
-        color: #0064c8;
-        white-space: nowrap;
-      }
-
-      .language-pill.complete .language-percent {
-        color: #1a7f37;
-      }
-
-      .toolbar-zoom-level {
-        font-size: 12px;
-        min-width: 40px;
-        text-align: center;
-        color: #555;
-        font-weight: 500;
-      }
-
-      .toolbar-translation {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-      }
-
-      .toolbar-btn.language-tool {
-        width: var(--toolbar-translation-control-height);
-        height: var(--toolbar-translation-control-height);
-      }
-
       #editor {
         overflow: scroll;
         flex: 1;
@@ -816,6 +645,11 @@ export class Editor extends RapidElement {
         transition: none !important;
       }
 
+      #canvas.shift-held {
+        --shift-held-cursor: copy;
+        cursor: copy;
+      }
+
       #canvas.viewing-revision {
         pointer-events: none;
       }
@@ -1050,6 +884,10 @@ export class Editor extends RapidElement {
         border-radius: var(--curvature);
       }
 
+      .draggable.selected.drag-copy {
+        outline: none;
+      }
+
       /* Language banner replaced by toolbar language selector */
 
       .localization-window-content {
@@ -1441,6 +1279,36 @@ export class Editor extends RapidElement {
         opacity: 0.8;
       }
 
+      .drag-hint {
+        position: absolute;
+        bottom: 40px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 100000;
+        pointer-events: none;
+        background: rgba(255, 255, 255, 0.5);
+        backdrop-filter: blur(6px);
+        color: #555;
+        font-size: 18px;
+        font-weight: 300;
+        padding: 10px 32px;
+        border-radius: 10px;
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+        white-space: nowrap;
+        display: none;
+      }
+
+      .drag-hint.visible {
+        display: block;
+        animation: drag-hint-in 0.15s ease forwards;
+      }
+
+      @keyframes drag-hint-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+
       .reflow-card {
         position: absolute;
         top: 16px;
@@ -1562,6 +1430,11 @@ export class Editor extends RapidElement {
   }
 
   private makeConnection(info) {
+    this.stopAutoScroll();
+    this.autoScrollDeltaX = 0;
+    this.autoScrollDeltaY = 0;
+    this.lastPointerPos = null;
+
     if (this.sourceId && this.targetId && this.isValidTarget) {
       // going to the same target, just put it back
       if (info.target.id === this.targetId) {
@@ -2064,6 +1937,8 @@ export class Editor extends RapidElement {
     document.removeEventListener('mouseup', this.boundMouseUp);
     document.removeEventListener('mousedown', this.boundGlobalMouseDown);
     document.removeEventListener('keydown', this.boundKeyDown);
+    document.removeEventListener('keyup', this.boundKeyUp);
+    window.removeEventListener('blur', this.boundWindowBlur);
     document.removeEventListener('touchmove', this.boundTouchMove);
     document.removeEventListener('touchend', this.boundTouchEnd);
     document.removeEventListener('touchcancel', this.boundTouchCancel);
@@ -2096,6 +1971,8 @@ export class Editor extends RapidElement {
     document.addEventListener('mouseup', this.boundMouseUp);
     document.addEventListener('mousedown', this.boundGlobalMouseDown);
     document.addEventListener('keydown', this.boundKeyDown);
+    document.addEventListener('keyup', this.boundKeyUp);
+    window.addEventListener('blur', this.boundWindowBlur);
     document.addEventListener('touchmove', this.boundTouchMove, {
       passive: false
     });
@@ -2429,7 +2306,56 @@ export class Editor extends RapidElement {
     }
   }
 
+  private showDragHint(): void {
+    if (this.isReadOnly()) return;
+    const hint = this.querySelector('#drag-hint') as HTMLElement;
+    if (!hint) return;
+    this.dragHintTimer = setTimeout(() => {
+      hint.classList.add('visible');
+      this.dragHintTimer = null;
+    }, 600);
+  }
+
+  private hideDragHint(): void {
+    if (this.dragHintTimer) {
+      clearTimeout(this.dragHintTimer);
+      this.dragHintTimer = null;
+    }
+    const hint = this.querySelector('#drag-hint') as HTMLElement;
+    if (hint) {
+      hint.classList.remove('visible');
+    }
+  }
+
   private handleKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Shift') {
+      this.querySelector('#canvas')?.classList.add('shift-held');
+
+      // Toggle to copy mode mid-drag (nodes)
+      if (this.isDragging && !this.currentDragIsCopy) {
+        this.hideDragHint();
+        this.performShiftDragCopy();
+        // Clone elements aren't in the DOM until Lit re-renders;
+        // schedule position update after the next frame.
+        requestAnimationFrame(() => {
+          this.markCopyElements();
+          this.updateDragPositions();
+        });
+      }
+
+      // Toggle to copy mode mid-drag (actions)
+      if (this.isActionExternalDrag && !this.actionDragIsCopy) {
+        this.actionDragIsCopy = true;
+        this.hideDragHint();
+        this.showActionOriginal(true);
+        // If this is a last-action drag, now show the canvas preview
+        if (this.actionDragLastDetail?.isLastAction) {
+          this.reprocessActionDrag();
+        }
+        this.requestUpdate();
+      }
+    }
+
     // Cmd/Ctrl+F opens flow search (unless a dialog is already open)
     if ((event.metaKey || event.ctrlKey) && event.key === 'f') {
       event.preventDefault();
@@ -2459,6 +2385,50 @@ export class Editor extends RapidElement {
     }
   }
 
+  private handleKeyUp(event: KeyboardEvent): void {
+    if (event.key === 'Shift') {
+      this.querySelector('#canvas')?.classList.remove('shift-held');
+
+      // Toggle back to move mode mid-drag (nodes)
+      if (this.isDragging && this.currentDragIsCopy) {
+        this.revertShiftDragCopy();
+        requestAnimationFrame(() => this.updateDragPositions());
+      }
+
+      // Toggle back to move mode mid-drag (actions)
+      if (this.isActionExternalDrag && this.actionDragIsCopy) {
+        this.actionDragIsCopy = false;
+        this.showDragHint();
+        this.showActionOriginal(false);
+        // If this is a last-action drag, hide the canvas preview again
+        if (this.actionDragLastDetail?.isLastAction) {
+          this.reprocessActionDrag();
+        }
+        this.requestUpdate();
+      }
+    }
+  }
+
+  private handleWindowBlur(): void {
+    this.querySelector('#canvas')?.classList.remove('shift-held');
+
+    // Revert copy mode if blur happens mid-drag (keyup may never fire)
+    if (this.isDragging && this.currentDragIsCopy) {
+      this.revertShiftDragCopy();
+      requestAnimationFrame(() => this.updateDragPositions());
+    }
+
+    // Revert action copy mode on blur
+    if (this.isActionExternalDrag && this.actionDragIsCopy) {
+      this.actionDragIsCopy = false;
+      this.showActionOriginal(false);
+      if (this.actionDragLastDetail?.isLastAction) {
+        this.reprocessActionDrag();
+      }
+      this.requestUpdate();
+    }
+  }
+
   // --- Flow settings cookie (LRU, max 50 flows) ---
 
   static MAX_FLOW_SETTINGS = 50;
@@ -3597,6 +3567,9 @@ export class Editor extends RapidElement {
     }
 
     if (this.plumber.connectionDragging) {
+      this.lastPointerPos = { clientX: event.clientX, clientY: event.clientY };
+      this.startAutoScroll();
+
       const targetNode = document.querySelector('temba-flow-node:hover');
 
       // Clear previous target styles
@@ -3683,9 +3656,15 @@ export class Editor extends RapidElement {
       this.isDragging = true;
       this.startAutoScroll();
 
-      if (this.shiftDragCopy) {
+      // Snapshot the original drag context before any copy occurs
+      this.originalDragItem = { ...this.currentDragItem };
+      this.originalSelectedItems = new Set(this.selectedItems);
+
+      if (this.shiftDragCopy || event.shiftKey) {
         this.performShiftDragCopy();
         this.shiftDragCopy = false;
+      } else {
+        this.showDragHint();
       }
     }
 
@@ -3696,14 +3675,14 @@ export class Editor extends RapidElement {
   }
 
   private performShiftDragCopy(): void {
-    if (!this.currentDragItem) return;
+    if (!this.originalDragItem) return;
 
-    // Determine which items to copy (same logic as itemsToMove)
+    // Always use the original items as the source for copying
     const itemsToCopy =
-      this.selectedItems.has(this.currentDragItem.uuid) &&
-      this.selectedItems.size > 1
-        ? Array.from(this.selectedItems)
-        : [this.currentDragItem.uuid];
+      this.originalSelectedItems?.has(this.originalDragItem.uuid) &&
+      (this.originalSelectedItems?.size ?? 0) > 1
+        ? Array.from(this.originalSelectedItems!)
+        : [this.originalDragItem.uuid];
 
     if (itemsToCopy.length === 0) return;
 
@@ -3719,19 +3698,44 @@ export class Editor extends RapidElement {
     }
     this.currentDragIsCopy = true;
 
+    // Snap original items back to their start positions.
+    // Set position while 'dragging' class is still applied so
+    // transitions are disabled and the move is instant.
+    for (const uuid of itemsToCopy) {
+      const element = this.querySelector(`[uuid="${uuid}"]`) as HTMLElement;
+      const type =
+        element?.tagName === 'TEMBA-FLOW-NODE' ? 'node' : 'sticky';
+      const position = this.getPosition(uuid, type);
+      if (element && position) {
+        element.style.left = `${position.left}px`;
+        element.style.top = `${position.top}px`;
+      }
+    }
+    this.plumber.revalidate(itemsToCopy);
+    // Force layout so the position is committed with transitions
+    // disabled, then remove the dragging class.
+    for (const uuid of itemsToCopy) {
+      const element = this.querySelector(`[uuid="${uuid}"]`) as HTMLElement;
+      if (element) {
+        // Reading offsetHeight forces a synchronous layout
+        void element.offsetHeight;
+        element.classList.remove('dragging');
+      }
+    }
+
     // Update drag item to reference the copy
-    const newDragUuid = uuidMapping[this.currentDragItem.uuid];
+    const newDragUuid = uuidMapping[this.originalDragItem.uuid];
     if (newDragUuid) {
       this.currentDragItem = {
-        ...this.currentDragItem,
+        ...this.originalDragItem,
         uuid: newDragUuid
       };
     }
 
     // Update selected items to reference copies
-    if (this.selectedItems.size > 1) {
+    if ((this.originalSelectedItems?.size ?? 0) > 1) {
       const newSelectedItems = new Set<string>();
-      for (const uuid of this.selectedItems) {
+      for (const uuid of this.originalSelectedItems!) {
         const newUuid = uuidMapping[uuid];
         newSelectedItems.add(newUuid || uuid);
       }
@@ -3739,6 +3743,48 @@ export class Editor extends RapidElement {
     }
   }
 
+  private markCopyElements(): void {
+    for (const uuid of this.copiedItemUuids) {
+      const el = this.querySelector(`[uuid="${uuid}"]`) as HTMLElement;
+      el?.classList.add('drag-copy');
+    }
+  }
+
+  private revertShiftDragCopy(): void {
+    if (!this.originalDragItem) return;
+
+    // Remove the cloned items
+    if (this.copiedItemUuids.length > 0) {
+      const nodeUuids = this.copiedItemUuids.filter((uuid) =>
+        this.definition.nodes.some((n) => n.uuid === uuid)
+      );
+      const stickyUuids = this.copiedItemUuids.filter(
+        (uuid) => this.definition._ui?.stickies?.[uuid]
+      );
+
+      if (nodeUuids.length > 0) {
+        getStore().getState().removeNodes(nodeUuids);
+      }
+      if (stickyUuids.length > 0) {
+        getStore().getState().removeStickyNotes(stickyUuids);
+      }
+      this.copiedItemUuids = [];
+    }
+
+    this.currentDragIsCopy = false;
+
+    // The remove calls above set dirtyDate, but we're just reverting a
+    // mid-drag copy — there's nothing to save yet.  Clear it so no
+    // revision is created while the drag is still in progress.
+    getStore().getState().setDirtyDate(null);
+
+    // Restore drag context to originals
+    this.currentDragItem = { ...this.originalDragItem };
+    if (this.originalSelectedItems) {
+      this.selectedItems = new Set(this.originalSelectedItems);
+    }
+  }
+
   private updateDragPositions(): void {
     if (!this.currentDragItem || !this.lastPointerPos) return;
 
@@ -3770,11 +3816,15 @@ export class Editor extends RapidElement {
           element.style.left = `${position.left + deltaX}px`;
           element.style.top = `${position.top + deltaY}px`;
           element.classList.add('dragging');
+          if (this.currentDragIsCopy) {
+            element.classList.add('drag-copy');
+          }
         }
       }
     });
 
     this.plumber.revalidate(itemsToMove);
+
   }
 
   private startAutoScroll(): void {
@@ -3784,7 +3834,10 @@ export class Editor extends RapidElement {
     if (!editor) return;
 
     const tick = () => {
-      if (!this.isDragging || !this.lastPointerPos) {
+      if (
+        (!this.isDragging && !this.plumber?.connectionDragging) ||
+        !this.lastPointerPos
+      ) {
         this.autoScrollAnimationId = null;
         return;
       }
@@ -3796,32 +3849,56 @@ export class Editor extends RapidElement {
       let scrollDx = 0;
       let scrollDy = 0;
 
-      // Left edge
+      // Left edge (including beyond)
       const distFromLeft = mouseX - editorRect.left;
-      if (distFromLeft >= 0 && distFromLeft < AUTO_SCROLL_EDGE_ZONE) {
-        const ratio = 1 - distFromLeft / AUTO_SCROLL_EDGE_ZONE;
-        scrollDx = -(ratio * AUTO_SCROLL_MAX_SPEED);
+      if (distFromLeft < AUTO_SCROLL_EDGE_ZONE) {
+        const beyond = distFromLeft < 0;
+        const ratio = Math.min(
+          1,
+          1 - distFromLeft / AUTO_SCROLL_EDGE_ZONE
+        );
+        const speed =
+          AUTO_SCROLL_MAX_SPEED * (beyond ? AUTO_SCROLL_BEYOND_MULTIPLIER : 1);
+        scrollDx = -(ratio * speed);
       }
 
-      // Right edge
+      // Right edge (including beyond)
       const distFromRight = editorRect.right - mouseX;
-      if (distFromRight >= 0 && distFromRight < AUTO_SCROLL_EDGE_ZONE) {
-        const ratio = 1 - distFromRight / AUTO_SCROLL_EDGE_ZONE;
-        scrollDx = ratio * AUTO_SCROLL_MAX_SPEED;
+      if (distFromRight < AUTO_SCROLL_EDGE_ZONE) {
+        const beyond = distFromRight < 0;
+        const ratio = Math.min(
+          1,
+          1 - distFromRight / AUTO_SCROLL_EDGE_ZONE
+        );
+        const speed =
+          AUTO_SCROLL_MAX_SPEED * (beyond ? AUTO_SCROLL_BEYOND_MULTIPLIER : 1);
+        scrollDx = ratio * speed;
       }
 
-      // Top edge
+      // Top edge (including beyond)
       const distFromTop = mouseY - editorRect.top;
-      if (distFromTop >= 0 && distFromTop < AUTO_SCROLL_EDGE_ZONE) {
-        const ratio = 1 - distFromTop / AUTO_SCROLL_EDGE_ZONE;
-        scrollDy = -(ratio * AUTO_SCROLL_MAX_SPEED);
+      if (distFromTop < AUTO_SCROLL_EDGE_ZONE) {
+        const beyond = distFromTop < 0;
+        const ratio = Math.min(
+          1,
+          1 - distFromTop / AUTO_SCROLL_EDGE_ZONE
+        );
+        const speed =
+          AUTO_SCROLL_MAX_SPEED * (beyond ? AUTO_SCROLL_BEYOND_MULTIPLIER : 1);
+        scrollDy = -(ratio * speed);
       }
 
-      // Bottom edge
+      // Bottom edge (including beyond)
       const distFromBottom = editorRect.bottom - mouseY;
-      if (distFromBottom >= 0 && distFromBottom < AUTO_SCROLL_EDGE_ZONE) {
-        const ratio = 1 - distFromBottom / AUTO_SCROLL_EDGE_ZONE;
-        scrollDy = ratio * AUTO_SCROLL_MAX_SPEED;
+      if (distFromBottom < AUTO_SCROLL_EDGE_ZONE) {
+        const beyond = distFromBottom < 0;
+        const ratio = Math.min(
+          1,
+          1 - distFromBottom / AUTO_SCROLL_EDGE_ZONE
+        );
+        const speed =
+          AUTO_SCROLL_MAX_SPEED * (beyond ? AUTO_SCROLL_BEYOND_MULTIPLIER : 1);
+        scrollDy = ratio * speed;
       }
 
       if (scrollDx !== 0 || scrollDy !== 0) {
@@ -3835,7 +3912,7 @@ export class Editor extends RapidElement {
             (editor.scrollLeft + editor.clientWidth + scrollDx) / this.zoom;
           const neededHeight =
             (editor.scrollTop + editor.clientHeight + scrollDy) / this.zoom;
-          getStore().getState().expandCanvas(neededWidth, neededHeight);
+          getStore()?.getState()?.expandCanvas(neededWidth, neededHeight);
         }
 
         editor.scrollLeft += scrollDx;
@@ -3923,10 +4000,10 @@ export class Editor extends RapidElement {
           const newPosition = { left: snappedLeft, top: snappedTop };
           newPositions[uuid] = newPosition;
 
-          // Remove dragging class
+          // Remove dragging/copy classes
           const element = this.querySelector(`[uuid="${uuid}"]`) as HTMLElement;
           if (element) {
-            element.classList.remove('dragging');
+            element.classList.remove('dragging', 'drag-copy');
             element.style.left = `${snappedLeft}px`;
             element.style.top = `${snappedTop}px`;
           }
@@ -3960,11 +4037,14 @@ export class Editor extends RapidElement {
     }
 
     // Reset all drag state
+    this.hideDragHint();
     this.isDragging = false;
     this.isMouseDown = false;
     this.shiftDragCopy = false;
     this.currentDragIsCopy = false;
     this.currentDragItem = null;
+    this.originalDragItem = null;
+    this.originalSelectedItems = null;
     this.canvasMouseDown = false;
     this.autoScrollDeltaX = 0;
     this.autoScrollDeltaY = 0;
@@ -4950,6 +5030,32 @@ export class Editor extends RapidElement {
       isLastAction = false
     } = event.detail;
 
+    // Track action external drag state for shift-copy support
+    const isFirstExternalEvent = !this.isActionExternalDrag;
+    this.isActionExternalDrag = true;
+    this.actionDragLastDetail = {
+      action,
+      nodeUuid,
+      actionIndex,
+      mouseX,
+      mouseY,
+      actionHeight,
+      isLastAction
+    };
+
+    // Initialize copy mode from current shift state (handles shift held before drag)
+    if (isFirstExternalEvent) {
+      const shiftHeld =
+        this.querySelector('#canvas')?.classList.contains('shift-held') ??
+        false;
+      if (shiftHeld) {
+        this.actionDragIsCopy = true;
+        this.showActionOriginal(true);
+      } else {
+        this.showDragHint();
+      }
+    }
+
     // Check if mouse is over another execute_actions node
     const targetNode = this.getNodeAtPosition(mouseX, mouseY);
 
@@ -5046,9 +5152,9 @@ export class Editor extends RapidElement {
       `temba-flow-node[data-node-uuid="${nodeUuid}"]`
     );
 
-    // Show canvas drop preview only if this is NOT the last action
-    // Last actions can only be dropped on other nodes, not on canvas
-    if (!isLastAction) {
+    // Show canvas drop preview if this is not the last action,
+    // or if shift-copy is active (copying allows canvas drop for last action too)
+    if (!isLastAction || this.actionDragIsCopy) {
       // Hide ghost when showing canvas preview (for canvas drops)
       if (sourceElement) {
         sourceElement.dispatchEvent(
@@ -5070,7 +5176,7 @@ export class Editor extends RapidElement {
         actionHeight
       };
     } else {
-      // For last action, keep ghost visible (can't drop on canvas)
+      // For last action without copy, keep ghost visible (can't drop on canvas)
       if (sourceElement) {
         sourceElement.dispatchEvent(
           new CustomEvent('action-show-ghost', {
@@ -5107,6 +5213,75 @@ export class Editor extends RapidElement {
 
     this.canvasDropPreview = null;
     this.actionDragTargetNodeUuid = null;
+    this.isActionExternalDrag = false;
+    this.actionDragIsCopy = false;
+    this.hideDragHint();
+    this.actionDragLastDetail = null;
+  }
+
+  /** Show or hide the original action element in the source node. */
+  private showActionOriginal(visible: boolean): void {
+    if (!this.actionDragLastDetail) return;
+    const sourceElement = this.querySelector(
+      `temba-flow-node[data-node-uuid="${this.actionDragLastDetail.nodeUuid}"]`
+    );
+    if (sourceElement) {
+      sourceElement.dispatchEvent(
+        new CustomEvent(
+          visible ? 'action-show-original' : 'action-hide-original',
+          { detail: {}, bubbles: false }
+        )
+      );
+    }
+  }
+
+  /**
+   * Reprocess the last action drag event with the current shift-copy state.
+   * Used when shift is toggled mid-drag to show/hide the canvas preview
+   * for last-action drags.
+   */
+  private reprocessActionDrag(): void {
+    if (!this.actionDragLastDetail) return;
+    const { action, nodeUuid, actionIndex, mouseX, mouseY, actionHeight } =
+      this.actionDragLastDetail;
+
+    const sourceElement = this.querySelector(
+      `temba-flow-node[data-node-uuid="${nodeUuid}"]`
+    );
+
+    // Only relevant when not hovering a target node
+    if (this.actionDragTargetNodeUuid) return;
+
+    if (this.actionDragIsCopy) {
+      // Shift pressed: show canvas preview
+      if (sourceElement) {
+        sourceElement.dispatchEvent(
+          new CustomEvent('action-hide-ghost', {
+            detail: {},
+            bubbles: false
+          })
+        );
+      }
+      const position = this.calculateCanvasDropPosition(mouseX, mouseY, false);
+      this.canvasDropPreview = {
+        action,
+        nodeUuid,
+        actionIndex,
+        position,
+        actionHeight
+      };
+    } else {
+      // Shift released: hide canvas preview, show ghost
+      if (sourceElement) {
+        sourceElement.dispatchEvent(
+          new CustomEvent('action-show-ghost', {
+            detail: {},
+            bubbles: false
+          })
+        );
+      }
+      this.canvasDropPreview = null;
+    }
   }
 
   private handleActionDropExternal(event: CustomEvent): void {
@@ -5119,6 +5294,15 @@ export class Editor extends RapidElement {
       isLastAction = false
     } = event.detail;
 
+    const isCopy = this.actionDragIsCopy;
+
+    // Reset action drag state
+    this.isActionExternalDrag = false;
+    this.actionDragIsCopy = false;
+    this.actionDragLastDetail = null;
+    this.previousActionDragTargetNodeUuid = null;
+    this.hideDragHint();
+
     // Check if we're dropping on an existing execute_actions node
     const targetNodeUuid = this.actionDragTargetNodeUuid;
 
@@ -5135,7 +5319,8 @@ export class Editor extends RapidElement {
               sourceNodeUuid: nodeUuid,
               actionIndex,
               mouseX,
-              mouseY
+              mouseY,
+              isCopy
             },
             bubbles: false
           })
@@ -5148,9 +5333,9 @@ export class Editor extends RapidElement {
       return;
     }
 
-    // If this is the last action and we're not dropping on another node, do nothing
+    // If this is the last action and not copying, do nothing
     // Last actions can only be moved to other nodes, not dropped on canvas
-    if (isLastAction) {
+    if (isLastAction && !isCopy) {
       this.canvasDropPreview = null;
       this.actionDragTargetNodeUuid = null;
       return;
@@ -5160,28 +5345,36 @@ export class Editor extends RapidElement {
     // 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;
+    if (!isCopy) {
+      // 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
-    );
+      const updatedActions = originalNode.actions.filter(
+        (_a, idx) => idx !== actionIndex
+      );
 
-    // if no actions remain, delete the node
-    if (updatedActions.length === 0) {
-      // Use deleteNodes to properly clean up Plumber connections before removing
-      this.deleteNodes([nodeUuid]);
-    } else {
-      // update the node
-      const updatedNode = { ...originalNode, actions: updatedActions };
-      getStore()?.getState().updateNode(nodeUuid, updatedNode);
+      // if no actions remain, delete the node
+      if (updatedActions.length === 0) {
+        // Use deleteNodes to properly clean up Plumber connections before removing
+        this.deleteNodes([nodeUuid]);
+      } else {
+        // update the node
+        const updatedNode = { ...originalNode, actions: updatedActions };
+        getStore()?.getState().updateNode(nodeUuid, updatedNode);
+      }
     }
 
     // create a new execute_actions node with the dropped action
+    // When copying, generate a fresh UUID so the clone doesn't share the original's
+    const droppedAction = isCopy
+      ? { ...action, uuid: generateUUID() }
+      : action;
     const newNode: Node = {
       uuid: generateUUID(),
-      actions: [action],
+      actions: [droppedAction],
       exits: [
         {
           uuid: generateUUID(),
@@ -5199,6 +5392,11 @@ export class Editor extends RapidElement {
     // add the new node
     getStore()?.getState().addNode(newNode, newNodeUI);
 
+    // Copy localizations from the original action to the new one
+    if (isCopy) {
+      this.copyActionLocalizations(action.uuid, droppedAction.uuid);
+    }
+
     // clear the preview
     this.canvasDropPreview = null;
     this.actionDragTargetNodeUuid = null;
@@ -5209,6 +5407,27 @@ export class Editor extends RapidElement {
     });
   }
 
+  /** Copy all localization entries from one action UUID to another. */
+  private copyActionLocalizations(
+    sourceUuid: string,
+    targetUuid: string
+  ): void {
+    const localization = this.definition?.localization;
+    if (!localization) return;
+    const store = getStore()?.getState();
+    if (!store) return;
+    for (const langCode of Object.keys(localization)) {
+      const entry = localization[langCode]?.[sourceUuid];
+      if (entry) {
+        store.updateLocalization(
+          langCode,
+          targetUuid,
+          JSON.parse(JSON.stringify(entry))
+        );
+      }
+    }
+  }
+
   private getLocalizationLanguages(): Array<{ code: string; name: string }> {
     if (!this.definition) {
       return [];
@@ -6233,116 +6452,10 @@ export class Editor extends RapidElement {
     `;
   }
 
-  private handleLanguageIconClick(): void {
-    if (this.showLanguageOptions) {
-      this.showLanguageOptions = false;
-      return;
-    }
-    this.showLanguageOptions = true;
-    // Close on next click anywhere outside
-    requestAnimationFrame(() => {
-      const close = () => {
-        this.showLanguageOptions = false;
-        document.removeEventListener('click', close);
-      };
-      document.addEventListener('click', close, { once: true });
-    });
-  }
-
-  private handleLanguageOptionSelected(event: CustomEvent): void {
-    if (!this.showLanguageOptions) return;
-    const selected = event.detail?.selected;
-    if (selected?.value === PRIMARY_LANGUAGE_OPTION_VALUE) {
-      this.handleLanguageChange(this.definition?.language || '');
-    } else if (selected?.value) {
-      this.handleLanguageChange(selected.value);
-    }
-    this.showLanguageOptions = false;
-  }
-
-  private renderToolbarTip(
-    text: string | TemplateResult,
-    content: TemplateResult
-  ): TemplateResult {
-    const tipContent = text;
-    return html`
-      <temba-tip
-        class="toolbar-tip"
-        .text=${typeof tipContent === 'string' ? tipContent : ''}
-        .content=${typeof tipContent === 'string' ? null : tipContent}
-        position="top"
-      >
-        ${content}
-      </temba-tip>
-    `;
-  }
-
-  private isMacPlatform(): boolean {
-    return (
-      typeof navigator !== 'undefined' &&
-      /Mac|iPod|iPhone|iPad/.test(navigator.platform)
-    );
-  }
-
-  private getSearchShortcutLabel(): string {
-    return this.isMacPlatform() ? '⌘F' : 'Ctrl+F';
-  }
-
-  private renderToolbarShortcutLabel(
-    label: string,
-    shortcut: string
-  ): TemplateResult {
-    return html`<span style="display:inline-flex; align-items:center; gap:8px;">
-      <span>${label}</span>
-      <kbd>${shortcut}</kbd>
-    </span>`;
-  }
-
-  private renderToolbarLanguageOption(
-    option: { name: string; value: string; percent?: number },
-    selected: boolean
-  ): TemplateResult {
-    if (option.value === PRIMARY_LANGUAGE_OPTION_VALUE) {
-      const primaryBackground = selected ? '#e1e8ef' : '#edf1f5';
-      return html`
-        <div
-          style="display:flex; align-items:center; justify-content:space-between; gap:8px; background:${primaryBackground}; color:#2f3f52; border-radius:4px; padding:6px 10px;"
-        >
-          <span>${option.name}</span>
-          <span
-            style="display:inline-flex; align-items:center; border-radius:999px; background:rgba(47, 63, 82, 0.12); color:#2f3f52; font-size:10px; font-weight:700; line-height:1; padding:3px 7px;"
-            >Original</span
-          >
-        </div>
-      `;
-    }
-
-    const isComplete = option.percent === 100;
-    const optionBg = isComplete ? '#d4f5e0' : '';
-    const optionHoverBg = isComplete ? '#c0edce' : '';
-    const optionRadius = isComplete ? 'border-radius:4px;' : '';
-    const percentColor = isComplete ? 'color:#1a7f37;' : 'color:#5f6b7a;';
-
-    return html`
-      <div
-        style="display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px; ${optionBg ? `background:${optionBg};` : ''} ${optionRadius}"
-        @mouseenter=${isComplete ? (e: MouseEvent) => { (e.currentTarget as HTMLElement).style.background = optionHoverBg; } : null}
-        @mouseleave=${isComplete ? (e: MouseEvent) => { (e.currentTarget as HTMLElement).style.background = optionBg; } : null}
-      >
-        <span style="${isComplete ? 'color:#1a7f37;' : ''}">${option.name}</span>
-        <span style="font-size:11px; font-weight:600; ${percentColor}"
-          >${option.percent ?? 0}%</span
-        >
-      </div>
-    `;
-  }
-
-  private renderToolbar(): TemplateResult {
+  private renderToolbarElement(): TemplateResult {
     const languages = this.getLocalizationLanguages();
     const availableLanguages = this.getAvailableLanguages();
     const baseLanguage = this.definition?.language;
-    const languageOptionCount = (baseLanguage ? 1 : 0) + languages.length;
-    const showLanguageControls = languageOptionCount > 1;
     const baseLanguageName =
       availableLanguages.find((lang) => lang.code === baseLanguage)?.name ||
       baseLanguage ||
@@ -6364,11 +6477,6 @@ export class Editor extends RapidElement {
     const percent = Math.round(
       (progress.localized / Math.max(progress.total, 1)) * 100
     );
-    const hasTranslations = progress.total > 0;
-    const showLocalizationTools = Boolean(activeLanguage);
-    const searchTargetLabel = this.showMessageTable
-      ? 'Search table'
-      : 'Search flow';
     const languageOptions = [
       {
         name: baseLanguageName,
@@ -6390,179 +6498,56 @@ export class Editor extends RapidElement {
     ];
 
     return html`
-      <div class="editor-toolbar">
-        <div class="toolbar-left">
-          ${this.renderToolbarTip(
-            'Flow View',
-            html`
-              <button
-                class="toolbar-btn ${!this.showMessageTable ? 'active' : ''}"
-                @click=${() => { this.showMessageTable = false; }}
-                aria-label="Flow View"
-              >
-                <temba-icon name="flow" size="1"></temba-icon>
-              </button>
-            `
-          )}
-          ${this.renderToolbarTip(
-            'Table View',
-            html`
-              <button
-                class="toolbar-btn ${this.showMessageTable ? 'active' : ''}"
-                @click=${() => { this.showMessageTable = true; }}
-                aria-label="Table View"
-              >
-                <temba-icon name=${Icon.quick_replies} size="1"></temba-icon>
-              </button>
-            `
-          )}
-          ${showLanguageControls
-            ? html`
-              <div class="toolbar-divider"></div>
-              <div class="toolbar-language-group">
-                <div class="toolbar-language">
-                  ${this.renderToolbarTip(
-                    'Change language',
-                    html`
-                      <button
-                        class="language-pill ${isBaseSelected ? 'primary' : percent === 100 ? 'complete' : ''}"
-                        id="language-btn"
-                        @click=${this.handleLanguageIconClick}
-                        aria-label="Change language"
-                      >
-                        <temba-icon name=${Icon.language}></temba-icon>
-                        <span>${currentLanguage.name}</span>
-                        ${!isBaseSelected
-                          ? html`<span class="language-percent">${percent}%</span>`
-                          : ''}
-                        <temba-icon
-                          class="language-pill-caret"
-                          name=${this.showLanguageOptions
-                            ? Icon.arrow_up
-                            : Icon.arrow_down}
-                        ></temba-icon>
-                      </button>
-                    `
-                  )}
-                  <temba-options
-                    .anchorTo=${this.querySelector('#language-btn') as HTMLElement}
-                    .options=${languageOptions}
-                    .renderOption=${this.renderToolbarLanguageOption}
-                    ?visible=${this.showLanguageOptions}
-                    @temba-selection=${this.handleLanguageOptionSelected}
-                    style="--temba-options-option-margin:4px; --temba-options-option-padding:0; --temba-options-option-radius:4px;"
-                    min-width="230"
-                  ></temba-options>
-                </div>
-                ${showLocalizationTools
-                  ? this.renderToolbarTranslationTools(hasTranslations)
-                  : ''}
-              </div>
-            `
-            : ''}
-        </div>
-        <div class="toolbar-right">
-          ${!this.showMessageTable ? html`
-            ${this.renderToolbarTip(
-              'Zoom to fit',
-              html`
-                <button
-                  class="toolbar-btn"
-                  @click=${this.zoomToFit}
-                  ?disabled=${!this.zoomInitialized || this.zoomFitted}
-                  aria-label="Zoom to fit"
-                >
-                  <temba-icon name=${Icon.zoom_fit} size="1"></temba-icon>
-                </button>
-              `
-            )}
-            <div class="toolbar-divider"></div>
-            ${this.renderToolbarTip(
-              'Zoom out',
-              html`
-                <button
-                  class="toolbar-btn"
-                  @click=${this.zoomOut}
-                  ?disabled=${!this.zoomInitialized || this.zoom <= 0.3}
-                  aria-label="Zoom out"
-                >
-                  −
-                </button>
-              `
-            )}
-            <span class="toolbar-zoom-level">${this.zoomInitialized ? `${Math.round(this.zoom * 100)}%` : ''}</span>
-            ${this.renderToolbarTip(
-              'Zoom in',
-              html`
-                <button
-                  class="toolbar-btn"
-                  @click=${this.zoomIn}
-                  ?disabled=${!this.zoomInitialized || this.zoom >= 1.0}
-                  aria-label="Zoom in"
-                >
-                  +
-                </button>
-              `
-            )}
-            <div class="toolbar-divider"></div>
-            ${this.renderToolbarTip(
-              'Zoom to 100%',
-              html`
-                <button
-                  class="toolbar-btn"
-                  @click=${this.zoomToFull}
-                  ?disabled=${!this.zoomInitialized || this.zoom >= 1.0}
-                  aria-label="Zoom to 100%"
-                >
-                  <temba-icon name=${Icon.zoom_in} size="1"></temba-icon>
-                </button>
-              `
-            )}
-            <div class="toolbar-divider"></div>
-          ` : ''}
-            ${this.renderToolbarTip(
-              'Revisions',
-              html`
-                <button
-                class="toolbar-btn ${!this.revisionsWindowHidden
-                  ? 'active'
-                  : ''}"
-                @click=${this.handleRevisionsTabClick}
-                aria-label="Revisions"
-              >
-                <temba-icon
-                  name=${this.isSaving ? 'progress_spinner' : 'revisions'}
-                  size="1"
-                  ?spin=${this.isSaving}
-                ></temba-icon>
-                </button>
-              `
-            )}
-            <div class="toolbar-divider"></div>
-            ${this.renderToolbarTip(
-              this.renderToolbarShortcutLabel(
-                searchTargetLabel,
-                this.getSearchShortcutLabel()
-              ),
-              html`
-                <button
-                  class="toolbar-btn"
-                  @click=${this.openFlowSearch}
-                  ?disabled=${!!this.viewingRevision}
-                  aria-label=${searchTargetLabel}
-                >
-                  <temba-icon name=${Icon.search} size="1"></temba-icon>
-                </button>
-              `
-            )}
-        </div>
-      </div>
+      <temba-editor-toolbar
+        ?message-view=${this.showMessageTable}
+        .zoom=${this.zoom}
+        ?zoom-initialized=${this.zoomInitialized}
+        ?zoom-fitted=${this.zoomFitted}
+        ?revisions-active=${!this.revisionsWindowHidden}
+        ?is-saving=${this.isSaving}
+        ?search-disabled=${!!this.viewingRevision}
+        .languageOptions=${languageOptions}
+        current-language-name=${currentLanguage.name}
+        ?is-base-language=${isBaseSelected}
+        .languagePercent=${percent}
+        ?show-localization-tools=${Boolean(activeLanguage)}
+        @temba-button-clicked=${this.handleToolbarAction}
+      ></temba-editor-toolbar>
     `;
   }
 
-  private renderToolbarTranslationTools(_hasTranslations: boolean): TemplateResult {
-    // auto translate button hidden pending backend changes
-    return html``;
+  private handleToolbarAction(e: CustomEvent): void {
+    const detail = e.detail as ToolbarAction;
+    switch (detail.action) {
+      case 'view-change':
+        this.showMessageTable = detail.view === 'table';
+        break;
+      case 'zoom-in':
+        this.zoomIn();
+        break;
+      case 'zoom-out':
+        this.zoomOut();
+        break;
+      case 'zoom-to-fit':
+        this.zoomToFit();
+        break;
+      case 'zoom-to-full':
+        this.zoomToFull();
+        break;
+      case 'revisions':
+        this.handleRevisionsTabClick();
+        break;
+      case 'search':
+        this.openFlowSearch();
+        break;
+      case 'language-change':
+        if (detail.isPrimary) {
+          this.handleLanguageChange(this.definition?.language || '');
+        } else if (detail.languageCode) {
+          this.handleLanguageChange(detail.languageCode);
+        }
+        break;
+    }
   }
 
   /**
@@ -6721,7 +6706,7 @@ export class Editor extends RapidElement {
     return html`${style} ${this.renderIssuesWindow()}
       ${this.renderRevisionsWindow()} ${this.renderLocalizationWindow()}
       <div id="editor-container">
-        ${this.renderToolbar()}
+        ${this.renderToolbarElement()}
         <div id="editor">
           ${this.showMessageTable
             ? html`<temba-message-table></temba-message-table>`
@@ -6852,6 +6837,7 @@ export class Editor extends RapidElement {
           `}
         </div>
         ${this.renderPendingCard()}
+        <div class="drag-hint" id="drag-hint">Hold ⇧ to duplicate</div>
       </div>
       <div class="loupe" id="loupe">
         <div class="loupe-content" id="loupe-content"></div>