@node-red/editor-client 4.0.0-beta.1 → 4.0.0-beta.3

package/public/red/red.js

@@ -116,6 +116,7 @@ var RED = (function() {
             cache: false,
             url: 'plugins',
             success: function(data) {
+                RED.plugins.setPluginList(data);
                 loader.reportProgress(RED._("event.loadPlugins"), 13)
                 RED.i18n.loadPluginCatalogs(function() {
                     loadPlugins(function() {
@@ -388,6 +389,7 @@ var RED = (function() {
                                 RED.workspaces.show(workspaces[0]);
                             }
                         }
+                        RED.events.emit('flows:loaded')
                     } catch(err) {
                         console.warn(err);
                         RED.notify(
@@ -625,6 +627,41 @@ var RED = (function() {
                 RED.view.redrawStatus(node);
             }
         });
+        RED.comms.subscribe("notification/plugin/#",function(topic,msg) {
+            if (topic == "notification/plugin/added") {
+                RED.settings.refreshSettings(function(err, data) {
+                    let addedPlugins = [];
+                    msg.forEach(function(m) {
+                        let id = m.id;
+                        RED.plugins.addPlugin(m);
+
+                        m.plugins.forEach((p) => {
+                            addedPlugins.push(p.id);
+                        })
+
+                        RED.i18n.loadNodeCatalog(id, function() {
+                            var lang = localStorage.getItem("editor-language")||RED.i18n.detectLanguage();
+                            $.ajax({
+                                headers: {
+                                    "Accept":"text/html",
+                                    "Accept-Language": lang
+                                },
+                                cache: false,
+                                url: 'plugins/'+id,
+                                success: function(data) {
+                                    appendPluginConfig(data);
+                                }
+                            });
+                        });
+                    });
+                    if (addedPlugins.length) {
+                        let pluginList = "<ul><li>"+addedPlugins.map(RED.utils.sanitize).join("</li><li>")+"</li></ul>";
+                        // ToDo: Adapt notification (node -> plugin)
+                        RED.notify(RED._("palette.event.nodeAdded", {count:addedPlugins.length})+pluginList,"success");
+                    }
+                })
+            }
+        });
 
         let pendingNodeRemovedNotifications = []
         let pendingNodeRemovedTimeout
@@ -894,6 +931,10 @@ var RED = (function() {
 
         RED.nodes.init();
         RED.runtime.init()
+
+        if (RED.settings.theme("multiplayer.enabled",false)) {
+            RED.multiplayer.init()
+        }
         RED.comms.connect();
 
         $("#red-ui-main-container").show();
@@ -1812,6 +1853,7 @@ RED.user = (function() {
     }
 
     function logout() {
+        RED.events.emit('logout')
         var tokens = RED.settings.get("auth-tokens");
         var token = tokens?tokens.access_token:"";
         $.ajax({
@@ -1836,6 +1878,8 @@ RED.user = (function() {
 
     function updateUserMenu() {
         $("#red-ui-header-button-user-submenu li").remove();
+        const userMenu = $("#red-ui-header-button-user")
+        userMenu.empty()
         if (RED.settings.user.anonymous) {
             RED.menu.addItem("red-ui-header-button-user",{
                 id:"usermenu-item-login",
@@ -1863,7 +1907,8 @@ RED.user = (function() {
                 }
             });
         }
-
+        const userIcon = generateUserIcon(RED.settings.user)
+        userIcon.appendTo(userMenu);
     }
 
     function init() {
@@ -1872,14 +1917,6 @@ RED.user = (function() {
 
                 var userMenu = $('<li><a id="red-ui-header-button-user" class="button hide" href="#"></a></li>')
                     .prependTo(".red-ui-header-toolbar");
-                if (RED.settings.user.image) {
-                    $('<span class="user-profile"></span>').css({
-                        backgroundImage: "url("+RED.settings.user.image+")",
-                    }).appendTo(userMenu.find("a"));
-                } else {
-                    $('<i class="fa fa-user"></i>').appendTo(userMenu.find("a"));
-                }
-
                 RED.menu.init({id:"red-ui-header-button-user",
                     options: []
                 });
@@ -1942,12 +1979,30 @@ RED.user = (function() {
         return false;
     }
 
+    function generateUserIcon(user) {
+        const userIcon = $('<span class="red-ui-user-profile"></span>')
+        if (user.image) {
+            userIcon.addClass('has_profile_image')
+            userIcon.css({
+                backgroundImage: "url("+user.image+")",
+            })
+        } else if (user.anonymous) {
+            $('<i class="fa fa-user"></i>').appendTo(userIcon);
+        } else {
+            $('<span>').text(user.username.substring(0,2)).appendTo(userIcon);
+        }
+        if (user.profileColor !== undefined) {
+            userIcon.addClass('red-ui-user-profile-color-' + user.profileColor)
+        }
+        return userIcon
+    }
 
     return {
         init: init,
         login: login,
         logout: logout,
-        hasPermission: hasPermission
+        hasPermission: hasPermission,
+        generateUserIcon
     }
 
 })();
@@ -1979,6 +2034,15 @@ RED.comms = (function() {
     var reconnectAttempts = 0;
     var active = false;
 
+    RED.events.on('login', function(username) {
+        // User has logged in
+        // Need to upgrade the connection to be authenticated
+        if (ws && ws.readyState == 1) {
+            const auth_tokens = RED.settings.get("auth-tokens");
+            ws.send(JSON.stringify({auth:auth_tokens.access_token}))
+        }
+    })
+
     function connectWS() {
         active = true;
         var wspath;
@@ -2009,6 +2073,7 @@ RED.comms = (function() {
                     ws.send(JSON.stringify({subscribe:t}));
                 }
             }
+            emit('connect')
         }
 
         ws = new WebSocket(wspath);
@@ -2133,10 +2198,54 @@ RED.comms = (function() {
         }
     }
 
+    function send(topic, msg) {
+        if (ws && ws.readyState == 1) {
+            ws.send(JSON.stringify({
+                topic,
+                data: msg
+            }))
+        }
+    }
+
+    const eventHandlers = {};
+    function on(evt,func) {
+        eventHandlers[evt] = eventHandlers[evt]||[];
+        eventHandlers[evt].push(func);
+    }
+    function off(evt,func) {
+        const handler = eventHandlers[evt];
+        if (handler) {
+            for (let i=0;i<handler.length;i++) {
+                if (handler[i] === func) {
+                    handler.splice(i,1);
+                    return;
+                }
+            }
+        }
+    }
+    function emit() {
+        const evt = arguments[0]
+        const args = Array.prototype.slice.call(arguments,1);
+        if (eventHandlers[evt]) {
+            let cpyHandlers = [...eventHandlers[evt]];
+            for (let i=0;i<cpyHandlers.length;i++) {
+                try {
+                    cpyHandlers[i].apply(null, args);
+                } catch(err) {
+                    console.warn("RED.comms.emit error: ["+evt+"] "+(err.toString()));
+                    console.warn(err);
+                }
+            }
+        }
+    }
+
     return {
         connect: connectWS,
         subscribe: subscribe,
-        unsubscribe:unsubscribe
+        unsubscribe:unsubscribe,
+        on,
+        off,
+        send
     }
 })();
 ;RED.runtime = (function() {
@@ -2175,6 +2284,496 @@ RED.comms = (function() {
         }
     }
 })()
+;RED.multiplayer = (function () {
+
+    // activeSessionId - used to identify sessions across websocket reconnects
+    let activeSessionId
+
+    let headerWidget
+    // Map of session id to { session:'', user:{}, location:{}}
+    let sessions = {}
+    // Map of username to { user:{}, sessions:[] }
+    let users = {}
+
+    function addUserSession (session) {
+        if (sessions[session.session]) {
+            // This is an existing connection that has been authenticated
+            const existingSession = sessions[session.session]
+            if (existingSession.user.username !== session.user.username) {
+                removeUserHeaderButton(users[existingSession.user.username])
+            }
+        }
+        sessions[session.session] = session
+        const user = users[session.user.username] = users[session.user.username] || {
+            user: session.user,
+            sessions: []
+        }
+        if (session.user.profileColor === undefined) {
+            session.user.profileColor = (1 + Math.floor(Math.random() * 5))
+        }
+        session.location = session.location || {}
+        user.sessions.push(session)
+
+        if (session.session === activeSessionId) {
+            // This is the current user session - do not add a extra button for them
+        } else {
+            if (user.sessions.length === 1) {
+                if (user.button) {
+                    clearTimeout(user.inactiveTimeout)
+                    clearTimeout(user.removeTimeout)
+                    user.button.removeClass('inactive')
+                } else {
+                    addUserHeaderButton(user)
+                }
+            }
+            sessions[session.session].location = session.location
+            updateUserLocation(session.session)
+        }
+    }
+
+    function removeUserSession (sessionId, isDisconnected) {
+        removeUserLocation(sessionId)
+        const session = sessions[sessionId]
+        delete sessions[sessionId]
+        const user = users[session.user.username]
+        const i = user.sessions.indexOf(session)
+        user.sessions.splice(i, 1)
+        if (isDisconnected) {
+            removeUserHeaderButton(user)
+        } else {
+            if (user.sessions.length === 0) {
+                // Give the user 5s to reconnect before marking inactive
+                user.inactiveTimeout = setTimeout(() => {
+                    user.button.addClass('inactive')
+                    // Give the user further 20 seconds to reconnect before removing them
+                    // from the user toolbar entirely
+                    user.removeTimeout = setTimeout(() => {
+                        removeUserHeaderButton(user)
+                    }, 20000)
+                }, 5000)
+            }
+        }
+    }
+
+    function addUserHeaderButton (user) {
+        user.button = $('<li class="red-ui-multiplayer-user"><button type="button" class="red-ui-multiplayer-user-icon"></button></li>')
+            .attr('data-username', user.user.username)
+            .prependTo("#red-ui-multiplayer-user-list");
+        var button = user.button.find("button")
+        RED.popover.tooltip(button, user.user.username)
+        button.on('click', function () {
+            const location = user.sessions[0].location
+            revealUser(location)
+        })
+
+        const userProfile = RED.user.generateUserIcon(user.user)
+        userProfile.appendTo(button)
+    }
+
+    function removeUserHeaderButton (user) {
+        user.button.remove()
+        delete user.button
+    }
+
+    function getLocation () {
+        const location = {
+            workspace: RED.workspaces.active()
+        }
+        const editStack = RED.editor.getEditStack()
+        for (let i = editStack.length - 1; i >= 0; i--) {
+            if (editStack[i].id) {
+                location.node = editStack[i].id
+                break
+            }
+        }
+        return location
+    }
+    function publishLocation () {
+        const location = getLocation()
+        if (location.workspace !== 0) {
+            log('send', 'multiplayer/location', location)
+            RED.comms.send('multiplayer/location', location)
+        }
+    }
+
+    function revealUser(location, skipWorkspace) {
+        if (location.node) {
+            // Need to check if this is a known node, so we can fall back to revealing
+            // the workspace instead
+            const node = RED.nodes.node(location.node)
+            if (node) {
+                RED.view.reveal(location.node)
+            } else if (!skipWorkspace && location.workspace) {
+                RED.view.reveal(location.workspace)
+            }
+        } else if (!skipWorkspace && location.workspace) {
+            RED.view.reveal(location.workspace)
+        }
+    }
+
+    const workspaceTrays = {}
+    function getWorkspaceTray(workspaceId) {
+        // console.log('get tray for',workspaceId)
+        if (!workspaceTrays[workspaceId]) {
+            const tray = $('<div class="red-ui-multiplayer-users-tray"></div>')
+            const users = []
+            const userIcons = {}
+
+            const userCountIcon = $(`<div class="red-ui-multiplayer-user-location"><span class="red-ui-user-profile red-ui-multiplayer-user-count"><span></span></span></div>`)
+            const userCountSpan = userCountIcon.find('span span')
+            userCountIcon.hide()
+            userCountSpan.text('')
+            userCountIcon.appendTo(tray)
+            const userCountTooltip = RED.popover.tooltip(userCountIcon, function () {
+                    const content = $('<div>')
+                    users.forEach(sessionId => {
+                        $('<div>').append($('<a href="#">').text(sessions[sessionId].user.username).on('click', function (evt) {
+                            evt.preventDefault()
+                            revealUser(sessions[sessionId].location, true)
+                            userCountTooltip.close()
+                        })).appendTo(content)
+                    })
+                    return content
+                },
+                null,
+                true
+            )
+
+            const updateUserCount = function () {
+                const maxShown = 2
+                const children = tray.children()
+                children.each(function (index, element) {
+                    const i = users.length - index
+                    if (i > maxShown) {
+                        $(this).hide()
+                    } else if (i >= 0) {
+                        $(this).show()
+                    }
+                })
+                if (users.length < maxShown + 1) { 
+                    userCountIcon.hide()
+                } else {
+                    userCountSpan.text('+'+(users.length - maxShown))
+                    userCountIcon.show()
+                }
+            }
+            workspaceTrays[workspaceId] = {
+                attached: false,
+                tray,
+                users,
+                userIcons,
+                addUser: function (sessionId) {
+                    if (users.indexOf(sessionId) === -1) {
+                        // console.log(`addUser ws:${workspaceId} session:${sessionId}`)
+                        users.push(sessionId)
+                        const userLocationId = `red-ui-multiplayer-user-location-${sessionId}`
+                        const userLocationIcon = $(`<div class="red-ui-multiplayer-user-location" id="${userLocationId}"></div>`)
+                        RED.user.generateUserIcon(sessions[sessionId].user).appendTo(userLocationIcon)
+                        userLocationIcon.prependTo(tray)
+                        RED.popover.tooltip(userLocationIcon, sessions[sessionId].user.username)
+                        userIcons[sessionId] = userLocationIcon
+                        updateUserCount()
+                    }
+                },
+                removeUser: function (sessionId) {
+                    // console.log(`removeUser ws:${workspaceId} session:${sessionId}`)
+                    const userLocationId = `red-ui-multiplayer-user-location-${sessionId}`
+                    const index = users.indexOf(sessionId)
+                    if (index > -1) {
+                        users.splice(index, 1)
+                        userIcons[sessionId].remove()
+                        delete userIcons[sessionId]
+                    }
+                    updateUserCount()
+                },
+                updateUserCount
+            }
+        }
+        const trayDef = workspaceTrays[workspaceId]
+        if (!trayDef.attached) {
+            const workspaceTab = $(`#red-ui-tab-${workspaceId}`)
+            if (workspaceTab.length > 0) {
+                trayDef.attached = true
+                trayDef.tray.appendTo(workspaceTab)
+                trayDef.users.forEach(sessionId => {
+                    trayDef.userIcons[sessionId].on('click', function (evt) {
+                        revealUser(sessions[sessionId].location, true)
+                    })
+                })
+            }
+        }
+        return workspaceTrays[workspaceId]
+    }
+    function attachWorkspaceTrays () {
+        let viewTouched = false
+        for (let sessionId of Object.keys(sessions)) {
+            const location = sessions[sessionId].location
+            if (location) {
+                if (location.workspace) {
+                    getWorkspaceTray(location.workspace).updateUserCount()
+                }
+                if (location.node) {
+                    addUserToNode(sessionId, location.node)
+                    viewTouched = true
+                }
+            }
+        }
+        if (viewTouched) {
+            RED.view.redraw()
+        }
+    }
+
+    function addUserToNode(sessionId, nodeId) {
+        const node = RED.nodes.node(nodeId)
+        if (node) {
+            if (!node._multiplayer) {
+                node._multiplayer = {
+                    users: [sessionId]
+                }
+                node._multiplayer_refresh = true
+            } else {
+                if (node._multiplayer.users.indexOf(sessionId) === -1) {
+                    node._multiplayer.users.push(sessionId)
+                    node._multiplayer_refresh = true
+                }
+            }
+        }
+    }
+    function removeUserFromNode(sessionId, nodeId) {
+        const node = RED.nodes.node(nodeId)
+        if (node && node._multiplayer) {
+            const i = node._multiplayer.users.indexOf(sessionId)
+            if (i > -1) {
+                node._multiplayer.users.splice(i, 1)
+            }
+            if (node._multiplayer.users.length === 0) {
+                delete node._multiplayer
+            } else {
+                node._multiplayer_refresh = true
+            }
+        }
+
+    }
+
+    function removeUserLocation (sessionId) {
+        updateUserLocation(sessionId, {})
+    }
+    function updateUserLocation (sessionId, location) {
+        let viewTouched = false
+        const oldLocation = sessions[sessionId].location
+        if (location) {
+            if (oldLocation.workspace !== location.workspace) {
+                // console.log('removing', sessionId, oldLocation.workspace)
+                workspaceTrays[oldLocation.workspace]?.removeUser(sessionId)
+            }
+            if (oldLocation.node !== location.node) {
+                removeUserFromNode(sessionId, oldLocation.node)
+                viewTouched = true
+            }
+            sessions[sessionId].location = location
+        } else {
+            location = sessions[sessionId].location
+        }
+        // console.log(`updateUserLocation sessionId:${sessionId} oldWS:${oldLocation?.workspace} newWS:${location.workspace}`)
+        if (location.workspace) {
+            getWorkspaceTray(location.workspace).addUser(sessionId)
+        }
+        if (location.node) {
+            addUserToNode(sessionId, location.node)
+            viewTouched = true
+        }
+        if (viewTouched) {
+            RED.view.redraw()
+        }
+    }
+
+    // function refreshUserLocations () {
+    //     for (const session of Object.keys(sessions)) {
+    //         if (session !== activeSessionId) {
+    //             updateUserLocation(session)
+    //         }
+    //     }
+    // }
+
+    return {
+        init: function () {
+
+            function createAnnotationUser(user) {
+
+                const group = document.createElementNS("http://www.w3.org/2000/svg","g");
+                const badge = document.createElementNS("http://www.w3.org/2000/svg","circle");
+                const radius = 20
+                badge.setAttribute("cx",radius/2);
+                badge.setAttribute("cy",radius/2);
+                badge.setAttribute("r",radius/2);
+                badge.setAttribute("class", "red-ui-multiplayer-annotation-background")
+                group.appendChild(badge)
+                if (user && user.profileColor !== undefined) {
+                    badge.setAttribute("class", "red-ui-multiplayer-annotation-background red-ui-user-profile-color-" + user.profileColor)
+                }
+                if (user && user.image) {
+                    const image = document.createElementNS("http://www.w3.org/2000/svg","image");
+                    image.setAttribute("width", radius)
+                    image.setAttribute("height", radius)
+                    image.setAttribute("href", user.image)
+                    image.setAttribute("clip-path", "circle("+Math.floor(radius/2)+")")
+                    group.appendChild(image)
+                } else if (user && user.anonymous) {
+                    const anonIconHead = document.createElementNS("http://www.w3.org/2000/svg","circle");
+                    anonIconHead.setAttribute("cx", radius/2)
+                    anonIconHead.setAttribute("cy", radius/2 - 2)
+                    anonIconHead.setAttribute("r", 2.4)
+                    anonIconHead.setAttribute("class","red-ui-multiplayer-annotation-anon-label");
+                    group.appendChild(anonIconHead)
+                    const anonIconBody = document.createElementNS("http://www.w3.org/2000/svg","path");
+                    anonIconBody.setAttribute("class","red-ui-multiplayer-annotation-anon-label");
+                    // anonIconBody.setAttribute("d",`M ${radius/2 - 4} ${radius/2 + 1} h 8 v4 h -8 z`);
+                    anonIconBody.setAttribute("d",`M ${radius/2} ${radius/2 + 5} h -2.5 c -2 1 -2 -5 0.5 -4.5 c 2 1 2 1 4 0 c 2.5 -0.5  2.5 5.5  0 4.5  z`);
+                    group.appendChild(anonIconBody)
+                } else {
+                    const labelText = user.username ? user.username.substring(0,2) : user
+                    const label = document.createElementNS("http://www.w3.org/2000/svg","text");
+                    if (user.username) {
+                        label.setAttribute("class","red-ui-multiplayer-annotation-label");
+                        label.textContent = user.username.substring(0,2)
+                    } else {
+                        label.setAttribute("class","red-ui-multiplayer-annotation-label red-ui-multiplayer-user-count")
+                        label.textContent = user
+                    }
+                    label.setAttribute("text-anchor", "middle")
+                    label.setAttribute("x",radius/2);
+                    label.setAttribute("y",radius/2 + 3);
+                    group.appendChild(label)
+                }
+                const border = document.createElementNS("http://www.w3.org/2000/svg","circle");
+                border.setAttribute("cx",radius/2);
+                border.setAttribute("cy",radius/2);
+                border.setAttribute("r",radius/2);
+                border.setAttribute("class", "red-ui-multiplayer-annotation-border")
+                group.appendChild(border)
+          
+
+
+                return group
+            }
+            
+            RED.view.annotations.register("red-ui-multiplayer",{
+                type: 'badge',
+                align: 'left',
+                class: "red-ui-multiplayer-annotation",
+                show: "_multiplayer",
+                refresh: "_multiplayer_refresh",
+                element: function(node) {
+                    const containerGroup = document.createElementNS("http://www.w3.org/2000/svg","g");
+                    containerGroup.setAttribute("transform","translate(0,-4)")
+                    if (node._multiplayer) {
+                        let y = 0
+                        for (let i = Math.min(1, node._multiplayer.users.length - 1); i >= 0; i--) {
+                            const user = sessions[node._multiplayer.users[i]].user
+                            const group = createAnnotationUser(user)
+                            group.setAttribute("transform","translate("+y+",0)")
+                            y += 15
+                            containerGroup.appendChild(group)
+                        }
+                        if (node._multiplayer.users.length > 2) {
+                            const group = createAnnotationUser('+'+(node._multiplayer.users.length - 2))
+                            group.setAttribute("transform","translate("+y+",0)")
+                            y += 12
+                            containerGroup.appendChild(group)
+                        }
+
+                    }
+                    return containerGroup;
+                },
+                tooltip: node => { return node._multiplayer.users.map(u => sessions[u].user.username).join('\n') }
+            });
+
+
+            // activeSessionId = RED.settings.getLocal('multiplayer:sessionId')
+            // if (!activeSessionId) {
+                activeSessionId = RED.nodes.id()
+            //     RED.settings.setLocal('multiplayer:sessionId', activeSessionId)
+            //     log('Session ID (new)', activeSessionId)
+            // } else {
+                log('Session ID', activeSessionId)
+            // }
+            
+            headerWidget = $('<li><ul id="red-ui-multiplayer-user-list"></ul></li>').prependTo('.red-ui-header-toolbar')
+
+            RED.comms.on('connect', () => {
+                const location = getLocation()
+                const connectInfo = {
+                    session: activeSessionId
+                }
+                if (location.workspace !== 0) {
+                    connectInfo.location = location
+                }
+                RED.comms.send('multiplayer/connect', connectInfo)
+            })
+            RED.comms.subscribe('multiplayer/#', (topic, msg) => {
+                log('recv', topic, msg)
+                if (topic === 'multiplayer/init') {
+                    // We have just reconnected, runtime has sent state to
+                    // initialise the world
+                    sessions = {}
+                    users = {}
+                    $('#red-ui-multiplayer-user-list').empty()
+
+                    msg.sessions.forEach(session => {
+                        addUserSession(session)
+                    })
+                } else if (topic === 'multiplayer/connection-added') {
+                    addUserSession(msg)
+                } else if (topic === 'multiplayer/connection-removed') {
+                    removeUserSession(msg.session, msg.disconnected)
+                } else if (topic === 'multiplayer/location') {
+                    const session = msg.session
+                    delete msg.session
+                    updateUserLocation(session, msg)
+                }
+            })
+
+            RED.events.on('workspace:change', (event) => {
+                getWorkspaceTray(event.workspace)
+                publishLocation()
+            })
+            RED.events.on('editor:open', () => {
+                publishLocation()
+            })
+            RED.events.on('editor:close', () => {
+                publishLocation()
+            })
+            RED.events.on('editor:change', () => {
+                publishLocation()
+            })
+            RED.events.on('login', () => {
+                publishLocation()
+            })
+            RED.events.on('flows:loaded', () => {
+                attachWorkspaceTrays()
+            })
+            RED.events.on('workspace:close', (event) => {
+                // A subflow tab has been closed. Need to mark its tray as detached
+                if (workspaceTrays[event.workspace]) {
+                    workspaceTrays[event.workspace].attached = false
+                }
+            })
+            RED.events.on('logout', () => {
+                const disconnectInfo = {
+                    session: activeSessionId
+                }
+                RED.comms.send('multiplayer/disconnect', disconnectInfo)
+                RED.settings.removeLocal('multiplayer:sessionId')
+            })
+        }
+    }
+
+    function log() {
+        if (RED.multiplayer.DEBUG) {
+            console.log('[multiplayer]', ...arguments)
+        }
+    }
+})();
 ;/**
  * Copyright JS Foundation and other contributors, http://js.foundation
  *
@@ -3672,6 +4271,7 @@ RED.state = {
 ;RED.plugins = (function() {
     var plugins = {};
     var pluginsByType = {};
+    var moduleList = {};
 
     function registerPlugin(id,definition) {
         plugins[id] = definition;
@@ -3709,10 +4309,44 @@ RED.state = {
     function getPluginsByType(type) {
         return pluginsByType[type] || [];
     }
+
+    function setPluginList(list) {
+        for(let i=0;i<list.length;i++) {
+            let p = list[i];
+            addPlugin(p);
+        }
+    }
+
+    function addPlugin(p) {
+
+        moduleList[p.module] = moduleList[p.module] || {
+            name:p.module,
+            version:p.version,
+            local:p.local,
+            sets:{},
+            plugin: true,
+            id: p.id
+        };
+        if (p.pending_version) {
+            moduleList[p.module].pending_version = p.pending_version;
+        }
+        moduleList[p.module].sets[p.name] = p;
+
+        RED.events.emit("registry:plugin-module-added",p.module);
+    }
+
+    function getModule(module) {
+        return moduleList[module];
+    }
+
     return {
         registerPlugin: registerPlugin,
         getPlugin: getPlugin,
-        getPluginsByType: getPluginsByType
+        getPluginsByType: getPluginsByType,
+
+        setPluginList: setPluginList,
+        addPlugin: addPlugin,
+        getModule: getModule
     }
 })();
 ;/**
@@ -3866,6 +4500,8 @@ RED.nodes = (function() {
             },
             removeNodeSet: function(id) {
                 var ns = nodeSets[id];
+                if (!ns) { return {} }
+
                 for (var j=0;j<ns.types.length;j++) {
                     delete typeToId[ns.types[j]];
                 }
@@ -4289,12 +4925,16 @@ RED.nodes = (function() {
              * @param {String} z tab id
              */
             checkTabState: function (z) {
-                const ws = workspaces[z]
+                const ws = workspaces[z] || subflows[z]
                 if (ws) {
                     const contentsChanged = tabDirtyMap[z].size > 0 || tabDeletedNodesMap[z].size > 0
                     if (Boolean(ws.contentsChanged) !== contentsChanged) {
                         ws.contentsChanged = contentsChanged
-                        RED.events.emit("flows:change", ws);
+                        if (ws.type === 'tab') {
+                            RED.events.emit("flows:change", ws);
+                        } else {
+                            RED.events.emit("subflows:change", ws);
+                        }
                     }
                 }
             }
@@ -4767,7 +5407,22 @@ RED.nodes = (function() {
         RED.nodes.registerType("subflow:"+sf.id, {
             defaults:{
                 name:{value:""},
-                env:{value:[]}
+                env:{value:[], validate: function(value) {
+                    const errors = []
+                    if (value) {
+                        value.forEach(env => {
+                            const r = RED.utils.validateTypedProperty(env.value, env.type)
+                            if (r !== true) {
+                                errors.push(env.name+': '+r)
+                            }
+                        })
+                    }
+                    if (errors.length === 0) {
+                        return true
+                    } else {
+                        return errors
+                    }
+                }}
             },
             icon: function() { return sf.icon||"subflow.svg" },
             category: sf.category || "subflows",
@@ -7716,7 +8371,14 @@ RED.history = (function() {
         }
         return RED.nodes.junction(id);
     }
-
+    function ensureUnlocked(id, flowsToLock) {
+        const flow = id && (RED.nodes.workspace(id) || RED.nodes.subflow(id) || null);
+        const isLocked = flow ? flow.locked : false;
+        if (flow && isLocked) {
+            flow.locked = false;
+            flowsToLock.add(flow)
+        }
+    }
     function undoEvent(ev) {
         var i;
         var len;
@@ -7746,18 +8408,46 @@ RED.history = (function() {
                         t: 'replace',
                         config: RED.nodes.createCompleteNodeSet(),
                         changed: {},
-                        rev: RED.nodes.version()
+                        moved: {},
+                        complete: true,
+                        rev: RED.nodes.version(),
+                        dirty: RED.nodes.dirty()
                     };
+                    var selectedTab = RED.workspaces.active();
+                    inverseEv.config.forEach(n => {
+                        const node = RED.nodes.node(n.id)
+                        if (node) {
+                            inverseEv.changed[n.id] = node.changed
+                            inverseEv.moved[n.id] = node.moved
+                        }
+                    })
                     RED.nodes.clear();
                     var imported = RED.nodes.import(ev.config);
+                    // Clear all change flags from the import
+                    RED.nodes.dirty(false);
+
+                    const flowsToLock = new Set()
+                    
                     imported.nodes.forEach(function(n) {
                         if (ev.changed[n.id]) {
+                            ensureUnlocked(n.z, flowsToLock)
                             n.changed = true;
-                            inverseEv.changed[n.id] = true;
+                        }
+                        if (ev.moved[n.id]) {
+                            ensureUnlocked(n.z, flowsToLock)
+                            n.moved = true;
                         }
                     })
+                    flowsToLock.forEach(flow => {
+                        flow.locked = true
+                    })
 
                     RED.nodes.version(ev.rev);
+                    RED.view.redraw(true);
+                    RED.palette.refresh();
+                    RED.workspaces.refresh();
+                    RED.workspaces.show(selectedTab, true);
+                    RED.sidebar.config.refresh();
                 } else {
                     var importMap = {};
                     ev.config.forEach(function(n) {
@@ -12309,7 +12999,7 @@ RED.popover = (function() {
                         closePopup(true);
                     });
                 }
-                if (trigger === 'hover' && options.interactive) {
+                if (/*trigger === 'hover' && */options.interactive) {
                     div.on('mouseenter', function(e) {
                         clearTimeout(timer);
                         active = true;
@@ -12543,9 +13233,12 @@ RED.popover = (function() {
 
     return {
         create: createPopover,
-        tooltip: function(target,content, action) {
+        tooltip: function(target,content, action, interactive) {
             var label = function() {
                 var label = content;
+                if (typeof content === 'function') {
+                    label = content()
+                }
                 if (action) {
                     var shortcut = RED.keyboard.getShortcut(action);
                     if (shortcut && shortcut.key) {
@@ -12561,6 +13254,7 @@ RED.popover = (function() {
                 size: "small",
                 direction: "bottom",
                 content: label,
+                interactive,
                 delay: { show: 750, hide: 50 }
             });
             popover.setContent = function(newContent) {
@@ -13319,7 +14013,10 @@ RED.tabs = (function() {
 
             var thisTabA = thisTab.find("a");
             if (options.onclick) {
-                options.onclick(tabs[thisTabA.attr('href').slice(1)]);
+                options.onclick(tabs[thisTabA.attr('href').slice(1)], evt);
+                if (evt.isDefaultPrevented() && evt.isPropagationStopped()) {
+                    return false
+                }
             }
             activateTab(thisTabA);
             if (fireSelectionChanged) {
@@ -13502,6 +14199,8 @@ RED.tabs = (function() {
         ul.find("li.red-ui-tab a")
             .on("mousedown", function(evt) { mousedownTab = evt.currentTarget })
             .on("mouseup",onTabClick)
+            // prevent browser-default middle-click behaviour
+            .on("auxclick", function(evt) { evt.preventDefault() })
             .on("click", function(evt) {evt.preventDefault(); })
             .on("dblclick", function(evt) {evt.stopPropagation(); evt.preventDefault(); })
 
@@ -13770,6 +14469,8 @@ RED.tabs = (function() {
                 }
                 link.on("mousedown", function(evt) { mousedownTab = evt.currentTarget })
                 link.on("mouseup",onTabClick);
+                // prevent browser-default middle-click behaviour
+                link.on("auxclick", function(evt) { evt.preventDefault() })
                 link.on("click", function(evt) { evt.preventDefault(); })
                 link.on("dblclick", function(evt) { evt.stopPropagation(); evt.preventDefault(); })
 
@@ -16137,6 +16838,8 @@ RED.deploy = (function() {
 
     var currentDiff = null;
 
+    var activeBackgroundDeployNotification;
+
     function changeDeploymentType(type) {
         deploymentType = type;
         $("#red-ui-header-button-deploy-icon").attr("src",deploymentTypes[type].img);
@@ -16215,51 +16918,59 @@ RED.deploy = (function() {
             RED.actions.add("core:set-deploy-type-to-modified-nodes",function() { RED.menu.setSelected("deploymenu-item-node",true); });
         }
 
-
+        window.addEventListener('beforeunload', function (event) {
+            if (RED.nodes.dirty()) {
+                event.preventDefault();
+                event.stopImmediatePropagation()
+                event.returnValue = RED._("deploy.confirm.undeployedChanges");
+                return
+            }
+        })
 
         RED.events.on('workspace:dirty',function(state) {
             if (state.dirty) {
-                window.onbeforeunload = function() {
-                    return RED._("deploy.confirm.undeployedChanges");
-                }
+                // window.onbeforeunload = function() {
+                //     return 
+                // }
                 $("#red-ui-header-button-deploy").removeClass("disabled");
             } else {
-                window.onbeforeunload = null;
+                // window.onbeforeunload = null;
                 $("#red-ui-header-button-deploy").addClass("disabled");
             }
         });
 
-        var activeNotifyMessage;
         RED.comms.subscribe("notification/runtime-deploy",function(topic,msg) {
-            if (!activeNotifyMessage) {
-                var currentRev = RED.nodes.version();
-                if (currentRev === null || deployInflight || currentRev === msg.revision) {
-                    return;
-                }
-                var message = $('<p>').text(RED._('deploy.confirm.backgroundUpdate'));
-                activeNotifyMessage = RED.notify(message,{
-                    modal: true,
-                    fixed: true,
-                    buttons: [
-                        {
-                            text: RED._('deploy.confirm.button.ignore'),
-                            click: function() {
-                                activeNotifyMessage.close();
-                                activeNotifyMessage = null;
-                            }
-                        },
-                        {
-                            text: RED._('deploy.confirm.button.review'),
-                            class: "primary",
-                            click: function() {
-                                activeNotifyMessage.close();
-                                var nns = RED.nodes.createCompleteNodeSet();
-                                resolveConflict(nns,false);
-                                activeNotifyMessage = null;
-                            }
+            var currentRev = RED.nodes.version();
+            if (currentRev === null || deployInflight || currentRev === msg.revision) {
+                return;
+            }
+            if (activeBackgroundDeployNotification?.hidden && !activeBackgroundDeployNotification?.closed) {
+                activeBackgroundDeployNotification.showNotification()
+                return
+            }
+            const message = $('<p>').text(RED._('deploy.confirm.backgroundUpdate'));
+            const options = {
+                id: 'background-update',
+                type: 'compact',
+                modal: false,
+                fixed: true,
+                timeout: 10000,
+                buttons: [
+                    {
+                        text: RED._('deploy.confirm.button.review'),
+                        class: "primary",
+                        click: function() {
+                            activeBackgroundDeployNotification.hideNotification();
+                            var nns = RED.nodes.createCompleteNodeSet();
+                            resolveConflict(nns,false);
                         }
-                    ]
-                });
+                    }
+                ]
+            }
+            if (!activeBackgroundDeployNotification || activeBackgroundDeployNotification.closed) {
+                activeBackgroundDeployNotification = RED.notify(message, options)
+            } else {
+                activeBackgroundDeployNotification.update(message, options)
             }
         });
     }
@@ -16316,7 +17027,11 @@ RED.deploy = (function() {
                 class: "primary disabled",
                 click: function() {
                     if (!$("#red-ui-deploy-dialog-confirm-deploy-review").hasClass('disabled')) {
-                        RED.diff.showRemoteDiff();
+                        RED.diff.showRemoteDiff(null, {
+                            onmerge: function () {
+                                activeBackgroundDeployNotification.close()
+                            }
+                        });
                         conflictNotification.close();
                     }
                 }
@@ -16329,6 +17044,7 @@ RED.deploy = (function() {
                     if (!$("#red-ui-deploy-dialog-confirm-deploy-merge").hasClass('disabled')) {
                         RED.diff.mergeDiff(currentDiff);
                         conflictNotification.close();
+                        activeBackgroundDeployNotification.close()
                     }
                 }
             }
@@ -16341,6 +17057,7 @@ RED.deploy = (function() {
                 click: function() {
                     save(true,activeDeploy);
                     conflictNotification.close();
+                    activeBackgroundDeployNotification.close()
                 }
             })
         }
@@ -16351,21 +17068,17 @@ RED.deploy = (function() {
             buttons: buttons
         });
 
-        var now = Date.now();
         RED.diff.getRemoteDiff(function(diff) {
-            var ellapsed = Math.max(1000 - (Date.now()-now), 0);
             currentDiff = diff;
-            setTimeout(function() {
-                conflictCheck.hide();
-                var d = Object.keys(diff.conflicts);
-                if (d.length === 0) {
-                    conflictAutoMerge.show();
-                    $("#red-ui-deploy-dialog-confirm-deploy-merge").removeClass('disabled')
-                } else {
-                    conflictManualMerge.show();
-                }
-                $("#red-ui-deploy-dialog-confirm-deploy-review").removeClass('disabled')
-            },ellapsed);
+            conflictCheck.hide();
+            var d = Object.keys(diff.conflicts);
+            if (d.length === 0) {
+                conflictAutoMerge.show();
+                $("#red-ui-deploy-dialog-confirm-deploy-merge").removeClass('disabled')
+            } else {
+                conflictManualMerge.show();
+            }
+            $("#red-ui-deploy-dialog-confirm-deploy-review").removeClass('disabled')
         })
     }
     function cropList(list) {
@@ -16715,7 +17428,10 @@ RED.deploy = (function() {
                 }
             });
             RED.nodes.eachSubflow(function (subflow) {
-                subflow.changed = false;
+                if (subflow.changed) {
+                    subflow.changed = false;
+                    RED.events.emit("subflows:change", subflow);
+                }
             });
             RED.nodes.eachWorkspace(function (ws) {
                 if (ws.changed || ws.added) {
@@ -16823,7 +17539,6 @@ RED.diagnostics = (function () {
     };
 })();
 ;RED.diff = (function() {
-
     var currentDiff = {};
     var diffVisible = false;
     var diffList;
@@ -16886,12 +17601,14 @@ RED.diagnostics = (function () {
                         addedCount:0,
                         deletedCount:0,
                         changedCount:0,
+                        movedCount:0,
                         unchangedCount: 0
                     },
                     remote: {
                         addedCount:0,
                         deletedCount:0,
                         changedCount:0,
+                        movedCount:0,
                         unchangedCount: 0
                     },
                     conflicts: 0
@@ -16962,7 +17679,7 @@ RED.diagnostics = (function () {
                             $(this).parent().toggleClass('collapsed');
                         });
 
-                        createNodePropertiesTable(def,tab,localTabNode,remoteTabNode,conflicts).appendTo(div);
+                        createNodePropertiesTable(def,tab,localTabNode,remoteTabNode).appendTo(div);
                         selectState = "";
                         if (conflicts[tab.id]) {
                             flowStats.conflicts++;
@@ -17032,19 +17749,26 @@ RED.diagnostics = (function () {
                         var localStats = $('<span>',{class:"red-ui-diff-list-flow-stats"}).appendTo(localCell);
                         $('<span class="red-ui-diff-status"></span>').text(RED._('diff.nodeCount',{count:localNodeCount})).appendTo(localStats);
 
-                        if (flowStats.conflicts + flowStats.local.addedCount + flowStats.local.changedCount + flowStats.local.deletedCount > 0) {
+                        if (flowStats.conflicts + flowStats.local.addedCount + flowStats.local.changedCount + flowStats.local.movedCount + flowStats.local.deletedCount > 0) {
                             $('<span class="red-ui-diff-status"> [ </span>').appendTo(localStats);
                             if (flowStats.conflicts > 0) {
                                 $('<span class="red-ui-diff-status-conflict"><span class="red-ui-diff-status"><i class="fa fa-exclamation"></i> '+flowStats.conflicts+'</span></span>').appendTo(localStats);
                             }
                             if (flowStats.local.addedCount > 0) {
-                                $('<span class="red-ui-diff-status-added"><span class="red-ui-diff-status"><i class="fa fa-plus-square"></i> '+flowStats.local.addedCount+'</span></span>').appendTo(localStats);
+                                const cell = $('<span class="red-ui-diff-status-added"><span class="red-ui-diff-status"><i class="fa fa-plus-square"></i> '+flowStats.local.addedCount+'</span></span>').appendTo(localStats);
+                                RED.popover.tooltip(cell, RED._('diff.type.added'))
                             }
                             if (flowStats.local.changedCount > 0) {
-                                $('<span class="red-ui-diff-status-changed"><span class="red-ui-diff-status"><i class="fa fa-square"></i> '+flowStats.local.changedCount+'</span></span>').appendTo(localStats);
+                                const cell = $('<span class="red-ui-diff-status-changed"><span class="red-ui-diff-status"><i class="fa fa-square"></i> '+flowStats.local.changedCount+'</span></span>').appendTo(localStats);
+                                RED.popover.tooltip(cell, RED._('diff.type.changed'))
+                            }
+                            if (flowStats.local.movedCount > 0) {
+                                const cell = $('<span class="red-ui-diff-status-moved"><span class="red-ui-diff-status"><i class="fa fa-square"></i> '+flowStats.local.movedCount+'</span></span>').appendTo(localStats);
+                                RED.popover.tooltip(cell, RED._('diff.type.moved'))
                             }
                             if (flowStats.local.deletedCount > 0) {
-                                $('<span class="red-ui-diff-status-deleted"><span class="red-ui-diff-status"><i class="fa fa-minus-square"></i> '+flowStats.local.deletedCount+'</span></span>').appendTo(localStats);
+                                const cell = $('<span class="red-ui-diff-status-deleted"><span class="red-ui-diff-status"><i class="fa fa-minus-square"></i> '+flowStats.local.deletedCount+'</span></span>').appendTo(localStats);
+                                RED.popover.tooltip(cell, RED._('diff.type.deleted'))
                             }
                             $('<span class="red-ui-diff-status"> ] </span>').appendTo(localStats);
                         }
@@ -17070,19 +17794,26 @@ RED.diagnostics = (function () {
                             }
                             var remoteStats = $('<span>',{class:"red-ui-diff-list-flow-stats"}).appendTo(remoteCell);
                             $('<span class="red-ui-diff-status"></span>').text(RED._('diff.nodeCount',{count:remoteNodeCount})).appendTo(remoteStats);
-                            if (flowStats.conflicts + flowStats.remote.addedCount + flowStats.remote.changedCount + flowStats.remote.deletedCount > 0) {
+                            if (flowStats.conflicts + flowStats.remote.addedCount + flowStats.remote.changedCount + flowStats.remote.movedCount + flowStats.remote.deletedCount > 0) {
                                 $('<span class="red-ui-diff-status"> [ </span>').appendTo(remoteStats);
                                 if (flowStats.conflicts > 0) {
                                     $('<span class="red-ui-diff-status-conflict"><span class="red-ui-diff-status"><i class="fa fa-exclamation"></i> '+flowStats.conflicts+'</span></span>').appendTo(remoteStats);
                                 }
                                 if (flowStats.remote.addedCount > 0) {
-                                    $('<span class="red-ui-diff-status-added"><span class="red-ui-diff-status"><i class="fa fa-plus-square"></i> '+flowStats.remote.addedCount+'</span></span>').appendTo(remoteStats);
+                                    const cell = $('<span class="red-ui-diff-status-added"><span class="red-ui-diff-status"><i class="fa fa-plus-square"></i> '+flowStats.remote.addedCount+'</span></span>').appendTo(remoteStats);
+                                    RED.popover.tooltip(cell, RED._('diff.type.added'))
                                 }
                                 if (flowStats.remote.changedCount > 0) {
-                                    $('<span class="red-ui-diff-status-changed"><span class="red-ui-diff-status"><i class="fa fa-square"></i> '+flowStats.remote.changedCount+'</span></span>').appendTo(remoteStats);
+                                    const cell = $('<span class="red-ui-diff-status-changed"><span class="red-ui-diff-status"><i class="fa fa-square"></i> '+flowStats.remote.changedCount+'</span></span>').appendTo(remoteStats);
+                                    RED.popover.tooltip(cell, RED._('diff.type.changed'))
+                                }
+                                if (flowStats.remote.movedCount > 0) {
+                                    const cell = $('<span class="red-ui-diff-status-moved"><span class="red-ui-diff-status"><i class="fa fa-square"></i> '+flowStats.remote.movedCount+'</span></span>').appendTo(remoteStats);
+                                    RED.popover.tooltip(cell, RED._('diff.type.moved'))
                                 }
                                 if (flowStats.remote.deletedCount > 0) {
-                                    $('<span class="red-ui-diff-status-deleted"><span class="red-ui-diff-status"><i class="fa fa-minus-square"></i> '+flowStats.remote.deletedCount+'</span></span>').appendTo(remoteStats);
+                                    const cell = $('<span class="red-ui-diff-status-deleted"><span class="red-ui-diff-status"><i class="fa fa-minus-square"></i> '+flowStats.remote.deletedCount+'</span></span>').appendTo(remoteStats);
+                                    RED.popover.tooltip(cell, RED._('diff.type.deleted'))
                                 }
                                 $('<span class="red-ui-diff-status"> ] </span>').appendTo(remoteStats);
                             }
@@ -17117,7 +17848,7 @@ RED.diagnostics = (function () {
         if (options.mode === "merge") {
             diffPanel.addClass("red-ui-diff-panel-merge");
         }
-        var diffList = createDiffTable(diffPanel, diff);
+        var diffList = createDiffTable(diffPanel, diff, options);
 
         var localDiff = diff.localDiff;
         var remoteDiff = diff.remoteDiff;
@@ -17340,7 +18071,6 @@ RED.diagnostics = (function () {
 
         var hasChanges = false; // exists in original and local/remote but with changes
         var unChanged = true; // existing in original,local,remote unchanged
-        var localChanged = false;
 
         if (localDiff.added[node.id]) {
             stats.local.addedCount++;
@@ -17359,12 +18089,20 @@ RED.diagnostics = (function () {
             unChanged = false;
         }
         if (localDiff.changed[node.id]) {
-            stats.local.changedCount++;
+            if (localDiff.positionChanged[node.id]) {
+                stats.local.movedCount++
+            } else {
+                stats.local.changedCount++;
+            }
             hasChanges = true;
             unChanged = false;
         }
         if (remoteDiff && remoteDiff.changed[node.id]) {
-            stats.remote.changedCount++;
+            if (remoteDiff.positionChanged[node.id]) {
+                stats.remote.movedCount++
+            } else {
+                stats.remote.changedCount++;
+            }
             hasChanges = true;
             unChanged = false;
         }
@@ -17429,27 +18167,32 @@ RED.diagnostics = (function () {
                     localNodeDiv.addClass("red-ui-diff-status-moved");
                     var localMovedMessage = "";
                     if (node.z === localN.z) {
-                        localMovedMessage = RED._("diff.type.movedFrom",{id:(localDiff.currentConfig.all[node.id].z||'global')});
+                        const movedFromNodeTab = localDiff.currentConfig.all[localDiff.currentConfig.all[node.id].z]
+                        const movedFromLabel = `'${movedFromNodeTab ? (movedFromNodeTab.label || movedFromNodeTab.id) : 'global'}'`
+                        localMovedMessage = RED._("diff.type.movedFrom",{id: movedFromLabel});
                     } else {
-                        localMovedMessage = RED._("diff.type.movedTo",{id:(localN.z||'global')});
+                        const movedToNodeTab = localDiff.newConfig.all[localN.z]
+                        const movedToLabel = `'${movedToNodeTab ? (movedToNodeTab.label || movedToNodeTab.id) : 'global'}'`
+                        localMovedMessage = RED._("diff.type.movedTo",{id:movedToLabel});
                     }
                     $('<span class="red-ui-diff-status"><i class="fa fa-caret-square-o-right"></i> '+localMovedMessage+'</span>').appendTo(localNodeDiv);
                 }
-                localChanged = true;
             } else if (localDiff.deleted[node.z]) {
                 localNodeDiv.addClass("red-ui-diff-empty");
-                localChanged = true;
             } else if (localDiff.deleted[node.id]) {
                 localNodeDiv.addClass("red-ui-diff-status-deleted");
                 $('<span class="red-ui-diff-status"><i class="fa fa-minus-square"></i> <span data-i18n="diff.type.deleted"></span></span>').appendTo(localNodeDiv);
-                localChanged = true;
             } else if (localDiff.changed[node.id]) {
                 if (localDiff.newConfig.all[node.id].z !== node.z) {
                     localNodeDiv.addClass("red-ui-diff-empty");
                 } else {
-                    localNodeDiv.addClass("red-ui-diff-status-changed");
-                    $('<span class="red-ui-diff-status"><i class="fa fa-square"></i> <span data-i18n="diff.type.changed"></span></span>').appendTo(localNodeDiv);
-                    localChanged = true;
+                    if (localDiff.positionChanged[node.id]) {
+                        localNodeDiv.addClass("red-ui-diff-status-moved");
+                        $('<span class="red-ui-diff-status"><i class="fa fa-square"></i> <span data-i18n="diff.type.moved"></span></span>').appendTo(localNodeDiv);
+                    } else {
+                        localNodeDiv.addClass("red-ui-diff-status-changed");
+                        $('<span class="red-ui-diff-status"><i class="fa fa-square"></i> <span data-i18n="diff.type.changed"></span></span>').appendTo(localNodeDiv);
+                    }
                 }
             } else {
                 if (localDiff.newConfig.all[node.id].z !== node.z) {
@@ -17470,9 +18213,13 @@ RED.diagnostics = (function () {
                         remoteNodeDiv.addClass("red-ui-diff-status-moved");
                         var remoteMovedMessage = "";
                         if (node.z === remoteN.z) {
-                            remoteMovedMessage = RED._("diff.type.movedFrom",{id:(remoteDiff.currentConfig.all[node.id].z||'global')});
+                            const movedFromNodeTab = remoteDiff.currentConfig.all[remoteDiff.currentConfig.all[node.id].z]
+                            const movedFromLabel = `'${movedFromNodeTab ? (movedFromNodeTab.label || movedFromNodeTab.id) : 'global'}'`
+                            remoteMovedMessage = RED._("diff.type.movedFrom",{id:movedFromLabel});
                         } else {
-                            remoteMovedMessage = RED._("diff.type.movedTo",{id:(remoteN.z||'global')});
+                            const movedToNodeTab = remoteDiff.newConfig.all[remoteN.z]
+                            const movedToLabel = `'${movedToNodeTab ? (movedToNodeTab.label || movedToNodeTab.id) : 'global'}'`
+                            remoteMovedMessage = RED._("diff.type.movedTo",{id:movedToLabel});
                         }
                         $('<span class="red-ui-diff-status"><i class="fa fa-caret-square-o-right"></i> '+remoteMovedMessage+'</span>').appendTo(remoteNodeDiv);
                     }
@@ -17485,8 +18232,13 @@ RED.diagnostics = (function () {
                     if (remoteDiff.newConfig.all[node.id].z !== node.z) {
                         remoteNodeDiv.addClass("red-ui-diff-empty");
                     } else {
-                        remoteNodeDiv.addClass("red-ui-diff-status-changed");
-                        $('<span class="red-ui-diff-status"><i class="fa fa-square"></i> <span data-i18n="diff.type.changed"></span></span>').appendTo(remoteNodeDiv);
+                        if (remoteDiff.positionChanged[node.id]) {
+                            remoteNodeDiv.addClass("red-ui-diff-status-moved");
+                            $('<span class="red-ui-diff-status"><i class="fa fa-square"></i> <span data-i18n="diff.type.moved"></span></span>').appendTo(remoteNodeDiv);
+                        } else {
+                            remoteNodeDiv.addClass("red-ui-diff-status-changed");
+                            $('<span class="red-ui-diff-status"><i class="fa fa-square"></i> <span data-i18n="diff.type.changed"></span></span>').appendTo(remoteNodeDiv);
+                        }
                     }
                 } else {
                     if (remoteDiff.newConfig.all[node.id].z !== node.z) {
@@ -17612,7 +18364,7 @@ RED.diagnostics = (function () {
             $("<td>",{class:"red-ui-diff-list-cell-label"}).text("position").appendTo(row);
             localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row);
             if (localNode) {
-                localCell.addClass("red-ui-diff-status-"+(localChanged?"changed":"unchanged"));
+                localCell.addClass("red-ui-diff-status-"+(localChanged?"moved":"unchanged"));
                 $('<span class="red-ui-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell);
                 element = $('<span class="red-ui-diff-list-element"></span>').appendTo(localCell);
                 var localPosition = {x:localNode.x,y:localNode.y};
@@ -17637,7 +18389,7 @@ RED.diagnostics = (function () {
 
             if (remoteNode !== undefined) {
                 remoteCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row);
-                remoteCell.addClass("red-ui-diff-status-"+(remoteChanged?"changed":"unchanged"));
+                remoteCell.addClass("red-ui-diff-status-"+(remoteChanged?"moved":"unchanged"));
                 if (remoteNode) {
                     $('<span class="red-ui-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell);
                     element = $('<span class="red-ui-diff-list-element"></span>').appendTo(remoteCell);
@@ -17923,11 +18675,11 @@ RED.diagnostics = (function () {
     //     var diff = generateDiff(originalFlow,nns);
     //     showDiff(diff);
     // }
-    function showRemoteDiff(diff) {
-        if (diff === undefined) {
-            getRemoteDiff(showRemoteDiff);
+    function showRemoteDiff(diff, options = {}) {
+        if (!diff) {
+            getRemoteDiff((remoteDiff) => showRemoteDiff(remoteDiff, options));
         } else {
-            showDiff(diff,{mode:'merge'});
+            showDiff(diff,{...options, mode:'merge'});
         }
     }
     function parseNodes(nodeList) {
@@ -17968,23 +18720,53 @@ RED.diagnostics = (function () {
         }
     }
     function generateDiff(currentNodes,newNodes) {
-        var currentConfig = parseNodes(currentNodes);
-        var newConfig = parseNodes(newNodes);
-        var added = {};
-        var deleted = {};
-        var changed = {};
-        var moved = {};
+        const currentConfig = parseNodes(currentNodes);
+        const newConfig = parseNodes(newNodes);
+        const added = {};
+        const deleted = {};
+        const changed = {};
+        const positionChanged = {};
+        const moved = {};
 
         Object.keys(currentConfig.all).forEach(function(id) {
-            var node = RED.nodes.workspace(id)||RED.nodes.subflow(id)||RED.nodes.node(id);
+            const node = RED.nodes.workspace(id)||RED.nodes.subflow(id)||RED.nodes.node(id);
             if (!newConfig.all.hasOwnProperty(id)) {
                 deleted[id] = true;
-            } else if (JSON.stringify(currentConfig.all[id]) !== JSON.stringify(newConfig.all[id])) {
+                return
+            }
+            const currentConfigJSON = JSON.stringify(currentConfig.all[id])
+            const newConfigJSON = JSON.stringify(newConfig.all[id])
+            
+            if (currentConfigJSON !== newConfigJSON) {
                 changed[id] = true;
-
                 if (currentConfig.all[id].z !== newConfig.all[id].z) {
                     moved[id] = true;
+                } else if (
+                    currentConfig.all[id].x !== newConfig.all[id].x ||
+                    currentConfig.all[id].y !== newConfig.all[id].y ||
+                    currentConfig.all[id].w !== newConfig.all[id].w ||
+                    currentConfig.all[id].h !== newConfig.all[id].h
+                ) {
+                    // This node's position on its parent has changed. We want to
+                    // check if this is the *only* change for this given node
+                    const currentNodeClone = JSON.parse(currentConfigJSON)
+                    const newNodeClone = JSON.parse(newConfigJSON)
+
+                    delete currentNodeClone.x
+                    delete currentNodeClone.y
+                    delete currentNodeClone.w
+                    delete currentNodeClone.h
+                    delete newNodeClone.x
+                    delete newNodeClone.y
+                    delete newNodeClone.w
+                    delete newNodeClone.h
+                    
+                    if (JSON.stringify(currentNodeClone) === JSON.stringify(newNodeClone)) {
+                        // Only the position has changed - everything else is the same
+                        positionChanged[id] = true
+                    }
                 }
+
             }
         });
         Object.keys(newConfig.all).forEach(function(id) {
@@ -17993,13 +18775,14 @@ RED.diagnostics = (function () {
             }
         });
 
-        var diff = {
-            currentConfig: currentConfig,
-            newConfig: newConfig,
-            added: added,
-            deleted: deleted,
-            changed: changed,
-            moved: moved
+        const diff = {
+            currentConfig,
+            newConfig,
+            added,
+            deleted,
+            changed,
+            positionChanged,
+            moved
         };
         return diff;
     }
@@ -18064,12 +18847,14 @@ RED.diagnostics = (function () {
         return diff;
     }
 
-    function showDiff(diff,options) {
+    function showDiff(diff, options) {
         if (diffVisible) {
             return;
         }
         options = options || {};
         var mode = options.mode || 'merge';
+        
+        options.hidePositionChanges = true
 
         var localDiff = diff.localDiff;
         var remoteDiff = diff.remoteDiff;
@@ -18139,6 +18924,9 @@ RED.diagnostics = (function () {
                         if (!$("#red-ui-diff-view-diff-merge").hasClass('disabled')) {
                             refreshConflictHeader(diff);
                             mergeDiff(diff);
+                            if (options.onmerge) {
+                                options.onmerge()
+                            }
                             RED.tray.close();
                         }
                     }
@@ -18169,6 +18957,7 @@ RED.diagnostics = (function () {
         var newConfig = [];
         var node;
         var nodeChangedStates = {};
+        var nodeMovedStates = {};
         var localChangedStates = {};
         for (id in localDiff.newConfig.all) {
             if (localDiff.newConfig.all.hasOwnProperty(id)) {
@@ -18176,12 +18965,14 @@ RED.diagnostics = (function () {
                 if (resolutions[id] === 'local') {
                     if (node) {
                         nodeChangedStates[id] = node.changed;
+                        nodeMovedStates[id] = node.moved;
                     }
                     newConfig.push(localDiff.newConfig.all[id]);
                 } else if (resolutions[id] === 'remote') {
                     if (!remoteDiff.deleted[id] && remoteDiff.newConfig.all.hasOwnProperty(id)) {
                         if (node) {
                             nodeChangedStates[id] = node.changed;
+                            nodeMovedStates[id] = node.moved;
                         }
                         localChangedStates[id] = 1;
                         newConfig.push(remoteDiff.newConfig.all[id]);
@@ -18205,8 +18996,9 @@ RED.diagnostics = (function () {
         }
         return {
             config: newConfig,
-            nodeChangedStates: nodeChangedStates,
-            localChangedStates: localChangedStates
+            nodeChangedStates,
+            nodeMovedStates,
+            localChangedStates
         }
     }
 
@@ -18217,6 +19009,7 @@ RED.diagnostics = (function () {
 
         var newConfig = appliedDiff.config;
         var nodeChangedStates = appliedDiff.nodeChangedStates;
+        var nodeMovedStates = appliedDiff.nodeMovedStates;
         var localChangedStates = appliedDiff.localChangedStates;
 
         var isDirty = RED.nodes.dirty();
@@ -18225,33 +19018,56 @@ RED.diagnostics = (function () {
             t:"replace",
             config: RED.nodes.createCompleteNodeSet(),
             changed: nodeChangedStates,
+            moved: nodeMovedStates,
+            complete: true,
             dirty: isDirty,
             rev: RED.nodes.version()
         }
 
         RED.history.push(historyEvent);
 
-        var originalFlow = RED.nodes.originalFlow();
-        // originalFlow is what the editor things it loaded
-        //  - add any newly added nodes from remote diff as they are now part of the record
-        for (var id in diff.remoteDiff.added) {
-            if (diff.remoteDiff.added.hasOwnProperty(id)) {
-                if (diff.remoteDiff.newConfig.all.hasOwnProperty(id)) {
-                    originalFlow.push(JSON.parse(JSON.stringify(diff.remoteDiff.newConfig.all[id])));
-                }
-            }
-        }
+        // var originalFlow = RED.nodes.originalFlow();
+        // // originalFlow is what the editor thinks it loaded
+        // //  - add any newly added nodes from remote diff as they are now part of the record
+        // for (var id in diff.remoteDiff.added) {
+        //     if (diff.remoteDiff.added.hasOwnProperty(id)) {
+        //         if (diff.remoteDiff.newConfig.all.hasOwnProperty(id)) {
+        //             originalFlow.push(JSON.parse(JSON.stringify(diff.remoteDiff.newConfig.all[id])));
+        //         }
+        //     }
+        // }
 
         RED.nodes.clear();
         var imported = RED.nodes.import(newConfig);
 
-        // Restore the original flow so subsequent merge resolutions can properly
-        // identify new-vs-old
-        RED.nodes.originalFlow(originalFlow);
+        // // Restore the original flow so subsequent merge resolutions can properly
+        // // identify new-vs-old
+        // RED.nodes.originalFlow(originalFlow);
+
+        // Clear all change flags from the import
+        RED.nodes.dirty(false);
+        
+        const flowsToLock = new Set()
+        function ensureUnlocked(id) {
+            const flow = id && (RED.nodes.workspace(id) || RED.nodes.subflow(id) || null);
+            const isLocked = flow ? flow.locked : false;
+            if (flow && isLocked) {
+                flow.locked = false;
+                flowsToLock.add(flow)
+            }
+        }
         imported.nodes.forEach(function(n) {
-            if (nodeChangedStates[n.id] || localChangedStates[n.id]) {
+            if (nodeChangedStates[n.id]) {
+                ensureUnlocked(n.z)
                 n.changed = true;
             }
+            if (nodeMovedStates[n.id]) {
+                ensureUnlocked(n.z)
+                n.moved = true;
+            }
+        })
+        flowsToLock.forEach(flow => {
+            flow.locked = true
         })
 
         RED.nodes.version(diff.remoteDiff.rev);
@@ -19920,10 +20736,6 @@ RED.keyboard = (function() {
     }
 
     function init(done) {
-        if (!RED.user.hasPermission("settings.write")) {
-            RED.notify(RED._("user.errors.settings"),"error");
-            return;
-        }
         RED.userSettings.add({
             id:'envvar',
             title: RED._("env-var.environment"),
@@ -20315,11 +21127,17 @@ RED.workspaces = (function() {
                 RED.sidebar.config.refresh();
                 RED.view.focus();
             },
-            onclick: function(tab) {
-                if (tab.id !== activeWorkspace) {
-                    addToViewStack(activeWorkspace);
+            onclick: function(tab, evt) {
+                if(evt.which === 2) {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                    RED.actions.invoke("core:hide-flow", tab)
+                } else {
+                    if (tab.id !== activeWorkspace) {
+                        addToViewStack(activeWorkspace);
+                    }
+                    RED.view.focus();
                 }
-                RED.view.focus();
             },
             ondblclick: function(tab) {
                 if (tab.type != "subflow") {
@@ -20357,6 +21175,7 @@ RED.workspaces = (function() {
                 if (tab.type === "tab") {
                     workspaceTabCount--;
                 } else {
+                    RED.events.emit("workspace:close",{workspace: tab.id})
                     hideStack.push(tab.id);
                 }
                 RED.menu.setDisabled("menu-item-workspace-delete",activeWorkspace === 0 || workspaceTabCount <= 1);
@@ -20447,6 +21266,11 @@ RED.workspaces = (function() {
         createWorkspaceTabs();
         RED.events.on("sidebar:resize",workspace_tabs.resize);
 
+        RED.events.on("workspace:clear", () => {
+            // Reset the index used to generate new flow names
+            workspaceIndex = 0
+        })
+
         RED.actions.add("core:show-next-tab",function() {
             var oldActive = activeWorkspace;
             workspace_tabs.nextTab();
@@ -20613,6 +21437,9 @@ RED.workspaces = (function() {
         RED.events.on("flows:change", (ws) => {
             $("#red-ui-tab-"+(ws.id.replace(".","-"))).toggleClass('red-ui-workspace-changed',!!(ws.contentsChanged || ws.changed || ws.added));
         })
+        RED.events.on("subflows:change", (ws) => {
+            $("#red-ui-tab-"+(ws.id.replace(".","-"))).toggleClass('red-ui-workspace-changed',!!(ws.contentsChanged || ws.changed || ws.added));
+        })
 
         hideWorkspace();
     }
@@ -21564,120 +22391,128 @@ RED.view = (function() {
                 }
                 d3.event = event;
                 var selected_tool = $(ui.draggable[0]).attr("data-palette-type");
-                var result = createNode(selected_tool);
-                if (!result) {
-                    return;
-                }
-                var historyEvent = result.historyEvent;
-                var nn = RED.nodes.add(result.node);
+                try {
+                    var result = createNode(selected_tool);
+                    if (!result) {
+                        return;
+                    }
+                    var historyEvent = result.historyEvent;
+                    var nn = RED.nodes.add(result.node);
 
-                var showLabel = RED.utils.getMessageProperty(RED.settings.get('editor'),"view.view-node-show-label");
-                if (showLabel !== undefined &&  (nn._def.hasOwnProperty("showLabel")?nn._def.showLabel:true) && !nn._def.defaults.hasOwnProperty("l")) {
-                    nn.l = showLabel;
-                }
+                    var showLabel = RED.utils.getMessageProperty(RED.settings.get('editor'),"view.view-node-show-label");
+                    if (showLabel !== undefined &&  (nn._def.hasOwnProperty("showLabel")?nn._def.showLabel:true) && !nn._def.defaults.hasOwnProperty("l")) {
+                        nn.l = showLabel;
+                    }
 
-                var helperOffset = d3.touches(ui.helper.get(0))[0]||d3.mouse(ui.helper.get(0));
-                var helperWidth = ui.helper.width();
-                var helperHeight = ui.helper.height();
-                var mousePos = d3.touches(this)[0]||d3.mouse(this);
+                    var helperOffset = d3.touches(ui.helper.get(0))[0]||d3.mouse(ui.helper.get(0));
+                    var helperWidth = ui.helper.width();
+                    var helperHeight = ui.helper.height();
+                    var mousePos = d3.touches(this)[0]||d3.mouse(this);
 
-                try {
-                    var isLink = (nn.type === "link in" || nn.type === "link out")
-                    var hideLabel = nn.hasOwnProperty('l')?!nn.l : isLink;
-
-                    var label = RED.utils.getNodeLabel(nn, nn.type);
-                    var labelParts = getLabelParts(label, "red-ui-flow-node-label");
-                    if (hideLabel) {
-                        nn.w = node_height;
-                        nn.h = Math.max(node_height,(nn.outputs || 0) * 15);
-                    } else {
-                        nn.w = Math.max(node_width,20*(Math.ceil((labelParts.width+50+(nn._def.inputs>0?7:0))/20)) );
-                        nn.h = Math.max(6+24*labelParts.lines.length,(nn.outputs || 0) * 15, 30);
+                    try {
+                        var isLink = (nn.type === "link in" || nn.type === "link out")
+                        var hideLabel = nn.hasOwnProperty('l')?!nn.l : isLink;
+
+                        var label = RED.utils.getNodeLabel(nn, nn.type);
+                        var labelParts = getLabelParts(label, "red-ui-flow-node-label");
+                        if (hideLabel) {
+                            nn.w = node_height;
+                            nn.h = Math.max(node_height,(nn.outputs || 0) * 15);
+                        } else {
+                            nn.w = Math.max(node_width,20*(Math.ceil((labelParts.width+50+(nn._def.inputs>0?7:0))/20)) );
+                            nn.h = Math.max(6+24*labelParts.lines.length,(nn.outputs || 0) * 15, 30);
+                        }
+                    } catch(err) {
                     }
-                } catch(err) {
-                }
 
-                mousePos[1] += this.scrollTop + ((helperHeight/2)-helperOffset[1]);
-                mousePos[0] += this.scrollLeft + ((helperWidth/2)-helperOffset[0]);
-                mousePos[1] /= scaleFactor;
-                mousePos[0] /= scaleFactor;
+                    mousePos[1] += this.scrollTop + ((helperHeight/2)-helperOffset[1]);
+                    mousePos[0] += this.scrollLeft + ((helperWidth/2)-helperOffset[0]);
+                    mousePos[1] /= scaleFactor;
+                    mousePos[0] /= scaleFactor;
 
-                nn.x = mousePos[0];
-                nn.y = mousePos[1];
+                    nn.x = mousePos[0];
+                    nn.y = mousePos[1];
 
-                var minX = nn.w/2 -5;
-                if (nn.x < minX) {
-                    nn.x = minX;
-                }
-                var minY = nn.h/2 -5;
-                if (nn.y < minY) {
-                    nn.y = minY;
-                }
-                var maxX = space_width -nn.w/2 +5;
-                if (nn.x > maxX) {
-                    nn.x = maxX;
-                }
-                var maxY = space_height -nn.h +5;
-                if (nn.y > maxY) {
-                    nn.y = maxY;
-                }
-
-                if (snapGrid) {
-                    var gridOffset = RED.view.tools.calculateGridSnapOffsets(nn);
-                    nn.x -= gridOffset.x;
-                    nn.y -= gridOffset.y;
-                }
+                    var minX = nn.w/2 -5;
+                    if (nn.x < minX) {
+                        nn.x = minX;
+                    }
+                    var minY = nn.h/2 -5;
+                    if (nn.y < minY) {
+                        nn.y = minY;
+                    }
+                    var maxX = space_width -nn.w/2 +5;
+                    if (nn.x > maxX) {
+                        nn.x = maxX;
+                    }
+                    var maxY = space_height -nn.h +5;
+                    if (nn.y > maxY) {
+                        nn.y = maxY;
+                    }
 
-                var linkToSplice = $(ui.helper).data("splice");
-                if (linkToSplice) {
-                    spliceLink(linkToSplice, nn, historyEvent)
-                }
+                    if (snapGrid) {
+                        var gridOffset = RED.view.tools.calculateGridSnapOffsets(nn);
+                        nn.x -= gridOffset.x;
+                        nn.y -= gridOffset.y;
+                    }
 
-                var group = $(ui.helper).data("group");
-                if (group) {
-                    var oldX = group.x; 
-                    var oldY = group.y; 
-                    RED.group.addToGroup(group, nn);
-                    var moveEvent = null;
-                    if ((group.x !== oldX) ||
-                        (group.y !== oldY)) {
-                        moveEvent = {
-                            t: "move",
-                            nodes: [{n: group,
-                                     ox: oldX, oy: oldY,
-                                     dx: group.x -oldX,
-                                     dy: group.y -oldY}],
-                            dirty: true
-                        };
+                    var linkToSplice = $(ui.helper).data("splice");
+                    if (linkToSplice) {
+                        spliceLink(linkToSplice, nn, historyEvent)
                     }
-                    historyEvent = {
-                        t: 'multi',
-                        events: [historyEvent],
 
-                    };
-                    if (moveEvent) {
-                        historyEvent.events.push(moveEvent)
+                    var group = $(ui.helper).data("group");
+                    if (group) {
+                        var oldX = group.x; 
+                        var oldY = group.y; 
+                        RED.group.addToGroup(group, nn);
+                        var moveEvent = null;
+                        if ((group.x !== oldX) ||
+                            (group.y !== oldY)) {
+                            moveEvent = {
+                                t: "move",
+                                nodes: [{n: group,
+                                        ox: oldX, oy: oldY,
+                                        dx: group.x -oldX,
+                                        dy: group.y -oldY}],
+                                dirty: true
+                            };
+                        }
+                        historyEvent = {
+                            t: 'multi',
+                            events: [historyEvent],
+
+                        };
+                        if (moveEvent) {
+                            historyEvent.events.push(moveEvent)
+                        }
+                        historyEvent.events.push({
+                            t: "addToGroup",
+                            group: group,
+                            nodes: nn
+                        })
                     }
-                    historyEvent.events.push({
-                        t: "addToGroup",
-                        group: group,
-                        nodes: nn
-                    })
-                }
 
-                RED.history.push(historyEvent);
-                RED.editor.validateNode(nn);
-                RED.nodes.dirty(true);
-                // auto select dropped node - so info shows (if visible)
-                clearSelection();
-                nn.selected = true;
-                movingSet.add(nn);
-                updateActiveNodes();
-                updateSelection();
-                redraw();
+                    RED.history.push(historyEvent);
+                    RED.editor.validateNode(nn);
+                    RED.nodes.dirty(true);
+                    // auto select dropped node - so info shows (if visible)
+                    clearSelection();
+                    nn.selected = true;
+                    movingSet.add(nn);
+                    updateActiveNodes();
+                    updateSelection();
+                    redraw();
 
-                if (nn._def.autoedit) {
-                    RED.editor.edit(nn);
+                    if (nn._def.autoedit) {
+                        RED.editor.edit(nn);
+                    }
+                } catch (error) {
+                    if (error.code != "NODE_RED") {
+                        RED.notify(RED._("notification.error",{message:error.toString()}),"error");
+                    } else {
+                        RED.notify(RED._("notification.error",{message:error.message}),"error");
+                    }
                 }
             }
         });
@@ -26981,14 +27816,19 @@ RED.view = (function() {
      function createNode(type, x, y, z) {
         const wasDirty = RED.nodes.dirty()
         var m = /^subflow:(.+)$/.exec(type);
-        var activeSubflow = z ? RED.nodes.subflow(z) : null;
+        var activeSubflow = (z || RED.workspaces.active()) ? RED.nodes.subflow(z || RED.workspaces.active()) : null;
+
         if (activeSubflow && m) {
             var subflowId = m[1];
+            let err
             if (subflowId === activeSubflow.id) {
-                throw new Error(RED._("notification.error", { message: RED._("notification.errors.cannotAddSubflowToItself") }))
+                err = new Error(RED._("notification.errors.cannotAddSubflowToItself"))
+            } else if (RED.nodes.subflowContains(m[1], activeSubflow.id)) {
+                err = new Error(RED._("notification.errors.cannotAddCircularReference"))
             }
-            if (RED.nodes.subflowContains(m[1], activeSubflow.id)) {
-                throw new Error(RED._("notification.error", { message: RED._("notification.errors.cannotAddCircularReference") }))
+            if (err) {
+                err.code = 'NODE_RED'
+                throw err
             }
         }
 
@@ -27377,14 +28217,27 @@ RED.view = (function() {
                     addAnnotation(evt.node.__pendingAnnotation__,evt);
                     delete evt.node.__pendingAnnotation__;
                 }
-                var badgeDX = 0;
-                var controlDX = 0;
-                for (var i=0,l=evt.el.__annotations__.length;i<l;i++) {
-                    var annotation = evt.el.__annotations__[i];
+                let badgeRDX = 0;
+                let badgeLDX = 0;
+                
+                for (let i=0,l=evt.el.__annotations__.length;i<l;i++) {
+                    const annotation = evt.el.__annotations__[i];
                     if (annotations.hasOwnProperty(annotation.id)) {
-                        var opts = annotations[annotation.id];
-                        var showAnnotation = true;
-                        var isBadge = opts.type === 'badge';
+                        const opts = annotations[annotation.id];
+                        let showAnnotation = true;
+                        const isBadge = opts.type === 'badge';
+                        if (opts.refresh !== undefined) {
+                            let refreshAnnotation = false
+                            if (typeof opts.refresh === "string") {
+                                refreshAnnotation = !!evt.node[opts.refresh]
+                                delete evt.node[opts.refresh]
+                            } else if (typeof opts.refresh === "function") {
+                                refreshAnnotation = opts.refresh(evnt.node)
+                            }
+                            if (refreshAnnotation) {
+                                refreshAnnotationElement(annotation.id, annotation.node, annotation.element)
+                            }
+                        }
                         if (opts.show !== undefined) {
                             if (typeof opts.show === "string") {
                                 showAnnotation = !!evt.node[opts.show]
@@ -27397,17 +28250,24 @@ RED.view = (function() {
                         }
                         if (isBadge) {
                             if (showAnnotation) {
-                                var rect = annotation.element.getBoundingClientRect();
-                                badgeDX += rect.width;
-                                annotation.element.setAttribute("transform", "translate("+(evt.node.w-3-badgeDX)+", -8)");
-                                badgeDX += 4;
-                            }
-                        } else {
-                            if (showAnnotation) {
-                                var rect = annotation.element.getBoundingClientRect();
-                                annotation.element.setAttribute("transform", "translate("+(3+controlDX)+", -12)");
-                                controlDX += rect.width + 4;
+                                const rect = annotation.element.getBoundingClientRect();
+                                let annotationX
+                                if (!opts.align || opts.align === 'right') {
+                                    annotationX = evt.node.w - 3 - badgeRDX - rect.width
+                                    badgeRDX += rect.width + 4;
+
+                                } else if (opts.align === 'left') {
+                                    annotationX = 3 + badgeLDX
+                                    badgeLDX += rect.width + 4;
+                                }
+                                annotation.element.setAttribute("transform", "translate("+annotationX+", -8)");
                             }
+                        // } else {
+                        //     if (showAnnotation) {
+                        //         var rect = annotation.element.getBoundingClientRect();
+                        //         annotation.element.setAttribute("transform", "translate("+(3+controlDX)+", -12)");
+                        //         controlDX += rect.width + 4;
+                        //     }
                         }
                     } else {
                         annotation.element.parentNode.removeChild(annotation.element);
@@ -27463,15 +28323,25 @@ RED.view = (function() {
         annotationGroup.setAttribute("class",opts.class || "");
         evt.el.__annotations__.push({
             id:id,
+            node: evt.node,
             element: annotationGroup
         });
-        var annotation = opts.element(evt.node);
+        refreshAnnotationElement(id, evt.node, annotationGroup)
+        evt.el.appendChild(annotationGroup);
+    }
+
+    function refreshAnnotationElement(id, node, annotationGroup) {
+        const opts = annotations[id];
+        const annotation = opts.element(node);
         if (opts.tooltip) {
-            annotation.addEventListener("mouseenter", getAnnotationMouseEnter(annotation,evt.node,opts.tooltip));
+            annotation.addEventListener("mouseenter", getAnnotationMouseEnter(annotation, node, opts.tooltip));
             annotation.addEventListener("mouseleave", annotationMouseLeave);
         }
+        if (annotationGroup.hasChildNodes()) {
+            annotationGroup.removeChild(annotationGroup.firstChild)
+        }
         annotationGroup.appendChild(annotation);
-        evt.el.appendChild(annotationGroup);
+
     }
 
 
@@ -29427,6 +30297,10 @@ RED.palette = (function() {
     var categoryContainers = {};
     var sidebarControls;
 
+    let paletteState = { filter: "", collapsed: [] };
+
+    let filterRefreshTimeout
+
     function createCategory(originalCategory,rootCategory,category,ns) {
         if ($("#red-ui-palette-base-category-"+rootCategory).length === 0) {
             createCategoryContainer(originalCategory,rootCategory, ns+":palette.label."+rootCategory);
@@ -29452,20 +30326,57 @@ RED.palette = (function() {
         catDiv.data('label',label);
         categoryContainers[category] = {
             container: catDiv,
-            close: function() {
+            hide: function (instant) {
+                if (instant) {
+                    catDiv.hide()
+                } else {
+                    catDiv.slideUp()
+                }
+            },
+            show: function () {
+                catDiv.show()
+            },
+            isOpen: function () {
+                return !!catDiv.hasClass("red-ui-palette-open")
+            },
+            getNodeCount: function (visibleOnly) {
+                const nodes = catDiv.find(".red-ui-palette-node")
+                if (visibleOnly) {
+                    return nodes.filter(function() { return $(this).css('display') !== 'none'}).length
+                } else {
+                    return nodes.length
+                }
+            },
+            close: function(instant, skipSaveState) {
                 catDiv.removeClass("red-ui-palette-open");
                 catDiv.addClass("red-ui-palette-closed");
-                $("#red-ui-palette-base-category-"+category).slideUp();
+                if (instant) {
+                    $("#red-ui-palette-base-category-"+category).hide();
+                } else {
+                    $("#red-ui-palette-base-category-"+category).slideUp();
+                }
                 $("#red-ui-palette-header-"+category+" i").removeClass("expanded");
+                if (!skipSaveState) {
+                    if (!paletteState.collapsed.includes(category)) {
+                        paletteState.collapsed.push(category);
+                        savePaletteState();
+                    }
+                }
             },
-            open: function() {
+            open: function(skipSaveState) {
                 catDiv.addClass("red-ui-palette-open");
                 catDiv.removeClass("red-ui-palette-closed");
                 $("#red-ui-palette-base-category-"+category).slideDown();
                 $("#red-ui-palette-header-"+category+" i").addClass("expanded");
+                if (!skipSaveState) {
+                    if (paletteState.collapsed.includes(category)) {
+                        paletteState.collapsed.splice(paletteState.collapsed.indexOf(category), 1);
+                        savePaletteState();
+                    }
+                }
             },
             toggle: function() {
-                if (catDiv.hasClass("red-ui-palette-open")) {
+                if (categoryContainers[category].isOpen()) {
                     categoryContainers[category].close();
                 } else {
                     categoryContainers[category].open();
@@ -29807,8 +30718,16 @@ RED.palette = (function() {
 
             var categoryNode = $("#red-ui-palette-container-"+rootCategory);
             if (categoryNode.find(".red-ui-palette-node").length === 1) {
-                categoryContainers[rootCategory].open();
+                if (!paletteState?.collapsed?.includes(rootCategory)) {
+                    categoryContainers[rootCategory].open();
+                } else {
+                    categoryContainers[rootCategory].close(true);
+                }
             }
+            clearTimeout(filterRefreshTimeout)
+            filterRefreshTimeout = setTimeout(() => {
+                refreshFilter()
+            }, 200)
 
         }
     }
@@ -29908,7 +30827,8 @@ RED.palette = (function() {
         paletteNode.css("backgroundColor", sf.color);
     }
 
-    function filterChange(val) {
+    function refreshFilter() {
+        const val = $("#red-ui-palette-search input").val()
         var re = new RegExp(val.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'),'i');
         $("#red-ui-palette-container .red-ui-palette-node").each(function(i,el) {
             var currentLabel = $(el).attr("data-palette-label");
@@ -29920,16 +30840,26 @@ RED.palette = (function() {
             }
         });
 
-        for (var category in categoryContainers) {
+        for (let category in categoryContainers) {
             if (categoryContainers.hasOwnProperty(category)) {
-                if (categoryContainers[category].container
-                        .find(".red-ui-palette-node")
-                        .filter(function() { return $(this).css('display') !== 'none'}).length === 0) {
-                    categoryContainers[category].close();
-                    categoryContainers[category].container.slideUp();
+                const categorySection = categoryContainers[category]
+                if (categorySection.getNodeCount(true) === 0) {
+                    categorySection.hide()
                 } else {
-                    categoryContainers[category].open();
-                    categoryContainers[category].container.show();
+                    categorySection.show()
+                    if (val) {
+                        // There is a filter being applied and it has matched
+                        // something in this category - show the contents
+                        categorySection.open(true)
+                    } else {
+                        // No filter. Only show the category if it isn't in lastState
+                        if (!paletteState.collapsed.includes(category)) {
+                            categorySection.open(true)
+                        } else if (categorySection.isOpen()) {
+                            // This section should be collapsed but isn't - so make it so
+                            categorySection.close(true, true)
+                        }
+                    }
                 }
             }
         }
@@ -29945,6 +30875,9 @@ RED.palette = (function() {
 
         $("#red-ui-palette > .red-ui-palette-spinner").show();
 
+        RED.events.on('logout', function () {
+            RED.settings.removeLocal('palette-state')
+        })
 
         RED.events.on('registry:node-type-added', function(nodeType) {
             var def = RED.nodes.getType(nodeType);
@@ -29988,14 +30921,14 @@ RED.palette = (function() {
 
         RED.events.on("subflows:change",refreshSubflow);
 
-
-
         $("#red-ui-palette-search input").searchBox({
             delay: 100,
             change: function() {
-                filterChange($(this).val());
+                refreshFilter();
+                paletteState.filter = $(this).val();
+                savePaletteState();
             }
-        })
+        });
 
         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");
@@ -30061,7 +30994,23 @@ RED.palette = (function() {
                 togglePalette(state);
             }
         });
+
+        try {
+            paletteState = JSON.parse(RED.settings.getLocal("palette-state") || '{"filter":"", "collapsed": []}');
+            if (paletteState.filter) {
+                // Apply the category filter
+                $("#red-ui-palette-search input").searchBox("value", paletteState.filter);
+            }
+        } catch (error) {
+            console.error("Unexpected error loading palette state from localStorage: ", error);
+        }
+        setTimeout(() => {
+            // Lazily tidy up any categories that haven't been reloaded
+            paletteState.collapsed = paletteState.collapsed.filter(category => !!categoryContainers[category])
+            savePaletteState()
+        }, 10000)
     }
+
     function togglePalette(state) {
         if (!state) {
             $("#red-ui-main-container").addClass("red-ui-palette-closed");
@@ -30081,6 +31030,15 @@ RED.palette = (function() {
         })
         return categories;
     }
+
+    function savePaletteState() {
+        try {
+            RED.settings.setLocal("palette-state", JSON.stringify(paletteState));
+        } catch (error) {
+            console.error("Unexpected error saving palette state to localStorage: ", error);
+        }
+    }
+
     return {
         init: init,
         add:addNodeType,
@@ -31570,8 +32528,10 @@ RED.sidebar.help = (function() {
 
     function refreshSubflow(sf) {
         var item = treeList.treeList('get',"node-type:subflow:"+sf.id);
-        item.subflowLabel = sf._def.label().toLowerCase();
-        item.treeList.replaceElement(getNodeLabel({_def:sf._def,type:sf._def.label()}));
+        if (item) {
+            item.subflowLabel = sf._def.label().toLowerCase();
+            item.treeList.replaceElement(getNodeLabel({_def:sf._def,type:sf._def.label()}));
+        }
     }
 
     function hideTOC() {
@@ -32823,7 +33783,7 @@ RED.palette.editor = (function() {
         }).done(function(data,textStatus,xhr) {
             callback();
         }).fail(function(xhr,textStatus,err) {
-            callback(xhr);
+            callback(xhr,textStatus,err);
         });
     }
     function removeNodeModule(id,callback) {
@@ -32938,86 +33898,106 @@ RED.palette.editor = (function() {
             var moduleInfo = nodeEntries[module].info;
             var nodeEntry = nodeEntries[module].elements;
             if (nodeEntry) {
-                var activeTypeCount = 0;
-                var typeCount = 0;
-                var errorCount = 0;
-                nodeEntry.errorList.empty();
-                nodeEntries[module].totalUseCount = 0;
-                nodeEntries[module].setUseCount = {};
-
-                for (var setName in moduleInfo.sets) {
-                    if (moduleInfo.sets.hasOwnProperty(setName)) {
-                        var inUseCount = 0;
-                        var set = moduleInfo.sets[setName];
-                        var setElements = nodeEntry.sets[setName];
-                        if (set.err) {
-                            errorCount++;
-                            var errMessage = set.err;
-                            if (set.err.message) {
-                                errMessage = set.err.message;
-                            } else if (set.err.code) {
-                                errMessage = set.err.code;
-                            }
-                            $("<li>").text(errMessage).appendTo(nodeEntry.errorList);
-                        }
-                        if (set.enabled) {
-                            activeTypeCount += set.types.length;
-                        }
-                        typeCount += set.types.length;
-                        for (var i=0;i<moduleInfo.sets[setName].types.length;i++) {
-                            var t = moduleInfo.sets[setName].types[i];
-                            inUseCount += (typesInUse[t]||0);
-                            var swatch = setElements.swatches[t];
-                            if (set.enabled) {
-                                var def = RED.nodes.getType(t);
-                                if (def && def.color) {
-                                    swatch.css({background:RED.utils.getNodeColor(t,def)});
-                                    swatch.css({border: "1px solid "+getContrastingBorder(swatch.css('backgroundColor'))})
-                                }
+                if (moduleInfo.plugin) {
+                    nodeEntry.enableButton.hide();
+                    nodeEntry.removeButton.show();
+
+                    let pluginCount = 0;
+                    for (let setName in moduleInfo.sets) {
+                        if (moduleInfo.sets.hasOwnProperty(setName)) {
+                            let set = moduleInfo.sets[setName];
+                            if (set.plugins) {
+                                pluginCount += set.plugins.length;
                             }
                         }
-                        nodeEntries[module].setUseCount[setName] = inUseCount;
-                        nodeEntries[module].totalUseCount += inUseCount;
+                    }
+                    
+                    nodeEntry.setCount.text(RED._('palette.editor.pluginCount',{count:pluginCount,label:pluginCount}));
 
-                        if (inUseCount > 0) {
-                            setElements.enableButton.text(RED._('palette.editor.inuse'));
-                            setElements.enableButton.addClass('disabled');
-                        } else {
-                            setElements.enableButton.removeClass('disabled');
+                } else {
+                    var activeTypeCount = 0;
+                    var typeCount = 0;
+                    var errorCount = 0;
+                    nodeEntry.errorList.empty();
+                    nodeEntries[module].totalUseCount = 0;
+                    nodeEntries[module].setUseCount = {};
+
+                    for (var setName in moduleInfo.sets) {
+                        if (moduleInfo.sets.hasOwnProperty(setName)) {
+                            var inUseCount = 0;
+                            const set = moduleInfo.sets[setName];
+                            const setElements = nodeEntry.sets[setName]
+
+                            if (set.err) {
+                                errorCount++;
+                                var errMessage = set.err;
+                                if (set.err.message) {
+                                    errMessage = set.err.message;
+                                } else if (set.err.code) {
+                                    errMessage = set.err.code;
+                                }
+                                $("<li>").text(errMessage).appendTo(nodeEntry.errorList);
+                            }
                             if (set.enabled) {
-                                setElements.enableButton.text(RED._('palette.editor.disable'));
-                            } else {
-                                setElements.enableButton.text(RED._('palette.editor.enable'));
+                                activeTypeCount += set.types.length;
+                            }
+                            typeCount += set.types.length;
+                            for (var i=0;i<moduleInfo.sets[setName].types.length;i++) {
+                                var t = moduleInfo.sets[setName].types[i];
+                                inUseCount += (typesInUse[t]||0);
+                                if (setElements && set.enabled) {
+                                    var def = RED.nodes.getType(t);
+                                    if (def && def.color) {
+                                        setElements.swatches[t].css({background:RED.utils.getNodeColor(t,def)});
+                                        setElements.swatches[t].css({border: "1px solid "+getContrastingBorder(setElements.swatches[t].css('backgroundColor'))})
+                                    }
+                                }
+                            }
+                            nodeEntries[module].setUseCount[setName] = inUseCount;
+                            nodeEntries[module].totalUseCount += inUseCount;
+
+                            if (setElements) {
+                                if (inUseCount > 0) {
+                                    setElements.enableButton.text(RED._('palette.editor.inuse'));
+                                    setElements.enableButton.addClass('disabled');
+                                } else {
+                                    setElements.enableButton.removeClass('disabled');
+                                    if (set.enabled) {
+                                        setElements.enableButton.text(RED._('palette.editor.disable'));
+                                    } else {
+                                        setElements.enableButton.text(RED._('palette.editor.enable'));
+                                    }
+                                }
+                                setElements.setRow.toggleClass("red-ui-palette-module-set-disabled",!set.enabled);
                             }
                         }
-                        setElements.setRow.toggleClass("red-ui-palette-module-set-disabled",!set.enabled);
                     }
-                }
 
-                if (errorCount === 0) {
-                    nodeEntry.errorRow.hide()
-                } else {
-                    nodeEntry.errorRow.show();
-                }
+                    if (errorCount === 0) {
+                        nodeEntry.errorRow.hide()
+                    } else {
+                        nodeEntry.errorRow.show();
+                    }
 
-                var nodeCount = (activeTypeCount === typeCount)?typeCount:activeTypeCount+" / "+typeCount;
-                nodeEntry.setCount.text(RED._('palette.editor.nodeCount',{count:typeCount,label:nodeCount}));
+                    var nodeCount = (activeTypeCount === typeCount)?typeCount:activeTypeCount+" / "+typeCount;
+                    nodeEntry.setCount.text(RED._('palette.editor.nodeCount',{count:typeCount,label:nodeCount}));
 
-                if (nodeEntries[module].totalUseCount > 0) {
-                    nodeEntry.enableButton.text(RED._('palette.editor.inuse'));
-                    nodeEntry.enableButton.addClass('disabled');
-                    nodeEntry.removeButton.hide();
-                } else {
-                    nodeEntry.enableButton.removeClass('disabled');
-                    if (moduleInfo.local) {
-                        nodeEntry.removeButton.css('display', 'inline-block');
-                    }
-                    if (activeTypeCount === 0) {
-                        nodeEntry.enableButton.text(RED._('palette.editor.enableall'));
+                    if (nodeEntries[module].totalUseCount > 0) {
+                        nodeEntry.enableButton.text(RED._('palette.editor.inuse'));
+                        nodeEntry.enableButton.addClass('disabled');
+                        nodeEntry.removeButton.hide();
                     } else {
-                        nodeEntry.enableButton.text(RED._('palette.editor.disableall'));
+                        nodeEntry.enableButton.removeClass('disabled');
+                        if (moduleInfo.local) {
+                            nodeEntry.removeButton.css('display', 'inline-block');
+                        }
+                        if (activeTypeCount === 0) {
+                            nodeEntry.enableButton.text(RED._('palette.editor.enableall'));
+                        } else {
+                            nodeEntry.enableButton.text(RED._('palette.editor.disableall'));
+                        }
+                        nodeEntry.container.toggleClass("disabled",(activeTypeCount === 0));
                     }
-                    nodeEntry.container.toggleClass("disabled",(activeTypeCount === 0));
                 }
             }
             if (moduleInfo.pending_version) {
@@ -33368,6 +34348,33 @@ RED.palette.editor = (function() {
                 }
             }
         })
+
+        RED.events.on("registry:plugin-module-added", function(module) {
+
+            if (!nodeEntries.hasOwnProperty(module)) {
+                nodeEntries[module] = {info:RED.plugins.getModule(module)};
+                var index = [module];
+                for (var s in nodeEntries[module].info.sets) {
+                    if (nodeEntries[module].info.sets.hasOwnProperty(s)) {
+                        index.push(s);
+                        index = index.concat(nodeEntries[module].info.sets[s].types)
+                    }
+                }
+                nodeEntries[module].index = index.join(",").toLowerCase();
+                nodeList.editableList('addItem', nodeEntries[module]);
+            } else {
+                _refreshNodeModule(module);
+            }
+
+            for (var i=0;i<filteredList.length;i++) {
+                if (filteredList[i].info.id === module) {
+                    var installButton = filteredList[i].elements.installButton;
+                    installButton.addClass('disabled');
+                    installButton.text(RED._('palette.editor.installed'));
+                    break;
+                }
+            }
+        });
     }
 
     var settingsPane;
@@ -33494,6 +34501,7 @@ RED.palette.editor = (function() {
                         errorRow: errorRow,
                         errorList: errorList,
                         setCount: setCount,
+                        setButton: setButton,
                         container: container,
                         shade: shade,
                         versionSpan: versionSpan,
@@ -33504,49 +34512,88 @@ RED.palette.editor = (function() {
                         if (container.hasClass('expanded')) {
                             container.removeClass('expanded');
                             contentRow.slideUp();
+                            setTimeout(() => {
+                                contentRow.empty()
+                            }, 200)
+                            object.elements.sets = {}
                         } else {
                             container.addClass('expanded');
+                            populateSetList()
                             contentRow.slideDown();
                         }
                     })
-
-                    var setList = Object.keys(entry.sets)
-                    setList.sort(function(A,B) {
-                        return A.toLowerCase().localeCompare(B.toLowerCase());
-                    });
-                    setList.forEach(function(setName) {
-                        var set = entry.sets[setName];
-                        var setRow = $('<div>',{class:"red-ui-palette-module-set"}).appendTo(contentRow);
-                        var buttonGroup = $('<div>',{class:"red-ui-palette-module-set-button-group"}).appendTo(setRow);
-                        var typeSwatches = {};
-                        set.types.forEach(function(t) {
-                            var typeDiv = $('<div>',{class:"red-ui-palette-module-type"}).appendTo(setRow);
-                            typeSwatches[t] = $('<span>',{class:"red-ui-palette-module-type-swatch"}).appendTo(typeDiv);
-                            $('<span>',{class:"red-ui-palette-module-type-node"}).text(t).appendTo(typeDiv);
-                        })
-                        var enableButton = $('<a href="#" class="red-ui-button red-ui-button-small"></a>').appendTo(buttonGroup);
-                        enableButton.on("click", function(evt) {
-                            evt.preventDefault();
-                            if (object.setUseCount[setName] === 0) {
-                                var currentSet = RED.nodes.registry.getNodeSet(set.id);
-                                shade.show();
-                                var newState = !currentSet.enabled
-                                changeNodeState(set.id,newState,shade,function(xhr){
-                                    if (xhr) {
-                                        if (xhr.responseJSON) {
-                                            RED.notify(RED._('palette.editor.errors.'+(newState?'enable':'disable')+'Failed',{module: id,message:xhr.responseJSON.message}));
+                    const populateSetList = function () {
+                        var setList = Object.keys(entry.sets)
+                        setList.sort(function(A,B) {
+                            return A.toLowerCase().localeCompare(B.toLowerCase());
+                        });
+                        setList.forEach(function(setName) {
+                            var set = entry.sets[setName];
+                            var setRow = $('<div>',{class:"red-ui-palette-module-set"}).appendTo(contentRow);
+                            var buttonGroup = $('<div>',{class:"red-ui-palette-module-set-button-group"}).appendTo(setRow);
+                            var typeSwatches = {};
+                            let enableButton;
+                            if (set.types) {
+                                set.types.forEach(function(t) {
+                                    var typeDiv = $('<div>',{class:"red-ui-palette-module-type"}).appendTo(setRow);
+                                    typeSwatches[t] = $('<span>',{class:"red-ui-palette-module-type-swatch"}).appendTo(typeDiv);
+                                    if (set.enabled) {
+                                        var def = RED.nodes.getType(t);
+                                        if (def && def.color) {
+                                            typeSwatches[t].css({background:RED.utils.getNodeColor(t,def)});
+                                            typeSwatches[t].css({border: "1px solid "+getContrastingBorder(typeSwatches[t].css('backgroundColor'))})
                                         }
                                     }
-                                });
+                                    $('<span>',{class:"red-ui-palette-module-type-node"}).text(t).appendTo(typeDiv);
+                                })
+                                enableButton = $('<a href="#" class="red-ui-button red-ui-button-small"></a>').appendTo(buttonGroup);
+                                enableButton.on("click", function(evt) {
+                                    evt.preventDefault();
+                                    if (object.setUseCount[setName] === 0) {
+                                        var currentSet = RED.nodes.registry.getNodeSet(set.id);
+                                        shade.show();
+                                        var newState = !currentSet.enabled
+                                        changeNodeState(set.id,newState,shade,function(xhr){
+                                            if (xhr) {
+                                                if (xhr.responseJSON) {
+                                                    RED.notify(RED._('palette.editor.errors.'+(newState?'enable':'disable')+'Failed',{module: id,message:xhr.responseJSON.message}));
+                                                }
+                                            }
+                                        });
+                                    }
+                                })
+
+                                if (object.setUseCount[setName] > 0) {
+                                    enableButton.text(RED._('palette.editor.inuse'));
+                                    enableButton.addClass('disabled');
+                                } else {
+                                    enableButton.removeClass('disabled');
+                                    if (set.enabled) {
+                                        enableButton.text(RED._('palette.editor.disable'));
+                                    } else {
+                                        enableButton.text(RED._('palette.editor.enable'));
+                                    }
+                                }
+                                setRow.toggleClass("red-ui-palette-module-set-disabled",!set.enabled);
+
+
+                            }
+                            if (set.plugins) {
+                                set.plugins.forEach(function(p) {
+                                    var typeDiv = $('<div>',{class:"red-ui-palette-module-type"}).appendTo(setRow);
+                                    // typeSwatches[p.id] = $('<span>',{class:"red-ui-palette-module-type-swatch"}).appendTo(typeDiv);
+                                    $('<span><i class="fa fa-puzzle-piece" aria-hidden="true"></i>  </span>',{class:"red-ui-palette-module-type-swatch"}).appendTo(typeDiv);
+                                    $('<span>',{class:"red-ui-palette-module-type-node"}).text(p.id).appendTo(typeDiv);
+                                })
                             }
-                        })
 
-                        object.elements.sets[set.name] = {
-                            setRow: setRow,
-                            enableButton: enableButton,
-                            swatches: typeSwatches
-                        };
-                    });
+                            object.elements.sets[set.name] = {
+                                setRow: setRow,
+                                enableButton: enableButton,
+                                swatches: typeSwatches
+                            };
+                        });
+                    }
                     enableButton.on("click", function(evt) {
                         evt.preventDefault();
                         if (object.totalUseCount === 0) {
@@ -33916,7 +34963,55 @@ RED.palette.editor = (function() {
                                                 }
                                             }
                                         ]
-                                    });                                }
+                                    });                                
+                                }
+                            } else {
+                                // dedicated list management for plugins
+                                if (entry.plugin) {
+
+                                    let e = nodeEntries[entry.name];
+                                    if (e) {
+                                        nodeList.editableList('removeItem', e);
+                                        delete nodeEntries[entry.name];
+                                    }
+
+                                    // We assume that a plugin that implements onremove
+                                    // cleans the editor accordingly of its left-overs.
+                                    let found_onremove = true;
+
+                                    let keys = Object.keys(entry.sets);
+                                    keys.forEach((key) => {
+                                        let set = entry.sets[key];
+                                        for (let i=0; i<set.plugins?.length; i++) {
+                                            let plgn = RED.plugins.getPlugin(set.plugins[i].id);
+                                            if (plgn && plgn.onremove  && typeof plgn.onremove === 'function') {
+                                                plgn.onremove();
+                                            } else {
+                                                if (plgn && plgn.onadd && typeof plgn.onadd === 'function') {
+                                                    // if there's no 'onadd', there shouldn't be any left-overs
+                                                    found_onremove = false;
+                                                }
+                                            }
+                                        }
+                                    });
+
+                                    if (!found_onremove) {
+                                        let removeNotify = RED.notify(RED._("palette.editor.confirm.removePlugin.body",{module:entry.name}),{
+                                            modal: true,
+                                            fixed: true,
+                                            type: 'warning',
+                                            buttons: [
+                                                {
+                                                    text: RED._("palette.editor.confirm.button.understood"),
+                                                    class:"primary",
+                                                    click: function(e) {
+                                                        removeNotify.close();
+                                                    }
+                                                }
+                                            ]
+                                        });
+                                    }
+                                }        
                             }
                         })
                         notification.close();
@@ -33960,9 +35055,28 @@ RED.palette.editor = (function() {
                     RED.actions.invoke("core:show-event-log");
                 });
                 RED.eventLog.startEvent(RED._("palette.editor.confirm.button.install")+" : "+entry.id+" "+entry.version);
-                installNodeModule(entry.id,entry.version,entry.pkg_url,function(xhr) {
+                installNodeModule(entry.id,entry.version,entry.pkg_url,function(xhr, textStatus,err) {
                     spinner.remove();
-                     if (xhr) {
+                     if (err && xhr.status === 504) {
+                        var notification = RED.notify(RED._("palette.editor.errors.installTimeout"), {
+                            modal: true,
+                            fixed: true,
+                            buttons: [
+                                {
+                                    text: RED._("common.label.close"),
+                                    click: function() {
+                                        notification.close();
+                                    }
+                                },{
+                                    text: RED._("eventLog.view"),
+                                    click: function() {
+                                        notification.close();
+                                        RED.actions.invoke("core:show-event-log");
+                                    }
+                                }
+                            ]
+                        })
+                     } else if (xhr) {
                          if (xhr.responseJSON) {
                              var notification = RED.notify(RED._('palette.editor.errors.installFailed',{module: entry.id,message:xhr.responseJSON.message}),{
                                  type: 'error',
@@ -34346,8 +35460,9 @@ RED.editor = (function() {
             nodeValue = node[property]
         }
 
-        const buttonId = `${prefix}-lookup-${property}`
-        const selectId = prefix + '-' + property
+        const addBtnId = `${prefix}-btn-${property}-add`;
+        const editBtnId = `${prefix}-btn-${property}-edit`;
+        const selectId = prefix + '-' + property;
         const input = $(`#${selectId}`);
         if (input.length === 0) {
             return;
@@ -34370,40 +35485,68 @@ RED.editor = (function() {
         select.css({
             'flex-grow': 1
         });
+
         updateConfigNodeSelect(property, type, nodeValue, prefix, filter);
-        const disableButton = function(disabled) {
-            btn.prop( "disabled", !!disabled)
-            btn.toggleClass("disabled", !!disabled)
-        }
+
         // create the edit button
-        const btn = $('<a id="' + buttonId + '" class="red-ui-button"><i class="fa fa-pencil"></i></a>')
+        const editButton = $('<a id="' + editBtnId + '" class="red-ui-button"><i class="fa fa-pencil"></i></a>')
             .css({ "margin-left": "10px" })
             .appendTo(outerWrap);
 
+        RED.popover.tooltip(editButton, RED._('editor.editConfig', { type }));
+
+        // create the add button
+        const addButton = $('<a id="' + addBtnId + '" class="red-ui-button"><i class="fa fa-plus"></i></a>')
+            .css({ "margin-left": "10px" })
+            .appendTo(outerWrap);
+        RED.popover.tooltip(addButton, RED._('editor.addNewConfig', { type }));
+
+        const disableButton = function(button, disabled) {
+            $(button).prop("disabled", !!disabled)
+            $(button).toggleClass("disabled", !!disabled)
+        };
+
         // add the click handler
-        btn.on("click", function (e) {
+        addButton.on("click", function (e) {
+            if (addButton.prop("disabled")) { return }
+            showEditConfigNodeDialog(property, type, "_ADD_", prefix, node);
+            e.preventDefault();
+        });
+        editButton.on("click", function (e) {
             const selectedOpt = select.find(":selected")
             if (selectedOpt.data('env')) { return } // don't show the dialog for env vars items (MVP. Future enhancement: lookup the env, if present, show the associated edit dialog)
-            if (btn.prop("disabled")) { return }
+            if (editButton.prop("disabled")) { return }
             showEditConfigNodeDialog(property, type, selectedOpt.val(), prefix, node);
             e.preventDefault();
         });
 
         // dont permit the user to click the button if the selected option is an env var
         select.on("change", function () {
-            const selectedOpt = select.find(":selected")
+            const selectedOpt = select.find(":selected");
+            const optionsLength = select.find("option").length;
             if (selectedOpt?.data('env')) {
-                disableButton(true)
+                disableButton(addButton, true);
+                disableButton(editButton, true);
+            // disable the edit button if no options available
+            } else if (optionsLength === 1 && selectedOpt.val() === "_ADD_") {
+                disableButton(addButton, false);
+                disableButton(editButton, true);
+            } else if (selectedOpt.val() === "") {
+                disableButton(addButton, false);
+                disableButton(editButton, true);
             } else {
-                disableButton(false)
+                disableButton(addButton, false);
+                disableButton(editButton, false);
             }
         });
+
         var label = "";
         var configNode = RED.nodes.node(nodeValue);
 
         if (configNode) {
             label = RED.utils.getNodeLabel(configNode, configNode.id);
         }
+
         input.val(label);
     }
 
@@ -34897,7 +36040,12 @@ RED.editor = (function() {
                     }
                 }
 
-                select.append('<option value="_ADD_"'+(value===""?" selected":"")+'>'+RED._("editor.addNewType", {type:label})+'</option>');
+                if (!configNodes.length) {
+                    select.append('<option value="_ADD_" selected>' + RED._("editor.addNewType", { type: label }) + '</option>');
+                } else {
+                    select.append('<option value="">' + RED._("editor.inputs.none") + '</option>');
+                }
+
                 window.setTimeout(function() { select.trigger("change");},50);
             }
         }
@@ -35692,8 +36840,8 @@ RED.editor = (function() {
                         }
 
                         if (!isSameObj(old_env, new_env)) {
-                            editing_node.env = new_env;
                             editState.changes.env = editing_node.env;
+                            editing_node.env = new_env;
                             editState.changed = true;
                         }
 
@@ -40936,7 +42084,7 @@ RED.editor.codeEditor.monaco = (function() {
                 _monaco.languages.json.jsonDefaults.setDiagnosticsOptions(diagnosticOptions);
                 if(modeConfiguration) { _monaco.languages.json.jsonDefaults.setModeConfiguration(modeConfiguration); }
             } catch (error) {
-                console.warn("monaco - Error setting up json options", err)
+                console.warn("monaco - Error setting up json options", error)
             }
         }
 
@@ -40948,7 +42096,7 @@ RED.editor.codeEditor.monaco = (function() {
                 if(htmlDefaults) { _monaco.languages.html.htmlDefaults.setOptions(htmlDefaults); }
                 if(handlebarDefaults) { _monaco.languages.html.handlebarDefaults.setOptions(handlebarDefaults); }
             } catch (error) {
-                console.warn("monaco - Error setting up html options", err)
+                console.warn("monaco - Error setting up html options", error)
             }
         }
 
@@ -40968,7 +42116,7 @@ RED.editor.codeEditor.monaco = (function() {
                 if(lessDefaults_modeConfiguration) { _monaco.languages.css.cssDefaults.setDiagnosticsOptions(lessDefaults_modeConfiguration); }
                 if(scssDefaults_modeConfiguration) { _monaco.languages.css.cssDefaults.setDiagnosticsOptions(scssDefaults_modeConfiguration); }
             } catch (error) {
-                console.warn("monaco - Error setting up CSS/SCSS/LESS options", err)
+                console.warn("monaco - Error setting up CSS/SCSS/LESS options", error)
             }
         }
 
@@ -41007,7 +42155,7 @@ RED.editor.codeEditor.monaco = (function() {
                     createMonacoCompletionItem("set (flow context)", 'flow.set("${1:name}", ${1:value});','Set a value in flow context',range),
                     createMonacoCompletionItem("get (global context)", 'global.get("${1:name}");','Get a value from global context',range),
                     createMonacoCompletionItem("set (global context)", 'global.set("${1:name}", ${1:value});','Set a value in global context',range),
-                    createMonacoCompletionItem("get (env)", 'env.get("${1|NR_NODE_ID,NR_NODE_NAME,NR_NODE_PATH,NR_GROUP_ID,NR_GROUP_NAME,NR_FLOW_ID,NR_FLOW_NAME|}");','Get env variable value',range),
+                    createMonacoCompletionItem("get (env)", 'env.get("${1|NR_NODE_ID,NR_NODE_NAME,NR_NODE_PATH,NR_GROUP_ID,NR_GROUP_NAME,NR_FLOW_ID,NR_FLOW_NAME,NR_SUBFLOW_NAME,NR_SUBFLOW_ID,NR_SUBFLOW_PATH|}");','Get env variable value',range),
                     createMonacoCompletionItem("cloneMessage (RED.util)", 'RED.util.cloneMessage(${1:msg});',
                         ["```typescript",
                         "RED.util.cloneMessage<T extends registry.NodeMessage>(msg: T): T",
@@ -42262,6 +43410,7 @@ RED.eventLog = (function() {
                 setTimeout(function() {
                     oldTray.tray.detach();
                     showTray(options);
+                    RED.events.emit('editor:change')
                 },250)
             } else {
                 if (stack.length > 0) {
@@ -42331,6 +43480,7 @@ RED.eventLog = (function() {
                         RED.view.focus();
                     } else {
                         stack[stack.length-1].tray.css("z-index", "auto");
+                        RED.events.emit('editor:change')
                     }
                 },250)
             }
@@ -44784,12 +45934,12 @@ RED.notifications = (function() {
                     if (newType) {
                         n.className = "red-ui-notification red-ui-notification-"+newType;
                     }
-
+                    newTimeout = newOptions.hasOwnProperty('timeout')?newOptions.timeout:timeout
                     if (!fixed || newOptions.fixed === false) {
-                        newTimeout = (newOptions.hasOwnProperty('timeout')?newOptions.timeout:timeout)||5000;
+                        newTimeout = newTimeout || 5000
                     }
                     if (newOptions.buttons) {
-                        var buttonSet = $('<div style="margin-top: 20px;" class="ui-dialog-buttonset"></div>').appendTo(nn)
+                        var buttonSet = $('<div class="ui-dialog-buttonset"></div>').appendTo(nn)
                         newOptions.buttons.forEach(function(buttonDef) {
                             var b = $('<button>').text(buttonDef.text).on("click", buttonDef.click).appendTo(buttonSet);
                             if (buttonDef.id) {
@@ -44835,6 +45985,15 @@ RED.notifications = (function() {
                 };
             })());
             n.timeoutid = window.setTimeout(n.close,timeout||5000);
+        } else if (timeout) {
+            $(n).on("click.red-ui-notification-close", (function() {
+                var nn = n;
+                return function() {
+                    nn.hideNotification();
+                    window.clearTimeout(nn.timeoutid);
+                };
+            })());
+            n.timeoutid = window.setTimeout(n.hideNotification,timeout||5000);
         }
         currentNotifications.push(n);
         if (options.id) {
@@ -45684,10 +46843,16 @@ RED.search = (function() {
                     onselect: 'core:split-wire-with-link-nodes',
                     disabled: !canEdit || !hasLinks
                 },
-                null,
-                { onselect: 'core:show-import-dialog', label: RED._('common.label.import')},
-                { onselect: 'core:show-examples-import-dialog', label: RED._('menu.label.importExample') }
+                null
             )
+            if (RED.settings.theme("menu.menu-item-import-library", true)) {
+                insertOptions.push(
+                    { onselect: 'core:show-import-dialog', label: RED._('common.label.import')},
+                    { onselect: 'core:show-examples-import-dialog', label: RED._('menu.label.importExample') }
+                )
+            }
+
+
             if (hasSelection && canEdit) {
                 const nodeOptions = []
                 if (!hasMultipleSelection && !isGroup) {
@@ -45760,8 +46925,14 @@ RED.search = (function() {
                 { onselect: 'core:paste-from-internal-clipboard', label: RED._("keyboard.pasteNode"), disabled: !canEdit || !RED.view.clipboard() },
                 { onselect: 'core:delete-selection', label: RED._('keyboard.deleteSelected'), disabled: !canEdit || !canDelete },
                 { onselect: 'core:delete-selection-and-reconnect', label: RED._('keyboard.deleteReconnect'), disabled: !canEdit || !canDelete },
-                { onselect: 'core:show-export-dialog', label: RED._("menu.label.export") },
-                { onselect: 'core:select-all-nodes', label: RED._("keyboard.selectAll") },
+            )
+            if (RED.settings.theme("menu.menu-item-export-library", true)) {
+                menuItems.push(
+                    { onselect: 'core:show-export-dialog', label: RED._("menu.label.export") }
+                )
+            }
+            menuItems.push(
+                { onselect: 'core:select-all-nodes', label: RED._("keyboard.selectAll") }
             )
         }
 
@@ -47772,14 +48943,20 @@ RED.subflow = (function() {
                     var nodePropValue = nodeProp;
                     if (prop.ui && prop.ui.type === "cred") {
                         nodePropType = "cred";
+                    } else if (prop.ui && prop.ui.type === "conf-types") {
+                        nodePropType = prop.value.type
                     } else {
                         switch(typeof nodeProp) {
                             case "string": nodePropType = "str"; break;
                             case "number": nodePropType = "num"; break;
                             case "boolean": nodePropType = "bool"; nodePropValue = nodeProp?"true":"false"; break;
                             default:
-                            nodePropType = nodeProp.type;
-                            nodePropValue = nodeProp.value;
+                                if (nodeProp) {
+                                    nodePropType = nodeProp.type;
+                                    nodePropValue = nodeProp.value;
+                                } else {
+                                    nodePropType = 'str'
+                                }
                         }
                     }
                     var item = {
@@ -47849,7 +49026,7 @@ RED.subflow = (function() {
                         break;
                     case "conf-types":
                         item.value = input.val()
-                        item.type = data.parent.value;
+                        item.type = "conf-type"
                 }
                 if (ui.type === "cred" || item.type !== data.parent.type || item.value !== data.parent.value) {
                     env.push(item);
@@ -51702,7 +52879,7 @@ RED.projects.settings = (function() {
         var notInstalledCount = 0;
 
         for (var m in modulesInUse) {
-            if (modulesInUse.hasOwnProperty(m)) {
+            if (modulesInUse.hasOwnProperty(m) && !activeProject.dependencies.hasOwnProperty(m)) {
                 depsList.editableList('addItem',{
                     id: modulesInUse[m].module,
                     version: modulesInUse[m].version,
@@ -51722,8 +52899,8 @@ RED.projects.settings = (function() {
 
         if (activeProject.dependencies) {
             for (var m in activeProject.dependencies) {
-                if (activeProject.dependencies.hasOwnProperty(m) && !modulesInUse.hasOwnProperty(m)) {
-                    var installed = !!RED.nodes.registry.getModule(m);
+                if (activeProject.dependencies.hasOwnProperty(m)) {
+                    var installed = !!RED.nodes.registry.getModule(m) && activeProject.dependencies[m] === modulesInUse[m].version;
                     depsList.editableList('addItem',{
                         id: m,
                         version: activeProject.dependencies[m], //RED.nodes.registry.getModule(module).version,