@theotherwillembotha/node-red-plugincore 0.1.0 → 0.3.0

package/src/core/state/service/StateService.ts

@@ -0,0 +1,180 @@
+import { BaseService, FlowDeployment } from "../../NodeConstructor";
+import { ServiceDescription } from "../../tagging/ServiceDescriptionDecorator";
+import { NodeAPI, NodeAPISettingsWithData } from "node-red";
+import * as fs from "fs";
+import * as path from "path";
+
+// ******************************************************* //
+//                   StateHandle                           //
+// ******************************************************* //
+
+export interface StateHandle {
+    get(): Promise<string | null>;
+    set(stateName: string): Promise<void>;
+    subscribe(callback: (stateName: string) => void): void;
+    unsubscribe(): void;
+}
+
+export class DoNothingStateHandle implements StateHandle {
+    public get(): Promise<string | null> { return Promise.resolve(null); }
+    public set(_stateName: string): Promise<void> { return Promise.resolve(); }
+    public subscribe(_callback: (stateName: string) => void): void {}
+    public unsubscribe(): void {}
+}
+
+// (StateReference removed - stateEnabled is no longer optional; consumers pass the ID directly)
+
+// ******************************************************* //
+//                   Global Store Keys                     //
+// ******************************************************* //
+
+const _GLOBAL_STATE_MEMORY_KEY    = '__plugincore_internalstate_memory__';
+const _GLOBAL_STATE_SUBS_KEY      = '__plugincore_internalstate_subscribers__';
+const _GLOBAL_STATE_FACTORIES_KEY = '__plugincore_state_factories__';
+const _GLOBAL_STATE_CONFIG_KEY    = '__plugincore_state_config__';
+const _GLOBAL_STATE_USERDIR_KEY   = '__plugincore_state_userDir__';
+
+function getMemoryStore(): Map<string, string> {
+    if (!(global as any)[_GLOBAL_STATE_MEMORY_KEY]) (global as any)[_GLOBAL_STATE_MEMORY_KEY] = new Map();
+    return (global as any)[_GLOBAL_STATE_MEMORY_KEY];
+}
+
+function getSubscriberStore(): Map<string, Set<(s: string) => void>> {
+    if (!(global as any)[_GLOBAL_STATE_SUBS_KEY]) (global as any)[_GLOBAL_STATE_SUBS_KEY] = new Map();
+    return (global as any)[_GLOBAL_STATE_SUBS_KEY];
+}
+
+function getFactoryStore(): Map<string, () => StateHandle> {
+    if (!(global as any)[_GLOBAL_STATE_FACTORIES_KEY]) (global as any)[_GLOBAL_STATE_FACTORIES_KEY] = new Map();
+    return (global as any)[_GLOBAL_STATE_FACTORIES_KEY];
+}
+
+function getConfigStore(): Map<string, { survivesRedeploy: boolean; survivesRestart: boolean }> {
+    if (!(global as any)[_GLOBAL_STATE_CONFIG_KEY]) (global as any)[_GLOBAL_STATE_CONFIG_KEY] = new Map();
+    return (global as any)[_GLOBAL_STATE_CONFIG_KEY];
+}
+
+function getUserDir(): string | undefined {
+    return (global as any)[_GLOBAL_STATE_USERDIR_KEY];
+}
+
+function stateFilePath(nodeId: string): string | null {
+    const userDir = getUserDir();
+    if (!userDir) return null;
+    return path.join(userDir, 'internalstate', nodeId + '.json');
+}
+
+// ******************************************************* //
+//                   StateService                          //
+// ******************************************************* //
+
+@ServiceDescription({
+    id: "@theotherwillembotha/stateservice",
+    name: "StateService",
+    type: "integration-plugin",
+    sourceFile: "@theotherwillembotha/node-red-plugincore",
+})
+export class StateService extends BaseService {
+
+    constructor() {
+        super("StateService");
+    }
+
+    public init(red: NodeAPI<NodeAPISettingsWithData>): void {
+        (global as any)[_GLOBAL_STATE_USERDIR_KEY] = (red.settings as any).userDir;
+    }
+
+    public deinit(_red: NodeAPI<NodeAPISettingsWithData>): void {}
+
+    public async onDeploy(deployment: FlowDeployment): Promise<void> {
+        const flowIds = new Set(deployment.flows.map(e => e.id));
+        const factories = getFactoryStore();
+        const configs = getConfigStore();
+        const memory = getMemoryStore();
+
+        // Remove factories for config nodes no longer in the flow.
+        factories.forEach((_, nodeId) => {
+            if (!flowIds.has(nodeId)) factories.delete(nodeId);
+        });
+
+        // Clear memory for state config nodes that are gone or do not survive redeploy.
+        configs.forEach((cfg, nodeId) => {
+            if (!flowIds.has(nodeId)) {
+                memory.delete(nodeId);
+                configs.delete(nodeId);
+            } else if (!cfg.survivesRedeploy && !cfg.survivesRestart) {
+                memory.delete(nodeId);
+            }
+        });
+
+        return Promise.resolve();
+    }
+
+    // ---- Factory registration (called by StateConfigNode subclasses) ----
+
+    public static registerFactory(nodeId: string, factory: () => StateHandle): void {
+        getFactoryStore().set(nodeId, factory);
+    }
+
+    public static registerConfig(nodeId: string, config: { survivesRedeploy: boolean; survivesRestart: boolean }): void {
+        getConfigStore().set(nodeId, config);
+    }
+
+    // ---- Handle creation (called by consumer nodes) ----
+
+    public static createHandle(stateReference: string): StateHandle {
+        if (!stateReference) return new DoNothingStateHandle();
+        const factory = getFactoryStore().get(stateReference);
+        return factory ? factory() : new DoNothingStateHandle();
+    }
+
+    // ---- Memory store (used by InternalStateHandle) ----
+
+    public static getMemory(nodeId: string): string | null {
+        return getMemoryStore().get(nodeId) ?? null;
+    }
+
+    public static setMemory(nodeId: string, value: string): void {
+        getMemoryStore().set(nodeId, value);
+    }
+
+    // ---- File store (used by InternalStateHandle) ----
+
+    public static readFile(nodeId: string): string | null {
+        const filePath = stateFilePath(nodeId);
+        if (!filePath) return null;
+        try {
+            if (!fs.existsSync(filePath)) return null;
+            const content = fs.readFileSync(filePath, 'utf8');
+            return JSON.parse(content).value ?? null;
+        } catch {
+            return null;
+        }
+    }
+
+    public static writeFile(nodeId: string, value: string): void {
+        const filePath = stateFilePath(nodeId);
+        if (!filePath) return;
+        const dir = path.dirname(filePath);
+        if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+        fs.writeFileSync(filePath, JSON.stringify({ value }), 'utf8');
+    }
+
+    // ---- Subscriber management (used by InternalStateHandle) ----
+
+    public static addSubscriber(nodeId: string, callback: (s: string) => void): void {
+        const store = getSubscriberStore();
+        if (!store.has(nodeId)) store.set(nodeId, new Set());
+        store.get(nodeId)!.add(callback);
+    }
+
+    public static removeSubscriber(nodeId: string, callback: (s: string) => void): void {
+        getSubscriberStore().get(nodeId)?.delete(callback);
+    }
+
+    public static notifySubscribers(nodeId: string, value: string): void {
+        getSubscriberStore().get(nodeId)?.forEach(cb => {
+            try { cb(value); } catch {}
+        });
+    }
+}

