@node-red/editor-client 4.1.2 → 5.0.0-beta.1

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,35 @@ 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.info.outliner.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()
+
+            if (RED.settings.theme("multiplayer.enabled",false)) {
+                RED.multiplayer.init()
+            }
+            RED.comms.connect();
 
-        $("#red-ui-main-container").show();
+            $("#red-ui-main-container").show();
+            RED.events.emit("sidebar:resize")
 
-        loadPluginList();
+            loadPluginList();
+        });
     }
 
 
@@ -929,13 +940,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);
@@ -13203,7 +13219,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;
@@ -13293,6 +13309,13 @@ RED.panels = (function() {
         $(children[1]).addClass("red-ui-panel");
 
         var separator = $('<div class="red-ui-panels-separator"></div>').insertAfter(children[0]);
+        if (options.invisibleSeparator) {
+            if (!vertical) {
+                throw new Error("invisibleSeparator option is only valid for vertical panels");
+            }
+            separator.addClass("red-ui-panels-separator-invisible");
+            $('<div class="red-ui-panels-separator-handle"></div>').appendTo(separator)
+        }
         var startPosition;
         var panelSizes = [];
         var modifiedSizes = false;
@@ -14869,7 +14892,6 @@ RED.tabs = (function() {
                     ul.find("li.red-ui-tab.active .red-ui-tab-label").css({paddingLeft:""})
                 }
             }
-
         }
 
         ul.find("li.red-ui-tab a")
@@ -15369,7 +15391,8 @@ RED.tabs = (function() {
                     pinnedButtons["__menu__"].appendTo(collapsedButtonsRow);
                     updateTabWidths();
                 }
-            }
+            },
+            container: wrapper
         }
         return tabAPI;
     }
@@ -17932,13 +17955,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);
@@ -19752,11 +19775,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() {
@@ -22683,11 +22706,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 = {};
 
@@ -22964,6 +23005,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 });
@@ -23008,8 +23067,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();
@@ -23026,11 +23086,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() {
@@ -23056,6 +23120,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);
@@ -23105,33 +23183,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++) {
@@ -23150,10 +23288,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")
@@ -23245,22 +23440,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 move = -(evt.originalEvent.detail) || evt.originalEvent.wheelDelta;
-                if (move <= 0) { zoomOut(); }
-                else { zoomIn(); }
+                
+                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();
+
+                // 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);
             }
         });
 
@@ -23431,6 +23798,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);
@@ -23495,6 +23868,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)});
 
@@ -23610,6 +23984,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)
@@ -23887,12 +24264,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) {
@@ -24424,6 +24815,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;
@@ -24438,18 +24853,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
         }
 
