@bitpoolos/edge-theme 1.0.0

package/LICENSE.txt

@@ -0,0 +1,7 @@
+Copyright 2022, Bitpool
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+<h3>BITPOOL EDGE THEME (Node-RED 5)</h3>
+
+---
+
+## About
+
+A Node-RED **5** theme plugin that layers the Bitpool look on top of Node-RED's
+own light and dark themes — **purely additive**, so NR's palettes stay intact
+and the Appearance (Light/Dark) toggle keeps working. It adds:
+
+- Bitpool **cyan** accents (deploy button, links, selection, form controls)
+- Soft **cyan glows** on node hover, palette hover and focus
+- A gentle **glowing cyan line** along the header
+- An **animated connection highlight**: select a node and its full logic path
+  (upstream + downstream) lights up with flowing cyan "data pips" and glowing nodes
+
+Requires Node-RED **5.0+** on Node.js **22.9+** (that's where the built-in
+light/dark themes and the Appearance toggle live).
+
+## Installation
+
+Install into your Node-RED user directory (the folder holding `settings.js`):
+
+```bash
+$ cd ~/.node-red
+$ npm install @bitpoolos/edge-theme
+```
+
+Then set the `editorTheme` block in `settings.js`. Only the theme name is
+required; the `page`/`header` entries add the Bitpool branding (Node-RED only
+allows these in `settings.js`). Replace `<userDir>` with your Node-RED user
+directory (e.g. `/home/bitpool/.node-red`).
+
+```js
+editorTheme: {
+    theme: "bitpool-theme",
+
+    page: {
+        title: "Bitpool Edge",
+        favicon: "<userDir>/node_modules/@bitpoolos/edge-theme/resources/favicon.ico",
+    },
+
+    header: {
+        // "Bitpool" is real title text (not baked into the SVG) so it takes the
+        // editor's header text colour and stays readable in light AND dark.
+        title: "Bitpool Edge",
+        image: "<userDir>/node_modules/@bitpoolos/edge-theme/resources/bitpool-icon.svg",
+    },
+}
+```
+
+Restart Node-RED. The CSS, animation and glow all ship inside the package —
+only the lines above go in `settings.js`.
+
+Switch Light/Dark from the editor: menu → Settings → Appearance → Theme.
+
+## Resources
+- [bitpool.com](https://www.bitpool.com/)
+- [app.bitpool.com](https://app.bitpool.com/)
+- [wiki.bitpool.com](https://wiki.bitpool.com/)
+
+## License
+
+MIT — see the LICENSE file.

package/bitpool-theme.css

@@ -0,0 +1,131 @@
+/*
+  Bitpool Edge — animated connection highlight.
+  The ONLY addition to the original theme: selecting a node traces its
+  connected wires with flowing cyan "data pips". Class `bp-link-live` is
+  toggled by bitpool.js. Everything else is the untouched original theme.
+*/
+
+:root {
+  --bp-accent: #00ADEF;
+}
+
+:root { --bp-glow: rgba(0, 173, 239, 0.35); }
+
+/* ============================================================
+   Accent recolour — swap Node-RED's red accent for Bitpool cyan.
+   Only ACCENT variables are touched (not backgrounds/text), so both
+   the light and dark palettes stay intact — just cyan instead of red.
+   ============================================================ */
+:root {
+  --red-ui-text-color-link:                           #00ADEF;
+  --red-ui-deploy-button-background:                  #00ADEF;
+  --red-ui-deploy-button-background-hover:            #0095cf;
+  --red-ui-deploy-button-background-active:           #007db0;
+  --red-ui-workspace-button-background-primary:       #00ADEF;
+  --red-ui-workspace-button-background-primary-hover: #0095cf;
+  /* selection → cyan, to match the animated wires */
+  --red-ui-node-selected-color:                       #00ADEF;
+  --red-ui-port-selected-color:                       #00ADEF;
+  --red-ui-view-lasso-stroke:                         #00ADEF;
+  /* native form controls (checkboxes/radios) */
+  accent-color: #00ADEF;
+}
+/* NR5 dark sets accent-color:#e84a4a on the root — override for dark too */
+html.nr-theme-dark { accent-color: #00ADEF; }
+
+@keyframes bp-wire-flow { to { stroke-dashoffset: -56; } }
+
+g.red-ui-flow-link-selected .red-ui-flow-link-line,
+g.red-ui-flow-link.bp-link-live .red-ui-flow-link-line {
+  stroke: var(--bp-accent) !important;
+  stroke-width: 2px !important;
+  stroke-dasharray: 2 12 !important;
+  stroke-linecap: round !important;
+  animation: bp-wire-flow 1.3s linear infinite;
+  filter: drop-shadow(0 0 3px var(--bp-accent));
+}
+
+/* ============================================================
+   Cyan glow layer — purely ADDITIVE (glows / accents only).
+   No --red-ui palette overrides, so NR's light & dark themes
+   stay 100% intact underneath. Looks best in dark; harmless in light.
+   ============================================================ */
+
+/* Nodes: soft rounding + cyan lift-glow on hover */
+.red-ui-flow-node { rx: 5px; ry: 5px; }
+g.red-ui-flow-node-group { transition: filter .18s ease; }
+g.red-ui-flow-node-group:hover {
+  filter: drop-shadow(0 3px 11px var(--bp-glow));
+}
+
+/* Selected node — cyan halo */
+g.red-ui-flow-node-selected .red-ui-flow-node {
+  stroke: var(--bp-accent) !important;
+  filter: drop-shadow(0 0 6px var(--bp-glow));
+}
+
+/* Nodes along the selected node's highlighted path — cyan glow (class from bitpool.js) */
+g.red-ui-flow-node-group.bp-node-live .red-ui-flow-node {
+  stroke: var(--bp-accent) !important;
+  filter: drop-shadow(0 0 6px var(--bp-glow));
+}
+
+/* Deploy button — Bitpool cyan with a breathing glow */
+#red-ui-header-button-deploy:not(.disabled) {
+  background: var(--bp-accent) !important;
+  border-color: transparent !important;
+  animation: bp-deploy-breathe 3.2s ease-in-out infinite;
+}
+#red-ui-header-button-deploy:not(.disabled):hover {
+  background: #0095cf !important;
+  box-shadow: 0 0 16px var(--bp-glow) !important;
+  animation: none;
+}
+@keyframes bp-deploy-breathe {
+  0%, 100% { box-shadow: 0 0 3px rgba(0,173,239,0.25); }
+  50%      { box-shadow: 0 0 13px var(--bp-glow); }
+}
+
+/* Header — size the logo (no top-bar colour override) + glowing cyan underline */
+#red-ui-header { position: relative; }
+#red-ui-header > span > img {
+  height: 32px !important;
+  width: auto !important;
+  vertical-align: middle;
+}
+/* "Bitpool" as bold brand text before the "Edge" title. Set header.title="Edge".
+   Uses the editor's own text colour, so it's readable in light and dark. */
+#red-ui-header > span > span::before,
+#red-ui-header > span > a > span::before {
+  content: "Bitpool\00A0";
+  font-weight: 700;
+  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
+}
+#red-ui-header::after {
+  content: "";
+  position: absolute;
+  left: 0; right: 0; bottom: 0;
+  height: 2px;
+  background: linear-gradient(90deg,
+    transparent, var(--bp-accent) 35%, #5cd0ff 50%, var(--bp-accent) 65%, transparent);
+  background-size: 200% 100%;
+  box-shadow: 0 0 8px var(--bp-glow);
+  animation: bp-sheen 9s linear infinite;
+  pointer-events: none;
+}
+@keyframes bp-sheen { to { background-position: -200% 0; } }
+
+/* Palette node hover — cyan glow lift */
+.red-ui-palette-node { transition: box-shadow .18s ease, transform .18s ease; }
+.red-ui-palette-node:hover {
+  box-shadow: 0 0 0 2px #5cd0ff, 0 4px 10px var(--bp-glow) !important;
+  transform: translateY(-1px);
+}
+
+/* Form inputs — cyan focus ring */
+.red-ui-editor input[type="text"]:focus,
+.red-ui-editor textarea:focus,
+.red-ui-typedInput-container.red-ui-typedInput-focus {
+  border-color: var(--bp-accent) !important;
+  box-shadow: 0 0 0 3px var(--bp-glow) !important;
+}

