@aaqu/fromcubes-portal-react 0.1.0-alpha.1

package/nodes/portal-react.html

@@ -0,0 +1,1059 @@
+<!-- ============================================================
+     Shared: Monaco loader (used by both node editors)
+     ============================================================ -->
+<script type="text/javascript">
+  (function () {
+    var PREFIX = "[FC-Monaco]";
+
+    // Shared editor options — used by both component and portal-react editors
+    window.__fcEditorOpts = {
+      theme: "vs-dark",
+      minimap: { enabled: false },
+      fontSize: 13,
+      fontFamily: "'Cascadia Code','Fira Code',Consolas,monospace",
+      fontLigatures: true,
+      scrollBeyondLastLine: false,
+      automaticLayout: true,
+      tabSize: 2,
+      padding: { top: 8, bottom: 8 },
+      quickSuggestions: { strings: true },
+    };
+
+    window.__fcTwClasses = null;
+    var jsxSetupDone = false;
+
+    // One-time Monaco setup: compiler opts, diagnostics, extra libs, completion provider.
+    // 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");
+        // Always re-apply compiler/diag in case Node-RED reset them
+        applyCompilerAndDiag();
+        return;
+      }
+      jsxSetupDone = true;
+
+      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()));
+
+      applyCompilerAndDiag();
+
+      // Global type stubs
+      var libContent = [
+        "declare var React: any;",
+        "declare var ReactDOM: any;",
+        "declare function useNodeRed(): { data: any; send: (payload: any, topic?: string) => void };",
+      ].join("\n");
+      console.log(PREFIX, "addExtraLib globals.d.ts");
+      jsDef.addExtraLib(libContent, "file:///globals.d.ts");
+
+      // Tailwind className completion provider
+      // Triggers in: className="...", className={`...`}, and any string literal
+      // containing at least one known TW class (e.g. "bg-red-500 text-white")
+      console.log(PREFIX, "registering Tailwind completion provider");
+      monaco.languages.registerCompletionItemProvider("javascript", {
+        triggerCharacters: ['"', "'", "`", " "],
+        provideCompletionItems: function (model, position) {
+          var line = model.getLineContent(position.lineNumber);
+          var before = line.substring(0, position.column - 1);
+
+          // 1) className="..." or className={`...`}
+          var isClassName =
+            before.match(/className\s*=\s*["'][^"']*$/) ||
+            before.match(/className\s*=\s*\{`[^`]*$/);
+
+          // 2) Any open string literal: "..., '..., or `...
+          var inString = !isClassName && before.match(/["'`][^"'`]*$/);
+
+          if (!isClassName && !inString) return { suggestions: [] };
+
+          // Extract text inside the string
+          var raw = (isClassName || inString)[0];
+          var inside;
+          if (isClassName) {
+            inside = raw.replace(/^className\s*=\s*(?:\{`|["'])/, "");
+          } else {
+            inside = raw.substring(1); // skip opening quote
+          }
+          inside = inside.replace(/\$\{[^}]*\}/g, " ");
+          var parts = inside.split(/\s+/);
+          var word = parts[parts.length - 1] || "";
+
+          // For non-className strings, only activate if at least one existing
+          // token in the string looks like a TW class (avoid noise in random strings)
+          if (!isClassName && parts.length > 0) {
+            var classes = window.__fcTwClasses || [];
+            var twSet = window.__fcTwSet;
+            if (!twSet && classes.length) {
+              twSet = new Set(classes);
+              window.__fcTwSet = twSet;
+              console.log(PREFIX, "TW: built lookup Set, size=" + twSet.size);
+            }
+            if (twSet) {
+              var hasTwToken = false;
+              for (var p = 0; p < parts.length; p++) {
+                if (parts[p] && twSet.has(parts[p])) {
+                  hasTwToken = true;
+                  break;
+                }
+              }
+              // If typing the very first word, accept if it looks like a prefix
+              if (!hasTwToken && parts.length === 1 && word.length >= 2) {
+                for (var j = 0; j < classes.length; j++) {
+                  if (classes[j].indexOf(word) === 0) {
+                    hasTwToken = true;
+                    break;
+                  }
+                }
+              }
+              if (!hasTwToken) return { suggestions: [] };
+            }
+          }
+
+          var range = {
+            startLineNumber: position.lineNumber,
+            endLineNumber: position.lineNumber,
+            startColumn: position.column - word.length,
+            endColumn: position.column,
+          };
+
+          var classes = window.__fcTwClasses || [];
+          var suggestions = [];
+          for (var i = 0; i < classes.length; i++) {
+            var cls = classes[i];
+            if (!word.length || cls.indexOf(word) === 0) {
+              suggestions.push({
+                label: cls,
+                kind: monaco.languages.CompletionItemKind.Value,
+                insertText: cls,
+                range: range,
+                sortText: cls.padStart(60, "0"),
+              });
+            }
+          }
+          console.log(PREFIX, "TW completion: ctx=" + (isClassName ? "className" : "string") + " word='" + word + "', matched=" + suggestions.length + "/" + classes.length);
+          return { suggestions: suggestions };
+        },
+      });
+
+      // 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",
+      ];
+      var VOID_TAGS = new Set(["br","hr","img","input","wbr","source"]);
+
+      monaco.languages.registerCompletionItemProvider("javascript", {
+        triggerCharacters: ["<"],
+        provideCompletionItems: function (model, position) {
+          var line = model.getLineContent(position.lineNumber);
+          var before = line.substring(0, position.column - 1);
+
+          // 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]*)$/);
+
+          if (!afterBracket && !bareWord) return { suggestions: [] };
+
+          var typed = (afterBracket ? afterBracket[1] : bareWord[1]) || "";
+          var replaceStart = position.column - typed.length - (afterBracket ? 1 : 0);
+
+          var range = {
+            startLineNumber: position.lineNumber,
+            endLineNumber: position.lineNumber,
+            startColumn: replaceStart,
+            endColumn: position.column,
+          };
+
+          var suggestions = [];
+          var seen = new Set();
+
+          // HTML tags
+          for (var i = 0; i < HTML_TAGS.length; i++) {
+            var tag = HTML_TAGS[i];
+            if (typed && tag.indexOf(typed) !== 0) continue;
+            seen.add(tag);
+            if (VOID_TAGS.has(tag)) {
+              suggestions.push({
+                label: tag,
+                kind: monaco.languages.CompletionItemKind.Property,
+                insertText: "<" + tag + " $0/>",
+                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                range: range,
+                detail: "<" + tag + " />",
+                sortText: "0" + tag,
+              });
+            } else {
+              suggestions.push({
+                label: tag,
+                kind: monaco.languages.CompletionItemKind.Property,
+                insertText: "<" + tag + ">$0</" + tag + ">",
+                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                range: range,
+                detail: "<" + tag + ">…</" + tag + ">",
+                sortText: "0" + tag + "a",
+              });
+              suggestions.push({
+                label: tag,
+                kind: monaco.languages.CompletionItemKind.Property,
+                insertText: "<" + tag + " $0/>",
+                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                range: range,
+                detail: "<" + tag + " />",
+                sortText: "0" + tag + "b",
+              });
+            }
+          }
+
+          // 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] : "");
+
+          if (compTyped || (!typed && afterBracket)) {
+            // Fetch component names from registry (cached on window)
+            var reg = window.__fcComponentNames || [];
+            for (var c = 0; c < reg.length; c++) {
+              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;
+              seen.add(name);
+              suggestions.push({
+                label: name,
+                kind: monaco.languages.CompletionItemKind.Class,
+                insertText: "<" + name + ">$0</" + name + ">",
+                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                range: range,
+                detail: "<" + name + ">…</" + name + ">",
+                sortText: "0" + name + "a",
+              });
+              suggestions.push({
+                label: name,
+                kind: monaco.languages.CompletionItemKind.Class,
+                insertText: "<" + name + " $0/>",
+                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                range: range,
+                detail: "<" + name + " />",
+                sortText: "0" + name + "b",
+              });
+            }
+            // Any PascalCase word not in registry — offer generic JSX wrap
+            if (compTyped && !seen.has(compTyped)) {
+              suggestions.push({
+                label: compTyped,
+                kind: monaco.languages.CompletionItemKind.Class,
+                insertText: "<" + compTyped + ">$0</" + compTyped + ">",
+                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                range: range,
+                detail: "<" + compTyped + ">…</" + compTyped + ">",
+                sortText: "0" + compTyped + "a",
+              });
+              suggestions.push({
+                label: compTyped,
+                kind: monaco.languages.CompletionItemKind.Class,
+                insertText: "<" + compTyped + " $0/>",
+                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                range: range,
+                detail: "<" + compTyped + " />",
+                sortText: "0" + compTyped + "b",
+              });
+            }
+          }
+
+          console.log(PREFIX, "JSX tag completion: typed='" + typed + "', suggestions=" + suggestions.length);
+          return { suggestions: suggestions };
+        },
+      });
+
+      // Collapse <tag>|</tag> → <tag /> when "/" typed inside empty tag pair
+      console.log(PREFIX, "registering JSX self-close collapse handler");
+      window.__fcAttachSelfClose = function (editor) {
+        editor.onDidChangeModelContent(function (e) {
+          if (e.changes.length !== 1) return;
+          var ch = e.changes[0];
+          if (ch.text !== "/") return;
+          var model = editor.getModel();
+          if (!model) return;
+          var lineNum = ch.range.startLineNumber;
+          var line = model.getLineContent(lineNum);
+          // Pattern 1: <tag>/</tag>  (cursor was between > and </)
+          // Pattern 2: <tag/></tag>  (cursor was before > in opening tag)
+          var m = line.match(/^(.*)<([a-zA-Z][a-zA-Z0-9]*)>\/<\/\2>(.*)$/);
+          var matchStr, tag, prefix;
+          if (m) {
+            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];
+            matchStr = "<" + tag + "/></" + tag + ">";
+          }
+          var startCol = prefix.length + 1;
+          var endCol = startCol + matchStr.length;
+          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,
+              },
+              text: replacement,
+            }]);
+            editor.setPosition({ lineNumber: lineNum, column: cursorCol });
+          }, 0);
+        });
+        console.log(PREFIX, "self-close collapse attached to editor");
+      };
+
+      // Fetch component names for tag completion
+      function refreshComponentNames() {
+        $.getJSON("portal-react/registry", function (reg) {
+          window.__fcComponentNames = Object.keys(reg);
+          console.log(PREFIX, "component names loaded:", window.__fcComponentNames);
+        }).fail(function () {
+          window.__fcComponentNames = [];
+        });
+      }
+      refreshComponentNames();
+
+      // Marker listener for debugging
+      monaco.editor.onDidChangeMarkers(function (uris) {
+        uris.forEach(function (uri) {
+          var markers = monaco.editor.getModelMarkers({ resource: uri });
+          if (markers.length > 0) {
+            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 + "]"
+              );
+            });
+            console.groupEnd();
+          }
+        });
+      });
+
+      console.log(PREFIX, "one-time setup complete");
+    }
+
+    function applyCompilerAndDiag() {
+      var jsDef = monaco.typescript.javascriptDefaults;
+      var compilerOpts = {
+        jsx: monaco.typescript.JsxEmit.React,
+        target: monaco.typescript.ScriptTarget.ESNext,
+        module: monaco.typescript.ModuleKind.ESNext,
+        allowNonTsExtensions: true,
+        allowJs: true,
+      };
+      console.log(PREFIX, "setCompilerOptions:", JSON.stringify(compilerOpts));
+      jsDef.setCompilerOptions(compilerOpts);
+
+      var diagOpts = {
+        noSemanticValidation: true,
+        noSyntaxValidation: false,
+        noSuggestionDiagnostics: true,
+        diagnosticCodesToIgnore: [17004],
+      };
+      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()));
+    }
+
+    // Exported for oneditprepare to call before model creation
+    window.__fcApplyJsxDefaults = function () {
+      ensureJsxSetup();
+    };
+
+    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");
+        ensureJsxSetup();
+        cb();
+        return;
+      }
+      var s = document.createElement("script");
+      s.src = "portal-react/vs/loader.js";
+      s.onload = function () {
+        console.log(PREFIX, "loader.js loaded, configuring require paths");
+        require.config({ paths: { vs: "portal-react/vs" } });
+        require(["vs/editor/editor.main"], function () {
+          console.log(PREFIX, "editor.main loaded");
+          ensureJsxSetup();
+          console.log(PREFIX, "calling cb()");
+          cb();
+        });
+      };
+      s.onerror = function () {
+        console.error(PREFIX, "FAILED to load loader.js");
+        cb(true);
+      };
+      document.head.appendChild(s);
+    };
+  })();
+</script>
+
+<!-- ============================================================
+     fc-portal-component – canvas node (shared component)
+     ============================================================ -->
+<script type="text/html" data-template-name="fc-portal-component">
+  <div class="form-row">
+    <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+    <input type="text" id="node-input-name" placeholder="Label on canvas" />
+  </div>
+  <div class="form-row">
+    <label for="node-input-compName"><i class="fa fa-cube"></i> JSX Tag</label>
+    <input type="text" id="node-input-compName" placeholder="MyComponent" />
+  </div>
+  <div class="form-row" style="display:flex;gap:8px;">
+    <div style="flex:1">
+      <label><i class="fa fa-sign-in"></i> Input fields</label>
+      <input
+        type="text"
+        id="node-input-compInputs"
+        placeholder="payload,topic"
+        style="width:100%"
+      />
+    </div>
+    <div style="flex:1">
+      <label><i class="fa fa-sign-out"></i> Output fields</label>
+      <input
+        type="text"
+        id="node-input-compOutputs"
+        placeholder="payload,topic"
+        style="width:100%"
+      />
+    </div>
+  </div>
+  <div class="form-row" style="margin-bottom:4px;">
+    <label><i class="fa fa-code"></i> JSX Code</label>
+  </div>
+  <div class="form-row node-text-editor-row">
+    <div
+      id="fcc-editor-wrap"
+      style="width:100%;height:350px;border:1px solid var(--red-ui-form-input-border-color,#555);border-radius:4px;overflow:hidden;position:relative;"
+    >
+      <div id="fcc-monaco" style="width:100%;height:100%;"></div>
+      <textarea
+        id="fcc-fallback"
+        style="display:none;width:100%;height:100%;font-family:'Cascadia Code',Consolas,monospace;font-size:13px;background:#1e1e1e;color:#d4d4d4;border:none;padding:12px;resize:none;"
+      ></textarea>
+    </div>
+  </div>
+  <input type="hidden" id="node-input-compCode" />
+</script>
+
+<script type="text/javascript">
+  (function () {
+    var compEditorInstance = null;
+
+    var COMP_STARTER = [
+      "function StatusCard({ label, value, unit }) {",
+      "  return (",
+      '    <div className="rounded-2xl bg-zinc-900 border border-zinc-800 p-6">',
+      '      <div className="text-xs text-zinc-500 uppercase tracking-wider mb-1">{label}</div>',
+      '      <div className="text-3xl font-bold text-white">',
+      '        {value}<span className="text-lg text-zinc-400 ml-1">{unit}</span>',
+      "      </div>",
+      "    </div>",
+      "  );",
+      "}",
+    ].join("\n");
+
+    RED.nodes.registerType("fc-portal-component", {
+      category: "fromcubes",
+      color: "#a8d8ea",
+      defaults: {
+        name: { value: "" },
+        compName: { value: "StatusCard", required: true },
+        compCode: { value: COMP_STARTER },
+        compInputs: { value: "label,value,unit" },
+        compOutputs: { value: "" },
+      },
+      inputs: 0,
+      outputs: 0,
+      icon: "font-awesome/fa-cube",
+      paletteLabel: "component",
+      label: function () {
+        return this.name || this.compName || "component";
+      },
+
+      oneditprepare: function () {
+        var node = this;
+        var code = node.compCode || COMP_STARTER;
+        console.log("[FC-Monaco] COMP oneditprepare, node.id=" + node.id);
+
+        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);
+            window.__fcTwClasses = classes;
+          }).fail(function (xhr) {
+            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");
+            $("#fcc-monaco").hide();
+            $("#fcc-fallback").show().val(code);
+            return;
+          }
+
+          console.log("[FC-Monaco] COMP: applying JSX defaults before model creation");
+          window.__fcApplyJsxDefaults();
+
+          var compUri = monaco.Uri.parse("file:///fc-comp-" + node.id + ".jsx");
+          console.log("[FC-Monaco] COMP: model URI=" + compUri.toString());
+          var existingModel = monaco.editor.getModel(compUri);
+          if (existingModel) {
+            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());
+
+          compEditorInstance = monaco.editor.create(
+            document.getElementById("fcc-monaco"),
+            Object.assign({ model: compModel }, window.__fcEditorOpts),
+          );
+          console.log("[FC-Monaco] COMP: editor created");
+
+          // 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);
+            markers.forEach(function (m) {
+              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()));
+          }, 500);
+        });
+      },
+
+      oneditsave: function () {
+        console.log("[FC-Monaco] COMP oneditsave");
+        var code = compEditorInstance
+          ? compEditorInstance.getValue()
+          : $("#fcc-fallback").val();
+        $("#node-input-compCode").val(code);
+        this.compCode = code;
+        if (compEditorInstance) {
+          compEditorInstance.getModel().dispose();
+          compEditorInstance.dispose();
+          compEditorInstance = null;
+          console.log("[FC-Monaco] COMP: editor + model disposed");
+        }
+      },
+
+      oneditcancel: function () {
+        console.log("[FC-Monaco] COMP oneditcancel");
+        if (compEditorInstance) {
+          compEditorInstance.getModel().dispose();
+          compEditorInstance.dispose();
+          compEditorInstance = null;
+          console.log("[FC-Monaco] COMP: editor + model disposed");
+        }
+      },
+
+      oneditresize: function (size) {
+        var h = size.height - 180;
+        if (h < 150) h = 150;
+        $("#fcc-editor-wrap").css("height", h + "px");
+        if (compEditorInstance) compEditorInstance.layout();
+      },
+    });
+  })();
+</script>
+
+<script type="text/html" data-help-name="fc-portal-component">
+  <p>
+    Defines a shared JSX component available to all
+    <strong>portal-react</strong> nodes.
+  </p>
+  <h3>Properties</h3>
+  <dl>
+    <dt>JSX Tag</dt>
+    <dd>
+      The name used as a JSX tag in portal-react pages (e.g.
+      <code>&lt;MyComponent /&gt;</code>).
+    </dd>
+    <dt>Input fields</dt>
+    <dd>Comma-separated list of expected input props (documentation only).</dd>
+    <dt>Output fields</dt>
+    <dd>Comma-separated list of output props (documentation only).</dd>
+    <dt>JSX Code</dt>
+    <dd>
+      The component function. Use <code>useNodeRed()</code> for data binding.
+    </dd>
+  </dl>
+  <h3>Usage</h3>
+  <p>
+    Place this node on the canvas, set the JSX tag name and code, then deploy.
+    All <strong>portal-react</strong> nodes will automatically have access to
+    this component.
+  </p>
+</script>
+
+<!-- ============================================================
+     portal-react – main node
+     ============================================================ -->
+<script type="text/html" data-template-name="portal-react">
+  <!-- Tabs -->
+  <div class="form-row">
+    <ul id="fc-tabs" style="min-width:600px;margin-bottom:0;"></ul>
+  </div>
+  <div id="fc-tabs-content">
+    <!-- ── Tab: Properties ── -->
+    <div id="fc-tab-props" class="fc-tab-pane" style="display:none;">
+      <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+        <input type="text" id="node-input-name" placeholder="My Portal" />
+      </div>
+      <div class="form-row">
+        <label for="node-input-endpoint"
+          ><i class="fa fa-globe"></i> Endpoint</label
+        >
+        <input type="text" id="node-input-endpoint" placeholder="/portal" />
+        <div
+          style="font-size:11px;opacity:.5;margin-top:2px;margin-left:105px;"
+          id="fc-url-hint"
+        ></div>
+      </div>
+      <div class="form-row">
+        <label for="node-input-pageTitle"
+          ><i class="fa fa-file-text-o"></i> Title</label
+        >
+        <input type="text" id="node-input-pageTitle" placeholder="Portal" />
+      </div>
+    </div>
+
+    <!-- ── Tab: JSX ── -->
+    <div id="fc-tab-jsx" class="fc-tab-pane">
+      <div class="form-row" style="margin-bottom:0;">
+        <div style="font-size:11px;opacity:.6;margin-bottom:4px;">
+          <code>useNodeRed()</code> &rarr;
+          <code>{ data, send }</code> &nbsp;|&nbsp; Components from
+          <code>fc-portal-component</code> nodes auto-imported &nbsp;|&nbsp;
+          Must export <code>&lt;App /&gt;</code> &nbsp;|&nbsp;
+          <strong>Transpiled server-side at deploy</strong>
+        </div>
+      </div>
+      <div class="form-row node-text-editor-row">
+        <div
+          id="fc-editor-wrap"
+          style="width:100%;height:420px;border:1px solid var(--red-ui-form-input-border-color,#555);border-radius:4px;overflow:hidden;position:relative;"
+        >
+          <div id="fc-monaco" style="width:100%;height:100%;"></div>
+          <textarea
+            id="fc-fallback"
+            style="display:none;width:100%;height:100%;font-family:'Cascadia Code',Consolas,monospace;font-size:13px;background:#1e1e1e;color:#d4d4d4;border:none;padding:12px;resize:none;"
+          ></textarea>
+        </div>
+      </div>
+      <div class="form-row" style="display:flex;gap:8px;margin-top:4px;">
+        <button type="button" class="red-ui-button" id="fc-btn-preview">
+          <i class="fa fa-eye"></i> Preview
+        </button>
+        <button type="button" class="red-ui-button" id="fc-btn-components">
+          <i class="fa fa-cube"></i> Components
+        </button>
+        <button type="button" class="red-ui-button" id="fc-btn-starter">
+          <i class="fa fa-magic"></i> Starter
+        </button>
+      </div>
+    </div>
+
+    <!-- ── Tab: Head HTML ── -->
+    <div id="fc-tab-head" class="fc-tab-pane" style="display:none;">
+      <div class="form-row">
+        <div style="font-size:11px;opacity:.6;margin-bottom:6px;">
+          Extra tags injected into <code>&lt;head&gt;</code>. CDN links, fonts,
+          stylesheets, meta tags.
+        </div>
+        <div
+          id="fc-head-wrap"
+          style="width:100%;height:420px;border:1px solid var(--red-ui-form-input-border-color,#555);border-radius:4px;overflow:hidden;position:relative;"
+        >
+          <div id="fc-head-monaco" style="width:100%;height:100%;"></div>
+          <textarea
+            id="fc-head-fallback"
+            style="display:none;width:100%;height:100%;font-family:'Cascadia Code',Consolas,monospace;font-size:13px;background:#1e1e1e;color:#d4d4d4;border:none;padding:12px;resize:none;"
+            placeholder='<link rel="stylesheet" href="...">'
+          ></textarea>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <input type="hidden" id="node-input-componentCode" />
+  <input type="hidden" id="node-input-customHead" />
+</script>
+
+<script type="text/javascript">
+  (function () {
+    var editorInstance = null;
+    var headEditorInstance = null;
+
+    var STARTER = [
+      "// useNodeRed() \u2192 { data, send }",
+      "//   data  = last msg.payload from input wire",
+      "//   send(payload, topic?) = push msg to output wire",
+      "// Components from fc-portal-component nodes are available by name.",
+      "",
+      "function App() {",
+      "  const { data, send } = useNodeRed();",
+      "  const d = data || {};",
+      "",
+      "  return (",
+      '    <div className="min-h-screen bg-zinc-950 p-8">',
+      '      <h1 className="text-2xl font-light text-cyan-400 mb-6">Portal</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>",
+      "      <button",
+      '        className="mt-6 px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-500 transition-colors"',
+      "        onClick={() => send({ clicked: true })}",
+      "      >",
+      "        Send to Node-RED",
+      "      </button>",
+      "    </div>",
+      "  );",
+      "}",
+    ].join("\n");
+
+    RED.nodes.registerType("portal-react", {
+      category: "fromcubes",
+      color: "#61dafb",
+      defaults: {
+        name: { value: "" },
+        endpoint: { value: "/portal", required: true },
+        pageTitle: { value: "Portal" },
+        componentCode: { value: STARTER },
+        customHead: { value: "" },
+      },
+      inputs: 1,
+      outputs: 1,
+      icon: "font-awesome/fa-desktop",
+      paletteLabel: "portal react",
+      label: function () {
+        return this.name || this.endpoint || "portal react";
+      },
+
+      oneditprepare: function () {
+        var node = this;
+        var code = node.componentCode || STARTER;
+        var headCode = node.customHead || "";
+        console.log("[FC-Monaco] PORTAL oneditprepare, node.id=" + node.id);
+
+        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);
+            window.__fcTwClasses = classes;
+          }).fail(function (xhr) {
+            console.error("[FC-Monaco] tw-classes FAILED:", xhr.status, xhr.statusText);
+          });
+        }
+
+        // Tabs
+        var fcTabs = RED.tabs.create({
+          id: "fc-tabs",
+          onchange: function (tab) {
+            $(".fc-tab-pane").hide();
+            $("#" + tab.id).show();
+            setTimeout(function () {
+              if (editorInstance) editorInstance.layout();
+              if (headEditorInstance) headEditorInstance.layout();
+            }, 0);
+          },
+        });
+        fcTabs.addTab({ id: "fc-tab-jsx", label: "JSX" });
+        fcTabs.addTab({ id: "fc-tab-props", label: "Properties" });
+        fcTabs.addTab({ id: "fc-tab-head", label: "Head HTML" });
+        fcTabs.activateTab("fc-tab-jsx");
+
+        // URL hint
+        function updateHint() {
+          var ep = $("#node-input-endpoint").val() || "/portal";
+          $("#fc-url-hint").text("Page served at: http://<host>:1880" + ep);
+        }
+        $("#node-input-endpoint").on("input", updateHint);
+        updateHint();
+
+        // Monaco
+        window.__fcLoadMonaco(function (failed) {
+          if (failed) {
+            console.error("[FC-Monaco] PORTAL: Monaco load failed, using fallback textarea");
+            $("#fc-monaco").hide();
+            $("#fc-fallback").show().val(code);
+            $("#fc-head-monaco").hide();
+            $("#fc-head-fallback").show().val(headCode);
+            return;
+          }
+
+          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");
+          console.log("[FC-Monaco] PORTAL: JSX model URI=" + jsxUri.toString());
+          var existingJsx = monaco.editor.getModel(jsxUri);
+          if (existingJsx) {
+            console.log("[FC-Monaco] PORTAL: disposing existing JSX model");
+            existingJsx.dispose();
+          }
+          var jsxModel = monaco.editor.createModel(code, "javascript", jsxUri);
+          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);
+
+          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);
+          headEditorInstance = monaco.editor.create(
+            document.getElementById("fc-head-monaco"),
+            Object.assign({ model: headModel }, opts),
+          );
+          console.log("[FC-Monaco] PORTAL: Head editor created");
+
+          // 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);
+            markers.forEach(function (m) {
+              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()));
+          }, 500);
+        });
+
+        // Buttons
+        $("#fc-btn-starter").on("click", function () {
+          if (editorInstance) editorInstance.setValue(STARTER);
+          else $("#fc-fallback").val(STARTER);
+        });
+
+        $("#fc-btn-preview").on("click", function () {
+          var ep = $("#node-input-endpoint").val();
+          if (ep) window.open(ep, "_blank");
+        });
+
+        $("#fc-btn-components").on("click", function () {
+          $.getJSON("portal-react/registry", function (reg) {
+            var names = Object.keys(reg);
+            if (!names.length) {
+              RED.notify("No component nodes on canvas.", "warning");
+              return;
+            }
+            var html = "<p>Click to insert:</p>";
+            names.forEach(function (n) {
+              var c = reg[n];
+              html +=
+                '<div style="padding:4px 0;border-bottom:1px solid rgba(128,128,128,.2)">' +
+                '<button class="red-ui-button fc-lib-ins" data-name="' +
+                n +
+                '">' +
+                n +
+                "</button>" +
+                ' <span style="opacity:.5;font-size:11px">in:[' +
+                (c.inputs || []).join(",") +
+                "] out:[" +
+                (c.outputs || []).join(",") +
+                "]</span></div>";
+            });
+            $("<div></div>")
+              .html(html)
+              .dialog({
+                title: "Available Components",
+                modal: true,
+                width: 400,
+                buttons: [
+                  {
+                    text: "Close",
+                    click: function () {
+                      $(this).dialog("close");
+                    },
+                  },
+                ],
+                close: function () {
+                  $(this).remove();
+                },
+              });
+            $(document).on("click", ".fc-lib-ins", function () {
+              var tag = "<" + $(this).data("name") + " />";
+              if (editorInstance) {
+                editorInstance.trigger("keyboard", "type", { text: tag });
+                editorInstance.focus();
+              } else {
+                var ta = $("#fc-fallback")[0];
+                var p = ta.selectionStart,
+                  v = ta.value;
+                ta.value = v.slice(0, p) + tag + v.slice(p);
+              }
+            });
+          });
+        });
+      },
+
+      oneditsave: function () {
+        console.log("[FC-Monaco] PORTAL oneditsave");
+        var code = editorInstance
+          ? editorInstance.getValue()
+          : $("#fc-fallback").val();
+        $("#node-input-componentCode").val(code);
+        this.componentCode = code;
+
+        var head = headEditorInstance
+          ? headEditorInstance.getValue()
+          : $("#fc-head-fallback").val();
+        $("#node-input-customHead").val(head);
+        this.customHead = head;
+
+        if (editorInstance) {
+          editorInstance.getModel().dispose();
+          editorInstance.dispose();
+          editorInstance = null;
+          console.log("[FC-Monaco] PORTAL: JSX editor + model disposed");
+        }
+        if (headEditorInstance) {
+          headEditorInstance.getModel().dispose();
+          headEditorInstance.dispose();
+          headEditorInstance = null;
+          console.log("[FC-Monaco] PORTAL: Head editor + model disposed");
+        }
+      },
+
+      oneditcancel: function () {
+        console.log("[FC-Monaco] PORTAL oneditcancel");
+        if (editorInstance) {
+          editorInstance.getModel().dispose();
+          editorInstance.dispose();
+          editorInstance = null;
+          console.log("[FC-Monaco] PORTAL: JSX editor + model disposed");
+        }
+        if (headEditorInstance) {
+          headEditorInstance.getModel().dispose();
+          headEditorInstance.dispose();
+          headEditorInstance = null;
+          console.log("[FC-Monaco] PORTAL: Head editor + model disposed");
+        }
+      },
+
+      oneditresize: function (size) {
+        var tabsH = $("#fc-tabs").outerHeight(true) || 0;
+        var rows = $(
+          "#dialog-form>div:not(#fc-tabs-content):not(:has(#fc-tabs))",
+        );
+        var h = size.height;
+        rows.each(function () {
+          h -= $(this).outerHeight(true);
+        });
+        h -= tabsH + 30;
+        if (h < 200) h = 200;
+        $("#fc-editor-wrap").css("height", h + "px");
+        $("#fc-head-wrap").css("height", h + "px");
+        if (editorInstance) editorInstance.layout();
+        if (headEditorInstance) headEditorInstance.layout();
+      },
+    });
+  })();
+</script>
+
+<!-- ============================================================
+     Help
+     ============================================================ -->
+<script type="text/html" data-help-name="portal-react">
+  <p>
+    Renders a React application on a configurable HTTP endpoint with live
+    WebSocket data binding.
+  </p>
+  <h3>Key difference from Dashboard 2.0</h3>
+  <p>
+    JSX is transpiled <strong>server-side at deploy time</strong> using Sucrase.
+    The browser receives plain JS — no Babel, no runtime compilation. Page
+    weight: ~45 KB (React production).
+  </p>
+
+  <h3>Inputs</h3>
+  <p>
+    <code>msg.payload</code> is pushed to all connected clients via WebSocket.
+  </p>
+  <pre>
+const { data, send } = useNodeRed();
+// data = last msg.payload</pre
+  >
+
+  <h3>Outputs</h3>
+  <p>
+    <code>send(payload, topic?)</code> emits a <code>msg</code> on the node's
+    output wire.
+  </p>
+
+  <h3>Deploy behavior</h3>
+  <ul>
+    <li>
+      Each deploy re-transpiles JSX (cached by content hash — unchanged code is
+      instant)
+    </li>
+    <li>
+      Active WebSocket clients receive close code 1001 and auto-reconnect
+      (exponential backoff)
+    </li>
+    <li>
+      Stale HTTP routes and WS handlers are cleaned up before new ones register
+    </li>
+    <li>
+      Transpile errors show in node status and as an error page on the endpoint
+    </li>
+  </ul>
+
+  <h3>Shared Components</h3>
+  <p>
+    Components defined in <strong>fc-portal-component</strong> nodes on the
+    canvas are auto-injected into every portal-react page. Use them as JSX tags
+    by their component name.
+  </p>
+
+  <h3>Custom Head HTML</h3>
+  <p>
+    Inject CDN links, fonts, or extra stylesheets into
+    <code>&lt;head&gt;</code>. Example:
+  </p>
+  <pre>
+&lt;link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet"&gt;</pre
+  >
+</script>