package/src/core/state/template/StateTemplate.html

@@ -0,0 +1,244 @@
+<script type="text/javascript" template-section="onCompose">
+    node
+        .addDefault("stateReference", { required: false, value: '', type: "DelegatedConfigReferenceNode" })
+</script>
+
+<script type="text/javascript" template-section="onIncludeEditPrepare">
+
+    // Read name suffix and declared states from the build-time templateConfig injected by NodeConstructor.
+    let _stateNameSuffix = (templateConfig && templateConfig.nameSuffix) ? templateConfig.nameSuffix : '-State';
+    let _stateStates     = (templateConfig && templateConfig.defaultStates) ? templateConfig.defaultStates : null;
+
+    let stateSection     = $("#state-config-section");
+    let typeSelector     = stateSection.find("#state-type-selector");
+    let configureBtn     = stateSection.find("#state-configure-btn");
+    let stateRefSelector = stateSection.find("#state-ref-selector");
+
+    // Seed the hidden select with the current value and record the original for cleanup.
+    stateRefSelector.empty();
+    if (node.stateReference) {
+        let existingNode = RED.nodes.node(node.stateReference);
+        let label = existingNode ? (existingNode.name || node.stateReference) : node.stateReference;
+        stateRefSelector.append($('<option>').val(node.stateReference).text(label));
+        stateRefSelector.val(node.stateReference);
+    }
+    stateRefSelector.data('originalRef', node.stateReference || '');
+
+    let updateConfigureBtn = function() {
+        configureBtn.toggleClass("disabled", !typeSelector.val());
+    };
+
+    let getStateProviderTypes = async function() {
+        let types = [];
+        await $.ajax({
+            url: "nodetypeservice/find?tag=StateProvider",
+            type: "GET",
+            contentType: "application/json; charset=utf-8",
+            success:  (r)              => { types = r; },
+            error:    (jqXHR, s, err) => { console.log("StateTemplate: provider types error", jqXHR, s, err); },
+        });
+        return types;
+    };
+
+    // RED.editor.editConfig captures a reference to the field element before the inner config
+    // editor opens. When editing a ConfigNode, the outer editor's DOM is swapped out while the
+    // inner editor is active, so the captured reference becomes stale and editConfig's own
+    // callback silently fails to update our hidden select.
+    //
+    // Instead we listen for the 'nodes:add' event which fires via RED.nodes.add() whenever a
+    // new node (including config nodes) is added to the workspace - regardless of DOM state.
+    let stateNodeAddHandler = function(addedNode) {
+        getStateProviderTypes().then(function(types) {
+            let typeIds = types.map(function(t) { return t.id; });
+            if (typeIds.indexOf(addedNode.type) < 0) { return; }
+
+            console.log("StateTemplate: nodes:add - state provider added:", addedNode.type, addedNode.id);
+
+            let prevRef     = stateRefSelector.val() || '';
+            let originalRef = stateRefSelector.data('originalRef') || '';
+
+            // Clean up any intermediate node created earlier this session (not the original).
+            if (prevRef && prevRef !== originalRef) {
+                let inter = RED.nodes.node(prevRef);
+                if (inter) { RED.nodes.remove(inter); RED.nodes.dirty(true); }
+            }
+
+            // Update the hidden select with the newly created node.
+            stateRefSelector.empty();
+            stateRefSelector.append($('<option>').val(addedNode.id).text(addedNode.name || addedNode.id));
+            stateRefSelector.val(addedNode.id);
+
+            // Sync the visible type selector.
+            typeSelector.val(addedNode.type);
+            updateConfigureBtn();
+        });
+    };
+
+    RED.events.on('nodes:add', stateNodeAddHandler);
+    stateSection.data('stateNodeAddHandler', stateNodeAddHandler);
+
+    // When the type dropdown changes, restore the original ref if it matches,
+    // or clear so the user must click Configure to create a new instance.
+    typeSelector.on('change', function() {
+        let selectedType = typeSelector.val() || '';
+        let originalRef  = stateRefSelector.data('originalRef') || '';
+        let currentRef   = stateRefSelector.val() || '';
+
+        if (!selectedType) {
+            stateRefSelector.val('');
+            updateConfigureBtn();
+            return;
+        }
+        if (originalRef) {
+            let originalNode = RED.nodes.node(originalRef);
+            if (originalNode && originalNode.type === selectedType) {
+                stateRefSelector.val(originalRef);
+                updateConfigureBtn();
+                return;
+            }
+        }
+        if (currentRef) {
+            let currentNode = RED.nodes.node(currentRef);
+            if (currentNode && currentNode.type === selectedType) {
+                updateConfigureBtn();
+                return;
+            }
+        }
+        stateRefSelector.val('');
+        updateConfigureBtn();
+    });
+
+    configureBtn.on('click', function(event) {
+        event.stopPropagation();
+        if (configureBtn.hasClass("disabled")) return;
+
+        let selectedType = typeSelector.val() || '';
+        if (!selectedType) return;
+
+        let currentRef  = stateRefSelector.val() || '';
+        let currentNode = currentRef ? RED.nodes.node(currentRef) : null;
+
+        // Always set __stateTemplateContext so the config node editor can read defaultName and states.
+        window.__stateTemplateContext = {
+            defaultName: (node.name || node.type) + _stateNameSuffix,
+            states: _stateStates
+        };
+
+        if (currentNode && currentNode.type === selectedType) {
+            // Editing an existing owned node - nodes:add won't fire, select already has the value.
+            RED.editor.editConfig("#state-ref-selector", selectedType, currentRef);
+        } else {
+            // Creating a new instance - nodes:add handler will capture the new ID.
+            RED.editor.editConfig("#state-ref-selector", selectedType, "_ADD_");
+        }
+    });
+
+    // Populate the type dropdown, pre-select the current type, or auto-create a default.
+    getStateProviderTypes().then(function(providerTypes) {
+        providerTypes.forEach(function(t) {
+            $('<option>').val(t.id).text(t.name).appendTo(typeSelector);
+        });
+
+        let currentRef = stateRefSelector.val();
+        if (currentRef) {
+            // Existing reference - just pre-select its type.
+            let currentNode = RED.nodes.node(currentRef);
+            if (currentNode) typeSelector.val(currentNode.type);
+            updateConfigureBtn();
+        } else if (providerTypes.length > 0) {
+            // No state reference - auto-create a default InternalStateConfigNode so the
+            // consumer always has a valid state provider without requiring user action.
+            let defaultType = providerTypes.find(function(t) { return t.id === "InternalStateConfigNode"; }) || providerTypes[0];
+            let nodeDef     = RED.nodes.getType(defaultType.id);
+            if (nodeDef) {
+                // _def and _users MUST be set explicitly when creating a node programmatically:
+                // - _def:   RED.nodes.add() triggers updateConfigNodeUsers() which accesses
+                //           n._def.defaults. Without it: "can't access property '_', e._def is undefined".
+                // - _users: When the outer config node is saved, Node-RED updates the referenced
+                //           config node's user list. Without it: "can't access property 'indexOf',
+                //           t.users is undefined".
+                let newNode = { id: RED.nodes.id(), type: defaultType.id, _def: nodeDef, _users: [], users: [] };
+                let defs = nodeDef.defaults || {};
+                for (let key in defs) {
+                    if (defs[key].value !== undefined) { newNode[key] = defs[key].value; }
+                }
+                newNode.name = (node.name || node.type) + _stateNameSuffix;
+                // Pre-select the type immediately; nodes:add handler will set the ref ID.
+                typeSelector.val(defaultType.id);
+                updateConfigureBtn();
+                RED.nodes.add(newNode);
+            }
+        }
+    });
+</script>
+
+<script type="text/javascript" template-section="onIncludeEditSave">
+    var _stateSection        = $("#state-config-section");
+    var _stateNodeAddHandler = _stateSection.data('stateNodeAddHandler');
+    if (_stateNodeAddHandler) {
+        RED.events.off('nodes:add', _stateNodeAddHandler);
+        _stateSection.data('stateNodeAddHandler', null);
+    }
+    var _stateRefSelector = _stateSection.find("#state-ref-selector");
+    node.stateReference   = _stateRefSelector.val() || '';
+    console.log("StateTemplate: save - stateReference:", node.stateReference);
+    var _stateOriginalRef = _stateRefSelector.data('originalRef') || '';
+    if (_stateOriginalRef && _stateOriginalRef !== node.stateReference) {
+        var _stateOldNode = RED.nodes.node(_stateOriginalRef);
+        if (_stateOldNode) {
+            RED.nodes.remove(_stateOldNode);
+            RED.nodes.dirty(true);
+        }
+    }
+</script>
+
+<script type="text/javascript" template-section="onIncludeEditCancel">
+    var _stateSection        = $("#state-config-section");
+    var _stateNodeAddHandler = _stateSection.data('stateNodeAddHandler');
+    if (_stateNodeAddHandler) {
+        RED.events.off('nodes:add', _stateNodeAddHandler);
+        _stateSection.data('stateNodeAddHandler', null);
+    }
+    var _stateRefSelector = _stateSection.find("#state-ref-selector");
+    var _stateCurrentRef  = _stateRefSelector.val() || '';
+    var _stateOriginalRef = _stateRefSelector.data('originalRef') || '';
+    if (_stateCurrentRef && _stateCurrentRef !== _stateOriginalRef) {
+        var _stateTempNode = RED.nodes.node(_stateCurrentRef);
+        if (_stateTempNode) {
+            RED.nodes.remove(_stateTempNode);
+            RED.nodes.dirty(true);
+        }
+    }
+</script>
+
+<script type="text/html" template-section="onIncludeEditForm">
+    <div id="state-config-section">
+        <div class="form-row editorsectionheading">
+            <i class="w-16 fa fa-exchange"></i> <span>State</span>
+        </div>
+        <div class="editorgroupborder">
+            <div class="form-row nomargin">
+                <label class="towb_editorlabel" for="state-type-selector">Provider</label>
+                <div style="width: 70%; display: inline-flex;">
+                    <select id="state-type-selector" style="flex-grow: 1; min-width: 0;">
+                    </select>
+                    <a id="state-configure-btn" class="red-ui-button disabled" style="margin-left: 10px; flex-shrink: 0;" title="Configure state provider">
+                        <i class="fa fa-pencil"></i>
+                    </a>
+                </div>
+            </div>
+            <!-- Hidden real select - populated by nodes:add handler when a new state provider is created. -->
+            <select id="state-ref-selector" style="display:none;"></select>
+        </div>
+    </div>
+</script>
+
+<script type="text/markdown" template-section="onIncludeDocumentation">
+### State
+
+: *provider* (stateconfig) : Selects the type of state backend for this node. Click the pencil icon to create or configure the provider instance.
+
+Available built-in provider: **Internal State Config Node** - stores state in memory with optional persistence across redeployments and restarts.
+
+Each node owns its state provider exclusively. Switching provider types during configuration will delete the old provider instance when the editor is saved.
+</script>

