@nyaruka/temba-components 0.156.6 → 0.156.7

package/src/flow/Editor.ts

@@ -9,20 +9,12 @@ import {
   NodeUI
 } from '../store/flow-definition';
 import { getStore, Store } from '../store/Store';
-import {
-  AppState,
-  FlowIssue,
-  fromStore,
-  zustand,
-  FLOW_SPEC_VERSION
-} from '../store/AppState';
+import { AppState, FlowIssue, fromStore, zustand } from '../store/AppState';
 import { RapidElement } from '../RapidElement';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { CustomEventType, DirtyTrackable, Workspace } from '../interfaces';
 import {
   generateUUID,
-  postJSON,
-  fetchResults,
   getClasses,
   getCookie,
   setCookie,
@@ -30,31 +22,14 @@ import {
 } from '../utils';
 import { TEMBA_COMPONENTS_VERSION } from '../version';
 import {
-  formatIssueMessage,
-  getLanguageDisplayName,
   getNodeBounds,
   calculateReflowPositions,
-  isRightClick,
   NodeBounds,
   snapToGrid
 } from './utils';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
 import { calculateLayeredLayout, placeStickyNotes } from './reflow';
-import { FloatingTab } from '../display/FloatingTab';
-import { getTranslatableCategoriesForNode } from './categoryLocalization';
-
-interface Revision {
-  id: number;
-  user: {
-    id: number;
-    username: string;
-    first_name: string;
-    last_name: string;
-    name?: string;
-  };
-  created_on: string;
-  comment?: string;
-}
+import type { RevisionsWindow } from './RevisionsWindow';
 
 import { ACTION_GROUP_METADATA } from './types';
 
@@ -62,17 +37,16 @@ import {
   Plumber,
   calculateFlowchartPath,
   ARROW_LENGTH,
-  ARROW_HALF_WIDTH,
-  CURSOR_GAP
+  ARROW_HALF_WIDTH
 } from './Plumber';
 import { CanvasNode } from './CanvasNode';
+import { DragManager } from './DragManager';
+import { ZoomManager } from './ZoomManager';
 import { Dialog } from '../layout/Dialog';
 
 import { CanvasMenu, CanvasMenuSelection } from './CanvasMenu';
 import { NodeTypeSelector, NodeTypeSelection } from './NodeTypeSelector';
-import { FloatingWindow } from '../layout/FloatingWindow';
 import { FlowSearch, SearchResult } from './FlowSearch';
-import { PRIMARY_LANGUAGE_OPTION_VALUE } from './EditorToolbar';
 
 export function findNodeForExit(
   definition: FlowDefinition,
@@ -103,39 +77,6 @@ export interface SelectionBox {
   endY: number;
 }
 
-const DRAG_THRESHOLD = 5;
-const AUTO_SCROLL_EDGE_ZONE = 150;
-const AUTO_SCROLL_MAX_SPEED = 15;
-const AUTO_SCROLL_BEYOND_MULTIPLIER = 5;
-
-type TranslationType = 'property' | 'category';
-
-interface TranslationEntry {
-  uuid: string;
-  type: TranslationType;
-  attribute: string;
-  from: string;
-  to: string | null;
-}
-
-interface TranslationBundle {
-  nodeUuid: string;
-  actionUuid?: string;
-  translations: TranslationEntry[];
-}
-
-interface TranslationModel {
-  uuid: string;
-  name: string;
-  description?: string;
-}
-
-interface LocalizationUpdate {
-  uuid: string;
-  translations: Record<string, string>;
-}
-
-const AUTO_TRANSLATE_MODELS_ENDPOINT = '/api/internal/llms.json';
 export type ToolbarAction =
   | { action: 'view-change'; view: 'flow' | 'table' }
   | { action: 'zoom-in' }
@@ -143,8 +84,7 @@ export type ToolbarAction =
   | { action: 'zoom-to-fit' }
   | { action: 'zoom-to-full' }
   | { action: 'revisions' }
-  | { action: 'search' }
-  | { action: 'language-change'; isPrimary?: boolean; languageCode?: string };
+  | { action: 'search' };
 const EMPTY_FLOW_ISSUES: FlowIssue[] = [];
 
 // How long the pending-changes auto-save countdown runs (in ms).
@@ -223,7 +163,13 @@ export class Editor extends RapidElement {
   }
 
   // this is the master plumber
-  private plumber: Plumber;
+  public plumber: Plumber;
+
+  // drag/selection manager
+  public dragManager: DragManager;
+
+  // zoom/pan/loupe manager
+  public zoomManager: ZoomManager;
 
   // timer for debounced saving
   private saveTimer: number | null = null;
@@ -244,7 +190,7 @@ export class Editor extends RapidElement {
   private activityInterval = 100; // Start with 100ms interval for fast initial load
 
   @fromStore(zustand, (state: AppState) => state.flowDefinition)
-  private definition!: FlowDefinition;
+  public definition!: FlowDefinition;
 
   @fromStore(zustand, (state: AppState) => state.simulatorActive)
   private simulatorActive!: boolean;
@@ -267,23 +213,15 @@ export class Editor extends RapidElement {
   @fromStore(zustand, (state: AppState) => state.getCurrentActivity())
   private activityData!: any;
 
-  @fromStore(zustand, (state: AppState) => state.flowInfo?.issues ?? EMPTY_FLOW_ISSUES)
+  @fromStore(
+    zustand,
+    (state: AppState) => state.flowInfo?.issues ?? EMPTY_FLOW_ISSUES
+  )
   private flowIssues!: FlowIssue[];
 
-  // Drag state
+  // Drag state (managed by DragManager, kept on Editor for Lit reactivity)
   @state()
-  private isDragging = false;
-  private isMouseDown = false;
-  private shiftDragCopy = false;
-  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 isDragging = false;
 
   // Public getter for drag state
   public get dragging(): boolean {
@@ -291,107 +229,54 @@ export class Editor extends RapidElement {
   }
 
   @state()
-  private currentDragItem: DraggableItem | null = null;
-  private startPos = { left: 0, top: 0 };
-
-  // Auto-scroll state
-  private autoScrollAnimationId: number | null = null;
-  private autoScrollDeltaX = 0;
-  private autoScrollDeltaY = 0;
-  private lastPointerPos: { clientX: number; clientY: number } | null = null;
+  public currentDragItem: DraggableItem | null = null;
 
   // Selection state
   @state()
-  private selectedItems: Set<string> = new Set();
+  public selectedItems: Set<string> = new Set();
 
   @state()
-  private isSelecting = false;
+  public isSelecting = false;
 
   @state()
-  private selectionBox: SelectionBox | null = null;
-
-  // Touch device state
-  private isTouchDevice = false;
-  private isTwoFingerPanning = false;
-  private twoFingerDidPan = false;
-  private twoFingerStartMidX = 0;
-  private twoFingerStartMidY = 0;
-  private twoFingerOnCanvas = false;
-  private lastPanX = 0;
-  private lastPanY = 0;
+  public selectionBox: SelectionBox | null = null;
 
   @state()
-  private targetId: string | null = null;
+  public targetId: string | null = null;
 
   @state()
-  private sourceId: string | null = null;
+  public sourceId: string | null = null;
 
   @state()
-  private dragFromNodeId: string | null = null;
+  public dragFromNodeId: string | null = null;
 
   @state()
-  private originalConnectionTargetId: string | null = null;
+  public originalConnectionTargetId: string | null = null;
 
   @state()
-  private isValidTarget = true;
+  public isValidTarget = true;
 
   // Canvas-relative source exit position (set at drag start)
-  private connectionSourceX: number | null = null;
-  private connectionSourceY: number | null = null;
+  public connectionSourceX: number | null = null;
+  public connectionSourceY: number | null = null;
 
   @state()
   private issuesWindowHidden = true;
 
-  @state()
-  private localizationWindowHidden = true;
-
-  @state()
-  private translationSettingsExpanded = false;
-
-  @state()
-  private autoTranslateDialogOpen = false;
-
-  @state()
-  private autoTranslating = false;
-
-  @state()
-  private autoTranslateModel: TranslationModel | null = null;
-
-  @state()
-  private autoTranslateError: string | null = null;
-
   @state()
   private revisionsWindowHidden = true;
 
   @state()
-  private revisions: Revision[] = [];
-
-  @state()
-  private viewingRevision: Revision | null = null;
-
-  @state()
-  private isLoadingRevisions = false;
+  private viewingRevision = false;
 
   @state()
-  private isSaving = false;
+  public isSaving = false;
 
   @state()
   private saveError: string | null = null;
 
   @state()
-  private zoom = 1.0;
-
-  @state()
-  private zoomInitialized = false;
-
-  @state()
-  private zoomFitted = false;
-
-  // Loupe magnifier state - tracked via direct DOM updates for performance
-  private loupeEl: HTMLElement | null = null;
-  private loupeContentEl: HTMLElement | null = null;
-  private loupeRAF: number | null = null;
-  private hiddenTitles: { el: Element; title: string }[] = [];
+  public zoom = 1.0;
 
   // Non-reactive flag set in willUpdate to suppress the debouncedSave
   // call in updated() when the dirtyDate change comes from a reflow/copy
@@ -402,7 +287,7 @@ export class Editor extends RapidElement {
 
   // --- Pending-changes timer (shared by reflow + copy) ---
 
-  private pendingTimer = new PendingChangesTimer(
+  public pendingTimer = new PendingChangesTimer(
     'Unsaved Changes',
     PENDING_SAVE_DELAY,
     this,
@@ -417,10 +302,10 @@ export class Editor extends RapidElement {
   private pendingPositions: Record<string, FlowPosition> | null = null;
 
   /** UUIDs of items created by shift+drag copy during the pending window. */
-  private copiedItemUuids: string[] = [];
+  public copiedItemUuids: string[] = [];
 
   /** Save all current canvas positions if not already saved. */
-  private capturePositionsOnce(): void {
+  public capturePositionsOnce(): void {
     if (this.pendingPositions) return;
     const saved: Record<string, FlowPosition> = {};
     for (const node of this.definition.nodes) {
@@ -438,14 +323,7 @@ export class Editor extends RapidElement {
     this.pendingPositions = saved;
   }
 
-  private preRevertState: {
-    definition: FlowDefinition;
-    dirtyDate: Date | null;
-  } | null = null;
-  private revisionsBrowseLanguageCode: string | null = null;
-
-  private deleteDialog: Dialog | null = null;
-  private translationCache = new Map<string, string>();
+  public deleteDialog: Dialog | null = null;
 
   private dirtyAdapter: DirtyTrackable = {
     dirtyMessage:
@@ -461,13 +339,13 @@ export class Editor extends RapidElement {
 
   // NodeEditor state - handles both node and action editing
   @state()
-  private editingNode: Node | null = null;
+  public editingNode: Node | null = null;
 
   @state()
-  private editingNodeUI: NodeUI | null = null;
+  public editingNodeUI: NodeUI | null = null;
 
   @state()
-  private editingAction: Action | null = null;
+  public editingAction: Action | null = null;
 
   private dialogOrigin: { x: number; y: number } | null = null;
 
@@ -515,7 +393,7 @@ export class Editor extends RapidElement {
 
   // Connection placeholder state for dropping connections on empty canvas
   @state()
-  private connectionPlaceholder: {
+  public connectionPlaceholder: {
     position: FlowPosition;
     visible: boolean;
     dragUp?: boolean;
@@ -528,45 +406,11 @@ export class Editor extends RapidElement {
     position: FlowPosition;
   } | null = null;
 
-  private canvasMouseDown = false;
-
-  private getAvailableLanguages(): Array<{ code: string; name: string }> {
-    // Use languages from workspace if available
-    if (this.workspace?.languages && this.workspace.languages.length > 0) {
-      return this.workspace.languages
-        .map((code) => ({ code, name: getLanguageDisplayName(code) }))
-        .filter((lang) => lang.code && lang.name);
-    }
-
-    // Fall back to flow definition languages if available
-    if (
-      this.definition?._ui?.languages &&
-      this.definition._ui.languages.length > 0
-    ) {
-      return this.definition._ui.languages.map((lang: any) => ({
-        code: typeof lang === 'string' ? lang : lang.iso || lang.code,
-        name: typeof lang === 'string' ? lang : lang.name
-      }));
-    }
-
-    // No languages available
-    return [];
-  }
-
   // Bound event handlers to maintain proper 'this' context
-  private boundMouseMove = this.handleMouseMove.bind(this);
-  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);
-  private boundTouchEnd = this.handleTouchEnd.bind(this);
-  private boundTouchCancel = this.handleTouchCancel.bind(this);
-  private boundCanvasTouchStart = this.handleCanvasTouchStart.bind(this);
-  private boundWindowResize = this.updateZoomControlPositioning.bind(this);
+  private boundWheel = (e: WheelEvent) => this.zoomManager.handleWheel(e);
+  private boundWindowResize = () =>
+    this.zoomManager.updateZoomControlPositioning();
 
   static get styles() {
     return css`
@@ -989,7 +833,6 @@ export class Editor extends RapidElement {
         color: #6b7280;
       }
 
-
       .translation-settings-arrow {
         width: 8px;
         height: 8px;
@@ -1305,8 +1148,12 @@ export class Editor extends RapidElement {
       }
 
       @keyframes drag-hint-in {
-        from { opacity: 0; }
-        to { opacity: 1; }
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
       }
 
       .reflow-card {
@@ -1378,6 +1225,8 @@ export class Editor extends RapidElement {
 
   constructor() {
     super();
+    this.dragManager = new DragManager(this);
+    this.zoomManager = new ZoomManager(this);
   }
 
   protected firstUpdated(
@@ -1393,12 +1242,15 @@ export class Editor extends RapidElement {
     // Eagerly detect touch capability so hover-only controls are visible
     // from the start and scrollbar/touch-action CSS is applied immediately.
     if (navigator.maxTouchPoints > 0) {
-      this.markTouchDevice();
+      this.querySelector('#canvas')?.classList.add('touch-device');
+      this.querySelector('#editor')?.classList.add('touch-device');
     }
-    this.updateZoomControlPositioning();
-    this.loupeEl = this.querySelector('#loupe') as HTMLElement;
-    this.loupeContentEl = this.querySelector('#loupe-content') as HTMLElement;
-    this.initLoupe();
+    this.zoomManager.updateZoomControlPositioning();
+    this.zoomManager.setLoupeElements(
+      this.querySelector('#loupe') as HTMLElement,
+      this.querySelector('#loupe-content') as HTMLElement
+    );
+    this.zoomManager.initLoupe();
     if (changes.has('flow') && this.flow) {
       // Defer revision fetch so reactive state changes in fetchRevisions()
       // don't run inside firstUpdated().
@@ -1407,7 +1259,6 @@ export class Editor extends RapidElement {
           return;
         }
         getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
-        this.fetchRevisions();
       }, 0);
     }
 
@@ -1430,11 +1281,6 @@ 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) {
@@ -1535,7 +1381,7 @@ export class Editor extends RapidElement {
       }
 
       // Pre-sync zoom state so we don't mutate reactive state in updated().
-      this.restoreInitialZoomFromSettings();
+      this.zoomManager.restoreInitialZoomFromSettings();
     }
 
     if (changes.has('dirtyDate')) {
@@ -1557,29 +1403,13 @@ export class Editor extends RapidElement {
     }
   }
 
-  private restoreInitialZoomFromSettings(): void {
-    if (this.zoomInitialized || !this.definition) {
-      return;
-    }
-
-    const savedZoom = this.getFlowSetting<number>('zoom');
-    if (typeof savedZoom === 'number' && Number.isFinite(savedZoom)) {
-      const clamped = Math.max(0.3, Math.min(1.0, Math.round(savedZoom * 100) / 100));
-      this.zoom = clamped;
-      if (this.plumber) {
-        this.plumber.zoom = clamped;
-      }
-    }
-    this.zoomInitialized = true;
-  }
-
   private setSimulatorTabHidden(hidden: boolean): void {
-    const simulator = document.querySelector('temba-simulator') as HTMLElement & {
+    const simulator = document.querySelector(
+      'temba-simulator'
+    ) as HTMLElement & {
       shadowRoot?: ShadowRoot;
     };
-    const phoneTab = simulator?.shadowRoot?.querySelector(
-      '#phone-tab'
-    ) as any;
+    const phoneTab = simulator?.shadowRoot?.querySelector('#phone-tab') as any;
     if (phoneTab) {
       phoneTab.hidden = hidden;
     }
@@ -1596,10 +1426,14 @@ export class Editor extends RapidElement {
       this.setSimulatorTabHidden(!this.revisionsWindowHidden);
     }
     if (changes.has('canvasSize')) {
-      this.updateZoomControlPositioning();
+      this.zoomManager.updateZoomControlPositioning();
     }
 
-    if (changes.has('showMessageTable') && !this.showMessageTable && this.plumber) {
+    if (
+      changes.has('showMessageTable') &&
+      !this.showMessageTable &&
+      this.plumber
+    ) {
       // Canvas was re-added to the DOM; rebind the plumber, listeners, and repaint
       requestAnimationFrame(() => {
         const canvas = this.querySelector('#canvas');
@@ -1607,23 +1441,18 @@ export class Editor extends RapidElement {
           this.plumber.setContainer(canvas as HTMLElement);
           this.plumber.repaintEverything();
           canvas.addEventListener('contextmenu', this.boundCanvasContextMenu);
-          canvas.addEventListener('touchstart', this.boundCanvasTouchStart, {
-            passive: false
-          });
         }
       });
     }
 
     if (changes.has('showMessageTable')) {
-      this.updateZoomControlPositioning();
+      this.zoomManager.updateZoomControlPositioning();
     }
 
     if (changes.has('definition')) {
       // defer to avoid triggering a reactive canvasSize update during this cycle
       setTimeout(() => this.updateCanvasSize(), 0);
 
-      this.translationCache.clear();
-
       // Start fetching activity data when definition is loaded
       if (this.definition?.uuid) {
         this.startActivityFetching();
@@ -1681,10 +1510,6 @@ export class Editor extends RapidElement {
         this.saveError = null;
       }, 0);
     }
-
-    if (changes.has('languageCode')) {
-      this.translationCache.clear();
-    }
   }
 
   /**
@@ -1800,9 +1625,6 @@ export class Editor extends RapidElement {
           if (response.json.revision?.revision !== undefined) {
             state.setRevision(response.json.revision.revision);
           }
-
-          // Refresh revisions list so the tab visibility stays up to date
-          this.fetchRevisions();
         }
 
         getStore().getState().setDirtyDate(null);
@@ -1916,9 +1738,9 @@ export class Editor extends RapidElement {
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
-    this.teardownLoupe();
+    this.zoomManager.teardownLoupe();
     getStore()?.getState().setFlushSave(null);
-    this.stopAutoScroll();
+    this.dragManager.teardownListeners();
     window.removeEventListener('beforeunload', this.boundBeforeUnload);
     const store = document.querySelector('temba-store') as Store;
     if (store?.markClean) {
@@ -1933,21 +1755,11 @@ export class Editor extends RapidElement {
       this.activityTimer = null;
     }
     this.pendingTimer.clearTimer();
-    document.removeEventListener('mousemove', this.boundMouseMove);
-    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);
     window.removeEventListener('resize', this.boundWindowResize);
 
     const canvas = this.querySelector('#canvas');
     if (canvas) {
       canvas.removeEventListener('contextmenu', this.boundCanvasContextMenu);
-      canvas.removeEventListener('touchstart', this.boundCanvasTouchStart);
     }
 
     const editor = this.querySelector('#editor');
@@ -1967,33 +1779,14 @@ export class Editor extends RapidElement {
   }
 
   private setupGlobalEventListeners(): void {
-    document.addEventListener('mousemove', this.boundMouseMove);
-    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
-    });
-    document.addEventListener('touchend', this.boundTouchEnd);
-    document.addEventListener('touchcancel', this.boundTouchCancel);
-    window.addEventListener('resize', this.boundWindowResize);
+    // Drag/selection listeners managed by DragManager
+    this.dragManager.setupListeners();
 
-    // Fallback: on first touch, mark as touch device in case
-    // navigator.maxTouchPoints wasn't detected in firstUpdated.
-    const markTouchOnce = () => {
-      this.markTouchDevice();
-      document.removeEventListener('touchstart', markTouchOnce);
-    };
-    document.addEventListener('touchstart', markTouchOnce);
+    window.addEventListener('resize', this.boundWindowResize);
 
     const canvas = this.querySelector('#canvas');
     if (canvas) {
       canvas.addEventListener('contextmenu', this.boundCanvasContextMenu);
-      canvas.addEventListener('touchstart', this.boundCanvasTouchStart, {
-        passive: false
-      });
     }
 
     const editor = this.querySelector('#editor');
@@ -2082,208 +1875,12 @@ export class Editor extends RapidElement {
     });
   }
 
-  private getPosition(uuid: string, type: 'node' | 'sticky'): FlowPosition {
-    if (type === 'node') {
-      return this.definition._ui.nodes[uuid]?.position;
-    } else {
-      return this.definition._ui.stickies?.[uuid]?.position;
-    }
-  }
-
-  private handleMouseDown(event: MouseEvent): void {
-    if (isRightClick(event)) return;
-
-    if (this.isReadOnly()) return;
-    this.blurActiveContentEditable();
-
-    const element = event.currentTarget as HTMLElement;
-    // Only start dragging if clicking on the element itself, not on exits or other interactive elements
-    const target = event.target as HTMLElement;
-    if (
-      target.classList.contains('exit') ||
-      target.closest('.exit') ||
-      target.closest('.linked-name')
-    ) {
-      return;
-    }
-
-    const uuid = element.getAttribute('uuid');
-    const type = element.tagName === 'TEMBA-FLOW-NODE' ? 'node' : 'sticky';
-
-    const position = this.getPosition(uuid, type);
-    if (!position) return;
-
-    // If clicking on a non-selected item, clear selection unless Ctrl/Cmd is held
-    if (!this.selectedItems.has(uuid) && !event.ctrlKey && !event.metaKey) {
-      this.selectedItems.clear();
-      // Don't add single items to selection - single clicks just clear existing selection
-    } else if (!this.selectedItems.has(uuid)) {
-      // Add this item to selection only if Ctrl/Cmd is held
-      this.selectedItems.add(uuid);
-    }
-
-    // Always set up drag state regardless of selection status
-    // This allows single nodes to be dragged without being selected
-    this.isMouseDown = true;
-    this.shiftDragCopy = event.shiftKey;
-    this.dragStartPos = { x: event.clientX, y: event.clientY };
-    this.startPos = { left: position.left, top: position.top };
-    this.currentDragItem = {
-      uuid,
-      position,
-      element,
-      type
-    };
-
-    event.preventDefault();
-    event.stopPropagation();
-  }
-
-  /**
-   * Mirror of handleMouseDown for touch devices.
-   * Sets up the same drag state so handleTouchMove/End can drive the drag.
-   */
-  /* c8 ignore start -- touch-only handlers untestable in headless Chromium */
-
-  /**
-   * Mark the editor as a touch device — adds classes to #canvas and
-   * #editor so touch-specific CSS activates (visible controls,
-   * always-on scrollbars, touch-action: none).
-   */
-  private markTouchDevice(): void {
-    if (this.isTouchDevice) return;
-    this.isTouchDevice = true;
-    this.querySelector('#canvas')?.classList.add('touch-device');
-    this.querySelector('#editor')?.classList.add('touch-device');
-  }
-
-  private handleItemTouchStart(event: TouchEvent): void {
-    this.markTouchDevice();
-
-    if (this.isReadOnly()) return;
-    this.blurActiveContentEditable();
-
-    const touch = event.touches[0];
-    if (!touch) return;
-
-    const element = event.currentTarget as HTMLElement;
-    const target = event.target as HTMLElement;
-    if (
-      target.classList.contains('exit') ||
-      target.closest('.exit') ||
-      target.closest('.linked-name')
-    ) {
-      return;
-    }
-
-    const uuid = element.getAttribute('uuid');
-    const type = element.tagName === 'TEMBA-FLOW-NODE' ? 'node' : 'sticky';
-
-    const position = this.getPosition(uuid, type);
-    if (!position) return;
-
-    // Touch doesn't support Ctrl/Cmd selection — just clear
-    if (!this.selectedItems.has(uuid)) {
-      this.selectedItems.clear();
-    }
-
-    this.isMouseDown = true;
-    this.dragStartPos = { x: touch.clientX, y: touch.clientY };
-    this.startPos = { left: position.left, top: position.top };
-    this.currentDragItem = {
-      uuid,
-      position,
-      element,
-      type
-    };
-
-    // Don't preventDefault here — allow the threshold check in touchmove
-    // to decide whether this is a drag or a tap
-    event.stopPropagation();
-  }
-
-  /* c8 ignore stop */
-
-  private handleGlobalMouseDown(event: MouseEvent): void {
-    if (isRightClick(event)) return;
-
-    // Check if the click is within our canvas
-    const canvasRect = this.querySelector('#grid')?.getBoundingClientRect();
-
-    if (!canvasRect) return;
-
-    const isWithinCanvas =
-      event.clientX >= canvasRect.left &&
-      event.clientX <= canvasRect.right &&
-      event.clientY >= canvasRect.top &&
-      event.clientY <= canvasRect.bottom;
-
-    if (!isWithinCanvas) return;
-
-    // Check if we clicked on a draggable item (node or sticky)
-    const target = event.target as HTMLElement;
-    const clickedOnDraggable = target.closest('.draggable');
-
-    if (clickedOnDraggable) {
-      // This is handled by the individual item mousedown handlers
-      return;
-    }
-
-    // We clicked on empty canvas space, start selection
-    this.handleCanvasMouseDown(event);
-  }
-
-  private blurActiveContentEditable(): void {
-    let active: Element | null = document.activeElement;
-    while (active?.shadowRoot?.activeElement) {
-      active = active.shadowRoot.activeElement;
-    }
-    if (
-      active instanceof HTMLElement &&
-      active.getAttribute('contenteditable') === 'true'
-    ) {
-      active.blur();
-    }
-  }
-
-  private handleCanvasMouseDown(event: MouseEvent): void {
-    if (this.isReadOnly()) return;
-    this.blurActiveContentEditable();
-
-    const target = event.target as HTMLElement;
-    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 = this.querySelector('#canvas')?.getBoundingClientRect();
-      if (canvasRect) {
-        // Clear current selection
-        this.selectedItems.clear();
-
-        const relativeX = (event.clientX - canvasRect.left) / this.zoom;
-        const relativeY = (event.clientY - canvasRect.top) / this.zoom;
-
-        this.selectionBox = {
-          startX: relativeX,
-          startY: relativeY,
-          endX: relativeX,
-          endY: relativeY
-        };
-      }
-
-      event.preventDefault();
-    }
-  }
-
   private openFlowSearch(): void {
     if (this.viewingRevision) {
       return;
     }
 
-    if (this.isDialogOrMenuOpen()) {
+    if (this.zoomManager.isDialogOrMenuOpen()) {
       return;
     }
 
@@ -2295,7 +1892,7 @@ export class Editor extends RapidElement {
     search.definition = this.definition;
     search.languageCode = this.languageCode || '';
     search.scope = this.showMessageTable ? 'table' : 'flow';
-    search.includeCategories = this.isTranslating && this.hasAnyNodeWithLocalizeCategories();
+    search.includeCategories = false;
     search.show();
   }
 
@@ -2306,49 +1903,13 @@ 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 {
+  // Called by DragManager for non-drag keyboard handling
+  public 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();
         }
@@ -2368,7 +1929,6 @@ export class Editor extends RapidElement {
     if (search?.open) return;
 
     if (event.key === 'Delete' || event.key === 'Backspace') {
-      // If delete confirmation dialog is already showing, confirm it
       if (this.deleteDialog?.open) {
         this.deleteSelectedItems();
         this.deleteDialog.open = false;
@@ -2385,22 +1945,12 @@ export class Editor extends RapidElement {
     }
   }
 
-  private handleKeyUp(event: KeyboardEvent): void {
+  // Called by DragManager for action drag shift-copy
+  public 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();
         }
@@ -2409,16 +1959,8 @@ export class Editor extends RapidElement {
     }
   }
 
-  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
+  // Called by DragManager on window blur
+  public handleWindowBlur(): void {
     if (this.isActionExternalDrag && this.actionDragIsCopy) {
       this.actionDragIsCopy = false;
       this.showActionOriginal(false);
@@ -2433,7 +1975,7 @@ export class Editor extends RapidElement {
 
   static MAX_FLOW_SETTINGS = 50;
 
-  private getFlowSettings(): Record<string, any> {
+  public getFlowSettings(): Record<string, any> {
     try {
       return JSON.parse(getCookie('flow-settings') || '{}');
     } catch {
@@ -2441,7 +1983,7 @@ export class Editor extends RapidElement {
     }
   }
 
-  private saveFlowSetting(key: string, value: any): void {
+  public saveFlowSetting(key: string, value: any): void {
     if (!this.flow) return;
     const settings = this.getFlowSettings();
 
@@ -2463,563 +2005,81 @@ export class Editor extends RapidElement {
     setCookie('flow-settings', JSON.stringify(settings));
   }
 
-  private getFlowSetting<T>(key: string): T | undefined {
+  public getFlowSetting<T>(key: string): T | undefined {
     if (!this.flow) return undefined;
     return this.getFlowSettings()[this.flow]?.[key];
   }
 
-  // --- Zoom ---
+  private showDeleteConfirmation(): void {
+    const itemCount = this.selectedItems.size;
+    const itemType = itemCount === 1 ? 'item' : 'items';
 
-  private setZoom(
-    newZoom: number,
-    center?: { clientX: number; clientY: number }
-  ): void {
-    const clamped = Math.max(
-      0.3,
-      Math.min(1.0, Math.round(newZoom * 100) / 100)
-    );
-    if (clamped === this.zoom) return;
+    // Create and show confirmation dialog
+    // Don't open a second dialog if one is already showing
+    if (this.deleteDialog?.open) return;
 
-    const editor = this.querySelector('#editor') as HTMLElement;
-    const oldZoom = this.zoom;
-    this.zoom = clamped;
-    this.plumber.zoom = clamped;
-    this.zoomFitted = false;
-    this.saveFlowSetting('zoom', clamped);
-
-    if (editor && center) {
-      const editorRect = editor.getBoundingClientRect();
-      const ox = center.clientX - editorRect.left;
-      const oy = center.clientY - editorRect.top;
-      // Canvas point under cursor at old zoom
-      const cx = (editor.scrollLeft + ox) / oldZoom;
-      const cy = (editor.scrollTop + oy) / oldZoom;
+    const dialog = document.createElement('temba-dialog') as Dialog;
+    dialog.header = 'Delete Items';
+    dialog.primaryButtonName = 'Delete';
+    dialog.cancelButtonName = 'Cancel';
+    dialog.destructive = true;
+    dialog.innerHTML = `<div style="padding: 20px;">Are you sure you want to delete ${itemCount} ${itemType}?</div>`;
 
-      requestAnimationFrame(() => {
-        editor.scrollLeft = cx * clamped - ox;
-        editor.scrollTop = cy * clamped - oy;
-        this.plumber.repaintEverything();
-      });
-    } else {
-      requestAnimationFrame(() => this.plumber.repaintEverything());
-    }
-  }
+    dialog.addEventListener('temba-button-clicked', (event: any) => {
+      if (event.detail.button.name === 'Delete') {
+        this.deleteSelectedItems();
+        dialog.open = false;
+      }
+    });
 
-  private zoomIn(): void {
-    this.setZoom(this.zoom + 0.05);
-  }
+    // Add to document and show
+    document.body.appendChild(dialog);
+    dialog.open = true;
+    this.deleteDialog = dialog;
 
-  private zoomOut(): void {
-    this.setZoom(this.zoom - 0.05);
+    // Clean up dialog when closed
+    dialog.addEventListener('temba-dialog-hidden', () => {
+      document.body.removeChild(dialog);
+      this.deleteDialog = null;
+    });
   }
 
-  private zoomToFit(): void {
+  private performReflow(): void {
     if (!this.definition || this.definition.nodes.length === 0) return;
 
-    const editor = this.querySelector('#editor') as HTMLElement;
-    if (!editor) return;
-
-    // Calculate bounding box of all content in canvas coordinates
-    let minX = Infinity;
-    let minY = Infinity;
-    let maxX = -Infinity;
-    let maxY = -Infinity;
-
-    this.definition.nodes.forEach((node) => {
-      const ui = this.definition._ui?.nodes[node.uuid];
-      if (!ui?.position) return;
-      const el = this.querySelector(`[id="${node.uuid}"]`) as HTMLElement;
-      if (!el) return;
-      const w = el.offsetWidth;
-      const h = el.offsetHeight;
-      minX = Math.min(minX, ui.position.left);
-      minY = Math.min(minY, ui.position.top);
-      maxX = Math.max(maxX, ui.position.left + w);
-      maxY = Math.max(maxY, ui.position.top + h);
-    });
+    // Save current positions for discard (only on first pending operation)
+    this.capturePositionsOnce();
 
     const stickies = this.definition._ui?.stickies || {};
-    Object.entries(stickies).forEach(([uuid, sticky]) => {
-      if (!sticky.position) return;
-      const el = this.querySelector(
-        `temba-sticky-note[uuid="${uuid}"]`
-      ) as HTMLElement;
-      if (!el) return;
-      const w = el.offsetWidth;
-      const h = el.offsetHeight;
-      minX = Math.min(minX, sticky.position.left);
-      minY = Math.min(minY, sticky.position.top);
-      maxX = Math.max(maxX, sticky.position.left + w);
-      maxY = Math.max(maxY, sticky.position.top + h);
-    });
 
-    if (minX === Infinity) return;
+    // Save old node positions before reflow for sticky proximity calculation
+    const oldNodePositions: Record<string, FlowPosition> = {};
+    for (const node of this.definition.nodes) {
+      const ui = this.definition._ui?.nodes[node.uuid];
+      if (ui?.position) {
+        oldNodePositions[node.uuid] = { ...ui.position };
+      }
+    }
 
-    const contentWidth = maxX - minX;
-    const contentHeight = maxY - minY;
-    const padding = 40;
+    // Identify start node (first in sorted array)
+    const startNodeUuid = this.definition.nodes[0].uuid;
 
-    const availWidth = editor.clientWidth - padding * 2;
-    const availHeight = editor.clientHeight - padding * 2;
-
-    const scaleX = availWidth / contentWidth;
-    const scaleY = availHeight / contentHeight;
-    let fitZoom = Math.min(scaleX, scaleY, 1.0);
-    fitZoom = Math.max(fitZoom, 0.3);
-    fitZoom = Math.round(fitZoom * 20) / 20; // round to nearest 0.05
-
-    this.zoom = fitZoom;
-    this.plumber.zoom = fitZoom;
-    this.zoomFitted = true;
-    this.saveFlowSetting('zoom', fitZoom);
-
-    // Center of content in canvas coordinates, plus grid/canvas margin offset
-    const centerX = (minX + maxX) / 2 + 40;
-    const centerY = (minY + maxY) / 2 + 40;
-
-    requestAnimationFrame(() => {
-      editor.scrollLeft = centerX * fitZoom - editor.clientWidth / 2;
-      editor.scrollTop = centerY * fitZoom - editor.clientHeight / 2;
-      this.plumber.repaintEverything();
-    });
-  }
-
-  private zoomToFull(): void {
-    this.setZoom(1.0);
-  }
-
-  /** Adjust floating tab positioning relative to toolbar and editor scrollbar */
-  private updateZoomControlPositioning(): void {
-    requestAnimationFrame(() => {
-      const editor = this.querySelector('#editor') as HTMLElement;
-      if (editor) {
-        const scrollbarWidth = Math.max(
-          editor.offsetWidth - editor.clientWidth,
-          0
-        );
-        // Keep floating tabs just left of the vertical scrollbar.
-        document.documentElement.style.setProperty(
-          '--floating-tab-clip',
-          `${scrollbarWidth}px`
-        );
-      }
-
-      const toolbar = this.querySelector('.editor-toolbar') as HTMLElement;
-      if (toolbar) {
-        const rect = toolbar.getBoundingClientRect();
-        FloatingTab.START_TOP = rect.bottom + 20;
-        FloatingTab.updateAllPositions();
-      }
-    });
-  }
-
-  private handleWheel(event: WheelEvent): void {
-    if (!event.ctrlKey && !event.metaKey) return;
-    event.preventDefault();
-
-    const delta = event.deltaY > 0 ? -0.05 : 0.05;
-    this.setZoom(this.zoom + delta, {
-      clientX: event.clientX,
-      clientY: event.clientY
-    });
-  }
-
-  // --- Loupe magnifier ---
-
-  private static readonly LOUPE_DIAMETER = 280;
-
-  private readonly boundLoupeMouseMove = this.handleLoupeMouseMove.bind(this);
-  private readonly boundLoupeMouseDown = this.handleLoupeMouseDown.bind(this);
-  private readonly boundLoupeMouseUp = this.handleLoupeMouseUp.bind(this);
-  private readonly boundLoupeKeyDown = this.handleLoupeKeyDown.bind(this);
-  private readonly boundLoupeKeyUp = this.handleLoupeKeyUp.bind(this);
-  private loupeKeyHeld = false;
-  private loupeMouseIsDown = false;
-  private loupeLastMouse: { clientX: number; clientY: number } | null = null;
-
-  private initLoupe(): void {
-    document.addEventListener('mousemove', this.boundLoupeMouseMove);
-    document.addEventListener('keydown', this.boundLoupeKeyDown);
-    document.addEventListener('keyup', this.boundLoupeKeyUp);
-    document.addEventListener('mouseup', this.boundLoupeMouseUp);
-    // Capture-phase listener catches all mousedowns (including those where
-    // Plumber calls stopPropagation, e.g. exits and connection re-routing)
-    const editor = this.querySelector('#editor') as HTMLElement;
-    if (editor) {
-      editor.addEventListener('mousedown', this.boundLoupeMouseDown, true);
-    }
-  }
-
-  private teardownLoupe(): void {
-    document.removeEventListener('mousemove', this.boundLoupeMouseMove);
-    document.removeEventListener('keydown', this.boundLoupeKeyDown);
-    document.removeEventListener('keyup', this.boundLoupeKeyUp);
-    document.removeEventListener('mouseup', this.boundLoupeMouseUp);
-    const editor = this.querySelector('#editor') as HTMLElement;
-    if (editor) {
-      editor.removeEventListener('mousedown', this.boundLoupeMouseDown, true);
-    }
-    this.hideLoupe();
-  }
-
-  private handleLoupeKeyDown(event: KeyboardEvent): void {
-    // Cmd+Ctrl+A (Mac) / Ctrl+Meta+A (Windows)
-    if (event.key.toLowerCase() !== 'a') return;
-    if (event.metaKey && event.ctrlKey) {
-      event.preventDefault();
-      this.loupeKeyHeld = true;
-      // Show loupe immediately at last known mouse position
-      if (this.loupeLastMouse) {
-        this.handleLoupeMouseMove(this.loupeLastMouse as MouseEvent);
-      }
-    }
-  }
-
-  private handleLoupeKeyUp(event: KeyboardEvent): void {
-    if (!this.loupeKeyHeld) return;
-    // Hide when any modifier is released
-    if (event.key === 'a' || event.key === 'Meta' || event.key === 'Control') {
-      this.loupeKeyHeld = false;
-      this.hideLoupe();
-    }
-  }
-
-  private handleLoupeMouseDown(): void {
-    this.loupeMouseIsDown = true;
-    this.hideLoupe();
-  }
-
-  private handleLoupeMouseUp(): void {
-    this.loupeMouseIsDown = false;
-  }
-
-  private handleLoupeMouseMove(event: MouseEvent): void {
-    this.loupeLastMouse = { clientX: event.clientX, clientY: event.clientY };
-
-    // Require Cmd+Ctrl+A held, hide while mouse is down, during interactions, or with dialogs open
-    if (
-      !this.loupeKeyHeld ||
-      this.loupeMouseIsDown ||
-      this.isDragging ||
-      this.isSelecting ||
-      this.plumber?.connectionDragging ||
-      this.isDialogOrMenuOpen()
-    ) {
-      this.hideLoupe();
-      return;
-    }
-
-    // Check if cursor is within the editor bounds
-    const editor = this.querySelector('#editor') as HTMLElement;
-    if (!editor) return;
-    const rect = editor.getBoundingClientRect();
-    if (
-      event.clientX < rect.left ||
-      event.clientX > rect.right ||
-      event.clientY < rect.top ||
-      event.clientY > rect.bottom
-    ) {
-      this.hideLoupe();
-      return;
-    }
-
-    if (this.loupeRAF) cancelAnimationFrame(this.loupeRAF);
-    this.loupeRAF = requestAnimationFrame(() => {
-      this.updateLoupe(event.clientX, event.clientY);
-    });
-  }
-
-  private isDialogOrMenuOpen(): boolean {
-    if (this.editingNode || this.editingAction) return true;
-    if (this.deleteDialog?.open) return true;
-    const canvasMenu = this.querySelector('temba-canvas-menu') as any;
-    if (canvasMenu?.open) return true;
-    return false;
-  }
-
-  private hideLoupe(): void {
-    if (this.loupeEl) {
-      this.loupeEl.classList.remove('visible');
-    }
-    this.restoreTitles();
-    if (this.loupeClone) {
-      this.loupeClone.remove();
-      this.loupeClone = null;
-    }
-    if (this.loupeRAF) {
-      cancelAnimationFrame(this.loupeRAF);
-      this.loupeRAF = null;
-    }
-  }
-
-  private suppressTitles(): void {
-    this.hiddenTitles = [];
-    const canvas = this.querySelector('#canvas');
-    if (!canvas) return;
-    for (const el of canvas.querySelectorAll('[title]')) {
-      this.hiddenTitles.push({ el, title: el.getAttribute('title')! });
-      el.removeAttribute('title');
-    }
-    // Also check shadow DOMs of canvas nodes and sticky notes
-    for (const node of canvas.querySelectorAll(
-      'temba-canvas-node, temba-sticky-note'
-    )) {
-      if (node.shadowRoot) {
-        for (const el of node.shadowRoot.querySelectorAll('[title]')) {
-          this.hiddenTitles.push({ el, title: el.getAttribute('title')! });
-          el.removeAttribute('title');
-        }
-      }
-    }
-  }
-
-  private restoreTitles(): void {
-    for (const { el, title } of this.hiddenTitles) {
-      el.setAttribute('title', title);
-    }
-    this.hiddenTitles = [];
-  }
-
-  private loupeCloneTime = 0;
-  private loupeClone: HTMLElement | null = null;
-  private loupeCursorCanvas: { x: number; y: number } = { x: 0, y: 0 };
-  private static readonly LOUPE_CLONE_INTERVAL = 200;
-
-  private rebuildLoupeClone(
-    canvas: HTMLElement,
-    canvasX: number,
-    canvasY: number,
-    visibleRadius: number
-  ): void {
-    const contentEl = this.loupeContentEl;
-    if (!contentEl) return;
-
-    if (this.loupeClone) {
-      this.loupeClone.remove();
-    }
-
-    const clone = document.createElement('div');
-    clone.className = 'loupe-clone';
-    clone.style.width = `${canvas.scrollWidth}px`;
-    clone.style.height = `${canvas.scrollHeight}px`;
-
-    const pad = 50; // extra padding for partially visible elements
-
-    // Clone only nearby nodes (light DOM — innerHTML captures rendered content)
-    const nodeEls = canvas.querySelectorAll('[data-node-uuid]');
-    for (const el of nodeEls) {
-      const htmlEl = el as HTMLElement;
-      const left = parseFloat(htmlEl.style.left) || 0;
-      const top = parseFloat(htmlEl.style.top) || 0;
-      const w = htmlEl.offsetWidth;
-      const h = htmlEl.offsetHeight;
-
-      // Bounding-box vs visible circle check
-      if (
-        left + w < canvasX - visibleRadius - pad ||
-        left > canvasX + visibleRadius + pad ||
-        top + h < canvasY - visibleRadius - pad ||
-        top > canvasY + visibleRadius + pad
-      )
-        continue;
-
-      // Wrap innerHTML in a plain div to avoid custom element upgrade
-      const div = document.createElement('div');
-      div.className = htmlEl.className;
-      div.style.cssText = htmlEl.style.cssText;
-      div.innerHTML = htmlEl.innerHTML;
-      clone.appendChild(div);
-    }
-
-    // Clone SVG connections (standard elements, no upgrade issue)
-    const svgs = canvas.querySelectorAll('svg.plumb-connector');
-    for (const svg of svgs) {
-      clone.appendChild(svg.cloneNode(true));
-    }
-
-    // Clone activity overlays
-    const overlays = canvas.querySelectorAll('.activity-overlay');
-    for (const overlay of overlays) {
-      clone.appendChild(overlay.cloneNode(true));
-    }
-
-    // Clone sticky notes from their shadow DOM
-    const stickyEls = canvas.querySelectorAll('temba-sticky-note');
-    for (const el of stickyEls) {
-      const stickyEl = el as HTMLElement;
-      const sw = stickyEl.offsetWidth;
-      const sh = stickyEl.offsetHeight;
-      const left = parseFloat(stickyEl.style.left) || 0;
-      const top = parseFloat(stickyEl.style.top) || 0;
-
-      if (
-        left + sw < canvasX - visibleRadius - pad ||
-        left > canvasX + visibleRadius + pad ||
-        top + sh < canvasY - visibleRadius - pad ||
-        top > canvasY + visibleRadius + pad
-      )
-        continue;
-
-      if (!stickyEl.shadowRoot) continue;
-
-      const div = document.createElement('div');
-      div.className = stickyEl.className;
-      div.style.cssText = stickyEl.style.cssText;
-      // Extract adopted stylesheets from the shadow root (Lit uses these
-      // instead of inline <style> tags), scoping all rules under .loupe-sticky
-      // to prevent them from leaking into the light DOM
-      div.classList.add('loupe-sticky');
-      const sheets = stickyEl.shadowRoot.adoptedStyleSheets;
-      let cssText = '';
-      for (const sheet of sheets) {
-        for (const rule of sheet.cssRules) {
-          const ruleText = rule.cssText;
-          if (ruleText.startsWith(':host')) {
-            cssText += ruleText.replace(/:host/g, '.loupe-sticky') + '\n';
-          } else {
-            // Scope non-:host rules under .loupe-sticky
-            const braceIdx = ruleText.indexOf('{');
-            if (braceIdx !== -1) {
-              const selector = ruleText.substring(0, braceIdx).trim();
-              const body = ruleText.substring(braceIdx);
-              cssText += `.loupe-sticky ${selector} ${body}\n`;
-            }
-          }
-        }
-      }
-      div.innerHTML =
-        `<style>${cssText}</style>` + stickyEl.shadowRoot.innerHTML;
-      clone.appendChild(div);
-    }
-
-    contentEl.appendChild(clone);
-    this.loupeClone = clone;
-  }
-
-  private updateLoupe(clientX: number, clientY: number): void {
-    const loupeEl = this.loupeEl;
-    const contentEl = this.loupeContentEl;
-    if (!loupeEl || !contentEl || !this.definition) return;
-
-    const canvas = this.querySelector('#canvas') as HTMLElement;
-    if (!canvas) return;
-    const canvasRect = canvas.getBoundingClientRect();
-
-    // Canvas coordinates under cursor
-    const canvasX = (clientX - canvasRect.left) / this.zoom;
-    const canvasY = (clientY - canvasRect.top) / this.zoom;
-
-    const D = Editor.LOUPE_DIAMETER;
-    const R = D / 2;
-    // Show content at a fixed comfortable scale inside the loupe
-    const loupeScale = Math.min(1.5, this.zoom * 2.5);
-    const visibleRadius = R / loupeScale;
-
-    // Position loupe at cursor
-    loupeEl.style.left = `${clientX}px`;
-    loupeEl.style.top = `${clientY}px`;
-    loupeEl.classList.add('visible');
-    if (this.hiddenTitles.length === 0) {
-      this.suppressTitles();
-    }
-
-    // Grid background
-    const bgSize = 20 * loupeScale;
-    contentEl.style.backgroundSize = `${bgSize}px ${bgSize}px`;
-    contentEl.style.backgroundPosition = `${R - canvasX * loupeScale}px ${R - canvasY * loupeScale}px`;
-
-    // Rebuild clone periodically or when cursor has moved significantly
-    const now = performance.now();
-    const dx = canvasX - this.loupeCursorCanvas.x;
-    const dy = canvasY - this.loupeCursorCanvas.y;
-    const moved =
-      Math.abs(dx) > visibleRadius * 0.5 || Math.abs(dy) > visibleRadius * 0.5;
-
-    if (
-      !this.loupeClone ||
-      (now - this.loupeCloneTime > Editor.LOUPE_CLONE_INTERVAL && moved)
-    ) {
-      this.rebuildLoupeClone(canvas, canvasX, canvasY, visibleRadius);
-      this.loupeCloneTime = now;
-      this.loupeCursorCanvas = { x: canvasX, y: canvasY };
-    }
-
-    // Position the clone so the canvas point under the cursor is at the loupe center
-    if (this.loupeClone) {
-      this.loupeClone.style.transform = `translate(${R - canvasX * loupeScale}px, ${R - canvasY * loupeScale}px) scale(${loupeScale})`;
-    }
-  }
-
-  private showDeleteConfirmation(): void {
-    const itemCount = this.selectedItems.size;
-    const itemType = itemCount === 1 ? 'item' : 'items';
-
-    // Create and show confirmation dialog
-    // Don't open a second dialog if one is already showing
-    if (this.deleteDialog?.open) return;
-
-    const dialog = document.createElement('temba-dialog') as Dialog;
-    dialog.header = 'Delete Items';
-    dialog.primaryButtonName = 'Delete';
-    dialog.cancelButtonName = 'Cancel';
-    dialog.destructive = true;
-    dialog.innerHTML = `<div style="padding: 20px;">Are you sure you want to delete ${itemCount} ${itemType}?</div>`;
-
-    dialog.addEventListener('temba-button-clicked', (event: any) => {
-      if (event.detail.button.name === 'Delete') {
-        this.deleteSelectedItems();
-        dialog.open = false;
-      }
-    });
-
-    // Add to document and show
-    document.body.appendChild(dialog);
-    dialog.open = true;
-    this.deleteDialog = dialog;
-
-    // Clean up dialog when closed
-    dialog.addEventListener('temba-dialog-hidden', () => {
-      document.body.removeChild(dialog);
-      this.deleteDialog = null;
-    });
-  }
-
-  private performReflow(): void {
-    if (!this.definition || this.definition.nodes.length === 0) return;
-
-    // Save current positions for discard (only on first pending operation)
-    this.capturePositionsOnce();
-
-    const stickies = this.definition._ui?.stickies || {};
-
-    // Save old node positions before reflow for sticky proximity calculation
-    const oldNodePositions: Record<string, FlowPosition> = {};
-    for (const node of this.definition.nodes) {
-      const ui = this.definition._ui?.nodes[node.uuid];
-      if (ui?.position) {
-        oldNodePositions[node.uuid] = { ...ui.position };
-      }
-    }
-
-    // Identify start node (first in sorted array)
-    const startNodeUuid = this.definition.nodes[0].uuid;
-
-    // Gather node sizes from DOM
-    const nodeSizes = new Map<string, { width: number; height: number }>();
-    const getNodeSize = (uuid: string): { width: number; height: number } => {
-      const element = this.querySelector(`[id="${uuid}"]`) as HTMLElement;
-      if (element) {
-        const size = {
-          width: element.offsetWidth,
-          height: element.offsetHeight
-        };
-        nodeSizes.set(uuid, size);
-        return size;
-      }
-      const fallback = { width: 200, height: 100 };
-      nodeSizes.set(uuid, fallback);
-      return fallback;
-    };
+    // Gather node sizes from DOM
+    const nodeSizes = new Map<string, { width: number; height: number }>();
+    const getNodeSize = (uuid: string): { width: number; height: number } => {
+      const element = this.querySelector(`[id="${uuid}"]`) as HTMLElement;
+      if (element) {
+        const size = {
+          width: element.offsetWidth,
+          height: element.offsetHeight
+        };
+        nodeSizes.set(uuid, size);
+        return size;
+      }
+      const fallback = { width: 200, height: 100 };
+      nodeSizes.set(uuid, fallback);
+      return fallback;
+    };
 
     // Compute new layout
     const newPositions = calculateLayeredLayout(
@@ -3193,119 +2253,6 @@ export class Editor extends RapidElement {
     this.selectedItems.clear();
   }
 
-  private updateSelectionBox(event: MouseEvent): void {
-    if (!this.selectionBox || !this.canvasMouseDown) return;
-
-    const canvasRect = this.querySelector('#canvas')?.getBoundingClientRect();
-    if (!canvasRect) return;
-
-    const relativeX = (event.clientX - canvasRect.left) / this.zoom;
-    const relativeY = (event.clientY - canvasRect.top) / this.zoom;
-
-    this.selectionBox = {
-      ...this.selectionBox,
-      endX: relativeX,
-      endY: relativeY
-    };
-
-    // Update selected items based on selection box
-    this.updateSelectedItemsFromBox();
-  }
-
-  private updateSelectedItemsFromBox(): void {
-    if (!this.selectionBox) return;
-
-    const newSelection = new Set<string>();
-
-    const boxLeft = Math.min(this.selectionBox.startX, this.selectionBox.endX);
-    const boxTop = Math.min(this.selectionBox.startY, this.selectionBox.endY);
-    const boxRight = Math.max(this.selectionBox.startX, this.selectionBox.endX);
-    const boxBottom = Math.max(
-      this.selectionBox.startY,
-      this.selectionBox.endY
-    );
-
-    // Check nodes
-    this.definition?.nodes.forEach((node) => {
-      const nodeElement = this.querySelector(
-        `[id="${node.uuid}"]`
-      ) as HTMLElement;
-      if (nodeElement) {
-        const position = this.definition._ui?.nodes[node.uuid]?.position;
-        if (position) {
-          const canvasRect =
-            this.querySelector('#canvas')?.getBoundingClientRect();
-
-          if (canvasRect) {
-            const nodeLeft = position.left;
-            const nodeTop = position.top;
-            const nodeRight = nodeLeft + nodeElement.offsetWidth;
-            const nodeBottom = nodeTop + nodeElement.offsetHeight;
-
-            // Check if selection box intersects with node
-            if (
-              boxLeft < nodeRight &&
-              boxRight > nodeLeft &&
-              boxTop < nodeBottom &&
-              boxBottom > nodeTop
-            ) {
-              newSelection.add(node.uuid);
-            }
-          }
-        }
-      }
-    });
-
-    // Check sticky notes
-    const stickies = this.definition?._ui?.stickies || {};
-    Object.entries(stickies).forEach(([uuid, sticky]) => {
-      if (sticky.position) {
-        const stickyElement = this.querySelector(
-          `temba-sticky-note[uuid="${uuid}"]`
-        ) as HTMLElement;
-
-        if (stickyElement) {
-          // Use clientWidth/clientHeight instead of getBoundingClientRect() to get element dimensions
-          // This avoids the coordinate system mismatch between viewport and canvas coordinates
-          const width = stickyElement.clientWidth;
-          const height = stickyElement.clientHeight;
-
-          // Use the canvas coordinates from the sticky's position
-          const stickyLeft = sticky.position.left;
-          const stickyTop = sticky.position.top;
-          const stickyRight = stickyLeft + width;
-          const stickyBottom = stickyTop + height;
-
-          // Check if selection box intersects with sticky
-          if (
-            boxLeft < stickyRight &&
-            boxRight > stickyLeft &&
-            boxTop < stickyBottom &&
-            boxBottom > stickyTop
-          ) {
-            newSelection.add(uuid);
-          }
-        }
-      }
-    });
-
-    this.selectedItems = newSelection;
-  }
-
-  private renderSelectionBox(): TemplateResult | string {
-    if (!this.selectionBox || !this.isSelecting) return '';
-
-    const left = Math.min(this.selectionBox.startX, this.selectionBox.endX);
-    const top = Math.min(this.selectionBox.startY, this.selectionBox.endY);
-    const width = Math.abs(this.selectionBox.endX - this.selectionBox.startX);
-    const height = Math.abs(this.selectionBox.endY - this.selectionBox.startY);
-
-    return html`<div
-      class="selection-box"
-      style="left: ${left}px; top: ${top}px; width: ${width}px; height: ${height}px;"
-    ></div>`;
-  }
-
   private renderCanvasDropPreview(): TemplateResult | string {
     if (!this.canvasDropPreview) return '';
 
@@ -3445,7 +2392,7 @@ export class Editor extends RapidElement {
    * as needed. Sacred items (just moved/dropped/resized) keep their
    * positions while other items are moved in the least-disruptive direction.
    */
-  private checkCollisionsAndReflow(sacredUuids: string[]): void {
+  public checkCollisionsAndReflow(sacredUuids: string[] = []): void {
     if (!this.definition) return;
 
     const allBounds: NodeBounds[] = [];
@@ -3489,892 +2436,20 @@ export class Editor extends RapidElement {
    * Find the temba-flow-node element at the given viewport coordinates.
    * Uses elementFromPoint which works for both mouse and touch input.
    */
-  private findTargetNodeAt(clientX: number, clientY: number): Element | null {
+  public findTargetNodeAt(clientX: number, clientY: number): Element | null {
     const el = document.elementFromPoint(clientX, clientY);
     return el?.closest('temba-flow-node') ?? null;
   }
 
-  /**
-   * Handle touchstart on the canvas element. Mirrors handleGlobalMouseDown
-   * + handleCanvasMouseDown for touch: starts selection on empty canvas,
-   * and detects double-tap to show the context menu.
-   */
-  private handleCanvasTouchStart(event: TouchEvent): void {
-    this.markTouchDevice();
-
-    const touch = event.touches[0];
-    if (!touch) return;
-
-    // Only handle touches directly on canvas/grid (not on nodes)
-    const target = event.target as HTMLElement;
-    if (target.closest('.draggable')) return;
-    if (target.id !== 'canvas' && target.id !== 'grid') return;
-
-    // Two-finger touch on canvas — record start position and enter the
-    // two-finger state immediately (even before any touchmove). If the
-    // fingers lift without panning, we show the context menu (handleTouchEnd).
-    if (event.touches.length >= 2) {
-      // Cancel any single-finger selection that the first touch started
-      this.canvasMouseDown = false;
-      this.isSelecting = false;
-      this.selectionBox = null;
-
-      this.isTwoFingerPanning = true;
-      this.twoFingerOnCanvas = true;
-      this.twoFingerDidPan = false;
-      this.twoFingerStartMidX =
-        (event.touches[0].clientX + event.touches[1].clientX) / 2;
-      this.twoFingerStartMidY =
-        (event.touches[0].clientY + event.touches[1].clientY) / 2;
-      this.lastPanX = this.twoFingerStartMidX;
-      this.lastPanY = this.twoFingerStartMidY;
-      return;
-    }
-
-    // Start selection box (mirrors handleCanvasMouseDown)
-    if (this.isReadOnly()) return;
-
-    this.canvasMouseDown = true;
-    this.dragStartPos = { x: touch.clientX, y: touch.clientY };
-
-    const canvasRect = this.querySelector('#canvas')?.getBoundingClientRect();
-    if (canvasRect) {
-      this.selectedItems.clear();
+  private updateCanvasSize(): void {
+    if (!this.definition) return;
 
-      const relativeX = (touch.clientX - canvasRect.left) / this.zoom;
-      const relativeY = (touch.clientY - canvasRect.top) / this.zoom;
+    const store = getStore();
+    if (!store) return;
 
-      this.selectionBox = {
-        startX: relativeX,
-        startY: relativeY,
-        endX: relativeX,
-        endY: relativeY
-      };
-    }
-
-    event.preventDefault();
-  }
-
-  /* c8 ignore stop */
-
-  private handleMouseMove(event: MouseEvent): void {
-    // Handle selection box drawing
-    if (this.canvasMouseDown && !this.isMouseDown) {
-      this.isSelecting = true;
-      this.updateSelectionBox(event);
-      this.requestUpdate(); // Force re-render
-      return;
-    }
-
-    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
-      document.querySelectorAll('temba-flow-node').forEach((node) => {
-        node.classList.remove(
-          'connection-target-valid',
-          'connection-target-invalid'
-        );
-      });
-
-      if (targetNode) {
-        this.targetId = targetNode.getAttribute('uuid');
-        // Check if target is different from source node (prevent self-targeting)
-        this.isValidTarget = this.targetId !== this.dragFromNodeId;
-
-        // Apply visual feedback based on validity
-        if (this.isValidTarget) {
-          targetNode.classList.add('connection-target-valid');
-        } else {
-          targetNode.classList.add('connection-target-invalid');
-        }
-
-        // Hide connection placeholder when over a node
-        this.connectionPlaceholder = null;
-      } else {
-        this.targetId = null;
-        this.isValidTarget = true;
-
-        // Show connection placeholder when over empty canvas
-        const canvas = this.querySelector('#canvas');
-        if (canvas) {
-          const canvasRect = canvas.getBoundingClientRect();
-          const relativeX = (event.clientX - canvasRect.left) / this.zoom;
-          const relativeY = (event.clientY - canvasRect.top) / this.zoom;
-
-          const placeholderWidth = 200;
-          const placeholderHeight = 64;
-          const arrowLength = ARROW_LENGTH;
-          const cursorGap = CURSOR_GAP;
-
-          // Determine if cursor is above the source exit using stored sourceY
-          const dragUp =
-            this.connectionSourceY != null
-              ? relativeY < this.connectionSourceY
-              : false;
-
-          let top: number;
-          if (dragUp) {
-            // Arrow points up: tip at cy + cursorGap.
-            // Placeholder bottom should sit just above the arrow tip.
-            top = relativeY + cursorGap - placeholderHeight;
-          } else {
-            // Arrow points down: tip at cy - cursorGap + arrowLength.
-            // Placeholder top sits just below the arrow tip.
-            top = relativeY - cursorGap + arrowLength;
-          }
-
-          this.connectionPlaceholder = {
-            position: {
-              left: relativeX - placeholderWidth / 2,
-              top
-            },
-            visible: true,
-            dragUp
-          };
-        }
-      }
-
-      // Force update to show/hide placeholder
-      this.requestUpdate();
-    }
-
-    // Handle item dragging
-    if (!this.isMouseDown || !this.currentDragItem) return;
-
-    this.lastPointerPos = { clientX: event.clientX, clientY: event.clientY };
-
-    const deltaX = event.clientX - this.dragStartPos.x + this.autoScrollDeltaX;
-    const deltaY = event.clientY - this.dragStartPos.y + this.autoScrollDeltaY;
-    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-
-    // Only start dragging if we've moved beyond the threshold
-    if (!this.isDragging && distance > DRAG_THRESHOLD) {
-      this.isDragging = true;
-      this.startAutoScroll();
-
-      // 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();
-      }
-    }
-
-    // If we're actually dragging, update positions
-    if (this.isDragging) {
-      this.updateDragPositions();
-    }
-  }
-
-  private performShiftDragCopy(): void {
-    if (!this.originalDragItem) return;
-
-    // Always use the original items as the source for copying
-    const itemsToCopy =
-      this.originalSelectedItems?.has(this.originalDragItem.uuid) &&
-      (this.originalSelectedItems?.size ?? 0) > 1
-        ? Array.from(this.originalSelectedItems!)
-        : [this.originalDragItem.uuid];
-
-    if (itemsToCopy.length === 0) return;
-
-    const uuidMapping = getStore().getState().duplicateNodes(itemsToCopy);
-
-    // Track only the top-level duplicated item UUIDs (not internal
-    // action/exit/category UUIDs). Accumulate across the discard window.
-    for (const uuid of itemsToCopy) {
-      const newUuid = uuidMapping[uuid];
-      if (newUuid && !this.copiedItemUuids.includes(newUuid)) {
-        this.copiedItemUuids.push(newUuid);
-      }
-    }
-    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.originalDragItem.uuid];
-    if (newDragUuid) {
-      this.currentDragItem = {
-        ...this.originalDragItem,
-        uuid: newDragUuid
-      };
-    }
-
-    // Update selected items to reference copies
-    if ((this.originalSelectedItems?.size ?? 0) > 1) {
-      const newSelectedItems = new Set<string>();
-      for (const uuid of this.originalSelectedItems!) {
-        const newUuid = uuidMapping[uuid];
-        newSelectedItems.add(newUuid || uuid);
-      }
-      this.selectedItems = newSelectedItems;
-    }
-  }
-
-  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;
-
-    // Convert screen + scroll delta to canvas delta
-    const deltaX =
-      (this.lastPointerPos.clientX -
-        this.dragStartPos.x +
-        this.autoScrollDeltaX) /
-      this.zoom;
-    const deltaY =
-      (this.lastPointerPos.clientY -
-        this.dragStartPos.y +
-        this.autoScrollDeltaY) /
-      this.zoom;
-
-    const itemsToMove =
-      this.selectedItems.has(this.currentDragItem.uuid) &&
-      this.selectedItems.size > 1
-        ? Array.from(this.selectedItems)
-        : [this.currentDragItem.uuid];
-
-    itemsToMove.forEach((uuid) => {
-      const element = this.querySelector(`[uuid="${uuid}"]`) as HTMLElement;
-      if (element) {
-        const type = element.tagName === 'TEMBA-FLOW-NODE' ? 'node' : 'sticky';
-        const position = this.getPosition(uuid, type);
-
-        if (position) {
-          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 {
-    if (this.autoScrollAnimationId !== null) return;
-
-    const editor = this.querySelector('#editor') as HTMLElement;
-    if (!editor) return;
-
-    const tick = () => {
-      if (
-        (!this.isDragging && !this.plumber?.connectionDragging) ||
-        !this.lastPointerPos
-      ) {
-        this.autoScrollAnimationId = null;
-        return;
-      }
-
-      const editorRect = editor.getBoundingClientRect();
-      const mouseX = this.lastPointerPos.clientX;
-      const mouseY = this.lastPointerPos.clientY;
-
-      let scrollDx = 0;
-      let scrollDy = 0;
-
-      // Left edge (including beyond)
-      const distFromLeft = mouseX - editorRect.left;
-      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 (including beyond)
-      const distFromRight = editorRect.right - mouseX;
-      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 (including beyond)
-      const distFromTop = mouseY - editorRect.top;
-      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 (including beyond)
-      const distFromBottom = editorRect.bottom - mouseY;
-      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) {
-        const beforeScrollLeft = editor.scrollLeft;
-        const beforeScrollTop = editor.scrollTop;
-
-        // Expand canvas if scrolling toward bottom/right edges
-        // Convert from scroll space to canvas space for expandCanvas
-        if (scrollDx > 0 || scrollDy > 0) {
-          const neededWidth =
-            (editor.scrollLeft + editor.clientWidth + scrollDx) / this.zoom;
-          const neededHeight =
-            (editor.scrollTop + editor.clientHeight + scrollDy) / this.zoom;
-          getStore()?.getState()?.expandCanvas(neededWidth, neededHeight);
-        }
-
-        editor.scrollLeft += scrollDx;
-        editor.scrollTop += scrollDy;
-
-        // Track actual scroll delta (browser clamps at boundaries)
-        const actualDx = editor.scrollLeft - beforeScrollLeft;
-        const actualDy = editor.scrollTop - beforeScrollTop;
-        this.autoScrollDeltaX += actualDx;
-        this.autoScrollDeltaY += actualDy;
-
-        if (actualDx !== 0 || actualDy !== 0) {
-          this.updateDragPositions();
-        }
-      }
-
-      this.autoScrollAnimationId = requestAnimationFrame(tick);
-    };
-
-    this.autoScrollAnimationId = requestAnimationFrame(tick);
-  }
-
-  private stopAutoScroll(): void {
-    if (this.autoScrollAnimationId !== null) {
-      cancelAnimationFrame(this.autoScrollAnimationId);
-      this.autoScrollAnimationId = null;
-    }
-  }
-
-  private handleMouseUp(event: MouseEvent): void {
-    // Handle selection box completion
-    if (this.canvasMouseDown && this.isSelecting) {
-      this.isSelecting = false;
-      this.selectionBox = null;
-      this.canvasMouseDown = false;
-      this.requestUpdate();
-      return;
-    }
-
-    // Handle canvas click (clear selection)
-    if (this.canvasMouseDown && !this.isSelecting) {
-      this.canvasMouseDown = false;
-      return;
-    }
-
-    // Handle item drag completion
-    if (!this.isMouseDown || !this.currentDragItem) return;
-
-    this.stopAutoScroll();
-
-    // If we were actually dragging, handle the drag end
-    if (this.isDragging) {
-      // Convert screen + scroll delta to canvas delta
-      const deltaX =
-        (event.clientX - this.dragStartPos.x + this.autoScrollDeltaX) /
-        this.zoom;
-      const deltaY =
-        (event.clientY - this.dragStartPos.y + this.autoScrollDeltaY) /
-        this.zoom;
-
-      // Determine what items were moved
-      const itemsToMove =
-        this.selectedItems.has(this.currentDragItem.uuid) &&
-        this.selectedItems.size > 1
-          ? Array.from(this.selectedItems)
-          : [this.currentDragItem.uuid];
-
-      // Update positions for all moved items
-      const newPositions: { [uuid: string]: FlowPosition } = {};
-
-      itemsToMove.forEach((uuid) => {
-        const type = this.definition.nodes.find((node) => node.uuid === uuid)
-          ? 'node'
-          : 'sticky';
-        const position = this.getPosition(uuid, type);
-
-        if (position) {
-          const newLeft = position.left + deltaX;
-          const newTop = position.top + deltaY;
-
-          // Snap to 20px grid for final position
-          const snappedLeft = snapToGrid(newLeft);
-          const snappedTop = snapToGrid(newTop);
-
-          const newPosition = { left: snappedLeft, top: snappedTop };
-          newPositions[uuid] = newPosition;
-
-          // Remove dragging/copy classes
-          const element = this.querySelector(`[uuid="${uuid}"]`) as HTMLElement;
-          if (element) {
-            element.classList.remove('dragging', 'drag-copy');
-            element.style.left = `${snappedLeft}px`;
-            element.style.top = `${snappedTop}px`;
-          }
-        }
-      });
-
-      if (Object.keys(newPositions).length > 0) {
-        // Suppress save if this was a shift+drag copy — the pending card
-        // gives the user a chance to abandon before the revision is saved.
-        if (this.currentDragIsCopy) {
-          this.pendingTimer.pending = true;
-          this.capturePositionsOnce();
-        }
-
-        getStore().getState().updateCanvasPositions(newPositions);
-
-        // Check for collisions and reflow after updating positions
-        // Allow DOM to update before checking collisions
-        setTimeout(() => {
-          this.checkCollisionsAndReflow(itemsToMove);
-          this.plumber.repaintEverything();
-        }, 0);
-      }
-
-      // Show/reset pending-changes card for shift+drag copy
-      if (this.currentDragIsCopy) {
-        this.pendingTimer.start();
-      }
-
-      this.selectedItems.clear();
-    }
-
-    // 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;
-    this.lastPointerPos = null;
-  }
-
-  /* c8 ignore start -- touch-only handlers */
-
-  /**
-   * Handle touch move on the document — mirrors handleMouseMove for
-   * both connection dragging and node/sticky dragging on touch devices.
-   */
-  private handleTouchMove(event: TouchEvent): void {
-    // --- Two-finger panning ---
-    if (event.touches.length >= 2) {
-      event.preventDefault();
-      const midX = (event.touches[0].clientX + event.touches[1].clientX) / 2;
-      const midY = (event.touches[0].clientY + event.touches[1].clientY) / 2;
-
-      if (this.isTwoFingerPanning) {
-        const dx = this.lastPanX - midX;
-        const dy = this.lastPanY - midY;
-        if (Math.abs(dx) > 2 || Math.abs(dy) > 2) {
-          this.twoFingerDidPan = true;
-        }
-        const editor = this.querySelector('#editor') as HTMLElement;
-        if (editor) {
-          editor.scrollBy(dx, dy);
-        }
-      }
-
-      // Cancel any in-progress single-finger actions
-      this.canvasMouseDown = false;
-      this.isSelecting = false;
-      this.selectionBox = null;
-
-      this.isTwoFingerPanning = true;
-      this.lastPanX = midX;
-      this.lastPanY = midY;
-      return;
-    }
-
-    const touch = event.touches[0];
-    if (!touch) return;
-
-    // --- Selection box drawing ---
-    if (this.canvasMouseDown && !this.isMouseDown) {
-      event.preventDefault();
-      this.isSelecting = true;
-
-      const canvasRect = this.querySelector('#canvas')?.getBoundingClientRect();
-      if (canvasRect && this.selectionBox) {
-        this.selectionBox = {
-          ...this.selectionBox,
-          endX: (touch.clientX - canvasRect.left) / this.zoom,
-          endY: (touch.clientY - canvasRect.top) / this.zoom
-        };
-        this.updateSelectedItemsFromBox();
-      }
-
-      this.requestUpdate();
-      return;
-    }
-
-    // --- Connection dragging ---
-    if (this.plumber.connectionDragging) {
-      event.preventDefault();
-
-      const targetNode = this.findTargetNodeAt(touch.clientX, touch.clientY);
-
-      // Clear previous target styles
-      document.querySelectorAll('temba-flow-node').forEach((node) => {
-        node.classList.remove(
-          'connection-target-valid',
-          'connection-target-invalid'
-        );
-      });
-
-      if (targetNode) {
-        this.targetId = targetNode.getAttribute('uuid');
-        this.isValidTarget = this.targetId !== this.dragFromNodeId;
-
-        if (this.isValidTarget) {
-          targetNode.classList.add('connection-target-valid');
-        } else {
-          targetNode.classList.add('connection-target-invalid');
-        }
-
-        this.connectionPlaceholder = null;
-      } else {
-        this.targetId = null;
-        this.isValidTarget = true;
-
-        const canvas = this.querySelector('#canvas');
-        if (canvas) {
-          const canvasRect = canvas.getBoundingClientRect();
-          const relativeX = (touch.clientX - canvasRect.left) / this.zoom;
-          const relativeY = (touch.clientY - canvasRect.top) / this.zoom;
-
-          const placeholderWidth = 200;
-          const placeholderHeight = 64;
-          const arrowLength = ARROW_LENGTH;
-          const cursorGap = CURSOR_GAP;
-
-          const dragUp =
-            this.connectionSourceY != null
-              ? relativeY < this.connectionSourceY
-              : false;
-
-          let top: number;
-          if (dragUp) {
-            top = relativeY + cursorGap - placeholderHeight;
-          } else {
-            top = relativeY - cursorGap + arrowLength;
-          }
-
-          this.connectionPlaceholder = {
-            position: {
-              left: relativeX - placeholderWidth / 2,
-              top
-            },
-            visible: true,
-            dragUp
-          };
-        }
-      }
-
-      this.requestUpdate();
-      return;
-    }
-
-    // --- Node/sticky dragging ---
-    if (!this.isMouseDown || !this.currentDragItem) return;
-
-    this.lastPointerPos = { clientX: touch.clientX, clientY: touch.clientY };
-
-    const deltaX = touch.clientX - this.dragStartPos.x + this.autoScrollDeltaX;
-    const deltaY = touch.clientY - this.dragStartPos.y + this.autoScrollDeltaY;
-    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-
-    if (!this.isDragging && distance > DRAG_THRESHOLD) {
-      this.isDragging = true;
-      this.startAutoScroll();
-    }
-
-    // Only prevent default scrolling once we're actually dragging.
-    // Before the threshold, allow the browser to fire synthetic click
-    // events for taps on buttons (remove, add-action, etc.).
-    if (this.isDragging) {
-      event.preventDefault();
-      this.updateDragPositions();
-    }
-  }
-
-  /**
-   * Handle touch end on the document — mirrors handleMouseUp for
-   * both connection dragging and node/sticky dragging on touch devices.
-   */
-  private handleTouchEnd(event: TouchEvent): void {
-    // --- Two-finger gesture end ---
-    if (this.isTwoFingerPanning) {
-      if (event.touches.length === 0) {
-        const didPan = this.twoFingerDidPan;
-        const onCanvas = this.twoFingerOnCanvas;
-        const midX = this.twoFingerStartMidX;
-        const midY = this.twoFingerStartMidY;
-
-        // Reset state
-        this.isTwoFingerPanning = false;
-        this.twoFingerOnCanvas = false;
-        this.twoFingerDidPan = false;
-
-        // Two-finger tap (no pan) on canvas → show context menu
-        if (!didPan && onCanvas) {
-          this.showContextMenuAt(midX, midY);
-        }
-      }
-      return;
-    }
-
-    const touch = event.changedTouches[0];
-
-    // --- Selection box completion ---
-    if (this.canvasMouseDown && this.isSelecting) {
-      this.isSelecting = false;
-      this.selectionBox = null;
-      this.canvasMouseDown = false;
-      this.requestUpdate();
-      return;
-    }
-
-    // --- Canvas tap (no drag) — clear selection ---
-    if (this.canvasMouseDown && !this.isSelecting) {
-      this.canvasMouseDown = false;
-      return;
-    }
-
-    // --- Connection dragging ---
-    if (this.plumber.connectionDragging) {
-      if (touch) {
-        const targetNode = this.findTargetNodeAt(touch.clientX, touch.clientY);
-        if (targetNode) {
-          this.targetId = targetNode.getAttribute('uuid');
-          this.isValidTarget = this.targetId !== this.dragFromNodeId;
-        }
-      }
-      return;
-    }
-
-    // --- Node/sticky dragging ---
-    if (!this.isMouseDown || !this.currentDragItem) return;
-
-    this.stopAutoScroll();
-
-    if (this.isDragging && touch) {
-      const deltaX =
-        (touch.clientX - this.dragStartPos.x + this.autoScrollDeltaX) /
-        this.zoom;
-      const deltaY =
-        (touch.clientY - this.dragStartPos.y + this.autoScrollDeltaY) /
-        this.zoom;
-
-      const itemsToMove =
-        this.selectedItems.has(this.currentDragItem.uuid) &&
-        this.selectedItems.size > 1
-          ? Array.from(this.selectedItems)
-          : [this.currentDragItem.uuid];
-
-      const newPositions: { [uuid: string]: FlowPosition } = {};
-
-      itemsToMove.forEach((uuid) => {
-        const type = this.definition.nodes.find((node) => node.uuid === uuid)
-          ? 'node'
-          : 'sticky';
-        const position = this.getPosition(uuid, type);
-
-        if (position) {
-          const newLeft = position.left + deltaX;
-          const newTop = position.top + deltaY;
-          const snappedLeft = snapToGrid(newLeft);
-          const snappedTop = snapToGrid(newTop);
-
-          newPositions[uuid] = { left: snappedLeft, top: snappedTop };
-
-          const element = this.querySelector(`[uuid="${uuid}"]`) as HTMLElement;
-          if (element) {
-            element.classList.remove('dragging');
-            element.style.left = `${snappedLeft}px`;
-            element.style.top = `${snappedTop}px`;
-          }
-        }
-      });
-
-      if (Object.keys(newPositions).length > 0) {
-        getStore().getState().updateCanvasPositions(newPositions);
-
-        // Check for collisions and reflow after updating positions
-        setTimeout(() => {
-          this.checkCollisionsAndReflow(itemsToMove);
-          this.plumber.repaintEverything();
-        }, 0);
-      }
-
-      this.selectedItems.clear();
-    }
-
-    // Reset all drag state
-    this.isDragging = false;
-    this.isMouseDown = false;
-    this.currentDragItem = null;
-    this.canvasMouseDown = false;
-    this.autoScrollDeltaX = 0;
-    this.autoScrollDeltaY = 0;
-    this.lastPointerPos = null;
-  }
-
-  /**
-   * Handle touchcancel — reset all touch-related state so the editor
-   * doesn't get stuck in a partial drag/selection mode.
-   */
-  private handleTouchCancel(): void {
-    this.isTwoFingerPanning = false;
-    this.isSelecting = false;
-    this.selectionBox = null;
-    this.canvasMouseDown = false;
-
-    if (this.isDragging && this.currentDragItem) {
-      // Remove dragging class from all moved items
-      const itemsToReset =
-        this.selectedItems.has(this.currentDragItem.uuid) &&
-        this.selectedItems.size > 1
-          ? Array.from(this.selectedItems)
-          : [this.currentDragItem.uuid];
-      itemsToReset.forEach((uuid) => {
-        const el = this.querySelector(`[uuid="${uuid}"]`) as HTMLElement;
-        if (el) el.classList.remove('dragging');
-      });
-    }
-
-    this.stopAutoScroll();
-    this.isDragging = false;
-    this.isMouseDown = false;
-    this.currentDragItem = null;
-    this.autoScrollDeltaX = 0;
-    this.autoScrollDeltaY = 0;
-    this.lastPointerPos = null;
-
-    // Clear connection drag visual state
-    document.querySelectorAll('temba-flow-node').forEach((node) => {
-      node.classList.remove(
-        'connection-target-valid',
-        'connection-target-invalid'
-      );
-    });
-    this.connectionPlaceholder = null;
-
-    this.requestUpdate();
-  }
-
-  /* c8 ignore stop */
-
-  private updateCanvasSize(): void {
-    if (!this.definition) return;
-
-    const store = getStore();
-    if (!store) return;
-
-    // Calculate required canvas size based on all elements
-    let maxWidth = 0;
-    let maxHeight = 0;
+    // Calculate required canvas size based on all elements
+    let maxWidth = 0;
+    let maxHeight = 0;
 
     // Check node positions
     this.definition.nodes.forEach((node) => {
@@ -4448,7 +2523,7 @@ export class Editor extends RapidElement {
     event.stopPropagation();
 
     // Ensure no sticky note contenteditable retains focus
-    this.blurActiveContentEditable();
+    this.dragManager.blurActiveContentEditable();
 
     this.showContextMenuAt(event.clientX, event.clientY);
   }
@@ -4457,7 +2532,7 @@ export class Editor extends RapidElement {
    * Show the canvas context menu at the given viewport coordinates.
    * Shared by right-click (mouse) and double-tap (touch).
    */
-  private showContextMenuAt(clientX: number, clientY: number): void {
+  public showContextMenuAt(clientX: number, clientY: number): void {
     if (this.isReadOnly()) return;
 
     const canvas = this.querySelector('#canvas');
@@ -5052,7 +3127,9 @@ export class Editor extends RapidElement {
         this.actionDragIsCopy = true;
         this.showActionOriginal(true);
       } else {
-        this.showDragHint();
+        (this.querySelector('#drag-hint') as HTMLElement)?.classList.add(
+          'visible'
+        );
       }
     }
 
@@ -5215,7 +3292,9 @@ export class Editor extends RapidElement {
     this.actionDragTargetNodeUuid = null;
     this.isActionExternalDrag = false;
     this.actionDragIsCopy = false;
-    this.hideDragHint();
+    (this.querySelector('#drag-hint') as HTMLElement)?.classList.remove(
+      'visible'
+    );
     this.actionDragLastDetail = null;
   }
 
@@ -5301,7 +3380,9 @@ export class Editor extends RapidElement {
     this.actionDragIsCopy = false;
     this.actionDragLastDetail = null;
     this.previousActionDragTargetNodeUuid = null;
-    this.hideDragHint();
+    (this.querySelector('#drag-hint') as HTMLElement)?.classList.remove(
+      'visible'
+    );
 
     // Check if we're dropping on an existing execute_actions node
     const targetNodeUuid = this.actionDragTargetNodeUuid;
@@ -5319,628 +3400,120 @@ export class Editor extends RapidElement {
               sourceNodeUuid: nodeUuid,
               actionIndex,
               mouseX,
-              mouseY,
-              isCopy
-            },
-            bubbles: false
-          })
-        );
-      }
-
-      // Clear state
-      this.canvasDropPreview = null;
-      this.actionDragTargetNodeUuid = null;
-      return;
-    }
-
-    // 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 && !isCopy) {
-      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);
-
-    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
-      );
-
-      // 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: [droppedAction],
-      exits: [
-        {
-          uuid: generateUUID(),
-          destination_uuid: null
-        }
-      ]
-    };
-
-    const newNodeUI: NodeUI = {
-      position,
-      type: 'execute_actions',
-      config: {}
-    };
-
-    // 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;
-
-    // Check for collisions and reflow after adding new node
-    requestAnimationFrame(() => {
-      this.checkCollisionsAndReflow([newNode.uuid]);
-    });
-  }
-
-  /** 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 [];
-    }
-
-    const baseLanguage = this.definition.language;
-    return this.getAvailableLanguages().filter(
-      (lang) => lang.code !== baseLanguage
-    );
-  }
-
-  private getLocalizationProgress(languageCode: string): {
-    total: number;
-    localized: number;
-  } {
-    if (
-      !this.definition ||
-      !languageCode ||
-      languageCode === this.definition.language
-    ) {
-      return { total: 0, localized: 0 };
-    }
-
-    const bundles = this.buildTranslationBundles(languageCode);
-    return this.getTranslationCounts(bundles);
-  }
-
-  private getLanguageLocalization(languageCode: string): Record<string, any> {
-    if (!this.definition?.localization) {
-      return {};
-    }
-    return this.definition.localization[languageCode] || {};
-  }
-
-  private buildTranslationBundles(
-    languageCode: string = this.languageCode
-  ): TranslationBundle[] {
-    if (
-      !this.definition ||
-      !languageCode ||
-      languageCode === this.definition.language
-    ) {
-      return [];
-    }
-
-    const languageLocalization = this.getLanguageLocalization(languageCode);
-    const bundles: TranslationBundle[] = [];
-
-    this.definition.nodes.forEach((node) => {
-      node.actions?.forEach((action) => {
-        const config = ACTION_CONFIG[action.type];
-        if (!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
-          });
-        }
-      });
-
-      const nodeUI = this.definition._ui?.nodes?.[node.uuid];
-      const nodeType = nodeUI?.type;
-      if (!nodeType) {
-        return;
-      }
-
-      const nodeConfig = NODE_CONFIG[nodeType];
-      // Include rule (case argument) translations when localizeRules is set
-      if (nodeUI?.config?.localizeRules && node.router?.cases?.length) {
-        const ruleTranslations = node.router.cases
-          .filter((c) => c.arguments?.length > 0 && c.arguments.some((a) => a))
-          .flatMap((c) =>
-            this.findTranslations(
-              'property',
-              c.uuid,
-              ['arguments'],
-              c,
-              languageLocalization
-            )
-          );
-
-        if (ruleTranslations.length > 0) {
-          bundles.push({
-            nodeUuid: node.uuid,
-            translations: ruleTranslations
-          });
-        }
-      }
-
-      if (
-        nodeUI?.config?.localizeCategories &&
-        nodeConfig?.localizable === 'categories' &&
-        node.router?.categories?.length
-      ) {
-        const translatableCategories = getTranslatableCategoriesForNode(
-          nodeType,
-          node.router.categories
-        );
-        const categoryTranslations = translatableCategories.flatMap(
-          (category) =>
-            this.findTranslations(
-              'category',
-              category.uuid,
-              ['name'],
-              category,
-              languageLocalization
-            )
-        );
-
-        if (categoryTranslations.length > 0) {
-          bundles.push({
-            nodeUuid: node.uuid,
-            translations: categoryTranslations
-          });
-        }
-      }
-    });
-
-    return bundles;
-  }
-
-  private findTranslations(
-    type: TranslationType,
-    uuid: string,
-    localizeableKeys: string[],
-    source: any,
-    localization: Record<string, any>
-  ): TranslationEntry[] {
-    const translations: TranslationEntry[] = [];
-
-    localizeableKeys.forEach((attribute) => {
-      if (attribute === 'quick_replies') {
-        return;
-      }
-
-      const pathSegments = attribute.split('.');
-      let from: any = source;
-      let to: any = [];
-
-      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;
-  }
-
-  private formatTranslationValue(value: any): string | null {
-    if (value === null || value === undefined) {
-      return null;
-    }
-
-    if (Array.isArray(value)) {
-      const normalized = value
-        .map((entry) => this.formatTranslationValue(entry))
-        .filter((entry) => !!entry) as string[];
-      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;
-  }
-
-  private getTranslationCounts(bundles: TranslationBundle[]): {
-    total: number;
-    localized: number;
-  } {
-    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 }
-    );
-  }
-
-  private handleLocalizationLanguageSelect(languageCode: string): void {
-    if (languageCode === this.languageCode) {
-      return;
-    }
-    this.handleLanguageChange(languageCode);
-  }
-
-  private handleLocalizationLanguageSelectChange(event: CustomEvent): void {
-    const select = event.target as any;
-    const nextValue = select?.values?.[0]?.value;
-    if (nextValue) {
-      this.handleLocalizationLanguageSelect(nextValue);
-    } else {
-      // Cleared — return to base language
-      const baseLanguage = this.definition?.language;
-      if (baseLanguage) {
-        this.handleLanguageChange(baseLanguage);
-      }
-    }
-  }
-
-  private handleLocalizationWindowClosed(): void {
-    this.localizationWindowHidden = true;
-  }
-
-  private toggleTranslationSettings(): void {
-    this.translationSettingsExpanded = !this.translationSettingsExpanded;
-  }
-
-  private handleLocalizationProgressToggleClick(event: MouseEvent): void {
-    const target = event.target as HTMLElement;
-    if (target.closest('.translation-settings-toggle')) {
-      return;
-    }
-    this.toggleTranslationSettings();
-  }
-
-  private handleLocalizationProgressToggleKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      this.toggleTranslationSettings();
-    }
-  }
-
-  private hasAnyNodeWithLocalizeCategories(): boolean {
-    if (!this.definition?._ui?.nodes) return false;
-    return Object.values(this.definition._ui.nodes).some(
-      (nodeUI: any) => nodeUI?.config?.localizeCategories
-    );
-  }
-
-  private async handleAutoTranslateClick(event?: Event): Promise<void> {
-    event?.preventDefault();
-    event?.stopPropagation();
-    if (this.viewingRevision) {
-      return;
-    }
-
-    if (this.autoTranslating) {
-      this.autoTranslating = false;
-      return;
-    }
-
-    this.autoTranslateDialogOpen = true;
-  }
-
-  private handleAutoTranslateDialogButton(event: CustomEvent): void {
-    const button = event.detail?.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;
-    }
-  }
-
-  private handleAutoTranslateModelChange(event: Event): void {
-    const select = event.target as any;
-    const nextModel = select?.values?.[0] || null;
-    this.autoTranslateModel = nextModel;
-  }
-
-  private shouldTranslateValue(text: string): boolean {
-    if (!text) {
-      return false;
-    }
-    const trimmed = text.trim();
-    if (trimmed.length <= 1) {
-      return false;
-    }
-    if (/^\d+$/.test(trimmed)) {
-      return false;
-    }
-    return true;
-  }
-
-  private async requestAutoTranslation(text: string): Promise<string | null> {
-    if (!this.autoTranslateModel || !this.definition) {
-      return null;
-    }
-
-    const payload = {
-      text,
-      lang: {
-        from: this.definition.language,
-        to: this.languageCode
+              mouseY,
+              isCopy
+            },
+            bubbles: false
+          })
+        );
       }
-    };
-
-    const response = await postJSON(
-      `/llm/translate/${this.autoTranslateModel.uuid}/`,
-      payload
-    );
-
-    if (response?.status === 200) {
-      const result = response.json?.result || response.json?.text;
-      return result ? String(result) : null;
-    }
-
-    throw new Error('Auto translation request failed');
-  }
-
-  private applyLocalizationUpdates(
-    updates: LocalizationUpdate[],
-    autoTranslated = false
-  ): void {
-    if (!updates.length || !this.definition) {
-      return;
-    }
 
-    const store = getStore();
-    if (!store) {
+      // Clear state
+      this.canvasDropPreview = null;
+      this.actionDragTargetNodeUuid = null;
       return;
     }
 
-    updates.forEach(({ uuid, translations }) => {
-      const normalized = Object.entries(translations).reduce(
-        (acc, [key, value]) => {
-          if (!value) {
-            return acc;
-          }
-          acc[key] = Array.isArray(value) ? value : [value];
-          return acc;
-        },
-        {} as Record<string, any>
-      );
-
-      const existing =
-        this.definition.localization?.[this.languageCode]?.[uuid] || {};
-      const merged = { ...existing, ...normalized };
-
-      store.getState().updateLocalization(this.languageCode, uuid, merged);
-
-      if (autoTranslated) {
-        zustand
-          .getState()
-          .markAutoTranslated(
-            this.languageCode,
-            uuid,
-            Object.keys(translations)
-          );
-      }
-    });
-  }
-
-  private async runAutoTranslation(): Promise<void> {
-    if (
-      !this.definition ||
-      this.languageCode === this.definition.language ||
-      !this.autoTranslateModel
-    ) {
-      this.autoTranslating = false;
+    // 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 && !isCopy) {
+      this.canvasDropPreview = null;
+      this.actionDragTargetNodeUuid = null;
       return;
     }
 
-    const bundles = this.buildTranslationBundles();
+    // 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);
 
-    for (const bundle of bundles) {
-      if (!this.autoTranslating) {
-        break;
-      }
+    if (!isCopy) {
+      // remove the action from the original node
+      const originalNode = this.definition.nodes.find(
+        (n) => n.uuid === nodeUuid
+      );
+      if (!originalNode) return;
 
-      const untranslated = bundle.translations.filter(
-        (translation) => !translation.to || translation.to.trim().length === 0
+      const updatedActions = originalNode.actions.filter(
+        (_a, idx) => idx !== actionIndex
       );
 
-      if (untranslated.length === 0) {
-        continue;
+      // 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);
       }
+    }
 
-      const updates: LocalizationUpdate[] = [];
-
-      for (const translation of untranslated) {
-        if (!this.autoTranslating) {
-          break;
+    // 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: [droppedAction],
+      exits: [
+        {
+          uuid: generateUUID(),
+          destination_uuid: null
         }
+      ]
+    };
 
-        if (!this.shouldTranslateValue(translation.from)) {
-          continue;
-        }
+    const newNodeUI: NodeUI = {
+      position,
+      type: 'execute_actions',
+      config: {}
+    };
 
-        const cached = this.translationCache.get(translation.from);
-        if (cached) {
-          updates.push({
-            uuid: translation.uuid,
-            translations: { [translation.attribute]: cached }
-          });
-          continue;
-        }
+    // add the new node
+    getStore()?.getState().addNode(newNode, newNodeUI);
 
-        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;
-        }
-      }
+    // Copy localizations from the original action to the new one
+    if (isCopy) {
+      this.copyActionLocalizations(action.uuid, droppedAction.uuid);
+    }
 
-      if (updates.length > 0) {
-        this.applyLocalizationUpdates(updates, true);
-      }
+    // clear the preview
+    this.canvasDropPreview = null;
+    this.actionDragTargetNodeUuid = null;
 
-      if (!this.autoTranslating) {
-        break;
+    // Check for collisions and reflow after adding new node
+    requestAnimationFrame(() => {
+      this.checkCollisionsAndReflow([newNode.uuid]);
+    });
+  }
+
+  /** 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))
+        );
       }
     }
-
-    this.autoTranslating = false;
   }
 
   private closeOpenWindows(): void {
     if (!this.issuesWindowHidden) {
-      this.handleIssuesWindowClosed();
+      this.issuesWindowHidden = true;
     }
     if (!this.revisionsWindowHidden) {
-      this.handleRevisionsWindowClosed();
-    }
-    if (!this.localizationWindowHidden) {
-      this.handleLocalizationWindowClosed();
+      this.getRevisionsWindow()?.close();
+      this.revisionsWindowHidden = true;
     }
     if (this.simulatorActive) {
       const simulator = document.querySelector('temba-simulator') as any;
@@ -5950,39 +3523,40 @@ export class Editor extends RapidElement {
 
   private closeFloatingWindows(): void {
     if (!this.issuesWindowHidden) {
-      this.handleIssuesWindowClosed();
+      this.issuesWindowHidden = true;
     }
     if (!this.revisionsWindowHidden) {
-      this.handleRevisionsWindowClosed();
-    }
-    if (!this.localizationWindowHidden) {
-      this.handleLocalizationWindowClosed();
+      this.getRevisionsWindow()?.close();
+      this.revisionsWindowHidden = true;
     }
   }
 
+  private getRevisionsWindow(): RevisionsWindow | null {
+    return this.querySelector(
+      'temba-revisions-window'
+    ) as RevisionsWindow | null;
+  }
+
+  // --- Issues window event handlers ---
+
   private handleIssuesTabClick(): void {
     if (!this.issuesWindowHidden) {
-      this.handleIssuesWindowClosed();
+      this.issuesWindowHidden = true;
       return;
     }
     this.closeOpenWindows();
     this.issuesWindowHidden = false;
   }
 
-  private handleIssuesWindowClosed(): void {
-    this.issuesWindowHidden = true;
-  }
-
-  private handleIssueItemClick(issue: FlowIssue): void {
-    const issuesWindow = document.getElementById(
-      'issues-window'
-    ) as FloatingWindow;
-    issuesWindow?.handleClose();
+  private handleIssueSelected(e: CustomEvent): void {
+    const { issue } = e.detail;
     this.issuesWindowHidden = true;
 
     this.focusNode(issue.node_uuid);
 
-    const node = this.definition.nodes.find((n) => n.uuid === issue.node_uuid);
+    const node = this.definition.nodes.find(
+      (n) => n.uuid === issue.node_uuid
+    );
     if (!node) return;
 
     if (issue.action_uuid) {
@@ -5998,519 +3572,52 @@ export class Editor extends RapidElement {
     }
   }
 
-  private handleRevisionsTabClick(): void {
-    if (!this.revisionsWindowHidden) {
-      this.handleRevisionsWindowClosed();
-      return;
-    }
-    this.closeOpenWindows();
-    this.fetchRevisions();
-    this.revisionsWindowHidden = false;
-  }
-
-  private handleRevisionsWindowClosed(): void {
-    this.resetRevisionsScroll();
-    this.revisionsWindowHidden = true;
-    if (this.viewingRevision) {
-      this.handleCancelRevisionView();
-    }
-  }
-
-  private resetRevisionsScroll() {
-    const list =
-      this.querySelector('#revisions-window').shadowRoot?.querySelector(
-        '.body'
-      );
-    if (list) {
-      list.scrollTop = 0;
-    }
-  }
-
-  private async fetchRevisions() {
-    this.isLoadingRevisions = true;
-    try {
-      const results = await fetchResults(
-        `/flow/revisions/${this.flow}/?version=${FLOW_SPEC_VERSION}`
-      );
-      this.revisions = results.slice(1);
-    } catch (e) {
-      console.error('Error fetching revisions', e);
-    } finally {
-      this.isLoadingRevisions = false;
-    }
-  }
-
-  private async handleRevisionClick(revision: Revision) {
-    if (this.viewingRevision?.id === revision.id) {
-      return;
-    }
-
-    if (!this.viewingRevision) {
-      // Save current state first
-      this.preRevertState = {
-        definition: this.definition,
-        dirtyDate: this.dirtyDate
-      };
-      this.revisionsBrowseLanguageCode = this.languageCode;
-    }
+  // --- Revisions window event handlers ---
 
-    this.viewingRevision = revision;
+  private handleRevisionViewed(): void {
+    this.viewingRevision = true;
     this.closeFlowSearch();
-    this.isLoadingRevisions = true;
     this.plumber?.reset();
-
-    try {
-      await getStore()
-        .getState()
-        .fetchRevision(`/flow/revisions/${this.flow}`, revision.id.toString());
-      if (this.revisionsBrowseLanguageCode) {
-        this.handleLanguageChange(this.revisionsBrowseLanguageCode);
-      }
-    } catch (e) {
-      console.error('Error fetching revision details', e);
-      this.handleCancelRevisionView();
-    } finally {
-      this.isLoadingRevisions = false;
-    }
   }
 
-  private handleCancelRevisionView() {
+  private handleRevisionCancelled(): void {
+    this.viewingRevision = false;
     this.plumber?.reset();
-    const preservedLanguageCode =
-      this.revisionsBrowseLanguageCode || this.languageCode;
-    if (this.preRevertState) {
-      const currentInfo = getStore().getState().flowInfo;
-      getStore().getState().setFlowContents({
-        definition: this.preRevertState.definition,
-        info: currentInfo
-      });
-      if (this.preRevertState.dirtyDate) {
-        getStore().getState().setDirtyDate(this.preRevertState.dirtyDate);
-      }
-      if (preservedLanguageCode) {
-        this.handleLanguageChange(preservedLanguageCode);
-      }
-    } else {
-      // Fallback if no pre-revert definition
-      getStore()
-        .getState()
-        .fetchRevision(`/flow/revisions/${this.flow}`)
-        .finally(() => {
-          if (preservedLanguageCode) {
-            this.handleLanguageChange(preservedLanguageCode);
-          }
-        });
-    }
-
-    this.viewingRevision = null;
-    this.preRevertState = null;
-    this.revisionsBrowseLanguageCode = null;
   }
 
-  private async handleRevertClick() {
-    if (!this.viewingRevision || !this.preRevertState) return;
-    this.plumber?.reset();
-    const preservedLanguageCode =
-      this.revisionsBrowseLanguageCode || this.languageCode;
-
-    // Use the content of the viewing revision (this.definition)
-    // but the revision number of the current head (preRevertState)
-    // so the server accepts it as a valid update
-    const definitionToSave = {
-      ...this.definition,
-      revision: this.preRevertState.definition.revision
-    };
-
-    await this.saveChanges(definitionToSave);
-    this.viewingRevision = null;
-    this.preRevertState = null;
+  private handleRevisionsClosed(): void {
+    this.viewingRevision = false;
     this.revisionsWindowHidden = true;
+  }
 
-    const revisionsWindow = document.getElementById(
-      'revisions-window'
-    ) as FloatingWindow;
-    revisionsWindow.handleClose();
+  private async handleRevisionReverted(e: CustomEvent): Promise<void> {
+    const { definition, languageCode } = e.detail;
+    this.viewingRevision = false;
+    this.revisionsWindowHidden = true;
+    this.plumber?.reset();
 
-    // Refresh revisions list to show the new one
-    this.fetchRevisions();
+    await this.saveChanges(definition);
 
-    // Fetch the latest version of the flow to ensure the store is up to date
     getStore()
       .getState()
       .fetchRevision(`/flow/revisions/${this.flow}`)
       .finally(() => {
-        if (preservedLanguageCode) {
-          this.handleLanguageChange(preservedLanguageCode);
+        if (languageCode) {
+          this.handleLanguageChange(languageCode);
         }
       });
-    this.revisionsBrowseLanguageCode = null;
-  }
-
-  private renderIssuesTab(): TemplateResult | string {
-    if (!this.flowIssues?.length) return '';
-    return html`
-      <temba-floating-tab
-        id="issues-tab"
-        icon="alert_warning"
-        label="Flow Issues"
-        color="tomato"
-        order="2"
-        .active=${!this.issuesWindowHidden}
-        @temba-button-clicked=${this.handleIssuesTabClick}
-      ></temba-floating-tab>
-    `;
-  }
-
-  private renderIssuesWindow(): TemplateResult | string {
-    if (!this.flowIssues?.length) return '';
-    return html`
-      <temba-floating-window
-        id="issues-window"
-        name="issues"
-        header="Flow Issues"
-        icon="alert_warning"
-        .width=${360}
-        .maxHeight=${600}
-        .top=${120}
-        color="tomato"
-        .hidden=${this.issuesWindowHidden}
-        @temba-dialog-hidden=${this.handleIssuesWindowClosed}
-      >
-        <div style="display:flex; flex-direction:column; gap:2px;">
-          ${this.flowIssues.map(
-            (issue) => html`
-              <div
-                class="issue-list-item"
-                @click=${() => this.handleIssueItemClick(issue)}
-              >
-                <temba-icon name="alert_warning" size="1.2"></temba-icon>
-                <span>${formatIssueMessage(issue)}</span>
-              </div>
-            `
-          )}
-        </div>
-      </temba-floating-window>
-    `;
-  }
-
-  private renderRevisionsWindow(): TemplateResult | string {
-    return html`
-      <temba-floating-window
-        id="revisions-window"
-        name="revisions"
-        header="Revisions"
-        icon="revisions"
-        .width=${240}
-        .maxHeight=${400}
-        .top=${120}
-        color="rgb(142, 94, 167)"
-        .saving=${this.isSaving}
-        .hidden=${this.revisionsWindowHidden}
-        @temba-dialog-hidden=${this.handleRevisionsWindowClosed}
-      >
-        <div class="localization-window-content">
-          <div
-            class="revisions-list"
-            style="display:flex; flex-direction:column; gap:8px; overflow-y:auto; padding-bottom:10px;"
-          >
-            ${this.isLoadingRevisions && !this.revisions.length
-              ? html`<temba-loading></temba-loading>`
-              : this.revisions.map((rev) => {
-                  const isSelected = this.viewingRevision?.id === rev.id;
-                  return html`
-                    <div
-                      class="revision-item ${isSelected ? 'selected' : ''}"
-                      style="padding:8px; border-radius:4px; cursor:pointer; background:${
-                        isSelected
-                          ? '#f0f6ff' // Light blue bg for selected
-                          : '#f9fafb'
-                      }; border:1px solid ${
-                        isSelected ? '#a4cafe' : '#e5e7eb'
-                      }; transition: all 0.2s ease;"
-                      @click=${() => this.handleRevisionClick(rev)}
-                    >
-                      <div
-                        style="display:flex; justify-content:space-between; align-items:center;"
-                      >
-                        <div
-                          class="revision-header"
-                          style="margin-bottom: 2px;"
-                        >
-                          <div
-                            style="font-weight:600; font-size:13px; color:#111827;"
-                          >
-                            <temba-date value=${
-                              rev.created_on
-                            } display="duration"></temba-date>
-                            
-                          </div>
-                          <div style="font-size:11px; color:#6b7280;">
-                            ${rev.user.name || rev.user.username}
-                          </div>
-                        </div>
-                        ${
-                          isSelected
-                            ? html`<button
-                                class="revert-button"
-                                @click=${this.handleRevertClick}
-                              >
-                                Revert
-                              </button>`
-                            : html``
-                        }
-                        
-                        </button>
-                      </div>
-
-                      ${
-                        rev.comment
-                          ? html`<div
-                              style="font-size:12px; color:#4b5563; margin-top:4px;"
-                            >
-                              ${rev.comment}
-                            </div>`
-                          : ''
-                      }
-                      
-                    </div>
-                  `;
-                })}
-          </div>
-        </div>
-      </temba-floating-window>
-    `;
-  }
-
-  private renderLocalizationWindow(): TemplateResult | string {
-    const languages = this.getLocalizationLanguages();
-    if (!languages.length) {
-      return html``;
-    }
-
-    const baseLanguage = this.definition?.language;
-    const isBaseSelected =
-      !this.languageCode ||
-      this.languageCode === baseLanguage ||
-      !languages.some((lang) => lang.code === this.languageCode);
-    const activeLanguage = !isBaseSelected
-      ? languages.find((lang) => lang.code === this.languageCode)
-      : null;
-    const progress = this.getLocalizationProgress(
-      isBaseSelected ? '' : this.languageCode
-    );
-    const settingsPanelId = 'translation-settings-panel';
-    const remainingTranslations = Math.max(
-      progress.total - progress.localized,
-      0
-    );
-    const hasTranslations = progress.total > 0;
-    const hasPendingTranslations = remainingTranslations > 0;
-
-    return html`
-      <temba-floating-window
-        id="localization-window"
-        name="localization"
-        header="Translations"
-        icon="language"
-        .width=${360}
-        .maxHeight=${600}
-        .top=${120}
-        color="#5b7ea6"
-        .hidden=${this.localizationWindowHidden}
-        @temba-dialog-hidden=${this.handleLocalizationWindowClosed}
-      >
-        <div class="localization-window-content">
-          <div class="localization-header">
-            Select a language to view or translate your flow content.
-          </div>
-          <div class="localization-language-row">
-            <temba-select
-              flavor="small"
-              class="localization-language-select"
-              placeholder="Select a language"
-              ?clearable=${true}
-              .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>
-            ${''/* auto translate button hidden pending backend changes */}
-          </div>
-          <div
-            class="localization-progress ${isBaseSelected ? 'disabled' : ''}"
-          >
-            <div class="localization-progress-summary">
-              ${isBaseSelected
-                  ? html`<span
-                      >Select a language to see translation progress.</span
-                    >`
-                  : !hasTranslations
-                    ? // prettier-ignore
-                      html`<span>Add content or enable more options to start translating.</span>`
-                    : hasPendingTranslations
-                      ? // prettier-ignore
-                        html`<span>${progress.localized} of ${progress.total} items translated</span>`
-                      : html`<span>All items are translated.</span>`}
-            </div>
-            ${''/* auto translate error hidden pending backend changes */}
-            <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>
-              <div
-                class="translation-settings-toggle"
-                @click=${this.toggleTranslationSettings}
-                aria-expanded="${this.translationSettingsExpanded}"
-                aria-controls="${settingsPanelId}"
-              >
-                <span
-                  class="translation-settings-arrow ${this
-                    .translationSettingsExpanded
-                    ? 'expanded'
-                    : ''}"
-                ></span>
-              </div>
-            </div>
-            ${this.translationSettingsExpanded
-              ? html`<div
-                  id="${settingsPanelId}"
-                  class="translation-settings"
-                >
-                </div>`
-              : ''}
-          </div>
-        </div>
-      </temba-floating-window>
-    `;
-  }
-
-  private renderAutoTranslateDialog(): TemplateResult | string {
-    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>
-    `;
   }
 
   private renderToolbarElement(): TemplateResult {
-    const languages = this.getLocalizationLanguages();
-    const availableLanguages = this.getAvailableLanguages();
-    const baseLanguage = this.definition?.language;
-    const baseLanguageName =
-      availableLanguages.find((lang) => lang.code === baseLanguage)?.name ||
-      baseLanguage ||
-      'Primary language';
-    const isBaseSelected =
-      !this.languageCode ||
-      this.languageCode === baseLanguage ||
-      !languages.some((lang) => lang.code === this.languageCode);
-    const activeLanguage = !isBaseSelected
-      ? languages.find((lang) => lang.code === this.languageCode)
-      : null;
-    const currentLanguage = activeLanguage || {
-      code: baseLanguage || '',
-      name: baseLanguageName
-    };
-    const progress = this.getLocalizationProgress(
-      isBaseSelected ? '' : this.languageCode
-    );
-    const percent = Math.round(
-      (progress.localized / Math.max(progress.total, 1)) * 100
-    );
-    const languageOptions = [
-      {
-        name: baseLanguageName,
-        value: PRIMARY_LANGUAGE_OPTION_VALUE
-      },
-      ...languages.map((lang) => {
-        const localizationProgress = this.getLocalizationProgress(lang.code);
-        const localizationPercent = Math.round(
-          (localizationProgress.localized /
-            Math.max(localizationProgress.total, 1)) *
-            100
-        );
-        return {
-          name: lang.name,
-          value: lang.code,
-          percent: localizationPercent
-        };
-      })
-    ];
-
     return html`
       <temba-editor-toolbar
         ?message-view=${this.showMessageTable}
         .zoom=${this.zoom}
-        ?zoom-initialized=${this.zoomInitialized}
-        ?zoom-fitted=${this.zoomFitted}
+        ?zoom-initialized=${this.zoomManager.isZoomInitialized}
+        ?zoom-fitted=${this.zoomManager.isZoomFitted}
         ?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)}
+        ?search-disabled=${this.getRevisionsWindow()?.isViewingRevision ?? false}
         @temba-button-clicked=${this.handleToolbarAction}
       ></temba-editor-toolbar>
     `;
@@ -6523,30 +3630,29 @@ export class Editor extends RapidElement {
         this.showMessageTable = detail.view === 'table';
         break;
       case 'zoom-in':
-        this.zoomIn();
+        this.zoomManager.zoomIn();
         break;
       case 'zoom-out':
-        this.zoomOut();
+        this.zoomManager.zoomOut();
         break;
       case 'zoom-to-fit':
-        this.zoomToFit();
+        this.zoomManager.zoomToFit();
         break;
       case 'zoom-to-full':
-        this.zoomToFull();
+        this.zoomManager.zoomToFull();
         break;
       case 'revisions':
-        this.handleRevisionsTabClick();
+        if (!this.revisionsWindowHidden) {
+          this.getRevisionsWindow()?.close();
+          this.revisionsWindowHidden = true;
+        } else {
+          this.closeOpenWindows();
+          this.revisionsWindowHidden = false;
+        }
         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;
     }
   }
 
@@ -6601,9 +3707,7 @@ export class Editor extends RapidElement {
       return;
     }
 
-    const node = this.definition.nodes.find(
-      (n) => n.uuid === result.nodeUuid
-    );
+    const node = this.definition.nodes.find((n) => n.uuid === result.nodeUuid);
     if (!node) return;
 
     const nodeUI = this.definition._ui?.nodes[result.nodeUuid];
@@ -6680,8 +3784,8 @@ export class Editor extends RapidElement {
     }
   }
 
-  private isReadOnly(): boolean {
-    return this.viewingRevision !== null || this.isTranslating;
+  public isReadOnly(): boolean {
+    return this.viewingRevision || this.isTranslating;
   }
 
   public render(): TemplateResult {
@@ -6699,142 +3803,166 @@ export class Editor extends RapidElement {
     const hasCorruptedUI =
       this.definition &&
       this.definition.nodes.length > 0 &&
-      this.definition.nodes.some(
-        (n) => !this.definition._ui?.nodes[n.uuid]
-      );
-
-    return html`${style} ${this.renderIssuesWindow()}
-      ${this.renderRevisionsWindow()} ${this.renderLocalizationWindow()}
+      this.definition.nodes.some((n) => !this.definition._ui?.nodes[n.uuid]);
+
+    return html`${style}
+      <temba-issues-window
+        .issues=${this.flowIssues}
+        ?hidden=${this.issuesWindowHidden}
+        @temba-issue-selected=${this.handleIssueSelected}
+        @temba-issues-closed=${() => (this.issuesWindowHidden = true)}
+      ></temba-issues-window>
+      <temba-revisions-window
+        .flow=${this.flow}
+        ?hidden=${this.revisionsWindowHidden}
+        ?saving=${this.isSaving}
+        @temba-revision-viewed=${this.handleRevisionViewed}
+        @temba-revision-cancelled=${this.handleRevisionCancelled}
+        @temba-revision-reverted=${this.handleRevisionReverted}
+        @temba-revisions-closed=${this.handleRevisionsClosed}
+      ></temba-revisions-window>
       <div id="editor-container">
         ${this.renderToolbarElement()}
         <div id="editor">
           ${this.showMessageTable
             ? html`<temba-message-table></temba-message-table>`
             : html`
-          ${hasCorruptedUI
-            ? html`<div class="empty-flow">
-                <div class="empty-flow-content">
-                  <div class="empty-flow-title">
-                    Unable to display this flow
-                  </div>
-                  <div class="empty-flow-description">
-                    This flow's layout data does not match its nodes. It may
-                    have been corrupted during an export or migration. Please
-                    re-export the flow from the original workspace and try
-                    importing it again.
+                ${hasCorruptedUI
+                  ? html`<div class="empty-flow">
+                      <div class="empty-flow-content">
+                        <div class="empty-flow-title">
+                          Unable to display this flow
+                        </div>
+                        <div class="empty-flow-description">
+                          This flow's layout data does not match its nodes. It
+                          may have been corrupted during an export or migration.
+                          Please re-export the flow from the original workspace
+                          and try importing it again.
+                        </div>
+                      </div>
+                    </div>`
+                  : this.definition &&
+                      this.definition.nodes.length === 0 &&
+                      !this.isReadOnly()
+                    ? html`<div class="empty-flow">
+                        <div class="empty-flow-content">
+                          <div class="empty-flow-title">This flow is empty</div>
+                          <div class="empty-flow-description">
+                            Get started by adding your first action or split to
+                            define how this flow will work.
+                          </div>
+                          <button
+                            class="empty-flow-button"
+                            @click=${this.handleEmptyFlowClick}
+                          >
+                            Add first step
+                          </button>
+                        </div>
+                      </div>`
+                    : ''}
+                <div
+                  id="grid"
+                  class="${this.viewingRevision
+                    ? 'viewing-revision'
+                    : ''}"
+                  style="min-width:${100 / this.zoom}%;min-height:${100 /
+                  this.zoom}%;width:${this.canvasSize.width}px; height:${this
+                    .canvasSize.height}px;transform:scale(${this.zoom})"
+                >
+                  <div
+                    id="canvas"
+                    class="${getClasses({
+                      'viewing-revision':
+                        this.viewingRevision,
+                      'read-only-connections':
+                        this.viewingRevision ||
+                        this.isTranslating
+                    })}"
+                  >
+                    ${this.definition && !hasCorruptedUI
+                      ? repeat(
+                          [...this.definition.nodes].sort((a, b) =>
+                            a.uuid.localeCompare(b.uuid)
+                          ),
+                          (node) => node.uuid,
+                          (node) => {
+                            const nodeUI = this.definition._ui?.nodes[
+                              node.uuid
+                            ] || {
+                              position: { left: 0, top: 0 },
+                              type: node.router?.wait
+                                ? 'wait_for_response'
+                                : 'execute_actions'
+                            };
+                            const position = nodeUI.position;
+
+                            const dragging =
+                              this.isDragging &&
+                              this.currentDragItem?.uuid === node.uuid;
+
+                            const selected = this.selectedItems.has(node.uuid);
+
+                            // first node is the flow start (nodes are sorted by position)
+                            const isFlowStart =
+                              this.definition.nodes.length > 0 &&
+                              this.definition.nodes[0].uuid === node.uuid;
+
+                            return html`<temba-flow-node
+                              class="draggable ${dragging
+                                ? 'dragging'
+                                : ''} ${selected
+                                ? 'selected'
+                                : ''} ${isFlowStart ? 'flow-start' : ''}"
+                              @mousedown=${(e: MouseEvent) =>
+                                this.dragManager.handleMouseDown(e)}
+                              @touchstart=${(e: TouchEvent) =>
+                                this.dragManager.handleItemTouchStart(e)}
+                              uuid=${node.uuid}
+                              data-node-uuid=${node.uuid}
+                              style="left:${position.left}px; top:${position.top}px;transition: all 0.2s ease-in-out;"
+                              .plumber=${this.plumber}
+                              .node=${node}
+                              .ui=${nodeUI}
+                              @temba-node-deleted=${(event) => {
+                                this.deleteNodes([event.detail.uuid]);
+                              }}
+                            ></temba-flow-node>`;
+                          }
+                        )
+                      : hasCorruptedUI
+                        ? ''
+                        : html`<temba-loading></temba-loading>`}
+                    ${repeat(
+                      Object.entries(stickies),
+                      ([uuid]) => uuid,
+                      ([uuid, sticky]) => {
+                        const position = sticky.position || { left: 0, top: 0 };
+                        const dragging =
+                          this.isDragging &&
+                          this.currentDragItem?.uuid === uuid;
+                        const selected = this.selectedItems.has(uuid);
+                        return html`<temba-sticky-note
+                          class="draggable ${dragging
+                            ? 'dragging'
+                            : ''} ${selected ? 'selected' : ''}"
+                          @mousedown=${(e: MouseEvent) =>
+                            this.dragManager.handleMouseDown(e)}
+                          @touchstart=${(e: TouchEvent) =>
+                            this.dragManager.handleItemTouchStart(e)}
+                          style="left:${position.left}px; top:${position.top}px;"
+                          uuid=${uuid}
+                          .data=${sticky}
+                          .dragging=${dragging}
+                          .selected=${selected}
+                        ></temba-sticky-note>`;
+                      }
+                    )}
+                    ${this.dragManager.renderSelectionBox()}
+                    ${this.renderCanvasDropPreview()}
+                    ${this.renderConnectionPlaceholder()}
                   </div>
                 </div>
-              </div>`
-            : this.definition &&
-                this.definition.nodes.length === 0 &&
-                !this.isReadOnly()
-              ? html`<div class="empty-flow">
-                  <div class="empty-flow-content">
-                    <div class="empty-flow-title">This flow is empty</div>
-                    <div class="empty-flow-description">
-                      Get started by adding your first action or split to define
-                      how this flow will work.
-                    </div>
-                    <button
-                      class="empty-flow-button"
-                      @click=${this.handleEmptyFlowClick}
-                    >
-                      Add first step
-                    </button>
-                  </div>
-                </div>`
-              : ''}
-          <div
-            id="grid"
-            class="${this.viewingRevision ? 'viewing-revision' : ''}"
-            style="min-width:${100 / this.zoom}%;min-height:${100 /
-            this.zoom}%;width:${this.canvasSize.width}px; height:${this
-              .canvasSize.height}px;transform:scale(${this.zoom})"
-          >
-            <div
-              id="canvas"
-              class="${getClasses({
-                'viewing-revision': !!this.viewingRevision,
-                'read-only-connections':
-                  !!this.viewingRevision || this.isTranslating
-              })}"
-            >
-              ${this.definition && !hasCorruptedUI
-                ? repeat(
-                    [...this.definition.nodes].sort((a, b) =>
-                      a.uuid.localeCompare(b.uuid)
-                    ),
-                    (node) => node.uuid,
-                    (node) => {
-                      const nodeUI = this.definition._ui?.nodes[node.uuid] || {
-                        position: { left: 0, top: 0 },
-                        type: node.router?.wait
-                          ? 'wait_for_response'
-                          : 'execute_actions'
-                      };
-                      const position = nodeUI.position;
-
-                      const dragging =
-                        this.isDragging &&
-                        this.currentDragItem?.uuid === node.uuid;
-
-                      const selected = this.selectedItems.has(node.uuid);
-
-                      // first node is the flow start (nodes are sorted by position)
-                      const isFlowStart =
-                        this.definition.nodes.length > 0 &&
-                        this.definition.nodes[0].uuid === node.uuid;
-
-                      return html`<temba-flow-node
-                        class="draggable ${dragging
-                          ? 'dragging'
-                          : ''} ${selected ? 'selected' : ''} ${isFlowStart
-                          ? 'flow-start'
-                          : ''}"
-                        @mousedown=${this.handleMouseDown.bind(this)}
-                        @touchstart=${this.handleItemTouchStart.bind(this)}
-                        uuid=${node.uuid}
-                        data-node-uuid=${node.uuid}
-                        style="left:${position.left}px; top:${position.top}px;transition: all 0.2s ease-in-out;"
-                        .plumber=${this.plumber}
-                        .node=${node}
-                        .ui=${nodeUI}
-                        @temba-node-deleted=${(event) => {
-                          this.deleteNodes([event.detail.uuid]);
-                        }}
-                      ></temba-flow-node>`;
-                    }
-                  )
-                : hasCorruptedUI
-                  ? ''
-                  : html`<temba-loading></temba-loading>`}
-              ${repeat(
-                Object.entries(stickies),
-                ([uuid]) => uuid,
-                ([uuid, sticky]) => {
-                  const position = sticky.position || { left: 0, top: 0 };
-                  const dragging =
-                    this.isDragging && this.currentDragItem?.uuid === uuid;
-                  const selected = this.selectedItems.has(uuid);
-                  return html`<temba-sticky-note
-                    class="draggable ${dragging ? 'dragging' : ''} ${selected
-                      ? 'selected'
-                      : ''}"
-                    @mousedown=${this.handleMouseDown.bind(this)}
-                    @touchstart=${this.handleItemTouchStart.bind(this)}
-                    style="left:${position.left}px; top:${position.top}px;"
-                    uuid=${uuid}
-                    .data=${sticky}
-                    .dragging=${dragging}
-                    .selected=${selected}
-                  ></temba-sticky-note>`;
-                }
-              )}
-              ${this.renderSelectionBox()} ${this.renderCanvasDropPreview()}
-              ${this.renderConnectionPlaceholder()}
-            </div>
-          </div>
-          `}
+              `}
         </div>
         ${this.renderPendingCard()}
         <div class="drag-hint" id="drag-hint">Hold ⇧ to duplicate</div>
@@ -6869,11 +3997,21 @@ export class Editor extends RapidElement {
         : ''}
       <temba-flow-search
         .scope=${this.showMessageTable ? 'table' : 'flow'}
-        .includeCategories=${this.isTranslating && this.hasAnyNodeWithLocalizeCategories()}
+        .includeCategories=${false}
         @temba-search-result-selected=${this.handleSearchResultSelected}
       ></temba-flow-search>
-      ${!this.showMessageTable ? html`
-        ${this.renderIssuesTab()}
-      ` : ''} `;
+      ${!this.showMessageTable && this.flowIssues?.length
+        ? html`
+            <temba-floating-tab
+              id="issues-tab"
+              icon="alert_warning"
+              label="Flow Issues"
+              color="tomato"
+              order="2"
+              .active=${!this.issuesWindowHidden}
+              @temba-button-clicked=${() => this.handleIssuesTabClick()}
+            ></temba-floating-tab>
+          `
+        : ''} `;
   }
 }