package/bitpool.js

@@ -0,0 +1,97 @@
+/*
+  Bitpool Edge — connection highlight.
+  Additive, defensive editor JS loaded via the theme plugin's `scripts`.
+  Selecting a node highlights its full lineage (upstream ancestors +
+  downstream descendants) so the logic path is easy to follow. Wrapped so a
+  failure here can never break the editor.
+*/
+(function () {
+  "use strict";
+
+  function ready(fn) {
+    if (typeof RED === "undefined" || !RED.events) {
+      var tries = 0;
+      var t = setInterval(function () {
+        if (typeof RED !== "undefined" && RED.events) {
+          clearInterval(t);
+          try { fn(); } catch (e) {}
+        } else if (++tries > 100) {
+          clearInterval(t);
+        }
+      }, 100);
+      return;
+    }
+    try { fn(); } catch (e) {}
+  }
+
+  ready(function () {
+    try {
+      var highlightConnected = function () {
+        try {
+          var selectedIds = {};
+          var sel = (RED.view && RED.view.selection) ? RED.view.selection() : null;
+          var nodes = (sel && sel.nodes) || [];
+          nodes.forEach(function (n) { if (n && n.id) selectedIds[n.id] = true; });
+
+          // Gather every link with its SVG group and source/target node ids.
+          var links = [];
+          var groups = document.querySelectorAll("g.red-ui-flow-link");
+          groups.forEach(function (g) {
+            var d = g.__data__;
+            if (!d || !d.source || !d.target) { if (g.classList) g.classList.remove("bp-link-live"); return; }
+            links.push({ g: g, s: d.source.id, t: d.target.id });
+          });
+
+          var allNodeGroups = document.querySelectorAll("g.red-ui-flow-node-group");
+
+          if (!Object.keys(selectedIds).length) {
+            links.forEach(function (l) { if (l.g.classList) l.g.classList.remove("bp-link-live"); });
+            allNodeGroups.forEach(function (g) { if (g.classList) g.classList.remove("bp-node-live"); });
+            return;
+          }
+
+          // Directed lineage: walk downstream (source→target) and upstream
+          // (target→source) from the selected node(s), marking only the edges
+          // actually traversed (siblings sharing a downstream node excluded).
+          var live = {};
+          var pathNodes = {};
+          var walk = function (forward) {
+            var seen = {}, q = [];
+            Object.keys(selectedIds).forEach(function (id) { seen[id] = true; q.push(id); pathNodes[id] = true; });
+            while (q.length) {
+              var cur = q.shift();
+              links.forEach(function (l, i) {
+                var from = forward ? l.s : l.t;
+                var to   = forward ? l.t : l.s;
+                if (from === cur) {
+                  live[i] = true;
+                  if (!seen[to]) { seen[to] = true; pathNodes[to] = true; q.push(to); }
+                }
+              });
+            }
+          };
+          walk(true);
+          walk(false);
+
+          links.forEach(function (l, i) {
+            if (l.g.classList) l.g.classList.toggle("bp-link-live", !!live[i]);
+          });
+          allNodeGroups.forEach(function (g) {
+            var id = (g.__data__ && g.__data__.id) ? g.__data__.id : g.id;
+            if (g.classList) g.classList.toggle("bp-node-live", !!(id && pathNodes[id]));
+          });
+        } catch (e) {}
+      };
+
+      ["view:selection-changed", "nodes:change", "flows:change"].forEach(function (ev) {
+        try { RED.events.on(ev, highlightConnected); } catch (e) {}
+      });
+      try {
+        var chart = document.getElementById("red-ui-workspace-chart");
+        if (chart) chart.addEventListener("mouseup", function () {
+          setTimeout(highlightConnected, 20);
+        });
+      } catch (e) {}
+    } catch (e) {}
+  });
+})();

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@bitpoolos/edge-theme",
+  "version": "1.0.0",
+  "description": "Bitpool Edge theme for Node-RED 5 — cyan accents, glow & animated connection highlight (light + dark)",
+  "files": [
+    "bitpool-theme.css",
+    "bitpool.js",
+    "theme.js",
+    "resources/"
+  ],
+  "node-red": {
+    "version": ">=5.0.0",
+    "plugins": {
+      "bitpool-theme": "theme.js"
+    }
+  },
+  "keywords": [
+    "node-red",
+    "node-red-theme",
+    "bitpool",
+    "bitpoolos",
+    "edge",
+    "theme",
+    "dark theme",
+    "light theme"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "engines": {
+    "node": ">=22.9.0"
+  },
+  "author": {
+    "name": "bitpool-dev",
+    "email": "dev@bitpool.com"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "bugs": {
+    "url": "https://github.com/bitpool/bitpool-edge-theme/issues"
+  },
+  "homepage": "https://github.com/bitpool/bitpool-edge-theme#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bitpool/bitpool-edge-theme.git"
+  }
+}