package/src/core/state/template/StateTemplate.ts

@@ -0,0 +1,18 @@
+import { SourceUtility } from "../../NodeGenerator";
+import { BaseNodeConfig, Template } from "../../NodeConstructor";
+import { TemplateDescription } from "../../tagging/TemplateDescriptionDecorator";
+import { DelegatedConfigReferenceNode } from "../../other/node/DelegatedConfigReferenceNode";
+import { InternalStateConfigNode } from "../node/InternalStateConfigNode";
+import { StateService } from "../service/StateService";
+
+export interface StateTemplateConfig extends BaseNodeConfig {
+    stateReference: string;
+}
+
+@TemplateDescription({
+    name: "state",
+    templateFile: SourceUtility.getSourcePath("/build/", "/src/") + "StateTemplate.html",
+    dependencies: [DelegatedConfigReferenceNode, InternalStateConfigNode, StateService],
+})
+export class StateTemplate extends Template {
+}

package/src/core/tagging/ServiceDescriptionDecorator.ts

@@ -0,0 +1,23 @@
+import { DependencyType, ServiceDescriptor } from "../NodeConstructor";
+
+export type ServiceDescriptionConfig = {
+    id: string;
+    sourceFile: string;
+    type?: string;
+    name?: string;
+    dependencies?: DependencyType[];
+}
+
+export function ServiceDescription(config: ServiceDescriptionConfig) {
+    return function(target: any) {
+        const descriptor = new ServiceDescriptor(
+            config.id,
+            config.name ?? target.name,
+            config.type ?? "services-plugin",
+            config.sourceFile,
+            target,
+            config.dependencies
+        );
+        target.getServiceDescriptor = (): ServiceDescriptor => descriptor;
+    };
+}

