Merge pull request #4095 from node-red/310-b2

Bump for beta.2

.github/workflows/release.yml

@@ -5,6 +5,9 @@ on:
   release:
     types: [published]
 
+permissions:
+  contents: read
+
 jobs:
   generate:
     name: 'Update node-red-docker image'

.github/workflows/tests.yml

@@ -6,16 +6,22 @@ on:
   pull_request:
     branches: [ master, dev ]
 
+permissions:
+  contents: read
+
 jobs:
   build:
+    permissions:
+      checks: write  # for coverallsapp/github-action to create new checks
+      contents: read  # for actions/checkout to fetch code
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14, 16]
+        node-version: [16, 18]
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
     - name: Install Dependencies
@@ -24,7 +30,7 @@ jobs:
       run: |
         npm run test
     - name: Publish to coveralls.io
-      if: ${{ matrix.node-version == 14 }}
+      if: ${{ matrix.node-version == 16 }}
       uses: coverallsapp/github-action@v1.1.2
       with:
         github-token: ${{ github.token }}

.jshintrc

@@ -15,5 +15,5 @@
     "shadow": true,     // allow variable shadowing (re-use of names...)
     "sub": true,        // don't warn that foo['bar'] should be written as foo.bar
     "proto": true,      // allow setting of __proto__ in node < v0.12,
-    "esversion": 6      // allow es6
+    "esversion": 11      // allow es11(ES2020)
 }

CHANGELOG.md

@@ -1,3 +1,252 @@
+#### 3.1.0-beta.2: Beta Release
+
+Editor
+
+ - NEW: Add change icon to tabs (#4068) @knolleary
+ - NEW: Complete overhaul of Group UX (#4079) @knolleary
+ - NEW: Add link to node help in node edit dialog footer (#4065) @knolleary
+ - NEW: Added editor feature for connecting multiple nodes to single node (#4051) @sonntam
+ - NEW: Increase workspace size to 8000x8000 (#4094) @knolleary
+ - Ensure node buttons are redrawn when flow lock state is changed (#4091) @knolleary
+ - Prevent loops being created with junction nodes (#4087) @knolleary
+ - Prevent opening locked node's edit dialog (#4069) @knolleary
+ - Reverse direction of tab scroll to expected direction (#4064) @knolleary
+ - Add cancel operation to editableList (#4077) @HiroyasuNishiyama
+ - Apply Mermaid diagram for project settings UI (#4054) @kazuhitoyokoi
+ - Add tooltip for show/hide button on info sidebar (#4050) @kazuhitoyokoi
+ - Fix align nodes on locked tab (#4072) @HiroyasuNishiyama
+ - Fix importing connected link nodes into a subflow (#4082) @knolleary
+ - Fix to add empty marker to empty group (#4060) @HiroyasuNishiyama
+ - Fix image URLs for v3.0 tour (#4053) @kazuhitoyokoi
+ - Show scrollbar in notification dialog only when needed (#4048) @kazuhitoyokoi
+ - Update-monaco-and-typings (#4089) @Steve-Mcl
+ - Update jquery UI (#4088) @knolleary
+ - Support i18n of lock/unlock buttons in flow property UI (#4049) @kazuhitoyokoi
+ - Translation kr (#3895) @hae-iotplatform
+ - Translation zhcn (！！请懂中文的帮忙review) (#3952) @cliyr
+ - Add French translation of nodes (#3964) @GogoVega
+ - Add French translation (#3962) @GogoVega
+ - Portuguese Brazilian (pt-BR) translation (#3804) @FabsMuller
+ 
+
+Runtime
+
+ - NEW: Generate stable ids for subflow instance internal nodes (#4093) @knolleary
+ - NEW: Change default file name to flows.json in project feature (#4073) @kazuhitoyokoi
+ - NEW: Deprecate synchronous access to jsonata (#4090) @knolleary
+ - Add Node 18 to test matrix (#4084) @knolleary
+ - Bump minimum nodejs version supported to match documented value (#4086) @knolleary
+ - Update monaco docs link in settings.js (#4075) @Steve-Mcl
+ - Remove duplicated messages in the message catalog (#4066) @kazuhitoyokoi
+ - Ensure errors in preDeliver callback are handled (#3911) @knolleary
+ - Fix "EADDRINUSE" error (#4046) @bggbr
+
+Nodes
+
+ - Link Call: Clear link-call timeouts when node is closed (#4085) @knolleary
+ - Join: ensure inflight status is cleared when in auto mode (#4083) @knolleary
+ - File Out: Fix extra newline append for multipart file write (#3915) @dceejay
+ - Add validators for complete and link call nodes (#4056) @kazuhitoyokoi
+
+#### 3.1.0-beta.1: Beta Release
+
+Editor
+
+ - NEW: Locking Flows (#3938) @knolleary
+ - NEW: Improve UX around hiding flows via context menu (#3930) @knolleary
+ - NEW: Add support for inline image in markdown editor by drag and drop of an image file (#4006) @HiroyasuNishiyama
+ - NEW: Add support for mermaid diagram to markdown editor (#4007) @HiroyasuNishiyama
+ - NEW: Support uri fragments for nodes and groups including edit support (#3870) @knolleary
+ - NEW: Add global environment variable feature (#3941) @HiroyasuNishiyama
+
+ - Remember compact/pretty flow export user choice (#3974) @Steve-Mcl
+ - fix .red-ui-notification class (#4035) @xiaobinqt
+ - Fix border radius on Modules list header (#4038) @bonanitech
+ - fix workspace reference error in case of empty tabs (#4029) @HiroyasuNishiyama
+ - Disable delete tab menu when single tab exists (#4030) @HiroyasuNishiyama
+ - Disable hide all menu if all tabs hidden (#4031) @HiroyasuNishiyama
+ - fix hide subflow tooltip (#4033) @HiroyasuNishiyama
+ - Fix disabled menu items in project feature (#4027) @kazuhitoyokoi
+ - Let themes change radialMenu text colors (#3995) @bonanitech
+ - Add Japanese translations for v3.0.3 (#4012) @kazuhitoyokoi
+ - Add Japanese translation for v3.1.0-beta.0 (#3997) @kazuhitoyokoi
+ - Add Japanese translation for v3.1.0-beta.0 (#3916) @kazuhitoyokoi
+ - Hide subflow category after deleting subflow (#3980) @kazuhitoyokoi
+ - Prevent dbl-click opening node edit dialog with text selected (#3970) @knolleary
+ - Handle replacing unknown node inside group or subflow (#3921) @knolleary
+ - Fix #3939, red border red-ui-typedInput-container (#3949) @Steveorevo
+ - i18n item URL copy notification & add Japanese message (#3946) @HiroyasuNishiyama
+ - add Japanese message for item url copy actions (#3947) @HiroyasuNishiyama
+ - Fix autocomplete entry for responseUrl (#3884) @knolleary
+ - Fix Japanese translation for JSONata editor (#3872) @HiroyasuNishiyama
+ - Fix search type with spaces (#3841) @Steve-Mcl
+ - Fix error hanndling of JSONata expression editor for extended functions (#3871) @HiroyasuNishiyama
+ - Add button type to the adding SSH key button (#3866) @kazuhitoyokoi
+ - Check radio button as default in project dialog (#3879) @kazuhitoyokoi
+ - Add $clone as supported function (#3874) @HiroyasuNishiyama
+ - Env var jsonata (#3807) @HiroyasuNishiyama
+ - Add Japanese translation for v3.0.2 (#3852) @kazuhitoyokoi
+
+Runtime
+
+ - Force IPv4 name resolution to have priority (#4019) @dceejay
+ - Fix async loading of modules containing both nodes and plugins (#3999) @knolleary
+ - Use main branch as default in project feature (#4036) @kazuhitoyokoi
+ - Rename package var to avoid strict mode error (#4020) @knolleary
+ - Fix typos in settings.js (#4013) @ypid
+ - Ensure credentials object is removed before returning node in getFlow request (#3971) @knolleary
+ - Ignore commit error in project feature (#3987) @kazuhitoyokoi
+ - Update dependencies (#3969) @knolleary
+ - Add check that node sends object rather than primitive type (#3909) @knolleary
+ - Ensure key_path is quoted in GIT_SSH_COMMAND in case of spaces in pathname (#3912) @knolleary
+ - Fix nodesDir scan when node package has js/html in sub dir to package.json (#3867) @Steve-Mcl
+ - Fix file permissions (#3917) @kazuhitoyokoi
+ - ci: add minimum GitHub token permissions for workflows (#3907) @boahc077
+
+Nodes
+
+ - Catch: fix typo in catch.html (#3965) @we11adam
+ - Change: Fix change node overwriting msg with itself (#3899) @dceejay
+ - Comment node: Clarify where the text will appear (#4004) @dirkjanfaber
+ - CSV: change replace to replaceAll (#3990) @dceejay
+ - CSV node: check header properties for ' and " (#3920) @dceejay
+ - CSV: Fix for CSV undefined property (#3906) @dceejay
+ - Delay: let delay node handle both flush then reset (#3898) @dceejay
+ - Function: Limit number of ports in function node (#3886) @kazuhitoyokoi
+ - Function: Remove dot from variable name for external module in function node (#3880) @kazuhitoyokoi
+ - Function: add function node monaco types util and promisify (#3868) @Steve-Mcl
+ - HTTP In: Ensure msg.req.headers is enumerable (#3908) @knolleary
+ - HTTP Request: Support form-data arrays (#3991) @hardillb
+ - HTTP Request: Fix httprequest tests to be more lenient on error message (#3922) @knolleary
+ - HTTP Request: Add missing property to node object HTTPRequest (#3842) @hardillb
+ - HTTP Request/Response: Support sortable list on property UI of http request and http response nodes (#3857) @kazuhitoyokoi
+ - HTTP Response: Ensure statusCode is a number (#3894) @hardillb
+ - Inject: Allow Inject node to work with async context stores (#4021) @knolleary
+ - Join/Batch: Add count to join and batch node labels (#4028) @dceejay
+ - MQTT: Fix birth topic handling in MQTT node (#3905) @Steve-Mcl
+ - MQTT: Fix pull-down menus of MQTT configuration node (#3890) @kazuhitoyokoi
+ - MQTT: Prevent invalid mqtt birth topic crashing node-red (#3869) @Steve-Mcl
+ - MQTT: ensure sessionExpiry(Interval) is applied (#3840) @Steve-Mcl
+ - MQTT: Fix mqtt nodes not reconnecting on modified-flows deploy (#3992) @knolleary
+ - MQTT: fix single subscription mqtt node status (#3966) @Steve-Mcl
+ - Range: Add drop mode to range node (#3935) @dceejay
+ - Remove done from describe (#3873) @HiroyasuNishiyama
+ - Split node: avoid duplicate done call for buffer split (#4000) @knolleary
+ - Status: Fix typo in 25-status.html (#3981) @kazuhitoyokoi
+ - TCP Node: ensure newline substitution applies to whole message (#4009) @dceejay
+ - Template: Add information about environment variable to template node (#3882) @kazuhitoyokoi
+ - Trigger: Hide trigger node repeat send option if sending nothing (#4023) @dceejay
+ - Watch: fix watch node test on MacOS/ARM (#3942) @HiroyasuNishiyama
+
+#### 3.0.2: Maintenance Release
+
+Editor
+
+ - Fix workspace chart bottom property (#3812) @bonanitech
+ - Update german translation (#3802) @Dennis14e
+ - Support color reset to the default in subflow and group (#3801) @kazuhitoyokoi
+ - Allow generateNodeNames to handle names containing regex control chars (#3817) @knolleary
+ - Hide scrollbars until they're needed (#3808) @bonanitech
+ - Include junctions/groups when exporting subflows plus related fixes (#3816) @knolleary
+ - remove console.log (#3820) @Steve-Mcl
+
+Runtime
+
+ - Register subflow module instance node with parent flow (#3818) @knolleary
+
+Nodes
+
+ - HTTP Request: Allow HTTP Headers not in spec (#3776) @hardillb
+
+#### 3.0.1: Maintenance Release
+
+Editor
+
+ - Allow codeEditor theme to be set even if `codeEditor` is not set in settings.js (#3794) @Steve-Mcl
+ - Sys info (diagnostics report) amendments (#3793) @Steve-Mcl
+ - Allow `mode` and `title` to be omitted in `options` argument for `createEditor` (#3791) @Steve-Mcl
+ - Fix focus issues (#3789) @Steve-Mcl
+ - Ensure all typedInput buttons have button type set (#3788) @knolleary
+ - Do not flag hasUsers=false nodes as unused in search (#3787) @knolleary
+ - Properly position quick-add dialog in all cases (#3786) @knolleary
+ - Ensure quick-add dialog does not obscure ghost node when shifted (#3785) @knolleary
+ - Remove use of Object.hasOwn (#3784) @knolleary
+
+#### 3.0.0: Milestone Release
+
+Editor
+
+ - Use theme page and header values if settings.js values are not present (#3767) @Steve-Mcl
+ - Focus editor for undo after some actions in menu (#3759) @kazuhitoyokoi
+ - Ensure node icon shade has properly rounded corners (#3763) @knolleary
+ - Fix storing subflow credential type when input has multiple types (#3762) @knolleary
+ - Ensure global-config and flow-config have info in the hierarchy popover (#3752) @Steve-Mcl
+ - Include dirty state in history event (#3748) @Steve-Mcl
+ - Fix display direction of context sub-menu (#3746) @knolleary
+ - Fix clear pinned paths of debug sidebar menu (#3745) @HiroyasuNishiyama
+ - prevent exception generating tooltip for deleted nodes (#3742) @Steve-Mcl
+ - Fix context menu issues ready for v3 beta.5 (#3741) @Steve-Mcl
+ - Do not generate new node-ids when pasting a cut flow (#3729) @knolleary
+ - Fix to prevent node from moving out of workspace (#3731) @HiroyasuNishiyama
+ - Don't let themes change disabled config node background color (#3736) @bonanitech
+ - Move colors left behind in #3692 to CSS variables (#3737) @bonanitech
+ - Fix handling of global debug message (#3733) @HiroyasuNishiyama
+ - Fix label overflow @ config-node palette (#3730) @ralphwetzel
+ - Fix defaulting to monaco if settings does not contain codeEditor (#3732) @knolleary
+ - Disable keyboard shortcut mapping when showing Edit[..]Dialog (#3700) @ralphwetzel
+ - Update add-junction menu to work in more cases (#3727) @knolleary
+ - Ensure importMap is not null when using import UI (#3723) @Steve-Mcl
+ - Add Japanese translations for v3.0-beta.4 (#3724) @kazuhitoyokoi
+ - Fix "split with" on virtual links (#3766) @Steve-Mcl
+
+Runtime
+
+ - Do not remove unknown credentials of Subflow Modules (#3728) @knolleary
+ - Add missing entries from beta.4 changelog (#3721) @knolleary
+
+Nodes
+
+ - Change: Fix change node, not handling from field properly when using context (#3754) @Fadoli
+ - Link Call: Fix linkcall registry bugs (#3751) @Steve-Mcl
+ - WebSocket: Fix close timeout of websocket node (#3734) @HiroyasuNishiyama
+
+#### 3.0.0-beta.4: Beta Release
+
+Editor
+
+ - Move all colours to CSS variables (#3692) @bonanitech
+ - Fix clicking on node in workspace to hide context menu (#3696) @knolleary
+ - Fix credential type input item of subflow template (#3703) @HiroyasuNishiyama
+ - Add option flag `reimport` to `importNodes` (#3718) @Steve-Mcl
+ - Update german translation (#3691) @Dennis14e
+ - List welcome tours in help sidebar (#3717) @knolleary
+ - Ensure 'hidden flow' count doesn't include subflows (#3715) @knolleary
+ - Fix Chinese translate (#3706) @hotlong
+ - Fix use default button for node icon (#3714) @kazuhitoyokoi
+ - Fix select boxes vertical alignment (#3698) @bonanitech
+ - Ensure workspace clean after undoing dropped node (#3708) @Steve-Mcl
+ - Use solid colour as config node icon background to hide text overflow (#3710) @Steve-Mcl
+ - Increase quick-add height to reveal 2 most recent entries (#3711) @Steve-Mcl
+ - Set default editor to monaco in absence of user preference (#3702) @knolleary
+ - Add Japanese translations for v3.0-beta.3 (#3688) @kazuhitoyokoi
+ - Fix handling of spacebar inside JSON visual editor (#3687) @knolleary
+ - Fix menu padding to handle both icons and submenus (#3686) @knolleary
+ - Include scroll offset when positioning quick-add dialog (#3685) @knolleary
+
+Runtime
+
+ - Allow flows to be stopped and started manually (#3719) @knolleary
+ - Import default export if node is a transpiled es module (#3669) @dschmidt
+ - Leave Monaco theme commented out by default (#3704) @bonanitech
+
+Nodes
+
+ - CSV: Fix CSV node to handle when outputting text fields (#3716) @dceejay
+ - Delay: Fix delay rate limit last timing when empty (#3709) @dceejay
+ - Link: Ensure link-call cache is updated when link-in is modified (#3695) @Steve-Mcl
+ - Join: Join node in reduce mode doesn't keep existing msg properties (#3670) @dceejay
+ - Template: Add support for evalulating {{env.<var>}} within a template node (#3690) @cow0w
+
 #### 3.0.0-beta.3: Beta Release
 
 Editor
@@ -148,528 +397,6 @@ Nodes
  - Watch: Update Watch node to use node-watch module (#3559 #3569) @knolleary
  - WebSocket: call done after ws disconnects (#3531) @Steve-Mcl
 
-
-#### 2.2.2: Maintenance Release
-
-Nodes
-
- - Fix "close timed out" error when performing full deploy or modifying broker node. (#3451) @Steve-Mcl
-
-
-#### 2.2.1: Maintenance Release
-
-Editor
-
- - Handle mixed-cased filter terms in keyboard shortcut dialog (#3444) @knolleary
- - Prevent duplicate links being added between nodes (#3442) @knolleary
- - Fix to hide tooltip after removing subflow tab (#3391) @HiroyasuNishiyama
- - Fix node validation to be applied to config node (#3397) @HiroyasuNishiyama
- - Fix: Dont add wires to undo buffer twice (#3437) @Steve-Mcl
-
-Runtime
-
- - Improve module location parsing (of stack info) when adding hook (#3447) @Steve-Mcl
- - Fix substitution of NR_NODE_PATH (#3445) @HiroyasuNishiyama
- - Remove console.log when ignoring disabled module (#3439) @knolleary
- - Improve "Unexpected Node Error" logging (#3446) @Steve-Mcl
-
-Nodes
-
- - Debug: Fix no-prototype-builtins bug in debug node and utils (#3394) @Alkarex
- - Delay: Fix Japanese message of delay node (#3434)
- - Allow nbRateUnits to be undefined when validating (#3443) @knolleary
- - Coding help for recently added node-red Predefined Environment Variables (#3440) @Steve-Mcl
-
-
-#### 2.2.0: Milestone Release
-
-Editor
-
- - Add editorTheme.tours property to default settings file (#3375) @knolleary
- - Remember Zoom level and Sidebar tab selection between sessions (#3361) @knolleary
- - Fix timing issue when merging background changes fixes #3364 (#3373) @Steve-Mcl
- - Use a nodes palette label in help tree (#3372) @Steve-Mcl
- - Subflow: Add labels to OUTPUT nodes (#3352) @ralphwetzel
- - Fix vertical align subflow port (#3370) @knolleary
- - Make actions list i18n ready and Japanese translation (#3359) @HiroyasuNishiyama
- - Update tour for 2.2.0 (#3378) @knolleary
- - Include paletteLabel when building search index (#3380) @Steve-Mcl
- - Fix opening/closing subflow template not to make subflow changed (#3382) @HiroyasuNishiyama
- - Add Japanese translations for v2.2.0 (#3353, #3381) @kazuhitoyokoi
-
-Runtime
-
- - Add support for accessing node id & name as environment variable (#3356) @HiroyasuNishiyama
- - Clear context contents when switching projects (#3243) @knolleary
-
-Nodes
-
- - MQTT: reject invalid topics (#3374) @Steve-Mcl
- - Function: Expose node.path property (#3371) @knolleary
- - Function: Update `node` declarations in func.d.ts (#3377) @Steve-Mcl
-
-#### 2.2.0-beta.1: Beta Release
-
-Editor
-
- - Add search history to main search box (#3262) @knolleary
- - Check availability of type of config node on deploy (#3304) @k-toumura
- - Add wire-slice mode to delete wires with Ctrl-RHClick-Drag (#3340) @knolleary
- - Wiring keyboard shortcuts (#3288) @knolleary
- - Snap nodes on grid using either edge as reference (#3289) @knolleary
- - Detach node action (#3338) @knolleary
- - Highlight links when selecting nodes (#3323) @knolleary
- - Allow multiple links to be selected by ctrl-click (#3294) @knolleary
-
-Nodes
-
- - JSON: Let JSON node attempt to parse buffer if it contains a valid string (#3296) @dceejay
- - Remove use of verbose flag in core nodes - and use node.debug level instead (#3300) @dceejay
- - TCP: Add TLS option to tcp client nodes (#3307) @dceejay
- - WebSocket: Implemented support for Websocket Subprotocols in WS Client Node. (#3333) @tobiasoort
-
-#### 2.1.6: Maintenance Release
-
-Editor
-
- - Revert copy-text change and apply alternative fix (#3363) @knolleary
- - Update marked to latest (#3362) @knolleary
- - fix to make start of property error tooltip messages aligned (#3358) @HiroyasuNishiyama
-
-Nodes
-
- - Inject: fix JSON propety validation of inject node (#3349) @HiroyasuNishiyama
- - Delay: fix unit value validation of delay node (#3351) @HiroyasuNishiyama
-
-#### 2.1.5: Maintenance Release
-
-Runtime
-
- - Handle reporting error location when stack is truncated (#3346) @knolleary
- - Initialize passport when only adminAuth.tokens is set (#3343) @knolleary
- - Add log logging (#3342) @knolleary
-
-Editor
-
- - Fix copy buttons on the debug window (another method) (#3331) @kazuhitoyokoi
- - Add Japanese translations for hidden flow (#3302) @kazuhitoyokoi
- - Improve jsonata legacy mode detection regex (#3345) @knolleary
- - Fix generating flow name with incrementing number (#3347) @knolleary
- - resume focus after import/export dialog close (#3337) @HiroyasuNishiyama
- - Fix findPreviousVisibleTab action (#3321) @knolleary
- - Fix storing hidden tab state when not hidden via action (#3312) @knolleary
- - Avoid adding empty env properties to tabs/groups (#3311) @knolleary
- - Fix hide icon in tour guide (#3301) @kazuhitoyokoi
-
-Nodes
-
- - File: Update file node examples according to node name change (#3335) @HiroyasuNishiyama
- - Filter (RBE): Fix for filter node narrrowbandEq mode start condition failure (#3339) @dceejay
- - Function: Prevent function scrollbar from obscuring expand button (#3348) @knolleary
- - Function: load extralibs when expanding monaco. fixes #3319 (#3334) @Steve-Mcl
- - Function: Update Function to use correct api to access env vars (#3310) @knolleary
- - HTTP Request: Fix basic auth with empty username or password (#3325) @hardillb
- - Inject: Fix incorrect clearing of blank payload property in Inject node (#3322) @knolleary
- - Link Call: add link call example (#3336) @HiroyasuNishiyama
- - WebSocket: Only setup ws client heartbeat once it is connected (#3344) @knolleary
- - Update Japanese translations in node help (#3332) @kazuhitoyokoi
-
-#### 2.1.4: Maintenance Release
-
-Runtime
-
- - fix env var access using $parent for groups (#3278) @HiroyasuNishiyama
- - Add proper error handling for 404 errors when serving debug files (#3277) @knolleary
- - Add Japanese translations for Node-RED v2.1.0-beta.1 (#3179) @kazuhitoyokoi
- - Include full user object on login audit events (#3269) @knolleary
- - Remove styling from de locale files (#3237) @knolleary
-
-Editor
-
- - Change tab hide button icon to an eye and add search option (#3282) @knolleary
- - Fix i18n handling of namespaces with spaces in (#3281) @knolleary
- - Trigger change event when autoComplete fills in input (#3280) @knolleary
- - Apply CN i18n fix (#3279) @knolleary
- - fix select menu label of config node to use paletteLabel (#3273) @HiroyasuNishiyama
- - fix removed tab not to cause node conflict (#3275) @HiroyasuNishiyama
- - Group diff fix (#3239) @knolleary
- - Only toggle disabled workspace flag if on activeWorkspace (#3252) @knolleary
- - Do not show status for disabled nodes (#3253) @knolleary
- - Set dimension value for tour guide (#3265) @kazuhitoyokoi
- - Avoid redundant initialisation of TypedInput type (#3263) @knolleary
- - Don't let themes change flow port label color (#3270) @bonanitech
- - Fix treeList gutter calculation to handle floating gutters (#3238) @knolleary
-
-Nodes
-
-- Debug: Handle RegExp types in Debug sidebar (#3251) @knolleary
-- Delay: fix 2nd output when in rate limit per topic modes (#3261) @dceejay
-- Link: fix to show link target when selected (#3267) @HiroyasuNishiyama
-- Inject: Do not modify inject node props in oneditprepare (#3242) @knolleary
-- HTTP Request: HTTP Basic Auth should always add : between username and password even if empty (#3236) @hardillb
-
-#### 2.1.3: Maintenance Release
-
-Runtime
-
- - Update gen-publish script to update 'next' tag for main releases
- - Add environment variable to enable/disable tours (#3221) @hardillb
- - Fix loading non-default language files leaving runtime in wrong locale (#3225) @knolleary
-
-Editor
-
- - Refresh editor settings whenever a node is added or enabled (#3227) @knolleary
- - Revert spinner css change that made it shrink in some cases (#3229) @knolleary
- - Fix import notification message when importing config nodes (#3224) @knolleary
- - Handle changing types of TypedInput repeatedly (#3223) @knolleary
-
-
-#### 2.1.2: Maintenance Release
-
-
-Runtime
-
- - node-red-pi: Remove bash dependency (#3216) @a16bitsysop
-
-Editor
-
- - Improved regex for markdown renderer (#3213) @GerwinvBeek
- - Fix TypedInput initialisation (#3220) @knolleary
-
-Nodes
-
- - MQTT: fix datatype in node config not used. fixes #3215 (#3219) @Steve-Mcl
-
-#### 2.1.1: Maintenance Release
-
-Editor
-
- - Ensure tourGuide popover doesn't fall offscreen (#3212) @knolleary
- - Fix issue with old inject nodes that migrated topic to 'string' type (#3210) @knolleary
- - Add cache-busting query params to index.mst (#3211) @knolleary
- - Fix TypedInput validation of type without options (#3207) @knolleary
-
-#### 2.1.0: Milestone Release
-
-Editor
-
- - Position popover properly on a scrolled page
- - Fixes from 2.1.0-beta.2 (#3202) @knolleary
-
-Nodes
-
-- Link Out: Fix saving link out node links (#3201) @knolleary
- - Switch: Refix #3170 - copy switch rule type when adding new rule
- - TCP Request: Add string option to TCP request node output (#3204) @dceejay
-
-#### 2.1.0-beta.2: Beta Release
-
-Editor
-
- - Fix switching projects (#3199) @knolleary
- - Use locale setting when installing/enabling node (#3198) @knolleary
- - Do not show projects-wecome dialog until welcome tour completes (#3197) @knolleary
- - Fix converting selection to subflow (#3196) @knolleary
- - Avoid conflicts with native browser cmd-ctrl type shortcuts (#3195) @knolleary
- - Ensure message tools stay attached to top-level entry in Debug/Context (#3186) @knolleary
- - Ensure tab state updates properly when toggling enable state (#3175) @knolleary
- - Improve handling of long labels in TreeList (#3176) @knolleary
- - Shift-click tab scroll arrows to jump to start/end (#3177) @knolleary
-
-Runtime
-
- - Update package dependencies
- - Update to latest node-red-admin
-
-Nodes
-
- - Dynamic MQTT connections (#3189)
- - Link: Filter out Link Out Return nodes in Link In edit dialog Fixes #3187
- - Link: Fix link call label (#3200) @knolleary
- - Debug: Redesign debug filter options and make them persistant (#3183) @knolleary
- - Inject: Widen Inject interval box for >1 digit (#3184) @knolleary
- - Switch: Fix rule focus when switch 'otherwise' rule is used (#3185) @knolleary
-
-#### 2.1.0-beta.1: Beta Release
-
-Editor
-
- - Add Tour Guide component (#3136) @knolleary
- - Allow tabs to be hidden (#3120) @knolleary
- - Add align actions to editor (#3110) @knolleary
- - Add support of environment variable for tab & group (#3112) @HiroyasuNishiyama
- - Add autoComplete widget and add to TypedInput for msg. props (#3171) @knolleary
- - Render node documentation to node-red style guide when written in markdown. (#3169) @Steve-Mcl
- - Allow colouring of tab icon svg (#3140) @harmonic7
- - Restore tab selection after merging conflicts (#3151) @GerwinvBeek
- - Fix serving of theme files on Windows (#3154) @knolleary
- - Ensure config-node select inherits width properly from input (#3155) @knolleary
- - Do better remembering TypedInput values whilst switching types (#3159) @knolleary
- - Update monaco to 0.28.1 (#3153) @knolleary
- - Improve themeing of tourGuide (#3161) @knolleary
- - Allow a node to specify a filter for the config nodes it can pick from (#3160) @knolleary
- - Allow RED.notify.update to modify any notification setting (#3163) @knolleary
- - Fix typo in ko editor.json Fixes #3119
- - Improve RED.actions api to ensure actions cannot be overridden
- - Ensure treeList row has suitable min-height when no content Fixes #3109
- - Refactor edit dialogs to use separate edit panes
- - Ensure type select button is not focussable when TypedInput only has one type
- - Place close tab link in front of fade
-
-Runtime
-
- - Improve error reporting with oauth login strategies (#3148) @knolleary
- - Add allowUpdate feature to externalModules.palette (#3143) @knolleary
- - Improve node install error reporting (#3158) @knolleary
- - Improve unit test coverage (#3168) @knolleary
- - Allow coreNodesDir to be set to false (#3149) @hardillb
- - Update package dependencies
- - uncaughtException debug improvements (#3146) @renatojuniorrs
-
-Nodes
-
- - Change: Add option to deep-clone properties in Change node (#3156) @knolleary
- - Delay: Add push to front of rate limit queue. (#3069) @dceejay
- - File: Add paletteLabel to file nodes to make read/write more obvious (#3157) @knolleary
- - HTTP Request: Extend HTTP request node to log detailed timing information (#3116) @k-toumura
- - HTTP Response: Fix sizing of HTTP Response header fields (#3164) @knolleary
- - Join: Support for msg.restartTimeout (#3121) @magma1447
- - Link Call: Add Link Call node (#3152) @knolleary
- - Switch: Copy previous rule type when adding rule to switch node (#3170) @knolleary
- - Delay node: add option to send intermediate messages on separate output (#3166) @knolleary
- - Typo in http request set method translation (#3173) @mailsvb
-
-#### 2.0.6: Maintenance Release
-
-Editor
-
- - Fix typo in ko editor.json Fixes #3119
- - Change fade color when hovering an inactive tab (#3106) @bonanitech
- - Ensure treeList row has suitable min-height when no content Fixes #3109
-
-Runtime
-
- - Update tar to latest (#3128) @aksswami
- - Give passport verify callback the same arity as the original callback (#3117) @dschmidt
- - Handle HTTPS Key and certificate as string or buffer (#3115) @bartbutenaers
-
-#### 2.0.5: Maintenance Release
-
-Editor
-
- - Remove default ctrl-enter keybinding from monaco editor Fixes #3093
-
-Runtime
-
- - Update tar dependency
- - Add support for maintenance streams in generate-publish-script
-
-
-Nodes
-
- - Fix regression in Join node when manual joining array with msg.parts present Fixes #3096
-
-#### 2.0.4: Maintenance Release
-
-Editor
-
- - Fix tab fade CSS for when using themes (#3085) @bonanitech
- - Handle just-copied-but-not-deployed node with credentials in editor Fixes #3090
-
-Nodes
-
- - Filter: Fix RBE node handling of default topi property Fixes #3087
- - HTTP Request: Handle partially encoded url query strings in request node
- - HTTP Request: Fix support for supplied CA certs (#3089) @hardillb
- - HTTP Request: Ensure TLS Cert is used (#3092) @hardillb
- - Inject: Fix inject now button unable to send empty props
- - Inject: Inject now button success notification should use label with updated props
-
-#### 2.0.3: Maintenance Release
-
-Nodes
-
- - HTML: Fix HTML parsing when body is included in the select tag Fixes #3079
- - HTTP Request: Preserve case of user-provided http headers in request node Fixes #3081
- - HTTP Request: Set decompress to false for HTTP Request to keep 1.x compatibility Fixes #3083
- - HTTP Request: Add unit tests for HTTP Request encodeURI and error response
- - HTTP Request: Do not throw HTTP errors in request node Fixes #3082
- - HTTP Request: Ensure uri is properly encoded before passing to got module Fixes #3080
-
-#### 2.0.2: Maintenance Release
-
-Runtime
-
- - Use file:// url with dynamic import
- - Detect if agent-base has patched https.request and undo it Fixes #3072
-
-Editor
-
- - Fix tab fade css because Safari Fixes #3073
- - Fix error closing library dialog with monaco
- - Handle other error types in Manage Palette view
-
-
-Nodes
-
- - HTTP Request node - ignore invalid cookies rather than fail request Fixes #3075
- - Fix msg.reset handling in Delay node Fixes #3074
-
-#### 2.0.1: Maintenance Release
-
-Nodes
-
- - Function: Ensure default module export is exposed in Function node
-
-#### 2.0.0: Milestone Release
-
-**Migration from 1.x**
-
- - Node-RED now requires Node.js 12.x or later.
-
- - The following nodes have had significant dependency updates. Unless stated,
-   they should be fully backward compatible.
-
-   - RBE:  Relabelled as 'filter' to make it more discoverable and made part of
-     the core palette, rather than as a separate module.
-   - Tail: This node has been removed from the default palette. You can reinstall it
-     from node-red-node-tail
-   - HTTP Request: Reimplemented with a different underlying module. We have
-     tried to maintain 100% functional compatibility, but it is possible
-     some edge cases remain.
-   - JSON: The schema validation option no longer supports JSON-Schema draft-04
-   - HTML: Its underlying module has had a major version update. Should be fully
-     backward compatible.
-
- - `functionExternalModules` is now enabled by default for new installs.
-   If you have an existing settings file that contains this setting, you will
-   need to set it to `true` yourself.
-
-   The external modules will now get installed in your Node-RED user directory,
-   (`~/.node-red`) rather than in a subdirectory. This means all dependencies will
-   be listed in your top-level `package.json`. If you have existing external modules,
-   they will get reinstalled to the new location when you first run Node-RED 2.0.
-
-
-Runtime
-
- - Fix missing dependencies (#3052, #2057) @kazuhitoyokoi
- - Ensure node.types is defined if node html file missing
- - Fix reporting of type_already_registered error
- - Move install location of external modules (#3064) @knolleary
-
-Editor
-
- - Update translations (#3063) @kazuhitoyokoi
- - Add a slight fade to tab labels that overflow
- - Show config node details when selected in outliner
- - Fix layout of info outliner for subflow entries
-
-Nodes
-
- - Delay: let `msg.flush` specify how many messages to flush from node (#3059) @dceejay
- - Function: external modules is now enabled by default (#3065) @knolleary
- - Function: external modules now supports both ES6 and CJS modules (#3065) @knolleary
- - WebSocket: add option for client node to send automatic pings (#3056) @knolleary
-
-
-##### 2.0.0-beta.2: Beta Release
-
-Runtime
-
- - Add `node-red admin init` (via `node-red-admin@2.1.0`)
- - Move to GH Actions rather than Travis for build (#3042) @knolleary
-
-Editor
-
- - Include hasUser=false config nodes when exporting whole flow (#3048)
- - Emit nodes:change for any updated config node when node deleted/added
- - Fix padding of compact notification Closes #3045
- - Ensure any html in changelog is escaped before displaying
- - Add support for Map/Set property types on Debug (#3040) @knolleary
- - Add 'theme' to default settings file
- - Add RED.view.annotations api (#3032) @knolleary
- - Update monaco editor to V0.25.2 (#3031) @Steve-Mcl
- - Lower tray zIndex when overlay tray being opened Fixes #3019
- - Reduce z-Index of Function expand buttons to prevent overlap Part of #3019
- - Ensure RED.clipboard.import displays the right library Fixes #3021
- - Batch messages sent over comms to prevent flooding (#3025) @knolleary
- - Allow RED.popover.panel to specify a closeButton to ignore click events on
- - Use browser default language for initial page load
- - Add css var for node font color
- - Fix label padding of toggleButton
- - Give sidebar open tab a bit more room for its label
- - Various Monaco updates (#3015) @Steve-Mcl
- - Log readOnly on startup (#3024) @sammachin
- - Translation updates (#3020 #3022) @HiroyasuNishiyama @kazuhitoyokoi
-
-Nodes
-
- - HTTP Request: Fix proxy handling (#3044) @hardillb
- - HTTP Request: Handle basic auth with @ in username (#3017) @hardillb
- - Add Japanese translation for file-in node (#3037 #3039) @kazuhitoyokoi
- - File In: Add option for file-in node to include all properties (default off) (#3035) @dceejay
- - Exec: add windowsHide option to hide windows under Windows (#3026) @natcl
- - Support loading external module sub path Fixes #3023
-
-##### 2.0.0-beta.1: Beta Release
-
-
-
-Runtime
-
- - [MAJOR] Set minimum node version to 12.
- - [MAJOR] Fix flowfile name to flows.json in settings (#2951) @dceejay
- - [MAJOR] Update to latest i18n in editor and runtime (#2940) @knolleary
- - [MAJOR] Deprecate usage of httpRoot (#2953) @knolleary
- - Add pre/postInstall hooks to npm install handling (#2936) @knolleary
- - Add engine-strict flag to npm install args (#2965) @nileio
- - Restructure default settings.js to be more organised (#3012) @knolleary
- - Ensure httpServerOptions gets applied to ALL the express apps
- - Allow RED.settings.set to replace string property with object property
- - Update debug tests to handle compact comms format
- - Updates to encode/decode message when passed over debug comms link
- - Remove all input event listeners on a node once it is closed
- - Move hooks to util package
- - Rework hooks structure to be a linkedlist
- - Update dependencies (#2922) @knolleary
-
-Editor
-
- - [MAJOR] Change node id generation to give fixed length values without '.' (#2987) @knolleary
- - [MAJOR] Add Monaco code editor (#2971) @Steve-Mcl
- - Update to latest Monaco (#3007) @Steve-Mcl
- - Update Node-RED Function typings in Monaco (#3008) @Steve-Mcl
- - Add css named variables for certain key colours (#2994) @knolleary
- - Improve contrast of export dialog JSON font color
- - Switch editableList buttons from <a> to <button> elements
- - Add option to RED.nodes.createCompleteNodeSet to include node dimensions
- - Fix css of node help table of contents elements
- - Improve red-ui-node-icon css and add red-ui-node-icon-small modifier class
- - Add RED.hooks to editor
- - Add viewAddPort viewRemovePort viewAddNode viewRemoveNode hooks to view
- - Use paletteLabel if set in help sidebar
- - Add missing args from JSONata $now signature
-
-Nodes
-
- - [MAJOR] Relabel RBE node as 'filter' and move into core. Also remove tail (#2944) @dceejay
- - [MAJOR] HTTP Request: migrate to 'got' module (#2952) @knolleary
- - [MAJOR] Move Inject node to CronosJS module (#2959) @knolleary
- - [MAJOR] JSON: Update ajv to 8.2.0 - drop support for JSON-Schema draft-04 (#2969) @knolleary
- - [MAJOR] HTML node: cheerio update to 1.x (#3011) @knolleary
- - Join: change default manual mode to object (#2931) @knolleary
- - File node: Add fileWorkingDirectory (#2932) @knolleary
- - Delay node enhancements (#2294) @kazuhitoyokoi (#2949) @dceejay
- - Add Japanese translations for delay node enhancements (#2958) @kazuhitoyokoi
- - Inject node: reorder TypedInput options (#2961) @dceejay
- - HTTP Request: update to work with proxies (#2983) @hardillb (#3009) @hardillb
- - HTTP Request: fix msg.responseUrl (#2986) @hardillb
- - TLS: Add ALPN support to TLS node (#2988) @hardillb
- - Inject: add "Inject now" button to edit dialog (#2990) @Steve-Mcl
-
-
-
 #### Older Releases
 
 Change logs for older releases are available on GitHub: https://github.com/node-red/node-red/releases

Gruntfile.js

@@ -142,6 +142,7 @@ module.exports = function(grunt) {
                     "packages/node_modules/@node-red/editor-client/src/js/settings.js",
                     "packages/node_modules/@node-red/editor-client/src/js/user.js",
                     "packages/node_modules/@node-red/editor-client/src/js/comms.js",
+                    "packages/node_modules/@node-red/editor-client/src/js/runtime.js",
                     "packages/node_modules/@node-red/editor-client/src/js/text/bidi.js",
                     "packages/node_modules/@node-red/editor-client/src/js/text/format.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/state.js",
@@ -150,6 +151,7 @@ module.exports = function(grunt) {
                     "packages/node_modules/@node-red/editor-client/src/js/font-awesome.js",
                     "packages/node_modules/@node-red/editor-client/src/js/history.js",
                     "packages/node_modules/@node-red/editor-client/src/js/validators.js",
+                    "packages/node_modules/@node-red/editor-client/src/js/ui/mermaid.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/utils.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js",
@@ -168,6 +170,7 @@ module.exports = function(grunt) {
                     "packages/node_modules/@node-red/editor-client/src/js/ui/diagnostics.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/diff.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js",
+                    "packages/node_modules/@node-red/editor-client/src/js/ui/env-var.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/view.js",
@@ -223,7 +226,7 @@ module.exports = function(grunt) {
                         "node_modules/jsonata/jsonata-es5.min.js",
                         "packages/node_modules/@node-red/editor-client/src/vendor/jsonata/formatter.js",
                         "packages/node_modules/@node-red/editor-client/src/vendor/ace/ace.js",
-                        "packages/node_modules/@node-red/editor-client/src/vendor/ace/ext-language_tools.js",
+                        "packages/node_modules/@node-red/editor-client/src/vendor/ace/ext-language_tools.js"
                     ],
                     // "packages/node_modules/@node-red/editor-client/public/vendor/vendor.css": [
                     //     // TODO: resolve relative resource paths in
@@ -232,6 +235,9 @@ module.exports = function(grunt) {
                     "packages/node_modules/@node-red/editor-client/public/vendor/ace/worker-jsonata.js": [
                         "node_modules/jsonata/jsonata-es5.min.js",
                         "packages/node_modules/@node-red/editor-client/src/vendor/jsonata/worker-jsonata.js"
+                    ],
+                    "packages/node_modules/@node-red/editor-client/public/vendor/mermaid/mermaid.min.js": [
+                        "node_modules/mermaid/dist/mermaid.min.js"
                     ]
                 }
             }
@@ -402,7 +408,7 @@ module.exports = function(grunt) {
                     {
                         cwd: 'packages/node_modules/@node-red/editor-client/src',
                         src: [
-                            'types/node/*.ts',
+                            'types/node/**/*.ts',
                             'types/node-red/*.ts',
                         ],
                         expand: true,

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red",
-    "version": "3.0.0-beta.3",
+    "version": "3.1.0-beta.2",
     "description": "Low-code programming for event-driven applications",
     "homepage": "http://nodered.org",
     "license": "Apache-2.0",
@@ -26,30 +26,30 @@
         }
     ],
     "dependencies": {
-        "acorn": "8.7.1",
+        "acorn": "8.8.2",
         "acorn-walk": "8.2.0",
-        "ajv": "8.11.0",
-        "async-mutex": "0.3.2",
+        "ajv": "8.12.0",
+        "async-mutex": "0.4.0",
         "basic-auth": "2.0.1",
         "bcryptjs": "2.4.3",
-        "body-parser": "1.20.0",
+        "body-parser": "1.20.2",
         "cheerio": "1.0.0-rc.10",
         "clone": "2.1.2",
-        "content-type": "1.0.4",
+        "content-type": "1.0.5",
         "cookie": "0.5.0",
         "cookie-parser": "1.4.6",
         "cors": "2.8.5",
         "cronosjs": "1.7.1",
-        "denque": "2.0.1",
-        "express": "4.18.1",
+        "denque": "2.1.0",
+        "express": "4.18.2",
         "express-session": "1.17.3",
         "form-data": "4.0.0",
         "fs-extra": "10.1.0",
-        "got": "11.8.3",
+        "got": "11.8.6",
         "hash-sum": "2.0.0",
-        "hpagent": "1.0.0",
+        "hpagent": "1.2.0",
         "https-proxy-agent": "5.0.1",
-        "i18next": "21.8.10",
+        "i18next": "21.10.0",
         "iconv-lite": "0.6.3",
         "is-utf8": "0.2.1",
         "js-yaml": "4.1.0",
@@ -59,8 +59,8 @@
         "media-typer": "1.1.0",
         "memorystore": "1.6.7",
         "mime": "3.0.0",
-        "moment": "2.29.3",
-        "moment-timezone": "0.5.34",
+        "moment": "2.29.4",
+        "moment-timezone": "0.5.41",
         "mqtt": "4.3.7",
         "multer": "1.4.5-lts.1",
         "mustache": "4.2.0",
@@ -69,24 +69,24 @@
         "nopt": "5.0.0",
         "oauth2orize": "1.11.1",
         "on-headers": "1.0.2",
-        "passport": "0.5.2",
+        "passport": "0.6.0",
         "passport-http-bearer": "1.0.1",
         "passport-oauth2-client-password": "0.1.2",
-        "raw-body": "2.5.1",
-        "semver": "7.3.7",
-        "tar": "6.1.11",
-        "tough-cookie": "4.0.0",
-        "uglify-js": "3.16.0",
-        "uuid": "8.3.2",
+        "raw-body": "2.5.2",
+        "semver": "7.3.8",
+        "tar": "6.1.13",
+        "tough-cookie": "4.1.2",
+        "uglify-js": "3.17.4",
+        "uuid": "9.0.0",
         "ws": "7.5.6",
         "xml2js": "0.4.23"
     },
     "optionalDependencies": {
-        "bcrypt": "5.0.1"
+        "bcrypt": "5.1.0"
     },
     "devDependencies": {
-        "dompurify": "2.3.8",
-        "grunt": "1.5.3",
+        "dompurify": "2.4.1",
+        "grunt": "1.6.1",
         "grunt-chmod": "~1.1.1",
         "grunt-cli": "~1.4.3",
         "grunt-concurrent": "3.0.0",
@@ -95,7 +95,7 @@
         "grunt-contrib-concat": "2.1.0",
         "grunt-contrib-copy": "1.0.0",
         "grunt-contrib-jshint": "3.2.0",
-        "grunt-contrib-uglify": "5.2.1",
+        "grunt-contrib-uglify": "5.2.2",
         "grunt-contrib-watch": "1.1.0",
         "grunt-jsdoc": "2.4.1",
         "grunt-jsdoc-to-markdown": "6.0.0",
@@ -108,17 +108,18 @@
         "i18next-http-backend": "1.4.1",
         "jquery-i18next": "1.2.1",
         "jsdoc-nr-template": "github:node-red/jsdoc-nr-template",
-        "marked": "4.0.17",
+        "marked": "4.2.12",
+        "mermaid": "^9.3.0",
         "minami": "1.2.3",
         "mocha": "9.2.2",
         "node-red-node-test-helper": "^0.3.0",
-        "nodemon": "2.0.16",
+        "nodemon": "2.0.20",
         "proxy": "^1.0.2",
-        "sass": "1.52.3",
+        "sass": "1.58.3",
         "should": "13.2.3",
         "sinon": "11.1.2",
         "stoppable": "^1.1.0",
-        "supertest": "6.2.3"
+        "supertest": "6.3.3"
     },
     "engines": {
         "node": ">=14"

packages/node_modules/@node-red/editor-api/lib/admin/flows.js

@@ -68,5 +68,28 @@ module.exports = {
         }).catch(function(err) {
             apiUtils.rejectHandler(req,res,err);
         })
+    },
+    getState: function(req,res) {
+        const opts = {
+            user: req.user,
+            req: apiUtils.getRequestLogObject(req)
+        }
+        runtimeAPI.flows.getState(opts).then(function(result) {
+            res.json(result);
+        }).catch(function(err) {
+            apiUtils.rejectHandler(req,res,err);
+        })
+    },
+    postState: function(req,res) {
+        const opts = {
+            user: req.user,
+            state: req.body.state || "",
+            req: apiUtils.getRequestLogObject(req)
+        }
+        runtimeAPI.flows.setState(opts).then(function(result) {
+            res.json(result);
+        }).catch(function(err) {
+            apiUtils.rejectHandler(req,res,err);
+        })
     }
 }

packages/node_modules/@node-red/editor-api/lib/admin/index.js

@@ -54,6 +54,12 @@ module.exports = {
         adminApp.get("/flows",needsPermission("flows.read"),flows.get,apiUtil.errorHandler);
         adminApp.post("/flows",needsPermission("flows.write"),flows.post,apiUtil.errorHandler);
 
+        // Flows/state
+        adminApp.get("/flows/state", needsPermission("flows.read"), flows.getState, apiUtil.errorHandler);
+        if (settings.runtimeState && settings.runtimeState.enabled === true) {
+            adminApp.post("/flows/state", needsPermission("flows.write"), flows.postState, apiUtil.errorHandler);
+        }
+
         // Flow
         adminApp.get("/flow/:id",needsPermission("flows.read"),flow.get,apiUtil.errorHandler);
         adminApp.post("/flow",needsPermission("flows.write"),flow.post,apiUtil.errorHandler);

packages/node_modules/@node-red/editor-api/lib/editor/theme.js

@@ -101,7 +101,10 @@ module.exports = {
         }
         themeSettings = null;
         theme = settings.editorTheme || {};
-        themeContext.asset.vendorMonaco = ((theme.codeEditor || {}).lib === "monaco") ? "vendor/monaco/monaco-bootstrap.js" : "";
+        themeContext.asset.vendorMonaco = "vendor/monaco/monaco-bootstrap.js"
+        if (theme.codeEditor && theme.codeEditor.lib === 'ace') {
+            themeContext.asset.vendorMonaco = ''
+        }
         activeTheme = theme.theme;
     },
 
@@ -263,9 +266,69 @@ module.exports = {
                     theme.page = theme.page || {_:{}}
                     theme.page._.scripts = scriptFiles.concat(theme.page._.scripts || [])
                 }
-                if(theme.codeEditor) {
-                    theme.codeEditor.options = Object.assign({}, themePlugin.monacoOptions, theme.codeEditor.options);
+                // check and load page settings from theme
+                if (themePlugin.page) {
+                    if (themePlugin.page.favicon  && !theme.page.favicon) {
+                        const result = serveFilesFromTheme(
+                            [themePlugin.page.favicon],
+                            themeApp,
+                            "/",
+                            themePlugin.path
+                        )
+                        if(result && result.length > 0) {
+                            // update themeContext page favicon
+                            themeContext.page.favicon = result[0]
+                            theme.page = theme.page || {_:{}}
+                            theme.page._.favicon = result[0]
+                        }
+                    }
+                    if (themePlugin.page.tabicon && themePlugin.page.tabicon.icon && !theme.page.tabicon) {
+                        const result = serveFilesFromTheme(
+                            [themePlugin.page.tabicon.icon],
+                            themeApp,
+                            "/page/",
+                            themePlugin.path
+                        )
+                        if(result && result.length > 0) {
+                            // update themeContext page tabicon
+                            themeContext.page.tabicon.icon = result[0]
+                            themeContext.page.tabicon.colour = themeContext.page.tabicon.colour || themeContext.page.tabicon.colour
+                            theme.page = theme.page || {_:{}}
+                            theme.page._.tabicon = theme.page._.tabicon || {}
+                            theme.page._.tabicon.icon = themeContext.page.tabicon.icon 
+                            theme.page._.tabicon.colour = themeContext.page.tabicon.colour
+                        }
+                    }
+                    // if the plugin has a title AND the users settings.js does NOT
+                    if (themePlugin.page.title && !theme.page.title) {
+                        themeContext.page.title = themePlugin.page.title || themeContext.page.title
+                    }
                 }
+                // check and load header settings from theme
+                if (themePlugin.header) {
+                    if (themePlugin.header.image && !theme.header.image) {
+                        const result = serveFilesFromTheme(
+                            [themePlugin.header.image],
+                            themeApp,
+                            "/header/",
+                            themePlugin.path
+                        )
+                        if(result && result.length > 0) {
+                            // update themeContext header image
+                            themeContext.header.image = result[0]
+                        }
+                    }
+                    // if the plugin has a title AND the users settings.js does NOT have a title
+                    if (themePlugin.header.title && !theme.header.title) {
+                        themeContext.header.title = themePlugin.header.title || themeContext.header.title
+                    }
+                    // if the plugin has a header url AND the users settings.js does NOT
+                    if (themePlugin.header.url && !theme.header.url) {
+                        themeContext.header.url = themePlugin.header.url || themeContext.header.url
+                    }
+                }
+                theme.codeEditor = theme.codeEditor || {}
+                theme.codeEditor.options = Object.assign({}, themePlugin.monacoOptions, theme.codeEditor.options);
             }
             activeThemeInitialised = true;
         }

packages/node_modules/@node-red/editor-api/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/editor-api",
-    "version": "3.0.0-beta.3",
+    "version": "3.1.0-beta.2",
     "license": "Apache-2.0",
     "main": "./lib/index.js",
     "repository": {
@@ -16,14 +16,14 @@
         }
     ],
     "dependencies": {
-        "@node-red/util": "3.0.0-beta.3",
-        "@node-red/editor-client": "3.0.0-beta.3",
+        "@node-red/util": "3.1.0-beta.2",
+        "@node-red/editor-client": "3.1.0-beta.2",
         "bcryptjs": "2.4.3",
-        "body-parser": "1.20.0",
+        "body-parser": "1.20.2",
         "clone": "2.1.2",
         "cors": "2.8.5",
         "express-session": "1.17.3",
-        "express": "4.18.1",
+        "express": "4.18.2",
         "memorystore": "1.6.7",
         "mime": "3.0.0",
         "multer": "1.4.5-lts.1",
@@ -31,10 +31,10 @@
         "oauth2orize": "1.11.1",
         "passport-http-bearer": "1.0.1",
         "passport-oauth2-client-password": "0.1.2",
-        "passport": "0.5.2",
+        "passport": "0.6.0",
         "ws": "7.5.6"
     },
     "optionalDependencies": {
-        "bcrypt": "5.0.1"
+        "bcrypt": "5.1.0"
     }
 }

packages/node_modules/@node-red/editor-client/locales/de/editor.json

@@ -44,7 +44,8 @@
         "loadNodes": "Lade Nodes __count__",
         "loadFlows": "Lade Flows",
         "importFlows": "Füge Flows dem Arbeitsbereich hinzu",
-        "importError": "<p>Fehler beim Laden von Flows.</p><p>__message__</p>"
+        "importError": "<p>Fehler beim Laden von Flows.</p><p>__message__</p>",
+        "loadingProject": "Lade Projekt"
     },
     "workspace": {
         "defaultName": "Flow __number__",
@@ -53,7 +54,16 @@
         "delete": "Sind Sie sicher, dass '__label__' gelöscht werden soll?",
         "dropFlowHere": "Hier kann der Flow eingefügt werden",
         "addFlow": "Flow hinzufügen",
+        "addFlowToRight": "Flow zum Arbeitsbereich rechts hinzufügen",
+        "hideFlow": "Flow ausblenden",
+        "hideOtherFlows": "Andere Flows ausblenden",
+        "showAllFlows": "Alle Flows anzeigen",
+        "hideAllFlows": "Alle Flows ausblenden",
+        "hiddenFlows": "Liste __count__ ausgeblendeten Flow auf",
+        "hiddenFlows_plural": "Liste __count__ ausgeblendete Flows auf",
+        "showLastHiddenFlow": "Letzten ausgeblendeten Flow anzeigen",
         "listFlows": "Flows auflisten",
+        "listSubflows": "Subflows auflisten",
         "status": "Status",
         "enabled": "Aktiviert",
         "disabled": "Deaktiviert",
@@ -65,6 +75,8 @@
             "view": {
                 "view": "Ansicht",
                 "grid": "Raster",
+                "storeZoom": "Zoomstufe beim Laden wiederherstellen",
+                "storePosition": "Scrollposition beim Laden wiederherstellen",
                 "showGrid": "Raster anzeigen",
                 "snapGrid": "Am Raster ausrichten",
                 "gridSize": "Rastergröße",
@@ -82,6 +94,7 @@
             "palette": {
                 "show": "Palette anzeigen"
             },
+            "edit": "Bearbeiten",
             "settings": "Einstellungen",
             "userSettings": "Einstellungen",
             "nodes": "Nodes",
@@ -92,7 +105,7 @@
             "search": "Flows durchsuchen",
             "searchInput": "Flows durchsuchen",
             "subflows": "Subflow",
-            "createSubflow": "Erstellen",
+            "createSubflow": "Hinzufügen",
             "selectionToSubflow": "Auswahl in Subflow umwandeln",
             "flows": "Flow",
             "add": "Hinzufügen",
@@ -104,24 +117,43 @@
             "editPalette": "Palette verwalten",
             "other": "Sonstige",
             "showTips": "Tipps anzeigen",
+            "showWelcomeTours": "Geführte Touren für neue Versionen anzeigen",
             "help": "Node-RED-Website",
-            "projects": "Projekt",
+            "projects": "Projekte",
             "projects-new": "Neu",
             "projects-open": "Öffnen",
             "projects-settings": "Einstellungen",
             "showNodeLabelDefault": "Zeige Namen von neu hinzugefügten Nodes",
-            "groups": "Gruppe",
+            "codeEditor": "Code-Editor",
+            "groups": "Gruppen",
             "groupSelection": "Auswahl gruppieren",
             "ungroupSelection": "Gruppe auflösen",
             "groupMergeSelection": "Auswahl der Gruppe hinzufügen",
-            "groupRemoveSelection": "Auswahl aus der Gruppe entfernen"
+            "groupRemoveSelection": "Auswahl aus der Gruppe entfernen",
+            "arrange": "Anordnen",
+            "alignLeft": "Links ausrichten",
+            "alignCenter": "Zentrieren",
+            "alignRight": "Rechts ausrichten",
+            "alignTop": "Oben ausrichten",
+            "alignMiddle": "Mittig ausrichten",
+            "alignBottom": "Unten ausrichten",
+            "distributeHorizontally": "Horizontal verteilen",
+            "distributeVertically": "Vertikal verteilen",
+            "moveToBack": "Nach hinten verschieben",
+            "moveToFront": "Nach vorne verschieben",
+            "moveBackwards": "Rückwärts verschieben",
+            "moveForwards": "Vorwärts verschieben"
         }
     },
     "actions": {
         "toggle-navigator": "Navigator ein-/ausblenden",
         "zoom-out": "Verkleinern",
         "zoom-reset": "Vergrößerung rücksetzen",
-        "zoom-in": "Vergrößern"
+        "zoom-in": "Vergrößern",
+        "search-flows": "Flows durchsuchen",
+        "search-prev": "Vorherige",
+        "search-next": "Nächste",
+        "search-counter": "\"__term__\" __result__ von __count__"
     },
     "user": {
         "loggedInAs": "Angemeldet als __name__",
@@ -131,48 +163,52 @@
         "loginFailed": "Anmeldung fehlgeschlagen",
         "notAuthorized": "Nicht berechtigt",
         "errors": {
-            "settings": "Sie müssen angemeldet sein, um auf die Einstellungen zuzugreifen zu können",
+            "settings": "Sie müssen angemeldet sein, um auf die Einstellungen zugreifen zu können",
             "deploy": "Sie müssen angemeldet sein, um Änderungen übernehmen (deploy) zu können",
             "notAuthorized": "Sie müssen angemeldet sein, um diese Aktion ausführen zu können"
         }
     },
     "notification": {
-        "warning": "<strong>Warnung:</strong> __message__",
+        "state": {
+            "flowsStopped": "Flows gestoppt",
+            "flowsStarted": "Flows gestartet"
+        },
+        "warning": "<strong>Warnung</strong>: __message__",
         "warnings": {
             "undeployedChanges": "Node hat nicht übernommene (deploy) Änderungen",
             "nodeActionDisabled": "Node-Aktionen deaktiviert",
-            "nodeActionDisabledSubflow": "Node-Aktionen deaktiviert im Subflow",
+            "nodeActionDisabledSubflow": "Node-Aktionen innerhalb des Subflows deaktiviert",
             "missing-types": "<p>Flows gestoppt aufgrund fehlender Node-Typen</p>",
             "missing-modules": "<p>Flows angehalten aufgrund fehlender Module</p>",
             "safe-mode": "<p>Flows sind im abgesicherten Modus gestoppt.</p><p>Flows können bearbeitet und übernommen (deploy) werden, um sie neu zu starten.</p>",
             "restartRequired": "Node-RED muss neu gestartet werden, damit die Module nach Upgrade aktiviert werden",
-            "credentials_load_failed": "<p>Flows gestoppt, da die Berechtigungen nicht entschlüsselt werden konnten.</p><p>Die Datei mit dem Flow-Berechtigungen ist verschlüsselt, aber der Schlüssel des Projekts fehlt oder ist ungültig.</p>",
-            "credentials_load_failed_reset": "<p>Die Berechtigungen konnten nicht entschlüsselt werden.</p><p>Die Datei mit den Flow-Berechtigungen ist verschlüsselt, aber der Schlüssel des Projekts fehlt oder ist ungültig.</p><p>Die Datei mit den Flow-Berechtigungen wird bei der nächsten Übernahme (deploy) zurückgesetzt. Alle vorhandenen Flow-Berechtigungen werden gelöscht.</p>",
+            "credentials_load_failed": "<p>Flows gestoppt, da die Credentials nicht entschlüsselt werden konnten.</p><p>Die Datei mit den Flow-Credentials ist verschlüsselt, aber der Schlüssel des Projekts fehlt oder ist ungültig.</p>",
+            "credentials_load_failed_reset": "<p>Die Credentials konnten nicht entschlüsselt werden.</p><p>Die Datei mit den Flow-Credentials ist verschlüsselt, aber der Schlüssel des Projekts fehlt oder ist ungültig.</p><p>Die Datei mit den Flow-Credentials wird bei der nächsten Übernahme (deploy) zurückgesetzt. Alle vorhandenen Flow-Credentials werden gelöscht.</p>",
             "missing_flow_file": "<p>Die Flow-Datei des Projekts wurde nicht gefunden.</p><p>Das Projekt ist nicht mit einer Flow-Datei konfiguriert.</p>",
             "missing_package_file": "<p>Die Paket-Datei des Projekts wurde nicht gefunden.</p><p>In dem Projekt fehlt die 'package.json'-Datei.</p>",
             "project_empty": "<p>Das Projekt ist leer.</p><p>Soll ein Standardsatz an Projektdateien erstellen werden?<br/>Andernfalls müssen die Dateien manuell außerhalb des Editors dem Projekt hinzugefügt werden.</p>",
             "project_not_found": "<p>Das Projekt '__project__' wurde nicht gefunden.</p>",
             "git_merge_conflict": "<p>Der automatische Merge der Änderungen ist fehlgeschlagen.</p><p>Die Merge-Konflikte müssen behoben und die Ergebnisse ins Repository übertragen werden (commit).</p>"
         },
-        "error": "<strong>Fehler:</strong> __message__",
+        "error": "<strong>Fehler</strong>: __message__",
         "errors": {
             "lostConnection": "Verbindung zum Server verloren. Verbindung wird erneut hergestellt ...",
-            "lostConnectionReconnect": "Verbindung zum Server verloren. Verbindung wird in __time__ s versucht wieder herzustellen.",
-            "lostConnectionTry": "Jetzt testen",
+            "lostConnectionReconnect": "Verbindung zum Server verloren. Wiederherstellung der Verbindung in __time__s.",
+            "lostConnectionTry": "Jetzt versuchen",
             "cannotAddSubflowToItself": "Subflow kann nicht zu sich selbst hinzugefügt werden",
             "cannotAddCircularReference": "Subflow kann nicht hinzugefügt werden, da ein zirkulärer Bezug erkannt wurde",
             "unsupportedVersion": "<p>Nicht unterstützte Version von Node.js erkannt.</p><p>Es muss ein Upgrade auf das neueste LTS-Release von Node.js durchgeführt werden.</p>",
             "failedToAppendNode": "<p>Fehler beim Laden von '__module__'.</p><p>__error__</p>"
         },
         "project": {
-            "change-branch": "Wechsel in den Branch '__project__'",
-            "merge-abort": "Merge abgebrochen",
+            "change-branch": "Wechsel in den lokalen Branch '__project__'",
+            "merge-abort": "Git-Merge abgebrochen",
             "loaded": "Projekt '__project__' geladen",
             "updated": "Projekt '__project__' aktualisiert",
             "pull": "Projekt '__project__' erneut geladen",
             "revert": "Änderungen im Projekt '__project__' rückgängig gemacht",
-            "merge-complete": "Merge abgeschlossen",
-            "setupCredentials": "Berechtigungen einrichten",
+            "merge-complete": "Git-Merge abgeschlossen",
+            "setupCredentials": "Credentials einrichten",
             "setupProjectFiles": "Projektdateien einrichten",
             "no": "Nein, Danke",
             "createDefault": "Standardprojektdateien erstellen",
@@ -180,13 +216,13 @@
         },
         "label": {
             "manage-project-dep": "Projektabhängigkeiten verwalten",
-            "setup-cred": "Berechtigungen einrichten",
+            "setup-cred": "Credentials einrichten",
             "setup-project": "Projektdateien einrichten",
             "create-default-package": "Standardpaketdatei erstellen",
             "no-thanks": "Nein, Danke",
             "create-default-project": "Standardprojektdateien erstellen",
             "show-merge-conflicts": "Merge-Konflikte anzeigen",
-            "unknownNodesButton": "Finden Sie unbekannte nodes"
+            "unknownNodesButton": "Nach unbekannten Nodes suchen"
         }
     },
     "clipboard": {
@@ -204,17 +240,17 @@
         "subflow_plural": "__count__ Subflows",
         "replacedNodes": "__count__ Node ersetzt",
         "replacedNodes_plural": "__count__ Nodes ersetzt",
-        "pasteNodes": "Flow-JSON hier einfügen oder",
+        "pasteNodes": "Flow-JSON einfügen oder",
         "selectFile": "Datei für Import auswählen",
         "importNodes": "Import",
         "exportNodes": "Export",
         "download": "Download",
-        "importUnrecognised": "Importierter Typ nicht erkannt:",
-        "importUnrecognised_plural": "Importierte Typen nicht erkannt:",
-        "importDuplicate": "Importiertes doppeltes Node:",
-        "importDuplicate_plural": "Importierte doppelte Nodes:",
-        "nodesExported": "Nodes in der Zwischenablage abgelegt",
-        "nodesImported": "Eingefügt:",
+        "importUnrecognised": "Nicht erkannten Typ importiert:",
+        "importUnrecognised_plural": "Nicht erkannte Typen importiert:",
+        "importDuplicate": "Doppelten Node importiert:",
+        "importDuplicate_plural": "Doppelte Nodes importiert:",
+        "nodesExported": "Nodes in die Zwischenablage exportiert",
+        "nodesImported": "Importiert:",
         "nodeCopied": "__count__ Node kopiert",
         "nodeCopied_plural": "__count__ Nodes kopiert",
         "groupCopied": "__count__ Gruppe kopiert",
@@ -230,11 +266,11 @@
             "all": "Alle Flows",
             "compact": "Kompakt",
             "formatted": "Formatiert",
-            "copy": "In Zwischenablage exportieren",
+            "copy": "In Zwischenablage kopieren",
             "export": "In Bibliothek exportieren",
             "exportAs": "Exportiere als",
             "overwrite": "Ersetzen",
-            "exists": "<p>'__file__' existiert bereits.</p><p>Soll sie ersetzt werden?</p>"
+            "exists": "<p><b>\"__file__\"</b> existiert bereits.</p><p>Soll sie ersetzt werden?</p>"
         },
         "import": {
             "import": "Importiere in",
@@ -264,15 +300,19 @@
         "modifiedFlowsDesc": "Übernimmt nur Flows, die geänderte Nodes enthalten",
         "modifiedNodes": "Geänderte Nodes",
         "modifiedNodesDesc": "Übernimmt nur Nodes, die sich geändert haben",
+        "startFlows": "Start",
+        "startFlowsDesc": "Flows starten",
+        "stopFlows": "Stop",
+        "stopFlowsDesc": "Flows stoppen",
         "restartFlows": "Flows neustarten",
         "restartFlowsDesc": "Startet die aktuell übernommenen Flows (ohne vorheriges Deploy)",
         "successfulDeploy": "Erfolgreich übernommen (deploy)",
         "successfulRestart": "Flows erfolgreich neugestartet",
         "deployFailed": "Übernahme (deploy) fehlgeschlagen: __message__",
         "unusedConfigNodes": "Einige Konfigurations-Nodes werden nicht verwendet.",
-        "unusedConfigNodesButton":"Finden Sie ungenutzte konfig nodes",
-        "unknownNodesButton":"Finden Sie unbekannte nodes",
-        "invalidNodesButton":"Finden Sie ungültige nodes",
+        "unusedConfigNodesButton": "Suche nach unbenutzten Konfigurations-Nodes",
+        "unknownNodesButton": "Suche nach unbekannten Nodes",
+        "invalidNodesButton": "Suche nach ungültigen Nodes",
         "errors": {
             "noResponse": "Keine Antwort vom Server"
         },
@@ -345,7 +385,7 @@
         "confirmDelete": "Sind Sie sicher mit dem Löschen dieses Subflows?",
         "info": "Beschreibung",
         "category": "Kategorie",
-        "module": "Module",
+        "module": "Modul",
         "license": "Lizenz",
         "licenseNone": "Keine",
         "licenseOther": "Andere",
@@ -355,10 +395,10 @@
         "keys": "Schlüsselwörter",
         "keysPlaceholder": "Komma-getrennte Schlüsselwörter",
         "author": "Author",
-        "authorPlaceholder": "Dein Name <email@beispiel.de>",
+        "authorPlaceholder": "Ihr Name <email@example.com>",
         "desc": "Beschreibung",
         "env": {
-            "restore": "Stelle auf Subflow-Standard zurück",
+            "restore": "Subflow-Standard wiederherstellen",
             "remove": "Entferne Umgebungsvariable"
         },
         "errors": {
@@ -367,9 +407,9 @@
         }
     },
     "group": {
-        "editGroup": "Editiere Gruppe: __name__",
+        "editGroup": "Bearbeite Gruppe: __name__",
         "errors": {
-            "cannotCreateDiffGroups": "Kann keine Gruppe erzeugen mit Nodes von verschiedenen Gruppen",
+            "cannotCreateDiffGroups": "Kann keine Gruppe mit Nodes von anderen Gruppen erstellen",
             "cannotAddSubflowPorts": "Kann keine Subflow-Anschlüsse zu einer Gruppe hinzufügen"
         }
     },
@@ -383,7 +423,7 @@
         "addNewConfig": "Neuen Konfigurations-Node '__type__' hinzufügen",
         "editNode": "Node '__type__' bearbeiten",
         "editConfig": "Konfigurations-Node '__type__' bearbeiten",
-        "addNewType": "Neuen Typ '__type__' hinzufügen",
+        "addNewType": "Neuen Typ '__type__' hinzufügen ...",
         "nodeProperties": "Node-Eigenschaften",
         "label": "Name",
         "color": "Farbe",
@@ -403,10 +443,10 @@
         "icon": "Icon",
         "inputType": "Eingangstyp",
         "selectType": "Wähle Typen ...",
-        "loadCredentials": "Lade Node-Berechtigungen",
+        "loadCredentials": "Lade Node-Credentials",
         "inputs": {
             "input": "Eingang",
-            "select": "Wähle",
+            "select": "Auswahl",
             "checkbox": "Checkbox",
             "spinner": "Spinner",
             "none": "Kein",
@@ -419,7 +459,7 @@
             "json": "JSON",
             "bin": "buffer",
             "env": "Umgebungsvariable",
-            "cred": "Berechtigung"
+            "cred": "Credentials"
         },
         "menu": {
             "input": "Eingang",
@@ -439,7 +479,7 @@
         "errors": {
             "scopeChange": "Wenn Sie den Geltungsbereich (scope) ändern, wird er für Nodes in anderen Flows nicht verfügbar sein",
             "invalidProperties": "Ungültige Eigenschaften:",
-            "credentialLoadFailed": "Laden der Node-Berechtigungen fehlgeschlagen"
+            "credentialLoadFailed": "Laden der Node-Credentials fehlgeschlagen"
         }
     },
     "keyboard": {
@@ -449,23 +489,27 @@
         "shortcut": "Tastenkürzel",
         "scope": "Geltungsbereich",
         "unassigned": "Nicht zugeordnet",
-        "global": "global",
+        "global": "Global",
         "workspace": "Arbeitsbereich",
-        "selectAll": "Alle Nodes auswählen",
+        "selectAll": "Alles auswählen",
+        "selectNone": "Alles abwählen",
         "selectAllConnected": "Alle verbundenen Nodes auswählen",
         "addRemoveNode": "Node aus Auswahl hinzufügen/entfernen",
         "editSelected": "Ausgewählten Node bearbeiten",
         "deleteSelected": "Ausgewählte Nodes oder Links löschen",
-        "importNode": "Node importieren",
-        "exportNode": "Node exportieren",
+        "importNode": "Nodes importieren",
+        "exportNode": "Nodes exportieren",
         "nudgeNode": "Ausgewählte Nodes verschieben (1px)",
         "moveNode": "Ausgewählte Nodes verschieben (20px)",
         "toggleSidebar": "Seitenleiste ein-/ausblenden",
         "togglePalette": "Palette ein-/ausblenden",
         "copyNode": "Ausgewählte Nodes kopieren",
         "cutNode": "Ausgewählte Nodes ausschneiden",
-        "pasteNode": "Node einfügen",
+        "pasteNode": "Nodes einfügen",
+        "copyGroupStyle": "Gruppenstil kopieren",
+        "pasteGroupStyle": "Gruppenstil einfügen",
         "undoChange": "Letzte Änderung rückgängig machen",
+        "redoChange": "Letzte Änderung wiederholen",
         "searchBox": "Suchfeld öffnen",
         "managePalette": "Palette verwalten",
         "actionList": "Aktionsliste"
@@ -491,7 +535,7 @@
     "palette": {
         "noInfo": "Keine Informationen verfügbar",
         "filter": "Nodes filtern",
-        "search": "Modules durchsuchen",
+        "search": "Module durchsuchen",
         "addCategory": "Neu hinzufügen ...",
         "label": {
             "subflows": "Subflows",
@@ -520,7 +564,8 @@
             "nodeEnabled_plural": "Nodes aktiviert:",
             "nodeDisabled": "Node deaktiviert:",
             "nodeDisabled_plural": "Nodes deaktiviert:",
-            "nodeUpgraded": "Upgrade von Node-Modul __module__ auf Version __version__ durchgeführt"
+            "nodeUpgraded": "Upgrade von Node-Modul __module__ auf Version __version__ durchgeführt",
+            "unknownNodeRegistered": "Fehler beim Laden des Nodes: <ul><li>__type__<br>__error__</li></ul>"
         },
         "editor": {
             "title": "Palette verwalten",
@@ -636,7 +681,7 @@
             "outline": "Entwurf",
             "empty": "leer",
             "globalConfig": "Globale Konfigurations-Nodes",
-            "triggerAction": "Auslösen",
+            "triggerAction": "Aktion auslösen",
             "find": "Suche im Arbeitsbereich"
         },
         "help": {
@@ -647,7 +692,8 @@
             "showHelp": "Hilfe zeigen",
             "showInOutline": "Zeige im Editor",
             "showTopics": "Zeige Hilfethemen",
-            "noHelp": "Kein Hilfethema ausgewählt"
+            "noHelp": "Kein Hilfethema ausgewählt",
+            "changeLog": "Änderungsprotokoll"
         },
         "config": {
             "name": "Konfigurations-Node",
@@ -701,7 +747,7 @@
                 "addToProject": "Zu Projekt hinzufügen",
                 "files": "Dateien",
                 "flow": "Flow",
-                "credentials": "Berechtigungen",
+                "credentials": "Credentials",
                 "package": "Paket",
                 "packageCreate": "Datei wird erstellt beim Speichern der Änderungen",
                 "fileNotExist": "Datei existiert nicht",
@@ -714,7 +760,7 @@
                 "changeTheEncryptionKey": "Schlüssel ändern",
                 "currentKey": "Aktueller Schlüssel",
                 "newKey": "Neuer Schlüssel",
-                "credentialsAlert": "Dadurch werden alle vorhandenen Berechtigungen gelöscht",
+                "credentialsAlert": "Dadurch werden alle vorhandenen Credentials gelöscht",
                 "versionControl": "Versionsverwaltung (Git)",
                 "branches": "Branches",
                 "noBranches": "Keine Branches",
@@ -739,7 +785,7 @@
                 "userName": "Benutzername",
                 "email": "E-Mail",
                 "workflow": "Arbeitsablauf",
-                "workfowTip": "Wähle deinen bevorzugten Git-Arbeitsablauf",
+                "workfowTip": "Wählen Sie Ihren bevorzugten Git-Arbeitsablauf (Workflow)",
                 "workflowManual": "Manuell",
                 "workflowManualTip": "Alle Änderungen müssen manuell übertragen werden (commit) über die Seitenleiste 'Projekthistorie'",
                 "workflowAuto": "Automatisch",
@@ -850,7 +896,7 @@
             "date": "timestamp",
             "jsonata": "JSONata",
             "env": "Umgebungsvariable",
-            "cred": "Berechtigung"
+            "cred": "Credentials"
         }
     },
     "editableList": {
@@ -858,6 +904,8 @@
         "addTitle": "Element hinzufügen"
     },
     "search": {
+        "history": "Suchhistorie",
+        "clear": "Leeren",
         "empty": "Keine Übereinstimmungen gefunden",
         "addNode": "Node hinzufügen ...",
         "options": {
@@ -865,7 +913,10 @@
             "unusedConfigNodes": "Unbenutzte Konfigurations-Nodes",
             "invalidNodes": "Ungültige Nodes",
             "uknownNodes": "Unbekannte Nodes",
-            "unusedSubflows": "Unbenutzte Subflows"
+            "unusedSubflows": "Unbenutzte Subflows",
+            "hiddenFlows": "Versteckte Flows",
+            "modifiedNodes": "Geänderte Nodes",
+            "thisFlow": "Aktueller Flow"
         }
     },
     "expressionEditor": {
@@ -887,6 +938,9 @@
             "eval": "Fehler beim Auswerten des Ausdrucks\n__message__"
         }
     },
+    "monaco": {
+        "setTheme": "Thema auswählen"
+    },
     "jsEditor": {
         "title": "JavaScript-Editor"
     },
@@ -896,8 +950,10 @@
     "jsonEditor": {
         "title": "JSON-Editor",
         "format": "JSON formatieren",
-        "rawMode": "JSON-Editor",
+        "rawMode": "Bearbeite JSON",
         "uiMode": "Visueller Editor",
+        "rawMode-readonly": "JSON",
+        "uiMode-readonly": "Visuell",
         "insertAbove": "Oberhalb einfügen",
         "insertBelow": "Unterhalb einfügen",
         "addItem": "Element hinzufügen",
@@ -968,7 +1024,7 @@
             "clone": "Projekt klonen",
             "desc0": "Wenn Sie bereits über ein Git-Repository verfügen, das ein Projekt enthält, können Sie es klonen, um damit zu arbeiten.",
             "already-exists": "Das Projekt ist bereits vorhanden",
-            "must-contain": "Darf nur A-Z 0-9 _ enthalten",
+            "must-contain": "Darf nur A-Z 0-9 _ - enthalten",
             "project-name": "Projektname",
             "no-info-in-url": "Geben Sie Benutzername & Passwort nicht innerhalb der URL vor",
             "git-url": "Git-Repository-URL",
@@ -980,7 +1036,7 @@
             "passphrase": "Passphrase",
             "ssh-key-desc": "Bevor Sie ein Repository über SSH lokal klonen können, müssen Sie einen SSH-Schlüssel hinzufügen, um auf diesen zugreifen zu können",
             "ssh-key-add": "SSH-Schlüssel hinzufügen",
-            "credential-key": "Schlüssel für Berechtigungen",
+            "credential-key": "Schlüssel für Credentials",
             "cant-get-ssh-key": "Fehler! Der ausgewählte SSH-Schlüsselpfad kann nicht abgerufen werden",
             "already-exists2": "bereits vorhanden",
             "git-error": "Git-Fehler",
@@ -992,27 +1048,27 @@
             "create": "Erstellen Sie Ihre Projektdateien",
             "desc0": "Ein Projekt enthält Ihre Flow-Dateien, eine README-Datei und die 'package.json'-Datei.",
             "desc1": "Es kann alle anderen Dateien enthalten, die im Git-Repository verwaltet werden sollen.",
-            "desc2": "Ihre vorhandenen Flow- und Berechtigungs-Dateien werden in das Projekt kopiert.",
+            "desc2": "Ihre vorhandenen Flow- und Credential-Dateien werden in das Projekt kopiert.",
             "flow-file": "Flow-Datei",
-            "credentials-file": "Datei mit Berechtigungen"
+            "credentials-file": "Datei mit Credentials"
         },
         "encryption-config": {
-            "setup": "Einrichtung der Verschlüsselung Ihrer Datei mit den Berechtigungen",
-            "desc0": "Die Datei mit den Flow-Berechtigungen kann verschlüsselt werden, um ihren Inhalt zu schützen.",
-            "desc1": "Wenn Sie diese Berechtigungen in einem öffentlichen Repository speichern möchten, müssen Sie sie mit einen geheimen Schlüsselausdruck verschlüsseln.",
-            "desc2": "Die Datei mit den Flow-Berechtigungen ist derzeit nicht verschlüsselt.",
+            "setup": "Einrichtung der Verschlüsselung Ihrer Datei mit den Credentials",
+            "desc0": "Die Datei mit den Flow-Credentials kann verschlüsselt werden, um ihren Inhalt zu schützen.",
+            "desc1": "Wenn Sie diese Credentials in einem öffentlichen Repository speichern möchten, müssen Sie sie mit einen geheimen Schlüsselausdruck verschlüsseln.",
+            "desc2": "Die Datei mit den Flow-Credentials ist derzeit nicht verschlüsselt.",
             "desc3": "D.h. ihr Inhalt (z.B. Passwörter und Zugriffs-Tokens) kann von jedem mit Zugriff auf die Datei gelesen werden.",
-            "desc4": "Wenn Sie diese Berechtigungen in einen öffentlichen Repository speichern möchten, müssen Sie diese verschlüsseln, indem Sie einen geheimen Schlüsselausdruck eingeben.",
-            "desc5": "Ihre Datei mit den Flow-Berechtigungen wird derzeit mit dem Eintrag 'credentialSecret' Ihrer Einstellungsdatei als Schlüssel verschlüsselt.",
-            "desc6": "Die Datei mit den Flow-Berechtigungen wird derzeit mit einem vom System generierten Schlüssel verschlüsselt. Sie sollten einen neuen geheimen Schlüssel für dieses Projekt vorgeben.",
+            "desc4": "Wenn Sie diese Credentials in einen öffentlichen Repository speichern möchten, müssen Sie diese verschlüsseln, indem Sie einen geheimen Schlüsselausdruck eingeben.",
+            "desc5": "Ihre Datei mit den Flow-Credentials wird derzeit mit dem Eintrag 'credentialSecret' Ihrer Einstellungsdatei als Schlüssel verschlüsselt.",
+            "desc6": "Die Datei mit den Flow-Credentials wird derzeit mit einem vom System generierten Schlüssel verschlüsselt. Sie sollten einen neuen geheimen Schlüssel für dieses Projekt vorgeben.",
             "desc7": "Der Schlüssel wird separat von den Projektdateien gespeichert. Sie müssen den Schlüssel angeben, damit dieses Projekt auch in einem anderen Node-RED-System verwendet werden kann.",
-            "credentials": "Berechtigung",
+            "credentials": "Credentials",
             "enable": "Verschlüsselung aktivieren",
             "disable": "Verschlüsselung deaktivieren",
             "disabled": "deaktiviert",
             "copy": "Vorhandenen Schlüssel ersetzen",
             "use-custom": "Eigenen Schlüssel verwenden",
-            "desc8": "Die Datei mit den Berechtigungen wird nicht verschlüsselt, und ihr Inhalt kann leicht gelesen werden",
+            "desc8": "Die Datei mit den Credentials wird nicht verschlüsselt und ihr Inhalt kann leicht gelesen werden",
             "create-project-files": "Projektdateien erstellen",
             "create-project": "Projekt erstellen",
             "already-exists": "bereits vorhanden",
@@ -1026,7 +1082,7 @@
             "desc2": "Im Tab 'Commit-Historie' in der Seitenleiste werden alle Dateien angezeigt, die sich in Ihrem Projekt geändert haben, und um sie ins lokale Repository zu übertragen (commit). Es zeigt Ihnen eine vollständige Historie Ihrer Commits an und ermöglicht es Ihnen, Ihre Commits in ein (remote) Server-Repository zu schieben (push)."
         },
         "create": {
-            "projects": "Projekt",
+            "projects": "Projekte",
             "already-exists": "Das Projekt ist bereits vorhanden",
             "must-contain": "Darf nur A-Z 0-9 _ enthalten",
             "no-info-in-url": "Geben Sie Benutzername & Passwort nicht innerhalb der URL vor",
@@ -1037,12 +1093,12 @@
             "desc": "Beschreibung",
             "opt": "Optional",
             "flow-file": "Flow-Datei",
-            "credentials": "Berechtigungen",
+            "credentials": "Credentials",
             "enable-encryption": "Verschlüsselung aktivieren",
             "disable-encryption": "Verschlüsselung deaktivieren",
             "encryption-key": "Schlüssel",
-            "desc0": "Eine Floskel, mit der Sie Ihre Berechtigungen schützen",
-            "desc1": "Die Datei mit den Berechtigungen wird nicht verschlüsselt, und ihr Inhalt kann leicht gelesen werden",
+            "desc0": "Eine Ausdruck, mit der Sie Ihre Credentials schützen",
+            "desc1": "Die Datei mit den Credentials wird nicht verschlüsselt und ihr Inhalt kann leicht gelesen werden",
             "git-url": "Git-Repository-URL",
             "protocols": "https://, ssh:// oder file://",
             "auth-failed": "Authentifizierung fehlgeschlagen",
@@ -1052,14 +1108,15 @@
             "passphrase": "Passphrase",
             "desc2": "Bevor Sie ein Repository über SSH klonen können, müssen Sie einen SSH-Schlüssel hinzufügen, um auf diesen zu zugreifen",
             "add-ssh-key": "Einen SSH-Schlüssel hinzufügen",
-            "credentials-encryption-key": "Schlüssel für Berechtigungen",
+            "credentials-encryption-key": "Schlüssel für Credentials",
             "already-exists-2": "bereits vorhanden",
             "git-error": "Git-Fehler",
             "con-failed": "Verbindung fehlgeschlagen",
             "not-git": "Kein Git-Repository",
             "no-resource": "Repository nicht gefunden",
             "cant-get-ssh-key-path": "Fehler! Der ausgewählte SSH-Schlüsselpfad kann nicht abgerufen werden.",
-            "unexpected_error": "unerwarteter_Fehler"
+            "unexpected_error": "unerwarteter_Fehler",
+            "clearContext": "Kontextdaten löschen beim Projektwechsel"
         },
         "delete": {
             "confirm": "Sind Sie sicher, dass dieses Projekt gelöscht werden soll?"
@@ -1106,13 +1163,46 @@
         "preview": "Vorschau",
         "defaultValue": "Standardwert"
     },
+    "tourGuide": {
+        "takeATour": "Tour starten",
+        "start": "Start",
+        "next": "Nächste",
+        "welcomeTours": "Welcome Tours"
+    },
+    "diagnostics": {
+        "title": "System-Informationen"
+    },
     "languages": {
-        "de": "German",
-        "en-US": "English",
-        "ja": "Japanese",
-        "ko": "Korean",
-        "ru": "Russian",
-        "zh-CN": "Chinese(Simplified)",
-        "zh-TW": "Chinese(Traditional)"
+        "de": "Deutsch",
+        "en-US": "Englisch",
+        "fr": "Französisch",
+        "ja": "Japanisch",
+        "ko": "Koreanisch",
+        "pt-BR":"Portugiesisch",
+        "ru": "Russisch",
+        "zh-CN": "Chinesisch (Vereinfacht)",
+        "zh-TW": "Chinesisch (Traditionell)"
+    },
+    "validator": {
+        "errors": {
+            "invalid-json": "Ungültige JSON-Daten: __error__",
+            "invalid-json-prop": "__prop__: ungültige JSON-Daten: __error__",
+            "invalid-prop": "Ungültiger Eigenschaftsausdruck",
+            "invalid-prop-prop": "__prop__: ungültiger Eigenschaftsausdruck",
+            "invalid-num": "Ungültige Nummer",
+            "invalid-num-prop": "__prop__: ungültige Nummer",
+            "invalid-regexp": "Ungültiges Eingabemuster",
+            "invalid-regex-prop": "__prop__: ungültiges Eingabemuster",
+            "missing-required-prop": "__prop__: Eigenschaftswert fehlt",
+            "invalid-config": "__prop__: ungültige Konfigurations-Node",
+            "missing-config": "__prop__: Konfigurations-Node fehlt",
+            "validation-error": "__prop__: Validierungsfehler: __node__, __id__: __error__"
+        }
+    },
+    "contextMenu": {
+        "insert": "Einfügen",
+        "node": "Node",
+        "junction": "Kreuzung",
+        "linkNodes": "Verknüpfe Nodes"
     }
 }

packages/node_modules/@node-red/editor-client/locales/en-US/editor.json

@@ -23,7 +23,11 @@
             "position": "Position",
             "enable": "Enable",
             "disable": "Disable",
-            "upload": "Upload"
+            "upload": "Upload",
+            "lock": "Lock",
+            "unlock": "Unlock",
+            "locked": "Locked",
+            "unlocked": "Unlocked"
         },
         "type": {
             "string": "string",
@@ -53,22 +57,30 @@
         "confirmDelete": "Confirm delete",
         "delete": "Are you sure you want to delete '__label__'?",
         "dropFlowHere": "Drop the flow here",
+        "dropImageHere": "Drop the image here",
         "addFlow": "Add flow",
         "addFlowToRight": "Add flow to the right",
+        "closeFlow": "Close flow",
         "hideFlow": "Hide flow",
         "hideOtherFlows": "Hide other flows",
-        "showAllFlows": "Show all flows",
+        "showAllFlows": "Show all flows (__count__ hidden)",
         "hideAllFlows": "Hide all flows",
         "hiddenFlows": "List __count__ hidden flow",
         "hiddenFlows_plural": "List __count__ hidden flows",
-        "showLastHiddenFlow": "Show last hidden flow",
+        "showLastHiddenFlow": "Reopen hidden flow",
         "listFlows": "List flows",
         "listSubflows": "List subflows",
         "status": "Status",
         "enabled": "Enabled",
         "disabled": "Disabled",
         "info": "Description",
-        "selectNodes": "Click nodes to select"
+        "selectNodes": "Click nodes to select",
+        "enableFlow": "Enable flow",
+        "disableFlow": "Disable flow",
+        "lockFlow": "Lock flow",
+        "unlockFlow": "Unlock flow",
+        "moveToStart": "Move flow to start",
+        "moveToEnd": "Move flow to end"
     },
     "menu": {
         "label": {
@@ -101,6 +113,7 @@
             "displayStatus": "Show node status",
             "displayConfig": "Configuration nodes",
             "import": "Import",
+            "importExample": "Import Example Flow",
             "export": "Export",
             "search": "Search flows",
             "searchInput": "search your flows",
@@ -169,6 +182,10 @@
         }
     },
     "notification": {
+        "state": {
+            "flowsStopped": "Flows stopped",
+            "flowsStarted": "Flows started"
+        },
         "warning": "<strong>Warning</strong>: __message__",
         "warnings": {
             "undeployedChanges": "node has undeployed changes",
@@ -296,6 +313,10 @@
         "modifiedFlowsDesc": "Only deploys flows that contain changed nodes",
         "modifiedNodes": "Modified Nodes",
         "modifiedNodesDesc": "Only deploys nodes that have changed",
+        "startFlows": "Start",
+        "startFlowsDesc": "Start Flows",
+        "stopFlows": "Stop",
+        "stopFlowsDesc": "Stop Flows",
         "restartFlows": "Restart Flows",
         "restartFlowsDesc": "Restarts the current deployed flows",
         "successfulDeploy": "Successfully deployed",
@@ -489,6 +510,7 @@
         "addRemoveNode": "Add/remove node from selection",
         "editSelected": "Edit selected node",
         "deleteSelected": "Delete selected nodes or link",
+        "deleteReconnect": "Delete and Reconnect",
         "importNode": "Import nodes",
         "exportNode": "Export nodes",
         "nudgeNode": "Move selected nodes (1px)",
@@ -675,7 +697,11 @@
             "empty": "empty",
             "globalConfig": "Global Configuration Nodes",
             "triggerAction": "Trigger action",
-            "find": "Find in workspace"
+            "find": "Find in workspace",
+            "copyItemUrl": "Copy item url",
+	    "copyURL2Clipboard": "Copied url to clipboard",
+            "showFlow": "Show",
+            "hideFlow": "Hide"
         },
         "help": {
             "name": "Help",
@@ -685,7 +711,8 @@
             "showHelp": "Show help",
             "showInOutline": "Show in outline",
             "showTopics": "Show topics",
-            "noHelp": "No help topic selected"
+            "noHelp": "No help topic selected",
+            "changeLog": "Change Log"
         },
         "config": {
             "name": "Configuration nodes",
@@ -927,6 +954,9 @@
             "invalid-expr": "Invalid JSONata expression:\n  __message__",
             "invalid-msg": "Invalid example JSON message:\n  __message__",
             "context-unsupported": "Cannot test context functions\n $flowContext or $globalContext",
+            "env-unsupported": "Cannot test $env function",
+            "moment-unsupported": "Cannot test $moment function",
+            "clone-unsupported": "Cannot test $clone function",
             "eval": "Error evaluating expression:\n  __message__"
         }
     },
@@ -972,7 +1002,10 @@
         "quote": "Quote",
         "link": "Link",
         "horizontal-rule": "Horizontal rule",
-        "toggle-preview": "Toggle preview"
+        "toggle-preview": "Toggle preview",
+        "mermaid": {
+            "summary": "Mermaid Diagram"
+        }
     },
     "bufferEditor": {
         "title": "Buffer editor",
@@ -1158,7 +1191,8 @@
     "tourGuide": {
         "takeATour": "Take a tour",
         "start": "Start",
-        "next": "Next"
+        "next": "Next",
+        "welcomeTours": "Welcome Tours"
     },
     "diagnostics": {
         "title": "System Info"
@@ -1166,8 +1200,10 @@
     "languages": {
         "de": "German",
         "en-US": "English",
+        "fr": "French",
         "ja": "Japanese",
         "ko": "Korean",
+        "pt-BR":"Portuguese",
         "ru": "Russian",
         "zh-CN": "Chinese(Simplified)",
         "zh-TW": "Chinese(Traditional)"
@@ -1187,5 +1223,16 @@
             "missing-config": "__prop__: missing configuration node",
             "validation-error": "__prop__: validation error: __node__, __id__: __error__"
         }
+    },
+    "contextMenu": {
+        "insert": "Insert",
+        "node": "Node",
+        "junction": "Junction",
+        "linkNodes": "Link Nodes"
+    },
+    "env-var": {
+        "environment": "Environment",
+        "header": "Global Environment Variables",
+        "revert": "Revert"
     }
 }

packages/node_modules/@node-red/editor-client/locales/fr/infotips.json

@@ -0,0 +1,23 @@
+{
+  "info": {
+    "tip0": "Vous pouvez supprimer les noeuds ou les liens sélectionnés avec {{core:delete-selection}}",
+    "tip1": "Rechercher des noeuds à l'aide de {{core:search}}",
+    "tip2": "{{core:toggle-sidebar}} basculera l'affichage de cette barre latérale",
+    "tip3": "Vous pouvez gérer votre palette de noeuds avec {{core:manage-palette}}",
+    "tip4": "Vos noeuds de configuration de flux sont répertoriés dans le panneau de la barre latérale. Ils sont accessibles depuis le menu ou avec {{core:show-config-tab}}",
+    "tip5": "Activer ou désactiver ces conseils à partir de l'option dans les paramètres",
+    "tip6": "Déplacer les noeuds sélectionnés à l'aide des touches [gauche] [haut] [bas] et [droite]. Maintenir la touche [shift] enfoncée pour les pousser plus loin",
+    "tip7": "Faire glisser un noeud sur un fil le raccordera au lien",
+    "tip8": "Exporter les noeuds sélectionnés, ou l'onglet actuel avec {{core:show-export-dialog}}",
+    "tip9": "Importer un flux en faisant glisser son JSON dans l'éditeur, ou avec {{core:show-import-dialog}}",
+    "tip10": "[majuscule] [clic] et faites glisser sur un port de noeud pour déplacer tous les fils attachés ou seulement celui sélectionné",
+    "tip11": "Afficher l'onglet Infos avec {{core:show-info-tab}} ou l'onglet Débogage avec {{core:show-debug-tab}}",
+    "tip12": "[ctrl] [clic] dans l'espace de travail pour ouvrir la boîte de dialogue d'ajout rapide",
+    "tip13": "Maintenir la touche [ctrl] enfoncée lorsque vous [cliquez] sur un port de noeud pour activer le câblage rapide",
+    "tip14": "Maintenir la touche [shift] enfoncée lorsque vous [cliquez] sur un noeud pour sélectionner également tous ses noeuds connectés",
+    "tip15": "Maintenir la touche [ctrl] enfoncée lorsque vous [cliquez] sur un noeud pour l'ajouter ou le supprimer de la sélection actuelle",
+    "tip16": "Changer d'onglet de flux avec {{core:show-previous-tab}} et {{core:show-next-tab}}",
+    "tip17": "Vous pouvez confirmer vos modifications dans le panneau d'édition du noeud avec {{core:confirm-edit-tray}} ou les annuler avec {{core:cancel-edit-tray}}",
+    "tip18": "Appuyer sur {{core:edit-selected-node}} modifiera le premier noeud de la sélection actuelle"
+  }
+}

packages/node_modules/@node-red/editor-client/locales/fr/jsonata.json

@@ -0,0 +1,274 @@
+{
+    "$string": {
+        "args": "arg[, prettify]",
+        "desc": "Convertit le paramètre `arg` en une chaîne de caractères en utilisant les règles de typage suivantes :\n\n - Les chaînes de caractères sont inchangées\n - Les fonctions sont converties en une chaîne vide\n - L'infini numérique et NaN renvoient une erreur car ils ne peuvent pas être représentés comme un Numéro JSON\n - Toutes les autres valeurs sont converties en une chaîne JSON à l'aide de la fonction `JSON.stringify`. Si `prettify` est vrai, alors le JSON \"prettified\" est produit. c'est-à-dire une ligne par champ et les lignes seront en retrait en fonction de la profondeur du champ."
+    },
+    "$length": {
+        "args": "str",
+        "desc": "Renvoie le nombre de caractères dans la chaîne `str`. Une erreur est renvoyée si `str` n'est pas une chaîne de caractères."
+    },
+    "$substring": {
+        "args": "str, start[, length]",
+        "desc": "Renvoie une chaîne contenant les caractères du premier paramètre `str` commençant à la position `start` (pas de décalage). Si `length` est spécifié, alors la sous-chaîne contiendra un maximum de caractères `length`. Si `start` est négatif alors il indique le nombre de caractères à partir de la fin de `str`."
+    },
+    "$substringBefore": {
+        "args": "str, chars",
+        "desc": "Renvoie la sous-chaîne avant la première occurrence de la séquence de caractères `chars` dans `str`. Si `str` ne contient pas `chars`, alors il renvoie `str`."
+    },
+    "$substringAfter": {
+        "args": "str, chars",
+        "desc": "Renvoie la sous-chaîne après la première occurrence de la séquence de caractères `chars` dans `str`. Si `str` ne contient pas `chars`, alors il renvoie `str`."
+    },
+    "$uppercase": {
+        "args": "str",
+        "desc": "Renvoie une chaîne avec tous les caractères de `str` convertis en majuscules."
+    },
+    "$lowercase": {
+        "args": "str",
+        "desc": "Renvoie une chaîne avec tous les caractères de `str` convertis en minuscules."
+    },
+    "$trim": {
+        "args": "str",
+        "desc": "Normalise et supprime tous les caractères d'espacement dans `str` en appliquant les étapes suivantes :\n\n - Toutes les tabulations, retours à la ligne et sauts de ligne sont remplacés par des espaces.\n- Les séquences contiguës d'espaces sont réduites à un seul espace.\n- Les espaces de fin et de début sont supprimés.\n\n Si `str` n'est pas spécifié (c'est-à-dire que cette fonction est invoquée sans argument), alors la valeur de contexte est utilisée comme valeur de `str`. Une erreur est renvoyée si `str` n'est pas une chaîne."
+    },
+    "$contains": {
+        "args": "str, pattern",
+        "desc": "Renvoie `true` si `str` correspond à `pattern`, sinon il renvoie `false`. Si `str` n'est pas spécifié (c'est-à-dire que cette fonction est invoquée avec un argument), alors la valeur de contexte est utilisée comme valeur de `str`. Le paramètre `pattern` peut être une chaîne ou une expression régulière."
+    },
+    "$split": {
+        "args": "str[, separator][, limit]",
+        "desc": "Divise le paramètre `str` en un tableau de sous-chaînes. C'est une erreur si `str` n'est pas une chaîne. Le paramètre facultatif `separator` spécifie les caractères à l'intérieur de `str` à propos desquels il doit être divisé en chaîne ou en expression régulière. Si `separator` n'est pas spécifié, la chaîne vide est supposée et `str` sera divisé en un tableau de caractères uniques. C'est une erreur si `separator` n'est pas une chaîne. Le paramètre facultatif `limit` est un nombre qui spécifie le nombre maximum de sous-chaînes à inclure dans le tableau résultant. Toutes les sous-chaînes supplémentaires sont ignorées. Si `limit` n'est pas spécifié, alors `str` est entièrement divisé sans limite à la taille du tableau résultant. C'est une erreur si `limit` n'est pas un nombre non négatif."
+    },
+    "$join": {
+        "args": "array[, separator]",
+        "desc": "Joint un tableau de chaînes de composants en une seule chaîne concaténée, chaque chaîne de composants étant séparée par le paramètre facultatif `separator`. C'est une erreur si l'entrée `array` contient un élément qui n'est pas une chaîne. Si `séparateur` n'est pas spécifié, il est supposé être la chaîne vide, c'est-à-dire qu'il n'y a pas de `séparateur` entre les chaînes de composants. C'est une erreur si `separator` n'est pas une chaîne."
+    },
+    "$match": {
+        "args": "str, pattern [, limit]",
+        "desc": "Applique la chaîne `str` à l'expression régulière `pattern` et renvoie un tableau d'objets, chaque objet contenant des informations sur chaque occurrence d'une correspondance dans `str`."
+    },
+    "$replace": {
+        "args": "str, pattern, replacement [, limit]",
+        "desc": "Trouve les occurrences de `pattern` dans `str` et les remplace par `replacement`.\n\nLe paramètre facultatif `limit` est le nombre maximum de remplacements."
+    },
+    "$now": {
+        "args": "$[picture [, timezone]]",
+        "desc": "Génère un horodatage au format compatible ISO 8601 et le renvoie sous forme de chaîne. Si les paramètres optionnels d'image et de fuseau horaire sont fournis, alors l'horodatage actuel est formaté comme décrit par la fonction `$fromMillis()`"
+    },
+    "$base64encode": {
+        "args": "string",
+        "desc": "Convertit une chaîne ASCII en une représentation en base 64. Chaque caractère de la chaîne est traité comme un octet de données binaires. Cela nécessite que tous les caractères de la chaîne se trouvent dans la plage 0x00 à 0xFF, qui inclut tous les caractères des chaînes encodées en URI. Les caractères Unicode en dehors de cette plage ne sont pas pris en charge."
+    },
+    "$base64decode": {
+        "args": "string",
+        "desc": "Convertit les octets encodés en base 64 en une chaîne, à l'aide d'une page de codes Unicode UTF-8."
+    },
+    "$number": {
+        "args": "arg",
+        "desc": "Convertit le paramètre `arg` en un nombre en utilisant les règles de conversion suivantes :\n\n - Les nombres sont inchangés\n - Les chaînes qui contiennent une séquence de caractères représentant un nombre JSON légal sont converties en ce nombre\n - Toutes les autres valeurs provoquer l'envoi d'une erreur."
+    },
+    "$abs": {
+        "args": "number",
+        "desc": "Renvoie la valeur absolue du paramètre `nombre`."
+    },
+    "$floor": {
+        "args": "number",
+        "desc": "Renvoie la valeur de `number` arrondie à l'entier le plus proche inférieur ou égal à `number`."
+    },
+    "$ceil": {
+        "args": "number",
+        "desc": "Renvoie la valeur de `number` arrondie à l'entier le plus proche supérieur ou égal à `number`."
+    },
+    "$round": {
+        "args": "number [, precision]",
+        "desc": "Renvoie la valeur du paramètre `number` arrondie au nombre de décimales spécifié par le paramètre facultatif `precision`."
+    },
+    "$power": {
+        "args": "base, exponent",
+        "desc": "Renvoie la valeur de `base` élevée à la puissance de `exponent`."
+    },
+    "$sqrt": {
+        "args": "number",
+        "desc": "Renvoie la racine carrée de la valeur du paramètre `number`."
+    },
+    "$random": {
+        "args": "",
+        "desc": "Renvoie un nombre pseudo-aléatoire supérieur ou égal à zéro et inférieur à un."
+    },
+    "$millis": {
+        "args": "",
+        "desc": "Renvoie le nombre de millisecondes depuis l'époque Unix (1er janvier 1970 UTC) sous forme de nombre. Tous les appels de `$millis()` dans une évaluation d'une expression renverront toutes la même valeur."
+    },
+    "$sum": {
+        "args": "array",
+        "desc": "Renvoie la somme arithmétique d'un `tableau` de nombres. C'est une erreur si l'entrée `array` contient un élément qui n'est pas un nombre."
+    },
+    "$max": {
+        "args": "array",
+        "desc": "Renvoie le nombre maximal dans un `tableau` de nombres. C'est une erreur si l'entrée `array` contient un élément qui n'est pas un nombre."
+    },
+    "$min": {
+        "args": "array",
+        "desc": "Renvoie le nombre minimum dans un `tableau` de nombres. C'est une erreur si l'entrée `array` contient un élément qui n'est pas un nombre."
+    },
+    "$average": {
+        "args": "array",
+        "desc": "Renvoie la valeur moyenne d'un `tableau` de nombres. C'est une erreur si l'entrée `array` contient un élément qui n'est pas un nombre."
+    },
+    "$boolean": {
+        "args": "arg",
+        "desc": "Transforme l'argument en booléen en utilisant les règles suivantes :\n\n - `Boolean` : inchangé\n - `string` : vide : `false`\n - `string` : non vide : `true`\n - `number` : `0` : `false`\n - `number` : non nul : `true`\n - `null` : `false`\n - `array` : vide : `false`\n - `array` : contient un membre qui convertit en `true` : `true`\n - `array` : tous les membres sont transformés en `false` : `false`\n - `object` : vide : `false`\n - `object` : non vide : `true`\n - `function` : `false`"
+    },
+    "$not": {
+        "args": "arg",
+        "desc": "Renvoie un booléen résultat de la négation logique de l'argument"
+    },
+    "$exists": {
+        "args": "arg",
+        "desc": "Renvoie la valeur booléenne `true` si l'expression `arg` est évaluée à une valeur, ou `false` si l'expression ne correspond à rien (par exemple, un chemin vers une référence de champ inexistante)."
+    },
+    "$count": {
+        "args": "array",
+        "desc": "Renvoie le nombre d'éléments du tableau"
+    },
+    "$append": {
+        "args": "array, array",
+        "desc": "Combine deux tableaux"
+    },
+    "$sort": {
+        "args": "array [, function]",
+        "desc": "Renvoie un tableau contenant toutes les valeurs du paramètre `array`, mais triées dans l'ordre.\n\nSi un comparateur `function` est fourni, alors il doit s'agir d'une fonction qui prend deux paramètres :\n\n`function(left , droite)`\n\nCette fonction est invoquée par l'algorithme de tri pour comparer deux valeurs à gauche et à droite. Si la valeur de left doit être placée après la valeur de right dans l'ordre de tri souhaité, la fonction doit renvoyer un booléen `true` pour indiquer un échange. Sinon, il doit renvoyer `false`."
+    },
+    "$reverse": {
+        "args": "array",
+        "desc": "Renvoie un tableau contenant toutes les valeurs du paramètre `array`, mais dans l'ordre inverse."
+    },
+    "$shuffle": {
+        "args": "array",
+        "desc": "Renvoie un tableau contenant toutes les valeurs du paramètre `array`, mais mélangées dans un ordre aléatoire."
+    },
+    "$zip": {
+        "args": "array, ...",
+        "desc": "Renvoie un tableau convolué (zippé) contenant des tableaux groupés de valeurs des arguments `array1`...`arrayN` d'index 0, 1, 2...."
+    },
+    "$keys": {
+        "args": "object",
+        "desc": "Renvoie un tableau contenant les clés de l'objet. Si l'argument est un tableau d'objets, le tableau renvoyé contient une liste dédupliquée de toutes les clés de tous les objets."
+    },
+    "$lookup": {
+        "args": "object, key",
+        "desc": "Renvoie la valeur associée à la clé dans l'objet. Si le premier argument est un tableau d'objets, tous les objets du tableau sont recherchés et les valeurs associées à toutes les occurrences de key sont renvoyées."
+    },
+    "$spread": {
+        "args": "object",
+        "desc": "Divise un objet contenant des paires clé/valeur en un tableau d'objets, chacun ayant une seule paire clé/valeur de l'objet d'entrée. Si le paramètre est un tableau d'objets, alors le tableau résultant contient un objet pour chaque paire clé/valeur dans chaque objet du tableau fourni."
+    },
+    "$merge": {
+        "args": "array<object>",
+        "desc": "Fusionne un tableau d'`objets` en un seul `objet` contenant toutes les paires clé/valeur de chacun des objets du tableau d'entrée. Si l'un des objets d'entrée contient la même clé, alors l'`objet` renvoyé contiendra la valeur du dernier dans le tableau. C'est une erreur si le tableau d'entrée contient un élément qui n'est pas un objet."
+    },
+    "$sift": {
+        "args": "object, function",
+        "desc": "Renvoie un objet qui contient uniquement les paires clé/valeur du paramètre `object` qui satisfont le prédicat `function` transmis comme second paramètre.\n\nLa `function` qui est fournie comme second paramètre doit avoir la signature suivante :\n\n`fonction(valeur [, clé [, objet]])`"
+    },
+    "$each": {
+        "args": "object, function",
+        "desc": "Renvoie un tableau contenant les valeurs renvoyées par la `fonction` lorsqu'elle est appliquée à chaque paire clé/valeur dans l'`objet`."
+    },
+    "$map": {
+        "args": "array, function",
+        "desc": "Renvoie un tableau contenant les résultats de l'application du paramètre `function` à chaque valeur du paramètre `array`.\n\nLa `function` fournie comme second paramètre doit avoir la signature suivante :\n\n`function( valeur [, indice [, tableau]])`"
+    },
+    "$filter": {
+        "args": "array, function",
+        "desc": "Renvoie un tableau contenant uniquement les valeurs du paramètre `array` qui satisfont le prédicat `function`.\n\nLa `function` fournie comme second paramètre doit avoir la signature suivante :\n\n`function(value [ , indice [, tableau]])`"
+    },
+    "$reduce": {
+        "args": "array, function [, init]",
+        "desc": "Renvoie une valeur agrégée dérivée de l'application successive du paramètre `function` à chaque valeur de `array` en combinaison avec le résultat de l'application précédente de la fonction.\n\nLa fonction doit accepter deux arguments et se comporte comme un opérateur infixe entre chaque valeur dans le `tableau`. La signature de `function` doit être de la forme : `myfunc($accumulator, $value[, $index[, $array]])`\n\nLe paramètre facultatif `init` est utilisé comme valeur initiale dans l'agrégation ."
+    },
+    "$flowContext": {
+        "args": "string[, string]",
+        "desc": "Récupère une propriété de contexte de flux.\n\nCeci est une fonction définie par Node-RED."
+    },
+    "$globalContext": {
+        "args": "string[, string]",
+        "desc": "Récupère une propriété de contexte globale.\n\nCeci est une fonction définie par Node-RED."
+    },
+    "$pad": {
+        "args": "string, width [, char]",
+        "desc": "Renvoie une copie de la `chaîne` avec un rembourrage supplémentaire, si nécessaire, de sorte que son nombre total de caractères corresponde au moins à la valeur absolue du paramètre `width`.\n\nSi `width` est un nombre positif, alors la chaîne est rembourré à droite; s'il est négatif, il est rempli vers la gauche.\n\nL'argument optionnel `char` spécifie le(s) caractère(s) de remplissage à utiliser. S'il n'est pas spécifié, la valeur par défaut est le caractère espace."
+    },
+    "$fromMillis": {
+        "args": "number, [, picture [, timezone]]",
+        "desc": "Convertisser le « nombre » représentant les millisecondes depuis l'époque Unix (1er janvier 1970 UTC) en une représentation sous forme de chaîne formatée de l'horodatage tel que spécifié par la chaîne d'image.\n\nSi le paramètre facultatif « image » est omis, l'horodatage est formaté au format ISO 8601.\n\nSi la chaîne facultative `image` est fournie, l'horodatage est formaté selon la représentation spécifiée dans cette chaîne. Le comportement de cette fonction est cohérent avec la version à deux arguments de la fonction XPath/XQuery `format-dateTime` telle que définie dans la spécification XPath F&O 3.1. Le paramètre de chaîne d'image définit la façon dont l'horodatage est formaté et a la même syntaxe que `format-dateTime`.\n\nSi la chaîne facultative `timezone` est fournie, alors l'horodatage formaté sera dans ce fuseau horaire. La chaîne `timezone` doit être au format '±HHMM', où ± est le signe plus ou moins et HHMM est le décalage en heures et minutes par rapport à UTC. Décalage positif pour les fuseaux horaires à l'est de UTC, décalage négatif pour les fuseaux horaires à l'ouest de UTC."
+    },
+    "$formatNumber": {
+        "args": "number, picture [, options]",
+        "desc": "Convertit le `number` en une chaîne et le formate en une représentation décimale comme spécifié par la chaîne `picture`.\n\n Le comportement de cette fonction est cohérent avec la fonction XPath/XQuery fn:format-number telle que définie dans le Spécification XPath F&O 3.1. Le paramètre de chaîne d'image définit la façon dont le nombre est formaté et a la même syntaxe que fn:format-number.\n\nLe troisième argument facultatif `options` est utilisé pour remplacer les caractères de formatage spécifiques aux paramètres régionaux par défaut, tels que le séparateur décimal. S'il est fourni, cet argument doit être un objet contenant des paires nom/valeur spécifiées dans la section de format décimal de la spécification XPath F&O 3.1."
+    },
+    "$formatBase": {
+        "args": "number [, radix]",
+        "desc": "Convertit le `number` en une chaîne et le formate en un entier représenté dans la base numérique spécifiée par l'argument `radix`. Si `radix` n'est pas spécifié, la valeur par défaut est la base 10. `radix` peut être compris entre 2 et 36, sinon une erreur est renvoyée."
+    },
+    "$toMillis": {
+        "args": "timestamp",
+        "desc": "Convertit une chaîne `timestamp` au format ISO 8601 en nombre de millisecondes depuis l'époque Unix (1er janvier 1970 UTC) sous forme de nombre. Une erreur est renvoyée si la chaîne n'est pas au format correct."
+    },
+    "$env": {
+        "args": "arg",
+        "desc": "Renvoie la valeur d'une variable d'environnement.\n\nCeci est une fonction définie par Node-RED."
+    },
+    "$eval": {
+        "args": "expr [, context]",
+        "desc": "Analyse et évalue la chaîne `expr` qui contient un JSON littéral ou une expression JSONata en utilisant le contexte actuel comme contexte d'évaluation."
+    },
+    "$formatInteger": {
+        "args": "number, picture",
+        "desc": "Transforme le `nombre` en une chaîne et le formate en une représentation entière comme spécifié par la chaîne `image`. Le paramètre de chaîne d'image définit la façon dont le nombre est formaté et a la même syntaxe que `fn:format-integer` de la spécification XPath F&O 3.1."
+    },
+    "$parseInteger": {
+        "args": "string, picture",
+        "desc": "Analyse le contenu du paramètre `string` en un entier (comme un nombre JSON) en utilisant le format spécifié par la chaîne `picture`. Le paramètre de chaîne `picture` a le même format que `$formatInteger`."
+    },
+    "$error": {
+        "args": "[str]",
+        "desc": "Génère une erreur avec un message. Le `str` facultatif remplacera le message par défaut de la fonction `$error() évaluée`"
+    },
+    "$assert": {
+        "args": "arg, str",
+        "desc": "Si `arg` est vrai, la fonction renvoie undefined. Si `arg` est faux, une exception est lancée avec `str` comme message de l'exception."
+    },
+    "$single": {
+        "args": "array, function",
+        "desc": "Renvoie la seule et unique valeur du paramètre `array` qui satisfait le prédicat `function` (c'est-à-dire que la `function` renvoie la valeur booléenne `true` lorsqu'elle est transmise à la valeur). Lève une exception si le nombre de valeurs correspondantes n'est pas exactement un.\n\nLa fonction doit être fournie dans la signature suivante : `function(value [, index [, array]])` où value est chaque entrée du tableau, index est la position de cette valeur et le tableau entier est passé comme troisième argument"
+    },
+    "$encodeUrlComponent": {
+        "args": "str",
+        "desc": "Encode un composant URL (Uniform Resource Locator) en remplaçant chaque instance de certains caractères par une, deux, trois ou quatre séquences d'échappement représentant l'encodage UTF-8 du caractère.\n\nExemple : `$encodeUrlComponent(\"?x =test\")` => `\"%3Fx%3Dtest\"`"
+    },
+    "$encodeUrl": {
+        "args": "str",
+        "desc": "Encode une URL (Uniform Resource Locator) en remplaçant chaque instance de certains caractères par une, deux, trois ou quatre séquences d'échappement représentant l'encodage UTF-8 du caractère. \n\nExemple : `$encodeUrl(\"https://mozilla.org/?x=шеллы\")` => `\"https://mozilla.org/?x=%D1%88%D0% B5%D0%BB%D0%BB%D1%8B\"`"
+    },
+    "$decodeUrlComponent": {
+        "args": "str",
+        "desc": "Décode un composant URL (Uniform Resource Locator) précédemment créé par encodeUrlComponent. \n\nExemple : `$decodeUrlComponent(\"%3Fx%3Dtest\")` => `\"?x=test\"`"
+    },
+    "$decodeUrl": {
+        "args": "str",
+        "desc": "Décode une URL (Uniform Resource Locator) précédemment créée par encodeUrl. \n\nExemple : `$decodeUrl(\"https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B\")` => `\"https://mozilla.org/?x=шеллы\"`"
+    },
+    "$distinct": {
+        "args": "array",
+        "desc": "Renvoie un tableau avec les valeurs en double supprimées de `array`"
+    },
+    "$type": {
+        "args": "value",
+        "desc": "Renvoie le type de `value` sous forme de chaîne. Si `value` n'est pas défini, cela renverra `undefined`"
+    },
+    "$moment": {
+        "args": "[str]",
+        "desc": "Obtient un objet de date à l'aide de la bibliothèque Moment."
+    }
+}

packages/node_modules/@node-red/editor-client/locales/ja/editor.json

@@ -23,7 +23,11 @@
             "position": "配置",
             "enable": "有効",
             "disable": "無効",
-            "upload": "アップロード"
+            "upload": "アップロード",
+            "lock": "固定",
+            "unlock": "固定を解除",
+            "locked": "固定済み",
+            "unlocked": "固定なし"
         },
         "type": {
             "string": "文字列",
@@ -53,8 +57,10 @@
         "confirmDelete": "削除の確認",
         "delete": "本当に '__label__' を削除しますか？",
         "dropFlowHere": "ここにフローをドロップしてください",
+        "dropImageHere": "ここに画像ファイルをドロップしてください",
         "addFlow": "フローの追加",
         "addFlowToRight": "右側にフローを追加",
+        "closeFlow": "フローを閉じる",
         "hideFlow": "フローを非表示",
         "hideOtherFlows": "他のフローを非表示",
         "showAllFlows": "全てのフローを表示",
@@ -68,7 +74,13 @@
         "enabled": "有効",
         "disabled": "無効",
         "info": "詳細",
-        "selectNodes": "ノードをクリックして選択"
+        "selectNodes": "ノードをクリックして選択",
+        "enableFlow": "フローを有効化",
+        "disableFlow": "フローを無効化",
+        "lockFlow": "フローを固定",
+        "unlockFlow": "フローの固定を解除",
+        "moveToStart": "フローを先頭へ移動",
+        "moveToEnd": "フローを最後へ移動"
     },
     "menu": {
         "label": {
@@ -101,6 +113,7 @@
             "displayStatus": "ノードのステータスを表示",
             "displayConfig": "設定ノード",
             "import": "読み込み",
+            "importExample": "フロー例を読み込み",
             "export": "書き出し",
             "search": "ノードを検索",
             "searchInput": "ノードを検索",
@@ -169,6 +182,10 @@
         }
     },
     "notification": {
+        "state": {
+            "flowsStopped": "フローを停止しました",
+            "flowsStarted": "フローを開始しました"
+        },
         "warning": "<strong>警告</strong>: __message__",
         "warnings": {
             "undeployedChanges": "ノードの変更をデプロイしていません",
@@ -296,6 +313,10 @@
         "modifiedFlowsDesc": "変更したノードを含むフローのみデプロイ",
         "modifiedNodes": "変更したノード",
         "modifiedNodesDesc": "変更したノードのみデプロイ",
+        "startFlows": "開始",
+        "startFlowsDesc": "フローを開始",
+        "stopFlows": "停止",
+        "stopFlowsDesc": "フローを停止",
         "restartFlows": "フローを再起動",
         "restartFlowsDesc": "デプロイされた現在のフローを再起動",
         "successfulDeploy": "デプロイが成功しました",
@@ -489,6 +510,7 @@
         "addRemoveNode": "ノードの選択、選択解除",
         "editSelected": "選択したノードを編集",
         "deleteSelected": "選択したノードや接続を削除",
+        "deleteReconnect": "削除と再接続",
         "importNode": "フローの読み込み",
         "exportNode": "フローの書き出し",
         "nudgeNode": "選択したノードを移動(移動量小)",
@@ -675,7 +697,11 @@
             "empty": "空",
             "globalConfig": "グローバル設定ノード",
             "triggerAction": "アクションを実行",
-            "find": "ワークスペース内を検索"
+            "find": "ワークスペース内を検索",
+            "copyItemUrl": "要素のURLをコピー",
+            "copyURL2Clipboard": "URLをクリップボードにコピーしました",
+            "showFlow": "表示",
+            "hideFlow": "非表示"
         },
         "help": {
             "name": "ヘルプ",
@@ -685,7 +711,8 @@
             "showHelp": "ヘルプを表示",
             "showInOutline": "アウトラインに表示",
             "showTopics": "トピックを表示",
-            "noHelp": "ヘルプのトピックが未選択"
+            "noHelp": "ヘルプのトピックが未選択",
+            "changeLog": "更新履歴"
         },
         "config": {
             "name": "設定ノードを表示",
@@ -845,7 +872,7 @@
                 "pushFailed": "リモートに新しいコミットがあるため、プッシュに失敗しました。プルしてマージしてから、再度プッシュしてください。",
                 "push": "プッシュ",
                 "pull": "プル",
-                "unablePull": "<p>リモートの変更のプル失敗：ステージングされていないローカルの変更を上書きされてしまいます。</p><p>変更をコミットしてから再度実行してください。</p>",
+                "unablePull": "<p>リモートの変更のプル失敗：ステージングされていないローカルの変更が上書きされてしまいます。</p><p>変更をコミットしてから再度実行してください。</p>",
                 "showUnstagedChanges": "ステージングされていない変更を表示",
                 "connectionFailed": "リモートリポジトリに接続できません: ",
                 "pullUnrelatedHistory": "<p>リモートに関連のないコミット履歴があります。</p><p>本当に変更をプルしてローカルリポジトリに反映しますか？</p>",
@@ -926,8 +953,11 @@
         "errors": {
             "invalid-expr": "不正なJSONata式:\n  __message__",
             "invalid-msg": "不正なJSONメッセージ例:\n  __message__",
-            "context-unsupported": "$flowContext や $globalContextの\nコンテキスト機能をテストできません",
-            "eval": "表現評価エラー:\n  __message__"
+            "context-unsupported": "$flowContext や $globalContextの\nコンテキスト関数をテストできません",
+            "env-unsupported": "$env関数はテストできません",
+            "moment-unsupported": "$moment関数はテストできません",
+            "clone-unsupported": "$clone関数はテストできません",
+            "eval": "式評価エラー:\n  __message__"
         }
     },
     "monaco": {
@@ -972,7 +1002,10 @@
         "quote": "引用",
         "link": "リンク",
         "horizontal-rule": "区切り線",
-        "toggle-preview": "プレビュー表示切替え"
+        "toggle-preview": "プレビュー表示切替え",
+        "mermaid": {
+            "summary": "Mermaid図"
+        }
     },
     "bufferEditor": {
         "title": "バッファエディタ",
@@ -1158,7 +1191,8 @@
     "tourGuide": {
         "takeATour": "ツアーを開始",
         "start": "開始",
-        "next": "次へ"
+        "next": "次へ",
+        "welcomeTours": "ウェルカムツアー"
     },
     "diagnostics": {
         "title": "システム情報"
@@ -1166,8 +1200,10 @@
     "languages": {
         "de": "ドイツ語",
         "en-US": "英語",
+        "fr": "フランス語",
         "ja": "日本語",
         "ko": "韓国語",
+        "pt-BR":"ポルトガル語",
         "ru": "ロシア語",
         "zh-CN": "中国語(簡体)",
         "zh-TW": "中国語(繁体)"
@@ -1188,6 +1224,17 @@
             "validation-error": "__prop__: チェックエラー: __node__, __id__: __error__"
         }
     },
+    "contextMenu": {
+        "insert": "挿入",
+        "node": "ノード",
+        "junction": "分岐点",
+        "linkNodes": "Linkノード"
+    },
+    "env-var": {
+        "environment": "環境変数",
+        "header": "大域環境変数",
+        "revert": "破棄"
+    },
     "action-list": {
         "toggle-show-tips": "ヒント表示切替",
         "show-about": "Node-REDの説明を表示",
@@ -1272,6 +1319,7 @@
         "distribute-selection-vertically": "選択を上下に整列",
         "wire-series-of-nodes": "ノードを一続きに接続",
         "wire-node-to-multiple": "ノードを複数に接続",
+        "wire-multiple-to-node": "複数からノードへ接続",
         "split-wire-with-link-nodes": "ワイヤーをlinkノードで分割",
         "generate-node-names": "ノード名を生成",
         "show-user-settings": "ユーザ設定を表示",
@@ -1302,7 +1350,7 @@
         "search": "検索",
         "search-previous": "前を検索",
         "search-next": "次を検索",
-        "show-action-list": "アクション一覧を表示",
+        "show-action-list": "動作一覧を表示",
         "confirm-edit-tray": "編集を完了",
         "cancel-edit-tray": "編集をキャンセル",
         "show-remote-diff": "リモートとの変更差分を表示",
@@ -1324,6 +1372,21 @@
         "zoom-out": "ズームアウト",
         "zoom-reset": "ズームリセット",
         "toggle-navigator": "ナビゲータ表示切替",
-        "show-system-info": "システムインフォメーション"
+        "show-system-info": "システム情報",
+        "split-wires-with-junctions": "分岐点によりワイヤーを分割",
+        "new-project": "新しいプロジェクト",
+        "open-project": "プロジェクトを開く",
+        "show-project-settings": "プロジェクト設定を表示",
+        "show-version-control-tab": "バージョンコントロールタブを表示",
+        "start-flows": "フローを開始",
+        "stop-flows": "フローを停止",
+        "copy-item-url": "要素のURLをコピー",
+        "copy-item-edit-url": "要素の編集URLをコピー",
+        "move-flow-to-start": "フローを先頭に移動",
+        "move-flow-to-end": "フローを末尾に移動",
+        "show-global-env": "大域環境変数を表示",
+        "lock-flow": "フローを固定",
+        "unlock-flow": "フローの固定を解除",
+        "show-node-help": "ノードのヘルプを表示"
     }
 }

packages/node_modules/@node-red/editor-client/locales/ko/editor.json

@@ -24,16 +24,29 @@
     "delete": "정말로 '__label__' 을(를) 삭제하시겠습니까?",
     "dropFlowHere": "플로우를 이곳에 가져오세요",
     "addFlow": "플로우 추가",
+    "addFlowToRight": "오른쪽에 플로우 추가",
+    "hideFlow": "플로우 숨기기",
+    "hideOtherFlows": "다른 플로우 숨기기",
+    "showAllFlows": "모든 플로우 보기",
+    "hideAllFlows": "모든 플로우 숨기기",
+    "hiddenFlows": "__count__개의 숨겨진 플로우 보기",
+    "hiddenFlows_plural": "__count__개의 숨겨진 플로우 보기",
+    "showLastHiddenFlow": "마지막으로 숨겨진 플로우 보기",
+    "listFlows": "플로우 리스트",
+    "listSubflows": "서브 플로우 리스트",
     "status": "상태",
     "enabled": "사용가능",
     "disabled": "사용불가능",
-    "info": "상세내역"
+    "info": "상세내역",
+    "selectNodes": "선택할 노드 클릭"
   },
   "menu": {
     "label": {
       "view": {
         "view": "창",
         "grid": "눈금선",
+        "storeZoom": "불러오기 시 확대/축소 복원",
+        "storePosition": "불러오기 시 스크롤 위치 복원",
         "showGrid": "눈금선 보이기",
         "snapGrid": "노드 배치 보조 켜기",
         "gridSize": "눈금선 크기",
@@ -41,7 +54,9 @@
         "defaultDir": "기본",
         "ltr": "왼쪽 -> 오른쪽",
         "rtl": "오른쪽 -> 왼쪽",
-        "auto": "자동배분"
+        "auto": "자동배분",
+        "language": "언어",
+        "browserDefault": "브라우저 기본값"
       },
       "sidebar": {
         "show": "우측사이드바 보이기"
@@ -49,18 +64,19 @@
       "palette": {
         "show": "팔렛트 보이기"
       },
+      "edit": "수정",
       "settings": "설정",
       "userSettings": "사용자 설정",
       "nodes": "노드설정",
-      "displayStatus": "노드상태 보이기",
-      "displayConfig": "설정노드 보기",
+      "displayStatus": "노드 상태 보이기",
+      "displayConfig": "설정 노드 보기",
       "import": "가져오기",
       "export": "내보내기",
       "search": "플로우 검색",
       "searchInput": "플로우 검색",
-      "subflows": "보조 플로우",
-      "createSubflow": "보조 플로우 생성",
-      "selectionToSubflow": "보조 플로우 선택",
+      "subflows": "서브 플로우",
+      "createSubflow": "서브 플로우 생성",
+      "selectionToSubflow": "서브 플로우 선택",
       "flows": "플로우",
       "add": "추가",
       "rename": "이름변경",
@@ -71,19 +87,43 @@
       "editPalette": "팔렛트 관리",
       "other": "기타",
       "showTips": "Tip 보기",
+      "showWelcomeTours": "새 버전에 대한 가이드 보기 표시",
       "help": "Node-RED 웹사이트",
       "projects": "프로젝트",
       "projects-new": "신규",
       "projects-open": "열기",
       "projects-settings": "프로젝트 설정",
-      "showNodeLabelDefault": "새로 추가된 노드의 라벨 보이기"
+      "showNodeLabelDefault": "새로 추가된 노드의 라벨 보이기",
+      "codeEditor": "Code Editor",
+      "groups": "그룹",
+      "groupSelection": "그룹 선택",
+      "ungroupSelection": "그룹 선택 해제",
+      "groupMergeSelection": "선택 항목 병합",
+      "groupRemoveSelection": "선택 그룹 제거",
+      "arrange": "배치",
+      "alignLeft": "왼쪽으로 정렬",
+      "alignCenter": "가운데 정렬",
+      "alignRight": "오른쪽으로 정렬",
+      "alignTop": "맨 위에 정렬",
+      "alignMiddle": "맨 위에 정렬",
+      "alignBottom": "맨 아래 정렬",
+      "distributeHorizontally": "수평으로 배치",
+      "distributeVertically": "수직으로 배치",
+      "moveToBack": "맨 뒤로 이동",
+      "moveToFront": "맨 앞으로 이동",
+      "moveBackwards": "뒤로 이동",
+      "moveForwards": "앞으로 이동"
     }
   },
   "actions": {
     "toggle-navigator": "네비게이터 표시/비표시",
     "zoom-out": "축소하기",
     "zoom-reset": "확대/축소 초기화",
-    "zoom-in": "확대하기"
+    "zoom-in": "확대하기",
+    "search-flows": "플로우 찾기",
+    "search-prev": "이전",
+    "search-next": "다음",
+    "search-counter": "\"__term__\" __result__ of __count__"
   },
   "user": {
     "loggedInAs": "__name__ 에 로그인됨",
@@ -99,12 +139,17 @@
     }
   },
   "notification": {
+    "state": {
+        "flowsStopped": "플로우 중지됨",
+        "flowsStarted": "플로우 시작됨"
+    },
     "warning": "<strong>경고</strong>: __message__",
     "warnings": {
       "undeployedChanges": "변경사항 배포가 취소되었습니다",
       "nodeActionDisabled": "노드 실행이 비활성화 되었습니다",
       "nodeActionDisabledSubflow": "보조 플로우에서 노드 실행이 비활성화 되었습니다",
       "missing-types": "<p>타입이 없는 노드로인해 플로우가 중지되었습니다</p>",
+      "missing-modules": "<p>누락된 모듈로 인해 플로우가 중지되었습니다.</p>",
       "safe-mode": "<p>[안전모드] 플로우가 정지되었습니다.</p><p>플로우의 수정과 배포가 가능합니다. 다시 배포버튼을 누르세요.</p>",
       "restartRequired": "업그레이드한 모듈을 유효화하기 위해 Node-RED를 재시작 합니다 ",
       "credentials_load_failed": "<p>인증정보 복호화에 실패하여 플로우가 멈췄습니다. </p><p>인증정보는 암호화 되어있습니다. 프로젝트의 암호화 키가 깨졌거나 정상적이지 않습니다.</p>",
@@ -132,7 +177,12 @@
       "updated": "'__project__'가 변경 되었습니다",
       "pull": "'__project__'를 다시 가져왔습니다",
       "revert": "'__project__'를 취소했습니다",
-      "merge-complete": "Git 병합이 완료되었습니다"
+      "merge-complete": "Git 병합이 완료되었습니다",
+      "setupCredentials": "자격 증명 설정",
+      "setupProjectFiles": "프로젝트 파일 설정",
+      "no": "취소",
+      "createDefault": "기본 프로젝트 파일 만들기",
+      "mergeConflict": "병합 충돌 표시"
     },
     "label": {
       "manage-project-dep": "프로젝트 의존성 관리",
@@ -152,10 +202,14 @@
     "node_plural": "__count__ 개의 노드",
     "configNode": "__count__ 개의 설정 노드",
     "configNode_plural": "__count__ 개의 설정 노드",
+    "group": "__count__ 개의 그룹",
+    "group_plural": "__count__ 개의 그룹",
     "flow": "__count__ 개의 플로우",
     "flow_plural": "__count__ 개의 플로우",
     "subflow": "__count__ 개의 서브 플로우",
     "subflow_plural": "__count__ 개의 서브 플로우",
+    "replacedNodes": "__count__ 개의 교체된 노드",
+    "replacedNodes_plural": "__count__ 개의 교체된 노드",
     "pasteNodes": "여기에 노드를 붙여넣기 하세요",
     "selectFile": "불러올 파일을 선택하세요",
     "importNodes": "노드 불러오기",
@@ -163,28 +217,46 @@
     "download": "다운로드",
     "importUnrecognised": "알 수 없는 형식 :",
     "importUnrecognised_plural": "알 수 없는 형식 :",
+    "importDuplicate": "가져온 중복 노드:",
+    "importDuplicate_plural": "가져온 중복 노드:",
     "nodesExported": "클립보드에 노드 내보내기",
     "nodesImported": "불러오기 : ",
-    "nodeCopied": "__count__개의 노드가 복사 되었습니다",
-    "nodeCopied_plural": "__count__개의 노드가 복사 되었습니다",
+    "nodeCopied": "__count__개의 노드가 복사되었습니다",
+    "nodeCopied_plural": "__count__개의 노드가 복사되었습니다",
+    "groupCopied": "__count__ 개의 그룹이 복사되었습니다",
+    "groupCopied_plural": "__count__ 개의 그룹이 복사되었습니다",
+    "groupStyleCopied": "그룹 스타일이 복사되었습니다",
     "invalidFlow": "정상적지 않은 플로우 : __message__",
+    "recoveredNodes": "복구된 노드",
+    "recoveredNodesInfo": "이 플로우의 노드를 가져올 때 유효한 플로우 ID가 누락되었습니다. 해당 플로우에 추가되었으므로 복원하거나 삭제할 수 있습니다.",
+    "recoveredNodesNotification": "<p>유효하지 않은 플로우 ID를 가진 노드입니다.</p><p>'__flowName__' 라는 플로우에 추가되었습니다.</p>",
     "export": {
       "selected": "선택된 노드",
       "current": "현재 플로우",
       "all": "모든 플로우",
       "compact": "압축형식",
       "formatted": "서식유지",
-      "copy": "클립보드로 내보내기"
+      "copy": "클립보드로 내보내기",
+      "export": "라이브러리로 내보내기",
+      "exportAs": "내보내기",
+      "overwrite": "확인",
+      "exists": "<p><b>\"__file__\"</b> 이미 존재합니다.</p><p>교체하시겠습니까?</p>"
     },
     "import": {
       "import": "가져올 위치 : ",
+      "importSelected": "선택 항목 가져오기",
+      "importCopy": "사본 가져오기",
+      "viewNodes": "노드 보기...",
       "newFlow": "새로운 플로우",
+      "replace": "교체",
       "errors": {
         "notArray": "입력이 JSON 배열이 아닙니다",
         "itemNotObject": "입력이 올바른 플로우가 아닙니다 - __index__는 노드 오브젝트가 아닙니다",
         "missingId": "입력이 올바른 플로우가 아닙니다 - __index__의 'id' 속성이 없습니다",
         "missingType": "입력이 올바른 플로우가 아닙니다 - __index__의 'type' 속성이 없습니다"
-      }
+      },
+      "conflictNotification1": "가져오는 노드 중 일부가 이미 작업 공간에 있습니다..",
+      "conflictNotification2": "가져올 노드와 기존 노드를 바꿀지 아니면 복사본을 가져올지 선택합니다."
     },
     "copyMessagePath": "Path가 복사 되었습니다",
     "copyMessageValue": "Value가 복사 되었습니다",
@@ -198,6 +270,10 @@
     "modifiedFlowsDesc": "변경사항이 있는 플로우만 배포합니다",
     "modifiedNodes": "변경된 노드",
     "modifiedNodesDesc": "변경사항이 있는 노드만 배포합니다",
+    "startFlows": "시작",
+    "startFlowsDesc": "플로우를 시작합니다",
+    "stopFlows": "중지",
+    "stopFlowsDesc": "플로우를 중지합니다",
     "restartFlows": "플로우 재시작",
     "restartFlowsDesc": "현재 배포된 플로우를 재시작합니다",
     "successfulDeploy": "배포가 성공했습니다",
@@ -266,6 +342,7 @@
     "newVersionError": "New Version의 JSON 형식이 올바르지 않습니다 :"
   },
   "subflow": {
+    "editSubflowInstance": "서브 플로우 인스턴스 수정: __name__",
     "editSubflow": "플로우 템플릿 수정 : __name__",
     "edit": "플로우 템플릿 수정",
     "subflowInstances": "서브 플로우 템플릿에 __count__개의 인스턴스가 있습니다",
@@ -273,14 +350,39 @@
     "editSubflowProperties": "속성 수정",
     "input": "입력:",
     "output": "출력:",
+    "status": "상태 노드",
     "deleteSubflow": "서브 플로우 삭제",
+    "confirmDelete": "서브 플로우를 삭제하시겠습니까?",
     "info": "상세내역",
     "category": "카테고리",
+    "module": "모듈",
+    "license": "라이선스",
+    "licenseNone": "없음",
+    "licenseOther": "Other",
+    "type": "노드",
+    "version": "버전",
+    "versionPlaceholder": "x.y.z",
+    "keys": "키워드",
+    "keysPlaceholder": "키워드(쉼표로 구분)를 입력해주세요",
+    "author": "이름",
+    "authorPlaceholder": "이름 또는 이메일을 입력해주세요",
+    "desc": "설명",
+    "env": {
+        "restore": "서브 플로우 기본값으로 복원",
+        "remove": "환경 변수 제거"
+    },
     "errors": {
       "noNodesSelected": "<strong>서브 플로우를 생성할 수 없습니다</strong> : 노드가 선택되지 않았습니다",
       "multipleInputsToSelection": "<strong>서브 플로우를 생성할 수 없습니다</strong> : 복수의 입력이 선택되었습니다"
     }
   },
+  "group": {
+      "editGroup": "그룹 수정: __name__",
+      "errors": {
+          "cannotCreateDiffGroups": "다른 그룹의 노드를 사용하여 그룹을 생성할 수 없습니다",
+          "cannotAddSubflowPorts": "그룹에 서브 플로우 포트를 추가할 수 없습니다"
+      }
+  },
   "editor": {
     "configEdit": "수정",
     "configAdd": "추가",
@@ -294,19 +396,20 @@
     "addNewType": "__type__의 노드타입 추가 ...",
     "nodeProperties": "노드 속성",
     "label": "명칭",
+    "color": "Color",
     "portLabels": "포트 설정",
     "labelInputs": "입력",
     "labelOutputs": "출력",
     "settingIcon": "아이콘",
+    "default": "default",
     "noDefaultLabel": "없음",
     "defaultLabel": "기본 명칭",
     "searchIcons": "아이콘 조회",
     "useDefault": "기본설정 사용",
     "description": "상세 내역",
-    "show": "보이기",
-    "hide": "숨기기",
     "errors": {
-      "scopeChange": "범위를 변경하게 되면 다른 플로우의 노드가 사용이 불가능해 집니다."
+      "scopeChange": "범위를 변경하게 되면 다른 플로우의 노드가 사용이 불가능해 집니다.",
+      "invalidProperties": "유효하지 않은 속성:"
     }
   },
   "keyboard": {
@@ -319,10 +422,11 @@
     "global": "글로벌",
     "workspace": "작업공간",
     "selectAll": "모든 노드 선택",
-    "selectAllConnected": "모든 연결된 노드 선택",
+    "selectNone": "노드 선택 취소",
+    "selectAllConnected": "연결된 모든 노드 선택",
     "addRemoveNode": "노드 추가/삭제",
     "editSelected": "선택된 노드 수정",
-    "deleteSelected": "선택된 노드나 링크를 삭제",
+    "deleteSelected": "선택된 노드 또는 링크 삭제",
     "importNode": "노드 불러오기",
     "exportNode": "노드 내보내기",
     "nudgeNode": "선택된 노드 이동 (1px)",
@@ -332,9 +436,14 @@
     "copyNode": "선택된 노드 복사",
     "cutNode": "선택된 노드 잘라내기",
     "pasteNode": "노드 붙여넣기",
+    "copyGroupStyle": "그룹 스타일 복사하기",
+    "pasteGroupStyle": "그룹 스타일 붙여넣기",
     "undoChange": "마지막 변경 되돌리기",
+    "redoChange": "다시 실행하기",
     "searchBox": "검색창 열기",
-    "managePalette": "팔렛트 관리"
+    "managePalette": "팔렛트 관리",
+    "actionList": "액션 목록",
+    "splitWireWithLinks": "링크 노드로 선택 항목 분할"
   },
   "library": {
     "library": "라이브러리",
@@ -342,13 +451,16 @@
     "saveToLibrary": "라이브러리로 저장...",
     "typeLibrary": "__type__ 라이브러리",
     "unnamedType": "이름없는 __type__",
+    "exportedToLibrary": "노드를 라이브러리로 내보냈습니다.",
     "dialogSaveOverwrite": "__libraryType__이 __libraryName__으로 이미 등록되어있습니다. 덮어쓸까요?",
     "invalidFilename": "파일명이 올바르지 않습니다",
     "savedNodes": "저장된 노드",
     "savedType": "저장된 __type__",
     "saveFailed": "저장 실패 : __message__",
+    "newFolder": "새로운 폴더",
     "types": {
-        "examples": "예시"
+      "local": "로컬",
+      "examples": "예시"
     }
   },
   "palette": {
@@ -358,9 +470,13 @@
     "addCategory": "추가 ...",
     "label": {
       "subflows": "서브 플로우",
+      "network": "네트워크",
+      "common": "일반",
       "input": "입력",
       "output": "출력",
       "function": "기능",
+      "sequence": "sequence",
+      "parser": "parser",
       "social": "소셜",
       "storage": "저장",
       "analysis": "분석",
@@ -379,7 +495,8 @@
       "nodeEnabled_plural": "노드가 활성화 되었습니다:",
       "nodeDisabled": "노드가 비활성화 되었습니다:",
       "nodeDisabled_plural": "노드가 비활성화 되었습니다:",
-      "nodeUpgraded": "__module__ 노드모듈이 __version__으로 업그레이드 되었습니다"
+      "nodeUpgraded": "__module__ 노드모듈이 __version__으로 업그레이드 되었습니다",
+      "unknownNodeRegistered": "Error loading node: <ul><li>__type__<br>__error__</li></ul>"
     },
     "editor": {
       "title": "팔렛트 관리",
@@ -426,6 +543,8 @@
       "sortAZ": "a-z",
       "sortRecent": "최근",
       "more": "+ __count__ 개 더 보기",
+      "upload": "Upload module tgz file",
+      "refresh": "모듈 목록 새로 고침",
       "errors": {
         "catalogLoadFailed": "<p>노드 카탈로그를 설치하지 못했습니다.</p><p>브라우저 콘솔로그를 참고하세요.</p>",
         "installFailed": "<p>설치 실패 : __module__</p><p>__message__</p><p>브라우저 콘솔로그를 참고하세요.</p>",
@@ -466,6 +585,7 @@
       "label": "정보",
       "node": "노드",
       "type": "타입",
+      "group": "Group",
       "module": "모듈",
       "id": "ID",
       "status": "상태",
@@ -488,7 +608,23 @@
       "nodeHelp": "노드 도움말",
       "none": "없음",
       "arrayItems": "__count__ 개의 항목",
-      "showTips": "설정에서 도움말을 열 수 있습니다. "
+      "showTips": "설정에서 도움말을 열 수 있습니다. ",
+      "outline": "개요",
+      "empty": "비우기",
+      "globalConfig": "전역 설정 노드",
+      "triggerAction": "트리거 작업",
+      "find": "작업 공간에서 찾기"
+    },
+    "help": {
+        "name": "도움말",
+        "label": "도움말",
+        "search": "도움말 검색",
+        "nodeHelp": "노드 도움말 보기",
+        "showHelp": "도움말 보기",
+        "showInOutline": "요약 보기",
+        "showTopics": "토픽 보기",
+        "noHelp": "선택한 도움말 항목이 없습니다",
+        "changeLog": "릴리즈 정보"
     },
     "config": {
       "name": "노드 설정",
@@ -498,7 +634,9 @@
       "subflows": "보조 플로우",
       "flows": "플로우",
       "filterAll": "전체",
+      "showAllConfigNodes": "모든 설정 노드 보기",
       "filterUnused": "미사용",
+      "showAllUnusedConfigNodes": "사용하지 않는 모든 설정 노드 보기",
       "filtered": "__count__ 개 숨김"
     },
     "context": {
@@ -509,8 +647,11 @@
       "empty": "공백",
       "node": "노드",
       "flow": "플로우",
-      "global": "Global",
-      "deleteConfirm": "정말로 이 아이템을 지우시겠습니까?"
+      "global": "글로벌",
+      "deleteConfirm": "정말로 이 아이템을 지우시겠습니까?",
+      "autoRefresh": "선택 변경 시 새로 고침",
+      "refrsh": "새로고침",
+      "delete": "삭제"
     },
     "palette": {
       "name": "팔레트 관리",
@@ -525,6 +666,7 @@
       "noSummaryAvailable": "요약 없음",
       "editDescription": "프로젝트 상세내역 수정",
       "editDependencies": "프로젝트 의존성 수정",
+      "noDescriptionAvailable": "설명 없음",
       "editReadme": "README.md 수정",
       "showProjectSettings": "프로젝트 설정 보이기",
       "projectSettings": {
@@ -537,6 +679,10 @@
         "files": "파일",
         "flow": "플로우",
         "credentials": "인증정보",
+        "package": "Package",
+        "packageCreate": "변경 내용이 저장될 때 파일이 생성됩니다",
+        "fileNotExist": "파일이 존재하지 않습니다",
+        "selectFile": "파일 선택",
         "invalidEncryptionKey": "잘못된 암호화 키",
         "encryptionEnabled": "암호화 활성화",
         "encryptionDisabled": "암호화 비활성화",
@@ -674,15 +820,29 @@
       "bin": "buffer",
       "date": "timestamp",
       "jsonata": "expression",
-      "env": "env variable"
+      "env": "env variable",
+      "cred": "credential"
     }
   },
   "editableList": {
-    "add": "추가"
+    "add": "추가",
+    "addTitle": "add an item"
   },
   "search": {
+    "history": "Search history",
+    "clear": "clear all",
     "empty": "결과 없음",
-    "addNode": "노드 추가 ..."
+    "addNode": "노드 추가 ...",
+    "options": {
+        "configNodes": "설정 노드",
+        "unusedConfigNodes": "사용되지 않는 설정 노드",
+        "invalidNodes": "잘못된 노드",
+        "uknownNodes": "알 수 없는 노드",
+        "unusedSubflows": "사용되지 않는 서브 플로우",
+        "hiddenFlows": "숨겨진 플로우",
+        "modifiedNodes": "수정된 노드 및 플로우",
+        "thisFlow": "현재 플로우"
+    }
   },
   "expressionEditor": {
     "functions": "기능",
@@ -703,15 +863,36 @@
       "eval": "형식 오류 :\n  __message__"
     }
   },
+  "monaco": {
+      "setTheme": "테마 설정"
+  },
   "jsEditor": {
     "title": "자바스크립트 에디터"
   },
+  "textEditor": {
+      "title": "텍스트 에디터"
+  },
   "jsonEditor": {
     "title": "JSON 에디터",
-    "format": "JSON 형식"
+    "format": "JSON 형식",
+    "rawMode": "JSON 수정",
+    "uiMode": "비주얼 편집기",
+    "rawMode-readonly": "JSON",
+    "uiMode-readonly": "비주얼",
+    "insertAbove": "위로 삽입",
+    "insertBelow": "아래로 삽입",
+    "addItem": "속성 추가",
+    "copyPath": "속성의 키값 복사",
+    "expandItems": "속성 펼치기",
+    "collapseItems": "속성 접기",
+    "duplicate": "복사",
+    "error": {
+        "invalidJSON": "비유효한 JSON: "
+    }
   },
   "markdownEditor": {
     "title": "Markdown 에디터",
+    "expand": "Expand",
     "format": "Markdown 형식",
     "heading1": "제목 레벨1",
     "heading2": "제목 레벨2",
@@ -741,6 +922,7 @@
       "desc2": "이 기능을 건너뛰어도 상관없습니다. 언제든지 프로젝트 메뉴에서 첫번째 프로젝트를 만들 수 있습니다.",
       "create": "프로젝트 생성",
       "clone": "프로젝트 복제",
+      "openExistingProject": "기존 프로젝트 열기",
       "not-right-now": "나중에"
     },
     "git-config": {
@@ -858,7 +1040,8 @@
       "not-git": "git 저장소가 아닙니다",
       "no-resource": "저장소아 없습니다",
       "cant-get-ssh-key-path": "에러! 선택한 SSH키 경로를 가져올 수 없습니다.",
-      "unexpected_error": "예기치 않은 에러"
+      "unexpected_error": "예기치 않은 에러",
+      "clearContext": "프로젝트 전환 시 context 삭제"
     },
     "delete": {
       "confirm": "프로젝트를 정말 지우시겠습니까?"
@@ -897,7 +1080,26 @@
   },
   "editor-tab": {
     "properties": "속성",
+    "envProperties": "환경 변수",
+    "module": "모듈 속성",
     "description": "상세 내역",
-    "appearance": "모양"
+    "appearance": "모양",
+    "preview": "UI 프리뷰",
+    "defaultValue": "기본값"
+  },
+  "tourGuide": {
+      "takeATour": "둘러보기",
+      "start": "시작",
+      "next": "다음",
+      "welcomeTours": "버전 별 릴리즈 정보"
+  },
+  "diagnostics": {
+      "title": "시스템 정보"
+  },
+  "contextMenu": {
+      "insert": "삽입",
+      "node": "노드",
+      "junction": "접합",
+      "linkNodes": "링크 노드"
   }
 }

packages/node_modules/@node-red/editor-client/locales/pt-BR/infotips.json

@@ -0,0 +1,23 @@
+{
+    "info": {
+        "tip0": "Você pode remover os nós ou links selecionados com {{core:delete-selection}}",
+        "tip1": "Procure por nós usando {{core:search}}",
+        "tip2": "{{core:toggle-sidebar}} irá alternar a visualização desta barra lateral",
+        "tip3": "Você pode gerenciar sua paleta de nós com {{core:manage-palette}}",
+        "tip4": "Seus nós de configuração de fluxo são listados no painel da barra lateral. Pode ser acessado a partir do menu ou com{{core:show-config-tab}}",
+        "tip5": "Habilite ou desabilite essas dicas na opção nas configurações",
+        "tip6": "Mova os nós selecionados usando o [left] [up] [down] e [right] chaves. Segure [shift] para empurrá-los ainda mais",
+        "tip7": "Arrastar um nó para um fio o unirá no link",
+        "tip8": "Exporte os nós selecionados ou a guia atual com {{core:show-export-dialog}}",
+        "tip9": "Importe um fluxo arrastando seu JSON para o editor ou com {{core:show-import-dialog}}",
+        "tip10": "[shift] [click] e arraste em uma porta de nó para mover todos os fios conectados ou apenas o selecionado",
+        "tip11": "Mostre a guia Informações com {{core:show-info-tab}} ou a guia Depurar com {{core:show-debug-tab}}",
+        "tip12": "[ctrl] [click] na área de trabalho para abrir a caixa de diálogo de adição rápida",
+        "tip13": "Mantenha pressionado [ctrl] enquanto você [click] em uma porta de nó para habilitar a ligação rápida",
+        "tip14": "Mantenha pressionado [shift] enquanto você [click] em um nó para também selecionar todos os seus nós conectados",
+        "tip15": "Mantenha pressionado [ctrl] enquanto você [click] em um nó para adicioná-lo ou removê-lo da seleção atual",
+        "tip16": "Alternar guias de fluxo com {{core:show-previous-tab}} e {{core:show-next-tab}}",
+        "tip17": "Você pode confirmar suas alterações na bandeja de edição do nó com {{core:confirm-edit-tray}} ou cancele-os com {{core:cancel-edit-tray}}",
+        "tip18": "Pressionando {{core:edit-selected-node}} irá editar o primeiro nó na seleção atual"
+    }
+}

packages/node_modules/@node-red/editor-client/locales/pt-BR/jsonata.json

@@ -0,0 +1,274 @@
+{
+    "$string": {
+        "args": "arg[, prettify]",
+        "desc": "Converte o tipo do parâmetro `arg` em uma cadeia de caracteres usando as seguintes regras de conversão de tipo:\n\n - Cadeia de caracteres não são alteradas\n - As funções são convertidas para uma cadeia de caracteres  vazia\n - os tipos numérico infinito e NaN geram um erro porque não podem ser representados como um número JSON\n - Todos os outros valores são convertidos para uma cadeia de caracteres JSON usando a função `JSON.stringify`. Se `prettify` for verdadeira, então o JSON \"prettified\" é produzido. Isto é, uma linha por campo e as linhas serão indentadas com base na profundidade do campo."
+    },
+    "$length": {
+        "args": "str",
+        "desc": "Retorna o número de caracteres na cadeia de caracteres `str`. Um erro é gerado se `str` não for uma cadeia de caracteres."
+    },
+    "$substring": {
+        "args": "str, start[, length]",
+        "desc": "Retorna uma cadeia de caracteres contendo os caracteres no primeiro parâmetro `str` começando na posição `start` (deslocamento zero). Se` length` for especificado, então a sub cadeia de caracteres conterá o máximo `length` de caracteres. Se` start` for negativo isso indica o número de caracteres a partir do fim de `str`."
+    },
+    "$substringBefore": {
+        "args": "str, chars",
+        "desc": "Retorna a sub cadeia de caracteres antes da primeira ocorrência da sequência de caracteres `chars` em `string`. Se` string` não contiver `chars`, então retorna `str`. "
+    },
+    "$substringAfter": {
+        "args": "str, chars",
+        "desc": "Retorna a sub cadeia de caracteres após a primeira ocorrência da sequência de caracteres `chars` em `string`. Se `string` não contiver `chars`, então retorna `str`. "
+    },
+    "$uppercase": {
+        "args": "str",
+        "desc": "Retorna uma cadeia de caracteres com todos os caracteres de `string` convertidos em maiúsculas. "
+    },
+    "$lowercase": {
+        "args": "str",
+        "desc": "Retorna uma cadeia de caracteres com todos os caracteres de `string` convertidos em minúsculas. "
+    },
+    "$trim": {
+        "args": "str",
+        "desc": "Normaliza e retira todos os caracteres de espaço em branco em `str` aplicando as seguintes etapas:\n\n - Todas as tabulações, retornos de carro e avanços de linha são substituídos por espaços.\n- Sequências contíguas de espaços são reduzidas a um único espaço.\n- Espaços à direita e à esquerda são removidos.\n\n Se `str` não for especificado (isto é, esta função é chamada sem argumentos), então o valor do contexto é usado como o valor de `str`. Um erro é gerado se `str` não for uma cadeia de caracteres."
+    },
+    "$contains": {
+        "args": "str, pattern",
+        "desc": "Retorna `true` se `str` tiver correspondente em `pattern`, caso contrário, retorna `false`. Se `str` não for especificado (isto é, esta função é chamada com um argumento), então o valor do contexto é usado como o valor de `str`. O parâmetro `pattern` pode ser uma cadeia de caracteres ou uma expressão regular. "
+    },
+    "$split": {
+        "args": "str[, separator][, limit]",
+        "desc": "Divide o parâmetro `str` em uma matriz de sub cadeia de caracteres. É um erro se `str` não for uma cadeia de caracteres. O parâmetro opcional `separator` especifica os caracteres dentro de `str` sobre os quais devem ser divididos como uma cadeia de caracteres ou expressão regular. Se `separator` não for especificado, a cadeia de caracteres vazia será assumida e `str` será dividido em uma matriz de caracteres únicos. É um erro se `separador` não for uma cadeia de caracteres. O parâmetro opcional  `limit` é um número que especifica o número máximo de sub cadeia de caracteres a serem incluídas na matriz resultante. Quaisquer sub cadeia de caracteres adicionais são descartadas. Se `limit` não for especificado, então `str` será totalmente dividido sem limite para o tamanho da matriz resultante . É um erro se `limit` não for um número não negativo."
+    },
+    "$join": {
+        "args": "array[, separator]",
+        "desc": "Une uma matriz de cadeias de caracteres de componentes em uma única cadeia de caracteres concatenada com cada cadeia de caracteres de componente separada pelo parâmetro opcional `separator`. É um erro se a `matriz` de entrada contiver um item que não seja uma cadeia de caracteres. Se `separator` for não especificado, assume-se que é uma cadeia de caracteres vazia, ou seja, nenhum `separator` entre as cadeias de caracteres do componente. É um erro se `separator` não for uma cadeia de caracteres. "
+    },
+    "$match": {
+        "args": "str, pattern [, limit]",
+        "desc": "Aplica a cadeia de caracteres `str` à expressão regular `pattern` e retorna uma matriz de objetos, com cada objeto contendo informações sobre cada ocorrência de uma correspondência dentro de `str`. "
+    },
+    "$replace": {
+        "args": "str, pattern, replacement [, limit]",
+        "desc": "Encontra ocorrências de `pattern` dentro de `str` e as substitui por `replacement`.\n\nO parâmetro opcional `limit` é o número máximo de substituições."
+    },
+    "$now": {
+        "args":"$[picture [, timezone]]",
+        "desc":"Gera um carimbo de data/hora em formato compatível com ISO 8601 e o retorna como uma cadeia de caracteres. Se os parâmetros opcionais de imagem e fuso horário forem fornecidos, o carimbo de data/hora atual é formatado conforme descrito pela função `$ fromMillis ()`"
+    },
+    "$base64encode": {
+        "args":"string",
+        "desc":"Converte uma cadeia de caracteres ASCII em uma representação de base 64. Cada caractere na cadeia de caracteres é tratado como um byte de dados binários. Isso requer que todos os caracteres na cadeia de caracteres estejam no intervalo de 0x00 a 0xFF, o que inclui todos os caracteres em cadeias de caracteres codificadas em URI. Caracteres Unicode fora desse intervalo não são suportados."
+    },
+    "$base64decode": {
+        "args":"string",
+        "desc":"Converte bytes codificados de base 64 em uma cadeia de caracteres, usando uma página de código UTF-8 Unicode."
+    },
+    "$number": {
+        "args": "arg",
+        "desc": "Converte o parâmetro `arg` em um número usando as seguintes regras de conversão:\n\n - Os números permanecem inalterados\n - Cadeias de caracteres que contêm uma sequência de caracteres que representam um número JSON válido são convertidos para esse número\n - Todos os outros valores causam a geração de um erro."
+    },
+    "$abs": {
+        "args":"number",
+        "desc":"Retorna o valor absoluto do parâmetro `number`."
+    },
+    "$floor": {
+        "args":"number",
+        "desc":"Retorna o valor de `number` arredondado para baixo para o inteiro mais próximo que seja menor ou igual a `number`."
+    },
+    "$ceil": {
+        "args":"number",
+        "desc":"Retorna o valor de `number` arredondado para o número inteiro mais próximo que é maior ou igual a `number`."
+    },
+    "$round": {
+        "args":"number [, precision]",
+        "desc":"Retorna o valor do parâmetro `number` arredondado para o número de casas decimais especificado pelo parâmetro opcional `precision`."
+    },
+    "$power": {
+        "args":"base, exponent",
+        "desc":"Retorna o valor de `base` elevado à potência de `exponent`."
+    },
+    "$sqrt": {
+        "args":"number",
+        "desc":"Retorna a raiz quadrada do valor do parâmetro `number`."
+    },
+    "$random": {
+        "args":"",
+        "desc":"Retorna um número pseudoaleatório maior ou igual a zero e menor que um."
+    },
+    "$millis": {
+        "args":"",
+        "desc":"Retorna o número de milissegundos desde o Unix Epoch (1º de janeiro de 1970 UTC) como um número. Todas as invocações de `$ millis ()` dentro de uma avaliação de uma expressão retornarão todas o mesmo valor."
+    },
+    "$sum": {
+        "args": "array",
+        "desc": "Retorna a soma aritmética de uma `array` de números. É um erro se o `array` de entrada contiver um item que não seja um número."
+    },
+    "$max": {
+        "args": "array",
+        "desc": "Retorna o número máximo em uma `array` de números. É um erro se o `array` de entrada contiver um item que não seja um número."
+    },
+    "$min": {
+        "args": "array",
+        "desc": "Retorna o número mínimo em uma `array` de números. É um erro se o `array` de entrada contiver um item que não seja um número."
+    },
+    "$average": {
+        "args": "array",
+        "desc": "Retorna o valor médio de uma `array` de números. É um erro se o `array` de entrada contiver um item que não seja um número."
+    },
+    "$boolean": {
+        "args": "arg",
+        "desc": "Converte o argumento em um booliano usando as seguintes regras:\n\n - `Boolean` : inalterado\n - `string`: vazio : `false`\n - `string`: não-vazio : `true`\n - `number`: `0` : `false`\n - `number`: não-zero : `true`\n - `null` : `false`\n - `array`: vazio : `false`\n - `array`: contém um membro que converte de tipo para `true` : `true`\n - `array`: todos os membros convertidos de tipo para `false` : `false`\n - `object`: vazio : `false`\n - `object`: não-vazio : `true`\n - `function` : `false`"
+    },
+    "$not": {
+        "args": "arg",
+        "desc": "Retorna booliano NOT no argumento. `Arg` é convertido de tipo primeiro para um booliano "
+    },
+    "$exists": {
+        "args": "arg",
+        "desc": "Retorna booliano `true` se a expressão `arg` for avaliada como um valor, ou `false` se a expressão não corresponder a nada (por exemplo, um caminho para uma referência de campo inexistente)."
+    },
+    "$count": {
+        "args": "array",
+        "desc": "Retorna o número de itens na matriz"
+    },
+    "$append": {
+        "args": "array, array",
+        "desc": "Anexa duas matrizes"
+    },
+    "$sort": {
+        "args":"array [, function]",
+        "desc":"Retorna uma matriz contendo todos os valores no parâmetro `array`, mas classificados em ordem.\n\nSe um comparador `function` for fornecido, então deve ser uma função que leva dois parâmetros:\n\n`function(left, right)`\n\nEsta função é invocada pelo algoritmo de classificação para comparar dois valores à esquerda e à direita. Se o valor de esquerda deve ser colocado após o valor de direita na ordem de classificação desejada, a função deve retornar o booliano `true` para indicar uma troca. Caso contrário, deve retornar `false`."
+    },
+    "$reverse": {
+        "args":"array",
+        "desc":"Retorna uma matriz contendo todos os valores do parâmetro `array`, mas na ordem reversa. "
+    },
+    "$shuffle": {
+        "args":"array",
+        "desc":"Retorna uma matriz contendo todos os valores do parâmetro `array`, mas misturados em ordem aleatória. "
+    },
+    "$zip": {
+        "args":"array, ...",
+        "desc":"Retorna uma matriz convolucional (compactada) contendo matrizes agrupadas de valores dos argumentos `array1`… `arrayN` do índice 0, 1, 2 ...."
+    },
+    "$keys": {
+        "args": "object",
+        "desc": "Retorna uma matriz contendo as chaves do objeto. Se o argumento for uma matriz de objetos, então a matriz retornada contém uma lista não duplicada de todas as chaves em todos os objetos."
+    },
+    "$lookup": {
+        "args": "object, key",
+        "desc": "Retorna o valor associado à chave no objeto. Se o primeiro argumento for uma matriz de objetos, todos os objetos na matriz são pesquisados e os valores associados a todas as ocorrências da chave são retornados."
+    },
+    "$spread": {
+        "args": "object",
+        "desc": "Divide um objeto que contém pares de chave/valor em uma matriz de objetos, cada um com um único par de chave/valor do objeto de entrada. Se o parâmetro for uma matriz de objetos, a matriz resultante conterá um objeto para cada par de chave/valor em todo objeto na matriz fornecida. "
+    },
+    "$merge": {
+        "args": "array<object>",
+        "desc": "Mescla uma matriz de `objects` em um único `object` contendo todos os pares de chave/valor de cada um dos objetos na matriz de entrada. Se qualquer um dos objetos de entrada contiver a mesma chave, então o `object` retornado conterá o valor do último na matriz. É um erro se a matriz de entrada contiver um item que não seja um objeto."
+    },
+    "$sift": {
+        "args":"object, function",
+        "desc": "Retorna um objeto que contém apenas os pares de chave/valor do parâmetro `object` que satisfazem o predicado `function` passado como o segundo parâmetro.\n\nA `function` que é fornecida como o segundo parâmetro deve ter o seguinte assinatura:\n\n`function(value [, key [, object]])`"
+    },
+    "$each": {
+        "args":"object, function",
+        "desc":"Retorna uma matriz contendo os valores retornados por `function` quando aplicado a cada par chave/valor no `object`."
+    },
+    "$map": {
+        "args":"array, function",
+        "desc":"Retorna uma matriz contendo os resultados da aplicação do parâmetro `function` a cada valor no parâmetro `array`.\n\nA `function` que é fornecido como o segundo parâmetro deve ter a seguinte assinatura:\n\n`function(value [, index [, array]])`"
+    },
+    "$filter": {
+        "args":"array, function",
+        "desc":"Retorna uma matriz contendo apenas os valores no parâmetro `array` que satisfazem o predicado `function`.\n\nThe `function` que é fornecido como o segundo parâmetro deve ter a seguinte assinatura:\n\n`function(value [, index [, array]])`"
+    },
+    "$reduce": {
+        "args":"array, function [, init]",
+        "desc":"Retorna um valor agregado derivado da aplicação do parâmetro `function` sucessivamente a cada valor em `array` em combinação com o resultado da aplicação anterior da função.\n\nA função deve aceitar dois argumentos e se comportar como um operador inserido entre cada valor dentro de `array`. A assinatura da `function` deve estar no formato: `myfunc($accumulator, $value[, $index[, $array]])`\n\nO parâmetro opcional `init` é usado como o valor inicial na agregação."
+    },
+    "$flowContext": {
+        "args": "string[, string]",
+        "desc": "Recupera uma propriedade de contexto de fluxo.\n\nEsta é uma função definida pelo Node-RED. "
+    },
+    "$globalContext": {
+        "args": "string[, string]",
+        "desc": "Recupera uma propriedade de contexto global.\n\nEsta é uma função definida pelo Node-RED. "
+    },
+    "$pad": {
+        "args": "string, width [, char]",
+        "desc": "Retorna uma cópia da `string` com preenchimento extra, se necessário, de forma que seu número total de caracteres seja pelo menos o valor absoluto do parâmetro `width`.\n\nSe `width` for um número positivo, a cadeia de caracteres será preenchida à direita; se negativo, é preenchida à esquerda.\n\nO argumento opcional `char` especifica os caracteres de preenchimento a serem usados. Se não for especificado, o padrão é o caractere de espaço. "
+    },
+    "$fromMillis": {
+        "args": "number, [, picture [, timezone]]",
+        "desc": "Converta o `number` que representa os milissegundos desde a época do Unix (1 January, 1970 UTC) em uma representação de cadeia de caracteres formatada do carimbo de data/hora conforme especificado pela cadeia de caracteres de imagem.\n\nSe o parâmetro opcional `image` for omitido, o carimbo de data/hora será formatado no formato ISO 8601.\n\nSe a cadeia de caracteresopcional  `picture` for fornecida, o carimbo de data/hora é formatado de acordo com a representação especificada nessa cadeia de caracteres. O comportamento desta função é consistente com a versão de dois argumentos da função XPath/XQuery `format-dateTime` conforme definido na especificação XPath F&O 3.1. O parâmetro de cadeia de caracteres de imagem define como o carimbo de data/hora é formatado e tem a mesma sintaxe de `format-dateTime`.\n\nSe a cadeia de caracteres opcional `timezone` for fornecida, o carimbo de data/hora formatado estará nesse fuso horário. A cadeia de caracteres `timezone` deve estar no formato '± HHMM', onde ± é o sinal de mais ou menos e HHMM é o deslocamento em horas e minutos do UTC. Deslocamento positivo para fusos horários a leste do UTC, deslocamento negativo para fusos horários a oeste do UTC. "
+    },
+    "$formatNumber": {
+        "args": "number, picture [, options]",
+        "desc": "Converte o tipo de `number` em uma cadeia de caracteres e o formata em uma representação decimal conforme especificado pela cadeia de caracteres `picture`.\n\n O comportamento desta função é consistente com a função XPath/XQuery fn: format-number conforme definido na especificação XPath F&O 3.1. O parâmetro de cadeia de caracteres de imagem define como o número é formatado e tem a mesma sintaxe de fn: format-number.\n\nO terceiro argumento opcional `options` é usado para substituir os caracteres de formatação específicos da localidade padrão, como o separador decimal. Se fornecido, este argumento deve ser um objeto contendo pares de nome/valor especificados na seção de formato decimal da especificação XPath F&O 3.1."
+    },
+    "$formatBase": {
+        "args": "number [, radix]",
+        "desc": "Converte o `number` em uma cadeia de caracteres e o formata em um inteiro representado na base do número especificada pelo argumento `radix`. Se `radix` não for especificado, o padrão é a base 10. `radix` pode estar entre 2 e 36, caso contrário, um erro será gerado. "
+    },
+    "$toMillis": {
+        "args": "timestamp",
+        "desc": "Converta o tipo de uma cadeia de caracteres `timestamp` no formato ISO 8601 para o número de milissegundos desde a época do Unix (1 January, 1970 UTC)  como um número. Um erro é gerado se a cadeia de caracteres não estiver no formato correto. "
+    },
+    "$env": {
+        "args": "arg",
+        "desc": "Retorna o valor de uma variável de ambiente.\n\nEsta é uma função definida pelo Node-RED."
+    },
+    "$eval": {
+        "args": "expr [, context]",
+        "desc": "Analisa e avalia a cadeia de caracteres `expr` que contém um JSON literal ou uma expressão JSONata usando o contexto atual como o contexto para avaliação. "
+    },
+    "$formatInteger": {
+        "args": "number, picture",
+        "desc": "Converte o tipo de `number` em uma cadeia de caracteres e o formata em uma representação inteira conforme especificado pela cadeia de caracteres `picture`. O parâmetro da cadeia de caracteres de imagem define como o número é formatado e tem a mesma sintaxe de `fn: format-integer` do Especificação XPath F&O 3.1. "
+    },
+    "$parseInteger": {
+        "args": "string, picture",
+        "desc": "Examina e troca o conteúdo do parâmetro `string` para um inteiro (como um número JSON) usando o formato especificado pela cadeia de caracteres `picture`. O parâmetro da cadeia de caracteres `picture` tem o mesmo formato que `$ formatInteger`."
+    },
+    "$error": {
+        "args": "[str]",
+        "desc": "Gera um erro com uma mensagem. O (parâmetro) opcional `str` substituirá a mensagem padrão de `$error() function evaluated`"
+    },
+    "$assert": {
+        "args": "arg, str",
+        "desc": "Se `arg` for verdadeiro, a função retorna indefinido. Se `arg` for falso, uma exceção é gerada com `str` como a mensagem da exceção. "
+    },
+    "$single": {
+        "args": "array, function",
+        "desc": "Retorna o único valor no parâmetro `array` que satisfaz o predicado `function` (isto é, O (parâmetro) `function` retorna o booliano `true` quando passado o valor). Gera uma exceção se o número de valores correspondentes não for exatamente um .\n\nA função deve ser fornecida na seguinte assinatura: `function(value [, index [, array]])` onde 'value' é cada entrada da matriz, 'index' é a posição desse valor e toda a matriz é passada como o terceiro argumento"
+    },
+    "$encodeUrlComponent": {
+        "args": "str",
+        "desc": "Codifica um componente Localizador Uniforme de Recursos (URL) substituindo cada instância de certos caracteres por uma, duas, três ou quatro sequências de escape que representam a codificação UTF-8 do caractere.\n\nExemplo: `$encodeUrlComponent(\"?x=test\")` => `\"%3Fx%3Dtest\"`"
+    },
+    "$encodeUrl": {
+        "args": "str",
+        "desc": "Codifica um Localizador Uniforme de Recursos (URL) substituindo cada instância de certos caracteres por uma, duas, três ou quatro sequências de escape que representam a codificação UTF-8 do caractere. \n\nExemplo: `$encodeUrl(\"https://mozilla.org/?x=шеллы\")` => `\"https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B\"`"
+    },
+    "$decodeUrlComponent": {
+        "args": "str",
+        "desc": "Decodifica um componente Localizador Uniforme de Recursos (URL) criado anteriormente por encodeUrlComponent. \n\nExemplo: `$decodeUrlComponent(\"%3Fx%3Dtest\")` => `\"?x=test\"`"
+    },
+    "$decodeUrl": {
+        "args": "str",
+        "desc": "Decodifica um Localizador Uniforme de Recursos (URL) criado anteriormente por encodeUrl. \n\nExemplo: `$decodeUrl(\"https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B\")` => `\"https://mozilla.org/?x=шеллы\"`"
+    },
+    "$distinct": {
+        "args": "array",
+        "desc": "Retorna uma matriz com valores duplicados removidos da `array` "
+    },
+    "$type": {
+        "args": "value",
+        "desc": "Retorna o tipo de `value` como uma cadeia de caracteres. Se `value` for indefinido, retornará `undefined` "
+    },
+    "$moment": {
+        "args": "[str]",
+        "desc": "Obtém um objeto de dados usando a biblioteca 'Moment'."
+    }
+}

packages/node_modules/@node-red/editor-client/locales/ru/editor.json

@@ -1133,8 +1133,10 @@
     "languages" : {
         "de": "Немецкий",
         "en-US": "Английский",
+        "fr": "Французский",
         "ja": "Японский",
         "ko": "Корейский",
+        "pt-BR":"португальский",
         "ru": "Русский",
         "zh-CN": "Китайский (упрощенный)",
         "zh-TW": "Китайский (традиционный)"

packages/node_modules/@node-red/editor-client/locales/zh-TW/editor.json

@@ -1088,8 +1088,11 @@
     "languages": {
         "de": "德語",
         "en-US": "英語",
+        "fr": "法語",
         "ja": "日語",
         "ko": "韓語",
+        "pt-BR":"葡萄牙语",
+        "ru":"俄語",
         "zh-CN": "簡體中文",
         "zh-TW": "繁體中文"
     }

packages/node_modules/@node-red/editor-client/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/editor-client",
-    "version": "3.0.0-beta.3",
+    "version": "3.1.0-beta.2",
     "license": "Apache-2.0",
     "repository": {
         "type": "git",

packages/node_modules/@node-red/editor-client/src/images/start.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
+    <path color="#000" fill="#8c101c" d="M0 0h32v32H0z"></path>
+    <path style="fill:#ffffff;stroke:#000000;stroke-width:0" d="M 24,16 8,24 8,8 Z" fill="none" stroke="#000" stroke-width="1.5"></path>
+</svg>

packages/node_modules/@node-red/editor-client/src/images/stop.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
+    <path color="#000" fill="#8c101c" d="M0 0h32v32H0z"></path>
+    <rect style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0;" width="15" height="15" x="8" y="8.5"></rect>
+</svg>

packages/node_modules/@node-red/editor-client/src/js/history.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  **/
 
-/** 
+/**
  * An API for undo / redo history buffer
  * @namespace RED.history
 */
@@ -378,7 +378,8 @@ RED.history = (function() {
                 if (ev.addToGroup) {
                     RED.group.removeFromGroup(ev.addToGroup,ev.nodes.map(function(n) { return n.n }),false);
                     inverseEv.removeFromGroup = ev.addToGroup;
-                } else if (ev.removeFromGroup) {
+                }
+                if (ev.removeFromGroup) {
                     RED.group.addToGroup(ev.removeFromGroup,ev.nodes.map(function(n) { return n.n }));
                     inverseEv.addToGroup = ev.removeFromGroup;
                 }
@@ -421,6 +422,9 @@ RED.history = (function() {
                         ev.node[i] = ev.changes[i];
                     }
                 }
+                ev.node.dirty = true;
+                ev.node.changed = ev.changed;
+
                 var eventType;
                 switch(ev.node.type) {
                     case 'tab': eventType = "flows"; break;
@@ -434,7 +438,9 @@ RED.history = (function() {
 
                 if (ev.node.type === 'tab' && ev.changes.hasOwnProperty('disabled')) {
                     $("#red-ui-tab-"+(ev.node.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!ev.node.disabled);
-                    $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!ev.node.disabled);
+                }
+                if (ev.node.type === 'tab' && ev.changes.hasOwnProperty('locked')) {
+                    $("#red-ui-tab-"+(ev.node.id.replace(".","-"))).toggleClass('red-ui-workspace-locked',!!ev.node.locked);
                 }
                 if (ev.subflow) {
                     inverseEv.subflow = {};
@@ -509,8 +515,6 @@ RED.history = (function() {
                         inverseEv.links.push(ev.createdLinks[i]);
                     }
                 }
-                ev.node.dirty = true;
-                ev.node.changed = ev.changed;
             } else if (ev.t == "createSubflow") {
                 inverseEv = {
                     t: "deleteSubflow",
@@ -646,6 +650,12 @@ RED.history = (function() {
                         ev.groups[i].nodes = [];
                         RED.nodes.addGroup(ev.groups[i]);
                         RED.group.addToGroup(ev.groups[i],nodes);
+                        if (ev.groups[i].g) {
+                            const parentGroup = RED.nodes.group(ev.groups[i].g)
+                            if (parentGroup) {
+                                RED.group.addToGroup(parentGroup, ev.groups[i])
+                            }
+                        }
                     }
                 }
             } else if (ev.t == "addToGroup") {

packages/node_modules/@node-red/editor-client/src/js/keymap.json

@@ -3,16 +3,12 @@
         "alt-shift-p":"core:manage-palette",
         "ctrl-f": "core:search",
         "ctrl-shift-f": "core:list-flows",
-        "ctrl-+": "core:zoom-in",
-        "ctrl--": "core:zoom-out",
-        "ctrl-0": "core:zoom-reset",
-        "ctrl-enter": "core:confirm-edit-tray",
-        "ctrl-escape": "core:cancel-edit-tray",
         "ctrl-d": "core:deploy-flows",
-        "ctrl-g i": "core:show-info-tab",
-        "ctrl-g h": "core:show-help-tab",
-        "ctrl-g d": "core:show-debug-tab",
         "ctrl-g c": "core:show-config-tab",
+        "ctrl-g d": "core:show-debug-tab",
+        "ctrl-g h": "core:show-help-tab",
+        "ctrl-g i": "core:show-info-tab",
+        "ctrl-g v": "core:show-version-control-tab",
         "ctrl-g x": "core:show-context-tab",
         "ctrl-e": "core:show-export-dialog",
         "ctrl-i": "core:show-import-dialog",
@@ -23,11 +19,8 @@
         "ctrl-alt-r": "core:show-remote-diff",
         "ctrl-alt-n": "core:new-project",
         "ctrl-alt-o": "core:open-project",
-        "ctrl-g v": "core:show-version-control-tab",
         "ctrl-shift-l": "core:show-event-log",
-        "ctrl-shift-p":"core:show-action-list",
-        "alt-w": "core:hide-flow",
-        "alt-shift-w": "core:show-last-hidden-flow"
+        "ctrl-shift-p":"core:show-action-list"
     },
     "red-ui-sidebar-node-config": {
         "backspace": "core:delete-config-selection",
@@ -93,7 +86,16 @@
         "alt-a v": "core:distribute-selection-vertically",
         "shift-f": "core:search-previous",
         "f": "core:search-next",
-        "alt-l l": "core:split-wire-with-link-nodes"
+        "alt-l l": "core:split-wire-with-link-nodes",
+        "alt-w": "core:hide-flow",
+        "alt-shift-w": "core:show-last-hidden-flow",
+        "ctrl-+": "core:zoom-in",
+        "ctrl--": "core:zoom-out",
+        "ctrl-0": "core:zoom-reset"
 
+     },
+     "red-ui-editor-stack": {
+        "ctrl-enter": "core:confirm-edit-tray",
+        "ctrl-escape": "core:cancel-edit-tray"
      }
 }

packages/node_modules/@node-red/editor-client/src/js/nodes.js

@@ -14,12 +14,11 @@
  * limitations under the License.
  **/
 
-/** 
+/**
  * An Interface to nodes and utility functions for creating/adding/deleting nodes and links
  * @namespace RED.nodes
 */
 RED.nodes = (function() {
-
     var PORT_TYPE_INPUT = 1;
     var PORT_TYPE_OUTPUT = 0;
 
@@ -47,6 +46,9 @@ RED.nodes = (function() {
 
     function setDirty(d) {
         dirty = d;
+        if (!d) {
+            allNodes.clearState()
+        }
         RED.events.emit("workspace:dirty",{dirty:dirty});
     }
 
@@ -63,12 +65,12 @@ RED.nodes = (function() {
             defaults: {
                 label: {value:""},
                 disabled: {value: false},
+                locked: {value: false},
                 info: {value: ""},
                 env: {value: []}
             }
         };
 
-
         var exports = {
             setModulePendingUpdated: function(module,version) {
                 moduleList[module].pending_version = version;
@@ -238,22 +240,72 @@ RED.nodes = (function() {
 
     // allNodes holds information about the Flow nodes.
     var allNodes = (function() {
+        // Map node.id -> node
         var nodes = {};
+        // Map tab.id -> Array of nodes on that tab
         var tabMap = {};
+        // Map tab.id -> Set of dirty object ids on that tab
+        var tabDirtyMap = {};
+        // Map tab.id -> Set of object ids of things deleted from the tab that weren't otherwise dirty
+        var tabDeletedNodesMap = {};
+        // Set of object ids of things added to a tab after initial import
+        var addedDirtyObjects = new Set()
+
+        function changeCollectionDepth(tabNodes, toMove, direction, singleStep) {
+            const result = []
+            const moved = new Set();
+            const startIndex = direction ? tabNodes.length - 1 : 0
+            const endIndex = direction ? -1 : tabNodes.length
+            const step = direction ? -1 : 1
+            let target = startIndex // Only used for all-the-way moves
+            for (let i = startIndex; i != endIndex; i += step) {
+                if (toMove.size === 0) {
+                    break;
+                }
+                const n = tabNodes[i]
+                if (toMove.has(n)) {
+                    if (singleStep) {
+                        if (i !== startIndex && !moved.has(tabNodes[i - step])) {
+                            tabNodes.splice(i, 1)
+                            tabNodes.splice(i - step, 0, n)
+                            n._reordered = true
+                            result.push(n)
+                        }
+                    } else {
+                        if (i !== target) {
+                            tabNodes.splice(i, 1)
+                            tabNodes.splice(target, 0, n)
+                            n._reordered = true
+                            result.push(n)
+                        }
+                        target += step
+                    }
+                    toMove.delete(n);
+                    moved.add(n);
+                }
+            }
+            return result
+        }
+
         var api = {
             addTab: function(id) {
                 tabMap[id] = [];
+                tabDirtyMap[id] = new Set();
+                tabDeletedNodesMap[id] = new Set();
             },
             hasTab: function(z) {
                 return tabMap.hasOwnProperty(z)
             },
             removeTab: function(id) {
                 delete tabMap[id];
+                delete tabDirtyMap[id];
+                delete tabDeletedNodesMap[id];
             },
             addNode: function(n) {
                 nodes[n.id] = n;
                 if (tabMap.hasOwnProperty(n.z)) {
                     tabMap[n.z].push(n);
+                    api.addObjectToWorkspace(n.z, n.id, n.changed || n.moved)
                 } else {
                     console.warn("Node added to unknown tab/subflow:",n);
                     tabMap["_"] = tabMap["_"] || [];
@@ -267,8 +319,37 @@ RED.nodes = (function() {
                     if (i > -1) {
                         tabMap[n.z].splice(i,1);
                     }
+                    api.removeObjectFromWorkspace(n.z, n.id)
                 }
             },
+            /**
+             * Add an object to our dirty/clean tracking state
+             * @param {String} z 
+             * @param {String} id 
+             * @param {Boolean} isDirty 
+             */
+            addObjectToWorkspace: function (z, id, isDirty) {
+                if (isDirty) {
+                    addedDirtyObjects.add(id)
+                }
+                if (tabDeletedNodesMap[z].has(id)) {
+                    tabDeletedNodesMap[z].delete(id)
+                }
+                api.markNodeDirty(z, id, isDirty)
+            },
+            /**
+             * Remove an object from our dirty/clean tracking state
+             * @param {String} z 
+             * @param {String} id 
+             */
+            removeObjectFromWorkspace: function (z, id) {
+                if (!addedDirtyObjects.has(id)) {
+                    tabDeletedNodesMap[z].add(id)
+                } else {
+                    addedDirtyObjects.delete(id)
+                }
+                api.markNodeDirty(z, id, false)
+            },
             hasNode: function(id) {
                 return nodes.hasOwnProperty(id);
             },
@@ -280,152 +361,54 @@ RED.nodes = (function() {
                 n.z = newZ;
                 api.addNode(n)
             },
-            moveNodesForwards: function(nodes) {
-                var result = [];
+            /**
+             * @param {array} nodes 
+             * @param {boolean} direction true:forwards false:back
+             * @param {boolean} singleStep true:single-step false:all-the-way
+             */
+            changeDepth: function(nodes, direction, singleStep) {
                 if (!Array.isArray(nodes)) {
                     nodes = [nodes]
                 }
-                // Can only do this for nodes on the same tab.
-                // Use nodes[0] to get the z
-                var tabNodes = tabMap[nodes[0].z];
-                var toMove = new Set(nodes.filter(function(n) { return n.type !== "group" && n.type !== "subflow" }));
-                var moved = new Set();
-                for (var i = tabNodes.length-1; i >= 0; i--) {
-                    if (toMove.size === 0) {
-                        break;
-                    }
-                    var n = tabNodes[i];
-                    if (toMove.has(n)) {
-                        // This is a node to move.
-                        if (i < tabNodes.length-1 && !moved.has(tabNodes[i+1])) {
-                            // Remove from current position
-                            tabNodes.splice(i,1);
-                            // Add it back one position higher
-                            tabNodes.splice(i+1,0,n);
-                            n._reordered = true;
-                            result.push(n);
-                        }
-                        toMove.delete(n);
-                        moved.add(n);
+                let result = []
+                const tabNodes = tabMap[nodes[0].z];
+                const toMove = new Set(nodes.filter(function(n) { return n.type !== "group" && n.type !== "subflow" }));
+                if (toMove.size > 0) {
+                    result = result.concat(changeCollectionDepth(tabNodes, toMove, direction, singleStep))
+                    if (result.length > 0) {
+                        RED.events.emit('nodes:reorder',{
+                            z: nodes[0].z,
+                            nodes: result
+                        });
                     }
                 }
-                if (result.length > 0) {
-                    RED.events.emit('nodes:reorder',{
-                        z: nodes[0].z,
-                        nodes: result
-                    });
+
+                const groupNodes = groupsByZ[nodes[0].z] || []
+                const groupsToMove = new Set(nodes.filter(function(n) { return n.type === 'group'}))
+                if (groupsToMove.size > 0) {
+                    const groupResult = changeCollectionDepth(groupNodes, groupsToMove, direction, singleStep)
+                    if (groupResult.length > 0) {
+                        result = result.concat(groupResult)
+                        RED.events.emit('groups:reorder',{
+                            z: nodes[0].z,
+                            nodes: groupResult
+                        });
+                    }
                 }
-                return result;
+                RED.view.redraw(true)
+                return result
+            },
+            moveNodesForwards: function(nodes) {
+                return api.changeDepth(nodes, true, true)
             },
             moveNodesBackwards: function(nodes) {
-                var result = [];
-                if (!Array.isArray(nodes)) {
-                    nodes = [nodes]
-                }
-                // Can only do this for nodes on the same tab.
-                // Use nodes[0] to get the z
-                var tabNodes = tabMap[nodes[0].z];
-                var toMove = new Set(nodes.filter(function(n) { return n.type !== "group" && n.type !== "subflow" }));
-                var moved = new Set();
-                for (var i = 0; i < tabNodes.length; i++) {
-                    if (toMove.size === 0) {
-                        break;
-                    }
-                    var n = tabNodes[i];
-                    if (toMove.has(n)) {
-                        // This is a node to move.
-                        if (i > 0 && !moved.has(tabNodes[i-1])) {
-                            // Remove from current position
-                            tabNodes.splice(i,1);
-                            // Add it back one position lower
-                            tabNodes.splice(i-1,0,n);
-                            n._reordered = true;
-                            result.push(n);
-                        }
-                        toMove.delete(n);
-                        moved.add(n);
-                    }
-                }
-                if (result.length > 0) {
-                    RED.events.emit('nodes:reorder',{
-                        z: nodes[0].z,
-                        nodes: result
-                    });
-                }
-                return result;
+                return api.changeDepth(nodes, false, true)
             },
             moveNodesToFront: function(nodes) {
-                var result = [];
-                if (!Array.isArray(nodes)) {
-                    nodes = [nodes]
-                }
-                // Can only do this for nodes on the same tab.
-                // Use nodes[0] to get the z
-                var tabNodes = tabMap[nodes[0].z];
-                var toMove = new Set(nodes.filter(function(n) { return n.type !== "group" && n.type !== "subflow" }));
-                var target = tabNodes.length-1;
-                for (var i = tabNodes.length-1; i >= 0; i--) {
-                    if (toMove.size === 0) {
-                        break;
-                    }
-                    var n = tabNodes[i];
-                    if (toMove.has(n)) {
-                        // This is a node to move.
-                        if (i < target) {
-                            // Remove from current position
-                            tabNodes.splice(i,1);
-                            tabNodes.splice(target,0,n);
-                            n._reordered = true;
-                            result.push(n);
-                        }
-                        target--;
-                        toMove.delete(n);
-                    }
-                }
-                if (result.length > 0) {
-                    RED.events.emit('nodes:reorder',{
-                        z: nodes[0].z,
-                        nodes: result
-                    });
-                }
-                return result;
+                return api.changeDepth(nodes, true, false)
             },
             moveNodesToBack: function(nodes) {
-                var result = [];
-                if (!Array.isArray(nodes)) {
-                    nodes = [nodes]
-                }
-                // Can only do this for nodes on the same tab.
-                // Use nodes[0] to get the z
-                var tabNodes = tabMap[nodes[0].z];
-                var toMove = new Set(nodes.filter(function(n) { return n.type !== "group" && n.type !== "subflow" }));
-                var target = 0;
-                for (var i = 0; i < tabNodes.length; i++) {
-                    if (toMove.size === 0) {
-                        break;
-                    }
-                    var n = tabNodes[i];
-                    if (toMove.has(n)) {
-                        // This is a node to move.
-                        if (i > target) {
-                            // Remove from current position
-                            tabNodes.splice(i,1);
-                            // Add it back one position lower
-                            tabNodes.splice(target,0,n);
-                            n._reordered = true;
-                            result.push(n);
-                        }
-                        target++;
-                        toMove.delete(n);
-                    }
-                }
-                if (result.length > 0) {
-                    RED.events.emit('nodes:reorder',{
-                        z: nodes[0].z,
-                        nodes: result
-                    });
-                }
-                return result;
+                return api.changeDepth(nodes, false, false)
             },
             getNodes: function(z) {
                 return tabMap[z];
@@ -433,6 +416,33 @@ RED.nodes = (function() {
             clear: function() {
                 nodes = {};
                 tabMap = {};
+                tabDirtyMap = {};
+                tabDeletedNodesMap = {};
+                addedDirtyObjects = new Set();
+            },
+            /**
+             * Clear all internal state on what is dirty.
+             */
+            clearState: function () {
+                // Called when a deploy happens, we can forget about added/remove
+                // items as they have now been deployed.
+                addedDirtyObjects = new Set()
+                const flowsToCheck = new Set()
+                for (const [z, set] of Object.entries(tabDeletedNodesMap)) {
+                    if (set.size > 0) {
+                        set.clear()
+                        flowsToCheck.add(z)
+                    }
+                }
+                for (const [z, set] of Object.entries(tabDirtyMap)) {
+                    if (set.size > 0) {
+                        set.clear()
+                        flowsToCheck.add(z)
+                    }
+                }
+                for (const z of flowsToCheck) {
+                    api.checkTabState(z)
+                }
             },
             eachNode: function(cb) {
                 var nodeList,i,j;
@@ -498,7 +508,7 @@ RED.nodes = (function() {
                 return result;
             },
             getNodeOrder: function(z) {
-                return tabMap[z].map(function(n) { return n.id })
+                return (groupsByZ[z] || []).concat(tabMap[z]).map(n => n.id)
             },
             setNodeOrder: function(z, order) {
                 var orderMap = {};
@@ -510,6 +520,41 @@ RED.nodes = (function() {
                     B._reordered = true;
                     return orderMap[A.id] - orderMap[B.id];
                 })
+                if (groupsByZ[z]) {
+                    groupsByZ[z].sort(function(A,B) {
+                        return orderMap[A.id] - orderMap[B.id];
+                    })
+                }
+            },
+            /**
+             * Update our records if an object is dirty or not
+             * @param {String} z tab id
+             * @param {String} id object id
+             * @param {Boolean} dirty whether the object is dirty or not
+             */
+            markNodeDirty: function(z, id, dirty) {
+                if (tabDirtyMap[z]) {
+                    if (dirty) {
+                        tabDirtyMap[z].add(id)
+                    } else {
+                        tabDirtyMap[z].delete(id)
+                    }
+                    api.checkTabState(z)
+                }
+            },
+            /**
+             * Check if a tab should update its contentsChange flag
+             * @param {String} z tab id
+             */
+            checkTabState: function (z) {
+                const ws = workspaces[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);
+                    }
+                }
             }
         }
         return api;
@@ -575,15 +620,53 @@ RED.nodes = (function() {
         }
     }
 
+    const nodeProxyHandler = {
+        get(node, prop) {
+            if (prop === '__isProxy__') {
+                return true
+            } else if (prop == '__node__') {
+                return node
+            }
+            return node[prop]
+        },
+        set(node, prop, value) {
+            if (node.z && (RED.nodes.workspace(node.z)?.locked || RED.nodes.subflow(node.z)?.locked)) {
+                if (
+                    node._def.defaults[prop] ||
+                    prop === 'z' ||
+                    prop === 'l' ||
+                    prop === 'd' ||
+                    (prop === 'changed' && (!!node.changed) !== (!!value)) || // jshint ignore:line
+                    ((prop === 'x' || prop === 'y') && !node.resize && node.type !== 'group')
+                ) {
+                    throw new Error(`Cannot modified property '${prop}' of locked object '${node.type}:${node.id}'`)
+                }
+            }
+            if (node.z && (prop === 'changed' || prop === 'moved')) {
+                setTimeout(() => {
+                    allNodes.markNodeDirty(node.z, node.id, node.changed || node.moved)
+                }, 0)
+            }
+            node[prop] = value;
+            return true
+        }
+    }
 
     function addNode(n) {
+        let newNode
+        if (!n.__isProxy__) {
+            newNode = new Proxy(n, nodeProxyHandler)
+        } else {
+            newNode = n
+        }
+
         if (n.type.indexOf("subflow") !== 0) {
             n["_"] = n._def._;
         } else {
             var subflowId = n.type.substring(8);
             var sf = RED.nodes.subflow(subflowId);
             if (sf) {
-                sf.instances.push(sf);
+                sf.instances.push(newNode);
             }
             n["_"] = RED._;
         }
@@ -600,12 +683,13 @@ RED.nodes = (function() {
                 });
                 n.i = nextId+1;
             }
-            allNodes.addNode(n);
+            allNodes.addNode(newNode);
             if (!nodeLinks[n.id]) {
                 nodeLinks[n.id] = {in:[],out:[]};
             }
         }
-        RED.events.emit('nodes:add',n);
+        RED.events.emit('nodes:add',newNode);
+        return newNode
     }
     function addLink(l) {
         if (nodeLinks[l.source.id]) {
@@ -632,10 +716,16 @@ RED.nodes = (function() {
         }
         if (l.source.z === l.target.z && linkTabMap[l.source.z]) {
             linkTabMap[l.source.z].push(l);
+            allNodes.addObjectToWorkspace(l.source.z, getLinkId(l), true)
         }
         RED.events.emit("links:add",l);
     }
 
+    function getLinkId(link) {
+        return link.source.id + ':' + link.sourcePort + ':' + link.target.id
+    }
+
+
     function getNode(id) {
         if (id in configNodes) {
             return configNodes[id];
@@ -830,6 +920,7 @@ RED.nodes = (function() {
                 if (index !== -1) {
                     linkTabMap[l.source.z].splice(index,1)
                 }
+                allNodes.removeObjectFromWorkspace(l.source.z, getLinkId(l))
             }
         }
         RED.events.emit("links:remove",l);
@@ -868,14 +959,7 @@ RED.nodes = (function() {
             var node;
 
             if (allNodes.hasTab(id)) {
-                removedNodes = allNodes.getNodes(id).filter(n => {
-                    if (n.type === 'junction') {
-                        removedJunctions.push(n)
-                        return false
-                    } else {
-                        return true
-                    }
-                })
+                removedNodes = allNodes.getNodes(id).slice()
             }
             for (i in configNodes) {
                 if (configNodes.hasOwnProperty(i)) {
@@ -885,6 +969,7 @@ RED.nodes = (function() {
                     }
                 }
             }
+            removedJunctions = RED.nodes.junctions(id)
 
             for (i=0;i<removedNodes.length;i++) {
                 var result = removeNode(removedNodes[i].id);
@@ -1005,6 +1090,11 @@ RED.nodes = (function() {
         return false;
     }
 
+    function getDownstreamNodes(node) {
+        const downstreamLinks = nodeLinks[node.id].out
+        const downstreamNodes = new Set(downstreamLinks.map(l => l.target))
+        return Array.from(downstreamNodes)
+    }
     function getAllDownstreamNodes(node) {
         return getAllFlowNodes(node,'down').filter(function(n) { return n !== node });
     }
@@ -1052,6 +1142,9 @@ RED.nodes = (function() {
         node.type = n.type;
         for (var d in n._def.defaults) {
             if (n._def.defaults.hasOwnProperty(d)) {
+                if (d === 'locked' && !n.locked) {
+                    continue
+                }
                 node[d] = n[d];
             }
         }
@@ -1331,7 +1424,6 @@ RED.nodes = (function() {
         } else {
             nodeSet = [sf];
         }
-        console.log(nodeSet);
         return createExportableNodeSet(nodeSet);
     }
     /**
@@ -1367,6 +1459,10 @@ RED.nodes = (function() {
                             exportedConfigNodes[n.id] = true;
                         }
                     });
+
+                    subflowSet = subflowSet.concat(RED.nodes.junctions(subflowId))
+                    subflowSet = subflowSet.concat(RED.nodes.groups(subflowId))
+
                     var exportableSubflow = createExportableNodeSet(subflowSet, exportedIds, exportedSubflows, exportedConfigNodes);
                     nns = exportableSubflow.concat(nns);
                 }
@@ -1654,21 +1750,21 @@ RED.nodes = (function() {
      * Options:
      *  - generateIds - whether to replace all node ids
      *  - addFlow - whether to import nodes to a new tab
-     *  - importToCurrent
+     *  - markChanged - whether to set changed=true on all newly imported objects
+     *  - reimport - if node has a .z property, dont overwrite it
+     *               Only applicible when `generateIds` is false
      *  - importMap - how to resolve any conflicts.
      *       - id:import - import as-is
      *       - id:copy - import with new id
      *       - id:replace - import over the top of existing
      */
     function importNodes(newNodesObj,options) { // createNewIds,createMissingWorkspace) {
-        options = options || {
-            generateIds: false,
-            addFlow: false,
-        }
-        options.importMap = options.importMap || {};
-
-        var createNewIds = options.generateIds;
-        var createMissingWorkspace = options.addFlow;
+        const defOpts = { generateIds: false, addFlow: false, markChanged: false, reimport: false, importMap: {} }
+        options = Object.assign({}, defOpts, options)
+        options.importMap = options.importMap || {}
+        const createNewIds = options.generateIds;
+        const reimport = (!createNewIds && !!options.reimport)
+        const createMissingWorkspace = options.addFlow;
         var i;
         var n;
         var newNodes;
@@ -1689,7 +1785,7 @@ RED.nodes = (function() {
             newNodes = newNodesObj;
         }
 
-        if (!$.isArray(newNodes)) {
+        if (!Array.isArray(newNodes)) {
             newNodes = [newNodes];
         }
 
@@ -1969,7 +2065,8 @@ RED.nodes = (function() {
                         }
                     }
                 } else {
-                    if (n.z && !workspace_map[n.z] && !subflow_map[n.z]) {
+                    const keepNodesCurrentZ = reimport && n.z && (RED.workspaces.contains(n.z) || RED.nodes.subflow(n.z))
+                    if (!keepNodesCurrentZ && n.z && !workspace_map[n.z] && !subflow_map[n.z]) {
                         n.z = activeWorkspace;
                     }
                 }
@@ -1986,6 +2083,9 @@ RED.nodes = (function() {
                     if (!n.z) {
                         delete configNode.z;
                     }
+                    if (options.markChanged) {
+                        configNode.changed = true
+                    }
                     if (n.hasOwnProperty('d')) {
                         configNode.d = n.d;
                     }
@@ -2048,6 +2148,9 @@ RED.nodes = (function() {
                     if (n.hasOwnProperty('g')) {
                         node.g = n.g;
                     }
+                    if (options.markChanged) {
+                        node.changed = true
+                    }
                     if (createNewIds || options.importMap[n.id] === "copy") {
                         if (subflow_denylist[n.z]) {
                             continue;
@@ -2070,7 +2173,8 @@ RED.nodes = (function() {
                         node.id = getID();
                     } else {
                         node.id = n.id;
-                        if (node.z == null || (!workspace_map[node.z] && !subflow_map[node.z])) {
+                        const keepNodesCurrentZ = reimport && node.z && (RED.workspaces.contains(node.z) || RED.nodes.subflow(node.z))
+                        if (!keepNodesCurrentZ && (node.z == null || (!workspace_map[node.z] && !subflow_map[node.z]))) {
                             if (createMissingWorkspace) {
                                 if (missingWorkspace === null) {
                                     missingWorkspace = RED.workspaces.add(null,true);
@@ -2267,7 +2371,7 @@ RED.nodes = (function() {
             // get added
             if (activeSubflow && /^link /.test(n.type) && n.links) {
                 n.links = n.links.filter(function(id) {
-                    var otherNode = RED.nodes.node(id);
+                    const otherNode = node_map[id] || RED.nodes.node(id);
                     return (otherNode && otherNode.z === activeWorkspace)
                 });
             }
@@ -2317,19 +2421,6 @@ RED.nodes = (function() {
             if (n.g && !new_group_set.has(n.g)) {
                 delete n.g;
             }
-            n.nodes = n.nodes.map(function(id) {
-                return node_map[id];
-            })
-            // Just in case the group references a node that doesn't exist for some reason
-            n.nodes = n.nodes.filter(function(v) {
-                if (v) {
-                    // Repair any nodes that have forgotten they are in this group
-                    if (v.g !== n.id) {
-                        v.g = n.id;
-                    }
-                }
-                return !!v
-            });
             if (!n.g) {
                 groupDepthMap[n.id] = 0;
             }
@@ -2352,21 +2443,22 @@ RED.nodes = (function() {
             return groupDepthMap[A.id] - groupDepthMap[B.id];
         });
         for (i=0;i<new_groups.length;i++) {
-            n = new_groups[i];
-            addGroup(n);
+            new_groups[i] = addGroup(new_groups[i]);
+            node_map[new_groups[i].id] = new_groups[i]
         }
 
         for (i=0;i<new_junctions.length;i++) {
-            var junction = new_junctions[i];
-            addJunction(junction);
+            new_junctions[i] = addJunction(new_junctions[i]);
+            node_map[new_junctions[i].id] = new_junctions[i]
         }
 
 
         // Now the nodes have been fully updated, add them.
         for (i=0;i<new_nodes.length;i++) {
-            var node = new_nodes[i];
-            addNode(node);
+            new_nodes[i] = addNode(new_nodes[i])
+            node_map[new_nodes[i].id] = new_nodes[i]
         }
+
         // Finally validate them all.
         // This has to be done after everything is added so that any checks for
         // dependent config nodes will pass
@@ -2374,6 +2466,39 @@ RED.nodes = (function() {
             var node = new_nodes[i];
             RED.editor.validateNode(node);
         }
+        const lookupNode = (id) => {
+            const mappedNode = node_map[id]
+            if (!mappedNode) {
+                return null
+            }
+            if (mappedNode.__isProxy__) {
+                return mappedNode
+            } else {
+                return node_map[mappedNode.id]
+            }
+        }
+        // Update groups to reference proxy node objects
+        for (i=0;i<new_groups.length;i++) {
+            n = new_groups[i];
+            // bypass the proxy in case the flow is locked
+            n.__node__.nodes = n.nodes.map(lookupNode)
+            // Just in case the group references a node that doesn't exist for some reason
+            n.__node__.nodes = n.nodes.filter(function(v) {
+                if (v) {
+                    // Repair any nodes that have forgotten they are in this group
+                    if (v.g !== n.id) {
+                        v.g = n.id;
+                    }
+                }
+                return !!v
+            });
+        }
+
+        // Update links to use proxy node objects
+        for (i=0;i<new_links.length;i++) {
+            new_links[i].source = lookupNode(new_links[i].source.id) || new_links[i].source
+            new_links[i].target = lookupNode(new_links[i].target.id) || new_links[i].target
+        }
 
         RED.workspaces.refresh();
 
@@ -2502,11 +2627,17 @@ RED.nodes = (function() {
         junctions = {};
         junctionsByZ = {};
 
+        var workspaceIds = Object.keys(workspaces);
+        // Ensure all workspaces are unlocked so we don't get any edit-protection
+        // preventing removal
+        workspaceIds.forEach(function(id) {
+            workspaces[id].locked = false
+        });
+
         var subflowIds = Object.keys(subflows);
         subflowIds.forEach(function(id) {
             RED.subflow.removeSubflow(id)
         });
-        var workspaceIds = Object.keys(workspaces);
         workspaceIds.forEach(function(id) {
             RED.workspaces.remove(workspaces[id]);
         });
@@ -2527,10 +2658,15 @@ RED.nodes = (function() {
     }
 
     function addGroup(group) {
+        if (!group.__isProxy__) {
+            group = new Proxy(group, nodeProxyHandler)
+        }
         groupsByZ[group.z] = groupsByZ[group.z] || [];
         groupsByZ[group.z].push(group);
         groups[group.id] = group;
+        allNodes.addObjectToWorkspace(group.z, group.id, group.changed || group.moved)
         RED.events.emit("groups:add",group);
+        return group
     }
     function removeGroup(group) {
         var i = groupsByZ[group.z].indexOf(group);
@@ -2545,19 +2681,28 @@ RED.nodes = (function() {
             }
         }
         RED.group.markDirty(group);
-
+        allNodes.removeObjectFromWorkspace(group.z, group.id)
         delete groups[group.id];
         RED.events.emit("groups:remove",group);
     }
+    function getGroupOrder(z) {
+        const groups = groupsByZ[z]
+        return groups.map(g => g.id)
+    }
 
     function addJunction(junction) {
+        if (!junction.__isProxy__) {
+            junction = new Proxy(junction, nodeProxyHandler)
+        }
         junctionsByZ[junction.z] = junctionsByZ[junction.z] || []
         junctionsByZ[junction.z].push(junction)
         junctions[junction.id] = junction;
         if (!nodeLinks[junction.id]) {
             nodeLinks[junction.id] = {in:[],out:[]};
         }
+        allNodes.addObjectToWorkspace(junction.z, junction.id, junction.changed || junction.moved)
         RED.events.emit("junctions:add", junction)
+        return junction
     }
     function removeJunction(junction) {
         var i = junctionsByZ[junction.z].indexOf(junction)
@@ -2567,6 +2712,7 @@ RED.nodes = (function() {
         }
         delete junctions[junction.id]
         delete nodeLinks[junction.id];
+        allNodes.removeObjectFromWorkspace(junction.z, junction.id)
         RED.events.emit("junctions:remove", junction)
 
         var removedLinks = links.filter(function(l) { return (l.source === junction) || (l.target === junction); });
@@ -2742,6 +2888,7 @@ RED.nodes = (function() {
                     }
                 });
 
+                const nodeGroupMap = {}
                 var replaceNodeIds = Object.keys(replaceNodes);
                 if (replaceNodeIds.length > 0) {
                     var reimportList = [];
@@ -2752,6 +2899,12 @@ RED.nodes = (function() {
                         } else {
                             allNodes.removeNode(n);
                         }
+                        if (n.g) {
+                            // reimporting a node *without* including its group object
+                            // will cause the g property to be cleared. Cache it
+                            // here so we can restore it
+                            nodeGroupMap[n.id] = n.g
+                        }
                         reimportList.push(convertNode(n));
                         RED.events.emit('nodes:remove',n);
                     });
@@ -2769,10 +2922,22 @@ RED.nodes = (function() {
                     // Force the redraw to be synchronous so the view updates
                     // *now* and removes the unknown node
                     RED.view.redraw(true, true);
-                    var result = importNodes(reimportList,{generateIds:false});
+                    var result = importNodes(reimportList,{generateIds:false, reimport: true});
                     var newNodeMap = {};
                     result.nodes.forEach(function(n) {
                         newNodeMap[n.id] = n;
+                        if (nodeGroupMap[n.id]) {
+                            // This node is in a group - need to substitute the
+                            // node reference inside the group
+                            n.g = nodeGroupMap[n.id]
+                            const group = RED.nodes.group(n.g)
+                            if (group) {
+                                var index = group.nodes.findIndex(gn => gn.id === n.id)
+                                if (index > -1) {
+                                    group.nodes[index] = n
+                                }
+                            }
+                        }
                     });
                     RED.nodes.eachLink(function(l) {
                         if (newNodeMap.hasOwnProperty(l.source.id)) {
@@ -2785,6 +2950,9 @@ RED.nodes = (function() {
                     RED.view.redraw(true);
                 }
             });
+            RED.events.on('deploy', function () {
+                allNodes.clearState()
+            })
         },
         registry:registry,
         setNodeList: registry.setNodeList,
@@ -2833,7 +3001,7 @@ RED.nodes = (function() {
         },
         addWorkspace: addWorkspace,
         removeWorkspace: removeWorkspace,
-        getWorkspaceOrder: function() { return workspacesOrder },
+        getWorkspaceOrder: function() { return [...workspacesOrder] },
         setWorkspaceOrder: function(order) { workspacesOrder = order; },
         workspace: getWorkspace,
 
@@ -2887,6 +3055,20 @@ RED.nodes = (function() {
                 }
             }
         },
+        eachGroup: function(cb) {
+            for (var group of Object.values(groups)) {
+                if (cb(group) === false) {
+                    break
+                }
+            }
+        },
+        eachJunction: function(cb) {
+            for (var junction of Object.values(junctions)) {
+                if (cb(junction) === false) {
+                    break
+                }
+            }
+        },
 
         node: getNode,
 
@@ -2909,6 +3091,7 @@ RED.nodes = (function() {
         getAllFlowNodes: getAllFlowNodes,
         getAllUpstreamNodes: getAllUpstreamNodes,
         getAllDownstreamNodes: getAllDownstreamNodes,
+        getDownstreamNodes: getDownstreamNodes,
         getNodeIslands: getNodeIslands,
         createExportableNodeSet: createExportableNodeSet,
         createCompleteNodeSet: createCompleteNodeSet,

packages/node_modules/@node-red/editor-client/src/js/red.js

@@ -249,8 +249,35 @@ var RED = (function() {
                         RED.nodes.import(nodes.flows);
                         RED.nodes.dirty(false);
                         RED.view.redraw(true);
-                        if (/^#flow\/.+$/.test(currentHash)) {
-                            RED.workspaces.show(currentHash.substring(6),true);
+                        if (/^#(flow|node|group)\/.+$/.test(currentHash)) {
+                            const hashParts = currentHash.split('/')
+                            const showEditDialog = hashParts.length > 2 && hashParts[2] === 'edit'
+                            if (hashParts[0] === '#flow') {
+                                RED.workspaces.show(hashParts[1], true);
+                                if (showEditDialog) {
+                                    RED.workspaces.edit()
+                                }
+                            } else if (hashParts[0] === '#node') {
+                                const nodeToShow = RED.nodes.node(hashParts[1])
+                                if (nodeToShow) {
+                                    setTimeout(() => {
+                                        RED.view.reveal(nodeToShow.id)
+                                        window.location.hash = currentHash
+                                        if (showEditDialog) {
+                                            RED.editor.edit(nodeToShow)
+                                        }
+                                    }, 50)
+                                }
+                            } else if (hashParts[0] === '#group') {
+                                const nodeToShow = RED.nodes.group(hashParts[1])
+                                if (nodeToShow) {
+                                    RED.view.reveal(nodeToShow.id)
+                                    window.location.hash = currentHash
+                                    if (showEditDialog) {
+                                        RED.editor.editGroup(nodeToShow)
+                                    }
+                                }
+                            }
                         }
                         if (RED.workspaces.count() > 0) {
                             const hiddenTabs = JSON.parse(RED.settings.getLocal("hiddenTabs")||"{}");
@@ -297,6 +324,10 @@ var RED = (function() {
                 // handled below
                 return;
             }
+            if (notificationId === "flows-run-state") {
+                // handled in editor-client/src/js/runtime.js
+                return;
+            }
             if (notificationId === "project-update") {
                 loader.start(RED._("event.loadingProject"), 0);
                 RED.nodes.clear();
@@ -317,6 +348,8 @@ var RED = (function() {
                         loader.end()
                         RED.notify($("<p>").text(message));
                         RED.sidebar.info.refresh()
+                        RED.menu.setDisabled('menu-item-projects-open',false);
+                        RED.menu.setDisabled('menu-item-projects-settings',false);
                     });
                 });
                 return;
@@ -332,7 +365,6 @@ var RED = (function() {
                     id: notificationId
                 }
                 if (notificationId === "runtime-state") {
-                    RED.events.emit("runtime-state",msg);
                     if (msg.error === "safe-mode") {
                         options.buttons = [
                             {
@@ -473,9 +505,9 @@ var RED = (function() {
             } else if (persistentNotifications.hasOwnProperty(notificationId)) {
                 persistentNotifications[notificationId].close();
                 delete persistentNotifications[notificationId];
-                if (notificationId === 'runtime-state') {
-                    RED.events.emit("runtime-state",msg);
-                }
+            }
+            if (notificationId === 'runtime-state') {
+                RED.events.emit("runtime-state",msg);
             }
         });
         RED.comms.subscribe("status/#",function(topic,msg) {
@@ -638,11 +670,6 @@ var RED = (function() {
         ]});
 
         menuOptions.push({id:"menu-item-arrange-menu", label:RED._("menu.label.arrange"), options: [
-            {id: "menu-item-view-tools-move-to-back", label:RED._("menu.label.moveToBack"), disabled: true, onselect: "core:move-selection-to-back"},
-            {id: "menu-item-view-tools-move-to-front", label:RED._("menu.label.moveToFront"), disabled: true, onselect: "core:move-selection-to-front"},
-            {id: "menu-item-view-tools-move-backwards", label:RED._("menu.label.moveBackwards"), disabled: true, onselect: "core:move-selection-backwards"},
-            {id: "menu-item-view-tools-move-forwards", label:RED._("menu.label.moveForwards"), disabled: true, onselect: "core:move-selection-forwards"},
-            null,
             {id: "menu-item-view-tools-align-left", label:RED._("menu.label.alignLeft"), disabled: true, onselect: "core:align-selection-to-left"},
             {id: "menu-item-view-tools-align-center", label:RED._("menu.label.alignCenter"), disabled: true, onselect: "core:align-selection-to-center"},
             {id: "menu-item-view-tools-align-right", label:RED._("menu.label.alignRight"), disabled: true, onselect: "core:align-selection-to-right"},
@@ -652,7 +679,12 @@ var RED = (function() {
             {id: "menu-item-view-tools-align-bottom", label:RED._("menu.label.alignBottom"), disabled: true, onselect: "core:align-selection-to-bottom"},
             null,
             {id: "menu-item-view-tools-distribute-horizontally", label:RED._("menu.label.distributeHorizontally"), disabled: true, onselect: "core:distribute-selection-horizontally"},
-            {id: "menu-item-view-tools-distribute-veritcally", label:RED._("menu.label.distributeVertically"), disabled: true, onselect: "core:distribute-selection-vertically"}
+            {id: "menu-item-view-tools-distribute-veritcally", label:RED._("menu.label.distributeVertically"), disabled: true, onselect: "core:distribute-selection-vertically"},
+            null,
+            {id: "menu-item-view-tools-move-to-back", label:RED._("menu.label.moveToBack"), disabled: true, onselect: "core:move-selection-to-back"},
+            {id: "menu-item-view-tools-move-to-front", label:RED._("menu.label.moveToFront"), disabled: true, onselect: "core:move-selection-to-front"},
+            {id: "menu-item-view-tools-move-backwards", label:RED._("menu.label.moveBackwards"), disabled: true, onselect: "core:move-selection-backwards"},
+            {id: "menu-item-view-tools-move-forwards", label:RED._("menu.label.moveForwards"), disabled: true, onselect: "core:move-selection-forwards"}
         ]});
 
         menuOptions.push(null);
@@ -745,8 +777,10 @@ var RED = (function() {
         RED.deploy.init(RED.settings.theme("deployButton",null));
 
         RED.keyboard.init(buildMainMenu);
+        RED.envVar.init();
 
         RED.nodes.init();
+        RED.runtime.init()
         RED.comms.connect();
 
         $("#red-ui-main-container").show();
@@ -762,7 +796,7 @@ var RED = (function() {
         $('<div id="red-ui-header-shade" class="hide"></div>').appendTo(header);
         $('<div id="red-ui-main-container" class="red-ui-sidebar-closed hide">'+
             '<div id="red-ui-workspace"></div>'+
-            '<div id="red-ui-editor-stack"></div>'+
+            '<div id="red-ui-editor-stack" tabindex="-1"></div>'+
             '<div id="red-ui-palette"></div>'+
             '<div id="red-ui-sidebar"></div>'+
             '<div id="red-ui-sidebar-separator"></div>'+

packages/node_modules/@node-red/editor-client/src/js/runtime.js

@@ -0,0 +1,36 @@
+RED.runtime = (function() {
+    let state = ""
+    let settings = { ui: false, enabled: false };
+    const STOPPED = "stop"
+    const STARTED = "start"
+    const SAFE = "safe"
+
+    return {
+        init: function() {
+            // refresh the current runtime status from server
+            settings = Object.assign({}, settings, RED.settings.runtimeState);
+            RED.events.on("runtime-state", function(msg) {
+                if (msg.state) {
+                    const currentState = state
+                    state = msg.state
+                    $(".red-ui-flow-node-button").toggleClass("red-ui-flow-node-button-stopped", state !== STARTED)
+                    if(settings.enabled === true && settings.ui === true) {
+                        RED.menu.setVisible("deploymenu-item-runtime-stop", state === STARTED)
+                        RED.menu.setVisible("deploymenu-item-runtime-start", state !== STARTED)
+                    }
+                    // Do not notify the user about this event if:
+                    // - This is the very first event we've received after loading the editor (currentState = '')
+                    // - The state matches what we already thought was the case (state === currentState)
+                    // - The event was triggered by a deploy (msg.deploy === true)
+                    // - The event is a safe mode event - that gets notified separately
+                    if (currentState !== '' && state !== currentState && !msg.deploy && state !== SAFE) {
+                        RED.notify(RED._("notification.state.flows"+(state === STOPPED?'Stopped':'Started'), msg), "success")
+                    }
+                }
+            });
+        },
+        get started() {
+            return state === STARTED
+        }
+    }
+})()

packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js

@@ -423,11 +423,10 @@ RED.clipboard = (function() {
         }
     }
 
-    function showImportNodes(mode) {
+    function showImportNodes(library = 'clipboard') {
         if (disabled) {
             return;
         }
-        mode = mode || "clipboard";
 
         dialogContainer.empty();
         dialogContainer.append($(importNodesDialog));
@@ -504,7 +503,7 @@ RED.clipboard = (function() {
         $("#red-ui-clipboard-dialog-import-text").on("keyup", validateImport);
         $("#red-ui-clipboard-dialog-import-text").on('paste',function() { setTimeout(validateImport,10)});
 
-        if (RED.workspaces.active() === 0) {
+        if (RED.workspaces.active() === 0 || RED.workspaces.isLocked()) {
             $("#red-ui-clipboard-dialog-import-opt-current").addClass('disabled').removeClass("selected");
             $("#red-ui-clipboard-dialog-import-opt-new").addClass("selected");
         } else {
@@ -533,8 +532,8 @@ RED.clipboard = (function() {
             $("#red-ui-clipboard-dialog-import-file-upload").trigger("click");
         })
 
-        tabs.activateTab("red-ui-clipboard-dialog-import-tab-"+mode);
-        if (mode === 'clipboard') {
+        tabs.activateTab("red-ui-clipboard-dialog-import-tab-"+library);
+        if (library === 'clipboard') {
             setTimeout(function() {
                 $("#red-ui-clipboard-dialog-import-text").trigger("focus");
             },100)
@@ -558,13 +557,16 @@ RED.clipboard = (function() {
         });
     }
 
-    function showExportNodes(mode) {
+    /**
+     * Show the export dialog
+     * @params library which export destination to show
+     * @params mode whether to default to 'auto' (default) or 'flow'
+     **/
+    function showExportNodes(library = 'clipboard', mode = 'auto' ) {
         if (disabled) {
             return;
         }
 
-        mode = mode || "clipboard";
-
         dialogContainer.empty();
         dialogContainer.append($(exportNodesDialog));
 
@@ -654,7 +656,12 @@ RED.clipboard = (function() {
         $("#red-ui-clipboard-dialog-tab-library-name").val("flows.json").select();
 
         dialogContainer.i18n();
+        
         var format = RED.settings.flowFilePretty ? "red-ui-clipboard-dialog-export-fmt-full" : "red-ui-clipboard-dialog-export-fmt-mini";
+        const userFormat = RED.settings.get("editor.dialog.export.pretty")
+        if (userFormat === false || userFormat === true) {
+            format = userFormat ? "red-ui-clipboard-dialog-export-fmt-full" : "red-ui-clipboard-dialog-export-fmt-mini";
+        }
 
         $("#red-ui-clipboard-dialog-export-fmt-group > a").on("click", function(evt) {
             evt.preventDefault();
@@ -670,7 +677,8 @@ RED.clipboard = (function() {
                 var nodes = JSON.parse(flow);
 
                 format = $(this).attr('id');
-                if (format === 'red-ui-clipboard-dialog-export-fmt-full') {
+                const pretty = format === "red-ui-clipboard-dialog-export-fmt-full";
+                if (pretty) {
                     flow = JSON.stringify(nodes,null,4);
                 } else {
                     flow = JSON.stringify(nodes);
@@ -679,6 +687,7 @@ RED.clipboard = (function() {
                 setTimeout(function() { $("#red-ui-clipboard-dialog-export-text").scrollTop(0); },50);
 
                 $("#red-ui-clipboard-dialog-export-text").trigger("focus");
+                RED.settings.set("editor.dialog.export.pretty", pretty)
             }
         });
 
@@ -766,12 +775,15 @@ RED.clipboard = (function() {
                 }
             }
         }
+        if (mode === 'flow' && !$("#red-ui-clipboard-dialog-export-rng-flow").hasClass('disabled')) {
+            $("#red-ui-clipboard-dialog-export-rng-flow").trigger("click");
+        }
         if (format === "red-ui-clipboard-dialog-export-fmt-full") {
             $("#red-ui-clipboard-dialog-export-fmt-full").trigger("click");
         } else {
             $("#red-ui-clipboard-dialog-export-fmt-mini").trigger("click");
         }
-        tabs.activateTab("red-ui-clipboard-dialog-export-tab-"+mode);
+        tabs.activateTab("red-ui-clipboard-dialog-export-tab-"+library);
 
         var dialogHeight = 400;
         var winHeight = $(window).height();
@@ -1266,15 +1278,17 @@ RED.clipboard = (function() {
             RED.keyboard.add("#red-ui-drop-target", "escape" ,hideDropTarget);
 
             $('#red-ui-workspace-chart').on("dragenter",function(event) {
-                if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 ||
-                     $.inArray("Files",event.originalEvent.dataTransfer.types) != -1) {
+                if (!RED.workspaces.isLocked() && (
+                    $.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 ||
+                     $.inArray("Files",event.originalEvent.dataTransfer.types) != -1)) {
                     $("#red-ui-drop-target").css({display:'table'}).focus();
                 }
             });
 
             $('#red-ui-drop-target').on("dragover",function(event) {
                 if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 ||
-                     $.inArray("Files",event.originalEvent.dataTransfer.types) != -1) {
+                     $.inArray("Files",event.originalEvent.dataTransfer.types) != -1 ||
+                        RED.workspaces.isLocked()) {
                     event.preventDefault();
                 }
             })
@@ -1282,27 +1296,29 @@ RED.clipboard = (function() {
                 hideDropTarget();
             })
             .on("drop",function(event) {
-                try {
-                    if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1) {
-                        var data = event.originalEvent.dataTransfer.getData("text/plain");
-                        data = data.substring(data.indexOf('['),data.lastIndexOf(']')+1);
-                        importNodes(data);
-                    } else if ($.inArray("Files",event.originalEvent.dataTransfer.types) != -1) {
-                        var files = event.originalEvent.dataTransfer.files;
-                        if (files.length === 1) {
-                            var file = files[0];
-                            var reader = new FileReader();
-                            reader.onload = (function(theFile) {
-                                return function(e) {
-                                    importNodes(e.target.result);
-                                };
-                            })(file);
-                            reader.readAsText(file);
+                if (!RED.workspaces.isLocked()) {
+                    try {
+                        if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1) {
+                            var data = event.originalEvent.dataTransfer.getData("text/plain");
+                            data = data.substring(data.indexOf('['),data.lastIndexOf(']')+1);
+                            importNodes(data);
+                        } else if ($.inArray("Files",event.originalEvent.dataTransfer.types) != -1) {
+                            var files = event.originalEvent.dataTransfer.files;
+                            if (files.length === 1) {
+                                var file = files[0];
+                                var reader = new FileReader();
+                                reader.onload = (function(theFile) {
+                                    return function(e) {
+                                        importNodes(e.target.result);
+                                    };
+                                })(file);
+                                reader.readAsText(file);
+                            }
                         }
+                    } catch(err) {
+                        // Ensure any errors throw above doesn't stop the drop target from
+                        // being hidden.
                     }
-                } catch(err) {
-                    // Ensure any errors throw above doesn't stop the drop target from
-                    // being hidden.
                 }
                 hideDropTarget();
                 event.preventDefault();

packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js

@@ -160,7 +160,7 @@
                 this.element.css("maxHeight",null);
             }
             if (this.options.height !== 'auto') {
-                this.uiContainer.css("overflow-y","scroll");
+                this.uiContainer.css("overflow-y","auto");
                 if (!isNaN(this.options.height)) {
                     this.uiHeight = this.options.height;
                 }
@@ -417,6 +417,9 @@
             } else {
                 return null;
             }
+        },
+        cancel: function() {
+            this.element.sortable("cancel");
         }
     });
 })(jQuery);

packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js

@@ -94,8 +94,8 @@ RED.menu = (function() {
 
             var link = $(linkContent).appendTo(item);
             opt.link = link;
-            if (typeof opt.onselect === 'string') {
-                var shortcut = RED.keyboard.getShortcut(opt.onselect);
+            if (typeof opt.onselect === 'string' || opt.shortcut) {
+                var shortcut = opt.shortcut || RED.keyboard.getShortcut(opt.onselect);
                 if (shortcut && shortcut.key) {
                     opt.shortcutSpan = $('<span class="red-ui-popover-key">'+RED.keyboard.formatKey(shortcut.key, true)+'</span>').appendTo(link.find(".red-ui-menu-label"));
                 }
@@ -167,6 +167,9 @@ RED.menu = (function() {
             if (opt.disabled) {
                 item.addClass("disabled");
             }
+            if (opt.visible === false) {
+                item.addClass("hide");
+            }
         }
 
 
@@ -303,6 +306,14 @@ RED.menu = (function() {
         }
     }
 
+    function setVisible(id,state) {
+        if (!state) {
+            $("#"+id).parent().addClass("hide");
+        } else {
+            $("#"+id).parent().removeClass("hide");
+        }
+    }
+
     function addItem(id,opt) {
         var item = createMenuItem(opt);
         if (opt !== null && opt.group) {
@@ -359,6 +370,7 @@ RED.menu = (function() {
         isSelected: isSelected,
         toggleSelected: toggleSelected,
         setDisabled: setDisabled,
+        setVisible: setVisible,
         addItem: addItem,
         removeItem: removeItem,
         setAction: setAction,

packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js

@@ -141,7 +141,29 @@ RED.tabs = (function() {
             })
         }
 
-
+        if (options.contextmenu) {
+            wrapper.on('contextmenu', function(evt) {
+                let clickedTab
+                let target = evt.target
+                while(target.nodeName !== 'A' && target.nodeName !== 'UL' && target.nodeName !== 'BODY') {
+                    target = target.parentNode
+                }
+                if (target.nodeName === 'A') {
+                    const href = target.getAttribute('href')
+                    if (href) {
+                        clickedTab = tabs[href.slice(1)]
+                    }
+                }
+                evt.preventDefault()
+                evt.stopPropagation()
+                RED.contextMenu.show({
+                    x:evt.clientX-5,
+                    y:evt.clientY-5,
+                    options: options.contextmenu(clickedTab)
+                })
+                return false
+            })
+        }
 
         var scrollLeft;
         var scrollRight;
@@ -161,7 +183,7 @@ RED.tabs = (function() {
                     // Assume this is wheel event which might not trigger
                     // the scroll event, so do things manually
                     var sl = scrollContainer.scrollLeft();
-                    sl -= evt.originalEvent.deltaY;
+                    sl += evt.originalEvent.deltaY;
                     scrollContainer.scrollLeft(sl);
                 }
             })
@@ -807,23 +829,22 @@ RED.tabs = (function() {
                         event.preventDefault();
                         removeTab(tab.id);
                     });
-                    RED.popover.tooltip(closeLink,RED._("workspace.hideFlow"));
-                }
-                if (tab.hideable) {
-                    li.addClass("red-ui-tabs-closeable")
-                    var closeLink = $("<a/>",{href:"#",class:"red-ui-tab-close red-ui-tab-hide"}).appendTo(li);
-                    closeLink.append('<i class="fa fa-eye" />');
-                    closeLink.append('<i class="fa fa-eye-slash" />');
-                    closeLink.on("click",function(event) {
-                        event.preventDefault();
-                        hideTab(tab.id);
-                    });
-                    RED.popover.tooltip(closeLink,RED._("workspace.hideFlow"));
+                    RED.popover.tooltip(closeLink,RED._("workspace.closeFlow"));
                 }
+                // if (tab.hideable) {
+                //     li.addClass("red-ui-tabs-closeable")
+                //     var closeLink = $("<a/>",{href:"#",class:"red-ui-tab-close red-ui-tab-hide"}).appendTo(li);
+                //     closeLink.append('<i class="fa fa-eye" />');
+                //     closeLink.append('<i class="fa fa-eye-slash" />');
+                //     closeLink.on("click",function(event) {
+                //         event.preventDefault();
+                //         hideTab(tab.id);
+                //     });
+                //     RED.popover.tooltip(closeLink,RED._("workspace.hideFlow"));
+                // }
 
                 var badges = $('<span class="red-ui-tabs-badges"></span>').appendTo(li);
                 if (options.onselect) {
-                    $('<i class="red-ui-tabs-badge-changed fa fa-circle"></i>').appendTo(badges);
                     $('<i class="red-ui-tabs-badge-selected fa fa-check-circle"></i>').appendTo(badges);
                 }
 
@@ -938,6 +959,9 @@ RED.tabs = (function() {
             activeIndex: function() {
                 return ul.find("li.active").index()
             },
+            getTabIndex: function (id) {
+                return ul.find("a[href='#"+id+"']").parent().index()
+            },
             contains: function(id) {
                 return ul.find("a[href='#"+id+"']").length > 0;
             },

packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js

@@ -90,10 +90,10 @@
                         optEl.append(generateSpans(srcMatch));
                         optEl.appendTo(element);
                     }
-                    matches.push({ 
-                        value: optVal, 
-                        label: element, 
-                        i: (valMatch.found ? valMatch.index : srcMatch.index) 
+                    matches.push({
+                        value: optVal,
+                        label: element,
+                        i: (valMatch.found ? valMatch.index : srcMatch.index)
                     });
                 }
             })
@@ -146,7 +146,7 @@
         { value: "reset", source: ["delay","trigger","join","rbe"] },
         { value: "responseCookies", source: ["http request"] },
         { value: "responseTopic", source: ["mqtt"] },
-        { value: "responseURL", source: ["http request"] },
+        { value: "responseUrl", source: ["http request"] },
         { value: "restartTimeout", source: ["join"] },
         { value: "retain", source: ["mqtt"] },
         { value: "schema", source: ["json"] },
@@ -501,7 +501,7 @@
                 this.options.types = this.options.types||Object.keys(allOptions);
             }
 
-            this.selectTrigger = $('<button class="red-ui-typedInput-type-select" tabindex="0"></button>').prependTo(this.uiSelect);
+            this.selectTrigger = $('<button type="button" class="red-ui-typedInput-type-select" tabindex="0"></button>').prependTo(this.uiSelect);
             $('<i class="red-ui-typedInput-icon fa fa-caret-down"></i>').toggle(this.options.types.length > 1).appendTo(this.selectTrigger);
 
             this.selectLabel = $('<span class="red-ui-typedInput-type-label"></span>').appendTo(this.selectTrigger);
@@ -570,7 +570,7 @@
             })
 
             // explicitly set optionSelectTrigger display to inline-block otherwise jQ sets it to 'inline'
-            this.optionSelectTrigger = $('<button tabindex="0" class="red-ui-typedInput-option-trigger" style="display:inline-block"><span class="red-ui-typedInput-option-caret"><i class="red-ui-typedInput-icon fa fa-caret-down"></i></span></button>').appendTo(this.uiSelect);
+            this.optionSelectTrigger = $('<button type="button" tabindex="0" class="red-ui-typedInput-option-trigger" style="display:inline-block"><span class="red-ui-typedInput-option-caret"><i class="red-ui-typedInput-icon fa fa-caret-down"></i></span></button>').appendTo(this.uiSelect);
             this.optionSelectLabel = $('<span class="red-ui-typedInput-option-label"></span>').prependTo(this.optionSelectTrigger);
             // RED.popover.tooltip(this.optionSelectLabel,function() {
             //     return that.optionValue;
@@ -591,7 +591,7 @@
                 that.uiSelect.addClass('red-ui-typedInput-focus');
             });
 
-            this.optionExpandButton = $('<button tabindex="0" class="red-ui-typedInput-option-expand" style="display:inline-block"></button>').appendTo(this.uiSelect);
+            this.optionExpandButton = $('<button type="button" tabindex="0" class="red-ui-typedInput-option-expand" style="display:inline-block"></button>').appendTo(this.uiSelect);
             this.optionExpandButtonIcon = $('<i class="red-ui-typedInput-icon fa fa-ellipsis-h"></i>').appendTo(this.optionExpandButton);
 
             this.type(this.typeField.val() || this.options.default||this.typeList[0].value);

packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js

@@ -1,25 +1,6 @@
-RED.contextMenu = (function() {
+RED.contextMenu = (function () {
 
     let menu;
-    function createMenu() {
-        // menu = RED.popover.menu({
-        //     options: [
-        //         {
-        //             label: 'delete selection',
-        //             onselect: function() {
-        //                 RED.actions.invoke('core:delete-selection')
-        //                 RED.view.focus()
-        //             }
-        //         },
-        //         { label: 'world' }
-        //     ],
-        //     width: 200,
-        // })
-
-
-
-
-    }
 
     function disposeMenu() {
         $(document).off("mousedown.red-ui-workspace-context-menu");
@@ -32,105 +13,193 @@ RED.contextMenu = (function() {
         if (menu) {
             menu.remove()
         }
+        let menuItems = []
+        if (options.options) {
+            menuItems = options.options
+        } else if (options.type === 'workspace') {
+            const selection = RED.view.selection()
+            const noSelection = !selection || Object.keys(selection).length === 0
+            const hasSelection = (selection.nodes && selection.nodes.length > 0);
+            const hasMultipleSelection = hasSelection && selection.nodes.length > 1;
+            const virtulLinks = (selection.links && selection.links.filter(e => !!e.link)) || [];
+            const wireLinks = (selection.links && selection.links.filter(e => !e.link)) || [];
+            const hasLinks = wireLinks.length > 0;
+            const isSingleLink = !hasSelection && hasLinks && wireLinks.length === 1
+            const isMultipleLinks = !hasSelection && hasLinks && wireLinks.length > 1
+            const canDelete = hasSelection || hasLinks
+            const isGroup = hasSelection && selection.nodes.length === 1 && selection.nodes[0].type === 'group'
+            const canEdit = !RED.workspaces.isLocked()
+            const canRemoveFromGroup = hasSelection && !!selection.nodes[0].g
+            const isAllGroups = hasSelection && selection.nodes.filter(n => n.type !== 'group').length === 0
+            const hasGroup = hasSelection && selection.nodes.filter(n => n.type === 'group' ).length > 0
+            const offset = $("#red-ui-workspace-chart").offset()
 
-        const selection = RED.view.selection()
-        const hasSelection = (selection.nodes && selection.nodes.length > 0);
-        const hasMultipleSelection = hasSelection && selection.nodes.length > 1;
-        const hasLinks = selection.links && selection.links.length > 0;
-        const isSingleLink = !hasSelection && hasLinks && selection.links.length === 1
-        const isMultipleLinks = !hasSelection && hasLinks && selection.links.length > 1
-        const canDelete = hasSelection || hasLinks
-        const isGroup = hasSelection && selection.nodes.length === 1 && selection.nodes[0].type === 'group'
-
-        const canRemoveFromGroup = hasSelection && !!selection.nodes[0].g
-
-
-        const menuItems = [
-            { onselect: 'core:show-action-list', onpostselect: function() {} },
-            {
-                label: 'Insert',
-                options: [
-                    {
-                        label: 'Node',
-                        onselect: function() {
-                            RED.view.showQuickAddDialog({
-                                position: [ options.x - offset.left, options.y - offset.top ],
-                                touchTrigger: true,
-                                splice: isSingleLink?selection.links[0]:undefined,
-                                // spliceMultiple: isMultipleLinks
-                            })
-                        }
-                    },
-                    {
-                        label: 'Junction',
-                        onselect: 'core:split-wires-with-junctions',
-                        disabled: hasSelection || !hasLinks
-                    },
-                    {
-                        label: 'Link Nodes',
-                        onselect: 'core:split-wire-with-link-nodes',
-                        disabled: hasSelection || !hasLinks
-                    }
-                ]
-
-
+            let addX = options.x - offset.left + $("#red-ui-workspace-chart").scrollLeft()
+            let addY = options.y - offset.top + $("#red-ui-workspace-chart").scrollTop()
 
+            if (RED.view.snapGrid) {
+                const gridSize = RED.view.gridSize()
+                addX = gridSize * Math.floor(addX / gridSize)
+                addY = gridSize * Math.floor(addY / gridSize)
             }
-        ]
-        // menuItems.push(
-        //     {
-        //         label: (isSingleLink || isMultipleLinks)?'Insert into wire...':'Add node...',
-        //         onselect: function() {
-        //             RED.view.showQuickAddDialog({
-        //                 position: [ options.x - offset.left, options.y - offset.top ],
-        //                 touchTrigger: true,
-        //                 splice: isSingleLink?selection.links[0]:undefined,
-        //                 spliceMultiple: isMultipleLinks
-        //             })
-        //         }
-        //     },
-        // )
-        // if (hasLinks && !hasSelection) {
-        //     menuItems.push({ onselect: 'core:split-wires-with-junctions', label: 'Insert junction'})
-        // }
-        menuItems.push(
-            null,
-            { onselect: 'core:undo', disabled: RED.history.list().length === 0 },
-            { onselect: 'core:redo', disabled: RED.history.listRedo().length === 0 },
-            null,
-            { onselect: 'core:cut-selection-to-internal-clipboard', label: RED._("keyboard.cutNode"), disabled: !hasSelection},
-            { onselect: 'core:copy-selection-to-internal-clipboard', label: RED._("keyboard.copyNode"), disabled: !hasSelection },
-            { onselect: 'core:paste-from-internal-clipboard', label: RED._("keyboard.pasteNode"), disabled: !RED.view.clipboard() },
-            { onselect: 'core:delete-selection', disabled: !canDelete },
-            { onselect: 'core:show-export-dialog', label: RED._("menu.label.export") },
-            { onselect: 'core:select-all-nodes' }
-        )
 
-        if (hasSelection) {
+            menuItems.push(
+                { onselect: 'core:show-action-list', onpostselect: function () { } }
+            )
+
+            const insertOptions = []
+            menuItems.push({ label: RED._("contextMenu.insert"), options: insertOptions })
+            insertOptions.push(
+                {
+                    label: RED._("contextMenu.node"),
+                    onselect: function () {
+                        RED.view.showQuickAddDialog({
+                            position: [addX, addY],
+                            touchTrigger: true,
+                            splice: isSingleLink ? selection.links[0] : undefined,
+                            // spliceMultiple: isMultipleLinks
+                        })
+                    },
+                    disabled: !canEdit
+                },
+                (hasLinks) ? { // has least 1 wire selected
+                    label: RED._("contextMenu.junction"),
+                    onselect: 'core:split-wires-with-junctions',
+                    disabled: !canEdit || !hasLinks
+                } : {
+                    label: RED._("contextMenu.junction"),
+                    onselect: function () {
+                        const nn = {
+                            _def: { defaults: {} },
+                            type: 'junction',
+                            z: RED.workspaces.active(),
+                            id: RED.nodes.id(),
+                            x: addX,
+                            y: addY,
+                            w: 0, h: 0,
+                            outputs: 1,
+                            inputs: 1,
+                            dirty: true,
+                            moved: true
+                        }
+                        const junction = RED.nodes.addJunction(nn);
+                        const historyEvent = {
+                            dirty: RED.nodes.dirty(),
+                            t: 'add',
+                            junctions: [junction]
+                        }
+                        RED.history.push(historyEvent);
+                        RED.nodes.dirty(true);
+                        RED.view.select({nodes: [junction] });
+                        RED.view.redraw(true)
+                    },
+                    disabled: !canEdit
+                },
+                {
+                    label: RED._("contextMenu.linkNodes"),
+                    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') }
+            )
+            if (hasSelection && canEdit) {
+                const nodeOptions = []
+                if (!hasMultipleSelection && !isGroup) {
+                    nodeOptions.push(
+                        { onselect: 'core:show-node-help' },
+                        null
+                    )
+                }
+                nodeOptions.push(
+                    { onselect: 'core:enable-selected-nodes' },
+                    { onselect: 'core:disable-selected-nodes' },
+                    null,
+                    { onselect: 'core:show-selected-node-labels' },
+                    { onselect: 'core:hide-selected-node-labels' }
+                )
+                menuItems.push({
+                    label: RED._('sidebar.info.node'),
+                    options: nodeOptions
+                })
+                menuItems.push({
+                    label: RED._('sidebar.info.group'),
+                    options: [
+                        { onselect: 'core:group-selection' },
+                        { onselect: 'core:ungroup-selection', disabled: !hasGroup },
+                    ]
+                })
+                if (hasGroup) {
+                    menuItems[menuItems.length - 1].options.push(
+                        { onselect: 'core:merge-selection-to-group', label: RED._("menu.label.groupMergeSelection") }
+                    )
+
+                }
+                if (canRemoveFromGroup) {
+                    menuItems[menuItems.length - 1].options.push(
+                        { onselect: 'core:remove-selection-from-group', label: RED._("menu.label.groupRemoveSelection") }
+                    )
+                }
+                menuItems[menuItems.length - 1].options.push(
+                    null,
+                    { onselect: 'core:copy-group-style', disabled: !hasGroup },
+                    { onselect: 'core:paste-group-style', disabled: !hasGroup}
+                )
+            }
+            if (canEdit && hasMultipleSelection) {
+                menuItems.push({
+                    label: RED._('menu.label.arrange'),
+                    options: [
+                        { label:RED._("menu.label.alignLeft"), onselect: "core:align-selection-to-left"},
+                        { label:RED._("menu.label.alignCenter"), onselect: "core:align-selection-to-center"},
+                        { label:RED._("menu.label.alignRight"), onselect: "core:align-selection-to-right"},
+                        null,
+                        { label:RED._("menu.label.alignTop"), onselect: "core:align-selection-to-top"},
+                        { label:RED._("menu.label.alignMiddle"), onselect: "core:align-selection-to-middle"},
+                        { label:RED._("menu.label.alignBottom"), onselect: "core:align-selection-to-bottom"},
+                        null,
+                        { label:RED._("menu.label.distributeHorizontally"), onselect: "core:distribute-selection-horizontally"},
+                        { label:RED._("menu.label.distributeVertically"), onselect: "core:distribute-selection-vertically"}
+                    ]
+                })
+            }
+
+
             menuItems.push(
                 null,
-                isGroup ?
-                  { onselect: 'core:ungroup-selection', disabled: !isGroup }
-                : { onselect: 'core:group-selection', disabled: !hasSelection }
+                { onselect: 'core:undo', disabled: RED.history.list().length === 0 },
+                { onselect: 'core:redo', disabled: RED.history.listRedo().length === 0 },
+                null,
+                { onselect: 'core:cut-selection-to-internal-clipboard', label: RED._("keyboard.cutNode"), disabled: !canEdit || !hasSelection },
+                { onselect: 'core:copy-selection-to-internal-clipboard', label: RED._("keyboard.copyNode"), disabled: !hasSelection },
+                { onselect: 'core:paste-from-internal-clipboard', label: RED._("keyboard.pasteNode"), disabled: !canEdit || !RED.view.clipboard() },
+                { onselect: 'core:delete-selection', 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' },
             )
-            if (canRemoveFromGroup) {
-                menuItems.push({ onselect: 'core:remove-selection-from-group', label: RED._("menu.label.groupRemoveSelection") })
-            }
-
         }
-        const offset = $("#red-ui-workspace-chart").offset()
+
+        var direction = "right";
+        var MENU_WIDTH = 500; // can not use menu width here
+        if ((options.x -$(document).scrollLeft()) >
+            ($(window).width() -MENU_WIDTH)) {
+            direction = "left";
+        }
+
         menu = RED.menu.init({
-            direction: 'right',
+            direction: direction,
             onpreselect: function() {
                 disposeMenu()
             },
-            onpostselect: function() {
+            onpostselect: function () {
                 RED.view.focus()
             },
             options: menuItems
         });
 
-        menu.attr("id","red-ui-workspace-context-menu");
+        menu.attr("id", "red-ui-workspace-context-menu");
         menu.css({
             position: "absolute"
         })
@@ -141,35 +210,37 @@ RED.contextMenu = (function() {
         var top = options.y
         var left = options.x
 
-        if (top+menu.height()-$(document).scrollTop() > $(window).height()) {
-            top -= (top+menu.height())-$(window).height() + 22;
+        if (top + menu.height() - $(document).scrollTop() > $(window).height()) {
+            top -= (top + menu.height()) - $(window).height() + 22;
         }
-        if (left+menu.width()-$(document).scrollLeft() > $(window).width()) {
-            left -= (left+menu.width())-$(window).width() + 18;
+        if (left + menu.width() - $(document).scrollLeft() > $(window).width()) {
+            left -= (left + menu.width()) - $(window).width() + 18;
         }
         menu.css({
-            top: top+"px",
-            left: left+"px"
+            top: top + "px",
+            left: left + "px"
         })
         $(".red-ui-menu.red-ui-menu-dropdown").hide();
-        $(document).on("mousedown.red-ui-workspace-context-menu", function(evt) {
+        $(document).on("mousedown.red-ui-workspace-context-menu", function (evt) {
             if (menu && menu[0].contains(evt.target)) {
                 return
             }
             disposeMenu()
         });
         menu.show();
-
-        // menu.show({
-        //     target: $('#red-ui-main-container'),
-        //     x: options.x,
-        //     y: options.y
-        // })
-
+        // set focus to first item so that pressing escape key closes the menu
+        $("#red-ui-workspace-context-menu :first(ul) > a").trigger("focus")
 
     }
-
+    // Allow escape key hook and other editor events to close context menu
+    RED.keyboard.add("red-ui-workspace-context-menu", "escape", function () { RED.contextMenu.hide() })
+    RED.events.on("editor:open", function () { RED.contextMenu.hide() });
+    RED.events.on("search:open", function () { RED.contextMenu.hide() });
+    RED.events.on("type-search:open", function () { RED.contextMenu.hide() });
+    RED.events.on("actionList:open", function () { RED.contextMenu.hide() });
+    RED.events.on("view:selection-changed", function () { RED.contextMenu.hide() });
     return {
-        show: show
+        show: show,
+        hide: disposeMenu
     }
 })()

packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js

@@ -63,16 +63,18 @@ RED.deploy = (function() {
               '</a>'+
               '<a id="red-ui-header-button-deploy-options" class="red-ui-deploy-button" href="#"><i class="fa fa-caret-down"></i></a>'+
               '</span></li>').prependTo(".red-ui-header-toolbar");
-              RED.menu.init({id:"red-ui-header-button-deploy-options",
-                  options: [
-                      {id:"deploymenu-item-full",toggle:"deploy-type",icon:"red/images/deploy-full.svg",label:RED._("deploy.full"),sublabel:RED._("deploy.fullDesc"),selected: true, onselect:function(s) { if(s){changeDeploymentType("full")}}},
-                      {id:"deploymenu-item-flow",toggle:"deploy-type",icon:"red/images/deploy-flows.svg",label:RED._("deploy.modifiedFlows"),sublabel:RED._("deploy.modifiedFlowsDesc"), onselect:function(s) {if(s){changeDeploymentType("flows")}}},
-                      {id:"deploymenu-item-node",toggle:"deploy-type",icon:"red/images/deploy-nodes.svg",label:RED._("deploy.modifiedNodes"),sublabel:RED._("deploy.modifiedNodesDesc"),onselect:function(s) { if(s){changeDeploymentType("nodes")}}},
-                      null,
-                      {id:"deploymenu-item-reload", icon:"red/images/deploy-reload.svg",label:RED._("deploy.restartFlows"),sublabel:RED._("deploy.restartFlowsDesc"),onselect:"core:restart-flows"},
-
-                  ]
-              });
+            const mainMenuItems = [
+                    {id:"deploymenu-item-full",toggle:"deploy-type",icon:"red/images/deploy-full.svg",label:RED._("deploy.full"),sublabel:RED._("deploy.fullDesc"),selected: true, onselect:function(s) { if(s){changeDeploymentType("full")}}},
+                    {id:"deploymenu-item-flow",toggle:"deploy-type",icon:"red/images/deploy-flows.svg",label:RED._("deploy.modifiedFlows"),sublabel:RED._("deploy.modifiedFlowsDesc"), onselect:function(s) {if(s){changeDeploymentType("flows")}}},
+                    {id:"deploymenu-item-node",toggle:"deploy-type",icon:"red/images/deploy-nodes.svg",label:RED._("deploy.modifiedNodes"),sublabel:RED._("deploy.modifiedNodesDesc"),onselect:function(s) { if(s){changeDeploymentType("nodes")}}},
+                    null
+            ]
+            if (RED.settings.runtimeState && RED.settings.runtimeState.ui === true) {
+                mainMenuItems.push({id:"deploymenu-item-runtime-start", icon:"red/images/start.svg",label:RED._("deploy.startFlows"),sublabel:RED._("deploy.startFlowsDesc"),onselect:"core:start-flows", visible:false})
+                mainMenuItems.push({id:"deploymenu-item-runtime-stop", icon:"red/images/stop.svg",label:RED._("deploy.stopFlows"),sublabel:RED._("deploy.stopFlowsDesc"),onselect:"core:stop-flows", visible:false})
+            }
+            mainMenuItems.push({id:"deploymenu-item-reload", icon:"red/images/deploy-reload.svg",label:RED._("deploy.restartFlows"),sublabel:RED._("deploy.restartFlowsDesc"),onselect:"core:restart-flows"})
+            RED.menu.init({id:"red-ui-header-button-deploy-options", options: mainMenuItems });
         } else if (type == "simple") {
             var label = options.label || RED._("deploy.deploy");
             var icon = 'red/images/deploy-full-o.svg';
@@ -100,6 +102,10 @@ RED.deploy = (function() {
 
         RED.actions.add("core:deploy-flows",save);
         if (type === "default") {
+            if (RED.settings.runtimeState && RED.settings.runtimeState.ui === true) {
+                RED.actions.add("core:stop-flows",function() { stopStartFlows("stop") });
+                RED.actions.add("core:start-flows",function() { stopStartFlows("start") });
+            }
             RED.actions.add("core:restart-flows",restart);
             RED.actions.add("core:set-deploy-type-to-full",function() { RED.menu.setSelected("deploymenu-item-full",true);});
             RED.actions.add("core:set-deploy-type-to-modified-flows",function() { RED.menu.setSelected("deploymenu-item-flow",true); });
@@ -270,18 +276,73 @@ RED.deploy = (function() {
     function sanitize(html) {
         return html.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")
     }
-    function restart() {
-        var startTime = Date.now();
-        $(".red-ui-deploy-button-content").css('opacity',0);
-        $(".red-ui-deploy-button-spinner").show();
-        var deployWasEnabled = !$("#red-ui-header-button-deploy").hasClass("disabled");
-        $("#red-ui-header-button-deploy").addClass("disabled");
-        deployInflight = true;
+
+    function shadeShow() {
         $("#red-ui-header-shade").show();
         $("#red-ui-editor-shade").show();
         $("#red-ui-palette-shade").show();
         $("#red-ui-sidebar-shade").show();
-
+    }
+    function shadeHide() {
+        $("#red-ui-header-shade").hide();
+        $("#red-ui-editor-shade").hide();
+        $("#red-ui-palette-shade").hide();
+        $("#red-ui-sidebar-shade").hide();
+    }
+    function deployButtonSetBusy(){
+        $(".red-ui-deploy-button-content").css('opacity',0);
+        $(".red-ui-deploy-button-spinner").show();
+        $("#red-ui-header-button-deploy").addClass("disabled");
+    }
+    function deployButtonClearBusy(){
+        $(".red-ui-deploy-button-content").css('opacity',1);
+        $(".red-ui-deploy-button-spinner").hide();
+    }
+    function stopStartFlows(state) {
+        const startTime = Date.now()
+        const deployWasEnabled = !$("#red-ui-header-button-deploy").hasClass("disabled")
+        deployInflight = true
+        deployButtonSetBusy()
+        shadeShow()
+        $.ajax({
+            url:"flows/state",
+            type: "POST",
+            data: {state: state}
+        }).done(function(data,textStatus,xhr) {
+            if (deployWasEnabled) {
+                $("#red-ui-header-button-deploy").removeClass("disabled")
+            }
+        }).fail(function(xhr,textStatus,err) {
+            if (deployWasEnabled) {
+                $("#red-ui-header-button-deploy").removeClass("disabled")
+            }
+            if (xhr.status === 401) {
+                RED.notify(RED._("notification.error", { message: RED._("user.notAuthorized") }), "error")
+            } else if (xhr.responseText) {
+                const errorDetail = { message: err ? (err + "") : "" }
+                try {
+                    errorDetail.message = JSON.parse(xhr.responseText).message
+                } finally {
+                    errorDetail.message = errorDetail.message || xhr.responseText
+                }
+                RED.notify(RED._("notification.error", errorDetail), "error")
+            } else {
+                RED.notify(RED._("notification.error", { message: RED._("deploy.errors.noResponse") }), "error")
+            }
+        }).always(function() {
+            const delta = Math.max(0, 300 - (Date.now() - startTime))
+            setTimeout(function () {
+                deployButtonClearBusy()
+                shadeHide()
+                deployInflight = false
+            }, delta);
+        });
+    }
+    function restart() {
+        var startTime = Date.now();
+        var deployWasEnabled = !$("#red-ui-header-button-deploy").hasClass("disabled");
+        deployInflight = true;
+        deployButtonSetBusy();
         $.ajax({
             url:"flows",
             type: "POST",
@@ -307,15 +368,10 @@ RED.deploy = (function() {
                 RED.notify(RED._("deploy.deployFailed",{message:RED._("deploy.errors.noResponse")}),"error");
             }
         }).always(function() {
-            deployInflight = false;
             var delta = Math.max(0,300-(Date.now()-startTime));
             setTimeout(function() {
-                $(".red-ui-deploy-button-content").css('opacity',1);
-                $(".red-ui-deploy-button-spinner").hide();
-                $("#red-ui-header-shade").hide();
-                $("#red-ui-editor-shade").hide();
-                $("#red-ui-palette-shade").hide();
-                $("#red-ui-sidebar-shade").hide();
+                deployButtonClearBusy();
+                deployInflight = false;
             },delta);
         });
     }
@@ -450,21 +506,14 @@ RED.deploy = (function() {
         const nns = RED.nodes.createCompleteNodeSet();
         const startTime = Date.now();
 
-        $(".red-ui-deploy-button-content").css('opacity', 0);
-        $(".red-ui-deploy-button-spinner").show();
-        $("#red-ui-header-button-deploy").addClass("disabled");
-
+        deployButtonSetBusy();
         const data = { flows: nns };
-
         if (!force) {
             data.rev = RED.nodes.version();
         }
 
         deployInflight = true;
-        $("#red-ui-header-shade").show();
-        $("#red-ui-editor-shade").show();
-        $("#red-ui-palette-shade").show();
-        $("#red-ui-sidebar-shade").show();
+        shadeShow();
         $.ajax({
             url: "flows",
             type: "POST",
@@ -508,7 +557,17 @@ RED.deploy = (function() {
             } else {
                 RED.notify('<p>' + RED._("deploy.successfulDeploy") + '</p>', "success");
             }
+            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)
+                }
+            }
             RED.nodes.eachNode(function (node) {
+                ensureUnlocked(node.z)
                 if (node.changed) {
                     node.dirty = true;
                     node.changed = false;
@@ -521,7 +580,32 @@ RED.deploy = (function() {
                     delete node.credentials;
                 }
             });
+            RED.nodes.eachGroup(function (node) {
+                ensureUnlocked(node.z)
+                if (node.changed) {
+                    node.dirty = true;
+                    node.changed = false;
+                }
+                if (node.moved) {
+                    node.dirty = true;
+                    node.moved = false;
+                }
+            })
+            RED.nodes.eachJunction(function (node) {
+                ensureUnlocked(node.z)
+                if (node.changed) {
+                    node.dirty = true;
+                    node.changed = false;
+                }
+                if (node.moved) {
+                    node.dirty = true;
+                    node.moved = false;
+                }
+            })
             RED.nodes.eachConfig(function (confNode) {
+                if (confNode.z) {
+                    ensureUnlocked(confNode.z)
+                }
                 confNode.changed = false;
                 if (confNode.credentials) {
                     delete confNode.credentials;
@@ -531,8 +615,16 @@ RED.deploy = (function() {
                 subflow.changed = false;
             });
             RED.nodes.eachWorkspace(function (ws) {
-                ws.changed = false;
+                if (ws.changed || ws.added) {
+                    ensureUnlocked(ws.z)
+                    ws.changed = false;
+                    delete ws.added
+                    RED.events.emit("flows:change", ws)
+                }
             });
+            flowsToLock.forEach(flow => {
+                flow.locked = true
+            })
             // Once deployed, cannot undo back to a clean state
             RED.history.markAllDirty();
             RED.view.redraw();
@@ -550,15 +642,11 @@ RED.deploy = (function() {
                 RED.notify(RED._("deploy.deployFailed", { message: RED._("deploy.errors.noResponse") }), "error");
             }
         }).always(function () {
-            deployInflight = false;
             const delta = Math.max(0, 300 - (Date.now() - startTime));
             setTimeout(function () {
-                $(".red-ui-deploy-button-content").css('opacity', 1);
-                $(".red-ui-deploy-button-spinner").hide();
-                $("#red-ui-header-shade").hide();
-                $("#red-ui-editor-shade").hide();
-                $("#red-ui-palette-shade").hide();
-                $("#red-ui-sidebar-shade").hide();
+                deployInflight = false;
+                deployButtonClearBusy()
+                shadeHide()
             }, delta);
         });
     }

packages/node_modules/@node-red/editor-client/src/js/ui/editor.js

@@ -238,6 +238,7 @@ RED.editor = (function() {
             var valid = validateNodeProperty(node, defaults, property,value);
             if (((typeof valid) === "string") || !valid) {
                 input.addClass("input-error");
+                input.next(".red-ui-typedInput-container").addClass("input-error");
                 if ((typeof valid) === "string") {
                     var tooltip = input.data("tooltip");
                     if (tooltip) {
@@ -250,6 +251,7 @@ RED.editor = (function() {
                 }
             } else {
                 input.removeClass("input-error");
+                input.next(".red-ui-typedInput-container").removeClass("input-error");
                 var tooltip = input.data("tooltip");
                 if (tooltip) {
                     input.data("tooltip", null);
@@ -858,6 +860,7 @@ RED.editor = (function() {
     function showEditDialog(node, defaultTab) {
         if (buildingEditDialog) { return }
         buildingEditDialog = true;
+        if (node.z && RED.workspaces.isLocked(node.z)) { return }
         var editing_node = node;
         var removeInfoEditorOnClose = false;
         var skipInfoRefreshOnClose = false;
@@ -1043,6 +1046,13 @@ RED.editor = (function() {
 
                 var trayFooterLeft = $('<div class="red-ui-tray-footer-left"></div>').appendTo(trayFooter)
 
+                var helpButton = $('<button type="button" class="red-ui-button"><i class="fa fa-book"></button>').on("click", function(evt) {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                    RED.sidebar.help.show(editing_node.type);
+                }).appendTo(trayFooterLeft);
+                RED.popover.tooltip(helpButton, RED._("sidebar.help.showHelp"));
+
                 $('<input id="node-input-node-disabled" type="checkbox">').prop("checked",!!node.d).appendTo(trayFooterLeft).toggleButton({
                     enabledIcon: "fa-circle-thin",
                     disabledIcon: "fa-ban",
@@ -1105,6 +1115,10 @@ RED.editor = (function() {
                 if (editing_node) {
                     RED.sidebar.info.refresh(editing_node);
                     RED.sidebar.help.show(editing_node.type, false);
+                    //ensure focused element is NOT body (for keyboard scope to operate correctly)
+                    if (document.activeElement.tagName === 'BODY') {
+                        $('#red-ui-editor-stack').trigger('focus')
+                    }
                 }
             }
         }
@@ -1142,6 +1156,8 @@ RED.editor = (function() {
         var editing_config_node = RED.nodes.node(id);
         var activeEditPanes = [];
 
+        if (editing_config_node && editing_config_node.z && RED.workspaces.isLocked(editing_config_node.z)) { return }
+
         var configNodeScope = ""; // default to global
         var activeSubflow = RED.nodes.subflow(RED.workspaces.active());
         if (activeSubflow) {
@@ -1184,6 +1200,13 @@ RED.editor = (function() {
 
                 var trayFooterLeft = $('<div class="red-ui-tray-footer-left"></div>').appendTo(trayFooter)
 
+                var helpButton = $('<button type="button" class="red-ui-button"><i class="fa fa-book"></button>').on("click", function(evt) {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                    RED.sidebar.help.show(editing_config_node.type);
+                }).appendTo(trayFooterLeft);
+                RED.popover.tooltip(helpButton, RED._("sidebar.help.showHelp"));
+
                 $('<input id="node-config-input-node-disabled" type="checkbox">').prop("checked",!!editing_config_node.d).appendTo(trayFooterLeft).toggleButton({
                     enabledIcon: "fa-circle-thin",
                     disabledIcon: "fa-ban",
@@ -1688,6 +1711,7 @@ RED.editor = (function() {
     function showEditGroupDialog(group, defaultTab) {
         if (buildingEditDialog) { return }
         buildingEditDialog = true;
+        if (group.z && RED.workspaces.isLocked(group.z)) { return }
         var editing_node = group;
         editStack.push(group);
         RED.view.state(RED.state.EDITING);
@@ -1847,11 +1871,15 @@ RED.editor = (function() {
                             workspace.disabled = disabled;
 
                             $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!workspace.disabled);
-                            if (workspace.id === RED.workspaces.active()) {
-                                $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!workspace.disabled);
-                            }
                         }
 
+                        var locked = $("#node-input-locked").prop("checked");
+                        if (workspace.locked !== locked) {
+                            editState.changes.locked = workspace.locked;
+                            editState.changed = true;
+                            workspace.locked = locked;
+                            $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-workspace-locked',!!workspace.locked);
+                        }
                         if (editState.changed) {
                             var historyEvent = {
                                 t: "edit",
@@ -1892,6 +1920,7 @@ RED.editor = (function() {
                 var trayBody = tray.find('.red-ui-tray-body');
                 trayBody.parent().css('overflow','hidden');
                 var trayFooterLeft = $('<div class="red-ui-tray-footer-left"></div>').appendTo(trayFooter)
+                var trayFooterRight = $('<div class="red-ui-tray-footer-right"></div>').appendTo(trayFooter)
 
                 var nodeEditPanes = [
                     'editor-tab-flow-properties',
@@ -1906,6 +1935,18 @@ RED.editor = (function() {
                     disabledIcon: "fa-ban",
                     invertState: true
                 })
+
+                if (!workspace.hasOwnProperty("locked")) {
+                    workspace.locked = false;
+                }
+                $('<input id="node-input-locked" type="checkbox">').prop("checked",workspace.locked).appendTo(trayFooterRight).toggleButton({
+                    enabledLabel: RED._("common.label.unlocked"),
+                    enabledIcon: "fa-unlock-alt",
+                    disabledLabel: RED._("common.label.locked"),
+                    disabledIcon: "fa-lock",
+                    invertState: true
+                })
+
                 prepareEditDialog(trayBody, nodeEditPanes, workspace, {}, "node-input", defaultTab, function(_activeEditPanes) {
                     activeEditPanes = _activeEditPanes;
                     trayBody.i18n();

packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editor.js

@@ -21,7 +21,7 @@
 
     const MONACO = "monaco";
     const ACE = "ace";
-    const defaultEditor = ACE;
+    const defaultEditor = MONACO;
     const DEFAULT_SETTINGS = { lib: defaultEditor, options: {} };
     var selectedCodeEditor = null;
     var initialised = false;
@@ -45,15 +45,18 @@
             selectedCodeEditor = RED.editor.codeEditor[defaultEditor];
             initialised = selectedCodeEditor.init();
         }
+
+        $('<div id="red-ui-image-drop-target"><div data-i18n="[append]workspace.dropImageHere"><i class="fa fa-download"></i><br></div></div>').appendTo('#red-ui-editor');
+        $("#red-ui-image-drop-target").hide();
     }
 
     function create(options) {
-        //TODO: (quandry - for consideration) 
+        //TODO: (quandry - for consideration)
         // Below, I had to create a hidden element if options.id || options.element is not in the DOM
-        // I have seen 1 node calling  `this.editor = RED.editor.createEditor()` with an 
+        // I have seen 1 node calling  `this.editor = RED.editor.createEditor()` with an
         // invalid (non existing html element selector) (e.g. node-red-contrib-components does this)
-        // This causes monaco to throw an error when attempting to hook up its events to the dom  & the rest of the 'oneditperapre' 
-        // code is thus skipped. 
+        // This causes monaco to throw an error when attempting to hook up its events to the dom  & the rest of the 'oneditperapre'
+        // code is thus skipped.
         // In ACE mode, creating an ACE editor (with an invalid ID) allows the editor to be created (but obviously there is no UI)
         // Because one (or more) contrib nodes have left this bad code in place, how would we handle this?
         // For compatibility, I have decided to create a hidden element so that at least an editor is created & errors do not occur.
@@ -64,6 +67,7 @@
             options = {};
         }
 
+        var editor = null;
         if (this.editor.type === MONACO) {
             // compatibility (see above note)
             if (!options.element && !options.id) {
@@ -74,12 +78,16 @@
                 console.warn("createEditor() options.element or options.id is not valid", options);
                 $("#dialog-form").append('<div id="' + options.id + '" style="display: none;" />');
             }
-            return this.editor.create(options);
+            editor = this.editor.create(options);
         } else {
-            return this.editor.create(options);//fallback to ACE
+            editor = this.editor.create(options);//fallback to ACE
         }
+        if (options.mode === "ace/mode/markdown") {
+            RED.editor.customEditTypes['_markdown'].postInit(editor, options);
+        }
+        return editor;
     }
- 
+
     return {
         init: init,
         /**
@@ -91,7 +99,7 @@
         },
         /**
          * Get user selected code editor
-         * @return {string} Returns 
+         * @return {string} Returns
          * @memberof RED.editor.codeEditor
          */
         get editor() {
@@ -104,4 +112,4 @@
          */
         create: create
     }
-})();
+})();

packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editors/monaco.js

@@ -59,18 +59,21 @@ RED.editor.codeEditor.monaco = (function() {
     //TODO: get from externalModules.js  For now this is enough for feature parity with ACE (and then some).
     const knownModules = {
         "assert": {package: "node", module: "assert", path: "node/assert.d.ts" },
+        "assert/strict": {package: "node", module: "assert/strict", path: "node/assert/strict.d.ts" },
         "async_hooks": {package: "node", module: "async_hooks", path: "node/async_hooks.d.ts" },
         "buffer": {package: "node", module: "buffer", path: "node/buffer.d.ts" },
         "child_process": {package: "node", module: "child_process", path: "node/child_process.d.ts" },
         "cluster": {package: "node", module: "cluster", path: "node/cluster.d.ts" },
         "console": {package: "node", module: "console", path: "node/console.d.ts" },
-        "constants": {package: "node", module: "constants", path: "node/constants.d.ts" },
         "crypto": {package: "node", module: "crypto", path: "node/crypto.d.ts" },
         "dgram": {package: "node", module: "dgram", path: "node/dgram.d.ts" },
+        "diagnostics_channel.d": {package: "node", module: "diagnostics_channel", path: "node/diagnostics_channel.d.ts" },
         "dns": {package: "node", module: "dns", path: "node/dns.d.ts" },
+        "dns/promises": {package: "node", module: "dns/promises", path: "node/dns/promises.d.ts" },
         "domain": {package: "node", module: "domain", path: "node/domain.d.ts" },
         "events": {package: "node", module: "events", path: "node/events.d.ts" },
         "fs": {package: "node", module: "fs", path: "node/fs.d.ts" },
+        "fs/promises": {package: "node", module: "fs/promises", path: "node/fs/promises.d.ts" },
         "globals": {package: "node", module: "globals", path: "node/globals.d.ts" },
         "http": {package: "node", module: "http", path: "node/http.d.ts" },
         "http2": {package: "node", module: "http2", path: "node/http2.d.ts" },
@@ -84,8 +87,13 @@ RED.editor.codeEditor.monaco = (function() {
         "querystring": {package: "node", module: "querystring", path: "node/querystring.d.ts" },
         "readline": {package: "node", module: "readline", path: "node/readline.d.ts" },
         "stream": {package: "node", module: "stream", path: "node/stream.d.ts" },
+        "stream/consumers": {package: "node", module: "stream/consumers", path: "node/stream/consumers.d.ts" },
+        "stream/promises": {package: "node", module: "stream/promises", path: "node/stream/promises.d.ts" },
+        "stream/web": {package: "node", module: "stream/web", path: "node/stream/web.d.ts" },
         "string_decoder": {package: "node", module: "string_decoder", path: "node/string_decoder.d.ts" },
+        "test": {package: "node", module: "test", path: "node/test.d.ts" },
         "timers": {package: "node", module: "timers", path: "node/timers.d.ts" },
+        "timers/promises": {package: "node", module: "timers/promises", path: "node/timers/promises.d.ts" },
         "tls": {package: "node", module: "tls", path: "node/tls.d.ts" },
         "trace_events": {package: "node", module: "trace_events", path: "node/trace_events.d.ts" },
         "tty": {package: "node", module: "tty", path: "node/tty.d.ts" },
@@ -100,7 +108,7 @@ RED.editor.codeEditor.monaco = (function() {
         "node-red-util": {package: "node-red", module: "util", path: "node-red/util.d.ts" },
         "node-red-func": {package: "node-red", module: "func", path: "node-red/func.d.ts" },
     }
-    const defaultServerSideTypes = [ knownModules["node-red-util"], knownModules["node-red-func"], knownModules["globals"], knownModules["console"], knownModules["buffer"] ];
+    const defaultServerSideTypes = [ knownModules["node-red-util"], knownModules["node-red-func"], knownModules["globals"], knownModules["console"], knownModules["buffer"] , knownModules["util"] ];
 
     const modulesCache = {};
 
@@ -764,7 +772,7 @@ RED.editor.codeEditor.monaco = (function() {
 
         
         if(!options.stateId && options.stateId !== false) {
-            options.stateId = RED.editor.generateViewStateId("monaco", options, (options.mode || options.title).split("/").pop());
+            options.stateId = RED.editor.generateViewStateId("monaco", options, (options.mode || options.title || "").split("/").pop());
         }
         var el = options.element || $("#"+options.id)[0];
         var toolbarRow = $("<div>").appendTo(el);

packages/node_modules/@node-red/editor-client/src/js/ui/editors/colorPicker.js

@@ -76,6 +76,9 @@ RED.editor.colorPicker = RED.colorPicker = (function() {
             var focusTarget = colorInput;
             colorInput.on("change", function (e) {
                 var color = colorInput.val();
+                if (options.defaultValue && !color.match(/^([a-z]+|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3})$/)) {
+                    color = options.defaultValue;
+                }
                 colorHiddenInput.val(color).trigger('change');
                 refreshDisplay(color);
             });

packages/node_modules/@node-red/editor-client/src/js/ui/editors/envVarList.js

@@ -2,7 +2,7 @@ RED.editor.envVarList = (function() {
 
     var currentLocale = 'en-US';
     var DEFAULT_ENV_TYPE_LIST = ['str','num','bool','json','bin','env'];
-    var DEFAULT_ENV_TYPE_LIST_INC_CRED = ['str','num','bool','json','bin','env','cred'];
+    var DEFAULT_ENV_TYPE_LIST_INC_CRED = ['str','num','bool','json','bin','env','cred','jsonata'];
 
     /**
      * Create env var edit interface
@@ -41,8 +41,12 @@ RED.editor.envVarList = (function() {
                         style: "width:100%",
                         class: "node-input-env-value",
                         type: "text",
-                    }).attr("autocomplete","disable").appendTo(envRow)
-                    valueField.typedInput({default:'str',types:isTemplateNode?DEFAULT_ENV_TYPE_LIST:DEFAULT_ENV_TYPE_LIST_INC_CRED});
+                    }).attr("autocomplete","disable").appendTo(envRow);
+                    var types = (opt.ui && opt.ui.opts && opt.ui.opts.types);
+                    if (!types) {
+                        types = isTemplateNode ? DEFAULT_ENV_TYPE_LIST : DEFAULT_ENV_TYPE_LIST_INC_CRED;
+                    }
+                    valueField.typedInput({default:'str',types:types});
                     valueField.typedInput('type', opt.type);
                     if (opt.type === "cred") {
                         if (opt.value) {
@@ -94,6 +98,11 @@ RED.editor.envVarList = (function() {
                         }
                         opt.ui.label = opt.ui.label || {};
                         opt.ui.type = opt.ui.type || "input";
+                        if ((opt.ui.type === "cred") &&
+                            opt.ui.opts &&
+                            opt.ui.opts.types) {
+                            opt.ui.type = "input";
+                        }
 
                         var uiRow = $('<div/>').appendTo(container).hide();
                         // save current info for reverting on cancel

packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js

@@ -255,6 +255,9 @@
                         var currentExpression = expressionEditor.getValue();
                         var expr;
                         var usesContext = false;
+                        var usesEnv = false;
+                        var usesMoment = false;
+                        var usesClone = false;
                         var legacyMode = /(^|[^a-zA-Z0-9_'".])msg([^a-zA-Z0-9_'"]|$)/.test(currentExpression);
                         $(".red-ui-editor-type-expression-legacy").toggle(legacyMode);
                         try {
@@ -267,6 +270,18 @@
                                 usesContext = true;
                                 return null;
                             });
+                            expr.assign("env", function(name) {
+                                usesEnv = true;
+                                return null;
+                            });
+                            expr.assign("moment", function(name) {
+                                usesMoment = true;
+                                return null;
+                            });
+                            expr.assign("clone", function(name) {
+                                usesClone = true;
+                                return null;
+                            });
                         } catch(err) {
                             testResultEditor.setValue(RED._("expressionEditor.errors.invalid-expr",{message:err.message}),-1);
                             return;
@@ -279,20 +294,37 @@
                         }
 
                         try {
-                            var result = expr.evaluate(legacyMode?{msg:parsedData}:parsedData);
-                            if (usesContext) {
-                                testResultEditor.setValue(RED._("expressionEditor.errors.context-unsupported"),-1);
-                                return;
-                            }
-
-                            var formattedResult;
-                            if (result !== undefined) {
-                                formattedResult = JSON.stringify(result,null,4);
-                            } else {
-                                formattedResult = RED._("expressionEditor.noMatch");
-                            }
-                            testResultEditor.setValue(formattedResult,-1);
-                        } catch(err) {
+                            expr.evaluate(legacyMode?{msg:parsedData}:parsedData, (err, result) => {
+                                if (err) {
+                                    testResultEditor.setValue(RED._("expressionEditor.errors.eval",{message:err.message}),-1);
+                                } else {
+                                    if (usesContext) {
+                                        testResultEditor.setValue(RED._("expressionEditor.errors.context-unsupported"),-1);
+                                        return;
+                                    }
+                                    if (usesEnv) {
+                                        testResultEditor.setValue(RED._("expressionEditor.errors.env-unsupported"),-1);
+                                        return;
+                                    }
+                                    if (usesMoment) {
+                                        testResultEditor.setValue(RED._("expressionEditor.errors.moment-unsupported"),-1);
+                                        return;
+                                    }
+                                    if (usesClone) {
+                                        testResultEditor.setValue(RED._("expressionEditor.errors.clone-unsupported"),-1);
+                                        return;
+                                    }
+        
+                                    var formattedResult;
+                                    if (result !== undefined) {
+                                        formattedResult = JSON.stringify(result,null,4);
+                                    } else {
+                                        formattedResult = RED._("expressionEditor.noMatch");
+                                    }
+                                    testResultEditor.setValue(formattedResult,-1);
+                                }
+                            });
+                        } catch(err) {                            
                             testResultEditor.setValue(RED._("expressionEditor.errors.eval",{message:err.message}),-1);
                         }
                     }

packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js

@@ -14,6 +14,61 @@
  * limitations under the License.
  **/
 (function() {
+    /**
+     * Converts dropped image file to date URL
+     */
+    function file2base64Image(file, cb) {
+        var reader = new FileReader();
+        reader.onload = (function (fd) {
+            return function (e) {
+                cb(e.target.result);
+            };
+        })(file);
+        reader.readAsDataURL(file);
+    }
+
+    var initialized = false;
+    var currentEditor = null;
+    /**
+     * Initialize handler for image file drag events
+     */
+    function initImageDrag(elem, editor) {
+        $(elem).on("dragenter", function (ev) {
+            ev.preventDefault();
+            $("#red-ui-image-drop-target").css({display:'table'}).focus();
+            currentEditor = editor;
+        });
+
+        if (!initialized) {
+            initialized = true;
+            $("#red-ui-image-drop-target").on("dragover", function (ev) {
+                ev.preventDefault();
+            }).on("dragleave", function (ev) {
+                $("#red-ui-image-drop-target").hide();
+            }).on("drop", function (ev) {
+                ev.preventDefault();
+                if ($.inArray("Files",ev.originalEvent.dataTransfer.types) != -1) {
+                    var files = ev.originalEvent.dataTransfer.files;
+                    if (files.length === 1) {
+                        var file = files[0];
+                        var name = file.name.toLowerCase();
+
+                        if (name.match(/\.(apng|avif|gif|jpeg|png|svg|webp)$/)) {
+                            file2base64Image(file, function (image) {
+                                var session = currentEditor.getSession();
+                                var img = `<img src="${image}"/>\n`;
+                                var pos = session.getCursorPosition();
+                                session.insert(pos, img);
+                                $("#red-ui-image-drop-target").hide();
+                            });
+                            return;
+                        }
+                    }
+                }
+                $("#red-ui-image-drop-target").hide();
+            });
+        }
+    }
 
     var toolbarTemplate = '<div style="margin-bottom: 5px">'+
         '<span class="button-group">'+
@@ -114,6 +169,7 @@
                             var currentScrollTop = $(".red-ui-editor-type-markdown-panel-preview").scrollTop();
                             $(".red-ui-editor-type-markdown-panel-preview").html(RED.utils.renderMarkdown(expressionEditor.getValue()));
                             $(".red-ui-editor-type-markdown-panel-preview").scrollTop(currentScrollTop);
+                            mermaid.init();
                         },200);
                     })
                     if (options.header) {
@@ -122,6 +178,7 @@
 
                     if (value) {
                         $(".red-ui-editor-type-markdown-panel-preview").html(RED.utils.renderMarkdown(expressionEditor.getValue()));
+                        mermaid.init();
                     }
                     panels = RED.panels.create({
                         id:"red-ui-editor-type-markdown-panels",
@@ -148,10 +205,14 @@
                     });
                     RED.popover.tooltip($("#node-btn-markdown-preview"), RED._("markdownEditor.toggle-preview"));
 
-                    if (options.cursor && !expressionEditor._initState) {
-                        expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);
-                    }
-
+                    if(!expressionEditor._initState) {
+                        if (options.cursor) {
+                            expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);
+                        }
+                        else {
+                            expressionEditor.gotoLine(0, 0, false);
+                        }
+                    }                        
                     dialogForm.i18n();
                 },
                 close: function() {
@@ -215,7 +276,11 @@
                 }
             })
             return toolbar;
-        }
+        },
+        postInit: function (editor, options) {
+            var elem = $("#"+options.id);
+            initImageDrag(elem, editor);
+         }
     }
     RED.editor.registerTypeEditor("_markdown", definition);
 })();

packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js

@@ -37,8 +37,7 @@
                 if (!node._def.defaults || !node._def.defaults.hasOwnProperty("icon")) {
                     var icon = $("#red-ui-editor-node-icon").val()||"";
                     if (!this.isDefaultIcon) {
-                        if ((icon !== node.icon) &&
-                            (icon !== "")) {
+                        if ((node.icon && icon !== node.icon) || (!node.icon && icon !== "")) {
                             editState.changes.icon = node.icon;
                             node.icon = icon;
                             editState.changed = true;
@@ -236,6 +235,7 @@
             RED.editor.colorPicker.create({
                 id: "red-ui-editor-node-color",
                 value: color,
+                defaultValue: "#DDAA99",
                 palette: recommendedColors,
                 sortPalette: function (a, b) {return a.l - b.l;}
             }).appendTo(colorRow);

packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js

@@ -52,8 +52,6 @@
                     node.info = info;
                 }
                 $("#red-ui-tab-"+(node.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!node.disabled);
-                $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!node.disabled);
-
             }
         }
     });

packages/node_modules/@node-red/editor-client/src/js/ui/env-var.js

@@ -0,0 +1,179 @@
+RED.envVar = (function() {
+    function saveEnvList(list) {
+        const items = list.editableList("items")
+        const new_env = [];
+        items.each(function (i,el) {
+            var data = el.data('data');
+            var item;
+            if (data.nameField && data.valueField) {
+                item = {
+                    name: data.nameField.val(),
+                    value: data.valueField.typedInput("value"),
+                    type: data.valueField.typedInput("type")
+                };
+                new_env.push(item);
+            }
+        });
+        return new_env;
+    }
+
+    function getGlobalConf(create) {
+        var gconf = null;
+        RED.nodes.eachConfig(function (conf) {
+            if (conf.type === "global-config") {
+                gconf = conf;
+            }
+        });
+        if ((gconf === null) && create) {
+            var cred = {
+                _ : {},
+                map: {}
+            };
+            gconf = {
+                id: RED.nodes.id(),
+                type: "global-config",
+                env: [],
+                name: "global-config",
+                label: "",
+                hasUsers: false,
+                users: [],
+                credentials: cred,
+                _def: RED.nodes.getType("global-config"),
+            };
+            RED.nodes.add(gconf);
+        }
+        return gconf;
+    }
+
+    function applyChanges(list) {
+        var gconf = getGlobalConf(false);
+        var new_env = [];
+        var items = list.editableList('items');
+        var credentials = gconf ? gconf.credentials : null;
+
+        if (!credentials) {
+            credentials = {
+                _ : {},
+                map: {}
+            };
+        }
+        items.each(function (i,el) {
+            var data = el.data('data');
+            if (data.nameField && data.valueField) {
+                var item = {
+                    name: data.nameField.val(),
+                    value: data.valueField.typedInput("value"),
+                    type: data.valueField.typedInput("type")
+                };
+                if (item.name.trim() !== "") {
+                    new_env.push(item);
+                    if ((item.type === "cred") && (item.value !== "__PWRD__")) {
+                        credentials.map[item.name] = item.value;
+                        credentials.map["has_"+item.name] = (item.value !== "");
+                        item.value = "__PWRD__";
+                    }
+                }
+            }
+        });
+        if (gconf === null) {
+            gconf = getGlobalConf(true);
+        }
+        if ((JSON.stringify(new_env) !== JSON.stringify(gconf.env)) ||
+            (JSON.stringify(credentials) !== JSON.stringify(gconf.credentials))) {
+            gconf.env = new_env;
+            gconf.credentials = credentials;
+            RED.nodes.dirty(true);
+        }
+    }
+
+    function getSettingsPane() {
+        var gconf = getGlobalConf(false);
+        var env = gconf ? gconf.env : [];
+        var cred = gconf ? gconf.credentials : null;
+        if (!cred) {
+            cred = {
+                _ : {},
+                map: {}
+            };
+        }
+
+        var pane = $("<div/>", {
+            id: "red-ui-settings-tab-envvar",
+            class: "form-horizontal"
+        });
+        var content = $("<div/>", {
+            class: "form-row node-input-env-container-row"
+        }).css({
+            "margin": "10px"
+        }).appendTo(pane);
+
+        var label = $("<label></label>").css({
+            width: "100%"
+        }).appendTo(content);
+        $("<i/>", {
+            class: "fa fa-list"
+        }).appendTo(label);
+        $("<span/>").text(" "+RED._("env-var.header")).appendTo(label);
+
+        var list = $("<ol/>", {
+            id: "node-input-env-container"
+        }).appendTo(content);
+        var node = {
+            type: "",
+            env: env,
+            credentials: cred.map,
+        };
+        RED.editor.envVarList.create(list, node);
+
+        var buttons = $("<div/>").css({
+            "text-align": "right",
+        }).appendTo(content);
+        var revertButton = $("<button/>", {
+            class: "red-ui-button"
+        }).css({
+        }).text(RED._("env-var.revert")).appendTo(buttons);
+
+        var items = saveEnvList(list);
+        revertButton.on("click", function (ev) {
+            list.editableList("empty");
+            list.editableList("addItems", items);
+        });
+
+        return pane;
+    }
+
+    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"),
+            get: getSettingsPane,
+            focus: function() {
+                var height = $("#red-ui-settings-tab-envvar").parent().height();
+                $("#node-input-env-container").editableList("height", (height -100));
+            },
+            close: function() {
+                var list = $("#node-input-env-container");
+                try {
+                    applyChanges(list);
+                }
+                catch (e) {
+                    console.log(e);
+                    console.log(e.stack);
+                }
+            }
+        });
+
+        RED.actions.add("core:show-global-env", function() {
+            RED.userSettings.show('envvar');
+        });
+    }
+
+    return {
+        init: init,
+    };
+
+})();

packages/node_modules/@node-red/editor-client/src/js/ui/group.js

@@ -101,6 +101,7 @@ RED.group = (function() {
             RED.editor.colorPicker.create({
                 id:"node-input-style-stroke",
                 value: style.stroke || defaultGroupStyle.stroke || "#a4a4a4",
+                defaultValue: "#a4a4a4",
                 palette: colorPalette,
                 cellPerRow: colorCount,
                 cellWidth: 16,
@@ -112,6 +113,7 @@ RED.group = (function() {
             RED.editor.colorPicker.create({
                 id:"node-input-style-fill",
                 value: style.fill || defaultGroupStyle.fill ||"none",
+                defaultValue: "none",
                 palette: colorPalette,
                 cellPerRow: colorCount,
                 cellWidth: 16,
@@ -129,6 +131,7 @@ RED.group = (function() {
             RED.editor.colorPicker.create({
                 id:"node-input-style-color",
                 value: style.color || defaultGroupStyle.color ||"#a4a4a4",
+                defaultValue: "#a4a4a4",
                 palette: colorPalette,
                 cellPerRow: colorCount,
                 cellWidth: 16,
@@ -185,6 +188,8 @@ RED.group = (function() {
             var activateMerge = false;
             var activateRemove = false;
             var singleGroupSelected = false;
+            var locked = RED.workspaces.isLocked()
+
             if (activateGroup) {
                 singleGroupSelected = selection.nodes.length === 1 && selection.nodes[0].type === 'group';
                 selection.nodes.forEach(function (n) {
@@ -199,12 +204,12 @@ RED.group = (function() {
                     activateMerge = (selection.nodes.length > 1);
                 }
             }
-            RED.menu.setDisabled("menu-item-group-group", !activateGroup);
-            RED.menu.setDisabled("menu-item-group-ungroup", !activateUngroup);
-            RED.menu.setDisabled("menu-item-group-merge", !activateMerge);
-            RED.menu.setDisabled("menu-item-group-remove", !activateRemove);
+            RED.menu.setDisabled("menu-item-group-group", locked || !activateGroup);
+            RED.menu.setDisabled("menu-item-group-ungroup", locked || !activateUngroup);
+            RED.menu.setDisabled("menu-item-group-merge", locked || !activateMerge);
+            RED.menu.setDisabled("menu-item-group-remove", locked || !activateRemove);
             RED.menu.setDisabled("menu-item-edit-copy-group-style", !singleGroupSelected);
-            RED.menu.setDisabled("menu-item-edit-paste-group-style", !activateUngroup);
+            RED.menu.setDisabled("menu-item-edit-paste-group-style", locked || !activateUngroup);
         });
 
         RED.actions.add("core:group-selection", function() { groupSelection() })
@@ -261,6 +266,7 @@ RED.group = (function() {
         }
     }
     function pasteGroupStyle() {
+        if (RED.workspaces.isLocked()) { return }
         if (RED.view.state() !== RED.state.DEFAULT) { return }
         if (groupStyleClipboard) {
             var selection = RED.view.selection();
@@ -295,6 +301,7 @@ RED.group = (function() {
     }
 
     function groupSelection() {
+        if (RED.workspaces.isLocked()) { return }
         if (RED.view.state() !== RED.state.DEFAULT) { return }
         var selection = RED.view.selection();
         if (selection.nodes) {
@@ -308,15 +315,17 @@ RED.group = (function() {
                 RED.history.push(historyEvent);
                 RED.view.select({nodes:[group]});
                 RED.nodes.dirty(true);
+                RED.view.focus();
             }
         }
     }
     function ungroupSelection() {
+        if (RED.workspaces.isLocked()) { return }
         if (RED.view.state() !== RED.state.DEFAULT) { return }
         var selection = RED.view.selection();
         if (selection.nodes) {
             var newSelection = [];
-            groups = selection.nodes.filter(function(n) { return n.type === "group" });
+            let groups = selection.nodes.filter(function(n) { return n.type === "group" });
 
             var historyEvent = {
                 t:"ungroup",
@@ -330,10 +339,12 @@ RED.group = (function() {
             RED.history.push(historyEvent);
             RED.view.select({nodes:newSelection})
             RED.nodes.dirty(true);
+            RED.view.focus();
         }
     }
 
     function ungroup(g) {
+        if (RED.workspaces.isLocked()) { return }
         var nodes = [];
         var parentGroup = RED.nodes.group(g.g);
         g.nodes.forEach(function(n) {
@@ -360,6 +371,7 @@ RED.group = (function() {
     }
 
     function mergeSelection() {
+        if (RED.workspaces.isLocked()) { return }
         if (RED.view.state() !== RED.state.DEFAULT) { return }
         var selection = RED.view.selection();
         if (selection.nodes) {
@@ -424,10 +436,12 @@ RED.group = (function() {
             });
             RED.history.push(historyEvent);
             RED.nodes.dirty(true);
+            RED.view.focus();
         }
     }
 
     function removeSelection() {
+        if (RED.workspaces.isLocked()) { return }
         if (RED.view.state() !== RED.state.DEFAULT) { return }
         var selection = RED.view.selection();
         if (selection.nodes) {
@@ -451,15 +465,25 @@ RED.group = (function() {
                 }
             }
             RED.view.select({nodes:selection.nodes})
+            RED.view.focus();
         }
     }
     function createGroup(nodes) {
+        if (RED.workspaces.isLocked()) { return }
         if (nodes.length === 0) {
             return;
         }
-        if (nodes.filter(function(n) { return n.type === "subflow" }).length > 0) {
-            RED.notify(RED._("group.errors.cannotAddSubflowPorts"),"error");
-            return;
+        const existingGroup = nodes[0].g
+        for (let i = 0; i < nodes.length; i++) {
+            const n = nodes[i]
+            if (n.type === 'subflow') {
+                RED.notify(RED._("group.errors.cannotAddSubflowPorts"),"error");
+                return;
+            }
+            if (n.g !== existingGroup) {
+                console.warn("Cannot add nooes with different z properties")
+                return
+            }
         }
         // nodes is an array
         // each node must be on the same tab (z)
@@ -472,11 +496,16 @@ RED.group = (function() {
             y: Number.POSITIVE_INFINITY,
             w: 0,
             h: 0,
-            _def: RED.group.def
+            _def: RED.group.def,
+            changed: true
         }
 
         group.z = nodes[0].z;
-        RED.nodes.addGroup(group);
+        group = RED.nodes.addGroup(group);
+
+        if (existingGroup) {
+            addToGroup(RED.nodes.group(existingGroup), group)
+        }
 
         try {
             addToGroup(group,nodes);
@@ -501,7 +530,7 @@ RED.group = (function() {
             if (!z) {
                 z = n.z;
             } else if (z !== n.z) {
-                throw new Error("Cannot add nooes with different z properties")
+                throw new Error("Cannot add nodes with different z properties")
             }
             if (n.g) {
                 // This is already in a group.
@@ -518,14 +547,10 @@ RED.group = (function() {
                 throw new Error(RED._("group.errors.cannotCreateDiffGroups"))
             }
         }
-        // The nodes are already in a group. The assumption is they should be
-        // wrapped in the newly provided group, and that group added to in their
-        // place to the existing containing group.
+        // The nodes are already in a group - so we need to remove them first
         if (g) {
             g = RED.nodes.group(g);
-            g.nodes.push(group);
             g.dirty = true;
-            group.g = g.id;
         }
         // Second pass - add them to the group
         for (i=0;i<nodes.length;i++) {
@@ -559,6 +584,7 @@ RED.group = (function() {
         markDirty(group);
     }
     function removeFromGroup(group, nodes, reparent) {
+        if (RED.workspaces.isLocked()) { return }
         if (!Array.isArray(nodes)) {
             nodes = [nodes];
         }
@@ -576,7 +602,7 @@ RED.group = (function() {
             n.dirty = true;
             var index = group.nodes.indexOf(n);
             group.nodes.splice(index,1);
-            if (reparent && group.g) {
+            if (reparent && parentGroup) {
                 n.g = group.g
                 parentGroup.nodes.push(n);
             } else {

packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js

@@ -265,13 +265,18 @@ RED.keyboard = (function() {
                 if (partialState) {
                     partialState = null;
                     return resolveKeyEvent(evt);
-                } else if (Object.keys(handler).length > 0) {
-                    partialState = handler;
-                    evt.preventDefault();
-                    return null;
-                } else {
-                    return null;
                 }
+                if (Object.keys(handler).length > 0) {
+                    // check if there's a potential combined handler initiated by this keyCode 
+                    for (let h in handler) {
+                        if (matchHandlerToEvent(evt,handler[h]) > -1) {
+                            partialState = handler;
+                            evt.preventDefault();
+                            break;
+                        }
+                    }
+                }
+                return null;
             } else {
                 var depth = Infinity;
                 var matchedHandler;

packages/node_modules/@node-red/editor-client/src/js/ui/mermaid.js

@@ -0,0 +1,46 @@
+// Mermaid diagram stub library for on-demand dynamic loading
+// Will be overwritten after script loading by $.getScript
+var mermaid = (function () {
+    var enabled /* = undefined */;
+    
+    var initializing = false;
+    var initCalled = false;
+
+    function initialize(opt) {
+        if (enabled === undefined) {
+            if (RED.settings.markdownEditor &&
+                RED.settings.markdownEditor.mermaid) {
+                enabled = RED.settings.markdownEditor.mermaid.enabled;
+            }
+            else {
+                enabled = true;
+            }
+        }
+        if (enabled) {
+            initializing = true;
+            $.getScript("vendor/mermaid/mermaid.min.js",
+                        function (data, stat, jqxhr) {
+                            $(".mermaid").show();
+                            // invoke loaded mermaid API
+                            initializing = false; 
+                            mermaid.initialize(opt);
+                            if (initCalled) {
+                                mermaid.init();
+                                initCalled = false;
+                            }
+                        });
+        }
+    }
+
+    function init() {
+        if (initializing) {
+            $(".mermaid").hide();
+            initCalled = true;
+        }
+    }
+    
+    return {
+        initialize: initialize,
+        init: init,
+    };
+})();

packages/node_modules/@node-red/editor-client/src/js/ui/palette.js

@@ -175,9 +175,19 @@ RED.palette = (function() {
                     $('<button type="button" onclick="RED.workspaces.show(\''+type.substring(8).replace(/'/g,"\\'")+'\'); return false;" class="red-ui-button red-ui-button-small" style="float: right; margin-left: 5px;"><i class="fa fa-pencil"></i></button>').appendTo(popOverContent)
                 }
 
-                var safeType = type.replace(/'/g,"\\'");
+                const safeType = type.replace(/'/g,"\\'");
+                const wrapStr = function (str) {
+                    if(str.indexOf(' ') >= 0) {
+                        return '"' + str + '"'
+                    }
+                    return str
+                }
 
-                $('<button type="button" onclick="RED.search.show(\'type:'+safeType+'\'); return false;" class="red-ui-button red-ui-button-small" style="float: right; margin-left: 5px;"><i class="fa fa-search"></i></button>').appendTo(popOverContent)
+                $('<button type="button"; return false;" class="red-ui-button red-ui-button-small" style="float: right; margin-left: 5px;"><i class="fa fa-search"></i></button>')
+                    .appendTo(popOverContent)
+                    .on('click', function() {
+                        RED.search.show('type:' + wrapStr(safeType))
+                    })
                 $('<button type="button" onclick="RED.sidebar.help.show(\''+safeType+'\'); return false;" class="red-ui-button red-ui-button-small" style="float: right; margin-left: 5px;"><i class="fa fa-book"></i></button>').appendTo(popOverContent)
 
                 $('<p>',{style:"font-size: 0.8em"}).text(metaData).appendTo(popOverContent);
@@ -282,6 +292,7 @@ RED.palette = (function() {
             var hoverGroup;
             var paletteWidth;
             var paletteTop;
+            var dropEnabled;
             $(d).draggable({
                 helper: 'clone',
                 appendTo: '#red-ui-editor',
@@ -289,6 +300,7 @@ RED.palette = (function() {
                 revertDuration: 200,
                 containment:'#red-ui-main-container',
                 start: function() {
+                    dropEnabled = !(RED.nodes.workspace(RED.workspaces.active())?.locked);
                     paletteWidth = $("#red-ui-palette").width();
                     paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top;
                     hoverGroup = null;
@@ -299,96 +311,100 @@ RED.palette = (function() {
                     RED.view.focus();
                 },
                 stop: function() {
-                    d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false);
-                    if (hoverGroup) {
-                        document.getElementById("group_select_"+hoverGroup.id).classList.remove("red-ui-flow-group-hovered");
+                    if (dropEnabled) {
+                        d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false);
+                        if (hoverGroup) {
+                            document.getElementById("group_select_"+hoverGroup.id).classList.remove("red-ui-flow-group-hovered");
+                        }
+                        if (activeGroup) {
+                            document.getElementById("group_select_"+activeGroup.id).classList.remove("red-ui-flow-group-active-hovered");
+                        }
+                        if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null; }
+                        if (groupTimer) { clearTimeout(groupTimer); groupTimer = null; }
                     }
-                    if (activeGroup) {
-                        document.getElementById("group_select_"+activeGroup.id).classList.remove("red-ui-flow-group-active-hovered");
-                    }
-                    if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null; }
-                    if (groupTimer) { clearTimeout(groupTimer); groupTimer = null; }
                 },
                 drag: function(e,ui) {
                     var paletteNode = getPaletteNode(nt);
                     ui.originalPosition.left = paletteNode.offset().left;
-                    mouseX = ui.position.left - paletteWidth + (ui.helper.width()/2) + chart.scrollLeft();
-                    mouseY = ui.position.top - paletteTop + (ui.helper.height()/2) + chart.scrollTop() + 10;
-                    if (!groupTimer) {
-                        groupTimer = setTimeout(function() {
-                            var mx = mouseX / RED.view.scale();
-                            var my = mouseY / RED.view.scale();
-                            var group = RED.view.getGroupAtPoint(mx,my);
-                            if (group !== hoverGroup) {
-                                if (hoverGroup) {
-                                    document.getElementById("group_select_"+hoverGroup.id).classList.remove("red-ui-flow-group-hovered");
-                                }
-                                if (group) {
-                                    document.getElementById("group_select_"+group.id).classList.add("red-ui-flow-group-hovered");
-                                }
-                                hoverGroup = group;
-                                if (hoverGroup) {
-                                    $(ui.helper).data('group',hoverGroup);
-                                } else {
-                                    $(ui.helper).removeData('group');
-                                }
-                            }
-                            groupTimer = null;
-
-                        },200)
-                    }
-                    if (def.inputs > 0 && def.outputs > 0) {
-                        if (!spliceTimer) {
-                            spliceTimer = setTimeout(function() {
-                                var nodes = [];
-                                var bestDistance = Infinity;
-                                var bestLink = null;
-                                if (chartSVG.getIntersectionList) {
-                                    var svgRect = chartSVG.createSVGRect();
-                                    svgRect.x = mouseX;
-                                    svgRect.y = mouseY;
-                                    svgRect.width = 1;
-                                    svgRect.height = 1;
-                                    nodes = chartSVG.getIntersectionList(svgRect,chartSVG);
-                                } else {
-                                    // Firefox doesn't do getIntersectionList and that
-                                    // makes us sad
-                                    nodes = RED.view.getLinksAtPoint(mouseX,mouseY);
-                                }
+                    if (dropEnabled) {
+                        mouseX = ui.position.left - paletteWidth + (ui.helper.width()/2) + chart.scrollLeft();
+                        mouseY = ui.position.top - paletteTop + (ui.helper.height()/2) + chart.scrollTop() + 10;
+                        if (!groupTimer) {
+                            groupTimer = setTimeout(function() {
                                 var mx = mouseX / RED.view.scale();
                                 var my = mouseY / RED.view.scale();
-                                for (var i=0;i<nodes.length;i++) {
-                                    var node = d3.select(nodes[i]);
-                                    if (node.classed('red-ui-flow-link-background') && !node.classed('red-ui-flow-link-link')) {
-                                        var length = nodes[i].getTotalLength();
-                                        for (var j=0;j<length;j+=10) {
-                                            var p = nodes[i].getPointAtLength(j);
-                                            var d2 = ((p.x-mx)*(p.x-mx))+((p.y-my)*(p.y-my));
-                                            if (d2 < 200 && d2 < bestDistance) {
-                                                bestDistance = d2;
-                                                bestLink = nodes[i];
+                                var group = RED.view.getGroupAtPoint(mx,my);
+                                if (group !== hoverGroup) {
+                                    if (hoverGroup) {
+                                        document.getElementById("group_select_"+hoverGroup.id).classList.remove("red-ui-flow-group-hovered");
+                                    }
+                                    if (group) {
+                                        document.getElementById("group_select_"+group.id).classList.add("red-ui-flow-group-hovered");
+                                    }
+                                    hoverGroup = group;
+                                    if (hoverGroup) {
+                                        $(ui.helper).data('group',hoverGroup);
+                                    } else {
+                                        $(ui.helper).removeData('group');
+                                    }
+                                }
+                                groupTimer = null;
+
+                            },200)
+                        }
+                        if (def.inputs > 0 && def.outputs > 0) {
+                            if (!spliceTimer) {
+                                spliceTimer = setTimeout(function() {
+                                    var nodes = [];
+                                    var bestDistance = Infinity;
+                                    var bestLink = null;
+                                    if (chartSVG.getIntersectionList) {
+                                        var svgRect = chartSVG.createSVGRect();
+                                        svgRect.x = mouseX;
+                                        svgRect.y = mouseY;
+                                        svgRect.width = 1;
+                                        svgRect.height = 1;
+                                        nodes = chartSVG.getIntersectionList(svgRect,chartSVG);
+                                    } else {
+                                        // Firefox doesn't do getIntersectionList and that
+                                        // makes us sad
+                                        nodes = RED.view.getLinksAtPoint(mouseX,mouseY);
+                                    }
+                                    var mx = mouseX / RED.view.scale();
+                                    var my = mouseY / RED.view.scale();
+                                    for (var i=0;i<nodes.length;i++) {
+                                        var node = d3.select(nodes[i]);
+                                        if (node.classed('red-ui-flow-link-background') && !node.classed('red-ui-flow-link-link')) {
+                                            var length = nodes[i].getTotalLength();
+                                            for (var j=0;j<length;j+=10) {
+                                                var p = nodes[i].getPointAtLength(j);
+                                                var d2 = ((p.x-mx)*(p.x-mx))+((p.y-my)*(p.y-my));
+                                                if (d2 < 200 && d2 < bestDistance) {
+                                                    bestDistance = d2;
+                                                    bestLink = nodes[i];
+                                                }
                                             }
                                         }
                                     }
-                                }
-                                if (activeSpliceLink && activeSpliceLink !== bestLink) {
-                                    d3.select(activeSpliceLink.parentNode).classed('red-ui-flow-link-splice',false);
-                                }
-                                if (bestLink) {
-                                    d3.select(bestLink.parentNode).classed('red-ui-flow-link-splice',true)
-                                } else {
-                                    d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false);
-                                }
-                                if (activeSpliceLink !== bestLink) {
-                                    if (bestLink) {
-                                        $(ui.helper).data('splice',d3.select(bestLink).data()[0]);
-                                    } else {
-                                        $(ui.helper).removeData('splice');
+                                    if (activeSpliceLink && activeSpliceLink !== bestLink) {
+                                        d3.select(activeSpliceLink.parentNode).classed('red-ui-flow-link-splice',false);
                                     }
-                                }
-                                activeSpliceLink = bestLink;
-                                spliceTimer = null;
-                            },200);
+                                    if (bestLink) {
+                                        d3.select(bestLink.parentNode).classed('red-ui-flow-link-splice',true)
+                                    } else {
+                                        d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false);
+                                    }
+                                    if (activeSpliceLink !== bestLink) {
+                                        if (bestLink) {
+                                            $(ui.helper).data('splice',d3.select(bestLink).data()[0]);
+                                        } else {
+                                            $(ui.helper).removeData('splice');
+                                        }
+                                    }
+                                    activeSpliceLink = bestLink;
+                                    spliceTimer = null;
+                                },200);
+                            }
                         }
                     }
                 }
@@ -422,6 +438,7 @@ RED.palette = (function() {
                 categoryNode.find(".red-ui-palette-content").slideToggle();
                 categoryNode.find("i").toggleClass("expanded");
             }
+            categoryNode.hide();
         }
     }
 
@@ -500,6 +517,7 @@ RED.palette = (function() {
                     currentCategoryNode.find(".red-ui-palette-content").slideToggle();
                     currentCategoryNode.find("i").toggleClass("expanded");
                 }
+                currentCategoryNode.hide();
             }
         }
 

packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js

@@ -165,6 +165,9 @@ RED.projects.settings = (function() {
         }
         var description = addTargetToExternalLinks($('<span class="red-ui-text-bidi-aware" dir=\"'+RED.text.bidi.resolveBaseTextDir(desc)+'">'+desc+'</span>')).appendTo(container);
         description.find(".red-ui-text-bidi-aware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "<span></span>" );
+        setTimeout(function () {
+            mermaid.init();
+        }, 200);
     }
 
     function editSummary(activeProject, summary, container, version, versionContainer) {

packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js

@@ -545,7 +545,7 @@ RED.projects = (function() {
                         var sshwarningRow = $('<div class="red-ui-projects-dialog-screen-create-row-auth-error-no-keys"></div>').hide().appendTo(subrow);
                         $('<div class="form-row"><i class="fa fa-warning"></i> '+RED._("projects.clone-project.ssh-key-desc")+'</div>').appendTo(sshwarningRow);
                         subrow = $('<div style="text-align: center">').appendTo(sshwarningRow);
-                        $('<button class="red-ui-button red-ui-projects-dialog-button">'+RED._("projects.clone-project.ssh-key-add")+'</button>').appendTo(subrow).on("click", function(e) {
+                        $('<button type="button" class="red-ui-button red-ui-projects-dialog-button">'+RED._("projects.clone-project.ssh-key-add")+'</button>').appendTo(subrow).on("click", function(e) {
                             e.preventDefault();
                             dialog.dialog( "close" );
                             RED.userSettings.show('gitconfig');
@@ -747,14 +747,14 @@ RED.projects = (function() {
                         var row = $('<div class="form-row"></div>').appendTo(body);
                         $('<label for="red-ui-projects-dialog-screen-create-project-file">'+RED._("projects.default-files.flow-file")+'</label>').appendTo(row);
                         var subrow = $('<div style="position:relative;"></div>').appendTo(row);
-                        var defaultFlowFile = (createProjectOptions.files &&createProjectOptions.files.flow) || (RED.settings.files && RED.settings.files.flow)||"flow.json";
+                        var defaultFlowFile = (createProjectOptions.files &&createProjectOptions.files.flow) || (RED.settings.files && RED.settings.files.flow) || "flows.json";
                         projectFlowFileInput = $('<input id="red-ui-projects-dialog-screen-create-project-file" type="text">').val(defaultFlowFile)
                             .on("change keyup paste",validateForm)
                             .appendTo(subrow);
                         $('<div class="red-ui-projects-dialog-screen-input-status"></div>').appendTo(subrow);
                         $('<label class="red-ui-projects-edit-form-sublabel"><small>*.json</small></label>').appendTo(row);
 
-                        var defaultCredentialsFile = (createProjectOptions.files &&createProjectOptions.files.credentials) || (RED.settings.files && RED.settings.files.credentials)||"flow_cred.json";
+                        var defaultCredentialsFile = (createProjectOptions.files &&createProjectOptions.files.credentials) || (RED.settings.files && RED.settings.files.credentials) || "flows_cred.json";
                         row = $('<div class="form-row"></div>').appendTo(body);
                         $('<label for="red-ui-projects-dialog-screen-create-project-credfile">'+RED._("projects.default-files.credentials-file")+'</label>').appendTo(row);
                         subrow = $('<div style="position:relative;"></div>').appendTo(row);
@@ -1171,11 +1171,11 @@ RED.projects = (function() {
 
                         row = $('<div class="form-row button-group"></div>').appendTo(container);
 
-                        var openProject = $('<button data-type="open" class="red-ui-button red-ui-projects-dialog-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-folder-open"></i><br/>'+RED._("projects.create.open")+'</button>').appendTo(row);
-                        var createAsEmpty = $('<button data-type="empty" class="red-ui-button red-ui-projects-dialog-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-asterisk"></i><br/>'+RED._("projects.create.create")+'</button>').appendTo(row);
-                        // var createAsCopy = $('<button data-type="copy" class="red-ui-button red-ui-projects-dialog-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i class="fa fa-long-arrow-right fa-2x"></i><i class="fa fa-archive fa-2x"></i><br/>Copy existing</button>').appendTo(row);
-                        var createAsClone = $('<button data-type="clone" class="red-ui-button red-ui-projects-dialog-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-git"></i><br/>'+RED._("projects.create.clone")+'</button>').appendTo(row);
-                        // var createAsClone = $('<button data-type="clone" class="red-ui-button red-ui-projects-dialog-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-git fa-2x"></i><i class="fa fa-arrows-h fa-2x"></i><i class="fa fa-archive fa-2x"></i><br/>Clone Repository</button>').appendTo(row);
+                        var openProject = $('<button type="button" data-type="open" class="red-ui-button red-ui-projects-dialog-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-folder-open"></i><br/>'+RED._("projects.create.open")+'</button>').appendTo(row);
+                        var createAsEmpty = $('<button type="button" data-type="empty" class="red-ui-button red-ui-projects-dialog-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-asterisk"></i><br/>'+RED._("projects.create.create")+'</button>').appendTo(row);
+                        // var createAsCopy = $('<button type="button" data-type="copy" class="red-ui-button red-ui-projects-dialog-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i class="fa fa-long-arrow-right fa-2x"></i><i class="fa fa-archive fa-2x"></i><br/>Copy existing</button>').appendTo(row);
+                        var createAsClone = $('<button type="button" data-type="clone" class="red-ui-button red-ui-projects-dialog-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-git"></i><br/>'+RED._("projects.create.clone")+'</button>').appendTo(row);
+                        // var createAsClone = $('<button type="button" data-type="clone" class="red-ui-button red-ui-projects-dialog-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-git fa-2x"></i><i class="fa fa-arrows-h fa-2x"></i><i class="fa fa-archive fa-2x"></i><br/>Clone Repository</button>').appendTo(row);
                         row.find(".red-ui-projects-dialog-screen-create-type").on("click", function(evt) {
                             evt.preventDefault();
                             container.find(".red-ui-projects-dialog-screen-create-type").removeClass('selected');
@@ -1257,7 +1257,7 @@ RED.projects = (function() {
                         row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-empty"></div>').appendTo(container);
                         $('<label for="red-ui-projects-dialog-screen-create-project-file">'+RED._("projects.create.flow-file")+'</label>').appendTo(row);
                         subrow = $('<div style="position:relative;"></div>').appendTo(row);
-                        projectFlowFileInput = $('<input id="red-ui-projects-dialog-screen-create-project-file" type="text">').val("flow.json")
+                        projectFlowFileInput = $('<input id="red-ui-projects-dialog-screen-create-project-file" type="text">').val("flows.json")
                             .on("change keyup paste",validateForm)
                             .appendTo(subrow);
                         $('<div class="red-ui-projects-dialog-screen-input-status"></div>').appendTo(subrow);
@@ -1271,7 +1271,7 @@ RED.projects = (function() {
                         var credentialsLeftBox = $('<div class="red-ui-projects-dialog-credentials-box-left">').appendTo(credentialsBox);
 
                         var credentialsEnabledBox = $('<div class="form-row red-ui-projects-dialog-credentials-box-enabled"></div>').appendTo(credentialsLeftBox);
-                        $('<label class="red-ui-projects-edit-form-inline-label"><input type="radio" name="projects-encryption-type" value="enabled"> <i class="fa fa-lock"></i> <span>'+RED._("projects.encryption-config.enable")+'</span></label>').appendTo(credentialsEnabledBox);
+                        $('<label class="red-ui-projects-edit-form-inline-label"><input type="radio" name="projects-encryption-type" value="enabled" checked> <i class="fa fa-lock"></i> <span>'+RED._("projects.encryption-config.enable")+'</span></label>').appendTo(credentialsEnabledBox);
                         var credentialsDisabledBox = $('<div class="form-row red-ui-projects-dialog-credentials-box-disabled disabled"></div>').appendTo(credentialsLeftBox);
                         $('<label class="red-ui-projects-edit-form-inline-label"><input type="radio" name="projects-encryption-type" value="disabled"> <i class="fa fa-unlock"></i> <span>'+RED._("projects.encryption-config.disable")+'</span></label>').appendTo(credentialsDisabledBox);
 
@@ -1397,7 +1397,7 @@ RED.projects = (function() {
                         var sshwarningRow = $('<div class="red-ui-projects-dialog-screen-create-row-auth-error-no-keys"></div>').hide().appendTo(subrow);
                         $('<div class="form-row"><i class="fa fa-warning"></i> '+RED._("projects.create.desc2")+'</div>').appendTo(sshwarningRow);
                         subrow = $('<div style="text-align: center">').appendTo(sshwarningRow);
-                        $('<button class="red-ui-button red-ui-projects-dialog-button">'+RED._("projects.create.add-ssh-key")+'</button>').appendTo(subrow).on("click", function(e) {
+                        $('<button type="button" class="red-ui-button red-ui-projects-dialog-button">'+RED._("projects.create.add-ssh-key")+'</button>').appendTo(subrow).on("click", function(e) {
                             e.preventDefault();
                             $('#red-ui-projects-dialog-cancel').trigger("click");
                             RED.userSettings.show('gitconfig');
@@ -1631,14 +1631,14 @@ RED.projects = (function() {
     function deleteProject(row,name,done) {
         var cover = $('<div class="red-ui-projects-dialog-project-list-entry-delete-confirm"></div>').on("click", function(evt) { evt.stopPropagation(); }).appendTo(row);
         $('<span>').text(RED._("projects.delete.confirm")).appendTo(cover);
-        $('<button class="red-ui-button red-ui-projects-dialog-button">'+RED._("common.label.cancel")+'</button>')
+        $('<button type="button" class="red-ui-button red-ui-projects-dialog-button">'+RED._("common.label.cancel")+'</button>')
             .appendTo(cover)
             .on("click", function(e) {
                 e.stopPropagation();
                 cover.remove();
                 done(true);
             });
-        $('<button class="red-ui-button red-ui-projects-dialog-button primary">'+RED._("common.label.delete")+'</button>')
+        $('<button type="button" class="red-ui-button red-ui-projects-dialog-button primary">'+RED._("common.label.delete")+'</button>')
             .appendTo(cover)
             .on("click", function(e) {
                 e.stopPropagation();
@@ -1822,7 +1822,7 @@ RED.projects = (function() {
                 header.addClass("selectable");
 
                 var tools = $('<div class="red-ui-projects-dialog-project-list-entry-tools"></div>').appendTo(header);
-                $('<button class="red-ui-button red-ui-projects-dialog-button red-ui-button-small" style="float: right;"><i class="fa fa-trash"></i></button>')
+                $('<button type="button" class="red-ui-button red-ui-projects-dialog-button red-ui-button-small" style="float: right;"><i class="fa fa-trash"></i></button>')
                     .appendTo(tools)
                     .on("click", function(e) {
                         e.stopPropagation();

packages/node_modules/@node-red/editor-client/src/js/ui/search.js

@@ -106,38 +106,51 @@ RED.search = (function() {
         return val;
     }
 
-    function search(val) {
-        var results = [];
-        var typeFilter;
-        var m = /(?:^| )type:([^ ]+)/.exec(val);
-        if (m) {
-            val = val.replace(/(?:^| )type:[^ ]+/,"");
-            typeFilter = m[1];
+    function extractType(val, flags) {
+        // extracts:  type:XYZ  &  type:"X Y Z"
+        const regEx = /(?:type):\s*(?:"([^"]+)"|([^" ]+))/;
+        let m
+        while ((m = regEx.exec(val)) !== null) {
+            // avoid infinite loops with zero-width matches
+            if (m.index === regEx.lastIndex) {
+                regEx.lastIndex++;
+            }
+            val = val.replace(m[0]," ").trim()
+            const flag = m[2] || m[1] // quoted entries in capture group 1, unquoted in capture group 2
+            flags.type = flags.type || [];
+            flags.type.push(flag);
         }
-        var flags = {};
+        return val;
+    }
+
+    function search(val) {
+        const results = [];
+        const flags = {};
         val = extractFlag(val,"invalid",flags);
         val = extractFlag(val,"unused",flags);
         val = extractFlag(val,"config",flags);
         val = extractFlag(val,"subflow",flags);
         val = extractFlag(val,"hidden",flags);
         val = extractFlag(val,"modified",flags);
-        val = extractValue(val,"flow",flags);// flow:active or flow:<flow-id>
+        val = extractValue(val,"flow",flags);// flow:current or flow:<flow-id>
         val = extractValue(val,"uses",flags);// uses:<node-id>
+        val = extractType(val,flags);// type:<node-type>
         val = val.trim();
-        var hasFlags = Object.keys(flags).length > 0;
+        const hasFlags = Object.keys(flags).length > 0;
+        const hasTypeFilter = flags.type && flags.type.length > 0
         if (flags.flow && flags.flow.indexOf("current") >= 0) {
             let idx = flags.flow.indexOf("current");
-            flags.flow[idx] = RED.workspaces.active();//convert active to flow ID
+            flags.flow[idx] = RED.workspaces.active();//convert 'current' to active flow ID
         }
         if (flags.flow && flags.flow.length) {
             flags.flow = [ ...new Set(flags.flow) ]; //deduplicate
         }
-        if (val.length > 0 || typeFilter || hasFlags) {
+        if (val.length > 0 || hasFlags) {
             val = val.toLowerCase();
-            var i;
-            var j;
-            var list = [];
-            var nodes = {};
+            let i;
+            let j;
+            let list = [];
+            const nodes = {};
             let keys = [];
             if (flags.uses) {
                 keys = flags.uses;
@@ -145,10 +158,10 @@ RED.search = (function() {
                 keys = Object.keys(index);
             }
             for (i=0;i<keys.length;i++) {
-                var key = keys[i];
-                var kpos = keys[i].indexOf(val);
-                if (kpos > -1) {
-                    var ids = Object.keys(index[key]||{});
+                const key = keys[i];
+                const kpos = val ? keys[i].indexOf(val) : -1;
+                if (kpos > -1 || (val === "" && hasFlags)) {
+                    const ids = Object.keys(index[key]||{});
                     for (j=0;j<ids.length;j++) {
                         var node = index[key][ids[j]];
                         var isConfigNode = node.node._def.category === "config" && node.node.type !== 'group';
@@ -156,7 +169,7 @@ RED.search = (function() {
                             continue;
                         }
                         if (flags.hasOwnProperty("invalid")) {
-                            var nodeIsValid = !node.node.hasOwnProperty("valid") || node.node.valid;
+                            const nodeIsValid = !node.node.hasOwnProperty("valid") || node.node.valid;
                             if (flags.invalid === nodeIsValid) {
                                 continue;
                             }
@@ -186,8 +199,8 @@ RED.search = (function() {
                             }
                         }
                         if (flags.hasOwnProperty("unused")) {
-                            var isUnused = (node.node.type === 'subflow' && node.node.instances.length === 0) ||
-                                           (isConfigNode && node.node.users.length === 0)
+                            const isUnused = (node.node.type === 'subflow' && node.node.instances.length === 0) ||
+                                           (isConfigNode && node.node.users.length === 0 && node.node._def.hasUsers !== false)
                             if (flags.unused !== isUnused) {
                                 continue;
                             }
@@ -197,12 +210,16 @@ RED.search = (function() {
                                 continue;
                             }
                         }
-                        if (!typeFilter || node.node.type === typeFilter) {
-                            nodes[node.node.id] = nodes[node.node.id] = {
+                        let typeIndex = -1
+                        if(hasTypeFilter) {
+                            typeIndex = flags.type.indexOf(node.node.type)
+                        }
+                        if (!hasTypeFilter || typeIndex > -1) {
+                            nodes[node.node.id] = nodes[node.node.id] || {
                                 node: node.node,
                                 label: node.label
                             };
-                            nodes[node.node.id].index = Math.min(nodes[node.node.id].index||Infinity,kpos);
+                            nodes[node.node.id].index = Math.min(nodes[node.node.id].index || Infinity, typeIndex > -1 ? typeIndex : kpos);
                         }
                     }
                 }
@@ -538,7 +555,7 @@ RED.search = (function() {
                 $(previousActiveElement).trigger("focus");
             }
             previousActiveElement = null;
-        } 
+        }
         if(!keepSearchToolbar) {
             clearActiveSearch();
         }
@@ -630,7 +647,7 @@ RED.search = (function() {
         $("#red-ui-sidebar-shade").on('mousedown',hide);
 
         $("#red-ui-view-searchtools-close").on("click", function close() {
-            clearActiveSearch();            
+            clearActiveSearch();
             updateSearchToolbar();
         });
         $("#red-ui-view-searchtools-close").trigger("click");

packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js

@@ -273,6 +273,11 @@ RED.subflow = (function() {
         var subflowInstances = [];
         if (activeSubflow) {
             RED.nodes.filterNodes({type:"subflow:"+activeSubflow.id}).forEach(function(n) {
+                const parentFlow = RED.nodes.workspace(n.z)
+                const wasLocked = parentFlow && parentFlow.locked
+                if (wasLocked) {
+                    parentFlow.locked = false
+                }
                 subflowInstances.push({
                     id: n.id,
                     changed: n.changed
@@ -285,6 +290,9 @@ RED.subflow = (function() {
                 n.resize = true;
                 n.dirty = true;
                 RED.editor.updateNodeProperties(n);
+                if (wasLocked) {
+                    parentFlow.locked = true
+                }
             });
             RED.editor.validateNode(activeSubflow);
             return {
@@ -431,44 +439,7 @@ RED.subflow = (function() {
 
         $("#red-ui-subflow-delete").on("click", function(event) {
             event.preventDefault();
-            var subflow = RED.nodes.subflow(RED.workspaces.active());
-            if (subflow.instances.length > 0) {
-                var msg = $('<div>')
-                $('<p>').text(RED._("subflow.subflowInstances",{count: subflow.instances.length})).appendTo(msg);
-                $('<p>').text(RED._("subflow.confirmDelete")).appendTo(msg);
-                var confirmDeleteNotification = RED.notify(msg, {
-                    modal: true,
-                    fixed: true,
-                    buttons: [
-                        {
-                            text: RED._('common.label.cancel'),
-                            click: function() {
-                                confirmDeleteNotification.close();
-                            }
-                        },
-                        {
-                            text: RED._('workspace.confirmDelete'),
-                            class: "primary",
-                            click: function() {
-                                confirmDeleteNotification.close();
-                                completeDelete();
-                            }
-                        }
-                    ]
-                });
-
-                return;
-            } else {
-                completeDelete();
-            }
-            function completeDelete() {
-                var startDirty = RED.nodes.dirty();
-                var historyEvent = removeSubflow(RED.workspaces.active());
-                historyEvent.t = 'delete';
-                historyEvent.dirty = startDirty;
-                RED.history.push(historyEvent);
-            }
-
+            RED.subflow.delete(RED.workspaces.active())
         });
 
         refreshToolbar(activeSubflow);
@@ -481,7 +452,51 @@ RED.subflow = (function() {
         $("#red-ui-workspace-toolbar").hide().empty();
         $("#red-ui-workspace-chart").css({"margin-top": "0"});
     }
+    function deleteSubflow(id) {
+        const subflow = RED.nodes.subflow(id || RED.workspaces.active());
+        if (!subflow) {
+            return
+        }
+        if (subflow.instances.length > 0) {
+            if (subflow.instances.some(sf => { const ws = RED.nodes.workspace(sf.z); return ws?ws.locked:false })) {
+                return
+            }
+            const msg = $('<div>')
+            $('<p>').text(RED._("subflow.subflowInstances",{count: subflow.instances.length})).appendTo(msg);
+            $('<p>').text(RED._("subflow.confirmDelete")).appendTo(msg);
+            const confirmDeleteNotification = RED.notify(msg, {
+                modal: true,
+                fixed: true,
+                buttons: [
+                    {
+                        text: RED._('common.label.cancel'),
+                        click: function() {
+                            confirmDeleteNotification.close();
+                        }
+                    },
+                    {
+                        text: RED._('workspace.confirmDelete'),
+                        class: "primary",
+                        click: function() {
+                            confirmDeleteNotification.close();
+                            completeDelete();
+                        }
+                    }
+                ]
+            });
 
+            return;
+        } else {
+            completeDelete();
+        }
+        function completeDelete() {
+            const startDirty = RED.nodes.dirty();
+            const historyEvent = removeSubflow(subflow.id);
+            historyEvent.t = 'delete';
+            historyEvent.dirty = startDirty;
+            RED.history.push(historyEvent);
+        }
+    }
     function removeSubflow(id, keepInstanceNodes) {
         // TODO:  A lot of this logic is common with RED.nodes.removeWorkspace
         var removedNodes = [];
@@ -506,6 +521,13 @@ RED.subflow = (function() {
         RED.nodes.groups(id).forEach(function(n) {
             removedGroups.push(n);
         })
+
+        var removedJunctions = RED.nodes.junctions(id)
+        for (var i=0;i<removedJunctions.length;i++) {
+            var removedEntities = RED.nodes.removeJunction(removedJunctions[i])
+            removedLinks = removedLinks.concat(removedEntities.links)
+        }
+
         var removedConfigNodes = [];
         for (var i=0;i<removedNodes.length;i++) {
             var removedEntities = RED.nodes.remove(removedNodes[i].id);
@@ -536,6 +558,7 @@ RED.subflow = (function() {
             nodes:removedNodes,
             links:removedLinks,
             groups: removedGroups,
+            junctions: removedJunctions,
             subflows: [activeSubflow]
         }
     }
@@ -550,7 +573,7 @@ RED.subflow = (function() {
             }
         });
         RED.events.on("view:selection-changed",function(selection) {
-            if (!selection.nodes) {
+            if (!selection.nodes || RED.workspaces.isLocked()) {
                 RED.menu.setDisabled("menu-item-subflow-convert",true);
             } else {
                 RED.menu.setDisabled("menu-item-subflow-convert",false);
@@ -613,6 +636,9 @@ RED.subflow = (function() {
     }
 
     function convertToSubflow() {
+        if (RED.workspaces.isLocked()) {
+            return
+        }
         var selection = RED.view.selection();
         if (!selection.nodes) {
             RED.notify(RED._("subflow.errors.noNodesSelected"),"error");
@@ -768,7 +794,7 @@ RED.subflow = (function() {
         }
         subflowInstance._def = RED.nodes.getType(subflowInstance.type);
         RED.editor.validateNode(subflowInstance);
-        RED.nodes.add(subflowInstance);
+        subflowInstance = RED.nodes.add(subflowInstance);
 
         if (containingGroup) {
             RED.group.addToGroup(containingGroup, subflowInstance);
@@ -877,6 +903,7 @@ RED.subflow = (function() {
         RED.nodes.dirty(true);
         RED.view.updateActive();
         RED.view.select(null);
+        RED.view.focus();
     }
 
 
@@ -991,6 +1018,17 @@ RED.subflow = (function() {
                         default: inputType
                     })
                     input.typedInput('value',val.value)
+                    if (inputType === 'cred') {
+                        if (node.credentials) {
+                            if (node.credentials[tenv.name]) {
+                                input.typedInput('value', node.credentials[tenv.name]);
+                            } else if (node.credentials['has_'+tenv.name]) {
+                                input.typedInput('value', "__PWRD__")
+                            } else {
+                                input.typedInput('value', "");
+                            }
+                        }
+                    }
                 } else {
                     input.val(val.value)
                 }
@@ -1310,7 +1348,10 @@ RED.subflow = (function() {
         init: init,
         createSubflow: createSubflow,
         convertToSubflow: convertToSubflow,
+        // removeSubflow: Internal function to remove subflow
         removeSubflow: removeSubflow,
+        // delete: Prompt user for confirmation
+        delete: deleteSubflow,
         refresh: refresh,
         removeInput: removeSubflowInput,
         removeOutput: removeSubflowOutput,

packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js

@@ -43,12 +43,15 @@ RED.sidebar.config = (function() {
 
     var categories = {};
 
-    function getOrCreateCategory(name,parent,label) {
+    function getOrCreateCategory(name,parent,label,isLocked) {
         name = name.replace(/\./i,"-");
         if (!categories[name]) {
             var container = $('<div class="red-ui-palette-category red-ui-sidebar-config-category" id="red-ui-sidebar-config-category-'+name+'"></div>').appendTo(parent);
             var header = $('<div class="red-ui-sidebar-config-tray-header red-ui-palette-header"><i class="fa fa-angle-down expanded"></i></div>').appendTo(container);
+            let lockIcon
             if (label) {
+                lockIcon = $('<span style="margin-right: 5px"><i class="fa fa-lock"/></span>').appendTo(header)
+                lockIcon.toggle(!!isLocked)
                 $('<span class="red-ui-palette-node-config-label"/>').text(label).appendTo(header);
             } else {
                 $('<span class="red-ui-palette-node-config-label" data-i18n="sidebar.config.'+name+'">').appendTo(header);
@@ -62,6 +65,7 @@ RED.sidebar.config = (function() {
             var icon = header.find("i");
             var result = {
                 label: label,
+                lockIcon,
                 list: category,
                 size: function() {
                     return result.list.find("li:not(.red-ui-palette-node-config-none)").length
@@ -100,6 +104,9 @@ RED.sidebar.config = (function() {
             });
             categories[name] = result;
         } else {
+            if (isLocked !== undefined && categories[name].lockIcon) {
+                categories[name].lockIcon.toggle(!!isLocked)
+            }
             if (categories[name].label !== label) {
                 categories[name].list.parent().find('.red-ui-palette-node-config-label').text(label);
                 categories[name].label = label;
@@ -138,17 +145,19 @@ RED.sidebar.config = (function() {
         } else {
             var currentType = "";
             nodes.forEach(function(node) {
-                var label = RED.utils.getNodeLabel(node,node.id);
+                var labelText = RED.utils.getNodeLabel(node,node.id);
                 if (node.type != currentType) {
                     $('<li class="red-ui-palette-node-config-type">'+node.type+'</li>').appendTo(list);
                     currentType = node.type;
                 }
-
+                if (node.changed) {
+                    labelText += "!!"
+                }
                 var entry = $('<li class="red-ui-palette-node_id_'+node.id.replace(/\./g,"-")+'"></li>').appendTo(list);
                 var nodeDiv = $('<div class="red-ui-palette-node-config red-ui-palette-node"></div>').appendTo(entry);
                 entry.data('node',node.id);
                 nodeDiv.data('node',node.id);
-                var label = $('<div class="red-ui-palette-label"></div>').text(label).appendTo(nodeDiv);
+                var label = $('<div class="red-ui-palette-label"></div>').text(labelText).appendTo(nodeDiv);
                 if (node.d) {
                     nodeDiv.addClass("red-ui-palette-node-config-disabled");
                     $('<i class="fa fa-ban"></i>').prependTo(label);
@@ -216,7 +225,7 @@ RED.sidebar.config = (function() {
 
         RED.nodes.eachWorkspace(function(ws) {
             validList[ws.id.replace(/\./g,"-")] = true;
-            getOrCreateCategory(ws.id,flowCategories,ws.label);
+            getOrCreateCategory(ws.id,flowCategories,ws.label, ws.locked);
         })
         RED.nodes.eachSubflow(function(sf) {
             validList[sf.id.replace(/\./g,"-")] = true;
@@ -274,6 +283,15 @@ RED.sidebar.config = (function() {
                     changes: {},
                     dirty: RED.nodes.dirty()
                 }
+                for (let i = 0; i < selectedNodes.length; i++) {
+                    let node = RED.nodes.node(selectedNodes[i])
+                    if (node.z) {
+                        let ws = RED.nodes.workspace(node.z)
+                        if (ws && ws.locked) {
+                            return
+                        }
+                    }
+                }
                 selectedNodes.forEach(function(id) {
                     var node = RED.nodes.node(id);
                     try {

packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js

@@ -20,10 +20,8 @@ RED.sidebar.help = (function() {
     var helpSection;
     var panels;
     var panelRatio;
-    var helpTopics = [];
     var treeList;
     var tocPanel;
-    var helpIndex = {};
 
     function resizeStack() {
         var h = $(content).parent().height() - toolbar.outerHeight();
@@ -52,7 +50,7 @@ RED.sidebar.help = (function() {
 
         tocPanel = $("<div>", {class: "red-ui-sidebar-help-toc"}).appendTo(stackContainer);
         var helpPanel = $("<div>").css({
-            "overflow-y": "scroll"
+            "overflow-y": "auto"
         }).appendTo(stackContainer);
 
         panels = RED.panels.create({
@@ -97,7 +95,10 @@ RED.sidebar.help = (function() {
         var pendingContentLoad;
         treeList.on('treelistselect', function(e,item) {
             pendingContentLoad = item;
-            if (item.nodeType) {
+            if (item.tour) {
+                RED.tourGuide.run(item.tour);
+            }
+            else if (item.nodeType) {
                 showNodeTypeHelp(item.nodeType);
             } else if (item.content) {
                 helpSection.empty();
@@ -140,7 +141,8 @@ RED.sidebar.help = (function() {
         RED.events.on('registry:node-type-removed', queueRefresh);
         RED.events.on('subflows:change', refreshSubflow);
 
-        RED.actions.add("core:show-help-tab",show);
+        RED.actions.add("core:show-help-tab", show);
+        RED.actions.add("core:show-node-help", showNodeHelp)
 
     }
 
@@ -189,7 +191,6 @@ RED.sidebar.help = (function() {
     }
 
     function refreshHelpIndex() {
-        helpTopics = [];
         var modules = RED.nodes.registry.getModuleList();
         var moduleNames = Object.keys(modules);
         moduleNames.sort();
@@ -198,15 +199,32 @@ RED.sidebar.help = (function() {
             label: RED._("sidebar.help.nodeHelp"),
             children: [],
             expanded: true
-        }
+        };
+        var tours = RED.tourGuide.list().map(function (item) {
+            return {
+                icon: "fa fa-play-circle-o",
+                label: item.label,
+                tour: item.path,
+            };
+        });
         var helpData = [
             {
-                id: 'changelog',
-                label: "Node-RED v"+RED.settings.version,
-                content: getChangelog
+                label: "Node-RED",
+                children: [
+                    {
+                        id: 'changelog',
+                        label: RED._("sidebar.help.changeLog"),
+                        content: getChangelog
+                    },
+                    {
+                        label: RED._("tourGuide.welcomeTours"),
+                        children: tours
+                    }
+
+                ]
             },
             nodeHelp
-        ]
+        ];
         var subflows = RED.nodes.registry.getNodeTypes().filter(function(t) {return /subflow/.test(t)});
         if (subflows.length > 0) {
             nodeHelp.children.push({
@@ -321,6 +339,19 @@ RED.sidebar.help = (function() {
         resizeStack();
     }
 
+    function showNodeHelp(node) {
+        if (!node) {
+            const selection = RED.view.selection()
+            if (selection.nodes && selection.nodes.length > 0) {
+                node = selection.nodes.find(n => n.type !== 'group' && n.type !== 'junction')
+            }
+        }
+        if (node) {
+            show(node.type, true)
+        }
+    }
+
+
     // TODO: DRY - projects.js
     function addTargetToExternalLinks(el) {
         $(el).find("a").each(function(el) {

packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js

@@ -135,6 +135,10 @@ RED.sidebar.info.outliner = (function() {
                     RED.workspaces.show(n.id, null, true);
                 }
             });
+            RED.popover.tooltip(toggleVisibleButton, function () {
+                var isHidden = !div.hasClass("red-ui-info-outline-item-hidden");
+                return RED._("sidebar.info." + (isHidden ? "hideFlow" : "showFlow"));
+            });
         }
         if (n.type !== 'subflow') {
             var toggleButton = $('<button type="button" class="red-ui-info-outline-item-control-disable red-ui-button red-ui-button-small"><i class="fa fa-circle-thin"></i><i class="fa fa-ban"></i></button>').appendTo(controls).on("click",function(evt) {
@@ -221,6 +225,22 @@ RED.sidebar.info.outliner = (function() {
         } else {
             $('<div class="red-ui-info-outline-item-control-spacer">').appendTo(controls)
         }
+        if (n.type === 'tab') {
+            var lockToggleButton = $('<button type="button" class="red-ui-info-outline-item-control-lock red-ui-button red-ui-button-small"><i class="fa fa-unlock-alt"></i><i class="fa fa-lock"></i></button>').appendTo(controls).on("click",function(evt) {
+                evt.preventDefault();
+                evt.stopPropagation();
+                if (n.locked) {
+                    RED.workspaces.unlock(n.id)
+                } else {
+                    RED.workspaces.lock(n.id)
+                }
+            })
+            RED.popover.tooltip(lockToggleButton,function() {
+                return RED._("common.label."+(n.locked?"unlock":"lock"));
+            });
+        } else {
+            $('<div class="red-ui-info-outline-item-control-spacer">').appendTo(controls)
+        }
         controls.find("button").on("dblclick", function(evt) {
             evt.preventDefault();
             evt.stopPropagation();
@@ -364,6 +384,8 @@ RED.sidebar.info.outliner = (function() {
         flowList.treeList.addChild(objects[ws.id])
         objects[ws.id].element.toggleClass("red-ui-info-outline-item-disabled", !!ws.disabled)
         objects[ws.id].treeList.container.toggleClass("red-ui-info-outline-item-disabled", !!ws.disabled)
+        objects[ws.id].element.toggleClass("red-ui-info-outline-item-locked", !!ws.locked)
+        objects[ws.id].treeList.container.toggleClass("red-ui-info-outline-item-locked", !!ws.locked)
         updateSearch();
 
     }
@@ -378,6 +400,8 @@ RED.sidebar.info.outliner = (function() {
         existingObject.element.find(".red-ui-info-outline-item-label").text(label);
         existingObject.element.toggleClass("red-ui-info-outline-item-disabled", !!n.disabled)
         existingObject.treeList.container.toggleClass("red-ui-info-outline-item-disabled", !!n.disabled)
+        existingObject.element.toggleClass("red-ui-info-outline-item-locked", !!n.locked)
+        existingObject.treeList.container.toggleClass("red-ui-info-outline-item-locked", !!n.locked)
         updateSearch();
     }
     function onFlowsReorder(order) {
@@ -613,6 +637,9 @@ RED.sidebar.info.outliner = (function() {
                 objects[n.id].children = missingParents[n.id];
                 delete missingParents[n.id]
             }
+            if (objects[n.id].children.length === 0) {
+                objects[n.id].children.push(getEmptyItem(n.id));
+            }
         }
         var parent = n.g||n.z||"__global__";
 

packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js

@@ -25,6 +25,7 @@ RED.sidebar.info = (function() {
     var propertiesPanelHeaderLabel;
     var propertiesPanelHeaderReveal;
     var propertiesPanelHeaderHelp;
+    var propertiesPanelHeaderCopyLink;
 
     var selectedObject;
 
@@ -67,10 +68,20 @@ RED.sidebar.info = (function() {
 
         propertiesPanelHeaderIcon = $("<span>").appendTo(propertiesPanelHeader);
         propertiesPanelHeaderLabel = $("<span>").appendTo(propertiesPanelHeader);
-        propertiesPanelHeaderHelp = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-book"></button>').css({
+
+        propertiesPanelHeaderCopyLink = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-link"></button>').css({
             position: 'absolute',
             top: '12px',
             right: '32px'
+        }).on("click", function(evt) {
+            RED.actions.invoke('core:copy-item-url',selectedObject)
+        }).appendTo(propertiesPanelHeader);
+        RED.popover.tooltip(propertiesPanelHeaderCopyLink,RED._("sidebar.info.copyItemUrl"));
+
+        propertiesPanelHeaderHelp = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-book"></button>').css({
+            position: 'absolute',
+            top: '12px',
+            right: '56px'
         }).on("click", function(evt) {
             evt.preventDefault();
             evt.stopPropagation();
@@ -80,8 +91,7 @@ RED.sidebar.info = (function() {
         }).appendTo(propertiesPanelHeader);
         RED.popover.tooltip(propertiesPanelHeaderHelp,RED._("sidebar.help.showHelp"));
 
-
-        propertiesPanelHeaderReveal = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-search"></button>').css({
+        propertiesPanelHeaderReveal = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-search"></button>').css({
             position: 'absolute',
             top: '12px',
             right: '8px'
@@ -98,7 +108,7 @@ RED.sidebar.info = (function() {
 
         propertiesPanelContent = $("<div>").css({
             "flex":"1 1 auto",
-            "overflow-y":"scroll",
+            "overflow-y":"auto",
         }).appendTo(propertiesPanel);
 
 
@@ -185,6 +195,7 @@ RED.sidebar.info = (function() {
             propertiesPanelHeaderLabel.text("");
             propertiesPanelHeaderReveal.hide();
             propertiesPanelHeaderHelp.hide();
+            propertiesPanelHeaderCopyLink.hide();
             return;
         } else if (Array.isArray(node)) {
             // Multiple things selected
@@ -196,6 +207,7 @@ RED.sidebar.info = (function() {
             propertiesPanelHeaderLabel.text("Selection");
             propertiesPanelHeaderReveal.hide();
             propertiesPanelHeaderHelp.hide();
+            propertiesPanelHeaderCopyLink.hide();
             selectedObject = null;
 
             var types = {
@@ -277,9 +289,11 @@ RED.sidebar.info = (function() {
             if (node.type === "tab" || node.type === "subflow") {
                 // If nothing is selected, but we're on a flow or subflow tab.
                 propertiesPanelHeaderHelp.hide();
+                propertiesPanelHeaderCopyLink.show();
 
             } else if (node.type === "group") {
                 propertiesPanelHeaderHelp.hide();
+                propertiesPanelHeaderCopyLink.show();
 
                 propRow = $('<tr class="red-ui-help-info-row"><td>&nbsp;</td><td></td></tr>').appendTo(tableBody);
 
@@ -304,8 +318,10 @@ RED.sidebar.info = (function() {
                 }
             } else if (node.type === 'junction') {
                 propertiesPanelHeaderHelp.hide();
+                propertiesPanelHeaderCopyLink.hide();
             } else {
                 propertiesPanelHeaderHelp.show();
+                propertiesPanelHeaderCopyLink.show();
 
                 if (!subflowRegex) {
                     propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.type")+'</td><td></td></tr>').appendTo(tableBody);
@@ -447,7 +463,8 @@ RED.sidebar.info = (function() {
                     el = el.next();
                 }
                 $(this).toggleClass('expanded',!isExpanded);
-            })
+            });
+        mermaid.init();
     }
 
     var tips = (function() {

packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js

@@ -433,9 +433,35 @@ RED.tourGuide = (function() {
         })
     }
 
+    function listTour() {
+        return [
+            {
+                id: "3_1",
+                label: "3.1",
+                path: "./tours/welcome.js"
+            },
+            {
+                id: "3_0",
+                label: "3.0",
+                path: "./tours/3.0/welcome.js"
+            },
+            {
+                id: "2_2",
+                label: "2.2",
+                path: "./tours/2.2/welcome.js"
+            },
+            {
+                id: "2_1",
+                label: "2.1",
+                path: "./tours/2.1/welcome.js"
+            }
+        ];
+    }
+
     return {
         load: loadTour,
         run: run,
+        list: listTour,
         reset: function() {
             RED.settings.set("editor.tours.welcome",'');
         }

packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js

@@ -269,8 +269,8 @@ RED.typeSearch = (function() {
         moveCallback = opts.move;
         RED.events.emit("type-search:open");
         //shade.show();
-        if ($("#red-ui-main-container").height() - opts.y - 150 < 0) {
-            opts.y = opts.y - 235;
+        if ($("#red-ui-main-container").height() - opts.y - 195 < 0) {
+            opts.y = opts.y - 275;
         }
         dialog.css({left:opts.x+"px",top:opts.y+"px"}).show();
         searchResultsDiv.slideDown(300);

packages/node_modules/@node-red/editor-client/src/js/ui/utils.js

@@ -96,6 +96,37 @@ RED.utils = (function() {
         }
     }
 
+    var mermaidIsInitialized = false;
+    var mermaidIsEnabled /* = undefined */;
+
+    renderer.code = function (code, lang) {
+        if(lang === "mermaid") {
+            // mermaid diagram rendering 
+            if (mermaidIsEnabled === undefined) {
+                if (RED.settings.markdownEditor &&
+                    RED.settings.markdownEditor.mermaid) {
+                    mermaidIsEnabled = RED.settings.markdownEditor.mermaid.enabled;
+                }
+                else {
+                    mermaidIsEnabled = true;
+                }
+            }
+            if (mermaidIsEnabled) {
+                if (!mermaidIsInitialized) {
+                    mermaidIsInitialized = true;
+                    mermaid.initialize({startOnLoad:false});
+                }
+                return `<pre class='mermaid'>${code}</pre>`;
+            }
+            else {
+                return `<details><summary>${RED._("markdownEditor.mermaid.summary")}</summary><pre><code>${code}</code></pre></details>`;
+            }
+        }
+        else {
+            return "<pre><code>" +code +"</code></pre>";
+        }
+    };
+
     window._marked.setOptions({
         renderer: renderer,
         gfm: true,

packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js

@@ -17,9 +17,9 @@
 
  RED.view.navigator = (function() {
 
-     var nav_scale = 25;
-     var nav_width = 5000/nav_scale;
-     var nav_height = 5000/nav_scale;
+     var nav_scale = 50;
+     var nav_width = 8000/nav_scale;
+     var nav_height = 8000/nav_scale;
 
      var navContainer;
      var navBox;

packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js

@@ -15,7 +15,7 @@
  **/
 
 RED.view.tools = (function() {
-
+    'use strict';
     function selectConnected(type) {
         var selection = RED.view.selection();
         var visited = new Set();
@@ -39,6 +39,9 @@ RED.view.tools = (function() {
     }
 
     function alignToGrid() {
+        if (RED.workspaces.isLocked()) {
+            return
+        }
         var selection = RED.view.selection();
         if (selection.nodes) {
             var changedNodes = [];
@@ -87,6 +90,9 @@ RED.view.tools = (function() {
     }
 
     function moveSelection(dx,dy) {
+        if (RED.workspaces.isLocked()) {
+            return
+        }
         if (moving_set === null) {
             moving_set = [];
             var selection = RED.view.selection();
@@ -105,6 +111,9 @@ RED.view.tools = (function() {
                 $(document).one('keyup',endKeyboardMove);
                 endMoveSet = true;
             }
+            var dim = RED.view.dimensions();
+            var space_width = dim.width;
+            var space_height = dim.height;
             var minX = 0;
             var minY = 0;
             var node;
@@ -120,6 +129,12 @@ RED.view.tools = (function() {
                 node.n.dirty = true;
                 node.n.x += dx;
                 node.n.y += dy;
+                if ((node.n.x +node.n.w/2) >= space_width) {
+                    node.n.x = space_width -node.n.w/2;
+                }
+                if ((node.n.y +node.n.h/2) >= space_height) {
+                    node.n.y = space_height -node.n.h/2;
+                }
                 node.n.dirty = true;
                 if (node.n.type === "group") {
                     RED.group.markDirty(node.n);
@@ -144,6 +159,9 @@ RED.view.tools = (function() {
     }
 
     function setSelectedNodeLabelState(labelShown) {
+        if (RED.workspaces.isLocked()) {
+            return
+        }
         var selection = RED.view.selection();
         var historyEvents = [];
         var nodes = [];
@@ -430,6 +448,9 @@ RED.view.tools = (function() {
     }
 
     function alignSelectionToEdge(direction) {
+        if (RED.workspaces.isLocked()) {
+            return;
+        }
         var selection = RED.view.selection();
 
         if (selection.nodes && selection.nodes.length > 1) {
@@ -530,8 +551,10 @@ RED.view.tools = (function() {
         }
     }
 
-
     function distributeSelection(direction) {
+        if (RED.workspaces.isLocked()) {
+            return
+        }
         var selection = RED.view.selection();
 
         if (selection.nodes && selection.nodes.length > 2) {
@@ -690,14 +713,16 @@ RED.view.tools = (function() {
     }
 
     function reorderSelection(dir) {
+        if (RED.workspaces.isLocked()) {
+            return
+        }
         var selection = RED.view.selection();
         if (selection.nodes) {
             var nodesToMove = [];
             selection.nodes.forEach(function(n) {
                 if (n.type === "group") {
-                    nodesToMove = nodesToMove.concat(RED.group.getNodes(n, true).filter(function(n) {
-                        return n.type !== "group";
-                    }))
+                    nodesToMove.push(n)
+                    nodesToMove = nodesToMove.concat(RED.group.getNodes(n, true))
                 } else if (n.type !== "subflow"){
                     nodesToMove.push(n);
                 }
@@ -725,8 +750,10 @@ RED.view.tools = (function() {
         }
     }
 
-
     function wireSeriesOfNodes() {
+        if (RED.workspaces.isLocked()) {
+            return
+        }
         var selection = RED.view.selection();
         if (selection.nodes) {
             if (selection.nodes.length > 1) {
@@ -767,6 +794,9 @@ RED.view.tools = (function() {
     }
 
     function wireNodeToMultiple() {
+        if (RED.workspaces.isLocked()) {
+            return
+        }
         var selection = RED.view.selection();
         if (selection.nodes) {
             if (selection.nodes.length > 1) {
@@ -809,12 +839,73 @@ RED.view.tools = (function() {
         }
     }
 
+    function wireMultipleToNode() {
+        if (RED.workspaces.isLocked()) {
+            return
+        }
+        var selection = RED.view.selection();
+        if (selection.nodes) {
+            if (selection.nodes.length > 1) {
+                var targetNode = selection.nodes[selection.nodes.length - 1];
+                if (targetNode.inputs === 0) {
+                    return;
+                }
+                var i = 0;
+                var newLinks = [];
+                for (i = 0; i < selection.nodes.length - 1; i++) {
+                    var sourceNode = selection.nodes[i];
+                    if (sourceNode.outputs > 0) {
+                        
+                        // Wire the first output to the target that has no link to the target yet.
+                        // This allows for connecting all combinations of inputs/outputs. 
+                        // The user may then delete links quickly that aren't needed.
+                        var sourceConnectedOutports = RED.nodes.filterLinks({
+                            source: sourceNode,
+                            target: targetNode
+                        });
+
+                        // Get outport indices that have no link yet
+                        var sourceOutportIndices = Array.from({ length: sourceNode.outputs }, (_, i) => i);
+                        var sourceConnectedOutportIndices = sourceConnectedOutports.map( x => x.sourcePort );
+                        var sourceFreeOutportIndices = sourceOutportIndices.filter(x => !sourceConnectedOutportIndices.includes(x));
+
+                        // Does an unconnected source port exist?
+                        if (sourceFreeOutportIndices.length == 0) {
+                            continue;
+                        }
+                        
+                        // Connect the first free outport to the target
+                        var newLink = {
+                            source: sourceNode,
+                            target: targetNode,
+                            sourcePort: sourceFreeOutportIndices[0]
+                        }
+                        RED.nodes.addLink(newLink);
+                        newLinks.push(newLink);
+                    }
+                }
+                if (newLinks.length > 0) {
+                    RED.history.push({
+                        t: 'add',
+                        links: newLinks,
+                        dirty: RED.nodes.dirty()
+                    })
+                    RED.nodes.dirty(true);
+                    RED.view.redraw(true);
+                }
+            }
+        }
+    }
+
     /**
      * Splits selected wires and re-joins them with link-out+link-in
      * @param {Object || Object[]} wires The wire(s) to split and replace with link-out, link-in nodes.
      */
     function splitWiresWithLinkNodes(wires) {
-        let wiresToSplit = wires || RED.view.selection().links;
+        if (RED.workspaces.isLocked()) {
+            return
+        }
+        let wiresToSplit = wires || (RED.view.selection().links && RED.view.selection().links.filter(e => !e.link));
         if (!wiresToSplit) {
             return
         }
@@ -868,7 +959,6 @@ RED.view.tools = (function() {
             if(!nnLinkOut) {
                 const nLinkOut = RED.view.createNode("link out"); //create link node
                 nnLinkOut = nLinkOut.node;
-                nodeSrcMap[linkOutMapId] = nnLinkOut;
                 let yOffset = 0;
                 if(nSrc.outputs > 1) {
 
@@ -883,7 +973,8 @@ RED.view.tools = (function() {
                     updateNewNodePosXY(nSrc, nnLinkOut, false, RED.view.snapGrid, yOffset);
                 }
                 //add created node
-                RED.nodes.add(nnLinkOut);
+                nnLinkOut = RED.nodes.add(nnLinkOut);
+                nodeSrcMap[linkOutMapId] = nnLinkOut;
                 RED.editor.validateNode(nnLinkOut);
                 history.events.push(nLinkOut.historyEvent);
                 //connect node to link node
@@ -904,10 +995,10 @@ RED.view.tools = (function() {
             if(!nnLinkIn) {
                 const nLinkIn = RED.view.createNode("link in"); //create link node
                 nnLinkIn = nLinkIn.node;
-                nodeTrgMap[nTrg.id] = nnLinkIn;
                 updateNewNodePosXY(nTrg, nnLinkIn, true, RED.view.snapGrid, 0);
                 //add created node
-                RED.nodes.add(nnLinkIn);
+                nnLinkIn = RED.nodes.add(nnLinkIn);
+                nodeTrgMap[nTrg.id] = nnLinkIn;
                 RED.editor.validateNode(nnLinkIn);
                 history.events.push(nLinkIn.historyEvent);
                 //connect node to link node
@@ -979,13 +1070,17 @@ RED.view.tools = (function() {
      *  - it uses `<paletteLabel> <N>` - where N is the next available integer that
      *    doesn't clash with any existing nodes of that type
      * @param {Object} node The node to set the name of - if not provided, uses current selection
+     * @param {{ renameBlank: boolean, renameClash: boolean, generateHistory: boolean }} options Possible options are `renameBlank`, `renameClash` and `generateHistory`
      */
     function generateNodeNames(node, options) {
-        options = options || {
+        if (RED.workspaces.isLocked()) {
+            return
+        }
+        options = Object.assign({
             renameBlank: true,
             renameClash: true,
             generateHistory: true
-        }
+        }, options)
         let nodes = node;
         if (node) {
             if (!Array.isArray(node)) {
@@ -1005,7 +1100,7 @@ RED.view.tools = (function() {
                 const nodeDef = n._def || RED.nodes.getType(n.type)
                 if (nodeDef && nodeDef.defaults && nodeDef.defaults.name) {
                     const paletteLabel = RED.utils.getPaletteLabel(n.type, nodeDef)
-                    const defaultNodeNameRE = new RegExp('^'+paletteLabel+' (\\d+)$')
+                    const defaultNodeNameRE = new RegExp('^'+paletteLabel.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')+' (\\d+)$')
                     if (!typeIndex.hasOwnProperty(n.type)) {
                         const existingNodes = RED.nodes.filterNodes({type: n.type})
                         let maxNameNumber = 0;
@@ -1051,7 +1146,10 @@ RED.view.tools = (function() {
     }
 
     function addJunctionsToWires(wires) {
-        let wiresToSplit = wires || RED.view.selection().links;
+        if (RED.workspaces.isLocked()) {
+            return
+        }
+        let wiresToSplit = wires || (RED.view.selection().links && RED.view.selection().links.filter(e => !e.link));
         if (!wiresToSplit) {
             return
         }
@@ -1079,6 +1177,7 @@ RED.view.tools = (function() {
         linkGroups.sort(function(A,B) {
             return groupedLinks[B].length - groupedLinks[A].length
         })
+        const wasDirty = RED.nodes.dirty()
         linkGroups.forEach(function(gid) {
             var links = groupedLinks[gid]
             var junction = {
@@ -1091,7 +1190,8 @@ RED.view.tools = (function() {
                 w: 0, h: 0,
                 outputs: 1,
                 inputs: 1,
-                dirty: true
+                dirty: true,
+                moved: true
             }
             links = links.filter(function(l) { return !removedLinks.has(l) })
             if (links.length === 0) {
@@ -1120,7 +1220,7 @@ RED.view.tools = (function() {
 
             var nodeGroups = new Set()
 
-            RED.nodes.addJunction(junction)
+            junction = RED.nodes.addJunction(junction)
             addedJunctions.push(junction)
             let newLink
             if (gid === links[0].source.id+":"+links[0].sourcePort) {
@@ -1169,16 +1269,42 @@ RED.view.tools = (function() {
         })
         if (addedJunctions.length > 0) {
             RED.history.push({
+                dirty: wasDirty,
                 t: 'add',
                 links: addedLinks,
                 junctions: addedJunctions,
                 removedLinks: Array.from(removedLinks)
             })
             RED.nodes.dirty(true)
+            RED.view.select({nodes: addedJunctions });
         }
         RED.view.redraw(true);
     }
 
+    function copyItemUrl(node, isEdit) {
+        if (!node) {
+            const selection = RED.view.selection();
+            if (selection.nodes && selection.nodes.length > 0) {
+                node = selection.nodes[0]
+            }
+        }
+        if (node) {
+            let thingType = 'node'
+            if (node.type === 'group') {
+                thingType = 'group'
+            } else if (node.type === 'tab' || node.type === 'subflow') {
+                thingType = 'flow'
+            }
+            let url = `${window.location.origin}${window.location.pathname}#${thingType}/${node.id}`
+            if (isEdit) {
+                url += '/edit'
+            }
+            if (RED.clipboard.copyText(url)) {
+                RED.notify(RED._("sidebar.info.copyURL2Clipboard"), { timeout: 2000 })
+            }
+        }
+    }
+
     return {
         init: function() {
             RED.actions.add("core:show-selected-node-labels", function() { setSelectedNodeLabelState(true); })
@@ -1239,12 +1365,16 @@ RED.view.tools = (function() {
 
             RED.actions.add("core:wire-series-of-nodes", function() { wireSeriesOfNodes() })
             RED.actions.add("core:wire-node-to-multiple", function() { wireNodeToMultiple() })
+            RED.actions.add("core:wire-multiple-to-node", function() { wireMultipleToNode() })
 
             RED.actions.add("core:split-wire-with-link-nodes", function () { splitWiresWithLinkNodes() });
             RED.actions.add("core:split-wires-with-junctions", function () { addJunctionsToWires() });
 
             RED.actions.add("core:generate-node-names", generateNodeNames )
 
+            RED.actions.add("core:copy-item-url", function (node) { copyItemUrl(node) })
+            RED.actions.add("core:copy-item-edit-url", function (node) { copyItemUrl(node, true) })
+
             // RED.actions.add("core:add-node", function() { addNode() })
         },
         /**

packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js

@@ -58,6 +58,9 @@ RED.workspaces = (function() {
             if (!ws.closeable) {
                 ws.hideable = true;
             }
+            if (!ws.hasOwnProperty('locked')) {
+                ws.locked = false
+            }
             workspace_tabs.addTab(ws,targetIndex);
 
             var hiddenTabs = JSON.parse(RED.settings.getLocal("hiddenTabs")||"{}");
@@ -75,11 +78,15 @@ RED.workspaces = (function() {
                 type: "tab",
                 id: tabId,
                 disabled: false,
+                locked: false,
                 info: "",
                 label: RED._('workspace.defaultName',{number:workspaceIndex}),
                 env: [],
-                hideable: true
+                hideable: true,
             };
+            if (!skipHistoryEntry) {
+                ws.added = true
+            }
             RED.nodes.addWorkspace(ws,targetIndex);
             workspace_tabs.addTab(ws,targetIndex);
 
@@ -89,8 +96,7 @@ RED.workspaces = (function() {
                 RED.nodes.dirty(true);
             }
         }
-        $("#red-ui-tab-"+(ws.id.replace(".","-"))).attr("flowname",ws.label)
-
+        $("#red-ui-tab-"+(ws.id.replace(".","-"))).attr("flowname",ws.label).toggleClass('red-ui-workspace-changed',!!(ws.contentsChanged || ws.changed || ws.added));
         RED.view.focus();
         return ws;
     }
@@ -99,6 +105,9 @@ RED.workspaces = (function() {
         if (workspaceTabCount === 1) {
             return;
         }
+        if (ws.locked) {
+            return
+        }
         var workspaceOrder = RED.nodes.getWorkspaceOrder();
         ws._index = workspaceOrder.indexOf(ws.id);
         removeWorkspace(ws);
@@ -119,13 +128,206 @@ RED.workspaces = (function() {
                 RED.editor.editSubflow(subflow);
             }
         } else {
-            RED.editor.editFlow(workspace);
+            if (!workspace.locked) {
+                RED.editor.editFlow(workspace);
+            }
         }
     }
 
 
     var workspace_tabs;
     var workspaceTabCount = 0;
+
+    function getMenuItems(isMenuButton, tab) {
+        let hiddenFlows = new Set()
+        for (let i = 0; i < hideStack.length; i++) {
+            let ids = hideStack[i]
+            if (!Array.isArray(ids)) {
+                ids = [ids]
+            }
+            ids.forEach(id => {
+                if (RED.nodes.workspace(id)) {
+                    hiddenFlows.add(id)
+                }
+            })
+        }
+        const hiddenflowCount = hiddenFlows.size;
+        let activeWorkspace = tab || RED.nodes.workspace(RED.workspaces.active()) || RED.nodes.subflow(RED.workspaces.active())
+        let isFlowDisabled = activeWorkspace ? activeWorkspace.disabled : false
+        const currentTabs = workspace_tabs.listTabs();
+        let flowCount = 0;
+        currentTabs.forEach(tab => {
+            if (RED.nodes.workspace(tab)) {
+                flowCount++;
+            }
+        });
+
+        let isCurrentLocked = RED.workspaces.isLocked()
+        if (tab) {
+            isCurrentLocked = tab.locked
+        }
+
+        var menuItems = []
+        if (isMenuButton) {
+            menuItems.push({
+                id:"red-ui-tabs-menu-option-search-flows",
+                label: RED._("workspace.listFlows"),
+                onselect: "core:list-flows"
+            },
+            {
+                id:"red-ui-tabs-menu-option-search-subflows",
+                label: RED._("workspace.listSubflows"),
+                onselect: "core:list-subflows"
+            },
+            null)
+        }
+        menuItems.push(
+            {
+                id:"red-ui-tabs-menu-option-add-flow",
+                label: RED._("workspace.addFlow"),
+                onselect: "core:add-flow"
+            }
+        )
+        if (isMenuButton || !!tab) {
+            menuItems.push(
+                {
+                    id:"red-ui-tabs-menu-option-add-flow-right",
+                    label: RED._("workspace.addFlowToRight"),
+                    shortcut: RED.keyboard.getShortcut("core:add-flow-to-right"),
+                    onselect: function() {
+                        RED.actions.invoke("core:add-flow-to-right", tab)
+                    }
+                },
+                null
+            )
+            if (activeWorkspace && activeWorkspace.type === 'tab') {
+                menuItems.push(
+                    isFlowDisabled ? {
+                        label: RED._("workspace.enableFlow"),
+                        shortcut: RED.keyboard.getShortcut("core:enable-flow"),
+                        onselect: function() {
+                            RED.actions.invoke("core:enable-flow", tab?tab.id:undefined)
+                        },
+                        disabled: isCurrentLocked
+                    } : {
+                        label: RED._("workspace.disableFlow"),
+                        shortcut: RED.keyboard.getShortcut("core:disable-flow"),
+                        onselect: function() {
+                            RED.actions.invoke("core:disable-flow", tab?tab.id:undefined)
+                        },
+                        disabled: isCurrentLocked
+                    },
+                    isCurrentLocked? {
+                        label: RED._("workspace.unlockFlow"),
+                        shortcut: RED.keyboard.getShortcut("core:unlock-flow"),
+                        onselect: function() {
+                            RED.actions.invoke('core:unlock-flow', tab?tab.id:undefined)
+                        }
+                    } : {
+                        label: RED._("workspace.lockFlow"),
+                        shortcut: RED.keyboard.getShortcut("core:lock-flow"),
+                        onselect: function() {
+                            RED.actions.invoke('core:lock-flow', tab?tab.id:undefined)
+                        }
+                    },
+                    null
+                )
+            }
+            const activeIndex = currentTabs.findIndex(id => (activeWorkspace && (id === activeWorkspace.id)));
+            menuItems.push(
+                {
+                    label: RED._("workspace.moveToStart"),
+                    shortcut: RED.keyboard.getShortcut("core:move-flow-to-start"),
+                    onselect: function() {
+                        RED.actions.invoke("core:move-flow-to-start", tab?tab.id:undefined)
+                    },
+                    disabled: activeIndex === 0
+                },
+                {
+                    label: RED._("workspace.moveToEnd"),
+                    shortcut: RED.keyboard.getShortcut("core:move-flow-to-end"),
+                    onselect: function() {
+                        RED.actions.invoke("core:move-flow-to-end", tab?tab.id:undefined)
+                    },
+                    disabled: activeIndex === currentTabs.length - 1
+                }
+            )
+        }
+        menuItems.push(null)
+        if (isMenuButton || !!tab) {
+            menuItems.push(
+                {
+                    id:"red-ui-tabs-menu-option-add-hide-flows",
+                    label: RED._("workspace.hideFlow"),
+                    shortcut: RED.keyboard.getShortcut("core:hide-flow"),
+                    onselect: function() {
+                        RED.actions.invoke("core:hide-flow", tab)
+                    }
+                },
+                {
+                    id:"red-ui-tabs-menu-option-add-hide-other-flows",
+                    label: RED._("workspace.hideOtherFlows"),
+                    shortcut: RED.keyboard.getShortcut("core:hide-other-flows"),
+                    onselect: function() {
+                        RED.actions.invoke("core:hide-other-flows", tab)
+                    }
+                }
+            )
+
+        }
+        
+        menuItems.push(
+            {
+                id:"red-ui-tabs-menu-option-add-hide-all-flows",
+                label: RED._("workspace.hideAllFlows"),
+                onselect: "core:hide-all-flows",
+                disabled: (hiddenflowCount === flowCount)
+            },
+            {
+                id:"red-ui-tabs-menu-option-add-show-all-flows",
+                disabled: hiddenflowCount === 0,
+                label: RED._("workspace.showAllFlows", { count: hiddenflowCount }),
+                onselect: "core:show-all-flows"
+            },
+            {
+                id:"red-ui-tabs-menu-option-add-show-last-flow",
+                disabled: hideStack.length === 0,
+                label: RED._("workspace.showLastHiddenFlow"),
+                onselect: "core:show-last-hidden-flow"
+            }
+        )
+        if (tab) {
+            menuItems.push(
+                null,
+                {
+                    label: RED._("common.label.delete"),
+                    onselect: function() {
+                        if (tab.type === 'tab') {
+                            RED.workspaces.delete(tab)
+                        } else if (tab.type === 'subflow') {
+                            RED.subflow.delete(tab.id)
+                        }
+                    },
+                    disabled: isCurrentLocked || (workspaceTabCount === 1)
+                },
+                {
+                    label: RED._("menu.label.export"),
+                    shortcut: RED.keyboard.getShortcut("core:show-export-dialog"),
+                    onselect: function() {
+                        RED.workspaces.show(tab.id)
+                        RED.actions.invoke('core:show-export-dialog', null, 'flow')
+                    }
+                }
+            )
+        }
+        // if (isMenuButton && hiddenflowCount > 0) {
+        //     menuItems.unshift({
+        //         label: RED._("workspace.hiddenFlows",{count: hiddenflowCount}),
+        //         onselect: "core:list-hidden-flows"
+        //     })
+        // }
+        return menuItems;
+    }
     function createWorkspaceTabs() {
         workspace_tabs = RED.tabs.create({
             id: "red-ui-workspace-tabs",
@@ -137,8 +339,9 @@ RED.workspaces = (function() {
                     $("#red-ui-workspace-chart").show();
                     activeWorkspace = tab.id;
                     window.location.hash = 'flow/'+tab.id;
-                    $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!tab.disabled);
-                    } else {
+                    $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled", !!tab.disabled);
+                    $("#red-ui-workspace").toggleClass("red-ui-workspace-locked", !!tab.locked);
+                } else {
                     $("#red-ui-workspace-chart").hide();
                     activeWorkspace = 0;
                     window.location.hash = '';
@@ -169,6 +372,18 @@ RED.workspaces = (function() {
                 if (tab.disabled) {
                     $("#red-ui-tab-"+(tab.id.replace(".","-"))).addClass('red-ui-workspace-disabled');
                 }
+                $('<span class="red-ui-workspace-locked-icon"><i class="fa fa-lock"></i> </span>').prependTo("#red-ui-tab-"+(tab.id.replace(".","-"))+" .red-ui-tab-label");
+                if (tab.locked) {
+                    $("#red-ui-tab-"+(tab.id.replace(".","-"))).addClass('red-ui-workspace-locked');
+                }
+
+                const changeBadgeContainer = $('<svg class="red-ui-flow-tab-changed red-ui-flow-node-changed" width="10" height="10" viewBox="-1 -1 12 12"></svg>').appendTo("#red-ui-tab-"+(tab.id.replace(".","-")))
+                const changeBadge = document.createElementNS("http://www.w3.org/2000/svg","circle");
+                changeBadge.setAttribute("cx",5);
+                changeBadge.setAttribute("cy",5);
+                changeBadge.setAttribute("r",5);
+                changeBadgeContainer.append(changeBadge)
+
                 RED.menu.setDisabled("menu-item-workspace-delete",activeWorkspace === 0 || workspaceTabCount <= 1);
                 if (workspaceTabCount === 1) {
                     showWorkspace();
@@ -189,13 +404,19 @@ RED.workspaces = (function() {
                 RED.history.push({
                     t:'reorder',
                     workspaces: {
-                        from:oldOrder,
-                        to:newOrder
+                        from: oldOrder,
+                        to: newOrder
                     },
                     dirty:RED.nodes.dirty()
                 });
-                RED.nodes.dirty(true);
-                setWorkspaceOrder(newOrder);
+                // Only mark flows dirty if flow-order has changed (excluding subflows)
+                const filteredOldOrder = oldOrder.filter(id => !!RED.nodes.workspace(id))
+                const filteredNewOrder = newOrder.filter(id => !!RED.nodes.workspace(id))
+
+                if (JSON.stringify(filteredOldOrder) !== JSON.stringify(filteredNewOrder)) {
+                    RED.nodes.dirty(true);
+                    setWorkspaceOrder(newOrder);
+                }
             },
             onselect: function(selectedTabs) {
                 RED.view.select(false)
@@ -214,12 +435,12 @@ RED.workspaces = (function() {
             },
             onhide: function(tab) {
                 hideStack.push(tab.id);
-
-                var hiddenTabs = JSON.parse(RED.settings.getLocal("hiddenTabs")||"{}");
-                hiddenTabs[tab.id] = true;
-                RED.settings.setLocal("hiddenTabs",JSON.stringify(hiddenTabs));
-
-                RED.events.emit("workspace:hide",{workspace: tab.id})
+                if (tab.type === "tab") {
+                    var hiddenTabs = JSON.parse(RED.settings.getLocal("hiddenTabs")||"{}");
+                    hiddenTabs[tab.id] = true;
+                    RED.settings.setLocal("hiddenTabs",JSON.stringify(hiddenTabs));
+                    RED.events.emit("workspace:hide",{workspace: tab.id})
+                }
             },
             onshow: function(tab) {
                 removeFromHideStack(tab.id);
@@ -234,64 +455,8 @@ RED.workspaces = (function() {
             scrollable: true,
             addButton: "core:add-flow",
             addButtonCaption: RED._("workspace.addFlow"),
-            menu: function() {
-                var menuItems = [
-                    {
-                        id:"red-ui-tabs-menu-option-search-flows",
-                        label: RED._("workspace.listFlows"),
-                        onselect: "core:list-flows"
-                    },
-                    {
-                        id:"red-ui-tabs-menu-option-search-subflows",
-                        label: RED._("workspace.listSubflows"),
-                        onselect: "core:list-subflows"
-                    },
-                    null,
-                    {
-                        id:"red-ui-tabs-menu-option-add-flow",
-                        label: RED._("workspace.addFlow"),
-                        onselect: "core:add-flow"
-                    },
-                    {
-                        id:"red-ui-tabs-menu-option-add-flow-right",
-                        label: RED._("workspace.addFlowToRight"),
-                        onselect: "core:add-flow-to-right"
-                    },
-                    null,
-                    {
-                        id:"red-ui-tabs-menu-option-add-hide-flows",
-                        label: RED._("workspace.hideFlow"),
-                        onselect: "core:hide-flow"
-                    },
-                    {
-                        id:"red-ui-tabs-menu-option-add-hide-other-flows",
-                        label: RED._("workspace.hideOtherFlows"),
-                        onselect: "core:hide-other-flows"
-                    },
-                    {
-                        id:"red-ui-tabs-menu-option-add-show-all-flows",
-                        label: RED._("workspace.showAllFlows"),
-                        onselect: "core:show-all-flows"
-                    },
-                    {
-                        id:"red-ui-tabs-menu-option-add-hide-all-flows",
-                        label: RED._("workspace.hideAllFlows"),
-                        onselect: "core:hide-all-flows"
-                    },
-                    {
-                        id:"red-ui-tabs-menu-option-add-show-last-flow",
-                        label: RED._("workspace.showLastHiddenFlow"),
-                        onselect: "core:show-last-hidden-flow"
-                    }
-                ]
-                if (hideStack.length > 0) {
-                    menuItems.unshift({
-                        label: RED._("workspace.hiddenFlows",{count: hideStack.length}),
-                        onselect: "core:list-hidden-flows"
-                    })
-                }
-                return menuItems;
-            }
+            menu: function() { return getMenuItems(true) },
+            contextmenu: function(tab) { return getMenuItems(false, tab) }
         });
         workspaceTabCount = 0;
     }
@@ -342,16 +507,33 @@ RED.workspaces = (function() {
         });
 
         RED.actions.add("core:add-flow",function(opts) { addWorkspace(undefined,undefined,opts?opts.index:undefined)});
-        RED.actions.add("core:add-flow-to-right",function(opts) { addWorkspace(undefined,undefined,workspace_tabs.activeIndex()+1)});
+        RED.actions.add("core:add-flow-to-right",function(workspace) {
+            let index
+            if (workspace) {
+                index = workspace_tabs.getTabIndex(workspace.id)+1
+            } else {
+                index = workspace_tabs.activeIndex()+1
+            }
+            addWorkspace(undefined,undefined,index)
+        });
         RED.actions.add("core:edit-flow",editWorkspace);
         RED.actions.add("core:remove-flow",removeWorkspace);
         RED.actions.add("core:enable-flow",enableWorkspace);
         RED.actions.add("core:disable-flow",disableWorkspace);
+        RED.actions.add("core:lock-flow",lockWorkspace);
+        RED.actions.add("core:unlock-flow",unlockWorkspace);
+        RED.actions.add("core:move-flow-to-start", function(id) { moveWorkspace(id, 'start') });
+        RED.actions.add("core:move-flow-to-end", function(id) { moveWorkspace(id, 'end') });
 
-        RED.actions.add("core:hide-flow", function() {
-            var selection = workspace_tabs.selection();
-            if (selection.length === 0) {
-                selection = [{id:activeWorkspace}]
+        RED.actions.add("core:hide-flow", function(workspace) {
+            let selection
+            if (workspace) {
+                selection = [workspace]
+            } else {
+                selection = workspace_tabs.selection();
+                if (selection.length === 0) {
+                    selection = [{id:activeWorkspace}]
+                }
             }
             var hiddenTabs = [];
             selection.forEach(function(ws) {
@@ -365,10 +547,15 @@ RED.workspaces = (function() {
             workspace_tabs.clearSelection();
         })
 
-        RED.actions.add("core:hide-other-flows", function() {
-            var selection = workspace_tabs.selection();
-            if (selection.length === 0) {
-                selection = [{id:activeWorkspace}]
+        RED.actions.add("core:hide-other-flows", function(workspace) {
+            let selection
+            if (workspace) {
+                selection = [workspace]
+            } else {
+                selection = workspace_tabs.selection();
+                if (selection.length === 0) {
+                    selection = [{id:activeWorkspace}]
+                }
             }
             var selected = new Set(selection.map(function(ws) { return ws.id }))
 
@@ -458,6 +645,11 @@ RED.workspaces = (function() {
                 RED.workspaces.show(viewStack[++viewStackPos],true);
             }
         })
+
+        RED.events.on("flows:change", (ws) => {
+            $("#red-ui-tab-"+(ws.id.replace(".","-"))).toggleClass('red-ui-workspace-changed',!!(ws.contentsChanged || ws.changed || ws.added));
+        })
+
         hideWorkspace();
     }
 
@@ -473,7 +665,7 @@ RED.workspaces = (function() {
     }
     function setWorkspaceState(id,disabled) {
         var workspace = RED.nodes.workspace(id||activeWorkspace);
-        if (!workspace) {
+        if (!workspace || workspace.locked) {
             return;
         }
         if (workspace.disabled !== disabled) {
@@ -508,11 +700,47 @@ RED.workspaces = (function() {
             }
         }
     }
+    function lockWorkspace(id) {
+        setWorkspaceLockState(id,true);
+    }
+    function unlockWorkspace(id) {
+        setWorkspaceLockState(id,false);
+    }
+    function setWorkspaceLockState(id,locked) {
+        var workspace = RED.nodes.workspace(id||activeWorkspace);
+        if (!workspace) {
+            return;
+        }
+        if (workspace.locked !== locked) {
+            var changes = { locked: workspace.locked };
+            workspace.locked = locked;
+            $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-workspace-locked',!!workspace.locked);
+            if (!id || (id === activeWorkspace)) {
+                $("#red-ui-workspace").toggleClass("red-ui-workspace-locked",!!workspace.locked);
+            }
+            var historyEvent = {
+                t: "edit",
+                changes:changes,
+                node: workspace,
+                dirty: RED.nodes.dirty()
+            }
+            workspace.changed = true;
+            RED.history.push(historyEvent);
+            RED.events.emit("flows:change",workspace);
+            RED.nodes.dirty(true);
+            RED.nodes.filterNodes({z:workspace.id}).forEach(n => n.dirty = true)
+            RED.view.redraw(true);
+        }
+    }
 
     function removeWorkspace(ws) {
         if (!ws) {
-            deleteWorkspace(RED.nodes.workspace(activeWorkspace));
+            ws = RED.nodes.workspace(activeWorkspace)
+            if (ws && !ws.locked) {
+                deleteWorkspace(RED.nodes.workspace(activeWorkspace));
+            }
         } else {
+            if (ws.locked) { return }
             if (workspace_tabs.contains(ws.id)) {
                 workspace_tabs.removeTab(ws.id);
             }
@@ -522,16 +750,46 @@ RED.workspaces = (function() {
         }
     }
 
+    function moveWorkspace(id, direction) {
+        const workspace = RED.nodes.workspace(id||activeWorkspace) || RED.nodes.subflow(id||activeWorkspace);
+        if (!workspace) {
+            return;
+        }
+        const currentOrder = workspace_tabs.listTabs()
+        const oldOrder = [...currentOrder]
+        const currentIndex = currentOrder.findIndex(id => id === workspace.id)
+        currentOrder.splice(currentIndex, 1)
+        if (direction === 'start') {
+            currentOrder.unshift(workspace.id)
+        } else if (direction === 'end') {
+            currentOrder.push(workspace.id)
+        }
+        const newOrder = setWorkspaceOrder(currentOrder)
+        if (JSON.stringify(newOrder) !== JSON.stringify(oldOrder)) {
+            RED.history.push({
+                t:'reorder',
+                workspaces: {
+                    from:oldOrder,
+                    to:newOrder
+                },
+                dirty:RED.nodes.dirty()
+            });
+            const filteredOldOrder = oldOrder.filter(id => !!RED.nodes.workspace(id))
+            const filteredNewOrder = newOrder.filter(id => !!RED.nodes.workspace(id))
+            if (JSON.stringify(filteredOldOrder) !== JSON.stringify(filteredNewOrder)) {
+                RED.nodes.dirty(true);
+            }
+        }
+    }
     function setWorkspaceOrder(order) {
-        var newOrder = order.filter(function(id) {
-            return RED.nodes.workspace(id) !== undefined;
-        })
+        var newOrder = order.filter(id => !!RED.nodes.workspace(id))
         var currentOrder = RED.nodes.getWorkspaceOrder();
         if (JSON.stringify(newOrder) !== JSON.stringify(currentOrder)) {
             RED.nodes.setWorkspaceOrder(newOrder);
             RED.events.emit("flows:reorder",newOrder);
         }
         workspace_tabs.order(order);
+        return newOrder
     }
 
     function flashTab(tabId) {
@@ -577,6 +835,11 @@ RED.workspaces = (function() {
         active: function() {
             return activeWorkspace
         },
+        isLocked: function(id) {
+            id = id || activeWorkspace
+            var ws = RED.nodes.workspace(id) || RED.nodes.subflow(id)
+            return ws && ws.locked
+        },
         selection: function() {
             return workspace_tabs.selection();
         },
@@ -633,6 +896,8 @@ RED.workspaces = (function() {
             workspace_tabs.resize();
         },
         enable: enableWorkspace,
-        disable: disableWorkspace
+        disable: disableWorkspace,
+        lock: lockWorkspace,
+        unlock: unlockWorkspace
     }
 })();

packages/node_modules/@node-red/editor-client/src/sass/ace.scss

@@ -2,48 +2,48 @@
 
     .ace_read-only {
         .ace_scroller {
-            background: $text-editor-background-disabled;
-            color: $text-editor-color-disabled;
+            background: var(--red-ui-text-editor-background-disabled);
+            color: var(--red-ui-text-editor-color-disabled);
         }
         .ace_cursor {
            color: transparent !important;
         }
     }
     .ace_gutter {
-        background: $text-editor-gutter-background;
+        background: var(--red-ui-text-editor-gutter-background);
         border-top-left-radius: 4px;
         border-bottom-left-radius: 4px;
     }
     .ace_scroller {
-        background: $text-editor-background;
+        background: var(--red-ui-text-editor-background);
         border-top-right-radius: 4px;
         border-bottom-right-radius: 4px;
-        color: $text-editor-color;
+        color: var(--red-ui-text-editor-color);
     }
     .ace_marker-layer .ace_active-line {
-        background: $text-editor-active-line-background;
+        background: var(--red-ui-text-editor-active-line-background);
     }
     .ace_marker-layer .ace_selection {
-        background: $text-editor-selection-background;
+        background: var(--red-ui-text-editor-selection-background);
         border-radius: 1px;
     }
     .ace_gutter-cell  {
-        color: $text-editor-gutter-color;
+        color: var(--red-ui-text-editor-gutter-color);
     }
     .ace_gutter-active-line {
-        background: $text-editor-gutter-active-line-background;
+        background: var(--red-ui-text-editor-gutter-active-line-background);
     }
     .ace_tooltip {
-        font-family: $primary-font;
+        font-family: var(--red-ui-primary-font);
         line-height: 1.4em;
         max-width: 400px;
         white-space: normal;
         background-image: none;
-        background: $popover-background;
-        color: $popover-color;
+        background: var(--red-ui-popover-background);
+        color: var(--red-ui-popover-color);
         border-radius: 4px;
         @include component-shadow;
-        border-color: $popover-background;
+        border-color: var(--red-ui-popover-background);
     }
     .ace_content {
         line-height: 1;
@@ -55,14 +55,14 @@
 
     #red-ui-event-log-editor {
         .ace_scroller {
-            background: $event-log-background;
-            color: $event-log-color;
+            background: var(--red-ui-event-log-background);
+            color: var(--red-ui-event-log-color);
         }
         .ace_marker-layer .ace_active-line {
-            background: $event-log-active-line-background;
+            background: var(--red-ui-event-log-active-line-background);
         }
         .ace_marker-layer .ace_selection {
-            background: $event-log-selection-background;
+            background: var(--red-ui-event-log-selection-background);
         }
     }
 }

packages/node_modules/@node-red/editor-client/src/sass/base.scss

@@ -20,12 +20,12 @@ body {
 }
 
 .red-ui-editor {
-    font-size: $primary-font-size;
-    font-family: $primary-font;
+    font-size: var(--red-ui-primary-font-size);
+    font-family: var(--red-ui-primary-font);
     padding: 0;
     margin: 0;
-    background: $primary-background;
-    color: $primary-text-color;
+    background: var(--red-ui-primary-background);
+    color: var(--red-ui-primary-text-color);
     line-height: 20px;
 }
 
@@ -63,15 +63,15 @@ body {
 .red-ui-icon-picker {
     a {
         text-decoration: none;
-        color: $primary-text-color;
+        color: var(--red-ui-primary-text-color);
     }
     a:hover,
     a:focus {
         text-decoration: none;
-        color: $primary-text-color;
+        color: var(--red-ui-primary-text-color);
     }
     a:focus {
-        outline: 1px solid $form-input-focus-color;
+        outline: 1px solid var(--red-ui-form-input-focus-color);
     }
 
     p {
@@ -130,7 +130,7 @@ body {
     hr {
         margin: 20px 0;
         border: 0;
-        border-top: 1px solid $tertiary-border-color;
+        border-top: 1px solid var(--red-ui-tertiary-border-color);
     }
 
 
@@ -150,22 +150,22 @@ body {
         mask-position: 50% 50%;
         -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
-        background-color: $spinner-color;
+        background-color: var(--red-ui-spinner-color);
         }
 
     .red-ui-font-code {
-        font-family: $monospace-font;
-        font-size: $primary-font-size;
-        color: $text-color-code;
+        font-family: var(--red-ui-monospace-font);
+        font-size: var(--red-ui-primary-font-size);
+        color: var(--red-ui-text-color-code);
         white-space: nowrap;
     }
 
     code {
-        font-family: $monospace-font;
-        font-size: $primary-font-size;
+        font-family: var(--red-ui-monospace-font);
+        font-size: var(--red-ui-primary-font-size);
         padding: 0px;
         margin: 1px;
-        color: $text-color-code;
+        color: var(--red-ui-text-color-code);
         white-space: nowrap;
     }
 
@@ -177,8 +177,8 @@ body {
         word-break: break-all;
         word-wrap: break-word;
         white-space: pre-wrap;
-        background-color:$tertiary-background;
-        border: 1px solid $tertiary-border-color;
+        background-color:var(--red-ui-tertiary-background);
+        border: 1px solid var(--red-ui-tertiary-border-color);
         border-radius: 2px;
     }
 
@@ -217,8 +217,8 @@ body {
     blockquote {
         padding: 0 0 0 15px;
         margin: 0 0 20px;
-        border-left: 4px solid $secondary-border-color;
-        color: $secondary-text-color;
+        border-left: 4px solid var(--red-ui-secondary-border-color);
+        color: var(--red-ui-secondary-text-color);
 
         p {
             font-size: 14px;
@@ -244,7 +244,7 @@ body {
     right: 1px;
     text-align: center;
     padding: 40px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     &:before {
       content: '';
       display: inline-block;
@@ -258,14 +258,14 @@ body {
         width: 80px;
     }
     &.red-ui-component-spinner-sidebar {
-        background: $secondary-background;
+        background: var(--red-ui-secondary-background);
         padding:0;
         img {
             width: 40px;
         }
     }
     &.projects-version-control-spinner-sidebar {
-        background: $secondary-background;
+        background: var(--red-ui-secondary-background);
         padding:0;
         img {
             width: 20px;

packages/node_modules/@node-red/editor-client/src/sass/colors.scss

@@ -112,9 +112,13 @@ $tab-text-color-disabled-inactive: $secondary-text-color-disabled-inactive;
 $tab-badge-color: $tertiary-text-color;
 $tab-background: $secondary-background;
 $tab-background-active: $secondary-background;
+$tab-background-active-alpha: rgba($tab-background-active, 0.001);
 $tab-background-selected: $secondary-background-selected;
+$tab-background-selected-alpha: rgba($tab-background-selected, 0.001);
 $tab-background-inactive: $secondary-background-inactive;
+$tab-background-inactive-alpha: rgba($tab-background-inactive, 0.001);
 $tab-background-hover: $secondary-background-hover;
+$tab-background-hover-alpha: rgba($tab-background-hover, 0.001);
 
 $palette-header-background: $primary-background;
 $palette-header-color: $header-text-color;
@@ -213,6 +217,7 @@ $node-icon-border-color: #000;
 $node-icon-border-color-opacity: 0.1;
 
 $node-config-background: #f3f3f3;
+$node-config-icon-container-disabled: #aaa;
 
 $node-link-port-background: #eee;
 

packages/node_modules/@node-red/editor-client/src/sass/debug.scss

@@ -17,7 +17,7 @@
 .red-ui-debug-window {
     padding:0;
     margin:0;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     line-height: 20px;
     .red-ui-debug-msg-payload {
         font-size: 14px;
@@ -30,7 +30,7 @@
     bottom: 0px;
     left:0px;
     right: 0px;
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 .red-ui-debug-filter-box {
     position:absolute;
@@ -38,15 +38,15 @@
     left: 0px;
     right: 0px;
     z-index: 20;
-    background: $tertiary-background;
+    background: var(--red-ui-tertiary-background);
     padding: 10px;
-    border-bottom: 1px solid $secondary-border-color;
-    box-shadow: 0 2px 6px $shadow;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
+    box-shadow: 0 2px 6px var(--red-ui-shadow);
 }
 #red-ui-sidebar-debug-filter-node-list-row {
     .red-ui-treeList-label.disabled {
         font-style: italic;
-        color: $secondary-text-color-disabled;
+        color: var(--red-ui-secondary-text-color-disabled);
     }
 
     .red-ui-treeList-label {
@@ -57,22 +57,22 @@
             background: inherit;
         }
         &.focus, &.focus .red-ui-treeList-sublabel-text {
-            background: $list-item-background-hover !important;
+            background: var(--red-ui-list-item-background-hover) !important;
         }
     }
 }
 .red-ui-debug-msg {
     position: relative;
-    border-bottom: 1px solid $debug-message-border;
-    border-left: 8px solid $debug-message-border;
-    border-right: 8px solid $debug-message-border;
+    border-bottom: 1px solid var(--red-ui-debug-message-border);
+    border-left: 8px solid var(--red-ui-debug-message-border);
+    border-right: 8px solid var(--red-ui-debug-message-border);
     padding: 2px;
     &>.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
         display: none;
     }
 
     &.red-ui-debug-msg-hover {
-        border-right-color: $debug-message-border-hover;
+        border-right-color: var(--red-ui-debug-message-border-hover);
         &>.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
             display: inline-block;
         }
@@ -86,7 +86,7 @@
         display: inline-block;
     }
     &:hover {
-        background: $debug-message-background-hover;
+        background: var(--red-ui-debug-message-background-hover);
         &>.red-ui-debug-msg-tools {
             .red-ui-debug-msg-tools-copy {
                 display: inline-block;
@@ -120,9 +120,9 @@
 }
 
 .red-ui-debug-msg-meta {
-    background: $debug-message-background;
+    background: var(--red-ui-debug-message-background);
     font-size: 11px;
-    color: $secondary-text-color-inactive;
+    color: var(--red-ui-secondary-text-color-inactive);
     overflow-wrap: anywhere;
 }
 .red-ui-debug-msg-date {
@@ -131,11 +131,11 @@
 }
 .red-ui-debug-msg-topic {
     display: block;
-    color: $debug-message-text-color-meta;
+    color: var(--red-ui-debug-message-text-color-meta);
 }
 .red-ui-debug-msg-name {
     padding: 1px 0px;
-    color: $secondary-text-color-inactive;
+    color: var(--red-ui-secondary-text-color-inactive);
     white-space: nowrap;
 }
 .red-ui-debug-msg-tools {
@@ -152,39 +152,39 @@
 .red-ui-debug-msg-payload {
     display: block;
     padding: 2px;
-    background: $debug-message-background;
-    font-family: $monospace-font;
+    background: var(--red-ui-debug-message-background);
+    font-family: var(--red-ui-monospace-font);
     font-size: 13px !important;
 }
 .red-ui-debug-msg-level-log {
-    border-left-color: $debug-message-border;
-    border-right-color: $debug-message-border;
+    border-left-color: var(--red-ui-debug-message-border);
+    border-right-color: var(--red-ui-debug-message-border);
 }
 .red-ui-debug-msg-level-30 {
-    border-left-color: $debug-message-border-warning;
-    border-right-color: $debug-message-border-warning;
+    border-left-color: var(--red-ui-debug-message-border-warning);
+    border-right-color: var(--red-ui-debug-message-border-warning);
 }
 .red-ui-debug-msg-level-20 {
-    border-left-color: $debug-message-border-error;
-    border-right-color: $debug-message-border-error;
+    border-left-color: var(--red-ui-debug-message-border-error);
+    border-right-color: var(--red-ui-debug-message-border-error);
 }
 .red-ui-debug-msg-object-entry {
     position: relative;
     padding-left: 15px;
 }
 .red-ui-debug-msg-element {
-    color: $debug-message-text-color;
+    color: var(--red-ui-debug-message-text-color);
     line-height: 1.3em;
     overflow-wrap: break-word;
 }
 .red-ui-debug-msg-object-key {
-    color: $debug-message-text-color-object-key;
+    color: var(--red-ui-debug-message-text-color-object-key);
 }
 .red-ui-debug-msg-object-value {
 
 }
 .red-ui-debug-msg-object-handle {
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     font-size: 1em;
     width: 1em;
     text-align: center;
@@ -219,17 +219,17 @@
     display:none;
 }
 .red-ui-debug-msg-object-entry pre {
-    font-family: $monospace-font;
+    font-family: var(--red-ui-monospace-font);
     font-size: 13px;
     line-height: 1.2em;
     margin: 0 0 0 -1em;
 }
 
-.red-ui-debug-msg-type-other { color: $debug-message-text-color-msg-type-other; }
-.red-ui-debug-msg-type-string { color: $debug-message-text-color-msg-type-string; }
-.red-ui-debug-msg-type-null { color: $debug-message-text-color-msg-type-null; font-style: italic;}
-.red-ui-debug-msg-type-meta { color: $debug-message-text-color-msg-type-meta; font-style: italic;}
-.red-ui-debug-msg-type-number { color: $debug-message-text-color-msg-type-number; };
+.red-ui-debug-msg-type-other { color: var(--red-ui-debug-message-text-color-msg-type-other); }
+.red-ui-debug-msg-type-string { color: var(--red-ui-debug-message-text-color-msg-type-string); }
+.red-ui-debug-msg-type-null { color: var(--red-ui-debug-message-text-color-msg-type-null); font-style: italic;}
+.red-ui-debug-msg-type-meta { color: var(--red-ui-debug-message-text-color-msg-type-meta); font-style: italic;}
+.red-ui-debug-msg-type-number { color: var(--red-ui-debug-message-text-color-msg-type-number); }
 .red-ui-debug-msg-type-number-toggle { cursor: pointer;}
 
 .red-ui-debug-msg-type-string {
@@ -241,14 +241,14 @@
     padding: 4px 2px 2px;
     position: relative;
     &.red-ui-debug-msg-row-pinned {
-        background: $secondary-background-selected;
+        background: var(--red-ui-secondary-background-selected);
     }
 }
 .red-ui-debug-msg-expandable {
     cursor: pointer;
 }
 .red-ui-debug-msg-expandable:hover .red-ui-debug-msg-object-handle {
-    color:$secondary-text-color-hover;
+    color:var(--red-ui-secondary-text-color-hover);
 }
 
 .red-ui-debug-msg-buffer-opts {

packages/node_modules/@node-red/editor-client/src/sass/diff.scss

@@ -23,11 +23,11 @@
     .red-ui-editableList-container {
         border-radius:1px;
         padding:0;
-        background: $tertiary-background;
+        background: var(--red-ui-tertiary-background);
     }
     .red-ui-diff-list {
         li {
-            background: $tertiary-background;
+            background: var(--red-ui-tertiary-background);
             padding: 0px;
             border: none;
             min-height: 0;
@@ -62,29 +62,29 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         width: 50%;
-        background: $tertiary-background;
+        background: var(--red-ui-tertiary-background);
         text-align: center;
-        border-top: 1px solid $secondary-border-color;
-        border-color:$secondary-border-color;
-        border-left: 1px solid $secondary-border-color;
+        border-top: 1px solid var(--red-ui-secondary-border-color);
+        border-color:var(--red-ui-secondary-border-color);
+        border-left: 1px solid var(--red-ui-secondary-border-color);
     }
     div:last-child {
-        border-right: 1px solid $secondary-border-color;
+        border-right: 1px solid var(--red-ui-secondary-border-color);
     }
 }
 
 .red-ui-diff-dialog-toolbar {
     box-sizing: border-box;
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     text-align: right;
     padding: 8px 10px;
-    background: $primary-background;
-    border-bottom: 1px solid $secondary-border-color;
+    background: var(--red-ui-primary-background);
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     white-space: nowrap;
 }
 .red-ui-diff-list-flow {
-    background: $secondary-background;
-    border: 1px solid $secondary-border-color;
+    background: var(--red-ui-secondary-background);
+    border: 1px solid var(--red-ui-secondary-border-color);
     border-radius: 1px;
     overflow: hidden;
 
@@ -114,10 +114,10 @@
     font-size: 0.9em;
 
     &:first-child {
-        border-top: 1px solid $tertiary-border-color;
+        border-top: 1px solid var(--red-ui-tertiary-border-color);
     }
     &:not(:last-child) {
-        border-bottom: 1px solid $tertiary-border-color;
+        border-bottom: 1px solid var(--red-ui-tertiary-border-color);
     }
 
     &.collapsed {
@@ -150,8 +150,8 @@
         width: 100%;
     }
     td, th {
-        border-top: 1px solid $secondary-border-color;
-        border-left: 1px solid $secondary-border-color;
+        border-top: 1px solid var(--red-ui-secondary-border-color);
+        border-left: 1px solid var(--red-ui-secondary-border-color);
         &:first-child {
             border-left: none;
         }
@@ -166,7 +166,7 @@
             overflow:hidden;
         }
         &:hover {
-            background: $secondary-background-selected;
+            background: var(--red-ui-secondary-background-selected);
         }
 
     }
@@ -212,7 +212,7 @@
     cursor: pointer;
     padding: 0;
     &:hover {
-        background: $secondary-background-selected;
+        background: var(--red-ui-secondary-background-selected);
     }
 }
 .red-ui-diff-list-flow-title-meta {
@@ -223,7 +223,7 @@
 .red-ui-diff-list-node-header {
     cursor: pointer;
     &:hover {
-        background: $secondary-background-selected;
+        background: var(--red-ui-secondary-background-selected);
     }
 }
 .red-ui-diff-list-node-icon {
@@ -232,9 +232,9 @@
     margin: 5px;
     width: 18px;
     height: 15px;
-    background: $form-input-background;
+    background: var(--red-ui-form-input-background);
     border-radius: 2px;
-    border: 1px solid $node-border;
+    border: 1px solid var(--red-ui-node-border);
     background-position: 5% 50%;
     background-repeat: no-repeat;
     background-size: contain;
@@ -267,7 +267,7 @@
 .red-ui-diff-status-deleted {
     cursor: default !important;
     .red-ui-diff-status {
-        color: $diff-state-deleted;
+        color: var(--red-ui-diff-state-deleted);
     }
     .red-ui-diff-list-node-node {
         opacity: 0.5;
@@ -280,28 +280,28 @@
 .red-ui-diff-status-added {
     cursor: default !important;
     .red-ui-diff-status {
-        color: $diff-state-added;
+        color: var(--red-ui-diff-state-added);
     }
 }
 .red-ui-diff-status-moved {
     .red-ui-diff-status {
-        color: $diff-state-moved;
+        color: var(--red-ui-diff-state-moved);
     }
 }
 
 .red-ui-diff-status-changed {
     .red-ui-diff-status {
-        color: $diff-state-changed;
+        color: var(--red-ui-diff-state-changed);
     }
 }
 .red-ui-diff-status-unchanged {
     .red-ui-diff-status {
-        color: $diff-state-unchanged;
+        color: var(--red-ui-diff-state-unchanged);
     }
 }
 .red-ui-diff-status-conflict {
     .red-ui-diff-status {
-        color: $diff-state-conflict;
+        color: var(--red-ui-diff-state-conflict);
     }
 }
 .red-ui-diff-list-node-title {
@@ -312,7 +312,7 @@
 }
 .red-ui-diff-list-node-properties {
     margin: 0;
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
 }
 .red-ui-diff-status {
     display: inline-block;
@@ -329,7 +329,7 @@
 }
 
 .red-ui-diff-list-node-description {
-    color: $form-text-color;
+    color: var(--red-ui-form-text-color);
     margin-right: 5px;
     padding-top: 5px;
     display: inline-block;
@@ -340,11 +340,11 @@
     }
 }
 
-.red-ui-diff-state-added { color: $diff-state-added; }
-.red-ui-diff-state-deleted { color: $diff-state-deleted; }
-.red-ui-diff-state-changed { color: $diff-state-changed; }
-.red-ui-diff-state-unchanged { color: $diff-state-unchanged; }
-.red-ui-diff-state-conflicted { color: $diff-state-conflicted; }
+.red-ui-diff-state-added { color: var(--red-ui-diff-state-added); }
+.red-ui-diff-state-deleted { color: var(--red-ui-diff-state-deleted); }
+.red-ui-diff-state-changed { color: var(--red-ui-diff-state-changed); }
+.red-ui-diff-state-unchanged { color: var(--red-ui-diff-state-unchanged); }
+.red-ui-diff-state-conflicted { color: var(--red-ui-diff-state-conflicted); }
 
 
 .red-ui-diff-list-node-cell {
@@ -353,19 +353,19 @@
     box-sizing: border-box;
     width: calc( (100% - 20px) / 2);
     height: 32px;
-    border-left: 1px solid $secondary-border-color;
+    border-left: 1px solid var(--red-ui-secondary-border-color);
     padding-top: 2px;
     white-space: nowrap;
     overflow: hidden;
     position: relative;
 }
 .red-ui-diff-empty {
-    background: $secondary-background-disabled;
+    background: var(--red-ui-secondary-background-disabled);
     background: repeating-linear-gradient(
         20deg,
-        $secondary-background, $secondary-background 5px,
-        $secondary-background-disabled 5px,
-        $secondary-background-disabled 10px
+        var(--red-ui-secondary-background), var(--red-ui-secondary-background) 5px,
+        var(--red-ui-secondary-background-disabled) 5px,
+        var(--red-ui-secondary-background-disabled) 10px
         );
 }
 .red-ui-diff-list-node-cell:first-child {
@@ -425,10 +425,10 @@
         background: none;
     }
     &.red-ui-diff-status-changed {
-        background: $diff-state-changed-background;
+        background: var(--red-ui-diff-state-changed-background);
     }
     &.red-ui-diff-status-conflict {
-        background: $diff-state-conflict-background;
+        background: var(--red-ui-diff-state-conflict-background);
     }
 }
 
@@ -439,42 +439,42 @@ label.red-ui-diff-selectbox {
     bottom:0;
     width: 35px;
     text-align: center;
-    border-left: 1px solid $secondary-border-color;
+    border-left: 1px solid var(--red-ui-secondary-border-color);
     margin:0;
     input[type="radio"] {
         margin-top: 8px;
     }
 
     &:hover {
-        background: $secondary-background-hover;
+        background: var(--red-ui-secondary-background-hover);
     }
 }
 
 .red-ui-diff-list-node-conflict.red-ui-diff-select-remote {
     .red-ui-diff-list-node-remote {
-        background: $diff-state-added-background;
+        background: var(--red-ui-diff-state-added-background);
         label {
-            border-left-color: $diff-state-added-border;
+            border-left-color: var(--red-ui-diff-state-added-border);
         }
     }
     .red-ui-diff-list-node-local {
-        background: $diff-state-deleted-background;
+        background: var(--red-ui-diff-state-deleted-background);
         label {
-            border-left-color: $diff-state-deleted-border;
+            border-left-color: var(--red-ui-diff-state-deleted-border);
         }
     }
 }
 .red-ui-diff-list-node-conflict.red-ui-diff-select-local {
     .red-ui-diff-list-node-local {
-        background: $diff-state-added-background;
+        background: var(--red-ui-diff-state-added-background);
         label {
-            border-left-color: $diff-state-added-border;
+            border-left-color: var(--red-ui-diff-state-added-border);
         }
     }
     .red-ui-diff-list-node-remote {
-        background: $diff-state-deleted-background;
+        background: var(--red-ui-diff-state-deleted-background);
         label {
-            border-left-color: $diff-state-deleted-border;
+            border-left-color: var(--red-ui-diff-state-deleted-border);
         }
     }
 }
@@ -500,10 +500,10 @@ ul.red-ui-deploy-dialog-confirm-list {
         width: 30px;
         margin-right: 10px;
         &.fa-check {
-            color: $text-color-success;
+            color: var(--red-ui-text-color-success);
         }
         &.fa-exclamation {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
         }
     }
     div {
@@ -529,7 +529,7 @@ ul.red-ui-deploy-dialog-confirm-list {
 
     table.red-ui-diff-text-content {
         margin: 10px;
-        border: 1px solid $secondary-border-color;
+        border: 1px solid var(--red-ui-secondary-border-color);
         border-radius: 3px;
         table-layout: fixed;
         width: calc(100% - 20px);
@@ -538,88 +538,88 @@ ul.red-ui-deploy-dialog-confirm-list {
             word-wrap: break-word;
         }
         td.lineno {
-            font-family: $monospace-font;
+            font-family: var(--red-ui-monospace-font);
             text-align: right;
-            color: $tertiary-text-color;
-            background: $tertiary-background;
+            color: var(--red-ui-tertiary-text-color);
+            background: var(--red-ui-tertiary-background);
             padding: 1px 5px;
             &.added {
-                background: $diff-state-added-header-background;
+                background: var(--red-ui-diff-state-added-header-background);
             }
             &.removed {
-                background: $diff-state-deleted-header-background;
+                background: var(--red-ui-diff-state-deleted-header-background);
             }
         }
         td.lineno:nth-child(3) {
-            border-left: 1px solid $secondary-border-color;
+            border-left: 1px solid var(--red-ui-secondary-border-color);
         }
         td.linetext {
-            font-family: $monospace-font;
+            font-family: var(--red-ui-monospace-font);
             white-space: pre-wrap;
             padding: 1px 5px;
-            border-left: 1px solid $tertiary-border-color;
+            border-left: 1px solid var(--red-ui-tertiary-border-color);
             span.prefix {
                 width: 30px;
                 display: inline-block;
                 text-align: center;
-                color: $diff-state-prefix-color;
+                color: var(--red-ui-diff-state-prefix-color);
             }
 
             &.added {
-                border-left-color: $diff-state-added-header-border;
+                border-left-color: var(--red-ui-diff-state-added-header-border);
             }
             &.removed {
-                border-left-color: $diff-state-deleted-header-border;
+                border-left-color: var(--red-ui-diff-state-deleted-header-border);
             }
         }
         td.blank {
-            background: $tertiary-background;
+            background: var(--red-ui-tertiary-background);
         }
         td.added {
-            background: $diff-state-added-background;
-            color: $diff-state-color;
+            background: var(--red-ui-diff-state-added-background);
+            color: var(--red-ui-diff-state-color);
         }
         td.removed {
-            background: $diff-state-deleted-background;
-            color: $diff-state-color;
+            background: var(--red-ui-diff-state-deleted-background);
+            color: var(--red-ui-diff-state-color);
         }
         tr.mergeHeader td {
-            color: $diff-merge-header-color;
-            background: $diff-merge-header-background;
+            color: var(--red-ui-diff-merge-header-color);
+            background: var(--red-ui-diff-merge-header-background);
             height: 26px;
             vertical-align: middle;
         }
         tr.mergeHeader-separator td {
-            color: $diff-merge-header-color;
-            background: $diff-merge-header-border-color;
+            color: var(--red-ui-diff-merge-header-color);
+            background: var(--red-ui-diff-merge-header-border-color);
             height: 0px;
         }
         tr.mergeHeader-ours td {
-            border-top: 2px solid $diff-merge-header-border-color;
+            border-top: 2px solid var(--red-ui-diff-merge-header-border-color);
         }
         tr.mergeHeader-theirs td {
-            border-bottom: 2px solid $diff-merge-header-border-color;
+            border-bottom: 2px solid var(--red-ui-diff-merge-header-border-color);
         }
         td.unchanged {
-            background: $diff-state-unchanged-background;
-            color: $diff-state-unchanged;
+            background: var(--red-ui-diff-state-unchanged-background);
+            color: var(--red-ui-diff-state-unchanged);
         }
         tr.unchanged {
-            background: $diff-state-unchanged-background;
+            background: var(--red-ui-diff-state-unchanged-background);
         }
         tr.start-block {
-            border-top: 1px solid $secondary-border-color;
+            border-top: 1px solid var(--red-ui-secondary-border-color);
         }
         tr.end-block {
-            border-bottom: 1px solid $secondary-border-color;
+            border-bottom: 1px solid var(--red-ui-secondary-border-color);
         }
         tr.red-ui-diff-text-file-header td {
             .filename {
-                font-family: $monospace-font;
+                font-family: var(--red-ui-monospace-font);
             }
-            background: $primary-background;
+            background: var(--red-ui-primary-background);
             padding: 5px 10px 5px 0;
-            color: $primary-text-color;
+            color: var(--red-ui-primary-text-color);
             cursor: pointer;
             i.red-ui-diff-list-chevron {
                 width: 30px;
@@ -631,17 +631,17 @@ ul.red-ui-deploy-dialog-confirm-list {
             }
         }
         tr.red-ui-diff-text-commit-header td {
-            background: $primary-background;
+            background: var(--red-ui-primary-background);
             padding: 5px 10px;
-            color: $primary-text-color;
+            color: var(--red-ui-primary-text-color);
             h3 {
                 font-size: 1.4em;
                 margin: 0;
             }
             .commit-summary {
-                border-top: 1px solid $secondary-border-color;
+                border-top: 1px solid var(--red-ui-secondary-border-color);
                 padding-top: 5px;
-                color: $secondary-text-color;
+                color: var(--red-ui-secondary-text-color);
             }
             .commit-body {
                 margin-bottom:15px;
@@ -651,20 +651,20 @@ ul.red-ui-deploy-dialog-confirm-list {
         }
 
         tr.red-ui-diff-text-header > td:not(.red-ui-diff-flow-diff) {
-            font-family: $monospace-font;
+            font-family: var(--red-ui-monospace-font);
             padding: 5px 10px;
             text-align: left;
-            color: $diff-text-header-color;
-            background: $diff-text-header-background;
+            color: var(--red-ui-diff-text-header-color);
+            background: var(--red-ui-diff-text-header-background);
             height: 30px;
             vertical-align: middle;
-            border-top: 1px solid $secondary-border-color;
-            border-bottom: 1px solid $secondary-border-color;
+            border-top: 1px solid var(--red-ui-secondary-border-color);
+            border-bottom: 1px solid var(--red-ui-secondary-border-color);
         }
         tr.red-ui-diff-text-expand td {
             cursor: pointer;
             &:hover {
-                background: $diff-text-header-background;
+                background: var(--red-ui-diff-text-header-background);
             }
         }
     }

packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss

@@ -18,7 +18,7 @@
     position: absolute;
     top: 0; bottom: 0;
     left: 0; right: 0;
-    background: $dnd-background;
+    background: var(--red-ui-dnd-background);
     display:table;
     width: 100%;
     height: 100%;
@@ -30,7 +30,31 @@
         vertical-align: middle;
         text-align: center;
         font-size: 40px;
-        color: $dnd-color;
+        color: var(--red-ui-dnd-color);
+        i {
+            pointer-events: none;
+            font-size: 80px;
+        }
+    }
+}
+
+#red-ui-image-drop-target {
+    position: absolute;
+    top: 0; bottom: 0;
+    left: 0; right: 0;
+    background: var(--red-ui-dnd-background);
+    display:table;
+    width: 100%;
+    height: 100%;
+    display: none;
+    z-index:100;
+    div {
+        pointer-events: none;
+        display: table-cell;
+        vertical-align: middle;
+        text-align: center;
+        font-size: 40px;
+        color: var(--red-ui-dnd-color);
         i {
             pointer-events: none;
             font-size: 80px;

packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss

@@ -15,8 +15,8 @@
  **/
 
 .red-ui-menu-dropdown {
-    font-family: $primary-font;
-    font-size: $primary-font-size;
+    font-family: var(--red-ui-primary-font);
+    font-size: var(--red-ui-primary-font-size);
     position: absolute;
     top: 100%;
     width: 230px;
@@ -28,9 +28,9 @@
     margin-left: 0px !important;
     padding: 5px 0;
     list-style: none;
-    background: $menuBackground;
-    border: 1px solid $secondary-border-color;
-    box-shadow: 0 5px 10px $shadow;
+    background: var(--red-ui-menuBackground);
+    border: 1px solid var(--red-ui-secondary-border-color);
+    box-shadow: 0 5px 10px var(--red-ui-shadow);
 
     &.pull-right {
         right: 0;
@@ -41,7 +41,7 @@
         height: 1px;
         margin: 9px 1px;
         overflow: hidden;
-        background-color: $menuDivider;
+        background-color: var(--red-ui-menuDivider);
     }
     & > li > a,
     & > li > a:focus {
@@ -50,7 +50,7 @@
         clear: both;
         font-weight: normal;
         line-height: 20px;
-        color: $menuColor;
+        color: var(--red-ui-menuColor);
         white-space: normal !important;
         outline: none;
     }
@@ -63,29 +63,32 @@
         padding: 4px 12px 4px 12px;
     }
 
-    &.red-ui-menu-dropdown-submenus > li > a,
-    &.red-ui-menu-dropdown-submenus > li > a:focus {
+    &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-right > li > a,
+    &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-right > li > a:focus {
         padding-right: 20px;
     }
-
+    &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-left > li > a,
+    &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-left > li > a:focus {
+        padding-left: 20px;
+    }
 
 
     & > .active > a,
     & > .active > a:hover,
     & > .active > a:focus {
-        color: $menuActiveColor;
+        color: var(--red-ui-menuActiveColor);
         text-decoration: none;
-        background-color: $menuActiveBackground;
+        background-color: var(--red-ui-menuActiveBackground);
         outline: 0;
     }
 
     & > .disabled > a,
     & > .disabled > a:hover,
     & > .disabled > a:focus {
-        color: $menuDisabledColor;
+        color: var(--red-ui-menuDisabledColor);
         .red-ui-popover-key {
-            color: $menuDisabledColor;
-            border-color: $menuDisabledColor;
+            color: var(--red-ui-menuDisabledColor);
+            border-color: var(--red-ui-menuDisabledColor);
         }
     }
 
@@ -133,8 +136,8 @@
             padding: 0;
             font-size: 13px;
             // float: right;
-            color: $menuColor;
-            border-color: $menuColor;
+            color: var(--red-ui-menuColor);
+            border-color: var(--red-ui-menuColor);
         }
     }
 
@@ -151,9 +154,9 @@
 .red-ui-menu-dropdown > li > a:focus,
 .red-ui-menu-dropdown-submenu:hover > a,
 .red-ui-menu-dropdown-submenu:focus > a {
-    color: $menuHoverColor;
+    color: var(--red-ui-menuHoverColor);
     text-decoration: none;
-    background-color: $menuHoverBackground;
+    background-color: var(--red-ui-menuHoverBackground);
 }
 
 .red-ui-menu-dropdown-submenu {
@@ -176,7 +179,7 @@
       margin-top: 5px;
       margin-right: -10px;
       border-color: transparent;
-      border-left-color: $menuCaret;
+      border-left-color: var(--red-ui-menuCaret);
       border-style: solid;
       border-width: 5px 0 5px 5px;
       content: " ";
@@ -199,10 +202,10 @@
     width: 0;
     height: 0;
     margin-top: 5px;
-    margin-left: -30px;
+    margin-left: -15px;
     /* Caret Arrow */
     border-color: transparent;
-    border-right-color: $menuCaret;
+    border-right-color: var(--red-ui-menuCaret);
     border-style: solid;
     border-width: 5px 5px 5px 0;
     content: " ";
@@ -220,20 +223,20 @@
         margin-right: -15px;
         /* Caret Arrow */
         border-color: transparent;
-        border-left-color: $menuCaret;
+        border-left-color: var(--red-ui-menuCaret);
         border-style: solid;
         border-width: 5px 0 5px 5px;
         content: " ";
     }
 }
 .red-ui-menu-dropdown-submenu.disabled > a:before {
-    border-right-color: $menuCaret;
+    border-right-color: var(--red-ui-menuCaret);
 }
 
 
 // Menu NG
 ul.red-ui-menu:not(.red-ui-menu-dropdown) {
-    font-family: $primary-font;
+    font-family: var(--red-ui-primary-font);
     font-size: 12px;
     list-style-type: none;
     padding: 0;
@@ -244,14 +247,14 @@ ul.red-ui-menu:not(.red-ui-menu-dropdown) {
         clear: both;
         font-weight: normal;
         line-height: 20px;
-        color: $menuColor;
+        color: var(--red-ui-menuColor);
         white-space: nowrap;
         text-decoration: none;
 
         &:hover,&:focus {
-            color: $menuHoverColor;
+            color: var(--red-ui-menuHoverColor);
             text-decoration: none;
-            background-color: $menuHoverBackground;
+            background-color: var(--red-ui-menuHoverBackground);
             border: none;
             outline: none;
         }

packages/node_modules/@node-red/editor-client/src/sass/editor.scss

@@ -32,9 +32,9 @@
     width: auto;
     right: -1000px;
     bottom: 0;
-    background: $secondary-background;
-    border-left: 1px solid $secondary-border-color;
-    border-bottom: 1px solid $primary-border-color;
+    background: var(--red-ui-secondary-background);
+    border-left: 1px solid var(--red-ui-secondary-border-color);
+    border-bottom: 1px solid var(--red-ui-primary-border-color);
     box-sizing: content-box;
 }
 .red-ui-tray.open {
@@ -67,8 +67,8 @@
     position: relative;
     box-sizing: border-box;
     font-weight: bold;
-    border-bottom: 1px solid $secondary-border-color;
-    background: $palette-header-background;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
+    background: var(--red-ui-palette-header-background);
     &:after {
         content: "";
         display: table;
@@ -87,16 +87,18 @@
         padding: 0px 8px;
         height: 26px;
         line-height: 26px;
-        &.toggle:not(.selected) {
-            color: $workspace-button-color-selected !important;
-            background: $workspace-button-background-active;
+        &.toggle.selected {
+            color: var(--red-ui-workspace-button-color-selected) !important;
+            background: var(--red-ui-workspace-button-background) !important;
         }
     }
 
     .red-ui-tray-footer-left {
-        display:inline-block;
         margin-right: 20px;
         float:left;
+        & :not(:first-child) {
+            margin-left: 5px
+        }
     }
     .red-ui-tray-footer-right {
         float: right;
@@ -116,8 +118,8 @@
 }
 
 .red-ui-tray-titlebar {
-    color: $header-text-color;
-    border-bottom: 1px solid $secondary-border-color;
+    color: var(--red-ui-header-text-color);
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     padding: 8px;
 }
 .red-ui-editor ul.red-ui-tray-breadcrumbs {
@@ -131,7 +133,7 @@
         margin:0;
 
         &:not(:last-child) {
-            color: $workspace-button-color;
+            color: var(--red-ui-workspace-button-color);
             font-weight: normal;
 
             &:after {
@@ -149,10 +151,10 @@
     bottom: 0px;
     width: 7px;
     left: -9px;
-    background-color: $primary-background;
+    background-color: var(--red-ui-primary-background);
     cursor: col-resize;
-    border-left: 1px solid $primary-border-color;
-    box-shadow: -1px 0 6px $shadow;
+    border-left: 1px solid var(--red-ui-primary-border-color);
+    box-shadow: -1px 0 6px var(--red-ui-shadow);
 
     &:before {
         content: '';
@@ -167,11 +169,11 @@
         mask-position: 50% 50%;
         -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
-        background-color: $grip-color;
+        background-color: var(--red-ui-grip-color);
     }
     
     &.red-ui-tray-resize-maximised {
-        background: $primary-background;
+        background: var(--red-ui-primary-background);
         cursor: default;
     }
 }
@@ -182,10 +184,10 @@ button.red-ui-tray-resize-button {
     height: 37px;
     line-height: 35px;
     border: none;
-    border-bottom: 1px solid $secondary-border-color;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     margin: 0;
-    background: $primary-background;
-    color: $workspace-button-color;
+    background: var(--red-ui-primary-background);
+    color: var(--red-ui-workspace-button-color);
 }
 
 .red-ui-editor .red-ui-tray {
@@ -203,16 +205,16 @@ button.red-ui-tray-resize-button {
     }
 
     .input-error {
-        border-color: $form-input-border-error-color !important;
+        border-color: var(--red-ui-form-input-border-error-color) !important;
     }
 
     .input-updated {
-        border-color: $node-selected-color !important;
+        border-color: var(--red-ui-node-selected-color) !important;
     }
 
     .form-row {
         clear: both;
-        color: $form-text-color;
+        color: var(--red-ui-form-text-color);
         margin-bottom:12px;
     }
     .form-row label {
@@ -223,10 +225,10 @@ button.red-ui-tray-resize-button {
         width:70%;
     }
     .form-tips {
-        background: $form-tips-background;
+        background: var(--red-ui-form-tips-background);
         padding: 8px;
         border-radius: 2px;
-        border: 1px solid $secondary-border-color;
+        border: 1px solid var(--red-ui-secondary-border-color);
         max-width: 450px;
     }
     .form-tips code {
@@ -238,7 +240,7 @@ button.red-ui-tray-resize-button {
     }
 
     .form-warning {
-        border-color: $text-color-error;
+        border-color: var(--red-ui-text-color-error);
     }
 }
 
@@ -255,11 +257,11 @@ button.red-ui-tray-resize-button {
     }
 }
 .red-ui-editor-text-container {
-    border:1px solid $tertiary-border-color;
+    border:1px solid var(--red-ui-tertiary-border-color);
     border-radius:5px;
     overflow: hidden;
-    font-size: $primary-font-size !important;
-    font-family: $monospace-font !important;
+    font-size: var(--red-ui-primary-font-size !important);
+    font-family: var(--red-ui-monospace-font !important);
     height: 100%;
 
     &.red-ui-editor-text-container-toolbar {
@@ -302,7 +304,7 @@ button.red-ui-button-small
 #red-ui-editor-config-scope-warning {
     display: inline-block;
     margin-right: 5px;
-    color: $text-color-warning;
+    color: var(--red-ui-text-color-warning);
     vertical-align: middle;
 }
 #red-ui-editor-config-scope {
@@ -358,18 +360,18 @@ button.red-ui-button-small
         padding: 20px 20px 10px;
         &:last-child {
             padding-top: 60px;
-            background: $primary-background;
+            background: var(--red-ui-primary-background);
 
         }
     }
 }
 .red-ui-editor-type-markdown-panel-preview {
     padding: 10px;
-    border:1px solid $secondary-border-color;
+    border:1px solid var(--red-ui-secondary-border-color);
     border-radius:5px;
     height: calc(100% - 21px);
-    overflow-y: scroll;
-    background: $secondary-background;
+    overflow-y: auto;
+    background: var(--red-ui-secondary-background);
 }
 
 #red-ui-clipboard-hidden {
@@ -402,7 +404,7 @@ button.red-ui-button-small
     span {
         padding-left: 50px;
         width: 100px;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
 }
 
@@ -427,14 +429,14 @@ button.red-ui-button.red-ui-editor-node-appearance-button {
 
 .red-ui-group-layout-picker {
     padding: 5px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
 }
 .red-ui-group-layout-picker-cell-text {
     position: absolute;
     width: 14px;
     height: 2px;
-    border-top: 2px solid $secondary-text-color;
-    border-bottom: 2px solid $secondary-text-color;
+    border-top: 2px solid var(--red-ui-secondary-text-color);
+    border-bottom: 2px solid var(--red-ui-secondary-text-color);
     margin: 2px;
 
     &.red-ui-group-layout-text-pos-nw { top: 0; left: 0; }
@@ -451,7 +453,7 @@ button.red-ui-button.red-ui-editor-node-appearance-button {
         background-color: #FFF;
         background-size: 100% 100%;
         background-position: 0 0, 50% 50%;
-        background-image: linear-gradient(45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%,  transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%,  transparent 55%, transparent);
+        background-image: linear-gradient(45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%,  transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%,  transparent 55%, transparent);
         border: none;
     }
 }
@@ -475,17 +477,17 @@ button.red-ui-group-layout-picker-none {
         width: 100%;
         margin-bottom: 0;
         border: none;
-        border-bottom: 1px solid $form-input-border-color;
+        border-bottom: 1px solid var(--red-ui-form-input-border-color);
     }
     small {
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         margin-left: 5px;
         margin-right: 4px;
         display: inline-block;
         min-width: 35px;
         text-align: right;
     }
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
 }
 .red-ui-editor-node-appearance-button {
     .red-ui-search-result-node {
@@ -496,7 +498,7 @@ button.red-ui-group-layout-picker-none {
     padding: 0;
     border-style: solid;
     border-width: 1px;
-    border-color: $secondary-border-color;
+    border-color: var(--red-ui-secondary-border-color);
 }
 .red-ui-color-picker-swatch {
     position: absolute;
@@ -509,7 +511,7 @@ button.red-ui-group-layout-picker-none {
     background-color: #FFF;
     background-size: 100% 100%;
     background-position: 0 0, 50% 50%;
-    background-image: linear-gradient(45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%,  transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%,  transparent 55%, transparent)
+    background-image: linear-gradient(45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%,  transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%,  transparent 55%, transparent)
 }
 .red-ui-search-result-node .red-ui-color-picker-cell-none {
     border-radius: 4px;
@@ -536,7 +538,7 @@ button.red-ui-group-layout-picker-none {
     top:0;right:0;left:0;bottom:0;
     background-image:linear-gradient(90deg, transparent 0%, #f00 100%);
     background-size: 100% 100%;
-    border: 1px solid $primary-border-color;
+    border: 1px solid var(--red-ui-primary-border-color);
 }
 
 div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
@@ -547,9 +549,9 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
     width: 10px;
     height: 22px;
     padding: 0;
-    border: 1px solid $primary-border-color;
+    border: 1px solid var(--red-ui-primary-border-color);
     border-radius: 1px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     box-sizing: border-box;
 }
 .red-ui-icon-picker {
@@ -562,15 +564,15 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
 .red-ui-icon-list {
     width: 308px;
     height: 200px;
-    overflow-y: scroll;
+    overflow-y: auto;
     line-height: 0px;
     position: relative;
     &.red-ui-icon-list-dark {
         .red-ui-palette-icon-fa {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
         }
         .red-ui-palette-icon-container {
-            background: $secondary-background;
+            background: var(--red-ui-secondary-background);
             border-radius: 4px;
         }
     }
@@ -583,10 +585,10 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
     border-radius: 4px;
 
     &:hover {
-        background: $list-item-background-hover;
+        background: var(--red-ui-list-item-background-hover);
     }
     &.selected {
-        background: $list-item-background-selected;
+        background: var(--red-ui-list-item-background-selected);
         .red-ui-search-result-node {
             // border-color: white;
         }
@@ -597,22 +599,22 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
     }
 }
 .red-ui-icon-list-module {
-    background: $palette-header-background;
+    background: var(--red-ui-palette-header-background);
     font-size: 0.9em;
     padding: 3px;
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     clear: both;
     i {
         margin-right: 5px;
     }
 }
 .red-ui-icon-meta {
-    border-top: 1px solid $secondary-border-color;
-    background: $tertiary-background;
+    border-top: 1px solid var(--red-ui-secondary-border-color);
+    background: var(--red-ui-tertiary-background);
     height: 24px;
     span {
         padding: 4px;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         font-size: 0.9em;
         line-height: 24px;
     }
@@ -630,7 +632,7 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
 .red-ui-editor-type-json-editor {
     height: calc(100% - 10px);
     .red-ui-treeList-container {
-        background: $secondary-background;
+        background: var(--red-ui-secondary-background);
     }
     .red-ui-treeList-label {
         padding-top: 0;
@@ -647,7 +649,7 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
             vertical-align: middle;
         }
         &:hover, &:hover .red-ui-treeList-sublabel-text {
-            background: $secondary-background-disabled;
+            background: var(--red-ui-secondary-background-disabled);
             .red-ui-editor-type-json-editor-item-gutter {
                 > span, > button {
                     display: inline-block;
@@ -656,11 +658,11 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
         }
         &.selected {
             .red-ui-editor-type-json-editor-item-gutter {
-                background: $secondary-background-hover;
+                background: var(--red-ui-secondary-background-hover);
             }
             &:hover {
                 .red-ui-editor-type-json-editor-item-gutter {
-                    background: $secondary-background-selected;
+                    background: var(--red-ui-secondary-background-selected);
                 }
             }
         }
@@ -698,7 +700,7 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
     border: 2px solid rgba(0,0,0,0);
     border-radius: 3px;
     &:not(.red-ui-editor-type-json-editor-label-array-key):hover {
-        border-color: $list-item-background-hover;
+        border-color: var(--red-ui-list-item-background-hover);
         border-style: dashed;
     }
     &.readonly {
@@ -712,8 +714,8 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
 
     height: 100%;
     line-height: 35px;
-    color: $tertiary-text-color;
-    background: $secondary-background-disabled;
+    color: var(--red-ui-tertiary-text-color);
+    background: var(--red-ui-secondary-background-disabled);
     > span {
         display: inline-block;
         height: 35px;
@@ -755,7 +757,7 @@ button.red-ui-toggleButton.toggle {
     }
     >div:first-child {
         font-size: 0.9em;
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
         margin: 3px 0 -4px;
         >div {
             padding-left: 3px;
@@ -767,15 +769,15 @@ button.red-ui-toggleButton.toggle {
             line-height: 30px;
             display: inline-block;
             box-sizing: border-box;
-            // border-left: 2px dashed $secondary-border-color;
-            // border-bottom: 2px dashed $secondary-border-color;
-            // border: 1px dashed $secondary-border-color;
+            // border-left: 2px dashed var(--red-ui-secondary-border-color);
+            // border-bottom: 2px dashed var(--red-ui-secondary-border-color);
+            // border: 1px dashed var(--red-ui-secondary-border-color);
             border-right: none;
             &:not(:first-child) {
                 padding: 3px;
             }
             // &:last-child {
-            //     border-right: 1px dashed $secondary-border-color;
+            //     border-right: 1px dashed var(--red-ui-secondary-border-color);
             // }
             .placeholder-input {
                 position: relative;
@@ -800,8 +802,8 @@ button.red-ui-toggleButton.toggle {
                         height: 100%;
                         width: 20px;
                         text-align:center;
-                        border-right: 1px solid $secondary-border-color;
-                        background: $tertiary-background;
+                        border-right: 1px solid var(--red-ui-secondary-border-color);
+                        background: var(--red-ui-tertiary-background);
                     }
                 }
                 input[type="checkbox"] {
@@ -817,13 +819,13 @@ button.red-ui-toggleButton.toggle {
             .red-ui-editableList-item-handle {
                 position:relative;
                 top: 0px;
-                color: $tertiary-text-color;
+                color: var(--red-ui-tertiary-text-color);
             }
         }
         >div:nth-child(2) {
             margin: 4px;
             height: 32px;
-            border: 1px dashed $secondary-border-color;
+            border: 1px dashed var(--red-ui-secondary-border-color);
             text-align: center;
             a {
                 display: block;
@@ -831,7 +833,7 @@ button.red-ui-toggleButton.toggle {
                 height: 100%;
                 line-height: 32px;
                 &:hover {
-                    background: $secondary-background-hover;
+                    background: var(--red-ui-secondary-background-hover);
                 }
                 i {
                     height: 100%;
@@ -851,7 +853,7 @@ button.red-ui-toggleButton.toggle {
 span.red-ui-editor-subflow-env-lang-icon {
     position: absolute;
     display: inline-block;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     opacity: 0.8;
     width: 20px;
     line-height: 32px;
@@ -864,12 +866,12 @@ span.red-ui-editor-subflow-env-lang-icon {
 }
 
 .red-ui-editor-subflow-env-input-type {
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     height: 100%;
     box-sizing: border-box;
 }
 .red-ui-editor-subflow-env-input-type-placeholder {
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
     padding-left: 4px;
 }
 
@@ -886,7 +888,7 @@ span.red-ui-editor-subflow-env-lang-icon {
 //             border-top: none;
 //         }
 //         &.ui-sortable-helper {
-//             border: 2px dashed $secondary-border-color;
+//             border: 2px dashed var(--red-ui-secondary-border-color);
 //             .red-ui-editableList-item-content {
 //                 >div {
 //                     border: none;
@@ -901,15 +903,15 @@ span.red-ui-editor-subflow-env-lang-icon {
 //         >div>div {
 //             display: inline-block;
 //             box-sizing: border-box;
-//             border-left: 1px dashed $secondary-border-color;
-//             border-bottom: 1px dashed $secondary-border-color;
+//             border-left: 1px dashed var(--red-ui-secondary-border-color);
+//             border-bottom: 1px dashed var(--red-ui-secondary-border-color);
 //         }
 //         >div:first-child {
 //             font-size: 0.9em;
 //             display: grid;
 //             grid-template-columns: 25px auto 20px;
 //             >div {
-//                 border-top: 1px dashed $secondary-border-color;
+//                 border-top: 1px dashed var(--red-ui-secondary-border-color);
 //                 padding: 1px;
 //             }
 //             >div:nth-child(3) {
@@ -929,9 +931,9 @@ span.red-ui-editor-subflow-env-lang-icon {
 //                 // line-height: 30px;
 //                 // box-sizing: border-box;
 //                 //
-//                 // border-left: 2px dashed $secondary-border-color;
+//                 // border-left: 2px dashed var(--red-ui-secondary-border-color);
 //                 border-top: none;
-//                 // border-bottom: 2px dashed $secondary-border-color;
+//                 // border-bottom: 2px dashed var(--red-ui-secondary-border-color);
 //                 &:not(:first-child) {
 //                     padding: 6px 3px;
 //                 }
@@ -963,7 +965,7 @@ span.red-ui-editor-subflow-env-lang-icon {
 //                     height: 100%;
 //                     line-height: 45px;
 //                     &:hover {
-//                         background: $secondary-background-hover;
+//                         background: var(--red-ui-secondary-background-hover);
 //                     }
 //                 }
 //             }
@@ -993,11 +995,11 @@ span.red-ui-editor-subflow-env-lang-icon {
 // }
 .red-ui-editor-subflow-ui-edit-panel {
     padding-bottom: 3px;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
     .red-ui-editableList-border {
         border: none;
         border-radius: 0;
-        border-bottom: 1px solid $secondary-border-color;
+        border-bottom: 1px solid var(--red-ui-secondary-border-color);
     }
     .red-ui-editableList-container {
     }
@@ -1005,10 +1007,10 @@ span.red-ui-editor-subflow-env-lang-icon {
         margin-left: 2px;
     }
     .red-ui-editableList-header {
-        background: $primary-background;
+        background: var(--red-ui-primary-background);
         display: grid;
         grid-template-columns: 50% 50%;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         div:first-child {
             padding-left: 23px;
         }
@@ -1019,7 +1021,7 @@ span.red-ui-editor-subflow-env-lang-icon {
     .red-ui-editableList-container {
         padding: 0 1px;
         li {
-            background: $secondary-background;
+            background: var(--red-ui-secondary-background);
             // border-bottom: none;
             padding: 0;
             .red-ui-editableList-item-content {
@@ -1034,14 +1036,14 @@ span.red-ui-editor-subflow-env-lang-icon {
                 margin-bottom: 0;
                 border:none;
                 width: 100%;
-                border-right: 1px solid $secondary-border-color;
+                border-right: 1px solid var(--red-ui-secondary-border-color);
 
                 border-radius: 0;
                 &:focus {
-                    box-shadow: 0 0 0 1px inset $form-input-focus-color;
+                    box-shadow: 0 0 0 1px inset var(--red-ui-form-input-focus-color);
                 }
                 &:first-child {
-                    border-left: 1px solid $secondary-border-color;
+                    border-left: 1px solid var(--red-ui-secondary-border-color);
                 }
             }
             button.red-ui-typedInput-type-select, button.red-ui-typedInput-option-expand, button.red-ui-typedInput-option-trigger {
@@ -1131,7 +1133,7 @@ span.red-ui-editor-subflow-env-lang-icon {
         border-top-left-radius: 4px;
         border-top-right-radius: 4px;
 
-        background: $tertiary-background;
+        background: var(--red-ui-tertiary-background);
         padding: 0;
         >div {
             display: grid;

packages/node_modules/@node-red/editor-client/src/sass/flow.scss

@@ -16,14 +16,14 @@
 
 .nr-ui-view-lasso {
     stroke-width: 1px;
-    stroke: $view-lasso-stroke;
-    fill: $view-lasso-fill;
+    stroke: var(--red-ui-view-lasso-stroke);
+    fill: var(--red-ui-view-lasso-fill);
     stroke-dasharray: 10 5;
 }
 
 .nr-ui-view-slice {
     stroke-width: 1px;
-    stroke: $view-lasso-stroke;
+    stroke: var(--red-ui-view-lasso-stroke);
     fill: none;
     stroke-dasharray: 10 5;
 }
@@ -33,11 +33,11 @@
     font-style: italic;
 }
 .red-ui-flow-node-label-white {
-    fill: $view-background !important;
+    fill: var(--red-ui-view-background) !important;
 }
 .red-ui-flow-node-label {
     stroke-width: 0;
-    fill: $node-label-color;
+    fill: var(--red-ui-node-label-color);
     font-size: 14px;
     pointer-events: none;
     -webkit-touch-callout: none;
@@ -54,7 +54,7 @@
 
 .red-ui-flow-port-label {
     stroke-width: 0;
-    fill: $node-port-label-color;
+    fill: var(--red-ui-node-port-label-color);
     font-size: 16px;
     dominant-baseline: middle;
     text-anchor: middle;
@@ -65,9 +65,12 @@
 
 
 .red-ui-flow-node {
-    stroke: $node-border;
+    stroke: var(--red-ui-node-border);
     cursor: move;
     stroke-width: 1;
+    .red-ui-workspace-locked & {
+        cursor: pointer;
+    }
 }
 .red-ui-workspace-select-mode {
     g.red-ui-flow-node.red-ui-flow-node-hovered * {
@@ -80,7 +83,7 @@
         opacity: 0.9;
         .red-ui-flow-node {
             stroke-width: 2;
-            stroke: $node-selected-color !important;
+            stroke: var(--red-ui-node-selected-color) !important;
             stroke-dasharray: 10, 4;
         }
     }
@@ -88,60 +91,83 @@
 
 .red-ui-flow-group {
     &.red-ui-flow-group-hovered {
-        .red-ui-flow-group-outline-select {
+        .red-ui-flow-group-outline-select-line {
             stroke-opacity: 0.8 !important;
             stroke-dasharray: 10 4 !important;
         }
+        .red-ui-flow-group-outline-select-outline {
+            stroke-opacity: 0.8 !important;
+        }
     }
     &.red-ui-flow-group-active-hovered:not(.red-ui-flow-group-hovered) {
         .red-ui-flow-group-outline-select {
-            stroke: $link-link-color;
+            stroke: var(--red-ui-link-link-color);
         }
     }
 }
 
 .red-ui-flow-group-outline {
     fill: none;
-    stroke: $node-selected-color;
+    stroke: var(--red-ui-node-selected-color);
     stroke-opacity: 0;
     stroke-width: 12;
     pointer-events: stroke;
 }
 .red-ui-flow-group-outline-select {
     fill: none;
-    stroke: $node-selected-color;
-    pointer-events: stroke;
+    stroke: var(--red-ui-node-selected-color);
+    pointer-events: none;
     stroke-opacity: 0;
-    stroke-width: 3;
+    stroke-width: 2;
 
+    &.red-ui-flow-group-outline-select-outline {
+        stroke: var(--red-ui-view-background);
+        stroke-width: 4;
+    }
     &.red-ui-flow-group-outline-select-background {
-        stroke: $view-background;
-        stroke-width: 6;
+        fill: white;
+        fill-opacity: 0;
+        pointer-events: stroke;
+        stroke-width: 16;
     }
 }
+
+svg:not(.red-ui-workspace-lasso-active) {
+    .red-ui-flow-group:not(.red-ui-flow-group-selected) {
+        .red-ui-flow-group-outline-select.red-ui-flow-group-outline-select-background:hover {
+            ~ .red-ui-flow-group-outline-select {
+                stroke-opacity: 0.4 !important;
+            }
+            ~ .red-ui-flow-group-outline-select-line {
+                stroke-dasharray: 10 4 !important;
+            }
+        }
+    }
+}
+
 .red-ui-flow-group-body {
     pointer-events: none;
-    fill: $group-default-fill;
-    fill-opacity: $group-default-fill-opacity;
+    fill: var(--red-ui-group-default-fill);
+    fill-opacity: var(--red-ui-group-default-fill-opacity);
     stroke-width: 2;
-    stroke: $group-default-stroke;
-    stroke-opacity: $group-default-stroke-opacity;
+    stroke: var(--red-ui-group-default-stroke);
+    stroke-opacity: var(--red-ui-group-default-stroke-opacity);
 }
 .red-ui-flow-group-label {
     @include disable-selection;
-    fill: $group-default-label-color;
+    fill: var(--red-ui-group-default-label-color);
 }
 
 
 
 .red-ui-flow-node-unknown {
     stroke-dasharray:10,4;
-    stroke: $node-border-unknown;
+    stroke: var(--red-ui-node-border-unknown);
 }
 .red-ui-flow-node-placeholder {
     stroke-dasharray:10,4;
-    stroke: $node-border-placeholder;
-    fill: $node-background-placeholder;
+    stroke: var(--red-ui-node-border-placeholder);
+    fill: var(--red-ui-node-background-placeholder);
     opacity: 0.5;
     stroke-width: 2;
 }
@@ -152,19 +178,19 @@
     .fa-lg {
         @include disable-selection;
         stroke: none;
-        fill: $node-icon-color;
+        fill: var(--red-ui-node-icon-color);
         text-anchor: middle;
         font-family: FontAwesome;
     }
 }
 .red-ui-flow-node-icon-shade {
     stroke: none;
-    fill: $node-icon-background-color-fill;
-    fill-opacity: $node-icon-background-color-opacity;
+    fill: var(--red-ui-node-icon-background-color-fill);
+    fill-opacity: var(--red-ui-node-icon-background-color-opacity);
 }
 .red-ui-flow-node-icon-shade-border {
-    stroke-opacity: $node-icon-border-color-opacity;
-    stroke: $node-icon-border-color;
+    stroke-opacity: var(--red-ui-node-icon-border-color-opacity);
+    stroke: var(--red-ui-node-icon-border-color);
     stroke-width: 1;
 }
 
@@ -176,32 +202,39 @@
             cursor: default;
         }
     }
+    &.red-ui-flow-node-button-stopped {
+        opacity: 0.4;
+        .red-ui-flow-node-button-button {
+            cursor: default;
+            pointer-events: none;
+        }
+    }
 }
 .red-ui-flow-node-button-button {
     cursor: pointer;
 }
 .red-ui-flow-node-button-background {
-    fill: $node-background-placeholder;
+    fill: var(--red-ui-node-background-placeholder);
 }
 
 .red-ui-flow-port {
-    stroke: $node-border;
+    stroke: var(--red-ui-node-border);
     stroke-width: 1;
-    fill: $node-port-background;
+    fill: var(--red-ui-node-port-background);
     cursor: crosshair;
 }
 
 .red-ui-flow-node-error {
-    fill: $node-status-error-background;
-    stroke: $node-status-error-border;
+    fill: var(--red-ui-node-status-error-background);
+    stroke: var(--red-ui-node-status-error-border);
     stroke-width:1px;
     cursor: default;
     stroke-linejoin: round;
     stroke-linecap: round;
 }
 .red-ui-flow-node-changed {
-    fill: $node-status-changed-background;
-    stroke: $node-status-changed-border;
+    fill: var(--red-ui-node-status-changed-background);
+    stroke: var(--red-ui-node-status-changed-border);
     cursor: default;
     stroke-width:1px;
     stroke-linejoin: round;
@@ -214,13 +247,13 @@ g.red-ui-flow-node-selected {
     }
     .red-ui-flow-node,.red-ui-flow-subflow-port {
         stroke-width: 2;
-        stroke: $node-selected-color !important;
+        stroke: var(--red-ui-node-selected-color) !important;
     }
 }
 .red-ui-flow-node-highlighted {
-    border-color: $node-selected-color !important;
+    border-color: var(--red-ui-node-selected-color) !important;
     border-style: dashed !important;
-    stroke: $node-selected-color;
+    stroke: var(--red-ui-node-selected-color);
     stroke-width: 3;
     stroke-dasharray: 8, 4;
 }
@@ -236,7 +269,7 @@ g.red-ui-flow-node-selected {
     .red-ui-flow-link-line {
         stroke-dasharray: 10,8 !important;
         stroke-width: 2 !important;
-        stroke: $link-disabled-color;
+        stroke: var(--red-ui-link-disabled-color);
     }
     .red-ui-flow-port {
         fill-opacity: 1;
@@ -254,7 +287,7 @@ g.red-ui-flow-node-selected {
     &.red-ui-flow-link-line {
         stroke-dasharray: 10,8 !important;
         stroke-width: 2 !important;
-        stroke: $link-disabled-color;
+        stroke: var(--red-ui-link-disabled-color);
     }
     .red-ui-flow-port {
         fill-opacity: 1;
@@ -263,49 +296,51 @@ g.red-ui-flow-node-selected {
 }
 @each $current-color in red green yellow blue grey gray {
     .red-ui-flow-node-status-dot-#{""+$current-color} {
-        fill: map-get($node-status-colors,$current-color);
-        stroke: map-get($node-status-colors,$current-color);
+        fill: var(--red-ui-node-status-colors-#{"" + $current-color});
+        stroke: var(--red-ui-node-status-colors-#{"" + $current-color});
     }
     .red-ui-flow-node-status-ring-#{""+$current-color} {
-        fill: $view-background;
-        stroke: map-get($node-status-colors,$current-color);
+        fill: var(--red-ui-view-background);
+        stroke: var(--red-ui-node-status-colors-#{"" + $current-color});
     }
 }
 
 .red-ui-flow-node-status-label {
     @include disable-selection;
     stroke-width: 0;
-    fill: $secondary-text-color;
+    fill: var(--red-ui-secondary-text-color);
     font-size:9pt;
     text-anchor:start;
 }
 
-.red-ui-flow-port-hovered {
-    stroke: $port-selected-color;
-    fill:  $port-selected-color;
+#red-ui-workspace:not(.red-ui-workspace-locked) {
+    .red-ui-flow-port-hovered {
+        stroke: var(--red-ui-port-selected-color);
+        fill:  var(--red-ui-port-selected-color);
+    }
 }
 
 .red-ui-flow-subflow-port {
-    fill: $node-background-placeholder;
-    stroke: $node-border;
+    fill: var(--red-ui-node-background-placeholder);
+    stroke: var(--red-ui-node-border);
 }
 
 .red-ui-flow-drag-line {
-    stroke: $node-selected-color !important;
+    stroke: var(--red-ui-node-selected-color) !important;
     stroke-width: 3;
     fill: none;
     pointer-events: none;
 }
 
 .red-ui-flow-link-line {
-    stroke: $link-color;
+    stroke: var(--red-ui-link-color);
     stroke-width: 3;
     fill: none;
     pointer-events: none;
 }
 .red-ui-flow-link-link {
     stroke-width: 2;
-    stroke: $link-link-color;
+    stroke: var(--red-ui-link-link-color);
     fill: none;
     stroke-dasharray: 25,4;
 }
@@ -314,19 +349,19 @@ g.red-ui-flow-node-selected {
 }
 
 .red-ui-flow-link-port {
-    fill: $node-link-port-background;
-    stroke: $link-link-color;
+    fill: var(--red-ui-node-link-port-background);
+    stroke: var(--red-ui-link-link-color);
     stroke-width: 1;
 }
 .red-ui-flow-link-group-active .red-ui-flow-link-port {
-    stroke: $link-link-active-color;
+    stroke: var(--red-ui-link-link-active-color);
 }
 .red-ui-flow-link-group:hover {
     cursor: pointer;
 }
 
 .red-ui-flow-link-outline {
-    stroke: $view-background;
+    stroke: var(--red-ui-view-background);
     stroke-opacity: 0.4;
     stroke-width: 5;
     cursor: crosshair;
@@ -334,7 +369,7 @@ g.red-ui-flow-node-selected {
     pointer-events: none;
 }
 .red-ui-flow-link-background {
-    stroke: $view-background;
+    stroke: var(--red-ui-view-background);
     opacity: 0;
     stroke-width: 20;
     cursor: crosshair;
@@ -345,10 +380,10 @@ g.red-ui-flow-node-selected {
 }
 
 g.red-ui-flow-link-selected path.red-ui-flow-link-line {
-    stroke: $node-selected-color;
+    stroke: var(--red-ui-node-selected-color);
 }
 g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
-    stroke: $link-unknown-color;
+    stroke: var(--red-ui-link-unknown-color);
     stroke-width: 2;
     stroke-dasharray: 10, 4;
 }
@@ -364,15 +399,15 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
     pointer-events: none;
 
     path:first-child {
-        fill: $popover-background;
-        stroke: $popover-background;
+        fill: var(--red-ui-popover-background);
+        stroke: var(--red-ui-popover-background);
         stroke-width: 1;
     }
 }
 .red-ui-flow-port-tooltip-label {
     stroke-width: 0;
-    fill: $popover-color;
-    font-family: $primary-font;
+    fill: var(--red-ui-popover-color);
+    font-family: var(--red-ui-primary-font);
     font-size: 12px;
     pointer-events: none;
     -webkit-touch-callout: none;
@@ -401,18 +436,18 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
     }
 }
 .red-ui-flow-junction-port {
-    stroke: $node-border;
+    stroke: var(--red-ui-node-border);
     stroke-width: 1;
-    fill: $node-port-background;
+    fill: var(--red-ui-node-port-background);
     cursor: crosshair;
     transition: transform 0.1s;
     opacity: 0;
     pointer-events: none;
 }
 .red-ui-flow-junction-background {
-    stroke: $node-border;
+    stroke: var(--red-ui-node-border);
     stroke-width: 1;
-    fill: $node-port-background;
+    fill: var(--red-ui-node-port-background);
     cursor: crosshair;
     transform: scale(1);
     transition: transform 0.1s;
@@ -421,10 +456,10 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
     }
 }
 .red-ui-flow-junction-hovered {
-    stroke: $port-selected-color;
-    fill:  $port-selected-color;
+    stroke: var(--red-ui-port-selected-color);
+    fill:  var(--red-ui-port-selected-color);
 }
 .red-ui-flow-junction.selected .red-ui-flow-junction-background {
-    stroke: $port-selected-color;
-    // fill:  $port-selected-color;
+    stroke: var(--red-ui-port-selected-color);
+    // fill:  var(--red-ui-port-selected-color);
 }

packages/node_modules/@node-red/editor-client/src/sass/forms.scss

@@ -99,13 +99,13 @@
         margin-bottom: 20px;
         font-size: 21px;
         line-height: 40px;
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
         border: 0;
-        border-bottom: 1px solid $secondary-border-color;
+        border-bottom: 1px solid var(--red-ui-secondary-border-color);
     }
 
     legend small {
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
     }
 
 
@@ -125,7 +125,7 @@
     button,
     select,
     textarea {
-        font-family: $primary-font;
+        font-family: var(--red-ui-primary-font);
     }
 
     label {
@@ -159,7 +159,7 @@
         margin-bottom: 10px;
         font-size: 14px;
         line-height: 20px;
-        color: $form-text-color;
+        color: var(--red-ui-form-text-color);
         vertical-align: middle;
         border-radius: 4px;
     }
@@ -193,8 +193,8 @@
     div[contenteditable="true"],
     .uneditable-input,
     .placeholder-input {
-        background-color: $form-input-background;
-        border: 1px solid $form-input-border-color;
+        background-color: var(--red-ui-form-input-background);
+        border: 1px solid var(--red-ui-form-input-border-color);
     }
 
     textarea:focus,
@@ -214,7 +214,7 @@
     input[type="color"]:focus,
     div[contenteditable="true"]:focus,
     .uneditable-input:focus {
-        border-color: $form-input-focus-color;
+        border-color: var(--red-ui-form-input-focus-color);
         outline: 0;
         outline: thin dotted \9;
     }
@@ -245,8 +245,8 @@
 
     select {
         width: 220px;
-        background-color: $form-input-background;
-        border: 1px solid $form-input-border-color;
+        background-color: var(--red-ui-form-input-background);
+        border: 1px solid var(--red-ui-form-input-border-color);
     }
 
     select[multiple],
@@ -258,16 +258,16 @@
     input[type="file"]:focus,
     input[type="radio"]:focus,
     input[type="checkbox"]:focus {
-        outline: 2px auto $form-input-focus-color;
+        outline: 2px auto var(--red-ui-form-input-focus-color);
         outline-offset: -3px;
     }
 
     .uneditable-input,
     .uneditable-textarea {
-        color: $form-text-color-disabled;
+        color: var(--red-ui-form-text-color-disabled);
         cursor: not-allowed;
-        background-color: $form-input-background-disabled;
-        border-color: $form-input-border-color;
+        background-color: var(--red-ui-form-input-background-disabled);
+        border-color: var(--red-ui-form-input-border-color);
     }
 
     .uneditable-input {
@@ -282,19 +282,19 @@
 
     input:-moz-placeholder,
     textarea:-moz-placeholder {
-        color: $form-placeholder-color;
+        color: var(--red-ui-form-placeholder-color);
     }
 
     input:-ms-input-placeholder,
     div[contenteditable="true"]:-ms-input-placeholder,
     textarea:-ms-input-placeholder {
-        color: $form-placeholder-color;
+        color: var(--red-ui-form-placeholder-color);
     }
 
     input::-webkit-input-placeholder,
     div[contenteditable="true"]::-webkit-input-placeholder,
     textarea::-webkit-input-placeholder {
-        color: $form-placeholder-color;
+        color: var(--red-ui-form-placeholder-color);
     }
 
     .radio,
@@ -384,7 +384,7 @@
     }
 
     label.disabled {
-        color: $form-text-color-disabled;
+        color: var(--red-ui-form-text-color-disabled);
         cursor: default;
     }
 
@@ -395,8 +395,8 @@
     select[readonly],
     textarea[readonly] {
         cursor: not-allowed;
-        color: $form-text-color-disabled;
-        background-color: $form-input-background-disabled;
+        color: var(--red-ui-form-text-color-disabled);
+        background-color: var(--red-ui-form-input-background-disabled);
     }
 
     input[type="radio"][disabled],
@@ -410,21 +410,21 @@
     div[contenteditable="true"]:invalid,
     textarea:invalid,
     select:invalid {
-        border-color: $form-input-border-error-color;
+        border-color: var(--red-ui-form-input-border-error-color);
     }
 
     input:focus:invalid,
     div[contenteditable="true"]:focus:invalid,
     textarea:focus:invalid,
     select:focus:invalid {
-        border-color: $form-input-border-error-color;
+        border-color: var(--red-ui-form-input-border-error-color);
     }
 
     input:focus:invalid:focus,
     div[contenteditable="true"]:focus:invalid:focus,
     textarea:focus:invalid:focus,
     select:focus:invalid:focus {
-        border-color: $form-input-border-error-color;
+        border-color: var(--red-ui-form-input-border-error-color);
     }
 
     .input-append,
@@ -488,8 +488,8 @@
         font-weight: normal;
         line-height: 20px;
         text-align: center;
-        background-color: $form-button-background;
-        border: 1px solid $form-input-border-color;
+        background-color: var(--red-ui-form-button-background);
+        border: 1px solid var(--red-ui-form-input-border-color);
     }
 
     .input-append .add-on,

packages/node_modules/@node-red/editor-client/src/sass/header.scss

@@ -24,10 +24,10 @@
     left: 0;
     width: 100%;
     height: 40px;
-    background: $header-background;
+    background: var(--red-ui-header-background);
     box-sizing: border-box;
     padding: 0px 0px 0px 20px;
-    color: $header-menu-color;
+    color: var(--red-ui-header-menu-color);
     font-size: 14px;
 
     span.red-ui-header-logo {
@@ -81,17 +81,17 @@
         font-size: 20px;
         padding: 0px 12px;
         text-decoration: none;
-        color: $header-menu-color;
+        color: var(--red-ui-header-menu-color);
         margin: auto 5px;
         vertical-align: middle;
-        border-left: 2px solid $header-background;
-        border-right: 2px solid $header-background;
+        border-left: 2px solid var(--red-ui-header-background);
+        border-right: 2px solid var(--red-ui-header-background);
 
         &:hover {
-            border-color: $header-menu-item-hover;
+            border-color: var(--red-ui-header-menu-item-hover);
         }
         &:active, &.active {
-            background: $header-button-background-active;
+            background: var(--red-ui-header-button-background-active);
         }
         &:focus {
             outline: none;
@@ -116,18 +116,18 @@
     }
 
     .red-ui-deploy-button {
-        background: $deploy-button-background;
-        color: $deploy-button-color;
+        background: var(--red-ui-deploy-button-background);
+        color: var(--red-ui-deploy-button-color);
 
         &:hover {
-            background: $deploy-button-background-hover;
+            background: var(--red-ui-deploy-button-background-hover);
         }
         &:focus {
             outline: none;
         }
         &:active {
-            background: $deploy-button-background-active;
-            color: $deploy-button-color-active;
+            background: var(--red-ui-deploy-button-background-active);
+            color: var(--red-ui-deploy-button-color-active);
         }
     }
 
@@ -149,21 +149,21 @@
         padding: 4px 12px;
         &.disabled {
             cursor: default;
-            background: $deploy-button-background-disabled;
-            color: $deploy-button-color-disabled;
+            background: var(--red-ui-deploy-button-background-disabled);
+            color: var(--red-ui-deploy-button-color-disabled);
 
             .red-ui-deploy-button-content>img {
                 opacity: 0.3;
             }
             &+ #red-ui-header-button-deploy-options {
-                background: $deploy-button-background-disabled;
-                color: $deploy-button-color-active;
+                background: var(--red-ui-deploy-button-background-disabled);
+                color: var(--red-ui-deploy-button-color-active);
             }
             &+ #red-ui-header-button-deploy-options:hover {
-                background: $deploy-button-background-disabled-hover;
+                background: var(--red-ui-deploy-button-background-disabled-hover);
             }
             &+ #red-ui-header-button-deploy-options:active {
-                background: $deploy-button-background-disabled;
+                background: var(--red-ui-deploy-button-background-disabled);
             }
         }
 
@@ -174,24 +174,24 @@
 
     .red-ui-deploy-button-group.open {
         #red-ui-header-button-deploy-options {
-            background: $header-button-background-active !important;
+            background: var(--red-ui-header-button-background-active) !important;
         }
     }
 
     li.open .button {
-        background: $header-button-background-active;
-        border-color: $header-button-background-active;
+        background: var(--red-ui-header-button-background-active);
+        border-color: var(--red-ui-header-button-background-active);
     }
 
 
     ul.red-ui-menu-dropdown {
-        background: $header-menu-background;
-        border: 1px solid $header-menu-background;
+        background: var(--red-ui-header-menu-background);
+        border: 1px solid var(--red-ui-header-menu-background);
         width: 260px !important;
         margin-top: 0;
         li a {
-            color: $header-menu-color;
-            padding: 3px 10px 3px 40px;
+            color: var(--red-ui-header-menu-color);
+            padding: 3px 10px 3px 30px;
             img {
                 max-width: 100%;
                 margin-right: 10px;
@@ -199,11 +199,11 @@
                 border: 3px solid transparent;
             }
             .red-ui-popover-key {
-                color: $header-menu-color-disabled !important;
-                border-color: $header-menu-color-disabled !important;
+                color: var(--red-ui-header-menu-color-disabled) !important;
+                border-color: var(--red-ui-header-menu-color-disabled) !important;
             }
             &.active img {
-                border: 3px solid $header-menu-item-border-active;
+                border: 3px solid var(--red-ui-header-menu-item-border-active);
             }
 
             span.red-ui-menu-label-container {
@@ -217,9 +217,9 @@
                 text-indent: 0px;
             }
             span.red-ui-menu-sublabel {
-                color: $header-menu-sublabel-color;
+                color: var(--red-ui-header-menu-sublabel-color);
                 font-size: 13px;
-                display: inline-block;
+                display: block;
                 text-indent: 0px;
             }
         }
@@ -228,13 +228,13 @@
         > li > a:focus,
         > li:hover > a,
         > li:focus > a {
-            background: $header-menu-item-hover !important;
+            background: var(--red-ui-header-menu-item-hover) !important;
         }
         li.red-ui-menu-divider {
-            background: $headerMenuItemDivider;
+            background: var(--red-ui-headerMenuItemDivider);
         }
         li.disabled a {
-            color:  $header-menu-color-disabled;
+            color:  var(--red-ui-header-menu-color-disabled);
         }
         > li.disabled > a:hover,
         > li.disabled > a:focus {
@@ -242,7 +242,8 @@
         }
     }
     .red-ui-menu-dropdown-submenu>a:before {
-        border-right-color: $headerMenuCaret;
+        border-right-color: var(--red-ui-headerMenuCaret);
+        margin-left: -25px !important;
     }
 
     /* Deploy menu customisations */
@@ -250,7 +251,7 @@
         width: 300px !important;
         li a {
             padding: 10px 30px;
-            color: $header-menu-heading-color;
+            color: var(--red-ui-header-menu-heading-color);
             span.red-ui-menu-label {
                 font-size: 16px;
                 display: inline-block;
@@ -263,7 +264,7 @@
     }
     /* User menu customisations */
     #usermenu-item-username > .red-ui-menu-label {
-        color: $header-menu-heading-color;
+        color: var(--red-ui-header-menu-heading-color);
     }
 
     #red-ui-header-button-user .user-profile {

packages/node_modules/@node-red/editor-client/src/sass/jquery.scss

@@ -16,25 +16,27 @@
 
 .ui-widget {
     font-size: 14px !important;
-    font-family: $primary-font;
+    font-family: var(--red-ui-primary-font);
 }
 .ui-widget input, .ui-widget div[contenteditable="true"], .ui-widget select, .ui-widget textarea, .ui-widget button {
     font-size: 14px !important;
-    font-family: $primary-font;
+    font-family: var(--red-ui-primary-font);
 }
 .ui-widget input, .ui-widget div[contenteditable="true"] {
     box-shadow: none;
 }
 
 .ui-widget.ui-widget-content {
-    border: 1px solid $tertiary-border-color;
+    border: 1px solid var(--red-ui-tertiary-border-color);
 }
 .ui-widget-content {
-    border: 1px solid $secondary-border-color;
+    border: 1px solid var(--red-ui-secondary-border-color);
+    background: var(--red-ui-secondary-background);
+    color: var(--red-ui-primary-text-color);
 }
 
 .ui-widget-header {
-    color: $header-text-color;
+    color: var(--red-ui-header-text-color);
 }
 
 /* jQuery Theme overrides */
@@ -50,7 +52,7 @@
 
 .ui-dialog {
     border-radius: 1px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     padding: 0;
     @include component-shadow;
 }
@@ -62,20 +64,20 @@
 }
 .ui-dialog .ui-dialog-titlebar {
     padding: 10px;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
     border: none;
-    border-bottom: 1px solid $primary-border-color;
+    border-bottom: 1px solid var(--red-ui-primary-border-color);
     border-radius: 0;
 }
 .ui-dialog .ui-dialog-buttonpane.ui-widget-content {
-    background: $tertiary-background;
+    background: var(--red-ui-tertiary-background);
 
 }
 .ui-corner-all {
     border-radius: 1px;
 }
 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
 }
 .ui-dialog-no-close .ui-dialog-titlebar-close {
     display: none;
@@ -95,8 +97,8 @@
     padding: 6px 14px;
     margin-right: 8px;
     border-radius: 2px;
-    color: $workspace-button-color;
-    background: $workspace-button-background;
+    color: var(--red-ui-workspace-button-color);
+    background: var(--red-ui-workspace-button-background);
 
     &.leftButton {
         float: left;
@@ -107,18 +109,18 @@
     }
 
     &.primary {
-        border-color: $workspace-button-background-primary;
-        color: $workspace-button-color-primary !important;
-        background: $workspace-button-background-primary;
+        border-color: var(--red-ui-workspace-button-background-primary);
+        color: var(--red-ui-workspace-button-color-primary) !important;
+        background: var(--red-ui-workspace-button-background-primary);
         &:not(.disabled):hover {
-            border-color: $workspace-button-background-primary-hover;
-            background: $workspace-button-background-primary-hover;
-            color: $workspace-button-color-primary !important;
+            border-color: var(--red-ui-workspace-button-background-primary-hover);
+            background: var(--red-ui-workspace-button-background-primary-hover);
+            color: var(--red-ui-workspace-button-color-primary) !important;
         }
         &.disabled {
-            border-color: $form-input-border-color;
-            color: $workspace-button-color-disabled !important;
-            background: $workspace-button-background;
+            border-color: var(--red-ui-form-input-border-color);
+            color: var(--red-ui-workspace-button-color-disabled) !important;
+            background: var(--red-ui-workspace-button-background);
         }
     }
     &.disabled {
@@ -142,10 +144,10 @@
 .ui-spinner {
     border-radius: 4px;
     padding: 0;
-    border: 1px solid $form-input-border-color;
+    border: 1px solid var(--red-ui-form-input-border-color);
 }
 .ui-spinner input {
-    background: $form-input-background;
+    background: var(--red-ui-form-input-background);
     margin: 0 17px 0 0;
     padding: 6px;
     border: none;
@@ -169,8 +171,18 @@
 .ui-button,
 html .ui-button.ui-state-disabled:hover,
 html .ui-button.ui-state-disabled:active {
-    border: 1px solid $secondary-border-color;
-    background: $form-button-background;
+    border: 1px solid var(--red-ui-secondary-border-color);
+    background: var(--red-ui-form-button-background);
+}
+
+.ui-state-default a,
+.ui-state-default a:link,
+.ui-state-default a:visited,
+a.ui-button,
+a:link.ui-button,
+a:visited.ui-button,
+.ui-button{
+    color: var(--red-ui-primary-text-color);
 }
 
 .ui-state-hover,
@@ -180,9 +192,9 @@ html .ui-button.ui-state-disabled:active {
 .ui-widget-content .ui-state-focus,
 .ui-widget-header .ui-state-focus,
 .ui-button:hover, .ui-button:focus {
-    border: 1px solid $secondary-border-color;
-    background: $workspace-button-background-hover;
-    color: $workspace-button-color-hover;
+    border: 1px solid var(--red-ui-secondary-border-color);
+    background: var(--red-ui-workspace-button-background-hover);
+    color: var(--red-ui-workspace-button-color-hover);
 }
 
 .ui-state-active,
@@ -191,10 +203,10 @@ html .ui-button.ui-state-disabled:active {
 a.ui-button:active,
 .ui-button:active,
 .ui-button.ui-state-active:hover {
-    border: 1px solid $secondary-border-color;
-    background: $workspace-button-background-active;
+    border: 1px solid var(--red-ui-secondary-border-color);
+    background: var(--red-ui-workspace-button-background-active);
     font-weight: normal;
-    color: $workspace-button-color-active;
+    color: var(--red-ui-workspace-button-color-active);
 }
 
 .ui-state-active .ui-icon, .ui-button:active .ui-icon {

packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss

@@ -23,9 +23,9 @@
     }
     .keyboard-shortcut-list-header {
         padding:0 5px 0 5px;
-        border-bottom: 1px solid $primary-border-color;
+        border-bottom: 1px solid var(--red-ui-primary-border-color);
         div {
-            color: $header-text-color !important;
+            color: var(--red-ui-header-text-color) !important;
         }
         .red-ui-searchBox-container {
             width: calc(100% - 20px);
@@ -49,7 +49,7 @@
             }
         }
         li:hover {
-            background: $list-item-background-hover;
+            background: var(--red-ui-list-item-background-hover);
         }
     }
     .keyboard-shortcut-entry {
@@ -78,13 +78,13 @@
         width: calc(100% - 160px - 100px - 10px);
         overflow: hidden;
         i {
-            color: $tertiary-text-color;
+            color: var(--red-ui-tertiary-text-color);
             margin-right: 5px;
         }
     }
     .keyboard-shortcut-entry-scope {
         width:100px;
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
         vertical-align: middle;
         text-align: right;
     }
@@ -94,13 +94,13 @@
         }
     }
     .keyboard-shortcut-entry-unassigned {
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
         .keyboard-shortcut-entry-key {
             font-style: italic;
         }
     }
     .keyboard-shortcut-entry-expanded {
-        background: $list-item-background-selected;
+        background: var(--red-ui-list-item-background-selected);
         .keyboard-shortcut-entry-key {
             width: 150px;
         }
@@ -115,12 +115,12 @@
     }
 }
 .help-key {
-    border: 1px solid $tertiary-border-color;
+    border: 1px solid var(--red-ui-tertiary-border-color);
     padding: 4px;
     border-radius: 3px;
-    background: $tertiary-background;
-    font-family: $monospace-font;
-    box-shadow: $shade-color  1px 1px 1px;
+    background: var(--red-ui-tertiary-background);
+    font-family: var(--red-ui-monospace-font);
+    box-shadow: var(--red-ui-shade-color  1px 1px 1px);
 }
 .help-key-block {
     white-space: nowrap;

packages/node_modules/@node-red/editor-client/src/sass/library.scss

@@ -18,13 +18,13 @@
     pre {
         margin: 10px 0;
         border: none;
-        color: $primary-text-color;
+        color: var(--red-ui-primary-text-color);
         span {
             padding: 5px 0;
         }
         span.error {
             padding: 5px;
-            border: 1px solid $form-input-border-error-color;
+            border: 1px solid var(--red-ui-form-input-border-error-color);
             margin: 0 1px;
         }
     }
@@ -52,16 +52,16 @@
 
 .red-ui-clipboard-dialog-tab-clipboard {
     textarea {
-        color: $secondary-text-color-active !important;
+        color: var(--red-ui-secondary-text-color-active) !important;
         resize: none;
         width: 100%;
         border-radius: 4px;
-        font-family: $monospace-font !important;
+        font-family: var(--red-ui-monospace-font !important);
         font-size: 13px !important;
         height: 100%;
         line-height: 1.3em;
         padding: 6px 10px;
-        background: $clipboard-textarea-background;
+        background: var(--red-ui-clipboard-textarea-background);
     }
 }
 
@@ -80,7 +80,7 @@
     right: 0;
     bottom: 0;
     padding: 0;
-    background: $form-input-background;
+    background: var(--red-ui-form-input-background);
     &>div {
         height: 100%;
         box-sizing: border-box;
@@ -89,7 +89,7 @@
 .red-ui-clipboard-dialog-box {
     height: 400px;
     position:relative;
-    border:1px solid $primary-border-color;
+    border:1px solid var(--red-ui-primary-border-color);
 }
 
 #red-ui-clipboard-dialog-export-tab-library-filename {
@@ -111,7 +111,7 @@
 .red-ui-clipboard-dialog-tabs-content>div.red-ui-clipboard-dialog-export-tab-library-browser {
     height: calc(100% - 60px);
     margin-bottom: 13px;
-    border-bottom: 1px solid $primary-border-color;
+    border-bottom: 1px solid var(--red-ui-primary-border-color);
     box-sizing: border-box;
 }
 #red-ui-clipboard-dialog-import-tab-library-browser {
@@ -124,7 +124,7 @@
     position: relative;
     height: 100%;
     .red-ui-treeList-container {
-        background: $secondary-background;
+        background: var(--red-ui-secondary-background);
         border: none;
         border-radius: 0;
         li {
@@ -149,14 +149,14 @@
 
 #red-ui-library-dialog-save-browser {
     height: calc(100% - 60px);
-    border: 1px solid $primary-border-color;
+    border: 1px solid var(--red-ui-primary-border-color);
     margin-bottom: 10px;
 }
 #red-ui-library-dialog-load-browser {
-    // border: 1px solid $primary-border-color;
+    // border: 1px solid var(--red-ui-primary-border-color);
 }
 #red-ui-library-dialog-load-panes {
-    border: 1px solid $primary-border-color;
+    border: 1px solid var(--red-ui-primary-border-color);
 }
 
 
@@ -180,15 +180,15 @@
     position: relative;
 
     li:not(:first-child) .red-ui-clipboard-dialog-import-conflicts-item-header {
-        // border-top: 1px solid $secondary-border-color;
+        // border-top: 1px solid var(--red-ui-secondary-border-color);
     }
 
 }
 
 .red-ui-clipboard-dialog-import-conflicts-item-header {
-    background: $tertiary-background;
+    background: var(--red-ui-tertiary-background);
     & > span:first-child {
-        color: $header-text-color;
+        color: var(--red-ui-header-text-color);
         padding-left: 4px;
         font-size: 12px;
     }
@@ -199,7 +199,7 @@
     bottom: 0;
     right: 0px;
     text-align: center;
-    color: $form-text-color;
+    color: var(--red-ui-form-text-color);
     .form-row & label  {
         padding: 2px 0;
         line-height: 23px;
@@ -210,7 +210,7 @@
         height: 100%;
         width: 80px;
         text-align: center;
-        border-left: 1px solid $secondary-border-color;
+        border-left: 1px solid var(--red-ui-secondary-border-color);
     }
     input[type="checkbox"] {
         display: inline-block;
@@ -265,7 +265,7 @@
     span:nth-child(3), span:nth-child(4) {
         flex-grow: 0;
         padding-right: 5px;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         font-size: 0.9em;
     }
 }

packages/node_modules/@node-red/editor-client/src/sass/mixins.scss

@@ -31,33 +31,33 @@
 }
 
 @mixin component-border {
-   border: 1px solid $primary-border-color;
+   border: 1px solid var(--red-ui-primary-border-color);
    box-sizing: border-box;
 
 }
 
 @mixin reset-a-style {
-    color: $workspace-button-color !important;
-    background: $workspace-button-background;
+    color: var(--red-ui-workspace-button-color) !important;
+    background: var(--red-ui-workspace-button-background);
     text-decoration: none;
 
     &.disabled, &:disabled  {
         cursor: default;
-        color: $workspace-button-color-disabled !important;
+        color: var(--red-ui-workspace-button-color-disabled) !important;
     }
     &:hover, &:focus {
         text-decoration: none;
     }
-    &:not(.disabled):not(:disabled):hover, {
-        color: $workspace-button-color-hover !important;
-        background: $workspace-button-background-hover;
+    &:not(.disabled):not(:disabled):hover {
+        color: var(--red-ui-workspace-button-color-hover) !important;
+        background: var(--red-ui-workspace-button-background-hover);
     }
     &:not(.disabled):not(:disabled):focus {
-        color: $workspace-button-color-focus !important;
+        color: var(--red-ui-workspace-button-color-focus) !important;
     }
     &:not(.disabled):not(:disabled):active {
-        color: $workspace-button-color-active !important;
-        background: $workspace-button-background-active;
+        color: var(--red-ui-workspace-button-color-active) !important;
+        background: var(--red-ui-workspace-button-background-active);
         text-decoration: none;
     }
 }
@@ -68,14 +68,14 @@
 
     box-sizing: border-box;
     display: inline-block;
-    border: 1px solid $form-input-border-color;
+    border: 1px solid var(--red-ui-form-input-border-color);
     text-align: center;
     margin:0;
     cursor:pointer;
 
     &.selected:not(.disabled):not(:disabled) {
-        color: $workspace-button-color-selected !important;
-        background: $workspace-button-background-active;
+        color: var(--red-ui-workspace-button-color-selected) !important;
+        background: var(--red-ui-workspace-button-background-active);
     }
     .button-group &:not(:first-child) {
         border-left: none;
@@ -108,23 +108,23 @@
     }
 
     &:focus {
-        outline: 1px solid $workspace-button-color-focus-outline;
+        outline: 1px solid var(--red-ui-workspace-button-color-focus-outline);
         outline-offset: 1px;
     }
 
     &.primary {
-        border-color: $workspace-button-background-primary;
-        color: $workspace-button-color-primary !important;
-        background: $workspace-button-background-primary;
+        border-color: var(--red-ui-workspace-button-background-primary);
+        color: var(--red-ui-workspace-button-color-primary) !important;
+        background: var(--red-ui-workspace-button-background-primary);
         &.disabled, &.ui-state-disabled {
             background: none;
-            color: $workspace-button-color !important;
-            border-color: $form-input-border-color;
+            color: var(--red-ui-workspace-button-color) !important;
+            border-color: var(--red-ui-form-input-border-color);
         }
         &:not(.disabled):not(.ui-button-disabled):hover {
-            border-color: $workspace-button-background-primary-hover;
-            background: $workspace-button-background-primary-hover;
-            color: $workspace-button-color-primary !important;
+            border-color: var(--red-ui-workspace-button-background-primary-hover);
+            background: var(--red-ui-workspace-button-background-primary-hover);
+            color: var(--red-ui-workspace-button-color-primary) !important;
         }
     }
     &.secondary {
@@ -151,7 +151,7 @@
         margin-bottom: 1px;
         &.selected:not(.disabled):not(:disabled) {
             border-bottom-width: 2px;
-            border-bottom-color: $form-input-border-selected-color;
+            border-bottom-color: var(--red-ui-form-input-border-selected-color);
             margin-bottom: 0;
             cursor: default;
         }
@@ -166,7 +166,7 @@
     padding: 6px 14px;
     margin-right: 8px;
     &:not(.disabled):hover {
-        //color: $workspace-button-color;
+        //color: var(--red-ui-workspace-button-color);
     }
     &.disabled {
         background: none;
@@ -187,8 +187,8 @@
 }
 
 @mixin component-footer {
-    border-top: 1px solid $primary-border-color;
-    background: $primary-background;
+    border-top: 1px solid var(--red-ui-primary-border-color);
+    background: var(--red-ui-primary-background);
     text-align: right;
     position: absolute;
     bottom: 0;
@@ -231,7 +231,7 @@
 }
 
 @mixin component-shadow {
-    box-shadow: 1px 1px 4px $shadow;
+    box-shadow: 1px 1px 4px var(--red-ui-shadow);
 
 }
 
@@ -241,7 +241,7 @@
     left: 0;
     bottom: 0;
     right: 0;
-    background: $shade-color;
+    background: var(--red-ui-shade-color);
     z-index: 5;
 }
 .red-ui-shade {

packages/node_modules/@node-red/editor-client/src/sass/notifications.scss

@@ -27,12 +27,13 @@
     position: relative;
     padding: 8px 18px 0px;
     margin-bottom: 4px;
-    box-shadow: 0 1px 1px 1px $shadow;
-    background-color: $secondary-background;
-    color: $primary-text-color;
-    border: 1px solid $notification-border-default;
+    box-shadow: 0 1px 1px 1px var(--red-ui-shadow);
+    background-color: var(--red-ui-secondary-background);
+    color: var(--red-ui-primary-text-color);
+    border: 1px solid var(--red-ui-notification-border-default);
     border-left-width: 16px;
-    overflow: hidden;
+    overflow: auto;
+    max-height: 80vh;
     .ui-dialog-buttonset {
         margin-top: 20px;
         margin-bottom: 10px;
@@ -50,13 +51,13 @@
 }
 
 .red-ui-notification-success {
-    border-color: $notification-border-success;
+    border-color: var(--red-ui-notification-border-success);
 }
 .red-ui-notification-warning {
-    border-color: $notification-border-warning;
+    border-color: var(--red-ui-notification-border-warning);
 }
 .red-ui-notification-error {
-    border-color: $notification-border-error;
+    border-color: var(--red-ui-notification-border-error);
 }
 
 .red-ui-notification-compact {

packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss

@@ -27,7 +27,7 @@
     left:0;
     padding: 0;
     box-sizing:border-box;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
 
     .red-ui-editableList-container {
         border: none;
@@ -37,27 +37,27 @@
 
         li {
             // border: none;
-            // border-top: 1px solid $primary-border-color;
+            // border-top: 1px solid var(--red-ui-primary-border-color);
             padding: 0px;
             .red-ui-button {
                 min-width: 60px;
             }
 
             .disabled {
-                // background: $secondary-background-inactive;//f3f3f3;
+                // background: var(--red-ui-secondary-background-inactive;//f3f3f3);
 
                 .red-ui-palette-module-name {
                     font-style: italic;
-                    color: $tertiary-text-color;
+                    color: var(--red-ui-tertiary-text-color);
                 }
                 .red-ui-palette-module-version {
-                    color: $tertiary-text-color;
+                    color: var(--red-ui-tertiary-text-color);
                 }
                 .red-ui-palette-module-errors .fa-warning {
                     opacity: 0.5;
                 }
                 ul.red-ui-palette-module-error-list li {
-                    color: $tertiary-text-color;
+                    color: var(--red-ui-tertiary-text-color);
                 }
 
 
@@ -66,7 +66,7 @@
                 padding: 12px 16px;
             }
             &:last-child {
-                // border-bottom: 1px solid $primary-border-color;
+                // border-bottom: 1px solid var(--red-ui-primary-border-color);
             }
         }
 
@@ -79,14 +79,14 @@
         bottom:0
     }
     .red-ui-palette-editor-toolbar {
-        background: $primary-background;
+        background: var(--red-ui-primary-background);
         box-sizing: border-box;
         padding: 8px 10px;
-        border-bottom: 1px solid $primary-border-color;
+        border-bottom: 1px solid var(--red-ui-primary-border-color);
         text-align: right;
     }
     .red-ui-palette-module-shade-status {
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
     .red-ui-palette-module-updated {
         margin-left: 10px;
@@ -98,7 +98,7 @@
     .red-ui-palette-module-description {
         margin-left: 20px;
         font-size: 0.9em;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
     .red-ui-palette-module-link {
     }
@@ -120,7 +120,7 @@
         }
     }
     .red-ui-palette-module-set {
-        border:1px solid $secondary-border-color;
+        border:1px solid var(--red-ui-secondary-border-color);
         border-radius: 0;
         padding: 5px;
         position: relative;
@@ -138,7 +138,7 @@
     }
 
     .red-ui-palette-module-type {
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         padding-left: 5px;
         font-size: 0.9em;
         @include enable-selection;
@@ -150,8 +150,8 @@
         border-radius: 3px;
         vertical-align: middle;
         margin-right: 5px;
-        background: $primary-background;
-        border: 1px dashed $secondary-border-color;
+        background: var(--red-ui-primary-background);
+        border: 1px dashed var(--red-ui-secondary-border-color);
     }
     .red-ui-palette-module-set-button-group {
         position: absolute;
@@ -160,35 +160,35 @@
     }
 
     .red-ui-palette-module-set-disabled {
-        background: $list-item-background-disabled;
+        background: var(--red-ui-list-item-background-disabled);
         .red-ui-palette-module-type {
-            color: $secondary-text-color-disabled-active;
+            color: var(--red-ui-secondary-text-color-disabled-active);
         }
     }
     .red-ui-palette-module-more {
         padding: 0 !important;
         margin-top: 10px;
         margin-bottom: 10px;
-        background: $tab-background-inactive;
+        background: var(--red-ui-tab-background-inactive);
         a {
             display: block;
             text-align: center;
             padding: 12px 8px;
-            color: $text-color-code;
+            color: var(--red-ui-text-color-code);
 
             &:hover {
                 text-decoration: none;
-                background: $tab-background-hover;
+                background: var(--red-ui-tab-background-hover);
             }
         }
     }
 
 }
 .red-ui-palette-module-meta {
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     position: relative;
     &.disabled {
-        color: $secondary-text-color-disabled;
+        color: var(--red-ui-secondary-text-color-disabled);
     }
 
     .fa {
@@ -198,7 +198,7 @@
     }
 }
 .red-ui-palette-module-name {
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
     white-space: nowrap;
     @include enable-selection;
 }
@@ -216,7 +216,7 @@
     }
 }
 .red-ui-palette-module-meta .fa-warning {
-    color: $text-color-warning;
+    color: var(--red-ui-text-color-warning);
 }
 ul.red-ui-palette-module-error-list {
     display: inline-block;
@@ -264,9 +264,9 @@ button.red-ui-palette-editor-upload-button {
     right: 0;
     top: 44px;
     padding: 20px;
-    background: $secondary-background;
-    border-bottom: 1px $secondary-border-color solid;
-    box-shadow: 1px 1px 4px $shadow;
+    background: var(--red-ui-secondary-background);
+    border-bottom: 1px var(--red-ui-secondary-border-color solid);
+    box-shadow: 1px 1px 4px var(--red-ui-shadow);
 
     .placeholder-input {
         width: calc(100% - 180px);

packages/node_modules/@node-red/editor-client/src/sass/palette.scss

@@ -20,7 +20,7 @@
     top: 0px;
     bottom: 0px;
     left:0px;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
     width: 180px;
     text-align: center;
     @include disable-selection;
@@ -55,26 +55,26 @@
 .red-ui-palette-search {
     position: relative;
     overflow: hidden;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     text-align: center;
     height: 35px;
     padding: 3px;
-    border-bottom: 1px solid $primary-border-color;
+    border-bottom: 1px solid var(--red-ui-primary-border-color);
     box-sizing:border-box;
 }
 
 .red-ui-palette-category {
-    border-bottom: 1px solid $secondary-border-color;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
 }
 .red-ui-palette-content {
-    background: $palette-content-background;
+    background: var(--red-ui-palette-content-background);
     padding: 3px;
 }
 
 .red-ui-palette-header {
     position: relative;
-    background: $palette-header-background;
-    color: $palette-header-color;
+    background: var(--red-ui-palette-header-background);
+    color: var(--red-ui-palette-header-color);
     cursor: pointer;
     text-align: left;
     padding: 9px;
@@ -83,7 +83,7 @@
     overflow: hidden;
     user-select: none;
     &:hover {
-        background: $palette-header-background !important;
+        background: var(--red-ui-palette-header-background) !important;
     }
 }
 .red-ui-palette-header > i {
@@ -106,7 +106,7 @@
     clear: both;
 }
 .red-ui-palette-label {
-    color: $node-label-color;
+    color: var(--red-ui-node-label-color);
     font-size: 13px;
     margin: 4px 0 4px 32px;
     line-height: 20px;
@@ -121,11 +121,11 @@
 .red-ui-palette-node {
     // display: inline-block;
     cursor: move;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     margin: 10px auto;
     height: 25px;
     border-radius: 5px;
-    border: 1px solid $node-border;
+    border: 1px solid var(--red-ui-node-border);
     background-position: 5% 50%;
     background-repeat: no-repeat;
     width: 120px;
@@ -141,7 +141,7 @@
 }
 .red-ui-palette-node:hover {
     border-color: transparent;
-    box-shadow: 0 0 0 2px $node-selected-color;
+    box-shadow: 0 0 0 2px var(--red-ui-node-selected-color);
 }
 .red-ui-palette-port {
     position: absolute;
@@ -149,11 +149,11 @@
     left: -5px;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
-    background: $node-port-background;
+    background: var(--red-ui-node-port-background);
     border-radius: 3px;
     width: 10px;
     height: 10px;
-    border: 1px solid $node-border;
+    border: 1px solid var(--red-ui-node-border);
 }
 .red-ui-palette-port-output {
     left:auto;
@@ -161,7 +161,7 @@
 }
 
 .red-ui-palette-node:hover .red-ui-palette-port {
-    background-color: $node-port-background-hover;
+    background-color: var(--red-ui-node-port-background-hover);
 }
 .red-ui-palette-icon-container {
     position: absolute;
@@ -170,14 +170,16 @@
     bottom:0;
     left:0;
     width: 30px;
-    border-right: 1px solid $node-icon-background-color;
-    background-color: $node-icon-background-color;
+    border-right: 1px solid var(--red-ui-node-icon-background-color);
+    border-radius: 4px 0px 0px 4px;
+    background-color: var(--red-ui-node-icon-background-color);
 }
 .red-ui-palette-icon-container-right {
     left: auto;
     right: 0;
     border-right: none;
-    border-left: 1px solid $node-icon-background-color;
+    border-left: 1px solid var(--red-ui-node-icon-background-color);
+    border-radius: 0px 4px 4px 0px;
 }
 .red-ui-palette-icon {
     display: inline-block;
@@ -198,7 +200,7 @@
             background: none;
         }
         .red-ui-palette-icon-fa {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
             font-size: 18px;
         }
     }
@@ -249,12 +251,12 @@
     // width: 30px;
     // height: 25px;
     border-radius: 3px;
-    border: 1px solid $node-border;
+    border: 1px solid var(--red-ui-node-border);
     background-position: 5% 50%;
     background-repeat: no-repeat;
     background-size: contain;
     position: relative;
-    background-color: $node-icon-background-color;
+    background-color: var(--red-ui-node-icon-background-color);
     text-align: center;
 
     .red-ui-palette-icon {
@@ -278,7 +280,7 @@
             background: none;
         }
         .red-ui-palette-icon-fa {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
             font-size: 16px;
         }
     }
@@ -318,5 +320,5 @@
 .red-ui-node-label {
     white-space: nowrap;
     margin-left: 4px;
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
 }

packages/node_modules/@node-red/editor-client/src/sass/panels.scss

@@ -35,12 +35,12 @@
 
 .red-ui-panels-separator {
     flex: 0 0 auto;
-    border-top: 1px solid $secondary-border-color;
-    border-bottom: 1px solid $secondary-border-color;
+    border-top: 1px solid var(--red-ui-secondary-border-color);
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     height: 7px;
     box-sizing: border-box;
     cursor: ns-resize;
-    background-color: $primary-background;
+    background-color: var(--red-ui-primary-background);
 
     &:before {
         content: '';
@@ -55,7 +55,7 @@
         mask-position: center;
         -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
-        background-color: $grip-color;
+        background-color: var(--red-ui-grip-color);
     }
 }
 
@@ -80,14 +80,14 @@
         vertical-align: top;
         border-top: none;
         border-bottom: none;
-        border-left: 1px solid $secondary-border-color;
-        border-right: 1px solid $secondary-border-color;
+        border-left: 1px solid var(--red-ui-secondary-border-color);
+        border-right: 1px solid var(--red-ui-secondary-border-color);
         height: 100%;
         width: 7px;
         display: inline-block;
         cursor: ew-resize;
-        background-color: $primary-background;
-        
+        background-color: var(--red-ui-primary-background);
+
         &:before {
             content: '';
             display: block;
@@ -101,7 +101,7 @@
             mask-position: 50% 50%;
             -webkit-mask-repeat: no-repeat;
             mask-repeat: no-repeat;
-            background-color: $grip-color;
+            background-color: var(--red-ui-grip-color);
         }
     }
 }

packages/node_modules/@node-red/editor-client/src/sass/popover.scss

@@ -25,7 +25,7 @@
     color: var(--red-ui-popover-color);
     border-radius: 4px;
     z-index: 1000;
-    font-family: $primary-font;
+    font-family: var(--red-ui-primary-font);
     font-size: 14px;
     line-height: 1.4em;
     @include component-shadow;
@@ -146,7 +146,7 @@
 
 .red-ui-popover-key {
     font-size: 11px;
-    font-family: $monospace-font;
+    font-family: var(--red-ui-monospace-font);
     margin-left: 3px;
     border: 1px solid var(--red-ui-popover-color);
     border-radius:3px;
@@ -163,42 +163,42 @@
         color: var(--red-ui-popover-color) !important;
     }
     a:focus {
-        outline: 1px solid $form-input-focus-color;
+        outline: 1px solid var(--red-ui-form-input-focus-color);
     }
 }
 .red-ui-popover a.red-ui-button,
 .red-ui-popover button.red-ui-button {
     &:not(.primary) {
-        border-color: $popover-button-border-color;
+        border-color: var(--red-ui-popover-button-border-color);
         background: var(--red-ui-popover-background);
         color: var(--red-ui-popover-color) !important;
     }
     &:not(.primary):not(.disabled):not(.ui-button-disabled):hover {
-        border-color: $popover-button-border-color-hover;
+        border-color: var(--red-ui-popover-button-border-color-hover);
     }
 
 
     &.primary {
-        border-color: $popover-button-border-color;
+        border-color: var(--red-ui-popover-button-border-color);
     }
     &.primary:not(.disabled):not(.ui-button-disabled):hover {
-        border-color: $popover-button-border-color-hover;
+        border-color: var(--red-ui-popover-button-border-color-hover);
     }
 }
 .red-ui-popover code {
     border: none;
     background: none;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
 }
 
 
 .red-ui-popover-panel {
     @include component-shadow;
-    font-family: $primary-font;
-    font-size: $primary-font-size;
+    font-family: var(--red-ui-primary-font);
+    font-size: var(--red-ui-primary-font-size);
     position: absolute;
     box-sizing: border-box;
-    border: 1px solid $primary-border-color;
-    background: $secondary-background;
+    border: 1px solid var(--red-ui-primary-border-color);
+    background: var(--red-ui-secondary-background);
     z-index: 2000;
 }

packages/node_modules/@node-red/editor-client/src/sass/projects.scss

@@ -26,10 +26,10 @@
     }
 }
 #red-ui-project-settings-tab-settings {
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 .red-ui-sidebar-vc-shade {
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
 }
 
 .red-ui-projects-edit-form form {
@@ -37,7 +37,7 @@
     .form-row {
         margin-bottom: 15px;
         label {
-            color: $primary-text-color;
+            color: var(--red-ui-primary-text-color);
             width: 100%;
             display: block;
             &.red-ui-projects-edit-form-inline-label {
@@ -57,7 +57,7 @@
 
 }
 .red-ui-projects-edit-form-sublabel {
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
     text-align: right;
     margin-bottom: -15px;
     font-weight: normal;
@@ -76,7 +76,7 @@
         font-size: 1.4em;
         padding: 10px;
         min-height: 40px;
-        color: $primary-text-color;
+        color: var(--red-ui-primary-text-color);
     }
     .red-ui-projects-dialog-screen-start-body {
         min-height: 300px;
@@ -132,21 +132,21 @@
     margin-left: -1px;
     padding: 15px;
     margin-top: -15px;
-    border: 1px solid $secondary-border-color;
+    border: 1px solid var(--red-ui-secondary-border-color);
     border-radius: 3px;
 }
 .red-ui-projects-dialog-credentials-box-left {
     width: 220px;
     > div {
         padding:  7px 8px 3px 8px;
-        border: 1px solid $secondary-border-color;
+        border: 1px solid var(--red-ui-secondary-border-color);
         border-radius: 4px;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
-        border-right-color: $form-background;
+        border-right-color: var(--red-ui-form-background);
         &.disabled {
-            border-color: $form-background;
-            border-right-color:$secondary-border-color;
+            border-color: var(--red-ui-form-background);
+            border-right-color:var(--red-ui-secondary-border-color);
         }
         i {
             font-size: 1.4em;
@@ -173,7 +173,7 @@
 }
 
 .red-ui-projects-dialog-project-list-container {
-    border: 1px solid $secondary-border-color;
+    border: 1px solid var(--red-ui-secondary-border-color);
     border-radius: 2px;
     display: flex;
     flex-direction: column;
@@ -183,7 +183,7 @@
 }
 .red-ui-projects-dialog-project-list-inner-container {
     flex-grow: 1 ;
-    overflow-y: scroll;
+    overflow-y: auto;
     position:relative;
     .red-ui-editableList-border {
         border: none;
@@ -197,43 +197,43 @@
 .red-ui-projects-dialog-project-list-entry {
     padding: 12px 0;
 
-    color: $list-item-color;
-    background: $list-item-background;
-    border-left: 3px solid $list-item-background;
-    border-right: 3px solid $list-item-background;
+    color: var(--red-ui-list-item-color);
+    background: var(--red-ui-list-item-background);
+    border-left: 3px solid var(--red-ui-list-item-background);
+    border-right: 3px solid var(--red-ui-list-item-background);
 
     &.projects-list-entry-current {
         &:not(.selectable) {
-            color: $form-text-color;
-            background: $list-item-background-selected;
-            border-left-color:$list-item-border-selected;
-            border-right-color:$list-item-border-selected;
+            color: var(--red-ui-form-text-color);
+            background: var(--red-ui-list-item-background-selected);
+            border-left-color:var(--red-ui-list-item-border-selected);
+            border-right-color:var(--red-ui-list-item-border-selected);
         }
         i {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
         }
     }
     &.selectable {
         cursor: pointer;
         &:hover:not(.selected) {
-            color: $form-text-color;
-            background: $list-item-background-hover;
-            border-left-color:$list-item-background-hover;
-            border-right-color:$list-item-background-hover;
+            color: var(--red-ui-form-text-color);
+            background: var(--red-ui-list-item-background-hover);
+            border-left-color:var(--red-ui-list-item-background-hover);
+            border-right-color:var(--red-ui-list-item-background-hover);
         }
     }
     .red-ui-projects-dialog-project-list-entry-icon {
         i {
-            color: $tertiary-text-color;
+            color: var(--red-ui-tertiary-text-color);
             font-size: 2em;
 
         }
     }
     &.selected {
-        color: $form-text-color;
-        background: $list-item-background-selected;
-        border-left-color:$list-item-border-selected;
-        border-right-color:$list-item-border-selected;
+        color: var(--red-ui-form-text-color);
+        background: var(--red-ui-list-item-background-selected);
+        border-left-color:var(--red-ui-list-item-border-selected);
+        border-right-color:var(--red-ui-list-item-border-selected);
     }
     span {
         display: inline-block;
@@ -249,7 +249,7 @@
         float: right;
         margin-right: 20px;
         font-size: 0.9em;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         padding-top: 4px;
     }
     .red-ui-projects-dialog-project-list-entry-tools {
@@ -257,7 +257,7 @@
         top: 16px;
         right: 30px;
         display: none;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
     &:hover {
         .red-ui-projects-dialog-project-list-entry-tools {
@@ -274,7 +274,7 @@
     width: 1000px;
     overflow: hidden;
     padding: 5px 20px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     transition: left 0.4s;
     white-space: nowrap;
     > span {
@@ -289,7 +289,7 @@
     position: relative;
 }
 .red-ui-projects-dialog-screen-create-type.red-ui-button.toggle.selected:not(.disabled):not(:disabled) {
-    color: $secondary-text-color-active !important;
+    color: var(--red-ui-secondary-text-color-active) !important;
 }
 .red-ui-projects-dialog-screen-input-status {
     text-align: right;
@@ -298,7 +298,7 @@
     right: 8px;
     width: 70px;
     height: 30px;
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
 }
 
 .red-ui-sidebar-vc {
@@ -338,17 +338,17 @@
     }
     .red-ui-palette-module-unused {
         & > * {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
         }
     }
     .red-ui-palette-module-unknown {
-        border: 1px dashed $secondary-border-color;
-        background: $secondary-background-inactive;
+        border: 1px dashed var(--red-ui-secondary-border-color);
+        background: var(--red-ui-secondary-background-inactive);
     }
     .red-ui-palette-module-not-installed {
-        border: 1px dashed $text-color-warning;
+        border: 1px dashed var(--red-ui-text-color-warning);
         i.fa-warning {
-            color: $text-color-warning;
+            color: var(--red-ui-text-color-warning);
         }
     }
 }
@@ -365,11 +365,11 @@
 }
 .red-ui-sidebar-vc {
     .red-ui-editableList-container {
-        background: $tertiary-background;
+        background: var(--red-ui-tertiary-background);
         padding: 0;
         li {
             padding:0;
-            background: $secondary-background;
+            background: var(--red-ui-secondary-background);
         }
     }
     .red-ui-editableList-border {
@@ -384,7 +384,7 @@
     box-sizing: border-box;
     transition: height 0.2s ease-in-out;
     &:first-child {
-        // border-bottom: 1px solid $primary-border-color;
+        // border-bottom: 1px solid var(--red-ui-primary-border-color);
     }
 }
 .red-ui-sidebar-vc-merging {
@@ -399,7 +399,7 @@
     right:0;
     height:0;
     transition: height 0.2s ease-in-out;
-    background: $tertiary-background;
+    background: var(--red-ui-tertiary-background);
     box-sizing: border-box;
     overflow: hidden;
     &.red-ui-sidebar-vc-slide-box-top {
@@ -408,20 +408,20 @@
         left: auto;
         width: 100%;
         max-width: 280px;
-        border-left: 1px solid $primary-border-color;
-        border-right: 1px solid $primary-border-color;
-        border-bottom: 1px solid $primary-border-color;
-        box-shadow: 1px 1px 4px $shadow;
+        border-left: 1px solid var(--red-ui-primary-border-color);
+        border-right: 1px solid var(--red-ui-primary-border-color);
+        border-bottom: 1px solid var(--red-ui-primary-border-color);
+        box-shadow: 1px 1px 4px var(--red-ui-shadow);
 
-        color: $primary-text-color;
-        background: $tertiary-background;
+        color: var(--red-ui-primary-text-color);
+        background: var(--red-ui-tertiary-background);
         padding: 10px;
         box-sizing: border-box;
 
     }
     &.red-ui-sidebar-vc-slide-box-bottom {
         bottom: 0px;
-        border-top: 1px solid $secondary-border-color;
+        border-top: 1px solid var(--red-ui-secondary-border-color);
     }
 
     textarea {
@@ -437,15 +437,15 @@
 .red-ui-projects-branch-list {
     position: relative;
     .red-ui-searchBox-container {
-        border-top: 1px solid $secondary-border-color;
-        border-left: 1px solid $secondary-border-color;
-        border-right: 1px solid $secondary-border-color;
+        border-top: 1px solid var(--red-ui-secondary-border-color);
+        border-left: 1px solid var(--red-ui-secondary-border-color);
+        border-right: 1px solid var(--red-ui-secondary-border-color);
         border-top-left-radius: 2px;
         border-top-right-radius: 2px;
         overflow: hidden;
     }
     .red-ui-editableList {
-        border: 1px solid $secondary-border-color;
+        border: 1px solid var(--red-ui-secondary-border-color);
         border-bottom-left-radius: 2px;
         border-bottom-right-radius: 2px;
         & > .red-ui-editableList-border {
@@ -456,7 +456,7 @@
             padding: 0;
             li {
                 padding: 0;
-                background: $secondary-background;
+                background: var(--red-ui-secondary-background);
             }
         }
     }
@@ -483,23 +483,23 @@
 .red-ui-sidebar-vc-branch-list-entry {
     padding: 5px 8px;
     margin: 0 1px;
-    color: $list-item-color;
-    background: $list-item-background;
-    border-left: 2px solid $list-item-background;
-    border-right: 2px solid $list-item-background;
+    color: var(--red-ui-list-item-color);
+    background: var(--red-ui-list-item-background);
+    border-left: 2px solid var(--red-ui-list-item-background);
+    border-right: 2px solid var(--red-ui-list-item-background);
     cursor: pointer;
     &.selected {
-        border-left-color:$list-item-border-selected;
-        border-right-color:$list-item-border-selected;
+        border-left-color:var(--red-ui-list-item-border-selected);
+        border-right-color:var(--red-ui-list-item-border-selected);
     }
     i { width: 16px; text-align: center}
     &.input-error {
         cursor: default;
     }
     &:not(.input-error):hover {
-        background: $list-item-background-hover;
-        border-left-color:$list-item-border-selected;
-        border-right-color:$list-item-border-selected;
+        background: var(--red-ui-list-item-background-hover);
+        border-left-color:var(--red-ui-list-item-border-selected);
+        border-right-color:var(--red-ui-list-item-border-selected);
     }
     span {
         margin-left: 5px;
@@ -507,7 +507,7 @@
     span.current {
         float: right;
         font-size: 0.8em;
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
     }
 }
 
@@ -542,7 +542,7 @@
     }
     &.red-ui-help-info-node {
         text-align: center;
-        background: $list-item-background;
+        background: var(--red-ui-list-item-background);
         white-space: normal;
         height: auto;
     }
@@ -556,63 +556,63 @@
     overflow: hidden;
     cursor: pointer;
     &:hover {
-        background: $secondary-background-hover;
+        background: var(--red-ui-secondary-background-hover);
     }
 }
 .red-ui-sidebar-vc-commit-more {
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     text-align: center;
     padding: 10px;
     font-style: italic;
 }
 .red-ui-sidebar-vc-commit-sha {
     float: right;
-    font-family: $monospace-font;
-    color: $vcCommitShaColor;
+    font-family: var(--red-ui-monospace-font);
+    color: var(--red-ui-vcCommitShaColor);
     display: inline-block;
     font-size: 0.85em;
     margin-left: 5px;
 }
 .red-ui-sidebar-vc-commit-subject {
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
 }
 .red-ui-sidebar-vc-commit-refs {
     min-height: 22px;
 }
 .red-ui-sidebar-vc-commit-ref {
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
     font-size: 0.7em;
-    border: 1px solid $tertiary-border-color;
+    border: 1px solid var(--red-ui-tertiary-border-color);
     border-radius: 10px;
     padding: 2px 5px;
     margin-right: 5px;
 }
 .red-ui-sidebar-vc-commit-date {
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     font-size: 0.85em;
 }
 .red-ui-sidebar-vc-commit-user {
     float: right;
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     font-size: 0.85em;
 }
 .red-ui-sidebar-vc-commit-head {
 }
 .red-ui-sidebar-vc-change-header {
-    color: $primary-text-color;
-    background: $tertiary-background;
+    color: var(--red-ui-primary-text-color);
+    background: var(--red-ui-tertiary-background);
     padding: 4px 10px;
     height: 30px;
     box-sizing: border-box;
-    border-top: 1px solid $secondary-border-color;
-    border-bottom: 1px solid $secondary-border-color;
+    border-top: 1px solid var(--red-ui-secondary-border-color);
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     i {
         transition: all 0.2s ease-in-out;
     }
 }
 .red-ui-sidebar-vc-repo-toolbar {
-    color: $primary-text-color;
-    background: $tertiary-background;
+    color: var(--red-ui-primary-text-color);
+    background: var(--red-ui-tertiary-background);
     padding: 10px;
     box-sizing: border-box;
 }
@@ -637,7 +637,7 @@
 .red-ui-projects-file-listing-container > .red-ui-editableList > .red-ui-editableList-border {
     border-radius: 0;
     border: none;
-    border-top: 1px solid $secondary-border-color;
+    border-top: 1px solid var(--red-ui-secondary-border-color);
 
 }
 .red-ui-editableList-container .red-ui-projects-dialog-file-list {
@@ -654,39 +654,39 @@
 }
 .red-ui-projects-dialog-file-list-entry {
     padding: 3px 0;
-    border-left: 2px solid $list-item-background;
-    border-right: 2px solid $list-item-background;
-    background: $list-item-background;
+    border-left: 2px solid var(--red-ui-list-item-background);
+    border-right: 2px solid var(--red-ui-list-item-background);
+    background: var(--red-ui-list-item-background);
 
     &.projects-list-entry-current {
         &:not(.selectable) {
-            background: $list-item-background-selected;
+            background: var(--red-ui-list-item-background-selected);
         }
         i {
-            color: $secondary-text-color-selected;
+            color: var(--red-ui-secondary-text-color-selected);
         }
     }
     &.selectable {
         cursor: pointer;
         &:hover {
-            background: $list-item-background-hover;
-            border-left-color:$list-item-border-selected;
-            border-right-color:$list-item-border-selected;
+            background: var(--red-ui-list-item-background-hover);
+            border-left-color:var(--red-ui-list-item-border-selected);
+            border-right-color:var(--red-ui-list-item-border-selected);
         }
     }
     &.unselectable {
-        color: $secondary-text-color-disabled;
+        color: var(--red-ui-secondary-text-color-disabled);
     }
 
     i {
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         width: 16px;
         text-align: center;
     }
     &.selected {
-        background: $list-item-background-selected;
-        border-left-color:$list-item-border-selected;
-        border-right-color:$list-item-border-selected;
+        background: var(--red-ui-list-item-background-selected);
+        border-left-color:var(--red-ui-list-item-border-selected);
+        border-right-color:var(--red-ui-list-item-border-selected);
     }
     span {
         display: inline-block;
@@ -696,7 +696,7 @@
          margin: 0 10px 0 0px;
 
          .fa-angle-right {
-             color: $primary-text-color;
+             color: var(--red-ui-primary-text-color);
              transition: all 0.2s ease-in-out;
 
          }
@@ -711,7 +711,9 @@
         transform: rotate(90deg);
     }
 }
-.red-ui-projects-dialog-file-list-entry-file-type-git { color: $tertiary-text-color }
+.red-ui-projects-dialog-file-list-entry-file-type-git {
+    color: var(--red-ui-tertiary-text-color);
+}
 
 .red-ui-projects-dialog-remote-list {
     .red-ui-editableList-container {
@@ -747,7 +749,7 @@ div.red-ui-projects-dialog-ssh-public-key {
         padding: 10px 5px;
         cursor: pointer;
         &:hover {
-            background: $list-item-background-hover;
+            background: var(--red-ui-list-item-background-hover);
         }
     }
 }
@@ -756,7 +758,7 @@ div.red-ui-projects-dialog-ssh-public-key {
     position: relative;
     .red-ui-editableList-container {
         padding: 1px;
-        background: $tertiary-background;
+        background: var(--red-ui-tertiary-background);
         li:last-child {
             border-bottom: none;
         }
@@ -775,7 +777,7 @@ div.red-ui-projects-dialog-ssh-public-key {
         text-align: center;
         min-width: 30px;
         vertical-align: top;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
     .entry-name {
         min-width: 250px;
@@ -784,7 +786,7 @@ div.red-ui-projects-dialog-ssh-public-key {
         font-weight: bold;
     }
     .entry-detail {
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
         font-size: 0.9em;
     }
 
@@ -802,9 +804,9 @@ div.red-ui-projects-dialog-ssh-public-key {
     position: relative;
     margin-top: 10px;
     margin-bottom: 20px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     border-radius: 4px;
-    border: 1px solid $secondary-border-color;
+    border: 1px solid var(--red-ui-secondary-border-color);
     .red-ui-projects-edit-form-sublabel {
         margin-top: -8px !important;
         margin-right: 50px;
@@ -819,7 +821,7 @@ div.red-ui-projects-dialog-ssh-public-key {
 
     .red-ui-projects-dialog-list-dialog-header {
         font-weight: bold;
-        background: $primary-background;
+        background: var(--red-ui-primary-background);
         margin-top: 0 !important;
         padding: 5px 10px;
         margin-bottom: 10px;
@@ -830,5 +832,5 @@ div.red-ui-projects-dialog-ssh-public-key {
     padding: 8px 20px 20px;
 }
 .red-ui-settings-section-description {
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
 }

packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss

@@ -15,8 +15,8 @@
 **/
 
 .red-ui-editor-radial-menu {
-    font-size: $primary-font-size;
-    font-family: $primary-font;
+    font-size: var(--red-ui-primary-font-size);
+    font-family: var(--red-ui-primary-font);
     position: absolute;
     top: 0;
     left:0;
@@ -29,8 +29,8 @@
         border-radius: 80px;
         width: 160px;
         height: 160px;
-        background: $shadow;
-        border: 1px solid $primary-border-color;
+        background: var(--red-ui-shadow);
+        border: 1px solid var(--red-ui-primary-border-color);
     }
 }
 
@@ -39,20 +39,21 @@
     border-radius: 20px;
     width: 50px;
     height: 50px;
-    background: $secondary-background;
-    border: 2px solid $primary-border-color;
+    background: var(--red-ui-secondary-background);
+    border: 2px solid var(--red-ui-primary-border-color);
+    color: var(--red-ui-primary-text-color);
     text-align: center;
     line-height:50px;
 
     &.selected {
-        background: $workspace-button-background-hover;
+        background: var(--red-ui-workspace-button-background-hover);
     }
 }
 
 .red-ui-editor-radial-menu-opt-disabled {
-    border-color: $tertiary-border-color;
-    color: $tertiary-border-color;
+    border-color: var(--red-ui-tertiary-border-color);
+    color: var(--red-ui-secondary-text-color-disabled);
 }
 .red-ui-editor-radial-menu-opt-active {
-    background: $secondary-background-hover;
+    background: var(--red-ui-secondary-background-hover);
 }

packages/node_modules/@node-red/editor-client/src/sass/search.scss

@@ -22,9 +22,9 @@
     left: 50%;
     margin-left: -250px;
     top: 0px;
-    border: 1px solid $primary-border-color;
-    box-shadow: 0 0 10px $shadow;
-    background: $secondary-background;
+    border: 1px solid var(--red-ui-primary-border-color);
+    box-shadow: 0 0 10px var(--red-ui-shadow);
+    background: var(--red-ui-secondary-background);
 
     .red-ui-searchBox-container {
         display: inline-block;
@@ -47,17 +47,17 @@
     .red-ui-search-container {
         border-top-left-radius: 5px;
         border-top-right-radius: 5px;
-        border: 1px dashed $primary-border-color;
+        border: 1px dashed var(--red-ui-primary-border-color);
         border-bottom: none;
         padding: 0;
         width: 100%;
     }
     .red-ui-search-results-container {
         display: none;
-        height: 150px;
+        height: 195px;
         .red-ui-editableList-container {
-            border: 1px dashed $primary-border-color;
-            border-top: 1px solid $secondary-border-color;
+            border: 1px dashed var(--red-ui-primary-border-color);
+            border-top: 1px solid var(--red-ui-secondary-border-color);
         }
     }
     .red-ui-search-result {
@@ -73,7 +73,7 @@
         }
     }
     .red-ui-search-result-separator {
-        border-bottom: 3px solid $secondary-border-color;
+        border-bottom: 3px solid var(--red-ui-secondary-border-color);
     }
     .red-ui-search-result-node {
         position: relative;
@@ -84,12 +84,12 @@
     .red-ui-search-result-node-port {
         position: absolute;
         border-radius: 2px;
-        border: 1px solid $node-border;
+        border: 1px solid var(--red-ui-node-border);
         width: 6px;
         height: 7px;
         top:4px;
         left:-4px;
-        background: $node-port-background;
+        background: var(--red-ui-node-port-background);
         box-sizing: border-box;
     }
     .red-ui-search-result-node-output{
@@ -107,26 +107,26 @@
         margin-left:8px;
     }
     .red-ui-search-result-node-label {
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
 }
 
 .red-ui-search-container {
     padding: 3px;
-    background: $form-input-background;
-    border-bottom: 1px solid $secondary-border-color;
+    background: var(--red-ui-form-input-background);
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
 }
 .red-ui-search-results-container {
     position:relative;
     height: 300px;
     padding: 5px;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
     .red-ui-search-results-list {
 
     }
     .red-ui-editableList-container {
         padding: 0;
-        background: $primary-background;
+        background: var(--red-ui-primary-background);
         li {
             padding: 0;
         }
@@ -137,21 +137,21 @@
     display: flex;
     align-items: start;
     cursor: pointer;
-    color: $list-item-color;
-    background: $list-item-background;
-    border-left: 3px solid $list-item-background;
-    border-right: 3px solid $list-item-background;
+    color: var(--red-ui-list-item-color);
+    background: var(--red-ui-list-item-background);
+    border-left: 3px solid var(--red-ui-list-item-background);
+    border-right: 3px solid var(--red-ui-list-item-background);
     li.selected & {
-        background: $list-item-background-selected;
-        border-left-color: $list-item-border-selected;
-        border-right-color: $list-item-border-selected;
+        background: var(--red-ui-list-item-background-selected);
+        border-left-color: var(--red-ui-list-item-border-selected);
+        border-right-color: var(--red-ui-list-item-border-selected);
     }
     &:hover {
         text-decoration: none;
-        color: $form-text-color;
-        background: $list-item-background-hover;
-        border-left-color:$list-item-background-hover;
-        border-right-color:$list-item-background-hover;
+        color: var(--red-ui-form-text-color);
+        background: var(--red-ui-list-item-background-hover);
+        border-left-color:var(--red-ui-list-item-background-hover);
+        border-right-color:var(--red-ui-list-item-background-hover);
     }
     &:after {
         content: "";
@@ -165,7 +165,7 @@
     float:left;
     height: 25px;
     border-radius: 3px;
-    border: 1px solid $node-border;
+    border: 1px solid var(--red-ui-node-border);
     background-position: 5% 50%;
     background-repeat: no-repeat;
     background-size: contain;
@@ -182,28 +182,28 @@
     flex-grow: 1;
 }
 .red-ui-search-result-node-label {
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
 }
 .red-ui-search-result-node-type {
     font-style: italic;
     font-size: 0.9em;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
 }
 .red-ui-search-result-node-flow {
     float:right;
     font-size: 0.8em;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
 }
 .red-ui-search-result-node-id {
     display:none;
     font-size: 0.8em;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
 }
 .red-ui-search-empty {
     padding: 10px;
     text-align: center;
     font-style: italic;
-    color: $form-placeholder-color;
+    color: var(--red-ui-form-placeholder-color);
 }
 .red-ui-search-history {
     button {
@@ -229,12 +229,12 @@
 }
 
 .red-ui-search-result-action {
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
 }
 .red-ui-search-result-action-key {
     position: absolute;
     top: 9px;
     right: 0;
     margin-right: 10px;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
 }

packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss

@@ -20,7 +20,7 @@
     right: 0px;
     bottom: 0px;
     width: 315px;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
     box-sizing: border-box;
     z-index: 10;
     @include component-border;
@@ -32,7 +32,7 @@
 
 #red-ui-sidebar-content {
     position: absolute;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     top: 35px;
     right: 0;
     bottom: 25px;
@@ -47,7 +47,7 @@
     bottom:10px;
     width: 7px;
     // z-index: 11;
-    background-color: $primary-background;
+    background-color: var(--red-ui-primary-background);
     cursor: col-resize;
 
     &:before {
@@ -63,7 +63,7 @@
         mask-position: 50% 50%;
         -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
-        background-color: $grip-color;
+        background-color: var(--red-ui-grip-color);
     }
 }
 
@@ -82,11 +82,11 @@
 
 .sidebar-header, /* Deprecated -> red-ui-sidebar-header */
 .red-ui-sidebar-header {
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
     text-align: right;
     padding: 8px 10px;
-    background: $primary-background;
-    border-bottom: 1px solid $secondary-border-color;
+    background: var(--red-ui-primary-background);
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     white-space: nowrap;
 }
 
@@ -138,9 +138,9 @@ button.red-ui-sidebar-header-button-toggle {
     top: calc(50% - 26px);
 
     padding:15px 8px;
-    border:1px solid $primary-border-color;
-    background:$primary-background;
-    color: $secondary-text-color;
+    border:1px solid var(--red-ui-primary-border-color);
+    background:var(--red-ui-primary-background);
+    color: var(--red-ui-secondary-text-color);
     text-align: center;
     cursor: pointer;
 }