@node-red/editor-client 4.1.1 → 5.0.0-beta.0

package/public/red/red.js

@@ -878,7 +878,7 @@ var RED = (function() {
         RED.user.init();
         RED.notifications.init();
         RED.library.init();
-        RED.palette.init();
+        RED.sidebar.init();
         RED.eventLog.init();
 
         if (RED.settings.get('externalModules.palette.allowInstall', true) !== false) {
@@ -887,7 +887,6 @@ var RED = (function() {
             console.log("Palette editor disabled");
         }
 
-        RED.sidebar.init();
 
         if (RED.settings.theme("projects.enabled",false)) {
             RED.projects.init();
@@ -904,23 +903,34 @@ var RED = (function() {
         RED.diagnostics.init();
         RED.diff.init();
 
-
         RED.deploy.init(RED.settings.theme("deployButton",null));
+        RED.keyboard.init(() => {
+            buildMainMenu();
 
-        RED.keyboard.init(buildMainMenu);
-        RED.envVar.init();
+            // Register the core set of sidebar panels now the menu is ready to receive items
+            RED.palette.init();
+            RED.sidebar.info.init();
+            RED.sidebar.help.init();
+            RED.sidebar.config.init();
+            RED.sidebar.context.init();
+            // hide sidebar at start if screen rather narrow...
+            if ($("#red-ui-editor").width() < 600) { RED.menu.setSelected("menu-item-sidebar", false); }
 
-        RED.nodes.init();
-        RED.runtime.init()
+            RED.envVar.init();
 
-        if (RED.settings.theme("multiplayer.enabled",false)) {
-            RED.multiplayer.init()
-        }
-        RED.comms.connect();
+            RED.nodes.init();
+            RED.runtime.init()
 
-        $("#red-ui-main-container").show();
+            if (RED.settings.theme("multiplayer.enabled",false)) {
+                RED.multiplayer.init()
+            }
+            RED.comms.connect();
 
-        loadPluginList();
+            $("#red-ui-main-container").show();
+            RED.events.emit("sidebar:resize")
+
+            loadPluginList();
+        });
     }
 
 
@@ -929,13 +939,18 @@ var RED = (function() {
         var logo = $('<span class="red-ui-header-logo"></span>').appendTo(header);
         $('<ul class="red-ui-header-toolbar hide"></ul>').appendTo(header);
         $('<div id="red-ui-header-shade" class="hide"></div>').appendTo(header);
-        $('<div id="red-ui-main-container" class="red-ui-sidebar-closed hide">'+
+        $('<div id="red-ui-main-container">'+
+            '<div id="red-ui-sidebar-left"></div>'+
             '<div id="red-ui-workspace"></div>'+
-            '<div id="red-ui-editor-stack" tabindex="-1"></div>'+
-            '<div id="red-ui-palette"></div>'+
             '<div id="red-ui-sidebar"></div>'+
-            '<div id="red-ui-sidebar-separator"></div>'+
+            '<div id="red-ui-editor-stack" tabindex="-1"></div>'+
+            // '<div id="red-ui-palette"></div>'+
         '</div>').appendTo(options.target);
+    
+        // Don't use the `hide` class on this container, as the show reverts it to block rather
+        // than the expected flex. So hide via jQuery as it'll track the show state internally.
+        options.target.find('#red-ui-main-container').hide()
+
         $('<div id="red-ui-editor-plugin-configs"></div>').appendTo(options.target);
         $('<div id="red-ui-editor-node-configs"></div>').appendTo(options.target);
         $('<div id="red-ui-full-shade" class="hide"></div>').appendTo(options.target);
@@ -2139,8 +2154,8 @@ RED.comms = (function() {
                                                 subscribers[i](msg.topic,msg.data);
                                             } catch (error) {
                                                 // need to decide what to do with this uncaught error
-                                                console.warn('Uncaught error from RED.comms.subscribe: ' + err.toString())
-                                                console.warn(err)
+                                                console.warn('Uncaught error from RED.comms.subscribe: ' + error.toString())
+                                                console.warn(error)
                                             }
                                         }
                                     }
@@ -9321,7 +9336,15 @@ RED.history = (function() {
                         }
                     }
                 }
-
+                if (ev.node.type === 'subflow') {
+                    // Ensure ports get a refresh in case of a label change
+                    if (ev.changes.inputLabels) {
+                        ev.node.in.forEach(function(input) { input.dirty = true; });
+                    }
+                    if (ev.changes.outputLabels) {
+                        ev.node.out.forEach(function(output) { output.dirty = true; });
+                    }
+                }
                 ev.node.dirty = true;
                 ev.node.changed = ev.changed;
 
@@ -9632,8 +9655,8 @@ RED.history = (function() {
     return {
         //TODO: this function is a placeholder until there is a 'save' event that can be listened to
         markAllDirty: function() {
-            for (var i=0;i<undoHistory.length;i++) {
-                undoHistory[i].dirty = true;
+            for (const event of [...undoHistory, ...redoHistory]) {
+                event.dirty = true;
             }
         },
         list: function() {
@@ -13195,7 +13218,7 @@ RED.menu = (function() {
             } else {
                 for (var i=0;i<groupItems.length;i++) {
                     var groupItem = groupItems[i];
-                    var label = $(groupItem).find(".red-ui-menu-label").html();
+                    var label = $(groupItem).find(".red-ui-menu-label span").text();
                     if (opt.label < label) {
                         $(groupItem).before(item);
                         break;
@@ -14861,7 +14884,6 @@ RED.tabs = (function() {
                     ul.find("li.red-ui-tab.active .red-ui-tab-label").css({paddingLeft:""})
                 }
             }
-
         }
 
         ul.find("li.red-ui-tab a")
@@ -15361,7 +15383,8 @@ RED.tabs = (function() {
                     pinnedButtons["__menu__"].appendTo(collapsedButtonsRow);
                     updateTabWidths();
                 }
-            }
+            },
+            container: wrapper
         }
         return tabAPI;
     }
@@ -17791,7 +17814,7 @@ RED.deploy = (function() {
     }
 
     function updateLockedState() {
-        if (RED.settings.user?.permissions === 'read') {
+        if (!RED.user.hasPermission('flows.write')) {
             $(".red-ui-deploy-button-group").addClass("readOnly");
             $("#red-ui-header-button-deploy").addClass("disabled");
         } else {
@@ -17924,13 +17947,13 @@ RED.deploy = (function() {
         $("#red-ui-header-shade").show();
         $("#red-ui-editor-shade").show();
         $("#red-ui-palette-shade").show();
-        $("#red-ui-sidebar-shade").show();
+        $(".red-ui-sidebar-shade").show();
     }
     function shadeHide() {
         $("#red-ui-header-shade").hide();
         $("#red-ui-editor-shade").hide();
         $("#red-ui-palette-shade").hide();
-        $("#red-ui-sidebar-shade").hide();
+        $(".red-ui-sidebar-shade").hide();
     }
     function deployButtonSetBusy(){
         $(".red-ui-deploy-button-content").css('opacity',0);
@@ -19744,11 +19767,11 @@ RED.diagnostics = (function () {
                     diffTable.finish();
                     diffTable.list.show();
                 },300);
-                $("#red-ui-sidebar-shade").show();
+                $(".red-ui-sidebar-shade").show();
             },
             close: function() {
                 diffVisible = false;
-                $("#red-ui-sidebar-shade").hide();
+                $(".red-ui-sidebar-shade").hide();
 
             },
             show: function() {
@@ -22675,11 +22698,29 @@ RED.view = (function() {
         node_height = 30,
         dblClickInterval = 650;
 
+    var cancelInProgressAnimation = null; // For smooth zoom animation
+
     var touchLongPressTimeout = 1000,
         startTouchDistance = 0,
         startTouchCenter = [],
         moveTouchCenter = [],
-        touchStartTime = 0;
+        touchStartTime = 0,
+        gesture = {};
+
+    var spacebarPressed = false;
+
+    // Momentum scrolling state
+    var scrollVelocity = { x: 0, y: 0 };
+    var lastScrollTime = 0;
+    var lastScrollPos = { x: 0, y: 0 };
+    var scrollAnimationId = null;
+    var momentumActive = false;
+
+    // Bounce effect parameters
+    var BOUNCE_DAMPING = 0.6;
+    var BOUNCE_TENSION = 0.3;
+    var MIN_VELOCITY = 0.5;
+    var FRICTION = 0.95;
 
     var workspaceScrollPositions = {};
 
@@ -22742,6 +22783,7 @@ RED.view = (function() {
     let suggestedLinks = [];
     let suggestedJunctions = [];
 
+    let forceFullRedraw = false
     // Note: these are the permitted status colour aliases. The actual RGB values
     //       are set in the CSS - flow.scss/colors.scss
     const status_colours = {
@@ -22955,6 +22997,24 @@ RED.view = (function() {
     function init() {
 
         chart = $("#red-ui-workspace-chart");
+
+        // Add invisible spacer div to ensure scrollable area matches canvas dimensions
+        // At minimum zoom with "cover" behavior, SVG may be smaller than viewport in one dimension
+        // This spacer forces the browser to calculate scrollWidth/Height based on full canvas size
+        // Browser's maxScroll = scrollWidth - viewport will then correctly show canvas edges
+        var scrollSpacer = $('<div>')
+            .css({
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: space_width + 'px',
+                height: space_height + 'px',
+                pointerEvents: 'none',
+                visibility: 'hidden'
+            })
+            .attr('id', 'red-ui-workspace-scroll-spacer')
+            .appendTo(chart);
+
         chart.on('contextmenu', function(evt) {
             if (RED.view.DEBUG) {
                 console.warn("contextmenu", { mouse_mode, event: d3.event });
@@ -22999,8 +23059,9 @@ RED.view = (function() {
                         lasso.remove();
                         lasso = null;
                     }
-                } else if (mouse_mode === RED.state.PANNING && d3.event.buttons !== 4) {
-                    resetMouseVars();
+                } else if (mouse_mode === RED.state.PANNING) {
+                    // ensure the cursor is set to grab when re-entering the canvas while panning
+                    outer.style('cursor', 'grabbing');
                 } else if (slicePath) {
                     if (d3.event.buttons !== 2) {
                         slicePath.remove();
@@ -23017,11 +23078,15 @@ RED.view = (function() {
                 if  (RED.touch.radialMenu.active()) {
                     return;
                 }
+                // End gesture when touches end
+                RED.view.zoomAnimator.endGesture();
                 canvasMouseUp.call(this);
             })
             .on("touchcancel", function() {
                 if (RED.view.DEBUG) { console.warn("eventLayer.touchcancel", mouse_mode); }
                 d3.event.preventDefault();
+                // End gesture when touches are cancelled
+                RED.view.zoomAnimator.endGesture();
                 canvasMouseUp.call(this);
             })
             .on("touchstart", function() {
@@ -23047,6 +23112,20 @@ RED.view = (function() {
                         touch1["pageY"]+(a/2)
                     ]
                     startTouchDistance = Math.sqrt((a*a)+(b*b));
+                    
+                    // Store initial scale for ratio-based zoom calculation
+                    gesture = {
+                        initialScale: scaleFactor,
+                        initialDistance: startTouchDistance,
+                        mode: null  // Will be determined on first significant move
+                    };
+                    
+                    // Start gesture with fixed focal point (store in workspace coordinates)
+                    var focalPoint = [
+                        (touch0["pageX"] + touch1["pageX"]) / 2 - offset.left,
+                        (touch0["pageY"] + touch1["pageY"]) / 2 - offset.top
+                    ];
+                    RED.view.zoomAnimator.startGesture(focalPoint, scaleFactor, scrollPos, scaleFactor);
                 } else {
                     var obj = d3.select(document.body);
                     touch0 = d3.event.touches.item(0);
@@ -23096,33 +23175,93 @@ RED.view = (function() {
                         var offset = chart.offset();
                         var scrollPos = [chart.scrollLeft(),chart.scrollTop()];
                         var moveTouchDistance = Math.sqrt((a*a)+(b*b));
-                        var touchCenter = [
-                            touch1["pageX"]+(b/2),
-                            touch1["pageY"]+(a/2)
+                        
+                        // Calculate center point of two fingers
+                        var currentTouchCenter = [
+                            (touch0["pageX"] + touch1["pageX"]) / 2,
+                            (touch0["pageY"] + touch1["pageY"]) / 2
                         ];
 
                         if (!isNaN(moveTouchDistance)) {
-                            oldScaleFactor = scaleFactor;
-                            scaleFactor = Math.min(2,Math.max(0.3, scaleFactor + (Math.floor(((moveTouchDistance*100)-(startTouchDistance*100)))/10000)));
-
-                            var deltaTouchCenter = [                             // Try to pan whilst zooming - not 100%
-                                startTouchCenter[0]*(scaleFactor-oldScaleFactor),//-(touchCenter[0]-moveTouchCenter[0]),
-                                startTouchCenter[1]*(scaleFactor-oldScaleFactor) //-(touchCenter[1]-moveTouchCenter[1])
-                            ];
-
-                            startTouchDistance = moveTouchDistance;
-                            moveTouchCenter = touchCenter;
+                            // Determine gesture mode on first significant movement
+                            if (!gesture.mode) {
+                                var distanceChange = Math.abs(moveTouchDistance - startTouchDistance);
+                                var centerChange = moveTouchCenter ? 
+                                    Math.sqrt(Math.pow(currentTouchCenter[0] - moveTouchCenter[0], 2) + 
+                                             Math.pow(currentTouchCenter[1] - moveTouchCenter[1], 2)) : 0;
+                                
+                                // Lock into zoom mode if distance changes significantly (>10px)
+                                // Lock into pan mode if center moves significantly (>5px) without distance change
+                                if (distanceChange > 10) {
+                                    gesture.mode = 'zoom';
+                                } else if (centerChange > 5) {
+                                    gesture.mode = 'pan';
+                                }
+                            }
+                            
+                            // Once mode is determined, stay in that mode for the entire gesture
+                            if (gesture.mode === 'zoom') {
+                                oldScaleFactor = scaleFactor;
+                                // Use smooth ratio-based scaling for natural pinch-to-zoom
+                                var zoomRatio = moveTouchDistance / startTouchDistance;
+                                var minZoom = calculateMinZoom();
+                                var newScaleFactor = Math.min(RED.view.zoomConstants.MAX_ZOOM, 
+                                                             Math.max(minZoom, gesture.initialScale * zoomRatio));
+
+                                // Use gesture state management to maintain fixed focal point
+                                var gestureState = RED.view.zoomAnimator.updateGesture(newScaleFactor);
+                                
+                                // Only call zoomView if scale is actually changing (not at limits)
+                                if (Math.abs(scaleFactor - newScaleFactor) >= 0.001) {
+                                    // Get focal point converted back to current screen coordinates
+                                    var currentScrollPos = [chart.scrollLeft(), chart.scrollTop()];
+                                    var focalPoint = RED.view.zoomAnimator.getGestureFocalPoint(currentScrollPos, scaleFactor);
+                                    
+                                    if (focalPoint) {
+                                        // Use the fixed focal point from gesture start (converted from workspace coords)
+                                        zoomView(newScaleFactor, focalPoint);
+                                    } else {
+                                        // Fallback to current behavior if gesture not active
+                                        var touchCenter = [
+                                            touch1["pageX"]+(b/2),
+                                            touch1["pageY"]+(a/2)
+                                        ];
+                                        var pinchCenter = [
+                                            touchCenter[0] - offset.left,
+                                            touchCenter[1] - offset.top
+                                        ];
+                                        zoomView(newScaleFactor, pinchCenter);
+                                    }
+                                }
+                            } else if (gesture.mode === 'pan' || !gesture.mode) {
+                                // Two-finger pan: allow immediate panning even if mode not determined
+                                // Clear touchStartTime to prevent issues with next gesture
+                                if (touchStartTime) {
+                                    clearTimeout(touchStartTime);
+                                    touchStartTime = null;
+                                }
+                                if (moveTouchCenter) {
+                                    var dx = currentTouchCenter[0] - moveTouchCenter[0];
+                                    var dy = currentTouchCenter[1] - moveTouchCenter[1];
+                                    
+                                    // Pan the canvas
+                                    var currentScroll = [chart.scrollLeft(), chart.scrollTop()];
+                                    chart.scrollLeft(currentScroll[0] - dx);
+                                    chart.scrollTop(currentScroll[1] - dy);
+                                    RED.events.emit("view:navigate");
+                                }
+                                // Update the center for next move
+                                moveTouchCenter = currentTouchCenter;
+                            }
 
-                            chart.scrollLeft(scrollPos[0]+deltaTouchCenter[0]);
-                            chart.scrollTop(scrollPos[1]+deltaTouchCenter[1]);
-                            redraw();
+                            // Don't update startTouchDistance - keep initial distance for ratio calculation
                         }
                     }
                     d3.event.preventDefault();
             });
-            
-
-        const handleAltToggle = (event) => {
+        
+        const handleChartKeyboardEvents = (event) => {
+            // Handle Alt toggle for pulling nodes out of groups
             if (mouse_mode === RED.state.MOVING_ACTIVE && event.key === 'Alt' && groupAddParentGroup) {
                 RED.nodes.group(groupAddParentGroup).dirty = true
                 for (let n = 0; n<movingSet.length(); n++) {
@@ -23141,10 +23280,67 @@ RED.view = (function() {
                     }
                 }
                 RED.view.redraw()
+            } else if (event.keyCode === 32 || event.key === ' ') {
+                if (mouse_mode === RED.state.PANNING) {
+                    // Already in panning mode - just prevent the event default handler
+                    event.preventDefault()
+                    event.stopPropagation()
+                    if (event.type === 'keyup' && spacebarPressed) {
+                        spacebarPressed = false
+                    }
+                } else if (mouse_mode === RED.state.DEFAULT) {
+                    // Handle spacebar for panning
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (event.type === "keydown" && !spacebarPressed) {
+                        spacebarPressed = true;
+                        // Change cursor to grab hand when spacebar is pressed
+                        outer.style('cursor', 'grab');
+                    } else if (event.type === "keyup" && spacebarPressed) {
+                        spacebarPressed = false;
+                        // Revert cursor when spacebar is released
+                        outer.style('cursor', '');
+                    }
+                }
             }
         }
-        document.addEventListener("keyup", handleAltToggle)
-        document.addEventListener("keydown", handleAltToggle)
+        chart.on("keydown", handleChartKeyboardEvents)
+        chart.on("keyup", handleChartKeyboardEvents)
+        
+        // // // Window-level keyup listener to catch spacebar release when cursor is outside canvas
+        // // function handleWindowSpacebarUp(e) {
+        // //     if ((e.keyCode === 32 || e.key === ' ') && spacebarPressed) {
+        // //         spacebarPressed = false;
+        // //         // Revert cursor when spacebar is released outside canvas
+        // //         outer.style('cursor', '');
+        // //         e.preventDefault();
+        // //         e.stopPropagation();
+        // //     }
+        // // }
+        // // chart.on("keyup", handleSpacebarToggle)
+        // // chart.on("keydown", handleSpacebarToggle)
+        // // Additional window-level keyup listener to ensure spacebar state is cleared
+        // // when cursor leaves canvas area while spacebar is held
+        // window.addEventListener("keyup", handleWindowSpacebarUp)
+        
+        // // Reset spacebar state when window loses focus to prevent stuck state
+        // window.addEventListener("blur", function() {
+        //     if (spacebarPressed) {
+        //         spacebarPressed = false;
+        //         // Revert cursor when window loses focus
+        //         outer.style('cursor', '');
+        //     }
+        // })
+        
+        // Recalculate minimum zoom when window resizes
+        $(window).on("resize.red-ui-view", function() {
+            // Recalculate minimum zoom to ensure canvas fits in viewport
+            var newMinZoom = calculateMinZoom();
+            // If current zoom is below new minimum, adjust it
+            if (scaleFactor < newMinZoom) {
+                zoomView(newMinZoom);
+            }
+        })
 
         // Workspace Background
         eventLayer.append("svg:rect")
@@ -23236,22 +23432,194 @@ RED.view = (function() {
             '<button class="red-ui-footer-button" id="red-ui-view-zoom-out"><i class="fa fa-minus"></i></button>'+
             '<button class="red-ui-footer-button" id="red-ui-view-zoom-zero"><i class="fa fa-circle-o"></i></button>'+
             '<button class="red-ui-footer-button" id="red-ui-view-zoom-in"><i class="fa fa-plus"></i></button>'+
+            '<button class="red-ui-footer-button" id="red-ui-view-zoom-fit"><i class="fa fa-compress"></i></button>'+
             '</span>')
         })
 
-        $("#red-ui-view-zoom-out").on("click", zoomOut);
+        $("#red-ui-view-zoom-out").on("click", function() { zoomOut(); });
         RED.popover.tooltip($("#red-ui-view-zoom-out"),RED._('actions.zoom-out'),'core:zoom-out');
         $("#red-ui-view-zoom-zero").on("click", zoomZero);
         RED.popover.tooltip($("#red-ui-view-zoom-zero"),RED._('actions.zoom-reset'),'core:zoom-reset');
-        $("#red-ui-view-zoom-in").on("click", zoomIn);
+        $("#red-ui-view-zoom-in").on("click", function() { zoomIn(); });
         RED.popover.tooltip($("#red-ui-view-zoom-in"),RED._('actions.zoom-in'),'core:zoom-in');
-        chart.on("DOMMouseScroll mousewheel", function (evt) {
-            if ( evt.altKey ) {
+        $("#red-ui-view-zoom-fit").on("click", zoomToFitAll);
+        RED.popover.tooltip($("#red-ui-view-zoom-fit"),RED._('actions.zoom-fit'),'core:zoom-fit');
+        // Legacy mouse wheel handler - disabled in favor of modern wheel event
+        // chart.on("DOMMouseScroll mousewheel", function (evt) {
+        //     if ( evt.altKey || spacebarPressed ) {
+        //         evt.preventDefault();
+        //         evt.stopPropagation();
+        //         // Get cursor position relative to the chart
+        //         var offset = chart.offset();
+        //         var cursorPos = [
+        //             evt.originalEvent.pageX - offset.left,
+        //             evt.originalEvent.pageY - offset.top
+        //         ];
+        //         var move = -(evt.originalEvent.detail) || evt.originalEvent.wheelDelta;
+        //         if (move <= 0) { zoomOut(cursorPos); }
+        //         else { zoomIn(cursorPos); }
+        //     }
+        // });
+
+        // Modern wheel event handler for better trackpad support (pinch-to-zoom) and momentum
+        var momentumTimer = null;
+        var trackpadGestureTimer = null;
+        var lastWheelEventTime = 0;
+        var wheelEventContinuityThreshold = 100; // Events within 100ms are same gesture
+        var gestureEndThreshold = 500; // 500ms+ gap means gesture ended
+        
+        // Prevent browser zoom on non-canvas areas
+        document.addEventListener("wheel", function(e) {
+            if (e.ctrlKey && !e.target.closest('#red-ui-workspace-chart')) {
+                e.preventDefault();
+            }
+        }, { passive: false });
+        
+        chart.on("wheel", function(evt) {
+            if (mouse_mode === RED.state.PANNING) {
+                // Ignore wheel events while panning
+                return;
+            }
+            // ctrlKey is set during pinch gestures on trackpads
+            if (evt.ctrlKey || evt.altKey || spacebarPressed) {
+                evt.preventDefault();
+                evt.stopPropagation();
+                
+                var currentTime = Date.now();
+                var timeSinceLastEvent = currentTime - lastWheelEventTime;
+                
+                // Get cursor position relative to the chart
+                var offset = chart.offset();
+                var cursorPos = [
+                    evt.originalEvent.pageX - offset.left,
+                    evt.originalEvent.pageY - offset.top
+                ];
+                var delta = evt.originalEvent.deltaY;
+                
+                // For trackpad pinch (Ctrl+wheel), use smooth proportional zoom
+                if (evt.ctrlKey && !evt.altKey && !spacebarPressed) {
+                    // Detect input device: trackpad has small deltas, mouse wheel has large deltas
+                    var isTrackpadInput = Math.abs(delta) < 50;
+                    // Invert delta: spreading fingers (negative deltaY) should zoom in
+                    var scaleDelta = RED.view.zoomAnimator.calculateZoomDelta(scaleFactor, -delta, isTrackpadInput);
+                    var minZoom = calculateMinZoom();
+                    var newScale = Math.min(RED.view.zoomConstants.MAX_ZOOM, 
+                                          Math.max(minZoom, scaleFactor + scaleDelta));
+                    
+                    // Session-based gesture tracking:
+                    // - If no active gesture OR gap > gestureEndThreshold, start new gesture
+                    // - If gap < wheelEventContinuityThreshold, continue current gesture
+                    // - If gap between continuity and end threshold, keep current gesture but don't update focal point
+                    
+                    if (!RED.view.zoomAnimator.isGestureActive() || timeSinceLastEvent > gestureEndThreshold) {
+                        // Start new gesture session - store focal point in workspace coordinates
+                        var scrollPos = [chart.scrollLeft(), chart.scrollTop()];
+                        RED.view.zoomAnimator.startGesture(cursorPos, scaleFactor, scrollPos, scaleFactor);
+                    } else if (timeSinceLastEvent <= wheelEventContinuityThreshold) {
+                        // Events are continuous - this is the same gesture, focal point remains locked
+                        // No need to update focal point
+                    }
+                    // For gaps between continuity and end threshold, keep existing gesture state
+                    
+                    // Update gesture with new scale, maintaining locked focal point
+                    RED.view.zoomAnimator.updateGesture(newScale);
+                    // Only call zoomView if scale is actually changing (not at limits)
+                    if (Math.abs(scaleFactor - newScale) >= 0.001) {
+                        // Get focal point converted back to current screen coordinates
+                        var currentScrollPos = [chart.scrollLeft(), chart.scrollTop()];
+                        var focalPoint = RED.view.zoomAnimator.getGestureFocalPoint(currentScrollPos, scaleFactor);
+                        zoomView(newScale, focalPoint); // Direct call, no animation
+                    }
+                    
+                    // Update last event time for continuity tracking
+                    lastWheelEventTime = currentTime;
+                    
+                    // Reset gesture timeout - end gesture when no more events come in for gestureEndThreshold
+                    if (trackpadGestureTimer) {
+                        clearTimeout(trackpadGestureTimer);
+                    }
+                    trackpadGestureTimer = setTimeout(function() {
+                        RED.view.zoomAnimator.endGesture();
+                        trackpadGestureTimer = null;
+                        // Store zoom level when gesture completes
+                        if (RED.settings.get("editor.view.view-store-zoom")) {
+                            RED.settings.setLocal('zoom-level', scaleFactor.toFixed(1));
+                        }
+                    }, gestureEndThreshold); // Use 500ms timeout for gesture end detection
+                } else {
+                    // Regular Alt+scroll or Space+scroll - use smooth zoom without animation
+                    // Detect input device: trackpad has small deltas, mouse wheel has large deltas
+                    var isTrackpadInput = Math.abs(delta) < 50;
+                    var scaleDelta = RED.view.zoomAnimator.calculateZoomDelta(scaleFactor, -delta, isTrackpadInput);
+                    var minZoom = calculateMinZoom();
+                    var newScale = Math.min(RED.view.zoomConstants.MAX_ZOOM,
+                                          Math.max(minZoom, scaleFactor + scaleDelta));
+
+                    // Use gesture tracking for stable focal point like trackpad pinch
+                    if (!RED.view.zoomAnimator.isGestureActive() || timeSinceLastEvent > gestureEndThreshold) {
+                        // Start new gesture session - store focal point in workspace coordinates
+                        var scrollPos = [chart.scrollLeft(), chart.scrollTop()];
+                        RED.view.zoomAnimator.startGesture(cursorPos, scaleFactor, scrollPos, scaleFactor);
+                    } else if (timeSinceLastEvent <= wheelEventContinuityThreshold) {
+                        // Events are continuous - same gesture, focal point remains locked
+                    }
+
+                    // Update gesture with new scale, maintaining locked focal point
+                    RED.view.zoomAnimator.updateGesture(newScale);
+
+                    // Only zoom if scale is actually changing
+                    if (Math.abs(scaleFactor - newScale) >= 0.001) {
+                        // Get focal point converted back to current screen coordinates
+                        var currentScrollPos = [chart.scrollLeft(), chart.scrollTop()];
+                        var focalPoint = RED.view.zoomAnimator.getGestureFocalPoint(currentScrollPos, scaleFactor);
+                        zoomView(newScale, focalPoint);
+                    }
+
+                    // Update last event time for continuity tracking
+                    lastWheelEventTime = currentTime;
+
+                    // Reset gesture timeout
+                    if (trackpadGestureTimer) {
+                        clearTimeout(trackpadGestureTimer);
+                    }
+                    trackpadGestureTimer = setTimeout(function() {
+                        RED.view.zoomAnimator.endGesture();
+                        trackpadGestureTimer = null;
+                        // Store zoom level when gesture completes
+                        if (RED.settings.get("editor.view.view-store-zoom")) {
+                            RED.settings.setLocal('zoom-level', scaleFactor.toFixed(1));
+                        }
+                    }, gestureEndThreshold);
+                }
+            } else {
+                // Regular scroll - prevent default and manually handle both axes
                 evt.preventDefault();
                 evt.stopPropagation();
-                var move = -(evt.originalEvent.detail) || evt.originalEvent.wheelDelta;
-                if (move <= 0) { zoomOut(); }
-                else { zoomIn(); }
+
+                // Apply scroll deltas directly to both axes
+                var deltaX = evt.originalEvent.deltaX;
+                var deltaY = evt.originalEvent.deltaY;
+
+                chart.scrollLeft(chart.scrollLeft() + deltaX);
+                chart.scrollTop(chart.scrollTop() + deltaY);
+
+                // Emit navigate event for minimap
+                RED.events.emit("view:navigate");
+
+                // Track velocity and apply momentum
+                handleScroll();
+
+                // Cancel previous momentum timer
+                if (momentumTimer) {
+                    clearTimeout(momentumTimer);
+                }
+
+                // Start momentum after scroll stops
+                momentumTimer = setTimeout(function() {
+                    if (Math.abs(scrollVelocity.x) > MIN_VELOCITY || Math.abs(scrollVelocity.y) > MIN_VELOCITY) {
+                        startMomentumScroll();
+                    }
+                }, 100);
             }
         });
 
@@ -23422,6 +23790,12 @@ RED.view = (function() {
         });
         chart.on("blur", function() {
             $("#red-ui-workspace-tabs").removeClass("red-ui-workspace-focussed");
+            // Reset spacebar state when chart loses focus to prevent stuck state
+            if (spacebarPressed) {
+                spacebarPressed = false;
+                // Revert cursor when chart loses focus
+                outer.style('cursor', '');
+            }
         });
 
         RED.actions.add("core:copy-selection-to-internal-clipboard",copySelection);
@@ -23486,6 +23860,7 @@ RED.view = (function() {
         RED.actions.add("core:zoom-in",zoomIn);
         RED.actions.add("core:zoom-out",zoomOut);
         RED.actions.add("core:zoom-reset",zoomZero);
+        RED.actions.add("core:zoom-fit",zoomToFitAll);
         RED.actions.add("core:enable-selected-nodes", function() { setSelectedNodeState(false)});
         RED.actions.add("core:disable-selected-nodes", function() { setSelectedNodeState(true)});
 
@@ -23601,6 +23976,9 @@ RED.view = (function() {
             RED.settings.setLocal('scroll-positions', JSON.stringify(workspaceScrollPositions) )
         }
         chart.on("scroll", function() {
+            // Track scroll velocity for momentum
+            handleScroll();
+
             if (RED.settings.get("editor.view.view-store-position")) {
                 if (onScrollTimer) {
                     clearTimeout(onScrollTimer)
@@ -23878,12 +24256,26 @@ RED.view = (function() {
             return;
         }
 
+        // Spacebar + left click for panning
+        if (spacebarPressed && d3.event.button === 0) {
+            d3.event.preventDefault();
+            d3.event.stopPropagation();
+            mouse_mode = RED.state.PANNING;
+            mouse_position = [d3.event.pageX,d3.event.pageY]
+            scroll_position = [chart.scrollLeft(),chart.scrollTop()];
+            // Change cursor to grabbing while actively panning
+            outer.style('cursor', 'grabbing');
+            return;
+        }
+
         if (d3.event.button === 1) {
             // Middle Click pan
             d3.event.preventDefault();
             mouse_mode = RED.state.PANNING;
             mouse_position = [d3.event.pageX,d3.event.pageY]
             scroll_position = [chart.scrollLeft(),chart.scrollTop()];
+            // Change cursor to grabbing while actively panning
+            outer.style('cursor', 'grabbing');
             return;
         }
         if (d3.event.button === 2) {
@@ -24415,6 +24807,30 @@ RED.view = (function() {
         redraw();
     }
 
+    function startPanning () {
+
+    }
+    window.addEventListener('mousemove', windowMouseMove)
+    window.addEventListener('touchmove', windowMouseMove)
+
+    function windowMouseMove (event) {
+        if (mouse_mode === RED.state.PANNING) {
+            let pos = [event.pageX, event.pageY]
+            if (event.touches) {
+                let touch0 = event.touches.item(0)
+                pos = [touch0.pageX, touch0.pageY]
+            }
+            const deltaPos = [
+                mouse_position[0]-pos[0],
+                mouse_position[1]-pos[1]
+            ]
+            chart.scrollLeft(scroll_position[0]+deltaPos[0])
+            chart.scrollTop(scroll_position[1]+deltaPos[1])
+            RED.events.emit("view:navigate");
+            return
+        }
+    }
+
     function canvasMouseMove() {
         var i;
         var node;
@@ -24429,18 +24845,8 @@ RED.view = (function() {
         //console.log(d3.mouse(this),container.offsetWidth,container.offsetHeight,container.scrollLeft,container.scrollTop);
 
         if (mouse_mode === RED.state.PANNING) {
-            var pos = [d3.event.pageX,d3.event.pageY];
-            if (d3.event.touches) {
-                var touch0 = d3.event.touches.item(0);
-                pos = [touch0.pageX, touch0.pageY];
-            }
-            var deltaPos = [
-                mouse_position[0]-pos[0],
-                mouse_position[1]-pos[1]
-            ];
-
-            chart.scrollLeft(scroll_position[0]+deltaPos[0])
-            chart.scrollTop(scroll_position[1]+deltaPos[1])
+            // A window-level handler is used for panning so the mouse can leave the confines of the chart
+            // but continue panning
             return
         }
 
@@ -24784,6 +25190,12 @@ RED.view = (function() {
         }
         if (mouse_mode === RED.state.PANNING) {
             resetMouseVars();
+            // Revert to grab cursor if spacebar still held, otherwise clear cursor
+            if (spacebarPressed) {
+                outer.style('cursor', 'grab');
+            } else {
+                outer.style('cursor', '');
+            }
             return
         }
         if (mouse_mode === RED.state.SELECTING_NODE) {
@@ -25115,39 +25527,454 @@ RED.view = (function() {
 
     }
 
-    function zoomIn() {
-        if (scaleFactor < 2) {
-            zoomView(scaleFactor+0.1);
+    function calculateMinZoom() {
+        // Calculate the minimum zoom to ensure canvas always fills the viewport (no empty space)
+        var viewportWidth = chart.width();
+        var viewportHeight = chart.height();
+
+        // Canvas is 8000x8000, calculate zoom to cover viewport
+        var zoomToFitWidth = viewportWidth / space_width;
+        var zoomToFitHeight = viewportHeight / space_height;
+
+        // Use the LARGER zoom to ensure canvas covers entire viewport (no empty space visible)
+        var calculatedMinZoom = Math.max(zoomToFitWidth, zoomToFitHeight);
+
+        // Return the larger of the calculated min or the configured min
+        // This ensures canvas always fills the viewport
+        return Math.max(calculatedMinZoom, RED.view.zoomConstants.MIN_ZOOM);
+    }
+    
+    // Track focal point for sequential button/hotkey zoom operations
+    // Store in workspace coordinates so it remains valid after viewport shifts
+    var buttonZoomWorkspaceCenter = null;
+    var buttonZoomTimeout = null;
+    var BUTTON_ZOOM_FOCAL_TIMEOUT = 1000; // ms - time to keep same focal point
+
+    function zoomIn(focalPoint) {
+        if (scaleFactor < RED.view.zoomConstants.MAX_ZOOM) {
+            var useFocalPoint = null;
+
+            // If focalPoint is explicitly provided (e.g., from wheel/pinch), use it directly
+            if (focalPoint) {
+                useFocalPoint = focalPoint;
+            } else {
+                // For button/hotkey zoom, maintain the same workspace center across sequential zooms
+                if (!buttonZoomWorkspaceCenter) {
+                    // First button zoom - calculate and store workspace center
+                    var screenSize = [chart.width(), chart.height()];
+                    var scrollPos = [chart.scrollLeft(), chart.scrollTop()];
+                    // Convert viewport center to workspace coordinates
+                    buttonZoomWorkspaceCenter = [
+                        (scrollPos[0] + screenSize[0]/2) / scaleFactor,
+                        (scrollPos[1] + screenSize[1]/2) / scaleFactor
+                    ];
+                }
+
+                // ALWAYS use viewport center as focal point (fixed screen position)
+                // The stored workspace center will be kept at this screen position
+                var screenSize = [chart.width(), chart.height()];
+                useFocalPoint = [screenSize[0]/2, screenSize[1]/2];
+
+                // Reset timeout
+                clearTimeout(buttonZoomTimeout);
+                buttonZoomTimeout = setTimeout(function() {
+                    buttonZoomWorkspaceCenter = null;
+                }, BUTTON_ZOOM_FOCAL_TIMEOUT);
+            }
+
+            animatedZoomView(scaleFactor + RED.view.zoomConstants.ZOOM_STEP, useFocalPoint, buttonZoomWorkspaceCenter);
+        }
+    }
+    function zoomOut(focalPoint) {
+        var minZoom = calculateMinZoom();
+        if (scaleFactor > minZoom) {
+            var useFocalPoint = null;
+
+            if (focalPoint) {
+                useFocalPoint = focalPoint;
+            } else {
+                if (!buttonZoomWorkspaceCenter) {
+                    var screenSize = [chart.width(), chart.height()];
+                    var scrollPos = [chart.scrollLeft(), chart.scrollTop()];
+                    buttonZoomWorkspaceCenter = [
+                        (scrollPos[0] + screenSize[0]/2) / scaleFactor,
+                        (scrollPos[1] + screenSize[1]/2) / scaleFactor
+                    ];
+                }
+
+                // ALWAYS use viewport center as focal point (fixed screen position)
+                var screenSize = [chart.width(), chart.height()];
+                useFocalPoint = [screenSize[0]/2, screenSize[1]/2];
+
+                clearTimeout(buttonZoomTimeout);
+                buttonZoomTimeout = setTimeout(function() {
+                    buttonZoomWorkspaceCenter = null;
+                }, BUTTON_ZOOM_FOCAL_TIMEOUT);
+            }
+
+            animatedZoomView(Math.max(scaleFactor - RED.view.zoomConstants.ZOOM_STEP, minZoom), useFocalPoint, buttonZoomWorkspaceCenter);
         }
     }
-    function zoomOut() {
-        if (scaleFactor > 0.3) {
-            zoomView(scaleFactor-0.1);
+    function zoomZero() {
+        // Reset button zoom focal point for zoom reset
+        clearTimeout(buttonZoomTimeout);
+        buttonZoomWorkspaceCenter = null;
+        animatedZoomView(1);
+    }
+
+    function zoomToFitAll() {
+        // Refresh active nodes to ensure we have the latest
+        updateActiveNodes();
+
+        // Get all nodes in active workspace
+        if (!activeNodes || activeNodes.length === 0) {
+            return; // No nodes to fit
+        }
+
+        // Calculate bounding box of all nodes
+        var minX = Infinity, minY = Infinity;
+        var maxX = -Infinity, maxY = -Infinity;
+
+        activeNodes.forEach(function(node) {
+            var nodeLeft = node.x - node.w / 2;
+            var nodeRight = node.x + node.w / 2;
+            var nodeTop = node.y - node.h / 2;
+            var nodeBottom = node.y + node.h / 2;
+
+            minX = Math.min(minX, nodeLeft);
+            maxX = Math.max(maxX, nodeRight);
+            minY = Math.min(minY, nodeTop);
+            maxY = Math.max(maxY, nodeBottom);
+        });
+
+        // Add padding around nodes for visual breathing room
+        var padding = 80;
+        minX -= padding;
+        minY -= padding;
+        maxX += padding;
+        maxY += padding;
+
+        // Calculate dimensions of bounding box
+        var boundingWidth = maxX - minX;
+        var boundingHeight = maxY - minY;
+
+        // Get viewport dimensions
+        var viewportWidth = chart.width();
+        var viewportHeight = chart.height();
+
+        // Calculate zoom level that fits bounding box in viewport
+        var zoomX = viewportWidth / boundingWidth;
+        var zoomY = viewportHeight / boundingHeight;
+        var targetZoom = Math.min(zoomX, zoomY);
+
+        // Respect minimum and maximum zoom limits
+        var minZoom = calculateMinZoom();
+        targetZoom = Math.max(minZoom, Math.min(RED.view.zoomConstants.MAX_ZOOM, targetZoom));
+
+        // Calculate center point of bounding box in workspace coordinates
+        var centerX = (minX + maxX) / 2;
+        var centerY = (minY + maxY) / 2;
+
+        // Reset button zoom focal point for zoom-to-fit
+        clearTimeout(buttonZoomTimeout);
+        buttonZoomWorkspaceCenter = null;
+
+        // Pass the bounding box center as workspace center
+        // This ensures the nodes are centered in viewport after zoom
+        var focalPoint = [viewportWidth / 2, viewportHeight / 2];
+
+        // If zoom level won't change significantly, animate just the pan
+        if (Math.abs(scaleFactor - targetZoom) < 0.01) {
+            var targetScrollLeft = centerX * scaleFactor - viewportWidth / 2;
+            var targetScrollTop = centerY * scaleFactor - viewportHeight / 2;
+
+            // Calculate pan distance to determine duration (match zoom animation logic)
+            var startScrollLeft = chart.scrollLeft();
+            var startScrollTop = chart.scrollTop();
+            var panDistance = Math.sqrt(
+                Math.pow(targetScrollLeft - startScrollLeft, 2) +
+                Math.pow(targetScrollTop - startScrollTop, 2)
+            );
+
+            // Use similar duration calculation as zoom: scale with distance
+            // Normalize by viewport diagonal for consistent feel
+            var viewportDiagonal = Math.sqrt(viewportWidth * viewportWidth + viewportHeight * viewportHeight);
+            var relativeDistance = panDistance / viewportDiagonal;
+            // Duration scales with distance, matching zoom animation feel
+            var duration = Math.max(200, Math.min(350, relativeDistance * RED.view.zoomConstants.DEFAULT_ZOOM_DURATION * 4));
+
+            RED.view.zoomAnimator.easeToValuesRAF({
+                fromValues: {
+                    scrollLeft: startScrollLeft,
+                    scrollTop: startScrollTop
+                },
+                toValues: {
+                    scrollLeft: targetScrollLeft,
+                    scrollTop: targetScrollTop
+                },
+                duration: duration,
+                onStep: function(values) {
+                    chart.scrollLeft(values.scrollLeft);
+                    chart.scrollTop(values.scrollTop);
+                },
+                onStart: function() {
+                    RED.events.emit("view:navigate");
+                }
+            });
+        } else {
+            animatedZoomView(targetZoom, focalPoint, [centerX, centerY]);
         }
     }
-    function zoomZero() { zoomView(1); }
+
     function searchFlows() { RED.actions.invoke("core:search", $(this).data("term")); }
     function searchPrev() { RED.actions.invoke("core:search-previous"); }
     function searchNext() { RED.actions.invoke("core:search-next"); }
 
 
-    function zoomView(factor) {
+    function zoomView(factor, focalPoint) {
+        // Early return if scale factor isn't actually changing
+        // This prevents focal point shifts when at zoom limits
+        if (Math.abs(scaleFactor - factor) < 0.001) {
+            return;
+        }
+        // Make scale 1 'sticky'
+        if (Math.abs(1.0 - factor) < 0.02) {
+            factor = 1
+        }
+
+        console.log(factor)
         var screenSize = [chart.width(),chart.height()];
         var scrollPos = [chart.scrollLeft(),chart.scrollTop()];
-        var center = [(scrollPos[0] + screenSize[0]/2)/scaleFactor,(scrollPos[1] + screenSize[1]/2)/scaleFactor];
+        var oldScaleFactor = scaleFactor;
+
+        // Calculate workspace coordinates of the point that should remain fixed
+        var center;
+        if (focalPoint) {
+            // focalPoint is in screen coordinates, convert to workspace coordinates
+            center = [(scrollPos[0] + focalPoint[0])/oldScaleFactor, (scrollPos[1] + focalPoint[1])/oldScaleFactor];
+        } else {
+            // Default to viewport center in workspace coordinates
+            center = [(scrollPos[0] + screenSize[0]/2)/oldScaleFactor, (scrollPos[1] + screenSize[1]/2)/oldScaleFactor];
+        }
+
         scaleFactor = factor;
-        var newCenter = [(scrollPos[0] + screenSize[0]/2)/scaleFactor,(scrollPos[1] + screenSize[1]/2)/scaleFactor];
-        var delta = [(newCenter[0]-center[0])*scaleFactor,(newCenter[1]-center[1])*scaleFactor]
-        chart.scrollLeft(scrollPos[0]-delta[0]);
-        chart.scrollTop(scrollPos[1]-delta[1]);
+
+        // Calculate new scroll position to keep the center point at the same screen position
+        if (focalPoint) {
+            // Keep the focal point at the same screen position
+            chart.scrollLeft(center[0] * scaleFactor - focalPoint[0]);
+            chart.scrollTop(center[1] * scaleFactor - focalPoint[1]);
+        } else {
+            // Keep viewport center on the same workspace coordinates
+            var newScrollLeft = center[0] * scaleFactor - screenSize[0]/2;
+            var newScrollTop = center[1] * scaleFactor - screenSize[1]/2;
+            chart.scrollLeft(newScrollLeft);
+            chart.scrollTop(newScrollTop);
+        }
 
         RED.view.navigator.resize();
         redraw();
+        RED.events.emit("view:navigate");
         if (RED.settings.get("editor.view.view-store-zoom")) {
             RED.settings.setLocal('zoom-level', factor.toFixed(1))
         }
     }
 
+    function animatedZoomView(targetFactor, focalPoint, workspaceCenter) {
+        // Cancel any in-progress animation
+        if (cancelInProgressAnimation) {
+            cancelInProgressAnimation();
+            cancelInProgressAnimation = null;
+        }
+
+        // Calculate the actual minimum zoom to fit canvas
+        var minZoom = calculateMinZoom();
+        
+        // Clamp target factor to valid range
+        targetFactor = Math.max(minZoom, 
+                                Math.min(RED.view.zoomConstants.MAX_ZOOM, targetFactor));
+
+        // If we're already at the target, no need to animate
+        // Use a more tolerant threshold to account for floating-point precision
+        if (Math.abs(scaleFactor - targetFactor) < 0.01) {
+            return;
+        }
+        // Make scale 1 'sticky'
+        if (Math.abs(1.0 - targetFactor) < 0.02) {
+            targetFactor = 1
+        }
+
+
+        var startFactor = scaleFactor;
+        var screenSize = [chart.width(), chart.height()];
+        var scrollPos = [chart.scrollLeft(), chart.scrollTop()];
+
+        // Calculate the focal point in workspace coordinates (will remain constant)
+        var center;
+        if (workspaceCenter) {
+            // Use the provided workspace center directly (for button zoom focal point locking)
+            center = workspaceCenter;
+        } else if (focalPoint) {
+            // focalPoint is in screen coordinates, convert to workspace coordinates
+            center = [(scrollPos[0] + focalPoint[0])/scaleFactor, (scrollPos[1] + focalPoint[1])/scaleFactor];
+        } else {
+            // Default to viewport center
+            center = [(scrollPos[0] + screenSize[0]/2)/scaleFactor, (scrollPos[1] + screenSize[1]/2)/scaleFactor];
+        }
+
+        // Calculate duration based on relative zoom change to maintain consistent velocity
+        // Use logarithmic scaling since zoom feels exponential to the user
+        var zoomRatio = targetFactor / startFactor;
+        var logChange = Math.abs(Math.log(zoomRatio));
+        // Scale duration more aggressively: multiply by 2 for stronger effect
+        // At extreme zoom levels, animation will be noticeably longer
+        var duration = Math.max(200, Math.min(350, logChange / 0.693 * RED.view.zoomConstants.DEFAULT_ZOOM_DURATION * 2));
+
+        // Start the animation
+        cancelInProgressAnimation = RED.view.zoomAnimator.easeToValuesRAF({
+            fromValues: {
+                zoom: startFactor
+            },
+            toValues: {
+                zoom: targetFactor
+            },
+            duration: duration,
+            interpolateValue: true, // Use exponential interpolation for zoom
+            onStep: function(values) {
+                var currentFactor = values.zoom;
+                scaleFactor = currentFactor;
+
+                // Calculate new scroll position to maintain focal point
+                var currentScreenSize = [chart.width(), chart.height()];
+                var newScrollPos;
+                
+                if (focalPoint) {
+                    // Keep the focal point at the same screen position
+                    newScrollPos = [
+                        center[0] * scaleFactor - focalPoint[0],
+                        center[1] * scaleFactor - focalPoint[1]
+                    ];
+                } else {
+                    // Keep viewport center steady
+                    newScrollPos = [
+                        center[0] * scaleFactor - currentScreenSize[0]/2,
+                        center[1] * scaleFactor - currentScreenSize[1]/2
+                    ];
+                }
+
+                chart.scrollLeft(newScrollPos[0]);
+                chart.scrollTop(newScrollPos[1]);
+
+                // During animation, only update the scale transform, not the full redraw
+                // This is much more performant with many nodes
+                eventLayer.attr("transform", "scale(" + scaleFactor + ")");
+                outer.attr("width", space_width * scaleFactor).attr("height", space_height * scaleFactor);
+                RED.view.navigator.resize();
+            },
+            onStart: function() {
+                // Show minimap when zoom animation starts
+                RED.events.emit("view:navigate");
+            },
+            onEnd: function() {
+                cancelInProgressAnimation = null;
+                // Ensure scaleFactor is exactly the target to prevent precision issues
+                scaleFactor = targetFactor;
+                // Full redraw at the end to ensure everything is correct
+                redraw();
+                if (RED.settings.get("editor.view.view-store-zoom")) {
+                    RED.settings.setLocal('zoom-level', targetFactor.toFixed(1));
+                }
+            },
+            onCancel: function() {
+                cancelInProgressAnimation = null;
+                // Ensure scaleFactor is set to current target on cancel
+                scaleFactor = targetFactor;
+            }
+        });
+    }
+
+    // Momentum scrolling functions
+    function startMomentumScroll() {
+        if (scrollAnimationId) {
+            cancelAnimationFrame(scrollAnimationId);
+        }
+        momentumActive = true;
+        animateMomentumScroll();
+    }
+
+    function animateMomentumScroll() {
+        if (!momentumActive) {
+            return;
+        }
+
+        var scrollX = chart.scrollLeft();
+        var scrollY = chart.scrollTop();
+        var maxScrollX = chart[0].scrollWidth - chart.width();
+        var maxScrollY = chart[0].scrollHeight - chart.height();
+
+        // Apply friction
+        scrollVelocity.x *= FRICTION;
+        scrollVelocity.y *= FRICTION;
+
+        // Check for edges and apply bounce
+        var newScrollX = scrollX + scrollVelocity.x;
+        var newScrollY = scrollY + scrollVelocity.y;
+
+        // Bounce effect at edges
+        if (newScrollX < 0) {
+            newScrollX = 0;
+            scrollVelocity.x = -scrollVelocity.x * BOUNCE_DAMPING;
+        } else if (newScrollX > maxScrollX) {
+            newScrollX = maxScrollX;
+            scrollVelocity.x = -scrollVelocity.x * BOUNCE_DAMPING;
+        }
+
+        if (newScrollY < 0) {
+            newScrollY = 0;
+            scrollVelocity.y = -scrollVelocity.y * BOUNCE_DAMPING;
+        } else if (newScrollY > maxScrollY) {
+            newScrollY = maxScrollY;
+            scrollVelocity.y = -scrollVelocity.y * BOUNCE_DAMPING;
+        }
+
+        // Apply new scroll position
+        chart.scrollLeft(newScrollX);
+        chart.scrollTop(newScrollY);
+
+        // Stop if velocity is too small
+        if (Math.abs(scrollVelocity.x) < MIN_VELOCITY && Math.abs(scrollVelocity.y) < MIN_VELOCITY) {
+            momentumActive = false;
+            scrollVelocity.x = 0;
+            scrollVelocity.y = 0;
+        } else {
+            scrollAnimationId = requestAnimationFrame(animateMomentumScroll);
+        }
+    }
+
+    function handleScroll() {
+        var now = Date.now();
+        var scrollX = chart.scrollLeft();
+        var scrollY = chart.scrollTop();
+
+        if (lastScrollTime) {
+            var dt = now - lastScrollTime;
+            if (dt > 0 && dt < 100) { // Only calculate velocity for recent scrolls
+                scrollVelocity.x = (scrollX - lastScrollPos.x) / dt * 16; // Normalize to 60fps
+                scrollVelocity.y = (scrollY - lastScrollPos.y) / dt * 16;
+            }
+        }
+
+        lastScrollTime = now;
+        lastScrollPos.x = scrollX;
+        lastScrollPos.y = scrollY;
+
+        // Cancel any ongoing momentum animation
+        if (scrollAnimationId) {
+            cancelAnimationFrame(scrollAnimationId);
+            scrollAnimationId = null;
+        }
+    }
+
     function selectNone() {
         if (mouse_mode === RED.state.MOVING || mouse_mode === RED.state.MOVING_ACTIVE) {
             return;
@@ -25852,6 +26679,10 @@ RED.view = (function() {
 
     function portMouseDown(d,portType,portIndex, evt) {
         if (RED.view.DEBUG) { console.warn("portMouseDown", mouse_mode,d,portType,portIndex); }
+        if (spacebarPressed) {
+            return
+        }
+        clearSuggestedFlow();
         RED.contextMenu.hide();
         evt = evt || d3.event;
         if (evt === 1) {
@@ -26275,11 +27106,14 @@ RED.view = (function() {
         return tooltip;
     }
 
-    function portMouseOver(port,d,portType,portIndex) {
+    function portMouseOver(port,d,portType,portIndex, event) {
         if (mouse_mode === RED.state.SELECTING_NODE) {
-            d3.event.stopPropagation();
+            (d3.event || event).stopPropagation();
             return;
         }
+        if (spacebarPressed) {
+            return
+        }
         clearTimeout(portLabelHoverTimeout);
         var active = (mouse_mode!=RED.state.JOINING && mouse_mode != RED.state.QUICK_JOINING) || // Not currently joining - all ports active
                      (
@@ -26316,9 +27150,9 @@ RED.view = (function() {
         }
         port.classed("red-ui-flow-port-hovered",active);
     }
-    function portMouseOut(port,d,portType,portIndex) {
+    function portMouseOut(port,d,portType,portIndex, event) {
         if (mouse_mode === RED.state.SELECTING_NODE) {
-            d3.event.stopPropagation();
+            (d3.event || event).stopPropagation();
             return;
         }
         clearTimeout(portLabelHoverTimeout);
@@ -26436,6 +27270,10 @@ RED.view = (function() {
     }
     function nodeMouseDown(d) {
         if (RED.view.DEBUG) { console.warn("nodeMouseDown", mouse_mode,d); }
+        if (spacebarPressed) {
+            return
+        }
+        clearSuggestedFlow()
         focusView();
         RED.contextMenu.hide();
         if (d3.event.button === 1) {
@@ -26613,6 +27451,9 @@ RED.view = (function() {
 
     function nodeMouseOver(d) {
         if (RED.view.DEBUG) { console.warn("nodeMouseOver", mouse_mode,d); }
+        if (spacebarPressed) {
+            return
+        }
         if (mouse_mode === 0 || mouse_mode === RED.state.SELECTING_NODE) {
             if (mouse_mode === RED.state.SELECTING_NODE && selectNodesOptions && selectNodesOptions.filter) {
                 if (selectNodesOptions.filter(d)) {
@@ -26786,6 +27627,9 @@ RED.view = (function() {
         if (RED.view.DEBUG) {
             console.warn("groupMouseDown", { mouse_mode, point: mouse, event: d3.event });
         }
+        if (spacebarPressed) {
+            return
+        }
         RED.contextMenu.hide();
         focusView();
         if (d3.event.button === 1) {
@@ -27061,130 +27905,220 @@ RED.view = (function() {
         }
     }
 
+    function buildSubflowPort (d) {
+        const NODE_TYPE = d.direction === "in" ? PORT_TYPE_INPUT : PORT_TYPE_OUTPUT;
+        // PORT_TYPE is the 'opposite' of NODE_TYPE
+        const PORT_TYPE = NODE_TYPE === PORT_TYPE_INPUT ? PORT_TYPE_OUTPUT : PORT_TYPE_INPUT;
+        var node = d3.select(this);
+        var nodeContents = document.createDocumentFragment();
+
+        d.h = 40;
+        d.resize = true;
+        d.dirty = true;
+
+        var mainRect = document.createElementNS("http://www.w3.org/2000/svg","rect");
+        mainRect.__data__ = d;
+        mainRect.setAttribute("class", "red-ui-flow-subflow-port");
+        mainRect.setAttribute("rx", 8);
+        mainRect.setAttribute("ry", 8);
+        mainRect.setAttribute("width", 40);
+        mainRect.setAttribute("height", 40);
+        node[0][0].__mainRect__ = mainRect;
+        d3.select(mainRect)
+            .on("mouseup",nodeMouseUp)
+            .on("mousedown",nodeMouseDown)
+            .on("touchstart",nodeTouchStart)
+            .on("touchend",nodeTouchEnd)
+        nodeContents.appendChild(mainRect);
+
+        const port_label_group = document.createElementNS("http://www.w3.org/2000/svg","g");
+        port_label_group.setAttribute("x",0);
+        port_label_group.setAttribute("y",0);
+        node[0][0].__portLabelGroup__ = port_label_group;
+
+        const port_label = document.createElementNS("http://www.w3.org/2000/svg","text");
+        port_label.setAttribute("class","red-ui-flow-port-label");
+        port_label.style["font-size"] = "10px";
+        port_label.textContent = NODE_TYPE === PORT_TYPE_INPUT? "input" : "output";
+        port_label_group.appendChild(port_label);
+        node[0][0].__portLabel__ = port_label;
+
+        if (NODE_TYPE === PORT_TYPE_OUTPUT) {
+            const port_number = document.createElementNS("http://www.w3.org/2000/svg","text");
+            port_number.setAttribute("class","red-ui-flow-port-label red-ui-flow-port-index");
+            port_number.setAttribute("x",0);
+            port_number.setAttribute("y",0);
+            port_number.textContent = d.i+1;
+            port_label_group.appendChild(port_number);
+            node[0][0].__portNumber__ = port_number;
+        }
+
+        const port_border = document.createElementNS("http://www.w3.org/2000/svg","path");
+        port_border.setAttribute("d","M 40 1 l 0 38")
+        port_border.setAttribute("class", "red-ui-flow-node-icon-shade-border")
+        port_label_group.appendChild(port_border);
+        node[0][0].__portBorder__ = port_border;
+
+        nodeContents.appendChild(port_label_group);
+
+        var text = document.createElementNS("http://www.w3.org/2000/svg","g");
+        text.setAttribute("class","red-ui-flow-port-label");
+        text.setAttribute("transform","translate(38,0)");
+        text.setAttribute('style', 'fill : #888');  // hard coded here!
+        node[0][0].__textGroup__ = text;
+        nodeContents.append(text);
+
+        var portEl = document.createElementNS("http://www.w3.org/2000/svg","g");
+        portEl.setAttribute('transform','translate(-5,15)')
+
+        var port = document.createElementNS("http://www.w3.org/2000/svg","rect");
+        port.setAttribute("class","red-ui-flow-port");
+        port.setAttribute("rx",3);
+        port.setAttribute("ry",3);
+        port.setAttribute("width",10);
+        port.setAttribute("height",10);
+        portEl.appendChild(port);
+        port.__data__ = d;
+
+        d3.select(port)
+            .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE,0);} )
+            .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE,0);d3.event.preventDefault();} )
+            .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE,0);})
+            .on("touchend",function(d,i){portMouseUp(d,PORT_TYPE,0);d3.event.preventDefault();} )
+            .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE,0);})
+            .on("mouseout",function(d){portMouseOut(d3.select(this),d,PORT_TYPE,0);});
+
+        node[0][0].__port__ = portEl
+        nodeContents.appendChild(portEl);
+        node[0][0].appendChild(nodeContents);
+    }
+    function updateSubflowPort (d) {
+        if (d.dirty) {
+            const port_height = 40;
+            const NODE_TYPE = d.direction === "in" ? PORT_TYPE_INPUT : PORT_TYPE_OUTPUT;
+            // PORT_TYPE is the 'opposite' of NODE_TYPE
+            const PORT_TYPE = NODE_TYPE === PORT_TYPE_INPUT ? PORT_TYPE_OUTPUT : PORT_TYPE_INPUT;
+
+            var label = getPortLabel(activeSubflow, NODE_TYPE, d.i) || "";
+            var hideLabel = (label.length < 1)
+            var labelParts;
+            if (d.resize || this.__hideLabel__ !== hideLabel || this.__label__ !== label) {
+                labelParts = getLabelParts(label, "red-ui-flow-node-label");
+                if (labelParts.lines.length !== this.__labelLineCount__ || this.__label__ !== label) {
+                    d.resize = true;
+                }
+                this.__label__ = label;
+                this.__labelLineCount__ = labelParts.lines.length;
+
+                if (hideLabel) {
+                    d.h = Math.max(port_height,(d.outputs || 0) * 15);
+                } else {
+                    d.h = Math.max(6+24*labelParts.lines.length,(d.outputs || 0) * 15, port_height);
+                }
+                this.__hideLabel__ = hideLabel;
+            }
+
+            if (d.resize) {
+                var ow = d.w;
+                if (hideLabel) {
+                    d.w = port_height;
+                } else {
+                    d.w = Math.max(port_height,20*(Math.ceil((labelParts.width+50+7)/20)) );
+                }
+                if (ow !== undefined) {
+                    d.x += (d.w-ow)/2;
+                }
+                d.resize = false;
+            }
+
+            this.setAttribute("transform", "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")");
+            // This might be the first redraw after a node has been click-dragged to start a move.
+            // So its selected state might have changed since the last redraw.
+            this.classList.toggle("red-ui-flow-node-selected", !!d.selected )
+            if (mouse_mode != RED.state.MOVING_ACTIVE) {
+                this.classList.toggle("red-ui-flow-node-disabled", d.d === true);
+                this.__mainRect__.setAttribute("width", d.w)
+                this.__mainRect__.setAttribute("height", d.h)
+                this.__mainRect__.classList.toggle("red-ui-flow-node-highlighted",!!d.highlighted );
+
+                if (labelParts) {
+                    // The label has changed
+                    var sa = labelParts.lines;
+                    var sn = labelParts.lines.length;
+                    var textLines = this.__textGroup__.childNodes;
+                    while(textLines.length > sn) {
+                        textLines[textLines.length-1].remove();
+                    }
+                    for (var i=0; i<sn; i++) {
+                        if (i===textLines.length) {
+                            var line = document.createElementNS("http://www.w3.org/2000/svg","text");
+                            line.setAttribute("class","red-ui-flow-node-label-text");
+                            line.setAttribute("x",0);
+                            line.setAttribute("y",i*24);
+                            this.__textGroup__.appendChild(line);
+                        }
+                        textLines[i].textContent = sa[i];
+                    }
+                }
+
+                var textClass = "red-ui-flow-node-label"+(hideLabel?" hide":"");
+                this.__textGroup__.setAttribute("class", textClass);
+                var yp = d.h / 2 - (this.__labelLineCount__ / 2) * 24 + 13;
+
+                // this.__textGroup__.classList.remove("red-ui-flow-node-label-right");
+                this.__textGroup__.setAttribute("transform", "translate(48,"+yp+")");
+
+                this.__portBorder__.setAttribute("d","M 40 1 l 0 "+(hideLabel?0:(d.h - 2)));
+                const portX = PORT_TYPE === PORT_TYPE_OUTPUT ? d.w - 5 : -5
+                this.__port__.setAttribute("transform","translate("+portX+","+((d.h/2)-5)+")");
+                if (NODE_TYPE === PORT_TYPE_OUTPUT) {
+                    this.__portLabel__.setAttribute("transform","translate(20,"+((d.h/2)-8)+")");
+                    this.__portNumber__.setAttribute("transform","translate(20,"+((d.h/2)+7)+")");
+                    this.__portNumber__.textContent = d.i+1;
+                } else {
+                    this.__portLabel__.setAttribute("transform","translate(20,"+(d.h/2)+")");
+                }
+            }
+            d.dirty = false;
+            return true
+        }
+        return false
+    }
+
     function _redraw() {
         eventLayer.attr("transform","scale("+scaleFactor+")");
         outer.attr("width", space_width*scaleFactor).attr("height", space_height*scaleFactor);
 
-        // Don't bother redrawing nodes if we're drawing links
-        if (showAllLinkPorts !== -1 || mouse_mode != RED.state.JOINING) {
+        // Update scroll spacer to match scaled canvas size
+        // This ensures scrollable area = canvas area
+        // Browser calculates maxScroll = scrollWidth - viewport, which correctly
+        // allows scrolling to see the far edges of canvas without going beyond
+        $('#red-ui-workspace-scroll-spacer').css({
+            width: (space_width * scaleFactor) + 'px',
+            height: (space_height * scaleFactor) + 'px'
+        });
 
+        // Don't bother redrawing nodes if we're drawing links
+        if (forceFullRedraw || showAllLinkPorts !== -1 || mouse_mode != RED.state.JOINING) {
+            forceFullRedraw = false
             var dirtyNodes = {};
 
             if (activeSubflow) {
                 var subflowOutputs = nodeLayer.selectAll(".red-ui-flow-subflow-port-output").data(activeSubflow.out,function(d,i){ return d.id;});
                 subflowOutputs.exit().remove();
                 var outGroup = subflowOutputs.enter().insert("svg:g").attr("class","red-ui-flow-node red-ui-flow-subflow-port-output")
-                outGroup.each(function(d,i) {
-                    var node = d3.select(this);
-                    var nodeContents = document.createDocumentFragment();
-
-                    d.h = 40;
-                    d.resize = true;
-                    d.dirty = true;
-
-                    var mainRect = document.createElementNS("http://www.w3.org/2000/svg","rect");
-                    mainRect.__data__ = d;
-                    mainRect.setAttribute("class", "red-ui-flow-subflow-port");
-                    mainRect.setAttribute("rx", 8);
-                    mainRect.setAttribute("ry", 8);
-                    mainRect.setAttribute("width", 40);
-                    mainRect.setAttribute("height", 40);
-                    node[0][0].__mainRect__ = mainRect;
-                    d3.select(mainRect)
-                        .on("mouseup",nodeMouseUp)
-                        .on("mousedown",nodeMouseDown)
-                        .on("touchstart",nodeTouchStart)
-                        .on("touchend",nodeTouchEnd)
-                    nodeContents.appendChild(mainRect);
-
-                    var output_groupEl = document.createElementNS("http://www.w3.org/2000/svg","g");
-                    output_groupEl.setAttribute("x",0);
-                    output_groupEl.setAttribute("y",0);
-                    node[0][0].__outputLabelGroup__ = output_groupEl;
-
-                    var output_output = document.createElementNS("http://www.w3.org/2000/svg","text");
-                    output_output.setAttribute("class","red-ui-flow-port-label");
-                    output_output.style["font-size"] = "10px";
-                    output_output.textContent = "output";
-                    output_groupEl.appendChild(output_output);
-                    node[0][0].__outputOutput__ = output_output;
-
-                    var output_number = document.createElementNS("http://www.w3.org/2000/svg","text");
-                    output_number.setAttribute("class","red-ui-flow-port-label red-ui-flow-port-index");
-                    output_number.setAttribute("x",0);
-                    output_number.setAttribute("y",0);
-                    output_number.textContent = d.i+1;
-                    output_groupEl.appendChild(output_number);
-                    node[0][0].__outputNumber__ = output_number;
-
-                    var output_border = document.createElementNS("http://www.w3.org/2000/svg","path");
-                    output_border.setAttribute("d","M 40 1 l 0 38")
-                    output_border.setAttribute("class", "red-ui-flow-node-icon-shade-border")
-                    output_groupEl.appendChild(output_border);
-                    node[0][0].__outputBorder__ = output_border;
-
-                    nodeContents.appendChild(output_groupEl);
-
-                    var text = document.createElementNS("http://www.w3.org/2000/svg","g");
-                    text.setAttribute("class","red-ui-flow-port-label");
-                    text.setAttribute("transform","translate(38,0)");
-                    text.setAttribute('style', 'fill : #888');  // hard coded here!
-                    node[0][0].__textGroup__ = text;
-                    nodeContents.append(text);
-
-                    var portEl = document.createElementNS("http://www.w3.org/2000/svg","g");
-                    portEl.setAttribute('transform','translate(-5,15)')
-
-                    var port = document.createElementNS("http://www.w3.org/2000/svg","rect");
-                    port.setAttribute("class","red-ui-flow-port");
-                    port.setAttribute("rx",3);
-                    port.setAttribute("ry",3);
-                    port.setAttribute("width",10);
-                    port.setAttribute("height",10);
-                    portEl.appendChild(port);
-                    port.__data__ = d;
-
-                    d3.select(port)
-                        .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
-                        .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} )
-                        .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);})
-                        .on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} )
-                        .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);})
-                        .on("mouseout",function(d){portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);});
-
-                    node[0][0].__port__ = portEl
-                    nodeContents.appendChild(portEl);
-                    node[0][0].appendChild(nodeContents);
-                });
+                outGroup.each(buildSubflowPort);
 
                 var subflowInputs = nodeLayer.selectAll(".red-ui-flow-subflow-port-input").data(activeSubflow.in,function(d,i){ return d.id;});
                 subflowInputs.exit().remove();
                 var inGroup = subflowInputs.enter().insert("svg:g").attr("class","red-ui-flow-node red-ui-flow-subflow-port-input").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"});
-                inGroup.each(function(d,i) {
-                    d.w=40;
-                    d.h=40;
-                });
-                inGroup.append("rect").attr("class","red-ui-flow-subflow-port").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40)
-                    // TODO: This is exactly the same set of handlers used for regular nodes - DRY
-                    .on("mouseup",nodeMouseUp)
-                    .on("mousedown",nodeMouseDown)
-                    .on("touchstart",nodeTouchStart)
-                    .on("touchend", nodeTouchEnd);
-
-                inGroup.append("g").attr('transform','translate(35,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
-                    .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);} )
-                    .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);d3.event.preventDefault();} )
-                    .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);})
-                    .on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);d3.event.preventDefault();} )
-                    .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_OUTPUT,0);})
-                    .on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_OUTPUT,0);});
-
-                inGroup.append("svg:text").attr("class","red-ui-flow-port-label").attr("x",18).attr("y",20).style("font-size","10px").text("input");
+                inGroup.each(buildSubflowPort);
 
                 var subflowStatus = nodeLayer.selectAll(".red-ui-flow-subflow-port-status").data(activeSubflow.status?[activeSubflow.status]:[],function(d,i){ return d.id;});
                 subflowStatus.exit().remove();
 
                 var statusGroup = subflowStatus.enter().insert("svg:g").attr("class","red-ui-flow-node red-ui-flow-subflow-port-status").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"});
+                // TODO: use buildSubflowPort/updateSubflowPort for status port
                 statusGroup.each(function(d,i) {
                     d.w=40;
                     d.h=40;
@@ -27206,104 +28140,16 @@ RED.view = (function() {
 
                 statusGroup.append("svg:text").attr("class","red-ui-flow-port-label").attr("x",22).attr("y",20).style("font-size","10px").text("status");
 
-                subflowOutputs.each(function(d,i) {
-                    if (d.dirty) {
-
-                        var port_height = 40;
-
-                        var self = this;
-                        var thisNode = d3.select(this);
-
+                subflowOutputs.each(function (d,i) {
+                    if (updateSubflowPort.call(this, d)) {
                         dirtyNodes[d.id] = d;
-
-                        var label = getPortLabel(activeSubflow, PORT_TYPE_OUTPUT, d.i) || "";
-                        var hideLabel = (label.length < 1)
-
-                        var labelParts;
-                        if (d.resize || this.__hideLabel__ !== hideLabel || this.__label__ !== label) {
-                            labelParts = getLabelParts(label, "red-ui-flow-node-label");
-                            if (labelParts.lines.length !== this.__labelLineCount__ || this.__label__ !== label) {
-                                d.resize = true;
-                            }
-                            this.__label__ = label;
-                            this.__labelLineCount__ = labelParts.lines.length;
-
-                            if (hideLabel) {
-                                d.h = Math.max(port_height,(d.outputs || 0) * 15);
-                            } else {
-                                d.h = Math.max(6+24*labelParts.lines.length,(d.outputs || 0) * 15, port_height);
-                            }
-                            this.__hideLabel__ = hideLabel;
-                        }
-
-                        if (d.resize) {
-                            var ow = d.w;
-                            if (hideLabel) {
-                                d.w = port_height;
-                            } else {
-                                d.w = Math.max(port_height,20*(Math.ceil((labelParts.width+50+7)/20)) );
-                            }
-                            if (ow !== undefined) {
-                                d.x += (d.w-ow)/2;
-                            }
-                            d.resize = false;
-                        }
-
-                        this.setAttribute("transform", "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")");
-                        // This might be the first redraw after a node has been click-dragged to start a move.
-                        // So its selected state might have changed since the last redraw.
-                        this.classList.toggle("red-ui-flow-node-selected", !!d.selected )
-                        if (mouse_mode != RED.state.MOVING_ACTIVE) {
-                            this.classList.toggle("red-ui-flow-node-disabled", d.d === true);
-                            this.__mainRect__.setAttribute("width", d.w)
-                            this.__mainRect__.setAttribute("height", d.h)
-                            this.__mainRect__.classList.toggle("red-ui-flow-node-highlighted",!!d.highlighted );
-
-                            if (labelParts) {
-                                // The label has changed
-                                var sa = labelParts.lines;
-                                var sn = labelParts.lines.length;
-                                var textLines = this.__textGroup__.childNodes;
-                                while(textLines.length > sn) {
-                                    textLines[textLines.length-1].remove();
-                                }
-                                for (var i=0; i<sn; i++) {
-                                    if (i===textLines.length) {
-                                        var line = document.createElementNS("http://www.w3.org/2000/svg","text");
-                                        line.setAttribute("class","red-ui-flow-node-label-text");
-                                        line.setAttribute("x",0);
-                                        line.setAttribute("y",i*24);
-                                        this.__textGroup__.appendChild(line);
-                                    }
-                                    textLines[i].textContent = sa[i];
-                                }
-                            }
-
-                            var textClass = "red-ui-flow-node-label"+(hideLabel?" hide":"");
-                            this.__textGroup__.setAttribute("class", textClass);
-                            var yp = d.h / 2 - (this.__labelLineCount__ / 2) * 24 + 13;
-
-                            // this.__textGroup__.classList.remove("red-ui-flow-node-label-right");
-                            this.__textGroup__.setAttribute("transform", "translate(48,"+yp+")");
-
-                            this.__outputBorder__.setAttribute("d","M 40 1 l 0 "+(hideLabel?0:(d.h - 2)));
-                            this.__port__.setAttribute("transform","translate(-5,"+((d.h/2)-5)+")");
-                            this.__outputOutput__.setAttribute("transform","translate(20,"+((d.h/2)-8)+")");
-                            this.__outputNumber__.setAttribute("transform","translate(20,"+((d.h/2)+7)+")");
-                            this.__outputNumber__.textContent = d.i+1;
-                        }
-                        d.dirty = false;
                     }
-                });
-                subflowInputs.each(function(d,i) {
-                    if (d.dirty) {
-                        var input = d3.select(this);
-                        input.classed("red-ui-flow-node-selected",function(d) { return d.selected; })
-                        input.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
+                })
+                subflowInputs.each(function (d,i) {
+                    if (updateSubflowPort.call(this, d)) {
                         dirtyNodes[d.id] = d;
-                        d.dirty = false;
                     }
-                });
+                })
                 subflowStatus.each(function(d,i) {
                     if (d.dirty) {
                         var output = d3.select(this);
@@ -29357,7 +30203,6 @@ RED.view = (function() {
                         refreshSuggestedFlow();
                     } else { // Anything else; clear the suggestion
                         clearSuggestedFlow();
-                        RED.view.redraw(true);
                         // manually push the event to the keyboard handler
                         RED.keyboard.handle(evt)
                     }
@@ -29366,7 +30211,6 @@ RED.view = (function() {
             if (suggestion.clickToApply) {
                 $(window).on('mousedown.suggestedFlow', function (evnt) {
                     clearSuggestedFlow();
-                    RED.view.redraw(true);
                 })
             }
         }
@@ -29387,12 +30231,16 @@ RED.view = (function() {
     }
 
     function clearSuggestedFlow () {
-        $(window).off('mousedown.suggestedFlow');
-        $(window).off('keydown.suggestedFlow')
-        RED.keyboard.enable()
-        currentSuggestion = null
-        suggestedNodes = []
-        suggestedLinks = []
+        if (currentSuggestion) {
+            $(window).off('mousedown.suggestedFlow');
+            $(window).off('keydown.suggestedFlow')
+            RED.keyboard.enable()
+            currentSuggestion = null
+            suggestedNodes = []
+            suggestedLinks = []
+            forceFullRedraw = true
+            RED.view.redraw(true);
+        }
     }
 
     function applySuggestedFlow () {
@@ -29610,7 +30458,7 @@ RED.view = (function() {
         selectNodes: function(options) {
             $("#red-ui-workspace-tabs-shade").show();
             $("#red-ui-palette-shade").show();
-            $("#red-ui-sidebar-shade").show();
+            $(".red-ui-sidebar-shade").show();
             $("#red-ui-header-shade").show();
             $("#red-ui-workspace").addClass("red-ui-workspace-select-mode");
 
@@ -29632,7 +30480,7 @@ RED.view = (function() {
                 clearSelection();
                 $("#red-ui-workspace-tabs-shade").hide();
                 $("#red-ui-palette-shade").hide();
-                $("#red-ui-sidebar-shade").hide();
+                $(".red-ui-sidebar-shade").hide();
                 $("#red-ui-header-shade").hide();
                 $("#red-ui-workspace").removeClass("red-ui-workspace-select-mode");
                 resetMouseVars();
@@ -29701,7 +30549,283 @@ RED.view = (function() {
         applySuggestedFlow
     };
 })();
-;RED.view.annotations = (function() {
+;/**
+ * Zoom configuration constants
+ */
+RED.view.zoomConstants = {
+    // Zoom limits
+    MIN_ZOOM: 0.05,  // Default minimum, will be dynamically calculated to fit canvas
+    MAX_ZOOM: 2.0,
+    
+    // Zoom step for keyboard/button controls
+    ZOOM_STEP: 0.2,
+    
+    // Animation settings
+    DEFAULT_ZOOM_DURATION: 125, // ms, faster animation
+    
+    // Gesture thresholds
+    PINCH_THRESHOLD: 10, // minimum pixel movement to trigger zoom
+    
+    // Momentum and friction for smooth scrolling
+    FRICTION: 0.92,
+    BOUNCE_DAMPING: 0.6
+};;/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+RED.view.zoomAnimator = (function() {
+    
+    /**
+     * Easing function for smooth deceleration
+     * Creates natural-feeling animation curves
+     * @param {number} t - Progress from 0 to 1
+     * @returns {number} - Eased value from 0 to 1
+     */
+    function easeOut(t) {
+        // Cubic ease-out for smooth deceleration
+        return 1 - Math.pow(1 - t, 3);
+    }
+    
+    /**
+     * Animate values using requestAnimationFrame with easing
+     * Based on Excalidraw's implementation for smooth zoom transitions
+     * 
+     * @param {Object} options - Animation options
+     * @param {Object} options.fromValues - Starting values object
+     * @param {Object} options.toValues - Target values object
+     * @param {Function} options.onStep - Callback for each animation frame
+     * @param {number} [options.duration=250] - Animation duration in ms
+     * @param {Function} [options.interpolateValue] - Custom interpolation function
+     * @param {Function} [options.onStart] - Animation start callback
+     * @param {Function} [options.onEnd] - Animation end callback
+     * @param {Function} [options.onCancel] - Animation cancel callback
+     * @returns {Function} - Cancel function to stop animation
+     */
+    function easeToValuesRAF(options) {
+        const {
+            fromValues,
+            toValues,
+            onStep,
+            duration = 250,
+            interpolateValue,
+            onStart,
+            onEnd,
+            onCancel
+        } = options;
+        
+        let startTime = null;
+        let animationId = null;
+        let cancelled = false;
+        
+        function step(timestamp) {
+            if (cancelled) {
+                return;
+            }
+            
+            if (!startTime) {
+                startTime = timestamp;
+                if (onStart) {
+                    onStart();
+                }
+            }
+            
+            const elapsed = timestamp - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            const easedProgress = easeOut(progress);
+            
+            const interpolatedValues = {};
+            
+            for (const key in fromValues) {
+                if (fromValues.hasOwnProperty(key)) {
+                    const from = fromValues[key];
+                    const to = toValues[key];
+                    
+                    if (interpolateValue && key === 'zoom') {
+                        // Special interpolation for zoom to feel more natural
+                        // Exponential interpolation preserves relative zoom feel
+                        interpolatedValues[key] = from * Math.pow(to / from, easedProgress);
+                    } else {
+                        // Linear interpolation for other values
+                        interpolatedValues[key] = from + (to - from) * easedProgress;
+                    }
+                }
+            }
+            
+            onStep(interpolatedValues);
+            
+            if (progress < 1) {
+                animationId = requestAnimationFrame(step);
+            } else {
+                if (onEnd) {
+                    onEnd();
+                }
+            }
+        }
+        
+        animationId = requestAnimationFrame(step);
+        
+        // Return cancel function
+        return function cancel() {
+            cancelled = true;
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+            }
+            if (onCancel) {
+                onCancel();
+            }
+        };
+    }
+    
+    /**
+     * Calculate smooth zoom delta with acceleration
+     * Provides consistent zoom speed regardless of input device
+     * 
+     * @param {number} currentScale - Current zoom scale
+     * @param {number} delta - Input delta (wheel, gesture, etc)
+     * @param {boolean} isTrackpad - Whether input is from trackpad
+     * @returns {number} - Calculated zoom delta
+     */
+    function calculateZoomDelta(currentScale, delta, isTrackpad) {
+        // Normalize delta across different input devices
+        let normalizedDelta = delta;
+        
+        if (isTrackpad) {
+            // Trackpad deltas are typically smaller and more frequent
+            normalizedDelta = delta * 0.005; // Reduced from 0.01 for gentler zoom
+        } else {
+            // Mouse wheel deltas are larger and less frequent
+            // Reduce zoom out speed more than zoom in
+            normalizedDelta = delta > 0 ? 0.06 : -0.08; // Reduced from 0.1, asymmetric for gentler zoom out
+        }
+        
+        // Apply gentler acceleration based on current zoom level
+        // Less aggressive acceleration to prevent rapid zoom out
+        const acceleration = Math.max(0.7, Math.min(1.1, 1 / currentScale)); // Reduced from 0.5-1.2 to 0.7-1.1
+        
+        return normalizedDelta * acceleration;
+    }
+    
+    /**
+     * Gesture state management for consistent focal points
+     */
+    const gestureState = {
+        active: false,
+        initialFocalPoint: null,  // Will store workspace coordinates
+        initialScale: 1,
+        currentScale: 1,
+        lastDistance: 0,
+        scrollPosAtStart: null,    // Store initial scroll position
+        scaleFatorAtStart: 1       // Store initial scale factor
+    };
+    
+    /**
+     * Start a zoom gesture with fixed focal point
+     * @param {Array} focalPoint - [x, y] coordinates of focal point in workspace
+     * @param {number} scale - Initial scale value
+     * @param {Array} scrollPos - Current scroll position [x, y]
+     * @param {number} currentScaleFactor - Current scale factor for coordinate conversion
+     */
+    function startGesture(focalPoint, scale, scrollPos, currentScaleFactor) {
+        gestureState.active = true;
+        // Store the focal point in workspace coordinates for stability
+        // This ensures the point remains fixed even if scroll changes due to canvas edge constraints
+        if (focalPoint && scrollPos && currentScaleFactor) {
+            gestureState.initialFocalPoint = [
+                (scrollPos[0] + focalPoint[0]) / currentScaleFactor,
+                (scrollPos[1] + focalPoint[1]) / currentScaleFactor
+            ];
+            gestureState.scrollPosAtStart = [...scrollPos];
+            gestureState.scaleFatorAtStart = currentScaleFactor;
+        } else {
+            gestureState.initialFocalPoint = focalPoint ? [...focalPoint] : null;
+        }
+        gestureState.initialScale = scale;
+        gestureState.currentScale = scale;
+        return gestureState;
+    }
+    
+    /**
+     * Update gesture maintaining fixed focal point
+     * @param {number} newScale - New scale value
+     * @returns {Object} - Gesture state with fixed focal point
+     */
+    function updateGesture(newScale) {
+        if (!gestureState.active) {
+            return null;
+        }
+        
+        gestureState.currentScale = newScale;
+        
+        return {
+            scale: newScale,
+            focalPoint: gestureState.initialFocalPoint,
+            active: gestureState.active
+        };
+    }
+    
+    /**
+     * End the current gesture
+     */
+    function endGesture() {
+        gestureState.active = false;
+        gestureState.initialFocalPoint = null;
+        gestureState.lastDistance = 0;
+    }
+    
+    /**
+     * Check if a gesture is currently active
+     */
+    function isGestureActive() {
+        return gestureState.active;
+    }
+    
+    /**
+     * Get the fixed focal point for the current gesture
+     * @param {Array} currentScrollPos - Current scroll position [x, y]
+     * @param {number} currentScaleFactor - Current scale factor
+     * @returns {Array} - Focal point in screen coordinates or null
+     */
+    function getGestureFocalPoint(currentScrollPos, currentScaleFactor) {
+        if (!gestureState.initialFocalPoint) {
+            return null;
+        }
+        
+        // If we stored workspace coordinates, convert back to screen coordinates
+        if (gestureState.scrollPosAtStart && currentScrollPos && currentScaleFactor) {
+            // Convert workspace coordinates back to current screen coordinates
+            return [
+                gestureState.initialFocalPoint[0] * currentScaleFactor - currentScrollPos[0],
+                gestureState.initialFocalPoint[1] * currentScaleFactor - currentScrollPos[1]
+            ];
+        }
+        
+        return gestureState.initialFocalPoint;
+    }
+    
+    return {
+        easeOut: easeOut,
+        easeToValuesRAF: easeToValuesRAF,
+        calculateZoomDelta: calculateZoomDelta,
+        gestureState: gestureState,
+        startGesture: startGesture,
+        updateGesture: updateGesture,
+        endGesture: endGesture,
+        isGestureActive: isGestureActive,
+        getGestureFocalPoint: getGestureFocalPoint
+    };
+})();;RED.view.annotations = (function() {
 
     var annotations = {};
 
@@ -29901,139 +31025,202 @@ RED.view = (function() {
  **/
 
 
- RED.view.navigator = (function() {
-
-     var nav_scale = 50;
-     var nav_width = 8000/nav_scale;
-     var nav_height = 8000/nav_scale;
-
-     var navContainer;
-     var navBox;
-     var navBorder;
-     var navVis;
-     var scrollPos;
-     var scaleFactor;
-     var chartSize;
-     var dimensions;
-     var isDragging;
-     var isShowing = false;
-
-     function refreshNodes() {
-         if (!isShowing) {
-             return;
-         }
-         var navNode = navVis.selectAll(".red-ui-navigator-node").data(RED.view.getActiveNodes(),function(d){return d.id});
-         navNode.exit().remove();
-         navNode.enter().insert("rect")
-             .attr('class','red-ui-navigator-node')
-             .attr("pointer-events", "none");
-         navNode.each(function(d) {
-             d3.select(this).attr("x",function(d) { return (d.x-d.w/2)/nav_scale })
-             .attr("y",function(d) { return (d.y-d.h/2)/nav_scale })
-             .attr("width",function(d) { return Math.max(9,d.w/nav_scale) })
-             .attr("height",function(d) { return Math.max(3,d.h/nav_scale) })
-             .attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def);})
-         });
-     }
-     function onScroll() {
-         if (!isDragging) {
-             resizeNavBorder();
-         }
-     }
-     function resizeNavBorder() {
-         if (navBorder) {
-             scaleFactor = RED.view.scale();
-             chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()];
-             scrollPos = [$("#red-ui-workspace-chart").scrollLeft(),$("#red-ui-workspace-chart").scrollTop()];
-             navBorder.attr('x',scrollPos[0]/nav_scale)
-                      .attr('y',scrollPos[1]/nav_scale)
-                      .attr('width',chartSize[0]/nav_scale/scaleFactor)
-                      .attr('height',chartSize[1]/nav_scale/scaleFactor)
-         }
-     }
-     function toggle() {
-         if (!isShowing) {
-             isShowing = true;
-             $("#red-ui-view-navigate").addClass("selected");
-             resizeNavBorder();
-             refreshNodes();
-             $("#red-ui-workspace-chart").on("scroll",onScroll);
-             navContainer.fadeIn(200);
-         } else {
-             isShowing = false;
-             navContainer.fadeOut(100);
-             $("#red-ui-workspace-chart").off("scroll",onScroll);
-             $("#red-ui-view-navigate").removeClass("selected");
-         }
-     }
-
-     return {
-         init: function() {
-
-             $(window).on("resize", resizeNavBorder);
-             RED.events.on("sidebar:resize",resizeNavBorder);
-             RED.actions.add("core:toggle-navigator",toggle);
-             var hideTimeout;
-
-             navContainer = $('<div>').css({
-                 "position":"absolute",
-                 "bottom":$("#red-ui-workspace-footer").height(),
-                 "right":0,
-                 zIndex: 1
-             }).appendTo("#red-ui-workspace").hide();
-
-             navBox = d3.select(navContainer[0])
-                 .append("svg:svg")
-                 .attr("width", nav_width)
-                 .attr("height", nav_height)
-                 .attr("pointer-events", "all")
-                 .attr("id","red-ui-navigator-canvas")
-
-             navBox.append("rect").attr("x",0).attr("y",0).attr("width",nav_width).attr("height",nav_height).style({
-                 fill:"none",
-                 stroke:"none",
-                 pointerEvents:"all"
-             }).on("mousedown", function() {
-                 // Update these in case they have changed
-                 scaleFactor = RED.view.scale();
-                 chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()];
-                 dimensions = [chartSize[0]/nav_scale/scaleFactor, chartSize[1]/nav_scale/scaleFactor];
-                 var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]);
-                 var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
-                 navBorder.attr('x',newX).attr('y',newY);
-                 isDragging = true;
-                 $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor);
-                 $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor);
-             }).on("mousemove", function() {
-                 if (!isDragging) { return }
-                 if (d3.event.buttons === 0) {
-                     isDragging = false;
-                     return;
-                 }
-                 var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]);
-                 var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
-                 navBorder.attr('x',newX).attr('y',newY);
-                 $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor);
-                 $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor);
-             }).on("mouseup", function() {
-                 isDragging = false;
-             })
-
-             navBorder = navBox.append("rect").attr("class","red-ui-navigator-border")
-
-             navVis = navBox.append("svg:g")
-
-             RED.statusBar.add({
-                 id: "view-navigator",
-                 align: "right",
-                 element: $('<button class="red-ui-footer-button-toggle single" id="red-ui-view-navigate"><i class="fa fa-map-o"></i></button>')
-             })
+RED.view.navigator = (function() {
+    var nav_scale = 50;
+    var nav_width = 8000/nav_scale;
+    var nav_height = 8000/nav_scale;
+    var navContainer;
+    var navBox;
+    var navBorder;
+    var navVis;
+    var scrollPos;
+    var scaleFactor;
+    var chartSize;
+    var dimensions;
+    var isDragging;
+    var isShowing = false;
+    var toggleTimeout;
+    var autoHideTimeout;
+    var isManuallyToggled = false;
+    var isTemporaryShow = false;
+    function refreshNodes() {
+        if (!isShowing) {
+            return;
+        }
+        var navNode = navVis.selectAll(".red-ui-navigator-node").data(RED.view.getActiveNodes(),function(d){return d.id});
+        navNode.exit().remove();
+        navNode.enter().insert("rect")
+            .attr('class','red-ui-navigator-node')
+            .attr("pointer-events", "none");
+        navNode.each(function(d) {
+            d3.select(this).attr("x",function(d) { return (d.x-d.w/2)/nav_scale })
+            .attr("y",function(d) { return (d.y-d.h/2)/nav_scale })
+            .attr("width",function(d) { return Math.max(9,d.w/nav_scale) })
+            .attr("height",function(d) { return Math.max(3,d.h/nav_scale) })
+            .attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def);})
+        });
+    }
+    function onScroll() {
+        if (!isDragging) {
+            resizeNavBorder();
+        }
+    }
+    function resizeNavBorder() {
+        if (navBorder) {
+            scaleFactor = RED.view.scale();
+            chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()];
+            scrollPos = [$("#red-ui-workspace-chart").scrollLeft(),$("#red-ui-workspace-chart").scrollTop()];
+            // Convert scroll position (in scaled pixels) to workspace coordinates, then to minimap coordinates
+            // scrollPos is in scaled canvas pixels, divide by scaleFactor to get workspace coords
+            navBorder.attr('x',scrollPos[0]/scaleFactor/nav_scale)
+                     .attr('y',scrollPos[1]/scaleFactor/nav_scale)
+                     .attr('width',chartSize[0]/nav_scale/scaleFactor)
+                     .attr('height',chartSize[1]/nav_scale/scaleFactor)
+        }
+    }
+    function show () {
+        if (!isShowing) {
+            isShowing = true;
+            clearTimeout(autoHideTimeout);
+            $("#red-ui-view-navigate").addClass("selected");
+            resizeNavBorder();
+            refreshNodes();
+            $("#red-ui-workspace-chart").on("scroll",onScroll);
+            navContainer.addClass('red-ui-navigator-container');
+            navContainer.show();
+            clearTimeout(toggleTimeout)
+            toggleTimeout = setTimeout(function() {
+                navContainer.addClass('red-ui-navigator-visible');
+            }, 10);
+        } 
+    }
+    function hide () {
+        if (isShowing) {
+            isShowing = false;
+            isTemporaryShow = false;
+            isManuallyToggled = false;
+            clearTimeout(autoHideTimeout);
+            navContainer.removeClass('red-ui-navigator-visible');
+            clearTimeout(toggleTimeout)
+            toggleTimeout = setTimeout(function() {
+                navContainer.hide();
+            }, 300);
+            $("#red-ui-workspace-chart").off("scroll",onScroll);
+            $("#red-ui-view-navigate").removeClass("selected");
+        }
+    }
+    function toggle() {
+        if (!isShowing) {
+            isManuallyToggled = true;
+            show()
+        } else {
+            isManuallyToggled = false;
+           hide()            
+        }
+    }
+    function setupAutoHide () {
+        clearTimeout(autoHideTimeout);
+        autoHideTimeout = setTimeout(function() {
+            hide()
+        }, 2000)
+    }
+    function showTemporary() {
+        if (!isManuallyToggled) {
+            isTemporaryShow = true
+            clearTimeout(autoHideTimeout);
+            show()
+            setupAutoHide()      
+        }
+    }
+    return {
+        init: function() {
+            $(window).on("resize", resizeNavBorder);
+            RED.events.on("sidebar:resize",resizeNavBorder);
+            RED.actions.add("core:toggle-navigator",toggle);
+            navContainer = $('<div>').css({
+                "position":"absolute",
+                "bottom":$("#red-ui-workspace-footer").height(),
+                "right":0,
+                zIndex: 1
+            }).addClass('red-ui-navigator-container').appendTo("#red-ui-workspace").hide();
+            navBox = d3.select(navContainer[0])
+                .append("svg:svg")
+                .attr("width", nav_width)
+                .attr("height", nav_height)
+                .attr("pointer-events", "all")
+                .attr("id","red-ui-navigator-canvas")
+            navBox.append("rect").attr("x",0).attr("y",0).attr("width",nav_width).attr("height",nav_height).style({
+                fill:"none",
+                stroke:"none",
+                pointerEvents:"all"
+            }).on("mousedown", function() {
+                // Update these in case they have changed
+                scaleFactor = RED.view.scale();
+                chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()];
+                dimensions = [chartSize[0]/nav_scale/scaleFactor, chartSize[1]/nav_scale/scaleFactor];
+                var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]);
+                var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
+                navBorder.attr('x',newX).attr('y',newY);
+                isDragging = true;
+                $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor);
+                $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor);
+            }).on("mousemove", function() {
+                if (!isDragging) { return }
+                if (d3.event.buttons === 0) {
+                    isDragging = false;
+                    return;
+                }
+                var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]);
+                var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
+                navBorder.attr('x',newX).attr('y',newY);
+                $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor);
+                $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor);
+            }).on("mouseup", function() {
+                isDragging = false;
+            }).on("mouseenter", function () {
+                if (isTemporaryShow) {
+                    // If user hovers over the minimap while it's temporarily shown, keep it shown
+                    clearTimeout(autoHideTimeout);
+                }
+            }).on("mouseleave", function () {
+                if (isTemporaryShow) {
+                    // Restart the auto-hide timer after mouse leaves the minimap
+                    setupAutoHide()
+                }
+            })
+            navBorder = navBox.append("rect").attr("class","red-ui-navigator-border")
+            navVis = navBox.append("svg:g")
+            RED.statusBar.add({
+                id: "view-navigator",
+                align: "right",
+                element: $('<button class="red-ui-footer-button-toggle single" id="red-ui-view-navigate"><i class="fa fa-map-o"></i></button>')
+            })
 
             $("#red-ui-view-navigate").on("click", function(evt) {
                 evt.preventDefault();
                 toggle();
             })
             RED.popover.tooltip($("#red-ui-view-navigate"),RED._('actions.toggle-navigator'),'core:toggle-navigator');
+
+            // Listen for canvas interactions to show minimap temporarily
+            // Only show on actual pan/zoom navigation, not selection changes
+            // RED.events.on("view:navigate", function() {
+            //     showTemporary();
+            // });
+
+            // Show minimap briefly when workspace changes (includes initial load)
+            // RED.events.on("workspace:change", function(event) {
+            //     // Only show if there's an active workspace with nodes
+            //     if (event.workspace && RED.nodes.getWorkspaceOrder().length > 0) {
+            //         // Small delay to ensure nodes are rendered
+            //         setTimeout(function() {
+            //             var activeNodes = RED.nodes.filterNodes({z: event.workspace});
+            //             if (activeNodes.length > 0) {
+            //                 showTemporary();
+            //             }
+            //         }, 100);
+            //     }
+            // });
         },
         refresh: refreshNodes,
         resize: resizeNavBorder,
@@ -31501,19 +32688,56 @@ RED.view.tools = (function() {
  * limitations under the License.
  **/
 RED.sidebar = (function() {
+    const sidebars = {
+        primary: {
+            id: 'primary',
+            direction: 'right',
+            menuToggle: 'menu-item-sidebar',
+            minimumWidth: 180,
+            maximumWidth: 800,
+            defaultWidth: 300
+        },
+        secondary: {
+            id: 'secondary',
+            direction: 'left',
+            menuToggle: 'menu-item-palette',
+            minimumWidth: 180,
+            maximumWidth: 800,
+            // Make LH side slightly narrower by default as its the palette that doesn't require a lot of width
+            defaultWidth: 210
+        }
+    }
+    const defaultSidebarConfiguration = {
+        primary: ['info','debug','help','config','context'],
+        secondary: ['palette']
+    }
+
+    const knownTabs = {};
+
+    function exportSidebarState () {
+        const state = {
+            primary: [],
+            secondary: []
+        }
+        sidebars.primary.tabBar.children('button').each(function() {
+            const tabId = $(this).attr('data-tab-id');
+            state.primary.push(tabId);
+        })
+        sidebars.secondary.tabBar.children('button').each(function() {
+            const tabId = $(this).attr('data-tab-id');
+            state.secondary.push(tabId);
+        })
+        RED.settings.set('editor.sidebar.state', state)
+    }
 
-    //$('#sidebar').tabs();
-    var sidebar_tabs;
-    var knownTabs = {};
 
     // We store the current sidebar tab id in localStorage as 'last-sidebar-tab'
     // This is restored when the editor is reloaded.
-    // We use sidebar_tabs.onchange to update localStorage. However that will
+    // We use sidebars.primary.tabs.onchange to update localStorage. However that will
     // also get triggered when the first tab gets added to the tabs - typically
     // the 'info' tab. So we use the following variable to store the retrieved
     // value from localStorage before we start adding the actual tabs
-    var lastSessionSelectedTab = null;
-
+    let lastSessionSelectedTabs = {}
 
     function addTab(title,content,closeable,visible) {
         var options;
@@ -31530,10 +32754,34 @@ RED.sidebar = (function() {
         } else if (typeof title === "object") {
             options = title;
         }
+        options.target = options.target || 'primary';
+        let targetTabButtonIndex = -1 // Append to end by default
 
+        // Check the saved sidebar state to see if this tab should be added to the primary or secondary sidebar
+        const savedState = RED.settings.get('editor.sidebar.state', defaultSidebarConfiguration)
+        if (savedState) {
+            let targetSidebar = null
+            let sidebarState
+            if (savedState.secondary.includes(options.id)) {
+                options.target = 'secondary'
+                sidebarState = savedState.secondary
+                targetSidebar = sidebars.secondary
+            } else if (savedState.primary.includes(options.id)) {
+                options.target = 'primary'
+                sidebarState = savedState.primary
+                targetSidebar = sidebars.primary
+            }
+            if (targetSidebar) {
+                // This tab was found in the saved sidebar state. Now find the target position for the tab button
+                targetTabButtonIndex = sidebarState.indexOf(options.id)
+            }
+        }
+
+
+        const targetSidebar = options.target === 'secondary' ? sidebars.secondary : sidebars.primary;
         delete options.closeable;
 
-        options.wrapper = $('<div>',{style:"height:100%"}).appendTo("#red-ui-sidebar-content")
+        options.wrapper = $('<div>',{style:"height:100%"}).appendTo(targetSidebar.content)
         options.wrapper.append(options.content);
         options.wrapper.hide();
 
@@ -31542,11 +32790,12 @@ RED.sidebar = (function() {
         }
 
         if (options.toolbar) {
-            $("#red-ui-sidebar-footer").append(options.toolbar);
+            targetSidebar.footer.append(options.toolbar);
             $(options.toolbar).hide();
         }
         var id = options.id;
 
+        // console.log('menu', options.id, options.name)
         RED.menu.addItem("menu-item-view-menu",{
             id:"menu-item-view-menu-"+options.id,
             label:options.name,
@@ -31559,208 +32808,315 @@ RED.sidebar = (function() {
         options.iconClass = options.iconClass || "fa fa-square-o"
 
         knownTabs[options.id] = options;
+        options.tabButton = $('<button></button>')
+        // Insert the tab button at the correct index
+        if (targetTabButtonIndex === -1 || targetTabButtonIndex >= targetSidebar.tabBar.children().length) {
+            // Append to end
+            options.tabButton = $('<button></button>').appendTo(targetSidebar.tabBar);
+        } else {
+            // Insert before the item at targetTabButtonIndex
+            options.tabButton = $('<button></button>').insertBefore(targetSidebar.tabBar.children().eq(targetTabButtonIndex));
+        }
+        options.tabButton.attr('data-tab-id', options.id)
 
-        if (options.visible !== false) {
-            sidebar_tabs.addTab(knownTabs[options.id]);
+        options.tabButtonTooltip = RED.popover.tooltip(options.tabButton, options.name, options.action);
+        if (options.icon) {
+            $('<i>',{class: 'red-ui-sidebar-tab-icon', style:"mask-image: url("+options.icon+"); -webkit-mask-image: url("+options.icon+");"}).appendTo(options.tabButton);
+        } else if (options.iconClass) {
+            $('<i>',{class:options.iconClass}).appendTo(options.tabButton);
+        }
+        options.tabButton.on('mouseup', function(evt) {
+            if (draggingTabButton) {
+                draggingTabButton = false
+                return
+            }
+            const targetSidebar = options.target === 'secondary' ? sidebars.secondary : sidebars.primary;
+            if (targetSidebar.activeTab === options.id && RED.menu.isSelected(targetSidebar.menuToggle)) {
+                RED.menu.setSelected(targetSidebar.menuToggle, false);
+            } else {
+                RED.sidebar.show(options.id)
+            }
+        })
+        if (targetSidebar.content.children().length === 1) {
+            RED.sidebar.show(options.id)
         }
     }
 
     function removeTab(id) {
-        sidebar_tabs.removeTab(id);
-        $(knownTabs[id].wrapper).remove();
-        if (knownTabs[id].footer) {
-            knownTabs[id].footer.remove();
+        if (knownTabs[id]) {
+            const targetSidebar = knownTabs[id].target === 'secondary' ? sidebars.secondary : sidebars.primary;
+            $(knownTabs[id].wrapper).remove();
+            if (knownTabs[id].footer) {
+                knownTabs[id].footer.remove();
+            }
+            targetSidebar.tabBar.find('button[data-tab-id="'+id+'"]').remove()
+            RED.menu.removeItem("menu-item-view-menu-"+id);
+            if (knownTabs[id].onremove) {
+                knownTabs[id].onremove.call(knownTabs[id]);
+            }
+            delete knownTabs[id];
+            const firstTab = targetSidebar.tabBar.find('button').first().attr('data-tab-id');
+            if (firstTab) {
+                RED.sidebar.show(firstTab);
+            }
         }
-        delete knownTabs[id];
-        RED.menu.removeItem("menu-item-view-menu-"+id);
     }
 
-    var sidebarSeparator =  {};
-    sidebarSeparator.dragging = false;
-
-    function setupSidebarSeparator() {
-        $("#red-ui-sidebar-separator").draggable({
-                axis: "x",
-                start:function(event,ui) {
-                    sidebarSeparator.closing = false;
-                    sidebarSeparator.opening = false;
-                    var winWidth = $("#red-ui-editor").width();
-                    sidebarSeparator.start = ui.position.left;
-                    sidebarSeparator.chartWidth = $("#red-ui-workspace").width();
-                    sidebarSeparator.chartRight = winWidth-$("#red-ui-workspace").width()-$("#red-ui-workspace").offset().left-2;
-                    sidebarSeparator.dragging = true;
-
-                    if (!RED.menu.isSelected("menu-item-sidebar")) {
-                        sidebarSeparator.opening = true;
-                        var newChartRight = 7;
-                        $("#red-ui-sidebar").addClass("closing");
-                        $("#red-ui-workspace").css("right",newChartRight);
-                        $("#red-ui-editor-stack").css("right",newChartRight+1);
-                        $("#red-ui-sidebar").width(0);
-                        RED.menu.setSelected("menu-item-sidebar",true);
-                        RED.events.emit("sidebar:resize");
-                    }
-                    sidebarSeparator.width = $("#red-ui-sidebar").width();
-                },
-                drag: function(event,ui) {
-                    var d = ui.position.left-sidebarSeparator.start;
-                    var newSidebarWidth = sidebarSeparator.width-d;
-                    if (sidebarSeparator.opening) {
-                        newSidebarWidth -= 3;
-                    }
-
-                    if (newSidebarWidth > 150) {
-                        if (sidebarSeparator.chartWidth+d < 200) {
-                            ui.position.left = 200+sidebarSeparator.start-sidebarSeparator.chartWidth;
-                            d = ui.position.left-sidebarSeparator.start;
-                            newSidebarWidth = sidebarSeparator.width-d;
-                        }
-                    }
-
-                    if (newSidebarWidth < 150) {
-                        if (!sidebarSeparator.closing) {
-                            $("#red-ui-sidebar").addClass("closing");
-                            sidebarSeparator.closing = true;
-                        }
-                        if (!sidebarSeparator.opening) {
-                            newSidebarWidth = 150;
-                            ui.position.left = sidebarSeparator.width-(150 - sidebarSeparator.start);
-                            d = ui.position.left-sidebarSeparator.start;
-                        }
-                    } else if (newSidebarWidth > 150 && (sidebarSeparator.closing || sidebarSeparator.opening)) {
-                        sidebarSeparator.closing = false;
-                        $("#red-ui-sidebar").removeClass("closing");
+    function moveTab(id, srcSidebar, targetSidebar) {
+        const options = knownTabs[id];
+        options.target = targetSidebar.id;
+        $(options.wrapper).appendTo(targetSidebar.content);
+        if (options.toolbar) {
+            targetSidebar.footer.append(options.toolbar);
+        }
+        // Reset the tooltip so its left/right direction is recalculated
+        options.tabButtonTooltip.delete()
+        options.tabButtonTooltip = RED.popover.tooltip(options.tabButton, options.name, options.action);
+
+        if (targetSidebar.content.children().length === 1) {
+            RED.sidebar.show(options.id)
+        }
+        if (srcSidebar.content.children().length === 0) {
+            RED.menu.setSelected(srcSidebar.menuToggle, false);
+        }
+    }
+
+    let draggingTabButton = false
+    function setupSidebarTabs(sidebar) {
+        const tabBar = $('<div class="red-ui-sidebar-tab-bar"></div>').addClass('red-ui-sidebar-' + sidebar.direction);
+        tabBar.attr('id', sidebar.container.attr('id') + '-tab-bar')
+        tabBar.data('sidebar', sidebar.id)
+        if (sidebar.direction === 'right') {
+            tabBar.insertAfter(sidebar.container);
+        } else if (sidebar.direction === 'left') {
+            tabBar.insertBefore(sidebar.container);
+        }
+        tabBar.sortable({
+            distance: 10,
+            cancel: false,
+            placeholder: "red-ui-sidebar-tab-bar-button-placeholder",
+            connectWith: ".red-ui-sidebar-tab-bar",
+            start: function(event, ui) {
+                // Remove the tooltip so it doesn't display unexpectedly whilst dragging
+                const tabId = ui.item.attr('data-tab-id');
+                const options = knownTabs[tabId];
+                options.tabButtonTooltip.delete()
+                draggingTabButton = true
+                tabBar.css('z-index','inherit')
+            },
+            stop: function(event, ui) {
+                // Restore the tooltip
+                const tabId = ui.item.attr('data-tab-id');
+                const options = knownTabs[tabId];
+                options.tabButtonTooltip.delete()
+                options.tabButtonTooltip = RED.popover.tooltip(options.tabButton, options.name, options.action);
+                // Save the sidebar state
+                exportSidebarState()
+                tabBar.css('z-index','')
+            },
+            receive: function(event, ui) {
+                // Tab has been moved from one sidebar to another
+                const src = sidebars[ui.sender.data('sidebar')]
+                const dest = sidebars[$(this).data('sidebar')]
+                const tabId = ui.item.attr('data-tab-id');
+                moveTab(tabId, src, dest)
+                if (ui.item.hasClass('selected')) {
+                    const firstTab = src.tabBar.find('button').first().attr('data-tab-id');
+                    if (firstTab) {
+                        RED.sidebar.show(firstTab);
                     }
-
-                    var newChartRight = sidebarSeparator.chartRight-d;
-                    $("#red-ui-workspace").css("right",newChartRight);
-                    $("#red-ui-editor-stack").css("right",newChartRight+1);
-                    $("#red-ui-sidebar").width(newSidebarWidth);
-
-                    sidebar_tabs.resize();
-                    RED.events.emit("sidebar:resize");
-                },
-                stop:function(event,ui) {
-                    sidebarSeparator.dragging = false;
-                    if (sidebarSeparator.closing) {
-                        $("#red-ui-sidebar").removeClass("closing");
-                        RED.menu.setSelected("menu-item-sidebar",false);
-                        if ($("#red-ui-sidebar").width() < 180) {
-                            $("#red-ui-sidebar").width(180);
-                            $("#red-ui-workspace").css("right",187);
-                            $("#red-ui-editor-stack").css("right",188);
-                        }
-                    }
-                    $("#red-ui-sidebar-separator").css("left","auto");
-                    $("#red-ui-sidebar-separator").css("right",($("#red-ui-sidebar").width()+2)+"px");
+                }
+                RED.sidebar.show(tabId)
+            }
+        })
+        // $(window).on("resize", function () {
+        //     const lastChild = tabBar.children().last();
+        //     if (lastChild.length > 0) {
+        //         const tabBarHeight = tabBar.height();
+        //         const lastChildBottom = lastChild.position().top + lastChild.outerHeight();
+        //         if (lastChildBottom > tabBarHeight) {
+        //             console.log('overflow')
+        //         }
+        //     }
+        // })
+        return tabBar
+    }
+    function setupSidebarSeparator(sidebar) {
+        const separator = $('<div class="red-ui-sidebar-separator"></div>');
+        separator.attr('id', sidebar.container.attr('id') + '-separator')
+        $('<div class="red-ui-sidebar-shade hide"></div>').appendTo(separator);
+        $('<div class="red-ui-sidebar-separator-handle"></div>').appendTo(separator);
+        let scaleFactor = 1;
+        if (sidebar.direction === 'right') {
+            separator.insertBefore(sidebar.container);
+        } else if (sidebar.direction === 'left') {
+            scaleFactor = -1;
+            separator.insertAfter(sidebar.container);
+        }
+        // Track sidebar state whilst dragging
+        const sidebarSeparator = {}
+        separator.draggable({
+            axis: "x",
+            start:function(event,ui) {
+                sidebarSeparator.closing = false;
+                sidebarSeparator.opening = false;
+                // var winWidth = $("#red-ui-editor").width();
+                sidebarSeparator.start = ui.position.left;
+                sidebarSeparator.width = sidebar.container.width();
+                sidebarSeparator.chartWidth = $("#red-ui-workspace").width();
+                sidebarSeparator.dragging = true;
+
+                if (!RED.menu.isSelected(sidebar.menuToggle)) {
+                    sidebarSeparator.opening = true;
+                    sidebar.container.width(0);
+                    RED.menu.setSelected(sidebar.menuToggle,true);
                     RED.events.emit("sidebar:resize");
                 }
-        });
+                sidebarSeparator.width = sidebar.container.width();
+            },
+            drag: function(event,ui) {
+                var d = scaleFactor * (ui.position.left-sidebarSeparator.start);
 
-        var sidebarControls = $('<div class="red-ui-sidebar-control-right"><i class="fa fa-chevron-right"</div>').appendTo($("#red-ui-sidebar-separator"));
-        sidebarControls.on("click", function() {
-            sidebarControls.hide();
-            RED.menu.toggleSelected("menu-item-sidebar");
-        })
-        $("#red-ui-sidebar-separator").on("mouseenter", function() {
-            if (!sidebarSeparator.dragging) {
-                if (RED.menu.isSelected("menu-item-sidebar")) {
-                    sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left");
+                var newSidebarWidth = sidebarSeparator.width - d;
+                if (newSidebarWidth > sidebar.maximumWidth) {
+                    newSidebarWidth = sidebar.maximumWidth;
+                    d = sidebarSeparator.width - sidebar.maximumWidth;
+                    ui.position.left = sidebarSeparator.start + scaleFactor * d;
+                }
+                
+                if (newSidebarWidth > sidebar.minimumWidth) {
+                    if (sidebarSeparator.chartWidth + d < 200) {
+                        // Chart is now too small, but we have room to resize the sidebar
+                        d += (200 - (sidebarSeparator.chartWidth + d));
+                        newSidebarWidth = sidebarSeparator.width - d;
+                        ui.position.left = sidebarSeparator.start + scaleFactor * d;
+                    }
+                } else if (newSidebarWidth < sidebar.minimumWidth) {
+                    if (newSidebarWidth > 100) {
+                        newSidebarWidth = sidebar.minimumWidth
+                        sidebarSeparator.closing = false
+                    } else {
+                        newSidebarWidth = 0
+                        sidebarSeparator.closing = true
+                    }
                 } else {
-                    sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left");
+                    sidebarSeparator.closing = false
                 }
-                sidebarControls.toggle("slide", { direction: "right" }, 200);
-            }
-        })
-        $("#red-ui-sidebar-separator").on("mouseleave", function() {
-            if (!sidebarSeparator.dragging) {
-                sidebarControls.stop(false,true);
-                sidebarControls.hide();
+                sidebar.container.width(newSidebarWidth);
+                ui.position.left -= scaleFactor * d
+
+                // sidebar.tabs.resize();
+                RED.events.emit("sidebar:resize");
+            },
+            stop:function(event,ui) {
+                sidebarSeparator.dragging = false;
+                if (sidebarSeparator.closing) {
+                    sidebar.container.removeClass("closing");
+                    if (sidebar.menuToggle) {
+                        RED.menu.setSelected(sidebar.menuToggle,false);
+                    }
+                    sidebar.container.hide()
+                    sidebar.separator.hide()
+                    if (sidebar.container.width() < sidebar.minimumWidth) {
+                        sidebar.container.width(sidebar.defaultWidth);
+                    }
+                }
+                RED.events.emit("sidebar:resize");
             }
         });
+        return separator
     }
 
-    function toggleSidebar(state) {
+    function toggleSidebar(sidebar, state) {
         if (!state) {
-            $("#red-ui-main-container").addClass("red-ui-sidebar-closed");
+            sidebar.container.hide()
+            sidebar.separator.hide()
+            sidebar.tabBar.find('button').removeClass('selected')
         } else {
-            $("#red-ui-main-container").removeClass("red-ui-sidebar-closed");
-            sidebar_tabs.resize();
+            sidebar.container.show()
+            sidebar.separator.show()
         }
         RED.events.emit("sidebar:resize");
     }
 
     function showSidebar(id, skipShowSidebar) {
         if (id === ":first") {
-            id = lastSessionSelectedTab || RED.settings.get("editor.sidebar.order",["info", "help", "version-control", "debug"])[0]
+            // Show the last selected tab for each sidebar
+            Object.keys(sidebars).forEach(function(sidebarKey) {
+                const sidebar = sidebars[sidebarKey];
+                let lastTabId = lastSessionSelectedTabs[sidebarKey];
+                if (!lastTabId) {
+                    lastTabId = sidebar.tabBar.children('button').first().attr('data-tab-id');
+                }
+                showSidebar(lastTabId, true)
+            })
+            return
         }
         if (id) {
-            if (!containsTab(id) && knownTabs[id]) {
-                sidebar_tabs.addTab(knownTabs[id]);
-            }
-            sidebar_tabs.activateTab(id);
-            if (!skipShowSidebar && !RED.menu.isSelected("menu-item-sidebar")) {
-                RED.menu.setSelected("menu-item-sidebar",true);
+            const tabOptions = knownTabs[id];
+            if (tabOptions) {
+                const targetSidebar = tabOptions.target === 'secondary' ? sidebars.secondary : sidebars.primary;
+                targetSidebar.content.children().hide();
+                targetSidebar.footer.children().hide();
+                if (tabOptions.onchange) {
+                    tabOptions.onchange.call(tabOptions);
+                }
+                $(tabOptions.wrapper).show();
+                if (tabOptions.toolbar) {
+                    $(tabOptions.toolbar).show();
+                }
+                RED.settings.setLocal("last-sidebar-tab-" + targetSidebar.id, tabOptions.id)
+                targetSidebar.tabBar.find('button').removeClass('selected')
+                targetSidebar.tabBar.find('button[data-tab-id="'+id+'"]').addClass('selected')
+                targetSidebar.activeTab = id
+
+                if (!skipShowSidebar && !RED.menu.isSelected(targetSidebar.menuToggle)) {
+                    RED.menu.setSelected(targetSidebar.menuToggle,true);
+                }
             }
         }
     }
 
     function containsTab(id) {
-        return sidebar_tabs.contains(id);
+        return sidebars.primary.tabs.contains(id);
     }
 
-    function init () {
-        setupSidebarSeparator();
-        sidebar_tabs = RED.tabs.create({
-            element: $('<ul id="red-ui-sidebar-tabs"></ul>').appendTo("#red-ui-sidebar"),
-            onchange:function(tab) {
-                $("#red-ui-sidebar-content").children().hide();
-                $("#red-ui-sidebar-footer").children().hide();
-                if (tab.onchange) {
-                    tab.onchange.call(tab);
-                }
-                $(tab.wrapper).show();
-                if (tab.toolbar) {
-                    $(tab.toolbar).show();
-                }
-                RED.settings.setLocal("last-sidebar-tab", tab.id)
-            },
-            onremove: function(tab) {
-                $(tab.wrapper).hide();
-                if (tab.onremove) {
-                    tab.onremove.call(tab);
-                }
-            },
-            // minimumActiveTabWidth: 70,
-            collapsible: true,
-            onreorder: function(order) {
-                RED.settings.set("editor.sidebar.order",order);
-            },
-            order: RED.settings.get("editor.sidebar.order",["info", "help", "version-control", "debug"])
-            // scrollable: true
-        });
+    function setupSidebar(sidebar) {
+        sidebar.container.addClass("red-ui-sidebar").addClass('red-ui-sidebar-' + sidebar.direction);
+        sidebar.container.width(sidebar.defaultWidth);
+        sidebar.separator = setupSidebarSeparator(sidebar);
+        sidebar.tabBar = setupSidebarTabs(sidebar)
+        sidebar.content = $('<div class="red-ui-sidebar-content"></div>').appendTo(sidebar.container);
+        sidebar.footer =  $('<div class="red-ui-sidebar-footer"></div>').appendTo(sidebar.container);
+        sidebar.shade = $('<div class="red-ui-sidebar-shade hide"></div>').appendTo(sidebar.container);
 
-        $('<div id="red-ui-sidebar-content"></div>').appendTo("#red-ui-sidebar");
-        $('<div id="red-ui-sidebar-footer" class="red-ui-component-footer"></div>').appendTo("#red-ui-sidebar");
-        $('<div id="red-ui-sidebar-shade" class="hide"></div>').appendTo("#red-ui-sidebar");
+    }
+    function init () {
+        sidebars.primary.container = $("#red-ui-sidebar");
+        setupSidebar(sidebars.primary)
+        sidebars.secondary.container = $("#red-ui-sidebar-left");
+        setupSidebar(sidebars.secondary)
 
         RED.actions.add("core:toggle-sidebar",function(state){
             if (state === undefined) {
-                RED.menu.toggleSelected("menu-item-sidebar");
+                RED.menu.toggleSelected(sidebars.primary.menuToggle);
             } else {
-                toggleSidebar(state);
+                toggleSidebar(sidebars.primary, state);
+            }
+        });
+        RED.actions.add("core:toggle-palette", function(state) {
+            if (state === undefined) {
+                RED.menu.toggleSelected(sidebars.secondary.menuToggle);
+            } else {
+                toggleSidebar(sidebars.secondary, state);
             }
         });
-        RED.popover.tooltip($("#red-ui-sidebar-separator").find(".red-ui-sidebar-control-right"),RED._("keyboard.toggleSidebar"),"core:toggle-sidebar");
-
-        lastSessionSelectedTab = RED.settings.getLocal("last-sidebar-tab")
 
-        RED.sidebar.info.init();
-        RED.sidebar.help.init();
-        RED.sidebar.config.init();
-        RED.sidebar.context.init();
-        // hide info bar at start if screen rather narrow...
-        if ($("#red-ui-editor").width() < 600) { RED.menu.setSelected("menu-item-sidebar",false); }
+        // Remember the last selected tab for each sidebar before
+        // the tabs are readded causing the state to get updated
+        Object.keys(sidebars).forEach(function(sidebarKey) {
+            lastSessionSelectedTabs[sidebarKey] = RED.settings.getLocal("last-sidebar-tab-" + sidebarKey)
+        })
     }
 
     return {
@@ -31808,7 +33164,6 @@ RED.palette = (function() {
     ];
 
     var categoryContainers = {};
-    var sidebarControls;
 
     let paletteState = { filter: "", collapsed: [] };
 
@@ -32085,6 +33440,7 @@ RED.palette = (function() {
                 width: "300px",
                 content: "hi",
                 delay: { show: 750, hide: 50 }
+                // direction: "left"
             });
 
             d.data('popover',popover);
@@ -32107,7 +33463,8 @@ RED.palette = (function() {
                 revert: 'invalid',
                 revertDuration: 200,
                 containment:'#red-ui-main-container',
-                start: function() {
+                start: function(e, ui) {
+                    ui.helper.css('z-index', 1000);
                     dropEnabled = !(RED.nodes.workspace(RED.workspaces.active())?.locked);
                     paletteWidth = $("#red-ui-palette").width();
                     paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top;
@@ -32133,7 +33490,9 @@ RED.palette = (function() {
                 },
                 drag: function(e,ui) {
                     var paletteNode = getPaletteNode(nt);
-                    ui.originalPosition.left = paletteNode.offset().left;
+                    console.log(ui.originalPosition.left, paletteNode.offset().left)
+                    // ui.originalPosition.left = paletteNode.offset().left;
+                    // console.log(paletteNode.offset())
                     if (dropEnabled) {
                         mouseX = ui.position.left - paletteWidth + (ui.helper.width()/2) + chart.scrollLeft();
                         mouseY = ui.position.top - paletteTop + (ui.helper.height()/2) + chart.scrollTop() + 10;
@@ -32382,11 +33741,24 @@ RED.palette = (function() {
 
     function init() {
 
+        const content = $('<div id="red-ui-palette" class="red-ui-sidebar-tab-content">')
+        const toolbar = $('<div></div>');
+        RED.sidebar.addTab({
+            target: 'secondary',
+            id: "palette",
+            label: "Palette",
+            name: "Palette",
+            icon: "red/images/subflow_tab.svg",
+            content,
+            toolbar,
+            pinned: true,
+            enableOnEdit: true
+        });
+
         $('<img src="red/images/spin.svg" class="red-ui-palette-spinner hide"/>').appendTo("#red-ui-palette");
         $('<div id="red-ui-palette-search" class="red-ui-palette-search hide"><input type="text" data-i18n="[placeholder]palette.filter"></input></div>').appendTo("#red-ui-palette");
         $('<div id="red-ui-palette-container" class="red-ui-palette-scroll hide"></div>').appendTo("#red-ui-palette");
-        $('<div class="red-ui-component-footer"></div>').appendTo("#red-ui-palette");
-        $('<div id="red-ui-palette-shade" class="hide"></div>').appendTo("#red-ui-palette");
+        // $('<div id="red-ui-palette-shade" class="hide"></div>').appendTo("#red-ui-palette");
 
         $("#red-ui-palette > .red-ui-palette-spinner").show();
 
@@ -32445,19 +33817,6 @@ RED.palette = (function() {
             }
         });
 
-        sidebarControls = $('<div class="red-ui-sidebar-control-left"><i class="fa fa-chevron-left"></i></div>').appendTo($("#red-ui-palette"));
-        RED.popover.tooltip(sidebarControls,RED._("keyboard.togglePalette"),"core:toggle-palette");
-
-        sidebarControls.on("click", function() {
-            RED.menu.toggleSelected("menu-item-palette");
-        })
-        $("#red-ui-palette").on("mouseenter", function() {
-            sidebarControls.toggle("slide", { direction: "left" }, 200);
-        })
-        $("#red-ui-palette").on("mouseleave", function() {
-            sidebarControls.stop(false,true);
-            sidebarControls.hide();
-        })
         var userCategories = [];
         if (RED.settings.paletteCategories) {
             userCategories = RED.settings.paletteCategories;
@@ -32479,7 +33838,7 @@ RED.palette = (function() {
             }
         });
 
-        var paletteFooterButtons = $('<span class="button-group"></span>').appendTo("#red-ui-palette .red-ui-component-footer");
+        var paletteFooterButtons = $('<span class="button-group"></span>').appendTo(toolbar);
         var paletteCollapseAll = $('<button type="button" class="red-ui-footer-button"><i class="fa fa-angle-double-up"></i></button>').appendTo(paletteFooterButtons);
         paletteCollapseAll.on("click", function(e) {
             e.preventDefault();
@@ -32502,13 +33861,7 @@ RED.palette = (function() {
         });
         RED.popover.tooltip(paletteExpandAll,RED._('palette.actions.expand-all'));
 
-        RED.actions.add("core:toggle-palette", function(state) {
-            if (state === undefined) {
-                RED.menu.toggleSelected("menu-item-palette");
-            } else {
-                togglePalette(state);
-            }
-        });
+        
 
         try {
             paletteState = JSON.parse(RED.settings.getLocal("palette-state") || '{"filter":"", "collapsed": []}');
@@ -32526,18 +33879,6 @@ RED.palette = (function() {
         }, 10000)
     }
 
-    function togglePalette(state) {
-        if (!state) {
-            $("#red-ui-main-container").addClass("red-ui-palette-closed");
-            sidebarControls.hide();
-            sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left");
-        } else {
-            $("#red-ui-main-container").removeClass("red-ui-palette-closed");
-            sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left");
-        }
-        setTimeout(function() { $(window).trigger("resize"); } ,200);
-    }
-
     function getCategories() {
         var categories = [];
         $("#red-ui-palette-container .red-ui-palette-category").each(function(i,d) {
@@ -32685,9 +34026,10 @@ RED.sidebar.info = (function() {
 
         RED.sidebar.addTab({
             id: "info",
+            // target: "secondary",
             label: RED._("sidebar.info.label"),
             name: RED._("sidebar.info.name"),
-            iconClass: "fa fa-info",
+            icon: "red/images/explorer.svg",
             action:"core:show-info-tab",
             content: content,
             pinned: true,
@@ -32723,6 +34065,8 @@ RED.sidebar.info = (function() {
             tips.stop();
         }
 
+        resizeStack();
+
     }
 
     function show() {
@@ -40019,6 +41363,9 @@ RED.editor = (function() {
             changes.inputLabels = node.inputLabels;
             node.inputLabels = newValue;
             changed = true;
+            if (node.type === "subflow") {
+                node.in[0].dirty = true
+            }
         }
         hasNonBlankLabel = false;
         newValue = new Array(node.outputs);
@@ -45668,6 +47015,8 @@ RED.eventLog = (function() {
     }
 
     function handleWindowResize() {
+        let sidebarWidth = $("#red-ui-sidebar").is(":visible") ? $("#red-ui-sidebar").outerWidth() + $("#red-ui-sidebar-separator").outerWidth() : 0;
+        $("#red-ui-editor-stack").css('right', sidebarWidth + $("#red-ui-sidebar-tab-bar").outerWidth() + 1);
         if (stack.length > 0) {
             var tray = stack[stack.length-1];
             if (tray.options.maximized || tray.width > $("#red-ui-editor-stack").position().left-8) {
@@ -48829,6 +50178,12 @@ RED.search = (function() {
                     $('<div>',{class:"red-ui-search-result-node-type"}).text(node.type).appendTo(contentDiv);
                     $('<div>',{class:"red-ui-search-result-node-id"}).text(node.id).appendTo(contentDiv);
 
+                    div.on("mouseover", function(evt) {
+                        if ( node.z == RED.workspaces.active() ) {
+                            RED.view.reveal(node.id)
+                        }
+                    });
+                    
                     div.on("click", function(evt) {
                         evt.preventDefault();
                         currentIndex = i;
@@ -48907,8 +50262,7 @@ RED.search = (function() {
             $("#red-ui-header-shade").show();
             $("#red-ui-editor-shade").show();
             $("#red-ui-palette-shade").show();
-            $("#red-ui-sidebar-shade").show();
-            $("#red-ui-sidebar-separator").hide();
+            $(".red-ui-sidebar-shade").show();
 
             if (dialog === null) {
                 createDialog();
@@ -48932,8 +50286,7 @@ RED.search = (function() {
             $("#red-ui-header-shade").hide();
             $("#red-ui-editor-shade").hide();
             $("#red-ui-palette-shade").hide();
-            $("#red-ui-sidebar-shade").hide();
-            $("#red-ui-sidebar-separator").show();
+            $(".red-ui-sidebar-shade").hide();
             if (dialog !== null) {
                 dialog.slideUp(200,function() {
                     searchInput.searchBox('value','');
@@ -49033,7 +50386,7 @@ RED.search = (function() {
         $("#red-ui-header-shade").on('mousedown',hide);
         $("#red-ui-editor-shade").on('mousedown',hide);
         $("#red-ui-palette-shade").on('mousedown',hide);
-        $("#red-ui-sidebar-shade").on('mousedown',hide);
+        $(".red-ui-sidebar-shade").on('mousedown',hide);
 
         $("#red-ui-view-searchtools-close").on("click", function close() {
             clearActiveSearch();
@@ -49295,6 +50648,11 @@ RED.search = (function() {
                     { onselect: 'core:show-export-dialog', label: RED._("menu.label.export") }
                 )
             }
+            if (hasSelection && canEdit) {
+                menuItems.push(
+                    { onselect: 'core:convert-to-subflow', label: RED._("menu.label.selectionToSubflow") }
+                )
+            }
             menuItems.push(
                 { onselect: 'core:select-all-nodes', label: RED._("keyboard.selectAll") }
             )
@@ -49519,8 +50877,7 @@ RED.actionList = (function() {
             $("#red-ui-header-shade").show();
             $("#red-ui-editor-shade").show();
             $("#red-ui-palette-shade").show();
-            $("#red-ui-sidebar-shade").show();
-            $("#red-ui-sidebar-separator").hide();
+            $(".red-ui-sidebar-shade").show();
             if (dialog === null) {
                 createDialog();
             }
@@ -49554,8 +50911,7 @@ RED.actionList = (function() {
             $("#red-ui-header-shade").hide();
             $("#red-ui-editor-shade").hide();
             $("#red-ui-palette-shade").hide();
-            $("#red-ui-sidebar-shade").hide();
-            $("#red-ui-sidebar-separator").show();
+            $(".red-ui-sidebar-shade").hide();
             if (dialog !== null) {
                 dialog.slideUp(200,function() {
                     searchInput.searchBox('value','');
@@ -49587,7 +50943,7 @@ RED.actionList = (function() {
         $("#red-ui-header-shade").on('mousedown',hide);
         $("#red-ui-editor-shade").on('mousedown',hide);
         $("#red-ui-palette-shade").on('mousedown',hide);
-        $("#red-ui-sidebar-shade").on('mousedown',hide);
+        $(".red-ui-sidebar-shade").on('mousedown',hide);
     }
 
     return {
@@ -52409,7 +53765,7 @@ RED.userSettings = (function() {
                 });
                 settingsContent.i18n();
                 settingsTabs.activateTab("red-ui-settings-tab-"+(initialTab||'view'))
-                $("#red-ui-sidebar-shade").show();
+                $(".red-ui-sidebar-shade").show();
             },
             close: function() {
                 settingsVisible = false;
@@ -52418,7 +53774,7 @@ RED.userSettings = (function() {
                         pane.close();
                     }
                 });
-                $("#red-ui-sidebar-shade").hide();
+                $(".red-ui-sidebar-shade").hide();
 
             },
             show: function() {}
@@ -55211,7 +56567,7 @@ RED.projects.settings = (function() {
                 });
                 settingsContent.i18n();
                 settingsTabs.activateTab("red-ui-project-settings-tab-"+(initialTab||'main'))
-                $("#red-ui-sidebar-shade").show();
+                $(".red-ui-sidebar-shade").show();
             },
             close: function() {
                 settingsVisible = false;
@@ -55220,7 +56576,7 @@ RED.projects.settings = (function() {
                         pane.close();
                     }
                 });
-                $("#red-ui-sidebar-shade").hide();
+                $(".red-ui-sidebar-shade").hide();
 
             },
             show: function() {}
@@ -59234,10 +60590,15 @@ RED.touch.radialMenu = (function() {
 
     function listTour() {
         return [
+            {
+                id: "5_0",
+                label: "5.0",
+                path: "./tours/welcome.js"
+            },
             {
                 id: "4_1",
                 label: "4.1",
-                path: "./tours/welcome.js"
+                path: "./tours/4.1/welcome.js"
             },
             {
                 id: "4_0",