package/src/core/tagging/TemplateDescriptionDecorator.ts

@@ -0,0 +1,19 @@
+import { DependencyType, TemplateDescriptor } from "../NodeConstructor";
+
+export type TemplateDescriptionConfig = {
+    name: string;
+    templateFile: string;
+    dependencies?: DependencyType[];
+}
+
+export function TemplateDescription(config: TemplateDescriptionConfig) {
+    return function(target: any) {
+        const descriptor = new TemplateDescriptor(
+            config.name,
+            target,
+            config.templateFile,
+            config.dependencies ?? []
+        );
+        target.getTemplateDescriptor = (): TemplateDescriptor => descriptor;
+    };
+}

package/src/core/tagging/service/NodeTypeService.ts

@@ -1,8 +1,13 @@
 import { INodeClass } from "../../NodeGenerator";
-import { BaseService, ConfigNode, FlowDeployment, ServiceDescriptor } from "../../NodeConstructor";
+import { BaseService, ConfigNode, FlowDeployment } from "../../NodeConstructor";
+import { ServiceDescription } from "../ServiceDescriptionDecorator";
 import { NodeAPI, NodeAPISettingsWithData } from "node-red";
 
 
+@ServiceDescription({
+    id: "@theotherwillembotha/nodetypeservice",
+    sourceFile: "@theotherwillembotha/node-red-plugincore"
+})
 export class NodeTypeService extends BaseService {
     private red!: NodeAPI<NodeAPISettingsWithData>;
     private nodeTypes:{[key:string]:INodeClass[]} = {};
@@ -54,14 +59,4 @@ export class NodeTypeService extends BaseService {
         return this.nodeTypes[tag] ? this.nodeTypes[tag] : [];
     }
 
-    static override getServiceDescriptor():ServiceDescriptor {
-        return new ServiceDescriptor(
-            "@theotherwillembotha/nodetypeservice",
-            "NodeTypeService",
-            "services-plugin",
-            "@theotherwillembotha/node-red-plugincore",
-            NodeTypeService,
-            []
-        );
-    }
 }

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

