@theotherwillembotha/node-red-plugincore 0.0.51 → 0.0.52

package/README.md

@@ -1,11 +1,11 @@
 # @theotherwillembotha/node-red-plugincore
 
-A TypeScript framework for building production-grade Node-RED plugins with built-in support for structured logging, Prometheus metrics, and webhook servers.
+A TypeScript framework for building production-grade Node-RED plugins with built-in support for structured logging, Prometheus metrics, webhook servers, and reusable UI components.
 
 This package has two roles:
 
 1. **Config nodes** — a set of shared configuration nodes (loggers, metric collectors, webhook server) that are installed into Node-RED and referenced by other nodes in a flow.
-2. **Developer framework** — a TypeScript base library that plugin authors extend to build their own Node-RED nodes, with decorators and templates that wire in logging, metrics, and webhooks automatically.
+2. **Developer framework** — a TypeScript base library that plugin authors extend to build their own Node-RED nodes, with decorators and templates that wire in logging, metrics, webhooks, and editor UI automatically.
 
 ---
 
@@ -16,6 +16,7 @@ This framework is the foundation for a growing set of Node-RED plugins. The foll
 | Plugin | Description |
 |--------|-------------|
 | [@theotherwillembotha/node-red-telemetry](https://github.com/theotherwillembotha/nodered_telemetry) | Ready-to-use flow nodes for structured logging and Prometheus metrics — Logger, Counter, Gauge, and Timer nodes that attach to the config nodes provided by this package. |
+| [@theotherwillembotha/node-red-nginxproxymanager](https://github.com/theotherwillembotha/nodered_nginxproxymanager) | Node-RED nodes for managing Nginx Proxy Manager hosts directly from your flows. Includes a config node that registers as a reverse proxy provider, an Update Host node for creating and updating proxy entries, and a Get Hosts node for retrieving the current host list. |
 
 Additional plugins will be listed here as they are published.
 
@@ -41,11 +42,19 @@ Config nodes are shared resources configured once and referenced across your flo
 
 Three logger backends are supported. All expose the same interface and are interchangeable — any node built with the `@Logger` decorator can use any of them.
 
-| Node | Description |
-|------|-------------|
-| **Console Logger** | Writes structured log output to stdout via Winston. Ideal for development and containerised deployments that forward stdout to a log aggregator. |
-| **REST Logger** | Ships log entries to a remote HTTP/HTTPS endpoint. Supports Basic and API Key authentication. |
-| **Loki Logger** | Pushes log entries to a Grafana Loki instance via the Loki HTTP API. Supports multi-tenant deployments. |
+**Console Logger** — writes structured log output to stdout via Winston. Ideal for development and containerised deployments that forward stdout to a log aggregator.
+
+![Console Logger Config](documentation/ConsoleLoggerConfigNode.png)
+
+**REST Logger** — ships log entries to a remote HTTP/HTTPS endpoint. Supports Basic and API Key authentication.
+
+![REST Logger Config](documentation/RestLoggerConfigNode.png)
+
+**Loki Logger** — pushes log entries to a Grafana Loki instance via the Loki HTTP API. Supports multi-tenant deployments via the Tenant ID field.
+
+![Loki Logger Config](documentation/LokiLoggerConfigNode.png)
+
+All three loggers share a **Level** selector (debug, info, warn, error) and a **Template** field — a Handlebars template that controls the shape of each log entry. The default `message:{{msg}}` passes the raw message through; you can customise it to include only the fields you care about.
 
 #### Metrics
 
@@ -169,9 +178,93 @@ Templates bundle reusable UI fragments that compose into any node's editor panel
 | `GaugeMetricTemplate` | Gauge config node reference |
 | `TimerMetricTemplate` | Timer config node reference |
 | `WebhookTemplate` | Webhook server reference, path, auth, and reverse proxy config |
+| `UIHelperTemplate` | Global `PluginCore.dialog()` and `PluginCore.table()` UI factories (see below) |
 | `SettingsTemplate` | General settings section |
 | `BasicTemplate` | Base styles shared by all nodes |
 
+### UI helpers
+
+Including `UIHelperTemplate` in a node's `templates` list injects two client-side factory functions into the Node-RED editor page. Both are available globally as `PluginCore.dialog(...)` and `PluginCore.table(...)` and are styled to match Node-RED's own editor aesthetic.
+
+#### `PluginCore.dialog(options)`
+
+Opens a modal overlay with a title bar and one or more tabs. Closes on the close button, an overlay click, or Escape.
+
+```javascript
+PluginCore.dialog({
+    title: "My Plugin — Status",
+    tabs: [
+        {
+            label: "Proxy Hosts",
+            render: function($container) {
+                $container.append(
+                    PluginCore.table({
+                        columns: [
+                            { key: "id",    label: "ID" },
+                            { key: "name",  label: "Name" },
+                            { key: "enabled", label: "Enabled",
+                              render: function(v) {
+                                  return $("<span>")
+                                      .addClass(v ? "plugincore-status-enabled"
+                                                  : "plugincore-status-disabled")
+                                      .text(v ? "✔ Enabled" : "✘ Disabled");
+                              }}
+                        ],
+                        rows: data
+                    })
+                );
+            }
+        }
+    ]
+});
+```
+
+**Options:**
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `title` | `string` | Heading shown in the dialog title bar |
+| `tabs` | `array` | One or more tab definitions |
+| `tabs[].label` | `string` | Tab heading |
+| `tabs[].render` | `function($container)` | Called with a jQuery element; append content into it |
+
+**Returns:** `{ close() }` — call `close()` to dismiss the dialog programmatically.
+
+---
+
+#### `PluginCore.table(config)`
+
+Returns a styled jQuery `<table>` element ready to append into any container.
+
+```javascript
+var $table = PluginCore.table({
+    columns: [
+        { key: "id",     label: "ID" },
+        { key: "domain", label: "Domain",
+          render: function(value, row) { return value.join(", "); } }
+    ],
+    rows: arrayOfObjects
+});
+$container.append($table);
+```
+
+**Config:**
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `columns` | `array` | Column definitions |
+| `columns[].key` | `string` | Property name on each row object |
+| `columns[].label` | `string` | Column header text |
+| `columns[].render` | `function(value, row)` | Optional. Return a string or jQuery element for custom cell rendering |
+| `rows` | `object[]` | Data rows |
+
+**CSS classes available for cell content:**
+
+| Class | Colour | Intended use |
+|-------|--------|-------------|
+| `plugincore-status-enabled` | Green | Enabled / active state |
+| `plugincore-status-disabled` | Red | Disabled / inactive state |
+
 ### Registering nodes for generation
 
 Create a `GenerateNodes.ts` at the root of your `src/` directory. This is the composition root — register every service, template, and node, then call `.generate()` to emit the two Node-RED entry files (`Nodes.js` and `Plugins.js`).

package/build/GenerateNodes.js

@@ -23,6 +23,7 @@ new index_js_1.NodeGenerator("./src/core/")
     .registerTemplate(index_js_4.GaugeMetricTemplate)
     .registerTemplate(index_js_1.TimerMetricTemplate)
     .registerTemplate(index_js_2.WebhookTemplate)
+    .registerTemplate(index_js_1.UIHelperTemplate)
     // nodes
     .registerNode(DelegatedConfigReferenceNode_js_1.DelegatedConfigReferenceNode)
     .registerNode(index_js_1.ConsoleLoggerConfigNode)

package/build/core/ui/template/UIHelperTemplate.d.ts

@@ -0,0 +1,5 @@
+import { Template, TemplateDescriptor } from "../../NodeConstructor";
+export declare class UIHelperTemplate extends Template {
+    static getTemplateDescriptor(): TemplateDescriptor;
+}
+//# sourceMappingURL=UIHelperTemplate.d.ts.map

package/build/core/ui/template/UIHelperTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIHelperTemplate.d.ts","sourceRoot":"","sources":["../../../../src/core/ui/template/UIHelperTemplate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAGpE,qBAAa,gBAAiB,SAAQ,QAAQ;WAE5B,qBAAqB,IAAI,kBAAkB;CAQ5D"}

package/build/core/ui/template/UIHelperTemplate.html

@@ -0,0 +1,229 @@
+
+<div template-section="onIncludeOnce">
+
+<style>
+/* ─── PluginCore Dialog overlay ─────────────────────────────────────────── */
+
+.plugincore-overlay {
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 2000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.plugincore-dialog {
+    background: #fff;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
+    min-width: 540px;
+    max-width: 85vw;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/* Title bar — matches Node-RED's main nav bar colour */
+.plugincore-dialog-titlebar {
+    display: flex;
+    align-items: center;
+    background: #3d3d3d;
+    color: #fff;
+    padding: 6px 8px 6px 12px;
+    flex-shrink: 0;
+}
+
+.plugincore-dialog-title {
+    flex: 1;
+    font-weight: 600;
+    font-size: 13px;
+}
+
+/* Close button — jQuery UI styling as used in Node-RED dialogs */
+.plugincore-dialog-close {
+    color: #ccc !important;
+    background: transparent !important;
+    border-color: transparent !important;
+}
+
+.plugincore-dialog-close:hover {
+    color: #fff !important;
+    background: rgba(255, 255, 255, 0.15) !important;
+    border-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+/* Scrollable body that contains the jQuery UI tab widget */
+.plugincore-dialog-body {
+    flex: 1;
+    overflow: auto;
+    padding: 10px;
+}
+
+/* ─── PluginCore Table ───────────────────────────────────────────────────── */
+
+.plugincore-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+}
+
+.plugincore-table th {
+    background: #f3f3f3;
+    border: 1px solid #ddd;
+    padding: 5px 10px;
+    text-align: left;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.plugincore-table td {
+    border: 1px solid #eee;
+    padding: 5px 10px;
+    vertical-align: middle;
+}
+
+.plugincore-table tbody tr:nth-child(even) td {
+    background: #fafafa;
+}
+
+.plugincore-table tbody tr:hover td {
+    background: #f0f6ff;
+}
+
+.plugincore-status-enabled  { color: #27ae60; }
+.plugincore-status-disabled { color: #c0392b; }
+</style>
+
+<script type="text/javascript">
+
+    window.PluginCore = window.PluginCore || {};
+
+    /**
+     * PluginCore.table(config) → jQuery <table>
+     *
+     * config: {
+     *   columns : [{ key, label, render?(value, row) → string | jQuery }],
+     *   rows    : object[]
+     * }
+     */
+    PluginCore.table = function(config) {
+        var $table = $('<table class="plugincore-table">');
+
+        // Header
+        var $thead = $('<thead>');
+        var $hr = $('<tr>');
+        config.columns.forEach(function(col) {
+            $hr.append($('<th>').text(col.label));
+        });
+        $thead.append($hr);
+        $table.append($thead);
+
+        // Body
+        var $tbody = $('<tbody>');
+        (config.rows || []).forEach(function(row) {
+            var $tr = $('<tr>');
+            config.columns.forEach(function(col) {
+                var $td = $('<td>');
+                var val = row[col.key];
+                if (col.render) {
+                    var rendered = col.render(val, row);
+                    if (rendered && typeof rendered === 'object' && rendered.jquery) {
+                        $td.append(rendered);
+                    } else {
+                        $td.html(rendered != null ? String(rendered) : '');
+                    }
+                } else {
+                    $td.text(val != null ? String(val) : '');
+                }
+                $tr.append($td);
+            });
+            $tbody.append($tr);
+        });
+        $table.append($tbody);
+
+        return $table;
+    };
+
+    /**
+     * PluginCore.dialog(options) → { close() }
+     *
+     * options: {
+     *   title : string,
+     *   tabs  : [{ label: string, render($container) }]
+     * }
+     *
+     * Uses jQuery UI tabs for the tab widget (already bundled with Node-RED).
+     * Closes on: close button click, overlay click, or Escape key.
+     */
+    PluginCore.dialog = function(options) {
+        // Only one dialog at a time
+        $('.plugincore-overlay').remove();
+
+        var uid = 'plugincore-' + Date.now();
+
+        var $overlay = $('<div class="plugincore-overlay">');
+        var $dialog  = $('<div class="plugincore-dialog">');
+
+        // ── Title bar ──────────────────────────────────────────────────────
+        var $titlebar = $('<div class="plugincore-dialog-titlebar">');
+        $titlebar.append(
+            $('<span class="plugincore-dialog-title">').text(options.title || '')
+        );
+        var $closeBtn = $(
+            '<button type="button" class="ui-button ui-corner-all ui-widget plugincore-dialog-close" title="Close">' +
+            '<span class="ui-icon ui-icon-closethick"></span></button>'
+        );
+        $titlebar.append($closeBtn);
+
+        // ── Body + jQuery UI tabs ──────────────────────────────────────────
+        var $body   = $('<div class="plugincore-dialog-body">');
+        var $tabsEl = $('<div>').attr('id', uid + '-tabs');
+        var $ul     = $('<ul>');
+
+        (options.tabs || []).forEach(function(tab, i) {
+            var paneId = uid + '-pane-' + i;
+            $ul.append(
+                $('<li>').append($('<a>').attr('href', '#' + paneId).text(tab.label))
+            );
+            var $pane = $('<div>').attr('id', paneId);
+            if (tab.render) { tab.render($pane); }
+            $tabsEl.append($pane);
+        });
+
+        $tabsEl.prepend($ul);
+        $body.append($tabsEl);
+
+        // ── Assemble ───────────────────────────────────────────────────────
+        $dialog.append($titlebar).append($body);
+        $overlay.append($dialog);
+        $('body').append($overlay);
+
+        // Initialise jQuery UI tabs (bundled with Node-RED)
+        $tabsEl.tabs();
+
+        // ── Close logic ───────────────────────────────────────────────────
+        var escNs = 'keydown.plugincore-dialog-' + uid;
+
+        function close() {
+            $overlay.fadeOut(150, function() { $overlay.remove(); });
+            $(document).off(escNs);
+        }
+
+        $closeBtn.on('click', close);
+        $overlay.on('click', function(e) {
+            if ($(e.target).is($overlay)) { close(); }
+        });
+        $(document).on(escNs, function(e) {
+            if (e.key === 'Escape') { close(); }
+        });
+
+        return { close: close };
+    };
+
+</script>
+
+</div>

package/build/core/ui/template/UIHelperTemplate.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIHelperTemplate = void 0;
+const NodeConstructor_1 = require("../../NodeConstructor");
+const NodeGenerator_1 = require("../../NodeGenerator");
+class UIHelperTemplate extends NodeConstructor_1.Template {
+    static getTemplateDescriptor() {
+        return new NodeConstructor_1.TemplateDescriptor("ui-helper", UIHelperTemplate, NodeGenerator_1.SourceUtility.getSourcePath("/build/", "/src/") + "UIHelperTemplate.html", []);
+    }
+}
+exports.UIHelperTemplate = UIHelperTemplate;

package/build/index.d.ts

@@ -17,6 +17,7 @@ export * from "./core/metrics/node/TimerMetricConfigNode";
 export * from "./core/metrics/template/TimerMetricTemplate";
 export * from "./core/tagging/service/NodeTypeService";
 export * from "./core/tagging/NodeDescriptionDecorator";
+export * from "./core/ui/template/UIHelperTemplate";
 export * from "./core/other/node/DelegatedConfigReferenceNode";
 export * from "./core/other/service/InputService";
 export * from "./core/other/service/SettingsService";

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AAGvC,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AAGxD,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uCAAuC,CAAC;AACtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,6CAA6C,CAAC;AAG5D,cAAc,wCAAwC,CAAC;AACvD,cAAc,yCAAyC,CAAC;AAGxD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,mCAAmC,CAAC;AAClD,cAAc,sCAAsC,CAAC;AACrD,cAAc,qCAAqC,CAAC;AACpD,cAAc,wCAAwC,CAAC;AAGvD,cAAc,yCAAyC,CAAC;AACxD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAG5D,cAAc,gDAAgD,CAAC;AAG/D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AAGvC,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AAGxD,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uCAAuC,CAAC;AACtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,6CAA6C,CAAC;AAG5D,cAAc,wCAAwC,CAAC;AACvD,cAAc,yCAAyC,CAAC;AAGxD,cAAc,qCAAqC,CAAC;AAGpD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,mCAAmC,CAAC;AAClD,cAAc,sCAAsC,CAAC;AACrD,cAAc,qCAAqC,CAAC;AACpD,cAAc,wCAAwC,CAAC;AAGvD,cAAc,yCAAyC,CAAC;AACxD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAG5D,cAAc,gDAAgD,CAAC;AAG/D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC"}

package/build/index.js

@@ -36,6 +36,8 @@ __exportStar(require("./core/metrics/template/TimerMetricTemplate"), exports);
 // TAGGING
 __exportStar(require("./core/tagging/service/NodeTypeService"), exports);
 __exportStar(require("./core/tagging/NodeDescriptionDecorator"), exports);
+// UI
+__exportStar(require("./core/ui/template/UIHelperTemplate"), exports);
 // OTHER
 __exportStar(require("./core/other/node/DelegatedConfigReferenceNode"), exports);
 __exportStar(require("./core/other/service/InputService"), exports);

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@theotherwillembotha/node-red-plugincore",
-  "version": "0.0.51",
+  "version": "0.0.52",
   "description": "A core framework for building production-grade Node-RED plugins, with built-in support for structured logging, metrics, and webhook ingestion.",
   "author": "Willem Botha (@theotherwillembotha)",
   "license": "ISC",
   "keywords": [
-    "node-red", "logging", "metrics", "webhook", "reverseproxy"
+    "node-red",
+    "logging",
+    "metrics",
+    "webhook",
+    "reverseproxy"
   ],
   "main": "./build/index.js",
   "exports": "./build/index.js",
@@ -20,13 +24,20 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/theotherwillembotha/nodered_plugincore.git"
+    "url": "git+https://github.com/theotherwillembotha/nodered_plugincore.git"
   },
   "bugs": {
     "url": "https://github.com/theotherwillembotha/nodered_plugincore/issues"
   },
   "types": "./build/index.d.ts",
-  "files": ["build/", "src/", "icons/", "documentation/", "LICENSE", "README.md"],
+  "files": [
+    "build/",
+    "src/",
+    "icons/",
+    "documentation/",
+    "LICENSE",
+    "README.md"
+  ],
   "homepage": "https://github.com/theotherwillembotha/nodered_plugincore#readme",
   "engines": {
     "node": ">=18",
@@ -35,7 +46,7 @@
   "devDependencies": {
     "@types/deep-equal": "^1.0.4",
     "@types/js-beautify": "^1.14.3",
-    "@types/jsdom": "^21.1.7",
+    "@types/jsdom": "^28.0.3",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^22.15.29",
     "@types/node-red": "~1.3.5",
@@ -47,12 +58,12 @@
     "express": "^5.1.0",
     "handlebars": "^4.7.8",
     "js-beautify": "^1.15.4",
-    "jsdom": "^26.1.0",
+    "jsdom": "^29.1.1",
     "markdown-it": "^14.1.0",
     "network": "^0.7.0",
     "prom-client": "^15.1.3",
     "reflect-metadata": "^0.2.2",
-    "whatwg-url": "^14.2.0",
+    "whatwg-url": "^16.0.1",
     "winston": "^3.17.0",
     "winston-loki": "^6.1.3"
   },

package/src/GenerateNodes.ts

@@ -1,7 +1,7 @@
 
 import { DelegatedConfigReferenceNode } from "./core/other/node/DelegatedConfigReferenceNode.js";
 import { NodeTypeService } from "./core/tagging/service/NodeTypeService.js";
-import { NodeGenerator, SettingsService, BasicTemplate, SettingsTemplate, TimerMetricTemplate, ConsoleLoggerConfigNode, RestLoggerConfigNode, LokiLoggerConfigNode } from "./index.js"
+import { NodeGenerator, SettingsService, BasicTemplate, SettingsTemplate, TimerMetricTemplate, ConsoleLoggerConfigNode, RestLoggerConfigNode, LokiLoggerConfigNode, UIHelperTemplate } from "./index.js"
 import { WebhookServerConfigNode, WebhookServerService, WebhookTemplate,  } from "./index.js"
 
 import {LoggerService, LoggerTemplate } from "./index.js";
@@ -26,6 +26,7 @@ new NodeGenerator("./src/core/")
     .registerTemplate(GaugeMetricTemplate)
     .registerTemplate(TimerMetricTemplate)
     .registerTemplate(WebhookTemplate)
+    .registerTemplate(UIHelperTemplate)
 
     // nodes
     .registerNode(DelegatedConfigReferenceNode)

package/src/core/ui/template/UIHelperTemplate.html

@@ -0,0 +1,229 @@
+
+<div template-section="onIncludeOnce">
+
+<style>
+/* ─── PluginCore Dialog overlay ─────────────────────────────────────────── */
+
+.plugincore-overlay {
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 2000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.plugincore-dialog {
+    background: #fff;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
+    min-width: 540px;
+    max-width: 85vw;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/* Title bar — matches Node-RED's main nav bar colour */
+.plugincore-dialog-titlebar {
+    display: flex;
+    align-items: center;
+    background: #3d3d3d;
+    color: #fff;
+    padding: 6px 8px 6px 12px;
+    flex-shrink: 0;
+}
+
+.plugincore-dialog-title {
+    flex: 1;
+    font-weight: 600;
+    font-size: 13px;
+}
+
+/* Close button — jQuery UI styling as used in Node-RED dialogs */
+.plugincore-dialog-close {
+    color: #ccc !important;
+    background: transparent !important;
+    border-color: transparent !important;
+}
+
+.plugincore-dialog-close:hover {
+    color: #fff !important;
+    background: rgba(255, 255, 255, 0.15) !important;
+    border-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+/* Scrollable body that contains the jQuery UI tab widget */
+.plugincore-dialog-body {
+    flex: 1;
+    overflow: auto;
+    padding: 10px;
+}
+
+/* ─── PluginCore Table ───────────────────────────────────────────────────── */
+
+.plugincore-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+}
+
+.plugincore-table th {
+    background: #f3f3f3;
+    border: 1px solid #ddd;
+    padding: 5px 10px;
+    text-align: left;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.plugincore-table td {
+    border: 1px solid #eee;
+    padding: 5px 10px;
+    vertical-align: middle;
+}
+
+.plugincore-table tbody tr:nth-child(even) td {
+    background: #fafafa;
+}
+
+.plugincore-table tbody tr:hover td {
+    background: #f0f6ff;
+}
+
+.plugincore-status-enabled  { color: #27ae60; }
+.plugincore-status-disabled { color: #c0392b; }
+</style>
+
+<script type="text/javascript">
+
+    window.PluginCore = window.PluginCore || {};
+
+    /**
+     * PluginCore.table(config) → jQuery <table>
+     *
+     * config: {
+     *   columns : [{ key, label, render?(value, row) → string | jQuery }],
+     *   rows    : object[]
+     * }
+     */
+    PluginCore.table = function(config) {
+        var $table = $('<table class="plugincore-table">');
+
+        // Header
+        var $thead = $('<thead>');
+        var $hr = $('<tr>');
+        config.columns.forEach(function(col) {
+            $hr.append($('<th>').text(col.label));
+        });
+        $thead.append($hr);
+        $table.append($thead);
+
+        // Body
+        var $tbody = $('<tbody>');
+        (config.rows || []).forEach(function(row) {
+            var $tr = $('<tr>');
+            config.columns.forEach(function(col) {
+                var $td = $('<td>');
+                var val = row[col.key];
+                if (col.render) {
+                    var rendered = col.render(val, row);
+                    if (rendered && typeof rendered === 'object' && rendered.jquery) {
+                        $td.append(rendered);
+                    } else {
+                        $td.html(rendered != null ? String(rendered) : '');
+                    }
+                } else {
+                    $td.text(val != null ? String(val) : '');
+                }
+                $tr.append($td);
+            });
+            $tbody.append($tr);
+        });
+        $table.append($tbody);
+
+        return $table;
+    };
+
+    /**
+     * PluginCore.dialog(options) → { close() }
+     *
+     * options: {
+     *   title : string,
+     *   tabs  : [{ label: string, render($container) }]
+     * }
+     *
+     * Uses jQuery UI tabs for the tab widget (already bundled with Node-RED).
+     * Closes on: close button click, overlay click, or Escape key.
+     */
+    PluginCore.dialog = function(options) {
+        // Only one dialog at a time
+        $('.plugincore-overlay').remove();
+
+        var uid = 'plugincore-' + Date.now();
+
+        var $overlay = $('<div class="plugincore-overlay">');
+        var $dialog  = $('<div class="plugincore-dialog">');
+
+        // ── Title bar ──────────────────────────────────────────────────────
+        var $titlebar = $('<div class="plugincore-dialog-titlebar">');
+        $titlebar.append(
+            $('<span class="plugincore-dialog-title">').text(options.title || '')
+        );
+        var $closeBtn = $(
+            '<button type="button" class="ui-button ui-corner-all ui-widget plugincore-dialog-close" title="Close">' +
+            '<span class="ui-icon ui-icon-closethick"></span></button>'
+        );
+        $titlebar.append($closeBtn);
+
+        // ── Body + jQuery UI tabs ──────────────────────────────────────────
+        var $body   = $('<div class="plugincore-dialog-body">');
+        var $tabsEl = $('<div>').attr('id', uid + '-tabs');
+        var $ul     = $('<ul>');
+
+        (options.tabs || []).forEach(function(tab, i) {
+            var paneId = uid + '-pane-' + i;
+            $ul.append(
+                $('<li>').append($('<a>').attr('href', '#' + paneId).text(tab.label))
+            );
+            var $pane = $('<div>').attr('id', paneId);
+            if (tab.render) { tab.render($pane); }
+            $tabsEl.append($pane);
+        });
+
+        $tabsEl.prepend($ul);
+        $body.append($tabsEl);
+
+        // ── Assemble ───────────────────────────────────────────────────────
+        $dialog.append($titlebar).append($body);
+        $overlay.append($dialog);
+        $('body').append($overlay);
+
+        // Initialise jQuery UI tabs (bundled with Node-RED)
+        $tabsEl.tabs();
+
+        // ── Close logic ───────────────────────────────────────────────────
+        var escNs = 'keydown.plugincore-dialog-' + uid;
+
+        function close() {
+            $overlay.fadeOut(150, function() { $overlay.remove(); });
+            $(document).off(escNs);
+        }
+
+        $closeBtn.on('click', close);
+        $overlay.on('click', function(e) {
+            if ($(e.target).is($overlay)) { close(); }
+        });
+        $(document).on(escNs, function(e) {
+            if (e.key === 'Escape') { close(); }
+        });
+
+        return { close: close };
+    };
+
+</script>
+
+</div>

package/src/core/ui/template/UIHelperTemplate.ts

@@ -0,0 +1,14 @@
+import { Template, TemplateDescriptor } from "../../NodeConstructor"
+import { SourceUtility } from "../../NodeGenerator";
+
+export class UIHelperTemplate extends Template {
+
+    public static getTemplateDescriptor(): TemplateDescriptor {
+        return new TemplateDescriptor(
+            "ui-helper",
+            UIHelperTemplate,
+            SourceUtility.getSourcePath("/build/", "/src/") + "UIHelperTemplate.html",
+            []
+        );
+    }
+}

package/src/index.ts

@@ -24,6 +24,9 @@ export * from "./core/metrics/template/TimerMetricTemplate";
 export * from "./core/tagging/service/NodeTypeService";
 export * from "./core/tagging/NodeDescriptionDecorator";
 
+// UI
+export * from "./core/ui/template/UIHelperTemplate";
+
 // OTHER
 export * from "./core/other/node/DelegatedConfigReferenceNode";
 export * from "./core/other/service/InputService";