@aaqu/fromcubes-portal-react 0.1.0-alpha.7 → 0.1.0-alpha.8

package/nodes/portal-react.html

@@ -26,7 +26,10 @@
     // Idempotent — safe to call multiple times, only runs setup once.
     function ensureJsxSetup() {
       if (jsxSetupDone) {
-        console.log(PREFIX, "ensureJsxSetup: already done, re-applying compiler+diag only");
+        console.log(
+          PREFIX,
+          "ensureJsxSetup: already done, re-applying compiler+diag only",
+        );
         // Always re-apply compiler/diag in case Node-RED reset them
         applyCompilerAndDiag();
         return;
@@ -36,8 +39,16 @@
       var jsDef = monaco.typescript.javascriptDefaults;
 
       // Log initial state
-      console.log(PREFIX, "INITIAL compilerOptions:", JSON.stringify(jsDef.getCompilerOptions()));
-      console.log(PREFIX, "INITIAL diagnosticsOptions:", JSON.stringify(jsDef.getDiagnosticsOptions()));
+      console.log(
+        PREFIX,
+        "INITIAL compilerOptions:",
+        JSON.stringify(jsDef.getCompilerOptions()),
+      );
+      console.log(
+        PREFIX,
+        "INITIAL diagnosticsOptions:",
+        JSON.stringify(jsDef.getDiagnosticsOptions()),
+      );
 
       applyCompilerAndDiag();
 
@@ -134,7 +145,17 @@
               });
             }
           }
-          console.log(PREFIX, "TW completion: ctx=" + (isClassName ? "className" : "string") + " word='" + word + "', matched=" + suggestions.length + "/" + classes.length);
+          console.log(
+            PREFIX,
+            "TW completion: ctx=" +
+              (isClassName ? "className" : "string") +
+              " word='" +
+              word +
+              "', matched=" +
+              suggestions.length +
+              "/" +
+              classes.length,
+          );
           return { suggestions: suggestions };
         },
       });
@@ -142,19 +163,82 @@
       // JSX/HTML tag completion — type tag name, Tab → <tag>|</tag>
       console.log(PREFIX, "registering JSX tag completion provider");
       var HTML_TAGS = [
-        "div","span","p","a","button","input","img","form","label",
-        "h1","h2","h3","h4","h5","h6",
-        "ul","ol","li","dl","dt","dd",
-        "table","thead","tbody","tfoot","tr","th","td",
-        "section","article","aside","header","footer","nav","main",
-        "strong","em","b","i","u","s","small","mark","code","pre","blockquote",
-        "br","hr","wbr",
-        "select","option","optgroup","textarea",
-        "fieldset","legend","details","summary","dialog",
-        "canvas","video","audio","source","picture","figure","figcaption",
-        "svg","path","circle","rect","line","g","defs","use","text",
+        "div",
+        "span",
+        "p",
+        "a",
+        "button",
+        "input",
+        "img",
+        "form",
+        "label",
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "ul",
+        "ol",
+        "li",
+        "dl",
+        "dt",
+        "dd",
+        "table",
+        "thead",
+        "tbody",
+        "tfoot",
+        "tr",
+        "th",
+        "td",
+        "section",
+        "article",
+        "aside",
+        "header",
+        "footer",
+        "nav",
+        "main",
+        "strong",
+        "em",
+        "b",
+        "i",
+        "u",
+        "s",
+        "small",
+        "mark",
+        "code",
+        "pre",
+        "blockquote",
+        "br",
+        "hr",
+        "wbr",
+        "select",
+        "option",
+        "optgroup",
+        "textarea",
+        "fieldset",
+        "legend",
+        "details",
+        "summary",
+        "dialog",
+        "canvas",
+        "video",
+        "audio",
+        "source",
+        "picture",
+        "figure",
+        "figcaption",
+        "svg",
+        "path",
+        "circle",
+        "rect",
+        "line",
+        "g",
+        "defs",
+        "use",
+        "text",
       ];
