@nyaruka/temba-components 0.137.0 → 0.138.4

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

@@ -3,11 +3,11 @@ import { html } from 'lit-html';
 import { css, unsafeCSS } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { getStore } from '../store/Store';
-import { fromStore, zustand } from '../store/AppState';
+import { fromStore, zustand, FLOW_SPEC_VERSION } from '../store/AppState';
 import { RapidElement } from '../RapidElement';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { CustomEventType } from '../interfaces';
-import { generateUUID, postJSON } from '../utils';
+import { generateUUID, postJSON, fetchResults, getClasses } from '../utils';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
 import { ACTION_GROUP_METADATA } from './types';
 import { Plumber } from './Plumber';
@@ -110,6 +110,29 @@ export class Editor extends RapidElement {
         transition: none !important;
       }
 
+      #canvas.viewing-revision {
+        pointer-events: none;
+      }
+
+      #canvas.read-only svg {
+        pointer-events: none;
+      }
+
+      #grid.viewing-revision {
+        background-color: #fff9fc;
+        background-image: radial-gradient(
+          circle,
+          rgba(166, 38, 164, 0.2) 1px,
+          transparent 1px
+        );
+      }
+
+      #grid.viewing-revision temba-flow-node,
+      #grid.viewing-revision svg.jtk-connector,
+      #grid.viewing-revision .activity-overlay {
+        opacity: 0.5;
+      }
+
       body .jtk-endpoint {
         width: initial;
         height: initial;
@@ -164,12 +187,28 @@ export class Editor extends RapidElement {
         stroke-width: 3px;
       }
 
+      body #canvas.read-only-connections svg.jtk-connector.jtk-hover path {
+        stroke: var(--color-connectors) !important;
+      }
+
       body .plumb-connector.jtk-hover .plumb-arrow {
         fill: var(--color-success) !important;
         stroke-width: 0px;
         z-index: 10;
       }
 