@@ -1,14 +1,10 @@
-import { Template, TemplateDescriptor } from "../../NodeConstructor"
+import { Template } from "../../NodeConstructor"
 import { SourceUtility } from "../../NodeGenerator";
+import { TemplateDescription } from "../../tagging/TemplateDescriptionDecorator";
 
+@TemplateDescription({
+    name: "script-editor",
+    templateFile: SourceUtility.getSourcePath("/build/", "/src/") + "ScriptEditorTemplate.html",
+})
 export class ScriptEditorTemplate extends Template {
-
-    public static getTemplateDescriptor(): TemplateDescriptor {
-        return new TemplateDescriptor(
-            "script-editor",
-            ScriptEditorTemplate,
-            SourceUtility.getSourcePath("/build/", "/src/") + "ScriptEditorTemplate.html",
-            []
-        );
-    }
 }

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

@@ -27,7 +27,7 @@
     overflow: hidden;
 }
 
-/* Title bar — matches Node-RED's main nav bar colour */
+/* Title bar - matches Node-RED's main nav bar colour */
 .plugincore-dialog-titlebar {
     display: flex;
     align-items: center;
@@ -43,7 +43,7 @@
     font-size: 13px;
 }
 
-/* Close button — jQuery UI styling as used in Node-RED dialogs */
+/* Close button - jQuery UI styling as used in Node-RED dialogs */
 .plugincore-dialog-close {
     color: #ccc !important;
     background: transparent !important;
@@ -56,9 +56,9 @@
     border-color: rgba(255, 255, 255, 0.3) !important;
 }
 
