@nyaruka/temba-components 0.141.1 → 0.142.1

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

@@ -9,11 +9,14 @@ import { repeat } from 'lit-html/directives/repeat.js';
 import { CustomEventType } from '../interfaces';
 import { generateUUID, postJSON, fetchResults, getClasses } from '../utils';
 import { TEMBA_COMPONENTS_VERSION } from '../version';
-import { formatIssueMessage, getNodeBounds, calculateReflowPositions, snapToGrid } from './utils';
+import { formatIssueMessage, getNodeBounds, calculateReflowPositions, isRightClick, snapToGrid } from './utils';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
+import { calculateLayeredLayout, placeStickyNotes } from './reflow';
+import { FloatingTab } from '../display/FloatingTab';
 import { ACTION_GROUP_METADATA } from './types';
 import { Plumber, calculateFlowchartPath, ARROW_LENGTH, ARROW_HALF_WIDTH, CURSOR_GAP } from './Plumber';
 import { CanvasNode } from './CanvasNode';
+import { Icon } from '../Icons';
 export function findNodeForExit(definition, exitUuid) {
     for (const node of definition.nodes) {
         const exit = node.exits.find((e) => e.uuid === exitUuid);
@@ -25,7 +28,12 @@ export function findNodeForExit(definition, exitUuid) {
 }
 const SAVE_QUIET_TIME = 2000;
 const DRAG_THRESHOLD = 5;
+const AUTO_SCROLL_EDGE_ZONE = 100;
+const AUTO_SCROLL_MAX_SPEED = 15;
 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;
@@ -39,6 +47,12 @@ export class Editor extends RapidElement {
     get dragging() {
         return this.isDragging;
     }
+    clearReflowAutoSaveTimer() {
+        if (this.reflowAutoSaveTimer !== null) {
+            clearTimeout(this.reflowAutoSaveTimer);
+            this.reflowAutoSaveTimer = null;
+        }
+    }
     getAvailableLanguages() {
         var _b, _c, _d;
         // Use languages from workspace if available
@@ -99,6 +113,7 @@ export class Editor extends RapidElement {
         width: 100%;
         display: flex;
         padding-top: 20px;
+        transform-origin: 0 0;
       }
 
       #canvas {
@@ -608,7 +623,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;
@@ -619,6 +634,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%;
+        }
+      }
     `;
     }
     constructor() {
@@ -635,6 +779,11 @@ export class Editor extends RapidElement {
         this.dragStartPos = { x: 0, y: 0 };
         this.currentDragItem = null;
         this.startPos = { left: 0, top: 0 };
+        // Auto-scroll state
+        this.autoScrollAnimationId = null;
+        this.autoScrollDeltaX = 0;
+        this.autoScrollDeltaY = 0;
+        this.lastMouseEvent = null;
         // Selection state
         this.selectedItems = new Set();
         this.isSelecting = false;
@@ -663,6 +812,12 @@ export class Editor extends RapidElement {
         this.isLoadingRevisions = false;
         this.isSaving = false;
         this.saveError = null;
+        this.zoom = 1.0;
+        this.zoomFitted = false;
+        this.reflowPending = false;
+        this.reflowUnsaved = false;
+        this.savedReflowPositions = null;
+        this.reflowAutoSaveTimer = null;
         this.preRevertState = null;
         this.translationCache = new Map();
         // NodeEditor state - handles both node and action editing
@@ -690,11 +845,13 @@ export class Editor extends RapidElement {
         this.boundGlobalMouseDown = this.handleGlobalMouseDown.bind(this);
         this.boundKeyDown = this.handleKeyDown.bind(this);
         this.boundCanvasContextMenu = this.handleCanvasContextMenu.bind(this);
+        this.boundWheel = this.handleWheel.bind(this);
     }
     firstUpdated(changes) {
         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();
@@ -748,10 +905,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');
                 if (canvasMenu) {
                     canvasMenu.show(menuX, menuY, {
@@ -825,8 +982,21 @@ 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();
+                }
             }
         }
         if (changes.has('saveError') && this.saveError) {
@@ -861,6 +1031,11 @@ export class Editor extends RapidElement {
             clearTimeout(this.saveTimer);
         }
         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();
             if (timeSinceLastChange >= SAVE_QUIET_TIME) {
@@ -998,6 +1173,7 @@ export class Editor extends RapidElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.stopAutoScroll();
         if (this.saveTimer !== null) {
             clearTimeout(this.saveTimer);
             this.saveTimer = null;
@@ -1006,6 +1182,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);
@@ -1014,6 +1191,10 @@ export class Editor extends RapidElement {
         if (canvas) {
             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();
@@ -1027,6 +1208,10 @@ export class Editor extends RapidElement {
         if (canvas) {
             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, this.handleActionEditRequested.bind(this));
         // Listen for add action requests from flow nodes
@@ -1074,8 +1259,7 @@ export class Editor extends RapidElement {
         }
     }
     handleMouseDown(event) {
-        // ignore right clicks
-        if (event.button !== 0)
+        if (isRightClick(event))
             return;
         if (this.isReadOnly())
             return;
@@ -1116,8 +1300,7 @@ export class Editor extends RapidElement {
     }
     handleGlobalMouseDown(event) {
         var _b;
-        // ignore right clicks
-        if (event.button !== 0)
+        if (isRightClick(event))
             return;
         // Check if the click is within our canvas
         const canvasRect = (_b = this.querySelector('#grid')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
@@ -1165,8 +1348,8 @@ export class Editor extends RapidElement {
             if (canvasRect) {
                 // 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,
                     startY: relativeY,
@@ -1188,6 +1371,135 @@ export class Editor extends RapidElement {
             this.requestUpdate();
         }
     }
+    // --- Zoom ---
+    setZoom(newZoom, center) {
+        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');
+        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());
+        }
+    }
+    zoomIn() {
+        this.setZoom(this.zoom + 0.05);
+    }
+    zoomOut() {
+        this.setZoom(this.zoom - 0.05);
+    }
+    zoomToFit() {
+        var _b;
+        if (!this.definition || this.definition.nodes.length === 0)
+            return;
+        const editor = this.querySelector('#editor');
+        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) => {
+            var _b;
+            const ui = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.nodes[node.uuid];
+            if (!(ui === null || ui === void 0 ? void 0 : ui.position))
+                return;
+            const el = this.querySelector(`[id="${node.uuid}"]`);
+            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 = ((_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.stickies) || {};
+        Object.entries(stickies).forEach(([uuid, sticky]) => {
+            if (!sticky.position)
+                return;
+            const el = this.querySelector(`temba-sticky-note[uuid="${uuid}"]`);
+            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();
+        });
+    }
+    zoomToFull() {
+        this.setZoom(1.0);
+    }
+    /** Adjust zoom control right offset and floating tab positions */
+    updateZoomControlPositioning() {
+        requestAnimationFrame(() => {
+            const editor = this.querySelector('#editor');
+            const zoomControls = this.querySelector('.zoom-controls');
+            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();
+            }
+        });
+    }
+    handleWheel(event) {
+        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
+        });
+    }
     showDeleteConfirmation() {
         const itemCount = this.selectedItems.size;
         const itemType = itemCount === 1 ? 'item' : 'items';
@@ -1212,6 +1524,127 @@ export class Editor extends RapidElement {
             document.body.removeChild(dialog);
         });
     }
+    performReflow() {
+        var _b, _c, _d;
+        if (!this.definition || this.definition.nodes.length === 0)
+            return;
+        // Save current positions for discard (nodes + stickies)
+        const savedPositions = {};
+        for (const node of this.definition.nodes) {
+            const ui = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.nodes[node.uuid];
+            if (ui === null || ui === void 0 ? void 0 : ui.position) {
+                savedPositions[node.uuid] = { ...ui.position };
+            }
+        }
+        const stickies = ((_c = this.definition._ui) === null || _c === void 0 ? void 0 : _c.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 = {};
+        for (const node of this.definition.nodes) {
+            const ui = (_d = this.definition._ui) === null || _d === void 0 ? void 0 : _d.nodes[node.uuid];
+            if (ui === null || ui === void 0 ? void 0 : 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();
+        const getNodeSize = (uuid) => {
+            const element = this.querySelector(`[id="${uuid}"]`);
+            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();
+            for (const uuid of Object.keys(stickies)) {
+                const el = this.querySelector(`temba-sticky-note[uuid="${uuid}"]`);
+                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');
+        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);
+    }
+    handleReflowDiscard() {
+        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();
+            });
+        }
+    }
     deleteNodes(uuids) {
         // Remove nodes from the definition - CanvasNode will handle plumber cleanup
         if (uuids.length > 0) {
@@ -1233,8 +1666,8 @@ export class Editor extends RapidElement {
         const canvasRect = (_b = this.querySelector('#canvas')) === null || _b === void 0 ? void 0 : _b.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,
             endX: relativeX,
@@ -1259,13 +1692,12 @@ export class Editor extends RapidElement {
             if (nodeElement) {
                 const position = (_c = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.nodes[node.uuid]) === null || _c === void 0 ? void 0 : _c.position;
                 if (position) {
-                    const rect = nodeElement.getBoundingClientRect();
                     const canvasRect = (_d = this.querySelector('#canvas')) === null || _d === void 0 ? void 0 : _d.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 (boxLeft < nodeRight &&
                             boxRight > nodeLeft &&
@@ -1490,8 +1922,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;
                     const arrowLength = ARROW_LENGTH;
@@ -1527,37 +1959,119 @@ 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];
-            itemsToMove.forEach((uuid) => {
-                const element = this.querySelector(`[uuid="${uuid}"]`);
-                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');
-                    }
+            this.updateDragPositions();
+        }
+    }
+    updateDragPositions() {
+        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}"]`);
+            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);
+    }
+    startAutoScroll() {
+        if (this.autoScrollAnimationId !== null)
+            return;
+        const editor = this.querySelector('#editor');
+        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);
+    }
+    stopAutoScroll() {
+        if (this.autoScrollAnimationId !== null) {
+            cancelAnimationFrame(this.autoScrollAnimationId);
+            this.autoScrollAnimationId = null;
         }
     }
     handleMouseUp(event) {
@@ -1577,10 +2091,14 @@ 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 = this.selectedItems.has(this.currentDragItem.uuid) &&
                 this.selectedItems.size > 1
@@ -1635,6 +2153,9 @@ export class Editor extends RapidElement {
         this.isMouseDown = false;
         this.currentDragItem = null;
         this.canvasMouseDown = false;
+        this.autoScrollDeltaX = 0;
+        this.autoScrollDeltaY = 0;
+        this.lastMouseEvent = null;
     }
     updateCanvasSize() {
         var _b;
@@ -1652,9 +2173,9 @@ export class Editor extends RapidElement {
             if (ui && ui.position) {
                 const nodeElement = this.querySelector(`[id="${node.uuid}"]`);
                 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);
                 }
             }
         });