package/resources/bitpool-icon.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 171.04 192.79">
+  <defs>
+    <style>
+      .cls-2 {
+        fill: url(#linear-gradient);
+        stroke-width: 0px;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="0" y1="96.39" x2="171.04" y2="96.39" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#83d7f7"/>
+      <stop offset="1" stop-color="#00adef"/>
+    </linearGradient>
+  </defs>
+  <path class="cls-2" d="M85.52,192.79c-2.6,0-5.1-.62-7.03-1.74L7.04,149.8C3.02,147.49,0,142.25,0,137.61V55.11C0,50.48,3.02,45.24,7.04,42.93L78.48,1.68c3.88-2.24,10.19-2.24,14.07,0l71.45,41.25c4.01,2.32,7.04,7.55,7.04,12.19v82.5c0,4.63-3.02,9.87-7.04,12.19l-71.45,41.25c-1.94,1.12-4.44,1.74-7.04,1.74ZM85.52,8.09c-1.16,0-2.26.24-2.96.65L11.11,49.98c-1.5.86-2.96,3.41-2.96,5.13v82.5c0,1.73,1.47,4.27,2.96,5.13l71.45,41.25c1.4.81,4.53.81,5.93,0l71.45-41.25c1.5-.86,2.96-3.4,2.96-5.13V55.11c0-1.73-1.47-4.27-2.96-5.13L88.48,8.73c-.7-.4-1.81-.65-2.96-.65ZM85.69,165.46h0s59.76-34.67,59.76-34.67v-19.74l-59.76,34.64-25.62-14.79v19.75l25.62,14.81h0s0,0,0,0h0ZM111.28,81.34l-25.6-14.83-25.6,14.83v29.74l25.58,14.8v.03l.02-.02.02.02v-.03l25.58-14.8v-29.61M145.45,61.72l-59.71-34.61-17.07,9.86,59.71,34.62v29.67l17.07-9.87v-29.67ZM25.9,61.77v68.85l17.07,9.88v-68.87l25.77-15.05-17.08-9.86-25.77,15.05Z"/>
+</svg>

package/resources/bitpool-logo-white.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 617.93 192.79">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ffffff;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: url(#linear-gradient);
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="0" y1="96.39" x2="171.04" y2="96.39" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#83d7f7"/>
+      <stop offset="1" stop-color="#00adef"/>
+    </linearGradient>
+  </defs>
+  <g>
+    <path class="cls-1" d="M255.61,94.18c14.39,1.25,19.23,10.24,19.23,25.46,0,19.64-8.99,24.9-31.27,24.9-17.43,0-26.56-.14-38.04-1.1V47.97c10.24-.97,18.54-1.11,33.76-1.11,24.07,0,32.65,5.26,32.65,24.9,0,13.7-4.7,20.75-16.32,21.86v.55ZM239.84,87.68c11.62,0,15.49-2.77,15.49-13.7s-4.15-13.14-16.88-13.14h-15.91v26.84h17.29ZM240.67,130.57c12.87,0,16.88-2.63,16.88-14.11,0-12.73-4.29-16.05-17.43-16.19h-17.57v30.16l18.12.14Z"/>
+    <path class="cls-1" d="M295.64,46.17c3.32,0,4.84,1.8,4.84,4.84v7.61c0,3.18-1.52,4.84-4.84,4.84h-7.75c-3.18,0-4.84-1.66-4.84-4.84v-7.61c0-3.04,1.66-4.84,4.84-4.84h7.75ZM283.46,143.43v-67.79h16.74v67.79h-16.74Z"/>
+    <path class="cls-1" d="M337.38,122.27c0,5.95,2.07,7.88,8.16,7.88h9.27l1.8,12.45c-4.7,1.52-13.28,2.35-17.43,2.35-11.9,0-18.4-7.19-18.4-19.78v-37.35h-12.31v-11.48l12.17-.69v-19.51h16.74v19.51h19.92v12.17h-19.92v34.45Z"/>
+    <path class="cls-1" d="M380.95,85.74c6.36-7.06,17.85-11.9,27.81-11.9,16.46,0,23.1,13.28,23.1,36.25,0,26.56-8.85,35-26.01,35-8.3,0-16.6-1.94-23.52-6.64.41,4.7.55,9.27.41,14.11v17.85h-16.74v-94.76h13.83l1.11,10.1ZM382.75,128.49c6.78,1.52,11.62,2.9,18.12,2.9,9.96,0,13.69-3.46,13.69-21.44s-3.32-22.27-12.03-22.27c-6.5,0-11.9,3.04-19.78,8.44v32.37Z"/>
+    <path class="cls-1" d="M505.18,109.54c0,26.01-8.99,35.69-33.34,35.69s-33.62-9.68-33.62-35.69,9.13-35.83,33.62-35.83,33.34,9.82,33.34,35.83ZM455.8,109.54c0,17.43,3.6,22.27,16.05,22.27s15.91-4.84,15.91-22.27-3.74-22.41-15.91-22.41-16.05,4.84-16.05,22.41Z"/>
+    <path class="cls-1" d="M578.64,109.54c0,26.01-8.99,35.69-33.34,35.69s-33.62-9.68-33.62-35.69,9.13-35.83,33.62-35.83,33.34,9.82,33.34,35.83ZM529.25,109.54c0,17.43,3.6,22.27,16.05,22.27s15.91-4.84,15.91-22.27-3.74-22.41-15.91-22.41-16.05,4.84-16.05,22.41Z"/>
+    <path class="cls-1" d="M602.16,122.27c-.14,5.39,2.63,7.88,8.02,7.88h5.81l1.94,12.45c-3.04,1.52-10.52,2.35-14.39,2.35-11.21,0-18.26-6.64-18.26-18.54V46.59h16.88v75.67Z"/>
+  </g>
+  <path class="cls-2" d="M85.52,192.79c-2.6,0-5.1-.62-7.03-1.74L7.04,149.8C3.02,147.49,0,142.25,0,137.61V55.11C0,50.48,3.02,45.24,7.04,42.93L78.48,1.68c3.88-2.24,10.19-2.24,14.07,0l71.45,41.25c4.01,2.32,7.04,7.55,7.04,12.19v82.5c0,4.63-3.02,9.87-7.04,12.19l-71.45,41.25c-1.94,1.12-4.44,1.74-7.04,1.74ZM85.52,8.09c-1.16,0-2.26.24-2.96.65L11.11,49.98c-1.5.86-2.96,3.41-2.96,5.13v82.5c0,1.73,1.47,4.27,2.96,5.13l71.45,41.25c1.4.81,4.53.81,5.93,0l71.45-41.25c1.5-.86,2.96-3.4,2.96-5.13V55.11c0-1.73-1.47-4.27-2.96-5.13L88.48,8.73c-.7-.4-1.81-.65-2.96-.65ZM85.69,165.46h0s59.76-34.67,59.76-34.67v-19.74l-59.76,34.64-25.62-14.79v19.75l25.62,14.81h0s0,0,0,0h0ZM111.28,81.34l-25.6-14.83-25.6,14.83v29.74l25.58,14.8v.03l.02-.02.02.02v-.03l25.58-14.8v-29.61M145.45,61.72l-59.71-34.61-17.07,9.86,59.71,34.62v29.67l17.07-9.87v-29.67ZM25.9,61.77v68.85l17.07,9.88v-68.87l25.77-15.05-17.08-9.86-25.77,15.05Z"/>
+</svg>

package/theme.js

@@ -0,0 +1,25 @@
+/*
+  MIT License Copyright 2021-2026 - Bitpool Pty Ltd
+
+  Bitpool Edge theme for Node-RED 5.
+  Purely ADDITIVE: it layers Bitpool cyan accents, glows and the animated
+  connection-highlight on top of Node-RED's own light/dark themes, without
+  overriding NR's palette. NR's built-in light & dark both work (with the
+  Appearance toggle, thanks to `schemes`).
+*/
+
+module.exports = function(RED) {
+    RED.plugins.registerPlugin("bitpool-theme", {
+        // Tells Node-RED this is a theme plugin
+        type: "node-red-theme",
+
+        // Supports both colour schemes → the Appearance toggle stays available.
+        schemes: ["light", "dark"],
+
+        // Additive styling only (glows, cyan accents, wire/node highlight, logo sizing).
+        css: ["bitpool-theme.css"],
+
+        // Connection-highlight behaviour (selecting a node traces its wires).
+        scripts: ["bitpool.js"],
+    });
+};