@@ -24793,6 +25198,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) {
@@ -25124,39 +25535,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;
@@ -25861,6 +26687,9 @@ 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;
@@ -26290,6 +27119,9 @@ RED.view = (function() {
             (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
                      (
@@ -26446,6 +27278,9 @@ RED.view = (function() {
     }
     function nodeMouseDown(d) {
         if (RED.view.DEBUG) { console.warn("nodeMouseDown", mouse_mode,d); }
+        if (spacebarPressed) {
+            return
+        }
         clearSuggestedFlow()
         focusView();
         RED.contextMenu.hide();
@@ -26624,6 +27459,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)) {
@@ -26797,6 +27635,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) {
@@ -27256,6 +28097,15 @@ RED.view = (function() {
         eventLayer.attr("transform","scale("+scaleFactor+")");
         outer.attr("width", space_width*scaleFactor).attr("height", space_height*scaleFactor);
 
+        // 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
@@ -29616,7 +30466,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");
 
@@ -29638,7 +30488,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();
@@ -29707,7 +30557,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 = {};
 
@@ -29907,139 +31033,205 @@ 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
+            if (chartSize[0] > 0 && chartSize[1] > 0) { 
+                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() + 2,
+                "right": 4,
+                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")
+            navVis = navBox.append("svg:g")
+
+            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")
+            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,
@@ -31507,19 +32699,65 @@ 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,
+            defaultTopHeight: 0.7
+        },
+        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,
+            defaultTopHeight: 1
+        }
+    }
+    const defaultSidebarConfiguration = {
+        primary: [ ['info','help','config','context'], ['debug'] ],
+        secondary: [ ['explorer','palette'], [] ]
+    }
+
+    const knownTabs = {};
+
+    function exportSidebarState () {
+        const state = {
+            primary: [[], []],
+            secondary: [[], []]
+        }
+        function getTabButtons(tabBar) {
+            const result = []
+            tabBar.children('button').each(function() {
+                const tabId = $(this).attr('data-tab-id');
+                if (tabId) {
+                    result.push(tabId);
+                }
+            })
+            return result
+        }
+        state.primary[0] = getTabButtons(sidebars.primary.tabBars.top.container);
+        state.primary[1] = getTabButtons(sidebars.primary.tabBars.bottom.container);
+        state.secondary[0] = getTabButtons(sidebars.secondary.tabBars.top.container);
+        state.secondary[1] = getTabButtons(sidebars.secondary.tabBars.bottom.container);
+
+        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;
@@ -31536,10 +32774,55 @@ 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
+        let savedState = RED.settings.get('editor.sidebar.state', defaultSidebarConfiguration)
+        if (true || typeof savedState.primary[0] === 'string' || typeof savedState.secondary[0] === 'string') {
+            // This is a beta.0 format. Reset it for beta.1
+            savedState = defaultSidebarConfiguration
+            RED.settings.set('editor.sidebar.state', savedState)
+        }
+        let targetSidebar = null
+        let targetSection = null
+        if (savedState) {
+            let sidebarState
+            if (savedState.secondary[0].includes(options.id)) {
+                options.target = 'secondary'
+                sidebarState = savedState.secondary[0]
+                targetSidebar = sidebars.secondary
+                targetSection = 'top'
+            } else if (savedState.secondary[1].includes(options.id)) {
+                options.target = 'secondary'
+                sidebarState = savedState.secondary[1]
+                targetSidebar = sidebars.secondary
+                targetSection = 'bottom'
+            } else if (savedState.primary[0].includes(options.id)) {
+                options.target = 'primary'
+                sidebarState = savedState.primary[0]
+                targetSidebar = sidebars.primary
+                targetSection = 'top'
+            } else if (savedState.primary[1].includes(options.id)) {
+                options.target = 'primary'
+                sidebarState = savedState.primary[1]
+                targetSidebar = sidebars.primary
+                targetSection = 'bottom'              
+            }
+            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)
+            }
+        }
+
+
+        targetSidebar = targetSidebar || (options.target === 'secondary' ? sidebars.secondary : sidebars.primary);
+        targetSection = targetSection || 'top'
+        options.targetSection = targetSection;
 
         delete options.closeable;
 
-        options.wrapper = $('<div>',{style:"height:100%"}).appendTo("#red-ui-sidebar-content")
+        options.wrapper = $('<div>',{style:"height:100%"}).appendTo(targetSidebar.sections[targetSection].content)
         options.wrapper.append(options.content);
         options.wrapper.hide();
 
@@ -31548,11 +32831,12 @@ RED.sidebar = (function() {
         }
 
         if (options.toolbar) {
-            $("#red-ui-sidebar-footer").append(options.toolbar);
+            targetSidebar.sections[targetSection].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,
@@ -31565,208 +32849,543 @@ 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) {
+            // Append to end
+            targetSidebar.tabBars[targetSection].addButton(options.tabButton)
+        } else {
+            // Insert before the item at targetTabButtonIndex
+            targetSidebar.tabBars[targetSection].addButton(options.tabButton, 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.tabBars[options.targetSection].active === options.id && RED.menu.isSelected(targetSidebar.menuToggle)) {
+                RED.menu.setSelected(targetSidebar.menuToggle, false);
+            } else {
+                RED.sidebar.show(options.id)
+            }
+        })
+        if (targetSidebar.sections[targetSection].content.children().length === 1) {
+            RED.sidebar.show(options.id)
+        }
+        targetSidebar.resizeSidebarTabBar()
     }
 
     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 moveTab(id, srcSidebar, srcPosition, targetSidebar, targetPosition) {
+        const options = knownTabs[id];
+        options.target = targetSidebar.id;
+        options.targetSection = targetPosition;
 
-    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;
-                    }
+        $(options.wrapper).appendTo(targetSidebar.sections[targetPosition].content);
+        if (options.toolbar) {
+            targetSidebar.sections[targetPosition].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 (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 (targetSidebar.sections[targetPosition].content.children().length === 1) {
+            RED.sidebar.show(options.id)
+        }
+        if (srcSidebar.sections[srcPosition].content.children().length === 0 && srcPosition === 'bottom') {
+            srcSidebar.hideSection(srcPosition)
+        } else if (targetSidebar.sections[targetPosition].hidden) {
+            targetSidebar.showSection(targetPosition)
+        }
+    }
 
-                    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;
+    let draggingTabButton = false
+
+    function setupSidebarTabs(sidebar) {
+        const tabBar = $('<div class="red-ui-sidebar-tab-bar"></div>').addClass('red-ui-sidebar-' + sidebar.direction);
+        if (sidebar.direction === 'right') {
+            tabBar.insertAfter(sidebar.container);
+        } else if (sidebar.direction === 'left') {
+            tabBar.insertBefore(sidebar.container);
+        }
+
+        // TODO: make this an API object, not just a jQuery object
+        sidebar.tabBars = {
+            top: setupTabSection(sidebar, tabBar, 'top'),
+            bottom: setupTabSection(sidebar, tabBar, 'bottom')
+        }
+        sidebar.tabBar = sidebar.tabBars.top.container;
+        sidebar.resizeSidebarTabBar = function () {
+            sidebar.tabBars.top.resizeSidebarTabBar();
+            sidebar.tabBars.bottom.resizeSidebarTabBar();
+        }
+        sidebar.hideSection = function (position) {
+            sidebar.sections.bottom.container.hide()
+            sidebar.sections.bottom.hidden = true
+            sidebar.sections.top.container.css('flex-grow', '1')
+            sidebar.tabBars.top.container.css('flex-grow', '1')
+            sidebar.tabBars.bottom.container.css('flex-grow', '0')
+            sidebar.tabBars.bottom.container.css('height', '60px')
+            
+            sidebar.resizeSidebar()
+        }
+        sidebar.showSection = function (position) {
+            sidebar.sections.bottom.container.show()
+            sidebar.sections.bottom.hidden = false
+            sidebar.sections.top.container.css('flex-grow', '0')
+            sidebar.sections.top.container.css('height', '70%')
+            sidebar.tabBars.top.container.css('flex-grow', '')
+            sidebar.tabBars.bottom.container.css('flex-grow', '')
+            sidebar.tabBars.bottom.container.css('height', '')
+
+            sidebar.resizeSidebar()
+        }
+    }
+
+    function setupTabSection(sidebar, tabBar, position) {
+        const tabBarButtonsContainer = $('<div class="red-ui-sidebar-tab-bar-buttons"></div>').appendTo(tabBar);
+        const tabOverflowButton = $('<button class="red-ui-sidebar-tab-bar-overflow-button"><i class="fa fa-ellipsis-h"></i></button>').appendTo(tabBarButtonsContainer);
+        tabOverflowButton.hide()
+        tabOverflowButton.on('click', function(evt) {
+            try {
+                const menuOptions = []
+                tabBarButtonsContainer.find('button:not(.red-ui-sidebar-tab-bar-overflow-button)').each(function () {
+                    if ($(this).is(':visible')) {
+                        return
+                    }
+                    const tabId = $(this).attr('data-tab-id')
+                    const tabOptions = knownTabs[tabId]
+                    menuOptions.push({
+                        label: tabOptions.name,
+                        onselect: function() {
+                            RED.sidebar.show(tabId)
                         }
-                    } else if (newSidebarWidth > 150 && (sidebarSeparator.closing || sidebarSeparator.opening)) {
-                        sidebarSeparator.closing = false;
-                        $("#red-ui-sidebar").removeClass("closing");
+                    })
+                })
+                if (menuOptions.length === 0) {
+                    return
+                }
+                const menu = RED.menu.init({ options: menuOptions });
+                menu.attr("id",sidebar.container.attr('id')+"-menu");
+                menu.css({
+                    position: "absolute"
+                })
+                menu.appendTo("body");
+                var elementPos = tabOverflowButton.offset();
+                menu.css({
+                    top: (elementPos.top+tabOverflowButton.height()- menu.height() - 10)+"px",
+                    left: (elementPos.left - menu.width() - 3)+"px"
+                })
+                $(".red-ui-menu.red-ui-menu-dropdown").hide();
+                setTimeout(() => {
+                    $(document).on("click.red-ui-sidebar-tabmenu", function(evt) {
+                        $(document).off("click.red-ui-sidebar-tabmenu");
+                        menu.remove();
+                    });
+                }, 0)
+                menu.show();
+            } catch (err) {
+                console.log(err)
+            }
+        })
+        tabBarButtonsContainer.data('sidebar', sidebar.id)
+        tabBarButtonsContainer.data('sidebar-position', position)
+        tabBarButtonsContainer.sortable({
+            distance: 10,
+            cancel: false,
+            items: "button:not(.red-ui-sidebar-tab-bar-overflow-button)",
+            placeholder: "red-ui-sidebar-tab-bar-button-placeholder",
+            connectWith: ".red-ui-sidebar-tab-bar-buttons",
+            start: function(event, ui) {
+                const tabId = ui.item.attr('data-tab-id');
+                const options = knownTabs[tabId];
+                options.tabButtonTooltip.delete()
+                draggingTabButton = true
+                tabBar.css('z-index','inherit')
+                $(".red-ui-sidebar-tab-bar").addClass("red-ui-sidebar-dragging-tab");
+            },
+            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','')
+                $(".red-ui-sidebar-tab-bar").removeClass("red-ui-sidebar-dragging-tab");
+            },
+            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 srcPosition = ui.sender.data('sidebar-position')
+                const destPosition = $(this).data('sidebar-position')
+                const tabId = ui.item.attr('data-tab-id');
+                moveTab(tabId, src, srcPosition, dest, destPosition);
+                if (ui.item.hasClass('selected')) {
+                    const firstTab = src.tabBars[srcPosition].container.find('button').first().attr('data-tab-id');
+                    if (firstTab) {
+                        RED.sidebar.show(firstTab);
                     }
+                }
+                src.resizeSidebarTabBar();
+                dest.resizeSidebarTabBar();
 
-                    var newChartRight = sidebarSeparator.chartRight-d;
-                    $("#red-ui-workspace").css("right",newChartRight);
-                    $("#red-ui-editor-stack").css("right",newChartRight+1);
-                    $("#red-ui-sidebar").width(newSidebarWidth);
+                RED.sidebar.show(tabId)
+            }
+        })
 
-                    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");
+        let hasHidden = false
+        const resizeSidebarTabBar  = function () {
+            let tabBarButtonsBottom = tabBarButtonsContainer.position().top + tabBarButtonsContainer.outerHeight();
+            const buttonHeight = tabOverflowButton.outerHeight()
+            // Find the last visible button
+            let bottomButton = tabBarButtonsContainer.children(":visible").last()
+            if (bottomButton.length === 0) {
+                // Nothing visible - bail out
+                return
+            }
+            if (tabBarButtonsBottom < bottomButton.position().top + buttonHeight * 1.5) {
+                tabOverflowButton.show()
+                let tabOverflowButtonBottom = tabOverflowButton.position().top + buttonHeight * 1.5;
+                while (tabBarButtonsBottom < tabOverflowButtonBottom) {
+                    const lastVisible = tabBarButtonsContainer.children(':not(".red-ui-sidebar-tab-bar-overflow-button"):visible').last()
+                    if (lastVisible.length === 0) {
+                        // Nothing left to hide
+                        break
+                    }
+                    lastVisible.hide()
+                    tabOverflowButtonBottom = tabOverflowButton.position().top + buttonHeight * 1.5;
+                }
+            } else {
+                const hiddenChildren = tabBarButtonsContainer.children(':not(".red-ui-sidebar-tab-bar-overflow-button"):hidden')
+                if (hiddenChildren.length > 0) {
+                    // We may be able to show some more buttons
+                    let tabOverflowButtonBottom = tabOverflowButton.position().top + buttonHeight * 2;
+                    let shownCount = 0
+                    while (tabBarButtonsBottom > tabOverflowButtonBottom + buttonHeight) {
+                        const firstHidden = tabBarButtonsContainer.children(':not(".red-ui-sidebar-tab-bar-overflow-button"):hidden').first()
+                        if (firstHidden.length === 0) {
+                            // Nothing left to show
+                            break
+                        }
+                        firstHidden.show()
+                        shownCount++
+                        tabOverflowButtonBottom = tabOverflowButton.position().top + buttonHeight * 2;
+                    }
+                    if (hiddenChildren.length - shownCount <= 0) {
+                        // We were able to show all of the hidden buttons
+                        // so hide the overflow button again
+                        tabOverflowButton.hide()
+                    }
+                }
+            }
+        }
+        return {
+            container: tabBarButtonsContainer,
+            addButton: function(button, position) {
+                if (position === undefined || position >= tabBarButtonsContainer.children().length) {
+                    button.insertBefore(tabOverflowButton);
+                } else {
+                    button.insertBefore(tabBarButtonsContainer.children().eq(position));
+                }
+            },
+            clearSelected: function() {
+                tabBarButtonsContainer.children('button').removeClass('selected')
+            },
+            resizeSidebarTabBar
+        }
+    }
+    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.tabBars.top.clearSelected()
+            sidebar.tabBars.bottom.clearSelected()
         } else {
-            $("#red-ui-main-container").removeClass("red-ui-sidebar-closed");
-            sidebar_tabs.resize();
+            sidebar.container.show()
+            sidebar.separator.show()
+            if (sidebar.tabBars.top.active) {
+                sidebar.tabBars.top.container.find('button[data-tab-id="'+sidebar.tabBars.top.active+'"]').addClass('selected')
+            }
+            if (sidebar.tabBars.bottom.active) {
+                sidebar.tabBars.bottom.container.find('button[data-tab-id="'+sidebar.tabBars.bottom.active+'"]').addClass('selected')
+            }
         }
         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.tabBars.top.container.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;
+                const targetSection = tabOptions.targetSection || 'top'
+                targetSidebar.sections[targetSection].content.children().hide();
+                targetSidebar.sections[targetSection].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)
+                // TODO: find which tabBar the button is in
+                targetSidebar.tabBars[targetSection].clearSelected()
+                targetSidebar.tabBars[targetSection].container.find('button[data-tab-id="'+id+'"]').addClass('selected')
+                targetSidebar.tabBars[targetSection].active = id
+
+                if (!skipShowSidebar && !RED.menu.isSelected(targetSidebar.menuToggle)) {
+                    RED.menu.setSelected(targetSidebar.menuToggle,true);
+                }
             }
         }
     }
 
     function containsTab(id) {
-        return sidebar_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)
+        return sidebars.primary.tabs.contains(id);
+    }
+
+    function setupSidebar(sidebar) {
+        // Get the appropriate height for the sidebar - as the sidebar will be hidden at this point in time, we need to use
+        // the main-container height as a decent proxy
+        const sidebarHeight = $("#red-ui-main-container").height();
+        sidebar.container.addClass("red-ui-sidebar").addClass('red-ui-sidebar-' + sidebar.direction);
+        sidebar.container.width(sidebar.defaultWidth);
+        if (sidebar.direction === 'right') {
+            $('<div>',{class:"red-ui-sidebar-shade hide"}).css("z-index", 0).appendTo(sidebar.container);
+        }
+        sidebar.sections = {};
+        sidebar.sections.top = {}
+        sidebar.sections.top.container = $('<div class="red-ui-sidebar-section red-ui-sidebar-section-top"></div>').appendTo(sidebar.container);
+        sidebar.sections.top.content = $('<div class="red-ui-sidebar-content"></div>').appendTo(sidebar.sections.top.container);
+        sidebar.sections.top.footer =  $('<div class="red-ui-sidebar-footer"></div>').appendTo(sidebar.sections.top.container);
+        sidebar.sectionsSeparator = $('<div class="red-ui-sidebar-tab-bar-separator"><div class="red-ui-sidebar-separator-handle"></div></div>').appendTo(sidebar.container);
+        sidebar.sections.bottom = {}
+        sidebar.sections.bottom.container = $('<div class="red-ui-sidebar-section red-ui-sidebar-section-bottom"></div>').appendTo(sidebar.container);
+        sidebar.sections.bottom.content = $('<div class="red-ui-sidebar-content"></div>').appendTo(sidebar.sections.bottom.container);
+        sidebar.sections.bottom.footer =  $('<div class="red-ui-sidebar-footer"></div>').appendTo(sidebar.sections.bottom.container);
+
+        let startPosition
+        let startTopSectionHeight
+        let startTopTabSectionHeight
+        let startSidebarHeight
+        sidebar.sectionsSeparator.draggable({
+            axis: "y",
+            containment: sidebar.container,
+            scroll: false,
+            start:function(event,ui) {
+                startPosition = ui.position.top
+                startTopSectionHeight = sidebar.sections.top.container.outerHeight()
+                startTopTabSectionHeight = sidebar.tabBars.top.container.outerHeight()
+                startSidebarHeight = sidebar.container.height()
             },
-            onremove: function(tab) {
-                $(tab.wrapper).hide();
-                if (tab.onremove) {
-                    tab.onremove.call(tab);
+            drag: function(event,ui) {
+                const delta = ui.position.top - startPosition
+                const newTopHeight = startTopSectionHeight + delta
+                const newBottomHeight = startSidebarHeight - newTopHeight
+                if (newTopHeight < 100 || newBottomHeight < 100) {
+                    ui.position.top += delta
+                    return
                 }
+                sidebar.sections.top.container.outerHeight(startTopSectionHeight + delta)
+                sidebar.tabBars.top.container.outerHeight(startTopTabSectionHeight + delta)
+                ui.position.top -= delta
+                sidebar.resizeSidebar()
             },
-            // 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
+            stop:function(event,ui) {
+            }
         });
 
-        $('<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");
+        // sidebar.shade = $('<div class="red-ui-sidebar-shade hide"></div>').appendTo(sidebar.container);
+        
+        sidebar.separator = setupSidebarSeparator(sidebar);
+        setupSidebarTabs(sidebar)
+        sidebar.resizeSidebar = function () {
+            // Resize sidebar sections as needed
+            const topSectionHeight = sidebar.sections.top.container.outerHeight()
+            if (!sidebar.sections.bottom.hidden) {
+                const bottomSectionHeight = sidebar.sections.bottom.container.outerHeight()
+
+                // Shrink the top section if the bottom section is too small
+                if (bottomSectionHeight < 90 && topSectionHeight > 90) {
+                    sidebar.sections.top.container.outerHeight(topSectionHeight - (90 - bottomSectionHeight));
+                }
+                sidebar.tabBars.top.container.height(sidebar.sections.top.container.outerHeight())
+            // } else {
+            //     sidebar.tabBars.top.container.height(sidebar.sections.top.container.outerHeight() - 60)
+            }
+            // Trigger a resize of the tab bars to handle overflow
+            sidebar.resizeSidebarTabBar()
+            RED.events.emit("sidebar:resize");
+
+        }
+        $(window).on("resize", sidebar.resizeSidebar)
+        if (sidebar.defaultTopHeight > 0) {
+            if (sidebar.defaultTopHeight === 1) {
+                sidebar.hideSection('bottom')
+            } else {
+                sidebar.sections.top.container.outerHeight(sidebarHeight * sidebar.defaultTopHeight);
+            }
+        }
+        sidebar.resizeSidebar()
+
+    }
+    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 {
@@ -31814,7 +33433,6 @@ RED.palette = (function() {
     ];
 
     var categoryContainers = {};
-    var sidebarControls;
 
     let paletteState = { filter: "", collapsed: [] };
 
@@ -32091,6 +33709,7 @@ RED.palette = (function() {
                 width: "300px",
                 content: "hi",
                 delay: { show: 750, hide: 50 }
+                // direction: "left"
             });
 
             d.data('popover',popover);
@@ -32107,13 +33726,15 @@ RED.palette = (function() {
             var paletteWidth;
             var paletteTop;
             var dropEnabled;
+            let chartOffset;
             $(d).draggable({
                 helper: 'clone',
                 appendTo: '#red-ui-editor',
                 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;
@@ -32122,6 +33743,7 @@ RED.palette = (function() {
                     if (activeGroup) {
                         document.getElementById("group_select_"+activeGroup.id).classList.add("red-ui-flow-group-active-hovered");
                     }
+                    chartOffset = chart.offset()
                     RED.view.focus();
                 },
                 stop: function() {
@@ -32139,10 +33761,13 @@ 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;
+                        mouseX = ui.offset.left - chartOffset.left + (ui.helper.width()/2) + chart.scrollLeft();
+                        mouseY = ui.offset.top - chartOffset.top + (ui.helper.height()/2) + chart.scrollTop() + 10;
+                        // console.log(mouseX, mouseY)
                         if (!groupTimer) {
                             groupTimer = setTimeout(function() {
                                 var mx = mouseX / RED.view.scale();
@@ -32388,11 +34013,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: false
+        });
+
         $('<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();
 
@@ -32451,19 +34089,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;
@@ -32485,7 +34110,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();
@@ -32508,13 +34133,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": []}');
@@ -32532,18 +34151,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) {
@@ -32624,10 +34231,6 @@ RED.sidebar.info = (function() {
 
         var stackContainer = $("<div>",{class:"red-ui-sidebar-info-stack"}).appendTo(content);
 
-        var outlinerPanel = $("<div>").css({
-            "overflow": "hidden",
-            "height": "calc(70%)"
-        }).appendTo(stackContainer);
         var propertiesPanel = $("<div>").css({
             "overflow":"hidden",
             "height":"100%",
@@ -32643,7 +34246,7 @@ RED.sidebar.info = (function() {
 
         propertiesPanelHeaderCopyLink = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-link"></button>').css({
             position: 'absolute',
-            top: '12px',
+            top: '6px',
             right: '32px'
         }).on("click", function(evt) {
             RED.actions.invoke('core:copy-item-url',selectedObject)
@@ -32652,7 +34255,7 @@ RED.sidebar.info = (function() {
 
         propertiesPanelHeaderHelp = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-book"></button>').css({
             position: 'absolute',
-            top: '12px',
+            top: '6px',
             right: '56px'
         }).on("click", function(evt) {
             evt.preventDefault();
@@ -32665,7 +34268,7 @@ RED.sidebar.info = (function() {
 
         propertiesPanelHeaderReveal = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-search"></button>').css({
             position: 'absolute',
-            top: '12px',
+            top: '6px',
             right: '8px'
         }).on("click", function(evt) {
             evt.preventDefault();
@@ -32684,13 +34287,13 @@ RED.sidebar.info = (function() {
         }).appendTo(propertiesPanel);
 
 
-        panels = RED.panels.create({container: stackContainer})
-        panels.ratio(0.6);
-        RED.sidebar.info.outliner.build().appendTo(outlinerPanel);
-
+        // panels = RED.panels.create({container: stackContainer})
+        // panels.ratio(0.6);
+        // RED.sidebar.info.outliner.build().appendTo(outlinerPanel);
 
         RED.sidebar.addTab({
             id: "info",
+            // target: "secondary",
             label: RED._("sidebar.info.label"),
             name: RED._("sidebar.info.name"),
             iconClass: "fa fa-info",
@@ -32729,6 +34332,8 @@ RED.sidebar.info = (function() {
             tips.stop();
         }
 
+        resizeStack();
+
     }
 
     function show() {
@@ -33866,9 +35471,30 @@ RED.sidebar.info = (function() {
     function onSelectionChanged(selection) {
         // treeList.treeList('clearSelection');
     }
+    function show() {
+        RED.sidebar.show("explorer");
+    }
+    function init() {
+        const content = build()
+
+        RED.actions.add("core:show-explorer-tab",show);
+
+
+        RED.sidebar.addTab({
+            id: "explorer",
+            // target: "secondary",
+            label: 'Explorer', // RED._("sidebar.info.label"),
+            name: 'Explorer', //RED._("sidebar.info.name"),
+            icon: "red/images/explorer.svg",
+            action:"core:show-explorer-tab",
+            content: content,
+            pinned: true,
+            enableOnEdit: true
+        });
+    }
 
     return {
-        build: build,
+        init,
         search: function(val) {
             searchInput.searchBox('value',val)
         },
@@ -45508,14 +47134,14 @@ RED.eventLog = (function() {
     }
     function showTray(options) {
         var el = $('<div class="red-ui-tray"></div>');
-        // `editor-tray-header` is deprecated - use red-ui-tray-body instead
-        var header = $('<div class="red-ui-tray-header editor-tray-header"></div>').appendTo(el);
-        var bodyWrapper = $('<div class="red-ui-tray-body-wrapper"></div>').appendTo(el);
-        // `editor-tray-body` is deprecated - use red-ui-tray-body instead
-        var body = $('<div class="red-ui-tray-body editor-tray-body"></div>').appendTo(bodyWrapper);
-        // `editor-tray-footer` is deprecated - use red-ui-tray-footer instead
-        var footer = $('<div class="red-ui-tray-footer"></div>').appendTo(el);
         var resizer = $('<div class="red-ui-tray-resize-handle"></div>').appendTo(el);
+        var wrapper = $('<div class="red-ui-tray-wrapper"></div>').appendTo(el);
+        
+        var header = $('<div class="red-ui-tray-header"></div>').appendTo(wrapper);
+        var bodyWrapper = $('<div class="red-ui-tray-body-wrapper"></div>').appendTo(wrapper);
+        var body = $('<div class="red-ui-tray-body"></div>').appendTo(bodyWrapper);
+        // `editor-tray-footer` is deprecated - use red-ui-tray-footer instead
+        var footer = $('<div class="red-ui-tray-footer"></div>').appendTo(wrapper);
         // var growButton = $('<a class="red-ui-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer);
         // var shrinkButton = $('<a class="red-ui-tray-resize-button" style="cursor: e-resize;"><i style="margin-left: 1px;" class="fa fa-angle-right"></i></a>').appendTo(resizer);
         if (options.title) {
@@ -45677,6 +47303,8 @@ RED.eventLog = (function() {
     }
 
     function handleWindowResize() {
+        let sidebarWidth = $("#red-ui-sidebar").is(":visible") ? $("#red-ui-sidebar").outerWidth() : 0;
+        $("#red-ui-editor-stack").css('right', sidebarWidth + $("#red-ui-sidebar + .red-ui-sidebar-tab-bar").outerWidth() + 4);
         if (stack.length > 0) {
             var tray = stack[stack.length-1];
             if (tray.options.maximized || tray.width > $("#red-ui-editor-stack").position().left-8) {
@@ -45701,11 +47329,11 @@ RED.eventLog = (function() {
     function raiseTrayZ() {
         setTimeout(function(){
             $('#red-ui-editor-stack').css("zIndex","13");
-        },300);
+        },100);
     }
     //lower tray z-index back to original place for correct slide animation (related to fix for editor context menu clipped by sidebar)
     function lowerTrayZ(){
-        $('#red-ui-editor-stack').css("zIndex","9");
+        $('#red-ui-editor-stack').css("zIndex","11");
     }
 
     return {
@@ -48838,6 +50466,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;
@@ -48916,8 +50550,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();
@@ -48941,8 +50574,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','');
@@ -49042,7 +50674,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();
@@ -49533,8 +51165,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();
             }
@@ -49568,8 +51199,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','');
@@ -49601,7 +51231,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 {
@@ -52423,7 +54053,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;
@@ -52432,7 +54062,7 @@ RED.userSettings = (function() {
                         pane.close();
                     }
                 });
-                $("#red-ui-sidebar-shade").hide();
+                $(".red-ui-sidebar-shade").hide();
 
             },
             show: function() {}
@@ -55225,7 +56855,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;
@@ -55234,7 +56864,7 @@ RED.projects.settings = (function() {
                         pane.close();
                     }
                 });
-                $("#red-ui-sidebar-shade").hide();
+                $(".red-ui-sidebar-shade").hide();
 
             },
             show: function() {}
@@ -59248,10 +60878,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",