@nyaruka/temba-components 0.141.1 → 0.142.0

package/src/flow/Editor.ts

@@ -31,10 +31,13 @@ import {
   formatIssueMessage,
   getNodeBounds,
   calculateReflowPositions,
+  isRightClick,
   NodeBounds,
   snapToGrid
 } from './utils';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
+import { calculateLayeredLayout, placeStickyNotes } from './reflow';
+import { FloatingTab } from '../display/FloatingTab';
 
 interface Revision {
   id: number;
@@ -65,6 +68,7 @@ import { Dialog } from '../layout/Dialog';
 import { CanvasMenu, CanvasMenuSelection } from './CanvasMenu';
 import { NodeTypeSelector, NodeTypeSelection } from './NodeTypeSelector';
 import { FloatingWindow } from '../layout/FloatingWindow';
+import { Icon } from '../Icons';
 
 export function findNodeForExit(
   definition: FlowDefinition,
@@ -96,6 +100,8 @@ export interface SelectionBox {
 }
 
 const DRAG_THRESHOLD = 5;
+const AUTO_SCROLL_EDGE_ZONE = 100;
+const AUTO_SCROLL_MAX_SPEED = 15;
 
 type TranslationType = 'property' | 'category';
 
@@ -126,6 +132,10 @@ interface LocalizationUpdate {
 
 const AUTO_TRANSLATE_MODELS_ENDPOINT = '/api/internal/llms.json';
 
+// How long the reflow auto-save countdown runs (in ms).
+// Used in both the CSS animation and the JS setTimeout.
+const REFLOW_AUTO_SAVE_DELAY = 5000;
+
 // Offset for positioning dropped action node relative to mouse cursor
 // Keep small to make drop location close to cursor position
 const DROP_PREVIEW_OFFSET_X = 20;
@@ -200,6 +210,12 @@ export class Editor extends RapidElement {
   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 lastMouseEvent: MouseEvent | null = null;
+
   // Selection state
   @state()
   private selectedItems: Set<string> = new Set();
@@ -273,6 +289,28 @@ export class Editor extends RapidElement {
   @state()
   private saveError: string | null = null;
 
+  @state()
+  private zoom = 1.0;
+
+  @state()
+  private zoomFitted = false;
+
+  @state()
+  private reflowPending = false;
+
+  @state()
+  private reflowUnsaved = false;
+
+  private savedReflowPositions: Record<string, FlowPosition> | null = null;
+  private reflowAutoSaveTimer: ReturnType<typeof setTimeout> | null = null;
+
+  private clearReflowAutoSaveTimer(): void {
+    if (this.reflowAutoSaveTimer !== null) {
+      clearTimeout(this.reflowAutoSaveTimer);
+      this.reflowAutoSaveTimer = null;
+    }
+  }
+
   private preRevertState: {
     definition: FlowDefinition;
     dirtyDate: Date | null;
@@ -371,6 +409,7 @@ export class Editor extends RapidElement {
   private boundGlobalMouseDown = this.handleGlobalMouseDown.bind(this);
   private boundKeyDown = this.handleKeyDown.bind(this);
   private boundCanvasContextMenu = this.handleCanvasContextMenu.bind(this);
+  private boundWheel = this.handleWheel.bind(this);
 
   static get styles() {
     return css`
@@ -404,6 +443,7 @@ export class Editor extends RapidElement {
         width: 100%;
         display: flex;
         padding-top: 20px;
+        transform-origin: 0 0;
       }
 
       #canvas {
@@ -913,7 +953,7 @@ export class Editor extends RapidElement {
       .save-indicator {
         position: absolute;
         top: 8px;
-        right: 16px;
+        right: 240px;
         padding: 6px 10px;
         z-index: 10000;
         pointer-events: none;
@@ -924,6 +964,135 @@ export class Editor extends RapidElement {
       .save-indicator.visible {
         opacity: 1;
       }
+
+      .zoom-controls {
+        position: absolute;
+        top: 8px;
+        right: 16px;
+        z-index: 4999;
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        background: white;
+        border-radius: var(--curvature);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+        padding: 4px;
+        user-select: none;
+      }
+
+      .zoom-controls button {
+        width: 28px;
+        height: 28px;
+        border: none;
+        background: transparent;
+        border-radius: var(--curvature);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        color: #555;
+        font-size: 16px;
+        line-height: 1;
+        outline: none;
+      }
+
+      .zoom-controls button:hover {
+        background: rgba(0, 0, 0, 0.06);
+      }
+
+      .zoom-controls button:disabled {
+        opacity: 0.3;
+        cursor: default;
+        background: transparent;
+      }
+
+      .zoom-controls .zoom-level {
+        font-size: 12px;
+        min-width: 40px;
+        text-align: center;
+        color: #555;
+        font-weight: 500;
+      }
+
+      .zoom-controls .zoom-divider {
+        width: 1px;
+        height: 16px;
+        background: #e0e0e0;
+        margin: 0 2px;
+      }
+
+      .reflow-card {
+        position: absolute;
+        top: 16px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 10000;
+        background: rgba(0, 0, 0, 0.65);
+        backdrop-filter: blur(8px);
+        border-radius: 10px;
+        padding: 12px 16px 8px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        color: white;
+        font-size: 13px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+
+      .reflow-card .reflow-top {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .reflow-card .reflow-label {
+        white-space: nowrap;
+      }
+
+      .reflow-card button {
+        border: none;
+        border-radius: 6px;
+        padding: 6px 14px;
+        font-size: 13px;
+        font-weight: 500;
+        cursor: pointer;
+        white-space: nowrap;
+        transition: opacity 0.15s ease;
+      }
+
+      .reflow-card button:hover {
+        opacity: 0.85;
+      }
+
+      .reflow-card .reflow-discard {
+        background: rgba(255, 255, 255, 0.2);
+        color: white;
+      }
+
+      .reflow-meter {
+        height: 3px;
+        border-radius: 2px;
+        background: rgba(255, 255, 255, 0.15);
+        overflow: hidden;
+      }
+
+      .reflow-meter-fill {
+        height: 100%;
+        background: rgba(255, 255, 255, 0.5);
+        border-radius: 2px;
+        animation: reflow-countdown ${unsafeCSS(REFLOW_AUTO_SAVE_DELAY / 1000)}s
+          linear forwards;
+      }
+
+      @keyframes reflow-countdown {
+        from {
+          width: 100%;
+        }
+        to {
+          width: 0%;
+        }
+      }
     `;
   }
 
@@ -937,6 +1106,7 @@ export class Editor extends RapidElement {
     super.firstUpdated(changes);
     this.plumber = new Plumber(this.querySelector('#canvas'), this);
     this.setupGlobalEventListeners();
+    this.updateZoomControlPositioning();
     if (changes.has('flow')) {
       getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
       this.fetchRevisions();
@@ -1002,10 +1172,10 @@ export class Editor extends RapidElement {
       const canvas = this.querySelector('#canvas');
       if (canvas) {
         const canvasRect = canvas.getBoundingClientRect();
-        const menuX = canvasRect.left + snappedPosition.left - 40;
+        const menuX = canvasRect.left + snappedPosition.left * this.zoom - 40;
         const menuY = isDragUp
-          ? canvasRect.top + snappedPosition.top + 74 // just below placeholder bottom
-          : canvasRect.top + snappedPosition.top + 80; // just below placeholder
+          ? canvasRect.top + snappedPosition.top * this.zoom + 74 // just below placeholder bottom
+          : canvasRect.top + snappedPosition.top * this.zoom + 80; // just below placeholder
 
         const canvasMenu = this.querySelector(
           'temba-canvas-menu'
@@ -1104,8 +1274,20 @@ export class Editor extends RapidElement {
 
     if (changes.has('dirtyDate')) {
       if (this.dirtyDate) {
-        this.isSaving = true;
-        this.debouncedSave();
+        if (this.reflowPending) {
+          // This dirtyDate is from the reflow itself — suppress save
+          this.reflowPending = false;
+        } else {
+          // Normal change — if reflow card was showing, it goes away
+          // because these changes will be included in the save
+          if (this.reflowUnsaved) {
+            this.reflowUnsaved = false;
+            this.savedReflowPositions = null;
+            this.clearReflowAutoSaveTimer();
+          }
+          this.isSaving = true;
+          this.debouncedSave();
+        }
       }
     }
 
@@ -1145,6 +1327,12 @@ export class Editor extends RapidElement {
     }
 
     this.saveTimer = window.setTimeout(() => {
+      // Don't auto-save while a reflow preview is pending user confirmation
+      if (this.reflowUnsaved) {
+        this.saveTimer = null;
+        return;
+      }
+
       const now = new Date();
       const timeSinceLastChange = now.getTime() - this.dirtyDate.getTime();
 
@@ -1304,6 +1492,7 @@ export class Editor extends RapidElement {
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
+    this.stopAutoScroll();
     if (this.saveTimer !== null) {
       clearTimeout(this.saveTimer);
       this.saveTimer = null;
@@ -1312,6 +1501,7 @@ export class Editor extends RapidElement {
       clearTimeout(this.activityTimer);
       this.activityTimer = null;
     }
+    this.clearReflowAutoSaveTimer();
     document.removeEventListener('mousemove', this.boundMouseMove);
     document.removeEventListener('mouseup', this.boundMouseUp);
     document.removeEventListener('mousedown', this.boundGlobalMouseDown);
@@ -1322,6 +1512,11 @@ export class Editor extends RapidElement {
       canvas.removeEventListener('contextmenu', this.boundCanvasContextMenu);
     }
 
+    const editor = this.querySelector('#editor');
+    if (editor) {
+      editor.removeEventListener('wheel', this.boundWheel);
+    }
+
     // Clear all flow-specific data from the store so stale data
     // isn't briefly visible when a different flow is opened.
     zustand.getState().clearFlowData();
@@ -1338,6 +1533,11 @@ export class Editor extends RapidElement {
       canvas.addEventListener('contextmenu', this.boundCanvasContextMenu);
     }
 
+    const editor = this.querySelector('#editor');
+    if (editor) {
+      editor.addEventListener('wheel', this.boundWheel, { passive: false });
+    }
+
     // Listen for action edit requests from flow nodes
     this.addEventListener(
       CustomEventType.ActionEditRequested,
@@ -1409,8 +1609,7 @@ export class Editor extends RapidElement {
   }
 
   private handleMouseDown(event: MouseEvent): void {
-    // ignore right clicks
-    if (event.button !== 0) return;
+    if (isRightClick(event)) return;
 
     if (this.isReadOnly()) return;
     this.blurActiveContentEditable();
@@ -1454,8 +1653,7 @@ export class Editor extends RapidElement {
   }
 
   private handleGlobalMouseDown(event: MouseEvent): void {
-    // ignore right clicks
-    if (event.button !== 0) return;
+    if (isRightClick(event)) return;
 
     // Check if the click is within our canvas
     const canvasRect = this.querySelector('#grid')?.getBoundingClientRect();
@@ -1513,8 +1711,8 @@ export class Editor extends RapidElement {
         // Clear current selection
         this.selectedItems.clear();
 
-        const relativeX = event.clientX - canvasRect.left;
-        const relativeY = event.clientY - canvasRect.top;
+        const relativeX = (event.clientX - canvasRect.left) / this.zoom;
+        const relativeY = (event.clientY - canvasRect.top) / this.zoom;
 
         this.selectionBox = {
           startX: relativeX,
@@ -1540,6 +1738,154 @@ export class Editor extends RapidElement {
     }
   }
 
+  // --- Zoom ---
+
+  private setZoom(
+    newZoom: number,
+    center?: { clientX: number; clientY: number }
+  ): void {
+    const clamped = Math.max(
+      0.1,
+      Math.min(1.0, Math.round(newZoom * 100) / 100)
+    );
+    if (clamped === this.zoom) return;
+
+    const editor = this.querySelector('#editor') as HTMLElement;
+    const oldZoom = this.zoom;
+    this.zoom = clamped;
+    this.plumber.zoom = clamped;
+    this.zoomFitted = false;
+
+    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;
+
+      requestAnimationFrame(() => {
+        editor.scrollLeft = cx * clamped - ox;
+        editor.scrollTop = cy * clamped - oy;
+        this.plumber.repaintEverything();
+      });
+    } else {
+      requestAnimationFrame(() => this.plumber.repaintEverything());
+    }
+  }
+
+  private zoomIn(): void {
+    this.setZoom(this.zoom + 0.05);
+  }
+
+  private zoomOut(): void {
+    this.setZoom(this.zoom - 0.05);
+  }
+
+  private zoomToFit(): 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);
+    });
+
+    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;
+
+    const contentWidth = maxX - minX;
+    const contentHeight = maxY - minY;
+    const padding = 40;
+
+    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.1);
+    fitZoom = Math.round(fitZoom * 20) / 20; // round to nearest 0.05
+
+    this.zoom = fitZoom;
+    this.plumber.zoom = fitZoom;
+    this.zoomFitted = true;
+
+    // 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 zoom control right offset and floating tab positions */
+  private updateZoomControlPositioning(): void {
+    requestAnimationFrame(() => {
+      const editor = this.querySelector('#editor') as HTMLElement;
+      const zoomControls = this.querySelector('.zoom-controls') as HTMLElement;
+      if (editor && zoomControls) {
+        // Match right spacing to the top spacing (8px) by accounting for
+        // the scrollbar width
+        const scrollbarWidth = editor.offsetWidth - editor.clientWidth;
+        zoomControls.style.right = `${8 + scrollbarWidth}px`;
+      }
+      if (zoomControls) {
+        const rect = zoomControls.getBoundingClientRect();
+        FloatingTab.START_TOP = rect.bottom + 8;
+        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
+    });
+  }
+
   private showDeleteConfirmation(): void {
     const itemCount = this.selectedItems.size;
     const itemType = itemCount === 1 ? 'item' : 'items';
@@ -1569,6 +1915,158 @@ export class Editor extends RapidElement {
     });
   }
 
+  private performReflow(): void {
+    if (!this.definition || this.definition.nodes.length === 0) return;
+
+    // Save current positions for discard (nodes + stickies)
+    const savedPositions: Record<string, FlowPosition> = {};
+    for (const node of this.definition.nodes) {
+      const ui = this.definition._ui?.nodes[node.uuid];
+      if (ui?.position) {
+        savedPositions[node.uuid] = { ...ui.position };
+      }
+    }
+    const stickies = this.definition._ui?.stickies || {};
+    for (const [uuid, sticky] of Object.entries(stickies)) {
+      if (sticky.position) {
+        savedPositions[uuid] = { ...sticky.position };
+      }
+    }
+    this.savedReflowPositions = savedPositions;
+
+    // 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;
+    };
+
+    // Compute new layout
+    const newPositions = calculateLayeredLayout(
+      this.definition.nodes,
+      this.definition._ui.nodes,
+      startNodeUuid,
+      getNodeSize
+    );
+
+    // Place sticky notes next to their closest nodes
+    if (Object.keys(stickies).length > 0) {
+      const stickySizes = new Map<string, { width: number; height: number }>();
+      for (const uuid of Object.keys(stickies)) {
+        const el = this.querySelector(
+          `temba-sticky-note[uuid="${uuid}"]`
+        ) as HTMLElement;
+        if (el) {
+          stickySizes.set(uuid, {
+            width: el.offsetWidth,
+            height: el.offsetHeight
+          });
+        } else {
+          stickySizes.set(uuid, { width: 182, height: 100 });
+        }
+      }
+
+      const stickyPositions = placeStickyNotes(
+        stickies,
+        oldNodePositions,
+        newPositions,
+        nodeSizes,
+        stickySizes,
+        startNodeUuid
+      );
+
+      // Merge sticky positions into newPositions
+      Object.assign(newPositions, stickyPositions);
+    }
+
+    // Cancel any in-flight save timer so it doesn't persist the reflowed
+    // layout before the user has a chance to Save or Discard.
+    if (this.saveTimer !== null) {
+      clearTimeout(this.saveTimer);
+      this.saveTimer = null;
+    }
+
+    // Suppress the auto-save from this updateCanvasPositions call
+    this.reflowPending = true;
+    this.reflowUnsaved = true;
+
+    // Apply new positions
+    getStore().getState().updateCanvasPositions(newPositions);
+
+    // Update canvas size and repaint connections
+    this.updateCanvasSize();
+    requestAnimationFrame(() => {
+      this.plumber.repaintEverything();
+    });
+
+    // Scroll to top-left so the start node is visible
+    const editor = this.querySelector('#editor') as HTMLElement;
+    if (editor) {
+      editor.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
+    }
+
+    // Start auto-save countdown (duration shared with CSS animation)
+    this.clearReflowAutoSaveTimer();
+    this.reflowAutoSaveTimer = setTimeout(() => {
+      this.reflowAutoSaveTimer = null;
+      if (this.reflowUnsaved) {
+        this.reflowUnsaved = false;
+        this.savedReflowPositions = null;
+        this.saveChanges();
+      }
+    }, REFLOW_AUTO_SAVE_DELAY);
+  }
+
+  private handleReflowDiscard(): void {
+    this.reflowUnsaved = false;
+    this.clearReflowAutoSaveTimer();
+
+    if (this.savedReflowPositions) {
+      // Cancel any pending save timer before reverting
+      if (this.saveTimer !== null) {
+        clearTimeout(this.saveTimer);
+        this.saveTimer = null;
+      }
+
+      // Suppress the auto-save from reverting positions
+      this.reflowPending = true;
+      getStore().getState().updateCanvasPositions(this.savedReflowPositions);
+      this.savedReflowPositions = null;
+
+      // Clear dirty state since we reverted to the saved version
+      setTimeout(() => {
+        getStore().getState().setDirtyDate(null);
+        this.isSaving = false;
+      }, 0);
+
+      requestAnimationFrame(() => {
+        this.plumber.repaintEverything();
+      });
+    }
+  }
+
   private deleteNodes(uuids: string[]): void {
     // Remove nodes from the definition - CanvasNode will handle plumber cleanup
     if (uuids.length > 0) {
@@ -1598,8 +2096,8 @@ export class Editor extends RapidElement {
     const canvasRect = this.querySelector('#canvas')?.getBoundingClientRect();
     if (!canvasRect) return;
 
-    const relativeX = event.clientX - canvasRect.left;
-    const relativeY = event.clientY - canvasRect.top;
+    const relativeX = (event.clientX - canvasRect.left) / this.zoom;
+    const relativeY = (event.clientY - canvasRect.top) / this.zoom;
 
     this.selectionBox = {
       ...this.selectionBox,
@@ -1626,19 +2124,20 @@ export class Editor extends RapidElement {
 
     // Check nodes
     this.definition?.nodes.forEach((node) => {
-      const nodeElement = this.querySelector(`[id="${node.uuid}"]`);
+      const nodeElement = this.querySelector(
+        `[id="${node.uuid}"]`
+      ) as HTMLElement;
       if (nodeElement) {
         const position = this.definition._ui?.nodes[node.uuid]?.position;
         if (position) {
-          const rect = nodeElement.getBoundingClientRect();
           const canvasRect =
             this.querySelector('#canvas')?.getBoundingClientRect();
 
           if (canvasRect) {
             const nodeLeft = position.left;
             const nodeTop = position.top;
-            const nodeRight = nodeLeft + rect.width;
-            const nodeBottom = nodeTop + rect.height;
+            const nodeRight = nodeLeft + nodeElement.offsetWidth;
+            const nodeBottom = nodeTop + nodeElement.offsetHeight;
 
             // Check if selection box intersects with node
             if (
@@ -1913,8 +2412,8 @@ export class Editor extends RapidElement {
         const canvas = this.querySelector('#canvas');
         if (canvas) {
           const canvasRect = canvas.getBoundingClientRect();
-          const relativeX = event.clientX - canvasRect.left;
-          const relativeY = event.clientY - canvasRect.top;
+          const relativeX = (event.clientX - canvasRect.left) / this.zoom;
+          const relativeY = (event.clientY - canvasRect.top) / this.zoom;
 
           const placeholderWidth = 200;
           const placeholderHeight = 64;
@@ -1956,46 +2455,147 @@ export class Editor extends RapidElement {
     // Handle item dragging
     if (!this.isMouseDown || !this.currentDragItem) return;
 
-    const deltaX = event.clientX - this.dragStartPos.x;
-    const deltaY = event.clientY - this.dragStartPos.y;
+    this.lastMouseEvent = event;
+
+    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();
     }
 
     // If we're actually dragging, update positions
     if (this.isDragging) {
-      // Determine what items to move
-      const itemsToMove =
-        this.selectedItems.has(this.currentDragItem.uuid) &&
-        this.selectedItems.size > 1
-          ? Array.from(this.selectedItems)
-          : [this.currentDragItem.uuid];
+      this.updateDragPositions();
+    }
+  }
 
-      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) {
-            const newLeft = position.left + deltaX;
-            const newTop = position.top + deltaY;
-
-            // Update the visual position during drag
-            element.style.left = `${newLeft}px`;
-            element.style.top = `${newTop}px`;
-
-            // Add dragging class to ensure highest z-index
-            element.classList.add('dragging');
-          }
+  private updateDragPositions(): void {
+    if (!this.currentDragItem || !this.lastMouseEvent) return;
+
+    // Convert screen + scroll delta to canvas delta
+    const deltaX =
+      (this.lastMouseEvent.clientX -
+        this.dragStartPos.x +
+        this.autoScrollDeltaX) /
+      this.zoom;
+    const deltaY =
+      (this.lastMouseEvent.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');
         }
-      });
+      }
+    });
+
+    this.plumber.revalidate(itemsToMove);
+  }
 
-      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.lastMouseEvent) {
+        this.autoScrollAnimationId = null;
+        return;
+      }
+
+      const editorRect = editor.getBoundingClientRect();
+      const mouseX = this.lastMouseEvent.clientX;
+      const mouseY = this.lastMouseEvent.clientY;
+
+      let scrollDx = 0;
+      let scrollDy = 0;
+
+      // Left edge
+      const distFromLeft = mouseX - editorRect.left;
+      if (distFromLeft >= 0 && distFromLeft < AUTO_SCROLL_EDGE_ZONE) {
+        const ratio = 1 - distFromLeft / AUTO_SCROLL_EDGE_ZONE;
+        scrollDx = -(ratio * AUTO_SCROLL_MAX_SPEED);
+      }
+
+      // Right edge
+      const distFromRight = editorRect.right - mouseX;
+      if (distFromRight >= 0 && distFromRight < AUTO_SCROLL_EDGE_ZONE) {
+        const ratio = 1 - distFromRight / AUTO_SCROLL_EDGE_ZONE;
+        scrollDx = ratio * AUTO_SCROLL_MAX_SPEED;
+      }
+
+      // Top edge
+      const distFromTop = mouseY - editorRect.top;
+      if (distFromTop >= 0 && distFromTop < AUTO_SCROLL_EDGE_ZONE) {
+        const ratio = 1 - distFromTop / AUTO_SCROLL_EDGE_ZONE;
+        scrollDy = -(ratio * AUTO_SCROLL_MAX_SPEED);
+      }
+
+      // Bottom edge
+      const distFromBottom = editorRect.bottom - mouseY;
+      if (distFromBottom >= 0 && distFromBottom < AUTO_SCROLL_EDGE_ZONE) {
+        const ratio = 1 - distFromBottom / AUTO_SCROLL_EDGE_ZONE;
+        scrollDy = ratio * AUTO_SCROLL_MAX_SPEED;
+      }
+
+      if (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;
     }
   }
 
@@ -2018,10 +2618,17 @@ export class Editor extends RapidElement {
     // Handle item drag completion
     if (!this.isMouseDown || !this.currentDragItem) return;
 
+    this.stopAutoScroll();
+
     // If we were actually dragging, handle the drag end
     if (this.isDragging) {
-      const deltaX = event.clientX - this.dragStartPos.x;
-      const deltaY = event.clientY - this.dragStartPos.y;
+      // 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 =
@@ -2090,6 +2697,9 @@ export class Editor extends RapidElement {
     this.isMouseDown = false;
     this.currentDragItem = null;
     this.canvasMouseDown = false;
+    this.autoScrollDeltaX = 0;
+    this.autoScrollDeltaY = 0;
+    this.lastMouseEvent = null;
   }
 
   private updateCanvasSize(): void {
@@ -2106,11 +2716,19 @@ export class Editor extends RapidElement {
     this.definition.nodes.forEach((node) => {
       const ui = this.definition._ui.nodes[node.uuid];
       if (ui && ui.position) {
-        const nodeElement = this.querySelector(`[id="${node.uuid}"]`);
+        const nodeElement = this.querySelector(
+          `[id="${node.uuid}"]`
+        ) as HTMLElement;
         if (nodeElement) {
-          const rect = nodeElement.getBoundingClientRect();
-          maxWidth = Math.max(maxWidth, ui.position.left + rect.width);
-          maxHeight = Math.max(maxHeight, ui.position.top + rect.height);
+          // Use offsetWidth/offsetHeight (unaffected by ancestor transforms)
+          maxWidth = Math.max(
+            maxWidth,
+            ui.position.left + nodeElement.offsetWidth
+          );
+          maxHeight = Math.max(
+            maxHeight,
+            ui.position.top + nodeElement.offsetHeight
+          );
         }
       }
     });
@@ -2166,8 +2784,8 @@ export class Editor extends RapidElement {
     }
 
     const canvasRect = canvas.getBoundingClientRect();
-    const relativeX = event.clientX - canvasRect.left - 10;
-    const relativeY = event.clientY - canvasRect.top - 10;
+    const relativeX = (event.clientX - canvasRect.left) / this.zoom - 10;
+    const relativeY = (event.clientY - canvasRect.top) / this.zoom - 10;
 
     // Snap position to grid
     const snappedLeft = snapToGrid(relativeX);
@@ -2176,10 +2794,17 @@ export class Editor extends RapidElement {
     // Show the canvas menu at the mouse position (use viewport coordinates)
     const canvasMenu = this.querySelector('temba-canvas-menu') as CanvasMenu;
     if (canvasMenu) {
-      canvasMenu.show(event.clientX, event.clientY, {
-        x: snappedLeft,
-        y: snappedTop
-      });
+      const hasNodes = this.definition && this.definition.nodes.length > 0;
+      canvasMenu.show(
+        event.clientX,
+        event.clientY,
+        {
+          x: snappedLeft,
+          y: snappedTop
+        },
+        true,
+        hasNodes
+      );
     }
   }
 
@@ -2209,6 +2834,11 @@ export class Editor extends RapidElement {
     const selection = event.detail as CanvasMenuSelection;
     const store = getStore();
 
+    if (selection.action === 'reflow') {
+      this.performReflow();
+      return;
+    }
+
     if (selection.action === 'sticky') {
       // Create new sticky note
       store.getState().createStickyNote({
@@ -2617,8 +3247,9 @@ export class Editor extends RapidElement {
         }
 
         // Check for collisions and reflow in case node size changed
+        const nodeUuid = updatedNode.uuid;
         requestAnimationFrame(() => {
-          this.checkCollisionsAndReflow([this.editingNode.uuid]);
+          this.checkCollisionsAndReflow([nodeUuid]);
         });
       }
     }
@@ -2661,11 +3292,9 @@ export class Editor extends RapidElement {
 
     const canvasRect = canvas.getBoundingClientRect();
 
-    // calculate position relative to canvas
-    // canvasRect gives us the canvas position in the viewport, which already accounts for scroll
-    // so we just need mouseX/Y - canvasRect.left/top to get position within canvas
-    const left = mouseX - canvasRect.left - DROP_PREVIEW_OFFSET_X;
-    const top = mouseY - canvasRect.top - DROP_PREVIEW_OFFSET_Y;
+    // Convert viewport coordinates to canvas coordinates, accounting for zoom
+    const left = (mouseX - canvasRect.left) / this.zoom - DROP_PREVIEW_OFFSET_X;
+    const top = (mouseY - canvasRect.top) / this.zoom - DROP_PREVIEW_OFFSET_Y;
 
     // Apply grid snapping only if requested (for final drop position)
     if (applyGridSnapping) {
@@ -3986,14 +4615,15 @@ export class Editor extends RapidElement {
     const editorCenterX = editorRect.width / 2;
     const editorCenterY = editorRect.height / 2;
 
-    // Get node position relative to the editor's scroll container
-    const nodeRect = nodeElement.getBoundingClientRect();
-    const nodeCenterX = nodeElement.offsetLeft + nodeRect.width / 2;
-    const nodeCenterY = nodeElement.offsetTop + nodeRect.height / 2;
+    // Use offsetWidth/offsetHeight (unaffected by ancestor transforms)
+    const nodeCenterX = nodeElement.offsetLeft + nodeElement.offsetWidth / 2;
+    const nodeCenterY = nodeElement.offsetTop + nodeElement.offsetHeight / 2;
 
-    // Calculate the scroll position needed to center the node
-    const targetScrollX = nodeCenterX - editorCenterX;
-    const targetScrollY = nodeCenterY - editorCenterY;
+    // Calculate the scroll position needed to center the node.
+    // Multiply by zoom because scroll operates in visual (transformed) space
+    // while offsetLeft/offsetTop are in layout space.
+    const targetScrollX = nodeCenterX * this.zoom - editorCenterX;
+    const targetScrollY = nodeCenterY * this.zoom - editorCenterY;
 
     // Smooth scroll the editor container to the target position
     editor.scrollTo({
@@ -4043,8 +4673,9 @@ export class Editor extends RapidElement {
           <div
             id="grid"
             class="${this.viewingRevision ? 'viewing-revision' : ''}"
-            style="min-width:100%;width:${this.canvasSize
-              .width}px; height:${this.canvasSize.height}px"
+            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"
@@ -4127,6 +4758,55 @@ export class Editor extends RapidElement {
         <div class="save-indicator ${this.isSaving ? 'visible' : ''}">
           <temba-loading units="3" size="8"></temba-loading>
         </div>
+        <div class="zoom-controls">
+          <button
+            @click=${this.zoomToFit}
+            ?disabled=${this.zoomFitted}
+            title="Zoom to fit"
+          >
+            <temba-icon name=${Icon.zoom_fit} size="1"></temba-icon>
+          </button>
+          <div class="zoom-divider"></div>
+          <button
+            @click=${this.zoomOut}
+            ?disabled=${this.zoom <= 0.1}
+            title="Zoom out"
+          >
+            −
+          </button>
+          <span class="zoom-level">${Math.round(this.zoom * 100)}%</span>
+          <button
+            @click=${this.zoomIn}
+            ?disabled=${this.zoom >= 1.0}
+            title="Zoom in"
+          >
+            +
+          </button>
+          <div class="zoom-divider"></div>
+          <button
+            @click=${this.zoomToFull}
+            ?disabled=${this.zoom >= 1.0}
+            title="Zoom to 100%"
+          >
+            <temba-icon name=${Icon.zoom_in} size="1"></temba-icon>
+          </button>
+        </div>
+        ${this.reflowUnsaved
+          ? html`<div class="reflow-card">
+              <div class="reflow-top">
+                <span class="reflow-label">Unsaved layout changes</span>
+                <button
+                  class="reflow-discard"
+                  @click=${this.handleReflowDiscard}
+                >
+                  Discard
+                </button>
+              </div>
+              <div class="reflow-meter">
+                <div class="reflow-meter-fill"></div>
+              </div>
+            </div>`
+          : ''}
       </div>
 
       ${this.editingNode || this.editingAction