+      body
+        #canvas.read-only-connections
+        .plumb-connector.jtk-hover
+        .plumb-arrow {
+        fill: var(--color-connectors) !important;
+        ponter-events: none;
+      }
+
+      body #canvas.read-only-connections svg {
+        pointer-events: none;
+      }
+
       /* Activity overlays on connections */
       .jtk-overlay.activity-overlay {
         background: #f3f3f3;
@@ -458,6 +497,18 @@ export class Editor extends RapidElement {
         width: 100%;
       }
 
+      .revert-button {
+        background: var(--color-primary-dark);
+        border: none;
+        color: #fff;
+        padding: 6px 10px;
+        border-radius: var(--curvature);
+        font-size: 11px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+      }
+
       .auto-translate-button {
         background: var(--color-primary-dark);
         border: none;
@@ -534,6 +585,7 @@ export class Editor extends RapidElement {
         this.targetId = null;
         this.sourceId = null;
         this.dragFromNodeId = null;
+        this.originalConnectionTargetId = null;
         this.isValidTarget = true;
         this.localizationWindowHidden = true;
         this.translationFilters = {
@@ -544,6 +596,11 @@ export class Editor extends RapidElement {
         this.autoTranslating = false;
         this.autoTranslateModel = null;
         this.autoTranslateError = null;
+        this.revisionsWindowHidden = true;
+        this.revisions = [];
+        this.viewingRevision = null;
+        this.isLoadingRevisions = false;
+        this.preRevertState = null;
         this.translationCache = new Map();
         // NodeEditor state - handles both node and action editing
         this.editingNode = null;
@@ -558,6 +615,10 @@ export class Editor extends RapidElement {
         this.actionDragTargetNodeUuid = null;
         // Track previous target node to clear placeholder when moving between nodes
         this.previousActionDragTargetNodeUuid = null;
+        // Connection placeholder state for dropping connections on empty canvas
+        this.connectionPlaceholder = null;
+        // Track pending connection when dropping on canvas
+        this.pendingCanvasConnection = null;
         this.canvasMouseDown = false;
         // Bound event handlers to maintain proper 'this' context
         this.boundMouseMove = this.handleMouseMove.bind(this);
@@ -573,36 +634,81 @@ export class Editor extends RapidElement {
         if (changes.has('flow')) {
             getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
         }
-        this.plumber.on('connection:drag', (info) => {
-            this.dragFromNodeId = document
-                .getElementById(info.sourceId)
-                .closest('.node').id;
-            this.sourceId = info.sourceId;
+        this.plumber.on('connection:drag', (connection) => {
+            // console.log('connection:drag', connection);
+            this.dragFromNodeId =
+                connection.data.nodeId ||
+                    document.getElementById(connection.sourceId).closest('.node').id;
+            this.sourceId = connection.sourceId;
+            this.originalConnectionTargetId = connection.target.id;
         });
-        this.plumber.on('connection:abort', () => {
-            this.makeConnection();
+        this.plumber.on('connection:abort', (info) => {
+            // console.log('Connection aborted', info);
+            this.makeConnection(info);
         });
-        this.plumber.on('connection:detach', () => {
-            this.makeConnection();
+        this.plumber.on('connection:detach', (info) => {
+            // console.log('Connection detached', info);
+            this.makeConnection(info);
         });
     }
-    makeConnection() {
+    makeConnection(info) {
         if (this.sourceId && this.targetId && this.isValidTarget) {
-            this.plumber.connectIds(this.dragFromNodeId, this.sourceId, this.targetId);
-            getStore()
-                .getState()
-                .updateConnection(this.dragFromNodeId, this.sourceId, this.targetId);
-            setTimeout(() => {
-                this.plumber.repaintEverything();
-            }, 100);
+            // going to the same target, just put it back
+            if (info.target.id === this.targetId) {
+                this.plumber.connectIds(this.dragFromNodeId, this.sourceId, this.targetId);
+            }
+            // otherwise update the connection
+            else {
+                getStore()
+                    .getState()
+                    .updateConnection(this.dragFromNodeId, this.sourceId, this.targetId);
+            }
+        }
+        else if (this.connectionPlaceholder &&
+            this.connectionPlaceholder.visible &&
+            this.sourceId) {
+            // Snap the placeholder position to grid
+            const snappedPosition = {
+                left: snapToGrid(this.connectionPlaceholder.position.left),
+                top: snapToGrid(this.connectionPlaceholder.position.top)
+            };
+            // Update the placeholder to the snapped position
+            this.connectionPlaceholder.position = snappedPosition;
+            // Store the pending connection info
+            this.pendingCanvasConnection = {
+                fromNodeId: this.dragFromNodeId,
+                exitId: this.sourceId,
+                position: snappedPosition
+            };
+            // Show the context menu just below the placeholder
+            const canvas = this.querySelector('#canvas');
+            if (canvas) {
+                const canvasRect = canvas.getBoundingClientRect();
+                const menuX = canvasRect.left + snappedPosition.left - 40; // center horizontally
+                const menuY = canvasRect.top + snappedPosition.top + 80; // just below placeholder
+                const canvasMenu = this.querySelector('temba-canvas-menu');
+                if (canvasMenu) {
+                    canvasMenu.show(menuX, menuY, {
+                        x: snappedPosition.left,
+                        y: snappedPosition.top
+                    }, false); // Don't show sticky note option for connection drops
+                }
+            }
+            // Request update to render the connection line
+            this.requestUpdate();
+            // Don't clear placeholder or connection info yet - keep them for menu interaction
+            return;
         }
         // Clean up visual feedback
         document.querySelectorAll('temba-flow-node').forEach((node) => {
             node.classList.remove('connection-target-valid', 'connection-target-invalid');
         });
-        this.sourceId = null;
+        // Clear connection state (but keep sourceId/dragFromNodeId if we have a pending connection)
+        if (!this.pendingCanvasConnection) {
+            this.sourceId = null;
+            this.dragFromNodeId = null;
+        }
         this.targetId = null;
-        this.dragFromNodeId = null;
         this.isValidTarget = true;
     }
     updated(changes) {
@@ -693,10 +799,11 @@ export class Editor extends RapidElement {
             }
         }, SAVE_QUIET_TIME);
     }
-    saveChanges() {
+    saveChanges(definitionOverride) {
+        const definition = definitionOverride || this.definition;
         // post the flow definition to the server
-        getStore()
-            .postJSON(`/flow/revisions/${this.flow}/`, this.definition)
+        return getStore()
+            .postJSON(`/flow/revisions/${this.flow}/`, definition)
             .then((response) => {
             var _b;
             // Update flow info and revision with the response data
@@ -708,6 +815,10 @@ export class Editor extends RapidElement {
                 if (((_b = response.json.revision) === null || _b === void 0 ? void 0 : _b.revision) !== undefined) {
                     state.setRevision(response.json.revision.revision);
                 }
+                // if the revisions window is open, refresh the list
+                if (!this.revisionsWindowHidden) {
+                    this.fetchRevisions();
+                }
             }
         })
             .catch((error) => {
@@ -751,18 +862,12 @@ export class Editor extends RapidElement {
                 clearTimeout(this.activityTimer);
             }
             this.activityTimer = window.setTimeout(() => {
-                this.fetchActivityData();
+                // this.fetchActivityData();
             }, this.activityInterval);
         });
     }
     handleLanguageChange(languageCode) {
         zustand.getState().setLanguageCode(languageCode);
-        // Repaint connections after language change since node sizes can change
-        if (this.plumber) {
-            requestAnimationFrame(() => {
-                this.plumber.repaintEverything();
-            });
-        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -810,6 +915,16 @@ export class Editor extends RapidElement {
                 this.handleNodeTypeSelection(event);
             }
         });
+        // Listen for canvas menu cancel (close without selection)
+        this.addEventListener(CustomEventType.Canceled, (event) => {
+            const target = event.target;
+            if (target.tagName === 'TEMBA-CANVAS-MENU') {
+                this.handleCanvasMenuClosed();
+            }
+            else if (target.tagName === 'TEMBA-NODE-TYPE-SELECTOR') {
+                this.handleNodeTypeSelectorClosed();
+            }
+        });
         // Listen for action drag events from nodes
         this.addEventListener(CustomEventType.DragExternal, this.handleActionDragExternal.bind(this));
         this.addEventListener(CustomEventType.DragInternal, this.handleActionDragInternal.bind(this));
@@ -832,6 +947,8 @@ export class Editor extends RapidElement {
         // ignore right clicks
         if (event.button !== 0)
             return;
+        if (this.isReadOnly())
+            return;
         const element = event.currentTarget;
         // Only start dragging if clicking on the element itself, not on exits or other interactive elements
         const target = event.target;
@@ -893,6 +1010,8 @@ export class Editor extends RapidElement {
     }
     handleCanvasMouseDown(event) {
         var _b;
+        if (this.isReadOnly())
+            return;
         const target = event.target;
         if (target.id === 'canvas' || target.id === 'grid') {
             // Ignore clicks on exits
@@ -951,12 +1070,8 @@ export class Editor extends RapidElement {
         });
     }
     deleteNodes(uuids) {
-        // Clean up jsPlumb connections for nodes before removing them
-        uuids.forEach((uuid) => {
-            this.plumber.removeNodeConnections(uuid);
-        });
-        // Now remove them from the definition
-        if (uuids.length > 0 && this.plumber) {
+        // Remove nodes from the definition - CanvasNode will handle plumber cleanup
+        if (uuids.length > 0) {
             getStore().getState().removeNodes(uuids);
         }
     }
@@ -1101,6 +1216,94 @@ export class Editor extends RapidElement {
       </div>
     </div>`;
     }
+    renderConnectionPlaceholder() {
+        if (!this.connectionPlaceholder || !this.connectionPlaceholder.visible)
+            return '';
+        const { position } = this.connectionPlaceholder;
+        // Render connection line when we have a pending connection (after drop)
+        let svgPath = null;
+        if (this.sourceId && this.dragFromNodeId && this.pendingCanvasConnection) {
+            const sourceElement = document.getElementById(this.sourceId);
+            if (sourceElement) {
+                const sourceRect = sourceElement.getBoundingClientRect();
+                const canvas = this.querySelector('#canvas');
+                const canvasRect = canvas.getBoundingClientRect();
+                // Source point (bottom center of exit)
+                const sourceX = sourceRect.left + sourceRect.width / 2 - canvasRect.left;
+                const sourceY = sourceRect.bottom - canvasRect.top;
+                // Target point (top center of placeholder)
+                const targetX = position.left + 100; // 100 is half the placeholder width (200px)
+                const targetY = position.top;
+                // Use jsPlumb FlowchartConnector parameters: stub [20, 10], cornerRadius 5
+                const stubStart = 20;
+                const stubEnd = 10;
+                const cornerRadius = 5;
+                // Calculate flowchart path with corners
+                const verticalStart = sourceY + stubStart;
+                const verticalEnd = targetY - stubEnd;
+                const midY = (verticalStart + verticalEnd) / 2;
+                // Build path with rounded corners (flowchart style)
+                let pathData = `M ${sourceX} ${sourceY} L ${sourceX} ${verticalStart}`;
+                if (sourceX !== targetX) {
+                    // Horizontal segment needed
+                    if (Math.abs(verticalEnd - verticalStart) > cornerRadius * 2) {
+                        // Enough space for corners
+                        pathData += ` L ${sourceX} ${midY - cornerRadius}`;
+                        pathData += ` Q ${sourceX} ${midY}, ${sourceX + (targetX > sourceX ? cornerRadius : -cornerRadius)} ${midY}`;
+                        pathData += ` L ${targetX - (targetX > sourceX ? cornerRadius : -cornerRadius)} ${midY}`;
+                        pathData += ` Q ${targetX} ${midY}, ${targetX} ${midY + cornerRadius}`;
+                        pathData += ` L ${targetX} ${verticalEnd}`;
+                    }
+                    else {
+                        // Direct horizontal transition
+                        pathData += ` L ${targetX} ${verticalStart}`;
+                        pathData += ` L ${targetX} ${verticalEnd}`;
+                    }
+                }
+                else {
+                    // Straight vertical line
+                    pathData += ` L ${targetX} ${verticalEnd}`;
+                }
+                pathData += ` L ${targetX} ${targetY}`;
+                svgPath = html `
+          <svg
+            style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;"
+          >
+            <path
+              d="${pathData}"
+              fill="none"
+              stroke="var(--color-connectors, #ccc)"
+              stroke-width="3"
+              class="plumb-connector"
+            />
+            <polygon
+              points="${targetX},${targetY} ${targetX - 6.5},${targetY -
+                    13} ${targetX + 6.5},${targetY - 13}"
+              fill="var(--color-connectors, #ccc)"
+              class="plumb-arrow"
+            />
+          </svg>
+        `;
+            }
+        }
+        return html `${svgPath}
+      <div
+        class="connection-placeholder"
+        style="position: absolute; left: ${position.left}px; top: ${position.top}px; opacity: 0.6; pointer-events: none; z-index: 10000;"
+      >
+        <div
+          class="node execute-actions"
+          style="outline: 3px dashed var(--color-primary, #3b82f6); outline-offset: 2px; border-radius: var(--curvature); min-width: 200px;"
+        >
+          <div class="empty-node-placeholder" style="height: 60px;"></div>
+          <div class="action-exits">
+            <div class="exit-wrapper">
+              <div class="exit"></div>
+            </div>
+          </div>
+        </div>
+      </div>`;
+    }
     /**
      * Checks for node collisions and reflows nodes as needed.
      * Nodes are only moved downward to resolve collisions.
@@ -1180,11 +1383,33 @@ export class Editor extends RapidElement {
                 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
+                // Calculate position: horizontally centered at mouse, vertically just below mouse
+                const canvas = this.querySelector('#canvas');
+                if (canvas) {
+                    const canvasRect = canvas.getBoundingClientRect();
+                    const relativeX = event.clientX - canvasRect.left;
+                    const relativeY = event.clientY - canvasRect.top;
+                    // offset the placeholder so it's centered horizontally and just below the mouse
+                    const placeholderWidth = 200; // approximate node width
+                    const placeholderOffset = 20; // distance below mouse cursor
+                    this.connectionPlaceholder = {
+                        position: {
+                            left: relativeX - placeholderWidth / 2,
+                            top: relativeY + placeholderOffset
+                        },
+                        visible: true
+                    };
+                }
             }
+            // Force update to show/hide placeholder
+            this.requestUpdate();
         }
         // Handle item dragging
         if (!this.isMouseDown || !this.currentDragItem)
@@ -1372,6 +1597,10 @@ export class Editor extends RapidElement {
         store.getState().expandCanvas(maxWidth, maxHeight);
     }
     handleCanvasContextMenu(event) {
+        if (this.isReadOnly()) {
+            event.preventDefault();
+            return;
+        }
         // Check if we right-clicked on empty canvas space
         const target = event.target;
         if (target.id !== 'canvas') {
@@ -1409,6 +1638,11 @@ export class Editor extends RapidElement {
                 left: selection.position.x,
                 top: selection.position.y
             });
+            // Clear all pending connection state and placeholder
+            this.pendingCanvasConnection = null;
+            this.connectionPlaceholder = null;
+            this.sourceId = null;
+            this.dragFromNodeId = null;
         }
         else {
             // Show node type selector
@@ -1416,10 +1650,43 @@ export class Editor extends RapidElement {
             if (selector) {
                 selector.show(selection.action, selection.position);
             }
+            // Note: we don't clear pendingCanvasConnection or placeholder here,
+            // they will be used in handleNodeTypeSelection
+        }
+    }
+    cleanUpConnection() {
+        if (this.isCreatingNewNode) {
+            this.isCreatingNewNode = false;
+            this.pendingNodePosition = null;
         }
+        // see if we need to put our connection back
+        if (this.originalConnectionTargetId) {
+            this.plumber.connectIds(this.dragFromNodeId, this.sourceId, this.originalConnectionTargetId);
+            this.originalConnectionTargetId = null;
+        }
+        // Menu closed without selection - clear placeholder and pending connection
+        if (this.pendingCanvasConnection) {
+            this.pendingCanvasConnection = null;
+            this.connectionPlaceholder = null;
+            this.sourceId = null;
+            this.dragFromNodeId = null;
+            this.originalConnectionTargetId = null;
+        }
+    }
+    handleCanvasMenuClosed() {
+        this.cleanUpConnection();
+    }
+    handleNodeTypeSelectorClosed() {
+        this.cleanUpConnection();
     }
     handleNodeTypeSelection(event) {
         const selection = event.detail;
+        // Check if we have a pending canvas connection (from dropping on empty canvas)
+        if (this.pendingCanvasConnection) {
+            // Don't clear the placeholder yet - keep it visible while editing
+            // The position is already stored in pendingCanvasConnection
+            // Fall through to normal node creation flow below
+        }
         // Check if we're adding an action to an existing node
         if (this.addActionToNodeUuid) {
             // Find the existing node
@@ -1480,19 +1747,23 @@ export class Editor extends RapidElement {
             };
         }
         const tempNodeUI = {
-            position: {
-                left: selection.position.x,
-                top: selection.position.y
-            },
+            position: this.pendingCanvasConnection
+                ? this.pendingCanvasConnection.position
+                : {
+                    left: selection.position.x,
+                    top: selection.position.y
+                },
             type: nodeType,
             config: {}
         };
         // Mark that we're creating a new node and store the position
         this.isCreatingNewNode = true;
-        this.pendingNodePosition = {
-            left: selection.position.x,
-            top: selection.position.y
-        };
+        this.pendingNodePosition = this.pendingCanvasConnection
+            ? this.pendingCanvasConnection.position
+            : {
+                left: selection.position.x,
+                top: selection.position.y
+            };
         // Open the node editor with the temporary node
         this.editingNode = tempNode;
         this.editingNodeUI = tempNodeUI;
@@ -1576,6 +1847,17 @@ export class Editor extends RapidElement {
                 };
                 // Add the node to the store
                 store.getState().addNode(updatedNode, nodeUI);
+                // If we have a pending canvas connection, connect it to this new node
+                if (this.pendingCanvasConnection) {
+                    store
+                        .getState()
+                        .updateConnection(this.pendingCanvasConnection.fromNodeId, this.pendingCanvasConnection.exitId, updatedNode.uuid);
+                    // Clear the pending connection and placeholder
+                    this.pendingCanvasConnection = null;
+                    this.connectionPlaceholder = null;
+                    this.sourceId = null;
+                    this.dragFromNodeId = null;
+                }
                 // Reset the creation flags
                 this.isCreatingNewNode = false;
                 this.pendingNodePosition = null;
@@ -1585,11 +1867,12 @@ export class Editor extends RapidElement {
                 });
             }
             else {
+                const uuid = this.editingNode.uuid;
                 // Update existing node in the store
-                (_c = getStore()) === null || _c === void 0 ? void 0 : _c.getState().updateNode(this.editingNode.uuid, updatedNode);
+                (_c = getStore()) === null || _c === void 0 ? void 0 : _c.getState().updateNode(uuid, updatedNode);
                 // Check for collisions and reflow in case node size changed
                 requestAnimationFrame(() => {
-                    this.checkCollisionsAndReflow([this.editingNode.uuid]);
+                    this.checkCollisionsAndReflow([uuid]);
                 });
             }
         }
@@ -1602,10 +1885,7 @@ export class Editor extends RapidElement {
     }
     handleActionEditCanceled() {
         // If we were creating a new node, just discard it
-        if (this.isCreatingNewNode) {
-            this.isCreatingNewNode = false;
-            this.pendingNodePosition = null;
-        }
+        this.cleanUpConnection();
         this.closeNodeEditor();
     }
     handleNodeSaved(updatedNode, uiConfig) {
@@ -1621,6 +1901,17 @@ export class Editor extends RapidElement {
                 };
                 // Add the node to the store
                 store.getState().addNode(updatedNode, nodeUI);
+                // If we have a pending canvas connection, connect it to this new node
+                if (this.pendingCanvasConnection) {
+                    store
+                        .getState()
+                        .updateConnection(this.pendingCanvasConnection.fromNodeId, this.pendingCanvasConnection.exitId, updatedNode.uuid);
+                    // Clear the pending connection and placeholder
+                    this.pendingCanvasConnection = null;
+                    this.connectionPlaceholder = null;
+                    this.sourceId = null;
+                    this.dragFromNodeId = null;
+                }
                 // Reset the creation flags
                 this.isCreatingNewNode = false;
                 this.pendingNodePosition = null;
@@ -1658,11 +1949,7 @@ export class Editor extends RapidElement {
         this.closeNodeEditor();
     }
     handleNodeEditCanceled() {
-        // If we were creating a new node, just discard it
-        if (this.isCreatingNewNode) {
-            this.isCreatingNewNode = false;
-            this.pendingNodePosition = null;
-        }
+        this.cleanUpConnection();
         this.closeNodeEditor();
     }
     getNodeAtPosition(mouseX, mouseY) {
@@ -1921,8 +2208,8 @@ export class Editor extends RapidElement {
         const languageLocalization = this.getLanguageLocalization(languageCode);
         const bundles = [];
         this.definition.nodes.forEach((node) => {
-            var _b, _c, _d, _e;
-            node.actions.forEach((action) => {
+            var _b, _c, _d, _e, _f;
+            (_b = node.actions) === null || _b === void 0 ? void 0 : _b.forEach((action) => {
                 const config = ACTION_CONFIG[action.type];
                 if (!(config === null || config === void 0 ? void 0 : config.localizable) || config.localizable.length === 0) {
                     return;
@@ -1944,14 +2231,14 @@ export class Editor extends RapidElement {
             if (!includeCategories) {
                 return;
             }
-            const nodeUI = (_c = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c[node.uuid];
+            const nodeUI = (_d = (_c = this.definition._ui) === null || _c === void 0 ? void 0 : _c.nodes) === null || _d === void 0 ? void 0 : _d[node.uuid];
             const nodeType = nodeUI === null || nodeUI === void 0 ? void 0 : nodeUI.type;
             if (!nodeType) {
                 return;
             }
             const nodeConfig = NODE_CONFIG[nodeType];
             if ((nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.localizable) === 'categories' &&
-                ((_e = (_d = node.router) === null || _d === void 0 ? void 0 : _d.categories) === null || _e === void 0 ? void 0 : _e.length)) {
+                ((_f = (_e = node.router) === null || _e === void 0 ? void 0 : _e.categories) === null || _f === void 0 ? void 0 : _f.length)) {
                 const categoryTranslations = node.router.categories.flatMap((category) => this.findTranslations('category', category.uuid, ['name'], category, languageLocalization));
                 if (categoryTranslations.length > 0) {
                     bundles.push({
@@ -2048,6 +2335,7 @@ export class Editor extends RapidElement {
             return;
         }
         this.localizationWindowHidden = false;
+        this.revisionsWindowHidden = true;
         const alreadySelected = languages.some((lang) => lang.code === this.languageCode);
         if (!alreadySelected) {
             this.handleLanguageChange(languages[0].code);
@@ -2255,6 +2543,199 @@ export class Editor extends RapidElement {
         }
         this.autoTranslating = false;
     }
+    handleRevisionsTabClick() {
+        if (this.revisionsWindowHidden) {
+            this.fetchRevisions();
+            this.revisionsWindowHidden = false;
+            this.localizationWindowHidden = true; // Close other window
+        }
+    }
+    handleRevisionsWindowClosed() {
+        this.resetRevisionsScroll();
+        this.revisionsWindowHidden = true;
+        if (this.viewingRevision) {
+            this.handleCancelRevisionView();
+        }
+    }
+    resetRevisionsScroll() {
+        var _b;
+        const list = (_b = this.querySelector('#revisions-window').shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.body');
+        if (list) {
+            list.scrollTop = 0;
+        }
+    }
+    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;
+        }
+    }
+    async handleRevisionClick(revision) {
+        var _b, _c;
+        if (((_b = this.viewingRevision) === null || _b === void 0 ? void 0 : _b.id) === revision.id) {
+            return;
+        }
+        if (!this.viewingRevision) {
+            // Save current state first
+            this.preRevertState = {
+                definition: this.definition,
+                dirtyDate: this.dirtyDate
+            };
+        }
+        this.viewingRevision = revision;
+        this.isLoadingRevisions = true;
+        (_c = this.plumber) === null || _c === void 0 ? void 0 : _c.reset();
+        try {
+            await getStore()
+                .getState()
+                .fetchRevision(`/flow/revisions/${this.flow}`, revision.id.toString());
+        }
+        catch (e) {
+            console.error('Error fetching revision details', e);
+            this.handleCancelRevisionView();
+        }
+        finally {
+            this.isLoadingRevisions = false;
+        }
+    }
+    handleCancelRevisionView() {
+        var _b;
+        (_b = this.plumber) === null || _b === void 0 ? void 0 : _b.reset();
+        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);
+            }
+        }
+        else {
+            // Fallback if no pre-revert definition
+            getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
+        }
+        this.viewingRevision = null;
+        this.preRevertState = null;
+    }
+    async handleRevertClick() {
+        var _b;
+        if (!this.viewingRevision || !this.preRevertState)
+            return;
+        (_b = this.plumber) === null || _b === void 0 ? void 0 : _b.reset();
+        // 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;
+        this.revisionsWindowHidden = true;
+        const revisionsWindow = document.getElementById('revisions-window');
+        revisionsWindow.handleClose();
+        // Refresh revisions list to show the new one
+        this.fetchRevisions();
+        // Fetch the latest version of the flow to ensure the store is up to date
+        getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
+    }
+    renderRevisionsTab() {
+        return html `
+      <temba-floating-tab
+        id="revisions-tab"
+        icon="revisions"
+        label="Revisions"
+        color="rgb(142, 94, 167)"
+        top="105"
+        .hidden=${!this.revisionsWindowHidden && this.localizationWindowHidden}
+        @temba-button-clicked=${this.handleRevisionsTabClick}
+      ></temba-floating-tab>
+    `;
+    }
+    renderRevisionsWindow() {
+        return html `
+      <temba-floating-window
+        id="revisions-window"
+        header="Revisions"
+        .width=${360}
+        .maxHeight=${600}
+        .top=${75}
+        color="rgb(142, 94, 167)"
+        .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) => {
+                var _b;
+                const isSelected = ((_b = this.viewingRevision) === null || _b === void 0 ? void 0 : _b.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>
+    `;
+    }
     renderLocalizationWindow() {
         var _b, _c, _d;
         const languages = this.getLocalizationLanguages();
@@ -2481,6 +2962,9 @@ export class Editor extends RapidElement {
             behavior: 'smooth'
         });
     }
+    isReadOnly() {
+        return this.viewingRevision !== null || this.isTranslating;
+    }
     render() {
         var _b, _c;
         // we have to embed our own style since we are in light DOM
@@ -2489,17 +2973,24 @@ export class Editor extends RapidElement {
       ${unsafeCSS(CanvasNode.styles.cssText)}
     </style>`;
         const stickies = ((_c = (_b = this.definition) === null || _b === void 0 ? void 0 : _b._ui) === null || _c === void 0 ? void 0 : _c.stickies) || {};
-        return html `${style} ${this.renderLocalizationWindow()}
-      ${this.renderAutoTranslateDialog()}
+        return html `${style} ${this.renderRevisionsWindow()}
+      ${this.renderLocalizationWindow()} ${this.renderAutoTranslateDialog()}
       <div id="editor">
         <div
           id="grid"
+          class="${this.viewingRevision ? 'viewing-revision' : ''}"
           style="min-width:100%;width:${this.canvasSize.width}px; height:${this
             .canvasSize.height}px"
         >
-          <div id="canvas">
+          <div
+            id="canvas"
+            class="${getClasses({
+            'viewing-revision': !!this.viewingRevision,
+            'read-only-connections': !!this.viewingRevision || this.isTranslating
+        })}"
+          >
             ${this.definition
-            ? repeat(this.definition.nodes, (node) => node.uuid, (node, index) => {
+            ? repeat([...this.definition.nodes].sort((a, b) => a.uuid.localeCompare(b.uuid)), (node) => node.uuid, (node) => {
                 var _b, _c, _d;
                 const position = ((_c = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.nodes[node.uuid]) === null || _c === void 0 ? void 0 : _c.position) || {
                     left: 0,
@@ -2509,7 +3000,8 @@ export class Editor extends RapidElement {
                     ((_d = this.currentDragItem) === null || _d === void 0 ? void 0 : _d.uuid) === node.uuid;
                 const selected = this.selectedItems.has(node.uuid);
                 // first node is the flow start (nodes are sorted by position)
-                const isFlowStart = index === 0;
+                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'
@@ -2545,6 +3037,7 @@ export class Editor extends RapidElement {
                 ></temba-sticky-note>`;
         })}
             ${this.renderSelectionBox()} ${this.renderCanvasDropPreview()}
+            ${this.renderConnectionPlaceholder()}
           </div>
         </div>
       </div>
@@ -2561,11 +3054,13 @@ export class Editor extends RapidElement {
             : ''}
 
       <temba-canvas-menu></temba-canvas-menu>
-      <temba-node-type-selector
-        .flowType=${this.flowType}
-        .features=${this.features}
-      ></temba-node-type-selector>
-      ${this.renderLocalizationTab()} `;
+      ${!this.viewingRevision
+            ? html `<temba-node-type-selector
+            .flowType=${this.flowType}
+            .features=${this.features}
+          ></temba-node-type-selector>`
+            : ''}
+      ${this.renderRevisionsTab()} ${this.renderLocalizationTab()} `;
     }
 }
 __decorate([
@@ -2628,6 +3123,9 @@ __decorate([
 __decorate([
     state()
 ], Editor.prototype, "dragFromNodeId", void 0);
+__decorate([
+    state()
+], Editor.prototype, "originalConnectionTargetId", void 0);
 __decorate([
     state()
 ], Editor.prototype, "isValidTarget", void 0);
@@ -2652,6 +3150,18 @@ __decorate([
 __decorate([
     state()
 ], Editor.prototype, "autoTranslateError", void 0);
+__decorate([
+    state()
+], Editor.prototype, "revisionsWindowHidden", void 0);
+__decorate([
+    state()
+], Editor.prototype, "revisions", void 0);
+__decorate([
+    state()
+], Editor.prototype, "viewingRevision", void 0);
+__decorate([
+    state()
+], Editor.prototype, "isLoadingRevisions", void 0);
 __decorate([
     state()
 ], Editor.prototype, "editingNode", void 0);
@@ -2676,4 +3186,7 @@ __decorate([
 __decorate([
     state()
 ], Editor.prototype, "actionDragTargetNodeUuid", void 0);
+__decorate([
+    state()
+], Editor.prototype, "connectionPlaceholder", void 0);
 //# sourceMappingURL=Editor.js.map