@@ -1701,18 +2222,19 @@ export class Editor extends RapidElement {
             return;
         }
         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);
         const snappedTop = snapToGrid(relativeY);
         // Show the canvas menu at the mouse position (use viewport coordinates)
         const canvasMenu = this.querySelector('temba-canvas-menu');
         if (canvasMenu) {
+            const hasNodes = this.definition && this.definition.nodes.length > 0;
             canvasMenu.show(event.clientX, event.clientY, {
                 x: snappedLeft,
                 y: snappedTop
-            });
+            }, true, hasNodes);
         }
     }
     handleEmptyFlowClick(event) {
@@ -1737,6 +2259,10 @@ export class Editor extends RapidElement {
     handleCanvasMenuSelection(event) {
         const selection = event.detail;
         const store = getStore();
+        if (selection.action === 'reflow') {
+            this.performReflow();
+            return;
+        }
         if (selection.action === 'sticky') {
             // Create new sticky note
             store.getState().createStickyNote({
@@ -2063,8 +2589,9 @@ export class Editor extends RapidElement {
                     (_d = getStore()) === null || _d === void 0 ? void 0 : _d.getState().updateNodeUIConfig(updatedNode.uuid, uiConfig);
                 }
                 // Check for collisions and reflow in case node size changed
+                const nodeUuid = updatedNode.uuid;
                 requestAnimationFrame(() => {
-                    this.checkCollisionsAndReflow([this.editingNode.uuid]);
+                    this.checkCollisionsAndReflow([nodeUuid]);
                 });
             }
         }
@@ -2094,11 +2621,9 @@ export class Editor extends RapidElement {
         if (!canvas)
             return { left: 0, top: 0 };
         const canvasRect = canvas.getBoundingClientRect();
-        // calculate position relative to canvas
-        // canvasRect gives us the canvas position in the viewport, which already accounts for scroll
-        // so we just need mouseX/Y - canvasRect.left/top to get position within canvas
-        const left = mouseX - canvasRect.left - DROP_PREVIEW_OFFSET_X;
-        const top = mouseY - canvasRect.top - DROP_PREVIEW_OFFSET_Y;
+        // 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) {
             return {
@@ -3154,13 +3679,14 @@ export class Editor extends RapidElement {
         const editorRect = editor.getBoundingClientRect();
         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;
-        // Calculate the scroll position needed to center the node
-        const targetScrollX = nodeCenterX - editorCenterX;
-        const targetScrollY = nodeCenterY - editorCenterY;
+        // 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.
+        // 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({
             left: Math.max(0, targetScrollX),
@@ -3206,8 +3732,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"
@@ -3273,6 +3800,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
@@ -3409,6 +3985,18 @@ __decorate([
 __decorate([
     state()
 ], Editor.prototype, "saveError", void 0);
+__decorate([
+    state()
+], Editor.prototype, "zoom", void 0);
+__decorate([
+    state()
+], Editor.prototype, "zoomFitted", void 0);
+__decorate([
+    state()
+], Editor.prototype, "reflowPending", void 0);
+__decorate([
+    state()
+], Editor.prototype, "reflowUnsaved", void 0);
 __decorate([
     state()
 ], Editor.prototype, "editingNode", void 0);