-      var VOID_TAGS = new Set(["br","hr","img","input","wbr","source"]);
+      var VOID_TAGS = new Set(["br", "hr", "img", "input", "wbr", "source"]);
 
       monaco.languages.registerCompletionItemProvider("javascript", {
         triggerCharacters: ["<"],
@@ -165,12 +249,15 @@
           // After "<" — suggest tags
           var afterBracket = before.match(/<([a-zA-Z]*)$/);
           // Bare word at line start or after whitespace/{ — Emmet-like (lower or upper)
-          var bareWord = !afterBracket && before.match(/(?:^|[\s{(,])([a-zA-Z][a-zA-Z0-9]*)$/);
+          var bareWord =
+            !afterBracket &&
+            before.match(/(?:^|[\s{(,])([a-zA-Z][a-zA-Z0-9]*)$/);
 
           if (!afterBracket && !bareWord) return { suggestions: [] };
 
           var typed = (afterBracket ? afterBracket[1] : bareWord[1]) || "";
-          var replaceStart = position.column - typed.length - (afterBracket ? 1 : 0);
+          var replaceStart =
+            position.column - typed.length - (afterBracket ? 1 : 0);
 
           var range = {
             startLineNumber: position.lineNumber,
@@ -192,7 +279,8 @@
                 label: tag,
                 kind: monaco.languages.CompletionItemKind.Property,
                 insertText: "<" + tag + " $0/>",
-                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                insertTextRules:
+                  monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                 range: range,
                 detail: "<" + tag + " />",
                 sortText: "0" + tag,
@@ -202,7 +290,8 @@
                 label: tag,
                 kind: monaco.languages.CompletionItemKind.Property,
                 insertText: "<" + tag + ">$0</" + tag + ">",
-                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                insertTextRules:
+                  monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                 range: range,
                 detail: "<" + tag + ">…</" + tag + ">",
                 sortText: "0" + tag + "a",
@@ -211,7 +300,8 @@
                 label: tag,
                 kind: monaco.languages.CompletionItemKind.Property,
                 insertText: "<" + tag + " $0/>",
-                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                insertTextRules:
+                  monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                 range: range,
                 detail: "<" + tag + " />",
                 sortText: "0" + tag + "b",
@@ -220,9 +310,15 @@
           }
 
           // Custom components from registry (PascalCase)
-          var upperMatch = afterBracket && before.match(/<([A-Z][a-zA-Z0-9]*)$/);
-          var bareUpper = !afterBracket && before.match(/(?:^|[\s{(,])([A-Z][a-zA-Z0-9]*)$/);
-          var compTyped = upperMatch ? upperMatch[1] : (bareUpper ? bareUpper[1] : "");
+          var upperMatch =
+            afterBracket && before.match(/<([A-Z][a-zA-Z0-9]*)$/);
+          var bareUpper =
+            !afterBracket && before.match(/(?:^|[\s{(,])([A-Z][a-zA-Z0-9]*)$/);
+          var compTyped = upperMatch
+            ? upperMatch[1]
+            : bareUpper
+              ? bareUpper[1]
+              : "";
 
           if (compTyped || (!typed && afterBracket)) {
             // Fetch component names from registry (cached on window)
@@ -231,13 +327,19 @@
               var name = reg[c];
               if (seen.has(name)) continue;
               if (compTyped && name.indexOf(compTyped) !== 0) continue;
-              if (!compTyped && typed && name.toLowerCase().indexOf(typed) !== 0) continue;
+              if (
+                !compTyped &&
+                typed &&
+                name.toLowerCase().indexOf(typed) !== 0
+              )
+                continue;
               seen.add(name);
               suggestions.push({
                 label: name,
                 kind: monaco.languages.CompletionItemKind.Class,
                 insertText: "<" + name + ">$0</" + name + ">",
-                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                insertTextRules:
+                  monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                 range: range,
                 detail: "<" + name + ">…</" + name + ">",
                 sortText: "0" + name + "a",
@@ -246,7 +348,8 @@
                 label: name,
                 kind: monaco.languages.CompletionItemKind.Class,
                 insertText: "<" + name + " $0/>",
-                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                insertTextRules:
+                  monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                 range: range,
                 detail: "<" + name + " />",
                 sortText: "0" + name + "b",
@@ -258,7 +361,8 @@
                 label: compTyped,
                 kind: monaco.languages.CompletionItemKind.Class,
                 insertText: "<" + compTyped + ">$0</" + compTyped + ">",
-                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                insertTextRules:
+                  monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                 range: range,
                 detail: "<" + compTyped + ">…</" + compTyped + ">",
                 sortText: "0" + compTyped + "a",
@@ -267,7 +371,8 @@
                 label: compTyped,
                 kind: monaco.languages.CompletionItemKind.Class,
                 insertText: "<" + compTyped + " $0/>",
-                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                insertTextRules:
+                  monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                 range: range,
                 detail: "<" + compTyped + " />",
                 sortText: "0" + compTyped + "b",
@@ -275,7 +380,13 @@
             }
           }
 
-          console.log(PREFIX, "JSX tag completion: typed='" + typed + "', suggestions=" + suggestions.length);
+          console.log(
+            PREFIX,
+            "JSX tag completion: typed='" +
+              typed +
+              "', suggestions=" +
+              suggestions.length,
+          );
           return { suggestions: suggestions };
         },
       });
@@ -296,12 +407,14 @@
           var m = line.match(/^(.*)<([a-zA-Z][a-zA-Z0-9]*)>\/<\/\2>(.*)$/);
           var matchStr, tag, prefix;
           if (m) {
-            prefix = m[1]; tag = m[2];
+            prefix = m[1];
+            tag = m[2];
             matchStr = "<" + tag + ">/</" + tag + ">";
           } else {
             m = line.match(/^(.*)<([a-zA-Z][a-zA-Z0-9]*)\/><\/\2>(.*)$/);
             if (!m) return;
-            prefix = m[1]; tag = m[2];
+            prefix = m[1];
+            tag = m[2];
             matchStr = "<" + tag + "/></" + tag + ">";
           }
           var startCol = prefix.length + 1;
@@ -309,15 +422,17 @@
           var replacement = "<" + tag + " />";
           var cursorCol = startCol + replacement.length - 2;
           setTimeout(function () {
-            editor.executeEdits("self-close-collapse", [{
-              range: {
-                startLineNumber: lineNum,
-                endLineNumber: lineNum,
-                startColumn: startCol,
-                endColumn: endCol,
+            editor.executeEdits("self-close-collapse", [
+              {
+                range: {
+                  startLineNumber: lineNum,
+                  endLineNumber: lineNum,
+                  startColumn: startCol,
+                  endColumn: endCol,
+                },
+                text: replacement,
               },
-              text: replacement,
-            }]);
+            ]);
             editor.setPosition({ lineNumber: lineNum, column: cursorCol });
           }, 0);
         });
@@ -328,7 +443,11 @@
       function refreshComponentNames() {
         $.getJSON("portal-react/registry", function (reg) {
           window.__fcComponentNames = Object.keys(reg);
-          console.log(PREFIX, "component names loaded:", window.__fcComponentNames);
+          console.log(
+            PREFIX,
+            "component names loaded:",
+            window.__fcComponentNames,
+          );
         }).fail(function () {
           window.__fcComponentNames = [];
         });
@@ -343,11 +462,19 @@
             console.group(PREFIX + " MARKERS on " + uri.toString());
             markers.forEach(function (m) {
               console.log(
-                "  code=" + (m.code || "?") +
-                " severity=" + m.severity +
-                " source=" + (m.source || "?") +
-                " msg=" + m.message +
-                " [L" + m.startLineNumber + ":" + m.startColumn + "]"
+                "  code=" +
+                  (m.code || "?") +
+                  " severity=" +
+                  m.severity +
+                  " source=" +
+                  (m.source || "?") +
+                  " msg=" +
+                  m.message +
+                  " [L" +
+                  m.startLineNumber +
+                  ":" +
+                  m.startColumn +
+                  "]",
               );
             });
             console.groupEnd();
@@ -379,8 +506,16 @@
       console.log(PREFIX, "setDiagnosticsOptions:", JSON.stringify(diagOpts));
       jsDef.setDiagnosticsOptions(diagOpts);
 
-      console.log(PREFIX, "readback compilerOptions:", JSON.stringify(jsDef.getCompilerOptions()));
-      console.log(PREFIX, "readback diagnosticsOptions:", JSON.stringify(jsDef.getDiagnosticsOptions()));
+      console.log(
+        PREFIX,
+        "readback compilerOptions:",
+        JSON.stringify(jsDef.getCompilerOptions()),
+      );
+      console.log(
+        PREFIX,
+        "readback diagnosticsOptions:",
+        JSON.stringify(jsDef.getDiagnosticsOptions()),
+      );
     }
 
     // Exported for oneditprepare to call before model creation
@@ -391,7 +526,10 @@
     window.__fcLoadMonaco = function (cb) {
       console.log(PREFIX, "loadMonaco called, monaco exists:", !!window.monaco);
       if (window.monaco) {
-        console.log(PREFIX, "Monaco already loaded (by Node-RED?), running setup inline");
+        console.log(
+          PREFIX,
+          "Monaco already loaded (by Node-RED?), running setup inline",
+        );
         ensureJsxSetup();
         cb();
         return;
@@ -510,22 +648,32 @@
         if (!window.__fcTwClasses) {
           console.log("[FC-Monaco] loading tw-classes...");
           $.getJSON("portal-react/tw-classes", function (classes) {
-            console.log("[FC-Monaco] tw-classes loaded, count=" + classes.length);
+            console.log(
+              "[FC-Monaco] tw-classes loaded, count=" + classes.length,
+            );
             window.__fcTwClasses = classes;
           }).fail(function (xhr) {
-            console.error("[FC-Monaco] tw-classes FAILED:", xhr.status, xhr.statusText);
+            console.error(
+              "[FC-Monaco] tw-classes FAILED:",
+              xhr.status,
+              xhr.statusText,
+            );
           });
         }
 
         window.__fcLoadMonaco(function (failed) {
           if (failed) {
-            console.error("[FC-Monaco] COMP: Monaco load failed, using fallback textarea");
+            console.error(
+              "[FC-Monaco] COMP: Monaco load failed, using fallback textarea",
+            );
             $("#fcc-monaco").hide();
             $("#fcc-fallback").show().val(code);
             return;
           }
 
-          console.log("[FC-Monaco] COMP: applying JSX defaults before model creation");
+          console.log(
+            "[FC-Monaco] COMP: applying JSX defaults before model creation",
+          );
           window.__fcApplyJsxDefaults();
 
           var compUri = monaco.Uri.parse("file:///fc-comp-" + node.id + ".jsx");
@@ -535,8 +683,15 @@
             console.log("[FC-Monaco] COMP: disposing existing model");
             existingModel.dispose();
           }
-          var compModel = monaco.editor.createModel(code, "javascript", compUri);
-          console.log("[FC-Monaco] COMP: model created, language=" + compModel.getLanguageId());
+          var compModel = monaco.editor.createModel(
+            code,
+            "javascript",
+            compUri,
+          );
+          console.log(
+            "[FC-Monaco] COMP: model created, language=" +
+              compModel.getLanguageId(),
+          );
 
           compEditorInstance = monaco.editor.create(
             document.getElementById("fcc-monaco"),
@@ -547,13 +702,27 @@
           // Log markers after a short delay (diagnostics are async)
           setTimeout(function () {
             var markers = monaco.editor.getModelMarkers({ resource: compUri });
-            console.log("[FC-Monaco] COMP: markers after 500ms, count=" + markers.length);
+            console.log(
+              "[FC-Monaco] COMP: markers after 500ms, count=" + markers.length,
+            );
             markers.forEach(function (m) {
-              console.log("[FC-Monaco] COMP marker: code=" + m.code + " msg=" + m.message);
+              console.log(
+                "[FC-Monaco] COMP marker: code=" + m.code + " msg=" + m.message,
+              );
             });
             // Also log current compiler options state
-            console.log("[FC-Monaco] COMP: current compilerOptions:", JSON.stringify(monaco.typescript.javascriptDefaults.getCompilerOptions()));
-            console.log("[FC-Monaco] COMP: current diagnosticsOptions:", JSON.stringify(monaco.typescript.javascriptDefaults.getDiagnosticsOptions()));
+            console.log(
+              "[FC-Monaco] COMP: current compilerOptions:",
+              JSON.stringify(
+                monaco.typescript.javascriptDefaults.getCompilerOptions(),
+              ),
+            );
+            console.log(
+              "[FC-Monaco] COMP: current diagnosticsOptions:",
+              JSON.stringify(
+                monaco.typescript.javascriptDefaults.getDiagnosticsOptions(),
+              ),
+            );
           }, 500);
         });
       },
@@ -641,7 +810,7 @@
         <label for="node-input-endpoint"
           ><i class="fa fa-globe"></i> Endpoint</label
         >
-        <input type="text" id="node-input-endpoint" placeholder="/portal" />
+        <input type="text" id="node-input-endpoint" placeholder="/fromcubes" />
         <div
           style="font-size:11px;opacity:.5;margin-top:2px;margin-left:105px;"
           id="fc-url-hint"
@@ -653,6 +822,29 @@
         >
         <input type="text" id="node-input-pageTitle" placeholder="Portal" />
       </div>
+      <div class="form-row node-input-libs-container-row">
+        <label style="width:auto;"><i class="fa fa-archive"></i> Modules</label>
+        <ol id="node-input-libs-container"></ol>
+        <div
+          style="font-size:11px;opacity:.5;margin-top:4px;margin-left:4px;"
+        >
+          npm packages to bundle. Node-RED auto-installs them at deploy time.
+        </div>
+      </div>
+      <div class="form-row" style="margin-top:12px;">
+        <label style="width:auto;">
+          <input
+            type="checkbox"
+            id="node-input-showWsStatus"
+            style="width:auto;margin:0 8px 0 0;vertical-align:middle;"
+          />
+          Show WebSocket status indicator
+        </label>
+        <div style="font-size:11px;opacity:.5;margin-top:4px;margin-left:4px;">
+          Displays a small <em>fromcubes</em> badge in the bottom-right corner
+          showing connection state.
+        </div>
+      </div>
     </div>
 
     <!-- ── Tab: JSX ── -->
@@ -725,14 +917,17 @@
       </div>
       <div class="form-row" style="padding-left:4px;">
         <div style="font-size:11px;opacity:.6;line-height:1.5;">
-          Read <code>X-Portal-*</code> headers set by Nginx proxy and expose user data
-          via <code>useNodeRed()</code>.<br><br>
-          When enabled:<br>
-          &bull; <code>useNodeRed()</code> returns <code>{ data, send, user }</code> where
-          <code>user</code> contains <code>userId</code>, <code>userName</code>,
-          <code>username</code>, <code>email</code>, <code>role</code>, <code>groups</code><br>
-          &bull; Messages from WebSocket include <code>msg._client</code> with user data<br><br>
-          Requires <code>@aaqu/node-red-dashboard-2-portal-auth</code> Nginx setup.
+          Read <code>X-Portal-*</code> headers set by Nginx proxy and expose
+          user data via <code>useNodeRed()</code>.<br /><br />
+          When enabled:<br />
+          &bull; <code>useNodeRed()</code> returns
+          <code>{ data, send, user }</code> where <code>user</code> contains
+          <code>userId</code>, <code>userName</code>, <code>username</code>,
+          <code>email</code>, <code>role</code>, <code>groups</code><br />
+          &bull; Messages from WebSocket include <code>msg._client</code> with
+          user data<br /><br />
+          Requires Nginx (or similar reverse proxy) to set
+          <code>X-Portal-*</code> headers.
         </div>
       </div>
     </div>
@@ -759,7 +954,7 @@
       "",
       "  return (",
       '    <div className="min-h-screen bg-zinc-950 p-8">',
-      '      <h1 className="text-2xl font-light text-cyan-400 mb-6">Portal</h1>',
+      '      <h1 className="text-2xl font-light text-cyan-400 mb-6">fromcubes</h1>',
       '      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">',
       '        <StatusCard label="Value" value={d.value ?? "—"} unit="" />',
       "      </div>",
@@ -779,11 +974,13 @@
       color: "#61dafb",
       defaults: {
         name: { value: "" },
-        endpoint: { value: "/portal", required: true },
-        pageTitle: { value: "Portal" },
+        endpoint: { value: "/fromcubes", required: true },
+        pageTitle: { value: "fromcubes" },
         componentCode: { value: STARTER },
         customHead: { value: "" },
         portalAuth: { value: false },
+        showWsStatus: { value: false },
+        libs: { value: [] },
       },
       inputs: 1,
       outputs: 1,
@@ -802,10 +999,16 @@
         if (!window.__fcTwClasses) {
           console.log("[FC-Monaco] loading tw-classes...");
           $.getJSON("portal-react/tw-classes", function (classes) {
-            console.log("[FC-Monaco] tw-classes loaded, count=" + classes.length);
+            console.log(
+              "[FC-Monaco] tw-classes loaded, count=" + classes.length,
+            );
             window.__fcTwClasses = classes;
           }).fail(function (xhr) {
-            console.error("[FC-Monaco] tw-classes FAILED:", xhr.status, xhr.statusText);
+            console.error(
+              "[FC-Monaco] tw-classes FAILED:",
+              xhr.status,
+              xhr.statusText,
+            );
           });
         }
 
@@ -829,16 +1032,38 @@
 
         // URL hint
         function updateHint() {
-          var ep = $("#node-input-endpoint").val() || "/portal";
+          var ep = $("#node-input-endpoint").val() || "/fromcubes";
           $("#fc-url-hint").text("Page served at: http://<host>:1880" + ep);
         }
         $("#node-input-endpoint").on("input", updateHint);
         updateHint();
 
+        // Modules editableList (like function node's libs)
+        var libsList = node.libs || [];
+        $("#node-input-libs-container").css("min-height","68px").editableList({
+          addItem: function(container, i, opt) {
+            var lib = opt || {};
+            var row = $('<div/>',{style:"display:flex;gap:8px;align-items:center;"}).appendTo(container);
+            var modInput = $('<input/>',{type:"text",placeholder:"e.g. chart.js/auto@^4.4.0",style:"flex:1;"}).appendTo(row);
+            var varInput = $('<input/>',{type:"text",placeholder:"Import as (e.g. Chart)",style:"width:140px;"}).appendTo(row);
+            modInput.val(lib.module || "");
+            varInput.val(lib.var || "");
+            container.data("mod", modInput);
+            container.data("var", varInput);
+          },
+          removable: true,
+          sortable: true
+        });
+        libsList.forEach(function(lib) {
+          $("#node-input-libs-container").editableList("addItem", lib);
+        });
+
         // Monaco
         window.__fcLoadMonaco(function (failed) {
           if (failed) {
-            console.error("[FC-Monaco] PORTAL: Monaco load failed, using fallback textarea");
+            console.error(
+              "[FC-Monaco] PORTAL: Monaco load failed, using fallback textarea",
+            );
             $("#fc-monaco").hide();
             $("#fc-fallback").show().val(code);
             $("#fc-head-monaco").hide();
@@ -846,11 +1071,15 @@
             return;
           }
 
-          console.log("[FC-Monaco] PORTAL: applying JSX defaults before model creation");
+          console.log(
+            "[FC-Monaco] PORTAL: applying JSX defaults before model creation",
+          );
           window.__fcApplyJsxDefaults();
           var opts = window.__fcEditorOpts;
 
-          var jsxUri = monaco.Uri.parse("file:///fc-portal-" + node.id + ".jsx");
+          var jsxUri = monaco.Uri.parse(
+            "file:///fc-portal-" + node.id + ".jsx",
+          );
           console.log("[FC-Monaco] PORTAL: JSX model URI=" + jsxUri.toString());
           var existingJsx = monaco.editor.getModel(jsxUri);
           if (existingJsx) {
@@ -858,15 +1087,21 @@
             existingJsx.dispose();
           }
           var jsxModel = monaco.editor.createModel(code, "javascript", jsxUri);
-          console.log("[FC-Monaco] PORTAL: JSX model created, language=" + jsxModel.getLanguageId());
+          console.log(
+            "[FC-Monaco] PORTAL: JSX model created, language=" +
+              jsxModel.getLanguageId(),
+          );
           editorInstance = monaco.editor.create(
             document.getElementById("fc-monaco"),
             Object.assign({ model: jsxModel }, opts),
           );
           console.log("[FC-Monaco] PORTAL: JSX editor created");
-          if (window.__fcAttachSelfClose) window.__fcAttachSelfClose(editorInstance);
+          if (window.__fcAttachSelfClose)
+            window.__fcAttachSelfClose(editorInstance);
 
-          var headUri = monaco.Uri.parse("file:///fc-head-" + node.id + ".html");
+          var headUri = monaco.Uri.parse(
+            "file:///fc-head-" + node.id + ".html",
+          );
           var existingHead = monaco.editor.getModel(headUri);
           if (existingHead) existingHead.dispose();
           var headModel = monaco.editor.createModel(headCode, "html", headUri);
@@ -879,12 +1114,32 @@
           // Log markers after a short delay (diagnostics are async)
           setTimeout(function () {
             var markers = monaco.editor.getModelMarkers({ resource: jsxUri });
-            console.log("[FC-Monaco] PORTAL: markers after 500ms, count=" + markers.length);
+            console.log(
+              "[FC-Monaco] PORTAL: markers after 500ms, count=" +
+                markers.length,
+            );
             markers.forEach(function (m) {
-              console.log("[FC-Monaco] PORTAL marker: code=" + m.code + " severity=" + m.severity + " msg=" + m.message);
+              console.log(
+                "[FC-Monaco] PORTAL marker: code=" +
+                  m.code +
+                  " severity=" +
+                  m.severity +
+                  " msg=" +
+                  m.message,
+              );
             });
-            console.log("[FC-Monaco] PORTAL: current compilerOptions:", JSON.stringify(monaco.typescript.javascriptDefaults.getCompilerOptions()));
-            console.log("[FC-Monaco] PORTAL: current diagnosticsOptions:", JSON.stringify(monaco.typescript.javascriptDefaults.getDiagnosticsOptions()));
+            console.log(
+              "[FC-Monaco] PORTAL: current compilerOptions:",
+              JSON.stringify(
+                monaco.typescript.javascriptDefaults.getCompilerOptions(),
+              ),
+            );
+            console.log(
+              "[FC-Monaco] PORTAL: current diagnosticsOptions:",
+              JSON.stringify(
+                monaco.typescript.javascriptDefaults.getDiagnosticsOptions(),
+              ),
+            );
           }, 500);
         });
 
@@ -958,6 +1213,19 @@
 
       oneditsave: function () {
         console.log("[FC-Monaco] PORTAL oneditsave");
+
+        // Collect libs from editableList
+        var libs = [];
+        var items = $("#node-input-libs-container").editableList("items");
+        items.each(function() {
+          var mod = $(this).data("mod").val().trim();
+          var v = $(this).data("var").val().trim();
+          if (mod) {
+            libs.push({ module: mod, var: v });
+          }
+        });
+        this.libs = libs;
+
         var code = editorInstance
           ? editorInstance.getValue()
           : $("#fc-fallback").val();
@@ -1078,12 +1346,13 @@ const { data, send } = useNodeRed();
   <h3>Portal Auth</h3>
   <p>
     When enabled in the Auth tab, reads <code>X-Portal-*</code> headers set by
-    an Nginx proxy (via <code>@aaqu/node-red-dashboard-2-portal-auth</code>) and
-    exposes user data:
+    a reverse proxy (e.g. Nginx) and exposes user data:
   </p>
   <ul>
     <li><code>useNodeRed()</code> returns <code>{ data, send, user }</code></li>
-    <li>Messages from WebSocket include <code>msg._client</code> with user info</li>
+    <li>
+      Messages from WebSocket include <code>msg._client</code> with user info
+    </li>
   </ul>
 
   <h3>Custom Head HTML</h3>