-/* Scrollable body that contains the jQuery UI tab widget */
+/* Scrollable body that contains the jQuery UI tab widget or plain content */
 .plugincore-dialog-body {
-    flex: 1;
+    flex: 1 1 auto;
     overflow: auto;
     padding: 10px;
 }
@@ -148,15 +148,45 @@
         return $table;
     };
 
+    /**
+     * PluginCore.tabs(tabs) → jQuery element
+     *
+     * tabs: [{ label: string, render($container) }]
+     *
+     * Builds and returns a jQuery UI tab widget element.
+     * Can be embedded in any container, including inside PluginCore.dialog render().
+     */
+    PluginCore.tabs = function(tabs) {
+        var uid     = 'plugincore-tabs-' + Date.now();
+        var $tabsEl = $('<div>').attr('id', uid);
+        var $ul     = $('<ul>');
+
+        (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);
+        $tabsEl.tabs();
+
+        return $tabsEl;
+    };
+
     /**
      * PluginCore.dialog(options) → { close() }
      *
      * options: {
-     *   title : string,
-     *   tabs  : [{ label: string, render($container) }]
+     *   title  : string,
+     *   render : function($container)              - simple dialog; body passed directly
+     *   tabs   : [{ label: string, render($c) }]  - tabbed dialog; delegates to PluginCore.tabs
      * }
      *
-     * Uses jQuery UI tabs for the tab widget (already bundled with Node-RED).
+     * render and tabs can coexist: render is called first, then the tab widget is appended.
      * Closes on: close button click, overlay click, or Escape key.
      */
     PluginCore.dialog = function(options) {
@@ -179,32 +209,17 @@
         );
         $titlebar.append($closeBtn);
 
-        // ── Body + jQuery UI tabs ──────────────────────────────────────────
-        var $body   = $('<div class="plugincore-dialog-body">');
-        var $tabsEl = $('<div>').attr('id', uid + '-tabs');
-        var $ul     = $('<ul>');
+        // ── Body ──────────────────────────────────────────────────────────
+        var $body = $('<div class="plugincore-dialog-body">');
 
-        (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);
+        if (options.render) { options.render($body); }
+        if (options.tabs)   { $body.append(PluginCore.tabs(options.tabs)); }
 
         // ── 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;
 

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

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